@fanvue/ui 3.12.1 → 3.14.0

package/dist/cjs/components/TextField/TextField.cjs

@@ -28,43 +28,71 @@ const CONTAINER_HEIGHT = {
   "40": "h-10",
   "32": "h-8"
 };
-const INPUT_SIZE_CLASSES = {
-  "48": "py-3 typography-body-default-16px-regular autofill-body-lg",
-  "40": "py-2 typography-body-default-16px-regular autofill-body-lg",
-  "32": "py-2 typography-body-small-14px-regular autofill-body-md"
-};
-const INPUT_PL = {
-  "48": { default: "pl-4", withIcon: "pl-10" },
-  "40": { default: "pl-4", withIcon: "pl-10" },
-  "32": { default: "pl-3", withIcon: "pl-9" }
-};
-const INPUT_PR = {
-  "48": { default: "pr-4", withIcon: "pr-10" },
-  "40": { default: "pr-4", withIcon: "pr-10" },
-  "32": { default: "pr-3", withIcon: "pr-9" }
-};
-const ICON_INSET = {
+const CONTAINER_PADDING_X = {
   "48": "px-4",
   "40": "px-4",
   "32": "px-3"
 };
+const CONTAINER_GAP = {
+  "48": "gap-2.5",
+  "40": "gap-2.5",
+  "32": "gap-2"
+};
+const INPUT_TYPOGRAPHY = {
+  "48": "typography-body-default-16px-regular autofill-body-lg",
+  "40": "typography-body-default-16px-regular autofill-body-lg",
+  "32": "typography-body-small-14px-regular autofill-body-md"
+};
+const SIDE_LABEL_TYPOGRAPHY = {
+  "48": "typography-body-default-16px-regular",
+  "40": "typography-body-default-16px-regular",
+  "32": "typography-body-small-14px-regular"
+};
 function getContainerClassName(size, error, disabled) {
   return cn.cn(
-    "relative overflow-hidden rounded-sm border bg-inputs-inputs-primary has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors",
+    "relative flex items-center overflow-hidden rounded-sm border bg-inputs-inputs-primary has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors",
+    CONTAINER_PADDING_X[size],
+    CONTAINER_GAP[size],
     error ? "border-error-content" : "border-border-primary",
     !disabled && !error && "hover:border-neutral-alphas-400",
     CONTAINER_HEIGHT[size],
     disabled && "opacity-50"
   );
 }
-function getInputClassName(size, hasLeftIcon, hasRightIcon) {
-  return cn.cn(
-    "h-full w-full rounded-sm bg-transparent text-content-primary no-underline placeholder:text-content-tertiary focus:outline-none disabled:cursor-not-allowed",
-    INPUT_SIZE_CLASSES[size],
-    hasLeftIcon ? INPUT_PL[size].withIcon : INPUT_PL[size].default,
-    hasRightIcon ? INPUT_PR[size].withIcon : INPUT_PR[size].default
+function LeadingIcon({ children }) {
+  if (!children) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none flex size-4 shrink-0 items-center justify-center text-content-secondary", children });
+}
+function SideLabel({
+  id,
+  size,
+  align,
+  children
+}) {
+  if (!children) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      id,
+      className: cn.cn(
+        "shrink-0 select-none whitespace-nowrap text-content-tertiary",
+        align === "right" && "text-right",
+        SIDE_LABEL_TYPOGRAPHY[size]
+      ),
+      children
+    }
   );
 }
+function TrailingAdornment({
+  rightIcon,
+  validated
+}) {
+  if (!rightIcon && !validated) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-2 text-content-secondary", children: [
+    rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-tf-interactive": "", className: "flex size-4 shrink-0 items-center justify-center", children: rightIcon }),
+    validated && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckOutlineIcon.CheckOutlineIcon, { className: "text-success-content" }) })
+  ] });
+}
 function TextFieldHelperText({
   id,
   error,
@@ -101,6 +129,8 @@ const TextField = React__namespace.forwardRef(
     validated = false,
     leftIcon,
     rightIcon,
+    leftLabel,
+    rightLabel,
     className,
     id,
     disabled,
@@ -110,7 +140,31 @@ const TextField = React__namespace.forwardRef(
     const generatedId = React__namespace.useId();
     const inputId = id || generatedId;
     const helperTextId = `${inputId}-helper`;
+    const leftLabelId = `${inputId}-left-label`;
+    const rightLabelId = `${inputId}-right-label`;
     const bottomText = error && errorMessage ? errorMessage : helperText;
+    const describedBy = [
+      leftLabel != null ? leftLabelId : null,
+      rightLabel != null ? rightLabelId : null,
+      bottomText ? helperTextId : null
+    ].filter(Boolean).join(" ") || void 0;
+    const innerRef = React__namespace.useRef(null);
+    const setRefs = React__namespace.useCallback(
+      (node) => {
+        innerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const handleContainerMouseDown = (event) => {
+      if (disabled) return;
+      const target = event.target;
+      if (target === innerRef.current) return;
+      if (target.closest("[data-tf-interactive]")) return;
+      event.preventDefault();
+      innerRef.current?.focus();
+    };
     warnMissingAccessibleName(label, props["aria-label"], props["aria-labelledby"]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -127,46 +181,35 @@ const TextField = React__namespace.forwardRef(
               children: label
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getContainerClassName(size, error, disabled), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                ref,
-                id: inputId,
-                disabled,
-                "aria-describedby": bottomText ? helperTextId : void 0,
-                "aria-invalid": error || void 0,
-                className: cn.cn(
-                  getInputClassName(size, !!leftIcon, !!(rightIcon || validated)),
-                  "[&[type='search']::-webkit-search-cancel-button]:hidden [&[type='search']::-webkit-search-cancel-button]:appearance-none"
-                ),
-                ...props
-              }
-            ),
-            leftIcon && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn.cn(
-                  "pointer-events-none absolute inset-y-0 left-0 flex items-center text-content-secondary",
-                  ICON_INSET[size]
-                ),
-                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-4 shrink-0 items-center justify-center", children: leftIcon })
-              }
-            ),
-            (rightIcon || validated) && /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: cn.cn(
-                  "absolute inset-y-0 right-0 flex items-center gap-2 text-content-secondary",
-                  ICON_INSET[size]
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: getContainerClassName(size, error, disabled),
+              onMouseDown: handleContainerMouseDown,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(LeadingIcon, { children: leftIcon }),
+                /* @__PURE__ */ jsxRuntime.jsx(SideLabel, { id: leftLabelId, size, align: "left", children: leftLabel }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ref: setRefs,
+                    id: inputId,
+                    disabled,
+                    "aria-describedby": describedBy,
+                    "aria-invalid": error || void 0,
+                    className: cn.cn(
+                      "h-full min-w-0 flex-1 bg-transparent text-content-primary no-underline placeholder:text-content-tertiary focus:outline-none disabled:cursor-not-allowed",
+                      INPUT_TYPOGRAPHY[size],
+                      "[&[type='search']::-webkit-search-cancel-button]:hidden [&[type='search']::-webkit-search-cancel-button]:appearance-none"
+                    ),
+                    ...props
+                  }
                 ),
-                children: [
-                  rightIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-4 shrink-0 items-center justify-center", children: rightIcon }),
-                  validated && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckOutlineIcon.CheckOutlineIcon, { className: "text-success-content" }) })
-                ]
-              }
-            )
-          ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(SideLabel, { id: rightLabelId, size, align: "right", children: rightLabel }),
+                /* @__PURE__ */ jsxRuntime.jsx(TrailingAdornment, { rightIcon, validated })
+              ]
+            }
+          ),
           bottomText && /* @__PURE__ */ jsxRuntime.jsx(TextFieldHelperText, { id: helperTextId, error, children: bottomText })
         ]
       }

