@viraui/react 0.0.16 → 0.0.18

package/dist/components/button/button.d.ts

@@ -1,8 +1,7 @@
 import { Button as PrimitiveButton } from '@base-ui/react/button';
+import { ReactNode } from 'react';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import * as React from 'react';
-import './button.css';
-import type { ReactNode } from 'react';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
 /**
  * Public Button props.
  *

package/dist/components/button/button.js

@@ -1,62 +1,107 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button as PrimitiveButton } from '@base-ui/react/button';
-import { useRender } from '@base-ui/react/use-render';
-import { Spinner } from '../../components/spinner/index.js';
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
-import { clsx } from 'clsx';
-import * as React from 'react';
+"use client";
 import './button.css';
-const spinnerDimensionsBySize = {
-    small: 'small',
-    medium: 'small',
-    big: 'regular',
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Spinner } from "../spinner/spinner.js";
+import button_module_default from "./button.module.js";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import * as React from "react";
+import { Button } from "@base-ui/react/button";
+//#region src/components/button/button.tsx
+var spinnerDimensionsBySize = {
+	small: "small",
+	medium: "small",
+	big: "regular"
 };
 function usesButtonPrimitiveRender(render) {
-    return render === undefined || (React.isValidElement(render) && render.type === 'button');
+	return render === void 0 || React.isValidElement(render) && render.type === "button";
 }
-const ButtonRenderRoot = ({ isDisabled, ref, render, rootProps }) => {
-    const { onClick, ...restRootProps } = rootProps;
-    return useRender({
-        defaultTagName: 'button',
-        render,
-        ref,
-        state: { disabled: isDisabled },
-        props: {
-            ...restRootProps,
-            onClick: (event) => {
-                if (isDisabled) {
-                    event.preventDefault();
-                    return;
-                }
-                onClick?.(event);
-            },
-            ...(isDisabled ? { 'aria-disabled': true } : {}),
-        },
-    });
+var ButtonRenderRoot = ({ isDisabled, ref, render, rootProps }) => {
+	const { onClick, ...restRootProps } = rootProps;
+	return useRender({
+		defaultTagName: "button",
+		render,
+		ref,
+		state: { disabled: isDisabled },
+		props: {
+			...restRootProps,
+			onClick: (event) => {
+				if (isDisabled) {
+					event.preventDefault();
+					return;
+				}
+				onClick?.(event);
+			},
+			...isDisabled ? { "aria-disabled": true } : {}
+		}
+	});
 };
-const ButtonRoot = ({ children, className, intrinsicAttributes, isDisabled, isIconOnly, icon, iconPosition, loading, passThroughProps, ref, render, size, variant, }) => {
-    const rootProps = {
-        ...passThroughProps,
-        ...intrinsicAttributes,
-        'aria-busy': loading || undefined,
-        children,
-        className: clsx('Button', className),
-        'data-loading': loading ? 'true' : 'false',
-        'data-size': size,
-        'data-icon-only': isIconOnly ? 'true' : undefined,
-        'data-icon-position': icon && !isIconOnly ? iconPosition : undefined,
-        'data-variant': variant,
-    };
-    if (usesButtonPrimitiveRender(render)) {
-        return (_jsx(PrimitiveButton, { ...rootProps, render: render, ref: ref, disabled: isDisabled, focusableWhenDisabled: loading }));
-    }
-    return (_jsx(ButtonRenderRoot, { isDisabled: isDisabled, ref: ref, render: render, rootProps: rootProps }));
+var ButtonRoot = ({ children, className, intrinsicAttributes, isDisabled, isIconOnly, icon, iconPosition, loading, passThroughProps, ref, render, size, variant }) => {
+	const rootProps = {
+		...passThroughProps,
+		...intrinsicAttributes,
+		"aria-busy": loading || void 0,
+		children,
+		className: clsx(button_module_default.Button, className),
+		"data-loading": loading ? "true" : "false",
+		"data-size": size,
+		"data-icon-only": isIconOnly ? "true" : void 0,
+		"data-icon-position": icon && !isIconOnly ? iconPosition : void 0,
+		"data-variant": variant
+	};
+	if (usesButtonPrimitiveRender(render)) return /* @__PURE__ */ jsx(Button, {
+		...rootProps,
+		render,
+		ref,
+		disabled: isDisabled,
+		focusableWhenDisabled: loading
+	});
+	return /* @__PURE__ */ jsx(ButtonRenderRoot, {
+		isDisabled,
+		ref,
+		render,
+		rootProps
+	});
 };
