@proyecto-viviana/ui 0.6.2 → 0.6.3

package/dist/_chunk/color.jsx

@@ -106,7 +106,7 @@ const colorSliderLabel = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	return rules;
@@ -171,7 +171,7 @@ const colorSliderOutput = function anonymous(props) {
 		rules += " _FnuYUweb151";
 	}
 	if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " ri151";
 	return rules;
 };
@@ -825,7 +825,7 @@ function createColorFieldStyles() {
 			}
 			if (props.isStaticColor) rules += " pl151";
 			else if (props.isDisabled) rules += " pUvnvv151";
-			else rules += " pUUi0Fe151";
+			else rules += " pWQ7V3d151";
 			rules += " plb151";
 			rules += " ri151";
 			return rules;
@@ -1024,7 +1024,7 @@ function createColorFieldStyles() {
 			} else if (props.isInvalid) {
 				rules += " pYjUhNc151";
 				rules += " plQBRyrc151";
-			} else rules += " pUUi0Fe151";
+			} else rules += " pWQ7V3d151";
 			rules += " -_8sjo0b-t5ZbAob151";
 			rules += " _qb151";
 			rules += " TgOnRt151";

package/dist/_chunk/form.js

@@ -54,7 +54,7 @@ const fieldLabelStyles = function anonymous(props) {
 		rules += " _FnuYUweb151";
 	}
 	if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	return rules;
 };
 const fieldTextStyles = function anonymous(props) {
@@ -84,7 +84,7 @@ const fieldTextStyles = function anonymous(props) {
 	}
 	if (props.isDisabled) rules += " pUvnvv151";
 	else if (props.isInvalid) rules += " pYjUhNc151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	return rules;
 };
 /**
@@ -185,7 +185,7 @@ const helpTextStyles = function anonymous(props) {
 	rules += " _FnuYUweb151";
 	if (props.isDisabled) rules += " pUvnvv151";
 	else if (props.isInvalid) rules += " pYjUhNc151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	return rules;
 };
 /**
@@ -307,8 +307,7 @@ function Form$1(props) {
 		"styles",
 		"UNSAFE_className",
 		"UNSAFE_style",
-		"ref",
-		"children"
+		"ref"
 	]);
 	const size = () => local.size ?? "M";
 	const labelPosition = () => local.labelPosition ?? "top";
@@ -349,8 +348,7 @@ function Form$1(props) {
 				},
 				get style() {
 					return local.UNSAFE_style;
-				},
-				children: (renderProps) => typeof local.children === "function" ? local.children(renderProps) : local.children
+				}
 			}));
 		}
 	});

package/dist/_chunk/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","names":[],"sources":["../../src/form/Field.tsx","../../src/form/HelpText.tsx","../../src/form/index.tsx"],"sourcesContent":["import { type JSX, splitProps, Show } from \"solid-js\";\nimport { style } from \"../style\" with { type: \"macro\" };\n\nexport type FieldSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface FieldProps {\n  /** The label for the field. */\n  label?: string;\n  /** A description or help text for the field. */\n  description?: string;\n  /** An error message for the field. */\n  errorMessage?: string;\n  /** Whether the field is required. */\n  isRequired?: boolean;\n  /** Whether the field is disabled. */\n  isDisabled?: boolean;\n  /** Whether the field is invalid. */\n  isInvalid?: boolean;\n  /** The size of the field. @default 'md' */\n  size?: FieldSize;\n  /** Additional CSS class name. */\n  class?: string;\n  /** The field content (input element). */\n  children?: JSX.Element;\n  /** ID for the label's htmlFor attribute. */\n  htmlFor?: string;\n}\n\n// Vertical field stack. The label/help-text colors mirror S2's `fieldLabel()`\n// and `helpTextStyles` (`neutral-subdued`, flipping to `negative`/`disabled`);\n// sizes map sm/md/lg → the UI font's xs/sm/base steps. Routed through the\n// `style()` macro so the CSS ships in the package bundle for installed consumers.\nconst fieldStyles = style<{ size: FieldSize }>({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: { default: 8, size: { sm: 4, lg: 12 } },\n});\n\nconst fieldLabelStyles = style<{ size: FieldSize; isDisabled?: boolean }>({\n  font: { default: \"ui-sm\", size: { sm: \"ui-xs\", lg: \"ui\" } },\n  color: { default: \"neutral-subdued\", isDisabled: \"disabled\" },\n});\n\nconst fieldTextStyles = style<{ size: FieldSize; isInvalid?: boolean; isDisabled?: boolean }>({\n  font: { default: \"ui-sm\", size: { sm: \"ui-xs\" } },\n  color: { default: \"neutral-subdued\", isInvalid: \"negative\", isDisabled: \"disabled\" },\n});\n\nconst requiredStyles = style({ color: \"negative\", marginStart: 2 });\n\n/**\n * A field layout component that provides label, help text, and error message\n * around a form input.\n */\nexport function Field(props: FieldProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"label\",\n    \"description\",\n    \"errorMessage\",\n    \"isRequired\",\n    \"isDisabled\",\n    \"isInvalid\",\n    \"size\",\n    \"class\",\n    \"children\",\n    \"htmlFor\",\n  ]);\n\n  const size = () => local.size ?? \"md\";\n  const showError = () => local.isInvalid && local.errorMessage;\n\n  return (\n    <div class={[fieldStyles({ size: size() }), local.class].filter(Boolean).join(\" \")}>\n      <Show when={local.label}>\n        <label\n          for={local.htmlFor}\n          class={fieldLabelStyles({ size: size(), isDisabled: local.isDisabled })}\n        >\n          {local.label}\n          <Show when={local.isRequired}>\n            <span class={requiredStyles}>*</span>\n          </Show>\n        </label>\n      </Show>\n\n      {local.children}\n\n      <Show when={showError()}>\n        <p class={fieldTextStyles({ size: size(), isInvalid: true })} role=\"alert\">\n          {local.errorMessage}\n        </p>\n      </Show>\n\n      <Show when={!showError() && local.description}>\n        <p class={fieldTextStyles({ size: size(), isDisabled: local.isDisabled })}>\n          {local.description}\n        </p>\n      </Show>\n    </div>\n  );\n}\n","import { type JSX, splitProps, Show } from \"solid-js\";\nimport { style } from \"../style\" with { type: \"macro\" };\n\nexport interface HelpTextProps {\n  /** The description text. */\n  description?: string;\n  /** The error message text. */\n  errorMessage?: string;\n  /** Whether the field is in an error state. */\n  isInvalid?: boolean;\n  /** Whether the help text is disabled (dimmed). */\n  isDisabled?: boolean;\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n// Mirrors S2's `helpTextStyles` (Field.tsx): the small UI font with a\n// `neutral-subdued` description color that flips to `negative` for errors and\n// `disabled` when the field is disabled. Emitted via the `style()` macro so the\n// CSS ships in the package bundle for installed consumers.\nconst helpTextStyles = style<{ isInvalid?: boolean; isDisabled?: boolean }>({\n  font: \"ui-sm\",\n  color: {\n    default: \"neutral-subdued\",\n    isInvalid: \"negative\",\n    isDisabled: \"disabled\",\n  },\n});\n\n/**\n * Displays description or error text below a form field.\n */\nexport function HelpText(props: HelpTextProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"description\",\n    \"errorMessage\",\n    \"isInvalid\",\n    \"isDisabled\",\n    \"class\",\n  ]);\n\n  const showError = () => local.isInvalid && local.errorMessage;\n\n  return (\n    <div class={local.class}>\n      <Show when={showError()}>\n        <p class={helpTextStyles({ isInvalid: true })} role=\"alert\">\n          {local.errorMessage}\n        </p>\n      </Show>\n      <Show when={!showError() && local.description}>\n        <p class={helpTextStyles({ isDisabled: local.isDisabled })}>{local.description}</p>\n      </Show>\n    </div>\n  );\n}\n","import { type JSX, createContext, splitProps, useContext } from \"solid-js\";\nimport {\n  Form as HeadlessForm,\n  FieldError as HeadlessFieldError,\n  type FormProps as HeadlessFormProps,\n  type FieldErrorProps as HeadlessFieldErrorProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport type { UnsafeClassName } from \"../s2-internal/style-utils\";\nimport { getAllowedOverrides } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { createIsSkeleton } from \"../skeleton\";\nimport { assignRef } from \"../button/spectrum-context\";\n\nexport type FormSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type FormLabelPosition = \"top\" | \"side\";\nexport type FormLabelAlign = \"start\" | \"end\";\nexport type FormNecessityIndicator = \"icon\" | \"label\";\n\nexport interface FormStyleProps {\n  /** The size of descendant Form elements. @default 'M' */\n  size?: FormSize;\n  /** The label's overall position relative to each field. @default 'top' */\n  labelPosition?: FormLabelPosition;\n  /** The label's horizontal alignment relative to each field. @default 'start' */\n  labelAlign?: FormLabelAlign;\n  /** Whether required fields show an icon or text label. @default 'icon' */\n  necessityIndicator?: FormNecessityIndicator;\n  /** Whether descendant Form elements are required. */\n  isRequired?: boolean;\n  /** Whether descendant Form elements are disabled. */\n  isDisabled?: boolean;\n  /** Whether descendant Form elements are rendered with emphasized styling. */\n  isEmphasized?: boolean;\n}\n\nexport interface FormProps\n  extends Omit<HeadlessFormProps, \"class\" | \"style\" | \"ref\">, FormStyleProps {\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  ref?: HeadlessFormProps[\"ref\"];\n}\n\nexport interface FieldErrorProps extends Omit<HeadlessFieldErrorProps, \"class\"> {\n  class?: string;\n}\n\nexport const FormContext = createContext<FormStyleProps | null>(null);\n\nconst formStylePropKeys = [\n  \"size\",\n  \"labelPosition\",\n  \"labelAlign\",\n  \"necessityIndicator\",\n  \"isRequired\",\n  \"isDisabled\",\n  \"isEmphasized\",\n] as const;\n\nexport function useIsInForm(): boolean {\n  return useContext(FormContext) != null;\n}\n\nexport function useFormProps<T extends object>(props: T): T {\n  const context = useContext(FormContext);\n  const isSkeleton = createIsSkeleton();\n\n  const getInheritedValue = (property: PropertyKey) => {\n    if (property === \"isDisabled\" && isSkeleton()) {\n      return true;\n    }\n\n    if (typeof property !== \"string\") {\n      return undefined;\n    }\n\n    return context?.[property as keyof FormStyleProps];\n  };\n\n  return new Proxy(props, {\n    get(target, property, receiver) {\n      if (property === \"isDisabled\" && isSkeleton()) {\n        return true;\n      }\n\n      const localValue = Reflect.get(target, property, receiver);\n      if (localValue !== undefined) {\n        return localValue;\n      }\n\n      return getInheritedValue(property);\n    },\n    has(target, property) {\n      return Reflect.has(target, property) || getInheritedValue(property) !== undefined;\n    },\n    ownKeys(target) {\n      const keys = new Set<ReturnType<typeof Reflect.ownKeys>[number]>(Reflect.ownKeys(target));\n\n      for (const key of formStylePropKeys) {\n        if (getInheritedValue(key) !== undefined) {\n          keys.add(key);\n        }\n      }\n\n      return Array.from(keys);\n    },\n    getOwnPropertyDescriptor(target, property) {\n      if (property === \"isDisabled\" && isSkeleton()) {\n        return {\n          enumerable: true,\n          configurable: true,\n          get: () => true,\n        };\n      }\n\n      const descriptor = Reflect.getOwnPropertyDescriptor(target, property);\n      if (descriptor) {\n        return descriptor;\n      }\n\n      if (getInheritedValue(property) !== undefined) {\n        return {\n          enumerable: true,\n          configurable: true,\n          get: () => getInheritedValue(property),\n        };\n      }\n\n      return undefined;\n    },\n  }) as T;\n}\n\nconst formStyles = style<{ labelPosition: FormLabelPosition; size: FormSize }>(\n  {\n    display: \"grid\",\n    gridTemplateColumns: {\n      labelPosition: {\n        top: [\"[field] 1fr\"],\n        side: [\"[label] auto\", \"[field] 1fr\"],\n      },\n    },\n    rowGap: {\n      size: {\n        S: 20,\n        M: 24,\n        L: 32,\n        XL: 40,\n      },\n    },\n    columnGap: \"text-to-control\",\n  },\n  getAllowedOverrides(),\n);\n\nexport function Form(props: FormProps): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\n    \"size\",\n    \"labelPosition\",\n    \"labelAlign\",\n    \"necessityIndicator\",\n    \"isRequired\",\n    \"isDisabled\",\n    \"isEmphasized\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"ref\",\n    \"children\",\n  ]);\n\n  const size = () => local.size ?? \"M\";\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const labelAlign = () => local.labelAlign ?? \"start\";\n  const necessityIndicator = () => local.necessityIndicator ?? \"icon\";\n\n  const contextValue: FormStyleProps = {\n    get size() {\n      return size();\n    },\n    get labelPosition() {\n      return labelPosition();\n    },\n    get labelAlign() {\n      return labelAlign();\n    },\n    get necessityIndicator() {\n      return necessityIndicator();\n    },\n    get isRequired() {\n      return local.isRequired;\n    },\n    get isDisabled() {\n      return local.isDisabled;\n    },\n    get isEmphasized() {\n      return local.isEmphasized;\n    },\n  };\n\n  return (\n    <FormContext.Provider value={contextValue}>\n      <HeadlessForm\n        {...headlessProps}\n        ref={(el) => assignRef(local.ref, el)}\n        class={[\n          local.UNSAFE_className,\n          formStyles({ size: size(), labelPosition: labelPosition() }, local.styles),\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        style={local.UNSAFE_style}\n      >\n        {(renderProps) =>\n          typeof local.children === \"function\" ? local.children(renderProps) : local.children\n        }\n      </HeadlessForm>\n    </FormContext.Provider>\n  );\n}\n\n// Small UI font in the `negative` color, mirroring S2's help-text error state.\nconst fieldErrorStyles = style({ font: \"ui-sm\", color: \"negative\" });\n\nexport function FieldError(props: FieldErrorProps): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"class\"]);\n  return (\n    <HeadlessFieldError\n      {...headlessProps}\n      class={[fieldErrorStyles, local.class].filter(Boolean).join(\" \")}\n    />\n  );\n}\n\nexport { Field } from \"./Field\";\nexport type { FieldProps, FieldSize } from \"./Field\";\nexport { HelpText } from \"./HelpText\";\nexport type { HelpTextProps } from \"./HelpText\";\n"],"mappings":"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"}
+{"version":3,"file":"form.js","names":[],"sources":["../../src/form/Field.tsx","../../src/form/HelpText.tsx","../../src/form/index.tsx"],"sourcesContent":["import { type JSX, splitProps, Show } from \"solid-js\";\nimport { style } from \"../style\" with { type: \"macro\" };\n\nexport type FieldSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface FieldProps {\n  /** The label for the field. */\n  label?: string;\n  /** A description or help text for the field. */\n  description?: string;\n  /** An error message for the field. */\n  errorMessage?: string;\n  /** Whether the field is required. */\n  isRequired?: boolean;\n  /** Whether the field is disabled. */\n  isDisabled?: boolean;\n  /** Whether the field is invalid. */\n  isInvalid?: boolean;\n  /** The size of the field. @default 'md' */\n  size?: FieldSize;\n  /** Additional CSS class name. */\n  class?: string;\n  /** The field content (input element). */\n  children?: JSX.Element;\n  /** ID for the label's htmlFor attribute. */\n  htmlFor?: string;\n}\n\n// Vertical field stack. The label/help-text colors mirror S2's `fieldLabel()`\n// and `helpTextStyles` (`neutral-subdued`, flipping to `negative`/`disabled`);\n// sizes map sm/md/lg → the UI font's xs/sm/base steps. Routed through the\n// `style()` macro so the CSS ships in the package bundle for installed consumers.\nconst fieldStyles = style<{ size: FieldSize }>({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: { default: 8, size: { sm: 4, lg: 12 } },\n});\n\nconst fieldLabelStyles = style<{ size: FieldSize; isDisabled?: boolean }>({\n  font: { default: \"ui-sm\", size: { sm: \"ui-xs\", lg: \"ui\" } },\n  color: { default: \"neutral-subdued\", isDisabled: \"disabled\" },\n});\n\nconst fieldTextStyles = style<{ size: FieldSize; isInvalid?: boolean; isDisabled?: boolean }>({\n  font: { default: \"ui-sm\", size: { sm: \"ui-xs\" } },\n  color: { default: \"neutral-subdued\", isInvalid: \"negative\", isDisabled: \"disabled\" },\n});\n\nconst requiredStyles = style({ color: \"negative\", marginStart: 2 });\n\n/**\n * A field layout component that provides label, help text, and error message\n * around a form input.\n */\nexport function Field(props: FieldProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"label\",\n    \"description\",\n    \"errorMessage\",\n    \"isRequired\",\n    \"isDisabled\",\n    \"isInvalid\",\n    \"size\",\n    \"class\",\n    \"children\",\n    \"htmlFor\",\n  ]);\n\n  const size = () => local.size ?? \"md\";\n  const showError = () => local.isInvalid && local.errorMessage;\n\n  return (\n    <div class={[fieldStyles({ size: size() }), local.class].filter(Boolean).join(\" \")}>\n      <Show when={local.label}>\n        <label\n          for={local.htmlFor}\n          class={fieldLabelStyles({ size: size(), isDisabled: local.isDisabled })}\n        >\n          {local.label}\n          <Show when={local.isRequired}>\n            <span class={requiredStyles}>*</span>\n          </Show>\n        </label>\n      </Show>\n\n      {local.children}\n\n      <Show when={showError()}>\n        <p class={fieldTextStyles({ size: size(), isInvalid: true })} role=\"alert\">\n          {local.errorMessage}\n        </p>\n      </Show>\n\n      <Show when={!showError() && local.description}>\n        <p class={fieldTextStyles({ size: size(), isDisabled: local.isDisabled })}>\n          {local.description}\n        </p>\n      </Show>\n    </div>\n  );\n}\n","import { type JSX, splitProps, Show } from \"solid-js\";\nimport { style } from \"../style\" with { type: \"macro\" };\n\nexport interface HelpTextProps {\n  /** The description text. */\n  description?: string;\n  /** The error message text. */\n  errorMessage?: string;\n  /** Whether the field is in an error state. */\n  isInvalid?: boolean;\n  /** Whether the help text is disabled (dimmed). */\n  isDisabled?: boolean;\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n// Mirrors S2's `helpTextStyles` (Field.tsx): the small UI font with a\n// `neutral-subdued` description color that flips to `negative` for errors and\n// `disabled` when the field is disabled. Emitted via the `style()` macro so the\n// CSS ships in the package bundle for installed consumers.\nconst helpTextStyles = style<{ isInvalid?: boolean; isDisabled?: boolean }>({\n  font: \"ui-sm\",\n  color: {\n    default: \"neutral-subdued\",\n    isInvalid: \"negative\",\n    isDisabled: \"disabled\",\n  },\n});\n\n/**\n * Displays description or error text below a form field.\n */\nexport function HelpText(props: HelpTextProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"description\",\n    \"errorMessage\",\n    \"isInvalid\",\n    \"isDisabled\",\n    \"class\",\n  ]);\n\n  const showError = () => local.isInvalid && local.errorMessage;\n\n  return (\n    <div class={local.class}>\n      <Show when={showError()}>\n        <p class={helpTextStyles({ isInvalid: true })} role=\"alert\">\n          {local.errorMessage}\n        </p>\n      </Show>\n      <Show when={!showError() && local.description}>\n        <p class={helpTextStyles({ isDisabled: local.isDisabled })}>{local.description}</p>\n      </Show>\n    </div>\n  );\n}\n","import { type JSX, createContext, splitProps, useContext } from \"solid-js\";\nimport {\n  Form as HeadlessForm,\n  FieldError as HeadlessFieldError,\n  type FormProps as HeadlessFormProps,\n  type FieldErrorProps as HeadlessFieldErrorProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport type { UnsafeClassName } from \"../s2-internal/style-utils\";\nimport { getAllowedOverrides } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { createIsSkeleton } from \"../skeleton\";\nimport { assignRef } from \"../button/spectrum-context\";\n\nexport type FormSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type FormLabelPosition = \"top\" | \"side\";\nexport type FormLabelAlign = \"start\" | \"end\";\nexport type FormNecessityIndicator = \"icon\" | \"label\";\n\nexport interface FormStyleProps {\n  /** The size of descendant Form elements. @default 'M' */\n  size?: FormSize;\n  /** The label's overall position relative to each field. @default 'top' */\n  labelPosition?: FormLabelPosition;\n  /** The label's horizontal alignment relative to each field. @default 'start' */\n  labelAlign?: FormLabelAlign;\n  /** Whether required fields show an icon or text label. @default 'icon' */\n  necessityIndicator?: FormNecessityIndicator;\n  /** Whether descendant Form elements are required. */\n  isRequired?: boolean;\n  /** Whether descendant Form elements are disabled. */\n  isDisabled?: boolean;\n  /** Whether descendant Form elements are rendered with emphasized styling. */\n  isEmphasized?: boolean;\n}\n\nexport interface FormProps\n  extends Omit<HeadlessFormProps, \"class\" | \"style\" | \"ref\">, FormStyleProps {\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  ref?: HeadlessFormProps[\"ref\"];\n}\n\nexport interface FieldErrorProps extends Omit<HeadlessFieldErrorProps, \"class\"> {\n  class?: string;\n}\n\nexport const FormContext = createContext<FormStyleProps | null>(null);\n\nconst formStylePropKeys = [\n  \"size\",\n  \"labelPosition\",\n  \"labelAlign\",\n  \"necessityIndicator\",\n  \"isRequired\",\n  \"isDisabled\",\n  \"isEmphasized\",\n] as const;\n\nexport function useIsInForm(): boolean {\n  return useContext(FormContext) != null;\n}\n\nexport function useFormProps<T extends object>(props: T): T {\n  const context = useContext(FormContext);\n  const isSkeleton = createIsSkeleton();\n\n  const getInheritedValue = (property: PropertyKey) => {\n    if (property === \"isDisabled\" && isSkeleton()) {\n      return true;\n    }\n\n    if (typeof property !== \"string\") {\n      return undefined;\n    }\n\n    return context?.[property as keyof FormStyleProps];\n  };\n\n  return new Proxy(props, {\n    get(target, property, receiver) {\n      if (property === \"isDisabled\" && isSkeleton()) {\n        return true;\n      }\n\n      const localValue = Reflect.get(target, property, receiver);\n      if (localValue !== undefined) {\n        return localValue;\n      }\n\n      return getInheritedValue(property);\n    },\n    has(target, property) {\n      return Reflect.has(target, property) || getInheritedValue(property) !== undefined;\n    },\n    ownKeys(target) {\n      const keys = new Set<ReturnType<typeof Reflect.ownKeys>[number]>(Reflect.ownKeys(target));\n\n      for (const key of formStylePropKeys) {\n        if (getInheritedValue(key) !== undefined) {\n          keys.add(key);\n        }\n      }\n\n      return Array.from(keys);\n    },\n    getOwnPropertyDescriptor(target, property) {\n      if (property === \"isDisabled\" && isSkeleton()) {\n        return {\n          enumerable: true,\n          configurable: true,\n          get: () => true,\n        };\n      }\n\n      const descriptor = Reflect.getOwnPropertyDescriptor(target, property);\n      if (descriptor) {\n        return descriptor;\n      }\n\n      if (getInheritedValue(property) !== undefined) {\n        return {\n          enumerable: true,\n          configurable: true,\n          get: () => getInheritedValue(property),\n        };\n      }\n\n      return undefined;\n    },\n  }) as T;\n}\n\nconst formStyles = style<{ labelPosition: FormLabelPosition; size: FormSize }>(\n  {\n    display: \"grid\",\n    gridTemplateColumns: {\n      labelPosition: {\n        top: [\"[field] 1fr\"],\n        side: [\"[label] auto\", \"[field] 1fr\"],\n      },\n    },\n    rowGap: {\n      size: {\n        S: 20,\n        M: 24,\n        L: 32,\n        XL: 40,\n      },\n    },\n    columnGap: \"text-to-control\",\n  },\n  getAllowedOverrides(),\n);\n\nexport function Form(props: FormProps): JSX.Element {\n  // Leave `children` on the headless rest props so they flow through as a\n  // lazy Solid getter — do not split them off and re-wrap. A forced\n  // `(rp) => children` render-prop wrapper desyncs createUniqueId between SSR\n  // and client (Form+Button hydration mismatch). See solid-spectrum Form.\n  const [local, headlessProps] = splitProps(props, [\n    \"size\",\n    \"labelPosition\",\n    \"labelAlign\",\n    \"necessityIndicator\",\n    \"isRequired\",\n    \"isDisabled\",\n    \"isEmphasized\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"ref\",\n  ]);\n\n  const size = () => local.size ?? \"M\";\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const labelAlign = () => local.labelAlign ?? \"start\";\n  const necessityIndicator = () => local.necessityIndicator ?? \"icon\";\n\n  const contextValue: FormStyleProps = {\n    get size() {\n      return size();\n    },\n    get labelPosition() {\n      return labelPosition();\n    },\n    get labelAlign() {\n      return labelAlign();\n    },\n    get necessityIndicator() {\n      return necessityIndicator();\n    },\n    get isRequired() {\n      return local.isRequired;\n    },\n    get isDisabled() {\n      return local.isDisabled;\n    },\n    get isEmphasized() {\n      return local.isEmphasized;\n    },\n  };\n\n  return (\n    <FormContext.Provider value={contextValue}>\n      <HeadlessForm\n        {...headlessProps}\n        ref={(el) => assignRef(local.ref, el)}\n        class={[\n          local.UNSAFE_className,\n          formStyles({ size: size(), labelPosition: labelPosition() }, local.styles),\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        style={local.UNSAFE_style}\n      />\n    </FormContext.Provider>\n  );\n}\n\n// Small UI font in the `negative` color, mirroring S2's help-text error state.\nconst fieldErrorStyles = style({ font: \"ui-sm\", color: \"negative\" });\n\nexport function FieldError(props: FieldErrorProps): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"class\"]);\n  return (\n    <HeadlessFieldError\n      {...headlessProps}\n      class={[fieldErrorStyles, local.class].filter(Boolean).join(\" \")}\n    />\n  );\n}\n\nexport { Field } from \"./Field\";\nexport type { FieldProps, FieldSize } from \"./Field\";\nexport { HelpText } from \"./HelpText\";\nexport type { HelpTextProps } from \"./HelpText\";\n"],"mappings":"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"}

