@atom-learning/components 8.0.2 → 9.0.0-beta.0

package/README.md

@@ -1,8 +1,6 @@
 # Component Library
 
 ![badge](https://img.shields.io/npm/v/@atom-learning/components)
-![badge](https://img.shields.io/github/workflow/status/Atom-Learning/components/Test%20&%20validate)
-![badge](https://img.shields.io/bundlephobia/minzip/@atom-learning/components)
 
 `lib/`, released as `@atom-learning/components`, is a collection of generic React components built using [stitches](https://stitches.dev) and [radix](https://www.radix-ui.com/), it includes components that cover layout, content, data collection, media and a host of other UI concerns. It uses `@atom-learning/theme` to provide the design tokens for color, typography, spacing and layout.
 

package/dist/components/accordion/Accordion.d.ts

@@ -1,15 +1,15 @@
 import { Root } from '@radix-ui/react-accordion';
-import React from 'react';
-import { AccordionContent } from './AccordionContent';
-import { AccordionItem } from './AccordionItem';
-import { AccordionTrigger } from './AccordionTrigger';
+import * as React from 'react';
 type AccordionProps = React.ComponentProps<typeof Root> & {
     type: 'single' | 'multiple';
 };
-type AccordionType = ReturnType<typeof React.forwardRef<HTMLDivElement, AccordionProps>> & {
-    Item: typeof AccordionItem;
-    Content: typeof AccordionContent;
-    Trigger: typeof AccordionTrigger;
+export declare const Accordion: (({ ref, type, className, children, ...rest }: AccordionProps) => React.JSX.Element) & {
+    Item: import("../..").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionItemProps & React.RefAttributes<HTMLDivElement>>, unknown>;
+    Content: ({ children, className, ...rest }: React.ComponentProps<import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionContentProps & React.RefAttributes<HTMLDivElement>>, unknown>>) => React.JSX.Element;
+    Trigger: ({ children, colorScheme, asChild, arrowPosition, ...rest }: React.ComponentProps<import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>, {
+        arrowPosition?: "left" | "right" | undefined;
+    }>> & {
+        colorScheme?: import("../..").TcolorScheme;
+    }) => React.JSX.Element;
 };
-export declare const Accordion: AccordionType;
 export {};

package/dist/components/accordion/Accordion.js

@@ -2,21 +2,22 @@ import { cn } from "../../styled.js";
 import { AccordionContent } from "./AccordionContent.js";
 import { AccordionItem } from "./AccordionItem.js";
 import { AccordionTrigger } from "./AccordionTrigger.js";
-import { Root } from "@radix-ui/react-accordion";
-import React from "react";
+import "react";
 import { jsx } from "react/jsx-runtime";
+import { Root } from "@radix-ui/react-accordion";
 //#region src/components/accordion/Accordion.tsx
-var Accordion = React.forwardRef(({ type = "single", className, children, ...remainingProps }, ref) => /* @__PURE__ */ jsx(Root, {
+var AccordionBase = ({ ref, type = "single", className, children, ...rest }) => /* @__PURE__ */ jsx(Root, {
 	ref,
 	type,
 	className: cn("w-full", className),
-	...remainingProps,
+	...rest,
 	children
-}));
-Accordion.Item = AccordionItem;
-Accordion.Content = AccordionContent;
-Accordion.Trigger = AccordionTrigger;
-Accordion.displayName = "Accordion";
+});
+var Accordion = /* @__PURE__ */ Object.assign(AccordionBase, {
+	Item: AccordionItem,
+	Content: AccordionContent,
+	Trigger: AccordionTrigger
+});
 //#endregion
 export { Accordion };
 

package/dist/components/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":[],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { AccordionContent } from './AccordionContent'\nimport { AccordionItem } from './AccordionItem'\nimport { AccordionTrigger } from './AccordionTrigger'\n\ntype AccordionProps = React.ComponentProps<typeof Root> & {\n  type: 'single' | 'multiple'\n}\n\ntype AccordionType = ReturnType<\n  typeof React.forwardRef<HTMLDivElement, AccordionProps>\n> & {\n  Item: typeof AccordionItem\n  Content: typeof AccordionContent\n  Trigger: typeof AccordionTrigger\n}\n\nexport const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(\n  ({ type = 'single', className, children, ...remainingProps }, ref) => (\n    // eslint-disable-next-line\n    // @ts-ignore TODO: Radix has an TS error that throws a warning if you pass multiple in. Needs to be fixed by the owner\n    <Root\n      ref={ref}\n      type={type}\n      className={cn('w-full', className)}\n      {...remainingProps}\n    >\n      {children}\n    </Root>\n  )\n) as AccordionType\n\nAccordion.Item = AccordionItem\nAccordion.Content = AccordionContent\nAccordion.Trigger = AccordionTrigger\n\nAccordion.displayName = 'Accordion'\n"],"mappings":";;;;;;;;AAqBA,IAAa,YAAY,MAAM,YAC5B,EAAE,OAAO,UAAU,WAAW,UAAU,GAAG,kBAAkB,QAG5D,oBAAC,MAAD;CACO;CACC;CACN,WAAW,GAAG,UAAU,UAAU;CAClC,GAAI;CAEH;CACI,CAAA,CAEV;AAED,UAAU,OAAO;AACjB,UAAU,UAAU;AACpB,UAAU,UAAU;AAEpB,UAAU,cAAc"}
+{"version":3,"file":"Accordion.js","names":[],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-accordion'\nimport * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { AccordionContent } from './AccordionContent'\nimport { AccordionItem } from './AccordionItem'\nimport { AccordionTrigger } from './AccordionTrigger'\n\ntype AccordionProps = React.ComponentProps<typeof Root> & {\n  type: 'single' | 'multiple'\n}\n\nconst AccordionBase = ({\n  ref,\n  type = 'single',\n  className,\n  children,\n  ...rest\n}: AccordionProps) => (\n  // eslint-disable-next-line\n  // @ts-ignore TODO: Radix has an TS error that throws a warning if you pass multiple in. Needs to be fixed by the owner\n  <Root ref={ref} type={type} className={cn('w-full', className)} {...rest}>\n    {children}\n  </Root>\n)\n\nexport const Accordion = /* @__PURE__ */ Object.assign(AccordionBase, {\n  Item: AccordionItem,\n  Content: AccordionContent,\n  Trigger: AccordionTrigger\n})\n"],"mappings":";;;;;;;;AAYA,IAAM,iBAAiB,EACrB,KACA,OAAO,UACP,WACA,UACA,GAAG,WAIH,oBAAC,MAAD;CAAW;CAAW;CAAM,WAAW,GAAG,UAAU,SAAS;CAAG,GAAI;CACjE;AACG,CAAA;AAGR,IAAa,YAA4B,uBAAO,OAAO,eAAe;CACpE,MAAM;CACN,SAAS;CACT,SAAS;AACX,CAAC"}

package/dist/components/accordion/AccordionContent.d.ts

@@ -1,6 +1,4 @@
-import React from 'react';
-declare const StyledContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-accordion").AccordionContentProps & React.RefAttributes<HTMLDivElement>, never> & {
-    as?: React.ElementType;
-}>;
-export declare const AccordionContent: ({ children, className, ...remainingProps }: React.ComponentProps<typeof StyledContent>) => React.JSX.Element;
+import * as React from 'react';
+declare const StyledContent: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionContentProps & React.RefAttributes<HTMLDivElement>>, unknown>;
+export declare const AccordionContent: ({ children, className, ...rest }: React.ComponentProps<typeof StyledContent>) => React.JSX.Element;
 export {};

package/dist/components/accordion/AccordionContent.js

@@ -1,8 +1,8 @@
 import { styled } from "../../styled.js";
 import { CSSWrapper } from "../../utilities/css-wrapper/CSSWrapper.js";
-import { Content } from "@radix-ui/react-accordion";
 import "react";
 import { jsx } from "react/jsx-runtime";
+import { Content } from "@radix-ui/react-accordion";
 //#region src/components/accordion/AccordionContent.tsx
 var StyledContent = styled(Content, { base: [
 	"border-none",
@@ -14,8 +14,8 @@ var StyledContent = styled(Content, { base: [
 	"motion-safe:data-[state=open]:animate-accordion-open",
 	"motion-safe:data-[state=closed]:animate-accordion-close"
 ] });
-var AccordionContent = ({ children, className, ...remainingProps }) => /* @__PURE__ */ jsx(StyledContent, {
-	...remainingProps,
+var AccordionContent = ({ children, className, ...rest }) => /* @__PURE__ */ jsx(StyledContent, {
+	...rest,
 	children: /* @__PURE__ */ jsx(CSSWrapper, {
 		className,
 		children

package/dist/components/accordion/AccordionContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.js","names":[],"sources":["../../../src/components/accordion/AccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { CSSWrapper } from '~/utilities/css-wrapper/CSSWrapper'\n\nconst StyledContent = styled(Content, {\n  base: [\n    'border-none',\n    'w-full',\n    'bg-(--base-1)',\n    'overflow-hidden',\n    'data-[state=open]:rounded-b-sm',\n    'data-[state=open]:rounded-t-none',\n    'motion-safe:data-[state=open]:animate-accordion-open',\n    'motion-safe:data-[state=closed]:animate-accordion-close'\n  ]\n})\n\nexport const AccordionContent = ({\n  children,\n  className,\n  ...remainingProps\n}: React.ComponentProps<typeof StyledContent>) => (\n  <StyledContent {...remainingProps}>\n    <CSSWrapper className={className}>{children}</CSSWrapper>\n  </StyledContent>\n)\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,OAAO,SAAS,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,oBAAoB,EAC/B,UACA,WACA,GAAG,qBAEH,oBAAC,eAAD;CAAe,GAAI;WACjB,oBAAC,YAAD;EAAuB;EAAY;EAAsB,CAAA;CAC3C,CAAA"}
+{"version":3,"file":"AccordionContent.js","names":[],"sources":["../../../src/components/accordion/AccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-accordion'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { CSSWrapper } from '../../utilities/css-wrapper/CSSWrapper'\n\nconst StyledContent = styled(Content, {\n  base: [\n    'border-none',\n    'w-full',\n    'bg-(--base-1)',\n    'overflow-hidden',\n    'data-[state=open]:rounded-b-sm',\n    'data-[state=open]:rounded-t-none',\n    'motion-safe:data-[state=open]:animate-accordion-open',\n    'motion-safe:data-[state=closed]:animate-accordion-close'\n  ]\n})\n\nexport const AccordionContent = ({\n  children,\n  className,\n  ...rest\n}: React.ComponentProps<typeof StyledContent>) => (\n  <StyledContent {...rest}>\n    <CSSWrapper className={className}>{children}</CSSWrapper>\n  </StyledContent>\n)\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,OAAO,SAAS,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,oBAAoB,EAC/B,UACA,WACA,GAAG,WAEH,oBAAC,eAAD;CAAe,GAAI;WACjB,oBAAC,YAAD;EAAuB;EAAY;CAAqB,CAAA;AAC3C,CAAA"}

package/dist/components/accordion/AccordionItem.d.ts

@@ -1,4 +1,2 @@
-import React from 'react';
-export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-accordion").AccordionItemProps & React.RefAttributes<HTMLDivElement>, never> & {
-    as?: React.ElementType;
-}>;
+import * as React from 'react';
+export declare const AccordionItem: import("../..").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionItemProps & React.RefAttributes<HTMLDivElement>>, unknown>;

package/dist/components/accordion/AccordionItem.js

@@ -1,7 +1,8 @@
 import { styled } from "../../styled.js";
+import "react";
 import { Item } from "@radix-ui/react-accordion";
 //#region src/components/accordion/AccordionItem.tsx
-var AccordionItem = styled(Item, { base: ["w-full", "not-last:mb-1"] });
+var AccordionItem = styled(Item, { base: ["w-full", "not-last:mb-1"] }, { enablePolymorphism: false });
 //#endregion
 export { AccordionItem };
 

package/dist/components/accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","names":[],"sources":["../../../src/components/accordion/AccordionItem.tsx"],"sourcesContent":["import { Item } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const AccordionItem = styled(Item, {\n  base: ['w-full', 'not-last:mb-1']\n})\n"],"mappings":";;;AAKA,IAAa,gBAAgB,OAAO,MAAM,EACxC,MAAM,CAAC,UAAU,gBAAgB,EAClC,CAAC"}
+{"version":3,"file":"AccordionItem.js","names":[],"sources":["../../../src/components/accordion/AccordionItem.tsx"],"sourcesContent":["import { Item } from '@radix-ui/react-accordion'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\n\nexport const AccordionItem = styled(\n  Item,\n  {\n    base: ['w-full', 'not-last:mb-1']\n  },\n  { enablePolymorphism: false }\n)\n"],"mappings":";;;;AAKA,IAAa,gBAAgB,OAC3B,MACA,EACE,MAAM,CAAC,UAAU,eAAe,EAClC,GACA,EAAE,oBAAoB,MAAM,CAC9B"}

package/dist/components/accordion/AccordionTrigger.d.ts

@@ -1,11 +1,9 @@
-import React from 'react';
-import { TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
-declare const StyledTrigger: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "arrowPosition"> & {
+import * as React from 'react';
+import { type TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
+declare const StyledTrigger: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>, {
     arrowPosition?: "left" | "right" | undefined;
-} & {
-    as?: React.ElementType;
 }>;
-export declare const AccordionTrigger: ({ children, colorScheme, asChild, arrowPosition, ...remainingProps }: React.ComponentProps<typeof StyledTrigger> & {
+export declare const AccordionTrigger: ({ children, colorScheme, asChild, arrowPosition, ...rest }: React.ComponentProps<typeof StyledTrigger> & {
     colorScheme?: TcolorScheme;
 }) => React.JSX.Element;
 export {};

package/dist/components/accordion/AccordionTrigger.js

@@ -1,10 +1,10 @@
 import { styled } from "../../styled.js";
-import { ColorScheme } from "../../experiments/color-scheme/ColorScheme.js";
 import { Icon } from "../icon/Icon.js";
-import { Trigger } from "@radix-ui/react-accordion";
+import { ColorScheme } from "../../experiments/color-scheme/ColorScheme.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "@atom-learning/icons";
+import { Trigger } from "@radix-ui/react-accordion";
 //#region src/components/accordion/AccordionTrigger.tsx
 var RotatingIcon = styled(Icon, { base: [
 	"transition-transform",
@@ -47,7 +47,7 @@ var StyledTrigger = styled(Trigger, {
 		right: []
 	} }
 });
-var AccordionTrigger = ({ children, colorScheme = {}, asChild, arrowPosition = "right", ...remainingProps }) => /* @__PURE__ */ jsx(ColorScheme, {
+var AccordionTrigger = ({ children, colorScheme = {}, asChild, arrowPosition = "right", ...rest }) => /* @__PURE__ */ jsx(ColorScheme, {
 	asChild: true,
 	accent: "grey1",
 	interactive: "loContrast",
@@ -55,7 +55,7 @@ var AccordionTrigger = ({ children, colorScheme = {}, asChild, arrowPosition = "
 	children: /* @__PURE__ */ jsx(StyledTrigger, {
 		asChild,
 		arrowPosition,
-		...remainingProps,
+		...rest,
 		children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [children, /* @__PURE__ */ jsx(RotatingIcon, {
 			is: ChevronDown,
 			"data-testid": "accordion-chevron"

package/dist/components/accordion/AccordionTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionTrigger.js","names":[],"sources":["../../../src/components/accordion/AccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport {\n  ColorScheme,\n  TcolorScheme\n} from '~/experiments/color-scheme/ColorScheme'\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\n\nconst RotatingIcon = styled(Icon, {\n  base: [\n    'transition-transform',\n    'duration-300',\n    '[[data-state=open]>&]:rotate-180',\n    '[[data-state=closed]>&]:rotate-0'\n  ]\n})\n\nconst StyledTrigger = styled(Trigger, {\n  base: [\n    'border-none',\n    'py-3',\n    'px-4',\n    'w-full',\n    'flex',\n    'justify-between',\n    'items-center',\n    'cursor-pointer',\n    'bg-(--interactive-2)',\n    'text-(--interactive-foreground)',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:bg-(--interactive-3)',\n    'not-disabled:focus-visible:bg-(--interactive-3)',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:bg-(--interactive-3)',\n    'data-[state=open]:rounded-b-none',\n    'data-[state=open]:rounded-t-sm',\n    'data-[state=closed]:rounded-sm'\n  ],\n  variants: {\n    arrowPosition: {\n      left: ['flex-row-reverse', 'gap-2', 'justify-end'],\n      right: []\n    }\n  }\n})\n\nexport const AccordionTrigger = ({\n  children,\n  colorScheme = {},\n  asChild,\n  arrowPosition = 'right',\n  ...remainingProps\n}: React.ComponentProps<typeof StyledTrigger> & {\n  colorScheme?: TcolorScheme\n}) => (\n  <ColorScheme asChild accent=\"grey1\" interactive=\"loContrast\" {...colorScheme}>\n    <StyledTrigger\n      asChild={asChild}\n      arrowPosition={arrowPosition}\n      {...remainingProps}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {children}\n          <RotatingIcon is={ChevronDown} data-testid=\"accordion-chevron\" />\n        </>\n      )}\n    </StyledTrigger>\n  </ColorScheme>\n)\n"],"mappings":";;;;;;;;AAYA,IAAM,eAAe,OAAO,MAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,gBAAgB,OAAO,SAAS;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,eAAe;EACb,MAAM;GAAC;GAAoB;GAAS;GAAc;EAClD,OAAO,EAAE;EACV,EACF;CACF,CAAC;AAEF,IAAa,oBAAoB,EAC/B,UACA,cAAc,EAAE,EAChB,SACA,gBAAgB,SAChB,GAAG,qBAIH,oBAAC,aAAD;CAAa,SAAA;CAAQ,QAAO;CAAQ,aAAY;CAAa,GAAI;WAC/D,oBAAC,eAAD;EACW;EACM;EACf,GAAI;YAEH,UACC,WAEA,qBAAA,UAAA,EAAA,UAAA,CACG,UACD,oBAAC,cAAD;GAAc,IAAI;GAAa,eAAY;GAAsB,CAAA,CAChE,EAAA,CAAA;EAES,CAAA;CACJ,CAAA"}
+{"version":3,"file":"AccordionTrigger.js","names":[],"sources":["../../../src/components/accordion/AccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-accordion'\nimport * as React from 'react'\n\nimport {\n  ColorScheme,\n  type TcolorScheme\n} from '../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\n\nconst RotatingIcon = styled(Icon, {\n  base: [\n    'transition-transform',\n    'duration-300',\n    '[[data-state=open]>&]:rotate-180',\n    '[[data-state=closed]>&]:rotate-0'\n  ]\n})\n\nconst StyledTrigger = styled(Trigger, {\n  base: [\n    'border-none',\n    'py-3',\n    'px-4',\n    'w-full',\n    'flex',\n    'justify-between',\n    'items-center',\n    'cursor-pointer',\n    'bg-(--interactive-2)',\n    'text-(--interactive-foreground)',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:bg-(--interactive-3)',\n    'not-disabled:focus-visible:bg-(--interactive-3)',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:bg-(--interactive-3)',\n    'data-[state=open]:rounded-b-none',\n    'data-[state=open]:rounded-t-sm',\n    'data-[state=closed]:rounded-sm'\n  ],\n  variants: {\n    arrowPosition: {\n      left: ['flex-row-reverse', 'gap-2', 'justify-end'],\n      right: []\n    }\n  }\n})\n\nexport const AccordionTrigger = ({\n  children,\n  colorScheme = {},\n  asChild,\n  arrowPosition = 'right',\n  ...rest\n}: React.ComponentProps<typeof StyledTrigger> & {\n  colorScheme?: TcolorScheme\n}) => (\n  <ColorScheme asChild accent=\"grey1\" interactive=\"loContrast\" {...colorScheme}>\n    <StyledTrigger asChild={asChild} arrowPosition={arrowPosition} {...rest}>\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {children}\n          <RotatingIcon is={ChevronDown} data-testid=\"accordion-chevron\" />\n        </>\n      )}\n    </StyledTrigger>\n  </ColorScheme>\n)\n"],"mappings":";;;;;;;;AAWA,IAAM,eAAe,OAAO,MAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,gBAAgB,OAAO,SAAS;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,eAAe;EACb,MAAM;GAAC;GAAoB;GAAS;EAAa;EACjD,OAAO,CAAC;CACV,EACF;AACF,CAAC;AAED,IAAa,oBAAoB,EAC/B,UACA,cAAc,CAAC,GACf,SACA,gBAAgB,SAChB,GAAG,WAIH,oBAAC,aAAD;CAAa,SAAA;CAAQ,QAAO;CAAQ,aAAY;CAAa,GAAI;WAC/D,oBAAC,eAAD;EAAwB;EAAwB;EAAe,GAAI;YAChE,UACC,WAEA,qBAAA,UAAA,EAAA,UAAA,CACG,UACD,oBAAC,cAAD;GAAc,IAAI;GAAa,eAAY;EAAqB,CAAA,CAChE,EAAA,CAAA;CAES,CAAA;AACJ,CAAA"}

package/dist/components/action-icon/ActionIcon.constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionIcon.constants.js","names":[],"sources":["../../../src/components/action-icon/ActionIcon.constants.ts"],"sourcesContent":["export const ActionIconSizeMap = {\n  xs: 'sm',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg'\n}\n"],"mappings":";AAAA,IAAa,oBAAoB;CAC/B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL"}
+{"version":3,"file":"ActionIcon.constants.js","names":[],"sources":["../../../src/components/action-icon/ActionIcon.constants.ts"],"sourcesContent":["export const ActionIconSizeMap = {\n  xs: 'sm',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg'\n}\n"],"mappings":";AAAA,IAAa,oBAAoB;CAC/B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN"}

package/dist/components/action-icon/ActionIcon.d.ts

@@ -1,18 +1,17 @@
 import * as React from 'react';
-import { NavigatorActions } from '../../types/navigatorActions.types';
-import type { TOptionalTooltipWrapperProps } from '../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper';
-import { Override } from '../../utilities/types';
-declare const StyledButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "size" | "theme" | "isRounded"> & {
-    theme?: ("primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger">>) | undefined;
-    appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
-    size?: ("sm" | "md" | "lg" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs">>) | undefined;
-    isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-} & {
-    as?: React.ElementType;
+import type { NavigatorActions } from '../../types/navigatorActions.types';
+import type { OptionalTooltipWrapperProps } from '../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper';
+import type { Override } from '../../utilities/types';
+declare const StyledButton: import("../..").PolymorphicComponent<"button", {
+    theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
+    appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
+    size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
+    isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 }>;
 type ActionIconProps = Override<React.ComponentProps<typeof StyledButton>, {
+    as?: React.ElementType;
     children: React.ReactNode;
     label: string;
-} & Omit<TOptionalTooltipWrapperProps, 'label'> & NavigatorActions>;
-export declare const ActionIcon: React.ForwardRefExoticComponent<Omit<ActionIconProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+} & Omit<OptionalTooltipWrapperProps, 'label'> & NavigatorActions>;
+export declare const ActionIcon: ({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, ...rest }: ActionIconProps) => React.JSX.Element;
 export {};

package/dist/components/action-icon/ActionIcon.js

@@ -1,7 +1,7 @@
 import { styled } from "../../styled.js";
+import { getExternalAnchorProps } from "../../utilities/uri/index.js";
 import { Icon } from "../icon/Icon.js";
 import { OptionalTooltipWrapper } from "../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";
-import { getExternalAnchorProps } from "../../utilities/uri/index.js";
 import { ActionIconSizeMap } from "./ActionIcon.constants.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
@@ -101,9 +101,9 @@ var StyledButton = styled("button", {
 		},
 		isRounded: { true: ["rounded-full"] }
 	}
-}, { enabledResponsiveVariants: true });
-var ActionIcon = React$1.forwardRef(({ children, theme = "primary", appearance = "simple", size = "sm", label, href, disabled, hasTooltip = true, tooltipSide, ...remainingProps }, ref) => {
-	const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`;
+}, { enableResponsiveVariants: true });
+var ActionIcon = ({ ref, children, theme = "primary", appearance = "simple", size = "sm", label, href, disabled, hasTooltip = true, tooltipSide, ...rest }) => {
+	const INVALID_CHILDREN_MESSAGE = `A single ${Icon.name} component is permitted as a child of ActionIcon`;
 	invariant(React$1.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE);
 	return /* @__PURE__ */ jsx(OptionalTooltipWrapper, {
 		hasTooltip,
@@ -117,7 +117,7 @@ var ActionIcon = React$1.forwardRef(({ children, theme = "primary", appearance =
 				"aria-disabled": !!disabled
 			} : { type: "button" },
 			...getExternalAnchorProps(href),
-			...remainingProps,
+			...rest,
 			"aria-label": label,
 			theme,
 			appearance,
@@ -126,13 +126,12 @@ var ActionIcon = React$1.forwardRef(({ children, theme = "primary", appearance =
 			disabled,
 			children: React$1.Children.map(children, (child) => {
 				if (!React$1.isValidElement(child)) throw new Error(INVALID_CHILDREN_MESSAGE);
-				invariant(child.type === Icon, `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`);
+				invariant(child.type === Icon, `Children of type ${child?.type} aren't permitted. Only an ${Icon.name} component is allowed in ActionIcon`);
 				return React$1.cloneElement(child, { size: ActionIconSizeMap[size] });
 			})
 		})
 	});
-});
-ActionIcon.displayName = "ActionIcon";
+};
 //#endregion
 export { ActionIcon };
 

package/dist/components/action-icon/ActionIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionIcon.js","names":[],"sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { Override } from '~/utilities/types'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst StyledButton = styled(\n  'button',\n  {\n    base: [\n      'items-center',\n      'appearance-none',\n      'bg-white',\n      'rounded-md',\n      'box-border',\n      'cursor-pointer',\n      'flex',\n      'shrink-0',\n      'justify-center',\n      'transition-all',\n      'duration-100',\n      'ease-out',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30'\n    ],\n    variants: {\n      theme: {\n        neutral: [\n          '[--solid-base:var(--color-white)]',\n          '[--solid-interact:var(--color-grey-100)]',\n          '[--solid-active:var(--color-grey-200)]',\n          '[--solid-text:var(--color-grey-1200)]',\n          '[--base:var(--color-grey-700)]',\n          '[--interact:var(--color-primary-900)]',\n          '[--active:var(--color-primary-1100)]'\n        ],\n        primary: [\n          '[--base:var(--color-primary-800)]',\n          '[--interact:var(--color-primary-900)]',\n          '[--active:var(--color-primary-1000)]'\n        ],\n        primaryDark: [\n          '[--base:var(--color-primary-1000)]',\n          '[--interact:var(--color-primary-1100)]',\n          '[--active:var(--color-primary-1200)]'\n        ],\n        success: [\n          '[--base:var(--color-success)]',\n          '[--interact:var(--color-success-mid)]',\n          '[--active:var(--color-success-dark)]'\n        ],\n        warning: [\n          '[--base:var(--color-warning)]',\n          '[--interact:var(--color-warning-mid)]',\n          '[--active:var(--color-warning-dark)]'\n        ],\n        danger: [\n          '[--base:var(--color-danger)]',\n          '[--interact:var(--color-danger-mid)]',\n          '[--active:var(--color-danger-dark)]'\n        ],\n        white: [\n          '[--base:var(--color-white)]',\n          '[--interact:var(--color-white)]',\n          '[--active:var(--color-white)]'\n        ]\n      },\n      appearance: {\n        simple: [\n          'bg-transparent',\n          'text-(--base)',\n          'not-disabled:hover:text-(--interact)',\n          'not-disabled:focus:text-(--interact)',\n          'not-disabled:active:text-(--active)'\n        ],\n        outline: [\n          'bg-[unset]',\n          'border',\n          'border-current',\n          'text-(--base)',\n          'not-disabled:hover:text-(--interact)',\n          'not-disabled:focus:text-(--interact)',\n          'not-disabled:active:text-(--active)'\n        ],\n        solid: [\n          'bg-(--solid-base,var(--base))',\n          'text-(--solid-text,white)',\n          'not-disabled:hover:bg-(--solid-interact,var(--interact))',\n          'not-disabled:hover:text-(--solid-text,white)',\n          'not-disabled:focus:bg-(--solid-interact,var(--interact))',\n          'not-disabled:focus:text-(--solid-text,white)',\n          'not-disabled:active:bg-(--solid-active,var(--active))'\n        ]\n      },\n      size: {\n        xs: ['size-6'],\n        sm: ['size-8'],\n        md: ['size-10'],\n        lg: ['size-12']\n      },\n      isRounded: {\n        true: ['rounded-full']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\ntype ActionIconProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  {\n    children: React.ReactNode\n    label: string\n  } & Omit<TOptionalTooltipWrapperProps, 'label'> &\n    NavigatorActions\n>\n\nexport const ActionIcon = React.forwardRef<HTMLButtonElement, ActionIconProps>(\n  (\n    {\n      children,\n      theme = 'primary',\n      appearance = 'simple',\n      size = 'sm',\n      label,\n      href,\n      disabled,\n      hasTooltip = true,\n      tooltipSide,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n    invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n    // Polymorphic props: can be either button or anchor element\n    // Type assertion needed due to TypeScript limitations with polymorphic components\n    const optionalLinkProps = href\n      ? ({\n          as: 'a',\n          href: disabled ? undefined : href,\n          onClick: undefined,\n          'aria-disabled': !!disabled\n        } as const)\n      : ({ type: 'button' } as const)\n\n    return (\n      <OptionalTooltipWrapper\n        hasTooltip={hasTooltip}\n        label={label}\n        tooltipSide={tooltipSide}\n      >\n        <StyledButton\n          {...(optionalLinkProps as any)}\n          {...getExternalAnchorProps(href)}\n          {...remainingProps}\n          aria-label={label}\n          theme={theme}\n          appearance={appearance}\n          size={size}\n          ref={ref as any}\n          disabled={disabled}\n        >\n          {React.Children.map(children, (child) => {\n            // TS needs this check for any following code to access child.type\n            // even with optional chaining\n            if (!React.isValidElement(child)) {\n              throw new Error(INVALID_CHILDREN_MESSAGE)\n            }\n\n            invariant(\n              child.type === Icon,\n              `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n            )\n\n            return React.cloneElement(\n              child as React.ReactElement<React.ComponentProps<typeof Icon>>,\n              {\n                size: ActionIconSizeMap[size as string]\n              }\n            )\n          })}\n        </StyledButton>\n      </OptionalTooltipWrapper>\n    )\n  }\n)\n\nActionIcon.displayName = 'ActionIcon'\n"],"mappings":";;;;;;;;;AAaA,IAAM,eAAe,OACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,aAAa;IACX;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACD;GACD,OAAO;IACL;IACA;IACA;IACD;GACF;EACD,YAAY;GACV,QAAQ;IACN;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,UAAU;GACf,IAAI,CAAC,UAAU;GAChB;EACD,WAAW,EACT,MAAM,CAAC,eAAe,EACvB;EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAWD,IAAa,aAAa,QAAM,YAE5B,EACE,UACA,QAAQ,WACR,aAAa,UACb,OAAO,MACP,OACA,MACA,UACA,aAAa,MACb,aACA,GAAG,kBAEL,QACG;CACH,MAAM,2BAA2B,YAAY,KAAK,YAAY,wCAAwC,WAAW;AAEjH,WAAU,QAAM,SAAS,MAAM,SAAS,KAAK,GAAG,yBAAyB;AAazE,QACE,oBAAC,wBAAD;EACc;EACL;EACM;YAEb,oBAAC,cAAD;GACE,GAhBoB,OACrB;IACC,IAAI;IACJ,MAAM,WAAW,KAAA,IAAY;IAC7B,SAAS,KAAA;IACT,iBAAiB,CAAC,CAAC;IACpB,GACA,EAAE,MAAM,UAAU;GAUjB,GAAI,uBAAuB,KAAK;GAChC,GAAI;GACJ,cAAY;GACL;GACK;GACN;GACD;GACK;aAET,QAAM,SAAS,IAAI,WAAW,UAAU;AAGvC,QAAI,CAAC,QAAM,eAAe,MAAM,CAC9B,OAAM,IAAI,MAAM,yBAAyB;AAG3C,cACE,MAAM,SAAS,MACf,oBAAoB,OAAO,KAAK,6BAA6B,KAAK,YAAY,2BAA2B,WAAW,cACrH;AAED,WAAO,QAAM,aACX,OACA,EACE,MAAM,kBAAkB,OACzB,CACF;KACD;GACW,CAAA;EACQ,CAAA;EAG9B;AAED,WAAW,cAAc"}
+{"version":3,"file":"ActionIcon.js","names":[],"sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { NavigatorActions } from '../../types/navigatorActions.types'\nimport type { OptionalTooltipWrapperProps } from '../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { OptionalTooltipWrapper } from '../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport type { Override } from '../../utilities/types'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst StyledButton = styled(\n  'button',\n  {\n    base: [\n      'items-center',\n      'appearance-none',\n      'bg-white',\n      'rounded-md',\n      'box-border',\n      'cursor-pointer',\n      'flex',\n      'shrink-0',\n      'justify-center',\n      'transition-all',\n      'duration-100',\n      'ease-out',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30'\n    ],\n    variants: {\n      theme: {\n        neutral: [\n          '[--solid-base:var(--color-white)]',\n          '[--solid-interact:var(--color-grey-100)]',\n          '[--solid-active:var(--color-grey-200)]',\n          '[--solid-text:var(--color-grey-1200)]',\n          '[--base:var(--color-grey-700)]',\n          '[--interact:var(--color-primary-900)]',\n          '[--active:var(--color-primary-1100)]'\n        ],\n        primary: [\n          '[--base:var(--color-primary-800)]',\n          '[--interact:var(--color-primary-900)]',\n          '[--active:var(--color-primary-1000)]'\n        ],\n        primaryDark: [\n          '[--base:var(--color-primary-1000)]',\n          '[--interact:var(--color-primary-1100)]',\n          '[--active:var(--color-primary-1200)]'\n        ],\n        success: [\n          '[--base:var(--color-success)]',\n          '[--interact:var(--color-success-mid)]',\n          '[--active:var(--color-success-dark)]'\n        ],\n        warning: [\n          '[--base:var(--color-warning)]',\n          '[--interact:var(--color-warning-mid)]',\n          '[--active:var(--color-warning-dark)]'\n        ],\n        danger: [\n          '[--base:var(--color-danger)]',\n          '[--interact:var(--color-danger-mid)]',\n          '[--active:var(--color-danger-dark)]'\n        ],\n        white: [\n          '[--base:var(--color-white)]',\n          '[--interact:var(--color-white)]',\n          '[--active:var(--color-white)]'\n        ]\n      },\n      appearance: {\n        simple: [\n          'bg-transparent',\n          'text-(--base)',\n          'not-disabled:hover:text-(--interact)',\n          'not-disabled:focus:text-(--interact)',\n          'not-disabled:active:text-(--active)'\n        ],\n        outline: [\n          'bg-[unset]',\n          'border',\n          'border-current',\n          'text-(--base)',\n          'not-disabled:hover:text-(--interact)',\n          'not-disabled:focus:text-(--interact)',\n          'not-disabled:active:text-(--active)'\n        ],\n        solid: [\n          'bg-(--solid-base,var(--base))',\n          'text-(--solid-text,white)',\n          'not-disabled:hover:bg-(--solid-interact,var(--interact))',\n          'not-disabled:hover:text-(--solid-text,white)',\n          'not-disabled:focus:bg-(--solid-interact,var(--interact))',\n          'not-disabled:focus:text-(--solid-text,white)',\n          'not-disabled:active:bg-(--solid-active,var(--active))'\n        ]\n      },\n      size: {\n        xs: ['size-6'],\n        sm: ['size-8'],\n        md: ['size-10'],\n        lg: ['size-12']\n      },\n      isRounded: {\n        true: ['rounded-full']\n      }\n    }\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\ntype ActionIconProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  {\n    as?: React.ElementType\n    children: React.ReactNode\n    label: string\n  } & Omit<OptionalTooltipWrapperProps, 'label'> &\n    NavigatorActions\n>\n\nexport const ActionIcon = ({\n  ref,\n  children,\n  theme = 'primary',\n  appearance = 'simple',\n  size = 'sm',\n  label,\n  href,\n  disabled,\n  hasTooltip = true,\n  tooltipSide,\n  ...rest\n}: ActionIconProps) => {\n  const INVALID_CHILDREN_MESSAGE = `A single ${Icon.name} component is permitted as a child of ActionIcon`\n\n  invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n  // Polymorphic props: can be either button or anchor element\n  const optionalLinkProps = href\n    ? ({\n        as: 'a',\n        href: disabled ? undefined : href,\n        onClick: undefined,\n        'aria-disabled': !!disabled\n      } as const)\n    : ({ type: 'button' } as const)\n\n  return (\n    <OptionalTooltipWrapper\n      hasTooltip={hasTooltip}\n      label={label}\n      tooltipSide={tooltipSide}\n    >\n      <StyledButton\n        {...optionalLinkProps}\n        {...getExternalAnchorProps(href)}\n        {...rest}\n        aria-label={label}\n        theme={theme}\n        appearance={appearance}\n        size={size}\n        ref={ref}\n        disabled={disabled}\n      >\n        {React.Children.map(children, (child) => {\n          // TS needs this check for any following code to access child.type\n          // even with optional chaining\n          if (!React.isValidElement(child)) {\n            throw new Error(INVALID_CHILDREN_MESSAGE)\n          }\n\n          invariant(\n            child.type === Icon,\n            `Children of type ${child?.type} aren't permitted. Only an ${Icon.name} component is allowed in ActionIcon`\n          )\n\n          return React.cloneElement(\n            child as React.ReactElement<React.ComponentProps<typeof Icon>>,\n            {\n              size: ActionIconSizeMap[size as string]\n            }\n          )\n        })}\n      </StyledButton>\n    </OptionalTooltipWrapper>\n  )\n}\n"],"mappings":";;;;;;;;;AAYA,IAAM,eAAe,OACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,aAAa;IACX;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;EACF;EACA,YAAY;GACV,QAAQ;IACN;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;EAChB;EACA,WAAW,EACT,MAAM,CAAC,cAAc,EACvB;CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAYA,IAAa,cAAc,EACzB,KACA,UACA,QAAQ,WACR,aAAa,UACb,OAAO,MACP,OACA,MACA,UACA,aAAa,MACb,aACA,GAAG,WACkB;CACrB,MAAM,2BAA2B,YAAY,KAAK,KAAK;CAEvD,UAAU,QAAM,SAAS,MAAM,QAAQ,MAAM,GAAG,wBAAwB;CAYxE,OACE,oBAAC,wBAAD;EACc;EACL;EACM;YAEb,oBAAC,cAAD;GACE,GAhBoB,OACrB;IACC,IAAI;IACJ,MAAM,WAAW,KAAA,IAAY;IAC7B,SAAS,KAAA;IACT,iBAAiB,CAAC,CAAC;GACrB,IACC,EAAE,MAAM,SAAS;GAUhB,GAAI,uBAAuB,IAAI;GAC/B,GAAI;GACJ,cAAY;GACL;GACK;GACN;GACD;GACK;aAET,QAAM,SAAS,IAAI,WAAW,UAAU;IAGvC,IAAI,CAAC,QAAM,eAAe,KAAK,GAC7B,MAAM,IAAI,MAAM,wBAAwB;IAG1C,UACE,MAAM,SAAS,MACf,oBAAoB,OAAO,KAAK,6BAA6B,KAAK,KAAK,oCACzE;IAEA,OAAO,QAAM,aACX,OACA,EACE,MAAM,kBAAkB,MAC1B,CACF;GACF,CAAC;EACW,CAAA;CACQ,CAAA;AAE5B"}

package/dist/components/alert-dialog/{alert-context/AlertContext.d.ts → AlertDialog.context.d.ts}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { alert } from './types';
+import type { alert } from './alert-context/types';
 type context = {
     showAlert: (data: alert) => void;
 };

package/dist/components/alert-dialog/{alert-context/AlertContext.js → AlertDialog.context.js}

@@ -1,10 +1,10 @@
-import { useIsMountedRef } from "../../../utilities/hooks/useIsMountedRef.js";
-import { Alert } from "./AlertDialog.js";
-import { initialState, reducer } from "./reducer.js";
+import { useIsMountedRef } from "../../utilities/hooks/useIsMountedRef.js";
+import { Alert } from "./alert-context/AlertDialog.js";
+import { initialState, reducer } from "./alert-context/reducer.js";
 import * as React$1 from "react";
 import { createElement } from "react";
 import { jsxs } from "react/jsx-runtime";
-//#region src/components/alert-dialog/alert-context/AlertContext.tsx
+//#region src/components/alert-dialog/AlertDialog.context.tsx
 var AlertContext = React$1.createContext({ showAlert: () => null });
 var AlertProvider = ({ children }) => {
 	const [alerts, dispatch] = React$1.useReducer(reducer, initialState);
@@ -34,4 +34,4 @@ var useAlert = () => {
 //#endregion
 export { AlertProvider, useAlert };
 
-//# sourceMappingURL=AlertContext.js.map
+//# sourceMappingURL=AlertDialog.context.js.map

package/dist/components/alert-dialog/AlertDialog.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.context.js","names":[],"sources":["../../../src/components/alert-dialog/AlertDialog.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { useIsMountedRef } from '../../utilities/hooks/useIsMountedRef'\nimport { Alert } from './alert-context/AlertDialog'\nimport { initialState, reducer } from './alert-context/reducer'\nimport type { alert } from './alert-context/types'\n\ntype context = {\n  showAlert: (data: alert) => void\n}\n\nconst AlertContext = React.createContext<context>({\n  showAlert: () => null\n})\n\nexport const AlertProvider = ({\n  children\n}: React.PropsWithChildren<unknown>) => {\n  const [alerts, dispatch] = React.useReducer(reducer, initialState)\n  const isMountedRef = useIsMountedRef()\n\n  return (\n    <AlertContext.Provider\n      value={{\n        showAlert: (content: alert) =>\n          dispatch({\n            payload: content,\n            type: 'ADD'\n          })\n      }}\n    >\n      {Boolean(alerts.length) && (\n        <Alert\n          {...alerts[0]}\n          key={alerts[0].id}\n          onClose={() => {\n            if (isMountedRef.current)\n              dispatch({\n                payload: alerts[0].id,\n                type: 'REMOVE'\n              })\n          }}\n        />\n      )}\n      {children}\n    </AlertContext.Provider>\n  )\n}\n\nexport const useAlert = (): context => {\n  const context = React.useContext(AlertContext)\n\n  if (context === undefined) {\n    throw new Error('useAlert must be used within a AlertProvider')\n  }\n\n  return context\n}\n"],"mappings":";;;;;;;AAWA,IAAM,eAAe,QAAM,cAAuB,EAChD,iBAAiB,KACnB,CAAC;AAED,IAAa,iBAAiB,EAC5B,eACsC;CACtC,MAAM,CAAC,QAAQ,YAAY,QAAM,WAAW,SAAS,YAAY;CACjE,MAAM,eAAe,gBAAgB;CAErC,OACE,qBAAC,aAAa,UAAd;EACE,OAAO,EACL,YAAY,YACV,SAAS;GACP,SAAS;GACT,MAAM;EACR,CAAC,EACL;YAPF,CASG,QAAQ,OAAO,MAAM,KACpB,8BAAC,OAAD;GACE,GAAI,OAAO;GACX,KAAK,OAAO,EAAE,CAAC;GACf,eAAe;IACb,IAAI,aAAa,SACf,SAAS;KACP,SAAS,OAAO,EAAE,CAAC;KACnB,MAAM;IACR,CAAC;GACL;EACD,CAAA,GAEF,QACoB;;AAE3B;AAEA,IAAa,iBAA0B;CACrC,MAAM,UAAU,QAAM,WAAW,YAAY;CAE7C,IAAI,YAAY,KAAA,GACd,MAAM,IAAI,MAAM,8CAA8C;CAGhE,OAAO;AACT"}

package/dist/components/alert-dialog/AlertDialog.d.ts

@@ -4,10 +4,8 @@ export declare const AlertDialog: React.FC<import("@radix-ui/react-alert-dialog"
     Title: React.ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
     Action: React.ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
     Cancel: React.ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
-    Content: ({ size, ...remainingProps }: React.ComponentProps<React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "size"> & {
-        size?: "sm" | "md" | "lg" | undefined;
-    } & {
-        as?: React.ElementType;
+    Content: ({ size, ...rest }: React.ComponentProps<import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>, {
+        size?: "lg" | "md" | "sm" | undefined;
     }>>) => React.JSX.Element;
     Trigger: React.ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 };

package/dist/components/alert-dialog/AlertDialog.js

@@ -1,7 +1,8 @@
 import { AlertDialogContent } from "./AlertDialogContent.js";
+import "react";
 import { Action, Cancel, Description, Root, Title, Trigger } from "@radix-ui/react-alert-dialog";
 //#region src/components/alert-dialog/AlertDialog.tsx
-var AlertDialog = Object.assign(Root, {
+var AlertDialog = /* @__PURE__ */ Object.assign(Root, {
 	Description,
 	Title,
 	Action,

package/dist/components/alert-dialog/AlertDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.js","names":[],"sources":["../../../src/components/alert-dialog/AlertDialog.tsx"],"sourcesContent":["import {\n  Action,\n  Cancel,\n  Description,\n  Root,\n  Title,\n  Trigger\n} from '@radix-ui/react-alert-dialog'\nimport * as React from 'react'\n\nimport { AlertDialogContent } from './AlertDialogContent'\n\nexport const AlertDialog = Object.assign(Root, {\n  Description: Description,\n  Title: Title,\n  Action: Action,\n  Cancel: Cancel,\n  Content: AlertDialogContent,\n  Trigger: Trigger\n})\n\nAlertDialog.displayName = 'AlertDialog'\n"],"mappings":";;;AAYA,IAAa,cAAc,OAAO,OAAO,MAAM;CAChC;CACN;CACC;CACA;CACR,SAAS;CACA;CACV,CAAC;AAEF,YAAY,cAAc"}
+{"version":3,"file":"AlertDialog.js","names":[],"sources":["../../../src/components/alert-dialog/AlertDialog.tsx"],"sourcesContent":["import {\n  Action,\n  Cancel,\n  Description,\n  Root,\n  Title,\n  Trigger\n} from '@radix-ui/react-alert-dialog'\nimport * as React from 'react'\n\nimport { AlertDialogContent } from './AlertDialogContent'\n\nexport const AlertDialog = /* @__PURE__ */ Object.assign(Root, {\n  Description: Description,\n  Title: Title,\n  Action: Action,\n  Cancel: Cancel,\n  Content: AlertDialogContent,\n  Trigger: Trigger\n})\n\nAlertDialog.displayName = 'AlertDialog'\n"],"mappings":";;;;AAYA,IAAa,cAA8B,uBAAO,OAAO,MAAM;CAChD;CACN;CACC;CACA;CACR,SAAS;CACA;AACX,CAAC;AAED,YAAY,cAAc"}

package/dist/components/alert-dialog/AlertDialogContent.d.ts

@@ -1,8 +1,6 @@
 import * as React from 'react';
-declare const StyledAlertDialogContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "size"> & {
-    size?: "sm" | "md" | "lg" | undefined;
-} & {
-    as?: React.ElementType;
+declare const StyledAlertDialogContent: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>, {
+    size?: "lg" | "md" | "sm" | undefined;
 }>;
-export declare const AlertDialogContent: ({ size, ...remainingProps }: React.ComponentProps<typeof StyledAlertDialogContent>) => React.JSX.Element;
+export declare const AlertDialogContent: ({ size, ...rest }: React.ComponentProps<typeof StyledAlertDialogContent>) => React.JSX.Element;
 export {};

package/dist/components/alert-dialog/AlertDialogContent.js

@@ -37,9 +37,9 @@ var StyledAlertDialogContent = styled(Content, {
 		lg: ["w-150"]
 	} }
 });
-var AlertDialogContent = ({ size = "sm", ...remainingProps }) => /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(StyledAlertDialogOverlay, {}), /* @__PURE__ */ jsx(StyledAlertDialogContent, {
+var AlertDialogContent = ({ size = "sm", ...rest }) => /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(StyledAlertDialogOverlay, {}), /* @__PURE__ */ jsx(StyledAlertDialogContent, {
 	size,
-	...remainingProps
+	...rest
 })] });
 //#endregion
 export { AlertDialogContent };

package/dist/components/alert-dialog/AlertDialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialogContent.js","names":[],"sources":["../../../src/components/alert-dialog/AlertDialogContent.tsx"],"sourcesContent":["import { Content, Overlay, Portal } from '@radix-ui/react-alert-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledAlertDialogOverlay = styled(Overlay, {\n  base: [\n    'bg-alpha-600',\n    'top-0',\n    'right-0',\n    'bottom-0',\n    'left-0',\n    'fixed',\n    'z-1147483646',\n    'motion-safe:data-[state=open]:animate-fade-in',\n    'motion-safe:data-[state=closed]:animate-fade-out'\n  ]\n})\nconst StyledAlertDialogContent = styled(Content, {\n  base: [\n    // `transform: translate()` is required for `floating-ui` to\n    // correctly position elements within the Dialog component.\n    // we can't use the translate property directly\n    'transform-[translate(-50%,-50%)]',\n    'bg-white',\n    'rounded-md',\n    'shadow-xl',\n    'box-border',\n    'left-1/2',\n    'max-w-[90vw]',\n    'p-8',\n    'fixed',\n    'top-1/2',\n    'focus:outline-none',\n    'z-1147483646',\n    'motion-safe:data-[state=open]:animate-slide-in-center',\n    'motion-safe:data-[state=closed]:animate-slide-out-center'\n  ],\n  variants: {\n    size: {\n      sm: ['w-95'],\n      md: ['w-120'],\n      lg: ['w-150']\n    }\n  }\n})\n\nexport const AlertDialogContent = ({\n  size = 'sm',\n  ...remainingProps\n}: React.ComponentProps<typeof StyledAlertDialogContent>) => (\n  <Portal>\n    <StyledAlertDialogOverlay />\n    <StyledAlertDialogContent size={size} {...remainingProps} />\n  </Portal>\n)\n"],"mappings":";;;;;AAKA,IAAM,2BAA2B,OAAO,SAAS,EAC/C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AACF,IAAM,2BAA2B,OAAO,SAAS;CAC/C,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACd,EACF;CACF,CAAC;AAEF,IAAa,sBAAsB,EACjC,OAAO,MACP,GAAG,qBAEH,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,0BAAD,EAA4B,CAAA,EAC5B,oBAAC,0BAAD;CAAgC;CAAM,GAAI;CAAkB,CAAA,CACrD,EAAA,CAAA"}
+{"version":3,"file":"AlertDialogContent.js","names":[],"sources":["../../../src/components/alert-dialog/AlertDialogContent.tsx"],"sourcesContent":["import { Content, Overlay, Portal } from '@radix-ui/react-alert-dialog'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledAlertDialogOverlay = styled(Overlay, {\n  base: [\n    'bg-alpha-600',\n    'top-0',\n    'right-0',\n    'bottom-0',\n    'left-0',\n    'fixed',\n    'z-1147483646',\n    'motion-safe:data-[state=open]:animate-fade-in',\n    'motion-safe:data-[state=closed]:animate-fade-out'\n  ]\n})\nconst StyledAlertDialogContent = styled(Content, {\n  base: [\n    // `transform: translate()` is required for `floating-ui` to\n    // correctly position elements within the Dialog component.\n    // we can't use the translate property directly\n    'transform-[translate(-50%,-50%)]',\n    'bg-white',\n    'rounded-md',\n    'shadow-xl',\n    'box-border',\n    'left-1/2',\n    'max-w-[90vw]',\n    'p-8',\n    'fixed',\n    'top-1/2',\n    'focus:outline-none',\n    'z-1147483646',\n    'motion-safe:data-[state=open]:animate-slide-in-center',\n    'motion-safe:data-[state=closed]:animate-slide-out-center'\n  ],\n  variants: {\n    size: {\n      sm: ['w-95'],\n      md: ['w-120'],\n      lg: ['w-150']\n    }\n  }\n})\n\nexport const AlertDialogContent = ({\n  size = 'sm',\n  ...rest\n}: React.ComponentProps<typeof StyledAlertDialogContent>) => (\n  <Portal>\n    <StyledAlertDialogOverlay />\n    <StyledAlertDialogContent size={size} {...rest} />\n  </Portal>\n)\n"],"mappings":";;;;;AAKA,IAAM,2BAA2B,OAAO,SAAS,EAC/C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AACD,IAAM,2BAA2B,OAAO,SAAS;CAC/C,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,MAAM;EACX,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;CACd,EACF;AACF,CAAC;AAED,IAAa,sBAAsB,EACjC,OAAO,MACP,GAAG,WAEH,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,0BAAD,CAA2B,CAAA,GAC3B,oBAAC,0BAAD;CAAgC;CAAM,GAAI;AAAO,CAAA,CAC3C,EAAA,CAAA"}

package/dist/components/alert-dialog/alert-context/AlertDialog.d.ts

@@ -5,5 +5,5 @@ type AlertDialogContentProps = React.ComponentProps<typeof AlertDialog> & {
     className?: string;
     onClose: () => void;
 } & alert;
-export declare const Alert: ({ title, size, theme, description, onAction, cancelActionText, confirmActionText, onClose, confirmElement, cancelElement, ...remainingProps }: AlertDialogContentProps) => React.JSX.Element;
+export declare const Alert: ({ title, size, theme, description, onAction, cancelActionText, confirmActionText, onClose, confirmElement, cancelElement, ...rest }: AlertDialogContentProps) => React.JSX.Element;
 export {};

package/dist/components/alert-dialog/alert-context/AlertDialog.js

@@ -1,18 +1,18 @@
-import { AlertDialog } from "../AlertDialog.js";
 import { Button } from "../../button/Button.js";
 import { Heading } from "../../heading/Heading.js";
 import { Text } from "../../text/Text.js";
+import { AlertDialog } from "../AlertDialog.js";
 import { AlertDialogIcon } from "./AlertDialogIcon.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/alert-dialog/alert-context/AlertDialog.tsx
-var Alert = ({ title, size, theme, description, onAction, cancelActionText, confirmActionText, onClose, confirmElement, cancelElement, ...remainingProps }) => /* @__PURE__ */ jsx(AlertDialog, {
+var Alert = ({ title, size, theme, description, onAction, cancelActionText, confirmActionText, onClose, confirmElement, cancelElement, ...rest }) => /* @__PURE__ */ jsx(AlertDialog, {
 	defaultOpen: true,
 	children: /* @__PURE__ */ jsxs(AlertDialog.Content, {
 		size,
 		onEscapeKeyDown: (e) => e.preventDefault(),
 		onCloseAutoFocus: onClose,
-		...remainingProps,
+		...rest,
 		className: "flex max-h-[90vh] flex-col gap-8",
 		children: [
 			/* @__PURE__ */ jsxs("div", {

package/dist/components/alert-dialog/alert-context/AlertDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.js","names":[],"sources":["../../../../src/components/alert-dialog/alert-context/AlertDialog.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../../button/Button'\nimport { Heading } from '../../heading/Heading'\nimport { Text } from '../../text/Text'\nimport { AlertDialog } from '../AlertDialog'\nimport { AlertDialogIcon } from './AlertDialogIcon'\nimport type { alert } from './types'\n\ntype AlertDialogContentProps = React.ComponentProps<typeof AlertDialog> & {\n  className?: string\n  onClose: () => void\n} & alert\n\nexport const Alert = ({\n  title,\n  size,\n  theme,\n  description,\n  onAction,\n  cancelActionText,\n  confirmActionText,\n  onClose,\n  confirmElement,\n  cancelElement,\n  ...remainingProps\n}: AlertDialogContentProps) => (\n  <AlertDialog defaultOpen>\n    <AlertDialog.Content\n      size={size}\n      onEscapeKeyDown={(e) => e.preventDefault()}\n      onCloseAutoFocus={onClose}\n      {...remainingProps}\n      className=\"flex max-h-[90vh] flex-col gap-8\"\n    >\n      <div className=\"flex items-center gap-2\">\n        {theme && <AlertDialogIcon theme={theme} />}\n        <Heading as={AlertDialog.Title} size=\"sm\" className=\"mr-4\">\n          {title}\n        </Heading>\n      </div>\n      {description && (\n        <Text as={AlertDialog.Description} className=\"flex overflow-y-auto\">\n          {description}\n        </Text>\n      )}\n      <div className=\"flex flex-wrap justify-end gap-2\">\n        <AlertDialog.Cancel asChild>\n          {cancelElement ||\n            (cancelActionText && (\n              <Button\n                size=\"sm\"\n                appearance=\"outline\"\n                onClick={() => onAction?.(false)}\n              >\n                {cancelActionText}\n              </Button>\n            ))}\n        </AlertDialog.Cancel>\n        <AlertDialog.Action asChild>\n          {confirmElement || (\n            <Button size=\"sm\" onClick={() => onAction?.(true)}>\n              {confirmActionText}\n            </Button>\n          )}\n        </AlertDialog.Action>\n      </div>\n    </AlertDialog.Content>\n  </AlertDialog>\n)\n"],"mappings":";;;;;;;;AAcA,IAAa,SAAS,EACpB,OACA,MACA,OACA,aACA,UACA,kBACA,mBACA,SACA,gBACA,eACA,GAAG,qBAEH,oBAAC,aAAD;CAAa,aAAA;WACX,qBAAC,YAAY,SAAb;EACQ;EACN,kBAAkB,MAAM,EAAE,gBAAgB;EAC1C,kBAAkB;EAClB,GAAI;EACJ,WAAU;YALZ;GAOE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,SAAS,oBAAC,iBAAD,EAAwB,OAAS,CAAA,EAC3C,oBAAC,SAAD;KAAS,IAAI,YAAY;KAAO,MAAK;KAAK,WAAU;eACjD;KACO,CAAA,CACN;;GACL,eACC,oBAAC,MAAD;IAAM,IAAI,YAAY;IAAa,WAAU;cAC1C;IACI,CAAA;GAET,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,YAAY,QAAb;KAAoB,SAAA;eACjB,iBACE,oBACC,oBAAC,QAAD;MACE,MAAK;MACL,YAAW;MACX,eAAe,WAAW,MAAM;gBAE/B;MACM,CAAA;KAEM,CAAA,EACrB,oBAAC,YAAY,QAAb;KAAoB,SAAA;eACjB,kBACC,oBAAC,QAAD;MAAQ,MAAK;MAAK,eAAe,WAAW,KAAK;gBAC9C;MACM,CAAA;KAEQ,CAAA,CACjB;;GACc;;CACV,CAAA"}
+{"version":3,"file":"AlertDialog.js","names":[],"sources":["../../../../src/components/alert-dialog/alert-context/AlertDialog.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../../button/Button'\nimport { Heading } from '../../heading/Heading'\nimport { Text } from '../../text/Text'\nimport { AlertDialog } from '../AlertDialog'\nimport { AlertDialogIcon } from './AlertDialogIcon'\nimport type { alert } from './types'\n\ntype AlertDialogContentProps = React.ComponentProps<typeof AlertDialog> & {\n  className?: string\n  onClose: () => void\n} & alert\n\nexport const Alert = ({\n  title,\n  size,\n  theme,\n  description,\n  onAction,\n  cancelActionText,\n  confirmActionText,\n  onClose,\n  confirmElement,\n  cancelElement,\n  ...rest\n}: AlertDialogContentProps) => (\n  <AlertDialog defaultOpen>\n    <AlertDialog.Content\n      size={size}\n      onEscapeKeyDown={(e) => e.preventDefault()}\n      onCloseAutoFocus={onClose}\n      {...rest}\n      className=\"flex max-h-[90vh] flex-col gap-8\"\n    >\n      <div className=\"flex items-center gap-2\">\n        {theme && <AlertDialogIcon theme={theme} />}\n        <Heading as={AlertDialog.Title} size=\"sm\" className=\"mr-4\">\n          {title}\n        </Heading>\n      </div>\n      {description && (\n        <Text as={AlertDialog.Description} className=\"flex overflow-y-auto\">\n          {description}\n        </Text>\n      )}\n      <div className=\"flex flex-wrap justify-end gap-2\">\n        <AlertDialog.Cancel asChild>\n          {cancelElement ||\n            (cancelActionText && (\n              <Button\n                size=\"sm\"\n                appearance=\"outline\"\n                onClick={() => onAction?.(false)}\n              >\n                {cancelActionText}\n              </Button>\n            ))}\n        </AlertDialog.Cancel>\n        <AlertDialog.Action asChild>\n          {confirmElement || (\n            <Button size=\"sm\" onClick={() => onAction?.(true)}>\n              {confirmActionText}\n            </Button>\n          )}\n        </AlertDialog.Action>\n      </div>\n    </AlertDialog.Content>\n  </AlertDialog>\n)\n"],"mappings":";;;;;;;;AAcA,IAAa,SAAS,EACpB,OACA,MACA,OACA,aACA,UACA,kBACA,mBACA,SACA,gBACA,eACA,GAAG,WAEH,oBAAC,aAAD;CAAa,aAAA;WACX,qBAAC,YAAY,SAAb;EACQ;EACN,kBAAkB,MAAM,EAAE,eAAe;EACzC,kBAAkB;EAClB,GAAI;EACJ,WAAU;YALZ;GAOE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,SAAS,oBAAC,iBAAD,EAAwB,MAAQ,CAAA,GAC1C,oBAAC,SAAD;KAAS,IAAI,YAAY;KAAO,MAAK;KAAK,WAAU;eACjD;IACM,CAAA,CACN;;GACJ,eACC,oBAAC,MAAD;IAAM,IAAI,YAAY;IAAa,WAAU;cAC1C;GACG,CAAA;GAER,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,YAAY,QAAb;KAAoB,SAAA;eACjB,iBACE,oBACC,oBAAC,QAAD;MACE,MAAK;MACL,YAAW;MACX,eAAe,WAAW,KAAK;gBAE9B;KACK,CAAA;IAEM,CAAA,GACpB,oBAAC,YAAY,QAAb;KAAoB,SAAA;eACjB,kBACC,oBAAC,QAAD;MAAQ,MAAK;MAAK,eAAe,WAAW,IAAI;gBAC7C;KACK,CAAA;IAEQ,CAAA,CACjB;;EACc;;AACV,CAAA"}

package/dist/components/alert-dialog/alert-context/AlertDialogIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialogIcon.js","names":[],"sources":["../../../../src/components/alert-dialog/alert-context/AlertDialogIcon.tsx"],"sourcesContent":["import { Danger, Info, OkCircle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../../icon/Icon'\n\nexport type AlertDialogTheme = 'info' | 'warning' | 'danger' | 'success'\n\nconst StyledIcon = styled(Icon, {\n  base: ['self-start'],\n  variants: {\n    theme: {\n      info: ['text-info'],\n      warning: ['text-warning-mid'],\n      danger: ['rotate-180', 'text-danger'],\n      success: ['text-success']\n    }\n  }\n})\n\nconst iconMap: Record<\n  AlertDialogTheme,\n  React.FC<React.SVGProps<SVGSVGElement>>\n> = {\n  info: Info,\n  warning: Danger,\n  danger: Info,\n  success: OkCircle\n}\n\nexport const AlertDialogIcon = ({ theme }: { theme: AlertDialogTheme }) => (\n  <StyledIcon theme={theme} is={iconMap[theme]} />\n)\n"],"mappings":";;;;;;AASA,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM,CAAC,aAAa;CACpB,UAAU,EACR,OAAO;EACL,MAAM,CAAC,YAAY;EACnB,SAAS,CAAC,mBAAmB;EAC7B,QAAQ,CAAC,cAAc,cAAc;EACrC,SAAS,CAAC,eAAe;EAC1B,EACF;CACF,CAAC;AAEF,IAAM,UAGF;CACF,MAAM;CACN,SAAS;CACT,QAAQ;CACR,SAAS;CACV;AAED,IAAa,mBAAmB,EAAE,YAChC,oBAAC,YAAD;CAAmB;CAAO,IAAI,QAAQ;CAAU,CAAA"}
+{"version":3,"file":"AlertDialogIcon.js","names":[],"sources":["../../../../src/components/alert-dialog/alert-context/AlertDialogIcon.tsx"],"sourcesContent":["import { Danger, Info, OkCircle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../../styled'\nimport { Icon } from '../../icon/Icon'\n\nexport type AlertDialogTheme = 'info' | 'warning' | 'danger' | 'success'\n\nconst StyledIcon = styled(Icon, {\n  base: ['self-start'],\n  variants: {\n    theme: {\n      info: ['text-info'],\n      warning: ['text-warning-mid'],\n      danger: ['rotate-180', 'text-danger'],\n      success: ['text-success']\n    }\n  }\n})\n\nconst iconMap: Record<\n  AlertDialogTheme,\n  React.FC<React.SVGProps<SVGSVGElement>>\n> = {\n  info: Info,\n  warning: Danger,\n  danger: Info,\n  success: OkCircle\n}\n\nexport const AlertDialogIcon = ({ theme }: { theme: AlertDialogTheme }) => (\n  <StyledIcon theme={theme} is={iconMap[theme]} />\n)\n"],"mappings":";;;;;;AAQA,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM,CAAC,YAAY;CACnB,UAAU,EACR,OAAO;EACL,MAAM,CAAC,WAAW;EAClB,SAAS,CAAC,kBAAkB;EAC5B,QAAQ,CAAC,cAAc,aAAa;EACpC,SAAS,CAAC,cAAc;CAC1B,EACF;AACF,CAAC;AAED,IAAM,UAGF;CACF,MAAM;CACN,SAAS;CACT,QAAQ;CACR,SAAS;AACX;AAEA,IAAa,mBAAmB,EAAE,YAChC,oBAAC,YAAD;CAAmB;CAAO,IAAI,QAAQ;AAAS,CAAA"}

package/dist/components/alert-dialog/alert-context/reducer.d.ts

@@ -1,4 +1,4 @@
-import { alert } from './types';
+import type { alert } from './types';
 type State = alert[];
 type Action = {
     type: 'ADD';

package/dist/components/alert-dialog/alert-context/reducer.js.map

@@ -1 +1 @@
-{"version":3,"file":"reducer.js","names":[],"sources":["../../../../src/components/alert-dialog/alert-context/reducer.ts"],"sourcesContent":["import { uid } from 'uid'\n\nimport { alert } from './types'\n\ntype State = alert[]\ntype Action =\n  | { type: 'ADD'; payload: alert }\n  | { type: 'REMOVE'; payload: string }\n\nexport const initialState = []\n\nexport const reducer = (state: State, action: Action): alert[] => {\n  switch (action.type) {\n    case 'ADD':\n      return [...state, { ...action.payload, id: uid() }]\n    case 'REMOVE':\n      return state.filter(({ id }) => id !== action.payload)\n    default:\n      return state\n  }\n}\n"],"mappings":";;AASA,IAAa,eAAe,EAAE;AAE9B,IAAa,WAAW,OAAc,WAA4B;AAChE,SAAQ,OAAO,MAAf;EACE,KAAK,MACH,QAAO,CAAC,GAAG,OAAO;GAAE,GAAG,OAAO;GAAS,IAAI,KAAK;GAAE,CAAC;EACrD,KAAK,SACH,QAAO,MAAM,QAAQ,EAAE,SAAS,OAAO,OAAO,QAAQ;EACxD,QACE,QAAO"}
+{"version":3,"file":"reducer.js","names":[],"sources":["../../../../src/components/alert-dialog/alert-context/reducer.ts"],"sourcesContent":["import { uid } from 'uid'\n\nimport type { alert } from './types'\n\ntype State = alert[]\ntype Action =\n  | { type: 'ADD'; payload: alert }\n  | { type: 'REMOVE'; payload: string }\n\nexport const initialState = []\n\nexport const reducer = (state: State, action: Action): alert[] => {\n  switch (action.type) {\n    case 'ADD':\n      return [...state, { ...action.payload, id: uid() }]\n    case 'REMOVE':\n      return state.filter(({ id }) => id !== action.payload)\n    default:\n      return state\n  }\n}\n"],"mappings":";;AASA,IAAa,eAAe,CAAC;AAE7B,IAAa,WAAW,OAAc,WAA4B;CAChE,QAAQ,OAAO,MAAf;EACE,KAAK,OACH,OAAO,CAAC,GAAG,OAAO;GAAE,GAAG,OAAO;GAAS,IAAI,IAAI;EAAE,CAAC;EACpD,KAAK,UACH,OAAO,MAAM,QAAQ,EAAE,SAAS,OAAO,OAAO,OAAO;EACvD,SACE,OAAO;CACX;AACF"}

package/dist/components/alert-dialog/alert-context/types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { uid } from 'uid';
 import { AlertDialogContent } from '../AlertDialogContent';
-import { AlertDialogTheme } from './AlertDialogIcon';
+import type { AlertDialogTheme } from './AlertDialogIcon';
 type AlertCommonProps = {
     id: ReturnType<typeof uid>;
     title: string;

package/dist/components/avatar/Avatar.context.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export type AvatarRootContextValue = {
+    name?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+};
+export declare const AvatarRootContext: React.Context<AvatarRootContextValue>;

package/dist/components/avatar/{AvatarContext.js → Avatar.context.js}

@@ -1,5 +1,5 @@
 import * as React$1 from "react";
-//#region src/components/avatar/AvatarContext.tsx
+//#region src/components/avatar/Avatar.context.tsx
 var AvatarRootContext = React$1.createContext({
 	name: void 0,
 	size: "lg"
@@ -7,4 +7,4 @@ var AvatarRootContext = React$1.createContext({
 //#endregion
 export { AvatarRootContext };
 
-//# sourceMappingURL=AvatarContext.js.map
+//# sourceMappingURL=Avatar.context.js.map

package/dist/components/avatar/Avatar.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.context.js","names":[],"sources":["../../../src/components/avatar/Avatar.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport type AvatarRootContextValue = {\n  name?: string\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\n}\n\nexport const AvatarRootContext = React.createContext<AvatarRootContextValue>({\n  name: undefined,\n  size: 'lg'\n})\n"],"mappings":";;AAOA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,MAAM,KAAA;CACN,MAAM;AACR,CAAC"}