-export const Button = ({ children, className, disabled, icon, iconPosition = 'start', loading = false, size = 'medium', variant = 'primary', ...otherProps }) => {
-    const isDisabled = disabled || loading;
-    const isIconOnly = Boolean(icon) && (children == null || children === '');
-    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
-    const { render, ref, ...passThroughProps } = componentProps;
-    return (_jsxs(ButtonRoot, { className: className, intrinsicAttributes: intrinsicAttributes, isDisabled: isDisabled, isIconOnly: isIconOnly, icon: icon, iconPosition: iconPosition, loading: loading, passThroughProps: passThroughProps, ref: ref, render: render, size: size, variant: variant, children: [isIconOnly ? (_jsx("span", { "aria-hidden": "true", className: "Content", "data-loading": loading ? 'true' : 'false', children: icon })) : (_jsxs(_Fragment, { children: [icon && (_jsx("span", { "aria-hidden": "true", className: "Content", "data-loading": loading ? 'true' : 'false', children: icon })), _jsx("span", { className: "Content", "data-loading": loading ? 'true' : 'false', children: children })] })), loading ? (_jsx("span", { "aria-hidden": "true", className: "SpinnerOverlay", children: _jsx(Spinner, { size: spinnerDimensionsBySize[size] }) })) : null] }));
+var Button$1 = ({ children, className, disabled, icon, iconPosition = "start", loading = false, size = "medium", variant = "primary", ...otherProps }) => {
+	const isDisabled = disabled || loading;
+	const isIconOnly = Boolean(icon) && (children == null || children === "");
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const { render, ref, ...passThroughProps } = componentProps;
+	return /* @__PURE__ */ jsxs(ButtonRoot, {
+		className,
+		intrinsicAttributes,
+		isDisabled,
+		isIconOnly,
+		icon,
+		iconPosition,
+		loading,
+		passThroughProps,
+		ref,
+		render,
+		size,
+		variant,
+		children: [isIconOnly ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: button_module_default.Content,
+			"data-loading": loading ? "true" : "false",
+			children: icon
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [icon && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: button_module_default.Content,
+			"data-loading": loading ? "true" : "false",
+			children: icon
+		}), /* @__PURE__ */ jsx("span", {
+			className: button_module_default.Content,
+			"data-loading": loading ? "true" : "false",
+			children
+		})] }), loading ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: button_module_default.SpinnerOverlay,
+			children: /* @__PURE__ */ jsx(Spinner, { size: spinnerDimensionsBySize[size] })
+		}) : null]
+	});
 };
+//#endregion
+export { Button$1 as Button };

package/dist/components/button/button.module.js

@@ -0,0 +1,7 @@
+var button_module_default = {
+	Button: "button-module_Button_oPhrP",
+	Content: "button-module_Content_w-pX-",
+	SpinnerOverlay: "button-module_SpinnerOverlay_vKqw1"
+};
+//#endregion
+export { button_module_default as default };

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

@@ -1,2 +1,2 @@
-export { Button } from './button.js';
-export type { ButtonProps } from './button.js';
+export { Button } from './button';
+export type { ButtonProps } from './button';

package/dist/components/checkbox/checkbox.css

