@salt-ds/lab 1.0.0-alpha.7 → 1.0.0-alpha.70

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

@@ -0,0 +1,163 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var icons = require('@salt-ds/icons');
+var clsx = require('clsx');
+var react = require('react');
+var colorUtils = require('./color-utils.js');
+var ColorHelpers = require('./ColorHelpers.js');
+var DictTabs = require('./DictTabs.js');
+var GetColorPalettes = require('./GetColorPalettes.js');
+var colorMap = require('./colorMap.js');
+var createTabsMapping = require('./createTabsMapping.js');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var ColorChooser$1 = require('./ColorChooser.css.js');
+
+const withBaseName = core.makePrefixer("saltColorChooser");
+function getActiveTab(hexValue, tabs, saltColorOverrides) {
+  if (tabs.Swatches && tabs["Color Picker"]) {
+    const hexNoAlpha = ColorHelpers.hexValueWithoutAlpha(hexValue);
+    const colors = saltColorOverrides ?? colorMap.saltColorMap;
+    if (hexNoAlpha && !Object.keys(colors).find(
+      (key) => {
+        var _a;
+        return ((_a = ColorHelpers.convertColorMapValueToHex(colors[key])) == null ? void 0 : _a.toLowerCase()) === (hexNoAlpha == null ? void 0 : hexNoAlpha.toLowerCase());
+      }
+    )) {
+      return 1;
+    }
+  }
+  return 0;
+}
+const ColorChooser = ({
+  onClear,
+  onSelect,
+  color,
+  showSwatches = true,
+  showColorPicker = true,
+  defaultAlpha = 1,
+  disableAlphaChooser = false,
+  hideLabel = false,
+  placeholder,
+  buttonProps,
+  saltColorOverrides,
+  readOnly = false,
+  displayHexOnly = false
+}) => {
+  var _a;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-color-chooser",
+    css: ColorChooser$1,
+    window: targetWindow
+  });
+  const [open, setOpen] = react.useState(false);
+  const allColors = saltColorOverrides ? GetColorPalettes.getColorPalettes(saltColorOverrides) : GetColorPalettes.getColorPalettes();
+  const displayColorName = displayHexOnly ? ColorHelpers.getHexValue(color == null ? void 0 : color.hex, disableAlphaChooser) : ColorHelpers.getColorNameByHexValue(
+    color == null ? void 0 : color.hex,
+    disableAlphaChooser,
+    saltColorOverrides
+  );
+  const handleOpenChange = (open2) => setOpen(open2);
+  const alphaForTabs = colorUtils.isTransparent(color == null ? void 0 : color.hex) ? defaultAlpha : ((_a = color == null ? void 0 : color.rgba) == null ? void 0 : _a.a) ?? defaultAlpha;
+  const tabsMapping = createTabsMapping.createTabsMapping({
+    swatches: showSwatches,
+    colorPicker: showColorPicker,
+    disableAlphaChooser,
+    allColors,
+    color,
+    alpha: alphaForTabs,
+    handleColorChange: onSelect,
+    displayColorName,
+    placeholder,
+    onDialogClosed: () => {
+      setOpen(false);
+    }
+  });
+  const [activeTab, setActiveTab] = react.useState(
+    getActiveTab(color == null ? void 0 : color.hex, tabsMapping, saltColorOverrides)
+  );
+  const onDefaultSelected = () => {
+    if (activeTab === 0 && showSwatches) {
+      onClear();
+      handleOpenChange(false);
+    } else {
+      onClear();
+    }
+  };
+  const onTabClick = (index) => {
+    setActiveTab(index);
+  };
+  const OverlayContent = () => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx.clsx(withBaseName("overlayContent")),
+        "data-testid": "overlay-content",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            core.Button,
+            {
+              "data-testid": "default-button",
+              variant: "secondary",
+              className: clsx.clsx(withBaseName("defaultButton")),
+              onClick: onDefaultSelected,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(icons.RefreshIcon, { className: clsx.clsx(withBaseName("refreshIcon")) }),
+                "Default"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DictTabs.DictTabs,
+            {
+              tabs: tabsMapping,
+              hexValue: color == null ? void 0 : color.hex,
+              onTabClick,
+              activeTab
+            }
+          )
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Overlay, { placement: "bottom", "data-testid": "color-chooser-overlay", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.OverlayTrigger, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      core.Button,
+      {
+        className: clsx.clsx(withBaseName("overlayButton"), {
+          [withBaseName("overlayButtonHiddenLabel")]: hideLabel
+        }),
+        "data-testid": "color-chooser-overlay-button",
+        disabled: readOnly,
+        ...buttonProps,
+        children: [
+          color && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: clsx.clsx(withBaseName("overlayButtonSwatch"), {
+                [withBaseName("overlayButtonSwatchWithBorder")]: color == null ? void 0 : color.hex.startsWith("#ffffff"),
+                [withBaseName("overlayButtonSwatchTransparent")]: colorUtils.isTransparent(
+                  color == null ? void 0 : color.hex
+                )
+              }),
+              style: {
+                backgroundColor: color == null ? void 0 : color.hex
+              }
+            }
+          ),
+          !hideLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("overlayButtonText"), children: displayColorName ?? placeholder ?? "No color selected" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(core.OverlayPanel, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.OverlayPanelCloseButton, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(core.OverlayPanelContent, { children: /* @__PURE__ */ jsxRuntime.jsx(OverlayContent, {}) })
+    ] })
+  ] });
+};
+
+exports.ColorChooser = ColorChooser;
+//# sourceMappingURL=ColorChooser.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorChooser.js","sources":["../src/color-chooser/ColorChooser.tsx"],"sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  Overlay,\n  OverlayPanel,\n  OverlayPanelCloseButton,\n  OverlayPanelContent,\n  OverlayTrigger,\n  makePrefixer,\n} from \"@salt-ds/core\";\nimport { RefreshIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { type ChangeEvent, useState } from \"react\";\nimport type { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nimport {\n  convertColorMapValueToHex,\n  getColorNameByHexValue,\n  getHexValue,\n  hexValueWithoutAlpha,\n} from \"./ColorHelpers\";\nimport { type ColorChooserTabs, DictTabs } from \"./DictTabs\";\nimport { getColorPalettes } from \"./GetColorPalettes\";\nimport { saltColorMap } from \"./colorMap\";\nimport { createTabsMapping } from \"./createTabsMapping\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport colorChooserCss from \"./ColorChooser.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\nfunction getActiveTab(\n  hexValue: string | undefined,\n  tabs: ColorChooserTabs,\n  saltColorOverrides: Record<string, string> | undefined,\n): number {\n  if (tabs.Swatches && tabs[\"Color Picker\"]) {\n    const hexNoAlpha: string | undefined = hexValueWithoutAlpha(hexValue);\n    const colors = saltColorOverrides ?? saltColorMap;\n    // if hexNoAlpha is a Salt color or null/undefined then set the active tab as Swatches\n    if (\n      hexNoAlpha &&\n      !Object.keys(colors).find(\n        (key: string) =>\n          convertColorMapValueToHex(colors[key])?.toLowerCase() ===\n          hexNoAlpha?.toLowerCase(),\n      )\n    ) {\n      return 1;\n    }\n  }\n  return 0;\n}\n\nexport interface ColorChooserProps {\n  color: Color | undefined;\n  defaultAlpha?: number;\n  disableAlphaChooser?: boolean;\n  displayHexOnly?: boolean;\n  hideLabel?: boolean;\n  onClear: () => void; // called when user clicks \"default\" button\n  onSelect: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    event?: ChangeEvent,\n  ) => void;\n  placeholder?: string;\n  buttonProps?: Partial<ButtonProps>;\n  saltColorOverrides?: Record<string, string>;\n  showSwatches?: boolean;\n  showColorPicker?: boolean;\n  readOnly?: boolean;\n}\n\nexport const ColorChooser = ({\n  onClear,\n  onSelect,\n  color,\n  showSwatches = true,\n  showColorPicker = true,\n  defaultAlpha = 1,\n  disableAlphaChooser = false,\n  hideLabel = false,\n  placeholder,\n  buttonProps,\n  saltColorOverrides,\n  readOnly = false,\n  displayHexOnly = false,\n}: ColorChooserProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-color-chooser\",\n    css: colorChooserCss,\n    window: targetWindow,\n  });\n\n  const [open, setOpen] = useState(false);\n\n  const allColors: string[][] = saltColorOverrides\n    ? getColorPalettes(saltColorOverrides)\n    : getColorPalettes();\n  const displayColorName = displayHexOnly\n    ? getHexValue(color?.hex, disableAlphaChooser)\n    : getColorNameByHexValue(\n        color?.hex,\n        disableAlphaChooser,\n        saltColorOverrides,\n      );\n\n  const handleOpenChange = (open: boolean) => setOpen(open);\n\n  const alphaForTabs = isTransparent(color?.hex)\n    ? defaultAlpha\n    : (color?.rgba?.a ?? defaultAlpha);\n\n  const tabsMapping = createTabsMapping({\n    swatches: showSwatches,\n    colorPicker: showColorPicker,\n    disableAlphaChooser,\n    allColors,\n    color,\n    alpha: alphaForTabs,\n    handleColorChange: onSelect,\n    displayColorName,\n    placeholder,\n    onDialogClosed: () => {\n      setOpen(false);\n    },\n  });\n\n  const [activeTab, setActiveTab] = useState<number>(\n    getActiveTab(color?.hex, tabsMapping, saltColorOverrides),\n  );\n  const onDefaultSelected = (): void => {\n    if (activeTab === 0 && showSwatches) {\n      onClear();\n      handleOpenChange(false);\n    } else {\n      onClear();\n    }\n  };\n\n  const onTabClick = (index: number): void => {\n    setActiveTab(index);\n  };\n\n  const OverlayContent = () => {\n    return (\n      <div\n        className={clsx(withBaseName(\"overlayContent\"))}\n        data-testid=\"overlay-content\"\n      >\n        <Button\n          data-testid=\"default-button\"\n          variant=\"secondary\"\n          className={clsx(withBaseName(\"defaultButton\"))}\n          onClick={onDefaultSelected}\n        >\n          <RefreshIcon className={clsx(withBaseName(\"refreshIcon\"))} />\n          Default\n        </Button>\n        <DictTabs\n          tabs={tabsMapping}\n          hexValue={color?.hex}\n          onTabClick={onTabClick}\n          activeTab={activeTab}\n        />\n      </div>\n    );\n  };\n\n  return (\n    <Overlay placement=\"bottom\" data-testid=\"color-chooser-overlay\">\n      <OverlayTrigger>\n        <Button\n          className={clsx(withBaseName(\"overlayButton\"), {\n            [withBaseName(\"overlayButtonHiddenLabel\")]: hideLabel,\n          })}\n          // @ts-ignore\n          data-testid=\"color-chooser-overlay-button\"\n          disabled={readOnly}\n          {...buttonProps}\n        >\n          {color && (\n            <div\n              className={clsx(withBaseName(\"overlayButtonSwatch\"), {\n                [withBaseName(\"overlayButtonSwatchWithBorder\")]:\n                  color?.hex.startsWith(\"#ffffff\"),\n                [withBaseName(\"overlayButtonSwatchTransparent\")]: isTransparent(\n                  color?.hex,\n                ),\n              })}\n              style={{\n                backgroundColor: color?.hex,\n              }}\n            />\n          )}\n          {!hideLabel && (\n            <div className={withBaseName(\"overlayButtonText\")}>\n              {displayColorName ?? placeholder ?? \"No color selected\"}\n            </div>\n          )}\n        </Button>\n      </OverlayTrigger>\n      <OverlayPanel>\n        <OverlayPanelCloseButton />\n        <OverlayPanelContent>\n          <OverlayContent />\n        </OverlayPanelContent>\n      </OverlayPanel>\n    </Overlay>\n  );\n};\n"],"names":["makePrefixer","hexValueWithoutAlpha","saltColorMap","convertColorMapValueToHex","useWindow","useComponentCssInjection","colorChooserCss","useState","getColorPalettes","getHexValue","getColorNameByHexValue","open","isTransparent","createTabsMapping","jsxs","clsx","Button","jsx","RefreshIcon","DictTabs","Overlay","OverlayTrigger","OverlayPanel","OverlayPanelCloseButton","OverlayPanelContent"],"mappings":"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"}

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

