@viraui/react 0.0.18 → 0.0.20

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+const CircleImage = React.forwardRef(({ size, className, style, ...props }, ref) => {
+    const dimensions = size
+        ? { width: size, height: size }
+        : {
+            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", { fillOpacity: ".3", fillRule: "evenodd", d: "M1 9a8 8 0 1 1 16 0A8 8 0 0 1 1 9", clipRule: "evenodd", "data-color": "color-2" }), _jsx("path", { d: "M16.214 12.463A8 8 0 0 1 9 17a7.97 7.97 0 0 1-5.27-1.98l6.106-6.106a2 2 0 0 1 2.828 0zM6.25 8.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5" })] }) }));
+});
+CircleImage.displayName = 'CircleImage';
+export default CircleImage;

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

@@ -7,7 +7,7 @@ const Clock = 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", { fillRule: "evenodd", className: "nc-icon-wrapper", clipRule: "evenodd", children: [_jsx("path", { fillOpacity: ".4", d: "M1 9a8 8 0 1 1 16 0A8 8 0 0 1 1 9", "data-color": "color-2" }), _jsx("path", { 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" })] }) }));
+    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", { fillRule: "evenodd", className: "nc-icon-wrapper", clipRule: "evenodd", children: [_jsx("path", { fillOpacity: ".3", d: "M1 9a8 8 0 1 1 16 0A8 8 0 0 1 1 9", "data-color": "color-2" }), _jsx("path", { 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" })] }) }));
 });
 Clock.displayName = 'Clock';
 export default Clock;

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

@@ -7,7 +7,7 @@ const DarkLight = 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: "M5 9a4 4 0 0 1 4-4v8a4 4 0 0 1-4-4" }), _jsx("path", { fillOpacity: ".4", d: "M1 9a8 8 0 0 1 8-8v4a4 4 0 0 0 0 8v4a8 8 0 0 1-8-8m12 0a4 4 0 0 0-4-4v8a4 4 0 0 0 4-4", "data-color": "color-2" }), _jsx("path", { d: "M17 9a8 8 0 0 0-8-8v4a4 4 0 1 1 0 8v4a8 8 0 0 0 8-8" })] }) }));
+    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: "M5 9a4 4 0 0 1 4-4v8a4 4 0 0 1-4-4" }), _jsx("path", { fillOpacity: ".3", d: "M1 9a8 8 0 0 1 8-8v4a4 4 0 0 0 0 8v4a8 8 0 0 1-8-8m12 0a4 4 0 0 0-4-4v8a4 4 0 0 0 4-4", "data-color": "color-2" }), _jsx("path", { d: "M17 9a8 8 0 0 0-8-8v4a4 4 0 1 1 0 8v4a8 8 0 0 0 8-8" })] }) }));
 });
 DarkLight.displayName = 'DarkLight';
 export default DarkLight;

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