package/dist/cjs/components/TextField/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","sources":["../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CheckOutlineIcon } from \"@/index\";\nimport { cn } from \"../../utils/cn\";\n\n/** Text field height in pixels. */\nexport type TextFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextFieldProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"prefix\"> {\n  /** Label text displayed above the input. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the text field in pixels. @default \"48\" */\n  size?: TextFieldSize;\n  /** Whether the text field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text field is validated. @default false */\n  validated?: boolean;\n  /** Icon element displayed at the left side of the input. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed at the right side of the input. */\n  rightIcon?: React.ReactNode;\n  /** Whether the text field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<TextFieldSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<TextFieldSize, string> = {\n  \"48\": \"py-3 typography-body-default-16px-regular autofill-body-lg\",\n  \"40\": \"py-2 typography-body-default-16px-regular autofill-body-lg\",\n  \"32\": \"py-2 typography-body-small-14px-regular autofill-body-md\",\n};\n\nconst INPUT_PL: Record<TextFieldSize, { default: string; withIcon: string }> = {\n  \"48\": { default: \"pl-4\", withIcon: \"pl-10\" },\n  \"40\": { default: \"pl-4\", withIcon: \"pl-10\" },\n  \"32\": { default: \"pl-3\", withIcon: \"pl-9\" },\n};\n\nconst INPUT_PR: Record<TextFieldSize, { default: string; withIcon: string }> = {\n  \"48\": { default: \"pr-4\", withIcon: \"pr-10\" },\n  \"40\": { default: \"pr-4\", withIcon: \"pr-10\" },\n  \"32\": { default: \"pr-3\", withIcon: \"pr-9\" },\n};\n\nconst ICON_INSET: Record<TextFieldSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nfunction getContainerClassName(size: TextFieldSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative overflow-hidden rounded-sm border bg-inputs-inputs-primary has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-content\" : \"border-border-primary\",\n    !disabled && !error && \"hover:border-neutral-alphas-400\",\n    CONTAINER_HEIGHT[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getInputClassName(size: TextFieldSize, hasLeftIcon: boolean, hasRightIcon: boolean) {\n  return cn(\n    \"h-full w-full rounded-sm bg-transparent text-content-primary no-underline placeholder:text-content-tertiary focus:outline-none disabled:cursor-not-allowed\",\n    INPUT_SIZE_CLASSES[size],\n    hasLeftIcon ? INPUT_PL[size].withIcon : INPUT_PL[size].default,\n    hasRightIcon ? INPUT_PR[size].withIcon : INPUT_PR[size].default,\n  );\n}\n\nfunction TextFieldHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-description-12px-regular px-2 pt-2 pb-0.5\",\n        error ? \"text-error-content\" : \"text-content-secondary\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A text input field with optional label, helper/error text, and icon slots.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextField\n *   label=\"Email\"\n *   placeholder=\"you@example.com\"\n *   error={!!emailError}\n *   errorMessage={emailError}\n * />\n * ```\n */\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      leftIcon,\n      rightIcon,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-description-12px-semibold pb-2 text-content-primary\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          <input\n            ref={ref}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={bottomText ? helperTextId : undefined}\n            aria-invalid={error || undefined}\n            className={cn(\n              getInputClassName(size, !!leftIcon, !!(rightIcon || validated)),\n              \"[&[type='search']::-webkit-search-cancel-button]:hidden [&[type='search']::-webkit-search-cancel-button]:appearance-none\",\n            )}\n            {...props}\n          />\n\n          {leftIcon && (\n            <div\n              className={cn(\n                \"pointer-events-none absolute inset-y-0 left-0 flex items-center text-content-secondary\",\n                ICON_INSET[size],\n              )}\n            >\n              <div className=\"flex size-4 shrink-0 items-center justify-center\">{leftIcon}</div>\n            </div>\n          )}\n\n          {(rightIcon || validated) && (\n            <div\n              className={cn(\n                \"absolute inset-y-0 right-0 flex items-center gap-2 text-content-secondary\",\n                ICON_INSET[size],\n              )}\n            >\n              {rightIcon && (\n                <div className=\"flex size-4 shrink-0 items-center justify-center\">{rightIcon}</div>\n              )}\n              {validated && (\n                <div className=\"pointer-events-none flex size-4 shrink-0 items-center justify-center\">\n                  <CheckOutlineIcon className=\"text-success-content\" />\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextFieldHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextFieldHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextField.displayName = \"TextField\";\n"],"names":["cn","jsx","React","jsxs","CheckOutlineIcon"],"mappings":"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"}
+{"version":3,"file":"TextField.cjs","sources":["../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CheckOutlineIcon } from \"@/index\";\nimport { cn } from \"../../utils/cn\";\n\n/** Text field height in pixels. */\nexport type TextFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextFieldProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"prefix\"> {\n  /** Label text displayed above the input. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the text field in pixels. @default \"48\" */\n  size?: TextFieldSize;\n  /** Whether the text field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text field is validated. @default false */\n  validated?: boolean;\n  /** Icon element displayed at the left side of the input. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed at the right side of the input. */\n  rightIcon?: React.ReactNode;\n  /** Fixed, non-editable label pinned inside the left edge of the field — for a prefix such as a currency symbol or country code. */\n  leftLabel?: React.ReactNode;\n  /** Fixed, non-editable label pinned inside the right edge of the field — for a unit or suffix such as a currency code or domain. */\n  rightLabel?: React.ReactNode;\n  /** Whether the text field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<TextFieldSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst CONTAINER_PADDING_X: Record<TextFieldSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst CONTAINER_GAP: Record<TextFieldSize, string> = {\n  \"48\": \"gap-2.5\",\n  \"40\": \"gap-2.5\",\n  \"32\": \"gap-2\",\n};\n\nconst INPUT_TYPOGRAPHY: Record<TextFieldSize, string> = {\n  \"48\": \"typography-body-default-16px-regular autofill-body-lg\",\n  \"40\": \"typography-body-default-16px-regular autofill-body-lg\",\n  \"32\": \"typography-body-small-14px-regular autofill-body-md\",\n};\n\nconst SIDE_LABEL_TYPOGRAPHY: Record<TextFieldSize, string> = {\n  \"48\": \"typography-body-default-16px-regular\",\n  \"40\": \"typography-body-default-16px-regular\",\n  \"32\": \"typography-body-small-14px-regular\",\n};\n\nfunction getContainerClassName(size: TextFieldSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative flex items-center overflow-hidden rounded-sm border bg-inputs-inputs-primary has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n    CONTAINER_PADDING_X[size],\n    CONTAINER_GAP[size],\n    error ? \"border-error-content\" : \"border-border-primary\",\n    !disabled && !error && \"hover:border-neutral-alphas-400\",\n    CONTAINER_HEIGHT[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction LeadingIcon({ children }: { children?: React.ReactNode }) {\n  if (!children) return null;\n  return (\n    <span className=\"pointer-events-none flex size-4 shrink-0 items-center justify-center text-content-secondary\">\n      {children}\n    </span>\n  );\n}\n\nfunction SideLabel({\n  id,\n  size,\n  align,\n  children,\n}: {\n  id?: string;\n  size: TextFieldSize;\n  align: \"left\" | \"right\";\n  children?: React.ReactNode;\n}) {\n  if (!children) return null;\n  return (\n    <span\n      id={id}\n      className={cn(\n        \"shrink-0 select-none whitespace-nowrap text-content-tertiary\",\n        align === \"right\" && \"text-right\",\n        SIDE_LABEL_TYPOGRAPHY[size],\n      )}\n    >\n      {children}\n    </span>\n  );\n}\n\nfunction TrailingAdornment({\n  rightIcon,\n  validated,\n}: {\n  rightIcon?: React.ReactNode;\n  validated: boolean;\n}) {\n  if (!rightIcon && !validated) return null;\n  return (\n    <span className=\"flex shrink-0 items-center gap-2 text-content-secondary\">\n      {rightIcon && (\n        <span data-tf-interactive=\"\" className=\"flex size-4 shrink-0 items-center justify-center\">\n          {rightIcon}\n        </span>\n      )}\n      {validated && (\n        <span className=\"pointer-events-none flex size-4 shrink-0 items-center justify-center\">\n          <CheckOutlineIcon className=\"text-success-content\" />\n        </span>\n      )}\n    </span>\n  );\n}\n\nfunction TextFieldHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-description-12px-regular px-2 pt-2 pb-0.5\",\n        error ? \"text-error-content\" : \"text-content-secondary\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A text input field with optional label, helper/error text, icon slots, and side labels.\n *\n * Use `leftLabel` / `rightLabel` for fixed unit or prefix affordances (currency symbol,\n * country code, domain suffix). Provide at least one of `label`, `aria-label`, or\n * `aria-labelledby` for accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextField\n *   label=\"Email\"\n *   placeholder=\"you@example.com\"\n *   error={!!emailError}\n *   errorMessage={emailError}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <TextField label=\"Price\" leftLabel=\"$\" rightLabel=\"USD\" placeholder=\"0.00\" />\n * ```\n */\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      leftIcon,\n      rightIcon,\n      leftLabel,\n      rightLabel,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const leftLabelId = `${inputId}-left-label`;\n    const rightLabelId = `${inputId}-right-label`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    const describedBy =\n      [\n        leftLabel != null ? leftLabelId : null,\n        rightLabel != null ? rightLabelId : null,\n        bottomText ? helperTextId : null,\n      ]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n\n    const innerRef = React.useRef<HTMLInputElement>(null);\n    const setRefs = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        innerRef.current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n      },\n      [ref],\n    );\n\n    // Keep clicks on the non-interactive adornments (icons, side labels, padding)\n    // focusing the input, matching the old absolute/pointer-events-none layout.\n    const handleContainerMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      const target = event.target as HTMLElement;\n      if (target === innerRef.current) return;\n      if (target.closest(\"[data-tf-interactive]\")) return;\n      event.preventDefault();\n      innerRef.current?.focus();\n    };\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-description-12px-semibold pb-2 text-content-primary\"\n          >\n            {label}\n          </label>\n        )}\n\n        {/* biome-ignore lint/a11y/noStaticElementInteractions: focus bridge delegates pointer clicks on adornments to the input */}\n        <div\n          className={getContainerClassName(size, error, disabled)}\n          onMouseDown={handleContainerMouseDown}\n        >\n          <LeadingIcon>{leftIcon}</LeadingIcon>\n          <SideLabel id={leftLabelId} size={size} align=\"left\">\n            {leftLabel}\n          </SideLabel>\n\n          <input\n            ref={setRefs}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={describedBy}\n            aria-invalid={error || undefined}\n            className={cn(\n              \"h-full min-w-0 flex-1 bg-transparent text-content-primary no-underline placeholder:text-content-tertiary focus:outline-none disabled:cursor-not-allowed\",\n              INPUT_TYPOGRAPHY[size],\n              \"[&[type='search']::-webkit-search-cancel-button]:hidden [&[type='search']::-webkit-search-cancel-button]:appearance-none\",\n            )}\n            {...props}\n          />\n\n          <SideLabel id={rightLabelId} size={size} align=\"right\">\n            {rightLabel}\n          </SideLabel>\n          <TrailingAdornment rightIcon={rightIcon} validated={validated} />\n        </div>\n\n        {bottomText && (\n          <TextFieldHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextFieldHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextField.displayName = \"TextField\";\n"],"names":["cn","jsx","jsxs","CheckOutlineIcon","React"],"mappings":"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"}

