@salt-ds/lab 1.0.0-alpha.54 → 1.0.0-alpha.56

package/dist-cjs/color-chooser/HexInput.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');
@@ -19,7 +17,6 @@ const HexInput = ({
   disableAlphaChooser,
   onSubmit
 }) => {
-  var _a;
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
     testId: "salt-hex-input",
@@ -48,23 +45,20 @@ const HexInput = ({
   const handleOnBlurHex = (e) => {
     ColorHelpers.isValidHex(hexInputValue) && onSubmit(hexInputValue, e);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    className: clsx.clsx(withBaseName()),
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", {
-        className: clsx.clsx(withBaseName("hashSign")),
-        children: "#"
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx(InputLegacy.InputLegacy, {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(withBaseName()), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(withBaseName("hashSign")), children: "#" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InputLegacy.InputLegacy,
+      {
         "data-testid": "hex-input",
         className: clsx.clsx(withBaseName("input")),
-        value: (_a = hexInputValue == null ? void 0 : hexInputValue.toString().replace("#", "").toUpperCase()) != null ? _a : "",
+        value: (hexInputValue == null ? void 0 : hexInputValue.toString().replace("#", "").toUpperCase()) ?? "",
         onChange: handleHexInputChange,
         onKeyDown: handleKeyDownHex,
         onBlur: handleOnBlurHex
-      })
-    ]
-  });
+      }
+    )
+  ] });
 };
 
 exports.HexInput = HexInput;

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

