@fuf-stack/pixels 1.8.0 → 1.10.0

package/dist/Accordion/Accordion.cjs

@@ -0,0 +1,63 @@
+require("../_virtual/_rolldown/runtime.cjs");
+let _heroui_accordion = require("@heroui/accordion");
+let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Accordion/Accordion.tsx
+const accordionVariants = (0, _fuf_stack_pixel_utils.tv)({
+	slots: {
+		base: "",
+		content: "px-4",
+		heading: "px-4",
+		indicator: "",
+		startContent: "",
+		subtitle: "",
+		title: "",
+		titleWrapper: "",
+		trigger: "cursor-pointer",
+		wrapper: "px-0"
+	},
+	variants: {
+		indicatorLeft: { true: {
+			content: "pl-7",
+			indicator: "-rotate-180 data-[open=true]:-rotate-90",
+			trigger: "flex-row-reverse"
+		} },
+		showDivider: { true: { wrapper: "divide-y divide-solid divide-divider" } },
+		showBottomTopDivider: { true: { wrapper: "border-b border-t border-solid border-divider" } }
+	}
+});
+/**
+* Accordion component based on [HeroUI Accordion](https://www.heroui.com//docs/components/accordion)
+*/
+const Accordion = ({ accordionItems, className: _className = void 0, defaultSelectedKeys = [], disabled = false, disabledKeys = [], disallowEmptySelection = false, dividerProps = {}, indicatorLeft = false, onSelectionChange = void 0, selectedKeys = void 0, selectionMode = "multiple", showDivider = true, variant = "light" }) => {
+	const classNames = (0, _fuf_stack_pixel_utils.variantsToClassNames)(accordionVariants({
+		indicatorLeft,
+		showDivider: showDivider && variant !== "splitted",
+		showBottomTopDivider: showDivider && variant === "light"
+	}), _className, "wrapper");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_accordion.Accordion, {
+		className: classNames.wrapper,
+		defaultSelectedKeys,
+		disabledKeys,
+		disallowEmptySelection,
+		dividerProps,
+		isDisabled: disabled,
+		itemClasses: classNames,
+		onSelectionChange,
+		selectedKeys,
+		selectionMode,
+		showDivider: false,
+		variant,
+		children: accordionItems.map((item, index) => {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_accordion.AccordionItem, {
+				isDisabled: disabled || item?.disabled,
+				...item
+			}, index);
+		})
+	});
+};
+//#endregion
+exports.accordionVariants = accordionVariants;
+exports.default = Accordion;
+
+//# sourceMappingURL=Accordion.cjs.map

package/dist/Accordion/Accordion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.cjs","names":["HeroAccordion","HeroAccordionItem"],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { DividerProps } from '@heroui/divider';\nimport type { ReactNode } from 'react';\n\nimport {\n  Accordion as HeroAccordion,\n  AccordionItem as HeroAccordionItem,\n} from '@heroui/accordion';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// accordion styling variants\n// see: https://www.heroui.com//docs/components/accordion#accordion-item-slots\nexport const accordionVariants = tv({\n  slots: {\n    base: '',\n    content: 'px-4',\n    heading: 'px-4',\n    indicator: '',\n    startContent: '',\n    subtitle: '',\n    title: '',\n    titleWrapper: '',\n    trigger: 'cursor-pointer',\n    // outer accordion wrapper\n    wrapper: 'px-0',\n  },\n  variants: {\n    indicatorLeft: {\n      true: {\n        content: 'pl-7',\n        indicator: '-rotate-180 data-[open=true]:-rotate-90',\n        trigger: 'flex-row-reverse',\n      },\n    },\n    showDivider: {\n      true: {\n        wrapper: 'divide-y divide-solid divide-divider',\n      },\n    },\n    showBottomTopDivider: {\n      true: {\n        wrapper: 'border-b border-t border-solid border-divider',\n      },\n    },\n  },\n});\n\nexport interface AccordionItemProps {\n  /** Content of the accordion item */\n  children: ReactNode;\n  /** Disables the accordion item */\n  disabled?: boolean;\n  /** Accordion item title */\n  title: ReactNode;\n  /** Accordion item subtitle */\n  subtitle?: ReactNode;\n}\n\ntype VariantProps = TVProps<typeof accordionVariants>;\ntype ClassName = TVClassName<typeof accordionVariants>;\n\nexport interface AccordionProps extends VariantProps {\n  /** Props for AccordionItems, will render the accordion items programmatically */\n  accordionItems: AccordionItemProps[];\n  /** CSS class name */\n  className?: ClassName;\n  /** Array of keys for the AccordionItem(s) to be expanded by default */\n  defaultSelectedKeys?: undefined | 'all' | Iterable<number | string>;\n  /** Disables the Accordion */\n  disabled?: boolean;\n  /** Array of keys for the AccordionItems to disable */\n  disabledKeys?: Iterable<number | string>;\n  /** Force always one AccordionItem to be open. */\n  disallowEmptySelection?: boolean;\n  /** props for styling the Divider */\n  dividerProps?: DividerProps;\n  /** Hide the expanded/collapsed indicator icon */\n  hideIndicator?: boolean;\n  /** Callback function for when a Accordion Item is expanded or collapsed */\n  onSelectionChange?: (keys: 'all' | Iterable<number | string>) => unknown;\n  /** Selected keys (controlled) */\n  selectedKeys?: undefined | 'all' | Iterable<number | string>;\n  /** Set whether multiple or only a single AccordionItems can be expanded */\n  selectionMode?: 'single' | 'multiple';\n  /** Enable or disable the divider between each AccordionItem */\n  showDivider?: boolean;\n  /** Style variant of the Accordion */\n  variant?: 'light' | 'shadow' | 'bordered' | 'splitted';\n}\n\n/**\n * Accordion component based on [HeroUI Accordion](https://www.heroui.com//docs/components/accordion)\n */\nconst Accordion = ({\n  accordionItems,\n  className: _className = undefined,\n  defaultSelectedKeys = [],\n  disabled = false,\n  disabledKeys = [],\n  disallowEmptySelection = false,\n  dividerProps = {},\n  indicatorLeft = false,\n  onSelectionChange = undefined,\n  selectedKeys = undefined,\n  selectionMode = 'multiple',\n  showDivider = true,\n  variant = 'light',\n}: AccordionProps) => {\n  // itemClasses from className slots\n  const variants = accordionVariants({\n    indicatorLeft,\n    showDivider: showDivider && variant !== 'splitted',\n    showBottomTopDivider: showDivider && variant === 'light',\n  });\n  const classNames = variantsToClassNames(variants, _className, 'wrapper');\n\n  return (\n    <HeroAccordion\n      className={classNames.wrapper}\n      defaultSelectedKeys={defaultSelectedKeys}\n      disabledKeys={disabledKeys}\n      disallowEmptySelection={disallowEmptySelection}\n      dividerProps={dividerProps}\n      isDisabled={disabled}\n      itemClasses={classNames}\n      onSelectionChange={onSelectionChange}\n      selectedKeys={selectedKeys}\n      selectionMode={selectionMode}\n      showDivider={false}\n      variant={variant}\n    >\n      {accordionItems.map((item, index) => {\n        return (\n          <HeroAccordionItem\n            // eslint-disable-next-line react/no-array-index-key\n            key={index}\n            isDisabled={disabled || item?.disabled}\n            {...item}\n          />\n        );\n      })}\n    </HeroAccordion>\n  );\n};\n\nexport default Accordion;\n"],"mappings":";;;;;AAaA,MAAa,qBAAA,GAAA,uBAAA,IAAuB;CAClC,OAAO;EACL,MAAM;EACN,SAAS;EACT,SAAS;EACT,WAAW;EACX,cAAc;EACd,UAAU;EACV,OAAO;EACP,cAAc;EACd,SAAS;EAET,SAAS;CACX;CACA,UAAU;EACR,eAAe,EACb,MAAM;GACJ,SAAS;GACT,WAAW;GACX,SAAS;EACX,EACF;EACA,aAAa,EACX,MAAM,EACJ,SAAS,uCACX,EACF;EACA,sBAAsB,EACpB,MAAM,EACJ,SAAS,gDACX,EACF;CACF;AACF,CAAC;;;;AAgDD,MAAM,aAAa,EACjB,gBACA,WAAW,aAAa,KAAA,GACxB,sBAAsB,CAAC,GACvB,WAAW,OACX,eAAe,CAAC,GAChB,yBAAyB,OACzB,eAAe,CAAC,GAChB,gBAAgB,OAChB,oBAAoB,KAAA,GACpB,eAAe,KAAA,GACf,gBAAgB,YAChB,cAAc,MACd,UAAU,cACU;CAOpB,MAAM,cAAA,GAAA,uBAAA,sBALW,kBAAkB;EACjC;EACA,aAAa,eAAe,YAAY;EACxC,sBAAsB,eAAe,YAAY;CACnD,CAC+C,GAAG,YAAY,SAAS;CAEvE,OACE,iBAAA,GAAA,kBAAA,KAACA,kBAAAA,WAAD;EACE,WAAW,WAAW;EACD;EACP;EACU;EACV;EACd,YAAY;EACZ,aAAa;EACM;EACL;EACC;EACf,aAAa;EACJ;YAER,eAAe,KAAK,MAAM,UAAU;GACnC,OACE,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,eAAD;IAGE,YAAY,YAAY,MAAM;IAC9B,GAAI;GACL,GAHM,KAGN;EAEL,CAAC;CACY,CAAA;AAEnB"}

