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

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,23 +3,16 @@
 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');
-var Tooltip = require('../tooltip/Tooltip.js');
-require('../tooltip/TooltipContext.js');
-var useTooltip = require('../tooltip/useTooltip.js');
 var constant = require('./constant.js');
 var FormActivationIndicator = require('./FormActivationIndicator.js');
 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,
@@ -116,77 +109,67 @@ const FormField = React.forwardRef(
     const focusClass = disableFocusRing ? "lowFocused" : "focused";
     const inlineHelperText = renderHelperText && helperTextPlacement === "bottom";
     const tooltipHelperText = renderHelperText && helperTextPlacement === "tooltip" && !hasStatusIndicator;
-    const { getTooltipProps, getTriggerProps } = useTooltip.useTooltip({
-      disabled: !tooltipHelperText
-    });
-    const { ref: triggerRef, ...triggerProps } = getTriggerProps({
-      className: cx__default["default"](
-        withBaseName(),
-        {
-          [withBaseName("disabled")]: disabled,
-          [withBaseName("readOnly")]: readOnly,
-          [withBaseName("warning")]: isWarning,
-          [withBaseName("error")]: isError,
-          [withBaseName("fullWidth")]: fullWidth,
-          [withBaseName(focusClass)]: states.focused,
-          [withBaseName("labelTop")]: labelTop,
-          [withBaseName("labelLeft")]: labelLeft,
-          [withBaseName(`withHelperText`)]: inlineHelperText,
-          [withBaseName(variant)]: variant
-        },
-        className
-      ),
-      ...eventHandlers,
-      ...restProps
-    });
-    const handleTriggerRef = core.useForkRef(triggerRef, rootRef);
-    const handleRef = core.useForkRef(handleTriggerRef, ref);
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", {
-          ref: handleRef,
-          ...triggerProps,
-          children: /* @__PURE__ */ jsxRuntime.jsxs(FormFieldContext.FormFieldContext.Provider, {
-            value: {
-              ...states,
-              ...dispatchers,
-              ...eventHandlers,
-              a11yProps: a11yValue,
-              inFormField: true,
-              ref: rootRef
-            },
-            children: [
-              hasLabel && /* @__PURE__ */ jsxRuntime.jsx(LabelComponent, {
-                ...LabelProps,
-                validationStatus,
-                hasStatusIndicator,
-                StatusIndicatorProps: StatusIndicatorProps2,
-                className: LabelProps.className,
-                label,
-                disabled,
-                readOnly,
-                required,
-                tooltipText: helperText,
-                id: labelId
-              }),
-              children,
-              /* @__PURE__ */ jsxRuntime.jsx(ActivationIndicatorComponent, {
-                hasIcon: !hasStatusIndicator,
-                validationStatus
-              }),
-              renderHelperText && /* @__PURE__ */ jsxRuntime.jsx(HelperTextComponent, {
-                helperText,
-                helperTextPlacement,
-                ...HelperTextProps,
-                id: helperTextId
-              })
-            ]
-          })
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
-          ...getTooltipProps({ title: helperText })
+    const handleTriggerRef = core.useForkRef(rootRef, ref);
+    return /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, {
+      disabled: !tooltipHelperText,
+      content: helperText,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+        ref: handleTriggerRef,
+        className: clsx.clsx(
+          withBaseName(),
+          {
+            [withBaseName("disabled")]: disabled,
+            [withBaseName("readOnly")]: readOnly,
+            [withBaseName("warning")]: isWarning,
+            [withBaseName("error")]: isError,
+            [withBaseName("fullWidth")]: fullWidth,
+            [withBaseName(focusClass)]: states.focused,
+            [withBaseName("labelTop")]: labelTop,
+            [withBaseName("labelLeft")]: labelLeft,
+            [withBaseName(`withHelperText`)]: inlineHelperText,
+            [withBaseName(variant)]: variant
+          },
+          className
+        ),
+        ...eventHandlers,
+        ...restProps,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(FormFieldContext.FormFieldContext.Provider, {
+          value: {
+            ...states,
+            ...dispatchers,
+            ...eventHandlers,
+            a11yProps: a11yValue,
+            inFormField: true,
+            ref: rootRef
+          },
+          children: [
+            hasLabel && /* @__PURE__ */ jsxRuntime.jsx(LabelComponent, {
+              ...LabelProps,
+              validationStatus,
+              hasStatusIndicator,
+              StatusIndicatorProps: StatusIndicatorProps2,
+              className: LabelProps.className,
+              label,
+              disabled,
+              readOnly,
+              required,
+              tooltipText: helperText,
+              id: labelId
+            }),
+            children,
+            /* @__PURE__ */ jsxRuntime.jsx(ActivationIndicatorComponent, {
+              hasIcon: !hasStatusIndicator,
+              validationStatus
+            }),
+            renderHelperText && /* @__PURE__ */ jsxRuntime.jsx(HelperTextComponent, {
+              helperText,
+              helperTextPlacement,
+              ...HelperTextProps,
+              id: helperTextId
+            })
+          ]
         })
-      ]
+      })
     });
   }
 );

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, Tooltip, useForkRef, useId } from \"@salt-ds/core\";\nimport { FormFieldContext } from \"../form-field-context\";\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 handleTriggerRef = useForkRef(rootRef, ref);\n\n    return (\n      <Tooltip disabled={!tooltipHelperText} content={helperText}>\n        <div\n          ref={handleTriggerRef}\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          <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>\n    );\n  }\n);\n"],"names":["useMemo","useState","makePrefixer","classBase","forwardRef","FormActivationIndicator","FormHelperText","FormLabel","StatusIndicatorProps","useId","useRef","useForkRef","jsx","Tooltip","clsx","jsxs","FormFieldContext"],"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,20 +3,13 @@
 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 {
-    TooltipComponent = Tooltip.Tooltip,
+    TooltipComponent = core.Tooltip,
     hasTooltip = false,
     TooltipProps: TooltipProps2,
     tooltipText,
@@ -25,33 +18,23 @@ const StatusIndicator = (props) => {
     status = "info",
     ...restProps
   } = props;
-  const { getTriggerProps, getTooltipProps } = useTooltip.useTooltip({
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipComponent, {
+    hideIcon: true,
+    status,
+    content: tooltipText,
     placement: "top",
-    disabled: !hasTooltip
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipComponent, {
-        ...getTooltipProps({
-          hideIcon: true,
-          status,
-          title: tooltipText,
-          ...TooltipProps2
-        })
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx(core.StatusIndicator, {
-        ...getTriggerProps({
-          status,
-          ...restProps,
-          ...IconProps2,
-          className: cx__default["default"](
-            withBaseName("statusIndicator"),
-            className,
-            IconProps2 == null ? void 0 : IconProps2.className
-          )
-        })
-      })
-    ]
+    disabled: !hasTooltip,
+    ...TooltipProps2,
+    children: /* @__PURE__ */ jsxRuntime.jsx(core.StatusIndicator, {
+      status,
+      ...restProps,
+      ...IconProps2,
+      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  makePrefixer,\n  StatusIndicator as BaseStatusIndicator,\n  Tooltip,\n  TooltipProps,\n} from \"@salt-ds/core\";\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  return (\n    <TooltipComponent\n      hideIcon\n      status={status}\n      content={tooltipText}\n      placement=\"top\"\n      disabled={!hasTooltip}\n      {...TooltipProps}\n    >\n      <BaseStatusIndicator\n        status={status}\n        {...restProps}\n        {...IconProps}\n        className={clsx(\n          withBaseName(\"statusIndicator\"),\n          className,\n          IconProps?.className\n        )}\n      />\n    </TooltipComponent>\n  );\n};\n"],"names":["makePrefixer","Tooltip","TooltipProps","IconProps","jsx","BaseStatusIndicator","clsx"],"mappings":";;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAapC,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA;AAAA,IACJ,gBAAmB,GAAAC,YAAA;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,uBACGC,cAAA,CAAA,gBAAA,EAAA;AAAA,IACC,QAAQ,EAAA,IAAA;AAAA,IACR,MAAA;AAAA,IACA,OAAS,EAAA,WAAA;AAAA,IACT,SAAU,EAAA,KAAA;AAAA,IACV,UAAU,CAAC,UAAA;AAAA,IACV,GAAGF,aAAAA;AAAA,IAEJ,QAAC,kBAAAE,cAAA,CAAAC,oBAAA,EAAA;AAAA,MACC,MAAA;AAAA,MACC,GAAG,SAAA;AAAA,MACH,GAAGF,UAAAA;AAAA,MACJ,SAAW,EAAAG,SAAA;AAAA,QACT,aAAa,iBAAiB,CAAA;AAAA,QAC9B,SAAA;AAAA,QACAH,UAAAA,IAAA,gBAAAA,UAAW,CAAA,SAAA;AAAA,OACb;AAAA,KACF,CAAA;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;;;;;"}