@viraui/react 0.0.18 → 0.0.20

package/dist/components/radio/radio.css

@@ -1 +1 @@
-.radio-module_RadioGroup_vnd3F{&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.radio-module_RadioFieldset_g50K8{min-inline-size:0;margin:0;padding:0}.radio-module_RadioRoot_3uvvn{--radio-size:var(--space-medium);--radio-background:var(--global-contrast);--radio-border-color:transparent;--radio-indicator-color:contrast-color(var(--global-primary));--radio-disk-size:calc(var(--radio-size) / 2);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(--radio-border-color);inline-size:var(--radio-size);block-size:var(--radio-size);background:var(--radio-background);border-radius:50%;&[data-size=regular]{--radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--radio-background:var(--global-primary);--radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),.radio-module_RadioGroup_vnd3F[data-invalid] &:not([data-disabled]){--radio-border-color:var(--highlight-red);--radio-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],.radio-module_RadioGroup_vnd3F[data-disabled] &{--radio-background:var(--global-disabled-background);--radio-border-color:transparent;--radio-indicator-color:var(--global-disabled-foreground);box-shadow:none}}.radio-module_Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--radio-indicator-color)}.radio-module_Disk_pV-Q1{inline-size:var(--radio-disk-size);aspect-ratio:1/1;border-radius:50%;background:currentColor}.radio-module_RadioRoot_3uvvn:not([data-checked]) .radio-module_Disk_pV-Q1{display:none}
+.radio-module_RadioGroup_vnd3F{&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.radio-module_RadioFieldset_g50K8{min-inline-size:0;margin:0;padding:0}.radio-module_RadioRoot_3uvvn{--radio-size:var(--space-medium);--radio-background:var(--global-contrast);--radio-border-color:transparent;--radio-indicator-color:contrast-color(var(--global-primary));--radio-disk-size:calc(var(--radio-size) / 2);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(--radio-border-color);inline-size:var(--radio-size);block-size:var(--radio-size);background:var(--radio-background);border-radius:100000px;corner-shape:unset;&[data-size=regular]{--radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--radio-background:var(--global-primary);--radio-border-color:var(--global-primary);box-shadow:none;cursor:not-allowed}&[data-invalid]:not([data-disabled]),.radio-module_RadioGroup_vnd3F[data-invalid] &:not([data-disabled]){--radio-border-color:var(--highlight-red);--radio-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],.radio-module_RadioGroup_vnd3F[data-disabled] &{--radio-background:var(--global-disabled-background);--radio-border-color:transparent;--radio-indicator-color:var(--global-disabled-foreground);box-shadow:none}}.radio-module_Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--radio-indicator-color)}.radio-module_Disk_pV-Q1{inline-size:var(--radio-disk-size);aspect-ratio:1/1;border-radius:100000px;corner-shape:unset;background:currentColor}.radio-module_RadioRoot_3uvvn:not([data-checked]) .radio-module_Disk_pV-Q1{display:none}

package/dist/components/radio/radio.js

@@ -1,8 +1,8 @@
 "use client";
 import './radio.css';
+import { Stack } from "../stack/stack.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 radio_module_default from "./radio.module.js";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/select/select-group.js

@@ -1,6 +1,6 @@
 "use client";
-import { Text } from "../text/text.js";
 import { Stack } from "../stack/stack.js";
+import { Text } from "../text/text.js";
 import select_module_default from "./select.module.js";
 import { SelectIndicatorSlot } from "./select-indicator-slot.js";
 import { clsx } from "clsx";

package/dist/components/select/select-option.js

@@ -1,6 +1,6 @@
 "use client";
-import { Text } from "../text/text.js";
 import { Stack } from "../stack/stack.js";
+import { Text } from "../text/text.js";
 import select_module_default from "./select.module.js";
 import { SelectIndicatorSlot } from "./select-indicator-slot.js";
 import { Icon } from "../icon/icon.js";

package/dist/components/select/select.css

