@atom-learning/components 6.16.0-beta.4 → 6.16.1-beta.0

package/dist/components/select-menu/SelectMenuTrigger.js

@@ -0,0 +1,91 @@
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { useSelectMenuContext } from "./SelectMenuContext.js";
+import * as React$1 from "react";
+import { ChevronDown } from "@atom-learning/icons";
+import * as RadixSelect from "@radix-ui/react-select";
+//#region src/components/select-menu/SelectMenuTrigger.tsx
+var Trigger = styled(RadixSelect.Trigger, {
+	base: [
+		"appearance-none",
+		"rounded-md",
+		"block",
+		"w-full",
+		"font-body",
+		"font-normal",
+		"leading-[1.4]",
+		"text-grey-1000",
+		"text-left",
+		"relative",
+		"inline-flex",
+		"items-center",
+		"border-none",
+		"hover:cursor-pointer",
+		"disabled:opacity-30",
+		"disabled:cursor-not-allowed",
+		"focus:outline-2",
+		"focus:outline-blue-800",
+		"focus:outline-offset-1",
+		"focus:outline-solid",
+		"focus:z-1"
+	],
+	variants: {
+		size: {
+			sm: [
+				"h-8",
+				"pl-2",
+				"pr-8",
+				"text-sm"
+			],
+			md: [
+				"h-10",
+				"pl-3",
+				"pr-10",
+				"text-md"
+			],
+			lg: [
+				"h-12",
+				"pl-3",
+				"pr-10",
+				"text-md"
+			]
+		},
+		theme: {
+			white: ["bg-white"],
+			grey: ["bg-grey-100"]
+		},
+		state: { error: ["bg-danger-light", "focus:outline-danger"] }
+	}
+});
+var TriggerIcon = styled(Icon, {
+	base: [
+		"absolute",
+		"top-1/2",
+		"-translate-y-1/2",
+		"pointer-events-none",
+		"text-grey-700"
+	],
+	variants: { size: {
+		sm: ["right-2", "size-4"],
+		md: ["right-3", "size-5"],
+		lg: ["right-3", "size-5"]
+	} }
+});
+var SelectMenuTrigger = React$1.forwardRef(({ placeholder, children, ...props }, ref) => {
+	const { size, theme, state } = useSelectMenuContext();
+	return /* @__PURE__ */ React$1.createElement(Trigger, {
+		ref,
+		size,
+		theme,
+		state,
+		...props
+	}, /* @__PURE__ */ React$1.createElement(RadixSelect.Value, { placeholder }, children), /* @__PURE__ */ React$1.createElement(TriggerIcon, {
+		is: ChevronDown,
+		size
+	}));
+});
+SelectMenuTrigger.displayName = "SelectMenuTrigger";
+//#endregion
+export { SelectMenuTrigger };
+
+//# sourceMappingURL=SelectMenuTrigger.js.map