package/dist/cjs/index.cjs

@@ -7,6 +7,7 @@ const AccordionContent = require("./components/Accordion/AccordionContent.cjs");
 const AccordionItem = require("./components/Accordion/AccordionItem.cjs");
 const AccordionTrigger = require("./components/Accordion/AccordionTrigger.cjs");
 const Alert = require("./components/Alert/Alert.cjs");
+const AudioPlayer = require("./components/AudioPlayer/AudioPlayer.cjs");
 const AudioUpload = require("./components/AudioUpload/AudioUpload.cjs");
 const useAudioRecorder = require("./components/AudioUpload/useAudioRecorder.cjs");
 const Autocomplete = require("./components/Autocomplete/Autocomplete.cjs");
@@ -32,6 +33,7 @@ const Drawer = require("./components/Drawer/Drawer.cjs");
 const DropdownMenu = require("./components/DropdownMenu/DropdownMenu.cjs");
 const EmptyState = require("./components/EmptyState/EmptyState.cjs");
 const FanFollowerCount = require("./components/FanFollowerCount/FanFollowerCount.cjs");
+const FloatingActionButton = require("./components/FloatingActionButton/FloatingActionButton.cjs");
 const IconButton = require("./components/IconButton/IconButton.cjs");
 const AddIcon = require("./components/Icons/AddIcon.cjs");
 const AffiliatesIcon = require("./components/Icons/AffiliatesIcon.cjs");
