@viraui/react 0.0.22 → 0.0.24

package/dist/components/tabs/tabs-list.d.ts

@@ -0,0 +1,12 @@
+import { TabsList as TabsListPrimitive } from '@base-ui/react/tabs';
+import type * as React from 'react';
+/**
+ * Public Tabs.List props.
+ *
+ * Wraps Base UI `Tabs.List` in a compact `Surface`, lays out items with `Stack`,
+ * and renders the active tab indicator internally.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type TabsListProps = TabsListPrimitive.Props;
+export declare const TabsList: React.FC<TabsListProps>;

package/dist/components/tabs/tabs-list.js

@@ -0,0 +1,29 @@
+import { clsx } from "../../core/clsx.js";
+import { Stack } from "../stack/stack.js";
+import { Surface } from "../surface/surface.js";
+import tabs_module_default from "./tabs.module.js";
+import { TabsIndicator } from "./tabs-indicator.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/tabs/tabs-list.tsx
+var TabsList = ({ children, className, activateOnFocus = true, ref, ...props }) => /* @__PURE__ */ jsx(Tabs.List, {
+	className: clsx(tabs_module_default.List, className),
+	activateOnFocus,
+	render: /* @__PURE__ */ jsx(Surface, {
+		color: 1,
+		border: "all",
+		hPadding: "2x-small",
+		radius: "medium",
+		vPadding: "2x-small"
+	}),
+	...props,
+	children: /* @__PURE__ */ jsxs(Stack, {
+		direction: "row",
+		columnGap: "small",
+		hAlign: "start",
+		vAlign: "center",
+		children: [/* @__PURE__ */ jsx(TabsIndicator, {}), children]
+	})
+});
+//#endregion
+export { TabsList };

package/dist/components/tabs/tabs-panel.d.ts

@@ -0,0 +1,11 @@
+import { TabsPanel as TabsPanelPrimitive } from '@base-ui/react/tabs';
+import type * as React from 'react';
+/**
+ * Public Tabs.Panel props.
+ *
+ * Base UI `Tabs.Panel` with entry slide/fade animation.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type TabsPanelProps = TabsPanelPrimitive.Props;
+export declare const TabsPanel: React.FC<TabsPanelProps>;

package/dist/components/tabs/tabs-panel.js

@@ -0,0 +1,13 @@
+import { clsx } from "../../core/clsx.js";
+import tabs_module_default from "./tabs.module.js";
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/tabs/tabs-panel.tsx
+var TabsPanel = ({ children, className, ref, ...props }) => /* @__PURE__ */ jsx(Tabs.Panel, {
+	ref,
+	className: clsx(tabs_module_default.Panel, className),
+	...props,
+	children
+});
+//#endregion
+export { TabsPanel };

package/dist/components/tabs/tabs-tab.d.ts

@@ -0,0 +1,24 @@
+import { TabsTab as TabsTabPrimitive } from '@base-ui/react/tabs';
+import type * as React from 'react';
+/**
+ * Public Tabs.Tab props.
+ *
+ * Wraps Base UI `Tabs.Tab` with optional decorative addon layout.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type TabsTabProps = TabsTabPrimitive.Props & {
+    /**
+     * Decorative addon rendered alongside the tab label.
+     *
+     * @default No addon is rendered.
+     */
+    addon?: React.ReactNode;
+    /**
+     * Controls whether the addon appears before or after the label.
+     *
+     * @default 'start'
+     */
+    addonPosition?: 'start' | 'end';
+};
+export declare const TabsTab: React.FC<TabsTabProps>;

package/dist/components/tabs/tabs-tab.js

@@ -0,0 +1,24 @@
+import { clsx } from "../../core/clsx.js";
+import { Button } from "../button/button.js";
+import { Text } from "../text/text.js";
+import tabs_module_default from "./tabs.module.js";
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/tabs/tabs-tab.tsx
+var TabsTab = ({ addon, addonPosition = "start", children, className, ...props }) => /* @__PURE__ */ jsx(Tabs.Tab, {
+	render: /* @__PURE__ */ jsx(Button, {
+		variant: "flat",
+		addon,
+		addonPosition,
+		className: clsx(tabs_module_default.Item, className)
+	}),
+	...props,
+	children: /* @__PURE__ */ jsx(Text, {
+		tone: "muted",
+		whiteSpace: "nowrap",
+		className: tabs_module_default.Label,
+		children
+	})
+});
+//#endregion
+export { TabsTab };

package/dist/components/tabs/tabs-viewport.d.ts

@@ -0,0 +1,8 @@
+import type * as React from 'react';
+/**
+ * Public Tabs.Viewport props.
+ *
+ * Grid container for animated `Tabs.Panel` children.
+ */
+export type TabsViewportProps = React.ComponentPropsWithoutRef<'div'>;
+export declare const TabsViewport: React.FC<TabsViewportProps>;

package/dist/components/tabs/tabs-viewport.js

@@ -0,0 +1,11 @@
+import { clsx } from "../../core/clsx.js";
+import tabs_module_default from "./tabs.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/tabs/tabs-viewport.tsx
+var TabsViewport = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: clsx(tabs_module_default.Viewport, className),
+	...props,
+	children
+});
+//#endregion
+export { TabsViewport };

package/dist/components/tabs/tabs.css