@@ -7,7 +7,7 @@ const History = 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 4a.75.75 0 0 0-.75.75V9c0 .246.121.477.323.617l3.25 2.25a.747.747 0 0 0 1.043-.19.75.75 0 0 0-.19-1.043L9.749 8.608V4.751a.75.75 0 0 0-.75-.75z" }), _jsx("path", { d: "M9 1a7.98 7.98 0 0 0-6.261 3.037l-.116-.835a.75.75 0 0 0-1.486.206l.408 2.945a.75.75 0 0 0 .846.64l2.944-.406a.75.75 0 0 0-.205-1.486l-1.457.2A6.48 6.48 0 0 1 9 2.502c3.584 0 6.5 2.915 6.5 6.5s-2.916 6.5-6.5 6.5a6.463 6.463 0 0 1-6.497-6.32.74.74 0 0 0-.77-.728.75.75 0 0 0-.73.77A7.956 7.956 0 0 0 9 17c4.411 0 8-3.589 8-8s-3.589-8-8-8", "data-color": "color-2", opacity: ".4" })] }) }));
+    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 4a.75.75 0 0 0-.75.75V9c0 .246.121.477.323.617l3.25 2.25a.747.747 0 0 0 1.043-.19.75.75 0 0 0-.19-1.043L9.749 8.608V4.751a.75.75 0 0 0-.75-.75z" }), _jsx("path", { d: "M9 1a7.98 7.98 0 0 0-6.261 3.037l-.116-.835a.75.75 0 0 0-1.486.206l.408 2.945a.75.75 0 0 0 .846.64l2.944-.406a.75.75 0 0 0-.205-1.486l-1.457.2A6.48 6.48 0 0 1 9 2.502c3.584 0 6.5 2.915 6.5 6.5s-2.916 6.5-6.5 6.5a6.463 6.463 0 0 1-6.497-6.32.74.74 0 0 0-.77-.728.75.75 0 0 0-.73.77A7.956 7.956 0 0 0 9 17c4.411 0 8-3.589 8-8s-3.589-8-8-8", "data-color": "color-2", opacity: ".3" })] }) }));
 });
 History.displayName = 'History';
 export default History;

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

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

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+const Image = React.forwardRef(({ size, className, style, ...props }, ref) => {
+    const dimensions = size
+        ? { width: size, height: size }
+        : {
+            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", { fillOpacity: ".3", fillRule: "evenodd", d: "M2.001 4.75A2.75 2.75 0 0 1 4.751 2h8.5a2.75 2.75 0 0 1 2.75 2.75v8.5a2.75 2.75 0 0 1-2.75 2.75h-8.5a2.75 2.75 0 0 1-2.75-2.75z", clipRule: "evenodd", "data-color": "color-2" }), _jsx("path", { d: "M16.001 13.25v-1.06l-2.806-2.806a2.75 2.75 0 0 0-3.888 0l-6.125 6.125c.445.31.986.491 1.569.491h8.5a2.75 2.75 0 0 0 2.75-2.75M6.251 8.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5" })] }) }));
+});
+Image.displayName = 'Image';
+export default Image;

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

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

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+const ImagesLayered = React.forwardRef(({ size, className, style, ...props }, ref) => {
+    const dimensions = size
+        ? { width: size, height: size }
+        : {
+            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: "M13.75 4.5h-6.5A2.75 2.75 0 0 0 4.5 7.25v6.5a2.75 2.75 0 0 0 2.75 2.75h6.5a2.75 2.75 0 0 0 2.75-2.75v-6.5a2.75 2.75 0 0 0-2.75-2.75", "data-color": "color-2", opacity: ".3" }), _jsx("path", { d: "M4.5 13.75v-6.5A2.753 2.753 0 0 1 7.25 4.5h5.804L12.9 3.46a2.753 2.753 0 0 0-3.125-2.315L3.346 2.1A2.753 2.753 0 0 0 1.03 5.224l.955 6.43a2.75 2.75 0 0 0 2.54 2.337c-.008-.08-.025-.158-.025-.241m9.152-3.736a1.74 1.74 0 0 0-1.236-.514h-.002c-.468 0-.907.182-1.237.512l-5.77 5.766a2.73 2.73 0 0 0 1.843.722h6.5a2.75 2.75 0 0 0 2.75-2.75v-.889z" }), _jsx("path", { d: "M8.251 9.5c-.689 0-1.25-.561-1.25-1.25S7.562 7 8.251 7s1.25.561 1.25 1.25S8.94 9.5 8.251 9.5" })] }) }));
+});
+ImagesLayered.displayName = 'ImagesLayered';
+export default ImagesLayered;

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

@@ -7,7 +7,7 @@ const Lock = 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", { fillOpacity: ".4", fillRule: "evenodd", d: "M2.5 10.25A2.75 2.75 0 0 1 5.25 7.5h7.5a2.75 2.75 0 0 1 2.75 2.75v4A2.75 2.75 0 0 1 12.75 17h-7.5a2.75 2.75 0 0 1-2.75-2.75z", clipRule: "evenodd", "data-color": "color-2" }), _jsx("path", { fillRule: "evenodd", d: "M9 11a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1A.75.75 0 0 1 9 11", clipRule: "evenodd" }), _jsx("path", { d: "M6.5 5a2.5 2.5 0 1 1 5 0v2.5h1.25q.126 0 .25.011V5a4 4 0 1 0-8 0v2.511q.123-.1.25-.011H6.5z" })] }) }));
+    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", { fillOpacity: ".3", fillRule: "evenodd", d: "M2.5 10.25A2.75 2.75 0 0 1 5.25 7.5h7.5a2.75 2.75 0 0 1 2.75 2.75v4A2.75 2.75 0 0 1 12.75 17h-7.5a2.75 2.75 0 0 1-2.75-2.75z", clipRule: "evenodd", "data-color": "color-2" }), _jsx("path", { fillRule: "evenodd", d: "M9 11a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1A.75.75 0 0 1 9 11", clipRule: "evenodd" }), _jsx("path", { d: "M6.5 5a2.5 2.5 0 1 1 5 0v2.5h1.25q.126 0 .25.011V5a4 4 0 1 0-8 0v2.511q.123-.1.25-.011H6.5z" })] }) }));
 });
 Lock.displayName = 'Lock';
 export default Lock;

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

