@fanvue/ui 0.1.0-alpha.3 → 1.1.0

package/dist/components/DatePicker/DatePicker.mjs

@@ -0,0 +1,133 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useEffect } from "react";
+import { DayPicker } from "react-day-picker";
+import { cn } from "../../utils/cn.mjs";
+import { Button } from "../Button/Button.mjs";
+import { ChevronLeftIcon } from "../Icons/ChevronLeftIcon.mjs";
+import { ChevronRightIcon } from "../Icons/ChevronRightIcon.mjs";
+function Day({ day, modifiers, className, ...divProps }) {
+  const { range_start, range_end } = modifiers;
+  const isSingleDayRange = range_start && range_end;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        className,
+        (range_start || range_end) && !isSingleDayRange && "from-50% from-transparent to-50%",
+        range_start && !isSingleDayRange && "bg-linear-to-r to-brand-green-50",
+        range_end && !isSingleDayRange && "bg-linear-to-l to-brand-green-50"
+      ),
+      ...divProps
+    }
+  );
+}
+function DayButton({ day, modifiers, className, ...buttonProps }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn(
+        "relative z-10 inline-flex size-10 cursor-pointer items-center justify-center rounded-lg",
+        "typography-body-2-regular",
+        "transition-colors hover:bg-brand-green-50",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        modifiers.today && !modifiers.selected && "border border-brand-green-500",
+        modifiers.selected && !modifiers.range_middle ? "bg-brand-green-500 text-body-black-solid-constant hover:bg-brand-green-500" : "text-body-100",
+        modifiers.range_middle && "rounded-none bg-transparent",
+        modifiers.outside && "pointer-events-none opacity-50"
+      ),
+      ...buttonProps
+    }
+  );
+}
+const DatePicker = forwardRef(
+  ({
+    type = "single",
+    onApply,
+    onCancel,
+    cancelLabel = "Cancel",
+    applyLabel = "Apply",
+    showFooter = true,
+    className,
+    formatters,
+    ...dayPickerProps
+  }, ref) => {
+    const numberOfMonths = type === "double" ? 2 : 1;
+    const isMulti = numberOfMonths > 1;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "inline-flex flex-col rounded-2xl border border-neutral-200 bg-background-inverse-solid shadow-[0px_6px_12px_0px_rgba(0,0,0,0.1)] backdrop-blur-sm",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            DayPicker,
+            {
+              showOutsideDays: true,
+              numberOfMonths,
+              formatters: {
+                formatCaption: (date) => date.toLocaleDateString("en-US", { month: "short", year: "numeric" }),
+                ...formatters
+              },
+              classNames: {
+                root: "w-full",
+                months: "relative flex",
+                month: "flex flex-1 flex-col",
+                month_caption: cn("flex items-center py-4", isMulti ? "justify-center px-2" : "px-5"),
+                caption_label: "typography-body-1-semibold text-body-100",
+                nav: cn(
+                  "absolute top-4 z-20 flex",
+                  isMulti ? "pointer-events-none inset-x-3 justify-between" : "right-3 gap-1"
+                ),
+                button_previous: "pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-body-100 transition-colors hover:bg-brand-green-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 disabled:cursor-not-allowed disabled:opacity-50",
+                // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes
+                button_next: "pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-body-100 transition-colors hover:bg-brand-green-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 disabled:cursor-not-allowed disabled:opacity-50",
+                // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes
+                month_grid: cn("mb-4", isMulti ? "mx-2" : "mx-4"),
+                weekdays: "flex",
+                weekday: "flex h-[30px] w-10 flex-1 items-center justify-center typography-body-2-regular text-body-200",
+                week: "flex overflow-hidden rounded-lg",
+                day: "relative flex w-10 flex-1 items-center justify-center",
+                range_middle: "bg-brand-green-50",
+                hidden: "hidden"
+              },
+              components: {
+                /**
+                 * !NOTE: We're unable to use semantic elements for the grid due to rdp, as such we've disabled the a11y lint rules for these elements in biome.json.
+                 */
+                Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeftIcon, {}) : /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+                MonthGrid: (props) => /* @__PURE__ */ jsx("div", { role: "grid", ...props }),
+                Weekdays: (props) => /* @__PURE__ */ jsx("div", { role: "row", ...props }),
+                Weekday: (props) => /* @__PURE__ */ jsx("div", { role: "columnheader", ...props }),
+                Weeks: (props) => /* @__PURE__ */ jsx("div", { role: "rowgroup", ...props }),
+                Week: ({ week, ...props }) => /* @__PURE__ */ jsx("div", { role: "row", ...props }),
+                Day,
+                DayButton
+              },
+              ...dayPickerProps
+            }
+          ),
+          showFooter && /* @__PURE__ */ jsxs("div", { className: "flex gap-4 px-5 pb-4", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "40", className: "flex-1", onClick: onCancel, children: cancelLabel }),
+            /* @__PURE__ */ jsx(Button, { variant: "primary", size: "40", className: "flex-1", onClick: onApply, children: applyLabel })
+          ] })
+        ]
+      }
+    );
+  }
+);
+DatePicker.displayName = "DatePicker";
+export {
+  DatePicker
+};
+//# sourceMappingURL=DatePicker.mjs.map