@@ -0,0 +1 @@
+.viraui__tabs-module__Tabs_AwbZZ{--tabs-translate-amount:10px;min-block-size:10rem}.viraui__tabs-module__Viewport_15X1I{display:grid;grid-template-columns:minmax(0,1fr);inline-size:100%}.viraui__tabs-module__List_XJorr{position:relative;overflow-x:auto}.viraui__tabs-module__Indicator_UyNUn{position:absolute;pointer-events:none;inset-block-start:var(--active-tab-top);inset-inline-start:var(--active-tab-left);inline-size:var(--active-tab-width);block-size:var(--active-tab-height);transition:inset-inline-start var(--duration-fast) var(--easing-standard),inset-block-start var(--duration-fast) var(--easing-standard),inline-size var(--duration-fast) var(--easing-standard),block-size var(--duration-fast) var(--easing-standard)}.viraui__tabs-module__Item_XZ86Z{position:relative;flex-shrink:0;cursor:pointer;flex-basis:0;transition:none;will-change:auto;&[data-variant]:not(:disabled):active{translate:0 0}&:hover,&[data-disabled]{background:transparent}&[data-disabled]{opacity:.5}&[data-active]{color:var(--global-foreground)}&:focus-visible{border-radius:var(--radius-small);outline-offset:0}}.viraui__tabs-module__Item_XZ86Z[data-active] .viraui__tabs-module__Label_5-8-Y{color:var(--global-foreground)}.viraui__tabs-module__Panel_vkCFI{grid-area:1/1;inline-size:100%;opacity:1;translate:0 0;transition:opacity var(--duration-fast) var(--easing-entrance),translate var(--duration-fast) var(--easing-entrance);&[data-ending-style]{pointer-events:none}&[data-ending-style],&[data-starting-style]{opacity:0}&[data-activation-direction=right][data-starting-style]{translate:var(--tabs-translate-amount) 0}&[data-activation-direction=left][data-starting-style],&[data-activation-direction=right][data-ending-style]{translate:calc(var(--tabs-translate-amount) * -1) 0}&[data-activation-direction=left][data-ending-style]{translate:var(--tabs-translate-amount) 0}&[data-activation-direction=none][data-ending-style],&[data-activation-direction=none][data-starting-style]{translate:0 var(--tabs-translate-amount)}&[hidden]{display:none}@media (prefers-reduced-motion:reduce){transition:none;&[data-ending-style],&[data-starting-style]{opacity:1;translate:0 0}}}

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,31 @@
+import { TabsRoot } from '@base-ui/react/tabs';
+import { StackProps } from '..';
+import { TabsListProps } from './tabs-list';
+import { TabsPanelProps } from './tabs-panel';
+import { TabsTabProps } from './tabs-tab';
+import { TabsViewportProps } from './tabs-viewport';
+import * as React from 'react';
+/**
+ * Public Tabs root props.
+ *
+ * Includes Base UI tabs root props such as `value`, `defaultValue`, `orientation`,
+ * and `onValueChange`.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type TabsProps = TabsRoot.Props & {
+    /**
+     * Horizontal alignment of tab list within root Stack.
+     *
+     * @default 'start'
+     */
+    listAlignment?: Extract<StackProps['hAlign'], 'start' | 'center' | 'end' | 'stretch'>;
+};
+type TabsComponent = React.FC<TabsProps> & {
+    List: React.FC<TabsListProps>;
+    Tab: React.FC<TabsTabProps>;
+    Viewport: React.FC<TabsViewportProps>;
+    Panel: React.FC<TabsPanelProps>;
+};
+export declare const Tabs: TabsComponent;
+export {};

package/dist/components/tabs/tabs.guide.json

@@ -0,0 +1,23 @@
+{
+  "name": "Tabs",
+  "summary": "Compound segmented tab control with Surface list chrome, moving indicator, and animated panels.",
+  "whenToUse": [
+    "Switching between related views in the same surface",
+    "Compact horizontal segmented navigation",
+    "Decorative start/end addons on tab labels without changing accessible names"
+  ],
+  "whenNotToUse": [
+    "Primary app navigation that should use links or routes directly",
+    "Vertical tab layouts in v1 styled targets"
+  ],
+  "accessibility": [
+    "Keep tab labels as visible text; addons are decorative and aria-hidden",
+    "Ensure each `Tabs.Panel` value matches a `Tabs.Tab` value",
+    "Disabled items cannot be activated through pointer or keyboard"
+  ],
+  "antiPatterns": [
+    "Using addons as the only visible label for a tab",
+    "Trying to compose a separate public `Tabs.Indicator`; the indicator is owned by `Tabs.List`"
+  ],
+  "related": ["Surface", "Stack", "Text"]
+}

package/dist/components/tabs/tabs.js

@@ -0,0 +1,30 @@
+import './tabs.css';
+import { clsx } from "../../core/clsx.js";
+import { Stack } from "../stack/stack.js";
+import tabs_module_default from "./tabs.module.js";
+import { TabsList } from "./tabs-list.js";
+import { TabsPanel } from "./tabs-panel.js";
+import { TabsTab } from "./tabs-tab.js";
+import { TabsViewport } from "./tabs-viewport.js";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/tabs/tabs.tsx
+var TabsRootComponent = ({ children, className, listAlignment = "start", ...props }) => /* @__PURE__ */ jsx(Tabs.Root, {
+	render: /* @__PURE__ */ jsx(Stack, {
+		hAlign: listAlignment,
+		vAlign: "start",
+		fillChildren: false,
+		className: clsx(tabs_module_default.Tabs, className)
+	}),
+	...props,
+	children
+});
+var Tabs$1 = Object.assign(TabsRootComponent, {
+	List: TabsList,
+	Tab: TabsTab,
+	Viewport: TabsViewport,
+	Panel: TabsPanel
+});
+//#endregion
+export { Tabs$1 as Tabs };