@@ -7,7 +7,7 @@ const LockOpen = 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", { fillOpacity: ".4", fillRule: "evenodd", d: "M3 10.25A2.75 2.75 0 0 1 5.75 7.5h7.5A2.75 2.75 0 0 1 16 10.25v4A2.75 2.75 0 0 1 13.25 17h-7.5A2.75 2.75 0 0 1 3 14.25z", clipRule: "evenodd", "data-color": "color-2" }), _jsx("path", { fillRule: "evenodd", d: "M9.5 11a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1A.75.75 0 0 1 9.5 11", clipRule: "evenodd" }), _jsx("path", { d: "M4 1a4 4 0 0 0-4 4v1.25a.75.75 0 0 0 1.5 0V5a2.5 2.5 0 1 1 5 0v2.5H8V5a4 4 0 0 0-4-4" })] }) }));
+    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", { fillOpacity: ".3", fillRule: "evenodd", d: "M3 10.25A2.75 2.75 0 0 1 5.75 7.5h7.5A2.75 2.75 0 0 1 16 10.25v4A2.75 2.75 0 0 1 13.25 17h-7.5A2.75 2.75 0 0 1 3 14.25z", clipRule: "evenodd", "data-color": "color-2" }), _jsx("path", { fillRule: "evenodd", d: "M9.5 11a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1A.75.75 0 0 1 9.5 11", clipRule: "evenodd" }), _jsx("path", { d: "M4 1a4 4 0 0 0-4 4v1.25a.75.75 0 0 0 1.5 0V5a2.5 2.5 0 1 1 5 0v2.5H8V5a4 4 0 0 0-4-4" })] }) }));
 });
 LockOpen.displayName = 'LockOpen';
 export default LockOpen;

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

@@ -7,7 +7,7 @@ const Magnifier = 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", { stroke: "#f7f7f7", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", className: "nc-icon-wrapper", children: [_jsx("path", { fillOpacity: ".3", stroke: "none", d: "M7.25 12.25a5 5 0 1 0 0-10 5 5 0 0 0 0 10", "data-color": "color-2", "data-stroke": "none" }), _jsx("path", { d: "m15.75 15.75-2.847-2.847M7.25 12.25a5 5 0 1 0 0-10 5 5 0 0 0 0 10" })] }) }));
+    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", { fillOpacity: ".4", fillRule: "evenodd", d: "M1.5 7.75a6.25 6.25 0 1 1 12.5 0 6.25 6.25 0 0 1-12.5 0", clipRule: "evenodd", "data-color": "color-2" }), _jsx("path", { d: "m11.607 12.668 3.613 3.612a.75.75 0 1 0 1.06-1.06l-3.612-3.613q-.467.594-1.06 1.061" }), _jsx("path", { fillRule: "evenodd", d: "M7 4.75A.75.75 0 0 1 7.75 4a3.753 3.753 0 0 1 3.75 3.75.75.75 0 0 1-1.5 0C10 6.51 8.99 5.5 7.75 5.5A.75.75 0 0 1 7 4.75", clipRule: "evenodd" })] }) }));
 });
 Magnifier.displayName = 'Magnifier';
 export default Magnifier;

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