package/dist/components/DatePicker/DatePicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.mjs","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport {\n  type ChevronProps,\n  type DateRange,\n  type DayButtonProps,\n  DayPicker,\n  type DayPickerProps,\n  type DayProps,\n  type MonthGridProps,\n  type WeekdayProps,\n  type WeekdaysProps,\n  type WeekProps,\n  type WeeksProps,\n} from \"react-day-picker\";\nimport { cn } from \"../../utils/cn\";\nimport type { OmitDistributed } from \"../../utils/types\";\nimport { Button } from \"../Button/Button\";\nimport { ChevronLeftIcon } from \"../Icons/ChevronLeftIcon\";\nimport { ChevronRightIcon } from \"../Icons/ChevronRightIcon\";\n\nexport type { DateRange }; // Needed by consumers when passing props\n\nexport type DatePickerType = \"single\" | \"double\";\n\nexport interface DatePickerOwnProps {\n  /** Display one month or two side-by-side. @default \"single\" */\n  type?: DatePickerType;\n  /** Called when the Apply button is clicked. */\n  onApply?: () => void;\n  /** Called when the Cancel button is clicked. */\n  onCancel?: () => void;\n  /** Label for the cancel button. @default \"Cancel\" */\n  cancelLabel?: string;\n  /** Label for the apply button. @default \"Apply\" */\n  applyLabel?: string;\n  /** Whether to render cancel / apply footer buttons. @default true */\n  showFooter?: boolean;\n  /** Additional className for the outer container. */\n  className?: string;\n}\n\nfunction Day({ day, modifiers, className, ...divProps }: DayProps) {\n  const { range_start, range_end } = modifiers;\n  const isSingleDayRange = range_start && range_end;\n\n  return (\n    <div\n      className={cn(\n        className,\n        (range_start || range_end) && !isSingleDayRange && \"from-50% from-transparent to-50%\",\n        range_start && !isSingleDayRange && \"bg-linear-to-r to-brand-green-50\",\n        range_end && !isSingleDayRange && \"bg-linear-to-l to-brand-green-50\",\n      )}\n      {...divProps}\n    />\n  );\n}\n\nfunction DayButton({ day, modifiers, className, ...buttonProps }: DayButtonProps) {\n  const ref = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn(\n        \"relative z-10 inline-flex size-10 cursor-pointer items-center justify-center rounded-lg\",\n        \"typography-body-2-regular\",\n        \"transition-colors hover:bg-brand-green-50\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        modifiers.today && !modifiers.selected && \"border border-brand-green-500\",\n        modifiers.selected && !modifiers.range_middle\n          ? \"bg-brand-green-500 text-body-black-solid-constant hover:bg-brand-green-500\"\n          : \"text-body-100\",\n        modifiers.range_middle && \"rounded-none bg-transparent\",\n        modifiers.outside && \"pointer-events-none opacity-50\",\n      )}\n      {...buttonProps}\n    />\n  );\n}\n\nexport type DatePickerProps = DatePickerOwnProps &\n  OmitDistributed<DayPickerProps, \"numberOfMonths\">;\n\nexport const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      type = \"single\",\n      onApply,\n      onCancel,\n      cancelLabel = \"Cancel\",\n      applyLabel = \"Apply\",\n      showFooter = true,\n      className,\n      formatters,\n      ...dayPickerProps\n    },\n    ref,\n  ) => {\n    const numberOfMonths = type === \"double\" ? 2 : 1;\n    const isMulti = numberOfMonths > 1;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"inline-flex flex-col rounded-2xl border border-neutral-200 bg-background-inverse-solid shadow-[0px_6px_12px_0px_rgba(0,0,0,0.1)] backdrop-blur-sm\",\n          className,\n        )}\n      >\n        <DayPicker\n          showOutsideDays\n          numberOfMonths={numberOfMonths}\n          formatters={{\n            formatCaption: (date: Date) =>\n              date.toLocaleDateString(\"en-US\", { month: \"short\", year: \"numeric\" }),\n            ...formatters,\n          }}\n          classNames={{\n            root: \"w-full\",\n            months: \"relative flex\",\n            month: \"flex flex-1 flex-col\",\n            month_caption: cn(\"flex items-center py-4\", isMulti ? \"justify-center px-2\" : \"px-5\"),\n            caption_label: \"typography-body-1-semibold text-body-100\",\n            nav: cn(\n              \"absolute top-4 z-20 flex\",\n              isMulti ? \"pointer-events-none inset-x-3 justify-between\" : \"right-3 gap-1\",\n            ),\n            button_previous:\n              \"pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-body-100 transition-colors hover:bg-brand-green-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 disabled:cursor-not-allowed disabled:opacity-50\", // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes\n            button_next:\n              \"pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-body-100 transition-colors hover:bg-brand-green-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 disabled:cursor-not-allowed disabled:opacity-50\", // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes\n            month_grid: cn(\"mb-4\", isMulti ? \"mx-2\" : \"mx-4\"),\n            weekdays: \"flex\",\n            weekday:\n              \"flex h-[30px] w-10 flex-1 items-center justify-center typography-body-2-regular text-body-200\",\n            week: \"flex overflow-hidden rounded-lg\",\n            day: \"relative flex w-10 flex-1 items-center justify-center\",\n            range_middle: \"bg-brand-green-50\",\n            hidden: \"hidden\",\n          }}\n          components={{\n            /**\n             * !NOTE: We're unable to use semantic elements for the grid due to rdp, as such we've disabled the a11y lint rules for these elements in biome.json.\n             */\n            Chevron: ({ orientation }: ChevronProps) =>\n              orientation === \"left\" ? <ChevronLeftIcon /> : <ChevronRightIcon />,\n            MonthGrid: (props: MonthGridProps) => <div role=\"grid\" {...props} />,\n            Weekdays: (props: WeekdaysProps) => <div role=\"row\" {...props} />,\n            Weekday: (props: WeekdayProps) => <div role=\"columnheader\" {...props} />,\n            Weeks: (props: WeeksProps) => <div role=\"rowgroup\" {...props} />,\n            Week: ({ week, ...props }: WeekProps) => <div role=\"row\" {...props} />,\n            Day,\n            DayButton,\n          }}\n          {...dayPickerProps}\n        />\n\n        {showFooter && (\n          <div className=\"flex gap-4 px-5 pb-4\">\n            <Button variant=\"secondary\" size=\"40\" className=\"flex-1\" onClick={onCancel}>\n              {cancelLabel}\n            </Button>\n            <Button variant=\"primary\" size=\"40\" className=\"flex-1\" onClick={onApply}>\n              {applyLabel}\n            </Button>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":[],"mappings":"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"}

