@seed-design/css 0.0.4 → 0.0.6

package/recipes/toggle-button.css

@@ -1,4 +1,4 @@
-.seed-toggle-button__root {
+.seed-toggle-button {
     display: inline-flex;
     box-sizing: border-box;
     align-items: center;
@@ -9,29 +9,29 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-decoration: none;
-    font-family: inherit;
     flex-shrink: 0;
-    font-weight: var(--seed-font-weight-bold);
+    font-family: inherit;
 }
-.seed-toggle-button__root:is(:focus, [data-focus]) {
+.seed-toggle-button:is(:focus, [data-focus]) {
     outline: none;
 }
-.seed-toggle-button__root:is(:disabled, [disabled], [data-disabled]) {
+.seed-toggle-button:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
 }
-.seed-toggle-button__root {
+.seed-toggle-button {
     transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing);
+    font-weight: var(--seed-font-weight-bold);
 }
-.seed-toggle-button__root--variant_brandSolid {
+.seed-toggle-button--variant_brandSolid {
     background: var(--seed-color-bg-brand-solid);
     color: var(--seed-color-palette-static-white);
     --track-color: var(--seed-color-palette-static-white-alpha-200);
     --range-color: var(--seed-color-palette-static-white);
 }
-.seed-toggle-button__root--variant_brandSolid:is(:active, [data-active]) {
+.seed-toggle-button--variant_brandSolid:is(:active, [data-active]) {
     background: var(--seed-color-bg-brand-solid-pressed);
 }
-.seed-toggle-button__root--variant_brandSolid:is([aria-pressed=true], [data-pressed]) {
+.seed-toggle-button--variant_brandSolid:is([aria-pressed=true], [data-pressed]) {
     background: var(--seed-color-bg-neutral-weak);
     color: var(--seed-color-fg-neutral);
     --track-color: var(--seed-color-palette-gray-500);
@@ -39,35 +39,35 @@
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
 }
-.seed-toggle-button__root--variant_brandSolid:is([aria-pressed=true], [data-pressed]):is(:active, [data-active]) {
+.seed-toggle-button--variant_brandSolid:is([aria-pressed=true], [data-pressed]):is(:active, [data-active]) {
     background: var(--seed-color-bg-neutral-weak-pressed);
 }
-.seed-toggle-button__root--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
+.seed-toggle-button--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
     background: var(--seed-color-bg-disabled);
     color: var(--seed-color-fg-disabled);
     --seed-prefix-icon-color: var(--seed-color-fg-disabled);
     --seed-suffix-icon-color: var(--seed-color-fg-disabled);
 }
-.seed-toggle-button__root--variant_brandSolid[data-loading] {
+.seed-toggle-button--variant_brandSolid[data-loading] {
     background: var(--seed-color-bg-brand-solid-pressed);
 }
-.seed-toggle-button__root--variant_brandSolid:is([aria-pressed=true], [data-pressed])[data-loading] {
+.seed-toggle-button--variant_brandSolid:is([aria-pressed=true], [data-pressed])[data-loading] {
     background: var(--seed-color-bg-neutral-weak-pressed);
 }
-.seed-toggle-button__root--variant_brandSolid {
+.seed-toggle-button--variant_brandSolid {
     --seed-prefix-icon-color: var(--seed-color-palette-static-white);
     --seed-suffix-icon-color: var(--seed-color-palette-static-white);
 }
-.seed-toggle-button__root--variant_neutralWeak {
+.seed-toggle-button--variant_neutralWeak {
     background: var(--seed-color-bg-neutral-weak);
     color: var(--seed-color-fg-neutral);
     --track-color: var(--seed-color-palette-gray-500);
     --range-color: var(--seed-color-fg-neutral);
 }
-.seed-toggle-button__root--variant_neutralWeak:is(:active, [data-active]) {
+.seed-toggle-button--variant_neutralWeak:is(:active, [data-active]) {
     background: var(--seed-color-bg-neutral-weak-pressed);
 }
-.seed-toggle-button__root--variant_neutralWeak:is([aria-pressed=true], [data-pressed]) {
+.seed-toggle-button--variant_neutralWeak:is([aria-pressed=true], [data-pressed]) {
     background: var(--seed-color-bg-neutral-weak);
     color: var(--seed-color-fg-neutral);
     --track-color: var(--seed-color-palette-gray-500);
@@ -75,26 +75,26 @@
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
 }
-.seed-toggle-button__root--variant_neutralWeak:is([aria-pressed=true], [data-pressed]):is(:active, [data-active]) {
+.seed-toggle-button--variant_neutralWeak:is([aria-pressed=true], [data-pressed]):is(:active, [data-active]) {
     background: var(--seed-color-bg-neutral-weak-pressed);
 }
-.seed-toggle-button__root--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
+.seed-toggle-button--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
     background: var(--seed-color-bg-disabled);
     color: var(--seed-color-fg-disabled);
     --seed-prefix-icon-color: var(--seed-color-fg-disabled);
     --seed-suffix-icon-color: var(--seed-color-fg-disabled);
 }
-.seed-toggle-button__root--variant_neutralWeak[data-loading] {
+.seed-toggle-button--variant_neutralWeak[data-loading] {
     background: var(--seed-color-bg-neutral-weak-pressed);
 }
-.seed-toggle-button__root--variant_neutralWeak:is([aria-pressed=true], [data-pressed])[data-loading] {
+.seed-toggle-button--variant_neutralWeak:is([aria-pressed=true], [data-pressed])[data-loading] {
     background: var(--seed-color-bg-neutral-weak-pressed);
 }
-.seed-toggle-button__root--variant_neutralWeak {
+.seed-toggle-button--variant_neutralWeak {
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
 }
-.seed-toggle-button__root--size_xsmall {
+.seed-toggle-button--size_xsmall {
     height: var(--seed-dimension-x8);
     border-radius: var(--seed-radius-full);
     gap: var(--seed-dimension-x1);
@@ -106,7 +106,7 @@
     --seed-prefix-icon-size: var(--seed-dimension-x3_5);
     --seed-suffix-icon-size: var(--seed-dimension-x3_5);
 }
-.seed-toggle-button__root--size_small {
+.seed-toggle-button--size_small {
     height: var(--seed-dimension-x9);
     border-radius: var(--seed-radius-full);
     gap: var(--seed-dimension-x1);

package/recipes/toggle-button.d.ts

@@ -15,13 +15,11 @@ declare type ToggleButtonVariantMap = {
 
 export declare type ToggleButtonVariantProps = Partial<ToggleButtonVariant>;
 
-export declare type ToggleButtonSlotName = "root";
-
 export declare const toggleButtonVariantMap: ToggleButtonVariantMap;
 
 export declare const toggleButton: ((
   props?: ToggleButtonVariantProps,
-) => Record<ToggleButtonSlotName, string>) & {
+) => string) & {
   splitVariantProps: <T extends ToggleButtonVariantProps>(
     props: T,
   ) => [ToggleButtonVariantProps, Omit<T, keyof ToggleButtonVariantProps>];

package/recipes/toggle-button.mjs

@@ -1,12 +1,5 @@
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
-const toggleButtonSlotNames = [
-  [
-    "root",
-    "seed-toggle-button__root"
-  ]
-];
-
 const defaultVariant = {
   "variant": "brandSolid",
   "size": "small"
@@ -28,13 +21,10 @@ export const toggleButtonVariantMap = {
 export const toggleButtonVariantKeys = Object.keys(toggleButtonVariantMap);
 
 export function toggleButton(props) {
-  return Object.fromEntries(
-    toggleButtonSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
+  return createClassName(
+    "seed-toggle-button",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
   );
 }
 

package/vars/component/callout.d.ts

@@ -24,14 +24,11 @@ export declare const vars: {
       "link": {
         "fontSize": "var(--seed-font-size-t4)",
         "lineHeight": "var(--seed-line-height-t4)",
-        "fontWeight": "var(--seed-font-weight-regular)",
-        "height": "var(--seed-dimension-x10)",
-        "marginLeft": "var(--seed-dimension-x4)"
+        "fontWeight": "var(--seed-font-weight-regular)"
       },
       "suffixIcon": {
         "size": "var(--seed-dimension-x4)",
-        "targetSize": "var(--seed-dimension-x10)",
-        "marginLeft": "var(--seed-dimension-x4)"
+        "targetSize": "var(--seed-dimension-x10)"
       }
     }
   },

package/vars/component/callout.mjs

@@ -24,14 +24,11 @@ export const vars = {
       "link": {
         "fontSize": "var(--seed-font-size-t4)",
         "lineHeight": "var(--seed-line-height-t4)",
-        "fontWeight": "var(--seed-font-weight-regular)",
-        "height": "var(--seed-dimension-x10)",
-        "marginLeft": "var(--seed-dimension-x4)"
+        "fontWeight": "var(--seed-font-weight-regular)"
       },
       "suffixIcon": {
         "size": "var(--seed-dimension-x4)",
-        "targetSize": "var(--seed-dimension-x10)",
-        "marginLeft": "var(--seed-dimension-x4)"
+        "targetSize": "var(--seed-dimension-x10)"
       }
     }
   },

package/vars/component/help-bubble.d.ts

@@ -9,7 +9,10 @@ export declare const vars: {
       },
       "arrow": {
         "color": "var(--seed-color-bg-neutral-solid)",
-        "size": "var(--seed-dimension-x2_5)"
+        "width": "12px",
+        "height": "8px",
+        "cornerRadius": "2px",
+        "gutter": "4px"
       },
       "title": {
         "color": "var(--seed-color-palette-static-white)",

package/vars/component/help-bubble.mjs

@@ -9,7 +9,10 @@ export const vars = {
       },
       "arrow": {
         "color": "var(--seed-color-bg-neutral-solid)",
-        "size": "var(--seed-dimension-x2_5)"
+        "width": "12px",
+        "height": "8px",
+        "cornerRadius": "2px",
+        "gutter": "4px"
       },
       "title": {
         "color": "var(--seed-color-palette-static-white)",

package/vars/component/index.d.ts

@@ -23,6 +23,7 @@ export { vars as identityPlaceholder } from "./identity-placeholder";
 export { vars as inlineBanner } from "./inline-banner";
 export { vars as linkContent } from "./link-content";
 export { vars as mannerTempBadge } from "./manner-temp-badge";
+export { vars as mannerTemp } from "./manner-temp";
 export { vars as progressCircle } from "./progress-circle";
 export { vars as radio } from "./radio";
 export { vars as reactionButton } from "./reaction-button";
@@ -34,6 +35,7 @@ export { vars as snackbar } from "./snackbar";
 export { vars as switch } from "./switch";
 export { vars as tab } from "./tab";
 export { vars as tablist } from "./tablist";
+export { vars as textButton } from "./text-button";
 export { vars as textField } from "./text-field";
 export { vars as toggleButton } from "./toggle-button";
 export { vars as topNavigation } from "./top-navigation";

package/vars/component/index.mjs

@@ -23,6 +23,7 @@ export { vars as identityPlaceholder } from "./identity-placeholder.mjs";
 export { vars as inlineBanner } from "./inline-banner.mjs";
 export { vars as linkContent } from "./link-content.mjs";
 export { vars as mannerTempBadge } from "./manner-temp-badge.mjs";
+export { vars as mannerTemp } from "./manner-temp.mjs";
 export { vars as progressCircle } from "./progress-circle.mjs";
 export { vars as radio } from "./radio.mjs";
 export { vars as reactionButton } from "./reaction-button.mjs";
@@ -34,6 +35,7 @@ export { vars as snackbar } from "./snackbar.mjs";
 export { vars as switch } from "./switch.mjs";
 export { vars as tab } from "./tab.mjs";
 export { vars as tablist } from "./tablist.mjs";
+export { vars as textButton } from "./text-button.mjs";
 export { vars as textField } from "./text-field.mjs";
 export { vars as toggleButton } from "./toggle-button.mjs";
 export { vars as topNavigation } from "./top-navigation.mjs";

package/vars/component/inline-banner.d.ts

@@ -21,7 +21,7 @@ export declare const vars: {
         "fontWeight": "var(--seed-font-weight-medium)"
       },
       "link": {
-        "height": "var(--seed-dimension-x10)",
+        "targetHeight": "var(--seed-dimension-x10)",
         "fontSize": "var(--seed-font-size-t2)",
         "lineHeight": "var(--seed-line-height-t2)",
         "fontWeight": "var(--seed-font-weight-regular)",

package/vars/component/inline-banner.mjs

@@ -21,7 +21,7 @@ export const vars = {
         "fontWeight": "var(--seed-font-weight-medium)"
       },
       "link": {
-        "height": "var(--seed-dimension-x10)",
+        "targetHeight": "var(--seed-dimension-x10)",
         "fontSize": "var(--seed-font-size-t2)",
         "lineHeight": "var(--seed-line-height-t2)",
         "fontWeight": "var(--seed-font-weight-regular)",

package/vars/component/manner-temp.d.ts

@@ -0,0 +1,59 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x1)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      },
+      "emote": {
+        "size": "var(--seed-dimension-x6)"
+      }
+    }
+  },
+  "levelL1": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l1-text)"
+      }
+    }
+  },
+  "levelL2": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l2-text)"
+      }
+    }
+  },
+  "levelL3": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l3-text)"
+      }
+    }
+  },
+  "levelL4": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l4-text)"
+      }
+    }
+  },
+  "levelL5": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l5-text)"
+      }
+    }
+  },
+  "levelL6": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l6-text)"
+      }
+    }
+  }
+}

