@salt-ds/lab 1.0.0-alpha.1 → 1.0.0-alpha.100

package/dist-es/color-chooser/HexInput.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { useState, useEffect } from 'react';
+import { InputLegacy } from '../input-legacy/InputLegacy.js';
+import '../input-legacy/StaticInputAdornment.js';
+import { isValidHex } from './ColorHelpers.js';
+import css_248z from './HexInput.css.js';
+
+const withBaseName = makePrefixer("saltColorChooserHexInput");
+const HexInput = ({
+  hexValue,
+  disableAlphaChooser,
+  onSubmit
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-hex-input",
+    css: css_248z,
+    window: targetWindow
+  });
+  const [hexInputValue, setHexInputValue] = useState(
+    hexValue
+  );
+  useEffect(() => {
+    setHexInputValue(hexValue);
+  }, [hexValue]);
+  const handleHexInputChange = (event, value) => {
+    if (disableAlphaChooser && value.length < 7) {
+      setHexInputValue(`#${value}`);
+    }
+    if (!disableAlphaChooser) {
+      setHexInputValue(`#${value}`);
+    }
+  };
+  const handleKeyDownHex = (e) => {
+    if (e.key === "Enter") {
+      isValidHex(hexInputValue) && onSubmit(hexInputValue);
+    }
+  };
+  const handleOnBlurHex = (e) => {
+    isValidHex(hexInputValue) && onSubmit(hexInputValue, e);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: clsx(withBaseName()), children: [
+    /* @__PURE__ */ jsx("span", { className: clsx(withBaseName("hashSign")), children: "#" }),
+    /* @__PURE__ */ jsx(
+      InputLegacy,
+      {
+        "data-testid": "hex-input",
+        className: clsx(withBaseName("input")),
+        value: (hexInputValue == null ? void 0 : hexInputValue.toString().replace("#", "").toUpperCase()) ?? "",
+        onChange: handleHexInputChange,
+        onKeyDown: handleKeyDownHex,
+        onBlur: handleOnBlurHex
+      }
+    )
+  ] });
+};
+
+export { HexInput };
+//# sourceMappingURL=HexInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HexInput.js","sources":["../src/color-chooser/HexInput.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, FocusEvent, KeyboardEvent } from \"react\";\nimport { useEffect, useState } from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\nimport { isValidHex } from \"./ColorHelpers\";\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":["hexInputCss","Input"],"mappings":";;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA;AAQrD,MAAM,WAAW,CAAC;AAAA,EACvB,QAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAA,KAAkC;AAChC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,gBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,QAAA;AAAA,IACxC;AAAA,GACF;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,gBAAA,CAAiB,QAAQ,CAAA;AAAA,EAC3B,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,MAAM,oBAAA,GAAuB,CAC3B,KAAA,EACA,KAAA,KACS;AACT,IAAA,IAAI,mBAAA,IAAuB,KAAA,CAAM,MAAA,GAAS,CAAA,EAAG;AAC3C,MAAA,gBAAA,CAAiB,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CAAA;AAAA,IAC9B;AACA,IAAA,IAAI,CAAC,mBAAA,EAAqB;AACxB,MAAA,gBAAA,CAAiB,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CAAA;AAAA,IAC9B;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,gBAAA,GAAmB,CAAC,CAAA,KAA6C;AACrE,IAAA,IAAI,CAAA,CAAE,QAAQ,OAAA,EAAS;AACrB,MAAA,UAAA,CAAW,aAAa,CAAA,IAAK,QAAA,CAAS,aAAa,CAAA;AAAA,IACrD;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,eAAA,GAAkB,CAAC,CAAA,KAA0C;AACjE,IAAA,UAAA,CAAW,aAAa,CAAA,IAAK,QAAA,CAAS,aAAA,EAAe,CAAC,CAAA;AAAA,EACxD,CAAA;AAEA,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,YAAA,EAAc,CAAA,EACjC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAK,SAAA,EAAW,IAAA,CAAK,aAAa,UAAU,CAAC,GAAG,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,oBAClD,GAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAY,WAAA;AAAA,QACZ,SAAA,EAAW,IAAA,CAAK,YAAA,CAAa,OAAO,CAAC,CAAA;AAAA,QACrC,QAAO,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,QAAA,EAAA,CAAW,OAAA,CAAQ,GAAA,EAAK,IAAI,WAAA,EAAA,KAAiB,EAAA;AAAA,QACnE,QAAA,EAAU,oBAAA;AAAA,QACV,SAAA,EAAW,gBAAA;AAAA,QACX,MAAA,EAAQ;AAAA;AAAA;AACV,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist-es/color-chooser/RGBAInput.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltColorChooser-rgbaInput {\n  width: var(--salt-size-unit);\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);\n  padding-top: var(--salt-size-unit);\n}\n\n.saltColorChooser-opacityInput {\n  min-width: 40px !important;\n  width: 40px !important;\n  min-height: unset !important;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-rgbaText {\n  margin-top: 5px;\n  font-size: var(--salt-text-label-fontSize);\n  color: var(--salt-content-secondary-foreground);\n  padding-top: 4px;\n  padding-right: 6px;\n  padding-left: 6px;\n}\n\n.saltColorChooser-rgbaInputDiv {\n  display: flex;\n  flex-direction: row;\n  padding: 0px 0px var(--salt-size-unit) 0px;\n}\n\n.saltColorChooser-overrideInput {\n  min-width: 0em;\n  background: transparent !important;\n  color: var(--salt-content-primary-foreground);\n  border-bottom: 1px solid var(--salt-content-primary-foreground);\n}\n\n.saltColorChooser-alphaSpacerDiv {\n  height: 24px;\n}\n\n.saltColorChooser-textDivOverrides {\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  color: var(--salt-content-primary-foreground);\n  padding: 0px !important;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=RGBAInput.css.js.map

