@salt-ds/lab 1.0.0-alpha.53 → 1.0.0-alpha.55

package/dist-cjs/color-chooser/Swatch.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var styles = require('@salt-ds/styles');
@@ -46,22 +44,25 @@ const Swatch = ({
     const backgroundColor = Color.Color.makeColorFromHex(color);
     return backgroundColor == null ? void 0 : backgroundColor.setAlpha(alpha).hex;
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    "data-testid": `swatch-${color}`,
-    style: {
-      background: getBackgroundColor()
-    },
-    className: clsx.clsx({
-      [withBaseName("active")]: active,
-      [withBaseName("transparent")]: transparent,
-      [withBaseName("graySwatch")]: isBlackOrgray(color),
-      [withBaseName("whiteSwatch")]: isWhite(color),
-      [withBaseName("swatch")]: !isWhite(color) && !isBlackOrgray(color)
-    }),
-    onClick: handleClick,
-    tabIndex: 0,
-    onKeyDown: handleKeyDown
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-testid": `swatch-${color}`,
+      style: {
+        background: getBackgroundColor()
+      },
+      className: clsx.clsx({
+        [withBaseName("active")]: active,
+        [withBaseName("transparent")]: transparent,
+        [withBaseName("graySwatch")]: isBlackOrgray(color),
+        [withBaseName("whiteSwatch")]: isWhite(color),
+        [withBaseName("swatch")]: !isWhite(color) && !isBlackOrgray(color)
+      }),
+      onClick: handleClick,
+      tabIndex: 0,
+      onKeyDown: handleKeyDown
+    }
+  );
 };
 
 exports.Swatch = Swatch;

package/dist-cjs/color-chooser/Swatch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Swatch.js","sources":["../src/color-chooser/Swatch.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 { ChangeEvent, KeyboardEvent } from \"react\";\n\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nimport swatchCss from \"./Swatch.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserSwatch\");\n\ninterface SwatchProps {\n  active: boolean;\n  alpha: number;\n  color: string;\n  onClick: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: ChangeEvent,\n  ) => void;\n  onDialogClosed: () => void;\n  transparent?: boolean;\n}\n\nexport const Swatch = ({\n  color,\n  onClick,\n  active,\n  alpha,\n  onDialogClosed,\n  transparent = false,\n}: SwatchProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-swatch\",\n    css: swatchCss,\n    window: targetWindow,\n  });\n\n  const handleClick = () => {\n    const newColor = Color.makeColorFromHex(color);\n    isTransparent(color) ? newColor?.setAlpha(0) : newColor?.setAlpha(alpha);\n\n    onClick(newColor, true);\n    onDialogClosed();\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>): void => {\n    const newColor = Color.makeColorFromHex(color)?.setAlpha(alpha);\n    e.key === \"ENTER\" && onClick(newColor, true);\n    onDialogClosed();\n  };\n\n  // If it's black/gray/white\n  const isBlackOrgray = (color: string): boolean => {\n    return (\n      color.toLowerCase() === \"black\" ||\n      color.toUpperCase().startsWith(\"#2F3136\") ||\n      color.toUpperCase().startsWith(\"#2A2C2F\") ||\n      color.toUpperCase().startsWith(\"#242526\") ||\n      color.toUpperCase().startsWith(\"#161616\")\n    );\n  };\n  const isWhite = (color: string): boolean => color === \"white\";\n\n  const getBackgroundColor = () => {\n    const backgroundColor = Color.makeColorFromHex(color);\n    return backgroundColor?.setAlpha(alpha).hex;\n  };\n\n  return (\n    <div\n      data-testid={`swatch-${color}`}\n      style={{\n        background: getBackgroundColor(),\n      }}\n      className={clsx({\n        [withBaseName(\"active\")]: active,\n        [withBaseName(\"transparent\")]: transparent,\n        [withBaseName(\"graySwatch\")]: isBlackOrgray(color),\n        [withBaseName(\"whiteSwatch\")]: isWhite(color),\n        [withBaseName(\"swatch\")]: !isWhite(color) && !isBlackOrgray(color),\n      })}\n      onClick={handleClick}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n    />\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","swatchCss","Color","isTransparent","color","jsx","clsx"],"mappings":"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"}
+{"version":3,"file":"Swatch.js","sources":["../src/color-chooser/Swatch.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 { ChangeEvent, KeyboardEvent } from \"react\";\n\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nimport swatchCss from \"./Swatch.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserSwatch\");\n\ninterface SwatchProps {\n  active: boolean;\n  alpha: number;\n  color: string;\n  onClick: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: ChangeEvent,\n  ) => void;\n  onDialogClosed: () => void;\n  transparent?: boolean;\n}\n\nexport const Swatch = ({\n  color,\n  onClick,\n  active,\n  alpha,\n  onDialogClosed,\n  transparent = false,\n}: SwatchProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-swatch\",\n    css: swatchCss,\n    window: targetWindow,\n  });\n\n  const handleClick = () => {\n    const newColor = Color.makeColorFromHex(color);\n    isTransparent(color) ? newColor?.setAlpha(0) : newColor?.setAlpha(alpha);\n\n    onClick(newColor, true);\n    onDialogClosed();\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>): void => {\n    const newColor = Color.makeColorFromHex(color)?.setAlpha(alpha);\n    e.key === \"ENTER\" && onClick(newColor, true);\n    onDialogClosed();\n  };\n\n  // If it's black/gray/white\n  const isBlackOrgray = (color: string): boolean => {\n    return (\n      color.toLowerCase() === \"black\" ||\n      color.toUpperCase().startsWith(\"#2F3136\") ||\n      color.toUpperCase().startsWith(\"#2A2C2F\") ||\n      color.toUpperCase().startsWith(\"#242526\") ||\n      color.toUpperCase().startsWith(\"#161616\")\n    );\n  };\n  const isWhite = (color: string): boolean => color === \"white\";\n\n  const getBackgroundColor = () => {\n    const backgroundColor = Color.makeColorFromHex(color);\n    return backgroundColor?.setAlpha(alpha).hex;\n  };\n\n  return (\n    <div\n      data-testid={`swatch-${color}`}\n      style={{\n        background: getBackgroundColor(),\n      }}\n      className={clsx({\n        [withBaseName(\"active\")]: active,\n        [withBaseName(\"transparent\")]: transparent,\n        [withBaseName(\"graySwatch\")]: isBlackOrgray(color),\n        [withBaseName(\"whiteSwatch\")]: isWhite(color),\n        [withBaseName(\"swatch\")]: !isWhite(color) && !isBlackOrgray(color),\n      })}\n      onClick={handleClick}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n    />\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","swatchCss","Color","isTransparent","color","jsx","clsx"],"mappings":"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"}

package/dist-cjs/color-chooser/Swatches.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var clsx = require('clsx');
@@ -27,52 +25,38 @@ const Swatches = ({
     css: Swatches$1,
     window: targetWindow
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    "data-testid": "swatches",
-    className: clsx.clsx(withBaseName("pickerDiv")),
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SwatchesPicker.SwatchesPicker, {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "swatches", className: clsx.clsx(withBaseName("pickerDiv")), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SwatchesPicker.SwatchesPicker,
+      {
         allColors,
         color,
         onChange: handleColorChange,
         alpha,
         onDialogClosed
-      }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: clsx.clsx(withBaseName("textDiv")),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", {
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", {
-                className: clsx.clsx(withBaseName("colorTextDiv")),
-                children: "Color:"
-              }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", {
-                className: clsx.clsx(withBaseName("colorNameTextDiv")),
-                children: displayColorName != null ? displayColorName : placeholder
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", {
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", {
-                className: clsx.clsx(withBaseName("alphaTextDiv")),
-                children: "Opacity:"
-              }),
-              /* @__PURE__ */ jsxRuntime.jsx(AlphaInputField.AlphaInput, {
-                alphaValue: (color == null ? void 0 : color.rgba.a) === 0 ? 0 : alpha,
-                showAsOpacity: true,
-                onSubmit: (alpha2, e) => {
-                  const newColor = color == null ? void 0 : color.setAlpha(alpha2);
-                  handleColorChange(newColor, false, e);
-                }
-              })
-            ]
-          })
-        ]
-      })
-    ]
-  });
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(withBaseName("textDiv")), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(withBaseName("colorTextDiv")), children: "Color:" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(withBaseName("colorNameTextDiv")), children: displayColorName ?? placeholder })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(withBaseName("alphaTextDiv")), children: "Opacity:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AlphaInputField.AlphaInput,
+          {
+            alphaValue: (color == null ? void 0 : color.rgba.a) === 0 ? 0 : alpha,
+            showAsOpacity: true,
+            onSubmit: (alpha2, e) => {
+              const newColor = color == null ? void 0 : color.setAlpha(alpha2);
+              handleColorChange(newColor, false, e);
+            }
+          }
+        )
+      ] })
+    ] })
+  ] });
 };
 
 exports.Swatches = Swatches;

