@salt-ds/core 1.31.0 → 1.32.0

package/dist-cjs/flex-layout/FlexLayout.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var clsx = require('clsx');
+var React = require('react');
 var makePrefixer = require('../utils/makePrefixer.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
@@ -26,10 +26,10 @@ require('../button/Button.js');
 require('../card/Card.js');
 require('../checkbox/Checkbox.js');
 require('../checkbox/CheckboxGroup.js');
+require('@salt-ds/icons');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 require('../salt-provider/SaltProvider.js');
-require('@salt-ds/icons');
 require('../combo-box/ComboBox.js');
 require('../dialog/Dialog.js');
 require('../dialog/DialogHeader.js');
@@ -47,6 +47,7 @@ require('../file-drop-zone/FileDropZoneTrigger.js');
 require('../flex-item/FlexItem.js');
 require('../flow-layout/FlowLayout.js');
 require('../form-field/FormField.js');
+require('../form-field-context/FormFieldContext.js');
 require('../status-indicator/StatusIndicator.js');
 require('../text/Text.js');
 require('../text/Code.js');
@@ -55,7 +56,6 @@ require('../text/Headings.js');
 require('../text/Label.js');
 require('../text/TextAction.js');
 require('../text/TextNotation.js');
-require('../form-field-context/FormFieldContext.js');
 require('../grid-item/GridItem.js');
 require('../grid-layout/GridLayout.js');
 require('../input/Input.js');
@@ -66,12 +66,12 @@ require('../link/Link.js');
 require('../link-card/LinkCard.js');
 require('../list-box/ListBox.js');
 require('../list-control/ListControlContext.js');
-require('../menu/MenuContext.js');
 require('@floating-ui/react');
+require('../menu/MenuContext.js');
 require('../menu/MenuItem.js');
 require('../menu/MenuPanel.js');
-require('../menu/MenuTriggerContext.js');
 require('../menu/MenuPanelContext.js');
+require('../menu/MenuTriggerContext.js');
 require('../menu/MenuGroup.js');
 require('../multiline-input/MultilineInput.js');
 require('../navigation-item/NavigationItem.js');

package/dist-cjs/flex-layout/FlexLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexLayout.js","sources":["../src/flex-layout/FlexLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n  makePrefixer,\n  ResponsiveProp,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n  resolveResponsiveValue,\n} from \"../utils\";\n\nimport flexLayoutCss from \"./FlexLayout.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useBreakpoint } from \"../breakpoints\";\n\nconst withBaseName = makePrefixer(\"saltFlexLayout\");\n\nexport type LayoutSeparator = \"start\" | \"center\" | \"end\";\nexport type LayoutDirection = \"row\" | \"column\";\n\nexport const FLEX_ALIGNMENT_BASE = [\"start\", \"end\", \"center\"] as const;\nexport const FLEX_CONTENT_ALIGNMENT_BASE = [\n  ...FLEX_ALIGNMENT_BASE,\n  \"space-between\",\n  \"space-around\",\n  \"space-evenly\",\n] as const;\n\nexport type FlexAlignment = (typeof FLEX_ALIGNMENT_BASE)[number];\nexport type FlexContentAlignment = (typeof FLEX_CONTENT_ALIGNMENT_BASE)[number];\n\nexport type FlexLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n       */\n      align?: FlexAlignment | \"stretch\" | \"baseline\";\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n       */\n      direction?: ResponsiveProp<LayoutDirection>;\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: ResponsiveProp<number | string>;\n      /**\n       * Defines the alignment along the main axis, default is \"start\".\n       */\n      justify?: FlexContentAlignment;\n      /**\n       * **Deprecated:** For separators see `StackLayout` component instead.\n       *\n       * Adds a separator between elements if wrap is not active, default is false.\n       */\n      separators?: LayoutSeparator | true;\n      /**\n       * Allow the items to wrap as needed, default is false.\n       */\n      wrap?: ResponsiveProp<boolean>;\n    }\n  >;\n\ntype FlexLayoutComponent = <T extends ElementType = \"div\">(\n  props: FlexLayoutProps<T>\n) => ReactElement | null;\n\nfunction parseAlignment(style: string | undefined) {\n  return style === \"start\" || style === \"end\" ? `flex-${style}` : style;\n}\n\nfunction parseSpacing(value: number | string | undefined) {\n  if (value === undefined || typeof value === \"string\") {\n    return value;\n  }\n\n  return `calc(var(--salt-spacing-100) * ${value})`;\n}\n\nexport const FlexLayout: FlexLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      align,\n      children,\n      className,\n      direction = \"row\",\n      gap = 3,\n      justify,\n      separators,\n      style,\n      wrap = false,\n      ...rest\n    }: FlexLayoutProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-flex-layout\",\n      css: flexLayoutCss,\n      window: targetWindow,\n    });\n\n    const Component = as || \"div\";\n    const separatorAlignment = separators === true ? \"center\" : separators;\n\n    const { matchedBreakpoints } = useBreakpoint();\n    const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);\n    const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints);\n    const flexWrap = resolveResponsiveValue(wrap, matchedBreakpoints);\n    const flexLayoutStyles = {\n      ...style,\n      \"--flexLayout-align\": parseAlignment(align),\n      \"--flexLayout-direction\": flexDirection,\n      \"--flexLayout-gap\": parseSpacing(flexGap),\n      \"--flexLayout-justify\": parseAlignment(justify),\n      \"--flexLayout-wrap\": flexWrap ? \"wrap\" : \"nowrap\",\n    };\n\n    return (\n      <Component\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"separator\")]: separatorAlignment && !wrap,\n            [withBaseName(\n              `separator-${flexDirection ?? \"row\"}-${\n                separatorAlignment ?? \"center\"\n              }`\n            )]: separatorAlignment && !wrap,\n            [withBaseName(`separator-${flexDirection ?? \"row\"}`)]:\n              separatorAlignment && !wrap,\n          },\n          className\n        )}\n        ref={ref}\n        style={flexLayoutStyles}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","flexLayoutCss","useBreakpoint","resolveResponsiveValue","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA,CAAA;AAK3C,MAAM,mBAAsB,GAAA,CAAC,OAAS,EAAA,KAAA,EAAO,QAAQ,EAAA;AACrD,MAAM,2BAA8B,GAAA;AAAA,EACzC,GAAG,mBAAA;AAAA,EACH,eAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AACF,EAAA;AA0CA,SAAS,eAAe,KAA2B,EAAA;AACjD,EAAA,OAAO,KAAU,KAAA,OAAA,IAAW,KAAU,KAAA,KAAA,GAAQ,QAAQ,KAAU,CAAA,CAAA,GAAA,KAAA,CAAA;AAClE,CAAA;AAEA,SAAS,aAAa,KAAoC,EAAA;AACxD,EAAA,IAAI,KAAU,KAAA,KAAA,CAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAA,OAAO,CAAkC,+BAAA,EAAA,KAAA,CAAA,CAAA,CAAA,CAAA;AAC3C,CAAA;AAEO,MAAM,UAAkC,GAAAC,gBAAA;AAAA,EAC7C,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,GAAM,GAAA,CAAA;AAAA,IACN,OAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAO,GAAA,KAAA;AAAA,IACJ,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA,CAAA;AAE5D,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAIC,gCAAc,EAAA,CAAA;AAC7C,IAAM,MAAA,OAAA,GAAUC,wCAAuB,CAAA,GAAA,EAAK,kBAAkB,CAAA,CAAA;AAC9D,IAAM,MAAA,aAAA,GAAgBA,wCAAuB,CAAA,SAAA,EAAW,kBAAkB,CAAA,CAAA;AAC1E,IAAM,MAAA,QAAA,GAAWA,wCAAuB,CAAA,IAAA,EAAM,kBAAkB,CAAA,CAAA;AAChE,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,KAAA;AAAA,MACH,oBAAA,EAAsB,eAAe,KAAK,CAAA;AAAA,MAC1C,wBAA0B,EAAA,aAAA;AAAA,MAC1B,kBAAA,EAAoB,aAAa,OAAO,CAAA;AAAA,MACxC,sBAAA,EAAwB,eAAe,OAAO,CAAA;AAAA,MAC9C,mBAAA,EAAqB,WAAW,MAAS,GAAA,QAAA;AAAA,KAC3C,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAA,GAAI,sBAAsB,CAAC,IAAA;AAAA,UACpD,CAAC,YAAA;AAAA,YACC,CAAA,UAAA,EAAa,aAAiB,IAAA,IAAA,GAAA,aAAA,GAAA,KAAA,CAAA,CAAA,EAC5B,kBAAsB,IAAA,IAAA,GAAA,kBAAA,GAAA,QAAA,CAAA,CAAA;AAAA,WAE1B,GAAI,sBAAsB,CAAC,IAAA;AAAA,UAC3B,CAAC,YAAa,CAAA,CAAA,UAAA,EAAa,wCAAiB,KAAO,CAAA,CAAA,CAAA,GACjD,sBAAsB,CAAC,IAAA;AAAA,SAC3B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,KAAO,EAAA,gBAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;;"}
+{"version":3,"file":"FlexLayout.js","sources":["../src/flex-layout/FlexLayout.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type ElementType, type ReactElement, forwardRef } from \"react\";\n\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  type ResponsiveProp,\n  makePrefixer,\n  resolveResponsiveValue,\n} from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport flexLayoutCss from \"./FlexLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltFlexLayout\");\n\nexport type LayoutSeparator = \"start\" | \"center\" | \"end\";\nexport type LayoutDirection = \"row\" | \"column\";\n\nexport const FLEX_ALIGNMENT_BASE = [\"start\", \"end\", \"center\"] as const;\nexport const FLEX_CONTENT_ALIGNMENT_BASE = [\n  ...FLEX_ALIGNMENT_BASE,\n  \"space-between\",\n  \"space-around\",\n  \"space-evenly\",\n] as const;\n\nexport type FlexAlignment = (typeof FLEX_ALIGNMENT_BASE)[number];\nexport type FlexContentAlignment = (typeof FLEX_CONTENT_ALIGNMENT_BASE)[number];\n\nexport type FlexLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n       */\n      align?: FlexAlignment | \"stretch\" | \"baseline\";\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n       */\n      direction?: ResponsiveProp<LayoutDirection>;\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: ResponsiveProp<number | string>;\n      /**\n       * Defines the alignment along the main axis, default is \"start\".\n       */\n      justify?: FlexContentAlignment;\n      /**\n       * **Deprecated:** For separators see `StackLayout` component instead.\n       *\n       * Adds a separator between elements if wrap is not active, default is false.\n       */\n      separators?: LayoutSeparator | true;\n      /**\n       * Allow the items to wrap as needed, default is false.\n       */\n      wrap?: ResponsiveProp<boolean>;\n    }\n  >;\n\ntype FlexLayoutComponent = <T extends ElementType = \"div\">(\n  props: FlexLayoutProps<T>,\n) => ReactElement | null;\n\nfunction parseAlignment(style: string | undefined) {\n  return style === \"start\" || style === \"end\" ? `flex-${style}` : style;\n}\n\nfunction parseSpacing(value: number | string | undefined) {\n  if (value === undefined || typeof value === \"string\") {\n    return value;\n  }\n\n  return `calc(var(--salt-spacing-100) * ${value})`;\n}\n\nexport const FlexLayout: FlexLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      align,\n      children,\n      className,\n      direction = \"row\",\n      gap = 3,\n      justify,\n      separators,\n      style,\n      wrap = false,\n      ...rest\n    }: FlexLayoutProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-flex-layout\",\n      css: flexLayoutCss,\n      window: targetWindow,\n    });\n\n    const Component = as || \"div\";\n    const separatorAlignment = separators === true ? \"center\" : separators;\n\n    const { matchedBreakpoints } = useBreakpoint();\n    const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);\n    const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints);\n    const flexWrap = resolveResponsiveValue(wrap, matchedBreakpoints);\n    const flexLayoutStyles = {\n      ...style,\n      \"--flexLayout-align\": parseAlignment(align),\n      \"--flexLayout-direction\": flexDirection,\n      \"--flexLayout-gap\": parseSpacing(flexGap),\n      \"--flexLayout-justify\": parseAlignment(justify),\n      \"--flexLayout-wrap\": flexWrap ? \"wrap\" : \"nowrap\",\n    };\n\n    return (\n      <Component\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"separator\")]: separatorAlignment && !wrap,\n            [withBaseName(\n              `separator-${flexDirection ?? \"row\"}-${\n                separatorAlignment ?? \"center\"\n              }`,\n            )]: separatorAlignment && !wrap,\n            [withBaseName(`separator-${flexDirection ?? \"row\"}`)]:\n              separatorAlignment && !wrap,\n          },\n          className,\n        )}\n        ref={ref}\n        style={flexLayoutStyles}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","flexLayoutCss","useBreakpoint","resolveResponsiveValue","jsx","clsx"],"mappings":"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"}