package/dist/Accordion/Accordion.d.cts

@@ -0,0 +1,154 @@
+import { TVClassName, TVProps } from "@fuf-stack/pixel-utils";
+import { DividerProps } from "@heroui/divider";
+import { ReactNode } from "react";
+
+//#region src/Accordion/Accordion.d.ts
+declare const accordionVariants: import("tailwind-variants").TVReturnType<{
+  indicatorLeft: {
+    true: {
+      content: string;
+      indicator: string;
+      trigger: string;
+    };
+  };
+  showDivider: {
+    true: {
+      wrapper: string;
+    };
+  };
+  showBottomTopDivider: {
+    true: {
+      wrapper: string;
+    };
+  };
+}, {
+  base: string;
+  content: string;
+  heading: string;
+  indicator: string;
+  startContent: string;
+  subtitle: string;
+  title: string;
+  titleWrapper: string;
+  trigger: string;
+  wrapper: string;
+}, undefined, {
+  indicatorLeft: {
+    true: {
+      content: string;
+      indicator: string;
+      trigger: string;
+    };
+  };
+  showDivider: {
+    true: {
+      wrapper: string;
+    };
+  };
+  showBottomTopDivider: {
+    true: {
+      wrapper: string;
+    };
+  };
+}, {
+  base: string;
+  content: string;
+  heading: string;
+  indicator: string;
+  startContent: string;
+  subtitle: string;
+  title: string;
+  titleWrapper: string;
+  trigger: string;
+  wrapper: string;
+}, import("tailwind-variants").TVReturnType<{
+  indicatorLeft: {
+    true: {
+      content: string;
+      indicator: string;
+      trigger: string;
+    };
+  };
+  showDivider: {
+    true: {
+      wrapper: string;
+    };
+  };
+  showBottomTopDivider: {
+    true: {
+      wrapper: string;
+    };
+  };
+}, {
+  base: string;
+  content: string;
+  heading: string;
+  indicator: string;
+  startContent: string;
+  subtitle: string;
+  title: string;
+  titleWrapper: string;
+  trigger: string;
+  wrapper: string;
+}, undefined, unknown, unknown, undefined>>;
+interface AccordionItemProps {
+  /** Content of the accordion item */
+  children: ReactNode;
+  /** Disables the accordion item */
+  disabled?: boolean;
+  /** Accordion item title */
+  title: ReactNode;
+  /** Accordion item subtitle */
+  subtitle?: ReactNode;
+}
+type VariantProps = TVProps<typeof accordionVariants>;
+type ClassName = TVClassName<typeof accordionVariants>;
+interface AccordionProps extends VariantProps {
+  /** Props for AccordionItems, will render the accordion items programmatically */
+  accordionItems: AccordionItemProps[];
+  /** CSS class name */
+  className?: ClassName;
+  /** Array of keys for the AccordionItem(s) to be expanded by default */
+  defaultSelectedKeys?: undefined | 'all' | Iterable<number | string>;
+  /** Disables the Accordion */
+  disabled?: boolean;
+  /** Array of keys for the AccordionItems to disable */
+  disabledKeys?: Iterable<number | string>;
+  /** Force always one AccordionItem to be open. */
+  disallowEmptySelection?: boolean;
+  /** props for styling the Divider */
+  dividerProps?: DividerProps;
+  /** Hide the expanded/collapsed indicator icon */
+  hideIndicator?: boolean;
+  /** Callback function for when a Accordion Item is expanded or collapsed */
+  onSelectionChange?: (keys: 'all' | Iterable<number | string>) => unknown;
+  /** Selected keys (controlled) */
+  selectedKeys?: undefined | 'all' | Iterable<number | string>;
+  /** Set whether multiple or only a single AccordionItems can be expanded */
+  selectionMode?: 'single' | 'multiple';
+  /** Enable or disable the divider between each AccordionItem */
+  showDivider?: boolean;
+  /** Style variant of the Accordion */
+  variant?: 'light' | 'shadow' | 'bordered' | 'splitted';
+}
+/**
+ * Accordion component based on [HeroUI Accordion](https://www.heroui.com//docs/components/accordion)
+ */
+declare const Accordion: ({
+  accordionItems,
+  className: _className,
+  defaultSelectedKeys,
+  disabled,
+  disabledKeys,
+  disallowEmptySelection,
+  dividerProps,
+  indicatorLeft,
+  onSelectionChange,
+  selectedKeys,
+  selectionMode,
+  showDivider,
+  variant
+}: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Accordion, AccordionItemProps, AccordionProps, accordionVariants };
+//# sourceMappingURL=Accordion.d.cts.map