package/dist-cjs/color-chooser/Swatches.js.map

@@ -1 +1 @@
-{"version":3,"file":"Swatches.js","sources":["../src/color-chooser/Swatches.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport type { ChangeEvent } from \"react\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport type { Color } from \"./Color\";\nimport { SwatchesPicker } from \"./SwatchesPicker\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport swatchesCss from \"./Swatches.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserSwatches\");\n\nexport interface SwatchesTabProps {\n  allColors: string[][];\n  color: Color | undefined;\n  alpha: number;\n  handleColorChange: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: ChangeEvent,\n  ) => void;\n  displayColorName: string | undefined;\n  placeholder: string | undefined;\n  onDialogClosed: () => void;\n}\n\nexport const Swatches = ({\n  allColors,\n  color,\n  alpha,\n  handleColorChange,\n  displayColorName,\n  placeholder,\n  onDialogClosed,\n}: SwatchesTabProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-swatches\",\n    css: swatchesCss,\n    window: targetWindow,\n  });\n  return (\n    <div data-testid=\"swatches\" className={clsx(withBaseName(\"pickerDiv\"))}>\n      <SwatchesPicker\n        allColors={allColors}\n        color={color}\n        onChange={handleColorChange}\n        alpha={alpha}\n        onDialogClosed={onDialogClosed}\n      />\n      <div className={clsx(withBaseName(\"textDiv\"))}>\n        <div>\n          <span className={clsx(withBaseName(\"colorTextDiv\"))}>Color:</span>\n          <span className={clsx(withBaseName(\"colorNameTextDiv\"))}>\n            {displayColorName ?? placeholder}\n          </span>\n        </div>\n        <div>\n          <span className={clsx(withBaseName(\"alphaTextDiv\"))}>Opacity:</span>\n          <AlphaInput\n            alphaValue={color?.rgba.a === 0 ? 0 : alpha}\n            showAsOpacity={true}\n            onSubmit={(alpha: number, e?: ChangeEvent): void => {\n              const newColor = color?.setAlpha(alpha);\n              handleColorChange(newColor, false, e);\n            }}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","swatchesCss","jsxs","clsx","jsx","SwatchesPicker","AlphaInput","alpha"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA,CAAA;AAgBrD,MAAM,WAAW,CAAC;AAAA,EACvB,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AACF,CAAqC,KAAA;AACnC,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IAAI,aAAY,EAAA,UAAA;AAAA,IAAW,SAAW,EAAAC,SAAA,CAAK,YAAa,CAAA,WAAW,CAAC,CAAA;AAAA,IACnE,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAAC,6BAAA,EAAA;AAAA,QACC,SAAA;AAAA,QACA,KAAA;AAAA,QACA,QAAU,EAAA,iBAAA;AAAA,QACV,KAAA;AAAA,QACA,cAAA;AAAA,OACF,CAAA;AAAA,sBACCH,eAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,QAC1C,QAAA,EAAA;AAAA,0BAACD,eAAA,CAAA,KAAA,EAAA;AAAA,YACC,QAAA,EAAA;AAAA,8BAACE,cAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAW,EAAAD,SAAA,CAAK,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,gBAAG,QAAA,EAAA,QAAA;AAAA,eAAM,CAAA;AAAA,8BAC1DC,cAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAW,EAAAD,SAAA,CAAK,YAAa,CAAA,kBAAkB,CAAC,CAAA;AAAA,gBACnD,QAAoB,EAAA,gBAAA,IAAA,IAAA,GAAA,gBAAA,GAAA,WAAA;AAAA,eACvB,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,0BACCD,eAAA,CAAA,KAAA,EAAA;AAAA,YACC,QAAA,EAAA;AAAA,8BAACE,cAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAW,EAAAD,SAAA,CAAK,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,gBAAG,QAAA,EAAA,UAAA;AAAA,eAAQ,CAAA;AAAA,8BAC5DC,cAAA,CAAAE,0BAAA,EAAA;AAAA,gBACC,UAAY,EAAA,CAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAO,IAAK,CAAA,CAAA,MAAM,IAAI,CAAI,GAAA,KAAA;AAAA,gBACtC,aAAe,EAAA,IAAA;AAAA,gBACf,QAAA,EAAU,CAACC,MAAAA,EAAe,CAA0B,KAAA;AAClD,kBAAM,MAAA,QAAA,GAAW,+BAAO,QAASA,CAAAA,MAAAA,CAAAA,CAAAA;AACjC,kBAAkB,iBAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,iBACtC;AAAA,eACF,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Swatches.js","sources":["../src/color-chooser/Swatches.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport type { ChangeEvent } from \"react\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport type { Color } from \"./Color\";\nimport { SwatchesPicker } from \"./SwatchesPicker\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport swatchesCss from \"./Swatches.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserSwatches\");\n\nexport interface SwatchesTabProps {\n  allColors: string[][];\n  color: Color | undefined;\n  alpha: number;\n  handleColorChange: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: ChangeEvent,\n  ) => void;\n  displayColorName: string | undefined;\n  placeholder: string | undefined;\n  onDialogClosed: () => void;\n}\n\nexport const Swatches = ({\n  allColors,\n  color,\n  alpha,\n  handleColorChange,\n  displayColorName,\n  placeholder,\n  onDialogClosed,\n}: SwatchesTabProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-swatches\",\n    css: swatchesCss,\n    window: targetWindow,\n  });\n  return (\n    <div data-testid=\"swatches\" className={clsx(withBaseName(\"pickerDiv\"))}>\n      <SwatchesPicker\n        allColors={allColors}\n        color={color}\n        onChange={handleColorChange}\n        alpha={alpha}\n        onDialogClosed={onDialogClosed}\n      />\n      <div className={clsx(withBaseName(\"textDiv\"))}>\n        <div>\n          <span className={clsx(withBaseName(\"colorTextDiv\"))}>Color:</span>\n          <span className={clsx(withBaseName(\"colorNameTextDiv\"))}>\n            {displayColorName ?? placeholder}\n          </span>\n        </div>\n        <div>\n          <span className={clsx(withBaseName(\"alphaTextDiv\"))}>Opacity:</span>\n          <AlphaInput\n            alphaValue={color?.rgba.a === 0 ? 0 : alpha}\n            showAsOpacity={true}\n            onSubmit={(alpha: number, e?: ChangeEvent): void => {\n              const newColor = color?.setAlpha(alpha);\n              handleColorChange(newColor, false, e);\n            }}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","swatchesCss","jsxs","clsx","jsx","SwatchesPicker","AlphaInput","alpha"],"mappings":";;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA;AAgBrD,MAAM,WAAW,CAAC;AAAA,EACvB,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAqC,KAAA;AACnC,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EACE,uBAAAC,eAAA,CAAC,SAAI,aAAY,EAAA,UAAA,EAAW,WAAWC,SAAK,CAAA,YAAA,CAAa,WAAW,CAAC,CACnE,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,6BAAA;AAAA,MAAA;AAAA,QACC,SAAA;AAAA,QACA,KAAA;AAAA,QACA,QAAU,EAAA,iBAAA;AAAA,QACV,KAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,oCACC,KAAI,EAAA,EAAA,SAAA,EAAWF,UAAK,YAAa,CAAA,SAAS,CAAC,CAC1C,EAAA,QAAA,EAAA;AAAA,sBAAAD,eAAA,CAAC,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAAE,cAAA,CAAC,UAAK,SAAW,EAAAD,SAAA,CAAK,aAAa,cAAc,CAAC,GAAG,QAAM,EAAA,QAAA,EAAA,CAAA;AAAA,wBAC3DC,cAAA,CAAC,UAAK,SAAW,EAAAD,SAAA,CAAK,aAAa,kBAAkB,CAAC,CACnD,EAAA,QAAA,EAAA,gBAAA,IAAoB,WACvB,EAAA;AAAA,OACF,EAAA,CAAA;AAAA,sCACC,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,UAAK,SAAW,EAAAD,SAAA,CAAK,aAAa,cAAc,CAAC,GAAG,QAAQ,EAAA,UAAA,EAAA,CAAA;AAAA,wBAC7DC,cAAA;AAAA,UAACE,0BAAA;AAAA,UAAA;AAAA,YACC,UAAY,EAAA,CAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAO,IAAK,CAAA,CAAA,MAAM,IAAI,CAAI,GAAA,KAAA;AAAA,YACtC,aAAe,EAAA,IAAA;AAAA,YACf,QAAA,EAAU,CAACC,MAAAA,EAAe,CAA0B,KAAA;AAClD,cAAM,MAAA,QAAA,GAAW,+BAAO,QAASA,CAAAA,MAAAA,CAAAA;AACjC,cAAkB,iBAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA;AAAA;AACtC;AAAA;AACF,OACF,EAAA;AAAA,KACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/color-chooser/SwatchesPicker.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var ColorHelpers = require('./ColorHelpers.js');
 var Swatch$1 = require('./Swatch.js');
@@ -30,19 +28,20 @@ const SwatchesGroup = ({
   const isActive = (color) => {
     return color.toLowerCase() === (selectedColor == null ? void 0 : selectedColor.substring(0, 7).toString().toLowerCase()) || isBlackOrWhite(color);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    style: { display: "flex", flexDirection: "column" },
-    children: (_a = swatchGroup == null ? void 0 : swatchGroup.map((color) => {
-      return ColorHelpers.convertColorMapValueToHex(color);
-    })) == null ? void 0 : _a.map((color) => /* @__PURE__ */ jsxRuntime.jsx(Swatch$1.Swatch, {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, children: (_a = swatchGroup == null ? void 0 : swatchGroup.map((color) => {
+    return ColorHelpers.convertColorMapValueToHex(color);
+  })) == null ? void 0 : _a.map((color) => /* @__PURE__ */ jsxRuntime.jsx(
+    Swatch$1.Swatch,
+    {
       active: isActive(color),
       color,
       onClick,
       onDialogClosed,
       alpha,
       transparent: colorUtils.isTransparent(color)
-    }, color.toString()))
-  });
+    },
+    color.toString()
+  )) });
 };
 const SwatchesPicker = ({
   allColors,
@@ -51,17 +50,24 @@ const SwatchesPicker = ({
   onChange,
   onDialogClosed
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    "data-testid": "swatches-picker",
-    style: { display: "flex", flexDirection: "row" },
-    children: allColors == null ? void 0 : allColors.map((swatchGroup) => /* @__PURE__ */ jsxRuntime.jsx(SwatchesGroup, {
-      swatchGroup,
-      selectedColor: color == null ? void 0 : color.hex,
-      onClick: onChange,
-      onDialogClosed,
-      alpha
-    }, swatchGroup.toString()))
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-testid": "swatches-picker",
+      style: { display: "flex", flexDirection: "row" },
+      children: allColors == null ? void 0 : allColors.map((swatchGroup) => /* @__PURE__ */ jsxRuntime.jsx(
+        SwatchesGroup,
+        {
+          swatchGroup,
+          selectedColor: color == null ? void 0 : color.hex,
+          onClick: onChange,
+          onDialogClosed,
+          alpha
+        },
+        swatchGroup.toString()
+      ))
+    }
+  );
 };
 
 exports.SwatchesPicker = SwatchesPicker;

package/dist-cjs/color-chooser/SwatchesPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwatchesPicker.js","sources":["../src/color-chooser/SwatchesPicker.tsx"],"sourcesContent":["import type { ChangeEvent } from \"react\";\nimport type { Color } from \"./Color\";\nimport { convertColorMapValueToHex } from \"./ColorHelpers\";\nimport { Swatch } from \"./Swatch\";\nimport { isTransparent } from \"./color-utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport swatchCSS from \"./Swatch.css\";\n\ninterface SwatchesPickerProps {\n  allColors: string[][];\n  color: Color | undefined;\n  alpha?: number;\n  onChange: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: ChangeEvent,\n  ) => void;\n  onDialogClosed: () => void;\n}\n\ninterface SwatchesGroupProps {\n  swatchGroup: string[];\n  selectedColor: string | undefined;\n  alpha: number;\n  onClick: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: ChangeEvent,\n  ) => void;\n  onDialogClosed: () => void;\n}\n\nconst SwatchesGroup = ({\n  swatchGroup,\n  onClick,\n  onDialogClosed,\n  selectedColor,\n  alpha,\n}: SwatchesGroupProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-swatches\",\n    css: swatchCSS,\n    window: targetWindow,\n  });\n\n  const isBlackOrWhite = (color: string): boolean => {\n    return (\n      ((selectedColor ? selectedColor.startsWith(\"#000000\") : false) &&\n        color.toLowerCase() === \"black\") ||\n      ((selectedColor\n        ? selectedColor.toLowerCase().startsWith(\"#ffffff\")\n        : false) &&\n        color.toLowerCase() === \"white\")\n    );\n  };\n  const isActive = (color: string): boolean => {\n    return (\n      color.toLowerCase() ===\n        selectedColor?.substring(0, 7).toString().toLowerCase() ||\n      isBlackOrWhite(color)\n    );\n  };\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\" }}>\n      {swatchGroup\n        ?.map((color) => {\n          return convertColorMapValueToHex(color);\n        })\n        ?.map((color) => (\n          <Swatch\n            key={color.toString()}\n            active={isActive(color)}\n            color={color}\n            onClick={onClick}\n            onDialogClosed={onDialogClosed}\n            alpha={alpha}\n            transparent={isTransparent(color)}\n          />\n        ))}\n    </div>\n  );\n};\n\nexport const SwatchesPicker = ({\n  allColors,\n  color,\n  alpha = 1,\n  onChange,\n  onDialogClosed,\n}: SwatchesPickerProps): JSX.Element => {\n  return (\n    <div\n      data-testid=\"swatches-picker\"\n      style={{ display: \"flex\", flexDirection: \"row\" }}\n    >\n      {allColors?.map((swatchGroup: string[]) => (\n        <SwatchesGroup\n          swatchGroup={swatchGroup}\n          key={swatchGroup.toString()}\n          selectedColor={color?.hex}\n          onClick={onChange}\n          onDialogClosed={onDialogClosed}\n          alpha={alpha}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","swatchCSS","jsx","convertColorMapValueToHex","Swatch","isTransparent"],"mappings":";;;;;;;;;;;;AAmCA,MAAM,gBAAgB,CAAC;AAAA,EACrB,WAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA;AACF,CAAuC,KAAA;AAzCvC,EAAA,IAAA,EAAA,CAAA;AA0CE,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,CAAC,KAA2B,KAAA;AACjD,IACI,OAAA,CAAA,aAAA,GAAgB,cAAc,UAAW,CAAA,SAAS,IAAI,KACtD,KAAA,KAAA,CAAM,aAAkB,KAAA,OAAA,IAAA,CACxB,gBACE,aAAc,CAAA,WAAA,GAAc,UAAW,CAAA,SAAS,IAChD,KACF,KAAA,KAAA,CAAM,aAAkB,KAAA,OAAA,CAAA;AAAA,GAE9B,CAAA;AACA,EAAM,MAAA,QAAA,GAAW,CAAC,KAA2B,KAAA;AAC3C,IACE,OAAA,KAAA,CAAM,WAAY,EAAA,MAChB,aAAe,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,SAAA,CAAU,GAAG,CAAG,CAAA,CAAA,QAAA,EAAA,CAAW,WAC5C,EAAA,CAAA,IAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AAAA,GAExB,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,IACpD,QAAA,EAAA,CAAA,EAAA,GAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CACG,GAAI,CAAA,CAAC,KAAU,KAAA;AACf,MAAA,OAAOC,uCAA0B,KAAK,CAAA,CAAA;AAAA,KAFzC,CAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAIG,GAAI,CAAA,CAAC,0BACJD,cAAA,CAAAE,eAAA,EAAA;AAAA,MAEC,MAAA,EAAQ,SAAS,KAAK,CAAA;AAAA,MACtB,KAAA;AAAA,MACA,OAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA,EAAaC,yBAAc,KAAK,CAAA;AAAA,KAN3B,EAAA,KAAA,CAAM,UAOb,CAAA,CAAA;AAAA,GAEN,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAQ,GAAA,CAAA;AAAA,EACR,QAAA;AAAA,EACA,cAAA;AACF,CAAwC,KAAA;AACtC,EAAA,uBACGH,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAY,EAAA,iBAAA;AAAA,IACZ,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,KAAM,EAAA;AAAA,IAE9C,QAAW,EAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,GAAA,CAAI,CAAC,WAAA,qBACdA,cAAA,CAAA,aAAA,EAAA;AAAA,MACC,WAAA;AAAA,MAEA,eAAe,KAAO,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA;AAAA,MACtB,OAAS,EAAA,QAAA;AAAA,MACT,cAAA;AAAA,MACA,KAAA;AAAA,KAJK,EAAA,WAAA,CAAY,UAKnB,CAAA,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SwatchesPicker.js","sources":["../src/color-chooser/SwatchesPicker.tsx"],"sourcesContent":["import type { ChangeEvent } from \"react\";\nimport type { Color } from \"./Color\";\nimport { convertColorMapValueToHex } from \"./ColorHelpers\";\nimport { Swatch } from \"./Swatch\";\nimport { isTransparent } from \"./color-utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport swatchCSS from \"./Swatch.css\";\n\ninterface SwatchesPickerProps {\n  allColors: string[][];\n  color: Color | undefined;\n  alpha?: number;\n  onChange: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: ChangeEvent,\n  ) => void;\n  onDialogClosed: () => void;\n}\n\ninterface SwatchesGroupProps {\n  swatchGroup: string[];\n  selectedColor: string | undefined;\n  alpha: number;\n  onClick: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: ChangeEvent,\n  ) => void;\n  onDialogClosed: () => void;\n}\n\nconst SwatchesGroup = ({\n  swatchGroup,\n  onClick,\n  onDialogClosed,\n  selectedColor,\n  alpha,\n}: SwatchesGroupProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-swatches\",\n    css: swatchCSS,\n    window: targetWindow,\n  });\n\n  const isBlackOrWhite = (color: string): boolean => {\n    return (\n      ((selectedColor ? selectedColor.startsWith(\"#000000\") : false) &&\n        color.toLowerCase() === \"black\") ||\n      ((selectedColor\n        ? selectedColor.toLowerCase().startsWith(\"#ffffff\")\n        : false) &&\n        color.toLowerCase() === \"white\")\n    );\n  };\n  const isActive = (color: string): boolean => {\n    return (\n      color.toLowerCase() ===\n        selectedColor?.substring(0, 7).toString().toLowerCase() ||\n      isBlackOrWhite(color)\n    );\n  };\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\" }}>\n      {swatchGroup\n        ?.map((color) => {\n          return convertColorMapValueToHex(color);\n        })\n        ?.map((color) => (\n          <Swatch\n            key={color.toString()}\n            active={isActive(color)}\n            color={color}\n            onClick={onClick}\n            onDialogClosed={onDialogClosed}\n            alpha={alpha}\n            transparent={isTransparent(color)}\n          />\n        ))}\n    </div>\n  );\n};\n\nexport const SwatchesPicker = ({\n  allColors,\n  color,\n  alpha = 1,\n  onChange,\n  onDialogClosed,\n}: SwatchesPickerProps): JSX.Element => {\n  return (\n    <div\n      data-testid=\"swatches-picker\"\n      style={{ display: \"flex\", flexDirection: \"row\" }}\n    >\n      {allColors?.map((swatchGroup: string[]) => (\n        <SwatchesGroup\n          swatchGroup={swatchGroup}\n          key={swatchGroup.toString()}\n          selectedColor={color?.hex}\n          onClick={onChange}\n          onDialogClosed={onDialogClosed}\n          alpha={alpha}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","swatchCSS","jsx","convertColorMapValueToHex","Swatch","isTransparent"],"mappings":";;;;;;;;;;AAmCA,MAAM,gBAAgB,CAAC;AAAA,EACrB,WAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAuC,KAAA;AAzCvC,EAAA,IAAA,EAAA;AA0CE,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,CAAC,KAA2B,KAAA;AACjD,IACI,OAAA,CAAA,aAAA,GAAgB,cAAc,UAAW,CAAA,SAAS,IAAI,KACtD,KAAA,KAAA,CAAM,aAAkB,KAAA,OAAA,IAAA,CACxB,gBACE,aAAc,CAAA,WAAA,GAAc,UAAW,CAAA,SAAS,IAChD,KACF,KAAA,KAAA,CAAM,aAAkB,KAAA,OAAA;AAAA,GAE9B;AACA,EAAM,MAAA,QAAA,GAAW,CAAC,KAA2B,KAAA;AAC3C,IACE,OAAA,KAAA,CAAM,WAAY,EAAA,MAChB,aAAe,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,SAAA,CAAU,GAAG,CAAG,CAAA,CAAA,QAAA,EAAA,CAAW,WAC5C,EAAA,CAAA,IAAA,cAAA,CAAe,KAAK,CAAA;AAAA,GAExB;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA,EAAI,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,aAAe,EAAA,QAAA,EAC3C,EAAA,QAAA,EAAA,CAAA,EAAA,GAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CACG,GAAI,CAAA,CAAC,KAAU,KAAA;AACf,IAAA,OAAOC,uCAA0B,KAAK,CAAA;AAAA,GAFzC,CAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAIG,GAAI,CAAA,CAAC,KACL,qBAAAD,cAAA;AAAA,IAACE,eAAA;AAAA,IAAA;AAAA,MAEC,MAAA,EAAQ,SAAS,KAAK,CAAA;AAAA,MACtB,KAAA;AAAA,MACA,OAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA,EAAaC,yBAAc,KAAK;AAAA,KAAA;AAAA,IAN3B,MAAM,QAAS;AAAA,GAS5B,CAAA,EAAA,CAAA;AAEJ,CAAA;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAQ,GAAA,CAAA;AAAA,EACR,QAAA;AAAA,EACA;AACF,CAAwC,KAAA;AACtC,EACE,uBAAAH,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,iBAAA;AAAA,MACZ,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,KAAM,EAAA;AAAA,MAE9C,QAAA,EAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAW,GAAI,CAAA,CAAC,WACf,qBAAAA,cAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACC,WAAA;AAAA,UAEA,eAAe,KAAO,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA;AAAA,UACtB,OAAS,EAAA,QAAA;AAAA,UACT,cAAA;AAAA,UACA;AAAA,SAAA;AAAA,QAJK,YAAY,QAAS;AAAA,OAK5B;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist-cjs/color-chooser/color-utils.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const isTransparent = (color) => {
   return color ? /#[\da-f]{6}00/i.test(color) : false;
 };

