@openameba/spindle-ui 2.10.0 → 3.0.0

package/Form/TextField.js

@@ -1,69 +1,8 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextField = void 0;
-var react_1 = __importStar(require("react"));
-var BLOCK_NAME = 'spui-TextField';
-exports.TextField = (0, react_1.forwardRef)(function TextField(_a, ref) {
-    var _b = _a.hasError, hasError = _b === void 0 ? false : _b, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.variant, variant = _d === void 0 ? 'medium' : _d, rest = __rest(_a, ["hasError", "id", "variant"]);
-    return (react_1.default.createElement("input", __assign({ className: [
-            "".concat(BLOCK_NAME),
-            "".concat(BLOCK_NAME, "--").concat(variant),
-            hasError ? 'is-error' : '',
-        ].join(' '), id: id, ref: ref }, rest)));
-});
+// Re-export for backward compatibility after directory structure refactoring
+// TODO: Remove this file in a future major version
+var TextField_1 = require("./TextField/TextField");
+Object.defineProperty(exports, "TextField", { enumerable: true, get: function () { return TextField_1.TextField; } });
 //# sourceMappingURL=TextField.js.map

package/Form/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/Form/TextField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA0C;AAW1C,IAAM,UAAU,GAAG,gBAAgB,CAAC;AAEvB,QAAA,SAAS,GAAG,IAAA,kBAAU,EAA0B,SAAS,SAAS,CAC7E,EAAiE,EACjE,GAAG;IADD,IAAA,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,UAAO,EAAP,EAAE,mBAAG,EAAE,KAAA,EAAE,eAAkB,EAAlB,OAAO,mBAAG,QAAQ,KAAA,EAAK,IAAI,cAAxD,6BAA0D,CAAF;IAGxD,OAAO,CACL,kDACE,SAAS,EAAE;YACT,UAAG,UAAU,CAAE;YACf,UAAG,UAAU,eAAK,OAAO,CAAE;YAC3B,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;SAC3B,CAAC,IAAI,CAAC,GAAG,CAAC,EACX,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,IACJ,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/Form/TextField.tsx"],"names":[],"mappings":";;;AAAA,6EAA6E;AAC7E,mDAAmD;AACnD,mDAAkD;AAAzC,sGAAA,SAAS,OAAA"}

package/Form/TextField.mjs

@@ -1,9 +1,3 @@
-import React, { forwardRef } from 'react';
-const BLOCK_NAME = 'spui-TextField';
-export const TextField = forwardRef(function TextField({ hasError = false, id = '', variant = 'medium', ...rest }, ref) {
-    return (React.createElement("input", { className: [
-            `${BLOCK_NAME}`,
-            `${BLOCK_NAME}--${variant}`,
-            hasError ? 'is-error' : '',
-        ].join(' '), id: id, ref: ref, ...rest }));
-});
+// Re-export for backward compatibility after directory structure refactoring
+// TODO: Remove this file in a future major version
+export { TextField } from "./TextField/TextField.mjs";

package/Form/ToggleSwitch/ToggleSwitch.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className'> {
+    id: string;
+}
+export declare const ToggleSwitch: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=ToggleSwitch.d.ts.map

package/Form/ToggleSwitch/ToggleSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSwitch.d.ts","sourceRoot":"","sources":["../../../src/Form/ToggleSwitch/ToggleSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,UAAU,KACR,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IACtE,EAAE,EAAE,MAAM,CAAC;CACZ;AAID,eAAO,MAAM,YAAY,gFAmBxB,CAAC"}

package/Form/ToggleSwitch/ToggleSwitch.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSwitch.figma.d.ts","sourceRoot":"","sources":["../../../src/Form/ToggleSwitch/ToggleSwitch.figma.tsx"],"names":[],"mappings":""}

package/Form/ToggleSwitch/ToggleSwitch.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSwitch.figma.js","sourceRoot":"","sources":["../../../src/Form/ToggleSwitch/ToggleSwitch.figma.tsx"],"names":[],"mappings":";;;;;AAAA,gDAA0B;AAC1B,+CAA8C;AAC9C,qEAAwC;AAExC,sBAAK,CAAC,OAAO,CACX,2BAAY,EACZ,uGAAuG,EACvG;IACE,OAAO,EAAE;QACP,4DAA4D;QAC5D,uDAAuD;KACxD;IACD,KAAK,EAAE;QACL,MAAM,EAAE,sBAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;QAC/B,EAAE,EAAE,sBAAK,CAAC,MAAM,CAAC,IAAI,CAAC;QACtB,KAAK,EAAE,sBAAK,CAAC,MAAM,CAAC,OAAO,CAAC;KAC7B;IACD,OAAO,EAAE,UAAC,EAAqB;YAAnB,MAAM,YAAA,EAAE,EAAE,QAAA,EAAE,KAAK,WAAA;QAAO,OAAA,CAClC,8BAAC,2BAAY,IAAC,EAAE,EAAE,EAAE,gBAAc,KAAK,EAAE,OAAO,EAAE,MAAM,GAAiB,CAC1E;IAFmC,CAEnC;CACF,CACF,CAAC"}

