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

package/dist-cjs/packages/lab/src/dropdown/DropdownButton.js

@@ -7,14 +7,10 @@ var core = require('@salt-ds/core');
 var icons = require('@salt-ds/icons');
 require('../form-field-context/FormFieldContext.js');
 var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
-var cx = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 require('./DropdownButton.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const withBaseName = core.makePrefixer("saltDropdownButton");
 const DropdownButton = React.forwardRef(function DropdownButton2({
   IconComponent = icons.ChevronDownIcon,
@@ -33,7 +29,7 @@ const DropdownButton = React.forwardRef(function DropdownButton2({
 }, ref) {
   const { inFormField } = useFormFieldProps.useFormFieldProps();
   return /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-    className: cx__default["default"](
+    className: clsx.clsx(
       withBaseName(),
       {
         [withBaseName("fullwidth")]: fullWidth,

package/dist-cjs/packages/lab/src/dropdown/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","sources":["../src/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { ChevronDownIcon, IconProps, DEFAULT_ICON_SIZE } from \"@salt-ds/icons\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport classnames from \"classnames\";\nimport { AriaAttributes, ComponentType, ForwardedRef, forwardRef } from \"react\";\n\nimport \"./DropdownButton.css\";\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Replace the default Icon component\n   */\n  IconComponent?: ComponentType<any>;\n  /**\n   * Whether the dropdown button should hide role='option' via 'aria-hidden'\n   */\n  ariaHideOptionRole?: boolean;\n  /**\n   * If, `true`, the Dropdown button will occupy the full width of it's container\n   */\n  fullWidth?: boolean;\n  /**\n   * Sets the size of the down arrow icon. If this is not specified, a default size based on density is used.\n   */\n  iconSize?: IconProps[\"size\"];\n  /**\n   * Is the dropdown list open\n   */\n  isOpen?: boolean;\n  /**\n   * Label for the dropdown button\n   */\n  label?: string;\n  /**\n   * Id for the label. This is needed for ARIA attributes.\n   */\n  labelId?: string;\n  /**\n   * When the dropdown is collapsed this value is set as aria-posinset on the span containing the selected value\n   * **/\n  posInSet?: number;\n  /**\n   * When the dropdown is collapsed this value is set as aria-setsize on the span containing the selected value\n   * **/\n  setSize?: number;\n  /**\n   *\n   * **/\n  labelAriaAttributes?: Pick<\n    AriaAttributes,\n    \"aria-posinset\" | \"aria-setsize\" | \"aria-selected\"\n  >;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdownButton\");\n\nexport const DropdownButton = forwardRef(function DropdownButton(\n  {\n    IconComponent = ChevronDownIcon,\n    ariaHideOptionRole,\n    className,\n    disabled,\n    iconSize = DEFAULT_ICON_SIZE,\n    isOpen,\n    label,\n    labelId,\n    fullWidth,\n    posInSet,\n    setSize,\n    labelAriaAttributes,\n    ...rest\n  }: DropdownButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>\n) {\n  const { inFormField } = useFormFieldProps();\n  // FIXME: use polymorphic button\n  // We don't want the 'button' tag to be shown in the DOM to trigger some accessibility testing\n  // tool's false alarm on role of 'listbox'\n  return (\n    <Button\n      className={classnames(\n        withBaseName(),\n        {\n          [withBaseName(\"fullwidth\")]: fullWidth,\n          [withBaseName(\"formField\")]: inFormField,\n        },\n        className\n      )}\n      data-testid=\"dropdown-button\"\n      disabled={disabled}\n      variant=\"secondary\"\n      {...rest}\n      ref={ref}\n    >\n      <div className={withBaseName(\"content\")}>\n        <span\n          // 'hidden' so that screen reader won't be confused the additional 'option' which is just a label\n          aria-hidden={ariaHideOptionRole ? \"true\" : undefined}\n          {...labelAriaAttributes}\n          className={withBaseName(\"buttonLabel\")}\n          id={labelId}\n          // 'option' role here is to suppress accessibility testing tool warning about 'listbox' missing children role.\n          role=\"option\"\n        >\n          {label}\n        </span>\n        <IconComponent\n          className={withBaseName(\"icon\")}\n          size={iconSize}\n          aria-label={null}\n          aria-hidden=\"true\"\n        />\n      </div>\n    </Button>\n  );\n});\n"],"names":["makePrefixer","forwardRef","DropdownButton","ChevronDownIcon","DEFAULT_ICON_SIZE","useFormFieldProps","jsx","Button","classnames","jsxs"],"mappings":";;;;;;;;;;;;;;;;;AAsDA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA,CAAA;AAEzC,MAAA,cAAA,GAAiBC,gBAAW,CAAA,SAASC,eAChD,CAAA;AAAA,EACE,aAAgB,GAAAC,qBAAA;AAAA,EAChB,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAAC,uBAAA;AAAA,EACX,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,EAAE,WAAY,EAAA,GAAIC,mCAAkB,EAAA,CAAA;AAI1C,EAAA,uBACGC,cAAA,CAAAC,WAAA,EAAA;AAAA,IACC,SAAW,EAAAC,sBAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,QAC7B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,WAAA;AAAA,OAC/B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,iBAAA;AAAA,IACZ,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAC,kBAAAC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACpC,QAAA,EAAA;AAAA,wBAACH,cAAA,CAAA,MAAA,EAAA;AAAA,UAEC,aAAA,EAAa,qBAAqB,MAAS,GAAA,KAAA,CAAA;AAAA,UAC1C,GAAG,mBAAA;AAAA,UACJ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,UACrC,EAAI,EAAA,OAAA;AAAA,UAEJ,IAAK,EAAA,QAAA;AAAA,UAEJ,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,wBACCA,cAAA,CAAA,aAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAC9B,IAAM,EAAA,QAAA;AAAA,UACN,YAAY,EAAA,IAAA;AAAA,UACZ,aAAY,EAAA,MAAA;AAAA,SACd,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"DropdownButton.js","sources":["../src/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { ChevronDownIcon, IconProps, DEFAULT_ICON_SIZE } from \"@salt-ds/icons\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { clsx } from \"clsx\";\nimport { AriaAttributes, ComponentType, ForwardedRef, forwardRef } from \"react\";\n\nimport \"./DropdownButton.css\";\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Replace the default Icon component\n   */\n  IconComponent?: ComponentType<any>;\n  /**\n   * Whether the dropdown button should hide role='option' via 'aria-hidden'\n   */\n  ariaHideOptionRole?: boolean;\n  /**\n   * If, `true`, the Dropdown button will occupy the full width of it's container\n   */\n  fullWidth?: boolean;\n  /**\n   * Sets the size of the down arrow icon. If this is not specified, a default size based on density is used.\n   */\n  iconSize?: IconProps[\"size\"];\n  /**\n   * Is the dropdown list open\n   */\n  isOpen?: boolean;\n  /**\n   * Label for the dropdown button\n   */\n  label?: string;\n  /**\n   * Id for the label. This is needed for ARIA attributes.\n   */\n  labelId?: string;\n  /**\n   * When the dropdown is collapsed this value is set as aria-posinset on the span containing the selected value\n   * **/\n  posInSet?: number;\n  /**\n   * When the dropdown is collapsed this value is set as aria-setsize on the span containing the selected value\n   * **/\n  setSize?: number;\n  /**\n   *\n   * **/\n  labelAriaAttributes?: Pick<\n    AriaAttributes,\n    \"aria-posinset\" | \"aria-setsize\" | \"aria-selected\"\n  >;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdownButton\");\n\nexport const DropdownButton = forwardRef(function DropdownButton(\n  {\n    IconComponent = ChevronDownIcon,\n    ariaHideOptionRole,\n    className,\n    disabled,\n    iconSize = DEFAULT_ICON_SIZE,\n    isOpen,\n    label,\n    labelId,\n    fullWidth,\n    posInSet,\n    setSize,\n    labelAriaAttributes,\n    ...rest\n  }: DropdownButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>\n) {\n  const { inFormField } = useFormFieldProps();\n  // FIXME: use polymorphic button\n  // We don't want the 'button' tag to be shown in the DOM to trigger some accessibility testing\n  // tool's false alarm on role of 'listbox'\n  return (\n    <Button\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"fullwidth\")]: fullWidth,\n          [withBaseName(\"formField\")]: inFormField,\n        },\n        className\n      )}\n      data-testid=\"dropdown-button\"\n      disabled={disabled}\n      variant=\"secondary\"\n      {...rest}\n      ref={ref}\n    >\n      <div className={withBaseName(\"content\")}>\n        <span\n          // 'hidden' so that screen reader won't be confused the additional 'option' which is just a label\n          aria-hidden={ariaHideOptionRole ? \"true\" : undefined}\n          {...labelAriaAttributes}\n          className={withBaseName(\"buttonLabel\")}\n          id={labelId}\n          // 'option' role here is to suppress accessibility testing tool warning about 'listbox' missing children role.\n          role=\"option\"\n        >\n          {label}\n        </span>\n        <IconComponent\n          className={withBaseName(\"icon\")}\n          size={iconSize}\n          aria-label={null}\n          aria-hidden=\"true\"\n        />\n      </div>\n    </Button>\n  );\n});\n"],"names":["makePrefixer","forwardRef","DropdownButton","ChevronDownIcon","DEFAULT_ICON_SIZE","useFormFieldProps","jsx","Button","clsx","jsxs"],"mappings":";;;;;;;;;;;;;AAsDA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA,CAAA;AAEzC,MAAA,cAAA,GAAiBC,gBAAW,CAAA,SAASC,eAChD,CAAA;AAAA,EACE,aAAgB,GAAAC,qBAAA;AAAA,EAChB,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAAC,uBAAA;AAAA,EACX,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,EAAE,WAAY,EAAA,GAAIC,mCAAkB,EAAA,CAAA;AAI1C,EAAA,uBACGC,cAAA,CAAAC,WAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,QAC7B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,WAAA;AAAA,OAC/B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,iBAAA;AAAA,IACZ,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAC,kBAAAC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACpC,QAAA,EAAA;AAAA,wBAACH,cAAA,CAAA,MAAA,EAAA;AAAA,UAEC,aAAA,EAAa,qBAAqB,MAAS,GAAA,KAAA,CAAA;AAAA,UAC1C,GAAG,mBAAA;AAAA,UACJ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,UACrC,EAAI,EAAA,OAAA;AAAA,UAEJ,IAAK,EAAA,QAAA;AAAA,UAEJ,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,wBACCA,cAAA,CAAA,aAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAC9B,IAAM,EAAA,QAAA;AAAA,UACN,YAAY,EAAA,IAAA;AAAA,UACZ,aAAY,EAAA,MAAA;AAAA,SACd,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/packages/lab/src/editable-label/EditableLabel.js

@@ -3,17 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var cx = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var core = require('@salt-ds/core');
 var Input = require('../input/Input.js');
 require('../input/StaticInputAdornment.js');
 require('./EditableLabel.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const classBase = "saltEditableLabel";
 const EditableLabel = React.forwardRef(function EditableLabel2({
   className: classNameProp,
@@ -87,7 +83,7 @@ const EditableLabel = React.forwardRef(function EditableLabel2({
       exitEditMode({ cancelEdit: true });
     }
   };
-  const className = cx__default["default"](classBase, classNameProp, {
+  const className = clsx.clsx(classBase, classNameProp, {
     [`${classBase}-editing`]: editing
   });
   return /* @__PURE__ */ jsxRuntime.jsx("div", {

package/dist-cjs/packages/lab/src/editable-label/EditableLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableLabel.js","sources":["../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport React, {\n  ChangeEvent,\n  KeyboardEvent,\n  useCallback,\n  forwardRef,\n  ForwardedRef,\n  ReactElement,\n  useRef,\n} from \"react\";\nimport { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { Input } from \"../input\";\n\nimport \"./EditableLabel.css\";\n\nconst classBase = \"saltEditableLabel\";\n\nexport interface EditableLabelProps {\n  className?: string;\n  defaultEditing?: boolean;\n  defaultValue?: string;\n  editing?: boolean;\n  onEnterEditMode: () => void;\n  onChange?: (value: string) => void;\n  onExitEditMode: (\n    originalLabel: string | undefined,\n    editedLabel: string | undefined,\n    allowDeactivation?: boolean\n  ) => void;\n  defaultIsEditing?: boolean;\n  value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n  {\n    className: classNameProp,\n    defaultEditing,\n    defaultValue,\n    editing: editingProp,\n    onChange,\n    onEnterEditMode,\n    onExitEditMode,\n    value: valueProp,\n  }: EditableLabelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n): ReactElement<EditableLabelProps> {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? \"\",\n    name: \"EditableLabel\",\n    state: \"value\",\n  });\n\n  const [editing, setEditing] = useControlled({\n    controlled: editingProp,\n    default: defaultEditing ?? false,\n    name: \"EditableLabel\",\n    state: \"editing\",\n  });\n\n  const initialValue = useRef(value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (editing) {\n      if (inputRef.current !== null) {\n        inputRef.current.select();\n        inputRef.current.focus();\n      }\n    }\n  }, [editing, inputRef]);\n\n  const enterEditMode = useCallback(() => {\n    setEditing(true);\n    // ignoreBlur.current = false;\n    onEnterEditMode && onEnterEditMode();\n  }, [onEnterEditMode, setEditing]);\n\n  const exitEditMode = ({\n    cancelEdit = false,\n    allowDeactivation = false,\n  } = {}) => {\n    setEditing(false);\n    const originalValue = initialValue.current;\n    if (originalValue !== value) {\n      if (cancelEdit) {\n        setValue(originalValue);\n      } else {\n        initialValue.current = value;\n      }\n    }\n    onExitEditMode && onExitEditMode(originalValue, value, allowDeactivation);\n  };\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    onChange && onChange(value);\n  };\n\n  const handleDoubleClick = () => {\n    enterEditMode();\n  };\n\n  const handleBlur = () => {\n    exitEditMode({ allowDeactivation: true });\n  };\n\n  const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n    if (editing && evt.key === \"Enter\") {\n      evt.stopPropagation();\n      // we are likely to lose focus as a consequence of user response\n      // to exitEdit transition, don't want it to trigger another\n      //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n      exitEditMode();\n    } else if (evt.key === \"ArrowRight\" || evt.key === \"ArrowLeft\") {\n      evt.stopPropagation();\n    } else if (evt.key === \"Escape\") {\n      exitEditMode({ cancelEdit: true });\n    }\n  };\n\n  const className = classnames(classBase, classNameProp, {\n    [`${classBase}-editing`]: editing,\n  });\n  return (\n    <div\n      className={className}\n      onDoubleClick={handleDoubleClick}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      {editing ? (\n        <Input\n          inputProps={{ className: `${classBase}-input` }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          ref={inputRef}\n          style={{ padding: 0 }}\n          textAlign=\"left\"\n        />\n      ) : (\n        value\n      )}\n    </div>\n  );\n});\n"],"names":["forwardRef","EditableLabel","useRef","useControlled","useIsomorphicLayoutEffect","useCallback","value","classnames","jsx","Input"],"mappings":"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"}
+{"version":3,"file":"EditableLabel.js","sources":["../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n  ChangeEvent,\n  KeyboardEvent,\n  useCallback,\n  forwardRef,\n  ForwardedRef,\n  ReactElement,\n  useRef,\n} from \"react\";\nimport { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { Input } from \"../input\";\n\nimport \"./EditableLabel.css\";\n\nconst classBase = \"saltEditableLabel\";\n\nexport interface EditableLabelProps {\n  className?: string;\n  defaultEditing?: boolean;\n  defaultValue?: string;\n  editing?: boolean;\n  onEnterEditMode: () => void;\n  onChange?: (value: string) => void;\n  onExitEditMode: (\n    originalLabel: string | undefined,\n    editedLabel: string | undefined,\n    allowDeactivation?: boolean\n  ) => void;\n  defaultIsEditing?: boolean;\n  value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n  {\n    className: classNameProp,\n    defaultEditing,\n    defaultValue,\n    editing: editingProp,\n    onChange,\n    onEnterEditMode,\n    onExitEditMode,\n    value: valueProp,\n  }: EditableLabelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n): ReactElement<EditableLabelProps> {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? \"\",\n    name: \"EditableLabel\",\n    state: \"value\",\n  });\n\n  const [editing, setEditing] = useControlled({\n    controlled: editingProp,\n    default: defaultEditing ?? false,\n    name: \"EditableLabel\",\n    state: \"editing\",\n  });\n\n  const initialValue = useRef(value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (editing) {\n      if (inputRef.current !== null) {\n        inputRef.current.select();\n        inputRef.current.focus();\n      }\n    }\n  }, [editing, inputRef]);\n\n  const enterEditMode = useCallback(() => {\n    setEditing(true);\n    // ignoreBlur.current = false;\n    onEnterEditMode && onEnterEditMode();\n  }, [onEnterEditMode, setEditing]);\n\n  const exitEditMode = ({\n    cancelEdit = false,\n    allowDeactivation = false,\n  } = {}) => {\n    setEditing(false);\n    const originalValue = initialValue.current;\n    if (originalValue !== value) {\n      if (cancelEdit) {\n        setValue(originalValue);\n      } else {\n        initialValue.current = value;\n      }\n    }\n    onExitEditMode && onExitEditMode(originalValue, value, allowDeactivation);\n  };\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    onChange && onChange(value);\n  };\n\n  const handleDoubleClick = () => {\n    enterEditMode();\n  };\n\n  const handleBlur = () => {\n    exitEditMode({ allowDeactivation: true });\n  };\n\n  const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n    if (editing && evt.key === \"Enter\") {\n      evt.stopPropagation();\n      // we are likely to lose focus as a consequence of user response\n      // to exitEdit transition, don't want it to trigger another\n      //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n      exitEditMode();\n    } else if (evt.key === \"ArrowRight\" || evt.key === \"ArrowLeft\") {\n      evt.stopPropagation();\n    } else if (evt.key === \"Escape\") {\n      exitEditMode({ cancelEdit: true });\n    }\n  };\n\n  const className = clsx(classBase, classNameProp, {\n    [`${classBase}-editing`]: editing,\n  });\n  return (\n    <div\n      className={className}\n      onDoubleClick={handleDoubleClick}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      {editing ? (\n        <Input\n          inputProps={{ className: `${classBase}-input` }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          ref={inputRef}\n          style={{ padding: 0 }}\n          textAlign=\"left\"\n        />\n      ) : (\n        value\n      )}\n    </div>\n  );\n});\n"],"names":["forwardRef","EditableLabel","useRef","useControlled","useIsomorphicLayoutEffect","useCallback","value","clsx","jsx","Input"],"mappings":"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"}

package/dist-cjs/packages/lab/src/file-drop-zone/FileDropZone.js

@@ -5,15 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var icons = require('@salt-ds/icons');
-var cx = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var utils = require('./internal/utils.js');
 require('./FileDropZone.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const buttonLabel = "Browse files";
 const INVALID_DROP_TARGET = "Drop target doesn't contain any file.";
 const withBaseName = core.makePrefixer("saltFileDropZone");
@@ -122,7 +118,7 @@ const FileDropZone = React.forwardRef(
     const buttonLabelledBy = (isRejected ? [buttonId, iconId, descriptionId] : [buttonId, descriptionId]).join(" ");
     return /* @__PURE__ */ jsxRuntime.jsxs("div", {
       ...restProps,
-      className: cx__default["default"](
+      className: clsx.clsx(
         withBaseName(),
         {
           [withBaseName("error")]: isRejected,

package/dist-cjs/packages/lab/src/file-drop-zone/FileDropZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { Button, makePrefixer, useId } from \"@salt-ds/core\";\nimport { ErrorIcon, UploadIcon } from \"@salt-ds/icons\";\nimport cx from \"classnames\";\nimport {\n  ChangeEventHandler,\n  DragEvent,\n  DragEventHandler,\n  FocusEvent,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { containsFiles, extractFiles, validateFiles } from \"./internal/utils\";\nimport { FilesValidator } from \"./validators\";\n\nimport \"./FileDropZone.css\";\n\n// Recommended button label by ADA review\nconst buttonLabel = \"Browse files\";\nconst INVALID_DROP_TARGET = \"Drop target doesn't contain any file.\";\n\nexport type FilesAcceptedEventHandler = (\n  files: ReadonlyArray<File>,\n  event: SyntheticEvent\n) => void;\n\nexport type FilesRejectedEventHandler<ErrorType = string> = (\n  errors: ReadonlyArray<ErrorType>,\n  event: SyntheticEvent\n) => void;\n\n/**\n * Removed deprecated props\n *\n * - onDrop\n * - onFileTypeError\n * - showUploadButton\n */\n\nexport interface FileDropZoneProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * `accept` attribute for HTML <input>.\n   *\n   * A comma separated list of file types the user can pick from the file input dialog box.\n   */\n  accept?: string;\n\n  /**\n   * The text content of the drop area component.\n   */\n  children?: ReactNode;\n\n  /**\n   * Additional usage information.\n   */\n  description?: string;\n\n  /**\n   * If `true`, the file drop zone will be disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * This prop is used to help implement the accessibility logic.\n   * If you don't provide this prop. It falls back to a randomly generated id.\n   */\n  id?: string;\n\n  /**\n   * Callback on successful file drop or selection.\n   */\n  onFilesAccepted?: FilesAcceptedEventHandler;\n\n  /**\n   * @see `validate` prop\n   * Callback on drop or input in case of an error. A list of errors will be provided as input.\n   */\n  onFilesRejected?: FilesRejectedEventHandler;\n\n  /**\n   * A list of custom validation functions. Every function is provided with the entire file list as input\n   * thus can perform validations on all files. Each function needs to return one or more errors in case of\n   * a failed validation, or `undefined` in case of a successful one.\n   *\n   * All errors are collected in the end and returned as an array to `onFilesRejected`.\n   */\n  validate?: ReadonlyArray<FilesValidator<any>>;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n  function FileDropZone(\n    {\n      accept,\n      className,\n      children,\n      description,\n      disabled,\n      id: idProp,\n      validate,\n      onFilesAccepted,\n      onFilesRejected,\n      ...restProps\n    },\n    ref\n  ) {\n    const id = useId(idProp);\n\n    const iconId = `${id}-icon`;\n    const buttonId = `${id}-button`;\n    const descriptionId = `${id}-description`;\n\n    const [dropResult, setDropResult] = useState<null | {\n      event: SyntheticEvent;\n      files?: ReadonlyArray<File>;\n      errors: string[];\n    }>(null);\n    const [isActive, setActive] = useState(false);\n    const [isRejected, setRejected] = useState(false);\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const fileInputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (!disabled && dropResult) {\n        const { event, files, errors } = dropResult;\n\n        if (errors && errors.length !== 0) {\n          setRejected(true);\n          if (!!onFilesRejected) {\n            return onFilesRejected(errors, event);\n          }\n        }\n\n        setRejected(false);\n        return onFilesAccepted?.(files!, event);\n      }\n    }, [disabled, dropResult, onFilesAccepted, onFilesRejected]);\n\n    const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {\n      // Need to cancel the default events to allow drop\n      // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (disabled) {\n        event.dataTransfer && (event.dataTransfer.dropEffect = \"none\");\n        return;\n      } else {\n        // Not using 'move', otherwise apps like Outlook will delete the item\n        event.dataTransfer && (event.dataTransfer.dropEffect = \"copy\");\n      }\n\n      if (!isActive && containsFiles(event)) {\n        setActive(true);\n      }\n    };\n\n    const handleDragLeave = () => setActive(false);\n\n    const handleFilesDrop = (event: SyntheticEvent) => {\n      if (!containsFiles(event as DragEvent)) {\n        return setDropResult({\n          event,\n          errors: [INVALID_DROP_TARGET],\n        });\n      }\n\n      const files = extractFiles(event as DragEvent);\n\n      if (files.length > 0) {\n        return setDropResult({\n          event,\n          files,\n          errors: validate ? validateFiles({ files, validate }) : [],\n        });\n      }\n    };\n\n    const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      handleFilesDrop(event);\n      setActive(false);\n    };\n\n    const handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      event.stopPropagation();\n\n      handleFilesDrop(event);\n    };\n\n    // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n    // move focus back on the button element so that all labels can be announced correctly\n    const handleInputFocus = useCallback(\n      (event: FocusEvent<HTMLInputElement>) => {\n        event.stopPropagation();\n        buttonRef.current && buttonRef.current.focus();\n      },\n      []\n    );\n\n    const handleInputClick = useCallback(\n      (event: SyntheticEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        fileInputRef.current && fileInputRef.current.click();\n      },\n      []\n    );\n\n    const handleKeyDown = useCallback(\n      (event: KeyboardEvent<HTMLButtonElement>) => {\n        if ([\"Enter\", \"Space\"].indexOf(event.key) !== -1) {\n          fileInputRef.current && fileInputRef.current.click();\n        }\n      },\n      []\n    );\n\n    const fileDropZoneDescription = description ? (\n      <div className=\"saltFileDropZone-description\" id={descriptionId}>\n        {description}\n      </div>\n    ) : null;\n\n    const buttonLabelledBy = (\n      isRejected ? [buttonId, iconId, descriptionId] : [buttonId, descriptionId]\n    ).join(\" \");\n\n    return (\n      <div\n        {...restProps}\n        className={cx(\n          withBaseName(),\n          {\n            [withBaseName(\"error\")]: isRejected,\n            [withBaseName(\"active\")]: isActive,\n            [withBaseName(\"disabled\")]: disabled,\n          },\n          className\n        )}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        ref={ref}\n      >\n        {/* TODO: Check whether we want to replace this with aria announce */}\n        <div aria-live=\"polite\">\n          {/*\n           * It is an ADA requirement to always display an input button.-\n           */}\n          {isRejected ? (\n            <ErrorIcon\n              aria-label=\"error!\"\n              className={withBaseName(\"icon\")}\n              size={2}\n            />\n          ) : (\n            <UploadIcon className={withBaseName(\"icon\")} size={2} />\n          )}\n          {isRejected && fileDropZoneDescription}\n        </div>\n        <div className={withBaseName(\"title\")}>\n          {children || \"Drop files here or\"}\n        </div>\n        <label className={withBaseName(\"inputRoot\")}>\n          <Button\n            aria-labelledby={buttonLabelledBy}\n            ref={buttonRef}\n            className={withBaseName(\"inputButton\")}\n            data-testid=\"file-input-button\"\n            disabled={disabled}\n            onKeyDown={handleKeyDown}\n            onClick={handleInputClick}\n          >\n            {/* TODO: expose this in props */}\n            {buttonLabel.toUpperCase()}\n          </Button>\n          <input\n            accept={accept}\n            className=\"input-hidden\"\n            data-testid=\"file-input\"\n            disabled={disabled}\n            multiple\n            onChange={handleInputChange}\n            onFocus={handleInputFocus}\n            ref={fileInputRef}\n            type=\"file\"\n          />\n        </label>\n        {!isRejected && fileDropZoneDescription}\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","FileDropZone","useId","useState","useRef","useEffect","containsFiles","extractFiles","validateFiles","useCallback","jsx","jsxs","cx","ErrorIcon","UploadIcon","Button"],"mappings":"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"}
+{"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { Button, makePrefixer, useId } from \"@salt-ds/core\";\nimport { ErrorIcon, UploadIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  DragEvent,\n  DragEventHandler,\n  FocusEvent,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { containsFiles, extractFiles, validateFiles } from \"./internal/utils\";\nimport { FilesValidator } from \"./validators\";\n\nimport \"./FileDropZone.css\";\n\n// Recommended button label by ADA review\nconst buttonLabel = \"Browse files\";\nconst INVALID_DROP_TARGET = \"Drop target doesn't contain any file.\";\n\nexport type FilesAcceptedEventHandler = (\n  files: ReadonlyArray<File>,\n  event: SyntheticEvent\n) => void;\n\nexport type FilesRejectedEventHandler<ErrorType = string> = (\n  errors: ReadonlyArray<ErrorType>,\n  event: SyntheticEvent\n) => void;\n\n/**\n * Removed deprecated props\n *\n * - onDrop\n * - onFileTypeError\n * - showUploadButton\n */\n\nexport interface FileDropZoneProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * `accept` attribute for HTML <input>.\n   *\n   * A comma separated list of file types the user can pick from the file input dialog box.\n   */\n  accept?: string;\n\n  /**\n   * The text content of the drop area component.\n   */\n  children?: ReactNode;\n\n  /**\n   * Additional usage information.\n   */\n  description?: string;\n\n  /**\n   * If `true`, the file drop zone will be disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * This prop is used to help implement the accessibility logic.\n   * If you don't provide this prop. It falls back to a randomly generated id.\n   */\n  id?: string;\n\n  /**\n   * Callback on successful file drop or selection.\n   */\n  onFilesAccepted?: FilesAcceptedEventHandler;\n\n  /**\n   * @see `validate` prop\n   * Callback on drop or input in case of an error. A list of errors will be provided as input.\n   */\n  onFilesRejected?: FilesRejectedEventHandler;\n\n  /**\n   * A list of custom validation functions. Every function is provided with the entire file list as input\n   * thus can perform validations on all files. Each function needs to return one or more errors in case of\n   * a failed validation, or `undefined` in case of a successful one.\n   *\n   * All errors are collected in the end and returned as an array to `onFilesRejected`.\n   */\n  validate?: ReadonlyArray<FilesValidator<any>>;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n  function FileDropZone(\n    {\n      accept,\n      className,\n      children,\n      description,\n      disabled,\n      id: idProp,\n      validate,\n      onFilesAccepted,\n      onFilesRejected,\n      ...restProps\n    },\n    ref\n  ) {\n    const id = useId(idProp);\n\n    const iconId = `${id}-icon`;\n    const buttonId = `${id}-button`;\n    const descriptionId = `${id}-description`;\n\n    const [dropResult, setDropResult] = useState<null | {\n      event: SyntheticEvent;\n      files?: ReadonlyArray<File>;\n      errors: string[];\n    }>(null);\n    const [isActive, setActive] = useState(false);\n    const [isRejected, setRejected] = useState(false);\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const fileInputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (!disabled && dropResult) {\n        const { event, files, errors } = dropResult;\n\n        if (errors && errors.length !== 0) {\n          setRejected(true);\n          if (!!onFilesRejected) {\n            return onFilesRejected(errors, event);\n          }\n        }\n\n        setRejected(false);\n        return onFilesAccepted?.(files!, event);\n      }\n    }, [disabled, dropResult, onFilesAccepted, onFilesRejected]);\n\n    const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {\n      // Need to cancel the default events to allow drop\n      // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (disabled) {\n        event.dataTransfer && (event.dataTransfer.dropEffect = \"none\");\n        return;\n      } else {\n        // Not using 'move', otherwise apps like Outlook will delete the item\n        event.dataTransfer && (event.dataTransfer.dropEffect = \"copy\");\n      }\n\n      if (!isActive && containsFiles(event)) {\n        setActive(true);\n      }\n    };\n\n    const handleDragLeave = () => setActive(false);\n\n    const handleFilesDrop = (event: SyntheticEvent) => {\n      if (!containsFiles(event as DragEvent)) {\n        return setDropResult({\n          event,\n          errors: [INVALID_DROP_TARGET],\n        });\n      }\n\n      const files = extractFiles(event as DragEvent);\n\n      if (files.length > 0) {\n        return setDropResult({\n          event,\n          files,\n          errors: validate ? validateFiles({ files, validate }) : [],\n        });\n      }\n    };\n\n    const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      handleFilesDrop(event);\n      setActive(false);\n    };\n\n    const handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      event.stopPropagation();\n\n      handleFilesDrop(event);\n    };\n\n    // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n    // move focus back on the button element so that all labels can be announced correctly\n    const handleInputFocus = useCallback(\n      (event: FocusEvent<HTMLInputElement>) => {\n        event.stopPropagation();\n        buttonRef.current && buttonRef.current.focus();\n      },\n      []\n    );\n\n    const handleInputClick = useCallback(\n      (event: SyntheticEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        fileInputRef.current && fileInputRef.current.click();\n      },\n      []\n    );\n\n    const handleKeyDown = useCallback(\n      (event: KeyboardEvent<HTMLButtonElement>) => {\n        if ([\"Enter\", \"Space\"].indexOf(event.key) !== -1) {\n          fileInputRef.current && fileInputRef.current.click();\n        }\n      },\n      []\n    );\n\n    const fileDropZoneDescription = description ? (\n      <div className=\"saltFileDropZone-description\" id={descriptionId}>\n        {description}\n      </div>\n    ) : null;\n\n    const buttonLabelledBy = (\n      isRejected ? [buttonId, iconId, descriptionId] : [buttonId, descriptionId]\n    ).join(\" \");\n\n    return (\n      <div\n        {...restProps}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"error\")]: isRejected,\n            [withBaseName(\"active\")]: isActive,\n            [withBaseName(\"disabled\")]: disabled,\n          },\n          className\n        )}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        ref={ref}\n      >\n        {/* TODO: Check whether we want to replace this with aria announce */}\n        <div aria-live=\"polite\">\n          {/*\n           * It is an ADA requirement to always display an input button.-\n           */}\n          {isRejected ? (\n            <ErrorIcon\n              aria-label=\"error!\"\n              className={withBaseName(\"icon\")}\n              size={2}\n            />\n          ) : (\n            <UploadIcon className={withBaseName(\"icon\")} size={2} />\n          )}\n          {isRejected && fileDropZoneDescription}\n        </div>\n        <div className={withBaseName(\"title\")}>\n          {children || \"Drop files here or\"}\n        </div>\n        <label className={withBaseName(\"inputRoot\")}>\n          <Button\n            aria-labelledby={buttonLabelledBy}\n            ref={buttonRef}\n            className={withBaseName(\"inputButton\")}\n            data-testid=\"file-input-button\"\n            disabled={disabled}\n            onKeyDown={handleKeyDown}\n            onClick={handleInputClick}\n          >\n            {/* TODO: expose this in props */}\n            {buttonLabel.toUpperCase()}\n          </Button>\n          <input\n            accept={accept}\n            className=\"input-hidden\"\n            data-testid=\"file-input\"\n            disabled={disabled}\n            multiple\n            onChange={handleInputChange}\n            onFocus={handleInputFocus}\n            ref={fileInputRef}\n            type=\"file\"\n          />\n        </label>\n        {!isRejected && fileDropZoneDescription}\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","FileDropZone","useId","useState","useRef","useEffect","containsFiles","extractFiles","validateFiles","useCallback","jsx","jsxs","clsx","ErrorIcon","UploadIcon","Button"],"mappings":"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"}

package/dist-cjs/packages/lab/src/form-field/FormField.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var cx = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var core = require('@salt-ds/core');
 var FormFieldContext = require('../form-field-context/FormFieldContext.js');
@@ -16,10 +16,6 @@ var FormHelperText = require('./FormHelperText.js');
 var FormLabel = require('./FormLabel.js');
 require('./FormField.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const useA11yValue = ({
   required,
   disabled,
@@ -120,7 +116,7 @@ const FormField = React.forwardRef(
       disabled: !tooltipHelperText
     });
     const { ref: triggerRef, ...triggerProps } = getTriggerProps({
-      className: cx__default["default"](
+      className: clsx.clsx(
         withBaseName(),
         {
           [withBaseName("disabled")]: disabled,

package/dist-cjs/packages/lab/src/form-field/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport {\n  Dispatch,\n  ElementType,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  SetStateAction,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { FormFieldContext } from \"../form-field-context\";\nimport { Tooltip, useTooltip } from \"../tooltip\";\nimport { classBase } from \"./constant\";\nimport {\n  FormActivationIndicator,\n  FormActivationIndicatorProps,\n} from \"./FormActivationIndicator\";\nimport { FormHelperText, FormHelperTextProps } from \"./FormHelperText\";\nimport { FormLabel, FormLabelProps } from \"./FormLabel\";\nimport { NecessityIndicatorOptions } from \"./NecessityIndicator\";\nimport { StatusIndicatorProps } from \"./StatusIndicator\";\n\nimport \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\";\nexport type FormFieldHelperTextPlacement = \"bottom\" | \"tooltip\";\nexport type FormFieldValidationStatus = \"error\" | \"warning\";\n\nexport interface A11yValueProps\n  extends Pick<NecessityIndicatorOptions, \"required\"> {\n  /**\n   * If `true`, the FormField will be disabled.\n   */\n  disabled?: boolean;\n  /** id of the helper text node */\n  helperTextId?: string;\n  /** id of the label node */\n  labelId?: string;\n  /**\n   * The FormField value is Readonly\n   */\n  readOnly?: boolean;\n\n  /**\n   * Whether the form field needs to render helper text\n   */\n  renderHelperText?: boolean;\n}\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * The component used for activation indicator. Default to `FormActivationIndicator`.\n   */\n  ActivationIndicatorComponent?: ElementType<FormActivationIndicatorProps>;\n  /**\n   * Outer focus ring focus will not be applied. Defaults to false.\n   */\n  disableFocusRing?: boolean;\n  // I hate this fullWidth business. We should support a width prop. The default should be 100% (standard block behaviour)\n  // we should also support 'auto' or explicit numeric values\n  /**\n   * Whether the form field is occupying full width.\n   */\n  fullWidth?: boolean;\n  /**\n   * Whether to show the StatusIndicator component for validation states.\n   */\n  hasStatusIndicator?: boolean;\n  /**\n   * The helper text content\n   */\n  helperText?: string;\n  /**\n   * The component used for the helper text. Default to `FormHelperText`.\n   */\n  HelperTextComponent?: ElementType<FormHelperTextProps>;\n  /**\n   * Location the helperText, values: 'bottom' (default) or 'tooltip'.\n   */\n  helperTextPlacement?: FormFieldHelperTextPlacement;\n  /**\n   * Props to be applied to the `HelperTextComponent`.\n   *\n   * Generic on `FormHelperTextProps` is omitted.\n   */\n  HelperTextProps?: Partial<FormHelperTextProps>;\n  /**\n   * The label value for the FormField\n   */\n  label?: string;\n  /**\n   * The component used for the label. Default to `FormLabel`.\n   */\n  LabelComponent?: ElementType;\n  /**\n   * Location the label, values: 'top' (default) or 'left'\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * Props to be applied to the `LabelComponent`\n   */\n  LabelProps?: Partial<FormLabelProps>;\n  /**\n   * Override props to be used with the StatusIndicator component\n   */\n  StatusIndicatorProps?: Partial<StatusIndicatorProps>;\n  /**\n   * The state for the FormField: Must be one of: 'error'|'warning'|undefined\n   */\n  validationStatus?: FormFieldValidationStatus;\n  /**\n   * FormField variants; defaults to primary.\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport interface useA11yValueValue {\n  \"aria-labelledby\": A11yValueProps[\"labelId\"];\n  \"aria-required\": A11yValueProps[\"required\"];\n  \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n  disabled: A11yValueProps[\"disabled\"];\n  readOnly: A11yValueProps[\"readOnly\"];\n}\n\nconst useA11yValue = ({\n  required,\n  disabled,\n  readOnly,\n  labelId,\n  helperTextId,\n  renderHelperText,\n}: A11yValueProps) => {\n  return useMemo(\n    () => ({\n      \"aria-labelledby\": labelId,\n      \"aria-required\": required,\n      \"aria-describedby\": renderHelperText ? helperTextId : undefined,\n      disabled,\n      readOnly,\n    }),\n    [labelId, disabled, readOnly, required, renderHelperText, helperTextId]\n  );\n};\n\n// TODO: Add TS props for this\nexport const useFormField = ({\n  onBlur,\n  onFocus,\n}: {\n  onBlur?: FocusEventHandler<HTMLDivElement>;\n  onFocus?: FocusEventHandler<HTMLDivElement>;\n}): [\n  { focused: boolean },\n  { setFocused: Dispatch<SetStateAction<boolean>> },\n  {\n    onBlur: FocusEventHandler<HTMLDivElement>;\n    onFocus: FocusEventHandler<HTMLDivElement>;\n  }\n] => {\n  const [focused, setFocused] = useState(false);\n  const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n    setFocused(false);\n    onBlur?.(event);\n  };\n  const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n    setFocused(true);\n    onFocus?.(event);\n  };\n  return [\n    {\n      focused,\n    },\n    {\n      setFocused,\n    },\n    {\n      onBlur: handleBlur,\n      onFocus: handleFocus,\n    },\n  ];\n};\n\nconst withBaseName = makePrefixer(classBase);\n\nexport const FormField = forwardRef(\n  (\n    {\n      ActivationIndicatorComponent = FormActivationIndicator,\n      children,\n      className,\n      disabled,\n      disableFocusRing = false,\n      fullWidth = true,\n      hasStatusIndicator,\n      HelperTextComponent = FormHelperText,\n      HelperTextProps,\n      helperText,\n      helperTextPlacement = \"bottom\",\n      label,\n      LabelComponent = FormLabel,\n      labelPlacement = \"top\",\n      LabelProps = { displayedNecessity: \"required\" },\n      onBlur,\n      onFocus,\n      readOnly,\n      required,\n      StatusIndicatorProps,\n      validationStatus,\n      variant = \"primary\",\n      ...restProps\n    }: FormFieldProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const labelId = useId(LabelProps?.id);\n    const helperTextId = useId(HelperTextProps?.id);\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    const renderHelperText = !!helperText;\n\n    const a11yValue = useA11yValue({\n      required,\n      disabled,\n      readOnly,\n      labelId,\n      helperTextId,\n      renderHelperText,\n    });\n\n    const [states, dispatchers, eventHandlers] = useFormField({\n      onBlur,\n      onFocus,\n    });\n\n    const hasLabel = label !== undefined;\n    const labelTop = hasLabel && labelPlacement === \"top\";\n    const labelLeft = hasLabel && labelPlacement === \"left\";\n    const isWarning = validationStatus === \"warning\";\n    const isError = validationStatus === \"error\";\n    const focusClass = disableFocusRing\n      ? \"lowFocused\"\n      : \"focused\"; /* NOTE: need to look at */\n    const inlineHelperText =\n      renderHelperText && helperTextPlacement === \"bottom\";\n    const tooltipHelperText =\n      renderHelperText &&\n      helperTextPlacement === \"tooltip\" &&\n      !hasStatusIndicator;\n\n    const { getTooltipProps, getTriggerProps } = useTooltip({\n      disabled: !tooltipHelperText,\n    });\n\n    const { ref: triggerRef, ...triggerProps } = getTriggerProps({\n      className: cx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"readOnly\")]: readOnly,\n          [withBaseName(\"warning\")]: isWarning,\n          [withBaseName(\"error\")]: isError,\n          [withBaseName(\"fullWidth\")]: fullWidth,\n          [withBaseName(focusClass)]: states.focused,\n          [withBaseName(\"labelTop\")]: labelTop,\n          [withBaseName(\"labelLeft\")]: labelLeft,\n          [withBaseName(`withHelperText`)]: inlineHelperText,\n          [withBaseName(variant)]: variant,\n        },\n        className\n      ),\n      ...eventHandlers,\n      ...restProps,\n    });\n\n    const handleTriggerRef = useForkRef(triggerRef, rootRef);\n    const handleRef = useForkRef(handleTriggerRef, ref);\n\n    return (\n      <>\n        <div ref={handleRef} {...triggerProps}>\n          <FormFieldContext.Provider\n            value={{\n              ...states,\n              ...dispatchers,\n              ...eventHandlers,\n              a11yProps: a11yValue,\n              inFormField: true,\n              ref: rootRef,\n            }}\n          >\n            {hasLabel && (\n              <LabelComponent\n                {...LabelProps}\n                validationStatus={validationStatus}\n                hasStatusIndicator={hasStatusIndicator}\n                StatusIndicatorProps={StatusIndicatorProps}\n                className={LabelProps.className}\n                label={label}\n                disabled={disabled}\n                readOnly={readOnly}\n                required={required}\n                tooltipText={helperText}\n                id={labelId}\n              />\n            )}\n            {children}\n            <ActivationIndicatorComponent\n              hasIcon={!hasStatusIndicator}\n              validationStatus={validationStatus}\n            />\n            {renderHelperText && (\n              <HelperTextComponent\n                helperText={helperText}\n                helperTextPlacement={helperTextPlacement}\n                {...HelperTextProps}\n                id={helperTextId}\n              />\n            )}\n          </FormFieldContext.Provider>\n        </div>\n        <Tooltip {...getTooltipProps({ title: helperText })} />\n      </>\n    );\n  }\n);\n"],"names":["useMemo","useState","makePrefixer","classBase","forwardRef","FormActivationIndicator","FormHelperText","FormLabel","StatusIndicatorProps","useId","useRef","useTooltip","cx","useForkRef","jsxs","Fragment","jsx","FormFieldContext","Tooltip"],"mappings":"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"}
+{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  Dispatch,\n  ElementType,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  SetStateAction,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { FormFieldContext } from \"../form-field-context\";\nimport { Tooltip, useTooltip } from \"../tooltip\";\nimport { classBase } from \"./constant\";\nimport {\n  FormActivationIndicator,\n  FormActivationIndicatorProps,\n} from \"./FormActivationIndicator\";\nimport { FormHelperText, FormHelperTextProps } from \"./FormHelperText\";\nimport { FormLabel, FormLabelProps } from \"./FormLabel\";\nimport { NecessityIndicatorOptions } from \"./NecessityIndicator\";\nimport { StatusIndicatorProps } from \"./StatusIndicator\";\n\nimport \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\";\nexport type FormFieldHelperTextPlacement = \"bottom\" | \"tooltip\";\nexport type FormFieldValidationStatus = \"error\" | \"warning\";\n\nexport interface A11yValueProps\n  extends Pick<NecessityIndicatorOptions, \"required\"> {\n  /**\n   * If `true`, the FormField will be disabled.\n   */\n  disabled?: boolean;\n  /** id of the helper text node */\n  helperTextId?: string;\n  /** id of the label node */\n  labelId?: string;\n  /**\n   * The FormField value is Readonly\n   */\n  readOnly?: boolean;\n\n  /**\n   * Whether the form field needs to render helper text\n   */\n  renderHelperText?: boolean;\n}\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * The component used for activation indicator. Default to `FormActivationIndicator`.\n   */\n  ActivationIndicatorComponent?: ElementType<FormActivationIndicatorProps>;\n  /**\n   * Outer focus ring focus will not be applied. Defaults to false.\n   */\n  disableFocusRing?: boolean;\n  // I hate this fullWidth business. We should support a width prop. The default should be 100% (standard block behaviour)\n  // we should also support 'auto' or explicit numeric values\n  /**\n   * Whether the form field is occupying full width.\n   */\n  fullWidth?: boolean;\n  /**\n   * Whether to show the StatusIndicator component for validation states.\n   */\n  hasStatusIndicator?: boolean;\n  /**\n   * The helper text content\n   */\n  helperText?: string;\n  /**\n   * The component used for the helper text. Default to `FormHelperText`.\n   */\n  HelperTextComponent?: ElementType<FormHelperTextProps>;\n  /**\n   * Location the helperText, values: 'bottom' (default) or 'tooltip'.\n   */\n  helperTextPlacement?: FormFieldHelperTextPlacement;\n  /**\n   * Props to be applied to the `HelperTextComponent`.\n   *\n   * Generic on `FormHelperTextProps` is omitted.\n   */\n  HelperTextProps?: Partial<FormHelperTextProps>;\n  /**\n   * The label value for the FormField\n   */\n  label?: string;\n  /**\n   * The component used for the label. Default to `FormLabel`.\n   */\n  LabelComponent?: ElementType;\n  /**\n   * Location the label, values: 'top' (default) or 'left'\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * Props to be applied to the `LabelComponent`\n   */\n  LabelProps?: Partial<FormLabelProps>;\n  /**\n   * Override props to be used with the StatusIndicator component\n   */\n  StatusIndicatorProps?: Partial<StatusIndicatorProps>;\n  /**\n   * The state for the FormField: Must be one of: 'error'|'warning'|undefined\n   */\n  validationStatus?: FormFieldValidationStatus;\n  /**\n   * FormField variants; defaults to primary.\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport interface useA11yValueValue {\n  \"aria-labelledby\": A11yValueProps[\"labelId\"];\n  \"aria-required\": A11yValueProps[\"required\"];\n  \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n  disabled: A11yValueProps[\"disabled\"];\n  readOnly: A11yValueProps[\"readOnly\"];\n}\n\nconst useA11yValue = ({\n  required,\n  disabled,\n  readOnly,\n  labelId,\n  helperTextId,\n  renderHelperText,\n}: A11yValueProps) => {\n  return useMemo(\n    () => ({\n      \"aria-labelledby\": labelId,\n      \"aria-required\": required,\n      \"aria-describedby\": renderHelperText ? helperTextId : undefined,\n      disabled,\n      readOnly,\n    }),\n    [labelId, disabled, readOnly, required, renderHelperText, helperTextId]\n  );\n};\n\n// TODO: Add TS props for this\nexport const useFormField = ({\n  onBlur,\n  onFocus,\n}: {\n  onBlur?: FocusEventHandler<HTMLDivElement>;\n  onFocus?: FocusEventHandler<HTMLDivElement>;\n}): [\n  { focused: boolean },\n  { setFocused: Dispatch<SetStateAction<boolean>> },\n  {\n    onBlur: FocusEventHandler<HTMLDivElement>;\n    onFocus: FocusEventHandler<HTMLDivElement>;\n  }\n] => {\n  const [focused, setFocused] = useState(false);\n  const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n    setFocused(false);\n    onBlur?.(event);\n  };\n  const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n    setFocused(true);\n    onFocus?.(event);\n  };\n  return [\n    {\n      focused,\n    },\n    {\n      setFocused,\n    },\n    {\n      onBlur: handleBlur,\n      onFocus: handleFocus,\n    },\n  ];\n};\n\nconst withBaseName = makePrefixer(classBase);\n\nexport const FormField = forwardRef(\n  (\n    {\n      ActivationIndicatorComponent = FormActivationIndicator,\n      children,\n      className,\n      disabled,\n      disableFocusRing = false,\n      fullWidth = true,\n      hasStatusIndicator,\n      HelperTextComponent = FormHelperText,\n      HelperTextProps,\n      helperText,\n      helperTextPlacement = \"bottom\",\n      label,\n      LabelComponent = FormLabel,\n      labelPlacement = \"top\",\n      LabelProps = { displayedNecessity: \"required\" },\n      onBlur,\n      onFocus,\n      readOnly,\n      required,\n      StatusIndicatorProps,\n      validationStatus,\n      variant = \"primary\",\n      ...restProps\n    }: FormFieldProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const labelId = useId(LabelProps?.id);\n    const helperTextId = useId(HelperTextProps?.id);\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    const renderHelperText = !!helperText;\n\n    const a11yValue = useA11yValue({\n      required,\n      disabled,\n      readOnly,\n      labelId,\n      helperTextId,\n      renderHelperText,\n    });\n\n    const [states, dispatchers, eventHandlers] = useFormField({\n      onBlur,\n      onFocus,\n    });\n\n    const hasLabel = label !== undefined;\n    const labelTop = hasLabel && labelPlacement === \"top\";\n    const labelLeft = hasLabel && labelPlacement === \"left\";\n    const isWarning = validationStatus === \"warning\";\n    const isError = validationStatus === \"error\";\n    const focusClass = disableFocusRing\n      ? \"lowFocused\"\n      : \"focused\"; /* NOTE: need to look at */\n    const inlineHelperText =\n      renderHelperText && helperTextPlacement === \"bottom\";\n    const tooltipHelperText =\n      renderHelperText &&\n      helperTextPlacement === \"tooltip\" &&\n      !hasStatusIndicator;\n\n    const { getTooltipProps, getTriggerProps } = useTooltip({\n      disabled: !tooltipHelperText,\n    });\n\n    const { ref: triggerRef, ...triggerProps } = getTriggerProps({\n      className: clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"readOnly\")]: readOnly,\n          [withBaseName(\"warning\")]: isWarning,\n          [withBaseName(\"error\")]: isError,\n          [withBaseName(\"fullWidth\")]: fullWidth,\n          [withBaseName(focusClass)]: states.focused,\n          [withBaseName(\"labelTop\")]: labelTop,\n          [withBaseName(\"labelLeft\")]: labelLeft,\n          [withBaseName(`withHelperText`)]: inlineHelperText,\n          [withBaseName(variant)]: variant,\n        },\n        className\n      ),\n      ...eventHandlers,\n      ...restProps,\n    });\n\n    const handleTriggerRef = useForkRef(triggerRef, rootRef);\n    const handleRef = useForkRef(handleTriggerRef, ref);\n\n    return (\n      <>\n        <div ref={handleRef} {...triggerProps}>\n          <FormFieldContext.Provider\n            value={{\n              ...states,\n              ...dispatchers,\n              ...eventHandlers,\n              a11yProps: a11yValue,\n              inFormField: true,\n              ref: rootRef,\n            }}\n          >\n            {hasLabel && (\n              <LabelComponent\n                {...LabelProps}\n                validationStatus={validationStatus}\n                hasStatusIndicator={hasStatusIndicator}\n                StatusIndicatorProps={StatusIndicatorProps}\n                className={LabelProps.className}\n                label={label}\n                disabled={disabled}\n                readOnly={readOnly}\n                required={required}\n                tooltipText={helperText}\n                id={labelId}\n              />\n            )}\n            {children}\n            <ActivationIndicatorComponent\n              hasIcon={!hasStatusIndicator}\n              validationStatus={validationStatus}\n            />\n            {renderHelperText && (\n              <HelperTextComponent\n                helperText={helperText}\n                helperTextPlacement={helperTextPlacement}\n                {...HelperTextProps}\n                id={helperTextId}\n              />\n            )}\n          </FormFieldContext.Provider>\n        </div>\n        <Tooltip {...getTooltipProps({ title: helperText })} />\n      </>\n    );\n  }\n);\n"],"names":["useMemo","useState","makePrefixer","classBase","forwardRef","FormActivationIndicator","FormHelperText","FormLabel","StatusIndicatorProps","useId","useRef","useTooltip","clsx","useForkRef","jsxs","Fragment","jsx","FormFieldContext","Tooltip"],"mappings":"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"}

package/dist-cjs/packages/lab/src/form-field/FormLabel.js

@@ -3,16 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var cx = require('classnames');
+var clsx = require('clsx');
 var core = require('@salt-ds/core');
 var NecessityIndicator = require('./NecessityIndicator.js');
 var StatusIndicator = require('./StatusIndicator.js');
 require('./FormLabel.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const withBaseName = core.makePrefixer("saltFormLabel");
 const FormLabel = ({
   label,
@@ -29,7 +25,7 @@ const FormLabel = ({
   tooltipText,
   ...restProps
 }) => /* @__PURE__ */ jsxRuntime.jsxs("label", {
-  className: cx__default["default"](withBaseName(), className, {
+  className: clsx.clsx(withBaseName(), className, {
     [withBaseName("disabled")]: disabled
   }),
   ...restProps,

package/dist-cjs/packages/lab/src/form-field/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","sources":["../src/form-field/FormLabel.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { ElementType, HTMLAttributes } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { FormFieldValidationStatus } from \"./FormField\";\nimport {\n  NecessityIndicator as DefaultNecessityIndicator,\n  NecessityIndicatorOptions,\n} from \"./NecessityIndicator\";\nimport { StatusIndicator, StatusIndicatorProps } from \"./StatusIndicator\";\n\nimport \"./FormLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormLabel\");\nexport interface FormLabelProps\n  extends HTMLAttributes<HTMLLabelElement>,\n    NecessityIndicatorOptions {\n  /**\n   * Whether the form field is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Adjusts whether the StatusIndicator component is shown\n   */\n  hasStatusIndicator?: boolean;\n  /**\n   * The label value for the FormLabel\n   */\n  label?: string;\n  /**\n   * An optional renderer function used to customize the necessity adornment\n   */\n  NecessityIndicator?: ElementType<NecessityIndicatorOptions>;\n  /**\n   * Whether the form field is readOnly.\n   */\n  readOnly?: boolean;\n  /**\n   * Props used to configure the StatusIndicator component if hasStatusIndicator is true\n   */\n  StatusIndicatorProps?: Partial<StatusIndicatorProps>;\n  /**\n   * The status for the FormField: Must be one of: 'error'|'warning'|undefined\n   */\n  validationStatus?: FormFieldValidationStatus;\n  /**\n   * Text to be shown in the Tooltip.\n   */\n  tooltipText?: string;\n}\n\nexport const FormLabel = ({\n  label,\n  NecessityIndicator = DefaultNecessityIndicator,\n  required,\n  displayedNecessity,\n  hasStatusIndicator = false,\n  StatusIndicatorProps,\n  validationStatus,\n  necessityText,\n  className,\n  disabled,\n  readOnly,\n  tooltipText,\n  ...restProps\n}: FormLabelProps) => (\n  <label\n    className={cx(withBaseName(), className, {\n      [withBaseName(\"disabled\")]: disabled,\n    })}\n    {...restProps}\n  >\n    {label}\n\n    <NecessityIndicator\n      required={required}\n      displayedNecessity={displayedNecessity}\n      necessityText={necessityText}\n      className={withBaseName(\"necessityIndicator\")}\n    />\n    {hasStatusIndicator && (\n      <StatusIndicator\n        className={withBaseName(\"statusIndicator\")}\n        status={validationStatus}\n        tooltipText={tooltipText}\n        hasTooltip\n        {...StatusIndicatorProps}\n      />\n    )}\n  </label>\n);\n"],"names":["makePrefixer","NecessityIndicator","DefaultNecessityIndicator","StatusIndicatorProps","jsxs","cx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAsC1C,MAAM,YAAY,CAAC;AAAA,EACxB,KAAA;AAAA,sBACAC,oBAAqB,GAAAC,qCAAA;AAAA,EACrB,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAqB,GAAA,KAAA;AAAA,EACrB,oBAAAC,EAAAA,qBAAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAA,qBACGC,eAAA,CAAA,OAAA,EAAA;AAAA,EACC,SAAW,EAAAC,sBAAA,CAAG,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,IACvC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,GAC7B,CAAA;AAAA,EACA,GAAG,SAAA;AAAA,EAEH,QAAA,EAAA;AAAA,IAAA,KAAA;AAAA,oBAEAC,cAAA,CAAAL,oBAAA,EAAA;AAAA,MACC,QAAA;AAAA,MACA,kBAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA,EAAW,aAAa,oBAAoB,CAAA;AAAA,KAC9C,CAAA;AAAA,IACC,sCACEK,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,MACzC,MAAQ,EAAA,gBAAA;AAAA,MACR,WAAA;AAAA,MACA,UAAU,EAAA,IAAA;AAAA,MACT,GAAGJ,qBAAAA;AAAA,KACN,CAAA;AAAA,GAAA;AAAA,CAEJ;;;;"}
+{"version":3,"file":"FormLabel.js","sources":["../src/form-field/FormLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ElementType, HTMLAttributes } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { FormFieldValidationStatus } from \"./FormField\";\nimport {\n  NecessityIndicator as DefaultNecessityIndicator,\n  NecessityIndicatorOptions,\n} from \"./NecessityIndicator\";\nimport { StatusIndicator, StatusIndicatorProps } from \"./StatusIndicator\";\n\nimport \"./FormLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormLabel\");\nexport interface FormLabelProps\n  extends HTMLAttributes<HTMLLabelElement>,\n    NecessityIndicatorOptions {\n  /**\n   * Whether the form field is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Adjusts whether the StatusIndicator component is shown\n   */\n  hasStatusIndicator?: boolean;\n  /**\n   * The label value for the FormLabel\n   */\n  label?: string;\n  /**\n   * An optional renderer function used to customize the necessity adornment\n   */\n  NecessityIndicator?: ElementType<NecessityIndicatorOptions>;\n  /**\n   * Whether the form field is readOnly.\n   */\n  readOnly?: boolean;\n  /**\n   * Props used to configure the StatusIndicator component if hasStatusIndicator is true\n   */\n  StatusIndicatorProps?: Partial<StatusIndicatorProps>;\n  /**\n   * The status for the FormField: Must be one of: 'error'|'warning'|undefined\n   */\n  validationStatus?: FormFieldValidationStatus;\n  /**\n   * Text to be shown in the Tooltip.\n   */\n  tooltipText?: string;\n}\n\nexport const FormLabel = ({\n  label,\n  NecessityIndicator = DefaultNecessityIndicator,\n  required,\n  displayedNecessity,\n  hasStatusIndicator = false,\n  StatusIndicatorProps,\n  validationStatus,\n  necessityText,\n  className,\n  disabled,\n  readOnly,\n  tooltipText,\n  ...restProps\n}: FormLabelProps) => (\n  <label\n    className={clsx(withBaseName(), className, {\n      [withBaseName(\"disabled\")]: disabled,\n    })}\n    {...restProps}\n  >\n    {label}\n\n    <NecessityIndicator\n      required={required}\n      displayedNecessity={displayedNecessity}\n      necessityText={necessityText}\n      className={withBaseName(\"necessityIndicator\")}\n    />\n    {hasStatusIndicator && (\n      <StatusIndicator\n        className={withBaseName(\"statusIndicator\")}\n        status={validationStatus}\n        tooltipText={tooltipText}\n        hasTooltip\n        {...StatusIndicatorProps}\n      />\n    )}\n  </label>\n);\n"],"names":["makePrefixer","NecessityIndicator","DefaultNecessityIndicator","StatusIndicatorProps","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAsC1C,MAAM,YAAY,CAAC;AAAA,EACxB,KAAA;AAAA,sBACAC,oBAAqB,GAAAC,qCAAA;AAAA,EACrB,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAqB,GAAA,KAAA;AAAA,EACrB,oBAAAC,EAAAA,qBAAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAA,qBACGC,eAAA,CAAA,OAAA,EAAA;AAAA,EACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,IACzC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,GAC7B,CAAA;AAAA,EACA,GAAG,SAAA;AAAA,EAEH,QAAA,EAAA;AAAA,IAAA,KAAA;AAAA,oBAEAC,cAAA,CAAAL,oBAAA,EAAA;AAAA,MACC,QAAA;AAAA,MACA,kBAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA,EAAW,aAAa,oBAAoB,CAAA;AAAA,KAC9C,CAAA;AAAA,IACC,sCACEK,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,MACzC,MAAQ,EAAA,gBAAA;AAAA,MACR,WAAA;AAAA,MACA,UAAU,EAAA,IAAA;AAAA,MACT,GAAGJ,qBAAAA;AAAA,KACN,CAAA;AAAA,GAAA;AAAA,CAEJ;;;;"}

package/dist-cjs/packages/lab/src/form-field/StatusIndicator.js

@@ -3,16 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var cx = require('classnames');
+var clsx = require('clsx');
 var core = require('@salt-ds/core');
 var Tooltip = require('../tooltip/Tooltip.js');
 require('../tooltip/TooltipContext.js');
 var useTooltip = require('../tooltip/useTooltip.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const withBaseName = core.makePrefixer("saltFormField");
 const StatusIndicator = (props) => {
   const {
@@ -44,7 +40,7 @@ const StatusIndicator = (props) => {
           status,
           ...restProps,
           ...IconProps2,
-          className: cx__default["default"](
+          className: clsx.clsx(
             withBaseName("statusIndicator"),
             className,
             IconProps2 == null ? void 0 : IconProps2.className

package/dist-cjs/packages/lab/src/form-field/StatusIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.js","sources":["../src/form-field/StatusIndicator.tsx"],"sourcesContent":["import { IconProps } from \"@salt-ds/icons\";\nimport cx from \"classnames\";\nimport { ElementType } from \"react\";\nimport {\n  StatusIndicator as BaseStatusIndicator,\n  makePrefixer,\n} from \"@salt-ds/core\";\nimport { Tooltip, TooltipProps, useTooltip } from \"../tooltip\";\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport type StatusIndicatorStatus = \"error\" | \"info\" | \"warning\" | \"success\";\n\nexport interface StatusIndicatorProps extends IconProps {\n  hasTooltip?: boolean;\n  IconProps?: Partial<IconProps>;\n  status?: StatusIndicatorStatus;\n  TooltipComponent?: ElementType<TooltipProps>;\n  TooltipProps?: Partial<TooltipProps>;\n  tooltipText?: string;\n}\n\nexport const StatusIndicator = (props: StatusIndicatorProps) => {\n  const {\n    TooltipComponent = Tooltip,\n    hasTooltip = false,\n    TooltipProps,\n    tooltipText,\n    IconProps,\n    className,\n    status = \"info\",\n    ...restProps\n  } = props;\n\n  const { getTriggerProps, getTooltipProps } = useTooltip({\n    placement: \"top\",\n    disabled: !hasTooltip,\n  });\n\n  return (\n    <>\n      <TooltipComponent\n        {...getTooltipProps({\n          hideIcon: true,\n          status,\n          title: tooltipText,\n          ...TooltipProps,\n        })}\n      />\n      <BaseStatusIndicator\n        {...getTriggerProps<typeof BaseStatusIndicator>({\n          status,\n          ...restProps,\n          ...IconProps,\n          className: cx(\n            withBaseName(\"statusIndicator\"),\n            className,\n            IconProps?.className\n          ),\n        })}\n      />\n    </>\n  );\n};\n"],"names":["makePrefixer","Tooltip","TooltipProps","IconProps","useTooltip","jsxs","Fragment","jsx","BaseStatusIndicator","cx"],"mappings":";;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAapC,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA;AAAA,IACJ,gBAAmB,GAAAC,eAAA;AAAA,IACnB,UAAa,GAAA,KAAA;AAAA,IACb,YAAAC,EAAAA,aAAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAAC,EAAAA,UAAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAS,GAAA,MAAA;AAAA,IACN,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,eAAA,EAAiB,eAAgB,EAAA,GAAIC,qBAAW,CAAA;AAAA,IACtD,SAAW,EAAA,KAAA;AAAA,IACX,UAAU,CAAC,UAAA;AAAA,GACZ,CAAA,CAAA;AAED,EACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAA,gBAAA,EAAA;AAAA,QACE,GAAG,eAAgB,CAAA;AAAA,UAClB,QAAU,EAAA,IAAA;AAAA,UACV,MAAA;AAAA,UACA,KAAO,EAAA,WAAA;AAAA,UACP,GAAGL,aAAAA;AAAA,SACJ,CAAA;AAAA,OACH,CAAA;AAAA,sBACCK,cAAA,CAAAC,oBAAA,EAAA;AAAA,QACE,GAAG,eAA4C,CAAA;AAAA,UAC9C,MAAA;AAAA,UACA,GAAG,SAAA;AAAA,UACH,GAAGL,UAAAA;AAAA,UACH,SAAW,EAAAM,sBAAA;AAAA,YACT,aAAa,iBAAiB,CAAA;AAAA,YAC9B,SAAA;AAAA,YACAN,UAAAA,IAAA,gBAAAA,UAAW,CAAA,SAAA;AAAA,WACb;AAAA,SACD,CAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"StatusIndicator.js","sources":["../src/form-field/StatusIndicator.tsx"],"sourcesContent":["import { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ElementType } from \"react\";\nimport {\n  StatusIndicator as BaseStatusIndicator,\n  makePrefixer,\n} from \"@salt-ds/core\";\nimport { Tooltip, TooltipProps, useTooltip } from \"../tooltip\";\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport type StatusIndicatorStatus = \"error\" | \"info\" | \"warning\" | \"success\";\n\nexport interface StatusIndicatorProps extends IconProps {\n  hasTooltip?: boolean;\n  IconProps?: Partial<IconProps>;\n  status?: StatusIndicatorStatus;\n  TooltipComponent?: ElementType<TooltipProps>;\n  TooltipProps?: Partial<TooltipProps>;\n  tooltipText?: string;\n}\n\nexport const StatusIndicator = (props: StatusIndicatorProps) => {\n  const {\n    TooltipComponent = Tooltip,\n    hasTooltip = false,\n    TooltipProps,\n    tooltipText,\n    IconProps,\n    className,\n    status = \"info\",\n    ...restProps\n  } = props;\n\n  const { getTriggerProps, getTooltipProps } = useTooltip({\n    placement: \"top\",\n    disabled: !hasTooltip,\n  });\n\n  return (\n    <>\n      <TooltipComponent\n        {...getTooltipProps({\n          hideIcon: true,\n          status,\n          title: tooltipText,\n          ...TooltipProps,\n        })}\n      />\n      <BaseStatusIndicator\n        {...getTriggerProps<typeof BaseStatusIndicator>({\n          status,\n          ...restProps,\n          ...IconProps,\n          className: clsx(\n            withBaseName(\"statusIndicator\"),\n            className,\n            IconProps?.className\n          ),\n        })}\n      />\n    </>\n  );\n};\n"],"names":["makePrefixer","Tooltip","TooltipProps","IconProps","useTooltip","jsxs","Fragment","jsx","BaseStatusIndicator","clsx"],"mappings":";;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAapC,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA;AAAA,IACJ,gBAAmB,GAAAC,eAAA;AAAA,IACnB,UAAa,GAAA,KAAA;AAAA,IACb,YAAAC,EAAAA,aAAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAAC,EAAAA,UAAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAS,GAAA,MAAA;AAAA,IACN,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,eAAA,EAAiB,eAAgB,EAAA,GAAIC,qBAAW,CAAA;AAAA,IACtD,SAAW,EAAA,KAAA;AAAA,IACX,UAAU,CAAC,UAAA;AAAA,GACZ,CAAA,CAAA;AAED,EACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAA,gBAAA,EAAA;AAAA,QACE,GAAG,eAAgB,CAAA;AAAA,UAClB,QAAU,EAAA,IAAA;AAAA,UACV,MAAA;AAAA,UACA,KAAO,EAAA,WAAA;AAAA,UACP,GAAGL,aAAAA;AAAA,SACJ,CAAA;AAAA,OACH,CAAA;AAAA,sBACCK,cAAA,CAAAC,oBAAA,EAAA;AAAA,QACE,GAAG,eAA4C,CAAA;AAAA,UAC9C,MAAA;AAAA,UACA,GAAG,SAAA;AAAA,UACH,GAAGL,UAAAA;AAAA,UACH,SAAW,EAAAM,SAAA;AAAA,YACT,aAAa,iBAAiB,CAAA;AAAA,YAC9B,SAAA;AAAA,YACAN,UAAAA,IAAA,gBAAAA,UAAW,CAAA,SAAA;AAAA,WACb;AAAA,SACD,CAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/packages/lab/src/form-group/FormGroup.js

@@ -4,18 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var cx = require('classnames');
+var clsx = require('clsx');
 require('./FormGroup.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const baseName = "saltFormGroup";
 const FormGroup = React.forwardRef(
   function FormGroup2({ className, row, ...other }, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: cx__default["default"](baseName, { [`${baseName}-row`]: row }, className),
+      className: clsx.clsx(baseName, { [`${baseName}-row`]: row }, className),
       ref,
       ...other
     });

package/dist-cjs/packages/lab/src/form-group/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","sources":["../src/form-group/FormGroup.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport cx from \"classnames\";\n\nimport \"./FormGroup.css\";\n\nexport interface FormGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Display group of elements in a compact row.\n   */\n  row?: boolean;\n}\n\nconst baseName = \"saltFormGroup\";\n\nexport const FormGroup = forwardRef<HTMLDivElement, FormGroupProps>(\n  function FormGroup({ className, row, ...other }, ref) {\n    return (\n      <div\n        className={cx(baseName, { [`${baseName}-row`]: row }, className)}\n        ref={ref}\n        {...other}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","FormGroup","jsx","cx"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,QAAW,GAAA,eAAA,CAAA;AAEV,MAAM,SAAY,GAAAA,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,EAAE,WAAW,GAAQ,EAAA,GAAA,KAAA,IAAS,GAAK,EAAA;AACpD,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAWC,uBAAG,QAAU,EAAA,EAAE,CAAC,CAAG,EAAA,QAAA,CAAA,IAAA,CAAA,GAAiB,GAAI,EAAA,EAAG,SAAS,CAAA;AAAA,MAC/D,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"FormGroup.js","sources":["../src/form-group/FormGroup.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport \"./FormGroup.css\";\n\nexport interface FormGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Display group of elements in a compact row.\n   */\n  row?: boolean;\n}\n\nconst baseName = \"saltFormGroup\";\n\nexport const FormGroup = forwardRef<HTMLDivElement, FormGroupProps>(\n  function FormGroup({ className, row, ...other }, ref) {\n    return (\n      <div\n        className={clsx(baseName, { [`${baseName}-row`]: row }, className)}\n        ref={ref}\n        {...other}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","FormGroup","jsx","clsx"],"mappings":";;;;;;;;;AAYA,MAAM,QAAW,GAAA,eAAA,CAAA;AAEV,MAAM,SAAY,GAAAA,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,EAAE,WAAW,GAAQ,EAAA,GAAA,KAAA,IAAS,GAAK,EAAA;AACpD,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAWC,UAAK,QAAU,EAAA,EAAE,CAAC,CAAG,EAAA,QAAA,CAAA,IAAA,CAAA,GAAiB,GAAI,EAAA,EAAG,SAAS,CAAA;AAAA,MACjE,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/formatted-input/FormattedInput.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var cx = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var rifm = require('rifm');
 var core = require('@salt-ds/core');
@@ -12,10 +12,6 @@ require('../input/StaticInputAdornment.js');
 var InputWithMask = require('./internal/InputWithMask.js');
 require('./FormattedInput.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const defaultFormatter = (string) => string;
 const defaultRifmOptions = {};
 const FormattedInput = React.forwardRef(
@@ -53,7 +49,7 @@ const FormattedInput = React.forwardRef(
       onChange: handleChange
     });
     return /* @__PURE__ */ jsxRuntime.jsx(Input.Input, {
-      className: cx__default["default"](InputWithMask.baseName, className),
+      className: clsx.clsx(InputWithMask.baseName, className),
       inputComponent: InputWithMask.InputWithMask,
       inputProps: { mask, textAlign, ...inputProps },
       onChange: rifm$1.onChange,

package/dist-cjs/packages/lab/src/formatted-input/FormattedInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormattedInput.js","sources":["../src/formatted-input/FormattedInput.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { forwardRef } from \"react\";\nimport { useRifm } from \"rifm\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { Input, InputProps } from \"../input\";\nimport {\n  baseName,\n  InputWithMask,\n  InputWithMaskProps,\n} from \"./internal/InputWithMask\";\n\nimport \"./FormattedInput.css\";\n\nexport type MaskFunction = (value: string | undefined) => boolean;\n\nexport interface RifmOptions {\n  format?: (str: string) => string;\n  replace?: (str: string) => string;\n  append?: (str: string) => string;\n  mask?: boolean | MaskFunction;\n  accept?: RegExp;\n}\n\nexport interface FormattedInputProps extends Omit<InputProps, \"onChange\"> {\n  mask?: string;\n  onChange?: (value: string) => void;\n  rifmOptions?: RifmOptions;\n  value?: string;\n  defaultValue?: string;\n}\n\nconst defaultFormatter = (string: string): string => string;\nconst defaultRifmOptions: RifmOptions = {};\n\nexport const FormattedInput = forwardRef<HTMLInputElement, FormattedInputProps>(\n  function FormattedInput(\n    {\n      defaultValue = \"\",\n      className,\n      inputProps,\n      mask,\n      onChange,\n      rifmOptions = defaultRifmOptions,\n      value: valueProp,\n      textAlign,\n      ...other\n    },\n    ref\n  ) {\n    const [valueState, setValueState] = useControlled<string | undefined>({\n      default: defaultValue,\n      controlled: valueProp,\n      name: \"FormattedInput\",\n      state: \"value\",\n    });\n\n    const handleChange = (value: string) => {\n      setValueState(value);\n      onChange?.(value);\n    };\n\n    let rifmMask = false;\n\n    if (rifmOptions.mask) {\n      rifmMask =\n        typeof rifmOptions.mask === \"function\"\n          ? rifmOptions.mask(valueState)\n          : rifmOptions.mask;\n    }\n\n    const rifm = useRifm({\n      format: defaultFormatter,\n      accept: /.*/,\n      ...rifmOptions,\n      mask: rifmMask,\n      value: valueState || \"\",\n      onChange: handleChange,\n    });\n\n    return (\n      <Input\n        className={cx(baseName, className)}\n        inputComponent={InputWithMask}\n        inputProps={{ mask, textAlign, ...inputProps } as InputWithMaskProps}\n        onChange={rifm.onChange}\n        textAlign={textAlign}\n        value={rifm.value}\n        {...other}\n        ref={ref}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","FormattedInput","useControlled","rifm","useRifm","jsx","Input","cx","baseName","InputWithMask"],"mappings":";;;;;;;;;;;;;;;;;;AA+BA,MAAM,gBAAA,GAAmB,CAAC,MAA2B,KAAA,MAAA,CAAA;AACrD,MAAM,qBAAkC,EAAC,CAAA;AAElC,MAAM,cAAiB,GAAAA,gBAAA;AAAA,EAC5B,SAASC,eACP,CAAA;AAAA,IACE,YAAe,GAAA,EAAA;AAAA,IACf,SAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,kBAAA;AAAA,IACd,KAAO,EAAA,SAAA;AAAA,IACP,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,kBAAkC,CAAA;AAAA,MACpE,OAAS,EAAA,YAAA;AAAA,MACT,UAAY,EAAA,SAAA;AAAA,MACZ,IAAM,EAAA,gBAAA;AAAA,MACN,KAAO,EAAA,OAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,YAAA,GAAe,CAAC,KAAkB,KAAA;AACtC,MAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AACnB,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IAAA,IAAI,QAAW,GAAA,KAAA,CAAA;AAEf,IAAA,IAAI,YAAY,IAAM,EAAA;AACpB,MACE,QAAA,GAAA,OAAO,YAAY,IAAS,KAAA,UAAA,GACxB,YAAY,IAAK,CAAA,UAAU,IAC3B,WAAY,CAAA,IAAA,CAAA;AAAA,KACpB;AAEA,IAAA,MAAMC,SAAOC,YAAQ,CAAA;AAAA,MACnB,MAAQ,EAAA,gBAAA;AAAA,MACR,MAAQ,EAAA,IAAA;AAAA,MACR,GAAG,WAAA;AAAA,MACH,IAAM,EAAA,QAAA;AAAA,MACN,OAAO,UAAc,IAAA,EAAA;AAAA,MACrB,QAAU,EAAA,YAAA;AAAA,KACX,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAAC,WAAA,EAAA;AAAA,MACC,SAAA,EAAWC,sBAAG,CAAAC,sBAAA,EAAU,SAAS,CAAA;AAAA,MACjC,cAAgB,EAAAC,2BAAA;AAAA,MAChB,UAAY,EAAA,EAAE,IAAM,EAAA,SAAA,EAAW,GAAG,UAAW,EAAA;AAAA,MAC7C,UAAUN,MAAK,CAAA,QAAA;AAAA,MACf,SAAA;AAAA,MACA,OAAOA,MAAK,CAAA,KAAA;AAAA,MACX,GAAG,KAAA;AAAA,MACJ,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"FormattedInput.js","sources":["../src/formatted-input/FormattedInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useRifm } from \"rifm\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { Input, InputProps } from \"../input\";\nimport {\n  baseName,\n  InputWithMask,\n  InputWithMaskProps,\n} from \"./internal/InputWithMask\";\n\nimport \"./FormattedInput.css\";\n\nexport type MaskFunction = (value: string | undefined) => boolean;\n\nexport interface RifmOptions {\n  format?: (str: string) => string;\n  replace?: (str: string) => string;\n  append?: (str: string) => string;\n  mask?: boolean | MaskFunction;\n  accept?: RegExp;\n}\n\nexport interface FormattedInputProps extends Omit<InputProps, \"onChange\"> {\n  mask?: string;\n  onChange?: (value: string) => void;\n  rifmOptions?: RifmOptions;\n  value?: string;\n  defaultValue?: string;\n}\n\nconst defaultFormatter = (string: string): string => string;\nconst defaultRifmOptions: RifmOptions = {};\n\nexport const FormattedInput = forwardRef<HTMLInputElement, FormattedInputProps>(\n  function FormattedInput(\n    {\n      defaultValue = \"\",\n      className,\n      inputProps,\n      mask,\n      onChange,\n      rifmOptions = defaultRifmOptions,\n      value: valueProp,\n      textAlign,\n      ...other\n    },\n    ref\n  ) {\n    const [valueState, setValueState] = useControlled<string | undefined>({\n      default: defaultValue,\n      controlled: valueProp,\n      name: \"FormattedInput\",\n      state: \"value\",\n    });\n\n    const handleChange = (value: string) => {\n      setValueState(value);\n      onChange?.(value);\n    };\n\n    let rifmMask = false;\n\n    if (rifmOptions.mask) {\n      rifmMask =\n        typeof rifmOptions.mask === \"function\"\n          ? rifmOptions.mask(valueState)\n          : rifmOptions.mask;\n    }\n\n    const rifm = useRifm({\n      format: defaultFormatter,\n      accept: /.*/,\n      ...rifmOptions,\n      mask: rifmMask,\n      value: valueState || \"\",\n      onChange: handleChange,\n    });\n\n    return (\n      <Input\n        className={clsx(baseName, className)}\n        inputComponent={InputWithMask}\n        inputProps={{ mask, textAlign, ...inputProps } as InputWithMaskProps}\n        onChange={rifm.onChange}\n        textAlign={textAlign}\n        value={rifm.value}\n        {...other}\n        ref={ref}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","FormattedInput","useControlled","rifm","useRifm","jsx","Input","clsx","baseName","InputWithMask"],"mappings":";;;;;;;;;;;;;;AA+BA,MAAM,gBAAA,GAAmB,CAAC,MAA2B,KAAA,MAAA,CAAA;AACrD,MAAM,qBAAkC,EAAC,CAAA;AAElC,MAAM,cAAiB,GAAAA,gBAAA;AAAA,EAC5B,SAASC,eACP,CAAA;AAAA,IACE,YAAe,GAAA,EAAA;AAAA,IACf,SAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,kBAAA;AAAA,IACd,KAAO,EAAA,SAAA;AAAA,IACP,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,kBAAkC,CAAA;AAAA,MACpE,OAAS,EAAA,YAAA;AAAA,MACT,UAAY,EAAA,SAAA;AAAA,MACZ,IAAM,EAAA,gBAAA;AAAA,MACN,KAAO,EAAA,OAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,YAAA,GAAe,CAAC,KAAkB,KAAA;AACtC,MAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AACnB,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IAAA,IAAI,QAAW,GAAA,KAAA,CAAA;AAEf,IAAA,IAAI,YAAY,IAAM,EAAA;AACpB,MACE,QAAA,GAAA,OAAO,YAAY,IAAS,KAAA,UAAA,GACxB,YAAY,IAAK,CAAA,UAAU,IAC3B,WAAY,CAAA,IAAA,CAAA;AAAA,KACpB;AAEA,IAAA,MAAMC,SAAOC,YAAQ,CAAA;AAAA,MACnB,MAAQ,EAAA,gBAAA;AAAA,MACR,MAAQ,EAAA,IAAA;AAAA,MACR,GAAG,WAAA;AAAA,MACH,IAAM,EAAA,QAAA;AAAA,MACN,OAAO,UAAc,IAAA,EAAA;AAAA,MACrB,QAAU,EAAA,YAAA;AAAA,KACX,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAAC,WAAA,EAAA;AAAA,MACC,SAAA,EAAWC,SAAK,CAAAC,sBAAA,EAAU,SAAS,CAAA;AAAA,MACnC,cAAgB,EAAAC,2BAAA;AAAA,MAChB,UAAY,EAAA,EAAE,IAAM,EAAA,SAAA,EAAW,GAAG,UAAW,EAAA;AAAA,MAC7C,UAAUN,MAAK,CAAA,QAAA;AAAA,MACf,SAAA;AAAA,MACA,OAAOA,MAAK,CAAA,KAAA;AAAA,MACX,GAAG,KAAA;AAAA,MACJ,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/formatted-input/internal/InputWithMask.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var cx = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const baseName = "saltFormattedInput";
 function getClippedMask(mask, value, textAlign) {
   if (mask) {
@@ -57,7 +53,7 @@ const InputWithMask = React.forwardRef(
         }),
         /* @__PURE__ */ jsxRuntime.jsx("span", {
           "aria-hidden": "true",
-          className: cx__default["default"](`${baseName}-mask`, className),
+          className: clsx.clsx(`${baseName}-mask`, className),
           style,
           children: textAlign !== "right" ? spacerAndMask : spacerAndMask.reverse()
         })

package/dist-cjs/packages/lab/src/formatted-input/internal/InputWithMask.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputWithMask.js","sources":["../src/formatted-input/internal/InputWithMask.tsx"],"sourcesContent":["import { useId } from \"@salt-ds/core\";\nimport cx from \"classnames\";\nimport { forwardRef, InputHTMLAttributes } from \"react\";\nimport { FormattedInputProps } from \"../FormattedInput\";\n\nexport const baseName = \"saltFormattedInput\";\n\nfunction getClippedMask(\n  mask: FormattedInputProps[\"mask\"],\n  value: FormattedInputProps[\"value\"],\n  textAlign: FormattedInputProps[\"textAlign\"]\n) {\n  if (mask) {\n    if (textAlign === \"right\") {\n      return mask.substring(\n        0,\n        value ? mask.length - value.length : mask.length\n      );\n    }\n\n    return mask.substring(value ? value.length : 0);\n  }\n  return \"\";\n}\n\nexport interface InputWithMaskProps\n  extends InputHTMLAttributes<HTMLInputElement> {\n  mask?: FormattedInputProps[\"mask\"];\n  textAlign?: FormattedInputProps[\"textAlign\"];\n  value?: FormattedInputProps[\"value\"];\n}\n\nexport const InputWithMask = forwardRef<HTMLInputElement, InputWithMaskProps>(\n  function InputWithMask(\n    {\n      \"aria-labelledby\": ariaLabelledBy,\n      className,\n      mask = \"\",\n      value,\n      id: idProp,\n      style,\n      textAlign,\n      ...other\n    },\n    ref\n  ) {\n    const id = useId(idProp);\n\n    const spacerAndMask = [\n      <i key={value}>{value}</i>,\n      getClippedMask(mask, value, textAlign),\n    ];\n\n    return (\n      <div className={`${baseName}-inputWrapper`}>\n        <input\n          className={className}\n          {...other}\n          aria-label={mask}\n          aria-labelledby={[ariaLabelledBy, id]\n            .filter((label) => label != null)\n            .join(\" \")}\n          id={id}\n          ref={ref}\n          style={style}\n          value={value}\n        />\n        <span\n          aria-hidden=\"true\"\n          className={cx(`${baseName}-mask`, className)}\n          style={style}\n        >\n          {textAlign !== \"right\" ? spacerAndMask : spacerAndMask.reverse()}\n        </span>\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","InputWithMask","useId","jsx","jsxs","cx"],"mappings":";;;;;;;;;;;;;AAKO,MAAM,QAAW,GAAA,qBAAA;AAExB,SAAS,cAAA,CACP,IACA,EAAA,KAAA,EACA,SACA,EAAA;AACA,EAAA,IAAI,IAAM,EAAA;AACR,IAAA,IAAI,cAAc,OAAS,EAAA;AACzB,MAAA,OAAO,IAAK,CAAA,SAAA;AAAA,QACV,CAAA;AAAA,QACA,KAAQ,GAAA,IAAA,CAAK,MAAS,GAAA,KAAA,CAAM,SAAS,IAAK,CAAA,MAAA;AAAA,OAC5C,CAAA;AAAA,KACF;AAEA,IAAA,OAAO,IAAK,CAAA,SAAA,CAAU,KAAQ,GAAA,KAAA,CAAM,SAAS,CAAC,CAAA,CAAA;AAAA,GAChD;AACA,EAAO,OAAA,EAAA,CAAA;AACT,CAAA;AASO,MAAM,aAAgB,GAAAA,gBAAA;AAAA,EAC3B,SAASC,cACP,CAAA;AAAA,IACE,iBAAmB,EAAA,cAAA;AAAA,IACnB,SAAA;AAAA,IACA,IAAO,GAAA,EAAA;AAAA,IACP,KAAA;AAAA,IACA,EAAI,EAAA,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA,CAAA;AAEvB,IAAA,MAAM,aAAgB,GAAA;AAAA,sBACnBC,cAAA,CAAA,GAAA,EAAA;AAAA,QAAe,QAAA,EAAA,KAAA;AAAA,OAAA,EAAR,KAAc,CAAA;AAAA,MACtB,cAAA,CAAe,IAAM,EAAA,KAAA,EAAO,SAAS,CAAA;AAAA,KACvC,CAAA;AAEA,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,WAAW,CAAG,EAAA,QAAA,CAAA,aAAA,CAAA;AAAA,MACjB,QAAA,EAAA;AAAA,wBAACD,cAAA,CAAA,OAAA,EAAA;AAAA,UACC,SAAA;AAAA,UACC,GAAG,KAAA;AAAA,UACJ,YAAY,EAAA,IAAA;AAAA,UACZ,iBAAiB,EAAA,CAAC,cAAgB,EAAA,EAAE,CACjC,CAAA,MAAA,CAAO,CAAC,KAAA,KAAU,KAAS,IAAA,IAAI,CAC/B,CAAA,IAAA,CAAK,GAAG,CAAA;AAAA,UACX,EAAA;AAAA,UACA,GAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAA;AAAA,SACF,CAAA;AAAA,wBACCA,cAAA,CAAA,MAAA,EAAA;AAAA,UACC,aAAY,EAAA,MAAA;AAAA,UACZ,SAAW,EAAAE,sBAAA,CAAG,CAAG,EAAA,QAAA,CAAA,KAAA,CAAA,EAAiB,SAAS,CAAA;AAAA,UAC3C,KAAA;AAAA,UAEC,QAAc,EAAA,SAAA,KAAA,OAAA,GAAU,aAAgB,GAAA,aAAA,CAAc,OAAQ,EAAA;AAAA,SACjE,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}
+{"version":3,"file":"InputWithMask.js","sources":["../src/formatted-input/internal/InputWithMask.tsx"],"sourcesContent":["import { useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, InputHTMLAttributes } from \"react\";\nimport { FormattedInputProps } from \"../FormattedInput\";\n\nexport const baseName = \"saltFormattedInput\";\n\nfunction getClippedMask(\n  mask: FormattedInputProps[\"mask\"],\n  value: FormattedInputProps[\"value\"],\n  textAlign: FormattedInputProps[\"textAlign\"]\n) {\n  if (mask) {\n    if (textAlign === \"right\") {\n      return mask.substring(\n        0,\n        value ? mask.length - value.length : mask.length\n      );\n    }\n\n    return mask.substring(value ? value.length : 0);\n  }\n  return \"\";\n}\n\nexport interface InputWithMaskProps\n  extends InputHTMLAttributes<HTMLInputElement> {\n  mask?: FormattedInputProps[\"mask\"];\n  textAlign?: FormattedInputProps[\"textAlign\"];\n  value?: FormattedInputProps[\"value\"];\n}\n\nexport const InputWithMask = forwardRef<HTMLInputElement, InputWithMaskProps>(\n  function InputWithMask(\n    {\n      \"aria-labelledby\": ariaLabelledBy,\n      className,\n      mask = \"\",\n      value,\n      id: idProp,\n      style,\n      textAlign,\n      ...other\n    },\n    ref\n  ) {\n    const id = useId(idProp);\n\n    const spacerAndMask = [\n      <i key={value}>{value}</i>,\n      getClippedMask(mask, value, textAlign),\n    ];\n\n    return (\n      <div className={`${baseName}-inputWrapper`}>\n        <input\n          className={className}\n          {...other}\n          aria-label={mask}\n          aria-labelledby={[ariaLabelledBy, id]\n            .filter((label) => label != null)\n            .join(\" \")}\n          id={id}\n          ref={ref}\n          style={style}\n          value={value}\n        />\n        <span\n          aria-hidden=\"true\"\n          className={clsx(`${baseName}-mask`, className)}\n          style={style}\n        >\n          {textAlign !== \"right\" ? spacerAndMask : spacerAndMask.reverse()}\n        </span>\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","InputWithMask","useId","jsx","jsxs","clsx"],"mappings":";;;;;;;;;AAKO,MAAM,QAAW,GAAA,qBAAA;AAExB,SAAS,cAAA,CACP,IACA,EAAA,KAAA,EACA,SACA,EAAA;AACA,EAAA,IAAI,IAAM,EAAA;AACR,IAAA,IAAI,cAAc,OAAS,EAAA;AACzB,MAAA,OAAO,IAAK,CAAA,SAAA;AAAA,QACV,CAAA;AAAA,QACA,KAAQ,GAAA,IAAA,CAAK,MAAS,GAAA,KAAA,CAAM,SAAS,IAAK,CAAA,MAAA;AAAA,OAC5C,CAAA;AAAA,KACF;AAEA,IAAA,OAAO,IAAK,CAAA,SAAA,CAAU,KAAQ,GAAA,KAAA,CAAM,SAAS,CAAC,CAAA,CAAA;AAAA,GAChD;AACA,EAAO,OAAA,EAAA,CAAA;AACT,CAAA;AASO,MAAM,aAAgB,GAAAA,gBAAA;AAAA,EAC3B,SAASC,cACP,CAAA;AAAA,IACE,iBAAmB,EAAA,cAAA;AAAA,IACnB,SAAA;AAAA,IACA,IAAO,GAAA,EAAA;AAAA,IACP,KAAA;AAAA,IACA,EAAI,EAAA,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA,CAAA;AAEvB,IAAA,MAAM,aAAgB,GAAA;AAAA,sBACnBC,cAAA,CAAA,GAAA,EAAA;AAAA,QAAe,QAAA,EAAA,KAAA;AAAA,OAAA,EAAR,KAAc,CAAA;AAAA,MACtB,cAAA,CAAe,IAAM,EAAA,KAAA,EAAO,SAAS,CAAA;AAAA,KACvC,CAAA;AAEA,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,WAAW,CAAG,EAAA,QAAA,CAAA,aAAA,CAAA;AAAA,MACjB,QAAA,EAAA;AAAA,wBAACD,cAAA,CAAA,OAAA,EAAA;AAAA,UACC,SAAA;AAAA,UACC,GAAG,KAAA;AAAA,UACJ,YAAY,EAAA,IAAA;AAAA,UACZ,iBAAiB,EAAA,CAAC,cAAgB,EAAA,EAAE,CACjC,CAAA,MAAA,CAAO,CAAC,KAAA,KAAU,KAAS,IAAA,IAAI,CAC/B,CAAA,IAAA,CAAK,GAAG,CAAA;AAAA,UACX,EAAA;AAAA,UACA,GAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAA;AAAA,SACF,CAAA;AAAA,wBACCA,cAAA,CAAA,MAAA,EAAA;AAAA,UACC,aAAY,EAAA,MAAA;AAAA,UACZ,SAAW,EAAAE,SAAA,CAAK,CAAG,EAAA,QAAA,CAAA,KAAA,CAAA,EAAiB,SAAS,CAAA;AAAA,UAC7C,KAAA;AAAA,UAEC,QAAc,EAAA,SAAA,KAAA,OAAA,GAAU,aAAgB,GAAA,aAAA,CAAc,OAAQ,EAAA;AAAA,SACjE,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}

package/dist-cjs/packages/lab/src/index.js

@@ -41,7 +41,6 @@ var Calendar = require('./calendar/Calendar.js');
 var useCalendarDay = require('./calendar/useCalendarDay.js');
 var useCalendar = require('./calendar/useCalendar.js');
 var useSelection = require('./calendar/useSelection.js');
-var Card = require('./card/Card.js');
 var Carousel = require('./carousel/Carousel.js');
 var CarouselSlide = require('./carousel/CarouselSlide.js');
 var CascadingMenu = require('./cascading-menu/CascadingMenu.js');
@@ -115,7 +114,6 @@ var useOverlay = require('./overlay/useOverlay.js');
 var Pagination = require('./pagination/Pagination.js');
 var Paginator = require('./pagination/Paginator.js');
 var GoToInput = require('./pagination/GoToInput.js');
-var Panel = require('./panel/Panel.js');
 var ParentChildItem = require('./parent-child-item/ParentChildItem.js');
 var ParentChildLayout = require('./parent-child-layout/ParentChildLayout.js');
 var Pill = require('./pill/Pill.js');
@@ -210,7 +208,6 @@ exports.useCalendarDay = useCalendarDay.useCalendarDay;
 exports.useCalendar = useCalendar.useCalendar;
 exports.useSelectionCalendar = useSelection.useSelectionCalendar;
 exports.useSelectionDay = useSelection.useSelectionDay;
-exports.Card = Card.Card;
 exports.Carousel = Carousel.Carousel;
 exports.CarouselSlide = CarouselSlide.CarouselSlide;
 exports.CascadingMenu = CascadingMenu.CascadingMenu;
@@ -296,7 +293,6 @@ exports.useOverlay = useOverlay.useOverlay;
 exports.Pagination = Pagination.Pagination;
 exports.Paginator = Paginator.Paginator;
 exports.GoToInput = GoToInput.GoToInput;
-exports.Panel = Panel.Panel;
 exports.ParentChildItem = ParentChildItem.ParentChildItem;
 exports.ParentChildLayout = ParentChildLayout.ParentChildLayout;
 exports.Pill = Pill.Pill;

package/dist-cjs/packages/lab/src/index.js.map

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