package/dist/components/Divider/Divider.mjs

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const Divider = React.forwardRef(({ label, className, ...props }, ref) => {
+  if (label !== void 0) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(`my-2 flex w-full items-center justify-center gap-2`, className),
+        children: [
+          /* @__PURE__ */ jsx(
+            SeparatorPrimitive.Root,
+            {
+              decorative: true,
+              orientation: "horizontal",
+              className: "h-px flex-1 bg-neutral-200",
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "typography-body-2-regular shrink-0 text-body-100", children: label }),
+          /* @__PURE__ */ jsx(
+            SeparatorPrimitive.Root,
+            {
+              decorative: true,
+              orientation: "horizontal",
+              className: "h-px flex-1 bg-neutral-200"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative: true,
+      orientation: "horizontal",
+      className: cn(`mx-auto my-2 h-px w-full bg-neutral-200`, className),
+      ...props
+    }
+  );
+});
+Divider.displayName = "Divider";
+export {
+  Divider
+};
+//# sourceMappingURL=Divider.mjs.map

package/dist/components/Divider/Divider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.mjs","sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import * as SeparatorPrimitive from \"@radix-ui/react-separator\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\nexport type DividerOrientation = \"horizontal\" | \"vertical\";\nexport type DividerType = \"default\" | \"text\";\n\nexport interface DividerProps\n  extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {\n  /** Custom label to display*/\n  label?: string;\n}\n\nexport const Divider = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  DividerProps\n>(({ label, className, ...props }, ref) => {\n  if (label !== undefined) {\n    return (\n      <div\n        ref={ref}\n        className={cn(`my-2 flex w-full items-center justify-center gap-2`, className)}\n      >\n        <SeparatorPrimitive.Root\n          decorative\n          orientation=\"horizontal\"\n          className=\"h-px flex-1 bg-neutral-200\"\n          {...props}\n        />\n        <span className=\"typography-body-2-regular shrink-0 text-body-100\">{label}</span>\n        <SeparatorPrimitive.Root\n          decorative\n          orientation=\"horizontal\"\n          className=\"h-px flex-1 bg-neutral-200\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative\n      orientation=\"horizontal\"\n      className={cn(`mx-auto my-2 h-px w-full bg-neutral-200`, className)}\n      {...props}\n    />\n  );\n});\n\nDivider.displayName = \"Divider\";\n"],"names":[],"mappings":";;;;;AAaO,MAAM,UAAU,MAAM,WAG3B,CAAC,EAAE,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACzC,MAAI,UAAU,QAAW;AACvB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,sDAAsD,SAAS;AAAA,QAE7E,UAAA;AAAA,UAAA;AAAA,YAAC,mBAAmB;AAAA,YAAnB;AAAA,cACC,YAAU;AAAA,cACV,aAAY;AAAA,cACZ,WAAU;AAAA,cACT,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAEN,oBAAC,QAAA,EAAK,WAAU,oDAAoD,UAAA,OAAM;AAAA,UAC1E;AAAA,YAAC,mBAAmB;AAAA,YAAnB;AAAA,cACC,YAAU;AAAA,cACV,aAAY;AAAA,cACZ,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,YAAU;AAAA,MACV,aAAY;AAAA,MACZ,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AAED,QAAQ,cAAc;"}

