@simplybusiness/mobius 9.0.1 → 9.1.0

package/dist/esm/MaskedField-CX4GV6JS.js

@@ -0,0 +1,142 @@
+"use client";
+import {
+  TextField
+} from "./chunk-XUNHMVIS.js";
+
+// src/components/MaskedField/MaskedField.tsx
+import { useCallback, useEffect } from "react";
+import { useIMask } from "react-imask";
+import { jsx } from "react/jsx-runtime";
+var useAcceptHandler = (onChange, useMaskedValue, name) => {
+  return useCallback(
+    (maskedValue, maskInstance) => {
+      if (!onChange) {
+        return;
+      }
+      const formattedValue = maskedValue;
+      const rawValue = maskInstance.unmaskedValue;
+      const valueToEmit = useMaskedValue ? formattedValue : rawValue;
+      onChange({
+        target: { name, value: valueToEmit }
+      });
+    },
+    [onChange, useMaskedValue, name]
+  );
+};
+var useCombinedRef = (imaskRef, forwardedRef) => {
+  return useCallback(
+    (element) => {
+      imaskRef.current = element;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [imaskRef, forwardedRef]
+  );
+};
+var useBlurHandler = (onBlur, maskRef, useMaskedValue, name) => {
+  return useCallback(
+    (event) => {
+      if (!onBlur || !maskRef.current) {
+        return;
+      }
+      const formattedValue = maskRef.current.value;
+      const rawValue = maskRef.current.unmaskedValue;
+      const valueToEmit = useMaskedValue ? formattedValue : rawValue;
+      onBlur({
+        ...event,
+        target: { ...event.target, name, value: valueToEmit }
+      });
+    },
+    [onBlur, maskRef, useMaskedValue, name]
+  );
+};
+var ControlledMaskedField = ({
+  mask,
+  useMaskedValue = false,
+  value,
+  onChange,
+  onBlur,
+  name,
+  forwardedRef,
+  ...textFieldProps
+}) => {
+  const onAccept = useAcceptHandler(onChange, useMaskedValue, name);
+  const { ref: imaskRef, maskRef, setValue } = useIMask(mask, { onAccept });
+  const combinedRef = useCombinedRef(imaskRef, forwardedRef);
+  const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
+  useEffect(() => {
+    if (!maskRef.current) {
+      return;
+    }
+    const stringValue = value.toString();
+    const currentMasked = maskRef.current.value;
+    const currentUnmasked = maskRef.current.unmaskedValue;
+    if (currentMasked !== stringValue && currentUnmasked !== stringValue) {
+      setValue(stringValue);
+    }
+  }, [value, maskRef, setValue, imaskRef]);
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      ...textFieldProps,
+      ref: combinedRef,
+      name,
+      onBlur: handleBlur
+    }
+  );
+};
+var UncontrolledMaskedField = ({
+  mask,
+  useMaskedValue = false,
+  defaultValue,
+  onChange,
+  onBlur,
+  name,
+  forwardedRef,
+  ...textFieldProps
+}) => {
+  const onAccept = useAcceptHandler(onChange, useMaskedValue, name);
+  const { ref: imaskRef, maskRef } = useIMask(mask, { onAccept });
+  const combinedRef = useCombinedRef(imaskRef, forwardedRef);
+  const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      ...textFieldProps,
+      ref: combinedRef,
+      name,
+      onBlur: handleBlur,
+      defaultValue: defaultValue?.toString()
+    }
+  );
+};
+var MaskedField = ({ ref: forwardedRef, ...props }) => {
+  const { value, defaultValue, ...rest } = props;
+  if ("value" in props) {
+    return /* @__PURE__ */ jsx(
+      ControlledMaskedField,
+      {
+        ...rest,
+        value: value ?? "",
+        forwardedRef
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(
+      UncontrolledMaskedField,
+      {
+        ...rest,
+        defaultValue,
+        forwardedRef
+      }
+    );
+  }
+};
+MaskedField.displayName = "MaskedField";
+export {
+  MaskedField
+};
+//# sourceMappingURL=MaskedField-CX4GV6JS.js.map

package/dist/esm/MaskedField-CX4GV6JS.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/MaskedField/MaskedField.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport type { ChangeEvent, FocusEvent, Ref, RefAttributes } from \"react\";\nimport { useCallback, useEffect } from \"react\";\nimport { useIMask } from \"react-imask\";\nimport type { FactoryOpts, InputMask, InputMaskElement } from \"imask\";\nimport type { TextFieldProps } from \"../TextField\";\nimport { TextField } from \"../TextField\";\n\nexport type MaskedFieldElementType = HTMLInputElement;\n\nexport interface MaskedFieldProps\n  extends\n    Omit<TextFieldProps, \"type\" | \"ref\">,\n    RefAttributes<MaskedFieldElementType> {\n  mask: FactoryOpts;\n  \"data-testid\"?: string;\n  /**\n   * If true, onChange and onBlur events will emit the masked (formatted) value.\n   * If false (default), events will emit the unmasked (raw) value.\n   *\n   * @example\n   * // TelephoneQuestion uses useMaskedValue={true}\n   * // User types: 5551234567\n   * // onChange receives: \"(555) 123-4567\" (formatted for display/storage)\n   *\n   * @example\n   * // CurrencyQuestion uses useMaskedValue={false}\n   * // User types: 1234\n   * // User sees: \"1,234\" (with thousands separator)\n   * // onChange receives: \"1234\" (raw number for calculations)\n   */\n  useMaskedValue?: boolean;\n}\n\nexport type MaskedFieldRef = Ref<MaskedFieldElementType>;\n\n/**\n * Creates an onChange handler for IMask's onAccept callback.\n *\n * IMask calls onAccept every time the user types and the mask accepts the input.\n * This handler converts IMask's callback into a standard React onChange event.\n *\n * @param onChange - The onChange handler from parent component\n * @param useMaskedValue - Whether to emit the formatted value or raw value\n * @param name - The input's name attribute (for the synthetic event)\n *\n * @example\n * // TelephoneQuestion (US) - useMaskedValue=true\n * // User types: \"5551234567\"\n * // Emits: \"(555) 123-4567\" (formatted for display)\n * // Use case: Want to store/display the formatted phone number\n *\n * @example\n * // CurrencyQuestion - useMaskedValue=false\n * // User types: \"1234.56\"\n * // User sees: \"1,234.56\" (with formatting)\n * // Emits: \"1234.56\" (raw value for calculations)\n * // Use case: Need numeric value for backend/calculations\n */\nconst useAcceptHandler = (\n  onChange: MaskedFieldProps[\"onChange\"],\n  useMaskedValue: boolean,\n  name?: string,\n) => {\n  return useCallback(\n    (maskedValue: string, maskInstance: InputMask<FactoryOpts>) => {\n      // Exit early if no onChange handler provided\n      if (!onChange) {\n        return;\n      }\n\n      // IMask provides two values:\n      // 1. maskedValue: The formatted value user sees (e.g., \"(555) 123-4567\")\n      // 2. maskInstance.unmaskedValue: The raw value without formatting (e.g., \"5551234567\")\n      const formattedValue = maskedValue;\n      const rawValue = maskInstance.unmaskedValue;\n\n      // Choose which value to emit based on useMaskedValue prop\n      const valueToEmit = useMaskedValue ? formattedValue : rawValue;\n\n      // Create a synthetic React event that matches the standard onChange signature\n      // This allows parent components to handle it like any other input change\n      onChange({\n        target: { name, value: valueToEmit },\n      } as ChangeEvent<HTMLInputElement>);\n    },\n    [onChange, useMaskedValue, name],\n  );\n};\n\n/**\n * Creates a ref callback that forwards the input element to both IMask and the parent component.\n *\n * React allows two ways to pass refs:\n * 1. Ref callback function: (element) => { ... }\n * 2. Ref object: { current: element }\n *\n * This hook handles both cases and also ensures IMask gets the element reference it needs.\n *\n * @param imaskRef - IMask's ref (needs the element to apply masking)\n * @param forwardedRef - Parent component's ref (could be function or object)\n *\n * @example\n * // Parent uses callback ref\n * <MaskedField ref={(el) => console.log(el)} />\n *\n * @example\n * // Parent uses useRef\n * const inputRef = useRef(null);\n * <MaskedField ref={inputRef} />\n */\nconst useCombinedRef = (\n  imaskRef: React.MutableRefObject<InputMaskElement | null>,\n  forwardedRef?: MaskedFieldRef,\n) => {\n  return useCallback(\n    (element: HTMLInputElement | null) => {\n      // First, give the element to IMask so it can apply masking\n      imaskRef.current = element;\n\n      // Then forward the element to the parent component's ref\n      // Handle both callback refs and ref objects\n\n      // Case 1: Parent passed a callback ref function\n      if (typeof forwardedRef === \"function\") {\n        forwardedRef(element);\n      }\n      // Case 2: Parent passed a ref object (from useRef)\n      else if (forwardedRef) {\n        forwardedRef.current = element;\n      }\n      // Case 3: No ref was forwarded (forwardedRef is null/undefined)\n      // Do nothing - this is fine\n    },\n    [imaskRef, forwardedRef],\n  );\n};\n\n/**\n * Creates an onBlur handler that extracts the correct value from IMask.\n *\n * When the user tabs away or clicks outside the input, we need to emit\n * the current value (either formatted or raw) via the onBlur event.\n *\n * @param onBlur - The onBlur handler from parent component\n * @param maskRef - Reference to the IMask instance (provides current values)\n * @param useMaskedValue - Whether to emit the formatted value or raw value\n * @param name - The input's name attribute (for the synthetic event)\n *\n * @example\n * // TelephoneQuestion - useMaskedValue=true\n * // Input displays: \"(555) 123-4567\"\n * // onBlur emits: \"(555) 123-4567\" (formatted)\n *\n * @example\n * // CurrencyQuestion - useMaskedValue=false\n * // Input displays: \"$1,234.56\"\n * // onBlur emits: \"1234.56\" (raw for validation/submission)\n */\nconst useBlurHandler = (\n  onBlur: MaskedFieldProps[\"onBlur\"],\n  maskRef: React.MutableRefObject<InputMask<FactoryOpts> | null>,\n  useMaskedValue: boolean,\n  name?: string,\n) => {\n  return useCallback(\n    (event: FocusEvent<Element>) => {\n      // Exit early if no onBlur handler provided or mask isn't initialized\n      if (!onBlur || !maskRef.current) {\n        return;\n      }\n\n      // Extract current values from the IMask instance\n      // maskRef.current.value: The formatted value (e.g., \"(555) 123-4567\")\n      // maskRef.current.unmaskedValue: The raw value (e.g., \"5551234567\")\n      const formattedValue = maskRef.current.value;\n      const rawValue = maskRef.current.unmaskedValue;\n\n      // Choose which value to emit based on useMaskedValue prop\n      const valueToEmit = useMaskedValue ? formattedValue : rawValue;\n\n      // Create an enhanced event that preserves the original event properties\n      // but overrides the target to include our extracted value\n      onBlur({\n        ...event,\n        target: { ...event.target, name, value: valueToEmit },\n      } as FocusEvent<Element>);\n    },\n    [onBlur, maskRef, useMaskedValue, name],\n  );\n};\n\n/**\n * Controlled MaskedField - for use with value prop.\n * Syncs external value changes to IMask via useEffect.\n *\n * Use this when:\n * - The parent component manages the input state\n * - You need to programmatically update the value\n * - You need validation or transformation on every change\n */\nconst ControlledMaskedField = ({\n  mask,\n  useMaskedValue = false,\n  value,\n  onChange,\n  onBlur,\n  name,\n  forwardedRef,\n  ...textFieldProps\n}: Omit<MaskedFieldProps, \"defaultValue\"> & {\n  value: string | number;\n  forwardedRef?: MaskedFieldRef;\n}) => {\n  const onAccept = useAcceptHandler(onChange, useMaskedValue, name);\n  const { ref: imaskRef, maskRef, setValue } = useIMask(mask, { onAccept });\n\n  const combinedRef = useCombinedRef(imaskRef, forwardedRef);\n  const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);\n\n  // Sync external value changes to IMask\n  useEffect(() => {\n    if (!maskRef.current) {\n      return;\n    }\n\n    const stringValue = value.toString();\n    const currentMasked = maskRef.current.value;\n    const currentUnmasked = maskRef.current.unmaskedValue;\n\n    // Only update if value actually changed (prevents infinite loops)\n    if (currentMasked !== stringValue && currentUnmasked !== stringValue) {\n      setValue(stringValue);\n    }\n  }, [value, maskRef, setValue, imaskRef]);\n\n  return (\n    <TextField\n      {...textFieldProps}\n      ref={combinedRef}\n      name={name}\n      onBlur={handleBlur}\n    />\n  );\n};\n\n/**\n * Uncontrolled MaskedField - for use with defaultValue prop.\n * No value synchronization needed - IMask manages the value internally.\n *\n * Use this when:\n * - You only need the final value on submit\n * - You don't need to react to intermediate changes\n * - You want simpler code without state management\n */\nconst UncontrolledMaskedField = ({\n  mask,\n  useMaskedValue = false,\n  defaultValue,\n  onChange,\n  onBlur,\n  name,\n  forwardedRef,\n  ...textFieldProps\n}: Omit<MaskedFieldProps, \"value\"> & {\n  defaultValue?: string | number;\n  forwardedRef?: MaskedFieldRef;\n}) => {\n  const onAccept = useAcceptHandler(onChange, useMaskedValue, name);\n  const { ref: imaskRef, maskRef } = useIMask(mask, { onAccept });\n\n  const combinedRef = useCombinedRef(imaskRef, forwardedRef);\n  const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);\n\n  return (\n    <TextField\n      {...textFieldProps}\n      ref={combinedRef}\n      name={name}\n      onBlur={handleBlur}\n      defaultValue={defaultValue?.toString()}\n    />\n  );\n};\n\nconst MaskedField = ({ ref: forwardedRef, ...props }: MaskedFieldProps) => {\n  const { value, defaultValue, ...rest } = props;\n\n  // Check for \"value\" in props (not `value !== undefined`) to maintain consistent\n  // controlled/uncontrolled state throughout component lifetime and prevent focus loss.\n  // Example: CurrencyQuestion passes value={undefined} initially, then value={5} after typing.\n  if (\"value\" in props) {\n    return (\n      <ControlledMaskedField\n        {...rest}\n        value={value ?? \"\"}\n        forwardedRef={forwardedRef}\n      />\n    );\n  } else {\n    return (\n      <UncontrolledMaskedField\n        {...rest}\n        defaultValue={defaultValue}\n        forwardedRef={forwardedRef}\n      />\n    );\n  }\n};\n\nMaskedField.displayName = \"MaskedField\";\n\nexport { MaskedField };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/chunk-XUNHMVIS.js

@@ -0,0 +1,427 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+
+// src/components/Icon/Icon.tsx
+import classNames from "classnames/dedupe";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ICON_PREFIX = "mobius-icon";
+var capitaliseFirstLetter = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+function Icon({
+  ref,
+  icon,
+  className,
+  size = "xs",
+  color,
+  fixedWidth,
+  spin,
+  spinReverse,
+  title,
+  ...otherProps
+}) {
+  if (!icon) {
+    throw new Error("Must specify icon object");
+  }
+  const classes = classNames(
+    "mobius",
+    "mobius-icon",
+    `svg-inline--${ICON_PREFIX}`,
+    `--size-${size}`,
+    className,
+    {
+      [`${ICON_PREFIX}-fw`]: fixedWidth,
+      [`${ICON_PREFIX}-spin`]: spin || spinReverse,
+      [`${ICON_PREFIX}-spin-reverse`]: spinReverse
+    }
+  );
+  const { iconName, width, height, svgPathData } = icon;
+  const formattedIconName = iconName.split("-").join(" ");
+  const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;
+  const titleText = title || defaultTitle;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      focusable: "false",
+      "data-icon": iconName,
+      className: classes,
+      role: "img",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: `0 0 ${width} ${height}`,
+      style: { color },
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ jsx("title", { children: titleText }),
+        /* @__PURE__ */ jsx("path", { fill: "currentColor", d: svgPathData })
+      ]
+    }
+  );
+}
+
+// src/hooks/useLabel/useLabel.tsx
+import { useId, useRef } from "react";
+function useLabel({
+  id: providedId,
+  label,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  labelElementType = "label"
+}) {
+  let labelProps = {};
+  let fieldProps = {};
+  const hasWarnedAboutMissingLabels = useRef(false);
+  const fallbackId = useId();
+  const id = providedId || fallbackId;
+  const labelId = useId();
+  if (label) {
+    ariaLabelledby = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;
+    labelProps = {
+      id: labelId,
+      htmlFor: labelElementType === "label" ? id : void 0
+    };
+  } else if (!ariaLabelledby && !ariaLabel && !hasWarnedAboutMissingLabels.current) {
+    hasWarnedAboutMissingLabels.current = true;
+    console.warn(
+      "If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility"
+    );
+  }
+  fieldProps = {
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby
+  };
+  return {
+    labelProps,
+    fieldProps
+  };
+}
+
+// src/hooks/useTextField/useTextField.tsx
+import { useId as useId2 } from "react";
+
+// src/utils/spaceDelimitedList.ts
+function spaceDelimitedList(list) {
+  return list.filter(Boolean).join(" ") || void 0;
+}
+
+// src/hooks/useTextField/useTextField.tsx
+function useTextField(props) {
+  const {
+    isDisabled = false,
+    isReadOnly = false,
+    isRequired = false,
+    inputElementType = "input"
+  } = props;
+  const { labelProps, fieldProps } = useLabel(props);
+  const descriptionId = useId2();
+  const descriptionProps = { id: descriptionId };
+  const errorMessageId = useId2();
+  const errorMessageProps = { id: errorMessageId };
+  const ariaDescribedBy = spaceDelimitedList([
+    props.description && descriptionId,
+    props.errorMessage && errorMessageId,
+    props["aria-describedby"]
+  ]);
+  return {
+    descriptionProps,
+    errorMessageProps,
+    labelProps,
+    inputProps: {
+      defaultValue: props.defaultValue,
+      value: props.value,
+      onChange: props.onChange,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired,
+      "aria-required": isRequired === true ? true : void 0,
+      "aria-invalid": props.isInvalid,
+      "aria-describedby": ariaDescribedBy,
+      "aria-errormessage": props["aria-errormessage"],
+      role: props.role,
+      type: inputElementType === "input" ? props.type : void 0,
+      pattern: inputElementType === "input" ? props.pattern : void 0,
+      autoComplete: props.autoComplete,
+      maxLength: props.maxLength,
+      minLength: props.minLength,
+      name: props.name,
+      placeholder: props.placeholder,
+      inputMode: props.inputMode,
+      // Clipboard events
+      onCopy: props.onCopy,
+      onCut: props.onCut,
+      onPaste: props.onPaste,
+      // Composition events
+      onCompositionEnd: props.onCompositionEnd,
+      onCompositionStart: props.onCompositionStart,
+      onCompositionUpdate: props.onCompositionUpdate,
+      // Selection events
+      onSelect: props.onSelect,
+      // Input events
+      onBeforeInput: props.onBeforeInput,
+      onInput: props.onInput,
+      // Focus events
+      onFocus: props.onFocus,
+      onBlur: props.onBlur,
+      ...fieldProps
+    }
+  };
+}
+
+// src/hooks/useValidationClasses/useValidationClasses.ts
+var useValidationClasses = (props) => {
+  const { isInvalid } = props;
+  if (isInvalid) {
+    return "--is-invalid";
+  }
+  if (isInvalid === false) {
+    return "--is-valid";
+  }
+  return "";
+};
+
+// src/components/ErrorMessage/ErrorMessage.tsx
+import { error } from "@simplybusiness/icons";
+import classNames7 from "classnames/dedupe";
+
+// src/components/TextField/TextField.tsx
+import classNames5 from "classnames/dedupe";
+
+// src/components/Label/Label.tsx
+import classNames2 from "classnames/dedupe";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Label = ({ ref, ...props }) => {
+  const { elementType: Element = "label", children, ...otherProps } = props;
+  const classes = classNames2("mobius", "mobius-label", props.className);
+  otherProps.className = classes;
+  return /* @__PURE__ */ jsx2(Element, { ref, ...otherProps, className: classes, children });
+};
+Label.displayName = "Label";
+
+// src/components/Stack/Stack.tsx
+import classNames3 from "classnames/dedupe";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Stack = ({ ref, ...props }) => {
+  const { elementType: Element = "div", gap, ...otherProps } = props;
+  const classes = classNames3(
+    "mobius",
+    "mobius-stack",
+    {
+      [`--gap-${gap}`]: gap
+    },
+    otherProps.className
+  );
+  return /* @__PURE__ */ jsx3(Element, { ref, ...otherProps, className: classes });
+};
+Stack.displayName = "Stack";
+
+// src/components/TextField/adornmentWithClassName.ts
+import classNames4 from "classnames/dedupe";
+import { cloneElement } from "react";
+var adornmentWithClassName = (component, validationClasses, className) => {
+  if (!component) return null;
+  return cloneElement(component, {
+    className: classNames4(
+      component.props.className,
+      validationClasses,
+      className
+    )
+  });
+};
+
+// src/components/TextField/TextField.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var TextField = ({ ref, ...props }) => {
+  const {
+    isDisabled,
+    type = "text",
+    isInvalid,
+    className,
+    label,
+    errorMessage,
+    children,
+    isRequired,
+    prefixInside,
+    prefixOutside,
+    suffixInside,
+    suffixOutside,
+    isReadOnly,
+    ...otherProps
+  } = props;
+  const { inputProps, labelProps, errorMessageProps } = useTextField({
+    ...props,
+    "aria-errormessage": errorMessage
+  });
+  const hidden = type === "hidden";
+  const validationClasses = useValidationClasses({ isInvalid });
+  const textfieldClasses = {
+    "--is-disabled": isDisabled,
+    "--is-required": typeof isRequired === "boolean" && isRequired,
+    "--is-optional": typeof isRequired === "boolean" && !isRequired,
+    "--is-hidden": hidden,
+    [className || ""]: true
+  };
+  const sharedClasses = classNames5(validationClasses, textfieldClasses);
+  const labelClasses = classNames5(
+    {
+      "--is-disabled": isDisabled
+    },
+    validationClasses
+  );
+  const containerClasses = classNames5(
+    "mobius",
+    "mobius-text-field",
+    sharedClasses
+  );
+  const inputClasses = classNames5(
+    "mobius",
+    "mobius-text-field__input",
+    sharedClasses
+  );
+  const inputWrapperClasses = classNames5(
+    "mobius-text-field__input-wrapper",
+    sharedClasses
+  );
+  return /* @__PURE__ */ jsxs2(Stack, { gap: "xs", className: containerClasses, children: [
+    label && !hidden && /* @__PURE__ */ jsx4(Label, { ...labelProps, className: labelClasses, children: label }),
+    /* @__PURE__ */ jsxs2("div", { className: "mobius-text-field__inner-container", children: [
+      adornmentWithClassName(
+        prefixOutside,
+        labelClasses,
+        "mobius-text-field__prefix-outside"
+      ),
+      /* @__PURE__ */ jsxs2("div", { className: inputWrapperClasses, children: [
+        adornmentWithClassName(
+          prefixInside,
+          labelClasses,
+          "mobius-text-field__prefix-inside"
+        ),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            ...otherProps,
+            ...inputProps,
+            ref,
+            type,
+            className: inputClasses
+          }
+        ),
+        adornmentWithClassName(
+          suffixInside,
+          labelClasses,
+          "mobius-text-field__suffix-inside"
+        )
+      ] }),
+      adornmentWithClassName(
+        suffixOutside,
+        labelClasses,
+        "mobius-text-field__suffix-outside"
+      )
+    ] }),
+    children && /* @__PURE__ */ jsx4("div", { className: "mobius-text-field__children", children }),
+    /* @__PURE__ */ jsx4(ErrorMessage, { ...errorMessageProps, errorMessage })
+  ] });
+};
+TextField.displayName = "TextField";
+
+// src/components/Text/Text.tsx
+import classNames6 from "classnames/dedupe";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var getElementType = (variant, elementType) => {
+  if (variant) {
+    return ["h1", "h2", "h3", "h4"].includes(variant) ? variant : "p";
+  }
+  return elementType || "p";
+};
+var Text = ({ ref, elementType: Component = "p", ...props }) => {
+  const { variant, className, spacing, ...otherProps } = props;
+  const elementType = getElementType(variant, Component);
+  const variantType = variant || elementType;
+  const classes = classNames6(
+    "mobius",
+    "mobius-text",
+    { [`--is-${variantType}`]: variantType },
+    { [`--has-line-height-${spacing}`]: spacing },
+    className
+  );
+  return /* @__PURE__ */ jsx5(Component, { ref, ...otherProps, className: classes });
+};
+Text.displayName = "Text";
+
+// src/components/TextOrHTML/TextOrHTML.tsx
+import { useMemo } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var TextOrHTML = ({
+  ref,
+  text,
+  htmlClassName,
+  htmlElementType = "span",
+  textWrapper = false,
+  ...textProps
+}) => {
+  const DangerousComponent = htmlElementType;
+  const dangerousHTML = useMemo(() => ({ __html: text }), [text]);
+  const dangerousElement = /* @__PURE__ */ jsx6(
+    DangerousComponent,
+    {
+      className: htmlClassName,
+      dangerouslySetInnerHTML: dangerousHTML
+    }
+  );
+  if (textWrapper) {
+    return /* @__PURE__ */ jsx6(Text, { ref, ...textProps, children: dangerousElement });
+  }
+  return dangerousElement;
+};
+TextOrHTML.displayName = "TextOrHTML";
+
+// src/components/ErrorMessage/ErrorMessage.tsx
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var ErrorMessage = ({
+  id,
+  errorMessage,
+  className
+}) => {
+  const classes = classNames7("mobius", "mobius-error-message", className);
+  if (!errorMessage) return null;
+  return /* @__PURE__ */ jsxs3("div", { id, className: classes, "data-testid": "ErrorMessage", role: "alert", children: [
+    /* @__PURE__ */ jsx7(
+      Icon,
+      {
+        icon: error,
+        className: "mobius-error-message__icon",
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      TextOrHTML,
+      {
+        elementType: "span",
+        className: "mobius-error-message__text",
+        text: errorMessage
+      }
+    )
+  ] });
+};
+ErrorMessage.displayName = "ErrorMessage";
+
+export {
+  __privateGet,
+  __privateAdd,
+  __privateSet,
+  spaceDelimitedList,
+  Icon,
+  useLabel,
+  useTextField,
+  useValidationClasses,
+  ErrorMessage,
+  Label,
+  Stack,
+  TextField,
+  Text,
+  TextOrHTML
+};
+//# sourceMappingURL=chunk-XUNHMVIS.js.map

package/dist/esm/chunk-XUNHMVIS.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/Icon/Icon.tsx", "../../src/hooks/useLabel/useLabel.tsx", "../../src/hooks/useTextField/useTextField.tsx", "../../src/utils/spaceDelimitedList.ts", "../../src/hooks/useValidationClasses/useValidationClasses.ts", "../../src/components/ErrorMessage/ErrorMessage.tsx", "../../src/components/TextField/TextField.tsx", "../../src/components/Label/Label.tsx", "../../src/components/Stack/Stack.tsx", "../../src/components/TextField/adornmentWithClassName.ts", "../../src/components/Text/Text.tsx", "../../src/components/TextOrHTML/TextOrHTML.tsx"],
+  "sourcesContent": ["import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n  str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n  ref,\n  icon,\n  className,\n  size = \"xs\",\n  color,\n  fixedWidth,\n  spin,\n  spinReverse,\n  title,\n  ...otherProps\n}: IconProps) {\n  if (!icon) {\n    throw new Error(\"Must specify icon object\");\n  }\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-icon\",\n    `svg-inline--${ICON_PREFIX}`,\n    `--size-${size}`,\n    className,\n    {\n      [`${ICON_PREFIX}-fw`]: fixedWidth,\n      [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n      [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n    },\n  );\n\n  const { iconName, width, height, svgPathData } = icon;\n  const formattedIconName = iconName.split(\"-\").join(\" \");\n\n  const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n  const titleText = title || defaultTitle;\n\n  return (\n    <svg\n      ref={ref}\n      focusable=\"false\"\n      data-icon={iconName}\n      className={classes}\n      role=\"img\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={`0 0 ${width} ${height}`}\n      style={{ color }}\n      {...otherProps}\n    >\n      <title>{titleText}</title>\n      <path fill=\"currentColor\" d={svgPathData} />\n    </svg>\n  );\n}\n", "import type { LabelHTMLAttributes } from \"react\";\nimport { useId, useRef } from \"react\";\n\nexport type UseLabelProps = {\n  id?: string | undefined;\n  label?: string | undefined;\n  \"aria-label\"?: string | undefined;\n  \"aria-labelledby\"?: string | undefined;\n  labelElementType?: \"label\" | \"span\" | undefined;\n};\n\nexport type UseLabelReturn = {\n  labelProps: {\n    id?: string | undefined;\n  } & LabelHTMLAttributes<HTMLLabelElement>;\n  fieldProps: LabellingProps;\n};\n\nexport type LabellingProps = {\n  id?: string | undefined;\n  \"aria-label\"?: string | undefined;\n  \"aria-labelledby\"?: string | undefined;\n  \"aria-describedby\"?: string | undefined;\n  \"aria-details\"?: string | undefined;\n};\n\nexport function useLabel({\n  id: providedId,\n  label,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledby,\n  labelElementType = \"label\",\n}: UseLabelProps) {\n  let labelProps: UseLabelReturn[\"labelProps\"] = {};\n  let fieldProps: UseLabelReturn[\"fieldProps\"] = {};\n\n  const hasWarnedAboutMissingLabels = useRef(false);\n\n  const fallbackId = useId();\n  const id = providedId || fallbackId;\n  const labelId = useId();\n\n  if (label) {\n    ariaLabelledby = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;\n    labelProps = {\n      id: labelId,\n      htmlFor: labelElementType === \"label\" ? id : undefined,\n    };\n  } else if (\n    !ariaLabelledby &&\n    !ariaLabel &&\n    !hasWarnedAboutMissingLabels.current\n  ) {\n    hasWarnedAboutMissingLabels.current = true;\n    console.warn(\n      \"If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility\",\n    );\n  }\n\n  fieldProps = {\n    id,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n  };\n\n  return {\n    labelProps,\n    fieldProps,\n  };\n}\n", "import { useId } from \"react\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useLabel } from \"../useLabel/useLabel\";\nimport type { UseTextFieldProps, UseTextFieldReturn } from \"./types\";\n\nexport function useTextField(props: UseTextFieldProps): UseTextFieldReturn {\n  const {\n    isDisabled = false,\n    isReadOnly = false,\n    isRequired = false,\n    inputElementType = \"input\",\n  } = props;\n  const { labelProps, fieldProps } = useLabel(props);\n\n  const descriptionId = useId();\n  const descriptionProps = { id: descriptionId };\n\n  const errorMessageId = useId();\n  const errorMessageProps = { id: errorMessageId };\n\n  const ariaDescribedBy = spaceDelimitedList([\n    props.description && descriptionId,\n    props.errorMessage && errorMessageId,\n    props[\"aria-describedby\"],\n  ]);\n\n  return {\n    descriptionProps,\n    errorMessageProps,\n    labelProps,\n    inputProps: {\n      defaultValue: props.defaultValue,\n      value: props.value,\n      onChange: props.onChange,\n      disabled: isDisabled,\n      readOnly: isReadOnly,\n      required: isRequired,\n      \"aria-required\": isRequired === true ? true : undefined,\n      \"aria-invalid\": props.isInvalid,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": props[\"aria-errormessage\"],\n      role: props.role,\n\n      type: inputElementType === \"input\" ? props.type : undefined,\n      pattern: inputElementType === \"input\" ? props.pattern : undefined,\n\n      autoComplete: props.autoComplete,\n      maxLength: props.maxLength,\n      minLength: props.minLength,\n      name: props.name,\n      placeholder: props.placeholder,\n      inputMode: props.inputMode,\n\n      // Clipboard events\n      onCopy: props.onCopy,\n      onCut: props.onCut,\n      onPaste: props.onPaste,\n\n      // Composition events\n      onCompositionEnd: props.onCompositionEnd,\n      onCompositionStart: props.onCompositionStart,\n      onCompositionUpdate: props.onCompositionUpdate,\n\n      // Selection events\n      onSelect: props.onSelect,\n\n      // Input events\n      onBeforeInput: props.onBeforeInput,\n      onInput: props.onInput,\n\n      // Focus events\n      onFocus: props.onFocus,\n      onBlur: props.onBlur,\n\n      ...fieldProps,\n    },\n  };\n}\n", "export function spaceDelimitedList(\n  list: (string | null | undefined)[],\n): string | undefined {\n  return list.filter(Boolean).join(\" \") || undefined;\n}\n", "import type { Validation } from \"../../types\";\n\nexport type GetValidationClassesProps = Pick<Validation, \"isInvalid\">;\n\nexport const useValidationClasses = (props: GetValidationClassesProps) => {\n  const { isInvalid } = props;\n\n  if (isInvalid) {\n    return \"--is-invalid\";\n  }\n\n  if (isInvalid === false) {\n    return \"--is-valid\";\n  }\n\n  return \"\";\n};\n", "import { error } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport { TextOrHTML } from \"../..\";\nimport { Icon } from \"../Icon\";\n\nexport interface ErrorMessageProps {\n  errorMessage?: string;\n  id?: string;\n  className?: string;\n}\n\nexport const ErrorMessage = ({\n  id,\n  errorMessage,\n  className,\n}: ErrorMessageProps) => {\n  const classes = classNames(\"mobius\", \"mobius-error-message\", className);\n\n  if (!errorMessage) return null;\n\n  return (\n    <div id={id} className={classes} data-testid=\"ErrorMessage\" role=\"alert\">\n      <Icon\n        icon={error}\n        className=\"mobius-error-message__icon\"\n        aria-hidden=\"true\"\n      />\n      <TextOrHTML\n        elementType=\"span\"\n        className=\"mobius-error-message__text\"\n        text={errorMessage}\n      />\n    </div>\n  );\n};\n\nErrorMessage.displayName = \"ErrorMessage\";\n", "\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport type {\n  HTMLInputTypeAttribute,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n} from \"react\";\nimport type { UseTextFieldProps } from \"../../hooks\";\nimport { useTextField, useValidationClasses } from \"../../hooks\";\nimport type { DOMProps, FocusEvents } from \"../../types\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Stack } from \"../Stack\";\nimport { adornmentWithClassName } from \"./adornmentWithClassName\";\n\nexport type TextFieldElementType = HTMLInputElement;\nexport interface TextFieldProps\n  extends\n    DOMProps,\n    FocusEvents,\n    UseTextFieldProps,\n    RefAttributes<TextFieldElementType> {\n  className?: string;\n  errorMessage?: string;\n  children?: ReactNode;\n  label?: string;\n  type?: Exclude<\n    HTMLInputTypeAttribute,\n    | \"button\"\n    | \"checkbox\"\n    | \"color\"\n    | \"date\"\n    | \"datetime-local\"\n    | \"file\"\n    | \"image\"\n    | \"month\"\n    | \"radio\"\n    | \"range\"\n    | \"reset\"\n    | \"submit\"\n    | \"week\"\n  >;\n  prefixInside?: ReactElement;\n  prefixOutside?: ReactElement;\n  suffixInside?: ReactElement;\n  suffixOutside?: ReactElement;\n}\n\nexport type TextFieldRef = Ref<TextFieldElementType>;\n\nconst TextField = ({ ref, ...props }: TextFieldProps) => {\n  const {\n    isDisabled,\n    type = \"text\",\n    isInvalid,\n    className,\n    label,\n    errorMessage,\n    children,\n    isRequired,\n    prefixInside,\n    prefixOutside,\n    suffixInside,\n    suffixOutside,\n\n    isReadOnly,\n    ...otherProps\n  } = props;\n\n  const { inputProps, labelProps, errorMessageProps } = useTextField({\n    ...props,\n    \"aria-errormessage\": errorMessage,\n  });\n\n  const hidden = type === \"hidden\";\n\n  const validationClasses = useValidationClasses({ isInvalid });\n\n  const textfieldClasses = {\n    \"--is-disabled\": isDisabled,\n    \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n    \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    \"--is-hidden\": hidden,\n    [className || \"\"]: true,\n  };\n\n  const sharedClasses = classNames(validationClasses, textfieldClasses);\n\n  const labelClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius-text-field\",\n    sharedClasses,\n  );\n\n  const inputClasses = classNames(\n    \"mobius\",\n    \"mobius-text-field__input\",\n    sharedClasses,\n  );\n\n  const inputWrapperClasses = classNames(\n    \"mobius-text-field__input-wrapper\",\n    sharedClasses,\n  );\n\n  return (\n    <Stack gap=\"xs\" className={containerClasses}>\n      {label && !hidden && (\n        <Label {...labelProps} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius-text-field__inner-container\">\n        {adornmentWithClassName(\n          prefixOutside,\n          labelClasses,\n          \"mobius-text-field__prefix-outside\",\n        )}\n        <div className={inputWrapperClasses}>\n          {adornmentWithClassName(\n            prefixInside,\n            labelClasses,\n            \"mobius-text-field__prefix-inside\",\n          )}\n          <input\n            {...otherProps}\n            {...inputProps}\n            ref={ref}\n            type={type}\n            className={inputClasses}\n          />\n          {adornmentWithClassName(\n            suffixInside,\n            labelClasses,\n            \"mobius-text-field__suffix-inside\",\n          )}\n        </div>\n        {adornmentWithClassName(\n          suffixOutside,\n          labelClasses,\n          \"mobius-text-field__suffix-outside\",\n        )}\n      </div>\n      {children && (\n        <div className=\"mobius-text-field__children\">{children}</div>\n      )}\n\n      <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />\n    </Stack>\n  );\n};\n\nTextField.displayName = \"TextField\";\nexport { TextField };\n", "import type React from \"react\";\nimport type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\n\nexport type LabelElementType = HTMLLabelElement;\nexport type IntrinsicLabel = Omit<\n  React.JSX.IntrinsicElements[\"label\"],\n  \"css\" | \"color\" | \"ref\"\n>;\n\nexport interface LabelProps\n  extends IntrinsicLabel, DOMProps, RefAttributes<LabelElementType> {\n  children?: ReactNode;\n  className?: string;\n  elementType?: \"label\" | \"span\";\n}\n\nconst Label = ({ ref, ...props }: LabelProps) => {\n  const { elementType: Element = \"label\", children, ...otherProps } = props;\n\n  const classes = classNames(\"mobius\", \"mobius-label\", props.className);\n  otherProps.className = classes;\n\n  return (\n    <Element ref={ref} {...otherProps} className={classes}>\n      {children}\n    </Element>\n  );\n};\n\nLabel.displayName = \"Label\";\nexport { Label };\n", "import type { Ref, RefAttributes, ReactNode } from \"react\";\nimport type React from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport type { SpacingType } from \"../../types\";\n\nexport type StackElementType = HTMLDivElement;\n\nexport interface StackProps extends DOMProps, RefAttributes<StackElementType> {\n  children?: ReactNode;\n  /** How big a gap between items */\n  gap?: SpacingType;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: React.ElementType;\n}\n\nexport type StackRef = Ref<StackElementType>;\n\nexport const Stack = ({ ref, ...props }: StackProps) => {\n  const { elementType: Element = \"div\", gap, ...otherProps } = props;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-stack\",\n    {\n      [`--gap-${gap}`]: gap,\n    },\n    otherProps.className,\n  );\n\n  return <Element ref={ref} {...otherProps} className={classes} />;\n};\n\nStack.displayName = \"Stack\";\n", "import classNames from \"classnames/dedupe\";\nimport type { ReactElement } from \"react\";\nimport { cloneElement } from \"react\";\n\nexport const adornmentWithClassName = (\n  component?: ReactElement,\n  validationClasses?: string,\n  className?: string,\n) => {\n  if (!component) return null;\n\n  return cloneElement(component, {\n    className: classNames(\n      (component.props as { className?: string }).className,\n      validationClasses,\n      className,\n    ),\n  } as { className: string });\n};\n", "import type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\n\nexport type TextElementType = HTMLHeadingElement | HTMLParagraphElement;\nexport type TextVariantType =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"body\"\n  | \"small\"\n  | \"legal\";\nexport type ElementType = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"p\" | \"span\";\nexport interface TextProps extends DOMProps, RefAttributes<TextElementType> {\n  /** HTML element for the text */\n  elementType?: ElementType;\n  /** Specify font size override */\n  variant?: TextVariantType;\n  /** Specify compact line height override */\n  spacing?: \"loose\" | \"tight\";\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  children: ReactNode;\n  style?: React.CSSProperties;\n}\n\nconst getElementType = (\n  variant: TextVariantType | undefined,\n  elementType: ElementType | undefined,\n) => {\n  if (variant) {\n    return [\"h1\", \"h2\", \"h3\", \"h4\"].includes(variant) ? variant : \"p\";\n  }\n  return elementType || \"p\";\n};\n\nconst Text = ({ ref, elementType: Component = \"p\", ...props }: TextProps) => {\n  // Remove non-DOM props from element\n  const { variant, className, spacing, ...otherProps } = props;\n\n  // If a variant is supplied, set the class name and element type\n  const elementType = getElementType(variant, Component);\n  const variantType = variant || elementType;\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-text\",\n    { [`--is-${variantType}`]: variantType },\n    { [`--has-line-height-${spacing}`]: spacing },\n    className,\n  );\n\n  return <Component ref={ref} {...otherProps} className={classes} />;\n};\n\nText.displayName = \"Text\";\nexport { Text };\n", "import type { RefAttributes } from \"react\";\nimport { useMemo } from \"react\";\nimport type { TextElementType, TextProps } from \"../Text/Text\";\nimport { Text } from \"../Text/Text\";\n\nexport type HTMLElementType = \"span\" | \"div\";\n\nexport interface TextOrHTMLProps\n  extends Omit<TextProps, \"children\">, RefAttributes<TextElementType> {\n  /** HTML string to be rendered with dangerouslySetInnerHTML */\n  text: string;\n  /** Custom class name for the dangerous HTML element */\n  htmlClassName?: string;\n  /** HTML element type for the dangerous HTML element */\n  htmlElementType?: HTMLElementType;\n  /** If true, wraps the dangerous HTML element inside a Text component */\n  textWrapper?: boolean;\n}\n\nconst TextOrHTML = ({\n  ref,\n  text,\n  htmlClassName,\n  htmlElementType = \"span\",\n  textWrapper = false,\n  ...textProps\n}: TextOrHTMLProps) => {\n  const DangerousComponent = htmlElementType;\n\n  // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders\n  // See: https://github.com/facebook/react/issues/31660\n  const dangerousHTML = useMemo(() => ({ __html: text }), [text]);\n\n  const dangerousElement = (\n    <DangerousComponent\n      className={htmlClassName}\n      dangerouslySetInnerHTML={dangerousHTML}\n    />\n  );\n\n  if (textWrapper) {\n    return (\n      <Text ref={ref} {...textProps}>\n        {dangerousElement}\n      </Text>\n    );\n  }\n\n  return dangerousElement;\n};\n\nTextOrHTML.displayName = \"TextOrHTML\";\nexport { TextOrHTML };\n"],
+  "mappings": "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",
+  "names": ["useId", "useId", "classNames", "classNames", "classNames", "jsx", "classNames", "jsx", "classNames", "jsx", "jsxs", "classNames", "classNames", "jsx", "jsx", "jsx", "jsxs", "classNames"]
+}