@lemonsqueezy/wedges
Version:
An ever-expanding, open-source React UI library built with the Wedges Design System, Radix primitives, and Tailwind CSS.
1 lines • 286 kB
Source Map (JSON)
{"version":3,"sources":["../../src/index.ts","../../src/components/Alert/Alert.tsx","../../src/helpers/utils.ts","../../src/tw-plugin/plugin.ts","../../src/tw-plugin/foundation/colors/blue.ts","../../src/tw-plugin/foundation/colors/gray.ts","../../src/tw-plugin/foundation/colors/green.ts","../../src/tw-plugin/foundation/colors/orange.ts","../../src/tw-plugin/foundation/colors/pink.ts","../../src/tw-plugin/foundation/colors/purple.ts","../../src/tw-plugin/foundation/colors/red.ts","../../src/tw-plugin/foundation/colors/yellow.ts","../../src/tw-plugin/foundation/colors/palette.ts","../../src/tw-plugin/foundation/colors/themableColors.ts","../../src/tw-plugin/foundation/fontSizes.ts","../../src/tw-plugin/foundation/minWidth.ts","../../src/tw-plugin/foundation/shadows.ts","../../src/tw-plugin/utils/color.ts","../../src/tw-plugin/utils/object.ts","../../src/tw-plugin/utils/prefix.ts","../../src/components/Button/Button.tsx","../../src/components/Button/variants.ts","../../src/components/icons/CloseIcon.tsx","../../src/components/icons/InfoIcon.tsx","../../src/components/icons/LemonSqueezy.tsx","../../src/components/icons/TippyIcon.tsx","../../src/components/Alert/variants.ts","../../src/components/Avatar/Avatar.tsx","../../src/components/Avatar/variants.ts","../../src/components/AvatarGroup/AvatarGroup.tsx","../../src/components/Badge/Badge.tsx","../../src/components/Badge/variants.ts","../../src/components/ButtonGroup/ButtonGroup.tsx","../../src/components/Checkbox/Checkbox.tsx","../../src/components/CheckboxGroup/CheckboxGroup.tsx","../../src/components/Label/Label.tsx","../../src/components/Tooltip/Tooltip.tsx","../../src/components/Tooltip/TooltipArrow.tsx","../../src/components/Tooltip/TooltipTrigger.tsx","../../src/components/DropdownMenu/DropdownMenu.tsx","../../src/components/icons/CheckIcon.tsx","../../src/components/Kbd/Kbd.tsx","../../src/components/Kbd/types.ts","../../src/components/Input/Input.tsx","../../src/components/Loading/Loading.tsx","../../src/components/Loading/Dots.tsx","../../src/components/Loading/utils.ts","../../src/components/Loading/Line.tsx","../../src/components/Loading/Spinner.tsx","../../src/components/Popover/Popover.tsx","../../src/components/Progress/ProgressBar.tsx","../../src/components/Progress/ProgressCircle.tsx","../../src/components/RadioGroup/RadioGroup.tsx","../../src/components/Slider/Slider.tsx","../../src/components/Select/Select.tsx","../../src/components/Switch/Switch.tsx","../../src/components/SwitchGroup/SwitchGroup.tsx","../../src/components/Tabs/Tabs.tsx","../../src/components/Tabs/variants.ts","../../src/components/Tag/Tag.tsx","../../src/components/Textarea/Textarea.tsx","../../src/components/Toggle/Toggle.tsx","../../../../node_modules/@radix-ui/react-toggle/src/Toggle.tsx","../../../../node_modules/@radix-ui/primitive/src/primitive.tsx","../../../../node_modules/@radix-ui/react-use-controllable-state/src/useControllableState.tsx","../../../../node_modules/@radix-ui/react-use-callback-ref/src/useCallbackRef.tsx","../../../../node_modules/@radix-ui/react-primitive/src/Primitive.tsx","../../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["export * from \"./components\";\nexport * from \"./tw-plugin\";\n","import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { VariantProps } from \"cva\";\n\nimport { cn, isReactElement } from \"../../helpers/utils\";\nimport { Button } from \"../Button\";\nimport { CloseIcon, InfoIcon } from \"../icons\";\nimport { alertIconVariants, alertTitleVariants, alertVariants } from \"./variants\";\n\nconst defaultRootClasses =\n \"wg-antialiased flex text-sm leading-6 bg-surface dark:bg-surface dark:text-surface-500 items-start\";\n\n/* ---------------------------------- Types --------------------------------- */\ntype ClosableProps = {\n /**\n * Is the alert closable? If true, a close icon will be displayed.\n * @default true\n */\n closable: true;\n\n /**\n * An optional callback function to be called when the close icon is clicked.\n * This can be used to handle the removal of the tag.\n * If provided, the close icon will be displayed.\n */\n onClose?: React.MouseEventHandler<HTMLButtonElement>;\n};\n\ntype NotClosableProps = {\n /**\n * Is the alert closable? If true, a close button will be displayed and\n * when clicked on it will hide the alert element\n * @default true\n */\n closable?: false;\n\n /**\n * An optional callback function to be called when the close button is clicked.\n * Requires the `closable` prop to be set to `true`.\n */\n onClose?: never;\n};\n\nexport type AlertProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> &\n VariantProps<typeof alertVariants> & {\n /**\n * The slot to be rendered before the description.\n * This can be used to render an icon\n * or any other element before the description. Also accepts a string,\n * number, or any valid React element.\n * If the `before` prop is omitted, the default icon will be displayed.\n *\n * @example\n * // Display an alert with icon\n * <Alert before={<SuccessIcon />} />\n */\n before?: React.ReactNode;\n\n /**\n * The slot to be rendered after the description.\n * This can be a string, number or any valid React element.\n * If omitted, it will not be displayed.\n *\n * @example\n * // Display an alert with button\n * <Alert after={<Button size='sm'>Save</Button>} />\n */\n after?: React.ReactNode;\n\n /**\n * The title to display within the Alert component.\n * This can be a string, number or any valid React element.\n * If omitted, no title will be displayed.\n * If a string is provided, it will be wrapped in an <AlertTitle /> component.\n * If a React element is provided, it will be rendered as-is.\n */\n title?: React.ReactNode;\n } & (ClosableProps | NotClosableProps);\n\n/* ------------------------------- Components ------------------------------- */\nconst AlertWedges = React.forwardRef<HTMLDivElement, AlertProps>(\n (\n {\n after,\n before,\n className,\n closable,\n color,\n variant = \"inline\",\n children,\n title,\n onClose,\n ...otherProps\n },\n ref\n ) => {\n const [visible, setVisible] = React.useState(true);\n\n /**\n * Handle the close event.\n * @param event - The event object\n */\n const handleClose = React.useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n // Do not close if the event is prevented by the onClose callback\n if (!event.defaultPrevented) {\n setVisible(false);\n }\n\n if (onClose) {\n onClose(event);\n }\n },\n [onClose]\n );\n\n if (!visible) {\n return null;\n }\n\n return (\n <AlertRoot\n ref={ref}\n className={cn(alertVariants({ variant, color }), className)}\n {...otherProps}\n >\n <AlertBefore className={cn(variant === \"inline\" && \"pl-1\")} color={color}>\n {before}\n </AlertBefore>\n\n <div\n className={cn(\n \"flex grow flex-col items-start\",\n variant === \"expanded\" && \"items-start gap-3 px-2\",\n variant === \"inline\" && \"px-2 sm:flex-row sm:items-center sm:gap-2\",\n variant === \"inline\" && closable && \"pr-1\"\n )}\n >\n <div\n className={cn(\n \"flex grow flex-col items-start\",\n variant === \"expanded\" && \"items-start\",\n variant === \"inline\" && \"sm:flex-row sm:items-center sm:gap-2\"\n )}\n >\n {title && <AlertTitle color={color}>{title}</AlertTitle>}\n {children && <AlertDescription>{children}</AlertDescription>}\n </div>\n\n {after && (\n <div className={cn(variant === \"inline\" && \"mt-3 sm:ml-auto sm:mt-0\")}>\n <AlertAfter>{after}</AlertAfter>\n </div>\n )}\n </div>\n\n {closable && (\n <AlertCloseButton className={cn(variant === \"inline\" && \"pr-1\")} onClick={handleClose} />\n )}\n </AlertRoot>\n );\n }\n);\n\n/* Root */\nconst AlertRoot = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, children, ...otherProps }, ref) => {\n return (\n <div ref={ref} className={cn(defaultRootClasses, className)} role=\"alert\" {...otherProps}>\n {children}\n </div>\n );\n }\n);\n\n/* Before */\nconst AlertBefore = React.forwardRef<\n HTMLElement,\n React.HTMLAttributes<HTMLElement> & VariantProps<typeof alertIconVariants>\n>(({ className, color, children, ...props }, ref) => {\n const Component = isReactElement(children) ? Slot : \"span\";\n\n if (!children) {\n return <InfoIcon className={cn(\"size-6 shrink-0\", alertIconVariants({ color }), className)} />;\n }\n\n return (\n <Component ref={ref} className={cn(alertIconVariants({ color }), className)} {...props}>\n {children}\n </Component>\n );\n});\n\n/* After */\nconst AlertAfter = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n ({ className, children, ...props }, ref) => {\n const Component = isReactElement(children) ? Slot : \"span\";\n\n return (\n <Component ref={ref} className={className} {...props}>\n {children}\n </Component>\n );\n }\n);\n\n/* Title */\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement> & VariantProps<typeof alertTitleVariants>\n>(({ className, color, children, ...props }, ref) => {\n const Component = isReactElement(children) ? Slot : \"p\";\n\n return (\n <Component ref={ref} className={cn(alertTitleVariants({ color }), className)} {...props}>\n {children}\n </Component>\n );\n});\n\n/* Description */\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n const Component = isReactElement(children) ? Slot : \"p\";\n\n return (\n <Component ref={ref} className={cn(\"text-start\", className)} {...props}>\n {children}\n </Component>\n );\n});\n\n/* CloseButton */\nconst AlertCloseButton = React.forwardRef<\n React.ElementRef<typeof Button>,\n React.ComponentPropsWithoutRef<typeof Button>\n>(({ children, ...otherProps }, ref) => {\n const renderCloseIcon = (children: React.ReactNode): React.ReactElement<HTMLElement> => {\n return isReactElement(children) ? children : <CloseIcon aria-label=\"Close\" />;\n };\n\n return (\n <Button\n ref={ref}\n after={renderCloseIcon(children)}\n shape=\"rounded\"\n size=\"xs-icon\"\n variant=\"link\"\n {...otherProps}\n />\n );\n});\n\nAlertWedges.displayName = \"Alert\";\nAlertRoot.displayName = \"AlertRoot\";\nAlertAfter.displayName = \"AlertAfter\";\nAlertBefore.displayName = \"AlertBefore\";\nAlertCloseButton.displayName = \"AlertCloseButton\";\nAlertDescription.displayName = \"AlertDescription\";\nAlertTitle.displayName = \"AlertTitle\";\n\nexport default AlertWedges;\n","import * as React from \"react\";\nimport { clsx, type ClassValue } from \"clsx\";\n\nimport { twMerge } from \"../tw-plugin/plugin\";\n\n/**\n * Prevents output of unnecessary Tailwind classes and merges classes.\n *\n * @param inputs - Any number of class names or class name arrays.\n * @returns A string of merged class names.\n */\n\nexport const cn = (...inputs: ClassValue[]) => {\n return twMerge(clsx(inputs));\n};\n\n/**\n * Returns the initials of a name or word.\n * If the input string is longer than two characters, it returns the first character.\n * If the input string is two characters or less, it returns the input string as is.\n * If the input string is empty, it returns an empty string.\n * If the input contains spaces (e.g. a full name), it returns the first and last initials.\n *\n * @param initial - The input string to get the initials from.\n * @returns The initials of the input string.\n */\nexport const getInitials = (name: string): string => {\n const trimmedName = name.trim();\n\n // If the name is empty, a single character, or two characters (already initials)\n if (trimmedName.length === 0 || trimmedName.length === 1 || trimmedName.length === 2) {\n return trimmedName.toUpperCase();\n }\n\n const nameArray = trimmedName.split(\" \");\n\n if (nameArray.length === 1) {\n return trimmedName.charAt(0).toUpperCase();\n } else if (nameArray.length > 1) {\n const firstName = nameArray[0]?.charAt(0).toUpperCase() ?? \"\";\n const lastName = nameArray[nameArray.length - 1]?.charAt(0).toUpperCase() ?? \"\";\n\n return firstName + lastName;\n }\n\n return name;\n};\n\n/**\n * Calculates a 32-bit integer hash value for the given string using the djb2 algorithm.\n *\n * @param str - The input string to be hashed.\n * @returns A 32-bit integer hash value.\n */\nexport const stringToHash = (str: string) => {\n let hash = 0;\n\n for (let i = 0; i < str.length; i++) {\n const char = str.charCodeAt(i);\n\n hash = (hash << 5) - hash + char;\n hash |= 0; // Convert to 32-bit integer\n }\n\n return hash;\n};\n\n/**\n * Returns a string from array based on a given hash number.\n *\n * @param hash - The hash number to generate a color for.\n * @param strings - The array of strings to choose from.\n * @returns The color string generated from the hash.\n */\nexport const getElementFromHash = (hash: number, strings: string[]) => {\n const index = Math.abs(hash) % strings.length;\n\n return strings[index];\n};\n\n/**\n * Checks if the given element is a React element.\n *\n * @param element - The element to check.\n * @returns Whether the element is a React element.\n */\nexport const isReactElement = (element: React.ReactNode): element is React.ReactElement => {\n return React.isValidElement(element);\n};\n\n/**\n * Typeguard function that checks if the given element is a\n * React element with a className prop.\n *\n * @param element\n * @returns Whether the element is a React element with a className prop.\n */\nexport const isElementWithClassName = (\n element: React.ReactNode\n): element is React.ReactElement<{ className?: string }> => {\n return (\n React.isValidElement(element) &&\n typeof (element as React.ReactElement<{ className?: string }>).props.className === \"string\"\n );\n};\n\n/**\n * Typeguard function that checks if the given element is a\n * React element with a children prop.\n *\n * @param element\n * @returns Whether the element is a React element with a children prop.\n */\nexport const isElementWithChildren = (\n element: React.ReactNode\n): element is React.ReactElement<{ children?: React.ReactNode }> => {\n return (\n React.isValidElement(element) &&\n typeof (element as React.ReactElement<{ children?: React.ReactNode }>).props.children !==\n \"undefined\"\n );\n};\n","/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/**\n * This Tailwind plugin is based and inspired on \"tw-colors\" and \"NextUI\".\n *\n * @see https://github.com/L-Blondy/tw-colors\n * @see https://github.com/nextui-org/nextui\n */\n\nimport Color from \"color\";\nimport deepMerge from \"deepmerge\";\nimport omit from \"lodash.omit\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\nimport plugin from \"tailwindcss/plugin.js\";\n\nimport { boxShadows, fontSizes, minWidth, themableColors, wedgesPalette } from \"./foundation\";\nimport { addPrefix, flattenThemeObject, getColorString, isBaseTheme } from \"./utils\";\nimport type { ConfigTheme, ConfigThemes, DefaultThemeType, WedgesOptions } from \"./utils/types\";\n\nconst DEFAULT_PREFIX = \"wg\";\n\n/**\n * twMerge with extended options.\n */\nexport const twMerge = extendTailwindMerge({\n extend: {\n theme: {\n padding: [\"2px\", \"4px\", \"6px\", \"8px\", \"12px\", \"14px\", \"16px\"],\n },\n },\n});\n\nconst resolveConfig = (\n themes: ConfigThemes = {},\n defaultTheme: DefaultThemeType,\n prefix: string\n) => {\n const resolved: {\n variants: { name: string; definition: string[] }[];\n utilities: Record<string, Record<string, string>>;\n colors: Record<\n string,\n ({\n opacityValue,\n opacityVariable,\n }: {\n opacityValue: string;\n opacityVariable: string;\n }) => string\n >;\n } = {\n variants: [],\n utilities: {},\n colors: {},\n };\n\n Object.keys(themes).forEach((themeName) => {\n const themeConfig = themes[themeName] ?? {}; // fallback to {} if undefined or null\n const { colors = {}, extend = \"light\" } = themeConfig;\n const flatColors = flattenThemeObject(colors);\n\n let cssSelector = `.${themeName},[data-theme=\"${themeName}\"]`;\n const scheme = themeName === \"light\" || themeName === \"dark\" ? themeName : extend;\n\n // if the theme is the default theme, add the selector to the root element\n if (themeName === defaultTheme) {\n cssSelector = `:where(:root)`; // add :where to prevent specificity issues when theme is set on the html element\n }\n\n resolved.utilities[cssSelector] = { \"color-scheme\": scheme };\n\n // Set varaints\n resolved.variants.push({\n name: themeName,\n definition: [\n `.${themeName}&`,\n `:is(.${themeName} > &:not([data-theme]))`,\n `:is(.${themeName} &:not(.${themeName} [data-theme]:not(.${themeName}) * ))`,\n `:is(.${themeName}:not(:has([data-theme])) &:not([data-theme]))`, // See the browser support: https://caniuse.com/css-has\n `[data-theme='${themeName}']&`,\n `:is([data-theme='${themeName}'] > &:not([data-theme]))`,\n `:is([data-theme='${themeName}'] &:not([data-theme='${themeName}'] [data-theme]:not([data-theme='${themeName}']) * ))`,\n `:is([data-theme='${themeName}']:not(:has([data-theme])) &:not([data-theme]))`, // See the browser support: https://caniuse.com/css-has\n ],\n });\n\n /* --------------------------------- Colors --------------------------------- */\n Object.keys(flatColors).forEach((colorName) => {\n const colorValue = flatColors[colorName as keyof typeof flatColors];\n\n if (!colorValue) {\n return;\n }\n\n try {\n const [h, s, l, defaultAlphaValue = 1] = Color(colorValue).hsl().round().array(); // fallback defaultAlphaValue to 1 if undefined\n const wedgesColorVar = `--${prefix}-${colorName}`;\n const wedgesOpacityVar = `--${prefix}-${colorName}-opacity`;\n\n // Set the css variable in \"@layer utilities\"\n resolved.utilities[cssSelector]![wedgesColorVar] = `${h} ${s}% ${l}%`;\n\n // If an alpha value was provided in the color definition, store it in a css variable\n if (typeof defaultAlphaValue === \"number\") {\n resolved.utilities[cssSelector]![wedgesOpacityVar] = defaultAlphaValue.toFixed(2);\n }\n\n // Set the dynamic color in tailwind config theme.colors\n resolved.colors[colorName] = ({ opacityVariable, opacityValue }) =>\n getColorString(wedgesColorVar, wedgesOpacityVar, opacityValue, opacityVariable);\n } catch (error: unknown) {\n if (error instanceof Error) {\n // eslint-disable-next-line no-console\n console.warn(\"wedges-tw-plugin-error\", error.message);\n } else {\n // eslint-disable-next-line no-console\n console.warn(\"wedges-tw-plugin-error\", error);\n }\n }\n });\n });\n\n return resolved;\n};\n\n/**\n * The core plugin function.\n */\nconst corePlugin = (\n themes: ConfigThemes = {},\n defaultTheme: DefaultThemeType,\n prefix: string,\n fontSmooth: WedgesOptions[\"fontSmooth\"]\n) => {\n const resolved = resolveConfig(themes, defaultTheme, prefix);\n\n const prefixedBaseColors = addPrefix(wedgesPalette, \"wg\");\n const prefixedBoxShadows = addPrefix(boxShadows, \"wg\");\n const animationEasing = \"cubic-bezier(.2,1,.4,1)\";\n\n return plugin(\n // eslint-disable-next-line @typescript-eslint/unbound-method\n ({ addBase, addUtilities, addVariant, matchUtilities, theme }) => {\n addBase({\n \":root\": {\n \"--wg-font-smooth--webkit\": fontSmooth === \"antialiased\" ? \"antialiased\" : \"unset\",\n \"--wg-font-smooth--moz\": fontSmooth === \"antialiased\" ? \"grayscale\" : \"unset\",\n },\n\n html: {\n color: `hsl(var(--${prefix}-foreground))`,\n backgroundColor: `hsl(var(--${prefix}-background))`,\n },\n });\n\n addUtilities({\n ...resolved.utilities,\n \".wg-antialiased\": {\n \"-webkit-font-smoothing\": \"var(--wg-font-smooth--webkit)\",\n \"-moz-osx-font-smoothing\": \"var(--wg-font-smooth--moz)\",\n },\n });\n\n // e.g. \"[theme-name]:text-2xl\"\n resolved.variants.forEach(({ name, definition }) => addVariant(name, definition));\n\n // Add 'wg-bg' utility\n matchUtilities(\n {\n \"wg-bg\": (value: any) => {\n if (typeof value === \"function\") {\n const res = value({ opacityValue: \"1\", opacityVariable: \"1\" });\n const match = res.match(/var\\(([^)]+)\\)/);\n\n if (match) {\n return {\n background: value(\"\", \"\"),\n [`--${prefix}-background`]: `var(${match[1]})`,\n };\n }\n }\n\n try {\n const [h, s, l, defaultAlphaValue] = Color(value).hsl().round().array();\n\n const colorString = getColorString(\n `--${prefix}-background`,\n `--${prefix}-background-opacity`,\n defaultAlphaValue\n );\n\n return {\n background: colorString,\n [`--${prefix}-background`]: `${h} ${s}% ${l}%`,\n };\n } catch {\n const match = value.match(/var\\(([^)]+)\\)/);\n\n return {\n background: value,\n [`--${prefix}-background`]: match ? `var(${match[1]})` : value,\n };\n }\n },\n },\n {\n values: flattenThemeObject(theme(\"colors\")),\n type: [\"color\"],\n }\n );\n },\n\n // Extend the Tailwind config\n {\n theme: {\n extend: {\n colors: {\n ...prefixedBaseColors,\n ...resolved.colors,\n },\n minWidth: {\n ...minWidth,\n },\n minHeight: {\n ...minWidth,\n },\n fontSize: {\n ...fontSizes,\n },\n boxShadow: {\n ...prefixedBoxShadows,\n },\n screens: {\n xs: \"480px\",\n },\n padding: {\n \"2px\": \"calc(2px - var(--wg-border-width, 0px))\",\n \"4px\": \"calc(4px - var(--wg-border-width, 0px))\",\n \"6px\": \"calc(6px - var(--wg-border-width, 0px))\",\n \"8px\": \"calc(8px - var(--wg-border-width, 0px))\",\n \"12px\": \"calc(12px - var(--wg-border-width, 0px))\",\n \"14px\": \"14px\",\n \"16px\": \"calc(16px - var(--wg-border-width, 0px))\",\n },\n outlineOffset: {\n 3: \"3px\",\n },\n textUnderlineOffset: {\n 3: \"3px\",\n },\n animation: {\n \"wg-fade-in-up\": `fadeInUp 0.3s ${animationEasing}`,\n \"wg-fade-in-down\": `fadeInDown 0.3s ${animationEasing}`,\n \"wg-fade-in-left\": `fadeInLeft 0.3s ${animationEasing}`,\n \"wg-fade-in-right\": `fadeInRight 0.3s ${animationEasing}`,\n \"wg-fade-out\": `fadeOut 0.15s ${animationEasing}`,\n \"wg-line-spinner\": \"lineSpinner 1.5s ease-in-out infinite both\",\n },\n keyframes: {\n fadeInUp: {\n \"0%\": {\n opacity: \"0\",\n transform: \"translateY(5px) scale(.97)\",\n },\n \"100%\": {\n opacity: \"1\",\n transform: \"translateY(0px) scale(1)\",\n },\n },\n fadeInDown: {\n \"0%\": {\n opacity: \"0\",\n transform: \"translateY(-5px) scale(.97)\",\n },\n \"100%\": {\n opacity: \"1\",\n transform: \"translateY(0px) scale(1)\",\n },\n },\n fadeInLeft: {\n \"0%\": {\n opacity: \"0\",\n transform: \"translateX(5px) scale(.97)\",\n },\n \"100%\": {\n opacity: \"1\",\n transform: \"translateX(0px) scale(1)\",\n },\n },\n fadeInRight: {\n \"0%\": {\n opacity: \"0\",\n transform: \"translateX(-5px) scale(.97)\",\n },\n \"100%\": {\n opacity: \"1\",\n transform: \"translateX(0px) scale(1)\",\n },\n },\n fadeOut: {\n \"0%\": {\n opacity: \"1\",\n transform: \"scale(1)\",\n },\n \"100%\": {\n opacity: \"0\",\n transform: \"scale(.97)\",\n },\n },\n lineSpinner: {\n \"0%, 25%\": {\n strokeDashoffset: \"var(--wg-dashoffset-97)\",\n transform: \"rotate(0)\",\n },\n\n \"50%, 75%\": {\n strokeDashoffset: \"var(--wg-dashoffset-25)\",\n transform: \"rotate(45deg)\",\n },\n\n \"100%\": {\n strokeDashoffset: \"var(--wg-dashoffset-97)\",\n transform: \"rotate(360deg)\",\n },\n },\n },\n },\n },\n }\n );\n};\n\n/**\n * The actual plugin function.\n */\nexport const wedgesTW = (config: WedgesOptions = {}): ReturnType<typeof plugin> => {\n const {\n defaultExtendTheme = \"light\",\n defaultTheme = \"light\",\n prefix: defaultPrefix = DEFAULT_PREFIX,\n fontSmooth = \"antialiased\",\n themes: themeObject = {},\n } = config;\n\n const userLightColors = themeObject.light?.colors ?? {};\n const userDarkColors = themeObject.dark?.colors ?? {};\n const otherUserThemes = omit(themeObject, [\"light\", \"dark\"]);\n\n Object.keys(otherUserThemes).forEach((themeName) => {\n const { colors, extend }: ConfigTheme = otherUserThemes[themeName] ?? {};\n const baseTheme = extend && isBaseTheme(extend) ? extend : defaultExtendTheme;\n\n if (colors && typeof colors === \"object\") {\n otherUserThemes[themeName]!.colors = deepMerge(themableColors[baseTheme], colors);\n }\n });\n\n const light: ConfigTheme = { colors: deepMerge(themableColors.light, userLightColors) };\n const dark: ConfigTheme = { colors: deepMerge(themableColors.dark, userDarkColors) };\n\n const themes = {\n light,\n dark,\n ...otherUserThemes,\n };\n\n return corePlugin(themes, defaultTheme, defaultPrefix, fontSmooth);\n};\n","export const blue = {\n 50: \"#F0FAFF\",\n 100: \"#DBF3FF\",\n 200: \"#ADE4FF\",\n 300: \"#70D1FF\",\n 400: \"#38BEFF\",\n 500: \"#00ACFF\",\n 600: \"#0090D6\",\n 700: \"#0075AD\",\n 800: \"#005985\",\n 900: \"#003E5C\",\n DEFAULT: \"#00ACFF\",\n};\n","export const gray = {\n 50: \"#F7F7F8\",\n 100: \"#EBEBEF\",\n 200: \"#D1D1DB\",\n 300: \"#A9A9BC\",\n 400: \"#8A8AA3\",\n 500: \"#6C6C89\",\n 600: \"#55556D\",\n 700: \"#3F3F50\",\n 800: \"#282833\",\n 900: \"#121217\",\n DEFAULT: \"#6C6C89\",\n};\n","export const green = {\n 50: \"#EEFBF4\",\n 100: \"#DFF8EA\",\n 200: \"#B2EECC\",\n 300: \"#84E4AE\",\n 400: \"#56D990\",\n 500: \"#2DCA72\",\n 600: \"#26A95F\",\n 700: \"#1E874C\",\n 800: \"#17663A\",\n 900: \"#0F4527\",\n DEFAULT: \"#2DCA72\",\n};\n","export const orange = {\n 50: \"#FFF2EE\",\n 100: \"#FFE8E1\",\n 200: \"#FFCDBD\",\n 300: \"#FFB399\",\n 400: \"#FF9876\",\n 500: \"#FF7D52\",\n 600: \"#FF571F\",\n 700: \"#EB3A00\",\n 800: \"#B82E00\",\n 900: \"#852100\",\n DEFAULT: \"#FF7D52\",\n};\n","export const pink = {\n 50: \"#FEECFB\",\n 100: \"#FDDDF8\",\n 200: \"#FCC5F3\",\n 300: \"#FA99EA\",\n 400: \"#F87CE4\",\n 500: \"#F75FDE\",\n 600: \"#F42AD3\",\n 700: \"#DB0BB9\",\n 800: \"#A5088C\",\n 900: \"#70065F\",\n DEFAULT: \"#F75FDE\",\n};\n","export const purple = {\n 50: \"#F4F1FD\",\n 100: \"#E2DAFB\",\n 200: \"#C6B6F7\",\n 300: \"#A991F3\",\n 400: \"#8D6CEF\",\n 500: \"#7047EB\",\n 600: \"#5423E7\",\n 700: \"#4316CA\",\n 800: \"#3712A5\",\n 900: \"#2B0E81\",\n DEFAULT: \"#7047EB\",\n};\n","export const red = {\n 50: \"#FEF0F4\",\n 100: \"#FDD8E1\",\n 200: \"#FBB1C4\",\n 300: \"#F98BA6\",\n 400: \"#F76489\",\n 500: \"#F53D6B\",\n 600: \"#F3164E\",\n 700: \"#D50B3E\",\n 800: \"#AF0932\",\n 900: \"#880727\",\n DEFAULT: \"#F53D6B\",\n};\n","export const yellow = {\n 50: \"#FFF9EB\",\n 100: \"#FFF3D6\",\n 200: \"#FFE7AD\",\n 300: \"#FFDA85\",\n 400: \"#FFCE5C\",\n 500: \"#FFC233\",\n 600: \"#FAAF00\",\n 700: \"#C28800\",\n 800: \"#8A6100\",\n 900: \"#523900\",\n DEFAULT: \"#FFC233\",\n};\n","import { blue } from \"./blue\";\nimport { gray } from \"./gray\";\nimport { green } from \"./green\";\nimport { orange } from \"./orange\";\nimport { pink } from \"./pink\";\nimport { purple } from \"./purple\";\nimport { red } from \"./red\";\nimport { yellow } from \"./yellow\";\n\nexport const palette = {\n white: {\n 50: \"rgba(255,255,255, 0.05)\",\n 100: \"rgba(255,255,255, 0.1)\",\n 200: \"rgba(255,255,255, 0.2)\",\n 300: \"rgba(255,255,255, 0.3)\",\n 400: \"rgba(255,255,255, 0.4)\",\n 500: \"rgba(255,255,255, 0.5)\",\n 600: \"rgba(255,255,255, 0.6)\",\n 700: \"rgba(255,255,255, 0.8)\",\n 800: \"rgba(255,255,255, 0.9)\",\n 900: \"#FFFFFF\",\n DEFAULT: \"#FFFFFF\",\n },\n black: {\n DEFAULT: \"#000000\",\n },\n blue: blue,\n gray: gray,\n green: green,\n orange: orange,\n pink: pink,\n purple: purple,\n red: red,\n yellow: yellow,\n} as const;\n\nexport type WedgesPalette = typeof palette;\nexport type WedgesPaletteKeys = keyof WedgesPalette;\nexport type PrefixedPaletteKeys = {\n [K in keyof WedgesPalette as `wg-${string & K}`]: WedgesPalette[K];\n};\n","import { palette } from \"./palette\";\n\n/* -------------------------------------------------------------------------- */\n/* Types */\n/* -------------------------------------------------------------------------- */\n\nexport type ColorScale = {\n 50: string;\n 100: string;\n 200: string;\n 300: string;\n 400: string;\n 500: string;\n 600: string;\n 700: string;\n 800: string;\n 900: string;\n DEFAULT: string;\n};\n\nexport type ThemableColorScale = Partial<ColorScale> | string;\n\nexport type ThemableColors = {\n background: string;\n foreground: string;\n primary: ThemableColorScale;\n secondary: ThemableColorScale;\n surface: ThemableColorScale & {\n overlay: string;\n \"overlay-foreground\": string;\n \"overlay-focus\": string;\n };\n destructive: ThemableColorScale;\n};\n\n/* -------------------------------------------------------------------------- */\nexport const themableColorsLight: ThemableColors = {\n background: \"#FFFFFF\",\n foreground: palette.gray[900],\n\n primary: {\n ...palette.purple,\n DEFAULT: palette.purple[500],\n },\n\n secondary: {\n ...palette.gray,\n DEFAULT: palette.gray[900],\n },\n\n surface: {\n ...palette.gray,\n DEFAULT: palette.gray[50],\n overlay: \"#FFFFFF\",\n \"overlay-foreground\": palette.gray[900],\n \"overlay-focus\": palette.gray[50],\n },\n\n destructive: {\n ...palette.red,\n },\n};\n\nexport const themableColorsDark: ThemableColors = {\n background: palette.gray[900],\n foreground: \"#FFFFFF\",\n\n primary: {\n ...palette.purple,\n DEFAULT: palette.purple[400],\n 600: palette.purple[500],\n },\n\n secondary: {\n ...palette.white,\n 900: palette.gray[900],\n DEFAULT: palette.white[900],\n },\n\n surface: {\n 50: \"rgba(255,255,255, 0.1)\",\n 100: \"rgba(255,255,255, 0.2)\",\n 200: \"rgba(255,255,255, 0.3)\",\n 300: \"rgba(255,255,255, 0.4)\",\n 400: \"rgba(255,255,255, 0.5)\",\n 500: \"rgba(255,255,255, 0.5)\",\n 600: \"rgba(255,255,255, 0.7)\",\n 700: \"rgba(255,255,255, 0.8)\",\n 800: \"rgba(255,255,255, 0.9)\",\n 900: \"#FFFFFF\",\n DEFAULT: \"rgba(255,255,255, 0.1)\",\n overlay: \"#292929\",\n \"overlay-foreground\": \"rgba(255,255,255, 0.8)\",\n \"overlay-focus\": \"rgba(255,255,255, 0.05)\",\n },\n\n destructive: {\n ...palette.red,\n },\n};\n\nexport const themableColors = {\n light: themableColorsLight,\n dark: themableColorsDark,\n} as const;\n","type FontSizeValue = [\n fontSize: string,\n configuration: {\n lineHeight?: string;\n letterSpacing?: string;\n fontWeight?: string;\n },\n];\n\nexport type FontSizes = Record<string, FontSizeValue>;\n\nexport const fontSizes = {\n xxs: [\n \"0.625rem\",\n {\n lineHeight: \"1rem\",\n },\n ],\n xs: [\n \"0.75rem\",\n {\n lineHeight: \"1rem\",\n },\n ],\n sm: [\n \"0.875rem\",\n {\n lineHeight: \"1.25rem\",\n },\n ],\n base: [\n \"1rem\",\n {\n lineHeight: \"1.5rem\",\n },\n ],\n lg: [\n \"1.125rem\",\n {\n lineHeight: \"1.75rem\",\n },\n ],\n xl: [\n \"1.25rem\",\n {\n lineHeight: \"1.75rem\",\n },\n ],\n \"2xl\": [\n \"1.5rem\",\n {\n lineHeight: \"2rem\",\n },\n ],\n \"3xl\": [\n \"1.875rem\",\n {\n lineHeight: \"2.25rem\",\n },\n ],\n \"4xl\": [\n \"2.25rem\",\n {\n lineHeight: \"2.5rem\",\n },\n ],\n \"5xl\": [\n \"3rem\",\n {\n lineHeight: \"3.5rem\",\n letterSpacing: \"-0.075rem\",\n },\n ],\n \"6xl\": [\n \"3.75rem\",\n {\n lineHeight: \"4.5rem\",\n letterSpacing: \"-0.09375rem\",\n },\n ],\n \"7xl\": [\n \"4.5rem\",\n {\n lineHeight: \"5rem\",\n letterSpacing: \"-0.1125rem\",\n },\n ],\n \"8xl\": [\n \"6rem\",\n {\n lineHeight: \"6.5rem\",\n letterSpacing: \"-0.15rem\",\n },\n ],\n \"9xl\": [\n \"8rem\",\n {\n lineHeight: \"8rem\",\n letterSpacing: \"-0.2rem\",\n },\n ],\n} satisfies FontSizes;\n","export const minWidth = {\n 4: \"16px\",\n 5: \"20px\",\n 6: \"24px\",\n 7: \"28px\",\n 8: \"32px\",\n 10: \"40px\",\n 12: \"48px\",\n 14: \"56px\",\n 16: \"64px\",\n 20: \"80px\",\n 24: \"96px\",\n};\n\nexport type MinWidth = typeof minWidth;\n","export const boxShadows = {\n xs: \"0 1px 2px 0 rgba(18, 18, 23, 0.05)\",\n sm: \"0 1px 3px 0 rgba(18, 18, 23, 0.1), 0 1px 2px 0 rgba(18, 18, 23, 0.06)\",\n md: \"0px 2px 4px -1px rgba(18, 18, 23, 0.06), 0px 4px 6px -1px rgba(18, 18, 23, 0.08)\",\n lg: \"0px 4px 6px -2px rgba(18, 18, 23, 0.05), 0px 10px 15px -3px rgba(18, 18, 23, 0.08)\",\n xl: \"0px 10px 10px -5px rgba(18, 18, 23, 0.04), 0px 20px 25px -5px rgba(18, 18, 23, 0.10)\",\n \"2xl\": \"0px 25px 50px -12px rgba(18, 18, 23, 0.25)\",\n overlay:\n \"0px 2px 4px 0px rgba(18, 18, 23, 0.04), 0px 5px 8px 0px rgba(18, 18, 23, 0.04), 0px 10px 18px 0px rgba(18, 18, 23, 0.03), 0px 24px 48px 0px rgba(18, 18, 23, 0.03), 0px 0px 0px 1px rgba(18, 18, 23, 0.10)\",\n};\n\nexport type BoxShadows = typeof boxShadows;\n","/**\n * Returns the corresponding CSS color string based on the provided color and opacity values.\n *\n * @param wedgesColorVar - The CSS variable for the color value.\n * @param wedgesOpacityVar - The CSS variable for the opacity value.\n * @param opacityValue - The opacity value to use. If not provided, the opacity value from the CSS variable will be used.\n * @param opacityVariable - The CSS variable for the opacity value to use if `opacityValue` is not provided.\n * @returns The corresponding CSS color string.\n */\nexport const getColorString = (\n wedgesColorVar: string,\n wedgesOpacityVar: string,\n opacityValue?: number | string,\n opacityVariable?: string\n): string => {\n if (!isNaN(+opacityValue!)) {\n return `hsl(var(${wedgesColorVar}) / ${opacityValue})`;\n }\n\n if (opacityVariable) {\n return `hsl(var(${wedgesColorVar}) / var(${wedgesOpacityVar}, var(${opacityVariable})))`;\n }\n\n return `hsl(var(${wedgesColorVar}) / var(${wedgesOpacityVar}, 1))`;\n};\n","import { flatten } from \"flat\";\n\n/**\n * Determines if the theme is a base theme\n *\n * @param theme string\n * @returns \"light\" | \"dark\n */\nexport const isBaseTheme = (theme: string) => theme === \"light\" || theme === \"dark\";\n\n/**\n * Removes keys with \"-DEFAULT\" suffix from the given object and returns a new object.\n *\n * @param obj - The object to remove keys from.\n * @returns A new object with keys ending in \"-DEFAULT\" removed.\n */\ntype TransformedKeys<T extends Record<string, unknown>> = {\n [K in keyof T as K extends `${infer Prefix}-DEFAULT` ? Prefix : K]: T[K];\n};\n\nconst removeDefaultKeys = <T extends Record<string, unknown>>(obj: T) => {\n const newObj = {} as Record<string, unknown>;\n\n for (const key in obj) {\n const newKey = key.endsWith(\"-DEFAULT\") ? key.replace(\"-DEFAULT\", \"\") : key;\n newObj[newKey] = obj[key];\n }\n\n return newObj as TransformedKeys<T>;\n};\n\n/**\n *\n * Flatten theme object and remove default keys\n *\n * @param obj theme object\n * @returns object with flattened keys\n */\nexport const flattenThemeObject = <T>(obj: T) =>\n removeDefaultKeys(\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n flatten(obj, {\n safe: true,\n delimiter: \"-\",\n }) as Record<string, unknown>\n );\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n\n/**\n * Constructs a new type by prefixing all keys of a given object type with a string.\n *\n * @template T - The object type to prefix keys of.\n * @template P - The string to prefix keys with.\n * @returns A new object type with all keys prefixed with the given string.\n */\ntype PrefixKeys<T extends Record<string, any>, P extends string> = {\n [K in keyof T & string as `${P}-${K & string}`]: T[K];\n};\n\n/**\n * Adds a specified prefix to the first-level keys of a given object.\n *\n * @param obj - The object whose first-level keys will be prefixed.\n * @param prefix - The prefix.\n * @returns A new object with the first-level keys prefixed.\n *\n * @example\n * const obj = { a: 1, b: 2 };\n * const result = addPrefix(obj, 'wedges');\n * // result: { 'wedges-a': 1, 'wedges-b': 2 }\n */\nexport const addPrefix = <T extends Record<string, any>, P extends string>(\n obj: T,\n prefix: P\n): PrefixKeys<T, P> => {\n const result = {} as Record<string, any>;\n\n for (const key in obj) {\n result[`${prefix}-${key}`] = obj[key];\n }\n\n return result as PrefixKeys<T, P>;\n};\n","import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { type VariantProps } from \"cva\";\n\nimport { cn, isElementWithChildren, isReactElement } from \"../../helpers/utils\";\nimport { buttonVariants, iconVariants } from \"./variants\";\n\n/* ---------------------------------- Types --------------------------------- */\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &\n VariantProps<typeof buttonVariants> & {\n /**\n * If set to `true`, the button will be rendered as a child within the component.\n * This child component must be a valid React component.\n */\n asChild?: boolean;\n\n /**\n * Does the button only contains an icon?\n * If `true`, the button will be rendered with matching padding.\n */\n isIconOnly?: boolean;\n\n /**\n * The slot to be rendered before the label.\n */\n before?: React.ReactElement<HTMLElement>;\n\n /**\n * The slot to be rendered after the label.\n */\n after?: React.ReactElement<HTMLElement>;\n\n /**\n * Specifies whether this button has a destructive action.\n * If `true`, the button should be styled differently to indicate that it will perform a destructive action.\n */\n destructive?: boolean;\n };\n\nexport type ButtonElement = HTMLButtonElement;\n\nconst iconOnlyPadding = {\n md: \"p-8px\",\n sm: \"p-6px\",\n \"xs-icon\": \"p-2px\",\n};\n\nconst Button = React.forwardRef<ButtonElement, ButtonProps>(\n (\n {\n after,\n asChild = false,\n before,\n children,\n className,\n destructive = false,\n disabled = false,\n shape = \"rounded\",\n size = \"md\",\n variant = \"primary\",\n isIconOnly = false,\n ...otherProps\n },\n ref\n ) => {\n const useAsChild = asChild && isReactElement(children);\n const Component = useAsChild ? Slot : \"button\";\n\n // Determine if the button is icon-only.\n const isIcon = React.useMemo(() => {\n return (\n (before && !after && !children && size) ??\n (after && !before && !children && size) ??\n isIconOnly === true ??\n false\n );\n }, [before, after, children, size, isIconOnly]);\n\n // Determine if the button is a 'link', 'outline', 'tertiary', or 'transparent' variant.\n const isVariantLinkOutlineTertiaryTransparent = React.useMemo(\n () => [\"link\", \"outline\", \"tertiary\", \"transparent\"].includes(variant),\n [variant]\n );\n\n // Render an icon with size, variant, and destructive properties applied.\n const renderIcon = (icon: React.ReactElement<HTMLElement>) => {\n const Component = React.isValidElement(icon) ? Slot : \"span\";\n\n const isNonDestructiveIconOnly =\n variant && isVariantLinkOutlineTertiaryTransparent && isIcon && !destructive;\n\n const iconClasses = cn(\n iconVariants({ size, variant, destructive }),\n isNonDestructiveIconOnly && \"group-hover:opacity-70\",\n destructive && \"opacity-100\",\n icon.props?.className\n );\n\n return <Component className={iconClasses}>{icon}</Component>;\n };\n\n const innerContent = useAsChild ? (\n React.cloneElement(children, {\n children: (\n <>\n {before ? renderIcon(before) : null}\n {isElementWithChildren(children) &&\n isIconOnly &&\n renderIcon(children.props.children as React.ReactElement<HTMLElement>)}\n {isElementWithChildren(children) && !isIconOnly && <>{children.props.children}</>}\n {after ? renderIcon(after) : null}\n </>\n ),\n })\n ) : (\n <>\n {before ? renderIcon(before) : null}\n {React.isValidElement(children) &&\n isIconOnly &&\n renderIcon(children as React.ReactElement<HTMLElement>)}\n {children && !isIconOnly && <span className=\"px-1\">{children}</span>}\n {after ? renderIcon(after) : null}\n </>\n );\n\n return (\n <Component\n ref={ref}\n className={cn(\n buttonVariants({ size, variant, shape, destructive }),\n variant === \"link\" && children && \"focus-visible:outline-0\",\n isIcon && iconOnlyPadding[size],\n className\n )}\n disabled={disabled}\n {...otherProps}\n >\n {innerContent}\n </Component>\n );\n }\n);\n\nButton.displayName = \"Button\";\n\nexport default Button;\n","import { cva } from \"cva\";\n\nexport const buttonVariants = cva({\n base: \"group inline-flex shrink-0 select-none items-center justify-center text-sm font-medium leading-6 transition-colors duration-100 wg-antialiased focus:outline-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none\",\n variants: {\n size: {\n \"xs-icon\": \"gap-0 px-8px py-1\",\n sm: \"gap-0 px-8px py-1\",\n md: \"gap-1 px-12px py-2\",\n },\n shape: {\n rounded: \"rounded-lg\",\n pill: \"rounded-full\",\n },\n variant: {\n primary: \"bg-primary text-white outline-primary hover:bg-primary-600 disabled:opacity-50\",\n\n secondary:\n \"bg-secondary text-white outline-secondary hover:bg-secondary-700 disabled:bg-secondary-200 dark:text-secondary-900 dark:hover:bg-secondary-800 dark:disabled:text-wg-white-500\",\n\n tertiary: \"bg-surface hover:bg-surface-100\",\n\n outline:\n \"dark:shadow:none border border-surface-200 shadow-wg-xs [--wg-border-width:1px] hover:bg-surface disabled:border-surface-50 dark:border-surface-100\",\n\n transparent: \"bg-transparent hover:bg-surface\",\n link: \"p-0 underline underline-offset-3 focus-visible:text-primary\",\n },\n\n destructive: {\n true: [],\n false: [],\n },\n },\n compoundVariants: [\n {\n variant: \"outline\",\n size: \"md\",\n class: \"py-8px\",\n },\n {\n variant: \"outline\",\n size: \"sm\",\n class: \"py-4px\",\n },\n {\n variant: [\"primary\", \"secondary\"],\n destructive: true,\n class:\n \"bg-destructive text-white outline-destructive hover:bg-destructive-600 disabled:bg-destructive disabled:opacity-50 dark:text-white dark:hover:bg-destructive-600 dark:disabled:text-white\",\n },\n {\n variant: \"tertiary\",\n destructive: true,\n class:\n \"bg-destructive-50 hover:bg-destructive-100 disabled:bg-destructive-50 dark:bg-surface dark:hover:bg-surface-200\",\n },\n {\n variant: \"transparent\",\n destructive: true,\n class: \"hover:bg-destructive-50 dark:hover:bg-surface\",\n },\n {\n variant: \"outline\",\n destructive: true,\n class:\n \"border-destructive hover:bg-destructive-50 disabled:border-destructive-100 dark:border-destructive dark:hover:bg-surface dark:disabled:border-destructive-900\",\n },\n {\n variant: \"link\",\n destructive: true,\n class:\n \"hover:text-destructive-800 focus-visible:text-destructive-800 dark:hover:text-destructive-400 dark:focus-visible:text-destructive-400\",\n },\n\n {\n variant: [\"outline\", \"tertiary\", \"transparent\", \"link\"],\n class: \"text-surface-900 outline-primary disabled:text-surface-300\",\n },\n {\n variant: [\"outline\", \"tertiary\", \"transparent\", \"link\"],\n destructive: true,\n class:\n \"text-destructive-700 outline-destructive disabled:text-destructive-300 dark:text-destructive-500 dark:disabled:text-destructive/50\",\n },\n ],\n defaultVariants: {\n shape: \"rounded\",\n size: \"md\",\n variant: \"primary\",\n },\n});\n\nexport const iconVariants = cva({\n base: \"text-current\",\n variants: {\n variant: {\n primary: \"\",\n secondary: \"\",\n tertiary: \"\",\n outline: \"\",\n transparent: \"\",\n link: \"\",\n },\n destructive: {\n true: \"text-current\",\n },\n size: {\n \"xs-icon\": \"size-5\",\n sm: \"size-5\",\n md: \"size-6\",\n },\n },\n compoundVariants: [\n {\n variant: [\"tertiary\", \"outline\", \"transparent\", \"link\"],\n class: \"opacity-50\",\n },\n ],\n defaultVariants: {\n variant: \"primary\",\n size: \"md\",\n },\n});\n","import * as React from \"react\";\n\nimport { type IconProps } from \"./types\";\n\nconst CloseIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {\n const { size, title, ...rest } = props;\n const titleId = title ? `wg-${Date.now()}-${Math.floor(Math.random() * 10000)}` : undefined;\n\n return (\n <svg\n ref={ref}\n aria-labelledby={titleId}\n className=\"text-inherit\"\n fill=\"currentColor\"\n height={size}\n stroke=\"none\"\n viewBox=\"0 0 24 24\"\n width={size}\n {...rest}\n >\n {title && <title id={titleId}>{title}</title>}\n <path\n clipRule=\"evenodd\"\n d=\"M6.21967 6.21967C6.51256 5.92678 6.98744 5.92678 7.28033 6.21967L12 10.9393L16.7197 6.21967C17.0126 5.92678 17.4874 5.92678 17.7803 6.21967C18.0732 6.51256 18.0732 6.98744 17.7803 7.28033L13.0607 12L17.7803 16.7197C18.0732 17.0126 18.0732 17.4874 17.7803 17.7803C17.4874 18.0732 17.0126 18.0732 16.7197 17.7803L12 13.0607L7.28033 17.7803C6.98744 18.0732 6.51256 18.0732 6.21967 17.7803C5.92678 17.4874 5.92678 17.0126 6.21967 16.7197L10.9393 12L6.21967 7.28033C5.92678 6.98744 5.92678 6.51256 6.21967 6.21967Z\"\n fillRule=\"evenodd\"\n />\n </svg>\n );\n});\n\nCloseIcon.displayName = \"CloseIcon\";\n\nexport default CloseIcon;\n","import * as React from \"react\";\n\nimport { type IconProps } from \"./types\";\n\nconst InfoIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {\n const { size = 24, title, ...rest } = props;\n const titleId = title ? `wg-${Date.now()}-${Math.floor(Math.random() * 10000)}` : undefined;\n\n return (\n <svg\n ref={ref}\n aria-labelledby={titleId}\n fill=\"currentColor\"\n height={size}\n viewBox=\"0 0 24 24\"\n width={size}\n {...rest}\n >\n {title && <title id={titleId}>{title}</title>}\n <path\n clipRule=\"evenodd\"\n d=\"M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7