@atom-learning/components 8.0.3 → 8.1.1

package/dist/components/tabs/TabsTriggerList.js

@@ -5,7 +5,7 @@ import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { useCallbackRefState } from "../../utilities/hooks/useCallbackRef.js";
 import { useScrollPosition } from "../../utilities/hooks/useScrollPosition.js";
 import { useSize } from "../../utilities/hooks/useSize.js";
-import React from "react";
+import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "@atom-learning/icons";
 import { List } from "@radix-ui/react-tabs";
@@ -21,8 +21,7 @@ var StyledTriggerList = styled(List, { base: [
 	"flex",
 	"w-full",
 	"overflow-x-auto",
-	"-webkit-scrollbar:hidden",
-	"[scrollbar-width:none]"
+	"scrollbar-none"
 ] });
 var StyledChevronActionIcon = styled(ActionIcon, { base: [
 	"h-full!",
@@ -47,15 +46,15 @@ var TabsTriggerList = ({ children, colorScheme = {}, ...rest }) => {
 		delay: 100,
 		delayMethod: "debounce"
 	});
-	const canScrollXAxis = React.useMemo(() => {
+	const canScrollXAxis = React$1.useMemo(() => {
 		if (!listRef) return false;
 		return listRef.scrollWidth > listRef.clientWidth;
 	}, [width, listRef]);
-	const canScrollLeft = React.useMemo(() => {
+	const canScrollLeft = React$1.useMemo(() => {
 		if (!canScrollXAxis) return false;
 		return left > 0;
 	}, [left, canScrollXAxis]);
-	const canScrollRight = React.useMemo(() => {
+	const canScrollRight = React$1.useMemo(() => {
 		if (!listRef || !canScrollXAxis) return false;
 		return listRef.scrollWidth - left - listRef.clientWidth > 1;
 	}, [
@@ -63,7 +62,7 @@ var TabsTriggerList = ({ children, colorScheme = {}, ...rest }) => {
 		left,
 		canScrollXAxis
 	]);
-	const scrollList = React.useCallback((stepModifier) => {
+	const scrollList = React$1.useCallback((stepModifier) => {
 		if (!listRef) return;
 		listRef.scroll({
 			left: listRef.scrollLeft + listRef.clientWidth * stepModifier,
@@ -84,7 +83,7 @@ var TabsTriggerList = ({ children, colorScheme = {}, ...rest }) => {
 			canScrollLeft && /* @__PURE__ */ jsx(StyledChevronActionIcon, {
 				label: "scroll left",
 				size: "md",
-				onClick: () => scrollList(-SCROLL_STEP),
+				onClick: () => scrollList(-.8),
 				tabIndex: -1,
 				className: "left-0",
 				children: /* @__PURE__ */ jsx(Icon, { is: ChevronLeft })

package/dist/components/tabs/TabsTriggerList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTriggerList.js","names":[],"sources":["../../../src/components/tabs/TabsTriggerList.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport { List } from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport {\n  ColorScheme,\n  TcolorScheme\n} from '~/experiments/color-scheme/ColorScheme'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useScrollPosition } from '~/utilities/hooks/useScrollPosition'\nimport { useSize } from '~/utilities/hooks/useSize'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContainer = styled(ColorScheme, {\n  base: ['relative', 'border-b', 'border-b-(--base-4)', 'w-full']\n})\n\nconst StyledTriggerList = styled(List, {\n  base: [\n    'shrink-0',\n    'flex',\n    'w-full',\n    'overflow-x-auto',\n    '-webkit-scrollbar:hidden',\n    '[scrollbar-width:none]'\n  ]\n})\n\nconst StyledChevronActionIcon = styled(ActionIcon, {\n  base: [\n    'h-full!',\n    'absolute',\n    'top-1/2',\n    '-translate-y-1/2',\n    'cursor-pointer',\n    'bg-(--base-1)!',\n    'text-(--interactive-1)!',\n    'rounded-none',\n    'opacity-90'\n  ]\n})\n\nconst SCROLL_STEP = 0.8 // Used to scroll 80% of clientWidth\n\nexport const TabsTriggerList = ({\n  children,\n  colorScheme = {},\n  ...rest\n}: React.ComponentProps<typeof StyledTriggerList> & {\n  colorScheme?: TcolorScheme\n}) => {\n  const [listRef, setListRefCallback] = useCallbackRefState()\n\n  const { width } = useSize({ element: listRef, delay: 500 })\n  const { left } = useScrollPosition({\n    element: listRef,\n    delay: 100,\n    delayMethod: 'debounce'\n  })\n\n  const canScrollXAxis = React.useMemo(() => {\n    if (!listRef) return false\n    return listRef.scrollWidth > listRef.clientWidth\n  }, [width, listRef])\n\n  const canScrollLeft = React.useMemo(() => {\n    if (!canScrollXAxis) return false\n    return left > 0\n  }, [left, canScrollXAxis])\n\n  const canScrollRight = React.useMemo(() => {\n    if (!listRef || !canScrollXAxis) return false\n    return listRef.scrollWidth - left - listRef.clientWidth > 1 // 1 rather than 0 to account for sub-pixel widths and calculations\n  }, [listRef, left, canScrollXAxis])\n\n  const scrollList = React.useCallback(\n    (stepModifier) => {\n      if (!listRef) return\n      listRef.scroll({\n        left: listRef.scrollLeft + listRef.clientWidth * stepModifier,\n        behavior: 'smooth'\n      })\n    },\n    [listRef]\n  )\n\n  return (\n    <StyledContainer\n      base=\"grey1\"\n      accent=\"primary1\"\n      interactive=\"hiContrast\"\n      {...colorScheme}\n      {...rest}\n    >\n      <StyledTriggerList ref={setListRefCallback}>{children}</StyledTriggerList>\n\n      {canScrollLeft && (\n        <StyledChevronActionIcon\n          label=\"scroll left\"\n          size=\"md\"\n          onClick={() => scrollList(-SCROLL_STEP)}\n          tabIndex={-1}\n          className=\"left-0\"\n        >\n          <Icon is={ChevronLeft} />\n        </StyledChevronActionIcon>\n      )}\n\n      {canScrollRight && (\n        <StyledChevronActionIcon\n          label=\"scroll right\"\n          size=\"md\"\n          onClick={() => scrollList(SCROLL_STEP)}\n          tabIndex={-1}\n          className=\"right-0\"\n        >\n          <Icon is={ChevronRight} />\n        </StyledChevronActionIcon>\n      )}\n    </StyledContainer>\n  )\n}\n\nTabsTriggerList.displayName = 'TabsTriggerList'\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAM,kBAAkB,OAAO,aAAa,EAC1C,MAAM;CAAC;CAAY;CAAY;CAAuB;CAAS,EAChE,CAAC;AAEF,IAAM,oBAAoB,OAAO,MAAM,EACrC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,0BAA0B,OAAO,YAAY,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,cAAc;AAEpB,IAAa,mBAAmB,EAC9B,UACA,cAAc,EAAE,EAChB,GAAG,WAGC;CACJ,MAAM,CAAC,SAAS,sBAAsB,qBAAqB;CAE3D,MAAM,EAAE,UAAU,QAAQ;EAAE,SAAS;EAAS,OAAO;EAAK,CAAC;CAC3D,MAAM,EAAE,SAAS,kBAAkB;EACjC,SAAS;EACT,OAAO;EACP,aAAa;EACd,CAAC;CAEF,MAAM,iBAAiB,MAAM,cAAc;AACzC,MAAI,CAAC,QAAS,QAAO;AACrB,SAAO,QAAQ,cAAc,QAAQ;IACpC,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB,MAAM,cAAc;AACxC,MAAI,CAAC,eAAgB,QAAO;AAC5B,SAAO,OAAO;IACb,CAAC,MAAM,eAAe,CAAC;CAE1B,MAAM,iBAAiB,MAAM,cAAc;AACzC,MAAI,CAAC,WAAW,CAAC,eAAgB,QAAO;AACxC,SAAO,QAAQ,cAAc,OAAO,QAAQ,cAAc;IACzD;EAAC;EAAS;EAAM;EAAe,CAAC;CAEnC,MAAM,aAAa,MAAM,aACtB,iBAAiB;AAChB,MAAI,CAAC,QAAS;AACd,UAAQ,OAAO;GACb,MAAM,QAAQ,aAAa,QAAQ,cAAc;GACjD,UAAU;GACX,CAAC;IAEJ,CAAC,QAAQ,CACV;AAED,QACE,qBAAC,iBAAD;EACE,MAAK;EACL,QAAO;EACP,aAAY;EACZ,GAAI;EACJ,GAAI;YALN;GAOE,oBAAC,mBAAD;IAAmB,KAAK;IAAqB;IAA6B,CAAA;GAEzE,iBACC,oBAAC,yBAAD;IACE,OAAM;IACN,MAAK;IACL,eAAe,WAAW,CAAC,YAAY;IACvC,UAAU;IACV,WAAU;cAEV,oBAAC,MAAD,EAAM,IAAI,aAAe,CAAA;IACD,CAAA;GAG3B,kBACC,oBAAC,yBAAD;IACE,OAAM;IACN,MAAK;IACL,eAAe,WAAW,YAAY;IACtC,UAAU;IACV,WAAU;cAEV,oBAAC,MAAD,EAAM,IAAI,cAAgB,CAAA;IACF,CAAA;GAEZ;;;AAItB,gBAAgB,cAAc"}
+{"version":3,"file":"TabsTriggerList.js","names":[],"sources":["../../../src/components/tabs/TabsTriggerList.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport { List } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport {\n  ColorScheme,\n  type TcolorScheme\n} from '../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../styled'\nimport { useCallbackRefState } from '../../utilities/hooks/useCallbackRef'\nimport { useScrollPosition } from '../../utilities/hooks/useScrollPosition'\nimport { useSize } from '../../utilities/hooks/useSize'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContainer = styled(ColorScheme, {\n  base: ['relative', 'border-b', 'border-b-(--base-4)', 'w-full']\n})\n\nconst StyledTriggerList = styled(List, {\n  base: ['shrink-0', 'flex', 'w-full', 'overflow-x-auto', 'scrollbar-none']\n})\n\nconst StyledChevronActionIcon = styled(ActionIcon, {\n  base: [\n    'h-full!',\n    'absolute',\n    'top-1/2',\n    '-translate-y-1/2',\n    'cursor-pointer',\n    'bg-(--base-1)!',\n    'text-(--interactive-1)!',\n    'rounded-none',\n    'opacity-90'\n  ]\n})\n\nconst SCROLL_STEP = 0.8 // Used to scroll 80% of clientWidth\n\nexport const TabsTriggerList = ({\n  children,\n  colorScheme = {},\n  ...rest\n}: React.ComponentProps<typeof StyledTriggerList> & {\n  colorScheme?: TcolorScheme\n}) => {\n  const [listRef, setListRefCallback] = useCallbackRefState()\n\n  const { width } = useSize({ element: listRef, delay: 500 })\n  const { left } = useScrollPosition({\n    element: listRef,\n    delay: 100,\n    delayMethod: 'debounce'\n  })\n\n  const canScrollXAxis = React.useMemo(() => {\n    if (!listRef) return false\n    return listRef.scrollWidth > listRef.clientWidth\n  }, [width, listRef])\n\n  const canScrollLeft = React.useMemo(() => {\n    if (!canScrollXAxis) return false\n    return left > 0\n  }, [left, canScrollXAxis])\n\n  const canScrollRight = React.useMemo(() => {\n    if (!listRef || !canScrollXAxis) return false\n    return listRef.scrollWidth - left - listRef.clientWidth > 1 // 1 rather than 0 to account for sub-pixel widths and calculations\n  }, [listRef, left, canScrollXAxis])\n\n  const scrollList = React.useCallback(\n    (stepModifier) => {\n      if (!listRef) return\n      listRef.scroll({\n        left: listRef.scrollLeft + listRef.clientWidth * stepModifier,\n        behavior: 'smooth'\n      })\n    },\n    [listRef]\n  )\n\n  return (\n    <StyledContainer\n      base=\"grey1\"\n      accent=\"primary1\"\n      interactive=\"hiContrast\"\n      {...colorScheme}\n      {...rest}\n    >\n      <StyledTriggerList ref={setListRefCallback}>{children}</StyledTriggerList>\n\n      {canScrollLeft && (\n        <StyledChevronActionIcon\n          label=\"scroll left\"\n          size=\"md\"\n          onClick={() => scrollList(-SCROLL_STEP)}\n          tabIndex={-1}\n          className=\"left-0\"\n        >\n          <Icon is={ChevronLeft} />\n        </StyledChevronActionIcon>\n      )}\n\n      {canScrollRight && (\n        <StyledChevronActionIcon\n          label=\"scroll right\"\n          size=\"md\"\n          onClick={() => scrollList(SCROLL_STEP)}\n          tabIndex={-1}\n          className=\"right-0\"\n        >\n          <Icon is={ChevronRight} />\n        </StyledChevronActionIcon>\n      )}\n    </StyledContainer>\n  )\n}\n\nTabsTriggerList.displayName = 'TabsTriggerList'\n"],"mappings":";;;;;;;;;;;;AAeA,IAAM,kBAAkB,OAAO,aAAa,EAC1C,MAAM;CAAC;CAAY;CAAY;CAAuB;AAAQ,EAChE,CAAC;AAED,IAAM,oBAAoB,OAAO,MAAM,EACrC,MAAM;CAAC;CAAY;CAAQ;CAAU;CAAmB;AAAgB,EAC1E,CAAC;AAED,IAAM,0BAA0B,OAAO,YAAY,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,cAAc;AAEpB,IAAa,mBAAmB,EAC9B,UACA,cAAc,CAAC,GACf,GAAG,WAGC;CACJ,MAAM,CAAC,SAAS,sBAAsB,oBAAoB;CAE1D,MAAM,EAAE,UAAU,QAAQ;EAAE,SAAS;EAAS,OAAO;CAAI,CAAC;CAC1D,MAAM,EAAE,SAAS,kBAAkB;EACjC,SAAS;EACT,OAAO;EACP,aAAa;CACf,CAAC;CAED,MAAM,iBAAiB,QAAM,cAAc;EACzC,IAAI,CAAC,SAAS,OAAO;EACrB,OAAO,QAAQ,cAAc,QAAQ;CACvC,GAAG,CAAC,OAAO,OAAO,CAAC;CAEnB,MAAM,gBAAgB,QAAM,cAAc;EACxC,IAAI,CAAC,gBAAgB,OAAO;EAC5B,OAAO,OAAO;CAChB,GAAG,CAAC,MAAM,cAAc,CAAC;CAEzB,MAAM,iBAAiB,QAAM,cAAc;EACzC,IAAI,CAAC,WAAW,CAAC,gBAAgB,OAAO;EACxC,OAAO,QAAQ,cAAc,OAAO,QAAQ,cAAc;CAC5D,GAAG;EAAC;EAAS;EAAM;CAAc,CAAC;CAElC,MAAM,aAAa,QAAM,aACtB,iBAAiB;EAChB,IAAI,CAAC,SAAS;EACd,QAAQ,OAAO;GACb,MAAM,QAAQ,aAAa,QAAQ,cAAc;GACjD,UAAU;EACZ,CAAC;CACH,GACA,CAAC,OAAO,CACV;CAEA,OACE,qBAAC,iBAAD;EACE,MAAK;EACL,QAAO;EACP,aAAY;EACZ,GAAI;EACJ,GAAI;YALN;GAOE,oBAAC,mBAAD;IAAmB,KAAK;IAAqB;GAA4B,CAAA;GAExE,iBACC,oBAAC,yBAAD;IACE,OAAM;IACN,MAAK;IACL,eAAe,WAAW,GAAY;IACtC,UAAU;IACV,WAAU;cAEV,oBAAC,MAAD,EAAM,IAAI,YAAc,CAAA;GACD,CAAA;GAG1B,kBACC,oBAAC,yBAAD;IACE,OAAM;IACN,MAAK;IACL,eAAe,WAAW,WAAW;IACrC,UAAU;IACV,WAAU;cAEV,oBAAC,MAAD,EAAM,IAAI,aAAe,CAAA;GACF,CAAA;EAEZ;;AAErB;AAEA,gBAAgB,cAAc"}

package/dist/components/text/Text.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import type { Override } from '../../utilities/types';
-export declare const StyledText: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size" | "noCapsize" | "weight" | "family"> & {
-    size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
-    noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
-    family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
+export declare const StyledText: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "family" | "noCapsize" | "size" | "weight"> & {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
 } & {
     as?: React.ElementType;
 }>;

package/dist/components/text/Text.js

@@ -59,14 +59,14 @@ var StyledText = styled("p", {
 		}
 	}
 }, { enabledResponsiveVariants: true });
-var Text = React$1.forwardRef(({ size = "md", family = "body", ...remainingProps }, ref) => /* @__PURE__ */ jsx(StyledText, {
+var Text = React$1.forwardRef(({ size = "md", family = "body", ...rest }, ref) => /* @__PURE__ */ jsx(StyledText, {
 	size,
 	family,
-	...remainingProps,
+	...rest,
 	ref
 }));
 Text.displayName = "Text";
 //#endregion
-export { Text };
+export { StyledText, Text };
 
 //# sourceMappingURL=Text.js.map

package/dist/components/text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":[],"sources":["../../../src/components/text/Text.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities/types'\n\nexport const StyledText = styled(\n  'p',\n  {\n    base: ['m-0'],\n    variants: {\n      size: {\n        xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n        sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n        md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n        lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n        xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]'],\n        '2xl': ['text-2xl', 'leading-[1.40]', 'capsize-[0.3336]'],\n        '3xl': ['text-3xl', 'leading-[1.28]', 'capsize-[0.2709]'],\n        '4xl': ['text-4xl', 'leading-none', 'capsize-[0.1309]']\n      },\n      noCapsize: {\n        true: ['capsize-none']\n      },\n      weight: {\n        normal: ['font-normal'],\n        bold: ['font-semibold']\n      },\n      family: {\n        body: ['font-body'],\n        display: ['font-display'],\n        mono: ['font-mono']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\ntype TextProps = Override<\n  React.ComponentProps<typeof StyledText>,\n  {\n    as?:\n      | 'blockquote'\n      | 'caption'\n      | 'dd'\n      | 'dt'\n      | 'figcaption'\n      | 'li'\n      | 'p'\n      | 'span'\n      | 'legend'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n\nexport const Text = React.forwardRef<HTMLParagraphElement, TextProps>(\n  ({ size = 'md', family = 'body', ...remainingProps }, ref) => (\n    <StyledText size={size} family={family} {...remainingProps} ref={ref} />\n  )\n)\n\nText.displayName = 'Text'\n"],"mappings":";;;;AAKA,IAAa,aAAa,OACxB,KACA;CACE,MAAM,CAAC,MAAM;CACb,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAiB;IAAmB;GACpD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,OAAO;IAAC;IAAY;IAAkB;IAAmB;GACzD,OAAO;IAAC;IAAY;IAAkB;IAAmB;GACzD,OAAO;IAAC;IAAY;IAAgB;IAAmB;GACxD;EACD,WAAW,EACT,MAAM,CAAC,eAAe,EACvB;EACD,QAAQ;GACN,QAAQ,CAAC,cAAc;GACvB,MAAM,CAAC,gBAAgB;GACxB;EACD,QAAQ;GACN,MAAM,CAAC,YAAY;GACnB,SAAS,CAAC,eAAe;GACzB,MAAM,CAAC,YAAY;GACpB;EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAoBD,IAAa,OAAO,QAAM,YACvB,EAAE,OAAO,MAAM,SAAS,QAAQ,GAAG,kBAAkB,QACpD,oBAAC,YAAD;CAAkB;CAAc;CAAQ,GAAI;CAAqB;CAAO,CAAA,CAE3E;AAED,KAAK,cAAc"}
+{"version":3,"file":"Text.js","names":[],"sources":["../../../src/components/text/Text.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\n\nexport const StyledText = styled(\n  'p',\n  {\n    base: ['m-0'],\n    variants: {\n      size: {\n        xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n        sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n        md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n        lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n        xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]'],\n        '2xl': ['text-2xl', 'leading-[1.40]', 'capsize-[0.3336]'],\n        '3xl': ['text-3xl', 'leading-[1.28]', 'capsize-[0.2709]'],\n        '4xl': ['text-4xl', 'leading-none', 'capsize-[0.1309]']\n      },\n      noCapsize: {\n        true: ['capsize-none']\n      },\n      weight: {\n        normal: ['font-normal'],\n        bold: ['font-semibold']\n      },\n      family: {\n        body: ['font-body'],\n        display: ['font-display'],\n        mono: ['font-mono']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\ntype TextProps = Override<\n  React.ComponentProps<typeof StyledText>,\n  {\n    as?:\n      | 'blockquote'\n      | 'caption'\n      | 'dd'\n      | 'dt'\n      | 'figcaption'\n      | 'li'\n      | 'p'\n      | 'span'\n      | 'legend'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n\nexport const Text = React.forwardRef<HTMLParagraphElement, TextProps>(\n  ({ size = 'md', family = 'body', ...rest }, ref) => (\n    <StyledText size={size} family={family} {...rest} ref={ref} />\n  )\n)\n\nText.displayName = 'Text'\n"],"mappings":";;;;AAKA,IAAa,aAAa,OACxB,KACA;CACE,MAAM,CAAC,KAAK;CACZ,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAiB;GAAkB;GACnD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,OAAO;IAAC;IAAY;IAAkB;GAAkB;GACxD,OAAO;IAAC;IAAY;IAAkB;GAAkB;GACxD,OAAO;IAAC;IAAY;IAAgB;GAAkB;EACxD;EACA,WAAW,EACT,MAAM,CAAC,cAAc,EACvB;EACA,QAAQ;GACN,QAAQ,CAAC,aAAa;GACtB,MAAM,CAAC,eAAe;EACxB;EACA,QAAQ;GACN,MAAM,CAAC,WAAW;GAClB,SAAS,CAAC,cAAc;GACxB,MAAM,CAAC,WAAW;EACpB;CACF;AACF,GACA,EACE,2BAA2B,KAC7B,CACF;AAoBA,IAAa,OAAO,QAAM,YACvB,EAAE,OAAO,MAAM,SAAS,QAAQ,GAAG,QAAQ,QAC1C,oBAAC,YAAD;CAAkB;CAAc;CAAQ,GAAI;CAAW;AAAM,CAAA,CAEjE;AAEA,KAAK,cAAc"}

package/dist/components/textarea/Textarea.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
-declare const StyledTextarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "appearance" | "theme" | "state"> & {
-    appearance?: "standard" | "modern" | undefined;
+declare const StyledTextarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "appearance" | "state" | "theme"> & {
+    appearance?: "modern" | "standard" | undefined;
     state?: "error" | undefined;
     theme?: "grey" | "white" | undefined;
 } & {
     as?: React.ElementType;
 }>;
 export type TextareaProps = React.ComponentProps<typeof StyledTextarea>;
-export declare const Textarea: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "appearance" | "theme" | "state"> & {
-    appearance?: "standard" | "modern" | undefined;
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "appearance" | "state" | "theme"> & {
+    appearance?: "modern" | "standard" | undefined;
     state?: "error" | undefined;
     theme?: "grey" | "white" | undefined;
 } & {

package/dist/components/textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledTextarea = styled('textarea', {\n  base: [\n    'shadow-none',\n    'appearance-none',\n    'rounded-md',\n    'box-border',\n    'text-grey-1000',\n    'font-body',\n    'font-normal',\n    'text-md',\n    'leading-[1.4]',\n    'm-0',\n    'min-h-24',\n    'px-3',\n    'py-3',\n    'resize-y',\n    'w-full',\n    'disabled:bg-grey-200',\n    'disabled:cursor-not-allowed',\n    'disabled:text-grey-800',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700'\n  ],\n  variants: {\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-800',\n        'focus-within:border-primary-800',\n        'focus-within:outline-none'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1'\n      ]\n    },\n    state: {\n      error: []\n    },\n    theme: {\n      white: [],\n      grey: []\n    }\n  },\n  defaultVariants: {\n    appearance: 'standard'\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    },\n    {\n      appearance: 'modern',\n      theme: 'white',\n      class: ['bg-white']\n    },\n    {\n      appearance: 'modern',\n      theme: 'grey',\n      class: ['bg-grey-100']\n    }\n  ]\n})\n\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (props, ref) => <StyledTextarea {...props} ref={ref} />\n)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;;AAIA,IAAM,iBAAiB,OAAO,YAAY;CACxC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACD,OAAO;GACL,OAAO,EAAE;GACT,MAAM,EAAE;GACT;EACF;CACD,iBAAiB,EACf,YAAY,YACb;CACD,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,gBAAgB;GACzB;EACD;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,8BAA8B;GAC1D;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,WAAW;GACpB;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,cAAc;GACvB;EACF;CACF,CAAC;AAIF,IAAa,WAAW,QAAM,YAC3B,OAAO,QAAQ,oBAAC,gBAAD;CAAgB,GAAI;CAAY;CAAO,CAAA,CACxD;AAED,SAAS,cAAc"}
+{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledTextarea = styled('textarea', {\n  base: [\n    'shadow-none',\n    'appearance-none',\n    'rounded-md',\n    'box-border',\n    'text-grey-1000',\n    'font-body',\n    'font-normal',\n    'text-md',\n    'leading-[1.4]',\n    'm-0',\n    'min-h-24',\n    'px-3',\n    'py-3',\n    'resize-y',\n    'w-full',\n    'disabled:bg-grey-200',\n    'disabled:cursor-not-allowed',\n    'disabled:text-grey-800',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700'\n  ],\n  variants: {\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-800',\n        'focus-within:border-primary-800',\n        'focus-within:outline-none'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1'\n      ]\n    },\n    state: {\n      error: []\n    },\n    theme: {\n      white: [],\n      grey: []\n    }\n  },\n  defaultVariants: {\n    appearance: 'standard'\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    },\n    {\n      appearance: 'modern',\n      theme: 'white',\n      class: ['bg-white']\n    },\n    {\n      appearance: 'modern',\n      theme: 'grey',\n      class: ['bg-grey-100']\n    }\n  ]\n})\n\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (props, ref) => <StyledTextarea {...props} ref={ref} />\n)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;;AAIA,IAAM,iBAAiB,OAAO,YAAY;CACxC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,OAAO,EACL,OAAO,CAAC,EACV;EACA,OAAO;GACL,OAAO,CAAC;GACR,MAAM,CAAC;EACT;CACF;CACA,iBAAiB,EACf,YAAY,WACd;CACA,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,eAAe;EACzB;EACA;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,6BAA6B;EAC1D;EACA;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,UAAU;EACpB;EACA;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,aAAa;EACvB;CACF;AACF,CAAC;AAID,IAAa,WAAW,QAAM,YAC3B,OAAO,QAAQ,oBAAC,gBAAD;CAAgB,GAAI;CAAY;AAAM,CAAA,CACxD;AAEA,SAAS,cAAc"}

package/dist/components/textarea-field/TextareaField.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWrapper';
-import { TextareaProps } from '../../components/textarea/Textarea';
+import { type FieldElementWrapperProps } from '../field-wrapper/FieldWrapper';
+import { type TextareaProps } from '../textarea/Textarea';
 type TextareaFieldProps = TextareaProps & FieldElementWrapperProps;
-export declare const TextareaField: {
-    ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }: TextareaFieldProps): React.JSX.Element;
-    displayName: string;
-};
+export declare function TextareaField({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...rest }: TextareaFieldProps): React.JSX.Element;
+export declare namespace TextareaField {
+    var displayName: string;
+}
 export {};

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

@@ -6,7 +6,7 @@ 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 }) => {
+var TextareaField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...rest }) => {
 	const { register } = useFormContext();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
@@ -30,7 +30,7 @@ var TextareaField = ({ className, hideLabel, label, name, validation, prompt, de
 			appearance: formAppearance,
 			theme: formTheme,
 			...error && { state: "error" },
-			...remainingProps
+			...rest
 		})
 	});
 };

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,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"}
+{"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  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\nimport { Textarea, type TextareaProps } from '../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  ...rest\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        {...rest}\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,WACqB;CACxB,MAAM,EAAE,aAAa,eAAe;CACpC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CACpC,MAAM,MAAM,aAAa,SAAS,UAAU,IAAI;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;CAEpC,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;YAEZ,oBAAC,UAAD;GACE,IAAI;GACE;GACD;GACL,YAAY;GACZ,OAAO;GACP,GAAK,SAAS,EAAE,OAAO,QAAQ;GAC/B,GAAI;EACL,CAAA;CACW,CAAA;AAElB;AAEA,cAAc,cAAc"}

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

@@ -1,14 +1,14 @@
-import React from 'react';
-import { TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
+import * as React from 'react';
+import { type TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
 export declare const StyledTile: React.ForwardRefExoticComponent<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;
+    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?: React.ElementType;
 }>;
-type TTileProps = React.ComponentProps<typeof StyledTile> & {
+type TileProps = React.ComponentProps<typeof StyledTile> & {
     colorScheme?: TcolorScheme;
 };
-export declare const Tile: React.ForwardRefExoticComponent<Omit<TTileProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Tile: React.ForwardRefExoticComponent<Omit<TileProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export {};

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 * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/tile/Tile.tsx
 var StyledTile = styled("div", {
@@ -24,7 +24,7 @@ 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__ */ jsx(ColorScheme, {
+var Tile = React$1.forwardRef(({ children, borderRadius = "lg", colorScheme = {}, ...rest }, ref) => /* @__PURE__ */ jsx(ColorScheme, {
 	asChild: true,
 	base: "grey1",
 	accent: "primary2",
@@ -39,6 +39,6 @@ var Tile = React.forwardRef(({ children, borderRadius = "lg", colorScheme = {},
 }));
 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  { enabledResponsiveVariants: true }\n)\n\ntype TileProps = React.ComponentProps<typeof StyledTile> & {\n  colorScheme?: TcolorScheme\n}\n\nexport const Tile = React.forwardRef<HTMLDivElement, TileProps>(\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;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,2BAA2B,KAAK,CACpC;AAMA,IAAa,OAAO,QAAM,YACvB,EAAE,UAAU,eAAe,MAAM,cAAc,CAAC,GAAG,GAAG,QAAQ,QAC7D,oBAAC,aAAD;CACE,SAAA;CACA,MAAK;CACL,QAAO;CACP,aAAY;CACZ,GAAI;WAEJ,oBAAC,YAAD;EAAiB;EAAmB;EAAc,GAAI;EACnD;CACS,CAAA;AACD,CAAA,CAEjB;AAEA,KAAK,cAAc"}

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

@@ -1,9 +1,9 @@
-import React from 'react';
-import { NavigatorActions } from '../../types/navigatorActions.types';
+import * as React from 'react';
+import type { 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;
+    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?: React.ElementType;
 } & {
@@ -11,6 +11,6 @@ declare const StyledTileInteractive: React.ForwardRefExoticComponent<Omit<Omit<O
 }, "ref"> & React.RefAttributes<HTMLDivElement>, never> & {
     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>>;
+type TileInteractiveProps = React.ComponentProps<typeof StyledTileInteractive> & React.ButtonHTMLAttributes<HTMLButtonElement> & NavigatorActions;
+export declare const TileInteractive: React.ForwardRefExoticComponent<Omit<TileInteractiveProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 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 * as React$1 from "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 = React$1.forwardRef(({ onClick, href, type = "button", as, ...rest }, ref) => {
 	const elementSpecificProps = !!href ? {
 		as: as || "a",
 		href,

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 { 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 = React.ComponentProps<typeof StyledTileInteractive> &\n  React.ButtonHTMLAttributes<HTMLButtonElement> &\n  NavigatorActions\n\nexport const TileInteractive = React.forwardRef<\n  HTMLDivElement,\n  TileInteractiveProps\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;AACF,EACF,CAAC;AAMD,IAAa,kBAAkB,QAAM,YAGlC,EAAE,SAAS,MAAM,OAAO,UAAU,IAAI,GAAG,QAAQ,QAAQ;CAE1D,MAAM,uBAAuB,CADb,CAAC,OAEb;EACE,IAAI,MAAO;EACX;EACA,SAAS,KAAA;CACX,IACA;EACE,IAAI,MAAO;EACX;EACA;CACF;CAEJ,OAAO,oBAAC,uBAAD;EAAuB,GAAI;EAAM,GAAI;EAA2B;CAAM,CAAA;AAC/E,CAAC;AAED,gBAAgB,cAAc"}

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

@@ -1,9 +1,9 @@
 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;
+    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?: React.ElementType;
 } & {
@@ -13,6 +13,6 @@ declare const StyledTileToggleGroupItem: React.ForwardRefExoticComponent<Omit<Om
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLDivElement>, never> & {
     as?: React.ElementType;
 }>;
-type TTileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> & React.ComponentProps<typeof StyledTileToggleGroupItem>;
-export declare const TileToggleGroupItem: ({ children, ...rest }: TTileToggleGroupItem) => React.JSX.Element;
+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,6 @@
 import * as React from 'react';
-export declare const TileToggleGroupRoot: React.ForwardRefExoticComponent<(Omit<Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement> & {
+export declare const TileToggleGroupRoot: React.ForwardRefExoticComponent<(Omit<Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement> & {
     disableDeselect?: boolean;
-}, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement> & {
+}, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement> & {
     disableDeselect?: boolean;
 }, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">) & React.RefAttributes<HTMLDivElement>>;

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 = React.forwardRef<\n  HTMLDivElement,\n  TileToggleGroupRootProps\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,SACF;AACD,CAAA,CACF"}

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.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\nTileToggleGroup.displayName = 'TileToggleGroup'\n"],"mappings":";;;AAOA,IAAa,kBAAkB;AAC/B,gBAAgB,OAAO;AACvB,gBAAgB,cAAc"}

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,13 @@
 import * as React from 'react';
+import { ToastCloseButton } from './ToastCloseButton';
+import { ToastIcon } from './ToastIcon';
 export declare const StyledToast: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "type"> & {
-    type?: "success" | "loading" | "error" | "blank" | undefined;
+    type?: "blank" | "error" | "loading" | "success" | undefined;
 } & {
     as?: React.ElementType;
 }>;
-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;
-};
+export declare function Toast(props: React.ComponentProps<typeof StyledToast>): React.JSX.Element;
+export declare namespace Toast {
+    export { ToastIcon as Icon };
+    export { ToastCloseButton as Close };
+}

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";
@@ -40,6 +40,6 @@ var Toast = (props) => {
 Toast.Icon = ToastIcon;
 Toast.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\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":";;;;;;;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,IAAa,SAAS,UAAoD;CACxE,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,MAAM,OAAO;AACb,MAAM,QAAQ"}

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 { toast } from 'react-hot-toast';
+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,12 +1,12 @@
 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";
+import { toast as toast$1, useToaster } from "react-hot-toast";
 //#region src/components/toast/ToastProvider.tsx
 var ToastProviderBase = styled("div", { base: [
 	"fixed",