@@ -0,0 +1 @@
+.checkbox-module_Checkbox_3oGip{--checkbox-size:var(--space-medium);--checkbox-radius:var(--radius-x-small);--checkbox-background:var(--global-contrast);--checkbox-border-color:transparent;--checkbox-indicator-color:contrast-color(var(--global-primary));&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.checkbox-module_CheckboxRoot_PeyF5{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--checkbox-border-color);inline-size:var(--checkbox-size);block-size:var(--checkbox-size);background:var(--checkbox-background);border-radius:var(--checkbox-radius);&[data-size=regular]{--checkbox-size:var(--space-large);--checkbox-radius:var(--radius-small)}&[data-checked]:not([data-disabled]):not([data-invalid]),&[data-indeterminate]:not([data-disabled]):not([data-invalid]){--checkbox-background:var(--global-primary);--checkbox-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),.checkbox-module_Checkbox_3oGip[data-invalid]>&:not([data-disabled]){--checkbox-border-color:var(--highlight-red);--checkbox-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],.checkbox-module_Checkbox_3oGip[data-disabled]>&{--checkbox-background:var(--global-disabled-background);--checkbox-border-color:transparent;--checkbox-indicator-color:var(--global-disabled-foreground);box-shadow:none}}.checkbox-module_Indicator_C-k-l{display:inline-flex;align-items:center;justify-content:center;color:var(--checkbox-indicator-color)}.checkbox-module_Icon_926Sa{stroke:currentColor}.checkbox-module_CheckboxRoot_PeyF5:not([data-indeterminate]) .checkbox-module_MinusIcon_Q57pY,.checkbox-module_CheckboxRoot_PeyF5[data-indeterminate] .checkbox-module_CheckIcon_XqUcs{display:none}.checkbox-module_CheckboxRoot_PeyF5[data-indeterminate] .checkbox-module_MinusIcon_Q57pY{display:inline-flex}

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,65 @@
+import { CheckboxRoot, FieldRoot } from '@base-ui/react';
+import { StackProps } from '..';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import type * as React from 'react';
+/**
+ * Public Checkbox props.
+ *
+ * Includes Base UI checkbox props such as `checked`, `defaultChecked`, `indeterminate`,
+ * `disabled`, and change handlers, plus optional field copy rendered with the shared Vira
+ * field label/helper pattern.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type CheckboxProps = CheckboxRoot.Props & Omit<FieldRoot.Props, 'ref'> & {
+    /**
+     * Adds `data-grow="false"` to the field root when false.
+     *
+     * @default The field root does not render a grow attribute.
+     */
+    grow?: IntrinsicViraProps['grow'];
+    /**
+     * Adds `data-shrink="false"` to the field root when false.
+     *
+     * @default The field root does not render a shrink attribute.
+     */
+    shrink?: IntrinsicViraProps['shrink'];
+    /**
+     * Visible label rendered with shared internal `FieldLabel`.
+     *
+     * @default No label is rendered.
+     */
+    label?: React.ReactNode;
+    /**
+     * Helper copy rendered with `Field.Description` and `Text` while the field is valid.
+     *
+     * @default No description is rendered.
+     */
+    description?: React.ReactNode;
+    /**
+     * Error copy rendered with `Field.Error` and `Text` in the same slot as `description`.
+     * Replaces description while the field is invalid.
+     *
+     * @default No static error copy is rendered.
+     */
+    error?: React.ReactNode;
+    /**
+     * Controls the visual checkbox size.
+     *
+     * @default 'small'
+     */
+    size?: 'regular' | 'small';
+    /**
+     * Sets block padding using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No block padding.
+     */
+    vPadding?: StackProps['vPadding'];
+    /**
+     * Sets inline padding using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No inline padding.
+     */
+    hPadding?: StackProps['hPadding'];
+};
+export declare const Checkbox: React.FC<CheckboxProps>;

package/dist/components/checkbox/checkbox.guide.json