package/dist-cjs/color-chooser/color-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-utils.js","sources":["../src/color-chooser/color-utils.ts"],"sourcesContent":["export const isTransparent = (color?: string): boolean => {\n  return color ? /#[\\da-f]{6}00/i.test(color) : false;\n};\n"],"names":[],"mappings":";;;;AAAa,MAAA,aAAA,GAAgB,CAAC,KAA4B,KAAA;AACxD,EAAA,OAAO,KAAQ,GAAA,gBAAA,CAAiB,IAAK,CAAA,KAAK,CAAI,GAAA,KAAA,CAAA;AAChD;;;;"}
+{"version":3,"file":"color-utils.js","sources":["../src/color-chooser/color-utils.ts"],"sourcesContent":["export const isTransparent = (color?: string): boolean => {\n  return color ? /#[\\da-f]{6}00/i.test(color) : false;\n};\n"],"names":[],"mappings":";;AAAa,MAAA,aAAA,GAAgB,CAAC,KAA4B,KAAA;AACxD,EAAA,OAAO,KAAQ,GAAA,gBAAA,CAAiB,IAAK,CAAA,KAAK,CAAI,GAAA,KAAA;AAChD;;;;"}

package/dist-cjs/color-chooser/colorMap.js

@@ -1,13 +1,12 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const common = {
   saltwhite: "rgb(255, 255, 255)",
   saltblack: "rgb(0, 0, 0)"
 };
 const saltlight = {
   ...common,
+  /* Color palette will stay the same no matter of theming */
   saltred10: "rgb(255, 227, 224)",
   saltred20: "rgb(255, 207, 201)",
   saltred30: "rgb(255, 187, 178)",

package/dist-cjs/color-chooser/colorMap.js.map

@@ -1 +1 @@
-{"version":3,"file":"colorMap.js","sources":["../src/color-chooser/colorMap.tsx"],"sourcesContent":["const common = {\n  saltwhite: \"rgb(255, 255, 255)\",\n  saltblack: \"rgb(0, 0, 0)\",\n};\n/* TODO: a few of these are probably out of date and need checking */\nexport const saltlight = {\n  ...common,\n  /* Color palette will stay the same no matter of theming */\n  saltred10: \"rgb(255, 227, 224)\",\n  saltred20: \"rgb(255, 207, 201)\",\n  saltred30: \"rgb(255, 187, 178)\" /* ffbbb2 */,\n  saltred40: \"rgb(255, 167, 156)\" /* #ffa79c */,\n  saltred50: \"rgb(255, 148, 133)\" /* ff9485 */,\n  saltred100: \"rgb(255, 128, 111)\",\n  saltred200: \"rgb(255, 108, 88)\",\n  saltred300: \"rgb(255, 89, 66)\" /* 555942 */,\n  saltred400: \"rgb(237, 65, 42)\",\n  saltred500: \"rgb(227, 43, 22)\",\n  saltred600: \"rgb(196, 32, 16)\" /* #c42010 */,\n  saltred700: \"rgb(166, 21, 11)\",\n  saltred800: \"rgb(136, 10, 5)\",\n  saltred900: \"rgb(106, 0, 0)\",\n  saltorange10: \"rgb(255, 232, 191)\",\n  saltorange20: \"rgb(254, 223, 166)\",\n  saltorange30: \"rgb(254, 214, 142)\",\n  saltorange40: \"rgb(254, 205, 118)\",\n  saltorange50: \"rgb(254, 197, 94)\",\n  saltorange100: \"rgb(250, 181, 81)\" /* faB551 */,\n  saltorange200: \"rgb(246, 165, 68)\" /* f6a544 */,\n  saltorange300: \"rgb(242, 149, 56)\" /* #f29538 */,\n  saltorange400: \"rgb(238, 133, 43)\",\n  saltorange500: \"rgb(234, 115, 25)\" /* #ea7319 */,\n  saltorange600: \"rgb(224, 101, 25)\" /* e06519*/,\n  saltorange700: \"rgb(214, 85, 19)\",\n  saltorange800: \"rgb(204, 68, 13)\",\n  saltorange900: \"rgb(194, 52, 7)\" /* #c23407 */,\n  saltgreen10: \"rgb(209, 244, 201)\",\n  saltgreen20: \"rgb(184, 232, 182)\",\n  saltgreen30: \"rgb(160, 221, 164)\",\n  saltgreen40: \"rgb(136, 210, 145)\",\n  saltgreen50: \"rgb(112, 199, 127)\",\n  saltgreen100: \"rgb(93, 189, 116)\",\n  saltgreen200: \"rgb(77, 180, 105)\",\n  saltgreen300: \"rgb(60, 171, 96)\",\n  saltgreen400: \"rgb(48, 156, 90)\",\n  saltgreen500: \"rgb(36, 135, 75)\",\n  saltgreen600: \"rgb(24, 114, 61)\",\n  saltgreen700: \"rgb(12, 93, 46)\",\n  saltgreen800: \"rgb(1, 73, 32)\",\n  saltgreen900: \"rgb(0, 57, 18)\",\n  saltteal10: \"rgb(218, 240, 240)\",\n  saltteal20: \"rgb(199, 232, 232)\",\n  saltteal30: \"rgb(180, 224, 225)\",\n  saltteal40: \"rgb(162, 217, 218)\",\n  saltteal50: \"rgb(141, 205, 209)\",\n  saltteal100: \"rgb(123, 193, 200)\",\n  saltteal200: \"rgb(99, 181, 192)\",\n  saltteal300: \"rgb(73, 160, 172)\",\n  saltteal400: \"rgb(48, 149, 166)\",\n  saltteal500: \"rgb(0, 130, 151)\",\n  saltteal600: \"rgb(27, 107, 133)\",\n  saltteal700: \"rgb(0, 85, 113)\",\n  saltteal800: \"rgb(1, 65, 86)\",\n  saltteal900: \"rgb(0, 49, 76)\",\n  saltblue10: \"rgb(203, 231, 249)\",\n  saltblue20: \"rgb(183, 222, 246)\",\n  saltblue30: \"rgb(164, 213, 244)\",\n  saltblue40: \"rgb(144, 204, 242)\",\n  saltblue50: \"rgb(125, 195, 240)\" /* #7dc3f0 */,\n  saltblue100: \"rgb(100, 177, 228)\" /* #64B1E4 */,\n  saltblue200: \"rgb(75, 159, 216)\",\n  saltblue300: \"rgb(51, 141, 205)\" /* 338dcd */,\n  saltblue400: \"rgb(45, 129, 189)\",\n  saltblue500: \"rgb(38, 112, 169)\" /* 2670a9 */,\n  saltblue600: \"rgb(21, 92, 147)\" /* 155c93 */,\n  saltblue700: \"rgb(0, 71, 123)\",\n  saltblue800: \"rgb(12, 53, 102)\",\n  saltblue900: \"rgb(0, 40, 88)\",\n  saltblue1000: \"rgb(0, 18, 40)\",\n  saltpurple10: \"rgb(249, 224, 247)\",\n  saltpurple20: \"rgb(247, 212, 244)\",\n  saltpurple30: \"rgb(245, 201, 241)\",\n  saltpurple40: \"rgb(243, 189, 238)\",\n  saltpurple50: \"rgb(241, 178, 235)\",\n  saltpurple100: \"rgb(223, 156, 225)\",\n  saltpurple200: \"rgb(205, 135, 215)\",\n  saltpurple300: \"rgb(192, 116, 203)\",\n  saltpurple400: \"rgb(169, 97, 181)\",\n  saltpurple500: \"rgb(150, 78, 162)\",\n  saltpurple600: \"rgb(129, 60, 141)\",\n  saltpurple700: \"rgb(103, 46, 122)\",\n  saltpurple800: \"rgb(83, 37, 109)\",\n  saltpurple900: \"rgb(59, 16, 84)\",\n  saltgray10: \"rgb(242, 244, 246)\",\n  saltgray20: \"rgb(234, 237, 239)\" /* #EAEDEF */,\n  saltgray30: \"rgb(224, 228, 233)\",\n  saltgray40: \"rgb(217, 221, 227)\" /* #D9DDE3 */,\n  saltgray50: \"rgb(206, 210, 217)\",\n  saltgray60: \"rgb(197, 201, 208)\" /* #C5C9D0 */,\n  saltgray70: \"rgb(180, 183, 190)\" /* B4B7BE*/,\n  saltgray80: \"rgb(159, 163, 170)\",\n  saltgray90: \"rgb(132, 135, 142)\" /* #84878e */,\n  saltgray100: \"rgb(116, 119, 127)\",\n  saltgray200: \"rgb(97, 101, 110)\",\n  saltgray300: \"rgb(76, 80, 91)\" /* 4c505b*/,\n  saltgray400: \"rgb(68, 72, 79)\",\n  saltgray500: \"rgb(59, 63, 70)\",\n  saltgray600: \"rgb(47, 49, 54)\",\n  saltgray700: \"rgb(42, 44, 47)\",\n  saltgray800: \"rgb(36, 37, 38)\",\n  saltgray900: \"rgb(22, 22, 22)\" /* #161616 */,\n};\n\nexport const saltColorMap: Record<string, string> = saltlight;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"colorMap.js","sources":["../src/color-chooser/colorMap.tsx"],"sourcesContent":["const common = {\n  saltwhite: \"rgb(255, 255, 255)\",\n  saltblack: \"rgb(0, 0, 0)\",\n};\n/* TODO: a few of these are probably out of date and need checking */\nexport const saltlight = {\n  ...common,\n  /* Color palette will stay the same no matter of theming */\n  saltred10: \"rgb(255, 227, 224)\",\n  saltred20: \"rgb(255, 207, 201)\",\n  saltred30: \"rgb(255, 187, 178)\" /* ffbbb2 */,\n  saltred40: \"rgb(255, 167, 156)\" /* #ffa79c */,\n  saltred50: \"rgb(255, 148, 133)\" /* ff9485 */,\n  saltred100: \"rgb(255, 128, 111)\",\n  saltred200: \"rgb(255, 108, 88)\",\n  saltred300: \"rgb(255, 89, 66)\" /* 555942 */,\n  saltred400: \"rgb(237, 65, 42)\",\n  saltred500: \"rgb(227, 43, 22)\",\n  saltred600: \"rgb(196, 32, 16)\" /* #c42010 */,\n  saltred700: \"rgb(166, 21, 11)\",\n  saltred800: \"rgb(136, 10, 5)\",\n  saltred900: \"rgb(106, 0, 0)\",\n  saltorange10: \"rgb(255, 232, 191)\",\n  saltorange20: \"rgb(254, 223, 166)\",\n  saltorange30: \"rgb(254, 214, 142)\",\n  saltorange40: \"rgb(254, 205, 118)\",\n  saltorange50: \"rgb(254, 197, 94)\",\n  saltorange100: \"rgb(250, 181, 81)\" /* faB551 */,\n  saltorange200: \"rgb(246, 165, 68)\" /* f6a544 */,\n  saltorange300: \"rgb(242, 149, 56)\" /* #f29538 */,\n  saltorange400: \"rgb(238, 133, 43)\",\n  saltorange500: \"rgb(234, 115, 25)\" /* #ea7319 */,\n  saltorange600: \"rgb(224, 101, 25)\" /* e06519*/,\n  saltorange700: \"rgb(214, 85, 19)\",\n  saltorange800: \"rgb(204, 68, 13)\",\n  saltorange900: \"rgb(194, 52, 7)\" /* #c23407 */,\n  saltgreen10: \"rgb(209, 244, 201)\",\n  saltgreen20: \"rgb(184, 232, 182)\",\n  saltgreen30: \"rgb(160, 221, 164)\",\n  saltgreen40: \"rgb(136, 210, 145)\",\n  saltgreen50: \"rgb(112, 199, 127)\",\n  saltgreen100: \"rgb(93, 189, 116)\",\n  saltgreen200: \"rgb(77, 180, 105)\",\n  saltgreen300: \"rgb(60, 171, 96)\",\n  saltgreen400: \"rgb(48, 156, 90)\",\n  saltgreen500: \"rgb(36, 135, 75)\",\n  saltgreen600: \"rgb(24, 114, 61)\",\n  saltgreen700: \"rgb(12, 93, 46)\",\n  saltgreen800: \"rgb(1, 73, 32)\",\n  saltgreen900: \"rgb(0, 57, 18)\",\n  saltteal10: \"rgb(218, 240, 240)\",\n  saltteal20: \"rgb(199, 232, 232)\",\n  saltteal30: \"rgb(180, 224, 225)\",\n  saltteal40: \"rgb(162, 217, 218)\",\n  saltteal50: \"rgb(141, 205, 209)\",\n  saltteal100: \"rgb(123, 193, 200)\",\n  saltteal200: \"rgb(99, 181, 192)\",\n  saltteal300: \"rgb(73, 160, 172)\",\n  saltteal400: \"rgb(48, 149, 166)\",\n  saltteal500: \"rgb(0, 130, 151)\",\n  saltteal600: \"rgb(27, 107, 133)\",\n  saltteal700: \"rgb(0, 85, 113)\",\n  saltteal800: \"rgb(1, 65, 86)\",\n  saltteal900: \"rgb(0, 49, 76)\",\n  saltblue10: \"rgb(203, 231, 249)\",\n  saltblue20: \"rgb(183, 222, 246)\",\n  saltblue30: \"rgb(164, 213, 244)\",\n  saltblue40: \"rgb(144, 204, 242)\",\n  saltblue50: \"rgb(125, 195, 240)\" /* #7dc3f0 */,\n  saltblue100: \"rgb(100, 177, 228)\" /* #64B1E4 */,\n  saltblue200: \"rgb(75, 159, 216)\",\n  saltblue300: \"rgb(51, 141, 205)\" /* 338dcd */,\n  saltblue400: \"rgb(45, 129, 189)\",\n  saltblue500: \"rgb(38, 112, 169)\" /* 2670a9 */,\n  saltblue600: \"rgb(21, 92, 147)\" /* 155c93 */,\n  saltblue700: \"rgb(0, 71, 123)\",\n  saltblue800: \"rgb(12, 53, 102)\",\n  saltblue900: \"rgb(0, 40, 88)\",\n  saltblue1000: \"rgb(0, 18, 40)\",\n  saltpurple10: \"rgb(249, 224, 247)\",\n  saltpurple20: \"rgb(247, 212, 244)\",\n  saltpurple30: \"rgb(245, 201, 241)\",\n  saltpurple40: \"rgb(243, 189, 238)\",\n  saltpurple50: \"rgb(241, 178, 235)\",\n  saltpurple100: \"rgb(223, 156, 225)\",\n  saltpurple200: \"rgb(205, 135, 215)\",\n  saltpurple300: \"rgb(192, 116, 203)\",\n  saltpurple400: \"rgb(169, 97, 181)\",\n  saltpurple500: \"rgb(150, 78, 162)\",\n  saltpurple600: \"rgb(129, 60, 141)\",\n  saltpurple700: \"rgb(103, 46, 122)\",\n  saltpurple800: \"rgb(83, 37, 109)\",\n  saltpurple900: \"rgb(59, 16, 84)\",\n  saltgray10: \"rgb(242, 244, 246)\",\n  saltgray20: \"rgb(234, 237, 239)\" /* #EAEDEF */,\n  saltgray30: \"rgb(224, 228, 233)\",\n  saltgray40: \"rgb(217, 221, 227)\" /* #D9DDE3 */,\n  saltgray50: \"rgb(206, 210, 217)\",\n  saltgray60: \"rgb(197, 201, 208)\" /* #C5C9D0 */,\n  saltgray70: \"rgb(180, 183, 190)\" /* B4B7BE*/,\n  saltgray80: \"rgb(159, 163, 170)\",\n  saltgray90: \"rgb(132, 135, 142)\" /* #84878e */,\n  saltgray100: \"rgb(116, 119, 127)\",\n  saltgray200: \"rgb(97, 101, 110)\",\n  saltgray300: \"rgb(76, 80, 91)\" /* 4c505b*/,\n  saltgray400: \"rgb(68, 72, 79)\",\n  saltgray500: \"rgb(59, 63, 70)\",\n  saltgray600: \"rgb(47, 49, 54)\",\n  saltgray700: \"rgb(42, 44, 47)\",\n  saltgray800: \"rgb(36, 37, 38)\",\n  saltgray900: \"rgb(22, 22, 22)\" /* #161616 */,\n};\n\nexport const saltColorMap: Record<string, string> = saltlight;\n"],"names":[],"mappings":"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"}

package/dist-cjs/color-chooser/createTabsMapping.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var ColorPicker = require('./ColorPicker.js');
 var Swatches = require('./Swatches.js');
 

package/dist-cjs/color-chooser/createTabsMapping.js.map

@@ -1 +1 @@
-{"version":3,"file":"createTabsMapping.js","sources":["../src/color-chooser/createTabsMapping.ts"],"sourcesContent":["import type { ChangeEvent } from \"react\";\nimport type { Color } from \"./Color\";\nimport { ColorPicker } from \"./ColorPicker\";\nimport type { DictTabsProps } from \"./DictTabs\";\nimport { Swatches } from \"./Swatches\";\n\ninterface TabsMappingProps {\n  swatches: boolean;\n  colorPicker: boolean;\n  disableAlphaChooser: boolean;\n  allColors: string[][];\n  color: Color | undefined;\n  alpha: number;\n  handleColorChange: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: ChangeEvent,\n  ) => void;\n  displayColorName: string | undefined;\n  placeholder: string | undefined;\n  onDialogClosed: () => void;\n}\n\nexport const createTabsMapping = ({\n  swatches,\n  colorPicker,\n  disableAlphaChooser,\n  allColors,\n  color,\n  alpha,\n  handleColorChange,\n  displayColorName,\n  placeholder,\n  onDialogClosed,\n}: TabsMappingProps): DictTabsProps[\"tabs\"] => {\n  if (!swatches && !colorPicker) {\n    throw new Error(\"You cannot select no color chooser tabs\");\n  }\n\n  return {\n    ...(swatches && {\n      Swatches: {\n        Component: Swatches,\n        props: {\n          allColors,\n          color,\n          alpha,\n          handleColorChange,\n          displayColorName,\n          placeholder,\n          onDialogClosed,\n        },\n      },\n    }),\n    ...(colorPicker && {\n      \"Color Picker\": {\n        Component: ColorPicker,\n        props: {\n          disableAlphaChooser,\n          color,\n          alpha,\n          onChange: handleColorChange,\n          onDialogClosed,\n        },\n      },\n    }),\n  };\n};\n"],"names":["Swatches","ColorPicker"],"mappings":";;;;;;;AAuBO,MAAM,oBAAoB,CAAC;AAAA,EAChC,QAAA;AAAA,EACA,WAAA;AAAA,EACA,mBAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AACF,CAA+C,KAAA;AAC7C,EAAI,IAAA,CAAC,QAAY,IAAA,CAAC,WAAa,EAAA;AAC7B,IAAM,MAAA,IAAI,MAAM,yCAAyC,CAAA,CAAA;AAAA,GAC3D;AAEA,EAAO,OAAA;AAAA,IACL,GAAI,QAAY,IAAA;AAAA,MACd,QAAU,EAAA;AAAA,QACR,SAAW,EAAAA,iBAAA;AAAA,QACX,KAAO,EAAA;AAAA,UACL,SAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAA;AAAA,UACA,iBAAA;AAAA,UACA,gBAAA;AAAA,UACA,WAAA;AAAA,UACA,cAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,GAAI,WAAe,IAAA;AAAA,MACjB,cAAgB,EAAA;AAAA,QACd,SAAW,EAAAC,uBAAA;AAAA,QACX,KAAO,EAAA;AAAA,UACL,mBAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAA;AAAA,UACA,QAAU,EAAA,iBAAA;AAAA,UACV,cAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"createTabsMapping.js","sources":["../src/color-chooser/createTabsMapping.ts"],"sourcesContent":["import type { ChangeEvent } from \"react\";\nimport type { Color } from \"./Color\";\nimport { ColorPicker } from \"./ColorPicker\";\nimport type { DictTabsProps } from \"./DictTabs\";\nimport { Swatches } from \"./Swatches\";\n\ninterface TabsMappingProps {\n  swatches: boolean;\n  colorPicker: boolean;\n  disableAlphaChooser: boolean;\n  allColors: string[][];\n  color: Color | undefined;\n  alpha: number;\n  handleColorChange: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: ChangeEvent,\n  ) => void;\n  displayColorName: string | undefined;\n  placeholder: string | undefined;\n  onDialogClosed: () => void;\n}\n\nexport const createTabsMapping = ({\n  swatches,\n  colorPicker,\n  disableAlphaChooser,\n  allColors,\n  color,\n  alpha,\n  handleColorChange,\n  displayColorName,\n  placeholder,\n  onDialogClosed,\n}: TabsMappingProps): DictTabsProps[\"tabs\"] => {\n  if (!swatches && !colorPicker) {\n    throw new Error(\"You cannot select no color chooser tabs\");\n  }\n\n  return {\n    ...(swatches && {\n      Swatches: {\n        Component: Swatches,\n        props: {\n          allColors,\n          color,\n          alpha,\n          handleColorChange,\n          displayColorName,\n          placeholder,\n          onDialogClosed,\n        },\n      },\n    }),\n    ...(colorPicker && {\n      \"Color Picker\": {\n        Component: ColorPicker,\n        props: {\n          disableAlphaChooser,\n          color,\n          alpha,\n          onChange: handleColorChange,\n          onDialogClosed,\n        },\n      },\n    }),\n  };\n};\n"],"names":["Swatches","ColorPicker"],"mappings":";;;;;AAuBO,MAAM,oBAAoB,CAAC;AAAA,EAChC,QAAA;AAAA,EACA,WAAA;AAAA,EACA,mBAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAA+C,KAAA;AAC7C,EAAI,IAAA,CAAC,QAAY,IAAA,CAAC,WAAa,EAAA;AAC7B,IAAM,MAAA,IAAI,MAAM,yCAAyC,CAAA;AAAA;AAG3D,EAAO,OAAA;AAAA,IACL,GAAI,QAAY,IAAA;AAAA,MACd,QAAU,EAAA;AAAA,QACR,SAAW,EAAAA,iBAAA;AAAA,QACX,KAAO,EAAA;AAAA,UACL,SAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAA;AAAA,UACA,iBAAA;AAAA,UACA,gBAAA;AAAA,UACA,WAAA;AAAA,UACA;AAAA;AACF;AACF,KACF;AAAA,IACA,GAAI,WAAe,IAAA;AAAA,MACjB,cAAgB,EAAA;AAAA,QACd,SAAW,EAAAC,uBAAA;AAAA,QACX,KAAO,EAAA;AAAA,UACL,mBAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAA;AAAA,UACA,QAAU,EAAA,iBAAA;AAAA,UACV;AAAA;AACF;AACF;AACF,GACF;AACF;;;;"}

package/dist-cjs/combo-box/ComboBox.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var react = require('react');
@@ -54,7 +52,7 @@ const ComboBox = react.forwardRef(function Combobox({
     source,
     children,
     options: {
-      filterPattern: valueProp != null ? valueProp : defaultValue,
+      filterPattern: valueProp ?? defaultValue,
       getFilterRegex,
       itemToString
     }
@@ -102,9 +100,9 @@ const ComboBox = react.forwardRef(function Combobox({
     },
     []
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(collectionProvider.CollectionProvider, {
-    collectionHook,
-    children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownBase.DropdownBase, {
+  return /* @__PURE__ */ jsxRuntime.jsx(collectionProvider.CollectionProvider, { collectionHook, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    DropdownBase.DropdownBase,
+    {
       ...props,
       fullWidth: true,
       id,
@@ -114,26 +112,32 @@ const ComboBox = react.forwardRef(function Combobox({
       ref: forwardedRef,
       width,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(InputLegacy.InputLegacy, {
-          ...inputProps,
-          disabled,
-          ...controlProps
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx(List.List, {
-          ...ListProps,
-          ListItem,
-          focusVisible,
-          highlightedIndex,
-          itemTextHighlightPattern: inputProps.value || void 0,
-          id: `${id}-list`,
-          listHandlers,
-          onSelectionChange,
-          selected: collectionItemsToItem(selected),
-          selectionStrategy
-        })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          InputLegacy.InputLegacy,
+          {
+            ...inputProps,
+            disabled,
+            ...controlProps
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          List.List,
+          {
+            ...ListProps,
+            ListItem,
+            focusVisible,
+            highlightedIndex,
+            itemTextHighlightPattern: inputProps.value || void 0,
+            id: `${id}-list`,
+            listHandlers,
+            onSelectionChange,
+            selected: collectionItemsToItem(selected),
+            selectionStrategy
+          }
+        )
       ]
-    })
-  });
+    }
+  ) });
 });
 
 exports.ComboBox = ComboBox;

package/dist-cjs/combo-box/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import { useIdMemo as useId } from \"@salt-ds/core\";\nimport {\n  type ForwardedRef,\n  type ReactElement,\n  forwardRef,\n  useCallback,\n} from \"react\";\n\nimport { DropdownBase, type DropdownBaseProps } from \"../dropdown\";\nimport {\n  InputLegacy as Input,\n  type InputLegacyProps as InputProps,\n} from \"../input-legacy\";\nimport { List, type ListProps } from \"../list\";\n\nimport {\n  type CollectionItem,\n  CollectionProvider,\n  type SelectionProps,\n  type SelectionStrategy,\n  type SingleSelectionStrategy,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { useCombobox } from \"./useCombobox\";\n\nexport interface ComboBoxProps<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\",\n> extends Omit<\n      DropdownBaseProps,\n      \"triggerComponent\" | \"onBlur\" | \"onChange\" | \"onFocus\"\n    >,\n    Pick<InputProps, \"onBlur\" | \"onChange\" | \"onFocus\" | \"onSelect\">,\n    Pick<\n      ListProps<Item, Selection>,\n      \"ListItem\" | \"itemToString\" | \"source\" | \"width\"\n    >,\n    Pick<\n      SelectionProps<Item, Selection>,\n      \"onSelectionChange\" | \"selectionStrategy\"\n    > {\n  InputProps?: InputProps;\n  ListProps?: Omit<\n    ListProps<Item, Selection>,\n    \"ListItem\" | \"itemToString\" | \"source\"\n  >;\n  allowFreeText?: boolean;\n  defaultValue?: string;\n  getFilterRegex?: (inputValue: string) => RegExp;\n  stringToItem?: (value?: string) => Item | null | undefined;\n  value?: string;\n}\n\nexport const ComboBox = forwardRef(function Combobox<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\",\n>(\n  {\n    InputProps,\n    ListProps,\n    ListItem,\n    \"aria-label\": ariaLabel,\n    allowFreeText,\n    children,\n    defaultIsOpen,\n    defaultValue,\n    disabled,\n    onBlur,\n    onFocus,\n    onChange,\n    onSelect,\n    getFilterRegex,\n    id: idProp,\n    isOpen: isOpenProp,\n    itemToString,\n    onOpenChange: onOpenChangeProp,\n    onSelectionChange,\n    selectionStrategy,\n    source,\n    stringToItem,\n    value: valueProp,\n    width = 180,\n    ...props\n  }: ComboBoxProps<Item, Selection>,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const id = useId(idProp);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    children,\n    options: {\n      filterPattern: valueProp ?? defaultValue,\n      getFilterRegex,\n      itemToString,\n    },\n  });\n\n  const {\n    focusVisible,\n    highlightedIndex,\n    inputProps,\n    isOpen,\n    listHandlers,\n    listControlProps: controlProps,\n    onOpenChange,\n    selected,\n  } = useCombobox<Item, Selection>({\n    InputProps,\n    allowFreeText,\n    ariaLabel,\n    collectionHook,\n    defaultIsOpen,\n    defaultValue,\n    disabled,\n    onBlur,\n    onFocus,\n    onChange,\n    onSelect,\n    id,\n    isOpen: isOpenProp,\n    itemToString,\n    label: \"ComboBox\",\n    onOpenChange: onOpenChangeProp,\n    onSelectionChange,\n    selectionStrategy,\n    stringToItem,\n    value: valueProp,\n  });\n\n  const collectionItemsToItem = useCallback(\n    (\n      sel?: CollectionItem<Item> | null | CollectionItem<Item>[],\n    ):\n      | undefined\n      | (Selection extends SingleSelectionStrategy ? Item | null : Item[]) => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (Array.isArray(sel)) {\n        return sel.map((i) => i.value) as returnType;\n      }\n      if (sel) {\n        return sel.value as returnType;\n      }\n      return sel as returnType;\n    },\n    [],\n  );\n\n  return (\n    <CollectionProvider<Item> collectionHook={collectionHook}>\n      <DropdownBase\n        {...props}\n        fullWidth\n        id={id}\n        isOpen={isOpen}\n        onOpenChange={onOpenChange}\n        openOnFocus\n        ref={forwardedRef}\n        width={width}\n      >\n        <Input\n          {...inputProps}\n          disabled={disabled}\n          // ref={useForkRef(setInputRef, setHookInputRef)}\n          {...controlProps}\n        />\n\n        <List<Item, Selection>\n          {...ListProps}\n          ListItem={ListItem}\n          focusVisible={focusVisible}\n          highlightedIndex={highlightedIndex}\n          itemTextHighlightPattern={inputProps.value || undefined}\n          id={`${id}-list`}\n          listHandlers={listHandlers}\n          onSelectionChange={onSelectionChange}\n          selected={collectionItemsToItem(selected)}\n          selectionStrategy={selectionStrategy}\n        />\n      </DropdownBase>\n    </CollectionProvider>\n  );\n}) as <Item, Selection extends SelectionStrategy = \"default\">(\n  props: ComboBoxProps<Item, Selection> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  },\n) => ReactElement<ComboBoxProps<Item, Selection>>;\n"],"names":["forwardRef","useId","useCollectionItems","useCombobox","useCallback","jsx","CollectionProvider","jsxs","DropdownBase","Input","List"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAqDa,MAAA,QAAA,GAAWA,gBAAW,CAAA,SAAS,QAI1C,CAAA;AAAA,EACE,UAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAc,EAAA,SAAA;AAAA,EACd,aAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAA;AAAA,EACA,EAAI,EAAA,MAAA;AAAA,EACJ,MAAQ,EAAA,UAAA;AAAA,EACR,YAAA;AAAA,EACA,YAAc,EAAA,gBAAA;AAAA,EACd,iBAAA;AAAA,EACA,iBAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,KAAQ,GAAA,GAAA;AAAA,EACL,GAAA,KAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAM,MAAA,EAAA,GAAKC,eAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,MAAM,iBAAiBC,qCAAyB,CAAA;AAAA,IAC9C,EAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAS,EAAA;AAAA,MACP,eAAe,SAAa,IAAA,IAAA,GAAA,SAAA,GAAA,YAAA;AAAA,MAC5B,cAAA;AAAA,MACA,YAAA;AAAA,KACF;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,YAAA;AAAA,IACA,gBAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAkB,EAAA,YAAA;AAAA,IAClB,YAAA;AAAA,IACA,QAAA;AAAA,MACEC,uBAA6B,CAAA;AAAA,IAC/B,UAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,EAAA;AAAA,IACA,MAAQ,EAAA,UAAA;AAAA,IACR,YAAA;AAAA,IACA,KAAO,EAAA,UAAA;AAAA,IACP,YAAc,EAAA,gBAAA;AAAA,IACd,iBAAA;AAAA,IACA,iBAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,qBAAwB,GAAAC,iBAAA;AAAA,IAC5B,CACE,GAGwE,KAAA;AAIxE,MAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,GAAG,CAAG,EAAA;AACtB,QAAA,OAAO,GAAI,CAAA,GAAA,CAAI,CAAC,CAAA,KAAM,EAAE,KAAK,CAAA,CAAA;AAAA,OAC/B;AACA,MAAA,IAAI,GAAK,EAAA;AACP,QAAA,OAAO,GAAI,CAAA,KAAA,CAAA;AAAA,OACb;AACA,MAAO,OAAA,GAAA,CAAA;AAAA,KACT;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAAC,qCAAA,EAAA;AAAA,IAAyB,cAAA;AAAA,IACxB,QAAC,kBAAAC,eAAA,CAAAC,yBAAA,EAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAS,EAAA,IAAA;AAAA,MACT,EAAA;AAAA,MACA,MAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAW,EAAA,IAAA;AAAA,MACX,GAAK,EAAA,YAAA;AAAA,MACL,KAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAACH,cAAA,CAAAI,uBAAA,EAAA;AAAA,UACE,GAAG,UAAA;AAAA,UACJ,QAAA;AAAA,UAEC,GAAG,YAAA;AAAA,SACN,CAAA;AAAA,wBAECJ,cAAA,CAAAK,SAAA,EAAA;AAAA,UACE,GAAG,SAAA;AAAA,UACJ,QAAA;AAAA,UACA,YAAA;AAAA,UACA,gBAAA;AAAA,UACA,wBAAA,EAA0B,WAAW,KAAS,IAAA,KAAA,CAAA;AAAA,UAC9C,IAAI,CAAG,EAAA,EAAA,CAAA,KAAA,CAAA;AAAA,UACP,YAAA;AAAA,UACA,iBAAA;AAAA,UACA,QAAA,EAAU,sBAAsB,QAAQ,CAAA;AAAA,UACxC,iBAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import { useIdMemo as useId } from \"@salt-ds/core\";\nimport {\n  type ForwardedRef,\n  type ReactElement,\n  forwardRef,\n  useCallback,\n} from \"react\";\n\nimport { DropdownBase, type DropdownBaseProps } from \"../dropdown\";\nimport {\n  InputLegacy as Input,\n  type InputLegacyProps as InputProps,\n} from \"../input-legacy\";\nimport { List, type ListProps } from \"../list\";\n\nimport {\n  type CollectionItem,\n  CollectionProvider,\n  type SelectionProps,\n  type SelectionStrategy,\n  type SingleSelectionStrategy,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { useCombobox } from \"./useCombobox\";\n\nexport interface ComboBoxProps<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\",\n> extends Omit<\n      DropdownBaseProps,\n      \"triggerComponent\" | \"onBlur\" | \"onChange\" | \"onFocus\"\n    >,\n    Pick<InputProps, \"onBlur\" | \"onChange\" | \"onFocus\" | \"onSelect\">,\n    Pick<\n      ListProps<Item, Selection>,\n      \"ListItem\" | \"itemToString\" | \"source\" | \"width\"\n    >,\n    Pick<\n      SelectionProps<Item, Selection>,\n      \"onSelectionChange\" | \"selectionStrategy\"\n    > {\n  InputProps?: InputProps;\n  ListProps?: Omit<\n    ListProps<Item, Selection>,\n    \"ListItem\" | \"itemToString\" | \"source\"\n  >;\n  allowFreeText?: boolean;\n  defaultValue?: string;\n  getFilterRegex?: (inputValue: string) => RegExp;\n  stringToItem?: (value?: string) => Item | null | undefined;\n  value?: string;\n}\n\nexport const ComboBox = forwardRef(function Combobox<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\",\n>(\n  {\n    InputProps,\n    ListProps,\n    ListItem,\n    \"aria-label\": ariaLabel,\n    allowFreeText,\n    children,\n    defaultIsOpen,\n    defaultValue,\n    disabled,\n    onBlur,\n    onFocus,\n    onChange,\n    onSelect,\n    getFilterRegex,\n    id: idProp,\n    isOpen: isOpenProp,\n    itemToString,\n    onOpenChange: onOpenChangeProp,\n    onSelectionChange,\n    selectionStrategy,\n    source,\n    stringToItem,\n    value: valueProp,\n    width = 180,\n    ...props\n  }: ComboBoxProps<Item, Selection>,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const id = useId(idProp);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    children,\n    options: {\n      filterPattern: valueProp ?? defaultValue,\n      getFilterRegex,\n      itemToString,\n    },\n  });\n\n  const {\n    focusVisible,\n    highlightedIndex,\n    inputProps,\n    isOpen,\n    listHandlers,\n    listControlProps: controlProps,\n    onOpenChange,\n    selected,\n  } = useCombobox<Item, Selection>({\n    InputProps,\n    allowFreeText,\n    ariaLabel,\n    collectionHook,\n    defaultIsOpen,\n    defaultValue,\n    disabled,\n    onBlur,\n    onFocus,\n    onChange,\n    onSelect,\n    id,\n    isOpen: isOpenProp,\n    itemToString,\n    label: \"ComboBox\",\n    onOpenChange: onOpenChangeProp,\n    onSelectionChange,\n    selectionStrategy,\n    stringToItem,\n    value: valueProp,\n  });\n\n  const collectionItemsToItem = useCallback(\n    (\n      sel?: CollectionItem<Item> | null | CollectionItem<Item>[],\n    ):\n      | undefined\n      | (Selection extends SingleSelectionStrategy ? Item | null : Item[]) => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (Array.isArray(sel)) {\n        return sel.map((i) => i.value) as returnType;\n      }\n      if (sel) {\n        return sel.value as returnType;\n      }\n      return sel as returnType;\n    },\n    [],\n  );\n\n  return (\n    <CollectionProvider<Item> collectionHook={collectionHook}>\n      <DropdownBase\n        {...props}\n        fullWidth\n        id={id}\n        isOpen={isOpen}\n        onOpenChange={onOpenChange}\n        openOnFocus\n        ref={forwardedRef}\n        width={width}\n      >\n        <Input\n          {...inputProps}\n          disabled={disabled}\n          // ref={useForkRef(setInputRef, setHookInputRef)}\n          {...controlProps}\n        />\n\n        <List<Item, Selection>\n          {...ListProps}\n          ListItem={ListItem}\n          focusVisible={focusVisible}\n          highlightedIndex={highlightedIndex}\n          itemTextHighlightPattern={inputProps.value || undefined}\n          id={`${id}-list`}\n          listHandlers={listHandlers}\n          onSelectionChange={onSelectionChange}\n          selected={collectionItemsToItem(selected)}\n          selectionStrategy={selectionStrategy}\n        />\n      </DropdownBase>\n    </CollectionProvider>\n  );\n}) as <Item, Selection extends SelectionStrategy = \"default\">(\n  props: ComboBoxProps<Item, Selection> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  },\n) => ReactElement<ComboBoxProps<Item, Selection>>;\n"],"names":["forwardRef","useId","useCollectionItems","useCombobox","useCallback","jsx","CollectionProvider","jsxs","DropdownBase","Input","List"],"mappings":"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"}