package/dist-es/color-chooser/RGBAInput.css.js.map

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

package/dist-es/color-chooser/RGBAInput.js

@@ -0,0 +1,51 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { AlphaInput } from './AlphaInputField.js';
+import css_248z from './RGBAInput.css.js';
+import { RGBInput } from './RGBAInputField.js';
+
+const withBaseName = makePrefixer("saltColorChooser");
+const RGBAInput = ({
+  disableAlphaChooser,
+  rgbaText,
+  rgbaValue,
+  onSubmitAlpha,
+  onSubmitRgb
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-rgba-input",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: clsx(withBaseName("textDivOverrides")), children: rgbaText }),
+    ["r", "g", "b"].map((value) => /* @__PURE__ */ jsxs("div", { className: withBaseName("rgbaInputDiv"), children: [
+      /* @__PURE__ */ jsx("span", { className: withBaseName("rgbaText"), children: value.toUpperCase() }),
+      /* @__PURE__ */ jsx(
+        RGBInput,
+        {
+          rgbaValue,
+          value,
+          onSubmit: onSubmitRgb
+        }
+      )
+    ] }, value)),
+    !disableAlphaChooser ? /* @__PURE__ */ jsxs("div", { className: clsx(withBaseName("rgbaInputDiv")), children: [
+      /* @__PURE__ */ jsx("span", { className: clsx(withBaseName("rgbaText")), children: "A" }),
+      /* @__PURE__ */ jsx(
+        AlphaInput,
+        {
+          alphaValue: Number.parseFloat(rgbaValue.a.toFixed(2)),
+          onSubmit: onSubmitAlpha
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx("div", { className: clsx(withBaseName("alphaSpacerDiv")) })
+  ] });
+};
+
+export { RGBAInput };
+//# sourceMappingURL=RGBAInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RGBAInput.js","sources":["../src/color-chooser/RGBAInput.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 } from \"react\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport type { RGBAValue } from \"./Color\";\nimport rgbaInputCss from \"./RGBAInput.css\";\nimport { RGBInput } from \"./RGBAInputField\";\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":["rgbaInputCss"],"mappings":";;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAa7C,MAAM,YAAY,CAAC;AAAA,EACxB,mBAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAA,KAAmC;AACjC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,iBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAK,SAAA,EAAW,IAAA,CAAK,aAAa,kBAAkB,CAAC,GAAI,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,IAClE,CAAC,GAAA,EAAK,GAAA,EAAK,GAAG,CAAA,CAAE,GAAA,CAAI,CAAC,KAAA,qBACpB,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,cAAc,CAAA,EACzC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAK,SAAA,EAAW,YAAA,CAAa,UAAU,CAAA,EACrC,QAAA,EAAA,KAAA,CAAM,aAAY,EACrB,CAAA;AAAA,sBACA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,SAAA;AAAA,UACA,KAAA;AAAA,UACA,QAAA,EAAU;AAAA;AAAA;AACZ,KAAA,EAAA,EARiD,KASnD,CACD,CAAA;AAAA,IACA,CAAC,sCACA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAW,IAAA,CAAK,YAAA,CAAa,cAAc,CAAC,CAAA,EAC/C,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAK,SAAA,EAAW,IAAA,CAAK,aAAa,UAAU,CAAC,GAAG,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,sBAClD,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,YAAY,MAAA,CAAO,UAAA,CAAW,UAAU,CAAA,CAAE,OAAA,CAAQ,CAAC,CAAC,CAAA;AAAA,UACpD,QAAA,EAAU;AAAA;AAAA;AACZ,KAAA,EACF,CAAA,uBAEC,KAAA,EAAA,EAAI,SAAA,EAAW,KAAK,YAAA,CAAa,gBAAgB,CAAC,CAAA,EAAG;AAAA,GAAA,EAE1D,CAAA;AAEJ;;;;"}

package/dist-es/color-chooser/RGBAInputField.js

@@ -0,0 +1,75 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { useState, useEffect } from 'react';
+import { InputLegacy } from '../input-legacy/InputLegacy.js';
+import '../input-legacy/StaticInputAdornment.js';
+import css_248z from './RGBAInput.css.js';
+
+const withBaseName = makePrefixer("saltColorChooser");
+const RGBInput = ({
+  rgbaValue,
+  value,
+  onSubmit
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-rgba-input",
+    css: css_248z,
+    window: targetWindow
+  });
+  const [rgbaInputValue, setRgbaInputValue] = useState(
+    rgbaValue ? rgbaValue[value] : ""
+  );
+  useEffect(() => {
+    setRgbaInputValue(rgbaValue ? rgbaValue[value] : "");
+  }, [rgbaValue, value]);
+  const handleRGBInputChange = (e, value2) => {
+    let rgb;
+    rgb = Number.parseInt(value2, 10);
+    if (value2.trim() === "" || Number.isNaN(rgb)) {
+      rgb = "";
+    }
+    setRgbaInputValue(rgb);
+  };
+  const handleKeyDownRGB = (e) => {
+    if (e.key === "Enter") {
+      const newRgb = { ...rgbaValue, [value]: e.currentTarget.value };
+      const validatedRgb = {
+        r: Math.max(0, Math.min(newRgb.r, 255)),
+        g: Math.max(0, Math.min(newRgb.g, 255)),
+        b: Math.max(0, Math.min(newRgb.b, 255)),
+        a: newRgb.a
+      };
+      onSubmit(validatedRgb);
+    }
+  };
+  const handleOnBlurRGB = (e) => {
+    const newRgb = { ...rgbaValue, [value]: e.target.value };
+    const validatedRgb = {
+      r: Math.max(0, Math.min(newRgb.r, 255)),
+      g: Math.max(0, Math.min(newRgb.g, 255)),
+      b: Math.max(0, Math.min(newRgb.b, 255)),
+      a: newRgb.a
+    };
+    onSubmit(validatedRgb, e);
+  };
+  return /* @__PURE__ */ jsx(
+    InputLegacy,
+    {
+      inputProps: {
+        // @ts-expect-error
+        "data-testid": `${value}-input`
+      },
+      className: withBaseName("rgbaInput"),
+      value: rgbaInputValue.toString(),
+      onChange: handleRGBInputChange,
+      onBlur: handleOnBlurRGB,
+      onKeyDown: handleKeyDownRGB
+    }
+  );
+};
+
+export { RGBInput };
+//# sourceMappingURL=RGBAInputField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RGBAInputField.js","sources":["../src/color-chooser/RGBAInputField.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\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\";\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, 10);\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-expect-error\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":["rgbaInputCss","value","Input"],"mappings":"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"}

package/dist-es/color-chooser/Swatch.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatch-swatch,\n.saltColorChooserSwatch-graySwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: var(--salt-cursor-hover);\n}\n\n.salt-density-touch,\n.salt-density-low,\n.salt-density-medium,\n.salt-density-high {\n  --colorChooser-swatch-density-high-size: calc(5 * var(--salt-size-unit));\n  --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-low-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-size-unit));\n}\n\n.salt-density-touch {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-touch-size);\n}\n.salt-density-low {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-low-size);\n}\n.salt-density-medium {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-medium-size);\n}\n.salt-density-high {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-high-size);\n}\n\n.saltColorChooserSwatch-swatch,\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-graySwatch {\n  width: var(--colorChooser-swatch-size-unit);\n  height: var(--colorChooser-swatch-size-unit);\n}\n\n.saltColorChooserSwatch-whiteSwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: var(--salt-cursor-hover);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch,\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch,\n.saltColorChooserSwatch-graySwatch {\n  border: 0px;\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n  outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n  border: var(--salt-focused-outlineWidth) var(--salt-borderStyle-solid) var(--salt-actionable-cta-foreground-active) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: var(--salt-cursor-active);\n}\n\n.saltColorChooserSwatch-transparent {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-sentiment-negative-foreground-decorative) !important;\n  width: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  background: linear-gradient(to top left, rgba(166, 21, 11, 0) 0%, rgba(166, 21, 11, 0) calc(50% - 0.8px), rgba(166, 21, 11, 1) 50%, rgba(166, 21, 11, 0) calc(50% + 0.8px), rgba(166, 21, 11, 0) 100%) !important;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Swatch.css.js.map