@@ -7,7 +7,7 @@ const MoonStars = 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", { fillOpacity: ".4", fillRule: "evenodd", d: "M8.544 1.474a.75.75 0 0 1-.21.84A5.47 5.47 0 0 0 7.5 5.5 5.5 5.5 0 0 0 13 11c1.05 0 2.029-.3 2.867-.813a.75.75 0 0 1 1.118.828C16.09 14.453 12.974 17 9.25 17a8 8 0 0 1-8-8c0-3.915 2.813-7.166 6.524-7.86a.75.75 0 0 1 .77.334", clipRule: "evenodd", "data-color": "color-2" }), _jsx("path", { d: "m12.743 4.492-.946-.315-.316-.947c-.102-.306-.609-.306-.711 0l-.316.947-.946.315a.375.375 0 0 0 0 .712l.946.315.316.947a.374.374 0 0 0 .71 0l.316-.947.946-.315a.375.375 0 0 0 .001-.712M14.25 8.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 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", { fillOpacity: ".3", fillRule: "evenodd", d: "M8.544 1.474a.75.75 0 0 1-.21.84A5.47 5.47 0 0 0 7.5 5.5 5.5 5.5 0 0 0 13 11c1.05 0 2.029-.3 2.867-.813a.75.75 0 0 1 1.118.828C16.09 14.453 12.974 17 9.25 17a8 8 0 0 1-8-8c0-3.915 2.813-7.166 6.524-7.86a.75.75 0 0 1 .77.334", clipRule: "evenodd", "data-color": "color-2" }), _jsx("path", { d: "m12.743 4.492-.946-.315-.316-.947c-.102-.306-.609-.306-.711 0l-.316.947-.946.315a.375.375 0 0 0 0 .712l.946.315.316.947a.374.374 0 0 0 .71 0l.316-.947.946-.315a.375.375 0 0 0 .001-.712M14.25 8.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" })] }) }));
 });
 MoonStars.displayName = 'MoonStars';
 export default MoonStars;

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

@@ -7,7 +7,7 @@ const Quickstart = 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", { fillRule: "evenodd", d: "M13.72 2.22a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1-1.06 1.06l-2-2a.75.75 0 0 1 0-1.06", clipRule: "evenodd" }), _jsx("path", { d: "M6.75.5a.75.75 0 0 0 0 1.5h1.5v1.04a7 7 0 0 1 1.5 0V2h1.5a.75.75 0 0 0 0-1.5z" }), _jsx("path", { fillOpacity: ".4", d: "M2.07 9A7.001 7.001 0 0 1 16 10a7 7 0 0 1-13.064 3.5H2.25a.75.75 0 0 1 0-1.5h2a.75.75 0 0 0 0-1.5H.75a.75.75 0 0 1 0-1.5z", "data-color": "color-2" }), _jsx("path", { fillRule: "evenodd", d: "M11.78 7.22a.75.75 0 0 1 0 1.06l-2.25 2.25a.75.75 0 1 1-1.06-1.06l2.25-2.25a.75.75 0 0 1 1.06 0", clipRule: "evenodd" })] }) }));
+    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: "M13.72 2.22a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1-1.06 1.06l-2-2a.75.75 0 0 1 0-1.06", clipRule: "evenodd" }), _jsx("path", { d: "M6.75.5a.75.75 0 0 0 0 1.5h1.5v1.04a7 7 0 0 1 1.5 0V2h1.5a.75.75 0 0 0 0-1.5z" }), _jsx("path", { fillOpacity: ".3", d: "M2.07 9A7.001 7.001 0 0 1 16 10a7 7 0 0 1-13.064 3.5H2.25a.75.75 0 0 1 0-1.5h2a.75.75 0 0 0 0-1.5H.75a.75.75 0 0 1 0-1.5z", "data-color": "color-2" }), _jsx("path", { fillRule: "evenodd", d: "M11.78 7.22a.75.75 0 0 1 0 1.06l-2.25 2.25a.75.75 0 1 1-1.06-1.06l2.25-2.25a.75.75 0 0 1 1.06 0", clipRule: "evenodd" })] }) }));
 });
 Quickstart.displayName = 'Quickstart';
 export default Quickstart;

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