package/dist-cjs/flow-layout/FlowLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlowLayout.js","sources":["../src/flow-layout/FlowLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef, ReactElement } from \"react\";\nimport { FlexLayout, FlexLayoutProps } from \"../flex-layout\";\nimport { PolymorphicComponentPropWithRef, PolymorphicRef } from \"../utils\";\n\nexport type FlowLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Defines the alignment along the main axis, default is \"start\"\n       */\n      justify?: FlexLayoutProps<ElementType>[\"justify\"];\n    }\n  >;\n\ntype FlowLayoutComponent = <T extends ElementType = \"div\">(\n  props: FlowLayoutProps<T>\n) => ReactElement | null;\n\nexport const FlowLayout: FlowLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    { children, ...rest }: FlowLayoutProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    return (\n      <FlexLayout direction=\"row\" ref={ref} wrap {...rest}>\n        {children}\n      </FlexLayout>\n    );\n  }\n);\n"],"names":["forwardRef","jsx","FlexLayout"],"mappings":";;;;;;;;AA2BO,MAAM,UAAkC,GAAAA,gBAAA;AAAA,EAC7C,CACE,EAAE,QAAa,EAAA,GAAA,IAAA,IACf,GACG,KAAA;AACH,IAAA,uBACGC,cAAA,CAAAC,qBAAA,EAAA;AAAA,MAAW,SAAU,EAAA,KAAA;AAAA,MAAM,GAAA;AAAA,MAAU,IAAI,EAAA,IAAA;AAAA,MAAE,GAAG,IAAA;AAAA,MAC5C,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"FlowLayout.js","sources":["../src/flow-layout/FlowLayout.tsx"],"sourcesContent":["import { type ElementType, type ReactElement, forwardRef } from \"react\";\nimport { FlexLayout, type FlexLayoutProps } from \"../flex-layout\";\nimport type { PolymorphicComponentPropWithRef, PolymorphicRef } from \"../utils\";\n\nexport type FlowLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Defines the alignment along the main axis, default is \"start\"\n       */\n      justify?: FlexLayoutProps<ElementType>[\"justify\"];\n    }\n  >;\n\ntype FlowLayoutComponent = <T extends ElementType = \"div\">(\n  props: FlowLayoutProps<T>,\n) => ReactElement | null;\n\nexport const FlowLayout: FlowLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    { children, ...rest }: FlowLayoutProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    return (\n      <FlexLayout direction=\"row\" ref={ref} wrap {...rest}>\n        {children}\n      </FlexLayout>\n    );\n  },\n);\n"],"names":["forwardRef","jsx","FlexLayout"],"mappings":";;;;;;;;AA2BO,MAAM,UAAkC,GAAAA,gBAAA;AAAA,EAC7C,CACE,EAAE,QAAa,EAAA,GAAA,IAAA,IACf,GACG,KAAA;AACH,IAAA,uBACGC,cAAA,CAAAC,qBAAA,EAAA;AAAA,MAAW,SAAU,EAAA,KAAA;AAAA,MAAM,GAAA;AAAA,MAAU,IAAI,EAAA,IAAA;AAAA,MAAE,GAAG,IAAA;AAAA,MAC5C,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/form-field/FormField.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var React = require('react');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var React = require('react');
 var FormFieldContext = require('../form-field-context/FormFieldContext.js');
 var capitalize = require('../utils/capitalize.js');
 var makePrefixer = require('../utils/makePrefixer.js');
@@ -67,12 +67,12 @@ require('../link/Link.js');
 require('../link-card/LinkCard.js');
 require('../list-box/ListBox.js');
 require('../list-control/ListControlContext.js');
-require('../menu/MenuContext.js');
 require('@floating-ui/react');
+require('../menu/MenuContext.js');
 require('../menu/MenuItem.js');
 require('../menu/MenuPanel.js');
-require('../menu/MenuTriggerContext.js');
 require('../menu/MenuPanelContext.js');
+require('../menu/MenuTriggerContext.js');
 require('../menu/MenuGroup.js');
 require('../multiline-input/MultilineInput.js');
 require('../navigation-item/NavigationItem.js');

