@salt-ds/core 1.47.0 → 1.47.2

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

@@ -1 +1 @@
-{"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 { parseSpacing } from \"../flex-layout/parseSpacing\";\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       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: ResponsiveProp<number | string>;\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: ResponsiveProp<number | string>;\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      margin = 0,\n      padding = 0,\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    const gridItemMargin = resolveResponsiveValue(margin, matchedBreakpoints);\n    const gridItemPadding = resolveResponsiveValue(padding, matchedBreakpoints);\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      \"--gridItem-margin\": parseSpacing(gridItemMargin),\n      \"--gridItem-padding\": parseSpacing(gridItemPadding),\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","parseSpacing","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AAgBO,MAAM,mBAAsB,GAAA;AAAA,EACjC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF;AAoCA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEhD,MAAM,QAAW,GAAA,MAAA;AACjB,MAAM,MAAS,GAAA,MAAA;AACf,MAAM,QAAW,GAAA,MAAA;AACjB,MAAM,MAAS,GAAA,MAAA;AAMR,MAAM,QAA8B,GAAAC,gBAAA;AAAA,EACzC,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAS,GAAA,CAAA;AAAA,IACT,OAAU,GAAA,CAAA;AAAA,IACV,OAAU,GAAA,MAAA;AAAA,IACV,OAAU,GAAA,MAAA;AAAA,IACV,mBAAsB,GAAA,SAAA;AAAA,IACtB,iBAAoB,GAAA,SAAA;AAAA,IACpB,KAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAIC,gCAAc,EAAA;AAE7C,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA;AACxB,IAAM,MAAA,eAAA,GAAkBC,wCAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAE1E,IAAM,MAAA,eAAA,GAAkBA,wCAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAC1E,IAAM,MAAA,cAAA,GAAiBA,wCAAuB,CAAA,MAAA,EAAQ,kBAAkB,CAAA;AACxE,IAAM,MAAA,eAAA,GAAkBA,wCAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAC1E,IAAA,MAAM,eAAkB,GAAA,eAAA,GACpB,CAAQ,KAAA,EAAA,eAAe,CACvB,CAAA,GAAA,QAAA;AAEJ,IAAA,MAAM,aAAgB,GAAA,eAAA,GAAkB,CAAQ,KAAA,EAAA,eAAe,CAAK,CAAA,GAAA,MAAA;AAEpE,IAAA,MAAM,YAAe,GAAA,eAAA,GAAkB,CAAQ,KAAA,EAAA,eAAe,CAAK,CAAA,GAAA,QAAA;AAEnE,IAAA,MAAM,UAAa,GAAA,eAAA,GAAkB,CAAQ,KAAA,EAAA,eAAe,CAAK,CAAA,GAAA,MAAA;AAEjE,IAAA,MAAM,UAAa,GAAA;AAAA,MACjB,mBAAA,EAAqBC,0BAAa,cAAc,CAAA;AAAA,MAChD,oBAAA,EAAsBA,0BAAa,eAAe,CAAA;AAAA,MAClD,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,KAC9B;AAEA,IACE,uBAAAC,cAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,KAAO,EAAA,UAAA;AAAA,QACP,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;;"}
+{"version":3,"file":"GridItem.js","sources":["../src/grid-item/GridItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ElementType,\n  type ForwardedRef,\n  type FunctionComponent,\n  forwardRef,\n} from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport { parseSpacing } from \"../flex-layout/parseSpacing\";\nimport {\n  makePrefixer,\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  type ResponsiveProp,\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       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: ResponsiveProp<number | string>;\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: ResponsiveProp<number | string>;\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) => ReturnType<FunctionComponent>;\n\nexport const GridItem: GridItemComponent = forwardRef(function GridItem<\n  T extends ElementType = \"div\",\n>(\n  {\n    as,\n    children,\n    className,\n    margin = 0,\n    padding = 0,\n    colSpan = \"auto\",\n    rowSpan = \"auto\",\n    horizontalAlignment = \"stretch\",\n    verticalAlignment = \"stretch\",\n    style,\n    ...rest\n  }: GridItemProps<T>,\n  ref?: ForwardedRef<unknown>,\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  const gridItemMargin = resolveResponsiveValue(margin, matchedBreakpoints);\n  const gridItemPadding = resolveResponsiveValue(padding, matchedBreakpoints);\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    \"--gridItem-margin\": parseSpacing(gridItemMargin),\n    \"--gridItem-padding\": parseSpacing(gridItemPadding),\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 as PolymorphicRef<T>}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n});\n"],"names":["makePrefixer","forwardRef","GridItem","useWindow","useComponentCssInjection","gridItemCss","useBreakpoint","resolveResponsiveValue","parseSpacing","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AAoBO,MAAM,mBAAsB,GAAA;AAAA,EACjC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF;AAoCA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEhD,MAAM,QAAW,GAAA,MAAA;AACjB,MAAM,MAAS,GAAA,MAAA;AACf,MAAM,QAAW,GAAA,MAAA;AACjB,MAAM,MAAS,GAAA,MAAA;AAMF,MAAA,QAAA,GAA8BC,gBAAW,CAAA,SAASC,SAG7D,CAAA;AAAA,EACE,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAS,GAAA,CAAA;AAAA,EACT,OAAU,GAAA,CAAA;AAAA,EACV,OAAU,GAAA,MAAA;AAAA,EACV,OAAU,GAAA,MAAA;AAAA,EACV,mBAAsB,GAAA,SAAA;AAAA,EACtB,iBAAoB,GAAA,SAAA;AAAA,EACpB,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,kBAAmB,EAAA,GAAIC,gCAAc,EAAA;AAE7C,EAAA,MAAM,YAAY,EAAM,IAAA,KAAA;AACxB,EAAM,MAAA,eAAA,GAAkBC,wCAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAE1E,EAAM,MAAA,eAAA,GAAkBA,wCAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAC1E,EAAM,MAAA,cAAA,GAAiBA,wCAAuB,CAAA,MAAA,EAAQ,kBAAkB,CAAA;AACxE,EAAM,MAAA,eAAA,GAAkBA,wCAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAC1E,EAAA,MAAM,eAAkB,GAAA,eAAA,GACpB,CAAQ,KAAA,EAAA,eAAe,CACvB,CAAA,GAAA,QAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,eAAA,GAAkB,CAAQ,KAAA,EAAA,eAAe,CAAK,CAAA,GAAA,MAAA;AAEpE,EAAA,MAAM,YAAe,GAAA,eAAA,GAAkB,CAAQ,KAAA,EAAA,eAAe,CAAK,CAAA,GAAA,QAAA;AAEnE,EAAA,MAAM,UAAa,GAAA,eAAA,GAAkB,CAAQ,KAAA,EAAA,eAAe,CAAK,CAAA,GAAA,MAAA;AAEjE,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,mBAAA,EAAqBC,0BAAa,cAAc,CAAA;AAAA,IAChD,oBAAA,EAAsBA,0BAAa,eAAe,CAAA;AAAA,IAClD,GAAG,KAAA;AAAA,IACH,wBAA0B,EAAA,mBAAA;AAAA,IAC1B,sBAAwB,EAAA,iBAAA;AAAA,IACxB,yBAA2B,EAAA,YAAA;AAAA,IAC3B,4BAA8B,EAAA,eAAA;AAAA,IAC9B,uBAAyB,EAAA,UAAA;AAAA,IACzB,0BAA4B,EAAA;AAAA,GAC9B;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;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;AAAA;AAAA,GACH;AAEJ,CAAC;;;;;"}

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

@@ -1,16 +1,16 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var React = require('react');
+var BreakpointProvider = require('../breakpoints/BreakpointProvider.js');
+var parseSpacing = require('../flex-layout/parseSpacing.js');
 var makePrefixer = require('../utils/makePrefixer.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
 var useResponsiveProp = require('../utils/useResponsiveProp.js');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var BreakpointProvider = require('../breakpoints/BreakpointProvider.js');
-var parseSpacing = require('../flex-layout/parseSpacing.js');
 var GridLayout$1 = require('./GridLayout.css.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltGridLayout");
@@ -20,57 +20,55 @@ function parseGridValue(value) {
   }
   return `repeat(${value}, 1fr)`;
 }
-const GridLayout = React.forwardRef(
-  ({
-    as,
-    children,
-    className,
-    columns = 12,
-    rows = 1,
-    gap = 3,
-    margin = 0,
-    padding = 0,
-    columnGap,
-    rowGap,
-    style,
-    ...rest
-  }, ref) => {
-    const targetWindow = window.useWindow();
-    styles.useComponentCssInjection({
-      testId: "salt-grid-layout",
-      css: GridLayout$1,
-      window: targetWindow
-    });
-    const Component = as || "div";
-    const { matchedBreakpoints } = BreakpointProvider.useBreakpoint();
-    const gridColumns = useResponsiveProp.resolveResponsiveValue(columns, matchedBreakpoints);
-    const gridRows = useResponsiveProp.resolveResponsiveValue(rows, matchedBreakpoints);
-    const gridGap = useResponsiveProp.resolveResponsiveValue(gap, matchedBreakpoints);
-    const gridColumnGap = useResponsiveProp.resolveResponsiveValue(columnGap, matchedBreakpoints);
-    const gridRowGap = useResponsiveProp.resolveResponsiveValue(rowGap, matchedBreakpoints);
-    const gridMargin = useResponsiveProp.resolveResponsiveValue(margin, matchedBreakpoints);
-    const gridPadding = useResponsiveProp.resolveResponsiveValue(padding, matchedBreakpoints);
-    const gridLayoutStyles = {
-      "--gridLayout-margin": parseSpacing.parseSpacing(gridMargin),
-      "--gridLayout-padding": parseSpacing.parseSpacing(gridPadding),
-      ...style,
-      "--gridLayout-columns": parseGridValue(gridColumns),
-      "--gridLayout-rows": parseGridValue(gridRows),
-      "--gridLayout-columnGap": parseSpacing.parseSpacing(gridColumnGap ?? gridGap),
-      "--gridLayout-rowGap": parseSpacing.parseSpacing(gridRowGap ?? gridGap)
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Component,
-      {
-        className: clsx.clsx(withBaseName(), className),
-        style: gridLayoutStyles,
-        ref,
-        ...rest,
-        children
-      }
-    );
-  }
-);
+const GridLayout = React.forwardRef(function GridLayout2({
+  as,
+  children,
+  className,
+  columns = 12,
+  rows = 1,
+  gap = 3,
+  margin = 0,
+  padding = 0,
+  columnGap,
+  rowGap,
+  style,
+  ...rest
+}, ref) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-grid-layout",
+    css: GridLayout$1,
+    window: targetWindow
+  });
+  const Component = as || "div";
+  const { matchedBreakpoints } = BreakpointProvider.useBreakpoint();
+  const gridColumns = useResponsiveProp.resolveResponsiveValue(columns, matchedBreakpoints);
+  const gridRows = useResponsiveProp.resolveResponsiveValue(rows, matchedBreakpoints);
+  const gridGap = useResponsiveProp.resolveResponsiveValue(gap, matchedBreakpoints);
+  const gridColumnGap = useResponsiveProp.resolveResponsiveValue(columnGap, matchedBreakpoints);
+  const gridRowGap = useResponsiveProp.resolveResponsiveValue(rowGap, matchedBreakpoints);
+  const gridMargin = useResponsiveProp.resolveResponsiveValue(margin, matchedBreakpoints);
+  const gridPadding = useResponsiveProp.resolveResponsiveValue(padding, matchedBreakpoints);
+  const gridLayoutStyles = {
+    "--gridLayout-margin": parseSpacing.parseSpacing(gridMargin),
+    "--gridLayout-padding": parseSpacing.parseSpacing(gridPadding),
+    ...style,
+    "--gridLayout-columns": parseGridValue(gridColumns),
+    "--gridLayout-rows": parseGridValue(gridRows),
+    "--gridLayout-columnGap": parseSpacing.parseSpacing(gridColumnGap ?? gridGap),
+    "--gridLayout-rowGap": parseSpacing.parseSpacing(gridRowGap ?? gridGap)
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      className: clsx.clsx(withBaseName(), className),
+      style: gridLayoutStyles,
+      ref,
+      ...rest,
+      children
+    }
+  );
+});
 
 exports.GridLayout = GridLayout;
 //# sourceMappingURL=GridLayout.js.map

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