package/dist/Accordion/Accordion.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.cts","names":[],"sources":["../../src/Accordion/Accordion.tsx"],"mappings":";;;;;cAaa,iBAAA,8BAAiB,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAmCb,kBAAA;EAQK;EANpB,QAAA,EAAU,SAAA;EASK;EAPf,QAAA;EAOkB;EALlB,KAAA,EAAO,SAAA;EAMJ;EAJH,QAAA,GAAW,SAAA;AAAA;AAAA,KAGR,YAAA,GAAe,OAAO,QAAQ,iBAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,iBAAA;AAAA,UAEnB,cAAA,SAAuB,YAAA;EAAR;EAE9B,cAAA,EAAgB,kBAAA;EAAA;EAEhB,SAAA,GAAY,SAAA;EAE8B;EAA1C,mBAAA,uBAA0C,QAAA;EAQ3B;EANf,QAAA;EAYmC;EAVnC,YAAA,GAAe,QAAA;EAVmC;EAYlD,sBAAA;EAZsC;EActC,YAAA,GAAe,YAAA;EAZC;EAchB,aAAA;EAZY;EAcZ,iBAAA,IAAqB,IAAA,UAAc,QAAA;EAZO;EAc1C,YAAA,uBAAmC,QAAA;EAVnC;EAYA,aAAA;EAVA;EAYA,WAAA;EAVe;EAYf,OAAA;AAAA;;;;cAMI,SAAA;EAAa,cAAA;EAAA,SAAA,EAAA,UAAA;EAAA,mBAAA;EAAA,QAAA;EAAA,YAAA;EAAA,sBAAA;EAAA,YAAA;EAAA,aAAA;EAAA,iBAAA;EAAA,YAAA;EAAA,aAAA;EAAA,WAAA;EAAA;AAAA,GAchB,cAAA,iCAAc,GAAA,CAAA,OAAA"}

package/dist/Accordion/Accordion.d.ts

