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

package/dist-es/packages/lab/src/checkbox/CheckboxBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxBase.js","sources":["../src/checkbox/CheckboxBase.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport {\n  ChangeEvent,\n  FocusEvent,\n  FocusEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\n\nimport \"./CheckboxBase.css\";\n\nconst withBaseName = makePrefixer(\"saltCheckboxBase\");\n\nexport interface CheckboxBaseProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  indeterminate?: boolean;\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n  name?: string;\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checked state is changed\n   */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  value?: string;\n}\n\nexport const CheckboxBase = forwardRef<HTMLDivElement, CheckboxBaseProps>(\n  function CheckboxBase(\n    {\n      checked: checkedProp,\n      className: classNameProp,\n      defaultChecked,\n      disabled,\n      indeterminate,\n      inputProps,\n      name,\n      onBlur,\n      onChange,\n      onFocus,\n      value,\n      ...rest\n    },\n    ref\n  ) {\n    // null is needed here so we can modify the ref on line 70\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const [checked, setChecked] = useControlled({\n      controlled: checkedProp,\n      default: Boolean(defaultChecked),\n      name: \"Checkbox\",\n      state: \"checked\",\n    });\n\n    const [focusVisible, setFocusVisible] = useState(false);\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      // Workaround for https://github.com/facebook/react/issues/9023\n      if (event.nativeEvent.defaultPrevented) {\n        return;\n      }\n\n      const value = event.target.checked;\n      setChecked(value);\n      onChange?.(event, value);\n    };\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLInputElement>) => {\n        // Fix for https://github.com/facebook/react/issues/7769\n        if (!inputRef.current) {\n          inputRef.current = event.currentTarget;\n        }\n\n        // TODO :focus-visible not yet supported on Safari, so we'll need to use the\n        // useIsFocusVisible polyfill\n        if (inputRef.current?.matches(\":focus-visible\")) {\n          setFocusVisible(true);\n        }\n\n        onFocus && onFocus(event);\n      },\n      [onFocus]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLInputElement>) => {\n        setFocusVisible(false);\n        onBlur && onBlur(event);\n      },\n      [onBlur]\n    );\n\n    const className = classnames(withBaseName(), classNameProp, {\n      saltFocusVisible: focusVisible,\n    });\n    return (\n      <span {...rest} className={className} ref={ref}>\n        <input\n          aria-checked={indeterminate ? \"mixed\" : checked}\n          name={name}\n          value={value}\n          {...inputProps}\n          checked={checkedProp}\n          className={withBaseName(\"input\")}\n          data-indeterminate={indeterminate}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={handleFocus}\n          ref={inputRef}\n          type=\"checkbox\"\n        />\n        <CheckboxIcon\n          checked={checked}\n          disabled={disabled}\n          indeterminate={indeterminate}\n        />\n      </span>\n    );\n  }\n);\n"],"names":["CheckboxBase","value","classnames"],"mappings":"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"}
+{"version":3,"file":"CheckboxBase.js","sources":["../src/checkbox/CheckboxBase.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEvent,\n  FocusEvent,\n  FocusEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\n\nimport \"./CheckboxBase.css\";\n\nconst withBaseName = makePrefixer(\"saltCheckboxBase\");\n\nexport interface CheckboxBaseProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  indeterminate?: boolean;\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n  name?: string;\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checked state is changed\n   */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  value?: string;\n}\n\nexport const CheckboxBase = forwardRef<HTMLDivElement, CheckboxBaseProps>(\n  function CheckboxBase(\n    {\n      checked: checkedProp,\n      className: classNameProp,\n      defaultChecked,\n      disabled,\n      indeterminate,\n      inputProps,\n      name,\n      onBlur,\n      onChange,\n      onFocus,\n      value,\n      ...rest\n    },\n    ref\n  ) {\n    // null is needed here so we can modify the ref on line 70\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const [checked, setChecked] = useControlled({\n      controlled: checkedProp,\n      default: Boolean(defaultChecked),\n      name: \"Checkbox\",\n      state: \"checked\",\n    });\n\n    const [focusVisible, setFocusVisible] = useState(false);\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      // Workaround for https://github.com/facebook/react/issues/9023\n      if (event.nativeEvent.defaultPrevented) {\n        return;\n      }\n\n      const value = event.target.checked;\n      setChecked(value);\n      onChange?.(event, value);\n    };\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLInputElement>) => {\n        // Fix for https://github.com/facebook/react/issues/7769\n        if (!inputRef.current) {\n          inputRef.current = event.currentTarget;\n        }\n\n        // TODO :focus-visible not yet supported on Safari, so we'll need to use the\n        // useIsFocusVisible polyfill\n        if (inputRef.current?.matches(\":focus-visible\")) {\n          setFocusVisible(true);\n        }\n\n        onFocus && onFocus(event);\n      },\n      [onFocus]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLInputElement>) => {\n        setFocusVisible(false);\n        onBlur && onBlur(event);\n      },\n      [onBlur]\n    );\n\n    const className = clsx(withBaseName(), classNameProp, {\n      saltFocusVisible: focusVisible,\n    });\n    return (\n      <span {...rest} className={className} ref={ref}>\n        <input\n          aria-checked={indeterminate ? \"mixed\" : checked}\n          name={name}\n          value={value}\n          {...inputProps}\n          checked={checkedProp}\n          className={withBaseName(\"input\")}\n          data-indeterminate={indeterminate}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={handleFocus}\n          ref={inputRef}\n          type=\"checkbox\"\n        />\n        <CheckboxIcon\n          checked={checked}\n          disabled={disabled}\n          indeterminate={indeterminate}\n        />\n      </span>\n    );\n  }\n);\n"],"names":["CheckboxBase","value"],"mappings":"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"}

package/dist-es/packages/lab/src/checkbox/CheckboxGroup.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { useControlled } from '@salt-ds/core';
 import { FormGroup } from '../form-group/FormGroup.js';
