@avenue-ticketing/ui 0.12.0-beta.2 → 0.12.0-beta.3

package/dist/react/badge-groups.js

@@ -34,8 +34,8 @@ var baseClasses = {
     addon: "rounded-full ring-1 ring-inset"
   },
   modern: {
-    root: "rounded-[10px] bg-primary text-secondary shadow-xs ring-1 ring-inset ring-primary hover:bg-secondary",
-    addon: "flex items-center rounded-md bg-primary shadow-xs ring-1 ring-inset ring-primary",
+    root: "rounded-full bg-primary text-secondary shadow-xs ring-1 ring-inset ring-primary hover:bg-secondary",
+    addon: "flex items-center rounded-full bg-primary shadow-xs ring-1 ring-inset ring-primary",
     icon: "text-utility-neutral-500"
   }
 };

package/dist/react/badge-groups.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../utils/cx.ts","../../../../utils/is-react-component.ts","../../../../components/base/badges/badge-groups.tsx"],"names":["ArrowRight"],"mappings":"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","file":"badge-groups.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","/* We cannot use type `unknown` instead of `any` here because it will break the type assertion `isReactComponent` function is providing. */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type React from \"react\";\n\ntype ReactComponent = React.FC<any> | React.ComponentClass<any, any>;\n\n/**\n * Checks if a given value is a function component.\n */\nexport const isFunctionComponent = (component: any): component is React.FC<any> => {\n    return typeof component === \"function\";\n};\n\n/**\n * Checks if a given value is a class component.\n */\nexport const isClassComponent = (component: any): component is React.ComponentClass<any, any> => {\n    return typeof component === \"function\" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);\n};\n\n/**\n * Checks if a given value is a forward ref component.\n */\nexport const isForwardRefComponent = (component: any): component is React.ForwardRefExoticComponent<any> => {\n    return typeof component === \"object\" && component !== null && component.$$typeof.toString() === \"Symbol(react.forward_ref)\";\n};\n\n/**\n * Checks if a given value is a valid React component.\n */\nexport const isReactComponent = (component: any): component is ReactComponent => {\n    return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);\n};\n","\"use client\";\n\n/** Figma: Badge groups (1046:3819) */\n\nimport type { FC, ReactNode } from \"react\";\nimport { isValidElement } from \"react\";\nimport { ArrowRightIcon as ArrowRight } from \"@phosphor-icons/react/dist/csr/ArrowRight\";\nimport { cx, sortCx } from \"@/utils/cx\";\nimport { isReactComponent } from \"@/utils/is-react-component\";\n\ntype Size = \"md\" | \"lg\";\ntype Color = \"brand\" | \"warning\" | \"error\" | \"gray\" | \"success\";\ntype Theme = \"light\" | \"modern\";\ntype Align = \"leading\" | \"trailing\";\n\nconst baseClasses: Record<Theme, { root?: string; addon?: string; icon?: string }> = {\n    light: {\n        root: \"rounded-full ring-1 ring-inset\",\n        addon: \"rounded-full ring-1 ring-inset\",\n    },\n    modern: {\n        root: \"rounded-[10px] bg-primary text-secondary shadow-xs ring-1 ring-inset ring-primary hover:bg-secondary\",\n        addon: \"flex items-center rounded-md bg-primary shadow-xs ring-1 ring-inset ring-primary\",\n        icon: \"text-utility-neutral-500\",\n    },\n};\n\nconst getSizeClasses = (\n    theme?: Theme,\n    text?: boolean,\n    icon?: boolean,\n): Record<Align, Record<Size, { root?: string; addon?: string; icon?: string; dot?: string }>> => ({\n    leading: {\n        md: {\n            root: cx(\"py-1 pr-2 pl-1 text-xs font-semibold\", !text && !icon && \"pr-1\"),\n            addon: cx(\"px-2 py-0.5\", theme === \"modern\" && \"gap-1 px-1.5\", text && \"mr-2\"),\n            icon: \"ml-1 size-4\",\n        },\n        lg: {\n            root: cx(\"py-1 pr-2 pl-1 text-sm font-semibold\", !text && !icon && \"pr-1\"),\n            addon: cx(\"px-2.5 py-0.5\", theme === \"modern\" && \"gap-1.5 px-2\", text && \"mr-2\"),\n            icon: \"ml-1 size-4\",\n        },\n    },\n    trailing: {\n        md: {\n            root: cx(\"py-1 pr-1 pl-3 text-xs font-semibold\", theme === \"modern\" && \"pl-2.5\"),\n            addon: cx(\"py-0.5 pr-1.5 pl-2\", theme === \"modern\" && \"pr-1.5 pl-2\", text && \"ml-2\"),\n            icon: \"ml-0.5 size-3\",\n            dot: \"mr-1.5\",\n        },\n        lg: {\n            root: \"py-1 pr-1 pl-3 text-sm font-semibold\",\n            addon: cx(\"py-0.5 pr-2 pl-2.5\", theme === \"modern\" && \"pr-1.5 pl-2\", text && \"ml-2\"),\n            icon: \"ml-1 size-3\",\n            dot: \"mr-2\",\n        },\n    },\n});\n\nconst colorClasses: Record<Theme, Record<Color, { root?: string; addon?: string; icon?: string; dot?: string }>> = sortCx({\n    light: {\n        brand: {\n            root: \"bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-200 hover:bg-utility-brand-100\",\n            addon: \"bg-primary text-current ring-utility-brand-200\",\n            icon: \"text-utility-brand-500\",\n        },\n        gray: {\n            root: \"bg-utility-neutral-50 text-utility-neutral-700 ring-utility-neutral-200 hover:bg-utility-neutral-100\",\n            addon: \"bg-primary text-current ring-utility-neutral-200\",\n            icon: \"text-utility-neutral-500\",\n        },\n        error: {\n            root: \"bg-utility-red-50 text-utility-red-700 ring-utility-red-200 hover:bg-utility-red-100\",\n            addon: \"bg-primary text-current ring-utility-red-200\",\n            icon: \"text-utility-red-500\",\n        },\n        warning: {\n            root: \"bg-utility-yellow-50 text-utility-yellow-700 ring-utility-yellow-200 hover:bg-utility-yellow-100\",\n            addon: \"bg-primary text-current ring-utility-yellow-200\",\n            icon: \"text-utility-yellow-500\",\n        },\n        success: {\n            root: \"bg-utility-green-50 text-utility-green-700 ring-utility-green-200 hover:bg-utility-green-100\",\n            addon: \"bg-primary text-current ring-utility-green-200\",\n            icon: \"text-utility-green-500\",\n        },\n    },\n    modern: {\n        brand: {\n            dot: \"bg-utility-brand-500 outline-3 -outline-offset-1 outline-utility-brand-100\",\n        },\n        gray: {\n            dot: \"bg-utility-neutral-500 outline-3 -outline-offset-1 outline-utility-neutral-100\",\n        },\n        error: {\n            dot: \"bg-utility-red-500 outline-3 -outline-offset-1 outline-utility-red-100\",\n        },\n        warning: {\n            dot: \"bg-utility-yellow-500 outline-3 -outline-offset-1 outline-utility-yellow-100\",\n        },\n        success: {\n            dot: \"bg-utility-green-500 outline-3 -outline-offset-1 outline-utility-green-100\",\n        },\n    },\n});\n\ninterface BadgeGroupProps {\n    children?: string | ReactNode;\n    addonText: string;\n    size?: Size;\n    color: Color;\n    theme?: Theme;\n    /**\n     * Alignment of the badge addon element.\n     */\n    align?: Align;\n    iconTrailing?: FC<{ className?: string }> | ReactNode;\n    className?: string;\n}\n\nexport const BadgeGroup = ({\n    children,\n    addonText,\n    size = \"md\",\n    color = \"brand\",\n    theme = \"light\",\n    align = \"leading\",\n    className,\n    iconTrailing: IconTrailing = ArrowRight,\n}: BadgeGroupProps) => {\n    const colors = colorClasses[theme][color];\n    const sizes = getSizeClasses(theme, !!children, !!IconTrailing)[align][size];\n\n    const rootClasses = cx(\n        \"inline-flex w-max cursor-pointer items-center transition duration-100 ease-linear\",\n        baseClasses[theme].root,\n        sizes.root,\n        colors.root,\n        className,\n    );\n    const addonClasses = cx(\"inline-flex items-center\", baseClasses[theme].addon, sizes.addon, colors.addon);\n    const dotClasses = cx(\"inline-block size-2 shrink-0 rounded-full\", sizes.dot, colors.dot);\n    const iconClasses = cx(baseClasses[theme].icon, sizes.icon, colors.icon);\n\n    if (align === \"trailing\") {\n        return (\n            <div className={rootClasses}>\n                {theme === \"modern\" && <span className={dotClasses} />}\n\n                {children}\n\n                <span className={addonClasses}>\n                    {addonText}\n\n                    {/* Trailing icon */}\n                    {isReactComponent(IconTrailing) && <IconTrailing weight=\"bold\" className={iconClasses} />}\n                    {isValidElement(IconTrailing) && IconTrailing}\n                </span>\n            </div>\n        );\n    }\n\n    return (\n        <div className={rootClasses}>\n            <span className={addonClasses}>\n                {theme === \"modern\" && <span className={dotClasses} />}\n                {addonText}\n            </span>\n\n            {children}\n\n            {/* Trailing icon */}\n            {isReactComponent(IconTrailing) && <IconTrailing weight=\"bold\" className={iconClasses} />}\n            {isValidElement(IconTrailing) && IconTrailing}\n        </div>\n    );\n};\n"]}
+{"version":3,"sources":["../../../../utils/cx.ts","../../../../utils/is-react-component.ts","../../../../components/base/badges/badge-groups.tsx"],"names":["ArrowRight"],"mappings":";;;;;AAEA,IAAM,UAAU,mBAAA,CAAoB;AAAA,EAChC,MAAA,EAAQ;AAAA,IACJ,KAAA,EAAO;AAAA,MACH,MAAM,CAAC,YAAA,EAAc,cAAc,YAAA,EAAc,YAAA,EAAc,cAAc,aAAa;AAAA;AAC9F;AAER,CAAC,CAAA;AAMM,IAAM,EAAA,GAAK,OAAA;AAOX,SAAS,OAAsH,OAAA,EAAe;AACjJ,EAAA,OAAO,OAAA;AACX;;;ACdO,IAAM,mBAAA,GAAsB,CAAC,SAAA,KAA+C;AAC/E,EAAA,OAAO,OAAO,SAAA,KAAc,UAAA;AAChC,CAAA;AAKO,IAAM,gBAAA,GAAmB,CAAC,SAAA,KAAgE;AAC7F,EAAA,OAAO,OAAO,SAAA,KAAc,UAAA,IAAc,SAAA,CAAU,SAAA,KAAc,CAAC,CAAC,SAAA,CAAU,SAAA,CAAU,gBAAA,IAAoB,CAAC,CAAC,UAAU,SAAA,CAAU,MAAA,CAAA;AACtI,CAAA;AAKO,IAAM,qBAAA,GAAwB,CAAC,SAAA,KAAsE;AACxG,EAAA,OAAO,OAAO,cAAc,QAAA,IAAY,SAAA,KAAc,QAAQ,SAAA,CAAU,QAAA,CAAS,UAAS,KAAM,2BAAA;AACpG,CAAA;AAKO,IAAM,gBAAA,GAAmB,CAAC,SAAA,KAAgD;AAC7E,EAAA,OAAO,oBAAoB,SAAS,CAAA,IAAK,sBAAsB,SAAS,CAAA,IAAK,iBAAiB,SAAS,CAAA;AAC3G,CAAA;ACjBA,IAAM,WAAA,GAA+E;AAAA,EACjF,KAAA,EAAO;AAAA,IACH,IAAA,EAAM,gCAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACX;AAAA,EACA,MAAA,EAAQ;AAAA,IACJ,IAAA,EAAM,oGAAA;AAAA,IACN,KAAA,EAAO,oFAAA;AAAA,IACP,IAAA,EAAM;AAAA;AAEd,CAAA;AAEA,IAAM,cAAA,GAAiB,CACnB,KAAA,EACA,IAAA,EACA,IAAA,MAC+F;AAAA,EAC/F,OAAA,EAAS;AAAA,IACL,EAAA,EAAI;AAAA,MACA,MAAM,EAAA,CAAG,sCAAA,EAAwC,CAAC,IAAA,IAAQ,CAAC,QAAQ,MAAM,CAAA;AAAA,MACzE,OAAO,EAAA,CAAG,aAAA,EAAe,UAAU,QAAA,IAAY,cAAA,EAAgB,QAAQ,MAAM,CAAA;AAAA,MAC7E,IAAA,EAAM;AAAA,KACV;AAAA,IACA,EAAA,EAAI;AAAA,MACA,MAAM,EAAA,CAAG,sCAAA,EAAwC,CAAC,IAAA,IAAQ,CAAC,QAAQ,MAAM,CAAA;AAAA,MACzE,OAAO,EAAA,CAAG,eAAA,EAAiB,UAAU,QAAA,IAAY,cAAA,EAAgB,QAAQ,MAAM,CAAA;AAAA,MAC/E,IAAA,EAAM;AAAA;AACV,GACJ;AAAA,EACA,QAAA,EAAU;AAAA,IACN,EAAA,EAAI;AAAA,MACA,IAAA,EAAM,EAAA,CAAG,sCAAA,EAAwC,KAAA,KAAU,YAAY,QAAQ,CAAA;AAAA,MAC/E,OAAO,EAAA,CAAG,oBAAA,EAAsB,UAAU,QAAA,IAAY,aAAA,EAAe,QAAQ,MAAM,CAAA;AAAA,MACnF,IAAA,EAAM,eAAA;AAAA,MACN,GAAA,EAAK;AAAA,KACT;AAAA,IACA,EAAA,EAAI;AAAA,MACA,IAAA,EAAM,sCAAA;AAAA,MACN,OAAO,EAAA,CAAG,oBAAA,EAAsB,UAAU,QAAA,IAAY,aAAA,EAAe,QAAQ,MAAM,CAAA;AAAA,MACnF,IAAA,EAAM,aAAA;AAAA,MACN,GAAA,EAAK;AAAA;AACT;AAER,CAAA,CAAA;AAEA,IAAM,eAA6G,MAAA,CAAO;AAAA,EACtH,KAAA,EAAO;AAAA,IACH,KAAA,EAAO;AAAA,MACH,IAAA,EAAM,8FAAA;AAAA,MACN,KAAA,EAAO,gDAAA;AAAA,MACP,IAAA,EAAM;AAAA,KACV;AAAA,IACA,IAAA,EAAM;AAAA,MACF,IAAA,EAAM,sGAAA;AAAA,MACN,KAAA,EAAO,kDAAA;AAAA,MACP,IAAA,EAAM;AAAA,KACV;AAAA,IACA,KAAA,EAAO;AAAA,MACH,IAAA,EAAM,sFAAA;AAAA,MACN,KAAA,EAAO,8CAAA;AAAA,MACP,IAAA,EAAM;AAAA,KACV;AAAA,IACA,OAAA,EAAS;AAAA,MACL,IAAA,EAAM,kGAAA;AAAA,MACN,KAAA,EAAO,iDAAA;AAAA,MACP,IAAA,EAAM;AAAA,KACV;AAAA,IACA,OAAA,EAAS;AAAA,MACL,IAAA,EAAM,8FAAA;AAAA,MACN,KAAA,EAAO,gDAAA;AAAA,MACP,IAAA,EAAM;AAAA;AACV,GACJ;AAAA,EACA,MAAA,EAAQ;AAAA,IACJ,KAAA,EAAO;AAAA,MACH,GAAA,EAAK;AAAA,KACT;AAAA,IACA,IAAA,EAAM;AAAA,MACF,GAAA,EAAK;AAAA,KACT;AAAA,IACA,KAAA,EAAO;AAAA,MACH,GAAA,EAAK;AAAA,KACT;AAAA,IACA,OAAA,EAAS;AAAA,MACL,GAAA,EAAK;AAAA,KACT;AAAA,IACA,OAAA,EAAS;AAAA,MACL,GAAA,EAAK;AAAA;AACT;AAER,CAAC,CAAA;AAgBM,IAAM,aAAa,CAAC;AAAA,EACvB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,KAAA,GAAQ,OAAA;AAAA,EACR,KAAA,GAAQ,OAAA;AAAA,EACR,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA;AAAA,EACA,cAAc,YAAA,GAAeA;AACjC,CAAA,KAAuB;AACnB,EAAA,MAAM,MAAA,GAAS,YAAA,CAAa,KAAK,CAAA,CAAE,KAAK,CAAA;AACxC,EAAA,MAAM,KAAA,GAAQ,cAAA,CAAe,KAAA,EAAO,CAAC,CAAC,QAAA,EAAU,CAAC,CAAC,YAAY,CAAA,CAAE,KAAK,CAAA,CAAE,IAAI,CAAA;AAE3E,EAAA,MAAM,WAAA,GAAc,EAAA;AAAA,IAChB,mFAAA;AAAA,IACA,WAAA,CAAY,KAAK,CAAA,CAAE,IAAA;AAAA,IACnB,KAAA,CAAM,IAAA;AAAA,IACN,MAAA,CAAO,IAAA;AAAA,IACP;AAAA,GACJ;AACA,EAAA,MAAM,YAAA,GAAe,EAAA,CAAG,0BAAA,EAA4B,WAAA,CAAY,KAAK,EAAE,KAAA,EAAO,KAAA,CAAM,KAAA,EAAO,MAAA,CAAO,KAAK,CAAA;AACvG,EAAA,MAAM,aAAa,EAAA,CAAG,2CAAA,EAA6C,KAAA,CAAM,GAAA,EAAK,OAAO,GAAG,CAAA;AACxF,EAAA,MAAM,WAAA,GAAc,GAAG,WAAA,CAAY,KAAK,EAAE,IAAA,EAAM,KAAA,CAAM,IAAA,EAAM,MAAA,CAAO,IAAI,CAAA;AAEvE,EAAA,IAAI,UAAU,UAAA,EAAY;AACtB,IAAA,uBACI,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,WAAA,EACX,QAAA,EAAA;AAAA,MAAA,KAAA,KAAU,QAAA,oBAAY,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,UAAA,EAAY,CAAA;AAAA,MAEnD,QAAA;AAAA,sBAED,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,EACZ,QAAA,EAAA;AAAA,QAAA,SAAA;AAAA,QAGA,gBAAA,CAAiB,YAAY,CAAA,oBAAK,GAAA,CAAC,gBAAa,MAAA,EAAO,MAAA,EAAO,WAAW,WAAA,EAAa,CAAA;AAAA,QACtF,cAAA,CAAe,YAAY,CAAA,IAAK;AAAA,OAAA,EACrC;AAAA,KAAA,EACJ,CAAA;AAAA,EAER;AAEA,EAAA,uBACI,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,WAAA,EACZ,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,WAAW,YAAA,EACZ,QAAA,EAAA;AAAA,MAAA,KAAA,KAAU,QAAA,oBAAY,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,UAAA,EAAY,CAAA;AAAA,MACnD;AAAA,KAAA,EACL,CAAA;AAAA,IAEC,QAAA;AAAA,IAGA,gBAAA,CAAiB,YAAY,CAAA,oBAAK,GAAA,CAAC,gBAAa,MAAA,EAAO,MAAA,EAAO,WAAW,WAAA,EAAa,CAAA;AAAA,IACtF,cAAA,CAAe,YAAY,CAAA,IAAK;AAAA,GAAA,EACrC,CAAA;AAER","file":"badge-groups.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","/* We cannot use type `unknown` instead of `any` here because it will break the type assertion `isReactComponent` function is providing. */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type React from \"react\";\n\ntype ReactComponent = React.FC<any> | React.ComponentClass<any, any>;\n\n/**\n * Checks if a given value is a function component.\n */\nexport const isFunctionComponent = (component: any): component is React.FC<any> => {\n    return typeof component === \"function\";\n};\n\n/**\n * Checks if a given value is a class component.\n */\nexport const isClassComponent = (component: any): component is React.ComponentClass<any, any> => {\n    return typeof component === \"function\" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);\n};\n\n/**\n * Checks if a given value is a forward ref component.\n */\nexport const isForwardRefComponent = (component: any): component is React.ForwardRefExoticComponent<any> => {\n    return typeof component === \"object\" && component !== null && component.$$typeof.toString() === \"Symbol(react.forward_ref)\";\n};\n\n/**\n * Checks if a given value is a valid React component.\n */\nexport const isReactComponent = (component: any): component is ReactComponent => {\n    return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);\n};\n","\"use client\";\n\n/** Figma: Badge groups (1046:3819) */\n\nimport type { FC, ReactNode } from \"react\";\nimport { isValidElement } from \"react\";\nimport { ArrowRightIcon as ArrowRight } from \"@phosphor-icons/react/dist/csr/ArrowRight\";\nimport { cx, sortCx } from \"@/utils/cx\";\nimport { isReactComponent } from \"@/utils/is-react-component\";\n\ntype Size = \"md\" | \"lg\";\ntype Color = \"brand\" | \"warning\" | \"error\" | \"gray\" | \"success\";\ntype Theme = \"light\" | \"modern\";\ntype Align = \"leading\" | \"trailing\";\n\nconst baseClasses: Record<Theme, { root?: string; addon?: string; icon?: string }> = {\n    light: {\n        root: \"rounded-full ring-1 ring-inset\",\n        addon: \"rounded-full ring-1 ring-inset\",\n    },\n    modern: {\n        root: \"rounded-full bg-primary text-secondary shadow-xs ring-1 ring-inset ring-primary hover:bg-secondary\",\n        addon: \"flex items-center rounded-full bg-primary shadow-xs ring-1 ring-inset ring-primary\",\n        icon: \"text-utility-neutral-500\",\n    },\n};\n\nconst getSizeClasses = (\n    theme?: Theme,\n    text?: boolean,\n    icon?: boolean,\n): Record<Align, Record<Size, { root?: string; addon?: string; icon?: string; dot?: string }>> => ({\n    leading: {\n        md: {\n            root: cx(\"py-1 pr-2 pl-1 text-xs font-semibold\", !text && !icon && \"pr-1\"),\n            addon: cx(\"px-2 py-0.5\", theme === \"modern\" && \"gap-1 px-1.5\", text && \"mr-2\"),\n            icon: \"ml-1 size-4\",\n        },\n        lg: {\n            root: cx(\"py-1 pr-2 pl-1 text-sm font-semibold\", !text && !icon && \"pr-1\"),\n            addon: cx(\"px-2.5 py-0.5\", theme === \"modern\" && \"gap-1.5 px-2\", text && \"mr-2\"),\n            icon: \"ml-1 size-4\",\n        },\n    },\n    trailing: {\n        md: {\n            root: cx(\"py-1 pr-1 pl-3 text-xs font-semibold\", theme === \"modern\" && \"pl-2.5\"),\n            addon: cx(\"py-0.5 pr-1.5 pl-2\", theme === \"modern\" && \"pr-1.5 pl-2\", text && \"ml-2\"),\n            icon: \"ml-0.5 size-3\",\n            dot: \"mr-1.5\",\n        },\n        lg: {\n            root: \"py-1 pr-1 pl-3 text-sm font-semibold\",\n            addon: cx(\"py-0.5 pr-2 pl-2.5\", theme === \"modern\" && \"pr-1.5 pl-2\", text && \"ml-2\"),\n            icon: \"ml-1 size-3\",\n            dot: \"mr-2\",\n        },\n    },\n});\n\nconst colorClasses: Record<Theme, Record<Color, { root?: string; addon?: string; icon?: string; dot?: string }>> = sortCx({\n    light: {\n        brand: {\n            root: \"bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-200 hover:bg-utility-brand-100\",\n            addon: \"bg-primary text-current ring-utility-brand-200\",\n            icon: \"text-utility-brand-500\",\n        },\n        gray: {\n            root: \"bg-utility-neutral-50 text-utility-neutral-700 ring-utility-neutral-200 hover:bg-utility-neutral-100\",\n            addon: \"bg-primary text-current ring-utility-neutral-200\",\n            icon: \"text-utility-neutral-500\",\n        },\n        error: {\n            root: \"bg-utility-red-50 text-utility-red-700 ring-utility-red-200 hover:bg-utility-red-100\",\n            addon: \"bg-primary text-current ring-utility-red-200\",\n            icon: \"text-utility-red-500\",\n        },\n        warning: {\n            root: \"bg-utility-yellow-50 text-utility-yellow-700 ring-utility-yellow-200 hover:bg-utility-yellow-100\",\n            addon: \"bg-primary text-current ring-utility-yellow-200\",\n            icon: \"text-utility-yellow-500\",\n        },\n        success: {\n            root: \"bg-utility-green-50 text-utility-green-700 ring-utility-green-200 hover:bg-utility-green-100\",\n            addon: \"bg-primary text-current ring-utility-green-200\",\n            icon: \"text-utility-green-500\",\n        },\n    },\n    modern: {\n        brand: {\n            dot: \"bg-utility-brand-500 outline-3 -outline-offset-1 outline-utility-brand-100\",\n        },\n        gray: {\n            dot: \"bg-utility-neutral-500 outline-3 -outline-offset-1 outline-utility-neutral-100\",\n        },\n        error: {\n            dot: \"bg-utility-red-500 outline-3 -outline-offset-1 outline-utility-red-100\",\n        },\n        warning: {\n            dot: \"bg-utility-yellow-500 outline-3 -outline-offset-1 outline-utility-yellow-100\",\n        },\n        success: {\n            dot: \"bg-utility-green-500 outline-3 -outline-offset-1 outline-utility-green-100\",\n        },\n    },\n});\n\ninterface BadgeGroupProps {\n    children?: string | ReactNode;\n    addonText: string;\n    size?: Size;\n    color: Color;\n    theme?: Theme;\n    /**\n     * Alignment of the badge addon element.\n     */\n    align?: Align;\n    iconTrailing?: FC<{ className?: string }> | ReactNode;\n    className?: string;\n}\n\nexport const BadgeGroup = ({\n    children,\n    addonText,\n    size = \"md\",\n    color = \"brand\",\n    theme = \"light\",\n    align = \"leading\",\n    className,\n    iconTrailing: IconTrailing = ArrowRight,\n}: BadgeGroupProps) => {\n    const colors = colorClasses[theme][color];\n    const sizes = getSizeClasses(theme, !!children, !!IconTrailing)[align][size];\n\n    const rootClasses = cx(\n        \"inline-flex w-max cursor-pointer items-center transition duration-100 ease-linear\",\n        baseClasses[theme].root,\n        sizes.root,\n        colors.root,\n        className,\n    );\n    const addonClasses = cx(\"inline-flex items-center\", baseClasses[theme].addon, sizes.addon, colors.addon);\n    const dotClasses = cx(\"inline-block size-2 shrink-0 rounded-full\", sizes.dot, colors.dot);\n    const iconClasses = cx(baseClasses[theme].icon, sizes.icon, colors.icon);\n\n    if (align === \"trailing\") {\n        return (\n            <div className={rootClasses}>\n                {theme === \"modern\" && <span className={dotClasses} />}\n\n                {children}\n\n                <span className={addonClasses}>\n                    {addonText}\n\n                    {/* Trailing icon */}\n                    {isReactComponent(IconTrailing) && <IconTrailing weight=\"bold\" className={iconClasses} />}\n                    {isValidElement(IconTrailing) && IconTrailing}\n                </span>\n            </div>\n        );\n    }\n\n    return (\n        <div className={rootClasses}>\n            <span className={addonClasses}>\n                {theme === \"modern\" && <span className={dotClasses} />}\n                {addonText}\n            </span>\n\n            {children}\n\n            {/* Trailing icon */}\n            {isReactComponent(IconTrailing) && <IconTrailing weight=\"bold\" className={iconClasses} />}\n            {isValidElement(IconTrailing) && IconTrailing}\n        </div>\n    );\n};\n"]}