@@ -105,6 +107,7 @@ const GenderIcon = require("./components/Icons/GenderIcon.cjs");
 const GifIcon = require("./components/Icons/GifIcon.cjs");
 const GiftIcon = require("./components/Icons/GiftIcon.cjs");
 const GoogleIcon = require("./components/Icons/GoogleIcon.cjs");
+const GridViewIcon = require("./components/Icons/GridViewIcon.cjs");
 const HealthIcon = require("./components/Icons/HealthIcon.cjs");
 const HeartIcon = require("./components/Icons/HeartIcon.cjs");
 const HelpIcon = require("./components/Icons/HelpIcon.cjs");
@@ -117,6 +120,7 @@ const InfoCircleIcon = require("./components/Icons/InfoCircleIcon.cjs");
 const InfoIcon = require("./components/Icons/InfoIcon.cjs");
 const LanguageIcon = require("./components/Icons/LanguageIcon.cjs");
 const LinkIcon = require("./components/Icons/LinkIcon.cjs");
+const ListViewIcon = require("./components/Icons/ListViewIcon.cjs");
 const LocationIcon = require("./components/Icons/LocationIcon.cjs");
 const LockerIcon = require("./components/Icons/LockerIcon.cjs");
 const LockerOffIcon = require("./components/Icons/LockerOffIcon.cjs");
