@openameba/spindle-ui 0.33.0 → 0.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Breadcrumb/Breadcrumb.css +1 -1
- package/Button/Button.css +1 -1
- package/ButtonGroup/ButtonGroup.css +1 -1
- package/CHANGELOG.md +48 -0
- package/Dialog/Dialog.css +1 -0
- package/Dialog/Dialog.d.ts +28 -0
- package/Dialog/Dialog.d.ts.map +1 -0
- package/Dialog/Dialog.js +102 -0
- package/Dialog/Dialog.js.map +1 -0
- package/Dialog/Dialog.mjs +49 -0
- package/Dialog/DialogExample.d.ts +8 -0
- package/Dialog/DialogExample.d.ts.map +1 -0
- package/Dialog/DialogExample.js +90 -0
- package/Dialog/DialogExample.js.map +1 -0
- package/Dialog/DialogExample.mjs +59 -0
- package/Dialog/index.d.ts +2 -0
- package/Dialog/index.d.ts.map +1 -0
- package/Dialog/index.js +6 -0
- package/Dialog/index.js.map +1 -0
- package/Dialog/index.mjs +1 -0
- package/HeroCarousel/HeroCarousel.css +1 -1
- package/HeroCarousel/HeroCarouselItem.css +1 -1
- package/IconButton/IconButton.css +1 -1
- package/LinkButton/LinkButton.css +1 -1
- package/SubtleButton/SubtleButton.css +1 -0
- package/SubtleButton/SubtleButton.d.ts +9 -0
- package/SubtleButton/SubtleButton.d.ts.map +1 -0
- package/SubtleButton/SubtleButton.js +51 -0
- package/SubtleButton/SubtleButton.js.map +1 -0
- package/SubtleButton/SubtleButton.mjs +5 -0
- package/SubtleButton/index.d.ts +2 -0
- package/SubtleButton/index.d.ts.map +1 -0
- package/SubtleButton/index.js +6 -0
- package/SubtleButton/index.js.map +1 -0
- package/SubtleButton/index.mjs +1 -0
- package/TextLink/TextLink.css +1 -0
- package/TextLink/TextLink.d.ts +12 -0
- package/TextLink/TextLink.d.ts.map +1 -0
- package/TextLink/TextLink.js +61 -0
- package/TextLink/TextLink.js.map +1 -0
- package/TextLink/TextLink.mjs +15 -0
- package/index.css +1 -1
- package/index.d.ts +2 -1
- package/index.d.ts.map +1 -1
- package/index.js +3 -1
- package/index.js.map +1 -1
- package/index.mjs +2 -1
- package/package.json +3 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
.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{
|
|
1
|
+
.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}}
|
package/Button/Button.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--Button-tapHighlightColor:var(--gray-5-alpha);--Button-onFocus-
|
|
1
|
+
: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}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.spui-ButtonGroup{display:flex}.spui-ButtonGroup--row{flex-direction:row}.spui-ButtonGroup--column{flex-direction:column}.spui-ButtonGroup--large.spui-ButtonGroup--row
|
|
1
|
+
.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}
|
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,54 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [0.36.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.35.0...@openameba/spindle-ui@0.36.0) (2022-06-14)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **spindle-ui:** avoid unexpected scroll stopping ([96f5808](https://github.com/openameba/spindle/commit/96f580846f9f48ed2e4f062acc480daf24783bdc))
|
|
12
|
+
* **spindle-ui:** set correct width on large screen ([be17174](https://github.com/openameba/spindle/commit/be171747654de9120f70528e002d3fe9a3777352))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* **spindle-ui:** implement exmerimental Dialog ([cd7fb94](https://github.com/openameba/spindle/commit/cd7fb94547f17a208c9b3249208555d7dacb772f))
|
|
18
|
+
* **spindle-ui:** stop scroll behind dialog ([0786e15](https://github.com/openameba/spindle/commit/0786e1575c4f5e9566e156a11d143962e364cd9c))
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
# [0.35.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.34.0...@openameba/spindle-ui@0.35.0) (2022-06-14)
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
### Bug Fixes
|
|
28
|
+
|
|
29
|
+
* **spindle-ui:** change ButtonGroup margin for SubtleButton ([bddde1a](https://github.com/openameba/spindle/commit/bddde1a119663f5552f2e963a9c2eaba8a90a84b))
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
### Features
|
|
33
|
+
|
|
34
|
+
* **spindle-ui:** add option to disable underline to TextLink ([7f6ded4](https://github.com/openameba/spindle/commit/7f6ded4251c2e411ca44056ed085f90ffd74c077))
|
|
35
|
+
* **spindle-ui:** create TextLink ([a14b93d](https://github.com/openameba/spindle/commit/a14b93d969169527269b31424e59e9f36468df6c))
|
|
36
|
+
* **spindle-ui:** underline management for TextLink ([9f3d305](https://github.com/openameba/spindle/commit/9f3d3050737c9b9609898143f9c64d319c3775df))
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
# [0.34.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.33.0...@openameba/spindle-ui@0.34.0) (2022-05-30)
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
### Features
|
|
46
|
+
|
|
47
|
+
* **spindle-ui:** add ButtonGropu margin for SubtleButton ([896c6e5](https://github.com/openameba/spindle/commit/896c6e5d8a52e0120d467f18421b9ba4b0502262))
|
|
48
|
+
* **spindle-ui:** create SubtleButton ([df85af6](https://github.com/openameba/spindle/commit/df85af6ec1d02a64ab6bbbc2e7f5edcb656d3526))
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
6
54
|
# [0.33.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.32.0...@openameba/spindle-ui@0.33.0) (2022-05-27)
|
|
7
55
|
|
|
8
56
|
|
|
@@ -0,0 +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}}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface DialogProps extends React.DialogHTMLAttributes<HTMLElement> {
|
|
3
|
+
children?: React.ReactNode;
|
|
4
|
+
onCancel?: (event: React.BaseSyntheticEvent) => void;
|
|
5
|
+
onClose?: (event: React.BaseSyntheticEvent) => void;
|
|
6
|
+
}
|
|
7
|
+
export interface DialogHTMLElement extends HTMLElement {
|
|
8
|
+
close?: () => void;
|
|
9
|
+
showModal?: (returnValue?: string) => void;
|
|
10
|
+
open?: boolean;
|
|
11
|
+
}
|
|
12
|
+
interface PartsProps {
|
|
13
|
+
children?: React.ReactNode;
|
|
14
|
+
className?: string;
|
|
15
|
+
id?: string;
|
|
16
|
+
}
|
|
17
|
+
export declare const Dialog: {
|
|
18
|
+
Frame: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<DialogHTMLElement>>;
|
|
19
|
+
StyleOnly: ({ className, children }: PartsProps) => JSX.Element;
|
|
20
|
+
Title: ({ children, id }: PartsProps) => JSX.Element;
|
|
21
|
+
Body: ({ children, id }: PartsProps) => JSX.Element;
|
|
22
|
+
ButtonGroup: React.FC<{
|
|
23
|
+
direction?: "column" | "row" | undefined;
|
|
24
|
+
size?: "small" | "medium" | "large" | undefined;
|
|
25
|
+
} & React.HTMLAttributes<HTMLDivElement>>;
|
|
26
|
+
};
|
|
27
|
+
export {};
|
|
28
|
+
//# sourceMappingURL=Dialog.d.ts.map
|
|
@@ -0,0 +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"}
|
package/Dialog/Dialog.js
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
16
|
+
}) : (function(o, m, k, k2) {
|
|
17
|
+
if (k2 === undefined) k2 = k;
|
|
18
|
+
o[k2] = m[k];
|
|
19
|
+
}));
|
|
20
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
21
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
22
|
+
}) : function(o, v) {
|
|
23
|
+
o["default"] = v;
|
|
24
|
+
});
|
|
25
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
26
|
+
if (mod && mod.__esModule) return mod;
|
|
27
|
+
var result = {};
|
|
28
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
29
|
+
__setModuleDefault(result, mod);
|
|
30
|
+
return result;
|
|
31
|
+
};
|
|
32
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
33
|
+
var t = {};
|
|
34
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
35
|
+
t[p] = s[p];
|
|
36
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
37
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
38
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
39
|
+
t[p[i]] = s[p[i]];
|
|
40
|
+
}
|
|
41
|
+
return t;
|
|
42
|
+
};
|
|
43
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
44
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
45
|
+
};
|
|
46
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
47
|
+
exports.Dialog = void 0;
|
|
48
|
+
var react_1 = __importStar(require("react"));
|
|
49
|
+
var react_merge_refs_1 = __importDefault(require("react-merge-refs"));
|
|
50
|
+
var ButtonGroup_1 = require("../ButtonGroup");
|
|
51
|
+
var BLOCK_NAME = 'spui-Dialog';
|
|
52
|
+
var Frame = react_1.forwardRef(function Dialog(_a, ref) {
|
|
53
|
+
var children = _a.children, className = _a.className, open = _a.open, onClose = _a.onClose, rest = __rest(_a, ["children", "className", "open", "onClose"]);
|
|
54
|
+
var dialogEl = react_1.useRef(null);
|
|
55
|
+
var handleFormSubmit = function (event) {
|
|
56
|
+
typeof onClose === 'function' && onClose(event);
|
|
57
|
+
};
|
|
58
|
+
react_1.useEffect(function () {
|
|
59
|
+
if (!dialogEl.current) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
// Remove this when browsers support :has() pseudo-class
|
|
63
|
+
var classNameToStopScrollBehindDialog = BLOCK_NAME + "--open";
|
|
64
|
+
if (open) {
|
|
65
|
+
dialogEl.current.showModal && dialogEl.current.showModal();
|
|
66
|
+
document.documentElement.classList.add(classNameToStopScrollBehindDialog);
|
|
67
|
+
}
|
|
68
|
+
else {
|
|
69
|
+
dialogEl.current.open &&
|
|
70
|
+
dialogEl.current.close &&
|
|
71
|
+
dialogEl.current.close();
|
|
72
|
+
// Always remove this class to avoid unexpected scroll stopping
|
|
73
|
+
document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
|
|
74
|
+
}
|
|
75
|
+
}, [open, dialogEl]);
|
|
76
|
+
return (react_1.default.createElement("dialog", __assign({ ref: react_merge_refs_1.default([dialogEl, ref]), className: [BLOCK_NAME, className].filter(Boolean).join(' ').trim() }, rest),
|
|
77
|
+
react_1.default.createElement("form", { method: "dialog", onSubmit: handleFormSubmit }, children)));
|
|
78
|
+
});
|
|
79
|
+
var StyleOnly = function (_a) {
|
|
80
|
+
var className = _a.className, children = _a.children;
|
|
81
|
+
return (react_1.default.createElement("div", { className: [BLOCK_NAME, className].filter(Boolean).join(' ').trim() }, children));
|
|
82
|
+
};
|
|
83
|
+
var Title = function (_a) {
|
|
84
|
+
var children = _a.children, id = _a.id;
|
|
85
|
+
return (react_1.default.createElement("p", __assign({ className: BLOCK_NAME + "-title" }, (id ? { id: id } : {})), children));
|
|
86
|
+
};
|
|
87
|
+
var Body = function (_a) {
|
|
88
|
+
var children = _a.children, id = _a.id;
|
|
89
|
+
return (react_1.default.createElement("p", __assign({ className: BLOCK_NAME + "-body" }, (id ? { id: id } : {})), children));
|
|
90
|
+
};
|
|
91
|
+
var ButtonGroup = function (_a) {
|
|
92
|
+
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
93
|
+
return (react_1.default.createElement(ButtonGroup_1.ButtonGroup, __assign({ className: BLOCK_NAME + "-buttonGroup", size: "medium" }, rest), children));
|
|
94
|
+
};
|
|
95
|
+
exports.Dialog = {
|
|
96
|
+
Frame: Frame,
|
|
97
|
+
StyleOnly: StyleOnly,
|
|
98
|
+
Title: Title,
|
|
99
|
+
Body: Body,
|
|
100
|
+
ButtonGroup: ButtonGroup,
|
|
101
|
+
};
|
|
102
|
+
//# sourceMappingURL=Dialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA6D;AAC7D,sEAAyC;AACzC,8CAAsD;AAoBtD,IAAM,UAAU,GAAG,aAAa,CAAC;AAEjC,IAAM,KAAK,GAAG,kBAAU,CAAiC,SAAS,MAAM,CACtE,EAA+C,EAC/C,GAAG;IADD,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA,EAAE,OAAO,aAAA,EAAK,IAAI,cAA7C,4CAA+C,CAAF;IAG7C,IAAM,QAAQ,GAAG,cAAM,CAAoB,IAAI,CAAC,CAAC;IAEjD,IAAM,gBAAgB,GAAG,UAAC,KAAuC;QAC/D,OAAO,OAAO,KAAK,UAAU,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC,CAAC;IAEF,iBAAS,CAAC;QACR,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YACrB,OAAO;SACR;QAED,wDAAwD;QACxD,IAAM,iCAAiC,GAAM,UAAU,WAAQ,CAAC;QAEhE,IAAI,IAAI,EAAE;YACR,QAAQ,CAAC,OAAO,CAAC,SAAS,IAAI,QAAQ,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;YAC3D,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,iCAAiC,CAAC,CAAC;SAC3E;aAAM;YACL,QAAQ,CAAC,OAAO,CAAC,IAAI;gBACnB,QAAQ,CAAC,OAAO,CAAC,KAAK;gBACtB,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC3B,+DAA+D;YAC/D,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,MAAM,CACvC,iCAAiC,CAClC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,mDACE,GAAG,EAAE,0BAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,EAC/B,SAAS,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,IAC/D,IAAI;QAER,wCAAM,MAAM,EAAC,QAAQ,EAAC,QAAQ,EAAE,gBAAgB,IAC7C,QAAQ,CACJ,CACA,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,IAAM,SAAS,GAAG,UAAC,EAAmC;QAAjC,SAAS,eAAA,EAAE,QAAQ,cAAA;IACtC,OAAO,CACL,uCAAK,SAAS,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,IACrE,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,KAAK,GAAG,UAAC,EAA4B;QAA1B,QAAQ,cAAA,EAAE,EAAE,QAAA;IAC3B,OAAO,CACL,8CAAG,SAAS,EAAK,UAAU,WAAQ,IAAM,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,IAAA,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACxD,QAAQ,CACP,CACL,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,IAAI,GAAG,UAAC,EAA4B;QAA1B,QAAQ,cAAA,EAAE,EAAE,QAAA;IAC1B,OAAO,CACL,8CAAG,SAAS,EAAK,UAAU,UAAO,IAAM,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,IAAA,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACvD,QAAQ,CACP,CACL,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,WAAW,GAAiB,UAAC,EAAqB;IAAnB,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAnB,YAAqB,CAAF;IACpD,OAAO,CACL,8BAAC,yBAAK,aAAC,SAAS,EAAK,UAAU,iBAAc,EAAE,IAAI,EAAC,QAAQ,IAAK,IAAI,GAClE,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CAAC;AAEW,QAAA,MAAM,GAAG;IACpB,KAAK,OAAA;IACL,SAAS,WAAA;IACT,KAAK,OAAA;IACL,IAAI,MAAA;IACJ,WAAW,aAAA;CACZ,CAAC"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import React, { forwardRef, useEffect, useRef } from 'react';
|
|
2
|
+
import mergeRefs from 'react-merge-refs';
|
|
3
|
+
import { ButtonGroup as Group } from '../ButtonGroup';
|
|
4
|
+
const BLOCK_NAME = 'spui-Dialog';
|
|
5
|
+
const Frame = forwardRef(function Dialog({ children, className, open, onClose, ...rest }, ref) {
|
|
6
|
+
const dialogEl = useRef(null);
|
|
7
|
+
const handleFormSubmit = (event) => {
|
|
8
|
+
typeof onClose === 'function' && onClose(event);
|
|
9
|
+
};
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
if (!dialogEl.current) {
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
// Remove this when browsers support :has() pseudo-class
|
|
15
|
+
const classNameToStopScrollBehindDialog = `${BLOCK_NAME}--open`;
|
|
16
|
+
if (open) {
|
|
17
|
+
dialogEl.current.showModal && dialogEl.current.showModal();
|
|
18
|
+
document.documentElement.classList.add(classNameToStopScrollBehindDialog);
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
dialogEl.current.open &&
|
|
22
|
+
dialogEl.current.close &&
|
|
23
|
+
dialogEl.current.close();
|
|
24
|
+
// Always remove this class to avoid unexpected scroll stopping
|
|
25
|
+
document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
|
|
26
|
+
}
|
|
27
|
+
}, [open, dialogEl]);
|
|
28
|
+
return (React.createElement("dialog", Object.assign({ ref: mergeRefs([dialogEl, ref]), className: [BLOCK_NAME, className].filter(Boolean).join(' ').trim() }, rest),
|
|
29
|
+
React.createElement("form", { method: "dialog", onSubmit: handleFormSubmit }, children)));
|
|
30
|
+
});
|
|
31
|
+
const StyleOnly = ({ className, children }) => {
|
|
32
|
+
return (React.createElement("div", { className: [BLOCK_NAME, className].filter(Boolean).join(' ').trim() }, children));
|
|
33
|
+
};
|
|
34
|
+
const Title = ({ children, id }) => {
|
|
35
|
+
return (React.createElement("p", Object.assign({ className: `${BLOCK_NAME}-title` }, (id ? { id } : {})), children));
|
|
36
|
+
};
|
|
37
|
+
const Body = ({ children, id }) => {
|
|
38
|
+
return (React.createElement("p", Object.assign({ className: `${BLOCK_NAME}-body` }, (id ? { id } : {})), children));
|
|
39
|
+
};
|
|
40
|
+
const ButtonGroup = ({ children, ...rest }) => {
|
|
41
|
+
return (React.createElement(Group, Object.assign({ className: `${BLOCK_NAME}-buttonGroup`, size: "medium" }, rest), children));
|
|
42
|
+
};
|
|
43
|
+
export const Dialog = {
|
|
44
|
+
Frame,
|
|
45
|
+
StyleOnly,
|
|
46
|
+
Title,
|
|
47
|
+
Body,
|
|
48
|
+
ButtonGroup,
|
|
49
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import 'dialog-polyfill/dist/dialog-polyfill.css';
|
|
3
|
+
export declare function DialogExample(): JSX.Element;
|
|
4
|
+
export declare function StyleOnly(): JSX.Element;
|
|
5
|
+
export declare function ButtonRow(): JSX.Element;
|
|
6
|
+
export declare function ButtonColumn(): JSX.Element;
|
|
7
|
+
export declare function ButtonColumnWithSubtleButton(): JSX.Element;
|
|
8
|
+
//# sourceMappingURL=DialogExample.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DialogExample.d.ts","sourceRoot":"","sources":["../../src/Dialog/DialogExample.tsx"],"names":[],"mappings":";AAMA,OAAO,0CAA0C,CAAC;AAUlD,wBAAgB,aAAa,gBAyC5B;AAED,wBAAgB,SAAS,gBAYxB;AAED,wBAAgB,SAAS,gBAexB;AAED,wBAAgB,YAAY,gBAe3B;AAED,wBAAgB,4BAA4B,gBAa3C"}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
+
}) : function(o, v) {
|
|
12
|
+
o["default"] = v;
|
|
13
|
+
});
|
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
+
if (mod && mod.__esModule) return mod;
|
|
16
|
+
var result = {};
|
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
+
__setModuleDefault(result, mod);
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
21
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
22
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
23
|
+
};
|
|
24
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
+
exports.ButtonColumnWithSubtleButton = exports.ButtonColumn = exports.ButtonRow = exports.StyleOnly = exports.DialogExample = void 0;
|
|
26
|
+
var react_1 = __importStar(require("react"));
|
|
27
|
+
var dialog_polyfill_1 = __importDefault(require("dialog-polyfill"));
|
|
28
|
+
var Button_1 = require("../Button");
|
|
29
|
+
var SubtleButton_1 = require("../SubtleButton");
|
|
30
|
+
var Dialog_1 = require("./Dialog");
|
|
31
|
+
require("dialog-polyfill/dist/dialog-polyfill.css");
|
|
32
|
+
function useDialogpolyfill(ref) {
|
|
33
|
+
react_1.useEffect(function () {
|
|
34
|
+
if (ref.current) {
|
|
35
|
+
dialog_polyfill_1.default.registerDialog(ref.current);
|
|
36
|
+
}
|
|
37
|
+
}, [ref]);
|
|
38
|
+
}
|
|
39
|
+
function DialogExample() {
|
|
40
|
+
var _a = react_1.useState(false), open = _a[0], setOpen = _a[1];
|
|
41
|
+
var dialogRef = react_1.useRef(null);
|
|
42
|
+
var handleOpenButtonClick = function () { return setOpen(true); };
|
|
43
|
+
var handleDialogCancel = function () { return setOpen(false); };
|
|
44
|
+
var handleDialogClose = function () { return setOpen(false); };
|
|
45
|
+
useDialogpolyfill(dialogRef);
|
|
46
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
47
|
+
react_1.default.createElement(Button_1.Button, { "aria-haspopup": "true", onClick: handleOpenButtonClick, size: "medium" }, "Open Dialog"),
|
|
48
|
+
react_1.default.createElement(Dialog_1.Dialog.Frame, { "aria-describedby": "dialog-description", "aria-labelledby": "dialog-title", ref: dialogRef, open: open, onCancel: handleDialogCancel, onClose: handleDialogClose },
|
|
49
|
+
react_1.default.createElement(Dialog_1.Dialog.Title, { id: "dialog-title" }, "\u30BF\u30A4\u30C8\u30EB\u3067\u3059\u3088"),
|
|
50
|
+
react_1.default.createElement(Dialog_1.Dialog.Body, { id: "dialog-description" }, "\u3053\u3053\u306B\u672C\u6587\u304C\u5165\u308A\u307E\u3059\u3088"),
|
|
51
|
+
react_1.default.createElement(Dialog_1.Dialog.ButtonGroup, null,
|
|
52
|
+
react_1.default.createElement(Button_1.Button, { layout: "fullWidth", size: "medium" }, "OK")))));
|
|
53
|
+
}
|
|
54
|
+
exports.DialogExample = DialogExample;
|
|
55
|
+
function StyleOnly() {
|
|
56
|
+
return (react_1.default.createElement(Dialog_1.Dialog.StyleOnly, null,
|
|
57
|
+
react_1.default.createElement(Dialog_1.Dialog.Title, null, "\u30BF\u30A4\u30C8\u30EB\u3067\u3059\u3088"),
|
|
58
|
+
react_1.default.createElement(Dialog_1.Dialog.Body, null, "\u3053\u3053\u306B\u672C\u6587\u304C\u5165\u308A\u307E\u3059\u3088"),
|
|
59
|
+
react_1.default.createElement(Dialog_1.Dialog.ButtonGroup, null,
|
|
60
|
+
react_1.default.createElement(Button_1.Button, { layout: "fullWidth", size: "medium" }, "OK"))));
|
|
61
|
+
}
|
|
62
|
+
exports.StyleOnly = StyleOnly;
|
|
63
|
+
function ButtonRow() {
|
|
64
|
+
return (react_1.default.createElement(Dialog_1.Dialog.StyleOnly, null,
|
|
65
|
+
react_1.default.createElement(Dialog_1.Dialog.Title, null, "\u30BF\u30A4\u30C8\u30EB\u3067\u3059\u3088"),
|
|
66
|
+
react_1.default.createElement(Dialog_1.Dialog.Body, null, "\u3053\u3053\u306B\u672C\u6587\u304C\u5165\u308A\u307E\u3059\u3088"),
|
|
67
|
+
react_1.default.createElement(Dialog_1.Dialog.ButtonGroup, null,
|
|
68
|
+
react_1.default.createElement(Button_1.Button, { layout: "fullWidth", size: "medium", variant: "neutral" }, "\u30AD\u30E3\u30F3\u30BB\u30EB"),
|
|
69
|
+
react_1.default.createElement(Button_1.Button, { layout: "fullWidth", size: "medium", variant: "danger", type: "button" }, "\u524A\u9664\u3059\u308B"))));
|
|
70
|
+
}
|
|
71
|
+
exports.ButtonRow = ButtonRow;
|
|
72
|
+
function ButtonColumn() {
|
|
73
|
+
return (react_1.default.createElement(Dialog_1.Dialog.StyleOnly, null,
|
|
74
|
+
react_1.default.createElement(Dialog_1.Dialog.Title, null, "\u30BF\u30A4\u30C8\u30EB\u3067\u3059\u3088"),
|
|
75
|
+
react_1.default.createElement(Dialog_1.Dialog.Body, null, "\u3053\u3053\u306B\u672C\u6587\u304C\u5165\u308A\u307E\u3059\u3088"),
|
|
76
|
+
react_1.default.createElement(Dialog_1.Dialog.ButtonGroup, { direction: "column" },
|
|
77
|
+
react_1.default.createElement(Button_1.Button, { layout: "fullWidth", size: "medium", type: "button" }, "Spindle\u3092\u30D5\u30A9\u30ED\u30FC\u3059\u308B"),
|
|
78
|
+
react_1.default.createElement(Button_1.Button, { layout: "fullWidth", size: "medium", variant: "neutral" }, "\u30AD\u30E3\u30F3\u30BB\u30EB"))));
|
|
79
|
+
}
|
|
80
|
+
exports.ButtonColumn = ButtonColumn;
|
|
81
|
+
function ButtonColumnWithSubtleButton() {
|
|
82
|
+
return (react_1.default.createElement(Dialog_1.Dialog.StyleOnly, null,
|
|
83
|
+
react_1.default.createElement(Dialog_1.Dialog.Title, null, "\u30BF\u30A4\u30C8\u30EB\u3067\u3059\u3088"),
|
|
84
|
+
react_1.default.createElement(Dialog_1.Dialog.Body, null, "\u3053\u3053\u306B\u672C\u6587\u304C\u5165\u308A\u307E\u3059\u3088"),
|
|
85
|
+
react_1.default.createElement(Dialog_1.Dialog.ButtonGroup, { direction: "column" },
|
|
86
|
+
react_1.default.createElement(Button_1.Button, { layout: "fullWidth", size: "medium", type: "button" }, "Spindle\u3092\u30D5\u30A9\u30ED\u30FC\u3059\u308B"),
|
|
87
|
+
react_1.default.createElement(SubtleButton_1.SubtleButton, { size: "medium" }, "\u9589\u3058\u308B"))));
|
|
88
|
+
}
|
|
89
|
+
exports.ButtonColumnWithSubtleButton = ButtonColumnWithSubtleButton;
|
|
90
|
+
//# sourceMappingURL=DialogExample.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DialogExample.js","sourceRoot":"","sources":["../../src/Dialog/DialogExample.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA2D;AAC3D,oEAA6C;AAC7C,oCAAmC;AACnC,gDAA+C;AAC/C,mCAAkC;AAElC,oDAAkD;AAElD,SAAS,iBAAiB,CAAC,GAAuC;IAChE,iBAAS,CAAC;QACR,IAAI,GAAG,CAAC,OAAO,EAAE;YACf,yBAAc,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;SAC5C;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AACZ,CAAC;AAED,SAAgB,aAAa;IACrB,IAAA,KAAkB,gBAAQ,CAAC,KAAK,CAAC,EAAhC,IAAI,QAAA,EAAE,OAAO,QAAmB,CAAC;IACxC,IAAM,SAAS,GAAG,cAAM,CAAoB,IAAI,CAAC,CAAC;IAElD,IAAM,qBAAqB,GAAG,cAAM,OAAA,OAAO,CAAC,IAAI,CAAC,EAAb,CAAa,CAAC;IAElD,IAAM,kBAAkB,GAAG,cAAM,OAAA,OAAO,CAAC,KAAK,CAAC,EAAd,CAAc,CAAC;IAEhD,IAAM,iBAAiB,GAAG,cAAM,OAAA,OAAO,CAAC,KAAK,CAAC,EAAd,CAAc,CAAC;IAE/C,iBAAiB,CAAC,SAAS,CAAC,CAAC;IAE7B,OAAO,CACL;QACE,8BAAC,eAAM,qBACS,MAAM,EACpB,OAAO,EAAE,qBAAqB,EAC9B,IAAI,EAAC,QAAQ,kBAGN;QACT,8BAAC,eAAM,CAAC,KAAK,wBACM,oBAAoB,qBACrB,cAAc,EAC9B,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,kBAAkB,EAC5B,OAAO,EAAE,iBAAiB;YAE1B,8BAAC,eAAM,CAAC,KAAK,IAAC,EAAE,EAAC,cAAc,iDAAuB;YACtD,8BAAC,eAAM,CAAC,IAAI,IAAC,EAAE,EAAC,oBAAoB,yEAEtB;YACd,8BAAC,eAAM,CAAC,WAAW;gBACjB,8BAAC,eAAM,IAAC,MAAM,EAAC,WAAW,EAAC,IAAI,EAAC,QAAQ,SAE/B,CACU,CACR,CACd,CACJ,CAAC;AACJ,CAAC;AAzCD,sCAyCC;AAED,SAAgB,SAAS;IACvB,OAAO,CACL,8BAAC,eAAM,CAAC,SAAS;QACf,8BAAC,eAAM,CAAC,KAAK,qDAAuB;QACpC,8BAAC,eAAM,CAAC,IAAI,6EAA0B;QACtC,8BAAC,eAAM,CAAC,WAAW;YACjB,8BAAC,eAAM,IAAC,MAAM,EAAC,WAAW,EAAC,IAAI,EAAC,QAAQ,SAE/B,CACU,CACJ,CACpB,CAAC;AACJ,CAAC;AAZD,8BAYC;AAED,SAAgB,SAAS;IACvB,OAAO,CACL,8BAAC,eAAM,CAAC,SAAS;QACf,8BAAC,eAAM,CAAC,KAAK,qDAAuB;QACpC,8BAAC,eAAM,CAAC,IAAI,6EAA0B;QACtC,8BAAC,eAAM,CAAC,WAAW;YACjB,8BAAC,eAAM,IAAC,MAAM,EAAC,WAAW,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,qCAEjD;YACT,8BAAC,eAAM,IAAC,MAAM,EAAC,WAAW,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,+BAE9D,CACU,CACJ,CACpB,CAAC;AACJ,CAAC;AAfD,8BAeC;AAED,SAAgB,YAAY;IAC1B,OAAO,CACL,8BAAC,eAAM,CAAC,SAAS;QACf,8BAAC,eAAM,CAAC,KAAK,qDAAuB;QACpC,8BAAC,eAAM,CAAC,IAAI,6EAA0B;QACtC,8BAAC,eAAM,CAAC,WAAW,IAAC,SAAS,EAAC,QAAQ;YACpC,8BAAC,eAAM,IAAC,MAAM,EAAC,WAAW,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,wDAE7C;YACT,8BAAC,eAAM,IAAC,MAAM,EAAC,WAAW,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,qCAEjD,CACU,CACJ,CACpB,CAAC;AACJ,CAAC;AAfD,oCAeC;AAED,SAAgB,4BAA4B;IAC1C,OAAO,CACL,8BAAC,eAAM,CAAC,SAAS;QACf,8BAAC,eAAM,CAAC,KAAK,qDAAuB;QACpC,8BAAC,eAAM,CAAC,IAAI,6EAA0B;QACtC,8BAAC,eAAM,CAAC,WAAW,IAAC,SAAS,EAAC,QAAQ;YACpC,8BAAC,eAAM,IAAC,MAAM,EAAC,WAAW,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,wDAE7C;YACT,8BAAC,2BAAY,IAAC,IAAI,EAAC,QAAQ,yBAAmB,CAC3B,CACJ,CACpB,CAAC;AACJ,CAAC;AAbD,oEAaC"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
2
|
+
import dialogPolyfill from 'dialog-polyfill';
|
|
3
|
+
import { Button } from '../Button';
|
|
4
|
+
import { SubtleButton } from '../SubtleButton';
|
|
5
|
+
import { Dialog } from './Dialog';
|
|
6
|
+
import 'dialog-polyfill/dist/dialog-polyfill.css';
|
|
7
|
+
function useDialogpolyfill(ref) {
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
if (ref.current) {
|
|
10
|
+
dialogPolyfill.registerDialog(ref.current);
|
|
11
|
+
}
|
|
12
|
+
}, [ref]);
|
|
13
|
+
}
|
|
14
|
+
export function DialogExample() {
|
|
15
|
+
const [open, setOpen] = useState(false);
|
|
16
|
+
const dialogRef = useRef(null);
|
|
17
|
+
const handleOpenButtonClick = () => setOpen(true);
|
|
18
|
+
const handleDialogCancel = () => setOpen(false);
|
|
19
|
+
const handleDialogClose = () => setOpen(false);
|
|
20
|
+
useDialogpolyfill(dialogRef);
|
|
21
|
+
return (React.createElement(React.Fragment, null,
|
|
22
|
+
React.createElement(Button, { "aria-haspopup": "true", onClick: handleOpenButtonClick, size: "medium" }, "Open Dialog"),
|
|
23
|
+
React.createElement(Dialog.Frame, { "aria-describedby": "dialog-description", "aria-labelledby": "dialog-title", ref: dialogRef, open: open, onCancel: handleDialogCancel, onClose: handleDialogClose },
|
|
24
|
+
React.createElement(Dialog.Title, { id: "dialog-title" }, "\u30BF\u30A4\u30C8\u30EB\u3067\u3059\u3088"),
|
|
25
|
+
React.createElement(Dialog.Body, { id: "dialog-description" }, "\u3053\u3053\u306B\u672C\u6587\u304C\u5165\u308A\u307E\u3059\u3088"),
|
|
26
|
+
React.createElement(Dialog.ButtonGroup, null,
|
|
27
|
+
React.createElement(Button, { layout: "fullWidth", size: "medium" }, "OK")))));
|
|
28
|
+
}
|
|
29
|
+
export function StyleOnly() {
|
|
30
|
+
return (React.createElement(Dialog.StyleOnly, null,
|
|
31
|
+
React.createElement(Dialog.Title, null, "\u30BF\u30A4\u30C8\u30EB\u3067\u3059\u3088"),
|
|
32
|
+
React.createElement(Dialog.Body, null, "\u3053\u3053\u306B\u672C\u6587\u304C\u5165\u308A\u307E\u3059\u3088"),
|
|
33
|
+
React.createElement(Dialog.ButtonGroup, null,
|
|
34
|
+
React.createElement(Button, { layout: "fullWidth", size: "medium" }, "OK"))));
|
|
35
|
+
}
|
|
36
|
+
export function ButtonRow() {
|
|
37
|
+
return (React.createElement(Dialog.StyleOnly, null,
|
|
38
|
+
React.createElement(Dialog.Title, null, "\u30BF\u30A4\u30C8\u30EB\u3067\u3059\u3088"),
|
|
39
|
+
React.createElement(Dialog.Body, null, "\u3053\u3053\u306B\u672C\u6587\u304C\u5165\u308A\u307E\u3059\u3088"),
|
|
40
|
+
React.createElement(Dialog.ButtonGroup, null,
|
|
41
|
+
React.createElement(Button, { layout: "fullWidth", size: "medium", variant: "neutral" }, "\u30AD\u30E3\u30F3\u30BB\u30EB"),
|
|
42
|
+
React.createElement(Button, { layout: "fullWidth", size: "medium", variant: "danger", type: "button" }, "\u524A\u9664\u3059\u308B"))));
|
|
43
|
+
}
|
|
44
|
+
export function ButtonColumn() {
|
|
45
|
+
return (React.createElement(Dialog.StyleOnly, null,
|
|
46
|
+
React.createElement(Dialog.Title, null, "\u30BF\u30A4\u30C8\u30EB\u3067\u3059\u3088"),
|
|
47
|
+
React.createElement(Dialog.Body, null, "\u3053\u3053\u306B\u672C\u6587\u304C\u5165\u308A\u307E\u3059\u3088"),
|
|
48
|
+
React.createElement(Dialog.ButtonGroup, { direction: "column" },
|
|
49
|
+
React.createElement(Button, { layout: "fullWidth", size: "medium", type: "button" }, "Spindle\u3092\u30D5\u30A9\u30ED\u30FC\u3059\u308B"),
|
|
50
|
+
React.createElement(Button, { layout: "fullWidth", size: "medium", variant: "neutral" }, "\u30AD\u30E3\u30F3\u30BB\u30EB"))));
|
|
51
|
+
}
|
|
52
|
+
export function ButtonColumnWithSubtleButton() {
|
|
53
|
+
return (React.createElement(Dialog.StyleOnly, null,
|
|
54
|
+
React.createElement(Dialog.Title, null, "\u30BF\u30A4\u30C8\u30EB\u3067\u3059\u3088"),
|
|
55
|
+
React.createElement(Dialog.Body, null, "\u3053\u3053\u306B\u672C\u6587\u304C\u5165\u308A\u307E\u3059\u3088"),
|
|
56
|
+
React.createElement(Dialog.ButtonGroup, { direction: "column" },
|
|
57
|
+
React.createElement(Button, { layout: "fullWidth", size: "medium", type: "button" }, "Spindle\u3092\u30D5\u30A9\u30ED\u30FC\u3059\u308B"),
|
|
58
|
+
React.createElement(SubtleButton, { size: "medium" }, "\u9589\u3058\u308B"))));
|
|
59
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
|
package/Dialog/index.js
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Dialog = void 0;
|
|
4
|
+
var Dialog_1 = require("./Dialog");
|
|
5
|
+
Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return Dialog_1.Dialog; } });
|
|
6
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Dialog/index.ts"],"names":[],"mappings":";;;AAAA,mCAAkC;AAAzB,gGAAA,MAAM,OAAA"}
|
package/Dialog/index.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Dialog } from './Dialog';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
.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}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
.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%;-o-object-fit:cover;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}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-
|
|
1
|
+
:root{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-outlineColor:var(--color-focus-clarity);--IconButton--contained-backgroundColor:var(--color-surface-accent-primary);--IconButton--contained-color:var(--color-object-high-emphasis-inverse);--IconButton--contained-onActive-backgroundColor:var(--primary-green-100);--IconButton--contained-onHover-backgroundColor:var(--primary-green-100);--IconButton--outlined-borderColor:var(--color-border-accent-primary);--IconButton--outlined-color:var(--color-object-accent-primary);--IconButton--outlined-onActive-backgroundColor:var(--primary-green-5);--IconButton--outlined-onHover-backgroundColor:var(--primary-green-5);--IconButton--lighted-backgroundColor:var(--color-surface-accent-primary-light);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;-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)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--LinkButton-tapHighlightColor:var(--gray-5-alpha);--LinkButton-onFocus-
|
|
1
|
+
: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}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
: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}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare type Size = 'large' | 'medium' | 'small';
|
|
3
|
+
interface Props extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
size?: Size;
|
|
6
|
+
}
|
|
7
|
+
export declare const SubtleButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=SubtleButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SubtleButton.d.ts","sourceRoot":"","sources":["../../src/SubtleButton/SubtleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,aAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC,UAAU,KACR,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAID,eAAO,MAAM,YAAY,iFAYxB,CAAC"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
16
|
+
}) : (function(o, m, k, k2) {
|
|
17
|
+
if (k2 === undefined) k2 = k;
|
|
18
|
+
o[k2] = m[k];
|
|
19
|
+
}));
|
|
20
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
21
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
22
|
+
}) : function(o, v) {
|
|
23
|
+
o["default"] = v;
|
|
24
|
+
});
|
|
25
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
26
|
+
if (mod && mod.__esModule) return mod;
|
|
27
|
+
var result = {};
|
|
28
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
29
|
+
__setModuleDefault(result, mod);
|
|
30
|
+
return result;
|
|
31
|
+
};
|
|
32
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
33
|
+
var t = {};
|
|
34
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
35
|
+
t[p] = s[p];
|
|
36
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
37
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
38
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
39
|
+
t[p[i]] = s[p[i]];
|
|
40
|
+
}
|
|
41
|
+
return t;
|
|
42
|
+
};
|
|
43
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
44
|
+
exports.SubtleButton = void 0;
|
|
45
|
+
var react_1 = __importStar(require("react"));
|
|
46
|
+
var BLOCK_NAME = 'spui-SubtleButton';
|
|
47
|
+
exports.SubtleButton = react_1.forwardRef(function SubtleButton(_a, ref) {
|
|
48
|
+
var children = _a.children, _b = _a.size, size = _b === void 0 ? 'large' : _b, rest = __rest(_a, ["children", "size"]);
|
|
49
|
+
return (react_1.default.createElement("button", __assign({ className: BLOCK_NAME + " " + BLOCK_NAME + "--" + size, ref: ref }, rest), children));
|
|
50
|
+
});
|
|
51
|
+
//# sourceMappingURL=SubtleButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SubtleButton.js","sourceRoot":"","sources":["../../src/SubtleButton/SubtleButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA0C;AAU1C,IAAM,UAAU,GAAG,mBAAmB,CAAC;AAE1B,QAAA,YAAY,GAAG,kBAAU,CACpC,SAAS,YAAY,CAAC,EAA4C,EAAE,GAAG;IAA/C,IAAA,QAAQ,cAAA,EAAE,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EAAK,IAAI,cAAnC,oBAAqC,CAAF;IACvD,OAAO,CACL,mDACE,SAAS,EAAK,UAAU,SAAI,UAAU,UAAK,IAAM,EACjD,GAAG,EAAE,GAAG,IACJ,IAAI,GAEP,QAAQ,CACF,CACV,CAAC;AACJ,CAAC,CACF,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
const BLOCK_NAME = 'spui-SubtleButton';
|
|
3
|
+
export const SubtleButton = forwardRef(function SubtleButton({ children, size = 'large', ...rest }, ref) {
|
|
4
|
+
return (React.createElement("button", Object.assign({ className: `${BLOCK_NAME} ${BLOCK_NAME}--${size}`, ref: ref }, rest), children));
|
|
5
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SubtleButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.SubtleButton = void 0;
|
|
4
|
+
var SubtleButton_1 = require("./SubtleButton");
|
|
5
|
+
Object.defineProperty(exports, "SubtleButton", { enumerable: true, get: function () { return SubtleButton_1.SubtleButton; } });
|
|
6
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/SubtleButton/index.ts"],"names":[],"mappings":";;;AAAA,+CAA8C;AAArC,4GAAA,YAAY,OAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { SubtleButton } from './SubtleButton';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
: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--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}}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare type Variant = 'subtle';
|
|
3
|
+
interface Props extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'className'> {
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
variant?: Variant;
|
|
6
|
+
icon?: React.ReactNode;
|
|
7
|
+
iconPosition?: 'start' | 'end';
|
|
8
|
+
underline?: 'hover';
|
|
9
|
+
}
|
|
10
|
+
export declare const TextLink: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLAnchorElement>>;
|
|
11
|
+
export {};
|
|
12
|
+
//# sourceMappingURL=TextLink.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../src/TextLink/TextLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,aAAK,OAAO,GAAG,QAAQ,CAAC;AAExB,UAAU,KACR,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAID,eAAO,MAAM,QAAQ,iFA4BnB,CAAC"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
16
|
+
}) : (function(o, m, k, k2) {
|
|
17
|
+
if (k2 === undefined) k2 = k;
|
|
18
|
+
o[k2] = m[k];
|
|
19
|
+
}));
|
|
20
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
21
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
22
|
+
}) : function(o, v) {
|
|
23
|
+
o["default"] = v;
|
|
24
|
+
});
|
|
25
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
26
|
+
if (mod && mod.__esModule) return mod;
|
|
27
|
+
var result = {};
|
|
28
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
29
|
+
__setModuleDefault(result, mod);
|
|
30
|
+
return result;
|
|
31
|
+
};
|
|
32
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
33
|
+
var t = {};
|
|
34
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
35
|
+
t[p] = s[p];
|
|
36
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
37
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
38
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
39
|
+
t[p[i]] = s[p[i]];
|
|
40
|
+
}
|
|
41
|
+
return t;
|
|
42
|
+
};
|
|
43
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
44
|
+
exports.TextLink = void 0;
|
|
45
|
+
var react_1 = __importStar(require("react"));
|
|
46
|
+
var BLOCK_NAME = 'spui-TextLink';
|
|
47
|
+
exports.TextLink = react_1.forwardRef(function TextLink(_a, ref) {
|
|
48
|
+
var children = _a.children, variant = _a.variant, icon = _a.icon, iconPosition = _a.iconPosition, underline = _a.underline, rest = __rest(_a, ["children", "variant", "icon", "iconPosition", "underline"]);
|
|
49
|
+
return (react_1.default.createElement("a", __assign({ className: [
|
|
50
|
+
BLOCK_NAME,
|
|
51
|
+
variant && BLOCK_NAME + "--" + variant,
|
|
52
|
+
icon && BLOCK_NAME + "--hasIcon",
|
|
53
|
+
icon && iconPosition && BLOCK_NAME + "--icon" + iconPosition,
|
|
54
|
+
underline && BLOCK_NAME + "--underline" + underline,
|
|
55
|
+
]
|
|
56
|
+
.filter(Boolean)
|
|
57
|
+
.join(' '), ref: ref }, rest), icon ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
58
|
+
react_1.default.createElement("span", { className: BLOCK_NAME + "-icon" }, icon),
|
|
59
|
+
children)) : (children)));
|
|
60
|
+
});
|
|
61
|
+
//# sourceMappingURL=TextLink.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextLink.js","sourceRoot":"","sources":["../../src/TextLink/TextLink.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA0C;AAa1C,IAAM,UAAU,GAAG,eAAe,CAAC;AAEtB,QAAA,QAAQ,GAAG,kBAAU,CAA2B,SAAS,QAAQ,CAC5E,EAAoE,EACpE,GAAG;IADD,IAAA,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,IAAI,UAAA,EAAE,YAAY,kBAAA,EAAE,SAAS,eAAA,EAAK,IAAI,cAA3D,4DAA6D,CAAF;IAG3D,OAAO,CACL,8CACE,SAAS,EAAE;YACT,UAAU;YACV,OAAO,IAAO,UAAU,UAAK,OAAS;YACtC,IAAI,IAAO,UAAU,cAAW;YAChC,IAAI,IAAI,YAAY,IAAO,UAAU,cAAS,YAAc;YAC5D,SAAS,IAAO,UAAU,mBAAc,SAAW;SACpD;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,EACZ,GAAG,EAAE,GAAG,IACJ,IAAI,GAEP,IAAI,CAAC,CAAC,CAAC,CACN;QACE,wCAAM,SAAS,EAAK,UAAU,UAAO,IAAG,IAAI,CAAQ;QACnD,QAAQ,CACR,CACJ,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACC,CACL,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
const BLOCK_NAME = 'spui-TextLink';
|
|
3
|
+
export const TextLink = forwardRef(function TextLink({ children, variant, icon, iconPosition, underline, ...rest }, ref) {
|
|
4
|
+
return (React.createElement("a", Object.assign({ className: [
|
|
5
|
+
BLOCK_NAME,
|
|
6
|
+
variant && `${BLOCK_NAME}--${variant}`,
|
|
7
|
+
icon && `${BLOCK_NAME}--hasIcon`,
|
|
8
|
+
icon && iconPosition && `${BLOCK_NAME}--icon${iconPosition}`,
|
|
9
|
+
underline && `${BLOCK_NAME}--underline${underline}`,
|
|
10
|
+
]
|
|
11
|
+
.filter(Boolean)
|
|
12
|
+
.join(' '), ref: ref }, rest), icon ? (React.createElement(React.Fragment, null,
|
|
13
|
+
React.createElement("span", { className: `${BLOCK_NAME}-icon` }, icon),
|
|
14
|
+
children)) : (children)));
|
|
15
|
+
});
|
package/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--ameba-green:#2d8c3c;--ameba-black:#000;--ameba-yellow-green:#82be28;--ameba-neutral-gray:#f6f6f6;--ameba-white:#fff;--ameba-yellow:#f5e100;--primary-green-100:#0f5c1f;--primary-green-90:#186b27;--primary-green-80:#237b31;--primary-green-70:#298737;--primary-green-60:#389e46;--primary-green-50:#41ad4f;--primary-green-40:#5eb969;--primary-green-30:#7bc583;--primary-green-20:#a1d5a7;--primary-green-10:#c6e5c9;--primary-green-5:#e7f5e9;--secondary-green-100:#366600;--secondary-green-90:#427504;--secondary-green-80:#477d00;--secondary-green-70:#5e9b15;--secondary-green-60:#73ae20;--secondary-green-50:#82be28;--secondary-green-40:#95c84d;--secondary-green-30:#a9d16f;--secondary-green-20:#c2de99;--secondary-green-10:#daebc1;--secondary-green-5:#f0f7e6;--gray-100:#08121a;--gray-90-alpha:rgba(8,18,26,0.95);--gray-80-alpha:rgba(8,18,26,0.8);--gray-70-alpha:rgba(8,18,26,0.74);--gray-60-alpha:rgba(8,18,26,0.61);--gray-50-alpha:rgba(8,18,26,0.47);--gray-40-alpha:rgba(8,18,26,0.4);--gray-30-alpha:rgba(8,18,26,0.3);--gray-20-alpha:rgba(8,18,26,0.16);--gray-10-alpha:rgba(8,18,26,0.08);--gray-5-alpha:rgba(8,18,26,0.04);--gray-90:#141e25;--gray-80:#394148;--gray-70:#464d53;--gray-60:#686e73;--gray-50:#8b9093;--gray-40:#9ca0a3;--gray-30:#b5b8ba;--gray-20:#d8d9da;--gray-10:#ebeced;--gray-5:#f5f6f6;--white-100:#fff;--white-90-alpha:hsla(0,0%,100%,0.9);--white-80-alpha:hsla(0,0%,100%,0.8);--white-70-alpha:hsla(0,0%,100%,0.7);--white-60-alpha:hsla(0,0%,100%,0.6);--white-50-alpha:hsla(0,0%,100%,0.5);--white-40-alpha:hsla(0,0%,100%,0.43);--white-30-alpha:hsla(0,0%,100%,0.3);--white-20-alpha:hsla(0,0%,100%,0.16);--white-10-alpha:hsla(0,0%,100%,0.1);--white-5-alpha:hsla(0,0%,100%,0.05);--black-100:#000;--black-90-alpha:rgba(0,0,0,0.9);--black-80-alpha:rgba(0,0,0,0.8);--black-70-alpha:rgba(0,0,0,0.7);--black-60-alpha:rgba(0,0,0,0.6);--black-50-alpha:rgba(0,0,0,0.5);--black-40-alpha:rgba(0,0,0,0.4);--black-30-alpha:rgba(0,0,0,0.3);--black-20-alpha:rgba(0,0,0,0.2);--black-10-alpha:rgba(0,0,0,0.1);--black-5-alpha:rgba(0,0,0,0.05);--caution-red-100:#d91c0b;--caution-red-20-alpha:rgba(217,28,11,0.2);--caution-red-5-alpha:rgba(217,28,11,0.05);--caution-red-vivid-100:#ff6a59;--caution-red-vivid-20-alpha:rgba(255,106,89,0.2);--caution-red-vivid-5-alpha:rgba(255,106,89,0.05);--expressive-blue:#4795c8;--expressive-green:#4ac3aa;--expressive-purple:#ca5ce6;--expressive-lavender:#755ce6;--expressive-orange:#e6815c;--expressive-yellow:#e6ac5c;--expressive-pink:#e6456a;--facebook-blue:#1877f2;--twitter-blue:#1da1f2;--instagram-pink:#f20076;--apple-black:#000;--apple-white:#fff;--youtube-red:red;--focus-blue-100:#0091ff;--focus-blue-30-alpha:rgba(0,145,255,0.3);--highlight-yellow-100:#f5e100;--highlight-yellow-30-alpha:rgba(245,225,0,0.3);--color-background:var(--gray-5);--color-surface-primary:var(--white-100);--color-surface-secondary:var(--gray-5-alpha);--color-surface-tertiary:var(--gray-10-alpha);--color-surface-quaternary:var(--gray-20-alpha);--color-surface-accent-primary:var(--primary-green-70);--color-surface-accent-primary-light:var(--primary-green-5);--color-surface-accent-secondary:var(--secondary-green-50);--color-surface-accent-secondary-light:var(--secondary-green-5);--color-surface-caution:var(--caution-red-100);--color-surface-caution-light:var(--caution-red-5-alpha);--color-text-high-emphasis:var(--gray-100);--color-text-medium-emphasis:var(--gray-70-alpha);--color-text-low-emphasis:var(--gray-60-alpha);--color-text-disabled:var(--gray-30-alpha);--color-text-high-emphasis-inverse:var(--white-100);--color-text-accent-primary:var(--primary-green-80);--color-text-accent-secondary:var(--secondary-green-80);--color-text-caution:var(--caution-red-100);--color-highlight-error:var(--caution-red-20-alpha);--color-highlight-hover:var(--black-30-alpha);--color-highlight-yellow:var(--highlight-yellow-100);--color-object-high-emphasis:var(--gray-100);--color-object-medium-emphasis:var(--gray-70-alpha);--color-object-low-emphasis:var(--gray-60-alpha);--color-object-disable:var(--gray-30-alpha);--color-object-accent-primary:var(--primary-green-70);--color-object-accent-secondary:var(--secondary-green-70);--color-object-caution:var(--caution-red-100);--color-object-high-emphasis-inverse:var(--white-100);--color-object-expressive-pink:var(--expressive-pink);--color-overlay-dark:var(--black-80-alpha);--color-overlay-light:var(--black-20-alpha);--color-overlay-medium:var(--black-60-alpha);--color-focus-clarity:var(--focus-blue-100);--color-focus-ambiguous:var(--focus-blue-30-alpha);--color-border-strong-emphasis:var(--gray-100);--color-border-high-emphasis:var(--gray-60-alpha);--color-border-medium-emphasis:var(--gray-30-alpha);--color-border-low-emphasis:var(--gray-10-alpha);--color-border-accent-primary:var(--primary-green-70);--color-border-high-emphasis-inverse:var(--white-100);--color-border-caution:var(--caution-red-100);--color-third-party-facebook-blue:var(--facebook-blue);--color-third-party-twitter-blue:var(--twitter-blue);--color-third-party-instagram-pink:var(--instagram-pink);--color-system-black:var(--black-100);--color-tap-highlight-base:var(--gray-5-alpha)}.spui-Breadcrumb{background:var(--color-surface-secondary);border-radius:70px;display:inline-block;overflow:hidden;padding:0 16px}.spui-Breadcrumb-list{align-items:center;display:flex;list-style:none;margin:0;padding:0}.spui-Breadcrumb-item{align-items:center;display:flex;min-height:56px}.spui-Breadcrumb a{align-items:center;border-radius:4px;display:flex;letter-spacing:.1em;line-height:1.3;padding:4px 8px;position:relative;text-decoration:none}.spui-Breadcrumb a:not([aria-current]){color:var(--color-text-accent-primary);font-weight:700}.spui-Breadcrumb a[aria-current]{color:var(--color-text-low-emphasis);font-weight:400}.spui-Breadcrumb a:before{border-radius:4px;content:"";left:0;min-height:56px;position:absolute;top:-50%;width:100%}.spui-Breadcrumb a:hover{text-decoration:underline}.spui-Breadcrumb a:focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-Breadcrumb a:focus:not(:focus-visible){box-shadow: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-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px 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{box-shadow:var(--Button-onFocus-boxShadow);outline:none}.spui-Button:focus:not(:focus-visible){box-shadow: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>*{margin-right:16px}.spui-ButtonGroup--large.spui-ButtonGroup--row>:last-child{margin-right:0}.spui-ButtonGroup--large.spui-ButtonGroup--column>*{margin-bottom:16px}.spui-ButtonGroup--large.spui-ButtonGroup--column>:last-child{margin-bottom:0}.spui-ButtonGroup--medium.spui-ButtonGroup--row>*{margin-right:12px}.spui-ButtonGroup--medium.spui-ButtonGroup--row>:last-child{margin-right:0}.spui-ButtonGroup--medium.spui-ButtonGroup--column>*{margin-bottom:12px}.spui-ButtonGroup--medium.spui-ButtonGroup--column>:last-child{margin-bottom:0}.spui-ButtonGroup--small.spui-ButtonGroup--row>*{margin-right:8px}.spui-ButtonGroup--small.spui-ButtonGroup--row>:last-child{margin-right:0}.spui-ButtonGroup--small.spui-ButtonGroup--column>*{margin-bottom:12px}.spui-ButtonGroup--small.spui-ButtonGroup--column>:last-child{margin-bottom: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}:root{--HeroCarouselItem-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity)}.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{box-shadow:var(--HeroCarouselItem-onFocus-boxShadow);outline:none}.spui-HeroCarouselItem-link:focus:not(:focus-visible){box-shadow: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}}:root{--HeroCarousel-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity)}.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{box-shadow:var(--HeroCarousel-onFocus-boxShadow);outline:none}.spui-HeroCarousel-control:focus:not(:focus-visible){box-shadow: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-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px 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;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{box-shadow:var(--IconButton-onFocus-boxShadow);outline:none}.spui-IconButton:focus:not(:focus-visible){box-shadow: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-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px 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{box-shadow:var(--LinkButton-onFocus-boxShadow);outline:none}.spui-LinkButton:focus:not(:focus-visible){box-shadow: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{--Toast-z-index:1}.spui-Toast{left:0;position:fixed;right:0;text-align:center;z-index:var(--Toast-z-index)}.spui-Toast--content{background-color:var(--color-surface-accent-primary-light);border-radius:40px;box-shadow:0 4.75px 14.25px rgba(8,18,26,.12);box-sizing:border-box;color:var(--color-text-accent-primary);cursor:default;display:inline-block;font-family:inherit;font-size:16px;font-weight:700;margin:0;padding:11px 16px}.spui-Toast-content--error{background-color:var(--color-surface-caution-light);color:var(--color-text-caution);position:relative}.spui-Toast-content--error:before{background-color:var(--color-surface-primary);border-radius:40px;content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.spui-Toast--top{top:16px}.spui-Toast--bottom{bottom:0}.spui-Toast--slide{transform:translateY(-100px);transition:transform .5s ease}.spui-Toast-slide--in{transform:translateY(0)}@media (prefers-reduced-motion:reduce){.spui-Toast--slide{transition-duration:.1ms}}
|
|
1
|
+
:root{--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;-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--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}}
|
package/index.d.ts
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { BreadcrumbItem, BreadcrumbList } from './Breadcrumb';
|
|
2
2
|
import { Button } from './Button';
|
|
3
3
|
import { ButtonGroup } from './ButtonGroup';
|
|
4
|
+
import { Dialog } from './Dialog';
|
|
4
5
|
import * as Form from './Form';
|
|
5
6
|
import * as Icon from './Icon';
|
|
6
7
|
import { HeroCarousel } from './HeroCarousel';
|
|
7
8
|
import { IconButton } from './IconButton';
|
|
8
9
|
import { LinkButton } from './LinkButton';
|
|
9
10
|
import { Toast } from './Toast';
|
|
10
|
-
export { BreadcrumbItem, BreadcrumbList, Button, ButtonGroup, Form, HeroCarousel, Icon, IconButton, LinkButton, Toast, };
|
|
11
|
+
export { BreadcrumbItem, BreadcrumbList, Button, ButtonGroup, Dialog, Form, HeroCarousel, Icon, IconButton, LinkButton, Toast, };
|
|
11
12
|
//# sourceMappingURL=index.d.ts.map
|
package/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,OAAO,EACL,cAAc,EACd,cAAc,EACd,MAAM,EACN,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,UAAU,EACV,KAAK,GACN,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,OAAO,EACL,cAAc,EACd,cAAc,EACd,MAAM,EACN,WAAW,EACX,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,UAAU,EACV,KAAK,GACN,CAAC"}
|
package/index.js
CHANGED
|
@@ -19,7 +19,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
19
19
|
return result;
|
|
20
20
|
};
|
|
21
21
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
-
exports.Toast = exports.LinkButton = exports.IconButton = exports.Icon = exports.HeroCarousel = exports.Form = exports.ButtonGroup = exports.Button = exports.BreadcrumbList = exports.BreadcrumbItem = void 0;
|
|
22
|
+
exports.Toast = exports.LinkButton = exports.IconButton = exports.Icon = exports.HeroCarousel = exports.Form = exports.Dialog = exports.ButtonGroup = exports.Button = exports.BreadcrumbList = exports.BreadcrumbItem = void 0;
|
|
23
23
|
var Breadcrumb_1 = require("./Breadcrumb");
|
|
24
24
|
Object.defineProperty(exports, "BreadcrumbItem", { enumerable: true, get: function () { return Breadcrumb_1.BreadcrumbItem; } });
|
|
25
25
|
Object.defineProperty(exports, "BreadcrumbList", { enumerable: true, get: function () { return Breadcrumb_1.BreadcrumbList; } });
|
|
@@ -27,6 +27,8 @@ var Button_1 = require("./Button");
|
|
|
27
27
|
Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
|
|
28
28
|
var ButtonGroup_1 = require("./ButtonGroup");
|
|
29
29
|
Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return ButtonGroup_1.ButtonGroup; } });
|
|
30
|
+
var Dialog_1 = require("./Dialog");
|
|
31
|
+
Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return Dialog_1.Dialog; } });
|
|
30
32
|
var Form = __importStar(require("./Form"));
|
|
31
33
|
exports.Form = Form;
|
|
32
34
|
var Icon = __importStar(require("./Icon"));
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8D;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8D;AAa5D,+FAbO,2BAAc,OAaP;AACd,+FAduB,2BAAc,OAcvB;AAbhB,mCAAkC;AAchC,uFAdO,eAAM,OAcP;AAbR,6CAA4C;AAc1C,4FAdO,yBAAW,OAcP;AAbb,mCAAkC;AAchC,uFAdO,eAAM,OAcP;AAbR,2CAA+B;AAc7B,oBAAI;AAbN,2CAA+B;AAe7B,oBAAI;AAdN,+CAA8C;AAa5C,6FAbO,2BAAY,OAaP;AAZd,2CAA0C;AAcxC,2FAdO,uBAAU,OAcP;AAbZ,2CAA0C;AAcxC,2FAdO,uBAAU,OAcP;AAbZ,iCAAgC;AAc9B,sFAdO,aAAK,OAcP"}
|
package/index.mjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { BreadcrumbItem, BreadcrumbList } from './Breadcrumb';
|
|
2
2
|
import { Button } from './Button';
|
|
3
3
|
import { ButtonGroup } from './ButtonGroup';
|
|
4
|
+
import { Dialog } from './Dialog';
|
|
4
5
|
import * as Form from './Form';
|
|
5
6
|
import * as Icon from './Icon';
|
|
6
7
|
import { HeroCarousel } from './HeroCarousel';
|
|
@@ -8,4 +9,4 @@ import { IconButton } from './IconButton';
|
|
|
8
9
|
import { LinkButton } from './LinkButton';
|
|
9
10
|
import { Toast } from './Toast';
|
|
10
11
|
// Components are currently exported after "import" for projects using TS lower v3.8 that does not support "export * as".
|
|
11
|
-
export { BreadcrumbItem, BreadcrumbList, Button, ButtonGroup, Form, HeroCarousel, Icon, IconButton, LinkButton, Toast, };
|
|
12
|
+
export { BreadcrumbItem, BreadcrumbList, Button, ButtonGroup, Dialog, Form, HeroCarousel, Icon, IconButton, LinkButton, Toast, };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openameba/spindle-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.36.0",
|
|
4
4
|
"main": "./index.js",
|
|
5
5
|
"module": "./index.mjs",
|
|
6
6
|
"types": "./index.d.ts",
|
|
@@ -65,6 +65,7 @@
|
|
|
65
65
|
"babel-loader": "^8.1.0",
|
|
66
66
|
"bundlesize": "^0.18.0",
|
|
67
67
|
"cssnano": "^4.1.10",
|
|
68
|
+
"dialog-polyfill": "^0.5.6",
|
|
68
69
|
"firebase-tools": "^10.0.0",
|
|
69
70
|
"jest": "^27.0.0",
|
|
70
71
|
"postcss-cli": "^8.0.0",
|
|
@@ -80,5 +81,5 @@
|
|
|
80
81
|
"stylelint-selector-bem-pattern": "^2.1.0",
|
|
81
82
|
"ts-jest": "^27.0.0"
|
|
82
83
|
},
|
|
83
|
-
"gitHead": "
|
|
84
|
+
"gitHead": "c143674b04fb15bee8646827b0214b7f3a151b97"
|
|
84
85
|
}
|