@@ -1 +1 @@
-.select-module_Select_eXv4Y{--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);--select-trigger-padding-inline-start:var(--space-small);--select-trigger-padding-inline-end:var(--space-x-small);--field-label-padding-inline:calc((var(--control-group-border-radius) + 0px) / 2);&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]>.select-module_Trigger_-wBsg:not(:disabled):not([data-disabled]){--control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.select-module_Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--input-height);padding-inline:calc(var(--select-trigger-padding-inline-start) + ((var(--control-group-border-radius) + 0px) / 4)) var(--select-trigger-padding-inline-end);border:1px solid var(--control-group-border-color);border-radius:var(--control-group-border-radius);background:var(--control-group-background);color:var(--control-group-color);font:inherit;text-align:start;cursor:pointer;&:focus-visible{outline:2px solid var(--global-foreground);outline-offset:2px}&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--control-group-background:var(--global-disabled-background);--control-group-border-color:transparent;--control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.select-module_Value_uWHPX{--text-fluid-factor:0;--text-font-size:var(--font-scale-body-small);overflow:hidden;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.select-module_Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.select-module_Description_OmwmV{padding-inline:calc((var(--control-group-border-radius) + 0px) / 2)}.select-module_SelectPopup_UzGXL{--select-list-border-radius:var(--radius-medium);--select-list-padding:var(--space-x-small);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative}.select-module_ScrollArrow_kHlEi{position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--base-1)}.select-module_ScrollButton_sHBOa{pointer-events:none}.select-module_ScrollArrowUp_DGXS-{inset-block-start:0;border-block-end:1px solid var(--global-contrast);border-radius:var(--select-list-border-radius) var(--select-list-border-radius) 0 0}.select-module_ScrollArrowDown_vhJy0{inset-block-end:0;border-block-start:1px solid var(--global-contrast);border-radius:0 0 var(--select-list-border-radius) var(--select-list-border-radius)}.select-module_List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);overflow-y:auto;scroll-padding-block:var(--select-list-padding);list-style:none;overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.select-module_Option_KgYqz{border-radius:calc((var(--select-list-border-radius) + 0px) - var(--select-list-padding));cursor:pointer;&:focus{outline:none}&:focus-visible{outline:2px solid var(--global-foreground);outline-offset:0}&:hover,&[data-highlighted]{background:var(--base-2)}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}.select-module_Indicator_YNUuz{inline-size:var(--space-medium);color:var(--global-primary);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}.select-module_Group_xzkuA+.select-module_Group_xzkuA{margin-block-start:var(--space-medium)}.select-module_Separator_Q-ri9{block-size:1px;margin-block:var(--space-small);margin-inline:var(--space-small);background:var(--base-3)}
+.select-module_Select_eXv4Y{--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);--select-trigger-padding-inline-start:var(--space-small);--select-trigger-padding-inline-end:var(--space-x-small);--field-label-padding-inline:calc((var(--control-group-border-radius) + 0px) / 2);z-index:0;&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]>.select-module_Trigger_-wBsg:not(:disabled):not([data-disabled]){--control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.select-module_Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--input-height);padding-inline:calc(var(--select-trigger-padding-inline-start) + ((var(--control-group-border-radius) + 0px) / 4)) var(--select-trigger-padding-inline-end);border:1px solid var(--control-group-border-color);border-radius:var(--control-group-border-radius);background:var(--control-group-background);color:var(--control-group-color);font:inherit;text-align:start;cursor:pointer;&:focus-visible{outline:2px solid var(--global-foreground);outline-offset:2px}&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--control-group-background:var(--global-disabled-background);--control-group-border-color:transparent;--control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.select-module_Value_uWHPX{--text-fluid-factor:0;--text-font-size:var(--font-scale-body-small);flex:1 1 auto;min-inline-size:0;overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.select-module_Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.select-module_Description_OmwmV{padding-inline:calc((var(--control-group-border-radius) + 0px) / 2)}.select-module_SelectPopup_UzGXL{--select-list-border-radius:var(--radius-medium);--select-list-padding:var(--space-x-small);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative}.select-module_ScrollArrow_kHlEi{--scroll-arrow-background:var(--is-vibrancy-active) oklab(from var(--base-1) l a b/80%);position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--scroll-arrow-background,var(--base-1));backdrop-filter:var(--vibrancy-filter,none);border:1px solid var(--global-contrast)}.select-module_ScrollButton_sHBOa{pointer-events:none}.select-module_ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--select-list-border-radius) var(--select-list-border-radius) 0 0}.select-module_ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--select-list-border-radius) var(--select-list-border-radius)}.select-module_List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);overflow-y:auto;scroll-padding-block:var(--select-list-padding);list-style:none;overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.select-module_Option_KgYqz{border-radius:calc((var(--select-list-border-radius) + 0px) - var(--select-list-padding));cursor:pointer;&:focus{outline:none}&:focus-visible{outline:2px solid var(--global-foreground);outline-offset:0}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{--option-hover-background:var(--is-vibrancy-active) oklab(from var(--global-contrast) l a b/14%);background:var(--option-hover-background,var(--global-contrast))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}.select-module_Indicator_YNUuz{inline-size:var(--space-medium);color:var(--global-primary);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}.select-module_Group_xzkuA+.select-module_Group_xzkuA{margin-block-start:var(--space-medium)}.select-module_Separator_Q-ri9{block-size:1px;margin-block:var(--space-small);margin-inline:var(--space-small);background:var(--base-3)}

package/dist/components/select/select.guide.json

@@ -12,6 +12,10 @@
     "Wire description and error copy through the field pattern so assistive tech gets helper text",
     "Keep list options keyboard reachable; do not trap focus outside the popup pattern"
   ],
-  "antiPatterns": ["Expecting multi-select or combobox behavior", "Leaving the trigger without label or aria-label"],
+  "antiPatterns": [
+    "Expecting multi-select or combobox behavior",
+    "Leaving the trigger without label or aria-label",
+    "Never set the size prop (if present) of Buttons, IconButtons or other interactive elements passed as addon other than small"
+  ],
   "related": ["Textfield", "Stack", "Surface", "Icon"]
 }

package/dist/components/select/select.js

@@ -1,17 +1,17 @@
 "use client";
 import './select.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Stack } from "../stack/stack.js";
 import { Elevator } from "../elevator/elevator.js";
 import { IconButton } from "../icon-button/icon-button.js";
 import { Text } from "../text/text.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 select_module_default from "./select.module.js";
 import { SelectGroup } from "./select-group.js";
-import { Icon } from "../icon/icon.js";
 import { SelectOption } from "./select-option.js";
 import { SelectSeparator } from "./select-separator.js";