package/dist/components/tabs/tabs.module.js

@@ -0,0 +1,11 @@
+var tabs_module_default = {
+	Tabs: "viraui__tabs-module__Tabs_AwbZZ",
+	Viewport: "viraui__tabs-module__Viewport_15X1I",
+	List: "viraui__tabs-module__List_XJorr",
+	Indicator: "viraui__tabs-module__Indicator_UyNUn",
+	Item: "viraui__tabs-module__Item_XZ86Z",
+	Label: "viraui__tabs-module__Label_5-8-Y",
+	Panel: "viraui__tabs-module__Panel_vkCFI"
+};
+//#endregion
+export { tabs_module_default as default };

package/dist/components/text/text.css

@@ -1 +1 @@
-.text-module_Text_bS8kv{--text-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--text-align:start;--text-max-width:none;--text-white-space:normal;--text-padding-inline-start:0;--text-padding-inline-end:0;--text-padding-block-start:0;--text-padding-block-end:0;--text-font-family:var(--font-family-body);--text-font-size:clamp(var(--font-scale-body-small),var(--text-medium),var(--font-scale-body-medium));--text-font-weight:400;--text-font-width:100;--text-font-opsz:16;--text-line-height:var(--font-leading-standard);margin:0;min-inline-size:0;max-inline-size:var(--text-max-width);font-family:var(--text-font-family);font-size:var(--text-font-size);line-height:var(--text-line-height);text-align:var(--text-align);white-space:var(--text-white-space);word-break:break-word;font-optical-sizing:auto;font-variation-settings:"wght" var(--text-font-weight),"wdth" var(--text-font-width),"opsz" var(--text-font-opsz);text-box:var(--text-trim) var(--text-trim-type);display:inline-flex;&[data-text-balanced=true]{text-wrap:balance}&[data-text-selection=false]{-webkit-user-select:none;user-select:none}&[data-text-has-padding=true]{padding:var(--text-padding-block-start) var(--text-padding-inline-end) var(--text-padding-block-end) var(--text-padding-inline-start)}&[data-text-family=mono]{--text-font-family:var(--font-family-mono)}&[data-text-size=x-large]{--text-font-size:clamp(var(--font-scale-body-large),calc(var(--text-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-body-x-large))}&[data-text-size=large]{--text-font-size:clamp(var(--font-scale-body-medium),calc(var(--text-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-body-large))}&[data-text-size=medium]{--text-font-size:clamp(var(--font-scale-body-small),var(--text-medium),var(--font-scale-body-medium))}&[data-text-size=small]{--text-font-size:clamp(var(--font-scale-body-x-small),calc(var(--text-medium) * pow(var(--font-heading-typescale), -0.1)),var(--font-scale-body-small))}&[data-text-size=x-small]{--text-font-size:var(--font-scale-body-x-small)}&[data-text-weight=light]{--text-font-weight:200}&[data-text-weight=semibold]{--text-font-weight:600}&[data-text-weight=bold]{--text-font-weight:800}&[data-text-tone=muted]{color:var(--global-muted)}&[data-text-tone=interactive]{color:var(--global-interactive-text)}&[data-text-tone=positive]{color:var(--highlight-green)}&[data-text-tone=informative]{color:var(--highlight-blue)}&[data-text-tone=danger]{color:var(--highlight-red)}&[data-text-tone=warning]{color:var(--highlight-yellow)}&[data-text-has-literal-color=true]{color:var(--text-literal-color)}&[data-text-line-height=none]{--text-line-height:0}&[data-text-line-height=x-small]{--text-line-height:var(--font-leading-x-small)}&[data-text-line-height=small]{--text-line-height:var(--font-leading-small)}&[data-text-line-height=large]{--text-line-height:var(--font-leading-large)}}
+.viraui__text-module__Text_bS8kv{--text-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--text-align:start;--text-max-width:none;--text-white-space:normal;--text-padding-inline-start:0;--text-padding-inline-end:0;--text-padding-block-start:0;--text-padding-block-end:0;--text-font-family:var(--font-family-body);--text-font-size:clamp(var(--font-scale-body-small),var(--text-medium),var(--font-scale-body-medium));--text-font-weight:400;--text-font-width:100;--text-font-opsz:16;--text-line-height:var(--font-leading-standard);margin:0;min-inline-size:0;max-inline-size:var(--text-max-width);font-family:var(--text-font-family);font-size:var(--text-font-size);line-height:var(--text-line-height);text-align:var(--text-align);white-space:var(--text-white-space);word-break:break-word;font-optical-sizing:auto;font-variation-settings:"wght" var(--text-font-weight),"wdth" var(--text-font-width),"opsz" var(--text-font-opsz);text-box:var(--text-trim) var(--text-trim-type);&[data-text-balanced=true]{text-wrap:balance}&[data-text-selection=false]{-webkit-user-select:none;user-select:none}&[data-text-has-padding=true]{padding:var(--text-padding-block-start) var(--text-padding-inline-end) var(--text-padding-block-end) var(--text-padding-inline-start)}&[data-text-family=mono]{--text-font-family:var(--font-family-mono)}&[data-text-size=x-large]{--text-font-size:clamp(var(--font-scale-body-large),calc(var(--text-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-body-x-large))}&[data-text-size=large]{--text-font-size:clamp(var(--font-scale-body-medium),calc(var(--text-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-body-large))}&[data-text-size=medium]{--text-font-size:clamp(var(--font-scale-body-small),var(--text-medium),var(--font-scale-body-medium))}&[data-text-size=small]{--text-font-size:clamp(var(--font-scale-body-x-small),calc(var(--text-medium) * pow(var(--font-heading-typescale), -0.1)),var(--font-scale-body-small))}&[data-text-size=x-small]{--text-font-size:var(--font-scale-body-x-small)}&[data-text-weight=light]{--text-font-weight:200}&[data-text-weight=semibold]{--text-font-weight:600}&[data-text-weight=bold]{--text-font-weight:800}&[data-text-tone=muted]{color:var(--global-muted)}&[data-text-tone=interactive]{color:var(--global-interactive-text)}&[data-text-tone=positive]{color:var(--highlight-green)}&[data-text-tone=informative]{color:var(--highlight-blue)}&[data-text-tone=danger]{color:var(--highlight-red)}&[data-text-tone=warning]{color:var(--highlight-yellow)}&[data-text-has-literal-color=true]{color:var(--text-literal-color)}&[data-text-line-height=none]{--text-line-height:0}&[data-text-line-height=x-small]{--text-line-height:var(--font-leading-x-small)}&[data-text-line-height=small]{--text-line-height:var(--font-leading-small)}&[data-text-line-height=large]{--text-line-height:var(--font-leading-large)}}

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

@@ -28,7 +28,7 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraPr
     /**
      * Selects a semantic body typography size from the active theme scale.
      *
-     * @default 'body-medium'
+     * @default 'medium'
      */
     size?: 'x-large' | 'large' | 'medium' | 'small' | 'x-small';
     /**
@@ -112,7 +112,7 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraPr
     /**
      * Selects the `text-box` trim basis when `trim` is active.
      *
-     * @default 'text alphabetic'
+     * @default 'cap alphabetic'
      */
     trimType?: string;
     /**

package/dist/components/text/text.js

@@ -1,4 +1,3 @@
-"use client";
 import './text.css';
 import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
@@ -17,8 +16,8 @@ var Text = ({ align = "start", balanced = false, selection = true, className, co
 		"--text-trim": trim ? `trim-${trim}` : "initial",
 		"--text-trim-type": trim ? trimType : "initial",
 		...typeof weight === "number" ? { "--text-font-weight": weight } : {},
-		...fontWidth !== void 0 ? { "--text-font-width": fontWidth } : {},
-		...opticalSize !== void 0 ? { "--text-font-opsz": opticalSize } : {},
+		"--text-font-width": fontWidth,
+		"--text-font-opsz": opticalSize,
 		...resolveAxisPadding(hPadding, "--text-padding-inline-start", "--text-padding-inline-end"),
 		...resolveAxisPadding(vPadding, "--text-padding-block-start", "--text-padding-block-end"),
 		...style

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

@@ -1,3 +1,3 @@
-var text_module_default = { Text: "text-module_Text_bS8kv" };
+var text_module_default = { Text: "viraui__text-module__Text_bS8kv" };
 //#endregion
 export { text_module_default as default };

package/dist/components/textarea/textarea.css

@@ -1 +1 @@
-.textarea-module_Textarea_mtOUG{--textarea-min-block-size:calc(var(--space-x-large) * 2);--textarea-padding-block:var(--space-small);--textarea-input-border-radius:var(--radius-small);--field-label-padding-inline:calc(var(--textarea-input-border-radius) / 2);inline-size:100%;&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.textarea-module_CustomBasicInput_Ce7yA{--basic-input-border-radius:var(--textarea-input-border-radius);border:1px solid var(--global-contrast);min-block-size:var(--textarea-min-block-size);padding-block:var(--textarea-padding-block);line-height:1.4;resize:none;&[data-resize=vertical]{resize:vertical}&[data-resize=both]{resize:both}&[data-invalid]{border-color:var(--highlight-red)}&:disabled,&[data-disabled]{border-color:transparent}}.textarea-module_Description_er3zI{padding-inline:calc(var(--textarea-input-border-radius) / 2)}
+.viraui__textarea-module__Textarea_mtOUG{--textarea-min-block-size:calc(var(--space-x-large) * 2);--textarea-padding-block:var(--space-small);--textarea-input-border-radius:var(--radius-small);--field-label-padding-inline:calc(var(--textarea-input-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__textarea-module__Label_5dOso:after{content:" ＊";color:var(--highlight-red)}}.viraui__textarea-module__CustomBasicInput_Ce7yA{--basic-input-border-radius:var(--textarea-input-border-radius);border:1px solid var(--global-contrast);min-block-size:var(--textarea-min-block-size);padding-block:var(--textarea-padding-block);line-height:1.4;resize:none;&[data-resize=vertical]{resize:vertical}&[data-resize=both]{resize:both}&[data-invalid]{border-color:var(--highlight-red)}&:disabled,&[data-disabled]{border-color:transparent}}.viraui__textarea-module__Description_er3zI{padding-inline:calc(var(--textarea-input-border-radius) / 2)}

package/dist/components/textarea/textarea.guide.json

@@ -4,14 +4,19 @@
   "whenToUse": [
     "Multi-line text entry with label, description, and error",
     "Controlled vertical or bidirectional resize",
-    "Native textarea attributes through the field control"
+    "Native textarea attributes through the field control",
+    "One or more Textareas inside Fieldset when they belong to a labeled form section with other fields"
+  ],
+  "whenNotToUse": [
+    "Single-line input — use Textfield",
+    "Addon slots like Textfield startAddon or endAddon",
+    "Wrapping a lone Textarea in Fieldset when its own label is sufficient"
   ],
-  "whenNotToUse": ["Single-line input — use Textfield", "Addon slots like Textfield startAddon or endAddon"],
   "accessibility": [
     "Associate label with the textarea through the field label pattern",
     "Expose validation and helper copy through description and error slots",
     "Prefer resize modes that do not hide required content from keyboard users"
   ],
   "antiPatterns": ["Using Textarea for single-line values", "Expecting unsupported size or variant props"],
-  "related": ["Textfield", "Text"]
+  "related": ["Fieldset", "Textfield", "Text"]
 }

package/dist/components/textarea/textarea.js

@@ -1,4 +1,3 @@
-"use client";
 import './textarea.css';
 import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
@@ -25,12 +24,11 @@ var Textarea = ({ className, description, dirty, disabled, error, invalid, label
 		validationMode,
 		render: /* @__PURE__ */ jsx(Stack, {
 			direction: "column",
-			fillChildren: false,
 			rowGap: "small"
 		}),
 		children: [
 			label && /* @__PURE__ */ jsx(Field.Label, {
-				"data-field-label": "",
+				className: textarea_module_default.Label,
 				children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
 			}),
 			/* @__PURE__ */ jsx(BasicInput, {

package/dist/components/textarea/textarea.module.js

@@ -1,7 +1,8 @@
 var textarea_module_default = {
-	Textarea: "textarea-module_Textarea_mtOUG",
-	CustomBasicInput: "textarea-module_CustomBasicInput_Ce7yA",
-	Description: "textarea-module_Description_er3zI"
+	Textarea: "viraui__textarea-module__Textarea_mtOUG",
+	Label: "viraui__textarea-module__Label_5dOso",
+	CustomBasicInput: "viraui__textarea-module__CustomBasicInput_Ce7yA",
+	Description: "viraui__textarea-module__Description_er3zI"
 };
 //#endregion
 export { textarea_module_default as default };

package/dist/components/textfield/textfield.css

@@ -1 +1 @@
-.textfield-module_Textfield_o-70A{--input-height:var(--space-x-large);--control-group-background:var(--base-1);--control-group-color:var(--global-foreground);--control-group-border-color:var(--global-contrast);--control-group-border-radius:var(--radius-small);--field-label-padding-inline:calc(var(--control-group-border-radius) / 2);inline-size:100%;&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.textfield-module_ControlGroup_2W-OC{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--input-height);background:var(--control-group-background);border:1px solid var(--control-group-border-color);border-radius:var(--control-group-border-radius);&:has(.textfield-module_CustomBasicInput_oHgtd:focus-visible),&:has(.textfield-module_CustomBasicInput_oHgtd[data-focused]){outline:2px solid var(--global-foreground);outline-offset:2px}&:has(.textfield-module_CustomBasicInput_oHgtd[data-invalid]){--control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.textfield-module_CustomBasicInput_oHgtd:disabled),&:has(.textfield-module_CustomBasicInput_oHgtd[data-disabled]){--control-group-background:var(--global-disabled-background);--control-group-border-color:transparent;box-shadow:none;cursor:not-allowed}&:has(.textfield-module_Addon_kK1ef[data-position=start])>.textfield-module_CustomBasicInput_oHgtd{padding-inline-start:var(--space-x-small)}&:has(.textfield-module_Addon_kK1ef[data-position=end])>.textfield-module_CustomBasicInput_oHgtd{padding-inline-end:var(--space-x-small)}}.textfield-module_CustomBasicInput_oHgtd{flex:1 1 auto;min-inline-size:0;block-size:100%;line-height:1.2;border:none;background:transparent;box-shadow:none;border-radius:inherit;&:focus-visible{outline:none}&:disabled{cursor:not-allowed}}.textfield-module_Addon_kK1ef{min-inline-size:var(--space-x-large)}.textfield-module_Description_8Qxot{padding-inline:calc(var(--control-group-border-radius) / 2)}
+.viraui__textfield-module__Textfield_o-70A{--input-height:var(--space-x-large);--control-group-background:var(--base-1);--control-group-color:var(--global-foreground);--control-group-border-color:var(--global-contrast);--control-group-border-radius:var(--radius-medium);--field-label-padding-inline:calc(var(--control-group-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__textfield-module__Label_5rjr0:after{content:" ＊";color:var(--highlight-red)}}.viraui__textfield-module__ControlGroup_2W-OC{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--input-height);background:var(--control-group-background);border:1px solid var(--control-group-border-color);border-radius:var(--control-group-border-radius);&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:focus-visible),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-invalid]){--control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:disabled),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-disabled]){--control-group-background:var(--global-disabled-background);--control-group-border-color:transparent;box-shadow:none;cursor:not-allowed}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=start])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-start:var(--space-x-small)}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=end])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-end:var(--space-x-small)}}.viraui__textfield-module__CustomBasicInput_oHgtd{flex:1 1 auto;min-inline-size:0;block-size:100%;line-height:1.2;border:none;background:transparent;box-shadow:none;border-radius:inherit;&:focus-visible{outline:none}&:disabled{cursor:not-allowed}}.viraui__textfield-module__Addon_kK1ef{min-inline-size:var(--space-x-large)}.viraui__textfield-module__Description_8Qxot{padding-inline:calc(var(--control-group-border-radius) / 2)}

