@salt-ds/lab 1.0.0-alpha.10 → 1.0.0-alpha.101

package/dist-cjs/responsive/useWidth.js

@@ -1,16 +1,14 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
 var core = require('@salt-ds/core');
+var react = require('react');
 var useResizeObserver = require('./useResizeObserver.js');
 
 const NONE = [];
 function useWidth(responsive) {
-  const [width, setWidth] = React.useState();
-  const ref = React.useRef(null);
-  const handleResize = React.useCallback(({ width: newWidth }) => {
+  const [width, setWidth] = react.useState();
+  const ref = react.useRef(null);
+  const handleResize = react.useCallback(({ width: newWidth }) => {
     setWidth(newWidth);
   }, []);
   const measurementsToObserve = responsive ? useResizeObserver.WidthOnly : NONE;
@@ -20,7 +18,7 @@ function useWidth(responsive) {
       return void 0;
     }
     handleResize(ref.current.getBoundingClientRect());
-  }, [handleResize, responsive]);
+  }, [handleResize]);
   return [ref, width];
 }
 

package/dist-cjs/responsive/useWidth.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWidth.js","sources":["../src/responsive/useWidth.ts"],"sourcesContent":["import { RefObject, useCallback, useRef, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  ResizeHandler,\n  useResizeObserver,\n  WidthOnly,\n} from \"./useResizeObserver\";\n\nconst NONE: string[] = [];\n\nexport function useWidth<Element extends HTMLElement>(\n  responsive: boolean\n): [RefObject<Element>, number] {\n  const [width, setWidth] = useState<number>();\n  const ref = useRef<HTMLElement>(null);\n\n  const handleResize: ResizeHandler = useCallback(({ width: newWidth }) => {\n    setWidth(newWidth);\n  }, []);\n\n  const measurementsToObserve = responsive ? WidthOnly : NONE;\n  useResizeObserver(ref, measurementsToObserve, handleResize);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return undefined;\n    }\n    handleResize(ref.current.getBoundingClientRect());\n  }, [handleResize, responsive]);\n\n  return [ref, width] as [RefObject<Element>, number];\n}\n"],"names":["useState","useRef","useCallback","WidthOnly","useResizeObserver","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;AAQA,MAAM,OAAiB,EAAC,CAAA;AAEjB,SAAS,SACd,UAC8B,EAAA;AAC9B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,cAAiB,EAAA,CAAA;AAC3C,EAAM,MAAA,GAAA,GAAMC,aAAoB,IAAI,CAAA,CAAA;AAEpC,EAAA,MAAM,eAA8BC,iBAAY,CAAA,CAAC,EAAE,KAAA,EAAO,UAAe,KAAA;AACvE,IAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AAAA,GACnB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,qBAAA,GAAwB,aAAaC,2BAAY,GAAA,IAAA,CAAA;AACvD,EAAkBC,mCAAA,CAAA,GAAA,EAAK,uBAAuB,YAAY,CAAA,CAAA;AAE1D,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,IAAI,OAAS,EAAA;AAChB,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AACA,IAAa,YAAA,CAAA,GAAA,CAAI,OAAQ,CAAA,qBAAA,EAAuB,CAAA,CAAA;AAAA,GAC/C,EAAA,CAAC,YAAc,EAAA,UAAU,CAAC,CAAA,CAAA;AAE7B,EAAO,OAAA,CAAC,KAAK,KAAK,CAAA,CAAA;AACpB;;;;"}
+{"version":3,"file":"useWidth.js","sources":["../src/responsive/useWidth.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { type RefObject, useCallback, useRef, useState } from \"react\";\nimport {\n  type ResizeHandler,\n  useResizeObserver,\n  WidthOnly,\n} from \"./useResizeObserver\";\n\nconst NONE: string[] = [];\n\nexport function useWidth<Element extends HTMLElement>(\n  responsive: boolean,\n): [RefObject<Element>, number] {\n  const [width, setWidth] = useState<number>();\n  const ref = useRef<HTMLElement>(null);\n\n  const handleResize: ResizeHandler = useCallback(({ width: newWidth }) => {\n    setWidth(newWidth);\n  }, []);\n\n  const measurementsToObserve = responsive ? WidthOnly : NONE;\n  useResizeObserver(ref, measurementsToObserve, handleResize);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return undefined;\n    }\n    handleResize(ref.current.getBoundingClientRect());\n  }, [handleResize]);\n\n  return [ref, width] as [RefObject<Element>, number];\n}\n"],"names":["useState","useRef","useCallback","WidthOnly","useResizeObserver","useIsomorphicLayoutEffect"],"mappings":";;;;;;AAQA,MAAM,OAAiB,EAAC;AAEjB,SAAS,SACd,UAAA,EAC8B;AAC9B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,cAAA,EAAiB;AAC3C,EAAA,MAAM,GAAA,GAAMC,aAAoB,IAAI,CAAA;AAEpC,EAAA,MAAM,eAA8BC,iBAAA,CAAY,CAAC,EAAE,KAAA,EAAO,UAAS,KAAM;AACvE,IAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,EACnB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,qBAAA,GAAwB,aAAaC,2BAAA,GAAY,IAAA;AACvD,EAAAC,mCAAA,CAAkB,GAAA,EAAK,uBAAuB,YAAY,CAAA;AAE1D,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,IAAI,OAAA,EAAS;AAChB,MAAA,OAAO,MAAA;AAAA,IACT;AACA,IAAA,YAAA,CAAa,GAAA,CAAI,OAAA,CAAQ,qBAAA,EAAuB,CAAA;AAAA,EAClD,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAA,OAAO,CAAC,KAAK,KAAK,CAAA;AACpB;;;;"}

package/dist-cjs/responsive/utils.js

