npm - @openameba/spindle-ui - Versions diffs - 0.44.0 → 0.45.0 - Mend

@openameba/spindle-ui 0.44.0 → 0.45.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/CHANGELOG.md +18 -0
package/SnackBar/SnackBar.css +1 -0
package/SnackBar/SnackBar.d.ts +43 -0
package/SnackBar/SnackBar.d.ts.map +1 -0
package/SnackBar/SnackBar.js +191 -0
package/SnackBar/SnackBar.js.map +1 -0
package/SnackBar/SnackBar.mjs +128 -0
package/SnackBar/index.d.ts +2 -0
package/SnackBar/index.d.ts.map +1 -0
package/SnackBar/index.js +6 -0
package/SnackBar/index.js.map +1 -0
package/SnackBar/index.mjs +1 -0
package/Toast/Toast.css +1 -1
package/Toast/Toast.d.ts +10 -5
package/Toast/Toast.d.ts.map +1 -1
package/Toast/Toast.js +44 -35
package/Toast/Toast.js.map +1 -1
package/Toast/Toast.mjs +42 -34
package/index.css +1 -1
package/index.d.ts +2 -1
package/index.d.ts.map +1 -1
package/index.js +3 -1
package/index.js.map +1 -1
package/index.mjs +2 -1
package/package.json +3 -2

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [0.45.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.44.0...@openameba/spindle-ui@0.45.0) (2022-08-18)
+### Features
+* **spindle-ui:** add SnackBar ([1082a38](https://github.com/openameba/spindle/commit/1082a382dd1b75a7c795fbc085fd983cca8a4445))
+* **spindle-ui:** update Toast ([45727db](https://github.com/openameba/spindle/commit/45727dbc204ed3d2f583a6cece39e29d8b4c7b83))
+* add testing library react hooks ([6f844a7](https://github.com/openameba/spindle/commit/6f844a788c7311cb1210931a82576da01c94c721))
+### BREAKING CHANGES
+* **spindle-ui:** it changes some behaivior and adds new props
 # [0.44.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.43.1...@openameba/spindle-ui@0.44.0) (2022-08-08)

package/SnackBar/SnackBar.css ADDED Viewed

@@ -0,0 +1 @@

+ :root{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-outlineColor:var(--color-focus-clarity);--IconButton--contained-backgroundColor:var(--color-surface-accent-primary);--IconButton--contained-color:var(--color-object-high-emphasis-inverse);--IconButton--contained-onActive-backgroundColor:var(--primary-green-100);--IconButton--contained-onHover-backgroundColor:var(--primary-green-100);--IconButton--outlined-borderColor:var(--color-border-accent-primary);--IconButton--outlined-color:var(--color-object-accent-primary);--IconButton--outlined-onActive-backgroundColor:var(--primary-green-5);--IconButton--outlined-onHover-backgroundColor:var(--primary-green-5);--IconButton--lighted-backgroundColor:var(--color-surface-accent-primary-light);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--TextLink-tapHighlightColor:var(--white-60-alpha);--TextLink-onFocus-outlineColor:var(--color-focus-clarity);--TextLink-color:var(--color-text-accent-primary);--TextLink-icon-color:var(--color-object-accent-primary);--TextLink-fontWeight:bold;--TextLink--subtle-color:var(--color-text-low-emphasis);--TextLink--subtle-icon-color:var(--color-object-low-emphasis)}.spui-TextLink{border-radius:4px;color:var(--TextLink-color);font-family:inherit;font-weight:var(--TextLink-fontWeight);-webkit-tap-highlight-color:var(--TextLink-tapHighlightColor)}.spui-TextLink:focus{outline:2px solid var(--TextLink-onFocus-outlineColor);outline-offset:1px}.spui-TextLink:focus:not(:focus-visible){outline:none}.spui-TextLink--subtle{color:var(--TextLink--subtle-color)}.spui-TextLink--hasIcon{align-items:center;display:inline-flex}.spui-TextLink-icon{line-height:0}.spui-TextLink--iconstart .spui-TextLink-icon{margin-right:4px}.spui-TextLink--iconend{flex-direction:row-reverse}.spui-TextLink--iconend .spui-TextLink-icon{margin-left:4px}.spui-TextLink{text-decoration:underline}.spui-TextLink--hasIcon,.spui-TextLink--underlinehover{text-decoration:none}@media (hover:hover){.spui-TextLink:hover{text-decoration:none}:is(.spui-TextLink--hasIcon,.spui-TextLink--underlinehover):hover{text-decoration:underline}}:root{--TextButton-tapHighlightColor:var(--white-60-alpha);--TextButton-onFocus-outlineColor:var(--color-focus-clarity);--TextButton-color:var(--color-text-accent-primary);--TextButton-icon-color:var(--color-object-accent-primary);--TextButton-fontWeight:bold;--TextButton--subtle-color:var(--color-text-low-emphasis);--TextButton--subtle-icon-color:var(--color-object-low-emphasis)}.spui-TextButton{background:none;border:none;border-radius:4px;color:var(--TextButton-color);font-family:inherit;font-size:1em;font-weight:var(--TextButton-fontWeight);margin:0;padding:0;-webkit-tap-highlight-color:var(--TextButton-tapHighlightColor)}.spui-TextButton:focus{outline:2px solid var(--TextButton-onFocus-outlineColor);outline-offset:1px}.spui-TextButton:focus:not(:focus-visible){outline:none}.spui-TextButton--subtle{color:var(--TextButton--subtle-color)}.spui-TextButton--hasIcon{align-items:center;display:inline-flex}.spui-TextButton-icon{line-height:0}.spui-TextButton--iconstart .spui-TextButton-icon{margin-right:4px}.spui-TextButton--iconend{flex-direction:row-reverse}.spui-TextButton--iconend .spui-TextButton-icon{margin-left:4px}.spui-TextButton{text-decoration:underline}.spui-TextButton--hasIcon,.spui-TextButton--underlinehover{text-decoration:none}@media (hover:hover){.spui-TextButton:hover{text-decoration:none}:is(.spui-TextButton--hasIcon,.spui-TextButton--underlinehover):hover{text-decoration:underline}}:root{--SnackBar-z-index:1;--SnackBar-onFocus-outlineColor:var(--color-focus-clarity)}.spui-SnackBar{box-sizing:border-box;left:0;padding:0 var(--SnackBar--offset-right) 0 var(--SnackBar--offset-left);position:fixed;right:0;text-align:var(--SnackBar--text-align);z-index:var(--SnackBar-z-index)}.spui-SnackBar-content{align-items:center;border-radius:16px;box-shadow:0 11px 28px rgba(8,18,26,.24);box-sizing:border-box;display:inline-grid;grid-template:"Icon Text Button IconButton" auto/auto 1fr auto auto;max-width:440px;min-height:52px;min-width:360px;padding:14px 16px 14px 20px}.spui-SnackBar-icon{flex-shrink:0;font-size:1.375rem;grid-area:Icon;line-height:0;margin-right:12px}.spui-SnackBar-text{--SnackBar-max-lines:3;font-family:inherit;font-size:.875rem;font-weight:700;grid-area:Text;line-height:1.6;max-height:calc(1.6em*var(--SnackBar-max-lines));overflow:hidden;text-align:left}.spui-SnackBar-button{font-size:.875rem;grid-area:Button;margin-left:16px;margin-right:13px;position:relative}.spui-SnackBar-button:after{bottom:0;content:"";display:inline-block;position:absolute;right:-12px;top:0;width:1px}.spui-SnackBar--top{top:0;transform:translateY(calc(var(--SnackBar--initial-height-top) - var(--SnackBar--offset-top)))}.spui-SnackBar--bottom{bottom:0;transform:translateY(calc(var(--SnackBar--initial-height-bottom)*-1 - var(--SnackBar--offset-bottom)*-1))}.spui-SnackBar--slide{opacity:0;transition:transform .3s ease,opacity .3s ease}.spui-SnackBar--hidden{visibility:hidden}.spui-SnackBar-slide--in{opacity:1;transition:transform .5s ease,opacity .5s ease}.spui-SnackBar-slide--in.spui-SnackBar--top{transform:translateY(var(--SnackBar--order-offset-top))}.spui-SnackBar-slide--in.spui-SnackBar--bottom{transform:translateY(var(--SnackBar--order-offset-bottom))}.spui-SnackBar-iconButton{--IconButton--neutral-backgroundColor:transparent;grid-area:IconButton;margin-left:12px}.spui-SnackBar-content--information{background-color:var(--gray-80);color:var(--color-text-high-emphasis-inverse)}.spui-SnackBar-iconButton--information{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--information{--TextLink-color:var(--color-text-high-emphasis-inverse);--TextLink-icon-color:var(--color-object-high-emphasis-inverse);--TextButton-color:var(--color-text-high-emphasis-inverse);--TextButton-icon-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--information:after{background:var(--white-20-alpha)}.spui-SnackBar-content--confirmation{background-color:var(--color-surface-primary);border:2px solid var(--color-border-low-emphasis);color:var(--color-text-accent-primary)}.spui-SnackBar-iconButton--confirmation{--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-color:var(--color-object-low-emphasis)}.spui-SnackBar-button--confirmation{--TextLink-color:var(--color-text-low-emphasis);--TextLink-icon-color:var(--color-object-low-emphasis);--TextButton-color:var(--color-text-low-emphasis);--TextButton-icon-color:var(--color-object-low-emphasis)}.spui-SnackBar-button--confirmation:after{background:var(--color-border-low-emphasis)}.spui-SnackBar-content--error{background-color:var(--color-surface-caution);color:var(--color-text-high-emphasis-inverse)}.spui-SnackBar-iconButton--error{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--error{--TextLink-color:var(--color-text-high-emphasis-inverse);--TextLink-icon-color:var(--color-object-high-emphasis-inverse);--TextButton-color:var(--color-text-high-emphasis-inverse);--TextButton-icon-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--error:after{background:var(--white-20-alpha)}@media (prefers-reduced-motion:reduce){.spui-SnackBar--slide,.spui-SnackBar-slide--in{transition-duration:.1ms}}@media (max-width:464px){.spui-SnackBar{padding:0 12px;text-align:center;bottom:0;top:unset;transform:translateY(calc(var(--SnackBar--initial-height-bottom)*-1 - var(--SnackBar--offset-bottom)*-1))}.spui-SnackBar-slide--in.spui-SnackBar--top{transform:translateY(var(--SnackBar--order-offset-bottom))}.spui-SnackBar-content{border-radius:82px;max-width:400px;min-width:calc(100% - 24px);padding:14px 16px 14px 20px}}@media (max-width:320px){.spui-SnackBar-text{--SnackBar-max-lines:4}}

package/SnackBar/SnackBar.d.ts ADDED Viewed

@@ -0,0 +1,43 @@
+import React, { ReactNode } from 'react';
+declare type Position = `${'top' | 'bottom'}${'Left' | 'Center' | 'Right'}`;
+declare type PositionOffset = {
+    top: number;
+    right: number;
+    left: number;
+    bottom: number;
+};
+declare type Variant = 'information' | 'confirmation' | 'error';
+declare type Props = {
+    children?: React.ReactElement;
+    active?: boolean;
+    order?: number;
+    offset?: {
+        [K in keyof PositionOffset]?: PositionOffset[K];
+    };
+    duration?: number;
+    onHide?: () => void;
+    position?: Position;
+    variant?: Variant;
+};
+export declare const BLOCK_NAME = "spui-SnackBar";
+export declare const ANIMATION_DURATION = 300;
+export declare const MAX_DURATION = 10000;
+export declare const SnackBar: {
+    Frame: ({ children, active, position, order, offset: _offset, onHide, variant, }: Props) => React.ReactElement;
+    Icon: React.FC<{
+        children: ReactNode;
+    }>;
+    Text: React.FC<{
+        children: ReactNode;
+    }>;
+    TextButton: React.FC<{
+        icon?: ReactNode;
+        children: ReactNode;
+    } & React.HTMLAttributes<HTMLButtonElement>>;
+    TextLink: React.FC<{
+        icon?: ReactNode;
+        children: ReactNode;
+    } & React.HTMLAttributes<HTMLAnchorElement>>;
+};
+export {};
+//# sourceMappingURL=SnackBar.d.ts.map

package/SnackBar/SnackBar.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SnackBar.d.ts","sourceRoot":"","sources":["../../src/SnackBar/SnackBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,SAAS,EAOV,MAAM,OAAO,CAAC;AAMf,aAAK,QAAQ,GAAG,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,EAAE,CAAC;AAEpE,aAAK,cAAc,GAAG;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,aAAK,OAAO,GAAG,aAAa,GAAG,cAAc,GAAG,OAAO,CAAC;AAExD,aAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE;SAAG,CAAC,IAAI,MAAM,cAAc,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC;KAAE,CAAC;IAE7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,UAAU,kBAAkB,CAAC;AAG1C,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,eAAO,MAAM,YAAY,QAAQ,CAAC;AAqMlC,eAAO,MAAM,QAAQ;sFApLlB,KAAK,KAAG,MAAM,YAAY;;kBAyIF,SAAS;;;kBAGT,SAAS;;;eAIzB,SAAS;kBAAY,SAAS;;;eAkB9B,SAAS;kBAAY,SAAS;;CAwBxC,CAAC"}

package/SnackBar/SnackBar.js ADDED Viewed

@@ -0,0 +1,191 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.SnackBar = exports.MAX_DURATION = exports.ANIMATION_DURATION = exports.BLOCK_NAME = void 0;
+var react_1 = __importStar(require("react"));
+var Icon_1 = require("../Icon");
+var IconButton_1 = require("../IconButton");
+var TextLink_1 = require("../TextLink/TextLink");
+var TextButton_1 = require("../TextButton/TextButton");
+exports.BLOCK_NAME = 'spui-SnackBar';
+// Duration for css animation.
+exports.ANIMATION_DURATION = 300;
+exports.MAX_DURATION = 10000;
+var VERTICAL_GAP = 20;
+var DEFAULT_VARIANT = 'information';
+var Frame = function (_a) {
+    var _b;
+    var children = _a.children, _c = _a.active, active = _c === void 0 ? false : _c, _d = _a.position, position = _d === void 0 ? 'topCenter' : _d, _e = _a.order, order = _e === void 0 ? 0 : _e, _f = _a.offset, _offset = _f === void 0 ? {} : _f, onHide = _a.onHide, _g = _a.variant, variant = _g === void 0 ? DEFAULT_VARIANT : _g;
+    var _h = (0, react_1.useState)(false), isShow = _h[0], setIsShow = _h[1];
+    var offset = {
+        top: _offset.top || 24,
+        // If position is top or bottom, then horizontal offset is not needed.
+        left: position.endsWith('Left') ? _offset.left || 32 : 0,
+        right: position.endsWith('Right') ? _offset.right || 32 : 0,
+        bottom: _offset.bottom || 24,
+    };
+    var formattedDuration = exports.MAX_DURATION - exports.ANIMATION_DURATION;
+    var timeoutID = (0, react_1.useRef)(null);
+    var _j = (0, react_1.useState)(0), clientHeight = _j[0], setClientHeight = _j[1];
+    var setIsShowWithTimeout = (0, react_1.useCallback)(function () {
+        // Out animation is executed after `formattedDuration` seconds.
+        if (timeoutID.current === null && isShow) {
+            timeoutID.current = window.setTimeout(function () {
+                setIsShow(false);
+            }, formattedDuration);
+        }
+    }, [isShow, timeoutID, setIsShow, formattedDuration]);
+    var resetTimeout = (0, react_1.useCallback)(function () {
+        if (timeoutID.current) {
+            window.clearTimeout(timeoutID.current);
+            timeoutID.current = null;
+        }
+    }, [timeoutID]);
+    var handleTransitionEnd = (0, react_1.useCallback)(function () {
+        if (onHide && !isShow) {
+            onHide();
+            timeoutID.current = null;
+        }
+    }, [isShow, setIsShow, onHide]);
+    var handleOnClickCloseButton = (0, react_1.useCallback)(function () {
+        setIsShow(false);
+    }, []);
+    (0, react_1.useEffect)(function () {
+        // Animation is not stopped even if `active` props is changed while running animation.
+        if (active && timeoutID.current === null) {
+            setIsShow(true);
+        }
+    }, [active]);
+    (0, react_1.useEffect)(function () {
+        setIsShowWithTimeout();
+        return resetTimeout;
+    }, [setIsShowWithTimeout, resetTimeout]);
+    var contentHeight = clientHeight;
+    var positionPrefix = position.startsWith('top') ? 'top' : 'bottom';
+    var positionSuffix = position.slice(positionPrefix.length).toLowerCase();
+    var orderOffsetTop = order * (contentHeight + VERTICAL_GAP) + offset.top;
+    var orderOffsetBottom = order * (contentHeight + VERTICAL_GAP) + offset.bottom;
+    return (react_1.default.createElement("div", { style: (_b = {},
+            _b['--SnackBar--initial-height-top'] = "".concat(orderOffsetTop - contentHeight + offset.top, "px"),
+            _b['--SnackBar--initial-height-bottom'] = "".concat(orderOffsetBottom - contentHeight + offset.bottom, "px"),
+            _b['--SnackBar--order-offset-top'] = "".concat(orderOffsetTop, "px"),
+            _b['--SnackBar--order-offset-bottom'] = "".concat(-orderOffsetBottom, "px"),
+            _b['--SnackBar--offset-top'] = "".concat(offset.top, "px"),
+            _b['--SnackBar--offset-bottom'] = "".concat(offset.bottom, "px"),
+            _b['--SnackBar--offset-left'] = "".concat(offset.left, "px"),
+            _b['--SnackBar--offset-right'] = "".concat(offset.right, "px"),
+            _b['--SnackBar--text-align'] = positionSuffix,
+            _b), className: [
+            exports.BLOCK_NAME,
+            "".concat(exports.BLOCK_NAME, "--").concat(positionPrefix),
+            "".concat(exports.BLOCK_NAME, "--slide"),
+            isShow && "".concat(exports.BLOCK_NAME, "-slide--in"),
+            !active && "".concat(exports.BLOCK_NAME, "--hidden"),
+        ]
+            .filter(Boolean)
+            .join(' '), "aria-hidden": !active, onTransitionEnd: handleTransitionEnd, ref: function (ref) { return setClientHeight((ref === null || ref === void 0 ? void 0 : ref.clientHeight) || 0); } },
+        react_1.default.createElement("div", { className: "".concat(exports.BLOCK_NAME, "-content ").concat(exports.BLOCK_NAME, "-content--").concat(variant), onMouseOver: resetTimeout, onMouseOut: setIsShowWithTimeout, onFocus: resetTimeout, onBlur: setIsShowWithTimeout },
+            react_1.Children.map(children, function (child) {
+                return child ? (0, react_1.cloneElement)(child, { variant: variant, setIsShow: setIsShow }) : child;
+            }),
+            react_1.default.createElement("div", { className: "".concat(exports.BLOCK_NAME, "-iconButton ").concat(exports.BLOCK_NAME, "-iconButton--").concat(variant), onTransitionEnd: function (e) { return e.stopPropagation(); } },
+                react_1.default.createElement(IconButton_1.IconButton, { size: "exSmall", variant: "neutral", onClick: handleOnClickCloseButton },
+                    react_1.default.createElement(Icon_1.CrossBold, { "aria-label": "\u9589\u3058\u308B" }))))));
+};
+var getInternalChildProps = function (props) {
+    var hasInternalChildProps = function (props) {
+        return ({}.hasOwnProperty.call(props, 'setIsShow') ||
+            {}.hasOwnProperty.call(props, 'variant'));
+    };
+    if (hasInternalChildProps(props)) {
+        return {
+            setIsShow: props.setIsShow,
+            variant: props.variant,
+        };
+    }
+    return {};
+};
+var Icon = function (_a) {
+    var children = _a.children;
+    return (react_1.default.createElement("div", { className: "".concat(exports.BLOCK_NAME, "-icon") }, children));
+};
+var Text = function (_a) {
+    var children = _a.children;
+    return (react_1.default.createElement("span", { className: "".concat(exports.BLOCK_NAME, "-text") }, children));
+};
+var TextButton = function (_a) {
+    var icon = _a.icon, children = _a.children, onClick = _a.onClick, rest = __rest(_a, ["icon", "children", "onClick"]);
+    var internalProps = (0, react_1.useMemo)(function () { return getInternalChildProps(rest); }, []);
+    var variant = internalProps.variant || DEFAULT_VARIANT;
+    var setIsShow = internalProps.setIsShow;
+    var handleOnClick = function (e) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        setIsShow === null || setIsShow === void 0 ? void 0 : setIsShow(false);
+    };
+    return (react_1.default.createElement("div", { className: "".concat(exports.BLOCK_NAME, "-button ").concat(exports.BLOCK_NAME, "-button--").concat(variant) },
+        react_1.default.createElement(TextButton_1.TextButton, __assign({ icon: icon, onClick: handleOnClick }, rest), children)));
+};
+var TextLink = function (_a) {
+    var icon = _a.icon, children = _a.children, onClick = _a.onClick, rest = __rest(_a, ["icon", "children", "onClick"]);
+    var internalProps = (0, react_1.useMemo)(function () { return getInternalChildProps(rest); }, []);
+    var variant = internalProps.variant || DEFAULT_VARIANT;
+    var setIsShow = internalProps.setIsShow;
+    var handleOnClick = function (e) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        setIsShow === null || setIsShow === void 0 ? void 0 : setIsShow(false);
+    };
+    return (react_1.default.createElement("div", { className: "".concat(exports.BLOCK_NAME, "-button ").concat(exports.BLOCK_NAME, "-button--").concat(variant) },
+        react_1.default.createElement(TextLink_1.TextLink, __assign({ icon: icon, onClick: handleOnClick }, rest), children)));
+};
+exports.SnackBar = {
+    Frame: Frame,
+    Icon: Icon,
+    Text: Text,
+    TextButton: TextButton,
+    TextLink: TextLink,
+};
+//# sourceMappingURL=SnackBar.js.map

package/SnackBar/SnackBar.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/SnackBar/SnackBar.mjs ADDED Viewed

@@ -0,0 +1,128 @@
+import React, { Children, cloneElement, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { CrossBold } from '../Icon';
+import { IconButton } from '../IconButton';
+import { TextLink as SpindleTextLink } from '../TextLink/TextLink';
+import { TextButton as SpindleTextButton } from '../TextButton/TextButton';
+export const BLOCK_NAME = 'spui-SnackBar';
+// Duration for css animation.
+export const ANIMATION_DURATION = 300;
+export const MAX_DURATION = 10000;
+const VERTICAL_GAP = 20;
+const DEFAULT_VARIANT = 'information';
+const Frame = ({ children, active = false, position = 'topCenter', order = 0, offset: _offset = {}, onHide, variant = DEFAULT_VARIANT, }) => {
+    const [isShow, setIsShow] = useState(false);
+    const offset = {
+        top: _offset.top || 24,
+        // If position is top or bottom, then horizontal offset is not needed.
+        left: position.endsWith('Left') ? _offset.left || 32 : 0,
+        right: position.endsWith('Right') ? _offset.right || 32 : 0,
+        bottom: _offset.bottom || 24,
+    };
+    const formattedDuration = MAX_DURATION - ANIMATION_DURATION;
+    const timeoutID = useRef(null);
+    const [clientHeight, setClientHeight] = useState(0);
+    const setIsShowWithTimeout = useCallback(() => {
+        // Out animation is executed after `formattedDuration` seconds.
+        if (timeoutID.current === null && isShow) {
+            timeoutID.current = window.setTimeout(() => {
+                setIsShow(false);
+            }, formattedDuration);
+        }
+    }, [isShow, timeoutID, setIsShow, formattedDuration]);
+    const resetTimeout = useCallback(() => {
+        if (timeoutID.current) {
+            window.clearTimeout(timeoutID.current);
+            timeoutID.current = null;
+        }
+    }, [timeoutID]);
+    const handleTransitionEnd = useCallback(() => {
+        if (onHide && !isShow) {
+            onHide();
+            timeoutID.current = null;
+        }
+    }, [isShow, setIsShow, onHide]);
+    const handleOnClickCloseButton = useCallback(() => {
+        setIsShow(false);
+    }, []);
+    useEffect(() => {
+        // Animation is not stopped even if `active` props is changed while running animation.
+        if (active && timeoutID.current === null) {
+            setIsShow(true);
+        }
+    }, [active]);
+    useEffect(() => {
+        setIsShowWithTimeout();
+        return resetTimeout;
+    }, [setIsShowWithTimeout, resetTimeout]);
+    const contentHeight = clientHeight;
+    const positionPrefix = position.startsWith('top') ? 'top' : 'bottom';
+    const positionSuffix = position.slice(positionPrefix.length).toLowerCase();
+    const orderOffsetTop = order * (contentHeight + VERTICAL_GAP) + offset.top;
+    const orderOffsetBottom = order * (contentHeight + VERTICAL_GAP) + offset.bottom;
+    return (React.createElement("div", { style: {
+            ['--SnackBar--initial-height-top']: `${orderOffsetTop - contentHeight + offset.top}px`,
+            ['--SnackBar--initial-height-bottom']: `${orderOffsetBottom - contentHeight + offset.bottom}px`,
+            ['--SnackBar--order-offset-top']: `${orderOffsetTop}px`,
+            ['--SnackBar--order-offset-bottom']: `${-orderOffsetBottom}px`,
+            ['--SnackBar--offset-top']: `${offset.top}px`,
+            ['--SnackBar--offset-bottom']: `${offset.bottom}px`,
+            ['--SnackBar--offset-left']: `${offset.left}px`,
+            ['--SnackBar--offset-right']: `${offset.right}px`,
+            ['--SnackBar--text-align']: positionSuffix,
+        }, className: [
+            BLOCK_NAME,
+            `${BLOCK_NAME}--${positionPrefix}`,
+            `${BLOCK_NAME}--slide`,
+            isShow && `${BLOCK_NAME}-slide--in`,
+            !active && `${BLOCK_NAME}--hidden`,
+        ]
+            .filter(Boolean)
+            .join(' '), "aria-hidden": !active, onTransitionEnd: handleTransitionEnd, ref: (ref) => setClientHeight(ref?.clientHeight || 0) },
+        React.createElement("div", { className: `${BLOCK_NAME}-content ${BLOCK_NAME}-content--${variant}`, onMouseOver: resetTimeout, onMouseOut: setIsShowWithTimeout, onFocus: resetTimeout, onBlur: setIsShowWithTimeout },
+            Children.map(children, (child) => child ? cloneElement(child, { variant, setIsShow }) : child),
+            React.createElement("div", { className: `${BLOCK_NAME}-iconButton ${BLOCK_NAME}-iconButton--${variant}`, onTransitionEnd: (e) => e.stopPropagation() },
+                React.createElement(IconButton, { size: "exSmall", variant: "neutral", onClick: handleOnClickCloseButton },
+                    React.createElement(CrossBold, { "aria-label": "\u9589\u3058\u308B" }))))));
+};
+const getInternalChildProps = (props) => {
+    const hasInternalChildProps = (props) => ({}.hasOwnProperty.call(props, 'setIsShow') ||
+        {}.hasOwnProperty.call(props, 'variant'));
+    if (hasInternalChildProps(props)) {
+        return {
+            setIsShow: props.setIsShow,
+            variant: props.variant,
+        };
+    }
+    return {};
+};
+const Icon = ({ children }) => (React.createElement("div", { className: `${BLOCK_NAME}-icon` }, children));
+const Text = ({ children }) => (React.createElement("span", { className: `${BLOCK_NAME}-text` }, children));
+const TextButton = ({ icon, children, onClick, ...rest }) => {
+    const internalProps = useMemo(() => getInternalChildProps(rest), []);
+    const variant = internalProps.variant || DEFAULT_VARIANT;
+    const setIsShow = internalProps.setIsShow;
+    const handleOnClick = (e) => {
+        onClick?.(e);
+        setIsShow?.(false);
+    };
+    return (React.createElement("div", { className: `${BLOCK_NAME}-button ${BLOCK_NAME}-button--${variant}` },
+        React.createElement(SpindleTextButton, { icon: icon, onClick: handleOnClick, ...rest }, children)));
+};
+const TextLink = ({ icon, children, onClick, ...rest }) => {
+    const internalProps = useMemo(() => getInternalChildProps(rest), []);
+    const variant = internalProps.variant || DEFAULT_VARIANT;
+    const setIsShow = internalProps.setIsShow;
+    const handleOnClick = (e) => {
+        onClick?.(e);
+        setIsShow?.(false);
+    };
+    return (React.createElement("div", { className: `${BLOCK_NAME}-button ${BLOCK_NAME}-button--${variant}` },
+        React.createElement(SpindleTextLink, { icon: icon, onClick: handleOnClick, ...rest }, children)));
+};
+export const SnackBar = {
+    Frame,
+    Icon,
+    Text,
+    TextButton,
+    TextLink,
+};

package/SnackBar/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { SnackBar } from './SnackBar';
2	+ //# sourceMappingURL=index.d.ts.map

package/SnackBar/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SnackBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/SnackBar/index.js ADDED Viewed

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnackBar = void 0;
+var SnackBar_1 = require("./SnackBar");
+Object.defineProperty(exports, "SnackBar", { enumerable: true, get: function () { return SnackBar_1.SnackBar; } });
+//# sourceMappingURL=index.js.map

package/SnackBar/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/SnackBar/index.ts"],"names":[],"mappings":";;;AAAA,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA"}

package/SnackBar/index.mjs ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { SnackBar } from './SnackBar';

package/Toast/Toast.css CHANGED Viewed

	@@ -1 +1 @@
1	- :root{--Toast-z-index:1}.spui-Toast{left:0;position:fixed;right:0;text-align:center;z-index:var(--Toast-z-index)}.spui-Toast--content{~~background~~-~~color~~:~~var(--color-surface-accent-primary-light)~~;border-radius:~~40px~~;box-shadow:0 ~~4.75px~~ ~~14.25px~~ rgba(8,18,26,.12);box-sizing:border-box;~~color~~:~~var(--color~~-~~text~~-~~accent~~-~~primary)~~;~~cursor~~:~~default~~;~~display~~:~~inline~~-~~block~~;font-family:inherit;font-size~~:16px~~;font-weight:700;~~margin~~:0;~~padding~~:~~11px~~ ~~16px~~}.spui-Toast-~~content~~--~~error~~{~~background~~-color:var(--color-~~surface~~-~~caution~~-~~light~~);color:var(--color-text-~~caution~~)~~;position~~:~~relative~~}.spui-Toast-content--~~error:before~~{background-color:var(--color-surface-primary);border-~~radius:40px~~;~~content~~:~~"";height:100%;left:0;position:absolute;top:0;width:100%;z~~-~~index:-1~~}.spui-Toast--~~top~~{~~top~~:~~16px~~}.spui-Toast--~~bottom~~{~~bottom~~:0}.spui-Toast--~~slide~~{~~transform~~:~~translateY~~(-~~100px~~);~~transition~~:~~transform .5s ease~~}.spui-Toast-~~slide~~--in{~~transform~~:~~translateY~~(0)}@media (prefers-reduced-motion:reduce){.spui-Toast--slide{transition-duration:.1ms}}
1	+ :root{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-outlineColor:var(--color-focus-clarity);--IconButton--contained-backgroundColor:var(--color-surface-accent-primary);--IconButton--contained-color:var(--color-object-high-emphasis-inverse);--IconButton--contained-onActive-backgroundColor:var(--primary-green-100);--IconButton--contained-onHover-backgroundColor:var(--primary-green-100);--IconButton--outlined-borderColor:var(--color-border-accent-primary);--IconButton--outlined-color:var(--color-object-accent-primary);--IconButton--outlined-onActive-backgroundColor:var(--primary-green-5);--IconButton--outlined-onHover-backgroundColor:var(--primary-green-5);--IconButton--lighted-backgroundColor:var(--color-surface-accent-primary-light);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--Toast-z-index:1}.spui-Toast{box-sizing:border-box;left:0;padding:0 12px;position:fixed;right:0;text-align:center;z-index:var(--Toast-z-index)}.spui-Toast-content{align-items:center;border-radius:52px;box-shadow:0 11px 28px rgba(8,18,26,.24);box-sizing:border-box;display:inline-flex;margin:0;max-width:360px;min-height:48px;padding:0 16px 0 20px}.spui-Toast-contentInfo{flex-shrink:0;font-size:1.375rem;line-height:0;margin-right:8px}.spui-Toast-contentText{font-family:inherit;font-size:.875rem;font-weight:700;line-height:1.6;overflow:hidden;white-space:nowrap}.spui-Toast--top{top:0;transform:translateY(calc(var(--Toast--initial-height) - var(--Toast--offset-top)))}.spui-Toast--bottom{bottom:0;transform:translateY(calc(var(--Toast--initial-height)-1 - var(--Toast--offset-bottom)-1))}.spui-Toast--slide{opacity:0;transition:transform .3s ease,opacity .3s ease}.spui-Toast--hidden{visibility:hidden}.spui-Toast-slide--in{opacity:1;transition:transform .5s ease,opacity .5s ease}.spui-Toast-slide--in.spui-Toast--top{transform:translateY(var(--Toast--order-offset-top))}.spui-Toast-slide--in.spui-Toast--bottom{transform:translateY(var(--Toast--order-offset-bottom))}.spui-Toast-iconButton{--IconButton--neutral-backgroundColor:transparent;margin-left:12px}.spui-Toast-contentInfo--information{color:var(--color-object-high-emphasis-inverse)}.spui-Toast-content--information{background-color:var(--gray-80);color:var(--color-text-high-emphasis-inverse)}.spui-Toast-iconButton--information{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}.spui-Toast-contentInfo--confirmation{color:var(--color-object-accent-primary)}.spui-Toast-content--confirmation{background-color:var(--color-surface-primary);border:2px solid var(--color-border-low-emphasis);color:var(--color-text-accent-primary)}.spui-Toast-iconButton--confirmation{--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-color:var(--color-object-low-emphasis)}.spui-Toast-contentInfo--error{color:var(--color-object-high-emphasis-inverse)}.spui-Toast-content--error{background-color:var(--color-surface-caution);color:var(--color-text-high-emphasis-inverse)}.spui-Toast-iconButton--error{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}@media (prefers-reduced-motion:reduce){.spui-Toast--slide,.spui-Toast-slide--in{transition-duration:.1ms}}@media (max-width:384px){.spui-Toast-content{max-width:100%}}

package/Toast/Toast.d.ts CHANGED Viewed

@@ -1,17 +1,22 @@
 import React from 'react';
 declare type Position = 'top' | 'bottom';
-declare type Animation = 'slide' | 'fade';
+declare type PositionOffset = {
+    [K in Position]?: number;
+};
+declare type Variant = 'information' | 'confirmation' | 'error';
 declare type Props = {
     children?: React.ReactNode;
     active?: boolean;
+    order?: number;
+    offset?: PositionOffset;
     duration?: number;
     onHide?: () => void;
     position?: Position;
-    animation?: Animation;
-    hasError?: boolean;
+    icon?: React.ReactNode;
+    variant?: Variant;
 };
 export declare const BLOCK_NAME = "spui-Toast";
-export declare const ANIMATION_DURATION = 500;
-export declare const Toast: ({ children, active, duration, animation, position, hasError, onHide, }: Props) => React.ReactElement;
+export declare const ANIMATION_DURATION = 300;
+export declare const Toast: ({ children, active, position, order, offset: _offset, onHide, icon, variant, }: Props) => React.ReactElement;
 export {};
 //# sourceMappingURL=Toast.d.ts.map

package/Toast/Toast.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;~~AAExE~~,aAAK,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;AACjC,aAAK,~~SAAS~~,GAAG,OAAO,GAAG,~~MAAM~~,CAAC;~~AAElC~~,aAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;~~IAEjB~~,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,~~SAAS~~,CAAC,EAAE,SAAS,CAAC;~~IACtB~~,~~QAAQ~~,CAAC,EAAE,OAAO,CAAC;~~CACpB~~,CAAC;AAEF,eAAO,MAAM,UAAU,eAAe,CAAC;AAGvC,eAAO,MAAM,kBAAkB,MAAM,CAAC;~~AAmBtC~~,eAAO,MAAM,KAAK,~~2EAQf~~,KAAK,KAAG,MAAM,~~YA8EhB~~,CAAC"}
1	+ {"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,aAAK,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;AACjC,aAAK,cAAc,GAAG;KACnB,CAAC,IAAI,QAAQ,CAAC,CAAC,EAAE,MAAM;CACzB,CAAC;AAEF,aAAK,OAAO,GAAG,aAAa,GAAG,cAAc,GAAG,OAAO,CAAC;AAExD,aAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,UAAU,eAAe,CAAC;AAGvC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAMtC,eAAO,MAAM,KAAK,mFASf,KAAK,KAAG,MAAM,YAoGhB,CAAC"}

package/Toast/Toast.js CHANGED Viewed

@@ -25,36 +25,32 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toast = exports.ANIMATION_DURATION = exports.BLOCK_NAME = void 0;
 var react_1 = __importStar(require("react"));
+var Icon_1 = require("../Icon");
+var IconButton_1 = require("../IconButton");
 exports.BLOCK_NAME = 'spui-Toast';
 // Duration for css animation.
-exports.ANIMATION_DURATION = 500;
-var MIN_DURATION = 4000;
-var MAX_DURATION = 100000;
-var getAnimationClassName = function (isShow, animation) {
-    return isShow ? "".concat(exports.BLOCK_NAME, "-").concat(animation, "--in") : '';
-};
-var limitDuration = function (duration) {
-    if (duration < MIN_DURATION || duration > MAX_DURATION) {
-        return MIN_DURATION;
-    }
-    return duration;
-};
+exports.ANIMATION_DURATION = 300;
+var MAX_DURATION = 4000;
+var VERTICAL_GAP = 20;
+var TOTAL_ANIMATION_DURATION = MAX_DURATION - exports.ANIMATION_DURATION;
 var Toast = function (_a) {
-    var children = _a.children, _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.duration, duration = _c === void 0 ? 4000 : _c, _d = _a.animation, animation = _d === void 0 ? 'slide' : _d, _e = _a.position, position = _e === void 0 ? 'top' : _e, _f = _a.hasError, hasError = _f === void 0 ? false : _f, onHide = _a.onHide;
-    var _g = (0, react_1.useState)(false), isShow = _g[0], setIsShow = _g[1];
-    var animationClassName = getAnimationClassName(isShow, animation);
-    var errorContentClassName = hasError ? "".concat(exports.BLOCK_NAME, "-content--error") : '';
-    var formattedDuration = limitDuration(duration) - exports.ANIMATION_DURATION;
+    var _b;
+    var children = _a.children, _c = _a.active, active = _c === void 0 ? false : _c, _d = _a.position, position = _d === void 0 ? 'top' : _d, _e = _a.order, order = _e === void 0 ? 0 : _e, _f = _a.offset, _offset = _f === void 0 ? {} : _f, onHide = _a.onHide, icon = _a.icon, _g = _a.variant, variant = _g === void 0 ? 'information' : _g;
+    var _h = (0, react_1.useState)(false), isShow = _h[0], setIsShow = _h[1];
+    var offset = {
+        top: _offset.top || 24,
+        bottom: _offset.bottom || 24,
+    };
     var timeoutID = (0, react_1.useRef)(null);
-    var transitionElementRef = (0, react_1.useRef)(null);
+    var _j = (0, react_1.useState)(0), clientHeight = _j[0], setClientHeight = _j[1];
     var setIsShowWithTimeout = (0, react_1.useCallback)(function () {
-        // Out animation is executed after `formattedDuration` seconds.
+        // Out animation is executed after `TOTAL_ANIMATION_DURATION` seconds.
         if (timeoutID.current === null && isShow) {
             timeoutID.current = window.setTimeout(function () {
                 setIsShow(false);
-            }, formattedDuration);
+            }, TOTAL_ANIMATION_DURATION);
         }
-    }, [isShow, timeoutID, setIsShow, formattedDuration]);
+    }, [isShow, timeoutID, setIsShow]);
     var resetTimeout = (0, react_1.useCallback)(function () {
         if (timeoutID.current) {
             window.clearTimeout(timeoutID.current);
@@ -67,6 +63,9 @@ var Toast = function (_a) {
             timeoutID.current = null;
         }
     }, [isShow, setIsShow, onHide]);
+    var handleOnClickCloseButton = (0, react_1.useCallback)(function () {
+        setIsShow(false);
+    }, []);
     (0, react_1.useEffect)(function () {
         // Animation is not stopped even if `active` props is changed while running animation.
         if (active && timeoutID.current === null) {
@@ -77,20 +76,30 @@ var Toast = function (_a) {
         setIsShowWithTimeout();
         return resetTimeout;
     }, [setIsShowWithTimeout, resetTimeout]);
-    (0, react_1.useEffect)(function () {
-        var transitionElement = transitionElementRef.current;
-        // When out animation is finished, `onHide` method is invoked.
-        if (transitionElement) {
-            transitionElement.addEventListener('transitionend', handleTransitionEnd);
-        }
-        return function () {
-            if (transitionElement) {
-                transitionElement.removeEventListener('transitionend', handleTransitionEnd);
-            }
-        };
-    }, [transitionElementRef, handleTransitionEnd]);
-    return (react_1.default.createElement("div", { className: "".concat(exports.BLOCK_NAME, " ").concat(exports.BLOCK_NAME, "--").concat(position, " ").concat(exports.BLOCK_NAME, "--").concat(animation, " ").concat(animationClassName), ref: transitionElementRef },
-        react_1.default.createElement("div", { className: "".concat(exports.BLOCK_NAME, "--content ").concat(errorContentClassName), tabIndex: 0, onMouseOver: resetTimeout, onMouseOut: setIsShowWithTimeout, onFocus: resetTimeout, onBlur: setIsShowWithTimeout }, children)));
+    var contentHeight = clientHeight;
+    var offsetPosition = offset[position] || 0;
+    var orderOffset = order * (contentHeight + VERTICAL_GAP) + offsetPosition;
+    return (react_1.default.createElement("div", { style: (_b = {},
+            _b['--Toast--initial-height'] = "".concat(orderOffset - contentHeight + offsetPosition, "px"),
+            _b['--Toast--order-offset-top'] = "".concat(orderOffset, "px"),
+            _b['--Toast--order-offset-bottom'] = "".concat(-orderOffset, "px"),
+            _b['--Toast--offset-top'] = "".concat(offset.top, "px"),
+            _b['--Toast--offset-bottom'] = "".concat(offset.bottom, "px"),
+            _b), className: [
+            exports.BLOCK_NAME,
+            "".concat(exports.BLOCK_NAME, "--").concat(position),
+            "".concat(exports.BLOCK_NAME, "--slide"),
+            isShow && "".concat(exports.BLOCK_NAME, "-slide--in"),
+            !active && "".concat(exports.BLOCK_NAME, "--hidden"),
+        ]
+            .filter(Boolean)
+            .join(' '), "aria-hidden": !active, onTransitionEnd: handleTransitionEnd, ref: function (ref) { return setClientHeight((ref === null || ref === void 0 ? void 0 : ref.clientHeight) || 0); } },
+        react_1.default.createElement("div", { className: "".concat(exports.BLOCK_NAME, "-content ").concat(exports.BLOCK_NAME, "-content--").concat(variant), onMouseOver: resetTimeout, onMouseOut: setIsShowWithTimeout, onFocus: resetTimeout, onBlur: setIsShowWithTimeout },
+            icon && react_1.default.createElement("div", { className: "".concat(exports.BLOCK_NAME, "-contentInfo") }, icon),
+            react_1.default.createElement("span", { className: "".concat(exports.BLOCK_NAME, "-contentText") }, children),
+            react_1.default.createElement("div", { className: "".concat(exports.BLOCK_NAME, "-iconButton ").concat(exports.BLOCK_NAME, "-iconButton--").concat(variant), onTransitionEnd: function (e) { return e.stopPropagation(); } },
+                react_1.default.createElement(IconButton_1.IconButton, { size: "exSmall", variant: "neutral", onClick: handleOnClickCloseButton },
+                    react_1.default.createElement(Icon_1.CrossBold, { "aria-label": "\u9589\u3058\u308B" }))))));
 };
 exports.Toast = Toast;
 //# sourceMappingURL=Toast.js.map

package/Toast/Toast.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../src/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwE;~~AAgB3D~~,QAAA,UAAU,GAAG,YAAY,CAAC;AAEvC,8BAA8B;AACjB,QAAA,kBAAkB,GAAG,GAAG,CAAC;AAEtC,IAAM,YAAY,GAAG,IAAI,CAAC;AAC1B,IAAM,YAAY,GAAG,~~MAAM,CAAC;AAE5B,IAAM,qBAAqB,GAAG,UAC5B,MAAe,EACf,SAAoB;IAEpB,OAAO,MAAM,CAAC,CAAC,CAAC,UAAG,kBAAU,cAAI,SAAS,SAAM,CAAC,CAAC,CAAC,~~EAAE,CAAC;~~AACxD~~,~~CAAC,CAAC;AAEF,~~IAAM,~~aAAa~~,GAAG,~~UAAC,QAAgB;IACrC,IAAI,QAAQ,GAAG,~~YAAY,~~IAAI,QAAQ,~~GAAG,~~YAAY~~,~~EAAE;QACtD,OAAO,YAAY,~~CAAC;~~KACrB;IACD~~,~~OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEK,~~IAAM,KAAK,GAAG,UAAC,~~EAQd;QAPN~~,QAAQ,cAAA,EACR,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,~~gBAAe~~,~~EAAf~~,QAAQ,mBAAG,~~IAAI~~,KAAA,~~EACf~~,~~iBAAmB~~,~~EAAnB~~,~~SAAS~~,mBAAG,~~OAAO~~,KAAA,~~EACnB~~,~~gBAAgB~~,~~EAAhB~~,~~QAAQ~~,mBAAG,~~KAAK~~,KAAA,~~EAChB~~,~~gBAAgB~~,~~EAAhB~~,~~QAAQ~~,~~mBAAG~~,~~KAAK~~,~~KAAA~~,~~EAChB~~,~~MAAM~~,~~YAAA~~;~~IAEA~~,IAAA,KAAsB,IAAA,gBAAQ,EAAU,KAAK,CAAC,EAA7C,MAAM,QAAA,EAAE,SAAS,QAA4B,CAAC;IACrD,IAAM,~~kBAAkB,GAAG,qBAAqB,CAAC,~~MAAM,~~EAAE,SAAS,CAAC,CAAC~~;~~IACpE~~,~~IAAM,qBAAqB,~~GAAG,~~QAAQ~~,~~CAAC~~,CAAC,~~CAAC~~,~~UAAG~~,~~kBAAU,oBAAiB,CAAC,CAAC,CAAC,~~EAAE~~,CAAC~~;~~IAC7E~~,~~IAAM~~,~~iBAAiB~~,~~GAAG~~,~~aAAa,~~CAAC,~~QAAQ~~,~~CAAC~~,~~GAAG~~,~~0BAAkB,~~CAAC;~~IACvE~~,IAAM,SAAS,GAAG,IAAA,cAAM,EAAgB,IAAI,CAAC,CAAC;~~IAC9C~~,~~IAAM~~,~~oBAAoB~~,~~GAAG,~~IAAA,~~cAAM~~,~~EAAwB~~,~~IAAI~~,CAAC,CAAC;~~IAEjE~~,IAAM,oBAAoB,GAAG,IAAA,mBAAW,EAAC;QACvC~~,+DAA+D~~;~~QAC/D~~,IAAI,SAAS,CAAC,OAAO,KAAK,IAAI,IAAI,MAAM,EAAE;YACxC,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC;gBACpC,SAAS,CAAC,KAAK,CAAC,CAAC;YACnB,CAAC,EAAE,~~iBAAiB~~,CAAC,CAAC;~~SACvB~~;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,~~EAAE,iBAAiB,~~CAAC,CAAC,CAAC;~~IAEtD~~,IAAM,YAAY,GAAG,IAAA,mBAAW,EAAC;QAC/B,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;YACvC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAM,mBAAmB,GAAG,IAAA,mBAAW,EAAC;QACtC,IAAI,MAAM,IAAI,CAAC,MAAM,EAAE;YACrB,MAAM,EAAE,CAAC;YACT,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAEhC,IAAA,iBAAS,EAAC;QACR,sFAAsF;QACtF,IAAI,MAAM,IAAI,SAAS,CAAC,OAAO,KAAK,IAAI,EAAE;YACxC,SAAS,CAAC,IAAI,CAAC,CAAC;SACjB;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,IAAA,iBAAS,EAAC;QACR,oBAAoB,EAAE,CAAC;QACvB,OAAO,YAAY,CAAC;IACtB,CAAC,EAAE,CAAC,oBAAoB,EAAE,YAAY,CAAC,CAAC,CAAC;IAEzC,~~IAAA~~,~~iBAAS~~,~~EAAC~~;~~QACR~~,IAAM,~~iBAAiB~~,GAAG,~~oBAAoB~~,CAAC,~~OAAO~~,CAAC;~~QAEvD~~,~~8DAA8D~~;~~QAC9D~~,~~IAAI~~,~~iBAAiB~~,~~EAAE~~;~~YACrB~~,~~iBAAiB~~,CAAC,~~gBAAgB~~,CAAC,~~eAAe~~,~~EAAE~~,~~mBAAmB~~,CAAC,~~CAAC~~;~~SAC1E~~;~~QAED~~,~~OAAO~~;~~YACL~~,~~IAAI~~,~~iBAAiB~~,~~EAAE~~;~~gBACrB~~,~~iBAAiB~~,~~CAAC~~,~~mBAAmB~~,~~CACnC~~,~~eAAe~~,~~EACf~~,~~mBAAmB~~,~~CACpB~~,CAAC;~~aACH~~;~~QACH~~,CAAC,CAAC;~~IACJ~~,CAAC,~~EAAE~~,CAAC,~~oBAAoB~~,EAAE,mBAAmB,CAAC,CAAC,CAAC~~;IAEhD~~,~~OAAO~~,~~CACL~~,uCACE,SAAS,EAAE,UAAG,kBAAU,~~cAAI~~,kBAAU,~~eAAK~~,~~QAAQ~~,~~cAAI~~,~~kBAAU~~,~~eAAK~~,~~SAAS~~,~~cAAI~~,~~kBAAkB~~,~~CAAE~~,~~EACvG~~,~~GAAG~~,EAAE,oBAAoB;~~QAEzB~~,uCACE,SAAS,EAAE,UAAG,kBAAU,~~uBAAa~~,~~qBAAqB~~,CAAE,~~EAC5D~~,~~QAAQ~~,EAAE,CAAC,~~EACX~~,~~WAAW~~,EAAE,~~YAAY~~,~~EACzB~~,~~UAAU~~,~~EAAE~~,~~oBAAoB~~,~~EAChC~~,OAAO,~~EAAE~~,~~YAAY~~,~~EACrB~~,~~MAAM~~,EAAE,~~oBAAoB~~,~~IAE3B~~,~~QAAQ~~,~~CACL~~,CACF,CACP,CAAC;AACJ,CAAC,CAAC;~~AAtFW~~,QAAA,KAAK,~~SAsFhB~~"}
1	+ {"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../src/Toast/Toast.tsx"],"names":[],"mappings":"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"}

package/Toast/Toast.mjs CHANGED Viewed

@@ -1,33 +1,28 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { CrossBold } from '../Icon';
+import { IconButton } from '../IconButton';
 export const BLOCK_NAME = 'spui-Toast';
 // Duration for css animation.
-export const ANIMATION_DURATION = 500;
-const MIN_DURATION = 4000;
-const MAX_DURATION = 100000;
-const getAnimationClassName = (isShow, animation) => {
-    return isShow ? `${BLOCK_NAME}-${animation}--in` : '';
-};
-const limitDuration = (duration) => {
-    if (duration < MIN_DURATION || duration > MAX_DURATION) {
-        return MIN_DURATION;
-    }
-    return duration;
-};
-export const Toast = ({ children, active = false, duration = 4000, animation = 'slide', position = 'top', hasError = false, onHide, }) => {
+export const ANIMATION_DURATION = 300;
+const MAX_DURATION = 4000;
+const VERTICAL_GAP = 20;
+const TOTAL_ANIMATION_DURATION = MAX_DURATION - ANIMATION_DURATION;
+export const Toast = ({ children, active = false, position = 'top', order = 0, offset: _offset = {}, onHide, icon, variant = 'information', }) => {
     const [isShow, setIsShow] = useState(false);
-    const animationClassName = getAnimationClassName(isShow, animation);
-    const errorContentClassName = hasError ? `${BLOCK_NAME}-content--error` : '';
-    const formattedDuration = limitDuration(duration) - ANIMATION_DURATION;
+    const offset = {
+        top: _offset.top || 24,
+        bottom: _offset.bottom || 24,
+    };
     const timeoutID = useRef(null);
-    const transitionElementRef = useRef(null);
+    const [clientHeight, setClientHeight] = useState(0);
     const setIsShowWithTimeout = useCallback(() => {
-        // Out animation is executed after `formattedDuration` seconds.
+        // Out animation is executed after `TOTAL_ANIMATION_DURATION` seconds.
         if (timeoutID.current === null && isShow) {
             timeoutID.current = window.setTimeout(() => {
                 setIsShow(false);
-            }, formattedDuration);
+            }, TOTAL_ANIMATION_DURATION);
         }
-    }, [isShow, timeoutID, setIsShow, formattedDuration]);
+    }, [isShow, timeoutID, setIsShow]);
     const resetTimeout = useCallback(() => {
         if (timeoutID.current) {
             window.clearTimeout(timeoutID.current);
@@ -40,6 +35,9 @@ export const Toast = ({ children, active = false, duration = 4000, animation = '
             timeoutID.current = null;
         }
     }, [isShow, setIsShow, onHide]);
+    const handleOnClickCloseButton = useCallback(() => {
+        setIsShow(false);
+    }, []);
     useEffect(() => {
         // Animation is not stopped even if `active` props is changed while running animation.
         if (active && timeoutID.current === null) {
@@ -50,18 +48,28 @@ export const Toast = ({ children, active = false, duration = 4000, animation = '
         setIsShowWithTimeout();
         return resetTimeout;
     }, [setIsShowWithTimeout, resetTimeout]);
-    useEffect(() => {
-        const transitionElement = transitionElementRef.current;
-        // When out animation is finished, `onHide` method is invoked.
-        if (transitionElement) {
-            transitionElement.addEventListener('transitionend', handleTransitionEnd);
-        }
-        return () => {
-            if (transitionElement) {
-                transitionElement.removeEventListener('transitionend', handleTransitionEnd);
-            }
-        };
-    }, [transitionElementRef, handleTransitionEnd]);
-    return (React.createElement("div", { className: `${BLOCK_NAME} ${BLOCK_NAME}--${position} ${BLOCK_NAME}--${animation} ${animationClassName}`, ref: transitionElementRef },
-        React.createElement("div", { className: `${BLOCK_NAME}--content ${errorContentClassName}`, tabIndex: 0, onMouseOver: resetTimeout, onMouseOut: setIsShowWithTimeout, onFocus: resetTimeout, onBlur: setIsShowWithTimeout }, children)));
+    const contentHeight = clientHeight;
+    const offsetPosition = offset[position] || 0;
+    const orderOffset = order * (contentHeight + VERTICAL_GAP) + offsetPosition;
+    return (React.createElement("div", { style: {
+            ['--Toast--initial-height']: `${orderOffset - contentHeight + offsetPosition}px`,
+            ['--Toast--order-offset-top']: `${orderOffset}px`,
+            ['--Toast--order-offset-bottom']: `${-orderOffset}px`,
+            ['--Toast--offset-top']: `${offset.top}px`,
+            ['--Toast--offset-bottom']: `${offset.bottom}px`,
+        }, className: [
+            BLOCK_NAME,
+            `${BLOCK_NAME}--${position}`,
+            `${BLOCK_NAME}--slide`,
+            isShow && `${BLOCK_NAME}-slide--in`,
+            !active && `${BLOCK_NAME}--hidden`,
+        ]
+            .filter(Boolean)
+            .join(' '), "aria-hidden": !active, onTransitionEnd: handleTransitionEnd, ref: (ref) => setClientHeight(ref?.clientHeight || 0) },
+        React.createElement("div", { className: `${BLOCK_NAME}-content ${BLOCK_NAME}-content--${variant}`, onMouseOver: resetTimeout, onMouseOut: setIsShowWithTimeout, onFocus: resetTimeout, onBlur: setIsShowWithTimeout },
+            icon && React.createElement("div", { className: `${BLOCK_NAME}-contentInfo` }, icon),
+            React.createElement("span", { className: `${BLOCK_NAME}-contentText` }, children),
+            React.createElement("div", { className: `${BLOCK_NAME}-iconButton ${BLOCK_NAME}-iconButton--${variant}`, onTransitionEnd: (e) => e.stopPropagation() },
+                React.createElement(IconButton, { size: "exSmall", variant: "neutral", onClick: handleOnClickCloseButton },
+                    React.createElement(CrossBold, { "aria-label": "\u9589\u3058\u308B" }))))));
 };

package/index.css CHANGED Viewed

	@@ -1 +1 @@
1	- :root{--ameba-green:#2d8c3c;--ameba-black:#000;--ameba-yellow-green:#82be28;--ameba-neutral-gray:#f6f6f6;--ameba-white:#fff;--ameba-yellow:#f5e100;--primary-green-100:#0f5c1f;--primary-green-90:#186b27;--primary-green-80:#237b31;--primary-green-70:#298737;--primary-green-60:#389e46;--primary-green-50:#41ad4f;--primary-green-40:#5eb969;--primary-green-30:#7bc583;--primary-green-20:#a1d5a7;--primary-green-10:#c6e5c9;--primary-green-5:#e7f5e9;--secondary-green-100:#366600;--secondary-green-90:#427504;--secondary-green-80:#477d00;--secondary-green-70:#5e9b15;--secondary-green-60:#73ae20;--secondary-green-50:#82be28;--secondary-green-40:#95c84d;--secondary-green-30:#a9d16f;--secondary-green-20:#c2de99;--secondary-green-10:#daebc1;--secondary-green-5:#f0f7e6;--gray-100:#08121a;--gray-90-alpha:rgba(8,18,26,0.95);--gray-80-alpha:rgba(8,18,26,0.8);--gray-70-alpha:rgba(8,18,26,0.74);--gray-60-alpha:rgba(8,18,26,0.61);--gray-50-alpha:rgba(8,18,26,0.47);--gray-40-alpha:rgba(8,18,26,0.4);--gray-30-alpha:rgba(8,18,26,0.3);--gray-20-alpha:rgba(8,18,26,0.16);--gray-10-alpha:rgba(8,18,26,0.08);--gray-5-alpha:rgba(8,18,26,0.04);--gray-90:#141e25;--gray-80:#394148;--gray-70:#464d53;--gray-60:#686e73;--gray-50:#8b9093;--gray-40:#9ca0a3;--gray-30:#b5b8ba;--gray-20:#d8d9da;--gray-10:#ebeced;--gray-5:#f5f6f6;--white-100:#fff;--white-90-alpha:hsla(0,0%,100%,0.9);--white-80-alpha:hsla(0,0%,100%,0.8);--white-70-alpha:hsla(0,0%,100%,0.7);--white-60-alpha:hsla(0,0%,100%,0.6);--white-50-alpha:hsla(0,0%,100%,0.5);--white-40-alpha:hsla(0,0%,100%,0.43);--white-30-alpha:hsla(0,0%,100%,0.3);--white-20-alpha:hsla(0,0%,100%,0.16);--white-10-alpha:hsla(0,0%,100%,0.1);--white-5-alpha:hsla(0,0%,100%,0.05);--black-100:#000;--black-90-alpha:rgba(0,0,0,0.9);--black-80-alpha:rgba(0,0,0,0.8);--black-70-alpha:rgba(0,0,0,0.7);--black-60-alpha:rgba(0,0,0,0.6);--black-50-alpha:rgba(0,0,0,0.5);--black-40-alpha:rgba(0,0,0,0.4);--black-30-alpha:rgba(0,0,0,0.3);--black-20-alpha:rgba(0,0,0,0.2);--black-10-alpha:rgba(0,0,0,0.1);--black-5-alpha:rgba(0,0,0,0.05);--caution-red-100:#d91c0b;--caution-red-20-alpha:rgba(217,28,11,0.2);--caution-red-5-alpha:rgba(217,28,11,0.05);--caution-red-vivid-100:#ff6a59;--caution-red-vivid-20-alpha:rgba(255,106,89,0.2);--caution-red-vivid-5-alpha:rgba(255,106,89,0.05);--expressive-blue:#4795c8;--expressive-green:#4ac3aa;--expressive-purple:#ca5ce6;--expressive-lavender:#755ce6;--expressive-orange:#e6815c;--expressive-yellow:#e6ac5c;--expressive-pink:#e6456a;--facebook-blue:#1877f2;--twitter-blue:#1da1f2;--instagram-pink:#f20076;--apple-black:#000;--apple-white:#fff;--youtube-red:red;--focus-blue-100:#0091ff;--focus-blue-30-alpha:rgba(0,145,255,0.3);--highlight-yellow-100:#f5e100;--highlight-yellow-30-alpha:rgba(245,225,0,0.3);--color-background:var(--gray-5);--color-surface-primary:var(--white-100);--color-surface-secondary:var(--gray-5-alpha);--color-surface-tertiary:var(--gray-10-alpha);--color-surface-quaternary:var(--gray-20-alpha);--color-surface-accent-primary:var(--primary-green-70);--color-surface-accent-primary-light:var(--primary-green-5);--color-surface-accent-secondary:var(--secondary-green-50);--color-surface-accent-secondary-light:var(--secondary-green-5);--color-surface-caution:var(--caution-red-100);--color-surface-caution-light:var(--caution-red-5-alpha);--color-text-high-emphasis:var(--gray-100);--color-text-medium-emphasis:var(--gray-70-alpha);--color-text-low-emphasis:var(--gray-60-alpha);--color-text-disabled:var(--gray-30-alpha);--color-text-high-emphasis-inverse:var(--white-100);--color-text-accent-primary:var(--primary-green-80);--color-text-accent-secondary:var(--secondary-green-80);--color-text-caution:var(--caution-red-100);--color-highlight-error:var(--caution-red-20-alpha);--color-highlight-hover:var(--black-30-alpha);--color-highlight-yellow:var(--highlight-yellow-100);--color-object-high-emphasis:var(--gray-100);--color-object-medium-emphasis:var(--gray-70-alpha);--color-object-low-emphasis:var(--gray-60-alpha);--color-object-disable:var(--gray-30-alpha);--color-object-accent-primary:var(--primary-green-70);--color-object-accent-secondary:var(--secondary-green-70);--color-object-caution:var(--caution-red-100);--color-object-high-emphasis-inverse:var(--white-100);--color-object-expressive-pink:var(--expressive-pink);--color-overlay-dark:var(--black-80-alpha);--color-overlay-light:var(--black-20-alpha);--color-overlay-medium:var(--black-60-alpha);--color-focus-clarity:var(--focus-blue-100);--color-focus-ambiguous:var(--focus-blue-30-alpha);--color-border-strong-emphasis:var(--gray-100);--color-border-high-emphasis:var(--gray-60-alpha);--color-border-medium-emphasis:var(--gray-30-alpha);--color-border-low-emphasis:var(--gray-10-alpha);--color-border-accent-primary:var(--primary-green-70);--color-border-high-emphasis-inverse:var(--white-100);--color-border-caution:var(--caution-red-100);--color-third-party-facebook-blue:var(--facebook-blue);--color-third-party-twitter-blue:var(--twitter-blue);--color-third-party-instagram-pink:var(--instagram-pink);--color-system-black:var(--black-100);--color-tap-highlight-base:var(--gray-5-alpha)}.spui-Breadcrumb{background:var(--color-surface-secondary);border-radius:70px;display:inline-block;overflow:hidden;padding:0 16px}.spui-Breadcrumb-list{align-items:center;display:flex;list-style:none;margin:0;padding:0}.spui-Breadcrumb-item{align-items:center;display:flex;min-height:56px}.spui-Breadcrumb a{align-items:center;border-radius:4px;display:flex;letter-spacing:.1em;line-height:1.3;padding:4px 8px;position:relative;text-decoration:none}.spui-Breadcrumb a:not([aria-current]){color:var(--color-text-accent-primary);font-weight:700}.spui-Breadcrumb a[aria-current]{color:var(--color-text-low-emphasis);font-weight:400}.spui-Breadcrumb a:before{border-radius:4px;content:"";left:0;min-height:56px;position:absolute;top:-50%;width:100%}.spui-Breadcrumb a:hover{text-decoration:underline}.spui-Breadcrumb a:focus{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-Breadcrumb a:focus:not(:focus-visible){outline:none}.spui-Breadcrumb-chevron{color:var(--color-object-low-emphasis);height:16px;padding:0 4px;width:16px}.spui-Breadcrumb-item:last-of-type>.spui-Breadcrumb-chevron{display:none;padding:0}@media screen and (max-width:768px){.spui-Breadcrumb{padding:0 14px}.spui-Breadcrumb-item{min-height:40px}.spui-Breadcrumb a{font-size:.8125em;padding:2px 6px}.spui-Breadcrumb a:not([aria-current]):before{min-height:40px}.spui-Breadcrumb-chevron{height:12px;padding:0 2px;width:12px}}:root{--Button-tapHighlightColor:var(--gray-5-alpha);--Button-onFocus-outlineColor:var(--color-focus-clarity);--Button--contained-backgroundColor:var(--color-surface-accent-primary);--Button--contained-color:var(--color-text-high-emphasis-inverse);--Button--contained-onActive-backgroundColor:var(--primary-green-100);--Button--contained-onHover-backgroundColor:var(--primary-green-100);--Button--outlined-borderColor:var(--color-border-accent-primary);--Button--outlined-color:var(--color-text-accent-primary);--Button--outlined-onActive-backgroundColor:var(--primary-green-5);--Button--outlined-onHover-backgroundColor:var(--primary-green-5);--Button--lighted-backgroundColor:var(--color-surface-accent-primary-light);--Button--lighted-color:var(--color-text-accent-primary);--Button--lighted-onActive-backgroundColor:var(--primary-green-10);--Button--lighted-onHover-backgroundColor:var(--primary-green-10);--Button--neutral-backgroundColor:var(--color-surface-tertiary);--Button--neutral-color:var(--color-text-medium-emphasis);--Button--neutral-onActive-backgroundColor:var(--gray-20-alpha);--Button--neutral-onHover-backgroundColor:var(--gray-20-alpha);--Button--danger-borderColor:var(--color-border-caution);--Button--danger-color:var(--color-text-caution);--Button--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--Button--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-Button{align-items:center;box-sizing:border-box;display:inline-flex;font-family:inherit;font-weight:700;justify-content:center;line-height:1.3;margin:0;-webkit-tap-highlight-color:var(--Button-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-Button:disabled{opacity:.3}.spui-Button:focus{outline:2px solid var(--Button-onFocus-outlineColor);outline-offset:1px}.spui-Button:focus:not(:focus-visible){outline:none}.spui-Button--fullWidth{width:100%}.spui-Button--large{border-radius:3em;font-size:1em;min-height:48px;padding-left:16px;padding-right:16px}.spui-Button--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding-left:16px;padding-right:16px}.spui-Button--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding-left:10px;padding-right:10px}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.spui-Button--large,.spui-Button--medium,.spui-Button--small{height:1px}}.spui-Button--contained{background-color:var(--Button--contained-backgroundColor);border:none;color:var(--Button--contained-color);padding-bottom:8px;padding-top:8px}.spui-Button--contained:active{background-color:var(--Button--contained-onActive-backgroundColor)}@media (hover:hover){.spui-Button--contained:not([disabled]):hover{background-color:var(--Button--contained-onHover-backgroundColor)}}.spui-Button--outlined{background-color:transparent;border:2px solid var(--Button--outlined-borderColor);color:var(--Button--outlined-color);padding-bottom:6px;padding-top:6px}.spui-Button--outlined:active{background-color:var(--Button--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-Button--outlined:not([disabled]):hover{background-color:var(--Button--outlined-onHover-backgroundColor)}}.spui-Button--lighted{background-color:var(--Button--lighted-backgroundColor);border:none;color:var(--Button--lighted-color);padding-bottom:8px;padding-top:8px}.spui-Button--lighted:active{background-color:var(--Button--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-Button--lighted:not([disabled]):hover{background-color:var(--Button--lighted-onHover-backgroundColor)}}.spui-Button--neutral{background-color:var(--Button--neutral-backgroundColor);border:none;color:var(--Button--neutral-color);padding-bottom:8px;padding-top:8px}.spui-Button--neutral:active{background-color:var(--Button--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-Button--neutral:not([disabled]):hover{background-color:var(--Button--neutral-onHover-backgroundColor)}}.spui-Button--danger{background-color:transparent;border:2px solid var(--Button--danger-borderColor);color:var(--Button--danger-color);padding-bottom:6px;padding-top:6px}.spui-Button--danger:active{background-color:var(--Button--danger-onActive-backgroundColor)}@media (hover:hover){.spui-Button--danger:not([disabled]):hover{background-color:var(--Button--danger-onHover-backgroundColor)}}.spui-Button-icon{line-height:0}.spui-Button-icon--large{font-size:1.375em;margin-right:6px}.spui-Button-icon--medium{font-size:1.429em;margin-right:4px}.spui-Button-icon--small{font-size:1.23em;margin-right:2px}.spui-ButtonGroup{display:flex}.spui-ButtonGroup--row{flex-direction:row}.spui-ButtonGroup--column{flex-direction:column}.spui-ButtonGroup--large.spui-ButtonGroup--row>:not(:first-child){margin-left:16px}.spui-ButtonGroup--large.spui-ButtonGroup--column>:not(:first-child){margin-top:16px}.spui-ButtonGroup--medium.spui-ButtonGroup--row>:not(:first-child){margin-left:12px}.spui-ButtonGroup--medium.spui-ButtonGroup--column>:not(:first-child){margin-top:12px}.spui-ButtonGroup--small.spui-ButtonGroup--row>:not(:first-child){margin-left:8px}.spui-ButtonGroup--small.spui-ButtonGroup--column>:not(:first-child){margin-top:12px}.spui-ButtonGroup--large.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:20px}:is(.spui-ButtonGroup--medium,.spui-ButtonGroup--small).spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:14px}.spui-Dialog{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);color:var(--color-text-medium-emphasis);padding:24px;width:352px}@media screen and (max-width:472px){.spui-Dialog{width:calc(100% - 120px)}}.spui-Dialog::backdrop{background:rgba(0,0,0,.8)}.spui-Dialog+.backdrop{background:rgba(0,0,0,.8)}.spui-Dialog[open]:not(.spui-Dialog--closing),.spui-Dialog[open]:not(.spui-Dialog--closing).spui-Dialog::backdrop{animation:spui-Dialog-fade-in .35s cubic-bezier(0,0,0,1)}.spui-Dialog--closing,.spui-Dialog--closing.spui-Dialog::backdrop{animation:spui-Dialog-fade-out .15s cubic-bezier(0,0,0,1)}@media (prefers-reduced-motion:reduce){.spui-Dialog--closing,.spui-Dialog--closing.spui-Dialog::backdrop,.spui-Dialog[open]:not(.spui-Dialog--closing),.spui-Dialog[open]:not(.spui-Dialog--closing).spui-Dialog::backdrop{animation-duration:.01s}}html:has(.spui-Dialog[open]){overflow:hidden}html.spui-Dialog--open{overflow:hidden}.spui-Dialog :is(.spui-Button,.spui-LinkButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-Dialog :is(.spui-Button,.spui-LinkButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-Dialog-title{color:var(--color-text-high-emphasis);font-size:1.25em;font-weight:700;line-height:1.4;margin:0;padding:0;text-align:center}.spui-Dialog-body{color:var(--color-text-medium-emphasis);font-size:.875em;line-height:1.6;margin:16px 0 0;overflow-wrap:break-word;text-align:center}.spui-Dialog-buttonGroup{align-items:center;justify-content:center;margin:32px 0 0;text-align:center}.spui-Dialog-buttonGroup :is(.spui-Button,.spui-SubtleButton){max-width:240px}@media screen and (min-width:768px){.spui-Dialog{padding:36px;width:328px}}@keyframes spui-Dialog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes spui-Dialog-fade-out{0%{opacity:1}to{opacity:0}}.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-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;bottom:-2px;height:22px;left:-2px;position:absolute;right:-2px;top:-2px;width:22px}.spui-Checkbox-input:focus~.spui-Checkbox-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Checkbox-input:focus:not(: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:listitem;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;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{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:listitem;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}.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-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;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%;bottom:-2px;height:24px;left:-2px;position:absolute;right:-2px;top:-2px;width:24px}.spui-Radio-input:focus~.spui-Radio-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Radio-input:focus:not(: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::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{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::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{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;bottom:-2px;left:-2px;position:absolute;right:-2px;top:-2px;z-index:-1}.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-HeroCarouselItem-listItem{list-style:none;padding:0 .44em;width:100%}.spui-HeroCarouselItem-link{border:1px solid var(--color-border-low-emphasis);border-radius:12px;box-sizing:border-box;display:flex;flex-direction:column;height:12em;text-decoration:none;width:17.5em}.spui-HeroCarouselItem-link:focus{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-HeroCarouselItem-link:focus:not(:focus-visible){outline:none}.spui-HeroCarouselItem-imageBlock{align-items:center;border-bottom:1px solid var(--color-border-low-emphasis);border-radius:12px 12px 0 0;display:flex;height:9.5em;justify-content:center;overflow:hidden}.spui-HeroCarouselItem-image{height:100%;object-fit:cover;width:100%}.spui-HeroCarouselItem-titleContainer{align-items:center;box-sizing:border-box;display:flex;height:2.89em;justify-content:center;padding:0 .5em}.spui-HeroCarouselItem-title{color:var(--color-text-high-emphasis);font-size:.9375em;font-weight:700;margin:0;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}@media screen and (min-width:768px){.spui-HeroCarouselItem-listItem{padding:0 .75em}.spui-HeroCarouselItem-link{height:13.8em;width:20em}.spui-HeroCarouselItem-titleContainer{height:3.3em}.spui-HeroCarouselItem-title{font-size:1em}.spui-HeroCarouselItem-imageBlock{height:10.9em}}.spui-HeroCarousel-container{align-items:center;display:flex;height:12.5em;justify-content:center;overflow:hidden}.spui-HeroCarousel-list{display:flex;margin-right:.88em;padding:0 .44em;transition:transform .5s;width:17.5em}.spui-HeroCarousel-controls{align-items:center;border:1px solid var(--color-border-low-emphasis);border-radius:100px;display:flex;height:2.5em;margin:.88em auto 0;width:7.63em}.spui-HeroCarousel-control{align-items:center;background-color:transparent;border:none;display:flex;font-size:1em;height:100%;justify-content:center;padding:0;width:33.33333%}.spui-HeroCarousel-control:hover{opacity:.7}.spui-HeroCarousel-control:focus{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-HeroCarousel-control:focus:not(:focus-visible){outline:none}.spui-HeroCarousel-control--prev{border-radius:100px 0 0 100px;border-right:1px solid var(--color-border-low-emphasis)}.spui-HeroCarousel-control--next{border-left:1px solid var(--color-border-low-emphasis);border-radius:0 100px 100px 0}@media (prefers-reduced-motion:reduce){.spui-HeroCarousel-list{transition:1ms}}@media screen and (min-width:768px){.spui-HeroCarousel-container{height:14.3em}.spui-HeroCarousel-list{margin-right:1.5em;padding:0 .75em;width:20em}.spui-HeroCarousel-controls{height:2.75em;margin-top:1.25em;width:8.38em}}.spui-HeroCarousel-control>svg{color:var(--color-text-low-emphasis);height:1.13em;width:1.13em}@media screen and (min-width:768px){.spui-HeroCarousel-control>svg{height:1.25em;width:1.25em}}:root{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-outlineColor:var(--color-focus-clarity);--IconButton--contained-backgroundColor:var(--color-surface-accent-primary);--IconButton--contained-color:var(--color-object-high-emphasis-inverse);--IconButton--contained-onActive-backgroundColor:var(--primary-green-100);--IconButton--contained-onHover-backgroundColor:var(--primary-green-100);--IconButton--outlined-borderColor:var(--color-border-accent-primary);--IconButton--outlined-color:var(--color-object-accent-primary);--IconButton--outlined-onActive-backgroundColor:var(--primary-green-5);--IconButton--outlined-onHover-backgroundColor:var(--primary-green-5);--IconButton--lighted-backgroundColor:var(--color-surface-accent-primary-light);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--LinkButton-tapHighlightColor:var(--gray-5-alpha);--LinkButton-onFocus-outlineColor:var(--color-focus-clarity);--LinkButton--contained-backgroundColor:var(--color-surface-accent-primary);--LinkButton--contained-color:var(--color-text-high-emphasis-inverse);--LinkButton--contained-onActive-backgroundColor:var(--primary-green-100);--LinkButton--contained-onHover-backgroundColor:var(--primary-green-100);--LinkButton--outlined-borderColor:var(--color-border-accent-primary);--LinkButton--outlined-color:var(--color-text-accent-primary);--LinkButton--outlined-onActive-backgroundColor:var(--primary-green-5);--LinkButton--outlined-onHover-backgroundColor:var(--primary-green-5);--LinkButton--lighted-backgroundColor:var(--color-surface-accent-primary-light);--LinkButton--lighted-color:var(--color-text-accent-primary);--LinkButton--lighted-onActive-backgroundColor:var(--primary-green-10);--LinkButton--lighted-onHover-backgroundColor:var(--primary-green-10);--LinkButton--neutral-backgroundColor:var(--color-surface-tertiary);--LinkButton--neutral-color:var(--color-text-medium-emphasis);--LinkButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--LinkButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--LinkButton--danger-borderColor:var(--color-border-caution);--LinkButton--danger-color:var(--color-text-caution);--LinkButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--LinkButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-LinkButton{align-items:center;box-sizing:border-box;display:inline-flex;font-family:inherit;font-weight:700;justify-content:center;line-height:1.3;-webkit-tap-highlight-color:var(--LinkButton-tapHighlightColor);text-align:center;text-decoration:none;transition:background-color .3s}.spui-LinkButton:focus{outline:2px solid var(--LinkButton-onFocus-outlineColor);outline-offset:1px}.spui-LinkButton:focus:not(:focus-visible){outline:none}.spui-LinkButton--fullWidth{width:100%}.spui-LinkButton--large{border-radius:3em;font-size:1em;min-height:48px;padding-left:16px;padding-right:16px}.spui-LinkButton--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding-left:16px;padding-right:16px}.spui-LinkButton--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding-left:10px;padding-right:10px}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.spui-LinkButton--large,.spui-LinkButton--medium,.spui-LinkButton--small{height:1px}}.spui-LinkButton--contained{background-color:var(--LinkButton--contained-backgroundColor);border:none;color:var(--LinkButton--contained-color);padding-bottom:8px;padding-top:8px}.spui-LinkButton--contained:active{background-color:var(--LinkButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--contained:hover{background-color:var(--LinkButton--contained-onHover-backgroundColor)}}.spui-LinkButton--outlined{background-color:transparent;border:2px solid var(--LinkButton--outlined-borderColor);color:var(--LinkButton--outlined-color);padding-bottom:6px;padding-top:6px}.spui-LinkButton--outlined:active{background-color:var(--LinkButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--outlined:hover{background-color:var(--LinkButton--outlined-onHover-backgroundColor)}}.spui-LinkButton--lighted{background-color:var(--LinkButton--lighted-backgroundColor);border:none;color:var(--LinkButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-LinkButton--lighted:active{background-color:var(--LinkButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--lighted:hover{background-color:var(--LinkButton--lighted-onHover-backgroundColor)}}.spui-LinkButton--neutral{background-color:var(--LinkButton--neutral-backgroundColor);border:none;color:var(--LinkButton--neutral-color);padding-bottom:8px;padding-top:8px}.spui-LinkButton--neutral:active{background-color:var(--LinkButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--neutral:hover{background-color:var(--LinkButton--neutral-onHover-backgroundColor)}}.spui-LinkButton--danger{background-color:transparent;border:2px solid var(--LinkButton--danger-borderColor);color:var(--LinkButton--danger-color);padding-bottom:6px;padding-top:6px}.spui-LinkButton--danger:active{background-color:var(--LinkButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--danger:hover{background-color:var(--LinkButton--danger-onHover-backgroundColor)}}.spui-LinkButton-icon{line-height:0}.spui-LinkButton-icon--large{font-size:1.375em;margin-right:6px}.spui-LinkButton-icon--medium{font-size:1.429em;margin-right:4px}.spui-LinkButton-icon--small{font-size:1.23em;margin-right:2px}:root{--SubtleButton-tapHighlightColor:var(--white-60-alpha);--SubtleButton-onFocus-outlineColor:var(--color-focus-clarity);--SubtleButton-color:var(--color-text-medium-emphasis)}.spui-SubtleButton{background:none;border:none;border-radius:4px;color:var(--SubtleButton-color);font-family:inherit;font-weight:700;line-height:1.3;margin:0;padding:0;-webkit-tap-highlight-color:var(--SubtleButton-tapHighlightColor);text-align:center}.spui-SubtleButton:disabled{opacity:.3}.spui-SubtleButton:focus{outline:2px solid var(--SubtleButton-onFocus-outlineColor);outline-offset:1px}.spui-SubtleButton:focus:not(:focus-visible){outline:none}@media (hover:hover){.spui-SubtleButton:not([disabled]):hover{text-decoration:underline}}.spui-SubtleButton--large,.spui-SubtleButton--medium{font-size:.875em}.spui-SubtleButton--small{font-size:.8125em}:root{--AppealModal-image-border:1px inset var(--color-border-low-emphasis);--AppealModal-image-borderRadius:8px}.spui-AppealModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);padding:0;width:400px}.spui-AppealModal[open]:not(.spui-AppealModal--closing),.spui-AppealModal[open]:not(.spui-AppealModal--closing).spui-AppealModal::backdrop{animation:spui-AppealModal-fade-in .5s cubic-bezier(0,0,0,1)}.spui-AppealModal--closing,.spui-AppealModal--closing.spui-AppealModal::backdrop{animation:spui-AppealModal-fade-out .3s cubic-bezier(0,0,0,1)}@media (prefers-reduced-motion:reduce){.spui-AppealModal--closing,.spui-AppealModal--closing.spui-AppealModal::backdrop,.spui-AppealModal[open]:not(.spui-AppealModal--closing),.spui-AppealModal[open]:not(.spui-AppealModal--closing).spui-AppealModal::backdrop{animation-duration:.01s}}html:has(.spui-AppealModal[open]){overflow:hidden}html.spui-AppealModal--open{overflow:hidden}@media screen and (max-width:440px){.spui-AppealModal{width:calc(100% - 48px)}}.spui-AppealModal::backdrop{background:rgba(0,0,0,.6)}.spui-AppealModal+.backdrop{background:rgba(0,0,0,.6)}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-AppealModal-frame{color:var(--color-text-medium-emphasis);display:grid;gap:0 0;grid-auto-flow:row;grid-template-areas:"Image" "Title" "Body" "ButtonGroup" "CloseButton";grid-template-columns:1fr;grid-template-rows:auto;padding:0 0 24px;width:100%}.spui-AppealModal-image{grid-area:Image}.spui-AppealModal-image img{border-radius:20px 20px 0 0}.spui-AppealModal-title{color:var(--color-text-high-emphasis);font-size:1.125em;font-weight:700;grid-area:Title;line-height:1.4;margin:24px 24px 0;padding:0;text-align:center}.spui-AppealModal-body{color:var(--color-text-medium-emphasis);font-size:.875em;grid-area:Body;line-height:1.6;margin:8px 24px 0;overflow-wrap:break-word;text-align:center}.spui-AppealModal-buttonGroup{align-items:center;grid-area:ButtonGroup;justify-content:center;margin:16px 24px 0;text-align:center}.spui-AppealModal-closeIconButton,.spui-AppealModal-closeTextButton{grid-area:CloseButton}.spui-AppealModal-closeIconButton{display:none}.spui-AppealModal-closeTextButton{margin:20px 24px 0;text-align:center}.spui-AppealModal-buttonGroup :is(.spui-Button,.spui-LinkButton){max-width:240px}@media screen and (min-width:768px){.spui-AppealModal{min-height:300px;min-width:500px}.spui-AppealModal--large{width:1024px}.spui-AppealModal--medium{width:840px}.spui-AppealModal--small{width:480px}.spui-AppealModal-frame{grid-auto-flow:row;grid-template-areas:"Title CloseButton" "Body CloseButton" "Image Image" "ButtonGroup ButtonGroup";grid-template-columns:1fr 72px;grid-template-rows:auto;padding:0 0 36px}.spui-AppealModal-title{margin:32px 16px 0 36px;text-align:left}.spui-AppealModal-body{margin:12px 16px 0 36px;text-align:left}.spui-AppealModal-image{margin:32px 36px 0}.spui-AppealModal-image img{border:var(--AppealModal-image-border);border-radius:var(--AppealModal-image-borderRadius);box-sizing:border-box}.spui-AppealModal-buttonGroup{margin:16px 36px 0}.spui-AppealModal-closeIconButton{--IconButton--neutral-backgroundColor:none;--IconButton--neutral-onHover-backgroundColor:var(--color-surface-tertiary);display:inline-flex;margin:36px 0 0}.spui-AppealModal-closeTextButton{display:none}}@keyframes spui-AppealModal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes spui-AppealModal-fade-out{0%{opacity:1}to{opacity:0}}:root{--TextButton-tapHighlightColor:var(--white-60-alpha);--TextButton-onFocus-outlineColor:var(--color-focus-clarity);--TextButton-color:var(--color-text-accent-primary);--TextButton-icon-color:var(--color-object-accent-primary);--TextButton-fontWeight:bold;--TextButton--subtle-color:var(--color-text-low-emphasis);--TextButton--subtle-icon-color:var(--color-object-low-emphasis)}.spui-TextButton{background:none;border:none;border-radius:4px;color:var(--TextButton-color);font-family:inherit;font-size:1em;font-weight:var(--TextButton-fontWeight);margin:0;padding:0;-webkit-tap-highlight-color:var(--TextButton-tapHighlightColor)}.spui-TextButton:focus{outline:2px solid var(--TextButton-onFocus-outlineColor);outline-offset:1px}.spui-TextButton:focus:not(:focus-visible){outline:none}.spui-TextButton--subtle{color:var(--TextButton--subtle-color)}.spui-TextButton--hasIcon{align-items:center;display:inline-flex}.spui-TextButton-icon{line-height:0}.spui-TextButton--iconstart .spui-TextButton-icon{margin-right:4px}.spui-TextButton--iconend{flex-direction:row-reverse}.spui-TextButton--iconend .spui-TextButton-icon{margin-left:4px}.spui-TextButton{text-decoration:underline}.spui-TextButton--hasIcon,.spui-TextButton--underlinehover{text-decoration:none}@media (hover:hover){.spui-TextButton:hover{text-decoration:none}:is(.spui-TextButton--hasIcon,.spui-TextButton--underlinehover):hover{text-decoration:underline}}:root{--TextLink-tapHighlightColor:var(--white-60-alpha);--TextLink-onFocus-outlineColor:var(--color-focus-clarity);--TextLink-color:var(--color-text-accent-primary);--TextLink-icon-color:var(--color-object-accent-primary);--TextLink-fontWeight:bold;--TextLink--subtle-color:var(--color-text-low-emphasis);--TextLink--subtle-icon-color:var(--color-object-low-emphasis)}.spui-TextLink{border-radius:4px;color:var(--TextLink-color);font-family:inherit;font-weight:var(--TextLink-fontWeight);-webkit-tap-highlight-color:var(--TextLink-tapHighlightColor)}.spui-TextLink:focus{outline:2px solid var(--TextLink-onFocus-outlineColor);outline-offset:1px}.spui-TextLink:focus:not(:focus-visible){outline:none}.spui-TextLink--subtle{color:var(--TextLink--subtle-color)}.spui-TextLink--hasIcon{align-items:center;display:inline-flex}.spui-TextLink-icon{line-height:0}.spui-TextLink--iconstart .spui-TextLink-icon{margin-right:4px}.spui-TextLink--iconend{flex-direction:row-reverse}.spui-TextLink--iconend .spui-TextLink-icon{margin-left:4px}.spui-TextLink{text-decoration:underline}.spui-TextLink--hasIcon,.spui-TextLink--underlinehover{text-decoration:none}@media (hover:hover){.spui-TextLink:hover{text-decoration:none}:is(.spui-TextLink--hasIcon,.spui-TextLink--underlinehover):hover{text-decoration:underline}}:root{--Toast-z-index:1}.spui-Toast{left:0;position:fixed;right:0;text-align:center;z-index:var(--Toast-z-index)}.spui-Toast--content{background-color:var(--color-surface-accent-primary-light);border-radius:40px;box-shadow:0 4.75px 14.25px rgba(8,18,26,.12);box-sizing:border-box;color:var(--color-text-accent-primary);cursor:default;display:inline-block;font-family:inherit;font-size:16px;font-weight:700;margin:0;padding:11px 16px}.spui-Toast-content--error{background-color:var(--color-surface-caution-light);color:var(--color-text-caution);position:relative}.spui-Toast-content--error:before{background-color:var(--color-surface-primary);border-radius:40px;content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.spui-Toast--top{top:16px}.spui-Toast--bottom{bottom:0}.spui-Toast--slide{transform:translateY(-100px);transition:transform .5s ease}.spui-Toast-slide--in{transform:translateY(0)}@media (prefers-reduced-motion:reduce){.spui-Toast--slide{transition-duration:.1ms}}:root{--MoreLink-tapHighlightColor:var(--gray-5-alpha);--MoreLink-backGroundColor:var(--color-surface-primary);--MoreLink-color:var(--color-text-accent-primary);--MoreLink-onFocus-outlineColor:var(--color-focus-clarity);--MoreLink-onHover-backgroundColor:var(--color-surface-accent-primary-light);--MoreLink-icon-color:var(--color-object-accent-primary)}.spui-MoreLink{align-items:center;background-color:var(--MoreLink-backGroundColor);box-sizing:border-box;color:var(--MoreLink-color);display:flex;font-family:inherit;font-size:1em;font-weight:700;justify-content:space-between;line-height:1.4;min-height:56px;padding:16px;-webkit-tap-highlight-color:var(--MoreLink-tapHighlightColor);text-decoration:none;transition:background-color .3s}.spui-MoreLink:focus{outline:2px solid var(--MoreLink-onFocus-outlineColor);outline-offset:1px}.spui-MoreLink:focus:not(:focus-visible){outline:none}@media (hover:hover){.spui-MoreLink:hover{background:var(--MoreLink-onHover-backgroundColor)}}.spui-MoreLink-icon{line-height:0;margin-left:12px}.spui-MoreLink-chevron{color:var(--MoreLink-icon-color)}
1	+ :root{--ameba-green:#2d8c3c;--ameba-black:#000;--ameba-yellow-green:#82be28;--ameba-neutral-gray:#f6f6f6;--ameba-white:#fff;--ameba-yellow:#f5e100;--primary-green-100:#0f5c1f;--primary-green-90:#186b27;--primary-green-80:#237b31;--primary-green-70:#298737;--primary-green-60:#389e46;--primary-green-50:#41ad4f;--primary-green-40:#5eb969;--primary-green-30:#7bc583;--primary-green-20:#a1d5a7;--primary-green-10:#c6e5c9;--primary-green-5:#e7f5e9;--secondary-green-100:#366600;--secondary-green-90:#427504;--secondary-green-80:#477d00;--secondary-green-70:#5e9b15;--secondary-green-60:#73ae20;--secondary-green-50:#82be28;--secondary-green-40:#95c84d;--secondary-green-30:#a9d16f;--secondary-green-20:#c2de99;--secondary-green-10:#daebc1;--secondary-green-5:#f0f7e6;--gray-100:#08121a;--gray-90-alpha:rgba(8,18,26,0.95);--gray-80-alpha:rgba(8,18,26,0.8);--gray-70-alpha:rgba(8,18,26,0.74);--gray-60-alpha:rgba(8,18,26,0.61);--gray-50-alpha:rgba(8,18,26,0.47);--gray-40-alpha:rgba(8,18,26,0.4);--gray-30-alpha:rgba(8,18,26,0.3);--gray-20-alpha:rgba(8,18,26,0.16);--gray-10-alpha:rgba(8,18,26,0.08);--gray-5-alpha:rgba(8,18,26,0.04);--gray-90:#141e25;--gray-80:#394148;--gray-70:#464d53;--gray-60:#686e73;--gray-50:#8b9093;--gray-40:#9ca0a3;--gray-30:#b5b8ba;--gray-20:#d8d9da;--gray-10:#ebeced;--gray-5:#f5f6f6;--white-100:#fff;--white-90-alpha:hsla(0,0%,100%,0.9);--white-80-alpha:hsla(0,0%,100%,0.8);--white-70-alpha:hsla(0,0%,100%,0.7);--white-60-alpha:hsla(0,0%,100%,0.6);--white-50-alpha:hsla(0,0%,100%,0.5);--white-40-alpha:hsla(0,0%,100%,0.43);--white-30-alpha:hsla(0,0%,100%,0.3);--white-20-alpha:hsla(0,0%,100%,0.16);--white-10-alpha:hsla(0,0%,100%,0.1);--white-5-alpha:hsla(0,0%,100%,0.05);--black-100:#000;--black-90-alpha:rgba(0,0,0,0.9);--black-80-alpha:rgba(0,0,0,0.8);--black-70-alpha:rgba(0,0,0,0.7);--black-60-alpha:rgba(0,0,0,0.6);--black-50-alpha:rgba(0,0,0,0.5);--black-40-alpha:rgba(0,0,0,0.4);--black-30-alpha:rgba(0,0,0,0.3);--black-20-alpha:rgba(0,0,0,0.2);--black-10-alpha:rgba(0,0,0,0.1);--black-5-alpha:rgba(0,0,0,0.05);--caution-red-100:#d91c0b;--caution-red-20-alpha:rgba(217,28,11,0.2);--caution-red-5-alpha:rgba(217,28,11,0.05);--caution-red-vivid-100:#ff6a59;--caution-red-vivid-20-alpha:rgba(255,106,89,0.2);--caution-red-vivid-5-alpha:rgba(255,106,89,0.05);--expressive-blue:#4795c8;--expressive-green:#4ac3aa;--expressive-purple:#ca5ce6;--expressive-lavender:#755ce6;--expressive-orange:#e6815c;--expressive-yellow:#e6ac5c;--expressive-pink:#e6456a;--facebook-blue:#1877f2;--twitter-blue:#1da1f2;--instagram-pink:#f20076;--apple-black:#000;--apple-white:#fff;--youtube-red:red;--focus-blue-100:#0091ff;--focus-blue-30-alpha:rgba(0,145,255,0.3);--highlight-yellow-100:#f5e100;--highlight-yellow-30-alpha:rgba(245,225,0,0.3);--color-background:var(--gray-5);--color-surface-primary:var(--white-100);--color-surface-secondary:var(--gray-5-alpha);--color-surface-tertiary:var(--gray-10-alpha);--color-surface-quaternary:var(--gray-20-alpha);--color-surface-accent-primary:var(--primary-green-70);--color-surface-accent-primary-light:var(--primary-green-5);--color-surface-accent-secondary:var(--secondary-green-50);--color-surface-accent-secondary-light:var(--secondary-green-5);--color-surface-caution:var(--caution-red-100);--color-surface-caution-light:var(--caution-red-5-alpha);--color-text-high-emphasis:var(--gray-100);--color-text-medium-emphasis:var(--gray-70-alpha);--color-text-low-emphasis:var(--gray-60-alpha);--color-text-disabled:var(--gray-30-alpha);--color-text-high-emphasis-inverse:var(--white-100);--color-text-accent-primary:var(--primary-green-80);--color-text-accent-secondary:var(--secondary-green-80);--color-text-caution:var(--caution-red-100);--color-highlight-error:var(--caution-red-20-alpha);--color-highlight-hover:var(--black-30-alpha);--color-highlight-yellow:var(--highlight-yellow-100);--color-object-high-emphasis:var(--gray-100);--color-object-medium-emphasis:var(--gray-70-alpha);--color-object-low-emphasis:var(--gray-60-alpha);--color-object-disable:var(--gray-30-alpha);--color-object-accent-primary:var(--primary-green-70);--color-object-accent-secondary:var(--secondary-green-70);--color-object-caution:var(--caution-red-100);--color-object-high-emphasis-inverse:var(--white-100);--color-object-expressive-pink:var(--expressive-pink);--color-overlay-dark:var(--black-80-alpha);--color-overlay-light:var(--black-20-alpha);--color-overlay-medium:var(--black-60-alpha);--color-focus-clarity:var(--focus-blue-100);--color-focus-ambiguous:var(--focus-blue-30-alpha);--color-border-strong-emphasis:var(--gray-100);--color-border-high-emphasis:var(--gray-60-alpha);--color-border-medium-emphasis:var(--gray-30-alpha);--color-border-low-emphasis:var(--gray-10-alpha);--color-border-accent-primary:var(--primary-green-70);--color-border-high-emphasis-inverse:var(--white-100);--color-border-caution:var(--caution-red-100);--color-third-party-facebook-blue:var(--facebook-blue);--color-third-party-twitter-blue:var(--twitter-blue);--color-third-party-instagram-pink:var(--instagram-pink);--color-system-black:var(--black-100);--color-tap-highlight-base:var(--gray-5-alpha)}.spui-Breadcrumb{background:var(--color-surface-secondary);border-radius:70px;display:inline-block;overflow:hidden;padding:0 16px}.spui-Breadcrumb-list{align-items:center;display:flex;list-style:none;margin:0;padding:0}.spui-Breadcrumb-item{align-items:center;display:flex;min-height:56px}.spui-Breadcrumb a{align-items:center;border-radius:4px;display:flex;letter-spacing:.1em;line-height:1.3;padding:4px 8px;position:relative;text-decoration:none}.spui-Breadcrumb a:not([aria-current]){color:var(--color-text-accent-primary);font-weight:700}.spui-Breadcrumb a[aria-current]{color:var(--color-text-low-emphasis);font-weight:400}.spui-Breadcrumb a:before{border-radius:4px;content:"";left:0;min-height:56px;position:absolute;top:-50%;width:100%}.spui-Breadcrumb a:hover{text-decoration:underline}.spui-Breadcrumb a:focus{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-Breadcrumb a:focus:not(:focus-visible){outline:none}.spui-Breadcrumb-chevron{color:var(--color-object-low-emphasis);height:16px;padding:0 4px;width:16px}.spui-Breadcrumb-item:last-of-type>.spui-Breadcrumb-chevron{display:none;padding:0}@media screen and (max-width:768px){.spui-Breadcrumb{padding:0 14px}.spui-Breadcrumb-item{min-height:40px}.spui-Breadcrumb a{font-size:.8125em;padding:2px 6px}.spui-Breadcrumb a:not([aria-current]):before{min-height:40px}.spui-Breadcrumb-chevron{height:12px;padding:0 2px;width:12px}}:root{--Button-tapHighlightColor:var(--gray-5-alpha);--Button-onFocus-outlineColor:var(--color-focus-clarity);--Button--contained-backgroundColor:var(--color-surface-accent-primary);--Button--contained-color:var(--color-text-high-emphasis-inverse);--Button--contained-onActive-backgroundColor:var(--primary-green-100);--Button--contained-onHover-backgroundColor:var(--primary-green-100);--Button--outlined-borderColor:var(--color-border-accent-primary);--Button--outlined-color:var(--color-text-accent-primary);--Button--outlined-onActive-backgroundColor:var(--primary-green-5);--Button--outlined-onHover-backgroundColor:var(--primary-green-5);--Button--lighted-backgroundColor:var(--color-surface-accent-primary-light);--Button--lighted-color:var(--color-text-accent-primary);--Button--lighted-onActive-backgroundColor:var(--primary-green-10);--Button--lighted-onHover-backgroundColor:var(--primary-green-10);--Button--neutral-backgroundColor:var(--color-surface-tertiary);--Button--neutral-color:var(--color-text-medium-emphasis);--Button--neutral-onActive-backgroundColor:var(--gray-20-alpha);--Button--neutral-onHover-backgroundColor:var(--gray-20-alpha);--Button--danger-borderColor:var(--color-border-caution);--Button--danger-color:var(--color-text-caution);--Button--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--Button--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-Button{align-items:center;box-sizing:border-box;display:inline-flex;font-family:inherit;font-weight:700;justify-content:center;line-height:1.3;margin:0;-webkit-tap-highlight-color:var(--Button-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-Button:disabled{opacity:.3}.spui-Button:focus{outline:2px solid var(--Button-onFocus-outlineColor);outline-offset:1px}.spui-Button:focus:not(:focus-visible){outline:none}.spui-Button--fullWidth{width:100%}.spui-Button--large{border-radius:3em;font-size:1em;min-height:48px;padding-left:16px;padding-right:16px}.spui-Button--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding-left:16px;padding-right:16px}.spui-Button--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding-left:10px;padding-right:10px}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.spui-Button--large,.spui-Button--medium,.spui-Button--small{height:1px}}.spui-Button--contained{background-color:var(--Button--contained-backgroundColor);border:none;color:var(--Button--contained-color);padding-bottom:8px;padding-top:8px}.spui-Button--contained:active{background-color:var(--Button--contained-onActive-backgroundColor)}@media (hover:hover){.spui-Button--contained:not([disabled]):hover{background-color:var(--Button--contained-onHover-backgroundColor)}}.spui-Button--outlined{background-color:transparent;border:2px solid var(--Button--outlined-borderColor);color:var(--Button--outlined-color);padding-bottom:6px;padding-top:6px}.spui-Button--outlined:active{background-color:var(--Button--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-Button--outlined:not([disabled]):hover{background-color:var(--Button--outlined-onHover-backgroundColor)}}.spui-Button--lighted{background-color:var(--Button--lighted-backgroundColor);border:none;color:var(--Button--lighted-color);padding-bottom:8px;padding-top:8px}.spui-Button--lighted:active{background-color:var(--Button--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-Button--lighted:not([disabled]):hover{background-color:var(--Button--lighted-onHover-backgroundColor)}}.spui-Button--neutral{background-color:var(--Button--neutral-backgroundColor);border:none;color:var(--Button--neutral-color);padding-bottom:8px;padding-top:8px}.spui-Button--neutral:active{background-color:var(--Button--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-Button--neutral:not([disabled]):hover{background-color:var(--Button--neutral-onHover-backgroundColor)}}.spui-Button--danger{background-color:transparent;border:2px solid var(--Button--danger-borderColor);color:var(--Button--danger-color);padding-bottom:6px;padding-top:6px}.spui-Button--danger:active{background-color:var(--Button--danger-onActive-backgroundColor)}@media (hover:hover){.spui-Button--danger:not([disabled]):hover{background-color:var(--Button--danger-onHover-backgroundColor)}}.spui-Button-icon{line-height:0}.spui-Button-icon--large{font-size:1.375em;margin-right:6px}.spui-Button-icon--medium{font-size:1.429em;margin-right:4px}.spui-Button-icon--small{font-size:1.23em;margin-right:2px}.spui-ButtonGroup{display:flex}.spui-ButtonGroup--row{flex-direction:row}.spui-ButtonGroup--column{flex-direction:column}.spui-ButtonGroup--large.spui-ButtonGroup--row>:not(:first-child){margin-left:16px}.spui-ButtonGroup--large.spui-ButtonGroup--column>:not(:first-child){margin-top:16px}.spui-ButtonGroup--medium.spui-ButtonGroup--row>:not(:first-child){margin-left:12px}.spui-ButtonGroup--medium.spui-ButtonGroup--column>:not(:first-child){margin-top:12px}.spui-ButtonGroup--small.spui-ButtonGroup--row>:not(:first-child){margin-left:8px}.spui-ButtonGroup--small.spui-ButtonGroup--column>:not(:first-child){margin-top:12px}.spui-ButtonGroup--large.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:20px}:is(.spui-ButtonGroup--medium,.spui-ButtonGroup--small).spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:14px}.spui-Dialog{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);color:var(--color-text-medium-emphasis);padding:24px;width:352px}@media screen and (max-width:472px){.spui-Dialog{width:calc(100% - 120px)}}.spui-Dialog::backdrop{background:rgba(0,0,0,.8)}.spui-Dialog+.backdrop{background:rgba(0,0,0,.8)}.spui-Dialog[open]:not(.spui-Dialog--closing),.spui-Dialog[open]:not(.spui-Dialog--closing).spui-Dialog::backdrop{animation:spui-Dialog-fade-in .35s cubic-bezier(0,0,0,1)}.spui-Dialog--closing,.spui-Dialog--closing.spui-Dialog::backdrop{animation:spui-Dialog-fade-out .15s cubic-bezier(0,0,0,1)}@media (prefers-reduced-motion:reduce){.spui-Dialog--closing,.spui-Dialog--closing.spui-Dialog::backdrop,.spui-Dialog[open]:not(.spui-Dialog--closing),.spui-Dialog[open]:not(.spui-Dialog--closing).spui-Dialog::backdrop{animation-duration:.01s}}html:has(.spui-Dialog[open]){overflow:hidden}html.spui-Dialog--open{overflow:hidden}.spui-Dialog :is(.spui-Button,.spui-LinkButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-Dialog :is(.spui-Button,.spui-LinkButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-Dialog-title{color:var(--color-text-high-emphasis);font-size:1.25em;font-weight:700;line-height:1.4;margin:0;padding:0;text-align:center}.spui-Dialog-body{color:var(--color-text-medium-emphasis);font-size:.875em;line-height:1.6;margin:16px 0 0;overflow-wrap:break-word;text-align:center}.spui-Dialog-buttonGroup{align-items:center;justify-content:center;margin:32px 0 0;text-align:center}.spui-Dialog-buttonGroup :is(.spui-Button,.spui-SubtleButton){max-width:240px}@media screen and (min-width:768px){.spui-Dialog{padding:36px;width:328px}}@keyframes spui-Dialog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes spui-Dialog-fade-out{0%{opacity:1}to{opacity:0}}.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-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;bottom:-2px;height:22px;left:-2px;position:absolute;right:-2px;top:-2px;width:22px}.spui-Checkbox-input:focus~.spui-Checkbox-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Checkbox-input:focus:not(: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:listitem;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;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{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:listitem;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}.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-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;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%;bottom:-2px;height:24px;left:-2px;position:absolute;right:-2px;top:-2px;width:24px}.spui-Radio-input:focus~.spui-Radio-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Radio-input:focus:not(: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::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{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::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{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;bottom:-2px;left:-2px;position:absolute;right:-2px;top:-2px;z-index:-1}.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-HeroCarouselItem-listItem{list-style:none;padding:0 .44em;width:100%}.spui-HeroCarouselItem-link{border:1px solid var(--color-border-low-emphasis);border-radius:12px;box-sizing:border-box;display:flex;flex-direction:column;height:12em;text-decoration:none;width:17.5em}.spui-HeroCarouselItem-link:focus{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-HeroCarouselItem-link:focus:not(:focus-visible){outline:none}.spui-HeroCarouselItem-imageBlock{align-items:center;border-bottom:1px solid var(--color-border-low-emphasis);border-radius:12px 12px 0 0;display:flex;height:9.5em;justify-content:center;overflow:hidden}.spui-HeroCarouselItem-image{height:100%;object-fit:cover;width:100%}.spui-HeroCarouselItem-titleContainer{align-items:center;box-sizing:border-box;display:flex;height:2.89em;justify-content:center;padding:0 .5em}.spui-HeroCarouselItem-title{color:var(--color-text-high-emphasis);font-size:.9375em;font-weight:700;margin:0;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}@media screen and (min-width:768px){.spui-HeroCarouselItem-listItem{padding:0 .75em}.spui-HeroCarouselItem-link{height:13.8em;width:20em}.spui-HeroCarouselItem-titleContainer{height:3.3em}.spui-HeroCarouselItem-title{font-size:1em}.spui-HeroCarouselItem-imageBlock{height:10.9em}}.spui-HeroCarousel-container{align-items:center;display:flex;height:12.5em;justify-content:center;overflow:hidden}.spui-HeroCarousel-list{display:flex;margin-right:.88em;padding:0 .44em;transition:transform .5s;width:17.5em}.spui-HeroCarousel-controls{align-items:center;border:1px solid var(--color-border-low-emphasis);border-radius:100px;display:flex;height:2.5em;margin:.88em auto 0;width:7.63em}.spui-HeroCarousel-control{align-items:center;background-color:transparent;border:none;display:flex;font-size:1em;height:100%;justify-content:center;padding:0;width:33.33333%}.spui-HeroCarousel-control:hover{opacity:.7}.spui-HeroCarousel-control:focus{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-HeroCarousel-control:focus:not(:focus-visible){outline:none}.spui-HeroCarousel-control--prev{border-radius:100px 0 0 100px;border-right:1px solid var(--color-border-low-emphasis)}.spui-HeroCarousel-control--next{border-left:1px solid var(--color-border-low-emphasis);border-radius:0 100px 100px 0}@media (prefers-reduced-motion:reduce){.spui-HeroCarousel-list{transition:1ms}}@media screen and (min-width:768px){.spui-HeroCarousel-container{height:14.3em}.spui-HeroCarousel-list{margin-right:1.5em;padding:0 .75em;width:20em}.spui-HeroCarousel-controls{height:2.75em;margin-top:1.25em;width:8.38em}}.spui-HeroCarousel-control>svg{color:var(--color-text-low-emphasis);height:1.13em;width:1.13em}@media screen and (min-width:768px){.spui-HeroCarousel-control>svg{height:1.25em;width:1.25em}}:root{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-outlineColor:var(--color-focus-clarity);--IconButton--contained-backgroundColor:var(--color-surface-accent-primary);--IconButton--contained-color:var(--color-object-high-emphasis-inverse);--IconButton--contained-onActive-backgroundColor:var(--primary-green-100);--IconButton--contained-onHover-backgroundColor:var(--primary-green-100);--IconButton--outlined-borderColor:var(--color-border-accent-primary);--IconButton--outlined-color:var(--color-object-accent-primary);--IconButton--outlined-onActive-backgroundColor:var(--primary-green-5);--IconButton--outlined-onHover-backgroundColor:var(--primary-green-5);--IconButton--lighted-backgroundColor:var(--color-surface-accent-primary-light);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--LinkButton-tapHighlightColor:var(--gray-5-alpha);--LinkButton-onFocus-outlineColor:var(--color-focus-clarity);--LinkButton--contained-backgroundColor:var(--color-surface-accent-primary);--LinkButton--contained-color:var(--color-text-high-emphasis-inverse);--LinkButton--contained-onActive-backgroundColor:var(--primary-green-100);--LinkButton--contained-onHover-backgroundColor:var(--primary-green-100);--LinkButton--outlined-borderColor:var(--color-border-accent-primary);--LinkButton--outlined-color:var(--color-text-accent-primary);--LinkButton--outlined-onActive-backgroundColor:var(--primary-green-5);--LinkButton--outlined-onHover-backgroundColor:var(--primary-green-5);--LinkButton--lighted-backgroundColor:var(--color-surface-accent-primary-light);--LinkButton--lighted-color:var(--color-text-accent-primary);--LinkButton--lighted-onActive-backgroundColor:var(--primary-green-10);--LinkButton--lighted-onHover-backgroundColor:var(--primary-green-10);--LinkButton--neutral-backgroundColor:var(--color-surface-tertiary);--LinkButton--neutral-color:var(--color-text-medium-emphasis);--LinkButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--LinkButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--LinkButton--danger-borderColor:var(--color-border-caution);--LinkButton--danger-color:var(--color-text-caution);--LinkButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--LinkButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-LinkButton{align-items:center;box-sizing:border-box;display:inline-flex;font-family:inherit;font-weight:700;justify-content:center;line-height:1.3;-webkit-tap-highlight-color:var(--LinkButton-tapHighlightColor);text-align:center;text-decoration:none;transition:background-color .3s}.spui-LinkButton:focus{outline:2px solid var(--LinkButton-onFocus-outlineColor);outline-offset:1px}.spui-LinkButton:focus:not(:focus-visible){outline:none}.spui-LinkButton--fullWidth{width:100%}.spui-LinkButton--large{border-radius:3em;font-size:1em;min-height:48px;padding-left:16px;padding-right:16px}.spui-LinkButton--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding-left:16px;padding-right:16px}.spui-LinkButton--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding-left:10px;padding-right:10px}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.spui-LinkButton--large,.spui-LinkButton--medium,.spui-LinkButton--small{height:1px}}.spui-LinkButton--contained{background-color:var(--LinkButton--contained-backgroundColor);border:none;color:var(--LinkButton--contained-color);padding-bottom:8px;padding-top:8px}.spui-LinkButton--contained:active{background-color:var(--LinkButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--contained:hover{background-color:var(--LinkButton--contained-onHover-backgroundColor)}}.spui-LinkButton--outlined{background-color:transparent;border:2px solid var(--LinkButton--outlined-borderColor);color:var(--LinkButton--outlined-color);padding-bottom:6px;padding-top:6px}.spui-LinkButton--outlined:active{background-color:var(--LinkButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--outlined:hover{background-color:var(--LinkButton--outlined-onHover-backgroundColor)}}.spui-LinkButton--lighted{background-color:var(--LinkButton--lighted-backgroundColor);border:none;color:var(--LinkButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-LinkButton--lighted:active{background-color:var(--LinkButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--lighted:hover{background-color:var(--LinkButton--lighted-onHover-backgroundColor)}}.spui-LinkButton--neutral{background-color:var(--LinkButton--neutral-backgroundColor);border:none;color:var(--LinkButton--neutral-color);padding-bottom:8px;padding-top:8px}.spui-LinkButton--neutral:active{background-color:var(--LinkButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--neutral:hover{background-color:var(--LinkButton--neutral-onHover-backgroundColor)}}.spui-LinkButton--danger{background-color:transparent;border:2px solid var(--LinkButton--danger-borderColor);color:var(--LinkButton--danger-color);padding-bottom:6px;padding-top:6px}.spui-LinkButton--danger:active{background-color:var(--LinkButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--danger:hover{background-color:var(--LinkButton--danger-onHover-backgroundColor)}}.spui-LinkButton-icon{line-height:0}.spui-LinkButton-icon--large{font-size:1.375em;margin-right:6px}.spui-LinkButton-icon--medium{font-size:1.429em;margin-right:4px}.spui-LinkButton-icon--small{font-size:1.23em;margin-right:2px}:root{--SubtleButton-tapHighlightColor:var(--white-60-alpha);--SubtleButton-onFocus-outlineColor:var(--color-focus-clarity);--SubtleButton-color:var(--color-text-medium-emphasis)}.spui-SubtleButton{background:none;border:none;border-radius:4px;color:var(--SubtleButton-color);font-family:inherit;font-weight:700;line-height:1.3;margin:0;padding:0;-webkit-tap-highlight-color:var(--SubtleButton-tapHighlightColor);text-align:center}.spui-SubtleButton:disabled{opacity:.3}.spui-SubtleButton:focus{outline:2px solid var(--SubtleButton-onFocus-outlineColor);outline-offset:1px}.spui-SubtleButton:focus:not(:focus-visible){outline:none}@media (hover:hover){.spui-SubtleButton:not([disabled]):hover{text-decoration:underline}}.spui-SubtleButton--large,.spui-SubtleButton--medium{font-size:.875em}.spui-SubtleButton--small{font-size:.8125em}:root{--AppealModal-image-border:1px inset var(--color-border-low-emphasis);--AppealModal-image-borderRadius:8px}.spui-AppealModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);padding:0;width:400px}.spui-AppealModal[open]:not(.spui-AppealModal--closing),.spui-AppealModal[open]:not(.spui-AppealModal--closing).spui-AppealModal::backdrop{animation:spui-AppealModal-fade-in .5s cubic-bezier(0,0,0,1)}.spui-AppealModal--closing,.spui-AppealModal--closing.spui-AppealModal::backdrop{animation:spui-AppealModal-fade-out .3s cubic-bezier(0,0,0,1)}@media (prefers-reduced-motion:reduce){.spui-AppealModal--closing,.spui-AppealModal--closing.spui-AppealModal::backdrop,.spui-AppealModal[open]:not(.spui-AppealModal--closing),.spui-AppealModal[open]:not(.spui-AppealModal--closing).spui-AppealModal::backdrop{animation-duration:.01s}}html:has(.spui-AppealModal[open]){overflow:hidden}html.spui-AppealModal--open{overflow:hidden}@media screen and (max-width:440px){.spui-AppealModal{width:calc(100% - 48px)}}.spui-AppealModal::backdrop{background:rgba(0,0,0,.6)}.spui-AppealModal+.backdrop{background:rgba(0,0,0,.6)}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-AppealModal-frame{color:var(--color-text-medium-emphasis);display:grid;gap:0 0;grid-auto-flow:row;grid-template-areas:"Image" "Title" "Body" "ButtonGroup" "CloseButton";grid-template-columns:1fr;grid-template-rows:auto;padding:0 0 24px;width:100%}.spui-AppealModal-image{grid-area:Image}.spui-AppealModal-image img{border-radius:20px 20px 0 0}.spui-AppealModal-title{color:var(--color-text-high-emphasis);font-size:1.125em;font-weight:700;grid-area:Title;line-height:1.4;margin:24px 24px 0;padding:0;text-align:center}.spui-AppealModal-body{color:var(--color-text-medium-emphasis);font-size:.875em;grid-area:Body;line-height:1.6;margin:8px 24px 0;overflow-wrap:break-word;text-align:center}.spui-AppealModal-buttonGroup{align-items:center;grid-area:ButtonGroup;justify-content:center;margin:16px 24px 0;text-align:center}.spui-AppealModal-closeIconButton,.spui-AppealModal-closeTextButton{grid-area:CloseButton}.spui-AppealModal-closeIconButton{display:none}.spui-AppealModal-closeTextButton{margin:20px 24px 0;text-align:center}.spui-AppealModal-buttonGroup :is(.spui-Button,.spui-LinkButton){max-width:240px}@media screen and (min-width:768px){.spui-AppealModal{min-height:300px;min-width:500px}.spui-AppealModal--large{width:1024px}.spui-AppealModal--medium{width:840px}.spui-AppealModal--small{width:480px}.spui-AppealModal-frame{grid-auto-flow:row;grid-template-areas:"Title CloseButton" "Body CloseButton" "Image Image" "ButtonGroup ButtonGroup";grid-template-columns:1fr 72px;grid-template-rows:auto;padding:0 0 36px}.spui-AppealModal-title{margin:32px 16px 0 36px;text-align:left}.spui-AppealModal-body{margin:12px 16px 0 36px;text-align:left}.spui-AppealModal-image{margin:32px 36px 0}.spui-AppealModal-image img{border:var(--AppealModal-image-border);border-radius:var(--AppealModal-image-borderRadius);box-sizing:border-box}.spui-AppealModal-buttonGroup{margin:16px 36px 0}.spui-AppealModal-closeIconButton{--IconButton--neutral-backgroundColor:none;--IconButton--neutral-onHover-backgroundColor:var(--color-surface-tertiary);display:inline-flex;margin:36px 0 0}.spui-AppealModal-closeTextButton{display:none}}@keyframes spui-AppealModal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes spui-AppealModal-fade-out{0%{opacity:1}to{opacity:0}}:root{--TextButton-tapHighlightColor:var(--white-60-alpha);--TextButton-onFocus-outlineColor:var(--color-focus-clarity);--TextButton-color:var(--color-text-accent-primary);--TextButton-icon-color:var(--color-object-accent-primary);--TextButton-fontWeight:bold;--TextButton--subtle-color:var(--color-text-low-emphasis);--TextButton--subtle-icon-color:var(--color-object-low-emphasis)}.spui-TextButton{background:none;border:none;border-radius:4px;color:var(--TextButton-color);font-family:inherit;font-size:1em;font-weight:var(--TextButton-fontWeight);margin:0;padding:0;-webkit-tap-highlight-color:var(--TextButton-tapHighlightColor)}.spui-TextButton:focus{outline:2px solid var(--TextButton-onFocus-outlineColor);outline-offset:1px}.spui-TextButton:focus:not(:focus-visible){outline:none}.spui-TextButton--subtle{color:var(--TextButton--subtle-color)}.spui-TextButton--hasIcon{align-items:center;display:inline-flex}.spui-TextButton-icon{line-height:0}.spui-TextButton--iconstart .spui-TextButton-icon{margin-right:4px}.spui-TextButton--iconend{flex-direction:row-reverse}.spui-TextButton--iconend .spui-TextButton-icon{margin-left:4px}.spui-TextButton{text-decoration:underline}.spui-TextButton--hasIcon,.spui-TextButton--underlinehover{text-decoration:none}@media (hover:hover){.spui-TextButton:hover{text-decoration:none}:is(.spui-TextButton--hasIcon,.spui-TextButton--underlinehover):hover{text-decoration:underline}}:root{--TextLink-tapHighlightColor:var(--white-60-alpha);--TextLink-onFocus-outlineColor:var(--color-focus-clarity);--TextLink-color:var(--color-text-accent-primary);--TextLink-icon-color:var(--color-object-accent-primary);--TextLink-fontWeight:bold;--TextLink--subtle-color:var(--color-text-low-emphasis);--TextLink--subtle-icon-color:var(--color-object-low-emphasis)}.spui-TextLink{border-radius:4px;color:var(--TextLink-color);font-family:inherit;font-weight:var(--TextLink-fontWeight);-webkit-tap-highlight-color:var(--TextLink-tapHighlightColor)}.spui-TextLink:focus{outline:2px solid var(--TextLink-onFocus-outlineColor);outline-offset:1px}.spui-TextLink:focus:not(:focus-visible){outline:none}.spui-TextLink--subtle{color:var(--TextLink--subtle-color)}.spui-TextLink--hasIcon{align-items:center;display:inline-flex}.spui-TextLink-icon{line-height:0}.spui-TextLink--iconstart .spui-TextLink-icon{margin-right:4px}.spui-TextLink--iconend{flex-direction:row-reverse}.spui-TextLink--iconend .spui-TextLink-icon{margin-left:4px}.spui-TextLink{text-decoration:underline}.spui-TextLink--hasIcon,.spui-TextLink--underlinehover{text-decoration:none}@media (hover:hover){.spui-TextLink:hover{text-decoration:none}:is(.spui-TextLink--hasIcon,.spui-TextLink--underlinehover):hover{text-decoration:underline}}:root{--Toast-z-index:1}.spui-Toast{box-sizing:border-box;left:0;padding:0 12px;position:fixed;right:0;text-align:center;z-index:var(--Toast-z-index)}.spui-Toast-content{align-items:center;border-radius:52px;box-shadow:0 11px 28px rgba(8,18,26,.24);box-sizing:border-box;display:inline-flex;margin:0;max-width:360px;min-height:48px;padding:0 16px 0 20px}.spui-Toast-contentInfo{flex-shrink:0;font-size:1.375rem;line-height:0;margin-right:8px}.spui-Toast-contentText{font-family:inherit;font-size:.875rem;font-weight:700;line-height:1.6;overflow:hidden;white-space:nowrap}.spui-Toast--top{top:0;transform:translateY(calc(var(--Toast--initial-height) - var(--Toast--offset-top)))}.spui-Toast--bottom{bottom:0;transform:translateY(calc(var(--Toast--initial-height)-1 - var(--Toast--offset-bottom)-1))}.spui-Toast--slide{opacity:0;transition:transform .3s ease,opacity .3s ease}.spui-Toast--hidden{visibility:hidden}.spui-Toast-slide--in{opacity:1;transition:transform .5s ease,opacity .5s ease}.spui-Toast-slide--in.spui-Toast--top{transform:translateY(var(--Toast--order-offset-top))}.spui-Toast-slide--in.spui-Toast--bottom{transform:translateY(var(--Toast--order-offset-bottom))}.spui-Toast-iconButton{--IconButton--neutral-backgroundColor:transparent;margin-left:12px}.spui-Toast-contentInfo--information{color:var(--color-object-high-emphasis-inverse)}.spui-Toast-content--information{background-color:var(--gray-80);color:var(--color-text-high-emphasis-inverse)}.spui-Toast-iconButton--information{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}.spui-Toast-contentInfo--confirmation{color:var(--color-object-accent-primary)}.spui-Toast-content--confirmation{background-color:var(--color-surface-primary);border:2px solid var(--color-border-low-emphasis);color:var(--color-text-accent-primary)}.spui-Toast-iconButton--confirmation{--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-color:var(--color-object-low-emphasis)}.spui-Toast-contentInfo--error{color:var(--color-object-high-emphasis-inverse)}.spui-Toast-content--error{background-color:var(--color-surface-caution);color:var(--color-text-high-emphasis-inverse)}.spui-Toast-iconButton--error{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}@media (prefers-reduced-motion:reduce){.spui-Toast--slide,.spui-Toast-slide--in{transition-duration:.1ms}}@media (max-width:384px){.spui-Toast-content{max-width:100%}}:root{--SnackBar-z-index:1;--SnackBar-onFocus-outlineColor:var(--color-focus-clarity)}.spui-SnackBar{box-sizing:border-box;left:0;padding:0 var(--SnackBar--offset-right) 0 var(--SnackBar--offset-left);position:fixed;right:0;text-align:var(--SnackBar--text-align);z-index:var(--SnackBar-z-index)}.spui-SnackBar-content{align-items:center;border-radius:16px;box-shadow:0 11px 28px rgba(8,18,26,.24);box-sizing:border-box;display:inline-grid;grid-template:"Icon Text Button IconButton" auto/auto 1fr auto auto;max-width:440px;min-height:52px;min-width:360px;padding:14px 16px 14px 20px}.spui-SnackBar-icon{flex-shrink:0;font-size:1.375rem;grid-area:Icon;line-height:0;margin-right:12px}.spui-SnackBar-text{--SnackBar-max-lines:3;font-family:inherit;font-size:.875rem;font-weight:700;grid-area:Text;line-height:1.6;max-height:calc(1.6emvar(--SnackBar-max-lines));overflow:hidden;text-align:left}.spui-SnackBar-button{font-size:.875rem;grid-area:Button;margin-left:16px;margin-right:13px;position:relative}.spui-SnackBar-button:after{bottom:0;content:"";display:inline-block;position:absolute;right:-12px;top:0;width:1px}.spui-SnackBar--top{top:0;transform:translateY(calc(var(--SnackBar--initial-height-top) - var(--SnackBar--offset-top)))}.spui-SnackBar--bottom{bottom:0;transform:translateY(calc(var(--SnackBar--initial-height-bottom)-1 - var(--SnackBar--offset-bottom)-1))}.spui-SnackBar--slide{opacity:0;transition:transform .3s ease,opacity .3s ease}.spui-SnackBar--hidden{visibility:hidden}.spui-SnackBar-slide--in{opacity:1;transition:transform .5s ease,opacity .5s ease}.spui-SnackBar-slide--in.spui-SnackBar--top{transform:translateY(var(--SnackBar--order-offset-top))}.spui-SnackBar-slide--in.spui-SnackBar--bottom{transform:translateY(var(--SnackBar--order-offset-bottom))}.spui-SnackBar-iconButton{--IconButton--neutral-backgroundColor:transparent;grid-area:IconButton;margin-left:12px}.spui-SnackBar-content--information{background-color:var(--gray-80);color:var(--color-text-high-emphasis-inverse)}.spui-SnackBar-iconButton--information{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--information{--TextLink-color:var(--color-text-high-emphasis-inverse);--TextLink-icon-color:var(--color-object-high-emphasis-inverse);--TextButton-color:var(--color-text-high-emphasis-inverse);--TextButton-icon-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--information:after{background:var(--white-20-alpha)}.spui-SnackBar-content--confirmation{background-color:var(--color-surface-primary);border:2px solid var(--color-border-low-emphasis);color:var(--color-text-accent-primary)}.spui-SnackBar-iconButton--confirmation{--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-color:var(--color-object-low-emphasis)}.spui-SnackBar-button--confirmation{--TextLink-color:var(--color-text-low-emphasis);--TextLink-icon-color:var(--color-object-low-emphasis);--TextButton-color:var(--color-text-low-emphasis);--TextButton-icon-color:var(--color-object-low-emphasis)}.spui-SnackBar-button--confirmation:after{background:var(--color-border-low-emphasis)}.spui-SnackBar-content--error{background-color:var(--color-surface-caution);color:var(--color-text-high-emphasis-inverse)}.spui-SnackBar-iconButton--error{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--error{--TextLink-color:var(--color-text-high-emphasis-inverse);--TextLink-icon-color:var(--color-object-high-emphasis-inverse);--TextButton-color:var(--color-text-high-emphasis-inverse);--TextButton-icon-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--error:after{background:var(--white-20-alpha)}@media (prefers-reduced-motion:reduce){.spui-SnackBar--slide,.spui-SnackBar-slide--in{transition-duration:.1ms}}@media (max-width:464px){.spui-SnackBar{padding:0 12px;text-align:center;bottom:0;top:unset;transform:translateY(calc(var(--SnackBar--initial-height-bottom)-1 - var(--SnackBar--offset-bottom)*-1))}.spui-SnackBar-slide--in.spui-SnackBar--top{transform:translateY(var(--SnackBar--order-offset-bottom))}.spui-SnackBar-content{border-radius:82px;max-width:400px;min-width:calc(100% - 24px);padding:14px 16px 14px 20px}}@media (max-width:320px){.spui-SnackBar-text{--SnackBar-max-lines:4}}:root{--MoreLink-tapHighlightColor:var(--gray-5-alpha);--MoreLink-backGroundColor:var(--color-surface-primary);--MoreLink-color:var(--color-text-accent-primary);--MoreLink-onFocus-outlineColor:var(--color-focus-clarity);--MoreLink-onHover-backgroundColor:var(--color-surface-accent-primary-light);--MoreLink-icon-color:var(--color-object-accent-primary)}.spui-MoreLink{align-items:center;background-color:var(--MoreLink-backGroundColor);box-sizing:border-box;color:var(--MoreLink-color);display:flex;font-family:inherit;font-size:1em;font-weight:700;justify-content:space-between;line-height:1.4;min-height:56px;padding:16px;-webkit-tap-highlight-color:var(--MoreLink-tapHighlightColor);text-decoration:none;transition:background-color .3s}.spui-MoreLink:focus{outline:2px solid var(--MoreLink-onFocus-outlineColor);outline-offset:1px}.spui-MoreLink:focus:not(:focus-visible){outline:none}@media (hover:hover){.spui-MoreLink:hover{background:var(--MoreLink-onHover-backgroundColor)}}.spui-MoreLink-icon{line-height:0;margin-left:12px}.spui-MoreLink-chevron{color:var(--MoreLink-icon-color)}

package/index.d.ts CHANGED Viewed

@@ -9,5 +9,6 @@ import { IconButton } from './IconButton';
 import { LinkButton } from './LinkButton';
 import { TextButton } from './TextButton';
 import { Toast } from './Toast';
-export { BreadcrumbItem, BreadcrumbList, Button, ButtonGroup, Dialog, Form, HeroCarousel, Icon, IconButton, LinkButton, TextButton, Toast, };
+import { SnackBar } from './SnackBar';
+export { BreadcrumbItem, BreadcrumbList, Button, ButtonGroup, Dialog, Form, HeroCarousel, Icon, IconButton, LinkButton, TextButton, Toast, SnackBar, };
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;~~AAGhC~~,OAAO,EACL,cAAc,EACd,cAAc,EACd,MAAM,EACN,WAAW,EACX,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,UAAU,EACV,UAAU,EACV,KAAK,~~GACN~~,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EACL,cAAc,EACd,cAAc,EACd,MAAM,EACN,WAAW,EACX,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,UAAU,EACV,UAAU,EACV,KAAK,EACL,QAAQ,GACT,CAAC"}

package/index.js CHANGED Viewed

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Toast = exports.TextButton = exports.LinkButton = exports.IconButton = exports.Icon = exports.HeroCarousel = exports.Form = exports.Dialog = exports.ButtonGroup = exports.Button = exports.BreadcrumbList = exports.BreadcrumbItem = void 0;
+exports.SnackBar = exports.Toast = exports.TextButton = exports.LinkButton = exports.IconButton = exports.Icon = exports.HeroCarousel = exports.Form = exports.Dialog = exports.ButtonGroup = exports.Button = exports.BreadcrumbList = exports.BreadcrumbItem = void 0;
 var Breadcrumb_1 = require("./Breadcrumb");
 Object.defineProperty(exports, "BreadcrumbItem", { enumerable: true, get: function () { return Breadcrumb_1.BreadcrumbItem; } });
 Object.defineProperty(exports, "BreadcrumbList", { enumerable: true, get: function () { return Breadcrumb_1.BreadcrumbList; } });
@@ -47,4 +47,6 @@ var TextButton_1 = require("./TextButton");
 Object.defineProperty(exports, "TextButton", { enumerable: true, get: function () { return TextButton_1.TextButton; } });
 var Toast_1 = require("./Toast");
 Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return Toast_1.Toast; } });
+var SnackBar_1 = require("./SnackBar");
+Object.defineProperty(exports, "SnackBar", { enumerable: true, get: function () { return SnackBar_1.SnackBar; } });
 //# sourceMappingURL=index.js.map

package/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8D;~~AAc5D~~,+~~FAdO~~,2BAAc,~~OAcP~~;AACd,+~~FAfuB~~,2BAAc,~~OAevB~~;~~AAdhB~~,mCAAkC;~~AAehC~~,~~uFAfO~~,eAAM,~~OAeP~~;~~AAdR~~,6CAA4C;~~AAe1C~~,~~4FAfO~~,yBAAW,~~OAeP~~;~~AAdb~~,mCAAkC;~~AAehC~~,~~uFAfO~~,eAAM,~~OAeP~~;~~AAdR~~,2CAA+B;~~AAe7B~~,oBAAI;~~AAdN~~,2CAA+B;~~AAgB7B~~,oBAAI;~~AAfN~~,+CAA8C;~~AAc5C~~,~~6FAdO~~,2BAAY,~~OAcP~~;~~AAbd~~,2CAA0C;~~AAexC~~,~~2FAfO~~,uBAAU,~~OAeP~~;~~AAdZ~~,2CAA0C;~~AAexC~~,~~2FAfO~~,uBAAU,~~OAeP~~;~~AAdZ~~,2CAA0C;~~AAexC~~,~~2FAfO~~,uBAAU,~~OAeP~~;~~AAdZ~~,iCAAgC;~~AAe9B~~,~~sFAfO~~,aAAK,~~OAeP~~"}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8D;AAe5D,+FAfO,2BAAc,OAeP;AACd,+FAhBuB,2BAAc,OAgBvB;AAfhB,mCAAkC;AAgBhC,uFAhBO,eAAM,OAgBP;AAfR,6CAA4C;AAgB1C,4FAhBO,yBAAW,OAgBP;AAfb,mCAAkC;AAgBhC,uFAhBO,eAAM,OAgBP;AAfR,2CAA+B;AAgB7B,oBAAI;AAfN,2CAA+B;AAiB7B,oBAAI;AAhBN,+CAA8C;AAe5C,6FAfO,2BAAY,OAeP;AAdd,2CAA0C;AAgBxC,2FAhBO,uBAAU,OAgBP;AAfZ,2CAA0C;AAgBxC,2FAhBO,uBAAU,OAgBP;AAfZ,2CAA0C;AAgBxC,2FAhBO,uBAAU,OAgBP;AAfZ,iCAAgC;AAgB9B,sFAhBO,aAAK,OAgBP;AAfP,uCAAsC;AAgBpC,yFAhBO,mBAAQ,OAgBP"}

package/index.mjs CHANGED Viewed

@@ -9,5 +9,6 @@ import { IconButton } from './IconButton';
 import { LinkButton } from './LinkButton';
 import { TextButton } from './TextButton';
 import { Toast } from './Toast';
+import { SnackBar } from './SnackBar';
 // Components are currently exported after "import" for projects using TS lower v3.8 that does not support "export * as".
-export { BreadcrumbItem, BreadcrumbList, Button, ButtonGroup, Dialog, Form, HeroCarousel, Icon, IconButton, LinkButton, TextButton, Toast, };
+export { BreadcrumbItem, BreadcrumbList, Button, ButtonGroup, Dialog, Form, HeroCarousel, Icon, IconButton, LinkButton, TextButton, Toast, SnackBar, };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@openameba/spindle-ui",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "main": "./index.js",
   "module": "./index.mjs",
   "types": "./index.d.ts",
@@ -68,6 +68,7 @@
     "@svgr/cli": "^6.0.0",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.0.0",
     "@types/jest": "^27.0.0",
     "@types/react": "^17.0.1",
@@ -93,5 +94,5 @@
     "ts-jest": "28.0.7",
     "webpack": "^5.73.0"
   },
-  "gitHead": "2023787090dc0115a54712e59c7ee6af9684588d"
+  "gitHead": "ed80f25800697decd5813a457e1cc2c1754db019"
 }