@fanvue/ui 1.0.0 → 1.1.0

package/README.md

@@ -18,28 +18,50 @@ React component library built with Tailwind CSS for the Fanvue ecosystem.
 - 📝 **TypeScript** - Full type definitions included
 - 🧪 **Tested** - Unit tests with Vitest, E2E with Playwright
 
-### Getting Started
+## Setup
+
+### 1. Install
 
 ```bash
 npm i @fanvue/ui
 ```
 
-### Peer Dependencies
+### 2. Peer dependencies
 
 ```bash
-npm i react react-dom tailwindcss react-day-picker
-```
+# Required
+npm i react react-dom tailwindcss
 
-## Setup
+# Only if using DatePicker
+npm i react-day-picker
+```
 
-### 1. Import Styles
+### 3. Configure CSS
 
-Add the fanv-ui styles to your CSS entry point:
+Add the following to your CSS entry point (e.g. `app.css`):
 
 ```css
+@import "tailwindcss";
+@source "../node_modules/@fanvue/ui";
 @import "@fanvue/ui/styles/theme.css";
 ```
 
+### 4. Load Inter font
+
+Load the [Inter](https://fonts.google.com/specimen/Inter) typeface via Google Fonts or `@fontsource-variable/inter`:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" />
+```
+
+or
+
+```bash
+npm i @fontsource-variable/inter
+```
+
 ## Usage
 
 ```tsx

package/dist/cjs/components/Badge/Badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.cjs","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst badgeVariants = {\n  variant: {\n    default: \"bg-neutral-100 text-neutral-400\",\n    dark: \"bg-background-800 text-body-300 dark:text-body-white-solid-constant\",\n    success: \"bg-neutral-100 text-neutral-400\",\n    warning: \"bg-neutral-100 text-neutral-400\",\n    error: \"bg-neutral-100 text-neutral-400\",\n    special: \"bg-neutral-100 text-neutral-400\",\n    info: \"bg-neutral-100 text-neutral-400\",\n    online: \"bg-background-200 text-brand-green-500\",\n    brand: \"bg-brand-green-500 text-body-black-solid-constant\",\n    pink: \"bg-brand-pink-500 text-body-black-solid-constant\",\n    brandLight: \"bg-brand-green-50 text-body-black-solid-constant\",\n    pinkLight: \"bg-brand-pink-50 text-body-black-solid-constant\",\n  },\n  dotColor: {\n    default: \"bg-body-black-solid-constant\",\n    dark: \"bg-body-300 dark:bg-body-white-solid-constant\",\n    success: \"bg-success-500\",\n    warning: \"bg-warning-500\",\n    error: \"bg-error-500\",\n    special: \"bg-special-500\",\n    info: \"bg-info-500\",\n    online: \"bg-brand-green-500\",\n    brand: \"bg-body-black-solid-constant\",\n    pink: \"bg-body-black-solid-constant\",\n    brandLight: \"bg-body-black-solid-constant\",\n    pinkLight: \"bg-body-black-solid-constant\",\n  },\n} as const;\n\nexport type BadgeVariant = keyof typeof badgeVariants.variant;\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Visual style variant of the badge */\n  variant?: BadgeVariant;\n  /** Show left status indicator dot */\n  leftDot?: boolean;\n  /** Left icon element */\n  leftIcon?: React.ReactNode;\n  /** Right icon element */\n  rightIcon?: React.ReactNode;\n  /** Render as a different element using Radix Slot */\n  asChild?: boolean;\n}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      leftDot = true,\n      leftIcon,\n      rightIcon,\n      asChild = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        data-testid=\"badge\"\n        className={cn(\n          // Base styles\n          \"typography-caption-semibold inline-flex h-5 items-center gap-2 rounded-full px-2\",\n          // Variant styles\n          badgeVariants.variant[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        {leftIcon && (\n          <span className=\"flex\" aria-hidden=\"true\">\n            {leftIcon}\n          </span>\n        )}\n        {leftDot && (\n          <span\n            className={cn(\"size-1 shrink-0 rounded-full\", badgeVariants.dotColor[variant])}\n            aria-hidden=\"true\"\n          />\n        )}\n        <Slottable>{children}</Slottable>\n        {rightIcon && (\n          <span className=\"flex\" aria-hidden=\"true\">\n            {rightIcon}\n          </span>\n        )}\n      </Comp>\n    );\n  },\n);\n\nBadge.displayName = \"Badge\";\n"],"names":["React","Slot","jsxs","cn","jsx","Slottable"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,UAAU;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAEf;AAiBO,MAAM,QAAQA,iBAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,OAAO,UAAUC,UAAAA,OAAO;AAE9B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA;AAAAA,UAET;AAAA;AAAA,UAEA,cAAc,QAAQ,OAAO;AAAA;AAAA,UAE7B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,2CACE,QAAA,EAAK,WAAU,QAAO,eAAY,QAChC,UAAA,UACH;AAAA,UAED,WACCC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA,GAAG,gCAAgC,cAAc,SAAS,OAAO,CAAC;AAAA,cAC7E,eAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAGhBC,+BAACC,UAAAA,aAAW,UAAS;AAAA,UACpB,aACCD,2BAAAA,IAAC,QAAA,EAAK,WAAU,QAAO,eAAY,QAChC,UAAA,UAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;;"}
+{"version":3,"file":"Badge.cjs","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst badgeVariants = {\n  variant: {\n    default: \"bg-neutral-100 text-neutral-400\",\n    dark: \"bg-background-800 text-body-300 dark:text-body-white-solid-constant\",\n    success: \"bg-neutral-100 text-neutral-400\",\n    warning: \"bg-neutral-100 text-neutral-400\",\n    error: \"bg-neutral-100 text-neutral-400\",\n    special: \"bg-neutral-100 text-neutral-400\",\n    info: \"bg-neutral-100 text-neutral-400\",\n    online: \"bg-background-200 text-brand-green-500\",\n    brand: \"bg-brand-green-500 text-body-black-solid-constant\",\n    pink: \"bg-brand-pink-500 text-body-black-solid-constant\",\n    brandLight: \"bg-brand-green-50 text-body-black-solid-constant\",\n    pinkLight: \"bg-brand-pink-50 text-body-black-solid-constant\",\n  },\n  dotColor: {\n    default: \"bg-body-black-solid-constant\",\n    dark: \"bg-body-300 dark:bg-body-white-solid-constant\",\n    success: \"bg-success-500\",\n    warning: \"bg-warning-500\",\n    error: \"bg-error-500\",\n    special: \"bg-special-500\",\n    info: \"bg-info-500\",\n    online: \"bg-brand-green-500\",\n    brand: \"bg-body-black-solid-constant\",\n    pink: \"bg-body-black-solid-constant\",\n    brandLight: \"bg-body-black-solid-constant\",\n    pinkLight: \"bg-body-black-solid-constant\",\n  },\n} as const;\n\nexport type BadgeVariant =\n  | \"default\"\n  | \"dark\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"special\"\n  | \"info\"\n  | \"online\"\n  | \"brand\"\n  | \"pink\"\n  | \"brandLight\"\n  | \"pinkLight\";\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Visual style variant of the badge */\n  variant?: BadgeVariant;\n  /** Show left status indicator dot */\n  leftDot?: boolean;\n  /** Left icon element */\n  leftIcon?: React.ReactNode;\n  /** Right icon element */\n  rightIcon?: React.ReactNode;\n  /** Render as a different element using Radix Slot */\n  asChild?: boolean;\n}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      leftDot = true,\n      leftIcon,\n      rightIcon,\n      asChild = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        data-testid=\"badge\"\n        className={cn(\n          // Base styles\n          \"typography-caption-semibold inline-flex h-5 items-center gap-2 rounded-full px-2\",\n          // Variant styles\n          badgeVariants.variant[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        {leftIcon && (\n          <span className=\"flex\" aria-hidden=\"true\">\n            {leftIcon}\n          </span>\n        )}\n        {leftDot && (\n          <span\n            className={cn(\"size-1 shrink-0 rounded-full\", badgeVariants.dotColor[variant])}\n            aria-hidden=\"true\"\n          />\n        )}\n        <Slottable>{children}</Slottable>\n        {rightIcon && (\n          <span className=\"flex\" aria-hidden=\"true\">\n            {rightIcon}\n          </span>\n        )}\n      </Comp>\n    );\n  },\n);\n\nBadge.displayName = \"Badge\";\n"],"names":["React","Slot","jsxs","cn","jsx","Slottable"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,UAAU;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAEf;AA6BO,MAAM,QAAQA,iBAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,OAAO,UAAUC,UAAAA,OAAO;AAE9B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA;AAAAA,UAET;AAAA;AAAA,UAEA,cAAc,QAAQ,OAAO;AAAA;AAAA,UAE7B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,2CACE,QAAA,EAAK,WAAU,QAAO,eAAY,QAChC,UAAA,UACH;AAAA,UAED,WACCC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA,GAAG,gCAAgC,cAAc,SAAS,OAAO,CAAC;AAAA,cAC7E,eAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAGhBC,+BAACC,UAAAA,aAAW,UAAS;AAAA,UACpB,aACCD,2BAAAA,IAAC,QAAA,EAAK,WAAU,QAAO,eAAY,QAChC,UAAA,UAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;;"}

package/dist/cjs/components/Checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { MinusIcon } from \"../Icons/MinusIcon\";\n\nexport type CheckboxSize = \"default\" | \"small\";\n\nexport interface CheckboxProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"asChild\"> {\n  /** Size variant for label and helper text */\n  size?: CheckboxSize;\n  /** Label text displayed next to the checkbox */\n  label?: string;\n  /** Helper text displayed below the label */\n  helperText?: string;\n}\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, size = \"default\", label, helperText, disabled, name, ...props }, ref) => {\n    const id = React.useId();\n    const helperTextId = helperText ? `${id}-helper` : undefined;\n    const hasLabel = Boolean(label || helperText);\n\n    // Hidden input for form library compatibility (e.g. react-hook-form register)\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n    const handleCheckedChange = (value: boolean | \"indeterminate\") => {\n      const checked = value === true;\n      if (inputRef.current) {\n        inputRef.current.checked = checked;\n        inputRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n      }\n      props.onCheckedChange?.(value);\n    };\n\n    const checkboxElement = (\n      <span\n        className={cn(\n          \"relative inline-flex size-5 shrink-0\",\n          // Alignment when used with label\n          label && (helperText ? \"mt-1\" : \"mt-0.5\"),\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          name={name}\n          disabled={disabled}\n          aria-hidden\n          tabIndex={-1}\n          onChange={() => {}}\n          className=\"pointer-events-none absolute size-px overflow-hidden opacity-0\"\n          style={{ clip: \"rect(0,0,0,0)\" }}\n        />\n        <CheckboxPrimitive.Root\n          id={id}\n          disabled={disabled}\n          aria-describedby={helperTextId}\n          data-testid=\"checkbox\"\n          {...props}\n          onCheckedChange={handleCheckedChange}\n          className={cn(\n            // Base styles\n            \"flex size-5 items-center justify-center rounded border-2\",\n            \"transition-[border-color,background-color,color,box-shadow] duration-150\",\n            // Default state\n            \"border-body-100 bg-transparent text-transparent\",\n            // Checked state\n            \"data-[state=checked]:border-body-100 data-[state=checked]:bg-body-100 data-[state=checked]:text-body-300\",\n            // Indeterminate state\n            \"data-[state=indeterminate]:border-body-100 data-[state=indeterminate]:bg-body-100 data-[state=indeterminate]:text-body-300\",\n            // Hover state\n            \"hover:ring-2 hover:ring-brand-green-500 group-hover:ring-2 group-hover:ring-brand-green-500\",\n            // Focus state\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background-inverse-solid\",\n            // Disabled state\n            \"disabled:cursor-not-allowed disabled:border-disabled-400 disabled:ring-0 disabled:group-hover:ring-0\",\n            \"disabled:data-[state=checked]:border-disabled-400 disabled:data-[state=checked]:bg-disabled-400 disabled:data-[state=checked]:text-disabled-100\",\n            !hasLabel && className,\n          )}\n        >\n          <CheckboxPrimitive.Indicator\n            forceMount\n            className={cn(\n              \"flex size-3 items-center justify-center text-body-300\",\n              \"data-[state=unchecked]:invisible\",\n            )}\n          >\n            {props.checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n          </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n      </span>\n    );\n\n    if (!hasLabel) {\n      return checkboxElement;\n    }\n\n    return (\n      <div\n        className={cn(\n          \"inline-flex flex-col gap-0.5\",\n          disabled && \"is-disabled cursor-not-allowed\",\n          className,\n        )}\n      >\n        <div className=\"group inline-flex items-start gap-2\">\n          {checkboxElement}\n          {label && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"cursor-pointer select-none text-body-100\",\n                \"group-has-disabled:cursor-not-allowed group-has-disabled:text-disabled-100\",\n                size === \"small\" ? \"typography-body-2-semibold\" : \"typography-body-1-semibold\",\n              )}\n            >\n              {label}\n            </label>\n          )}\n        </div>\n        {helperText && (\n          <span\n            id={helperTextId}\n            className={cn(\n              \"ml-7 text-body-200\",\n              \"in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-disabled-100\",\n              size === \"small\" ? \"typography-caption-regular\" : \"typography-body-2-regular\",\n            )}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["React","jsxs","cn","jsx","CheckboxPrimitive","MinusIcon","CheckIcon"],"mappings":"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"}
+{"version":3,"file":"Checkbox.cjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { MinusIcon } from \"../Icons/MinusIcon\";\n\nexport type CheckboxSize = \"default\" | \"small\";\n\nexport interface CheckboxProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"asChild\"> {\n  /** Size variant for label and helper text */\n  size?: CheckboxSize;\n  /** Label text displayed next to the checkbox */\n  label?: string;\n  /** Helper text displayed below the label */\n  helperText?: string;\n}\n\n/**\n * The ref type is intentionally `HTMLInputElement` (not `HTMLButtonElement`) for form library\n * compatibility. Libraries like react-hook-form call `register()` which expects an `HTMLInputElement`\n * ref. A hidden `<input>` is synced to the Radix checkbox state via `useImperativeHandle`.\n */\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, size = \"default\", label, helperText, disabled, name, ...props }, ref) => {\n    const id = React.useId();\n    const helperTextId = helperText ? `${id}-helper` : undefined;\n    const hasLabel = Boolean(label || helperText);\n\n    // Hidden input for form library compatibility (e.g. react-hook-form register)\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n    const handleCheckedChange = (value: boolean | \"indeterminate\") => {\n      const checked = value === true;\n      if (inputRef.current) {\n        inputRef.current.checked = checked;\n        inputRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n      }\n      props.onCheckedChange?.(value);\n    };\n\n    const checkboxElement = (\n      <span\n        className={cn(\n          \"relative inline-flex size-5 shrink-0\",\n          // Alignment when used with label\n          label && (helperText ? \"mt-1\" : \"mt-0.5\"),\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          name={name}\n          disabled={disabled}\n          aria-hidden\n          tabIndex={-1}\n          onChange={() => {}}\n          className=\"pointer-events-none absolute size-px overflow-hidden opacity-0\"\n          style={{ clip: \"rect(0,0,0,0)\" }}\n        />\n        <CheckboxPrimitive.Root\n          id={id}\n          disabled={disabled}\n          aria-describedby={helperTextId}\n          data-testid=\"checkbox\"\n          {...props}\n          onCheckedChange={handleCheckedChange}\n          className={cn(\n            // Base styles\n            \"flex size-5 items-center justify-center rounded border-2\",\n            \"transition-[border-color,background-color,color,box-shadow] duration-150\",\n            // Default state\n            \"border-body-100 bg-transparent text-transparent\",\n            // Checked state\n            \"data-[state=checked]:border-body-100 data-[state=checked]:bg-body-100 data-[state=checked]:text-body-300\",\n            // Indeterminate state\n            \"data-[state=indeterminate]:border-body-100 data-[state=indeterminate]:bg-body-100 data-[state=indeterminate]:text-body-300\",\n            // Hover state\n            \"hover:ring-2 hover:ring-brand-green-500 group-hover:ring-2 group-hover:ring-brand-green-500\",\n            // Focus state\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background-inverse-solid\",\n            // Disabled state\n            \"disabled:cursor-not-allowed disabled:border-disabled-400 disabled:ring-0 disabled:group-hover:ring-0\",\n            \"disabled:data-[state=checked]:border-disabled-400 disabled:data-[state=checked]:bg-disabled-400 disabled:data-[state=checked]:text-disabled-100\",\n            !hasLabel && className,\n          )}\n        >\n          <CheckboxPrimitive.Indicator\n            forceMount\n            className={cn(\n              \"flex size-3 items-center justify-center text-body-300\",\n              \"data-[state=unchecked]:invisible\",\n            )}\n          >\n            {props.checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n          </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n      </span>\n    );\n\n    if (!hasLabel) {\n      return checkboxElement;\n    }\n\n    return (\n      <div\n        className={cn(\n          \"inline-flex flex-col gap-0.5\",\n          disabled && \"is-disabled cursor-not-allowed\",\n          className,\n        )}\n      >\n        <div className=\"group inline-flex items-start gap-2\">\n          {checkboxElement}\n          {label && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"cursor-pointer select-none text-body-100\",\n                \"group-has-disabled:cursor-not-allowed group-has-disabled:text-disabled-100\",\n                size === \"small\" ? \"typography-body-2-semibold\" : \"typography-body-1-semibold\",\n              )}\n            >\n              {label}\n            </label>\n          )}\n        </div>\n        {helperText && (\n          <span\n            id={helperTextId}\n            className={cn(\n              \"ml-7 text-body-200\",\n              \"in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-disabled-100\",\n              size === \"small\" ? \"typography-caption-regular\" : \"typography-body-2-regular\",\n            )}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["React","jsxs","cn","jsx","CheckboxPrimitive","MinusIcon","CheckIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,MAAM,WAAWA,iBAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,OAAO,WAAW,OAAO,YAAY,UAAU,MAAM,GAAG,MAAA,GAAS,QAAQ;AACrF,UAAM,KAAKA,iBAAM,MAAA;AACjB,UAAM,eAAe,aAAa,GAAG,EAAE,YAAY;AACnD,UAAM,WAAW,QAAQ,SAAS,UAAU;AAG5C,UAAM,WAAWA,iBAAM,OAAyB,IAAI;AACpDA,qBAAM,oBAAoB,KAAK,MAAM,SAAS,OAA2B;AAEzE,UAAM,sBAAsB,CAAC,UAAqC;AAChE,YAAM,UAAU,UAAU;AAC1B,UAAI,SAAS,SAAS;AACpB,iBAAS,QAAQ,UAAU;AAC3B,iBAAS,QAAQ,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAA,CAAM,CAAC;AAAA,MACvE;AACA,YAAM,kBAAkB,KAAK;AAAA,IAC/B;AAEA,UAAM,kBACJC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,GAAAA;AAAAA,UACT;AAAA;AAAA,UAEA,UAAU,aAAa,SAAS;AAAA,QAAA;AAAA,QAGlC,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,MAAK;AAAA,cACL;AAAA,cACA;AAAA,cACA,eAAW;AAAA,cACX,UAAU;AAAA,cACV,UAAU,MAAM;AAAA,cAAC;AAAA,cACjB,WAAU;AAAA,cACV,OAAO,EAAE,MAAM,gBAAA;AAAA,YAAgB;AAAA,UAAA;AAAA,UAEjCA,2BAAAA;AAAAA,YAACC,6BAAkB;AAAA,YAAlB;AAAA,cACC;AAAA,cACA;AAAA,cACA,oBAAkB;AAAA,cAClB,eAAY;AAAA,cACX,GAAG;AAAA,cACJ,iBAAiB;AAAA,cACjB,WAAWF,GAAAA;AAAAA;AAAAA,gBAET;AAAA,gBACA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA,gBACA;AAAA,gBACA,CAAC,YAAY;AAAA,cAAA;AAAA,cAGf,UAAAC,2BAAAA;AAAAA,gBAACC,6BAAkB;AAAA,gBAAlB;AAAA,kBACC,YAAU;AAAA,kBACV,WAAWF,GAAAA;AAAAA,oBACT;AAAA,oBACA;AAAA,kBAAA;AAAA,kBAGD,gBAAM,YAAY,iDAAmBG,UAAAA,WAAA,EAAU,mCAAMC,UAAAA,WAAA,CAAA,CAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YAClE;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAIJ,QAAI,CAAC,UAAU;AACb,aAAO;AAAA,IACT;AAEA,WACEL,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,uCACZ,UAAA;AAAA,YAAA;AAAA,YACA,SACCE,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS;AAAA,gBACT,WAAWD,GAAAA;AAAAA,kBACT;AAAA,kBACA;AAAA,kBACA,SAAS,UAAU,+BAA+B;AAAA,gBAAA;AAAA,gBAGnD,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,GAEJ;AAAA,UACC,cACCC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAWD,GAAAA;AAAAA,gBACT;AAAA,gBACA;AAAA,gBACA,SAAS,UAAU,+BAA+B;AAAA,cAAA;AAAA,cAGnD,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,SAAS,cAAc;;"}

package/dist/cjs/components/Count/Count.cjs

@@ -26,7 +26,7 @@ function getDisplayValue(value, max) {
   return value > max ? `${max}+` : value.toString();
 }
 const Count = React__namespace.forwardRef(
-  ({ className, variant = "Default", value = 0, max = 99, asChild = false, children, ...props }, ref) => {
+  ({ className, variant = "default", value = 0, max = 99, asChild = false, children, ...props }, ref) => {
     if (value === 0 && !children) {
       return null;
     }
@@ -37,12 +37,12 @@ const Count = React__namespace.forwardRef(
         ref,
         className: cn.cn(
           "typography-caption-semibold inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 tabular-nums leading-none",
-          variant === "Default" && "bg-error-500 text-body-white-solid-constant",
-          variant === "Brand" && "bg-brand-green-500 text-body-black-solid-constant",
-          variant === "Pink" && "bg-brand-pink-500 text-body-black-solid-constant",
-          variant === "Info" && "bg-info-500 text-body-white-solid-constant",
-          variant === "Success" && "bg-success-500 text-body-white-solid-constant",
-          variant === "Warning" && "bg-warning-500 text-body-black-solid-constant",
+          variant === "default" && "bg-error-500 text-body-white-solid-constant",
+          variant === "brand" && "bg-brand-green-500 text-body-black-solid-constant",
+          variant === "pink" && "bg-brand-pink-500 text-body-black-solid-constant",
+          variant === "info" && "bg-info-500 text-body-white-solid-constant",
+          variant === "success" && "bg-success-500 text-body-white-solid-constant",
+          variant === "warning" && "bg-warning-500 text-body-black-solid-constant",
           className
         ),
         ...props,

package/dist/cjs/components/Count/Count.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Count.cjs","sources":["../../../../src/components/Count/Count.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type CountVariant = \"Default\" | \"Brand\" | \"Pink\" | \"Info\" | \"Success\" | \"Warning\";\n\nfunction getDisplayValue(value: number, max: number): string {\n  return value > max ? `${max}+` : value.toString();\n}\n\nexport interface CountProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Visual style variant of the count */\n  variant?: CountVariant;\n  /** The count value to display */\n  value?: number;\n  /** Maximum value to display before showing overflow (e.g., \"99+\") */\n  max?: number;\n  /** Render as a different element using Radix Slot */\n  asChild?: boolean;\n}\n\nexport const Count = React.forwardRef<HTMLSpanElement, CountProps>(\n  (\n    { className, variant = \"Default\", value = 0, max = 99, asChild = false, children, ...props },\n    ref,\n  ) => {\n    if (value === 0 && !children) {\n      return null;\n    }\n\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          \"typography-caption-semibold inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 tabular-nums leading-none\",\n          variant === \"Default\" && \"bg-error-500 text-body-white-solid-constant\",\n          variant === \"Brand\" && \"bg-brand-green-500 text-body-black-solid-constant\",\n          variant === \"Pink\" && \"bg-brand-pink-500 text-body-black-solid-constant\",\n          variant === \"Info\" && \"bg-info-500 text-body-white-solid-constant\",\n          variant === \"Success\" && \"bg-success-500 text-body-white-solid-constant\",\n          variant === \"Warning\" && \"bg-warning-500 text-body-black-solid-constant\",\n          className,\n        )}\n        {...props}\n      >\n        {children ?? getDisplayValue(value, max)}\n      </Comp>\n    );\n  },\n);\n\nCount.displayName = \"Count\";\n"],"names":["React","Slot","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAMA,SAAS,gBAAgB,OAAe,KAAqB;AAC3D,SAAO,QAAQ,MAAM,GAAG,GAAG,MAAM,MAAM,SAAA;AACzC;AAaO,MAAM,QAAQA,iBAAM;AAAA,EACzB,CACE,EAAE,WAAW,UAAU,WAAW,QAAQ,GAAG,MAAM,IAAI,UAAU,OAAO,UAAU,GAAG,MAAA,GACrF,QACG;AACH,QAAI,UAAU,KAAK,CAAC,UAAU;AAC5B,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,UAAUC,UAAAA,OAAO;AAE9B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,YAAY,gBAAgB,OAAO,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7C;AACF;AAEA,MAAM,cAAc;;"}
+{"version":3,"file":"Count.cjs","sources":["../../../../src/components/Count/Count.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type CountVariant = \"default\" | \"brand\" | \"pink\" | \"info\" | \"success\" | \"warning\";\n\nfunction getDisplayValue(value: number, max: number): string {\n  return value > max ? `${max}+` : value.toString();\n}\n\nexport interface CountProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Visual style variant of the count */\n  variant?: CountVariant;\n  /** The count value to display */\n  value?: number;\n  /** Maximum value to display before showing overflow (e.g., \"99+\") */\n  max?: number;\n  /** Render as a different element using Radix Slot */\n  asChild?: boolean;\n}\n\nexport const Count = React.forwardRef<HTMLSpanElement, CountProps>(\n  (\n    { className, variant = \"default\", value = 0, max = 99, asChild = false, children, ...props },\n    ref,\n  ) => {\n    if (value === 0 && !children) {\n      return null;\n    }\n\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          \"typography-caption-semibold inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 tabular-nums leading-none\",\n          variant === \"default\" && \"bg-error-500 text-body-white-solid-constant\",\n          variant === \"brand\" && \"bg-brand-green-500 text-body-black-solid-constant\",\n          variant === \"pink\" && \"bg-brand-pink-500 text-body-black-solid-constant\",\n          variant === \"info\" && \"bg-info-500 text-body-white-solid-constant\",\n          variant === \"success\" && \"bg-success-500 text-body-white-solid-constant\",\n          variant === \"warning\" && \"bg-warning-500 text-body-black-solid-constant\",\n          className,\n        )}\n        {...props}\n      >\n        {children ?? getDisplayValue(value, max)}\n      </Comp>\n    );\n  },\n);\n\nCount.displayName = \"Count\";\n"],"names":["React","Slot","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAMA,SAAS,gBAAgB,OAAe,KAAqB;AAC3D,SAAO,QAAQ,MAAM,GAAG,GAAG,MAAM,MAAM,SAAA;AACzC;AAaO,MAAM,QAAQA,iBAAM;AAAA,EACzB,CACE,EAAE,WAAW,UAAU,WAAW,QAAQ,GAAG,MAAM,IAAI,UAAU,OAAO,UAAU,GAAG,MAAA,GACrF,QACG;AACH,QAAI,UAAU,KAAK,CAAC,UAAU;AAC5B,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,UAAUC,UAAAA,OAAO;AAE9B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,YAAY,gBAAgB,OAAO,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7C;AACF;AAEA,MAAM,cAAc;;"}

package/dist/cjs/components/IconButton/IconButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Count } from \"../Count/Count\";\n\nconst iconButtonVariants = {\n  primary:\n    \"bg-neutral-400 text-body-300 hover:bg-hover-100 disabled:opacity-50 focus:shadow-focus-ring\",\n  secondary: `bg-neutral-100 text-neutral-400 hover:bg-neutral-200 disabled:opacity-50 focus:focus:shadow-focus-ring`,\n  tertiary: `bg-transparent text-neutral-400 hover:bg-hover-300 disabled:opacity-50 focus:shadow-focus-ring active:bg-brand-green-50`,\n  brand: `bg-body-black-solid-constant text-brand-green-500 hover:bg-brand-green-500 hover:text-body-black-solid-constant disabled:opacity-50 focus:shadow-focus-ring`,\n  contrast: `bg-transparent text-body-white-solid-constant disabled:opacity-50 focus:shadow-focus-ring`,\n  messaging: `bg-body-black-solid-constant text-brand-green-500 hover:bg-brand-green-500 hover:text-body-black-solid-constant disabled:opacity-50 focus:shadow-focus-ring`,\n  navTray: `bg-transparent text-neutral-400 disabled:opacity-50 focus:shadow-focus-ring active:bg-brand-green-50`,\n  tertiaryDestructive: `bg-transparent text-error-500 hover:bg-hover-300 disabled:opacity-50 focus:shadow-focus-ring`,\n  stop: `bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant`,\n  microphone: `bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant`,\n};\n\nconst iconSizeVariants = {\n  24: \"size-4\",\n  32: \"size-5\",\n  40: \"size-6\",\n  52: \"size-7\",\n  72: \"size-8\",\n} as const;\n\nconst sizeVariants = {\n  24: \"p-1\",\n  32: \"p-1.5\",\n  40: \"p-[10px]\",\n  52: \"p-2\",\n  72: \"p-4\",\n} as const;\n\nexport type IconButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"brand\"\n  | \"contrast\"\n  | \"messaging\"\n  | \"navTray\"\n  | \"tertiaryDestructive\"\n  | \"stop\"\n  | \"microphone\";\n\nexport type IconButtonSize = \"24\" | \"32\" | \"40\" | \"52\" | \"72\";\n\nexport interface IconButtonProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"style\"> {\n  /** Visual style variant of the icon button */\n  variant?: IconButtonVariant;\n  /** Size of the button */\n  size?: IconButtonSize;\n  /** Icon element to display */\n  icon: React.ReactNode;\n  /** Counter value to display */\n  counterValue?: number;\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    { className, variant = \"primary\", size = \"40\", icon, counterValue, disabled = false, ...props },\n    ref,\n  ) => {\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-testid=\"icon-button\"\n        disabled={disabled}\n        className={cn(\n          // Base styles\n          \"relative inline-flex shrink-0 items-center justify-center focus-visible:outline-none\",\n          \"cursor-pointer rounded-full transition-all duration-150 ease-in-out disabled:cursor-default\",\n          // Size variants\n          sizeVariants[size],\n          // Variant styles\n          iconButtonVariants[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        <span\n          className={cn(\n            \"flex shrink-0 items-center justify-center overflow-clip\",\n            iconSizeVariants[size],\n          )}\n          aria-hidden=\"true\"\n        >\n          {icon}\n        </span>\n\n        {counterValue !== undefined && (variant === \"tertiary\" || variant === \"navTray\") && (\n          <div className=\"absolute top-0 right-0\">\n            <Count value={counterValue} />\n          </div>\n        )}\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n"],"names":["React","jsxs","cn","jsx","Count"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,qBAAqB;AAAA,EACzB,SACE;AAAA,EACF,WAAW;AAAA,EACX,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AAAA,EACT,qBAAqB;AAAA,EACrB,MAAM;AAAA,EACN,YAAY;AACd;AAEA,MAAM,mBAAmB;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA4BO,MAAM,aAAaA,iBAAM;AAAA,EAC9B,CACE,EAAE,WAAW,UAAU,WAAW,OAAO,MAAM,MAAM,cAAc,WAAW,OAAO,GAAG,MAAA,GACxF,QACG;AACH,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ;AAAA,QACA,WAAWC,GAAAA;AAAAA;AAAAA,UAET;AAAA,UACA;AAAA;AAAA,UAEA,aAAa,IAAI;AAAA;AAAA,UAEjB,mBAAmB,OAAO;AAAA;AAAA,UAE1B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA;AAAAA,gBACT;AAAA,gBACA,iBAAiB,IAAI;AAAA,cAAA;AAAA,cAEvB,eAAY;AAAA,cAEX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,iBAAiB,WAAc,YAAY,cAAc,YAAY,cACpEC,2BAAAA,IAAC,OAAA,EAAI,WAAU,0BACb,UAAAA,2BAAAA,IAACC,MAAAA,OAAA,EAAM,OAAO,cAAc,EAAA,CAC9B;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,WAAW,cAAc;;"}
+{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Count } from \"../Count/Count\";\n\nconst iconButtonVariants = {\n  primary:\n    \"bg-neutral-400 text-body-300 hover:bg-hover-100 disabled:opacity-50 focus:shadow-focus-ring\",\n  secondary: `bg-neutral-100 text-neutral-400 hover:bg-neutral-200 disabled:opacity-50 focus:focus:shadow-focus-ring`,\n  tertiary: `bg-transparent text-neutral-400 hover:bg-hover-300 disabled:opacity-50 focus:shadow-focus-ring active:bg-brand-green-50`,\n  brand: `bg-body-black-solid-constant text-brand-green-500 hover:bg-brand-green-500 hover:text-body-black-solid-constant disabled:opacity-50 focus:shadow-focus-ring`,\n  contrast: `bg-transparent text-body-white-solid-constant disabled:opacity-50 focus:shadow-focus-ring`,\n  messaging: `bg-body-black-solid-constant text-brand-green-500 hover:bg-brand-green-500 hover:text-body-black-solid-constant disabled:opacity-50 focus:shadow-focus-ring`,\n  navTray: `bg-transparent text-neutral-400 disabled:opacity-50 focus:shadow-focus-ring active:bg-brand-green-50`,\n  tertiaryDestructive: `bg-transparent text-error-500 hover:bg-hover-300 disabled:opacity-50 focus:shadow-focus-ring`,\n  stop: `bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant`,\n  microphone: `bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant`,\n};\n\nconst iconSizeVariants = {\n  24: \"size-4\",\n  32: \"size-5\",\n  40: \"size-6\",\n  52: \"size-7\",\n  72: \"size-8\",\n} as const;\n\nconst sizeVariants = {\n  24: \"p-1\",\n  32: \"p-1.5\",\n  40: \"p-[10px]\",\n  52: \"p-2\",\n  72: \"p-4\",\n} as const;\n\nexport type IconButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"brand\"\n  | \"contrast\"\n  | \"messaging\"\n  | \"navTray\"\n  | \"tertiaryDestructive\"\n  | \"stop\"\n  | \"microphone\";\n\nexport type IconButtonSize = \"24\" | \"32\" | \"40\" | \"52\" | \"72\";\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the icon button */\n  variant?: IconButtonVariant;\n  /** Size of the button */\n  size?: IconButtonSize;\n  /** Icon element to display */\n  icon: React.ReactNode;\n  /** Counter value to display */\n  counterValue?: number;\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    { className, variant = \"primary\", size = \"40\", icon, counterValue, disabled = false, ...props },\n    ref,\n  ) => {\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-testid=\"icon-button\"\n        disabled={disabled}\n        className={cn(\n          // Base styles\n          \"relative inline-flex shrink-0 items-center justify-center focus-visible:outline-none\",\n          \"cursor-pointer rounded-full transition-all duration-150 ease-in-out disabled:cursor-default\",\n          // Size variants\n          sizeVariants[size],\n          // Variant styles\n          iconButtonVariants[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        <span\n          className={cn(\n            \"flex shrink-0 items-center justify-center overflow-clip\",\n            iconSizeVariants[size],\n          )}\n          aria-hidden=\"true\"\n        >\n          {icon}\n        </span>\n\n        {counterValue !== undefined && (variant === \"tertiary\" || variant === \"navTray\") && (\n          <div className=\"absolute top-0 right-0\">\n            <Count value={counterValue} />\n          </div>\n        )}\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n"],"names":["React","jsxs","cn","jsx","Count"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,qBAAqB;AAAA,EACzB,SACE;AAAA,EACF,WAAW;AAAA,EACX,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AAAA,EACT,qBAAqB;AAAA,EACrB,MAAM;AAAA,EACN,YAAY;AACd;AAEA,MAAM,mBAAmB;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA2BO,MAAM,aAAaA,iBAAM;AAAA,EAC9B,CACE,EAAE,WAAW,UAAU,WAAW,OAAO,MAAM,MAAM,cAAc,WAAW,OAAO,GAAG,MAAA,GACxF,QACG;AACH,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ;AAAA,QACA,WAAWC,GAAAA;AAAAA;AAAAA,UAET;AAAA,UACA;AAAA;AAAA,UAEA,aAAa,IAAI;AAAA;AAAA,UAEjB,mBAAmB,OAAO;AAAA;AAAA,UAE1B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA;AAAAA,gBACT;AAAA,gBACA,iBAAiB,IAAI;AAAA,cAAA;AAAA,cAEvB,eAAY;AAAA,cAEX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,iBAAiB,WAAc,YAAY,cAAc,YAAY,cACpEC,2BAAAA,IAAC,OAAA,EAAI,WAAU,0BACb,UAAAA,2BAAAA,IAACC,MAAAA,OAAA,EAAM,OAAO,cAAc,EAAA,CAC9B;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,WAAW,cAAc;;"}

package/dist/cjs/components/Icons/InfoIcon.cjs

@@ -17,8 +17,8 @@ const InfoIcon = React.forwardRef(
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
-          "fill-rule": "evenodd",
-          "clip-rule": "evenodd",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
           d: "M10.315 2C8.67045 2 7.06283 2.48767 5.69544 3.40133C4.32804 4.31499 3.26229 5.61362 2.63295 7.13299C2.0036 8.65235 1.83894 10.3242 2.15977 11.9372C2.48061 13.5501 3.27254 15.0317 4.43541 16.1946C5.59828 17.3575 7.07987 18.1494 8.69283 18.4702C10.3058 18.7911 11.9776 18.6264 13.497 17.9971C15.0164 17.3677 16.315 16.302 17.2287 14.9346C18.1423 13.5672 18.63 11.9595 18.63 10.315C18.63 9.22306 18.4149 8.14181 17.9971 7.13299C17.5792 6.12416 16.9667 5.20753 16.1946 4.43541C15.4225 3.66329 14.5058 3.05081 13.497 2.63294C12.4882 2.21507 11.4069 2 10.315 2ZM10.315 7.8205C10.7742 7.8205 11.1465 7.44822 11.1465 6.989C11.1465 6.52977 10.7742 6.1575 10.315 6.1575C9.85577 6.1575 9.4835 6.52977 9.4835 6.989C9.4835 7.44822 9.85577 7.8205 10.315 7.8205ZM9.72702 8.89547C9.88296 8.73953 10.0945 8.65193 10.315 8.65193C10.5355 8.65193 10.747 8.73953 10.9029 8.89547C11.0589 9.0514 11.1465 9.2629 11.1465 9.48343V13.6409C11.1465 13.8615 11.0589 14.0729 10.9029 14.2289C10.747 14.3848 10.5355 14.4724 10.315 14.4724C10.0945 14.4724 9.88296 14.3848 9.72702 14.2289C9.57108 14.0729 9.48348 13.8615 9.48348 13.6409V9.48343C9.48348 9.2629 9.57108 9.0514 9.72702 8.89547Z"
         }
       )

package/dist/cjs/components/Icons/InfoIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InfoIcon.cjs","sources":["../../../../src/components/Icons/InfoIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const InfoIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n      className={cn(\"size-5\", className)}\n      {...props}\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M10.315 2C8.67045 2 7.06283 2.48767 5.69544 3.40133C4.32804 4.31499 3.26229 5.61362 2.63295 7.13299C2.0036 8.65235 1.83894 10.3242 2.15977 11.9372C2.48061 13.5501 3.27254 15.0317 4.43541 16.1946C5.59828 17.3575 7.07987 18.1494 8.69283 18.4702C10.3058 18.7911 11.9776 18.6264 13.497 17.9971C15.0164 17.3677 16.315 16.302 17.2287 14.9346C18.1423 13.5672 18.63 11.9595 18.63 10.315C18.63 9.22306 18.4149 8.14181 17.9971 7.13299C17.5792 6.12416 16.9667 5.20753 16.1946 4.43541C15.4225 3.66329 14.5058 3.05081 13.497 2.63294C12.4882 2.21507 11.4069 2 10.315 2ZM10.315 7.8205C10.7742 7.8205 11.1465 7.44822 11.1465 6.989C11.1465 6.52977 10.7742 6.1575 10.315 6.1575C9.85577 6.1575 9.4835 6.52977 9.4835 6.989C9.4835 7.44822 9.85577 7.8205 10.315 7.8205ZM9.72702 8.89547C9.88296 8.73953 10.0945 8.65193 10.315 8.65193C10.5355 8.65193 10.747 8.73953 10.9029 8.89547C11.0589 9.0514 11.1465 9.2629 11.1465 9.48343V13.6409C11.1465 13.8615 11.0589 14.0729 10.9029 14.2289C10.747 14.3848 10.5355 14.4724 10.315 14.4724C10.0945 14.4724 9.88296 14.3848 9.72702 14.2289C9.57108 14.0729 9.48348 13.8615 9.48348 13.6409V9.48343C9.48348 9.2629 9.57108 9.0514 9.72702 8.89547Z\"\n      />\n    </svg>\n  ),\n);\n\nInfoIcon.displayName = \"InfoIcon\";\n"],"names":["jsx","cn"],"mappings":";;;;;;AAIO,MAAM,WAAW,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxBA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAWC,GAAAA,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAAD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAU;AAAA,UACV,aAAU;AAAA,UACV,GAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGN;AAEA,SAAS,cAAc;;"}
+{"version":3,"file":"InfoIcon.cjs","sources":["../../../../src/components/Icons/InfoIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const InfoIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n      className={cn(\"size-5\", className)}\n      {...props}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M10.315 2C8.67045 2 7.06283 2.48767 5.69544 3.40133C4.32804 4.31499 3.26229 5.61362 2.63295 7.13299C2.0036 8.65235 1.83894 10.3242 2.15977 11.9372C2.48061 13.5501 3.27254 15.0317 4.43541 16.1946C5.59828 17.3575 7.07987 18.1494 8.69283 18.4702C10.3058 18.7911 11.9776 18.6264 13.497 17.9971C15.0164 17.3677 16.315 16.302 17.2287 14.9346C18.1423 13.5672 18.63 11.9595 18.63 10.315C18.63 9.22306 18.4149 8.14181 17.9971 7.13299C17.5792 6.12416 16.9667 5.20753 16.1946 4.43541C15.4225 3.66329 14.5058 3.05081 13.497 2.63294C12.4882 2.21507 11.4069 2 10.315 2ZM10.315 7.8205C10.7742 7.8205 11.1465 7.44822 11.1465 6.989C11.1465 6.52977 10.7742 6.1575 10.315 6.1575C9.85577 6.1575 9.4835 6.52977 9.4835 6.989C9.4835 7.44822 9.85577 7.8205 10.315 7.8205ZM9.72702 8.89547C9.88296 8.73953 10.0945 8.65193 10.315 8.65193C10.5355 8.65193 10.747 8.73953 10.9029 8.89547C11.0589 9.0514 11.1465 9.2629 11.1465 9.48343V13.6409C11.1465 13.8615 11.0589 14.0729 10.9029 14.2289C10.747 14.3848 10.5355 14.4724 10.315 14.4724C10.0945 14.4724 9.88296 14.3848 9.72702 14.2289C9.57108 14.0729 9.48348 13.8615 9.48348 13.6409V9.48343C9.48348 9.2629 9.57108 9.0514 9.72702 8.89547Z\"\n      />\n    </svg>\n  ),\n);\n\nInfoIcon.displayName = \"InfoIcon\";\n"],"names":["jsx","cn"],"mappings":";;;;;;AAIO,MAAM,WAAW,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxBA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAWC,GAAAA,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAAD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,UAAS;AAAA,UACT,GAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGN;AAEA,SAAS,cAAc;;"}

package/dist/cjs/components/Icons/MicrophoneIcon.cjs

@@ -2,30 +2,54 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const MicrophoneIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    className,
-    "aria-hidden": "true",
-    viewBox: "0 0 40 40",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M19.4331 24.7875C21.2249 24.7875 22.9433 24.1136 24.2103 22.9141C25.4773 21.7146 26.1891 20.0877 26.1891 18.3913V10.3962C26.1891 8.69979 25.4773 7.0729 24.2103 5.87339C22.9433 4.67388 21.2249 4 19.4331 4C17.6413 4 15.9229 4.67388 14.656 5.87339C13.389 7.0729 12.6772 8.69979 12.6772 10.3962V18.3913C12.6772 20.0877 13.389 21.7146 14.656 22.9141C15.9229 24.1136 17.6413 24.7875 19.4331 24.7875ZM16.0552 10.3962C16.0552 9.54797 16.411 8.73453 17.0445 8.13477C17.678 7.53502 18.5372 7.19808 19.4331 7.19808C20.329 7.19808 21.1882 7.53502 21.8217 8.13477C22.4552 8.73453 22.8111 9.54797 22.8111 10.3962V18.3913C22.8111 19.2395 22.4552 20.053 21.8217 20.6527C21.1882 21.2525 20.329 21.5894 19.4331 21.5894C18.5372 21.5894 17.678 21.2525 17.0445 20.6527C16.411 20.053 16.0552 19.2395 16.0552 18.3913V10.3962Z",
-          fill: "currentColor"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M30.8662 18.2048C30.8662 17.7454 30.6942 17.3048 30.3879 16.9799C30.0816 16.655 29.6661 16.4725 29.2329 16.4725C28.7998 16.4725 28.3843 16.655 28.078 16.9799C27.7717 17.3048 27.5996 17.7454 27.5996 18.2048C27.5996 20.502 26.7392 22.7051 25.2077 24.3294C23.6762 25.9537 21.599 26.8663 19.4331 26.8663C17.2672 26.8663 15.19 25.9537 13.6585 24.3294C12.127 22.7051 11.2666 20.502 11.2666 18.2048C11.2666 17.7454 11.0945 17.3048 10.7882 16.9799C10.4819 16.655 10.0665 16.4725 9.6333 16.4725C9.20012 16.4725 8.78469 16.655 8.47838 16.9799C8.17208 17.3048 8 17.7454 8 18.2048C8.00322 21.1183 8.99535 23.9331 10.7949 26.1343C12.5944 28.3356 15.081 29.7761 17.7998 30.1923V33.7954H14.3536C13.968 33.7954 13.5983 33.9579 13.3257 34.247C13.0531 34.5361 12.8999 34.9283 12.8999 35.3372V35.7183C12.8999 36.1272 13.0531 36.5193 13.3257 36.8085C13.5983 37.0976 13.968 37.26 14.3536 37.26H24.5127C24.8982 37.26 25.268 37.0976 25.5406 36.8085C25.8132 36.5193 25.9663 36.1272 25.9663 35.7183V35.3372C25.9663 34.9283 25.8132 34.5361 25.5406 34.247C25.268 33.9579 24.8982 33.7954 24.5127 33.7954H21.0664V30.1923C23.7852 29.7761 26.2718 28.3356 28.0714 26.1343C29.8709 23.9331 30.863 21.1183 30.8662 18.2048Z",
-          fill: "currentColor"
-        }
-      )
-    ]
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
   }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const MicrophoneIcon = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      ref,
+      className: cn.cn("size-5", className),
+      "aria-hidden": "true",
+      viewBox: "0 0 40 40",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M19.4331 24.7875C21.2249 24.7875 22.9433 24.1136 24.2103 22.9141C25.4773 21.7146 26.1891 20.0877 26.1891 18.3913V10.3962C26.1891 8.69979 25.4773 7.0729 24.2103 5.87339C22.9433 4.67388 21.2249 4 19.4331 4C17.6413 4 15.9229 4.67388 14.656 5.87339C13.389 7.0729 12.6772 8.69979 12.6772 10.3962V18.3913C12.6772 20.0877 13.389 21.7146 14.656 22.9141C15.9229 24.1136 17.6413 24.7875 19.4331 24.7875ZM16.0552 10.3962C16.0552 9.54797 16.411 8.73453 17.0445 8.13477C17.678 7.53502 18.5372 7.19808 19.4331 7.19808C20.329 7.19808 21.1882 7.53502 21.8217 8.13477C22.4552 8.73453 22.8111 9.54797 22.8111 10.3962V18.3913C22.8111 19.2395 22.4552 20.053 21.8217 20.6527C21.1882 21.2525 20.329 21.5894 19.4331 21.5894C18.5372 21.5894 17.678 21.2525 17.0445 20.6527C16.411 20.053 16.0552 19.2395 16.0552 18.3913V10.3962Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M30.8662 18.2048C30.8662 17.7454 30.6942 17.3048 30.3879 16.9799C30.0816 16.655 29.6661 16.4725 29.2329 16.4725C28.7998 16.4725 28.3843 16.655 28.078 16.9799C27.7717 17.3048 27.5996 17.7454 27.5996 18.2048C27.5996 20.502 26.7392 22.7051 25.2077 24.3294C23.6762 25.9537 21.599 26.8663 19.4331 26.8663C17.2672 26.8663 15.19 25.9537 13.6585 24.3294C12.127 22.7051 11.2666 20.502 11.2666 18.2048C11.2666 17.7454 11.0945 17.3048 10.7882 16.9799C10.4819 16.655 10.0665 16.4725 9.6333 16.4725C9.20012 16.4725 8.78469 16.655 8.47838 16.9799C8.17208 17.3048 8 17.7454 8 18.2048C8.00322 21.1183 8.99535 23.9331 10.7949 26.1343C12.5944 28.3356 15.081 29.7761 17.7998 30.1923V33.7954H14.3536C13.968 33.7954 13.5983 33.9579 13.3257 34.247C13.0531 34.5361 12.8999 34.9283 12.8999 35.3372V35.7183C12.8999 36.1272 13.0531 36.5193 13.3257 36.8085C13.5983 37.0976 13.968 37.26 14.3536 37.26H24.5127C24.8982 37.26 25.268 37.0976 25.5406 36.8085C25.8132 36.5193 25.9663 36.1272 25.9663 35.7183V35.3372C25.9663 34.9283 25.8132 34.5361 25.5406 34.247C25.268 33.9579 24.8982 33.7954 24.5127 33.7954H21.0664V30.1923C23.7852 29.7761 26.2718 28.3356 28.0714 26.1343C29.8709 23.9331 30.863 21.1183 30.8662 18.2048Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  )
 );
+MicrophoneIcon.displayName = "MicrophoneIcon";
 exports.MicrophoneIcon = MicrophoneIcon;
 //# sourceMappingURL=MicrophoneIcon.cjs.map

package/dist/cjs/components/Icons/MicrophoneIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MicrophoneIcon.cjs","sources":["../../../../src/components/Icons/MicrophoneIcon.tsx"],"sourcesContent":["export const MicrophoneIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    aria-hidden=\"true\"\n    viewBox=\"0 0 40 40\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M19.4331 24.7875C21.2249 24.7875 22.9433 24.1136 24.2103 22.9141C25.4773 21.7146 26.1891 20.0877 26.1891 18.3913V10.3962C26.1891 8.69979 25.4773 7.0729 24.2103 5.87339C22.9433 4.67388 21.2249 4 19.4331 4C17.6413 4 15.9229 4.67388 14.656 5.87339C13.389 7.0729 12.6772 8.69979 12.6772 10.3962V18.3913C12.6772 20.0877 13.389 21.7146 14.656 22.9141C15.9229 24.1136 17.6413 24.7875 19.4331 24.7875ZM16.0552 10.3962C16.0552 9.54797 16.411 8.73453 17.0445 8.13477C17.678 7.53502 18.5372 7.19808 19.4331 7.19808C20.329 7.19808 21.1882 7.53502 21.8217 8.13477C22.4552 8.73453 22.8111 9.54797 22.8111 10.3962V18.3913C22.8111 19.2395 22.4552 20.053 21.8217 20.6527C21.1882 21.2525 20.329 21.5894 19.4331 21.5894C18.5372 21.5894 17.678 21.2525 17.0445 20.6527C16.411 20.053 16.0552 19.2395 16.0552 18.3913V10.3962Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"M30.8662 18.2048C30.8662 17.7454 30.6942 17.3048 30.3879 16.9799C30.0816 16.655 29.6661 16.4725 29.2329 16.4725C28.7998 16.4725 28.3843 16.655 28.078 16.9799C27.7717 17.3048 27.5996 17.7454 27.5996 18.2048C27.5996 20.502 26.7392 22.7051 25.2077 24.3294C23.6762 25.9537 21.599 26.8663 19.4331 26.8663C17.2672 26.8663 15.19 25.9537 13.6585 24.3294C12.127 22.7051 11.2666 20.502 11.2666 18.2048C11.2666 17.7454 11.0945 17.3048 10.7882 16.9799C10.4819 16.655 10.0665 16.4725 9.6333 16.4725C9.20012 16.4725 8.78469 16.655 8.47838 16.9799C8.17208 17.3048 8 17.7454 8 18.2048C8.00322 21.1183 8.99535 23.9331 10.7949 26.1343C12.5944 28.3356 15.081 29.7761 17.7998 30.1923V33.7954H14.3536C13.968 33.7954 13.5983 33.9579 13.3257 34.247C13.0531 34.5361 12.8999 34.9283 12.8999 35.3372V35.7183C12.8999 36.1272 13.0531 36.5193 13.3257 36.8085C13.5983 37.0976 13.968 37.26 14.3536 37.26H24.5127C24.8982 37.26 25.268 37.0976 25.5406 36.8085C25.8132 36.5193 25.9663 36.1272 25.9663 35.7183V35.3372C25.9663 34.9283 25.8132 34.5361 25.5406 34.247C25.268 33.9579 24.8982 33.7954 24.5127 33.7954H21.0664V30.1923C23.7852 29.7761 26.2718 28.3356 28.0714 26.1343C29.8709 23.9331 30.863 21.1183 30.8662 18.2048Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"names":["jsxs","jsx"],"mappings":";;;;AAAO,MAAM,iBAAiB,CAAC,EAAE,UAAA,MAC/BA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,eAAY;AAAA,IACZ,SAAQ;AAAA,IACR,OAAM;AAAA,IAEN,UAAA;AAAA,MAAAC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAEPA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACP;AAAA,EAAA;AACF;;"}
+{"version":3,"file":"MicrophoneIcon.cjs","sources":["../../../../src/components/Icons/MicrophoneIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const MicrophoneIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      className={cn(\"size-5\", className)}\n      aria-hidden=\"true\"\n      viewBox=\"0 0 40 40\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path\n        d=\"M19.4331 24.7875C21.2249 24.7875 22.9433 24.1136 24.2103 22.9141C25.4773 21.7146 26.1891 20.0877 26.1891 18.3913V10.3962C26.1891 8.69979 25.4773 7.0729 24.2103 5.87339C22.9433 4.67388 21.2249 4 19.4331 4C17.6413 4 15.9229 4.67388 14.656 5.87339C13.389 7.0729 12.6772 8.69979 12.6772 10.3962V18.3913C12.6772 20.0877 13.389 21.7146 14.656 22.9141C15.9229 24.1136 17.6413 24.7875 19.4331 24.7875ZM16.0552 10.3962C16.0552 9.54797 16.411 8.73453 17.0445 8.13477C17.678 7.53502 18.5372 7.19808 19.4331 7.19808C20.329 7.19808 21.1882 7.53502 21.8217 8.13477C22.4552 8.73453 22.8111 9.54797 22.8111 10.3962V18.3913C22.8111 19.2395 22.4552 20.053 21.8217 20.6527C21.1882 21.2525 20.329 21.5894 19.4331 21.5894C18.5372 21.5894 17.678 21.2525 17.0445 20.6527C16.411 20.053 16.0552 19.2395 16.0552 18.3913V10.3962Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M30.8662 18.2048C30.8662 17.7454 30.6942 17.3048 30.3879 16.9799C30.0816 16.655 29.6661 16.4725 29.2329 16.4725C28.7998 16.4725 28.3843 16.655 28.078 16.9799C27.7717 17.3048 27.5996 17.7454 27.5996 18.2048C27.5996 20.502 26.7392 22.7051 25.2077 24.3294C23.6762 25.9537 21.599 26.8663 19.4331 26.8663C17.2672 26.8663 15.19 25.9537 13.6585 24.3294C12.127 22.7051 11.2666 20.502 11.2666 18.2048C11.2666 17.7454 11.0945 17.3048 10.7882 16.9799C10.4819 16.655 10.0665 16.4725 9.6333 16.4725C9.20012 16.4725 8.78469 16.655 8.47838 16.9799C8.17208 17.3048 8 17.7454 8 18.2048C8.00322 21.1183 8.99535 23.9331 10.7949 26.1343C12.5944 28.3356 15.081 29.7761 17.7998 30.1923V33.7954H14.3536C13.968 33.7954 13.5983 33.9579 13.3257 34.247C13.0531 34.5361 12.8999 34.9283 12.8999 35.3372V35.7183C12.8999 36.1272 13.0531 36.5193 13.3257 36.8085C13.5983 37.0976 13.968 37.26 14.3536 37.26H24.5127C24.8982 37.26 25.268 37.0976 25.5406 36.8085C25.8132 36.5193 25.9663 36.1272 25.9663 35.7183V35.3372C25.9663 34.9283 25.8132 34.5361 25.5406 34.247C25.268 33.9579 24.8982 33.7954 24.5127 33.7954H21.0664V30.1923C23.7852 29.7761 26.2718 28.3356 28.0714 26.1343C29.8709 23.9331 30.863 21.1183 30.8662 18.2048Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  ),\n);\n\nMicrophoneIcon.displayName = \"MicrophoneIcon\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,iBAAiBA,iBAAM;AAAA,EAClC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxBC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWC,GAAAA,GAAG,UAAU,SAAS;AAAA,MACjC,eAAY;AAAA,MACZ,SAAQ;AAAA,MACR,OAAM;AAAA,MACL,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAEPA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,eAAe,cAAc;;"}

package/dist/cjs/components/Icons/StopIcon.cjs

@@ -2,21 +2,45 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const StopIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    className,
-    "aria-hidden": "true",
-    viewBox: "0 0 40 40",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: "M11 25.9975V13.9883C11 13.1628 11.294 12.4583 11.8821 11.875C12.4699 11.2917 13.1767 11 14.0025 11H26.0117C26.8372 11 27.5417 11.294 28.125 11.8821C28.7083 12.4699 29 13.1767 29 14.0025V26.0117C29 26.8372 28.706 27.5417 28.1179 28.125C27.5301 28.7083 26.8233 29 25.9975 29H13.9883C13.1628 29 12.4583 28.706 11.875 28.1179C11.2917 27.5301 11 26.8233 11 25.9975Z",
-        fill: "currentColor"
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
       }
-    )
+    }
   }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const StopIcon = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      ref,
+      className: cn.cn("size-5", className),
+      "aria-hidden": "true",
+      viewBox: "0 0 40 40",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M11 25.9975V13.9883C11 13.1628 11.294 12.4583 11.8821 11.875C12.4699 11.2917 13.1767 11 14.0025 11H26.0117C26.8372 11 27.5417 11.294 28.125 11.8821C28.7083 12.4699 29 13.1767 29 14.0025V26.0117C29 26.8372 28.706 27.5417 28.1179 28.125C27.5301 28.7083 26.8233 29 25.9975 29H13.9883C13.1628 29 12.4583 28.706 11.875 28.1179C11.2917 27.5301 11 26.8233 11 25.9975Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  )
 );
+StopIcon.displayName = "StopIcon";
 exports.StopIcon = StopIcon;
 //# sourceMappingURL=StopIcon.cjs.map

package/dist/cjs/components/Icons/StopIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"StopIcon.cjs","sources":["../../../../src/components/Icons/StopIcon.tsx"],"sourcesContent":["export const StopIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    aria-hidden=\"true\"\n    viewBox=\"0 0 40 40\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M11 25.9975V13.9883C11 13.1628 11.294 12.4583 11.8821 11.875C12.4699 11.2917 13.1767 11 14.0025 11H26.0117C26.8372 11 27.5417 11.294 28.125 11.8821C28.7083 12.4699 29 13.1767 29 14.0025V26.0117C29 26.8372 28.706 27.5417 28.1179 28.125C27.5301 28.7083 26.8233 29 25.9975 29H13.9883C13.1628 29 12.4583 28.706 11.875 28.1179C11.2917 27.5301 11 26.8233 11 25.9975Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"names":["jsx"],"mappings":";;;;AAAO,MAAM,WAAW,CAAC,EAAE,UAAA,MACzBA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,eAAY;AAAA,IACZ,SAAQ;AAAA,IACR,OAAM;AAAA,IAEN,UAAAA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACP;AACF;;"}
+{"version":3,"file":"StopIcon.cjs","sources":["../../../../src/components/Icons/StopIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const StopIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      className={cn(\"size-5\", className)}\n      aria-hidden=\"true\"\n      viewBox=\"0 0 40 40\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path\n        d=\"M11 25.9975V13.9883C11 13.1628 11.294 12.4583 11.8821 11.875C12.4699 11.2917 13.1767 11 14.0025 11H26.0117C26.8372 11 27.5417 11.294 28.125 11.8821C28.7083 12.4699 29 13.1767 29 14.0025V26.0117C29 26.8372 28.706 27.5417 28.1179 28.125C27.5301 28.7083 26.8233 29 25.9975 29H13.9883C13.1628 29 12.4583 28.706 11.875 28.1179C11.2917 27.5301 11 26.8233 11 25.9975Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  ),\n);\n\nStopIcon.displayName = \"StopIcon\";\n"],"names":["React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,WAAWA,iBAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxBC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWC,GAAAA,GAAG,UAAU,SAAS;AAAA,MACjC,eAAY;AAAA,MACZ,SAAQ;AAAA,MACR,OAAM;AAAA,MACL,GAAG;AAAA,MAEJ,UAAAD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACP;AAAA,EAAA;AAGN;AAEA,SAAS,cAAc;;"}

package/dist/cjs/components/Logo/Logo.cjs

@@ -22,7 +22,7 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const getLogoColors = (color, type) => {
-  if (color === "Full colour") {
+  if (color === "fullColour") {
     return {
       icon: "var(--color-brand-green-500)",
       iconInner: "var(--color-body-black-solid-constant)",
@@ -30,7 +30,7 @@ const getLogoColors = (color, type) => {
       // Uses parent's text-body-900 dark:text-body-100
     };
   }
-  if (color === "Decolour") {
+  if (color === "decolour") {
     return {
       iconClass: "fill-[#151515] dark:fill-[#ffffff]",
       iconInnerClass: "fill-[#ffffff] dark:fill-[#151515]",
@@ -38,17 +38,17 @@ const getLogoColors = (color, type) => {
       // Uses parent's text-body-900 dark:text-body-100
     };
   }
-  if (color === "White Always") {
+  if (color === "whiteAlways") {
     return {
-      icon: type === "Icon" ? "var(--color-body-white-solid-constant)" : "var(--color-brand-green-500)",
+      icon: type === "icon" ? "var(--color-body-white-solid-constant)" : "var(--color-brand-green-500)",
       iconInner: "var(--color-body-black-solid-constant)",
       textClass: "text-body-white-solid-constant"
     };
   }
-  if (color === "Black Always") {
+  if (color === "blackAlways") {
     return {
-      icon: type === "Icon" ? "var(--color-body-black-solid-constant)" : "var(--color-brand-green-500)",
-      iconInner: type === "Icon" ? "var(--color-body-white-solid-constant)" : "var(--color-body-black-solid-constant)",
+      icon: type === "icon" ? "var(--color-body-black-solid-constant)" : "var(--color-brand-green-500)",
+      iconInner: type === "icon" ? "var(--color-body-white-solid-constant)" : "var(--color-body-black-solid-constant)",
       textClass: "text-body-black-solid-constant"
     };
   }
@@ -82,8 +82,8 @@ const WordmarkSVG = ({ className }) => {
         /* @__PURE__ */ jsxRuntime.jsx(
           "path",
           {
-            "fill-rule": "evenodd",
-            "clip-rule": "evenodd",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
             d: "M112.349 28.7166C114.006 29.5722 115.891 30 118.004 30C119.635 30 121.132 29.7193 122.496 29.1578C123.859 28.5963 125.022 27.754 125.985 26.631L122.616 23.262C122.028 23.9305 121.346 24.4385 120.571 24.7861C119.795 25.107 118.926 25.2674 117.964 25.2674C116.921 25.2674 116.012 25.0535 115.236 24.6257C114.488 24.1711 113.899 23.5428 113.472 22.7406C113.337 22.4624 113.225 22.166 113.135 21.8515L127.108 21.8182C127.215 21.3102 127.282 20.869 127.308 20.4947C127.362 20.0936 127.389 19.7193 127.389 19.3717C127.389 17.4733 126.961 15.7888 126.105 14.3182C125.276 12.8476 124.127 11.6979 122.656 10.869C121.185 10.0401 119.488 9.62568 117.562 9.62568C115.584 9.62568 113.806 10.0669 112.228 10.9492C110.651 11.8316 109.394 13.0481 108.458 14.5989C107.549 16.123 107.095 17.861 107.095 19.8128C107.095 21.7647 107.562 23.516 108.498 25.0668C109.434 26.6176 110.718 27.8342 112.349 28.7166ZM113.138 17.6391C113.218 17.3577 113.316 17.093 113.431 16.8449C113.833 16.0428 114.381 15.4278 115.076 15C115.798 14.5455 116.64 14.3182 117.603 14.3182C118.512 14.3182 119.274 14.5187 119.889 14.9198C120.53 15.2941 121.012 15.8556 121.333 16.6043C121.467 16.9061 121.575 17.243 121.658 17.615L113.138 17.6391Z",
             fill: "currentColor"
           }
@@ -112,8 +112,8 @@ const WordmarkSVG = ({ className }) => {
         /* @__PURE__ */ jsxRuntime.jsx(
           "path",
           {
-            "fill-rule": "evenodd",
-            "clip-rule": "evenodd",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
             d: "M26.5533 29.9599C24.7619 29.9599 23.1576 29.5187 21.7405 28.6363C20.3501 27.754 19.2405 26.5508 18.4116 25.0267C17.6094 23.5027 17.2084 21.7647 17.2084 19.8128C17.2084 17.8609 17.6094 16.123 18.4116 14.5989C19.2405 13.0749 20.3501 11.8716 21.7405 10.9893C23.1576 10.1069 24.7619 9.66576 26.5533 9.66576C27.8635 9.66576 29.0399 9.91977 30.0827 10.4278C30.7839 10.7608 31.3988 11.1801 31.9276 11.6855V10.0668H37.9437V29.5588H31.9276V27.9791C31.4153 28.4634 30.8137 28.8697 30.1228 29.1978C29.0533 29.7059 27.8635 29.9599 26.5533 29.9599ZM27.7966 24.4251C29.1068 24.4251 30.1629 23.9973 30.9651 23.1417C31.7672 22.2593 32.1683 21.1497 32.1683 19.8128C32.1683 18.9037 31.9811 18.1016 31.6068 17.4064C31.2592 16.7112 30.7512 16.1765 30.0827 15.8021C29.441 15.4011 28.6923 15.2005 27.8367 15.2005C26.9811 15.2005 26.2191 15.4011 25.5506 15.8021C24.9089 16.1765 24.3875 16.7112 23.9865 17.4064C23.6121 18.1016 23.425 18.9037 23.425 19.8128C23.425 20.6952 23.6121 21.4839 23.9865 22.1791C24.3608 22.8743 24.8822 23.4224 25.5506 23.8235C26.2191 24.2246 26.9677 24.4251 27.7966 24.4251Z",
             fill: "currentColor"
           }
@@ -123,10 +123,10 @@ const WordmarkSVG = ({ className }) => {
   );
 };
 const Logo = React__namespace.forwardRef(
-  ({ className, type = "Full", color = "Full colour", ...props }, ref) => {
+  ({ className, type = "full", color = "fullColour", ...props }, ref) => {
     const colors = getLogoColors(color, type);
-    const showIcon = type === "Full" || type === "Icon" || type === "Portrait";
-    const showWordmark = type === "Full" || type === "Wordmark" || type === "Portrait";
+    const showIcon = type === "full" || type === "icon" || type === "portrait";
+    const showWordmark = type === "full" || type === "wordmark" || type === "portrait";
     const ariaProps = props["aria-label"] ? { role: "img" } : {};
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -135,8 +135,8 @@ const Logo = React__namespace.forwardRef(
         "data-testid": "logo",
         className: cn.cn(
           "inline-flex items-center text-body-900 dark:text-body-100",
-          type === "Portrait" ? "flex-col" : "flex-row",
-          type === "Full" && "gap-2",
+          type === "portrait" ? "flex-col" : "flex-row",
+          type === "full" && "gap-2",
           className
         ),
         ...ariaProps,
@@ -148,7 +148,7 @@ const Logo = React__namespace.forwardRef(
               viewBox: "0 0 39 39",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
-              className: cn.cn("shrink-0", type === "Icon" ? "h-10 w-10" : "h-8 w-8"),
+              className: cn.cn("shrink-0", type === "icon" ? "h-10 w-10" : "h-8 w-8"),
               "aria-hidden": "true",
               "data-testid": "logo-icon",
               children: [
@@ -156,7 +156,7 @@ const Logo = React__namespace.forwardRef(
                   "path",
                   {
                     d: "M0 11.2339C0 5.02957 5.02957 0 11.2339 0H27.7661C33.9704 0 39 5.02957 39 11.2339V27.7661C39 33.9704 33.9704 39 27.7661 39H11.2339C5.02957 39 0 33.9704 0 27.7661V11.2339Z",
-                    ...color === "Decolour" ? { className: colors.iconClass } : { fill: colors.icon }
+                    ...color === "decolour" ? { className: colors.iconClass } : { fill: colors.icon }
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -165,7 +165,7 @@ const Logo = React__namespace.forwardRef(
                     fillRule: "evenodd",
                     clipRule: "evenodd",
                     d: "M12.277 30.5825C11.4418 30.5825 11.0355 29.8659 11.2059 29.1153C11.4275 28.0916 12.5838 25.0548 11.7145 23.6899C10.4361 21.6938 7.25562 21.9838 6.5397 20.9602C6.02371 20.2089 6.48355 19.478 7.19738 19.0493C8.79967 18.0257 11.902 18.3157 14.9191 16.3025C16.5895 15.2106 18.1237 12.9927 18.993 11.662C20.2203 9.78527 20.7487 9.39287 23.3226 9.39287H32.3376C33.7574 9.39287 34.202 11.8036 31.8852 12.0686C31.2886 12.1368 29.6977 12.3757 27.4306 12.6487C25.2658 12.9216 20.4589 13.5728 22.351 16.6608C23.7658 18.2816 26.7488 18.0769 27.4306 19.0493C27.9238 19.7225 27.4875 20.4384 26.9505 20.7824C25.3311 21.8061 21.8737 21.6938 18.8566 23.6899C16.8111 25.0548 15.1478 28.0916 14.4659 29.1153C13.9716 29.8659 13.1293 30.5825 12.294 30.5825H12.277Z",
-                    ...color === "Decolour" ? { className: colors.iconInnerClass } : { fill: colors.iconInner }
+                    ...color === "decolour" ? { className: colors.iconInnerClass } : { fill: colors.iconInner }
                   }
                 )
               ]

package/dist/cjs/components/Logo/Logo.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.cjs","sources":["../../../../src/components/Logo/Logo.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst getLogoColors = (color: LogoColor, type: LogoType) => {\n  if (color === \"Full colour\") {\n    return {\n      icon: \"var(--color-brand-green-500)\",\n      iconInner: \"var(--color-body-black-solid-constant)\",\n      textClass: \"\", // Uses parent's text-body-900 dark:text-body-100\n    };\n  }\n\n  if (color === \"Decolour\") {\n    return {\n      iconClass: \"fill-[#151515] dark:fill-[#ffffff]\",\n      iconInnerClass: \"fill-[#ffffff] dark:fill-[#151515]\",\n      textClass: \"\", // Uses parent's text-body-900 dark:text-body-100\n    };\n  }\n\n  if (color === \"White Always\") {\n    return {\n      icon:\n        type === \"Icon\" ? \"var(--color-body-white-solid-constant)\" : \"var(--color-brand-green-500)\",\n      iconInner: \"var(--color-body-black-solid-constant)\",\n      textClass: \"text-body-white-solid-constant\",\n    };\n  }\n\n  if (color === \"Black Always\") {\n    return {\n      icon:\n        type === \"Icon\" ? \"var(--color-body-black-solid-constant)\" : \"var(--color-brand-green-500)\",\n      iconInner:\n        type === \"Icon\"\n          ? \"var(--color-body-white-solid-constant)\"\n          : \"var(--color-body-black-solid-constant)\",\n      textClass: \"text-body-black-solid-constant\",\n    };\n  }\n\n  return {\n    icon: \"var(--color-brand-green-500)\",\n    iconInner: \"var(--color-body-black-solid-constant)\",\n    textClass: \"\", // Default to adaptive color\n  };\n};\n\nexport type LogoType = \"Full\" | \"Icon\" | \"Wordmark\" | \"Portrait\";\nexport type LogoColor = \"Full colour\" | \"Decolour\" | \"White Always\" | \"Black Always\";\n\nexport interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Logo layout type (matches Figma \"Type\" property) */\n  type?: LogoType;\n  /** Logo color scheme (matches Figma \"Colour\" property) */\n  color?: LogoColor;\n  /**\n   * Accessible label for the logo.\n   * Required when type=\"Icon\" and used in interactive contexts (links, buttons).\n   * @example \"Fanvue home\" or \"Go to homepage\"\n   */\n  \"aria-label\"?: string;\n}\n\nconst WordmarkSVG = ({ className }: { className?: string }) => {\n  return (\n    <svg\n      width=\"128\"\n      height=\"30\"\n      viewBox=\"0 0 128 30\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      className={className}\n      data-testid=\"logo-wordmark\"\n    >\n      <path\n        d=\"M4.29144 15.2807V29.5588H10.4278V15.2807H16.0428V10.0668H10.4278V8.18181C10.4278 7.35294 10.6684 6.69786 11.1497 6.21658C11.631 5.73529 12.2861 5.49465 13.115 5.49465C13.5695 5.49465 13.9572 5.57486 14.2781 5.73529C14.6257 5.86898 14.9331 6.06951 15.2005 6.33689L19.0508 2.48663C18.3021 1.71123 17.4198 1.10963 16.4037 0.681819C15.4144 0.227273 14.2513 0 12.9144 0C11.1497 0 9.62566 0.374331 8.34224 1.12299C7.05882 1.84492 6.05615 2.84759 5.33422 4.13102C4.63903 5.3877 4.29144 6.80481 4.29144 8.38235V10.0668H0V15.2807H4.29144Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M112.349 28.7166C114.006 29.5722 115.891 30 118.004 30C119.635 30 121.132 29.7193 122.496 29.1578C123.859 28.5963 125.022 27.754 125.985 26.631L122.616 23.262C122.028 23.9305 121.346 24.4385 120.571 24.7861C119.795 25.107 118.926 25.2674 117.964 25.2674C116.921 25.2674 116.012 25.0535 115.236 24.6257C114.488 24.1711 113.899 23.5428 113.472 22.7406C113.337 22.4624 113.225 22.166 113.135 21.8515L127.108 21.8182C127.215 21.3102 127.282 20.869 127.308 20.4947C127.362 20.0936 127.389 19.7193 127.389 19.3717C127.389 17.4733 126.961 15.7888 126.105 14.3182C125.276 12.8476 124.127 11.6979 122.656 10.869C121.185 10.0401 119.488 9.62568 117.562 9.62568C115.584 9.62568 113.806 10.0669 112.228 10.9492C110.651 11.8316 109.394 13.0481 108.458 14.5989C107.549 16.123 107.095 17.861 107.095 19.8128C107.095 21.7647 107.562 23.516 108.498 25.0668C109.434 26.6176 110.718 27.8342 112.349 28.7166ZM113.138 17.6391C113.218 17.3577 113.316 17.093 113.431 16.8449C113.833 16.0428 114.381 15.4278 115.076 15C115.798 14.5455 116.64 14.3182 117.603 14.3182C118.512 14.3182 119.274 14.5187 119.889 14.9198C120.53 15.2941 121.012 15.8556 121.333 16.6043C121.467 16.9061 121.575 17.243 121.658 17.615L113.138 17.6391Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M90.6482 28.9171C92.0386 29.639 93.6295 30 95.421 30C97.2124 30 98.7899 29.639 100.154 28.9171C101.517 28.1684 102.587 27.1524 103.362 25.869C104.138 24.5588 104.525 23.0481 104.525 21.3369V10.0668H98.3889V21.2968C98.3889 22.3128 98.1215 23.115 97.5867 23.7032C97.052 24.2647 96.33 24.5454 95.421 24.5454C94.7792 24.5454 94.2311 24.4118 93.7766 24.1444C93.322 23.877 92.9744 23.5027 92.7338 23.0214C92.5199 22.5401 92.4129 21.9652 92.4129 21.2968V10.0668H86.2766V21.377C86.2766 23.0615 86.6643 24.5588 87.4397 25.869C88.2151 27.1524 89.2846 28.1684 90.6482 28.9171Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M71.3524 29.5588L63.0904 10.0668H69.708L73.8792 22.1333L78.0503 10.0668H84.5476L76.2856 29.5588H71.3524Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M55.1386 18.4492V29.5588H61.2749V17.0855C61.2749 15.7486 60.9541 14.5187 60.3124 13.3957C59.6707 12.2727 58.7883 11.377 57.6653 10.7085C56.5691 10.0134 55.299 9.66576 53.8552 9.66576C52.3578 9.66576 51.0076 9.98662 49.8044 10.6283C49.2874 10.8986 48.8195 11.2204 48.4006 11.5939V10.0668H42.2642V29.5588H48.4006V18.4492C48.4006 17.7807 48.5477 17.1925 48.8418 16.6845C49.1359 16.1497 49.537 15.7486 50.045 15.4813C50.553 15.1872 51.1413 15.0401 51.8097 15.0401C52.7723 15.0401 53.561 15.3609 54.176 16.0027C54.8177 16.6176 55.1386 17.4331 55.1386 18.4492Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M26.5533 29.9599C24.7619 29.9599 23.1576 29.5187 21.7405 28.6363C20.3501 27.754 19.2405 26.5508 18.4116 25.0267C17.6094 23.5027 17.2084 21.7647 17.2084 19.8128C17.2084 17.8609 17.6094 16.123 18.4116 14.5989C19.2405 13.0749 20.3501 11.8716 21.7405 10.9893C23.1576 10.1069 24.7619 9.66576 26.5533 9.66576C27.8635 9.66576 29.0399 9.91977 30.0827 10.4278C30.7839 10.7608 31.3988 11.1801 31.9276 11.6855V10.0668H37.9437V29.5588H31.9276V27.9791C31.4153 28.4634 30.8137 28.8697 30.1228 29.1978C29.0533 29.7059 27.8635 29.9599 26.5533 29.9599ZM27.7966 24.4251C29.1068 24.4251 30.1629 23.9973 30.9651 23.1417C31.7672 22.2593 32.1683 21.1497 32.1683 19.8128C32.1683 18.9037 31.9811 18.1016 31.6068 17.4064C31.2592 16.7112 30.7512 16.1765 30.0827 15.8021C29.441 15.4011 28.6923 15.2005 27.8367 15.2005C26.9811 15.2005 26.2191 15.4011 25.5506 15.8021C24.9089 16.1765 24.3875 16.7112 23.9865 17.4064C23.6121 18.1016 23.425 18.9037 23.425 19.8128C23.425 20.6952 23.6121 21.4839 23.9865 22.1791C24.3608 22.8743 24.8822 23.4224 25.5506 23.8235C26.2191 24.2246 26.9677 24.4251 27.7966 24.4251Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n};\n\nexport const Logo = React.forwardRef<HTMLDivElement, LogoProps>(\n  ({ className, type = \"Full\", color = \"Full colour\", ...props }, ref) => {\n    const colors = getLogoColors(color, type);\n    const showIcon = type === \"Full\" || type === \"Icon\" || type === \"Portrait\";\n    const showWordmark = type === \"Full\" || type === \"Wordmark\" || type === \"Portrait\";\n\n    // When aria-label is provided, add role=\"img\" for proper accessibility\n    const ariaProps = props[\"aria-label\"] ? { role: \"img\" as const } : {};\n\n    return (\n      <div\n        ref={ref}\n        data-testid=\"logo\"\n        className={cn(\n          \"inline-flex items-center text-body-900 dark:text-body-100\",\n          type === \"Portrait\" ? \"flex-col\" : \"flex-row\",\n          type === \"Full\" && \"gap-2\",\n          className,\n        )}\n        {...ariaProps}\n        {...props}\n      >\n        {showIcon && (\n          <svg\n            viewBox=\"0 0 39 39\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={cn(\"shrink-0\", type === \"Icon\" ? \"h-10 w-10\" : \"h-8 w-8\")}\n            aria-hidden=\"true\"\n            data-testid=\"logo-icon\"\n          >\n            <path\n              d=\"M0 11.2339C0 5.02957 5.02957 0 11.2339 0H27.7661C33.9704 0 39 5.02957 39 11.2339V27.7661C39 33.9704 33.9704 39 27.7661 39H11.2339C5.02957 39 0 33.9704 0 27.7661V11.2339Z\"\n              {...(color === \"Decolour\" ? { className: colors.iconClass } : { fill: colors.icon })}\n            />\n            <path\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n              d=\"M12.277 30.5825C11.4418 30.5825 11.0355 29.8659 11.2059 29.1153C11.4275 28.0916 12.5838 25.0548 11.7145 23.6899C10.4361 21.6938 7.25562 21.9838 6.5397 20.9602C6.02371 20.2089 6.48355 19.478 7.19738 19.0493C8.79967 18.0257 11.902 18.3157 14.9191 16.3025C16.5895 15.2106 18.1237 12.9927 18.993 11.662C20.2203 9.78527 20.7487 9.39287 23.3226 9.39287H32.3376C33.7574 9.39287 34.202 11.8036 31.8852 12.0686C31.2886 12.1368 29.6977 12.3757 27.4306 12.6487C25.2658 12.9216 20.4589 13.5728 22.351 16.6608C23.7658 18.2816 26.7488 18.0769 27.4306 19.0493C27.9238 19.7225 27.4875 20.4384 26.9505 20.7824C25.3311 21.8061 21.8737 21.6938 18.8566 23.6899C16.8111 25.0548 15.1478 28.0916 14.4659 29.1153C13.9716 29.8659 13.1293 30.5825 12.294 30.5825H12.277Z\"\n              {...(color === \"Decolour\"\n                ? { className: colors.iconInnerClass }\n                : { fill: colors.iconInner })}\n            />\n          </svg>\n        )}\n        {showWordmark && <WordmarkSVG className={cn(colors.textClass)} />}\n      </div>\n    );\n  },\n);\n\nLogo.displayName = \"Logo\";\n"],"names":["jsxs","jsx","React","cn"],"mappings":"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"}
+{"version":3,"file":"Logo.cjs","sources":["../../../../src/components/Logo/Logo.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst getLogoColors = (color: LogoColor, type: LogoType) => {\n  if (color === \"fullColour\") {\n    return {\n      icon: \"var(--color-brand-green-500)\",\n      iconInner: \"var(--color-body-black-solid-constant)\",\n      textClass: \"\", // Uses parent's text-body-900 dark:text-body-100\n    };\n  }\n\n  if (color === \"decolour\") {\n    return {\n      iconClass: \"fill-[#151515] dark:fill-[#ffffff]\",\n      iconInnerClass: \"fill-[#ffffff] dark:fill-[#151515]\",\n      textClass: \"\", // Uses parent's text-body-900 dark:text-body-100\n    };\n  }\n\n  if (color === \"whiteAlways\") {\n    return {\n      icon:\n        type === \"icon\" ? \"var(--color-body-white-solid-constant)\" : \"var(--color-brand-green-500)\",\n      iconInner: \"var(--color-body-black-solid-constant)\",\n      textClass: \"text-body-white-solid-constant\",\n    };\n  }\n\n  if (color === \"blackAlways\") {\n    return {\n      icon:\n        type === \"icon\" ? \"var(--color-body-black-solid-constant)\" : \"var(--color-brand-green-500)\",\n      iconInner:\n        type === \"icon\"\n          ? \"var(--color-body-white-solid-constant)\"\n          : \"var(--color-body-black-solid-constant)\",\n      textClass: \"text-body-black-solid-constant\",\n    };\n  }\n\n  return {\n    icon: \"var(--color-brand-green-500)\",\n    iconInner: \"var(--color-body-black-solid-constant)\",\n    textClass: \"\", // Default to adaptive color\n  };\n};\n\nexport type LogoType = \"full\" | \"icon\" | \"wordmark\" | \"portrait\";\nexport type LogoColor = \"fullColour\" | \"decolour\" | \"whiteAlways\" | \"blackAlways\";\n\nexport interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Logo layout type (matches Figma \"Type\" property) */\n  type?: LogoType;\n  /** Logo color scheme (matches Figma \"Colour\" property) */\n  color?: LogoColor;\n  /**\n   * Accessible label for the logo.\n   * Required when type=\"Icon\" and used in interactive contexts (links, buttons).\n   * @example \"Fanvue home\" or \"Go to homepage\"\n   */\n  \"aria-label\"?: string;\n}\n\nconst WordmarkSVG = ({ className }: { className?: string }) => {\n  return (\n    <svg\n      width=\"128\"\n      height=\"30\"\n      viewBox=\"0 0 128 30\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      className={className}\n      data-testid=\"logo-wordmark\"\n    >\n      <path\n        d=\"M4.29144 15.2807V29.5588H10.4278V15.2807H16.0428V10.0668H10.4278V8.18181C10.4278 7.35294 10.6684 6.69786 11.1497 6.21658C11.631 5.73529 12.2861 5.49465 13.115 5.49465C13.5695 5.49465 13.9572 5.57486 14.2781 5.73529C14.6257 5.86898 14.9331 6.06951 15.2005 6.33689L19.0508 2.48663C18.3021 1.71123 17.4198 1.10963 16.4037 0.681819C15.4144 0.227273 14.2513 0 12.9144 0C11.1497 0 9.62566 0.374331 8.34224 1.12299C7.05882 1.84492 6.05615 2.84759 5.33422 4.13102C4.63903 5.3877 4.29144 6.80481 4.29144 8.38235V10.0668H0V15.2807H4.29144Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M112.349 28.7166C114.006 29.5722 115.891 30 118.004 30C119.635 30 121.132 29.7193 122.496 29.1578C123.859 28.5963 125.022 27.754 125.985 26.631L122.616 23.262C122.028 23.9305 121.346 24.4385 120.571 24.7861C119.795 25.107 118.926 25.2674 117.964 25.2674C116.921 25.2674 116.012 25.0535 115.236 24.6257C114.488 24.1711 113.899 23.5428 113.472 22.7406C113.337 22.4624 113.225 22.166 113.135 21.8515L127.108 21.8182C127.215 21.3102 127.282 20.869 127.308 20.4947C127.362 20.0936 127.389 19.7193 127.389 19.3717C127.389 17.4733 126.961 15.7888 126.105 14.3182C125.276 12.8476 124.127 11.6979 122.656 10.869C121.185 10.0401 119.488 9.62568 117.562 9.62568C115.584 9.62568 113.806 10.0669 112.228 10.9492C110.651 11.8316 109.394 13.0481 108.458 14.5989C107.549 16.123 107.095 17.861 107.095 19.8128C107.095 21.7647 107.562 23.516 108.498 25.0668C109.434 26.6176 110.718 27.8342 112.349 28.7166ZM113.138 17.6391C113.218 17.3577 113.316 17.093 113.431 16.8449C113.833 16.0428 114.381 15.4278 115.076 15C115.798 14.5455 116.64 14.3182 117.603 14.3182C118.512 14.3182 119.274 14.5187 119.889 14.9198C120.53 15.2941 121.012 15.8556 121.333 16.6043C121.467 16.9061 121.575 17.243 121.658 17.615L113.138 17.6391Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M90.6482 28.9171C92.0386 29.639 93.6295 30 95.421 30C97.2124 30 98.7899 29.639 100.154 28.9171C101.517 28.1684 102.587 27.1524 103.362 25.869C104.138 24.5588 104.525 23.0481 104.525 21.3369V10.0668H98.3889V21.2968C98.3889 22.3128 98.1215 23.115 97.5867 23.7032C97.052 24.2647 96.33 24.5454 95.421 24.5454C94.7792 24.5454 94.2311 24.4118 93.7766 24.1444C93.322 23.877 92.9744 23.5027 92.7338 23.0214C92.5199 22.5401 92.4129 21.9652 92.4129 21.2968V10.0668H86.2766V21.377C86.2766 23.0615 86.6643 24.5588 87.4397 25.869C88.2151 27.1524 89.2846 28.1684 90.6482 28.9171Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M71.3524 29.5588L63.0904 10.0668H69.708L73.8792 22.1333L78.0503 10.0668H84.5476L76.2856 29.5588H71.3524Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M55.1386 18.4492V29.5588H61.2749V17.0855C61.2749 15.7486 60.9541 14.5187 60.3124 13.3957C59.6707 12.2727 58.7883 11.377 57.6653 10.7085C56.5691 10.0134 55.299 9.66576 53.8552 9.66576C52.3578 9.66576 51.0076 9.98662 49.8044 10.6283C49.2874 10.8986 48.8195 11.2204 48.4006 11.5939V10.0668H42.2642V29.5588H48.4006V18.4492C48.4006 17.7807 48.5477 17.1925 48.8418 16.6845C49.1359 16.1497 49.537 15.7486 50.045 15.4813C50.553 15.1872 51.1413 15.0401 51.8097 15.0401C52.7723 15.0401 53.561 15.3609 54.176 16.0027C54.8177 16.6176 55.1386 17.4331 55.1386 18.4492Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M26.5533 29.9599C24.7619 29.9599 23.1576 29.5187 21.7405 28.6363C20.3501 27.754 19.2405 26.5508 18.4116 25.0267C17.6094 23.5027 17.2084 21.7647 17.2084 19.8128C17.2084 17.8609 17.6094 16.123 18.4116 14.5989C19.2405 13.0749 20.3501 11.8716 21.7405 10.9893C23.1576 10.1069 24.7619 9.66576 26.5533 9.66576C27.8635 9.66576 29.0399 9.91977 30.0827 10.4278C30.7839 10.7608 31.3988 11.1801 31.9276 11.6855V10.0668H37.9437V29.5588H31.9276V27.9791C31.4153 28.4634 30.8137 28.8697 30.1228 29.1978C29.0533 29.7059 27.8635 29.9599 26.5533 29.9599ZM27.7966 24.4251C29.1068 24.4251 30.1629 23.9973 30.9651 23.1417C31.7672 22.2593 32.1683 21.1497 32.1683 19.8128C32.1683 18.9037 31.9811 18.1016 31.6068 17.4064C31.2592 16.7112 30.7512 16.1765 30.0827 15.8021C29.441 15.4011 28.6923 15.2005 27.8367 15.2005C26.9811 15.2005 26.2191 15.4011 25.5506 15.8021C24.9089 16.1765 24.3875 16.7112 23.9865 17.4064C23.6121 18.1016 23.425 18.9037 23.425 19.8128C23.425 20.6952 23.6121 21.4839 23.9865 22.1791C24.3608 22.8743 24.8822 23.4224 25.5506 23.8235C26.2191 24.2246 26.9677 24.4251 27.7966 24.4251Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n};\n\nexport const Logo = React.forwardRef<HTMLDivElement, LogoProps>(\n  ({ className, type = \"full\", color = \"fullColour\", ...props }, ref) => {\n    const colors = getLogoColors(color, type);\n    const showIcon = type === \"full\" || type === \"icon\" || type === \"portrait\";\n    const showWordmark = type === \"full\" || type === \"wordmark\" || type === \"portrait\";\n\n    // When aria-label is provided, add role=\"img\" for proper accessibility\n    const ariaProps = props[\"aria-label\"] ? { role: \"img\" as const } : {};\n\n    return (\n      <div\n        ref={ref}\n        data-testid=\"logo\"\n        className={cn(\n          \"inline-flex items-center text-body-900 dark:text-body-100\",\n          type === \"portrait\" ? \"flex-col\" : \"flex-row\",\n          type === \"full\" && \"gap-2\",\n          className,\n        )}\n        {...ariaProps}\n        {...props}\n      >\n        {showIcon && (\n          <svg\n            viewBox=\"0 0 39 39\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={cn(\"shrink-0\", type === \"icon\" ? \"h-10 w-10\" : \"h-8 w-8\")}\n            aria-hidden=\"true\"\n            data-testid=\"logo-icon\"\n          >\n            <path\n              d=\"M0 11.2339C0 5.02957 5.02957 0 11.2339 0H27.7661C33.9704 0 39 5.02957 39 11.2339V27.7661C39 33.9704 33.9704 39 27.7661 39H11.2339C5.02957 39 0 33.9704 0 27.7661V11.2339Z\"\n              {...(color === \"decolour\" ? { className: colors.iconClass } : { fill: colors.icon })}\n            />\n            <path\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n              d=\"M12.277 30.5825C11.4418 30.5825 11.0355 29.8659 11.2059 29.1153C11.4275 28.0916 12.5838 25.0548 11.7145 23.6899C10.4361 21.6938 7.25562 21.9838 6.5397 20.9602C6.02371 20.2089 6.48355 19.478 7.19738 19.0493C8.79967 18.0257 11.902 18.3157 14.9191 16.3025C16.5895 15.2106 18.1237 12.9927 18.993 11.662C20.2203 9.78527 20.7487 9.39287 23.3226 9.39287H32.3376C33.7574 9.39287 34.202 11.8036 31.8852 12.0686C31.2886 12.1368 29.6977 12.3757 27.4306 12.6487C25.2658 12.9216 20.4589 13.5728 22.351 16.6608C23.7658 18.2816 26.7488 18.0769 27.4306 19.0493C27.9238 19.7225 27.4875 20.4384 26.9505 20.7824C25.3311 21.8061 21.8737 21.6938 18.8566 23.6899C16.8111 25.0548 15.1478 28.0916 14.4659 29.1153C13.9716 29.8659 13.1293 30.5825 12.294 30.5825H12.277Z\"\n              {...(color === \"decolour\"\n                ? { className: colors.iconInnerClass }\n                : { fill: colors.iconInner })}\n            />\n          </svg>\n        )}\n        {showWordmark && <WordmarkSVG className={cn(colors.textClass)} />}\n      </div>\n    );\n  },\n);\n\nLogo.displayName = \"Logo\";\n"],"names":["jsxs","jsx","React","cn"],"mappings":"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"}