@@ -0,0 +1,22 @@
+{
+  "name": "Checkbox",
+  "summary": "Field-wrapped checkbox control with optional field copy.",
+  "whenToUse": [
+    "Single or multi-select boolean choices with optional label and helper text",
+    "Invalid and disabled states with Switch-parity focus treatment"
+  ],
+  "whenNotToUse": [
+    "Unlabeled checkbox without aria-label on the root",
+    "Mutually exclusive options in a set (use radio pattern instead)"
+  ],
+  "accessibility": [
+    "Provide visible label or aria-label so the checkbox has an accessible name",
+    "Checked and indeterminate states must map to native checkbox semantics exposed by the control",
+    "Surface invalid state and error copy through the shared field pattern"
+  ],
+  "antiPatterns": [
+    "Rendering a checkbox without label and without aria-label",
+    "Expecting description to stay visible when invalid without an error message"
+  ],
+  "related": ["Switch", "Stack", "Text"]
+}

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,76 @@
+"use client";
+import './checkbox.css';
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
+import { FieldLabel } from "../basic-input/field-label.js";
+import { Stack } from "../stack/stack.js";
+import checkbox_module_default from "./checkbox.module.js";
+import { Icon } from "../icon/icon.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox, Field } from "@base-ui/react";
+//#region src/components/checkbox/checkbox.tsx
+var Checkbox$1 = ({ className, description, dirty, disabled, error, invalid, label, name, ref, size = "small", vPadding, hPadding, touched, validate, validationDebounceTime, validationMode, ...checkboxRootProps }) => {
+	const hasTextDescription = Boolean(description || error);
+	const iconSize = size === "small" ? 12 : 16;
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(checkboxRootProps);
+	return /* @__PURE__ */ jsx(Field.Root, {
+		...intrinsicAttributes,
+		className: checkbox_module_default.Checkbox,
+		dirty,
+		disabled,
+		invalid,
+		name,
+		touched,
+		validate,
+		validationDebounceTime,
+		validationMode,
+		render: /* @__PURE__ */ jsx(Stack, {
+			direction: "row",
+			columnGap: size === "small" ? "small" : "medium",
+			fillChildren: false,
+			vAlign: hasTextDescription ? "start" : "center"
+		}),
+		children: /* @__PURE__ */ jsx(Field.Label, { children: /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			columnGap: size === "small" ? "small" : "medium",
+			fillChildren: false,
+			vAlign: hasTextDescription ? "start" : "center",
+			...hPadding !== void 0 ? { hPadding } : {},
+			...vPadding !== void 0 ? { vPadding } : {},
+			children: [/* @__PURE__ */ jsx(Checkbox.Root, {
+				...componentProps,
+				className: clsx(checkbox_module_default.CheckboxRoot, className),
+				"data-size": size,
+				disabled,
+				name,
+				ref,
+				children: /* @__PURE__ */ jsxs(Checkbox.Indicator, {
+					className: checkbox_module_default.Indicator,
+					children: [/* @__PURE__ */ jsx(Icon, {
+						className: clsx(checkbox_module_default.Icon, checkbox_module_default.CheckIcon),
+						name: "Check",
+						size: iconSize
+					}), /* @__PURE__ */ jsx(Icon, {
+						className: clsx(checkbox_module_default.Icon, checkbox_module_default.MinusIcon),
+						name: "Minus",
+						size: iconSize
+					})]
+				})
+			}), label || description || error ? /* @__PURE__ */ jsxs(Stack, {
+				direction: "column",
+				fillChildren: false,
+				rowGap: size === "small" ? "2x-small" : "x-small",
+				children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+					size: size === "small" ? "small" : "medium",
+					children: label
+				}), /* @__PURE__ */ jsx(FieldHelperCopy, {
+					description,
+					error
+				})]
+			}) : null]
+		}) })
+	});
+};
+//#endregion
+export { Checkbox$1 as Checkbox };

package/dist/components/checkbox/checkbox.module.js

@@ -0,0 +1,10 @@
+var checkbox_module_default = {
+	Checkbox: "checkbox-module_Checkbox_3oGip",
+	CheckboxRoot: "checkbox-module_CheckboxRoot_PeyF5",
+	Indicator: "checkbox-module_Indicator_C-k-l",
+	Icon: "checkbox-module_Icon_926Sa",
+	MinusIcon: "checkbox-module_MinusIcon_Q57pY",
+	CheckIcon: "checkbox-module_CheckIcon_XqUcs"
+};
+//#endregion
+export { checkbox_module_default as default };

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

@@ -0,0 +1,2 @@
+export { Checkbox } from './checkbox';
+export type { CheckboxProps } from './checkbox';

package/dist/components/clamp-text/clamp-text.css

@@ -1,12 +1 @@
-@scope (.ClampText) {
-  :scope {
-    display: -webkit-box;
-    -webkit-line-clamp: var(--clamp-text-rows, 1);
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-
-    &[data-clamp-text-inline='true'] {
-      display: -webkit-inline-box;
-    }
-  }
-}
+.clamp-text-module_ClampText_Whnkd{display:-webkit-box;-webkit-line-clamp:var(--clamp-text-rows,1);-webkit-box-orient:vertical;overflow:hidden;&[data-clamp-text-inline=true]{display:-webkit-inline-box}}

package/dist/components/clamp-text/clamp-text.d.ts

@@ -1,7 +1,6 @@
 import { useRender } from '@base-ui/react/use-render';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