package/dist-cjs/form-field/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { A11yValueProps, FormFieldContext } from \"../form-field-context\";\nimport { makePrefixer, useId, capitalize } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * Disabled prop\n   */\n  disabled?: boolean;\n  /**\n   * Location of the label, values: 'top' (default) or 'left'\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * Readonly prop\n   */\n  readOnly?: boolean;\n  /**\n   * Optional id prop\n   *\n   * Used as suffix of FormFieldLabel id: `label-{id}`\n   * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n   */\n  id?: string;\n  /**\n   * Displays necessity on label\n   */\n  necessity?: \"required\" | \"optional\" | \"asterisk\";\n  /**\n   * Validation status\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      id: idProp,\n      labelPlacement = \"top\",\n      necessity,\n      readOnly = false,\n      validationStatus,\n      ...restProps\n    },\n    ref\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-form-field\",\n      css: formFieldCss,\n      window: targetWindow,\n    });\n\n    const formId = useId(idProp);\n\n    const labelId = formId ? `label-${formId}` : undefined;\n    const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(`label${capitalize(labelPlacement)}`)]:\n              labelPlacement,\n          },\n          className\n        )}\n        {...restProps}\n      >\n        <FormFieldContext.Provider\n          value={{\n            a11yProps: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": helperTextId,\n            },\n            disabled,\n            necessity,\n            readOnly,\n            validationStatus,\n          }}\n        >\n          {children}\n        </FormFieldContext.Provider>\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","formFieldCss","useId","jsx","clsx","capitalize","FormFieldContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,EAAI,EAAA,MAAA;AAAA,IACJ,cAAiB,GAAA,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,gBAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAASC,YAAM,MAAM,CAAA,CAAA;AAE3B,IAAM,MAAA,OAAA,GAAU,MAAS,GAAA,CAAA,MAAA,EAAS,MAAW,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAC7C,IAAM,MAAA,YAAA,GAAe,MAAS,GAAA,CAAA,WAAA,EAAc,MAAW,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAEvD,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,CAAA,KAAA,EAAQC,qBAAW,CAAA,cAAc,GAAG,CAChD,GAAA,cAAA;AAAA,SACJ;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,kBAAAF,cAAA,CAACG,kCAAiB,QAAjB,EAAA;AAAA,QACC,KAAO,EAAA;AAAA,UACL,SAAW,EAAA;AAAA,YACT,iBAAmB,EAAA,OAAA;AAAA,YACnB,kBAAoB,EAAA,YAAA;AAAA,WACtB;AAAA,UACA,QAAA;AAAA,UACA,SAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,SACF;AAAA,QAEC,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { ForwardedRef, type HTMLAttributes, forwardRef } from \"react\";\nimport { type A11yValueProps, FormFieldContext } from \"../form-field-context\";\nimport { capitalize, makePrefixer, useId } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * Disabled prop\n   */\n  disabled?: boolean;\n  /**\n   * Location of the label, values: 'top' (default) or 'left'\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * Readonly prop\n   */\n  readOnly?: boolean;\n  /**\n   * Optional id prop\n   *\n   * Used as suffix of FormFieldLabel id: `label-{id}`\n   * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n   */\n  id?: string;\n  /**\n   * Displays necessity on label\n   */\n  necessity?: \"required\" | \"optional\" | \"asterisk\";\n  /**\n   * Validation status\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      id: idProp,\n      labelPlacement = \"top\",\n      necessity,\n      readOnly = false,\n      validationStatus,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-form-field\",\n      css: formFieldCss,\n      window: targetWindow,\n    });\n\n    const formId = useId(idProp);\n\n    const labelId = formId ? `label-${formId}` : undefined;\n    const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(`label${capitalize(labelPlacement)}`)]:\n              labelPlacement,\n          },\n          className,\n        )}\n        {...restProps}\n      >\n        <FormFieldContext.Provider\n          value={{\n            a11yProps: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": helperTextId,\n            },\n            disabled,\n            necessity,\n            readOnly,\n            validationStatus,\n          }}\n        >\n          {children}\n        </FormFieldContext.Provider>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","formFieldCss","useId","jsx","clsx","capitalize","FormFieldContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,EAAI,EAAA,MAAA;AAAA,IACJ,cAAiB,GAAA,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,gBAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAASC,YAAM,MAAM,CAAA,CAAA;AAE3B,IAAM,MAAA,OAAA,GAAU,MAAS,GAAA,CAAA,MAAA,EAAS,MAAW,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAC7C,IAAM,MAAA,YAAA,GAAe,MAAS,GAAA,CAAA,WAAA,EAAc,MAAW,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAEvD,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,CAAA,KAAA,EAAQC,qBAAW,CAAA,cAAc,GAAG,CAChD,GAAA,cAAA;AAAA,SACJ;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,kBAAAF,cAAA,CAACG,kCAAiB,QAAjB,EAAA;AAAA,QACC,KAAO,EAAA;AAAA,UACL,SAAW,EAAA;AAAA,YACT,iBAAmB,EAAA,OAAA;AAAA,YACnB,kBAAoB,EAAA,YAAA;AAAA,WACtB;AAAA,UACA,QAAA;AAAA,UACA,SAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,SACF;AAAA,QAEC,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/form-field/FormFieldHelperText.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
+require('../form-field-context/FormFieldContext.js');
+var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
 var StatusIndicator = require('../status-indicator/StatusIndicator.js');
 var Text = require('../text/Text.js');
 require('../text/Code.js');
@@ -35,9 +37,9 @@ require('../button/Button.js');
 require('../card/Card.js');
 require('../checkbox/Checkbox.js');
 require('../checkbox/CheckboxGroup.js');
+require('@salt-ds/icons');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
-require('@salt-ds/icons');
 require('../combo-box/ComboBox.js');
 require('../dialog/Dialog.js');
 require('../dialog/DialogHeader.js');
@@ -56,8 +58,6 @@ require('../flex-item/FlexItem.js');
 require('../flex-layout/FlexLayout.js');
 require('../flow-layout/FlowLayout.js');
 require('./FormField.js');
-require('../form-field-context/FormFieldContext.js');
-var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
 var FormFieldHelperText$1 = require('./FormFieldHelperText.css.js');
 require('../grid-item/GridItem.js');
 require('../grid-layout/GridLayout.js');
@@ -69,12 +69,12 @@ require('../link/Link.js');
 require('../link-card/LinkCard.js');
 require('../list-box/ListBox.js');
 require('../list-control/ListControlContext.js');
-require('../menu/MenuContext.js');
 require('@floating-ui/react');
+require('../menu/MenuContext.js');
 require('../menu/MenuItem.js');
 require('../menu/MenuPanel.js');
-require('../menu/MenuTriggerContext.js');
 require('../menu/MenuPanelContext.js');
+require('../menu/MenuTriggerContext.js');
 require('../menu/MenuGroup.js');
 require('../multiline-input/MultilineInput.js');
 require('../navigation-item/NavigationItem.js');

