message: feat: add sr-only styles to styled-system
diff: @@ -8,6 +8,29 @@ const floatTransform: PropConfig["transform"] = (value, _, props = {}) => {
  return getIsRtl(props) ? map[value] : value
  }
  +const srOnly = {
  + border: "0px",
  + clip: "rect(0, 0, 0, 0)",
  + width: "1px",
  + height: "1px",
  + margin: "-1px",
  + padding: "0px",
  + overflow: "hidden",
  + whiteSpace: "nowrap",
  + position: "absolute",
  +}
  +
  +const srFocusable = {
  + position: "static",
  + width: "auto",
  + height: "auto",
  + clip: "auto",
  + padding: "0",
  + margin: "0",
  + overflow: "visible",
  + whiteSpace: "normal",
  +}
  +
  const config: Config = {
  animation: true,
  appearance: true,
  @@ -24,6 +47,14 @@ const config: Config = {
  },
  willChange: true,
  filter: true,
  + srOnly: {
  + property: "&",
  + transform(value) {
  + if (value === true) return srOnly
  + if (value === "focusable") return srFocusable
  + return {}
  + },
  + },
  }
  export interface OtherProps {
  @@ -75,6 +106,13 @@ export interface OtherProps {
  * The CSS `filter` property
  */
  filter?: ResponsiveValue<CSS.Property.Filter>
  + /**
  + * If `true`, hide an element visually without hiding it from screen readers.
  + *
  + * If `focusable`, the sr-only styles will be undone, making the element visible
  + * to sighted users as well as screen readers.
  + */
  + srOnly?: true | "focusable"
  }
  export const others = system(config)
  