@@ -0,0 +1,56 @@
+'use strict';
+
+var Color = require('./Color.js');
+var colorUtils = require('./color-utils.js');
+var colorMap = require('./colorMap.js');
+
+function getColorNameByHexValue(hexValue, disableAlpha = false, saltColorOverrides, disableFallBackToHex = false) {
+  const hexNoAlpha = hexValueWithoutAlpha(hexValue);
+  const saltColors = saltColorOverrides ?? colorMap.saltColorMap;
+  if (colorUtils.isTransparent(hexValue)) return "Transparent";
+  let colorName = Object.keys(saltColors).find((key) => {
+    if (saltColors[key]) {
+      const rgbVals = saltColors[key].startsWith("rgba") ? saltColors[key].substring(5, saltColors[key].length - 1) : saltColors[key].substring(4, saltColors[key].length - 1);
+      const [r, g, b] = [...rgbVals.replace(" ", "").split(",")];
+      return Color.Color.makeColorFromRGB(Number(r), Number(g), Number(b)).hex === (hexNoAlpha == null ? void 0 : hexNoAlpha.toLowerCase());
+    }
+    return 0;
+  });
+  if (colorName) {
+    colorName = colorName.slice(4);
+    return colorName.charAt(0).toUpperCase() + colorName.slice(1).toLowerCase();
+  }
+  if (hexValue === "WHITE" || hexValue === "BLACK") {
+    return hexValue.charAt(0) + hexValue.slice(1).toLowerCase();
+  }
+  return disableFallBackToHex ? void 0 : getHexValue(hexValue, disableAlpha);
+}
+function hexValueWithoutAlpha(hexValue) {
+  if (hexValue === void 0) return void 0;
+  return isValidHex(hexValue) ? hexValue.substring(0, 7).toUpperCase() : void 0;
+}
+function getHexValue(hexValue, disableAlpha) {
+  if (hexValue === void 0) return void 0;
+  return disableAlpha ? hexValueWithoutAlpha(hexValue) : hexValue;
+}
+const isValidHex = (hex) => {
+  return hex ? /^#[0-9a-fA-F]{8}$/.test(hex) || /#[0-9a-fA-F]{6}$/.test(hex) : false;
+};
+const convertColorMapValueToHex = (color) => {
+  if (!color.startsWith("rgb")) return color;
+  const rgbVals = color.startsWith("rgba") ? color.substring(5, color.length - 1) : color.substring(4, color.length - 1);
+  const [r, g, b, a] = [...rgbVals.replace(" ", "").split(",")];
+  return Color.Color.makeColorFromRGB(
+    Number(r),
+    Number(g),
+    Number(b),
+    a ? Number(a) : 1
+  ).hex;
+};
+
+exports.convertColorMapValueToHex = convertColorMapValueToHex;
+exports.getColorNameByHexValue = getColorNameByHexValue;
+exports.getHexValue = getHexValue;
+exports.hexValueWithoutAlpha = hexValueWithoutAlpha;
+exports.isValidHex = isValidHex;
+//# sourceMappingURL=ColorHelpers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorHelpers.js","sources":["../src/color-chooser/ColorHelpers.ts"],"sourcesContent":["import { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\nimport { saltColorMap } from \"./colorMap\";\n\nexport function getColorNameByHexValue(\n  hexValue: string | undefined,\n  disableAlpha = false,\n  saltColorOverrides?: Record<string, string>,\n  /** When disabled, color names not recognized will be undefined instead of hex values */\n  disableFallBackToHex = false,\n): string | undefined {\n  const hexNoAlpha = hexValueWithoutAlpha(hexValue);\n  const saltColors = saltColorOverrides ?? saltColorMap;\n\n  // Special case\n  if (isTransparent(hexValue)) return \"Transparent\";\n\n  let colorName = Object.keys(saltColors).find((key: string) => {\n    if (saltColors[key]) {\n      const rgbVals = saltColors[key].startsWith(\"rgba\")\n        ? saltColors[key].substring(5, saltColors[key].length - 1)\n        : saltColors[key].substring(4, saltColors[key].length - 1);\n      const [r, g, b] = [...rgbVals.replace(\" \", \"\").split(\",\")];\n      return (\n        Color.makeColorFromRGB(Number(r), Number(g), Number(b)).hex ===\n        hexNoAlpha?.toLowerCase()\n      );\n    }\n    return 0;\n  });\n\n  if (colorName) {\n    colorName = colorName.slice(4);\n    return colorName.charAt(0).toUpperCase() + colorName.slice(1).toLowerCase();\n  }\n\n  if (hexValue === \"WHITE\" || hexValue === \"BLACK\") {\n    return hexValue.charAt(0) + hexValue.slice(1).toLowerCase();\n  }\n\n  return disableFallBackToHex ? undefined : getHexValue(hexValue, disableAlpha);\n}\n\nexport function hexValueWithoutAlpha(\n  hexValue: string | undefined,\n): string | undefined {\n  if (hexValue === undefined) return undefined;\n  return isValidHex(hexValue)\n    ? hexValue.substring(0, 7).toUpperCase()\n    : undefined;\n}\n\nexport function getHexValue(\n  hexValue: string | undefined,\n  disableAlpha: boolean,\n): string | undefined {\n  if (hexValue === undefined) return undefined;\n  return disableAlpha ? hexValueWithoutAlpha(hexValue) : hexValue;\n}\n\nexport const isValidHex = (hex: string | undefined): boolean => {\n  return hex\n    ? /^#[0-9a-fA-F]{8}$/.test(hex) || /#[0-9a-fA-F]{6}$/.test(hex)\n    : false;\n};\n\nexport const convertColorMapValueToHex = (color: string): string => {\n  if (!color.startsWith(\"rgb\")) return color;\n  const rgbVals = color.startsWith(\"rgba\")\n    ? color.substring(5, color.length - 1)\n    : color.substring(4, color.length - 1);\n  const [r, g, b, a] = [...rgbVals.replace(\" \", \"\").split(\",\")];\n  return Color.makeColorFromRGB(\n    Number(r),\n    Number(g),\n    Number(b),\n    a ? Number(a) : 1,\n  ).hex;\n};\n"],"names":["saltColorMap","isTransparent","Color"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltColorChooserPicker {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n  padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));\n  align-self: center;\n}\n\n.saltColorChooserPicker-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\n.saltColorChooserPicker-inputDivs {\n  display: flex;\n  flex-direction: column;\n  align-content: stretch;\n  padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.saltColorChooserPicker-root,\n.saltColorChooserPicker-rootDisabledAlpha {\n  box-shadow: none !important;\n  padding: 8px 8px 0px 0px !important;\n  background: transparent !important;\n  width: calc(9 * var(--salt-size-stackable)) !important;\n}\n/* Color sliders container */\n.saltColorChooserPicker-root .flexbox-fix,\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix {\n  padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.saltColorChooserPicker-root .flexbox-fix ~ .flexbox-fix {\n  display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n  height: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n  width: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n  width: calc(var(--salt-size-base) / 4) !important;\n  height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.saltColorChooserPicker-rootDisabledAlpha .hue-horizontal > div > div {\n  position: relative;\n  margin-top: 0px !important;\n  width: 4px !important;\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n  background: var(--salt-container-primary-background) !important;\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=ColorPicker.css.js.map

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

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

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