package/dist/react/badge.js

@@ -106,7 +106,7 @@ var withPillTypes = {
     styles: filledColors
   },
   [badgeTypes.badgeModern]: {
-    common: "size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset shadow-xs",
+    common: "size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset shadow-xs",
     styles: {
       gray: {
         root: "bg-primary text-secondary ring-primary",
@@ -126,7 +126,7 @@ var withBadgeTypes = {
     styles: filledColors
   },
   [badgeTypes.badgeModern]: {
-    common: "size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset bg-primary text-secondary ring-primary shadow-xs",
+    common: "size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset bg-primary text-secondary ring-primary shadow-xs",
     styles: addonOnlyColors
   }
 };
@@ -141,11 +141,15 @@ var Badge = (props) => {
   const badgeSizes = {
     sm: "py-0.5 px-1.5 text-xs font-semibold",
     md: "py-0.5 px-2 text-sm font-semibold",
-    lg: "py-1 px-2.5 text-sm font-semibold rounded-lg"
+    lg: "py-1 px-2.5 text-sm font-semibold"
+  };
+  const badgeColorSizes = {
+    ...badgeSizes,
+    lg: `${badgeSizes.lg} rounded-lg`
   };
   const sizes2 = {
     [badgeTypes.pillColor]: pillSizes,
-    [badgeTypes.badgeColor]: badgeSizes,
+    [badgeTypes.badgeColor]: badgeColorSizes,
     [badgeTypes.badgeModern]: badgeSizes
   };
   return /* @__PURE__ */ jsx("span", { className: cx(colors.common, sizes2[type][size], colors.styles[color].root, props.className), children });
@@ -161,11 +165,15 @@ var BadgeWithDot = (props) => {
   const badgeSizes = {
     sm: "gap-1 py-0.5 px-1.5 text-xs font-semibold",
     md: "gap-1.5 py-0.5 px-2 text-sm font-semibold",
-    lg: "gap-1.5 py-1 px-2.5 text-sm font-semibold rounded-lg"
+    lg: "gap-1.5 py-1 px-2.5 text-sm font-semibold"
+  };
+  const badgeColorSizes = {
+    ...badgeSizes,
+    lg: `${badgeSizes.lg} rounded-lg`
   };
   const sizes2 = {
     [badgeTypes.pillColor]: pillSizes,
-    [badgeTypes.badgeColor]: badgeSizes,
+    [badgeTypes.badgeColor]: badgeColorSizes,
     [badgeTypes.badgeModern]: badgeSizes
   };
   return /* @__PURE__ */ jsxs("span", { className: cx(colors.common, sizes2[type][size], colors.styles[color].root, className), children: [
@@ -202,13 +210,20 @@ var BadgeWithIcon = (props) => {
       leading: "gap-1 py-0.5 pr-2 pl-1.5 text-sm font-semibold"
     },
     lg: {
-      trailing: "gap-1 py-1 pl-2.5 pr-2 text-sm font-semibold rounded-lg",
-      leading: "gap-1 py-1 pr-2.5 pl-2 text-sm font-semibold rounded-lg"
+      trailing: "gap-1 py-1 pl-2.5 pr-2 text-sm font-semibold",
+      leading: "gap-1 py-1 pr-2.5 pl-2 text-sm font-semibold"
+    }
+  };
+  const badgeColorSizes = {
+    ...badgeSizes,
+    lg: {
+      trailing: `${badgeSizes.lg.trailing} rounded-lg`,
+      leading: `${badgeSizes.lg.leading} rounded-lg`
     }
   };
   const sizes2 = {
     [badgeTypes.pillColor]: pillSizes,
-    [badgeTypes.badgeColor]: badgeSizes,
+    [badgeTypes.badgeColor]: badgeColorSizes,
     [badgeTypes.badgeModern]: badgeSizes
   };
   return /* @__PURE__ */ jsxs("span", { className: cx(colors.common, sizes2[type][size][icon], colors.styles[color].root, className), children: [
@@ -228,11 +243,15 @@ var BadgeWithFlag = (props) => {
   const badgeSizes = {
     sm: "gap-1 py-0.5 pl-1 pr-1.5 text-xs font-semibold",
     md: "gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-semibold",
-    lg: "gap-1.5 py-1 pl-2 pr-2.5 text-sm font-semibold rounded-lg"
+    lg: "gap-1.5 py-1 pl-2 pr-2.5 text-sm font-semibold"
+  };
+  const badgeColorSizes = {
+    ...badgeSizes,
+    lg: `${badgeSizes.lg} rounded-lg`
   };
   const sizes2 = {
     [badgeTypes.pillColor]: pillSizes,
-    [badgeTypes.badgeColor]: badgeSizes,
+    [badgeTypes.badgeColor]: badgeColorSizes,
     [badgeTypes.badgeModern]: badgeSizes
   };
   return /* @__PURE__ */ jsxs("span", { className: cx(colors.common, sizes2[type][size], colors.styles[color].root), children: [
@@ -251,11 +270,15 @@ var BadgeWithImage = (props) => {
   const badgeSizes = {
     sm: "gap-1 py-0.5 pl-1 pr-1.5 text-xs font-semibold",
     md: "gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-semibold",
-    lg: "gap-1.5 py-1 pl-2 pr-2.5 text-sm font-semibold rounded-lg"
+    lg: "gap-1.5 py-1 pl-2 pr-2.5 text-sm font-semibold"
+  };
+  const badgeColorSizes = {
+    ...badgeSizes,
+    lg: `${badgeSizes.lg} rounded-lg`
   };
   const sizes2 = {
     [badgeTypes.pillColor]: pillSizes,
-    [badgeTypes.badgeColor]: badgeSizes,
+    [badgeTypes.badgeColor]: badgeColorSizes,
     [badgeTypes.badgeModern]: badgeSizes
   };
   return /* @__PURE__ */ jsxs("span", { className: cx(colors.common, sizes2[type][size], colors.styles[color].root), children: [
@@ -274,11 +297,15 @@ var BadgeWithButton = (props) => {
   const badgeSizes = {
     sm: "gap-0.5 py-0.5 pl-1.5 pr-0.75 text-xs font-semibold",
     md: "gap-0.5 py-0.5 pl-2 pr-1 text-sm font-semibold",
-    lg: "gap-0.5 py-1 pl-2.5 pr-1.5 text-sm font-semibold rounded-lg"
+    lg: "gap-0.5 py-1 pl-2.5 pr-1.5 text-sm font-semibold"
+  };
+  const badgeColorSizes = {
+    ...badgeSizes,
+    lg: `${badgeSizes.lg} rounded-lg`
   };
   const sizes2 = {
     [badgeTypes.pillColor]: pillSizes,
-    [badgeTypes.badgeColor]: badgeSizes,
+    [badgeTypes.badgeColor]: badgeColorSizes,
     [badgeTypes.badgeModern]: badgeSizes
   };
   return /* @__PURE__ */ jsxs("span", { className: cx(colors.common, sizes2[type][size], colors.styles[color].root), children: [
@@ -293,7 +320,7 @@ var BadgeWithButton = (props) => {
           "flex cursor-pointer items-center justify-center p-0.5 transition duration-100 ease-linear",
           focusShadowPlain,
           colors.styles[color].addonButton,
-          type === "pill-color" ? "rounded-full" : "rounded-[3px]"
+          type === "pill-color" || type === "modern" ? "rounded-full" : "rounded-[3px]"
         ),
         children: /* @__PURE__ */ jsx(Icon, { weight: "bold", className: cx(badgeIconClassName, "transition-inherit-all") })
       }
@@ -311,11 +338,15 @@ var BadgeIcon = (props) => {
   const badgeSizes = {
     sm: "p-1.25",
     md: "p-1.5",
-    lg: "p-2 rounded-lg"
+    lg: "p-2"
+  };
+  const badgeColorSizes = {
+    ...badgeSizes,
+    lg: `${badgeSizes.lg} rounded-lg`
   };
   const sizes2 = {
     [badgeTypes.pillColor]: pillSizes,
-    [badgeTypes.badgeColor]: badgeSizes,
+    [badgeTypes.badgeColor]: badgeColorSizes,
     [badgeTypes.badgeModern]: badgeSizes
   };
   return /* @__PURE__ */ jsx("span", { className: cx(colors.common, sizes2[type][size], colors.styles[color].root), children: /* @__PURE__ */ jsx(Icon, { weight: "bold", className: cx(badgeIconClassName, colors.styles[color].addon) }) });

package/dist/react/badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../components/foundations/dot-icon.tsx","../../../../utils/cx.ts","../../../../components/base/badges/badge-types.ts","../../../../components/base/badges/badges.tsx"],"names":["sizes","jsx","CloseX"],"mappings":"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","file":"badge.js","sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\n\nconst sizes = {\n    sm: {\n        wh: 8,\n        c: 4,\n        r: 2.5,\n    },\n    md: {\n        wh: 10,\n        c: 5,\n        r: 4,\n    },\n};\n\nexport const Dot = ({ size = \"md\", ...props }: HTMLAttributes<HTMLOrSVGElement> & { size?: \"sm\" | \"md\" }) => {\n    return (\n        <svg width={sizes[size].wh} height={sizes[size].wh} viewBox={`0 0 ${sizes[size].wh} ${sizes[size].wh}`} fill=\"none\" {...props}>\n            <circle cx={sizes[size].c} cy={sizes[size].c} r={sizes[size].r} fill=\"currentColor\" stroke=\"currentColor\" />\n        </svg>\n    );\n};\n","import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","export type IconComponentType = React.FunctionComponent<{\n    className?: string;\n    weight?: \"thin\" | \"light\" | \"regular\" | \"bold\" | \"fill\" | \"duotone\";\n}>;\n\nexport type Sizes = \"sm\" | \"md\" | \"lg\";\n\nexport type BadgeColors = \"gray\" | \"brand\" | \"error\" | \"warning\" | \"success\" | \"slate\" | \"sky\" | \"blue\" | \"indigo\" | \"purple\" | \"pink\" | \"orange\";\n\nexport type FlagTypes =\n    | \"AD\"\n    | \"AE\"\n    | \"AF\"\n    | \"AG\"\n    | \"AI\"\n    | \"AL\"\n    | \"AM\"\n    | \"AO\"\n    | \"AR\"\n    | \"AS\"\n    | \"AT\"\n    | \"AU\"\n    | \"AW\"\n    | \"AX\"\n    | \"AZ\"\n    | \"BA\"\n    | \"BB\"\n    | \"BD\"\n    | \"BE\"\n    | \"BF\"\n    | \"BG\"\n    | \"BH\"\n    | \"BI\"\n    | \"BJ\"\n    | \"BL\"\n    | \"BM\"\n    | \"BN\"\n    | \"BO\"\n    | \"BQ-1\"\n    | \"BQ-2\"\n    | \"BQ\"\n    | \"BR\"\n    | \"BS\"\n    | \"BT\"\n    | \"BW\"\n    | \"BY\"\n    | \"BZ\"\n    | \"CA\"\n    | \"CC\"\n    | \"CD-1\"\n    | \"CD\"\n    | \"CF\"\n    | \"CH\"\n    | \"CK\"\n    | \"CL\"\n    | \"CM\"\n    | \"CN\"\n    | \"CO\"\n    | \"CR\"\n    | \"CU\"\n    | \"CW\"\n    | \"CX\"\n    | \"CY\"\n    | \"CZ\"\n    | \"DE\"\n    | \"DJ\"\n    | \"DK\"\n    | \"DM\"\n    | \"DO\"\n    | \"DS\"\n    | \"DZ\"\n    | \"earth\"\n    | \"EC\"\n    | \"EE\"\n    | \"EG\"\n    | \"EH\"\n    | \"ER\"\n    | \"ES\"\n    | \"ET\"\n    | \"FI\"\n    | \"FJ\"\n    | \"FK\"\n    | \"FM\"\n    | \"FO\"\n    | \"FR\"\n    | \"GA\"\n    | \"GB-2\"\n    | \"GB\"\n    | \"GD\"\n    | \"GE\"\n    | \"GG\"\n    | \"GH\"\n    | \"GI\"\n    | \"GL\"\n    | \"GM\"\n    | \"GN\"\n    | \"GQ\"\n    | \"GR\"\n    | \"GT\"\n    | \"GU\"\n    | \"GW\"\n    | \"GY\"\n    | \"HK\"\n    | \"HN\"\n    | \"HR\"\n    | \"HT\"\n    | \"HU\"\n    | \"ID\"\n    | \"IE\"\n    | \"IL\"\n    | \"IM\"\n    | \"IN\"\n    | \"IO\"\n    | \"IQ\"\n    | \"IR\"\n    | \"IS\"\n    | \"IT\"\n    | \"JE\"\n    | \"JM\"\n    | \"JO\"\n    | \"JP\"\n    | \"KE\"\n    | \"KG\"\n    | \"KH\"\n    | \"KI\"\n    | \"KM\"\n    | \"KN\"\n    | \"KP\"\n    | \"KR\"\n    | \"KW\"\n    | \"KY\"\n    | \"KZ\"\n    | \"LA\"\n    | \"LB\"\n    | \"LC\"\n    | \"LI\"\n    | \"LK\"\n    | \"LR\"\n    | \"LS\"\n    | \"LT\"\n    | \"LU\"\n    | \"LV\"\n    | \"LY\"\n    | \"MA\"\n    | \"MC\"\n    | \"MD\"\n    | \"ME\"\n    | \"MG\"\n    | \"MH\"\n    | \"MK\"\n    | \"ML\"\n    | \"MM\"\n    | \"MN\"\n    | \"MO\"\n    | \"MP\"\n    | \"MQ\"\n    | \"MR\"\n    | \"MS\"\n    | \"MT\"\n    | \"MU\"\n    | \"MV\"\n    | \"MW\"\n    | \"MX\"\n    | \"MY\"\n    | \"MZ\"\n    | \"NA\"\n    | \"NE\"\n    | \"NF\"\n    | \"NG\"\n    | \"NI\"\n    | \"NL\"\n    | \"NO\"\n    | \"NP\"\n    | \"NR\"\n    | \"NU\"\n    | \"NZ\"\n    | \"OM\"\n    | \"PA\"\n    | \"PE\"\n    | \"PF\"\n    | \"PG\"\n    | \"PH\"\n    | \"PK\"\n    | \"PL\"\n    | \"PM\"\n    | \"PN\"\n    | \"PR\"\n    | \"PT\"\n    | \"PW\"\n    | \"PY\"\n    | \"QA\"\n    | \"RE\"\n    | \"RO\"\n    | \"RS\"\n    | \"RU\"\n    | \"RW\"\n    | \"SA\"\n    | \"SB\"\n    | \"SC\"\n    | \"SD\"\n    | \"SE\"\n    | \"SG\"\n    | \"SH\"\n    | \"SI\"\n    | \"SJ\"\n    | \"SK\"\n    | \"SL\"\n    | \"SM\"\n    | \"SN\"\n    | \"SO\"\n    | \"SR\"\n    | \"SS\"\n    | \"ST\"\n    | \"SV\"\n    | \"SX\"\n    | \"SY\"\n    | \"SZ\"\n    | \"TC\"\n    | \"TD\"\n    | \"TF\"\n    | \"TG\"\n    | \"TH\"\n    | \"TJ\"\n    | \"TK\"\n    | \"TL\"\n    | \"TM\"\n    | \"TN\"\n    | \"TO\"\n    | \"TR\"\n    | \"TT\"\n    | \"TV\"\n    | \"TZ\"\n    | \"UA\"\n    | \"UG\"\n    | \"UM\"\n    | \"US\"\n    | \"UY\"\n    | \"UZ\"\n    | \"VA\"\n    | \"VC\"\n    | \"VE\"\n    | \"VG\"\n    | \"VI\"\n    | \"VN\"\n    | \"VU\"\n    | \"WF\"\n    | \"WS\"\n    | \"YE\"\n    | \"YT\"\n    | \"ZA\"\n    | \"ZM\"\n    | \"ZW\";\n\nexport type ExtractColorKeys<T> = T extends { styles: infer C } ? keyof C : never;\nexport type ExtractBadgeKeys<T> = keyof T;\nexport type BadgeTypeToColorMap<T> = {\n    [K in ExtractBadgeKeys<T>]: ExtractColorKeys<T[K]>;\n};\nexport type BadgeTypeColors<T> = ExtractColorKeys<T[keyof T]>;\n\nexport const badgeTypes = {\n    pillColor: \"pill-color\",\n    badgeColor: \"color\",\n    badgeModern: \"modern\",\n} as const;\n\nexport type BadgeTypes = (typeof badgeTypes)[keyof typeof badgeTypes];\n","\"use client\";\n\n/** Figma: Badges (1046:3819) — pill borders use utility ring-inset; dismiss button uses spread focus ring. */\n\nimport type { MouseEventHandler, ReactNode } from \"react\";\nimport { XIcon as CloseX } from \"@phosphor-icons/react/dist/csr/X\";\nimport { Dot } from \"@/components/foundations/dot-icon\";\nimport { cx } from \"@/utils/cx\";\nimport type { BadgeColors, BadgeTypeToColorMap, BadgeTypes, FlagTypes, IconComponentType, Sizes } from \"./badge-types\";\nimport { badgeTypes } from \"./badge-types\";\n\nconst focusShadowPlain =\n    \"focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\nexport const filledColors: Record<BadgeColors, { root: string; addon: string; addonButton: string }> = {\n    gray: {\n        root: \"bg-utility-neutral-50 text-utility-neutral-700 ring-utility-neutral-200\",\n        addon: \"text-utility-neutral-500\",\n        addonButton: \"hover:bg-utility-neutral-100 text-utility-neutral-400 hover:text-utility-neutral-500\",\n    },\n    brand: {\n        root: \"bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-200\",\n        addon: \"text-utility-brand-500\",\n        addonButton: \"hover:bg-utility-brand-100 text-utility-brand-400 hover:text-utility-brand-500\",\n    },\n    error: {\n        root: \"bg-utility-red-50 text-utility-red-700 ring-utility-red-200\",\n        addon: \"text-utility-red-500\",\n        addonButton: \"hover:bg-utility-red-100 text-utility-red-400 hover:text-utility-red-500\",\n    },\n    warning: {\n        root: \"bg-utility-yellow-50 text-utility-yellow-700 ring-utility-yellow-200\",\n        addon: \"text-utility-yellow-500\",\n        addonButton: \"hover:bg-utility-yellow-100 text-utility-yellow-400 hover:text-utility-yellow-500\",\n    },\n    success: {\n        root: \"bg-utility-green-50 text-utility-green-700 ring-utility-green-200\",\n        addon: \"text-utility-green-500\",\n        addonButton: \"hover:bg-utility-green-100 text-utility-green-400 hover:text-utility-green-500\",\n    },\n    slate: {\n        root: \"bg-utility-slate-50 text-utility-slate-700 ring-utility-slate-200\",\n        addon: \"text-utility-slate-500\",\n        addonButton: \"hover:bg-utility-slate-100 text-utility-slate-400 hover:text-utility-slate-500\",\n    },\n    sky: {\n        root: \"bg-utility-sky-50 text-utility-sky-700 ring-utility-sky-200\",\n        addon: \"text-utility-sky-500\",\n        addonButton: \"hover:bg-utility-sky-100 text-utility-sky-400 hover:text-utility-sky-500\",\n    },\n    blue: {\n        root: \"bg-utility-blue-50 text-utility-blue-700 ring-utility-blue-200\",\n        addon: \"text-utility-blue-500\",\n        addonButton: \"hover:bg-utility-blue-100 text-utility-blue-400 hover:text-utility-blue-500\",\n    },\n    indigo: {\n        root: \"bg-utility-indigo-50 text-utility-indigo-700 ring-utility-indigo-200\",\n        addon: \"text-utility-indigo-500\",\n        addonButton: \"hover:bg-utility-indigo-100 text-utility-indigo-400 hover:text-utility-indigo-500\",\n    },\n    purple: {\n        root: \"bg-utility-purple-50 text-utility-purple-700 ring-utility-purple-200\",\n        addon: \"text-utility-purple-500\",\n        addonButton: \"hover:bg-utility-purple-100 text-utility-purple-400 hover:text-utility-purple-500\",\n    },\n    pink: {\n        root: \"bg-utility-pink-50 text-utility-pink-700 ring-utility-pink-200\",\n        addon: \"text-utility-pink-500\",\n        addonButton: \"hover:bg-utility-pink-100 text-utility-pink-400 hover:text-utility-pink-500\",\n    },\n    orange: {\n        root: \"bg-utility-orange-50 text-utility-orange-700 ring-utility-orange-200\",\n        addon: \"text-utility-orange-500\",\n        addonButton: \"hover:bg-utility-orange-100 text-utility-orange-400 hover:text-utility-orange-500\",\n    },\n};\n\nconst addonOnlyColors = Object.fromEntries(Object.entries(filledColors).map(([key, value]) => [key, { root: \"\", addon: value.addon }])) as Record<\n    BadgeColors,\n    { root: string; addon: string }\n>;\n\nconst withPillTypes = {\n    [badgeTypes.pillColor]: {\n        common: \"size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset\",\n        styles: filledColors,\n    },\n    [badgeTypes.badgeColor]: {\n        common: \"size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset\",\n        styles: filledColors,\n    },\n    [badgeTypes.badgeModern]: {\n        common: \"size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset shadow-xs\",\n        styles: {\n            gray: {\n                root: \"bg-primary text-secondary ring-primary\",\n                addon: \"text-neutral-500\",\n                addonButton: \"hover:bg-utility-neutral-100 text-utility-neutral-400 hover:text-utility-neutral-500\",\n            },\n        },\n    },\n};\n\nconst withBadgeTypes = {\n    [badgeTypes.pillColor]: {\n        common: \"size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset\",\n        styles: filledColors,\n    },\n    [badgeTypes.badgeColor]: {\n        common: \"size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset\",\n        styles: filledColors,\n    },\n    [badgeTypes.badgeModern]: {\n        common: \"size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset bg-primary text-secondary ring-primary shadow-xs\",\n        styles: addonOnlyColors,\n    },\n};\n\nexport type BadgeColor<T extends BadgeTypes> = BadgeTypeToColorMap<typeof withPillTypes>[T];\n\ninterface BadgeProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    color?: BadgeColor<T>;\n    children: ReactNode;\n    className?: string;\n}\n\nexport const Badge = <T extends BadgeTypes>(props: BadgeProps<T>) => {\n    const { type = \"pill-color\", size = \"md\", color = \"gray\", children } = props;\n    const colors = withPillTypes[type];\n\n    const pillSizes = {\n        sm: \"py-0.5 px-2 text-xs font-semibold\",\n        md: \"py-0.5 px-2.5 text-sm font-semibold\",\n        lg: \"py-1 px-3 text-sm font-semibold\",\n    };\n    const badgeSizes = {\n        sm: \"py-0.5 px-1.5 text-xs font-semibold\",\n        md: \"py-0.5 px-2 text-sm font-semibold\",\n        lg: \"py-1 px-2.5 text-sm font-semibold rounded-lg\",\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return <span className={cx(colors.common, sizes[type][size], colors.styles[color].root, props.className)}>{children}</span>;\n};\n\ninterface BadgeWithDotProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    color?: BadgeTypeToColorMap<typeof withBadgeTypes>[T];\n    className?: string;\n    children: ReactNode;\n}\n\nexport const BadgeWithDot = <T extends BadgeTypes>(props: BadgeWithDotProps<T>) => {\n    const { size = \"md\", color = \"gray\", type = \"pill-color\", className, children } = props;\n\n    const colors = withBadgeTypes[type];\n\n    const pillSizes = {\n        sm: \"gap-1 py-0.5 pl-1.5 pr-2 text-xs font-semibold\",\n        md: \"gap-1.5 py-0.5 pl-2 pr-2.5 text-sm font-semibold\",\n        lg: \"gap-1.5 py-1 pl-2.5 pr-3 text-sm font-semibold\",\n    };\n\n    const badgeSizes = {\n        sm: \"gap-1 py-0.5 px-1.5 text-xs font-semibold\",\n        md: \"gap-1.5 py-0.5 px-2 text-sm font-semibold\",\n        lg: \"gap-1.5 py-1 px-2.5 text-sm font-semibold rounded-lg\",\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return (\n        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root, className)}>\n            <Dot className={colors.styles[color].addon} size=\"sm\" />\n            {children}\n        </span>\n    );\n};\n\ninterface BadgeWithIconProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    color?: BadgeTypeToColorMap<typeof withBadgeTypes>[T];\n    iconLeading?: IconComponentType;\n    iconTrailing?: IconComponentType;\n    children: ReactNode;\n    className?: string;\n}\n\nconst badgeIconClassName = \"size-3\";\n\nexport const BadgeWithIcon = <T extends BadgeTypes>(props: BadgeWithIconProps<T>) => {\n    const { size = \"md\", color = \"gray\", type = \"pill-color\", iconLeading: IconLeading, iconTrailing: IconTrailing, children, className } = props;\n\n    const colors = withBadgeTypes[type];\n\n    const icon = IconLeading ? \"leading\" : \"trailing\";\n\n    const pillSizes = {\n        sm: {\n            trailing: \"gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-semibold\",\n            leading: \"gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-semibold\",\n        },\n        md: {\n            trailing: \"gap-1 py-0.5 pl-2.5 pr-2 text-sm font-semibold\",\n            leading: \"gap-1 py-0.5 pr-2.5 pl-2 text-sm font-semibold\",\n        },\n        lg: {\n            trailing: \"gap-1 py-1 pl-3 pr-2.5 text-sm font-semibold\",\n            leading: \"gap-1 py-1 pr-3 pl-2.5 text-sm font-semibold\",\n        },\n    };\n    const badgeSizes = {\n        sm: {\n            trailing: \"gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-semibold\",\n            leading: \"gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-semibold\",\n        },\n        md: {\n            trailing: \"gap-1 py-0.5 pl-2 pr-1.5 text-sm font-semibold\",\n            leading: \"gap-1 py-0.5 pr-2 pl-1.5 text-sm font-semibold\",\n        },\n        lg: {\n            trailing: \"gap-1 py-1 pl-2.5 pr-2 text-sm font-semibold rounded-lg\",\n            leading: \"gap-1 py-1 pr-2.5 pl-2 text-sm font-semibold rounded-lg\",\n        },\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return (\n        <span className={cx(colors.common, sizes[type][size][icon], colors.styles[color].root, className)}>\n            {IconLeading && <IconLeading weight=\"bold\" className={cx(colors.styles[color].addon, badgeIconClassName)} />}\n            {children}\n            {IconTrailing && <IconTrailing weight=\"bold\" className={cx(colors.styles[color].addon, badgeIconClassName)} />}\n        </span>\n    );\n};\n\ninterface BadgeWithFlagProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    flag?: FlagTypes;\n    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];\n    children: ReactNode;\n}\n\nexport const BadgeWithFlag = <T extends BadgeTypes>(props: BadgeWithFlagProps<T>) => {\n    const { size = \"md\", color = \"gray\", flag = \"AU\", type = \"pill-color\", children } = props;\n\n    const colors = withPillTypes[type];\n\n    const pillSizes = {\n        sm: \"gap-1 py-0.5 pl-0.75 pr-2 text-xs font-semibold\",\n        md: \"gap-1.5 py-0.5 pl-1 pr-2.5 text-sm font-semibold\",\n        lg: \"gap-1.5 py-1 pl-1.5 pr-3 text-sm font-semibold\",\n    };\n    const badgeSizes = {\n        sm: \"gap-1 py-0.5 pl-1 pr-1.5 text-xs font-semibold\",\n        md: \"gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-semibold\",\n        lg: \"gap-1.5 py-1 pl-2 pr-2.5 text-sm font-semibold rounded-lg\",\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return (\n        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>\n            <img src={`https://www.untitledui.com/images/flags/${flag}.svg`} className=\"size-4 max-w-none rounded-full\" alt={`${flag} flag`} />\n            {children}\n        </span>\n    );\n};\n\ninterface BadgeWithImageProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    imgSrc: string;\n    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];\n    children: ReactNode;\n}\n\nexport const BadgeWithImage = <T extends BadgeTypes>(props: BadgeWithImageProps<T>) => {\n    const { size = \"md\", color = \"gray\", type = \"pill-color\", imgSrc, children } = props;\n\n    const colors = withPillTypes[type];\n\n    const pillSizes = {\n        sm: \"gap-1 py-0.5 pl-0.75 pr-2 text-xs font-semibold\",\n        md: \"gap-1.5 py-0.5 pl-1 pr-2.5 text-sm font-semibold\",\n        lg: \"gap-1.5 py-1 pl-1.5 pr-3 text-sm font-semibold\",\n    };\n    const badgeSizes = {\n        sm: \"gap-1 py-0.5 pl-1 pr-1.5 text-xs font-semibold\",\n        md: \"gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-semibold\",\n        lg: \"gap-1.5 py-1 pl-2 pr-2.5 text-sm font-semibold rounded-lg\",\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return (\n        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>\n            <img src={imgSrc} className=\"size-4 max-w-none rounded-full\" alt=\"Badge image\" />\n            {children}\n        </span>\n    );\n};\n\ninterface BadgeWithButtonProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    icon?: IconComponentType;\n    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];\n    children: ReactNode;\n    /**\n     * The label for the button.\n     */\n    buttonLabel?: string;\n    /**\n     * The click event handler for the button.\n     */\n    onButtonClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const BadgeWithButton = <T extends BadgeTypes>(props: BadgeWithButtonProps<T>) => {\n    const { size = \"md\", color = \"gray\", type = \"pill-color\", icon: Icon = CloseX, buttonLabel, children } = props;\n\n    const colors = withPillTypes[type];\n\n    const pillSizes = {\n        sm: \"gap-0.5 py-0.5 pl-2 pr-0.75 text-xs font-semibold\",\n        md: \"gap-0.5 py-0.5 pl-2.5 pr-1 text-sm font-semibold\",\n        lg: \"gap-0.5 py-1 pl-3 pr-1.5 text-sm font-semibold\",\n    };\n    const badgeSizes = {\n        sm: \"gap-0.5 py-0.5 pl-1.5 pr-0.75 text-xs font-semibold\",\n        md: \"gap-0.5 py-0.5 pl-2 pr-1 text-sm font-semibold\",\n        lg: \"gap-0.5 py-1 pl-2.5 pr-1.5 text-sm font-semibold rounded-lg\",\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return (\n        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>\n            {children}\n            <button\n                type=\"button\"\n                aria-label={buttonLabel}\n                onClick={props.onButtonClick}\n                className={cx(\n                    \"flex cursor-pointer items-center justify-center p-0.5 transition duration-100 ease-linear\",\n                    focusShadowPlain,\n                    colors.styles[color].addonButton,\n                    type === \"pill-color\" ? \"rounded-full\" : \"rounded-[3px]\",\n                )}\n            >\n                <Icon weight=\"bold\" className={cx(badgeIconClassName, \"transition-inherit-all\")} />\n            </button>\n        </span>\n    );\n};\n\ninterface BadgeIconProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    icon: IconComponentType;\n    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];\n    children?: ReactNode;\n}\n\nexport const BadgeIcon = <T extends BadgeTypes>(props: BadgeIconProps<T>) => {\n    const { size = \"md\", color = \"gray\", type = \"pill-color\", icon: Icon } = props;\n\n    const colors = withPillTypes[type];\n\n    const pillSizes = {\n        sm: \"p-1.25\",\n        md: \"p-1.5\",\n        lg: \"p-2\",\n    };\n\n    const badgeSizes = {\n        sm: \"p-1.25\",\n        md: \"p-1.5\",\n        lg: \"p-2 rounded-lg\",\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return (\n        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>\n            <Icon weight=\"bold\" className={cx(badgeIconClassName, colors.styles[color].addon)} />\n        </span>\n    );\n};\n"]}
+{"version":3,"sources":["../../../../components/foundations/dot-icon.tsx","../../../../utils/cx.ts","../../../../components/base/badges/badge-types.ts","../../../../components/base/badges/badges.tsx"],"names":["sizes","jsx","CloseX"],"mappings":"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","file":"badge.js","sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\n\nconst sizes = {\n    sm: {\n        wh: 8,\n        c: 4,\n        r: 2.5,\n    },\n    md: {\n        wh: 10,\n        c: 5,\n        r: 4,\n    },\n};\n\nexport const Dot = ({ size = \"md\", ...props }: HTMLAttributes<HTMLOrSVGElement> & { size?: \"sm\" | \"md\" }) => {\n    return (\n        <svg width={sizes[size].wh} height={sizes[size].wh} viewBox={`0 0 ${sizes[size].wh} ${sizes[size].wh}`} fill=\"none\" {...props}>\n            <circle cx={sizes[size].c} cy={sizes[size].c} r={sizes[size].r} fill=\"currentColor\" stroke=\"currentColor\" />\n        </svg>\n    );\n};\n","import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","export type IconComponentType = React.FunctionComponent<{\n    className?: string;\n    weight?: \"thin\" | \"light\" | \"regular\" | \"bold\" | \"fill\" | \"duotone\";\n}>;\n\nexport type Sizes = \"sm\" | \"md\" | \"lg\";\n\nexport type BadgeColors = \"gray\" | \"brand\" | \"error\" | \"warning\" | \"success\" | \"slate\" | \"sky\" | \"blue\" | \"indigo\" | \"purple\" | \"pink\" | \"orange\";\n\nexport type FlagTypes =\n    | \"AD\"\n    | \"AE\"\n    | \"AF\"\n    | \"AG\"\n    | \"AI\"\n    | \"AL\"\n    | \"AM\"\n    | \"AO\"\n    | \"AR\"\n    | \"AS\"\n    | \"AT\"\n    | \"AU\"\n    | \"AW\"\n    | \"AX\"\n    | \"AZ\"\n    | \"BA\"\n    | \"BB\"\n    | \"BD\"\n    | \"BE\"\n    | \"BF\"\n    | \"BG\"\n    | \"BH\"\n    | \"BI\"\n    | \"BJ\"\n    | \"BL\"\n    | \"BM\"\n    | \"BN\"\n    | \"BO\"\n    | \"BQ-1\"\n    | \"BQ-2\"\n    | \"BQ\"\n    | \"BR\"\n    | \"BS\"\n    | \"BT\"\n    | \"BW\"\n    | \"BY\"\n    | \"BZ\"\n    | \"CA\"\n    | \"CC\"\n    | \"CD-1\"\n    | \"CD\"\n    | \"CF\"\n    | \"CH\"\n    | \"CK\"\n    | \"CL\"\n    | \"CM\"\n    | \"CN\"\n    | \"CO\"\n    | \"CR\"\n    | \"CU\"\n    | \"CW\"\n    | \"CX\"\n    | \"CY\"\n    | \"CZ\"\n    | \"DE\"\n    | \"DJ\"\n    | \"DK\"\n    | \"DM\"\n    | \"DO\"\n    | \"DS\"\n    | \"DZ\"\n    | \"earth\"\n    | \"EC\"\n    | \"EE\"\n    | \"EG\"\n    | \"EH\"\n    | \"ER\"\n    | \"ES\"\n    | \"ET\"\n    | \"FI\"\n    | \"FJ\"\n    | \"FK\"\n    | \"FM\"\n    | \"FO\"\n    | \"FR\"\n    | \"GA\"\n    | \"GB-2\"\n    | \"GB\"\n    | \"GD\"\n    | \"GE\"\n    | \"GG\"\n    | \"GH\"\n    | \"GI\"\n    | \"GL\"\n    | \"GM\"\n    | \"GN\"\n    | \"GQ\"\n    | \"GR\"\n    | \"GT\"\n    | \"GU\"\n    | \"GW\"\n    | \"GY\"\n    | \"HK\"\n    | \"HN\"\n    | \"HR\"\n    | \"HT\"\n    | \"HU\"\n    | \"ID\"\n    | \"IE\"\n    | \"IL\"\n    | \"IM\"\n    | \"IN\"\n    | \"IO\"\n    | \"IQ\"\n    | \"IR\"\n    | \"IS\"\n    | \"IT\"\n    | \"JE\"\n    | \"JM\"\n    | \"JO\"\n    | \"JP\"\n    | \"KE\"\n    | \"KG\"\n    | \"KH\"\n    | \"KI\"\n    | \"KM\"\n    | \"KN\"\n    | \"KP\"\n    | \"KR\"\n    | \"KW\"\n    | \"KY\"\n    | \"KZ\"\n    | \"LA\"\n    | \"LB\"\n    | \"LC\"\n    | \"LI\"\n    | \"LK\"\n    | \"LR\"\n    | \"LS\"\n    | \"LT\"\n    | \"LU\"\n    | \"LV\"\n    | \"LY\"\n    | \"MA\"\n    | \"MC\"\n    | \"MD\"\n    | \"ME\"\n    | \"MG\"\n    | \"MH\"\n    | \"MK\"\n    | \"ML\"\n    | \"MM\"\n    | \"MN\"\n    | \"MO\"\n    | \"MP\"\n    | \"MQ\"\n    | \"MR\"\n    | \"MS\"\n    | \"MT\"\n    | \"MU\"\n    | \"MV\"\n    | \"MW\"\n    | \"MX\"\n    | \"MY\"\n    | \"MZ\"\n    | \"NA\"\n    | \"NE\"\n    | \"NF\"\n    | \"NG\"\n    | \"NI\"\n    | \"NL\"\n    | \"NO\"\n    | \"NP\"\n    | \"NR\"\n    | \"NU\"\n    | \"NZ\"\n    | \"OM\"\n    | \"PA\"\n    | \"PE\"\n    | \"PF\"\n    | \"PG\"\n    | \"PH\"\n    | \"PK\"\n    | \"PL\"\n    | \"PM\"\n    | \"PN\"\n    | \"PR\"\n    | \"PT\"\n    | \"PW\"\n    | \"PY\"\n    | \"QA\"\n    | \"RE\"\n    | \"RO\"\n    | \"RS\"\n    | \"RU\"\n    | \"RW\"\n    | \"SA\"\n    | \"SB\"\n    | \"SC\"\n    | \"SD\"\n    | \"SE\"\n    | \"SG\"\n    | \"SH\"\n    | \"SI\"\n    | \"SJ\"\n    | \"SK\"\n    | \"SL\"\n    | \"SM\"\n    | \"SN\"\n    | \"SO\"\n    | \"SR\"\n    | \"SS\"\n    | \"ST\"\n    | \"SV\"\n    | \"SX\"\n    | \"SY\"\n    | \"SZ\"\n    | \"TC\"\n    | \"TD\"\n    | \"TF\"\n    | \"TG\"\n    | \"TH\"\n    | \"TJ\"\n    | \"TK\"\n    | \"TL\"\n    | \"TM\"\n    | \"TN\"\n    | \"TO\"\n    | \"TR\"\n    | \"TT\"\n    | \"TV\"\n    | \"TZ\"\n    | \"UA\"\n    | \"UG\"\n    | \"UM\"\n    | \"US\"\n    | \"UY\"\n    | \"UZ\"\n    | \"VA\"\n    | \"VC\"\n    | \"VE\"\n    | \"VG\"\n    | \"VI\"\n    | \"VN\"\n    | \"VU\"\n    | \"WF\"\n    | \"WS\"\n    | \"YE\"\n    | \"YT\"\n    | \"ZA\"\n    | \"ZM\"\n    | \"ZW\";\n\nexport type ExtractColorKeys<T> = T extends { styles: infer C } ? keyof C : never;\nexport type ExtractBadgeKeys<T> = keyof T;\nexport type BadgeTypeToColorMap<T> = {\n    [K in ExtractBadgeKeys<T>]: ExtractColorKeys<T[K]>;\n};\nexport type BadgeTypeColors<T> = ExtractColorKeys<T[keyof T]>;\n\nexport const badgeTypes = {\n    pillColor: \"pill-color\",\n    badgeColor: \"color\",\n    badgeModern: \"modern\",\n} as const;\n\nexport type BadgeTypes = (typeof badgeTypes)[keyof typeof badgeTypes];\n","\"use client\";\n\n/** Figma: Badges (1046:3819) — pill borders use utility ring-inset; dismiss button uses spread focus ring. */\n\nimport type { MouseEventHandler, ReactNode } from \"react\";\nimport { XIcon as CloseX } from \"@phosphor-icons/react/dist/csr/X\";\nimport { Dot } from \"@/components/foundations/dot-icon\";\nimport { cx } from \"@/utils/cx\";\nimport type { BadgeColors, BadgeTypeToColorMap, BadgeTypes, FlagTypes, IconComponentType, Sizes } from \"./badge-types\";\nimport { badgeTypes } from \"./badge-types\";\n\nconst focusShadowPlain =\n    \"focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\nexport const filledColors: Record<BadgeColors, { root: string; addon: string; addonButton: string }> = {\n    gray: {\n        root: \"bg-utility-neutral-50 text-utility-neutral-700 ring-utility-neutral-200\",\n        addon: \"text-utility-neutral-500\",\n        addonButton: \"hover:bg-utility-neutral-100 text-utility-neutral-400 hover:text-utility-neutral-500\",\n    },\n    brand: {\n        root: \"bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-200\",\n        addon: \"text-utility-brand-500\",\n        addonButton: \"hover:bg-utility-brand-100 text-utility-brand-400 hover:text-utility-brand-500\",\n    },\n    error: {\n        root: \"bg-utility-red-50 text-utility-red-700 ring-utility-red-200\",\n        addon: \"text-utility-red-500\",\n        addonButton: \"hover:bg-utility-red-100 text-utility-red-400 hover:text-utility-red-500\",\n    },\n    warning: {\n        root: \"bg-utility-yellow-50 text-utility-yellow-700 ring-utility-yellow-200\",\n        addon: \"text-utility-yellow-500\",\n        addonButton: \"hover:bg-utility-yellow-100 text-utility-yellow-400 hover:text-utility-yellow-500\",\n    },\n    success: {\n        root: \"bg-utility-green-50 text-utility-green-700 ring-utility-green-200\",\n        addon: \"text-utility-green-500\",\n        addonButton: \"hover:bg-utility-green-100 text-utility-green-400 hover:text-utility-green-500\",\n    },\n    slate: {\n        root: \"bg-utility-slate-50 text-utility-slate-700 ring-utility-slate-200\",\n        addon: \"text-utility-slate-500\",\n        addonButton: \"hover:bg-utility-slate-100 text-utility-slate-400 hover:text-utility-slate-500\",\n    },\n    sky: {\n        root: \"bg-utility-sky-50 text-utility-sky-700 ring-utility-sky-200\",\n        addon: \"text-utility-sky-500\",\n        addonButton: \"hover:bg-utility-sky-100 text-utility-sky-400 hover:text-utility-sky-500\",\n    },\n    blue: {\n        root: \"bg-utility-blue-50 text-utility-blue-700 ring-utility-blue-200\",\n        addon: \"text-utility-blue-500\",\n        addonButton: \"hover:bg-utility-blue-100 text-utility-blue-400 hover:text-utility-blue-500\",\n    },\n    indigo: {\n        root: \"bg-utility-indigo-50 text-utility-indigo-700 ring-utility-indigo-200\",\n        addon: \"text-utility-indigo-500\",\n        addonButton: \"hover:bg-utility-indigo-100 text-utility-indigo-400 hover:text-utility-indigo-500\",\n    },\n    purple: {\n        root: \"bg-utility-purple-50 text-utility-purple-700 ring-utility-purple-200\",\n        addon: \"text-utility-purple-500\",\n        addonButton: \"hover:bg-utility-purple-100 text-utility-purple-400 hover:text-utility-purple-500\",\n    },\n    pink: {\n        root: \"bg-utility-pink-50 text-utility-pink-700 ring-utility-pink-200\",\n        addon: \"text-utility-pink-500\",\n        addonButton: \"hover:bg-utility-pink-100 text-utility-pink-400 hover:text-utility-pink-500\",\n    },\n    orange: {\n        root: \"bg-utility-orange-50 text-utility-orange-700 ring-utility-orange-200\",\n        addon: \"text-utility-orange-500\",\n        addonButton: \"hover:bg-utility-orange-100 text-utility-orange-400 hover:text-utility-orange-500\",\n    },\n};\n\nconst addonOnlyColors = Object.fromEntries(Object.entries(filledColors).map(([key, value]) => [key, { root: \"\", addon: value.addon }])) as Record<\n    BadgeColors,\n    { root: string; addon: string }\n>;\n\nconst withPillTypes = {\n    [badgeTypes.pillColor]: {\n        common: \"size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset\",\n        styles: filledColors,\n    },\n    [badgeTypes.badgeColor]: {\n        common: \"size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset\",\n        styles: filledColors,\n    },\n    [badgeTypes.badgeModern]: {\n        common: \"size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset shadow-xs\",\n        styles: {\n            gray: {\n                root: \"bg-primary text-secondary ring-primary\",\n                addon: \"text-neutral-500\",\n                addonButton: \"hover:bg-utility-neutral-100 text-utility-neutral-400 hover:text-utility-neutral-500\",\n            },\n        },\n    },\n};\n\nconst withBadgeTypes = {\n    [badgeTypes.pillColor]: {\n        common: \"size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset\",\n        styles: filledColors,\n    },\n    [badgeTypes.badgeColor]: {\n        common: \"size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset\",\n        styles: filledColors,\n    },\n    [badgeTypes.badgeModern]: {\n        common: \"size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset bg-primary text-secondary ring-primary shadow-xs\",\n        styles: addonOnlyColors,\n    },\n};\n\nexport type BadgeColor<T extends BadgeTypes> = BadgeTypeToColorMap<typeof withPillTypes>[T];\n\ninterface BadgeProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    color?: BadgeColor<T>;\n    children: ReactNode;\n    className?: string;\n}\n\nexport const Badge = <T extends BadgeTypes>(props: BadgeProps<T>) => {\n    const { type = \"pill-color\", size = \"md\", color = \"gray\", children } = props;\n    const colors = withPillTypes[type];\n\n    const pillSizes = {\n        sm: \"py-0.5 px-2 text-xs font-semibold\",\n        md: \"py-0.5 px-2.5 text-sm font-semibold\",\n        lg: \"py-1 px-3 text-sm font-semibold\",\n    };\n    const badgeSizes = {\n        sm: \"py-0.5 px-1.5 text-xs font-semibold\",\n        md: \"py-0.5 px-2 text-sm font-semibold\",\n        lg: \"py-1 px-2.5 text-sm font-semibold\",\n    };\n    const badgeColorSizes = {\n        ...badgeSizes,\n        lg: `${badgeSizes.lg} rounded-lg`,\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeColorSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return <span className={cx(colors.common, sizes[type][size], colors.styles[color].root, props.className)}>{children}</span>;\n};\n\ninterface BadgeWithDotProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    color?: BadgeTypeToColorMap<typeof withBadgeTypes>[T];\n    className?: string;\n    children: ReactNode;\n}\n\nexport const BadgeWithDot = <T extends BadgeTypes>(props: BadgeWithDotProps<T>) => {\n    const { size = \"md\", color = \"gray\", type = \"pill-color\", className, children } = props;\n\n    const colors = withBadgeTypes[type];\n\n    const pillSizes = {\n        sm: \"gap-1 py-0.5 pl-1.5 pr-2 text-xs font-semibold\",\n        md: \"gap-1.5 py-0.5 pl-2 pr-2.5 text-sm font-semibold\",\n        lg: \"gap-1.5 py-1 pl-2.5 pr-3 text-sm font-semibold\",\n    };\n\n    const badgeSizes = {\n        sm: \"gap-1 py-0.5 px-1.5 text-xs font-semibold\",\n        md: \"gap-1.5 py-0.5 px-2 text-sm font-semibold\",\n        lg: \"gap-1.5 py-1 px-2.5 text-sm font-semibold\",\n    };\n    const badgeColorSizes = {\n        ...badgeSizes,\n        lg: `${badgeSizes.lg} rounded-lg`,\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeColorSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return (\n        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root, className)}>\n            <Dot className={colors.styles[color].addon} size=\"sm\" />\n            {children}\n        </span>\n    );\n};\n\ninterface BadgeWithIconProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    color?: BadgeTypeToColorMap<typeof withBadgeTypes>[T];\n    iconLeading?: IconComponentType;\n    iconTrailing?: IconComponentType;\n    children: ReactNode;\n    className?: string;\n}\n\nconst badgeIconClassName = \"size-3\";\n\nexport const BadgeWithIcon = <T extends BadgeTypes>(props: BadgeWithIconProps<T>) => {\n    const { size = \"md\", color = \"gray\", type = \"pill-color\", iconLeading: IconLeading, iconTrailing: IconTrailing, children, className } = props;\n\n    const colors = withBadgeTypes[type];\n\n    const icon = IconLeading ? \"leading\" : \"trailing\";\n\n    const pillSizes = {\n        sm: {\n            trailing: \"gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-semibold\",\n            leading: \"gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-semibold\",\n        },\n        md: {\n            trailing: \"gap-1 py-0.5 pl-2.5 pr-2 text-sm font-semibold\",\n            leading: \"gap-1 py-0.5 pr-2.5 pl-2 text-sm font-semibold\",\n        },\n        lg: {\n            trailing: \"gap-1 py-1 pl-3 pr-2.5 text-sm font-semibold\",\n            leading: \"gap-1 py-1 pr-3 pl-2.5 text-sm font-semibold\",\n        },\n    };\n    const badgeSizes = {\n        sm: {\n            trailing: \"gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-semibold\",\n            leading: \"gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-semibold\",\n        },\n        md: {\n            trailing: \"gap-1 py-0.5 pl-2 pr-1.5 text-sm font-semibold\",\n            leading: \"gap-1 py-0.5 pr-2 pl-1.5 text-sm font-semibold\",\n        },\n        lg: {\n            trailing: \"gap-1 py-1 pl-2.5 pr-2 text-sm font-semibold\",\n            leading: \"gap-1 py-1 pr-2.5 pl-2 text-sm font-semibold\",\n        },\n    };\n    const badgeColorSizes = {\n        ...badgeSizes,\n        lg: {\n            trailing: `${badgeSizes.lg.trailing} rounded-lg`,\n            leading: `${badgeSizes.lg.leading} rounded-lg`,\n        },\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeColorSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return (\n        <span className={cx(colors.common, sizes[type][size][icon], colors.styles[color].root, className)}>\n            {IconLeading && <IconLeading weight=\"bold\" className={cx(colors.styles[color].addon, badgeIconClassName)} />}\n            {children}\n            {IconTrailing && <IconTrailing weight=\"bold\" className={cx(colors.styles[color].addon, badgeIconClassName)} />}\n        </span>\n    );\n};\n\ninterface BadgeWithFlagProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    flag?: FlagTypes;\n    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];\n    children: ReactNode;\n}\n\nexport const BadgeWithFlag = <T extends BadgeTypes>(props: BadgeWithFlagProps<T>) => {\n    const { size = \"md\", color = \"gray\", flag = \"AU\", type = \"pill-color\", children } = props;\n\n    const colors = withPillTypes[type];\n\n    const pillSizes = {\n        sm: \"gap-1 py-0.5 pl-0.75 pr-2 text-xs font-semibold\",\n        md: \"gap-1.5 py-0.5 pl-1 pr-2.5 text-sm font-semibold\",\n        lg: \"gap-1.5 py-1 pl-1.5 pr-3 text-sm font-semibold\",\n    };\n    const badgeSizes = {\n        sm: \"gap-1 py-0.5 pl-1 pr-1.5 text-xs font-semibold\",\n        md: \"gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-semibold\",\n        lg: \"gap-1.5 py-1 pl-2 pr-2.5 text-sm font-semibold\",\n    };\n    const badgeColorSizes = {\n        ...badgeSizes,\n        lg: `${badgeSizes.lg} rounded-lg`,\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeColorSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return (\n        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>\n            <img src={`https://www.untitledui.com/images/flags/${flag}.svg`} className=\"size-4 max-w-none rounded-full\" alt={`${flag} flag`} />\n            {children}\n        </span>\n    );\n};\n\ninterface BadgeWithImageProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    imgSrc: string;\n    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];\n    children: ReactNode;\n}\n\nexport const BadgeWithImage = <T extends BadgeTypes>(props: BadgeWithImageProps<T>) => {\n    const { size = \"md\", color = \"gray\", type = \"pill-color\", imgSrc, children } = props;\n\n    const colors = withPillTypes[type];\n\n    const pillSizes = {\n        sm: \"gap-1 py-0.5 pl-0.75 pr-2 text-xs font-semibold\",\n        md: \"gap-1.5 py-0.5 pl-1 pr-2.5 text-sm font-semibold\",\n        lg: \"gap-1.5 py-1 pl-1.5 pr-3 text-sm font-semibold\",\n    };\n    const badgeSizes = {\n        sm: \"gap-1 py-0.5 pl-1 pr-1.5 text-xs font-semibold\",\n        md: \"gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-semibold\",\n        lg: \"gap-1.5 py-1 pl-2 pr-2.5 text-sm font-semibold\",\n    };\n    const badgeColorSizes = {\n        ...badgeSizes,\n        lg: `${badgeSizes.lg} rounded-lg`,\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeColorSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return (\n        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>\n            <img src={imgSrc} className=\"size-4 max-w-none rounded-full\" alt=\"Badge image\" />\n            {children}\n        </span>\n    );\n};\n\ninterface BadgeWithButtonProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    icon?: IconComponentType;\n    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];\n    children: ReactNode;\n    /**\n     * The label for the button.\n     */\n    buttonLabel?: string;\n    /**\n     * The click event handler for the button.\n     */\n    onButtonClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const BadgeWithButton = <T extends BadgeTypes>(props: BadgeWithButtonProps<T>) => {\n    const { size = \"md\", color = \"gray\", type = \"pill-color\", icon: Icon = CloseX, buttonLabel, children } = props;\n\n    const colors = withPillTypes[type];\n\n    const pillSizes = {\n        sm: \"gap-0.5 py-0.5 pl-2 pr-0.75 text-xs font-semibold\",\n        md: \"gap-0.5 py-0.5 pl-2.5 pr-1 text-sm font-semibold\",\n        lg: \"gap-0.5 py-1 pl-3 pr-1.5 text-sm font-semibold\",\n    };\n    const badgeSizes = {\n        sm: \"gap-0.5 py-0.5 pl-1.5 pr-0.75 text-xs font-semibold\",\n        md: \"gap-0.5 py-0.5 pl-2 pr-1 text-sm font-semibold\",\n        lg: \"gap-0.5 py-1 pl-2.5 pr-1.5 text-sm font-semibold\",\n    };\n    const badgeColorSizes = {\n        ...badgeSizes,\n        lg: `${badgeSizes.lg} rounded-lg`,\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeColorSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return (\n        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>\n            {children}\n            <button\n                type=\"button\"\n                aria-label={buttonLabel}\n                onClick={props.onButtonClick}\n                className={cx(\n                    \"flex cursor-pointer items-center justify-center p-0.5 transition duration-100 ease-linear\",\n                    focusShadowPlain,\n                    colors.styles[color].addonButton,\n                    type === \"pill-color\" || type === \"modern\" ? \"rounded-full\" : \"rounded-[3px]\",\n                )}\n            >\n                <Icon weight=\"bold\" className={cx(badgeIconClassName, \"transition-inherit-all\")} />\n            </button>\n        </span>\n    );\n};\n\ninterface BadgeIconProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    icon: IconComponentType;\n    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];\n    children?: ReactNode;\n}\n\nexport const BadgeIcon = <T extends BadgeTypes>(props: BadgeIconProps<T>) => {\n    const { size = \"md\", color = \"gray\", type = \"pill-color\", icon: Icon } = props;\n\n    const colors = withPillTypes[type];\n\n    const pillSizes = {\n        sm: \"p-1.25\",\n        md: \"p-1.5\",\n        lg: \"p-2\",\n    };\n\n    const badgeSizes = {\n        sm: \"p-1.25\",\n        md: \"p-1.5\",\n        lg: \"p-2\",\n    };\n    const badgeColorSizes = {\n        ...badgeSizes,\n        lg: `${badgeSizes.lg} rounded-lg`,\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeColorSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return (\n        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>\n            <Icon weight=\"bold\" className={cx(badgeIconClassName, colors.styles[color].addon)} />\n        </span>\n    );\n};\n"]}

package/dist/react/button.js

@@ -137,7 +137,7 @@ var styles = sortCx({
         "hover:bg-primary_hover hover:text-secondary_hover",
         "disabled:opacity-50",
         "data-loading:bg-primary_hover",
-        "*:data-icon:text-fg-secondary hover:*:data-icon:text-fg-quaternary_hover"
+        "*:data-icon:text-fg-secondary"
       ].join(" ")
     },
     /** Figma Hierarchy=Tertiary */
@@ -147,7 +147,7 @@ var styles = sortCx({
         focusShadowPlain,
         "hover:bg-primary_hover hover:text-tertiary_hover",
         "disabled:opacity-50",
-        "*:data-icon:text-fg-tertiary hover:*:data-icon:text-fg-quaternary_hover"
+        "*:data-icon:text-fg-tertiary"
       ].join(" ")
     },
     /** Figma Hierarchy=Link color — text + icons share brand-secondary; hover underlines with fg-brand-secondary. */

package/dist/react/button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../utils/cx.ts","../../../../utils/is-react-component.ts","../../../../components/base/buttons/button.tsx"],"names":["AriaLink","AriaButton"],"mappings":"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","file":"button.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","/* We cannot use type `unknown` instead of `any` here because it will break the type assertion `isReactComponent` function is providing. */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type React from \"react\";\n\ntype ReactComponent = React.FC<any> | React.ComponentClass<any, any>;\n\n/**\n * Checks if a given value is a function component.\n */\nexport const isFunctionComponent = (component: any): component is React.FC<any> => {\n    return typeof component === \"function\";\n};\n\n/**\n * Checks if a given value is a class component.\n */\nexport const isClassComponent = (component: any): component is React.ComponentClass<any, any> => {\n    return typeof component === \"function\" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);\n};\n\n/**\n * Checks if a given value is a forward ref component.\n */\nexport const isForwardRefComponent = (component: any): component is React.ForwardRefExoticComponent<any> => {\n    return typeof component === \"object\" && component !== null && component.$$typeof.toString() === \"Symbol(react.forward_ref)\";\n};\n\n/**\n * Checks if a given value is a valid React component.\n */\nexport const isReactComponent = (component: any): component is ReactComponent => {\n    return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);\n};\n","\"use client\";\n\nimport type { FC, ReactElement, ReactNode } from \"react\";\nimport React, { isValidElement } from \"react\";\nimport type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from \"react-aria-components\";\nimport { Button as AriaButton, Link as AriaLink } from \"react-aria-components\";\nimport { cx, sortCx } from \"@/utils/cx\";\nimport { isReactComponent } from \"@/utils/is-react-component\";\n\n/**\n * Figma: Buttons/Button (3287:427074), Buttons/Button destructive (6218:85578)\n *\n * Hierarchy mapping (Figma → Untitled `color` prop):\n * - Primary  → `primary`  (dark neutral solid — default CTA, black in light mode)\n * - Brand    → `brand`    (purple solid)\n * - Secondary / Tertiary / Link color / Link gray → same names\n *\n * Focus: Figma spread-shadow ring (2px surface gap + 4px focus-ring), not outline.\n * Skeuomorphic: shadow-xs-skeuomorphic + gradient top rim (#ffffff1f).\n */\n\n/** Plain focus — Tertiary, Link color, Link gray (Figma Focus rings/focus-ring). */\nconst focusShadowPlain =\n    \"focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\n/** Skeuomorphic focus — Primary, Brand, Secondary (Figma focus-ring-shadow-xs-skeuomorphic). */\nconst focusShadowSkeuomorphic =\n    \"focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-xs-skeuomorphic),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\n/** Figma Gradient/skeuemorphic-gradient-border — 1px inner rim, strongest at top. */\nconst skeuomorphicGradientBorderClass = [\n    \"ring-1 ring-inset ring-transparent\",\n    \"before:pointer-events-none before:absolute before:inset-px before:rounded-[inherit] before:border before:border-[#ffffff1f] before:content-['']\",\n    \"before:[mask-image:linear-gradient(to_bottom,#000,transparent)]\",\n].join(\" \");\n\nconst skeuomorphicShadowClass = [\"shadow-xs-skeuomorphic\", focusShadowSkeuomorphic, \"overflow-hidden\"].join(\" \");\n\n/** Secondary focus — shadow-xs + spread focus ring (Figma focus-ring-shadow-xs-skeuomorphic; keeps real border). */\nconst focusShadowSecondary =\n    \"focus-visible:outline-none focus-visible:[box-shadow:0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\n/** Secondary depth — bottom inset only; outer edge is border-primary (inner 1px rim stacks visually with border). */\nconst secondaryInnerShadow =\n    \"after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-[''] after:[box-shadow:inset_0px_-1px_0px_0px_rgba(0,0,0,0.05)]\";\n\nconst secondaryShadowClass = [\"relative overflow-hidden shadow-xs\", secondaryInnerShadow, focusShadowSecondary].join(\" \");\n\n/** Number input stepper buttons — shell owns border/focus; match outer rounded-lg corners. */\nconst inputNumberButtonClass =\n    [\n        \"in-data-number-input:border-0 in-data-number-input:shadow-none in-data-number-input:!rounded-none in-data-number-input:!h-full in-data-number-input:!min-h-0 in-data-number-input:self-stretch in-data-number-input:overflow-hidden\",\n        \"in-data-number-input:before:hidden in-data-number-input:after:hidden\",\n        \"in-data-number-input:focus-visible:outline-none in-data-number-input:focus-visible:shadow-none in-data-number-input:focus-visible:ring-0 in-data-number-input:focus-visible:![box-shadow:none]\",\n    ].join(\" \");\n\n/** InputGroup addon buttons — shell owns outer border/corners; button is a flat inner segment (like NativeSelect). */\nconst inputAddonButtonClass =\n    [\n        \"in-data-input-wrapper:border-0 in-data-input-wrapper:shadow-none in-data-input-wrapper:!rounded-none in-data-input-wrapper:overflow-hidden\",\n        \"in-data-input-wrapper:in-data-trailing:border-l in-data-input-wrapper:in-data-trailing:border-solid in-data-input-wrapper:in-data-trailing:border-primary\",\n        \"in-data-input-wrapper:in-data-leading:border-r in-data-input-wrapper:in-data-leading:border-solid in-data-input-wrapper:in-data-leading:border-primary\",\n        \"in-data-input-wrapper:group-invalid:in-data-trailing:border-error_subtle in-data-input-wrapper:group-invalid:in-data-leading:border-error_subtle\",\n        \"in-data-input-wrapper:before:hidden in-data-input-wrapper:after:hidden\",\n        \"in-data-input-wrapper:focus-visible:outline-none in-data-input-wrapper:focus-visible:shadow-none in-data-input-wrapper:focus-visible:ring-0 in-data-input-wrapper:focus-visible:![box-shadow:none]\",\n    ].join(\" \");\n\nconst styles = sortCx({\n    common: {\n        root: [\n            \"group relative inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap rounded-full font-body outline-none before:absolute\",\n            \"font-semibold transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out\",\n            \"pressed:scale-[0.985] pressed:duration-100 pressed:ease-linear motion-reduce:pressed:scale-100\",\n            \"disabled:pointer-events-none disabled:cursor-not-allowed in-data-input-wrapper:disabled:opacity-100\",\n            inputAddonButtonClass,\n            inputNumberButtonClass,\n            // Stretch to InputGroup row height; padding/typography follow `data-input-size` on the field (Figma 85:1269).\n            \"in-data-input-wrapper:!h-full in-data-input-wrapper:!min-h-0 in-data-input-wrapper:self-stretch\",\n            \"in-data-input-wrapper:in-data-[input-size=sm]:gap-1 in-data-input-wrapper:in-data-[input-size=sm]:px-3 in-data-input-wrapper:in-data-[input-size=sm]:py-2 in-data-input-wrapper:in-data-[input-size=sm]:text-sm\",\n            \"in-data-input-wrapper:in-data-[input-size=md]:gap-1 in-data-input-wrapper:in-data-[input-size=md]:px-3.5 in-data-input-wrapper:in-data-[input-size=md]:py-2.5 in-data-input-wrapper:in-data-[input-size=md]:text-sm\",\n            \"in-data-input-wrapper:in-data-[input-size=lg]:gap-1.5 in-data-input-wrapper:in-data-[input-size=lg]:px-4 in-data-input-wrapper:in-data-[input-size=lg]:py-2.5 in-data-input-wrapper:in-data-[input-size=lg]:text-md\",\n            \"*:data-icon:pointer-events-none *:data-icon:shrink-0 *:data-icon:transition-inherit-all\",\n        ].join(\" \"),\n        icon: \"pointer-events-none shrink-0 transition-inherit-all\",\n    },\n    sizes: {\n        xs: {\n            root: [\n                \"h-8 min-h-8 gap-1 px-[0.625rem] py-1.5 text-sm data-icon-only:size-8 data-icon-only:min-h-8 data-icon-only:min-w-8 data-icon-only:p-2\",\n                \"in-data-input-wrapper:data-icon-only:p-2.5\",\n                \"*:data-icon:size-4\",\n            ].join(\" \"),\n            linkRoot: \"h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-3\",\n        },\n        sm: {\n            root: [\n                \"h-9 min-h-9 gap-1 px-3 py-2 text-sm data-icon-only:size-9 data-icon-only:min-h-9 data-icon-only:min-w-9 data-icon-only:p-2\",\n                \"in-data-input-wrapper:data-icon-only:p-2.5\",\n                \"*:data-icon:size-5\",\n            ].join(\" \"),\n            linkRoot: \"h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-3\",\n        },\n        md: {\n            root: [\n                \"h-10 min-h-10 gap-1 px-3.5 py-2.5 text-sm data-icon-only:size-10 data-icon-only:min-h-10 data-icon-only:min-w-10 data-icon-only:p-2.5\",\n                \"in-data-input-wrapper:data-icon-only:p-3\",\n                \"*:data-icon:size-5\",\n            ].join(\" \"),\n            linkRoot: \"h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-4\",\n        },\n        lg: {\n            root: \"h-11 min-h-11 gap-1.5 px-4 py-2.5 text-md data-icon-only:size-11 data-icon-only:min-h-11 data-icon-only:min-w-11 data-icon-only:p-3 *:data-icon:size-5\",\n            linkRoot: \"h-auto min-h-0 gap-1.5 px-0! py-0! text-md *:data-text:underline-offset-4\",\n        },\n        xl: {\n            root: \"h-12 min-h-12 gap-1.5 px-[1.125rem] py-3 text-md data-icon-only:size-12 data-icon-only:min-h-12 data-icon-only:min-w-12 data-icon-only:p-3 data-icon-only:*:data-icon:size-6 *:data-icon:size-5\",\n            linkRoot: \"h-auto min-h-0 gap-1.5 px-0! py-0! text-md *:data-text:underline-offset-4\",\n        },\n    },\n\n    colors: {\n        /** Figma Hierarchy=Primary — dark neutral solid; hover lightens to fg-tertiary_hover (#404040). */\n        primary: {\n            root: [\n                \"bg-primary-solid text-white\",\n                skeuomorphicShadowClass,\n                skeuomorphicGradientBorderClass,\n                \"hover:bg-fg-tertiary_hover dark:hover:bg-quaternary\",\n                \"disabled:opacity-30\",\n                \"data-loading:bg-fg-tertiary_hover dark:data-loading:bg-quaternary\",\n                \"*:data-icon:not([data-icon=loading]):text-white/70\",\n            ].join(\" \"),\n        },\n        /** Figma Hierarchy=Brand — purple solid; hover darkens to bg-brand-solid_hover (#6d28d9). */\n        brand: {\n            root: [\n                \"bg-brand-solid text-primary_on-brand\",\n                skeuomorphicShadowClass,\n                skeuomorphicGradientBorderClass,\n                \"hover:bg-brand-solid_hover\",\n                \"disabled:opacity-50\",\n                \"data-loading:bg-brand-solid_hover\",\n                \"*:data-icon:not([data-icon=loading]):text-primary_on-brand\",\n            ].join(\" \"),\n        },\n        /** Figma Hierarchy=Secondary — border-primary + shadow-xs + skeuomorphic inner rim overlay. */\n        secondary: {\n            root: [\n                \"border border-solid border-primary bg-primary text-secondary\",\n                secondaryShadowClass,\n                \"hover:bg-primary_hover hover:text-secondary_hover\",\n                \"disabled:opacity-50\",\n                \"data-loading:bg-primary_hover\",\n                \"*:data-icon:text-fg-secondary hover:*:data-icon:text-fg-quaternary_hover\",\n            ].join(\" \"),\n        },\n        /** Figma Hierarchy=Tertiary */\n        tertiary: {\n            root: [\n                \"border border-transparent bg-transparent text-tertiary\",\n                focusShadowPlain,\n                \"hover:bg-primary_hover hover:text-tertiary_hover\",\n                \"disabled:opacity-50\",\n                \"*:data-icon:text-fg-tertiary hover:*:data-icon:text-fg-quaternary_hover\",\n            ].join(\" \"),\n        },\n        /** Figma Hierarchy=Link color — text + icons share brand-secondary; hover underlines with fg-brand-secondary. */\n        \"link-color\": {\n            root: [\n                \"h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-brand-secondary shadow-none\",\n                focusShadowPlain,\n                \"hover:text-brand-secondary_hover\",\n                \"disabled:opacity-50\",\n                \"*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-fg-brand-secondary\",\n            ].join(\" \"),\n        },\n        /** Figma Hierarchy=Link gray — text + icons share tertiary; hover underlines with fg-quaternary. */\n        \"link-gray\": {\n            root: [\n                \"h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-tertiary shadow-none\",\n                focusShadowPlain,\n                \"hover:text-tertiary_hover\",\n                \"disabled:opacity-50\",\n                \"*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-fg-quaternary\",\n            ].join(\" \"),\n        },\n        \"primary-destructive\": {\n            root: [\n                \"bg-error-solid text-white\",\n                skeuomorphicShadowClass,\n                skeuomorphicGradientBorderClass,\n                \"hover:bg-error-solid_hover\",\n                \"disabled:opacity-50\",\n                \"data-loading:bg-error-solid_hover\",\n                \"*:data-icon:not([data-icon=loading]):text-white/70\",\n            ].join(\" \"),\n        },\n        \"secondary-destructive\": {\n            root: [\n                \"border border-solid border-primary bg-primary text-error-primary\",\n                secondaryShadowClass,\n                \"hover:bg-error-primary hover:text-error-primary_hover\",\n                \"disabled:opacity-50\",\n                \"data-loading:bg-error-primary\",\n                \"*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary\",\n            ].join(\" \"),\n        },\n        \"tertiary-destructive\": {\n            root: [\n                \"border border-transparent bg-transparent text-error-primary\",\n                focusShadowPlain,\n                \"hover:bg-error-primary hover:text-error-primary_hover\",\n                \"disabled:opacity-50\",\n                \"*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary\",\n            ].join(\" \"),\n        },\n        /** Figma Hierarchy=Link (destructive) — text + icons share error-primary; hover underlines. */\n        \"link-destructive\": {\n            root: [\n                \"h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-error-primary shadow-none\",\n                focusShadowPlain,\n                \"hover:text-error-primary_hover\",\n                \"disabled:opacity-50\",\n                \"*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-current\",\n            ].join(\" \"),\n        },\n    },\n});\n\n/**\n * Common props shared between button and anchor variants\n */\nexport interface CommonProps {\n    /** Disables the button and shows a disabled state */\n    isDisabled?: boolean;\n    /** Shows a loading spinner and disables the button */\n    isLoading?: boolean;\n    /** The size variant of the button */\n    size?: keyof typeof styles.sizes;\n    /** The color variant of the button */\n    color?: keyof typeof styles.colors;\n    /** Icon component or element to show before the text */\n    iconLeading?: FC<{ className?: string }> | ReactNode;\n    /** Icon component or element to show after the text */\n    iconTrailing?: FC<{ className?: string }> | ReactNode;\n    /** Removes horizontal padding from the text content */\n    noTextPadding?: boolean;\n    /** When true, keeps the text visible during loading state */\n    showTextWhileLoading?: boolean;\n\n    children?: ReactNode;\n    className?: string;\n}\n\n/**\n * Props for the button variant (non-link)\n */\nexport interface ButtonProps extends CommonProps, Omit<AriaButtonProps, \"children\" | \"className\"> {}\n/**\n * Props for the link variant (anchor tag)\n */\ninterface LinkProps extends CommonProps, Omit<AriaLinkProps, \"children\" | \"className\"> {\n    href: NonNullable<AriaLinkProps[\"href\"]>;\n}\n\n/** Union type of button and link props */\nexport type Props = ButtonProps | LinkProps;\n\nexport const Button: {\n    (props: LinkProps): ReactElement<LinkProps>;\n    (props: ButtonProps): ReactElement<ButtonProps>;\n} = ({\n    size = \"md\",\n    color = \"primary\",\n    children,\n    className,\n    noTextPadding,\n    iconLeading: IconLeading,\n    iconTrailing: IconTrailing,\n    isDisabled: disabled,\n    isLoading: loading,\n    showTextWhileLoading,\n    ...props\n}) => {\n    const href = \"href\" in props ? props.href : undefined;\n\n    const isIcon = (IconLeading || IconTrailing) && !children;\n    const isLinkType = [\"link-gray\", \"link-color\", \"link-destructive\"].includes(color);\n\n    noTextPadding = isLinkType || noTextPadding;\n\n    const commonChildren = (\n        <>\n            {isValidElement(IconLeading) && IconLeading}\n            {isReactComponent(IconLeading) && <IconLeading data-icon=\"leading\" className={styles.common.icon} />}\n\n            {loading && (\n                <svg\n                    fill=\"none\"\n                    data-icon=\"loading\"\n                    viewBox=\"0 0 256 256\"\n                    aria-hidden\n                    className={cx(\n                        styles.common.icon,\n                        \"size-5 animate-spin\",\n                        !showTextWhileLoading && \"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\",\n                    )}\n                >\n                    <path\n                        fill=\"currentColor\"\n                        d=\"M232,128a104,104,0,0,1-208,0c0-41,23.81-78.36,60.66-95.27a8,8,0,0,1,6.68,14.54C60,61.46,40,93.27,40,128a88,88,0,0,0,176,0c0-34.73-20-66.54-51.34-80.73a8,8,0,0,1,6.68-14.54C208.19,49.64,232,87,232,128Z\"\n                    />\n                </svg>\n            )}\n\n            {children && (\n                <span data-text className={cx(\"transition-inherit-all\", !noTextPadding && !isLinkType && \"px-0.5\")}>\n                    {children}\n                </span>\n            )}\n\n            {isValidElement(IconTrailing) && IconTrailing}\n            {isReactComponent(IconTrailing) && <IconTrailing data-icon=\"trailing\" className={styles.common.icon} />}\n        </>\n    );\n\n    const commonProps = {\n        \"data-icon-only\": isIcon ? true : undefined,\n        \"data-loading\": loading ? true : undefined,\n        ...props,\n        isDisabled: disabled || loading,\n        className: cx(\n            styles.common.root,\n            styles.sizes[size].root,\n            styles.colors[color].root,\n            isLinkType && styles.sizes[size].linkRoot,\n            (loading || (href && (disabled || loading))) && \"pointer-events-none\",\n            loading && (showTextWhileLoading ? \"[&>*:not([data-icon=loading]):not([data-text])]:hidden\" : \"[&>*:not([data-icon=loading])]:invisible\"),\n            className,\n        ),\n        children: commonChildren,\n    };\n\n    if (\"href\" in commonProps) {\n        return <AriaLink {...commonProps} href={disabled || loading ? undefined : href} />;\n    }\n\n    return <AriaButton {...commonProps} type={commonProps.type || \"button\"} isPending={loading} />;\n};\n"]}
+{"version":3,"sources":["../../../../utils/cx.ts","../../../../utils/is-react-component.ts","../../../../components/base/buttons/button.tsx"],"names":["AriaLink","AriaButton"],"mappings":"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","file":"button.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","/* We cannot use type `unknown` instead of `any` here because it will break the type assertion `isReactComponent` function is providing. */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type React from \"react\";\n\ntype ReactComponent = React.FC<any> | React.ComponentClass<any, any>;\n\n/**\n * Checks if a given value is a function component.\n */\nexport const isFunctionComponent = (component: any): component is React.FC<any> => {\n    return typeof component === \"function\";\n};\n\n/**\n * Checks if a given value is a class component.\n */\nexport const isClassComponent = (component: any): component is React.ComponentClass<any, any> => {\n    return typeof component === \"function\" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);\n};\n\n/**\n * Checks if a given value is a forward ref component.\n */\nexport const isForwardRefComponent = (component: any): component is React.ForwardRefExoticComponent<any> => {\n    return typeof component === \"object\" && component !== null && component.$$typeof.toString() === \"Symbol(react.forward_ref)\";\n};\n\n/**\n * Checks if a given value is a valid React component.\n */\nexport const isReactComponent = (component: any): component is ReactComponent => {\n    return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);\n};\n","\"use client\";\n\nimport type { FC, ReactElement, ReactNode } from \"react\";\nimport React, { isValidElement } from \"react\";\nimport type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from \"react-aria-components\";\nimport { Button as AriaButton, Link as AriaLink } from \"react-aria-components\";\nimport { cx, sortCx } from \"@/utils/cx\";\nimport { isReactComponent } from \"@/utils/is-react-component\";\n\n/**\n * Figma: Buttons/Button (3287:427074), Buttons/Button destructive (6218:85578)\n *\n * Hierarchy mapping (Figma → Untitled `color` prop):\n * - Primary  → `primary`  (dark neutral solid — default CTA, black in light mode)\n * - Brand    → `brand`    (purple solid)\n * - Secondary / Tertiary / Link color / Link gray → same names\n *\n * Focus: Figma spread-shadow ring (2px surface gap + 4px focus-ring), not outline.\n * Skeuomorphic: shadow-xs-skeuomorphic + gradient top rim (#ffffff1f).\n */\n\n/** Plain focus — Tertiary, Link color, Link gray (Figma Focus rings/focus-ring). */\nconst focusShadowPlain =\n    \"focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\n/** Skeuomorphic focus — Primary, Brand, Secondary (Figma focus-ring-shadow-xs-skeuomorphic). */\nconst focusShadowSkeuomorphic =\n    \"focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-xs-skeuomorphic),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\n/** Figma Gradient/skeuemorphic-gradient-border — 1px inner rim, strongest at top. */\nconst skeuomorphicGradientBorderClass = [\n    \"ring-1 ring-inset ring-transparent\",\n    \"before:pointer-events-none before:absolute before:inset-px before:rounded-[inherit] before:border before:border-[#ffffff1f] before:content-['']\",\n    \"before:[mask-image:linear-gradient(to_bottom,#000,transparent)]\",\n].join(\" \");\n\nconst skeuomorphicShadowClass = [\"shadow-xs-skeuomorphic\", focusShadowSkeuomorphic, \"overflow-hidden\"].join(\" \");\n\n/** Secondary focus — shadow-xs + spread focus ring (Figma focus-ring-shadow-xs-skeuomorphic; keeps real border). */\nconst focusShadowSecondary =\n    \"focus-visible:outline-none focus-visible:[box-shadow:0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\n/** Secondary depth — bottom inset only; outer edge is border-primary (inner 1px rim stacks visually with border). */\nconst secondaryInnerShadow =\n    \"after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-[''] after:[box-shadow:inset_0px_-1px_0px_0px_rgba(0,0,0,0.05)]\";\n\nconst secondaryShadowClass = [\"relative overflow-hidden shadow-xs\", secondaryInnerShadow, focusShadowSecondary].join(\" \");\n\n/** Number input stepper buttons — shell owns border/focus; match outer rounded-lg corners. */\nconst inputNumberButtonClass =\n    [\n        \"in-data-number-input:border-0 in-data-number-input:shadow-none in-data-number-input:!rounded-none in-data-number-input:!h-full in-data-number-input:!min-h-0 in-data-number-input:self-stretch in-data-number-input:overflow-hidden\",\n        \"in-data-number-input:before:hidden in-data-number-input:after:hidden\",\n        \"in-data-number-input:focus-visible:outline-none in-data-number-input:focus-visible:shadow-none in-data-number-input:focus-visible:ring-0 in-data-number-input:focus-visible:![box-shadow:none]\",\n    ].join(\" \");\n\n/** InputGroup addon buttons — shell owns outer border/corners; button is a flat inner segment (like NativeSelect). */\nconst inputAddonButtonClass =\n    [\n        \"in-data-input-wrapper:border-0 in-data-input-wrapper:shadow-none in-data-input-wrapper:!rounded-none in-data-input-wrapper:overflow-hidden\",\n        \"in-data-input-wrapper:in-data-trailing:border-l in-data-input-wrapper:in-data-trailing:border-solid in-data-input-wrapper:in-data-trailing:border-primary\",\n        \"in-data-input-wrapper:in-data-leading:border-r in-data-input-wrapper:in-data-leading:border-solid in-data-input-wrapper:in-data-leading:border-primary\",\n        \"in-data-input-wrapper:group-invalid:in-data-trailing:border-error_subtle in-data-input-wrapper:group-invalid:in-data-leading:border-error_subtle\",\n        \"in-data-input-wrapper:before:hidden in-data-input-wrapper:after:hidden\",\n        \"in-data-input-wrapper:focus-visible:outline-none in-data-input-wrapper:focus-visible:shadow-none in-data-input-wrapper:focus-visible:ring-0 in-data-input-wrapper:focus-visible:![box-shadow:none]\",\n    ].join(\" \");\n\nconst styles = sortCx({\n    common: {\n        root: [\n            \"group relative inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap rounded-full font-body outline-none before:absolute\",\n            \"font-semibold transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out\",\n            \"pressed:scale-[0.985] pressed:duration-100 pressed:ease-linear motion-reduce:pressed:scale-100\",\n            \"disabled:pointer-events-none disabled:cursor-not-allowed in-data-input-wrapper:disabled:opacity-100\",\n            inputAddonButtonClass,\n            inputNumberButtonClass,\n            // Stretch to InputGroup row height; padding/typography follow `data-input-size` on the field (Figma 85:1269).\n            \"in-data-input-wrapper:!h-full in-data-input-wrapper:!min-h-0 in-data-input-wrapper:self-stretch\",\n            \"in-data-input-wrapper:in-data-[input-size=sm]:gap-1 in-data-input-wrapper:in-data-[input-size=sm]:px-3 in-data-input-wrapper:in-data-[input-size=sm]:py-2 in-data-input-wrapper:in-data-[input-size=sm]:text-sm\",\n            \"in-data-input-wrapper:in-data-[input-size=md]:gap-1 in-data-input-wrapper:in-data-[input-size=md]:px-3.5 in-data-input-wrapper:in-data-[input-size=md]:py-2.5 in-data-input-wrapper:in-data-[input-size=md]:text-sm\",\n            \"in-data-input-wrapper:in-data-[input-size=lg]:gap-1.5 in-data-input-wrapper:in-data-[input-size=lg]:px-4 in-data-input-wrapper:in-data-[input-size=lg]:py-2.5 in-data-input-wrapper:in-data-[input-size=lg]:text-md\",\n            \"*:data-icon:pointer-events-none *:data-icon:shrink-0 *:data-icon:transition-inherit-all\",\n        ].join(\" \"),\n        icon: \"pointer-events-none shrink-0 transition-inherit-all\",\n    },\n    sizes: {\n        xs: {\n            root: [\n                \"h-8 min-h-8 gap-1 px-[0.625rem] py-1.5 text-sm data-icon-only:size-8 data-icon-only:min-h-8 data-icon-only:min-w-8 data-icon-only:p-2\",\n                \"in-data-input-wrapper:data-icon-only:p-2.5\",\n                \"*:data-icon:size-4\",\n            ].join(\" \"),\n            linkRoot: \"h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-3\",\n        },\n        sm: {\n            root: [\n                \"h-9 min-h-9 gap-1 px-3 py-2 text-sm data-icon-only:size-9 data-icon-only:min-h-9 data-icon-only:min-w-9 data-icon-only:p-2\",\n                \"in-data-input-wrapper:data-icon-only:p-2.5\",\n                \"*:data-icon:size-5\",\n            ].join(\" \"),\n            linkRoot: \"h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-3\",\n        },\n        md: {\n            root: [\n                \"h-10 min-h-10 gap-1 px-3.5 py-2.5 text-sm data-icon-only:size-10 data-icon-only:min-h-10 data-icon-only:min-w-10 data-icon-only:p-2.5\",\n                \"in-data-input-wrapper:data-icon-only:p-3\",\n                \"*:data-icon:size-5\",\n            ].join(\" \"),\n            linkRoot: \"h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-4\",\n        },\n        lg: {\n            root: \"h-11 min-h-11 gap-1.5 px-4 py-2.5 text-md data-icon-only:size-11 data-icon-only:min-h-11 data-icon-only:min-w-11 data-icon-only:p-3 *:data-icon:size-5\",\n            linkRoot: \"h-auto min-h-0 gap-1.5 px-0! py-0! text-md *:data-text:underline-offset-4\",\n        },\n        xl: {\n            root: \"h-12 min-h-12 gap-1.5 px-[1.125rem] py-3 text-md data-icon-only:size-12 data-icon-only:min-h-12 data-icon-only:min-w-12 data-icon-only:p-3 data-icon-only:*:data-icon:size-6 *:data-icon:size-5\",\n            linkRoot: \"h-auto min-h-0 gap-1.5 px-0! py-0! text-md *:data-text:underline-offset-4\",\n        },\n    },\n\n    colors: {\n        /** Figma Hierarchy=Primary — dark neutral solid; hover lightens to fg-tertiary_hover (#404040). */\n        primary: {\n            root: [\n                \"bg-primary-solid text-white\",\n                skeuomorphicShadowClass,\n                skeuomorphicGradientBorderClass,\n                \"hover:bg-fg-tertiary_hover dark:hover:bg-quaternary\",\n                \"disabled:opacity-30\",\n                \"data-loading:bg-fg-tertiary_hover dark:data-loading:bg-quaternary\",\n                \"*:data-icon:not([data-icon=loading]):text-white/70\",\n            ].join(\" \"),\n        },\n        /** Figma Hierarchy=Brand — purple solid; hover darkens to bg-brand-solid_hover (#6d28d9). */\n        brand: {\n            root: [\n                \"bg-brand-solid text-primary_on-brand\",\n                skeuomorphicShadowClass,\n                skeuomorphicGradientBorderClass,\n                \"hover:bg-brand-solid_hover\",\n                \"disabled:opacity-50\",\n                \"data-loading:bg-brand-solid_hover\",\n                \"*:data-icon:not([data-icon=loading]):text-primary_on-brand\",\n            ].join(\" \"),\n        },\n        /** Figma Hierarchy=Secondary — border-primary + shadow-xs + skeuomorphic inner rim overlay. */\n        secondary: {\n            root: [\n                \"border border-solid border-primary bg-primary text-secondary\",\n                secondaryShadowClass,\n                \"hover:bg-primary_hover hover:text-secondary_hover\",\n                \"disabled:opacity-50\",\n                \"data-loading:bg-primary_hover\",\n                \"*:data-icon:text-fg-secondary\",\n            ].join(\" \"),\n        },\n        /** Figma Hierarchy=Tertiary */\n        tertiary: {\n            root: [\n                \"border border-transparent bg-transparent text-tertiary\",\n                focusShadowPlain,\n                \"hover:bg-primary_hover hover:text-tertiary_hover\",\n                \"disabled:opacity-50\",\n                \"*:data-icon:text-fg-tertiary\",\n            ].join(\" \"),\n        },\n        /** Figma Hierarchy=Link color — text + icons share brand-secondary; hover underlines with fg-brand-secondary. */\n        \"link-color\": {\n            root: [\n                \"h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-brand-secondary shadow-none\",\n                focusShadowPlain,\n                \"hover:text-brand-secondary_hover\",\n                \"disabled:opacity-50\",\n                \"*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-fg-brand-secondary\",\n            ].join(\" \"),\n        },\n        /** Figma Hierarchy=Link gray — text + icons share tertiary; hover underlines with fg-quaternary. */\n        \"link-gray\": {\n            root: [\n                \"h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-tertiary shadow-none\",\n                focusShadowPlain,\n                \"hover:text-tertiary_hover\",\n                \"disabled:opacity-50\",\n                \"*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-fg-quaternary\",\n            ].join(\" \"),\n        },\n        \"primary-destructive\": {\n            root: [\n                \"bg-error-solid text-white\",\n                skeuomorphicShadowClass,\n                skeuomorphicGradientBorderClass,\n                \"hover:bg-error-solid_hover\",\n                \"disabled:opacity-50\",\n                \"data-loading:bg-error-solid_hover\",\n                \"*:data-icon:not([data-icon=loading]):text-white/70\",\n            ].join(\" \"),\n        },\n        \"secondary-destructive\": {\n            root: [\n                \"border border-solid border-primary bg-primary text-error-primary\",\n                secondaryShadowClass,\n                \"hover:bg-error-primary hover:text-error-primary_hover\",\n                \"disabled:opacity-50\",\n                \"data-loading:bg-error-primary\",\n                \"*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary\",\n            ].join(\" \"),\n        },\n        \"tertiary-destructive\": {\n            root: [\n                \"border border-transparent bg-transparent text-error-primary\",\n                focusShadowPlain,\n                \"hover:bg-error-primary hover:text-error-primary_hover\",\n                \"disabled:opacity-50\",\n                \"*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary\",\n            ].join(\" \"),\n        },\n        /** Figma Hierarchy=Link (destructive) — text + icons share error-primary; hover underlines. */\n        \"link-destructive\": {\n            root: [\n                \"h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-error-primary shadow-none\",\n                focusShadowPlain,\n                \"hover:text-error-primary_hover\",\n                \"disabled:opacity-50\",\n                \"*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-current\",\n            ].join(\" \"),\n        },\n    },\n});\n\n/**\n * Common props shared between button and anchor variants\n */\nexport interface CommonProps {\n    /** Disables the button and shows a disabled state */\n    isDisabled?: boolean;\n    /** Shows a loading spinner and disables the button */\n    isLoading?: boolean;\n    /** The size variant of the button */\n    size?: keyof typeof styles.sizes;\n    /** The color variant of the button */\n    color?: keyof typeof styles.colors;\n    /** Icon component or element to show before the text */\n    iconLeading?: FC<{ className?: string }> | ReactNode;\n    /** Icon component or element to show after the text */\n    iconTrailing?: FC<{ className?: string }> | ReactNode;\n    /** Removes horizontal padding from the text content */\n    noTextPadding?: boolean;\n    /** When true, keeps the text visible during loading state */\n    showTextWhileLoading?: boolean;\n\n    children?: ReactNode;\n    className?: string;\n}\n\n/**\n * Props for the button variant (non-link)\n */\nexport interface ButtonProps extends CommonProps, Omit<AriaButtonProps, \"children\" | \"className\"> {}\n/**\n * Props for the link variant (anchor tag)\n */\ninterface LinkProps extends CommonProps, Omit<AriaLinkProps, \"children\" | \"className\"> {\n    href: NonNullable<AriaLinkProps[\"href\"]>;\n}\n\n/** Union type of button and link props */\nexport type Props = ButtonProps | LinkProps;\n\nexport const Button: {\n    (props: LinkProps): ReactElement<LinkProps>;\n    (props: ButtonProps): ReactElement<ButtonProps>;\n} = ({\n    size = \"md\",\n    color = \"primary\",\n    children,\n    className,\n    noTextPadding,\n    iconLeading: IconLeading,\n    iconTrailing: IconTrailing,\n    isDisabled: disabled,\n    isLoading: loading,\n    showTextWhileLoading,\n    ...props\n}) => {\n    const href = \"href\" in props ? props.href : undefined;\n\n    const isIcon = (IconLeading || IconTrailing) && !children;\n    const isLinkType = [\"link-gray\", \"link-color\", \"link-destructive\"].includes(color);\n\n    noTextPadding = isLinkType || noTextPadding;\n\n    const commonChildren = (\n        <>\n            {isValidElement(IconLeading) && IconLeading}\n            {isReactComponent(IconLeading) && <IconLeading data-icon=\"leading\" className={styles.common.icon} />}\n\n            {loading && (\n                <svg\n                    fill=\"none\"\n                    data-icon=\"loading\"\n                    viewBox=\"0 0 256 256\"\n                    aria-hidden\n                    className={cx(\n                        styles.common.icon,\n                        \"size-5 animate-spin\",\n                        !showTextWhileLoading && \"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\",\n                    )}\n                >\n                    <path\n                        fill=\"currentColor\"\n                        d=\"M232,128a104,104,0,0,1-208,0c0-41,23.81-78.36,60.66-95.27a8,8,0,0,1,6.68,14.54C60,61.46,40,93.27,40,128a88,88,0,0,0,176,0c0-34.73-20-66.54-51.34-80.73a8,8,0,0,1,6.68-14.54C208.19,49.64,232,87,232,128Z\"\n                    />\n                </svg>\n            )}\n\n            {children && (\n                <span data-text className={cx(\"transition-inherit-all\", !noTextPadding && !isLinkType && \"px-0.5\")}>\n                    {children}\n                </span>\n            )}\n\n            {isValidElement(IconTrailing) && IconTrailing}\n            {isReactComponent(IconTrailing) && <IconTrailing data-icon=\"trailing\" className={styles.common.icon} />}\n        </>\n    );\n\n    const commonProps = {\n        \"data-icon-only\": isIcon ? true : undefined,\n        \"data-loading\": loading ? true : undefined,\n        ...props,\n        isDisabled: disabled || loading,\n        className: cx(\n            styles.common.root,\n            styles.sizes[size].root,\n            styles.colors[color].root,\n            isLinkType && styles.sizes[size].linkRoot,\n            (loading || (href && (disabled || loading))) && \"pointer-events-none\",\n            loading && (showTextWhileLoading ? \"[&>*:not([data-icon=loading]):not([data-text])]:hidden\" : \"[&>*:not([data-icon=loading])]:invisible\"),\n            className,\n        ),\n        children: commonChildren,\n    };\n\n    if (\"href\" in commonProps) {\n        return <AriaLink {...commonProps} href={disabled || loading ? undefined : href} />;\n    }\n\n    return <AriaButton {...commonProps} type={commonProps.type || \"button\"} isPending={loading} />;\n};\n"]}