-import './clamp-text.css';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
 /**
  * Public ClampText props.
  *

package/dist/components/clamp-text/clamp-text.js

@@ -1,24 +1,29 @@
-'use client';
-import { useRender } from '@base-ui/react/use-render';
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
-import { clsx } from 'clsx';
-import { useMemo } from 'react';
+"use client";
 import './clamp-text.css';
-export const ClampText = ({ className, inline = false, ref, render, rows = 1, style, ...otherProps }) => {
-    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
-    const dynamicStyle = useMemo(() => ({
-        '--clamp-text-rows': rows,
-    }), [rows]);
-    return useRender({
-        defaultTagName: 'span',
-        render,
-        ref,
-        props: {
-            ...componentProps,
-            ...intrinsicAttributes,
-            'data-clamp-text-inline': inline ? 'true' : 'false',
-            className: clsx('ClampText', className),
-            style: { ...dynamicStyle, ...style },
-        },
-    });
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import clamp_text_module_default from "./clamp-text.module.js";
+import { clsx } from "clsx";
+import { useRender } from "@base-ui/react/use-render";
+import { useMemo } from "react";
+//#region src/components/clamp-text/clamp-text.tsx
+var ClampText = ({ className, inline = false, ref, render, rows = 1, style, ...otherProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const dynamicStyle = useMemo(() => ({ "--clamp-text-rows": rows }), [rows]);
+	return useRender({
+		defaultTagName: "span",
+		render,
+		ref,
+		props: {
+			...componentProps,
+			...intrinsicAttributes,
+			"data-clamp-text-inline": inline ? "true" : "false",
+			className: clsx(clamp_text_module_default.ClampText, className),
+			style: {
+				...dynamicStyle,
+				...style
+			}
+		}
+	});
 };
+//#endregion
+export { ClampText };

package/dist/components/clamp-text/clamp-text.module.js

@@ -0,0 +1,3 @@
+var clamp_text_module_default = { ClampText: "clamp-text-module_ClampText_Whnkd" };
+//#endregion
+export { clamp_text_module_default as default };

package/dist/components/clamp-text/index.d.ts

@@ -1,2 +1,2 @@
-export { ClampText } from './clamp-text.js';
-export type { ClampTextProps } from './clamp-text.js';
+export { ClampText } from './clamp-text';
+export type { ClampTextProps } from './clamp-text';

package/dist/components/elevator/elevator.d.ts

@@ -1,9 +1,9 @@
+import { ElevationDirection, ElevationLevel, ElevationShadowColor } from '../../core/elevation/elevation-types';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
-import type { ElevationDirection, ElevationLevel, ElevationShadowColor } from '../../core/elevation/elevation-types.js';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
-export type { ElevationDirection, ElevationLevel, ElevationShadowColor, } from '../../core/elevation/elevation-types.js';
-export { ELEVATION_DEFAULTS } from '../../core/elevation/elevation-types.js';
-export { getElevationProps } from '../../core/elevation/get-elevation-props.js';
+export type { ElevationDirection, ElevationLevel, ElevationShadowColor, } from '../../core/elevation/elevation-types';
+export { ELEVATION_DEFAULTS } from '../../core/elevation/elevation-types';
+export { getElevationProps } from '../../core/elevation/get-elevation-props';
 /**
  * Public Elevator props.
  *

package/dist/components/elevator/elevator.js

@@ -1,29 +1,29 @@
-import { Children, cloneElement, isValidElement } from 'react';
-import { getElevationProps } from '../../core/elevation/get-elevation-props.js';
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
-export { ELEVATION_DEFAULTS } from '../../core/elevation/elevation-types.js';
-export { getElevationProps } from '../../core/elevation/get-elevation-props.js';
-const mergeChildStyle = (childStyle, elevationStyle) => ({
-    ...(childStyle ?? {}),
-    ...elevationStyle,
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import "../../core/elevation/elevation-types.js";
+import { getElevationProps } from "../../core/elevation/get-elevation-props.js";
+import { Children, cloneElement, isValidElement } from "react";
+//#region src/components/elevator/elevator.tsx
+var mergeChildStyle = (childStyle, elevationStyle) => ({
+	...childStyle ?? {},
+	...elevationStyle
 });
-export const Elevator = ({ children, resting, hover, direction, shadowColor, extraShadow, ...otherProps }) => {
-    const { intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
-    const elevation = getElevationProps({
-        resting,
-        ...(hover !== undefined ? { hover } : {}),
-        ...(direction !== undefined ? { direction } : {}),
-        ...(shadowColor !== undefined ? { shadowColor } : {}),
-        ...(extraShadow !== undefined ? { extraShadow } : {}),
-    });
-    return Children.map(children, (child) => {
-        if (!isValidElement(child)) {
-            return child;
-        }
-        return cloneElement(child, {
-            ...intrinsicAttributes,
-            ...elevation.attributes,
-            style: mergeChildStyle(child.props.style, elevation.style),
-        });
-    });
+var Elevator = ({ children, resting, hover, direction, shadowColor, extraShadow, ...otherProps }) => {
+	const { intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const elevation = getElevationProps({
+		resting,
+		...hover !== void 0 ? { hover } : {},
+		...direction !== void 0 ? { direction } : {},
+		...shadowColor !== void 0 ? { shadowColor } : {},
+		...extraShadow !== void 0 ? { extraShadow } : {}
+	});
+	return Children.map(children, (child) => {
+		if (!isValidElement(child)) return child;
+		return cloneElement(child, {
+			...intrinsicAttributes,
+			...elevation.attributes,
+			style: mergeChildStyle(child.props.style, elevation.style)
+		});
+	});
 };
+//#endregion
+export { Elevator };

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

@@ -1,2 +1,2 @@
-export { ELEVATION_DEFAULTS, Elevator, getElevationProps } from './elevator.js';
-export type { ElevationDirection, ElevationLevel, ElevationShadowColor, ElevatorProps } from './elevator.js';
+export { ELEVATION_DEFAULTS, Elevator, getElevationProps } from './elevator';
+export type { ElevationDirection, ElevationLevel, ElevationShadowColor, ElevatorProps } from './elevator';

package/dist/components/icon/icon.css

@@ -1,7 +1 @@
-@scope (.Icon) {
-  :scope {
-    display: inline-block;
-    flex: none;
-    vertical-align: middle;
-  }
-}
+.icon-module_Icon_6DoBq{display:inline-flex;flex:none;vertical-align:middle;& [fill]{fill:currentcolor}& [fill=none][stroke]{fill:none;stroke:currentcolor}}

package/dist/components/icon/icon.d.ts

@@ -1,6 +1,5 @@
-import type { GeneratedIconName, GeneratedIconVariant } from '#internal-icons/icon-registry';
-import './icon.css';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
+import { GeneratedIconName, GeneratedIconVariant } from '../../../dist/internal-icons/icon-registry.js';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 export type IconName = GeneratedIconName;
 export type IconVariant = GeneratedIconVariant;
 export type IconProps = React.ComponentProps<'svg'> & IntrinsicViraProps & {

package/dist/components/icon/icon.js

@@ -1,11 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { generatedDefaultIconVariant, generatedIconRegistry } from '#internal-icons/icon-registry';
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
-import { clsx } from 'clsx';
 import './icon.css';
-export const Icon = ({ className, name, size = 24, variant = generatedDefaultIconVariant, ...otherProps }) => {
-    const resolvedVariant = generatedIconRegistry[variant] ? variant : generatedDefaultIconVariant;
-    const ResolvedIcon = generatedIconRegistry[resolvedVariant][name];
-    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
-    return (_jsx(ResolvedIcon, { ...componentProps, ...intrinsicAttributes, "aria-hidden": "true", className: clsx('Icon', className), size: size }));
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import icon_module_default from "./icon.module.js";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { generatedDefaultIconVariant, generatedIconRegistry } from "#internal-icons/icon-registry";
+//#region src/components/icon/icon.tsx
+var Icon = ({ className, name, size = 24, variant = generatedDefaultIconVariant, ...otherProps }) => {
+	const ResolvedIcon = generatedIconRegistry[generatedIconRegistry[variant] ? variant : generatedDefaultIconVariant][name];
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	return /* @__PURE__ */ jsx(ResolvedIcon, {
+		...componentProps,
+		...intrinsicAttributes,
+		"aria-hidden": "true",
+		className: clsx(icon_module_default.Icon, className),
+		size
+	});
 };
