@salt-ds/lab 1.0.0-alpha.0

package/dist-cjs/packages/lab/src/color-chooser/RGBAInputField.js

@@ -0,0 +1,67 @@
+'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 Input = require('../input/Input.js');
+require('../input/StaticInputAdornment.js');
+require('./RGBAInput.css.js');
+
+const withBaseName = core.makePrefixer("saltColorChooser");
+const RGBInput = ({
+  rgbaValue,
+  value,
+  onSubmit
+}) => {
+  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(Input.Input, {
+    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/packages/lab/src/color-chooser/RGBAInputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RGBAInputField.js","sources":["../src/color-chooser/RGBAInputField.tsx"],"sourcesContent":["import { useState, useEffect } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { RGBAValue } from \"./Color\";\nimport { Input } from \"../input\";\n\nimport \"./RGBAInput.css\";\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 [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","useState","useEffect","value","jsx","Input"],"mappings":"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"}

package/dist-cjs/packages/lab/src/color-chooser/Swatch.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+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-borderColor-style) 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-borderColor-style) var(--salt-container-primary-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n  outline: var(--salt-size-border) var(--salt-container-borderColor-style) 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-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";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=Swatch.css.js.map

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

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

package/dist-cjs/packages/lab/src/color-chooser/Swatch.js

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('classnames');
+var core = require('@salt-ds/core');
+var Color = require('./Color.js');
+var colorUtils = require('./color-utils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const withBaseName = core.makePrefixer("saltColorChooserSwatch");
+const Swatch = ({
+  color,
+  onClick,
+  active,
+  alpha,
+  onDialogClosed,
+  transparent = false
+}) => {
+  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: cx__default["default"]({
+      [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/packages/lab/src/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 cn from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\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 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={cn({\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","Color","isTransparent","color","jsx","cn"],"mappings":";;;;;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,wBAAwB,CAAA,CAAA;AAenD,MAAM,SAAS,CAAC;AAAA,EACrB,KAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAChB,CAAgC,KAAA;AAC9B,EAAA,MAAM,cAAc,MAAM;AACxB,IAAM,MAAA,QAAA,GAAWC,WAAM,CAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAC7C,IAAAC,wBAAA,CAAc,KAAK,CAAI,GAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,QAAS,CAAA,CAAA,CAAA,GAAK,qCAAU,QAAS,CAAA,KAAA,CAAA,CAAA;AAElE,IAAA,OAAA,CAAQ,UAAU,IAAI,CAAA,CAAA;AACtB,IAAe,cAAA,EAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,CAA2C,KAAA;AArCpE,IAAA,IAAA,EAAA,CAAA;AAsCI,IAAA,MAAM,YAAW,EAAM,GAAAD,WAAA,CAAA,gBAAA,CAAiB,KAAK,CAAA,KAA5B,mBAA+B,QAAS,CAAA,KAAA,CAAA,CAAA;AACzD,IAAA,CAAA,CAAE,GAAQ,KAAA,OAAA,IAAW,OAAQ,CAAA,QAAA,EAAU,IAAI,CAAA,CAAA;AAC3C,IAAe,cAAA,EAAA,CAAA;AAAA,GACjB,CAAA;AAGA,EAAM,MAAA,aAAA,GAAgB,CAACE,MAA2B,KAAA;AAChD,IACEA,OAAAA,MAAAA,CAAM,WAAY,EAAA,KAAM,OACxBA,IAAAA,MAAAA,CAAM,WAAY,EAAA,CAAE,UAAW,CAAA,SAAS,CACxCA,IAAAA,MAAAA,CAAM,WAAY,EAAA,CAAE,WAAW,SAAS,CAAA,IACxCA,MAAM,CAAA,WAAA,EAAc,CAAA,UAAA,CAAW,SAAS,CAAA,IACxCA,MAAM,CAAA,WAAA,EAAc,CAAA,UAAA,CAAW,SAAS,CAAA,CAAA;AAAA,GAE5C,CAAA;AACA,EAAM,MAAA,OAAA,GAAU,CAACA,MAAAA,KAA2BA,MAAU,KAAA,OAAA,CAAA;AAEtD,EAAA,MAAM,qBAAqB,MAAM;AAC/B,IAAM,MAAA,eAAA,GAAkBF,WAAM,CAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AACpD,IAAO,OAAA,eAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,eAAA,CAAiB,SAAS,KAAO,CAAA,CAAA,GAAA,CAAA;AAAA,GAC1C,CAAA;AAEA,EAAA,uBACGG,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,eAAa,CAAU,OAAA,EAAA,KAAA,CAAA,CAAA;AAAA,IACvB,KAAO,EAAA;AAAA,MACL,YAAY,kBAAmB,EAAA;AAAA,KACjC;AAAA,IACA,WAAWC,sBAAG,CAAA;AAAA,MACZ,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,MAC1B,CAAC,YAAa,CAAA,aAAa,CAAI,GAAA,WAAA;AAAA,MAC/B,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,cAAc,KAAK,CAAA;AAAA,MACjD,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,QAAQ,KAAK,CAAA;AAAA,MAC5C,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,CAAC,QAAQ,KAAK,CAAA,IAAK,CAAC,aAAA,CAAc,KAAK,CAAA;AAAA,KAClE,CAAA;AAAA,IACD,OAAS,EAAA,WAAA;AAAA,IACT,QAAU,EAAA,CAAA;AAAA,IACV,SAAW,EAAA,aAAA;AAAA,GACb,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/packages/lab/src/color-chooser/Swatches.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+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-text-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";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=Swatches.css.js.map

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

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

package/dist-cjs/packages/lab/src/color-chooser/Swatches.js

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('classnames');
+var core = require('@salt-ds/core');
+var AlphaInputField = require('./AlphaInputField.js');
+var SwatchesPicker = require('./SwatchesPicker.js');
+require('./Swatches.css.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const withBaseName = core.makePrefixer("saltColorChooserSwatches");
+const Swatches = ({
+  allColors,
+  color,
+  alpha,
+  handleColorChange,
+  displayColorName,
+  placeholder,
+  onDialogClosed
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
+  "data-testid": "swatches",
+  className: cx__default["default"](withBaseName("pickerDiv")),
+  children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SwatchesPicker.SwatchesPicker, {
+      allColors,
+      color,
+      onChange: handleColorChange,
+      alpha,
+      onDialogClosed
+    }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: cx__default["default"](withBaseName("textDiv")),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", {
+              className: cx__default["default"](withBaseName("colorTextDiv")),
+              children: "Color:"
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", {
+              className: cx__default["default"](withBaseName("colorNameTextDiv")),
+              children: displayColorName != null ? displayColorName : placeholder
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", {
+              className: cx__default["default"](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/packages/lab/src/color-chooser/Swatches.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Swatches.js","sources":["../src/color-chooser/Swatches.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport { Color } from \"./Color\";\nimport { SwatchesPicker } from \"./SwatchesPicker\";\nimport \"./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  <div data-testid=\"swatches\" className={cn(withBaseName(\"pickerDiv\"))}>\n    <SwatchesPicker\n      allColors={allColors}\n      color={color}\n      onChange={handleColorChange}\n      alpha={alpha}\n      onDialogClosed={onDialogClosed}\n    />\n    <div className={cn(withBaseName(\"textDiv\"))}>\n      <div>\n        <span className={cn(withBaseName(\"colorTextDiv\"))}>Color:</span>\n        <span className={cn(withBaseName(\"colorNameTextDiv\"))}>\n          {displayColorName ?? placeholder}\n        </span>\n      </div>\n      <div>\n        <span className={cn(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"],"names":["makePrefixer","jsxs","cn","jsx","SwatchesPicker","AlphaInput","alpha"],"mappings":";;;;;;;;;;;;;;;AAOA,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,CAAA,qBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,EAAI,aAAY,EAAA,UAAA;AAAA,EAAW,SAAW,EAAAC,sBAAA,CAAG,YAAa,CAAA,WAAW,CAAC,CAAA;AAAA,EACjE,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAAC,6BAAA,EAAA;AAAA,MACC,SAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAU,EAAA,iBAAA;AAAA,MACV,KAAA;AAAA,MACA,cAAA;AAAA,KACF,CAAA;AAAA,oBACCH,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAC,sBAAA,CAAG,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,MACxC,QAAA,EAAA;AAAA,wBAACD,eAAA,CAAA,KAAA,EAAA;AAAA,UACC,QAAA,EAAA;AAAA,4BAACE,cAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAW,EAAAD,sBAAA,CAAG,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,cAAG,QAAA,EAAA,QAAA;AAAA,aAAM,CAAA;AAAA,4BACxDC,cAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAW,EAAAD,sBAAA,CAAG,YAAa,CAAA,kBAAkB,CAAC,CAAA;AAAA,cACjD,QAAoB,EAAA,gBAAA,IAAA,IAAA,GAAA,gBAAA,GAAA,WAAA;AAAA,aACvB,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,wBACCD,eAAA,CAAA,KAAA,EAAA;AAAA,UACC,QAAA,EAAA;AAAA,4BAACE,cAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAW,EAAAD,sBAAA,CAAG,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,cAAG,QAAA,EAAA,UAAA;AAAA,aAAQ,CAAA;AAAA,4BAC1DC,cAAA,CAAAE,0BAAA,EAAA;AAAA,cACC,UAAY,EAAA,CAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAO,IAAK,CAAA,CAAA,MAAM,IAAI,CAAI,GAAA,KAAA;AAAA,cACtC,aAAe,EAAA,IAAA;AAAA,cACf,QAAA,EAAU,CAACC,MAAAA,EAAe,CAAgC,KAAA;AACxD,gBAAM,MAAA,QAAA,GAAW,+BAAO,QAASA,CAAAA,MAAAA,CAAAA,CAAAA;AACjC,gBAAkB,iBAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,eACtC;AAAA,aACF,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAAA;AAAA,CACF;;;;"}

package/dist-cjs/packages/lab/src/color-chooser/SwatchesPicker.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Swatch = require('./Swatch.js');
+var ColorHelpers = require('./ColorHelpers.js');
+var colorUtils = require('./color-utils.js');
+require('./Swatch.css.js');
+
+const SwatchesGroup = ({
+  swatchGroup,
+  onClick,
+  onDialogClosed,
+  selectedColor,
+  alpha
+}) => {
+  var _a;
+  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.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

package/dist-cjs/packages/lab/src/color-chooser/SwatchesPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwatchesPicker.js","sources":["../src/color-chooser/SwatchesPicker.tsx"],"sourcesContent":["import { Color } from \"./Color\";\nimport { Swatch } from \"./Swatch\";\nimport { convertColorMapValueToHex } from \"./ColorHelpers\";\nimport { isTransparent } from \"./color-utils\";\n\nimport \"./Swatch.css\";\n\ninterface SwatchesPickerProps {\n  allColors: string[][];\n  color: Color | undefined;\n  alpha?: number;\n  onChange: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: React.ChangeEvent\n  ) => void;\n  onDialogClosed: () => void;\n}\n\ninterface SwatchesGroupProps {\n  swatchGroup: string[];\n  selectedColor: string | undefined;\n  alpha: number;\n  onClick: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: React.ChangeEvent\n  ) => void;\n  onDialogClosed: () => void;\n}\n\nconst SwatchesGroup = ({\n  swatchGroup,\n  onClick,\n  onDialogClosed,\n  selectedColor,\n  alpha,\n}: SwatchesGroupProps): JSX.Element => {\n  const isBlackOrWhite = (color: string): boolean => {\n    return (\n      ((selectedColor ? selectedColor.startsWith(\"#000000\") : false) &&\n        color.toLowerCase() === \"black\") ||\n      ((selectedColor\n        ? selectedColor.toLowerCase().startsWith(\"#ffffff\")\n        : false) &&\n        color.toLowerCase() === \"white\")\n    );\n  };\n  const isActive = (color: string): boolean => {\n    return (\n      color.toLowerCase() ===\n        selectedColor?.substring(0, 7).toString().toLowerCase() ||\n      isBlackOrWhite(color)\n    );\n  };\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\" }}>\n      {swatchGroup\n        ?.map((color) => {\n          return convertColorMapValueToHex(color);\n        })\n        ?.map((color) => (\n          <Swatch\n            key={color.toString()}\n            active={isActive(color)}\n            color={color}\n            onClick={onClick}\n            onDialogClosed={onDialogClosed}\n            alpha={alpha}\n            transparent={isTransparent(color)}\n          />\n        ))}\n    </div>\n  );\n};\n\nexport const SwatchesPicker = ({\n  allColors,\n  color,\n  alpha = 1,\n  onChange,\n  onDialogClosed,\n}: SwatchesPickerProps): JSX.Element => {\n  return (\n    <div\n      data-testid=\"swatches-picker\"\n      style={{ display: \"flex\", flexDirection: \"row\" }}\n    >\n      {allColors?.map((swatchGroup: string[]) => (\n        <SwatchesGroup\n          swatchGroup={swatchGroup}\n          key={swatchGroup.toString()}\n          selectedColor={color?.hex}\n          onClick={onChange}\n          onDialogClosed={onDialogClosed}\n          alpha={alpha}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":["jsx","convertColorMapValueToHex","Swatch","isTransparent"],"mappings":";;;;;;;;;;AA+BA,MAAM,gBAAgB,CAAC;AAAA,EACrB,WAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA;AACF,CAAuC,KAAA;AArCvC,EAAA,IAAA,EAAA,CAAA;AAsCE,EAAM,MAAA,cAAA,GAAiB,CAAC,KAA2B,KAAA;AACjD,IACI,OAAA,CAAA,aAAA,GAAgB,cAAc,UAAW,CAAA,SAAS,IAAI,KACtD,KAAA,KAAA,CAAM,aAAkB,KAAA,OAAA,IAAA,CACxB,gBACE,aAAc,CAAA,WAAA,GAAc,UAAW,CAAA,SAAS,IAChD,KACF,KAAA,KAAA,CAAM,aAAkB,KAAA,OAAA,CAAA;AAAA,GAE9B,CAAA;AACA,EAAM,MAAA,QAAA,GAAW,CAAC,KAA2B,KAAA;AAC3C,IACE,OAAA,KAAA,CAAM,WAAY,EAAA,MAChB,aAAe,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,SAAA,CAAU,GAAG,CAAG,CAAA,CAAA,QAAA,EAAA,CAAW,WAC5C,EAAA,CAAA,IAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AAAA,GAExB,CAAA;AAEA,EAAA,uBACGA,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,IACpD,QAAA,EAAA,CAAA,EAAA,GAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CACG,GAAI,CAAA,CAAC,KAAU,KAAA;AACf,MAAA,OAAOC,uCAA0B,KAAK,CAAA,CAAA;AAAA,KAFzC,CAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAIG,GAAI,CAAA,CAAC,0BACJD,cAAA,CAAAE,aAAA,EAAA;AAAA,MAEC,MAAA,EAAQ,SAAS,KAAK,CAAA;AAAA,MACtB,KAAA;AAAA,MACA,OAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA,EAAaC,yBAAc,KAAK,CAAA;AAAA,KAN3B,EAAA,KAAA,CAAM,UAOb,CAAA,CAAA;AAAA,GAEN,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAQ,GAAA,CAAA;AAAA,EACR,QAAA;AAAA,EACA,cAAA;AACF,CAAwC,KAAA;AACtC,EAAA,uBACGH,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAY,EAAA,iBAAA;AAAA,IACZ,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,KAAM,EAAA;AAAA,IAE9C,QAAW,EAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,GAAA,CAAI,CAAC,WAAA,qBACdA,cAAA,CAAA,aAAA,EAAA;AAAA,MACC,WAAA;AAAA,MAEA,eAAe,KAAO,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA;AAAA,MACtB,OAAS,EAAA,QAAA;AAAA,MACT,cAAA;AAAA,MACA,KAAA;AAAA,KAJK,EAAA,WAAA,CAAY,UAKnB,CAAA,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/packages/lab/src/color-chooser/color-utils.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const isTransparent = (color) => {
+  return (color == null ? void 0 : color.toLowerCase()) === "#00000000";
+};
+
+exports.isTransparent = isTransparent;
+//# sourceMappingURL=color-utils.js.map

package/dist-cjs/packages/lab/src/color-chooser/color-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-utils.js","sources":["../src/color-chooser/color-utils.ts"],"sourcesContent":["export const isTransparent = (color?: string): boolean => {\n  return color?.toLowerCase() === \"#00000000\";\n};\n"],"names":[],"mappings":";;;;AAAa,MAAA,aAAA,GAAgB,CAAC,KAA4B,KAAA;AACxD,EAAA,OAAA,CAAO,+BAAO,WAAkB,EAAA,MAAA,WAAA,CAAA;AAClC;;;;"}

package/dist-cjs/packages/lab/src/color-chooser/colorMap.js

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

package/dist-cjs/packages/lab/src/color-chooser/colorMap.js.map

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

package/dist-cjs/packages/lab/src/color-chooser/createTabsMapping.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ColorPicker = require('./ColorPicker.js');
+var Swatches = require('./Swatches.js');
+
+const createTabsMapping = ({
+  swatches,
+  colorPicker,
+  disableAlphaChooser,
+  allColors,
+  color,
+  alpha,
+  handleColorChange,
+  displayColorName,
+  placeholder,
+  onDialogClosed
+}) => {
+  if (!swatches && !colorPicker) {
+    throw new Error("You cannot select no color chooser tabs");
+  }
+  return {
+    ...swatches && {
+      Swatches: {
+        Component: Swatches.Swatches,
+        props: {
+          allColors,
+          color,
+          alpha,
+          handleColorChange,
+          displayColorName,
+          placeholder,
+          onDialogClosed
+        }
+      }
+    },
+    ...colorPicker && {
+      "Color Picker": {
+        Component: ColorPicker.ColorPicker,
+        props: {
+          disableAlphaChooser,
+          color,
+          alpha,
+          onChange: handleColorChange,
+          onDialogClosed
+        }
+      }
+    }
+  };
+};
+
+exports.createTabsMapping = createTabsMapping;
+//# sourceMappingURL=createTabsMapping.js.map

package/dist-cjs/packages/lab/src/color-chooser/createTabsMapping.js.map

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