@atom-learning/components 6.17.0 → 8.0.0

package/dist/components/textarea-field/TextareaField.js

@@ -2,7 +2,8 @@ import { useFieldError } from "../form/useFieldError.js";
 import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
 import { useFormCustomContext } from "../form/useFormCustomContext.js";
 import { Textarea } from "../textarea/Textarea.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
 //#region src/components/textarea-field/TextareaField.tsx
 var TextareaField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }) => {
@@ -12,7 +13,7 @@ var TextareaField = ({ className, hideLabel, label, name, validation, prompt, de
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
 	const formTheme = context?.theme ?? theme;
-	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
+	return /* @__PURE__ */ jsx(FieldWrapper, {
 		className,
 		description,
 		error,
@@ -21,16 +22,17 @@ var TextareaField = ({ className, hideLabel, label, name, validation, prompt, de
 		label,
 		prompt,
 		required: Boolean(validation?.required),
-		appearance: formAppearance
-	}, /* @__PURE__ */ React$1.createElement(Textarea, {
-		id: name,
-		name,
-		ref,
 		appearance: formAppearance,
-		theme: formTheme,
-		...error && { state: "error" },
-		...remainingProps
-	}));
+		children: /* @__PURE__ */ jsx(Textarea, {
+			id: name,
+			name,
+			ref,
+			appearance: formAppearance,
+			theme: formTheme,
+			...error && { state: "error" },
+			...remainingProps
+		})
+	});
 };
 TextareaField.displayName = "TextareaField";
 //#endregion

package/dist/components/textarea-field/TextareaField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaField.js","names":[],"sources":["../../../src/components/textarea-field/TextareaField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { Textarea, TextareaProps } from '~/components/textarea/Textarea'\n\ntype TextareaFieldProps = TextareaProps & FieldElementWrapperProps\n\nexport const TextareaField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  theme,\n  ...remainingProps\n}: TextareaFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Textarea\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nTextareaField.displayName = 'TextareaField'\n"],"mappings":";;;;;;;AAaA,IAAa,iBAAiB,EAC5B,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,OACA,GAAG,qBACqB;CACxB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAWC,EATb,wBAAA,cAAC,UAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,OAAO;EACP,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,CAAA,CACW;;AAInB,cAAc,cAAc"}
+{"version":3,"file":"TextareaField.js","names":[],"sources":["../../../src/components/textarea-field/TextareaField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { Textarea, TextareaProps } from '~/components/textarea/Textarea'\n\ntype TextareaFieldProps = TextareaProps & FieldElementWrapperProps\n\nexport const TextareaField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  theme,\n  ...remainingProps\n}: TextareaFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Textarea\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nTextareaField.displayName = 'TextareaField'\n"],"mappings":";;;;;;;;AAaA,IAAa,iBAAiB,EAC5B,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,OACA,GAAG,qBACqB;CACxB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;YAEZ,oBAAC,UAAD;GACE,IAAI;GACE;GACD;GACL,YAAY;GACZ,OAAO;GACP,GAAK,SAAS,EAAE,OAAO,SAAS;GAChC,GAAI;GACJ,CAAA;EACW,CAAA;;AAInB,cAAc,cAAc"}

package/dist/components/tile/Tile.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
 export declare const StyledTile: 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;
 }, "border" | "borderRadius" | "diffused"> & {
     borderRadius?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
     border?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;

package/dist/components/tile/Tile.js

@@ -1,6 +1,7 @@
 import { styled } from "../../styled.js";
 import { ColorScheme } from "../../experiments/color-scheme/ColorScheme.js";
 import React from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/tile/Tile.tsx
 var StyledTile = styled("div", {
 	base: [
@@ -23,17 +24,19 @@ var StyledTile = styled("div", {
 		diffused: { true: ["supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]", "supports-color-mix:backdrop-blur-sm"] }
 	}
 }, { enabledResponsiveVariants: true });
-var Tile = React.forwardRef(({ children, borderRadius = "lg", colorScheme = {}, ...rest }, ref) => /* @__PURE__ */ React.createElement(ColorScheme, {
+var Tile = React.forwardRef(({ children, borderRadius = "lg", colorScheme = {}, ...rest }, ref) => /* @__PURE__ */ jsx(ColorScheme, {
 	asChild: true,
 	base: "grey1",
 	accent: "primary2",
 	interactive: "loContrast",
-	...colorScheme
-}, /* @__PURE__ */ React.createElement(StyledTile, {
-	ref,
-	borderRadius,
-	...rest
-}, children)));
+	...colorScheme,
+	children: /* @__PURE__ */ jsx(StyledTile, {
+		ref,
+		borderRadius,
+		...rest,
+		children
+	})
+}));
 Tile.displayName = "Tile";
 //#endregion
 export { Tile };

package/dist/components/tile/Tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.js","names":[],"sources":["../../../src/components/tile/Tile.tsx"],"sourcesContent":["import React from 'react'\n\nimport {\n  ColorScheme,\n  TcolorScheme\n} from '~/experiments/color-scheme/ColorScheme'\nimport { styled } from '~/styled'\n\nexport const StyledTile = styled(\n  'div',\n  {\n    base: [\n      'box-border',\n      'flex',\n      'flex-col',\n      'relative',\n      'border',\n      'bg-(--base-1)',\n      'text-(--foreground)',\n      'border-transparent'\n    ],\n    variants: {\n      borderRadius: {\n        sm: ['rounded-sm'],\n        md: ['rounded-md'],\n        lg: ['rounded-xl']\n      },\n      border: {\n        true: ['border-(--base-3)']\n      },\n      diffused: {\n        true: [\n          'supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]',\n          'supports-color-mix:backdrop-blur-sm'\n        ]\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype TTileProps = React.ComponentProps<typeof StyledTile> & {\n  colorScheme?: TcolorScheme\n}\n\nexport const Tile = React.forwardRef<HTMLDivElement, TTileProps>(\n  ({ children, borderRadius = 'lg', colorScheme = {}, ...rest }, ref) => (\n    <ColorScheme\n      asChild\n      base=\"grey1\"\n      accent=\"primary2\"\n      interactive=\"loContrast\"\n      {...colorScheme}\n    >\n      <StyledTile ref={ref} borderRadius={borderRadius} {...rest}>\n        {children}\n      </StyledTile>\n    </ColorScheme>\n  )\n)\n\nTile.displayName = 'Tile'\n"],"mappings":";;;;AAQA,IAAa,aAAa,OACxB,OACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,cAAc;GACZ,IAAI,CAAC,aAAa;GAClB,IAAI,CAAC,aAAa;GAClB,IAAI,CAAC,aAAa;GACnB;EACD,QAAQ,EACN,MAAM,CAAC,oBAAoB,EAC5B;EACD,UAAU,EACR,MAAM,CACJ,wEACA,sCACD,EACF;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAMD,IAAa,OAAO,MAAM,YACvB,EAAE,UAAU,eAAe,MAAM,cAAc,EAAE,EAAE,GAAG,QAAQ,QAC7D,sBAAA,cAAC,aAAD;CACE,SAAA;CACA,MAAK;CACL,QAAO;CACP,aAAY;CACZ,GAAI;CAKQ,EAHZ,sBAAA,cAAC,YAAD;CAAiB;CAAmB;CAAc,GAAI;CAEzC,EADV,SACU,CACD,CAEjB;AAED,KAAK,cAAc"}
+{"version":3,"file":"Tile.js","names":[],"sources":["../../../src/components/tile/Tile.tsx"],"sourcesContent":["import React from 'react'\n\nimport {\n  ColorScheme,\n  TcolorScheme\n} from '~/experiments/color-scheme/ColorScheme'\nimport { styled } from '~/styled'\n\nexport const StyledTile = styled(\n  'div',\n  {\n    base: [\n      'box-border',\n      'flex',\n      'flex-col',\n      'relative',\n      'border',\n      'bg-(--base-1)',\n      'text-(--foreground)',\n      'border-transparent'\n    ],\n    variants: {\n      borderRadius: {\n        sm: ['rounded-sm'],\n        md: ['rounded-md'],\n        lg: ['rounded-xl']\n      },\n      border: {\n        true: ['border-(--base-3)']\n      },\n      diffused: {\n        true: [\n          'supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]',\n          'supports-color-mix:backdrop-blur-sm'\n        ]\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype TTileProps = React.ComponentProps<typeof StyledTile> & {\n  colorScheme?: TcolorScheme\n}\n\nexport const Tile = React.forwardRef<HTMLDivElement, TTileProps>(\n  ({ children, borderRadius = 'lg', colorScheme = {}, ...rest }, ref) => (\n    <ColorScheme\n      asChild\n      base=\"grey1\"\n      accent=\"primary2\"\n      interactive=\"loContrast\"\n      {...colorScheme}\n    >\n      <StyledTile ref={ref} borderRadius={borderRadius} {...rest}>\n        {children}\n      </StyledTile>\n    </ColorScheme>\n  )\n)\n\nTile.displayName = 'Tile'\n"],"mappings":";;;;;AAQA,IAAa,aAAa,OACxB,OACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,cAAc;GACZ,IAAI,CAAC,aAAa;GAClB,IAAI,CAAC,aAAa;GAClB,IAAI,CAAC,aAAa;GACnB;EACD,QAAQ,EACN,MAAM,CAAC,oBAAoB,EAC5B;EACD,UAAU,EACR,MAAM,CACJ,wEACA,sCACD,EACF;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAMD,IAAa,OAAO,MAAM,YACvB,EAAE,UAAU,eAAe,MAAM,cAAc,EAAE,EAAE,GAAG,QAAQ,QAC7D,oBAAC,aAAD;CACE,SAAA;CACA,MAAK;CACL,QAAO;CACP,aAAY;CACZ,GAAI;WAEJ,oBAAC,YAAD;EAAiB;EAAmB;EAAc,GAAI;EACnD;EACU,CAAA;CACD,CAAA,CAEjB;AAED,KAAK,cAAc"}

package/dist/components/tile-interactive/TileInteractive.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NavigatorActions } from '../../types/navigatorActions.types';
-declare const StyledTileInteractive: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+declare const StyledTileInteractive: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, 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;
 }, "border" | "borderRadius" | "diffused"> & {
     borderRadius?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
     border?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
@@ -10,7 +10,9 @@ declare const StyledTileInteractive: React.ForwardRefExoticComponent<Omit<Omit<O
     as?: React.ElementType;
 } & {
     colorScheme?: import("../..").TcolorScheme;
-}, "ref"> & React.RefAttributes<HTMLDivElement>, never> & {
+}, "ref"> & 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;
 }>;
 type TTileInteractiveProps = React.ComponentProps<typeof StyledTileInteractive> & React.ButtonHTMLAttributes<HTMLButtonElement> & NavigatorActions;

package/dist/components/tile-interactive/TileInteractive.js

@@ -1,6 +1,7 @@
 import { styled } from "../../styled.js";
 import { Tile } from "../tile/Tile.js";
 import React from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/tile-interactive/TileInteractive.tsx
 var StyledTileInteractive = styled(Tile, { base: [
 	"disabled:cursor-not-allowed",
@@ -38,7 +39,7 @@ var TileInteractive = React.forwardRef(({ onClick, href, type = "button", as, ..
 		type,
 		onClick
 	};
-	return /* @__PURE__ */ React.createElement(StyledTileInteractive, {
+	return /* @__PURE__ */ jsx(StyledTileInteractive, {
 		...rest,
 		...elementSpecificProps,
 		ref

package/dist/components/tile-interactive/TileInteractive.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileInteractive.js","names":[],"sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tile } from '~/components/tile/Tile'\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\n\nconst StyledTileInteractive = styled(Tile, {\n  base: [\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:bg-(--base-2)',\n    'not-disabled:after:absolute',\n    'not-disabled:after:duration-250',\n    'not-disabled:after:ease-out',\n    'not-disabled:after:inset-0',\n    'not-disabled:after:opacity-0',\n    'not-disabled:after:pointer-events-none',\n    'not-disabled:after:rounded-[inherit]',\n    'not-disabled:after:shadow-lg',\n    'not-disabled:after:transition-opacity',\n    'not-disabled:cursor-pointer',\n    'not-disabled:duration-250',\n    'not-disabled:ease-in',\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:after:opacity-100',\n    'not-disabled:hover:-translate-y-0.5',\n    'not-disabled:transition-transform',\n    'not-disabled:translate-y-0'\n  ]\n})\n\ntype TTileInteractiveProps = React.ComponentProps<\n  typeof StyledTileInteractive\n> &\n  React.ButtonHTMLAttributes<HTMLButtonElement> &\n  NavigatorActions\n\nexport const TileInteractive = React.forwardRef<\n  HTMLDivElement,\n  TTileInteractiveProps\n>(({ onClick, href, type = 'button', as, ...rest }, ref) => {\n  const isLink = !!href\n  const elementSpecificProps = isLink\n    ? {\n        as: as || ('a' as React.ElementType),\n        href,\n        onClick: undefined\n      }\n    : {\n        as: as || ('button' as React.ElementType),\n        type,\n        onClick\n      }\n\n  return <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n})\n\nTileInteractive.displayName = 'TileInteractive'\n"],"mappings":";;;;AAMA,IAAM,wBAAwB,OAAO,MAAM,EACzC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAQF,IAAa,kBAAkB,MAAM,YAGlC,EAAE,SAAS,MAAM,OAAO,UAAU,IAAI,GAAG,QAAQ,QAAQ;CAE1D,MAAM,uBADS,CAAC,CAAC,OAEb;EACE,IAAI,MAAO;EACX;EACA,SAAS,KAAA;EACV,GACD;EACE,IAAI,MAAO;EACX;EACA;EACD;AAEL,QAAO,sBAAA,cAAC,uBAAD;EAAuB,GAAI;EAAM,GAAI;EAA2B;EAAO,CAAA;EAC9E;AAEF,gBAAgB,cAAc"}
+{"version":3,"file":"TileInteractive.js","names":[],"sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tile } from '~/components/tile/Tile'\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\n\nconst StyledTileInteractive = styled(Tile, {\n  base: [\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:bg-(--base-2)',\n    'not-disabled:after:absolute',\n    'not-disabled:after:duration-250',\n    'not-disabled:after:ease-out',\n    'not-disabled:after:inset-0',\n    'not-disabled:after:opacity-0',\n    'not-disabled:after:pointer-events-none',\n    'not-disabled:after:rounded-[inherit]',\n    'not-disabled:after:shadow-lg',\n    'not-disabled:after:transition-opacity',\n    'not-disabled:cursor-pointer',\n    'not-disabled:duration-250',\n    'not-disabled:ease-in',\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:after:opacity-100',\n    'not-disabled:hover:-translate-y-0.5',\n    'not-disabled:transition-transform',\n    'not-disabled:translate-y-0'\n  ]\n})\n\ntype TTileInteractiveProps = React.ComponentProps<\n  typeof StyledTileInteractive\n> &\n  React.ButtonHTMLAttributes<HTMLButtonElement> &\n  NavigatorActions\n\nexport const TileInteractive = React.forwardRef<\n  HTMLDivElement,\n  TTileInteractiveProps\n>(({ onClick, href, type = 'button', as, ...rest }, ref) => {\n  const isLink = !!href\n  const elementSpecificProps = isLink\n    ? {\n        as: as || ('a' as React.ElementType),\n        href,\n        onClick: undefined\n      }\n    : {\n        as: as || ('button' as React.ElementType),\n        type,\n        onClick\n      }\n\n  return <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n})\n\nTileInteractive.displayName = 'TileInteractive'\n"],"mappings":";;;;;AAMA,IAAM,wBAAwB,OAAO,MAAM,EACzC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAQF,IAAa,kBAAkB,MAAM,YAGlC,EAAE,SAAS,MAAM,OAAO,UAAU,IAAI,GAAG,QAAQ,QAAQ;CAE1D,MAAM,uBADS,CAAC,CAAC,OAEb;EACE,IAAI,MAAO;EACX;EACA,SAAS,KAAA;EACV,GACD;EACE,IAAI,MAAO;EACX;EACA;EACD;AAEL,QAAO,oBAAC,uBAAD;EAAuB,GAAI;EAAM,GAAI;EAA2B;EAAO,CAAA;EAC9E;AAEF,gBAAgB,cAAc"}

package/dist/components/tile-toggle-group/TileToggleGroupItem.d.ts

@@ -1,7 +1,7 @@
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import * as React from 'react';
-declare const StyledTileToggleGroupItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+declare const StyledTileToggleGroupItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, 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;
 }, "border" | "borderRadius" | "diffused"> & {
     borderRadius?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
     border?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
@@ -10,9 +10,13 @@ declare const StyledTileToggleGroupItem: React.ForwardRefExoticComponent<Omit<Om
     as?: React.ElementType;
 } & {
     colorScheme?: import("../..").TcolorScheme;
-}, "ref"> & React.RefAttributes<HTMLDivElement>, never> & {
+}, "ref"> & 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;
-} & React.ButtonHTMLAttributes<HTMLButtonElement> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLDivElement>, never> & {
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & import("../..").NavigatorActions, "ref"> & 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;
 }>;
 type TTileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> & React.ComponentProps<typeof StyledTileToggleGroupItem>;

package/dist/components/tile-toggle-group/TileToggleGroupItem.js

@@ -1,6 +1,7 @@
 import { styled } from "../../styled.js";
 import { TileInteractive } from "../tile-interactive/TileInteractive.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import * as ToggleGroup from "@radix-ui/react-toggle-group";
 //#region src/components/tile-toggle-group/TileToggleGroupItem.tsx
 var StyledTileToggleGroupItem = styled(TileInteractive, { base: [
@@ -15,10 +16,14 @@ var StyledTileToggleGroupItem = styled(TileInteractive, { base: [
 	"data-[state=on]:bg-(--interactive-1)",
 	"data-[state=on]:border-(--accent-8)"
 ] });
-var TileToggleGroupItem = ({ children, ...rest }) => /* @__PURE__ */ React$1.createElement(ToggleGroup.Item, {
+var TileToggleGroupItem = ({ children, ...rest }) => /* @__PURE__ */ jsx(ToggleGroup.Item, {
 	...rest,
-	asChild: true
-}, /* @__PURE__ */ React$1.createElement(StyledTileToggleGroupItem, { as: "button" }, children));
+	asChild: true,
+	children: /* @__PURE__ */ jsx(StyledTileToggleGroupItem, {
+		as: "button",
+		children
+	})
+});
 //#endregion
 export { TileToggleGroupItem };
 

package/dist/components/tile-toggle-group/TileToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileToggleGroupItem.js","names":[],"sources":["../../../src/components/tile-toggle-group/TileToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { TileInteractive } from '~/components/tile-interactive/TileInteractive'\nimport { styled } from '~/styled'\n\nconst StyledTileToggleGroupItem = styled(TileInteractive, {\n  base: [\n    'text-left',\n    'not-disabled:data-[state=on]:active:bg-(--interactive-3)',\n    'not-disabled:data-[state=on]:hover:bg-(--interactive-2)',\n    'data-[state=on]:before:-inset-px',\n    'data-[state=on]:before:absolute',\n    'data-[state=on]:before:rounded-[inherit]',\n    'data-[state=on]:before:inset-shadow-[var(--accent-8)_0px_0px_0px_2px]',\n    'data-[state=on]:before:z-1',\n    'data-[state=on]:bg-(--interactive-1)',\n    'data-[state=on]:border-(--accent-8)'\n  ]\n})\n\ntype TTileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledTileToggleGroupItem>\n\nexport const TileToggleGroupItem = ({\n  children,\n  ...rest\n}: TTileToggleGroupItem) => (\n  <ToggleGroup.Item {...rest} asChild>\n    <StyledTileToggleGroupItem as=\"button\">\n      {children}\n    </StyledTileToggleGroupItem>\n  </ToggleGroup.Item>\n)\n"],"mappings":";;;;;AAMA,IAAM,4BAA4B,OAAO,iBAAiB,EACxD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAKF,IAAa,uBAAuB,EAClC,UACA,GAAG,WAEH,wBAAA,cAAC,YAAY,MAAb;CAAkB,GAAI;CAAM,SAAA;CAIT,EAHjB,wBAAA,cAAC,2BAAD,EAA2B,IAAG,UAEF,EADzB,SACyB,CACX"}
+{"version":3,"file":"TileToggleGroupItem.js","names":[],"sources":["../../../src/components/tile-toggle-group/TileToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { TileInteractive } from '~/components/tile-interactive/TileInteractive'\nimport { styled } from '~/styled'\n\nconst StyledTileToggleGroupItem = styled(TileInteractive, {\n  base: [\n    'text-left',\n    'not-disabled:data-[state=on]:active:bg-(--interactive-3)',\n    'not-disabled:data-[state=on]:hover:bg-(--interactive-2)',\n    'data-[state=on]:before:-inset-px',\n    'data-[state=on]:before:absolute',\n    'data-[state=on]:before:rounded-[inherit]',\n    'data-[state=on]:before:inset-shadow-[var(--accent-8)_0px_0px_0px_2px]',\n    'data-[state=on]:before:z-1',\n    'data-[state=on]:bg-(--interactive-1)',\n    'data-[state=on]:border-(--accent-8)'\n  ]\n})\n\ntype TTileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledTileToggleGroupItem>\n\nexport const TileToggleGroupItem = ({\n  children,\n  ...rest\n}: TTileToggleGroupItem) => (\n  <ToggleGroup.Item {...rest} asChild>\n    <StyledTileToggleGroupItem as=\"button\">\n      {children}\n    </StyledTileToggleGroupItem>\n  </ToggleGroup.Item>\n)\n"],"mappings":";;;;;;AAMA,IAAM,4BAA4B,OAAO,iBAAiB,EACxD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAKF,IAAa,uBAAuB,EAClC,UACA,GAAG,WAEH,oBAAC,YAAY,MAAb;CAAkB,GAAI;CAAM,SAAA;WAC1B,oBAAC,2BAAD;EAA2B,IAAG;EAC3B;EACyB,CAAA;CACX,CAAA"}

package/dist/components/tile-toggle-group/TileToggleGroupRoot.js

@@ -1,8 +1,9 @@
 import { cn } from "../../styled.js";
 import { ToggleGroup } from "../../utilities/radix-overrides/toggle-group/index.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/tile-toggle-group/TileToggleGroupRoot.tsx
-var TileToggleGroupRoot = React$1.forwardRef(({ orientation, className, ...rest }, ref) => /* @__PURE__ */ React$1.createElement(ToggleGroup.Root, {
+var TileToggleGroupRoot = React$1.forwardRef(({ orientation, className, ...rest }, ref) => /* @__PURE__ */ jsx(ToggleGroup.Root, {
 	ref,
 	...rest,
 	className: cn("flex", "gap-2", orientation === "horizontal" && "flex-row", orientation === "vertical" && "flex-col", "flex-wrap", className)

package/dist/components/tile-toggle-group/TileToggleGroupRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileToggleGroupRoot.js","names":[],"sources":["../../../src/components/tile-toggle-group/TileToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype TTileToggleGroupRootProps = React.ComponentProps<typeof ToggleGroup.Root>\n\nexport const TileToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  TTileToggleGroupRootProps\n>(({ orientation, className, ...rest }, ref) => (\n  <ToggleGroup.Root\n    ref={ref}\n    {...rest}\n    className={cn(\n      'flex',\n      'gap-2',\n      orientation === 'horizontal' && 'flex-row',\n      orientation === 'vertical' && 'flex-col',\n      'flex-wrap',\n      className\n    )}\n  />\n))\n"],"mappings":";;;;AAOA,IAAa,sBAAsB,QAAM,YAGtC,EAAE,aAAa,WAAW,GAAG,QAAQ,QACtC,wBAAA,cAAC,YAAY,MAAb;CACO;CACL,GAAI;CACJ,WAAW,GACT,QACA,SACA,gBAAgB,gBAAgB,YAChC,gBAAgB,cAAc,YAC9B,aACA,UACD;CACD,CAAA,CACF"}
+{"version":3,"file":"TileToggleGroupRoot.js","names":[],"sources":["../../../src/components/tile-toggle-group/TileToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype TTileToggleGroupRootProps = React.ComponentProps<typeof ToggleGroup.Root>\n\nexport const TileToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  TTileToggleGroupRootProps\n>(({ orientation, className, ...rest }, ref) => (\n  <ToggleGroup.Root\n    ref={ref}\n    {...rest}\n    className={cn(\n      'flex',\n      'gap-2',\n      orientation === 'horizontal' && 'flex-row',\n      orientation === 'vertical' && 'flex-col',\n      'flex-wrap',\n      className\n    )}\n  />\n))\n"],"mappings":";;;;;AAOA,IAAa,sBAAsB,QAAM,YAGtC,EAAE,aAAa,WAAW,GAAG,QAAQ,QACtC,oBAAC,YAAY,MAAb;CACO;CACL,GAAI;CACJ,WAAW,GACT,QACA,SACA,gBAAgB,gBAAgB,YAChC,gBAAgB,cAAc,YAC9B,aACA,UACD;CACD,CAAA,CACF"}

package/dist/components/toast/Toast.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export declare const StyledToast: 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;
 }, "type"> & {
     type?: "loading" | "success" | "error" | "blank" | undefined;
 } & {
@@ -8,6 +8,6 @@ export declare const StyledToast: React.ForwardRefExoticComponent<Omit<Omit<Reac
 }>;
 export declare const Toast: {
     (props: React.ComponentProps<typeof StyledToast>): React.JSX.Element;
-    Icon: (props: React.ComponentProps<typeof import("..").Icon>) => JSX.Element;
-    Close: ({ onDismiss, label, ...rest }: import("./ToastCloseButton").ToastCloseButtonProps) => JSX.Element;
+    Icon: (props: React.ComponentProps<typeof import("..").Icon>) => React.JSX.Element;
+    Close: ({ onDismiss, label, ...rest }: import("./ToastCloseButton").ToastCloseButtonProps) => React.JSX.Element;
 };

package/dist/components/toast/Toast.js

@@ -2,7 +2,8 @@ import { styled } from "../../styled.js";
 import { useToastContext } from "./ToastContext.js";
 import { ToastCloseButton } from "./ToastCloseButton.js";
 import { ToastIcon } from "./ToastIcon.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/toast/Toast.tsx
 var StyledToast = styled("div", {
 	base: [
@@ -30,8 +31,9 @@ var StyledToast = styled("div", {
 });
 var Toast = (props) => {
 	const { type } = useToastContext();
-	return /* @__PURE__ */ React$1.createElement(StyledToast, {
-		type: props.type || type,
+	const styledType = type === "custom" ? void 0 : type;
+	return /* @__PURE__ */ jsx(StyledToast, {
+		type: props.type || styledType,
 		...props
 	});
 };

package/dist/components/toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","names":[],"sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ToastCloseButton } from './ToastCloseButton'\nimport { useToastContext } from './ToastContext'\nimport { ToastIcon } from './ToastIcon'\n\nexport const StyledToast = styled('div', {\n  base: [\n    'flex',\n    'items-center',\n    'pointer-events-auto',\n    'rounded-md',\n    'shadow-md',\n    'box-border',\n    'text-white',\n    'min-h-12',\n    'relative',\n    'px-4',\n    'py-1',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[colors,transform]'\n  ],\n  variants: {\n    type: {\n      loading: ['bg-info'],\n      blank: ['bg-info'],\n      success: ['bg-success'],\n      error: ['bg-danger']\n    }\n  }\n})\n\nexport const Toast = (props: React.ComponentProps<typeof StyledToast>) => {\n  const { type } = useToastContext()\n  return <StyledToast type={props.type || type} {...props} />\n}\n\nToast.Icon = ToastIcon\nToast.Close = ToastCloseButton\n"],"mappings":";;;;;;AAQA,IAAa,cAAc,OAAO,OAAO;CACvC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,SAAS,CAAC,UAAU;EACpB,OAAO,CAAC,UAAU;EAClB,SAAS,CAAC,aAAa;EACvB,OAAO,CAAC,YAAY;EACrB,EACF;CACF,CAAC;AAEF,IAAa,SAAS,UAAoD;CACxE,MAAM,EAAE,SAAS,iBAAiB;AAClC,QAAO,wBAAA,cAAC,aAAD;EAAa,MAAM,MAAM,QAAQ;EAAM,GAAI;EAAS,CAAA;;AAG7D,MAAM,OAAO;AACb,MAAM,QAAQ"}
+{"version":3,"file":"Toast.js","names":[],"sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ToastCloseButton } from './ToastCloseButton'\nimport { useToastContext } from './ToastContext'\nimport { ToastIcon } from './ToastIcon'\n\nexport const StyledToast = styled('div', {\n  base: [\n    'flex',\n    'items-center',\n    'pointer-events-auto',\n    'rounded-md',\n    'shadow-md',\n    'box-border',\n    'text-white',\n    'min-h-12',\n    'relative',\n    'px-4',\n    'py-1',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[colors,transform]'\n  ],\n  variants: {\n    type: {\n      loading: ['bg-info'],\n      blank: ['bg-info'],\n      success: ['bg-success'],\n      error: ['bg-danger']\n    }\n  }\n})\n\nexport const Toast = (props: React.ComponentProps<typeof StyledToast>) => {\n  const { type } = useToastContext()\n  const styledType = type === 'custom' ? undefined : type\n  return <StyledToast type={props.type || styledType} {...props} />\n}\n\nToast.Icon = ToastIcon\nToast.Close = ToastCloseButton\n"],"mappings":";;;;;;;AAQA,IAAa,cAAc,OAAO,OAAO;CACvC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,SAAS,CAAC,UAAU;EACpB,OAAO,CAAC,UAAU;EAClB,SAAS,CAAC,aAAa;EACvB,OAAO,CAAC,YAAY;EACrB,EACF;CACF,CAAC;AAEF,IAAa,SAAS,UAAoD;CACxE,MAAM,EAAE,SAAS,iBAAiB;CAClC,MAAM,aAAa,SAAS,WAAW,KAAA,IAAY;AACnD,QAAO,oBAAC,aAAD;EAAa,MAAM,MAAM,QAAQ;EAAY,GAAI;EAAS,CAAA;;AAGnE,MAAM,OAAO;AACb,MAAM,QAAQ"}

package/dist/components/toast/ToastCloseButton.d.ts

@@ -4,4 +4,4 @@ export interface ToastCloseButtonProps extends Omit<React.ComponentProps<typeof
     onDismiss?: () => void;
     label?: string;
 }
-export declare const ToastCloseButton: ({ onDismiss, label, ...rest }: ToastCloseButtonProps) => JSX.Element;
+export declare const ToastCloseButton: ({ onDismiss, label, ...rest }: ToastCloseButtonProps) => React.JSX.Element;

package/dist/components/toast/ToastCloseButton.js

@@ -2,21 +2,23 @@ import { cn } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { useToastContext } from "./ToastContext.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { Close } from "@atom-learning/icons";
 import { toast } from "react-hot-toast";
 //#region src/components/toast/ToastCloseButton.tsx
 var ToastCloseButton = ({ onDismiss, label = "Close alert", ...rest }) => {
 	const { id } = useToastContext();
-	return /* @__PURE__ */ React$1.createElement(ActionIcon, {
+	return /* @__PURE__ */ jsx(ActionIcon, {
 		label,
 		onClick: () => {
 			toast.dismiss(id);
 			onDismiss?.();
 		},
 		...rest,
-		className: cn("text-white", "-mr-2", "hover:opacity-80", "hover:text-white", "focus:opacity-80", "focus:text-white")
-	}, /* @__PURE__ */ React$1.createElement(Icon, { is: Close }));
+		className: cn("text-white", "-mr-2", "hover:opacity-80", "hover:text-white", "focus:opacity-80", "focus:text-white"),
+		children: /* @__PURE__ */ jsx(Icon, { is: Close })
+	});
 };
 //#endregion
 export { ToastCloseButton };

package/dist/components/toast/ToastCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastCloseButton.js","names":[],"sources":["../../../src/components/toast/ToastCloseButton.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { toast } from 'react-hot-toast'\n\nimport { cn } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { useToastContext } from './ToastContext'\n\nexport interface ToastCloseButtonProps extends Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'label' | 'children'\n> {\n  onDismiss?: () => void\n  label?: string\n}\n\nexport const ToastCloseButton = ({\n  onDismiss,\n  label = 'Close alert',\n  ...rest\n}: ToastCloseButtonProps): JSX.Element => {\n  const { id } = useToastContext()\n\n  return (\n    <ActionIcon\n      label={label}\n      onClick={() => {\n        toast.dismiss(id)\n        onDismiss?.()\n      }}\n      {...rest}\n      className={cn(\n        'text-white',\n        '-mr-2',\n        'hover:opacity-80',\n        'hover:text-white',\n        'focus:opacity-80',\n        'focus:text-white'\n      )}\n    >\n      <Icon is={Close} />\n    </ActionIcon>\n  )\n}\n"],"mappings":";;;;;;;;AAkBA,IAAa,oBAAoB,EAC/B,WACA,QAAQ,eACR,GAAG,WACqC;CACxC,MAAM,EAAE,OAAO,iBAAiB;AAEhC,QACE,wBAAA,cAAC,YAAD;EACS;EACP,eAAe;AACb,SAAM,QAAQ,GAAG;AACjB,gBAAa;;EAEf,GAAI;EACJ,WAAW,GACT,cACA,SACA,oBACA,oBACA,oBACA,mBACD;EAGU,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR"}
+{"version":3,"file":"ToastCloseButton.js","names":[],"sources":["../../../src/components/toast/ToastCloseButton.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { toast } from 'react-hot-toast'\n\nimport { cn } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { useToastContext } from './ToastContext'\n\nexport interface ToastCloseButtonProps extends Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'label' | 'children'\n> {\n  onDismiss?: () => void\n  label?: string\n}\n\nexport const ToastCloseButton = ({\n  onDismiss,\n  label = 'Close alert',\n  ...rest\n}: ToastCloseButtonProps): React.JSX.Element => {\n  const { id } = useToastContext()\n\n  return (\n    <ActionIcon\n      label={label}\n      onClick={() => {\n        toast.dismiss(id)\n        onDismiss?.()\n      }}\n      {...rest}\n      className={cn(\n        'text-white',\n        '-mr-2',\n        'hover:opacity-80',\n        'hover:text-white',\n        'focus:opacity-80',\n        'focus:text-white'\n      )}\n    >\n      <Icon is={Close} />\n    </ActionIcon>\n  )\n}\n"],"mappings":";;;;;;;;;AAkBA,IAAa,oBAAoB,EAC/B,WACA,QAAQ,eACR,GAAG,WAC2C;CAC9C,MAAM,EAAE,OAAO,iBAAiB;AAEhC,QACE,oBAAC,YAAD;EACS;EACP,eAAe;AACb,SAAM,QAAQ,GAAG;AACjB,gBAAa;;EAEf,GAAI;EACJ,WAAW,GACT,cACA,SACA,oBACA,oBACA,oBACA,mBACD;YAED,oBAAC,MAAD,EAAM,IAAI,OAAS,CAAA;EACR,CAAA"}

package/dist/components/toast/ToastContext.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import type { Toast } from 'react-hot-toast/dist/core/types';
+import type { Toast } from 'react-hot-toast';
 export declare const ToastContext: React.Context<Pick<Toast, "id" | "type" | "message"> | null>;
 export declare const useToastContext: () => Pick<Toast, "id" | "type" | "message">;

package/dist/components/toast/ToastContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContext.js","names":[],"sources":["../../../src/components/toast/ToastContext.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { Toast } from 'react-hot-toast/dist/core/types'\n\nexport const ToastContext = React.createContext<Pick<\n  Toast,\n  'type' | 'id' | 'message'\n> | null>(null)\n\nexport const useToastContext = () => {\n  const context = React.useContext(ToastContext)\n\n  if (!context) {\n    throw new Error('useToastContext must be used within a ToastProvider')\n  }\n\n  return context\n}\n"],"mappings":";;AAGA,IAAa,eAAe,QAAM,cAGxB,KAAK;AAEf,IAAa,wBAAwB;CACnC,MAAM,UAAU,QAAM,WAAW,aAAa;AAE9C,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,sDAAsD;AAGxE,QAAO"}
+{"version":3,"file":"ToastContext.js","names":[],"sources":["../../../src/components/toast/ToastContext.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { Toast } from 'react-hot-toast'\n\nexport const ToastContext = React.createContext<Pick<\n  Toast,\n  'type' | 'id' | 'message'\n> | null>(null)\n\nexport const useToastContext = () => {\n  const context = React.useContext(ToastContext)\n\n  if (!context) {\n    throw new Error('useToastContext must be used within a ToastProvider')\n  }\n\n  return context\n}\n"],"mappings":";;AAGA,IAAa,eAAe,QAAM,cAGxB,KAAK;AAEf,IAAa,wBAAwB;CACnC,MAAM,UAAU,QAAM,WAAW,aAAa;AAE9C,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,sDAAsD;AAGxE,QAAO"}

package/dist/components/toast/ToastIcon.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { Icon } from '../icon/Icon';
-export declare const ToastIcon: (props: React.ComponentProps<typeof Icon>) => JSX.Element;
+export declare const ToastIcon: (props: React.ComponentProps<typeof Icon>) => React.JSX.Element;

package/dist/components/toast/ToastIcon.js

@@ -1,7 +1,8 @@
 import { Icon } from "../icon/Icon.js";
-import React from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/toast/ToastIcon.tsx
-var ToastIcon = (props) => /* @__PURE__ */ React.createElement(Icon, {
+var ToastIcon = (props) => /* @__PURE__ */ jsx(Icon, {
 	size: "sm",
 	...props,
 	className: "mr-3 flex-[0_0_auto]"

package/dist/components/toast/ToastIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastIcon.js","names":[],"sources":["../../../src/components/toast/ToastIcon.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Icon } from '../icon/Icon'\n\nexport const ToastIcon = (\n  props: React.ComponentProps<typeof Icon>\n): JSX.Element => <Icon size=\"sm\" {...props} className=\"mr-3 flex-[0_0_auto]\" />\n"],"mappings":";;;AAIA,IAAa,aACX,UACgB,sBAAA,cAAC,MAAD;CAAM,MAAK;CAAK,GAAI;CAAO,WAAU;CAAyB,CAAA"}
+{"version":3,"file":"ToastIcon.js","names":[],"sources":["../../../src/components/toast/ToastIcon.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Icon } from '../icon/Icon'\n\nexport const ToastIcon = (\n  props: React.ComponentProps<typeof Icon>\n): React.JSX.Element => <Icon size=\"sm\" {...props} className=\"mr-3 flex-[0_0_auto]\" />\n"],"mappings":";;;;AAIA,IAAa,aACX,UACsB,oBAAC,MAAD;CAAM,MAAK;CAAK,GAAI;CAAO,WAAU;CAAyB,CAAA"}

package/dist/components/toast/ToastProvider.js

@@ -4,6 +4,7 @@ import { Spacer } from "../spacer/Spacer.js";
 import { ToastContext } from "./ToastContext.js";
 import { Toast } from "./Toast.js";
 import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Error } from "@atom-learning/icons";
 import toast$1, { useToaster } from "react-hot-toast";
 //#region src/components/toast/ToastProvider.tsx
@@ -35,29 +36,41 @@ var ToastWrapper = styled("div", {
 var ToastProvider = ({ children, className }) => {
 	const { toasts, handlers } = useToaster();
 	const { startPause, endPause, calculateOffset, updateHeight } = handlers;
-	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(ToastProviderBase, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ToastProviderBase, {
 		onMouseEnter: startPause,
 		onMouseLeave: endPause,
-		className
-	}, toasts.map((toast) => {
-		const { message: children } = toast;
-		const offset = calculateOffset(toast.id, {
-			reverseOrder: true,
-			margin: 8
-		});
-		const ref = (el) => {
-			if (el && toast.height === void 0) updateHeight(toast.id, el.getBoundingClientRect().height);
-		};
-		return /* @__PURE__ */ React$1.createElement(ToastWrapper, {
-			key: toast.id,
-			ref,
-			visible: toast.visible,
-			role: toast.role,
-			"aria-live": toast.ariaLive,
-			style: { "--offset": `${offset}px` },
-			className: "top-(--offset)"
-		}, /* @__PURE__ */ React$1.createElement(ToastContext.Provider, { value: toast }, typeof children === "function" ? children(toast) : React$1.isValidElement(children) ? children : /* @__PURE__ */ React$1.createElement(Toast, { className: "w-100" }, toast.type === "error" && /* @__PURE__ */ React$1.createElement(Toast.Icon, { is: Error }), /* @__PURE__ */ React$1.createElement(Text, null, children), /* @__PURE__ */ React$1.createElement(Spacer, null), /* @__PURE__ */ React$1.createElement(Toast.Close, null))));
-	})), children);
+		className,
+		children: toasts.map((toast) => {
+			const { message: children } = toast;
+			const offset = calculateOffset(toast, {
+				reverseOrder: true,
+				gutter: 8
+			});
+			const ref = (el) => {
+				if (el && toast.height === void 0) updateHeight(toast.id, el.getBoundingClientRect().height);
+			};
+			return /* @__PURE__ */ jsx(ToastWrapper, {
+				ref,
+				visible: toast.visible,
+				role: toast.ariaProps.role,
+				"aria-live": toast.ariaProps["aria-live"],
+				style: { "--offset": `${offset}px` },
+				className: "top-(--offset)",
+				children: /* @__PURE__ */ jsx(ToastContext.Provider, {
+					value: toast,
+					children: typeof children === "function" ? children(toast) : React$1.isValidElement(children) ? children : /* @__PURE__ */ jsxs(Toast, {
+						className: "w-100",
+						children: [
+							toast.type === "error" && /* @__PURE__ */ jsx(Toast.Icon, { is: Error }),
+							/* @__PURE__ */ jsx(Text, { children }),
+							/* @__PURE__ */ jsx(Spacer, {}),
+							/* @__PURE__ */ jsx(Toast.Close, {})
+						]
+					})
+				})
+			}, toast.id);
+		})
+	}), children] });
 };
 ToastProvider.displayName = "ToastProvider";
 //#endregion

package/dist/components/toast/ToastProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { styled } from '~/styled'\n\nimport { Spacer } from '../spacer/Spacer'\nimport { Text } from '../text/Text'\nimport { Toast } from './Toast'\nimport { ToastContext } from './ToastContext'\n\nexport { default as toast } from 'react-hot-toast'\nexport { useToastContext } from './ToastContext'\n\nconst ToastProviderBase = styled('div', {\n  base: ['fixed', 'z-2147483647', 'inset-2', 'pointer-events-none', 'sm:top-3']\n})\n\nconst ToastWrapper = styled('div', {\n  base: [\n    'absolute',\n    'w-full',\n    'flex',\n    'justify-center',\n    'items-center',\n    'rounded-sm',\n    'box-border',\n    'min-h-12',\n    '[--slide-opacity-out:0]',\n    '[--slide-direction-out-y:-100%]'\n  ],\n  variants: {\n    visible: {\n      true: ['motion-safe:animate-slide-direction-in'],\n      false: ['opacity-0', 'motion-safe:animate-slide-direction-out']\n    }\n  }\n})\n\nexport const ToastProvider = ({\n  children,\n  className\n}: React.PropsWithChildren<{ className?: string }>) => {\n  const { toasts, handlers } = useToaster()\n  const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n  return (\n    <>\n      <ToastProviderBase\n        onMouseEnter={startPause}\n        onMouseLeave={endPause}\n        className={className}\n      >\n        {toasts.map((toast) => {\n          const { message: children } = toast\n\n          const offset = calculateOffset(toast.id, {\n            reverseOrder: true,\n            margin: 8\n          })\n\n          const ref = (el: HTMLDivElement | null) => {\n            if (el && toast.height === undefined) {\n              updateHeight(toast.id, el.getBoundingClientRect().height)\n            }\n          }\n\n          return (\n            <ToastWrapper\n              key={toast.id}\n              ref={ref}\n              visible={toast.visible}\n              role={toast.role}\n              aria-live={toast.ariaLive}\n              style={{ '--offset': `${offset}px` }}\n              className=\"top-(--offset)\"\n            >\n              <ToastContext.Provider value={toast}>\n                {typeof children === 'function' ? (\n                  children(toast)\n                ) : React.isValidElement(children) ? (\n                  children\n                ) : (\n                  <Toast className=\"w-100\">\n                    {toast.type === 'error' && <Toast.Icon is={Error} />}\n                    <Text>{children}</Text>\n                    <Spacer />\n                    <Toast.Close />\n                  </Toast>\n                )}\n              </ToastContext.Provider>\n            </ToastWrapper>\n          )\n        })}\n      </ToastProviderBase>\n      {children}\n    </>\n  )\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"mappings":";;;;;;;;;AAcA,IAAM,oBAAoB,OAAO,OAAO,EACtC,MAAM;CAAC;CAAS;CAAgB;CAAW;CAAuB;CAAW,EAC9E,CAAC;AAEF,IAAM,eAAe,OAAO,OAAO;CACjC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,SAAS;EACP,MAAM,CAAC,yCAAyC;EAChD,OAAO,CAAC,aAAa,0CAA0C;EAChE,EACF;CACF,CAAC;AAEF,IAAa,iBAAiB,EAC5B,UACA,gBACqD;CACrD,MAAM,EAAE,QAAQ,aAAa,YAAY;CACzC,MAAM,EAAE,YAAY,UAAU,iBAAiB,iBAAiB;AAEhE,QACE,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,mBAAD;EACE,cAAc;EACd,cAAc;EACH;EA2CO,EAzCjB,OAAO,KAAK,UAAU;EACrB,MAAM,EAAE,SAAS,aAAa;EAE9B,MAAM,SAAS,gBAAgB,MAAM,IAAI;GACvC,cAAc;GACd,QAAQ;GACT,CAAC;EAEF,MAAM,OAAO,OAA8B;AACzC,OAAI,MAAM,MAAM,WAAW,KAAA,EACzB,cAAa,MAAM,IAAI,GAAG,uBAAuB,CAAC,OAAO;;AAI7D,SACE,wBAAA,cAAC,cAAD;GACE,KAAK,MAAM;GACN;GACL,SAAS,MAAM;GACf,MAAM,MAAM;GACZ,aAAW,MAAM;GACjB,OAAO,EAAE,YAAY,GAAG,OAAO,KAAK;GACpC,WAAU;GAgBG,EAdb,wBAAA,cAAC,aAAa,UAAd,EAAuB,OAAO,OAaN,EAZrB,OAAO,aAAa,aACnB,SAAS,MAAM,GACb,QAAM,eAAe,SAAS,GAChC,WAEA,wBAAA,cAAC,OAAD,EAAO,WAAU,SAKT,EAJL,MAAM,SAAS,WAAW,wBAAA,cAAC,MAAM,MAAP,EAAY,IAAI,OAAS,CAAA,EACpD,wBAAA,cAAC,MAAA,MAAM,SAAgB,EACvB,wBAAA,cAAC,QAAA,KAAS,EACV,wBAAA,cAAC,MAAM,OAAA,KAAQ,CACT,CAEY,CACX;GAEjB,CACgB,EACnB,SACA;;AAIP,cAAc,cAAc"}
+{"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { styled } from '~/styled'\n\nimport { Spacer } from '../spacer/Spacer'\nimport { Text } from '../text/Text'\nimport { Toast } from './Toast'\nimport { ToastContext } from './ToastContext'\n\nexport { default as toast } from 'react-hot-toast'\nexport { useToastContext } from './ToastContext'\n\nconst ToastProviderBase = styled('div', {\n  base: ['fixed', 'z-2147483647', 'inset-2', 'pointer-events-none', 'sm:top-3']\n})\n\nconst ToastWrapper = styled('div', {\n  base: [\n    'absolute',\n    'w-full',\n    'flex',\n    'justify-center',\n    'items-center',\n    'rounded-sm',\n    'box-border',\n    'min-h-12',\n    '[--slide-opacity-out:0]',\n    '[--slide-direction-out-y:-100%]'\n  ],\n  variants: {\n    visible: {\n      true: ['motion-safe:animate-slide-direction-in'],\n      false: ['opacity-0', 'motion-safe:animate-slide-direction-out']\n    }\n  }\n})\n\nexport const ToastProvider = ({\n  children,\n  className\n}: React.PropsWithChildren<{ className?: string }>) => {\n  const { toasts, handlers } = useToaster()\n  const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n  return (\n    <>\n      <ToastProviderBase\n        onMouseEnter={startPause}\n        onMouseLeave={endPause}\n        className={className}\n      >\n        {toasts.map((toast) => {\n          const { message: children } = toast\n\n          const offset = calculateOffset(toast, {\n            reverseOrder: true,\n            gutter: 8\n          })\n\n          const ref = (el: HTMLDivElement | null) => {\n            if (el && toast.height === undefined) {\n              updateHeight(toast.id, el.getBoundingClientRect().height)\n            }\n          }\n\n          return (\n            <ToastWrapper\n              key={toast.id}\n              ref={ref}\n              visible={toast.visible}\n              role={toast.ariaProps.role}\n              aria-live={toast.ariaProps['aria-live']}\n              style={{ '--offset': `${offset}px` }}\n              className=\"top-(--offset)\"\n            >\n              <ToastContext.Provider value={toast}>\n                {typeof children === 'function' ? (\n                  children(toast)\n                ) : React.isValidElement(children) ? (\n                  children\n                ) : (\n                  <Toast className=\"w-100\">\n                    {toast.type === 'error' && <Toast.Icon is={Error} />}\n                    <Text>{children}</Text>\n                    <Spacer />\n                    <Toast.Close />\n                  </Toast>\n                )}\n              </ToastContext.Provider>\n            </ToastWrapper>\n          )\n        })}\n      </ToastProviderBase>\n      {children}\n    </>\n  )\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"mappings":";;;;;;;;;;AAcA,IAAM,oBAAoB,OAAO,OAAO,EACtC,MAAM;CAAC;CAAS;CAAgB;CAAW;CAAuB;CAAW,EAC9E,CAAC;AAEF,IAAM,eAAe,OAAO,OAAO;CACjC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,SAAS;EACP,MAAM,CAAC,yCAAyC;EAChD,OAAO,CAAC,aAAa,0CAA0C;EAChE,EACF;CACF,CAAC;AAEF,IAAa,iBAAiB,EAC5B,UACA,gBACqD;CACrD,MAAM,EAAE,QAAQ,aAAa,YAAY;CACzC,MAAM,EAAE,YAAY,UAAU,iBAAiB,iBAAiB;AAEhE,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,mBAAD;EACE,cAAc;EACd,cAAc;EACH;YAEV,OAAO,KAAK,UAAU;GACrB,MAAM,EAAE,SAAS,aAAa;GAE9B,MAAM,SAAS,gBAAgB,OAAO;IACpC,cAAc;IACd,QAAQ;IACT,CAAC;GAEF,MAAM,OAAO,OAA8B;AACzC,QAAI,MAAM,MAAM,WAAW,KAAA,EACzB,cAAa,MAAM,IAAI,GAAG,uBAAuB,CAAC,OAAO;;AAI7D,UACE,oBAAC,cAAD;IAEO;IACL,SAAS,MAAM;IACf,MAAM,MAAM,UAAU;IACtB,aAAW,MAAM,UAAU;IAC3B,OAAO,EAAE,YAAY,GAAG,OAAO,KAAK;IACpC,WAAU;cAEV,oBAAC,aAAa,UAAd;KAAuB,OAAO;eAC3B,OAAO,aAAa,aACnB,SAAS,MAAM,GACb,QAAM,eAAe,SAAS,GAChC,WAEA,qBAAC,OAAD;MAAO,WAAU;gBAAjB;OACG,MAAM,SAAS,WAAW,oBAAC,MAAM,MAAP,EAAY,IAAI,OAAS,CAAA;OACpD,oBAAC,MAAD,EAAO,UAAgB,CAAA;OACvB,oBAAC,QAAD,EAAU,CAAA;OACV,oBAAC,MAAM,OAAP,EAAe,CAAA;OACT;;KAEY,CAAA;IACX,EAtBR,MAAM,GAsBE;IAEjB;EACgB,CAAA,EACnB,SACA,EAAA,CAAA;;AAIP,cAAc,cAAc"}

package/dist/components/toggle-group/ToggleGroupButton.d.ts

@@ -1,13 +1,17 @@
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import * as React from 'react';
-export declare const StyledButton: React.ForwardRefExoticComponent<Omit<ToggleGroup.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "size" | "theme" | "isIconOnly"> & {
+export declare const StyledButton: React.ForwardRefExoticComponent<Omit<Omit<ToggleGroup.ToggleGroupItemProps & 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;
+}, "size" | "theme" | "isIconOnly"> & {
     size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
     isIconOnly?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     theme?: ("standard" | "modern" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "standard" | "modern">>) | undefined;
 } & {
     as?: React.ElementType;
 }>;
-export declare const ToggleGroupButton: React.ForwardRefExoticComponent<Omit<Omit<ToggleGroup.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "size" | "theme" | "isIconOnly"> & {
+export declare const ToggleGroupButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<ToggleGroup.ToggleGroupItemProps & 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;
+}, "size" | "theme" | "isIconOnly"> & {
     size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
     isIconOnly?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     theme?: ("standard" | "modern" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "standard" | "modern">>) | undefined;

package/dist/components/toggle-group/ToggleGroupButton.js

@@ -2,6 +2,7 @@ import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { modernVariant, standardVariant } from "./ToggleGroupItem.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 import * as ToggleGroup from "@radix-ui/react-toggle-group";
 //#region src/components/toggle-group/ToggleGroupButton.tsx
 var StyledButton = styled(ToggleGroup.Item, {
@@ -83,23 +84,23 @@ var StyledButton = styled(ToggleGroup.Item, {
 var ToggleGroupButton = React$1.forwardRef(({ size = "md", theme = "standard", children, ...rest }, ref) => {
 	const childrenArray = React$1.Children.toArray(children);
 	const isSingleChild = childrenArray.length <= 1;
-	const isIconOnly = isSingleChild && React$1.isValidElement(childrenArray[0]) && childrenArray[0]?.type === Icon;
-	return /* @__PURE__ */ React$1.createElement(StyledButton, {
+	return /* @__PURE__ */ jsx(StyledButton, {
 		ref,
 		size,
-		isIconOnly,
+		isIconOnly: isSingleChild && React$1.isValidElement(childrenArray[0]) && childrenArray[0]?.type === Icon,
 		theme,
-		...rest
-	}, childrenArray.map((child) => {
-		if (!isSingleChild && (typeof child === "string" || typeof child === "number")) return /* @__PURE__ */ React$1.createElement("span", { key: child }, child);
-		if (React$1.isValidElement(child)) {
-			if (child?.type === Icon) return React$1.cloneElement(child, {
-				...child.props,
-				size
-			});
-		}
-		return child;
-	}));
+		...rest,
+		children: childrenArray.map((child) => {
+			if (!isSingleChild && (typeof child === "string" || typeof child === "number")) return /* @__PURE__ */ jsx("span", { children: child }, child);
+			if (React$1.isValidElement(child)) {
+				if (child?.type === Icon) return React$1.cloneElement(child, {
+					...child.props,
+					size
+				});
+			}
+			return child;
+		})
+	});
 });
 //#endregion
 export { ToggleGroupButton };