package/dist/components/IconButton/IconButton.mjs

@@ -0,0 +1,75 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { Count } from "../Count/Count.mjs";
+const iconButtonVariants = {
+  primary: "bg-neutral-400 text-body-300 hover:bg-hover-100 disabled:opacity-50 focus:shadow-focus-ring",
+  secondary: `bg-neutral-100 text-neutral-400 hover:bg-neutral-200 disabled:opacity-50 focus:focus:shadow-focus-ring`,
+  tertiary: `bg-transparent text-neutral-400 hover:bg-hover-300 disabled:opacity-50 focus:shadow-focus-ring active:bg-brand-green-50`,
+  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`,
+  contrast: `bg-transparent text-body-white-solid-constant disabled:opacity-50 focus:shadow-focus-ring`,
+  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`,
+  navTray: `bg-transparent text-neutral-400 disabled:opacity-50 focus:shadow-focus-ring active:bg-brand-green-50`,
+  tertiaryDestructive: `bg-transparent text-error-500 hover:bg-hover-300 disabled:opacity-50 focus:shadow-focus-ring`,
+  stop: `bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant`,
+  microphone: `bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant`
+};
+const iconSizeVariants = {
+  24: "size-4",
+  32: "size-5",
+  40: "size-6",
+  52: "size-7",
+  72: "size-8"
+};
+const sizeVariants = {
+  24: "p-1",
+  32: "p-1.5",
+  40: "p-[10px]",
+  52: "p-2",
+  72: "p-4"
+};
+const IconButton = React.forwardRef(
+  ({ className, variant = "primary", size = "40", icon, counterValue, disabled = false, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        "data-testid": "icon-button",
+        disabled,
+        className: cn(
+          // Base styles
+          "relative inline-flex shrink-0 items-center justify-center focus-visible:outline-none",
+          "cursor-pointer rounded-full transition-all duration-150 ease-in-out disabled:cursor-default",
+          // Size variants
+          sizeVariants[size],
+          // Variant styles
+          iconButtonVariants[variant],
+          // Manual CSS overrides
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "flex shrink-0 items-center justify-center overflow-clip",
+                iconSizeVariants[size]
+              ),
+              "aria-hidden": "true",
+              children: icon
+            }
+          ),
+          counterValue !== void 0 && (variant === "tertiary" || variant === "navTray") && /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0", children: /* @__PURE__ */ jsx(Count, { value: counterValue }) })
+        ]
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+export {
+  IconButton
+};
+//# sourceMappingURL=IconButton.mjs.map

