@once-ui-system/core 1.0.12 → 1.0.14

package/dist/components/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../src/once-ui/components/Skeleton.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,iCAA0C;AAC1C,4DAAoC;AAEpC,kFAA4C;AAC5C,wBAAyB;AAWzB,MAAM,QAAQ,GAA4B,IAAA,kBAAU,EAClD,CAAC,EAAgF,EAAE,GAAG,EAAE,EAAE;QAAzF,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,OAAY,EAAP,KAAK,cAA9E,2DAAgF,CAAF;IAC7E,OAAO,CACL,uBAAC,OAAI,oBACC,KAAK,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACnE,MAAM,QACN,SAAS,EAAE,IAAA,oBAAU,EACnB,8BAAM,CAAC,QAAQ,EACf,8BAAM,CAAC,KAAK,CAAC,EACb,KAAK,IAAI,8BAAM,CAAC,IAAI,GAAG,KAAK,CAAC,EAC7B,MAAM,IAAI,8BAAM,CAAC,IAAI,GAAG,MAAM,CAAC,EAC/B,KAAK,IAAI,8BAAM,CAAC,QAAQ,GAAG,KAAK,CAAC,EACjC,SAAS,CACV,IACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAIO,4BAAQ;AAFjB,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAWzB,MAAM,QAAQ,GAA4B,UAAU,CAClD,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACxF,OAAO,CACL,KAAC,IAAI,OACC,KAAK,EACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACnE,MAAM,QACN,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,QAAQ,EACf,MAAM,CAAC,KAAK,CAAC,EACb,KAAK,IAAI,MAAM,CAAC,IAAI,GAAG,KAAK,CAAC,EAC7B,MAAM,IAAI,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,EAC/B,KAAK,IAAI,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC,EACjC,SAAS,CACV,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/SmartLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SmartLink.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/SmartLink.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,UAAU,WAAW;IACnB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEzF,QAAA,MAAM,SAAS,uIA4Dd,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"SmartLink.d.ts","sourceRoot":"","sources":["../../src/components/SmartLink.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,UAAU,WAAW;IACnB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEzF,QAAA,MAAM,SAAS,uIA4Dd,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/SmartLink.js

@@ -1,42 +1,36 @@
-"use strict";
 "use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SmartLink = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = __importDefault(require("classnames"));
-const _1 = require(".");
-const SmartLink = (0, react_1.forwardRef)((_a, ref) => {
-    var { href, prefixIcon, suffixIcon, fillWidth = false, iconSize = "xs", style, className, selected, unstyled = false, children } = _a, props = __rest(_a, ["href", "prefixIcon", "suffixIcon", "fillWidth", "iconSize", "style", "className", "selected", "unstyled", "children"]);
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixIcon && (0, jsx_runtime_1.jsx)(_1.Icon, { name: prefixIcon, size: iconSize }), children, suffixIcon && (0, jsx_runtime_1.jsx)(_1.Icon, { name: suffixIcon, size: iconSize })] }));
-    const commonProps = Object.assign({ ref, className: (0, classnames_1.default)(className, "reset-button-styles focus-ring align-center display-inline-flex g-8 radius-s", {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import { Icon, ElementType } from ".";
+const SmartLink = forwardRef(({ href, prefixIcon, suffixIcon, fillWidth = false, iconSize = "xs", style, className, selected, unstyled = false, children, ...props }, ref) => {
+    const content = (_jsxs(_Fragment, { children: [prefixIcon && _jsx(Icon, { name: prefixIcon, size: iconSize }), children, suffixIcon && _jsx(Icon, { name: suffixIcon, size: iconSize })] }));
+    const commonProps = {
+        ref,
+        className: classNames(className, "reset-button-styles focus-ring align-center display-inline-flex g-8 radius-s", {
             "fill-width": fillWidth,
             "fit-width": !fillWidth,
             "min-width-0": fillWidth,
             "px-2 mx-2": !unstyled,
-        }), style: !unstyled
-            ? Object.assign(Object.assign({}, (selected && {
-                textDecoration: "underline",
-                textUnderlineOffset: "0.3em",
-                textUnderlineThickness: "var(--static-space-1)",
-                color: "var(--neutral-on-background-strong)",
-            })), style) : Object.assign({ textDecoration: "none" }, style) }, props);
-    return ((0, jsx_runtime_1.jsx)(_1.ElementType, Object.assign({ href: href }, commonProps, { children: content })));
+        }),
+        style: !unstyled
+            ? {
+                ...(selected && {
+                    textDecoration: "underline",
+                    textUnderlineOffset: "0.3em",
+                    textUnderlineThickness: "var(--static-space-1)",
+                    color: "var(--neutral-on-background-strong)",
+                }),
+                ...style,
+            }
+            : {
+                textDecoration: "none",
+                ...style,
+            },
+        ...props,
+    };
+    return (_jsx(ElementType, { href: href, ...commonProps, children: content }));
 });
-exports.SmartLink = SmartLink;
 SmartLink.displayName = "SmartLink";
+export { SmartLink };
 //# sourceMappingURL=SmartLink.js.map

