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

package/dist/components/Actions/utils.cjs

@@ -1,46 +1,27 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const SHARED_BUTTON_CLASSNAMES = "relative inline-flex gap-1 whitespace-nowrap flex-shrink-0 items-center justify-center rounded focus-visible:yt-focus";
-const getAppearanceClasses = (variant, purpose) => {
-  if (purpose === "regular" && variant === "primary") {
-    return "bg-blue-500 text-white hover:bg-blue-700 hover:text-white aria-disabled:hover:bg-blue-500 aria-disabled:hover:text-white focus-visible:bg-blue-700 focus-visible:text-white visited:text-white border-0 disabled:bg-blue-200 disabled:cursor-not-allowed ";
+const APPEARANCE_CLASSNAME = {
+  regular: {
+    primary: "bg-blue-500 text-white hover:bg-blue-700 hover:text-white aria-disabled:hover:bg-blue-500 aria-disabled:hover:text-white focus-visible:bg-blue-700 focus-visible:text-white visited:text-white border-0 disabled:bg-blue-200 disabled:cursor-not-allowed",
+    secondary: "bg-gray-100 text-black hover:bg-gray-200 aria-disabled:hover:bg-gray-100 aria-disabled:hover:text-black focus-visible:bg-gray-200 hover:text-black focus-visible:text-black visited:text-black border-0 disabled:bg-gray-50 disabled:text-gray-300 disabled:cursor-not-allowed",
+    tertiary: "bg-white border border-gray-100 text-black hover:bg-gray-100 hover:text-black hover:border-gray-300 aria-disabled:hover:bg-white aria-disabled:hover:text-black aria-disabled:hover:border-gray-100 focus-visible:text-black focus-visible:border-gray-300 focus-visible:bg-gray-100 disabled:bg-white disabled:text-gray-300 disabled:border-gray-300 disabled:cursor-not-allowed"
+  },
+  destructive: {
+    primary: "bg-red-500 text-white hover:bg-red-700 aria-disabled:hover:bg-red-500 aria-disabled:hover:text-white focus-visible:bg-red-700 hover:text-white focus-visible:text-white border-0 disabled:bg-red-200 disabled:text-white disabled:cursor-not-allowed",
+    secondary: "bg-red-100 text-red-700 hover:bg-red-200 aria-disabled:hover:bg-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-200 hover:text-red-700 focus-visible:text-red-700 border-0 disabled:bg-red-50 disabled:text-gray-300 disabled:cursor-not-allowed",
+    tertiary: "bg-white border border-red-100 text-red-700 hover:bg-red-100 hover:border-red-200 aria-disabled:hover:bg-white aria-disabled:hover:border-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-100 focus-visible:border-red-200 disabled:bg-white disabled:border-red-100 disabled:text-gray-300 disabled:cursor-not-allowed"
   }
-  if (purpose === "regular" && variant === "secondary") {
-    return "bg-gray-100 text-black hover:bg-gray-200 aria-disabled:hover:bg-gray-100 aria-disabled:hover:text-black focus-visible:bg-gray-200 hover:text-black focus-visible:text-black visited:text-black border-0 disabled:bg-gray-50 disabled:text-gray-300 disabled:cursor-not-allowed";
-  }
-  if (purpose === "regular" && variant === "tertiary") {
-    return "bg-white border border-gray-100 text-black hover:bg-gray-100 hover:text-black hover:border-gray-300 aria-disabled:hover:bg-white aria-disabled:hover:text-black aria-disabled:hover:border-gray-100 focus-visible:text-black focus-visible:border-gray-300 focus-visible:bg-gray-100 disabled:bg-white disabled:text-gray-300 disabled:border-gray-300 disabled:cursor-not-allowed";
-  }
-  if (purpose === "destructive" && variant === "primary") {
-    return "bg-red-500 text-white hover:bg-red-700 aria-disabled:hover:bg-red-500 aria-disabled:hover:text-white focus-visible:bg-red-700 hover:text-white focus-visible:text-white border-0 disabled:bg-red-200 disabled:text-white disabled:cursor-not-allowed";
-  }
-  if (purpose === "destructive" && variant === "secondary") {
-    return "bg-red-100 text-red-700 hover:bg-red-200 aria-disabled:hover:bg-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-200 hover:text-red-700 focus-visible:text-red-700 border-0 disabled:bg-red-50 disabled:text-gray-300 disabled:cursor-not-allowed";
-  }
-  return "bg-white border border-red-100 text-red-700 hover:bg-red-100 hover:border-red-200 aria-disabled:hover:bg-white aria-disabled:hover:border-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-100 focus-visible:border-red-200 disabled:bg-white disabled:border-red-100 disabled:text-gray-300 disabled:cursor-not-allowed";
 };
 const sizeClasses = {
   sm: "h-7 text-xs",
   md: "h-8 text-sm",
   lg: "h-10 text-base"
 };
-const setPaddingClasses = (size, iconPlacement) => {
-  if (iconPlacement === "start" && size === "sm") {
-    return "ps-1 pe-2";
-  }
-  if (iconPlacement === "start" && (size === "md" || size === "lg")) {
-    return "ps-2 pe-3";
-  }
-  if (iconPlacement === "end" && size === "sm") {
-    return "ps-2 pe-1";
-  }
-  if (iconPlacement === "end" && (size === "md" || size === "lg")) {
-    return "ps-3 pe-2";
-  }
-  if (size === "sm") {
-    return "px-2";
-  }
-  return "px-3";
+const PADDING_CLASSNAME = {
+  start: { sm: "ps-1 pe-2", md: "ps-2 pe-3", lg: "ps-2 pe-3" },
+  end: { sm: "ps-2 pe-1", md: "ps-3 pe-2", lg: "ps-3 pe-2" },
+  none: { sm: "px-2", md: "px-3", lg: "px-3" }
 };
 const setIconSizeClass = {
   // important is required to override the hardcoded size of the icon
@@ -48,9 +29,9 @@ const setIconSizeClass = {
   md: "!size-5",
   lg: "!size-6"
 };
+exports.APPEARANCE_CLASSNAME = APPEARANCE_CLASSNAME;
+exports.PADDING_CLASSNAME = PADDING_CLASSNAME;
 exports.SHARED_BUTTON_CLASSNAMES = SHARED_BUTTON_CLASSNAMES;
-exports.getAppearanceClasses = getAppearanceClasses;
 exports.setIconSizeClass = setIconSizeClass;
-exports.setPaddingClasses = setPaddingClasses;
 exports.sizeClasses = sizeClasses;
 //# sourceMappingURL=utils.cjs.map

package/dist/components/Actions/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../../src/components/Actions/utils.tsx"],"sourcesContent":["export type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonPurpose = 'regular' | 'destructive';\nexport type ButtonVariant = 'primary' | 'secondary' | 'tertiary';\nexport type ButtonIconPlacement = 'start' | 'end';\nexport type ButtonIconOnly = boolean;\n// TODO: do this in a better way — not used for now\nexport type LinkButtonPurpose = 'regular';\n\nexport const SHARED_BUTTON_CLASSNAMES =\n    'relative inline-flex gap-1 whitespace-nowrap flex-shrink-0 items-center justify-center rounded focus-visible:yt-focus';\n\nexport const getAppearanceClasses = (variant: ButtonVariant, purpose: ButtonPurpose) => {\n    if (purpose === 'regular' && variant === 'primary') {\n        return 'bg-blue-500 text-white hover:bg-blue-700 hover:text-white aria-disabled:hover:bg-blue-500 aria-disabled:hover:text-white focus-visible:bg-blue-700 focus-visible:text-white visited:text-white border-0 disabled:bg-blue-200 disabled:cursor-not-allowed ';\n    }\n    if (purpose === 'regular' && variant === 'secondary') {\n        // if variant is secondary\n        return 'bg-gray-100 text-black hover:bg-gray-200 aria-disabled:hover:bg-gray-100 aria-disabled:hover:text-black focus-visible:bg-gray-200 hover:text-black focus-visible:text-black visited:text-black border-0 disabled:bg-gray-50 disabled:text-gray-300 disabled:cursor-not-allowed';\n    }\n    if (purpose === 'regular' && variant === 'tertiary') {\n        return 'bg-white border border-gray-100 text-black hover:bg-gray-100 hover:text-black hover:border-gray-300 aria-disabled:hover:bg-white aria-disabled:hover:text-black aria-disabled:hover:border-gray-100 focus-visible:text-black focus-visible:border-gray-300 focus-visible:bg-gray-100 disabled:bg-white disabled:text-gray-300 disabled:border-gray-300 disabled:cursor-not-allowed';\n    }\n    // if purpose is destructive and variant is primary\n    if (purpose === 'destructive' && variant === 'primary') {\n        return 'bg-red-500 text-white hover:bg-red-700 aria-disabled:hover:bg-red-500 aria-disabled:hover:text-white focus-visible:bg-red-700 hover:text-white focus-visible:text-white border-0 disabled:bg-red-200 disabled:text-white disabled:cursor-not-allowed';\n    }\n    // if purpose is destructive and variant is secondary\n    if (purpose === 'destructive' && variant === 'secondary') {\n        return 'bg-red-100 text-red-700 hover:bg-red-200 aria-disabled:hover:bg-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-200 hover:text-red-700 focus-visible:text-red-700 border-0 disabled:bg-red-50 disabled:text-gray-300 disabled:cursor-not-allowed';\n    }\n    // if purpose is destructive and variant is tertiary\n    return 'bg-white border border-red-100 text-red-700 hover:bg-red-100 hover:border-red-200 aria-disabled:hover:bg-white aria-disabled:hover:border-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-100 focus-visible:border-red-200 disabled:bg-white disabled:border-red-100 disabled:text-gray-300 disabled:cursor-not-allowed';\n};\n\nexport const sizeClasses = {\n    sm: 'h-7 text-xs',\n    md: 'h-8 text-sm',\n    lg: 'h-10 text-base',\n};\n\nexport const setPaddingClasses = (size: ButtonSize, iconPlacement: ButtonIconPlacement | undefined) => {\n    // Icon is before the text and it's a small button\n    if (iconPlacement === 'start' && size === 'sm') {\n        return 'ps-1 pe-2';\n    }\n    // Icon is before the text and it's a medium or large button\n    if (iconPlacement === 'start' && (size === 'md' || size === 'lg')) {\n        return 'ps-2 pe-3';\n    }\n    // Icon is after the text and it's a small button\n    if (iconPlacement === 'end' && size === 'sm') {\n        return 'ps-2 pe-1';\n    }\n    // Icon is after the text and it's a medium or large button\n    if (iconPlacement === 'end' && (size === 'md' || size === 'lg')) {\n        return 'ps-3 pe-2';\n    }\n    // No icon and small button\n    if (size === 'sm') {\n        return 'px-2';\n    }\n    return 'px-3';\n};\n\nexport const setIconSizeClass = {\n    // important is required to override the hardcoded size of the icon\n    sm: '!size-[18px]',\n    md: '!size-5',\n    lg: '!size-6',\n};\n"],"names":[],"mappings":";;AAQO,MAAM,2BACT;AAES,MAAA,uBAAuB,CAAC,SAAwB,YAA2B;AAChF,MAAA,YAAY,aAAa,YAAY,WAAW;AACzC,WAAA;AAAA,EAAA;AAEP,MAAA,YAAY,aAAa,YAAY,aAAa;AAE3C,WAAA;AAAA,EAAA;AAEP,MAAA,YAAY,aAAa,YAAY,YAAY;AAC1C,WAAA;AAAA,EAAA;AAGP,MAAA,YAAY,iBAAiB,YAAY,WAAW;AAC7C,WAAA;AAAA,EAAA;AAGP,MAAA,YAAY,iBAAiB,YAAY,aAAa;AAC/C,WAAA;AAAA,EAAA;AAGJ,SAAA;AACX;AAEO,MAAM,cAAc;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;AAEa,MAAA,oBAAoB,CAAC,MAAkB,kBAAmD;AAE/F,MAAA,kBAAkB,WAAW,SAAS,MAAM;AACrC,WAAA;AAAA,EAAA;AAGX,MAAI,kBAAkB,YAAY,SAAS,QAAQ,SAAS,OAAO;AACxD,WAAA;AAAA,EAAA;AAGP,MAAA,kBAAkB,SAAS,SAAS,MAAM;AACnC,WAAA;AAAA,EAAA;AAGX,MAAI,kBAAkB,UAAU,SAAS,QAAQ,SAAS,OAAO;AACtD,WAAA;AAAA,EAAA;AAGX,MAAI,SAAS,MAAM;AACR,WAAA;AAAA,EAAA;AAEJ,SAAA;AACX;AAEO,MAAM,mBAAmB;AAAA;AAAA,EAE5B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;;;;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../../src/components/Actions/utils.tsx"],"sourcesContent":["export type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonPurpose = 'regular' | 'destructive';\nexport type ButtonVariant = 'primary' | 'secondary' | 'tertiary';\nexport type ButtonIconPlacement = 'start' | 'end';\nexport type ButtonIconOnly = boolean;\n// TODO: do this in a better way — not used for now\nexport type LinkButtonPurpose = 'regular';\n\nexport const SHARED_BUTTON_CLASSNAMES =\n    'relative inline-flex gap-1 whitespace-nowrap flex-shrink-0 items-center justify-center rounded focus-visible:yt-focus';\n\nexport const APPEARANCE_CLASSNAME: Record<ButtonPurpose, Record<ButtonVariant, string>> = {\n    regular: {\n        primary:\n            'bg-blue-500 text-white hover:bg-blue-700 hover:text-white aria-disabled:hover:bg-blue-500 aria-disabled:hover:text-white focus-visible:bg-blue-700 focus-visible:text-white visited:text-white border-0 disabled:bg-blue-200 disabled:cursor-not-allowed',\n        secondary:\n            'bg-gray-100 text-black hover:bg-gray-200 aria-disabled:hover:bg-gray-100 aria-disabled:hover:text-black focus-visible:bg-gray-200 hover:text-black focus-visible:text-black visited:text-black border-0 disabled:bg-gray-50 disabled:text-gray-300 disabled:cursor-not-allowed',\n        tertiary:\n            'bg-white border border-gray-100 text-black hover:bg-gray-100 hover:text-black hover:border-gray-300 aria-disabled:hover:bg-white aria-disabled:hover:text-black aria-disabled:hover:border-gray-100 focus-visible:text-black focus-visible:border-gray-300 focus-visible:bg-gray-100 disabled:bg-white disabled:text-gray-300 disabled:border-gray-300 disabled:cursor-not-allowed',\n    },\n    destructive: {\n        primary:\n            'bg-red-500 text-white hover:bg-red-700 aria-disabled:hover:bg-red-500 aria-disabled:hover:text-white focus-visible:bg-red-700 hover:text-white focus-visible:text-white border-0 disabled:bg-red-200 disabled:text-white disabled:cursor-not-allowed',\n        secondary:\n            'bg-red-100 text-red-700 hover:bg-red-200 aria-disabled:hover:bg-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-200 hover:text-red-700 focus-visible:text-red-700 border-0 disabled:bg-red-50 disabled:text-gray-300 disabled:cursor-not-allowed',\n        tertiary:\n            'bg-white border border-red-100 text-red-700 hover:bg-red-100 hover:border-red-200 aria-disabled:hover:bg-white aria-disabled:hover:border-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-100 focus-visible:border-red-200 disabled:bg-white disabled:border-red-100 disabled:text-gray-300 disabled:cursor-not-allowed',\n    },\n};\n\nexport const sizeClasses = {\n    sm: 'h-7 text-xs',\n    md: 'h-8 text-sm',\n    lg: 'h-10 text-base',\n};\n\nexport const PADDING_CLASSNAME: Record<ButtonIconPlacement | 'none', Record<ButtonSize, string>> = {\n    start: { sm: 'ps-1 pe-2', md: 'ps-2 pe-3', lg: 'ps-2 pe-3' },\n    end: { sm: 'ps-2 pe-1', md: 'ps-3 pe-2', lg: 'ps-3 pe-2' },\n    none: { sm: 'px-2', md: 'px-3', lg: 'px-3' },\n};\n\nexport const setIconSizeClass = {\n    // important is required to override the hardcoded size of the icon\n    sm: '!size-[18px]',\n    md: '!size-5',\n    lg: '!size-6',\n};\n"],"names":[],"mappings":";;AAQO,MAAM,2BACT;AAEG,MAAM,uBAA6E;AAAA,EACtF,SAAS;AAAA,IACL,SACI;AAAA,IACJ,WACI;AAAA,IACJ,UACI;AAAA,EAAA;AAAA,EAER,aAAa;AAAA,IACT,SACI;AAAA,IACJ,WACI;AAAA,IACJ,UACI;AAAA,EAAA;AAEZ;AAEO,MAAM,cAAc;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;AAEO,MAAM,oBAAsF;AAAA,EAC/F,OAAO,EAAE,IAAI,aAAa,IAAI,aAAa,IAAI,YAAA;AAAA,EAC/C,KAAK,EAAE,IAAI,aAAa,IAAI,aAAa,IAAI,YAAA;AAAA,EAC7C,MAAM,EAAE,IAAI,QAAQ,IAAI,QAAQ,IAAI,OAAA;AACxC;AAEO,MAAM,mBAAmB;AAAA;AAAA,EAE5B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;;;;;;"}

package/dist/components/Actions/utils.d.ts

@@ -5,13 +5,13 @@ export type ButtonIconPlacement = 'start' | 'end';
 export type ButtonIconOnly = boolean;
 export type LinkButtonPurpose = 'regular';
 export declare const SHARED_BUTTON_CLASSNAMES = "relative inline-flex gap-1 whitespace-nowrap flex-shrink-0 items-center justify-center rounded focus-visible:yt-focus";
-export declare const getAppearanceClasses: (variant: ButtonVariant, purpose: ButtonPurpose) => "bg-blue-500 text-white hover:bg-blue-700 hover:text-white aria-disabled:hover:bg-blue-500 aria-disabled:hover:text-white focus-visible:bg-blue-700 focus-visible:text-white visited:text-white border-0 disabled:bg-blue-200 disabled:cursor-not-allowed " | "bg-gray-100 text-black hover:bg-gray-200 aria-disabled:hover:bg-gray-100 aria-disabled:hover:text-black focus-visible:bg-gray-200 hover:text-black focus-visible:text-black visited:text-black border-0 disabled:bg-gray-50 disabled:text-gray-300 disabled:cursor-not-allowed" | "bg-white border border-gray-100 text-black hover:bg-gray-100 hover:text-black hover:border-gray-300 aria-disabled:hover:bg-white aria-disabled:hover:text-black aria-disabled:hover:border-gray-100 focus-visible:text-black focus-visible:border-gray-300 focus-visible:bg-gray-100 disabled:bg-white disabled:text-gray-300 disabled:border-gray-300 disabled:cursor-not-allowed" | "bg-red-500 text-white hover:bg-red-700 aria-disabled:hover:bg-red-500 aria-disabled:hover:text-white focus-visible:bg-red-700 hover:text-white focus-visible:text-white border-0 disabled:bg-red-200 disabled:text-white disabled:cursor-not-allowed" | "bg-red-100 text-red-700 hover:bg-red-200 aria-disabled:hover:bg-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-200 hover:text-red-700 focus-visible:text-red-700 border-0 disabled:bg-red-50 disabled:text-gray-300 disabled:cursor-not-allowed" | "bg-white border border-red-100 text-red-700 hover:bg-red-100 hover:border-red-200 aria-disabled:hover:bg-white aria-disabled:hover:border-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-100 focus-visible:border-red-200 disabled:bg-white disabled:border-red-100 disabled:text-gray-300 disabled:cursor-not-allowed";
+export declare const APPEARANCE_CLASSNAME: Record<ButtonPurpose, Record<ButtonVariant, string>>;
 export declare const sizeClasses: {
     sm: string;
     md: string;
     lg: string;
 };
-export declare const setPaddingClasses: (size: ButtonSize, iconPlacement: ButtonIconPlacement | undefined) => "ps-1 pe-2" | "ps-2 pe-3" | "ps-2 pe-1" | "ps-3 pe-2" | "px-2" | "px-3";
+export declare const PADDING_CLASSNAME: Record<ButtonIconPlacement | 'none', Record<ButtonSize, string>>;
 export declare const setIconSizeClass: {
     sm: string;
     md: string;

package/dist/components/Actions/utils.js

@@ -1,44 +1,25 @@
 const SHARED_BUTTON_CLASSNAMES = "relative inline-flex gap-1 whitespace-nowrap flex-shrink-0 items-center justify-center rounded focus-visible:yt-focus";
-const getAppearanceClasses = (variant, purpose) => {
-  if (purpose === "regular" && variant === "primary") {
-    return "bg-blue-500 text-white hover:bg-blue-700 hover:text-white aria-disabled:hover:bg-blue-500 aria-disabled:hover:text-white focus-visible:bg-blue-700 focus-visible:text-white visited:text-white border-0 disabled:bg-blue-200 disabled:cursor-not-allowed ";
+const APPEARANCE_CLASSNAME = {
+  regular: {
+    primary: "bg-blue-500 text-white hover:bg-blue-700 hover:text-white aria-disabled:hover:bg-blue-500 aria-disabled:hover:text-white focus-visible:bg-blue-700 focus-visible:text-white visited:text-white border-0 disabled:bg-blue-200 disabled:cursor-not-allowed",
+    secondary: "bg-gray-100 text-black hover:bg-gray-200 aria-disabled:hover:bg-gray-100 aria-disabled:hover:text-black focus-visible:bg-gray-200 hover:text-black focus-visible:text-black visited:text-black border-0 disabled:bg-gray-50 disabled:text-gray-300 disabled:cursor-not-allowed",
+    tertiary: "bg-white border border-gray-100 text-black hover:bg-gray-100 hover:text-black hover:border-gray-300 aria-disabled:hover:bg-white aria-disabled:hover:text-black aria-disabled:hover:border-gray-100 focus-visible:text-black focus-visible:border-gray-300 focus-visible:bg-gray-100 disabled:bg-white disabled:text-gray-300 disabled:border-gray-300 disabled:cursor-not-allowed"
+  },
+  destructive: {
+    primary: "bg-red-500 text-white hover:bg-red-700 aria-disabled:hover:bg-red-500 aria-disabled:hover:text-white focus-visible:bg-red-700 hover:text-white focus-visible:text-white border-0 disabled:bg-red-200 disabled:text-white disabled:cursor-not-allowed",
+    secondary: "bg-red-100 text-red-700 hover:bg-red-200 aria-disabled:hover:bg-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-200 hover:text-red-700 focus-visible:text-red-700 border-0 disabled:bg-red-50 disabled:text-gray-300 disabled:cursor-not-allowed",
+    tertiary: "bg-white border border-red-100 text-red-700 hover:bg-red-100 hover:border-red-200 aria-disabled:hover:bg-white aria-disabled:hover:border-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-100 focus-visible:border-red-200 disabled:bg-white disabled:border-red-100 disabled:text-gray-300 disabled:cursor-not-allowed"
   }
-  if (purpose === "regular" && variant === "secondary") {
-    return "bg-gray-100 text-black hover:bg-gray-200 aria-disabled:hover:bg-gray-100 aria-disabled:hover:text-black focus-visible:bg-gray-200 hover:text-black focus-visible:text-black visited:text-black border-0 disabled:bg-gray-50 disabled:text-gray-300 disabled:cursor-not-allowed";
-  }
-  if (purpose === "regular" && variant === "tertiary") {
-    return "bg-white border border-gray-100 text-black hover:bg-gray-100 hover:text-black hover:border-gray-300 aria-disabled:hover:bg-white aria-disabled:hover:text-black aria-disabled:hover:border-gray-100 focus-visible:text-black focus-visible:border-gray-300 focus-visible:bg-gray-100 disabled:bg-white disabled:text-gray-300 disabled:border-gray-300 disabled:cursor-not-allowed";
-  }
-  if (purpose === "destructive" && variant === "primary") {
-    return "bg-red-500 text-white hover:bg-red-700 aria-disabled:hover:bg-red-500 aria-disabled:hover:text-white focus-visible:bg-red-700 hover:text-white focus-visible:text-white border-0 disabled:bg-red-200 disabled:text-white disabled:cursor-not-allowed";
-  }
-  if (purpose === "destructive" && variant === "secondary") {
-    return "bg-red-100 text-red-700 hover:bg-red-200 aria-disabled:hover:bg-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-200 hover:text-red-700 focus-visible:text-red-700 border-0 disabled:bg-red-50 disabled:text-gray-300 disabled:cursor-not-allowed";
-  }
-  return "bg-white border border-red-100 text-red-700 hover:bg-red-100 hover:border-red-200 aria-disabled:hover:bg-white aria-disabled:hover:border-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-100 focus-visible:border-red-200 disabled:bg-white disabled:border-red-100 disabled:text-gray-300 disabled:cursor-not-allowed";
 };
 const sizeClasses = {
   sm: "h-7 text-xs",
   md: "h-8 text-sm",
   lg: "h-10 text-base"
 };
-const setPaddingClasses = (size, iconPlacement) => {
-  if (iconPlacement === "start" && size === "sm") {
-    return "ps-1 pe-2";
-  }
-  if (iconPlacement === "start" && (size === "md" || size === "lg")) {
-    return "ps-2 pe-3";
-  }
-  if (iconPlacement === "end" && size === "sm") {
-    return "ps-2 pe-1";
-  }
-  if (iconPlacement === "end" && (size === "md" || size === "lg")) {
-    return "ps-3 pe-2";
-  }
-  if (size === "sm") {
-    return "px-2";
-  }
-  return "px-3";
+const PADDING_CLASSNAME = {
+  start: { sm: "ps-1 pe-2", md: "ps-2 pe-3", lg: "ps-2 pe-3" },
+  end: { sm: "ps-2 pe-1", md: "ps-3 pe-2", lg: "ps-3 pe-2" },
+  none: { sm: "px-2", md: "px-3", lg: "px-3" }
 };
 const setIconSizeClass = {
   // important is required to override the hardcoded size of the icon
@@ -47,10 +28,10 @@ const setIconSizeClass = {
   lg: "!size-6"
 };
 export {
+  APPEARANCE_CLASSNAME,
+  PADDING_CLASSNAME,
   SHARED_BUTTON_CLASSNAMES,
-  getAppearanceClasses,
   setIconSizeClass,
-  setPaddingClasses,
   sizeClasses
 };
 //# sourceMappingURL=utils.js.map

package/dist/components/Actions/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/Actions/utils.tsx"],"sourcesContent":["export type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonPurpose = 'regular' | 'destructive';\nexport type ButtonVariant = 'primary' | 'secondary' | 'tertiary';\nexport type ButtonIconPlacement = 'start' | 'end';\nexport type ButtonIconOnly = boolean;\n// TODO: do this in a better way — not used for now\nexport type LinkButtonPurpose = 'regular';\n\nexport const SHARED_BUTTON_CLASSNAMES =\n    'relative inline-flex gap-1 whitespace-nowrap flex-shrink-0 items-center justify-center rounded focus-visible:yt-focus';\n\nexport const getAppearanceClasses = (variant: ButtonVariant, purpose: ButtonPurpose) => {\n    if (purpose === 'regular' && variant === 'primary') {\n        return 'bg-blue-500 text-white hover:bg-blue-700 hover:text-white aria-disabled:hover:bg-blue-500 aria-disabled:hover:text-white focus-visible:bg-blue-700 focus-visible:text-white visited:text-white border-0 disabled:bg-blue-200 disabled:cursor-not-allowed ';\n    }\n    if (purpose === 'regular' && variant === 'secondary') {\n        // if variant is secondary\n        return 'bg-gray-100 text-black hover:bg-gray-200 aria-disabled:hover:bg-gray-100 aria-disabled:hover:text-black focus-visible:bg-gray-200 hover:text-black focus-visible:text-black visited:text-black border-0 disabled:bg-gray-50 disabled:text-gray-300 disabled:cursor-not-allowed';\n    }\n    if (purpose === 'regular' && variant === 'tertiary') {\n        return 'bg-white border border-gray-100 text-black hover:bg-gray-100 hover:text-black hover:border-gray-300 aria-disabled:hover:bg-white aria-disabled:hover:text-black aria-disabled:hover:border-gray-100 focus-visible:text-black focus-visible:border-gray-300 focus-visible:bg-gray-100 disabled:bg-white disabled:text-gray-300 disabled:border-gray-300 disabled:cursor-not-allowed';\n    }\n    // if purpose is destructive and variant is primary\n    if (purpose === 'destructive' && variant === 'primary') {\n        return 'bg-red-500 text-white hover:bg-red-700 aria-disabled:hover:bg-red-500 aria-disabled:hover:text-white focus-visible:bg-red-700 hover:text-white focus-visible:text-white border-0 disabled:bg-red-200 disabled:text-white disabled:cursor-not-allowed';\n    }\n    // if purpose is destructive and variant is secondary\n    if (purpose === 'destructive' && variant === 'secondary') {\n        return 'bg-red-100 text-red-700 hover:bg-red-200 aria-disabled:hover:bg-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-200 hover:text-red-700 focus-visible:text-red-700 border-0 disabled:bg-red-50 disabled:text-gray-300 disabled:cursor-not-allowed';\n    }\n    // if purpose is destructive and variant is tertiary\n    return 'bg-white border border-red-100 text-red-700 hover:bg-red-100 hover:border-red-200 aria-disabled:hover:bg-white aria-disabled:hover:border-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-100 focus-visible:border-red-200 disabled:bg-white disabled:border-red-100 disabled:text-gray-300 disabled:cursor-not-allowed';\n};\n\nexport const sizeClasses = {\n    sm: 'h-7 text-xs',\n    md: 'h-8 text-sm',\n    lg: 'h-10 text-base',\n};\n\nexport const setPaddingClasses = (size: ButtonSize, iconPlacement: ButtonIconPlacement | undefined) => {\n    // Icon is before the text and it's a small button\n    if (iconPlacement === 'start' && size === 'sm') {\n        return 'ps-1 pe-2';\n    }\n    // Icon is before the text and it's a medium or large button\n    if (iconPlacement === 'start' && (size === 'md' || size === 'lg')) {\n        return 'ps-2 pe-3';\n    }\n    // Icon is after the text and it's a small button\n    if (iconPlacement === 'end' && size === 'sm') {\n        return 'ps-2 pe-1';\n    }\n    // Icon is after the text and it's a medium or large button\n    if (iconPlacement === 'end' && (size === 'md' || size === 'lg')) {\n        return 'ps-3 pe-2';\n    }\n    // No icon and small button\n    if (size === 'sm') {\n        return 'px-2';\n    }\n    return 'px-3';\n};\n\nexport const setIconSizeClass = {\n    // important is required to override the hardcoded size of the icon\n    sm: '!size-[18px]',\n    md: '!size-5',\n    lg: '!size-6',\n};\n"],"names":[],"mappings":"AAQO,MAAM,2BACT;AAES,MAAA,uBAAuB,CAAC,SAAwB,YAA2B;AAChF,MAAA,YAAY,aAAa,YAAY,WAAW;AACzC,WAAA;AAAA,EAAA;AAEP,MAAA,YAAY,aAAa,YAAY,aAAa;AAE3C,WAAA;AAAA,EAAA;AAEP,MAAA,YAAY,aAAa,YAAY,YAAY;AAC1C,WAAA;AAAA,EAAA;AAGP,MAAA,YAAY,iBAAiB,YAAY,WAAW;AAC7C,WAAA;AAAA,EAAA;AAGP,MAAA,YAAY,iBAAiB,YAAY,aAAa;AAC/C,WAAA;AAAA,EAAA;AAGJ,SAAA;AACX;AAEO,MAAM,cAAc;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;AAEa,MAAA,oBAAoB,CAAC,MAAkB,kBAAmD;AAE/F,MAAA,kBAAkB,WAAW,SAAS,MAAM;AACrC,WAAA;AAAA,EAAA;AAGX,MAAI,kBAAkB,YAAY,SAAS,QAAQ,SAAS,OAAO;AACxD,WAAA;AAAA,EAAA;AAGP,MAAA,kBAAkB,SAAS,SAAS,MAAM;AACnC,WAAA;AAAA,EAAA;AAGX,MAAI,kBAAkB,UAAU,SAAS,QAAQ,SAAS,OAAO;AACtD,WAAA;AAAA,EAAA;AAGX,MAAI,SAAS,MAAM;AACR,WAAA;AAAA,EAAA;AAEJ,SAAA;AACX;AAEO,MAAM,mBAAmB;AAAA;AAAA,EAE5B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;"}
+{"version":3,"file":"utils.js","sources":["../../../src/components/Actions/utils.tsx"],"sourcesContent":["export type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonPurpose = 'regular' | 'destructive';\nexport type ButtonVariant = 'primary' | 'secondary' | 'tertiary';\nexport type ButtonIconPlacement = 'start' | 'end';\nexport type ButtonIconOnly = boolean;\n// TODO: do this in a better way — not used for now\nexport type LinkButtonPurpose = 'regular';\n\nexport const SHARED_BUTTON_CLASSNAMES =\n    'relative inline-flex gap-1 whitespace-nowrap flex-shrink-0 items-center justify-center rounded focus-visible:yt-focus';\n\nexport const APPEARANCE_CLASSNAME: Record<ButtonPurpose, Record<ButtonVariant, string>> = {\n    regular: {\n        primary:\n            'bg-blue-500 text-white hover:bg-blue-700 hover:text-white aria-disabled:hover:bg-blue-500 aria-disabled:hover:text-white focus-visible:bg-blue-700 focus-visible:text-white visited:text-white border-0 disabled:bg-blue-200 disabled:cursor-not-allowed',\n        secondary:\n            'bg-gray-100 text-black hover:bg-gray-200 aria-disabled:hover:bg-gray-100 aria-disabled:hover:text-black focus-visible:bg-gray-200 hover:text-black focus-visible:text-black visited:text-black border-0 disabled:bg-gray-50 disabled:text-gray-300 disabled:cursor-not-allowed',\n        tertiary:\n            'bg-white border border-gray-100 text-black hover:bg-gray-100 hover:text-black hover:border-gray-300 aria-disabled:hover:bg-white aria-disabled:hover:text-black aria-disabled:hover:border-gray-100 focus-visible:text-black focus-visible:border-gray-300 focus-visible:bg-gray-100 disabled:bg-white disabled:text-gray-300 disabled:border-gray-300 disabled:cursor-not-allowed',\n    },\n    destructive: {\n        primary:\n            'bg-red-500 text-white hover:bg-red-700 aria-disabled:hover:bg-red-500 aria-disabled:hover:text-white focus-visible:bg-red-700 hover:text-white focus-visible:text-white border-0 disabled:bg-red-200 disabled:text-white disabled:cursor-not-allowed',\n        secondary:\n            'bg-red-100 text-red-700 hover:bg-red-200 aria-disabled:hover:bg-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-200 hover:text-red-700 focus-visible:text-red-700 border-0 disabled:bg-red-50 disabled:text-gray-300 disabled:cursor-not-allowed',\n        tertiary:\n            'bg-white border border-red-100 text-red-700 hover:bg-red-100 hover:border-red-200 aria-disabled:hover:bg-white aria-disabled:hover:border-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-100 focus-visible:border-red-200 disabled:bg-white disabled:border-red-100 disabled:text-gray-300 disabled:cursor-not-allowed',\n    },\n};\n\nexport const sizeClasses = {\n    sm: 'h-7 text-xs',\n    md: 'h-8 text-sm',\n    lg: 'h-10 text-base',\n};\n\nexport const PADDING_CLASSNAME: Record<ButtonIconPlacement | 'none', Record<ButtonSize, string>> = {\n    start: { sm: 'ps-1 pe-2', md: 'ps-2 pe-3', lg: 'ps-2 pe-3' },\n    end: { sm: 'ps-2 pe-1', md: 'ps-3 pe-2', lg: 'ps-3 pe-2' },\n    none: { sm: 'px-2', md: 'px-3', lg: 'px-3' },\n};\n\nexport const setIconSizeClass = {\n    // important is required to override the hardcoded size of the icon\n    sm: '!size-[18px]',\n    md: '!size-5',\n    lg: '!size-6',\n};\n"],"names":[],"mappings":"AAQO,MAAM,2BACT;AAEG,MAAM,uBAA6E;AAAA,EACtF,SAAS;AAAA,IACL,SACI;AAAA,IACJ,WACI;AAAA,IACJ,UACI;AAAA,EAAA;AAAA,EAER,aAAa;AAAA,IACT,SACI;AAAA,IACJ,WACI;AAAA,IACJ,UACI;AAAA,EAAA;AAEZ;AAEO,MAAM,cAAc;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;AAEO,MAAM,oBAAsF;AAAA,EAC/F,OAAO,EAAE,IAAI,aAAa,IAAI,aAAa,IAAI,YAAA;AAAA,EAC/C,KAAK,EAAE,IAAI,aAAa,IAAI,aAAa,IAAI,YAAA;AAAA,EAC7C,MAAM,EAAE,IAAI,QAAQ,IAAI,QAAQ,IAAI,OAAA;AACxC;AAEO,MAAM,mBAAmB;AAAA;AAAA,EAE5B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;"}

package/dist/components/Alert/Alert.cjs

@@ -5,31 +5,23 @@ const cn = require("clsx");
 const BadgeIcon = require("../BadgeIcon/BadgeIcon.cjs");
 const tailwind = require("../../utils/tailwind.cjs");
 const Icon = require("../Icon/Icon.cjs");
-const getIconName = (state) => {
-  switch (state) {
-    case "information":
-      return "info";
-    case "warning":
-      return "warning";
-    case "error":
-      return "close";
-    case "experiment":
-      return "experiment";
-    case "success":
-      return "tick";
-    default:
-      return "question-mark";
-  }
+const ICON_NAME_BY_STATE = {
+  information: "info",
+  warning: "warning",
+  error: "close",
+  experiment: "experiment",
+  success: "tick",
+  default: "question-mark"
 };
 const Alert = React.forwardRef(function Alert2(props, ref) {
-  const { children, title, state, onClose } = props;
+  const { children, title, state = "default", onClose } = props;
+  const color = tailwind.COLOR_BY_STATE[state];
   const className = cn(
-    `flex w-full flex-row items-start gap-2 rounded-lg border-transparent p-3 ${tailwind.getSubtleColorShadeClasses(
-      tailwind.getColorByState(state)
-    )}`,
+    "flex w-full flex-row items-start gap-2 rounded-lg border-transparent p-3",
+    tailwind.SUBTLE_COLOR_SHADE_CLASSNAME[color],
     props.className
   );
-  return /* @__PURE__ */ React.createElement("div", { ...props, ref, className, "data-taco": "alert", role: "alert" }, /* @__PURE__ */ React.createElement(BadgeIcon.BadgeIcon, { className: "flex-none", icon: getIconName(state), color: tailwind.getColorByState(state) }), /* @__PURE__ */ React.createElement("div", { className: "grow text-sm", "data-taco": "alert-content" }, title && /* @__PURE__ */ React.createElement("div", { className: "font-bold", "data-taco": "alert-title" }, title), children), onClose && /* @__PURE__ */ React.createElement(Icon.Icon, { className: "flex-none cursor-pointer", name: "close", onClick: onClose, "data-testid": "alert-close" }));
+  return /* @__PURE__ */ React.createElement("div", { ...props, ref, className, "data-taco": "alert", role: "alert" }, /* @__PURE__ */ React.createElement(BadgeIcon.BadgeIcon, { className: "flex-none", icon: ICON_NAME_BY_STATE[state], color }), /* @__PURE__ */ React.createElement("div", { className: "grow text-sm", "data-taco": "alert-content" }, title && /* @__PURE__ */ React.createElement("div", { className: "font-bold", "data-taco": "alert-title" }, title), children), onClose && /* @__PURE__ */ React.createElement(Icon.Icon, { className: "flex-none cursor-pointer", name: "close", onClick: onClose, "data-testid": "alert-close" }));
 });
 exports.Alert = Alert;
 //# sourceMappingURL=Alert.cjs.map

package/dist/components/Alert/Alert.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.cjs","sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\nimport { getColorByState, getSubtleColorShadeClasses } from '../../utils/tailwind';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { State } from '../../types';\n\nexport type AlertProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {\n    children: React.ReactNode;\n    state?: State;\n    title?: string;\n    onClose?: () => void;\n};\n\nconst getIconName = (state: State | undefined): IconName => {\n    switch (state) {\n        case 'information':\n            return 'info';\n        case 'warning':\n            return 'warning';\n        case 'error':\n            return 'close';\n        case 'experiment':\n            return 'experiment';\n        case 'success':\n            return 'tick';\n        default:\n            return 'question-mark';\n    }\n};\n\nexport const Alert = React.forwardRef(function Alert(props: AlertProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, title, state, onClose } = props;\n\n    const className = cn(\n        `flex w-full flex-row items-start gap-2 rounded-lg border-transparent p-3 ${getSubtleColorShadeClasses(\n            getColorByState(state)\n        )}`,\n        props.className\n    );\n\n    return (\n        <div {...props} ref={ref} className={className} data-taco=\"alert\" role=\"alert\">\n            <BadgeIcon className=\"flex-none\" icon={getIconName(state)} color={getColorByState(state)} />\n            <div className=\"grow text-sm\" data-taco=\"alert-content\">\n                {title && (\n                    <div className=\"font-bold\" data-taco=\"alert-title\">\n                        {title}\n                    </div>\n                )}\n                {children}\n            </div>\n            {onClose && <Icon className=\"flex-none cursor-pointer\" name=\"close\" onClick={onClose} data-testid=\"alert-close\" />}\n        </div>\n    );\n});\n"],"names":["Alert","getSubtleColorShadeClasses","getColorByState","BadgeIcon","Icon"],"mappings":";;;;;;;AAcA,MAAM,cAAc,CAAC,UAAuC;AACxD,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEO,MAAM,QAAQ,MAAM,WAAW,SAASA,OAAM,OAAmB,KAAgC;AACpG,QAAM,EAAE,UAAU,OAAO,OAAO,QAAY,IAAA;AAE5C,QAAM,YAAY;AAAA,IACd,4EAA4EC,SAAA;AAAA,MACxEC,SAAAA,gBAAgB,KAAK;AAAA,IAAA,CACxB;AAAA,IACD,MAAM;AAAA,EACV;AAGI,SAAA,sBAAA,cAAC,SAAK,GAAG,OAAO,KAAU,WAAsB,aAAU,SAAQ,MAAK,QACnE,GAAA,sBAAA,cAACC,uBAAU,WAAU,aAAY,MAAM,YAAY,KAAK,GAAG,OAAOD,SAAgB,gBAAA,KAAK,EAAG,CAAA,GACzF,sBAAA,cAAA,OAAA,EAAI,WAAU,gBAAe,aAAU,gBACnC,GAAA,SACI,sBAAA,cAAA,OAAA,EAAI,WAAU,aAAY,aAAU,cAChC,GAAA,KACL,GAEH,QACL,GACC,WAAW,sBAAA,cAACE,KAAK,MAAA,EAAA,WAAU,4BAA2B,MAAK,SAAQ,SAAS,SAAS,eAAY,cAAc,CAAA,CACpH;AAER,CAAC;;"}
+{"version":3,"file":"Alert.cjs","sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\nimport { COLOR_BY_STATE, SUBTLE_COLOR_SHADE_CLASSNAME } from '../../utils/tailwind';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { State } from '../../types';\n\nexport type AlertProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {\n    children: React.ReactNode;\n    state?: State;\n    title?: string;\n    onClose?: () => void;\n};\n\nconst ICON_NAME_BY_STATE: Record<State, IconName> = {\n    information: 'info',\n    warning: 'warning',\n    error: 'close',\n    experiment: 'experiment',\n    success: 'tick',\n    default: 'question-mark',\n};\n\nexport const Alert = React.forwardRef(function Alert(props: AlertProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, title, state = 'default', onClose } = props;\n    const color = COLOR_BY_STATE[state];\n\n    const className = cn(\n        'flex w-full flex-row items-start gap-2 rounded-lg border-transparent p-3',\n        SUBTLE_COLOR_SHADE_CLASSNAME[color],\n        props.className\n    );\n\n    return (\n        <div {...props} ref={ref} className={className} data-taco=\"alert\" role=\"alert\">\n            <BadgeIcon className=\"flex-none\" icon={ICON_NAME_BY_STATE[state]} color={color} />\n            <div className=\"grow text-sm\" data-taco=\"alert-content\">\n                {title && (\n                    <div className=\"font-bold\" data-taco=\"alert-title\">\n                        {title}\n                    </div>\n                )}\n                {children}\n            </div>\n            {onClose && <Icon className=\"flex-none cursor-pointer\" name=\"close\" onClick={onClose} data-testid=\"alert-close\" />}\n        </div>\n    );\n});\n"],"names":["Alert","COLOR_BY_STATE","SUBTLE_COLOR_SHADE_CLASSNAME","BadgeIcon","Icon"],"mappings":";;;;;;;AAcA,MAAM,qBAA8C;AAAA,EAChD,aAAa;AAAA,EACb,SAAS;AAAA,EACT,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,SAAS;AACb;AAEO,MAAM,QAAQ,MAAM,WAAW,SAASA,OAAM,OAAmB,KAAgC;AACpG,QAAM,EAAE,UAAU,OAAO,QAAQ,WAAW,YAAY;AACxD,QAAM,QAAQC,SAAAA,eAAe,KAAK;AAElC,QAAM,YAAY;AAAA,IACd;AAAA,IACAC,SAAAA,6BAA6B,KAAK;AAAA,IAClC,MAAM;AAAA,EAAA;AAGV,SACI,sBAAA,cAAC,SAAK,GAAG,OAAO,KAAU,WAAsB,aAAU,SAAQ,MAAK,QAAA,GACnE,sBAAA,cAACC,UAAAA,aAAU,WAAU,aAAY,MAAM,mBAAmB,KAAK,GAAG,MAAA,CAAc,GAChF,sBAAA,cAAC,OAAA,EAAI,WAAU,gBAAe,aAAU,gBAAA,GACnC,6CACI,OAAA,EAAI,WAAU,aAAY,aAAU,cAAA,GAChC,KACL,GAEH,QACL,GACC,WAAW,sBAAA,cAACC,WAAA,EAAK,WAAU,4BAA2B,MAAK,SAAQ,SAAS,SAAS,eAAY,cAAA,CAAc,CACpH;AAER,CAAC;;"}

package/dist/components/Alert/Alert.js

@@ -1,33 +1,25 @@
 import React__default from "react";
 import cn from "clsx";
 import { BadgeIcon } from "../BadgeIcon/BadgeIcon.js";
-import { getSubtleColorShadeClasses, getColorByState } from "../../utils/tailwind.js";
+import { SUBTLE_COLOR_SHADE_CLASSNAME, COLOR_BY_STATE } from "../../utils/tailwind.js";
 import { Icon } from "../Icon/Icon.js";
-const getIconName = (state) => {
-  switch (state) {
-    case "information":
-      return "info";
-    case "warning":
-      return "warning";
-    case "error":
-      return "close";
-    case "experiment":
-      return "experiment";
-    case "success":
-      return "tick";
-    default:
-      return "question-mark";
-  }
+const ICON_NAME_BY_STATE = {
+  information: "info",
+  warning: "warning",
+  error: "close",
+  experiment: "experiment",
+  success: "tick",
+  default: "question-mark"
 };
 const Alert = React__default.forwardRef(function Alert2(props, ref) {
-  const { children, title, state, onClose } = props;
+  const { children, title, state = "default", onClose } = props;
+  const color = COLOR_BY_STATE[state];
   const className = cn(
-    `flex w-full flex-row items-start gap-2 rounded-lg border-transparent p-3 ${getSubtleColorShadeClasses(
-      getColorByState(state)
-    )}`,
+    "flex w-full flex-row items-start gap-2 rounded-lg border-transparent p-3",
+    SUBTLE_COLOR_SHADE_CLASSNAME[color],
     props.className
   );
-  return /* @__PURE__ */ React__default.createElement("div", { ...props, ref, className, "data-taco": "alert", role: "alert" }, /* @__PURE__ */ React__default.createElement(BadgeIcon, { className: "flex-none", icon: getIconName(state), color: getColorByState(state) }), /* @__PURE__ */ React__default.createElement("div", { className: "grow text-sm", "data-taco": "alert-content" }, title && /* @__PURE__ */ React__default.createElement("div", { className: "font-bold", "data-taco": "alert-title" }, title), children), onClose && /* @__PURE__ */ React__default.createElement(Icon, { className: "flex-none cursor-pointer", name: "close", onClick: onClose, "data-testid": "alert-close" }));
+  return /* @__PURE__ */ React__default.createElement("div", { ...props, ref, className, "data-taco": "alert", role: "alert" }, /* @__PURE__ */ React__default.createElement(BadgeIcon, { className: "flex-none", icon: ICON_NAME_BY_STATE[state], color }), /* @__PURE__ */ React__default.createElement("div", { className: "grow text-sm", "data-taco": "alert-content" }, title && /* @__PURE__ */ React__default.createElement("div", { className: "font-bold", "data-taco": "alert-title" }, title), children), onClose && /* @__PURE__ */ React__default.createElement(Icon, { className: "flex-none cursor-pointer", name: "close", onClick: onClose, "data-testid": "alert-close" }));
 });
 export {
   Alert

package/dist/components/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\nimport { getColorByState, getSubtleColorShadeClasses } from '../../utils/tailwind';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { State } from '../../types';\n\nexport type AlertProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {\n    children: React.ReactNode;\n    state?: State;\n    title?: string;\n    onClose?: () => void;\n};\n\nconst getIconName = (state: State | undefined): IconName => {\n    switch (state) {\n        case 'information':\n            return 'info';\n        case 'warning':\n            return 'warning';\n        case 'error':\n            return 'close';\n        case 'experiment':\n            return 'experiment';\n        case 'success':\n            return 'tick';\n        default:\n            return 'question-mark';\n    }\n};\n\nexport const Alert = React.forwardRef(function Alert(props: AlertProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, title, state, onClose } = props;\n\n    const className = cn(\n        `flex w-full flex-row items-start gap-2 rounded-lg border-transparent p-3 ${getSubtleColorShadeClasses(\n            getColorByState(state)\n        )}`,\n        props.className\n    );\n\n    return (\n        <div {...props} ref={ref} className={className} data-taco=\"alert\" role=\"alert\">\n            <BadgeIcon className=\"flex-none\" icon={getIconName(state)} color={getColorByState(state)} />\n            <div className=\"grow text-sm\" data-taco=\"alert-content\">\n                {title && (\n                    <div className=\"font-bold\" data-taco=\"alert-title\">\n                        {title}\n                    </div>\n                )}\n                {children}\n            </div>\n            {onClose && <Icon className=\"flex-none cursor-pointer\" name=\"close\" onClick={onClose} data-testid=\"alert-close\" />}\n        </div>\n    );\n});\n"],"names":["React","Alert"],"mappings":";;;;;AAcA,MAAM,cAAc,CAAC,UAAuC;AACxD,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEO,MAAM,QAAQA,eAAM,WAAW,SAASC,OAAM,OAAmB,KAAgC;AACpG,QAAM,EAAE,UAAU,OAAO,OAAO,QAAY,IAAA;AAE5C,QAAM,YAAY;AAAA,IACd,4EAA4E;AAAA,MACxE,gBAAgB,KAAK;AAAA,IAAA,CACxB;AAAA,IACD,MAAM;AAAA,EACV;AAGI,SAAAD,+BAAA,cAAC,SAAK,GAAG,OAAO,KAAU,WAAsB,aAAU,SAAQ,MAAK,QACnE,GAAAA,+BAAA,cAAC,aAAU,WAAU,aAAY,MAAM,YAAY,KAAK,GAAG,OAAO,gBAAgB,KAAK,EAAG,CAAA,GACzFA,+BAAA,cAAA,OAAA,EAAI,WAAU,gBAAe,aAAU,gBACnC,GAAA,SACIA,+BAAA,cAAA,OAAA,EAAI,WAAU,aAAY,aAAU,cAChC,GAAA,KACL,GAEH,QACL,GACC,WAAWA,+BAAA,cAAC,MAAK,EAAA,WAAU,4BAA2B,MAAK,SAAQ,SAAS,SAAS,eAAY,cAAc,CAAA,CACpH;AAER,CAAC;"}
+{"version":3,"file":"Alert.js","sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\nimport { COLOR_BY_STATE, SUBTLE_COLOR_SHADE_CLASSNAME } from '../../utils/tailwind';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { State } from '../../types';\n\nexport type AlertProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {\n    children: React.ReactNode;\n    state?: State;\n    title?: string;\n    onClose?: () => void;\n};\n\nconst ICON_NAME_BY_STATE: Record<State, IconName> = {\n    information: 'info',\n    warning: 'warning',\n    error: 'close',\n    experiment: 'experiment',\n    success: 'tick',\n    default: 'question-mark',\n};\n\nexport const Alert = React.forwardRef(function Alert(props: AlertProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, title, state = 'default', onClose } = props;\n    const color = COLOR_BY_STATE[state];\n\n    const className = cn(\n        'flex w-full flex-row items-start gap-2 rounded-lg border-transparent p-3',\n        SUBTLE_COLOR_SHADE_CLASSNAME[color],\n        props.className\n    );\n\n    return (\n        <div {...props} ref={ref} className={className} data-taco=\"alert\" role=\"alert\">\n            <BadgeIcon className=\"flex-none\" icon={ICON_NAME_BY_STATE[state]} color={color} />\n            <div className=\"grow text-sm\" data-taco=\"alert-content\">\n                {title && (\n                    <div className=\"font-bold\" data-taco=\"alert-title\">\n                        {title}\n                    </div>\n                )}\n                {children}\n            </div>\n            {onClose && <Icon className=\"flex-none cursor-pointer\" name=\"close\" onClick={onClose} data-testid=\"alert-close\" />}\n        </div>\n    );\n});\n"],"names":["React","Alert"],"mappings":";;;;;AAcA,MAAM,qBAA8C;AAAA,EAChD,aAAa;AAAA,EACb,SAAS;AAAA,EACT,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,SAAS;AACb;AAEO,MAAM,QAAQA,eAAM,WAAW,SAASC,OAAM,OAAmB,KAAgC;AACpG,QAAM,EAAE,UAAU,OAAO,QAAQ,WAAW,YAAY;AACxD,QAAM,QAAQ,eAAe,KAAK;AAElC,QAAM,YAAY;AAAA,IACd;AAAA,IACA,6BAA6B,KAAK;AAAA,IAClC,MAAM;AAAA,EAAA;AAGV,SACID,+BAAA,cAAC,SAAK,GAAG,OAAO,KAAU,WAAsB,aAAU,SAAQ,MAAK,QAAA,GACnEA,+BAAA,cAAC,aAAU,WAAU,aAAY,MAAM,mBAAmB,KAAK,GAAG,MAAA,CAAc,GAChFA,+BAAA,cAAC,OAAA,EAAI,WAAU,gBAAe,aAAU,gBAAA,GACnC,sDACI,OAAA,EAAI,WAAU,aAAY,aAAU,cAAA,GAChC,KACL,GAEH,QACL,GACC,WAAWA,+BAAA,cAAC,MAAA,EAAK,WAAU,4BAA2B,MAAK,SAAQ,SAAS,SAAS,eAAY,cAAA,CAAc,CACpH;AAER,CAAC;"}

package/dist/components/AlertDialog/AlertDialog.cjs

@@ -33,9 +33,8 @@ const AlertDialog = React__namespace.forwardRef(function AlertDialog2(props, ref
     [open, otherProps]
   );
   const handleOpenChange = (open2, eventDetails) => {
-    var _a;
     if (eventDetails.reason === "escape-key") {
-      const triggeredFromRadixPortal = (_a = eventDetails.event.target) == null ? void 0 : _a.closest(
+      const triggeredFromRadixPortal = eventDetails.event.target?.closest(
         "div[data-radix-popper-content-wrapper]"
       );
       if (triggeredFromRadixPortal) {
@@ -47,7 +46,7 @@ const AlertDialog = React__namespace.forwardRef(function AlertDialog2(props, ref
         return;
       }
     }
-    onChange == null ? void 0 : onChange(open2);
+    onChange?.(open2);
   };
   return /* @__PURE__ */ React__namespace.createElement(Context.AlertDialogContext.Provider, { value: context }, /* @__PURE__ */ React__namespace.createElement(alertDialog.AlertDialog.Root, { ...otherProps, defaultOpen, open, onOpenChange: handleOpenChange }, trigger && /* @__PURE__ */ React__namespace.createElement(Trigger.Trigger, null, trigger), children));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.cjs","sources":["../../../src/components/AlertDialog/AlertDialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\nimport { AlertDialogContext } from './Context';\nimport { Trigger, AlertDialogTriggerProps } from './components/Trigger';\nimport {\n    Cancel,\n    Action,\n    Footer,\n    AlertDialogCancelProps,\n    AlertDialogActionProps,\n    AlertDialogFooterProps,\n} from './components/Footer';\nimport {\n    Description,\n    Title,\n    Content,\n    AlertDialogContentProps,\n    AlertDialogTitleProps,\n    AlertDialogDescriptionProps,\n} from './components/Content';\n\nexport type AlertDialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** Set whether the alert dialog is open by default or not, use when not providing a trigger  */\n    defaultOpen?: boolean;\n    /** Called when the alert dialog opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the dialog from outside the component  */\n    open?: boolean;\n    /** A trigger to be used for the alert dialog, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n    /** A state to be used for the alert dialog, which will add appropriate badge icon next to the title */\n    variant?: 'warning' | 'error' | 'information';\n};\n\nexport type ForwardedAlertDialogWithStatics = React.ForwardRefExoticComponent<\n    AlertDialogProps & React.RefAttributes<HTMLElement>\n> & {\n    Trigger: React.ForwardRefExoticComponent<AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Description: React.ForwardRefExoticComponent<AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;\n    Footer: React.ForwardRefExoticComponent<AlertDialogFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Action: React.ForwardRefExoticComponent<AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;\n    Cancel: React.ForwardRefExoticComponent<AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;\n};\n\nexport const AlertDialog = React.forwardRef(function AlertDialog(props: AlertDialogProps, ref: React.Ref<HTMLElement>) {\n    const { children, defaultOpen, onChange, open, trigger, ...otherProps } = props;\n\n    const context = React.useMemo(\n        () => ({\n            props: otherProps,\n            ref,\n        }),\n        [open, otherProps]\n    );\n\n    const handleOpenChange = (open: boolean, eventDetails: AlertDialogPrimitive.Root.ChangeEventDetails) => {\n        if (eventDetails.reason === 'escape-key') {\n            const triggeredFromRadixPortal = (eventDetails.event.target as HTMLElement)?.closest(\n                'div[data-radix-popper-content-wrapper]'\n            );\n\n            if (triggeredFromRadixPortal) {\n                // TODO: This could be removed when all radix overlays are replaced with base UI components, but currently it propagates through and closes the dialog.\n\n                // cancel closing the dialog\n                eventDetails.cancel();\n                // propagate to allow the radix overlay to close\n                eventDetails.allowPropagation();\n                return;\n            } else {\n                eventDetails.cancel();\n                return;\n            }\n        }\n\n        onChange?.(open);\n    };\n\n    return (\n        <AlertDialogContext.Provider value={context}>\n            <AlertDialogPrimitive.Root {...otherProps} defaultOpen={defaultOpen} open={open} onOpenChange={handleOpenChange}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </AlertDialogPrimitive.Root>\n        </AlertDialogContext.Provider>\n    );\n}) as ForwardedAlertDialogWithStatics;\n\nAlertDialog.Trigger = Trigger;\nAlertDialog.Content = Content;\nAlertDialog.Description = Description;\nAlertDialog.Title = Title;\nAlertDialog.Cancel = Cancel;\nAlertDialog.Action = Action;\nAlertDialog.Footer = Footer;\n"],"names":["React","AlertDialog","open","AlertDialogContext","AlertDialogPrimitive","Trigger","Content","Description","Title","Cancel","Action","Footer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA+CO,MAAM,cAAcA,iBAAM,WAAW,SAASC,aAAY,OAAyB,KAA6B;AAC7G,QAAA,EAAE,UAAU,aAAa,UAAU,MAAM,SAAS,GAAG,eAAe;AAE1E,QAAM,UAAUD,iBAAM;AAAA,IAClB,OAAO;AAAA,MACH,OAAO;AAAA,MACP;AAAA,IAAA;AAAA,IAEJ,CAAC,MAAM,UAAU;AAAA,EACrB;AAEM,QAAA,mBAAmB,CAACE,OAAe,iBAA+D;;AAChG,QAAA,aAAa,WAAW,cAAc;AAChC,YAAA,4BAA4B,kBAAa,MAAM,WAAnB,mBAA2C;AAAA,QACzE;AAAA;AAGJ,UAAI,0BAA0B;AAI1B,qBAAa,OAAO;AAEpB,qBAAa,iBAAiB;AAC9B;AAAA,MAAA,OACG;AACH,qBAAa,OAAO;AACpB;AAAA,MAAA;AAAA,IACJ;AAGJ,yCAAWA;AAAAA,EACf;AAGI,SAAAF,iCAAA,cAACG,2BAAmB,UAAnB,EAA4B,OAAO,QAChC,GAAAH,iCAAA,cAACI,YAAqB,YAAA,MAArB,EAA2B,GAAG,YAAY,aAA0B,MAAY,cAAc,iBAC1F,GAAA,0DAAYC,QAAS,SAAA,MAAA,OAAQ,GAC7B,QACL,CACJ;AAER,CAAC;AAED,YAAY,UAAUA,QAAA;AACtB,YAAY,UAAUC,QAAA;AACtB,YAAY,cAAcC,QAAA;AAC1B,YAAY,QAAQC,QAAA;AACpB,YAAY,SAASC,OAAA;AACrB,YAAY,SAASC,OAAA;AACrB,YAAY,SAASC,OAAA;;"}
+{"version":3,"file":"AlertDialog.cjs","sources":["../../../src/components/AlertDialog/AlertDialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\nimport { AlertDialogContext } from './Context';\nimport { Trigger, AlertDialogTriggerProps } from './components/Trigger';\nimport {\n    Cancel,\n    Action,\n    Footer,\n    AlertDialogCancelProps,\n    AlertDialogActionProps,\n    AlertDialogFooterProps,\n} from './components/Footer';\nimport {\n    Description,\n    Title,\n    Content,\n    AlertDialogContentProps,\n    AlertDialogTitleProps,\n    AlertDialogDescriptionProps,\n} from './components/Content';\n\nexport type AlertDialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** Set whether the alert dialog is open by default or not, use when not providing a trigger  */\n    defaultOpen?: boolean;\n    /** Called when the alert dialog opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the dialog from outside the component  */\n    open?: boolean;\n    /** A trigger to be used for the alert dialog, should not be set if `children` already contains a trigger */\n    trigger?: React.JSX.Element;\n    /** A state to be used for the alert dialog, which will add appropriate badge icon next to the title */\n    variant?: 'warning' | 'error' | 'information';\n};\n\nexport type ForwardedAlertDialogWithStatics = React.ForwardRefExoticComponent<\n    AlertDialogProps & React.RefAttributes<HTMLElement>\n> & {\n    Trigger: React.ForwardRefExoticComponent<AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Description: React.ForwardRefExoticComponent<AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;\n    Footer: React.ForwardRefExoticComponent<AlertDialogFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Action: React.ForwardRefExoticComponent<AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;\n    Cancel: React.ForwardRefExoticComponent<AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;\n};\n\nexport const AlertDialog = React.forwardRef(function AlertDialog(props: AlertDialogProps, ref: React.Ref<HTMLElement>) {\n    const { children, defaultOpen, onChange, open, trigger, ...otherProps } = props;\n\n    const context = React.useMemo(\n        () => ({\n            props: otherProps,\n            ref,\n        }),\n        [open, otherProps]\n    );\n\n    const handleOpenChange = (open: boolean, eventDetails: AlertDialogPrimitive.Root.ChangeEventDetails) => {\n        if (eventDetails.reason === 'escape-key') {\n            const triggeredFromRadixPortal = (eventDetails.event.target as HTMLElement)?.closest(\n                'div[data-radix-popper-content-wrapper]'\n            );\n\n            if (triggeredFromRadixPortal) {\n                // TODO: This could be removed when all radix overlays are replaced with base UI components, but currently it propagates through and closes the dialog.\n\n                // cancel closing the dialog\n                eventDetails.cancel();\n                // propagate to allow the radix overlay to close\n                eventDetails.allowPropagation();\n                return;\n            } else {\n                eventDetails.cancel();\n                return;\n            }\n        }\n\n        onChange?.(open);\n    };\n\n    return (\n        <AlertDialogContext.Provider value={context}>\n            <AlertDialogPrimitive.Root {...otherProps} defaultOpen={defaultOpen} open={open} onOpenChange={handleOpenChange}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </AlertDialogPrimitive.Root>\n        </AlertDialogContext.Provider>\n    );\n}) as ForwardedAlertDialogWithStatics;\n\nAlertDialog.Trigger = Trigger;\nAlertDialog.Content = Content;\nAlertDialog.Description = Description;\nAlertDialog.Title = Title;\nAlertDialog.Cancel = Cancel;\nAlertDialog.Action = Action;\nAlertDialog.Footer = Footer;\n"],"names":["React","AlertDialog","open","AlertDialogContext","AlertDialogPrimitive","Trigger","Content","Description","Title","Cancel","Action","Footer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA+CO,MAAM,cAAcA,iBAAM,WAAW,SAASC,aAAY,OAAyB,KAA6B;AACnH,QAAM,EAAE,UAAU,aAAa,UAAU,MAAM,SAAS,GAAG,eAAe;AAE1E,QAAM,UAAUD,iBAAM;AAAA,IAClB,OAAO;AAAA,MACH,OAAO;AAAA,MACP;AAAA,IAAA;AAAA,IAEJ,CAAC,MAAM,UAAU;AAAA,EAAA;AAGrB,QAAM,mBAAmB,CAACE,OAAe,iBAA+D;AACpG,QAAI,aAAa,WAAW,cAAc;AACtC,YAAM,2BAA4B,aAAa,MAAM,QAAwB;AAAA,QACzE;AAAA,MAAA;AAGJ,UAAI,0BAA0B;AAI1B,qBAAa,OAAA;AAEb,qBAAa,iBAAA;AACb;AAAA,MACJ,OAAO;AACH,qBAAa,OAAA;AACb;AAAA,MACJ;AAAA,IACJ;AAEA,eAAWA,KAAI;AAAA,EACnB;AAEA,SACIF,iCAAA,cAACG,QAAAA,mBAAmB,UAAnB,EAA4B,OAAO,QAAA,GAChCH,iCAAA,cAACI,YAAAA,YAAqB,MAArB,EAA2B,GAAG,YAAY,aAA0B,MAAY,cAAc,iBAAA,GAC1F,0DAAYC,QAAAA,SAAA,MAAS,OAAQ,GAC7B,QACL,CACJ;AAER,CAAC;AAED,YAAY,UAAUA,QAAAA;AACtB,YAAY,UAAUC,QAAAA;AACtB,YAAY,cAAcC,QAAAA;AAC1B,YAAY,QAAQC,QAAAA;AACpB,YAAY,SAASC,OAAAA;AACrB,YAAY,SAASC,OAAAA;AACrB,YAAY,SAASC,OAAAA;;"}

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -11,7 +11,7 @@ export type AlertDialogProps = {
     /** Control the open state of the dialog from outside the component  */
     open?: boolean;
     /** A trigger to be used for the alert dialog, should not be set if `children` already contains a trigger */
-    trigger?: JSX.Element;
+    trigger?: React.JSX.Element;
     /** A state to be used for the alert dialog, which will add appropriate badge icon next to the title */
     variant?: 'warning' | 'error' | 'information';
 };

package/dist/components/AlertDialog/AlertDialog.js

@@ -14,9 +14,8 @@ const AlertDialog = React.forwardRef(function AlertDialog2(props, ref) {
     [open, otherProps]
   );
   const handleOpenChange = (open2, eventDetails) => {
-    var _a;
     if (eventDetails.reason === "escape-key") {
-      const triggeredFromRadixPortal = (_a = eventDetails.event.target) == null ? void 0 : _a.closest(
+      const triggeredFromRadixPortal = eventDetails.event.target?.closest(
         "div[data-radix-popper-content-wrapper]"
       );
       if (triggeredFromRadixPortal) {
@@ -28,7 +27,7 @@ const AlertDialog = React.forwardRef(function AlertDialog2(props, ref) {
         return;
       }
     }
-    onChange == null ? void 0 : onChange(open2);
+    onChange?.(open2);
   };
   return /* @__PURE__ */ React.createElement(AlertDialogContext.Provider, { value: context }, /* @__PURE__ */ React.createElement(AlertDialog$1.Root, { ...otherProps, defaultOpen, open, onOpenChange: handleOpenChange }, trigger && /* @__PURE__ */ React.createElement(Trigger, null, trigger), children));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.js","sources":["../../../src/components/AlertDialog/AlertDialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\nimport { AlertDialogContext } from './Context';\nimport { Trigger, AlertDialogTriggerProps } from './components/Trigger';\nimport {\n    Cancel,\n    Action,\n    Footer,\n    AlertDialogCancelProps,\n    AlertDialogActionProps,\n    AlertDialogFooterProps,\n} from './components/Footer';\nimport {\n    Description,\n    Title,\n    Content,\n    AlertDialogContentProps,\n    AlertDialogTitleProps,\n    AlertDialogDescriptionProps,\n} from './components/Content';\n\nexport type AlertDialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** Set whether the alert dialog is open by default or not, use when not providing a trigger  */\n    defaultOpen?: boolean;\n    /** Called when the alert dialog opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the dialog from outside the component  */\n    open?: boolean;\n    /** A trigger to be used for the alert dialog, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n    /** A state to be used for the alert dialog, which will add appropriate badge icon next to the title */\n    variant?: 'warning' | 'error' | 'information';\n};\n\nexport type ForwardedAlertDialogWithStatics = React.ForwardRefExoticComponent<\n    AlertDialogProps & React.RefAttributes<HTMLElement>\n> & {\n    Trigger: React.ForwardRefExoticComponent<AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Description: React.ForwardRefExoticComponent<AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;\n    Footer: React.ForwardRefExoticComponent<AlertDialogFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Action: React.ForwardRefExoticComponent<AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;\n    Cancel: React.ForwardRefExoticComponent<AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;\n};\n\nexport const AlertDialog = React.forwardRef(function AlertDialog(props: AlertDialogProps, ref: React.Ref<HTMLElement>) {\n    const { children, defaultOpen, onChange, open, trigger, ...otherProps } = props;\n\n    const context = React.useMemo(\n        () => ({\n            props: otherProps,\n            ref,\n        }),\n        [open, otherProps]\n    );\n\n    const handleOpenChange = (open: boolean, eventDetails: AlertDialogPrimitive.Root.ChangeEventDetails) => {\n        if (eventDetails.reason === 'escape-key') {\n            const triggeredFromRadixPortal = (eventDetails.event.target as HTMLElement)?.closest(\n                'div[data-radix-popper-content-wrapper]'\n            );\n\n            if (triggeredFromRadixPortal) {\n                // TODO: This could be removed when all radix overlays are replaced with base UI components, but currently it propagates through and closes the dialog.\n\n                // cancel closing the dialog\n                eventDetails.cancel();\n                // propagate to allow the radix overlay to close\n                eventDetails.allowPropagation();\n                return;\n            } else {\n                eventDetails.cancel();\n                return;\n            }\n        }\n\n        onChange?.(open);\n    };\n\n    return (\n        <AlertDialogContext.Provider value={context}>\n            <AlertDialogPrimitive.Root {...otherProps} defaultOpen={defaultOpen} open={open} onOpenChange={handleOpenChange}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </AlertDialogPrimitive.Root>\n        </AlertDialogContext.Provider>\n    );\n}) as ForwardedAlertDialogWithStatics;\n\nAlertDialog.Trigger = Trigger;\nAlertDialog.Content = Content;\nAlertDialog.Description = Description;\nAlertDialog.Title = Title;\nAlertDialog.Cancel = Cancel;\nAlertDialog.Action = Action;\nAlertDialog.Footer = Footer;\n"],"names":["AlertDialog","open","AlertDialogPrimitive"],"mappings":";;;;;;AA+CO,MAAM,cAAc,MAAM,WAAW,SAASA,aAAY,OAAyB,KAA6B;AAC7G,QAAA,EAAE,UAAU,aAAa,UAAU,MAAM,SAAS,GAAG,eAAe;AAE1E,QAAM,UAAU,MAAM;AAAA,IAClB,OAAO;AAAA,MACH,OAAO;AAAA,MACP;AAAA,IAAA;AAAA,IAEJ,CAAC,MAAM,UAAU;AAAA,EACrB;AAEM,QAAA,mBAAmB,CAACC,OAAe,iBAA+D;;AAChG,QAAA,aAAa,WAAW,cAAc;AAChC,YAAA,4BAA4B,kBAAa,MAAM,WAAnB,mBAA2C;AAAA,QACzE;AAAA;AAGJ,UAAI,0BAA0B;AAI1B,qBAAa,OAAO;AAEpB,qBAAa,iBAAiB;AAC9B;AAAA,MAAA,OACG;AACH,qBAAa,OAAO;AACpB;AAAA,MAAA;AAAA,IACJ;AAGJ,yCAAWA;AAAAA,EACf;AAGI,SAAA,sBAAA,cAAC,mBAAmB,UAAnB,EAA4B,OAAO,QAChC,GAAA,sBAAA,cAACC,cAAqB,MAArB,EAA2B,GAAG,YAAY,aAA0B,MAAY,cAAc,iBAC1F,GAAA,+CAAY,SAAS,MAAA,OAAQ,GAC7B,QACL,CACJ;AAER,CAAC;AAED,YAAY,UAAU;AACtB,YAAY,UAAU;AACtB,YAAY,cAAc;AAC1B,YAAY,QAAQ;AACpB,YAAY,SAAS;AACrB,YAAY,SAAS;AACrB,YAAY,SAAS;"}
+{"version":3,"file":"AlertDialog.js","sources":["../../../src/components/AlertDialog/AlertDialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\nimport { AlertDialogContext } from './Context';\nimport { Trigger, AlertDialogTriggerProps } from './components/Trigger';\nimport {\n    Cancel,\n    Action,\n    Footer,\n    AlertDialogCancelProps,\n    AlertDialogActionProps,\n    AlertDialogFooterProps,\n} from './components/Footer';\nimport {\n    Description,\n    Title,\n    Content,\n    AlertDialogContentProps,\n    AlertDialogTitleProps,\n    AlertDialogDescriptionProps,\n} from './components/Content';\n\nexport type AlertDialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** Set whether the alert dialog is open by default or not, use when not providing a trigger  */\n    defaultOpen?: boolean;\n    /** Called when the alert dialog opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the dialog from outside the component  */\n    open?: boolean;\n    /** A trigger to be used for the alert dialog, should not be set if `children` already contains a trigger */\n    trigger?: React.JSX.Element;\n    /** A state to be used for the alert dialog, which will add appropriate badge icon next to the title */\n    variant?: 'warning' | 'error' | 'information';\n};\n\nexport type ForwardedAlertDialogWithStatics = React.ForwardRefExoticComponent<\n    AlertDialogProps & React.RefAttributes<HTMLElement>\n> & {\n    Trigger: React.ForwardRefExoticComponent<AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Description: React.ForwardRefExoticComponent<AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;\n    Footer: React.ForwardRefExoticComponent<AlertDialogFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Action: React.ForwardRefExoticComponent<AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;\n    Cancel: React.ForwardRefExoticComponent<AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;\n};\n\nexport const AlertDialog = React.forwardRef(function AlertDialog(props: AlertDialogProps, ref: React.Ref<HTMLElement>) {\n    const { children, defaultOpen, onChange, open, trigger, ...otherProps } = props;\n\n    const context = React.useMemo(\n        () => ({\n            props: otherProps,\n            ref,\n        }),\n        [open, otherProps]\n    );\n\n    const handleOpenChange = (open: boolean, eventDetails: AlertDialogPrimitive.Root.ChangeEventDetails) => {\n        if (eventDetails.reason === 'escape-key') {\n            const triggeredFromRadixPortal = (eventDetails.event.target as HTMLElement)?.closest(\n                'div[data-radix-popper-content-wrapper]'\n            );\n\n            if (triggeredFromRadixPortal) {\n                // TODO: This could be removed when all radix overlays are replaced with base UI components, but currently it propagates through and closes the dialog.\n\n                // cancel closing the dialog\n                eventDetails.cancel();\n                // propagate to allow the radix overlay to close\n                eventDetails.allowPropagation();\n                return;\n            } else {\n                eventDetails.cancel();\n                return;\n            }\n        }\n\n        onChange?.(open);\n    };\n\n    return (\n        <AlertDialogContext.Provider value={context}>\n            <AlertDialogPrimitive.Root {...otherProps} defaultOpen={defaultOpen} open={open} onOpenChange={handleOpenChange}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </AlertDialogPrimitive.Root>\n        </AlertDialogContext.Provider>\n    );\n}) as ForwardedAlertDialogWithStatics;\n\nAlertDialog.Trigger = Trigger;\nAlertDialog.Content = Content;\nAlertDialog.Description = Description;\nAlertDialog.Title = Title;\nAlertDialog.Cancel = Cancel;\nAlertDialog.Action = Action;\nAlertDialog.Footer = Footer;\n"],"names":["AlertDialog","open","AlertDialogPrimitive"],"mappings":";;;;;;AA+CO,MAAM,cAAc,MAAM,WAAW,SAASA,aAAY,OAAyB,KAA6B;AACnH,QAAM,EAAE,UAAU,aAAa,UAAU,MAAM,SAAS,GAAG,eAAe;AAE1E,QAAM,UAAU,MAAM;AAAA,IAClB,OAAO;AAAA,MACH,OAAO;AAAA,MACP;AAAA,IAAA;AAAA,IAEJ,CAAC,MAAM,UAAU;AAAA,EAAA;AAGrB,QAAM,mBAAmB,CAACC,OAAe,iBAA+D;AACpG,QAAI,aAAa,WAAW,cAAc;AACtC,YAAM,2BAA4B,aAAa,MAAM,QAAwB;AAAA,QACzE;AAAA,MAAA;AAGJ,UAAI,0BAA0B;AAI1B,qBAAa,OAAA;AAEb,qBAAa,iBAAA;AACb;AAAA,MACJ,OAAO;AACH,qBAAa,OAAA;AACb;AAAA,MACJ;AAAA,IACJ;AAEA,eAAWA,KAAI;AAAA,EACnB;AAEA,SACI,sBAAA,cAAC,mBAAmB,UAAnB,EAA4B,OAAO,QAAA,GAChC,sBAAA,cAACC,cAAqB,MAArB,EAA2B,GAAG,YAAY,aAA0B,MAAY,cAAc,iBAAA,GAC1F,+CAAY,SAAA,MAAS,OAAQ,GAC7B,QACL,CACJ;AAER,CAAC;AAED,YAAY,UAAU;AACtB,YAAY,UAAU;AACtB,YAAY,cAAc;AAC1B,YAAY,QAAQ;AACpB,YAAY,SAAS;AACrB,YAAY,SAAS;AACrB,YAAY,SAAS;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Context.cjs","sources":["../../../src/components/AlertDialog/Context.tsx"],"sourcesContent":["/* oxlint-disable no-empty-function */\nimport React from 'react';\n\nexport type AlertDialogContext = {\n    props: Record<string, any>;\n    ref: React.Ref<HTMLElement>;\n};\n\nexport const AlertDialogContext = React.createContext<AlertDialogContext>({\n    props: {},\n    ref: null,\n});\n\nexport const useCurrentAlertDialog = () => {\n    return React.useContext(AlertDialogContext);\n};\n"],"names":[],"mappings":";;;AAQa,MAAA,qBAAqB,MAAM,cAAkC;AAAA,EACtE,OAAO,CAAC;AAAA,EACR,KAAK;AACT,CAAC;AAEM,MAAM,wBAAwB,MAAM;AAChC,SAAA,MAAM,WAAW,kBAAkB;AAC9C;;;"}
+{"version":3,"file":"Context.cjs","sources":["../../../src/components/AlertDialog/Context.tsx"],"sourcesContent":["/* oxlint-disable no-empty-function */\nimport React from 'react';\n\nexport type AlertDialogContext = {\n    props: Record<string, any>;\n    ref: React.Ref<HTMLElement>;\n};\n\nexport const AlertDialogContext = React.createContext<AlertDialogContext>({\n    props: {},\n    ref: null,\n});\n\nexport const useCurrentAlertDialog = () => {\n    return React.useContext(AlertDialogContext);\n};\n"],"names":[],"mappings":";;;AAQO,MAAM,qBAAqB,MAAM,cAAkC;AAAA,EACtE,OAAO,CAAA;AAAA,EACP,KAAK;AACT,CAAC;AAEM,MAAM,wBAAwB,MAAM;AACvC,SAAO,MAAM,WAAW,kBAAkB;AAC9C;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Context.js","sources":["../../../src/components/AlertDialog/Context.tsx"],"sourcesContent":["/* oxlint-disable no-empty-function */\nimport React from 'react';\n\nexport type AlertDialogContext = {\n    props: Record<string, any>;\n    ref: React.Ref<HTMLElement>;\n};\n\nexport const AlertDialogContext = React.createContext<AlertDialogContext>({\n    props: {},\n    ref: null,\n});\n\nexport const useCurrentAlertDialog = () => {\n    return React.useContext(AlertDialogContext);\n};\n"],"names":["React"],"mappings":";AAQa,MAAA,qBAAqBA,eAAM,cAAkC;AAAA,EACtE,OAAO,CAAC;AAAA,EACR,KAAK;AACT,CAAC;AAEM,MAAM,wBAAwB,MAAM;AAChC,SAAAA,eAAM,WAAW,kBAAkB;AAC9C;"}
+{"version":3,"file":"Context.js","sources":["../../../src/components/AlertDialog/Context.tsx"],"sourcesContent":["/* oxlint-disable no-empty-function */\nimport React from 'react';\n\nexport type AlertDialogContext = {\n    props: Record<string, any>;\n    ref: React.Ref<HTMLElement>;\n};\n\nexport const AlertDialogContext = React.createContext<AlertDialogContext>({\n    props: {},\n    ref: null,\n});\n\nexport const useCurrentAlertDialog = () => {\n    return React.useContext(AlertDialogContext);\n};\n"],"names":["React"],"mappings":";AAQO,MAAM,qBAAqBA,eAAM,cAAkC;AAAA,EACtE,OAAO,CAAA;AAAA,EACP,KAAK;AACT,CAAC;AAEM,MAAM,wBAAwB,MAAM;AACvC,SAAOA,eAAM,WAAW,kBAAkB;AAC9C;"}

package/dist/components/AlertDialog/components/Content.cjs

@@ -24,37 +24,30 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-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__namespace.forwardRef(function AlertDialogTitle(props, ref) {
   const { props: parentProps } = Context.useCurrentAlertDialog();
-  const iconProps = iconPropsByVariant(parentProps.variant);
+  const iconProps = parentProps.variant ? ICON_PROPS_BY_VARIANT[parentProps.variant] : void 0;
   return /* @__PURE__ */ React__namespace.createElement(alertDialog.AlertDialog.Title, { ...props, className: cn("flex items-center", props.className), ref }, iconProps ? /* @__PURE__ */ React__namespace.createElement(BadgeIcon.BadgeIcon, { ...iconProps, className: "mr-2" }) : void 0, props.children);
 });
 const Description = React__namespace.forwardRef(function AlertDialogDescription(props, ref) {
   return /* @__PURE__ */ React__namespace.createElement(alertDialog.AlertDialog.Description, { ref, className: props.className, ...props });
 });
 const Content = React__namespace.forwardRef(function AlertDialogContent(props, ref) {
-  const className = cn("p-6", util.getDialogPositionClassnames(), util.getDialogStylingClassnames(), util.getDialogSizeClassnames("dialog"));
+  const className = cn("p-6", util.DIALOG_POSITION_CLASSNAMES, util.DIALOG_STYLING_CLASSNAMES, util.DIALOG_SIZE_CLASSNAME.dialog);
   return /* @__PURE__ */ React__namespace.createElement(alertDialog.AlertDialog.Portal, null, /* @__PURE__ */ React__namespace.createElement(Backdrop.Backdrop, null, /* @__PURE__ */ React__namespace.createElement(alertDialog.AlertDialog.Popup, { ...props, ref, className }, props.children)));
 });
 exports.Content = Content;

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

@@ -1 +1 @@
-{"version":3,"file":"Content.cjs","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":["React","useCurrentAlertDialog","AlertDialogPrimitive","BadgeIcon","getDialogPositionClassnames","getDialogStylingClassnames","getDialogSizeClassnames","Backdrop"],"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,QAAQA,iBAAM,WAAW,SAAS,iBAC3C,OACA,KACF;AACE,QAAM,EAAE,OAAO,YAAY,IAAIC,8BAAsB;AAE/C,QAAA,YAAY,mBAAmB,YAAY,OAAO;AAEpD,SAAAD,iCAAA,cAACE,wBAAqB,OAArB,EAA4B,GAAG,OAAO,WAAW,GAAG,qBAAqB,MAAM,SAAS,GAAG,OACvF,YAAaF,iCAAA,cAAAG,UAAAA,WAAA,EAAW,GAAG,WAAW,WAAU,OAAO,CAAA,IAAK,QAC5D,MAAM,QACX;AAER,CAAC;AAGM,MAAM,cAAcH,iBAAM,WAAW,SAAS,uBACjD,OACA,KACF;AACS,SAAAA,iCAAA,cAACE,wBAAqB,aAArB,EAAiC,KAAU,WAAW,MAAM,WAAY,GAAG,MAAO,CAAA;AAC9F,CAAC;AAOM,MAAM,UAAUF,iBAAM,WAAW,SAAS,mBAC7C,OACA,KACF;AACQ,QAAA,YAAY,GAAG,OAAOI,KAAAA,+BAA+BC,gCAA2B,GAAGC,6BAAwB,QAAQ,CAAC;AAE1H,wDACKJ,YAAAA,YAAqB,QAArB,MACGF,iCAAA,cAACO,yBACIP,iCAAA,cAAAE,YAAA,YAAqB,OAArB,EAA4B,GAAG,OAAO,KAAU,aAC5C,MAAM,QACX,CACJ,CACJ;AAER,CAAC;;;;"}
+{"version":3,"file":"Content.cjs","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":["React","useCurrentAlertDialog","AlertDialogPrimitive","BadgeIcon","DIALOG_POSITION_CLASSNAMES","DIALOG_STYLING_CLASSNAMES","DIALOG_SIZE_CLASSNAME","Backdrop"],"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,QAAQA,iBAAM,WAAW,SAAS,iBAC3C,OACA,KACF;AACE,QAAM,EAAE,OAAO,YAAA,IAAgBC,8BAAA;AAE/B,QAAM,YAAY,YAAY,UACxB,sBAAsB,YAAY,OAA6C,IAC/E;AACN,SACID,iCAAA,cAACE,YAAAA,YAAqB,OAArB,EAA4B,GAAG,OAAO,WAAW,GAAG,qBAAqB,MAAM,SAAS,GAAG,OACvF,YAAYF,iCAAA,cAACG,UAAAA,WAAA,EAAW,GAAG,WAAW,WAAU,OAAA,CAAO,IAAK,QAC5D,MAAM,QACX;AAER,CAAC;AAGM,MAAM,cAAcH,iBAAM,WAAW,SAAS,uBACjD,OACA,KACF;AACE,SAAOA,iCAAA,cAACE,YAAAA,YAAqB,aAArB,EAAiC,KAAU,WAAW,MAAM,WAAY,GAAG,MAAA,CAAO;AAC9F,CAAC;AAOM,MAAM,UAAUF,iBAAM,WAAW,SAAS,mBAC7C,OACA,KACF;AACE,QAAM,YAAY,GAAG,OAAOI,KAAAA,4BAA4BC,KAAAA,2BAA2BC,KAAAA,sBAAsB,MAAM;AAE/G,wDACKJ,YAAAA,YAAqB,QAArB,MACGF,iCAAA,cAACO,SAAAA,gBACGP,iCAAA,cAACE,YAAAA,YAAqB,OAArB,EAA4B,GAAG,OAAO,KAAU,aAC5C,MAAM,QACX,CACJ,CACJ;AAER,CAAC;;;;"}