package/dist/components/IconButton/IconButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.mjs","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":[],"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,aAAa,MAAM;AAAA,EAC9B,CACE,EAAE,WAAW,UAAU,WAAW,OAAO,MAAM,MAAM,cAAc,WAAW,OAAO,GAAG,MAAA,GACxF,QACG;AACH,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ;AAAA,QACA,WAAW;AAAA;AAAA,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,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,iBAAiB,IAAI;AAAA,cAAA;AAAA,cAEvB,eAAY;AAAA,cAEX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,iBAAiB,WAAc,YAAY,cAAc,YAAY,cACpE,oBAAC,OAAA,EAAI,WAAU,0BACb,UAAA,oBAAC,OAAA,EAAM,OAAO,cAAc,EAAA,CAC9B;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,WAAW,cAAc;"}

package/dist/components/Icons/ArrowRightIcon.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const ArrowRightIcon = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      className: cn("size-5", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  )
+);
+ArrowRightIcon.displayName = "ArrowRightIcon";
+export {
+  ArrowRightIcon
+};
+//# sourceMappingURL=ArrowRightIcon.mjs.map

package/dist/components/Icons/ArrowRightIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowRightIcon.mjs","sources":["../../../src/components/Icons/ArrowRightIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const ArrowRightIcon = 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        d=\"M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  ),\n);\n\nArrowRightIcon.displayName = \"ArrowRightIcon\";\n"],"names":[],"mappings":";;;;AAIO,MAAM,iBAAiB,MAAM;AAAA,EAClC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,GAAE;AAAA,UACF,UAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX;AAAA,EAAA;AAGN;AAEA,eAAe,cAAc;"}

package/dist/components/Icons/ArrowUpRightIcon.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const ArrowUpRightIcon = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      className: cn("size-5", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M5.22 14.78a.75.75 0 0 0 1.06 0l7.22-7.22v5.69a.75.75 0 0 0 1.5 0v-7.5a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0 0 1.5h5.69l-7.22 7.22a.75.75 0 0 0 0 1.06Z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  )
+);
+ArrowUpRightIcon.displayName = "ArrowUpRightIcon";
+export {
+  ArrowUpRightIcon
+};
+//# sourceMappingURL=ArrowUpRightIcon.mjs.map