package/dist/_chunk/form.jsx

@@ -51,7 +51,7 @@ const fieldLabelStyles = function anonymous(props) {
 		rules += " _FnuYUweb151";
 	}
 	if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	return rules;
 };
 const fieldTextStyles = function anonymous(props) {
@@ -81,7 +81,7 @@ const fieldTextStyles = function anonymous(props) {
 	}
 	if (props.isDisabled) rules += " pUvnvv151";
 	else if (props.isInvalid) rules += " pYjUhNc151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	return rules;
 };
 const requiredStyles = " pYjUhNc151 Ir151";
@@ -150,7 +150,7 @@ const helpTextStyles = function anonymous(props) {
 	rules += " _FnuYUweb151";
 	if (props.isDisabled) rules += " pUvnvv151";
 	else if (props.isInvalid) rules += " pYjUhNc151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	return rules;
 };
 /**
@@ -254,8 +254,7 @@ function Form$1(props) {
 		"styles",
 		"UNSAFE_className",
 		"UNSAFE_style",
-		"ref",
-		"children"
+		"ref"
 	]);
 	const size = () => local.size ?? "M";
 	const labelPosition = () => local.labelPosition ?? "top";
@@ -288,9 +287,7 @@ function Form$1(props) {
       <Form {...headlessProps} ref={(el) => assignRef(local.ref, el)} class={[local.UNSAFE_className, formStyles({
 		size: size(),
 		labelPosition: labelPosition()
-	}, local.styles)].filter(Boolean).join(" ")} style={local.UNSAFE_style}>
-        {(renderProps) => typeof local.children === "function" ? local.children(renderProps) : local.children}
-      </Form>
+	}, local.styles)].filter(Boolean).join(" ")} style={local.UNSAFE_style} />
     </FormContext.Provider>;
 }
 const fieldErrorStyles = " uxe7h4151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pYjUhNc151";

package/dist/_chunk/form.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"form.jsx","names":[],"sources":["../../src/form/Field.tsx","../../src/form/HelpText.tsx","../../src/form/index.tsx"],"sourcesContent":["import { type JSX, splitProps, Show } from \"solid-js\";\nimport { style } from \"../style\" with { type: \"macro\" };\n\nexport type FieldSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface FieldProps {\n  /** The label for the field. */\n  label?: string;\n  /** A description or help text for the field. */\n  description?: string;\n  /** An error message for the field. */\n  errorMessage?: string;\n  /** Whether the field is required. */\n  isRequired?: boolean;\n  /** Whether the field is disabled. */\n  isDisabled?: boolean;\n  /** Whether the field is invalid. */\n  isInvalid?: boolean;\n  /** The size of the field. @default 'md' */\n  size?: FieldSize;\n  /** Additional CSS class name. */\n  class?: string;\n  /** The field content (input element). */\n  children?: JSX.Element;\n  /** ID for the label's htmlFor attribute. */\n  htmlFor?: string;\n}\n\n// Vertical field stack. The label/help-text colors mirror S2's `fieldLabel()`\n// and `helpTextStyles` (`neutral-subdued`, flipping to `negative`/`disabled`);\n// sizes map sm/md/lg → the UI font's xs/sm/base steps. Routed through the\n// `style()` macro so the CSS ships in the package bundle for installed consumers.\nconst fieldStyles = style<{ size: FieldSize }>({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: { default: 8, size: { sm: 4, lg: 12 } },\n});\n\nconst fieldLabelStyles = style<{ size: FieldSize; isDisabled?: boolean }>({\n  font: { default: \"ui-sm\", size: { sm: \"ui-xs\", lg: \"ui\" } },\n  color: { default: \"neutral-subdued\", isDisabled: \"disabled\" },\n});\n\nconst fieldTextStyles = style<{ size: FieldSize; isInvalid?: boolean; isDisabled?: boolean }>({\n  font: { default: \"ui-sm\", size: { sm: \"ui-xs\" } },\n  color: { default: \"neutral-subdued\", isInvalid: \"negative\", isDisabled: \"disabled\" },\n});\n\nconst requiredStyles = style({ color: \"negative\", marginStart: 2 });\n\n/**\n * A field layout component that provides label, help text, and error message\n * around a form input.\n */\nexport function Field(props: FieldProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"label\",\n    \"description\",\n    \"errorMessage\",\n    \"isRequired\",\n    \"isDisabled\",\n    \"isInvalid\",\n    \"size\",\n    \"class\",\n    \"children\",\n    \"htmlFor\",\n  ]);\n\n  const size = () => local.size ?? \"md\";\n  const showError = () => local.isInvalid && local.errorMessage;\n\n  return (\n    <div class={[fieldStyles({ size: size() }), local.class].filter(Boolean).join(\" \")}>\n      <Show when={local.label}>\n        <label\n          for={local.htmlFor}\n          class={fieldLabelStyles({ size: size(), isDisabled: local.isDisabled })}\n        >\n          {local.label}\n          <Show when={local.isRequired}>\n            <span class={requiredStyles}>*</span>\n          </Show>\n        </label>\n      </Show>\n\n      {local.children}\n\n      <Show when={showError()}>\n        <p class={fieldTextStyles({ size: size(), isInvalid: true })} role=\"alert\">\n          {local.errorMessage}\n        </p>\n      </Show>\n\n      <Show when={!showError() && local.description}>\n        <p class={fieldTextStyles({ size: size(), isDisabled: local.isDisabled })}>\n          {local.description}\n        </p>\n      </Show>\n    </div>\n  );\n}\n","import { type JSX, splitProps, Show } from \"solid-js\";\nimport { style } from \"../style\" with { type: \"macro\" };\n\nexport interface HelpTextProps {\n  /** The description text. */\n  description?: string;\n  /** The error message text. */\n  errorMessage?: string;\n  /** Whether the field is in an error state. */\n  isInvalid?: boolean;\n  /** Whether the help text is disabled (dimmed). */\n  isDisabled?: boolean;\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n// Mirrors S2's `helpTextStyles` (Field.tsx): the small UI font with a\n// `neutral-subdued` description color that flips to `negative` for errors and\n// `disabled` when the field is disabled. Emitted via the `style()` macro so the\n// CSS ships in the package bundle for installed consumers.\nconst helpTextStyles = style<{ isInvalid?: boolean; isDisabled?: boolean }>({\n  font: \"ui-sm\",\n  color: {\n    default: \"neutral-subdued\",\n    isInvalid: \"negative\",\n    isDisabled: \"disabled\",\n  },\n});\n\n/**\n * Displays description or error text below a form field.\n */\nexport function HelpText(props: HelpTextProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"description\",\n    \"errorMessage\",\n    \"isInvalid\",\n    \"isDisabled\",\n    \"class\",\n  ]);\n\n  const showError = () => local.isInvalid && local.errorMessage;\n\n  return (\n    <div class={local.class}>\n      <Show when={showError()}>\n        <p class={helpTextStyles({ isInvalid: true })} role=\"alert\">\n          {local.errorMessage}\n        </p>\n      </Show>\n      <Show when={!showError() && local.description}>\n        <p class={helpTextStyles({ isDisabled: local.isDisabled })}>{local.description}</p>\n      </Show>\n    </div>\n  );\n}\n","import { type JSX, createContext, splitProps, useContext } from \"solid-js\";\nimport {\n  Form as HeadlessForm,\n  FieldError as HeadlessFieldError,\n  type FormProps as HeadlessFormProps,\n  type FieldErrorProps as HeadlessFieldErrorProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport type { UnsafeClassName } from \"../s2-internal/style-utils\";\nimport { getAllowedOverrides } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { createIsSkeleton } from \"../skeleton\";\nimport { assignRef } from \"../button/spectrum-context\";\n\nexport type FormSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type FormLabelPosition = \"top\" | \"side\";\nexport type FormLabelAlign = \"start\" | \"end\";\nexport type FormNecessityIndicator = \"icon\" | \"label\";\n\nexport interface FormStyleProps {\n  /** The size of descendant Form elements. @default 'M' */\n  size?: FormSize;\n  /** The label's overall position relative to each field. @default 'top' */\n  labelPosition?: FormLabelPosition;\n  /** The label's horizontal alignment relative to each field. @default 'start' */\n  labelAlign?: FormLabelAlign;\n  /** Whether required fields show an icon or text label. @default 'icon' */\n  necessityIndicator?: FormNecessityIndicator;\n  /** Whether descendant Form elements are required. */\n  isRequired?: boolean;\n  /** Whether descendant Form elements are disabled. */\n  isDisabled?: boolean;\n  /** Whether descendant Form elements are rendered with emphasized styling. */\n  isEmphasized?: boolean;\n}\n\nexport interface FormProps\n  extends Omit<HeadlessFormProps, \"class\" | \"style\" | \"ref\">, FormStyleProps {\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  ref?: HeadlessFormProps[\"ref\"];\n}\n\nexport interface FieldErrorProps extends Omit<HeadlessFieldErrorProps, \"class\"> {\n  class?: string;\n}\n\nexport const FormContext = createContext<FormStyleProps | null>(null);\n\nconst formStylePropKeys = [\n  \"size\",\n  \"labelPosition\",\n  \"labelAlign\",\n  \"necessityIndicator\",\n  \"isRequired\",\n  \"isDisabled\",\n  \"isEmphasized\",\n] as const;\n\nexport function useIsInForm(): boolean {\n  return useContext(FormContext) != null;\n}\n\nexport function useFormProps<T extends object>(props: T): T {\n  const context = useContext(FormContext);\n  const isSkeleton = createIsSkeleton();\n\n  const getInheritedValue = (property: PropertyKey) => {\n    if (property === \"isDisabled\" && isSkeleton()) {\n      return true;\n    }\n\n    if (typeof property !== \"string\") {\n      return undefined;\n    }\n\n    return context?.[property as keyof FormStyleProps];\n  };\n\n  return new Proxy(props, {\n    get(target, property, receiver) {\n      if (property === \"isDisabled\" && isSkeleton()) {\n        return true;\n      }\n\n      const localValue = Reflect.get(target, property, receiver);\n      if (localValue !== undefined) {\n        return localValue;\n      }\n\n      return getInheritedValue(property);\n    },\n    has(target, property) {\n      return Reflect.has(target, property) || getInheritedValue(property) !== undefined;\n    },\n    ownKeys(target) {\n      const keys = new Set<ReturnType<typeof Reflect.ownKeys>[number]>(Reflect.ownKeys(target));\n\n      for (const key of formStylePropKeys) {\n        if (getInheritedValue(key) !== undefined) {\n          keys.add(key);\n        }\n      }\n\n      return Array.from(keys);\n    },\n    getOwnPropertyDescriptor(target, property) {\n      if (property === \"isDisabled\" && isSkeleton()) {\n        return {\n          enumerable: true,\n          configurable: true,\n          get: () => true,\n        };\n      }\n\n      const descriptor = Reflect.getOwnPropertyDescriptor(target, property);\n      if (descriptor) {\n        return descriptor;\n      }\n\n      if (getInheritedValue(property) !== undefined) {\n        return {\n          enumerable: true,\n          configurable: true,\n          get: () => getInheritedValue(property),\n        };\n      }\n\n      return undefined;\n    },\n  }) as T;\n}\n\nconst formStyles = style<{ labelPosition: FormLabelPosition; size: FormSize }>(\n  {\n    display: \"grid\",\n    gridTemplateColumns: {\n      labelPosition: {\n        top: [\"[field] 1fr\"],\n        side: [\"[label] auto\", \"[field] 1fr\"],\n      },\n    },\n    rowGap: {\n      size: {\n        S: 20,\n        M: 24,\n        L: 32,\n        XL: 40,\n      },\n    },\n    columnGap: \"text-to-control\",\n  },\n  getAllowedOverrides(),\n);\n\nexport function Form(props: FormProps): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\n    \"size\",\n    \"labelPosition\",\n    \"labelAlign\",\n    \"necessityIndicator\",\n    \"isRequired\",\n    \"isDisabled\",\n    \"isEmphasized\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"ref\",\n    \"children\",\n  ]);\n\n  const size = () => local.size ?? \"M\";\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const labelAlign = () => local.labelAlign ?? \"start\";\n  const necessityIndicator = () => local.necessityIndicator ?? \"icon\";\n\n  const contextValue: FormStyleProps = {\n    get size() {\n      return size();\n    },\n    get labelPosition() {\n      return labelPosition();\n    },\n    get labelAlign() {\n      return labelAlign();\n    },\n    get necessityIndicator() {\n      return necessityIndicator();\n    },\n    get isRequired() {\n      return local.isRequired;\n    },\n    get isDisabled() {\n      return local.isDisabled;\n    },\n    get isEmphasized() {\n      return local.isEmphasized;\n    },\n  };\n\n  return (\n    <FormContext.Provider value={contextValue}>\n      <HeadlessForm\n        {...headlessProps}\n        ref={(el) => assignRef(local.ref, el)}\n        class={[\n          local.UNSAFE_className,\n          formStyles({ size: size(), labelPosition: labelPosition() }, local.styles),\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        style={local.UNSAFE_style}\n      >\n        {(renderProps) =>\n          typeof local.children === \"function\" ? local.children(renderProps) : local.children\n        }\n      </HeadlessForm>\n    </FormContext.Provider>\n  );\n}\n\n// Small UI font in the `negative` color, mirroring S2's help-text error state.\nconst fieldErrorStyles = style({ font: \"ui-sm\", color: \"negative\" });\n\nexport function FieldError(props: FieldErrorProps): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"class\"]);\n  return (\n    <HeadlessFieldError\n      {...headlessProps}\n      class={[fieldErrorStyles, local.class].filter(Boolean).join(\" \")}\n    />\n  );\n}\n\nexport { Field } from \"./Field\";\nexport type { FieldProps, FieldSize } from \"./Field\";\nexport { HelpText } from \"./HelpText\";\nexport type { HelpTextProps } from \"./HelpText\";\n"],"mappings":"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"}
+{"version":3,"file":"form.jsx","names":[],"sources":["../../src/form/Field.tsx","../../src/form/HelpText.tsx","../../src/form/index.tsx"],"sourcesContent":["import { type JSX, splitProps, Show } from \"solid-js\";\nimport { style } from \"../style\" with { type: \"macro\" };\n\nexport type FieldSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface FieldProps {\n  /** The label for the field. */\n  label?: string;\n  /** A description or help text for the field. */\n  description?: string;\n  /** An error message for the field. */\n  errorMessage?: string;\n  /** Whether the field is required. */\n  isRequired?: boolean;\n  /** Whether the field is disabled. */\n  isDisabled?: boolean;\n  /** Whether the field is invalid. */\n  isInvalid?: boolean;\n  /** The size of the field. @default 'md' */\n  size?: FieldSize;\n  /** Additional CSS class name. */\n  class?: string;\n  /** The field content (input element). */\n  children?: JSX.Element;\n  /** ID for the label's htmlFor attribute. */\n  htmlFor?: string;\n}\n\n// Vertical field stack. The label/help-text colors mirror S2's `fieldLabel()`\n// and `helpTextStyles` (`neutral-subdued`, flipping to `negative`/`disabled`);\n// sizes map sm/md/lg → the UI font's xs/sm/base steps. Routed through the\n// `style()` macro so the CSS ships in the package bundle for installed consumers.\nconst fieldStyles = style<{ size: FieldSize }>({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: { default: 8, size: { sm: 4, lg: 12 } },\n});\n\nconst fieldLabelStyles = style<{ size: FieldSize; isDisabled?: boolean }>({\n  font: { default: \"ui-sm\", size: { sm: \"ui-xs\", lg: \"ui\" } },\n  color: { default: \"neutral-subdued\", isDisabled: \"disabled\" },\n});\n\nconst fieldTextStyles = style<{ size: FieldSize; isInvalid?: boolean; isDisabled?: boolean }>({\n  font: { default: \"ui-sm\", size: { sm: \"ui-xs\" } },\n  color: { default: \"neutral-subdued\", isInvalid: \"negative\", isDisabled: \"disabled\" },\n});\n\nconst requiredStyles = style({ color: \"negative\", marginStart: 2 });\n\n/**\n * A field layout component that provides label, help text, and error message\n * around a form input.\n */\nexport function Field(props: FieldProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"label\",\n    \"description\",\n    \"errorMessage\",\n    \"isRequired\",\n    \"isDisabled\",\n    \"isInvalid\",\n    \"size\",\n    \"class\",\n    \"children\",\n    \"htmlFor\",\n  ]);\n\n  const size = () => local.size ?? \"md\";\n  const showError = () => local.isInvalid && local.errorMessage;\n\n  return (\n    <div class={[fieldStyles({ size: size() }), local.class].filter(Boolean).join(\" \")}>\n      <Show when={local.label}>\n        <label\n          for={local.htmlFor}\n          class={fieldLabelStyles({ size: size(), isDisabled: local.isDisabled })}\n        >\n          {local.label}\n          <Show when={local.isRequired}>\n            <span class={requiredStyles}>*</span>\n          </Show>\n        </label>\n      </Show>\n\n      {local.children}\n\n      <Show when={showError()}>\n        <p class={fieldTextStyles({ size: size(), isInvalid: true })} role=\"alert\">\n          {local.errorMessage}\n        </p>\n      </Show>\n\n      <Show when={!showError() && local.description}>\n        <p class={fieldTextStyles({ size: size(), isDisabled: local.isDisabled })}>\n          {local.description}\n        </p>\n      </Show>\n    </div>\n  );\n}\n","import { type JSX, splitProps, Show } from \"solid-js\";\nimport { style } from \"../style\" with { type: \"macro\" };\n\nexport interface HelpTextProps {\n  /** The description text. */\n  description?: string;\n  /** The error message text. */\n  errorMessage?: string;\n  /** Whether the field is in an error state. */\n  isInvalid?: boolean;\n  /** Whether the help text is disabled (dimmed). */\n  isDisabled?: boolean;\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n// Mirrors S2's `helpTextStyles` (Field.tsx): the small UI font with a\n// `neutral-subdued` description color that flips to `negative` for errors and\n// `disabled` when the field is disabled. Emitted via the `style()` macro so the\n// CSS ships in the package bundle for installed consumers.\nconst helpTextStyles = style<{ isInvalid?: boolean; isDisabled?: boolean }>({\n  font: \"ui-sm\",\n  color: {\n    default: \"neutral-subdued\",\n    isInvalid: \"negative\",\n    isDisabled: \"disabled\",\n  },\n});\n\n/**\n * Displays description or error text below a form field.\n */\nexport function HelpText(props: HelpTextProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"description\",\n    \"errorMessage\",\n    \"isInvalid\",\n    \"isDisabled\",\n    \"class\",\n  ]);\n\n  const showError = () => local.isInvalid && local.errorMessage;\n\n  return (\n    <div class={local.class}>\n      <Show when={showError()}>\n        <p class={helpTextStyles({ isInvalid: true })} role=\"alert\">\n          {local.errorMessage}\n        </p>\n      </Show>\n      <Show when={!showError() && local.description}>\n        <p class={helpTextStyles({ isDisabled: local.isDisabled })}>{local.description}</p>\n      </Show>\n    </div>\n  );\n}\n","import { type JSX, createContext, splitProps, useContext } from \"solid-js\";\nimport {\n  Form as HeadlessForm,\n  FieldError as HeadlessFieldError,\n  type FormProps as HeadlessFormProps,\n  type FieldErrorProps as HeadlessFieldErrorProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport type { UnsafeClassName } from \"../s2-internal/style-utils\";\nimport { getAllowedOverrides } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { createIsSkeleton } from \"../skeleton\";\nimport { assignRef } from \"../button/spectrum-context\";\n\nexport type FormSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type FormLabelPosition = \"top\" | \"side\";\nexport type FormLabelAlign = \"start\" | \"end\";\nexport type FormNecessityIndicator = \"icon\" | \"label\";\n\nexport interface FormStyleProps {\n  /** The size of descendant Form elements. @default 'M' */\n  size?: FormSize;\n  /** The label's overall position relative to each field. @default 'top' */\n  labelPosition?: FormLabelPosition;\n  /** The label's horizontal alignment relative to each field. @default 'start' */\n  labelAlign?: FormLabelAlign;\n  /** Whether required fields show an icon or text label. @default 'icon' */\n  necessityIndicator?: FormNecessityIndicator;\n  /** Whether descendant Form elements are required. */\n  isRequired?: boolean;\n  /** Whether descendant Form elements are disabled. */\n  isDisabled?: boolean;\n  /** Whether descendant Form elements are rendered with emphasized styling. */\n  isEmphasized?: boolean;\n}\n\nexport interface FormProps\n  extends Omit<HeadlessFormProps, \"class\" | \"style\" | \"ref\">, FormStyleProps {\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  ref?: HeadlessFormProps[\"ref\"];\n}\n\nexport interface FieldErrorProps extends Omit<HeadlessFieldErrorProps, \"class\"> {\n  class?: string;\n}\n\nexport const FormContext = createContext<FormStyleProps | null>(null);\n\nconst formStylePropKeys = [\n  \"size\",\n  \"labelPosition\",\n  \"labelAlign\",\n  \"necessityIndicator\",\n  \"isRequired\",\n  \"isDisabled\",\n  \"isEmphasized\",\n] as const;\n\nexport function useIsInForm(): boolean {\n  return useContext(FormContext) != null;\n}\n\nexport function useFormProps<T extends object>(props: T): T {\n  const context = useContext(FormContext);\n  const isSkeleton = createIsSkeleton();\n\n  const getInheritedValue = (property: PropertyKey) => {\n    if (property === \"isDisabled\" && isSkeleton()) {\n      return true;\n    }\n\n    if (typeof property !== \"string\") {\n      return undefined;\n    }\n\n    return context?.[property as keyof FormStyleProps];\n  };\n\n  return new Proxy(props, {\n    get(target, property, receiver) {\n      if (property === \"isDisabled\" && isSkeleton()) {\n        return true;\n      }\n\n      const localValue = Reflect.get(target, property, receiver);\n      if (localValue !== undefined) {\n        return localValue;\n      }\n\n      return getInheritedValue(property);\n    },\n    has(target, property) {\n      return Reflect.has(target, property) || getInheritedValue(property) !== undefined;\n    },\n    ownKeys(target) {\n      const keys = new Set<ReturnType<typeof Reflect.ownKeys>[number]>(Reflect.ownKeys(target));\n\n      for (const key of formStylePropKeys) {\n        if (getInheritedValue(key) !== undefined) {\n          keys.add(key);\n        }\n      }\n\n      return Array.from(keys);\n    },\n    getOwnPropertyDescriptor(target, property) {\n      if (property === \"isDisabled\" && isSkeleton()) {\n        return {\n          enumerable: true,\n          configurable: true,\n          get: () => true,\n        };\n      }\n\n      const descriptor = Reflect.getOwnPropertyDescriptor(target, property);\n      if (descriptor) {\n        return descriptor;\n      }\n\n      if (getInheritedValue(property) !== undefined) {\n        return {\n          enumerable: true,\n          configurable: true,\n          get: () => getInheritedValue(property),\n        };\n      }\n\n      return undefined;\n    },\n  }) as T;\n}\n\nconst formStyles = style<{ labelPosition: FormLabelPosition; size: FormSize }>(\n  {\n    display: \"grid\",\n    gridTemplateColumns: {\n      labelPosition: {\n        top: [\"[field] 1fr\"],\n        side: [\"[label] auto\", \"[field] 1fr\"],\n      },\n    },\n    rowGap: {\n      size: {\n        S: 20,\n        M: 24,\n        L: 32,\n        XL: 40,\n      },\n    },\n    columnGap: \"text-to-control\",\n  },\n  getAllowedOverrides(),\n);\n\nexport function Form(props: FormProps): JSX.Element {\n  // Leave `children` on the headless rest props so they flow through as a\n  // lazy Solid getter — do not split them off and re-wrap. A forced\n  // `(rp) => children` render-prop wrapper desyncs createUniqueId between SSR\n  // and client (Form+Button hydration mismatch). See solid-spectrum Form.\n  const [local, headlessProps] = splitProps(props, [\n    \"size\",\n    \"labelPosition\",\n    \"labelAlign\",\n    \"necessityIndicator\",\n    \"isRequired\",\n    \"isDisabled\",\n    \"isEmphasized\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"ref\",\n  ]);\n\n  const size = () => local.size ?? \"M\";\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const labelAlign = () => local.labelAlign ?? \"start\";\n  const necessityIndicator = () => local.necessityIndicator ?? \"icon\";\n\n  const contextValue: FormStyleProps = {\n    get size() {\n      return size();\n    },\n    get labelPosition() {\n      return labelPosition();\n    },\n    get labelAlign() {\n      return labelAlign();\n    },\n    get necessityIndicator() {\n      return necessityIndicator();\n    },\n    get isRequired() {\n      return local.isRequired;\n    },\n    get isDisabled() {\n      return local.isDisabled;\n    },\n    get isEmphasized() {\n      return local.isEmphasized;\n    },\n  };\n\n  return (\n    <FormContext.Provider value={contextValue}>\n      <HeadlessForm\n        {...headlessProps}\n        ref={(el) => assignRef(local.ref, el)}\n        class={[\n          local.UNSAFE_className,\n          formStyles({ size: size(), labelPosition: labelPosition() }, local.styles),\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        style={local.UNSAFE_style}\n      />\n    </FormContext.Provider>\n  );\n}\n\n// Small UI font in the `negative` color, mirroring S2's help-text error state.\nconst fieldErrorStyles = style({ font: \"ui-sm\", color: \"negative\" });\n\nexport function FieldError(props: FieldErrorProps): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"class\"]);\n  return (\n    <HeadlessFieldError\n      {...headlessProps}\n      class={[fieldErrorStyles, local.class].filter(Boolean).join(\" \")}\n    />\n  );\n}\n\nexport { Field } from \"./Field\";\nexport type { FieldProps, FieldSize } from \"./Field\";\nexport { HelpText } from \"./HelpText\";\nexport type { HelpTextProps } from \"./HelpText\";\n"],"mappings":"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"}