@@ -7,7 +7,7 @@ const RefreshAnticlockwise = React.forwardRef(({ size, className, style, ...prop
             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 1a7.97 7.97 0 0 0-6.262 3.033l-.116-.83a.749.749 0 1 0-1.485.205l.408 2.945a.75.75 0 0 0 .846.64l2.943-.407a.75.75 0 0 0 .641-.846.756.756 0 0 0-.846-.64l-1.456.2A6.47 6.47 0 0 1 9 2.501c3.545 0 6.4 2.774 6.497 6.316a.75.75 0 0 0 .75.729h.02a.75.75 0 0 0 .73-.77A7.956 7.956 0 0 0 9 1" }), _jsx("path", { d: "m15.61 11.007-2.944.407a.75.75 0 0 0-.641.846c.57.41.435.69.846.64l1.456-.201A6.48 6.48 0 0 1 9 15.499a6.465 6.465 0 0 1-6.498-6.317c-.01-.414-.352-.761-.77-.729a.75.75 0 0 0-.729.77A7.956 7.956 0 0 0 9 17a7.98 7.98 0 0 0 6.262-3.036l.115.834a.75.75 0 1 0 1.486-.206l-.408-2.945a.753.753 0 0 0-.846-.64", "data-color": "color-2", opacity: ".4" })] }) }));
+    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 1a7.97 7.97 0 0 0-6.262 3.033l-.116-.83a.749.749 0 1 0-1.485.205l.408 2.945a.75.75 0 0 0 .846.64l2.943-.407a.75.75 0 0 0 .641-.846.756.756 0 0 0-.846-.64l-1.456.2A6.47 6.47 0 0 1 9 2.501c3.545 0 6.4 2.774 6.497 6.316a.75.75 0 0 0 .75.729h.02a.75.75 0 0 0 .73-.77A7.956 7.956 0 0 0 9 1" }), _jsx("path", { d: "m15.61 11.007-2.944.407a.75.75 0 0 0-.641.846c.57.41.435.69.846.64l1.456-.201A6.48 6.48 0 0 1 9 15.499a6.465 6.465 0 0 1-6.498-6.317c-.01-.414-.352-.761-.77-.729a.75.75 0 0 0-.729.77A7.956 7.956 0 0 0 9 17a7.98 7.98 0 0 0 6.262-3.036l.115.834a.75.75 0 1 0 1.486-.206l-.408-2.945a.753.753 0 0 0-.846-.64", "data-color": "color-2", opacity: ".3" })] }) }));
 });
 RefreshAnticlockwise.displayName = 'RefreshAnticlockwise';
 export default RefreshAnticlockwise;

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

@@ -7,7 +7,7 @@ const Sun = 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", { fillRule: "evenodd", d: "M9 .5a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1A.75.75 0 0 1 9 .5m6.01 2.49a.75.75 0 0 1 0 1.06l-.707.707a.75.75 0 1 1-1.06-1.06l.707-.707a.75.75 0 0 1 1.06 0M15 9a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1A.75.75 0 0 1 15 9m-1.757 4.243a.75.75 0 0 1 1.06 0l.707.707a.75.75 0 1 1-1.06 1.06l-.707-.707a.75.75 0 0 1 0-1.06M9 15a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1A.75.75 0 0 1 9 15m-4.243-1.757a.75.75 0 0 1 0 1.06l-.707.707a.75.75 0 0 1-1.06-1.06l.707-.707a.75.75 0 0 1 1.06 0M.5 9a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1A.75.75 0 0 1 .5 9m2.49-6.01a.75.75 0 0 1 1.06 0l.707.707a.75.75 0 0 1-1.06 1.06L2.99 4.05a.75.75 0 0 1 0-1.06", clipRule: "evenodd" }), _jsx("path", { fillOpacity: ".4", d: "M9 13.25a4.25 4.25 0 1 0 0-8.5 4.25 4.25 0 0 0 0 8.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 .5a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1A.75.75 0 0 1 9 .5m6.01 2.49a.75.75 0 0 1 0 1.06l-.707.707a.75.75 0 1 1-1.06-1.06l.707-.707a.75.75 0 0 1 1.06 0M15 9a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1A.75.75 0 0 1 15 9m-1.757 4.243a.75.75 0 0 1 1.06 0l.707.707a.75.75 0 1 1-1.06 1.06l-.707-.707a.75.75 0 0 1 0-1.06M9 15a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1A.75.75 0 0 1 9 15m-4.243-1.757a.75.75 0 0 1 0 1.06l-.707.707a.75.75 0 0 1-1.06-1.06l.707-.707a.75.75 0 0 1 1.06 0M.5 9a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1A.75.75 0 0 1 .5 9m2.49-6.01a.75.75 0 0 1 1.06 0l.707.707a.75.75 0 0 1-1.06 1.06L2.99 4.05a.75.75 0 0 1 0-1.06", clipRule: "evenodd" }), _jsx("path", { fillOpacity: ".3", d: "M9 13.25a4.25 4.25 0 1 0 0-8.5 4.25 4.25 0 0 0 0 8.5", "data-color": "color-2" })] }) }));
 });
 Sun.displayName = 'Sun';
 export default Sun;

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