package/dist/components/Icons/ArrowUpRightIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowUpRightIcon.mjs","sources":["../../../src/components/Icons/ArrowUpRightIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const ArrowUpRightIcon = 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        d=\"M5.22 14.78a.75.75 0 0 0 1.06 0l7.22-7.22v5.69a.75.75 0 0 0 1.5 0v-7.5a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0 0 1.5h5.69l-7.22 7.22a.75.75 0 0 0 0 1.06Z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  ),\n);\n\nArrowUpRightIcon.displayName = \"ArrowUpRightIcon\";\n"],"names":[],"mappings":";;;;AAIO,MAAM,mBAAmB,MAAM;AAAA,EACpC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,GAAE;AAAA,UACF,UAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX;AAAA,EAAA;AAGN;AAEA,iBAAiB,cAAc;"}

package/dist/components/Icons/CheckCircleIcon.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const CheckCircleIcon = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      className: cn("size-5", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  )
+);
+CheckCircleIcon.displayName = "CheckCircleIcon";
+export {
+  CheckCircleIcon
+};
+//# sourceMappingURL=CheckCircleIcon.mjs.map

package/dist/components/Icons/CheckCircleIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckCircleIcon.mjs","sources":["../../../src/components/Icons/CheckCircleIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const CheckCircleIcon = 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        d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  ),\n);\n\nCheckCircleIcon.displayName = \"CheckCircleIcon\";\n"],"names":[],"mappings":";;;;AAIO,MAAM,kBAAkB,MAAM;AAAA,EACnC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,GAAE;AAAA,UACF,UAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX;AAAA,EAAA;AAGN;AAEA,gBAAgB,cAAc;"}

package/dist/components/Icons/CheckIcon.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const CheckIcon = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 12 12",
+      fill: "none",
+      "aria-hidden": "true",
+      className: cn("size-3", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M10 3 4.5 8.5 2 6",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  )
+);
+CheckIcon.displayName = "CheckIcon";
+export {
+  CheckIcon
+};
+//# sourceMappingURL=CheckIcon.mjs.map

package/dist/components/Icons/CheckIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckIcon.mjs","sources":["../../../src/components/Icons/CheckIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\n/** Small checkmark icon for use in checkbox/toggle components (12x12 viewBox) */\nexport const CheckIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 12 12\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      className={cn(\"size-3\", className)}\n      {...props}\n    >\n      <path\n        d=\"M10 3 4.5 8.5 2 6\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  ),\n);\n\nCheckIcon.displayName = \"CheckIcon\";\n"],"names":[],"mappings":";;;;AAKO,MAAM,YAAY,MAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AAGN;AAEA,UAAU,cAAc;"}

package/dist/components/Icons/ChevronLeftIcon.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const ChevronLeftIcon = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      "aria-hidden": "true",
+      className: cn("size-5", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M12.5 15L7.5 10L12.5 5",
+          stroke: "currentColor",
+          strokeWidth: "1.67",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  )
+);
+ChevronLeftIcon.displayName = "ChevronLeftIcon";
+export {
+  ChevronLeftIcon
+};
+//# sourceMappingURL=ChevronLeftIcon.mjs.map

package/dist/components/Icons/ChevronLeftIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChevronLeftIcon.mjs","sources":["../../../src/components/Icons/ChevronLeftIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const ChevronLeftIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      className={cn(\"size-5\", className)}\n      {...props}\n    >\n      <path\n        d=\"M12.5 15L7.5 10L12.5 5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.67\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  ),\n);\n\nChevronLeftIcon.displayName = \"ChevronLeftIcon\";\n"],"names":[],"mappings":";;;;AAIO,MAAM,kBAAkB,MAAM;AAAA,EACnC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AAGN;AAEA,gBAAgB,cAAc;"}