package/vars/component/manner-temp.mjs

@@ -0,0 +1,59 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x1)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      },
+      "emote": {
+        "size": "var(--seed-dimension-x6)"
+      }
+    }
+  },
+  "levelL1": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l1-text)"
+      }
+    }
+  },
+  "levelL2": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l2-text)"
+      }
+    }
+  },
+  "levelL3": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l3-text)"
+      }
+    }
+  },
+  "levelL4": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l4-text)"
+      }
+    }
+  },
+  "levelL5": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l5-text)"
+      }
+    }
+  },
+  "levelL6": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l6-text)"
+      }
+    }
+  }
+}

package/vars/component/text-button.d.ts

@@ -0,0 +1,24 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x9)",
+        "gap": "var(--seed-dimension-x1)",
+        "paddingX": "var(--seed-dimension-x3_5)",
+        "paddingY": "var(--seed-dimension-x2)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-muted)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    }
+  }
+}

package/vars/component/text-button.mjs

@@ -0,0 +1,24 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x9)",
+        "gap": "var(--seed-dimension-x1)",
+        "paddingX": "var(--seed-dimension-x3_5)",
+        "paddingY": "var(--seed-dimension-x2)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-muted)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    }
+  }
+}

package/vars/component/toggle-button.d.ts

@@ -170,7 +170,8 @@ export declare const vars: {
         "size": "var(--seed-dimension-x3_5)"
       },
       "label": {
-        "fontSize": "var(--seed-font-size-t4)"
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
       },
       "progressCircle": {
         "size": "14px",
@@ -194,7 +195,8 @@ export declare const vars: {
         "size": "var(--seed-dimension-x3_5)"
       },
       "label": {
-        "fontSize": "var(--seed-font-size-t4)"
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
       },
       "progressCircle": {
         "size": "14px",

package/vars/component/toggle-button.mjs

@@ -170,7 +170,8 @@ export const vars = {
         "size": "var(--seed-dimension-x3_5)"
       },
       "label": {
-        "fontSize": "var(--seed-font-size-t4)"
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
       },
       "progressCircle": {
         "size": "14px",
@@ -194,7 +195,8 @@ export const vars = {
         "size": "var(--seed-dimension-x3_5)"
       },
       "label": {
-        "fontSize": "var(--seed-font-size-t4)"
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
       },
       "progressCircle": {
         "size": "14px",

package/vars/component/typography.d.ts

@@ -152,6 +152,24 @@ export declare const vars: {
       }
     }
   },
+  "textStyleT6Regular": {
+    "enabled": {
+      "root": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      }
+    }
+  },
+  "textStyleT6Medium": {
+    "enabled": {
+      "root": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    }
+  },
   "textStyleT6Bold": {
     "enabled": {
       "root": {
@@ -161,6 +179,24 @@ export declare const vars: {
       }
     }
   },
+  "textStyleT7Regular": {
+    "enabled": {
+      "root": {
+        "fontSize": "var(--seed-font-size-t7)",
+        "lineHeight": "var(--seed-line-height-t7)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      }
+    }
+  },
+  "textStyleT7Medium": {
+    "enabled": {
+      "root": {
+        "fontSize": "var(--seed-font-size-t7)",
+        "lineHeight": "var(--seed-line-height-t7)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    }
+  },
   "textStyleT7Bold": {
     "enabled": {
       "root": {

package/vars/component/typography.mjs

@@ -152,6 +152,24 @@ export const vars = {
       }
     }
   },
+  "textStyleT6Regular": {
+    "enabled": {
+      "root": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      }
+    }
+  },
+  "textStyleT6Medium": {
+    "enabled": {
+      "root": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    }
+  },
   "textStyleT6Bold": {
     "enabled": {
       "root": {
@@ -161,6 +179,24 @@ export const vars = {
       }
     }
   },
+  "textStyleT7Regular": {
+    "enabled": {
+      "root": {
+        "fontSize": "var(--seed-font-size-t7)",
+        "lineHeight": "var(--seed-line-height-t7)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      }
+    }
+  },
+  "textStyleT7Medium": {
+    "enabled": {
+      "root": {
+        "fontSize": "var(--seed-font-size-t7)",
+        "lineHeight": "var(--seed-line-height-t7)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    }
+  },
   "textStyleT7Bold": {
     "enabled": {
       "root": {

package/recipes/visually-hidden.css

@@ -1,11 +0,0 @@
-.seed-visually-hidden__root {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px
-}

package/recipes/visually-hidden.d.ts

@@ -1,21 +0,0 @@
-declare interface VisuallyHiddenVariant {
-  
-}
-
-declare type VisuallyHiddenVariantMap = {
-  [key in keyof VisuallyHiddenVariant]: Array<VisuallyHiddenVariant[key]>;
-};
-
-export declare type VisuallyHiddenVariantProps = Partial<VisuallyHiddenVariant>;
-
-export declare type VisuallyHiddenSlotName = "root";
-
-export declare const visuallyHiddenVariantMap: VisuallyHiddenVariantMap;
-
-export declare const visuallyHidden: ((
-  props?: VisuallyHiddenVariantProps,
-) => Record<VisuallyHiddenSlotName, string>) & {
-  splitVariantProps: <T extends VisuallyHiddenVariantProps>(
-    props: T,
-  ) => [VisuallyHiddenVariantProps, Omit<T, keyof VisuallyHiddenVariantProps>];
-}

package/recipes/visually-hidden.mjs

@@ -1,31 +0,0 @@
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const visuallyHiddenSlotNames = [
-  [
-    "root",
-    "seed-visually-hidden__root"
-  ]
-];
-
-const defaultVariant = {};
-
-const compoundVariants = [];
-
-export const visuallyHiddenVariantMap = {};
-
-export const visuallyHiddenVariantKeys = Object.keys(visuallyHiddenVariantMap);
-
-export function visuallyHidden(props) {
-  return Object.fromEntries(
-    visuallyHiddenSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(visuallyHidden, { splitVariantProps: (props) => splitVariantProps(props, visuallyHiddenVariantMap) });
-
-// @recipe(seed): visually-hidden