@@ -0,0 +1,103 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var reactColor = require('react-color');
+var Color = require('./Color.js');
+var ColorHelpers = require('./ColorHelpers.js');
+var HexInput = require('./HexInput.js');
+var RGBAInput = require('./RGBAInput.js');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var ColorPicker$1 = require('./ColorPicker.css.js');
+
+const withBaseName = core.makePrefixer("saltColorChooserPicker");
+const ColorPicker = ({
+  alpha = 1,
+  disableAlphaChooser,
+  color,
+  onChange,
+  onDialogClosed
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-color-picker",
+    css: ColorPicker$1,
+    window: targetWindow
+  });
+  const rgbaValue = (color == null ? void 0 : color.rgba) ?? Color.Color.makeColorFromRGB(0, 0, 0, alpha).rgba;
+  const rgbaText = disableAlphaChooser ? "RGB" : "RGBA";
+  const onSubmitHex = (hexValue, e) => {
+    const newColor = Color.Color.makeColorFromHex(hexValue);
+    onChange(newColor, false, e);
+  };
+  const onSubmitRgb = (rgba, e) => {
+    const newColor = Color.Color.makeColorFromRGB(rgba.r, rgba.g, rgba.b, rgba.a);
+    onChange(newColor, false, e);
+  };
+  const onSubmitAlpha = (alpha2, e) => {
+    const newColor = Color.Color.makeColorFromRGB(
+      rgbaValue.r,
+      rgbaValue.g,
+      rgbaValue.b,
+      Math.max(0, Math.min(alpha2, 1))
+    );
+    onChange(newColor, false, e);
+  };
+  const onSketchPickerChange = (colorResult, e) => {
+    const newColor = Color.Color.makeColorFromRGB(
+      colorResult.rgb.r,
+      colorResult.rgb.g,
+      colorResult.rgb.b,
+      colorResult.rgb.a ?? alpha
+    );
+    onChange(newColor, false, e);
+  };
+  const onApply = () => {
+    onChange(color, true);
+    onDialogClosed();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "color-picker", className: clsx.clsx(withBaseName()), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactColor.SketchPicker,
+      {
+        className: clsx.clsx(withBaseName("swatchPickerStyles"), {
+          [withBaseName("rootDisabledAlpha")]: disableAlphaChooser,
+          [withBaseName("root")]: !disableAlphaChooser
+        }),
+        color: rgbaValue,
+        onChange: onSketchPickerChange,
+        presetColors: [],
+        disableAlpha: disableAlphaChooser
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(withBaseName("inputContainer")), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(withBaseName("inputDivs")), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(withBaseName("textDivOverrides")), children: "HEX" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          HexInput.HexInput,
+          {
+            hexValue: disableAlphaChooser ? ColorHelpers.hexValueWithoutAlpha(color == null ? void 0 : color.hex) : color == null ? void 0 : color.hex,
+            disableAlphaChooser,
+            onSubmit: onSubmitHex
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RGBAInput.RGBAInput,
+          {
+            disableAlphaChooser,
+            rgbaText,
+            rgbaValue,
+            onSubmitAlpha,
+            onSubmitRgb
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName("applyButtonDiv")), children: /* @__PURE__ */ jsxRuntime.jsx(core.Button, { "data-testid": "apply-button", variant: "cta", onClick: onApply, children: "Apply" }) })
+    ] })
+  ] });
+};
+
+exports.ColorPicker = ColorPicker;
+//# sourceMappingURL=ColorPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sources":["../src/color-chooser/ColorPicker.tsx"],"sourcesContent":["import { Button, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport type { ChangeEvent } from \"react\";\nimport { type ColorResult, SketchPicker } from \"react-color\";\nimport { Color, type RGBAValue } from \"./Color\";\nimport { hexValueWithoutAlpha } from \"./ColorHelpers\";\nimport { HexInput } from \"./HexInput\";\nimport { RGBAInput } from \"./RGBAInput\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\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","jsxs","clsx","jsx","SketchPicker","HexInput","hexValueWithoutAlpha","RGBAInput","Button"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,wBAAwB,CAAA;AAcnD,MAAM,cAAc,CAAC;AAAA,EAC1B,KAAQ,GAAA,CAAA;AAAA,EACR,mBAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAqC,KAAA;AACnC,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,SAAA,GAAA,CACJ,+BAAO,IAAQ,KAAAC,WAAA,CAAM,iBAAiB,CAAG,EAAA,CAAA,EAAG,CAAG,EAAA,KAAK,CAAE,CAAA,IAAA;AACxD,EAAM,MAAA,QAAA,GAAW,sBAAsB,KAAQ,GAAA,MAAA;AAE/C,EAAM,MAAA,WAAA,GAAc,CAAC,QAAA,EAAmB,CAA0B,KAAA;AAChE,IAAM,MAAA,QAAA,GAAWA,WAAM,CAAA,gBAAA,CAAiB,QAAQ,CAAA;AAChD,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA;AAAA,GAC7B;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;AACtE,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA;AAAA,GAC7B;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;AAAA,KAChC;AACA,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA;AAAA,GAC7B;AAEA,EAAM,MAAA,oBAAA,GAAuB,CAC3B,WAAA,EACA,CACS,KAAA;AACT,IAAA,MAAM,WAAWD,WAAM,CAAA,gBAAA;AAAA,MACrB,YAAY,GAAI,CAAA,CAAA;AAAA,MAChB,YAAY,GAAI,CAAA,CAAA;AAAA,MAChB,YAAY,GAAI,CAAA,CAAA;AAAA,MAChB,WAAA,CAAY,IAAI,CAAK,IAAA;AAAA,KACvB;AACA,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA;AAAA,GAC7B;AAEA,EAAA,MAAM,UAAU,MAAY;AAC1B,IAAA,QAAA,CAAS,OAAO,IAAI,CAAA;AACpB,IAAe,cAAA,EAAA;AAAA,GACjB;AAEA,EACE,uBAAAE,eAAA,CAAC,SAAI,aAAY,EAAA,cAAA,EAAe,WAAWC,SAAK,CAAA,YAAA,EAAc,CAE5D,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,uBAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAF,SAAA,CAAK,YAAa,CAAA,oBAAoB,CAAG,EAAA;AAAA,UAClD,CAAC,YAAA,CAAa,mBAAmB,CAAC,GAAG,mBAAA;AAAA,UACrC,CAAC,YAAA,CAAa,MAAM,CAAC,GAAG,CAAC;AAAA,SAC1B,CAAA;AAAA,QACD,KAAO,EAAA,SAAA;AAAA,QACP,QAAU,EAAA,oBAAA;AAAA,QACV,cAAc,EAAC;AAAA,QACf,YAAc,EAAA;AAAA;AAAA,KAChB;AAAA,oCACC,KAAI,EAAA,EAAA,SAAA,EAAWA,UAAK,YAAa,CAAA,gBAAgB,CAAC,CACjD,EAAA,QAAA,EAAA;AAAA,sBAAAD,eAAA,CAAC,SAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,CAAA,WAAW,CAAC,CAC5C,EAAA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,UAAK,SAAW,EAAAD,SAAA,CAAK,aAAa,kBAAkB,CAAC,GAAG,QAAG,EAAA,KAAA,EAAA,CAAA;AAAA,wBAC5DC,cAAA;AAAA,UAACE,iBAAA;AAAA,UAAA;AAAA,YACC,UACE,mBACI,GAAAC,iCAAA,CAAqB,KAAO,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAA,GAAG,IAC/B,KAAO,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAA,GAAA;AAAA,YAEb,mBAAA;AAAA,YACA,QAAU,EAAA;AAAA;AAAA,SACZ;AAAA,wBACAH,cAAA;AAAA,UAACI,mBAAA;AAAA,UAAA;AAAA,YACC,mBAAA;AAAA,YACA,QAAA;AAAA,YACA,SAAA;AAAA,YACA,aAAA;AAAA,YACA;AAAA;AAAA;AACF,OACF,EAAA,CAAA;AAAA,qCACC,KAAI,EAAA,EAAA,SAAA,EAAWL,SAAK,CAAA,YAAA,CAAa,gBAAgB,CAAC,CAAA,EACjD,QAAC,kBAAAC,cAAA,CAAAK,WAAA,EAAA,EAAO,eAAY,cAAe,EAAA,OAAA,EAAQ,OAAM,OAAS,EAAA,OAAA,EAAS,mBAEnE,CACF,EAAA;AAAA,KACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,54 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+require('../tabs/TabActivationIndicator.js');
+var Tabstrip = require('../tabs/Tabstrip.js');
+var Tab = require('../tabs/Tab.js');
+require('../tabs/TabPanel.js');
+require('../tabs/Tabs.js');
+
+const withBaseName = core.makePrefixer("saltColorChooserDictTabs");
+const DictTabs = ({
+  tabs,
+  hexValue,
+  onTabClick,
+  activeTab,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Tabstrip.Tabstrip,
+      {
+        ...props,
+        "data-testid": "color-chooser-tabstrip",
+        className: clsx.clsx(withBaseName("wrapper")),
+        activeTabIndex: activeTab,
+        onActiveChange: (tabIndex) => onTabClick(tabIndex),
+        children: [...Object.keys(tabs)].map((label, i) => /* @__PURE__ */ jsxRuntime.jsx(Tab.Tab, { className: clsx.clsx(withBaseName("text")), label }, i))
+      }
+    ),
+    [...Object.values(tabs)].map((tab, idx) => {
+      if (!tab) {
+        return null;
+      }
+      const TabComponent = tab == null ? void 0 : tab.Component;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "aria-hidden": activeTab !== idx,
+          hidden: activeTab !== idx,
+          children: (tab == null ? void 0 : tab.props) ? (
+            // @ts-ignore
+            /* @__PURE__ */ jsxRuntime.jsx(TabComponent, { ...tab == null ? void 0 : tab.props })
+          ) : null
+        },
+        idx
+      );
+    })
+  ] });
+};
+
+exports.DictTabs = DictTabs;
+//# sourceMappingURL=DictTabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DictTabs.js","sources":["../src/color-chooser/DictTabs.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { Tab, Tabstrip, type TabstripProps } from \"../tabs\";\nimport type { ColorPicker, ColorPickerProps } from \"./ColorPicker\";\nimport type { Swatches, SwatchesTabProps } from \"./Swatches\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserDictTabs\");\n\nexport type ColorChooserTabs = {\n  Swatches?: {\n    Component: typeof Swatches;\n    props: SwatchesTabProps;\n  };\n  \"Color Picker\"?: {\n    Component: typeof ColorPicker;\n    props: ColorPickerProps;\n  };\n};\n\nexport interface DictTabsProps\n  extends Omit<TabstripProps, \"tabs\" | \"renderContent\" | \"classes\"> {\n  hexValue: string | undefined;\n  tabs: ColorChooserTabs;\n  onTabClick: (index: number) => void;\n  activeTab: number;\n}\n\nexport const DictTabs = ({\n  tabs,\n  hexValue,\n  onTabClick,\n  activeTab,\n  ...props\n}: DictTabsProps): JSX.Element => {\n  return (\n    <div>\n      <Tabstrip\n        {...props}\n        data-testid=\"color-chooser-tabstrip\"\n        className={clsx(withBaseName(\"wrapper\"))}\n        activeTabIndex={activeTab}\n        onActiveChange={(tabIndex: number) => onTabClick(tabIndex)}\n      >\n        {[...Object.keys(tabs)].map((label, i) => (\n          <Tab className={clsx(withBaseName(\"text\"))} label={label} key={i} />\n        ))}\n      </Tabstrip>\n      {[...Object.values(tabs)].map((tab, idx) => {\n        if (!tab) {\n          return null;\n        }\n        const TabComponent: typeof Swatches | typeof ColorPicker =\n          tab?.Component;\n\n        return (\n          <div\n            aria-hidden={activeTab !== idx}\n            hidden={activeTab !== idx}\n            key={idx}\n          >\n            {tab?.props ? (\n              // @ts-ignore\n              <TabComponent {...tab?.props} />\n            ) : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["makePrefixer","jsx","Tabstrip","clsx","Tab"],"mappings":";;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA;AAqBrD,MAAM,WAAW,CAAC;AAAA,EACvB,IAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAkC,KAAA;AAChC,EAAA,uCACG,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,iBAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,aAAY,EAAA,wBAAA;AAAA,QACZ,SAAW,EAAAC,SAAA,CAAK,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,QACvC,cAAgB,EAAA,SAAA;AAAA,QAChB,cAAgB,EAAA,CAAC,QAAqB,KAAA,UAAA,CAAW,QAAQ,CAAA;AAAA,QAExD,QAAA,EAAA,CAAC,GAAG,MAAO,CAAA,IAAA,CAAK,IAAI,CAAC,CAAA,CAAE,IAAI,CAAC,KAAA,EAAO,sBACjCF,cAAA,CAAAG,OAAA,EAAA,EAAI,WAAWD,SAAK,CAAA,YAAA,CAAa,MAAM,CAAC,CAAA,EAAG,KAAmB,EAAA,EAAA,CAAG,CACnE;AAAA;AAAA,KACH;AAAA,IACC,CAAC,GAAG,MAAA,CAAO,MAAO,CAAA,IAAI,CAAC,CAAE,CAAA,GAAA,CAAI,CAAC,GAAA,EAAK,GAAQ,KAAA;AAC1C,MAAA,IAAI,CAAC,GAAK,EAAA;AACR,QAAO,OAAA,IAAA;AAAA;AAET,MAAA,MAAM,eACJ,GAAK,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAA,SAAA;AAEP,MACE,uBAAAF,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,eAAa,SAAc,KAAA,GAAA;AAAA,UAC3B,QAAQ,SAAc,KAAA,GAAA;AAAA,UAGrB,QAAK,EAAA,CAAA,GAAA,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAA,KAAA;AAAA;AAAA,4BAEHA,cAAA,CAAA,YAAA,EAAA,EAAc,GAAG,GAAA,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAK,KAAO,EAAA;AAAA,cAC5B;AAAA,SAAA;AAAA,QALC;AAAA,OAMP;AAAA,KAEH;AAAA,GACH,EAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,53 @@
+'use strict';
+
+var colorMap = require('./colorMap.js');
+
+function makePalette(colorScheme, saltColorOverrides) {
+  const colorNames = Array.from(
+    Object.keys(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":";;;;AAEgB,SAAA,WAAA,CACd,aACA,kBACU,EAAA;AAEV,EAAA,MAAM,aAAa,KAAM,CAAA,IAAA;AAAA,IACvB,MAAA,CAAO,IAAK,CAAA,kBAAA,IAAsBA,qBAAY;AAAA,GAChD;AAEA,EAAA,MAAM,aAAuB,EAAC;AAC9B,EAAA,KAAA,MAAW,aAAa,UAAY,EAAA;AAClC,IAAA,IAAI,UAAU,QAAS,CAAA,WAAW,CAAK,IAAA,EAAE,cAAc,WAAc,CAAA,EAAA;AACnE,MAAW,UAAA,CAAA,IAAA;AAAA,QACT,kBACI,GAAA,kBAAA,CAAmB,SAAS,CAAA,GAC5BA,sBAAa,SAAS;AAAA,OAC5B;AAAA;AACF;AAEF,EAAO,OAAA,UAAA;AACT;AAEA,MAAM,WAAc,GAAA,CAAC,kBACnB,KAAA,WAAA,CAAY,QAAQ,kBAAkB,CAAA;AACxC,MAAM,YAAe,GAAA,CAAC,kBACpB,KAAA,WAAA,CAAY,SAAS,kBAAkB,CAAA;AACzC,MAAM,UAAa,GAAA,CAAC,kBAClB,KAAA,WAAA,CAAY,OAAO,kBAAkB,CAAA;AACvC,MAAM,aAAgB,GAAA,CAAC,kBACrB,KAAA,WAAA,CAAY,UAAU,kBAAkB,CAAA;AAC1C,MAAM,WAAc,GAAA,CAAC,kBACnB,KAAA,WAAA,CAAY,QAAQ,kBAAkB,CAAA;AACxC,MAAM,aAAgB,GAAA,CAAC,kBACrB,KAAA,WAAA,CAAY,UAAU,kBAAkB,CAAA;AAC1C,MAAM,WAAc,GAAA,CAAC,kBACnB,KAAA,WAAA,CAAY,QAAQ,kBAAkB,CAAA;AAEjC,SAAS,iBACd,kBACY,EAAA;AACZ,EAAO,OAAA;AAAA,IACL,WAAY,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA;AAAA,IAC1C,WAAY,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,EAAE,CAAA;AAAA,IAC3C,YAAa,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA;AAAA,IAC3C,YAAa,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,EAAE,CAAA;AAAA,IAC5C,WAAY,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA;AAAA,IAC1C,WAAY,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,EAAE,CAAA;AAAA,IAC3C,aAAc,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA;AAAA,IAC5C,aAAc,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,EAAE,CAAA;AAAA,IAC7C,UAAW,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA;AAAA,IACzC,UAAW,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,EAAE,CAAA;AAAA,IAC1C,aAAc,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA;AAAA,IAC5C,aAAc,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,EAAE,CAAA;AAAA,IAC7C,WAAY,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA;AAAA,IAC1C,WAAY,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,EAAE,CAAA;AAAA,IAC3C;AAAA,MACE,qBACI,kBAAmB,CAAA,SAAA,GACjB,kBAAmB,CAAA,SAAA,GACnB,uBACFA,qBAAa,CAAA,SAAA;AAAA,MACjB,GAAG,WAAY,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AAAA,MAC/C,qBACI,kBAAmB,CAAA,SAAA,GACjB,kBAAmB,CAAA,SAAA,GACnB,iBACFA,qBAAa,CAAA,SAAA;AAAA,MACjB;AAAA;AACF,GACF;AACF;;;;;"}

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

package/dist-cjs/color-chooser/RGBAInput.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":";;;;;;"}