package/dist/components/Icons/ChevronRightIcon.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const ChevronRightIcon = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      "aria-hidden": "true",
+      className: cn("size-5", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M7.5 15L12.5 10L7.5 5",
+          stroke: "currentColor",
+          strokeWidth: "1.67",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  )
+);
+ChevronRightIcon.displayName = "ChevronRightIcon";
+export {
+  ChevronRightIcon
+};
+//# sourceMappingURL=ChevronRightIcon.mjs.map

package/dist/components/Icons/ChevronRightIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChevronRightIcon.mjs","sources":["../../../src/components/Icons/ChevronRightIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const ChevronRightIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      className={cn(\"size-5\", className)}\n      {...props}\n    >\n      <path\n        d=\"M7.5 15L12.5 10L7.5 5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.67\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  ),\n);\n\nChevronRightIcon.displayName = \"ChevronRightIcon\";\n"],"names":[],"mappings":";;;;AAIO,MAAM,mBAAmB,MAAM;AAAA,EACpC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AAGN;AAEA,iBAAiB,cAAc;"}

package/dist/components/Icons/CloseIcon.mjs

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const CloseIcon = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      className: cn("size-5", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M11.2112 9.64811L15.9725 4.89795C16.181 4.68945 16.2981 4.40666 16.2981 4.11179C16.2981 3.81693 16.181 3.53414 15.9725 3.32564C15.764 3.11714 15.4812 3 15.1863 3C14.8915 3 14.6087 3.11714 14.4002 3.32564L9.65 8.08687L4.89984 3.32564C4.69134 3.11714 4.40855 3 4.11368 3C3.81882 3 3.53603 3.11714 3.32753 3.32564C3.11902 3.53414 3.00189 3.81693 3.00189 4.11179C3.00189 4.40666 3.11902 4.68945 3.32753 4.89795L8.08876 9.64811L3.32753 14.3983C3.22374 14.5012 3.14137 14.6237 3.08516 14.7586C3.02894 14.8935 3 15.0383 3 15.1844C3 15.3306 3.02894 15.4753 3.08516 15.6103C3.14137 15.7452 3.22374 15.8676 3.32753 15.9706C3.43046 16.0744 3.55293 16.1567 3.68786 16.213C3.82279 16.2692 3.96751 16.2981 4.11368 16.2981C4.25986 16.2981 4.40458 16.2692 4.53951 16.213C4.67444 16.1567 4.79691 16.0744 4.89984 15.9706L9.65 11.2094L14.4002 15.9706C14.5031 16.0744 14.6256 16.1567 14.7605 16.213C14.8954 16.2692 15.0401 16.2981 15.1863 16.2981C15.3325 16.2981 15.4772 16.2692 15.6121 16.213C15.7471 16.1567 15.8695 16.0744 15.9725 15.9706C16.0763 15.8676 16.1586 15.7452 16.2148 15.6103C16.2711 15.4753 16.3 15.3306 16.3 15.1844C16.3 15.0383 16.2711 14.8935 16.2148 14.7586C16.1586 14.6237 16.0763 14.5012 15.9725 14.3983L11.2112 9.64811Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  )
+);
+CloseIcon.displayName = "CloseIcon";
+export {
+  CloseIcon
+};
+//# sourceMappingURL=CloseIcon.mjs.map

