@economic/taco 10.0.1-improve-publish-scripts.0 → 10.0.1-react-19.0

package/dist/components/AlertDialog/components/Content.js

@@ -1,41 +1,34 @@
 import * as React from "react";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import cn from "clsx";
-import { getDialogPositionClassnames, getDialogStylingClassnames, getDialogSizeClassnames } from "../../Dialog/util.js";
+import { DIALOG_POSITION_CLASSNAMES, DIALOG_STYLING_CLASSNAMES, DIALOG_SIZE_CLASSNAME } from "../../Dialog/util.js";
 import { useCurrentAlertDialog } from "../Context.js";
 import { BadgeIcon } from "../../BadgeIcon/BadgeIcon.js";
 import { Backdrop } from "../../Backdrop/Backdrop.js";
-const iconPropsByVariant = (variant) => {
-  switch (variant) {
-    case "information":
-      return {
-        color: "blue",
-        icon: "info"
-      };
-    case "error":
-      return {
-        color: "red",
-        icon: "close"
-      };
-    case "warning":
-      return {
-        color: "yellow",
-        icon: "warning"
-      };
-    default:
-      return void 0;
+const ICON_PROPS_BY_VARIANT = {
+  information: {
+    color: "blue",
+    icon: "info"
+  },
+  error: {
+    color: "red",
+    icon: "close"
+  },
+  warning: {
+    color: "yellow",
+    icon: "warning"
   }
 };
 const Title = React.forwardRef(function AlertDialogTitle(props, ref) {
   const { props: parentProps } = useCurrentAlertDialog();
-  const iconProps = iconPropsByVariant(parentProps.variant);
+  const iconProps = parentProps.variant ? ICON_PROPS_BY_VARIANT[parentProps.variant] : void 0;
   return /* @__PURE__ */ React.createElement(AlertDialog.Title, { ...props, className: cn("flex items-center", props.className), ref }, iconProps ? /* @__PURE__ */ React.createElement(BadgeIcon, { ...iconProps, className: "mr-2" }) : void 0, props.children);
 });
 const Description = React.forwardRef(function AlertDialogDescription(props, ref) {
   return /* @__PURE__ */ React.createElement(AlertDialog.Description, { ref, className: props.className, ...props });
 });
 const Content = React.forwardRef(function AlertDialogContent(props, ref) {
-  const className = cn("p-6", getDialogPositionClassnames(), getDialogStylingClassnames(), getDialogSizeClassnames("dialog"));
+  const className = cn("p-6", DIALOG_POSITION_CLASSNAMES, DIALOG_STYLING_CLASSNAMES, DIALOG_SIZE_CLASSNAME.dialog);
   return /* @__PURE__ */ React.createElement(AlertDialog.Portal, null, /* @__PURE__ */ React.createElement(Backdrop, null, /* @__PURE__ */ React.createElement(AlertDialog.Popup, { ...props, ref, className }, props.children)));
 });
 export {

package/dist/components/AlertDialog/components/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../src/components/AlertDialog/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\nimport cn from 'clsx';\nimport { getDialogPositionClassnames, getDialogSizeClassnames, getDialogStylingClassnames } from '../../Dialog/util';\nimport { useCurrentAlertDialog } from '../Context';\nimport { BadgeIcon } from '../../BadgeIcon/BadgeIcon';\nimport { Color } from '../../../types';\nimport { IconName } from '../../Icon/components';\nimport { Backdrop } from '../../Backdrop/Backdrop';\n\nconst iconPropsByVariant = (variant: 'information' | 'error' | 'warning'): { color: Color; icon: IconName } | undefined => {\n    switch (variant) {\n        case 'information':\n            return {\n                color: 'blue',\n                icon: 'info',\n            };\n        case 'error':\n            return {\n                color: 'red',\n                icon: 'close',\n            };\n        case 'warning':\n            return {\n                color: 'yellow',\n                icon: 'warning',\n            };\n        default:\n            return undefined;\n    }\n};\n\nexport type AlertDialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function AlertDialogTitle(\n    props: AlertDialogTitleProps,\n    ref: React.Ref<HTMLHeadingElement>\n) {\n    const { props: parentProps } = useCurrentAlertDialog();\n\n    const iconProps = iconPropsByVariant(parentProps.variant);\n    return (\n        <AlertDialogPrimitive.Title {...props} className={cn('flex items-center', props.className)} ref={ref}>\n            {iconProps ? <BadgeIcon {...iconProps} className=\"mr-2\" /> : undefined}\n            {props.children}\n        </AlertDialogPrimitive.Title>\n    );\n});\n\nexport type AlertDialogDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;\nexport const Description = React.forwardRef(function AlertDialogDescription(\n    props: AlertDialogDescriptionProps,\n    ref: React.Ref<HTMLParagraphElement>\n) {\n    return <AlertDialogPrimitive.Description ref={ref} className={props.className} {...props} />;\n});\n\nexport type AlertDialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the dialog is opened */\n    'aria-label': string;\n    children: React.ReactNode;\n};\nexport const Content = React.forwardRef(function AlertDialogContent(\n    props: AlertDialogContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const className = cn('p-6', getDialogPositionClassnames(), getDialogStylingClassnames(), getDialogSizeClassnames('dialog'));\n\n    return (\n        <AlertDialogPrimitive.Portal>\n            <Backdrop>\n                <AlertDialogPrimitive.Popup {...props} ref={ref} className={className}>\n                    {props.children}\n                </AlertDialogPrimitive.Popup>\n            </Backdrop>\n        </AlertDialogPrimitive.Portal>\n    );\n});\n"],"names":["AlertDialogPrimitive"],"mappings":";;;;;;;AAUA,MAAM,qBAAqB,CAAC,YAA+F;AACvH,UAAQ,SAAS;AAAA,IACb,KAAK;AACM,aAAA;AAAA,QACH,OAAO;AAAA,QACP,MAAM;AAAA,MACV;AAAA,IACJ,KAAK;AACM,aAAA;AAAA,QACH,OAAO;AAAA,QACP,MAAM;AAAA,MACV;AAAA,IACJ,KAAK;AACM,aAAA;AAAA,QACH,OAAO;AAAA,QACP,MAAM;AAAA,MACV;AAAA,IACJ;AACW,aAAA;AAAA,EAAA;AAEnB;AAGO,MAAM,QAAQ,MAAM,WAAW,SAAS,iBAC3C,OACA,KACF;AACE,QAAM,EAAE,OAAO,YAAY,IAAI,sBAAsB;AAE/C,QAAA,YAAY,mBAAmB,YAAY,OAAO;AAEpD,SAAA,sBAAA,cAACA,YAAqB,OAArB,EAA4B,GAAG,OAAO,WAAW,GAAG,qBAAqB,MAAM,SAAS,GAAG,OACvF,YAAa,sBAAA,cAAA,WAAA,EAAW,GAAG,WAAW,WAAU,OAAO,CAAA,IAAK,QAC5D,MAAM,QACX;AAER,CAAC;AAGM,MAAM,cAAc,MAAM,WAAW,SAAS,uBACjD,OACA,KACF;AACS,SAAA,sBAAA,cAACA,YAAqB,aAArB,EAAiC,KAAU,WAAW,MAAM,WAAY,GAAG,MAAO,CAAA;AAC9F,CAAC;AAOM,MAAM,UAAU,MAAM,WAAW,SAAS,mBAC7C,OACA,KACF;AACQ,QAAA,YAAY,GAAG,OAAO,+BAA+B,2BAA2B,GAAG,wBAAwB,QAAQ,CAAC;AAE1H,6CACKA,YAAqB,QAArB,MACG,sBAAA,cAAC,gBACI,sBAAA,cAAAA,YAAqB,OAArB,EAA4B,GAAG,OAAO,KAAU,aAC5C,MAAM,QACX,CACJ,CACJ;AAER,CAAC;"}
+{"version":3,"file":"Content.js","sources":["../../../../src/components/AlertDialog/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\nimport cn from 'clsx';\nimport { DIALOG_POSITION_CLASSNAMES, DIALOG_SIZE_CLASSNAME, DIALOG_STYLING_CLASSNAMES } from '../../Dialog/util';\nimport { useCurrentAlertDialog } from '../Context';\nimport { BadgeIcon } from '../../BadgeIcon/BadgeIcon';\nimport { Color } from '../../../types';\nimport { IconName } from '../../Icon/components';\nimport { Backdrop } from '../../Backdrop/Backdrop';\n\nconst ICON_PROPS_BY_VARIANT: Record<'information' | 'error' | 'warning', { color: Color; icon: IconName }> = {\n    information: {\n        color: 'blue',\n        icon: 'info',\n    },\n    error: {\n        color: 'red',\n        icon: 'close',\n    },\n    warning: {\n        color: 'yellow',\n        icon: 'warning',\n    },\n};\n\nexport type AlertDialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function AlertDialogTitle(\n    props: AlertDialogTitleProps,\n    ref: React.Ref<HTMLHeadingElement>\n) {\n    const { props: parentProps } = useCurrentAlertDialog();\n\n    const iconProps = parentProps.variant\n        ? ICON_PROPS_BY_VARIANT[parentProps.variant as keyof typeof ICON_PROPS_BY_VARIANT]\n        : undefined;\n    return (\n        <AlertDialogPrimitive.Title {...props} className={cn('flex items-center', props.className)} ref={ref}>\n            {iconProps ? <BadgeIcon {...iconProps} className=\"mr-2\" /> : undefined}\n            {props.children}\n        </AlertDialogPrimitive.Title>\n    );\n});\n\nexport type AlertDialogDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;\nexport const Description = React.forwardRef(function AlertDialogDescription(\n    props: AlertDialogDescriptionProps,\n    ref: React.Ref<HTMLParagraphElement>\n) {\n    return <AlertDialogPrimitive.Description ref={ref} className={props.className} {...props} />;\n});\n\nexport type AlertDialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the dialog is opened */\n    'aria-label': string;\n    children: React.ReactNode;\n};\nexport const Content = React.forwardRef(function AlertDialogContent(\n    props: AlertDialogContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const className = cn('p-6', DIALOG_POSITION_CLASSNAMES, DIALOG_STYLING_CLASSNAMES, DIALOG_SIZE_CLASSNAME.dialog);\n\n    return (\n        <AlertDialogPrimitive.Portal>\n            <Backdrop>\n                <AlertDialogPrimitive.Popup {...props} ref={ref} className={className}>\n                    {props.children}\n                </AlertDialogPrimitive.Popup>\n            </Backdrop>\n        </AlertDialogPrimitive.Portal>\n    );\n});\n"],"names":["AlertDialogPrimitive"],"mappings":";;;;;;;AAUA,MAAM,wBAAuG;AAAA,EACzG,aAAa;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAAA,EAEV,OAAO;AAAA,IACH,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAAA,EAEV,SAAS;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAEd;AAGO,MAAM,QAAQ,MAAM,WAAW,SAAS,iBAC3C,OACA,KACF;AACE,QAAM,EAAE,OAAO,YAAA,IAAgB,sBAAA;AAE/B,QAAM,YAAY,YAAY,UACxB,sBAAsB,YAAY,OAA6C,IAC/E;AACN,SACI,sBAAA,cAACA,YAAqB,OAArB,EAA4B,GAAG,OAAO,WAAW,GAAG,qBAAqB,MAAM,SAAS,GAAG,OACvF,YAAY,sBAAA,cAAC,WAAA,EAAW,GAAG,WAAW,WAAU,OAAA,CAAO,IAAK,QAC5D,MAAM,QACX;AAER,CAAC;AAGM,MAAM,cAAc,MAAM,WAAW,SAAS,uBACjD,OACA,KACF;AACE,SAAO,sBAAA,cAACA,YAAqB,aAArB,EAAiC,KAAU,WAAW,MAAM,WAAY,GAAG,MAAA,CAAO;AAC9F,CAAC;AAOM,MAAM,UAAU,MAAM,WAAW,SAAS,mBAC7C,OACA,KACF;AACE,QAAM,YAAY,GAAG,OAAO,4BAA4B,2BAA2B,sBAAsB,MAAM;AAE/G,6CACKA,YAAqB,QAArB,MACG,sBAAA,cAAC,gBACG,sBAAA,cAACA,YAAqB,OAArB,EAA4B,GAAG,OAAO,KAAU,aAC5C,MAAM,QACX,CACJ,CACJ;AAER,CAAC;"}

package/dist/components/AlertDialog/components/Footer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.cjs","sources":["../../../../src/components/AlertDialog/components/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\n\nexport type AlertDialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function AlertDialogFooter(props: AlertDialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const className = 'flex justify-end gap-2';\n\n    return (\n        <div {...props} className={className} ref={ref}>\n            {props.children}\n        </div>\n    );\n});\n\nexport type AlertDialogCancelProps = React.HTMLAttributes<HTMLButtonElement> & { children: React.ReactElement };\nexport const Cancel = React.forwardRef(function AlertDialogCancel(\n    props: AlertDialogCancelProps,\n    ref: React.Ref<HTMLButtonElement>\n) {\n    const { children, ...otherProps } = props;\n    return <AlertDialogPrimitive.Close {...otherProps} ref={ref} render={children} />;\n});\n\n// radix differentiated Cancel/Action (even though they had the same function), so we keep this alias to avoid a breaking change.\nexport type AlertDialogActionProps = React.HTMLAttributes<HTMLButtonElement> & { children: React.ReactElement };\nexport const Action = Cancel;\n"],"names":["React","AlertDialogPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,SAASA,iBAAM,WAAW,SAAS,kBAAkB,OAA+B,KAAgC;AAC7H,QAAM,YAAY;AAElB,wDACK,OAAK,EAAA,GAAG,OAAO,WAAsB,IAAA,GACjC,MAAM,QACX;AAER,CAAC;AAGM,MAAM,SAASA,iBAAM,WAAW,SAAS,kBAC5C,OACA,KACF;AACE,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AAC7B,SAAAA,iCAAA,cAACC,YAAAA,YAAqB,OAArB,EAA4B,GAAG,YAAY,KAAU,QAAQ,UAAU;AACnF,CAAC;AAIM,MAAM,SAAS;;;;"}
+{"version":3,"file":"Footer.cjs","sources":["../../../../src/components/AlertDialog/components/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\n\nexport type AlertDialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function AlertDialogFooter(props: AlertDialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const className = 'flex justify-end gap-2';\n\n    return (\n        <div {...props} className={className} ref={ref}>\n            {props.children}\n        </div>\n    );\n});\n\nexport type AlertDialogCancelProps = React.HTMLAttributes<HTMLButtonElement> & { children: React.ReactElement };\nexport const Cancel = React.forwardRef(function AlertDialogCancel(\n    props: AlertDialogCancelProps,\n    ref: React.Ref<HTMLButtonElement>\n) {\n    const { children, ...otherProps } = props;\n    return <AlertDialogPrimitive.Close {...otherProps} ref={ref} render={children} />;\n});\n\n// radix differentiated Cancel/Action (even though they had the same function), so we keep this alias to avoid a breaking change.\nexport type AlertDialogActionProps = React.HTMLAttributes<HTMLButtonElement> & { children: React.ReactElement };\nexport const Action = Cancel;\n"],"names":["React","AlertDialogPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,SAASA,iBAAM,WAAW,SAAS,kBAAkB,OAA+B,KAAgC;AAC7H,QAAM,YAAY;AAElB,wDACK,OAAA,EAAK,GAAG,OAAO,WAAsB,IAAA,GACjC,MAAM,QACX;AAER,CAAC;AAGM,MAAM,SAASA,iBAAM,WAAW,SAAS,kBAC5C,OACA,KACF;AACE,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,SAAOA,iCAAA,cAACC,YAAAA,YAAqB,OAArB,EAA4B,GAAG,YAAY,KAAU,QAAQ,UAAU;AACnF,CAAC;AAIM,MAAM,SAAS;;;;"}

package/dist/components/AlertDialog/components/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","sources":["../../../../src/components/AlertDialog/components/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\n\nexport type AlertDialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function AlertDialogFooter(props: AlertDialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const className = 'flex justify-end gap-2';\n\n    return (\n        <div {...props} className={className} ref={ref}>\n            {props.children}\n        </div>\n    );\n});\n\nexport type AlertDialogCancelProps = React.HTMLAttributes<HTMLButtonElement> & { children: React.ReactElement };\nexport const Cancel = React.forwardRef(function AlertDialogCancel(\n    props: AlertDialogCancelProps,\n    ref: React.Ref<HTMLButtonElement>\n) {\n    const { children, ...otherProps } = props;\n    return <AlertDialogPrimitive.Close {...otherProps} ref={ref} render={children} />;\n});\n\n// radix differentiated Cancel/Action (even though they had the same function), so we keep this alias to avoid a breaking change.\nexport type AlertDialogActionProps = React.HTMLAttributes<HTMLButtonElement> & { children: React.ReactElement };\nexport const Action = Cancel;\n"],"names":["AlertDialogPrimitive"],"mappings":";;AAIO,MAAM,SAAS,MAAM,WAAW,SAAS,kBAAkB,OAA+B,KAAgC;AAC7H,QAAM,YAAY;AAElB,6CACK,OAAK,EAAA,GAAG,OAAO,WAAsB,IAAA,GACjC,MAAM,QACX;AAER,CAAC;AAGM,MAAM,SAAS,MAAM,WAAW,SAAS,kBAC5C,OACA,KACF;AACE,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AAC7B,SAAA,sBAAA,cAACA,YAAqB,OAArB,EAA4B,GAAG,YAAY,KAAU,QAAQ,UAAU;AACnF,CAAC;AAIM,MAAM,SAAS;"}
+{"version":3,"file":"Footer.js","sources":["../../../../src/components/AlertDialog/components/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\n\nexport type AlertDialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function AlertDialogFooter(props: AlertDialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const className = 'flex justify-end gap-2';\n\n    return (\n        <div {...props} className={className} ref={ref}>\n            {props.children}\n        </div>\n    );\n});\n\nexport type AlertDialogCancelProps = React.HTMLAttributes<HTMLButtonElement> & { children: React.ReactElement };\nexport const Cancel = React.forwardRef(function AlertDialogCancel(\n    props: AlertDialogCancelProps,\n    ref: React.Ref<HTMLButtonElement>\n) {\n    const { children, ...otherProps } = props;\n    return <AlertDialogPrimitive.Close {...otherProps} ref={ref} render={children} />;\n});\n\n// radix differentiated Cancel/Action (even though they had the same function), so we keep this alias to avoid a breaking change.\nexport type AlertDialogActionProps = React.HTMLAttributes<HTMLButtonElement> & { children: React.ReactElement };\nexport const Action = Cancel;\n"],"names":["AlertDialogPrimitive"],"mappings":";;AAIO,MAAM,SAAS,MAAM,WAAW,SAAS,kBAAkB,OAA+B,KAAgC;AAC7H,QAAM,YAAY;AAElB,6CACK,OAAA,EAAK,GAAG,OAAO,WAAsB,IAAA,GACjC,MAAM,QACX;AAER,CAAC;AAGM,MAAM,SAAS,MAAM,WAAW,SAAS,kBAC5C,OACA,KACF;AACE,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,SAAO,sBAAA,cAACA,YAAqB,OAArB,EAA4B,GAAG,YAAY,KAAU,QAAQ,UAAU;AACnF,CAAC;AAIM,MAAM,SAAS;"}

package/dist/components/AlertDialog/components/Trigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Trigger.cjs","sources":["../../../../src/components/AlertDialog/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\nimport { useCurrentAlertDialog } from '../Context';\nimport { mergeRefs } from '../../../utils/mergeRefs';\n\nexport type AlertDialogTriggerProps = React.HTMLAttributes<HTMLButtonElement> & { children: React.ReactElement };\n\nexport const Trigger = React.forwardRef(function AlertDialogTrigger(\n    props: AlertDialogTriggerProps,\n    externalRef: React.Ref<HTMLButtonElement>\n) {\n    const { children, ...otherProps } = props;\n    const { ref: parentRef, props: parentProps } = useCurrentAlertDialog();\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    return <AlertDialogPrimitive.Trigger {...parentProps} {...otherProps} ref={refCallback} render={children} />;\n});\n"],"names":["React","useCurrentAlertDialog","mergeRefs","AlertDialogPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,UAAUA,iBAAM,WAAW,SAAS,mBAC7C,OACA,aACF;AACE,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,EAAE,KAAK,WAAW,OAAO,YAAA,IAAgBC,QAAAA,sBAAsB;AACrE,QAAM,cAAcC,UAAA,UAAU,CAAC,WAAW,WAAW,CAAC;AAE/C,SAAAF,iCAAA,cAACG,wBAAqB,SAArB,EAA8B,GAAG,aAAc,GAAG,YAAY,KAAK,aAAa,QAAQ,SAAU,CAAA;AAC9G,CAAC;;"}
+{"version":3,"file":"Trigger.cjs","sources":["../../../../src/components/AlertDialog/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\nimport { useCurrentAlertDialog } from '../Context';\nimport { mergeRefs } from '../../../utils/mergeRefs';\n\nexport type AlertDialogTriggerProps = React.HTMLAttributes<HTMLButtonElement> & { children: React.ReactElement };\n\nexport const Trigger = React.forwardRef(function AlertDialogTrigger(\n    props: AlertDialogTriggerProps,\n    externalRef: React.Ref<HTMLButtonElement>\n) {\n    const { children, ...otherProps } = props;\n    const { ref: parentRef, props: parentProps } = useCurrentAlertDialog();\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    return <AlertDialogPrimitive.Trigger {...parentProps} {...otherProps} ref={refCallback} render={children} />;\n});\n"],"names":["React","useCurrentAlertDialog","mergeRefs","AlertDialogPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,UAAUA,iBAAM,WAAW,SAAS,mBAC7C,OACA,aACF;AACE,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,EAAE,KAAK,WAAW,OAAO,YAAA,IAAgBC,QAAAA,sBAAA;AAC/C,QAAM,cAAcC,UAAAA,UAAU,CAAC,WAAW,WAAW,CAAC;AAEtD,SAAOF,iCAAA,cAACG,wBAAqB,SAArB,EAA8B,GAAG,aAAc,GAAG,YAAY,KAAK,aAAa,QAAQ,SAAA,CAAU;AAC9G,CAAC;;"}

package/dist/components/AlertDialog/components/Trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Trigger.js","sources":["../../../../src/components/AlertDialog/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\nimport { useCurrentAlertDialog } from '../Context';\nimport { mergeRefs } from '../../../utils/mergeRefs';\n\nexport type AlertDialogTriggerProps = React.HTMLAttributes<HTMLButtonElement> & { children: React.ReactElement };\n\nexport const Trigger = React.forwardRef(function AlertDialogTrigger(\n    props: AlertDialogTriggerProps,\n    externalRef: React.Ref<HTMLButtonElement>\n) {\n    const { children, ...otherProps } = props;\n    const { ref: parentRef, props: parentProps } = useCurrentAlertDialog();\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    return <AlertDialogPrimitive.Trigger {...parentProps} {...otherProps} ref={refCallback} render={children} />;\n});\n"],"names":["AlertDialogPrimitive"],"mappings":";;;;AAOO,MAAM,UAAU,MAAM,WAAW,SAAS,mBAC7C,OACA,aACF;AACE,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,EAAE,KAAK,WAAW,OAAO,YAAA,IAAgB,sBAAsB;AACrE,QAAM,cAAc,UAAU,CAAC,WAAW,WAAW,CAAC;AAE/C,SAAA,sBAAA,cAACA,YAAqB,SAArB,EAA8B,GAAG,aAAc,GAAG,YAAY,KAAK,aAAa,QAAQ,SAAU,CAAA;AAC9G,CAAC;"}
+{"version":3,"file":"Trigger.js","sources":["../../../../src/components/AlertDialog/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\nimport { useCurrentAlertDialog } from '../Context';\nimport { mergeRefs } from '../../../utils/mergeRefs';\n\nexport type AlertDialogTriggerProps = React.HTMLAttributes<HTMLButtonElement> & { children: React.ReactElement };\n\nexport const Trigger = React.forwardRef(function AlertDialogTrigger(\n    props: AlertDialogTriggerProps,\n    externalRef: React.Ref<HTMLButtonElement>\n) {\n    const { children, ...otherProps } = props;\n    const { ref: parentRef, props: parentProps } = useCurrentAlertDialog();\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    return <AlertDialogPrimitive.Trigger {...parentProps} {...otherProps} ref={refCallback} render={children} />;\n});\n"],"names":["AlertDialogPrimitive"],"mappings":";;;;AAOO,MAAM,UAAU,MAAM,WAAW,SAAS,mBAC7C,OACA,aACF;AACE,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,EAAE,KAAK,WAAW,OAAO,YAAA,IAAgB,sBAAA;AAC/C,QAAM,cAAc,UAAU,CAAC,WAAW,WAAW,CAAC;AAEtD,SAAO,sBAAA,cAACA,YAAqB,SAArB,EAA8B,GAAG,aAAc,GAAG,YAAY,KAAK,aAAa,QAAQ,SAAA,CAAU;AAC9G,CAAC;"}

package/dist/components/Backdrop/Backdrop.cjs

@@ -23,7 +23,7 @@ const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const Backdrop = React__namespace.forwardRef(function Backdrop2(props, forwardedRef) {
   const ref = useMergedRef.useMergedRef(forwardedRef);
   const className = cn(
-    "fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] aria-hidden:invisible print:overflow-visible print:absolute",
+    "fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] aria-hidden:invisible print:absolute print:overflow-visible",
     props.className
   );
   const onPointerDown = (event) => {

package/dist/components/Backdrop/Backdrop.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.cjs","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\nexport type BackdropProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(function Backdrop(props, forwardedRef) {\n    const ref = useMergedRef<HTMLDivElement>(forwardedRef);\n    const className = cn(\n        'fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] aria-hidden:invisible print:overflow-visible print:absolute',\n        props.className\n    );\n\n    // prevents focus from leaving dialogs when clicking on backdrops\n    const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n        if (event.target === ref.current) {\n            event.preventDefault();\n        }\n    };\n\n    return <div {...props} className={className} onPointerDown={onPointerDown} data-taco=\"backdrop\" ref={ref} />;\n});\n"],"names":["React","Backdrop","useMergedRef"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAMO,MAAM,WAAWA,iBAAM,WAA0C,SAASC,UAAS,OAAO,cAAc;AACrG,QAAA,MAAMC,0BAA6B,YAAY;AACrD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AAGM,QAAA,gBAAgB,CAAC,UAA8C;AAC7D,QAAA,MAAM,WAAW,IAAI,SAAS;AAC9B,YAAM,eAAe;AAAA,IAAA;AAAA,EAE7B;AAEO,SAAAF,iCAAA,cAAC,SAAK,GAAG,OAAO,WAAsB,eAA8B,aAAU,YAAW,IAAU,CAAA;AAC9G,CAAC;;"}
+{"version":3,"file":"Backdrop.cjs","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\nexport type BackdropProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(function Backdrop(props, forwardedRef) {\n    const ref = useMergedRef<HTMLDivElement>(forwardedRef);\n    const className = cn(\n        'fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] aria-hidden:invisible print:absolute print:overflow-visible',\n        props.className\n    );\n\n    // prevents focus from leaving dialogs when clicking on backdrops\n    const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n        if (event.target === ref.current) {\n            event.preventDefault();\n        }\n    };\n\n    return <div {...props} className={className} onPointerDown={onPointerDown} data-taco=\"backdrop\" ref={ref} />;\n});\n"],"names":["React","Backdrop","useMergedRef"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAMO,MAAM,WAAWA,iBAAM,WAA0C,SAASC,UAAS,OAAO,cAAc;AAC3G,QAAM,MAAMC,aAAAA,aAA6B,YAAY;AACrD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EAAA;AAIV,QAAM,gBAAgB,CAAC,UAA8C;AACjE,QAAI,MAAM,WAAW,IAAI,SAAS;AAC9B,YAAM,eAAA;AAAA,IACV;AAAA,EACJ;AAEA,SAAOF,iCAAA,cAAC,SAAK,GAAG,OAAO,WAAsB,eAA8B,aAAU,YAAW,IAAA,CAAU;AAC9G,CAAC;;"}

package/dist/components/Backdrop/Backdrop.js

@@ -4,7 +4,7 @@ import { useMergedRef } from "../../hooks/useMergedRef.js";
 const Backdrop = React.forwardRef(function Backdrop2(props, forwardedRef) {
   const ref = useMergedRef(forwardedRef);
   const className = cn(
-    "fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] aria-hidden:invisible print:overflow-visible print:absolute",
+    "fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] aria-hidden:invisible print:absolute print:overflow-visible",
     props.className
   );
   const onPointerDown = (event) => {

package/dist/components/Backdrop/Backdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.js","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\nexport type BackdropProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(function Backdrop(props, forwardedRef) {\n    const ref = useMergedRef<HTMLDivElement>(forwardedRef);\n    const className = cn(\n        'fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] aria-hidden:invisible print:overflow-visible print:absolute',\n        props.className\n    );\n\n    // prevents focus from leaving dialogs when clicking on backdrops\n    const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n        if (event.target === ref.current) {\n            event.preventDefault();\n        }\n    };\n\n    return <div {...props} className={className} onPointerDown={onPointerDown} data-taco=\"backdrop\" ref={ref} />;\n});\n"],"names":["Backdrop"],"mappings":";;;AAMO,MAAM,WAAW,MAAM,WAA0C,SAASA,UAAS,OAAO,cAAc;AACrG,QAAA,MAAM,aAA6B,YAAY;AACrD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AAGM,QAAA,gBAAgB,CAAC,UAA8C;AAC7D,QAAA,MAAM,WAAW,IAAI,SAAS;AAC9B,YAAM,eAAe;AAAA,IAAA;AAAA,EAE7B;AAEO,SAAA,sBAAA,cAAC,SAAK,GAAG,OAAO,WAAsB,eAA8B,aAAU,YAAW,IAAU,CAAA;AAC9G,CAAC;"}
+{"version":3,"file":"Backdrop.js","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\nexport type BackdropProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(function Backdrop(props, forwardedRef) {\n    const ref = useMergedRef<HTMLDivElement>(forwardedRef);\n    const className = cn(\n        'fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] aria-hidden:invisible print:absolute print:overflow-visible',\n        props.className\n    );\n\n    // prevents focus from leaving dialogs when clicking on backdrops\n    const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n        if (event.target === ref.current) {\n            event.preventDefault();\n        }\n    };\n\n    return <div {...props} className={className} onPointerDown={onPointerDown} data-taco=\"backdrop\" ref={ref} />;\n});\n"],"names":["Backdrop"],"mappings":";;;AAMO,MAAM,WAAW,MAAM,WAA0C,SAASA,UAAS,OAAO,cAAc;AAC3G,QAAM,MAAM,aAA6B,YAAY;AACrD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EAAA;AAIV,QAAM,gBAAgB,CAAC,UAA8C;AACjE,QAAI,MAAM,WAAW,IAAI,SAAS;AAC9B,YAAM,eAAA;AAAA,IACV;AAAA,EACJ;AAEA,SAAO,sBAAA,cAAC,SAAK,GAAG,OAAO,WAAsB,eAA8B,aAAU,YAAW,IAAA,CAAU;AAC9G,CAAC;"}

package/dist/components/Badge/Badge.cjs

@@ -22,6 +22,16 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const APPEARANCE_CLASSNAME = {
+  solid: "border-none",
+  outline: "border",
+  subtle: "border-none font-normal"
+};
+const APPEARANCE_COLOR_CLASSNAME = {
+  solid: tailwind.COLOR_SHADE_CLASSNAME,
+  outline: tailwind.OUTLINE_COLOR_SHADE_CLASSNAME,
+  subtle: tailwind.SUBTLE_COLOR_SHADE_CLASSNAME
+};
 const Badge = React__namespace.forwardRef(function Badge2(props, ref) {
   const {
     children,
@@ -30,22 +40,22 @@ const Badge = React__namespace.forwardRef(function Badge2(props, ref) {
     status = false,
     subtle = false,
     small = false,
-    color,
+    color = "grey",
     ...otherProps
   } = props;
   const isTransparent = color === "transparent";
+  const appearance = outline ? "outline" : subtle ? "subtle" : "solid";
   const className = cn(
-    "rounded-full border box-border overflow-hidden whitespace-nowrap inline-flex items-center justify-center",
+    "box-border inline-flex items-center justify-center overflow-hidden whitespace-nowrap rounded-full border",
+    APPEARANCE_CLASSNAME[appearance],
+    APPEARANCE_COLOR_CLASSNAME[appearance][color],
     {
-      [`border ${tailwind.getOutlineColorShadeClasses(color)}`]: outline,
-      [`border-none font-normal ${tailwind.getSubtleColorShadeClasses(color)}`]: subtle,
-      [`border-none ${tailwind.getColorShadeClasses(color)}`]: !outline && !subtle,
-      "h-4 min-w-0 py-0 px-1 text-xs": small,
+      "h-4 min-w-0 px-1 py-0 text-xs": small,
       "h-2 w-2 min-w-0": compact,
-      "font-bold": outline || !subtle,
+      "font-bold": appearance !== "subtle",
       "text-sm": !small,
-      "h-5 py-0 px-1.5": !compact && !small,
       // custom padding keeps single digits in a perfect circle
+      "h-5 px-1.5 py-0": !compact && !small,
       "!bg-gray-700": compact && isTransparent
     },
     props.className
@@ -56,7 +66,7 @@ const Badge = React__namespace.forwardRef(function Badge2(props, ref) {
     }
     const contentToRender = typeof children === "string" ? /* @__PURE__ */ React__namespace.createElement("span", { className: "items-center truncate" }, children) : children;
     if (status) {
-      return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("div", { className: cn("mr-1 h-2 w-2 shrink-0 rounded-full", tailwind.getColorShadeClasses(color)) }), contentToRender);
+      return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("div", { className: cn("mr-1 h-2 w-2 shrink-0 rounded-full", tailwind.COLOR_SHADE_CLASSNAME[color]) }), contentToRender);
     }
     return contentToRender;
   };

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.cjs","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { Color } from '../../types';\nimport { getSubtleColorShadeClasses, getColorShadeClasses, getOutlineColorShadeClasses } from '../../utils/tailwind';\nimport './Badge.css';\n\nexport type BadgeBaseProps = React.HTMLAttributes<HTMLSpanElement> & {\n    /** Content should be a numerical value or tag/status like text **/\n    children: React.ReactNode;\n    /** Show small version of badge **/\n    small?: boolean;\n    /** Background color **/\n    color?: Color;\n};\n\ninterface CompactBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: boolean;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: never;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface OutlineBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: boolean;\n    /** Show subtle version **/\n    subtle?: never;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface SubtleBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface StatusBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: boolean;\n}\n\nexport type BadgeProps = CompactBadgeProps | OutlineBadgeProps | SubtleBadgeProps | StatusBadgeProps;\n\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\n    const {\n        children,\n        compact = false,\n        outline = false,\n        status = false,\n        subtle = false,\n        small = false,\n        color,\n        ...otherProps\n    } = props;\n    const isTransparent = color === 'transparent';\n    const className = cn(\n        'rounded-full border box-border overflow-hidden whitespace-nowrap inline-flex items-center justify-center',\n        {\n            [`border ${getOutlineColorShadeClasses(color)}`]: outline,\n            [`border-none font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,\n            [`border-none ${getColorShadeClasses(color)}`]: !outline && !subtle,\n            'h-4 min-w-0 py-0 px-1 text-xs': small,\n            'h-2 w-2 min-w-0': compact,\n            'font-bold': outline || !subtle,\n            'text-sm': !small,\n            'h-5 py-0 px-1.5': !compact && !small, // custom padding keeps single digits in a perfect circle\n            '!bg-gray-700': compact && isTransparent,\n        },\n        props.className\n    );\n\n    const content = () => {\n        if (compact) {\n            return <VisuallyHidden>{children}</VisuallyHidden>;\n        }\n\n        const contentToRender =\n            typeof children === 'string' ? <span className=\"items-center truncate\">{children}</span> : children;\n\n        if (status) {\n            return (\n                <>\n                    <div className={cn('mr-1 h-2 w-2 shrink-0 rounded-full', getColorShadeClasses(color))} />\n                    {contentToRender}\n                </>\n            );\n        }\n        return contentToRender;\n    };\n\n    return (\n        <span {...otherProps} className={className} data-taco=\"badge\" ref={ref} role=\"status\" title={props['aria-label']}>\n            {content()}\n        </span>\n    );\n});\n"],"names":["React","Badge","getOutlineColorShadeClasses","getSubtleColorShadeClasses","getColorShadeClasses","VisuallyHidden"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA8DO,MAAM,QAAQA,iBAAM,WAAW,SAASC,OAAM,OAAmB,KAAiC;AAC/F,QAAA;AAAA,IACF;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,gBAAgB,UAAU;AAChC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,CAAC,UAAUC,SAAAA,4BAA4B,KAAK,CAAC,EAAE,GAAG;AAAA,MAClD,CAAC,2BAA2BC,SAAAA,2BAA2B,KAAK,CAAC,EAAE,GAAG;AAAA,MAClE,CAAC,eAAeC,8BAAqB,KAAK,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC;AAAA,MAC7D,iCAAiC;AAAA,MACjC,mBAAmB;AAAA,MACnB,aAAa,WAAW,CAAC;AAAA,MACzB,WAAW,CAAC;AAAA,MACZ,mBAAmB,CAAC,WAAW,CAAC;AAAA;AAAA,MAChC,gBAAgB,WAAW;AAAA,IAC/B;AAAA,IACA,MAAM;AAAA,EACV;AAEA,QAAM,UAAU,MAAM;AAClB,QAAI,SAAS;AACF,aAAAJ,iCAAA,cAACK,qCAAgB,QAAS;AAAA,IAAA;AAG/B,UAAA,kBACF,OAAO,aAAa,0DAAY,QAAK,EAAA,WAAU,2BAAyB,QAAS,IAAU;AAE/F,QAAI,QAAQ;AAEJ,aAAAL,iCAAA,cAAAA,iBAAA,UAAA,MACKA,iCAAA,cAAA,OAAA,EAAI,WAAW,GAAG,sCAAsCI,SAAAA,qBAAqB,KAAK,CAAC,EAAG,CAAA,GACtF,eACL;AAAA,IAAA;AAGD,WAAA;AAAA,EACX;AAEA,SACKJ,iCAAA,cAAA,QAAA,EAAM,GAAG,YAAY,WAAsB,aAAU,SAAQ,KAAU,MAAK,UAAS,OAAO,MAAM,YAAY,EAAA,GAC1G,SACL;AAER,CAAC;;"}
+{"version":3,"file":"Badge.cjs","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { Color } from '../../types';\nimport { SUBTLE_COLOR_SHADE_CLASSNAME, COLOR_SHADE_CLASSNAME, OUTLINE_COLOR_SHADE_CLASSNAME } from '../../utils/tailwind';\nimport './Badge.css';\n\nexport type BadgeBaseProps = React.HTMLAttributes<HTMLSpanElement> & {\n    /** Content should be a numerical value or tag/status like text **/\n    children: React.ReactNode;\n    /** Show small version of badge **/\n    small?: boolean;\n    /** Background color **/\n    color?: Color;\n};\n\ninterface CompactBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: boolean;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: never;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface OutlineBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: boolean;\n    /** Show subtle version **/\n    subtle?: never;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface SubtleBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface StatusBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: boolean;\n}\n\nexport type BadgeProps = CompactBadgeProps | OutlineBadgeProps | SubtleBadgeProps | StatusBadgeProps;\n\ntype BadgeAppearance = 'solid' | 'outline' | 'subtle';\n\nconst APPEARANCE_CLASSNAME: Record<BadgeAppearance, string> = {\n    solid: 'border-none',\n    outline: 'border',\n    subtle: 'border-none font-normal',\n};\n\nconst APPEARANCE_COLOR_CLASSNAME: Record<BadgeAppearance, Record<Color, string>> = {\n    solid: COLOR_SHADE_CLASSNAME,\n    outline: OUTLINE_COLOR_SHADE_CLASSNAME,\n    subtle: SUBTLE_COLOR_SHADE_CLASSNAME,\n};\n\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\n    const {\n        children,\n        compact = false,\n        outline = false,\n        status = false,\n        subtle = false,\n        small = false,\n        color = 'grey',\n        ...otherProps\n    } = props;\n    const isTransparent = color === 'transparent';\n    const appearance: BadgeAppearance = outline ? 'outline' : subtle ? 'subtle' : 'solid';\n    const className = cn(\n        'box-border inline-flex items-center justify-center overflow-hidden whitespace-nowrap rounded-full border',\n        APPEARANCE_CLASSNAME[appearance],\n        APPEARANCE_COLOR_CLASSNAME[appearance][color],\n        {\n            'h-4 min-w-0 px-1 py-0 text-xs': small,\n            'h-2 w-2 min-w-0': compact,\n            'font-bold': appearance !== 'subtle',\n            'text-sm': !small,\n            // custom padding keeps single digits in a perfect circle\n            'h-5 px-1.5 py-0': !compact && !small,\n            '!bg-gray-700': compact && isTransparent,\n        },\n        props.className\n    );\n\n    const content = () => {\n        if (compact) {\n            return <VisuallyHidden>{children}</VisuallyHidden>;\n        }\n\n        const contentToRender =\n            typeof children === 'string' ? <span className=\"items-center truncate\">{children}</span> : children;\n\n        if (status) {\n            return (\n                <>\n                    <div className={cn('mr-1 h-2 w-2 shrink-0 rounded-full', COLOR_SHADE_CLASSNAME[color])} />\n                    {contentToRender}\n                </>\n            );\n        }\n        return contentToRender;\n    };\n\n    return (\n        <span {...otherProps} className={className} data-taco=\"badge\" ref={ref} role=\"status\" title={props['aria-label']}>\n            {content()}\n        </span>\n    );\n});\n"],"names":["COLOR_SHADE_CLASSNAME","OUTLINE_COLOR_SHADE_CLASSNAME","SUBTLE_COLOR_SHADE_CLASSNAME","React","Badge","VisuallyHidden"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgEA,MAAM,uBAAwD;AAAA,EAC1D,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AACZ;AAEA,MAAM,6BAA6E;AAAA,EAC/E,OAAOA,SAAAA;AAAAA,EACP,SAASC,SAAAA;AAAAA,EACT,QAAQC,SAAAA;AACZ;AAEO,MAAM,QAAQC,iBAAM,WAAW,SAASC,OAAM,OAAmB,KAAiC;AACrG,QAAM;AAAA,IACF;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,gBAAgB,UAAU;AAChC,QAAM,aAA8B,UAAU,YAAY,SAAS,WAAW;AAC9E,QAAM,YAAY;AAAA,IACd;AAAA,IACA,qBAAqB,UAAU;AAAA,IAC/B,2BAA2B,UAAU,EAAE,KAAK;AAAA,IAC5C;AAAA,MACI,iCAAiC;AAAA,MACjC,mBAAmB;AAAA,MACnB,aAAa,eAAe;AAAA,MAC5B,WAAW,CAAC;AAAA;AAAA,MAEZ,mBAAmB,CAAC,WAAW,CAAC;AAAA,MAChC,gBAAgB,WAAW;AAAA,IAAA;AAAA,IAE/B,MAAM;AAAA,EAAA;AAGV,QAAM,UAAU,MAAM;AAClB,QAAI,SAAS;AACT,aAAOD,iCAAA,cAACE,qCAAgB,QAAS;AAAA,IACrC;AAEA,UAAM,kBACF,OAAO,aAAa,0DAAY,QAAA,EAAK,WAAU,2BAAyB,QAAS,IAAU;AAE/F,QAAI,QAAQ;AACR,aACIF,iCAAA,cAAAA,iBAAA,UAAA,MACIA,iCAAA,cAAC,OAAA,EAAI,WAAW,GAAG,sCAAsCH,SAAAA,sBAAsB,KAAK,CAAC,EAAA,CAAG,GACvF,eACL;AAAA,IAER;AACA,WAAO;AAAA,EACX;AAEA,SACIG,iCAAA,cAAC,QAAA,EAAM,GAAG,YAAY,WAAsB,aAAU,SAAQ,KAAU,MAAK,UAAS,OAAO,MAAM,YAAY,EAAA,GAC1G,SACL;AAER,CAAC;;"}

package/dist/components/Badge/Badge.js

@@ -1,8 +1,18 @@
 import * as React from "react";
 import cn from "clsx";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
-import { getColorShadeClasses, getSubtleColorShadeClasses, getOutlineColorShadeClasses } from "../../utils/tailwind.js";
+import { SUBTLE_COLOR_SHADE_CLASSNAME, OUTLINE_COLOR_SHADE_CLASSNAME, COLOR_SHADE_CLASSNAME } from "../../utils/tailwind.js";
 /* empty css          */
+const APPEARANCE_CLASSNAME = {
+  solid: "border-none",
+  outline: "border",
+  subtle: "border-none font-normal"
+};
+const APPEARANCE_COLOR_CLASSNAME = {
+  solid: COLOR_SHADE_CLASSNAME,
+  outline: OUTLINE_COLOR_SHADE_CLASSNAME,
+  subtle: SUBTLE_COLOR_SHADE_CLASSNAME
+};
 const Badge = React.forwardRef(function Badge2(props, ref) {
   const {
     children,
@@ -11,22 +21,22 @@ const Badge = React.forwardRef(function Badge2(props, ref) {
     status = false,
     subtle = false,
     small = false,
-    color,
+    color = "grey",
     ...otherProps
   } = props;
   const isTransparent = color === "transparent";
+  const appearance = outline ? "outline" : subtle ? "subtle" : "solid";
   const className = cn(
-    "rounded-full border box-border overflow-hidden whitespace-nowrap inline-flex items-center justify-center",
+    "box-border inline-flex items-center justify-center overflow-hidden whitespace-nowrap rounded-full border",
+    APPEARANCE_CLASSNAME[appearance],
+    APPEARANCE_COLOR_CLASSNAME[appearance][color],
     {
-      [`border ${getOutlineColorShadeClasses(color)}`]: outline,
-      [`border-none font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,
-      [`border-none ${getColorShadeClasses(color)}`]: !outline && !subtle,
-      "h-4 min-w-0 py-0 px-1 text-xs": small,
+      "h-4 min-w-0 px-1 py-0 text-xs": small,
       "h-2 w-2 min-w-0": compact,
-      "font-bold": outline || !subtle,
+      "font-bold": appearance !== "subtle",
       "text-sm": !small,
-      "h-5 py-0 px-1.5": !compact && !small,
       // custom padding keeps single digits in a perfect circle
+      "h-5 px-1.5 py-0": !compact && !small,
       "!bg-gray-700": compact && isTransparent
     },
     props.className
@@ -37,7 +47,7 @@ const Badge = React.forwardRef(function Badge2(props, ref) {
     }
     const contentToRender = typeof children === "string" ? /* @__PURE__ */ React.createElement("span", { className: "items-center truncate" }, children) : children;
     if (status) {
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: cn("mr-1 h-2 w-2 shrink-0 rounded-full", getColorShadeClasses(color)) }), contentToRender);
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: cn("mr-1 h-2 w-2 shrink-0 rounded-full", COLOR_SHADE_CLASSNAME[color]) }), contentToRender);
     }
     return contentToRender;
   };

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { Color } from '../../types';\nimport { getSubtleColorShadeClasses, getColorShadeClasses, getOutlineColorShadeClasses } from '../../utils/tailwind';\nimport './Badge.css';\n\nexport type BadgeBaseProps = React.HTMLAttributes<HTMLSpanElement> & {\n    /** Content should be a numerical value or tag/status like text **/\n    children: React.ReactNode;\n    /** Show small version of badge **/\n    small?: boolean;\n    /** Background color **/\n    color?: Color;\n};\n\ninterface CompactBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: boolean;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: never;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface OutlineBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: boolean;\n    /** Show subtle version **/\n    subtle?: never;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface SubtleBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface StatusBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: boolean;\n}\n\nexport type BadgeProps = CompactBadgeProps | OutlineBadgeProps | SubtleBadgeProps | StatusBadgeProps;\n\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\n    const {\n        children,\n        compact = false,\n        outline = false,\n        status = false,\n        subtle = false,\n        small = false,\n        color,\n        ...otherProps\n    } = props;\n    const isTransparent = color === 'transparent';\n    const className = cn(\n        'rounded-full border box-border overflow-hidden whitespace-nowrap inline-flex items-center justify-center',\n        {\n            [`border ${getOutlineColorShadeClasses(color)}`]: outline,\n            [`border-none font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,\n            [`border-none ${getColorShadeClasses(color)}`]: !outline && !subtle,\n            'h-4 min-w-0 py-0 px-1 text-xs': small,\n            'h-2 w-2 min-w-0': compact,\n            'font-bold': outline || !subtle,\n            'text-sm': !small,\n            'h-5 py-0 px-1.5': !compact && !small, // custom padding keeps single digits in a perfect circle\n            '!bg-gray-700': compact && isTransparent,\n        },\n        props.className\n    );\n\n    const content = () => {\n        if (compact) {\n            return <VisuallyHidden>{children}</VisuallyHidden>;\n        }\n\n        const contentToRender =\n            typeof children === 'string' ? <span className=\"items-center truncate\">{children}</span> : children;\n\n        if (status) {\n            return (\n                <>\n                    <div className={cn('mr-1 h-2 w-2 shrink-0 rounded-full', getColorShadeClasses(color))} />\n                    {contentToRender}\n                </>\n            );\n        }\n        return contentToRender;\n    };\n\n    return (\n        <span {...otherProps} className={className} data-taco=\"badge\" ref={ref} role=\"status\" title={props['aria-label']}>\n            {content()}\n        </span>\n    );\n});\n"],"names":["Badge"],"mappings":";;;;;AA8DO,MAAM,QAAQ,MAAM,WAAW,SAASA,OAAM,OAAmB,KAAiC;AAC/F,QAAA;AAAA,IACF;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,gBAAgB,UAAU;AAChC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,CAAC,UAAU,4BAA4B,KAAK,CAAC,EAAE,GAAG;AAAA,MAClD,CAAC,2BAA2B,2BAA2B,KAAK,CAAC,EAAE,GAAG;AAAA,MAClE,CAAC,eAAe,qBAAqB,KAAK,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC;AAAA,MAC7D,iCAAiC;AAAA,MACjC,mBAAmB;AAAA,MACnB,aAAa,WAAW,CAAC;AAAA,MACzB,WAAW,CAAC;AAAA,MACZ,mBAAmB,CAAC,WAAW,CAAC;AAAA;AAAA,MAChC,gBAAgB,WAAW;AAAA,IAC/B;AAAA,IACA,MAAM;AAAA,EACV;AAEA,QAAM,UAAU,MAAM;AAClB,QAAI,SAAS;AACF,aAAA,sBAAA,cAAC,sBAAgB,QAAS;AAAA,IAAA;AAG/B,UAAA,kBACF,OAAO,aAAa,+CAAY,QAAK,EAAA,WAAU,2BAAyB,QAAS,IAAU;AAE/F,QAAI,QAAQ;AAEJ,aAAA,sBAAA,cAAA,MAAA,UAAA,MACK,sBAAA,cAAA,OAAA,EAAI,WAAW,GAAG,sCAAsC,qBAAqB,KAAK,CAAC,EAAG,CAAA,GACtF,eACL;AAAA,IAAA;AAGD,WAAA;AAAA,EACX;AAEA,SACK,sBAAA,cAAA,QAAA,EAAM,GAAG,YAAY,WAAsB,aAAU,SAAQ,KAAU,MAAK,UAAS,OAAO,MAAM,YAAY,EAAA,GAC1G,SACL;AAER,CAAC;"}
+{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { Color } from '../../types';\nimport { SUBTLE_COLOR_SHADE_CLASSNAME, COLOR_SHADE_CLASSNAME, OUTLINE_COLOR_SHADE_CLASSNAME } from '../../utils/tailwind';\nimport './Badge.css';\n\nexport type BadgeBaseProps = React.HTMLAttributes<HTMLSpanElement> & {\n    /** Content should be a numerical value or tag/status like text **/\n    children: React.ReactNode;\n    /** Show small version of badge **/\n    small?: boolean;\n    /** Background color **/\n    color?: Color;\n};\n\ninterface CompactBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: boolean;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: never;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface OutlineBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: boolean;\n    /** Show subtle version **/\n    subtle?: never;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface SubtleBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface StatusBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: boolean;\n}\n\nexport type BadgeProps = CompactBadgeProps | OutlineBadgeProps | SubtleBadgeProps | StatusBadgeProps;\n\ntype BadgeAppearance = 'solid' | 'outline' | 'subtle';\n\nconst APPEARANCE_CLASSNAME: Record<BadgeAppearance, string> = {\n    solid: 'border-none',\n    outline: 'border',\n    subtle: 'border-none font-normal',\n};\n\nconst APPEARANCE_COLOR_CLASSNAME: Record<BadgeAppearance, Record<Color, string>> = {\n    solid: COLOR_SHADE_CLASSNAME,\n    outline: OUTLINE_COLOR_SHADE_CLASSNAME,\n    subtle: SUBTLE_COLOR_SHADE_CLASSNAME,\n};\n\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\n    const {\n        children,\n        compact = false,\n        outline = false,\n        status = false,\n        subtle = false,\n        small = false,\n        color = 'grey',\n        ...otherProps\n    } = props;\n    const isTransparent = color === 'transparent';\n    const appearance: BadgeAppearance = outline ? 'outline' : subtle ? 'subtle' : 'solid';\n    const className = cn(\n        'box-border inline-flex items-center justify-center overflow-hidden whitespace-nowrap rounded-full border',\n        APPEARANCE_CLASSNAME[appearance],\n        APPEARANCE_COLOR_CLASSNAME[appearance][color],\n        {\n            'h-4 min-w-0 px-1 py-0 text-xs': small,\n            'h-2 w-2 min-w-0': compact,\n            'font-bold': appearance !== 'subtle',\n            'text-sm': !small,\n            // custom padding keeps single digits in a perfect circle\n            'h-5 px-1.5 py-0': !compact && !small,\n            '!bg-gray-700': compact && isTransparent,\n        },\n        props.className\n    );\n\n    const content = () => {\n        if (compact) {\n            return <VisuallyHidden>{children}</VisuallyHidden>;\n        }\n\n        const contentToRender =\n            typeof children === 'string' ? <span className=\"items-center truncate\">{children}</span> : children;\n\n        if (status) {\n            return (\n                <>\n                    <div className={cn('mr-1 h-2 w-2 shrink-0 rounded-full', COLOR_SHADE_CLASSNAME[color])} />\n                    {contentToRender}\n                </>\n            );\n        }\n        return contentToRender;\n    };\n\n    return (\n        <span {...otherProps} className={className} data-taco=\"badge\" ref={ref} role=\"status\" title={props['aria-label']}>\n            {content()}\n        </span>\n    );\n});\n"],"names":["Badge"],"mappings":";;;;;AAgEA,MAAM,uBAAwD;AAAA,EAC1D,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AACZ;AAEA,MAAM,6BAA6E;AAAA,EAC/E,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AACZ;AAEO,MAAM,QAAQ,MAAM,WAAW,SAASA,OAAM,OAAmB,KAAiC;AACrG,QAAM;AAAA,IACF;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,gBAAgB,UAAU;AAChC,QAAM,aAA8B,UAAU,YAAY,SAAS,WAAW;AAC9E,QAAM,YAAY;AAAA,IACd;AAAA,IACA,qBAAqB,UAAU;AAAA,IAC/B,2BAA2B,UAAU,EAAE,KAAK;AAAA,IAC5C;AAAA,MACI,iCAAiC;AAAA,MACjC,mBAAmB;AAAA,MACnB,aAAa,eAAe;AAAA,MAC5B,WAAW,CAAC;AAAA;AAAA,MAEZ,mBAAmB,CAAC,WAAW,CAAC;AAAA,MAChC,gBAAgB,WAAW;AAAA,IAAA;AAAA,IAE/B,MAAM;AAAA,EAAA;AAGV,QAAM,UAAU,MAAM;AAClB,QAAI,SAAS;AACT,aAAO,sBAAA,cAAC,sBAAgB,QAAS;AAAA,IACrC;AAEA,UAAM,kBACF,OAAO,aAAa,+CAAY,QAAA,EAAK,WAAU,2BAAyB,QAAS,IAAU;AAE/F,QAAI,QAAQ;AACR,aACI,sBAAA,cAAA,MAAA,UAAA,MACI,sBAAA,cAAC,OAAA,EAAI,WAAW,GAAG,sCAAsC,sBAAsB,KAAK,CAAC,EAAA,CAAG,GACvF,eACL;AAAA,IAER;AACA,WAAO;AAAA,EACX;AAEA,SACI,sBAAA,cAAC,QAAA,EAAM,GAAG,YAAY,WAAsB,aAAU,SAAQ,KAAU,MAAK,UAAS,OAAO,MAAM,YAAY,EAAA,GAC1G,SACL;AAER,CAAC;"}

package/dist/components/BadgeIcon/BadgeIcon.cjs

@@ -21,13 +21,18 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const APPEARANCE_COLOR_CLASSNAME = {
+  solid: tailwind.COLOR_SHADE_CLASSNAME,
+  subtle: tailwind.SUBTLE_COLOR_SHADE_CLASSNAME
+};
 const BadgeIcon = React__namespace.forwardRef(function Badge(props, ref) {
-  const { color, icon, subtle, small, ...otherProps } = props;
+  const { color = "grey", icon, subtle, small, ...otherProps } = props;
+  const appearance = subtle ? "subtle" : "solid";
   const className = cn(
-    `rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center border-transparent [&>*]:max-h-full shrink-0`,
-    { "w-5 h-5": !small },
-    { "w-4 h-4 text-xs": small },
-    { [tailwind.getSubtleColorShadeClasses(color)]: subtle, [tailwind.getColorShadeClasses(color)]: !subtle },
+    `inline-flex shrink-0 items-center justify-center overflow-hidden whitespace-nowrap rounded-full border border-transparent [&>*]:max-h-full`,
+    { "h-5 w-5": !small },
+    { "h-4 w-4 text-xs": small },
+    APPEARANCE_COLOR_CLASSNAME[appearance][color],
     props.className
   );
   const iconProps = {

package/dist/components/BadgeIcon/BadgeIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeIcon.cjs","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { getSubtleColorShadeClasses, getColorShadeClasses } from '../../utils/tailwind';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { Color } from '../../types';\n\nexport type BadgeIconProps = React.HTMLAttributes<HTMLSpanElement> & {\n    /** Icon type **/\n    icon: IconName;\n    /** Background color **/\n    color?: Color;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show small version of badge icon **/\n    small?: boolean;\n};\n\nexport const BadgeIcon = React.forwardRef(function Badge(props: BadgeIconProps, ref: React.Ref<HTMLSpanElement>) {\n    const { color, icon, subtle, small, ...otherProps } = props;\n\n    const className = cn(\n        `rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center border-transparent [&>*]:max-h-full shrink-0`,\n        { 'w-5 h-5': !small },\n        { 'w-4 h-4 text-xs': small },\n        { [getSubtleColorShadeClasses(color)]: subtle, [getColorShadeClasses(color)]: !subtle },\n        props.className\n    );\n\n    const iconProps = {\n        strokeWidth: 1,\n        stroke: 'currentColor',\n    };\n\n    return (\n        <span\n            {...otherProps}\n            aria-label=\"icon\"\n            className={className}\n            data-taco=\"badge-icon\"\n            ref={ref}\n            role=\"status\"\n            title={props['aria-label']}>\n            <Icon name={icon} {...iconProps} />\n        </span>\n    );\n});\n"],"names":["React","getSubtleColorShadeClasses","getColorShadeClasses","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAM,YAAYA,iBAAM,WAAW,SAAS,MAAM,OAAuB,KAAiC;AAC7G,QAAM,EAAE,OAAO,MAAM,QAAQ,OAAO,GAAG,eAAe;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,EAAE,WAAW,CAAC,MAAM;AAAA,IACpB,EAAE,mBAAmB,MAAM;AAAA,IAC3B,EAAE,CAACC,SAAAA,2BAA2B,KAAK,CAAC,GAAG,QAAQ,CAACC,8BAAqB,KAAK,CAAC,GAAG,CAAC,OAAO;AAAA,IACtF,MAAM;AAAA,EACV;AAEA,QAAM,YAAY;AAAA,IACd,aAAa;AAAA,IACb,QAAQ;AAAA,EACZ;AAGI,SAAAF,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAW;AAAA,MACX;AAAA,MACA,aAAU;AAAA,MACV;AAAA,MACA,MAAK;AAAA,MACL,OAAO,MAAM,YAAY;AAAA,IAAA;AAAA,IACxBA,iCAAA,cAAAG,KAAA,MAAA,EAAK,MAAM,MAAO,GAAG,UAAW,CAAA;AAAA,EACrC;AAER,CAAC;;"}
+{"version":3,"file":"BadgeIcon.cjs","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { SUBTLE_COLOR_SHADE_CLASSNAME, COLOR_SHADE_CLASSNAME } from '../../utils/tailwind';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { Color } from '../../types';\n\ntype BadgeIconAppearance = 'solid' | 'subtle';\n\nconst APPEARANCE_COLOR_CLASSNAME: Record<BadgeIconAppearance, Record<Color, string>> = {\n    solid: COLOR_SHADE_CLASSNAME,\n    subtle: SUBTLE_COLOR_SHADE_CLASSNAME,\n};\n\nexport type BadgeIconProps = React.HTMLAttributes<HTMLSpanElement> & {\n    /** Icon type **/\n    icon: IconName;\n    /** Background color **/\n    color?: Color;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show small version of badge icon **/\n    small?: boolean;\n};\n\nexport const BadgeIcon = React.forwardRef(function Badge(props: BadgeIconProps, ref: React.Ref<HTMLSpanElement>) {\n    const { color = 'grey', icon, subtle, small, ...otherProps } = props;\n\n    const appearance: BadgeIconAppearance = subtle ? 'subtle' : 'solid';\n\n    const className = cn(\n        `inline-flex shrink-0 items-center justify-center overflow-hidden whitespace-nowrap rounded-full border border-transparent [&>*]:max-h-full`,\n        { 'h-5 w-5': !small },\n        { 'h-4 w-4 text-xs': small },\n        APPEARANCE_COLOR_CLASSNAME[appearance][color],\n        props.className\n    );\n\n    const iconProps = {\n        strokeWidth: 1,\n        stroke: 'currentColor',\n    };\n\n    return (\n        <span\n            {...otherProps}\n            aria-label=\"icon\"\n            className={className}\n            data-taco=\"badge-icon\"\n            ref={ref}\n            role=\"status\"\n            title={props['aria-label']}>\n            <Icon name={icon} {...iconProps} />\n        </span>\n    );\n});\n"],"names":["COLOR_SHADE_CLASSNAME","SUBTLE_COLOR_SHADE_CLASSNAME","React","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,6BAAiF;AAAA,EACnF,OAAOA,SAAAA;AAAAA,EACP,QAAQC,SAAAA;AACZ;AAaO,MAAM,YAAYC,iBAAM,WAAW,SAAS,MAAM,OAAuB,KAAiC;AAC7G,QAAM,EAAE,QAAQ,QAAQ,MAAM,QAAQ,OAAO,GAAG,eAAe;AAE/D,QAAM,aAAkC,SAAS,WAAW;AAE5D,QAAM,YAAY;AAAA,IACd;AAAA,IACA,EAAE,WAAW,CAAC,MAAA;AAAA,IACd,EAAE,mBAAmB,MAAA;AAAA,IACrB,2BAA2B,UAAU,EAAE,KAAK;AAAA,IAC5C,MAAM;AAAA,EAAA;AAGV,QAAM,YAAY;AAAA,IACd,aAAa;AAAA,IACb,QAAQ;AAAA,EAAA;AAGZ,SACIA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAW;AAAA,MACX;AAAA,MACA,aAAU;AAAA,MACV;AAAA,MACA,MAAK;AAAA,MACL,OAAO,MAAM,YAAY;AAAA,IAAA;AAAA,IACzBA,iCAAA,cAACC,KAAAA,MAAA,EAAK,MAAM,MAAO,GAAG,UAAA,CAAW;AAAA,EAAA;AAG7C,CAAC;;"}

package/dist/components/BadgeIcon/BadgeIcon.js

@@ -1,14 +1,19 @@
 import * as React from "react";
 import cn from "clsx";
-import { getColorShadeClasses, getSubtleColorShadeClasses } from "../../utils/tailwind.js";
+import { SUBTLE_COLOR_SHADE_CLASSNAME, COLOR_SHADE_CLASSNAME } from "../../utils/tailwind.js";
 import { Icon } from "../Icon/Icon.js";
+const APPEARANCE_COLOR_CLASSNAME = {
+  solid: COLOR_SHADE_CLASSNAME,
+  subtle: SUBTLE_COLOR_SHADE_CLASSNAME
+};
 const BadgeIcon = React.forwardRef(function Badge(props, ref) {
-  const { color, icon, subtle, small, ...otherProps } = props;
+  const { color = "grey", icon, subtle, small, ...otherProps } = props;
+  const appearance = subtle ? "subtle" : "solid";
   const className = cn(
-    `rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center border-transparent [&>*]:max-h-full shrink-0`,
-    { "w-5 h-5": !small },
-    { "w-4 h-4 text-xs": small },
-    { [getSubtleColorShadeClasses(color)]: subtle, [getColorShadeClasses(color)]: !subtle },
+    `inline-flex shrink-0 items-center justify-center overflow-hidden whitespace-nowrap rounded-full border border-transparent [&>*]:max-h-full`,
+    { "h-5 w-5": !small },
+    { "h-4 w-4 text-xs": small },
+    APPEARANCE_COLOR_CLASSNAME[appearance][color],
     props.className
   );
   const iconProps = {

package/dist/components/BadgeIcon/BadgeIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeIcon.js","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { getSubtleColorShadeClasses, getColorShadeClasses } from '../../utils/tailwind';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { Color } from '../../types';\n\nexport type BadgeIconProps = React.HTMLAttributes<HTMLSpanElement> & {\n    /** Icon type **/\n    icon: IconName;\n    /** Background color **/\n    color?: Color;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show small version of badge icon **/\n    small?: boolean;\n};\n\nexport const BadgeIcon = React.forwardRef(function Badge(props: BadgeIconProps, ref: React.Ref<HTMLSpanElement>) {\n    const { color, icon, subtle, small, ...otherProps } = props;\n\n    const className = cn(\n        `rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center border-transparent [&>*]:max-h-full shrink-0`,\n        { 'w-5 h-5': !small },\n        { 'w-4 h-4 text-xs': small },\n        { [getSubtleColorShadeClasses(color)]: subtle, [getColorShadeClasses(color)]: !subtle },\n        props.className\n    );\n\n    const iconProps = {\n        strokeWidth: 1,\n        stroke: 'currentColor',\n    };\n\n    return (\n        <span\n            {...otherProps}\n            aria-label=\"icon\"\n            className={className}\n            data-taco=\"badge-icon\"\n            ref={ref}\n            role=\"status\"\n            title={props['aria-label']}>\n            <Icon name={icon} {...iconProps} />\n        </span>\n    );\n});\n"],"names":[],"mappings":";;;;AAiBO,MAAM,YAAY,MAAM,WAAW,SAAS,MAAM,OAAuB,KAAiC;AAC7G,QAAM,EAAE,OAAO,MAAM,QAAQ,OAAO,GAAG,eAAe;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,EAAE,WAAW,CAAC,MAAM;AAAA,IACpB,EAAE,mBAAmB,MAAM;AAAA,IAC3B,EAAE,CAAC,2BAA2B,KAAK,CAAC,GAAG,QAAQ,CAAC,qBAAqB,KAAK,CAAC,GAAG,CAAC,OAAO;AAAA,IACtF,MAAM;AAAA,EACV;AAEA,QAAM,YAAY;AAAA,IACd,aAAa;AAAA,IACb,QAAQ;AAAA,EACZ;AAGI,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAW;AAAA,MACX;AAAA,MACA,aAAU;AAAA,MACV;AAAA,MACA,MAAK;AAAA,MACL,OAAO,MAAM,YAAY;AAAA,IAAA;AAAA,IACxB,sBAAA,cAAA,MAAA,EAAK,MAAM,MAAO,GAAG,UAAW,CAAA;AAAA,EACrC;AAER,CAAC;"}
+{"version":3,"file":"BadgeIcon.js","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { SUBTLE_COLOR_SHADE_CLASSNAME, COLOR_SHADE_CLASSNAME } from '../../utils/tailwind';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { Color } from '../../types';\n\ntype BadgeIconAppearance = 'solid' | 'subtle';\n\nconst APPEARANCE_COLOR_CLASSNAME: Record<BadgeIconAppearance, Record<Color, string>> = {\n    solid: COLOR_SHADE_CLASSNAME,\n    subtle: SUBTLE_COLOR_SHADE_CLASSNAME,\n};\n\nexport type BadgeIconProps = React.HTMLAttributes<HTMLSpanElement> & {\n    /** Icon type **/\n    icon: IconName;\n    /** Background color **/\n    color?: Color;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show small version of badge icon **/\n    small?: boolean;\n};\n\nexport const BadgeIcon = React.forwardRef(function Badge(props: BadgeIconProps, ref: React.Ref<HTMLSpanElement>) {\n    const { color = 'grey', icon, subtle, small, ...otherProps } = props;\n\n    const appearance: BadgeIconAppearance = subtle ? 'subtle' : 'solid';\n\n    const className = cn(\n        `inline-flex shrink-0 items-center justify-center overflow-hidden whitespace-nowrap rounded-full border border-transparent [&>*]:max-h-full`,\n        { 'h-5 w-5': !small },\n        { 'h-4 w-4 text-xs': small },\n        APPEARANCE_COLOR_CLASSNAME[appearance][color],\n        props.className\n    );\n\n    const iconProps = {\n        strokeWidth: 1,\n        stroke: 'currentColor',\n    };\n\n    return (\n        <span\n            {...otherProps}\n            aria-label=\"icon\"\n            className={className}\n            data-taco=\"badge-icon\"\n            ref={ref}\n            role=\"status\"\n            title={props['aria-label']}>\n            <Icon name={icon} {...iconProps} />\n        </span>\n    );\n});\n"],"names":[],"mappings":";;;;AAQA,MAAM,6BAAiF;AAAA,EACnF,OAAO;AAAA,EACP,QAAQ;AACZ;AAaO,MAAM,YAAY,MAAM,WAAW,SAAS,MAAM,OAAuB,KAAiC;AAC7G,QAAM,EAAE,QAAQ,QAAQ,MAAM,QAAQ,OAAO,GAAG,eAAe;AAE/D,QAAM,aAAkC,SAAS,WAAW;AAE5D,QAAM,YAAY;AAAA,IACd;AAAA,IACA,EAAE,WAAW,CAAC,MAAA;AAAA,IACd,EAAE,mBAAmB,MAAA;AAAA,IACrB,2BAA2B,UAAU,EAAE,KAAK;AAAA,IAC5C,MAAM;AAAA,EAAA;AAGV,QAAM,YAAY;AAAA,IACd,aAAa;AAAA,IACb,QAAQ;AAAA,EAAA;AAGZ,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAW;AAAA,MACX;AAAA,MACA,aAAU;AAAA,MACV;AAAA,MACA,MAAK;AAAA,MACL,OAAO,MAAM,YAAY;AAAA,IAAA;AAAA,IACzB,sBAAA,cAAC,MAAA,EAAK,MAAM,MAAO,GAAG,UAAA,CAAW;AAAA,EAAA;AAG7C,CAAC;"}

package/dist/components/Banner/Banner.cjs

@@ -25,7 +25,7 @@ const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const Banner = React__namespace.forwardRef(function Banner2(props, ref) {
   const { children, state, onClose } = props;
   const { texts } = Localization.useLocalization();
-  const className = cn("bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10", props.className);
+  const className = cn("relative z-10 flex items-center gap-2 bg-white px-4 py-2 leading-6 shadow-md", props.className);
   return /* @__PURE__ */ React__namespace.createElement("div", { className, "data-taco": "banner", ref }, util.getBannerIcon(state), children, onClose ? /* @__PURE__ */ React__namespace.createElement(
     IconButton.LegacyIconButton,
     {

package/dist/components/Banner/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.cjs","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Content can be any react element, for e.g. a `div` */\n    children: React.ReactNode;\n    /** State will change the icon displayed in banner */\n    state: State;\n    onClose?: () => void;\n};\n\nexport type BannerTexts = {\n    /** Aria-label for the close icon button of banner */\n    close: string;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, state, onClose } = props;\n    const { texts } = useLocalization();\n    const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);\n\n    return (\n        <div className={className} data-taco=\"banner\" ref={ref}>\n            {getBannerIcon(state)}\n            {children}\n            {onClose ? (\n                <LegacyIconButton\n                    aria-label={texts.banner.close}\n                    className=\"-mr-2 ml-auto self-start\"\n                    icon=\"close\"\n                    appearance=\"discrete\"\n                    onClick={onClose}\n                />\n            ) : null}\n        </div>\n    );\n});\n"],"names":["React","Banner","useLocalization","getBannerIcon","LegacyIconButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,SAASA,iBAAM,WAAW,SAASC,QAAO,OAAoB,KAAgC;AACvG,QAAM,EAAE,UAAU,OAAO,QAAY,IAAA;AAC/B,QAAA,EAAE,MAAM,IAAIC,6BAAgB;AAClC,QAAM,YAAY,GAAG,gFAAgF,MAAM,SAAS;AAGhH,SAAAF,iCAAA,cAAC,OAAI,EAAA,WAAsB,aAAU,UAAS,OACzCG,KAAAA,cAAc,KAAK,GACnB,UACA,UACGH,iCAAA;AAAA,IAACI,WAAA;AAAA,IAAA;AAAA,MACG,cAAY,MAAM,OAAO;AAAA,MACzB,WAAU;AAAA,MACV,MAAK;AAAA,MACL,YAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,MAEb,IACR;AAER,CAAC;;"}
+{"version":3,"file":"Banner.cjs","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Content can be any react element, for e.g. a `div` */\n    children: React.ReactNode;\n    /** State will change the icon displayed in banner */\n    state: State;\n    onClose?: () => void;\n};\n\nexport type BannerTexts = {\n    /** Aria-label for the close icon button of banner */\n    close: string;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, state, onClose } = props;\n    const { texts } = useLocalization();\n    const className = cn('relative z-10 flex items-center gap-2 bg-white px-4 py-2 leading-6 shadow-md', props.className);\n\n    return (\n        <div className={className} data-taco=\"banner\" ref={ref}>\n            {getBannerIcon(state)}\n            {children}\n            {onClose ? (\n                <LegacyIconButton\n                    aria-label={texts.banner.close}\n                    className=\"-mr-2 ml-auto self-start\"\n                    icon=\"close\"\n                    appearance=\"discrete\"\n                    onClick={onClose}\n                />\n            ) : null}\n        </div>\n    );\n});\n"],"names":["React","Banner","useLocalization","getBannerIcon","LegacyIconButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,SAASA,iBAAM,WAAW,SAASC,QAAO,OAAoB,KAAgC;AACvG,QAAM,EAAE,UAAU,OAAO,QAAA,IAAY;AACrC,QAAM,EAAE,MAAA,IAAUC,6BAAA;AAClB,QAAM,YAAY,GAAG,gFAAgF,MAAM,SAAS;AAEpH,SACIF,iCAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,UAAS,OACzCG,KAAAA,cAAc,KAAK,GACnB,UACA,UACGH,iCAAA;AAAA,IAACI,WAAAA;AAAAA,IAAA;AAAA,MACG,cAAY,MAAM,OAAO;AAAA,MACzB,WAAU;AAAA,MACV,MAAK;AAAA,MACL,YAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAAA,IAEb,IACR;AAER,CAAC;;"}

package/dist/components/Banner/Banner.js

@@ -6,7 +6,7 @@ import { useLocalization } from "../Provider/Localization.js";
 const Banner = React.forwardRef(function Banner2(props, ref) {
   const { children, state, onClose } = props;
   const { texts } = useLocalization();
-  const className = cn("bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10", props.className);
+  const className = cn("relative z-10 flex items-center gap-2 bg-white px-4 py-2 leading-6 shadow-md", props.className);
   return /* @__PURE__ */ React.createElement("div", { className, "data-taco": "banner", ref }, getBannerIcon(state), children, onClose ? /* @__PURE__ */ React.createElement(
     LegacyIconButton,
     {

package/dist/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Content can be any react element, for e.g. a `div` */\n    children: React.ReactNode;\n    /** State will change the icon displayed in banner */\n    state: State;\n    onClose?: () => void;\n};\n\nexport type BannerTexts = {\n    /** Aria-label for the close icon button of banner */\n    close: string;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, state, onClose } = props;\n    const { texts } = useLocalization();\n    const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);\n\n    return (\n        <div className={className} data-taco=\"banner\" ref={ref}>\n            {getBannerIcon(state)}\n            {children}\n            {onClose ? (\n                <LegacyIconButton\n                    aria-label={texts.banner.close}\n                    className=\"-mr-2 ml-auto self-start\"\n                    icon=\"close\"\n                    appearance=\"discrete\"\n                    onClick={onClose}\n                />\n            ) : null}\n        </div>\n    );\n});\n"],"names":["Banner"],"mappings":";;;;;AAoBO,MAAM,SAAS,MAAM,WAAW,SAASA,QAAO,OAAoB,KAAgC;AACvG,QAAM,EAAE,UAAU,OAAO,QAAY,IAAA;AAC/B,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,YAAY,GAAG,gFAAgF,MAAM,SAAS;AAGhH,SAAA,sBAAA,cAAC,OAAI,EAAA,WAAsB,aAAU,UAAS,OACzC,cAAc,KAAK,GACnB,UACA,UACG,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAY,MAAM,OAAO;AAAA,MACzB,WAAU;AAAA,MACV,MAAK;AAAA,MACL,YAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,MAEb,IACR;AAER,CAAC;"}
+{"version":3,"file":"Banner.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Content can be any react element, for e.g. a `div` */\n    children: React.ReactNode;\n    /** State will change the icon displayed in banner */\n    state: State;\n    onClose?: () => void;\n};\n\nexport type BannerTexts = {\n    /** Aria-label for the close icon button of banner */\n    close: string;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, state, onClose } = props;\n    const { texts } = useLocalization();\n    const className = cn('relative z-10 flex items-center gap-2 bg-white px-4 py-2 leading-6 shadow-md', props.className);\n\n    return (\n        <div className={className} data-taco=\"banner\" ref={ref}>\n            {getBannerIcon(state)}\n            {children}\n            {onClose ? (\n                <LegacyIconButton\n                    aria-label={texts.banner.close}\n                    className=\"-mr-2 ml-auto self-start\"\n                    icon=\"close\"\n                    appearance=\"discrete\"\n                    onClick={onClose}\n                />\n            ) : null}\n        </div>\n    );\n});\n"],"names":["Banner"],"mappings":";;;;;AAoBO,MAAM,SAAS,MAAM,WAAW,SAASA,QAAO,OAAoB,KAAgC;AACvG,QAAM,EAAE,UAAU,OAAO,QAAA,IAAY;AACrC,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,YAAY,GAAG,gFAAgF,MAAM,SAAS;AAEpH,SACI,sBAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,UAAS,OACzC,cAAc,KAAK,GACnB,UACA,UACG,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAY,MAAM,OAAO;AAAA,MACzB,WAAU;AAAA,MACV,MAAK;AAAA,MACL,YAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAAA,IAEb,IACR;AAER,CAAC;"}

package/dist/components/Banner/util.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"util.cjs","sources":["../../../src/components/Banner/util.tsx"],"sourcesContent":["import React from 'react';\nimport { State } from '../../types';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\n\nexport const getBannerIcon = (type: State): JSX.Element | null => {\n    return (\n        <div className=\"mt-[5px] self-start\">\n            {(() => {\n                switch (type) {\n                    case 'success':\n                        return <BadgeIcon icon=\"tick\" color=\"green\" />;\n                    case 'error':\n                        return <BadgeIcon icon=\"close\" color=\"red\" />;\n                    case 'experiment':\n                        return <BadgeIcon icon=\"experiment\" color=\"purple\" />;\n                    case 'warning':\n                        return <BadgeIcon icon=\"warning\" color=\"yellow\" />;\n                    case 'information':\n                        return <BadgeIcon icon=\"info\" color=\"blue\" />;\n                    default:\n                        return null;\n                }\n            })()}\n        </div>\n    );\n};\n"],"names":["BadgeIcon"],"mappings":";;;;AAIa,MAAA,gBAAgB,CAAC,SAAoC;AAC9D,SACK,sBAAA,cAAA,OAAA,EAAI,WAAU,sBAAA,IACT,MAAM;AACJ,YAAQ,MAAM;AAAA,MACV,KAAK;AACD,eAAQ,sBAAA,cAAAA,qBAAA,EAAU,MAAK,QAAO,OAAM,SAAQ;AAAA,MAChD,KAAK;AACD,eAAQ,sBAAA,cAAAA,qBAAA,EAAU,MAAK,SAAQ,OAAM,OAAM;AAAA,MAC/C,KAAK;AACD,eAAQ,sBAAA,cAAAA,qBAAA,EAAU,MAAK,cAAa,OAAM,UAAS;AAAA,MACvD,KAAK;AACD,eAAQ,sBAAA,cAAAA,qBAAA,EAAU,MAAK,WAAU,OAAM,UAAS;AAAA,MACpD,KAAK;AACD,eAAQ,sBAAA,cAAAA,qBAAA,EAAU,MAAK,QAAO,OAAM,QAAO;AAAA,MAC/C;AACW,eAAA;AAAA,IAAA;AAAA,EACf,IAER;AAER;;"}
+{"version":3,"file":"util.cjs","sources":["../../../src/components/Banner/util.tsx"],"sourcesContent":["import React from 'react';\nimport { State } from '../../types';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\n\nexport const getBannerIcon = (type: State): React.JSX.Element | null => {\n    return (\n        <div className=\"mt-[5px] self-start\">\n            {(() => {\n                switch (type) {\n                    case 'success':\n                        return <BadgeIcon icon=\"tick\" color=\"green\" />;\n                    case 'error':\n                        return <BadgeIcon icon=\"close\" color=\"red\" />;\n                    case 'experiment':\n                        return <BadgeIcon icon=\"experiment\" color=\"purple\" />;\n                    case 'warning':\n                        return <BadgeIcon icon=\"warning\" color=\"yellow\" />;\n                    case 'information':\n                        return <BadgeIcon icon=\"info\" color=\"blue\" />;\n                    default:\n                        return null;\n                }\n            })()}\n        </div>\n    );\n};\n"],"names":["BadgeIcon"],"mappings":";;;;AAIO,MAAM,gBAAgB,CAAC,SAA0C;AACpE,SACI,sBAAA,cAAC,OAAA,EAAI,WAAU,sBAAA,IACT,MAAM;AACJ,YAAQ,MAAA;AAAA,MACJ,KAAK;AACD,eAAO,sBAAA,cAACA,qBAAA,EAAU,MAAK,QAAO,OAAM,SAAQ;AAAA,MAChD,KAAK;AACD,eAAO,sBAAA,cAACA,qBAAA,EAAU,MAAK,SAAQ,OAAM,OAAM;AAAA,MAC/C,KAAK;AACD,eAAO,sBAAA,cAACA,qBAAA,EAAU,MAAK,cAAa,OAAM,UAAS;AAAA,MACvD,KAAK;AACD,eAAO,sBAAA,cAACA,qBAAA,EAAU,MAAK,WAAU,OAAM,UAAS;AAAA,MACpD,KAAK;AACD,eAAO,sBAAA,cAACA,qBAAA,EAAU,MAAK,QAAO,OAAM,QAAO;AAAA,MAC/C;AACI,eAAO;AAAA,IAAA;AAAA,EAEnB,IACJ;AAER;;"}

package/dist/components/Banner/util.d.ts

@@ -1,2 +1,3 @@
+import { default as React } from 'react';
 import { State } from '../../types';
-export declare const getBannerIcon: (type: State) => JSX.Element | null;
+export declare const getBannerIcon: (type: State) => React.JSX.Element | null;

package/dist/components/Banner/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../src/components/Banner/util.tsx"],"sourcesContent":["import React from 'react';\nimport { State } from '../../types';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\n\nexport const getBannerIcon = (type: State): JSX.Element | null => {\n    return (\n        <div className=\"mt-[5px] self-start\">\n            {(() => {\n                switch (type) {\n                    case 'success':\n                        return <BadgeIcon icon=\"tick\" color=\"green\" />;\n                    case 'error':\n                        return <BadgeIcon icon=\"close\" color=\"red\" />;\n                    case 'experiment':\n                        return <BadgeIcon icon=\"experiment\" color=\"purple\" />;\n                    case 'warning':\n                        return <BadgeIcon icon=\"warning\" color=\"yellow\" />;\n                    case 'information':\n                        return <BadgeIcon icon=\"info\" color=\"blue\" />;\n                    default:\n                        return null;\n                }\n            })()}\n        </div>\n    );\n};\n"],"names":["React"],"mappings":";;AAIa,MAAA,gBAAgB,CAAC,SAAoC;AAC9D,SACKA,+BAAA,cAAA,OAAA,EAAI,WAAU,sBAAA,IACT,MAAM;AACJ,YAAQ,MAAM;AAAA,MACV,KAAK;AACD,eAAQA,+BAAA,cAAA,WAAA,EAAU,MAAK,QAAO,OAAM,SAAQ;AAAA,MAChD,KAAK;AACD,eAAQA,+BAAA,cAAA,WAAA,EAAU,MAAK,SAAQ,OAAM,OAAM;AAAA,MAC/C,KAAK;AACD,eAAQA,+BAAA,cAAA,WAAA,EAAU,MAAK,cAAa,OAAM,UAAS;AAAA,MACvD,KAAK;AACD,eAAQA,+BAAA,cAAA,WAAA,EAAU,MAAK,WAAU,OAAM,UAAS;AAAA,MACpD,KAAK;AACD,eAAQA,+BAAA,cAAA,WAAA,EAAU,MAAK,QAAO,OAAM,QAAO;AAAA,MAC/C;AACW,eAAA;AAAA,IAAA;AAAA,EACf,IAER;AAER;"}
+{"version":3,"file":"util.js","sources":["../../../src/components/Banner/util.tsx"],"sourcesContent":["import React from 'react';\nimport { State } from '../../types';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\n\nexport const getBannerIcon = (type: State): React.JSX.Element | null => {\n    return (\n        <div className=\"mt-[5px] self-start\">\n            {(() => {\n                switch (type) {\n                    case 'success':\n                        return <BadgeIcon icon=\"tick\" color=\"green\" />;\n                    case 'error':\n                        return <BadgeIcon icon=\"close\" color=\"red\" />;\n                    case 'experiment':\n                        return <BadgeIcon icon=\"experiment\" color=\"purple\" />;\n                    case 'warning':\n                        return <BadgeIcon icon=\"warning\" color=\"yellow\" />;\n                    case 'information':\n                        return <BadgeIcon icon=\"info\" color=\"blue\" />;\n                    default:\n                        return null;\n                }\n            })()}\n        </div>\n    );\n};\n"],"names":["React"],"mappings":";;AAIO,MAAM,gBAAgB,CAAC,SAA0C;AACpE,SACIA,+BAAA,cAAC,OAAA,EAAI,WAAU,sBAAA,IACT,MAAM;AACJ,YAAQ,MAAA;AAAA,MACJ,KAAK;AACD,eAAOA,+BAAA,cAAC,WAAA,EAAU,MAAK,QAAO,OAAM,SAAQ;AAAA,MAChD,KAAK;AACD,eAAOA,+BAAA,cAAC,WAAA,EAAU,MAAK,SAAQ,OAAM,OAAM;AAAA,MAC/C,KAAK;AACD,eAAOA,+BAAA,cAAC,WAAA,EAAU,MAAK,cAAa,OAAM,UAAS;AAAA,MACvD,KAAK;AACD,eAAOA,+BAAA,cAAC,WAAA,EAAU,MAAK,WAAU,OAAM,UAAS;AAAA,MACpD,KAAK;AACD,eAAOA,+BAAA,cAAC,WAAA,EAAU,MAAK,QAAO,OAAM,QAAO;AAAA,MAC/C;AACI,eAAO;AAAA,IAAA;AAAA,EAEnB,IACJ;AAER;"}

package/dist/components/Calendar/Calendar.cjs

@@ -70,7 +70,7 @@ const Calendar = (props) => {
       setVisibleMonth(value ?? /* @__PURE__ */ new Date());
     }
   }, [value]);
-  const className = cn("flex flex-col bg-white text-xs p-2", otherProps.className);
+  const className = cn("flex flex-col bg-white p-2 text-xs", otherProps.className);
   const handleSelect = (_, date, modifiers, e) => {
     if (modifiers.outside || modifiers.disabled) {
       return;