@openameba/spindle-ui 2.5.0 → 2.6.1
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 +32 -0
- package/Dialog/Dialog.d.ts +1 -6
- package/Dialog/Dialog.d.ts.map +1 -1
- package/Dialog/Dialog.js +2 -5
- package/Dialog/Dialog.js.map +1 -1
- package/Dialog/Dialog.mjs +2 -2
- package/Form/DropDown.js +2 -2
- package/Form/DropDown.js.map +1 -1
- package/Form/DropDown.mjs +2 -2
- package/Form/InlineDropDown.js +2 -2
- package/Form/InlineDropDown.js.map +1 -1
- package/Form/InlineDropDown.mjs +2 -2
- package/Modal/AppealModal.d.ts +1 -6
- package/Modal/AppealModal.d.ts.map +1 -1
- package/Modal/AppealModal.js +2 -2
- package/Modal/AppealModal.js.map +1 -1
- package/Modal/AppealModal.mjs +2 -2
- package/Modal/SemiModal.d.ts +1 -6
- package/Modal/SemiModal.d.ts.map +1 -1
- package/Modal/SemiModal.js +2 -2
- package/Modal/SemiModal.js.map +1 -1
- package/Modal/SemiModal.mjs +2 -2
- package/Table/Table.css +1 -0
- package/Table/Table.d.ts +55 -0
- package/Table/Table.d.ts.map +1 -0
- package/Table/Table.js +191 -0
- package/Table/Table.js.map +1 -0
- package/Table/Table.mjs +130 -0
- package/Table/index.d.ts +2 -0
- package/Table/index.d.ts.map +1 -0
- package/Table/index.js +6 -0
- package/Table/index.js.map +1 -0
- package/Table/index.mjs +1 -0
- package/index.css +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,38 @@
|
|
|
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.6.1](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@2.6.0...@openameba/spindle-ui@2.6.1) (2025-08-25)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- **spindle-ui:** react-merge-refsをuse-callback-refに置き換え ([#1351](https://github.com/openameba/spindle/issues/1351)) ([5564d0e](https://github.com/openameba/spindle/commit/5564d0e7b24729a70a545211a82008bd6445a69f))
|
|
11
|
+
|
|
12
|
+
# [2.6.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@2.5.0...@openameba/spindle-ui@2.6.0) (2025-08-13)
|
|
13
|
+
|
|
14
|
+
### Bug Fixes
|
|
15
|
+
|
|
16
|
+
- **spindle-ui:** containerからframeに変更 ([3f5e8c1](https://github.com/openameba/spindle/commit/3f5e8c16e1872fb7a5b4474a2dd19f13d7f94cc3))
|
|
17
|
+
- **spindle-ui:** customTheme storyをcustomStyleに変更 ([00d1fc5](https://github.com/openameba/spindle/commit/00d1fc5f6e4cc5a26a328c45eba778ff099e001d))
|
|
18
|
+
- **spindle-ui:** fix formatを実行してフォーマットを修正 ([bafbeb9](https://github.com/openameba/spindle/commit/bafbeb955a98cbf3d159c53cfd7bb70de15a5b01))
|
|
19
|
+
- **spindle-ui:** fontSizeは相対サイズに変更 ([a29c77b](https://github.com/openameba/spindle/commit/a29c77b8e5ed0ceb8bde59d51327b5e5015af256))
|
|
20
|
+
- **spindle-ui:** footerがある時にroundedを指定するとtbodyの最後の行がroundedになる不具合を修正 ([0cfaf63](https://github.com/openameba/spindle/commit/0cfaf63415cfcde702a6843c911b71104d8e3617))
|
|
21
|
+
- **spindle-ui:** reduced motion時のアニメーション抑制 ([3dbc067](https://github.com/openameba/spindle/commit/3dbc067bf613c7ed6c3a75033f32ab1a1d9292c5))
|
|
22
|
+
- **spindle-ui:** table font-size単位をremからemに変更 ([4a3b3f8](https://github.com/openameba/spindle/commit/4a3b3f83568d56d45bbb59966d7fdd5efeff185d))
|
|
23
|
+
- **spindle-ui:** table.mdxのimportセクションをSourceコンポーネントに変更 ([ef63a99](https://github.com/openameba/spindle/commit/ef63a997a2d6dc3d0bd49a34b373e6c9e1a1258f))
|
|
24
|
+
- **spindle-ui:** セル結合時のスタイル上書きを適切に修正 ([b0b2935](https://github.com/openameba/spindle/commit/b0b29353f80eea18e405d78af3bc6b45b6e5df68))
|
|
25
|
+
- **spindle-ui:** 使い方を上に持っていく ([a7c8d19](https://github.com/openameba/spindle/commit/a7c8d19b9b518e8290f6107695934b2cdc380293))
|
|
26
|
+
- **spindle-ui:** 省略できるHTMLサンプルを削除し可読性を向上 ([0514e67](https://github.com/openameba/spindle/commit/0514e67569f698ed8fd91a37241b15819e1288c5))
|
|
27
|
+
- **spindle-ui:** 紛らわしいstoryの文言を修正 ([f834ae8](https://github.com/openameba/spindle/commit/f834ae88bc49498d1bf3305043a807870f1334ca))
|
|
28
|
+
- **spindle-ui:** 見出しのないテーブルは非推奨にする ([eb939b1](https://github.com/openameba/spindle/commit/eb939b11cbe8c921569319d89f7065fb7c0231c3))
|
|
29
|
+
|
|
30
|
+
### Features
|
|
31
|
+
|
|
32
|
+
- **spindle-ui:** add table component ([5518bd4](https://github.com/openameba/spindle/commit/5518bd4375ddca3d2f5bfaf13d257e4b65c8bf6f))
|
|
33
|
+
- **spindle-ui:** css variablesを中心にCSSを整理 ([acf08cd](https://github.com/openameba/spindle/commit/acf08cd5a1fa1711a946b6a644d03b7a7253804b))
|
|
34
|
+
- **spindle-ui:** storyのexampleを減らしてstorybookが重くなるのを抑制する ([888b55a](https://github.com/openameba/spindle/commit/888b55a653dda1c26340f87a0b336ee798149e1f))
|
|
35
|
+
- **spindle-ui:** table セルに長いテキスト対応のoverflow-wrapを追加 ([f438588](https://github.com/openameba/spindle/commit/f438588b2045bb3bc176cb5d68114b0470122a69))
|
|
36
|
+
- **spindle-ui:** スムーズスクロールを追加 ([49c352c](https://github.com/openameba/spindle/commit/49c352cc4b459ac8ae4e17ef3ff6209429a86b45))
|
|
37
|
+
|
|
6
38
|
# [2.5.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@2.4.0...@openameba/spindle-ui@2.5.0) (2025-08-01)
|
|
7
39
|
|
|
8
40
|
### Bug Fixes
|
package/Dialog/Dialog.d.ts
CHANGED
|
@@ -4,18 +4,13 @@ interface DialogProps extends React.DialogHTMLAttributes<HTMLElement> {
|
|
|
4
4
|
onCancel?: (event: React.BaseSyntheticEvent) => void;
|
|
5
5
|
onClose?: (event: React.BaseSyntheticEvent) => void;
|
|
6
6
|
}
|
|
7
|
-
export interface DialogHTMLElement extends HTMLElement {
|
|
8
|
-
close?: () => void;
|
|
9
|
-
showModal?: (returnValue?: string) => void;
|
|
10
|
-
open?: boolean;
|
|
11
|
-
}
|
|
12
7
|
interface PartsProps {
|
|
13
8
|
children?: React.ReactNode;
|
|
14
9
|
className?: string;
|
|
15
10
|
id?: string;
|
|
16
11
|
}
|
|
17
12
|
export declare const Dialog: {
|
|
18
|
-
Frame: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<
|
|
13
|
+
Frame: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDialogElement>>;
|
|
19
14
|
StyleOnly: ({ className, children }: PartsProps) => React.JSX.Element;
|
|
20
15
|
Title: ({ children, id }: PartsProps) => React.JSX.Element;
|
|
21
16
|
Body: ({ children, id }: PartsProps) => React.JSX.Element;
|
package/Dialog/Dialog.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAIf,UAAU,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AAED,
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAIf,UAAU,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AAED,UAAU,UAAU;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAoID,eAAO,MAAM,MAAM;;yCArCyB,UAAU;8BAarB,UAAU;6BAQX,UAAU;;;;;CAsBzC,CAAC"}
|
package/Dialog/Dialog.js
CHANGED
|
@@ -44,13 +44,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
44
44
|
}
|
|
45
45
|
return t;
|
|
46
46
|
};
|
|
47
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
48
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
49
|
-
};
|
|
50
47
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
51
48
|
exports.Dialog = void 0;
|
|
52
49
|
var react_1 = __importStar(require("react"));
|
|
53
|
-
var
|
|
50
|
+
var use_callback_ref_1 = require("use-callback-ref");
|
|
54
51
|
var ButtonGroup_1 = require("../ButtonGroup");
|
|
55
52
|
var BLOCK_NAME = 'spui-Dialog';
|
|
56
53
|
var FADE_OUT_ANIMATION = 'spui-Dialog-fade-out';
|
|
@@ -109,7 +106,7 @@ var Frame = (0, react_1.forwardRef)(function Dialog(_a, ref) {
|
|
|
109
106
|
document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
|
|
110
107
|
}
|
|
111
108
|
}, [open, dialogEl]);
|
|
112
|
-
return (react_1.default.createElement("dialog", __assign({ ref: (0,
|
|
109
|
+
return (react_1.default.createElement("dialog", __assign({ ref: (0, use_callback_ref_1.useMergeRefs)([dialogEl, ref]), className: [BLOCK_NAME, closing && "".concat(BLOCK_NAME, "--closing"), className]
|
|
113
110
|
.filter(Boolean)
|
|
114
111
|
.join(' ')
|
|
115
112
|
.trim(), onClick: handleDialogClick, onClose: handleDialogClose }, rest),
|
package/Dialog/Dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"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"}
|
package/Dialog/Dialog.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef, useCallback, useEffect, useRef, useState, } from 'react';
|
|
2
|
-
import
|
|
2
|
+
import { useMergeRefs } from 'use-callback-ref';
|
|
3
3
|
import { ButtonGroup as Group } from "../ButtonGroup/index.mjs";
|
|
4
4
|
const BLOCK_NAME = 'spui-Dialog';
|
|
5
5
|
const FADE_OUT_ANIMATION = 'spui-Dialog-fade-out';
|
|
@@ -54,7 +54,7 @@ const Frame = forwardRef(function Dialog({ children, className, open, onClose, .
|
|
|
54
54
|
document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
|
|
55
55
|
}
|
|
56
56
|
}, [open, dialogEl]);
|
|
57
|
-
return (React.createElement("dialog", { ref:
|
|
57
|
+
return (React.createElement("dialog", { ref: useMergeRefs([dialogEl, ref]), className: [BLOCK_NAME, closing && `${BLOCK_NAME}--closing`, className]
|
|
58
58
|
.filter(Boolean)
|
|
59
59
|
.join(' ')
|
|
60
60
|
.trim(), onClick: handleDialogClick, onClose: handleDialogClose, ...rest },
|
package/Form/DropDown.js
CHANGED
|
@@ -50,7 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
50
50
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
51
51
|
exports.DropDown = void 0;
|
|
52
52
|
var react_1 = __importStar(require("react"));
|
|
53
|
-
var
|
|
53
|
+
var use_callback_ref_1 = require("use-callback-ref");
|
|
54
54
|
var ChevronDownBold_1 = __importDefault(require("../Icon/ChevronDownBold"));
|
|
55
55
|
var BLOCK_NAME = 'spui-DropDown';
|
|
56
56
|
exports.DropDown = (0, react_1.forwardRef)(function DropDown(_a, ref) {
|
|
@@ -85,7 +85,7 @@ exports.DropDown = (0, react_1.forwardRef)(function DropDown(_a, ref) {
|
|
|
85
85
|
react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-visual") }, text),
|
|
86
86
|
react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-icon") },
|
|
87
87
|
react_1.default.createElement(ChevronDownBold_1.default, { "aria-hidden": "true" })),
|
|
88
|
-
react_1.default.createElement("select", __assign({ className: "".concat(BLOCK_NAME, "-select"), ref: (0,
|
|
88
|
+
react_1.default.createElement("select", __assign({ className: "".concat(BLOCK_NAME, "-select"), ref: (0, use_callback_ref_1.useMergeRefs)([selectEl, ref]), onChange: handleChange }, rest), children),
|
|
89
89
|
react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-outline") })));
|
|
90
90
|
});
|
|
91
91
|
//# sourceMappingURL=DropDown.js.map
|
package/Form/DropDown.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropDown.js","sourceRoot":"","sources":["../../src/Form/DropDown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuE;AACvE,
|
|
1
|
+
{"version":3,"file":"DropDown.js","sourceRoot":"","sources":["../../src/Form/DropDown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuE;AACvE,qDAAgD;AAEhD,4EAAsD;AAStD,IAAM,UAAU,GAAG,eAAe,CAAC;AAEtB,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAA2B,SAAS,QAAQ,CAC5E,EAAwD,EACxD,GAAG;IADD,IAAA,QAAQ,cAAA,EAAE,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,QAAQ,cAAA,EAAK,IAAI,cAA/C,oCAAiD,CAAF;IAG/C,IAAM,QAAQ,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAE3C,IAAA,KAAkB,IAAA,gBAAQ,EAAC,EAAE,CAAC,EAA7B,IAAI,QAAA,EAAE,OAAO,QAAgB,CAAC;IAC/B,IAAA,KAA0B,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAxC,QAAQ,QAAA,EAAE,WAAW,QAAmB,CAAC;IAEhD,IAAM,MAAM,GAAG;QACb,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,EAAE;YAChC,IAAM,UAAU,GACd,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;YAC3D,IAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC;YAC9B,IAAM,UAAQ,GAAG,UAAU,CAAC,QAAQ,CAAC;YACrC,OAAO,CAAC,KAAK,CAAC,CAAC;YACf,WAAW,CAAC,UAAQ,CAAC,CAAC;SACvB;IACH,CAAC,CAAC;IAEF,IAAM,YAAY,GAAG,UAAC,KAA2C;QAC/D,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE;YAClC,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;QACD,MAAM,EAAE,CAAC;IACX,CAAC,CAAC;IAEF,mBAAmB;IACnB,IAAA,iBAAS,EAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IAEtB,OAAO,CACL,yCACE,SAAS,EAAE;YACT,UAAG,UAAU,WAAQ;YACrB,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;YAC5B,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;SAC3B;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC;QAEZ,wCAAM,SAAS,EAAE,UAAG,UAAU,YAAS,IAAG,IAAI,CAAQ;QACtD,wCAAM,SAAS,EAAE,UAAG,UAAU,UAAO;YACnC,8BAAC,yBAAe,mBAAa,MAAM,GAAG,CACjC;QACP,mDACE,SAAS,EAAE,UAAG,UAAU,YAAS,EACjC,GAAG,EAAE,IAAA,+BAAY,EAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,EAClC,QAAQ,EAAE,YAAY,IAClB,IAAI,GAEP,QAAQ,CACF;QACT,wCAAM,SAAS,EAAE,UAAG,UAAU,aAAU,GAAS,CAC3C,CACT,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
package/Form/DropDown.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef, useEffect, useRef, useState } from 'react';
|
|
2
|
-
import
|
|
2
|
+
import { useMergeRefs } from 'use-callback-ref';
|
|
3
3
|
import ChevronDownBold from "../Icon/ChevronDownBold.mjs";
|
|
4
4
|
const BLOCK_NAME = 'spui-DropDown';
|
|
5
5
|
export const DropDown = forwardRef(function DropDown({ children, hasError = false, onChange, ...rest }, ref) {
|
|
@@ -33,6 +33,6 @@ export const DropDown = forwardRef(function DropDown({ children, hasError = fals
|
|
|
33
33
|
React.createElement("span", { className: `${BLOCK_NAME}-visual` }, text),
|
|
34
34
|
React.createElement("span", { className: `${BLOCK_NAME}-icon` },
|
|
35
35
|
React.createElement(ChevronDownBold, { "aria-hidden": "true" })),
|
|
36
|
-
React.createElement("select", { className: `${BLOCK_NAME}-select`, ref:
|
|
36
|
+
React.createElement("select", { className: `${BLOCK_NAME}-select`, ref: useMergeRefs([selectEl, ref]), onChange: handleChange, ...rest }, children),
|
|
37
37
|
React.createElement("span", { className: `${BLOCK_NAME}-outline` })));
|
|
38
38
|
});
|
package/Form/InlineDropDown.js
CHANGED
|
@@ -50,7 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
50
50
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
51
51
|
exports.InlineDropDown = void 0;
|
|
52
52
|
var react_1 = __importStar(require("react"));
|
|
53
|
-
var
|
|
53
|
+
var use_callback_ref_1 = require("use-callback-ref");
|
|
54
54
|
var ChevronDownBold_1 = __importDefault(require("../Icon/ChevronDownBold"));
|
|
55
55
|
var BLOCK_NAME = 'spui-InlineDropDown';
|
|
56
56
|
exports.InlineDropDown = (0, react_1.forwardRef)(function InlineDropDown(_a, ref) {
|
|
@@ -77,7 +77,7 @@ exports.InlineDropDown = (0, react_1.forwardRef)(function InlineDropDown(_a, ref
|
|
|
77
77
|
react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-text ").concat(BLOCK_NAME, "-text--").concat(visualSize) }, text),
|
|
78
78
|
react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-icon ").concat(BLOCK_NAME, "-icon--").concat(visualSize) },
|
|
79
79
|
react_1.default.createElement(ChevronDownBold_1.default, { "aria-hidden": "true" }))),
|
|
80
|
-
react_1.default.createElement("select", __assign({ className: "".concat(BLOCK_NAME, "-select ").concat(BLOCK_NAME, "-select--").concat(visualSize), ref: (0,
|
|
80
|
+
react_1.default.createElement("select", __assign({ className: "".concat(BLOCK_NAME, "-select ").concat(BLOCK_NAME, "-select--").concat(visualSize), ref: (0, use_callback_ref_1.useMergeRefs)([selectEl, ref]), onChange: handleChange }, rest), children),
|
|
81
81
|
react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-outline") })));
|
|
82
82
|
});
|
|
83
83
|
//# sourceMappingURL=InlineDropDown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlineDropDown.js","sourceRoot":"","sources":["../../src/Form/InlineDropDown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuE;AACvE,
|
|
1
|
+
{"version":3,"file":"InlineDropDown.js","sourceRoot":"","sources":["../../src/Form/InlineDropDown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuE;AACvE,qDAAgD;AAEhD,4EAAsD;AAWtD,IAAM,UAAU,GAAG,qBAAqB,CAAC;AAE5B,QAAA,cAAc,GAAG,IAAA,kBAAU,EACtC,SAAS,cAAc,CACrB,EAA6D,EAC7D,GAAG;IADD,IAAA,QAAQ,cAAA,EAAE,kBAAqB,EAArB,UAAU,mBAAG,QAAQ,KAAA,EAAE,QAAQ,cAAA,EAAK,IAAI,cAApD,sCAAsD,CAAF;IAGpD,IAAM,QAAQ,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAE3C,IAAA,KAAkB,IAAA,gBAAQ,EAAC,EAAE,CAAC,EAA7B,IAAI,QAAA,EAAE,OAAO,QAAgB,CAAC;IAErC,IAAM,MAAM,GAAG;QACb,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,EAAE;YAChC,IAAM,UAAU,GACd,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;YAC3D,IAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC;YAC9B,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;IACH,CAAC,CAAC;IAEF,IAAM,YAAY,GAAG,UAAC,KAA2C;QAC/D,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE;YAClC,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;QACD,MAAM,EAAE,CAAC;IACX,CAAC,CAAC;IAEF,mBAAmB;IACnB,IAAA,iBAAS,EAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IAEtB,OAAO,CACL,yCAAO,SAAS,EAAE,CAAC,UAAG,UAAU,WAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QACjE,wCAAM,SAAS,EAAE,UAAG,UAAU,YAAS;YACrC,wCACE,SAAS,EAAE,UAAG,UAAU,mBAAS,UAAU,oBAAU,UAAU,CAAE,IAEhE,IAAI,CACA;YACP,wCACE,SAAS,EAAE,UAAG,UAAU,mBAAS,UAAU,oBAAU,UAAU,CAAE;gBAEjE,8BAAC,yBAAe,mBAAa,MAAM,GAAG,CACjC,CACF;QACP,mDACE,SAAS,EAAE,UAAG,UAAU,qBAAW,UAAU,sBAAY,UAAU,CAAE,EACrE,GAAG,EAAE,IAAA,+BAAY,EAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,EAClC,QAAQ,EAAE,YAAY,IAClB,IAAI,GAEP,QAAQ,CACF;QACT,wCAAM,SAAS,EAAE,UAAG,UAAU,aAAU,GAAS,CAC3C,CACT,CAAC;AACJ,CAAC,CACF,CAAC"}
|
package/Form/InlineDropDown.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef, useEffect, useRef, useState } from 'react';
|
|
2
|
-
import
|
|
2
|
+
import { useMergeRefs } from 'use-callback-ref';
|
|
3
3
|
import ChevronDownBold from "../Icon/ChevronDownBold.mjs";
|
|
4
4
|
const BLOCK_NAME = 'spui-InlineDropDown';
|
|
5
5
|
export const InlineDropDown = forwardRef(function InlineDropDown({ children, visualSize = 'medium', onChange, ...rest }, ref) {
|
|
@@ -25,6 +25,6 @@ export const InlineDropDown = forwardRef(function InlineDropDown({ children, vis
|
|
|
25
25
|
React.createElement("span", { className: `${BLOCK_NAME}-text ${BLOCK_NAME}-text--${visualSize}` }, text),
|
|
26
26
|
React.createElement("span", { className: `${BLOCK_NAME}-icon ${BLOCK_NAME}-icon--${visualSize}` },
|
|
27
27
|
React.createElement(ChevronDownBold, { "aria-hidden": "true" }))),
|
|
28
|
-
React.createElement("select", { className: `${BLOCK_NAME}-select ${BLOCK_NAME}-select--${visualSize}`, ref:
|
|
28
|
+
React.createElement("select", { className: `${BLOCK_NAME}-select ${BLOCK_NAME}-select--${visualSize}`, ref: useMergeRefs([selectEl, ref]), onChange: handleChange, ...rest }, children),
|
|
29
29
|
React.createElement("span", { className: `${BLOCK_NAME}-outline` })));
|
|
30
30
|
});
|
package/Modal/AppealModal.d.ts
CHANGED
|
@@ -6,13 +6,8 @@ interface AppealModalProps extends React.DialogHTMLAttributes<HTMLElement> {
|
|
|
6
6
|
onCancel?: (event: React.BaseSyntheticEvent) => void;
|
|
7
7
|
onClose?: (event: React.BaseSyntheticEvent) => void;
|
|
8
8
|
}
|
|
9
|
-
export interface DialogHTMLElement extends HTMLElement {
|
|
10
|
-
close?: () => void;
|
|
11
|
-
showModal?: (returnValue?: string) => void;
|
|
12
|
-
open?: boolean;
|
|
13
|
-
}
|
|
14
9
|
export declare const AppealModal: {
|
|
15
|
-
Frame: React.ForwardRefExoticComponent<AppealModalProps & React.RefAttributes<
|
|
10
|
+
Frame: React.ForwardRefExoticComponent<AppealModalProps & React.RefAttributes<HTMLDialogElement>>;
|
|
16
11
|
StyleOnly: ({ className, children, size, ...rest }: React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
|
|
17
12
|
size?: Size | undefined;
|
|
18
13
|
}) => React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppealModal.d.ts","sourceRoot":"","sources":["../../src/Modal/AppealModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAOf,aAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC,UAAU,gBAAiB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;
|
|
1
|
+
{"version":3,"file":"AppealModal.d.ts","sourceRoot":"","sources":["../../src/Modal/AppealModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAOf,aAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC,UAAU,gBAAiB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AAqLD,eAAO,MAAM,WAAW;;;;;mCArCc,MAAM,cAAc,CAAC,GAAG,CAAC;mCAQzB,MAAM,cAAc,CAAC,KAAK,CAAC;kCAQ5B,MAAM,cAAc,CAAC,GAAG,CAAC;;;;;CA4B7D,CAAC"}
|
package/Modal/AppealModal.js
CHANGED
|
@@ -50,7 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
50
50
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
51
51
|
exports.AppealModal = void 0;
|
|
52
52
|
var react_1 = __importStar(require("react"));
|
|
53
|
-
var
|
|
53
|
+
var use_callback_ref_1 = require("use-callback-ref");
|
|
54
54
|
var ButtonGroup_1 = require("../ButtonGroup");
|
|
55
55
|
var CrossBold_1 = __importDefault(require("../Icon/CrossBold"));
|
|
56
56
|
var IconButton_1 = require("../IconButton");
|
|
@@ -119,7 +119,7 @@ var Frame = (0, react_1.forwardRef)(function AppealModal(_a, ref) {
|
|
|
119
119
|
]
|
|
120
120
|
.filter(Boolean)
|
|
121
121
|
.join(' ')
|
|
122
|
-
.trim(), ref: (0,
|
|
122
|
+
.trim(), ref: (0, use_callback_ref_1.useMergeRefs)([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose }, rest),
|
|
123
123
|
react_1.default.createElement("form", { className: "".concat(BLOCK_NAME, "-frame"), method: "dialog", onSubmit: handleFormSubmit },
|
|
124
124
|
react_1.default.createElement("div", { className: "".concat(BLOCK_NAME, "-closeIconButton") },
|
|
125
125
|
react_1.default.createElement(IconButton_1.IconButton, { "aria-label": "\u3068\u3058\u308B", variant: "neutral" },
|
package/Modal/AppealModal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppealModal.js","sourceRoot":"","sources":["../../src/Modal/AppealModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAMe;AACf,
|
|
1
|
+
{"version":3,"file":"AppealModal.js","sourceRoot":"","sources":["../../src/Modal/AppealModal.tsx"],"names":[],"mappings":"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"}
|
package/Modal/AppealModal.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef, useCallback, useEffect, useRef, useState, } from 'react';
|
|
2
|
-
import
|
|
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";
|
|
@@ -64,7 +64,7 @@ const Frame = forwardRef(function AppealModal({ children, className, open, size
|
|
|
64
64
|
]
|
|
65
65
|
.filter(Boolean)
|
|
66
66
|
.join(' ')
|
|
67
|
-
.trim(), ref:
|
|
67
|
+
.trim(), ref: useMergeRefs([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose, ...rest },
|
|
68
68
|
React.createElement("form", { className: `${BLOCK_NAME}-frame`, method: "dialog", onSubmit: handleFormSubmit },
|
|
69
69
|
React.createElement("div", { className: `${BLOCK_NAME}-closeIconButton` },
|
|
70
70
|
React.createElement(IconButton, { "aria-label": "\u3068\u3058\u308B", variant: "neutral" },
|
package/Modal/SemiModal.d.ts
CHANGED
|
@@ -8,13 +8,8 @@ interface SemiModalProps extends Omit<React.DialogHTMLAttributes<HTMLElement>, '
|
|
|
8
8
|
onCancel?: (event: React.BaseSyntheticEvent) => void;
|
|
9
9
|
onClose?: (event: React.BaseSyntheticEvent) => void;
|
|
10
10
|
}
|
|
11
|
-
export interface DialogHTMLElement extends HTMLElement {
|
|
12
|
-
close?: () => void;
|
|
13
|
-
showModal?: (returnValue?: string) => void;
|
|
14
|
-
open?: boolean;
|
|
15
|
-
}
|
|
16
11
|
export declare const SemiModal: {
|
|
17
|
-
Frame: React.ForwardRefExoticComponent<SemiModalProps & React.RefAttributes<
|
|
12
|
+
Frame: React.ForwardRefExoticComponent<SemiModalProps & React.RefAttributes<HTMLDialogElement>>;
|
|
18
13
|
Header: ({ children, ...rest }: React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
|
|
19
14
|
children: ReactNode;
|
|
20
15
|
}) => React.JSX.Element;
|
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,EAEZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAKf,aAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACzC,aAAK,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;
|
|
1
|
+
{"version":3,"file":"SemiModal.d.ts","sourceRoot":"","sources":["../../src/Modal/SemiModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAKf,aAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACzC,aAAK,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;AAgLD,eAAO,MAAM,SAAS;;;kBAlE0B,SAAS;;yCAiBb,MAAM,cAAc,CAAC,GAAG,CAAC;;kBAWxB,SAAS;;oCAQf,MAAM,cAAc,CAAC,KAAK,CAAC;;;;;CAqCjE,CAAC"}
|
package/Modal/SemiModal.js
CHANGED
|
@@ -50,7 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
50
50
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
51
51
|
exports.SemiModal = void 0;
|
|
52
52
|
var react_1 = __importStar(require("react"));
|
|
53
|
-
var
|
|
53
|
+
var use_callback_ref_1 = require("use-callback-ref");
|
|
54
54
|
var CrossBold_1 = __importDefault(require("../Icon/CrossBold"));
|
|
55
55
|
var IconButton_1 = require("../IconButton");
|
|
56
56
|
var BLOCK_NAME = 'spui-SemiModal';
|
|
@@ -116,7 +116,7 @@ var Frame = (0, react_1.forwardRef)(function SemiModal(_a, ref) {
|
|
|
116
116
|
return (react_1.default.createElement("dialog", __assign({ role: "dialog", className: [BLOCK_NAME, closing && "".concat(BLOCK_NAME, "--closing")]
|
|
117
117
|
.filter(Boolean)
|
|
118
118
|
.join(' ')
|
|
119
|
-
.trim(), ref: (0,
|
|
119
|
+
.trim(), ref: (0, use_callback_ref_1.useMergeRefs)([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose, "data-type": type, "data-size": size }, rest),
|
|
120
120
|
react_1.default.createElement("form", { className: "".concat(BLOCK_NAME, "-frame"), method: "dialog", onSubmit: handleFormSubmit }, children)));
|
|
121
121
|
});
|
|
122
122
|
var Header = function (_a) {
|
package/Modal/SemiModal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SemiModal.js","sourceRoot":"","sources":["../../src/Modal/SemiModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAOe;AACf,
|
|
1
|
+
{"version":3,"file":"SemiModal.js","sourceRoot":"","sources":["../../src/Modal/SemiModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAOe;AACf,qDAAgD;AAChD,gEAA0C;AAC1C,4CAA2C;AAc3C,IAAM,UAAU,GAAG,gBAAgB,CAAC;AACpC,IAAM,mBAAmB,GAAG;IAC1B,UAAG,UAAU,cAAW;IACxB,UAAG,UAAU,eAAY;CAC1B,CAAC;AAEF,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;IAG7D,IAAA,KAAwB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IAC9C,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;YACrC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;SAClB;IACH,CAAC,CAAC;IAEF,cAAc;IACd,IAAM,iBAAiB,GAAG,UACxB,KAA8C;QAE9C,yBAAyB;QACzB,IAAI,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC,OAAO,EAAE;YACrC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;YACjB,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;IACH,CAAC,CAAC;IAEF,kBAAkB;IAClB,IAAM,kBAAkB,GAAG,IAAA,mBAAW,EACpC,UAAC,KAAqB;;QACpB,IACE,QAAQ,CAAC,OAAO;YAChB,mBAAmB,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC;YACjD,CAAC,KAAK,CAAC,aAAa,CAAC,wBAAwB;UAC7C;YACA,MAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,kDAAI,CAAC;SAC7B;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,IAAA,iBAAS,EAAC;;QACR,MAAA,QAAQ,CAAC,OAAO,0CAAE,gBAAgB,CAChC,cAAc,EACd,kBAAkB,EAClB,KAAK,CACN,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,IAAA,iBAAS,EAAC;;QACR,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YACrB,OAAO;SACR;QAED,wDAAwD;QACxD,IAAM,iCAAiC,GAAG,UAAG,UAAU,WAAQ,CAAC;QAEhE,IAAI,IAAI,EAAE;YACR,MAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,SAAS,kDAAI,CAAC;YAChC,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,iCAAiC,CAAC,CAAC;SAC3E;aAAM;YACL,CAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,IAAI,KAAI,UAAU,CAAC,IAAI,CAAC,CAAC;YAC3C,+DAA+D;YAC/D,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,MAAM,CACvC,iCAAiC,CAClC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,mDACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,UAAU,EAAE,OAAO,IAAI,UAAG,UAAU,cAAW,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,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,CAAC,UAAU,EAAE,UAAG,UAAU,eAAK,IAAI,CAAE,EAAE,SAAS,CAAC;aACzD,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,5 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef, useCallback, useEffect, useRef, useState, } from 'react';
|
|
2
|
-
import
|
|
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';
|
|
@@ -61,7 +61,7 @@ const Frame = forwardRef(function SemiModal({ children, open, size = 'medium', t
|
|
|
61
61
|
return (React.createElement("dialog", { role: "dialog", className: [BLOCK_NAME, closing && `${BLOCK_NAME}--closing`]
|
|
62
62
|
.filter(Boolean)
|
|
63
63
|
.join(' ')
|
|
64
|
-
.trim(), ref:
|
|
64
|
+
.trim(), ref: useMergeRefs([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose, "data-type": type, "data-size": size, ...rest },
|
|
65
65
|
React.createElement("form", { className: `${BLOCK_NAME}-frame`, method: "dialog", onSubmit: handleFormSubmit }, children)));
|
|
66
66
|
});
|
|
67
67
|
const Header = ({ children, ...rest }) => {
|
package/Table/Table.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
: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}}
|
package/Table/Table.d.ts
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React, { ReactNode, CSSProperties } from 'react';
|
|
2
|
+
declare type BorderType = 'horizontal' | 'vertical' | 'outlined';
|
|
3
|
+
declare type Layout = 'auto' | 'fixed' | 'scrollable';
|
|
4
|
+
declare type Align = 'left' | 'center' | 'right';
|
|
5
|
+
interface TableCaptionProps extends Omit<React.HTMLAttributes<HTMLTableCaptionElement>, 'style' | 'className'> {
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
className?: string;
|
|
8
|
+
}
|
|
9
|
+
interface TableHeaderProps extends Omit<React.HTMLAttributes<HTMLTableSectionElement>, 'style' | 'className'> {
|
|
10
|
+
children?: ReactNode;
|
|
11
|
+
className?: string;
|
|
12
|
+
}
|
|
13
|
+
interface TableBodyProps extends Omit<React.HTMLAttributes<HTMLTableSectionElement>, 'style' | 'className'> {
|
|
14
|
+
children?: ReactNode;
|
|
15
|
+
className?: string;
|
|
16
|
+
}
|
|
17
|
+
interface TableFooterProps extends Omit<React.HTMLAttributes<HTMLTableSectionElement>, 'style' | 'className'> {
|
|
18
|
+
children?: ReactNode;
|
|
19
|
+
className?: string;
|
|
20
|
+
}
|
|
21
|
+
interface TableRowProps extends Omit<React.HTMLAttributes<HTMLTableRowElement>, 'style' | 'className'> {
|
|
22
|
+
children?: ReactNode;
|
|
23
|
+
className?: string;
|
|
24
|
+
}
|
|
25
|
+
interface TableHeadProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, 'style' | 'className'> {
|
|
26
|
+
align?: Align;
|
|
27
|
+
width?: CSSProperties['width'];
|
|
28
|
+
minWidth?: CSSProperties['minWidth'];
|
|
29
|
+
children?: ReactNode;
|
|
30
|
+
className?: string;
|
|
31
|
+
}
|
|
32
|
+
interface TableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'style' | 'className'> {
|
|
33
|
+
align?: Align;
|
|
34
|
+
children?: ReactNode;
|
|
35
|
+
className?: string;
|
|
36
|
+
}
|
|
37
|
+
export declare const Table: {
|
|
38
|
+
Frame: React.ForwardRefExoticComponent<{
|
|
39
|
+
borderTypes?: BorderType[] | undefined;
|
|
40
|
+
rounded?: boolean | undefined;
|
|
41
|
+
striped?: boolean | undefined;
|
|
42
|
+
layout?: Layout | undefined;
|
|
43
|
+
children?: ReactNode;
|
|
44
|
+
className?: string | undefined;
|
|
45
|
+
} & Omit<React.TableHTMLAttributes<HTMLTableElement>, "className" | "style"> & React.RefAttributes<HTMLTableElement>>;
|
|
46
|
+
Caption: React.ForwardRefExoticComponent<TableCaptionProps & React.RefAttributes<HTMLTableCaptionElement>>;
|
|
47
|
+
Header: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLTableSectionElement>>;
|
|
48
|
+
Body: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
|
|
49
|
+
Footer: React.ForwardRefExoticComponent<TableFooterProps & React.RefAttributes<HTMLTableSectionElement>>;
|
|
50
|
+
Row: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
|
|
51
|
+
Head: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
52
|
+
Cell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
53
|
+
};
|
|
54
|
+
export {};
|
|
55
|
+
//# sourceMappingURL=Table.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEpE,aAAK,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU,CAAC;AAEzD,aAAK,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,YAAY,CAAC;AAE9C,aAAK,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAazC,UAAU,iBACR,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,EAC7C,OAAO,GAAG,WAAW,CACtB;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,UAAU,gBACR,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,EAC7C,OAAO,GAAG,WAAW,CACtB;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,UAAU,cACR,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,EAC7C,OAAO,GAAG,WAAW,CACtB;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,UAAU,gBACR,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,EAC7C,OAAO,GAAG,WAAW,CACtB;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,UAAU,aACR,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,EACzC,OAAO,GAAG,WAAW,CACtB;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,UAAU,cACR,SAAQ,IAAI,CACV,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAC5C,OAAO,GAAG,WAAW,CACtB;IACD,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,UAAU,cACR,SAAQ,IAAI,CACV,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAC5C,OAAO,GAAG,WAAW,CACtB;IACD,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6ND,eAAO,MAAM,KAAK;;;;;;mBAzSL,SAAS;;;;;;;;;;CAkTrB,CAAC"}
|
package/Table/Table.js
ADDED
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
36
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
37
|
+
var t = {};
|
|
38
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
39
|
+
t[p] = s[p];
|
|
40
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
41
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
42
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
43
|
+
t[p[i]] = s[p[i]];
|
|
44
|
+
}
|
|
45
|
+
return t;
|
|
46
|
+
};
|
|
47
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
48
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
49
|
+
if (ar || !(i in from)) {
|
|
50
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
51
|
+
ar[i] = from[i];
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
55
|
+
};
|
|
56
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
57
|
+
exports.Table = void 0;
|
|
58
|
+
var react_1 = __importStar(require("react"));
|
|
59
|
+
var BLOCK_NAME = 'spui-Table';
|
|
60
|
+
var getAlignClassName = function (align, elementType) {
|
|
61
|
+
switch (align) {
|
|
62
|
+
case 'left':
|
|
63
|
+
return "".concat(BLOCK_NAME, "-").concat(elementType, "--alignLeft");
|
|
64
|
+
case 'center':
|
|
65
|
+
return "".concat(BLOCK_NAME, "-").concat(elementType, "--alignCenter");
|
|
66
|
+
case 'right':
|
|
67
|
+
return "".concat(BLOCK_NAME, "-").concat(elementType, "--alignRight");
|
|
68
|
+
default:
|
|
69
|
+
return null;
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
var getBorderClassNames = function (borderTypes) {
|
|
73
|
+
return borderTypes
|
|
74
|
+
.map(function (type) {
|
|
75
|
+
switch (type) {
|
|
76
|
+
case 'horizontal':
|
|
77
|
+
return "".concat(BLOCK_NAME, "--horizontal");
|
|
78
|
+
case 'vertical':
|
|
79
|
+
return "".concat(BLOCK_NAME, "--vertical");
|
|
80
|
+
case 'outlined':
|
|
81
|
+
return "".concat(BLOCK_NAME, "--outlined");
|
|
82
|
+
default:
|
|
83
|
+
return null;
|
|
84
|
+
}
|
|
85
|
+
})
|
|
86
|
+
.filter(Boolean);
|
|
87
|
+
};
|
|
88
|
+
// Main Table component
|
|
89
|
+
var Frame = (0, react_1.forwardRef)(function TableFrame(_a, ref) {
|
|
90
|
+
var _b = _a.borderTypes, borderTypes = _b === void 0 ? [] : _b, _c = _a.rounded, rounded = _c === void 0 ? false : _c, _d = _a.striped, striped = _d === void 0 ? false : _d, _e = _a.layout, layout = _e === void 0 ? 'auto' : _e, children = _a.children, className = _a.className, rest = __rest(_a, ["borderTypes", "rounded", "striped", "layout", "children", "className"]);
|
|
91
|
+
var classes = __spreadArray(__spreadArray([
|
|
92
|
+
BLOCK_NAME
|
|
93
|
+
], getBorderClassNames(borderTypes), true), [
|
|
94
|
+
rounded && "".concat(BLOCK_NAME, "--rounded"),
|
|
95
|
+
striped && "".concat(BLOCK_NAME, "--striped"),
|
|
96
|
+
layout === 'fixed' && "".concat(BLOCK_NAME, "--fixed"),
|
|
97
|
+
layout === 'scrollable' && "".concat(BLOCK_NAME, "--scrollable"),
|
|
98
|
+
className,
|
|
99
|
+
], false).filter(Boolean)
|
|
100
|
+
.join(' ')
|
|
101
|
+
.trim();
|
|
102
|
+
var scrollContainerClasses = [
|
|
103
|
+
"".concat(BLOCK_NAME, "-frame"),
|
|
104
|
+
layout === 'scrollable' && "".concat(BLOCK_NAME, "-frame--scrollable"),
|
|
105
|
+
]
|
|
106
|
+
.filter(Boolean)
|
|
107
|
+
.join(' ')
|
|
108
|
+
.trim();
|
|
109
|
+
var tableElement = (react_1.default.createElement("table", __assign({ ref: ref, className: classes }, rest), children));
|
|
110
|
+
// Wrap in container if layout is scrollable
|
|
111
|
+
if (layout === 'scrollable') {
|
|
112
|
+
return react_1.default.createElement("div", { className: scrollContainerClasses }, tableElement);
|
|
113
|
+
}
|
|
114
|
+
return tableElement;
|
|
115
|
+
});
|
|
116
|
+
// Table.Caption
|
|
117
|
+
var Caption = (0, react_1.forwardRef)(function TableCaption(_a, ref) {
|
|
118
|
+
var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
|
|
119
|
+
return (react_1.default.createElement("caption", __assign({ ref: ref, className: ["".concat(BLOCK_NAME, "-caption"), className]
|
|
120
|
+
.filter(Boolean)
|
|
121
|
+
.join(' ')
|
|
122
|
+
.trim() }, rest), children));
|
|
123
|
+
});
|
|
124
|
+
// Table.Header
|
|
125
|
+
var Header = (0, react_1.forwardRef)(function TableHeader(_a, ref) {
|
|
126
|
+
var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
|
|
127
|
+
return (react_1.default.createElement("thead", __assign({ ref: ref, className: ["".concat(BLOCK_NAME, "-header"), className]
|
|
128
|
+
.filter(Boolean)
|
|
129
|
+
.join(' ')
|
|
130
|
+
.trim() }, rest), children));
|
|
131
|
+
});
|
|
132
|
+
// Table.Body
|
|
133
|
+
var Body = (0, react_1.forwardRef)(function TableBody(_a, ref) {
|
|
134
|
+
var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
|
|
135
|
+
return (react_1.default.createElement("tbody", __assign({ ref: ref, className: ["".concat(BLOCK_NAME, "-body"), className].filter(Boolean).join(' ') }, rest), children));
|
|
136
|
+
});
|
|
137
|
+
// Table.Footer
|
|
138
|
+
var Footer = (0, react_1.forwardRef)(function TableFooter(_a, ref) {
|
|
139
|
+
var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
|
|
140
|
+
return (react_1.default.createElement("tfoot", __assign({ ref: ref, className: ["".concat(BLOCK_NAME, "-footer"), className]
|
|
141
|
+
.filter(Boolean)
|
|
142
|
+
.join(' ')
|
|
143
|
+
.trim() }, rest), children));
|
|
144
|
+
});
|
|
145
|
+
// Table.Row
|
|
146
|
+
var Row = (0, react_1.forwardRef)(function TableRow(_a, ref) {
|
|
147
|
+
var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
|
|
148
|
+
return (react_1.default.createElement("tr", __assign({ ref: ref, className: ["".concat(BLOCK_NAME, "-row"), className]
|
|
149
|
+
.filter(Boolean)
|
|
150
|
+
.join(' ')
|
|
151
|
+
.trim() }, rest), children));
|
|
152
|
+
});
|
|
153
|
+
// Table.Head
|
|
154
|
+
var Head = (0, react_1.forwardRef)(function TableHead(_a, ref) {
|
|
155
|
+
var children = _a.children, align = _a.align, width = _a.width, minWidth = _a.minWidth, className = _a.className, rest = __rest(_a, ["children", "align", "width", "minWidth", "className"]);
|
|
156
|
+
var classes = [
|
|
157
|
+
"".concat(BLOCK_NAME, "-head"),
|
|
158
|
+
align && getAlignClassName(align, 'head'),
|
|
159
|
+
className,
|
|
160
|
+
]
|
|
161
|
+
.filter(Boolean)
|
|
162
|
+
.join(' ')
|
|
163
|
+
.trim();
|
|
164
|
+
var headStyle = width || minWidth
|
|
165
|
+
? __assign(__assign({}, (width && { width: width })), (minWidth && { minWidth: minWidth })) : undefined;
|
|
166
|
+
return (react_1.default.createElement("th", __assign({ ref: ref, className: classes, style: headStyle }, rest), children));
|
|
167
|
+
});
|
|
168
|
+
// Table.Cell
|
|
169
|
+
var Cell = (0, react_1.forwardRef)(function TableCell(_a, ref) {
|
|
170
|
+
var children = _a.children, align = _a.align, className = _a.className, rest = __rest(_a, ["children", "align", "className"]);
|
|
171
|
+
var classes = [
|
|
172
|
+
"".concat(BLOCK_NAME, "-cell"),
|
|
173
|
+
align && getAlignClassName(align, 'cell'),
|
|
174
|
+
className,
|
|
175
|
+
]
|
|
176
|
+
.filter(Boolean)
|
|
177
|
+
.join(' ')
|
|
178
|
+
.trim();
|
|
179
|
+
return (react_1.default.createElement("td", __assign({ ref: ref, className: classes }, rest), children));
|
|
180
|
+
});
|
|
181
|
+
exports.Table = {
|
|
182
|
+
Frame: Frame,
|
|
183
|
+
Caption: Caption,
|
|
184
|
+
Header: Header,
|
|
185
|
+
Body: Body,
|
|
186
|
+
Footer: Footer,
|
|
187
|
+
Row: Row,
|
|
188
|
+
Head: Head,
|
|
189
|
+
Cell: Cell,
|
|
190
|
+
};
|
|
191
|
+
//# sourceMappingURL=Table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"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"}
|
package/Table/Table.mjs
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
const BLOCK_NAME = 'spui-Table';
|
|
3
|
+
const getAlignClassName = (align, elementType) => {
|
|
4
|
+
switch (align) {
|
|
5
|
+
case 'left':
|
|
6
|
+
return `${BLOCK_NAME}-${elementType}--alignLeft`;
|
|
7
|
+
case 'center':
|
|
8
|
+
return `${BLOCK_NAME}-${elementType}--alignCenter`;
|
|
9
|
+
case 'right':
|
|
10
|
+
return `${BLOCK_NAME}-${elementType}--alignRight`;
|
|
11
|
+
default:
|
|
12
|
+
return null;
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
const getBorderClassNames = (borderTypes) => {
|
|
16
|
+
return borderTypes
|
|
17
|
+
.map((type) => {
|
|
18
|
+
switch (type) {
|
|
19
|
+
case 'horizontal':
|
|
20
|
+
return `${BLOCK_NAME}--horizontal`;
|
|
21
|
+
case 'vertical':
|
|
22
|
+
return `${BLOCK_NAME}--vertical`;
|
|
23
|
+
case 'outlined':
|
|
24
|
+
return `${BLOCK_NAME}--outlined`;
|
|
25
|
+
default:
|
|
26
|
+
return null;
|
|
27
|
+
}
|
|
28
|
+
})
|
|
29
|
+
.filter(Boolean);
|
|
30
|
+
};
|
|
31
|
+
// Main Table component
|
|
32
|
+
const Frame = forwardRef(function TableFrame({ borderTypes = [], rounded = false, striped = false, layout = 'auto', children, className, ...rest }, ref) {
|
|
33
|
+
const classes = [
|
|
34
|
+
BLOCK_NAME,
|
|
35
|
+
...getBorderClassNames(borderTypes),
|
|
36
|
+
rounded && `${BLOCK_NAME}--rounded`,
|
|
37
|
+
striped && `${BLOCK_NAME}--striped`,
|
|
38
|
+
layout === 'fixed' && `${BLOCK_NAME}--fixed`,
|
|
39
|
+
layout === 'scrollable' && `${BLOCK_NAME}--scrollable`,
|
|
40
|
+
className,
|
|
41
|
+
]
|
|
42
|
+
.filter(Boolean)
|
|
43
|
+
.join(' ')
|
|
44
|
+
.trim();
|
|
45
|
+
const scrollContainerClasses = [
|
|
46
|
+
`${BLOCK_NAME}-frame`,
|
|
47
|
+
layout === 'scrollable' && `${BLOCK_NAME}-frame--scrollable`,
|
|
48
|
+
]
|
|
49
|
+
.filter(Boolean)
|
|
50
|
+
.join(' ')
|
|
51
|
+
.trim();
|
|
52
|
+
const tableElement = (React.createElement("table", { ref: ref, className: classes, ...rest }, children));
|
|
53
|
+
// Wrap in container if layout is scrollable
|
|
54
|
+
if (layout === 'scrollable') {
|
|
55
|
+
return React.createElement("div", { className: scrollContainerClasses }, tableElement);
|
|
56
|
+
}
|
|
57
|
+
return tableElement;
|
|
58
|
+
});
|
|
59
|
+
// Table.Caption
|
|
60
|
+
const Caption = forwardRef(function TableCaption({ children, className, ...rest }, ref) {
|
|
61
|
+
return (React.createElement("caption", { ref: ref, className: [`${BLOCK_NAME}-caption`, className]
|
|
62
|
+
.filter(Boolean)
|
|
63
|
+
.join(' ')
|
|
64
|
+
.trim(), ...rest }, children));
|
|
65
|
+
});
|
|
66
|
+
// Table.Header
|
|
67
|
+
const Header = forwardRef(function TableHeader({ children, className, ...rest }, ref) {
|
|
68
|
+
return (React.createElement("thead", { ref: ref, className: [`${BLOCK_NAME}-header`, className]
|
|
69
|
+
.filter(Boolean)
|
|
70
|
+
.join(' ')
|
|
71
|
+
.trim(), ...rest }, children));
|
|
72
|
+
});
|
|
73
|
+
// Table.Body
|
|
74
|
+
const Body = forwardRef(function TableBody({ children, className, ...rest }, ref) {
|
|
75
|
+
return (React.createElement("tbody", { ref: ref, className: [`${BLOCK_NAME}-body`, className].filter(Boolean).join(' '), ...rest }, children));
|
|
76
|
+
});
|
|
77
|
+
// Table.Footer
|
|
78
|
+
const Footer = forwardRef(function TableFooter({ children, className, ...rest }, ref) {
|
|
79
|
+
return (React.createElement("tfoot", { ref: ref, className: [`${BLOCK_NAME}-footer`, className]
|
|
80
|
+
.filter(Boolean)
|
|
81
|
+
.join(' ')
|
|
82
|
+
.trim(), ...rest }, children));
|
|
83
|
+
});
|
|
84
|
+
// Table.Row
|
|
85
|
+
const Row = forwardRef(function TableRow({ children, className, ...rest }, ref) {
|
|
86
|
+
return (React.createElement("tr", { ref: ref, className: [`${BLOCK_NAME}-row`, className]
|
|
87
|
+
.filter(Boolean)
|
|
88
|
+
.join(' ')
|
|
89
|
+
.trim(), ...rest }, children));
|
|
90
|
+
});
|
|
91
|
+
// Table.Head
|
|
92
|
+
const Head = forwardRef(function TableHead({ children, align, width, minWidth, className, ...rest }, ref) {
|
|
93
|
+
const classes = [
|
|
94
|
+
`${BLOCK_NAME}-head`,
|
|
95
|
+
align && getAlignClassName(align, 'head'),
|
|
96
|
+
className,
|
|
97
|
+
]
|
|
98
|
+
.filter(Boolean)
|
|
99
|
+
.join(' ')
|
|
100
|
+
.trim();
|
|
101
|
+
const headStyle = width || minWidth
|
|
102
|
+
? {
|
|
103
|
+
...(width && { width }),
|
|
104
|
+
...(minWidth && { minWidth }),
|
|
105
|
+
}
|
|
106
|
+
: undefined;
|
|
107
|
+
return (React.createElement("th", { ref: ref, className: classes, style: headStyle, ...rest }, children));
|
|
108
|
+
});
|
|
109
|
+
// Table.Cell
|
|
110
|
+
const Cell = forwardRef(function TableCell({ children, align, className, ...rest }, ref) {
|
|
111
|
+
const classes = [
|
|
112
|
+
`${BLOCK_NAME}-cell`,
|
|
113
|
+
align && getAlignClassName(align, 'cell'),
|
|
114
|
+
className,
|
|
115
|
+
]
|
|
116
|
+
.filter(Boolean)
|
|
117
|
+
.join(' ')
|
|
118
|
+
.trim();
|
|
119
|
+
return (React.createElement("td", { ref: ref, className: classes, ...rest }, children));
|
|
120
|
+
});
|
|
121
|
+
export const Table = {
|
|
122
|
+
Frame,
|
|
123
|
+
Caption,
|
|
124
|
+
Header,
|
|
125
|
+
Body,
|
|
126
|
+
Footer,
|
|
127
|
+
Row,
|
|
128
|
+
Head,
|
|
129
|
+
Cell,
|
|
130
|
+
};
|
package/Table/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
|
package/Table/index.js
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Table = void 0;
|
|
4
|
+
var Table_1 = require("./Table");
|
|
5
|
+
Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return Table_1.Table; } });
|
|
6
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Table/index.ts"],"names":[],"mappings":";;;AAAA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA"}
|
package/Table/index.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Table } from "./Table.mjs";
|
package/index.css
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
--color-surface-accent-primary-light
|
|
17
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;width:400px}.spui-AppealModal[open]:not(.spui-AppealModal--closing),.spui-AppealModal[open]:not(.spui-AppealModal--closing).spui-AppealModal::backdrop{animation:spui-AppealModal-fade-in .5s cubic-bezier(0,0,0,1)}.spui-AppealModal--closing,.spui-AppealModal--closing.spui-AppealModal::backdrop{animation:spui-AppealModal-fade-out .3s cubic-bezier(0,0,0,1)}@media (prefers-reduced-motion:reduce){.spui-AppealModal--closing,.spui-AppealModal--closing.spui-AppealModal::backdrop,.spui-AppealModal[open]:not(.spui-AppealModal--closing),.spui-AppealModal[open]:not(.spui-AppealModal--closing).spui-AppealModal::backdrop{animation-duration:.01s}}html:has(.spui-AppealModal[open]){overflow:hidden}html.spui-AppealModal--open{overflow:hidden}@media screen and (max-width:440px){.spui-AppealModal{width:calc(100% - 48px)}}.spui-AppealModal::backdrop{background:rgba(0,0,0,.6)}.spui-AppealModal+.backdrop{background:rgba(0,0,0,.6)}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-AppealModal-frame{color:var(--color-text-medium-emphasis);display:grid;gap:0 0;grid-auto-flow:row;grid-template-areas:"Image" "Title" "Body" "ButtonGroup" "CloseButton";grid-template-columns:1fr;grid-template-rows:auto;padding:0 0 24px;width:100%}.spui-AppealModal-image{grid-area:Image}.spui-AppealModal-image img{border-radius:20px 20px 0 0}.spui-AppealModal-title{color:var(--color-text-high-emphasis);font-size:1.125em;font-weight:700;grid-area:Title;line-height:1.4;margin:24px 24px 0;padding:0;text-align:center}.spui-AppealModal-body{color:var(--color-text-medium-emphasis);font-size:.875em;grid-area:Body;line-height:1.6;margin:8px 24px 0;overflow-wrap:break-word;text-align:center}.spui-AppealModal-buttonGroup{align-items:center;grid-area:ButtonGroup;justify-content:center;margin:16px 24px 0;text-align:center}.spui-AppealModal-closeIconButton,.spui-AppealModal-closeTextButton{grid-area:CloseButton}.spui-AppealModal-closeIconButton{display:none}.spui-AppealModal-closeTextButton{margin:20px 24px 0;text-align:center}.spui-AppealModal-buttonGroup :is(.spui-Button,.spui-LinkButton){max-width:240px}@media screen and (min-width:768px){.spui-AppealModal{min-height:300px;min-width:500px}.spui-AppealModal--large{width:1024px}.spui-AppealModal--medium{width:840px}.spui-AppealModal--small{width:480px}.spui-AppealModal-frame{grid-auto-flow:row;grid-template-areas:"Title CloseButton" "Body CloseButton" "Image Image" "ButtonGroup ButtonGroup";grid-template-columns:1fr 72px;grid-template-rows:auto;padding:0 0 36px}.spui-AppealModal-title{margin:32px 16px 0 36px;text-align:left}.spui-AppealModal-body{margin:12px 16px 0 36px;text-align:left}.spui-AppealModal-image{margin:32px 36px 0}.spui-AppealModal-image img{border:var(--AppealModal-image-border);border-radius:var(--AppealModal-image-borderRadius);box-sizing:border-box}.spui-AppealModal-buttonGroup{margin:16px 36px 0}.spui-AppealModal-closeIconButton{--IconButton--neutral-backgroundColor: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{--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)}.spui-TextButton:disabled{opacity:.3}.spui-TextButton:focus{outline:2px solid var(--TextButton-onFocus-outlineColor);outline-offset:1px}.spui-TextButton:focus:not(:focus-visible){outline:none}.spui-TextButton--subtle{color:var(--TextButton--subtle-color)}.spui-TextButton--hasIcon{align-items:center;display:inline-flex}.spui-TextButton-icon{line-height:0}.spui-TextButton--iconstart .spui-TextButton-icon{margin-right:4px}.spui-TextButton--iconend{flex-direction:row-reverse}.spui-TextButton--iconend .spui-TextButton-icon{margin-left:4px}.spui-TextButton{text-decoration:underline}.spui-TextButton--hasIcon,.spui-TextButton--underlinehover{text-decoration:none}.spui-TextButton:disabled{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)}.spui-TextLink:focus{outline:2px solid var(--TextLink-onFocus-outlineColor);outline-offset:1px}.spui-TextLink:focus:not(:focus-visible){outline:none}.spui-TextLink--subtle{color:var(--TextLink--subtle-color)}.spui-TextLink--hasIcon{align-items:center;display:inline-flex}.spui-TextLink-icon{line-height:0}.spui-TextLink--iconstart .spui-TextLink-icon{margin-right:4px}.spui-TextLink--iconend{flex-direction:row-reverse}.spui-TextLink--iconend .spui-TextLink-icon{margin-left:4px}.spui-TextLink{text-decoration:underline}.spui-TextLink--hasIcon,.spui-TextLink--underlinehover{text-decoration:none}@media (hover:hover){.spui-TextLink:hover{text-decoration:none}:is(.spui-TextLink--hasIcon,.spui-TextLink--underlinehover):hover{text-decoration:underline}}:root{--Toast-z-index:1}.spui-Toast{box-sizing:border-box;left:0;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}}@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)}.spui-TextButton:disabled{opacity:.3}.spui-TextButton:focus{outline:2px solid var(--TextButton-onFocus-outlineColor);outline-offset:1px}.spui-TextButton:focus:not(:focus-visible){outline:none}.spui-TextButton--subtle{color:var(--TextButton--subtle-color)}.spui-TextButton--hasIcon{align-items:center;display:inline-flex}.spui-TextButton-icon{line-height:0}.spui-TextButton--iconstart .spui-TextButton-icon{margin-right:4px}.spui-TextButton--iconend{flex-direction:row-reverse}.spui-TextButton--iconend .spui-TextButton-icon{margin-left:4px}.spui-TextButton{text-decoration:underline}.spui-TextButton--hasIcon,.spui-TextButton--underlinehover{text-decoration:none}.spui-TextButton:disabled{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)}.spui-TextLink:focus{outline:2px solid var(--TextLink-onFocus-outlineColor);outline-offset:1px}.spui-TextLink:focus:not(:focus-visible){outline:none}.spui-TextLink--subtle{color:var(--TextLink--subtle-color)}.spui-TextLink--hasIcon{align-items:center;display:inline-flex}.spui-TextLink-icon{line-height:0}.spui-TextLink--iconstart .spui-TextLink-icon{margin-right:4px}.spui-TextLink--iconend{flex-direction:row-reverse}.spui-TextLink--iconend .spui-TextLink-icon{margin-left:4px}.spui-TextLink{text-decoration:underline}.spui-TextLink--hasIcon,.spui-TextLink--underlinehover{text-decoration:none}@media (hover:hover){.spui-TextLink:hover{text-decoration:none}:is(.spui-TextLink--hasIcon,.spui-TextLink--underlinehover):hover{text-decoration:underline}}:root{--Toast-z-index:1}.spui-Toast{box-sizing:border-box;left:0;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(
|
|
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openameba/spindle-ui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.6.1",
|
|
4
4
|
"main": "./index.js",
|
|
5
5
|
"module": "./index.mjs",
|
|
6
6
|
"types": "./index.d.ts",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"dependencies": {
|
|
62
62
|
"@openameba/spindle-hooks": "^1.6.0",
|
|
63
63
|
"ameba-color-palette.css": "^4.17.0",
|
|
64
|
-
"
|
|
64
|
+
"use-callback-ref": "^1.3.3"
|
|
65
65
|
},
|
|
66
66
|
"devDependencies": {
|
|
67
67
|
"@figma/code-connect": "1.1.3",
|
|
@@ -110,5 +110,5 @@
|
|
|
110
110
|
"stylelint-selector-bem-pattern": "^3.0.0",
|
|
111
111
|
"ts-jest": "29.3.2"
|
|
112
112
|
},
|
|
113
|
-
"gitHead": "
|
|
113
|
+
"gitHead": "72347e4f7dd31155fbb5307fcf0d0b916fc083a2"
|
|
114
114
|
}
|