package/dist/components/Icons/CloseIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseIcon.mjs","sources":["../../../src/components/Icons/CloseIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const CloseIcon = 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        d=\"M11.2112 9.64811L15.9725 4.89795C16.181 4.68945 16.2981 4.40666 16.2981 4.11179C16.2981 3.81693 16.181 3.53414 15.9725 3.32564C15.764 3.11714 15.4812 3 15.1863 3C14.8915 3 14.6087 3.11714 14.4002 3.32564L9.65 8.08687L4.89984 3.32564C4.69134 3.11714 4.40855 3 4.11368 3C3.81882 3 3.53603 3.11714 3.32753 3.32564C3.11902 3.53414 3.00189 3.81693 3.00189 4.11179C3.00189 4.40666 3.11902 4.68945 3.32753 4.89795L8.08876 9.64811L3.32753 14.3983C3.22374 14.5012 3.14137 14.6237 3.08516 14.7586C3.02894 14.8935 3 15.0383 3 15.1844C3 15.3306 3.02894 15.4753 3.08516 15.6103C3.14137 15.7452 3.22374 15.8676 3.32753 15.9706C3.43046 16.0744 3.55293 16.1567 3.68786 16.213C3.82279 16.2692 3.96751 16.2981 4.11368 16.2981C4.25986 16.2981 4.40458 16.2692 4.53951 16.213C4.67444 16.1567 4.79691 16.0744 4.89984 15.9706L9.65 11.2094L14.4002 15.9706C14.5031 16.0744 14.6256 16.1567 14.7605 16.213C14.8954 16.2692 15.0401 16.2981 15.1863 16.2981C15.3325 16.2981 15.4772 16.2692 15.6121 16.213C15.7471 16.1567 15.8695 16.0744 15.9725 15.9706C16.0763 15.8676 16.1586 15.7452 16.2148 15.6103C16.2711 15.4753 16.3 15.3306 16.3 15.1844C16.3 15.0383 16.2711 14.8935 16.2148 14.7586C16.1586 14.6237 16.0763 14.5012 15.9725 14.3983L11.2112 9.64811Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  ),\n);\n\nCloseIcon.displayName = \"CloseIcon\";\n"],"names":[],"mappings":";;;;AAIO,MAAM,YAAY,MAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACP;AAAA,EAAA;AAGN;AAEA,UAAU,cAAc;"}

package/dist/components/Icons/CrossIcon.mjs

@@ -0,0 +1,23 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const CrossIcon = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      className: cn("size-5", className),
+      ...props,
+      children: /* @__PURE__ */ jsx("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" })
+    }
+  )
+);
+CrossIcon.displayName = "CrossIcon";
+export {
+  CrossIcon
+};
+//# sourceMappingURL=CrossIcon.mjs.map

package/dist/components/Icons/CrossIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrossIcon.mjs","sources":["../../../src/components/Icons/CrossIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const CrossIcon = 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 d=\"M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z\" />\n    </svg>\n  ),\n);\n\nCrossIcon.displayName = \"CrossIcon\";\n"],"names":[],"mappings":";;;;AAIO,MAAM,YAAY,MAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAA,oBAAC,QAAA,EAAK,GAAE,qLAAA,CAAqL;AAAA,IAAA;AAAA,EAAA;AAGnM;AAEA,UAAU,cAAc;"}

package/dist/components/Icons/CrownIcon.mjs

@@ -0,0 +1,23 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const CrownIcon = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      className: cn("size-5", className),
+      ...props,
+      children: /* @__PURE__ */ jsx("path", { d: "M3.848 13.913 2 3.91l5.081 4.548L10.315 3l3.234 5.457 5.081-4.548-1.848 10.004H3.848Zm12.934 2.729c0 .546-.37.91-.924.91H4.772c-.555 0-.924-.364-.924-.91v-.91h12.934v.91Z" })
+    }
+  )
+);
+CrownIcon.displayName = "CrownIcon";
+export {
+  CrownIcon
+};
+//# sourceMappingURL=CrownIcon.mjs.map

package/dist/components/Icons/CrownIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrownIcon.mjs","sources":["../../../src/components/Icons/CrownIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const CrownIcon = 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 d=\"M3.848 13.913 2 3.91l5.081 4.548L10.315 3l3.234 5.457 5.081-4.548-1.848 10.004H3.848Zm12.934 2.729c0 .546-.37.91-.924.91H4.772c-.555 0-.924-.364-.924-.91v-.91h12.934v.91Z\" />\n    </svg>\n  ),\n);\n\nCrownIcon.displayName = \"CrownIcon\";\n"],"names":[],"mappings":";;;;AAIO,MAAM,YAAY,MAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAA,oBAAC,QAAA,EAAK,GAAE,6KAAA,CAA6K;AAAA,IAAA;AAAA,EAAA;AAG3L;AAEA,UAAU,cAAc;"}