silver-ui 0.1.1 → 0.3.0

package/dist/{chunk-RJXHAQCR.cjs → chunk-JAHKLROD.cjs}

@@ -1,10 +1,12 @@
 'use strict';
 
-var chunkWEEYUS7M_cjs = require('./chunk-WEEYUS7M.cjs');
-var chunkI6IGTQLG_cjs = require('./chunk-I6IGTQLG.cjs');
-var chunk5G3BY75L_cjs = require('./chunk-5G3BY75L.cjs');
-var chunk2WP6NYYY_cjs = require('./chunk-2WP6NYYY.cjs');
-var chunkPHFEQG4E_cjs = require('./chunk-PHFEQG4E.cjs');
+var chunkIXJOPMJX_cjs = require('./chunk-IXJOPMJX.cjs');
+var chunkVXBVSYPA_cjs = require('./chunk-VXBVSYPA.cjs');
+var chunkKFEXS6OK_cjs = require('./chunk-KFEXS6OK.cjs');
+var chunk2P6D43V2_cjs = require('./chunk-2P6D43V2.cjs');
+var chunkYBPG5RPR_cjs = require('./chunk-YBPG5RPR.cjs');
+var chunkYXYD5HKL_cjs = require('./chunk-YXYD5HKL.cjs');
+var chunk4TIAKZ4Q_cjs = require('./chunk-4TIAKZ4Q.cjs');
 var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
 var lucideReact = require('lucide-react');
 var react = require('react');