@@ -27,9 +27,12 @@ export { default as ChevronLeft } from './ChevronLeft';
 export { default as ChevronRight } from './ChevronRight';
 export { default as ChevronUp } from './ChevronUp';
 export { default as CircleHalfDottedClock } from './CircleHalfDottedClock';
+export { default as CircleImage } from './CircleImage';
 export { default as Clock } from './Clock';
 export { default as DarkLight } from './DarkLight';
 export { default as History } from './History';
+export { default as Image } from './Image';
+export { default as ImagesLayered } from './ImagesLayered';
 export { default as Lock } from './Lock';
 export { default as LockOpen } from './LockOpen';
 export { default as Magnifier } from './Magnifier';

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

@@ -27,9 +27,12 @@ export { default as ChevronLeft } from './ChevronLeft';
 export { default as ChevronRight } from './ChevronRight';
 export { default as ChevronUp } from './ChevronUp';
 export { default as CircleHalfDottedClock } from './CircleHalfDottedClock';
+export { default as CircleImage } from './CircleImage';
 export { default as Clock } from './Clock';
 export { default as DarkLight } from './DarkLight';
 export { default as History } from './History';
+export { default as Image } from './Image';
+export { default as ImagesLayered } from './ImagesLayered';
 export { default as Lock } from './Lock';
 export { default as LockOpen } from './LockOpen';
 export { default as Magnifier } from './Magnifier';

package/dist/preflight.css