package/dist/components/select-menu/SelectMenuTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuTrigger.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenuContext'\n\nconst Trigger = styled(RadixSelect.Trigger, {\n  base: [\n    'appearance-none',\n    'rounded-md',\n    'block',\n    'w-full',\n    'font-body',\n    'font-normal',\n    'leading-[1.4]',\n    'text-grey-1000',\n    'text-left',\n    'relative',\n    'inline-flex',\n    'items-center',\n    'border-none',\n    'hover:cursor-pointer',\n    'disabled:opacity-30',\n    'disabled:cursor-not-allowed',\n    'focus:outline-2',\n    'focus:outline-blue-800',\n    'focus:outline-offset-1',\n    'focus:outline-solid',\n    'focus:z-1'\n  ],\n  variants: {\n    size: {\n      sm: ['h-8', 'pl-2', 'pr-8', 'text-sm'],\n      md: ['h-10', 'pl-3', 'pr-10', 'text-md'],\n      lg: ['h-12', 'pl-3', 'pr-10', 'text-md']\n    },\n    theme: {\n      white: ['bg-white'],\n      grey: ['bg-grey-100']\n    },\n    state: {\n      error: ['bg-danger-light', 'focus:outline-danger']\n    }\n  }\n})\n\nconst TriggerIcon = styled(Icon, {\n  base: [\n    'absolute',\n    'top-1/2',\n    '-translate-y-1/2',\n    'pointer-events-none',\n    'text-grey-700'\n  ],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-3', 'size-5'],\n      lg: ['right-3', 'size-5']\n    }\n  }\n})\n\ntype SelectMenuTriggerProps = React.ComponentPropsWithRef<\n  typeof RadixSelect.Trigger\n> & {\n  placeholder?: string\n}\n\nexport const SelectMenuTrigger = React.forwardRef<\n  HTMLButtonElement,\n  SelectMenuTriggerProps\n>(({ placeholder, children, ...props }, ref) => {\n  const { size, theme, state } = useSelectMenuContext()\n\n  return (\n    <Trigger ref={ref} size={size} theme={theme} state={state} {...props}>\n      <RadixSelect.Value placeholder={placeholder}>\n        {children}\n      </RadixSelect.Value>\n      <TriggerIcon is={ChevronDown} size={size} />\n    </Trigger>\n  )\n})\n\nSelectMenuTrigger.displayName = 'SelectMenuTrigger'\n"],"mappings":";;;;;;;AASA,IAAM,UAAU,OAAO,YAAY,SAAS;CAC1C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAQ;IAAQ;IAAU;GACtC,IAAI;IAAC;IAAQ;IAAQ;IAAS;IAAU;GACxC,IAAI;IAAC;IAAQ;IAAQ;IAAS;IAAU;GACzC;EACD,OAAO;GACL,OAAO,CAAC,WAAW;GACnB,MAAM,CAAC,cAAc;GACtB;EACD,OAAO,EACL,OAAO,CAAC,mBAAmB,uBAAuB,EACnD;EACF;CACF,CAAC;AAEF,IAAM,cAAc,OAAO,MAAM;CAC/B,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,WAAW,SAAS;EAC1B,EACF;CACF,CAAC;AAQF,IAAa,oBAAoB,QAAM,YAGpC,EAAE,aAAa,UAAU,GAAG,SAAS,QAAQ;CAC9C,MAAM,EAAE,MAAM,OAAO,UAAU,sBAAsB;AAErD,QACE,wBAAA,cAAC,SAAD;EAAc;EAAW;EAAa;EAAc;EAAO,GAAI;EAKrD,EAJR,wBAAA,cAAC,YAAY,OAAb,EAAgC,aAEZ,EADjB,SACiB,EACpB,wBAAA,cAAC,aAAD;EAAa,IAAI;EAAmB;EAAQ,CAAA,CACpC;EAEZ;AAEF,kBAAkB,cAAc"}

package/dist/components/select-menu-field/SelectMenuField.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWrapper';
+type SelectMenuFieldProps = React.PropsWithChildren<FieldElementWrapperProps & {
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    theme?: 'white' | 'grey';
+    disabled?: boolean;
+    className?: string;
+}>;
+export declare const SelectMenuField: {
+    ({ className, hideLabel, children, name, label, validation, prompt, description, theme, size, placeholder, disabled, ...remainingProps }: SelectMenuFieldProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/select-menu-field/SelectMenuField.js

@@ -0,0 +1,46 @@
+import { useFieldError } from "../form/useFieldError.js";
+import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
+import { useFormCustomContext } from "../form/useFormCustomContext.js";
+import { SelectMenu } from "../select-menu/SelectMenu.js";
+import * as React$1 from "react";
+import { useController, useFormContext } from "react-hook-form";
+//#region src/components/select-menu-field/SelectMenuField.tsx
+var SelectMenuField = ({ className, hideLabel, children, name, label, validation, prompt, description, theme, size, placeholder, disabled, ...remainingProps }) => {
+	const { control } = useFormContext();
+	const context = useFormCustomContext();
+	const { error } = useFieldError(name);
+	const formTheme = context?.theme ?? theme;
+	const { field: { ref, onChange, value } } = useController({
+		name,
+		control,
+		rules: validation,
+		defaultValue: ""
+	});
+	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
+		className,
+		description,
+		error,
+		fieldId: name,
+		hideLabel,
+		label,
+		prompt,
+		required: Boolean(validation?.required)
+	}, /* @__PURE__ */ React$1.createElement(SelectMenu, {
+		value,
+		onValueChange: onChange,
+		size,
+		theme: formTheme,
+		disabled,
+		...error && { state: "error" },
+		...remainingProps
+	}, /* @__PURE__ */ React$1.createElement(SelectMenu.Trigger, {
+		ref,
+		placeholder,
+		"aria-label": label
+	}), /* @__PURE__ */ React$1.createElement(SelectMenu.Content, null, children)));
+};
+SelectMenuField.displayName = "SelectMenuField";
+//#endregion
+export { SelectMenuField };
+
+//# sourceMappingURL=SelectMenuField.js.map