@@ -1,27 +1,19 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const COLLAPSIBLE = "data-collapsible";
 const RESPONSIVE_ATTRIBUTE = {
   [COLLAPSIBLE]: true,
   "data-pad-start": true,
   "data-pad-end": true
 };
-const isResponsiveAttribute = (propName) => {
-  var _a;
-  return (_a = RESPONSIVE_ATTRIBUTE[propName]) != null ? _a : false;
-};
+const isResponsiveAttribute = (propName) => RESPONSIVE_ATTRIBUTE[propName] ?? false;
 const isCollapsible = (propName) => propName === COLLAPSIBLE;
 const COLLAPSIBLE_VALUE = {
   dynamic: "dynamic",
   instant: "instant",
   true: "instant"
 };
-const collapsibleValue = (value) => {
-  var _a;
-  return (_a = COLLAPSIBLE_VALUE[value]) != null ? _a : "none";
-};
+const collapsibleValue = (value) => COLLAPSIBLE_VALUE[value] ?? "none";
 const liftResponsivePropsToFormField = (props) => {
   const propNames = Object.keys(props);
   if (propNames.some(isResponsiveAttribute)) {
@@ -38,9 +30,8 @@ const liftResponsivePropsToFormField = (props) => {
       },
       [{}, {}]
     );
-  } else {
-    return [{}, props];
   }
+  return [{}, props];
 };
 
 exports.isResponsiveAttribute = isResponsiveAttribute;