@@ -211,6 +215,8 @@ const Pill = require("./components/Pill/Pill.cjs");
 const ProfileOnlineStatus = require("./components/ProfileOnlineStatus/ProfileOnlineStatus.cjs");
 const ProfileStatus = require("./components/ProfileStatus/ProfileStatus.cjs");
 const ProgressBar = require("./components/ProgressBar/ProgressBar.cjs");
+const ProgressBarItem = require("./components/ProgressBar/ProgressBarItem.cjs");
+const ProgressBarSteps = require("./components/ProgressBar/ProgressBarSteps.cjs");
 const Radio = require("./components/Radio/Radio.cjs");
 const RadioGroup = require("./components/RadioGroup/RadioGroup.cjs");
 const RatingSummary = require("./components/RatingSummary/RatingSummary.cjs");
@@ -255,6 +261,7 @@ exports.AccordionContent = AccordionContent.AccordionContent;
 exports.AccordionItem = AccordionItem.AccordionItem;
 exports.AccordionTrigger = AccordionTrigger.AccordionTrigger;
 exports.Alert = Alert.Alert;
+exports.AudioPlayer = AudioPlayer.AudioPlayer;
 exports.AudioUpload = AudioUpload.AudioUpload;
 exports.useAudioRecorder = useAudioRecorder.useAudioRecorder;
 exports.Autocomplete = Autocomplete.Autocomplete;