package/dist/components/textfield/textfield.guide.json

@@ -4,9 +4,15 @@
   "whenToUse": [
     "Single-line text, email, password, or similar native input types",
     "Start or end addon slots inside the shared control group",
-    "Label, description, and error copy with validation states"
+    "Label, description, and error copy with validation states",
+    "Several related Textfields grouped under one section legend as Fieldset children (e.g. billing details)"
+  ],
+  "whenNotToUse": [
+    "Multi-line entry — use Textarea",
+    "Custom size or variant props — fixed medium treatment",
+    "Wrapping a lone Textfield in Fieldset when its own label is sufficient — Fieldset is for multi-field sections or shared legends",
+    "Using Fieldset instead of the Textfield label for a single control"
   ],
-  "whenNotToUse": ["Multi-line entry — use Textarea", "Custom size or variant props — fixed medium treatment"],
   "accessibility": [
     "Associate label with the input through the field label pattern",
     "Surface validation errors in the shared description slot or Field.Error",
@@ -16,5 +22,5 @@
     "Passing unsupported size or variant props",
     "Expecting a focus ring when focus is only on addon controls"
   ],
-  "related": ["Textarea", "Select", "Text"]
+  "related": ["Fieldset", "Textarea", "Select", "Text"]
 }

package/dist/components/textfield/textfield.js