@@ -1 +1 @@
-{"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 { parseSpacing } from \"../flex-layout/parseSpacing\";\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       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: ResponsiveProp<number | string>;\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: 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\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      margin = 0,\n      padding = 0,\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    const gridMargin = resolveResponsiveValue(margin, matchedBreakpoints);\n    const gridPadding = resolveResponsiveValue(padding, matchedBreakpoints);\n    const gridLayoutStyles = {\n      \"--gridLayout-margin\": parseSpacing(gridMargin),\n      \"--gridLayout-padding\": parseSpacing(gridPadding),\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","parseSpacing","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AAwDA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAElD,SAAS,eAAe,KAAoC,EAAA;AAC1D,EAAA,IAAI,KAAU,KAAA,MAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA;AAAA;AAGT,EAAA,OAAO,UAAU,KAAK,CAAA,MAAA,CAAA;AACxB;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,MAAS,GAAA,CAAA;AAAA,IACT,OAAU,GAAA,CAAA;AAAA,IACV,SAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA;AAExB,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAIC,gCAAc,EAAA;AAE7C,IAAM,MAAA,WAAA,GAAcC,wCAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAEtE,IAAM,MAAA,QAAA,GAAWA,wCAAuB,CAAA,IAAA,EAAM,kBAAkB,CAAA;AAEhE,IAAM,MAAA,OAAA,GAAUA,wCAAuB,CAAA,GAAA,EAAK,kBAAkB,CAAA;AAE9D,IAAM,MAAA,aAAA,GAAgBA,wCAAuB,CAAA,SAAA,EAAW,kBAAkB,CAAA;AAE1E,IAAM,MAAA,UAAA,GAAaA,wCAAuB,CAAA,MAAA,EAAQ,kBAAkB,CAAA;AACpE,IAAM,MAAA,UAAA,GAAaA,wCAAuB,CAAA,MAAA,EAAQ,kBAAkB,CAAA;AACpE,IAAM,MAAA,WAAA,GAAcA,wCAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA;AACtE,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,qBAAA,EAAuBC,0BAAa,UAAU,CAAA;AAAA,MAC9C,sBAAA,EAAwBA,0BAAa,WAAW,CAAA;AAAA,MAChD,GAAG,KAAA;AAAA,MACH,sBAAA,EAAwB,eAAe,WAAW,CAAA;AAAA,MAClD,mBAAA,EAAqB,eAAe,QAAQ,CAAA;AAAA,MAC5C,wBAAA,EAA0BA,yBAAa,CAAA,aAAA,IAAiB,OAAO,CAAA;AAAA,MAC/D,qBAAA,EAAuBA,yBAAa,CAAA,UAAA,IAAc,OAAO;AAAA,KAC3D;AAEA,IACE,uBAAAC,cAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,KAAO,EAAA,gBAAA;AAAA,QACP,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"GridLayout.js","sources":["../src/grid-layout/GridLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ElementType,\n  type ForwardedRef,\n  type FunctionComponent,\n  forwardRef,\n} from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport { parseSpacing } from \"../flex-layout/parseSpacing\";\nimport {\n  makePrefixer,\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  type ResponsiveProp,\n  resolveResponsiveValue,\n} from \"../utils\";\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       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: ResponsiveProp<number | string>;\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: ResponsiveProp<number | string>;\n    }\n  >;\n\ntype GridLayoutComponent = <T extends ElementType = \"div\">(\n  props: GridLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\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\nexport const GridLayout: GridLayoutComponent = forwardRef(function GridLayout<\n  T extends ElementType = \"div\",\n>(\n  {\n    as,\n    children,\n    className,\n    columns = 12,\n    rows = 1,\n    gap = 3,\n    margin = 0,\n    padding = 0,\n    columnGap,\n    rowGap,\n    style,\n    ...rest\n  }: GridLayoutProps<T>,\n  ref?: ForwardedRef<unknown>,\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  const gridMargin = resolveResponsiveValue(margin, matchedBreakpoints);\n  const gridPadding = resolveResponsiveValue(padding, matchedBreakpoints);\n  const gridLayoutStyles = {\n    \"--gridLayout-margin\": parseSpacing(gridMargin),\n    \"--gridLayout-padding\": parseSpacing(gridPadding),\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 as PolymorphicRef<T>}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n});\n"],"names":["makePrefixer","forwardRef","GridLayout","useWindow","useComponentCssInjection","gridLayoutCss","useBreakpoint","resolveResponsiveValue","parseSpacing","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AA2DA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAElD,SAAS,eAAe,KAAoC,EAAA;AAC1D,EAAA,IAAI,KAAU,KAAA,MAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA;AAAA;AAGT,EAAA,OAAO,UAAU,KAAK,CAAA,MAAA,CAAA;AACxB;AAEa,MAAA,UAAA,GAAkCC,gBAAW,CAAA,SAASC,WAGjE,CAAA;AAAA,EACE,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAU,GAAA,EAAA;AAAA,EACV,IAAO,GAAA,CAAA;AAAA,EACP,GAAM,GAAA,CAAA;AAAA,EACN,MAAS,GAAA,CAAA;AAAA,EACT,OAAU,GAAA,CAAA;AAAA,EACV,SAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAA,MAAM,YAAY,EAAM,IAAA,KAAA;AAExB,EAAM,MAAA,EAAE,kBAAmB,EAAA,GAAIC,gCAAc,EAAA;AAE7C,EAAM,MAAA,WAAA,GAAcC,wCAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAEtE,EAAM,MAAA,QAAA,GAAWA,wCAAuB,CAAA,IAAA,EAAM,kBAAkB,CAAA;AAEhE,EAAM,MAAA,OAAA,GAAUA,wCAAuB,CAAA,GAAA,EAAK,kBAAkB,CAAA;AAE9D,EAAM,MAAA,aAAA,GAAgBA,wCAAuB,CAAA,SAAA,EAAW,kBAAkB,CAAA;AAE1E,EAAM,MAAA,UAAA,GAAaA,wCAAuB,CAAA,MAAA,EAAQ,kBAAkB,CAAA;AACpE,EAAM,MAAA,UAAA,GAAaA,wCAAuB,CAAA,MAAA,EAAQ,kBAAkB,CAAA;AACpE,EAAM,MAAA,WAAA,GAAcA,wCAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA;AACtE,EAAA,MAAM,gBAAmB,GAAA;AAAA,IACvB,qBAAA,EAAuBC,0BAAa,UAAU,CAAA;AAAA,IAC9C,sBAAA,EAAwBA,0BAAa,WAAW,CAAA;AAAA,IAChD,GAAG,KAAA;AAAA,IACH,sBAAA,EAAwB,eAAe,WAAW,CAAA;AAAA,IAClD,mBAAA,EAAqB,eAAe,QAAQ,CAAA;AAAA,IAC5C,wBAAA,EAA0BA,yBAAa,CAAA,aAAA,IAAiB,OAAO,CAAA;AAAA,IAC/D,qBAAA,EAAuBA,yBAAa,CAAA,UAAA,IAAc,OAAO;AAAA,GAC3D;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;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;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-cjs/index.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var AccordionGroup = require('./accordion/AccordionGroup.js');
-var AccordionPanel = require('./accordion/AccordionPanel.js');
 var Accordion = require('./accordion/Accordion.js');
+var AccordionGroup = require('./accordion/AccordionGroup.js');
 var AccordionHeader = require('./accordion/AccordionHeader.js');
-var AriaAnnouncerContext = require('./aria-announcer/AriaAnnouncerContext.js');
+var AccordionPanel = require('./accordion/AccordionPanel.js');
 var AriaAnnounce = require('./aria-announcer/AriaAnnounce.js');
+var AriaAnnouncerContext = require('./aria-announcer/AriaAnnouncerContext.js');
 var AriaAnnouncerProvider = require('./aria-announcer/AriaAnnouncerProvider.js');
 var useAriaAnnouncer = require('./aria-announcer/useAriaAnnouncer.js');
 var Avatar = require('./avatar/Avatar.js');
@@ -16,8 +16,8 @@ var BannerActions = require('./banner/BannerActions.js');
 var BannerContent = require('./banner/BannerContent.js');
 var BorderItem = require('./border-item/BorderItem.js');
 var BorderLayout = require('./border-layout/BorderLayout.js');
-var Breakpoints = require('./breakpoints/Breakpoints.js');
 var BreakpointProvider = require('./breakpoints/BreakpointProvider.js');
+var Breakpoints = require('./breakpoints/Breakpoints.js');
 var Button = require('./button/Button.js');
 var useButton = require('./button/useButton.js');
 var Card = require('./card/Card.js');
@@ -26,11 +26,11 @@ var CheckboxGroup = require('./checkbox/CheckboxGroup.js');
 var CheckboxIcon = require('./checkbox/CheckboxIcon.js');
 var ComboBox = require('./combo-box/ComboBox.js');
 var Dialog = require('./dialog/Dialog.js');
-var DialogHeader = require('./dialog/DialogHeader.js');
 var DialogActions = require('./dialog/DialogActions.js');
+var DialogCloseButton = require('./dialog/DialogCloseButton.js');
 var DialogContent = require('./dialog/DialogContent.js');
 var DialogContext = require('./dialog/DialogContext.js');
-var DialogCloseButton = require('./dialog/DialogCloseButton.js');
+var DialogHeader = require('./dialog/DialogHeader.js');
 var Divider = require('./divider/Divider.js');
 var Drawer = require('./drawer/Drawer.js');
 var DrawerCloseButton = require('./drawer/DrawerCloseButton.js');
@@ -57,25 +57,25 @@ var LinkCard = require('./link-card/LinkCard.js');
 var ListBox = require('./list-box/ListBox.js');
 var ListControlContext = require('./list-control/ListControlContext.js');
 var Menu = require('./menu/Menu.js');
+var MenuGroup = require('./menu/MenuGroup.js');
 var MenuItem = require('./menu/MenuItem.js');
 var MenuPanel = require('./menu/MenuPanel.js');
 var MenuTrigger = require('./menu/MenuTrigger.js');
-var MenuGroup = require('./menu/MenuGroup.js');
 var MultilineInput = require('./multiline-input/MultilineInput.js');
 var NavigationItem = require('./navigation-item/NavigationItem.js');
 var Option = require('./option/Option.js');
 var OptionGroup = require('./option/OptionGroup.js');
 var Overlay = require('./overlay/Overlay.js');
-var OverlayTrigger = require('./overlay/OverlayTrigger.js');
-var OverlayPanel = require('./overlay/OverlayPanel.js');
 var OverlayHeader = require('./overlay/OverlayHeader.js');
+var OverlayPanel = require('./overlay/OverlayPanel.js');
 var OverlayPanelCloseButton = require('./overlay/OverlayPanelCloseButton.js');
 var OverlayPanelContent = require('./overlay/OverlayPanelContent.js');
-var Pagination = require('./pagination/Pagination.js');
-var Paginator = require('./pagination/Paginator.js');
+var OverlayTrigger = require('./overlay/OverlayTrigger.js');
 var CompactInput = require('./pagination/CompactInput.js');
 var CompactPaginator = require('./pagination/CompactPaginator.js');
 var GoToInput = require('./pagination/GoToInput.js');
+var Pagination = require('./pagination/Pagination.js');
+var Paginator = require('./pagination/Paginator.js');
 var Panel = require('./panel/Panel.js');
 var ParentChildLayout = require('./parent-child-layout/ParentChildLayout.js');
 var Pill = require('./pill/Pill.js');
@@ -84,38 +84,39 @@ var LinearProgress = require('./progress/LinearProgress/LinearProgress.js');
 var RadioButton = require('./radio-button/RadioButton.js');
 var RadioButtonGroup = require('./radio-button/RadioButtonGroup.js');
 var RadioButtonIcon = require('./radio-button/RadioButtonIcon.js');
+var SaltProvider = require('./salt-provider/SaltProvider.js');
 var Scrim = require('./scrim/Scrim.js');
 var SegmentedButtonGroup = require('./segmented-button-group/SegmentedButtonGroup.js');
+var SemanticIconProvider = require('./semantic-icon-provider/SemanticIconProvider.js');
 var SkipLink = require('./skip-link/SkipLink.js');
+var RangeSlider = require('./slider/RangeSlider.js');
+var Slider = require('./slider/Slider.js');
 var Spinner = require('./spinner/Spinner.js');
+var SplitLayout = require('./split-layout/SplitLayout.js');
 var StackLayout = require('./stack-layout/StackLayout.js');
 var StatusAdornment = require('./status-adornment/StatusAdornment.js');
 var StatusIndicator = require('./status-indicator/StatusIndicator.js');
 var ValidationStatus = require('./status-indicator/ValidationStatus.js');
-var Stepper = require('./stepper/Stepper.js');
 var Step = require('./stepper/Step.js');
-var Text = require('./text/Text.js');
+var Stepper = require('./stepper/Stepper.js');
+var Switch = require('./switch/Switch.js');
+var Tag = require('./tag/Tag.js');
 var Code = require('./text/Code.js');
 var Display = require('./text/Display.js');
 var Headings = require('./text/Headings.js');
 var Label = require('./text/Label.js');
+var Text = require('./text/Text.js');
 var TextAction = require('./text/TextAction.js');
 var TextNotation = require('./text/TextNotation.js');
 var Accent = require('./theme/Accent.js');
 var ActionFont = require('./theme/ActionFont.js');
+var Corner = require('./theme/Corner.js');
 var Density = require('./theme/Density.js');
 var HeadingFont = require('./theme/HeadingFont.js');
-var Theme = require('./theme/Theme.js');
 var Mode = require('./theme/Mode.js');
-var Corner = require('./theme/Corner.js');
+var Theme = require('./theme/Theme.js');
 var Toast = require('./toast/Toast.js');
 var ToastContent = require('./toast/ToastContent.js');
-var SaltProvider = require('./salt-provider/SaltProvider.js');
-var Slider = require('./slider/Slider.js');
-var RangeSlider = require('./slider/RangeSlider.js');
-var SplitLayout = require('./split-layout/SplitLayout.js');
-var Switch = require('./switch/Switch.js');
-var Tag = require('./tag/Tag.js');
 var ToggleButton = require('./toggle-button/ToggleButton.js');
 var ToggleButtonGroup = require('./toggle-button-group/ToggleButtonGroup.js');
 var ToggleButtonGroupContext = require('./toggle-button-group/ToggleButtonGroupContext.js');
@@ -125,36 +126,35 @@ var capitalize = require('./utils/capitalize.js');
 var createChainedFunction = require('./utils/createChainedFunction.js');
 var createContext = require('./utils/createContext.js');
 var debounce = require('./utils/debounce.js');
+var getRefFromChildren = require('./utils/getRefFromChildren.js');
 var makePrefixer = require('./utils/makePrefixer.js');
 var marginMiddleware = require('./utils/marginMiddleware.js');
+var mergeProps = require('./utils/mergeProps.js');
 var ownerDocument = require('./utils/ownerDocument.js');
 var ownerWindow = require('./utils/ownerWindow.js');
 var renderProps = require('./utils/renderProps.js');
 var setRef = require('./utils/setRef.js');
 var useControlled = require('./utils/useControlled.js');
+var useEventCallback = require('./utils/useEventCallback.js');
 var useFloatingUI = require('./utils/useFloatingUI/useFloatingUI.js');
 var useForkRef = require('./utils/useForkRef.js');
 var useId = require('./utils/useId.js');
 var useIsFocusVisible = require('./utils/useIsFocusVisible.js');
 var useIsomorphicLayoutEffect = require('./utils/useIsomorphicLayoutEffect.js');
 var usePrevious = require('./utils/usePrevious.js');
+var useResizeObserver = require('./utils/useResizeObserver.js');
 var useResponsiveProp = require('./utils/useResponsiveProp.js');
-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');
-var SemanticIconProvider = require('./semantic-icon-provider/SemanticIconProvider.js');
 
 
 
-exports.AccordionGroup = AccordionGroup.AccordionGroup;
-exports.AccordionPanel = AccordionPanel.AccordionPanel;
 exports.Accordion = Accordion.Accordion;
+exports.AccordionGroup = AccordionGroup.AccordionGroup;
 exports.AccordionHeader = AccordionHeader.AccordionHeader;
-exports.AriaAnnouncerContext = AriaAnnouncerContext.AriaAnnouncerContext;
+exports.AccordionPanel = AccordionPanel.AccordionPanel;
 exports.AriaAnnounce = AriaAnnounce.AriaAnnounce;
+exports.AriaAnnouncerContext = AriaAnnouncerContext.AriaAnnouncerContext;
 exports.ARIA_ANNOUNCE_DELAY = AriaAnnouncerProvider.ARIA_ANNOUNCE_DELAY;
 exports.AriaAnnouncerProvider = AriaAnnouncerProvider.AriaAnnouncerProvider;
 exports.useAriaAnnouncer = useAriaAnnouncer.useAriaAnnouncer;
@@ -167,8 +167,8 @@ exports.BannerContent = BannerContent.BannerContent;
 exports.BORDER_POSITION = BorderItem.BORDER_POSITION;
 exports.BorderItem = BorderItem.BorderItem;
 exports.BorderLayout = BorderLayout.BorderLayout;
-exports.DEFAULT_BREAKPOINTS = Breakpoints.DEFAULT_BREAKPOINTS;
 exports.useBreakpoint = BreakpointProvider.useBreakpoint;
+exports.DEFAULT_BREAKPOINTS = Breakpoints.DEFAULT_BREAKPOINTS;
 exports.Button = Button.Button;
 exports.ButtonAppearanceValues = Button.ButtonAppearanceValues;
 exports.ButtonSentimentValues = Button.ButtonSentimentValues;
@@ -181,12 +181,12 @@ exports.CheckboxIcon = CheckboxIcon.CheckboxIcon;
 exports.ComboBox = ComboBox.ComboBox;
 exports.ConditionalScrimWrapper = Dialog.ConditionalScrimWrapper;
 exports.Dialog = Dialog.Dialog;
-exports.DialogHeader = DialogHeader.DialogHeader;
 exports.DialogActions = DialogActions.DialogActions;
+exports.DialogCloseButton = DialogCloseButton.DialogCloseButton;
 exports.DialogContent = DialogContent.DialogContent;
 exports.DialogContext = DialogContext.DialogContext;
 exports.useDialogContext = DialogContext.useDialogContext;
-exports.DialogCloseButton = DialogCloseButton.DialogCloseButton;
+exports.DialogHeader = DialogHeader.DialogHeader;
 exports.Divider = Divider.Divider;
 exports.Drawer = Drawer.Drawer;
 exports.DrawerCloseButton = DrawerCloseButton.DrawerCloseButton;
@@ -218,25 +218,25 @@ exports.LinkCard = LinkCard.LinkCard;
 exports.ListBox = ListBox.ListBox;
 exports.useListControlContext = ListControlContext.useListControlContext;
 exports.Menu = Menu.Menu;
+exports.MenuGroup = MenuGroup.MenuGroup;
 exports.MenuItem = MenuItem.MenuItem;
 exports.MenuPanel = MenuPanel.MenuPanel;
 exports.MenuTrigger = MenuTrigger.MenuTrigger;
-exports.MenuGroup = MenuGroup.MenuGroup;
 exports.MultilineInput = MultilineInput.MultilineInput;
 exports.NavigationItem = NavigationItem.NavigationItem;
 exports.Option = Option.Option;
 exports.OptionGroup = OptionGroup.OptionGroup;
 exports.Overlay = Overlay.Overlay;
-exports.OverlayTrigger = OverlayTrigger.OverlayTrigger;
-exports.OverlayPanel = OverlayPanel.OverlayPanel;
 exports.OverlayHeader = OverlayHeader.OverlayHeader;
+exports.OverlayPanel = OverlayPanel.OverlayPanel;
 exports.OverlayPanelCloseButton = OverlayPanelCloseButton.OverlayPanelCloseButton;
 exports.OverlayPanelContent = OverlayPanelContent.OverlayPanelContent;
-exports.Pagination = Pagination.Pagination;
-exports.Paginator = Paginator.Paginator;
+exports.OverlayTrigger = OverlayTrigger.OverlayTrigger;
 exports.CompactInput = CompactInput.CompactInput;
 exports.CompactPaginator = CompactPaginator.CompactPaginator;
 exports.GoToInput = GoToInput.GoToInput;
+exports.Pagination = Pagination.Pagination;
+exports.Paginator = Paginator.Paginator;
 exports.Panel = Panel.Panel;
 exports.ParentChildLayout = ParentChildLayout.ParentChildLayout;
 exports.Pill = Pill.Pill;
@@ -245,18 +245,34 @@ exports.LinearProgress = LinearProgress.LinearProgress;
 exports.RadioButton = RadioButton.RadioButton;
 exports.RadioButtonGroup = RadioButtonGroup.RadioButtonGroup;
 exports.RadioButtonIcon = RadioButtonIcon.RadioButtonIcon;
+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;
+exports.useDensity = SaltProvider.useDensity;
+exports.useTheme = SaltProvider.useTheme;
 exports.Scrim = Scrim.Scrim;
 exports.SegmentedButtonGroup = SegmentedButtonGroup.SegmentedButtonGroup;
+exports.SemanticIconProvider = SemanticIconProvider.SemanticIconProvider;
+exports.useIcon = SemanticIconProvider.useIcon;
 exports.SkipLink = SkipLink.SkipLink;
+exports.RangeSlider = RangeSlider.RangeSlider;
+exports.Slider = Slider.Slider;
 exports.Spinner = Spinner.Spinner;
 exports.SpinnerSizeValues = Spinner.SpinnerSizeValues;
+exports.SplitLayout = SplitLayout.SplitLayout;
 exports.StackLayout = StackLayout.StackLayout;
 exports.StatusAdornment = StatusAdornment.StatusAdornment;
 exports.StatusIndicator = StatusIndicator.StatusIndicator;
 exports.VALIDATION_NAMED_STATUS = ValidationStatus.VALIDATION_NAMED_STATUS;
-exports.Stepper = Stepper.Stepper;
 exports.Step = Step.Step;
-exports.Text = Text.Text;
+exports.Stepper = Stepper.Stepper;
+exports.Switch = Switch.Switch;
+exports.Tag = Tag.Tag;
 exports.Code = Code.Code;
 exports.Display1 = Display.Display1;
 exports.Display2 = Display.Display2;
@@ -267,36 +283,22 @@ exports.H2 = Headings.H2;
 exports.H3 = Headings.H3;
 exports.H4 = Headings.H4;
 exports.Label = Label.Label;
+exports.Text = Text.Text;
 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.CornerValues = Corner.CornerValues;
+exports.UNSTABLE_CornerValues = Corner.UNSTABLE_CornerValues;
 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.getCharacteristicValue = Theme.getCharacteristicValue;
 exports.Toast = Toast.Toast;
 exports.ToastContent = ToastContent.ToastContent;
-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;
-exports.useDensity = SaltProvider.useDensity;
-exports.useTheme = SaltProvider.useTheme;
-exports.Slider = Slider.Slider;
-exports.RangeSlider = RangeSlider.RangeSlider;
-exports.SplitLayout = SplitLayout.SplitLayout;
-exports.Switch = Switch.Switch;
-exports.Tag = Tag.Tag;
 exports.ToggleButton = ToggleButton.ToggleButton;
 exports.ToggleButtonGroup = ToggleButtonGroup.ToggleButtonGroup;
 exports.useToggleButtonGroup = ToggleButtonGroupContext.useToggleButtonGroup;
@@ -306,13 +308,16 @@ exports.capitalize = capitalize.capitalize;
 exports.createChainedFunction = createChainedFunction.createChainedFunction;
 exports.createContext = createContext.createContext;
 exports.debounce = debounce.debounce;
+exports.getRefFromChildren = getRefFromChildren.getRefFromChildren;
 exports.makePrefixer = makePrefixer.makePrefixer;
 exports.margin = marginMiddleware.margin;
+exports.mergeProps = mergeProps.mergeProps;
 exports.ownerDocument = ownerDocument.ownerDocument;
 exports.ownerWindow = ownerWindow.ownerWindow;
 exports.renderProps = renderProps.renderProps;
 exports.setRef = setRef.setRef;
 exports.useControlled = useControlled.useControlled;
+exports.useEventCallback = useEventCallback.useEventCallback;
 exports.DEFAULT_FLOATING_UI_MIDDLEWARE = useFloatingUI.DEFAULT_FLOATING_UI_MIDDLEWARE;
 exports.FloatingComponentProvider = useFloatingUI.FloatingComponentProvider;
 exports.FloatingPlatformProvider = useFloatingUI.FloatingPlatformProvider;
@@ -326,19 +331,14 @@ exports.teardown = useIsFocusVisible.teardown;
 exports.useIsFocusVisible = useIsFocusVisible.useIsFocusVisible;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
 exports.usePrevious = usePrevious.usePrevious;
+exports.useResizeObserver = useResizeObserver.useResizeObserver;
 exports.getCurrentBreakpoint = useResponsiveProp.getCurrentBreakpoint;
 exports.resolveResponsiveValue = useResponsiveProp.resolveResponsiveValue;
 exports.useCurrentBreakpoint = useResponsiveProp.useCurrentBreakpoint;
 exports.useOrderedBreakpoints = useResponsiveProp.useOrderedBreakpoints;
 exports.useResponsiveProp = useResponsiveProp.useResponsiveProp;
-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;
-exports.SemanticIconProvider = SemanticIconProvider.SemanticIconProvider;
-exports.useIcon = SemanticIconProvider.useIcon;
 //# sourceMappingURL=index.js.map

package/dist-cjs/input/Input.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Style applied to the root element */\n.saltInput {\n  align-items: center;\n  background: var(--saltInput-background, var(--input-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  height: var(--saltInput-height, var(--salt-size-base));\n  min-height: var(--saltInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltInput-minWidth, 4em);\n  padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.saltInput:hover {\n  background: var(--saltInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied if `bordered={true}` */\n.saltInput-bordered.saltInput {\n  border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--input-borderColor);\n}\n\n.saltInput-bordered.saltInput:hover {\n  border-style: var(--salt-editable-borderStyle-hover);\n  border-color: var(--input-borderColor-hover);\n}\n\n.saltInput-bordered.saltInput-focused,\n.saltInput-bordered.saltInput-focused:hover {\n  border-style: var(--salt-editable-borderStyle-active);\n  border-color: var(--input-borderColor-active);\n}\n\n.saltInput-bordered.saltInput-readOnly,\n.saltInput-bordered.saltInput-readOnly:hover {\n  border-style: var(--salt-editable-borderStyle-readonly);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltInput-bordered.saltInput-disabled,\n.saltInput-bordered.saltInput-disabled:hover {\n  border-style: var(--salt-editable-borderStyle-disabled);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--input-borderColor);\n}\n\n.saltInput:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-hover);\n  border-bottom-color: var(--input-borderColor-hover);\n}\n\n.saltInput-focused .saltInput-activationIndicator,\n.saltInput-focused:hover .saltInput-activationIndicator {\n  border-bottom: var(--salt-size-border-strong) var(--salt-editable-borderStyle-active) var(--input-borderColor-active);\n}\n\n.saltInput-readOnly .saltInput-activationIndicator,\n.saltInput-readOnly:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-readonly);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltInput-disabled .saltInput-activationIndicator,\n.saltInput-disabled:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-disabled);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltInput-bordered .saltInput-activationIndicator,\n.saltInput-bordered.saltInput-readOnly .saltInput-activationIndicator,\n.saltInput-bordered.saltInput-disabled:hover .saltInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltInput-bordered.saltInput-focused .saltInput-activationIndicator {\n  border-bottom-width: calc(var(--salt-size-border-strong) - var(--salt-size-border));\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-background-readonly: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-borderColor-active: var(--salt-status-error-borderColor);\n  --input-borderColor-hover: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-background-readonly: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-borderColor-active: var(--salt-status-warning-borderColor);\n  --input-borderColor-hover: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-background-readonly: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-borderColor-active: var(--salt-status-success-borderColor);\n  --input-borderColor-hover: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltInput-focused,\n.saltInput-focused:hover {\n  background: var(--saltInput-background-active, var(--input-background-active));\n  cursor: var(--salt-editable-cursor-active);\n  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n  background: var(--input-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover {\n  background: var(--input-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--input-textAlign, left);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n  background: none;\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltInput {\n  align-items: center;\n  background: var(--saltInput-background, var(--input-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  height: var(--saltInput-height, var(--salt-size-base));\n  min-height: var(--saltInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltInput-minWidth, 4em);\n  padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.saltInput:hover {\n  background: var(--saltInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltInput-bordered.saltInput {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltInput-bordered.saltInput:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--input-borderColor-hover);\n}\n\n.saltInput-bordered.saltInput-focused,\n.saltInput-bordered.saltInput-focused:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--input-borderColor-active);\n}\n\n.saltInput-bordered.saltInput-readOnly,\n.saltInput-bordered.saltInput-readOnly:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltInput-bordered.saltInput-disabled,\n.saltInput-bordered.saltInput-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltInput:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--input-borderColor-hover);\n}\n\n.saltInput-focused .saltInput-activationIndicator,\n.saltInput-focused:hover .saltInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--input-borderColor-active);\n}\n\n.saltInput-readOnly .saltInput-activationIndicator,\n.saltInput-readOnly:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltInput-disabled .saltInput-activationIndicator,\n.saltInput-disabled:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltInput-bordered .saltInput-activationIndicator,\n.saltInput-bordered.saltInput-readOnly .saltInput-activationIndicator,\n.saltInput-bordered.saltInput-disabled:hover .saltInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltInput-bordered.saltInput-focused .saltInput-activationIndicator {\n  /* Activation indicator width minus the border from the input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-background-readonly: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-borderColor-active: var(--salt-status-error-borderColor);\n  --input-borderColor-hover: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-background-readonly: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-borderColor-active: var(--salt-status-warning-borderColor);\n  --input-borderColor-hover: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-background-readonly: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-borderColor-active: var(--salt-status-success-borderColor);\n  --input-borderColor-hover: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltInput-focused,\n.saltInput-focused:hover {\n  background: var(--saltInput-background-active, var(--input-background-active));\n  cursor: var(--salt-cursor-text);\n  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n  background: var(--input-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover {\n  background: var(--input-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--input-textAlign, left);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n  background: none;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Input.css.js.map