@@ -319,6 +326,7 @@ exports.DropdownMenuSeparator = DropdownMenu.DropdownMenuSeparator;
 exports.DropdownMenuTrigger = DropdownMenu.DropdownMenuTrigger;
 exports.EmptyState = EmptyState.EmptyState;
 exports.FanFollowerCount = FanFollowerCount.FanFollowerCount;
+exports.FloatingActionButton = FloatingActionButton.FloatingActionButton;
 exports.IconButton = IconButton.IconButton;
 exports.AddIcon = AddIcon.AddIcon;
 exports.AffiliatesIcon = AffiliatesIcon.AffiliatesIcon;
@@ -392,6 +400,7 @@ exports.GenderIcon = GenderIcon.GenderIcon;
 exports.GifIcon = GifIcon.GifIcon;
 exports.GiftIcon = GiftIcon.GiftIcon;
 exports.GoogleIcon = GoogleIcon.GoogleIcon;
+exports.GridViewIcon = GridViewIcon.GridViewIcon;
 exports.HealthIcon = HealthIcon.HealthIcon;
 exports.HeartIcon = HeartIcon.HeartIcon;
 exports.HelpIcon = HelpIcon.HelpIcon;
@@ -404,6 +413,7 @@ exports.InfoCircleIcon = InfoCircleIcon.InfoCircleIcon;
 exports.InfoIcon = InfoIcon.InfoIcon;
 exports.LanguageIcon = LanguageIcon.LanguageIcon;
 exports.LinkIcon = LinkIcon.LinkIcon;
+exports.ListViewIcon = ListViewIcon.ListViewIcon;
 exports.LocationIcon = LocationIcon.LocationIcon;
 exports.LockerIcon = LockerIcon.LockerIcon;
 exports.LockerOffIcon = LockerOffIcon.LockerOffIcon;
