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

package/dist/components/tile/Tile.js

@@ -1,6 +1,6 @@
 import { styled } from "../../styled.js";
 import { ColorScheme } from "../../experiments/color-scheme/ColorScheme.js";
-import React from "react";
+import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/tile/Tile.tsx
 var StyledTile = styled("div", {
@@ -23,8 +23,8 @@ var StyledTile = styled("div", {
 		border: { true: ["border-(--base-3)"] },
 		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__ */ jsx(ColorScheme, {
+}, { enableResponsiveVariants: true });
+var Tile = ({ ref, children, borderRadius = "lg", colorScheme = {}, ...rest }) => /* @__PURE__ */ jsx(ColorScheme, {
 	asChild: true,
 	base: "grey1",
 	accent: "primary2",
@@ -36,9 +36,8 @@ var Tile = React.forwardRef(({ children, borderRadius = "lg", colorScheme = {},
 		...rest,
 		children
 	})
-}));
-Tile.displayName = "Tile";
+});
 //#endregion
-export { Tile };
+export { StyledTile, Tile };
 
 //# sourceMappingURL=Tile.js.map

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,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"}
+{"version":3,"file":"Tile.js","names":[],"sources":["../../../src/components/tile/Tile.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  ColorScheme,\n  type 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  { enableResponsiveVariants: true }\n)\n\ntype TileProps = React.ComponentProps<typeof StyledTile> & {\n  colorScheme?: TcolorScheme\n}\n\nexport const Tile = ({\n  ref,\n  children,\n  borderRadius = 'lg',\n  colorScheme = {},\n  ...rest\n}: TileProps) => (\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"],"mappings":";;;;;AAQA,IAAa,aAAa,OACxB,OACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,cAAc;GACZ,IAAI,CAAC,YAAY;GACjB,IAAI,CAAC,YAAY;GACjB,IAAI,CAAC,YAAY;EACnB;EACA,QAAQ,EACN,MAAM,CAAC,mBAAmB,EAC5B;EACA,UAAU,EACR,MAAM,CACJ,wEACA,qCACF,EACF;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAMA,IAAa,QAAQ,EACnB,KACA,UACA,eAAe,MACf,cAAc,CAAC,GACf,GAAG,WAEH,oBAAC,aAAD;CACE,SAAA;CACA,MAAK;CACL,QAAO;CACP,aAAY;CACZ,GAAI;WAEJ,oBAAC,YAAD;EAAiB;EAAmB;EAAc,GAAI;EACnD;CACS,CAAA;AACD,CAAA"}

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

@@ -1,16 +1,17 @@
-import React from 'react';
-import { NavigatorActions } from '../../types/navigatorActions.types';
-declare const StyledTileInteractive: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "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;
-    diffused?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-} & {
-    as?: React.ElementType;
+import * as React from 'react';
+import type { NavigatorActions } from '../../types/navigatorActions.types';
+import type { Override } from '../../utilities/types';
+declare const StyledTileInteractive: import("../..").PolymorphicComponent<({ ref, children, borderRadius, colorScheme, ...rest }: {
+    borderRadius?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
+    border?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    diffused?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
+    as?: never;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "as" | "border" | "borderRadius" | "diffused"> & {
     colorScheme?: import("../..").TcolorScheme;
-}, "ref"> & React.RefAttributes<HTMLDivElement>, never> & {
+}) => React.JSX.Element, unknown>;
+type TileInteractiveProps = Override<React.ComponentProps<typeof StyledTileInteractive> & React.ButtonHTMLAttributes<HTMLButtonElement> & NavigatorActions, {
     as?: React.ElementType;
 }>;
-type TTileInteractiveProps = React.ComponentProps<typeof StyledTileInteractive> & React.ButtonHTMLAttributes<HTMLButtonElement> & NavigatorActions;
-export declare const TileInteractive: React.ForwardRefExoticComponent<Omit<TTileInteractiveProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TileInteractive: ({ ref, onClick, href, type, as, ...rest }: TileInteractiveProps) => React.JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
 import { styled } from "../../styled.js";
 import { Tile } from "../tile/Tile.js";
-import React from "react";
+import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/tile-interactive/TileInteractive.tsx
 var StyledTileInteractive = styled(Tile, { base: [
@@ -29,7 +29,7 @@ var StyledTileInteractive = styled(Tile, { base: [
 	"not-disabled:transition-transform",
 	"not-disabled:translate-y-0"
 ] });
-var TileInteractive = React.forwardRef(({ onClick, href, type = "button", as, ...rest }, ref) => {
+var TileInteractive = ({ ref, onClick, href, type = "button", as, ...rest }) => {
 	const elementSpecificProps = !!href ? {
 		as: as || "a",
 		href,
@@ -44,8 +44,7 @@ var TileInteractive = React.forwardRef(({ onClick, href, type = "button", as, ..
 		...elementSpecificProps,
 		ref
 	});
-});
-TileInteractive.displayName = "TileInteractive";
+};
 //#endregion
 export { TileInteractive };
 

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,oBAAC,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 * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { NavigatorActions } from '../../types/navigatorActions.types'\nimport type { Override } from '../../utilities/types'\nimport { Tile } from '../tile/Tile'\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 TileInteractiveProps = Override<\n  React.ComponentProps<typeof StyledTileInteractive> &\n    React.ButtonHTMLAttributes<HTMLButtonElement> &\n    NavigatorActions,\n  { as?: React.ElementType }\n>\n\nexport const TileInteractive = ({\n  ref,\n  onClick,\n  href,\n  type = 'button',\n  as,\n  ...rest\n}: TileInteractiveProps) => {\n  const isLink = !!href\n  const elementSpecificProps = isLink\n    ? {\n        as: as || 'a',\n        href,\n        onClick: undefined\n      }\n    : {\n        as: as || 'button',\n        type,\n        onClick\n      }\n\n  return <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n}\n"],"mappings":";;;;;AAOA,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;AACF,EACF,CAAC;AASD,IAAa,mBAAmB,EAC9B,KACA,SACA,MACA,OAAO,UACP,IACA,GAAG,WACuB;CAE1B,MAAM,uBAAuB,CADb,CAAC,OAEb;EACE,IAAI,MAAM;EACV;EACA,SAAS,KAAA;CACX,IACA;EACE,IAAI,MAAM;EACV;EACA;CACF;CAEJ,OAAO,oBAAC,uBAAD;EAAuB,GAAI;EAAM,GAAI;EAA2B;CAAM,CAAA;AAC/E"}

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

@@ -1,18 +1,18 @@
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import * as React from 'react';
-declare const StyledTileToggleGroupItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "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;
-    diffused?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-} & {
-    as?: React.ElementType;
+declare const StyledTileToggleGroupItem: import("../..").PolymorphicComponent<({ ref, onClick, href, type, as, ...rest }: Omit<{
+    as?: never;
+} & Omit<{
+    borderRadius?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
+    border?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    diffused?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
+    as?: never;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "as" | "border" | "borderRadius" | "diffused"> & {
     colorScheme?: import("../..").TcolorScheme;
-}, "ref"> & React.RefAttributes<HTMLDivElement>, never> & {
-    as?: React.ElementType;
-} & React.ButtonHTMLAttributes<HTMLButtonElement> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLDivElement>, never> & {
+}, "as"> & React.ButtonHTMLAttributes<HTMLButtonElement> & import("../..").NavigatorActions, "as"> & {
     as?: React.ElementType;
-}>;
-type TTileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> & React.ComponentProps<typeof StyledTileToggleGroupItem>;
-export declare const TileToggleGroupItem: ({ children, ...rest }: TTileToggleGroupItem) => React.JSX.Element;
+}) => React.JSX.Element, unknown>;
+type TileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> & React.ComponentProps<typeof StyledTileToggleGroupItem>;
+export declare const TileToggleGroupItem: ({ children, ...rest }: TileToggleGroupItem) => React.JSX.Element;
 export {};

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,oBAAC,YAAY,MAAb;CAAkB,GAAI;CAAM,SAAA;WAC1B,oBAAC,2BAAD;EAA2B,IAAG;EAC3B;EACyB,CAAA;CACX,CAAA"}
+{"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 { styled } from '../../styled'\nimport { TileInteractive } from '../tile-interactive/TileInteractive'\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 TileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledTileToggleGroupItem>\n\nexport const TileToggleGroupItem = ({\n  children,\n  ...rest\n}: TileToggleGroupItem) => (\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;AACF,EACF,CAAC;AAKD,IAAa,uBAAuB,EAClC,UACA,GAAG,WAEH,oBAAC,YAAY,MAAb;CAAkB,GAAI;CAAM,SAAA;WAC1B,oBAAC,2BAAD;EAA2B,IAAG;EAC3B;CACwB,CAAA;AACX,CAAA"}

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
-export declare const TileToggleGroupRoot: React.ForwardRefExoticComponent<(Omit<Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement> & {
-    disableDeselect?: boolean;
-}, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement> & {
-    disableDeselect?: boolean;
-}, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">) & React.RefAttributes<HTMLDivElement>>;
+import { ToggleGroup } from '../../utilities/radix-overrides/toggle-group';
+type TileToggleGroupRootProps = React.ComponentProps<typeof ToggleGroup.Root>;
+export declare const TileToggleGroupRoot: ({ ref, orientation, className, ...rest }: TileToggleGroupRootProps) => React.JSX.Element;
+export {};

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

@@ -1,13 +1,13 @@
 import { cn } from "../../styled.js";
 import { ToggleGroup } from "../../utilities/radix-overrides/toggle-group/index.js";
-import * as React$1 from "react";
+import "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__ */ jsx(ToggleGroup.Root, {
+var TileToggleGroupRoot = ({ ref, orientation, className, ...rest }) => /* @__PURE__ */ jsx(ToggleGroup.Root, {
 	ref,
 	...rest,
 	className: cn("flex", "gap-2", orientation === "horizontal" && "flex-row", orientation === "vertical" && "flex-col", "flex-wrap", className)
-}));
+});
 //#endregion
 export { TileToggleGroupRoot };
 

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,oBAAC,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 TileToggleGroupRootProps = React.ComponentProps<typeof ToggleGroup.Root>\n\nexport const TileToggleGroupRoot = ({\n  ref,\n  orientation,\n  className,\n  ...rest\n}: TileToggleGroupRootProps) => (\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,uBAAuB,EAClC,KACA,aACA,WACA,GAAG,WAEH,oBAAC,YAAY,MAAb;CACO;CACL,GAAI;CACJ,WAAW,GACT,QACA,SACA,gBAAgB,gBAAgB,YAChC,gBAAgB,cAAc,YAC9B,aACA,SACF;AACD,CAAA"}

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

@@ -1,7 +1,7 @@
 import { TileToggleGroupItem } from './TileToggleGroupItem';
 import { TileToggleGroupRoot } from './TileToggleGroupRoot';
-type TTileToggleGroup = typeof TileToggleGroupRoot & {
+type TileToggleGroup = typeof TileToggleGroupRoot & {
     Item: typeof TileToggleGroupItem;
 };
-export declare const TileToggleGroup: TTileToggleGroup;
+export declare const TileToggleGroup: TileToggleGroup;
 export {};

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

@@ -3,7 +3,6 @@ import { TileToggleGroupRoot } from "./TileToggleGroupRoot.js";
 //#region src/components/tile-toggle-group/index.ts
 var TileToggleGroup = TileToggleGroupRoot;
 TileToggleGroup.Item = TileToggleGroupItem;
-TileToggleGroup.displayName = "TileToggleGroup";
 //#endregion
 export { TileToggleGroup };
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/tile-toggle-group/index.ts"],"sourcesContent":["import { TileToggleGroupItem } from './TileToggleGroupItem'\nimport { TileToggleGroupRoot } from './TileToggleGroupRoot'\n\ntype TTileToggleGroup = typeof TileToggleGroupRoot & {\n  Item: typeof TileToggleGroupItem\n}\n\nexport const TileToggleGroup = TileToggleGroupRoot as TTileToggleGroup\nTileToggleGroup.Item = TileToggleGroupItem\nTileToggleGroup.displayName = 'TileToggleGroup'\n"],"mappings":";;;AAOA,IAAa,kBAAkB;AAC/B,gBAAgB,OAAO;AACvB,gBAAgB,cAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/tile-toggle-group/index.ts"],"sourcesContent":["import { TileToggleGroupItem } from './TileToggleGroupItem'\nimport { TileToggleGroupRoot } from './TileToggleGroupRoot'\n\ntype TileToggleGroup = typeof TileToggleGroupRoot & {\n  Item: typeof TileToggleGroupItem\n}\n\nexport const TileToggleGroup = TileToggleGroupRoot as TileToggleGroup\nTileToggleGroup.Item = TileToggleGroupItem\n"],"mappings":";;;AAOA,IAAa,kBAAkB;AAC/B,gBAAgB,OAAO"}

package/dist/components/toast/{ToastContext.d.ts → Toast.context.d.ts}

@@ -1,4 +1,4 @@
 import * as React from 'react';
 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">;
+export declare const ToastContext: React.Context<Pick<Toast, "id" | "message" | "type"> | null>;
+export declare const useToastContext: () => Pick<Toast, "id" | "message" | "type">;

package/dist/components/toast/{ToastContext.js → Toast.context.js}

@@ -1,5 +1,5 @@
 import * as React$1 from "react";
-//#region src/components/toast/ToastContext.tsx
+//#region src/components/toast/Toast.context.tsx
 var ToastContext = React$1.createContext(null);
 var useToastContext = () => {
 	const context = React$1.useContext(ToastContext);
@@ -9,4 +9,4 @@ var useToastContext = () => {
 //#endregion
 export { ToastContext, useToastContext };
 
-//# sourceMappingURL=ToastContext.js.map
+//# sourceMappingURL=Toast.context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.context.js","names":[],"sources":["../../../src/components/toast/Toast.context.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,IAAI;AAEd,IAAa,wBAAwB;CACnC,MAAM,UAAU,QAAM,WAAW,YAAY;CAE7C,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,qDAAqD;CAGvE,OAAO;AACT"}

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

@@ -1,11 +1,8 @@
 import * as React from 'react';
-export declare const StyledToast: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "type"> & {
-    type?: "success" | "loading" | "error" | "blank" | undefined;
-} & {
-    as?: React.ElementType;
+export declare const StyledToast: import("../..").PolymorphicComponent<"div", {
+    type?: "blank" | "error" | "loading" | "success" | undefined;
 }>;
-export declare const Toast: {
-    (props: React.ComponentProps<typeof StyledToast>): React.JSX.Element;
+export declare const Toast: ((props: React.ComponentProps<typeof StyledToast>) => React.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

@@ -1,5 +1,5 @@
 import { styled } from "../../styled.js";
-import { useToastContext } from "./ToastContext.js";
+import { useToastContext } from "./Toast.context.js";
 import { ToastCloseButton } from "./ToastCloseButton.js";
 import { ToastIcon } from "./ToastIcon.js";
 import "react";
@@ -29,7 +29,7 @@ var StyledToast = styled("div", {
 		error: ["bg-danger"]
 	} }
 });
-var Toast = (props) => {
+var ToastComponent = (props) => {
 	const { type } = useToastContext();
 	const styledType = type === "custom" ? void 0 : type;
 	return /* @__PURE__ */ jsx(StyledToast, {
@@ -37,9 +37,11 @@ var Toast = (props) => {
 		...props
 	});
 };
-Toast.Icon = ToastIcon;
-Toast.Close = ToastCloseButton;
+var Toast = /* @__PURE__ */ Object.assign(ToastComponent, {
+	Icon: ToastIcon,
+	Close: ToastCloseButton
+});
 //#endregion
-export { Toast };
+export { StyledToast, Toast };
 
 //# sourceMappingURL=Toast.js.map

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  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"}
+{"version":3,"file":"Toast.js","names":[],"sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { useToastContext } from './Toast.context'\nimport { ToastCloseButton } from './ToastCloseButton'\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\nconst ToastComponent = (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\nexport const Toast = /* @__PURE__ */ Object.assign(ToastComponent, {\n  Icon: ToastIcon,\n  Close: ToastCloseButton\n})\n"],"mappings":";;;;;;;AAOA,IAAa,cAAc,OAAO,OAAO;CACvC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,SAAS,CAAC,SAAS;EACnB,OAAO,CAAC,SAAS;EACjB,SAAS,CAAC,YAAY;EACtB,OAAO,CAAC,WAAW;CACrB,EACF;AACF,CAAC;AAED,IAAM,kBAAkB,UAAoD;CAC1E,MAAM,EAAE,SAAS,gBAAgB;CACjC,MAAM,aAAa,SAAS,WAAW,KAAA,IAAY;CACnD,OAAO,oBAAC,aAAD;EAAa,MAAM,MAAM,QAAQ;EAAY,GAAI;CAAQ,CAAA;AAClE;AAEA,IAAa,QAAwB,uBAAO,OAAO,gBAAgB;CACjE,MAAM;CACN,OAAO;AACT,CAAC"}

package/dist/components/toast/ToastCloseButton.js

@@ -1,7 +1,7 @@
 import { cn } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
-import { useToastContext } from "./ToastContext.js";
+import { useToastContext } from "./Toast.context.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Close } from "@atom-learning/icons";

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): 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"}
+{"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'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { useToastContext } from './Toast.context'\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) => {\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":";;;;;;;;;AAiBA,IAAa,oBAAoB,EAC/B,WACA,QAAQ,eACR,GAAG,WACwB;CAC3B,MAAM,EAAE,OAAO,gBAAgB;CAE/B,OACE,oBAAC,YAAD;EACS;EACP,eAAe;GACb,MAAM,QAAQ,EAAE;GAChB,YAAY;EACd;EACA,GAAI;EACJ,WAAW,GACT,cACA,SACA,oBACA,oBACA,oBACA,kBACF;YAEA,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;CACR,CAAA;AAEhB"}

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

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

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): React.JSX.Element => (\n  <Icon size=\"sm\" {...props} className=\"mr-3 flex-[0_0_auto]\" />\n)\n"],"mappings":";;;;AAIA,IAAa,aACX,UAEA,oBAAC,MAAD;CAAM,MAAK;CAAK,GAAI;CAAO,WAAU;CAAyB,CAAA"}
+{"version":3,"file":"ToastIcon.js","names":[],"sources":["../../../src/components/toast/ToastIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '../icon/Icon'\n\nexport const ToastIcon = (props: React.ComponentProps<typeof Icon>) => (\n  <Icon size=\"sm\" {...props} className=\"mr-3 flex-[0_0_auto]\" />\n)\n"],"mappings":";;;;AAIA,IAAa,aAAa,UACxB,oBAAC,MAAD;CAAM,MAAK;CAAK,GAAI;CAAO,WAAU;AAAwB,CAAA"}

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 export { default as toast } from 'react-hot-toast';
-export { useToastContext } from './ToastContext';
-export declare const ToastProvider: {
-    ({ children, className }: React.PropsWithChildren<{
-        className?: string;
-    }>): React.JSX.Element;
-    displayName: string;
-};
+export { useToastContext } from './Toast.context';
+export declare function ToastProvider({ children, className }: React.PropsWithChildren<{
+    className?: string;
+}>): React.JSX.Element;
+export declare namespace ToastProvider {
+    var displayName: string;
+}

package/dist/components/toast/ToastProvider.js

@@ -1,21 +1,21 @@
 import { styled } from "../../styled.js";
 import { Text } from "../text/Text.js";
 import { Spacer } from "../spacer/Spacer.js";
-import { ToastContext } from "./ToastContext.js";
+import { ToastContext } from "./Toast.context.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
-var ToastProviderBase = styled("div", { base: [
+var ToastProviderBase = /* @__PURE__ */ styled("div", { base: [
 	"fixed",
 	"z-2147483647",
 	"inset-2",
 	"pointer-events-none",
 	"sm:top-3"
 ] });
-var ToastWrapper = styled("div", {
+var ToastWrapper = /* @__PURE__ */ styled("div", {
 	base: [
 		"absolute",
 		"w-full",

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, {\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"}
+{"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'\nimport { Spacer } from '../spacer/Spacer'\nimport { Text } from '../text/Text'\nimport { Toast } from './Toast'\nimport { ToastContext } from './Toast.context'\n\nexport { default as toast } from 'react-hot-toast'\nexport { useToastContext } from './Toast.context'\n\nconst ToastProviderBase = /* @__PURE__ */ styled('div', {\n  base: ['fixed', 'z-2147483647', 'inset-2', 'pointer-events-none', 'sm:top-3']\n})\n\nconst ToastWrapper = /* @__PURE__ */ 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":";;;;;;;;;;AAaA,IAAM,oBAAoC,uBAAO,OAAO,EACtD,MAAM;CAAC;CAAS;CAAgB;CAAW;CAAuB;AAAU,EAC9E,CAAC;AAED,IAAM,eAA+B,uBAAO,OAAO;CACjD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,SAAS;EACP,MAAM,CAAC,wCAAwC;EAC/C,OAAO,CAAC,aAAa,yCAAyC;CAChE,EACF;AACF,CAAC;AAED,IAAa,iBAAiB,EAC5B,UACA,gBACqD;CACrD,MAAM,EAAE,QAAQ,aAAa,WAAW;CACxC,MAAM,EAAE,YAAY,UAAU,iBAAiB,iBAAiB;CAEhE,OACE,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;GACV,CAAC;GAED,MAAM,OAAO,OAA8B;IACzC,IAAI,MAAM,MAAM,WAAW,KAAA,GACzB,aAAa,MAAM,IAAI,GAAG,sBAAsB,CAAC,CAAC,MAAM;GAE5D;GAEA,OACE,oBAAC,cAAD;IAEO;IACL,SAAS,MAAM;IACf,MAAM,MAAM,UAAU;IACtB,aAAW,MAAM,UAAU;IAC3B,OAAO,EAAE,YAAY,GAAG,OAAO,IAAI;IACnC,WAAU;cAEV,oBAAC,aAAa,UAAd;KAAuB,OAAO;eAC3B,OAAO,aAAa,aACnB,SAAS,KAAK,IACZ,QAAM,eAAe,QAAQ,IAC/B,WAEA,qBAAC,OAAD;MAAO,WAAU;gBAAjB;OACG,MAAM,SAAS,WAAW,oBAAC,MAAM,MAAP,EAAY,IAAI,MAAQ,CAAA;OACnD,oBAAC,MAAD,EAAO,SAAe,CAAA;OACtB,oBAAC,QAAD,CAAS,CAAA;OACT,oBAAC,MAAM,OAAP,CAAc,CAAA;MACT;;IAEY,CAAA;GACX,GAtBP,MAAM,EAsBC;EAElB,CAAC;CACgB,CAAA,GAClB,QACD,EAAA,CAAA;AAEN;AAEA,cAAc,cAAc"}

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

@@ -0,0 +1,12 @@
+export { toast } from './ToastProvider';
+export declare const Toast: ((props: React.ComponentProps<typeof import("./Toast").StyledToast>) => import("react").JSX.Element) & {
+    Icon: (props: React.ComponentProps<typeof import("..").Icon>) => import("react").JSX.Element;
+    Close: ({ onDismiss, label, ...rest }: import("./ToastCloseButton").ToastCloseButtonProps) => import("react").JSX.Element;
+} & {
+    Provider: {
+        ({ children, className }: React.PropsWithChildren<{
+            className?: string;
+        }>): import("react").JSX.Element;
+        displayName: string;
+    };
+};

package/dist/components/toast/index.js

@@ -0,0 +1,8 @@
+import { Toast as Toast$1 } from "./Toast.js";
+import { ToastProvider } from "./ToastProvider.js";
+//#region src/components/toast/index.ts
+var Toast = /* @__PURE__ */ Object.assign(Toast$1, { Provider: ToastProvider });
+//#endregion
+export { Toast };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/toast/index.ts"],"sourcesContent":["import { Toast as ToastBase } from './Toast'\nimport { ToastProvider } from './ToastProvider'\n\nexport { toast } from './ToastProvider'\n\n// Assembled here rather than in Toast.tsx: ToastProvider imports Toast to\n// render it, so attaching Provider inside Toast.tsx would create a circular\n// import whose init order depends on the entry module. This module sits\n// above both files in the import graph, so no cycle.\nexport const Toast = /* @__PURE__ */ Object.assign(ToastBase, {\n  Provider: ToastProvider\n})\n"],"mappings":";;;AASA,IAAa,QAAwB,uBAAO,OAAO,SAAW,EAC5D,UAAU,cACZ,CAAC"}

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

@@ -1,16 +1,8 @@
 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"> & {
-    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 StyledButton: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<ToggleGroup.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>>, {
+    size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
+    isIconOnly?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    theme?: ("modern" | "standard" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "modern" | "standard">>) | undefined;
 }>;
-export declare const ToggleGroupButton: React.ForwardRefExoticComponent<Omit<Omit<ToggleGroup.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "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;
-}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ToggleGroupButton: ({ ref, size, theme, children, ...rest }: React.ComponentProps<typeof StyledButton>) => React.JSX.Element;

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

@@ -80,8 +80,8 @@ var StyledButton = styled(ToggleGroup.Item, {
 			class: ["min-w-15", "p-0"]
 		}
 	]
-}, { enabledResponsiveVariants: true });
-var ToggleGroupButton = React$1.forwardRef(({ size = "md", theme = "standard", children, ...rest }, ref) => {
+}, { enableResponsiveVariants: true });
+var ToggleGroupButton = ({ ref, size = "md", theme = "standard", children, ...rest }) => {
 	const childrenArray = React$1.Children.toArray(children);
 	const isSingleChild = childrenArray.length <= 1;
 	return /* @__PURE__ */ jsx(StyledButton, {
@@ -101,8 +101,8 @@ var ToggleGroupButton = React$1.forwardRef(({ size = "md", theme = "standard", c
 			return child;
 		})
 	});
-});
+};
 //#endregion
-export { ToggleGroupButton };
+export { StyledButton, ToggleGroupButton };
 
 //# sourceMappingURL=ToggleGroupButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupButton.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupButton.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { modernVariant, standardVariant } from './ToggleGroupItem'\n\nexport const StyledButton = styled(\n  ToggleGroup.Item,\n  {\n    base: [\n      'cursor-pointer',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'grow',\n      'flex',\n      'items-center',\n      'justify-center',\n      'font-semibold',\n      'leading-none',\n      'py-1'\n    ],\n    variants: {\n      size: {\n        sm: ['*:not-last:mr-2', 'min-h-8', 'px-4', 'text-sm'],\n        md: ['*:not-last:mr-3', 'min-h-10', 'px-8', 'text-md'],\n        lg: ['*:not-last:mr-3', 'min-h-12', 'px-8', 'text-lg']\n      },\n      isIconOnly: {\n        true: []\n      },\n      theme: {\n        standard: standardVariant,\n        modern: modernVariant\n      }\n    },\n    compoundVariants: [\n      {\n        isIconOnly: true,\n        size: 'sm',\n        class: ['min-w-8', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'md',\n        class: ['min-w-10', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'lg',\n        class: ['min-w-12', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'sm',\n        theme: 'modern',\n        class: ['min-w-10', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'md',\n        theme: 'modern',\n        class: ['min-w-12', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'lg',\n        theme: 'modern',\n        class: ['min-w-15', 'p-0']\n      }\n    ]\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport const ToggleGroupButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledButton>\n>(({ size = 'md', theme = 'standard', children, ...rest }, ref) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  const isIconOnly =\n    isSingleChild &&\n    React.isValidElement(childrenArray[0]) &&\n    childrenArray[0]?.type === Icon\n\n  return (\n    <StyledButton\n      ref={ref}\n      size={size}\n      isIconOnly={isIconOnly}\n      theme={theme}\n      {...rest}\n    >\n      {\n        childrenArray.map((child) => {\n          if (\n            !isSingleChild &&\n            (typeof child === 'string' || typeof child === 'number')\n          )\n            return <span key={child}>{child}</span>\n          if (\n            React.isValidElement<React.ComponentPropsWithoutRef<typeof Icon>>(\n              child\n            )\n          ) {\n            if (child?.type === Icon)\n              return React.cloneElement(child, { ...child.props, size })\n          }\n          return child\n        }) as React.ReactElement<unknown>[]\n      }\n    </StyledButton>\n  )\n})\n"],"mappings":";;;;;;;AAQA,IAAa,eAAe,OAC1B,YAAY,MACZ;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAmB;IAAW;IAAQ;IAAU;GACrD,IAAI;IAAC;IAAmB;IAAY;IAAQ;IAAU;GACtD,IAAI;IAAC;IAAmB;IAAY;IAAQ;IAAU;GACvD;EACD,YAAY,EACV,MAAM,EAAE,EACT;EACD,OAAO;GACL,UAAU;GACV,QAAQ;GACT;EACF;CACD,kBAAkB;EAChB;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,WAAW,MAAM;GAC1B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,MAAM;GAC3B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,MAAM;GAC3B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,MAAM;GAC3B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,MAAM;GAC3B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,MAAM;GAC3B;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,oBAAoB,QAAM,YAGpC,EAAE,OAAO,MAAM,QAAQ,YAAY,UAAU,GAAG,QAAQ,QAAQ;CACjE,MAAM,gBAAgB,QAAM,SAAS,QAAQ,SAAS;CACtD,MAAM,gBAAgB,cAAc,UAAU;AAM9C,QACE,oBAAC,cAAD;EACO;EACC;EACM,YARd,iBACA,QAAM,eAAe,cAAc,GAAG,IACtC,cAAc,IAAI,SAAS;EAOlB;EACP,GAAI;YAGF,cAAc,KAAK,UAAU;AAC3B,OACE,CAAC,kBACA,OAAO,UAAU,YAAY,OAAO,UAAU,UAE/C,QAAO,oBAAC,QAAD,EAAA,UAAmB,OAAa,EAArB,MAAqB;AACzC,OACE,QAAM,eACJ,MACD;QAEG,OAAO,SAAS,KAClB,QAAO,QAAM,aAAa,OAAO;KAAE,GAAG,MAAM;KAAO;KAAM,CAAC;;AAE9D,UAAO;IACP;EAES,CAAA;EAEjB"}
+{"version":3,"file":"ToggleGroupButton.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupButton.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { modernVariant, standardVariant } from './ToggleGroupItem'\n\nexport const StyledButton = styled(\n  ToggleGroup.Item,\n  {\n    base: [\n      'cursor-pointer',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'grow',\n      'flex',\n      'items-center',\n      'justify-center',\n      'font-semibold',\n      'leading-none',\n      'py-1'\n    ],\n    variants: {\n      size: {\n        sm: ['*:not-last:mr-2', 'min-h-8', 'px-4', 'text-sm'],\n        md: ['*:not-last:mr-3', 'min-h-10', 'px-8', 'text-md'],\n        lg: ['*:not-last:mr-3', 'min-h-12', 'px-8', 'text-lg']\n      },\n      isIconOnly: {\n        true: []\n      },\n      theme: {\n        standard: standardVariant,\n        modern: modernVariant\n      }\n    },\n    compoundVariants: [\n      {\n        isIconOnly: true,\n        size: 'sm',\n        class: ['min-w-8', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'md',\n        class: ['min-w-10', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'lg',\n        class: ['min-w-12', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'sm',\n        theme: 'modern',\n        class: ['min-w-10', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'md',\n        theme: 'modern',\n        class: ['min-w-12', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'lg',\n        theme: 'modern',\n        class: ['min-w-15', 'p-0']\n      }\n    ]\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport const ToggleGroupButton = ({\n  ref,\n  size = 'md',\n  theme = 'standard',\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledButton>) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  const isIconOnly =\n    isSingleChild &&\n    React.isValidElement(childrenArray[0]) &&\n    childrenArray[0]?.type === Icon\n\n  return (\n    <StyledButton\n      ref={ref}\n      size={size}\n      isIconOnly={isIconOnly}\n      theme={theme}\n      {...rest}\n    >\n      {\n        childrenArray.map((child) => {\n          if (\n            !isSingleChild &&\n            (typeof child === 'string' || typeof child === 'number')\n          )\n            return <span key={child}>{child}</span>\n          if (\n            React.isValidElement<React.ComponentPropsWithoutRef<typeof Icon>>(\n              child\n            )\n          ) {\n            if (child?.type === Icon)\n              return React.cloneElement(child, { ...child.props, size })\n          }\n          return child\n        }) as React.ReactElement<unknown>[]\n      }\n    </StyledButton>\n  )\n}\n"],"mappings":";;;;;;;AAOA,IAAa,eAAe,OAC1B,YAAY,MACZ;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAmB;IAAW;IAAQ;GAAS;GACpD,IAAI;IAAC;IAAmB;IAAY;IAAQ;GAAS;GACrD,IAAI;IAAC;IAAmB;IAAY;IAAQ;GAAS;EACvD;EACA,YAAY,EACV,MAAM,CAAC,EACT;EACA,OAAO;GACL,UAAU;GACV,QAAQ;EACV;CACF;CACA,kBAAkB;EAChB;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,WAAW,KAAK;EAC1B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,KAAK;EAC3B;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAa,qBAAqB,EAChC,KACA,OAAO,MACP,QAAQ,YACR,UACA,GAAG,WAC4C;CAC/C,MAAM,gBAAgB,QAAM,SAAS,QAAQ,QAAQ;CACrD,MAAM,gBAAgB,cAAc,UAAU;CAM9C,OACE,oBAAC,cAAD;EACO;EACC;EACM,YARd,iBACA,QAAM,eAAe,cAAc,EAAE,KACrC,cAAc,EAAE,EAAE,SAAS;EAOlB;EACP,GAAI;YAGF,cAAc,KAAK,UAAU;GAC3B,IACE,CAAC,kBACA,OAAO,UAAU,YAAY,OAAO,UAAU,WAE/C,OAAO,oBAAC,QAAD,EAAA,UAAmB,MAAY,GAApB,KAAoB;GACxC,IACE,QAAM,eACJ,KACF;QAEI,OAAO,SAAS,MAClB,OAAO,QAAM,aAAa,OAAO;KAAE,GAAG,MAAM;KAAO;IAAK,CAAC;GAAA;GAE7D,OAAO;EACT,CAAC;CAES,CAAA;AAElB"}

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

@@ -1,8 +1,6 @@
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 export declare const standardVariant: string[];
 export declare const modernVariant: string[];
-export declare const ToggleGroupItem: import("react").ForwardRefExoticComponent<Omit<ToggleGroup.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>, "theme"> & {
-    theme?: "standard" | "modern" | undefined;
-} & {
-    as?: import("react").ElementType;
+export declare const ToggleGroupItem: import("../..").StyledComponent<import("react").ForwardRefExoticComponent<ToggleGroup.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, {
+    theme?: "modern" | "standard" | undefined;
 }>;

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

@@ -57,7 +57,7 @@ var ToggleGroupItem = styled(ToggleGroup.Item, {
 		modern: modernVariant
 	} },
 	defaultVariants: { theme: "standard" }
-});
+}, { enablePolymorphism: false });
 //#endregion
 export { ToggleGroupItem, modernVariant, standardVariant };
 

package/dist/components/toggle-group/ToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupItem.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\n\nimport { styled } from '~/styled'\n\nexport const standardVariant = [\n  'before:bg-grey-600',\n  'bg-white',\n  'border',\n  'border-grey-600',\n  'text-grey-800',\n  'data-[state=on]:border-current!',\n  'data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]',\n  'data-[state=on]:text-primary-800',\n  'not-disabled:data-[state=on]:before:bg-none',\n  'not-disabled:focus-visible:before:bg-none',\n  'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n  'not-disabled:focus-visible:data-[state=on]:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]',\n  'not-disabled:focus-visible:data-[state=on]:shadow-[white_0px_0px_0px_2px]',\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:before:bg-none',\n  'not-disabled:hover:border-current!',\n  'not-disabled:hover:text-primary-900'\n]\n\nexport const modernVariant = [\n  'bg-grey-200',\n  'border-0',\n  'text-grey-800',\n  'overflow-hidden',\n  'rounded-md',\n  'data-[state=on]:bg-white',\n  'data-[state=on]:border!',\n  'data-[state=on]:border-grey-200!',\n  'data-[state=on]:shadow-none!',\n  'data-[state=on]:text-grey-900',\n  'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n  'not-disabled:focus-visible:data-[state=on]:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px_white_0px_0px_0px_2px]',\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:text-primary-900'\n]\n\nexport const ToggleGroupItem = styled(ToggleGroup.Item, {\n  base: [\n    'cursor-pointer',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    theme: {\n      standard: standardVariant,\n      modern: modernVariant\n    }\n  },\n  defaultVariants: {\n    theme: 'standard'\n  }\n})\n"],"mappings":";;;AAIA,IAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAa,gBAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAa,kBAAkB,OAAO,YAAY,MAAM;CACtD,MAAM;EACJ;EACA;EACA;EACD;CACD,UAAU,EACR,OAAO;EACL,UAAU;EACV,QAAQ;EACT,EACF;CACD,iBAAiB,EACf,OAAO,YACR;CACF,CAAC"}
+{"version":3,"file":"ToggleGroupItem.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\n\nimport { styled } from '../../styled'\n\nexport const standardVariant = [\n  'before:bg-grey-600',\n  'bg-white',\n  'border',\n  'border-grey-600',\n  'text-grey-800',\n  'data-[state=on]:border-current!',\n  'data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]',\n  'data-[state=on]:text-primary-800',\n  'not-disabled:data-[state=on]:before:bg-none',\n  'not-disabled:focus-visible:before:bg-none',\n  'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n  'not-disabled:focus-visible:data-[state=on]:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]',\n  'not-disabled:focus-visible:data-[state=on]:shadow-[white_0px_0px_0px_2px]',\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:before:bg-none',\n  'not-disabled:hover:border-current!',\n  'not-disabled:hover:text-primary-900'\n]\n\nexport const modernVariant = [\n  'bg-grey-200',\n  'border-0',\n  'text-grey-800',\n  'overflow-hidden',\n  'rounded-md',\n  'data-[state=on]:bg-white',\n  'data-[state=on]:border!',\n  'data-[state=on]:border-grey-200!',\n  'data-[state=on]:shadow-none!',\n  'data-[state=on]:text-grey-900',\n  'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n  'not-disabled:focus-visible:data-[state=on]:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px_white_0px_0px_0px_2px]',\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:text-primary-900'\n]\n\nexport const ToggleGroupItem = styled(\n  ToggleGroup.Item,\n  {\n    base: [\n      'cursor-pointer',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30'\n    ],\n    variants: {\n      theme: {\n        standard: standardVariant,\n        modern: modernVariant\n      }\n    },\n    defaultVariants: {\n      theme: 'standard'\n    }\n  },\n  { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAa,gBAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAa,kBAAkB,OAC7B,YAAY,MACZ;CACE,MAAM;EACJ;EACA;EACA;CACF;CACA,UAAU,EACR,OAAO;EACL,UAAU;EACV,QAAQ;CACV,EACF;CACA,iBAAiB,EACf,OAAO,WACT;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B"}