@salt-ds/lab 1.0.0-alpha.10 → 1.0.0-alpha.101

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

@@ -1 +1 @@
-{"version":3,"file":"DictTabs.js","sources":["../src/color-chooser/DictTabs.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Tabstrip, TabstripProps, Tab } from \"../tabs\";\nimport { ColorPicker, ColorPickerProps } from \"./ColorPicker\";\nimport { 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":[],"mappings":";;;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AAqBrD,MAAM,WAAW,CAAC;AAAA,EACvB,IAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACG,GAAA,KAAA;AACL,CAAkC,KAAA;AAChC,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,QAAA,EAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,aAAY,EAAA,wBAAA;AAAA,QACZ,SAAW,EAAA,IAAA,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,MAAA,CAAO,IAAK,CAAA,IAAI,CAAC,CAAA,CAAE,GAAI,CAAA,CAAC,KAAO,EAAA,CAAA,qBACjC,GAAA,CAAA,GAAA,EAAA;AAAA,UAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,MAAM,CAAC,CAAA;AAAA,UAAG,KAAA;AAAA,SAAA,EAAmB,CAAG,CACnE,CAAA;AAAA,OACH,CAAA;AAAA,MACC,CAAC,GAAG,MAAA,CAAO,MAAO,CAAA,IAAI,CAAC,CAAE,CAAA,GAAA,CAAI,CAAC,GAAA,EAAK,GAAQ,KAAA;AAC1C,QAAA,IAAI,CAAC,GAAK,EAAA;AACR,UAAO,OAAA,IAAA,CAAA;AAAA,SACT;AACA,QAAA,MAAM,eACJ,GAAK,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAA,SAAA,CAAA;AAEP,QAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,UACC,eAAa,SAAc,KAAA,GAAA;AAAA,UAC3B,QAAQ,SAAc,KAAA,GAAA;AAAA,UAGrB,QAAA,EAAA,CAAA,GAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAK,yBAEH,GAAA,CAAA,YAAA,EAAA;AAAA,YAAc,GAAG,GAAK,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAA,KAAA;AAAA,WAAO,CAC5B,GAAA,IAAA;AAAA,SAAA,EALC,GAMP,CAAA,CAAA;AAAA,OAEH,CAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
+{"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-expect-error\n              <TabComponent {...tab?.props} />\n            ) : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA;AAqBrD,MAAM,WAAW,CAAC;AAAA,EACvB,IAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAkC;AAChC,EAAA,4BACG,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,aAAA,EAAY,wBAAA;AAAA,QACZ,SAAA,EAAW,IAAA,CAAK,YAAA,CAAa,SAAS,CAAC,CAAA;AAAA,QACvC,cAAA,EAAgB,SAAA;AAAA,QAChB,cAAA,EAAgB,CAAC,QAAA,KAAqB,UAAA,CAAW,QAAQ,CAAA;AAAA,QAExD,QAAA,EAAA,CAAC,GAAG,MAAA,CAAO,IAAA,CAAK,IAAI,CAAC,CAAA,CAAE,IAAI,CAAC,KAAA,EAAO,sBAClC,GAAA,CAAC,GAAA,EAAA,EAAI,WAAW,IAAA,CAAK,YAAA,CAAa,MAAM,CAAC,CAAA,EAAG,KAAA,EAAA,EAAmB,CAAG,CACnE;AAAA;AAAA,KACH;AAAA,IACC,CAAC,GAAG,MAAA,CAAO,MAAA,CAAO,IAAI,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,GAAA,EAAK,GAAA,KAAQ;AAC1C,MAAA,IAAI,CAAC,GAAA,EAAK;AACR,QAAA,OAAO,IAAA;AAAA,MACT;AACA,MAAA,MAAM,eACJ,GAAA,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAK,SAAA;AAEP,MAAA,uBACE,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,eAAa,SAAA,KAAc,GAAA;AAAA,UAC3B,QAAQ,SAAA,KAAc,GAAA;AAAA,UAGrB,QAAA,EAAA,CAAA,GAAA,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAK,KAAA;AAAA;AAAA,4BAEJ,GAAA,CAAC,YAAA,EAAA,EAAc,GAAG,GAAA,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAK,KAAA,EAAO;AAAA,cAC5B;AAAA,SAAA;AAAA,QALC;AAAA,OAMP;AAAA,IAEJ,CAAC;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}

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

@@ -2,7 +2,7 @@ import { saltColorMap } from './colorMap.js';
 
 function makePalette(colorScheme, saltColorOverrides) {
   const colorNames = Array.from(
-    Object.keys(saltColorOverrides != null ? saltColorOverrides : saltColorMap)
+    Object.keys(saltColorOverrides ?? saltColorMap)
   );
   const colorArray = [];
   for (const colorName of colorNames) {
@@ -38,9 +38,9 @@ function getColorPalettes(saltColorOverrides) {
     grayPalette(saltColorOverrides).slice(0, 7),
     grayPalette(saltColorOverrides).slice(7, 14),
     [
-      saltColorOverrides ? saltColorOverrides["saltwhite"] ? saltColorOverrides["saltwhite"] : "rgb(255, 255, 255)" : saltColorMap["saltwhite"],
+      saltColorOverrides ? saltColorOverrides.saltwhite ? saltColorOverrides.saltwhite : "rgb(255, 255, 255)" : saltColorMap.saltwhite,
       ...grayPalette(saltColorOverrides).slice(14, 18),
-      saltColorOverrides ? saltColorOverrides["saltblack"] ? saltColorOverrides["saltblack"] : "rgb(0, 0, 0)" : saltColorMap["saltblack"],
+      saltColorOverrides ? saltColorOverrides.saltblack ? saltColorOverrides.saltblack : "rgb(0, 0, 0)" : saltColorMap.saltblack,
       "rgba(0, 0, 0, 0)"
     ]
   ];

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

@@ -1 +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":[],"mappings":";;AAEgB,SAAA,WAAA,CACd,aACA,kBACU,EAAA;AAEV,EAAA,MAAM,aAAa,KAAM,CAAA,IAAA;AAAA,IACvB,MAAA,CAAO,IAAK,CAAA,kBAAA,IAAA,IAAA,GAAA,kBAAA,GAAsB,YAAY,CAAA;AAAA,GAChD,CAAA;AAEA,EAAA,MAAM,aAAuB,EAAC,CAAA;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,kBAAA,GACI,kBAAmB,CAAA,SAAA,CAAA,GACnB,YAAa,CAAA,SAAA,CAAA;AAAA,OACnB,CAAA;AAAA,KACF;AAAA,GACF;AACA,EAAO,OAAA,UAAA,CAAA;AACT,CAAA;AAEA,MAAM,WAAc,GAAA,CAAC,kBACnB,KAAA,WAAA,CAAY,QAAQ,kBAAkB,CAAA,CAAA;AACxC,MAAM,YAAe,GAAA,CAAC,kBACpB,KAAA,WAAA,CAAY,SAAS,kBAAkB,CAAA,CAAA;AACzC,MAAM,UAAa,GAAA,CAAC,kBAClB,KAAA,WAAA,CAAY,OAAO,kBAAkB,CAAA,CAAA;AACvC,MAAM,aAAgB,GAAA,CAAC,kBACrB,KAAA,WAAA,CAAY,UAAU,kBAAkB,CAAA,CAAA;AAC1C,MAAM,WAAc,GAAA,CAAC,kBACnB,KAAA,WAAA,CAAY,QAAQ,kBAAkB,CAAA,CAAA;AACxC,MAAM,aAAgB,GAAA,CAAC,kBACrB,KAAA,WAAA,CAAY,UAAU,kBAAkB,CAAA,CAAA;AAC1C,MAAM,WAAc,GAAA,CAAC,kBACnB,KAAA,WAAA,CAAY,QAAQ,kBAAkB,CAAA,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,WAAA,CAAA,GACjB,kBAAmB,CAAA,WAAA,CAAA,GACnB,uBACF,YAAa,CAAA,WAAA,CAAA;AAAA,MACjB,GAAG,WAAY,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AAAA,MAC/C,qBACI,kBAAmB,CAAA,WAAA,CAAA,GACjB,kBAAmB,CAAA,WAAA,CAAA,GACnB,iBACF,YAAa,CAAA,WAAA,CAAA;AAAA,MACjB,kBAAA;AAAA,KACF;AAAA,GACF,CAAA;AACF;;;;"}
+{"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":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-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-text-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";
+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-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=HexInput.css.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"HexInput.js","sources":["../src/color-chooser/HexInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useEffect, useState } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { isValidHex } from \"./ColorHelpers\";\nimport { InputLegacy as Input } from \"../input-legacy\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport hexInputCss from \"./HexInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserHexInput\");\n\ninterface HexInputProps {\n  hexValue: string | undefined;\n  disableAlphaChooser: boolean;\n  onSubmit: (hex: string | undefined, e?: React.ChangeEvent) => void;\n}\n\nexport const HexInput = ({\n  hexValue,\n  disableAlphaChooser,\n  onSubmit,\n}: HexInputProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-hex-input\",\n    css: hexInputCss,\n    window: targetWindow,\n  });\n\n  const [hexInputValue, setHexInputValue] = useState<string | undefined>(\n    hexValue\n  );\n\n  useEffect(() => {\n    setHexInputValue(hexValue);\n  }, [hexValue]);\n\n  const handleHexInputChange = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string\n  ): void => {\n    if (disableAlphaChooser && value.length < 7) {\n      setHexInputValue(\"#\" + value);\n    }\n    if (!disableAlphaChooser) {\n      setHexInputValue(\"#\" + value);\n    }\n  };\n\n  const handleKeyDownHex = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (e.key === \"Enter\") {\n      isValidHex(hexInputValue) && onSubmit(hexInputValue);\n    }\n  };\n\n  const handleOnBlurHex = (e: React.FocusEvent<HTMLInputElement>): void => {\n    isValidHex(hexInputValue) && onSubmit(hexInputValue, e);\n  };\n\n  return (\n    <div className={clsx(withBaseName())}>\n      <span className={clsx(withBaseName(\"hashSign\"))}>#</span>\n      <Input\n        data-testid=\"hex-input\"\n        className={clsx(withBaseName(\"input\"))}\n        value={hexInputValue?.toString().replace(\"#\", \"\").toUpperCase() ?? \"\"}\n        onChange={handleHexInputChange}\n        onKeyDown={handleKeyDownHex}\n        onBlur={handleOnBlurHex}\n      />\n    </div>\n  );\n};\n"],"names":["hexInputCss","Input"],"mappings":";;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AAQrD,MAAM,WAAW,CAAC;AAAA,EACvB,QAAA;AAAA,EACA,mBAAA;AAAA,EACA,QAAA;AACF,CAAkC,KAAA;AAvBlC,EAAA,IAAA,EAAA,CAAA;AAwBE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAA,QAAA;AAAA,IACxC,QAAA;AAAA,GACF,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,gBAAA,CAAiB,QAAQ,CAAA,CAAA;AAAA,GAC3B,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,oBAAA,GAAuB,CAC3B,KAAA,EACA,KACS,KAAA;AACT,IAAI,IAAA,mBAAA,IAAuB,KAAM,CAAA,MAAA,GAAS,CAAG,EAAA;AAC3C,MAAA,gBAAA,CAAiB,MAAM,KAAK,CAAA,CAAA;AAAA,KAC9B;AACA,IAAA,IAAI,CAAC,mBAAqB,EAAA;AACxB,MAAA,gBAAA,CAAiB,MAAM,KAAK,CAAA,CAAA;AAAA,KAC9B;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,CAAmD,KAAA;AAC3E,IAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,MAAW,UAAA,CAAA,aAAa,CAAK,IAAA,QAAA,CAAS,aAAa,CAAA,CAAA;AAAA,KACrD;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,CAAgD,KAAA;AACvE,IAAA,UAAA,CAAW,aAAa,CAAA,IAAK,QAAS,CAAA,aAAA,EAAe,CAAC,CAAA,CAAA;AAAA,GACxD,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA,EAAW,IAAK,CAAA,YAAA,EAAc,CAAA;AAAA,IACjC,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,UAAU,CAAC,CAAA;AAAA,QAAG,QAAA,EAAA,GAAA;AAAA,OAAC,CAAA;AAAA,sBACjD,GAAA,CAAAC,WAAA,EAAA;AAAA,QACC,aAAY,EAAA,WAAA;AAAA,QACZ,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,OAAO,CAAC,CAAA;AAAA,QACrC,QAAO,EAAe,GAAA,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,QAAA,EAAA,CAAW,QAAQ,GAAK,EAAA,EAAA,CAAA,CAAI,kBAA3C,IAA4D,GAAA,EAAA,GAAA,EAAA;AAAA,QACnE,QAAU,EAAA,oBAAA;AAAA,QACV,SAAW,EAAA,gBAAA;AAAA,QACX,MAAQ,EAAA,eAAA;AAAA,OACV,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"HexInput.js","sources":["../src/color-chooser/HexInput.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\";\nimport { useEffect, useState } from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\nimport { isValidHex } from \"./ColorHelpers\";\n\nimport hexInputCss from \"./HexInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserHexInput\");\n\ninterface HexInputProps {\n  hexValue: string | undefined;\n  disableAlphaChooser: boolean;\n  onSubmit: (hex: string | undefined, e?: ChangeEvent) => void;\n}\n\nexport const HexInput = ({\n  hexValue,\n  disableAlphaChooser,\n  onSubmit,\n}: HexInputProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-hex-input\",\n    css: hexInputCss,\n    window: targetWindow,\n  });\n\n  const [hexInputValue, setHexInputValue] = useState<string | undefined>(\n    hexValue,\n  );\n\n  useEffect(() => {\n    setHexInputValue(hexValue);\n  }, [hexValue]);\n\n  const handleHexInputChange = (\n    event: ChangeEvent<HTMLInputElement>,\n    value: string,\n  ): void => {\n    if (disableAlphaChooser && value.length < 7) {\n      setHexInputValue(`#${value}`);\n    }\n    if (!disableAlphaChooser) {\n      setHexInputValue(`#${value}`);\n    }\n  };\n\n  const handleKeyDownHex = (e: KeyboardEvent<HTMLInputElement>): void => {\n    if (e.key === \"Enter\") {\n      isValidHex(hexInputValue) && onSubmit(hexInputValue);\n    }\n  };\n\n  const handleOnBlurHex = (e: FocusEvent<HTMLInputElement>): void => {\n    isValidHex(hexInputValue) && onSubmit(hexInputValue, e);\n  };\n\n  return (\n    <div className={clsx(withBaseName())}>\n      <span className={clsx(withBaseName(\"hashSign\"))}>#</span>\n      <Input\n        data-testid=\"hex-input\"\n        className={clsx(withBaseName(\"input\"))}\n        value={hexInputValue?.toString().replace(\"#\", \"\").toUpperCase() ?? \"\"}\n        onChange={handleHexInputChange}\n        onKeyDown={handleKeyDownHex}\n        onBlur={handleOnBlurHex}\n      />\n    </div>\n  );\n};\n"],"names":["hexInputCss","Input"],"mappings":";;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA;AAQrD,MAAM,WAAW,CAAC;AAAA,EACvB,QAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAA,KAAkC;AAChC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,gBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,QAAA;AAAA,IACxC;AAAA,GACF;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,gBAAA,CAAiB,QAAQ,CAAA;AAAA,EAC3B,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,MAAM,oBAAA,GAAuB,CAC3B,KAAA,EACA,KAAA,KACS;AACT,IAAA,IAAI,mBAAA,IAAuB,KAAA,CAAM,MAAA,GAAS,CAAA,EAAG;AAC3C,MAAA,gBAAA,CAAiB,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CAAA;AAAA,IAC9B;AACA,IAAA,IAAI,CAAC,mBAAA,EAAqB;AACxB,MAAA,gBAAA,CAAiB,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CAAA;AAAA,IAC9B;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,gBAAA,GAAmB,CAAC,CAAA,KAA6C;AACrE,IAAA,IAAI,CAAA,CAAE,QAAQ,OAAA,EAAS;AACrB,MAAA,UAAA,CAAW,aAAa,CAAA,IAAK,QAAA,CAAS,aAAa,CAAA;AAAA,IACrD;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,eAAA,GAAkB,CAAC,CAAA,KAA0C;AACjE,IAAA,UAAA,CAAW,aAAa,CAAA,IAAK,QAAA,CAAS,aAAA,EAAe,CAAC,CAAA;AAAA,EACxD,CAAA;AAEA,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,YAAA,EAAc,CAAA,EACjC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAK,SAAA,EAAW,IAAA,CAAK,aAAa,UAAU,CAAC,GAAG,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,oBAClD,GAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAY,WAAA;AAAA,QACZ,SAAA,EAAW,IAAA,CAAK,YAAA,CAAa,OAAO,CAAC,CAAA;AAAA,QACrC,QAAO,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,QAAA,EAAA,CAAW,OAAA,CAAQ,GAAA,EAAK,IAAI,WAAA,EAAA,KAAiB,EAAA;AAAA,QACnE,QAAA,EAAU,oBAAA;AAAA,QACV,SAAA,EAAW,gBAAA;AAAA,QACX,MAAA,EAAQ;AAAA;AAAA;AACV,GAAA,EACF,CAAA;AAEJ;;;;"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"RGBAInput.js","sources":["../src/color-chooser/RGBAInput.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport { RGBAValue } from \"./Color\";\nimport { RGBInput } from \"./RGBAInputField\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { useWindow } from \"@salt-ds/window\";\n\nimport rgbaInputCss from \"./RGBAInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\ninterface RGBAInputProps {\n  disableAlphaChooser: boolean;\n  rgbaText: string;\n  rgbaValue: RGBAValue;\n  onSubmitRgb: (\n    rgbaValue: RGBAValue,\n    e?: ChangeEvent<Element> | undefined\n  ) => void;\n  onSubmitAlpha: (alpha: number, e?: ChangeEvent<Element> | undefined) => void;\n}\n\nexport const RGBAInput = ({\n  disableAlphaChooser,\n  rgbaText,\n  rgbaValue,\n  onSubmitAlpha,\n  onSubmitRgb,\n}: RGBAInputProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-rgba-input\",\n    css: rgbaInputCss,\n    window: targetWindow,\n  });\n\n  return (\n    <>\n      <span className={clsx(withBaseName(\"textDivOverrides\"))}>{rgbaText}</span>\n      {[\"r\", \"g\", \"b\"].map((value) => (\n        <div className={withBaseName(\"rgbaInputDiv\")}>\n          <span className={withBaseName(\"rgbaText\")}>\n            {value.toUpperCase()}\n          </span>\n          <RGBInput\n            rgbaValue={rgbaValue}\n            value={value as \"r\" | \"g\" | \"b\"}\n            onSubmit={onSubmitRgb}\n          />\n        </div>\n      ))}\n      {!disableAlphaChooser ? (\n        <div className={clsx(withBaseName(\"rgbaInputDiv\"))}>\n          <span className={clsx(withBaseName(\"rgbaText\"))}>A</span>\n          <AlphaInput\n            alphaValue={parseFloat(rgbaValue.a.toFixed(2))}\n            onSubmit={onSubmitAlpha}\n          />\n        </div>\n      ) : (\n        <div className={clsx(withBaseName(\"alphaSpacerDiv\"))}></div>\n      )}\n    </>\n  );\n};\n"],"names":["rgbaInputCss"],"mappings":";;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAa7C,MAAM,YAAY,CAAC;AAAA,EACxB,mBAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,kBAAkB,CAAC,CAAA;AAAA,QAAI,QAAA,EAAA,QAAA;AAAA,OAAS,CAAA;AAAA,MAClE,CAAC,KAAK,GAAK,EAAA,GAAG,EAAE,GAAI,CAAA,CAAC,0BACnB,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,QACzC,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,YACrC,gBAAM,WAAY,EAAA;AAAA,WACrB,CAAA;AAAA,0BACC,GAAA,CAAA,QAAA,EAAA;AAAA,YACC,SAAA;AAAA,YACA,KAAA;AAAA,YACA,QAAU,EAAA,WAAA;AAAA,WACZ,CAAA;AAAA,SAAA;AAAA,OACF,CACD,CAAA;AAAA,MACA,CAAC,sCACC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,QAC/C,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,UAAU,CAAC,CAAA;AAAA,YAAG,QAAA,EAAA,GAAA;AAAA,WAAC,CAAA;AAAA,0BACjD,GAAA,CAAA,UAAA,EAAA;AAAA,YACC,YAAY,UAAW,CAAA,SAAA,CAAU,CAAE,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA;AAAA,YAC7C,QAAU,EAAA,aAAA;AAAA,WACZ,CAAA;AAAA,SAAA;AAAA,OACF,oBAEC,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,gBAAgB,CAAC,CAAA;AAAA,OAAG,CAAA;AAAA,KAAA;AAAA,GAE1D,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"RGBAInput.js","sources":["../src/color-chooser/RGBAInput.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { ChangeEvent } from \"react\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport type { RGBAValue } from \"./Color\";\nimport rgbaInputCss from \"./RGBAInput.css\";\nimport { RGBInput } from \"./RGBAInputField\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\ninterface RGBAInputProps {\n  disableAlphaChooser: boolean;\n  rgbaText: string;\n  rgbaValue: RGBAValue;\n  onSubmitRgb: (\n    rgbaValue: RGBAValue,\n    e?: ChangeEvent<Element> | undefined,\n  ) => void;\n  onSubmitAlpha: (alpha: number, e?: ChangeEvent<Element> | undefined) => void;\n}\n\nexport const RGBAInput = ({\n  disableAlphaChooser,\n  rgbaText,\n  rgbaValue,\n  onSubmitAlpha,\n  onSubmitRgb,\n}: RGBAInputProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-rgba-input\",\n    css: rgbaInputCss,\n    window: targetWindow,\n  });\n\n  return (\n    <>\n      <span className={clsx(withBaseName(\"textDivOverrides\"))}>{rgbaText}</span>\n      {[\"r\", \"g\", \"b\"].map((value) => (\n        <div className={withBaseName(\"rgbaInputDiv\")} key={value}>\n          <span className={withBaseName(\"rgbaText\")}>\n            {value.toUpperCase()}\n          </span>\n          <RGBInput\n            rgbaValue={rgbaValue}\n            value={value as \"r\" | \"g\" | \"b\"}\n            onSubmit={onSubmitRgb}\n          />\n        </div>\n      ))}\n      {!disableAlphaChooser ? (\n        <div className={clsx(withBaseName(\"rgbaInputDiv\"))}>\n          <span className={clsx(withBaseName(\"rgbaText\"))}>A</span>\n          <AlphaInput\n            alphaValue={Number.parseFloat(rgbaValue.a.toFixed(2))}\n            onSubmit={onSubmitAlpha}\n          />\n        </div>\n      ) : (\n        <div className={clsx(withBaseName(\"alphaSpacerDiv\"))} />\n      )}\n    </>\n  );\n};\n"],"names":["rgbaInputCss"],"mappings":";;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAa7C,MAAM,YAAY,CAAC;AAAA,EACxB,mBAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAA,KAAmC;AACjC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,iBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAK,SAAA,EAAW,IAAA,CAAK,aAAa,kBAAkB,CAAC,GAAI,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,IAClE,CAAC,GAAA,EAAK,GAAA,EAAK,GAAG,CAAA,CAAE,GAAA,CAAI,CAAC,KAAA,qBACpB,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,cAAc,CAAA,EACzC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAK,SAAA,EAAW,YAAA,CAAa,UAAU,CAAA,EACrC,QAAA,EAAA,KAAA,CAAM,aAAY,EACrB,CAAA;AAAA,sBACA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,SAAA;AAAA,UACA,KAAA;AAAA,UACA,QAAA,EAAU;AAAA;AAAA;AACZ,KAAA,EAAA,EARiD,KASnD,CACD,CAAA;AAAA,IACA,CAAC,sCACA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAW,IAAA,CAAK,YAAA,CAAa,cAAc,CAAC,CAAA,EAC/C,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAK,SAAA,EAAW,IAAA,CAAK,aAAa,UAAU,CAAC,GAAG,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,sBAClD,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,YAAY,MAAA,CAAO,UAAA,CAAW,UAAU,CAAA,CAAE,OAAA,CAAQ,CAAC,CAAC,CAAA;AAAA,UACpD,QAAA,EAAU;AAAA;AAAA;AACZ,KAAA,EACF,CAAA,uBAEC,KAAA,EAAA,EAAI,SAAA,EAAW,KAAK,YAAA,CAAa,gBAAgB,CAAC,CAAA,EAAG;AAAA,GAAA,EAE1D,CAAA;AAEJ;;;;"}

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

@@ -1,11 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
 import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { useState, useEffect } from 'react';
 import { InputLegacy } from '../input-legacy/InputLegacy.js';
 import '../input-legacy/StaticInputAdornment.js';
 import css_248z from './RGBAInput.css.js';
-import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
 
 const withBaseName = makePrefixer("saltColorChooser");
 const RGBInput = ({
@@ -27,7 +27,7 @@ const RGBInput = ({
   }, [rgbaValue, value]);
   const handleRGBInputChange = (e, value2) => {
     let rgb;
-    rgb = parseInt(value2);
+    rgb = Number.parseInt(value2, 10);
     if (value2.trim() === "" || Number.isNaN(rgb)) {
       rgb = "";
     }
@@ -55,16 +55,20 @@ const RGBInput = ({
     };
     onSubmit(validatedRgb, e);
   };
-  return /* @__PURE__ */ jsx(InputLegacy, {
-    inputProps: {
-      "data-testid": `${value}-input`
-    },
-    className: withBaseName("rgbaInput"),
-    value: rgbaInputValue.toString(),
-    onChange: handleRGBInputChange,
-    onBlur: handleOnBlurRGB,
-    onKeyDown: handleKeyDownRGB
-  });
+  return /* @__PURE__ */ jsx(
+    InputLegacy,
+    {
+      inputProps: {
+        // @ts-expect-error
+        "data-testid": `${value}-input`
+      },
+      className: withBaseName("rgbaInput"),
+      value: rgbaInputValue.toString(),
+      onChange: handleRGBInputChange,
+      onBlur: handleOnBlurRGB,
+      onKeyDown: handleKeyDownRGB
+    }
+  );
 };
 
 export { RGBInput };

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

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

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

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

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

@@ -1,8 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
 import { Color } from './Color.js';
 import { isTransparent } from './color-utils.js';
+import css_248z from './Swatch.css.js';
 
 const withBaseName = makePrefixer("saltColorChooserSwatch");
 const Swatch = ({
@@ -13,6 +16,12 @@ const Swatch = ({
   onDialogClosed,
   transparent = false
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-swatch",
+    css: css_248z,
+    window: targetWindow
+  });
   const handleClick = () => {
     const newColor = Color.makeColorFromHex(color);
     isTransparent(color) ? newColor == null ? void 0 : newColor.setAlpha(0) : newColor == null ? void 0 : newColor.setAlpha(alpha);
@@ -33,22 +42,25 @@ const Swatch = ({
     const backgroundColor = Color.makeColorFromHex(color);
     return backgroundColor == null ? void 0 : backgroundColor.setAlpha(alpha).hex;
   };
-  return /* @__PURE__ */ jsx("div", {
-    "data-testid": `swatch-${color}`,
-    style: {
-      background: getBackgroundColor()
-    },
-    className: clsx({
-      [withBaseName("active")]: active,
-      [withBaseName("transparent")]: transparent,
-      [withBaseName("graySwatch")]: isBlackOrgray(color),
-      [withBaseName("whiteSwatch")]: isWhite(color),
-      [withBaseName("swatch")]: !isWhite(color) && !isBlackOrgray(color)
-    }),
-    onClick: handleClick,
-    tabIndex: 0,
-    onKeyDown: handleKeyDown
-  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": `swatch-${color}`,
+      style: {
+        background: getBackgroundColor()
+      },
+      className: clsx({
+        [withBaseName("active")]: active,
+        [withBaseName("transparent")]: transparent,
+        [withBaseName("graySwatch")]: isBlackOrgray(color),
+        [withBaseName("whiteSwatch")]: isWhite(color),
+        [withBaseName("swatch")]: !isWhite(color) && !isBlackOrgray(color)
+      }),
+      onClick: handleClick,
+      tabIndex: 0,
+      onKeyDown: handleKeyDown
+    }
+  );
 };
 
 export { Swatch };

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

@@ -1 +1 @@
-{"version":3,"file":"Swatch.js","sources":["../src/color-chooser/Swatch.tsx"],"sourcesContent":["import { ChangeEvent, KeyboardEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { 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={clsx({\n        [withBaseName(\"active\")]: active,\n        [withBaseName(\"transparent\")]: transparent,\n        [withBaseName(\"graySwatch\")]: isBlackOrgray(color),\n        [withBaseName(\"whiteSwatch\")]: isWhite(color),\n        [withBaseName(\"swatch\")]: !isWhite(color) && !isBlackOrgray(color),\n      })}\n      onClick={handleClick}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n    />\n  );\n};\n"],"names":["color"],"mappings":";;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,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,GAAW,KAAM,CAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAC7C,IAAA,aAAA,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,GAAA,KAAA,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,CAACA,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,GAAkB,KAAM,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,uBACG,GAAA,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,WAAW,IAAK,CAAA;AAAA,MACd,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,MAC1B,CAAC,YAAa,CAAA,aAAa,CAAI,GAAA,WAAA;AAAA,MAC/B,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,cAAc,KAAK,CAAA;AAAA,MACjD,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,QAAQ,KAAK,CAAA;AAAA,MAC5C,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,CAAC,QAAQ,KAAK,CAAA,IAAK,CAAC,aAAA,CAAc,KAAK,CAAA;AAAA,KAClE,CAAA;AAAA,IACD,OAAS,EAAA,WAAA;AAAA,IACT,QAAU,EAAA,CAAA;AAAA,IACV,SAAW,EAAA,aAAA;AAAA,GACb,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Swatch.js","sources":["../src/color-chooser/Swatch.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { ChangeEvent, KeyboardEvent } from \"react\";\n\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nimport swatchCss from \"./Swatch.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserSwatch\");\n\ninterface SwatchProps {\n  active: boolean;\n  alpha: number;\n  color: string;\n  onClick: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: ChangeEvent,\n  ) => void;\n  onDialogClosed: () => void;\n  transparent?: boolean;\n}\n\nexport const Swatch = ({\n  color,\n  onClick,\n  active,\n  alpha,\n  onDialogClosed,\n  transparent = false,\n}: SwatchProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-swatch\",\n    css: swatchCss,\n    window: targetWindow,\n  });\n\n  const handleClick = () => {\n    const newColor = Color.makeColorFromHex(color);\n    isTransparent(color) ? newColor?.setAlpha(0) : newColor?.setAlpha(alpha);\n\n    onClick(newColor, true);\n    onDialogClosed();\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>): void => {\n    const newColor = Color.makeColorFromHex(color)?.setAlpha(alpha);\n    e.key === \"ENTER\" && onClick(newColor, true);\n    onDialogClosed();\n  };\n\n  // If it's black/gray/white\n  const isBlackOrgray = (color: string): boolean => {\n    return (\n      color.toLowerCase() === \"black\" ||\n      color.toUpperCase().startsWith(\"#2F3136\") ||\n      color.toUpperCase().startsWith(\"#2A2C2F\") ||\n      color.toUpperCase().startsWith(\"#242526\") ||\n      color.toUpperCase().startsWith(\"#161616\")\n    );\n  };\n  const isWhite = (color: string): boolean => color === \"white\";\n\n  const getBackgroundColor = () => {\n    const backgroundColor = Color.makeColorFromHex(color);\n    return backgroundColor?.setAlpha(alpha).hex;\n  };\n\n  return (\n    <div\n      data-testid={`swatch-${color}`}\n      style={{\n        background: getBackgroundColor(),\n      }}\n      className={clsx({\n        [withBaseName(\"active\")]: active,\n        [withBaseName(\"transparent\")]: transparent,\n        [withBaseName(\"graySwatch\")]: isBlackOrgray(color),\n        [withBaseName(\"whiteSwatch\")]: isWhite(color),\n        [withBaseName(\"swatch\")]: !isWhite(color) && !isBlackOrgray(color),\n      })}\n      onClick={handleClick}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n    />\n  );\n};\n"],"names":["swatchCss","color"],"mappings":"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"}

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

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