@salt-ds/lab 1.0.0-alpha.4 → 1.0.0-alpha.41

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sources":["../src/color-chooser/ColorPicker.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { ColorResult, SketchPicker } from \"react-color\";\nimport { clsx } from \"clsx\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { Color, RGBAValue } from \"./Color\";\nimport { hexValueWithoutAlpha } from \"./ColorHelpers\";\nimport { HexInput } from \"./HexInput\";\nimport { RGBAInput } from \"./RGBAInput\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport colorPickerCss from \"./ColorPicker.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserPicker\");\n\nexport interface ColorPickerProps {\n  disableAlphaChooser: boolean;\n  color?: Color;\n  alpha?: number;\n  onChange: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: ChangeEvent\n  ) => void;\n  onDialogClosed: () => void;\n}\n\nexport const ColorPicker = ({\n  alpha = 1,\n  disableAlphaChooser,\n  color,\n  onChange,\n  onDialogClosed,\n}: ColorPickerProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-color-picker\",\n    css: colorPickerCss,\n    window: targetWindow,\n  });\n\n  const rgbaValue: RGBAValue =\n    color?.rgba ?? Color.makeColorFromRGB(0, 0, 0, alpha).rgba;\n  const rgbaText = disableAlphaChooser ? \"RGB\" : \"RGBA\";\n\n  const onSubmitHex = (hexValue?: string, e?: ChangeEvent): void => {\n    const newColor = Color.makeColorFromHex(hexValue);\n    onChange(newColor, false, e);\n  };\n\n  const onSubmitRgb = (rgba: RGBAValue, e?: ChangeEvent): void => {\n    const newColor = Color.makeColorFromRGB(rgba.r, rgba.g, rgba.b, rgba.a);\n    onChange(newColor, false, e);\n  };\n\n  const onSubmitAlpha = (alpha: number, e?: ChangeEvent): void => {\n    const newColor = Color.makeColorFromRGB(\n      rgbaValue.r,\n      rgbaValue.g,\n      rgbaValue.b,\n      Math.max(0, Math.min(alpha, 1))\n    );\n    onChange(newColor, false, e);\n  };\n\n  const onSketchPickerChange = (\n    colorResult: ColorResult,\n    e: ChangeEvent\n  ): void => {\n    const newColor = Color.makeColorFromRGB(\n      colorResult.rgb.r,\n      colorResult.rgb.g,\n      colorResult.rgb.b,\n      colorResult.rgb.a ?? alpha\n    );\n    onChange(newColor, false, e);\n  };\n\n  const onApply = (): void => {\n    onChange(color, true);\n    onDialogClosed();\n  };\n\n  return (\n    <div data-testid=\"color-picker\" className={clsx(withBaseName())}>\n      {/** @ts-ignore react-color has incorrect types **/}\n      <SketchPicker\n        className={clsx(withBaseName(\"swatchPickerStyles\"), {\n          [withBaseName(\"rootDisabledAlpha\")]: disableAlphaChooser,\n          [withBaseName(\"root\")]: !disableAlphaChooser,\n        })}\n        color={rgbaValue}\n        onChange={onSketchPickerChange}\n        presetColors={[]}\n        disableAlpha={disableAlphaChooser}\n      />\n      <div className={clsx(withBaseName(\"inputContainer\"))}>\n        <div className={clsx(withBaseName(\"inputDivs\"))}>\n          <span className={clsx(withBaseName(\"textDivOverrides\"))}>HEX</span>\n          <HexInput\n            hexValue={\n              disableAlphaChooser\n                ? hexValueWithoutAlpha(color?.hex)\n                : color?.hex\n            }\n            disableAlphaChooser={disableAlphaChooser}\n            onSubmit={onSubmitHex}\n          />\n          <RGBAInput\n            disableAlphaChooser={disableAlphaChooser}\n            rgbaText={rgbaText}\n            rgbaValue={rgbaValue}\n            onSubmitAlpha={onSubmitAlpha}\n            onSubmitRgb={onSubmitRgb}\n          />\n        </div>\n        <div className={clsx(withBaseName(\"applyButtonDiv\"))}>\n          <Button data-testid=\"apply-button\" variant=\"cta\" onClick={onApply}>\n            Apply\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","colorPickerCss","Color","alpha","_a","jsxs","clsx","jsx","SketchPicker","HexInput","hexValueWithoutAlpha","RGBAInput","Button"],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,wBAAwB,CAAA,CAAA;AAcnD,MAAM,cAAc,CAAC;AAAA,EAC1B,KAAQ,GAAA,CAAA;AAAA,EACR,mBAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAA;AACF,CAAqC,KAAA;AAlCrC,EAAA,IAAA,EAAA,CAAA;AAmCE,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAA,CACJ,EAAO,GAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,IAAA,KAAP,IAAe,GAAA,EAAA,GAAAC,WAAA,CAAM,iBAAiB,CAAG,EAAA,CAAA,EAAG,CAAG,EAAA,KAAK,CAAE,CAAA,IAAA,CAAA;AACxD,EAAM,MAAA,QAAA,GAAW,sBAAsB,KAAQ,GAAA,MAAA,CAAA;AAE/C,EAAM,MAAA,WAAA,GAAc,CAAC,QAAA,EAAmB,CAA0B,KAAA;AAChE,IAAM,MAAA,QAAA,GAAWA,WAAM,CAAA,gBAAA,CAAiB,QAAQ,CAAA,CAAA;AAChD,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,IAAA,EAAiB,CAA0B,KAAA;AAC9D,IAAM,MAAA,QAAA,GAAWA,WAAM,CAAA,gBAAA,CAAiB,IAAK,CAAA,CAAA,EAAG,KAAK,CAAG,EAAA,IAAA,CAAK,CAAG,EAAA,IAAA,CAAK,CAAC,CAAA,CAAA;AACtE,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAACC,MAAAA,EAAe,CAA0B,KAAA;AAC9D,IAAA,MAAM,WAAWD,WAAM,CAAA,gBAAA;AAAA,MACrB,SAAU,CAAA,CAAA;AAAA,MACV,SAAU,CAAA,CAAA;AAAA,MACV,SAAU,CAAA,CAAA;AAAA,MACV,KAAK,GAAI,CAAA,CAAA,EAAG,KAAK,GAAIC,CAAAA,MAAAA,EAAO,CAAC,CAAC,CAAA;AAAA,KAChC,CAAA;AACA,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,oBAAA,GAAuB,CAC3B,WAAA,EACA,CACS,KAAA;AArEb,IAAAC,IAAAA,GAAAA,CAAAA;AAsEI,IAAA,MAAM,WAAWF,WAAM,CAAA,gBAAA;AAAA,MACrB,YAAY,GAAI,CAAA,CAAA;AAAA,MAChB,YAAY,GAAI,CAAA,CAAA;AAAA,MAChB,YAAY,GAAI,CAAA,CAAA;AAAA,MAAA,CAChBE,GAAA,GAAA,WAAA,CAAY,GAAI,CAAA,CAAA,KAAhB,OAAAA,GAAqB,GAAA,KAAA;AAAA,KACvB,CAAA;AACA,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAA,MAAM,UAAU,MAAY;AAC1B,IAAA,QAAA,CAAS,OAAO,IAAI,CAAA,CAAA;AACpB,IAAe,cAAA,EAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IAAI,aAAY,EAAA,cAAA;AAAA,IAAe,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAc,CAAA;AAAA,IAE5D,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAAC,uBAAA,EAAA;AAAA,QACC,SAAW,EAAAF,SAAA,CAAK,YAAa,CAAA,oBAAoB,CAAG,EAAA;AAAA,UAClD,CAAC,YAAa,CAAA,mBAAmB,CAAI,GAAA,mBAAA;AAAA,UACrC,CAAC,YAAA,CAAa,MAAM,CAAA,GAAI,CAAC,mBAAA;AAAA,SAC1B,CAAA;AAAA,QACD,KAAO,EAAA,SAAA;AAAA,QACP,QAAU,EAAA,oBAAA;AAAA,QACV,cAAc,EAAC;AAAA,QACf,YAAc,EAAA,mBAAA;AAAA,OAChB,CAAA;AAAA,sBACCD,eAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,CAAA,gBAAgB,CAAC,CAAA;AAAA,QACjD,QAAA,EAAA;AAAA,0BAACD,eAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,CAAA,WAAW,CAAC,CAAA;AAAA,YAC5C,QAAA,EAAA;AAAA,8BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAW,EAAAD,SAAA,CAAK,YAAa,CAAA,kBAAkB,CAAC,CAAA;AAAA,gBAAG,QAAA,EAAA,KAAA;AAAA,eAAG,CAAA;AAAA,8BAC3DC,cAAA,CAAAE,iBAAA,EAAA;AAAA,gBACC,UACE,mBACI,GAAAC,iCAAA,CAAqB,KAAO,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAG,IAC/B,KAAO,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA;AAAA,gBAEb,mBAAA;AAAA,gBACA,QAAU,EAAA,WAAA;AAAA,eACZ,CAAA;AAAA,8BACCH,cAAA,CAAAI,mBAAA,EAAA;AAAA,gBACC,mBAAA;AAAA,gBACA,QAAA;AAAA,gBACA,SAAA;AAAA,gBACA,aAAA;AAAA,gBACA,WAAA;AAAA,eACF,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,0BACCJ,cAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAW,EAAAD,SAAA,CAAK,YAAa,CAAA,gBAAgB,CAAC,CAAA;AAAA,YACjD,QAAC,kBAAAC,cAAA,CAAAK,WAAA,EAAA;AAAA,cAAO,aAAY,EAAA,cAAA;AAAA,cAAe,OAAQ,EAAA,KAAA;AAAA,cAAM,OAAS,EAAA,OAAA;AAAA,cAAS,QAAA,EAAA,OAAA;AAAA,aAEnE,CAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var colorMap = require('./colorMap.js');
+
+function makePalette(colorScheme, saltColorOverrides) {
+  const colorNames = Array.from(
+    Object.keys(saltColorOverrides != null ? saltColorOverrides : colorMap.saltColorMap)
+  );
+  const colorArray = [];
+  for (const colorName of colorNames) {
+    if (colorName.includes(colorScheme) && !(colorName === colorScheme)) {
+      colorArray.push(
+        saltColorOverrides ? saltColorOverrides[colorName] : colorMap.saltColorMap[colorName]
+      );
+    }
+  }
+  return colorArray;
+}
+const bluePalette = (saltColorOverrides) => makePalette("blue", saltColorOverrides);
+const greenPalette = (saltColorOverrides) => makePalette("green", saltColorOverrides);
+const redPalette = (saltColorOverrides) => makePalette("red", saltColorOverrides);
+const orangePalette = (saltColorOverrides) => makePalette("orange", saltColorOverrides);
+const tealPalette = (saltColorOverrides) => makePalette("teal", saltColorOverrides);
+const purplePalette = (saltColorOverrides) => makePalette("purple", saltColorOverrides);
+const grayPalette = (saltColorOverrides) => makePalette("gray", saltColorOverrides);
+function getColorPalettes(saltColorOverrides) {
+  return [
+    bluePalette(saltColorOverrides).slice(0, 7),
+    bluePalette(saltColorOverrides).slice(7, 14),
+    greenPalette(saltColorOverrides).slice(0, 7),
+    greenPalette(saltColorOverrides).slice(7, 14),
+    tealPalette(saltColorOverrides).slice(0, 7),
+    tealPalette(saltColorOverrides).slice(7, 14),
+    orangePalette(saltColorOverrides).slice(0, 7),
+    orangePalette(saltColorOverrides).slice(7, 14),
+    redPalette(saltColorOverrides).slice(0, 7),
+    redPalette(saltColorOverrides).slice(7, 14),
+    purplePalette(saltColorOverrides).slice(0, 7),
+    purplePalette(saltColorOverrides).slice(7, 14),
+    grayPalette(saltColorOverrides).slice(0, 7),
+    grayPalette(saltColorOverrides).slice(7, 14),
+    [
+      saltColorOverrides ? saltColorOverrides.saltwhite ? saltColorOverrides.saltwhite : "rgb(255, 255, 255)" : colorMap.saltColorMap.saltwhite,
+      ...grayPalette(saltColorOverrides).slice(14, 18),
+      saltColorOverrides ? saltColorOverrides.saltblack ? saltColorOverrides.saltblack : "rgb(0, 0, 0)" : colorMap.saltColorMap.saltblack,
+      "rgba(0, 0, 0, 0)"
+    ]
+  ];
+}
+
+exports.getColorPalettes = getColorPalettes;
+exports.makePalette = makePalette;
+//# sourceMappingURL=GetColorPalettes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GetColorPalettes.js","sources":["../src/color-chooser/GetColorPalettes.ts"],"sourcesContent":["import { saltColorMap } from \"./colorMap\";\n\nexport function makePalette(\n  colorScheme: string,\n  saltColorOverrides?: Record<string, string>\n): string[] {\n  //Doesn't matter which theme you use here as the color names are the same\n  const colorNames = Array.from(\n    Object.keys(saltColorOverrides ?? saltColorMap)\n  );\n\n  const colorArray: string[] = [];\n  for (const colorName of colorNames) {\n    if (colorName.includes(colorScheme) && !(colorName === colorScheme)) {\n      colorArray.push(\n        saltColorOverrides\n          ? saltColorOverrides[colorName]\n          : saltColorMap[colorName]\n      );\n    }\n  }\n  return colorArray;\n}\n\nconst bluePalette = (saltColorOverrides?: Record<string, string>) =>\n  makePalette(\"blue\", saltColorOverrides);\nconst greenPalette = (saltColorOverrides?: Record<string, string>) =>\n  makePalette(\"green\", saltColorOverrides);\nconst redPalette = (saltColorOverrides?: Record<string, string>) =>\n  makePalette(\"red\", saltColorOverrides);\nconst orangePalette = (saltColorOverrides?: Record<string, string>) =>\n  makePalette(\"orange\", saltColorOverrides);\nconst tealPalette = (saltColorOverrides?: Record<string, string>) =>\n  makePalette(\"teal\", saltColorOverrides);\nconst purplePalette = (saltColorOverrides?: Record<string, string>) =>\n  makePalette(\"purple\", saltColorOverrides);\nconst grayPalette = (saltColorOverrides?: Record<string, string>) =>\n  makePalette(\"gray\", saltColorOverrides);\n\nexport function getColorPalettes(\n  saltColorOverrides?: Record<string, string>\n): string[][] {\n  return [\n    bluePalette(saltColorOverrides).slice(0, 7),\n    bluePalette(saltColorOverrides).slice(7, 14),\n    greenPalette(saltColorOverrides).slice(0, 7),\n    greenPalette(saltColorOverrides).slice(7, 14),\n    tealPalette(saltColorOverrides).slice(0, 7),\n    tealPalette(saltColorOverrides).slice(7, 14),\n    orangePalette(saltColorOverrides).slice(0, 7),\n    orangePalette(saltColorOverrides).slice(7, 14),\n    redPalette(saltColorOverrides).slice(0, 7),\n    redPalette(saltColorOverrides).slice(7, 14),\n    purplePalette(saltColorOverrides).slice(0, 7),\n    purplePalette(saltColorOverrides).slice(7, 14),\n    grayPalette(saltColorOverrides).slice(0, 7),\n    grayPalette(saltColorOverrides).slice(7, 14),\n    [\n      saltColorOverrides\n        ? saltColorOverrides.saltwhite\n          ? saltColorOverrides.saltwhite\n          : \"rgb(255, 255, 255)\"\n        : saltColorMap.saltwhite,\n      ...grayPalette(saltColorOverrides).slice(14, 18),\n      saltColorOverrides\n        ? saltColorOverrides.saltblack\n          ? saltColorOverrides.saltblack\n          : \"rgb(0, 0, 0)\"\n        : saltColorMap.saltblack,\n      \"rgba(0, 0, 0, 0)\",\n    ],\n  ];\n}\n"],"names":["saltColorMap"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltColorChooserHexInput {\n  display: flex;\n  flex-direction: row;\n  padding: 0px 0px var(--salt-size-container-spacing) 0px;\n}\n\n.saltColorChooserHexInput-hashSign {\n  margin-top: 5px;\n  font-size: var(--salt-text-label-fontSize);\n  padding-right: 6px;\n  color: var(--salt-content-secondary-foreground);\n  padding-left: 6px;\n}\n\n.saltColorChooserHexInput-input {\n  width: var(--salt-size-unit);\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=HexInput.css.js.map

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

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

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

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+var core = require('@salt-ds/core');
+var ColorHelpers = require('./ColorHelpers.js');
+var InputLegacy = require('../input-legacy/InputLegacy.js');
+require('../input-legacy/StaticInputAdornment.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var HexInput$1 = require('./HexInput.css.js');
+
+const withBaseName = core.makePrefixer("saltColorChooserHexInput");
+const HexInput = ({
+  hexValue,
+  disableAlphaChooser,
+  onSubmit
+}) => {
+  var _a;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-hex-input",
+    css: HexInput$1,
+    window: targetWindow
+  });
+  const [hexInputValue, setHexInputValue] = React.useState(
+    hexValue
+  );
+  React.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") {
+      ColorHelpers.isValidHex(hexInputValue) && onSubmit(hexInputValue);
+    }
+  };
+  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, {
+        "data-testid": "hex-input",
+        className: clsx.clsx(withBaseName("input")),
+        value: (_a = hexInputValue == null ? void 0 : hexInputValue.toString().replace("#", "").toUpperCase()) != null ? _a : "",
+        onChange: handleHexInputChange,
+        onKeyDown: handleKeyDownHex,
+        onBlur: handleOnBlurHex
+      })
+    ]
+  });
+};
+
+exports.HexInput = HexInput;
+//# sourceMappingURL=HexInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HexInput.js","sources":["../src/color-chooser/HexInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useEffect, useState } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { isValidHex } from \"./ColorHelpers\";\nimport { InputLegacy as Input } from \"../input-legacy\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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?: React.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: React.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: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (e.key === \"Enter\") {\n      isValidHex(hexInputValue) && onSubmit(hexInputValue);\n    }\n  };\n\n  const handleOnBlurHex = (e: React.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":";;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA,CAAA;AAQrD,MAAM,WAAW,CAAC;AAAA,EACvB,QAAA;AAAA,EACA,mBAAA;AAAA,EACA,QAAA;AACF,CAAkC,KAAA;AAvBlC,EAAA,IAAA,EAAA,CAAA;AAwBE,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,MAAM,KAAK,CAAA,CAAA;AAAA,KAC9B;AACA,IAAA,IAAI,CAAC,mBAAqB,EAAA;AACxB,MAAA,gBAAA,CAAiB,MAAM,KAAK,CAAA,CAAA;AAAA,KAC9B;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,CAAmD,KAAA;AAC3E,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,CAAgD,KAAA;AACvE,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;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltColorChooser-rgbaInput {\n  width: var(--salt-size-unit);\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) 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-border) var(--salt-editable-borderStyle) 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";
+
+module.exports = css_248z;
+//# sourceMappingURL=RGBAInput.css.js.map

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

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

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

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var core = require('@salt-ds/core');
+var AlphaInputField = require('./AlphaInputField.js');
+var RGBAInputField = require('./RGBAInputField.js');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var RGBAInput$1 = require('./RGBAInput.css.js');
+
+const withBaseName = core.makePrefixer("saltColorChooser");
+const RGBAInput = ({
+  disableAlphaChooser,
+  rgbaText,
+  rgbaValue,
+  onSubmitAlpha,
+  onSubmitRgb
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-rgba-input",
+    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
+          })
+        ]
+      })),
+      !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: parseFloat(rgbaValue.a.toFixed(2)),
+            onSubmit: onSubmitAlpha
+          })
+        ]
+      }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: clsx.clsx(withBaseName("alphaSpacerDiv"))
+      })
+    ]
+  });
+};
+
+exports.RGBAInput = RGBAInput;
+//# sourceMappingURL=RGBAInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RGBAInput.js","sources":["../src/color-chooser/RGBAInput.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport { 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\")}>\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={parseFloat(rgbaValue.a.toFixed(2))}\n            onSubmit={onSubmitAlpha}\n          />\n        </div>\n      ) : (\n        <div className={clsx(withBaseName(\"alphaSpacerDiv\"))}></div>\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,OACF,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,UAAW,CAAA,SAAA,CAAU,CAAE,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA;AAAA,YAC7C,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;;;;"}

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

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@salt-ds/core');
+var InputLegacy = require('../input-legacy/InputLegacy.js');
+require('../input-legacy/StaticInputAdornment.js');
+var RGBAInput = require('./RGBAInput.css.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+
+const withBaseName = core.makePrefixer("saltColorChooser");
+const RGBInput = ({
+  rgbaValue,
+  value,
+  onSubmit
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-rgba-input",
+    css: RGBAInput,
+    window: targetWindow
+  });
+  const [rgbaInputValue, setRgbaInputValue] = React.useState(
+    rgbaValue ? rgbaValue[value] : ""
+  );
+  React.useEffect(() => {
+    setRgbaInputValue(rgbaValue ? rgbaValue[value] : "");
+  }, [rgbaValue, value]);
+  const handleRGBInputChange = (e, value2) => {
+    let rgb;
+    rgb = parseInt(value2);
+    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__ */ jsxRuntime.jsx(InputLegacy.InputLegacy, {
+    inputProps: {
+      "data-testid": `${value}-input`
+    },
+    className: withBaseName("rgbaInput"),
+    value: rgbaInputValue.toString(),
+    onChange: handleRGBInputChange,
+    onBlur: handleOnBlurRGB,
+    onKeyDown: handleKeyDownRGB
+  });
+};
+
+exports.RGBInput = RGBInput;
+//# sourceMappingURL=RGBAInputField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RGBAInputField.js","sources":["../src/color-chooser/RGBAInputField.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { RGBAValue } from \"./Color\";\nimport { InputLegacy as Input } from \"../input-legacy\";\n\nimport rgbaInputCss from \"./RGBAInput.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\ninterface RGBInputProps {\n  rgbaValue: RGBAValue;\n  value: \"r\" | \"g\" | \"b\";\n  onSubmit: (rgb: RGBAValue, e?: React.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: React.ChangeEvent<HTMLInputElement>,\n    value: string\n  ): void => {\n    let rgb: string | number;\n\n    rgb = parseInt(value);\n\n    if (value.trim() === \"\" || Number.isNaN(rgb)) {\n      rgb = \"\";\n    }\n\n    setRgbaInputValue(rgb);\n  };\n\n  const handleKeyDownRGB = (e: React.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: React.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.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+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: pointer;\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: pointer;\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) 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-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n  outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border: var(--salt-focused-outlineWidth) var(--salt-container-borderStyle) var(--salt-actionable-cta-foreground-active) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.saltColorChooserSwatch-transparent {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-status-negative-foreground) !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(\n    to top left,\n    rgba(166, 21, 11, 0) 0%,\n    rgba(166, 21, 11, 0) calc(50% - 0.8px),\n    rgba(166, 21, 11, 1) 50%,\n    rgba(166, 21, 11, 0) calc(50% + 0.8px),\n    rgba(166, 21, 11, 0) 100%\n  ) !important;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=Swatch.css.js.map

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

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

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

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var Color = require('./Color.js');
+var colorUtils = require('./color-utils.js');
+var Swatch$1 = require('./Swatch.css.js');
+
+const withBaseName = core.makePrefixer("saltColorChooserSwatch");
+const Swatch = ({
+  color,
+  onClick,
+  active,
+  alpha,
+  onDialogClosed,
+  transparent = false
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-swatch",
+    css: Swatch$1,
+    window: targetWindow
+  });
+  const handleClick = () => {
+    const newColor = Color.Color.makeColorFromHex(color);
+    colorUtils.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.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.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
+  });
+};
+
+exports.Swatch = Swatch;
+//# sourceMappingURL=Swatch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Swatch.js","sources":["../src/color-chooser/Swatch.tsx"],"sourcesContent":["import { ChangeEvent, KeyboardEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\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.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+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";
+
+module.exports = css_248z;
+//# sourceMappingURL=Swatches.css.js.map

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

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

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

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var core = require('@salt-ds/core');
+var AlphaInputField = require('./AlphaInputField.js');
+var SwatchesPicker = require('./SwatchesPicker.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var Swatches$1 = require('./Swatches.css.js');
+
+const withBaseName = core.makePrefixer("saltColorChooserSwatches");
+const Swatches = ({
+  allColors,
+  color,
+  alpha,
+  handleColorChange,
+  displayColorName,
+  placeholder,
+  onDialogClosed
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-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, {
+        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);
+                }
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+};
+
+exports.Swatches = Swatches;
+//# sourceMappingURL=Swatches.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Swatches.js","sources":["../src/color-chooser/Swatches.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport { Color } from \"./Color\";\nimport { SwatchesPicker } from \"./SwatchesPicker\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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?: React.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?: React.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":";;;;;;;;;;;;;AAWA,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,CAAgC,KAAA;AACxD,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;;;;"}

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

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Swatch$1 = require('./Swatch.js');
+var ColorHelpers = require('./ColorHelpers.js');
+var colorUtils = require('./color-utils.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var Swatch = require('./Swatch.css.js');
+
+const SwatchesGroup = ({
+  swatchGroup,
+  onClick,
+  onDialogClosed,
+  selectedColor,
+  alpha
+}) => {
+  var _a;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-swatches",
+    css: Swatch,
+    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__ */ 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()))
+  });
+};
+const SwatchesPicker = ({
+  allColors,
+  color,
+  alpha = 1,
+  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()))
+  });
+};
+
+exports.SwatchesPicker = SwatchesPicker;
+//# sourceMappingURL=SwatchesPicker.js.map