package/Form/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,71 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleSwitch = void 0;
+var react_1 = __importStar(require("react"));
+var BLOCK_NAME = 'spui-ToggleSwitch';
+exports.ToggleSwitch = (0, react_1.forwardRef)(function ToggleSwitch(_a, ref) {
+    var _b = _a.id, id = _b === void 0 ? '' : _b, rest = __rest(_a, ["id"]);
+    return (react_1.default.createElement("label", { className: BLOCK_NAME },
+        react_1.default.createElement("input", __assign({ className: "".concat(BLOCK_NAME, "-input"), id: id, ref: ref, 
+            // TODO: update this when the switch attribute is supported
+            // eslint-disable-next-line react/no-unknown-property
+            switch: "switch", type: "checkbox" }, rest)),
+        react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-visual") }),
+        react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-outline") })));
+});
+//# sourceMappingURL=ToggleSwitch.js.map

package/Form/ToggleSwitch/ToggleSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSwitch.js","sourceRoot":"","sources":["../../../src/Form/ToggleSwitch/ToggleSwitch.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA0C;AAO1C,IAAM,UAAU,GAAG,mBAAmB,CAAC;AAE1B,QAAA,YAAY,GAAG,IAAA,kBAAU,EACpC,SAAS,YAAY,CAAC,EAA2B,EAAE,GAAG;IAA9B,IAAA,UAAO,EAAP,EAAE,mBAAG,EAAE,KAAA,EAAK,IAAI,cAAlB,MAAoB,CAAF;IACtC,OAAO,CACL,yCAAO,SAAS,EAAE,UAAU;QAC1B,kDACE,SAAS,EAAE,UAAG,UAAU,WAAQ,EAChC,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG;YACR,2DAA2D;YAC3D,qDAAqD;YACrD,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,UAAU,IACX,IAAI,EACR;QACF,wCAAM,SAAS,EAAE,UAAG,UAAU,YAAS,GAAS;QAChD,wCAAM,SAAS,EAAE,UAAG,UAAU,aAAU,GAAS,CAC3C,CACT,CAAC;AACJ,CAAC,CACF,CAAC"}

package/Form/ToggleSwitch/ToggleSwitch.mjs

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+const BLOCK_NAME = 'spui-ToggleSwitch';
+export const ToggleSwitch = forwardRef(function ToggleSwitch({ id = '', ...rest }, ref) {
+    return (React.createElement("label", { className: BLOCK_NAME },
+        React.createElement("input", { className: `${BLOCK_NAME}-input`, id: id, ref: ref, 
+            // TODO: update this when the switch attribute is supported
+            // eslint-disable-next-line react/no-unknown-property
+            switch: "switch", type: "checkbox", ...rest }),
+        React.createElement("span", { className: `${BLOCK_NAME}-visual` }),
+        React.createElement("span", { className: `${BLOCK_NAME}-outline` })));
+});

package/Form/ToggleSwitch.d.ts

@@ -1,7 +1,2 @@
-import React from 'react';
-interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className'> {
-    id: string;
-}
-export declare const ToggleSwitch: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
-export {};
+export { ToggleSwitch } from './ToggleSwitch/ToggleSwitch';
 //# sourceMappingURL=ToggleSwitch.d.ts.map

package/Form/ToggleSwitch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitch.d.ts","sourceRoot":"","sources":["../../src/Form/ToggleSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,UAAU,KACR,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IACtE,EAAE,EAAE,MAAM,CAAC;CACZ;AAID,eAAO,MAAM,YAAY,gFAmBxB,CAAC"}
+{"version":3,"file":"ToggleSwitch.d.ts","sourceRoot":"","sources":["../../src/Form/ToggleSwitch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC"}

package/Form/ToggleSwitch.js

@@ -1,71 +1,8 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleSwitch = void 0;
-var react_1 = __importStar(require("react"));
-var BLOCK_NAME = 'spui-ToggleSwitch';
-exports.ToggleSwitch = (0, react_1.forwardRef)(function ToggleSwitch(_a, ref) {
-    var _b = _a.id, id = _b === void 0 ? '' : _b, rest = __rest(_a, ["id"]);
-    return (react_1.default.createElement("label", { className: BLOCK_NAME },
-        react_1.default.createElement("input", __assign({ className: "".concat(BLOCK_NAME, "-input"), id: id, ref: ref, 
-            // TODO: update this when the switch attribute is supported
-            // eslint-disable-next-line react/no-unknown-property
-            switch: "switch", type: "checkbox" }, rest)),
-        react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-visual") }),
-        react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-outline") })));
-});
+// Re-export for backward compatibility after directory structure refactoring
+// TODO: Remove this file in a future major version
+var ToggleSwitch_1 = require("./ToggleSwitch/ToggleSwitch");
+Object.defineProperty(exports, "ToggleSwitch", { enumerable: true, get: function () { return ToggleSwitch_1.ToggleSwitch; } });
 //# sourceMappingURL=ToggleSwitch.js.map

package/Form/ToggleSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitch.js","sourceRoot":"","sources":["../../src/Form/ToggleSwitch.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA0C;AAO1C,IAAM,UAAU,GAAG,mBAAmB,CAAC;AAE1B,QAAA,YAAY,GAAG,IAAA,kBAAU,EACpC,SAAS,YAAY,CAAC,EAA2B,EAAE,GAAG;IAA9B,IAAA,UAAO,EAAP,EAAE,mBAAG,EAAE,KAAA,EAAK,IAAI,cAAlB,MAAoB,CAAF;IACtC,OAAO,CACL,yCAAO,SAAS,EAAE,UAAU;QAC1B,kDACE,SAAS,EAAE,UAAG,UAAU,WAAQ,EAChC,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG;YACR,2DAA2D;YAC3D,qDAAqD;YACrD,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,UAAU,IACX,IAAI,EACR;QACF,wCAAM,SAAS,EAAE,UAAG,UAAU,YAAS,GAAS;QAChD,wCAAM,SAAS,EAAE,UAAG,UAAU,aAAU,GAAS,CAC3C,CACT,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"ToggleSwitch.js","sourceRoot":"","sources":["../../src/Form/ToggleSwitch.tsx"],"names":[],"mappings":";;;AAAA,6EAA6E;AAC7E,mDAAmD;AACnD,4DAA2D;AAAlD,4GAAA,YAAY,OAAA"}

package/Form/ToggleSwitch.mjs

@@ -1,11 +1,3 @@
-import React, { forwardRef } from 'react';
-const BLOCK_NAME = 'spui-ToggleSwitch';
-export const ToggleSwitch = forwardRef(function ToggleSwitch({ id = '', ...rest }, ref) {
-    return (React.createElement("label", { className: BLOCK_NAME },
-        React.createElement("input", { className: `${BLOCK_NAME}-input`, id: id, ref: ref, 
-            // TODO: update this when the switch attribute is supported
-            // eslint-disable-next-line react/no-unknown-property
-            switch: "switch", type: "checkbox", ...rest }),
-        React.createElement("span", { className: `${BLOCK_NAME}-visual` }),
-        React.createElement("span", { className: `${BLOCK_NAME}-outline` })));
-});
+// Re-export for backward compatibility after directory structure refactoring
+// TODO: Remove this file in a future major version
+export { ToggleSwitch } from "./ToggleSwitch/ToggleSwitch.mjs";

package/Form/index.css

@@ -1 +1 @@
-:root{--Checkbox-backGroundColor:var(--color-surface-primary)}.spui-Checkbox-label{align-items:center;border-radius:2px;color:var(--color-text-low-emphasis);display:inline-flex;font-size:1em;font-weight:700;line-height:1;position:relative}.spui-Checkbox-label:focus-within:has(.spui-Checkbox-text:not(:empty)){box-shadow:0 0 0 2px var(--Checkbox-backGroundColor),0 0 0 4px var(--color-focus-clarity)}.spui-Checkbox-label:focus-within:has(.spui-Checkbox-input:not(:focus-visible)){box-shadow:none}.spui-Checkbox-input{clip:rect(1px,1px,1px,1px);height:1px;margin-top:0;overflow:hidden;position:absolute;width:1px}.spui-Checkbox-icon{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:4px;box-sizing:border-box;color:transparent;display:inline-flex;font-size:.875em;height:18px;justify-content:center;width:18px}.spui-Checkbox-input:checked+.spui-Checkbox-icon{background-color:var(--color-object-accent-primary);border:1px solid var(--color-object-accent-primary);color:var(--color-text-high-emphasis-inverse)}.spui-Checkbox-input:disabled+.spui-Checkbox-icon{opacity:.3}.spui-Checkbox-outline{border-radius:2px;height:22px;inset:-2px;position:absolute;width:22px}.spui-Checkbox-label:has(:not(.spui-Checkbox-text)) .spui-Checkbox-input:focus-visible~.spui-Checkbox-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Checkbox-label:has(.spui-Checkbox-text):has(:not(.spui-Checkbox-text:empty)) .spui-Checkbox-input:focus-visible~.spui-Checkbox-outline{box-shadow:none}.spui-Checkbox-text:not(:empty){margin-left:8px}.spui-Checkbox-input:checked~.spui-Checkbox-text{color:var(--color-object-accent-primary)}.spui-Checkbox-input:disabled~.spui-Checkbox-text{color:var(--color-text-disabled)}.spui-DropDown-label{display:inline-block;position:relative}.spui-DropDown-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;opacity:0;outline:none}.spui-DropDown-select,.spui-DropDown-visual{box-sizing:border-box;font-size:1em;min-height:40px;padding:.5em calc(40px + 1em) .5em 1em}.spui-DropDown-visual{align-items:center;background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;color:var(--color-text-disabled);display:flex;height:100%;left:0;position:absolute;top:0;width:100%}.spui-DropDown-label.is-active .spui-DropDown-visual{color:var(--color-text-high-emphasis)}.spui-DropDown-icon{align-items:center;background-color:var(--color-surface-secondary);border:1px solid var(--color-border-medium-emphasis);border-bottom-right-radius:8px;border-top-right-radius:8px;box-sizing:border-box;color:var(--color-object-low-emphasis);display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;width:40px}.spui-DropDown-outline{border-radius:8px;display:inline-block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.spui-DropDown-select:focus~.spui-DropDown-outline{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-DropDown-select:focus:not(:focus-visible)~.spui-DropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-DropDown-label.is-error .spui-DropDown-icon,.spui-DropDown-label.is-error .spui-DropDown-visual,.spui-DropDown-label:user-invalid .spui-DropDown-icon,.spui-DropDown-label:user-invalid .spui-DropDown-visual{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-InlineDropDown-label{display:inline-block;position:relative}.spui-InlineDropDown-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;font-size:1em;margin:0;opacity:0;outline:none;position:absolute;top:0;width:100%}.spui-InlineDropDown-select--medium{min-height:40px}.spui-InlineDropDown-select--small{min-height:32px}.spui-InlineDropDown-text,.spui-InlineDropDown-visual{border-radius:8px;display:flex}.spui-InlineDropDown-text{align-items:center;box-sizing:border-box;color:var(--color-text-medium-emphasis);font-weight:700;height:100%;left:0;padding:.5em 0}.spui-InlineDropDown-text--medium{font-size:.875em;min-height:40px}.spui-InlineDropDown-text--small{font-size:.8125em;min-height:32px}.spui-InlineDropDown-icon{align-items:center;background-color:transparent;border-bottom-right-radius:8px;border-top-right-radius:8px;box-sizing:border-box;color:var(--color-object-medium-emphasis);display:flex;justify-content:center;margin-left:4px}.spui-InlineDropDown-icon--medium{font-size:.875em}.spui-InlineDropDown-icon--small{font-size:.8125em}.spui-InlineDropDown-outline{border-radius:8px;display:inline-block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.spui-InlineDropDown-select:focus~.spui-InlineDropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-InlineDropDown-select:focus:not(:focus-visible)~.spui-InlineDropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-InputLabel{color:var(--color-text-medium-emphasis);display:block;font-size:.875em;font-weight:700;line-height:1.4}.spui-InputLabel:empty{display:none}.spui-InvalidMessage{color:var(--color-text-caution);display:flex;font-size:.75em;font-weight:700;line-height:1.4;margin:8px 0 0;min-height:1.1em;transition:height .3s}.spui-InvalidMessage[hidden]{display:none}.spui-InvalidMessage-icon{font-size:1.33em;line-height:1;margin-right:.25em}.spui-InvalidMessage-body{position:relative;top:1px}:root{--Radio-backGroundColor:var(--color-surface-primary)}.spui-Radio-label{align-items:center;border-radius:2px;color:var(--color-text-low-emphasis);display:inline-flex;font-size:1em;font-weight:700;line-height:1;position:relative}.spui-Radio-label:focus-within:has(.spui-Radio-text:not(:empty)){box-shadow:0 0 0 2px var(--Radio-backGroundColor),0 0 0 4px var(--color-focus-clarity)}.spui-Radio-label:focus-within:has(.spui-Radio-input:not(:focus-visible)){box-shadow:none}.spui-Radio-input{clip:rect(1px,1px,1px,1px);height:1px;margin-top:0;overflow:hidden;position:absolute;width:1px}.spui-Radio-icon{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:50%;box-sizing:border-box;color:transparent;display:inline-flex;flex-shrink:0;font-size:.875em;height:20px;justify-content:center;vertical-align:top;width:20px}.spui-Radio-input:checked+.spui-Radio-icon{background-color:var(--color-object-accent-primary);border:1px solid var(--color-object-accent-primary);color:var(--color-text-high-emphasis-inverse)}.spui-Radio-input:disabled+.spui-Radio-icon{opacity:.3}.spui-Radio-outline{border-radius:50%;height:24px;inset:-2px;position:absolute;width:24px}.spui-Radio-label:has(:not(.spui-Radio-text)) .spui-Radio-input:focus-visible~.spui-Radio-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Radio-label:has(.spui-Radio-text):has(:not(.spui-Radio-text:empty)) .spui-Radio-input:focus-visible~.spui-Radio-outline{box-shadow:none}.spui-Radio-text:not(:empty){margin-left:8px}.spui-Radio-input:checked~.spui-Radio-text{color:var(--color-object-accent-primary)}.spui-Radio-input:disabled~.spui-Radio-text{color:var(--color-text-disabled)}.spui-TextArea{background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;box-sizing:border-box;color:var(--color-text-high-emphasis);font-size:1em;line-height:1.4;margin:0;min-height:92px;outline:none;padding:12px 16px;transition:box-shadow .3s;width:100%}@media (prefers-reduced-motion:reduce){.spui-TextArea{transition:box-shadow .1ms}}.spui-TextArea::-moz-placeholder{color:var(--color-text-disabled)}.spui-TextArea::placeholder{color:var(--color-text-disabled)}.spui-TextArea:focus{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-TextArea:focus:not(:focus-visible){border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-TextArea.is-error,.spui-TextArea:user-invalid{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-TextField{background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;box-sizing:border-box;color:var(--color-text-high-emphasis);font-size:1em;margin:0;outline:none;padding:0 16px;transition:box-shadow .3s;width:100%}@media (prefers-reduced-motion:reduce){.spui-TextField{transition:box-shadow .1ms}}.spui-TextField::-moz-placeholder{color:var(--color-text-disabled)}.spui-TextField::placeholder{color:var(--color-text-disabled)}.spui-TextField:focus{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-TextField:focus:not(:focus-visible){border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-TextField.is-error,.spui-TextField:user-invalid{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-TextField--large{min-height:48px}.spui-TextField--medium{min-height:40px}.spui-ToggleSwitch{display:inline-block;height:32px;position:relative;width:52px}.spui-ToggleSwitch-input{opacity:0;outline:none}.spui-ToggleSwitch-input:disabled~.spui-ToggleSwitch-visual{opacity:.3}.spui-ToggleSwitch-visual{background-color:var(--color-surface-quaternary);border-radius:16px;box-sizing:border-box;display:inline-block;height:100%;left:0;position:absolute;top:0;width:100%}.spui-ToggleSwitch-input:checked~.spui-ToggleSwitch-visual{background-color:var(--color-surface-accent-primary)}.spui-ToggleSwitch-visual:before{background-color:var(--color-object-high-emphasis-inverse);border:1px solid var(--color-border-low-emphasis);border-radius:100%;box-sizing:border-box;content:"";display:inline-block;height:24px;left:4px;position:absolute;top:4px;transition:transform .3s ease-out;width:24px}.spui-ToggleSwitch-input:checked~.spui-ToggleSwitch-visual:before{transform:translate(20px)}.spui-ToggleSwitch-outline{border-radius:16px;inset:-2px;position:absolute}.spui-ToggleSwitch-input:focus~.spui-ToggleSwitch-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-ToggleSwitch-input:focus:not(:focus-visible)~.spui-ToggleSwitch-outline{box-shadow:none}.spui-ButtonSwitch{align-items:stretch;display:flex;flex-direction:row}.spui-ButtonSwitch-button{align-items:center;background-color:var(--color-surface-tertiary);border:none;border-radius:0;color:var(--color-text-medium-emphasis);display:inline-flex;flex:1;font-size:.8125em;gap:4px;justify-content:center;line-height:1.3;padding:8px 4px;position:relative;text-align:center;text-decoration:none;transition:font-weight .35s ease,color .35s ease,background-color .15s ease;white-space:nowrap}.spui-ButtonSwitch-button:hover{background-color:var(--color-hover-neutral-button)}.spui-ButtonSwitch-button[aria-pressed=true]{background-color:var(--color-surface-accent-primary);font-weight:700}.spui-ButtonSwitch-button[aria-pressed=true] .spui-ButtonSwitch-icon{color:var(--color-object-high-emphasis-inverse)}.spui-ButtonSwitch-button[aria-pressed=true] .spui-ButtonSwitch-label{color:var(--color-text-high-emphasis-inverse)}.spui-ButtonSwitch-button[aria-pressed=true]:hover{background-color:var(--color-hover-contained-button)}.spui-ButtonSwitch-button:focus-visible{outline:2px solid var(--color-focus-clarity);outline-offset:2px}.spui-ButtonSwitch-button:first-child{border-bottom-left-radius:6px;border-top-left-radius:6px}.spui-ButtonSwitch-button:last-child{border-bottom-right-radius:6px;border-top-right-radius:6px}.spui-ButtonSwitch-button+.spui-ButtonSwitch-button:after{background-color:var(--color-border-low-emphasis);content:"";height:100%;left:-.5px;position:absolute;top:0;width:1px}.spui-ButtonSwitch-icon{flex-shrink:0}.spui-ButtonSwitch-label{margin:0;white-space:break-spaces}
+:root{--Checkbox-backGroundColor:var(--color-surface-primary)}.spui-Checkbox-label{align-items:center;border-radius:2px;color:var(--color-text-low-emphasis);display:inline-flex;font-size:1em;font-weight:700;line-height:1;position:relative}.spui-Checkbox-label:focus-within:has(.spui-Checkbox-text:not(:empty)){box-shadow:0 0 0 2px var(--Checkbox-backGroundColor),0 0 0 4px var(--color-focus-clarity)}.spui-Checkbox-label:focus-within:has(.spui-Checkbox-input:not(:focus-visible)){box-shadow:none}.spui-Checkbox-input{clip:rect(1px,1px,1px,1px);height:1px;margin-top:0;overflow:hidden;position:absolute;width:1px}.spui-Checkbox-icon{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:4px;box-sizing:border-box;color:transparent;display:inline-flex;font-size:.875em;height:18px;justify-content:center;width:18px}.spui-Checkbox-label--inverse .spui-Checkbox-icon{border:1px solid var(--color-border-low-emphasis-inverse)}.spui-Checkbox-input:checked+.spui-Checkbox-icon{background-color:var(--color-object-accent-primary);border:1px solid var(--color-object-accent-primary);color:var(--color-text-high-emphasis-inverse)}.spui-Checkbox-input:disabled+.spui-Checkbox-icon{opacity:.3}.spui-Checkbox-label--inverse .spui-Checkbox-input:checked+.spui-Checkbox-icon{background-color:var(--color-surface-primary);border:1px solid var(--color-surface-primary);color:var(--color-object-accent-primary)}.spui-Checkbox-outline{border-radius:2px;height:22px;inset:-2px;position:absolute;width:22px}.spui-Checkbox-label:has(:not(.spui-Checkbox-text)) .spui-Checkbox-input:focus-visible~.spui-Checkbox-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Checkbox-label:has(.spui-Checkbox-text):has(:not(.spui-Checkbox-text:empty)) .spui-Checkbox-input:focus-visible~.spui-Checkbox-outline{box-shadow:none}.spui-Checkbox-text:not(:empty){margin-left:8px}.spui-Checkbox-input:checked~.spui-Checkbox-text{color:var(--color-object-accent-primary)}.spui-Checkbox-input:disabled~.spui-Checkbox-text{color:var(--color-text-disabled)}.spui-DropDown-label{display:inline-block;position:relative}.spui-DropDown-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;opacity:0;outline:none}.spui-DropDown-select,.spui-DropDown-visual{box-sizing:border-box;font-size:1em;min-height:40px;padding:.5em calc(40px + 1em) .5em 1em}.spui-DropDown-visual{align-items:center;background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;color:var(--color-text-disabled);display:flex;height:100%;left:0;position:absolute;top:0;width:100%}.spui-DropDown-label.is-active .spui-DropDown-visual{color:var(--color-text-high-emphasis)}.spui-DropDown-icon{align-items:center;background-color:var(--color-surface-secondary);border:1px solid var(--color-border-medium-emphasis);border-bottom-right-radius:8px;border-top-right-radius:8px;box-sizing:border-box;color:var(--color-object-low-emphasis);display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;width:40px}.spui-DropDown-outline{border-radius:8px;display:inline-block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.spui-DropDown-select:focus~.spui-DropDown-outline{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-DropDown-select:focus:not(:focus-visible)~.spui-DropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-DropDown-label.is-error .spui-DropDown-icon,.spui-DropDown-label.is-error .spui-DropDown-visual,.spui-DropDown-label:user-invalid .spui-DropDown-icon,.spui-DropDown-label:user-invalid .spui-DropDown-visual{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-InlineDropDown-label{display:inline-block;position:relative}.spui-InlineDropDown-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;font-size:1em;margin:0;opacity:0;outline:none;position:absolute;top:0;width:100%}.spui-InlineDropDown-select--medium{min-height:40px}.spui-InlineDropDown-select--small{min-height:32px}.spui-InlineDropDown-text,.spui-InlineDropDown-visual{border-radius:8px;display:flex}.spui-InlineDropDown-text{align-items:center;box-sizing:border-box;color:var(--color-text-medium-emphasis);font-weight:700;height:100%;left:0;padding:.5em 0}.spui-InlineDropDown-text--medium{font-size:.875em;min-height:40px}.spui-InlineDropDown-text--small{font-size:.8125em;min-height:32px}.spui-InlineDropDown-icon{align-items:center;background-color:transparent;border-bottom-right-radius:8px;border-top-right-radius:8px;box-sizing:border-box;color:var(--color-object-medium-emphasis);display:flex;justify-content:center;margin-left:4px}.spui-InlineDropDown-icon--medium{font-size:.875em}.spui-InlineDropDown-icon--small{font-size:.8125em}.spui-InlineDropDown-outline{border-radius:8px;display:inline-block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.spui-InlineDropDown-select:focus~.spui-InlineDropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-InlineDropDown-select:focus:not(:focus-visible)~.spui-InlineDropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-InputLabel{color:var(--color-text-medium-emphasis);display:block;font-size:.875em;font-weight:700;line-height:1.4}.spui-InputLabel:empty{display:none}.spui-InvalidMessage{color:var(--color-text-caution);display:flex;font-size:.75em;font-weight:700;line-height:1.4;margin:8px 0 0;min-height:1.1em;transition:height .3s}.spui-InvalidMessage[hidden]{display:none}.spui-InvalidMessage-icon{font-size:1.33em;line-height:1;margin-right:.25em}.spui-InvalidMessage-body{position:relative;top:1px}:root{--Radio-backGroundColor:var(--color-surface-primary)}.spui-Radio-label{align-items:center;border-radius:2px;color:var(--color-text-low-emphasis);display:inline-flex;font-size:1em;font-weight:700;line-height:1;position:relative}.spui-Radio-label:focus-within:has(.spui-Radio-text:not(:empty)){box-shadow:0 0 0 2px var(--Radio-backGroundColor),0 0 0 4px var(--color-focus-clarity)}.spui-Radio-label:focus-within:has(.spui-Radio-input:not(:focus-visible)){box-shadow:none}.spui-Radio-input{clip:rect(1px,1px,1px,1px);height:1px;margin-top:0;overflow:hidden;position:absolute;width:1px}.spui-Radio-icon{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:50%;box-sizing:border-box;color:transparent;display:inline-flex;flex-shrink:0;font-size:.875em;height:20px;justify-content:center;vertical-align:top;width:20px}.spui-Radio-input:checked+.spui-Radio-icon{background-color:var(--color-object-accent-primary);border:1px solid var(--color-object-accent-primary);color:var(--color-text-high-emphasis-inverse)}.spui-Radio-input:disabled+.spui-Radio-icon{opacity:.3}.spui-Radio-outline{border-radius:50%;height:24px;inset:-2px;position:absolute;width:24px}.spui-Radio-label:has(:not(.spui-Radio-text)) .spui-Radio-input:focus-visible~.spui-Radio-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Radio-label:has(.spui-Radio-text):has(:not(.spui-Radio-text:empty)) .spui-Radio-input:focus-visible~.spui-Radio-outline{box-shadow:none}.spui-Radio-text:not(:empty){margin-left:8px}.spui-Radio-input:checked~.spui-Radio-text{color:var(--color-object-accent-primary)}.spui-Radio-input:disabled~.spui-Radio-text{color:var(--color-text-disabled)}.spui-TextArea{background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;box-sizing:border-box;color:var(--color-text-high-emphasis);font-size:1em;line-height:1.4;margin:0;min-height:92px;outline:none;padding:12px 16px;transition:box-shadow .3s;width:100%}@media (prefers-reduced-motion:reduce){.spui-TextArea{transition:box-shadow .1ms}}.spui-TextArea::-moz-placeholder{color:var(--color-text-disabled)}.spui-TextArea::placeholder{color:var(--color-text-disabled)}.spui-TextArea:focus{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-TextArea:focus:not(:focus-visible){border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-TextArea.is-error,.spui-TextArea:user-invalid{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-TextField{background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;box-sizing:border-box;color:var(--color-text-high-emphasis);font-size:1em;margin:0;outline:none;padding:0 16px;transition:box-shadow .3s;width:100%}@media (prefers-reduced-motion:reduce){.spui-TextField{transition:box-shadow .1ms}}.spui-TextField::-moz-placeholder{color:var(--color-text-disabled)}.spui-TextField::placeholder{color:var(--color-text-disabled)}.spui-TextField:focus{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-TextField:focus:not(:focus-visible){border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-TextField.is-error,.spui-TextField:user-invalid{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-TextField--large{min-height:48px}.spui-TextField--medium{min-height:40px}.spui-ToggleSwitch{display:inline-block;height:32px;position:relative;width:52px}.spui-ToggleSwitch-input{opacity:0;outline:none}.spui-ToggleSwitch-input:disabled~.spui-ToggleSwitch-visual{opacity:.3}.spui-ToggleSwitch-visual{background-color:var(--color-surface-quaternary);border-radius:16px;box-sizing:border-box;display:inline-block;height:100%;left:0;position:absolute;top:0;width:100%}.spui-ToggleSwitch-input:checked~.spui-ToggleSwitch-visual{background-color:var(--color-surface-accent-primary)}.spui-ToggleSwitch-visual:before{background-color:var(--color-object-high-emphasis-inverse);border:1px solid var(--color-border-low-emphasis);border-radius:100%;box-sizing:border-box;content:"";display:inline-block;height:24px;left:4px;position:absolute;top:4px;transition:transform .3s ease-out;width:24px}.spui-ToggleSwitch-input:checked~.spui-ToggleSwitch-visual:before{transform:translate(20px)}.spui-ToggleSwitch-outline{border-radius:16px;inset:-2px;position:absolute}.spui-ToggleSwitch-input:focus~.spui-ToggleSwitch-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-ToggleSwitch-input:focus:not(:focus-visible)~.spui-ToggleSwitch-outline{box-shadow:none}.spui-ButtonSwitch{align-items:stretch;display:flex;flex-direction:row}.spui-ButtonSwitch-button{align-items:center;background-color:var(--color-surface-tertiary);border:none;border-radius:0;color:var(--color-text-medium-emphasis);display:inline-flex;flex:1;font-size:.8125em;gap:4px;justify-content:center;line-height:1.3;padding:8px 4px;position:relative;text-align:center;text-decoration:none;transition:font-weight .35s ease,color .35s ease,background-color .15s ease;white-space:nowrap}.spui-ButtonSwitch-button:hover{background-color:var(--color-hover-neutral-button)}.spui-ButtonSwitch-button[aria-pressed=true]{background-color:var(--color-surface-accent-primary);font-weight:700}.spui-ButtonSwitch-button[aria-pressed=true] .spui-ButtonSwitch-icon{color:var(--color-object-high-emphasis-inverse)}.spui-ButtonSwitch-button[aria-pressed=true] .spui-ButtonSwitch-label{color:var(--color-text-high-emphasis-inverse)}.spui-ButtonSwitch-button[aria-pressed=true]:hover{background-color:var(--color-hover-contained-button)}.spui-ButtonSwitch-button:focus-visible{outline:2px solid var(--color-focus-clarity);outline-offset:2px}.spui-ButtonSwitch-button:first-child{border-bottom-left-radius:6px;border-top-left-radius:6px}.spui-ButtonSwitch-button:last-child{border-bottom-right-radius:6px;border-top-right-radius:6px}.spui-ButtonSwitch-button+.spui-ButtonSwitch-button:after{background-color:var(--color-border-low-emphasis);content:"";height:100%;left:-.5px;position:absolute;top:0;width:1px}.spui-ButtonSwitch-icon{flex-shrink:0}.spui-ButtonSwitch-label{margin:0;white-space:break-spaces}

package/Modal/AppealModal/AppealModal.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+type Size = 'large' | 'medium' | 'small';
+interface AppealModalProps extends React.DialogHTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+    size?: Size;
+    onCancel?: (event: React.BaseSyntheticEvent) => void;
+    onClose?: (event: React.BaseSyntheticEvent) => void;
+}
+export declare const AppealModal: {
+    Frame: React.ForwardRefExoticComponent<AppealModalProps & React.RefAttributes<HTMLDialogElement>>;
+    StyleOnly: ({ className, children, size, ...rest }: React.ComponentProps<"div"> & {
+        size?: Size;
+    }) => React.JSX.Element;
+    Title: ({ children, ...rest }: React.ComponentProps<"p">) => React.JSX.Element;
+    Image: ({ children, ...rest }: React.ComponentProps<"div">) => React.JSX.Element;
+    Body: ({ children, ...rest }: React.ComponentProps<"p">) => React.JSX.Element;
+    ButtonGroup: React.FC<{
+        direction?: "row" | "column";
+        size?: "small" | "large" | "medium";
+    } & React.HTMLAttributes<HTMLDivElement>>;
+};
+export {};
+//# sourceMappingURL=AppealModal.d.ts.map

package/Modal/AppealModal/AppealModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppealModal.d.ts","sourceRoot":"","sources":["../../../src/Modal/AppealModal/AppealModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAO7D,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC,UAAU,gBAAiB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AAmJD,eAAO,MAAM,WAAW;;wDAlErB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;QAAE,IAAI,CAAC,EAAE,IAAI,CAAA;KAAE;mCA6BV,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;mCAQzB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;kCAQ5B,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;;;;;CA4B7D,CAAC"}

package/Modal/AppealModal/AppealModal.js

@@ -0,0 +1,156 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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.AppealModal = void 0;
+var react_1 = __importStar(require("react"));
+var use_callback_ref_1 = require("use-callback-ref");
+var ButtonGroup_1 = require("../../ButtonGroup");
+var CrossBold_1 = __importDefault(require("../../Icon/CrossBold"));
+var IconButton_1 = require("../../IconButton");
+var SubtleButton_1 = require("../../SubtleButton");
+var BLOCK_NAME = 'spui-AppealModal';
+var Frame = (0, react_1.forwardRef)(function AppealModal(_a, ref) {
+    var children = _a.children, className = _a.className, open = _a.open, _b = _a.size, size = _b === void 0 ? 'large' : _b, onClose = _a.onClose, rest = __rest(_a, ["children", "className", "open", "size", "onClose"]);
+    var dialogEl = (0, react_1.useRef)(null);
+    var handleFormSubmit = function (event) {
+        event.preventDefault(); // To be closed with the open prop
+        onClose && onClose(event);
+    };
+    var handleDialogClick = function (event) {
+        // Detect backdrop click
+        if (event.target === dialogEl.current) {
+            onClose && onClose(event);
+        }
+    };
+    var handleDialogClose = function (event) {
+        // Detect escape key type
+        if (event.target === dialogEl.current) {
+            onClose && onClose(event);
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        var dialog = dialogEl.current;
+        if (!dialog) {
+            return;
+        }
+        if (open) {
+            !dialog.open && ((_a = dialog.showModal) === null || _a === void 0 ? void 0 : _a.call(dialog));
+        }
+        else {
+            (_b = dialog === null || dialog === void 0 ? void 0 : dialog.close) === null || _b === void 0 ? void 0 : _b.call(dialog);
+        }
+    }, [open, dialogEl]);
+    return (react_1.default.createElement("dialog", __assign({ className: [BLOCK_NAME, "".concat(BLOCK_NAME, "--").concat(size), className]
+            .filter(Boolean)
+            .join(' ')
+            .trim(), ref: (0, use_callback_ref_1.useMergeRefs)([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose }, rest),
+        react_1.default.createElement("form", { className: "".concat(BLOCK_NAME, "-frame"), method: "dialog", onSubmit: handleFormSubmit },
+            react_1.default.createElement("div", { className: "".concat(BLOCK_NAME, "-closeIconButton") },
+                react_1.default.createElement(IconButton_1.IconButton, { "aria-label": "\u3068\u3058\u308B", variant: "neutral" },
+                    react_1.default.createElement(CrossBold_1.default, { "aria-hidden": "true" }))),
+            children,
+            react_1.default.createElement("div", { className: "".concat(BLOCK_NAME, "-closeTextButton") },
+                react_1.default.createElement(SubtleButton_1.SubtleButton, null, "\u3068\u3058\u308B")))));
+});
+var StyleOnly = function (_a) {
+    var className = _a.className, children = _a.children, _b = _a.size, size = _b === void 0 ? 'large' : _b, rest = __rest(_a, ["className", "children", "size"]);
+    return (react_1.default.createElement("div", __assign({ className: [
+            BLOCK_NAME,
+            "".concat(BLOCK_NAME, "--styleOnly"),
+            "".concat(BLOCK_NAME, "--").concat(size),
+            className,
+        ]
+            .filter(Boolean)
+            .join(' ')
+            .trim() }, rest),
+        react_1.default.createElement("div", { className: "".concat(BLOCK_NAME, "-frame") },
+            react_1.default.createElement("div", { className: "".concat(BLOCK_NAME, "-closeIconButton") },
+                react_1.default.createElement(IconButton_1.IconButton, { "aria-label": "\u9589\u3058\u308B", variant: "neutral" },
+                    react_1.default.createElement(CrossBold_1.default, { "aria-hidden": "true" }))),
+            children,
+            react_1.default.createElement("div", { className: "".concat(BLOCK_NAME, "-closeTextButton") },
+                react_1.default.createElement(SubtleButton_1.SubtleButton, null, "\u3068\u3058\u308B")))));
+};
+var Title = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (react_1.default.createElement("p", __assign({ className: "".concat(BLOCK_NAME, "-title") }, rest), children));
+};
+var Image = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (react_1.default.createElement("div", __assign({ className: "".concat(BLOCK_NAME, "-image") }, rest), children));
+};
+var Body = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (react_1.default.createElement("p", __assign({ className: "".concat(BLOCK_NAME, "-body") }, rest), children));
+};
+var ButtonGroup = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (react_1.default.createElement(ButtonGroup_1.ButtonGroup, __assign({ className: "".concat(BLOCK_NAME, "-buttonGroup"), size: "medium", direction: "column" }, rest), children));
+};
+exports.AppealModal = {
+    Frame: Frame,
+    StyleOnly: StyleOnly,
+    Title: Title,
+    Image: Image,
+    Body: Body,
+    ButtonGroup: ButtonGroup,
+};
+//# sourceMappingURL=AppealModal.js.map

package/Modal/AppealModal/AppealModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppealModal.js","sourceRoot":"","sources":["../../../src/Modal/AppealModal/AppealModal.tsx"],"names":[],"mappings":"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"}