+import { Icon } from "../icon/icon.js";
 import { Surface } from "../surface/surface.js";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -93,6 +93,7 @@ function SelectRootComponent({ children, className, description, dirty, disabled
 						children: [
 							/* @__PURE__ */ jsx(Select.ScrollUpArrow, {
 								className: clsx(select_module_default.ScrollArrow, select_module_default.ScrollArrowUp),
+								"data-vibrant": "",
 								render: /* @__PURE__ */ jsx(Stack, {
 									fillChildren: false,
 									hAlign: "center",
@@ -117,13 +118,15 @@ function SelectRootComponent({ children, className, description, dirty, disabled
 										color: 1,
 										hPadding: "x-small",
 										radius: "medium",
-										vPadding: "x-small"
+										vPadding: "x-small",
+										vibrant: true
 									}),
 									children
 								})
 							}),
 							/* @__PURE__ */ jsx(Select.ScrollDownArrow, {
 								className: clsx(select_module_default.ScrollArrow, select_module_default.ScrollArrowDown),
+								"data-vibrant": "",
 								render: /* @__PURE__ */ jsx(Stack, {
 									fillChildren: false,
 									hAlign: "center",

package/dist/components/slider/slider.js

@@ -1,10 +1,10 @@
 "use client";
 import './slider.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Stack } from "../stack/stack.js";
 import { Text } from "../text/text.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 slider_module_default from "./slider.module.js";
 import { SliderControl } from "./slider-control.js";
 import { isRangeSlider } from "./slider-utils.js";

package/dist/components/surface/surface.css

@@ -1 +1 @@
-.surface-module_Surface_slEYq{--surface-background-hover:var(--surface-background);--surface-border-radius:var(--radius-medium);--surface-padding-inline-start:0;--surface-padding-inline-end:0;--surface-padding-block-start:0;--surface-padding-block-end:0;position:relative;box-sizing:border-box;background:var(--surface-background,transparent);border-radius:var(--surface-border-radius);border:0;&[data-surface-has-padding=true]{padding:var(--surface-padding-block-start) var(--surface-padding-inline-end) var(--surface-padding-block-end) var(--surface-padding-inline-start)}&[data-surface-border]{border-style:var(--surface-border-style,solid);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{animation:surface-module_surface-background-hover_HwH9- var(--duration-fast) var(--easing-standard);animation-fill-mode:both}}}@keyframes surface-module_surface-background-hover_HwH9-{to{background:var(--surface-background-hover)}}
+.surface-module_Surface_slEYq{--surface-background-hover:var(--surface-background);--surface-border-radius:var(--radius-medium);--surface-padding-inline-start:0;--surface-padding-inline-end:0;--surface-padding-block-start:0;--surface-padding-block-end:0;--surface-vibrancy-background:var(--is-vibrancy-active) oklab(from var(--surface-background) l a b/80%);position:relative;box-sizing:border-box;background:var(--surface-vibrancy-background,var(--surface-background,transparent));border-radius:var(--surface-border-radius);border:0;&[data-surface-has-padding=true]{padding:var(--surface-padding-block-start) var(--surface-padding-inline-end) var(--surface-padding-block-end) var(--surface-padding-inline-start)}&[data-surface-border]{border-style:var(--surface-border-style,solid);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{animation:surface-module_surface-background-hover_HwH9- var(--duration-fast) var(--easing-standard);animation-fill-mode:both}}}@keyframes surface-module_surface-background-hover_HwH9-{to{background:var(--surface-background-hover)}}

package/dist/components/surface/surface.js

@@ -22,7 +22,7 @@ var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hove
 		...hasColor ? { "--surface-background": toSurfaceColor(color) } : {},
 		...hasHoverColor ? { "--surface-background-hover": toSurfaceColor(hoverColor) } : {},
 		...border ? { "--surface-border-style": borderStyle } : {},
-		"--surface-border-radius": resolveThemeValue(radius, "radius", "var(--radius-medium)"),
+		"--surface-border-radius": resolveThemeValue(radius, "radius", 0),
 		...resolveAxisPadding(hPadding, "--surface-padding-inline-start", "--surface-padding-inline-end"),
 		...resolveAxisPadding(vPadding, "--surface-padding-block-start", "--surface-padding-block-end"),
 		...style

package/dist/components/switch/switch.css

@@ -1 +1 @@
-.switch-module_Switch_L86y7{--switch-track-block-size:var(--space-large);--switch-track-radius:var(--radius-small);--switch-track-background:var(--global-contrast);--switch-thumb-background:var(--global-primary);--switch-thumb-size:calc(var(--space-large) - var(--space-x-small));--switch-thumb-inset:var(--space-2x-small);--switch-thumb-radius:calc(var(--radius-x-small) + var(--switch-thumb-inset));&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.switch-module_SwitchRoot_Zv9An{position:relative;appearance:none;border:0;box-shadow:none;inline-size:calc((var(--switch-thumb-size) * 2) + var(--switch-thumb-inset) * 2);block-size:var(--switch-track-block-size);background:var(--switch-track-background);border-radius:var(--switch-track-radius);&[data-size=small]{--switch-track-radius:var(--radius-x-small);--switch-track-block-size:var(--space-medium);--switch-thumb-size:calc(var(--space-medium) - var(--space-x-small));--switch-thumb-radius:calc(var(--radius-x-small) - var(--switch-thumb-inset))}&[data-checked]:not([data-disabled]):not([data-invalid]){--switch-track-background:var(--global-primary);--switch-thumb-background:var(--base-1)}&[data-invalid]:not([data-disabled]),.switch-module_Switch_L86y7[data-invalid]>&:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],.switch-module_Switch_L86y7[data-disabled]>&{--switch-track-background:var(--global-disabled-background);--switch-thumb-background:var(--global-disabled-foreground);box-shadow:none}}.switch-module_Thumb_ldwJw{position:absolute;inset-block:var(--switch-thumb-inset);inset-inline-start:var(--switch-thumb-inset);background:var(--switch-thumb-background);inline-size:var(--switch-thumb-size);block-size:var(--switch-thumb-size);border-radius:var(--switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);.switch-module_SwitchRoot_Zv9An[data-checked]>&{translate:100% 0}.switch-module_SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}
+.switch-module_Switch_L86y7{--switch-track-block-size:var(--space-large);--switch-track-radius:var(--radius-small);--switch-track-background:var(--global-contrast);--switch-thumb-background:var(--global-primary);--switch-thumb-size:calc(var(--space-large) - var(--space-x-small));--switch-thumb-inset:var(--space-2x-small);--switch-thumb-radius:calc(var(--radius-x-small) + var(--switch-thumb-inset));&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.switch-module_SwitchRoot_Zv9An{position:relative;appearance:none;border:0;box-shadow:none;inline-size:calc((var(--switch-thumb-size) * 2) + var(--switch-thumb-inset) * 2);block-size:var(--switch-track-block-size);background:var(--switch-track-background);border-radius:var(--switch-track-radius);&[data-size=small]{--switch-track-radius:var(--radius-x-small);--switch-track-block-size:var(--space-medium);--switch-thumb-size:calc(var(--space-medium) - var(--space-x-small));--switch-thumb-radius:calc(var(--radius-x-small) - var(--switch-thumb-inset))}&[data-checked]:not([data-disabled]):not([data-invalid]){--switch-track-background:var(--global-primary);--switch-thumb-background:var(--base-1)}&[data-invalid]:not([data-disabled]),.switch-module_Switch_L86y7[data-invalid]>&:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],.switch-module_Switch_L86y7[data-disabled]>&{--switch-track-background:var(--global-disabled-background);--switch-thumb-background:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.switch-module_Thumb_ldwJw{position:absolute;inset-block:var(--switch-thumb-inset);inset-inline-start:var(--switch-thumb-inset);background:var(--switch-thumb-background);inline-size:var(--switch-thumb-size);block-size:var(--switch-thumb-size);border-radius:var(--switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);.switch-module_SwitchRoot_Zv9An[data-checked]>&{translate:100% 0}.switch-module_SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}

package/dist/components/switch/switch.js

@@ -1,9 +1,9 @@
 "use client";
 import './switch.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Stack } from "../stack/stack.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 switch_module_default from "./switch.module.js";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -40,6 +40,7 @@ var Switch$1 = ({ className, description, dirty, disabled, error, invalid, label
 			children: [/* @__PURE__ */ jsx(Switch.Root, {
 				...componentProps,
 				className: clsx(switch_module_default.SwitchRoot, className),
+				"data-shrink": "false",
 				"data-size": size,
 				disabled,
 				name,

package/dist/components/textarea/textarea.js

@@ -1,10 +1,10 @@
 "use client";
 import './textarea.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Stack } from "../stack/stack.js";
 import { BasicInput } from "../basic-input/basic-input.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 textarea_module_default from "./textarea.module.js";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/textfield/textfield.js

@@ -1,11 +1,11 @@
 "use client";
 import './textfield.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Stack } from "../stack/stack.js";
 import { BasicInput } from "../basic-input/basic-input.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
 import { InputControlGroup } from "../basic-input/input-control-group.js";
-import { Stack } from "../stack/stack.js";
 import textfield_module_default from "./textfield.module.js";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/title/title.d.ts

@@ -16,6 +16,8 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraP
     /**
      * Replaces the default `span` root using Base UI render semantics.
      *
+     * Pair this with `level` for most headings so DOM semantics and visual preset stay intentionally aligned.
+     *
      * @default The title renders a `span` root.
      */
     render?: useRender.RenderProp;
@@ -26,9 +28,10 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraP
      */
     ref?: React.Ref<HTMLElement>;
     /**
-     * Selects a semantic heading typography size from the active theme scale.
+     * Selects a heading or display typography preset from the active theme scale.
      *
-     * This controls only the visual preset. Semantic heading choice remains owned by `render`.
+     * This controls only the visual preset. Semantic heading choice remains owned by `render`,
+     * because `Title` keeps a `span` root unless `render` replaces it.
      *
      * @default 'h1'
      */

package/dist/components/title/title.guide.json

@@ -3,16 +3,19 @@
   "summary": "Theme-aware heading and display typography primitive.",
   "whenToUse": [
     "Headings and display text with title presets",
-    "Semantic heading tags chosen through render",
+    "Semantic heading tags chosen explicitly through render",
+    "Level and render paired together for most heading use cases",
     "Fluid clamp sizing across title levels"
   ],
   "whenNotToUse": ["Body copy — use Text", "Body or mono family typography"],
   "accessibility": [
-    "Choose render to match the correct heading level for the page outline",
+    "Title renders a span by default, so choose render to match the correct heading level for the page outline",
     "Visual level presets do not replace picking the right h1–h6 element",
+    "Use level for appearance and render for semantics; pair them unless you intentionally need a visual mismatch",
     "Keep heading hierarchy sequential; do not skip levels for styling alone"
   ],
   "antiPatterns": [
+    "Assuming level changes the HTML tag automatically",
     "Letting level force the HTML tag instead of choosing render explicitly",
     "Using Title for long body paragraphs"
   ],

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

@@ -11,10 +11,17 @@ export type IntrinsicViraProps = {
      * @default The component root does not render a shrink attribute.
      */
     shrink?: boolean | undefined;
+    /**
+     * 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;
 };
 type IntrinsicViraAttributes = {
     'data-grow'?: 'false';
     'data-shrink'?: 'false';
+    'data-vibrant'?: '';
 };
 export declare const extractIntrinsicViraProps: <Props extends IntrinsicViraProps>(props: Props) => {
     componentProps: Omit<Props, keyof IntrinsicViraProps>;

package/dist/core/props/intrinsic-vira-props.js

@@ -1,11 +1,12 @@
 //#region src/core/props/intrinsic-vira-props.ts
 var extractIntrinsicViraProps = (props) => {
-	const { grow, shrink, ...componentProps } = props;
+	const { grow, shrink, vibrant, ...componentProps } = props;
 	return {
 		componentProps,
 		intrinsicAttributes: {
 			...grow === false ? { "data-grow": "false" } : {},
-			...shrink === false ? { "data-shrink": "false" } : {}
+			...shrink === false ? { "data-shrink": "false" } : {},
+			...vibrant === true ? { "data-vibrant": "" } : {}
 		}
 	};
 };

package/dist/core/theme/resolve-theme-value.d.ts

@@ -1,5 +1,4 @@
-import { default as theme } from '@viraui/foundation/vira/nested';
-type ThemeTree = typeof theme;
-type ThemeKey = keyof ThemeTree;
-export declare const resolveThemeValue: <TKey extends ThemeKey, TValue extends keyof ThemeTree[TKey], TFallback>(key: TValue | null | undefined | 0, themeKey: TKey, fallbackValue: TFallback) => ThemeTree[TKey][TValue] | TFallback;
+type ThemeKey = 'radius' | 'space';
+type ThemeValue = string;
+export declare const resolveThemeValue: <TKey extends ThemeKey, TValue extends string, TFallback>(key: TValue | null | undefined | 0, themeKey: TKey, fallbackValue: TFallback) => ThemeValue | TFallback;
 export {};

package/dist/core/theme/resolve-theme-value.js

@@ -1,8 +1,7 @@
-import theme from "@viraui/foundation/vira/nested";
 //#region src/core/theme/resolve-theme-value.ts
 var resolveThemeValue = (key, themeKey, fallbackValue) => {
 	if (!key) return fallbackValue;
-	return theme[themeKey][key];
+	return `var(--${themeKey}-${String(key)})`;
 };
 //#endregion
 export { resolveThemeValue };

package/dist/index.js

@@ -1,4 +1,7 @@
 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 { 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";
@@ -7,8 +10,8 @@ import { Spinner } from "./components/spinner/spinner.js";
 import { Button } from "./components/button/button.js";
 import { IconButton } from "./components/icon-button/icon-button.js";
 import { Text } from "./components/text/text.js";
-import { Stack } from "./components/stack/stack.js";
 import { LinearProgress } from "./components/linear-progress/linear-progress.js";
+import { Masonry } from "./components/masonry/masonry.js";
 import { Textfield } from "./components/textfield/textfield.js";
 import { Textarea } from "./components/textarea/textarea.js";
 import { Slider } from "./components/slider/slider.js";
@@ -16,9 +19,9 @@ import { Switch } from "./components/switch/switch.js";
 import { Checkbox } from "./components/checkbox/checkbox.js";
 import { Radio } from "./components/radio/radio.js";
 import { RadioGroup } from "./components/radio/radio-group.js";
-import { Icon } from "./components/icon/icon.js";
 import { Select } from "./components/select/select.js";
+import { Icon } from "./components/icon/icon.js";
 import { Skeleton } from "./components/skeleton/skeleton.js";
 import { Surface } from "./components/surface/surface.js";
 import { Title } from "./components/title/title.js";
-export { Avatar, Button, Checkbox, ClampText, ELEVATION_DEFAULTS, Elevator, Icon, IconButton, LinearProgress, Radio, RadioGroup, Select, Skeleton, Slider, Spinner, Stack, Surface, Switch, Text, Textarea, Textfield, Title, getElevationProps };
+export { Avatar, AvatarGroup, Button, Checkbox, Chip, ClampText, ELEVATION_DEFAULTS, Elevator, Icon, IconButton, LinearProgress, Masonry, Radio, RadioGroup, Select, Skeleton, Slider, Spinner, Stack, Surface, Switch, 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", "Clock", "DarkLight", "History", "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", "CircleHalfDottedClock", "CircleImage", "Clock", "DarkLight", "History", "Image", "ImagesLayered", "Lock", "LockOpen", "Magnifier", "Minus", "MoonStars", "Plus", "Quickstart", "RefreshAnticlockwise", "Sun", "Xmark"];
 export type GeneratedIconName = (typeof generatedIconNames)[number];
 export declare const generatedIconVariants: readonly ["duo"];
 export type GeneratedIconVariant = (typeof generatedIconVariants)[number];
@@ -27,9 +27,12 @@ export declare const generatedIconRegistry: {
         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 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 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>>;
         readonly Lock: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/Lock").LockProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
         readonly LockOpen: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/LockOpen").LockOpenProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
         readonly Magnifier: import("react").ForwardRefExoticComponent<Omit<import("./icons/duo/Magnifier").MagnifierProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/internal-icons/icon-registry.js

@@ -17,9 +17,12 @@ import ChevronLeftDuoIcon from './icons/duo/ChevronLeft';
 import ChevronRightDuoIcon from './icons/duo/ChevronRight';
 import ChevronUpDuoIcon from './icons/duo/ChevronUp';
 import CircleHalfDottedClockDuoIcon from './icons/duo/CircleHalfDottedClock';
+import CircleImageDuoIcon from './icons/duo/CircleImage';
 import ClockDuoIcon from './icons/duo/Clock';
 import DarkLightDuoIcon from './icons/duo/DarkLight';
 import HistoryDuoIcon from './icons/duo/History';
+import ImageDuoIcon from './icons/duo/Image';
+import ImagesLayeredDuoIcon from './icons/duo/ImagesLayered';
 import LockDuoIcon from './icons/duo/Lock';
 import LockOpenDuoIcon from './icons/duo/LockOpen';
 import MagnifierDuoIcon from './icons/duo/Magnifier';
@@ -50,9 +53,12 @@ export const generatedIconNames = [
     'ChevronRight',
     'ChevronUp',
     'CircleHalfDottedClock',
+    'CircleImage',
     'Clock',
     'DarkLight',
     'History',
+    'Image',
+    'ImagesLayered',
     'Lock',
     'LockOpen',
     'Magnifier',
@@ -86,9 +92,12 @@ export const generatedIconRegistry = {
         ChevronRight: ChevronRightDuoIcon,
         ChevronUp: ChevronUpDuoIcon,
         CircleHalfDottedClock: CircleHalfDottedClockDuoIcon,
+        CircleImage: CircleImageDuoIcon,
         Clock: ClockDuoIcon,
         DarkLight: DarkLightDuoIcon,
         History: HistoryDuoIcon,
+        Image: ImageDuoIcon,
+        ImagesLayered: ImagesLayeredDuoIcon,
         Lock: LockDuoIcon,
         LockOpen: LockOpenDuoIcon,
         Magnifier: MagnifierDuoIcon,

package/dist/internal-icons/icons/duo/ArrowDown.js

@@ -7,7 +7,7 @@ const ArrowDown = React.forwardRef(({ size, className, style, ...props }, ref) =
             width: props.width || 18,
             height: props.height || 18,
         };
-    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { d: "M9 15.75a.75.75 0 0 1-.75-.75V2.75a.75.75 0 0 1 1.5 0V15a.75.75 0 0 1-.75.75", "data-color": "color-2", opacity: ".4" }), _jsx("path", { d: "M9 16a.74.74 0 0 1-.53-.22l-4.25-4.25a.75.75 0 1 1 1.061-1.061l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.061 1.061l-4.25 4.25a.75.75 0 0 1-.53.22z" })] }) }));
+    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { d: "M9 15.75a.75.75 0 0 1-.75-.75V2.75a.75.75 0 0 1 1.5 0V15a.75.75 0 0 1-.75.75", "data-color": "color-2", opacity: ".3" }), _jsx("path", { d: "M9 16a.74.74 0 0 1-.53-.22l-4.25-4.25a.75.75 0 1 1 1.061-1.061l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.061 1.061l-4.25 4.25a.75.75 0 0 1-.53.22z" })] }) }));
 });
 ArrowDown.displayName = 'ArrowDown';
 export default ArrowDown;

package/dist/internal-icons/icons/duo/ArrowDownLeft.js

@@ -7,7 +7,7 @@ const ArrowDownLeft = React.forwardRef(({ size, className, style, ...props }, re
             width: props.width || 18,
             height: props.height || 18,
         };
-    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { d: "M4 14.75a.75.75 0 0 1-.53-1.281L13.72 3.22a.75.75 0 1 1 1.061 1.061L4.53 14.53a.75.75 0 0 1-.53.22", "data-color": "color-2", opacity: ".4" }), _jsx("path", { d: "M9.761 15H3.75a.75.75 0 0 1-.75-.75V8.24a.75.75 0 0 1 1.5 0v5.26h5.261a.75.75 0 0 1 0 1.5" })] }) }));
+    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { d: "M4 14.75a.75.75 0 0 1-.53-1.281L13.72 3.22a.75.75 0 1 1 1.061 1.061L4.53 14.53a.75.75 0 0 1-.53.22", "data-color": "color-2", opacity: ".3" }), _jsx("path", { d: "M9.761 15H3.75a.75.75 0 0 1-.75-.75V8.24a.75.75 0 0 1 1.5 0v5.26h5.261a.75.75 0 0 1 0 1.5" })] }) }));
 });
 ArrowDownLeft.displayName = 'ArrowDownLeft';
 export default ArrowDownLeft;

package/dist/internal-icons/icons/duo/ArrowDownRight.js

@@ -7,7 +7,7 @@ const ArrowDownRight = React.forwardRef(({ size, className, style, ...props }, r
             width: props.width || 18,
             height: props.height || 18,
         };
-    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { d: "M14 14.75a.74.74 0 0 1-.53-.22L3.22 4.28a.75.75 0 1 1 1.061-1.061L14.53 13.47a.75.75 0 0 1-.53 1.28", "data-color": "color-2", opacity: ".4" }), _jsx("path", { d: "M14.25 15H8.239a.75.75 0 0 1 0-1.5H13.5V8.24a.75.75 0 0 1 1.5 0v6.01a.75.75 0 0 1-.75.75" })] }) }));
+    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { d: "M14 14.75a.74.74 0 0 1-.53-.22L3.22 4.28a.75.75 0 1 1 1.061-1.061L14.53 13.47a.75.75 0 0 1-.53 1.28", "data-color": "color-2", opacity: ".3" }), _jsx("path", { d: "M14.25 15H8.239a.75.75 0 0 1 0-1.5H13.5V8.24a.75.75 0 0 1 1.5 0v6.01a.75.75 0 0 1-.75.75" })] }) }));
 });
 ArrowDownRight.displayName = 'ArrowDownRight';
 export default ArrowDownRight;

package/dist/internal-icons/icons/duo/ArrowLeft.js

@@ -7,7 +7,7 @@ const ArrowLeft = React.forwardRef(({ size, className, style, ...props }, ref) =
             width: props.width || 18,
             height: props.height || 18,
         };
-    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { d: "M15.25 9.75H3a.75.75 0 0 1 0-1.5h12.25a.75.75 0 0 1 0 1.5", "data-color": "color-2", opacity: ".4" }), _jsx("path", { d: "M7 14a.74.74 0 0 1-.53-.22L2.22 9.53a.75.75 0 0 1 0-1.061L6.47 4.22a.75.75 0 1 1 1.061 1.061l-3.72 3.72 3.72 3.72a.75.75 0 0 1-.53 1.281z" })] }) }));
+    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { d: "M15.25 9.75H3a.75.75 0 0 1 0-1.5h12.25a.75.75 0 0 1 0 1.5", "data-color": "color-2", opacity: ".3" }), _jsx("path", { d: "M7 14a.74.74 0 0 1-.53-.22L2.22 9.53a.75.75 0 0 1 0-1.061L6.47 4.22a.75.75 0 1 1 1.061 1.061l-3.72 3.72 3.72 3.72a.75.75 0 0 1-.53 1.281z" })] }) }));
 });
 ArrowLeft.displayName = 'ArrowLeft';
 export default ArrowLeft;

package/dist/internal-icons/icons/duo/ArrowRight.js

@@ -7,7 +7,7 @@ const ArrowRight = React.forwardRef(({ size, className, style, ...props }, ref)
             width: props.width || 18,
             height: props.height || 18,
         };
-    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { d: "M15 9.75H2.75a.75.75 0 0 1 0-1.5H15a.75.75 0 0 1 0 1.5", "data-color": "color-2", opacity: ".4" }), _jsx("path", { d: "M11 14a.75.75 0 0 1-.53-1.281l3.72-3.72-3.72-3.72a.75.75 0 1 1 1.061-1.061l4.25 4.25a.75.75 0 0 1 0 1.061l-4.25 4.25a.75.75 0 0 1-.53.22z" })] }) }));
+    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { d: "M15 9.75H2.75a.75.75 0 0 1 0-1.5H15a.75.75 0 0 1 0 1.5", "data-color": "color-2", opacity: ".3" }), _jsx("path", { d: "M11 14a.75.75 0 0 1-.53-1.281l3.72-3.72-3.72-3.72a.75.75 0 1 1 1.061-1.061l4.25 4.25a.75.75 0 0 1 0 1.061l-4.25 4.25a.75.75 0 0 1-.53.22z" })] }) }));
 });
 ArrowRight.displayName = 'ArrowRight';
 export default ArrowRight;

package/dist/internal-icons/icons/duo/ArrowUp.js

@@ -7,7 +7,7 @@ const ArrowUp = React.forwardRef(({ size, className, style, ...props }, ref) =>
             width: props.width || 18,
             height: props.height || 18,
         };
-    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { d: "M9 16a.75.75 0 0 1-.75-.75V3a.75.75 0 0 1 1.5 0v12.25A.75.75 0 0 1 9 16", "data-color": "color-2", opacity: ".4" }), _jsx("path", { d: "M13.25 7.75a.74.74 0 0 1-.53-.22L9 3.81 5.28 7.53a.75.75 0 1 1-1.061-1.061L8.47 2.22a.75.75 0 0 1 1.061 0l4.25 4.25a.75.75 0 0 1-.53 1.281z" })] }) }));
+    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { d: "M9 16a.75.75 0 0 1-.75-.75V3a.75.75 0 0 1 1.5 0v12.25A.75.75 0 0 1 9 16", "data-color": "color-2", opacity: ".3" }), _jsx("path", { d: "M13.25 7.75a.74.74 0 0 1-.53-.22L9 3.81 5.28 7.53a.75.75 0 1 1-1.061-1.061L8.47 2.22a.75.75 0 0 1 1.061 0l4.25 4.25a.75.75 0 0 1-.53 1.281z" })] }) }));
 });
 ArrowUp.displayName = 'ArrowUp';
 export default ArrowUp;

package/dist/internal-icons/icons/duo/ArrowUpLeft.js

@@ -7,7 +7,7 @@ const ArrowUpLeft = React.forwardRef(({ size, className, style, ...props }, ref)
             width: props.width || 18,
             height: props.height || 18,
         };
-    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { d: "M14.25 15a.74.74 0 0 1-.53-.22L3.47 4.53a.75.75 0 1 1 1.061-1.061L14.78 13.72a.75.75 0 0 1-.53 1.281z", "data-color": "color-2", opacity: ".4" }), _jsx("path", { d: "M3.75 10.51A.75.75 0 0 1 3 9.76V3.75A.75.75 0 0 1 3.75 3h6.011a.75.75 0 0 1 0 1.5H4.5v5.26a.75.75 0 0 1-.75.75" })] }) }));
+    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { d: "M14.25 15a.74.74 0 0 1-.53-.22L3.47 4.53a.75.75 0 1 1 1.061-1.061L14.78 13.72a.75.75 0 0 1-.53 1.281z", "data-color": "color-2", opacity: ".3" }), _jsx("path", { d: "M3.75 10.51A.75.75 0 0 1 3 9.76V3.75A.75.75 0 0 1 3.75 3h6.011a.75.75 0 0 1 0 1.5H4.5v5.26a.75.75 0 0 1-.75.75" })] }) }));
 });
 ArrowUpLeft.displayName = 'ArrowUpLeft';
 export default ArrowUpLeft;

package/dist/internal-icons/icons/duo/ArrowUpRight.js

@@ -7,7 +7,7 @@ const ArrowUpRight = React.forwardRef(({ size, className, style, ...props }, ref
             width: props.width || 18,
             height: props.height || 18,
         };
-    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { d: "M3.75 15a.75.75 0 0 1-.53-1.281L13.47 3.47a.75.75 0 1 1 1.061 1.061L4.28 14.78a.75.75 0 0 1-.53.22", "data-color": "color-2", opacity: ".4" }), _jsx("path", { d: "M14.25 10.51a.75.75 0 0 1-.75-.75V4.5H8.24a.75.75 0 0 1 0-1.5h6.01a.75.75 0 0 1 .75.75v6.01a.75.75 0 0 1-.75.75" })] }) }));
+    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { d: "M3.75 15a.75.75 0 0 1-.53-1.281L13.47 3.47a.75.75 0 1 1 1.061 1.061L4.28 14.78a.75.75 0 0 1-.53.22", "data-color": "color-2", opacity: ".3" }), _jsx("path", { d: "M14.25 10.51a.75.75 0 0 1-.75-.75V4.5H8.24a.75.75 0 0 1 0-1.5h6.01a.75.75 0 0 1 .75.75v6.01a.75.75 0 0 1-.75.75" })] }) }));
 });
 ArrowUpRight.displayName = 'ArrowUpRight';
 export default ArrowUpRight;

package/dist/internal-icons/icons/duo/CaretDown.js

@@ -7,7 +7,7 @@ const CaretDown = React.forwardRef(({ size, className, style, ...props }, ref) =
             width: props.width || 18,
             height: props.height || 18,
         };
-    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsx("path", { fillOpacity: ".4", d: "M14.024 4H3.976a1.749 1.749 0 0 0-1.478 2.687l5.024 7.923A1.74 1.74 0 0 0 9 15.422c.603 0 1.155-.304 1.478-.812l5.025-7.924a1.749 1.749 0 0 0-1.478-2.687z", className: "nc-icon-wrapper", "data-color": "color-2" }) }));
+    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsx("path", { fillOpacity: ".3", d: "M14.024 4H3.976a1.749 1.749 0 0 0-1.478 2.687l5.024 7.923A1.74 1.74 0 0 0 9 15.422c.603 0 1.155-.304 1.478-.812l5.025-7.924a1.749 1.749 0 0 0-1.478-2.687z", className: "nc-icon-wrapper", "data-color": "color-2" }) }));
 });
 CaretDown.displayName = 'CaretDown';
 export default CaretDown;

package/dist/internal-icons/icons/duo/CaretLeft.js

@@ -7,7 +7,7 @@ const CaretLeft = React.forwardRef(({ size, className, style, ...props }, ref) =
             width: props.width || 18,
             height: props.height || 18,
         };
-    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsx("path", { fillOpacity: ".4", d: "M13.094 2.442a1.75 1.75 0 0 0-1.781.055L3.389 7.522A1.74 1.74 0 0 0 2.577 9c0 .603.304 1.155.812 1.478l7.924 5.025a1.75 1.75 0 0 0 1.781.054A1.75 1.75 0 0 0 14 14.024V3.976a1.75 1.75 0 0 0-.906-1.534", className: "nc-icon-wrapper", "data-color": "color-2" }) }));
+    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsx("path", { fillOpacity: ".3", d: "M13.094 2.442a1.75 1.75 0 0 0-1.781.055L3.389 7.522A1.74 1.74 0 0 0 2.577 9c0 .603.304 1.155.812 1.478l7.924 5.025a1.75 1.75 0 0 0 1.781.054A1.75 1.75 0 0 0 14 14.024V3.976a1.75 1.75 0 0 0-.906-1.534", className: "nc-icon-wrapper", "data-color": "color-2" }) }));
 });
 CaretLeft.displayName = 'CaretLeft';
 export default CaretLeft;

package/dist/internal-icons/icons/duo/CaretRight.js

@@ -7,7 +7,7 @@ const CaretRight = React.forwardRef(({ size, className, style, ...props }, ref)
             width: props.width || 18,
             height: props.height || 18,
         };
-    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsx("path", { fillOpacity: ".4", d: "M14.611 7.522 6.687 2.497A1.75 1.75 0 0 0 4 3.975v10.049a1.749 1.749 0 0 0 2.688 1.478l7.923-5.024A1.74 1.74 0 0 0 15.423 9c0-.603-.304-1.155-.812-1.478", className: "nc-icon-wrapper", "data-color": "color-2" }) }));
+    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsx("path", { fillOpacity: ".3", d: "M14.611 7.522 6.687 2.497A1.75 1.75 0 0 0 4 3.975v10.049a1.749 1.749 0 0 0 2.688 1.478l7.923-5.024A1.74 1.74 0 0 0 15.423 9c0-.603-.304-1.155-.812-1.478", className: "nc-icon-wrapper", "data-color": "color-2" }) }));
 });
 CaretRight.displayName = 'CaretRight';
 export default CaretRight;

package/dist/internal-icons/icons/duo/CaretUp.js

@@ -7,7 +7,7 @@ const CaretUp = React.forwardRef(({ size, className, style, ...props }, ref) =>
             width: props.width || 18,
             height: props.height || 18,
         };
-    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsx("path", { fillOpacity: ".4", d: "M10.478 3.389A1.74 1.74 0 0 0 9 2.577c-.603 0-1.155.304-1.478.812l-5.025 7.924A1.749 1.749 0 0 0 3.975 14h10.049a1.749 1.749 0 0 0 1.478-2.687z", className: "nc-icon-wrapper", "data-color": "color-2" }) }));
+    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsx("path", { fillOpacity: ".3", d: "M10.478 3.389A1.74 1.74 0 0 0 9 2.577c-.603 0-1.155.304-1.478.812l-5.025 7.924A1.749 1.749 0 0 0 3.975 14h10.049a1.749 1.749 0 0 0 1.478-2.687z", className: "nc-icon-wrapper", "data-color": "color-2" }) }));
 });
 CaretUp.displayName = 'CaretUp';
 export default CaretUp;

package/dist/internal-icons/icons/duo/ChevronExpandY.js

@@ -7,7 +7,7 @@ const ChevronExpandY = React.forwardRef(({ size, className, style, ...props }, r
             width: props.width || 18,
             height: props.height || 18,
         };
-    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { d: "M11.97 11.22 9 14.19l-2.97-2.97a.75.75 0 1 0-1.061 1.061l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 1 0-1.061-1.061z", "data-color": "color-2", opacity: ".4" }), _jsx("path", { d: "M9.53 2.22a.75.75 0 0 0-1.061 0l-3.5 3.5A.75.75 0 0 0 6.03 6.781L9 3.811l2.97 2.97a.75.75 0 0 0 1.06 0 .75.75 0 0 0 0-1.061z" })] }) }));
+    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { d: "M11.97 11.22 9 14.19l-2.97-2.97a.75.75 0 1 0-1.061 1.061l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 1 0-1.061-1.061z", "data-color": "color-2", opacity: ".3" }), _jsx("path", { d: "M9.53 2.22a.75.75 0 0 0-1.061 0l-3.5 3.5A.75.75 0 0 0 6.03 6.781L9 3.811l2.97 2.97a.75.75 0 0 0 1.06 0 .75.75 0 0 0 0-1.061z" })] }) }));
 });
 ChevronExpandY.displayName = 'ChevronExpandY';
 export default ChevronExpandY;

package/dist/internal-icons/icons/duo/CircleHalfDottedClock.js

@@ -7,7 +7,7 @@ const CircleHalfDottedClock = React.forwardRef(({ size, className, style, ...pro
             width: props.width || 18,
             height: props.height || 18,
         };
-    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { fillRule: "evenodd", d: "M9 4a.75.75 0 0 1 .75.75v3.857l2.927 2.026a.75.75 0 1 1-.854 1.234l-3.25-2.25A.75.75 0 0 1 8.25 9V4.75A.75.75 0 0 1 9 4", clipRule: "evenodd" }), _jsx("path", { fillOpacity: ".4", fillRule: "evenodd", d: "M8.25 1.75A.75.75 0 0 1 9 1a8 8 0 0 1 0 16 .75.75 0 0 1 0-1.5 6.5 6.5 0 0 0 0-13 .75.75 0 0 1-.75-.75", clipRule: "evenodd", "data-color": "color-2" }), _jsx("path", { fillOpacity: ".4", d: "M3.873 14.877a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M1.75 9.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5m2.123-5.127a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5m2.353 11.825a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5m-3.924-3.924a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5m0-5.548a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5m3.924-3.924a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5", "data-color": "color-2" })] }) }));
+    return (_jsx("svg", { ref: ref, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", width: dimensions.width, height: dimensions.height, fill: props.fill || 'currentColor', className: className, style: style, ...props, children: _jsxs("g", { className: "nc-icon-wrapper", children: [_jsx("path", { fillRule: "evenodd", d: "M9 4a.75.75 0 0 1 .75.75v3.857l2.927 2.026a.75.75 0 1 1-.854 1.234l-3.25-2.25A.75.75 0 0 1 8.25 9V4.75A.75.75 0 0 1 9 4", clipRule: "evenodd" }), _jsx("path", { fillOpacity: ".3", fillRule: "evenodd", d: "M8.25 1.75A.75.75 0 0 1 9 1a8 8 0 0 1 0 16 .75.75 0 0 1 0-1.5 6.5 6.5 0 0 0 0-13 .75.75 0 0 1-.75-.75", clipRule: "evenodd", "data-color": "color-2" }), _jsx("path", { fillOpacity: ".3", d: "M3.873 14.877a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M1.75 9.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5m2.123-5.127a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5m2.353 11.825a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5m-3.924-3.924a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5m0-5.548a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5m3.924-3.924a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5", "data-color": "color-2" })] }) }));
 });
 CircleHalfDottedClock.displayName = 'CircleHalfDottedClock';
 export default CircleHalfDottedClock;

package/dist/internal-icons/icons/duo/CircleImage.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+export interface CircleImageProps extends SVGProps<SVGSVGElement> {
+    size?: number | string;
+}
+declare const CircleImage: React.ForwardRefExoticComponent<Omit<CircleImageProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default CircleImage;