@@ -0,0 +1,154 @@
+import { TVClassName, TVProps } from "@fuf-stack/pixel-utils";
+import { ReactNode } from "react";
+import { DividerProps } from "@heroui/divider";
+
+//#region src/Accordion/Accordion.d.ts
+declare const accordionVariants: import("tailwind-variants").TVReturnType<{
+  indicatorLeft: {
+    true: {
+      content: string;
+      indicator: string;
+      trigger: string;
+    };
+  };
+  showDivider: {
+    true: {
+      wrapper: string;
+    };
+  };
+  showBottomTopDivider: {
+    true: {
+      wrapper: string;
+    };
+  };
+}, {
+  base: string;
+  content: string;
+  heading: string;
+  indicator: string;
+  startContent: string;
+  subtitle: string;
+  title: string;
+  titleWrapper: string;
+  trigger: string;
+  wrapper: string;
+}, undefined, {
+  indicatorLeft: {
+    true: {
+      content: string;
+      indicator: string;
+      trigger: string;
+    };
+  };
+  showDivider: {
+    true: {
+      wrapper: string;
+    };
+  };
+  showBottomTopDivider: {
+    true: {
+      wrapper: string;
+    };
+  };
+}, {
+  base: string;
+  content: string;
+  heading: string;
+  indicator: string;
+  startContent: string;
+  subtitle: string;
+  title: string;
+  titleWrapper: string;
+  trigger: string;
+  wrapper: string;
+}, import("tailwind-variants").TVReturnType<{
+  indicatorLeft: {
+    true: {
+      content: string;
+      indicator: string;
+      trigger: string;
+    };
+  };
+  showDivider: {
+    true: {
+      wrapper: string;
+    };
+  };
+  showBottomTopDivider: {
+    true: {
+      wrapper: string;
+    };
+  };
+}, {
+  base: string;
+  content: string;
+  heading: string;
+  indicator: string;
+  startContent: string;
+  subtitle: string;
+  title: string;
+  titleWrapper: string;
+  trigger: string;
+  wrapper: string;
+}, undefined, unknown, unknown, undefined>>;
+interface AccordionItemProps {
+  /** Content of the accordion item */
+  children: ReactNode;
+  /** Disables the accordion item */
+  disabled?: boolean;
+  /** Accordion item title */
+  title: ReactNode;
+  /** Accordion item subtitle */
+  subtitle?: ReactNode;
+}
+type VariantProps = TVProps<typeof accordionVariants>;
+type ClassName = TVClassName<typeof accordionVariants>;
+interface AccordionProps extends VariantProps {
+  /** Props for AccordionItems, will render the accordion items programmatically */
+  accordionItems: AccordionItemProps[];
+  /** CSS class name */
+  className?: ClassName;
+  /** Array of keys for the AccordionItem(s) to be expanded by default */
+  defaultSelectedKeys?: undefined | 'all' | Iterable<number | string>;
+  /** Disables the Accordion */
+  disabled?: boolean;
+  /** Array of keys for the AccordionItems to disable */
+  disabledKeys?: Iterable<number | string>;
+  /** Force always one AccordionItem to be open. */
+  disallowEmptySelection?: boolean;
+  /** props for styling the Divider */
+  dividerProps?: DividerProps;
+  /** Hide the expanded/collapsed indicator icon */
+  hideIndicator?: boolean;
+  /** Callback function for when a Accordion Item is expanded or collapsed */
+  onSelectionChange?: (keys: 'all' | Iterable<number | string>) => unknown;
+  /** Selected keys (controlled) */
+  selectedKeys?: undefined | 'all' | Iterable<number | string>;
+  /** Set whether multiple or only a single AccordionItems can be expanded */
+  selectionMode?: 'single' | 'multiple';
+  /** Enable or disable the divider between each AccordionItem */
+  showDivider?: boolean;
+  /** Style variant of the Accordion */
+  variant?: 'light' | 'shadow' | 'bordered' | 'splitted';
+}
+/**
+ * Accordion component based on [HeroUI Accordion](https://www.heroui.com//docs/components/accordion)
+ */
+declare const Accordion: ({
+  accordionItems,
+  className: _className,
+  defaultSelectedKeys,
+  disabled,
+  disabledKeys,
+  disallowEmptySelection,
+  dividerProps,
+  indicatorLeft,
+  onSelectionChange,
+  selectedKeys,
+  selectionMode,
+  showDivider,
+  variant
+}: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Accordion, AccordionItemProps, AccordionProps, accordionVariants };
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/Accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","names":[],"sources":["../../src/Accordion/Accordion.tsx"],"mappings":";;;;;cAaa,iBAAA,8BAAiB,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAmCb,kBAAA;EAQK;EANpB,QAAA,EAAU,SAAA;EASK;EAPf,QAAA;EAOkB;EALlB,KAAA,EAAO,SAAA;EAMJ;EAJH,QAAA,GAAW,SAAA;AAAA;AAAA,KAGR,YAAA,GAAe,OAAO,QAAQ,iBAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,iBAAA;AAAA,UAEnB,cAAA,SAAuB,YAAA;EAAR;EAE9B,cAAA,EAAgB,kBAAA;EAAA;EAEhB,SAAA,GAAY,SAAA;EAE8B;EAA1C,mBAAA,uBAA0C,QAAA;EAQ3B;EANf,QAAA;EAYmC;EAVnC,YAAA,GAAe,QAAA;EAVmC;EAYlD,sBAAA;EAZsC;EActC,YAAA,GAAe,YAAA;EAZC;EAchB,aAAA;EAZY;EAcZ,iBAAA,IAAqB,IAAA,UAAc,QAAA;EAZO;EAc1C,YAAA,uBAAmC,QAAA;EAVnC;EAYA,aAAA;EAVA;EAYA,WAAA;EAVe;EAYf,OAAA;AAAA;;;;cAMI,SAAA;EAAa,cAAA;EAAA,SAAA,EAAA,UAAA;EAAA,mBAAA;EAAA,QAAA;EAAA,YAAA;EAAA,sBAAA;EAAA,YAAA;EAAA,aAAA;EAAA,iBAAA;EAAA,YAAA;EAAA,aAAA;EAAA,WAAA;EAAA;AAAA,GAchB,cAAA,iCAAc,GAAA,CAAA,OAAA"}

package/dist/Accordion/Accordion.js

@@ -0,0 +1,61 @@
+import { Accordion, AccordionItem } from "@heroui/accordion";
+import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { jsx } from "react/jsx-runtime";
+//#region src/Accordion/Accordion.tsx
+const accordionVariants = tv({
+	slots: {
+		base: "",
+		content: "px-4",
+		heading: "px-4",
+		indicator: "",
+		startContent: "",
+		subtitle: "",
+		title: "",
+		titleWrapper: "",
+		trigger: "cursor-pointer",
+		wrapper: "px-0"
+	},
+	variants: {
+		indicatorLeft: { true: {
+			content: "pl-7",
+			indicator: "-rotate-180 data-[open=true]:-rotate-90",
+			trigger: "flex-row-reverse"
+		} },
+		showDivider: { true: { wrapper: "divide-y divide-solid divide-divider" } },
+		showBottomTopDivider: { true: { wrapper: "border-b border-t border-solid border-divider" } }
+	}
+});
+/**
+* Accordion component based on [HeroUI Accordion](https://www.heroui.com//docs/components/accordion)
+*/
+const Accordion$1 = ({ accordionItems, className: _className = void 0, defaultSelectedKeys = [], disabled = false, disabledKeys = [], disallowEmptySelection = false, dividerProps = {}, indicatorLeft = false, onSelectionChange = void 0, selectedKeys = void 0, selectionMode = "multiple", showDivider = true, variant = "light" }) => {
+	const classNames = variantsToClassNames(accordionVariants({
+		indicatorLeft,
+		showDivider: showDivider && variant !== "splitted",
+		showBottomTopDivider: showDivider && variant === "light"
+	}), _className, "wrapper");
+	return /* @__PURE__ */ jsx(Accordion, {
+		className: classNames.wrapper,
+		defaultSelectedKeys,
+		disabledKeys,
+		disallowEmptySelection,
+		dividerProps,
+		isDisabled: disabled,
+		itemClasses: classNames,
+		onSelectionChange,
+		selectedKeys,
+		selectionMode,
+		showDivider: false,
+		variant,
+		children: accordionItems.map((item, index) => {
+			return /* @__PURE__ */ jsx(AccordionItem, {
+				isDisabled: disabled || item?.disabled,
+				...item
+			}, index);
+		})
+	});
+};
+//#endregion
+export { accordionVariants, Accordion$1 as default };
+
+//# sourceMappingURL=Accordion.js.map