@@ -500,6 +510,8 @@ exports.Pill = Pill.Pill;
 exports.ProfileOnlineStatus = ProfileOnlineStatus.ProfileOnlineStatus;
 exports.ProfileStatus = ProfileStatus.ProfileStatus;
 exports.ProgressBar = ProgressBar.ProgressBar;
+exports.ProgressBarItem = ProgressBarItem.ProgressBarItem;
+exports.ProgressBarSteps = ProgressBarSteps.ProgressBarSteps;
 exports.Radio = Radio.Radio;
 exports.RadioGroup = RadioGroup.RadioGroup;
 exports.RatingSummary = RatingSummary.RatingSummary;

package/dist/cjs/index.cjs.map

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

package/dist/components/Accordion/AccordionTrigger.mjs

@@ -4,7 +4,7 @@ import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import * as React from "react";
 import { cn } from "../../utils/cn.mjs";
 import { ChevronDownIcon } from "../Icons/ChevronDownIcon.mjs";
-const AccordionTrigger = React.forwardRef(({ className, children, icon, ...props }, ref) => {
+const AccordionTrigger = React.forwardRef(({ className, children, icon, description, leadingIcon, avatar, ...props }, ref) => {
   const showIcon = icon !== null;
   const iconElement = icon === void 0 ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 shrink-0 text-content-secondary" }) : icon;
   return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
@@ -24,7 +24,16 @@ const AccordionTrigger = React.forwardRef(({ className, children, icon, ...props
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children }),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          avatar && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: avatar }),
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-start gap-2 text-left", children: [
+            leadingIcon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center pt-px [&>svg]:size-4", "aria-hidden": "true", children: leadingIcon }),
+            /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate typography-body-small-14px-semibold text-content-primary", children }),
+              description && /* @__PURE__ */ jsx("span", { className: "typography-description-12px-regular text-content-secondary", children: description })
+            ] })
+          ] })
+        ] }),
         showIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 motion-safe:transition-transform motion-safe:duration-200 [[data-state=open]>&]:rotate-180", children: iconElement })
       ]
     }