@@ -1,4 +1,3 @@
-"use client";
 import './textfield.css';
 import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
@@ -27,12 +26,11 @@ var Textfield = ({ className, description, dirty, disabled, endAddon, error, inv
 		validationMode,
 		render: /* @__PURE__ */ jsx(Stack, {
 			direction: "column",
-			fillChildren: false,
 			rowGap: "small"
 		}),
 		children: [
 			label && /* @__PURE__ */ jsx(Field.Label, {
-				"data-field-label": "",
+				className: textfield_module_default.Label,
 				children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
 			}),
 			/* @__PURE__ */ jsx(InputControlGroup, {

package/dist/components/textfield/textfield.module.js

@@ -1,9 +1,10 @@
 var textfield_module_default = {
-	Textfield: "textfield-module_Textfield_o-70A",
-	ControlGroup: "textfield-module_ControlGroup_2W-OC",
-	CustomBasicInput: "textfield-module_CustomBasicInput_oHgtd",
-	Addon: "textfield-module_Addon_kK1ef",
-	Description: "textfield-module_Description_8Qxot"
+	Textfield: "viraui__textfield-module__Textfield_o-70A",
+	Label: "viraui__textfield-module__Label_5rjr0",
+	ControlGroup: "viraui__textfield-module__ControlGroup_2W-OC",
+	CustomBasicInput: "viraui__textfield-module__CustomBasicInput_oHgtd",
+	Addon: "viraui__textfield-module__Addon_kK1ef",
+	Description: "viraui__textfield-module__Description_8Qxot"
 };
 //#endregion
 export { textfield_module_default as default };

package/dist/components/title/title.css

@@ -1 +1 @@
-.title-module_Title_CXMUX{--title-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1));--title-font-family:var(--font-family-heading);--title-font-weight:500;--title-font-width:100;--title-font-opsz:16;--title-line-height:var(--font-leading-standard);--title-letter-spacing:-0.03em;--title-align:start;--title-max-width:none;--title-white-space:normal;--title-padding-inline-start:0;--title-padding-inline-end:0;--title-padding-block-start:0;--title-padding-block-end:0;margin:0;max-inline-size:var(--title-max-width);font-family:var(--title-font-family);font-size:var(--title-font-size);line-height:var(--title-line-height);letter-spacing:var(--title-letter-spacing);text-align:var(--title-align);white-space:var(--title-white-space);word-break:break-word;font-optical-sizing:auto;font-variation-settings:"wght" var(--title-font-weight),"wdth" var(--title-font-width),"opsz" var(--title-font-opsz);text-box:var(--title-trim) var(--title-trim-type);display:inline-flex;&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--title-padding-block-start) var(--title-padding-inline-end) var(--title-padding-block-end) var(--title-padding-inline-start)}&[data-title-level=display]{--title-font-size:clamp(var(--font-scale-h1),calc(var(--font-scale-h1) + 4.643cqi - 0.9286rem),var(--font-scale-display))}&[data-title-level=h1]{--title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1))}&[data-title-level=h2]{--title-font-size:clamp(var(--font-scale-h3),calc(var(--title-medium) * pow(var(--font-heading-typescale), 4)),var(--font-scale-h2))}&[data-title-level=h3]{--title-font-size:clamp(var(--font-scale-h4),calc(var(--title-medium) * pow(var(--font-heading-typescale), 3)),var(--font-scale-h3))}&[data-title-level=h4]{--title-font-size:clamp(var(--font-scale-h5),calc(var(--title-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-h4))}&[data-title-level=h5]{--title-font-size:clamp(var(--font-scale-h6),calc(var(--title-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-h5));--title-letter-spacing:-0.02em}&[data-title-level=h6]{--title-font-size:clamp(var(--font-scale-body-medium),var(--title-medium),var(--font-scale-h6));--title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--title-literal-color)}&[data-title-line-height=none]{--title-line-height:0}&[data-title-line-height=x-small]{--title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--title-line-height:var(--font-leading-large)}}
+.viraui__title-module__Title_CXMUX{--title-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1));--title-font-family:var(--font-family-heading);--title-font-weight:500;--title-font-width:100;--title-font-opsz:16;--title-line-height:var(--font-leading-standard);--title-letter-spacing:-0.03em;--title-align:start;--title-max-width:none;--title-white-space:normal;--title-padding-inline-start:0;--title-padding-inline-end:0;--title-padding-block-start:0;--title-padding-block-end:0;margin:0;max-inline-size:var(--title-max-width);font-family:var(--title-font-family);font-size:var(--title-font-size);line-height:var(--title-line-height);letter-spacing:var(--title-letter-spacing);text-align:var(--title-align);white-space:var(--title-white-space);word-break:break-word;font-optical-sizing:auto;font-variation-settings:"wght" var(--title-font-weight),"wdth" var(--title-font-width),"opsz" var(--title-font-opsz);text-box:var(--title-trim) var(--title-trim-type);display:inline-flex;&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--title-padding-block-start) var(--title-padding-inline-end) var(--title-padding-block-end) var(--title-padding-inline-start)}&[data-title-level=display]{--title-font-size:clamp(var(--font-scale-h1),calc(var(--font-scale-h1) + 4.643cqi - 0.9286rem),var(--font-scale-display))}&[data-title-level=h1]{--title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1))}&[data-title-level=h2]{--title-font-size:clamp(var(--font-scale-h3),calc(var(--title-medium) * pow(var(--font-heading-typescale), 4)),var(--font-scale-h2))}&[data-title-level=h3]{--title-font-size:clamp(var(--font-scale-h4),calc(var(--title-medium) * pow(var(--font-heading-typescale), 3)),var(--font-scale-h3))}&[data-title-level=h4]{--title-font-size:clamp(var(--font-scale-h5),calc(var(--title-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-h4))}&[data-title-level=h5]{--title-font-size:clamp(var(--font-scale-h6),calc(var(--title-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-h5));--title-letter-spacing:-0.02em}&[data-title-level=h6]{--title-font-size:clamp(var(--font-scale-body-medium),var(--title-medium),var(--font-scale-h6));--title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--title-literal-color)}&[data-title-line-height=none]{--title-line-height:0}&[data-title-line-height=x-small]{--title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--title-line-height:var(--font-leading-large)}}