package/dist-es/color-chooser/Swatch.css.js.map

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

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

@@ -0,0 +1,67 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { Color } from './Color.js';
+import { isTransparent } from './color-utils.js';
+import css_248z from './Swatch.css.js';
+
+const withBaseName = makePrefixer("saltColorChooserSwatch");
+const Swatch = ({
+  color,
+  onClick,
+  active,
+  alpha,
+  onDialogClosed,
+  transparent = false
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-swatch",
+    css: css_248z,
+    window: targetWindow
+  });
+  const handleClick = () => {
+    const newColor = Color.makeColorFromHex(color);
+    isTransparent(color) ? newColor == null ? void 0 : newColor.setAlpha(0) : newColor == null ? void 0 : newColor.setAlpha(alpha);
+    onClick(newColor, true);
+    onDialogClosed();
+  };
+  const handleKeyDown = (e) => {
+    var _a;
+    const newColor = (_a = Color.makeColorFromHex(color)) == null ? void 0 : _a.setAlpha(alpha);
+    e.key === "ENTER" && onClick(newColor, true);
+    onDialogClosed();
+  };
+  const isBlackOrgray = (color2) => {
+    return color2.toLowerCase() === "black" || color2.toUpperCase().startsWith("#2F3136") || color2.toUpperCase().startsWith("#2A2C2F") || color2.toUpperCase().startsWith("#242526") || color2.toUpperCase().startsWith("#161616");
+  };
+  const isWhite = (color2) => color2 === "white";
+  const getBackgroundColor = () => {
+    const backgroundColor = Color.makeColorFromHex(color);
+    return backgroundColor == null ? void 0 : backgroundColor.setAlpha(alpha).hex;
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": `swatch-${color}`,
+      style: {
+        background: getBackgroundColor()
+      },
+      className: 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
+    }
+  );
+};
+
+export { Swatch };
+//# sourceMappingURL=Swatch.js.map

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