@@ -1 +1 @@
-@layer viraui.preflight;@layer viraui.preflight{html{--scrollbar-thumb:light-dark(var(--base-4),var(--base-3));--scrollbar-track:transparent;font-size:100%;box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground)}*{corner-shape:var(--corner-shape,unset)}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}:focus-visible{outline:2px solid var(--global-foreground);outline-offset:2px}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-medium);font-optical-sizing:auto;font-family:var(--font-family-body),sans-serif;font-variation-settings:"wght" 400}::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));text-shadow:none}img{display:block;inline-size:100%;max-inline-size:100%}svg:not([fill]){fill:currentcolor}fieldset{border:0}ol ul,ul ol{font-size:medium}table{border-spacing:0;width:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table td,table th{border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px transparent;--shadow-color:oklch(0% 0 0deg)}}@layer viraui.preflight{[data-elevation]:where([data-elevation-direction=bottom],[data-elevation-direction=right]){--shadow-direction:1}[data-elevation]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-direction:-1}[data-elevation-hover="0"]:hover,[data-elevation="0"]{--y1:0px;--x1:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),0 0 0 color-mix(in oklch,var(--shadow-color),transparent calc(94% - var(--shadow-opacity-factor))),0 0 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{--y1:0px;--y2:2px;--y3:4px;--y4:7px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 1px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 2px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 2px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:0px;--x2:2px;--x3:4px;--x4:7px}[data-elevation-hover="2"]:hover,[data-elevation="2"]{--y1:1px;--y2:5px;--y3:11px;--y4:19px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 6px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]):hover,[data-elevation="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]){box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 7px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:1px;--x2:5px;--x3:11px;--x4:19px}[data-elevation-hover="2"]:where([data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=right]){box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 6px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:2px;--y2:7px;--y3:16px;--y4:29px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 4px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 7px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 10px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 12px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:2px;--x2:7px;--x3:16px;--x4:29px}[data-elevation-hover="3"]:where([data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=right]){--x2:10px;--x3:22px;--x4:39px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 10px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 13px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 15px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:4px;--y2:14px;--y3:33px;--y4:58px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 14px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:where([data-elevation-direction=top]):hover,[data-elevation="4"]:where([data-elevation-direction=top]){--y2:15px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 15px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:where([data-elevation-direction=left]):hover,[data-elevation="4"]:where([data-elevation-direction=left]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:15px;--x3:33px;--x4:58px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 15px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:where([data-elevation-direction=right]):hover,[data-elevation="4"]:where([data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:14px;--x3:33px;--x4:58px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 14px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}}@layer viraui.preflight{[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=false]{--vira-flex-shrink:0;flex-shrink:0}}@layer viraui.preflight{:where(p){line-height:1.5;min-block-size:.01vh;font-size:var(--font-scale-body-medium)}small{font-size:.7em}b,strong{font-variation-settings:"wght" 700}:where(a:any-link):not([data-no-link-style]){text-decoration:none;color:var(--global-interactive-text);word-break:break-word;&:not([class]){background:linear-gradient(currentcolor,currentcolor) no-repeat 0 100%;background-size:0 1px;transition:background-size var(--duration-fast) var(--easing-entrance);&:focus,&:hover{background-size:100% 1px}}}del{padding:0 .4em;margin:0 .2em;background-color:oklab(from var(--highlight-red) l a b/15%);color:var(--highlight-red);box-shadow:0 0 0 1px oklab(from var(--highlight-red) l a b/50%);border-radius:var(--radius-small)}ins{background-color:oklab(from var(--highlight-green) l a b/15%);color:var(--highlight-green);box-shadow:0 0 0 1px oklab(from var(--highlight-green) l a b/50%)}ins,mark{padding:0 .4em;margin:0 .2em;text-decoration:none;border-radius:var(--radius-small)}mark{background-color:oklab(from var(--highlight-yellow) l a b/15%);color:var(--highlight-yellow);box-shadow:0 0 0 1px oklab(from var(--highlight-yellow) l a b/50%)}address{font-style:normal;line-height:inherit}dt{font-variation-settings:"wght" 600}dd{margin:0;padding:0}ul{font-size:medium;padding-left:1rem;& li::marker{font-size:inherit;text-align:right;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);color:oklab(from currentColor l a b/80%)}}ol{font-size:medium;& li::marker{font-size:inherit;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-small);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em;font-size:1em;font-family:var(--font-family-mono);vertical-align:top}pre code{box-shadow:none}s{text-decoration:line-through;color:var(--global-disabled-foreground);text-decoration-color:oklab(from var(--global-foreground) l a b/50%)}:root{color-scheme:light dark}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}}@layer viraui.preflight{}[data-elevation]{transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}
+@layer viraui.preflight;@layer viraui.preflight{html{--scrollbar-thumb:light-dark(var(--base-4),var(--base-3));--scrollbar-track:transparent;font-size:100%;box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground)}*{corner-shape:var(--corner-shape,unset)}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}:focus-visible{outline:2px solid var(--global-foreground);outline-offset:2px}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-medium);font-optical-sizing:auto;font-family:var(--font-family-body),sans-serif;font-variation-settings:"wght" 400}::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));text-shadow:none}img{display:block;inline-size:100%;max-inline-size:100%}svg:not([fill]){fill:currentcolor}fieldset{border:0}ol ul,ul ol{font-size:medium}table{border-spacing:0;width:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table td,table th{border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px transparent;--shadow-color:oklch(0% 0 0deg)}}@layer viraui.preflight{[data-elevation]:where([data-elevation-direction=bottom],[data-elevation-direction=right]){--shadow-direction:1}[data-elevation]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-direction:-1}[data-elevation-hover="0"]:hover,[data-elevation="0"]{--y1:0px;--x1:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),0 0 0 color-mix(in oklch,var(--shadow-color),transparent calc(94% - var(--shadow-opacity-factor))),0 0 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{--y1:0px;--y2:2px;--y3:4px;--y4:7px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 1px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 2px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 2px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:0px;--x2:2px;--x3:4px;--x4:7px}[data-elevation-hover="2"]:hover,[data-elevation="2"]{--y1:1px;--y2:5px;--y3:11px;--y4:19px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 6px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]):hover,[data-elevation="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]){box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 7px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:1px;--x2:5px;--x3:11px;--x4:19px}[data-elevation-hover="2"]:where([data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=right]){box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 6px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:2px;--y2:7px;--y3:16px;--y4:29px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 4px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 7px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 10px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 12px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:2px;--x2:7px;--x3:16px;--x4:29px}[data-elevation-hover="3"]:where([data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=right]){--x2:10px;--x3:22px;--x4:39px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 10px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 13px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 15px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:4px;--y2:14px;--y3:33px;--y4:58px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 14px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:where([data-elevation-direction=top]):hover,[data-elevation="4"]:where([data-elevation-direction=top]){--y2:15px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 15px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:where([data-elevation-direction=left]):hover,[data-elevation="4"]:where([data-elevation-direction=left]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:15px;--x3:33px;--x4:58px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 15px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:where([data-elevation-direction=right]):hover,[data-elevation="4"]:where([data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:14px;--x3:33px;--x4:58px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 14px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}}@layer viraui.preflight{[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=false]{--vira-flex-shrink:0;flex-shrink:0}}@layer viraui.preflight{:where(p){line-height:1.5;min-block-size:.01vh;font-size:var(--font-scale-body-medium)}small{font-size:.7em}b,strong{font-variation-settings:"wght" 700}:where(a:any-link):not([data-no-link-style]){text-decoration:none;color:var(--global-interactive-text);word-break:break-word;&:not([class]){background:linear-gradient(currentcolor,currentcolor) no-repeat 0 100%;background-size:0 1px;transition:background-size var(--duration-fast) var(--easing-entrance);&:focus,&:hover{background-size:100% 1px}}}del{padding:0 .4em;margin:0 .2em;background-color:oklab(from var(--highlight-red) l a b/15%);color:var(--highlight-red);box-shadow:0 0 0 1px oklab(from var(--highlight-red) l a b/50%);border-radius:var(--radius-small)}ins{background-color:oklab(from var(--highlight-green) l a b/15%);color:var(--highlight-green);box-shadow:0 0 0 1px oklab(from var(--highlight-green) l a b/50%)}ins,mark{padding:0 .4em;margin:0 .2em;text-decoration:none;border-radius:var(--radius-small)}mark{background-color:oklab(from var(--highlight-yellow) l a b/15%);color:var(--highlight-yellow);box-shadow:0 0 0 1px oklab(from var(--highlight-yellow) l a b/50%)}address{font-style:normal;line-height:inherit}dt{font-variation-settings:"wght" 600}dd{margin:0;padding:0}ul{font-size:medium;padding-left:1rem;& li::marker{font-size:inherit;text-align:right;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);color:oklab(from currentColor l a b/80%)}}ol{font-size:medium;& li::marker{font-size:inherit;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-small);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em;font-size:1em;font-family:var(--font-family-mono);vertical-align:top}pre code{box-shadow:none}s{text-decoration:line-through;color:var(--global-disabled-foreground);text-decoration-color:oklab(from var(--global-foreground) l a b/50%)}:root{color-scheme:light dark}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}[data-vibrant]{--is-vibrancy-active:var(--vibrancy-enable);--vibrancy-filter:var(--vibrancy-enable) brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px));backdrop-filter:var(--vibrancy-filter,none)}}@layer viraui.preflight{}@layer viraui.preflight{}[data-elevation]{transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}

package/dist/theme-surface.json

@@ -11,6 +11,11 @@
       "pattern": "--global-*",
       "purpose": "App-facing foreground, background, primary, muted, interactive, disabled, and contrast colors."
     },
+    {
+      "id": "vibrancy",
+      "pattern": "--vibrancy-enable | --vibrancy-blur",
+      "purpose": "Optional vibrancy effect controls; enable is a string prefix token and blur is a numeric amount consumed as pixels."
+    },
     {
       "id": "highlight",
       "pattern": "--highlight-*",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "private": false,
   "files": [
     "dist"
@@ -45,7 +45,7 @@
     "vite": "8.0.16",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-static-copy": "2.3.0",
-    "@viraui/foundation": "0.0.18",
+    "@viraui/foundation": "0.0.20",
     "@viraui/icons": "0.0.15",
     "@viraui/postcss-config": "0.0.15",
     "@viraui/tsconfig": "0.0.15"