package/dist/{chunk-NSYHAJM2.cjs.map → Accordion/Accordion.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-NSYHAJM2.cjs","../src/Accordion/Accordion.tsx","../src/Accordion/index.ts"],"names":["Accordion_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-NSYHAJM2.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { DividerProps } from '@heroui/divider';\nimport type { ReactNode } from 'react';\n\nimport {\n  Accordion as HeroAccordion,\n  AccordionItem as HeroAccordionItem,\n} from '@heroui/accordion';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// accordion styling variants\n// see: https://www.heroui.com//docs/components/accordion#accordion-item-slots\nexport const accordionVariants = tv({\n  slots: {\n    base: '',\n    content: 'px-4',\n    heading: 'px-4',\n    indicator: '',\n    startContent: '',\n    subtitle: '',\n    title: '',\n    titleWrapper: '',\n    trigger: 'cursor-pointer',\n    // outer accordion wrapper\n    wrapper: 'px-0',\n  },\n  variants: {\n    indicatorLeft: {\n      true: {\n        content: 'pl-7',\n        indicator: '-rotate-180 data-[open=true]:-rotate-90',\n        trigger: 'flex-row-reverse',\n      },\n    },\n    showDivider: {\n      true: {\n        wrapper: 'divide-y divide-solid divide-divider',\n      },\n    },\n    showBottomTopDivider: {\n      true: {\n        wrapper: 'border-b border-t border-solid border-divider',\n      },\n    },\n  },\n});\n\nexport interface AccordionItemProps {\n  /** Content of the accordion item */\n  children: ReactNode;\n  /** Disables the accordion item */\n  disabled?: boolean;\n  /** Accordion item title */\n  title: ReactNode;\n  /** Accordion item subtitle */\n  subtitle?: ReactNode;\n}\n\ntype VariantProps = TVProps<typeof accordionVariants>;\ntype ClassName = TVClassName<typeof accordionVariants>;\n\nexport interface AccordionProps extends VariantProps {\n  /** Props for AccordionItems, will render the accordion items programmatically */\n  accordionItems: AccordionItemProps[];\n  /** CSS class name */\n  className?: ClassName;\n  /** Array of keys for the AccordionItem(s) to be expanded by default */\n  defaultSelectedKeys?: undefined | 'all' | Iterable<number | string>;\n  /** Disables the Accordion */\n  disabled?: boolean;\n  /** Array of keys for the AccordionItems to disable */\n  disabledKeys?: Iterable<number | string>;\n  /** Force always one AccordionItem to be open. */\n  disallowEmptySelection?: boolean;\n  /** props for styling the Divider */\n  dividerProps?: DividerProps;\n  /** Hide the expanded/collapsed indicator icon */\n  hideIndicator?: boolean;\n  /** Callback function for when a Accordion Item is expanded or collapsed */\n  onSelectionChange?: (keys: 'all' | Iterable<number | string>) => unknown;\n  /** Selected keys (controlled) */\n  selectedKeys?: undefined | 'all' | Iterable<number | string>;\n  /** Set whether multiple or only a single AccordionItems can be expanded */\n  selectionMode?: 'single' | 'multiple';\n  /** Enable or disable the divider between each AccordionItem */\n  showDivider?: boolean;\n  /** Style variant of the Accordion */\n  variant?: 'light' | 'shadow' | 'bordered' | 'splitted';\n}\n\n/**\n * Accordion component based on [HeroUI Accordion](https://www.heroui.com//docs/components/accordion)\n */\nconst Accordion = ({\n  accordionItems,\n  className: _className = undefined,\n  defaultSelectedKeys = [],\n  disabled = false,\n  disabledKeys = [],\n  disallowEmptySelection = false,\n  dividerProps = {},\n  indicatorLeft = false,\n  onSelectionChange = undefined,\n  selectedKeys = undefined,\n  selectionMode = 'multiple',\n  showDivider = true,\n  variant = 'light',\n}: AccordionProps) => {\n  // itemClasses from className slots\n  const variants = accordionVariants({\n    indicatorLeft,\n    showDivider: showDivider && variant !== 'splitted',\n    showBottomTopDivider: showDivider && variant === 'light',\n  });\n  const classNames = variantsToClassNames(variants, _className, 'wrapper');\n\n  return (\n    <HeroAccordion\n      className={classNames.wrapper}\n      defaultSelectedKeys={defaultSelectedKeys}\n      disabledKeys={disabledKeys}\n      disallowEmptySelection={disallowEmptySelection}\n      dividerProps={dividerProps}\n      isDisabled={disabled}\n      itemClasses={classNames}\n      onSelectionChange={onSelectionChange}\n      selectedKeys={selectedKeys}\n      selectionMode={selectionMode}\n      showDivider={false}\n      variant={variant}\n    >\n      {accordionItems.map((item, index) => {\n        return (\n          <HeroAccordionItem\n            // eslint-disable-next-line react/no-array-index-key\n            key={index}\n            isDisabled={disabled || item?.disabled}\n            {...item}\n          />\n        );\n      })}\n    </HeroAccordion>\n  );\n};\n\nexport default Accordion;\n","import Accordion, { accordionVariants } from './Accordion';\n\nexport type { AccordionProps, AccordionItemProps } from './Accordion';\n\nexport { Accordion, accordionVariants };\n\nexport default Accordion;\n"]}
+{"version":3,"file":"Accordion.js","names":["Accordion","HeroAccordion","HeroAccordionItem"],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { DividerProps } from '@heroui/divider';\nimport type { ReactNode } from 'react';\n\nimport {\n  Accordion as HeroAccordion,\n  AccordionItem as HeroAccordionItem,\n} from '@heroui/accordion';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// accordion styling variants\n// see: https://www.heroui.com//docs/components/accordion#accordion-item-slots\nexport const accordionVariants = tv({\n  slots: {\n    base: '',\n    content: 'px-4',\n    heading: 'px-4',\n    indicator: '',\n    startContent: '',\n    subtitle: '',\n    title: '',\n    titleWrapper: '',\n    trigger: 'cursor-pointer',\n    // outer accordion wrapper\n    wrapper: 'px-0',\n  },\n  variants: {\n    indicatorLeft: {\n      true: {\n        content: 'pl-7',\n        indicator: '-rotate-180 data-[open=true]:-rotate-90',\n        trigger: 'flex-row-reverse',\n      },\n    },\n    showDivider: {\n      true: {\n        wrapper: 'divide-y divide-solid divide-divider',\n      },\n    },\n    showBottomTopDivider: {\n      true: {\n        wrapper: 'border-b border-t border-solid border-divider',\n      },\n    },\n  },\n});\n\nexport interface AccordionItemProps {\n  /** Content of the accordion item */\n  children: ReactNode;\n  /** Disables the accordion item */\n  disabled?: boolean;\n  /** Accordion item title */\n  title: ReactNode;\n  /** Accordion item subtitle */\n  subtitle?: ReactNode;\n}\n\ntype VariantProps = TVProps<typeof accordionVariants>;\ntype ClassName = TVClassName<typeof accordionVariants>;\n\nexport interface AccordionProps extends VariantProps {\n  /** Props for AccordionItems, will render the accordion items programmatically */\n  accordionItems: AccordionItemProps[];\n  /** CSS class name */\n  className?: ClassName;\n  /** Array of keys for the AccordionItem(s) to be expanded by default */\n  defaultSelectedKeys?: undefined | 'all' | Iterable<number | string>;\n  /** Disables the Accordion */\n  disabled?: boolean;\n  /** Array of keys for the AccordionItems to disable */\n  disabledKeys?: Iterable<number | string>;\n  /** Force always one AccordionItem to be open. */\n  disallowEmptySelection?: boolean;\n  /** props for styling the Divider */\n  dividerProps?: DividerProps;\n  /** Hide the expanded/collapsed indicator icon */\n  hideIndicator?: boolean;\n  /** Callback function for when a Accordion Item is expanded or collapsed */\n  onSelectionChange?: (keys: 'all' | Iterable<number | string>) => unknown;\n  /** Selected keys (controlled) */\n  selectedKeys?: undefined | 'all' | Iterable<number | string>;\n  /** Set whether multiple or only a single AccordionItems can be expanded */\n  selectionMode?: 'single' | 'multiple';\n  /** Enable or disable the divider between each AccordionItem */\n  showDivider?: boolean;\n  /** Style variant of the Accordion */\n  variant?: 'light' | 'shadow' | 'bordered' | 'splitted';\n}\n\n/**\n * Accordion component based on [HeroUI Accordion](https://www.heroui.com//docs/components/accordion)\n */\nconst Accordion = ({\n  accordionItems,\n  className: _className = undefined,\n  defaultSelectedKeys = [],\n  disabled = false,\n  disabledKeys = [],\n  disallowEmptySelection = false,\n  dividerProps = {},\n  indicatorLeft = false,\n  onSelectionChange = undefined,\n  selectedKeys = undefined,\n  selectionMode = 'multiple',\n  showDivider = true,\n  variant = 'light',\n}: AccordionProps) => {\n  // itemClasses from className slots\n  const variants = accordionVariants({\n    indicatorLeft,\n    showDivider: showDivider && variant !== 'splitted',\n    showBottomTopDivider: showDivider && variant === 'light',\n  });\n  const classNames = variantsToClassNames(variants, _className, 'wrapper');\n\n  return (\n    <HeroAccordion\n      className={classNames.wrapper}\n      defaultSelectedKeys={defaultSelectedKeys}\n      disabledKeys={disabledKeys}\n      disallowEmptySelection={disallowEmptySelection}\n      dividerProps={dividerProps}\n      isDisabled={disabled}\n      itemClasses={classNames}\n      onSelectionChange={onSelectionChange}\n      selectedKeys={selectedKeys}\n      selectionMode={selectionMode}\n      showDivider={false}\n      variant={variant}\n    >\n      {accordionItems.map((item, index) => {\n        return (\n          <HeroAccordionItem\n            // eslint-disable-next-line react/no-array-index-key\n            key={index}\n            isDisabled={disabled || item?.disabled}\n            {...item}\n          />\n        );\n      })}\n    </HeroAccordion>\n  );\n};\n\nexport default Accordion;\n"],"mappings":";;;;AAaA,MAAa,oBAAoB,GAAG;CAClC,OAAO;EACL,MAAM;EACN,SAAS;EACT,SAAS;EACT,WAAW;EACX,cAAc;EACd,UAAU;EACV,OAAO;EACP,cAAc;EACd,SAAS;EAET,SAAS;CACX;CACA,UAAU;EACR,eAAe,EACb,MAAM;GACJ,SAAS;GACT,WAAW;GACX,SAAS;EACX,EACF;EACA,aAAa,EACX,MAAM,EACJ,SAAS,uCACX,EACF;EACA,sBAAsB,EACpB,MAAM,EACJ,SAAS,gDACX,EACF;CACF;AACF,CAAC;;;;AAgDD,MAAMA,eAAa,EACjB,gBACA,WAAW,aAAa,KAAA,GACxB,sBAAsB,CAAC,GACvB,WAAW,OACX,eAAe,CAAC,GAChB,yBAAyB,OACzB,eAAe,CAAC,GAChB,gBAAgB,OAChB,oBAAoB,KAAA,GACpB,eAAe,KAAA,GACf,gBAAgB,YAChB,cAAc,MACd,UAAU,cACU;CAOpB,MAAM,aAAa,qBALF,kBAAkB;EACjC;EACA,aAAa,eAAe,YAAY;EACxC,sBAAsB,eAAe,YAAY;CACnD,CAC+C,GAAG,YAAY,SAAS;CAEvE,OACE,oBAACC,WAAD;EACE,WAAW,WAAW;EACD;EACP;EACU;EACV;EACd,YAAY;EACZ,aAAa;EACM;EACL;EACC;EACf,aAAa;EACJ;YAER,eAAe,KAAK,MAAM,UAAU;GACnC,OACE,oBAACC,eAAD;IAGE,YAAY,YAAY,MAAM;IAC9B,GAAI;GACL,GAHM,KAGN;EAEL,CAAC;CACY,CAAA;AAEnB"}

package/dist/Accordion/index.cjs

@@ -1,12 +1,13 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Accordion = require("./Accordion.cjs");
+//#region src/Accordion/index.ts
+var Accordion_default = require_Accordion.default;
+//#endregion
+exports.Accordion = require_Accordion.default;
+exports.accordionVariants = require_Accordion.accordionVariants;
+exports.default = Accordion_default;
 
-
-
-var _chunkNSYHAJM2cjs = require('../chunk-NSYHAJM2.cjs');
-require('../chunk-AHEA4IJV.cjs');
-
-
-
-
-exports.Accordion = _chunkNSYHAJM2cjs.Accordion_default; exports.accordionVariants = _chunkNSYHAJM2cjs.accordionVariants; exports.default = _chunkNSYHAJM2cjs.Accordion_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/Accordion/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/Accordion/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACF,iLAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/Accordion/index.cjs"}
+{"version":3,"file":"index.cjs","names":["Accordion"],"sources":["../../src/Accordion/index.ts"],"sourcesContent":["import Accordion, { accordionVariants } from './Accordion';\n\nexport type { AccordionProps, AccordionItemProps } from './Accordion';\n\nexport { Accordion, accordionVariants };\n\nexport default Accordion;\n"],"mappings":";;;;;;AAMA,IAAA,oBAAeA,kBAAAA"}

package/dist/Accordion/index.d.cts

@@ -1,11 +1,2 @@
-import { A as Accordion } from '../Accordion-BX1Npq3Q.cjs';
-export { c as AccordionItemProps, b as AccordionProps, a as accordionVariants } from '../Accordion-BX1Npq3Q.cjs';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import '@heroui/divider';
-import 'react';
-
-
-
-export { Accordion, Accordion as default };
+import { Accordion, AccordionItemProps, AccordionProps, accordionVariants } from "./Accordion.cjs";
+export { Accordion, Accordion as default, type AccordionItemProps, type AccordionProps, accordionVariants };

package/dist/Accordion/index.d.ts

@@ -1,11 +1,2 @@
-import { A as Accordion } from '../Accordion-BX1Npq3Q.js';
-export { c as AccordionItemProps, b as AccordionProps, a as accordionVariants } from '../Accordion-BX1Npq3Q.js';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import '@heroui/divider';
-import 'react';
-
-
-
-export { Accordion, Accordion as default };
+import { Accordion, AccordionItemProps, AccordionProps, accordionVariants } from "./Accordion.js";
+export { Accordion, Accordion as default, type AccordionItemProps, type AccordionProps, accordionVariants };

package/dist/Accordion/index.js

@@ -1,12 +1,7 @@
-import {
-  Accordion_default,
-  Accordion_default2,
-  accordionVariants
-} from "../chunk-73HT7W6F.js";
-import "../chunk-OAIRL2FN.js";
-export {
-  Accordion_default as Accordion,
-  accordionVariants,
-  Accordion_default2 as default
-};
+import Accordion, { accordionVariants } from "./Accordion.js";
+//#region src/Accordion/index.ts
+var Accordion_default = Accordion;
+//#endregion
+export { Accordion, accordionVariants, Accordion_default as default };
+
 //# sourceMappingURL=index.js.map

package/dist/Accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Accordion/index.ts"],"sourcesContent":["import Accordion, { accordionVariants } from './Accordion';\n\nexport type { AccordionProps, AccordionItemProps } from './Accordion';\n\nexport { Accordion, accordionVariants };\n\nexport default Accordion;\n"],"mappings":";;AAMA,IAAA,oBAAe"}

package/dist/Alert/Alert.cjs

@@ -0,0 +1,61 @@
+require("../_virtual/_rolldown/runtime.cjs");
+let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _heroui_alert = require("@heroui/alert");
+let _heroui_theme = require("@heroui/theme");
+//#region src/Alert/Alert.tsx
+const alertVariants = (0, _fuf_stack_pixel_utils.tv)({
+	slots: {
+		base: "min-w-72",
+		title: "",
+		description: "",
+		mainWrapper: "gap-1.5",
+		closeButton: "",
+		iconWrapper: "",
+		alertIcon: ""
+	},
+	variants: {
+		hasTitleAndChildren: { true: { iconWrapper: "self-start" } },
+		variant: {
+			danger: { base: "bg-danger-50 dark:bg-danger-50" },
+			default: { base: "bg-default-100 dark:bg-default-50" },
+			info: {
+				alertIcon: "fill-current",
+				base: "border-small border-info-200 bg-info-50 text-info-600 dark:border-info-100 dark:bg-info-50",
+				closeButton: "text-info-500 data-[hover]:bg-info-200",
+				description: "text-inherit",
+				iconWrapper: "border-info-100 bg-info-50 dark:bg-info-100",
+				mainWrapper: "text-inherit",
+				title: "text-inherit"
+			},
+			success: { base: "bg-success-50 dark:bg-success-50" },
+			warning: { base: "bg-warning-50 dark:bg-warning-50" }
+		}
+	}
+});
+/**
+* Alert component based on [HeroUI Alert](https://www.heroui.com//docs/components/alert)
+*/
+const Alert = ({ children = void 0, className = void 0, endContent = void 0, icon = void 0, closable = false, onClose = void 0, testId = void 0, title = void 0, variant = "info" }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_alert.Alert, {
+		classNames: (0, _fuf_stack_pixel_utils.variantsToClassNames)(alertVariants({
+			hasTitleAndChildren: !!children && !!title,
+			variant
+		}), className, "base"),
+		color: Object.keys(_heroui_theme.alert.variants.color).includes(variant) ? variant : void 0,
+		"data-testid": testId,
+		description: title ? children : void 0,
+		endContent,
+		hideIcon: variant === "default",
+		icon,
+		isClosable: closable,
+		onClose,
+		title: title ?? children,
+		variant: "faded"
+	});
+};
+//#endregion
+exports.alertVariants = alertVariants;
+exports.default = Alert;
+
+//# sourceMappingURL=Alert.cjs.map

package/dist/Alert/Alert.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.cjs","names":["HeroAlert","heroAlertVariants"],"sources":["../../src/Alert/Alert.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { AlertProps as HeroAlertProps } from '@heroui/alert';\nimport type { ReactNode } from 'react';\n\nimport { Alert as HeroAlert } from '@heroui/alert';\nimport { alert as heroAlertVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const alertVariants = tv({\n  slots: {\n    base: 'min-w-72',\n    title: '',\n    description: '',\n    mainWrapper: 'gap-1.5',\n    closeButton: '',\n    iconWrapper: '',\n    alertIcon: '',\n  },\n  variants: {\n    // if HeroUI Alert title and description are set the icon is placed on top (looks better)\n    hasTitleAndChildren: {\n      true: {\n        iconWrapper: 'self-start',\n      },\n    },\n    // see:  https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/alert.ts\n    variant: {\n      danger: {\n        base: 'bg-danger-50 dark:bg-danger-50',\n      },\n      default: {\n        base: 'bg-default-100 dark:bg-default-50',\n      },\n      info: {\n        alertIcon: 'fill-current',\n        base: 'border-small border-info-200 bg-info-50 text-info-600 dark:border-info-100 dark:bg-info-50',\n        closeButton: 'text-info-500 data-[hover]:bg-info-200',\n        description: 'text-inherit',\n        iconWrapper: 'border-info-100 bg-info-50 dark:bg-info-100',\n        mainWrapper: 'text-inherit',\n        title: 'text-inherit',\n      },\n      success: {\n        base: 'bg-success-50 dark:bg-success-50',\n      },\n      warning: {\n        base: 'bg-warning-50 dark:bg-warning-50',\n      },\n    },\n  },\n});\n\nexport type VariantProps = TVProps<typeof alertVariants>;\ntype ClassName = TVClassName<typeof alertVariants>;\n\n// hasTitleAndChildren is omitted because its used for automatic icon position\nexport interface AlertProps extends Omit<VariantProps, 'hasTitleAndChildren'> {\n  /** Content displayed inside the Alert if no description is given! */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** Content displayed at the end of the Alert */\n  endContent?: ReactNode;\n  /** Icon displayed at the start of the Alert */\n  icon?: ReactNode;\n  /** Whether the Alert can be closed */\n  closable?: boolean;\n  /** Callback fired when the close button is clicked */\n  onClose?: () => void;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** Title displayed in the Alert above the content */\n  title?: ReactNode;\n  /** Style variant of the Alert */\n  variant?: VariantProps['variant'];\n}\n\n/**\n * Alert component based on [HeroUI Alert](https://www.heroui.com//docs/components/alert)\n */\nconst Alert = ({\n  children = undefined,\n  className = undefined,\n  endContent = undefined,\n  icon = undefined,\n  closable = false,\n  onClose = undefined,\n  testId = undefined,\n  title = undefined,\n  variant = 'info',\n}: AlertProps) => {\n  const hasTitleAndChildren = !!children && !!title;\n  const variants = alertVariants({\n    hasTitleAndChildren,\n    variant,\n  });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  // map variant to HeroUI color prop (only for variants that exist in HeroUI)\n  const heroColor = Object.keys(heroAlertVariants.variants.color).includes(\n    variant,\n  )\n    ? (variant as HeroAlertProps['color'])\n    : undefined;\n\n  return (\n    <HeroAlert\n      classNames={classNames}\n      color={heroColor}\n      data-testid={testId}\n      description={title ? children : undefined}\n      endContent={endContent}\n      hideIcon={variant === 'default'}\n      icon={icon}\n      // map closable to isClosable, because of we do not want \"is\" as prefix\n      isClosable={closable}\n      onClose={onClose}\n      title={(title ?? children) as string}\n      variant=\"faded\"\n    />\n  );\n};\n\nexport default Alert;\n"],"mappings":";;;;;;AASA,MAAa,iBAAA,GAAA,uBAAA,IAAmB;CAC9B,OAAO;EACL,MAAM;EACN,OAAO;EACP,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,WAAW;CACb;CACA,UAAU;EAER,qBAAqB,EACnB,MAAM,EACJ,aAAa,aACf,EACF;EAEA,SAAS;GACP,QAAQ,EACN,MAAM,iCACR;GACA,SAAS,EACP,MAAM,oCACR;GACA,MAAM;IACJ,WAAW;IACX,MAAM;IACN,aAAa;IACb,aAAa;IACb,aAAa;IACb,aAAa;IACb,OAAO;GACT;GACA,SAAS,EACP,MAAM,mCACR;GACA,SAAS,EACP,MAAM,mCACR;EACF;CACF;AACF,CAAC;;;;AA8BD,MAAM,SAAS,EACb,WAAW,KAAA,GACX,YAAY,KAAA,GACZ,aAAa,KAAA,GACb,OAAO,KAAA,GACP,WAAW,OACX,UAAU,KAAA,GACV,SAAS,KAAA,GACT,QAAQ,KAAA,GACR,UAAU,aACM;CAehB,OACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,OAAD;EACE,aAAA,GAAA,uBAAA,sBAfa,cAAc;GAC7B,qBAF0B,CAAC,CAAC,YAAY,CAAC,CAAC;GAG1C;EACF,CAC+C,GAAG,WAAW,MAWpC;EACrB,OATc,OAAO,KAAKC,cAAAA,MAAkB,SAAS,KAAK,EAAE,SAC9D,OACF,IACK,UACD,KAAA;EAMA,eAAa;EACb,aAAa,QAAQ,WAAW,KAAA;EACpB;EACZ,UAAU,YAAY;EAChB;EAEN,YAAY;EACH;EACT,OAAQ,SAAS;EACjB,SAAQ;CACT,CAAA;AAEL"}