@@ -0,0 +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":["swatchCss","color"],"mappings":"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"}

package/dist-es/color-chooser/Swatches.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatches-colorNameTextDiv {\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltColorChooserSwatches-colorNameTextDiv,\n.saltColorChooserSwatches-colorTextDiv,\n.saltColorChooserSwatches-alphaTextDiv {\n  color: var(--salt-content-secondary-foreground);\n}\n\n.saltColorChooserSwatches-colorTextDiv {\n  font-size: var(--salt-text-fontSize);\n  margin-right: var(--salt-size-unit);\n}\n\n.saltColorChooserSwatches-alphaTextDiv {\n  font-size: var(--salt-text-fontSize);\n  margin-right: var(--salt-size-unit);\n}\n\n.saltColorChooserSwatches-textDiv {\n  display: flex;\n  justify-content: space-between;\n  padding: 8px 8px 0px 8px;\n}\n\n.saltColorChooserSwatches-pickerDiv {\n  padding-top: calc(2 * var(--salt-size-unit));\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Swatches.css.js.map

package/dist-es/color-chooser/Swatches.css.js.map

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

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

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { AlphaInput } from './AlphaInputField.js';
+import css_248z from './Swatches.css.js';
+import { SwatchesPicker } from './SwatchesPicker.js';
+
+const withBaseName = makePrefixer("saltColorChooserSwatches");
+const Swatches = ({
+  allColors,
+  color,
+  alpha,
+  handleColorChange,
+  displayColorName,
+  placeholder,
+  onDialogClosed
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-swatches",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxs("div", { "data-testid": "swatches", className: clsx(withBaseName("pickerDiv")), children: [
+    /* @__PURE__ */ jsx(
+      SwatchesPicker,
+      {
+        allColors,
+        color,
+        onChange: handleColorChange,
+        alpha,
+        onDialogClosed
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: clsx(withBaseName("textDiv")), children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: clsx(withBaseName("colorTextDiv")), children: "Color:" }),
+        /* @__PURE__ */ jsx("span", { className: clsx(withBaseName("colorNameTextDiv")), children: displayColorName ?? placeholder })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: clsx(withBaseName("alphaTextDiv")), children: "Opacity:" }),
+        /* @__PURE__ */ jsx(
+          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);
+            }
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+
+export { Swatches };
+//# sourceMappingURL=Swatches.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Swatches.js","sources":["../src/color-chooser/Swatches.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 } from \"react\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport type { Color } from \"./Color\";\nimport swatchesCss from \"./Swatches.css\";\nimport { SwatchesPicker } from \"./SwatchesPicker\";\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":["swatchesCss","alpha"],"mappings":";;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,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,CAAA,KAAqC;AACnC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,eAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,uBACE,IAAA,CAAC,SAAI,aAAA,EAAY,UAAA,EAAW,WAAW,IAAA,CAAK,YAAA,CAAa,WAAW,CAAC,CAAA,EACnE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,SAAA;AAAA,QACA,KAAA;AAAA,QACA,QAAA,EAAU,iBAAA;AAAA,QACV,KAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,yBACC,KAAA,EAAA,EAAI,SAAA,EAAW,KAAK,YAAA,CAAa,SAAS,CAAC,CAAA,EAC1C,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAK,SAAA,EAAW,IAAA,CAAK,aAAa,cAAc,CAAC,GAAG,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,wBAC3D,GAAA,CAAC,UAAK,SAAA,EAAW,IAAA,CAAK,aAAa,kBAAkB,CAAC,CAAA,EACnD,QAAA,EAAA,gBAAA,IAAoB,WAAA,EACvB;AAAA,OAAA,EACF,CAAA;AAAA,2BACC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAK,SAAA,EAAW,IAAA,CAAK,aAAa,cAAc,CAAC,GAAG,QAAA,EAAA,UAAA,EAAQ,CAAA;AAAA,wBAC7D,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,UAAA,EAAA,CAAY,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAO,IAAA,CAAK,CAAA,MAAM,IAAI,CAAA,GAAI,KAAA;AAAA,YACtC,aAAA,EAAe,IAAA;AAAA,YACf,QAAA,EAAU,CAACC,MAAAA,EAAe,CAAA,KAA0B;AAClD,cAAA,MAAM,QAAA,GAAW,+BAAO,QAAA,CAASA,MAAAA,CAAAA;AACjC,cAAA,iBAAA,CAAkB,QAAA,EAAU,OAAO,CAAC,CAAA;AAAA,YACtC;AAAA;AAAA;AACF,OAAA,EACF;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,72 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { convertColorMapValueToHex } from './ColorHelpers.js';
+import { isTransparent } from './color-utils.js';
+import { Swatch } from './Swatch.js';
+import css_248z from './Swatch.css.js';
+
+const SwatchesGroup = ({
+  swatchGroup,
+  onClick,
+  onDialogClosed,
+  selectedColor,
+  alpha
+}) => {
+  var _a;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-swatches",
+    css: css_248z,
+    window: targetWindow
+  });
+  const isBlackOrWhite = (color) => {
+    return (selectedColor ? selectedColor.startsWith("#000000") : false) && color.toLowerCase() === "black" || (selectedColor ? selectedColor.toLowerCase().startsWith("#ffffff") : false) && color.toLowerCase() === "white";
+  };
+  const isActive = (color) => {
+    return color.toLowerCase() === (selectedColor == null ? void 0 : selectedColor.substring(0, 7).toString().toLowerCase()) || isBlackOrWhite(color);
+  };
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, children: (_a = swatchGroup == null ? void 0 : swatchGroup.map((color) => {
+    return convertColorMapValueToHex(color);
+  })) == null ? void 0 : _a.map((color) => /* @__PURE__ */ jsx(
+    Swatch,
+    {
+      active: isActive(color),
+      color,
+      onClick,
+      onDialogClosed,
+      alpha,
+      transparent: isTransparent(color)
+    },
+    color.toString()
+  )) });
+};
+const SwatchesPicker = ({
+  allColors,
+  color,
+  alpha = 1,
+  onChange,
+  onDialogClosed
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": "swatches-picker",
+      style: { display: "flex", flexDirection: "row" },
+      children: allColors == null ? void 0 : allColors.map((swatchGroup) => /* @__PURE__ */ jsx(
+        SwatchesGroup,
+        {
+          swatchGroup,
+          selectedColor: color == null ? void 0 : color.hex,
+          onClick: onChange,
+          onDialogClosed,
+          alpha
+        },
+        swatchGroup.toString()
+      ))
+    }
+  );
+};
+
+export { SwatchesPicker };
+//# sourceMappingURL=SwatchesPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwatchesPicker.js","sources":["../src/color-chooser/SwatchesPicker.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { ChangeEvent } from \"react\";\nimport type { Color } from \"./Color\";\nimport { convertColorMapValueToHex } from \"./ColorHelpers\";\nimport { isTransparent } from \"./color-utils\";\nimport { Swatch } from \"./Swatch\";\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":["swatchCSS"],"mappings":";;;;;;;;AAkCA,MAAM,gBAAgB,CAAC;AAAA,EACrB,WAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAA,KAAuC;AAxCvC,EAAA,IAAA,EAAA;AAyCE,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,eAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,cAAA,GAAiB,CAAC,KAAA,KAA2B;AACjD,IAAA,OAAA,CACI,aAAA,GAAgB,cAAc,UAAA,CAAW,SAAS,IAAI,KAAA,KACtD,KAAA,CAAM,aAAY,KAAM,OAAA,IAAA,CACxB,gBACE,aAAA,CAAc,WAAA,GAAc,UAAA,CAAW,SAAS,IAChD,KAAA,KACF,KAAA,CAAM,aAAY,KAAM,OAAA;AAAA,EAE9B,CAAA;AACA,EAAA,MAAM,QAAA,GAAW,CAAC,KAAA,KAA2B;AAC3C,IAAA,OACE,KAAA,CAAM,WAAA,EAAY,MAChB,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,SAAA,CAAU,GAAG,CAAA,CAAA,CAAG,QAAA,EAAA,CAAW,WAAA,EAAA,CAAA,IAC5C,cAAA,CAAe,KAAK,CAAA;AAAA,EAExB,CAAA;AAEA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAQ,aAAA,EAAe,QAAA,EAAS,EACpD,QAAA,EAAA,CAAA,EAAA,GAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CACG,GAAA,CAAI,CAAC,KAAA,KAAU;AACf,IAAA,OAAO,0BAA0B,KAAK,CAAA;AAAA,EACxC,CAAA,CAAA,KAHD,IAAA,GAAA,MAAA,GAAA,EAAA,CAIG,GAAA,CAAI,CAAC,KAAA,qBACL,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MAEC,MAAA,EAAQ,SAAS,KAAK,CAAA;AAAA,MACtB,KAAA;AAAA,MACA,OAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA,EAAa,cAAc,KAAK;AAAA,KAAA;AAAA,IAN3B,MAAM,QAAA;AAAS,GAOtB,CAAA,EAEN,CAAA;AAEJ,CAAA;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,QAAA;AAAA,EACA;AACF,CAAA,KAAwC;AACtC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,iBAAA;AAAA,MACZ,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAQ,eAAe,KAAA,EAAM;AAAA,MAE9C,QAAA,EAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,GAAA,CAAI,CAAC,WAAA,qBACf,GAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACC,WAAA;AAAA,UAEA,eAAe,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAO,GAAA;AAAA,UACtB,OAAA,EAAS,QAAA;AAAA,UACT,cAAA;AAAA,UACA;AAAA,SAAA;AAAA,QAJK,YAAY,QAAA;AAAS,OAK5B;AAAA;AAAA,GAEJ;AAEJ;;;;"}

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