package/dist-cjs/responsive/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../src/responsive/utils.ts"],"sourcesContent":["const COLLAPSIBLE = \"data-collapsible\";\n\nexport type dataPadDirection = \"data-pad-start\" | \"data-pad-end\";\n\nconst RESPONSIVE_ATTRIBUTE: { [key: string]: boolean } = {\n  [COLLAPSIBLE]: true,\n  \"data-pad-start\": true,\n  \"data-pad-end\": true,\n};\n\nexport const isResponsiveAttribute = (propName: string): boolean =>\n  RESPONSIVE_ATTRIBUTE[propName] ?? false;\n\nconst isCollapsible = (propName: string) => propName === COLLAPSIBLE;\n\nconst COLLAPSIBLE_VALUE: { [key: string]: string } = {\n  dynamic: \"dynamic\",\n  instant: \"instant\",\n  true: \"instant\",\n};\n\nconst collapsibleValue = (value: string) => COLLAPSIBLE_VALUE[value] ?? \"none\";\n\ntype AnyProps = Record<string, unknown>;\ntype ResponsivePropsTuple = [AnyProps, AnyProps];\n/**\n * data- attributes can be used to manage item overflow behaviour. Users may\n * speficy these attributes directly on a Toolbar component, which ultimately\n * gets wrapped by a FormField. We need to 'lift' these attributes to the form\n * field and remove them from the props of the nested component.\n * @param props\n * @returns\n */\nexport const liftResponsivePropsToFormField = (\n  props: AnyProps\n): ResponsivePropsTuple => {\n  const propNames = Object.keys(props);\n  if (propNames.some(isResponsiveAttribute)) {\n    return propNames.reduce<ResponsivePropsTuple>(\n      (tuple, propName): ResponsivePropsTuple => {\n        const [toolbarProps, rest] = tuple;\n        const propValue = props[propName];\n        if (isResponsiveAttribute(propName)) {\n          const value = isCollapsible(propName)\n            ? collapsibleValue(propValue as string)\n            : propValue;\n\n          toolbarProps[propName] = value;\n          rest[propName] = undefined;\n        }\n        return tuple;\n      },\n      [{}, {}]\n    );\n  } else {\n    return [{}, props];\n  }\n};\n"],"names":[],"mappings":";;;;AAAA,MAAM,WAAc,GAAA,kBAAA,CAAA;AAIpB,MAAM,oBAAmD,GAAA;AAAA,EACvD,CAAC,WAAc,GAAA,IAAA;AAAA,EACf,gBAAkB,EAAA,IAAA;AAAA,EAClB,cAAgB,EAAA,IAAA;AAClB,CAAA,CAAA;AAEa,MAAA,qBAAA,GAAwB,CAAC,QAA2B,KAAA;AAVjE,EAAA,IAAA,EAAA,CAAA;AAWE,EAAA,OAAA,CAAA,EAAA,GAAA,oBAAA,CAAqB,cAArB,IAAkC,GAAA,EAAA,GAAA,KAAA,CAAA;AAAA,EAAA;AAEpC,MAAM,aAAA,GAAgB,CAAC,QAAA,KAAqB,QAAa,KAAA,WAAA,CAAA;AAEzD,MAAM,iBAA+C,GAAA;AAAA,EACnD,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA,SAAA;AACR,CAAA,CAAA;AAEA,MAAM,gBAAA,GAAmB,CAAC,KAAe,KAAA;AArBzC,EAAA,IAAA,EAAA,CAAA;AAqB4C,EAAA,OAAA,CAAA,EAAA,GAAA,iBAAA,CAAkB,WAAlB,IAA4B,GAAA,EAAA,GAAA,MAAA,CAAA;AAAA,CAAA,CAAA;AAY3D,MAAA,8BAAA,GAAiC,CAC5C,KACyB,KAAA;AACzB,EAAM,MAAA,SAAA,GAAY,MAAO,CAAA,IAAA,CAAK,KAAK,CAAA,CAAA;AACnC,EAAI,IAAA,SAAA,CAAU,IAAK,CAAA,qBAAqB,CAAG,EAAA;AACzC,IAAA,OAAO,SAAU,CAAA,MAAA;AAAA,MACf,CAAC,OAAO,QAAmC,KAAA;AACzC,QAAM,MAAA,CAAC,YAAc,EAAA,IAAI,CAAI,GAAA,KAAA,CAAA;AAC7B,QAAA,MAAM,YAAY,KAAM,CAAA,QAAA,CAAA,CAAA;AACxB,QAAI,IAAA,qBAAA,CAAsB,QAAQ,CAAG,EAAA;AACnC,UAAA,MAAM,QAAQ,aAAc,CAAA,QAAQ,CAChC,GAAA,gBAAA,CAAiB,SAAmB,CACpC,GAAA,SAAA,CAAA;AAEJ,UAAA,YAAA,CAAa,QAAY,CAAA,GAAA,KAAA,CAAA;AACzB,UAAA,IAAA,CAAK,QAAY,CAAA,GAAA,KAAA,CAAA,CAAA;AAAA,SACnB;AACA,QAAO,OAAA,KAAA,CAAA;AAAA,OACT;AAAA,MACA,CAAC,EAAI,EAAA,EAAE,CAAA;AAAA,KACT,CAAA;AAAA,GACK,MAAA;AACL,IAAO,OAAA,CAAC,EAAC,EAAG,KAAK,CAAA,CAAA;AAAA,GACnB;AACF;;;;;"}
+{"version":3,"file":"utils.js","sources":["../src/responsive/utils.ts"],"sourcesContent":["const COLLAPSIBLE = \"data-collapsible\";\n\nexport type dataPadDirection = \"data-pad-start\" | \"data-pad-end\";\n\nconst RESPONSIVE_ATTRIBUTE: { [key: string]: boolean } = {\n  [COLLAPSIBLE]: true,\n  \"data-pad-start\": true,\n  \"data-pad-end\": true,\n};\n\nexport const isResponsiveAttribute = (propName: string): boolean =>\n  RESPONSIVE_ATTRIBUTE[propName] ?? false;\n\nconst isCollapsible = (propName: string) => propName === COLLAPSIBLE;\n\nconst COLLAPSIBLE_VALUE: { [key: string]: string } = {\n  dynamic: \"dynamic\",\n  instant: \"instant\",\n  true: \"instant\",\n};\n\nconst collapsibleValue = (value: string) => COLLAPSIBLE_VALUE[value] ?? \"none\";\n\ntype AnyProps = Record<string, unknown>;\ntype ResponsivePropsTuple = [AnyProps, AnyProps];\n/**\n * data- attributes can be used to manage item overflow behaviour. Users may\n * speficy these attributes directly on a Toolbar component, which ultimately\n * gets wrapped by a FormField. We need to 'lift' these attributes to the form\n * field and remove them from the props of the nested component.\n * @param props\n * @returns\n */\nexport const liftResponsivePropsToFormField = (\n  props: AnyProps,\n): ResponsivePropsTuple => {\n  const propNames = Object.keys(props);\n  if (propNames.some(isResponsiveAttribute)) {\n    return propNames.reduce<ResponsivePropsTuple>(\n      (tuple, propName): ResponsivePropsTuple => {\n        const [toolbarProps, rest] = tuple;\n        const propValue = props[propName];\n        if (isResponsiveAttribute(propName)) {\n          const value = isCollapsible(propName)\n            ? collapsibleValue(propValue as string)\n            : propValue;\n\n          toolbarProps[propName] = value;\n          rest[propName] = undefined;\n        }\n        return tuple;\n      },\n      [{}, {}],\n    );\n  }\n  return [{}, props];\n};\n"],"names":[],"mappings":";;AAAA,MAAM,WAAA,GAAc,kBAAA;AAIpB,MAAM,oBAAA,GAAmD;AAAA,EACvD,CAAC,WAAW,GAAG,IAAA;AAAA,EACf,gBAAA,EAAkB,IAAA;AAAA,EAClB,cAAA,EAAgB;AAClB,CAAA;AAEO,MAAM,qBAAA,GAAwB,CAAC,QAAA,KACpC,oBAAA,CAAqB,QAAQ,CAAA,IAAK;AAEpC,MAAM,aAAA,GAAgB,CAAC,QAAA,KAAqB,QAAA,KAAa,WAAA;AAEzD,MAAM,iBAAA,GAA+C;AAAA,EACnD,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,IAAA,EAAM;AACR,CAAA;AAEA,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAkB,iBAAA,CAAkB,KAAK,CAAA,IAAK,MAAA;AAYjE,MAAM,8BAAA,GAAiC,CAC5C,KAAA,KACyB;AACzB,EAAA,MAAM,SAAA,GAAY,MAAA,CAAO,IAAA,CAAK,KAAK,CAAA;AACnC,EAAA,IAAI,SAAA,CAAU,IAAA,CAAK,qBAAqB,CAAA,EAAG;AACzC,IAAA,OAAO,SAAA,CAAU,MAAA;AAAA,MACf,CAAC,OAAO,QAAA,KAAmC;AACzC,QAAA,MAAM,CAAC,YAAA,EAAc,IAAI,CAAA,GAAI,KAAA;AAC7B,QAAA,MAAM,SAAA,GAAY,MAAM,QAAQ,CAAA;AAChC,QAAA,IAAI,qBAAA,CAAsB,QAAQ,CAAA,EAAG;AACnC,UAAA,MAAM,QAAQ,aAAA,CAAc,QAAQ,CAAA,GAChC,gBAAA,CAAiB,SAAmB,CAAA,GACpC,SAAA;AAEJ,UAAA,YAAA,CAAa,QAAQ,CAAA,GAAI,KAAA;AACzB,UAAA,IAAA,CAAK,QAAQ,CAAA,GAAI,MAAA;AAAA,QACnB;AACA,QAAA,OAAO,KAAA;AAAA,MACT,CAAA;AAAA,MACA,CAAC,EAAC,EAAG,EAAE;AAAA,KACT;AAAA,EACF;AACA,EAAA,OAAO,CAAC,EAAC,EAAG,KAAK,CAAA;AACnB;;;;;"}

