@openameba/spindle-ui 2.7.0 → 2.9.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/CHANGELOG.md +21 -0
- package/Modal/AppealModal.css +2 -2
- package/Modal/AppealModal.d.ts.map +1 -1
- package/Modal/AppealModal.js +9 -32
- package/Modal/AppealModal.js.map +1 -1
- package/Modal/AppealModal.mjs +9 -30
- package/Modal/SemiModal.css +1 -1
- package/Modal/SemiModal.d.ts.map +1 -1
- package/Modal/SemiModal.js +9 -32
- package/Modal/SemiModal.js.map +1 -1
- package/Modal/SemiModal.mjs +9 -30
- package/Modal/index.css +2 -2
- package/Rating/Rating.css +1 -0
- package/Rating/Rating.d.ts +11 -0
- package/Rating/Rating.d.ts.map +1 -0
- package/Rating/Rating.js +60 -0
- package/Rating/Rating.js.map +1 -0
- package/Rating/Rating.mjs +30 -0
- package/Rating/StarBack.d.ts +6 -0
- package/Rating/StarBack.d.ts.map +1 -0
- package/Rating/StarBack.js +25 -0
- package/Rating/StarBack.js.map +1 -0
- package/Rating/StarBack.mjs +6 -0
- package/Rating/StarFront.d.ts +6 -0
- package/Rating/StarFront.d.ts.map +1 -0
- package/Rating/StarFront.js +26 -0
- package/Rating/StarFront.js.map +1 -0
- package/Rating/StarFront.mjs +7 -0
- package/Rating/index.d.ts +2 -0
- package/Rating/index.d.ts.map +1 -0
- package/Rating/index.js +6 -0
- package/Rating/index.js.map +1 -0
- package/Rating/index.mjs +1 -0
- package/index.css +2 -2
- package/index.d.ts +1 -0
- package/index.d.ts.map +1 -1
- package/index.js +3 -1
- package/index.js.map +1 -1
- package/index.mjs +1 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,27 @@
|
|
|
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
|
+
# [2.9.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@2.8.0...@openameba/spindle-ui@2.9.0) (2025-09-29)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- description ([95187fe](https://github.com/openameba/spindle/commit/95187feed9e502bdd0c7dec367a60623f8ff5c15))
|
|
11
|
+
- rating compoent style ([8bcd164](https://github.com/openameba/spindle/commit/8bcd16426752ffa7a60491f2c02e401931f62a9b))
|
|
12
|
+
- rating docs ([d69fbac](https://github.com/openameba/spindle/commit/d69fbac553c1bbe1a7eb0a359a9350a6c4756b0e))
|
|
13
|
+
|
|
14
|
+
### Features
|
|
15
|
+
|
|
16
|
+
- **spindle-ui:** add rating component ([3546053](https://github.com/openameba/spindle/commit/35460534bd155679ecc5edde67cfea49cfcbd0a8))
|
|
17
|
+
- **spindle-ui:** ratingコンポーネントの指摘事項対応 ([f94386d](https://github.com/openameba/spindle/commit/f94386da69eead2dd17911b1c8490dad1593fbdd))
|
|
18
|
+
- **spindle-ui:** ratingコンポーネントを修正 ([4f892f6](https://github.com/openameba/spindle/commit/4f892f6d9ac05ea06e940ac5ed92ef6950628425))
|
|
19
|
+
|
|
20
|
+
# [2.8.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@2.7.0...@openameba/spindle-ui@2.8.0) (2025-09-22)
|
|
21
|
+
|
|
22
|
+
### Features
|
|
23
|
+
|
|
24
|
+
- **spindle-ui:** migrate AppealModal to allow-discrete transitions ([f540486](https://github.com/openameba/spindle/commit/f540486374ceff52b3b188d4f1f38121ead39c82))
|
|
25
|
+
- **spindle-ui:** migrate SemiModal to allow-discrete transitions ([64b6eee](https://github.com/openameba/spindle/commit/64b6eee06bb6371dc2f5e3b8340697b540fa0c72))
|
|
26
|
+
|
|
6
27
|
# [2.7.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@2.6.3...@openameba/spindle-ui@2.7.0) (2025-09-19)
|
|
7
28
|
|
|
8
29
|
### Features
|
package/Modal/AppealModal.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.spui-ButtonGroup{display:flex}.spui-ButtonGroup--row{flex-direction:row}.spui-ButtonGroup--column{flex-direction:column}.spui-ButtonGroup--large{gap:16px}.spui-ButtonGroup--medium,.spui-ButtonGroup--small{gap:12px}.spui-ButtonGroup--large.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:4px}.spui-ButtonGroup--medium.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:2px}: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(
|
|
2
2
|
--color-surface-accent-primary-light
|
|
3
|
-
);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--SubtleButton-tapHighlightColor:var(--white-60-alpha);--SubtleButton-onFocus-outlineColor:var(--color-focus-clarity);--SubtleButton-color:var(--color-text-medium-emphasis)}.spui-SubtleButton{background:none;border:none;border-radius:4px;color:var(--SubtleButton-color);font-family:inherit;font-weight:700;line-height:1.3;margin:0;padding:0;-webkit-tap-highlight-color:var(--SubtleButton-tapHighlightColor);text-align:center}.spui-SubtleButton:disabled{opacity:.3}.spui-SubtleButton:focus{outline:2px solid var(--SubtleButton-onFocus-outlineColor);outline-offset:1px}.spui-SubtleButton:focus:not(:focus-visible){outline:none}@media (hover:hover){.spui-SubtleButton:not([disabled]):hover{text-decoration:underline}}.spui-SubtleButton--large,.spui-SubtleButton--medium{font-size:.875em}.spui-SubtleButton--small{font-size:.8125em}:root{--AppealModal-image-border:1px inset var(--color-border-low-emphasis);--AppealModal-image-borderRadius:8px}.spui-AppealModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);padding:0;
|
|
3
|
+
);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--SubtleButton-tapHighlightColor:var(--white-60-alpha);--SubtleButton-onFocus-outlineColor:var(--color-focus-clarity);--SubtleButton-color:var(--color-text-medium-emphasis)}.spui-SubtleButton{background:none;border:none;border-radius:4px;color:var(--SubtleButton-color);font-family:inherit;font-weight:700;line-height:1.3;margin:0;padding:0;-webkit-tap-highlight-color:var(--SubtleButton-tapHighlightColor);text-align:center}.spui-SubtleButton:disabled{opacity:.3}.spui-SubtleButton:focus{outline:2px solid var(--SubtleButton-onFocus-outlineColor);outline-offset:1px}.spui-SubtleButton:focus:not(:focus-visible){outline:none}@media (hover:hover){.spui-SubtleButton:not([disabled]):hover{text-decoration:underline}}.spui-SubtleButton--large,.spui-SubtleButton--medium{font-size:.875em}.spui-SubtleButton--small{font-size:.8125em}:root{--AppealModal-image-border:1px inset var(--color-border-low-emphasis);--AppealModal-image-borderRadius:8px}.spui-AppealModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);opacity:0;padding:0;transition:opacity .5s cubic-bezier(0,0,0,1),display allow-discrete .5s,overlay allow-discrete .5s;width:400px}.spui-AppealModal--styleOnly,.spui-AppealModal[open],.spui-AppealModal[open]::backdrop{opacity:1}.spui-AppealModal::backdrop{background:rgba(0,0,0,.6);opacity:0;transition:opacity .5s cubic-bezier(0,0,0,1),display allow-discrete .5s,overlay allow-discrete .5s}@starting-style{.spui-AppealModal[open]{opacity:0}.spui-AppealModal[open]::backdrop{opacity:0}}@media (prefers-reduced-motion:reduce){.spui-AppealModal,.spui-AppealModal::backdrop{transition-duration:.01s}}html:has(.spui-AppealModal[open]){overflow:hidden}@media screen and (max-width:440px){.spui-AppealModal{width:calc(100% - 48px)}}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-AppealModal-frame{color:var(--color-text-medium-emphasis);display:grid;gap:0;grid-auto-flow:row;grid-template:"Image" "Title" "Body" "ButtonGroup" "CloseButton"/1fr;padding:0 0 24px;width:100%}.spui-AppealModal-image{grid-area:Image}.spui-AppealModal-image img{border-radius:20px 20px 0 0}.spui-AppealModal-title{color:var(--color-text-high-emphasis);font-size:1.125em;font-weight:700;grid-area:Title;line-height:1.4;margin:24px 24px 0;padding:0;text-align:center}.spui-AppealModal-body{color:var(--color-text-medium-emphasis);font-size:.875em;grid-area:Body;line-height:1.6;margin:8px 24px 0;overflow-wrap:break-word;text-align:center}.spui-AppealModal-buttonGroup{align-items:center;grid-area:ButtonGroup;justify-content:center;margin:16px 24px 0;text-align:center}.spui-AppealModal-closeIconButton,.spui-AppealModal-closeTextButton{grid-area:CloseButton}.spui-AppealModal-closeIconButton{display:none}.spui-AppealModal-closeTextButton{margin:20px 24px 0;text-align:center}.spui-AppealModal-buttonGroup :is(.spui-Button,.spui-LinkButton){max-width:240px}@media screen and (min-width:768px){.spui-AppealModal{min-height:300px;min-width:500px}.spui-AppealModal--large{width:1024px}.spui-AppealModal--medium{width:840px}.spui-AppealModal--small{width:480px}.spui-AppealModal-frame{grid-auto-flow:row;grid-template:"Title CloseButton" "Body CloseButton" "Image Image" "ButtonGroup ButtonGroup"/1fr 72px;padding:0 0 36px}.spui-AppealModal-title{margin:32px 16px 0 36px;text-align:left}.spui-AppealModal-body{margin:12px 16px 0 36px;text-align:left}.spui-AppealModal-image{margin:32px 36px 0}.spui-AppealModal-image img{border:var(--AppealModal-image-border);border-radius:var(--AppealModal-image-borderRadius);box-sizing:border-box}.spui-AppealModal-buttonGroup{margin:16px 36px 0}.spui-AppealModal-closeIconButton{--IconButton--neutral-backgroundColor:transparent;--IconButton--neutral-onHover-backgroundColor:var(
|
|
4
4
|
--color-surface-tertiary
|
|
5
|
-
);display:inline-flex;margin:36px 0 0}.spui-AppealModal-closeTextButton{display:none}}
|
|
5
|
+
);display:inline-flex;margin:36px 0 0}.spui-AppealModal-closeTextButton{display:none}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppealModal.d.ts","sourceRoot":"","sources":["../../src/Modal/AppealModal.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"AppealModal.d.ts","sourceRoot":"","sources":["../../src/Modal/AppealModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAO7D,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC,UAAU,gBAAiB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AAmJD,eAAO,MAAM,WAAW;;wDAlErB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;QAAE,IAAI,CAAC,EAAE,IAAI,CAAA;KAAE;mCA6BV,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;mCAQzB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;kCAQ5B,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;;;;;CA4B7D,CAAC"}
|
package/Modal/AppealModal.js
CHANGED
|
@@ -66,10 +66,8 @@ var CrossBold_1 = __importDefault(require("../Icon/CrossBold"));
|
|
|
66
66
|
var IconButton_1 = require("../IconButton");
|
|
67
67
|
var SubtleButton_1 = require("../SubtleButton");
|
|
68
68
|
var BLOCK_NAME = 'spui-AppealModal';
|
|
69
|
-
var FADE_OUT_ANIMATION = 'spui-AppealModal-fade-out';
|
|
70
69
|
var Frame = (0, react_1.forwardRef)(function AppealModal(_a, ref) {
|
|
71
70
|
var children = _a.children, className = _a.className, open = _a.open, _b = _a.size, size = _b === void 0 ? 'large' : _b, onClose = _a.onClose, rest = __rest(_a, ["children", "className", "open", "size", "onClose"]);
|
|
72
|
-
var _c = (0, react_1.useState)(false), closing = _c[0], setClosing = _c[1];
|
|
73
71
|
var dialogEl = (0, react_1.useRef)(null);
|
|
74
72
|
var handleFormSubmit = function (event) {
|
|
75
73
|
event.preventDefault(); // To be closed with the open prop
|
|
@@ -85,48 +83,22 @@ var Frame = (0, react_1.forwardRef)(function AppealModal(_a, ref) {
|
|
|
85
83
|
// Detect escape key type
|
|
86
84
|
if (event.target === dialogEl.current) {
|
|
87
85
|
onClose && onClose(event);
|
|
88
|
-
setClosing(false);
|
|
89
86
|
}
|
|
90
87
|
};
|
|
91
|
-
var handleAnimationEnd = (0, react_1.useCallback)(function (event) {
|
|
92
|
-
if (dialogEl.current &&
|
|
93
|
-
event.animationName === FADE_OUT_ANIMATION &&
|
|
94
|
-
!event.pseudoElement // To exclude ::backdrop
|
|
95
|
-
) {
|
|
96
|
-
dialogEl.current.close && dialogEl.current.close();
|
|
97
|
-
}
|
|
98
|
-
}, [dialogEl]);
|
|
99
|
-
(0, react_1.useEffect)(function () {
|
|
100
|
-
var dialog = dialogEl.current;
|
|
101
|
-
dialog === null || dialog === void 0 ? void 0 : dialog.addEventListener('animationend', handleAnimationEnd, false);
|
|
102
|
-
return function () {
|
|
103
|
-
return dialog === null || dialog === void 0 ? void 0 : dialog.removeEventListener('animationend', handleAnimationEnd, false);
|
|
104
|
-
};
|
|
105
|
-
}, [dialogEl, handleAnimationEnd]);
|
|
106
88
|
(0, react_1.useEffect)(function () {
|
|
107
|
-
var _a;
|
|
89
|
+
var _a, _b;
|
|
108
90
|
var dialog = dialogEl.current;
|
|
109
91
|
if (!dialog) {
|
|
110
92
|
return;
|
|
111
93
|
}
|
|
112
|
-
// Remove this when browsers support :has() pseudo-class
|
|
113
|
-
var classNameToStopScrollBehindDialog = "".concat(BLOCK_NAME, "--open");
|
|
114
94
|
if (open) {
|
|
115
95
|
!dialog.open && ((_a = dialog.showModal) === null || _a === void 0 ? void 0 : _a.call(dialog));
|
|
116
|
-
document.documentElement.classList.add(classNameToStopScrollBehindDialog);
|
|
117
96
|
}
|
|
118
97
|
else {
|
|
119
|
-
(dialog === null || dialog === void 0 ? void 0 : dialog.
|
|
120
|
-
// Always remove this class to avoid unexpected scroll stopping
|
|
121
|
-
document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
|
|
98
|
+
(_b = dialog === null || dialog === void 0 ? void 0 : dialog.close) === null || _b === void 0 ? void 0 : _b.call(dialog);
|
|
122
99
|
}
|
|
123
100
|
}, [open, dialogEl]);
|
|
124
|
-
return (react_1.default.createElement("dialog", __assign({ className: [
|
|
125
|
-
BLOCK_NAME,
|
|
126
|
-
"".concat(BLOCK_NAME, "--").concat(size),
|
|
127
|
-
closing && "".concat(BLOCK_NAME, "--closing"),
|
|
128
|
-
className,
|
|
129
|
-
]
|
|
101
|
+
return (react_1.default.createElement("dialog", __assign({ className: [BLOCK_NAME, "".concat(BLOCK_NAME, "--").concat(size), className]
|
|
130
102
|
.filter(Boolean)
|
|
131
103
|
.join(' ')
|
|
132
104
|
.trim(), ref: (0, use_callback_ref_1.useMergeRefs)([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose }, rest),
|
|
@@ -140,7 +112,12 @@ var Frame = (0, react_1.forwardRef)(function AppealModal(_a, ref) {
|
|
|
140
112
|
});
|
|
141
113
|
var StyleOnly = function (_a) {
|
|
142
114
|
var className = _a.className, children = _a.children, _b = _a.size, size = _b === void 0 ? 'large' : _b, rest = __rest(_a, ["className", "children", "size"]);
|
|
143
|
-
return (react_1.default.createElement("div", __assign({ className: [
|
|
115
|
+
return (react_1.default.createElement("div", __assign({ className: [
|
|
116
|
+
BLOCK_NAME,
|
|
117
|
+
"".concat(BLOCK_NAME, "--styleOnly"),
|
|
118
|
+
"".concat(BLOCK_NAME, "--").concat(size),
|
|
119
|
+
className,
|
|
120
|
+
]
|
|
144
121
|
.filter(Boolean)
|
|
145
122
|
.join(' ')
|
|
146
123
|
.trim() }, rest),
|
package/Modal/AppealModal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppealModal.js","sourceRoot":"","sources":["../../src/Modal/AppealModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"AppealModal.js","sourceRoot":"","sources":["../../src/Modal/AppealModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA6D;AAC7D,qDAAgD;AAChD,8CAAsD;AACtD,gEAA0C;AAC1C,4CAA2C;AAC3C,gDAA+C;AAW/C,IAAM,UAAU,GAAG,kBAAkB,CAAC;AAEtC,IAAM,KAAK,GAAG,IAAA,kBAAU,EACtB,SAAS,WAAW,CAClB,EAA+D,EAC/D,GAAG;IADD,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA,EAAE,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EAAE,OAAO,aAAA,EAAK,IAAI,cAA7D,oDAA+D,CAAF;IAG7D,IAAM,QAAQ,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAEjD,IAAM,gBAAgB,GAAG,UAAC,KAAuC;QAC/D,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,kCAAkC;QAC1D,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,IAAM,iBAAiB,GAAG,UAAC,KAA0C;QACnE,wBAAwB;QACxB,IAAI,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC,OAAO,EAAE,CAAC;YACtC,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,CAAC;IAEF,IAAM,iBAAiB,GAAG,UACxB,KAA8C;QAE9C,yBAAyB;QACzB,IAAI,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC,OAAO,EAAE,CAAC;YACtC,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC;;QACR,IAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC;QAChC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO;QACT,CAAC;QAED,IAAI,IAAI,EAAE,CAAC;YACT,CAAC,MAAM,CAAC,IAAI,KAAI,MAAA,MAAM,CAAC,SAAS,sDAAI,CAAA,CAAC;QACvC,CAAC;aAAM,CAAC;YACN,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,sDAAI,CAAC;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,mDACE,SAAS,EAAE,CAAC,UAAU,EAAE,UAAG,UAAU,eAAK,IAAI,CAAE,EAAE,SAAS,CAAC;aACzD,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC;aACT,IAAI,EAAE,EACT,GAAG,EAAE,IAAA,+BAAY,EAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,EAClC,OAAO,EAAE,iBAAiB,EAC1B,OAAO,EAAE,iBAAiB,IACtB,IAAI;QAER,wCACE,SAAS,EAAE,UAAG,UAAU,WAAQ,EAChC,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAE,gBAAgB;YAE1B,uCAAK,SAAS,EAAE,UAAG,UAAU,qBAAkB;gBAC7C,8BAAC,uBAAU,kBAAY,oBAAK,EAAC,OAAO,EAAC,SAAS;oBAC5C,8BAAC,mBAAS,mBAAa,MAAM,GAAG,CACrB,CACT;YACL,QAAQ;YACT,uCAAK,SAAS,EAAE,UAAG,UAAU,qBAAkB;gBAC7C,8BAAC,2BAAY,6BAAmB,CAC5B,CACD,CACA,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAM,SAAS,GAAG,UAAC,EAK6B;IAJ9C,IAAA,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EACX,IAAI,cAJU,iCAKlB,CADQ;IAEP,OAAO,CACL,gDACE,SAAS,EAAE;YACT,UAAU;YACV,UAAG,UAAU,gBAAa;YAC1B,UAAG,UAAU,eAAK,IAAI,CAAE;YACxB,SAAS;SACV;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC;aACT,IAAI,EAAE,IACL,IAAI;QAER,uCAAK,SAAS,EAAE,UAAG,UAAU,WAAQ;YACnC,uCAAK,SAAS,EAAE,UAAG,UAAU,qBAAkB;gBAC7C,8BAAC,uBAAU,kBAAY,oBAAK,EAAC,OAAO,EAAC,SAAS;oBAC5C,8BAAC,mBAAS,mBAAa,MAAM,GAAG,CACrB,CACT;YACL,QAAQ;YACT,uCAAK,SAAS,EAAE,UAAG,UAAU,qBAAkB;gBAC7C,8BAAC,2BAAY,6BAAmB,CAC5B,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,KAAK,GAAG,UAAC,EAAgD;IAA9C,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAnB,YAAqB,CAAF;IAChC,OAAO,CACL,8CAAG,SAAS,EAAE,UAAG,UAAU,WAAQ,IAAM,IAAI,GAC1C,QAAQ,CACP,CACL,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,KAAK,GAAG,UAAC,EAAkD;IAAhD,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAnB,YAAqB,CAAF;IAChC,OAAO,CACL,gDAAK,SAAS,EAAE,UAAG,UAAU,WAAQ,IAAM,IAAI,GAC5C,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,IAAI,GAAG,UAAC,EAAgD;IAA9C,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAnB,YAAqB,CAAF;IAC/B,OAAO,CACL,8CAAG,SAAS,EAAE,UAAG,UAAU,UAAO,IAAM,IAAI,GACzC,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,aACJ,SAAS,EAAE,UAAG,UAAU,iBAAc,EACtC,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,QAAQ,IACd,IAAI,GAEP,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CAAC;AAEW,QAAA,WAAW,GAAG;IACzB,KAAK,OAAA;IACL,SAAS,WAAA;IACT,KAAK,OAAA;IACL,KAAK,OAAA;IACL,IAAI,MAAA;IACJ,WAAW,aAAA;CACZ,CAAC"}
|
package/Modal/AppealModal.mjs
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
|
-
import React, { forwardRef,
|
|
1
|
+
import React, { forwardRef, useEffect, useRef } from 'react';
|
|
2
2
|
import { useMergeRefs } from 'use-callback-ref';
|
|
3
3
|
import { ButtonGroup as Group } from "../ButtonGroup/index.mjs";
|
|
4
4
|
import CrossBold from "../Icon/CrossBold.mjs";
|
|
5
5
|
import { IconButton } from "../IconButton/index.mjs";
|
|
6
6
|
import { SubtleButton } from "../SubtleButton/index.mjs";
|
|
7
7
|
const BLOCK_NAME = 'spui-AppealModal';
|
|
8
|
-
const FADE_OUT_ANIMATION = 'spui-AppealModal-fade-out';
|
|
9
8
|
const Frame = forwardRef(function AppealModal({ children, className, open, size = 'large', onClose, ...rest }, ref) {
|
|
10
|
-
const [closing, setClosing] = useState(false);
|
|
11
9
|
const dialogEl = useRef(null);
|
|
12
10
|
const handleFormSubmit = (event) => {
|
|
13
11
|
event.preventDefault(); // To be closed with the open prop
|
|
@@ -23,45 +21,21 @@ const Frame = forwardRef(function AppealModal({ children, className, open, size
|
|
|
23
21
|
// Detect escape key type
|
|
24
22
|
if (event.target === dialogEl.current) {
|
|
25
23
|
onClose && onClose(event);
|
|
26
|
-
setClosing(false);
|
|
27
24
|
}
|
|
28
25
|
};
|
|
29
|
-
const handleAnimationEnd = useCallback((event) => {
|
|
30
|
-
if (dialogEl.current &&
|
|
31
|
-
event.animationName === FADE_OUT_ANIMATION &&
|
|
32
|
-
!event.pseudoElement // To exclude ::backdrop
|
|
33
|
-
) {
|
|
34
|
-
dialogEl.current.close && dialogEl.current.close();
|
|
35
|
-
}
|
|
36
|
-
}, [dialogEl]);
|
|
37
|
-
useEffect(() => {
|
|
38
|
-
const dialog = dialogEl.current;
|
|
39
|
-
dialog?.addEventListener('animationend', handleAnimationEnd, false);
|
|
40
|
-
return () => dialog?.removeEventListener('animationend', handleAnimationEnd, false);
|
|
41
|
-
}, [dialogEl, handleAnimationEnd]);
|
|
42
26
|
useEffect(() => {
|
|
43
27
|
const dialog = dialogEl.current;
|
|
44
28
|
if (!dialog) {
|
|
45
29
|
return;
|
|
46
30
|
}
|
|
47
|
-
// Remove this when browsers support :has() pseudo-class
|
|
48
|
-
const classNameToStopScrollBehindDialog = `${BLOCK_NAME}--open`;
|
|
49
31
|
if (open) {
|
|
50
32
|
!dialog.open && dialog.showModal?.();
|
|
51
|
-
document.documentElement.classList.add(classNameToStopScrollBehindDialog);
|
|
52
33
|
}
|
|
53
34
|
else {
|
|
54
|
-
dialog?.
|
|
55
|
-
// Always remove this class to avoid unexpected scroll stopping
|
|
56
|
-
document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
|
|
35
|
+
dialog?.close?.();
|
|
57
36
|
}
|
|
58
37
|
}, [open, dialogEl]);
|
|
59
|
-
return (React.createElement("dialog", { className: [
|
|
60
|
-
BLOCK_NAME,
|
|
61
|
-
`${BLOCK_NAME}--${size}`,
|
|
62
|
-
closing && `${BLOCK_NAME}--closing`,
|
|
63
|
-
className,
|
|
64
|
-
]
|
|
38
|
+
return (React.createElement("dialog", { className: [BLOCK_NAME, `${BLOCK_NAME}--${size}`, className]
|
|
65
39
|
.filter(Boolean)
|
|
66
40
|
.join(' ')
|
|
67
41
|
.trim(), ref: useMergeRefs([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose, ...rest },
|
|
@@ -74,7 +48,12 @@ const Frame = forwardRef(function AppealModal({ children, className, open, size
|
|
|
74
48
|
React.createElement(SubtleButton, null, "\u3068\u3058\u308B")))));
|
|
75
49
|
});
|
|
76
50
|
const StyleOnly = ({ className, children, size = 'large', ...rest }) => {
|
|
77
|
-
return (React.createElement("div", { className: [
|
|
51
|
+
return (React.createElement("div", { className: [
|
|
52
|
+
BLOCK_NAME,
|
|
53
|
+
`${BLOCK_NAME}--styleOnly`,
|
|
54
|
+
`${BLOCK_NAME}--${size}`,
|
|
55
|
+
className,
|
|
56
|
+
]
|
|
78
57
|
.filter(Boolean)
|
|
79
58
|
.join(' ')
|
|
80
59
|
.trim(), ...rest },
|
package/Modal/SemiModal.css
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
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(
|
|
2
2
|
--color-surface-accent-primary-light
|
|
3
|
-
);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--SemiModal-footer-justifyContent:right;--SemiModal-footer-button-minWidth:160px;--SemiModal-sp-footer-justifyContent:center}.spui-SemiModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);height:-moz-fit-content;height:fit-content;padding:0;position:fixed;width:-moz-fit-content;width:fit-content}.spui-SemiModal[data-type=sheet]{border-radius:20px 20px 0 0;bottom:0;margin:auto auto 0;transform:translateY(100%);
|
|
3
|
+
);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--SemiModal-footer-justifyContent:right;--SemiModal-footer-button-minWidth:160px;--SemiModal-sp-footer-justifyContent:center}.spui-SemiModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);height:-moz-fit-content;height:fit-content;opacity:0;padding:0;position:fixed;transition:opacity .35s cubic-bezier(0,0,0,1),display allow-discrete .35s,overlay allow-discrete .35s;width:-moz-fit-content;width:fit-content}.spui-SemiModal[data-type=sheet]{border-radius:20px 20px 0 0;bottom:0;margin:auto auto 0;transform:translateY(100%);transition:opacity .35s cubic-bezier(0,0,0,1),transform .35s cubic-bezier(0,0,0,1),display allow-discrete .35s,overlay allow-discrete .35s;will-change:translate}.spui-SemiModal--styleOnly,.spui-SemiModal[open],.spui-SemiModal[open]::backdrop{opacity:1}.spui-SemiModal::backdrop{background:rgba(0,0,0,.6);opacity:0;transition:opacity .35s cubic-bezier(0,0,0,1),display allow-discrete .35s,overlay allow-discrete .35s}.spui-SemiModal[data-type=sheet][open]{transform:translateY(0)}@starting-style{.spui-SemiModal[open]{opacity:0}.spui-SemiModal[open]::backdrop{opacity:0}.spui-SemiModal[data-type=sheet][open]{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.spui-SemiModal,.spui-SemiModal::backdrop{transition-duration:.01s}}html:has(.spui-SemiModal[open]){overflow:hidden}@media screen and (max-width:440px){.spui-SemiModal{width:calc(100% - 40px)}}.spui-SemiModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 2px var(--color-focus-clarity);outline:none}.spui-SemiModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-SemiModal-frame{box-sizing:border-box;color:var(--color-text-medium-emphasis);display:flex;flex-direction:column;padding:0 16px 36px 36px}.spui-SemiModal-header{align-items:center;display:grid;gap:16px;grid-template-columns:1fr auto;justify-content:space-between;overflow-wrap:break-word;padding:32px 8px 32px 0}.spui-SemiModal-closeIconButton{height:48px;width:48px;--IconButton--neutral-backgroundColor:transparent;--IconButton--neutral-onHover-backgroundColor:var(--color-surface-tertiary)}.spui-SemiModal-headerTitle{-webkit-box-orient:vertical;color:var(--color-text-high-emphasis);display:-webkit-box;font-size:1.25em;font-weight:600;height:-moz-fit-content;height:fit-content;-webkit-line-clamp:3;line-height:1.4;margin:0;overflow:hidden;width:100%}.spui-SemiModal-contents{line-height:1.6;overflow:hidden scroll}.spui-SemiModal-contents::-webkit-scrollbar{border-radius:4px;width:8px}.spui-SemiModal-contents::-webkit-scrollbar-thumb{background:var(--color-object-low-emphasis);border-radius:4px}.spui-SemiModal-contents::-webkit-scrollbar-track:enabled{background-color:var(--color-surface-secondary);border-radius:4px}.spui-SemiModal-footer{background-color:var(--color-surface-primary);bottom:0;display:flex;padding:24px 20px 0 0}.spui-SemiModal-footer:empty{padding:0 0 36px}@media screen and (min-width:768px){.spui-SemiModal[data-type=popup][data-size=small] .spui-SemiModal-frame{max-height:400px;max-width:480px}.spui-SemiModal[data-type=popup][data-size=medium] .spui-SemiModal-frame{max-height:700px;max-width:840px}.spui-SemiModal[data-type=popup][data-size=large] .spui-SemiModal-frame{max-height:840px;max-width:1024px}.spui-SemiModal[data-type=sheet] .spui-SemiModal-frame{max-height:calc(100dvh - 200px)}.spui-SemiModal[data-type=sheet][data-size=small] .spui-SemiModal-frame{max-width:480px}.spui-SemiModal[data-type=sheet][data-size=medium] .spui-SemiModal-frame{max-width:840px}.spui-SemiModal[data-type=sheet][data-size=large] .spui-SemiModal-frame{max-width:1024px}.spui-SemiModal-footer{justify-content:var(--SemiModal-footer-justifyContent)}.spui-SemiModal-footer :is(.spui-Button,.spui-LinkButton){min-width:var(--SemiModal-footer-button-minWidth)}}@media screen and (max-width:768px){.spui-SemiModal[data-type=sheet]{margin:auto 0 0;max-width:100%;width:100%}.spui-SemiModal[data-type=popup] .spui-SemiModal-frame,.spui-SemiModal[data-type=sheet] .spui-SemiModal-frame{max-height:calc(100dvh - 40px)}.spui-SemiModal[data-type=popup]{margin:auto 20px}.spui-SemiModal-contents{max-height:100%}.spui-SemiModal-header{padding:24px 0}.spui-SemiModal-closeIconButton{height:24px;width:24px;--IconButton--neutral-onHover-backgroundColor:transparent}.spui-SemiModal-frame{padding:0 20px 24px}.spui-SemiModal-footer{justify-content:var(--SemiModal-sp-footer-justifyContent);padding:16px 0 0}.spui-SemiModal-footer :is(.spui-Button,.spui-LinkButton){max-width:360px;width:100%}}
|
package/Modal/SemiModal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SemiModal.d.ts","sourceRoot":"","sources":["../../src/Modal/SemiModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"SemiModal.d.ts","sourceRoot":"","sources":["../../src/Modal/SemiModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAqB,MAAM,OAAO,CAAC;AAKxE,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACzC,KAAK,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC;AAE9B,UAAU,cACR,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AA8ID,eAAO,MAAM,SAAS;;oCAvEnB,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE;yCAiBf,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;sCAWlE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE;oCAQjB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;8DAc/D,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;QAAE,IAAI,CAAC,EAAE,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,IAAI,CAAA;KAAE;CA4B5D,CAAC"}
|
package/Modal/SemiModal.js
CHANGED
|
@@ -64,13 +64,8 @@ var use_callback_ref_1 = require("use-callback-ref");
|
|
|
64
64
|
var CrossBold_1 = __importDefault(require("../Icon/CrossBold"));
|
|
65
65
|
var IconButton_1 = require("../IconButton");
|
|
66
66
|
var BLOCK_NAME = 'spui-SemiModal';
|
|
67
|
-
var ANIMATION_NAME_LIST = [
|
|
68
|
-
"".concat(BLOCK_NAME, "-fade-out"),
|
|
69
|
-
"".concat(BLOCK_NAME, "-slide-out"),
|
|
70
|
-
];
|
|
71
67
|
var Frame = (0, react_1.forwardRef)(function SemiModal(_a, ref) {
|
|
72
68
|
var children = _a.children, open = _a.open, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.type, type = _c === void 0 ? 'popup' : _c, onClose = _a.onClose, rest = __rest(_a, ["children", "open", "size", "type", "onClose"]);
|
|
73
|
-
var _d = (0, react_1.useState)(false), closing = _d[0], setClosing = _d[1];
|
|
74
69
|
var dialogEl = (0, react_1.useRef)(null);
|
|
75
70
|
// 閉じるアイコンを押した時
|
|
76
71
|
var handleFormSubmit = function (event) {
|
|
@@ -89,44 +84,21 @@ var Frame = (0, react_1.forwardRef)(function SemiModal(_a, ref) {
|
|
|
89
84
|
// Detect escape key type
|
|
90
85
|
if (event.target === dialogEl.current) {
|
|
91
86
|
onClose === null || onClose === void 0 ? void 0 : onClose(event);
|
|
92
|
-
setClosing(false);
|
|
93
87
|
}
|
|
94
88
|
};
|
|
95
|
-
// modalアニメーション終了時
|
|
96
|
-
var handleAnimationEnd = (0, react_1.useCallback)(function (event) {
|
|
97
|
-
var _a, _b;
|
|
98
|
-
if (dialogEl.current &&
|
|
99
|
-
ANIMATION_NAME_LIST.includes(event.animationName) &&
|
|
100
|
-
!event.pseudoElement // To exclude ::backdrop
|
|
101
|
-
) {
|
|
102
|
-
(_b = (_a = dialogEl.current) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
103
|
-
}
|
|
104
|
-
}, [dialogEl]);
|
|
105
|
-
(0, react_1.useEffect)(function () {
|
|
106
|
-
var _a;
|
|
107
|
-
(_a = dialogEl.current) === null || _a === void 0 ? void 0 : _a.addEventListener('animationend', handleAnimationEnd, false);
|
|
108
|
-
}, [handleAnimationEnd]);
|
|
109
89
|
(0, react_1.useEffect)(function () {
|
|
110
|
-
var _a, _b, _c;
|
|
90
|
+
var _a, _b, _c, _d;
|
|
111
91
|
if (!dialogEl.current) {
|
|
112
92
|
return;
|
|
113
93
|
}
|
|
114
|
-
// Remove this when browsers support :has() pseudo-class
|
|
115
|
-
var classNameToStopScrollBehindDialog = "".concat(BLOCK_NAME, "--open");
|
|
116
94
|
if (open) {
|
|
117
95
|
(_b = (_a = dialogEl.current) === null || _a === void 0 ? void 0 : _a.showModal) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
118
|
-
document.documentElement.classList.add(classNameToStopScrollBehindDialog);
|
|
119
96
|
}
|
|
120
97
|
else {
|
|
121
|
-
((_c = dialogEl.current) === null || _c === void 0 ? void 0 : _c.
|
|
122
|
-
// Always remove this class to avoid unexpected scroll stopping
|
|
123
|
-
document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
|
|
98
|
+
(_d = (_c = dialogEl.current) === null || _c === void 0 ? void 0 : _c.close) === null || _d === void 0 ? void 0 : _d.call(_c);
|
|
124
99
|
}
|
|
125
100
|
}, [open, dialogEl]);
|
|
126
|
-
return (react_1.default.createElement("dialog", __assign({ role: "dialog", className:
|
|
127
|
-
.filter(Boolean)
|
|
128
|
-
.join(' ')
|
|
129
|
-
.trim(), ref: (0, use_callback_ref_1.useMergeRefs)([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose, "data-type": type, "data-size": size }, rest),
|
|
101
|
+
return (react_1.default.createElement("dialog", __assign({ role: "dialog", className: BLOCK_NAME, ref: (0, use_callback_ref_1.useMergeRefs)([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose, "data-type": type, "data-size": size }, rest),
|
|
130
102
|
react_1.default.createElement("form", { className: "".concat(BLOCK_NAME, "-frame"), method: "dialog", onSubmit: handleFormSubmit }, children)));
|
|
131
103
|
});
|
|
132
104
|
var Header = function (_a) {
|
|
@@ -151,7 +123,12 @@ var Footer = function (_a) {
|
|
|
151
123
|
};
|
|
152
124
|
var StyleOnly = function (_a) {
|
|
153
125
|
var className = _a.className, children = _a.children, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.type, type = _c === void 0 ? 'popup' : _c, rest = __rest(_a, ["className", "children", "size", "type"]);
|
|
154
|
-
return (react_1.default.createElement("div", __assign({ className: [
|
|
126
|
+
return (react_1.default.createElement("div", __assign({ className: [
|
|
127
|
+
BLOCK_NAME,
|
|
128
|
+
"".concat(BLOCK_NAME, "--styleOnly"),
|
|
129
|
+
"".concat(BLOCK_NAME, "--").concat(size),
|
|
130
|
+
className,
|
|
131
|
+
]
|
|
155
132
|
.filter(Boolean)
|
|
156
133
|
.join(' ')
|
|
157
134
|
.trim() }, rest, { "data-type": type, "data-size": size }),
|
package/Modal/SemiModal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SemiModal.js","sourceRoot":"","sources":["../../src/Modal/SemiModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"SemiModal.js","sourceRoot":"","sources":["../../src/Modal/SemiModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwE;AACxE,qDAAgD;AAChD,gEAA0C;AAC1C,4CAA2C;AAc3C,IAAM,UAAU,GAAG,gBAAgB,CAAC;AAEpC,IAAM,KAAK,GAAG,IAAA,kBAAU,EAAoC,SAAS,SAAS,CAC5E,EAAqE,EACrE,GAAG;IADD,IAAA,QAAQ,cAAA,EAAE,IAAI,UAAA,EAAE,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EAAE,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EAAE,OAAO,aAAA,EAAK,IAAI,cAAnE,+CAAqE,CAAF;IAGnE,IAAM,QAAQ,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAEjD,eAAe;IACf,IAAM,gBAAgB,GAAG,UAAC,KAAuC;QAC/D,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,kCAAkC;QAC1D,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,gBAAgB;IAChB,IAAM,iBAAiB,GAAG,UAAC,KAA0C;QACnE,wBAAwB;QACxB,IAAI,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC,OAAO,EAAE,CAAC;YACtC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,CAAC;IAEF,cAAc;IACd,IAAM,iBAAiB,GAAG,UACxB,KAA8C;QAE9C,yBAAyB;QACzB,IAAI,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC,OAAO,EAAE,CAAC;YACtC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC;;QACR,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QAED,IAAI,IAAI,EAAE,CAAC;YACT,MAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,SAAS,kDAAI,CAAC;QAClC,CAAC;aAAM,CAAC;YACN,MAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,kDAAI,CAAC;QAC9B,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,mDACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,UAAU,EACrB,GAAG,EAAE,IAAA,+BAAY,EAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,EAClC,OAAO,EAAE,iBAAiB,EAC1B,OAAO,EAAE,iBAAiB,eACf,IAAI,eACJ,IAAI,IACX,IAAI;QAER,wCACE,SAAS,EAAE,UAAG,UAAU,WAAQ,EAChC,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAE,gBAAgB,IAEzB,QAAQ,CACJ,CACA,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,IAAM,MAAM,GAAG,UAAC,EAG2C;IAFzD,IAAA,QAAQ,cAAA,EACL,IAAI,cAFO,YAGf,CADQ;IAEP,OAAO,CACL,mDAAQ,IAAI,EAAC,SAAS,EAAC,SAAS,EAAE,UAAG,UAAU,YAAS,IAAM,IAAI;QAC/D,QAAQ;QACT,uCAAK,SAAS,EAAE,UAAG,UAAU,qBAAkB;YAC7C,8BAAC,uBAAU,IACT,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,gBAC7B,oBAAK,EAChB,OAAO,EAAC,SAAS;gBAEjB,8BAAC,mBAAS,mBAAa,MAAM,EAAC,SAAS,EAAE,UAAG,UAAU,eAAY,GAAI,CAC3D,CACT,CACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,WAAW,GAAG,UAAC,EAAgD;IAA9C,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAnB,YAAqB,CAAF;IACtC,OAAO,CACL,8CAAG,SAAS,EAAE,UAAG,UAAU,iBAAc,IAAM,IAAI,GAChD,QAAQ,CACP,CACL,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,QAAQ,GAAG,UAAC,EAGsC;IAFtD,IAAA,QAAQ,cAAA,EACL,IAAI,cAFS,YAGjB,CADQ;IAEP,OAAO,CACL,gDAAK,SAAS,EAAE,UAAG,UAAU,cAAW,IAAM,IAAI,GAC/C,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,MAAM,GAAG,UAAC,EAAkD;IAAhD,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAnB,YAAqB,CAAF;IACjC,OAAO,CACL,gDAAK,SAAS,EAAE,UAAG,UAAU,YAAS,IAAM,IAAI,GAC7C,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,SAAS,GAAG,UAAC,EAM0C;IAL3D,IAAA,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EACX,IAAI,cALU,yCAMlB,CADQ;IAEP,OAAO,CACL,gDACE,SAAS,EAAE;YACT,UAAU;YACV,UAAG,UAAU,gBAAa;YAC1B,UAAG,UAAU,eAAK,IAAI,CAAE;YACxB,SAAS;SACV;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC;aACT,IAAI,EAAE,IACL,IAAI,iBACG,IAAI,eACJ,IAAI;QAEf,uCAAK,SAAS,EAAE,UAAG,UAAU,WAAQ,IAAG,QAAQ,CAAO,CACnD,CACP,CAAC;AACJ,CAAC,CAAC;AAEW,QAAA,SAAS,GAAG;IACvB,KAAK,OAAA;IACL,MAAM,QAAA;IACN,WAAW,aAAA;IACX,QAAQ,UAAA;IACR,MAAM,QAAA;IACN,SAAS,WAAA;CACV,CAAC"}
|
package/Modal/SemiModal.mjs
CHANGED
|
@@ -1,14 +1,9 @@
|
|
|
1
|
-
import React, { forwardRef,
|
|
1
|
+
import React, { forwardRef, useEffect, useRef } from 'react';
|
|
2
2
|
import { useMergeRefs } from 'use-callback-ref';
|
|
3
3
|
import CrossBold from "../Icon/CrossBold.mjs";
|
|
4
4
|
import { IconButton } from "../IconButton/index.mjs";
|
|
5
5
|
const BLOCK_NAME = 'spui-SemiModal';
|
|
6
|
-
const ANIMATION_NAME_LIST = [
|
|
7
|
-
`${BLOCK_NAME}-fade-out`,
|
|
8
|
-
`${BLOCK_NAME}-slide-out`,
|
|
9
|
-
];
|
|
10
6
|
const Frame = forwardRef(function SemiModal({ children, open, size = 'medium', type = 'popup', onClose, ...rest }, ref) {
|
|
11
|
-
const [closing, setClosing] = useState(false);
|
|
12
7
|
const dialogEl = useRef(null);
|
|
13
8
|
// 閉じるアイコンを押した時
|
|
14
9
|
const handleFormSubmit = (event) => {
|
|
@@ -27,41 +22,20 @@ const Frame = forwardRef(function SemiModal({ children, open, size = 'medium', t
|
|
|
27
22
|
// Detect escape key type
|
|
28
23
|
if (event.target === dialogEl.current) {
|
|
29
24
|
onClose?.(event);
|
|
30
|
-
setClosing(false);
|
|
31
25
|
}
|
|
32
26
|
};
|
|
33
|
-
// modalアニメーション終了時
|
|
34
|
-
const handleAnimationEnd = useCallback((event) => {
|
|
35
|
-
if (dialogEl.current &&
|
|
36
|
-
ANIMATION_NAME_LIST.includes(event.animationName) &&
|
|
37
|
-
!event.pseudoElement // To exclude ::backdrop
|
|
38
|
-
) {
|
|
39
|
-
dialogEl.current?.close?.();
|
|
40
|
-
}
|
|
41
|
-
}, [dialogEl]);
|
|
42
|
-
useEffect(() => {
|
|
43
|
-
dialogEl.current?.addEventListener('animationend', handleAnimationEnd, false);
|
|
44
|
-
}, [handleAnimationEnd]);
|
|
45
27
|
useEffect(() => {
|
|
46
28
|
if (!dialogEl.current) {
|
|
47
29
|
return;
|
|
48
30
|
}
|
|
49
|
-
// Remove this when browsers support :has() pseudo-class
|
|
50
|
-
const classNameToStopScrollBehindDialog = `${BLOCK_NAME}--open`;
|
|
51
31
|
if (open) {
|
|
52
32
|
dialogEl.current?.showModal?.();
|
|
53
|
-
document.documentElement.classList.add(classNameToStopScrollBehindDialog);
|
|
54
33
|
}
|
|
55
34
|
else {
|
|
56
|
-
dialogEl.current?.
|
|
57
|
-
// Always remove this class to avoid unexpected scroll stopping
|
|
58
|
-
document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
|
|
35
|
+
dialogEl.current?.close?.();
|
|
59
36
|
}
|
|
60
37
|
}, [open, dialogEl]);
|
|
61
|
-
return (React.createElement("dialog", { role: "dialog", className:
|
|
62
|
-
.filter(Boolean)
|
|
63
|
-
.join(' ')
|
|
64
|
-
.trim(), ref: useMergeRefs([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose, "data-type": type, "data-size": size, ...rest },
|
|
38
|
+
return (React.createElement("dialog", { role: "dialog", className: BLOCK_NAME, ref: useMergeRefs([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose, "data-type": type, "data-size": size, ...rest },
|
|
65
39
|
React.createElement("form", { className: `${BLOCK_NAME}-frame`, method: "dialog", onSubmit: handleFormSubmit }, children)));
|
|
66
40
|
});
|
|
67
41
|
const Header = ({ children, ...rest }) => {
|
|
@@ -81,7 +55,12 @@ const Footer = ({ children, ...rest }) => {
|
|
|
81
55
|
return (React.createElement("div", { className: `${BLOCK_NAME}-footer`, ...rest }, children));
|
|
82
56
|
};
|
|
83
57
|
const StyleOnly = ({ className, children, size = 'medium', type = 'popup', ...rest }) => {
|
|
84
|
-
return (React.createElement("div", { className: [
|
|
58
|
+
return (React.createElement("div", { className: [
|
|
59
|
+
BLOCK_NAME,
|
|
60
|
+
`${BLOCK_NAME}--styleOnly`,
|
|
61
|
+
`${BLOCK_NAME}--${size}`,
|
|
62
|
+
className,
|
|
63
|
+
]
|
|
85
64
|
.filter(Boolean)
|
|
86
65
|
.join(' ')
|
|
87
66
|
.trim(), ...rest, "data-type": type, "data-size": size },
|
package/Modal/index.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.spui-ButtonGroup{display:flex}.spui-ButtonGroup--row{flex-direction:row}.spui-ButtonGroup--column{flex-direction:column}.spui-ButtonGroup--large{gap:16px}.spui-ButtonGroup--medium,.spui-ButtonGroup--small{gap:12px}.spui-ButtonGroup--large.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:4px}.spui-ButtonGroup--medium.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:2px}: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(
|
|
2
2
|
--color-surface-accent-primary-light
|
|
3
|
-
);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--SubtleButton-tapHighlightColor:var(--white-60-alpha);--SubtleButton-onFocus-outlineColor:var(--color-focus-clarity);--SubtleButton-color:var(--color-text-medium-emphasis)}.spui-SubtleButton{background:none;border:none;border-radius:4px;color:var(--SubtleButton-color);font-family:inherit;font-weight:700;line-height:1.3;margin:0;padding:0;-webkit-tap-highlight-color:var(--SubtleButton-tapHighlightColor);text-align:center}.spui-SubtleButton:disabled{opacity:.3}.spui-SubtleButton:focus{outline:2px solid var(--SubtleButton-onFocus-outlineColor);outline-offset:1px}.spui-SubtleButton:focus:not(:focus-visible){outline:none}@media (hover:hover){.spui-SubtleButton:not([disabled]):hover{text-decoration:underline}}.spui-SubtleButton--large,.spui-SubtleButton--medium{font-size:.875em}.spui-SubtleButton--small{font-size:.8125em}:root{--AppealModal-image-border:1px inset var(--color-border-low-emphasis);--AppealModal-image-borderRadius:8px}.spui-AppealModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);padding:0;
|
|
3
|
+
);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--SubtleButton-tapHighlightColor:var(--white-60-alpha);--SubtleButton-onFocus-outlineColor:var(--color-focus-clarity);--SubtleButton-color:var(--color-text-medium-emphasis)}.spui-SubtleButton{background:none;border:none;border-radius:4px;color:var(--SubtleButton-color);font-family:inherit;font-weight:700;line-height:1.3;margin:0;padding:0;-webkit-tap-highlight-color:var(--SubtleButton-tapHighlightColor);text-align:center}.spui-SubtleButton:disabled{opacity:.3}.spui-SubtleButton:focus{outline:2px solid var(--SubtleButton-onFocus-outlineColor);outline-offset:1px}.spui-SubtleButton:focus:not(:focus-visible){outline:none}@media (hover:hover){.spui-SubtleButton:not([disabled]):hover{text-decoration:underline}}.spui-SubtleButton--large,.spui-SubtleButton--medium{font-size:.875em}.spui-SubtleButton--small{font-size:.8125em}:root{--AppealModal-image-border:1px inset var(--color-border-low-emphasis);--AppealModal-image-borderRadius:8px}.spui-AppealModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);opacity:0;padding:0;transition:opacity .5s cubic-bezier(0,0,0,1),display allow-discrete .5s,overlay allow-discrete .5s;width:400px}.spui-AppealModal--styleOnly,.spui-AppealModal[open],.spui-AppealModal[open]::backdrop{opacity:1}.spui-AppealModal::backdrop{background:rgba(0,0,0,.6);opacity:0;transition:opacity .5s cubic-bezier(0,0,0,1),display allow-discrete .5s,overlay allow-discrete .5s}@starting-style{.spui-AppealModal[open]{opacity:0}.spui-AppealModal[open]::backdrop{opacity:0}}@media (prefers-reduced-motion:reduce){.spui-AppealModal,.spui-AppealModal::backdrop{transition-duration:.01s}}html:has(.spui-AppealModal[open]){overflow:hidden}@media screen and (max-width:440px){.spui-AppealModal{width:calc(100% - 48px)}}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-AppealModal-frame{color:var(--color-text-medium-emphasis);display:grid;gap:0;grid-auto-flow:row;grid-template:"Image" "Title" "Body" "ButtonGroup" "CloseButton"/1fr;padding:0 0 24px;width:100%}.spui-AppealModal-image{grid-area:Image}.spui-AppealModal-image img{border-radius:20px 20px 0 0}.spui-AppealModal-title{color:var(--color-text-high-emphasis);font-size:1.125em;font-weight:700;grid-area:Title;line-height:1.4;margin:24px 24px 0;padding:0;text-align:center}.spui-AppealModal-body{color:var(--color-text-medium-emphasis);font-size:.875em;grid-area:Body;line-height:1.6;margin:8px 24px 0;overflow-wrap:break-word;text-align:center}.spui-AppealModal-buttonGroup{align-items:center;grid-area:ButtonGroup;justify-content:center;margin:16px 24px 0;text-align:center}.spui-AppealModal-closeIconButton,.spui-AppealModal-closeTextButton{grid-area:CloseButton}.spui-AppealModal-closeIconButton{display:none}.spui-AppealModal-closeTextButton{margin:20px 24px 0;text-align:center}.spui-AppealModal-buttonGroup :is(.spui-Button,.spui-LinkButton){max-width:240px}@media screen and (min-width:768px){.spui-AppealModal{min-height:300px;min-width:500px}.spui-AppealModal--large{width:1024px}.spui-AppealModal--medium{width:840px}.spui-AppealModal--small{width:480px}.spui-AppealModal-frame{grid-auto-flow:row;grid-template:"Title CloseButton" "Body CloseButton" "Image Image" "ButtonGroup ButtonGroup"/1fr 72px;padding:0 0 36px}.spui-AppealModal-title{margin:32px 16px 0 36px;text-align:left}.spui-AppealModal-body{margin:12px 16px 0 36px;text-align:left}.spui-AppealModal-image{margin:32px 36px 0}.spui-AppealModal-image img{border:var(--AppealModal-image-border);border-radius:var(--AppealModal-image-borderRadius);box-sizing:border-box}.spui-AppealModal-buttonGroup{margin:16px 36px 0}.spui-AppealModal-closeIconButton{--IconButton--neutral-backgroundColor:transparent;--IconButton--neutral-onHover-backgroundColor:var(
|
|
4
4
|
--color-surface-tertiary
|
|
5
|
-
);display:inline-flex;margin:36px 0 0}.spui-AppealModal-closeTextButton{display:none}}
|
|
5
|
+
);display:inline-flex;margin:36px 0 0}.spui-AppealModal-closeTextButton{display:none}}:root{--SemiModal-footer-justifyContent:right;--SemiModal-footer-button-minWidth:160px;--SemiModal-sp-footer-justifyContent:center}.spui-SemiModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);height:-moz-fit-content;height:fit-content;opacity:0;padding:0;position:fixed;transition:opacity .35s cubic-bezier(0,0,0,1),display allow-discrete .35s,overlay allow-discrete .35s;width:-moz-fit-content;width:fit-content}.spui-SemiModal[data-type=sheet]{border-radius:20px 20px 0 0;bottom:0;margin:auto auto 0;transform:translateY(100%);transition:opacity .35s cubic-bezier(0,0,0,1),transform .35s cubic-bezier(0,0,0,1),display allow-discrete .35s,overlay allow-discrete .35s;will-change:translate}.spui-SemiModal--styleOnly,.spui-SemiModal[open],.spui-SemiModal[open]::backdrop{opacity:1}.spui-SemiModal::backdrop{background:rgba(0,0,0,.6);opacity:0;transition:opacity .35s cubic-bezier(0,0,0,1),display allow-discrete .35s,overlay allow-discrete .35s}.spui-SemiModal[data-type=sheet][open]{transform:translateY(0)}@starting-style{.spui-SemiModal[open]{opacity:0}.spui-SemiModal[open]::backdrop{opacity:0}.spui-SemiModal[data-type=sheet][open]{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.spui-SemiModal,.spui-SemiModal::backdrop{transition-duration:.01s}}html:has(.spui-SemiModal[open]){overflow:hidden}@media screen and (max-width:440px){.spui-SemiModal{width:calc(100% - 40px)}}.spui-SemiModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 2px var(--color-focus-clarity);outline:none}.spui-SemiModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-SemiModal-frame{box-sizing:border-box;color:var(--color-text-medium-emphasis);display:flex;flex-direction:column;padding:0 16px 36px 36px}.spui-SemiModal-header{align-items:center;display:grid;gap:16px;grid-template-columns:1fr auto;justify-content:space-between;overflow-wrap:break-word;padding:32px 8px 32px 0}.spui-SemiModal-closeIconButton{height:48px;width:48px;--IconButton--neutral-backgroundColor:transparent;--IconButton--neutral-onHover-backgroundColor:var(--color-surface-tertiary)}.spui-SemiModal-headerTitle{-webkit-box-orient:vertical;color:var(--color-text-high-emphasis);display:-webkit-box;font-size:1.25em;font-weight:600;height:-moz-fit-content;height:fit-content;-webkit-line-clamp:3;line-height:1.4;margin:0;overflow:hidden;width:100%}.spui-SemiModal-contents{line-height:1.6;overflow:hidden scroll}.spui-SemiModal-contents::-webkit-scrollbar{border-radius:4px;width:8px}.spui-SemiModal-contents::-webkit-scrollbar-thumb{background:var(--color-object-low-emphasis);border-radius:4px}.spui-SemiModal-contents::-webkit-scrollbar-track:enabled{background-color:var(--color-surface-secondary);border-radius:4px}.spui-SemiModal-footer{background-color:var(--color-surface-primary);bottom:0;display:flex;padding:24px 20px 0 0}.spui-SemiModal-footer:empty{padding:0 0 36px}@media screen and (min-width:768px){.spui-SemiModal[data-type=popup][data-size=small] .spui-SemiModal-frame{max-height:400px;max-width:480px}.spui-SemiModal[data-type=popup][data-size=medium] .spui-SemiModal-frame{max-height:700px;max-width:840px}.spui-SemiModal[data-type=popup][data-size=large] .spui-SemiModal-frame{max-height:840px;max-width:1024px}.spui-SemiModal[data-type=sheet] .spui-SemiModal-frame{max-height:calc(100dvh - 200px)}.spui-SemiModal[data-type=sheet][data-size=small] .spui-SemiModal-frame{max-width:480px}.spui-SemiModal[data-type=sheet][data-size=medium] .spui-SemiModal-frame{max-width:840px}.spui-SemiModal[data-type=sheet][data-size=large] .spui-SemiModal-frame{max-width:1024px}.spui-SemiModal-footer{justify-content:var(--SemiModal-footer-justifyContent)}.spui-SemiModal-footer :is(.spui-Button,.spui-LinkButton){min-width:var(--SemiModal-footer-button-minWidth)}}@media screen and (max-width:768px){.spui-SemiModal[data-type=sheet]{margin:auto 0 0;max-width:100%;width:100%}.spui-SemiModal[data-type=popup] .spui-SemiModal-frame,.spui-SemiModal[data-type=sheet] .spui-SemiModal-frame{max-height:calc(100dvh - 40px)}.spui-SemiModal[data-type=popup]{margin:auto 20px}.spui-SemiModal-contents{max-height:100%}.spui-SemiModal-header{padding:24px 0}.spui-SemiModal-closeIconButton{height:24px;width:24px;--IconButton--neutral-onHover-backgroundColor:transparent}.spui-SemiModal-frame{padding:0 20px 24px}.spui-SemiModal-footer{justify-content:var(--SemiModal-sp-footer-justifyContent);padding:16px 0 0}.spui-SemiModal-footer :is(.spui-Button,.spui-LinkButton){max-width:360px;width:100%}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.spui-Rating{align-items:center;display:flex;gap:8px}.spui-Rating-image{display:flex;gap:2px;line-height:0}.spui-Rating-text{color:var(--color-text-high-emphasis);font-weight:700;line-height:1.4;margin:0}.spui-Rating--large .spui-Rating-text{font-size:1.25em}.spui-Rating--medium .spui-Rating-text{font-size:1em}.spui-Rating--small .spui-Rating-text{font-size:.8125em}.spui-Rating-item--active{display:block;position:relative}.spui-Rating-icon{color:var(--color-border-high-emphasis)}.spui-Rating-item--front{height:100%;overflow:hidden}.spui-Rating-item--front,.spui-Rating-item--front .spui-Rating-icon{left:0;position:absolute;top:0}.spui-Rating-item--active .spui-Rating-icon{color:transparent}.spui-Rating-item--active .spui-Rating-item--front .spui-Rating-icon,.spui-Rating-item--full .spui-Rating-icon{color:var(--color-object-rating)}.spui-Rating--large .spui-Rating-icon{font-size:1.25em}.spui-Rating--medium .spui-Rating-icon{font-size:1em}.spui-Rating--small .spui-Rating-icon{font-size:.8125em}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
type Size = 'large' | 'medium' | 'small';
|
|
3
|
+
interface Props extends React.HTMLAttributes<HTMLElement> {
|
|
4
|
+
max: number;
|
|
5
|
+
value: number;
|
|
6
|
+
size: Size;
|
|
7
|
+
showText?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export declare const Rating: (props: Props) => React.JSX.Element;
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=Rating.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Rating.d.ts","sourceRoot":"","sources":["../../src/Rating/Rating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC,UAAU,KAAM,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACvD,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAYD,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,sBAkDlC,CAAC"}
|
package/Rating/Rating.js
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
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 __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
24
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
|
+
};
|
|
27
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
+
exports.Rating = void 0;
|
|
29
|
+
var react_1 = __importDefault(require("react"));
|
|
30
|
+
var Star_1 = __importDefault(require("../Icon/Star"));
|
|
31
|
+
var StarBack_1 = __importDefault(require("./StarBack"));
|
|
32
|
+
var StarFront_1 = __importDefault(require("./StarFront"));
|
|
33
|
+
var BLOCK_NAME = 'spui-Rating';
|
|
34
|
+
var convertToValue = function (num) {
|
|
35
|
+
return Math.round(num * 10) / 10;
|
|
36
|
+
};
|
|
37
|
+
var clamp = function (num, min, max) {
|
|
38
|
+
return Math.max(min, Math.min(num, max));
|
|
39
|
+
};
|
|
40
|
+
var Rating = function (props) {
|
|
41
|
+
var max = props.max, value = props.value, size = props.size, _a = props.showText, showText = _a === void 0 ? false : _a, rest = __rest(props, ["max", "value", "size", "showText"]);
|
|
42
|
+
var convertedValue = convertToValue(value);
|
|
43
|
+
var clampedValue = clamp(convertedValue, 0, max);
|
|
44
|
+
var ariaLabel = "".concat(max, "\u3064\u661F\u4E2D").concat(clampedValue, "\u306E\u8A55\u4FA1");
|
|
45
|
+
return (react_1.default.createElement("div", __assign({ className: "".concat(BLOCK_NAME, " ").concat(BLOCK_NAME, "--").concat(size) }, rest),
|
|
46
|
+
showText && react_1.default.createElement("p", { className: "".concat(BLOCK_NAME, "-text") }, clampedValue),
|
|
47
|
+
react_1.default.createElement("div", { className: "".concat(BLOCK_NAME, "-image"), role: "img", "aria-label": ariaLabel }, Array.from({ length: max }, function (_, index) {
|
|
48
|
+
var itemValue = index + 1;
|
|
49
|
+
var isFull = clampedValue >= itemValue;
|
|
50
|
+
var fillRatio = clamp(clampedValue - (itemValue - 1), 0, 1);
|
|
51
|
+
var isActive = fillRatio > 0 && fillRatio < 1;
|
|
52
|
+
return (react_1.default.createElement("span", { key: itemValue, className: "".concat(BLOCK_NAME, "-item") }, isFull ? (react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-item--full") },
|
|
53
|
+
react_1.default.createElement(StarFront_1.default, { className: "".concat(BLOCK_NAME, "-icon"), "aria-hidden": "true" }))) : isActive ? (react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-item--active") },
|
|
54
|
+
react_1.default.createElement(StarBack_1.default, { className: "".concat(BLOCK_NAME, "-icon"), "aria-hidden": "true" }),
|
|
55
|
+
react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-item--front"), style: { width: "".concat(fillRatio * 100, "%") } },
|
|
56
|
+
react_1.default.createElement(StarFront_1.default, { className: "".concat(BLOCK_NAME, "-icon"), "aria-hidden": "true" })))) : (react_1.default.createElement(Star_1.default, { className: "".concat(BLOCK_NAME, "-icon"), "aria-hidden": "true" }))));
|
|
57
|
+
}))));
|
|
58
|
+
};
|
|
59
|
+
exports.Rating = Rating;
|
|
60
|
+
//# sourceMappingURL=Rating.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Rating.js","sourceRoot":"","sources":["../../src/Rating/Rating.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,sDAAgC;AAChC,wDAAkC;AAClC,0DAAoC;AAWpC,IAAM,UAAU,GAAG,aAAa,CAAC;AAEjC,IAAM,cAAc,GAAG,UAAC,GAAW;IACjC,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC;AACnC,CAAC,CAAC;AAEF,IAAM,KAAK,GAAG,UAAC,GAAW,EAAE,GAAW,EAAE,GAAW;IAClD,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;AAC3C,CAAC,CAAC;AAEK,IAAM,MAAM,GAAG,UAAC,KAAY;IACzB,IAAA,GAAG,GAA6C,KAAK,IAAlD,EAAE,KAAK,GAAsC,KAAK,MAA3C,EAAE,IAAI,GAAgC,KAAK,KAArC,EAAE,KAA8B,KAAK,SAAnB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAK,IAAI,UAAK,KAAK,EAAvD,oCAA+C,CAAF,CAAW;IAC9D,IAAM,cAAc,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IAC7C,IAAM,YAAY,GAAG,KAAK,CAAC,cAAc,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;IACnD,IAAM,SAAS,GAAG,UAAG,GAAG,+BAAM,YAAY,uBAAK,CAAC;IAEhD,OAAO,CACL,gDAAK,SAAS,EAAE,UAAG,UAAU,cAAI,UAAU,eAAK,IAAI,CAAE,IAAM,IAAI;QAC7D,QAAQ,IAAI,qCAAG,SAAS,EAAE,UAAG,UAAU,UAAO,IAAG,YAAY,CAAK;QACnE,uCAAK,SAAS,EAAE,UAAG,UAAU,WAAQ,EAAE,IAAI,EAAC,KAAK,gBAAa,SAAS,IACpE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,UAAC,CAAC,EAAE,KAAa;YAC5C,IAAM,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;YAC5B,IAAM,MAAM,GAAG,YAAY,IAAI,SAAS,CAAC;YACzC,IAAM,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;YAC9D,IAAM,QAAQ,GAAG,SAAS,GAAG,CAAC,IAAI,SAAS,GAAG,CAAC,CAAC;YAEhD,OAAO,CACL,wCAAM,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,UAAG,UAAU,UAAO,IAClD,MAAM,CAAC,CAAC,CAAC,CACR,wCAAM,SAAS,EAAE,UAAG,UAAU,gBAAa;gBACzC,8BAAC,mBAAS,IACR,SAAS,EAAE,UAAG,UAAU,UAAO,iBACnB,MAAM,GAClB,CACG,CACR,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CACb,wCAAM,SAAS,EAAE,UAAG,UAAU,kBAAe;gBAC3C,8BAAC,kBAAQ,IACP,SAAS,EAAE,UAAG,UAAU,UAAO,iBACnB,MAAM,GAClB;gBACF,wCACE,SAAS,EAAE,UAAG,UAAU,iBAAc,EACtC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAG,SAAS,GAAG,GAAG,MAAG,EAAE;oBAEvC,8BAAC,mBAAS,IACR,SAAS,EAAE,UAAG,UAAU,UAAO,iBACnB,MAAM,GAClB,CACG,CACF,CACR,CAAC,CAAC,CAAC,CACF,8BAAC,cAAI,IAAC,SAAS,EAAE,UAAG,UAAU,UAAO,iBAAc,MAAM,GAAG,CAC7D,CACI,CACR,CAAC;QACJ,CAAC,CAAC,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAlDW,QAAA,MAAM,UAkDjB"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Star from "../Icon/Star.mjs";
|
|
3
|
+
import StarBack from "./StarBack.mjs";
|
|
4
|
+
import StarFront from "./StarFront.mjs";
|
|
5
|
+
const BLOCK_NAME = 'spui-Rating';
|
|
6
|
+
const convertToValue = (num) => {
|
|
7
|
+
return Math.round(num * 10) / 10;
|
|
8
|
+
};
|
|
9
|
+
const clamp = (num, min, max) => {
|
|
10
|
+
return Math.max(min, Math.min(num, max));
|
|
11
|
+
};
|
|
12
|
+
export const Rating = (props) => {
|
|
13
|
+
const { max, value, size, showText = false, ...rest } = props;
|
|
14
|
+
const convertedValue = convertToValue(value);
|
|
15
|
+
const clampedValue = clamp(convertedValue, 0, max);
|
|
16
|
+
const ariaLabel = `${max}つ星中${clampedValue}の評価`;
|
|
17
|
+
return (React.createElement("div", { className: `${BLOCK_NAME} ${BLOCK_NAME}--${size}`, ...rest },
|
|
18
|
+
showText && React.createElement("p", { className: `${BLOCK_NAME}-text` }, clampedValue),
|
|
19
|
+
React.createElement("div", { className: `${BLOCK_NAME}-image`, role: "img", "aria-label": ariaLabel }, Array.from({ length: max }, (_, index) => {
|
|
20
|
+
const itemValue = index + 1;
|
|
21
|
+
const isFull = clampedValue >= itemValue;
|
|
22
|
+
const fillRatio = clamp(clampedValue - (itemValue - 1), 0, 1);
|
|
23
|
+
const isActive = fillRatio > 0 && fillRatio < 1;
|
|
24
|
+
return (React.createElement("span", { key: itemValue, className: `${BLOCK_NAME}-item` }, isFull ? (React.createElement("span", { className: `${BLOCK_NAME}-item--full` },
|
|
25
|
+
React.createElement(StarFront, { className: `${BLOCK_NAME}-icon`, "aria-hidden": "true" }))) : isActive ? (React.createElement("span", { className: `${BLOCK_NAME}-item--active` },
|
|
26
|
+
React.createElement(StarBack, { className: `${BLOCK_NAME}-icon`, "aria-hidden": "true" }),
|
|
27
|
+
React.createElement("span", { className: `${BLOCK_NAME}-item--front`, style: { width: `${fillRatio * 100}%` } },
|
|
28
|
+
React.createElement(StarFront, { className: `${BLOCK_NAME}-icon`, "aria-hidden": "true" })))) : (React.createElement(Star, { className: `${BLOCK_NAME}-icon`, "aria-hidden": "true" }))));
|
|
29
|
+
}))));
|
|
30
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StarBack.d.ts","sourceRoot":"","sources":["../../src/Rating/StarBack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAM,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;CAAG;AAExD,eAAO,MAAM,QAAQ,GAAI,OAAO,KAAK,sBAiBpC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
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 __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.StarBack = void 0;
|
|
18
|
+
var react_1 = __importDefault(require("react"));
|
|
19
|
+
var StarBack = function (props) {
|
|
20
|
+
return (react_1.default.createElement("svg", __assign({ fill: "currentColor", height: "1em", viewBox: "0 0 16 16", width: "1em", xmlns: "http://www.w3.org/2000/svg" }, props),
|
|
21
|
+
react_1.default.createElement("path", { d: "m7.99976 2.32129c.20919 0 .38925.113.47949.31152l1.30664 2.87305.1582.34863.37991.04297 3.1338.35352c.2122.02395.3761.15758.4404.35644.0654.20211.0104.40434-.1445.54492l-.003.00293-2.3271 2.13379-.2813.25782.0762.375.6328 3.08882v.001c.0419.2095-.0358.4095-.2051.5332-.1029.074-.2129.1064-.3125.1065-.0612 0-.1286-.0122-.1943-.0391l-.0644-.0322-2.74028-1.5664-.33399-.1905-.33398.1895-2.74707 1.5605-.00098.001c-.08551.0489-.17721.0703-.25879.0703-.07484 0-.15524-.0181-.23437-.0586l-.07813-.0478c-.16849-.1231-.24652-.321-.20605-.5293l.63281-3.09376.07715-.37402-.28223-.25879-2.32617-2.13282-.00293-.00293-.05371-.05566c-.11358-.1357-.14809-.31321-.09082-.49023.06442-.19874.22827-.33254.44043-.35645l3.13281-.35352.38086-.04296.1582-.34864 1.30176-2.8623c.09632-.20159.28109-.31537.49024-.31543z", stroke: "#83898e", strokeWidth: "1.35" })));
|
|
22
|
+
};
|
|
23
|
+
exports.StarBack = StarBack;
|
|
24
|
+
exports.default = exports.StarBack;
|
|
25
|
+
//# sourceMappingURL=StarBack.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StarBack.js","sourceRoot":"","sources":["../../src/Rating/StarBack.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAInB,IAAM,QAAQ,GAAG,UAAC,KAAY;IACnC,OAAO,CACL,gDACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,4BAA4B,IAC9B,KAAK;QAET,wCACE,CAAC,EAAC,gyBAAgyB,EAClyB,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,MAAM,GAClB,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,QAAQ,YAiBnB;AAEF,kBAAe,gBAAQ,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const StarBack = (props) => {
|
|
3
|
+
return (React.createElement("svg", { fill: "currentColor", height: "1em", viewBox: "0 0 16 16", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...props },
|
|
4
|
+
React.createElement("path", { d: "m7.99976 2.32129c.20919 0 .38925.113.47949.31152l1.30664 2.87305.1582.34863.37991.04297 3.1338.35352c.2122.02395.3761.15758.4404.35644.0654.20211.0104.40434-.1445.54492l-.003.00293-2.3271 2.13379-.2813.25782.0762.375.6328 3.08882v.001c.0419.2095-.0358.4095-.2051.5332-.1029.074-.2129.1064-.3125.1065-.0612 0-.1286-.0122-.1943-.0391l-.0644-.0322-2.74028-1.5664-.33399-.1905-.33398.1895-2.74707 1.5605-.00098.001c-.08551.0489-.17721.0703-.25879.0703-.07484 0-.15524-.0181-.23437-.0586l-.07813-.0478c-.16849-.1231-.24652-.321-.20605-.5293l.63281-3.09376.07715-.37402-.28223-.25879-2.32617-2.13282-.00293-.00293-.05371-.05566c-.11358-.1357-.14809-.31321-.09082-.49023.06442-.19874.22827-.33254.44043-.35645l3.13281-.35352.38086-.04296.1582-.34864 1.30176-2.8623c.09632-.20159.28109-.31537.49024-.31543z", stroke: "#83898e", strokeWidth: "1.35" })));
|
|
5
|
+
};
|
|
6
|
+
export default StarBack;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StarFront.d.ts","sourceRoot":"","sources":["../../src/Rating/StarFront.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAM,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;CAAG;AAExD,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,sBAmBrC,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
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 __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.StarFront = void 0;
|
|
18
|
+
var react_1 = __importDefault(require("react"));
|
|
19
|
+
var StarFront = function (props) {
|
|
20
|
+
return (react_1.default.createElement("svg", __assign({ fill: "currentColor", height: "1em", viewBox: "0 0 16 16", width: "1em", xmlns: "http://www.w3.org/2000/svg" }, props),
|
|
21
|
+
react_1.default.createElement("path", { d: "m14.2066 7.65315-2.3267 2.13333.6334 3.09332c.0933.4667-.0867.9334-.4734 1.2134-.2133.1533-.46.2333-.7066.2333-.2 0-.4067-.0533-.5934-.16l-2.73997-1.5667-2.74666 1.56c-.18667.1067-.39334.16-.59334.16-.24666 0-.49333-.08-.70666-.2333-.38667-.28-.56667-.7467-.47334-1.2133l.63334-3.09338-2.32667-2.13334c-.35333-.32-.48-.8-.33333-1.25333s.53333-.76667 1.00667-.82l3.13333-.35333 1.30667-2.87334c.20666-.43333.62666-.7 1.09999-.7.47334 0 .89334.26667 1.09334.70667l1.30663 2.87333 3.1334.35334c.4733.05333.86.36666 1.0066.82.1467.45333.02.93333-.3333 1.25333z" }),
|
|
22
|
+
react_1.default.createElement("path", { d: "m7.99976 2.02148c.32659 0 .61293.18147.75195.48731l1.30659 2.87305.0879.19336.212.02441 3.1328.35254c.3283.03699.5914.25149.6923.56347.1014.3137.0146.63915-.2285.85938l-.0019.00195-2.3262 2.13282-.1572.14355.043.20801.6328 3.09077v.001c.0567.2837-.031.563-.2325.7578l-.0927.0782c-.1518.1088-.3218.162-.4864.1621-.134 0-.2768-.036-.4072-.1104l-2.74022-1.5664-.18555-.1064-.18554.1054-2.74707 1.5606h-.00098c-.13047.0745-.27302.1103-.40723.1103-.12364 0-.25032-.0297-.37012-.0908l-.11718-.0713c-.26583-.1928-.3893-.5105-.3252-.834l.63281-3.09273.04297-.20899-.15625-.14355-2.32715-2.13281-.00097-.00196-.08399-.08691c-.17825-.21424-.23335-.4978-.14453-.77246.10092-.31194.36319-.52644.69141-.56348l3.13379-.35254.21094-.02441.08789-.19336 1.30371-2.86719c.14532-.3047.43511-.48626.76172-.48633z", stroke: "#08121a", strokeOpacity: ".08", strokeWidth: ".75" })));
|
|
23
|
+
};
|
|
24
|
+
exports.StarFront = StarFront;
|
|
25
|
+
exports.default = exports.StarFront;
|
|
26
|
+
//# sourceMappingURL=StarFront.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StarFront.js","sourceRoot":"","sources":["../../src/Rating/StarFront.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAInB,IAAM,SAAS,GAAG,UAAC,KAAY;IACpC,OAAO,CACL,gDACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,4BAA4B,IAC9B,KAAK;QAET,wCAAM,CAAC,EAAC,8iBAA8iB,GAAG;QACzjB,wCACE,CAAC,EAAC,0xBAA0xB,EAC5xB,MAAM,EAAC,SAAS,EAChB,aAAa,EAAC,KAAK,EACnB,WAAW,EAAC,KAAK,GACjB,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,SAAS,aAmBpB;AAEF,kBAAe,iBAAS,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const StarFront = (props) => {
|
|
3
|
+
return (React.createElement("svg", { fill: "currentColor", height: "1em", viewBox: "0 0 16 16", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...props },
|
|
4
|
+
React.createElement("path", { d: "m14.2066 7.65315-2.3267 2.13333.6334 3.09332c.0933.4667-.0867.9334-.4734 1.2134-.2133.1533-.46.2333-.7066.2333-.2 0-.4067-.0533-.5934-.16l-2.73997-1.5667-2.74666 1.56c-.18667.1067-.39334.16-.59334.16-.24666 0-.49333-.08-.70666-.2333-.38667-.28-.56667-.7467-.47334-1.2133l.63334-3.09338-2.32667-2.13334c-.35333-.32-.48-.8-.33333-1.25333s.53333-.76667 1.00667-.82l3.13333-.35333 1.30667-2.87334c.20666-.43333.62666-.7 1.09999-.7.47334 0 .89334.26667 1.09334.70667l1.30663 2.87333 3.1334.35334c.4733.05333.86.36666 1.0066.82.1467.45333.02.93333-.3333 1.25333z" }),
|
|
5
|
+
React.createElement("path", { d: "m7.99976 2.02148c.32659 0 .61293.18147.75195.48731l1.30659 2.87305.0879.19336.212.02441 3.1328.35254c.3283.03699.5914.25149.6923.56347.1014.3137.0146.63915-.2285.85938l-.0019.00195-2.3262 2.13282-.1572.14355.043.20801.6328 3.09077v.001c.0567.2837-.031.563-.2325.7578l-.0927.0782c-.1518.1088-.3218.162-.4864.1621-.134 0-.2768-.036-.4072-.1104l-2.74022-1.5664-.18555-.1064-.18554.1054-2.74707 1.5606h-.00098c-.13047.0745-.27302.1103-.40723.1103-.12364 0-.25032-.0297-.37012-.0908l-.11718-.0713c-.26583-.1928-.3893-.5105-.3252-.834l.63281-3.09273.04297-.20899-.15625-.14355-2.32715-2.13281-.00097-.00196-.08399-.08691c-.17825-.21424-.23335-.4978-.14453-.77246.10092-.31194.36319-.52644.69141-.56348l3.13379-.35254.21094-.02441.08789-.19336 1.30371-2.86719c.14532-.3047.43511-.48626.76172-.48633z", stroke: "#08121a", strokeOpacity: ".08", strokeWidth: ".75" })));
|
|
6
|
+
};
|
|
7
|
+
export default StarFront;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Rating/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
|
package/Rating/index.js
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Rating = void 0;
|
|
4
|
+
var Rating_1 = require("./Rating");
|
|
5
|
+
Object.defineProperty(exports, "Rating", { enumerable: true, get: function () { return Rating_1.Rating; } });
|
|
6
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Rating/index.ts"],"names":[],"mappings":";;;AAAA,mCAAkC;AAAzB,gGAAA,MAAM,OAAA"}
|
package/Rating/index.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Rating } from "./Rating.mjs";
|
package/index.css
CHANGED
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
--color-surface-accent-primary-light
|
|
15
15
|
);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--LinkButton-tapHighlightColor:var(--gray-5-alpha);--LinkButton-onFocus-outlineColor:var(--color-focus-clarity);--LinkButton--contained-backgroundColor:var(--color-surface-accent-primary);--LinkButton--contained-color:var(--color-text-high-emphasis-inverse);--LinkButton--contained-onActive-backgroundColor:var(--primary-green-100);--LinkButton--contained-onHover-backgroundColor:var(--primary-green-100);--LinkButton--outlined-borderColor:var(--color-border-accent-primary);--LinkButton--outlined-color:var(--color-text-accent-primary);--LinkButton--outlined-onActive-backgroundColor:var(--primary-green-5);--LinkButton--outlined-onHover-backgroundColor:var(--primary-green-5);--LinkButton--lighted-backgroundColor:var(
|
|
16
16
|
--color-surface-accent-primary-light
|
|
17
|
-
);--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:8px 16px}.spui-LinkButton--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding:8px 16px}.spui-LinkButton--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding:6px 10px}.spui-LinkButton--small:is(.spui-LinkButton--outlined,.spui-LinkButton--danger){padding-bottom:5px;padding-top:5px}@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)}.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)}.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)}.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)}.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)}.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--iconstart .spui-LinkButton-icon--large{font-size:1.375em;margin-right:6px}.spui-LinkButton--iconstart .spui-LinkButton-icon--medium{font-size:1.429em;margin-right:4px}.spui-LinkButton--iconstart .spui-LinkButton-icon--small{font-size:1.23em;margin-right:2px}.spui-LinkButton--iconend{flex-direction:row-reverse}.spui-LinkButton--iconend .spui-LinkButton-icon--large{font-size:1.125em;margin-left:6px}.spui-LinkButton--iconend .spui-LinkButton-icon--medium{font-size:1.143em;margin-left:4px}.spui-LinkButton--iconend .spui-LinkButton-icon--small{font-size:1.077em;margin-left:2px}:root{--SubtleButton-tapHighlightColor:var(--white-60-alpha);--SubtleButton-onFocus-outlineColor:var(--color-focus-clarity);--SubtleButton-color:var(--color-text-medium-emphasis)}.spui-SubtleButton{background:none;border:none;border-radius:4px;color:var(--SubtleButton-color);font-family:inherit;font-weight:700;line-height:1.3;margin:0;padding:0;-webkit-tap-highlight-color:var(--SubtleButton-tapHighlightColor);text-align:center}.spui-SubtleButton:disabled{opacity:.3}.spui-SubtleButton:focus{outline:2px solid var(--SubtleButton-onFocus-outlineColor);outline-offset:1px}.spui-SubtleButton:focus:not(:focus-visible){outline:none}@media (hover:hover){.spui-SubtleButton:not([disabled]):hover{text-decoration:underline}}.spui-SubtleButton--large,.spui-SubtleButton--medium{font-size:.875em}.spui-SubtleButton--small{font-size:.8125em}:root{--AppealModal-image-border:1px inset var(--color-border-low-emphasis);--AppealModal-image-borderRadius:8px}.spui-AppealModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);padding:0;
|
|
17
|
+
);--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:8px 16px}.spui-LinkButton--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding:8px 16px}.spui-LinkButton--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding:6px 10px}.spui-LinkButton--small:is(.spui-LinkButton--outlined,.spui-LinkButton--danger){padding-bottom:5px;padding-top:5px}@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)}.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)}.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)}.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)}.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)}.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--iconstart .spui-LinkButton-icon--large{font-size:1.375em;margin-right:6px}.spui-LinkButton--iconstart .spui-LinkButton-icon--medium{font-size:1.429em;margin-right:4px}.spui-LinkButton--iconstart .spui-LinkButton-icon--small{font-size:1.23em;margin-right:2px}.spui-LinkButton--iconend{flex-direction:row-reverse}.spui-LinkButton--iconend .spui-LinkButton-icon--large{font-size:1.125em;margin-left:6px}.spui-LinkButton--iconend .spui-LinkButton-icon--medium{font-size:1.143em;margin-left:4px}.spui-LinkButton--iconend .spui-LinkButton-icon--small{font-size:1.077em;margin-left:2px}:root{--SubtleButton-tapHighlightColor:var(--white-60-alpha);--SubtleButton-onFocus-outlineColor:var(--color-focus-clarity);--SubtleButton-color:var(--color-text-medium-emphasis)}.spui-SubtleButton{background:none;border:none;border-radius:4px;color:var(--SubtleButton-color);font-family:inherit;font-weight:700;line-height:1.3;margin:0;padding:0;-webkit-tap-highlight-color:var(--SubtleButton-tapHighlightColor);text-align:center}.spui-SubtleButton:disabled{opacity:.3}.spui-SubtleButton:focus{outline:2px solid var(--SubtleButton-onFocus-outlineColor);outline-offset:1px}.spui-SubtleButton:focus:not(:focus-visible){outline:none}@media (hover:hover){.spui-SubtleButton:not([disabled]):hover{text-decoration:underline}}.spui-SubtleButton--large,.spui-SubtleButton--medium{font-size:.875em}.spui-SubtleButton--small{font-size:.8125em}:root{--AppealModal-image-border:1px inset var(--color-border-low-emphasis);--AppealModal-image-borderRadius:8px}.spui-AppealModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);opacity:0;padding:0;transition:opacity .5s cubic-bezier(0,0,0,1),display allow-discrete .5s,overlay allow-discrete .5s;width:400px}.spui-AppealModal--styleOnly,.spui-AppealModal[open],.spui-AppealModal[open]::backdrop{opacity:1}.spui-AppealModal::backdrop{background:rgba(0,0,0,.6);opacity:0;transition:opacity .5s cubic-bezier(0,0,0,1),display allow-discrete .5s,overlay allow-discrete .5s}@starting-style{.spui-AppealModal[open]{opacity:0}.spui-AppealModal[open]::backdrop{opacity:0}}@media (prefers-reduced-motion:reduce){.spui-AppealModal,.spui-AppealModal::backdrop{transition-duration:.01s}}html:has(.spui-AppealModal[open]){overflow:hidden}@media screen and (max-width:440px){.spui-AppealModal{width:calc(100% - 48px)}}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-AppealModal-frame{color:var(--color-text-medium-emphasis);display:grid;gap:0;grid-auto-flow:row;grid-template:"Image" "Title" "Body" "ButtonGroup" "CloseButton"/1fr;padding:0 0 24px;width:100%}.spui-AppealModal-image{grid-area:Image}.spui-AppealModal-image img{border-radius:20px 20px 0 0}.spui-AppealModal-title{color:var(--color-text-high-emphasis);font-size:1.125em;font-weight:700;grid-area:Title;line-height:1.4;margin:24px 24px 0;padding:0;text-align:center}.spui-AppealModal-body{color:var(--color-text-medium-emphasis);font-size:.875em;grid-area:Body;line-height:1.6;margin:8px 24px 0;overflow-wrap:break-word;text-align:center}.spui-AppealModal-buttonGroup{align-items:center;grid-area:ButtonGroup;justify-content:center;margin:16px 24px 0;text-align:center}.spui-AppealModal-closeIconButton,.spui-AppealModal-closeTextButton{grid-area:CloseButton}.spui-AppealModal-closeIconButton{display:none}.spui-AppealModal-closeTextButton{margin:20px 24px 0;text-align:center}.spui-AppealModal-buttonGroup :is(.spui-Button,.spui-LinkButton){max-width:240px}@media screen and (min-width:768px){.spui-AppealModal{min-height:300px;min-width:500px}.spui-AppealModal--large{width:1024px}.spui-AppealModal--medium{width:840px}.spui-AppealModal--small{width:480px}.spui-AppealModal-frame{grid-auto-flow:row;grid-template:"Title CloseButton" "Body CloseButton" "Image Image" "ButtonGroup ButtonGroup"/1fr 72px;padding:0 0 36px}.spui-AppealModal-title{margin:32px 16px 0 36px;text-align:left}.spui-AppealModal-body{margin:12px 16px 0 36px;text-align:left}.spui-AppealModal-image{margin:32px 36px 0}.spui-AppealModal-image img{border:var(--AppealModal-image-border);border-radius:var(--AppealModal-image-borderRadius);box-sizing:border-box}.spui-AppealModal-buttonGroup{margin:16px 36px 0}.spui-AppealModal-closeIconButton{--IconButton--neutral-backgroundColor:transparent;--IconButton--neutral-onHover-backgroundColor:var(
|
|
18
18
|
--color-surface-tertiary
|
|
19
|
-
);display:inline-flex;margin:36px 0 0}.spui-AppealModal-closeTextButton{display:none}}@keyframes spui-AppealModal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes spui-AppealModal-fade-out{0%{opacity:1}to{opacity:0}}:root{--SemiModal-footer-justifyContent:right;--SemiModal-footer-button-minWidth:160px;--SemiModal-sp-footer-justifyContent:center}.spui-SemiModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);height:-moz-fit-content;height:fit-content;padding:0;position:fixed;width:-moz-fit-content;width:fit-content}.spui-SemiModal[data-type=sheet]{border-radius:20px 20px 0 0;bottom:0;margin:auto auto 0;transform:translateY(100%);will-change:translate}.spui-SemiModal[data-type=popup][open]:not(.spui-SemiModal--closing),.spui-SemiModal[data-type=popup][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop,.spui-SemiModal[data-type=sheet][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop{animation:spui-SemiModal-fade-in .35s cubic-bezier(0,0,0,1)}.spui-SemiModal--closing.spui-SemiModal[data-type=popup],.spui-SemiModal--closing[data-type=popup].spui-SemiModal::backdrop,.spui-SemiModal--closing[data-type=sheet].spui-SemiModal::backdrop{animation:spui-SemiModal-fade-out .35s cubic-bezier(0,0,0,1)}.spui-SemiModal[data-type=sheet][open]:not(.spui-SemiModal--closing,button){animation:spui-SemiModal-slide-in .35s cubic-bezier(0,0,0,1) both}.spui-SemiModal--closing.spui-SemiModal[data-type=sheet]{animation:spui-SemiModal-slide-out .35s cubic-bezier(0,0,0,1) both}@media (prefers-reduced-motion:reduce){.spui-SemiModal--closing.spui-SemiModal[data-type=popup]::backdrop,.spui-SemiModal--closing.spui-SemiModal[data-type=sheet]::backdrop,.spui-SemiModal[data-type=popup].spui-SemiModal--closing,.spui-SemiModal[data-type=popup][open]:not(.spui-SemiModal--closing),.spui-SemiModal[data-type=popup][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop,.spui-SemiModal[data-type=sheet].spui-SemiModal--closing,.spui-SemiModal[data-type=sheet][open]:not(.spui-SemiModal--closing),.spui-SemiModal[data-type=sheet][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop{animation-duration:.01s}}html:has(.spui-SemiModal[open]){overflow:hidden}html.spui-SemiModal--open{overflow:hidden}@media screen and (max-width:440px){.spui-SemiModal{width:calc(100% - 40px)}}.spui-SemiModal::backdrop{background:rgba(0,0,0,.6)}.spui-SemiModal+.backdrop{background:rgba(0,0,0,.6)}.spui-SemiModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 2px var(--color-focus-clarity);outline:none}.spui-SemiModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-SemiModal-frame{box-sizing:border-box;color:var(--color-text-medium-emphasis);display:flex;flex-direction:column;padding:0 16px 36px 36px}.spui-SemiModal-header{align-items:center;display:grid;gap:16px;grid-template-columns:1fr auto;justify-content:space-between;overflow-wrap:break-word;padding:32px 8px 32px 0}.spui-SemiModal-closeIconButton{height:48px;width:48px;--IconButton--neutral-backgroundColor:transparent;--IconButton--neutral-onHover-backgroundColor:var(--color-surface-tertiary)}.spui-SemiModal-headerTitle{-webkit-box-orient:vertical;color:var(--color-text-high-emphasis);display:-webkit-box;font-size:1.25em;font-weight:600;height:-moz-fit-content;height:fit-content;-webkit-line-clamp:3;line-height:1.4;margin:0;overflow:hidden;width:100%}.spui-SemiModal-contents{line-height:1.6;overflow:hidden scroll}.spui-SemiModal-contents::-webkit-scrollbar{border-radius:4px;width:8px}.spui-SemiModal-contents::-webkit-scrollbar-thumb{background:var(--color-object-low-emphasis);border-radius:4px}.spui-SemiModal-contents::-webkit-scrollbar-track:enabled{background-color:var(--color-surface-secondary);border-radius:4px}.spui-SemiModal-footer{background-color:var(--color-surface-primary);bottom:0;display:flex;padding:24px 20px 0 0}.spui-SemiModal-footer:empty{padding:0 0 36px}@media screen and (min-width:768px){.spui-SemiModal[data-type=popup][data-size=small] .spui-SemiModal-frame{max-height:400px;max-width:480px}.spui-SemiModal[data-type=popup][data-size=medium] .spui-SemiModal-frame{max-height:700px;max-width:840px}.spui-SemiModal[data-type=popup][data-size=large] .spui-SemiModal-frame{max-height:840px;max-width:1024px}.spui-SemiModal[data-type=sheet] .spui-SemiModal-frame{max-height:calc(100dvh - 200px)}.spui-SemiModal[data-type=sheet][data-size=small] .spui-SemiModal-frame{max-width:480px}.spui-SemiModal[data-type=sheet][data-size=medium] .spui-SemiModal-frame{max-width:840px}.spui-SemiModal[data-type=sheet][data-size=large] .spui-SemiModal-frame{max-width:1024px}.spui-SemiModal-footer{justify-content:var(--SemiModal-footer-justifyContent)}.spui-SemiModal-footer :is(.spui-Button,.spui-LinkButton){min-width:var(--SemiModal-footer-button-minWidth)}}@media screen and (max-width:768px){.spui-SemiModal[data-type=sheet]{margin:auto 0 0;max-width:100%;width:100%}.spui-SemiModal[data-type=popup] .spui-SemiModal-frame,.spui-SemiModal[data-type=sheet] .spui-SemiModal-frame{max-height:calc(100dvh - 40px)}.spui-SemiModal[data-type=popup]{margin:auto 20px}.spui-SemiModal-contents{max-height:100%}.spui-SemiModal-header{padding:24px 0}.spui-SemiModal-closeIconButton{height:24px;width:24px;--IconButton--neutral-onHover-backgroundColor:transparent}.spui-SemiModal-frame{padding:0 20px 24px}.spui-SemiModal-footer{justify-content:var(--SemiModal-sp-footer-justifyContent);padding:16px 0 0}.spui-SemiModal-footer :is(.spui-Button,.spui-LinkButton){max-width:360px;width:100%}}@keyframes spui-SemiModal-slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes spui-SemiModal-slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes spui-SemiModal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes spui-SemiModal-fade-out{0%{opacity:1}to{opacity:0}}:root{--Table-backgroundColor:var(--color-surface-primary);--Table-head-backgroundColor:var(--color-surface-tertiary);--Table-cell-backgroundColor:var(--color-surface-primary);--Table-row-striped-backgroundColor:var(--color-background);--Table-head-color:var(--color-text-high-emphasis);--Table-cell-color:var(--color-text-high-emphasis);--Table-footer-color:var(--color-text-high-emphasis);--Table-head-fontWeight:bold;--Table-cell-fontWeight:normal;--Table-footer-fontWeight:normal;--Table-head-fontSize:0.875em;--Table-cell-fontSize:0.875em;--Table-footer-fontSize:0.875em;--Table-head-lineHeight:1.4;--Table-cell-lineHeight:1.4;--Table-footer-lineHeight:1.4;--Table-outlineColor:var(--color-border-strong-emphasis);--Table-cell-borderColor:var(--color-border-low-emphasis);--Table-footer-separatorColor:var(--color-border-medium-emphasis);--Table-borderRadius:16px;--Table-head-padding:12px;--Table-cell-padding:12px;--Table-footer-padding:12px;--Table-caption-color:var(--color-text-low-emphasis);--Table-caption-fontSize:0.75em;--Table-caption-lineHeight:1.6;--Table-caption-fontWeight:normal}.spui-Table-frame{position:relative;width:100%}.spui-Table-frame--scrollable{overflow-x:auto;scroll-behavior:smooth}.spui-Table{background-color:var(--Table-backgroundColor);border-spacing:0;table-layout:auto;width:100%}.spui-Table--fixed{table-layout:fixed}.spui-Table--scrollable{min-width:-moz-max-content;min-width:max-content;width:100%}.spui-Table--horizontal .spui-Table-cell,.spui-Table--horizontal .spui-Table-head{border-bottom:1px solid var(--Table-cell-borderColor)}.spui-Table--horizontal .spui-Table-body .spui-Table-row:last-child .spui-Table-cell,.spui-Table--horizontal .spui-Table-body .spui-Table-row:last-child .spui-Table-head{border-bottom:none}.spui-Table--horizontal .spui-Table-footer .spui-Table-row:first-child .spui-Table-cell,.spui-Table--horizontal .spui-Table-footer .spui-Table-row:first-child .spui-Table-head{border-top:2px solid var(--Table-footer-separatorColor)}.spui-Table--horizontal .spui-Table-footer .spui-Table-row:last-child .spui-Table-cell,.spui-Table--horizontal .spui-Table-footer .spui-Table-row:last-child .spui-Table-head{border-bottom:none}.spui-Table--vertical .spui-Table-cell,.spui-Table--vertical .spui-Table-head{border-right:1px solid var(--Table-cell-borderColor)}.spui-Table--vertical .spui-Table-cell:last-child,.spui-Table--vertical .spui-Table-head:last-child{border-right:none}.spui-Table--outlined{border:1px solid var(--Table-outlineColor)}.spui-Table-footer .spui-Table-cell{background-color:var(--Table-cell-backgroundColor)}.spui-Table-footer .spui-Table-cell,.spui-Table-footer .spui-Table-head{color:var(--Table-footer-color);font-size:var(--Table-footer-fontSize);font-weight:var(--Table-footer-fontWeight);line-height:var(--Table-footer-lineHeight);padding:var(--Table-footer-padding)}.spui-Table--rounded{border-collapse:separate;border-spacing:0}.spui-Table--rounded,.spui-Table--rounded.spui-Table--outlined{border-radius:var(--Table-borderRadius)}.spui-Table--rounded .spui-Table-header .spui-Table-row:first-child .spui-Table-head:first-child{border-top-left-radius:calc(var(--Table-borderRadius) - 1px)}.spui-Table--rounded .spui-Table-header .spui-Table-row:first-child .spui-Table-head:last-child{border-top-right-radius:calc(var(--Table-borderRadius) - 1px)}.spui-Table--rounded:not(:has(.spui-Table-header)) .spui-Table-body .spui-Table-row:first-child .spui-Table-cell:first-child,.spui-Table--rounded:not(:has(.spui-Table-header)) .spui-Table-body .spui-Table-row:first-child .spui-Table-head:first-child{border-top-left-radius:calc(var(--Table-borderRadius) - 1px)}.spui-Table--rounded:not(:has(.spui-Table-header)) .spui-Table-body .spui-Table-row:first-child .spui-Table-cell:last-child,.spui-Table--rounded:not(:has(.spui-Table-header)) .spui-Table-body .spui-Table-row:first-child .spui-Table-head:last-child{border-top-right-radius:calc(var(--Table-borderRadius) - 1px)}.spui-Table--rounded .spui-Table-body .spui-Table-row:last-child .spui-Table-cell:first-child,.spui-Table--rounded .spui-Table-body .spui-Table-row:last-child .spui-Table-head:first-child{border-bottom-left-radius:calc(var(--Table-borderRadius) - 1px)}.spui-Table--rounded .spui-Table-body .spui-Table-row:last-child .spui-Table-cell:last-child,.spui-Table--rounded .spui-Table-body .spui-Table-row:last-child .spui-Table-head:last-child{border-bottom-right-radius:calc(var(--Table-borderRadius) - 1px)}.spui-Table--rounded:has(.spui-Table-footer) .spui-Table-body .spui-Table-row:last-child .spui-Table-cell:first-child,.spui-Table--rounded:has(.spui-Table-footer) .spui-Table-body .spui-Table-row:last-child .spui-Table-cell:last-child,.spui-Table--rounded:has(.spui-Table-footer) .spui-Table-body .spui-Table-row:last-child .spui-Table-head:first-child,.spui-Table--rounded:has(.spui-Table-footer) .spui-Table-body .spui-Table-row:last-child .spui-Table-head:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0}.spui-Table--rounded .spui-Table-footer .spui-Table-row:last-child .spui-Table-cell:first-child,.spui-Table--rounded .spui-Table-footer .spui-Table-row:last-child .spui-Table-head:first-child{border-bottom-left-radius:calc(var(--Table-borderRadius) - 1px)}.spui-Table--rounded .spui-Table-footer .spui-Table-row:last-child .spui-Table-cell:last-child,.spui-Table--rounded .spui-Table-footer .spui-Table-row:last-child .spui-Table-head:last-child{border-bottom-right-radius:calc(var(--Table-borderRadius) - 1px)}.spui-Table--striped .spui-Table-body .spui-Table-row:nth-child(2n) .spui-Table-cell{background-color:var(--Table-row-striped-backgroundColor)}.spui-Table-caption{caption-side:bottom;color:var(--Table-caption-color);font-size:var(--Table-caption-fontSize);font-weight:var(--Table-caption-fontWeight);line-height:var(--Table-caption-lineHeight);margin-top:12px;text-align:left}.spui-Table-head{background-color:var(--Table-head-backgroundColor);color:var(--Table-head-color);font-size:var(--Table-head-fontSize);font-weight:var(--Table-head-fontWeight);line-height:var(--Table-head-lineHeight);overflow-wrap:break-word;padding:var(--Table-head-padding);text-align:left;vertical-align:middle}.spui-Table-head--alignLeft{text-align:left}.spui-Table-head--alignCenter{text-align:center}.spui-Table-head--alignRight{text-align:right}.spui-Table-cell{background-color:var(--Table-cell-backgroundColor);color:var(--Table-cell-color);font-size:var(--Table-cell-fontSize);font-weight:var(--Table-cell-fontWeight);line-height:var(--Table-cell-lineHeight);overflow-wrap:break-word;padding:var(--Table-cell-padding);text-align:left;vertical-align:middle}.spui-Table-cell--alignLeft{text-align:left}.spui-Table-cell--alignCenter{text-align:center}.spui-Table-cell--alignRight{text-align:right}@media (prefers-reduced-motion:reduce){.spui-Table-frame--scrollable{scroll-behavior:auto}}:root{--TextButton-tapHighlightColor:var(--white-60-alpha);--TextButton-onFocus-outlineColor:var(--color-focus-clarity);--TextButton-color:var(--color-text-accent-primary);--TextButton-icon-color:var(--color-object-accent-primary);--TextButton-fontWeight:bold;--TextButton--subtle-color:var(--color-text-low-emphasis);--TextButton--subtle-icon-color:var(--color-object-low-emphasis)}.spui-TextButton{background:none;border:none;border-radius:4px;color:var(--TextButton-color);font-family:inherit;font-size:1em;font-weight:var(--TextButton-fontWeight);line-height:1.3;margin:0;padding:0;-webkit-tap-highlight-color:var(--TextButton-tapHighlightColor);text-decoration:underline}.spui-TextButton:disabled{opacity:.3;text-decoration:none}.spui-TextButton:focus{outline:2px solid var(--TextButton-onFocus-outlineColor);outline-offset:1px}.spui-TextButton:focus:not(:focus-visible){outline:none}.spui-TextButton--subtle{color:var(--TextButton--subtle-color)}.spui-TextButton--hasIcon{align-items:center;display:inline-flex}.spui-TextButton-icon{line-height:0}.spui-TextButton--iconstart .spui-TextButton-icon{margin-right:4px}.spui-TextButton--iconend{flex-direction:row-reverse}.spui-TextButton--iconend .spui-TextButton-icon{margin-left:4px}.spui-TextButton--hasIcon,.spui-TextButton--underlinehover{text-decoration:none}@media (hover:hover){.spui-TextButton:hover{text-decoration:none}:is(.spui-TextButton--hasIcon,.spui-TextButton--underlinehover):hover{text-decoration:underline}.spui-TextButton:disabled:hover{text-decoration:none}}: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);line-height:1.3;-webkit-tap-highlight-color:var(--TextLink-tapHighlightColor);text-decoration:underline}.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{box-sizing:border-box;left:0;opacity:0;padding:0 12px;pointer-events:none;position:fixed;right:0;text-align:center;z-index:var(--Toast-z-index)}.spui-Toast-content{align-items:center;border-radius:52px;box-shadow:0 11px 28px rgba(8,18,26,.24);box-sizing:border-box;display:inline-flex;margin:0;max-width:360px;min-height:48px;padding:0 16px 0 20px;pointer-events:auto}.spui-Toast-contentInfo{flex-shrink:0;font-size:1.375rem;line-height:0;margin-right:8px}.spui-Toast-contentText{font-family:inherit;font-size:.875rem;font-weight:700;line-height:1.6;overflow:hidden;white-space:nowrap}.spui-Toast--top{top:0;transform:translateY(calc(var(--Toast--initial-height) - var(--Toast--offset-top)))}.spui-Toast--bottom{bottom:0;transform:translateY(calc((var(--Toast--initial-height) - var(--Toast--offset-bottom))*-1))}.spui-Toast--slide{transition:transform .3s ease,opacity .3s ease}.spui-Toast--hidden{visibility:hidden}.spui-Toast-slide--in{opacity:1;transition:transform .5s ease,opacity .5s ease}.spui-Toast-slide--in.spui-Toast--top{transform:translateY(var(--Toast--order-offset-top))}.spui-Toast-slide--in.spui-Toast--bottom{transform:translateY(var(--Toast--order-offset-bottom))}.spui-Toast-iconButton{--IconButton--neutral-backgroundColor:transparent;margin-left:12px}.spui-Toast-contentInfo--information{color:var(--color-object-high-emphasis-inverse)}.spui-Toast-content--information{background-color:var(--gray-80);color:var(--color-text-high-emphasis-inverse)}.spui-Toast-iconButton--information{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}.spui-Toast-contentInfo--confirmation{color:var(--color-object-accent-primary)}.spui-Toast-content--confirmation{background-color:var(--color-surface-primary);border:2px solid var(--color-border-low-emphasis);color:var(--color-text-accent-primary)}.spui-Toast-iconButton--confirmation{--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-color:var(--color-object-low-emphasis)}.spui-Toast-contentInfo--error{color:var(--color-object-high-emphasis-inverse)}.spui-Toast-content--error{background-color:var(--color-surface-caution);color:var(--color-text-high-emphasis-inverse)}.spui-Toast-iconButton--error{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}@media (prefers-reduced-motion:reduce){.spui-Toast--slide,.spui-Toast-slide--in{transition-duration:.1ms}}@media (max-width:384px){.spui-Toast-content{max-width:100%}}:root{--SnackBar-z-index:1;--SnackBar-onFocus-outlineColor:var(--color-focus-clarity)}.spui-SnackBar{box-sizing:border-box;left:0;opacity:0;padding:0 var(--SnackBar--offset-right) 0 var(--SnackBar--offset-left);pointer-events:none;position:fixed;right:0;text-align:var(--SnackBar--text-align);z-index:var(--SnackBar-z-index)}.spui-SnackBar-content{align-items:center;border-radius:16px;box-shadow:0 11px 28px rgba(8,18,26,.24);box-sizing:border-box;display:inline-grid;grid-template:"Icon Text Button IconButton" auto/auto 1fr auto auto;max-width:440px;min-height:52px;min-width:360px;padding:14px 16px 14px 20px;pointer-events:auto}.spui-SnackBar-icon{flex-shrink:0;font-size:1.375rem;grid-area:Icon;line-height:0;margin-right:12px}.spui-SnackBar-text{--SnackBar-max-lines:3;font-family:inherit;font-size:.875rem;font-weight:700;grid-area:Text;line-height:1.6;max-height:calc(1.6em*var(--SnackBar-max-lines));overflow:hidden;text-align:left}.spui-SnackBar-button{font-size:.875rem;grid-area:Button;margin-left:16px;margin-right:13px;position:relative}.spui-SnackBar-button:after{bottom:0;content:"";display:inline-block;position:absolute;right:-12px;top:0;width:1px}.spui-SnackBar--top{top:0;transform:translateY(calc(var(--SnackBar--initial-height-top) - var(--SnackBar--offset-top)))}.spui-SnackBar--bottom{bottom:0;transform:translateY(calc((var(--SnackBar--initial-height-bottom) - var(--SnackBar--offset-bottom))*-1))}.spui-SnackBar--slide{transition:transform .3s ease,opacity .3s ease}.spui-SnackBar--hidden{visibility:hidden}.spui-SnackBar-slide--in{opacity:1;transition:transform .5s ease,opacity .5s ease}.spui-SnackBar-slide--in.spui-SnackBar--top{transform:translateY(var(--SnackBar--order-offset-top))}.spui-SnackBar-slide--in.spui-SnackBar--bottom{transform:translateY(var(--SnackBar--order-offset-bottom))}.spui-SnackBar-iconButton{--IconButton--neutral-backgroundColor:transparent;grid-area:IconButton;margin-left:12px}.spui-SnackBar-content--information{background-color:var(--gray-80);color:var(--color-text-high-emphasis-inverse)}.spui-SnackBar-iconButton--information{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--information{--TextLink-color:var(--color-text-high-emphasis-inverse);--TextLink-icon-color:var(--color-object-high-emphasis-inverse);--TextButton-color:var(--color-text-high-emphasis-inverse);--TextButton-icon-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--information:after{background:var(--white-20-alpha)}.spui-SnackBar-content--confirmation{background-color:var(--color-surface-primary);border:2px solid var(--color-border-low-emphasis);color:var(--color-text-accent-primary)}.spui-SnackBar-iconButton--confirmation{--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-color:var(--color-object-low-emphasis)}.spui-SnackBar-button--confirmation{--TextLink-color:var(--color-text-low-emphasis);--TextLink-icon-color:var(--color-object-low-emphasis);--TextButton-color:var(--color-text-low-emphasis);--TextButton-icon-color:var(--color-object-low-emphasis)}.spui-SnackBar-button--confirmation:after{background:var(--color-border-low-emphasis)}.spui-SnackBar-content--error{background-color:var(--color-surface-caution);color:var(--color-text-high-emphasis-inverse)}.spui-SnackBar-iconButton--error{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--error{--TextLink-color:var(--color-text-high-emphasis-inverse);--TextLink-icon-color:var(--color-object-high-emphasis-inverse);--TextButton-color:var(--color-text-high-emphasis-inverse);--TextButton-icon-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--error:after{background:var(--white-20-alpha)}@media (prefers-reduced-motion:reduce){.spui-SnackBar--slide,.spui-SnackBar-slide--in{transition-duration:.1ms}}@media (max-width:464px){.spui-SnackBar{bottom:0;padding:0 12px;text-align:center;top:unset;transform:translateY(calc((var(--SnackBar--initial-height-bottom) - var(--SnackBar--offset-bottom))*-1))}.spui-SnackBar-slide--in.spui-SnackBar--top{transform:translateY(var(--SnackBar--order-offset-bottom))}.spui-SnackBar-content{border-radius:82px;max-width:400px;min-width:calc(100% - 24px);padding:14px 16px 14px 20px}}@media (max-width:320px){.spui-SnackBar-text{--SnackBar-max-lines:4}}:root{--MoreLink-tapHighlightColor:var(--gray-5-alpha);--MoreLink-backGroundColor:var(--color-surface-primary);--MoreLink-color:var(--color-text-accent-primary);--MoreLink-onFocus-outlineColor:var(--color-focus-clarity);--MoreLink-onHover-backgroundColor:var(--color-surface-accent-primary-light);--MoreLink-icon-color:var(--color-object-accent-primary)}.spui-MoreLink{align-items:center;background-color:var(--MoreLink-backGroundColor);box-sizing:border-box;color:var(--MoreLink-color);display:flex;font-family:inherit;font-size:1em;font-weight:700;justify-content:space-between;line-height:1.4;min-height:56px;padding:16px;-webkit-tap-highlight-color:var(--MoreLink-tapHighlightColor);text-decoration:none;transition:background-color .3s}.spui-MoreLink:focus{outline:2px solid var(--MoreLink-onFocus-outlineColor);outline-offset:1px}.spui-MoreLink:focus:not(:focus-visible){outline:none}@media (hover:hover){.spui-MoreLink:hover{background:var(--MoreLink-onHover-backgroundColor)}}.spui-MoreLink-icon{line-height:0;margin-left:12px}.spui-MoreLink-chevron{color:var(--MoreLink-icon-color)}:root{--DropdownMenu-z-index:1;--DropdownMenu-onFocus-outlineColor:var(--color-focus-clarity)}.spui-DropdownMenu{position:relative;width:-moz-fit-content;width:fit-content}.spui-DropdownMenu-menu{animation:spui-DropdownMenu-fade-in .3s;background-color:var(--color-surface-primary);border-radius:12px;box-shadow:0 11px 28px rgba(8,18,26,.12);box-sizing:border-box;list-style:none;margin:0;padding:12px 0;position:absolute;width:256px;z-index:var(--DropdownMenu-z-index)}.spui-DropdownMenu-menu.is-fade-out{animation:spui-DropdownMenu-fade-out .3s;opacity:0}.spui-DropdownMenu-menu--topCenter,.spui-DropdownMenu-menu--topLeft,.spui-DropdownMenu-menu--topRight{margin-bottom:8px}.spui-DropdownMenu-menu--bottomCenter,.spui-DropdownMenu-menu--bottomLeft,.spui-DropdownMenu-menu--bottomRight{margin-top:8px}.spui-DropdownMenu-menu--bottomLeft,.spui-DropdownMenu-menu--topLeft{left:0}.spui-DropdownMenu-menu--bottomRight,.spui-DropdownMenu-menu--topRight{right:0}.spui-DropdownMenu-menu--rightBottom,.spui-DropdownMenu-menu--rightCenter,.spui-DropdownMenu-menu--rightTop{right:-264px}.spui-DropdownMenu-menu--leftBottom,.spui-DropdownMenu-menu--leftCenter,.spui-DropdownMenu-menu--leftTop{left:-264px}.spui-DropdownMenu-menu--leftTop,.spui-DropdownMenu-menu--rightTop{top:0}.spui-DropdownMenu-menu--leftBottom,.spui-DropdownMenu-menu--rightBottom{bottom:0}.spui-DropdownMenu-menuButton{align-items:center;background-color:var(--color-surface-primary);border:none;display:flex;font-size:1em;position:relative;transition:background-color .3s;width:100%}.spui-DropdownMenu-menu--text .spui-DropdownMenu-menuButton,.spui-DropdownMenu-menu--textWithIcon .spui-DropdownMenu-menuButton{padding:10px 16px}.spui-DropdownMenu-menu--headWithIcon .spui-DropdownMenu-menuButton{padding:16px}.spui-DropdownMenu-menu--headWithIconAndCaption .spui-DropdownMenu-menuButton{padding:14px 16px}.spui-DropdownMenu-menuButton:hover{background-color:var(--color-surface-secondary)}.spui-DropdownMenu-menuButton:focus-visible{outline:2px solid var(--DropdownMenu-onFocus-outlineColor);z-index:var(--DropdownMenu-z-index)}.spui-DropdownMenu-menuItem .spui-DropdownMenu-menuButton:before{background-color:var(--color-border-low-emphasis);content:"";height:1px;position:absolute;top:0;width:calc(100% - 32px)}.spui-DropdownMenu-menuItem:first-child .spui-DropdownMenu-menuButton:before{height:0}.spui-DropdownMenu-iconContainer{color:var(--color-object-high-emphasis);display:flex;font-size:1.5em;margin-right:16px}.spui-DropdownMenu-textContainer{text-align:left}.spui-DropdownMenu-title{color:var(--color-text-high-emphasis);font-size:1em;line-height:1.3;margin:0}.spui-DropdownMenu-caption{color:var(--color-text-low-emphasis);font-size:.75em;line-height:1.4;margin:4px 0 0}@keyframes spui-DropdownMenu-fade-in{0%{opacity:0}to{opacity:1}}@keyframes spui-DropdownMenu-fade-out{0%{opacity:1}to{opacity:0}}@media screen and (max-width:768px){.spui-DropdownMenu-menu--rightBottom,.spui-DropdownMenu-menu--rightCenter,.spui-DropdownMenu-menu--rightTop{bottom:auto;left:0;margin-top:8px;top:auto!important}.spui-DropdownMenu-menu--leftBottom,.spui-DropdownMenu-menu--leftCenter,.spui-DropdownMenu-menu--leftTop{bottom:auto;left:auto;margin-top:8px;right:0;top:auto!important}}@media (prefers-reduced-motion:reduce){.spui-DropdownMenu-menu{animation:spui-DropdownMenu-fade-in 0s}.spui-DropdownMenu-menu.is-fade-out{animation:spui-DropdownMenu-fade-out 0s}}.spui-PaginationItem-link{align-items:center;background:none;border:none;border-radius:12px;box-sizing:border-box;color:var(--color-text-medium-emphasis);display:flex;font-size:.875em;font-weight:700;height:40px;justify-content:center;line-height:1.3;margin:0;min-width:40px;padding:0;position:relative;-webkit-tap-highlight-color:var(--Pagination-tapHighlightColor);text-decoration:none}.spui-PaginationItem-link--first[aria-disabled],.spui-PaginationItem-link--last[aria-disabled],.spui-PaginationItem-link--next[aria-disabled],.spui-PaginationItem-link--prev[aria-disabled]{opacity:.3}.spui-PaginationItem-link[aria-disabled]:focus-visible{outline:none}.spui-PaginationItem-link:not([aria-disabled]):focus-visible{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-PaginationItem-icon{box-sizing:border-box;height:24px;padding:0 4px;width:24px}.spui-PaginationItem-link--prev{flex-direction:row-reverse}.spui-PaginationItem-link--prev .spui-PaginationItem-label{padding-right:8px}.spui-PaginationItem-link--next .spui-PaginationItem-label{padding-left:8px}@media (hover:hover){.spui-PaginationItem-link:not([aria-disabled]):hover{background:var(--color-surface-tertiary)}}@container spui-pagination (max-width: 768px){.spui-PaginationItem-label{display:none}}:root{--Pagination-tapHighlightColor:var(--color-tap-highlight-base)}.spui-Pagination{align-items:center;container:spui-pagination/inline-size;display:flex;flex-direction:column}.spui-Pagination-list{align-items:center;display:flex;list-style:none;margin:0;padding:0}.spui-Pagination-item{align-items:center;display:flex;margin:0 5px}.spui-Pagination-item--first,.spui-Pagination-item--last{margin:0}.spui-Pagination-ellipsis{color:var(--color-object-low-emphasis)}.spui-Pagination-link{align-items:center;background:none;border:none;border-radius:12px;box-sizing:border-box;display:flex;font-size:.875em;height:40px;justify-content:center;line-height:1.3;margin:0;min-width:40px;padding:0 10px;position:relative;-webkit-tap-highlight-color:var(--Pagination-tapHighlightColor);text-decoration:none}.spui-Pagination-link:not([aria-current]){background:var(--color-surface-tertiary);color:var(--color-text-medium-emphasis);font-weight:700}.spui-Pagination-link:focus:not(:focus-visible){outline:none}.spui-Pagination-link[aria-current]{border:1px solid var(--color-border-low-emphasis);color:var(--color-text-low-emphasis)}.spui-Pagination-link:focus-visible{outline:2px solid var(--color-focus-clarity);outline-offset:1px}@media (hover:hover){.spui-Pagination-link:not([aria-current]):hover{background-color:var(--color-surface-quaternary)}}.spui-Pagination-total{color:var(--color-text-low-emphasis);font-size:.8125em;line-height:1.3;margin:12px 0 0;padding:0}.spui-Pagination-link+.spui-Pagination-ellipsis{margin-left:10px}@container spui-pagination (max-width: 360px){.spui-Pagination-item--first,.spui-Pagination-item--last{display:none}}:root{--InlineNotification--neutral-backgroundColor:var(--white-20-alpha);--InlineNotification--neutral-color:var(--color-text-high-emphasis-inverse);--InlineNotification--neutral-onHover-backgroundColor:var(--white-30-alpha);--InlineNotification--neutral-onActive-backgroundColor:var(--white-30-alpha);--InlineNotification--outlined-onHover-backgroundColor:var(--white-50-alpha);--InlineNotification--outlined-onActive-backgroundColor:var(
|
|
19
|
+
);display:inline-flex;margin:36px 0 0}.spui-AppealModal-closeTextButton{display:none}}:root{--SemiModal-footer-justifyContent:right;--SemiModal-footer-button-minWidth:160px;--SemiModal-sp-footer-justifyContent:center}.spui-SemiModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);height:-moz-fit-content;height:fit-content;opacity:0;padding:0;position:fixed;transition:opacity .35s cubic-bezier(0,0,0,1),display allow-discrete .35s,overlay allow-discrete .35s;width:-moz-fit-content;width:fit-content}.spui-SemiModal[data-type=sheet]{border-radius:20px 20px 0 0;bottom:0;margin:auto auto 0;transform:translateY(100%);transition:opacity .35s cubic-bezier(0,0,0,1),transform .35s cubic-bezier(0,0,0,1),display allow-discrete .35s,overlay allow-discrete .35s;will-change:translate}.spui-SemiModal--styleOnly,.spui-SemiModal[open],.spui-SemiModal[open]::backdrop{opacity:1}.spui-SemiModal::backdrop{background:rgba(0,0,0,.6);opacity:0;transition:opacity .35s cubic-bezier(0,0,0,1),display allow-discrete .35s,overlay allow-discrete .35s}.spui-SemiModal[data-type=sheet][open]{transform:translateY(0)}@starting-style{.spui-SemiModal[open]{opacity:0}.spui-SemiModal[open]::backdrop{opacity:0}.spui-SemiModal[data-type=sheet][open]{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.spui-SemiModal,.spui-SemiModal::backdrop{transition-duration:.01s}}html:has(.spui-SemiModal[open]){overflow:hidden}@media screen and (max-width:440px){.spui-SemiModal{width:calc(100% - 40px)}}.spui-SemiModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 2px var(--color-focus-clarity);outline:none}.spui-SemiModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-SemiModal-frame{box-sizing:border-box;color:var(--color-text-medium-emphasis);display:flex;flex-direction:column;padding:0 16px 36px 36px}.spui-SemiModal-header{align-items:center;display:grid;gap:16px;grid-template-columns:1fr auto;justify-content:space-between;overflow-wrap:break-word;padding:32px 8px 32px 0}.spui-SemiModal-closeIconButton{height:48px;width:48px;--IconButton--neutral-backgroundColor:transparent;--IconButton--neutral-onHover-backgroundColor:var(--color-surface-tertiary)}.spui-SemiModal-headerTitle{-webkit-box-orient:vertical;color:var(--color-text-high-emphasis);display:-webkit-box;font-size:1.25em;font-weight:600;height:-moz-fit-content;height:fit-content;-webkit-line-clamp:3;line-height:1.4;margin:0;overflow:hidden;width:100%}.spui-SemiModal-contents{line-height:1.6;overflow:hidden scroll}.spui-SemiModal-contents::-webkit-scrollbar{border-radius:4px;width:8px}.spui-SemiModal-contents::-webkit-scrollbar-thumb{background:var(--color-object-low-emphasis);border-radius:4px}.spui-SemiModal-contents::-webkit-scrollbar-track:enabled{background-color:var(--color-surface-secondary);border-radius:4px}.spui-SemiModal-footer{background-color:var(--color-surface-primary);bottom:0;display:flex;padding:24px 20px 0 0}.spui-SemiModal-footer:empty{padding:0 0 36px}@media screen and (min-width:768px){.spui-SemiModal[data-type=popup][data-size=small] .spui-SemiModal-frame{max-height:400px;max-width:480px}.spui-SemiModal[data-type=popup][data-size=medium] .spui-SemiModal-frame{max-height:700px;max-width:840px}.spui-SemiModal[data-type=popup][data-size=large] .spui-SemiModal-frame{max-height:840px;max-width:1024px}.spui-SemiModal[data-type=sheet] .spui-SemiModal-frame{max-height:calc(100dvh - 200px)}.spui-SemiModal[data-type=sheet][data-size=small] .spui-SemiModal-frame{max-width:480px}.spui-SemiModal[data-type=sheet][data-size=medium] .spui-SemiModal-frame{max-width:840px}.spui-SemiModal[data-type=sheet][data-size=large] .spui-SemiModal-frame{max-width:1024px}.spui-SemiModal-footer{justify-content:var(--SemiModal-footer-justifyContent)}.spui-SemiModal-footer :is(.spui-Button,.spui-LinkButton){min-width:var(--SemiModal-footer-button-minWidth)}}@media screen and (max-width:768px){.spui-SemiModal[data-type=sheet]{margin:auto 0 0;max-width:100%;width:100%}.spui-SemiModal[data-type=popup] .spui-SemiModal-frame,.spui-SemiModal[data-type=sheet] .spui-SemiModal-frame{max-height:calc(100dvh - 40px)}.spui-SemiModal[data-type=popup]{margin:auto 20px}.spui-SemiModal-contents{max-height:100%}.spui-SemiModal-header{padding:24px 0}.spui-SemiModal-closeIconButton{height:24px;width:24px;--IconButton--neutral-onHover-backgroundColor:transparent}.spui-SemiModal-frame{padding:0 20px 24px}.spui-SemiModal-footer{justify-content:var(--SemiModal-sp-footer-justifyContent);padding:16px 0 0}.spui-SemiModal-footer :is(.spui-Button,.spui-LinkButton){max-width:360px;width:100%}}:root{--Table-backgroundColor:var(--color-surface-primary);--Table-head-backgroundColor:var(--color-surface-tertiary);--Table-cell-backgroundColor:var(--color-surface-primary);--Table-row-striped-backgroundColor:var(--color-background);--Table-head-color:var(--color-text-high-emphasis);--Table-cell-color:var(--color-text-high-emphasis);--Table-footer-color:var(--color-text-high-emphasis);--Table-head-fontWeight:bold;--Table-cell-fontWeight:normal;--Table-footer-fontWeight:normal;--Table-head-fontSize:0.875em;--Table-cell-fontSize:0.875em;--Table-footer-fontSize:0.875em;--Table-head-lineHeight:1.4;--Table-cell-lineHeight:1.4;--Table-footer-lineHeight:1.4;--Table-outlineColor:var(--color-border-strong-emphasis);--Table-cell-borderColor:var(--color-border-low-emphasis);--Table-footer-separatorColor:var(--color-border-medium-emphasis);--Table-borderRadius:16px;--Table-head-padding:12px;--Table-cell-padding:12px;--Table-footer-padding:12px;--Table-caption-color:var(--color-text-low-emphasis);--Table-caption-fontSize:0.75em;--Table-caption-lineHeight:1.6;--Table-caption-fontWeight:normal}.spui-Table-frame{position:relative;width:100%}.spui-Table-frame--scrollable{overflow-x:auto;scroll-behavior:smooth}.spui-Table{background-color:var(--Table-backgroundColor);border-spacing:0;table-layout:auto;width:100%}.spui-Table--fixed{table-layout:fixed}.spui-Table--scrollable{min-width:-moz-max-content;min-width:max-content;width:100%}.spui-Table--horizontal .spui-Table-cell,.spui-Table--horizontal .spui-Table-head{border-bottom:1px solid var(--Table-cell-borderColor)}.spui-Table--horizontal .spui-Table-body .spui-Table-row:last-child .spui-Table-cell,.spui-Table--horizontal .spui-Table-body .spui-Table-row:last-child .spui-Table-head{border-bottom:none}.spui-Table--horizontal .spui-Table-footer .spui-Table-row:first-child .spui-Table-cell,.spui-Table--horizontal .spui-Table-footer .spui-Table-row:first-child .spui-Table-head{border-top:2px solid var(--Table-footer-separatorColor)}.spui-Table--horizontal .spui-Table-footer .spui-Table-row:last-child .spui-Table-cell,.spui-Table--horizontal .spui-Table-footer .spui-Table-row:last-child .spui-Table-head{border-bottom:none}.spui-Table--vertical .spui-Table-cell,.spui-Table--vertical .spui-Table-head{border-right:1px solid var(--Table-cell-borderColor)}.spui-Table--vertical .spui-Table-cell:last-child,.spui-Table--vertical .spui-Table-head:last-child{border-right:none}.spui-Table--outlined{border:1px solid var(--Table-outlineColor)}.spui-Table-footer .spui-Table-cell{background-color:var(--Table-cell-backgroundColor)}.spui-Table-footer .spui-Table-cell,.spui-Table-footer .spui-Table-head{color:var(--Table-footer-color);font-size:var(--Table-footer-fontSize);font-weight:var(--Table-footer-fontWeight);line-height:var(--Table-footer-lineHeight);padding:var(--Table-footer-padding)}.spui-Table--rounded{border-collapse:separate;border-spacing:0}.spui-Table--rounded,.spui-Table--rounded.spui-Table--outlined{border-radius:var(--Table-borderRadius)}.spui-Table--rounded .spui-Table-header .spui-Table-row:first-child .spui-Table-head:first-child{border-top-left-radius:calc(var(--Table-borderRadius) - 1px)}.spui-Table--rounded .spui-Table-header .spui-Table-row:first-child .spui-Table-head:last-child{border-top-right-radius:calc(var(--Table-borderRadius) - 1px)}.spui-Table--rounded:not(:has(.spui-Table-header)) .spui-Table-body .spui-Table-row:first-child .spui-Table-cell:first-child,.spui-Table--rounded:not(:has(.spui-Table-header)) .spui-Table-body .spui-Table-row:first-child .spui-Table-head:first-child{border-top-left-radius:calc(var(--Table-borderRadius) - 1px)}.spui-Table--rounded:not(:has(.spui-Table-header)) .spui-Table-body .spui-Table-row:first-child .spui-Table-cell:last-child,.spui-Table--rounded:not(:has(.spui-Table-header)) .spui-Table-body .spui-Table-row:first-child .spui-Table-head:last-child{border-top-right-radius:calc(var(--Table-borderRadius) - 1px)}.spui-Table--rounded .spui-Table-body .spui-Table-row:last-child .spui-Table-cell:first-child,.spui-Table--rounded .spui-Table-body .spui-Table-row:last-child .spui-Table-head:first-child{border-bottom-left-radius:calc(var(--Table-borderRadius) - 1px)}.spui-Table--rounded .spui-Table-body .spui-Table-row:last-child .spui-Table-cell:last-child,.spui-Table--rounded .spui-Table-body .spui-Table-row:last-child .spui-Table-head:last-child{border-bottom-right-radius:calc(var(--Table-borderRadius) - 1px)}.spui-Table--rounded:has(.spui-Table-footer) .spui-Table-body .spui-Table-row:last-child .spui-Table-cell:first-child,.spui-Table--rounded:has(.spui-Table-footer) .spui-Table-body .spui-Table-row:last-child .spui-Table-cell:last-child,.spui-Table--rounded:has(.spui-Table-footer) .spui-Table-body .spui-Table-row:last-child .spui-Table-head:first-child,.spui-Table--rounded:has(.spui-Table-footer) .spui-Table-body .spui-Table-row:last-child .spui-Table-head:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0}.spui-Table--rounded .spui-Table-footer .spui-Table-row:last-child .spui-Table-cell:first-child,.spui-Table--rounded .spui-Table-footer .spui-Table-row:last-child .spui-Table-head:first-child{border-bottom-left-radius:calc(var(--Table-borderRadius) - 1px)}.spui-Table--rounded .spui-Table-footer .spui-Table-row:last-child .spui-Table-cell:last-child,.spui-Table--rounded .spui-Table-footer .spui-Table-row:last-child .spui-Table-head:last-child{border-bottom-right-radius:calc(var(--Table-borderRadius) - 1px)}.spui-Table--striped .spui-Table-body .spui-Table-row:nth-child(2n) .spui-Table-cell{background-color:var(--Table-row-striped-backgroundColor)}.spui-Table-caption{caption-side:bottom;color:var(--Table-caption-color);font-size:var(--Table-caption-fontSize);font-weight:var(--Table-caption-fontWeight);line-height:var(--Table-caption-lineHeight);margin-top:12px;text-align:left}.spui-Table-head{background-color:var(--Table-head-backgroundColor);color:var(--Table-head-color);font-size:var(--Table-head-fontSize);font-weight:var(--Table-head-fontWeight);line-height:var(--Table-head-lineHeight);overflow-wrap:break-word;padding:var(--Table-head-padding);text-align:left;vertical-align:middle}.spui-Table-head--alignLeft{text-align:left}.spui-Table-head--alignCenter{text-align:center}.spui-Table-head--alignRight{text-align:right}.spui-Table-cell{background-color:var(--Table-cell-backgroundColor);color:var(--Table-cell-color);font-size:var(--Table-cell-fontSize);font-weight:var(--Table-cell-fontWeight);line-height:var(--Table-cell-lineHeight);overflow-wrap:break-word;padding:var(--Table-cell-padding);text-align:left;vertical-align:middle}.spui-Table-cell--alignLeft{text-align:left}.spui-Table-cell--alignCenter{text-align:center}.spui-Table-cell--alignRight{text-align:right}@media (prefers-reduced-motion:reduce){.spui-Table-frame--scrollable{scroll-behavior:auto}}:root{--TextButton-tapHighlightColor:var(--white-60-alpha);--TextButton-onFocus-outlineColor:var(--color-focus-clarity);--TextButton-color:var(--color-text-accent-primary);--TextButton-icon-color:var(--color-object-accent-primary);--TextButton-fontWeight:bold;--TextButton--subtle-color:var(--color-text-low-emphasis);--TextButton--subtle-icon-color:var(--color-object-low-emphasis)}.spui-TextButton{background:none;border:none;border-radius:4px;color:var(--TextButton-color);font-family:inherit;font-size:1em;font-weight:var(--TextButton-fontWeight);line-height:1.3;margin:0;padding:0;-webkit-tap-highlight-color:var(--TextButton-tapHighlightColor);text-decoration:underline}.spui-TextButton:disabled{opacity:.3;text-decoration:none}.spui-TextButton:focus{outline:2px solid var(--TextButton-onFocus-outlineColor);outline-offset:1px}.spui-TextButton:focus:not(:focus-visible){outline:none}.spui-TextButton--subtle{color:var(--TextButton--subtle-color)}.spui-TextButton--hasIcon{align-items:center;display:inline-flex}.spui-TextButton-icon{line-height:0}.spui-TextButton--iconstart .spui-TextButton-icon{margin-right:4px}.spui-TextButton--iconend{flex-direction:row-reverse}.spui-TextButton--iconend .spui-TextButton-icon{margin-left:4px}.spui-TextButton--hasIcon,.spui-TextButton--underlinehover{text-decoration:none}@media (hover:hover){.spui-TextButton:hover{text-decoration:none}:is(.spui-TextButton--hasIcon,.spui-TextButton--underlinehover):hover{text-decoration:underline}.spui-TextButton:disabled:hover{text-decoration:none}}: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);line-height:1.3;-webkit-tap-highlight-color:var(--TextLink-tapHighlightColor);text-decoration:underline}.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{box-sizing:border-box;left:0;opacity:0;padding:0 12px;pointer-events:none;position:fixed;right:0;text-align:center;z-index:var(--Toast-z-index)}.spui-Toast-content{align-items:center;border-radius:52px;box-shadow:0 11px 28px rgba(8,18,26,.24);box-sizing:border-box;display:inline-flex;margin:0;max-width:360px;min-height:48px;padding:0 16px 0 20px;pointer-events:auto}.spui-Toast-contentInfo{flex-shrink:0;font-size:1.375rem;line-height:0;margin-right:8px}.spui-Toast-contentText{font-family:inherit;font-size:.875rem;font-weight:700;line-height:1.6;overflow:hidden;white-space:nowrap}.spui-Toast--top{top:0;transform:translateY(calc(var(--Toast--initial-height) - var(--Toast--offset-top)))}.spui-Toast--bottom{bottom:0;transform:translateY(calc((var(--Toast--initial-height) - var(--Toast--offset-bottom))*-1))}.spui-Toast--slide{transition:transform .3s ease,opacity .3s ease}.spui-Toast--hidden{visibility:hidden}.spui-Toast-slide--in{opacity:1;transition:transform .5s ease,opacity .5s ease}.spui-Toast-slide--in.spui-Toast--top{transform:translateY(var(--Toast--order-offset-top))}.spui-Toast-slide--in.spui-Toast--bottom{transform:translateY(var(--Toast--order-offset-bottom))}.spui-Toast-iconButton{--IconButton--neutral-backgroundColor:transparent;margin-left:12px}.spui-Toast-contentInfo--information{color:var(--color-object-high-emphasis-inverse)}.spui-Toast-content--information{background-color:var(--gray-80);color:var(--color-text-high-emphasis-inverse)}.spui-Toast-iconButton--information{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}.spui-Toast-contentInfo--confirmation{color:var(--color-object-accent-primary)}.spui-Toast-content--confirmation{background-color:var(--color-surface-primary);border:2px solid var(--color-border-low-emphasis);color:var(--color-text-accent-primary)}.spui-Toast-iconButton--confirmation{--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-color:var(--color-object-low-emphasis)}.spui-Toast-contentInfo--error{color:var(--color-object-high-emphasis-inverse)}.spui-Toast-content--error{background-color:var(--color-surface-caution);color:var(--color-text-high-emphasis-inverse)}.spui-Toast-iconButton--error{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}@media (prefers-reduced-motion:reduce){.spui-Toast--slide,.spui-Toast-slide--in{transition-duration:.1ms}}@media (max-width:384px){.spui-Toast-content{max-width:100%}}:root{--SnackBar-z-index:1;--SnackBar-onFocus-outlineColor:var(--color-focus-clarity)}.spui-SnackBar{box-sizing:border-box;left:0;opacity:0;padding:0 var(--SnackBar--offset-right) 0 var(--SnackBar--offset-left);pointer-events:none;position:fixed;right:0;text-align:var(--SnackBar--text-align);z-index:var(--SnackBar-z-index)}.spui-SnackBar-content{align-items:center;border-radius:16px;box-shadow:0 11px 28px rgba(8,18,26,.24);box-sizing:border-box;display:inline-grid;grid-template:"Icon Text Button IconButton" auto/auto 1fr auto auto;max-width:440px;min-height:52px;min-width:360px;padding:14px 16px 14px 20px;pointer-events:auto}.spui-SnackBar-icon{flex-shrink:0;font-size:1.375rem;grid-area:Icon;line-height:0;margin-right:12px}.spui-SnackBar-text{--SnackBar-max-lines:3;font-family:inherit;font-size:.875rem;font-weight:700;grid-area:Text;line-height:1.6;max-height:calc(1.6em*var(--SnackBar-max-lines));overflow:hidden;text-align:left}.spui-SnackBar-button{font-size:.875rem;grid-area:Button;margin-left:16px;margin-right:13px;position:relative}.spui-SnackBar-button:after{bottom:0;content:"";display:inline-block;position:absolute;right:-12px;top:0;width:1px}.spui-SnackBar--top{top:0;transform:translateY(calc(var(--SnackBar--initial-height-top) - var(--SnackBar--offset-top)))}.spui-SnackBar--bottom{bottom:0;transform:translateY(calc((var(--SnackBar--initial-height-bottom) - var(--SnackBar--offset-bottom))*-1))}.spui-SnackBar--slide{transition:transform .3s ease,opacity .3s ease}.spui-SnackBar--hidden{visibility:hidden}.spui-SnackBar-slide--in{opacity:1;transition:transform .5s ease,opacity .5s ease}.spui-SnackBar-slide--in.spui-SnackBar--top{transform:translateY(var(--SnackBar--order-offset-top))}.spui-SnackBar-slide--in.spui-SnackBar--bottom{transform:translateY(var(--SnackBar--order-offset-bottom))}.spui-SnackBar-iconButton{--IconButton--neutral-backgroundColor:transparent;grid-area:IconButton;margin-left:12px}.spui-SnackBar-content--information{background-color:var(--gray-80);color:var(--color-text-high-emphasis-inverse)}.spui-SnackBar-iconButton--information{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--information{--TextLink-color:var(--color-text-high-emphasis-inverse);--TextLink-icon-color:var(--color-object-high-emphasis-inverse);--TextButton-color:var(--color-text-high-emphasis-inverse);--TextButton-icon-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--information:after{background:var(--white-20-alpha)}.spui-SnackBar-content--confirmation{background-color:var(--color-surface-primary);border:2px solid var(--color-border-low-emphasis);color:var(--color-text-accent-primary)}.spui-SnackBar-iconButton--confirmation{--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-color:var(--color-object-low-emphasis)}.spui-SnackBar-button--confirmation{--TextLink-color:var(--color-text-low-emphasis);--TextLink-icon-color:var(--color-object-low-emphasis);--TextButton-color:var(--color-text-low-emphasis);--TextButton-icon-color:var(--color-object-low-emphasis)}.spui-SnackBar-button--confirmation:after{background:var(--color-border-low-emphasis)}.spui-SnackBar-content--error{background-color:var(--color-surface-caution);color:var(--color-text-high-emphasis-inverse)}.spui-SnackBar-iconButton--error{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--error{--TextLink-color:var(--color-text-high-emphasis-inverse);--TextLink-icon-color:var(--color-object-high-emphasis-inverse);--TextButton-color:var(--color-text-high-emphasis-inverse);--TextButton-icon-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--error:after{background:var(--white-20-alpha)}@media (prefers-reduced-motion:reduce){.spui-SnackBar--slide,.spui-SnackBar-slide--in{transition-duration:.1ms}}@media (max-width:464px){.spui-SnackBar{bottom:0;padding:0 12px;text-align:center;top:unset;transform:translateY(calc((var(--SnackBar--initial-height-bottom) - var(--SnackBar--offset-bottom))*-1))}.spui-SnackBar-slide--in.spui-SnackBar--top{transform:translateY(var(--SnackBar--order-offset-bottom))}.spui-SnackBar-content{border-radius:82px;max-width:400px;min-width:calc(100% - 24px);padding:14px 16px 14px 20px}}@media (max-width:320px){.spui-SnackBar-text{--SnackBar-max-lines:4}}:root{--MoreLink-tapHighlightColor:var(--gray-5-alpha);--MoreLink-backGroundColor:var(--color-surface-primary);--MoreLink-color:var(--color-text-accent-primary);--MoreLink-onFocus-outlineColor:var(--color-focus-clarity);--MoreLink-onHover-backgroundColor:var(--color-surface-accent-primary-light);--MoreLink-icon-color:var(--color-object-accent-primary)}.spui-MoreLink{align-items:center;background-color:var(--MoreLink-backGroundColor);box-sizing:border-box;color:var(--MoreLink-color);display:flex;font-family:inherit;font-size:1em;font-weight:700;justify-content:space-between;line-height:1.4;min-height:56px;padding:16px;-webkit-tap-highlight-color:var(--MoreLink-tapHighlightColor);text-decoration:none;transition:background-color .3s}.spui-MoreLink:focus{outline:2px solid var(--MoreLink-onFocus-outlineColor);outline-offset:1px}.spui-MoreLink:focus:not(:focus-visible){outline:none}@media (hover:hover){.spui-MoreLink:hover{background:var(--MoreLink-onHover-backgroundColor)}}.spui-MoreLink-icon{line-height:0;margin-left:12px}.spui-MoreLink-chevron{color:var(--MoreLink-icon-color)}:root{--DropdownMenu-z-index:1;--DropdownMenu-onFocus-outlineColor:var(--color-focus-clarity)}.spui-DropdownMenu{position:relative;width:-moz-fit-content;width:fit-content}.spui-DropdownMenu-menu{animation:spui-DropdownMenu-fade-in .3s;background-color:var(--color-surface-primary);border-radius:12px;box-shadow:0 11px 28px rgba(8,18,26,.12);box-sizing:border-box;list-style:none;margin:0;padding:12px 0;position:absolute;width:256px;z-index:var(--DropdownMenu-z-index)}.spui-DropdownMenu-menu.is-fade-out{animation:spui-DropdownMenu-fade-out .3s;opacity:0}.spui-DropdownMenu-menu--topCenter,.spui-DropdownMenu-menu--topLeft,.spui-DropdownMenu-menu--topRight{margin-bottom:8px}.spui-DropdownMenu-menu--bottomCenter,.spui-DropdownMenu-menu--bottomLeft,.spui-DropdownMenu-menu--bottomRight{margin-top:8px}.spui-DropdownMenu-menu--bottomLeft,.spui-DropdownMenu-menu--topLeft{left:0}.spui-DropdownMenu-menu--bottomRight,.spui-DropdownMenu-menu--topRight{right:0}.spui-DropdownMenu-menu--rightBottom,.spui-DropdownMenu-menu--rightCenter,.spui-DropdownMenu-menu--rightTop{right:-264px}.spui-DropdownMenu-menu--leftBottom,.spui-DropdownMenu-menu--leftCenter,.spui-DropdownMenu-menu--leftTop{left:-264px}.spui-DropdownMenu-menu--leftTop,.spui-DropdownMenu-menu--rightTop{top:0}.spui-DropdownMenu-menu--leftBottom,.spui-DropdownMenu-menu--rightBottom{bottom:0}.spui-DropdownMenu-menuButton{align-items:center;background-color:var(--color-surface-primary);border:none;display:flex;font-size:1em;position:relative;transition:background-color .3s;width:100%}.spui-DropdownMenu-menu--text .spui-DropdownMenu-menuButton,.spui-DropdownMenu-menu--textWithIcon .spui-DropdownMenu-menuButton{padding:10px 16px}.spui-DropdownMenu-menu--headWithIcon .spui-DropdownMenu-menuButton{padding:16px}.spui-DropdownMenu-menu--headWithIconAndCaption .spui-DropdownMenu-menuButton{padding:14px 16px}.spui-DropdownMenu-menuButton:hover{background-color:var(--color-surface-secondary)}.spui-DropdownMenu-menuButton:focus-visible{outline:2px solid var(--DropdownMenu-onFocus-outlineColor);z-index:var(--DropdownMenu-z-index)}.spui-DropdownMenu-menuItem .spui-DropdownMenu-menuButton:before{background-color:var(--color-border-low-emphasis);content:"";height:1px;position:absolute;top:0;width:calc(100% - 32px)}.spui-DropdownMenu-menuItem:first-child .spui-DropdownMenu-menuButton:before{height:0}.spui-DropdownMenu-iconContainer{color:var(--color-object-high-emphasis);display:flex;font-size:1.5em;margin-right:16px}.spui-DropdownMenu-textContainer{text-align:left}.spui-DropdownMenu-title{color:var(--color-text-high-emphasis);font-size:1em;line-height:1.3;margin:0}.spui-DropdownMenu-caption{color:var(--color-text-low-emphasis);font-size:.75em;line-height:1.4;margin:4px 0 0}@keyframes spui-DropdownMenu-fade-in{0%{opacity:0}to{opacity:1}}@keyframes spui-DropdownMenu-fade-out{0%{opacity:1}to{opacity:0}}@media screen and (max-width:768px){.spui-DropdownMenu-menu--rightBottom,.spui-DropdownMenu-menu--rightCenter,.spui-DropdownMenu-menu--rightTop{bottom:auto;left:0;margin-top:8px;top:auto!important}.spui-DropdownMenu-menu--leftBottom,.spui-DropdownMenu-menu--leftCenter,.spui-DropdownMenu-menu--leftTop{bottom:auto;left:auto;margin-top:8px;right:0;top:auto!important}}@media (prefers-reduced-motion:reduce){.spui-DropdownMenu-menu{animation:spui-DropdownMenu-fade-in 0s}.spui-DropdownMenu-menu.is-fade-out{animation:spui-DropdownMenu-fade-out 0s}}.spui-PaginationItem-link{align-items:center;background:none;border:none;border-radius:12px;box-sizing:border-box;color:var(--color-text-medium-emphasis);display:flex;font-size:.875em;font-weight:700;height:40px;justify-content:center;line-height:1.3;margin:0;min-width:40px;padding:0;position:relative;-webkit-tap-highlight-color:var(--Pagination-tapHighlightColor);text-decoration:none}.spui-PaginationItem-link--first[aria-disabled],.spui-PaginationItem-link--last[aria-disabled],.spui-PaginationItem-link--next[aria-disabled],.spui-PaginationItem-link--prev[aria-disabled]{opacity:.3}.spui-PaginationItem-link[aria-disabled]:focus-visible{outline:none}.spui-PaginationItem-link:not([aria-disabled]):focus-visible{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-PaginationItem-icon{box-sizing:border-box;height:24px;padding:0 4px;width:24px}.spui-PaginationItem-link--prev{flex-direction:row-reverse}.spui-PaginationItem-link--prev .spui-PaginationItem-label{padding-right:8px}.spui-PaginationItem-link--next .spui-PaginationItem-label{padding-left:8px}@media (hover:hover){.spui-PaginationItem-link:not([aria-disabled]):hover{background:var(--color-surface-tertiary)}}@container spui-pagination (max-width: 768px){.spui-PaginationItem-label{display:none}}:root{--Pagination-tapHighlightColor:var(--color-tap-highlight-base)}.spui-Pagination{align-items:center;container:spui-pagination/inline-size;display:flex;flex-direction:column}.spui-Pagination-list{align-items:center;display:flex;list-style:none;margin:0;padding:0}.spui-Pagination-item{align-items:center;display:flex;margin:0 5px}.spui-Pagination-item--first,.spui-Pagination-item--last{margin:0}.spui-Pagination-ellipsis{color:var(--color-object-low-emphasis)}.spui-Pagination-link{align-items:center;background:none;border:none;border-radius:12px;box-sizing:border-box;display:flex;font-size:.875em;height:40px;justify-content:center;line-height:1.3;margin:0;min-width:40px;padding:0 10px;position:relative;-webkit-tap-highlight-color:var(--Pagination-tapHighlightColor);text-decoration:none}.spui-Pagination-link:not([aria-current]){background:var(--color-surface-tertiary);color:var(--color-text-medium-emphasis);font-weight:700}.spui-Pagination-link:focus:not(:focus-visible){outline:none}.spui-Pagination-link[aria-current]{border:1px solid var(--color-border-low-emphasis);color:var(--color-text-low-emphasis)}.spui-Pagination-link:focus-visible{outline:2px solid var(--color-focus-clarity);outline-offset:1px}@media (hover:hover){.spui-Pagination-link:not([aria-current]):hover{background-color:var(--color-surface-quaternary)}}.spui-Pagination-total{color:var(--color-text-low-emphasis);font-size:.8125em;line-height:1.3;margin:12px 0 0;padding:0}.spui-Pagination-link+.spui-Pagination-ellipsis{margin-left:10px}@container spui-pagination (max-width: 360px){.spui-Pagination-item--first,.spui-Pagination-item--last{display:none}}.spui-Rating{align-items:center;display:flex;gap:8px}.spui-Rating-image{display:flex;gap:2px;line-height:0}.spui-Rating-text{color:var(--color-text-high-emphasis);font-weight:700;line-height:1.4;margin:0}.spui-Rating--large .spui-Rating-text{font-size:1.25em}.spui-Rating--medium .spui-Rating-text{font-size:1em}.spui-Rating--small .spui-Rating-text{font-size:.8125em}.spui-Rating-item--active{display:block;position:relative}.spui-Rating-icon{color:var(--color-border-high-emphasis)}.spui-Rating-item--front{height:100%;overflow:hidden}.spui-Rating-item--front,.spui-Rating-item--front .spui-Rating-icon{left:0;position:absolute;top:0}.spui-Rating-item--active .spui-Rating-icon{color:transparent}.spui-Rating-item--active .spui-Rating-item--front .spui-Rating-icon,.spui-Rating-item--full .spui-Rating-icon{color:var(--color-object-rating)}.spui-Rating--large .spui-Rating-icon{font-size:1.25em}.spui-Rating--medium .spui-Rating-icon{font-size:1em}.spui-Rating--small .spui-Rating-icon{font-size:.8125em}:root{--InlineNotification--neutral-backgroundColor:var(--white-20-alpha);--InlineNotification--neutral-color:var(--color-text-high-emphasis-inverse);--InlineNotification--neutral-onHover-backgroundColor:var(--white-30-alpha);--InlineNotification--neutral-onActive-backgroundColor:var(--white-30-alpha);--InlineNotification--outlined-onHover-backgroundColor:var(--white-50-alpha);--InlineNotification--outlined-onActive-backgroundColor:var(
|
|
20
20
|
--white-50-alpha
|
|
21
21
|
);--InlineNotification--contained-backgroundColor:var(--color-surface-primary);--InlineNotification--contained-color:var(--color-text-accent-primary);--InlineNotification--contained-onHover-backgroundColor:var(
|
|
22
22
|
--white-70-alpha
|
package/index.d.ts
CHANGED
|
@@ -14,6 +14,7 @@ export { DropdownMenu } from './DropdownMenu';
|
|
|
14
14
|
export { SnackBar } from './SnackBar';
|
|
15
15
|
export { InlineNotification } from './InlineNotification';
|
|
16
16
|
export { SegmentedControl } from './SegmentedControl';
|
|
17
|
+
export { Rating } from './Rating';
|
|
17
18
|
export { StackNotificationManagerProvider, useStackNotificationManagerContext, } from './StackNotificationManager';
|
|
18
19
|
export type { StackPosition, StackOffset, StackPositionOffset, ManagedStack, StackNotificationManagerProps, StackNotificationComponentProps, } from './StackNotificationManager';
|
|
19
20
|
//# 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,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EACL,gCAAgC,EAChC,kCAAkC,GACnC,MAAM,4BAA4B,CAAC;AACpC,YAAY,EACV,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,YAAY,EACZ,6BAA6B,EAC7B,+BAA+B,GAChC,MAAM,4BAA4B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EACL,gCAAgC,EAChC,kCAAkC,GACnC,MAAM,4BAA4B,CAAC;AACpC,YAAY,EACV,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,YAAY,EACZ,6BAA6B,EAC7B,+BAA+B,GAChC,MAAM,4BAA4B,CAAC"}
|
package/index.js
CHANGED
|
@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
33
33
|
};
|
|
34
34
|
})();
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
-
exports.useStackNotificationManagerContext = exports.StackNotificationManagerProvider = exports.SegmentedControl = exports.InlineNotification = exports.SnackBar = exports.DropdownMenu = exports.Toast = exports.TextLink = exports.TextButton = exports.LinkButton = exports.IconButton = exports.HeroCarousel = exports.Icon = exports.Form = exports.Dialog = exports.ButtonGroup = exports.Button = exports.BreadcrumbList = exports.BreadcrumbItem = void 0;
|
|
36
|
+
exports.useStackNotificationManagerContext = exports.StackNotificationManagerProvider = exports.Rating = exports.SegmentedControl = exports.InlineNotification = exports.SnackBar = exports.DropdownMenu = exports.Toast = exports.TextLink = exports.TextButton = exports.LinkButton = exports.IconButton = exports.HeroCarousel = exports.Icon = exports.Form = exports.Dialog = exports.ButtonGroup = exports.Button = exports.BreadcrumbList = exports.BreadcrumbItem = void 0;
|
|
37
37
|
var Breadcrumb_1 = require("./Breadcrumb");
|
|
38
38
|
Object.defineProperty(exports, "BreadcrumbItem", { enumerable: true, get: function () { return Breadcrumb_1.BreadcrumbItem; } });
|
|
39
39
|
Object.defineProperty(exports, "BreadcrumbList", { enumerable: true, get: function () { return Breadcrumb_1.BreadcrumbList; } });
|
|
@@ -65,6 +65,8 @@ var InlineNotification_1 = require("./InlineNotification");
|
|
|
65
65
|
Object.defineProperty(exports, "InlineNotification", { enumerable: true, get: function () { return InlineNotification_1.InlineNotification; } });
|
|
66
66
|
var SegmentedControl_1 = require("./SegmentedControl");
|
|
67
67
|
Object.defineProperty(exports, "SegmentedControl", { enumerable: true, get: function () { return SegmentedControl_1.SegmentedControl; } });
|
|
68
|
+
var Rating_1 = require("./Rating");
|
|
69
|
+
Object.defineProperty(exports, "Rating", { enumerable: true, get: function () { return Rating_1.Rating; } });
|
|
68
70
|
var StackNotificationManager_1 = require("./StackNotificationManager");
|
|
69
71
|
Object.defineProperty(exports, "StackNotificationManagerProvider", { enumerable: true, get: function () { return StackNotificationManager_1.StackNotificationManagerProvider; } });
|
|
70
72
|
Object.defineProperty(exports, "useStackNotificationManagerContext", { enumerable: true, get: function () { return StackNotificationManager_1.useStackNotificationManagerContext; } });
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8D;AAArD,4GAAA,cAAc,OAAA;AAAE,4GAAA,cAAc,OAAA;AACvC,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,6CAA4C;AAAnC,0GAAA,WAAW,OAAA;AACpB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,+CAA+B;AAC/B,+CAA+B;AAC/B,+CAA8C;AAArC,4GAAA,YAAY,OAAA;AACrB,2CAA0C;AAAjC,wGAAA,UAAU,OAAA;AACnB,2CAA0C;AAAjC,wGAAA,UAAU,OAAA;AACnB,2CAA0C;AAAjC,wGAAA,UAAU,OAAA;AACnB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,+CAA8C;AAArC,4GAAA,YAAY,OAAA;AACrB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,2DAA0D;AAAjD,wHAAA,kBAAkB,OAAA;AAC3B,uDAAsD;AAA7C,oHAAA,gBAAgB,OAAA;AACzB,uEAGoC;AAFlC,4IAAA,gCAAgC,OAAA;AAChC,8IAAA,kCAAkC,OAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8D;AAArD,4GAAA,cAAc,OAAA;AAAE,4GAAA,cAAc,OAAA;AACvC,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,6CAA4C;AAAnC,0GAAA,WAAW,OAAA;AACpB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,+CAA+B;AAC/B,+CAA+B;AAC/B,+CAA8C;AAArC,4GAAA,YAAY,OAAA;AACrB,2CAA0C;AAAjC,wGAAA,UAAU,OAAA;AACnB,2CAA0C;AAAjC,wGAAA,UAAU,OAAA;AACnB,2CAA0C;AAAjC,wGAAA,UAAU,OAAA;AACnB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,+CAA8C;AAArC,4GAAA,YAAY,OAAA;AACrB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,2DAA0D;AAAjD,wHAAA,kBAAkB,OAAA;AAC3B,uDAAsD;AAA7C,oHAAA,gBAAgB,OAAA;AACzB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,uEAGoC;AAFlC,4IAAA,gCAAgC,OAAA;AAChC,8IAAA,kCAAkC,OAAA"}
|
package/index.mjs
CHANGED
|
@@ -16,4 +16,5 @@ export { DropdownMenu } from "./DropdownMenu/index.mjs";
|
|
|
16
16
|
export { SnackBar } from "./SnackBar/index.mjs";
|
|
17
17
|
export { InlineNotification } from "./InlineNotification/index.mjs";
|
|
18
18
|
export { SegmentedControl } from "./SegmentedControl/index.mjs";
|
|
19
|
+
export { Rating } from "./Rating/index.mjs";
|
|
19
20
|
export { StackNotificationManagerProvider, useStackNotificationManagerContext, } from "./StackNotificationManager/index.mjs";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openameba/spindle-ui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.9.0",
|
|
4
4
|
"main": "./index.js",
|
|
5
5
|
"module": "./index.mjs",
|
|
6
6
|
"types": "./index.d.ts",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
}
|
|
61
61
|
},
|
|
62
62
|
"dependencies": {
|
|
63
|
-
"@openameba/spindle-hooks": "^1.
|
|
63
|
+
"@openameba/spindle-hooks": "^1.7.0",
|
|
64
64
|
"ameba-color-palette.css": "^4.17.0",
|
|
65
65
|
"use-callback-ref": "^1.3.3"
|
|
66
66
|
},
|
|
@@ -109,6 +109,6 @@
|
|
|
109
109
|
"stylelint-order": "^7.0.0",
|
|
110
110
|
"stylelint-prettier": "^5.0.0",
|
|
111
111
|
"stylelint-selector-bem-pattern": "^4.0.0",
|
|
112
|
-
"ts-jest": "29.4.
|
|
112
|
+
"ts-jest": "29.4.2"
|
|
113
113
|
}
|
|
114
114
|
}
|