@atom-learning/components 6.17.0 → 8.0.0

package/dist/components/accordion/Accordion.js

@@ -4,13 +4,15 @@ import { AccordionItem } from "./AccordionItem.js";
 import { AccordionTrigger } from "./AccordionTrigger.js";
 import { Root } from "@radix-ui/react-accordion";
 import React from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/accordion/Accordion.tsx
-var Accordion = React.forwardRef(({ type = "single", className, children, ...remainingProps }, ref) => /* @__PURE__ */ React.createElement(Root, {
+var Accordion = React.forwardRef(({ type = "single", className, children, ...remainingProps }, ref) => /* @__PURE__ */ jsx(Root, {
 	ref,
 	type,
 	className: cn("w-full", className),
-	...remainingProps
-}, children));
+	...remainingProps,
+	children
+}));
 Accordion.Item = AccordionItem;
 Accordion.Content = AccordionContent;
 Accordion.Trigger = AccordionTrigger;

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,sBAAA,cAAC,MAAD;CACO;CACC;CACN,WAAW,GAAG,UAAU,UAAU;CAClC,GAAI;CAGC,EADJ,SACI,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 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"}

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

@@ -1,5 +1,7 @@
 import React from 'react';
-declare const StyledContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-accordion").AccordionContentProps & React.RefAttributes<HTMLDivElement>, never> & {
+declare const StyledContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-accordion").AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+}, never> & {
     as?: React.ElementType;
 }>;
 export declare const AccordionContent: ({ children, className, ...remainingProps }: React.ComponentProps<typeof StyledContent>) => React.JSX.Element;

package/dist/components/accordion/AccordionContent.js

@@ -1,7 +1,8 @@
 import { styled } from "../../styled.js";
 import { CSSWrapper } from "../../utilities/css-wrapper/CSSWrapper.js";
 import { Content } from "@radix-ui/react-accordion";