package/dist-cjs/search-input/SearchInput.js

@@ -1,20 +1,18 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
 var core = require('@salt-ds/core');
-var InputLegacy = require('../input-legacy/InputLegacy.js');
-var StaticInputAdornment = require('../input-legacy/StaticInputAdornment.js');
 var icons = require('@salt-ds/icons');
-var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var InputLegacy = require('../input-legacy/InputLegacy.js');
+var StaticInputAdornment = require('../input-legacy/StaticInputAdornment.js');
 var SearchInput$1 = require('./SearchInput.css.js');
 
 const baseName = "saltSearchInput";
-const SearchInput = React.forwardRef(
+const SearchInput = react.forwardRef(
   function SearchInput2({
     IconComponent = icons.SearchIcon,
     className,
@@ -32,7 +30,8 @@ const SearchInput = React.forwardRef(
       css: SearchInput$1,
       window: targetWindow
     });
-    const inputRef = React.useRef(null);
+    const { CloseIcon } = core.useIcon();
+    const inputRef = react.useRef(null);
     const handleRef = core.useForkRef(inputRef, ref);
     const [value, setValue, isControlled] = core.useControlled({
       controlled: valueProp,
@@ -59,28 +58,33 @@ const SearchInput = React.forwardRef(
       }
       onKeyUp == null ? void 0 : onKeyUp(event);
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(InputLegacy.InputLegacy, {
-      className: clsx.clsx(baseName, className),
-      ref: handleRef,
-      endAdornment: !!value && /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-        className: clsx.clsx(`${baseName}-clearButton`),
-        onClick: handleClear,
-        variant: "secondary",
-        children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {
-          "aria-label": "clear input",
-          className: `${baseName}-clearIcon`
-        })
-      }),
-      onChange: handleChange,
-      onKeyUp: handleKeyUp,
-      startAdornment: IconComponent && /* @__PURE__ */ jsxRuntime.jsx(StaticInputAdornment.StaticInputAdornment, {
-        children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {
-          className: `${baseName}-icon`
-        })
-      }),
-      value: value || "",
-      ...other
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      InputLegacy.InputLegacy,
+      {
+        className: clsx.clsx(baseName, className),
+        ref: handleRef,
+        endAdornment: !!value && /* @__PURE__ */ jsxRuntime.jsx(
+          core.Button,
+          {
+            className: clsx.clsx(`${baseName}-clearButton`),
+            onClick: handleClear,
+            variant: "secondary",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              CloseIcon,
+              {
+                "aria-label": "clear input",
+                className: `${baseName}-clearIcon`
+              }
+            )
+          }
+        ),
+        onChange: handleChange,
+        onKeyUp: handleKeyUp,
+        startAdornment: IconComponent && /* @__PURE__ */ jsxRuntime.jsx(StaticInputAdornment.StaticInputAdornment, { children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: `${baseName}-icon` }) }),
+        value: value || "",
+        ...other
+      }
+    );
   }
 );
 

