@openameba/spindle-ui 0.38.0 → 0.41.0

package/CHANGELOG.md

@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.41.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.39.0...@openameba/spindle-ui@0.41.0) (2022-07-13)
+
+
+### Bug Fixes
+
+* use peerDependenciesMeta ([e9ebb42](https://github.com/openameba/spindle/commit/e9ebb425945353c0d4da182776803e0e6f7213c2))
+
+
+### Features
+
+* **spindle-ui:** add animation to AppealModal ([e8f12ba](https://github.com/openameba/spindle/commit/e8f12ba2fe713deb62122d6f9006def0cba30686))
+* **spindle-ui:** implement Appeal Modal ([ebbb5cd](https://github.com/openameba/spindle/commit/ebbb5cd1845ae2246edacce56d845d4c2a29948f))
+
+
+
+
+
+# [0.40.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.39.0...@openameba/spindle-ui@0.40.0) (2022-07-11)
+
+
+### Bug Fixes
+
+* use peerDependenciesMeta ([e9ebb42](https://github.com/openameba/spindle/commit/e9ebb425945353c0d4da182776803e0e6f7213c2))
+
+
+
+
+
+# [0.39.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.38.0...@openameba/spindle-ui@0.39.0) (2022-07-08)
+
+
+### Bug Fixes
+
+* **spindle-ui:** import ButtonGroup style from Dialog ([abc69b8](https://github.com/openameba/spindle/commit/abc69b83d1a1b3ac3e4f5555cae942c38896b6db))
+* **spindle-ui:** override focus style in Dialog for Safari ([2317c19](https://github.com/openameba/spindle/commit/2317c19b096729d2ad31f06f33b340bcfaff2b0b))
+
+
+### Features
+
+* **spindle-ui:** add animation to Dialog ([43fdbe1](https://github.com/openameba/spindle/commit/43fdbe11363aa3cef5aca618f78bf914da470cbf))
+
+
+
+
+
+
 # [0.38.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.37.0...@openameba/spindle-ui@0.38.0) (2022-07-06)
 
 
@@ -14,6 +60,17 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+## [0.37.1-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.37.0...@openameba/spindle-ui@0.37.1-alpha.0) (2022-07-01)
+
+
+### Bug Fixes
+
+* **spindle-ui:** import ButtonGroup style from Dialog ([abc69b8](https://github.com/openameba/spindle/commit/abc69b83d1a1b3ac3e4f5555cae942c38896b6db))
+
+
+
+
+
 # [0.37.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.36.2...@openameba/spindle-ui@0.37.0) (2022-06-27)
 
 

package/Dialog/Dialog.css

@@ -1 +1 @@
-.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}html:has(.spui-Dialog[open]){overflow:hidden}html.spui-Dialog--open{overflow:hidden}@media screen and (max-width:472px){.spui-Dialog{width:calc(100% - 120px)}}.spui-Dialog::-webkit-backdrop{background:rgba(0,0,0,.8)}.spui-Dialog::backdrop{background:rgba(0,0,0,.8)}.spui-Dialog+.backdrop{background:rgba(0,0,0,.8)}.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}}
+.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::-webkit-backdrop{background:rgba(0,0,0,.8)}.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::-webkit-backdrop{-webkit-animation:spui-Dialog-fade-in .35s cubic-bezier(0,0,0,1);animation:spui-Dialog-fade-in .35s cubic-bezier(0,0,0,1)}.spui-Dialog[open]:not(.spui-Dialog--closing),.spui-Dialog[open]:not(.spui-Dialog--closing).spui-Dialog::backdrop{-webkit-animation:spui-Dialog-fade-in .35s cubic-bezier(0,0,0,1);animation:spui-Dialog-fade-in .35s cubic-bezier(0,0,0,1)}.spui-Dialog--closing.spui-Dialog::-webkit-backdrop{-webkit-animation:spui-Dialog-fade-out .15s cubic-bezier(0,0,0,1);animation:spui-Dialog-fade-out .15s cubic-bezier(0,0,0,1)}.spui-Dialog--closing,.spui-Dialog--closing.spui-Dialog::backdrop{-webkit-animation:spui-Dialog-fade-out .15s cubic-bezier(0,0,0,1);animation:spui-Dialog-fade-out .15s cubic-bezier(0,0,0,1)}@media (prefers-reduced-motion:reduce){.spui-Dialog--closing.spui-Dialog::-webkit-backdrop,.spui-Dialog[open]:not(.spui-Dialog--closing).spui-Dialog::-webkit-backdrop{-webkit-animation-duration:.01s;animation-duration:.01s}.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{-webkit-animation-duration:.01s;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}}@-webkit-keyframes spui-Dialog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes spui-Dialog-fade-in{0%{opacity:0}to{opacity:1}}@-webkit-keyframes spui-Dialog-fade-out{0%{opacity:1}to{opacity:0}}@keyframes spui-Dialog-fade-out{0%{opacity:1}to{opacity:0}}

package/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAI7D,UAAU,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,UAAU,UAAU;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAiFD,eAAO,MAAM,MAAM;;yCAhCyB,UAAU;8BAQrB,UAAU;6BAQX,UAAU;;;;;CAsBzC,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAIf,UAAU,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,UAAU,UAAU;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAkHD,eAAO,MAAM,MAAM;;yCAhCyB,UAAU;8BAQrB,UAAU;6BAQX,UAAU;;;;;CAsBzC,CAAC"}

package/Dialog/Dialog.js

@@ -49,13 +49,31 @@ var react_1 = __importStar(require("react"));
 var react_merge_refs_1 = __importDefault(require("react-merge-refs"));
 var ButtonGroup_1 = require("../ButtonGroup");
 var BLOCK_NAME = 'spui-Dialog';
+var FADE_OUT_ANIMATION = 'spui-Dialog-fade-out';
 var Frame = react_1.forwardRef(function Dialog(_a, ref) {
     var children = _a.children, className = _a.className, open = _a.open, onClose = _a.onClose, rest = __rest(_a, ["children", "className", "open", "onClose"]);
+    var _b = react_1.useState(false), closing = _b[0], setClosing = _b[1];
     var dialogEl = react_1.useRef(null);
     var handleFormSubmit = function (event) {
+        event.preventDefault(); // To be closed with the open prop
         typeof onClose === 'function' && onClose(event);
     };
+    var handleAnimationEnd = react_1.useCallback(function (event) {
+        if (dialogEl.current &&
+            event.animationName === FADE_OUT_ANIMATION &&
+            !event.pseudoElement // To exclude ::backdrop
+        ) {
+            dialogEl.current.close && dialogEl.current.close();
+            setClosing(false);
+        }
+    }, [dialogEl]);
+    react_1.useEffect(function () {
+        var _a;
+        (_a = dialogEl.current) === null || _a === void 0 ? void 0 : _a.addEventListener('animationend', handleAnimationEnd, false);
+        return function () { var _a; return (_a = dialogEl.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('animationend', handleAnimationEnd, false); };
+    }, [dialogEl]);
     react_1.useEffect(function () {
+        var _a;
         if (!dialogEl.current) {
             return;
         }
@@ -66,14 +84,15 @@ var Frame = react_1.forwardRef(function Dialog(_a, ref) {
             document.documentElement.classList.add(classNameToStopScrollBehindDialog);
         }
         else {
-            dialogEl.current.open &&
-                dialogEl.current.close &&
-                dialogEl.current.close();
+            ((_a = dialogEl.current) === null || _a === void 0 ? void 0 : _a.open) && setClosing(true);
             // Always remove this class to avoid unexpected scroll stopping
             document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
         }
     }, [open, dialogEl]);
-    return (react_1.default.createElement("dialog", __assign({ ref: react_merge_refs_1.default([dialogEl, ref]), className: [BLOCK_NAME, className].filter(Boolean).join(' ').trim() }, rest),
+    return (react_1.default.createElement("dialog", __assign({ ref: react_merge_refs_1.default([dialogEl, ref]), className: [BLOCK_NAME, closing && BLOCK_NAME + "--closing", className]
+            .filter(Boolean)
+            .join(' ')
+            .trim() }, rest),
         react_1.default.createElement("form", { method: "dialog", onSubmit: handleFormSubmit }, children)));
 });
 var StyleOnly = function (_a) {

package/Dialog/Dialog.js.map

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

package/Dialog/Dialog.mjs

@@ -1,12 +1,28 @@
-import React, { forwardRef, useEffect, useRef } from 'react';
+import React, { forwardRef, useCallback, useEffect, useRef, useState, } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { ButtonGroup as Group } from '../ButtonGroup';
 const BLOCK_NAME = 'spui-Dialog';
+const FADE_OUT_ANIMATION = 'spui-Dialog-fade-out';
 const Frame = forwardRef(function Dialog({ children, className, open, onClose, ...rest }, ref) {
+    const [closing, setClosing] = useState(false);
     const dialogEl = useRef(null);
     const handleFormSubmit = (event) => {
+        event.preventDefault(); // To be closed with the open prop
         typeof onClose === 'function' && onClose(event);
     };
+    const handleAnimationEnd = useCallback((event) => {
+        if (dialogEl.current &&
+            event.animationName === FADE_OUT_ANIMATION &&
+            !event.pseudoElement // To exclude ::backdrop
+        ) {
+            dialogEl.current.close && dialogEl.current.close();
+            setClosing(false);
+        }
+    }, [dialogEl]);
+    useEffect(() => {
+        dialogEl.current?.addEventListener('animationend', handleAnimationEnd, false);
+        return () => dialogEl.current?.removeEventListener('animationend', handleAnimationEnd, false);
+    }, [dialogEl]);
     useEffect(() => {
         if (!dialogEl.current) {
             return;
@@ -18,14 +34,15 @@ const Frame = forwardRef(function Dialog({ children, className, open, onClose, .
             document.documentElement.classList.add(classNameToStopScrollBehindDialog);
         }
         else {
-            dialogEl.current.open &&
-                dialogEl.current.close &&
-                dialogEl.current.close();
+            dialogEl.current?.open && setClosing(true);
             // Always remove this class to avoid unexpected scroll stopping
             document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
         }
     }, [open, dialogEl]);
-    return (React.createElement("dialog", Object.assign({ ref: mergeRefs([dialogEl, ref]), className: [BLOCK_NAME, className].filter(Boolean).join(' ').trim() }, rest),
+    return (React.createElement("dialog", Object.assign({ ref: mergeRefs([dialogEl, ref]), className: [BLOCK_NAME, closing && `${BLOCK_NAME}--closing`, className]
+            .filter(Boolean)
+            .join(' ')
+            .trim() }, rest),
         React.createElement("form", { method: "dialog", onSubmit: handleFormSubmit }, children)));
 });
 const StyleOnly = ({ className, children }) => {

package/Modal/AppealModal.css

@@ -0,0 +1 @@
+: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::-webkit-backdrop{-webkit-animation:spui-AppealModal-fade-in .5s cubic-bezier(0,0,0,1);animation:spui-AppealModal-fade-in .5s cubic-bezier(0,0,0,1)}.spui-AppealModal[open]:not(.spui-AppealModal--closing),.spui-AppealModal[open]:not(.spui-AppealModal--closing).spui-AppealModal::backdrop{-webkit-animation:spui-AppealModal-fade-in .5s cubic-bezier(0,0,0,1);animation:spui-AppealModal-fade-in .5s cubic-bezier(0,0,0,1)}.spui-AppealModal--closing.spui-AppealModal::-webkit-backdrop{-webkit-animation:spui-AppealModal-fade-out .3s cubic-bezier(0,0,0,1);animation:spui-AppealModal-fade-out .3s cubic-bezier(0,0,0,1)}.spui-AppealModal--closing,.spui-AppealModal--closing.spui-AppealModal::backdrop{-webkit-animation:spui-AppealModal-fade-out .3s cubic-bezier(0,0,0,1);animation:spui-AppealModal-fade-out .3s cubic-bezier(0,0,0,1)}@media (prefers-reduced-motion:reduce){.spui-AppealModal--closing.spui-AppealModal::-webkit-backdrop,.spui-AppealModal[open]:not(.spui-AppealModal--closing).spui-AppealModal::-webkit-backdrop{-webkit-animation-duration:.01s;animation-duration:.01s}.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{-webkit-animation-duration:.01s;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::-webkit-backdrop{background:rgba(0,0,0,.6)}.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}}@-webkit-keyframes spui-AppealModal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes spui-AppealModal-fade-in{0%{opacity:0}to{opacity:1}}@-webkit-keyframes spui-AppealModal-fade-out{0%{opacity:1}to{opacity:0}}@keyframes spui-AppealModal-fade-out{0%{opacity:1}to{opacity:0}}

package/Modal/AppealModal.d.ts

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

package/Modal/AppealModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppealModal.d.ts","sourceRoot":"","sources":["../../src/Modal/AppealModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAOf,aAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC,UAAU,gBAAiB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAiLD,eAAO,MAAM,WAAW;;;;;mCArCc,MAAM,cAAc,CAAC,GAAG,CAAC;mCAQzB,MAAM,cAAc,CAAC,KAAK,CAAC;kCAQ5B,MAAM,cAAc,CAAC,GAAG,CAAC;;;;;CA4B7D,CAAC"}

package/Modal/AppealModal.js

@@ -0,0 +1,156 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppealModal = void 0;
+var react_1 = __importStar(require("react"));
+var react_merge_refs_1 = __importDefault(require("react-merge-refs"));
+var ButtonGroup_1 = require("../ButtonGroup");
+var Icon_1 = require("../Icon");
+var IconButton_1 = require("../IconButton");
+var SubtleButton_1 = require("../SubtleButton");
+var BLOCK_NAME = 'spui-AppealModal';
+var FADE_OUT_ANIMATION = 'spui-AppealModal-fade-out';
+var Frame = react_1.forwardRef(function AppealModal(_a, ref) {
+    var children = _a.children, className = _a.className, open = _a.open, _b = _a.size, size = _b === void 0 ? 'large' : _b, onClose = _a.onClose, rest = __rest(_a, ["children", "className", "open", "size", "onClose"]);
+    var _c = react_1.useState(false), closing = _c[0], setClosing = _c[1];
+    var dialogEl = react_1.useRef(null);
+    var handleFormSubmit = function (event) {
+        event.preventDefault(); // To be closed with the open prop
+        onClose && onClose(event);
+    };
+    var handleDialogClick = function (event) {
+        // Detect backdrop click
+        if (event.target === dialogEl.current) {
+            onClose && onClose(event);
+        }
+    };
+    var handleAnimationEnd = react_1.useCallback(function (event) {
+        if (dialogEl.current &&
+            event.animationName === FADE_OUT_ANIMATION &&
+            !event.pseudoElement // To exclude ::backdrop
+        ) {
+            dialogEl.current.close && dialogEl.current.close();
+            setClosing(false);
+        }
+    }, [dialogEl]);
+    react_1.useEffect(function () {
+        var _a;
+        (_a = dialogEl.current) === null || _a === void 0 ? void 0 : _a.addEventListener('animationend', handleAnimationEnd, false);
+        return function () { var _a; return (_a = dialogEl.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('animationend', handleAnimationEnd, false); };
+    }, [dialogEl]);
+    react_1.useEffect(function () {
+        var _a;
+        if (!dialogEl.current) {
+            return;
+        }
+        // Remove this when browsers support :has() pseudo-class
+        var classNameToStopScrollBehindDialog = BLOCK_NAME + "--open";
+        if (open) {
+            dialogEl.current.showModal && dialogEl.current.showModal();
+            document.documentElement.classList.add(classNameToStopScrollBehindDialog);
+        }
+        else {
+            ((_a = dialogEl.current) === null || _a === void 0 ? void 0 : _a.open) && setClosing(true);
+            // Always remove this class to avoid unexpected scroll stopping
+            document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
+        }
+    }, [open, dialogEl]);
+    return (react_1.default.createElement("dialog", __assign({ className: [
+            BLOCK_NAME,
+            BLOCK_NAME + "--" + size,
+            closing && BLOCK_NAME + "--closing",
+            className,
+        ]
+            .filter(Boolean)
+            .join(' ')
+            .trim(), ref: react_merge_refs_1.default([dialogEl, ref]), onClick: handleDialogClick }, rest),
+        react_1.default.createElement("form", { className: BLOCK_NAME + "-frame", method: "dialog", onSubmit: handleFormSubmit },
+            react_1.default.createElement("div", { className: BLOCK_NAME + "-closeIconButton" },
+                react_1.default.createElement(IconButton_1.IconButton, { "aria-label": "\u3068\u3058\u308B", variant: "neutral" },
+                    react_1.default.createElement(Icon_1.CrossBold, { "aria-hidden": "true" }))),
+            children,
+            react_1.default.createElement("div", { className: BLOCK_NAME + "-closeTextButton" },
+                react_1.default.createElement(SubtleButton_1.SubtleButton, null, "\u3068\u3058\u308B")))));
+});
+var StyleOnly = function (_a) {
+    var className = _a.className, children = _a.children, _b = _a.size, size = _b === void 0 ? 'large' : _b, rest = __rest(_a, ["className", "children", "size"]);
+    return (react_1.default.createElement("div", __assign({ className: [BLOCK_NAME, BLOCK_NAME + "--" + size, className]
+            .filter(Boolean)
+            .join(' ')
+            .trim() }, rest),
+        react_1.default.createElement("div", { className: BLOCK_NAME + "-frame" },
+            react_1.default.createElement("div", { className: BLOCK_NAME + "-closeIconButton" },
+                react_1.default.createElement(IconButton_1.IconButton, { "aria-label": "\u9589\u3058\u308B", variant: "neutral" },
+                    react_1.default.createElement(Icon_1.CrossBold, { "aria-hidden": "true" }))),
+            children,
+            react_1.default.createElement("div", { className: BLOCK_NAME + "-closeTextButton" },
+                react_1.default.createElement(SubtleButton_1.SubtleButton, null, "\u9589\u3058\u308B")))));
+};
+var Title = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (react_1.default.createElement("p", __assign({ className: BLOCK_NAME + "-title" }, rest), children));
+};
+var Image = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (react_1.default.createElement("div", __assign({ className: BLOCK_NAME + "-image" }, rest), children));
+};
+var Body = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (react_1.default.createElement("p", __assign({ className: BLOCK_NAME + "-body" }, rest), children));
+};
+var ButtonGroup = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (react_1.default.createElement(ButtonGroup_1.ButtonGroup, __assign({ className: BLOCK_NAME + "-buttonGroup", size: "medium", direction: "column" }, rest), children));
+};
+exports.AppealModal = {
+    Frame: Frame,
+    StyleOnly: StyleOnly,
+    Title: Title,
+    Image: Image,
+    Body: Body,
+    ButtonGroup: ButtonGroup,
+};
+//# sourceMappingURL=AppealModal.js.map

package/Modal/AppealModal.js.map

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

package/Modal/AppealModal.mjs

@@ -0,0 +1,100 @@
+import React, { forwardRef, useCallback, useEffect, useRef, useState, } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { ButtonGroup as Group } from '../ButtonGroup';
+import { CrossBold } from '../Icon';
+import { IconButton } from '../IconButton';
+import { SubtleButton } from '../SubtleButton';
+const BLOCK_NAME = 'spui-AppealModal';
+const FADE_OUT_ANIMATION = 'spui-AppealModal-fade-out';
+const Frame = forwardRef(function AppealModal({ children, className, open, size = 'large', onClose, ...rest }, ref) {
+    const [closing, setClosing] = useState(false);
+    const dialogEl = useRef(null);
+    const handleFormSubmit = (event) => {
+        event.preventDefault(); // To be closed with the open prop
+        onClose && onClose(event);
+    };
+    const handleDialogClick = (event) => {
+        // Detect backdrop click
+        if (event.target === dialogEl.current) {
+            onClose && onClose(event);
+        }
+    };
+    const handleAnimationEnd = useCallback((event) => {
+        if (dialogEl.current &&
+            event.animationName === FADE_OUT_ANIMATION &&
+            !event.pseudoElement // To exclude ::backdrop
+        ) {
+            dialogEl.current.close && dialogEl.current.close();
+            setClosing(false);
+        }
+    }, [dialogEl]);
+    useEffect(() => {
+        dialogEl.current?.addEventListener('animationend', handleAnimationEnd, false);
+        return () => dialogEl.current?.removeEventListener('animationend', handleAnimationEnd, false);
+    }, [dialogEl]);
+    useEffect(() => {
+        if (!dialogEl.current) {
+            return;
+        }
+        // Remove this when browsers support :has() pseudo-class
+        const classNameToStopScrollBehindDialog = `${BLOCK_NAME}--open`;
+        if (open) {
+            dialogEl.current.showModal && dialogEl.current.showModal();
+            document.documentElement.classList.add(classNameToStopScrollBehindDialog);
+        }
+        else {
+            dialogEl.current?.open && setClosing(true);
+            // Always remove this class to avoid unexpected scroll stopping
+            document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
+        }
+    }, [open, dialogEl]);
+    return (React.createElement("dialog", Object.assign({ className: [
+            BLOCK_NAME,
+            `${BLOCK_NAME}--${size}`,
+            closing && `${BLOCK_NAME}--closing`,
+            className,
+        ]
+            .filter(Boolean)
+            .join(' ')
+            .trim(), ref: mergeRefs([dialogEl, ref]), onClick: handleDialogClick }, rest),
+        React.createElement("form", { className: `${BLOCK_NAME}-frame`, method: "dialog", onSubmit: handleFormSubmit },
+            React.createElement("div", { className: `${BLOCK_NAME}-closeIconButton` },
+                React.createElement(IconButton, { "aria-label": "\u3068\u3058\u308B", variant: "neutral" },
+                    React.createElement(CrossBold, { "aria-hidden": "true" }))),
+            children,
+            React.createElement("div", { className: `${BLOCK_NAME}-closeTextButton` },
+                React.createElement(SubtleButton, null, "\u3068\u3058\u308B")))));
+});
+const StyleOnly = ({ className, children, size = 'large', ...rest }) => {
+    return (React.createElement("div", Object.assign({ className: [BLOCK_NAME, `${BLOCK_NAME}--${size}`, className]
+            .filter(Boolean)
+            .join(' ')
+            .trim() }, rest),
+        React.createElement("div", { className: `${BLOCK_NAME}-frame` },
+            React.createElement("div", { className: `${BLOCK_NAME}-closeIconButton` },
+                React.createElement(IconButton, { "aria-label": "\u9589\u3058\u308B", variant: "neutral" },
+                    React.createElement(CrossBold, { "aria-hidden": "true" }))),
+            children,
+            React.createElement("div", { className: `${BLOCK_NAME}-closeTextButton` },
+                React.createElement(SubtleButton, null, "\u9589\u3058\u308B")))));
+};
+const Title = ({ children, ...rest }) => {
+    return (React.createElement("p", Object.assign({ className: `${BLOCK_NAME}-title` }, rest), children));
+};
+const Image = ({ children, ...rest }) => {
+    return (React.createElement("div", Object.assign({ className: `${BLOCK_NAME}-image` }, rest), children));
+};
+const Body = ({ children, ...rest }) => {
+    return (React.createElement("p", Object.assign({ className: `${BLOCK_NAME}-body` }, rest), children));
+};
+const ButtonGroup = ({ children, ...rest }) => {
+    return (React.createElement(Group, Object.assign({ className: `${BLOCK_NAME}-buttonGroup`, size: "medium", direction: "column" }, rest), children));
+};
+export const AppealModal = {
+    Frame,
+    StyleOnly,
+    Title,
+    Image,
+    Body,
+    ButtonGroup,
+};

package/Modal/index.css

@@ -0,0 +1 @@
+: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}}

package/index.css

@@ -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}html:has(.spui-Dialog[open]){overflow:hidden}html.spui-Dialog--open{overflow:hidden}@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-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}}.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{--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)}
+: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{--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{--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{--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)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openameba/spindle-ui",
-  "version": "0.38.0",
+  "version": "0.41.0",
   "main": "./index.js",
   "module": "./index.mjs",
   "types": "./index.d.ts",
@@ -45,6 +45,11 @@
     "@types/react": "^16.8.6 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "ameba-color-palette.css": "^4.8.0",
     "react-merge-refs": "^1.1.0"
@@ -61,6 +66,7 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.0.0",
     "@types/jest": "^27.0.0",
+    "@types/react": "^17.0.1",
     "autoprefixer": "^9.8.5",
     "babel-loader": "^8.1.0",
     "bundlesize": "^0.18.0",
@@ -81,5 +87,5 @@
     "stylelint-selector-bem-pattern": "^2.1.0",
     "ts-jest": "^27.0.0"
   },
-  "gitHead": "ce29b053a69f21382d64943082814c031cad07b8"
+  "gitHead": "225420d5ef116ba2d899571f65a4c3d9c48b7264"
 }