package/dist/components/select-menu-field/SelectMenuField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuField.js","names":[],"sources":["../../../src/components/select-menu-field/SelectMenuField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, 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 { SelectMenu } from '~/components/select-menu/SelectMenu'\n\ntype SelectMenuFieldProps = React.PropsWithChildren<\n  FieldElementWrapperProps & {\n    placeholder?: string\n    size?: 'sm' | 'md' | 'lg'\n    theme?: 'white' | 'grey'\n    disabled?: boolean\n    className?: string\n  }\n>\n\nexport const SelectMenuField = ({\n  className,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  theme,\n  size,\n  placeholder,\n  disabled,\n  ...remainingProps\n}: SelectMenuFieldProps) => {\n  const { control } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const formTheme = context?.theme ?? theme\n\n  const {\n    field: { ref, onChange, value }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue: ''\n  })\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    >\n      <SelectMenu\n        value={value}\n        onValueChange={onChange}\n        size={size}\n        theme={formTheme}\n        disabled={disabled}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      >\n        <SelectMenu.Trigger\n          ref={ref}\n          placeholder={placeholder}\n          aria-label={label}\n        />\n        <SelectMenu.Content>{children}</SelectMenu.Content>\n      </SelectMenu>\n    </FieldWrapper>\n  )\n}\n\nSelectMenuField.displayName = 'SelectMenuField'\n"],"mappings":";;;;;;;AAqBA,IAAa,mBAAmB,EAC9B,WACA,WACA,UACA,MACA,OACA,YACA,QACA,aACA,OACA,MACA,aACA,UACA,GAAG,qBACuB;CAC1B,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,MAAM,YAAY,SAAS,SAAS;CAEpC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,YACtB,cAAc;EAChB;EACA;EACA,OAAO;EACP,cAAc;EACf,CAAC;AAEF,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EAkB1B,EAhBb,wBAAA,cAAC,YAAD;EACS;EACP,eAAe;EACT;EACN,OAAO;EACG;EACV,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EAQO,EANX,wBAAA,cAAC,WAAW,SAAZ;EACO;EACQ;EACb,cAAY;EACZ,CAAA,EACF,wBAAA,cAAC,WAAW,SAAA,MAAS,SAA8B,CACxC,CACA;;AAInB,gBAAgB,cAAc"}

package/dist/components/skeleton-loader/SkeletonCard.js

@@ -5,7 +5,7 @@ import { Tile } from "../tile/Tile.js";
 import { SkeletonDoughnutChart } from "./SkeletonDoughnutChart.js";
 import React from "react";
 //#region src/components/skeleton-loader/SkeletonCard.tsx
