@next-degree/pickle-shared-js 0.12.7 → 0.13.1

package/dist/components/ui/ReadMore.js

@@ -7,7 +7,8 @@ import Markdown from "react-markdown";
 // src/components/ui/Button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "cva";
-import { forwardRef } from "react";
+import { Loader2 } from "lucide-react";
+import React2, { forwardRef } from "react";
 
 // src/lib/utils.ts
 import { clsx } from "clsx";
@@ -17,24 +18,34 @@ function cn(...inputs) {
 }
 
 // src/components/ui/Button.tsx
-import { jsx } from "react/jsx-runtime";
 var Button = forwardRef(
-  ({ className, variant, size, asChild = false, type = "button", ...props }, ref) => {
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    type = "button",
+    children,
+    isLoading = false,
+    ...props
+  }, ref) => {
     const Component = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ React2.createElement(
       Component,
       {
-        className: cn(buttonVariants({ variant, size, className })),
+        className: cn(buttonVariants({ variant, size, className, isLoading, asChild })),
         type,
         ref,
         ...props
-      }
+      },
+      asChild ? children : /* @__PURE__ */ React2.createElement(React2.Fragment, null, children, isLoading && /* @__PURE__ */ React2.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-white/30 backdrop-blur-[0.5px]" }, /* @__PURE__ */ React2.createElement(Loader2, { className: "h-5 w-5 animate-spin text-gray-800" })))
     );
   }
 );
 Button.displayName = "Button";
 var buttonVariants = cva(
   [
+    "relative",
     "flex",
     "items-center",
     "justify-center",
@@ -44,7 +55,8 @@ var buttonVariants = cva(
     "outline-2",
     "outline-offset-2",
     "outline-dashed",
-    "outline-transparent"
+    "outline-transparent",
+    "overflow-hidden"
   ],
   {
     variants: {
@@ -91,19 +103,92 @@ var buttonVariants = cva(
           "focus:text-black",
           "focus:outline-purple-100",
           "active:text-purple-80"
+        ],
+        "outline-primary": [
+          "bg-transparent",
+          "border-2",
+          "border-pickle-100",
+          "text-pickle-100",
+          "hover:bg-pickle-100",
+          "hover:text-black",
+          "active:bg-pickle-80",
+          "active:text-black",
+          "focus:outline-purple-100",
+          "disabled:text-grey-40",
+          "disabled:border-grey-40",
+          "disabled:hover:bg-transparent",
+          "disabled:hover:text-grey-40"
+        ],
+        "outline-secondary": [
+          "bg-transparent",
+          "border-2",
+          "border-green-80",
+          "text-green-80",
+          "hover:bg-green-80",
+          "hover:text-white",
+          "active:bg-green-90",
+          "active:text-white",
+          "focus:outline-pickle-100",
+          "disabled:text-grey-40",
+          "disabled:border-grey-40",
+          "disabled:hover:bg-transparent",
+          "disabled:hover:text-grey-40"
+        ],
+        "icon-outline": [
+          "bg-transparent",
+          "text-black",
+          "hover:bg-grey-5",
+          "active:bg-grey-10",
+          "focus:outline-purple-100",
+          "disabled:text-grey-40",
+          "disabled:hover:bg-transparent",
+          "disabled:hover:text-grey-40"
+        ],
+        "icon-primary": [
+          "bg-pickle-100",
+          "text-black",
+          "hover:bg-pickle-80",
+          "active:bg-pickle-60",
+          "focus:outline-purple-100",
+          "disabled:text-grey-40",
+          "disabled:bg-grey-10"
+        ],
+        "icon-secondary": [
+          "bg-green-80",
+          "text-white",
+          "hover:bg-green-90",
+          "active:bg-green-100",
+          "focus:outline-pickle-100",
+          "disabled:text-grey-40",
+          "disabled:bg-grey-10"
         ]
       },
       size: {
+        "extra-small": ["h-8", "text-xs", "px-3", "py-1"],
         small: ["h-10", "text-sm", "px-4", "py-2"],
         medium: ["h-12", "text-base", "px-6", "py-3"],
         large: ["h-14", "text-lg", "px-8", "py-4"]
+      },
+      isLoading: {
+        true: ["cursor-not-allowed", "pointer-events-none"]
+      },
+      asChild: {
+        true: [],
+        false: ["cursor-pointer", "pointer-events-auto"]
       }
     },
     defaultVariants: {
       variant: "neutral",
-      size: "medium"
+      size: "medium",
+      isLoading: false,
+      asChild: false
     },
     compoundVariants: [
+      {
+        variant: "link",
+        size: "extra-small",
+        class: ["h-3", "text-xs", "p-0"]
+      },
       {
         variant: "link",
         size: "small",
@@ -118,13 +203,72 @@ var buttonVariants = cva(
         variant: "link",
         size: "large",
         class: ["h-6", "text-base", "p-0"]
+      },
+      {
+        variant: "icon-outline",
+        size: "extra-small",
+        class: ["h-8", "w-8", "p-1.5", "[&>svg]:w-5", "[&>svg]:h-5"]
+      },
+      {
+        variant: "icon-outline",
+        size: "small",
+        class: ["h-10", "w-10", "p-2", "[&>svg]:w-6", "[&>svg]:h-6"]
+      },
+      {
+        variant: "icon-outline",
+        size: "medium",
+        class: ["h-12", "w-12", "p-2.5", "[&>svg]:w-7", "[&>svg]:h-7"]
+      },
+      {
+        variant: "icon-outline",
+        size: "large",
+        class: ["h-14", "w-14", "p-3", "[&>svg]:w-8", "[&>svg]:h-8"]
+      },
+      {
+        variant: "icon-primary",
+        size: "extra-small",
+        class: ["h-8", "w-8", "p-1.5", "[&>svg]:w-5", "[&>svg]:h-5"]
+      },
+      {
+        variant: "icon-primary",
+        size: "small",
+        class: ["h-10", "w-10", "p-2", "[&>svg]:w-6", "[&>svg]:h-6"]
+      },
+      {
+        variant: "icon-primary",
+        size: "medium",
+        class: ["h-12", "w-12", "p-2.5", "[&>svg]:w-7", "[&>svg]:h-7"]
+      },
+      {
+        variant: "icon-primary",
+        size: "large",
+        class: ["h-14", "w-14", "p-3", "[&>svg]:w-8", "[&>svg]:h-8"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "extra-small",
+        class: ["h-8", "w-8", "p-1.5", "[&>svg]:w-5", "[&>svg]:h-5"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "small",
+        class: ["h-10", "w-10", "p-2", "[&>svg]:w-6", "[&>svg]:h-6"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "medium",
+        class: ["h-12", "w-12", "p-2.5", "[&>svg]:w-7", "[&>svg]:h-7"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "large",
+        class: ["h-14", "w-14", "p-3", "[&>svg]:w-8", "[&>svg]:h-8"]
       }
     ]
   }
 );
 
 // src/components/ui/ReadMore.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function ReadMore({ text, ...props }) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [maxWords, setMaxWords] = useState(160);
@@ -151,22 +295,16 @@ function ReadMore({ text, ...props }) {
   }
   const toggleText = () => setIsExpanded(!isExpanded);
   const snippet = createReadMoreText(text, maxWords, isExpanded);
-  return /* @__PURE__ */ jsxs("div", { ...props, children: [
-    /* @__PURE__ */ jsx2("div", { "data-testid": "read-more-text", className: "prose lg:prose-lg", children: /* @__PURE__ */ jsx2(Markdown, { children: snippet }) }),
-    isOverMaxWords && /* @__PURE__ */ jsx2(
-      Button,
-      {
-        type: "button",
-        className: "mt-2 flex items-center justify-center",
-        variant: "link",
-        onClick: toggleText,
-        children: /* @__PURE__ */ jsxs("p", { className: "text-sm font-bold underline underline-offset-2", children: [
-          "Read ",
-          isExpanded ? "less" : "more"
-        ] })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ React.createElement("div", { ...props }, /* @__PURE__ */ React.createElement("div", { "data-testid": "read-more-text", className: "prose lg:prose-lg" }, /* @__PURE__ */ React.createElement(Markdown, null, snippet)), isOverMaxWords && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      type: "button",
+      className: "mt-2 flex items-center justify-center",
+      variant: "link",
+      onClick: toggleText
+    },
+    /* @__PURE__ */ React.createElement("p", { className: "text-sm font-bold underline underline-offset-2" }, "Read ", isExpanded ? "less" : "more")
+  ));
 }
 export {
   ReadMore

package/dist/components/ui/ReadMore.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/ReadMore.tsx","../../../src/components/ui/Button.tsx","../../../src/lib/utils.ts"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, useEffect, useState } from 'react'\nimport Markdown from 'react-markdown'\n\nimport { Button } from '@/components/ui/Button'\n\nexport type ReadMoreProps = ComponentProps<'div'> & {\n  text: string\n}\n\nexport function ReadMore({ text, ...props }: Readonly<ReadMoreProps>) {\n  const [isExpanded, setIsExpanded] = useState(false)\n  const [maxWords, setMaxWords] = useState(160)\n\n  const isOverMaxWords = text.split(' ').length > maxWords\n\n  useEffect(() => {\n    const updateMaxWords = () => {\n      const windowWidth = window.innerWidth\n      if (windowWidth <= 768) {\n        setMaxWords(50)\n      } else {\n        setMaxWords(160)\n      }\n    }\n\n    updateMaxWords()\n    window.addEventListener('resize', updateMaxWords)\n\n    return () => window.removeEventListener('resize', updateMaxWords)\n  }, [])\n\n  function createReadMoreText(text: string, maxWords: number, isExpanded: boolean): string {\n    if (!isOverMaxWords) return text\n\n    const words = text.split(' ')\n    const snippet = isExpanded ? text : words.slice(0, maxWords).join(' ')\n    const readMoreText = isExpanded ? '' : '...'\n    return `${snippet} ${readMoreText}`\n  }\n\n  const toggleText = () => setIsExpanded(!isExpanded)\n\n  const snippet = createReadMoreText(text, maxWords, isExpanded)\n\n  return (\n    <div {...props}>\n      <div data-testid=\"read-more-text\" className=\"prose lg:prose-lg\">\n        <Markdown>{snippet}</Markdown>\n      </div>\n      {isOverMaxWords && (\n        <Button\n          type=\"button\"\n          className=\"mt-2 flex items-center justify-center\"\n          variant=\"link\"\n          onClick={toggleText}\n        >\n          <p className=\"text-sm font-bold underline underline-offset-2\">\n            Read {isExpanded ? 'less' : 'more'}\n          </p>\n        </Button>\n      )}\n    </div>\n  )\n}\n","import { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'cva'\nimport React, { forwardRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Props for the Button component.\n * @interface ButtonProps\n * @extends {React.ButtonHTMLAttributes<HTMLButtonElement>}\n * @extends {VariantProps<typeof buttonVariants>}\n */\ninterface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  /**\n   * When true, the component will render its children directly without wrapping them in a button element.\n   * Useful when you want to use the button styles on a different element.\n   * @default false\n   */\n  asChild?: boolean\n}\n\n/**\n * A versatile button component that supports multiple variants and sizes.\n *\n * @component\n * @example\n * ```tsx\n * // Default button\n * <Button>Click me</Button>\n *\n * // Primary variant with large size\n * <Button variant=\"primary\" size=\"lg\">Large Button</Button>\n *\n * // As a link\n * <Button asChild>\n *   <a href=\"/somewhere\">Go somewhere</a>\n * </Button>\n * ```\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, type = 'button', ...props }, ref) => {\n    const Component = asChild ? Slot : 'button'\n\n    return (\n      <Component\n        className={cn(buttonVariants({ variant, size, className }))}\n        type={type}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = 'Button'\n\n/**\n * Variant definitions for the Button component using class-variance-authority.\n * Provides consistent styling across different button variations.\n */\nexport const buttonVariants = cva(\n  [\n    'flex',\n    'items-center',\n    'justify-center',\n    'gap-2',\n    'rounded-full',\n    'font-bold',\n    'outline-2',\n    'outline-offset-2',\n    'outline-dashed',\n    'outline-transparent',\n  ],\n  {\n    variants: {\n      variant: {\n        neutral: [\n          'bg-black',\n          'text-white',\n          'hover:bg-grey-90',\n          'active:bg-grey-80',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        primary: [\n          'bg-pickle-100',\n          'text-black',\n          'hover:bg-pickle-80',\n          'active:bg-pickle-60',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        secondary: [\n          'bg-green-80',\n          'text-white',\n          'hover:bg-green-90',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        transparent: [\n          'text-white',\n          'hover:bg-green-80',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n        ],\n        link: [\n          'leading-tight',\n          'text-black',\n          'underline',\n          'hover:text-purple-100',\n          'focus:text-black',\n          'focus:outline-purple-100',\n          'active:text-purple-80',\n        ],\n      },\n      size: {\n        small: ['h-10', 'text-sm', 'px-4', 'py-2'],\n        medium: ['h-12', 'text-base', 'px-6', 'py-3'],\n        large: ['h-14', 'text-lg', 'px-8', 'py-4'],\n      },\n    },\n    defaultVariants: {\n      variant: 'neutral',\n      size: 'medium',\n    },\n    compoundVariants: [\n      {\n        variant: 'link',\n        size: 'small',\n        class: ['h-3', 'text-xs', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'medium',\n        class: ['h-4', 'text-sm', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'large',\n        class: ['h-6', 'text-base', 'p-0'],\n      },\n    ],\n  }\n)\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":"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","names":["jsx","text","maxWords","isExpanded","snippet"]}
+{"version":3,"sources":["../../../src/components/ui/ReadMore.tsx","../../../src/components/ui/Button.tsx","../../../src/lib/utils.ts"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, useEffect, useState } from 'react'\nimport Markdown from 'react-markdown'\n\nimport { Button } from '@/components/ui/Button'\n\nexport type ReadMoreProps = ComponentProps<'div'> & {\n  text: string\n}\n\nexport function ReadMore({ text, ...props }: Readonly<ReadMoreProps>) {\n  const [isExpanded, setIsExpanded] = useState(false)\n  const [maxWords, setMaxWords] = useState(160)\n\n  const isOverMaxWords = text.split(' ').length > maxWords\n\n  useEffect(() => {\n    const updateMaxWords = () => {\n      const windowWidth = window.innerWidth\n      if (windowWidth <= 768) {\n        setMaxWords(50)\n      } else {\n        setMaxWords(160)\n      }\n    }\n\n    updateMaxWords()\n    window.addEventListener('resize', updateMaxWords)\n\n    return () => window.removeEventListener('resize', updateMaxWords)\n  }, [])\n\n  function createReadMoreText(text: string, maxWords: number, isExpanded: boolean): string {\n    if (!isOverMaxWords) return text\n\n    const words = text.split(' ')\n    const snippet = isExpanded ? text : words.slice(0, maxWords).join(' ')\n    const readMoreText = isExpanded ? '' : '...'\n    return `${snippet} ${readMoreText}`\n  }\n\n  const toggleText = () => setIsExpanded(!isExpanded)\n\n  const snippet = createReadMoreText(text, maxWords, isExpanded)\n\n  return (\n    <div {...props}>\n      <div data-testid=\"read-more-text\" className=\"prose lg:prose-lg\">\n        <Markdown>{snippet}</Markdown>\n      </div>\n      {isOverMaxWords && (\n        <Button\n          type=\"button\"\n          className=\"mt-2 flex items-center justify-center\"\n          variant=\"link\"\n          onClick={toggleText}\n        >\n          <p className=\"text-sm font-bold underline underline-offset-2\">\n            Read {isExpanded ? 'less' : 'more'}\n          </p>\n        </Button>\n      )}\n    </div>\n  )\n}\n","import { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'cva'\nimport { Loader2 } from 'lucide-react'\nimport React, { forwardRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Props for the Button component.\n * @interface ButtonProps\n * @extends {React.ButtonHTMLAttributes<HTMLButtonElement>}\n * @extends {VariantProps<typeof buttonVariants>}\n */\ninterface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {}\n\n/**\n * A versatile button component that supports multiple variants and sizes.\n *\n * @component\n * @example\n * ```tsx\n * // Default button\n * <Button>Click me</Button>\n *\n * // Primary variant with large size\n * <Button variant=\"primary\" size=\"lg\">Large Button</Button>\n *\n * // As a link\n * <Button asChild>\n *   <a href=\"/somewhere\">Go somewhere</a>\n * </Button>\n * ```\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      asChild = false,\n      type = 'button',\n      children,\n      isLoading = false,\n      ...props\n    },\n    ref\n  ) => {\n    const Component = asChild ? Slot : 'button'\n\n    return (\n      <Component\n        className={cn(buttonVariants({ variant, size, className, isLoading, asChild }))}\n        type={type}\n        ref={ref}\n        {...props}\n      >\n        {asChild ? (\n          children\n        ) : (\n          <>\n            {children}\n            {isLoading && (\n              <div className=\"absolute inset-0 flex items-center justify-center bg-white/30 backdrop-blur-[0.5px]\">\n                <Loader2 className=\"h-5 w-5 animate-spin text-gray-800\" />\n              </div>\n            )}\n          </>\n        )}\n      </Component>\n    )\n  }\n)\nButton.displayName = 'Button'\n\n/**\n * Variant definitions for the Button component using class-variance-authority.\n * Provides consistent styling across different button variations.\n */\nexport const buttonVariants = cva(\n  [\n    'relative',\n    'flex',\n    'items-center',\n    'justify-center',\n    'gap-2',\n    'rounded-full',\n    'font-bold',\n    'outline-2',\n    'outline-offset-2',\n    'outline-dashed',\n    'outline-transparent',\n    'overflow-hidden',\n  ],\n  {\n    variants: {\n      variant: {\n        neutral: [\n          'bg-black',\n          'text-white',\n          'hover:bg-grey-90',\n          'active:bg-grey-80',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        primary: [\n          'bg-pickle-100',\n          'text-black',\n          'hover:bg-pickle-80',\n          'active:bg-pickle-60',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        secondary: [\n          'bg-green-80',\n          'text-white',\n          'hover:bg-green-90',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        transparent: [\n          'text-white',\n          'hover:bg-green-80',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n        ],\n        link: [\n          'leading-tight',\n          'text-black',\n          'underline',\n          'hover:text-purple-100',\n          'focus:text-black',\n          'focus:outline-purple-100',\n          'active:text-purple-80',\n        ],\n        'outline-primary': [\n          'bg-transparent',\n          'border-2',\n          'border-pickle-100',\n          'text-pickle-100',\n          'hover:bg-pickle-100',\n          'hover:text-black',\n          'active:bg-pickle-80',\n          'active:text-black',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:border-grey-40',\n          'disabled:hover:bg-transparent',\n          'disabled:hover:text-grey-40',\n        ],\n        'outline-secondary': [\n          'bg-transparent',\n          'border-2',\n          'border-green-80',\n          'text-green-80',\n          'hover:bg-green-80',\n          'hover:text-white',\n          'active:bg-green-90',\n          'active:text-white',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n          'disabled:border-grey-40',\n          'disabled:hover:bg-transparent',\n          'disabled:hover:text-grey-40',\n        ],\n        'icon-outline': [\n          'bg-transparent',\n          'text-black',\n          'hover:bg-grey-5',\n          'active:bg-grey-10',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:hover:bg-transparent',\n          'disabled:hover:text-grey-40',\n        ],\n        'icon-primary': [\n          'bg-pickle-100',\n          'text-black',\n          'hover:bg-pickle-80',\n          'active:bg-pickle-60',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        'icon-secondary': [\n          'bg-green-80',\n          'text-white',\n          'hover:bg-green-90',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n      },\n      size: {\n        'extra-small': ['h-8', 'text-xs', 'px-3', 'py-1'],\n        small: ['h-10', 'text-sm', 'px-4', 'py-2'],\n        medium: ['h-12', 'text-base', 'px-6', 'py-3'],\n        large: ['h-14', 'text-lg', 'px-8', 'py-4'],\n      },\n      isLoading: {\n        true: ['cursor-not-allowed', 'pointer-events-none'],\n      },\n      asChild: {\n        true: [],\n        false: ['cursor-pointer', 'pointer-events-auto'],\n      },\n    },\n    defaultVariants: {\n      variant: 'neutral',\n      size: 'medium',\n      isLoading: false,\n      asChild: false,\n    },\n    compoundVariants: [\n      {\n        variant: 'link',\n        size: 'extra-small',\n        class: ['h-3', 'text-xs', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'small',\n        class: ['h-3', 'text-xs', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'medium',\n        class: ['h-4', 'text-sm', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'large',\n        class: ['h-6', 'text-base', 'p-0'],\n      },\n      {\n        variant: 'icon-outline',\n        size: 'extra-small',\n        class: ['h-8', 'w-8', 'p-1.5', '[&>svg]:w-5', '[&>svg]:h-5'],\n      },\n      {\n        variant: 'icon-outline',\n        size: 'small',\n        class: ['h-10', 'w-10', 'p-2', '[&>svg]:w-6', '[&>svg]:h-6'],\n      },\n      {\n        variant: 'icon-outline',\n        size: 'medium',\n        class: ['h-12', 'w-12', 'p-2.5', '[&>svg]:w-7', '[&>svg]:h-7'],\n      },\n      {\n        variant: 'icon-outline',\n        size: 'large',\n        class: ['h-14', 'w-14', 'p-3', '[&>svg]:w-8', '[&>svg]:h-8'],\n      },\n      {\n        variant: 'icon-primary',\n        size: 'extra-small',\n        class: ['h-8', 'w-8', 'p-1.5', '[&>svg]:w-5', '[&>svg]:h-5'],\n      },\n      {\n        variant: 'icon-primary',\n        size: 'small',\n        class: ['h-10', 'w-10', 'p-2', '[&>svg]:w-6', '[&>svg]:h-6'],\n      },\n      {\n        variant: 'icon-primary',\n        size: 'medium',\n        class: ['h-12', 'w-12', 'p-2.5', '[&>svg]:w-7', '[&>svg]:h-7'],\n      },\n      {\n        variant: 'icon-primary',\n        size: 'large',\n        class: ['h-14', 'w-14', 'p-3', '[&>svg]:w-8', '[&>svg]:h-8'],\n      },\n      {\n        variant: 'icon-secondary',\n        size: 'extra-small',\n        class: ['h-8', 'w-8', 'p-1.5', '[&>svg]:w-5', '[&>svg]:h-5'],\n      },\n      {\n        variant: 'icon-secondary',\n        size: 'small',\n        class: ['h-10', 'w-10', 'p-2', '[&>svg]:w-6', '[&>svg]:h-6'],\n      },\n      {\n        variant: 'icon-secondary',\n        size: 'medium',\n        class: ['h-12', 'w-12', 'p-2.5', '[&>svg]:w-7', '[&>svg]:h-7'],\n      },\n      {\n        variant: 'icon-secondary',\n        size: 'large',\n        class: ['h-14', 'w-14', 'p-3', '[&>svg]:w-8', '[&>svg]:h-8'],\n      },\n    ],\n  }\n)\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":"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","names":["React","React","text","maxWords","isExpanded","snippet"]}