ixia-ui-react 1.4.0 → 1.4.2

package/dist/index.d.ts

@@ -113,7 +113,7 @@ declare const Alert: typeof Alert$1 & {
 //#endregion
 //#region src/components/button/button.types.d.ts
 declare const buttonVariants: (props?: ({
-  size?: "extraSmall" | "iconExtraSmall" | "iconLarge" | "iconMedium" | "iconSmall" | "large" | "medium" | "small" | null | undefined;
+  size?: "extraSmall" | "large" | "medium" | "small" | null | undefined;
   tone?: "accent" | "brand" | "error" | "info" | "neutral" | "success" | "warning" | null | undefined;
   variant?: "elevated" | "fill" | "ghost" | "link" | "outline" | "soft" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -307,14 +307,14 @@ declare const Avatar: typeof Avatar$2 & {
 //#endregion
 //#region src/components/badge/badge.types.d.ts
 declare const badgeVariants: (props?: ({
-  size?: "iconLarge" | "iconMedium" | "iconSmall" | "large" | "medium" | "small" | null | undefined;
+  size?: "large" | "medium" | "small" | null | undefined;
   tone?: "accent" | "brand" | "error" | "info" | "neutral" | "success" | "warning" | null | undefined;
   variant?: "fill" | "outline" | "soft" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type BadgeProps = ComponentProps<'div'> & VariantProps<typeof badgeVariants>;
 //#endregion
 //#region src/components/badge/badge.d.ts
-export declare function Badge({ className, size, tone, variant, ref, ...props }: BadgeProps): import("react").JSX.Element;
+export declare function Badge({ className, size, tone, variant, ref, children, ...props }: BadgeProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/bento-box/bento-box.types.d.ts
 declare const bentoBoxVariants: (props?: ({
@@ -392,12 +392,12 @@ declare const Breadcrumb: typeof Breadcrumb$1 & {
 };
 //#endregion
 //#region src/components/button/button.d.ts
-export declare function Button({ tone, variant, size, className, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ tone, variant, size, className, children, ...props }: ButtonProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/button-group/button-group.types.d.ts
 declare const buttonGroupVariants: (props?: ({
   orientation?: "horizontal" | "vertical" | null | undefined;
-  size?: "extraSmall" | "iconExtraSmall" | "iconLarge" | "iconMedium" | "iconSmall" | "large" | "medium" | "small" | null | undefined;
+  size?: "extraSmall" | "large" | "medium" | "small" | null | undefined;
   tone?: "accent" | "brand" | "error" | "info" | "neutral" | "success" | "warning" | null | undefined;
   variant?: "elevated" | "fill" | "ghost" | "outline" | "soft" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -1458,7 +1458,7 @@ export declare function TextArea({ variant, className, ref, ...props }: TextArea
 //#endregion
 //#region src/components/toggle/toggle.types.d.ts
 declare const toggleVariants: (props?: ({
-  size?: "iconLarge" | "iconMedium" | "iconSmall" | "large" | "medium" | "small" | null | undefined;
+  size?: "large" | "medium" | "small" | null | undefined;
   tone?: "accent" | "brand" | "error" | "info" | "neutral" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ToggleProps = Omit<React.ComponentProps<typeof Toggle$1>, 'children'> & VariantProps<typeof toggleVariants> & {

package/dist/index.js

@@ -5,7 +5,7 @@ import { cva } from "class-variance-authority";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowsDownUpIcon, CaretDownIcon, CaretLeftIcon, CaretLineLeftIcon, CaretLineRightIcon, CaretRightIcon, CaretUpDownIcon, CaretUpIcon, CheckCircleIcon, CheckIcon, CircleNotchIcon, CopyIcon, DotsThreeIcon, DownloadIcon, EyeClosedIcon, EyeIcon, FileArrowUpIcon, FolderIcon, FolderOpenIcon, FolderSimpleIcon, FunnelIcon, FunnelSimpleIcon, InfoIcon, LockSimpleIcon, LockSimpleOpenIcon, MagnifyingGlassIcon, MinusIcon, PercentIcon, PlusIcon, SortAscendingIcon, SortDescendingIcon, TrashIcon, UploadIcon, WarningCircleIcon, WarningIcon, XCircleIcon, XIcon } from "@phosphor-icons/react";
 import { AlertDialog as AlertDialog$1, Button as Button$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, Drawer as Drawer$1, Meter as Meter$1, NavigationMenu as NavigationMenu$1, OTPField, PreviewCard as PreviewCard$1, Radio as Radio$1, RadioGroup as RadioGroup$1, Slider as Slider$1 } from "@base-ui/react";
-import React, { Children, createContext, createElement, isValidElement, useContext, useEffect, useId, useRef, useState } from "react";
+import React, { Children, Fragment as Fragment$1, createContext, createElement, isValidElement, useContext, useEffect, useId, useRef, useState } from "react";
 import { Autocomplete as Autocomplete$1 } from "@base-ui/react/autocomplete";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
 import { DayButton, DayPicker, getDefaultClassNames, isDateRange, labelDayButton } from "@daypicker/react";
@@ -175,7 +175,7 @@ function AccordionSubtitle({ className, ref, ...props }) {
 function AccordionTitle({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "accordion-title",
-		className: cn("text-left style-text-strong-0 transition-colors [&:not(:has(~_[data-slot=accordion-subtitle]))]:leading-0", className),
+		className: cn("text-left font-heading text-base font-bold transition-colors [&:has(~_[data-slot=accordion-subtitle])]:leading-[1.2] [&:not(:has(~_[data-slot=accordion-subtitle]))]:leading-none", className),
 		ref,
 		...props
 	});
@@ -251,7 +251,7 @@ function AlertIcon({ className, ref, ...props }) {
 function AlertTitle({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-title",
-		className: cn("flex items-center gap-2xs style-text-strong-0 [&:not(:has(~_[data-slot=alert-description]))]:leading-0", className),
+		className: cn("flex items-center gap-2xs font-heading text-base font-bold [&:has(~_[data-slot=alert-description])]:leading-[1.2] [&:not(:has(~_[data-slot=alert-description]))]:leading-none", className),
 		ref,
 		...props
 	});
@@ -270,6 +270,15 @@ function AlertDialog$2({ ...props }) {
 	return /* @__PURE__ */ jsx(AlertDialog$1.Root, { ...props });
 }
 //#endregion
+//#region src/utils/has-single-element-child.ts
+function hasSingleElementChild(children) {
+	const items = Children.toArray(children), [child] = items;
+	if (items.length !== 1) return false;
+	if (!isValidElement(child)) return false;
+	if (child.type === Fragment$1) return hasSingleElementChild(child.props.children);
+	return true;
+}
+//#endregion
 //#region src/components/button/button.types.ts
 const buttonVariants = cva("inline-flex cursor-pointer items-center justify-center rounded-full whitespace-nowrap transition-all select-none disabled:pointer-events-none disabled:opacity-50", {
 	compoundVariants: [
@@ -491,14 +500,10 @@ const buttonVariants = cva("inline-flex cursor-pointer items-center justify-cent
 	},
 	variants: {
 		size: {
-			extraSmall: "h-md gap-3xs px-2xs style-text-default--2 [&>svg]:size-xs",
-			iconExtraSmall: "size-md p-[0px] [&>svg]:size-xs",
-			iconLarge: "size-2xl p-[0px] [&>svg]:size-lg",
-			iconMedium: "size-xl p-[0px] [&>svg]:size-md",
-			iconSmall: "size-lg p-[0px] [&>svg]:size-sm",
-			large: "h-2xl min-w-2xl gap-xs px-md style-text-default-1 [&>svg]:size-lg",
-			medium: "h-xl min-w-xl gap-2xs px-sm style-text-default-0 [&>svg]:size-md",
-			small: "h-lg min-w-lg gap-3xs px-xs style-text-default--1 [&>svg]:size-sm"
+			extraSmall: "h-md gap-3xs px-2xs font-body text-xs leading-none font-medium [&:where([data-icon-only]:has(>svg:only-child))]:size-md [&:where([data-icon-only]:has(>svg:only-child))]:p-0 [&>svg]:size-xs",
+			large: "h-2xl min-w-2xl gap-xs px-md font-body text-lg leading-none font-medium [&:where([data-icon-only]:has(>svg:only-child))]:size-2xl [&:where([data-icon-only]:has(>svg:only-child))]:p-0 [&>svg]:size-lg",
+			medium: "h-xl min-w-xl gap-2xs px-sm font-body text-base leading-none font-medium [&:where([data-icon-only]:has(>svg:only-child))]:size-xl [&:where([data-icon-only]:has(>svg:only-child))]:p-0 [&>svg]:size-md",
+			small: "h-lg min-w-lg gap-3xs px-xs font-body text-sm leading-none font-medium [&:where([data-icon-only]:has(>svg:only-child))]:size-lg [&:where([data-icon-only]:has(>svg:only-child))]:p-0 [&>svg]:size-sm"
 		},
 		tone: {
 			accent: "",
@@ -521,8 +526,11 @@ const buttonVariants = cva("inline-flex cursor-pointer items-center justify-cent
 });
 //#endregion
 //#region src/components/button/button.tsx
-function Button({ tone, variant, size, className, ...props }) {
+function Button({ tone, variant, size, className, children, ...props }) {
+	let iconOnly = void 0;
+	if (hasSingleElementChild(children)) iconOnly = "";
 	return /* @__PURE__ */ jsx(Button$1, {
+		"data-icon-only": iconOnly,
 		"data-size": size,
 		className: cn(buttonVariants({
 			className,
@@ -530,7 +538,8 @@ function Button({ tone, variant, size, className, ...props }) {
 			tone,
 			variant
 		})),
-		...props
+		...props,
+		children
 	});
 }
 //#endregion
@@ -1097,12 +1106,9 @@ const badgeVariants = cva("inline-flex h-md items-center justify-center gap-3xs
 	},
 	variants: {
 		size: {
-			iconLarge: "size-lg [&>svg]:size-sm",
-			iconMedium: "size-md [&>svg]:size-xs",
-			iconSmall: "size-sm [&>svg]:size-2xs",
-			large: "h-lg px-xs [&>svg]:size-[1em]",
-			medium: "h-md px-xs [&>svg]:size-[1em]",
-			small: "h-sm px-xs [&>svg]:size-[1em]"
+			large: "h-lg px-xs [&:where([data-icon-only]:has(>svg:only-child))]:size-lg [&:where([data-icon-only]:has(>svg:only-child))]:p-0 [&>svg]:size-[1em] [&[data-icon-only]>svg:only-child]:size-sm",
+			medium: "h-md px-xs [&:where([data-icon-only]:has(>svg:only-child))]:size-md [&:where([data-icon-only]:has(>svg:only-child))]:p-0 [&>svg]:size-[1em] [&[data-icon-only]>svg:only-child]:size-xs",
+			small: "h-sm px-xs [&:where([data-icon-only]:has(>svg:only-child))]:size-sm [&:where([data-icon-only]:has(>svg:only-child))]:p-0 [&>svg]:size-[1em] [&[data-icon-only]>svg:only-child]:size-2xs"
 		},
 		tone: {
 			accent: "",
@@ -1122,8 +1128,11 @@ const badgeVariants = cva("inline-flex h-md items-center justify-center gap-3xs
 });
 //#endregion
 //#region src/components/badge/badge.tsx
-function Badge({ className, size, tone, variant, ref, ...props }) {
+function Badge({ className, size, tone, variant, ref, children, ...props }) {
+	let iconOnly = void 0;
+	if (hasSingleElementChild(children)) iconOnly = "";
 	return /* @__PURE__ */ jsx("div", {
+		"data-icon-only": iconOnly,
 		className: cn(badgeVariants({
 			className,
 			size,
@@ -1131,7 +1140,8 @@ function Badge({ className, size, tone, variant, ref, ...props }) {
 			variant
 		})),
 		ref,
-		...props
+		...props,
+		children
 	});
 }
 //#endregion
@@ -1272,7 +1282,7 @@ function BreadcrumbItem({ className, ref, ...props }) {
 //#region src/components/breadcrumb/breadcrumb-link.tsx
 function BreadcrumbLink({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("inline-flex h-lg items-center justify-center gap-3xs rounded-full px-2xs style-text-default--1 text-on-surface-variant transition-all hover:cursor-pointer hover:bg-neutral-container active:scale-[0.98] active:bg-neutral-container disabled:opacity-50 [&>svg]:size-sm", className),
+		className: cn("inline-flex h-lg items-center justify-center gap-3xs rounded-full px-2xs font-body text-sm leading-none font-medium text-on-surface-variant transition-all hover:cursor-pointer hover:bg-neutral-container active:scale-[0.98] active:bg-neutral-container disabled:opacity-50 [&>svg]:size-sm", className),
 		ref,
 		...props
 	});
@@ -1487,14 +1497,10 @@ const buttonGroupVariants = cva("inline-flex cursor-pointer items-center justify
 			vertical: "flex-col [&>*+*]:relative [&>*+*]:before:absolute [&>*+*]:before:top-0 [&>*+*]:before:left-1/2 [&>*+*]:before:h-px [&>*+*]:before:w-1/2 [&>*+*]:before:-translate-x-1/2 [&>*+*]:before:content-[\"\"]"
 		},
 		size: {
-			extraSmall: "*:style-text-default--2 [&>button]:h-md [&>button]:min-w-0 [&>button]:gap-3xs [&>button]:px-2xs [&>button>svg]:size-xs",
-			iconExtraSmall: "*:size-md [&>button]:size-md [&>button]:min-w-0 [&>button]:p-[0px] [&>button>svg]:size-xs",
-			iconLarge: "*:size-2xl [&>button]:size-2xl [&>button]:min-w-0 [&>button]:p-[0px] [&>button>svg]:size-lg",
-			iconMedium: "*:size-xl [&>button]:size-xl [&>button]:min-w-0 [&>button]:p-[0px] [&>button>svg]:size-md",
-			iconSmall: "*:size-lg [&>button]:size-lg [&>button]:min-w-0 [&>button]:p-[0px] [&>button>svg]:size-sm",
-			large: "*:style-text-default-1 [&>button]:h-2xl [&>button]:min-w-2xl [&>button]:gap-xs [&>button]:px-md [&>button>svg]:size-lg",
-			medium: "*:style-text-default-0 [&>button]:h-xl [&>button]:min-w-xl [&>button]:gap-2xs [&>button]:px-sm [&>button>svg]:size-md",
-			small: "*:style-text-default--1 [&>button]:h-lg [&>button]:min-w-lg [&>button]:gap-3xs [&>button]:px-xs [&>button>svg]:size-sm"
+			extraSmall: "*:font-body *:text-xs *:leading-none *:font-medium [&>button]:h-md [&>button]:min-w-0 [&>button]:gap-3xs [&>button]:px-2xs [&>button>svg]:size-xs [&>button[data-icon-only]:has(>svg:only-child)]:size-md [&>button[data-icon-only]:has(>svg:only-child)]:p-0",
+			large: "*:font-body *:text-lg *:leading-none *:font-medium [&>button]:h-2xl [&>button]:min-w-2xl [&>button]:gap-xs [&>button]:px-md [&>button>svg]:size-lg [&>button[data-icon-only]:has(>svg:only-child)]:size-2xl [&>button[data-icon-only]:has(>svg:only-child)]:p-0",
+			medium: "*:font-body *:text-base *:leading-none *:font-medium [&>button]:h-xl [&>button]:min-w-xl [&>button]:gap-2xs [&>button]:px-sm [&>button>svg]:size-md [&>button[data-icon-only]:has(>svg:only-child)]:size-xl [&>button[data-icon-only]:has(>svg:only-child)]:p-0",
+			small: "*:font-body *:text-sm *:leading-none *:font-medium [&>button]:h-lg [&>button]:min-w-lg [&>button]:gap-3xs [&>button]:px-xs [&>button>svg]:size-sm [&>button[data-icon-only]:has(>svg:only-child)]:size-lg [&>button[data-icon-only]:has(>svg:only-child)]:p-0"
 		},
 		tone: {
 			accent: "[&>*+*]:before:bg-accent-border",
@@ -1638,7 +1644,8 @@ function SelectGroupLabel({ className, ref, ...props }) {
 //#region src/components/select/select-icon.tsx
 function SelectIcon({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.Icon, {
-		className: cn("flex text-on-surface-variant", className),
+		"data-slot": "select-icon",
+		className: cn("flex text-on-surface-muted", className),
 		ref,
 		...props
 	});
@@ -1647,7 +1654,7 @@ function SelectIcon({ className, ref, ...props }) {
 //#region src/components/select/select-item.tsx
 function SelectItem({ className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsxs(Select$1.Item, {
-		className: cn("group/item grid min-h-lg cursor-default grid-cols-[1fr_0.75rem] items-center gap-xs rounded-lg px-2xs py-3xs transition-colors outline-none select-none group-data-[side=none]:pr-xs hover:cursor-pointer data-highlighted:relative data-highlighted:z-0 data-highlighted:bg-neutral-container-high data-highlighted:text-neutral-on-container data-highlighted:before:absolute data-highlighted:before:inset-x-3xs data-highlighted:before:inset-y-[0px] data-highlighted:before:z-[-1] data-highlighted:before:rounded-sm data-selected:bg-neutral-default data-selected:text-neutral-on-default [&_svg]:size-sm", className),
+		className: cn("group/item grid min-h-lg cursor-default grid-cols-[1fr_0.75rem] items-center gap-xs rounded-lg px-2xs py-3xs transition-colors outline-none select-none group-data-[side=none]:pr-xs hover:cursor-pointer data-highlighted:relative data-highlighted:z-0 data-highlighted:bg-neutral-container-high data-highlighted:text-neutral-on-container data-highlighted:before:absolute data-highlighted:before:inset-x-3xs data-highlighted:before:inset-y-[0px] data-highlighted:before:z-[-1] data-highlighted:before:rounded-sm data-selected:bg-neutral-default data-selected:text-neutral-on-default [&_svg]:size-md", className),
 		ref,
 		...props,
 		children: [/* @__PURE__ */ jsx(Select$1.ItemText, {
@@ -1701,7 +1708,7 @@ function SelectPopup({ className, children, ref, ...props }) {
 //#region src/components/select/select-title.tsx
 function SelectTitle({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("flex items-center gap-2xs style-text-default-0 text-on-surface transition-colors group-data-highlighted/item:text-neutral-on-container group-data-selected/item:text-neutral-on-default", className),
+		className: cn("flex items-center gap-2xs font-body text-base leading-none font-medium text-on-surface transition-colors group-data-highlighted/item:text-neutral-on-container group-data-selected/item:text-neutral-on-default", className),
 		ref,
 		...props
 	});
@@ -1715,9 +1722,9 @@ const selectVariants = cva("flex items-center justify-between outline outline-tr
 	},
 	variants: {
 		size: {
-			large: "h-2xl gap-xl rounded-2xl px-md style-text-default-1 [&_[data-value]]:gap-xs [&_svg]:size-md",
-			medium: "h-xl gap-lg rounded-xl px-sm style-text-default-0 [&_[data-value]]:gap-2xs [&_svg]:size-sm",
-			small: "h-lg gap-md rounded-lg px-xs style-text-default--1 [&_[data-value]]:gap-3xs [&_svg]:size-xs"
+			large: "h-2xl gap-xl rounded-2xl px-md font-body text-lg leading-none font-medium [&_[data-slot=select-icon]_svg]:size-md [&_[data-value]]:gap-xs [&_svg]:size-lg",
+			medium: "h-xl gap-lg rounded-xl px-sm font-body text-base leading-none font-medium [&_[data-slot=select-icon]_svg]:size-sm [&_[data-value]]:gap-2xs [&_svg]:size-md",
+			small: "h-lg gap-md rounded-lg px-xs font-body text-sm leading-none font-medium [&_[data-slot=select-icon]_svg]:size-xs [&_[data-value]]:gap-3xs [&_svg]:size-sm"
 		},
 		variant: {
 			ghost: "bg-transparent hover:bg-neutral-container",
@@ -1824,7 +1831,7 @@ function CalendarNextMonthButton({ onClick, disabled, ...props }) {
 		...props,
 		variant: "ghost",
 		tone: "neutral",
-		size: "iconMedium",
+		size: "medium",
 		className: cn("hover:bg-neutral-container-high hover:text-neutral-on-container"),
 		onClick,
 		disabled,
@@ -1836,7 +1843,7 @@ function CalendarPreviousMonthButton({ onClick, disabled, ...props }) {
 		...props,
 		variant: "ghost",
 		tone: "neutral",
-		size: "iconMedium",
+		size: "medium",
 		className: cn("hover:bg-neutral-container-high hover:text-neutral-on-container"),
 		onClick,
 		disabled,
@@ -2375,7 +2382,7 @@ function CodeBlockCopy({ className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsxs(Button, {
 		"aria-label": "Copy code",
 		onClick: handleClick,
-		size: "iconMedium",
+		size: "medium",
 		variant: "ghost",
 		tone: "neutral",
 		className: cn("", className),
@@ -2416,7 +2423,7 @@ function CodeBlockDownload({ className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsxs(Button, {
 		"aria-label": "Download file",
 		onClick: handleClick,
-		size: "iconMedium",
+		size: "medium",
 		variant: "ghost",
 		tone: "neutral",
 		className: cn("", className),
@@ -2439,7 +2446,7 @@ function CodeBlockHeader({ className, ref, ...props }) {
 function CodeBlockName({ className, children, ref, ...props }) {
 	const { currentValue } = useCodeBlock();
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex items-center justify-center gap-2xs px-xs style-text-strong-0 text-on-surface-variant [&>svg]:size-sm", className),
+		className: cn("flex items-center justify-center gap-2xs px-xs font-heading text-base leading-none font-bold text-on-surface-variant [&>svg]:size-md", className),
 		ref,
 		...props,
 		children: [
@@ -3838,7 +3845,7 @@ function ComboboxChip({ className, children, ref, ...props }) {
 				onClick: () => innerProps.onClick,
 				variant: "ghost",
 				tone: "error",
-				size: "iconExtraSmall",
+				size: "extraSmall",
 				children: /* @__PURE__ */ jsx(XIcon, {
 					className: "size-sm",
 					weight: "bold"
@@ -3931,7 +3938,7 @@ function ComboboxInput({ inline = false, variant, size = "medium", className, ch
 					render: ({ onClick }) => /* @__PURE__ */ jsx(Button, {
 						"aria-label": "Clear selection",
 						onClick,
-						size: "iconExtraSmall",
+						size: "extraSmall",
 						variant: "ghost",
 						tone: "error",
 						children: /* @__PURE__ */ jsx(XIcon, { weight: "bold" })
@@ -3941,7 +3948,7 @@ function ComboboxInput({ inline = false, variant, size = "medium", className, ch
 					render: ({ onClick }, state) => /* @__PURE__ */ jsx(Button, {
 						"aria-label": "Open popup",
 						onClick,
-						size: "iconExtraSmall",
+						size: "extraSmall",
 						variant: getTriggerVariant(state.open),
 						tone: "brand",
 						children: /* @__PURE__ */ jsx(CaretDownIcon, { weight: "bold" })
@@ -4312,7 +4319,7 @@ function DialogClose({ className, ref, ...props }) {
 		render: /* @__PURE__ */ jsx(Button, {
 			"aria-label": "Close",
 			variant: "ghost",
-			size: "iconExtraSmall",
+			size: "extraSmall",
 			tone: "error",
 			children: /* @__PURE__ */ jsx(XIcon, { weight: "bold" })
 		})
@@ -5324,7 +5331,7 @@ function Input({ fileUploadButtonIcon = defaultFileUploadButtonIcon, fileUploadB
 				]
 			}), /* @__PURE__ */ jsx(Button, {
 				"aria-label": clearFilesLabel,
-				size: "iconMedium",
+				size: "medium",
 				variant: "ghost",
 				tone: "error",
 				onClick: clearFiles,
@@ -5778,12 +5785,9 @@ const toggleVariants = cva("flex items-center justify-center rounded-full text-o
 	},
 	variants: {
 		size: {
-			iconLarge: "size-xl [&>svg]:size-md",
-			iconMedium: "size-lg [&>svg]:size-sm",
-			iconSmall: "size-md [&>svg]:size-xs",
-			large: "h-xl gap-xs px-sm style-text-default-0 [&>svg]:size-md",
-			medium: "h-lg gap-2xs px-xs style-text-default--1 [&>svg]:size-sm",
-			small: "h-md gap-3xs px-2xs style-text-default--2 [&>svg]:size-xs"
+			large: "h-2xl gap-xs px-sm font-body text-base leading-none font-medium [&:where([data-icon-only]:has(>svg:only-child))]:size-2xl [&:where([data-icon-only]:has(>svg:only-child))]:p-0 [&>svg]:size-lg",
+			medium: "h-xl gap-2xs px-xs font-body text-sm leading-none font-medium [&:where([data-icon-only]:has(>svg:only-child))]:size-xl [&:where([data-icon-only]:has(>svg:only-child))]:p-0 [&>svg]:size-md",
+			small: "h-lg gap-3xs px-2xs font-body text-xs leading-none font-medium [&:where([data-icon-only]:has(>svg:only-child))]:size-lg [&:where([data-icon-only]:has(>svg:only-child))]:p-0 [&>svg]:size-sm"
 		},
 		tone: {
 			accent: "hover:not-disabled:bg-accent-container hover:not-disabled:text-accent-on-container data-pressed:text-accent-default",
@@ -5798,21 +5802,31 @@ const toggleVariants = cva("flex items-center justify-center rounded-full text-o
 });
 //#endregion
 //#region src/components/toggle/toggle.tsx
+function getContent(children, state) {
+	if (typeof children === "function") return children(state);
+	return children;
+}
 function Toggle({ size, tone, className, children, ref, ...props }) {
 	const toggleGroupContext = useContext(ToggleGroupContext), effectiveSize = size ?? toggleGroupContext?.size ?? "medium";
 	return /* @__PURE__ */ jsx(Toggle$2, {
 		ref,
 		...props,
-		render: (innerProps, state) => /* @__PURE__ */ jsxs("button", {
-			...innerProps,
-			className: cn(toggleVariants({
-				className,
-				size: effectiveSize,
-				tone
-			})),
-			type: "button",
-			children: [typeof children === "function" && children(state), typeof children !== "function" && children]
-		})
+		render: (innerProps, state) => {
+			const content = getContent(children, state);
+			let iconOnly = void 0;
+			if (hasSingleElementChild(content)) iconOnly = "";
+			return /* @__PURE__ */ jsx("button", {
+				...innerProps,
+				"data-icon-only": iconOnly,
+				className: cn(toggleVariants({
+					className,
+					size: effectiveSize,
+					tone
+				})),
+				type: "button",
+				children: content
+			});
+		}
 	});
 }
 //#endregion
@@ -6143,7 +6157,7 @@ const InputOTP = Object.assign(InputOTP$1, {
 //#region src/components/kbd/kbd.tsx
 function Kbd$1({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("inline-flex h-md items-center justify-center rounded-full bg-neutral-container-high px-2xs align-middle style-text-default--1 whitespace-nowrap text-neutral-on-container select-none has-[svg]:size-md has-[svg]:p-0 [&>svg]:size-sm", className),
+		className: cn("inline-flex h-md items-center justify-center rounded-full bg-neutral-container-high px-2xs align-middle style-text-default--2 whitespace-nowrap text-neutral-on-container select-none has-[svg]:size-md has-[svg]:p-0 [&>svg]:size-sm", className),
 		ref,
 		...props
 	});
@@ -6418,7 +6432,7 @@ function LayerTree({ onDNDStart: onDragStart, onDNDEnd: onDragEnd, className, ch
 					className: cn("relative rounded-md border border-neutral-border bg-neutral-container px-xs py-3xs opacity-80 shadow-md transition-opacity"),
 					children: [table.getRow(String(source.id)).renderValue("name") ?? source.id, /* @__PURE__ */ jsx(Badge, {
 						className: "absolute -top-xs -right-xs",
-						size: "iconSmall",
+						size: "small",
 						tone: "neutral",
 						children: table.getRow(String(source.id))?.subRows.length + PARENT_ROW_COUNT
 					})]
@@ -6512,7 +6526,7 @@ function LayerTreeExpandAll({ className, ref, ...props }) {
 		selector: (state) => state.expanded,
 		children: () => /* @__PURE__ */ jsxs(Button, {
 			"aria-label": "Expand or collapse all layers",
-			size: "iconMedium",
+			size: "medium",
 			tone: "neutral",
 			variant: "ghost",
 			onClick: handleClick,
@@ -6565,7 +6579,7 @@ function LayerTreeLockedAll({ className, children, ref, ...props }) {
 			const isLocked = allRows.some((leafRow) => leafRow.getIsLocked());
 			return /* @__PURE__ */ jsxs(Button, {
 				"aria-label": "Toggle all layers lock",
-				size: "iconSmall",
+				size: "small",
 				tone: "neutral",
 				variant: "ghost",
 				onClick: () => handleClick(isLocked),
@@ -6595,7 +6609,7 @@ function LayerTreeLockedCell({ className, children, ref, ...props }) {
 			const isLocked = rows.every((leafRow) => leafRow.getIsLocked());
 			return /* @__PURE__ */ jsxs(Button, {
 				"aria-label": "Toggle layer lock",
-				size: "iconSmall",
+				size: "small",
 				tone: "neutral",
 				variant: "ghost",
 				onClick: () => handleClick(isLocked),
@@ -6864,7 +6878,7 @@ function LayerTreeSort({ className, children, ref, ...props }) {
 		children: /* @__PURE__ */ jsx(Button, {
 			"aria-label": "Sort layers",
 			variant: "ghost",
-			size: "iconMedium",
+			size: "medium",
 			tone: "neutral",
 			children: /* @__PURE__ */ jsx(ArrowsDownUpIcon, { weight: "bold" })
 		})
@@ -6969,7 +6983,7 @@ function LayerTreeVisibilityAll({ className, children, ref, ...props }) {
 			const isVisible = allRows.some((leafRow) => leafRow.getIsVisible());
 			return /* @__PURE__ */ jsxs(Button, {
 				"aria-label": "Toggle all layers visibility",
-				size: "iconSmall",
+				size: "small",
 				tone: "neutral",
 				variant: "ghost",
 				onClick: () => handleClick(isVisible),
@@ -6999,7 +7013,7 @@ function LayerTreeVisibilityCell({ className, children, ref, ...props }) {
 			const isVisible = rows.some((leafRow) => leafRow.getIsVisible());
 			return /* @__PURE__ */ jsxs(Button, {
 				"aria-label": "Toggle layer visibility",
-				size: "iconSmall",
+				size: "small",
 				tone: "neutral",
 				variant: "ghost",
 				onClick: () => handleClick(isVisible),
@@ -7361,13 +7375,6 @@ function NumberField({ size, variant, children, label, disableInput: disabledInp
 		const [nextValue] = args;
 		if (typeof value !== "number" && value !== null) setUncontrolledValue(nextValue ?? void 0);
 		onValueChange?.(...args);
-	}, getButtonSize = () => {
-		switch (size) {
-			case "small": return "iconSmall";
-			case "medium": return "iconMedium";
-			case "large": return "iconLarge";
-			default: return "iconMedium";
-		}
 	};
 	return /* @__PURE__ */ jsxs(NumberField$1.Root, {
 		className: cn(numberFieldVariants({
@@ -7399,7 +7406,7 @@ function NumberField({ size, variant, children, label, disableInput: disabledInp
 					...stepperProps,
 					tone: "error",
 					variant: "ghost",
-					size: getButtonSize(),
+					size: size ?? "medium",
 					className: "shrink-0 rounded-r-none",
 					children: /* @__PURE__ */ jsx(MinusIcon, { weight: "bold" })
 				}) }),
@@ -7416,7 +7423,7 @@ function NumberField({ size, variant, children, label, disableInput: disabledInp
 					...stepperProps,
 					tone: "success",
 					variant: "ghost",
-					size: getButtonSize(),
+					size: size ?? "medium",
 					className: "shrink-0 rounded-l-none",
 					children: /* @__PURE__ */ jsx(PlusIcon, { weight: "bold" })
 				}) })
@@ -8087,7 +8094,7 @@ function SidebarToggle({ className, children, ref, ...props }) {
 		"aria-label": "Toggle sidebar",
 		className: cn("shrink-0 border-none", className),
 		ref,
-		size: "iconMedium",
+		size: "medium",
 		variant: "ghost",
 		onClick: handleClick,
 		...props,
@@ -9302,7 +9309,7 @@ function TableFirstPage({ className, children, ref, ...props }) {
 		ref,
 		variant: "outline",
 		tone: "neutral",
-		size: "iconMedium",
+		size: "medium",
 		...props,
 		children: [children, /* @__PURE__ */ jsx(CaretLineLeftIcon, { weight: "bold" })]
 	});
@@ -9394,7 +9401,7 @@ function TableLastPage({ className, children, ref, ...props }) {
 		ref,
 		variant: "outline",
 		tone: "neutral",
-		size: "iconMedium",
+		size: "medium",
 		...props,
 		children: [children, /* @__PURE__ */ jsx(CaretLineRightIcon, { weight: "bold" })]
 	});
@@ -9434,7 +9441,7 @@ function TableNextPage({ className, children, ref, ...props }) {
 		disabled: !table.getCanNextPage(),
 		onClick: handleClick,
 		ref,
-		size: "iconMedium",
+		size: "medium",
 		variant: "outline",
 		tone: "neutral",
 		...props,
@@ -9516,7 +9523,7 @@ function TablePaging({ min = DEFAULT_VISIBLE_START_PAGES, max = DEFAULT_VISIBLE_
 					totalPages > min + max && /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, { children: /* @__PURE__ */ jsx(Button, {
 						"aria-label": "Show more pages",
 						tone: "neutral",
-						size: "iconMedium",
+						size: "medium",
 						variant: "outline",
 						className: "shrink-0",
 						children: /* @__PURE__ */ jsx(DotsThreeIcon, { weight: "bold" })
@@ -9573,7 +9580,7 @@ function TablePreviousPage({ className, children, ref, ...props }) {
 		ref,
 		variant: "outline",
 		tone: "neutral",
-		size: "iconMedium",
+		size: "medium",
 		...props,
 		children: [children, /* @__PURE__ */ jsx(CaretLeftIcon, { weight: "bold" })]
 	});
@@ -10102,17 +10109,17 @@ const Toast = Object.assign(ToastProvider, {
 const toggleGroupVariants = cva("group flex w-fit items-center justify-center gap-3xs rounded-full", {
 	compoundVariants: [
 		{
-			className: "h-lg px-3xs",
+			className: "p-3xs",
 			size: "small",
 			variant: "default"
 		},
 		{
-			className: "h-xl px-2xs",
+			className: "p-2xs",
 			size: "medium",
 			variant: "default"
 		},
 		{
-			className: "h-2xl px-xs",
+			className: "p-2xs",
 			size: "large",
 			variant: "default"
 		}