package/dist-cjs/form-field/FormFieldHelperText.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldHelperText.js","sources":["../src/form-field/FormFieldHelperText.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { Text, TextProps } from \"../text\";\nimport { makePrefixer } from \"../utils\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport formFieldHelperTextCss from \"./FormFieldHelperText.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldHelperText\");\n\nexport const FormFieldHelperText = ({\n  className,\n  children,\n  ...restProps\n}: Omit<TextProps<\"label\">, \"variant\" | \"styleAs\">) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-helper-text\",\n    css: formFieldHelperTextCss,\n    window: targetWindow,\n  });\n\n  const { a11yProps, disabled, readOnly, validationStatus } =\n    useFormFieldProps();\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(\"withValidation\")]: validationStatus },\n        className\n      )}\n    >\n      {!disabled && !readOnly && validationStatus && (\n        <StatusIndicator status={validationStatus} />\n      )}\n      <Text\n        disabled={disabled}\n        id={a11yProps?.[\"aria-describedby\"]}\n        variant=\"secondary\"\n        styleAs=\"label\"\n        {...restProps}\n      >\n        {children}\n      </Text>\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","formFieldHelperTextCss","useFormFieldProps","jsxs","clsx","jsx","StatusIndicator","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,yBAAyB,CAAA,CAAA;AAEpD,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAuD,KAAA;AACrD,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,6BAAA;AAAA,IACR,GAAK,EAAAC,qBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,QAAU,EAAA,gBAAA,KACrCC,mCAAkB,EAAA,CAAA;AAEpB,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAAC,wBAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAa,CAAA,gBAAgB,IAAI,gBAAiB,EAAA;AAAA,MACrD,SAAA;AAAA,KACF;AAAA,IAEC,QAAA,EAAA;AAAA,MAAA,CAAC,QAAY,IAAA,CAAC,QAAY,IAAA,gBAAA,oBACxBC,cAAA,CAAAC,+BAAA,EAAA;AAAA,QAAgB,MAAQ,EAAA,gBAAA;AAAA,OAAkB,CAAA;AAAA,sBAE5CD,cAAA,CAAAE,SAAA,EAAA;AAAA,QACC,QAAA;AAAA,QACA,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,QAChB,OAAQ,EAAA,WAAA;AAAA,QACR,OAAQ,EAAA,OAAA;AAAA,QACP,GAAG,SAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FormFieldHelperText.js","sources":["../src/form-field/FormFieldHelperText.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { Text, type TextProps } from \"../text\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport formFieldHelperTextCss from \"./FormFieldHelperText.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldHelperText\");\n\nexport const FormFieldHelperText = ({\n  className,\n  children,\n  ...restProps\n}: Omit<TextProps<\"label\">, \"variant\" | \"styleAs\">) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-helper-text\",\n    css: formFieldHelperTextCss,\n    window: targetWindow,\n  });\n\n  const { a11yProps, disabled, readOnly, validationStatus } =\n    useFormFieldProps();\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(\"withValidation\")]: validationStatus },\n        className,\n      )}\n    >\n      {!disabled && !readOnly && validationStatus && (\n        <StatusIndicator status={validationStatus} />\n      )}\n      <Text\n        disabled={disabled}\n        id={a11yProps?.[\"aria-describedby\"]}\n        variant=\"secondary\"\n        styleAs=\"label\"\n        {...restProps}\n      >\n        {children}\n      </Text>\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","formFieldHelperTextCss","useFormFieldProps","jsxs","clsx","jsx","StatusIndicator","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,yBAAyB,CAAA,CAAA;AAEpD,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAuD,KAAA;AACrD,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,6BAAA;AAAA,IACR,GAAK,EAAAC,qBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,QAAU,EAAA,gBAAA,KACrCC,mCAAkB,EAAA,CAAA;AAEpB,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAAC,wBAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAa,CAAA,gBAAgB,IAAI,gBAAiB,EAAA;AAAA,MACrD,SAAA;AAAA,KACF;AAAA,IAEC,QAAA,EAAA;AAAA,MAAA,CAAC,QAAY,IAAA,CAAC,QAAY,IAAA,gBAAA,oBACxBC,cAAA,CAAAC,+BAAA,EAAA;AAAA,QAAgB,MAAQ,EAAA,gBAAA;AAAA,OAAkB,CAAA;AAAA,sBAE5CD,cAAA,CAAAE,SAAA,EAAA;AAAA,QACC,QAAA;AAAA,QACA,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,QAChB,OAAQ,EAAA,WAAA;AAAA,QACR,OAAQ,EAAA,OAAA;AAAA,QACP,GAAG,SAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/form-field/FormFieldLabel.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
+var clsx = require('clsx');
 require('../form-field-context/FormFieldContext.js');
 var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
 require('../text/Text.js');
@@ -70,12 +70,12 @@ require('../link/Link.js');
 require('../link-card/LinkCard.js');
 require('../list-box/ListBox.js');
 require('../list-control/ListControlContext.js');
-require('../menu/MenuContext.js');
 require('@floating-ui/react');
+require('../menu/MenuContext.js');
 require('../menu/MenuItem.js');
 require('../menu/MenuPanel.js');
-require('../menu/MenuTriggerContext.js');
 require('../menu/MenuPanelContext.js');
+require('../menu/MenuTriggerContext.js');
 require('../menu/MenuGroup.js');
 require('../multiline-input/MultilineInput.js');
 require('../navigation-item/NavigationItem.js');

package/dist-cjs/form-field/FormFieldLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport interface FormFieldLabelProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n  /**\n   * Intent for the label.\n   *\n   * Defaults to \"label\"\n   * Using \"sentence\" gives more prominent styling\n   */\n  intent?: \"label\" | \"sentence\";\n}\n\nexport const FormFieldLabel = ({\n  className,\n  children,\n  intent = \"label\",\n  ...restProps\n}: FormFieldLabelProps) => {\n  const { a11yProps, disabled, necessity } = useFormFieldProps();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-label\",\n    css: formFieldLabelCss,\n    window: targetWindow,\n  });\n\n  const necessityLabel = necessity\n    ? necessity === \"asterisk\"\n      ? \" *\"\n      : ` (${capitalize(necessity)})`\n    : undefined;\n\n  return (\n    <Label\n      as=\"label\"\n      className={clsx(withBaseName(), withBaseName(intent), className)}\n      id={a11yProps?.[\"aria-labelledby\"]}\n      disabled={disabled}\n      variant=\"secondary\"\n      {...restProps}\n    >\n      {children}\n      {necessityLabel && (\n        <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n      )}\n    </Label>\n  );\n};\n"],"names":["makePrefixer","useFormFieldProps","useWindow","useComponentCssInjection","formFieldLabelCss","capitalize","jsxs","Label","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAS,GAAA,OAAA;AAAA,EACN,GAAA,SAAA;AACL,CAA2B,KAAA;AACzB,EAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,SAAA,KAAcC,mCAAkB,EAAA,CAAA;AAC7D,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,YACnB,SAAc,KAAA,UAAA,GACZ,OACA,CAAK,EAAA,EAAAC,qBAAA,CAAW,SAAS,CAC3B,CAAA,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,uBACGC,eAAA,CAAAC,WAAA,EAAA;AAAA,IACC,EAAG,EAAA,OAAA;AAAA,IACH,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,IAC/D,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,iBAAA,CAAA;AAAA,IAChB,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,kCACEC,cAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,QAAI,QAAA,EAAA,cAAA;AAAA,OAAe,CAAA;AAAA,KAAA;AAAA,GAErE,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, type TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport interface FormFieldLabelProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n  /**\n   * Intent for the label.\n   *\n   * Defaults to \"label\"\n   * Using \"sentence\" gives more prominent styling\n   */\n  intent?: \"label\" | \"sentence\";\n}\n\nexport const FormFieldLabel = ({\n  className,\n  children,\n  intent = \"label\",\n  ...restProps\n}: FormFieldLabelProps) => {\n  const { a11yProps, disabled, necessity } = useFormFieldProps();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-label\",\n    css: formFieldLabelCss,\n    window: targetWindow,\n  });\n\n  const necessityLabel = necessity\n    ? necessity === \"asterisk\"\n      ? \" *\"\n      : ` (${capitalize(necessity)})`\n    : undefined;\n\n  return (\n    <Label\n      as=\"label\"\n      className={clsx(withBaseName(), withBaseName(intent), className)}\n      id={a11yProps?.[\"aria-labelledby\"]}\n      disabled={disabled}\n      variant=\"secondary\"\n      {...restProps}\n    >\n      {children}\n      {necessityLabel && (\n        <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n      )}\n    </Label>\n  );\n};\n"],"names":["makePrefixer","useFormFieldProps","useWindow","useComponentCssInjection","formFieldLabelCss","capitalize","jsxs","Label","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAS,GAAA,OAAA;AAAA,EACN,GAAA,SAAA;AACL,CAA2B,KAAA;AACzB,EAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,SAAA,KAAcC,mCAAkB,EAAA,CAAA;AAC7D,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,YACnB,SAAc,KAAA,UAAA,GACZ,OACA,CAAK,EAAA,EAAAC,qBAAA,CAAW,SAAS,CAC3B,CAAA,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,uBACGC,eAAA,CAAAC,WAAA,EAAA;AAAA,IACC,EAAG,EAAA,OAAA;AAAA,IACH,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,IAC/D,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,iBAAA,CAAA;AAAA,IAChB,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,kCACEC,cAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,QAAI,QAAA,EAAA,cAAA;AAAA,OAAe,CAAA;AAAA,KAAA;AAAA,GAErE,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/form-field-context/FormFieldContext.js

@@ -27,9 +27,9 @@ require('../button/Button.js');
 require('../card/Card.js');
 require('../checkbox/Checkbox.js');
 require('../checkbox/CheckboxGroup.js');
+require('@salt-ds/icons');
 require('@salt-ds/styles');
 require('@salt-ds/window');
-require('@salt-ds/icons');
 require('../combo-box/ComboBox.js');
 require('../dialog/Dialog.js');
 require('../dialog/DialogHeader.js');
@@ -66,12 +66,12 @@ require('../link/Link.js');
 require('../link-card/LinkCard.js');
 require('../list-box/ListBox.js');
 require('../list-control/ListControlContext.js');
-require('../menu/MenuContext.js');
 require('@floating-ui/react');
+require('../menu/MenuContext.js');
 require('../menu/MenuItem.js');
 require('../menu/MenuPanel.js');
-require('../menu/MenuTriggerContext.js');
 require('../menu/MenuPanelContext.js');
+require('../menu/MenuTriggerContext.js');
 require('../menu/MenuGroup.js');
 require('../multiline-input/MultilineInput.js');
 require('../navigation-item/NavigationItem.js');

package/dist-cjs/form-field-context/FormFieldContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldContext.js","sources":["../src/form-field-context/FormFieldContext.ts"],"sourcesContent":["import { createContext } from \"../utils\";\n\nexport interface A11yValueProps {\n  /**\n   * id for FormFieldHelperText\n   */\n  helperTextId?: string;\n  /**\n   * id for FormFieldLabel\n   */\n  labelId?: string;\n}\n\nexport type NecessityType = \"required\" | \"optional\" | \"asterisk\";\n\nexport interface a11yValueAriaProps {\n  \"aria-labelledby\": A11yValueProps[\"labelId\"];\n  \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n}\n\nexport interface FormFieldContextValue {\n  a11yProps: a11yValueAriaProps;\n  disabled: boolean;\n  necessity: NecessityType | undefined;\n  readOnly: boolean;\n  validationStatus: \"error\" | \"warning\" | \"success\" | undefined;\n}\n\nexport const FormFieldContext = createContext(\n  \"FormFieldContext\",\n  {} as FormFieldContextValue\n);\n"],"names":["createContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,MAAM,gBAAmB,GAAAA,2BAAA;AAAA,EAC9B,kBAAA;AAAA,EACA,EAAC;AACH;;;;"}
+{"version":3,"file":"FormFieldContext.js","sources":["../src/form-field-context/FormFieldContext.ts"],"sourcesContent":["import { createContext } from \"../utils\";\n\nexport interface A11yValueProps {\n  /**\n   * id for FormFieldHelperText\n   */\n  helperTextId?: string;\n  /**\n   * id for FormFieldLabel\n   */\n  labelId?: string;\n}\n\nexport type NecessityType = \"required\" | \"optional\" | \"asterisk\";\n\nexport interface a11yValueAriaProps {\n  \"aria-labelledby\": A11yValueProps[\"labelId\"];\n  \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n}\n\nexport interface FormFieldContextValue {\n  a11yProps: a11yValueAriaProps;\n  disabled: boolean;\n  necessity: NecessityType | undefined;\n  readOnly: boolean;\n  validationStatus: \"error\" | \"warning\" | \"success\" | undefined;\n}\n\nexport const FormFieldContext = createContext(\n  \"FormFieldContext\",\n  {} as FormFieldContextValue,\n);\n"],"names":["createContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,MAAM,gBAAmB,GAAAA,2BAAA;AAAA,EAC9B,kBAAA;AAAA,EACA,EAAC;AACH;;;;"}

package/dist-cjs/form-field-context/useFormFieldProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormFieldProps.js","sources":["../src/form-field-context/useFormFieldProps.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { FormFieldContext, FormFieldContextValue } from \"./FormFieldContext\";\n\nexport function useFormFieldProps(): Partial<FormFieldContextValue> {\n  return useContext(FormFieldContext) || {};\n}\n"],"names":["useContext","FormFieldContext"],"mappings":";;;;;;;AAGO,SAAS,iBAAoD,GAAA;AAClE,EAAO,OAAAA,gBAAA,CAAWC,iCAAgB,CAAA,IAAK,EAAC,CAAA;AAC1C;;;;"}
+{"version":3,"file":"useFormFieldProps.js","sources":["../src/form-field-context/useFormFieldProps.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n  FormFieldContext,\n  type FormFieldContextValue,\n} from \"./FormFieldContext\";\n\nexport function useFormFieldProps(): Partial<FormFieldContextValue> {\n  return useContext(FormFieldContext) || {};\n}\n"],"names":["useContext","FormFieldContext"],"mappings":";;;;;;;AAMO,SAAS,iBAAoD,GAAA;AAClE,EAAO,OAAAA,gBAAA,CAAWC,iCAAgB,CAAA,IAAK,EAAC,CAAA;AAC1C;;;;"}