package/dist-cjs/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../src/search-input/SearchInput.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  ComponentType,\n  forwardRef,\n  KeyboardEvent,\n  SyntheticEvent,\n  useRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { Button, useControlled, useForkRef } from \"@salt-ds/core\";\nimport {\n  InputLegacy as Input,\n  InputLegacyProps as InputProps,\n  StaticInputAdornment,\n} from \"../input-legacy\";\nimport { CloseIcon, SearchIcon } from \"@salt-ds/icons\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport searchInputCss from \"./SearchInput.css\";\n\nconst baseName = \"saltSearchInput\";\n\n//TODO formfield integration\n\nexport interface SearchInputProps extends Omit<InputProps, \"onSubmit\"> {\n  /**\n   * Override \"search\" icon.\n   * Set to `null` to hide.\n   */\n  IconComponent?: ComponentType<any> | null;\n  /**\n   * Callback for when clear button is clicked.\n   */\n  onClear?: () => void;\n  /**\n   * Callback for change event.\n   * Event is either an Input change event or a Button click event.\n   */\n  onChange?: (event: SyntheticEvent<unknown>, value: string) => void;\n  /**\n   * Callback to trigger search.\n   */\n  onSubmit?: (value: InputProps[\"value\"]) => void;\n}\n\nexport const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      IconComponent = SearchIcon,\n      className,\n      onChange,\n      onClear,\n      onKeyUp,\n      onSubmit,\n      value: valueProp,\n      defaultValue,\n      ...other\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-search-input\",\n      css: searchInputCss,\n      window: targetWindow,\n    });\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(inputRef, ref);\n\n    const [value, setValue, isControlled] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"SearchInput\",\n      state: \"value\",\n    });\n\n    const handleChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      newValue: string\n    ) => {\n      setValue(newValue);\n      onChange?.(event, newValue);\n    };\n\n    const handleClear = (event: SyntheticEvent<HTMLButtonElement>) => {\n      setValue(\"\");\n      if (!isControlled) {\n        onChange?.(event, \"\");\n      }\n      onClear?.();\n      inputRef.current?.focus();\n    };\n\n    const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === \"Enter\" && onSubmit && value) {\n        onSubmit?.(value);\n      }\n\n      onKeyUp?.(event);\n    };\n\n    return (\n      <Input\n        className={clsx(baseName, className)}\n        ref={handleRef}\n        endAdornment={\n          !!value && (\n            <Button\n              className={clsx(`${baseName}-clearButton`)}\n              onClick={handleClear}\n              variant=\"secondary\"\n            >\n              <CloseIcon\n                aria-label=\"clear input\"\n                className={`${baseName}-clearIcon`}\n              />\n            </Button>\n          )\n        }\n        onChange={handleChange}\n        onKeyUp={handleKeyUp}\n        startAdornment={\n          IconComponent && (\n            <StaticInputAdornment>\n              <IconComponent className={`${baseName}-icon`} />\n            </StaticInputAdornment>\n          )\n        }\n        value={value || \"\"}\n        {...other}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","SearchInput","SearchIcon","useWindow","useComponentCssInjection","searchInputCss","useRef","useForkRef","useControlled","jsx","Input","clsx","Button","CloseIcon","StaticInputAdornment"],"mappings":"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"}
+{"version":3,"file":"SearchInput.js","sources":["../src/search-input/SearchInput.tsx"],"sourcesContent":["import { Button, useControlled, useForkRef, useIcon } from \"@salt-ds/core\";\nimport { SearchIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentType,\n  forwardRef,\n  type KeyboardEvent,\n  type SyntheticEvent,\n  useRef,\n} from \"react\";\nimport {\n  InputLegacy as Input,\n  type InputLegacyProps as InputProps,\n  StaticInputAdornment,\n} from \"../input-legacy\";\n\nimport searchInputCss from \"./SearchInput.css\";\n\nconst baseName = \"saltSearchInput\";\n\n//TODO formfield integration\n\nexport interface SearchInputProps extends Omit<InputProps, \"onSubmit\"> {\n  /**\n   * Override \"search\" icon.\n   * Set to `null` to hide.\n   */\n  IconComponent?: ComponentType | null;\n  /**\n   * Callback for when clear button is clicked.\n   */\n  onClear?: () => void;\n  /**\n   * Callback for change event.\n   * Event is either an Input change event or a Button click event.\n   */\n  onChange?: (event: SyntheticEvent<unknown>, value: string) => void;\n  /**\n   * Callback to trigger search.\n   */\n  onSubmit?: (value: InputProps[\"value\"]) => void;\n}\n\nexport const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      IconComponent = SearchIcon,\n      className,\n      onChange,\n      onClear,\n      onKeyUp,\n      onSubmit,\n      value: valueProp,\n      defaultValue,\n      ...other\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-search-input\",\n      css: searchInputCss,\n      window: targetWindow,\n    });\n    const { CloseIcon } = useIcon();\n    const inputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(inputRef, ref);\n\n    const [value, setValue, isControlled] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"SearchInput\",\n      state: \"value\",\n    });\n\n    const handleChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      newValue: string,\n    ) => {\n      setValue(newValue);\n      onChange?.(event, newValue);\n    };\n\n    const handleClear = (event: SyntheticEvent<HTMLButtonElement>) => {\n      setValue(\"\");\n      if (!isControlled) {\n        onChange?.(event, \"\");\n      }\n      onClear?.();\n      inputRef.current?.focus();\n    };\n\n    const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === \"Enter\" && onSubmit && value) {\n        onSubmit?.(value);\n      }\n\n      onKeyUp?.(event);\n    };\n\n    return (\n      <Input\n        className={clsx(baseName, className)}\n        ref={handleRef}\n        endAdornment={\n          !!value && (\n            <Button\n              className={clsx(`${baseName}-clearButton`)}\n              onClick={handleClear}\n              variant=\"secondary\"\n            >\n              <CloseIcon\n                aria-label=\"clear input\"\n                className={`${baseName}-clearIcon`}\n              />\n            </Button>\n          )\n        }\n        onChange={handleChange}\n        onKeyUp={handleKeyUp}\n        startAdornment={\n          IconComponent && (\n            <StaticInputAdornment>\n              <IconComponent className={`${baseName}-icon`} />\n            </StaticInputAdornment>\n          )\n        }\n        value={value || \"\"}\n        {...other}\n      />\n    );\n  },\n);\n"],"names":["forwardRef","SearchInput","SearchIcon","useWindow","useComponentCssInjection","searchInputCss","useIcon","useRef","useForkRef","useControlled","jsx","Input","clsx","Button","StaticInputAdornment"],"mappings":"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"}

package/dist-cjs/static-list/StaticList.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltStaticList {\n  overflow-y: auto;\n  padding: 0;\n  margin: 0;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=StaticList.css.js.map

package/dist-cjs/static-list/StaticList.css.js.map

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

package/dist-cjs/static-list/StaticList.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var StaticList$1 = require('./StaticList.css.js');
+
+const withBaseName = core.makePrefixer("saltStaticList");
+const StaticList = react.forwardRef(
+  function StaticList2({ children, className, ...rest }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-static-list",
+      css: StaticList$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: clsx.clsx(withBaseName(), className), ref, ...rest, children });
+  }
+);
+
+exports.StaticList = StaticList;
+//# sourceMappingURL=StaticList.js.map

package/dist-cjs/static-list/StaticList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticList.js","sources":["../src/static-list/StaticList.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\n\nimport staticListCss from \"./StaticList.css\";\n\nconst withBaseName = makePrefixer(\"saltStaticList\");\n\nexport interface StaticListProps extends ComponentPropsWithoutRef<\"ul\"> {\n  /**\n   * The list items to be rendered within the StaticList.\n   */\n  children: ReactNode;\n}\n\nexport const StaticList = forwardRef<HTMLOListElement, StaticListProps>(\n  function StaticList({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-static-list\",\n      css: staticListCss,\n      window: targetWindow,\n    });\n\n    return (\n      <ol className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        {children}\n      </ol>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","StaticList","useWindow","useComponentCssInjection","staticListCss","jsx","clsx"],"mappings":";;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA;AAS3C,MAAM,UAAA,GAAaC,gBAAA;AAAA,EACxB,SAASC,YAAW,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AACzD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,YAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,IAAA,EAC3D,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/static-list/StaticListItem.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltStaticListItem {\n  list-style-type: none;\n  display: flex;\n  gap: var(--salt-spacing-100);\n  box-sizing: border-box;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n}\n\n.saltStaticListItem > .saltIcon {\n  /* Workaround to ensure the icon and button are aligned.*/\n  min-height: var(--salt-size-base);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=StaticListItem.css.js.map