-import React from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/accordion/AccordionContent.tsx
 var StyledContent = styled(Content, { base: [
 	"border-none",
@@ -13,7 +14,13 @@ 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__ */ React.createElement(StyledContent, remainingProps, /* @__PURE__ */ React.createElement(CSSWrapper, { className }, children));
+var AccordionContent = ({ children, className, ...remainingProps }) => /* @__PURE__ */ jsx(StyledContent, {
+	...remainingProps,
+	children: /* @__PURE__ */ jsx(CSSWrapper, {
+		className,
+		children
+	})
+});
 //#endregion
 export { AccordionContent };
 

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,sBAAA,cAAC,eAAkB,gBACjB,sBAAA,cAAC,YAAD,EAAuB,WAAkC,EAAtB,SAAsB,CAC3C"}
+{"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"}

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

@@ -1,4 +1,6 @@
 import React from 'react';
-export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-accordion").AccordionItemProps & React.RefAttributes<HTMLDivElement>, never> & {
+export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-accordion").AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+}, never> & {
     as?: React.ElementType;
 }>;

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

@@ -1,6 +1,8 @@
 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"> & {
+declare const StyledTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "arrowPosition"> & {
     arrowPosition?: "left" | "right" | undefined;
 } & {
     as?: React.ElementType;

package/dist/components/accordion/AccordionTrigger.js

@@ -2,7 +2,8 @@ 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 React from "react";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "@atom-learning/icons";
 //#region src/components/accordion/AccordionTrigger.tsx
 var RotatingIcon = styled(Icon, { base: [
@@ -46,19 +47,21 @@ var StyledTrigger = styled(Trigger, {
 		right: []
 	} }
 });
-var AccordionTrigger = ({ children, colorScheme = {}, asChild, arrowPosition = "right", ...remainingProps }) => /* @__PURE__ */ React.createElement(ColorScheme, {
+var AccordionTrigger = ({ children, colorScheme = {}, asChild, arrowPosition = "right", ...remainingProps }) => /* @__PURE__ */ jsx(ColorScheme, {
 	asChild: true,
 	accent: "grey1",
 	interactive: "loContrast",
-	...colorScheme
-}, /* @__PURE__ */ React.createElement(StyledTrigger, {
-	asChild,
-	arrowPosition,
-	...remainingProps
-}, asChild ? children : /* @__PURE__ */ React.createElement(React.Fragment, null, children, /* @__PURE__ */ React.createElement(RotatingIcon, {
-	is: ChevronDown,
-	"data-testid": "accordion-chevron"
-}))));
+	...colorScheme,
+	children: /* @__PURE__ */ jsx(StyledTrigger, {
+		asChild,
+		arrowPosition,
+		...remainingProps,
+		children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [children, /* @__PURE__ */ jsx(RotatingIcon, {
+			is: ChevronDown,
+			"data-testid": "accordion-chevron"
+		})] })
+	})
+});
 //#endregion
 export { AccordionTrigger };
 

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,sBAAA,cAAC,aAAD;CAAa,SAAA;CAAQ,QAAO;CAAQ,aAAY;CAAa,GAAI;CAenD,EAdZ,sBAAA,cAAC,eAAD;CACW;CACM;CACf,GAAI;CAUU,EARb,UACC,WAEA,sBAAA,cAAA,MAAA,UAAA,MACG,UACD,sBAAA,cAAC,cAAD;CAAc,IAAI;CAAa,eAAY;CAAsB,CAAA,CAChE,CAES,CACJ"}
+{"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"}

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

@@ -3,7 +3,7 @@ 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<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "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;

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

@@ -4,6 +4,7 @@ import { OptionalTooltipWrapper } from "../../utilities/optional-tooltip-wrapper
 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";
 import invariant from "invariant";
 //#region src/components/action-icon/ActionIcon.tsx
 var StyledButton = styled("button", {
@@ -104,31 +105,32 @@ var StyledButton = styled("button", {
 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}`;
 	invariant(React$1.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE);
-	const optionalLinkProps = href ? {
-		as: "a",
-		href: disabled ? void 0 : href,
-		onClick: void 0,
-		"aria-disabled": !!disabled
-	} : { type: "button" };
-	return /* @__PURE__ */ React$1.createElement(OptionalTooltipWrapper, {
+	return /* @__PURE__ */ jsx(OptionalTooltipWrapper, {
 		hasTooltip,
 		label,
-		tooltipSide
-	}, /* @__PURE__ */ React$1.createElement(StyledButton, {
-		...optionalLinkProps,
-		...getExternalAnchorProps(href),
-		...remainingProps,
-		"aria-label": label,
-		theme,
-		appearance,
-		size,
-		ref,
-		disabled
-	}, 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}`);
-		return React$1.cloneElement(child, { size: ActionIconSizeMap[size] });
-	})));
+		tooltipSide,
+		children: /* @__PURE__ */ jsx(StyledButton, {
+			...href ? {
+				as: "a",
+				href: disabled ? void 0 : href,
+				onClick: void 0,
+				"aria-disabled": !!disabled
+			} : { type: "button" },
+			...getExternalAnchorProps(href),
+			...remainingProps,
+			"aria-label": label,
+			theme,
+			appearance,
+			size,
+			ref,
+			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}`);
+				return React$1.cloneElement(child, { size: ActionIconSizeMap[size] });
+			})
+		})
+	});
 });
 ActionIcon.displayName = "ActionIcon";
 //#endregion

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;CAIzE,MAAM,oBAAoB,OACrB;EACC,IAAI;EACJ,MAAM,WAAW,KAAA,IAAY;EAC7B,SAAS,KAAA;EACT,iBAAiB,CAAC,CAAC;EACpB,GACA,EAAE,MAAM,UAAU;AAEvB,QACE,wBAAA,cAAC,wBAAD;EACc;EACL;EACM;EAiCU,EA/BvB,wBAAA,cAAC,cAAD;EACE,GAAK;EACL,GAAI,uBAAuB,KAAK;EAChC,GAAI;EACJ,cAAY;EACL;EACK;EACN;EACD;EACK;EAqBG,EAnBZ,QAAM,SAAS,IAAI,WAAW,UAAU;AAGvC,MAAI,CAAC,QAAM,eAAe,MAAM,CAC9B,OAAM,IAAI,MAAM,yBAAyB;AAG3C,YACE,MAAM,SAAS,MACf,oBAAoB,OAAO,KAAK,6BAA6B,KAAK,YAAY,2BAA2B,WAAW,cACrH;AAED,SAAO,QAAM,aACX,OACA,EACE,MAAM,kBAAkB,OACzB,CACF;GACD,CACW,CACQ;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 { 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"}

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

@@ -4,7 +4,9 @@ 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"> & {
+    Content: ({ size, ...remainingProps }: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-alert-dialog").AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    }, "size"> & {
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         as?: React.ElementType;

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

@@ -1,5 +1,7 @@
 import * as React from 'react';
-declare const StyledAlertDialogContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "size"> & {
+declare const StyledAlertDialogContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-alert-dialog").AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "size"> & {
     size?: "sm" | "md" | "lg" | undefined;
 } & {
     as?: React.ElementType;

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

@@ -1,5 +1,6 @@
 import { styled } from "../../styled.js";
-import * as React$1 from "react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Content, Overlay, Portal } from "@radix-ui/react-alert-dialog";
 //#region src/components/alert-dialog/AlertDialogContent.tsx
 var StyledAlertDialogOverlay = styled(Overlay, { base: [
@@ -36,10 +37,10 @@ var StyledAlertDialogContent = styled(Content, {
 		lg: ["w-150"]
 	} }
 });
-var AlertDialogContent = ({ size = "sm", ...remainingProps }) => /* @__PURE__ */ React$1.createElement(Portal, null, /* @__PURE__ */ React$1.createElement(StyledAlertDialogOverlay, null), /* @__PURE__ */ React$1.createElement(StyledAlertDialogContent, {
+var AlertDialogContent = ({ size = "sm", ...remainingProps }) => /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(StyledAlertDialogOverlay, {}), /* @__PURE__ */ jsx(StyledAlertDialogContent, {
 	size,
 	...remainingProps
-}));
+})] });
 //#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,wBAAA,cAAC,QAAA,MACC,wBAAA,cAAC,0BAAA,KAA2B,EAC5B,wBAAA,cAAC,0BAAD;CAAgC;CAAM,GAAI;CAAkB,CAAA,CACrD"}
+{"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"}

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

@@ -2,24 +2,29 @@ import { useIsMountedRef } from "../../../utilities/hooks/useIsMountedRef.js";
 import { Alert } from "./AlertDialog.js";
 import { initialState, reducer } from "./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
 var AlertContext = React$1.createContext({ showAlert: () => null });
 var AlertProvider = ({ children }) => {
 	const [alerts, dispatch] = React$1.useReducer(reducer, initialState);
 	const isMountedRef = useIsMountedRef();
-	return /* @__PURE__ */ React$1.createElement(AlertContext.Provider, { value: { showAlert: (content) => dispatch({
-		payload: content,
-		type: "ADD"
-	}) } }, Boolean(alerts.length) && /* @__PURE__ */ React$1.createElement(Alert, {
-		...alerts[0],
-		key: alerts[0].id,
-		onClose: () => {
-			if (isMountedRef.current) dispatch({
-				payload: alerts[0].id,
-				type: "REMOVE"
-			});
-		}
-	}), children);
+	return /* @__PURE__ */ jsxs(AlertContext.Provider, {
+		value: { showAlert: (content) => dispatch({
+			payload: content,
+			type: "ADD"
+		}) },
+		children: [Boolean(alerts.length) && /* @__PURE__ */ createElement(Alert, {
+			...alerts[0],
+			key: alerts[0].id,
+			onClose: () => {
+				if (isMountedRef.current) dispatch({
+					payload: alerts[0].id,
+					type: "REMOVE"
+				});
+			}
+		}), children]
+	});
 };
 var useAlert = () => {
 	const context = React$1.useContext(AlertContext);

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

@@ -1 +1 @@
-{"version":3,"file":"AlertContext.js","names":[],"sources":["../../../../src/components/alert-dialog/alert-context/AlertContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { useIsMountedRef } from '~/utilities/hooks/useIsMountedRef'\n\nimport { Alert } from './AlertDialog'\nimport { initialState, reducer } from './reducer'\nimport type { alert } from './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":";;;;;AAYA,IAAM,eAAe,QAAM,cAAuB,EAChD,iBAAiB,MAClB,CAAC;AAEF,IAAa,iBAAiB,EAC5B,eACsC;CACtC,MAAM,CAAC,QAAQ,YAAY,QAAM,WAAW,SAAS,aAAa;CAClE,MAAM,eAAe,iBAAiB;AAEtC,QACE,wBAAA,cAAC,aAAa,UAAd,EACE,OAAO,EACL,YAAY,YACV,SAAS;EACP,SAAS;EACT,MAAM;EACP,CAAC,EACL,EAgBqB,EAdrB,QAAQ,OAAO,OAAO,IACrB,wBAAA,cAAC,OAAD;EACE,GAAI,OAAO;EACX,KAAK,OAAO,GAAG;EACf,eAAe;AACb,OAAI,aAAa,QACf,UAAS;IACP,SAAS,OAAO,GAAG;IACnB,MAAM;IACP,CAAC;;EAEN,CAAA,EAEH,SACqB;;AAI5B,IAAa,iBAA0B;CACrC,MAAM,UAAU,QAAM,WAAW,aAAa;AAE9C,KAAI,YAAY,KAAA,EACd,OAAM,IAAI,MAAM,+CAA+C;AAGjE,QAAO"}
+{"version":3,"file":"AlertContext.js","names":[],"sources":["../../../../src/components/alert-dialog/alert-context/AlertContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { useIsMountedRef } from '~/utilities/hooks/useIsMountedRef'\n\nimport { Alert } from './AlertDialog'\nimport { initialState, reducer } from './reducer'\nimport type { alert } from './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":";;;;;;;AAYA,IAAM,eAAe,QAAM,cAAuB,EAChD,iBAAiB,MAClB,CAAC;AAEF,IAAa,iBAAiB,EAC5B,eACsC;CACtC,MAAM,CAAC,QAAQ,YAAY,QAAM,WAAW,SAAS,aAAa;CAClE,MAAM,eAAe,iBAAiB;AAEtC,QACE,qBAAC,aAAa,UAAd;EACE,OAAO,EACL,YAAY,YACV,SAAS;GACP,SAAS;GACT,MAAM;GACP,CAAC,EACL;YAPH,CASG,QAAQ,OAAO,OAAO,IACrB,8BAAC,OAAD;GACE,GAAI,OAAO;GACX,KAAK,OAAO,GAAG;GACf,eAAe;AACb,QAAI,aAAa,QACf,UAAS;KACP,SAAS,OAAO,GAAG;KACnB,MAAM;KACP,CAAC;;GAEN,CAAA,EAEH,SACqB;;;AAI5B,IAAa,iBAA0B;CACrC,MAAM,UAAU,QAAM,WAAW,aAAa;AAE9C,KAAI,YAAY,KAAA,EACd,OAAM,IAAI,MAAM,+CAA+C;AAGjE,QAAO"}

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

@@ -3,29 +3,54 @@ import { Button } from "../../button/Button.js";
 import { Heading } from "../../heading/Heading.js";
 import { Text } from "../../text/Text.js";
 import { AlertDialogIcon } from "./AlertDialogIcon.js";
-import * as React$1 from "react";
+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__ */ React$1.createElement(AlertDialog, { defaultOpen: true }, /* @__PURE__ */ React$1.createElement(AlertDialog.Content, {
-	size,
-	onEscapeKeyDown: (e) => e.preventDefault(),
-	onCloseAutoFocus: onClose,
-	...remainingProps,
-	className: "flex max-h-[90vh] flex-col gap-8"
-}, /* @__PURE__ */ React$1.createElement("div", { className: "flex items-center gap-2" }, theme && /* @__PURE__ */ React$1.createElement(AlertDialogIcon, { theme }), /* @__PURE__ */ React$1.createElement(Heading, {
-	as: AlertDialog.Title,
-	size: "sm",
-	className: "mr-4"
-}, title)), description && /* @__PURE__ */ React$1.createElement(Text, {
-	as: AlertDialog.Description,
-	className: "flex overflow-y-auto"
-}, description), /* @__PURE__ */ React$1.createElement("div", { className: "flex flex-wrap justify-end gap-2" }, /* @__PURE__ */ React$1.createElement(AlertDialog.Cancel, { asChild: true }, cancelElement || cancelActionText && /* @__PURE__ */ React$1.createElement(Button, {
-	size: "sm",
-	appearance: "outline",
-	onClick: () => onAction?.(false)
-}, cancelActionText)), /* @__PURE__ */ React$1.createElement(AlertDialog.Action, { asChild: true }, confirmElement || /* @__PURE__ */ React$1.createElement(Button, {
-	size: "sm",
-	onClick: () => onAction?.(true)
-}, confirmActionText)))));
+var Alert = ({ title, size, theme, description, onAction, cancelActionText, confirmActionText, onClose, confirmElement, cancelElement, ...remainingProps }) => /* @__PURE__ */ jsx(AlertDialog, {
+	defaultOpen: true,
+	children: /* @__PURE__ */ jsxs(AlertDialog.Content, {
+		size,
+		onEscapeKeyDown: (e) => e.preventDefault(),
+		onCloseAutoFocus: onClose,
+		...remainingProps,
+		className: "flex max-h-[90vh] flex-col gap-8",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [theme && /* @__PURE__ */ jsx(AlertDialogIcon, { theme }), /* @__PURE__ */ jsx(Heading, {
+					as: AlertDialog.Title,
+					size: "sm",
+					className: "mr-4",
+					children: title
+				})]
+			}),
+			description && /* @__PURE__ */ jsx(Text, {
+				as: AlertDialog.Description,
+				className: "flex overflow-y-auto",
+				children: description
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap justify-end gap-2",
+				children: [/* @__PURE__ */ jsx(AlertDialog.Cancel, {
+					asChild: true,
+					children: cancelElement || cancelActionText && /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						appearance: "outline",
+						onClick: () => onAction?.(false),
+						children: cancelActionText
+					})
+				}), /* @__PURE__ */ jsx(AlertDialog.Action, {
+					asChild: true,
+					children: confirmElement || /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						onClick: () => onAction?.(true),
+						children: confirmActionText
+					})
+				})]
+			})
+		]
+	})
+});
 //#endregion
 export { Alert };
 

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,wBAAA,cAAC,aAAD,EAAa,aAAA,MAyCC,EAxCZ,wBAAA,cAAC,YAAY,SAAb;CACQ;CACN,kBAAkB,MAAM,EAAE,gBAAgB;CAC1C,kBAAkB;CAClB,GAAI;CACJ,WAAU;CAkCU,EAhCpB,wBAAA,cAAC,OAAD,EAAK,WAAU,2BAKT,EAJH,SAAS,wBAAA,cAAC,iBAAD,EAAwB,OAAS,CAAA,EAC3C,wBAAA,cAAC,SAAD;CAAS,IAAI,YAAY;CAAO,MAAK;CAAK,WAAU;CAE1C,EADP,MACO,CACN,EACL,eACC,wBAAA,cAAC,MAAD;CAAM,IAAI,YAAY;CAAa,WAAU;CAEtC,EADJ,YACI,EAET,wBAAA,cAAC,OAAD,EAAK,WAAU,oCAoBT,EAnBJ,wBAAA,cAAC,YAAY,QAAb,EAAoB,SAAA,MAWC,EAVlB,iBACE,oBACC,wBAAA,cAAC,QAAD;CACE,MAAK;CACL,YAAW;CACX,eAAe,WAAW,MAAM;CAGzB,EADN,iBACM,CAEM,EACrB,wBAAA,cAAC,YAAY,QAAb,EAAoB,SAAA,MAMC,EALlB,kBACC,wBAAA,cAAC,QAAD;CAAQ,MAAK;CAAK,eAAe,WAAW,KAAK;CAExC,EADN,kBACM,CAEQ,CACjB,CACc,CACV"}
+{"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"}

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

@@ -1,6 +1,7 @@
 import { styled } from "../../../styled.js";
 import { Icon } from "../../icon/Icon.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { Danger, Info, OkCircle } from "@atom-learning/icons";
 //#region src/components/alert-dialog/alert-context/AlertDialogIcon.tsx
 var StyledIcon = styled(Icon, {
@@ -18,7 +19,7 @@ var iconMap = {
 	danger: Info,
 	success: OkCircle
 };
-var AlertDialogIcon = ({ theme }) => /* @__PURE__ */ React$1.createElement(StyledIcon, {
+var AlertDialogIcon = ({ theme }) => /* @__PURE__ */ jsx(StyledIcon, {
 	theme,
 	is: iconMap[theme]
 });

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,wBAAA,cAAC,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'\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"}

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { TAvatarRootContext } from './AvatarContext';
 import { AvatarRootContext } from './AvatarContext';
 declare const StyledDiv: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
 }, "size" | "emphasis"> & {
     size?: "sm" | "md" | "lg" | "xs" | "xl" | "xxl" | undefined;
     emphasis?: "bold" | "white" | "subtle" | undefined;
@@ -10,7 +10,7 @@ declare const StyledDiv: React.ForwardRefExoticComponent<Omit<Omit<React.Detaile
     as?: React.ElementType;
 }>;
 declare const StyledButton: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "size" | "emphasis"> & {
     size?: "sm" | "md" | "lg" | "xs" | "xl" | "xxl" | undefined;
     emphasis?: "bold" | "white" | "subtle" | undefined;

package/dist/components/avatar/Avatar.js

@@ -5,6 +5,7 @@ import { AvatarPlaceholder } from "./AvatarPlaceholder.js";
 import { AvatarInitial } from "./AvatarInitial.js";
 import { AvatarImage } from "./AvatarImage.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/avatar/Avatar.tsx
 var avatarRootStyles = [
 	"flex",
@@ -71,7 +72,10 @@ var AvatarRootProvider = ({ children, name, size }) => {
 		name,
 		size
 	}), [name, size]);
-	return /* @__PURE__ */ React$1.createElement(AvatarRootContext.Provider, { value }, children);
+	return /* @__PURE__ */ jsx(AvatarRootContext.Provider, {
+		value,
+		children
+	});
 };
 var DS_COLORS = [
 	"maroon",
@@ -97,21 +101,24 @@ var AvatarRoot = ({ children, size = "lg", name, emphasis = "white", disabled =
 		emphasis,
 		name
 	});
-	return /* @__PURE__ */ React$1.createElement(AvatarRootProvider, {
+	return /* @__PURE__ */ jsx(AvatarRootProvider, {
 		name,
-		size
-	}, onClick ? /* @__PURE__ */ React$1.createElement(StyledButton, {
 		size,
-		style: { "--bg-color": backgroundColor },
-		disabled,
-		onClick: disabled ? void 0 : onClick,
-		className: cn(disabled ? "cursor-auto" : "cursor-pointer"),
-		emphasis
-	}, children) : /* @__PURE__ */ React$1.createElement(StyledDiv, {
-		size,
-		style: { "--bg-color": backgroundColor },
-		emphasis
-	}, children));
+		children: onClick ? /* @__PURE__ */ jsx(StyledButton, {
+			size,
+			style: { "--bg-color": backgroundColor },
+			disabled,
+			onClick: disabled ? void 0 : onClick,
+			className: cn(disabled ? "cursor-auto" : "cursor-pointer"),
+			emphasis,
+			children
+		}) : /* @__PURE__ */ jsx(StyledDiv, {
+			size,
+			style: { "--bg-color": backgroundColor },
+			emphasis,
+			children
+		})
+	});
 };
 var Avatar = Object.assign(AvatarRoot, {
 	Image: AvatarImage,