package/dist-cjs/grid-item/GridItem.js

@@ -3,8 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var clsx = require('clsx');
+var React = require('react');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var BreakpointProvider = require('../breakpoints/BreakpointProvider.js');
 var makePrefixer = require('../utils/makePrefixer.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
@@ -21,15 +24,12 @@ require('../banner/BannerActions.js');
 require('../banner/BannerContent.js');
 require('../border-item/BorderItem.js');
 require('../border-layout/BorderLayout.js');
-var BreakpointProvider = require('../breakpoints/BreakpointProvider.js');
 require('../button/Button.js');
 require('../card/Card.js');
 require('../checkbox/Checkbox.js');
 require('../checkbox/CheckboxGroup.js');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-require('../salt-provider/SaltProvider.js');
 require('@salt-ds/icons');
+require('../salt-provider/SaltProvider.js');
 require('../combo-box/ComboBox.js');
 require('../dialog/Dialog.js');
 require('../dialog/DialogHeader.js');
@@ -48,6 +48,7 @@ require('../flex-item/FlexItem.js');
 require('../flex-layout/FlexLayout.js');
 require('../flow-layout/FlowLayout.js');
 require('../form-field/FormField.js');
+require('../form-field-context/FormFieldContext.js');
 require('../status-indicator/StatusIndicator.js');
 require('../text/Text.js');
 require('../text/Code.js');
@@ -56,7 +57,6 @@ require('../text/Headings.js');
 require('../text/Label.js');
 require('../text/TextAction.js');
 require('../text/TextNotation.js');
-require('../form-field-context/FormFieldContext.js');
 require('../grid-layout/GridLayout.js');
 require('../input/Input.js');
 require('../interactable-card/InteractableCard.js');
@@ -66,12 +66,12 @@ require('../link/Link.js');
 require('../link-card/LinkCard.js');
 require('../list-box/ListBox.js');
 require('../list-control/ListControlContext.js');
-require('../menu/MenuContext.js');
 require('@floating-ui/react');
+require('../menu/MenuContext.js');
 require('../menu/MenuItem.js');
 require('../menu/MenuPanel.js');
-require('../menu/MenuTriggerContext.js');
 require('../menu/MenuPanelContext.js');
+require('../menu/MenuTriggerContext.js');
 require('../menu/MenuGroup.js');
 require('../multiline-input/MultilineInput.js');
 require('../navigation-item/NavigationItem.js');

package/dist-cjs/grid-item/GridItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridItem.js","sources":["../src/grid-item/GridItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n  makePrefixer,\n  ResponsiveProp,\n  PolymorphicRef,\n  PolymorphicComponentPropWithRef,\n  resolveResponsiveValue,\n} from \"../utils\";\nimport gridItemCss from \"./GridItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useBreakpoint } from \"../breakpoints\";\n\nexport const GRID_ALIGNMENT_BASE = [\n  \"start\",\n  \"end\",\n  \"center\",\n  \"stretch\",\n] as const;\n\ntype GridAlignment = (typeof GRID_ALIGNMENT_BASE)[number];\n\ntype GridProperty = number | \"auto\";\nexport type GridItemProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * The item will span across the provided number of grid columns. Defaults to \"auto\"\n       */\n      colSpan?: ResponsiveProp<GridProperty>;\n      /**\n       * The item will span across the provided number of grid rows. Defaults to \"auto\"\n       */\n      rowSpan?: ResponsiveProp<GridProperty>;\n      /**\n       * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n       */\n      horizontalAlignment?: GridAlignment;\n      /**\n       * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n       */\n      verticalAlignment?: GridAlignment;\n    }\n  >;\n\nconst withBaseName = makePrefixer(\"saltGridItem\");\n\nconst colStart = \"auto\";\nconst colEnd = \"auto\";\nconst rowStart = \"auto\";\nconst rowEnd = \"auto\";\n\ntype GridItemComponent = <T extends ElementType = \"div\">(\n  props: GridItemProps<T>\n) => ReactElement | null;\n\nexport const GridItem: GridItemComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      children,\n      className,\n      colSpan = \"auto\",\n      rowSpan = \"auto\",\n      horizontalAlignment = \"stretch\",\n      verticalAlignment = \"stretch\",\n      style,\n      ...rest\n    }: GridItemProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-grid-item\",\n      css: gridItemCss,\n      window: targetWindow,\n    });\n\n    const { matchedBreakpoints } = useBreakpoint();\n\n    const Component = as || \"div\";\n    const gridItemColSpan = resolveResponsiveValue(colSpan, matchedBreakpoints);\n\n    const gridItemRowSpan = resolveResponsiveValue(rowSpan, matchedBreakpoints);\n\n    const gridColumnStart = gridItemColSpan\n      ? `span ${gridItemColSpan}`\n      : colStart;\n\n    const gridColumnEnd = gridItemColSpan ? `span ${gridItemColSpan}` : colEnd;\n\n    const gridRowStart = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowStart;\n\n    const gridRowEnd = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowEnd;\n\n    const gridStyles = {\n      ...style,\n      \"--gridItem-justifySelf\": horizontalAlignment,\n      \"--gridItem-alignSelf\": verticalAlignment,\n      \"--gridItem-gridRowStart\": gridRowStart,\n      \"--gridItem-gridColumnStart\": gridColumnStart,\n      \"--gridItem-gridRowEnd\": gridRowEnd,\n      \"--gridItem-gridColumnEnd\": gridColumnEnd,\n    };\n\n    return (\n      <Component\n        className={clsx(withBaseName(), className)}\n        style={gridStyles}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","gridItemCss","useBreakpoint","resolveResponsiveValue","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,mBAAsB,GAAA;AAAA,EACjC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AACF,EAAA;AA4BA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA,CAAA;AAEhD,MAAM,QAAW,GAAA,MAAA,CAAA;AACjB,MAAM,MAAS,GAAA,MAAA,CAAA;AACf,MAAM,QAAW,GAAA,MAAA,CAAA;AACjB,MAAM,MAAS,GAAA,MAAA,CAAA;AAMR,MAAM,QAA8B,GAAAC,gBAAA;AAAA,EACzC,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAU,GAAA,MAAA;AAAA,IACV,OAAU,GAAA,MAAA;AAAA,IACV,mBAAsB,GAAA,SAAA;AAAA,IACtB,iBAAoB,GAAA,SAAA;AAAA,IACpB,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAIC,gCAAc,EAAA,CAAA;AAE7C,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,eAAA,GAAkBC,wCAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA,CAAA;AAE1E,IAAM,MAAA,eAAA,GAAkBA,wCAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA,CAAA;AAE1E,IAAM,MAAA,eAAA,GAAkB,eACpB,GAAA,CAAA,KAAA,EAAQ,eACR,CAAA,CAAA,GAAA,QAAA,CAAA;AAEJ,IAAM,MAAA,aAAA,GAAgB,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,MAAA,CAAA;AAEpE,IAAM,MAAA,YAAA,GAAe,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,QAAA,CAAA;AAEnE,IAAM,MAAA,UAAA,GAAa,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,MAAA,CAAA;AAEjE,IAAA,MAAM,UAAa,GAAA;AAAA,MACjB,GAAG,KAAA;AAAA,MACH,wBAA0B,EAAA,mBAAA;AAAA,MAC1B,sBAAwB,EAAA,iBAAA;AAAA,MACxB,yBAA2B,EAAA,YAAA;AAAA,MAC3B,4BAA8B,EAAA,eAAA;AAAA,MAC9B,uBAAyB,EAAA,UAAA;AAAA,MACzB,0BAA4B,EAAA,aAAA;AAAA,KAC9B,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAO,EAAA,UAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}
+{"version":3,"file":"GridItem.js","sources":["../src/grid-item/GridItem.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type ElementType, type ReactElement, forwardRef } from \"react\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  type ResponsiveProp,\n  makePrefixer,\n  resolveResponsiveValue,\n} from \"../utils\";\nimport gridItemCss from \"./GridItem.css\";\n\nexport const GRID_ALIGNMENT_BASE = [\n  \"start\",\n  \"end\",\n  \"center\",\n  \"stretch\",\n] as const;\n\ntype GridAlignment = (typeof GRID_ALIGNMENT_BASE)[number];\n\ntype GridProperty = number | \"auto\";\nexport type GridItemProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * The item will span across the provided number of grid columns. Defaults to \"auto\"\n       */\n      colSpan?: ResponsiveProp<GridProperty>;\n      /**\n       * The item will span across the provided number of grid rows. Defaults to \"auto\"\n       */\n      rowSpan?: ResponsiveProp<GridProperty>;\n      /**\n       * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n       */\n      horizontalAlignment?: GridAlignment;\n      /**\n       * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n       */\n      verticalAlignment?: GridAlignment;\n    }\n  >;\n\nconst withBaseName = makePrefixer(\"saltGridItem\");\n\nconst colStart = \"auto\";\nconst colEnd = \"auto\";\nconst rowStart = \"auto\";\nconst rowEnd = \"auto\";\n\ntype GridItemComponent = <T extends ElementType = \"div\">(\n  props: GridItemProps<T>,\n) => ReactElement | null;\n\nexport const GridItem: GridItemComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      children,\n      className,\n      colSpan = \"auto\",\n      rowSpan = \"auto\",\n      horizontalAlignment = \"stretch\",\n      verticalAlignment = \"stretch\",\n      style,\n      ...rest\n    }: GridItemProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-grid-item\",\n      css: gridItemCss,\n      window: targetWindow,\n    });\n\n    const { matchedBreakpoints } = useBreakpoint();\n\n    const Component = as || \"div\";\n    const gridItemColSpan = resolveResponsiveValue(colSpan, matchedBreakpoints);\n\n    const gridItemRowSpan = resolveResponsiveValue(rowSpan, matchedBreakpoints);\n\n    const gridColumnStart = gridItemColSpan\n      ? `span ${gridItemColSpan}`\n      : colStart;\n\n    const gridColumnEnd = gridItemColSpan ? `span ${gridItemColSpan}` : colEnd;\n\n    const gridRowStart = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowStart;\n\n    const gridRowEnd = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowEnd;\n\n    const gridStyles = {\n      ...style,\n      \"--gridItem-justifySelf\": horizontalAlignment,\n      \"--gridItem-alignSelf\": verticalAlignment,\n      \"--gridItem-gridRowStart\": gridRowStart,\n      \"--gridItem-gridColumnStart\": gridColumnStart,\n      \"--gridItem-gridRowEnd\": gridRowEnd,\n      \"--gridItem-gridColumnEnd\": gridColumnEnd,\n    };\n\n    return (\n      <Component\n        className={clsx(withBaseName(), className)}\n        style={gridStyles}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","gridItemCss","useBreakpoint","resolveResponsiveValue","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,mBAAsB,GAAA;AAAA,EACjC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AACF,EAAA;AA4BA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA,CAAA;AAEhD,MAAM,QAAW,GAAA,MAAA,CAAA;AACjB,MAAM,MAAS,GAAA,MAAA,CAAA;AACf,MAAM,QAAW,GAAA,MAAA,CAAA;AACjB,MAAM,MAAS,GAAA,MAAA,CAAA;AAMR,MAAM,QAA8B,GAAAC,gBAAA;AAAA,EACzC,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAU,GAAA,MAAA;AAAA,IACV,OAAU,GAAA,MAAA;AAAA,IACV,mBAAsB,GAAA,SAAA;AAAA,IACtB,iBAAoB,GAAA,SAAA;AAAA,IACpB,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAIC,gCAAc,EAAA,CAAA;AAE7C,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,eAAA,GAAkBC,wCAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA,CAAA;AAE1E,IAAM,MAAA,eAAA,GAAkBA,wCAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA,CAAA;AAE1E,IAAM,MAAA,eAAA,GAAkB,eACpB,GAAA,CAAA,KAAA,EAAQ,eACR,CAAA,CAAA,GAAA,QAAA,CAAA;AAEJ,IAAM,MAAA,aAAA,GAAgB,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,MAAA,CAAA;AAEpE,IAAM,MAAA,YAAA,GAAe,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,QAAA,CAAA;AAEnE,IAAM,MAAA,UAAA,GAAa,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,MAAA,CAAA;AAEjE,IAAA,MAAM,UAAa,GAAA;AAAA,MACjB,GAAG,KAAA;AAAA,MACH,wBAA0B,EAAA,mBAAA;AAAA,MAC1B,sBAAwB,EAAA,iBAAA;AAAA,MACxB,yBAA2B,EAAA,YAAA;AAAA,MAC3B,4BAA8B,EAAA,eAAA;AAAA,MAC9B,uBAAyB,EAAA,UAAA;AAAA,MACzB,0BAA4B,EAAA,aAAA;AAAA,KAC9B,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAO,EAAA,UAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}

package/dist-cjs/grid-layout/GridLayout.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var clsx = require('clsx');
+var React = require('react');
 var makePrefixer = require('../utils/makePrefixer.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
@@ -26,10 +26,10 @@ require('../button/Button.js');
 require('../card/Card.js');
 require('../checkbox/Checkbox.js');
 require('../checkbox/CheckboxGroup.js');
+require('@salt-ds/icons');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 require('../salt-provider/SaltProvider.js');
-require('@salt-ds/icons');
 require('../combo-box/ComboBox.js');
 require('../dialog/Dialog.js');
 require('../dialog/DialogHeader.js');
@@ -48,6 +48,7 @@ require('../flex-item/FlexItem.js');
 require('../flex-layout/FlexLayout.js');
 require('../flow-layout/FlowLayout.js');
 require('../form-field/FormField.js');
+require('../form-field-context/FormFieldContext.js');
 require('../status-indicator/StatusIndicator.js');
 require('../text/Text.js');
 require('../text/Code.js');
@@ -56,7 +57,6 @@ require('../text/Headings.js');
 require('../text/Label.js');
 require('../text/TextAction.js');
 require('../text/TextNotation.js');
-require('../form-field-context/FormFieldContext.js');
 require('../grid-item/GridItem.js');
 require('../input/Input.js');
 require('../interactable-card/InteractableCard.js');
@@ -66,12 +66,12 @@ require('../link/Link.js');
 require('../link-card/LinkCard.js');
 require('../list-box/ListBox.js');
 require('../list-control/ListControlContext.js');
-require('../menu/MenuContext.js');
 require('@floating-ui/react');
+require('../menu/MenuContext.js');
 require('../menu/MenuItem.js');
 require('../menu/MenuPanel.js');
-require('../menu/MenuTriggerContext.js');
 require('../menu/MenuPanelContext.js');
+require('../menu/MenuTriggerContext.js');
 require('../menu/MenuGroup.js');
 require('../multiline-input/MultilineInput.js');
 require('../navigation-item/NavigationItem.js');

package/dist-cjs/grid-layout/GridLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.js","sources":["../src/grid-layout/GridLayout.tsx"],"sourcesContent":["import { forwardRef, ReactElement, ElementType } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n  makePrefixer,\n  ResponsiveProp,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n  resolveResponsiveValue,\n} from \"../utils\";\n\nimport gridLayoutCss from \"./GridLayout.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useBreakpoint } from \"../breakpoints\";\n\nexport type GridLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Number of columns to be displayed. Defaults to 12\n       */\n      columns?: ResponsiveProp<number | string>;\n      /**\n       * Number of rows to be displayed. Defaults to 1\n       */\n      rows?: ResponsiveProp<number | string>;\n      /**\n       * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 3\n       */\n      gap?: ResponsiveProp<number | string>;\n      /**\n       * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 1\n       */\n      columnGap?: ResponsiveProp<number | string>;\n      /**\n       * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 1\n       */\n      rowGap?: ResponsiveProp<number | string>;\n    }\n  >;\n\ntype GridLayoutComponent = <T extends ElementType = \"div\">(\n  props: GridLayoutProps<T>\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltGridLayout\");\n\nfunction parseGridValue(value: number | string | undefined) {\n  if (value === undefined || typeof value === \"string\") {\n    return value;\n  }\n\n  return `repeat(${value}, 1fr)`;\n}\n\nfunction parseSpacing(value: number | string | undefined) {\n  if (value === undefined || typeof value === \"string\") {\n    return value;\n  }\n\n  return `calc(var(--salt-spacing-100) * ${value})`;\n}\n\nexport const GridLayout: GridLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      children,\n      className,\n      columns = 12,\n      rows = 1,\n      gap = 3,\n      columnGap,\n      rowGap,\n      style,\n      ...rest\n    }: GridLayoutProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-grid-layout\",\n      css: gridLayoutCss,\n      window: targetWindow,\n    });\n    const Component = as || \"div\";\n\n    const { matchedBreakpoints } = useBreakpoint();\n\n    const gridColumns = resolveResponsiveValue(columns, matchedBreakpoints);\n\n    const gridRows = resolveResponsiveValue(rows, matchedBreakpoints);\n\n    const gridGap = resolveResponsiveValue(gap, matchedBreakpoints);\n\n    const gridColumnGap = resolveResponsiveValue(columnGap, matchedBreakpoints);\n\n    const gridRowGap = resolveResponsiveValue(rowGap, matchedBreakpoints);\n\n    const gridLayoutStyles = {\n      ...style,\n      \"--gridLayout-columns\": parseGridValue(gridColumns),\n      \"--gridLayout-rows\": parseGridValue(gridRows),\n      \"--gridLayout-columnGap\": parseSpacing(gridColumnGap ?? gridGap),\n      \"--gridLayout-rowGap\": parseSpacing(gridRowGap ?? gridGap),\n    };\n\n    return (\n      <Component\n        className={clsx(withBaseName(), className)}\n        style={gridLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","gridLayoutCss","useBreakpoint","resolveResponsiveValue","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA,CAAA;AAElD,SAAS,eAAe,KAAoC,EAAA;AAC1D,EAAA,IAAI,KAAU,KAAA,KAAA,CAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAA,OAAO,CAAU,OAAA,EAAA,KAAA,CAAA,MAAA,CAAA,CAAA;AACnB,CAAA;AAEA,SAAS,aAAa,KAAoC,EAAA;AACxD,EAAA,IAAI,KAAU,KAAA,KAAA,CAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAA,OAAO,CAAkC,+BAAA,EAAA,KAAA,CAAA,CAAA,CAAA,CAAA;AAC3C,CAAA;AAEO,MAAM,UAAkC,GAAAC,gBAAA;AAAA,EAC7C,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAU,GAAA,EAAA;AAAA,IACV,IAAO,GAAA,CAAA;AAAA,IACP,GAAM,GAAA,CAAA;AAAA,IACN,SAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AAExB,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAIC,gCAAc,EAAA,CAAA;AAE7C,IAAM,MAAA,WAAA,GAAcC,wCAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA,CAAA;AAEtE,IAAM,MAAA,QAAA,GAAWA,wCAAuB,CAAA,IAAA,EAAM,kBAAkB,CAAA,CAAA;AAEhE,IAAM,MAAA,OAAA,GAAUA,wCAAuB,CAAA,GAAA,EAAK,kBAAkB,CAAA,CAAA;AAE9D,IAAM,MAAA,aAAA,GAAgBA,wCAAuB,CAAA,SAAA,EAAW,kBAAkB,CAAA,CAAA;AAE1E,IAAM,MAAA,UAAA,GAAaA,wCAAuB,CAAA,MAAA,EAAQ,kBAAkB,CAAA,CAAA;AAEpE,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,KAAA;AAAA,MACH,sBAAA,EAAwB,eAAe,WAAW,CAAA;AAAA,MAClD,mBAAA,EAAqB,eAAe,QAAQ,CAAA;AAAA,MAC5C,wBAAA,EAA0B,YAAa,CAAA,aAAA,IAAA,IAAA,GAAA,aAAA,GAAiB,OAAO,CAAA;AAAA,MAC/D,qBAAA,EAAuB,YAAa,CAAA,UAAA,IAAA,IAAA,GAAA,UAAA,GAAc,OAAO,CAAA;AAAA,KAC3D,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAO,EAAA,gBAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"GridLayout.js","sources":["../src/grid-layout/GridLayout.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type ElementType, type ReactElement, forwardRef } from \"react\";\n\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  type ResponsiveProp,\n  makePrefixer,\n  resolveResponsiveValue,\n} from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport gridLayoutCss from \"./GridLayout.css\";\n\nexport type GridLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Number of columns to be displayed. Defaults to 12\n       */\n      columns?: ResponsiveProp<number | string>;\n      /**\n       * Number of rows to be displayed. Defaults to 1\n       */\n      rows?: ResponsiveProp<number | string>;\n      /**\n       * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 3\n       */\n      gap?: ResponsiveProp<number | string>;\n      /**\n       * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 1\n       */\n      columnGap?: ResponsiveProp<number | string>;\n      /**\n       * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 1\n       */\n      rowGap?: ResponsiveProp<number | string>;\n    }\n  >;\n\ntype GridLayoutComponent = <T extends ElementType = \"div\">(\n  props: GridLayoutProps<T>,\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltGridLayout\");\n\nfunction parseGridValue(value: number | string | undefined) {\n  if (value === undefined || typeof value === \"string\") {\n    return value;\n  }\n\n  return `repeat(${value}, 1fr)`;\n}\n\nfunction parseSpacing(value: number | string | undefined) {\n  if (value === undefined || typeof value === \"string\") {\n    return value;\n  }\n\n  return `calc(var(--salt-spacing-100) * ${value})`;\n}\n\nexport const GridLayout: GridLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      children,\n      className,\n      columns = 12,\n      rows = 1,\n      gap = 3,\n      columnGap,\n      rowGap,\n      style,\n      ...rest\n    }: GridLayoutProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-grid-layout\",\n      css: gridLayoutCss,\n      window: targetWindow,\n    });\n    const Component = as || \"div\";\n\n    const { matchedBreakpoints } = useBreakpoint();\n\n    const gridColumns = resolveResponsiveValue(columns, matchedBreakpoints);\n\n    const gridRows = resolveResponsiveValue(rows, matchedBreakpoints);\n\n    const gridGap = resolveResponsiveValue(gap, matchedBreakpoints);\n\n    const gridColumnGap = resolveResponsiveValue(columnGap, matchedBreakpoints);\n\n    const gridRowGap = resolveResponsiveValue(rowGap, matchedBreakpoints);\n\n    const gridLayoutStyles = {\n      ...style,\n      \"--gridLayout-columns\": parseGridValue(gridColumns),\n      \"--gridLayout-rows\": parseGridValue(gridRows),\n      \"--gridLayout-columnGap\": parseSpacing(gridColumnGap ?? gridGap),\n      \"--gridLayout-rowGap\": parseSpacing(gridRowGap ?? gridGap),\n    };\n\n    return (\n      <Component\n        className={clsx(withBaseName(), className)}\n        style={gridLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","gridLayoutCss","useBreakpoint","resolveResponsiveValue","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA,CAAA;AAElD,SAAS,eAAe,KAAoC,EAAA;AAC1D,EAAA,IAAI,KAAU,KAAA,KAAA,CAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAA,OAAO,CAAU,OAAA,EAAA,KAAA,CAAA,MAAA,CAAA,CAAA;AACnB,CAAA;AAEA,SAAS,aAAa,KAAoC,EAAA;AACxD,EAAA,IAAI,KAAU,KAAA,KAAA,CAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAA,OAAO,CAAkC,+BAAA,EAAA,KAAA,CAAA,CAAA,CAAA,CAAA;AAC3C,CAAA;AAEO,MAAM,UAAkC,GAAAC,gBAAA;AAAA,EAC7C,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAU,GAAA,EAAA;AAAA,IACV,IAAO,GAAA,CAAA;AAAA,IACP,GAAM,GAAA,CAAA;AAAA,IACN,SAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AAExB,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAIC,gCAAc,EAAA,CAAA;AAE7C,IAAM,MAAA,WAAA,GAAcC,wCAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA,CAAA;AAEtE,IAAM,MAAA,QAAA,GAAWA,wCAAuB,CAAA,IAAA,EAAM,kBAAkB,CAAA,CAAA;AAEhE,IAAM,MAAA,OAAA,GAAUA,wCAAuB,CAAA,GAAA,EAAK,kBAAkB,CAAA,CAAA;AAE9D,IAAM,MAAA,aAAA,GAAgBA,wCAAuB,CAAA,SAAA,EAAW,kBAAkB,CAAA,CAAA;AAE1E,IAAM,MAAA,UAAA,GAAaA,wCAAuB,CAAA,MAAA,EAAQ,kBAAkB,CAAA,CAAA;AAEpE,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,KAAA;AAAA,MACH,sBAAA,EAAwB,eAAe,WAAW,CAAA;AAAA,MAClD,mBAAA,EAAqB,eAAe,QAAQ,CAAA;AAAA,MAC5C,wBAAA,EAA0B,YAAa,CAAA,aAAA,IAAA,IAAA,GAAA,aAAA,GAAiB,OAAO,CAAA;AAAA,MAC/D,qBAAA,EAAuB,YAAa,CAAA,UAAA,IAAA,IAAA,GAAA,UAAA,GAAc,OAAO,CAAA;AAAA,KAC3D,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAO,EAAA,gBAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/index.js

@@ -138,6 +138,7 @@ var mergeProps = require('./utils/mergeProps.js');
 var useValueEffect = require('./utils/useValueEffect.js');
 var useResizeObserver = require('./utils/useResizeObserver.js');
 var useEventCallback = require('./utils/useEventCallback.js');
+var getRefFromChildren = require('./utils/getRefFromChildren.js');
 var ViewportProvider = require('./viewport/ViewportProvider.js');
 
 
@@ -256,12 +257,16 @@ exports.H4 = Headings.H4;
 exports.Label = Label.Label;
 exports.TextAction = TextAction.TextAction;
 exports.TextNotation = TextNotation.TextNotation;
+exports.AccentValues = Accent.AccentValues;
 exports.UNSTABLE_AccentValues = Accent.UNSTABLE_AccentValues;
+exports.ActionFontValues = ActionFont.ActionFontValues;
 exports.UNSTABLE_ActionFontValues = ActionFont.UNSTABLE_ActionFontValues;
 exports.DensityValues = Density.DensityValues;
+exports.HeadingFontValues = HeadingFont.HeadingFontValues;
 exports.UNSTABLE_HeadingFontValues = HeadingFont.UNSTABLE_HeadingFontValues;
 exports.getCharacteristicValue = Theme.getCharacteristicValue;
 exports.ModeValues = Mode.ModeValues;
+exports.CornerValues = Corner.CornerValues;
 exports.UNSTABLE_CornerValues = Corner.UNSTABLE_CornerValues;
 exports.Toast = Toast.Toast;
 exports.ToastContent = ToastContent.ToastContent;
@@ -269,6 +274,7 @@ exports.BreakpointContext = SaltProvider.BreakpointContext;
 exports.DEFAULT_DENSITY = SaltProvider.DEFAULT_DENSITY;
 exports.DensityContext = SaltProvider.DensityContext;
 exports.SaltProvider = SaltProvider.SaltProvider;
+exports.SaltProviderNext = SaltProvider.SaltProviderNext;
 exports.ThemeContext = SaltProvider.ThemeContext;
 exports.UNSTABLE_SaltProviderNext = SaltProvider.UNSTABLE_SaltProviderNext;
 exports.useBreakpoints = SaltProvider.useBreakpoints;
@@ -314,6 +320,7 @@ exports.mergeProps = mergeProps.mergeProps;
 exports.useValueEffect = useValueEffect.useValueEffect;
 exports.useResizeObserver = useResizeObserver.useResizeObserver;
 exports.useEventCallback = useEventCallback.useEventCallback;
+exports.getRefFromChildren = getRefFromChildren.getRefFromChildren;
 exports.ViewportContext = ViewportProvider.ViewportContext;
 exports.ViewportProvider = ViewportProvider.ViewportProvider;
 exports.useViewport = ViewportProvider.useViewport;

package/dist-cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-cjs/input/Input.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var React = require('react');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var React = require('react');
 require('../form-field-context/FormFieldContext.js');
 var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
+var StatusAdornment = require('../status-adornment/StatusAdornment.js');
 var makePrefixer = require('../utils/makePrefixer.js');
 var useControlled = require('../utils/useControlled.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
@@ -68,12 +69,12 @@ require('../link/Link.js');
 require('../link-card/LinkCard.js');
 require('../list-box/ListBox.js');
 require('../list-control/ListControlContext.js');
-require('../menu/MenuContext.js');
 require('@floating-ui/react');
+require('../menu/MenuContext.js');
 require('../menu/MenuItem.js');
 require('../menu/MenuPanel.js');
-require('../menu/MenuTriggerContext.js');
 require('../menu/MenuPanelContext.js');
+require('../menu/MenuTriggerContext.js');
 require('../menu/MenuGroup.js');
 require('../multiline-input/MultilineInput.js');
 require('../navigation-item/NavigationItem.js');
@@ -99,7 +100,6 @@ require('../scrim/Scrim.js');
 require('../segmented-button-group/SegmentedButtonGroup.js');
 require('../spinner/Spinner.js');
 require('../stack-layout/StackLayout.js');
-var StatusAdornment = require('../status-adornment/StatusAdornment.js');
 require('../toast/Toast.js');
 require('../toast/ToastContent.js');
 require('../split-layout/SplitLayout.js');