package/dist-cjs/static-list/StaticListItem.css.js.map

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

package/dist-cjs/static-list/StaticListItem.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var StaticListItem$1 = require('./StaticListItem.css.js');
+
+const withBaseName = core.makePrefixer("saltStaticListItem");
+const StaticListItem = react.forwardRef(
+  function StaticListItem2(props, ref) {
+    const { className, children, ...restProps } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-static-list-item",
+      css: StaticListItem$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { className: clsx.clsx(withBaseName(), className), ref, ...restProps, children });
+  }
+);
+
+exports.StaticListItem = StaticListItem;
+//# sourceMappingURL=StaticListItem.js.map

package/dist-cjs/static-list/StaticListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticListItem.js","sources":["../src/static-list/StaticListItem.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport staticListItemCss from \"./StaticListItem.css\";\n\nconst withBaseName = makePrefixer(\"saltStaticListItem\");\n\nexport interface StaticListItemProps extends ComponentPropsWithoutRef<\"li\"> {}\n\nexport const StaticListItem = forwardRef<HTMLLIElement, StaticListItemProps>(\n  function StaticListItem(props, ref) {\n    const { className, children, ...restProps } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-static-list-item\",\n      css: staticListItemCss,\n      window: targetWindow,\n    });\n\n    return (\n      <li className={clsx(withBaseName(), className)} ref={ref} {...restProps}>\n        {children}\n      </li>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","StaticListItem","useWindow","useComponentCssInjection","staticListItemCss","jsx","clsx"],"mappings":";;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAI/C,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,WAAU,GAAI,KAAA;AAE9C,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,gBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,SAAA,EAC3D,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/static-list/StaticListItemContent.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltStaticListItemContent {\n  flex: 1 0;\n  margin: var(--salt-spacing-75) 0;\n  color: var(--salt-content-primary-foreground);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=StaticListItemContent.css.js.map

package/dist-cjs/static-list/StaticListItemContent.css.js.map

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

package/dist-cjs/static-list/StaticListItemContent.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var StaticListItemContent$1 = require('./StaticListItemContent.css.js');
+
+const withBaseName = core.makePrefixer("saltStaticListItemContent");
+const StaticListItemContent = react.forwardRef(function StaticListItemContent2({ children, className, ...restProps }, ref) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-static-list-item-content",
+    css: StaticListItemContent$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ...restProps, ref, children });
+});
+
+exports.StaticListItemContent = StaticListItemContent;
+//# sourceMappingURL=StaticListItemContent.js.map

package/dist-cjs/static-list/StaticListItemContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticListItemContent.js","sources":["../src/static-list/StaticListItemContent.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport staticListItemContent from \"./StaticListItemContent.css\";\n\nconst withBaseName = makePrefixer(\"saltStaticListItemContent\");\n\nexport interface StaticListItemContentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of Static List Item\n   */\n  children?: ReactNode;\n}\n\nexport const StaticListItemContent = forwardRef<\n  HTMLDivElement,\n  StaticListItemContentProps\n>(function StaticListItemContent({ children, className, ...restProps }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-static-list-item-content\",\n    css: staticListItemContent,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","StaticListItemContent","useWindow","useComponentCssInjection","staticListItemContent","jsx","clsx"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,2BAA2B,CAAA;AAUtD,MAAM,qBAAA,GAAwBC,gBAAA,CAGnC,SAASC,sBAAAA,CAAsB,EAAE,UAAU,SAAA,EAAW,GAAG,SAAA,EAAU,EAAG,GAAA,EAAK;AAC3E,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,+BAAA;AAAA,IACR,GAAA,EAAKC,uBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAI,GAAG,SAAA,EAAW,GAAA,EAC7D,QAAA,EACH,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/system-status/SystemStatus.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Styles applied to root component */\n.saltSystemStatus {\n  background: var(--saltSystemStatus-background, var(--systemStatus-background));\n  border-color: var(--saltSystemStatus-borderColor, var(--systemStatus-borderColor));\n  border-width: var(--saltSystemStatus-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltSystemStatus-borderStyle, var(--salt-borderStyle-solid));\n  box-sizing: border-box;\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltSystemStatus-padding, var(--salt-spacing-100) var(--salt-layout-page-margin));\n  width: 100%;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n/* Styles applied to icon */\n.saltSystemStatus-icon.saltIcon {\n  min-height: var(--salt-size-base);\n  --saltIcon-color: var(--salt-content-bold-foreground);\n}\n\n/* Styles applied when state = \"info\" */\n.saltSystemStatus-info {\n  --systemStatus-borderColor: var(--salt-status-info-bold-background);\n  --systemStatus-background: var(--salt-status-info-bold-background);\n}\n\n/* Styles applied when state = \"error\" */\n.saltSystemStatus-error {\n  --systemStatus-borderColor: var(--salt-status-error-bold-background);\n  --systemStatus-background: var(--salt-status-error-bold-background);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltSystemStatus-warning {\n  --systemStatus-borderColor: var(--salt-status-warning-bold-background);\n  --systemStatus-background: var(--salt-status-warning-bold-background);\n}\n\n/* Styles applied when state = \"success\" */\n.saltSystemStatus-success {\n  --systemStatus-borderColor: var(--salt-status-success-bold-background);\n  --systemStatus-background: var(--salt-status-success-bold-background);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=SystemStatus.css.js.map

package/dist-cjs/system-status/SystemStatus.css.js.map

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

package/dist-cjs/system-status/SystemStatus.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var SystemStatus$1 = require('./SystemStatus.css.js');
+
+const withBaseName = core.makePrefixer("saltSystemStatus");
+const SystemStatus = react.forwardRef(
+  function SystemStatus2({ children, className, status = "info", ...rest }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-system-status",
+      css: SystemStatus$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx.clsx(withBaseName(), withBaseName(status), className),
+        ref,
+        role: "status",
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.StatusIndicator, { status, className: withBaseName("icon") }),
+          children
+        ]
+      }
+    );
+  }
+);
+
+exports.SystemStatus = SystemStatus;
+//# sourceMappingURL=SystemStatus.js.map