package/dist/components/title/title.js

@@ -1,4 +1,3 @@
-"use client";
 import './title.css';
 import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
@@ -17,8 +16,8 @@ var Title = ({ align = "start", balanced = false, selection = true, className, c
 		"--title-trim": trim ? `trim-${trim}` : "initial",
 		"--title-trim-type": trim ? trimType : "initial",
 		...typeof weight === "number" ? { "--title-font-weight": weight } : {},
-		...fontWidth !== void 0 ? { "--title-font-width": fontWidth } : {},
-		...opticalSize !== void 0 ? { "--title-font-opsz": opticalSize } : {},
+		"--title-font-width": fontWidth,
+		"--title-font-opsz": opticalSize,
 		...resolveAxisPadding(hPadding, "--title-padding-inline-start", "--title-padding-inline-end"),
 		...resolveAxisPadding(vPadding, "--title-padding-block-start", "--title-padding-block-end"),
 		...style

package/dist/components/title/title.module.js

@@ -1,3 +1,3 @@
-var title_module_default = { Title: "title-module_Title_CXMUX" };
+var title_module_default = { Title: "viraui__title-module__Title_CXMUX" };
 //#endregion
 export { title_module_default as default };

package/dist/core/elevation/get-elevation-props.js

@@ -4,11 +4,11 @@ var getElevationProps = ({ resting, hover, direction = ELEVATION_DEFAULTS.direct
 	attributes: {
 		"data-elevation": resting,
 		"data-elevation-direction": direction,
-		...hover !== void 0 ? { "data-elevation-hover": hover } : {}
+		"data-elevation-hover": hover
 	},
 	style: {
 		"--shadow-color": shadowColor,
-		...extraShadow !== void 0 ? { "--extra-shadow": extraShadow } : {}
+		"--extra-shadow": extraShadow
 	}
 });
 //#endregion

package/dist/core/props/intrinsic-vira-props.d.ts

@@ -4,19 +4,19 @@ export type IntrinsicViraProps = {
      *
      * @default The component root does not render a grow attribute.
      */
-    grow?: boolean | undefined;
+    grow?: boolean;
     /**
      * Adds `data-shrink="false"` to the component root when false.
      *
      * @default The component root does not render a shrink attribute.
      */
-    shrink?: boolean | undefined;
+    shrink?: boolean;
     /**
      * Adds `data-vibrant` to the component root when true so preflight vibrancy styles can opt the surface into backdrop filtering.
      *
      * @default The component root does not render a vibrant attribute.
      */
-    vibrant?: boolean | undefined;
+    vibrant?: boolean;
 };
 type IntrinsicViraAttributes = {
     'data-grow'?: 'false';

package/dist/index.js

@@ -2,6 +2,12 @@ import { Avatar } from "./components/avatar/avatar.js";
 import { AvatarGroup } from "./components/avatar-group/avatar-group.js";
 import { Stack } from "./components/stack/stack.js";
 import { Chip } from "./components/chip/chip.js";
+import { DialogClose } from "./components/dialog/dialog-close.js";
+import { DialogIndent } from "./components/dialog/dialog-indent.js";
+import { DialogIndentBackground } from "./components/dialog/dialog-indent-background.js";
+import { DialogSheet } from "./components/dialog/dialog-sheet.js";
+import { DialogTrigger } from "./components/dialog/dialog-trigger.js";
+import { Dialog } from "./components/dialog/dialog.js";
 import { ClampText } from "./components/clamp-text/clamp-text.js";
 import { ELEVATION_DEFAULTS } from "./core/elevation/elevation-types.js";
 import { getElevationProps } from "./core/elevation/get-elevation-props.js";
@@ -17,13 +23,17 @@ import { Textarea } from "./components/textarea/textarea.js";
 import { Slider } from "./components/slider/slider.js";
 import { Switch } from "./components/switch/switch.js";
 import { Checkbox } from "./components/checkbox/checkbox.js";
+import { CheckboxGroup } from "./components/checkbox/checkbox-group.js";
+import { Fieldset } from "./components/fieldset/fieldset.js";
 import { Radio } from "./components/radio/radio.js";
 import { RadioGroup } from "./components/radio/radio-group.js";
 import { Select } from "./components/select/select.js";
+import { Separator } from "./components/separator/separator.js";
 import { Icon } from "./components/icon/icon.js";
 import { Skeleton } from "./components/skeleton/skeleton.js";
 import { Surface } from "./components/surface/surface.js";
+import { Tabs } from "./components/tabs/tabs.js";
 import { StaticNoise } from "./components/static-noise/static-noise.js";
 import { ProgressiveBlur } from "./components/progressive-blur/progressive-blur.js";
 import { Title } from "./components/title/title.js";
-export { Avatar, AvatarGroup, Button, Checkbox, Chip, ClampText, ELEVATION_DEFAULTS, Elevator, Icon, IconButton, LinearProgress, Masonry, ProgressiveBlur, Radio, RadioGroup, Select, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Text, Textarea, Textfield, Title, getElevationProps };
+export { Avatar, AvatarGroup, Button, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, Icon, IconButton, LinearProgress, Masonry, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, getElevationProps };

package/dist/internal-icons/icon-registry.d.ts

@@ -2,7 +2,7 @@ import type { ComponentType, SVGProps } from 'react';
 export type GeneratedIconComponent = ComponentType<SVGProps<SVGSVGElement> & {
     size?: number | string;
 }>;
-export declare const generatedIconNames: readonly ["ArrowDown", "ArrowDownLeft", "ArrowDownRight", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowUpLeft", "ArrowUpRight", "CaretDown", "CaretLeft", "CaretRight", "CaretUp", "Check", "ChevronDown", "ChevronExpandY", "ChevronLeft", "ChevronRight", "ChevronUp", "CircleHalfDottedClock", "CircleImage", "Clock", "DarkLight", "History", "Image", "ImagesLayered", "Lock", "LockOpen", "Magnifier", "Minus", "MoonStars", "Plus", "Quickstart", "RefreshAnticlockwise", "Sun", "Xmark"];
+export declare const generatedIconNames: readonly ["ArrowDown", "ArrowDownLeft", "ArrowDownRight", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowUpLeft", "ArrowUpRight", "CaretDown", "CaretLeft", "CaretRight", "CaretUp", "Check", "ChevronDown", "ChevronExpandY", "ChevronLeft", "ChevronRight", "ChevronUp", "CircleCheck", "CircleHalfDottedClock", "CircleImage", "Clock", "DarkLight", "Duplicate", "History", "Image", "ImagesLayered", "Lock", "LockOpen", "Magnifier", "Minus", "MoonStars", "Plus", "Quickstart", "RefreshAnticlockwise", "ShieldCheck", "Sun", "Xmark"];
 export type GeneratedIconName = (typeof generatedIconNames)[number];
 export declare const generatedIconVariants: readonly ["duo"];
 export type GeneratedIconVariant = (typeof generatedIconVariants)[number];
@@ -26,10 +26,12 @@ export declare const generatedIconRegistry: {
         readonly ChevronLeft: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/ChevronLeft").ChevronLeftProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
         readonly ChevronRight: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/ChevronRight").ChevronRightProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
         readonly ChevronUp: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/ChevronUp").ChevronUpProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+        readonly CircleCheck: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/CircleCheck").CircleCheckProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
         readonly CircleHalfDottedClock: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/CircleHalfDottedClock").CircleHalfDottedClockProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
         readonly CircleImage: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/CircleImage").CircleImageProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
         readonly Clock: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/Clock").ClockProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
         readonly DarkLight: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/DarkLight").DarkLightProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+        readonly Duplicate: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/Duplicate").DuplicateProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
         readonly History: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/History").HistoryProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
         readonly Image: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/Image").ImageProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
         readonly ImagesLayered: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/ImagesLayered").ImagesLayeredProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
@@ -41,6 +43,7 @@ export declare const generatedIconRegistry: {
         readonly Plus: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/Plus").PlusProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
         readonly Quickstart: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/Quickstart").QuickstartProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
         readonly RefreshAnticlockwise: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/RefreshAnticlockwise").RefreshAnticlockwiseProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+        readonly ShieldCheck: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/ShieldCheck").ShieldCheckProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
         readonly Sun: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/Sun").SunProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
         readonly Xmark: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/Xmark").XmarkProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     };