@@ -1 +1 @@
-{"version":3,"file":"HexInput.js","sources":["../src/color-chooser/HexInput.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\";\nimport { useEffect, useState } from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\nimport { isValidHex } from \"./ColorHelpers\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport hexInputCss from \"./HexInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserHexInput\");\n\ninterface HexInputProps {\n  hexValue: string | undefined;\n  disableAlphaChooser: boolean;\n  onSubmit: (hex: string | undefined, e?: ChangeEvent) => void;\n}\n\nexport const HexInput = ({\n  hexValue,\n  disableAlphaChooser,\n  onSubmit,\n}: HexInputProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-hex-input\",\n    css: hexInputCss,\n    window: targetWindow,\n  });\n\n  const [hexInputValue, setHexInputValue] = useState<string | undefined>(\n    hexValue,\n  );\n\n  useEffect(() => {\n    setHexInputValue(hexValue);\n  }, [hexValue]);\n\n  const handleHexInputChange = (\n    event: ChangeEvent<HTMLInputElement>,\n    value: string,\n  ): void => {\n    if (disableAlphaChooser && value.length < 7) {\n      setHexInputValue(`#${value}`);\n    }\n    if (!disableAlphaChooser) {\n      setHexInputValue(`#${value}`);\n    }\n  };\n\n  const handleKeyDownHex = (e: KeyboardEvent<HTMLInputElement>): void => {\n    if (e.key === \"Enter\") {\n      isValidHex(hexInputValue) && onSubmit(hexInputValue);\n    }\n  };\n\n  const handleOnBlurHex = (e: FocusEvent<HTMLInputElement>): void => {\n    isValidHex(hexInputValue) && onSubmit(hexInputValue, e);\n  };\n\n  return (\n    <div className={clsx(withBaseName())}>\n      <span className={clsx(withBaseName(\"hashSign\"))}>#</span>\n      <Input\n        data-testid=\"hex-input\"\n        className={clsx(withBaseName(\"input\"))}\n        value={hexInputValue?.toString().replace(\"#\", \"\").toUpperCase() ?? \"\"}\n        onChange={handleHexInputChange}\n        onKeyDown={handleKeyDownHex}\n        onBlur={handleOnBlurHex}\n      />\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","hexInputCss","useState","useEffect","isValidHex","jsxs","clsx","jsx","Input"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA,CAAA;AAQrD,MAAM,WAAW,CAAC;AAAA,EACvB,QAAA;AAAA,EACA,mBAAA;AAAA,EACA,QAAA;AACF,CAAkC,KAAA;AAxBlC,EAAA,IAAA,EAAA,CAAA;AAyBE,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAAC,cAAA;AAAA,IACxC,QAAA;AAAA,GACF,CAAA;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,gBAAA,CAAiB,QAAQ,CAAA,CAAA;AAAA,GAC3B,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,oBAAA,GAAuB,CAC3B,KAAA,EACA,KACS,KAAA;AACT,IAAI,IAAA,mBAAA,IAAuB,KAAM,CAAA,MAAA,GAAS,CAAG,EAAA;AAC3C,MAAA,gBAAA,CAAiB,IAAI,KAAO,CAAA,CAAA,CAAA,CAAA;AAAA,KAC9B;AACA,IAAA,IAAI,CAAC,mBAAqB,EAAA;AACxB,MAAA,gBAAA,CAAiB,IAAI,KAAO,CAAA,CAAA,CAAA,CAAA;AAAA,KAC9B;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,CAA6C,KAAA;AACrE,IAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,MAAWC,uBAAA,CAAA,aAAa,CAAK,IAAA,QAAA,CAAS,aAAa,CAAA,CAAA;AAAA,KACrD;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,CAA0C,KAAA;AACjE,IAAAA,uBAAA,CAAW,aAAa,CAAA,IAAK,QAAS,CAAA,aAAA,EAAe,CAAC,CAAA,CAAA;AAAA,GACxD,CAAA;AAEA,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAc,CAAA;AAAA,IACjC,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAW,EAAAD,SAAA,CAAK,YAAa,CAAA,UAAU,CAAC,CAAA;AAAA,QAAG,QAAA,EAAA,GAAA;AAAA,OAAC,CAAA;AAAA,sBACjDC,cAAA,CAAAC,uBAAA,EAAA;AAAA,QACC,aAAY,EAAA,WAAA;AAAA,QACZ,SAAW,EAAAF,SAAA,CAAK,YAAa,CAAA,OAAO,CAAC,CAAA;AAAA,QACrC,QAAO,EAAe,GAAA,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,QAAA,EAAA,CAAW,QAAQ,GAAK,EAAA,EAAA,CAAA,CAAI,kBAA3C,IAA4D,GAAA,EAAA,GAAA,EAAA;AAAA,QACnE,QAAU,EAAA,oBAAA;AAAA,QACV,SAAW,EAAA,gBAAA;AAAA,QACX,MAAQ,EAAA,eAAA;AAAA,OACV,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"HexInput.js","sources":["../src/color-chooser/HexInput.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\";\nimport { useEffect, useState } from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\nimport { isValidHex } from \"./ColorHelpers\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport hexInputCss from \"./HexInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserHexInput\");\n\ninterface HexInputProps {\n  hexValue: string | undefined;\n  disableAlphaChooser: boolean;\n  onSubmit: (hex: string | undefined, e?: ChangeEvent) => void;\n}\n\nexport const HexInput = ({\n  hexValue,\n  disableAlphaChooser,\n  onSubmit,\n}: HexInputProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-hex-input\",\n    css: hexInputCss,\n    window: targetWindow,\n  });\n\n  const [hexInputValue, setHexInputValue] = useState<string | undefined>(\n    hexValue,\n  );\n\n  useEffect(() => {\n    setHexInputValue(hexValue);\n  }, [hexValue]);\n\n  const handleHexInputChange = (\n    event: ChangeEvent<HTMLInputElement>,\n    value: string,\n  ): void => {\n    if (disableAlphaChooser && value.length < 7) {\n      setHexInputValue(`#${value}`);\n    }\n    if (!disableAlphaChooser) {\n      setHexInputValue(`#${value}`);\n    }\n  };\n\n  const handleKeyDownHex = (e: KeyboardEvent<HTMLInputElement>): void => {\n    if (e.key === \"Enter\") {\n      isValidHex(hexInputValue) && onSubmit(hexInputValue);\n    }\n  };\n\n  const handleOnBlurHex = (e: FocusEvent<HTMLInputElement>): void => {\n    isValidHex(hexInputValue) && onSubmit(hexInputValue, e);\n  };\n\n  return (\n    <div className={clsx(withBaseName())}>\n      <span className={clsx(withBaseName(\"hashSign\"))}>#</span>\n      <Input\n        data-testid=\"hex-input\"\n        className={clsx(withBaseName(\"input\"))}\n        value={hexInputValue?.toString().replace(\"#\", \"\").toUpperCase() ?? \"\"}\n        onChange={handleHexInputChange}\n        onKeyDown={handleKeyDownHex}\n        onBlur={handleOnBlurHex}\n      />\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","hexInputCss","useState","useEffect","isValidHex","clsx","jsx","Input"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA;AAQrD,MAAM,WAAW,CAAC;AAAA,EACvB,QAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAkC,KAAA;AAChC,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAAC,cAAA;AAAA,IACxC;AAAA,GACF;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,gBAAA,CAAiB,QAAQ,CAAA;AAAA,GAC3B,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAM,MAAA,oBAAA,GAAuB,CAC3B,KAAA,EACA,KACS,KAAA;AACT,IAAI,IAAA,mBAAA,IAAuB,KAAM,CAAA,MAAA,GAAS,CAAG,EAAA;AAC3C,MAAiB,gBAAA,CAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;AAAA;AAE9B,IAAA,IAAI,CAAC,mBAAqB,EAAA;AACxB,MAAiB,gBAAA,CAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;AAAA;AAC9B,GACF;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,CAA6C,KAAA;AACrE,IAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,MAAWC,uBAAA,CAAA,aAAa,CAAK,IAAA,QAAA,CAAS,aAAa,CAAA;AAAA;AACrD,GACF;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,CAA0C,KAAA;AACjE,IAAAA,uBAAA,CAAW,aAAa,CAAA,IAAK,QAAS,CAAA,aAAA,EAAe,CAAC,CAAA;AAAA,GACxD;AAEA,EAAA,uCACG,KAAI,EAAA,EAAA,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAc,CACjC,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,UAAK,SAAW,EAAAD,SAAA,CAAK,aAAa,UAAU,CAAC,GAAG,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,oBAClDC,cAAA;AAAA,MAACC,uBAAA;AAAA,MAAA;AAAA,QACC,aAAY,EAAA,WAAA;AAAA,QACZ,SAAW,EAAAF,SAAA,CAAK,YAAa,CAAA,OAAO,CAAC,CAAA;AAAA,QACrC,QAAO,aAAe,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,QAAA,EAAA,CAAW,OAAQ,CAAA,GAAA,EAAK,IAAI,WAAiB,EAAA,KAAA,EAAA;AAAA,QACnE,QAAU,EAAA,oBAAA;AAAA,QACV,SAAW,EAAA,gBAAA;AAAA,QACX,MAAQ,EAAA;AAAA;AAAA;AACV,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/color-chooser/RGBAInput.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');
@@ -25,43 +23,30 @@ const RGBAInput = ({
     css: RGBAInput$1,
     window: targetWindow
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", {
-        className: clsx.clsx(withBaseName("textDivOverrides")),
-        children: rgbaText
-      }),
-      ["r", "g", "b"].map((value) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: withBaseName("rgbaInputDiv"),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", {
-            className: withBaseName("rgbaText"),
-            children: value.toUpperCase()
-          }),
-          /* @__PURE__ */ jsxRuntime.jsx(RGBAInputField.RGBInput, {
-            rgbaValue,
-            value,
-            onSubmit: onSubmitRgb
-          })
-        ]
-      }, value)),
-      !disableAlphaChooser ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: clsx.clsx(withBaseName("rgbaInputDiv")),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", {
-            className: clsx.clsx(withBaseName("rgbaText")),
-            children: "A"
-          }),
-          /* @__PURE__ */ jsxRuntime.jsx(AlphaInputField.AlphaInput, {
-            alphaValue: Number.parseFloat(rgbaValue.a.toFixed(2)),
-            onSubmit: onSubmitAlpha
-          })
-        ]
-      }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: clsx.clsx(withBaseName("alphaSpacerDiv"))
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(withBaseName("textDivOverrides")), children: rgbaText }),
+    ["r", "g", "b"].map((value) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("rgbaInputDiv"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("rgbaText"), children: value.toUpperCase() }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        RGBAInputField.RGBInput,
+        {
+          rgbaValue,
+          value,
+          onSubmit: onSubmitRgb
+        }
+      )
+    ] }, value)),
+    !disableAlphaChooser ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(withBaseName("rgbaInputDiv")), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(withBaseName("rgbaText")), children: "A" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AlphaInputField.AlphaInput,
+        {
+          alphaValue: Number.parseFloat(rgbaValue.a.toFixed(2)),
+          onSubmit: onSubmitAlpha
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName("alphaSpacerDiv")) })
+  ] });
 };
 
 exports.RGBAInput = RGBAInput;

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