package/dist-cjs/system-status/SystemStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemStatus.js","sources":["../src/system-status/SystemStatus.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  StatusIndicator,\n  type ValidationStatus,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\n\nimport systemStatusCss from \"./SystemStatus.css\";\n\nexport interface SystemStatusProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   *  A string to determine the current state of the SystemStatus. Defaults to `info`.\n   */\n  status?: ValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltSystemStatus\");\n\nexport const SystemStatus = forwardRef<HTMLDivElement, SystemStatusProps>(\n  function SystemStatus(\n    { children, className, status = \"info\", ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-system-status\",\n      css: systemStatusCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(withBaseName(), withBaseName(status), className)}\n        ref={ref}\n        role=\"status\"\n        {...rest}\n      >\n        <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","SystemStatus","useWindow","useComponentCssInjection","systemStatusCss","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAA,GAAeC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CACP,EAAE,QAAA,EAAU,SAAA,EAAW,SAAS,MAAA,EAAQ,GAAG,IAAA,EAAK,EAChD,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,cAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAWC,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,MAAM,GAAG,SAAS,CAAA;AAAA,QAC/D,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAACC,oBAAA,EAAA,EAAgB,MAAA,EAAgB,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAAA,UACjE;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/system-status/SystemStatusActions.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltSystemStatusActions {\n  margin-bottom: auto;\n  display: flex;\n  gap: var(--salt-spacing-100);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=SystemStatusActions.css.js.map

package/dist-cjs/system-status/SystemStatusActions.css.js.map

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

package/dist-cjs/system-status/SystemStatusActions.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var SystemStatusActions$1 = require('./SystemStatusActions.css.js');
+
+const withBaseName = core.makePrefixer("saltSystemStatusActions");
+const SystemStatusActions = react.forwardRef(function SystemStatusActions2(props, ref) {
+  const { className, ...rest } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-system-status-actions",
+    css: SystemStatusActions$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ...rest, ref });
+});
+
+exports.SystemStatusActions = SystemStatusActions;
+//# sourceMappingURL=SystemStatusActions.js.map

package/dist-cjs/system-status/SystemStatusActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemStatusActions.js","sources":["../src/system-status/SystemStatusActions.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport systemStatusActionsCss from \"./SystemStatusActions.css\";\n\nconst withBaseName = makePrefixer(\"saltSystemStatusActions\");\n\ninterface SystemStatusActionsProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of SystemStatusActions\n   */\n  children: ReactNode;\n}\n\nexport const SystemStatusActions = forwardRef<\n  HTMLDivElement,\n  SystemStatusActionsProps\n>(function SystemStatusActions(props, ref) {\n  const { className, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-system-status-actions\",\n    css: systemStatusActionsCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n  );\n});\n"],"names":["makePrefixer","forwardRef","SystemStatusActions","useWindow","useComponentCssInjection","systemStatusActionsCss","jsx","clsx"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,yBAAyB,CAAA;AASpD,MAAM,mBAAA,GAAsBC,gBAAA,CAGjC,SAASC,oBAAAA,CAAoB,OAAO,GAAA,EAAK;AACzC,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,4BAAA;AAAA,IACR,GAAA,EAAKC,qBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GAAA,EAAU,CAAA;AAEzE,CAAC;;;;"}

package/dist-cjs/system-status/SystemStatusContent.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Styles applied to SystemStatusContent */\n.saltSystemStatusContent {\n  flex: 1 0;\n  margin: var(--salt-spacing-75) 0;\n  color: var(--salt-content-bold-foreground);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=SystemStatusContent.css.js.map

package/dist-cjs/system-status/SystemStatusContent.css.js.map

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

package/dist-cjs/system-status/SystemStatusContent.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var SystemStatusContent$1 = require('./SystemStatusContent.css.js');
+
+const withBaseName = core.makePrefixer("saltSystemStatusContent");
+const SystemStatusContent = react.forwardRef(function SystemStatusContent2(props, ref) {
+  const { className, ...rest } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-system-status-content",
+    css: SystemStatusContent$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ...rest, ref });
+});
+
+exports.SystemStatusContent = SystemStatusContent;
+//# sourceMappingURL=SystemStatusContent.js.map