@@ -0,0 +1,6 @@
+const isTransparent = (color) => {
+  return color ? /#[\da-f]{6}00/i.test(color) : false;
+};
+
+export { isTransparent };
+//# sourceMappingURL=color-utils.js.map

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

@@ -0,0 +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":"AAAO,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA4B;AACxD,EAAA,OAAO,KAAA,GAAQ,gBAAA,CAAiB,IAAA,CAAK,KAAK,CAAA,GAAI,KAAA;AAChD;;;;"}

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

@@ -0,0 +1,115 @@
+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)",
+  saltred40: "rgb(255, 167, 156)",
+  saltred50: "rgb(255, 148, 133)",
+  saltred100: "rgb(255, 128, 111)",
+  saltred200: "rgb(255, 108, 88)",
+  saltred300: "rgb(255, 89, 66)",
+  saltred400: "rgb(237, 65, 42)",
+  saltred500: "rgb(227, 43, 22)",
+  saltred600: "rgb(196, 32, 16)",
+  saltred700: "rgb(166, 21, 11)",
+  saltred800: "rgb(136, 10, 5)",
+  saltred900: "rgb(106, 0, 0)",
+  saltorange10: "rgb(255, 232, 191)",
+  saltorange20: "rgb(254, 223, 166)",
+  saltorange30: "rgb(254, 214, 142)",
+  saltorange40: "rgb(254, 205, 118)",
+  saltorange50: "rgb(254, 197, 94)",
+  saltorange100: "rgb(250, 181, 81)",
+  saltorange200: "rgb(246, 165, 68)",
+  saltorange300: "rgb(242, 149, 56)",
+  saltorange400: "rgb(238, 133, 43)",
+  saltorange500: "rgb(234, 115, 25)",
+  saltorange600: "rgb(224, 101, 25)",
+  saltorange700: "rgb(214, 85, 19)",
+  saltorange800: "rgb(204, 68, 13)",
+  saltorange900: "rgb(194, 52, 7)",
+  saltgreen10: "rgb(209, 244, 201)",
+  saltgreen20: "rgb(184, 232, 182)",
+  saltgreen30: "rgb(160, 221, 164)",
+  saltgreen40: "rgb(136, 210, 145)",
+  saltgreen50: "rgb(112, 199, 127)",
+  saltgreen100: "rgb(93, 189, 116)",
+  saltgreen200: "rgb(77, 180, 105)",
+  saltgreen300: "rgb(60, 171, 96)",
+  saltgreen400: "rgb(48, 156, 90)",
+  saltgreen500: "rgb(36, 135, 75)",
+  saltgreen600: "rgb(24, 114, 61)",
+  saltgreen700: "rgb(12, 93, 46)",
+  saltgreen800: "rgb(1, 73, 32)",
+  saltgreen900: "rgb(0, 57, 18)",
+  saltteal10: "rgb(218, 240, 240)",
+  saltteal20: "rgb(199, 232, 232)",
+  saltteal30: "rgb(180, 224, 225)",
+  saltteal40: "rgb(162, 217, 218)",
+  saltteal50: "rgb(141, 205, 209)",
+  saltteal100: "rgb(123, 193, 200)",
+  saltteal200: "rgb(99, 181, 192)",
+  saltteal300: "rgb(73, 160, 172)",
+  saltteal400: "rgb(48, 149, 166)",
+  saltteal500: "rgb(0, 130, 151)",
+  saltteal600: "rgb(27, 107, 133)",
+  saltteal700: "rgb(0, 85, 113)",
+  saltteal800: "rgb(1, 65, 86)",
+  saltteal900: "rgb(0, 49, 76)",
+  saltblue10: "rgb(203, 231, 249)",
+  saltblue20: "rgb(183, 222, 246)",
+  saltblue30: "rgb(164, 213, 244)",
+  saltblue40: "rgb(144, 204, 242)",
+  saltblue50: "rgb(125, 195, 240)",
+  saltblue100: "rgb(100, 177, 228)",
+  saltblue200: "rgb(75, 159, 216)",
+  saltblue300: "rgb(51, 141, 205)",
+  saltblue400: "rgb(45, 129, 189)",
+  saltblue500: "rgb(38, 112, 169)",
+  saltblue600: "rgb(21, 92, 147)",
+  saltblue700: "rgb(0, 71, 123)",
+  saltblue800: "rgb(12, 53, 102)",
+  saltblue900: "rgb(0, 40, 88)",
+  saltblue1000: "rgb(0, 18, 40)",
+  saltpurple10: "rgb(249, 224, 247)",
+  saltpurple20: "rgb(247, 212, 244)",
+  saltpurple30: "rgb(245, 201, 241)",
+  saltpurple40: "rgb(243, 189, 238)",
+  saltpurple50: "rgb(241, 178, 235)",
+  saltpurple100: "rgb(223, 156, 225)",
+  saltpurple200: "rgb(205, 135, 215)",
+  saltpurple300: "rgb(192, 116, 203)",
+  saltpurple400: "rgb(169, 97, 181)",
+  saltpurple500: "rgb(150, 78, 162)",
+  saltpurple600: "rgb(129, 60, 141)",
+  saltpurple700: "rgb(103, 46, 122)",
+  saltpurple800: "rgb(83, 37, 109)",
+  saltpurple900: "rgb(59, 16, 84)",
+  saltgray10: "rgb(242, 244, 246)",
+  saltgray20: "rgb(234, 237, 239)",
+  saltgray30: "rgb(224, 228, 233)",
+  saltgray40: "rgb(217, 221, 227)",
+  saltgray50: "rgb(206, 210, 217)",
+  saltgray60: "rgb(197, 201, 208)",
+  saltgray70: "rgb(180, 183, 190)",
+  saltgray80: "rgb(159, 163, 170)",
+  saltgray90: "rgb(132, 135, 142)",
+  saltgray100: "rgb(116, 119, 127)",
+  saltgray200: "rgb(97, 101, 110)",
+  saltgray300: "rgb(76, 80, 91)",
+  saltgray400: "rgb(68, 72, 79)",
+  saltgray500: "rgb(59, 63, 70)",
+  saltgray600: "rgb(47, 49, 54)",
+  saltgray700: "rgb(42, 44, 47)",
+  saltgray800: "rgb(36, 37, 38)",
+  saltgray900: "rgb(22, 22, 22)"
+};
+const saltColorMap = saltlight;
+
+export { saltColorMap, saltlight };
+//# sourceMappingURL=colorMap.js.map