package/dist/components/SmartLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"SmartLink.js","sourceRoot":"","sources":["../../src/once-ui/components/SmartLink.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,iCAAqD;AACrD,4DAAoC;AACpC,wBAAsC;AAkBtC,MAAM,SAAS,GAAG,IAAA,kBAAU,EAC1B,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,IAAI,EACf,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,QAAQ,OAET,EADI,KAAK,cAXV,uHAYC,CADS;IAIV,MAAM,OAAO,GAAG,CACd,6DACG,UAAU,IAAI,uBAAC,OAAI,IAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,GAAI,EACxD,QAAQ,EACR,UAAU,IAAI,uBAAC,OAAI,IAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,GAAI,IACxD,CACJ,CAAC;IAEF,MAAM,WAAW,mBACf,GAAG,EACH,SAAS,EAAE,IAAA,oBAAU,EACnB,SAAS,EACT,8EAA8E,EAC9E;YACE,YAAY,EAAE,SAAS;YACvB,WAAW,EAAE,CAAC,SAAS;YACvB,aAAa,EAAE,SAAS;YACxB,WAAW,EAAE,CAAC,QAAQ;SACvB,CACF,EACD,KAAK,EAAE,CAAC,QAAQ;YACd,CAAC,iCACM,CAAC,QAAQ,IAAI;gBACd,cAAc,EAAE,WAAW;gBAC3B,mBAAmB,EAAE,OAAO;gBAC5B,sBAAsB,EAAE,uBAAuB;gBAC/C,KAAK,EAAE,qCAAqC;aAC7C,CAAC,GACC,KAAK,EAEZ,CAAC,iBACG,cAAc,EAAE,MAAM,IACnB,KAAK,CACT,IACF,KAAK,CACT,CAAC;IAEF,OAAO,CACL,uBAAC,cAAW,kBAAC,IAAI,EAAE,IAAI,IAAM,WAAW,cACrC,OAAO,IACI,CACf,CAAC;AACJ,CAAC,CACF,CAAC;AAIO,8BAAS;AAFlB,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}
+{"version":3,"file":"SmartLink.js","sourceRoot":"","sources":["../../src/components/SmartLink.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,EAAa,MAAM,OAAO,CAAC;AACrD,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAkBtC,MAAM,SAAS,GAAG,UAAU,CAC1B,CACE,EACE,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,IAAI,EACf,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,CACd,8BACG,UAAU,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,GAAI,EACxD,QAAQ,EACR,UAAU,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,GAAI,IACxD,CACJ,CAAC;IAEF,MAAM,WAAW,GAAG;QAClB,GAAG;QACH,SAAS,EAAE,UAAU,CACnB,SAAS,EACT,8EAA8E,EAC9E;YACE,YAAY,EAAE,SAAS;YACvB,WAAW,EAAE,CAAC,SAAS;YACvB,aAAa,EAAE,SAAS;YACxB,WAAW,EAAE,CAAC,QAAQ;SACvB,CACF;QACD,KAAK,EAAE,CAAC,QAAQ;YACd,CAAC,CAAC;gBACE,GAAG,CAAC,QAAQ,IAAI;oBACd,cAAc,EAAE,WAAW;oBAC3B,mBAAmB,EAAE,OAAO;oBAC5B,sBAAsB,EAAE,uBAAuB;oBAC/C,KAAK,EAAE,qCAAqC;iBAC7C,CAAC;gBACF,GAAG,KAAK;aACT;YACH,CAAC,CAAC;gBACE,cAAc,EAAE,MAAM;gBACtB,GAAG,KAAK;aACT;QACL,GAAG,KAAK;KACT,CAAC;IAEF,OAAO,CACL,KAAC,WAAW,IAAC,IAAI,EAAE,IAAI,KAAM,WAAW,YACrC,OAAO,GACI,CACf,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAGzB,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC9D,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,OAAO,kGAyBZ,CAAC;AAIF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAGzB,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC9D,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,OAAO,kGAyBZ,CAAC;AAIF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/Spinner.js

@@ -1,29 +1,11 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spinner = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Spinner_module_scss_1 = __importDefault(require("./Spinner.module.scss"));
-const _1 = require(".");
-const classnames_1 = __importDefault(require("classnames"));
-const Spinner = (0, react_1.forwardRef)((_a, ref) => {
-    var { size = "m", ariaLabel = "Loading", className, style } = _a, rest = __rest(_a, ["size", "ariaLabel", "className", "style"]);
-    return ((0, jsx_runtime_1.jsx)(_1.Flex, Object.assign({ center: true, style: style, className: className }, rest, { children: (0, jsx_runtime_1.jsx)(_1.Flex, { ref: ref, center: true, className: Spinner_module_scss_1.default[size], role: "status", "aria-label": ariaLabel, children: (0, jsx_runtime_1.jsxs)(_1.Flex, { fill: true, children: [(0, jsx_runtime_1.jsx)(_1.Flex, { className: (0, classnames_1.default)(Spinner_module_scss_1.default.size), borderStyle: "solid", fill: true, radius: "full", border: "neutral-alpha-medium", position: "absolute" }), (0, jsx_runtime_1.jsx)(_1.Flex, { className: (0, classnames_1.default)(Spinner_module_scss_1.default.spinner, Spinner_module_scss_1.default.size), borderStyle: "solid", fill: true, radius: "full" })] }) }) })));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styles from "./Spinner.module.scss";
+import { Flex } from ".";
+import classNames from "classnames";
+const Spinner = forwardRef(({ size = "m", ariaLabel = "Loading", className, style, ...rest }, ref) => {
+    return (_jsx(Flex, { center: true, style: style, className: className, ...rest, children: _jsx(Flex, { ref: ref, center: true, className: styles[size], role: "status", "aria-label": ariaLabel, children: _jsxs(Flex, { fill: true, children: [_jsx(Flex, { className: classNames(styles.size), borderStyle: "solid", fill: true, radius: "full", border: "neutral-alpha-medium", position: "absolute" }), _jsx(Flex, { className: classNames(styles.spinner, styles.size), borderStyle: "solid", fill: true, radius: "full" })] }) }) }));
 });
-exports.Spinner = Spinner;
 Spinner.displayName = "Spinner";
+export { Spinner };
 //# sourceMappingURL=Spinner.js.map

package/dist/components/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../src/once-ui/components/Spinner.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,iCAA0C;AAE1C,gFAA2C;AAC3C,wBAAyB;AACzB,4DAAoC;AASpC,MAAM,OAAO,GAAG,IAAA,kBAAU,EACxB,CAAC,EAAgE,EAAE,GAAG,EAAE,EAAE;QAAzE,EAAE,IAAI,GAAG,GAAG,EAAE,SAAS,GAAG,SAAS,EAAE,SAAS,EAAE,KAAK,OAAW,EAAN,IAAI,cAA9D,2CAAgE,CAAF;IAC7D,OAAO,CACL,uBAAC,OAAI,kBAAC,MAAM,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,IAAM,IAAI,cACvD,uBAAC,OAAI,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,QAAC,SAAS,EAAE,6BAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,QAAQ,gBAAa,SAAS,YACjF,wBAAC,OAAI,IAAC,IAAI,mBACR,uBAAC,OAAI,IACH,SAAS,EAAE,IAAA,oBAAU,EAAC,6BAAM,CAAC,IAAI,CAAC,EAClC,WAAW,EAAC,OAAO,EACnB,IAAI,QACJ,MAAM,EAAC,MAAM,EACb,MAAM,EAAC,sBAAsB,EAC7B,QAAQ,EAAC,UAAU,GACnB,EACF,uBAAC,OAAI,IACH,SAAS,EAAE,IAAA,oBAAU,EAAC,6BAAM,CAAC,OAAO,EAAE,6BAAM,CAAC,IAAI,CAAC,EAClD,WAAW,EAAC,OAAO,EACnB,IAAI,QACJ,MAAM,EAAC,MAAM,GACb,IACG,GACF,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAIO,0BAAO;AAFhB,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AACzB,OAAO,UAAU,MAAM,YAAY,CAAC;AASpC,MAAM,OAAO,GAAG,UAAU,CACxB,CAAC,EAAE,IAAI,GAAG,GAAG,EAAE,SAAS,GAAG,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IACxE,OAAO,CACL,KAAC,IAAI,IAAC,MAAM,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,KAAM,IAAI,YACvD,KAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,QAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,QAAQ,gBAAa,SAAS,YACjF,MAAC,IAAI,IAAC,IAAI,mBACR,KAAC,IAAI,IACH,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,EAClC,WAAW,EAAC,OAAO,EACnB,IAAI,QACJ,MAAM,EAAC,MAAM,EACb,MAAM,EAAC,sBAAsB,EAC7B,QAAQ,EAAC,UAAU,GACnB,EACF,KAAC,IAAI,IACH,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,EAClD,WAAW,EAAC,OAAO,EACnB,IAAI,QACJ,MAAM,EAAC,MAAM,GACb,IACG,GACF,GACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/StatusIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAEzB,UAAU,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACtE,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,KAAK,EACD,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,MAAM,GACN,KAAK,GACL,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,OAAO,GACP,SAAS,GACT,MAAM,GACN,MAAM,GACN,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,eAAe,0GAuBpB,CAAC;AAIF,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../src/components/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAEzB,UAAU,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACtE,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,KAAK,EACD,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,MAAM,GACN,KAAK,GACL,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,OAAO,GACP,SAAS,GACT,MAAM,GACN,MAAM,GACN,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,eAAe,0GAuBpB,CAAC;AAIF,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/StatusIndicator.js

@@ -1,29 +1,11 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StatusIndicator = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = __importDefault(require("classnames"));
-const StatusIndicator_module_scss_1 = __importDefault(require("./StatusIndicator.module.scss"));
-const _1 = require(".");
-const StatusIndicator = (0, react_1.forwardRef)((_a, ref) => {
-    var { size = "m", color = "blue", ariaLabel = `${color} status indicator`, className, style } = _a, rest = __rest(_a, ["size", "color", "ariaLabel", "className", "style"]);
-    return ((0, jsx_runtime_1.jsx)(_1.Flex, Object.assign({ ref: ref, style: style, className: (0, classnames_1.default)(StatusIndicator_module_scss_1.default.statusIndicator, StatusIndicator_module_scss_1.default[size], StatusIndicator_module_scss_1.default[color], className), "aria-label": ariaLabel, radius: "full" }, rest)));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import styles from "./StatusIndicator.module.scss";
+import { Flex } from ".";
+const StatusIndicator = forwardRef(({ size = "m", color = "blue", ariaLabel = `${color} status indicator`, className, style, ...rest }, ref) => {
+    return (_jsx(Flex, { ref: ref, style: style, className: classNames(styles.statusIndicator, styles[size], styles[color], className), "aria-label": ariaLabel, radius: "full", ...rest }));
 });
-exports.StatusIndicator = StatusIndicator;
 StatusIndicator.displayName = "StatusIndicator";
+export { StatusIndicator };
 //# sourceMappingURL=StatusIndicator.js.map

package/dist/components/StatusIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.js","sourceRoot":"","sources":["../../src/once-ui/components/StatusIndicator.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,iCAA0C;AAC1C,4DAAoC;AACpC,gGAAmD;AACnD,wBAAyB;AAwBzB,MAAM,eAAe,GAAG,IAAA,kBAAU,EAChC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,IAAI,GAAG,GAAG,EACV,KAAK,GAAG,MAAM,EACd,SAAS,GAAG,GAAG,KAAK,mBAAmB,EACvC,SAAS,EACT,KAAK,OAEN,EADI,IAAI,cANT,oDAOC,CADQ;IAIT,OAAO,CACL,uBAAC,OAAI,kBACH,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,oBAAU,EAAC,qCAAM,CAAC,eAAe,EAAE,qCAAM,CAAC,IAAI,CAAC,EAAE,qCAAM,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,gBACzE,SAAS,EACrB,MAAM,EAAC,MAAM,IACT,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAIO,0CAAe;AAFxB,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC"}
+{"version":3,"file":"StatusIndicator.js","sourceRoot":"","sources":["../../src/components/StatusIndicator.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAwBzB,MAAM,eAAe,GAAG,UAAU,CAChC,CACE,EACE,IAAI,GAAG,GAAG,EACV,KAAK,GAAG,MAAM,EACd,SAAS,GAAG,GAAG,KAAK,mBAAmB,EACvC,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,OAAO,CACL,KAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,gBACzE,SAAS,EACrB,MAAM,EAAC,MAAM,KACT,IAAI,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/StyleOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyleOverlay.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/StyleOverlay.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAc,IAAI,EAAc,MAAM,GAAG,CAAC;AAG7D,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACnE,eAAe,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC;IACnE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,2HAsDjB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"StyleOverlay.d.ts","sourceRoot":"","sources":["../../src/components/StyleOverlay.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAc,IAAI,EAAc,MAAM,GAAG,CAAC;AAG7D,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACnE,eAAe,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC;IACnE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,2HAsDjB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/StyleOverlay.js

@@ -1,35 +1,17 @@
-"use strict";
 "use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyleOverlay = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const _1 = require(".");
-const StyleOverlay_module_scss_1 = __importDefault(require("./StyleOverlay.module.scss"));
-const StyleOverlay = (0, react_1.forwardRef)((_a, ref) => {
-    var { iconButtonProps, children } = _a, rest = __rest(_a, ["iconButtonProps", "children"]);
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { IconButton, StylePanel, Flex, Background } from ".";
+import styles from "./StyleOverlay.module.scss";
+const StyleOverlay = forwardRef(({ iconButtonProps, children, ...rest }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
     const togglePanel = () => {
         setIsOpen(!isOpen);
     };
-    return ((0, jsx_runtime_1.jsxs)(_1.Flex, { ref: ref, position: "static", children: [!isOpen && (0, jsx_runtime_1.jsx)(_1.Flex, { onClick: togglePanel, children: children }), (0, jsx_runtime_1.jsxs)(_1.Flex, Object.assign({ as: "aside", zIndex: 3, className: `${StyleOverlay_module_scss_1.default.panel} ${isOpen && StyleOverlay_module_scss_1.default.open}`, maxWidth: 28, style: {
+    return (_jsxs(Flex, { ref: ref, position: "static", children: [!isOpen && _jsx(Flex, { onClick: togglePanel, children: children }), _jsxs(Flex, { as: "aside", zIndex: 3, className: `${styles.panel} ${isOpen && styles.open}`, maxWidth: 28, style: {
                     maxHeight: "calc(100% - var(--static-space-4))",
-                }, fillHeight: true, position: "absolute", shadow: "xl", top: "2", right: "2", transition: "macro-medium", background: "page", overflow: "hidden", radius: "xl", border: "neutral-medium" }, rest, { children: [(0, jsx_runtime_1.jsx)(_1.StylePanel, { fill: true, overflowY: "scroll", padding: "8" }), (0, jsx_runtime_1.jsxs)(_1.Flex, { position: "absolute", paddingTop: "8", paddingRight: "12", top: "0", right: "0", children: [(0, jsx_runtime_1.jsx)(_1.Background, { position: "absolute", top: "0", right: "8", left: undefined, width: 8, height: 4, mask: { x: 100, y: 0, radius: 7 }, dots: { display: true, size: "2", color: "page-background" } }), (0, jsx_runtime_1.jsx)(_1.IconButton, Object.assign({ variant: "secondary", onClick: togglePanel, icon: "close" }, iconButtonProps))] })] }))] }));
+                }, fillHeight: true, position: "absolute", shadow: "xl", top: "2", right: "2", transition: "macro-medium", background: "page", overflow: "hidden", radius: "xl", border: "neutral-medium", ...rest, children: [_jsx(StylePanel, { fill: true, overflowY: "scroll", padding: "8" }), _jsxs(Flex, { position: "absolute", paddingTop: "8", paddingRight: "12", top: "0", right: "0", children: [_jsx(Background, { position: "absolute", top: "0", right: "8", left: undefined, width: 8, height: 4, mask: { x: 100, y: 0, radius: 7 }, dots: { display: true, size: "2", color: "page-background" } }), _jsx(IconButton, { variant: "secondary", onClick: togglePanel, icon: "close", ...iconButtonProps })] })] })] }));
 });
-exports.StyleOverlay = StyleOverlay;
 StyleOverlay.displayName = "StyleOverlay";
+export { StyleOverlay };
 //# sourceMappingURL=StyleOverlay.js.map

package/dist/components/StyleOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyleOverlay.js","sourceRoot":"","sources":["../../src/once-ui/components/StyleOverlay.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,iCAA6C;AAC7C,wBAA6D;AAC7D,0FAAgD;AAOhD,MAAM,YAAY,GAAG,IAAA,kBAAU,EAC7B,CAAC,EAAsC,EAAE,GAAG,EAAE,EAAE;QAA/C,EAAE,eAAe,EAAE,QAAQ,OAAW,EAAN,IAAI,cAApC,+BAAsC,CAAF;IACnC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,wBAAC,OAAI,IAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAC,QAAQ,aAC9B,CAAC,MAAM,IAAI,uBAAC,OAAI,IAAC,OAAO,EAAE,WAAW,YAAG,QAAQ,GAAQ,EACzD,wBAAC,OAAI,kBACH,EAAE,EAAC,OAAO,EACV,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,GAAG,kCAAM,CAAC,KAAK,IAAI,MAAM,IAAI,kCAAM,CAAC,IAAI,EAAE,EACrD,QAAQ,EAAE,EAAE,EACZ,KAAK,EAAE;oBACL,SAAS,EAAE,oCAAoC;iBAChD,EACD,UAAU,QACV,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAC,IAAI,EACX,GAAG,EAAC,GAAG,EACP,KAAK,EAAC,GAAG,EACT,UAAU,EAAC,cAAc,EACzB,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAC,QAAQ,EACjB,MAAM,EAAC,IAAI,EACX,MAAM,EAAC,gBAAgB,IACnB,IAAI,eAER,uBAAC,aAAU,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAC,GAAG,GAAG,EAClD,wBAAC,OAAI,IAAC,QAAQ,EAAC,UAAU,EAAC,UAAU,EAAC,GAAG,EAAC,YAAY,EAAC,IAAI,EAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,aAC1E,uBAAC,aAAU,IACT,QAAQ,EAAC,UAAU,EACnB,GAAG,EAAC,GAAG,EACP,KAAK,EAAC,GAAG,EACT,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,CAAC,EACT,IAAI,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EACjC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,iBAAiB,EAAE,GAC5D,EACF,uBAAC,aAAU,kBACT,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,OAAO,IACR,eAAe,EACnB,IACG,KACF,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAGO,oCAAY;AADrB,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}
+{"version":3,"file":"StyleOverlay.js","sourceRoot":"","sources":["../../src/components/StyleOverlay.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC;AAC7D,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAOhD,MAAM,YAAY,GAAG,UAAU,CAC7B,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAC9C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAC,QAAQ,aAC9B,CAAC,MAAM,IAAI,KAAC,IAAI,IAAC,OAAO,EAAE,WAAW,YAAG,QAAQ,GAAQ,EACzD,MAAC,IAAI,IACH,EAAE,EAAC,OAAO,EACV,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE,EACrD,QAAQ,EAAE,EAAE,EACZ,KAAK,EAAE;oBACL,SAAS,EAAE,oCAAoC;iBAChD,EACD,UAAU,QACV,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAC,IAAI,EACX,GAAG,EAAC,GAAG,EACP,KAAK,EAAC,GAAG,EACT,UAAU,EAAC,cAAc,EACzB,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAC,QAAQ,EACjB,MAAM,EAAC,IAAI,EACX,MAAM,EAAC,gBAAgB,KACnB,IAAI,aAER,KAAC,UAAU,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAC,GAAG,GAAG,EAClD,MAAC,IAAI,IAAC,QAAQ,EAAC,UAAU,EAAC,UAAU,EAAC,GAAG,EAAC,YAAY,EAAC,IAAI,EAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,aAC1E,KAAC,UAAU,IACT,QAAQ,EAAC,UAAU,EACnB,GAAG,EAAC,GAAG,EACP,KAAK,EAAC,GAAG,EACT,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,CAAC,EACT,IAAI,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EACjC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,iBAAiB,EAAE,GAC5D,EACF,KAAC,UAAU,IACT,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,OAAO,KACR,eAAe,GACnB,IACG,IACF,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/StylePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StylePanel.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/StylePanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAwD,MAAM,GAAG,CAAC;AAQ/E,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACjE,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAUD,QAAA,MAAM,UAAU,yHAwgBd,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"StylePanel.d.ts","sourceRoot":"","sources":["../../src/components/StylePanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAwD,MAAM,GAAG,CAAC;AAQ/E,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACjE,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAUD,QAAA,MAAM,UAAU,yHA2gBd,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/StylePanel.js

@@ -1,53 +1,35 @@
-"use strict";
 "use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StylePanel = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const _1 = require(".");
-const ThemeProvider_1 = require("../contexts/ThemeProvider");
-const ThemeProvider_2 = require("../contexts/ThemeProvider");
-const DataThemeProvider_1 = require("../contexts/DataThemeProvider");
-const StylePanel_module_scss_1 = __importDefault(require("./StylePanel.module.scss"));
-const classnames_1 = __importDefault(require("classnames"));
-const types_1 = require("../types");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect } from "react";
+import { Flex, Text, SegmentedControl, IconButton, Scroller, Column } from ".";
+import { useTheme } from "../contexts/ThemeProvider";
+import { useStyle } from "../contexts/ThemeProvider";
+import { useDataTheme } from "../contexts/DataThemeProvider";
+import styles from "./StylePanel.module.scss";
+import classNames from "classnames";
+import { schemes } from "../types";
 const shapes = ["conservative", "playful", "rounded"];
 const colorOptions = {
-    brand: types_1.schemes,
-    accent: types_1.schemes,
+    brand: schemes,
+    accent: schemes,
     neutral: ["sand", "gray", "slate"],
 };
-const StylePanel = (0, react_1.forwardRef)((_a, ref) => {
-    var rest = __rest(_a, []);
-    const styleContext = (0, ThemeProvider_2.useStyle)();
-    const { theme, setTheme } = (0, ThemeProvider_1.useTheme)();
-    const { chart, setChartOptions } = (0, DataThemeProvider_1.useDataTheme)();
-    const [mounted, setMounted] = (0, react_1.useState)(false);
-    const [borderValue, setBorderValue] = (0, react_1.useState)("playful");
-    const [brandValue, setBrandValue] = (0, react_1.useState)("blue");
-    const [accentValue, setAccentValue] = (0, react_1.useState)("indigo");
-    const [neutralValue, setNeutralValue] = (0, react_1.useState)("gray");
-    const [solidValue, setSolidValue] = (0, react_1.useState)("contrast");
-    const [solidStyleValue, setSolidStyleValue] = (0, react_1.useState)("flat");
-    const [surfaceValue, setSurfaceValue] = (0, react_1.useState)("filled");
-    const [scalingValue, setScalingValue] = (0, react_1.useState)("100");
-    const [chartModeValue, setChartModeValue] = (0, react_1.useState)("categorical");
-    const [transitionValue, setTransitionValue] = (0, react_1.useState)("all");
-    (0, react_1.useEffect)(() => {
+const StylePanel = forwardRef(({ ...rest }, ref) => {
+    const styleContext = useStyle();
+    const { theme, setTheme } = useTheme();
+    const { chart, setChartOptions } = useDataTheme();
+    const [mounted, setMounted] = useState(false);
+    const [borderValue, setBorderValue] = useState("playful");
+    const [brandValue, setBrandValue] = useState("blue");
+    const [accentValue, setAccentValue] = useState("indigo");
+    const [neutralValue, setNeutralValue] = useState("gray");
+    const [solidValue, setSolidValue] = useState("contrast");
+    const [solidStyleValue, setSolidStyleValue] = useState("flat");
+    const [surfaceValue, setSurfaceValue] = useState("filled");
+    const [scalingValue, setScalingValue] = useState("100");
+    const [chartModeValue, setChartModeValue] = useState("categorical");
+    const [transitionValue, setTransitionValue] = useState("all");
+    useEffect(() => {
         if (typeof window !== 'undefined') {
             const storedSolid = localStorage.getItem('data-solid');
             const storedSolidStyle = localStorage.getItem('data-solid-style');
@@ -57,7 +39,7 @@ const StylePanel = (0, react_1.forwardRef)((_a, ref) => {
                 setSolidStyleValue(storedSolidStyle);
         }
     }, []);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         setMounted(true);
         if (mounted) {
             setBorderValue(styleContext.border);
@@ -71,47 +53,47 @@ const StylePanel = (0, react_1.forwardRef)((_a, ref) => {
         // Chart mode is handled separately
         setChartModeValue(chart.mode);
     }, [styleContext, chart.mode, mounted]);
-    return ((0, jsx_runtime_1.jsxs)(_1.Column, Object.assign({ fillWidth: true, gap: "16", ref: ref }, rest, { children: [(0, jsx_runtime_1.jsxs)(_1.Column, { fillWidth: true, paddingTop: "12", paddingLeft: "16", gap: "4", children: [(0, jsx_runtime_1.jsx)(_1.Text, { variant: "heading-strong-s", children: "Page" }), (0, jsx_runtime_1.jsx)(_1.Text, { variant: "body-default-s", onBackground: "neutral-weak", children: "Customize page theme" })] }), (0, jsx_runtime_1.jsxs)(_1.Column, { fillWidth: true, border: "neutral-alpha-medium", radius: "l-4", children: [(0, jsx_runtime_1.jsxs)(_1.Flex, { horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", children: [(0, jsx_runtime_1.jsx)(_1.Text, { variant: "label-default-s", children: "Theme" }), (0, jsx_runtime_1.jsxs)(_1.Flex, { gap: "2", border: "neutral-alpha-weak", radius: "full", children: [(0, jsx_runtime_1.jsx)(_1.IconButton, { icon: "computer", variant: theme === "system" ? "primary" : "tertiary", onClick: () => setTheme("system"), "aria-label": "System theme" }), (0, jsx_runtime_1.jsx)(_1.IconButton, { icon: "dark", variant: theme === "dark" ? "primary" : "tertiary", onClick: () => setTheme("dark"), "aria-label": "Dark theme" }), (0, jsx_runtime_1.jsx)(_1.IconButton, { icon: "light", variant: theme === "light" ? "primary" : "tertiary", onClick: () => setTheme("light"), "aria-label": "Light theme" })] })] }), (0, jsx_runtime_1.jsxs)(_1.Flex, { horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", children: [(0, jsx_runtime_1.jsx)(_1.Text, { variant: "label-default-s", children: "Shape" }), (0, jsx_runtime_1.jsx)(_1.Flex, { gap: "4", children: shapes.map((radius, index) => ((0, jsx_runtime_1.jsx)(_1.Flex, { "data-border": shapes[index], center: true, tabIndex: 0, className: (0, classnames_1.default)(StylePanel_module_scss_1.default.select, mounted && borderValue === radius ? StylePanel_module_scss_1.default.selected : ""), onClick: () => {
+    return (_jsxs(Column, { fillWidth: true, gap: "16", ref: ref, ...rest, children: [_jsxs(Column, { fillWidth: true, paddingTop: "12", paddingLeft: "16", gap: "4", children: [_jsx(Text, { variant: "heading-strong-s", children: "Page" }), _jsx(Text, { variant: "body-default-s", onBackground: "neutral-weak", children: "Customize page theme" })] }), _jsxs(Column, { fillWidth: true, border: "neutral-alpha-medium", radius: "l-4", children: [_jsxs(Flex, { horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", borderBottom: "neutral-alpha-medium", children: [_jsx(Text, { variant: "label-default-s", children: "Theme" }), _jsxs(Flex, { gap: "2", border: "neutral-alpha-weak", radius: "full", suppressHydrationWarning: true, children: [_jsx(IconButton, { icon: "computer", variant: mounted ? (theme === "system" ? "primary" : "tertiary") : "tertiary", onClick: () => setTheme("system"), "aria-label": "System theme", suppressHydrationWarning: true }), _jsx(IconButton, { icon: "dark", variant: mounted ? (theme === "dark" ? "primary" : "tertiary") : "tertiary", onClick: () => setTheme("dark"), "aria-label": "Dark theme", suppressHydrationWarning: true }), _jsx(IconButton, { icon: "light", variant: mounted ? (theme === "light" ? "primary" : "tertiary") : "tertiary", onClick: () => setTheme("light"), "aria-label": "Light theme", suppressHydrationWarning: true })] })] }), _jsxs(Flex, { horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", children: [_jsx(Text, { variant: "label-default-s", children: "Shape" }), _jsx(Flex, { gap: "4", children: shapes.map((radius, index) => (_jsx(Flex, { "data-border": shapes[index], center: true, tabIndex: 0, className: classNames(styles.select, mounted && borderValue === radius ? styles.selected : ""), onClick: () => {
                                         styleContext.setStyle({ border: radius });
                                         setBorderValue(radius);
-                                    }, children: (0, jsx_runtime_1.jsx)(_1.IconButton, { variant: "ghost", size: "m", children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(StylePanel_module_scss_1.default.neutral, StylePanel_module_scss_1.default.swatch) }) }) }, radius))) })] })] }), (0, jsx_runtime_1.jsxs)(_1.Column, { fillWidth: true, paddingTop: "12", paddingLeft: "16", gap: "4", children: [(0, jsx_runtime_1.jsx)(_1.Text, { variant: "heading-strong-s", children: "Color" }), (0, jsx_runtime_1.jsx)(_1.Text, { variant: "body-default-s", onBackground: "neutral-weak", children: "Customize color schemes" })] }), (0, jsx_runtime_1.jsxs)(_1.Column, { fillWidth: true, border: "neutral-alpha-medium", radius: "l-4", children: [(0, jsx_runtime_1.jsxs)(_1.Flex, { borderBottom: "neutral-alpha-medium", horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [(0, jsx_runtime_1.jsx)(_1.Flex, { textVariant: "label-default-s", minWidth: 3, children: "Brand" }), (0, jsx_runtime_1.jsx)(_1.Scroller, { minWidth: 0, fitWidth: true, children: colorOptions.brand.map((color, index) => ((0, jsx_runtime_1.jsx)(_1.Flex, { marginRight: "2", center: true, tabIndex: 0, className: (0, classnames_1.default)(StylePanel_module_scss_1.default.select, mounted && brandValue === color ? StylePanel_module_scss_1.default.selected : ""), onClick: () => {
+                                    }, children: _jsx(IconButton, { variant: "ghost", size: "m", children: _jsx("div", { className: classNames(styles.neutral, styles.swatch) }) }) }, radius))) })] })] }), _jsxs(Column, { fillWidth: true, paddingTop: "12", paddingLeft: "16", gap: "4", children: [_jsx(Text, { variant: "heading-strong-s", children: "Color" }), _jsx(Text, { variant: "body-default-s", onBackground: "neutral-weak", children: "Customize color schemes" })] }), _jsxs(Column, { fillWidth: true, border: "neutral-alpha-medium", radius: "l-4", children: [_jsxs(Flex, { borderBottom: "neutral-alpha-medium", horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [_jsx(Flex, { textVariant: "label-default-s", minWidth: 3, children: "Brand" }), _jsx(Scroller, { minWidth: 0, fitWidth: true, children: colorOptions.brand.map((color, index) => (_jsx(Flex, { marginRight: "2", center: true, tabIndex: 0, className: classNames(styles.select, mounted && brandValue === color ? styles.selected : ""), onClick: () => {
                                         styleContext.setStyle({ brand: color });
                                         setBrandValue(color);
-                                    }, children: (0, jsx_runtime_1.jsx)(_1.IconButton, { variant: "ghost", size: "m", children: (0, jsx_runtime_1.jsx)("div", { className: `${StylePanel_module_scss_1.default[color]} ${StylePanel_module_scss_1.default.swatch}` }) }) }, color))) })] }), (0, jsx_runtime_1.jsxs)(_1.Flex, { borderBottom: "neutral-alpha-medium", horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [(0, jsx_runtime_1.jsx)(_1.Flex, { textVariant: "label-default-s", minWidth: 3, children: "Accent" }), (0, jsx_runtime_1.jsx)(_1.Scroller, { minWidth: 0, fitWidth: true, children: colorOptions.accent.map((color, index) => ((0, jsx_runtime_1.jsx)(_1.Flex, { marginRight: "2", center: true, tabIndex: 0, className: (0, classnames_1.default)(StylePanel_module_scss_1.default.select, mounted && accentValue === color ? StylePanel_module_scss_1.default.selected : ""), onClick: () => {
+                                    }, children: _jsx(IconButton, { variant: "ghost", size: "m", children: _jsx("div", { className: `${styles[color]} ${styles.swatch}` }) }) }, color))) })] }), _jsxs(Flex, { borderBottom: "neutral-alpha-medium", horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [_jsx(Flex, { textVariant: "label-default-s", minWidth: 3, children: "Accent" }), _jsx(Scroller, { minWidth: 0, fitWidth: true, children: colorOptions.accent.map((color, index) => (_jsx(Flex, { marginRight: "2", center: true, tabIndex: 0, className: classNames(styles.select, mounted && accentValue === color ? styles.selected : ""), onClick: () => {
                                         styleContext.setStyle({ accent: color });
                                         setAccentValue(color);
-                                    }, children: (0, jsx_runtime_1.jsx)(_1.IconButton, { variant: "ghost", size: "m", children: (0, jsx_runtime_1.jsx)("div", { className: `${StylePanel_module_scss_1.default[color]} ${StylePanel_module_scss_1.default.swatch}` }) }) }, color))) })] }), (0, jsx_runtime_1.jsxs)(_1.Flex, { horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [(0, jsx_runtime_1.jsx)(_1.Flex, { textVariant: "label-default-s", minWidth: 3, children: "Neutral" }), (0, jsx_runtime_1.jsx)(_1.Scroller, { minWidth: 0, fitWidth: true, children: colorOptions.neutral.map((color, index) => ((0, jsx_runtime_1.jsx)(_1.Flex, { marginRight: "2", center: true, tabIndex: 0, className: (0, classnames_1.default)(StylePanel_module_scss_1.default.select, mounted && neutralValue === color ? StylePanel_module_scss_1.default.selected : ""), onClick: () => {
+                                    }, children: _jsx(IconButton, { variant: "ghost", size: "m", children: _jsx("div", { className: `${styles[color]} ${styles.swatch}` }) }) }, color))) })] }), _jsxs(Flex, { horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [_jsx(Flex, { textVariant: "label-default-s", minWidth: 3, children: "Neutral" }), _jsx(Scroller, { minWidth: 0, fitWidth: true, children: colorOptions.neutral.map((color, index) => (_jsx(Flex, { marginRight: "2", center: true, tabIndex: 0, className: classNames(styles.select, mounted && neutralValue === color ? styles.selected : ""), onClick: () => {
                                         styleContext.setStyle({ neutral: color });
                                         setNeutralValue(color);
-                                    }, children: (0, jsx_runtime_1.jsx)(_1.IconButton, { variant: "ghost", size: "m", children: (0, jsx_runtime_1.jsx)("div", { className: `${StylePanel_module_scss_1.default[color]} ${StylePanel_module_scss_1.default.swatch}` }) }) }, color))) })] })] }), (0, jsx_runtime_1.jsxs)(_1.Column, { fillWidth: true, paddingTop: "12", paddingLeft: "16", gap: "4", children: [(0, jsx_runtime_1.jsx)(_1.Text, { variant: "heading-strong-s", children: "Solid style" }), (0, jsx_runtime_1.jsx)(_1.Text, { variant: "body-default-s", onBackground: "neutral-weak", children: "Customize the appearance of interactive elements" })] }), (0, jsx_runtime_1.jsxs)(_1.Column, { fillWidth: true, border: "neutral-alpha-medium", radius: "l-4", children: [(0, jsx_runtime_1.jsxs)(_1.Flex, { borderBottom: "neutral-alpha-medium", horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [(0, jsx_runtime_1.jsx)(_1.Text, { variant: "label-default-s", children: "Style" }), (0, jsx_runtime_1.jsx)(_1.SegmentedControl, { maxWidth: 22, minWidth: 0, buttons: [
+                                    }, children: _jsx(IconButton, { variant: "ghost", size: "m", children: _jsx("div", { className: `${styles[color]} ${styles.swatch}` }) }) }, color))) })] })] }), _jsxs(Column, { fillWidth: true, paddingTop: "12", paddingLeft: "16", gap: "4", children: [_jsx(Text, { variant: "heading-strong-s", children: "Solid style" }), _jsx(Text, { variant: "body-default-s", onBackground: "neutral-weak", children: "Customize the appearance of interactive elements" })] }), _jsxs(Column, { fillWidth: true, border: "neutral-alpha-medium", radius: "l-4", children: [_jsxs(Flex, { borderBottom: "neutral-alpha-medium", horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [_jsx(Text, { variant: "label-default-s", children: "Style" }), _jsx(SegmentedControl, { maxWidth: 22, minWidth: 0, buttons: [
                                     {
                                         size: "l",
-                                        label: ((0, jsx_runtime_1.jsxs)(_1.Flex, { vertical: "center", gap: "12", children: [(0, jsx_runtime_1.jsx)(_1.Flex, { "data-solid": "color", border: "brand-strong", solid: "brand-weak", width: "24", height: "24", radius: "s" }), "Color"] })),
+                                        label: (_jsxs(Flex, { vertical: "center", gap: "12", children: [_jsx(Flex, { "data-solid": "color", border: "brand-strong", solid: "brand-weak", width: "24", height: "24", radius: "s" }), "Color"] })),
                                         value: "color",
                                     },
                                     {
                                         size: "l",
-                                        label: ((0, jsx_runtime_1.jsxs)(_1.Flex, { vertical: "center", gap: "12", children: [(0, jsx_runtime_1.jsx)(_1.Flex, { "data-solid": "inverse", border: "brand-strong", solid: "brand-strong", width: "24", height: "24", radius: "s" }), "Inverse"] })),
+                                        label: (_jsxs(Flex, { vertical: "center", gap: "12", children: [_jsx(Flex, { "data-solid": "inverse", border: "brand-strong", solid: "brand-strong", width: "24", height: "24", radius: "s" }), "Inverse"] })),
                                         value: "inverse",
                                     },
                                     {
                                         size: "l",
-                                        label: ((0, jsx_runtime_1.jsxs)(_1.Flex, { vertical: "center", gap: "12", children: [(0, jsx_runtime_1.jsx)(_1.Flex, { "data-solid": "contrast", border: "brand-strong", solid: "brand-strong", width: "24", height: "24", radius: "s" }), "Contrast"] })),
+                                        label: (_jsxs(Flex, { vertical: "center", gap: "12", children: [_jsx(Flex, { "data-solid": "contrast", border: "brand-strong", solid: "brand-strong", width: "24", height: "24", radius: "s" }), "Contrast"] })),
                                         value: "contrast",
                                     },
                                 ], onToggle: (value) => {
                                     styleContext.setStyle({ solid: value });
                                     setSolidValue(value);
                                     localStorage.setItem('data-solid', value);
-                                }, selected: mounted ? solidValue : undefined, defaultSelected: "contrast" })] }), (0, jsx_runtime_1.jsxs)(_1.Flex, { horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [(0, jsx_runtime_1.jsx)(_1.Text, { variant: "label-default-s", children: "Effect" }), (0, jsx_runtime_1.jsx)(_1.SegmentedControl, { maxWidth: 22, minWidth: 0, buttons: [
+                                }, selected: mounted ? solidValue : undefined, defaultSelected: "contrast" })] }), _jsxs(Flex, { horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [_jsx(Text, { variant: "label-default-s", children: "Effect" }), _jsx(SegmentedControl, { maxWidth: 22, minWidth: 0, buttons: [
                                     {
                                         size: "l",
-                                        label: ((0, jsx_runtime_1.jsxs)(_1.Flex, { vertical: "center", gap: "12", children: [(0, jsx_runtime_1.jsx)(_1.Flex, { border: "brand-strong", solid: "brand-weak", width: "24", height: "24", radius: "s" }), "Flat"] })),
+                                        label: (_jsxs(Flex, { vertical: "center", gap: "12", children: [_jsx(Flex, { border: "brand-strong", solid: "brand-weak", width: "24", height: "24", radius: "s" }), "Flat"] })),
                                         value: "flat",
                                     },
                                     {
                                         size: "l",
-                                        label: ((0, jsx_runtime_1.jsxs)(_1.Flex, { vertical: "center", gap: "12", children: [(0, jsx_runtime_1.jsx)(_1.Flex, { border: "brand-strong", style: {
+                                        label: (_jsxs(Flex, { vertical: "center", gap: "12", children: [_jsx(Flex, { border: "brand-strong", style: {
                                                         boxShadow: "inset 0 calc(-1 * var(--static-space-8)) var(--static-space-8) var(--brand-solid-strong)",
                                                     }, solid: "brand-weak", width: "24", height: "24", radius: "s" }), "Plastic"] })),
                                         value: "plastic",
@@ -120,7 +102,7 @@ const StylePanel = (0, react_1.forwardRef)((_a, ref) => {
                                     styleContext.setStyle({ solidStyle: value });
                                     setSolidStyleValue(value);
                                     localStorage.setItem('data-solid-style', value);
-                                }, selected: mounted ? solidStyleValue : undefined, defaultSelected: "flat" })] })] }), (0, jsx_runtime_1.jsxs)(_1.Column, { fillWidth: true, paddingTop: "12", paddingLeft: "16", gap: "4", children: [(0, jsx_runtime_1.jsx)(_1.Text, { variant: "heading-strong-s", children: "Advanced" }), (0, jsx_runtime_1.jsx)(_1.Text, { variant: "body-default-s", onBackground: "neutral-weak", children: "Customize advanced styling options" })] }), (0, jsx_runtime_1.jsxs)(_1.Column, { fillWidth: true, border: "neutral-alpha-medium", radius: "l-4", children: [(0, jsx_runtime_1.jsxs)(_1.Flex, { borderBottom: "neutral-alpha-medium", horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [(0, jsx_runtime_1.jsx)(_1.Text, { variant: "label-default-s", children: "Surface" }), (0, jsx_runtime_1.jsx)(_1.SegmentedControl, { maxWidth: 22, minWidth: 0, onToggle: (value) => {
+                                }, selected: mounted ? solidStyleValue : undefined, defaultSelected: "flat" })] })] }), _jsxs(Column, { fillWidth: true, paddingTop: "12", paddingLeft: "16", gap: "4", children: [_jsx(Text, { variant: "heading-strong-s", children: "Advanced" }), _jsx(Text, { variant: "body-default-s", onBackground: "neutral-weak", children: "Customize advanced styling options" })] }), _jsxs(Column, { fillWidth: true, border: "neutral-alpha-medium", radius: "l-4", children: [_jsxs(Flex, { borderBottom: "neutral-alpha-medium", horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [_jsx(Text, { variant: "label-default-s", children: "Surface" }), _jsx(SegmentedControl, { maxWidth: 22, minWidth: 0, onToggle: (value) => {
                                     styleContext.setStyle({ surface: value });
                                     setSurfaceValue(value);
                                 }, selected: mounted ? surfaceValue : undefined, defaultSelected: "filled", buttons: [
@@ -134,7 +116,7 @@ const StylePanel = (0, react_1.forwardRef)((_a, ref) => {
                                         label: "Translucent",
                                         value: "translucent",
                                     },
-                                ] })] }), (0, jsx_runtime_1.jsxs)(_1.Flex, { borderBottom: "neutral-alpha-medium", horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [(0, jsx_runtime_1.jsx)(_1.Text, { variant: "label-default-s", children: "Scaling" }), (0, jsx_runtime_1.jsx)(_1.SegmentedControl, { maxWidth: 22, minWidth: 0, onToggle: (value) => {
+                                ] })] }), _jsxs(Flex, { borderBottom: "neutral-alpha-medium", horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [_jsx(Text, { variant: "label-default-s", children: "Scaling" }), _jsx(SegmentedControl, { maxWidth: 22, minWidth: 0, onToggle: (value) => {
                                     styleContext.setStyle({ scaling: value });
                                     setScalingValue(value);
                                 }, selected: mounted ? scalingValue : undefined, defaultSelected: "100", buttons: [
@@ -163,7 +145,7 @@ const StylePanel = (0, react_1.forwardRef)((_a, ref) => {
                                         label: "110",
                                         value: "110",
                                     },
-                                ] })] }), (0, jsx_runtime_1.jsxs)(_1.Flex, { borderBottom: "neutral-alpha-medium", horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [(0, jsx_runtime_1.jsx)(_1.Text, { variant: "label-default-s", children: "Data Style" }), (0, jsx_runtime_1.jsx)(_1.SegmentedControl, { maxWidth: 22, minWidth: 0, onToggle: (value) => {
+                                ] })] }), _jsxs(Flex, { borderBottom: "neutral-alpha-medium", horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [_jsx(Text, { variant: "label-default-s", children: "Data Style" }), _jsx(SegmentedControl, { maxWidth: 22, minWidth: 0, onToggle: (value) => {
                                     setChartOptions({ mode: value });
                                     setChartModeValue(value);
                                 }, selected: mounted ? chartModeValue : undefined, defaultSelected: "categorical", buttons: [
@@ -182,7 +164,7 @@ const StylePanel = (0, react_1.forwardRef)((_a, ref) => {
                                         label: "Sequential",
                                         value: "sequential",
                                     },
-                                ] })] }), (0, jsx_runtime_1.jsxs)(_1.Flex, { horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [(0, jsx_runtime_1.jsx)(_1.Text, { variant: "label-default-s", children: "Transition" }), (0, jsx_runtime_1.jsx)(_1.SegmentedControl, { maxWidth: 22, minWidth: 0, onToggle: (value) => {
+                                ] })] }), _jsxs(Flex, { horizontal: "space-between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [_jsx(Text, { variant: "label-default-s", children: "Transition" }), _jsx(SegmentedControl, { maxWidth: 22, minWidth: 0, onToggle: (value) => {
                                     styleContext.setStyle({ transition: value });
                                     setTransitionValue(value);
                                 }, selected: mounted ? transitionValue : undefined, defaultSelected: "all", buttons: [
@@ -206,8 +188,8 @@ const StylePanel = (0, react_1.forwardRef)((_a, ref) => {
                                         label: "None",
                                         value: "none",
                                     },
-                                ] })] })] })] })));
+                                ] })] })] })] }));
 });
-exports.StylePanel = StylePanel;
 StylePanel.displayName = "StylePanel";
+export { StylePanel };
 //# sourceMappingURL=StylePanel.js.map