package/dist/components/Accordion/AccordionTrigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionTrigger.mjs","sources":["../../../src/components/Accordion/AccordionTrigger.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Props for the {@link AccordionTrigger} button component. */\nexport type AccordionTriggerProps = React.ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Trigger\n> & {\n  /** Custom icon element. Defaults to `ChevronDownIcon`. Pass `null` to suppress the icon entirely. */\n  icon?: React.ReactNode | null;\n};\n\n/** An interactive button that toggles the visibility of its associated {@link AccordionContent} panel. */\nexport const AccordionTrigger = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerProps\n>(({ className, children, icon, ...props }, ref) => {\n  const showIcon = icon !== null;\n  const iconElement =\n    icon === undefined ? (\n      <ChevronDownIcon className=\"size-4 shrink-0 text-content-secondary\" />\n    ) : (\n      icon\n    );\n\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          \"flex flex-1 items-center justify-between gap-3\",\n          \"rounded-sm px-3 py-3\",\n          \"typography-body-small-14px-semibold text-content-primary\",\n          \"cursor-pointer\",\n          \"motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out\",\n          \"hover:bg-neutral-alphas-100\",\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"min-w-0 flex-1 truncate text-left\">{children}</span>\n        {showIcon && (\n          <span className=\"shrink-0 motion-safe:transition-transform motion-safe:duration-200 [[data-state=open]>&]:rotate-180\">\n            {iconElement}\n          </span>\n        )}\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n});\n\nAccordionTrigger.displayName = \"AccordionTrigger\";\n"],"names":[],"mappings":";;;;;;AAcO,MAAM,mBAAmB,MAAM,WAGpC,CAAC,EAAE,WAAW,UAAU,MAAM,GAAG,MAAA,GAAS,QAAQ;AAClD,QAAM,WAAW,SAAS;AAC1B,QAAM,cACJ,SAAS,6BACN,iBAAA,EAAgB,WAAU,0CAAyC,IAEpE;AAGJ,SACE,oBAAC,mBAAmB,QAAnB,EAA0B,WAAU,QACnC,UAAA;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,qCAAqC,SAAA,CAAS;AAAA,QAC7D,YACC,oBAAC,QAAA,EAAK,WAAU,uGACb,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ,CAAC;AAED,iBAAiB,cAAc;"}
+{"version":3,"file":"AccordionTrigger.mjs","sources":["../../../src/components/Accordion/AccordionTrigger.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Props for the {@link AccordionTrigger} button component. */\nexport type AccordionTriggerProps = React.ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Trigger\n> & {\n  /** Trailing indicator icon. Defaults to `ChevronDownIcon` (rotates when open). Pass `null` to suppress it. */\n  icon?: React.ReactNode | null;\n  /** Secondary line rendered under the title, for extra context. */\n  description?: React.ReactNode;\n  /** Leading icon shown before the title (sized to 16px). */\n  leadingIcon?: React.ReactNode;\n  /** Leading avatar shown before the title, for headers representing a person or account. Pass an `Avatar` sized to `24`. */\n  avatar?: React.ReactNode;\n};\n\n/** An interactive button that toggles the visibility of its associated {@link AccordionContent} panel. */\nexport const AccordionTrigger = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerProps\n>(({ className, children, icon, description, leadingIcon, avatar, ...props }, ref) => {\n  const showIcon = icon !== null;\n  const iconElement =\n    icon === undefined ? (\n      <ChevronDownIcon className=\"size-4 shrink-0 text-content-secondary\" />\n    ) : (\n      icon\n    );\n\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          \"flex flex-1 items-center justify-between gap-3\",\n          \"rounded-sm px-3 py-3\",\n          \"typography-body-small-14px-semibold text-content-primary\",\n          \"cursor-pointer\",\n          \"motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out\",\n          \"hover:bg-neutral-alphas-100\",\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"flex min-w-0 flex-1 items-center gap-3\">\n          {avatar && (\n            <span className=\"flex shrink-0 items-center\" aria-hidden=\"true\">\n              {avatar}\n            </span>\n          )}\n          <span className=\"flex min-w-0 flex-1 items-start gap-2 text-left\">\n            {leadingIcon && (\n              <span className=\"flex shrink-0 items-center pt-px [&>svg]:size-4\" aria-hidden=\"true\">\n                {leadingIcon}\n              </span>\n            )}\n            <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n              <span className=\"truncate typography-body-small-14px-semibold text-content-primary\">\n                {children}\n              </span>\n              {description && (\n                <span className=\"typography-description-12px-regular text-content-secondary\">\n                  {description}\n                </span>\n              )}\n            </span>\n          </span>\n        </span>\n        {showIcon && (\n          <span className=\"shrink-0 motion-safe:transition-transform motion-safe:duration-200 [[data-state=open]>&]:rotate-180\">\n            {iconElement}\n          </span>\n        )}\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n});\n\nAccordionTrigger.displayName = \"AccordionTrigger\";\n"],"names":[],"mappings":";;;;;;AAoBO,MAAM,mBAAmB,MAAM,WAGpC,CAAC,EAAE,WAAW,UAAU,MAAM,aAAa,aAAa,QAAQ,GAAG,MAAA,GAAS,QAAQ;AACpF,QAAM,WAAW,SAAS;AAC1B,QAAM,cACJ,SAAS,6BACN,iBAAA,EAAgB,WAAU,0CAAyC,IAEpE;AAGJ,SACE,oBAAC,mBAAmB,QAAnB,EAA0B,WAAU,QACnC,UAAA;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,qBAAC,QAAA,EAAK,WAAU,0CACb,UAAA;AAAA,UAAA,8BACE,QAAA,EAAK,WAAU,8BAA6B,eAAY,QACtD,UAAA,QACH;AAAA,UAEF,qBAAC,QAAA,EAAK,WAAU,mDACb,UAAA;AAAA,YAAA,mCACE,QAAA,EAAK,WAAU,mDAAkD,eAAY,QAC3E,UAAA,aACH;AAAA,YAEF,qBAAC,QAAA,EAAK,WAAU,sCACd,UAAA;AAAA,cAAA,oBAAC,QAAA,EAAK,WAAU,qEACb,SAAA,CACH;AAAA,cACC,eACC,oBAAC,QAAA,EAAK,WAAU,8DACb,UAAA,YAAA,CACH;AAAA,YAAA,EAAA,CAEJ;AAAA,UAAA,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QACC,YACC,oBAAC,QAAA,EAAK,WAAU,uGACb,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ,CAAC;AAED,iBAAiB,cAAc;"}