@@ -1 +1 @@
-{"version":3,"file":"RGBAInput.js","sources":["../src/color-chooser/RGBAInput.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport type { ChangeEvent } from \"react\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport type { RGBAValue } from \"./Color\";\nimport { RGBInput } from \"./RGBAInputField\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { useWindow } from \"@salt-ds/window\";\n\nimport rgbaInputCss from \"./RGBAInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\ninterface RGBAInputProps {\n  disableAlphaChooser: boolean;\n  rgbaText: string;\n  rgbaValue: RGBAValue;\n  onSubmitRgb: (\n    rgbaValue: RGBAValue,\n    e?: ChangeEvent<Element> | undefined,\n  ) => void;\n  onSubmitAlpha: (alpha: number, e?: ChangeEvent<Element> | undefined) => void;\n}\n\nexport const RGBAInput = ({\n  disableAlphaChooser,\n  rgbaText,\n  rgbaValue,\n  onSubmitAlpha,\n  onSubmitRgb,\n}: RGBAInputProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-rgba-input\",\n    css: rgbaInputCss,\n    window: targetWindow,\n  });\n\n  return (\n    <>\n      <span className={clsx(withBaseName(\"textDivOverrides\"))}>{rgbaText}</span>\n      {[\"r\", \"g\", \"b\"].map((value) => (\n        <div className={withBaseName(\"rgbaInputDiv\")} key={value}>\n          <span className={withBaseName(\"rgbaText\")}>\n            {value.toUpperCase()}\n          </span>\n          <RGBInput\n            rgbaValue={rgbaValue}\n            value={value as \"r\" | \"g\" | \"b\"}\n            onSubmit={onSubmitRgb}\n          />\n        </div>\n      ))}\n      {!disableAlphaChooser ? (\n        <div className={clsx(withBaseName(\"rgbaInputDiv\"))}>\n          <span className={clsx(withBaseName(\"rgbaText\"))}>A</span>\n          <AlphaInput\n            alphaValue={Number.parseFloat(rgbaValue.a.toFixed(2))}\n            onSubmit={onSubmitAlpha}\n          />\n        </div>\n      ) : (\n        <div className={clsx(withBaseName(\"alphaSpacerDiv\"))} />\n      )}\n    </>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","rgbaInputCss","jsxs","Fragment","jsx","clsx","RGBInput","AlphaInput"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA,CAAA;AAa7C,MAAM,YAAY,CAAC;AAAA,EACxB,mBAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAW,EAAAC,SAAA,CAAK,YAAa,CAAA,kBAAkB,CAAC,CAAA;AAAA,QAAI,QAAA,EAAA,QAAA;AAAA,OAAS,CAAA;AAAA,MAClE,CAAC,KAAK,GAAK,EAAA,GAAG,EAAE,GAAI,CAAA,CAAC,0BACnBH,eAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,QACzC,QAAA,EAAA;AAAA,0BAACE,cAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,YACrC,gBAAM,WAAY,EAAA;AAAA,WACrB,CAAA;AAAA,0BACCA,cAAA,CAAAE,uBAAA,EAAA;AAAA,YACC,SAAA;AAAA,YACA,KAAA;AAAA,YACA,QAAU,EAAA,WAAA;AAAA,WACZ,CAAA;AAAA,SAAA;AAAA,OAAA,EARiD,KASnD,CACD,CAAA;AAAA,MACA,CAAC,sCACCJ,eAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAAG,SAAA,CAAK,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,QAC/C,QAAA,EAAA;AAAA,0BAACD,cAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAW,EAAAC,SAAA,CAAK,YAAa,CAAA,UAAU,CAAC,CAAA;AAAA,YAAG,QAAA,EAAA,GAAA;AAAA,WAAC,CAAA;AAAA,0BACjDD,cAAA,CAAAG,0BAAA,EAAA;AAAA,YACC,YAAY,MAAO,CAAA,UAAA,CAAW,UAAU,CAAE,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA;AAAA,YACpD,QAAU,EAAA,aAAA;AAAA,WACZ,CAAA;AAAA,SAAA;AAAA,OACF,oBAECH,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,CAAA,gBAAgB,CAAC,CAAA;AAAA,OAAG,CAAA;AAAA,KAAA;AAAA,GAE1D,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"RGBAInput.js","sources":["../src/color-chooser/RGBAInput.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport type { ChangeEvent } from \"react\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport type { RGBAValue } from \"./Color\";\nimport { RGBInput } from \"./RGBAInputField\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { useWindow } from \"@salt-ds/window\";\n\nimport rgbaInputCss from \"./RGBAInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\ninterface RGBAInputProps {\n  disableAlphaChooser: boolean;\n  rgbaText: string;\n  rgbaValue: RGBAValue;\n  onSubmitRgb: (\n    rgbaValue: RGBAValue,\n    e?: ChangeEvent<Element> | undefined,\n  ) => void;\n  onSubmitAlpha: (alpha: number, e?: ChangeEvent<Element> | undefined) => void;\n}\n\nexport const RGBAInput = ({\n  disableAlphaChooser,\n  rgbaText,\n  rgbaValue,\n  onSubmitAlpha,\n  onSubmitRgb,\n}: RGBAInputProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-rgba-input\",\n    css: rgbaInputCss,\n    window: targetWindow,\n  });\n\n  return (\n    <>\n      <span className={clsx(withBaseName(\"textDivOverrides\"))}>{rgbaText}</span>\n      {[\"r\", \"g\", \"b\"].map((value) => (\n        <div className={withBaseName(\"rgbaInputDiv\")} key={value}>\n          <span className={withBaseName(\"rgbaText\")}>\n            {value.toUpperCase()}\n          </span>\n          <RGBInput\n            rgbaValue={rgbaValue}\n            value={value as \"r\" | \"g\" | \"b\"}\n            onSubmit={onSubmitRgb}\n          />\n        </div>\n      ))}\n      {!disableAlphaChooser ? (\n        <div className={clsx(withBaseName(\"rgbaInputDiv\"))}>\n          <span className={clsx(withBaseName(\"rgbaText\"))}>A</span>\n          <AlphaInput\n            alphaValue={Number.parseFloat(rgbaValue.a.toFixed(2))}\n            onSubmit={onSubmitAlpha}\n          />\n        </div>\n      ) : (\n        <div className={clsx(withBaseName(\"alphaSpacerDiv\"))} />\n      )}\n    </>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","rgbaInputCss","jsxs","Fragment","jsx","clsx","RGBInput","AlphaInput"],"mappings":";;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAa7C,MAAM,YAAY,CAAC;AAAA,EACxB,mBAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,uBAEIC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,UAAK,SAAW,EAAAC,SAAA,CAAK,aAAa,kBAAkB,CAAC,GAAI,QAAS,EAAA,QAAA,EAAA,CAAA;AAAA,IAClE,CAAC,GAAA,EAAK,GAAK,EAAA,GAAG,CAAE,CAAA,GAAA,CAAI,CAAC,KAAA,qBACnBH,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,cAAc,CACzC,EAAA,QAAA,EAAA;AAAA,sBAAAE,cAAA,CAAC,UAAK,SAAW,EAAA,YAAA,CAAa,UAAU,CACrC,EAAA,QAAA,EAAA,KAAA,CAAM,aACT,EAAA,CAAA;AAAA,sBACAA,cAAA;AAAA,QAACE,uBAAA;AAAA,QAAA;AAAA,UACC,SAAA;AAAA,UACA,KAAA;AAAA,UACA,QAAU,EAAA;AAAA;AAAA;AACZ,KAAA,EAAA,EARiD,KASnD,CACD,CAAA;AAAA,IACA,CAAC,sCACCJ,eAAA,CAAA,KAAA,EAAA,EAAI,WAAWG,SAAK,CAAA,YAAA,CAAa,cAAc,CAAC,CAC/C,EAAA,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAAC,UAAK,SAAW,EAAAC,SAAA,CAAK,aAAa,UAAU,CAAC,GAAG,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,sBAClDD,cAAA;AAAA,QAACG,0BAAA;AAAA,QAAA;AAAA,UACC,YAAY,MAAO,CAAA,UAAA,CAAW,UAAU,CAAE,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA;AAAA,UACpD,QAAU,EAAA;AAAA;AAAA;AACZ,KACF,EAAA,CAAA,kCAEC,KAAI,EAAA,EAAA,SAAA,EAAWF,UAAK,YAAa,CAAA,gBAAgB,CAAC,CAAG,EAAA;AAAA,GAE1D,EAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/color-chooser/RGBAInputField.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');
@@ -59,16 +57,20 @@ const RGBInput = ({
     };
     onSubmit(validatedRgb, e);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(InputLegacy.InputLegacy, {
-    inputProps: {
-      "data-testid": `${value}-input`
-    },
-    className: withBaseName("rgbaInput"),
-    value: rgbaInputValue.toString(),
-    onChange: handleRGBInputChange,
-    onBlur: handleOnBlurRGB,
-    onKeyDown: handleKeyDownRGB
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    InputLegacy.InputLegacy,
+    {
+      inputProps: {
+        // @ts-ignore
+        "data-testid": `${value}-input`
+      },
+      className: withBaseName("rgbaInput"),
+      value: rgbaInputValue.toString(),
+      onChange: handleRGBInputChange,
+      onBlur: handleOnBlurRGB,
+      onKeyDown: handleKeyDownRGB
+    }
+  );
 };
 
 exports.RGBInput = RGBInput;

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

@@ -1 +1 @@
-{"version":3,"file":"RGBAInputField.js","sources":["../src/color-chooser/RGBAInputField.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport {\n  type ChangeEvent,\n  type FocusEvent,\n  type KeyboardEvent,\n  useEffect,\n  useState,\n} from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\nimport type { RGBAValue } from \"./Color\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport rgbaInputCss from \"./RGBAInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\ninterface RGBInputProps {\n  rgbaValue: RGBAValue;\n  value: \"r\" | \"g\" | \"b\";\n  onSubmit: (rgb: RGBAValue, e?: ChangeEvent) => void;\n}\n\nexport const RGBInput = ({\n  rgbaValue,\n  value,\n  onSubmit,\n}: RGBInputProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-rgba-input\",\n    css: rgbaInputCss,\n    window: targetWindow,\n  });\n\n  const [rgbaInputValue, setRgbaInputValue] = useState<number | string>(\n    rgbaValue ? rgbaValue[value] : \"\",\n  );\n\n  useEffect(() => {\n    setRgbaInputValue(rgbaValue ? rgbaValue[value] : \"\");\n  }, [rgbaValue, value]);\n\n  const handleRGBInputChange = (\n    e: ChangeEvent<HTMLInputElement>,\n    value: string,\n  ): void => {\n    let rgb: string | number;\n\n    rgb = Number.parseInt(value);\n\n    if (value.trim() === \"\" || Number.isNaN(rgb)) {\n      rgb = \"\";\n    }\n\n    setRgbaInputValue(rgb);\n  };\n\n  const handleKeyDownRGB = (e: KeyboardEvent<HTMLInputElement>): void => {\n    if (e.key === \"Enter\") {\n      const newRgb = { ...rgbaValue, [value]: e.currentTarget.value };\n      const validatedRgb = {\n        r: Math.max(0, Math.min(newRgb.r, 255)),\n        g: Math.max(0, Math.min(newRgb.g, 255)),\n        b: Math.max(0, Math.min(newRgb.b, 255)),\n        a: newRgb.a,\n      };\n\n      onSubmit(validatedRgb);\n    }\n  };\n\n  const handleOnBlurRGB = (e: FocusEvent<HTMLInputElement>): void => {\n    const newRgb = { ...rgbaValue, [value]: e.target.value };\n    const validatedRgb = {\n      r: Math.max(0, Math.min(newRgb.r, 255)),\n      g: Math.max(0, Math.min(newRgb.g, 255)),\n      b: Math.max(0, Math.min(newRgb.b, 255)),\n      a: newRgb.a,\n    };\n\n    onSubmit(validatedRgb, e);\n  };\n\n  return (\n    <Input\n      inputProps={{\n        // @ts-ignore\n        \"data-testid\": `${value}-input`,\n      }}\n      className={withBaseName(\"rgbaInput\")}\n      value={rgbaInputValue.toString()}\n      onChange={handleRGBInputChange}\n      onBlur={handleOnBlurRGB}\n      onKeyDown={handleKeyDownRGB}\n    />\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","rgbaInputCss","useState","useEffect","value","jsx","Input"],"mappings":"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"}
+{"version":3,"file":"RGBAInputField.js","sources":["../src/color-chooser/RGBAInputField.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport {\n  type ChangeEvent,\n  type FocusEvent,\n  type KeyboardEvent,\n  useEffect,\n  useState,\n} from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\nimport type { RGBAValue } from \"./Color\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport rgbaInputCss from \"./RGBAInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\ninterface RGBInputProps {\n  rgbaValue: RGBAValue;\n  value: \"r\" | \"g\" | \"b\";\n  onSubmit: (rgb: RGBAValue, e?: ChangeEvent) => void;\n}\n\nexport const RGBInput = ({\n  rgbaValue,\n  value,\n  onSubmit,\n}: RGBInputProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-rgba-input\",\n    css: rgbaInputCss,\n    window: targetWindow,\n  });\n\n  const [rgbaInputValue, setRgbaInputValue] = useState<number | string>(\n    rgbaValue ? rgbaValue[value] : \"\",\n  );\n\n  useEffect(() => {\n    setRgbaInputValue(rgbaValue ? rgbaValue[value] : \"\");\n  }, [rgbaValue, value]);\n\n  const handleRGBInputChange = (\n    e: ChangeEvent<HTMLInputElement>,\n    value: string,\n  ): void => {\n    let rgb: string | number;\n\n    rgb = Number.parseInt(value);\n\n    if (value.trim() === \"\" || Number.isNaN(rgb)) {\n      rgb = \"\";\n    }\n\n    setRgbaInputValue(rgb);\n  };\n\n  const handleKeyDownRGB = (e: KeyboardEvent<HTMLInputElement>): void => {\n    if (e.key === \"Enter\") {\n      const newRgb = { ...rgbaValue, [value]: e.currentTarget.value };\n      const validatedRgb = {\n        r: Math.max(0, Math.min(newRgb.r, 255)),\n        g: Math.max(0, Math.min(newRgb.g, 255)),\n        b: Math.max(0, Math.min(newRgb.b, 255)),\n        a: newRgb.a,\n      };\n\n      onSubmit(validatedRgb);\n    }\n  };\n\n  const handleOnBlurRGB = (e: FocusEvent<HTMLInputElement>): void => {\n    const newRgb = { ...rgbaValue, [value]: e.target.value };\n    const validatedRgb = {\n      r: Math.max(0, Math.min(newRgb.r, 255)),\n      g: Math.max(0, Math.min(newRgb.g, 255)),\n      b: Math.max(0, Math.min(newRgb.b, 255)),\n      a: newRgb.a,\n    };\n\n    onSubmit(validatedRgb, e);\n  };\n\n  return (\n    <Input\n      inputProps={{\n        // @ts-ignore\n        \"data-testid\": `${value}-input`,\n      }}\n      className={withBaseName(\"rgbaInput\")}\n      value={rgbaInputValue.toString()}\n      onChange={handleRGBInputChange}\n      onBlur={handleOnBlurRGB}\n      onKeyDown={handleKeyDownRGB}\n    />\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","rgbaInputCss","useState","useEffect","value","jsx","Input"],"mappings":"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"}

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":";;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,wBAAwB,CAAA,CAAA;AAenD,MAAM,SAAS,CAAC;AAAA,EACrB,KAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAChB,CAAgC,KAAA;AAC9B,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,cAAc,MAAM;AACxB,IAAM,MAAA,QAAA,GAAWC,WAAM,CAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAC7C,IAAAC,wBAAA,CAAc,KAAK,CAAI,GAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,QAAS,CAAA,CAAA,CAAA,GAAK,qCAAU,QAAS,CAAA,KAAA,CAAA,CAAA;AAElE,IAAA,OAAA,CAAQ,UAAU,IAAI,CAAA,CAAA;AACtB,IAAe,cAAA,EAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,CAA2C,KAAA;AAjDpE,IAAA,IAAA,EAAA,CAAA;AAkDI,IAAA,MAAM,YAAW,EAAM,GAAAD,WAAA,CAAA,gBAAA,CAAiB,KAAK,CAAA,KAA5B,mBAA+B,QAAS,CAAA,KAAA,CAAA,CAAA;AACzD,IAAA,CAAA,CAAE,GAAQ,KAAA,OAAA,IAAW,OAAQ,CAAA,QAAA,EAAU,IAAI,CAAA,CAAA;AAC3C,IAAe,cAAA,EAAA,CAAA;AAAA,GACjB,CAAA;AAGA,EAAM,MAAA,aAAA,GAAgB,CAACE,MAA2B,KAAA;AAChD,IACEA,OAAAA,MAAAA,CAAM,WAAY,EAAA,KAAM,OACxBA,IAAAA,MAAAA,CAAM,WAAY,EAAA,CAAE,UAAW,CAAA,SAAS,CACxCA,IAAAA,MAAAA,CAAM,WAAY,EAAA,CAAE,WAAW,SAAS,CAAA,IACxCA,MAAM,CAAA,WAAA,EAAc,CAAA,UAAA,CAAW,SAAS,CAAA,IACxCA,MAAM,CAAA,WAAA,EAAc,CAAA,UAAA,CAAW,SAAS,CAAA,CAAA;AAAA,GAE5C,CAAA;AACA,EAAM,MAAA,OAAA,GAAU,CAACA,MAAAA,KAA2BA,MAAU,KAAA,OAAA,CAAA;AAEtD,EAAA,MAAM,qBAAqB,MAAM;AAC/B,IAAM,MAAA,eAAA,GAAkBF,WAAM,CAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AACpD,IAAO,OAAA,eAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,eAAA,CAAiB,SAAS,KAAO,CAAA,CAAA,GAAA,CAAA;AAAA,GAC1C,CAAA;AAEA,EAAA,uBACGG,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,eAAa,CAAU,OAAA,EAAA,KAAA,CAAA,CAAA;AAAA,IACvB,KAAO,EAAA;AAAA,MACL,YAAY,kBAAmB,EAAA;AAAA,KACjC;AAAA,IACA,WAAWC,SAAK,CAAA;AAAA,MACd,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,MAC1B,CAAC,YAAa,CAAA,aAAa,CAAI,GAAA,WAAA;AAAA,MAC/B,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,cAAc,KAAK,CAAA;AAAA,MACjD,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,QAAQ,KAAK,CAAA;AAAA,MAC5C,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,CAAC,QAAQ,KAAK,CAAA,IAAK,CAAC,aAAA,CAAc,KAAK,CAAA;AAAA,KAClE,CAAA;AAAA,IACD,OAAS,EAAA,WAAA;AAAA,IACT,QAAU,EAAA,CAAA;AAAA,IACV,SAAW,EAAA,aAAA;AAAA,GACb,CAAA,CAAA;AAEJ;;;;"}
+{"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)",