+//#endregion
+export { Icon };

package/dist/components/icon/icon.module.js

@@ -0,0 +1,3 @@
+var icon_module_default = { Icon: "icon-module_Icon_6DoBq" };
+//#endregion
+export { icon_module_default as default };

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

@@ -1,2 +1,2 @@
-export { Icon } from './icon.js';
-export type { IconProps } from './icon.js';
+export { Icon } from './icon';
+export type { IconName, IconProps, IconVariant } from './icon';

package/dist/components/icon-button/icon-button.d.ts

@@ -1,5 +1,5 @@
-import type { ButtonProps } from '../index.js';
-import type { ReactNode } from 'react';
+import { ButtonProps } from '..';
+import { ReactNode } from 'react';
 type AccessibleNameProps = {
     'aria-label': string;
     'aria-labelledby'?: never;

package/dist/components/icon-button/icon-button.js

@@ -1,3 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from '../../components/button/button.js';
-export const IconButton = ({ icon, size = 'medium', ...props }) => (_jsx(Button, { icon: icon, size: size, ...props }));
+import { Button } from "../button/button.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/icon-button/icon-button.tsx
+var IconButton = ({ icon, size = "medium", ...props }) => /* @__PURE__ */ jsx(Button, {
+	icon,
+	size,
+	...props
+});
+//#endregion
+export { IconButton };