@@ -43,9 +45,9 @@ function TextInput({
 }) {
   const inputId = react.useId();
   const descriptionID = description != null ? `${inputId}-description` : void 0;
-  const statusMessageID = chunk5G3BY75L_cjs.getStatusMessageID(inputId, status);
-  const describedBy = chunk5G3BY75L_cjs.getDescribedBy(descriptionID, statusMessageID);
-  const inputGroup = chunkWEEYUS7M_cjs.useInputGroup();
+  const statusMessageID = chunk2P6D43V2_cjs.getStatusMessageID(inputId, status);
+  const describedBy = chunk2P6D43V2_cjs.getDescribedBy(descriptionID, statusMessageID);
+  const inputGroup = chunkIXJOPMJX_cjs.useInputGroup();
   const effectiveDisabled = isDisabled || inputGroup?.isDisabled === true;
   const size = inputGroup?.size ?? sizeProp;
   const effectiveStatusType = status?.type ?? inputGroup?.statusType;
@@ -53,7 +55,7 @@ function TextInput({
     "div",
     {
       className: chunkSPDVNY2Z_cjs.cx(
-        chunkI6IGTQLG_cjs.inputRecipe({
+        chunkVXBVSYPA_cjs.inputRecipe({
           size,
           status: effectiveStatusType,
           isDisabled: effectiveDisabled
@@ -62,7 +64,7 @@ function TextInput({
       ),
       style: inputGroup != null ? style : void 0,
       children: [
-        startIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkI6IGTQLG_cjs.inputStyles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
+        startIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkVXBVSYPA_cjs.inputStyles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -73,7 +75,7 @@ function TextInput({
             "aria-required": isRequired ?? void 0,
             autoComplete,
             autoFocus: hasAutoFocus,
-            className: chunkI6IGTQLG_cjs.inputStyles.control,
+            className: chunkVXBVSYPA_cjs.inputStyles.control,
             "data-autofocus": hasAutoFocus || void 0,
             "data-testid": dataTestId,
             disabled: effectiveDisabled,
@@ -96,18 +98,19 @@ function TextInput({
           }
         ),
         hasClear && value !== "" && !effectiveDisabled ? /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          chunkYBPG5RPR_cjs.Button,
           {
-            "aria-label": `Clear ${label}`,
-            className: chunkI6IGTQLG_cjs.inputStyles.clearButton,
+            icon: lucideReact.X,
+            isIconOnly: true,
+            label: `Clear ${label}`,
             onClick: () => onChange("", null),
-            type: "button",
-            children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { icon: lucideReact.X, size: "sm" })
+            size: "sm",
+            variant: "ghost"
           }
         ) : null,
         endContent,
-        isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunk2WP6NYYY_cjs.Spinner, { size: "sm" }) : null,
-        status != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkI6IGTQLG_cjs.inputStyles.iconSlot, children: chunk5G3BY75L_cjs.getStatusIcon(status.type) }) : null
+        isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkYXYD5HKL_cjs.Spinner, { size: "sm" }) : null,
+        status != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkVXBVSYPA_cjs.inputStyles.iconSlot, children: chunk2P6D43V2_cjs.getStatusIcon(status.type) }) : null
       ]
     }
   );
@@ -115,7 +118,7 @@ function TextInput({
     return inputWrapper;
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkI6IGTQLG_cjs.Field,
+    chunkKFEXS6OK_cjs.Field,
     {
       className,
       description,
@@ -123,8 +126,7 @@ function TextInput({
       inputId,
       isDisabled,
       isLabelHidden,
-      isOptional,
-      isRequired,
+      ...chunkKFEXS6OK_cjs.getNecessity(isOptional, isRequired),
       label,
       labelIcon,
       labelTooltip,
@@ -137,5 +139,5 @@ function TextInput({
 TextInput.displayName = "TextInput";
 
 exports.TextInput = TextInput;
-//# sourceMappingURL=chunk-RJXHAQCR.cjs.map
-//# sourceMappingURL=chunk-RJXHAQCR.cjs.map
+//# sourceMappingURL=chunk-JAHKLROD.cjs.map
+//# sourceMappingURL=chunk-JAHKLROD.cjs.map

package/dist/chunk-JAHKLROD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TextInput/TextInput.tsx"],"names":["useId","getStatusMessageID","getDescribedBy","useInputGroup","jsxs","cx","inputRecipe","jsx","inputStyles","Icon","Button","X","Spinner","getStatusIcon","Field","getNecessity"],"mappings":"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","file":"chunk-JAHKLROD.cjs","sourcesContent":["import {X} from 'lucide-react';\nimport {\n  useId,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {cx} from '../../internal/cx';\nimport {Button} from '../Button';\nimport {\n  Field,\n  getNecessity,\n  type FieldNecessity,\n  type InputSize,\n  type InputStatus,\n} from '../Field';\nimport {inputRecipe, inputStyles} from '../Field/inputStyles';\nimport {\n  getDescribedBy,\n  getStatusIcon,\n  getStatusMessageID,\n} from '../Field/inputUtils';\nimport {Icon, type IconComponent} from '../Icon';\nimport {useInputGroup} from '../InputGroup';\nimport {Spinner} from '../Spinner';\n\nexport type TextInputType = 'email' | 'password' | 'text';\n\nexport type TextInputProps = {\n  /**\n   * HTML autocomplete hint for the browser.\n   */\n  autoComplete?: string;\n  /**\n   * Additional CSS class names applied to the input wrapper.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the input element.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting text rendered below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Content rendered after the input, before the status icon.\n   */\n  endContent?: ReactNode;\n  /**\n   * Whether to focus the input on mount.\n   */\n  hasAutoFocus?: boolean;\n  /**\n   * Whether to show a clear button when the input has a value.\n   */\n  hasClear?: boolean;\n  /**\n   * HTML name attribute.\n   */\n  htmlName?: string;\n  /**\n   * Whether the input is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to visually hide the label.\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Whether the input is loading.\n   */\n  isLoading?: boolean;\n  /**\n   * Field label.\n   */\n  label: string;\n  /**\n   * Icon shown before the label.\n   */\n  labelIcon?: IconComponent;\n  /**\n   * Tooltip shown beside the label.\n   */\n  labelTooltip?: ReactNode;\n  /**\n   * Called when the input loses focus.\n   */\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Called with the next string value.\n   */\n  onChange: (\n    value: string,\n    event: ChangeEvent<HTMLInputElement> | null,\n  ) => void;\n  /**\n   * Called when Enter is pressed.\n   */\n  onEnter?: () => void;\n  /**\n   * Called when the input gains focus.\n   */\n  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Keyboard event handler for the input.\n   */\n  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n  /**\n   * Placeholder text.\n   */\n  placeholder?: string;\n  /**\n   * Ref forwarded to the input element.\n   */\n  ref?: Ref<HTMLInputElement>;\n  /**\n   * Visual size.\n   */\n  size?: InputSize;\n  /**\n   * Icon shown before the input.\n   */\n  startIcon?: IconComponent;\n  /**\n   * Status displayed on the field.\n   */\n  status?: InputStatus;\n  /**\n   * Inline styles applied to the wrapper.\n   */\n  style?: CSSProperties;\n  /**\n   * HTML input type.\n   */\n  type?: TextInputType;\n  /**\n   * Controlled input value.\n   */\n  value: string;\n} & FieldNecessity;\n\n/**\n * Single-line text input field.\n */\nexport function TextInput({\n  autoComplete,\n  label,\n  value,\n  onChange,\n  onBlur,\n  onFocus,\n  type = 'text',\n  size: sizeProp = 'md',\n  placeholder,\n  description,\n  endContent,\n  isLabelHidden = false,\n  isOptional,\n  isRequired,\n  isDisabled = false,\n  isLoading = false,\n  hasClear = false,\n  hasAutoFocus = false,\n  htmlName,\n  status,\n  labelIcon,\n  labelTooltip,\n  startIcon,\n  onEnter,\n  onKeyDown,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: TextInputProps): React.JSX.Element {\n  const inputId = useId();\n  const descriptionID =\n    description != null ? `${inputId}-description` : undefined;\n  const statusMessageID = getStatusMessageID(inputId, status);\n  const describedBy = getDescribedBy(descriptionID, statusMessageID);\n  const inputGroup = useInputGroup();\n  const effectiveDisabled = isDisabled || inputGroup?.isDisabled === true;\n  const size = inputGroup?.size ?? sizeProp;\n  const effectiveStatusType = status?.type ?? inputGroup?.statusType;\n\n  const inputWrapper = (\n    <div\n      className={cx(\n        inputRecipe({\n          size,\n          status: effectiveStatusType,\n          isDisabled: effectiveDisabled,\n        }),\n        inputGroup != null ? className : undefined,\n      )}\n      style={inputGroup != null ? style : undefined}>\n      {startIcon != null ? (\n        <span className={inputStyles.iconSlot}>\n          <Icon color=\"secondary\" icon={startIcon} size=\"sm\" />\n        </span>\n      ) : null}\n      <input\n        aria-busy={isLoading || undefined}\n        aria-describedby={describedBy}\n        aria-invalid={status?.type === 'error' || undefined}\n        aria-label={inputGroup != null ? label : undefined}\n        aria-required={isRequired ?? undefined}\n        autoComplete={autoComplete}\n        // eslint-disable-next-line jsx-a11y-x/no-autofocus\n        autoFocus={hasAutoFocus}\n        className={inputStyles.control}\n        data-autofocus={hasAutoFocus || undefined}\n        data-testid={dataTestId}\n        disabled={effectiveDisabled}\n        id={inputId}\n        name={htmlName}\n        onBlur={onBlur}\n        onChange={event => onChange(event.target.value, event)}\n        onFocus={onFocus}\n        onKeyDown={event => {\n          if (event.key === 'Enter' && !event.nativeEvent.isComposing) {\n            onEnter?.();\n          }\n          onKeyDown?.(event);\n        }}\n        placeholder={placeholder}\n        ref={ref}\n        required={isRequired ?? undefined}\n        type={type}\n        value={value}\n      />\n      {hasClear && value !== '' && !effectiveDisabled ? (\n        <Button\n          icon={X}\n          isIconOnly\n          label={`Clear ${label}`}\n          onClick={() => onChange('', null)}\n          size=\"sm\"\n          variant=\"ghost\"\n        />\n      ) : null}\n      {endContent}\n      {isLoading ? <Spinner size=\"sm\" /> : null}\n      {status != null ? (\n        <span className={inputStyles.iconSlot}>\n          {getStatusIcon(status.type)}\n        </span>\n      ) : null}\n    </div>\n  );\n\n  if (inputGroup != null) {\n    return inputWrapper;\n  }\n\n  return (\n    <Field\n      className={className}\n      description={description}\n      descriptionID={descriptionID}\n      inputId={inputId}\n      isDisabled={isDisabled}\n      isLabelHidden={isLabelHidden}\n      {...getNecessity(isOptional, isRequired)}\n      label={label}\n      labelIcon={labelIcon}\n      labelTooltip={labelTooltip}\n      status={\n        status == null ? undefined : {...status, messageID: statusMessageID}\n      }\n      style={style}>\n      {inputWrapper}\n    </Field>\n  );\n}\n\nTextInput.displayName = 'TextInput';\n"]}

package/dist/{chunk-ZVBVKZ4P.cjs → chunk-JKERY7QF.cjs}

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkJAX62FUE_cjs = require('./chunk-JAX62FUE.cjs');
+var chunkJRBQKFVO_cjs = require('./chunk-JRBQKFVO.cjs');
 var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/Card/Card.recipe.ts
-var cardRecipe = chunkJAX62FUE_cjs.cva({
+var cardRecipe = chunkJRBQKFVO_cjs.cva({
   base: {
     borderRadius: "lg",
     borderWidth: "default",
@@ -18,12 +18,19 @@ var cardRecipe = chunkJAX62FUE_cjs.cva({
         bg: "bg",
         borderColor: "border"
       },
+      section: {
+        bg: "bg",
+        borderRadius: 0,
+        borderWidth: 0
+      },
       transparent: {
         bg: "transparent"
       },
       muted: {
         bg: "bg.subtle"
-      },
+      }
+    },
+    color: {
       blue: { bg: "surface.blue" },
       cyan: { bg: "surface.cyan" },
       gray: { bg: "surface.gray" },
@@ -35,18 +42,20 @@ var cardRecipe = chunkJAX62FUE_cjs.cva({
       teal: { bg: "surface.teal" },
       yellow: { bg: "surface.yellow" }
     },
+    // Each padding value also exposes `--card-padding` so descendants (e.g. a
+    // full-bleed Divider) can offset the card's padding to reach its edges.
     padding: {
-      0: { p: "0" },
-      0.5: { p: "0.5" },
-      1: { p: "1" },
-      1.5: { p: "1.5" },
-      2: { p: "2" },
-      3: { p: "3" },
-      4: { p: "4" },
-      5: { p: "5" },
-      6: { p: "6" },
-      8: { p: "8" },
-      10: { p: "10" }
+      0: { p: "0", "--card-padding": "token(spacing.0)" },
+      0.5: { p: "0.5", "--card-padding": "token(spacing.0.5)" },
+      1: { p: "1", "--card-padding": "token(spacing.1)" },
+      1.5: { p: "1.5", "--card-padding": "token(spacing.1.5)" },
+      2: { p: "2", "--card-padding": "token(spacing.2)" },
+      3: { p: "3", "--card-padding": "token(spacing.3)" },
+      4: { p: "4", "--card-padding": "token(spacing.4)" },
+      5: { p: "5", "--card-padding": "token(spacing.5)" },
+      6: { p: "6", "--card-padding": "token(spacing.6)" },
+      8: { p: "8", "--card-padding": "token(spacing.8)" },
+      10: { p: "10", "--card-padding": "token(spacing.10)" }
     }
   },
   defaultVariants: {
@@ -57,6 +66,7 @@ var cardRecipe = chunkJAX62FUE_cjs.cva({
 function Card({
   children,
   className,
+  color,
   "data-testid": dataTestId,
   padding = 0,
   ref,
@@ -68,7 +78,7 @@ function Card({
     "div",
     {
       ...htmlProps,
-      className: chunkSPDVNY2Z_cjs.cx(cardRecipe({ variant, padding }), className),
+      className: chunkSPDVNY2Z_cjs.cx(cardRecipe({ variant, color, padding }), className),
       "data-testid": dataTestId,
       ref,
       style,
@@ -79,6 +89,5 @@ function Card({
 Card.displayName = "Card";
 
 exports.Card = Card;
-exports.cardRecipe = cardRecipe;
-//# sourceMappingURL=chunk-ZVBVKZ4P.cjs.map
-//# sourceMappingURL=chunk-ZVBVKZ4P.cjs.map
+//# sourceMappingURL=chunk-JKERY7QF.cjs.map
+//# sourceMappingURL=chunk-JKERY7QF.cjs.map

package/dist/chunk-JKERY7QF.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Card/Card.recipe.ts","../src/components/Card/Card.tsx"],"names":["cva","jsx","cx"],"mappings":"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","file":"chunk-JKERY7QF.cjs","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const cardRecipe = cva({\n  base: {\n    borderRadius: 'lg',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'transparent',\n  },\n  variants: {\n    variant: {\n      default: {\n        bg: 'bg',\n        borderColor: 'border',\n      },\n      section: {\n        bg: 'bg',\n        borderRadius: 0,\n        borderWidth: 0,\n      },\n      transparent: {\n        bg: 'transparent',\n      },\n      muted: {\n        bg: 'bg.subtle',\n      },\n    },\n    color: {\n      blue: {bg: 'surface.blue'},\n      cyan: {bg: 'surface.cyan'},\n      gray: {bg: 'surface.gray'},\n      green: {bg: 'surface.green'},\n      orange: {bg: 'surface.orange'},\n      pink: {bg: 'surface.pink'},\n      purple: {bg: 'surface.purple'},\n      red: {bg: 'surface.red'},\n      teal: {bg: 'surface.teal'},\n      yellow: {bg: 'surface.yellow'},\n    },\n    // Each padding value also exposes `--card-padding` so descendants (e.g. a\n    // full-bleed Divider) can offset the card's padding to reach its edges.\n    padding: {\n      0: {p: '0', '--card-padding': 'token(spacing.0)'},\n      0.5: {p: '0.5', '--card-padding': 'token(spacing.0.5)'},\n      1: {p: '1', '--card-padding': 'token(spacing.1)'},\n      1.5: {p: '1.5', '--card-padding': 'token(spacing.1.5)'},\n      2: {p: '2', '--card-padding': 'token(spacing.2)'},\n      3: {p: '3', '--card-padding': 'token(spacing.3)'},\n      4: {p: '4', '--card-padding': 'token(spacing.4)'},\n      5: {p: '5', '--card-padding': 'token(spacing.5)'},\n      6: {p: '6', '--card-padding': 'token(spacing.6)'},\n      8: {p: '8', '--card-padding': 'token(spacing.8)'},\n      10: {p: '10', '--card-padding': 'token(spacing.10)'},\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    padding: 0,\n  },\n});\n\nexport type CardVariants = RecipeVariantProps<typeof cardRecipe>;\n","import type {ComponentPropsWithRef} from 'react';\nimport {cx} from '../../internal/cx';\nimport type {SpacingToken} from '../../internal/spacingTokens';\nimport {cardRecipe} from './Card.recipe';\n\nexport type CardColor =\n  | 'blue'\n  | 'cyan'\n  | 'gray'\n  | 'green'\n  | 'orange'\n  | 'pink'\n  | 'purple'\n  | 'red'\n  | 'teal'\n  | 'yellow';\n\nexport type CardVariant = 'default' | 'section' | 'transparent' | 'muted';\n\n/**\n * Rounded container surface for grouping related content.\n */\nexport interface CardProps extends ComponentPropsWithRef<'div'> {\n  /**\n   * Decorative surface color. When set, overrides the variant's default\n   * background with the corresponding surface color token.\n   */\n  color?: CardColor;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Inner padding step.\n   * @default 0\n   */\n  padding?: SpacingToken;\n  /**\n   * Visual style variant.\n   *\n   * - `default` — bordered, rounded container with `bg` background.\n   * - `section` — flat container with no border or border-radius, for use\n   *   inside a larger container.\n   * - `transparent` — no background.\n   * - `muted` — subtle background, no visible border.\n   * @default 'default'\n   */\n  variant?: CardVariant;\n}\n\n/**\n * Rounded container surface for grouping related content.\n */\nexport function Card({\n  children,\n  className,\n  color,\n  'data-testid': dataTestId,\n  padding = 0,\n  ref,\n  style,\n  variant = 'default',\n  ...htmlProps\n}: CardProps): React.JSX.Element {\n  return (\n    <div\n      {...htmlProps}\n      className={cx(cardRecipe({variant, color, padding}), className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}>\n      {children}\n    </div>\n  );\n}\n\nCard.displayName = 'Card';\n"]}

package/dist/{chunk-47BELFYO.cjs → chunk-JMNH45Q3.cjs}

@@ -1,9 +1,10 @@
 'use strict';
 
-var chunkMKAOIB2O_cjs = require('./chunk-MKAOIB2O.cjs');
-var chunk6SPQDYHC_cjs = require('./chunk-6SPQDYHC.cjs');
+var chunk7GN6YTSS_cjs = require('./chunk-7GN6YTSS.cjs');
+var chunkU2WVHZ24_cjs = require('./chunk-U2WVHZ24.cjs');
 var chunk6SHL7FYO_cjs = require('./chunk-6SHL7FYO.cjs');
-var chunkJAX62FUE_cjs = require('./chunk-JAX62FUE.cjs');
+var chunk6BK4LUK4_cjs = require('./chunk-6BK4LUK4.cjs');
+var chunkJRBQKFVO_cjs = require('./chunk-JRBQKFVO.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -2889,7 +2890,7 @@ token.var = tokenVar;
 // src/components/Text/Text.recipe.ts
 var textColorPrimary = `var(--silver-text-color, ${token.var("colors.fg")})`;
 var textColorMuted = `var(--silver-text-color-muted, ${token.var("colors.fg.muted")})`;
-var textRecipe = chunkJAX62FUE_cjs.cva({
+var textRecipe = chunkJRBQKFVO_cjs.cva({
   base: {
     m: 0,
     fontFamily: "body"
@@ -3023,7 +3024,7 @@ var textRecipe = chunkJAX62FUE_cjs.cva({
     maxLines: "none"
   }
 });
-var headingRecipe = chunkJAX62FUE_cjs.cva({
+var headingRecipe = chunkJRBQKFVO_cjs.cva({
   base: {
     m: 0,
     fontFamily: "body",
@@ -3208,7 +3209,7 @@ function useTruncation({
     },
     [maxLines, observeElement, scheduleUpdate]
   );
-  chunk6SPQDYHC_cjs.useIsomorphicLayoutEffect(() => {
+  chunkU2WVHZ24_cjs.useIsomorphicLayoutEffect(() => {
     const element = elementRef.current;
     observeElement(element, maxLines);
     scheduleUpdate(element, maxLines);
@@ -3259,7 +3260,7 @@ function BaseHeading({
       ref,
       "aria-level": ariaLevel,
       "data-testid": dataTestId,
-      className: chunk6SPQDYHC_cjs.cx(
+      className: chunk6BK4LUK4_cjs.cx(
         headingRecipe({
           level,
           color,
@@ -3301,7 +3302,7 @@ function TruncatedHeading({
   }, []);
   const handleHide = react.useCallback(() => {
   }, []);
-  const tooltip = chunkMKAOIB2O_cjs.useTooltip({
+  const tooltip = chunk7GN6YTSS_cjs.useTooltip({
     placement: tooltipPlacement,
     isEnabled: isTooltipEnabled,
     onShow: handleShow,
@@ -3309,7 +3310,7 @@ function TruncatedHeading({
   });
   const tooltipRef = tooltip.ref;
   const tooltipDescribedBy = tooltip.describedBy;
-  chunk6SPQDYHC_cjs.useIsomorphicLayoutEffect(() => {
+  chunkU2WVHZ24_cjs.useIsomorphicLayoutEffect(() => {
     const element2 = headingRef.current;
     if (element2 == null) {
       return;
@@ -3336,7 +3337,7 @@ function TruncatedHeading({
     ref: chunk6SHL7FYO_cjs.mergeRefs(ref, truncation.ref, headingRef),
     "aria-level": ariaLevel,
     "data-testid": dataTestId,
-    className: chunk6SPQDYHC_cjs.cx(
+    className: chunk6BK4LUK4_cjs.cx(
       headingRecipe({
         level,
         color,
@@ -3414,7 +3415,7 @@ function BaseText({
       ...props,
       ref,
       "data-testid": dataTestId,
-      className: chunk6SPQDYHC_cjs.cx(
+      className: chunk6BK4LUK4_cjs.cx(
         textRecipe({
           type,
           size,
@@ -3463,7 +3464,7 @@ function TruncatedText({
   }, []);
   const handleHide = react.useCallback(() => {
   }, []);
-  const tooltip = chunkMKAOIB2O_cjs.useTooltip({
+  const tooltip = chunk7GN6YTSS_cjs.useTooltip({
     placement: tooltipPlacement,
     isEnabled: isTooltipEnabled,
     onShow: handleShow,
@@ -3471,7 +3472,7 @@ function TruncatedText({
   });
   const tooltipRef = tooltip.ref;
   const tooltipDescribedBy = tooltip.describedBy;
-  chunk6SPQDYHC_cjs.useIsomorphicLayoutEffect(() => {
+  chunkU2WVHZ24_cjs.useIsomorphicLayoutEffect(() => {
     const element2 = textRef.current;
     if (element2 == null) {
       return;
@@ -3496,7 +3497,7 @@ function TruncatedText({
     ...props,
     ref: chunk6SHL7FYO_cjs.mergeRefs(ref, truncation.ref, textRef),
     "data-testid": dataTestId,
-    className: chunk6SPQDYHC_cjs.cx(
+    className: chunk6BK4LUK4_cjs.cx(
       textRecipe({
         type,
         size,
@@ -3542,8 +3543,6 @@ Text.displayName = "Text";
 
 exports.Heading = Heading;
 exports.Text = Text;
-exports.headingRecipe = headingRecipe;
-exports.textRecipe = textRecipe;
 exports.token = token;
-//# sourceMappingURL=chunk-47BELFYO.cjs.map
-//# sourceMappingURL=chunk-47BELFYO.cjs.map
+//# sourceMappingURL=chunk-JMNH45Q3.cjs.map
+//# sourceMappingURL=chunk-JMNH45Q3.cjs.map