package/dist-cjs/system-status/SystemStatusContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemStatusContent.js","sources":["../src/system-status/SystemStatusContent.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport systemStatusContentCss from \"./SystemStatusContent.css\";\n\nconst withBaseName = makePrefixer(\"saltSystemStatusContent\");\n\ninterface SystemStatusContentProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of SystemStatusContent\n   */\n  children: ReactNode;\n}\n\nexport const SystemStatusContent = forwardRef<\n  HTMLDivElement,\n  SystemStatusContentProps\n>(function SystemStatusContent(props, ref) {\n  const { className, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-system-status-content\",\n    css: systemStatusContentCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n  );\n});\n"],"names":["makePrefixer","forwardRef","SystemStatusContent","useWindow","useComponentCssInjection","systemStatusContentCss","jsx","clsx"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,yBAAyB,CAAA;AASpD,MAAM,mBAAA,GAAsBC,gBAAA,CAGjC,SAASC,oBAAAA,CAAoB,OAAO,GAAA,EAAK;AACzC,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,4BAAA;AAAA,IACR,GAAA,EAAKC,qBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GAAA,EAAU,CAAA;AAEzE,CAAC;;;;"}

package/dist-cjs/tabs/Tab.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInputLegacy-minWidth: 4em;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background);\n  --tabs-tab-cursor: pointer;\n  --tabs-tab-spacing: var(--salt-size-unit);\n  --tabs-tab-position: relative;\n}\n\n.saltTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--saltTabs-tab-background, var(--tabs-tab-background));\n  border: none;\n  border-radius: 0;\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor));\n  display: var(--tabs-tabstrip-display);\n  height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height));\n  letter-spacing: var(--saltTabs-tab-letterSpacing, var(--tabs-tab-letterSpacing, 0));\n  min-width: var(--saltTabs-tab-minWidth, 40px);\n  outline: none;\n  position: var(--saltTabs-tab-position, var(--tabs-tab-position));\n  user-select: none;\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n.saltTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n}\n\n.saltTab:not(.saltTab-vertical) {\n  margin: 0 var(--tabs-tab-spacing) 0 0;\n}\n\n.saltTab[aria-selected=\"true\"] {\n  color: var(--salt-text-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n.saltTab-dragAway {\n  display: none;\n}\n\n/* main content aria of Tab */\n.saltTab-main {\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  outline: none;\n  padding: 0 var(--tabs-tab-spacing);\n  position: relative;\n}\n\n.saltTab-closeable .saltTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.saltTab .saltTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.saltTab-close-icon {\n  display: none;\n}\n\n.salt-density-touch .saltTab-close-icon,\n.salt-density-low .saltTab-close-icon {\n  display: block;\n}\n\n.salt-density-touch .saltTab-close-icon-small,\n.salt-density-low .saltTab-close-icon-small {\n  display: none;\n}\n\n.saltTab .saltTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--saltTabs-tab-top, var(--tabs-tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTab-vertical .saltTab-text {\n  text-align: var(--salt-text-textAlign);\n}\n\n.saltTab .saltTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.saltTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.saltTab-vertical.saltTab-editing:after {\n  right: 2px;\n  bottom: 0;\n}\n\n.saltTab-vertical .saltFocusVisible:not([aria-selected=\"true\"]):before {\n  left: auto;\n  height: auto;\n  top: 0;\n  width: 2px;\n}\n\n.saltTab.saltFocusVisible {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n.saltTab:before {\n  content: var(--tabs-tab-before-content, none);\n  background: var(--tabs-tab-before-background);\n  height: var(--tabs-tab-before-height);\n  inset: var(--tabs-tab-before-inset);\n  position: absolute;\n  width: var(--tabs-tab-before-width);\n  z-index: 1;\n}\n\n.saltTabstrip-draggingTab .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n/* Hover styling */\n.saltTab:not([aria-selected=\"true\"]).saltFocusVisible:before,\n.saltTab:hover:not([aria-selected=\"true\"]):before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n.saltTab:hover:not(.saltTab-closeHover) {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n";
+var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInputLegacy-minWidth: 4em;\n\n  --tabs-tab-background: transparent;\n  --tabs-tab-cursor: pointer;\n  --tabs-tab-spacing: var(--salt-size-unit);\n  --tabs-tab-position: relative;\n}\n\n.saltTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--saltTabs-tab-background, var(--tabs-tab-background));\n  border: none;\n  border-radius: 0;\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor));\n  display: var(--tabs-tabstrip-display);\n  height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height));\n  letter-spacing: var(--saltTabs-tab-letterSpacing, var(--tabs-tab-letterSpacing, 0));\n  min-width: var(--saltTabs-tab-minWidth, 40px);\n  outline: none;\n  position: var(--saltTabs-tab-position, var(--tabs-tab-position));\n  user-select: none;\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  /* Not specify line-height, otherwise tabs are misaligned */\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n.saltTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n}\n\n.saltTab:not(.saltTab-vertical) {\n  margin: 0 var(--tabs-tab-spacing) 0 0;\n}\n\n.saltTab[aria-selected=\"true\"] {\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltTab-dragAway {\n  display: none;\n}\n\n/* main content aria of Tab */\n.saltTab-main {\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  outline: none;\n  padding: 0 var(--tabs-tab-spacing);\n  position: relative;\n}\n\n.saltTab-closeable .saltTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.saltTab .saltTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.saltTab-close-icon {\n  display: block;\n}\n\n.saltTab .saltTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--saltTabs-tab-top, var(--tabs-tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTab-vertical .saltTab-text {\n  text-align: var(--salt-text-textAlign);\n}\n\n.saltTab .saltTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.saltTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.saltTab-vertical.saltTab-editing:after {\n  right: 2px;\n  bottom: 0;\n}\n\n.saltTab-vertical .saltFocusVisible:not([aria-selected=\"true\"]):before {\n  left: auto;\n  height: auto;\n  top: 0;\n  width: 2px;\n}\n\n.saltTab.saltFocusVisible {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-background-hover));\n}\n\n.saltTab:before {\n  content: var(--tabs-tab-before-content, none);\n  background: var(--tabs-tab-before-background);\n  height: var(--tabs-tab-before-height);\n  inset: var(--tabs-tab-before-inset);\n  position: absolute;\n  width: var(--tabs-tab-before-width);\n  z-index: 1;\n}\n\n.saltTabstrip-draggingTab .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n/* Hover styling */\n.saltTab:not([aria-selected=\"true\"]).saltFocusVisible:before,\n.saltTab:hover:not([aria-selected=\"true\"]):before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n.saltTab:hover:not(.saltTab-closeHover) {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-background-hover));\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Tab.css.js.map