-var SkeletonCard = ({ numberOfRows = 3, withChart, className }) => /* @__PURE__ */ React.createElement(Tile, { className: cn("relative", "w-full", "flex-col", "items-center", "gap-6 p-6", className) }, /* @__PURE__ */ React.createElement("div", { className: "align-center flex w-full gap-6" }, withChart && /* @__PURE__ */ React.createElement(SkeletonDoughnutChart, null), /* @__PURE__ */ React.createElement("div", { className: "flex grow flex-col gap-6" }, Array.from({ length: numberOfRows }, (_, index) => index).map((rowNumber) => /* @__PURE__ */ React.createElement(SkeletonLoader, {
+var SkeletonCard = ({ numberOfRows = 3, withChart, className }) => /* @__PURE__ */ React.createElement(Tile, { className: cn("relative", "w-full", "flex-col", "items-center", "gap-6", "p-6", className) }, /* @__PURE__ */ React.createElement("div", { className: "align-center flex w-full gap-6" }, withChart && /* @__PURE__ */ React.createElement(SkeletonDoughnutChart, null), /* @__PURE__ */ React.createElement("div", { className: "flex grow flex-col gap-6" }, Array.from({ length: numberOfRows }, (_, index) => index).map((rowNumber) => /* @__PURE__ */ React.createElement(SkeletonLoader, {
 	key: rowNumber,
 	className: "bg-grey-200 h-10 w-full min-w-25 rounded-md"
 })))), /* @__PURE__ */ React.createElement(SkeletonButton, null));

package/dist/components/skeleton-loader/SkeletonCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonCard.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Flex } from '../flex/Flex'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\nimport { SkeletonButton } from './SkeletonButton'\nimport { SkeletonDoughnutChart } from './SkeletonDoughnutChart'\n\nexport const SkeletonCard = ({\n  numberOfRows = 3,\n  withChart,\n  className\n}: {\n  numberOfRows?: number\n  withChart?: boolean\n  className?: string\n}) => (\n  <Tile\n    className={cn(\n      'relative',\n      'w-full',\n      'flex-col',\n      'items-center',\n      'gap-6 p-6',\n      className\n    )}\n  >\n    <div className=\"align-center flex w-full gap-6\">\n      {withChart && <SkeletonDoughnutChart />}\n      <div className=\"flex grow flex-col gap-6\">\n        {Array.from({ length: numberOfRows }, (_, index) => index).map(\n          (rowNumber) => (\n            <SkeletonLoader\n              key={rowNumber}\n              className=\"bg-grey-200 h-10 w-full min-w-25 rounded-md\"\n            />\n          )\n        )}\n      </div>\n    </div>\n    <SkeletonButton />\n  </Tile>\n)\n"],"mappings":";;;;;;;AAUA,IAAa,gBAAgB,EAC3B,eAAe,GACf,WACA,gBAMA,sBAAA,cAAC,MAAD,EACE,WAAW,GACT,YACA,UACA,YACA,gBACA,aACA,UACD,EAgBI,EAdL,sBAAA,cAAC,OAAD,EAAK,WAAU,kCAYT,EAXH,aAAa,sBAAA,cAAC,uBAAA,KAAwB,EACvC,sBAAA,cAAC,OAAD,EAAK,WAAU,4BAST,EARH,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,UAAU,MAAM,CAAC,KACxD,cACC,sBAAA,cAAC,gBAAD;CACE,KAAK;CACL,WAAU;CACV,CAAA,CAEL,CACG,CACF,EACN,sBAAA,cAAC,gBAAA,KAAiB,CACb"}
+{"version":3,"file":"SkeletonCard.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Flex } from '../flex/Flex'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\nimport { SkeletonButton } from './SkeletonButton'\nimport { SkeletonDoughnutChart } from './SkeletonDoughnutChart'\n\nexport const SkeletonCard = ({\n  numberOfRows = 3,\n  withChart,\n  className\n}: {\n  numberOfRows?: number\n  withChart?: boolean\n  className?: string\n}) => (\n  <Tile\n    className={cn(\n      'relative',\n      'w-full',\n      'flex-col',\n      'items-center',\n      'gap-6',\n      'p-6',\n      className\n    )}\n  >\n    <div className=\"align-center flex w-full gap-6\">\n      {withChart && <SkeletonDoughnutChart />}\n      <div className=\"flex grow flex-col gap-6\">\n        {Array.from({ length: numberOfRows }, (_, index) => index).map(\n          (rowNumber) => (\n            <SkeletonLoader\n              key={rowNumber}\n              className=\"bg-grey-200 h-10 w-full min-w-25 rounded-md\"\n            />\n          )\n        )}\n      </div>\n    </div>\n    <SkeletonButton />\n  </Tile>\n)\n"],"mappings":";;;;;;;AAUA,IAAa,gBAAgB,EAC3B,eAAe,GACf,WACA,gBAMA,sBAAA,cAAC,MAAD,EACE,WAAW,GACT,YACA,UACA,YACA,gBACA,SACA,OACA,UACD,EAgBI,EAdL,sBAAA,cAAC,OAAD,EAAK,WAAU,kCAYT,EAXH,aAAa,sBAAA,cAAC,uBAAA,KAAwB,EACvC,sBAAA,cAAC,OAAD,EAAK,WAAU,4BAST,EARH,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,UAAU,MAAM,CAAC,KACxD,cACC,sBAAA,cAAC,gBAAD;CACE,KAAK;CACL,WAAU;CACV,CAAA,CAEL,CACG,CACF,EACN,sBAAA,cAAC,gBAAA,KAAiB,CACb"}

package/dist/components/sortable/Handle.d.ts

@@ -9,10 +9,9 @@ export declare const StyledHandle: React.ForwardRefExoticComponent<Omit<Omit<Omi
     isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "children" | "label" | "hasTooltip" | "tooltipSide" | "reloadDocument" | keyof import("../..").NavigatorActions> & {
+}, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
     children: React.ReactNode;
     label: string;
-    reloadDocument?: boolean;
 } & Omit<import("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "isDragging"> & {
     isDragging?: boolean | undefined;
 } & {

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

@@ -13,8 +13,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 & {
-    reloadDocument?: boolean;
-};
+type TTileInteractiveProps = React.ComponentProps<typeof StyledTileInteractive> & React.ButtonHTMLAttributes<HTMLButtonElement> & NavigatorActions;
 export declare const TileInteractive: React.ForwardRefExoticComponent<Omit<TTileInteractiveProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1,5 +1,4 @@
 import { styled } from "../../styled.js";
-import { useRouterLinkProps } from "../router-provider/RouterProvider.js";
 import { Tile } from "../tile/Tile.js";
 import React from "react";
 //#region src/components/tile-interactive/TileInteractive.tsx
@@ -29,10 +28,9 @@ var StyledTileInteractive = styled(Tile, { base: [
 	"not-disabled:transition-transform",
 	"not-disabled:translate-y-0"
 ] });
-var TileInteractive = React.forwardRef(({ onClick, href, type = "button", as, reloadDocument, ...rest }, ref) => {
-	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
+var TileInteractive = React.forwardRef(({ onClick, href, type = "button", as, ...rest }, ref) => {
 	const elementSpecificProps = !!href ? {
-		as: as || routerLinkProps.as || "a",
+		as: as || "a",
 		href,
 		onClick: void 0
 	} : {

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

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

@@ -12,9 +12,7 @@ declare const StyledTileToggleGroupItem: React.ForwardRefExoticComponent<Omit<Om
     colorScheme?: import("../..").TcolorScheme;
 }, "ref"> & React.RefAttributes<HTMLDivElement>, never> & {
     as?: React.ElementType;
-} & React.ButtonHTMLAttributes<HTMLButtonElement> & import("../..").NavigatorActions & {
-    reloadDocument?: boolean;
-}, "ref"> & React.RefAttributes<HTMLDivElement>, never> & {
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLDivElement>, never> & {
     as?: React.ElementType;
 }>;
 type TTileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> & React.ComponentProps<typeof StyledTileToggleGroupItem>;

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

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

package/dist/components/toast/ToastProvider.js

@@ -12,7 +12,8 @@ var ToastProviderBase = styled("div", { base: [
 	"z-2147483647",
 	"inset-2",
 	"pointer-events-none",
-	"sm:top-3"
+	"top-safe-or-2",
+	"sm:top-safe-or-3"
 ] });
 var ToastWrapper = styled("div", {
 	base: [

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

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

package/dist/components/top-bar/TopBar.d.ts

@@ -51,10 +51,9 @@ export declare const TopBar: {
         isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     } & {
         as?: React.ElementType;
-    }, "children" | "label" | "hasTooltip" | "tooltipSide" | "reloadDocument" | keyof import("../..").NavigatorActions> & {
+    }, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
         children: React.ReactNode;
         label: string;
-        reloadDocument?: boolean;
     } & Omit<import("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "size" | "children"> & {
         icon: React.FC<React.SVGProps<SVGSVGElement>>;
         label: string;

package/dist/components/tree/Tree.d.ts

@@ -30,7 +30,7 @@ export declare const Tree: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.
         as?: React.ElementType;
     }, "ref"> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
     Icon: ({ className, ...props }: React.ComponentProps<typeof import("..").Icon>) => JSX.Element;
-    Text: (props: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    Text: ({ className, ...rest }: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
         ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
     }, "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;

package/dist/components/tree/TreeIcon.js

@@ -5,7 +5,7 @@ import * as React$1 from "react";
 var TreeIcon = ({ className, ...props }) => /* @__PURE__ */ React$1.createElement(Icon, {
 	size: "md",
 	...props,
-	className: cn("my-1 shrink-0 self-start", className)
+	className: cn("my-1", "shrink-0", "self-start", className)
 });
 //#endregion
 export { TreeIcon };

package/dist/components/tree/TreeIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeIcon.js","names":[],"sources":["../../../src/components/tree/TreeIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { cn } from '~/styled'\n\nexport const TreeIcon = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof Icon>): JSX.Element => (\n  <Icon\n    size=\"md\"\n    {...props}\n    className={cn('my-1 shrink-0 self-start', className)}\n  />\n)\n"],"mappings":";;;;AAKA,IAAa,YAAY,EACvB,WACA,GAAG,YAEH,wBAAA,cAAC,MAAD;CACE,MAAK;CACL,GAAI;CACJ,WAAW,GAAG,4BAA4B,UAAU;CACpD,CAAA"}
+{"version":3,"file":"TreeIcon.js","names":[],"sources":["../../../src/components/tree/TreeIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { cn } from '~/styled'\n\nexport const TreeIcon = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof Icon>): JSX.Element => (\n  <Icon\n    size=\"md\"\n    {...props}\n    className={cn('my-1', 'shrink-0', 'self-start', className)}\n  />\n)\n"],"mappings":";;;;AAKA,IAAa,YAAY,EACvB,WACA,GAAG,YAEH,wBAAA,cAAC,MAAD;CACE,MAAK;CACL,GAAI;CACJ,WAAW,GAAG,QAAQ,YAAY,cAAc,UAAU;CAC1D,CAAA"}

package/dist/components/tree/TreeListItem.js

@@ -5,7 +5,7 @@ var TreeListItem = React$1.forwardRef(({ className, ...props }, ref) => /* @__PU
 	...props,
 	ref,
 	role: "treeitem",
-	className: cn("flex items-center gap-2 not-first:mt-0.5", className)
+	className: cn("flex", "items-center", "gap-2", "not-first:mt-0.5", className)
 }));
 //#endregion
 export { TreeListItem };

package/dist/components/tree/TreeListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeListItem.js","names":[],"sources":["../../../src/components/tree/TreeListItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\ntype TreeListItemProps = React.ComponentProps<'li'>\n\nexport const TreeListItem = React.forwardRef<HTMLLIElement, TreeListItemProps>(\n  ({ className, ...props }, ref) => (\n    <li\n      {...props}\n      ref={ref}\n      role=\"treeitem\"\n      className={cn('flex items-center gap-2 not-first:mt-0.5', className)}\n    />\n  )\n)\n"],"mappings":";;;AAMA,IAAa,eAAe,QAAM,YAC/B,EAAE,WAAW,GAAG,SAAS,QACxB,wBAAA,cAAC,MAAD;CACE,GAAI;CACC;CACL,MAAK;CACL,WAAW,GAAG,4CAA4C,UAAU;CACpE,CAAA,CAEL"}
+{"version":3,"file":"TreeListItem.js","names":[],"sources":["../../../src/components/tree/TreeListItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\ntype TreeListItemProps = React.ComponentProps<'li'>\n\nexport const TreeListItem = React.forwardRef<HTMLLIElement, TreeListItemProps>(\n  ({ className, ...props }, ref) => (\n    <li\n      {...props}\n      ref={ref}\n      role=\"treeitem\"\n      className={cn(\n        'flex',\n        'items-center',\n        'gap-2',\n        'not-first:mt-0.5',\n        className\n      )}\n    />\n  )\n)\n"],"mappings":";;;AAMA,IAAa,eAAe,QAAM,YAC/B,EAAE,WAAW,GAAG,SAAS,QACxB,wBAAA,cAAC,MAAD;CACE,GAAI;CACC;CACL,MAAK;CACL,WAAW,GACT,QACA,gBACA,SACA,oBACA,UACD;CACD,CAAA,CAEL"}

package/dist/components/tree/TreeText.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { Text } from '../../components/text/Text';
 type TStyledTreeTextProps = React.ComponentProps<typeof Text>;
-export declare const TreeText: (props: TStyledTreeTextProps) => JSX.Element;
+export declare const TreeText: ({ className, ...rest }: TStyledTreeTextProps) => JSX.Element;
 export {};

package/dist/components/tree/TreeText.js

@@ -2,10 +2,10 @@ import { cn } from "../../styled.js";
 import { Text } from "../text/Text.js";
 import React from "react";
 //#region src/components/tree/TreeText.tsx
-var TreeText = (props) => /* @__PURE__ */ React.createElement(Text, {
+var TreeText = ({ className, ...rest }) => /* @__PURE__ */ React.createElement(Text, {
 	as: "span",
-	...props,
-	className: cn("py-0.5", "whitespace-nowrap", "overflow-x-hidden", "text-ellipsis", props.className),
+	...rest,
+	className: cn("py-0.5", "whitespace-nowrap", "overflow-x-hidden", "text-ellipsis", className),
 	size: "md"
 });
 //#endregion

package/dist/components/tree/TreeText.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeText.js","names":[],"sources":["../../../src/components/tree/TreeText.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '~/components/text/Text'\nimport { cn } from '~/styled'\n\ntype TStyledTreeTextProps = React.ComponentProps<typeof Text>\n\nexport const TreeText = (props: TStyledTreeTextProps): JSX.Element => (\n  <Text\n    as=\"span\"\n    {...props}\n    className={cn(\n      'py-0.5',\n      'whitespace-nowrap',\n      'overflow-x-hidden',\n      'text-ellipsis',\n      props.className\n    )}\n    size=\"md\"\n  />\n)\n"],"mappings":";;;;AAOA,IAAa,YAAY,UACvB,sBAAA,cAAC,MAAD;CACE,IAAG;CACH,GAAI;CACJ,WAAW,GACT,UACA,qBACA,qBACA,iBACA,MAAM,UACP;CACD,MAAK;CACL,CAAA"}
+{"version":3,"file":"TreeText.js","names":[],"sources":["../../../src/components/tree/TreeText.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '~/components/text/Text'\nimport { cn } from '~/styled'\n\ntype TStyledTreeTextProps = React.ComponentProps<typeof Text>\n\nexport const TreeText = ({\n  className,\n  ...rest\n}: TStyledTreeTextProps): JSX.Element => (\n  <Text\n    as=\"span\"\n    {...rest}\n    className={cn(\n      'py-0.5',\n      'whitespace-nowrap',\n      'overflow-x-hidden',\n      'text-ellipsis',\n      className\n    )}\n    size=\"md\"\n  />\n)\n"],"mappings":";;;;AAOA,IAAa,YAAY,EACvB,WACA,GAAG,WAEH,sBAAA,cAAC,MAAD;CACE,IAAG;CACH,GAAI;CACJ,WAAW,GACT,UACA,qBACA,qBACA,iBACA,UACD;CACD,MAAK;CACL,CAAA"}