package/dist/_chunk/layout.js

@@ -42,10 +42,14 @@ function Flex(props) {
 		"justifyContent",
 		"inline",
 		"class",
+		"style",
 		"children"
 	]);
 	const flexStyle = () => {
-		const s = { display: local.inline ? "inline-flex" : "flex" };
+		const s = {
+			display: local.inline ? "inline-flex" : "flex",
+			...local.style
+		};
 		if (local.direction) s["flex-direction"] = local.direction;
 		if (local.gap !== void 0) s.gap = resolveGap(local.gap);
 		if (local.wrap) s["flex-wrap"] = local.wrap === true || local.wrap === "wrap" ? "wrap" : local.wrap === "wrap-reverse" ? "wrap-reverse" : "nowrap";

package/dist/_chunk/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","names":["JSX","splitProps","FlexProps","direction","gap","wrap","alignItems","justifyContent","inline","class","children","Element","alignMap","Record","start","center","end","stretch","baseline","justifyMap","between","around","evenly","gapTokens","xs","sm","md","lg","xl","resolveGap","value","test","parseFloat","Flex","props","local","rest","flexStyle","CSSProperties","s","display","undefined","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","style","_$insert","_$runHydrationEvents","JSX","splitProps","resolveGap","GridProps","columns","rows","gap","columnGap","rowGap","areas","alignItems","justifyItems","inline","class","style","CSSProperties","children","Element","Grid","props","local","rest","gridStyle","s","display","undefined","map","a","join","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","_$insert","_$runHydrationEvents"],"sources":["../../src/layout/Flex.tsx","../../src/layout/Grid.tsx","../../src/layout/css-utils.ts"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\n\nexport interface FlexProps {\n  /** The flex direction. @default 'row' */\n  direction?: \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\";\n  /** The gap between items. Accepts a t-shirt size, a number (spacing scale), or a raw CSS length. @default '0' */\n  gap?: string | number;\n  /** Whether items should wrap. @default false */\n  wrap?: boolean | \"wrap\" | \"nowrap\" | \"wrap-reverse\";\n  /** The alignment of items. */\n  alignItems?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\n  /** The justification of items. */\n  justifyContent?: \"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\";\n  /** Whether the flex container is inline. */\n  inline?: boolean;\n  /** Additional CSS class name. */\n  class?: string;\n  /** The content. */\n  children?: JSX.Element;\n}\n\n// Layout primitives emit inline CSS so the styling ships with the package for\n// installed consumers, rather than relying on Tailwind utility strings the\n// package ships no CSS for.\n\nconst alignMap: Record<string, string> = {\n  start: \"flex-start\",\n  center: \"center\",\n  end: \"flex-end\",\n  stretch: \"stretch\",\n  baseline: \"baseline\",\n};\n\nconst justifyMap: Record<string, string> = {\n  start: \"flex-start\",\n  center: \"center\",\n  end: \"flex-end\",\n  between: \"space-between\",\n  around: \"space-around\",\n  evenly: \"space-evenly\",\n};\n\n// t-shirt gap tokens map to the Spectrum spacing scale; a bare number follows\n// Tailwind's spacing scale (1 unit = 0.25rem); anything else is a raw CSS length.\nconst gapTokens: Record<string, string> = {\n  xs: \"4px\",\n  sm: \"8px\",\n  md: \"16px\",\n  lg: \"24px\",\n  xl: \"32px\",\n};\n\nexport function resolveGap(value: string | number): string {\n  if (typeof value === \"number\") return `${value * 0.25}rem`;\n  if (value in gapTokens) return gapTokens[value];\n  if (/^\\d+(?:\\.\\d+)?$/.test(value)) return `${parseFloat(value) * 0.25}rem`;\n  return value;\n}\n\n/**\n * A flex container layout component.\n */\nexport function Flex(props: FlexProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"direction\",\n    \"gap\",\n    \"wrap\",\n    \"alignItems\",\n    \"justifyContent\",\n    \"inline\",\n    \"class\",\n    \"children\",\n  ]);\n\n  const flexStyle = (): JSX.CSSProperties => {\n    const s: JSX.CSSProperties = {\n      display: local.inline ? \"inline-flex\" : \"flex\",\n    };\n\n    if (local.direction) s[\"flex-direction\"] = local.direction;\n    if (local.gap !== undefined) s.gap = resolveGap(local.gap);\n    if (local.wrap) {\n      s[\"flex-wrap\"] =\n        local.wrap === true || local.wrap === \"wrap\"\n          ? \"wrap\"\n          : local.wrap === \"wrap-reverse\"\n            ? \"wrap-reverse\"\n            : \"nowrap\";\n    }\n    if (local.alignItems) s[\"align-items\"] = alignMap[local.alignItems];\n    if (local.justifyContent) s[\"justify-content\"] = justifyMap[local.justifyContent];\n\n    return s;\n  };\n\n  return (\n    <div {...rest} class={local.class} style={flexStyle()}>\n      {local.children}\n    </div>\n  );\n}\n","import { type JSX, splitProps } from \"solid-js\";\nimport { resolveGap } from \"./Flex\";\n\nexport interface GridProps {\n  /** The number of columns, or a grid-template-columns value. */\n  columns?: number | string;\n  /** The number of rows, or a grid-template-rows value. */\n  rows?: number | string;\n  /** The gap between items. Accepts a t-shirt size, a number (spacing scale), or a raw CSS length. */\n  gap?: string | number;\n  /** The column gap. */\n  columnGap?: string | number;\n  /** The row gap. */\n  rowGap?: string | number;\n  /** Named grid areas (grid-template-areas). */\n  areas?: string[];\n  /** The alignment of items. */\n  alignItems?: \"start\" | \"center\" | \"end\" | \"stretch\";\n  /** The justification of items. */\n  justifyItems?: \"start\" | \"center\" | \"end\" | \"stretch\";\n  /** Whether the grid is inline. */\n  inline?: boolean;\n  /** Additional CSS class name. */\n  class?: string;\n  /** Additional inline styles. */\n  style?: JSX.CSSProperties;\n  /** The content. */\n  children?: JSX.Element;\n}\n\n// Layout primitives emit inline CSS so the styling ships with the package for\n// installed consumers, rather than relying on Tailwind utility strings the\n// package ships no CSS for.\n\n/**\n * A CSS Grid layout component.\n */\nexport function Grid(props: GridProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"columns\",\n    \"rows\",\n    \"gap\",\n    \"columnGap\",\n    \"rowGap\",\n    \"areas\",\n    \"alignItems\",\n    \"justifyItems\",\n    \"inline\",\n    \"class\",\n    \"style\",\n    \"children\",\n  ]);\n\n  const gridStyle = (): JSX.CSSProperties => {\n    const s: JSX.CSSProperties = {\n      display: local.inline ? \"inline-grid\" : \"grid\",\n      ...local.style,\n    };\n\n    if (local.columns !== undefined) {\n      s[\"grid-template-columns\"] =\n        typeof local.columns === \"number\" ? `repeat(${local.columns}, 1fr)` : local.columns;\n    }\n    if (local.rows !== undefined) {\n      s[\"grid-template-rows\"] =\n        typeof local.rows === \"number\" ? `repeat(${local.rows}, 1fr)` : local.rows;\n    }\n    if (local.areas) {\n      s[\"grid-template-areas\"] = local.areas.map((a) => `\"${a}\"`).join(\" \");\n    }\n    if (local.gap !== undefined) s.gap = resolveGap(local.gap);\n    if (local.columnGap !== undefined) s[\"column-gap\"] = resolveGap(local.columnGap);\n    if (local.rowGap !== undefined) s[\"row-gap\"] = resolveGap(local.rowGap);\n    if (local.alignItems) s[\"align-items\"] = local.alignItems;\n    if (local.justifyItems) s[\"justify-items\"] = local.justifyItems;\n\n    return s;\n  };\n\n  return (\n    <div {...rest} class={local.class} style={gridStyle()}>\n      {local.children}\n    </div>\n  );\n}\n","/**\n * Creates a CSS `fit-content()` value.\n * @param value - The max content size (e.g., '200px', '50%')\n */\nexport function fitContent(value: string): string {\n  return `fit-content(${value})`;\n}\n\n/**\n * Creates a CSS `minmax()` value.\n * @param min - The minimum size\n * @param max - The maximum size\n */\nexport function minmax(min: string, max: string): string {\n  return `minmax(${min}, ${max})`;\n}\n\n/**\n * Creates a CSS `repeat()` value.\n * @param count - The repetition count or 'auto-fill' / 'auto-fit'\n * @param track - The track definition\n */\nexport function repeat(count: number | \"auto-fill\" | \"auto-fit\", track: string): string {\n  return `repeat(${count}, ${track})`;\n}\n"],"mappings":"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"}
+{"version":3,"file":"layout.js","names":["JSX","splitProps","FlexProps","direction","gap","wrap","alignItems","justifyContent","inline","class","style","CSSProperties","children","Element","alignMap","Record","start","center","end","stretch","baseline","justifyMap","between","around","evenly","gapTokens","xs","sm","md","lg","xl","resolveGap","value","test","parseFloat","Flex","props","local","rest","flexStyle","s","display","undefined","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","_$insert","_$runHydrationEvents","JSX","splitProps","resolveGap","GridProps","columns","rows","gap","columnGap","rowGap","areas","alignItems","justifyItems","inline","class","style","CSSProperties","children","Element","Grid","props","local","rest","gridStyle","s","display","undefined","map","a","join","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","_$insert","_$runHydrationEvents"],"sources":["../../src/layout/Flex.tsx","../../src/layout/Grid.tsx","../../src/layout/css-utils.ts"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\n\nexport interface FlexProps {\n  /** The flex direction. @default 'row' */\n  direction?: \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\";\n  /** The gap between items. Accepts a t-shirt size, a number (spacing scale), or a raw CSS length. @default '0' */\n  gap?: string | number;\n  /** Whether items should wrap. @default false */\n  wrap?: boolean | \"wrap\" | \"nowrap\" | \"wrap-reverse\";\n  /** The alignment of items. */\n  alignItems?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\n  /** The justification of items. */\n  justifyContent?: \"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\";\n  /** Whether the flex container is inline. */\n  inline?: boolean;\n  /** Additional CSS class name. */\n  class?: string;\n  /** Additional inline styles. */\n  style?: JSX.CSSProperties;\n  /** The content. */\n  children?: JSX.Element;\n}\n\n// Layout primitives emit inline CSS so the styling ships with the package for\n// installed consumers, rather than relying on Tailwind utility strings the\n// package ships no CSS for.\n\nconst alignMap: Record<string, string> = {\n  start: \"flex-start\",\n  center: \"center\",\n  end: \"flex-end\",\n  stretch: \"stretch\",\n  baseline: \"baseline\",\n};\n\nconst justifyMap: Record<string, string> = {\n  start: \"flex-start\",\n  center: \"center\",\n  end: \"flex-end\",\n  between: \"space-between\",\n  around: \"space-around\",\n  evenly: \"space-evenly\",\n};\n\n// t-shirt gap tokens map to the Spectrum spacing scale; a bare number follows\n// Tailwind's spacing scale (1 unit = 0.25rem); anything else is a raw CSS length.\nconst gapTokens: Record<string, string> = {\n  xs: \"4px\",\n  sm: \"8px\",\n  md: \"16px\",\n  lg: \"24px\",\n  xl: \"32px\",\n};\n\nexport function resolveGap(value: string | number): string {\n  if (typeof value === \"number\") return `${value * 0.25}rem`;\n  if (value in gapTokens) return gapTokens[value];\n  if (/^\\d+(?:\\.\\d+)?$/.test(value)) return `${parseFloat(value) * 0.25}rem`;\n  return value;\n}\n\n/**\n * A flex container layout component.\n */\nexport function Flex(props: FlexProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"direction\",\n    \"gap\",\n    \"wrap\",\n    \"alignItems\",\n    \"justifyContent\",\n    \"inline\",\n    \"class\",\n    \"style\",\n    \"children\",\n  ]);\n\n  // `style` is merged rather than left in `rest`, where the assignment below would have\n  // silently dropped it. Grid already accepted one; the two primitives are meant to be\n  // interchangeable, and without it every decorated row has to fall back to a bare div.\n  const flexStyle = (): JSX.CSSProperties => {\n    const s: JSX.CSSProperties = {\n      display: local.inline ? \"inline-flex\" : \"flex\",\n      ...local.style,\n    };\n\n    if (local.direction) s[\"flex-direction\"] = local.direction;\n    if (local.gap !== undefined) s.gap = resolveGap(local.gap);\n    if (local.wrap) {\n      s[\"flex-wrap\"] =\n        local.wrap === true || local.wrap === \"wrap\"\n          ? \"wrap\"\n          : local.wrap === \"wrap-reverse\"\n            ? \"wrap-reverse\"\n            : \"nowrap\";\n    }\n    if (local.alignItems) s[\"align-items\"] = alignMap[local.alignItems];\n    if (local.justifyContent) s[\"justify-content\"] = justifyMap[local.justifyContent];\n\n    return s;\n  };\n\n  return (\n    <div {...rest} class={local.class} style={flexStyle()}>\n      {local.children}\n    </div>\n  );\n}\n","import { type JSX, splitProps } from \"solid-js\";\nimport { resolveGap } from \"./Flex\";\n\nexport interface GridProps {\n  /** The number of columns, or a grid-template-columns value. */\n  columns?: number | string;\n  /** The number of rows, or a grid-template-rows value. */\n  rows?: number | string;\n  /** The gap between items. Accepts a t-shirt size, a number (spacing scale), or a raw CSS length. */\n  gap?: string | number;\n  /** The column gap. */\n  columnGap?: string | number;\n  /** The row gap. */\n  rowGap?: string | number;\n  /** Named grid areas (grid-template-areas). */\n  areas?: string[];\n  /** The alignment of items. */\n  alignItems?: \"start\" | \"center\" | \"end\" | \"stretch\";\n  /** The justification of items. */\n  justifyItems?: \"start\" | \"center\" | \"end\" | \"stretch\";\n  /** Whether the grid is inline. */\n  inline?: boolean;\n  /** Additional CSS class name. */\n  class?: string;\n  /** Additional inline styles. */\n  style?: JSX.CSSProperties;\n  /** The content. */\n  children?: JSX.Element;\n}\n\n// Layout primitives emit inline CSS so the styling ships with the package for\n// installed consumers, rather than relying on Tailwind utility strings the\n// package ships no CSS for.\n\n/**\n * A CSS Grid layout component.\n */\nexport function Grid(props: GridProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"columns\",\n    \"rows\",\n    \"gap\",\n    \"columnGap\",\n    \"rowGap\",\n    \"areas\",\n    \"alignItems\",\n    \"justifyItems\",\n    \"inline\",\n    \"class\",\n    \"style\",\n    \"children\",\n  ]);\n\n  const gridStyle = (): JSX.CSSProperties => {\n    const s: JSX.CSSProperties = {\n      display: local.inline ? \"inline-grid\" : \"grid\",\n      ...local.style,\n    };\n\n    if (local.columns !== undefined) {\n      s[\"grid-template-columns\"] =\n        typeof local.columns === \"number\" ? `repeat(${local.columns}, 1fr)` : local.columns;\n    }\n    if (local.rows !== undefined) {\n      s[\"grid-template-rows\"] =\n        typeof local.rows === \"number\" ? `repeat(${local.rows}, 1fr)` : local.rows;\n    }\n    if (local.areas) {\n      s[\"grid-template-areas\"] = local.areas.map((a) => `\"${a}\"`).join(\" \");\n    }\n    if (local.gap !== undefined) s.gap = resolveGap(local.gap);\n    if (local.columnGap !== undefined) s[\"column-gap\"] = resolveGap(local.columnGap);\n    if (local.rowGap !== undefined) s[\"row-gap\"] = resolveGap(local.rowGap);\n    if (local.alignItems) s[\"align-items\"] = local.alignItems;\n    if (local.justifyItems) s[\"justify-items\"] = local.justifyItems;\n\n    return s;\n  };\n\n  return (\n    <div {...rest} class={local.class} style={gridStyle()}>\n      {local.children}\n    </div>\n  );\n}\n","/**\n * Creates a CSS `fit-content()` value.\n * @param value - The max content size (e.g., '200px', '50%')\n */\nexport function fitContent(value: string): string {\n  return `fit-content(${value})`;\n}\n\n/**\n * Creates a CSS `minmax()` value.\n * @param min - The minimum size\n * @param max - The maximum size\n */\nexport function minmax(min: string, max: string): string {\n  return `minmax(${min}, ${max})`;\n}\n\n/**\n * Creates a CSS `repeat()` value.\n * @param count - The repetition count or 'auto-fill' / 'auto-fit'\n * @param track - The track definition\n */\nexport function repeat(count: number | \"auto-fill\" | \"auto-fit\", track: string): string {\n  return `repeat(${count}, ${track})`;\n}\n"],"mappings":"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"}

package/dist/_chunk/layout.jsx

@@ -40,10 +40,14 @@ function Flex(props) {
 		"justifyContent",
 		"inline",
 		"class",
+		"style",
 		"children"
 	]);
 	const flexStyle = () => {
-		const s = { display: local.inline ? "inline-flex" : "flex" };
+		const s = {
+			display: local.inline ? "inline-flex" : "flex",
+			...local.style
+		};
 		if (local.direction) s["flex-direction"] = local.direction;
 		if (local.gap !== void 0) s.gap = resolveGap(local.gap);
 		if (local.wrap) s["flex-wrap"] = local.wrap === true || local.wrap === "wrap" ? "wrap" : local.wrap === "wrap-reverse" ? "wrap-reverse" : "nowrap";

package/dist/_chunk/layout.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"layout.jsx","names":[],"sources":["../../src/layout/Flex.tsx","../../src/layout/Grid.tsx","../../src/layout/css-utils.ts"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\n\nexport interface FlexProps {\n  /** The flex direction. @default 'row' */\n  direction?: \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\";\n  /** The gap between items. Accepts a t-shirt size, a number (spacing scale), or a raw CSS length. @default '0' */\n  gap?: string | number;\n  /** Whether items should wrap. @default false */\n  wrap?: boolean | \"wrap\" | \"nowrap\" | \"wrap-reverse\";\n  /** The alignment of items. */\n  alignItems?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\n  /** The justification of items. */\n  justifyContent?: \"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\";\n  /** Whether the flex container is inline. */\n  inline?: boolean;\n  /** Additional CSS class name. */\n  class?: string;\n  /** The content. */\n  children?: JSX.Element;\n}\n\n// Layout primitives emit inline CSS so the styling ships with the package for\n// installed consumers, rather than relying on Tailwind utility strings the\n// package ships no CSS for.\n\nconst alignMap: Record<string, string> = {\n  start: \"flex-start\",\n  center: \"center\",\n  end: \"flex-end\",\n  stretch: \"stretch\",\n  baseline: \"baseline\",\n};\n\nconst justifyMap: Record<string, string> = {\n  start: \"flex-start\",\n  center: \"center\",\n  end: \"flex-end\",\n  between: \"space-between\",\n  around: \"space-around\",\n  evenly: \"space-evenly\",\n};\n\n// t-shirt gap tokens map to the Spectrum spacing scale; a bare number follows\n// Tailwind's spacing scale (1 unit = 0.25rem); anything else is a raw CSS length.\nconst gapTokens: Record<string, string> = {\n  xs: \"4px\",\n  sm: \"8px\",\n  md: \"16px\",\n  lg: \"24px\",\n  xl: \"32px\",\n};\n\nexport function resolveGap(value: string | number): string {\n  if (typeof value === \"number\") return `${value * 0.25}rem`;\n  if (value in gapTokens) return gapTokens[value];\n  if (/^\\d+(?:\\.\\d+)?$/.test(value)) return `${parseFloat(value) * 0.25}rem`;\n  return value;\n}\n\n/**\n * A flex container layout component.\n */\nexport function Flex(props: FlexProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"direction\",\n    \"gap\",\n    \"wrap\",\n    \"alignItems\",\n    \"justifyContent\",\n    \"inline\",\n    \"class\",\n    \"children\",\n  ]);\n\n  const flexStyle = (): JSX.CSSProperties => {\n    const s: JSX.CSSProperties = {\n      display: local.inline ? \"inline-flex\" : \"flex\",\n    };\n\n    if (local.direction) s[\"flex-direction\"] = local.direction;\n    if (local.gap !== undefined) s.gap = resolveGap(local.gap);\n    if (local.wrap) {\n      s[\"flex-wrap\"] =\n        local.wrap === true || local.wrap === \"wrap\"\n          ? \"wrap\"\n          : local.wrap === \"wrap-reverse\"\n            ? \"wrap-reverse\"\n            : \"nowrap\";\n    }\n    if (local.alignItems) s[\"align-items\"] = alignMap[local.alignItems];\n    if (local.justifyContent) s[\"justify-content\"] = justifyMap[local.justifyContent];\n\n    return s;\n  };\n\n  return (\n    <div {...rest} class={local.class} style={flexStyle()}>\n      {local.children}\n    </div>\n  );\n}\n","import { type JSX, splitProps } from \"solid-js\";\nimport { resolveGap } from \"./Flex\";\n\nexport interface GridProps {\n  /** The number of columns, or a grid-template-columns value. */\n  columns?: number | string;\n  /** The number of rows, or a grid-template-rows value. */\n  rows?: number | string;\n  /** The gap between items. Accepts a t-shirt size, a number (spacing scale), or a raw CSS length. */\n  gap?: string | number;\n  /** The column gap. */\n  columnGap?: string | number;\n  /** The row gap. */\n  rowGap?: string | number;\n  /** Named grid areas (grid-template-areas). */\n  areas?: string[];\n  /** The alignment of items. */\n  alignItems?: \"start\" | \"center\" | \"end\" | \"stretch\";\n  /** The justification of items. */\n  justifyItems?: \"start\" | \"center\" | \"end\" | \"stretch\";\n  /** Whether the grid is inline. */\n  inline?: boolean;\n  /** Additional CSS class name. */\n  class?: string;\n  /** Additional inline styles. */\n  style?: JSX.CSSProperties;\n  /** The content. */\n  children?: JSX.Element;\n}\n\n// Layout primitives emit inline CSS so the styling ships with the package for\n// installed consumers, rather than relying on Tailwind utility strings the\n// package ships no CSS for.\n\n/**\n * A CSS Grid layout component.\n */\nexport function Grid(props: GridProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"columns\",\n    \"rows\",\n    \"gap\",\n    \"columnGap\",\n    \"rowGap\",\n    \"areas\",\n    \"alignItems\",\n    \"justifyItems\",\n    \"inline\",\n    \"class\",\n    \"style\",\n    \"children\",\n  ]);\n\n  const gridStyle = (): JSX.CSSProperties => {\n    const s: JSX.CSSProperties = {\n      display: local.inline ? \"inline-grid\" : \"grid\",\n      ...local.style,\n    };\n\n    if (local.columns !== undefined) {\n      s[\"grid-template-columns\"] =\n        typeof local.columns === \"number\" ? `repeat(${local.columns}, 1fr)` : local.columns;\n    }\n    if (local.rows !== undefined) {\n      s[\"grid-template-rows\"] =\n        typeof local.rows === \"number\" ? `repeat(${local.rows}, 1fr)` : local.rows;\n    }\n    if (local.areas) {\n      s[\"grid-template-areas\"] = local.areas.map((a) => `\"${a}\"`).join(\" \");\n    }\n    if (local.gap !== undefined) s.gap = resolveGap(local.gap);\n    if (local.columnGap !== undefined) s[\"column-gap\"] = resolveGap(local.columnGap);\n    if (local.rowGap !== undefined) s[\"row-gap\"] = resolveGap(local.rowGap);\n    if (local.alignItems) s[\"align-items\"] = local.alignItems;\n    if (local.justifyItems) s[\"justify-items\"] = local.justifyItems;\n\n    return s;\n  };\n\n  return (\n    <div {...rest} class={local.class} style={gridStyle()}>\n      {local.children}\n    </div>\n  );\n}\n","/**\n * Creates a CSS `fit-content()` value.\n * @param value - The max content size (e.g., '200px', '50%')\n */\nexport function fitContent(value: string): string {\n  return `fit-content(${value})`;\n}\n\n/**\n * Creates a CSS `minmax()` value.\n * @param min - The minimum size\n * @param max - The maximum size\n */\nexport function minmax(min: string, max: string): string {\n  return `minmax(${min}, ${max})`;\n}\n\n/**\n * Creates a CSS `repeat()` value.\n * @param count - The repetition count or 'auto-fill' / 'auto-fit'\n * @param track - The track definition\n */\nexport function repeat(count: number | \"auto-fill\" | \"auto-fit\", track: string): string {\n  return `repeat(${count}, ${track})`;\n}\n"],"mappings":";;AAyBA,MAAM,WAAmC;CACvC,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,UAAU;AACZ;AAEA,MAAM,aAAqC;CACzC,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,QAAQ;CACR,QAAQ;AACV;AAIA,MAAM,YAAoC;CACxC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAgB,WAAW,OAAgC;CACzD,IAAI,OAAO,UAAU,UAAU,OAAO,GAAG,QAAQ,IAAK;CACtD,IAAI,SAAS,WAAW,OAAO,UAAU;CACzC,IAAI,kBAAkB,KAAK,KAAK,GAAG,OAAO,GAAG,WAAW,KAAK,IAAI,IAAK;CACtE,OAAO;AACT;;;;AAKA,SAAgB,KAAK,OAA+B;CAClD,MAAM,CAAC,OAAO,QAAQ,WAAW,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,kBAAqC;EACzC,MAAM,IAAuB,EAC3B,SAAS,MAAM,SAAS,gBAAgB,OAC1C;EAEA,IAAI,MAAM,WAAW,EAAE,oBAAoB,MAAM;EACjD,IAAI,MAAM,QAAQ,KAAA,GAAW,EAAE,MAAM,WAAW,MAAM,GAAG;EACzD,IAAI,MAAM,MACR,EAAE,eACA,MAAM,SAAS,QAAQ,MAAM,SAAS,SAClC,SACA,MAAM,SAAS,iBACb,iBACA;EAEV,IAAI,MAAM,YAAY,EAAE,iBAAiB,SAAS,MAAM;EACxD,IAAI,MAAM,gBAAgB,EAAE,qBAAqB,WAAW,MAAM;EAElE,OAAO;CACT;CAEA,OACE,CAAC,QAAQ,MAAM,OAAO,MAAM,OAAO,OAAO,UAAU,GAAG;OACpD,MAAM,SAAS;IAClB,EAAE;AAEN;;;;;;AC/DA,SAAgB,KAAK,OAA+B;CAClD,MAAM,CAAC,OAAO,QAAQ,WAAW,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,kBAAqC;EACzC,MAAM,IAAuB;GAC3B,SAAS,MAAM,SAAS,gBAAgB;GACxC,GAAG,MAAM;EACX;EAEA,IAAI,MAAM,YAAY,KAAA,GACpB,EAAE,2BACA,OAAO,MAAM,YAAY,WAAW,UAAU,MAAM,QAAQ,UAAU,MAAM;EAEhF,IAAI,MAAM,SAAS,KAAA,GACjB,EAAE,wBACA,OAAO,MAAM,SAAS,WAAW,UAAU,MAAM,KAAK,UAAU,MAAM;EAE1E,IAAI,MAAM,OACR,EAAE,yBAAyB,MAAM,MAAM,KAAK,MAAM,IAAI,EAAE,EAAE,EAAE,KAAK,GAAG;EAEtE,IAAI,MAAM,QAAQ,KAAA,GAAW,EAAE,MAAM,WAAW,MAAM,GAAG;EACzD,IAAI,MAAM,cAAc,KAAA,GAAW,EAAE,gBAAgB,WAAW,MAAM,SAAS;EAC/E,IAAI,MAAM,WAAW,KAAA,GAAW,EAAE,aAAa,WAAW,MAAM,MAAM;EACtE,IAAI,MAAM,YAAY,EAAE,iBAAiB,MAAM;EAC/C,IAAI,MAAM,cAAc,EAAE,mBAAmB,MAAM;EAEnD,OAAO;CACT;CAEA,OACE,CAAC,QAAQ,MAAM,OAAO,MAAM,OAAO,OAAO,UAAU,GAAG;OACpD,MAAM,SAAS;IAClB,EAAE;AAEN;;;;;;;AChFA,SAAgB,WAAW,OAAuB;CAChD,OAAO,eAAe,MAAM;AAC9B;;;;;;AAOA,SAAgB,OAAO,KAAa,KAAqB;CACvD,OAAO,UAAU,IAAI,IAAI,IAAI;AAC/B;;;;;;AAOA,SAAgB,OAAO,OAA0C,OAAuB;CACtF,OAAO,UAAU,MAAM,IAAI,MAAM;AACnC"}
+{"version":3,"file":"layout.jsx","names":[],"sources":["../../src/layout/Flex.tsx","../../src/layout/Grid.tsx","../../src/layout/css-utils.ts"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\n\nexport interface FlexProps {\n  /** The flex direction. @default 'row' */\n  direction?: \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\";\n  /** The gap between items. Accepts a t-shirt size, a number (spacing scale), or a raw CSS length. @default '0' */\n  gap?: string | number;\n  /** Whether items should wrap. @default false */\n  wrap?: boolean | \"wrap\" | \"nowrap\" | \"wrap-reverse\";\n  /** The alignment of items. */\n  alignItems?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\n  /** The justification of items. */\n  justifyContent?: \"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\";\n  /** Whether the flex container is inline. */\n  inline?: boolean;\n  /** Additional CSS class name. */\n  class?: string;\n  /** Additional inline styles. */\n  style?: JSX.CSSProperties;\n  /** The content. */\n  children?: JSX.Element;\n}\n\n// Layout primitives emit inline CSS so the styling ships with the package for\n// installed consumers, rather than relying on Tailwind utility strings the\n// package ships no CSS for.\n\nconst alignMap: Record<string, string> = {\n  start: \"flex-start\",\n  center: \"center\",\n  end: \"flex-end\",\n  stretch: \"stretch\",\n  baseline: \"baseline\",\n};\n\nconst justifyMap: Record<string, string> = {\n  start: \"flex-start\",\n  center: \"center\",\n  end: \"flex-end\",\n  between: \"space-between\",\n  around: \"space-around\",\n  evenly: \"space-evenly\",\n};\n\n// t-shirt gap tokens map to the Spectrum spacing scale; a bare number follows\n// Tailwind's spacing scale (1 unit = 0.25rem); anything else is a raw CSS length.\nconst gapTokens: Record<string, string> = {\n  xs: \"4px\",\n  sm: \"8px\",\n  md: \"16px\",\n  lg: \"24px\",\n  xl: \"32px\",\n};\n\nexport function resolveGap(value: string | number): string {\n  if (typeof value === \"number\") return `${value * 0.25}rem`;\n  if (value in gapTokens) return gapTokens[value];\n  if (/^\\d+(?:\\.\\d+)?$/.test(value)) return `${parseFloat(value) * 0.25}rem`;\n  return value;\n}\n\n/**\n * A flex container layout component.\n */\nexport function Flex(props: FlexProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"direction\",\n    \"gap\",\n    \"wrap\",\n    \"alignItems\",\n    \"justifyContent\",\n    \"inline\",\n    \"class\",\n    \"style\",\n    \"children\",\n  ]);\n\n  // `style` is merged rather than left in `rest`, where the assignment below would have\n  // silently dropped it. Grid already accepted one; the two primitives are meant to be\n  // interchangeable, and without it every decorated row has to fall back to a bare div.\n  const flexStyle = (): JSX.CSSProperties => {\n    const s: JSX.CSSProperties = {\n      display: local.inline ? \"inline-flex\" : \"flex\",\n      ...local.style,\n    };\n\n    if (local.direction) s[\"flex-direction\"] = local.direction;\n    if (local.gap !== undefined) s.gap = resolveGap(local.gap);\n    if (local.wrap) {\n      s[\"flex-wrap\"] =\n        local.wrap === true || local.wrap === \"wrap\"\n          ? \"wrap\"\n          : local.wrap === \"wrap-reverse\"\n            ? \"wrap-reverse\"\n            : \"nowrap\";\n    }\n    if (local.alignItems) s[\"align-items\"] = alignMap[local.alignItems];\n    if (local.justifyContent) s[\"justify-content\"] = justifyMap[local.justifyContent];\n\n    return s;\n  };\n\n  return (\n    <div {...rest} class={local.class} style={flexStyle()}>\n      {local.children}\n    </div>\n  );\n}\n","import { type JSX, splitProps } from \"solid-js\";\nimport { resolveGap } from \"./Flex\";\n\nexport interface GridProps {\n  /** The number of columns, or a grid-template-columns value. */\n  columns?: number | string;\n  /** The number of rows, or a grid-template-rows value. */\n  rows?: number | string;\n  /** The gap between items. Accepts a t-shirt size, a number (spacing scale), or a raw CSS length. */\n  gap?: string | number;\n  /** The column gap. */\n  columnGap?: string | number;\n  /** The row gap. */\n  rowGap?: string | number;\n  /** Named grid areas (grid-template-areas). */\n  areas?: string[];\n  /** The alignment of items. */\n  alignItems?: \"start\" | \"center\" | \"end\" | \"stretch\";\n  /** The justification of items. */\n  justifyItems?: \"start\" | \"center\" | \"end\" | \"stretch\";\n  /** Whether the grid is inline. */\n  inline?: boolean;\n  /** Additional CSS class name. */\n  class?: string;\n  /** Additional inline styles. */\n  style?: JSX.CSSProperties;\n  /** The content. */\n  children?: JSX.Element;\n}\n\n// Layout primitives emit inline CSS so the styling ships with the package for\n// installed consumers, rather than relying on Tailwind utility strings the\n// package ships no CSS for.\n\n/**\n * A CSS Grid layout component.\n */\nexport function Grid(props: GridProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"columns\",\n    \"rows\",\n    \"gap\",\n    \"columnGap\",\n    \"rowGap\",\n    \"areas\",\n    \"alignItems\",\n    \"justifyItems\",\n    \"inline\",\n    \"class\",\n    \"style\",\n    \"children\",\n  ]);\n\n  const gridStyle = (): JSX.CSSProperties => {\n    const s: JSX.CSSProperties = {\n      display: local.inline ? \"inline-grid\" : \"grid\",\n      ...local.style,\n    };\n\n    if (local.columns !== undefined) {\n      s[\"grid-template-columns\"] =\n        typeof local.columns === \"number\" ? `repeat(${local.columns}, 1fr)` : local.columns;\n    }\n    if (local.rows !== undefined) {\n      s[\"grid-template-rows\"] =\n        typeof local.rows === \"number\" ? `repeat(${local.rows}, 1fr)` : local.rows;\n    }\n    if (local.areas) {\n      s[\"grid-template-areas\"] = local.areas.map((a) => `\"${a}\"`).join(\" \");\n    }\n    if (local.gap !== undefined) s.gap = resolveGap(local.gap);\n    if (local.columnGap !== undefined) s[\"column-gap\"] = resolveGap(local.columnGap);\n    if (local.rowGap !== undefined) s[\"row-gap\"] = resolveGap(local.rowGap);\n    if (local.alignItems) s[\"align-items\"] = local.alignItems;\n    if (local.justifyItems) s[\"justify-items\"] = local.justifyItems;\n\n    return s;\n  };\n\n  return (\n    <div {...rest} class={local.class} style={gridStyle()}>\n      {local.children}\n    </div>\n  );\n}\n","/**\n * Creates a CSS `fit-content()` value.\n * @param value - The max content size (e.g., '200px', '50%')\n */\nexport function fitContent(value: string): string {\n  return `fit-content(${value})`;\n}\n\n/**\n * Creates a CSS `minmax()` value.\n * @param min - The minimum size\n * @param max - The maximum size\n */\nexport function minmax(min: string, max: string): string {\n  return `minmax(${min}, ${max})`;\n}\n\n/**\n * Creates a CSS `repeat()` value.\n * @param count - The repetition count or 'auto-fill' / 'auto-fit'\n * @param track - The track definition\n */\nexport function repeat(count: number | \"auto-fill\" | \"auto-fit\", track: string): string {\n  return `repeat(${count}, ${track})`;\n}\n"],"mappings":";;AA2BA,MAAM,WAAmC;CACvC,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,UAAU;AACZ;AAEA,MAAM,aAAqC;CACzC,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,QAAQ;CACR,QAAQ;AACV;AAIA,MAAM,YAAoC;CACxC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAgB,WAAW,OAAgC;CACzD,IAAI,OAAO,UAAU,UAAU,OAAO,GAAG,QAAQ,IAAK;CACtD,IAAI,SAAS,WAAW,OAAO,UAAU;CACzC,IAAI,kBAAkB,KAAK,KAAK,GAAG,OAAO,GAAG,WAAW,KAAK,IAAI,IAAK;CACtE,OAAO;AACT;;;;AAKA,SAAgB,KAAK,OAA+B;CAClD,MAAM,CAAC,OAAO,QAAQ,WAAW,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAKD,MAAM,kBAAqC;EACzC,MAAM,IAAuB;GAC3B,SAAS,MAAM,SAAS,gBAAgB;GACxC,GAAG,MAAM;EACX;EAEA,IAAI,MAAM,WAAW,EAAE,oBAAoB,MAAM;EACjD,IAAI,MAAM,QAAQ,KAAA,GAAW,EAAE,MAAM,WAAW,MAAM,GAAG;EACzD,IAAI,MAAM,MACR,EAAE,eACA,MAAM,SAAS,QAAQ,MAAM,SAAS,SAClC,SACA,MAAM,SAAS,iBACb,iBACA;EAEV,IAAI,MAAM,YAAY,EAAE,iBAAiB,SAAS,MAAM;EACxD,IAAI,MAAM,gBAAgB,EAAE,qBAAqB,WAAW,MAAM;EAElE,OAAO;CACT;CAEA,OACE,CAAC,QAAQ,MAAM,OAAO,MAAM,OAAO,OAAO,UAAU,GAAG;OACpD,MAAM,SAAS;IAClB,EAAE;AAEN;;;;;;ACtEA,SAAgB,KAAK,OAA+B;CAClD,MAAM,CAAC,OAAO,QAAQ,WAAW,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,kBAAqC;EACzC,MAAM,IAAuB;GAC3B,SAAS,MAAM,SAAS,gBAAgB;GACxC,GAAG,MAAM;EACX;EAEA,IAAI,MAAM,YAAY,KAAA,GACpB,EAAE,2BACA,OAAO,MAAM,YAAY,WAAW,UAAU,MAAM,QAAQ,UAAU,MAAM;EAEhF,IAAI,MAAM,SAAS,KAAA,GACjB,EAAE,wBACA,OAAO,MAAM,SAAS,WAAW,UAAU,MAAM,KAAK,UAAU,MAAM;EAE1E,IAAI,MAAM,OACR,EAAE,yBAAyB,MAAM,MAAM,KAAK,MAAM,IAAI,EAAE,EAAE,EAAE,KAAK,GAAG;EAEtE,IAAI,MAAM,QAAQ,KAAA,GAAW,EAAE,MAAM,WAAW,MAAM,GAAG;EACzD,IAAI,MAAM,cAAc,KAAA,GAAW,EAAE,gBAAgB,WAAW,MAAM,SAAS;EAC/E,IAAI,MAAM,WAAW,KAAA,GAAW,EAAE,aAAa,WAAW,MAAM,MAAM;EACtE,IAAI,MAAM,YAAY,EAAE,iBAAiB,MAAM;EAC/C,IAAI,MAAM,cAAc,EAAE,mBAAmB,MAAM;EAEnD,OAAO;CACT;CAEA,OACE,CAAC,QAAQ,MAAM,OAAO,MAAM,OAAO,OAAO,UAAU,GAAG;OACpD,MAAM,SAAS;IAClB,EAAE;AAEN;;;;;;;AChFA,SAAgB,WAAW,OAAuB;CAChD,OAAO,eAAe,MAAM;AAC9B;;;;;;AAOA,SAAgB,OAAO,KAAa,KAAqB;CACvD,OAAO,UAAU,IAAI,IAAI,IAAI;AAC/B;;;;;;AAOA,SAAgB,OAAO,OAA0C,OAAuB;CACtF,OAAO,UAAU,MAAM,IAAI,MAAM;AACnC"}

package/dist/_chunk/list.js

@@ -187,7 +187,7 @@ const legacyDescription = function anonymous(props) {
 	if (props.isPressed) rules += " pQKeKoe151";
 	else if (props.isFocusVisible) rules += " pQKeKoe151";
 	else if (props.isHovered) rules += " pQKeKoe151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " Js151";
 	return rules;
 };
@@ -209,7 +209,7 @@ const listViewItem = function anonymous(props) {
 	else if (props.isPressed) rules += " pQKeKoe151";
 	else if (props.isFocusVisible) rules += " pQKeKoe151";
 	else if (props.isHovered) rules += " pQKeKoe151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	if (props.isDisabled) rules += " plc151";
 	else if (props.isSelected) {
 		if (props.selectionStyle === "highlight") rules += " ple151";
@@ -512,7 +512,7 @@ const listViewDescription = function anonymous(props) {
 	else if (props.isPressed) rules += " pQKeKoe151";
 	else if (props.isFocusVisible) rules += " pQKeKoe151";
 	else if (props.isHovered) rules += " pQKeKoe151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " _Nc151";
 	rules += " Pc151";
 	if (props.overflowMode === "truncate") rules += " _Yb151";
@@ -538,7 +538,7 @@ const listViewTrailingIcon = function anonymous(props) {
 	rules += " It151";
 	rules += " Isu151";
 	if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " -_8sjo0b-t5ZbAob151";
 	return rules;
 };

package/dist/_chunk/list.jsx

@@ -181,7 +181,7 @@ const legacyDescription = function anonymous(props) {
 	if (props.isPressed) rules += " pQKeKoe151";
 	else if (props.isFocusVisible) rules += " pQKeKoe151";
 	else if (props.isHovered) rules += " pQKeKoe151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " Js151";
 	return rules;
 };
@@ -205,7 +205,7 @@ const listViewItem = function anonymous(props) {
 	else if (props.isPressed) rules += " pQKeKoe151";
 	else if (props.isFocusVisible) rules += " pQKeKoe151";
 	else if (props.isHovered) rules += " pQKeKoe151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	if (props.isDisabled) rules += " plc151";
 	else if (props.isSelected) {
 		if (props.selectionStyle === "highlight") rules += " ple151";
@@ -508,7 +508,7 @@ const listViewDescription = function anonymous(props) {
 	else if (props.isPressed) rules += " pQKeKoe151";
 	else if (props.isFocusVisible) rules += " pQKeKoe151";
 	else if (props.isHovered) rules += " pQKeKoe151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " _Nc151";
 	rules += " Pc151";
 	if (props.overflowMode === "truncate") rules += " _Yb151";
@@ -534,7 +534,7 @@ const listViewTrailingIcon = function anonymous(props) {
 	rules += " It151";
 	rules += " Isu151";
 	if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " -_8sjo0b-t5ZbAob151";
 	return rules;
 };

package/dist/_chunk/menu.js

@@ -272,7 +272,7 @@ const menuButtonStyles = function anonymous(props) {
 	else rules += " g9ORGnd151";
 	else if (props.variant === "primary") if (props.isPressed) rules += " g8KaFke151";
 	else if (props.isHovered) rules += " g8KaFke151";
-	else rules += " gdeCgNc151";
+	else rules += " gnhAeB151";
 	if (props.isDisabled) rules += " iA151";
 	else if (props.variant === "quiet") rules += " iA151";
 	else if (props.variant === "secondary") if (props.isHovered) rules += " iUvnvv151";