@@ -35,7 +35,7 @@ const CheckboxGroup = forwardRef(function CheckboxGroup2({
   return /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, {
     value: { name, onChange: handleChange, checkedValues },
     children: /* @__PURE__ */ jsx("fieldset", {
-      className: cx(classBase, {
+      className: clsx(classBase, {
         [`${classBase}-horizontal`]: row
       }),
       ref,

package/dist-es/packages/lab/src/checkbox/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sources":["../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport {\n  ChangeEvent,\n  ChangeEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n} from \"react\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { FormGroup, FormGroupProps } from \"../form-group\";\nimport { CheckboxGroupContext } from \"./internal/CheckboxGroupContext\";\n\nimport \"./CheckboxGroup.css\";\n\nexport interface CheckboxGroupProps extends FormGroupProps {\n  /**\n   * The current checked options.\n   */\n  checkedValues?: string[];\n  /**\n   * The default selected options for un-controlled component.\n   */\n  defaultCheckedValues?: string[];\n  /**\n   * Props spread onto the FormControl component that wraps the checkboxes.\n   */\n  FormControlProps?: Partial<HTMLAttributes<HTMLFieldSetElement>>;\n  /**\n   * Props spread onto the legend.\n   */\n  LegendProps?: unknown;\n  /**\n   * The label for the group legend\n   */\n  legend?: ReactNode;\n  /**\n   * The name used to reference the value of the control.\n   */\n  name?: string;\n  /**\n   * Callback fired when a checkbox is clicked.\n   * `event.target.value` returns the value of the checkbox that was clicked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n}\n\nconst classBase = \"saltCheckboxGroup\";\n\nexport const CheckboxGroup = forwardRef<\n  HTMLFieldSetElement,\n  CheckboxGroupProps\n>(function CheckboxGroup(\n  {\n    checkedValues: checkedValuesProp,\n    defaultCheckedValues = [],\n    children,\n    className,\n    FormControlProps,\n    row,\n    name,\n    onChange,\n    ...other\n  },\n  ref\n) {\n  const [checkedValues, setCheckedValues] = useControlled({\n    controlled: checkedValuesProp,\n    default: defaultCheckedValues,\n    name: \"CheckboxGroup\",\n    state: \"checkedValues\",\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setCheckedValues((oldValues: string[] = []) => {\n      const name = event.target.value;\n      const isSelected = oldValues.includes(name);\n\n      return isSelected\n        ? oldValues.filter((value) => value !== name)\n        : oldValues.concat(name);\n    });\n\n    onChange?.(event);\n  };\n\n  return (\n    <CheckboxGroupContext.Provider\n      value={{ name, onChange: handleChange, checkedValues }}\n    >\n      <fieldset\n        className={cx(classBase, {\n          [`${classBase}-horizontal`]: row,\n        })}\n        ref={ref}\n      >\n        <FormGroup className={`${classBase}-formGroup`} row={row} {...other}>\n          {children}\n        </FormGroup>\n      </fieldset>\n    </CheckboxGroupContext.Provider>\n  );\n});\n"],"names":["CheckboxGroup","name"],"mappings":";;;;;;;;AA8CA,MAAM,SAAY,GAAA,mBAAA,CAAA;AAEL,MAAA,aAAA,GAAgB,UAG3B,CAAA,SAASA,cACT,CAAA;AAAA,EACE,aAAe,EAAA,iBAAA;AAAA,EACf,uBAAuB,EAAC;AAAA,EACxB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,gBAAA;AAAA,EACA,GAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,KAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,aAAc,CAAA;AAAA,IACtD,UAAY,EAAA,iBAAA;AAAA,IACZ,OAAS,EAAA,oBAAA;AAAA,IACT,IAAM,EAAA,eAAA;AAAA,IACN,KAAO,EAAA,eAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAiB,gBAAA,CAAA,CAAC,SAAsB,GAAA,EAAO,KAAA;AAC7C,MAAMC,MAAAA,KAAAA,GAAO,MAAM,MAAO,CAAA,KAAA,CAAA;AAC1B,MAAM,MAAA,UAAA,GAAa,SAAU,CAAA,QAAA,CAASA,KAAI,CAAA,CAAA;AAE1C,MAAO,OAAA,UAAA,GACH,SAAU,CAAA,MAAA,CAAO,CAAC,KAAA,KAAU,UAAUA,KAAI,CAAA,GAC1C,SAAU,CAAA,MAAA,CAAOA,KAAI,CAAA,CAAA;AAAA,KAC1B,CAAA,CAAA;AAED,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EACE,uBAAA,GAAA,CAAC,qBAAqB,QAArB,EAAA;AAAA,IACC,KAAO,EAAA,EAAE,IAAM,EAAA,QAAA,EAAU,cAAc,aAAc,EAAA;AAAA,IAErD,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,GAAG,SAAyB,CAAA,WAAA,CAAA,GAAA,GAAA;AAAA,OAC9B,CAAA;AAAA,MACD,GAAA;AAAA,MAEA,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,QAAU,WAAW,CAAG,EAAA,SAAA,CAAA,UAAA,CAAA;AAAA,QAAuB,GAAA;AAAA,QAAW,GAAG,KAAA;AAAA,QAC3D,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CheckboxGroup.js","sources":["../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEvent,\n  ChangeEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n} from \"react\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { FormGroup, FormGroupProps } from \"../form-group\";\nimport { CheckboxGroupContext } from \"./internal/CheckboxGroupContext\";\n\nimport \"./CheckboxGroup.css\";\n\nexport interface CheckboxGroupProps extends FormGroupProps {\n  /**\n   * The current checked options.\n   */\n  checkedValues?: string[];\n  /**\n   * The default selected options for un-controlled component.\n   */\n  defaultCheckedValues?: string[];\n  /**\n   * Props spread onto the FormControl component that wraps the checkboxes.\n   */\n  FormControlProps?: Partial<HTMLAttributes<HTMLFieldSetElement>>;\n  /**\n   * Props spread onto the legend.\n   */\n  LegendProps?: unknown;\n  /**\n   * The label for the group legend\n   */\n  legend?: ReactNode;\n  /**\n   * The name used to reference the value of the control.\n   */\n  name?: string;\n  /**\n   * Callback fired when a checkbox is clicked.\n   * `event.target.value` returns the value of the checkbox that was clicked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n}\n\nconst classBase = \"saltCheckboxGroup\";\n\nexport const CheckboxGroup = forwardRef<\n  HTMLFieldSetElement,\n  CheckboxGroupProps\n>(function CheckboxGroup(\n  {\n    checkedValues: checkedValuesProp,\n    defaultCheckedValues = [],\n    children,\n    className,\n    FormControlProps,\n    row,\n    name,\n    onChange,\n    ...other\n  },\n  ref\n) {\n  const [checkedValues, setCheckedValues] = useControlled({\n    controlled: checkedValuesProp,\n    default: defaultCheckedValues,\n    name: \"CheckboxGroup\",\n    state: \"checkedValues\",\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setCheckedValues((oldValues: string[] = []) => {\n      const name = event.target.value;\n      const isSelected = oldValues.includes(name);\n\n      return isSelected\n        ? oldValues.filter((value) => value !== name)\n        : oldValues.concat(name);\n    });\n\n    onChange?.(event);\n  };\n\n  return (\n    <CheckboxGroupContext.Provider\n      value={{ name, onChange: handleChange, checkedValues }}\n    >\n      <fieldset\n        className={clsx(classBase, {\n          [`${classBase}-horizontal`]: row,\n        })}\n        ref={ref}\n      >\n        <FormGroup className={`${classBase}-formGroup`} row={row} {...other}>\n          {children}\n        </FormGroup>\n      </fieldset>\n    </CheckboxGroupContext.Provider>\n  );\n});\n"],"names":["CheckboxGroup","name"],"mappings":";;;;;;;;AA8CA,MAAM,SAAY,GAAA,mBAAA,CAAA;AAEL,MAAA,aAAA,GAAgB,UAG3B,CAAA,SAASA,cACT,CAAA;AAAA,EACE,aAAe,EAAA,iBAAA;AAAA,EACf,uBAAuB,EAAC;AAAA,EACxB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,gBAAA;AAAA,EACA,GAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,KAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,aAAc,CAAA;AAAA,IACtD,UAAY,EAAA,iBAAA;AAAA,IACZ,OAAS,EAAA,oBAAA;AAAA,IACT,IAAM,EAAA,eAAA;AAAA,IACN,KAAO,EAAA,eAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAiB,gBAAA,CAAA,CAAC,SAAsB,GAAA,EAAO,KAAA;AAC7C,MAAMC,MAAAA,KAAAA,GAAO,MAAM,MAAO,CAAA,KAAA,CAAA;AAC1B,MAAM,MAAA,UAAA,GAAa,SAAU,CAAA,QAAA,CAASA,KAAI,CAAA,CAAA;AAE1C,MAAO,OAAA,UAAA,GACH,SAAU,CAAA,MAAA,CAAO,CAAC,KAAA,KAAU,UAAUA,KAAI,CAAA,GAC1C,SAAU,CAAA,MAAA,CAAOA,KAAI,CAAA,CAAA;AAAA,KAC1B,CAAA,CAAA;AAED,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EACE,uBAAA,GAAA,CAAC,qBAAqB,QAArB,EAAA;AAAA,IACC,KAAO,EAAA,EAAE,IAAM,EAAA,QAAA,EAAU,cAAc,aAAc,EAAA;AAAA,IAErD,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA;AAAA,MACC,SAAA,EAAW,KAAK,SAAW,EAAA;AAAA,QACzB,CAAC,GAAG,SAAyB,CAAA,WAAA,CAAA,GAAA,GAAA;AAAA,OAC9B,CAAA;AAAA,MACD,GAAA;AAAA,MAEA,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,QAAU,WAAW,CAAG,EAAA,SAAA,CAAA,UAAA,CAAA;AAAA,QAAuB,GAAA;AAAA,QAAW,GAAG,KAAA;AAAA,QAC3D,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/checkbox/CheckboxIcon.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import { CheckboxUncheckedIcon } from './assets/CheckboxUncheckedIcon.js';
 import { CheckboxCheckedIcon } from './assets/CheckboxCheckedIcon.js';
@@ -13,13 +13,13 @@ const CheckboxIcon = ({
   disabled,
   indeterminate
 }) => {
-  const className = cx(withBaseName(), classNameProp, {
+  const className = clsx(withBaseName(), classNameProp, {
     [withBaseName("disabled")]: disabled
   });
   return indeterminate ? /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {
-    className: cx(className, withBaseName("indeterminate"))
+    className: clsx(className, withBaseName("indeterminate"))
   }) : checked ? /* @__PURE__ */ jsx(CheckboxCheckedIcon, {
-    className: cx(className, withBaseName("checked"))
+    className: clsx(className, withBaseName("checked"))
   }) : /* @__PURE__ */ jsx(CheckboxUncheckedIcon, {
     className
   });

package/dist-es/packages/lab/src/checkbox/CheckboxIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxIcon.js","sources":["../src/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport {\n  CheckboxUncheckedIcon,\n  CheckboxCheckedIcon,\n  CheckboxIndeterminateIcon,\n} from \"./assets\";\n\nimport \"./CheckboxIcon.css\";\n\nexport interface CheckboxIconProps {\n  checked?: boolean;\n  className?: string;\n  disabled?: boolean;\n  indeterminate?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxIcon\");\n\nexport const CheckboxIcon = ({\n  checked = false,\n  className: classNameProp,\n  disabled,\n  indeterminate,\n}: CheckboxIconProps): JSX.Element => {\n  const className = cx(withBaseName(), classNameProp, {\n    [withBaseName(\"disabled\")]: disabled,\n  });\n  return indeterminate ? (\n    <CheckboxIndeterminateIcon\n      className={cx(className, withBaseName(\"indeterminate\"))}\n    />\n  ) : checked ? (\n    <CheckboxCheckedIcon className={cx(className, withBaseName(\"checked\"))} />\n  ) : (\n    <CheckboxUncheckedIcon className={className} />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAU,GAAA,KAAA;AAAA,EACV,SAAW,EAAA,aAAA;AAAA,EACX,QAAA;AAAA,EACA,aAAA;AACF,CAAsC,KAAA;AACpC,EAAA,MAAM,SAAY,GAAA,EAAA,CAAG,YAAa,EAAA,EAAG,aAAe,EAAA;AAAA,IAClD,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,GAC7B,CAAA,CAAA;AACD,EAAA,OAAO,gCACJ,GAAA,CAAA,yBAAA,EAAA;AAAA,IACC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,YAAA,CAAa,eAAe,CAAC,CAAA;AAAA,GACxD,CAAA,GACE,0BACD,GAAA,CAAA,mBAAA,EAAA;AAAA,IAAoB,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,YAAA,CAAa,SAAS,CAAC,CAAA;AAAA,GAAG,oBAEvE,GAAA,CAAA,qBAAA,EAAA;AAAA,IAAsB,SAAA;AAAA,GAAsB,CAAA,CAAA;AAEjD;;;;"}
+{"version":3,"file":"CheckboxIcon.js","sources":["../src/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport {\n  CheckboxUncheckedIcon,\n  CheckboxCheckedIcon,\n  CheckboxIndeterminateIcon,\n} from \"./assets\";\n\nimport \"./CheckboxIcon.css\";\n\nexport interface CheckboxIconProps {\n  checked?: boolean;\n  className?: string;\n  disabled?: boolean;\n  indeterminate?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxIcon\");\n\nexport const CheckboxIcon = ({\n  checked = false,\n  className: classNameProp,\n  disabled,\n  indeterminate,\n}: CheckboxIconProps): JSX.Element => {\n  const className = clsx(withBaseName(), classNameProp, {\n    [withBaseName(\"disabled\")]: disabled,\n  });\n  return indeterminate ? (\n    <CheckboxIndeterminateIcon\n      className={clsx(className, withBaseName(\"indeterminate\"))}\n    />\n  ) : checked ? (\n    <CheckboxCheckedIcon className={clsx(className, withBaseName(\"checked\"))} />\n  ) : (\n    <CheckboxUncheckedIcon className={className} />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAU,GAAA,KAAA;AAAA,EACV,SAAW,EAAA,aAAA;AAAA,EACX,QAAA;AAAA,EACA,aAAA;AACF,CAAsC,KAAA;AACpC,EAAA,MAAM,SAAY,GAAA,IAAA,CAAK,YAAa,EAAA,EAAG,aAAe,EAAA;AAAA,IACpD,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,GAC7B,CAAA,CAAA;AACD,EAAA,OAAO,gCACJ,GAAA,CAAA,yBAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA,CAAK,SAAW,EAAA,YAAA,CAAa,eAAe,CAAC,CAAA;AAAA,GAC1D,CAAA,GACE,0BACD,GAAA,CAAA,mBAAA,EAAA;AAAA,IAAoB,SAAW,EAAA,IAAA,CAAK,SAAW,EAAA,YAAA,CAAa,SAAS,CAAC,CAAA;AAAA,GAAG,oBAEzE,GAAA,CAAA,qBAAA,EAAA;AAAA,IAAsB,SAAA;AAAA,GAAsB,CAAA,CAAA;AAEjD;;;;"}

package/dist-es/packages/lab/src/color-chooser/AlphaInputField.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { useState, useEffect } from 'react';
 import { makePrefixer } from '@salt-ds/core';
 import { Input } from '../input/Input.js';
@@ -50,7 +50,7 @@ const AlphaInput = ({
     inputProps: {
       "data-testid": "a-input"
     },
-    className: cx({
+    className: clsx({
       [withBaseName("rgbaInput")]: !showAsOpacity,
       [withBaseName("opacityInput")]: showAsOpacity
     }),

package/dist-es/packages/lab/src/color-chooser/AlphaInputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlphaInputField.js","sources":["../src/color-chooser/AlphaInputField.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { useState, useEffect } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Input } from \"../input\";\n\nimport \"./RGBAInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\ninterface AlphaInputProps {\n  alphaValue: number;\n  showAsOpacity?: boolean;\n  onSubmit: (alpha: number, e?: React.ChangeEvent) => void;\n}\n\nexport const AlphaInput = ({\n  alphaValue,\n  onSubmit,\n  showAsOpacity = false,\n}: AlphaInputProps): JSX.Element => {\n  const [alphaInputValue, setAlphaInputValue] = useState<string>(\n    !isNaN(alphaValue) ? alphaValue.toString() : \"\"\n  );\n\n  useEffect(() => {\n    setAlphaInputValue(!isNaN(alphaValue) ? alphaValue.toString() : \"\");\n  }, [alphaValue]);\n\n  const handleAlphaInputChange = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string\n  ): void => {\n    value = value.replace(\"%\", \"\");\n    let alpha: string = value;\n\n    if (value.trim() === \"\" || Number.isNaN(value)) {\n      alpha = \"\";\n    }\n\n    if (showAsOpacity && Number.parseFloat(value)) {\n      alpha = (parseFloat(value) / 100).toString();\n    }\n\n    if (value.charAt(1) === \".\" || value.charAt(0) === \".\") {\n      alpha = value;\n    }\n\n    setAlphaInputValue(alpha);\n  };\n\n  const handleKeyDownAlpha = (\n    e: React.KeyboardEvent<HTMLInputElement>\n  ): void => {\n    if (e.key === \"Enter\") {\n      const alpha =\n        alphaInputValue.trim().replace(\"%\", \"\") !== \"\"\n          ? parseFloat(alphaInputValue)\n          : 0;\n      const validatedAlpha = Math.max(0, Math.min(alpha, 1));\n      setAlphaInputValue(validatedAlpha.toString());\n      onSubmit(validatedAlpha);\n    }\n  };\n\n  const handleOnBlurAlpha = (e: React.FocusEvent<HTMLInputElement>): void => {\n    // Guard against parseFloat('') becoming NaN\n    const alpha =\n      alphaInputValue.trim() !== \"\" ? parseFloat(alphaInputValue) : 0;\n\n    const validatedAlpha = Math.max(0, Math.min(alpha, 1));\n    setAlphaInputValue(validatedAlpha.toString());\n    onSubmit(validatedAlpha, e);\n  };\n\n  return (\n    <Input\n      inputProps={{\n        // @ts-ignore\n        \"data-testid\": \"a-input\",\n      }}\n      className={cn({\n        [withBaseName(\"rgbaInput\")]: !showAsOpacity,\n        [withBaseName(\"opacityInput\")]: showAsOpacity,\n      })}\n      value={\n        showAsOpacity\n          ? alphaInputValue\n            ? (parseFloat(alphaInputValue) * 100).toString() + \"%\"\n            : \"%\"\n          : alphaInputValue\n      }\n      onChange={handleAlphaInputChange}\n      onBlur={handleOnBlurAlpha}\n      onKeyDown={handleKeyDownAlpha}\n    />\n  );\n};\n"],"names":["cn"],"mappings":"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"}
+{"version":3,"file":"AlphaInputField.js","sources":["../src/color-chooser/AlphaInputField.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useState, useEffect } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Input } from \"../input\";\n\nimport \"./RGBAInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\ninterface AlphaInputProps {\n  alphaValue: number;\n  showAsOpacity?: boolean;\n  onSubmit: (alpha: number, e?: React.ChangeEvent) => void;\n}\n\nexport const AlphaInput = ({\n  alphaValue,\n  onSubmit,\n  showAsOpacity = false,\n}: AlphaInputProps): JSX.Element => {\n  const [alphaInputValue, setAlphaInputValue] = useState<string>(\n    !isNaN(alphaValue) ? alphaValue.toString() : \"\"\n  );\n\n  useEffect(() => {\n    setAlphaInputValue(!isNaN(alphaValue) ? alphaValue.toString() : \"\");\n  }, [alphaValue]);\n\n  const handleAlphaInputChange = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string\n  ): void => {\n    value = value.replace(\"%\", \"\");\n    let alpha: string = value;\n\n    if (value.trim() === \"\" || Number.isNaN(value)) {\n      alpha = \"\";\n    }\n\n    if (showAsOpacity && Number.parseFloat(value)) {\n      alpha = (parseFloat(value) / 100).toString();\n    }\n\n    if (value.charAt(1) === \".\" || value.charAt(0) === \".\") {\n      alpha = value;\n    }\n\n    setAlphaInputValue(alpha);\n  };\n\n  const handleKeyDownAlpha = (\n    e: React.KeyboardEvent<HTMLInputElement>\n  ): void => {\n    if (e.key === \"Enter\") {\n      const alpha =\n        alphaInputValue.trim().replace(\"%\", \"\") !== \"\"\n          ? parseFloat(alphaInputValue)\n          : 0;\n      const validatedAlpha = Math.max(0, Math.min(alpha, 1));\n      setAlphaInputValue(validatedAlpha.toString());\n      onSubmit(validatedAlpha);\n    }\n  };\n\n  const handleOnBlurAlpha = (e: React.FocusEvent<HTMLInputElement>): void => {\n    // Guard against parseFloat('') becoming NaN\n    const alpha =\n      alphaInputValue.trim() !== \"\" ? parseFloat(alphaInputValue) : 0;\n\n    const validatedAlpha = Math.max(0, Math.min(alpha, 1));\n    setAlphaInputValue(validatedAlpha.toString());\n    onSubmit(validatedAlpha, e);\n  };\n\n  return (\n    <Input\n      inputProps={{\n        // @ts-ignore\n        \"data-testid\": \"a-input\",\n      }}\n      className={clsx({\n        [withBaseName(\"rgbaInput\")]: !showAsOpacity,\n        [withBaseName(\"opacityInput\")]: showAsOpacity,\n      })}\n      value={\n        showAsOpacity\n          ? alphaInputValue\n            ? (parseFloat(alphaInputValue) * 100).toString() + \"%\"\n            : \"%\"\n          : alphaInputValue\n      }\n      onChange={handleAlphaInputChange}\n      onBlur={handleOnBlurAlpha}\n      onKeyDown={handleKeyDownAlpha}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist-es/packages/lab/src/color-chooser/ColorChooser.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { Overlay } from '../overlay/Overlay.js';
 import { useOverlay } from '../overlay/useOverlay.js';
 import { makePrefixer, Button } from '@salt-ds/core';
@@ -91,7 +91,7 @@ const ColorChooser = ({
     children: [
       /* @__PURE__ */ jsxs(Button, {
         ...getTriggerProps({
-          className: cx(withBaseName("overlayButton"), {
+          className: clsx(withBaseName("overlayButton"), {
             [withBaseName("overlayButtonHiddenLabel")]: hideLabel
           }),
           "data-testid": "color-chooser-overlay-button",
@@ -100,7 +100,7 @@ const ColorChooser = ({
         }),
         children: [
           color && /* @__PURE__ */ jsx("div", {
-            className: cx(withBaseName("overlayButtonSwatch"), {
+            className: clsx(withBaseName("overlayButtonSwatch"), {
               [withBaseName("overlayButtonSwatchWithBorder")]: color == null ? void 0 : color.hex.startsWith("#ffffff"),
               [withBaseName("overlayButtonSwatchTransparent")]: isTransparent(
                 color == null ? void 0 : color.hex
@@ -122,20 +122,20 @@ const ColorChooser = ({
             showClose: false
           },
           "data-testid": "color-chooser-overlay",
-          className: cx(withBaseName("overlayButtonClose"))
+          className: clsx(withBaseName("overlayButtonClose"))
         }),
         children: /* @__PURE__ */ jsxs("div", {
-          className: cx(withBaseName("overlayContent")),
+          className: clsx(withBaseName("overlayContent")),
           "data-testid": "overlay-content",
           children: [
             /* @__PURE__ */ jsxs(Button, {
               "data-testid": "default-button",
               variant: "secondary",
-              className: cx(withBaseName("defaultButton")),
+              className: clsx(withBaseName("defaultButton")),
               onClick: onDefaultSelected,
               children: [
                 /* @__PURE__ */ jsx(RefreshIcon, {
-                  className: cx(withBaseName("refreshIcon"))
+                  className: clsx(withBaseName("refreshIcon"))
                 }),
                 "Default"
               ]

package/dist-es/packages/lab/src/color-chooser/ColorChooser.js.map

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

package/dist-es/packages/lab/src/color-chooser/ColorPicker.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { SketchPicker } from 'react-color';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer, Button } from '@salt-ds/core';
 import { Color } from './Color.js';
 import { hexValueWithoutAlpha } from './ColorHelpers.js';
@@ -52,10 +52,10 @@ const ColorPicker = ({
   };
   return /* @__PURE__ */ jsxs("div", {
     "data-testid": "color-picker",
-    className: cx(withBaseName()),
+    className: clsx(withBaseName()),
     children: [
       /* @__PURE__ */ jsx(SketchPicker, {
-        className: cx(withBaseName("swatchPickerStyles"), {
+        className: clsx(withBaseName("swatchPickerStyles"), {
           ["rootDisabledAlpha"]: disableAlphaChooser,
           ["root"]: !disableAlphaChooser
         }),
@@ -65,13 +65,13 @@ const ColorPicker = ({
         disableAlpha: disableAlphaChooser
       }),
       /* @__PURE__ */ jsxs("div", {
-        className: cx(withBaseName("inputContainer")),
+        className: clsx(withBaseName("inputContainer")),
         children: [
           /* @__PURE__ */ jsxs("div", {
-            className: cx(withBaseName("inputDivs")),
+            className: clsx(withBaseName("inputDivs")),
             children: [
               /* @__PURE__ */ jsx("span", {
-                className: cx(withBaseName("textDivOverrides")),
+                className: clsx(withBaseName("textDivOverrides")),
                 children: "HEX"
               }),
               /* @__PURE__ */ jsx(HexInput, {
@@ -89,7 +89,7 @@ const ColorPicker = ({
             ]
           }),
           /* @__PURE__ */ jsx("div", {
-            className: cx(withBaseName("applyButtonDiv")),
+            className: clsx(withBaseName("applyButtonDiv")),
             children: /* @__PURE__ */ jsx(Button, {
               "data-testid": "apply-button",
               variant: "cta",

package/dist-es/packages/lab/src/color-chooser/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sources":["../src/color-chooser/ColorPicker.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { SketchPicker, ColorResult } from \"react-color\";\nimport cn from \"classnames\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { Color, RGBAValue } from \"./Color\";\nimport { hexValueWithoutAlpha } from \"./ColorHelpers\";\nimport { HexInput } from \"./HexInput\";\nimport { RGBAInput } from \"./RGBAInput\";\n\nimport \"./ColorPicker.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserPicker\");\n\nexport interface ColorPickerProps {\n  disableAlphaChooser: boolean;\n  color?: Color;\n  alpha?: number;\n  onChange: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: ChangeEvent\n  ) => void;\n  onDialogClosed: () => void;\n}\n\nexport const ColorPicker = ({\n  alpha = 1,\n  disableAlphaChooser,\n  color,\n  onChange,\n  onDialogClosed,\n}: ColorPickerProps): JSX.Element => {\n  const rgbaValue: RGBAValue =\n    color?.rgba ?? Color.makeColorFromRGB(0, 0, 0, alpha).rgba;\n  const rgbaText = disableAlphaChooser ? \"RGB\" : \"RGBA\";\n\n  const onSubmitHex = (hexValue?: string, e?: ChangeEvent): void => {\n    const newColor = Color.makeColorFromHex(hexValue);\n    onChange(newColor, false, e);\n  };\n\n  const onSubmitRgb = (rgba: RGBAValue, e?: ChangeEvent): void => {\n    const newColor = Color.makeColorFromRGB(rgba.r, rgba.g, rgba.b, rgba.a);\n    onChange(newColor, false, e);\n  };\n\n  const onSubmitAlpha = (alpha: number, e?: ChangeEvent): void => {\n    const newColor = Color.makeColorFromRGB(\n      rgbaValue.r,\n      rgbaValue.g,\n      rgbaValue.b,\n      Math.max(0, Math.min(alpha, 1))\n    );\n    onChange(newColor, false, e);\n  };\n\n  const onSketchPickerChange = (\n    colorResult: ColorResult,\n    e: ChangeEvent\n  ): void => {\n    const newColor = Color.makeColorFromRGB(\n      colorResult.rgb.r,\n      colorResult.rgb.g,\n      colorResult.rgb.b,\n      colorResult.rgb.a ?? alpha\n    );\n    onChange(newColor, false, e);\n  };\n\n  const onApply = (): void => {\n    onChange(color, true);\n    onDialogClosed();\n  };\n\n  return (\n    <div data-testid=\"color-picker\" className={cn(withBaseName())}>\n      {/** @ts-ignore react-color has incorrect types **/}\n      <SketchPicker\n        className={cn(withBaseName(\"swatchPickerStyles\"), {\n          [\"rootDisabledAlpha\"]: disableAlphaChooser,\n          [\"root\"]: !disableAlphaChooser,\n        })}\n        color={rgbaValue}\n        onChange={onSketchPickerChange}\n        presetColors={[]}\n        disableAlpha={disableAlphaChooser}\n      />\n      <div className={cn(withBaseName(\"inputContainer\"))}>\n        <div className={cn(withBaseName(\"inputDivs\"))}>\n          <span className={cn(withBaseName(\"textDivOverrides\"))}>HEX</span>\n          <HexInput\n            hexValue={\n              disableAlphaChooser\n                ? hexValueWithoutAlpha(color?.hex)\n                : color?.hex\n            }\n            disableAlphaChooser={disableAlphaChooser}\n            onSubmit={onSubmitHex}\n          />\n          <RGBAInput\n            disableAlphaChooser={disableAlphaChooser}\n            rgbaText={rgbaText}\n            rgbaValue={rgbaValue}\n            onSubmitAlpha={onSubmitAlpha}\n            onSubmitRgb={onSubmitRgb}\n          />\n        </div>\n        <div className={cn(withBaseName(\"applyButtonDiv\"))}>\n          <Button data-testid=\"apply-button\" variant=\"cta\" onClick={onApply}>\n            Apply\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["alpha","_a","cn"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,wBAAwB,CAAA,CAAA;AAcnD,MAAM,cAAc,CAAC;AAAA,EAC1B,KAAQ,GAAA,CAAA;AAAA,EACR,mBAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAA;AACF,CAAqC,KAAA;AA/BrC,EAAA,IAAA,EAAA,CAAA;AAgCE,EAAM,MAAA,SAAA,GAAA,CACJ,EAAO,GAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,IAAA,KAAP,IAAe,GAAA,EAAA,GAAA,KAAA,CAAM,iBAAiB,CAAG,EAAA,CAAA,EAAG,CAAG,EAAA,KAAK,CAAE,CAAA,IAAA,CAAA;AACxD,EAAM,MAAA,QAAA,GAAW,sBAAsB,KAAQ,GAAA,MAAA,CAAA;AAE/C,EAAM,MAAA,WAAA,GAAc,CAAC,QAAA,EAAmB,CAA0B,KAAA;AAChE,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,gBAAA,CAAiB,QAAQ,CAAA,CAAA;AAChD,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,IAAA,EAAiB,CAA0B,KAAA;AAC9D,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,gBAAA,CAAiB,IAAK,CAAA,CAAA,EAAG,KAAK,CAAG,EAAA,IAAA,CAAK,CAAG,EAAA,IAAA,CAAK,CAAC,CAAA,CAAA;AACtE,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAACA,MAAAA,EAAe,CAA0B,KAAA;AAC9D,IAAA,MAAM,WAAW,KAAM,CAAA,gBAAA;AAAA,MACrB,SAAU,CAAA,CAAA;AAAA,MACV,SAAU,CAAA,CAAA;AAAA,MACV,SAAU,CAAA,CAAA;AAAA,MACV,KAAK,GAAI,CAAA,CAAA,EAAG,KAAK,GAAIA,CAAAA,MAAAA,EAAO,CAAC,CAAC,CAAA;AAAA,KAChC,CAAA;AACA,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,oBAAA,GAAuB,CAC3B,WAAA,EACA,CACS,KAAA;AA3Db,IAAAC,IAAAA,GAAAA,CAAAA;AA4DI,IAAA,MAAM,WAAW,KAAM,CAAA,gBAAA;AAAA,MACrB,YAAY,GAAI,CAAA,CAAA;AAAA,MAChB,YAAY,GAAI,CAAA,CAAA;AAAA,MAChB,YAAY,GAAI,CAAA,CAAA;AAAA,MAAA,CAChBA,GAAA,GAAA,WAAA,CAAY,GAAI,CAAA,CAAA,KAAhB,OAAAA,GAAqB,GAAA,KAAA;AAAA,KACvB,CAAA;AACA,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAA,MAAM,UAAU,MAAY;AAC1B,IAAA,QAAA,CAAS,OAAO,IAAI,CAAA,CAAA;AACpB,IAAe,cAAA,EAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IAAI,aAAY,EAAA,cAAA;AAAA,IAAe,SAAA,EAAWC,EAAG,CAAA,YAAA,EAAc,CAAA;AAAA,IAE1D,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,YAAA,EAAA;AAAA,QACC,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,oBAAoB,CAAG,EAAA;AAAA,UAChD,CAAC,mBAAsB,GAAA,mBAAA;AAAA,UACvB,CAAC,SAAS,CAAC,mBAAA;AAAA,SACZ,CAAA;AAAA,QACD,KAAO,EAAA,SAAA;AAAA,QACP,QAAU,EAAA,oBAAA;AAAA,QACV,cAAc,EAAC;AAAA,QACf,YAAc,EAAA,mBAAA;AAAA,OAChB,CAAA;AAAA,sBACC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,gBAAgB,CAAC,CAAA;AAAA,QAC/C,QAAA,EAAA;AAAA,0BAAC,IAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,WAAW,CAAC,CAAA;AAAA,YAC1C,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,kBAAkB,CAAC,CAAA;AAAA,gBAAG,QAAA,EAAA,KAAA;AAAA,eAAG,CAAA;AAAA,8BACzD,GAAA,CAAA,QAAA,EAAA;AAAA,gBACC,UACE,mBACI,GAAA,oBAAA,CAAqB,KAAO,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAG,IAC/B,KAAO,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA;AAAA,gBAEb,mBAAA;AAAA,gBACA,QAAU,EAAA,WAAA;AAAA,eACZ,CAAA;AAAA,8BACC,GAAA,CAAA,SAAA,EAAA;AAAA,gBACC,mBAAA;AAAA,gBACA,QAAA;AAAA,gBACA,SAAA;AAAA,gBACA,aAAA;AAAA,gBACA,WAAA;AAAA,eACF,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,0BACC,GAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,gBAAgB,CAAC,CAAA;AAAA,YAC/C,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,cAAO,aAAY,EAAA,cAAA;AAAA,cAAe,OAAQ,EAAA,KAAA;AAAA,cAAM,OAAS,EAAA,OAAA;AAAA,cAAS,QAAA,EAAA,OAAA;AAAA,aAEnE,CAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ColorPicker.js","sources":["../src/color-chooser/ColorPicker.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { SketchPicker, ColorResult } from \"react-color\";\nimport { clsx } from \"clsx\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { Color, RGBAValue } from \"./Color\";\nimport { hexValueWithoutAlpha } from \"./ColorHelpers\";\nimport { HexInput } from \"./HexInput\";\nimport { RGBAInput } from \"./RGBAInput\";\n\nimport \"./ColorPicker.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserPicker\");\n\nexport interface ColorPickerProps {\n  disableAlphaChooser: boolean;\n  color?: Color;\n  alpha?: number;\n  onChange: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: ChangeEvent\n  ) => void;\n  onDialogClosed: () => void;\n}\n\nexport const ColorPicker = ({\n  alpha = 1,\n  disableAlphaChooser,\n  color,\n  onChange,\n  onDialogClosed,\n}: ColorPickerProps): JSX.Element => {\n  const rgbaValue: RGBAValue =\n    color?.rgba ?? Color.makeColorFromRGB(0, 0, 0, alpha).rgba;\n  const rgbaText = disableAlphaChooser ? \"RGB\" : \"RGBA\";\n\n  const onSubmitHex = (hexValue?: string, e?: ChangeEvent): void => {\n    const newColor = Color.makeColorFromHex(hexValue);\n    onChange(newColor, false, e);\n  };\n\n  const onSubmitRgb = (rgba: RGBAValue, e?: ChangeEvent): void => {\n    const newColor = Color.makeColorFromRGB(rgba.r, rgba.g, rgba.b, rgba.a);\n    onChange(newColor, false, e);\n  };\n\n  const onSubmitAlpha = (alpha: number, e?: ChangeEvent): void => {\n    const newColor = Color.makeColorFromRGB(\n      rgbaValue.r,\n      rgbaValue.g,\n      rgbaValue.b,\n      Math.max(0, Math.min(alpha, 1))\n    );\n    onChange(newColor, false, e);\n  };\n\n  const onSketchPickerChange = (\n    colorResult: ColorResult,\n    e: ChangeEvent\n  ): void => {\n    const newColor = Color.makeColorFromRGB(\n      colorResult.rgb.r,\n      colorResult.rgb.g,\n      colorResult.rgb.b,\n      colorResult.rgb.a ?? alpha\n    );\n    onChange(newColor, false, e);\n  };\n\n  const onApply = (): void => {\n    onChange(color, true);\n    onDialogClosed();\n  };\n\n  return (\n    <div data-testid=\"color-picker\" className={clsx(withBaseName())}>\n      {/** @ts-ignore react-color has incorrect types **/}\n      <SketchPicker\n        className={clsx(withBaseName(\"swatchPickerStyles\"), {\n          [\"rootDisabledAlpha\"]: disableAlphaChooser,\n          [\"root\"]: !disableAlphaChooser,\n        })}\n        color={rgbaValue}\n        onChange={onSketchPickerChange}\n        presetColors={[]}\n        disableAlpha={disableAlphaChooser}\n      />\n      <div className={clsx(withBaseName(\"inputContainer\"))}>\n        <div className={clsx(withBaseName(\"inputDivs\"))}>\n          <span className={clsx(withBaseName(\"textDivOverrides\"))}>HEX</span>\n          <HexInput\n            hexValue={\n              disableAlphaChooser\n                ? hexValueWithoutAlpha(color?.hex)\n                : color?.hex\n            }\n            disableAlphaChooser={disableAlphaChooser}\n            onSubmit={onSubmitHex}\n          />\n          <RGBAInput\n            disableAlphaChooser={disableAlphaChooser}\n            rgbaText={rgbaText}\n            rgbaValue={rgbaValue}\n            onSubmitAlpha={onSubmitAlpha}\n            onSubmitRgb={onSubmitRgb}\n          />\n        </div>\n        <div className={clsx(withBaseName(\"applyButtonDiv\"))}>\n          <Button data-testid=\"apply-button\" variant=\"cta\" onClick={onApply}>\n            Apply\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["alpha","_a"],"mappings":"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"}

package/dist-es/packages/lab/src/color-chooser/DictTabs.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import '../tabs/TabActivationIndicator.js';
 import { Tabstrip } from '../tabs/Tabstrip.js';
@@ -20,11 +20,11 @@ const DictTabs = ({
       /* @__PURE__ */ jsx(Tabstrip, {
         ...props,
         "data-testid": "color-chooser-tabstrip",
-        className: cx(withBaseName("wrapper")),
+        className: clsx(withBaseName("wrapper")),
         activeTabIndex: activeTab,
         onActiveChange: (tabIndex) => onTabClick(tabIndex),
         children: [...Object.keys(tabs)].map((label, i) => /* @__PURE__ */ jsx(Tab, {
-          className: cx(withBaseName("text")),
+          className: clsx(withBaseName("text")),
           label
         }, i))
       }),

package/dist-es/packages/lab/src/color-chooser/DictTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DictTabs.js","sources":["../src/color-chooser/DictTabs.tsx"],"sourcesContent":["import cn from \"classnames\";\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={cn(withBaseName(\"wrapper\"))}\n        activeTabIndex={activeTab}\n        onActiveChange={(tabIndex: number) => onTabClick(tabIndex)}\n      >\n        {[...Object.keys(tabs)].map((label, i) => (\n          <Tab className={cn(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":["cn"],"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,EAAAA,EAAA,CAAG,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,QACrC,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,EAAAA,EAAA,CAAG,YAAa,CAAA,MAAM,CAAC,CAAA;AAAA,UAAG,KAAA;AAAA,SAAA,EAAmB,CAAG,CACjE,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 { 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;;;;"}

package/dist-es/packages/lab/src/color-chooser/HexInput.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { useState, useEffect } from 'react';
 import { makePrefixer } from '@salt-ds/core';
 import { isValidHex } from './ColorHelpers.js';
@@ -37,15 +37,15 @@ const HexInput = ({
     isValidHex(hexInputValue) && onSubmit(hexInputValue, e);
   };
   return /* @__PURE__ */ jsxs("div", {
-    className: cx(withBaseName()),
+    className: clsx(withBaseName()),
     children: [
       /* @__PURE__ */ jsx("span", {
-        className: cx(withBaseName("hashSign")),
+        className: clsx(withBaseName("hashSign")),
         children: "#"
       }),
       /* @__PURE__ */ jsx(Input, {
         "data-testid": "hex-input",
-        className: cx(withBaseName("input")),
+        className: clsx(withBaseName("input")),
         value: (_a = hexInputValue == null ? void 0 : hexInputValue.toString().replace("#", "").toUpperCase()) != null ? _a : "",
         onChange: handleHexInputChange,
         onKeyDown: handleKeyDownHex,

package/dist-es/packages/lab/src/color-chooser/HexInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"HexInput.js","sources":["../src/color-chooser/HexInput.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { useState, useEffect } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { isValidHex } from \"./ColorHelpers\";\nimport { Input } from \"../input\";\n\nimport \"./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 [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={cn(withBaseName())}>\n      <span className={cn(withBaseName(\"hashSign\"))}>#</span>\n      <Input\n        data-testid=\"hex-input\"\n        className={cn(withBaseName(\"input\"))}\n        value={hexInputValue?.toString().replace(\"#\", \"\").toUpperCase() ?? \"\"}\n        onChange={handleHexInputChange}\n        onKeyDown={handleKeyDownHex}\n        onBlur={handleOnBlurHex}\n      />\n    </div>\n  );\n};\n"],"names":["cn"],"mappings":";;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AAQrD,MAAM,WAAW,CAAC;AAAA,EACvB,QAAA;AAAA,EACA,mBAAA;AAAA,EACA,QAAA;AACF,CAAkC,KAAA;AApBlC,EAAA,IAAA,EAAA,CAAA;AAqBE,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,EAAWA,EAAG,CAAA,YAAA,EAAc,CAAA;AAAA,IAC/B,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,UAAU,CAAC,CAAA;AAAA,QAAG,QAAA,EAAA,GAAA;AAAA,OAAC,CAAA;AAAA,sBAC/C,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,aAAY,EAAA,WAAA;AAAA,QACZ,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,OAAO,CAAC,CAAA;AAAA,QACnC,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 { clsx } from \"clsx\";\nimport { useState, useEffect } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { isValidHex } from \"./ColorHelpers\";\nimport { Input } from \"../input\";\n\nimport \"./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 [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":[],"mappings":";;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AAQrD,MAAM,WAAW,CAAC;AAAA,EACvB,QAAA;AAAA,EACA,mBAAA;AAAA,EACA,QAAA;AACF,CAAkC,KAAA;AApBlC,EAAA,IAAA,EAAA,CAAA;AAqBE,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,CAAA,KAAA,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;;;;"}

package/dist-es/packages/lab/src/color-chooser/RGBAInput.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import { AlphaInput } from './AlphaInputField.js';
 import { RGBInput } from './RGBAInputField.js';
@@ -16,7 +16,7 @@ const RGBAInput = ({
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
       /* @__PURE__ */ jsx("span", {
-        className: cx(withBaseName("textDivOverrides")),
+        className: clsx(withBaseName("textDivOverrides")),
         children: rgbaText
       }),
       ["r", "g", "b"].map((value) => /* @__PURE__ */ jsxs("div", {
@@ -34,10 +34,10 @@ const RGBAInput = ({
         ]
       })),
       !disableAlphaChooser ? /* @__PURE__ */ jsxs("div", {
-        className: cx(withBaseName("rgbaInputDiv")),
+        className: clsx(withBaseName("rgbaInputDiv")),
         children: [
           /* @__PURE__ */ jsx("span", {
-            className: cx(withBaseName("rgbaText")),
+            className: clsx(withBaseName("rgbaText")),
             children: "A"
           }),
           /* @__PURE__ */ jsx(AlphaInput, {
@@ -46,7 +46,7 @@ const RGBAInput = ({
           })
         ]
       }) : /* @__PURE__ */ jsx("div", {
-        className: cx(withBaseName("alphaSpacerDiv"))
+        className: clsx(withBaseName("alphaSpacerDiv"))
       })
     ]
   });

package/dist-es/packages/lab/src/color-chooser/RGBAInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"RGBAInput.js","sources":["../src/color-chooser/RGBAInput.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport cn from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport { RGBAValue } from \"./Color\";\nimport { RGBInput } from \"./RGBAInputField\";\n\nimport \"./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  return (\n    <>\n      <span className={cn(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={cn(withBaseName(\"rgbaInputDiv\"))}>\n          <span className={cn(withBaseName(\"rgbaText\"))}>A</span>\n          <AlphaInput\n            alphaValue={parseFloat(rgbaValue.a.toFixed(2))}\n            onSubmit={onSubmitAlpha}\n          />\n        </div>\n      ) : (\n        <div className={cn(withBaseName(\"alphaSpacerDiv\"))}></div>\n      )}\n    </>\n  );\n};\n"],"names":["cn"],"mappings":";;;;;;;AASA,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,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,kBAAkB,CAAC,CAAA;AAAA,QAAI,QAAA,EAAA,QAAA;AAAA,OAAS,CAAA;AAAA,MAChE,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,EAAAA,EAAA,CAAG,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,QAC7C,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,UAAU,CAAC,CAAA;AAAA,YAAG,QAAA,EAAA,GAAA;AAAA,WAAC,CAAA;AAAA,0BAC/C,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,EAAAA,EAAA,CAAG,YAAa,CAAA,gBAAgB,CAAC,CAAA;AAAA,OAAG,CAAA;AAAA,KAAA;AAAA,GAExD,CAAA,CAAA;AAEJ;;;;"}
+{"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 \"./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  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":[],"mappings":";;;;;;;AASA,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,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;;;;"}

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

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import { Color } from './Color.js';
 import { isTransparent } from './color-utils.js';
@@ -38,7 +38,7 @@ const Swatch = ({
     style: {
       background: getBackgroundColor()
     },
-    className: cx({
+    className: clsx({
       [withBaseName("active")]: active,
       [withBaseName("transparent")]: transparent,
       [withBaseName("graySwatch")]: isBlackOrgray(color),

package/dist-es/packages/lab/src/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 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":["color","cn"],"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,WAAWC,EAAG,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;;;;"}
+{"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;;;;"}

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import { AlphaInput } from './AlphaInputField.js';
 import { SwatchesPicker } from './SwatchesPicker.js';
@@ -16,7 +16,7 @@ const Swatches = ({
   onDialogClosed
 }) => /* @__PURE__ */ jsxs("div", {
   "data-testid": "swatches",
-  className: cx(withBaseName("pickerDiv")),
+  className: clsx(withBaseName("pickerDiv")),
   children: [
     /* @__PURE__ */ jsx(SwatchesPicker, {
       allColors,
@@ -26,16 +26,16 @@ const Swatches = ({
       onDialogClosed
     }),
     /* @__PURE__ */ jsxs("div", {
-      className: cx(withBaseName("textDiv")),
+      className: clsx(withBaseName("textDiv")),
       children: [
         /* @__PURE__ */ jsxs("div", {
           children: [
             /* @__PURE__ */ jsx("span", {
-              className: cx(withBaseName("colorTextDiv")),
+              className: clsx(withBaseName("colorTextDiv")),
               children: "Color:"
             }),
             /* @__PURE__ */ jsx("span", {
-              className: cx(withBaseName("colorNameTextDiv")),
+              className: clsx(withBaseName("colorNameTextDiv")),
               children: displayColorName != null ? displayColorName : placeholder
             })
           ]
@@ -43,7 +43,7 @@ const Swatches = ({
         /* @__PURE__ */ jsxs("div", {
           children: [
             /* @__PURE__ */ jsx("span", {
-              className: cx(withBaseName("alphaTextDiv")),
+              className: clsx(withBaseName("alphaTextDiv")),
               children: "Opacity:"
             }),
             /* @__PURE__ */ jsx(AlphaInput, {

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

@@ -1 +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":["cn","alpha"],"mappings":";;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,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,qBACG,IAAA,CAAA,KAAA,EAAA;AAAA,EAAI,aAAY,EAAA,UAAA;AAAA,EAAW,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,WAAW,CAAC,CAAA;AAAA,EACjE,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,cAAA,EAAA;AAAA,MACC,SAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAU,EAAA,iBAAA;AAAA,MACV,KAAA;AAAA,MACA,cAAA;AAAA,KACF,CAAA;AAAA,oBACC,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,MACxC,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,UACC,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,cAAG,QAAA,EAAA,QAAA;AAAA,aAAM,CAAA;AAAA,4BACxD,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAW,EAAAA,EAAA,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,wBACC,IAAA,CAAA,KAAA,EAAA;AAAA,UACC,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,cAAG,QAAA,EAAA,UAAA;AAAA,aAAQ,CAAA;AAAA,4BAC1D,GAAA,CAAA,UAAA,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;;;;"}
+{"version":3,"file":"Swatches.js","sources":["../src/color-chooser/Swatches.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport { Color } from \"./Color\";\nimport { SwatchesPicker } from \"./SwatchesPicker\";\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={clsx(withBaseName(\"pickerDiv\"))}>\n    <SwatchesPicker\n      allColors={allColors}\n      color={color}\n      onChange={handleColorChange}\n      alpha={alpha}\n      onDialogClosed={onDialogClosed}\n    />\n    <div className={clsx(withBaseName(\"textDiv\"))}>\n      <div>\n        <span className={clsx(withBaseName(\"colorTextDiv\"))}>Color:</span>\n        <span className={clsx(withBaseName(\"colorNameTextDiv\"))}>\n          {displayColorName ?? placeholder}\n        </span>\n      </div>\n      <div>\n        <span className={clsx(withBaseName(\"alphaTextDiv\"))}>Opacity:</span>\n        <AlphaInput\n          alphaValue={color?.rgba.a === 0 ? 0 : alpha}\n          showAsOpacity={true}\n          onSubmit={(alpha: number, e?: React.ChangeEvent): void => {\n            const newColor = color?.setAlpha(alpha);\n            handleColorChange(newColor, false, e);\n          }}\n        />\n      </div>\n    </div>\n  </div>\n);\n"],"names":["alpha"],"mappings":";;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,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,qBACG,IAAA,CAAA,KAAA,EAAA;AAAA,EAAI,aAAY,EAAA,UAAA;AAAA,EAAW,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,WAAW,CAAC,CAAA;AAAA,EACnE,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,cAAA,EAAA;AAAA,MACC,SAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAU,EAAA,iBAAA;AAAA,MACV,KAAA;AAAA,MACA,cAAA;AAAA,KACF,CAAA;AAAA,oBACC,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,MAC1C,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,UACC,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,cAAG,QAAA,EAAA,QAAA;AAAA,aAAM,CAAA;AAAA,4BAC1D,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,kBAAkB,CAAC,CAAA;AAAA,cACnD,QAAoB,EAAA,gBAAA,IAAA,IAAA,GAAA,gBAAA,GAAA,WAAA;AAAA,aACvB,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,wBACC,IAAA,CAAA,KAAA,EAAA;AAAA,UACC,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,cAAG,QAAA,EAAA,UAAA;AAAA,aAAQ,CAAA;AAAA,4BAC5D,GAAA,CAAA,UAAA,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,CAACA,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;;;;"}