@serendie/ui 0.1.14 → 0.1.16
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/dist/components/Button.js +3 -2
- package/dist/components/DropdownMenu.js +1 -1
- package/dist/components/PasswordField.d.ts +10 -0
- package/dist/components/PasswordField.js +44 -0
- package/dist/components/TextField.d.ts +2 -0
- package/dist/components/TextField.js +57 -46
- package/dist/index.d.ts +1 -1
- package/dist/index.js +45 -45
- package/dist/styles.css +1 -1
- package/dist/tokens/getToken.js +1 -1
- package/dist/tokens/index.js +1 -1
- package/package.json +3 -3
- package/dist/assets/avatar.svg.js +0 -5
- package/dist/assets/check.svg.js +0 -5
- package/dist/assets/checkCircle.svg.js +0 -5
- package/dist/assets/error.svg.js +0 -5
- package/dist/assets/errorCircle.svg.js +0 -5
- package/dist/assets/errorFill.svg.js +0 -5
- package/dist/assets/icons/outline/close.svg.js +0 -5
- package/dist/assets/texture.svg.js +0 -5
- package/dist/components/SvgIcon.d.ts +0 -75
- package/dist/components/SvgIcon.js +0 -72
- package/dist/components/SvgIcon.stories.d.ts +0 -7
- package/dist/node_modules/@material-design-icons/svg/outlined/info.svg.js +0 -5
- package/dist/node_modules/@material-design-icons/svg/round/account_circle.svg.js +0 -5
- package/dist/node_modules/@material-design-icons/svg/round/add.svg.js +0 -5
- package/dist/node_modules/@material-design-icons/svg/round/arrow_outward.svg.js +0 -5
- package/dist/node_modules/@material-design-icons/svg/round/chevron_left.svg.js +0 -5
- package/dist/node_modules/@material-design-icons/svg/round/chevron_right.svg.js +0 -5
- package/dist/node_modules/@material-design-icons/svg/round/content_copy.svg.js +0 -5
- package/dist/node_modules/@material-design-icons/svg/round/expand_more.svg.js +0 -5
- package/dist/node_modules/@material-design-icons/svg/round/face.svg.js +0 -5
- package/dist/node_modules/@material-design-icons/svg/round/menu.svg.js +0 -5
- package/dist/node_modules/@material-design-icons/svg/round/search.svg.js +0 -5
- package/dist/node_modules/@material-design-icons/svg/round/settings.svg.js +0 -5
- /package/dist/{design-tokens → node_modules/@serendie/design-token}/dist/panda-tokens.js +0 -0
- /package/dist/{design-tokens → node_modules/@serendie/design-token}/dist/tokens.js +0 -0
|
@@ -23,6 +23,7 @@ import "./IconButton.js";
|
|
|
23
23
|
import "./ListItem.js";
|
|
24
24
|
import "./ModalDialog.js";
|
|
25
25
|
import "./NotificationBadge.js";
|
|
26
|
+
import "./PasswordField.js";
|
|
26
27
|
import { ProgressIndicator as v } from "./ProgressIndicator.js";
|
|
27
28
|
import "./RadioButton.js";
|
|
28
29
|
import "./Search.js";
|
|
@@ -152,7 +153,7 @@ const d = {
|
|
|
152
153
|
position: "relative",
|
|
153
154
|
zIndex: "sd.system.elevation.zIndex.base"
|
|
154
155
|
}
|
|
155
|
-
}),
|
|
156
|
+
}), re = b.forwardRef(
|
|
156
157
|
(s, l) => {
|
|
157
158
|
const [
|
|
158
159
|
n,
|
|
@@ -191,6 +192,6 @@ const d = {
|
|
|
191
192
|
}
|
|
192
193
|
);
|
|
193
194
|
export {
|
|
194
|
-
|
|
195
|
+
re as Button,
|
|
195
196
|
m as ButtonStyle
|
|
196
197
|
};
|
|
@@ -19,11 +19,11 @@ import { IconButton as y } from "./IconButton.js";
|
|
|
19
19
|
import "./ListItem.js";
|
|
20
20
|
import "./ModalDialog.js";
|
|
21
21
|
import "./NotificationBadge.js";
|
|
22
|
+
import "./PasswordField.js";
|
|
22
23
|
import "./ProgressIndicator.js";
|
|
23
24
|
import "./RadioButton.js";
|
|
24
25
|
import "./Search.js";
|
|
25
26
|
import "./Select.js";
|
|
26
|
-
import "react";
|
|
27
27
|
import "./Switch.js";
|
|
28
28
|
import "./TabItem.js";
|
|
29
29
|
import "./Tabs.js";
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { TextField } from './TextField';
|
|
3
|
+
type PasswordFieldProps = Omit<React.ComponentProps<typeof TextField>, "type" | "rightContent"> & {
|
|
4
|
+
/**
|
|
5
|
+
* パスワードの表示/非表示切り替えを無効にする
|
|
6
|
+
*/
|
|
7
|
+
disableToggle?: boolean;
|
|
8
|
+
};
|
|
9
|
+
export declare const PasswordField: React.ForwardRefExoticComponent<Omit<PasswordFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as n, useState as d } from "react";
|
|
3
|
+
import { TextField as m } from "./TextField.js";
|
|
4
|
+
import { SerendieSymbol as p } from "../node_modules/@serendie/symbols/dist/symbols2.js";
|
|
5
|
+
import { IconButton as w } from "./IconButton.js";
|
|
6
|
+
const g = n(
|
|
7
|
+
({ disableToggle: s = !1, disabled: e, ...i }, r) => {
|
|
8
|
+
const [o, a] = d(!1);
|
|
9
|
+
return /* @__PURE__ */ t(
|
|
10
|
+
m,
|
|
11
|
+
{
|
|
12
|
+
type: o ? "text" : "password",
|
|
13
|
+
rightContent: s ? void 0 : /* @__PURE__ */ t(
|
|
14
|
+
w,
|
|
15
|
+
{
|
|
16
|
+
type: "button",
|
|
17
|
+
onClick: () => {
|
|
18
|
+
a((l) => !l);
|
|
19
|
+
},
|
|
20
|
+
styleType: "ghost",
|
|
21
|
+
size: "small",
|
|
22
|
+
shape: "circle",
|
|
23
|
+
"aria-label": o ? "パスワードを隠す" : "パスワードを表示",
|
|
24
|
+
disabled: e,
|
|
25
|
+
icon: /* @__PURE__ */ t(
|
|
26
|
+
p,
|
|
27
|
+
{
|
|
28
|
+
name: o ? "eye-hidden" : "eye",
|
|
29
|
+
size: 20
|
|
30
|
+
}
|
|
31
|
+
)
|
|
32
|
+
}
|
|
33
|
+
),
|
|
34
|
+
disabled: e,
|
|
35
|
+
...i,
|
|
36
|
+
ref: r
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
g.displayName = "PasswordField";
|
|
42
|
+
export {
|
|
43
|
+
g as PasswordField
|
|
44
|
+
};
|
|
@@ -4,4 +4,6 @@ export declare const TextField: React.ForwardRefExoticComponent<{
|
|
|
4
4
|
description?: string;
|
|
5
5
|
invalid?: boolean;
|
|
6
6
|
invalidMessage?: string;
|
|
7
|
+
leftContent?: React.ReactNode;
|
|
8
|
+
rightContent?: React.ReactNode;
|
|
7
9
|
} & Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -1,17 +1,19 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import m, { forwardRef as
|
|
3
|
-
import
|
|
4
|
-
import { css as
|
|
5
|
-
import { cx as
|
|
1
|
+
import { jsxs as n, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import m, { forwardRef as j } from "react";
|
|
3
|
+
import q from "../node_modules/merge-refs/dist/esm/index.js";
|
|
4
|
+
import { css as v } from "../ui/styled-system/css/css.js";
|
|
5
|
+
import { cx as z } from "../ui/styled-system/css/cx.js";
|
|
6
6
|
import "../ui/styled-system/helpers.js";
|
|
7
|
-
import { sva as
|
|
8
|
-
import { SerendieSymbol as
|
|
9
|
-
const
|
|
7
|
+
import { sva as L } from "../ui/styled-system/css/sva.js";
|
|
8
|
+
import { SerendieSymbol as S } from "../node_modules/@serendie/symbols/dist/symbols2.js";
|
|
9
|
+
const C = L({
|
|
10
10
|
slots: [
|
|
11
11
|
"root",
|
|
12
12
|
"label",
|
|
13
13
|
"required",
|
|
14
14
|
"inputWrapper",
|
|
15
|
+
"leftContent",
|
|
16
|
+
"rightContent",
|
|
15
17
|
"input",
|
|
16
18
|
"icon",
|
|
17
19
|
"messageField",
|
|
@@ -41,7 +43,7 @@ const v = q({
|
|
|
41
43
|
inputWrapper: {
|
|
42
44
|
height: 48,
|
|
43
45
|
display: "grid",
|
|
44
|
-
gridTemplateColumns: "1fr auto",
|
|
46
|
+
gridTemplateColumns: "auto 1fr auto auto",
|
|
45
47
|
alignItems: "center",
|
|
46
48
|
outlineStyle: "solid",
|
|
47
49
|
outlineWidth: "sd.system.dimension.border.medium",
|
|
@@ -64,6 +66,12 @@ const v = q({
|
|
|
64
66
|
outlineColor: "sd.system.color.impression.negative"
|
|
65
67
|
}
|
|
66
68
|
},
|
|
69
|
+
leftContent: {
|
|
70
|
+
paddingLeft: "sd.system.dimension.spacing.medium"
|
|
71
|
+
},
|
|
72
|
+
rightContent: {
|
|
73
|
+
paddingRight: "sd.system.dimension.spacing.medium"
|
|
74
|
+
},
|
|
67
75
|
input: {
|
|
68
76
|
outline: "none",
|
|
69
77
|
paddingTop: "sd.system.dimension.spacing.extraSmall",
|
|
@@ -95,85 +103,88 @@ const v = q({
|
|
|
95
103
|
color: "sd.system.color.impression.negative"
|
|
96
104
|
}
|
|
97
105
|
}
|
|
98
|
-
}),
|
|
106
|
+
}), K = j(
|
|
99
107
|
({
|
|
100
|
-
placeholder:
|
|
108
|
+
placeholder: N,
|
|
101
109
|
label: c,
|
|
102
|
-
description:
|
|
110
|
+
description: a,
|
|
103
111
|
required: p,
|
|
104
112
|
invalidMessage: d,
|
|
105
113
|
invalid: o,
|
|
106
114
|
type: _ = "text",
|
|
107
|
-
disabled:
|
|
115
|
+
disabled: l,
|
|
108
116
|
onChange: u,
|
|
109
117
|
value: y,
|
|
110
|
-
className:
|
|
118
|
+
className: w,
|
|
119
|
+
leftContent: g,
|
|
120
|
+
rightContent: h,
|
|
111
121
|
...t
|
|
112
|
-
},
|
|
113
|
-
const
|
|
114
|
-
var
|
|
122
|
+
}, R) => {
|
|
123
|
+
const r = m.useRef(null), W = q(r, R), [F, k] = C.splitVariantProps(t), s = C(F), T = a || o && d, [V, I] = m.useState(t.defaultValue || y), x = t.id || m.useId(), P = () => {
|
|
124
|
+
var b;
|
|
115
125
|
const i = {
|
|
116
126
|
target: { value: "" }
|
|
117
127
|
};
|
|
118
|
-
|
|
119
|
-
},
|
|
120
|
-
|
|
128
|
+
f(i), (b = t.onReset) == null || b.call(t, i), r.current && (r.current.value = "");
|
|
129
|
+
}, f = (i) => {
|
|
130
|
+
I(i.target.value), u && u(i);
|
|
121
131
|
};
|
|
122
|
-
return /* @__PURE__ */
|
|
123
|
-
c ? /* @__PURE__ */
|
|
132
|
+
return /* @__PURE__ */ n("div", { className: z(s.root, w), children: [
|
|
133
|
+
c ? /* @__PURE__ */ n("label", { className: s.label, htmlFor: x, children: [
|
|
124
134
|
c,
|
|
125
|
-
p && /* @__PURE__ */
|
|
135
|
+
p && /* @__PURE__ */ e("span", { className: s.required, children: "必須" })
|
|
126
136
|
] }) : null,
|
|
127
|
-
/* @__PURE__ */
|
|
137
|
+
/* @__PURE__ */ n(
|
|
128
138
|
"div",
|
|
129
139
|
{
|
|
130
|
-
className:
|
|
140
|
+
className: s.inputWrapper,
|
|
131
141
|
"data-invalid": o ? !0 : void 0,
|
|
132
|
-
"data-disabled":
|
|
142
|
+
"data-disabled": l ? !0 : void 0,
|
|
133
143
|
children: [
|
|
134
|
-
/* @__PURE__ */ s(
|
|
144
|
+
g ? /* @__PURE__ */ e("div", { className: s.leftContent, children: g }) : /* @__PURE__ */ e("div", {}),
|
|
145
|
+
/* @__PURE__ */ e(
|
|
135
146
|
"input",
|
|
136
147
|
{
|
|
137
|
-
ref:
|
|
138
|
-
id:
|
|
139
|
-
placeholder:
|
|
148
|
+
ref: W,
|
|
149
|
+
id: x,
|
|
150
|
+
placeholder: N,
|
|
140
151
|
required: p,
|
|
141
|
-
disabled:
|
|
152
|
+
disabled: l,
|
|
142
153
|
value: y,
|
|
143
154
|
type: _,
|
|
144
|
-
className:
|
|
145
|
-
onChange:
|
|
146
|
-
...
|
|
155
|
+
className: s.input,
|
|
156
|
+
onChange: f,
|
|
157
|
+
...k
|
|
147
158
|
}
|
|
148
159
|
),
|
|
149
|
-
/* @__PURE__ */ s("div", { className:
|
|
150
|
-
(o ? /* @__PURE__ */
|
|
160
|
+
h ? /* @__PURE__ */ e("div", { className: s.rightContent, children: h }) : /* @__PURE__ */ e("div", { className: s.icon, children: !l && /* disabledの場合はアイコンを表示しない */
|
|
161
|
+
(o ? /* @__PURE__ */ e(
|
|
151
162
|
"span",
|
|
152
163
|
{
|
|
153
|
-
className:
|
|
164
|
+
className: v({
|
|
154
165
|
color: "sd.system.color.impression.negative"
|
|
155
166
|
}),
|
|
156
|
-
children: /* @__PURE__ */
|
|
167
|
+
children: /* @__PURE__ */ e(S, { name: "alert-circle", size: 20 })
|
|
157
168
|
}
|
|
158
|
-
) :
|
|
169
|
+
) : V ? /* @__PURE__ */ e(
|
|
159
170
|
"button",
|
|
160
171
|
{
|
|
161
|
-
className:
|
|
162
|
-
onClick:
|
|
172
|
+
className: v({ cursor: "pointer" }),
|
|
173
|
+
onClick: P,
|
|
163
174
|
"aria-label": "値をクリア",
|
|
164
|
-
children: /* @__PURE__ */
|
|
175
|
+
children: /* @__PURE__ */ e(S, { name: "close", size: 20 })
|
|
165
176
|
}
|
|
166
177
|
) : null) })
|
|
167
178
|
]
|
|
168
179
|
}
|
|
169
180
|
),
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
o && d && /* @__PURE__ */
|
|
181
|
+
T && /* @__PURE__ */ n("div", { className: s.messageField, children: [
|
|
182
|
+
a && /* @__PURE__ */ e("p", { className: s.description, children: a }),
|
|
183
|
+
o && d && /* @__PURE__ */ e("p", { className: s.invalidMessage, children: d })
|
|
173
184
|
] })
|
|
174
185
|
] });
|
|
175
186
|
}
|
|
176
187
|
);
|
|
177
188
|
export {
|
|
178
|
-
|
|
189
|
+
K as TextField
|
|
179
190
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -18,12 +18,12 @@ export * from './components/List.tsx';
|
|
|
18
18
|
export * from './components/ListItem.tsx';
|
|
19
19
|
export * from './components/ModalDialog.tsx';
|
|
20
20
|
export * from './components/NotificationBadge.tsx';
|
|
21
|
+
export * from './components/PasswordField.tsx';
|
|
21
22
|
export * from './components/ProgressIndicator.tsx';
|
|
22
23
|
export * from './components/RadioButton.tsx';
|
|
23
24
|
export * from './components/RadioGroup.tsx';
|
|
24
25
|
export * from './components/Search.tsx';
|
|
25
26
|
export * from './components/Select.tsx';
|
|
26
|
-
export * from './components/SvgIcon.tsx';
|
|
27
27
|
export * from './components/Switch.tsx';
|
|
28
28
|
export * from './components/TabItem.tsx';
|
|
29
29
|
export * from './components/Tabs.tsx';
|
package/dist/index.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { SerendiePreset as t } from "./preset.js";
|
|
2
2
|
import { Accordion as m } from "./components/Accordion.js";
|
|
3
3
|
import { AccordionGroup as a } from "./components/AccordionGroup.js";
|
|
4
|
-
import { Avatar as c, AvatarStyle as
|
|
4
|
+
import { Avatar as c, AvatarStyle as i } from "./components/Avatar.js";
|
|
5
5
|
import { Badge as n, BadgeCloseButton as d, BadgeStyle as s } from "./components/Badge.js";
|
|
6
|
-
import { Banner as
|
|
6
|
+
import { Banner as S } from "./components/Banner.js";
|
|
7
7
|
import { BottomNavigation as y } from "./components/BottomNavigation.js";
|
|
8
|
-
import { BottomNavigationItem as
|
|
8
|
+
import { BottomNavigationItem as I, BottomNavigationItemStyle as C } from "./components/BottomNavigationItem.js";
|
|
9
9
|
import { Button as u, ButtonStyle as k } from "./components/Button.js";
|
|
10
|
-
import { CheckBox as b, CheckBoxStyle as v, checkboxCheckedIconCss as D, checkboxIconCss as
|
|
11
|
-
import { ChoiceBox as
|
|
10
|
+
import { CheckBox as b, CheckBoxStyle as v, checkboxCheckedIconCss as D, checkboxIconCss as w, checkboxUncheckedIconCss as A } from "./components/CheckBox.js";
|
|
11
|
+
import { ChoiceBox as P, ChoiceBoxStyle as L } from "./components/ChoiceBox.js";
|
|
12
12
|
import { DashboardWidget as R } from "./components/DashboardWidget.js";
|
|
13
|
-
import { Divider as
|
|
13
|
+
import { Divider as G, DividerStyle as U } from "./components/Divider.js";
|
|
14
14
|
import { Drawer as j } from "./components/Drawer.js";
|
|
15
15
|
import { DropdownMenu as z, DropdownMenuStyle as E } from "./components/DropdownMenu.js";
|
|
16
16
|
import { IconButton as J, IconButtonStyle as K } from "./components/IconButton.js";
|
|
@@ -18,40 +18,40 @@ import { List as Q } from "./components/List.js";
|
|
|
18
18
|
import { ListItem as X, ListItemStyle as Y } from "./components/ListItem.js";
|
|
19
19
|
import { ModalDialog as _ } from "./components/ModalDialog.js";
|
|
20
20
|
import { NotificationBadge as oo } from "./components/NotificationBadge.js";
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
21
|
+
import { PasswordField as to } from "./components/PasswordField.js";
|
|
22
|
+
import { ProgressIndicator as mo, ProgressIndicatorStyle as xo } from "./components/ProgressIndicator.js";
|
|
23
|
+
import { RadioButton as po, RadioButtonStyle as co, radioCheckedIconCss as io, radioIconCss as fo, radioUncheckedIconCss as no } from "./components/RadioButton.js";
|
|
24
|
+
import { RadioGroup as lo } from "./components/RadioGroup.js";
|
|
25
|
+
import { Search as Bo, SearchStyle as yo } from "./components/Search.js";
|
|
26
|
+
import { Select as Io, SelectStyle as Co } from "./components/Select.js";
|
|
27
27
|
import { Switch as uo, SwitchStyle as ko } from "./components/Switch.js";
|
|
28
28
|
import { TabItem as bo, TabItemStyle as vo } from "./components/TabItem.js";
|
|
29
|
-
import { Tabs as
|
|
30
|
-
import { TextArea as
|
|
31
|
-
import { TextField as
|
|
32
|
-
import { Toast as
|
|
29
|
+
import { Tabs as wo, TabsStyle as Ao } from "./components/Tabs.js";
|
|
30
|
+
import { TextArea as Po } from "./components/TextArea.js";
|
|
31
|
+
import { TextField as Mo } from "./components/TextField.js";
|
|
32
|
+
import { Toast as Fo, ToastStyle as Go, toaster as Uo } from "./components/Toast.js";
|
|
33
33
|
import { TopAppBar as jo } from "./components/TopAppBar.js";
|
|
34
34
|
export {
|
|
35
35
|
m as Accordion,
|
|
36
36
|
a as AccordionGroup,
|
|
37
37
|
c as Avatar,
|
|
38
|
-
|
|
38
|
+
i as AvatarStyle,
|
|
39
39
|
n as Badge,
|
|
40
40
|
d as BadgeCloseButton,
|
|
41
41
|
s as BadgeStyle,
|
|
42
|
-
|
|
42
|
+
S as Banner,
|
|
43
43
|
y as BottomNavigation,
|
|
44
|
-
|
|
44
|
+
I as BottomNavigationItem,
|
|
45
45
|
C as BottomNavigationItemStyle,
|
|
46
46
|
u as Button,
|
|
47
47
|
k as ButtonStyle,
|
|
48
48
|
b as CheckBox,
|
|
49
49
|
v as CheckBoxStyle,
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
P as ChoiceBox,
|
|
51
|
+
L as ChoiceBoxStyle,
|
|
52
52
|
R as DashboardWidget,
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
G as Divider,
|
|
54
|
+
U as DividerStyle,
|
|
55
55
|
j as Drawer,
|
|
56
56
|
z as DropdownMenu,
|
|
57
57
|
E as DropdownMenuStyle,
|
|
@@ -62,33 +62,33 @@ export {
|
|
|
62
62
|
Y as ListItemStyle,
|
|
63
63
|
_ as ModalDialog,
|
|
64
64
|
oo as NotificationBadge,
|
|
65
|
-
to as
|
|
66
|
-
|
|
67
|
-
xo as
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
yo as
|
|
73
|
-
Io as
|
|
65
|
+
to as PasswordField,
|
|
66
|
+
mo as ProgressIndicator,
|
|
67
|
+
xo as ProgressIndicatorStyle,
|
|
68
|
+
po as RadioButton,
|
|
69
|
+
co as RadioButtonStyle,
|
|
70
|
+
lo as RadioGroup,
|
|
71
|
+
Bo as Search,
|
|
72
|
+
yo as SearchStyle,
|
|
73
|
+
Io as Select,
|
|
74
|
+
Co as SelectStyle,
|
|
74
75
|
t as SerendiePreset,
|
|
75
|
-
Co as SvgIcon,
|
|
76
76
|
uo as Switch,
|
|
77
77
|
ko as SwitchStyle,
|
|
78
78
|
bo as TabItem,
|
|
79
79
|
vo as TabItemStyle,
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
80
|
+
wo as Tabs,
|
|
81
|
+
Ao as TabsStyle,
|
|
82
|
+
Po as TextArea,
|
|
83
|
+
Mo as TextField,
|
|
84
|
+
Fo as Toast,
|
|
85
|
+
Go as ToastStyle,
|
|
86
86
|
jo as TopAppBar,
|
|
87
87
|
D as checkboxCheckedIconCss,
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
88
|
+
w as checkboxIconCss,
|
|
89
|
+
A as checkboxUncheckedIconCss,
|
|
90
|
+
io as radioCheckedIconCss,
|
|
91
|
+
fo as radioIconCss,
|
|
92
|
+
no as radioUncheckedIconCss,
|
|
93
|
+
Uo as toaster
|
|
94
94
|
};
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+Mono:wght@100..900&family=Roboto:wght@100;400;700&display=swap";@layer reset,base,tokens,recipes,utilities;@layer base{:root{--global-font-body: "Roboto", "Noto Sans JP", sans-serif;--global-font-mono: "Noto Sans Mono", monospace;font-optical-sizing:auto;text-rendering:optimizeLegibility;font-feature-settings:"palt";letter-spacing:.03em}}@layer reset{html,:host{--font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;line-height:1.5;font-family:var(--global-font-body, var(--font-fallback))}*,:before,:after,::backdrop,::file-selector-button{margin:0;padding:0;box-sizing:border-box;border-width:0px;border-style:solid;border-color:var(--global-color-border, currentColor)}hr{height:0px;color:inherit;border-top-width:1px}body{height:100%;line-height:inherit}img{border-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{text-wrap:balance;font-size:inherit;font-weight:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ol,ul,menu{list-style:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{-moz-appearance:button;appearance:button;-webkit-appearance:button}button,input,optgroup,select,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:transparent}::placeholder{opacity:1;--placeholder-fallback: color-mix(in srgb, currentColor 50%, transparent);color:var(--global-color-placeholder, var(--placeholder-fallback))}textarea{resize:vertical}table{text-indent:0px;border-collapse:collapse;border-color:inherit}summary{display:list-item}small{font-size:80%}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}sub{bottom:-.25em}sup{top:-.5em}dialog{padding:0}a{color:inherit;text-decoration:inherit}abbr:where([title]){text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{--font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";font-feature-settings:normal;font-variation-settings:normal;font-family:var(--global-font-mono, var(--font-mono-fallback));font-size:1em}progress{vertical-align:baseline}::-webkit-search-decoration,::-webkit-search-cancel-button{-webkit-appearance:none}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}:-moz-ui-invalid{box-shadow:none}:-moz-focusring{outline:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer base{:root{--made-with-panda: "🐼"}*,:before,:after,::backdrop{--blur: ;--brightness: ;--contrast: ;--grayscale: ;--hue-rotate: ;--invert: ;--saturate: ;--sepia: ;--drop-shadow: ;--backdrop-blur: ;--backdrop-brightness: ;--backdrop-contrast: ;--backdrop-grayscale: ;--backdrop-hue-rotate: ;--backdrop-invert: ;--backdrop-opacity: ;--backdrop-saturate: ;--backdrop-sepia: ;--gradient-from-position: ;--gradient-to-position: ;--gradient-via-position: ;--scroll-snap-strictness: proximity;--border-spacing-x: 0;--border-spacing-y: 0;--translate-x: 0;--translate-y: 0;--rotate: 0;--rotate-x: 0;--rotate-y: 0;--skew-x: 0;--skew-y: 0;--scale-x: 1;--scale-y: 1}}@layer tokens{:where(:root,:host){--colors-sd-reference-color-scale-white-1000: #FFFFFF;--colors-sd-reference-color-scale-black-1000: #000000;--colors-sd-reference-color-scale-transparency-5: #0000000D;--colors-sd-reference-color-scale-transparency-20: #00000033;--colors-sd-reference-color-scale-transparency-60: #FFFFFF99;--colors-sd-reference-color-scale-gray-100: #EFEEEB;--colors-sd-reference-color-scale-gray-200: #D9D8D3;--colors-sd-reference-color-scale-gray-300: #C8C7C2;--colors-sd-reference-color-scale-gray-400: #AFAEAA;--colors-sd-reference-color-scale-gray-500: #8C8B87;--colors-sd-reference-color-scale-gray-600: #696966;--colors-sd-reference-color-scale-gray-700: #525250;--colors-sd-reference-color-scale-gray-800: #3F3F3D;--colors-sd-reference-color-scale-gray-900: #31312F;--colors-sd-reference-color-scale-gray-1000: #232322;--colors-sd-reference-color-scale-red-100: #FCEBEA;--colors-sd-reference-color-scale-red-200: #FCD6D3;--colors-sd-reference-color-scale-red-300: #FDB9B4;--colors-sd-reference-color-scale-red-400: #FF8F8F;--colors-sd-reference-color-scale-red-500: #F84258;--colors-sd-reference-color-scale-red-600: #CE0037;--colors-sd-reference-color-scale-red-700: #A4002A;--colors-sd-reference-color-scale-red-800: #81001F;--colors-sd-reference-color-scale-red-900: #650417;--colors-sd-reference-color-scale-red-1000: #49060E;--colors-sd-reference-color-scale-chestnut-100: #FAECE6;--colors-sd-reference-color-scale-chestnut-200: #F7D8C9;--colors-sd-reference-color-scale-chestnut-300: #F7C6B0;--colors-sd-reference-color-scale-chestnut-400: #F49567;--colors-sd-reference-color-scale-chestnut-500: #E26324;--colors-sd-reference-color-scale-chestnut-600: #AB4919;--colors-sd-reference-color-scale-chestnut-700: #803510;--colors-sd-reference-color-scale-chestnut-800: #692C0D;--colors-sd-reference-color-scale-chestnut-900: #50230D;--colors-sd-reference-color-scale-chestnut-1000: #371B0B;--colors-sd-reference-color-scale-beige-100: #F7EDE2;--colors-sd-reference-color-scale-beige-200: #F2DBC0;--colors-sd-reference-color-scale-beige-300: #EDC18A;--colors-sd-reference-color-scale-beige-400: #DAA358;--colors-sd-reference-color-scale-beige-500: #AF8245;--colors-sd-reference-color-scale-beige-600: #846132;--colors-sd-reference-color-scale-beige-700: #684C26;--colors-sd-reference-color-scale-beige-800: #503A1C;--colors-sd-reference-color-scale-beige-900: #3E2D17;--colors-sd-reference-color-scale-beige-1000: #2B2013;--colors-sd-reference-color-scale-yellow-100: #FEEDBE;--colors-sd-reference-color-scale-yellow-200: #FFE885;--colors-sd-reference-color-scale-yellow-300: #FFE600;--colors-sd-reference-color-scale-yellow-400: #EDD202;--colors-sd-reference-color-scale-yellow-500: #AC9301;--colors-sd-reference-color-scale-yellow-600: #857100;--colors-sd-reference-color-scale-yellow-700: #5F5100;--colors-sd-reference-color-scale-yellow-800: #4A3E00;--colors-sd-reference-color-scale-yellow-900: #3A3000;--colors-sd-reference-color-scale-yellow-1000: #292200;--colors-sd-reference-color-scale-green-100: #CAF9E6;--colors-sd-reference-color-scale-green-200: #AEEAD5;--colors-sd-reference-color-scale-green-300: #98E1C8;--colors-sd-reference-color-scale-green-400: #6ED0AE;--colors-sd-reference-color-scale-green-500: #40A683;--colors-sd-reference-color-scale-green-600: #2C755C;--colors-sd-reference-color-scale-green-700: #266751;--colors-sd-reference-color-scale-green-800: #184737;--colors-sd-reference-color-scale-green-900: #12372B;--colors-sd-reference-color-scale-green-1000: #0D271E;--colors-sd-reference-color-scale-sky-blue-100: #D9F6FC;--colors-sd-reference-color-scale-sky-blue-200: #C3EFF4;--colors-sd-reference-color-scale-sky-blue-300: #9CE6EC;--colors-sd-reference-color-scale-sky-blue-400: #64CCD3;--colors-sd-reference-color-scale-sky-blue-500: #00A3AF;--colors-sd-reference-color-scale-sky-blue-600: #00757E;--colors-sd-reference-color-scale-sky-blue-700: #015C63;--colors-sd-reference-color-scale-sky-blue-800: #01474C;--colors-sd-reference-color-scale-sky-blue-900: #02373C;--colors-sd-reference-color-scale-sky-blue-1000: #04272A;--colors-sd-reference-color-scale-blue-100: #EFF2FC;--colors-sd-reference-color-scale-blue-200: #D7DEFB;--colors-sd-reference-color-scale-blue-300: #BFCEFC;--colors-sd-reference-color-scale-blue-400: #8FAEFE;--colors-sd-reference-color-scale-blue-500: #428CFE;--colors-sd-reference-color-scale-blue-600: #0A69CF;--colors-sd-reference-color-scale-blue-700: #0650A0;--colors-sd-reference-color-scale-blue-800: #043F81;--colors-sd-reference-color-scale-blue-900: #073165;--colors-sd-reference-color-scale-blue-1000: #081E3F;--colors-sd-reference-color-scale-purple-100: #F4ECF6;--colors-sd-reference-color-scale-purple-200: #EADAEE;--colors-sd-reference-color-scale-purple-300: #DCBDE4;--colors-sd-reference-color-scale-purple-400: #CC9FD9;--colors-sd-reference-color-scale-purple-500: #AA61C2;--colors-sd-reference-color-scale-purple-600: #914DA9;--colors-sd-reference-color-scale-purple-700: #733B85;--colors-sd-reference-color-scale-purple-800: #592D68;--colors-sd-reference-color-scale-purple-900: #462352;--colors-sd-reference-color-scale-purple-1000: #32183A;--colors-sd-reference-color-scale-pink-100: #F9EBF0;--colors-sd-reference-color-scale-pink-200: #F6D7E0;--colors-sd-reference-color-scale-pink-300: #F5C1D1;--colors-sd-reference-color-scale-pink-400: #F190B4;--colors-sd-reference-color-scale-pink-500: #EB4F8E;--colors-sd-reference-color-scale-pink-600: #B9336B;--colors-sd-reference-color-scale-pink-700: #932653;--colors-sd-reference-color-scale-pink-800: #711D41;--colors-sd-reference-color-scale-pink-900: #591734;--colors-sd-reference-color-scale-pink-1000: #401026;--colors-sd-system-color-impression-primary: #0650A0;--colors-sd-system-color-impression-on-primary: #FFFFFF;--colors-sd-system-color-impression-primary-container: #0650A0;--colors-sd-system-color-impression-on-primary-container: #FFFFFF;--colors-sd-system-color-impression-secondary: #BFCEFC;--colors-sd-system-color-impression-on-secondary: #000000;--colors-sd-system-color-impression-secondary-container: #BFCEFC;--colors-sd-system-color-impression-on-secondary-container: #000000;--colors-sd-system-color-impression-tertiary: #EFF2FC;--colors-sd-system-color-impression-on-tertiary: #000000;--colors-sd-system-color-impression-tertiary-container: #EFF2FC;--colors-sd-system-color-impression-on-tertiary-container: #000000;--colors-sd-system-color-impression-notice: #FFE600;--colors-sd-system-color-impression-on-notice: #000000;--colors-sd-system-color-impression-notice-container: #FFE600;--colors-sd-system-color-impression-on-notice-container: #000000;--colors-sd-system-color-impression-negative: #CE0037;--colors-sd-system-color-impression-on-negative: #FFFFFF;--colors-sd-system-color-impression-negative-container: #FCD6D3;--colors-sd-system-color-impression-on-negative-container: #000000;--colors-sd-system-color-impression-positive: #40A683;--colors-sd-system-color-impression-on-positive: #FFFFFF;--colors-sd-system-color-impression-positive-container: #40A683;--colors-sd-system-color-impression-on-positive-container: #FFFFFF;--colors-sd-system-color-component-surface: #FFFFFF;--colors-sd-system-color-component-on-surface: #000000;--colors-sd-system-color-component-on-surface-variant: #696966;--colors-sd-system-color-component-inverse-surface: #232322;--colors-sd-system-color-component-inverse-on-surface: #FFFFFF;--colors-sd-system-color-component-outline: #C8C7C2;--colors-sd-system-color-component-outline-variant: #8C8B87;--colors-sd-system-color-component-scrim: #00000033;--colors-sd-system-color-interaction-disabled: #EFEEEB;--colors-sd-system-color-interaction-disabled-on-surface: #AFAEAA;--colors-sd-system-color-interaction-selected-surface: #BFCEFC;--colors-sd-system-color-interaction-hovered: #00000033;--colors-sd-system-color-interaction-hovered-variant: #0000000D;--colors-sd-system-color-interaction-hovered-on-primary: #FFFFFF99;--spacing-sd-reference-dimension-scale-0: 0px;--spacing-sd-reference-dimension-scale-1: 1px;--spacing-sd-reference-dimension-scale-2: 2px;--spacing-sd-reference-dimension-scale-3: 4px;--spacing-sd-reference-dimension-scale-4: 8px;--spacing-sd-reference-dimension-scale-5: 12px;--spacing-sd-reference-dimension-scale-6: 16px;--spacing-sd-reference-dimension-scale-7: 20px;--spacing-sd-reference-dimension-scale-8: 24px;--spacing-sd-reference-dimension-scale-9: 28px;--spacing-sd-reference-dimension-scale-10: 32px;--spacing-sd-reference-dimension-scale-11: 36px;--spacing-sd-reference-dimension-scale-12: 40px;--spacing-sd-reference-dimension-scale-13: 48px;--spacing-sd-reference-dimension-scale-14: 56px;--spacing-sd-reference-dimension-scale-15: 64px;--spacing-sd-reference-dimension-scale-16: 72px;--spacing-sd-reference-dimension-scale-17: 80px;--spacing-sd-reference-dimension-scale-18: 96px;--spacing-sd-system-dimension-spacing-none: 0px;--spacing-sd-system-dimension-spacing-two-extra-small: 4px;--spacing-sd-system-dimension-spacing-extra-small: 8px;--spacing-sd-system-dimension-spacing-small: 12px;--spacing-sd-system-dimension-spacing-medium: 16px;--spacing-sd-system-dimension-spacing-large: 20px;--spacing-sd-system-dimension-spacing-extra-large: 24px;--spacing-sd-system-dimension-spacing-two-extra-large: 32px;--spacing-sd-system-dimension-spacing-three-extra-large: 40px;--spacing-sd-system-dimension-spacing-four-extra-large: 48px;--spacing-sd-system-dimension-spacing-five-extra-large: 64px;--spacing-sd-system-dimension-spacing-six-extra-large: 80px;--sizes-sd-reference-dimension-breakpoint-small: 640px;--sizes-sd-reference-dimension-breakpoint-medium: 768px;--sizes-sd-reference-dimension-breakpoint-large: 1024px;--sizes-sd-reference-dimension-breakpoint-extra-large: 1280px;--sizes-sd-reference-dimension-scale-0: 0px;--sizes-sd-reference-dimension-scale-1: 1px;--sizes-sd-reference-dimension-scale-2: 2px;--sizes-sd-reference-dimension-scale-3: 4px;--sizes-sd-reference-dimension-scale-4: 8px;--sizes-sd-reference-dimension-scale-5: 12px;--sizes-sd-reference-dimension-scale-6: 16px;--sizes-sd-reference-dimension-scale-7: 20px;--sizes-sd-reference-dimension-scale-8: 24px;--sizes-sd-reference-dimension-scale-9: 28px;--sizes-sd-reference-dimension-scale-10: 32px;--sizes-sd-reference-dimension-scale-11: 36px;--sizes-sd-reference-dimension-scale-12: 40px;--sizes-sd-reference-dimension-scale-13: 48px;--sizes-sd-reference-dimension-scale-14: 56px;--sizes-sd-reference-dimension-scale-15: 64px;--sizes-sd-reference-dimension-scale-16: 72px;--sizes-sd-reference-dimension-scale-17: 80px;--sizes-sd-reference-dimension-scale-18: 96px;--sizes-sd-system-dimension-breakpoint-compact: 0px;--sizes-sd-system-dimension-breakpoint-expanded: 768px;--sizes-sd-system-dimension-spacing-none: 0px;--sizes-sd-system-dimension-spacing-two-extra-small: 4px;--sizes-sd-system-dimension-spacing-extra-small: 8px;--sizes-sd-system-dimension-spacing-small: 12px;--sizes-sd-system-dimension-spacing-medium: 16px;--sizes-sd-system-dimension-spacing-large: 20px;--sizes-sd-system-dimension-spacing-extra-large: 24px;--sizes-sd-system-dimension-spacing-two-extra-large: 32px;--sizes-sd-system-dimension-spacing-three-extra-large: 40px;--sizes-sd-system-dimension-spacing-four-extra-large: 48px;--sizes-sd-system-dimension-spacing-five-extra-large: 64px;--sizes-sd-system-dimension-spacing-six-extra-large: 80px;--sizes-breakpoint-expanded: 768px;--opacity-sd-reference-elevation-opacity-scale-0: 0;--opacity-sd-reference-elevation-opacity-scale-1: .1;--opacity-sd-reference-elevation-opacity-scale-2: .2;--opacity-sd-reference-elevation-opacity-scale-3: .3;--opacity-sd-reference-elevation-opacity-scale-4: .4;--opacity-sd-reference-elevation-opacity-scale-5: .5;--opacity-sd-reference-elevation-opacity-scale-6: .6;--opacity-sd-reference-elevation-opacity-scale-7: .7;--opacity-sd-reference-elevation-opacity-scale-8: .8;--opacity-sd-reference-elevation-opacity-scale-9: .9;--opacity-sd-reference-elevation-opacity-scale-10: 1;--fonts-sd-reference-typography-font-family-primary: inherit;--fonts-sd-reference-typography-font-family-monospace: Noto Sans Mono;--font-weights-sd-reference-typography-font-weight-regular: 400;--font-weights-sd-reference-typography-font-weight-bold: 700;--line-heights-sd-reference-typography-line-height-none: 1;--line-heights-sd-reference-typography-line-height-tight: 1.4;--line-heights-sd-reference-typography-line-height-normal: 1.6;--line-heights-sd-reference-typography-line-height-relaxed: 1.8;--font-sizes-sd-reference-typography-scale-expanded-four-extra-small: 10px;--font-sizes-sd-reference-typography-scale-expanded-three-extra-small: 11px;--font-sizes-sd-reference-typography-scale-expanded-two-extra-small: 12px;--font-sizes-sd-reference-typography-scale-expanded-extra-small: 13px;--font-sizes-sd-reference-typography-scale-expanded-small: 14px;--font-sizes-sd-reference-typography-scale-expanded-medium: 16px;--font-sizes-sd-reference-typography-scale-expanded-large: 18px;--font-sizes-sd-reference-typography-scale-expanded-extra-large: 21px;--font-sizes-sd-reference-typography-scale-expanded-two-extra-large: 26px;--font-sizes-sd-reference-typography-scale-expanded-three-extra-large: 32px;--font-sizes-sd-reference-typography-scale-expanded-four-extra-large: 43px;--font-sizes-sd-reference-typography-scale-expanded-five-extra-large: 64px;--font-sizes-sd-reference-typography-scale-compact-two-extra-small: 10px;--font-sizes-sd-reference-typography-scale-compact-extra-small: 11px;--font-sizes-sd-reference-typography-scale-compact-small: 12px;--font-sizes-sd-reference-typography-scale-compact-medium: 14px;--font-sizes-sd-reference-typography-scale-compact-large: 16px;--font-sizes-sd-reference-typography-scale-compact-extra-large: 19px;--font-sizes-sd-reference-typography-scale-compact-two-extra-large: 22px;--font-sizes-sd-reference-typography-scale-compact-three-extra-large: 28px;--font-sizes-sd-reference-typography-scale-compact-four-extra-large: 37px;--font-sizes-sd-reference-typography-scale-compact-five-extra-large: 56px;--border-widths-sd-system-dimension-border-medium: 1px;--border-widths-sd-system-dimension-border-thick: 2px;--border-widths-sd-system-dimension-border-extra-thick: 4px;--radii-sd-system-dimension-radius-extra-small: 2px;--radii-sd-system-dimension-radius-small: 4px;--radii-sd-system-dimension-radius-medium: 8px;--radii-sd-system-dimension-radius-large: 12px;--radii-sd-system-dimension-radius-extra-large: 16px;--radii-sd-system-dimension-radius-full: 9999px;--shadows-sd-system-elevation-shadow-level1: 0px 1px 2px 0px #0000004D;--shadows-sd-system-elevation-shadow-level2: 0px 1px 4px 0px #00000033;--shadows-sd-system-elevation-shadow-level3: 0px 2px 8px 0px #00000033;--shadows-sd-system-elevation-shadow-level4: 0px 4px 12px 0px #00000033;--shadows-sd-system-elevation-shadow-level5: 0px 8px 24px 0px #00000033;--z-index-sd-system-elevation-z-index-deep-dive: -1000;--z-index-sd-system-elevation-z-index-base: 0;--z-index-sd-system-elevation-z-index-docked: 10;--z-index-sd-system-elevation-z-index-dropdown: 500;--z-index-sd-system-elevation-z-index-modal: 1000;--z-index-sd-system-elevation-z-index-toast: 2000;--breakpoints-expanded: 768px}[data-panda-theme=asagi]{--colors-sd-system-color-impression-primary: #00757E;--colors-sd-system-color-impression-on-primary: #FFFFFF;--colors-sd-system-color-impression-primary-container: #00757E;--colors-sd-system-color-impression-on-primary-container: #FFFFFF;--colors-sd-system-color-impression-secondary: #AEEAD5;--colors-sd-system-color-impression-on-secondary: #000000;--colors-sd-system-color-impression-secondary-container: #AEEAD5;--colors-sd-system-color-impression-on-secondary-container: #000000;--colors-sd-system-color-impression-tertiary: #EFEEEB;--colors-sd-system-color-impression-on-tertiary: #000000;--colors-sd-system-color-impression-tertiary-container: #EFEEEB;--colors-sd-system-color-impression-on-tertiary-container: #000000;--colors-sd-system-color-impression-notice: #FFE600;--colors-sd-system-color-impression-on-notice: #000000;--colors-sd-system-color-impression-notice-container: #FFE600;--colors-sd-system-color-impression-on-notice-container: #000000;--colors-sd-system-color-impression-negative: #CE0037;--colors-sd-system-color-impression-on-negative: #FFFFFF;--colors-sd-system-color-impression-negative-container: #FCD6D3;--colors-sd-system-color-impression-on-negative-container: #000000;--colors-sd-system-color-impression-positive: #40A683;--colors-sd-system-color-impression-on-positive: #FFFFFF;--colors-sd-system-color-impression-positive-container: #40A683;--colors-sd-system-color-impression-on-positive-container: #FFFFFF;--colors-sd-system-color-component-surface: #FFFFFF;--colors-sd-system-color-component-on-surface: #000000;--colors-sd-system-color-component-on-surface-variant: #696966;--colors-sd-system-color-component-inverse-surface: #232322;--colors-sd-system-color-component-inverse-on-surface: #FFFFFF;--colors-sd-system-color-component-outline: #C8C7C2;--colors-sd-system-color-component-outline-variant: #8C8B87;--colors-sd-system-color-component-scrim: #00000033;--colors-sd-system-color-interaction-disabled: #EFEEEB;--colors-sd-system-color-interaction-disabled-on-surface: #AFAEAA;--colors-sd-system-color-interaction-selected-surface: #AEEAD5;--colors-sd-system-color-interaction-hovered: #00000033;--colors-sd-system-color-interaction-hovered-variant: #0000000D;--colors-sd-system-color-interaction-hovered-on-primary: #FFFFFF99 }[data-panda-theme=kurikawa]{--colors-sd-system-color-impression-primary: #803510;--colors-sd-system-color-impression-on-primary: #FFFFFF;--colors-sd-system-color-impression-primary-container: #803510;--colors-sd-system-color-impression-on-primary-container: #FFFFFF;--colors-sd-system-color-impression-secondary: #F7C6B0;--colors-sd-system-color-impression-on-secondary: #000000;--colors-sd-system-color-impression-secondary-container: #F7C6B0;--colors-sd-system-color-impression-on-secondary-container: #000000;--colors-sd-system-color-impression-tertiary: #F7EDE2;--colors-sd-system-color-impression-on-tertiary: #000000;--colors-sd-system-color-impression-tertiary-container: #F7EDE2;--colors-sd-system-color-impression-on-tertiary-container: #000000;--colors-sd-system-color-impression-notice: #FFE600;--colors-sd-system-color-impression-on-notice: #000000;--colors-sd-system-color-impression-notice-container: #FFE600;--colors-sd-system-color-impression-on-notice-container: #000000;--colors-sd-system-color-impression-negative: #CE0037;--colors-sd-system-color-impression-on-negative: #FFFFFF;--colors-sd-system-color-impression-negative-container: #FCD6D3;--colors-sd-system-color-impression-on-negative-container: #000000;--colors-sd-system-color-impression-positive: #40A683;--colors-sd-system-color-impression-on-positive: #FFFFFF;--colors-sd-system-color-impression-positive-container: #40A683;--colors-sd-system-color-impression-on-positive-container: #FFFFFF;--colors-sd-system-color-component-surface: #FFFFFF;--colors-sd-system-color-component-on-surface: #000000;--colors-sd-system-color-component-on-surface-variant: #696966;--colors-sd-system-color-component-inverse-surface: #232322;--colors-sd-system-color-component-inverse-on-surface: #FFFFFF;--colors-sd-system-color-component-outline: #C8C7C2;--colors-sd-system-color-component-outline-variant: #8C8B87;--colors-sd-system-color-component-scrim: #00000033;--colors-sd-system-color-interaction-disabled: #EFEEEB;--colors-sd-system-color-interaction-disabled-on-surface: #AFAEAA;--colors-sd-system-color-interaction-selected-surface: #F7C6B0;--colors-sd-system-color-interaction-hovered: #00000033;--colors-sd-system-color-interaction-hovered-variant: #0000000D;--colors-sd-system-color-interaction-hovered-on-primary: #FFFFFF99 }[data-panda-theme=sumire]{--colors-sd-system-color-impression-primary: #733B85;--colors-sd-system-color-impression-on-primary: #FFFFFF;--colors-sd-system-color-impression-primary-container: #733B85;--colors-sd-system-color-impression-on-primary-container: #FFFFFF;--colors-sd-system-color-impression-secondary: #DCBDE4;--colors-sd-system-color-impression-on-secondary: #000000;--colors-sd-system-color-impression-secondary-container: #DCBDE4;--colors-sd-system-color-impression-on-secondary-container: #000000;--colors-sd-system-color-impression-tertiary: #073165;--colors-sd-system-color-impression-on-tertiary: #FFFFFF;--colors-sd-system-color-impression-tertiary-container: #073165;--colors-sd-system-color-impression-on-tertiary-container: #FFFFFF;--colors-sd-system-color-impression-notice: #FFE600;--colors-sd-system-color-impression-on-notice: #000000;--colors-sd-system-color-impression-notice-container: #FFE600;--colors-sd-system-color-impression-on-notice-container: #000000;--colors-sd-system-color-impression-negative: #CE0037;--colors-sd-system-color-impression-on-negative: #FFFFFF;--colors-sd-system-color-impression-negative-container: #FCD6D3;--colors-sd-system-color-impression-on-negative-container: #000000;--colors-sd-system-color-impression-positive: #40A683;--colors-sd-system-color-impression-on-positive: #FFFFFF;--colors-sd-system-color-impression-positive-container: #40A683;--colors-sd-system-color-impression-on-positive-container: #FFFFFF;--colors-sd-system-color-component-surface: #FFFFFF;--colors-sd-system-color-component-on-surface: #000000;--colors-sd-system-color-component-on-surface-variant: #696966;--colors-sd-system-color-component-inverse-surface: #232322;--colors-sd-system-color-component-inverse-on-surface: #FFFFFF;--colors-sd-system-color-component-outline: #C8C7C2;--colors-sd-system-color-component-outline-variant: #8C8B87;--colors-sd-system-color-component-scrim: #00000033;--colors-sd-system-color-interaction-disabled: #EFEEEB;--colors-sd-system-color-interaction-disabled-on-surface: #AFAEAA;--colors-sd-system-color-interaction-selected-surface: #DCBDE4;--colors-sd-system-color-interaction-hovered: #00000033;--colors-sd-system-color-interaction-hovered-variant: #0000000D;--colors-sd-system-color-interaction-hovered-on-primary: #FFFFFF99 }[data-panda-theme=tsutsuji]{--colors-sd-system-color-impression-primary: #B9336B;--colors-sd-system-color-impression-on-primary: #FFFFFF;--colors-sd-system-color-impression-primary-container: #F5C1D1;--colors-sd-system-color-impression-on-primary-container: #000000;--colors-sd-system-color-impression-secondary: #F6D7E0;--colors-sd-system-color-impression-on-secondary: #000000;--colors-sd-system-color-impression-secondary-container: #F6D7E0;--colors-sd-system-color-impression-on-secondary-container: #000000;--colors-sd-system-color-impression-tertiary: #401026;--colors-sd-system-color-impression-on-tertiary: #FFFFFF;--colors-sd-system-color-impression-tertiary-container: #401026;--colors-sd-system-color-impression-on-tertiary-container: #FFFFFF;--colors-sd-system-color-impression-notice: #FFE600;--colors-sd-system-color-impression-on-notice: #000000;--colors-sd-system-color-impression-notice-container: #FFE600;--colors-sd-system-color-impression-on-notice-container: #000000;--colors-sd-system-color-impression-negative: #CE0037;--colors-sd-system-color-impression-on-negative: #FFFFFF;--colors-sd-system-color-impression-negative-container: #FCD6D3;--colors-sd-system-color-impression-on-negative-container: #000000;--colors-sd-system-color-impression-positive: #40A683;--colors-sd-system-color-impression-on-positive: #FFFFFF;--colors-sd-system-color-impression-positive-container: #40A683;--colors-sd-system-color-impression-on-positive-container: #FFFFFF;--colors-sd-system-color-component-surface: #FFFFFF;--colors-sd-system-color-component-on-surface: #000000;--colors-sd-system-color-component-on-surface-variant: #696966;--colors-sd-system-color-component-inverse-surface: #232322;--colors-sd-system-color-component-inverse-on-surface: #FFFFFF;--colors-sd-system-color-component-outline: #C8C7C2;--colors-sd-system-color-component-outline-variant: #8C8B87;--colors-sd-system-color-component-scrim: #00000033;--colors-sd-system-color-interaction-disabled: #EFEEEB;--colors-sd-system-color-interaction-disabled-on-surface: #AFAEAA;--colors-sd-system-color-interaction-selected-surface: #F6D7E0;--colors-sd-system-color-interaction-hovered: #00000033;--colors-sd-system-color-interaction-hovered-variant: #0000000D;--colors-sd-system-color-interaction-hovered-on-primary: #FFFFFF99 }@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}@layer utilities{@layer compositions{.textStyle_sd\.system\.typography\.body\.medium_compact{font-size:16px;font-weight:400;font-family:inherit;line-height:1.6}.textStyle_sd\.system\.typography\.label\.extraLarge_compact{font-size:16px;font-weight:400;font-family:inherit;line-height:1}.textStyle_sd\.system\.typography\.label\.small_compact{font-size:11px;font-weight:400;font-family:inherit;line-height:1}.textStyle_sd\.system\.typography\.label\.medium_compact{font-size:12px;font-weight:400;font-family:inherit;line-height:1}.textStyle_sd\.system\.typography\.label\.large_compact{font-size:14px;font-weight:400;font-family:inherit;line-height:1}.textStyle_sd\.system\.typography\.body\.extraSmall_compact{font-size:12px;font-weight:400;font-family:inherit;line-height:1.4}.textStyle_sd\.system\.typography\.title\.large_compact{font-size:22px;font-weight:700;font-family:inherit;line-height:1.6}.textStyle_sd\.system\.typography\.title\.small_compact{font-size:16px;font-weight:700;font-family:inherit;line-height:1.6}.textStyle_sd\.system\.typography\.body\.small_compact{font-size:14px;font-weight:400;font-family:inherit;line-height:1.6}.textStyle_sd\.system\.typography\.title\.medium_compact{font-size:19px;font-weight:700;font-family:inherit;line-height:1.6}.expanded\:textStyle_sd\.system\.typography\.body\.medium_expanded:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:14px;font-weight:400;font-family:inherit;line-height:1.6}.expanded\:textStyle_sd\.system\.typography\.body\.extraSmall_expanded:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:12px;font-weight:400;font-family:inherit;line-height:1.4}.expanded\:textStyle_sd\.system\.typography\.label\.extraLarge_expanded:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:14px;font-weight:400;font-family:inherit;line-height:1}.expanded\:textStyle_sd\.system\.typography\.label\.small_expanded:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:11px;font-weight:400;font-family:inherit;line-height:1}.expanded\:textStyle_sd\.system\.typography\.title\.large_expanded:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:18px;font-weight:700;font-family:inherit;line-height:1.6}.expanded\:textStyle_sd\.system\.typography\.body\.medium_compact:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:16px;font-weight:400;font-family:inherit;line-height:1.6}.expanded\:textStyle_sd\.system\.typography\.label\.large_expanded:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:13px;font-weight:400;font-family:inherit;line-height:1}.expanded\:textStyle_sd\.system\.typography\.body\.small_expanded:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:13px;font-weight:400;font-family:inherit;line-height:1.6}.expanded\:textStyle_sd\.system\.typography\.title\.medium_expanded:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:16px;font-weight:700;font-family:inherit;line-height:1.6}@media screen and (min-width: 48rem){.expanded\:textStyle_sd\.system\.typography\.label\.small_expanded{font-size:11px;font-weight:400;font-family:inherit;line-height:1}.expanded\:textStyle_sd\.system\.typography\.label\.medium_expanded{font-size:12px;font-weight:400;font-family:inherit;line-height:1}.expanded\:textStyle_sd\.system\.typography\.label\.large_expanded{font-size:13px;font-weight:400;font-family:inherit;line-height:1}.expanded\:textStyle_sd\.system\.typography\.body\.medium_expanded{font-size:14px;font-weight:400;font-family:inherit;line-height:1.6}.expanded\:textStyle_sd\.system\.typography\.label\.small_compact{font-size:11px;font-weight:400;font-family:inherit;line-height:1}.expanded\:textStyle_sd\.system\.typography\.title\.small_expanded{font-size:14px;font-weight:700;font-family:inherit;line-height:1.6}.expanded\:textStyle_sd\.system\.typography\.body\.small_expanded{font-size:13px;font-weight:400;font-family:inherit;line-height:1.6}.expanded\:textStyle_sd\.system\.typography\.body\.extraSmall_expanded{font-size:12px;font-weight:400;font-family:inherit;line-height:1.4}}@media screen and (min-width: 48rem){.expanded\:expanded\:textStyle_sd\.system\.typography\.body\.medium_expanded:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:14px;font-weight:400;font-family:inherit;line-height:1.6}}}.d_flex{display:flex}.w_100\%{width:100%}.gap_sd\.system\.dimension\.spacing\.extraSmall{gap:var(--spacing-sd-system-dimension-spacing-extra-small)}.px_sd\.system\.dimension\.spacing\.medium{padding-inline:var(--spacing-sd-system-dimension-spacing-medium)}.py_sd\.system\.dimension\.spacing\.small{padding-block:var(--spacing-sd-system-dimension-spacing-small)}.cursor_pointer{cursor:pointer}.flex_1{flex:1 1 0%}.ta_left{text-align:left}.c_sd\.system\.color\.component\.onSurface{color:var(--colors-sd-system-color-component-on-surface)}.flex_0_0_24px{flex:0 0 24px}.trs_transform_0\.2s{transition:transform .2s}.trf_rotate\(-90deg\){transform:rotate(-90deg)}.w_24{width:24px}.bdr_50\%{border-radius:50%}.h_24{height:24px}.w_40{width:40px}.h_40{height:40px}.w_80{width:80px}.h_80{height:80px}.h_100\%{height:100%}.d_inline-flex{display:inline-flex}.gap_2px{gap:2px}.bdr_sd\.system\.dimension\.radius\.extraLarge{border-radius:var(--radii-sd-system-dimension-radius-extra-large)}.bg_sd\.system\.color\.interaction\.hoveredVariant{background:var(--colors-sd-system-color-interaction-hovered-variant)}.h_16px{height:16px}.h_24px{height:24px}.h_32px{height:32px}.bg_sd\.reference\.color\.scale\.gray\.600{background:var(--colors-sd-reference-color-scale-gray-600)}.c_sd\.system\.color\.component\.inverseOnSurface{color:var(--colors-sd-system-color-component-inverse-on-surface)}.bg_sd\.reference\.color\.scale\.blue\.600{background:var(--colors-sd-reference-color-scale-blue-600)}.bg_sd\.reference\.color\.scale\.green\.600{background:var(--colors-sd-reference-color-scale-green-600)}.bg_sd\.reference\.color\.scale\.yellow\.600{background:var(--colors-sd-reference-color-scale-yellow-600)}.bg_sd\.reference\.color\.scale\.chestnut\.600{background:var(--colors-sd-reference-color-scale-chestnut-600)}.bg_sd\.reference\.color\.scale\.red\.600{background:var(--colors-sd-reference-color-scale-red-600)}.bg_sd\.reference\.color\.scale\.gray\.100{background:var(--colors-sd-reference-color-scale-gray-100)}.c_sd\.reference\.color\.scale\.gray\.800{color:var(--colors-sd-reference-color-scale-gray-800)}.bg_sd\.reference\.color\.scale\.blue\.100{background:var(--colors-sd-reference-color-scale-blue-100)}.c_sd\.reference\.color\.scale\.blue\.800{color:var(--colors-sd-reference-color-scale-blue-800)}.bg_sd\.reference\.color\.scale\.green\.100{background:var(--colors-sd-reference-color-scale-green-100)}.c_sd\.reference\.color\.scale\.green\.800{color:var(--colors-sd-reference-color-scale-green-800)}.bg_sd\.reference\.color\.scale\.yellow\.100{background:var(--colors-sd-reference-color-scale-yellow-100)}.c_sd\.reference\.color\.scale\.yellow\.800{color:var(--colors-sd-reference-color-scale-yellow-800)}.bg_sd\.reference\.color\.scale\.chestnut\.100{background:var(--colors-sd-reference-color-scale-chestnut-100)}.c_sd\.reference\.color\.scale\.chestnut\.800{color:var(--colors-sd-reference-color-scale-chestnut-800)}.bg_sd\.reference\.color\.scale\.red\.100{background:var(--colors-sd-reference-color-scale-red-100)}.c_sd\.reference\.color\.scale\.red\.800{color:var(--colors-sd-reference-color-scale-red-800)}.c_currentColor{color:currentColor}.d_grid{display:grid}.p_sd\.system\.dimension\.spacing\.small{padding:var(--spacing-sd-system-dimension-spacing-small)}.bdr_sd\.system\.dimension\.radius\.medium{border-radius:var(--radii-sd-system-dimension-radius-medium)}.bg_sd\.system\.color\.component\.surface{background:var(--colors-sd-system-color-component-surface)}.bg_sd\.system\.color\.impression\.negativeContainer{background:var(--colors-sd-system-color-impression-negative-container)}.c_sd\.system\.color\.impression\.onNegativeContainer{color:var(--colors-sd-system-color-impression-on-negative-container)}.bg_sd\.system\.color\.impression\.noticeContainer{background:var(--colors-sd-system-color-impression-notice-container)}.c_sd\.system\.color\.impression\.onNoticeContainer{color:var(--colors-sd-system-color-impression-on-notice-container)}.c_sd\.system\.color\.impression\.negative{color:var(--colors-sd-system-color-impression-negative)}.grid-area_2_\/_2_\/_3_\/_3{grid-area:2 / 2 / 3 / 3}.h_64{height:64px}.bd-t_1px_solid{border-top:1px solid}.gap_sd\.system\.dimension\.spacing\.twoExtraSmall{gap:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.pos_relative{position:relative}.c_sd\.system\.color\.impression\.primary{color:var(--colors-sd-system-color-impression-primary)}.pos_absolute{position:absolute}.bdr_sd\.system\.dimension\.radius\.full{border-radius:var(--radii-sd-system-dimension-radius-full)}.ov_hidden{overflow:hidden}.bg_sd\.system\.color\.impression\.primaryContainer{background:var(--colors-sd-system-color-impression-primary-container)}.c_sd\.system\.color\.impression\.onPrimaryContainer{color:var(--colors-sd-system-color-impression-on-primary-container)}.h_48{height:48px}.px_sd\.system\.dimension\.spacing\.extraLarge{padding-inline:var(--spacing-sd-system-dimension-spacing-extra-large)}.h_32{height:32px}.px_sd\.system\.dimension\.spacing\.small{padding-inline:var(--spacing-sd-system-dimension-spacing-small)}.py_sd\.system\.dimension\.spacing\.twoExtraSmall{padding-block:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.z_sd\.system\.elevation\.zIndex\.base{z-index:var(--z-index-sd-system-elevation-z-index-base)}.c_white{color:#fff}.c_gray{color:gray}.p_2px{padding:2px}.gap_sd\.system\.dimension\.spacing\.medium{gap:var(--spacing-sd-system-dimension-spacing-medium)}.c_sd\.system\.color\.component\.outline{color:var(--colors-sd-system-color-component-outline)}.flex-flow_column{flex-flow:column}.c_sd\.system\.color\.component\.onSurfaceVariant{color:var(--colors-sd-system-color-component-on-surface-variant)}.min-h_160px{min-height:160px}.gap_sd\.system\.dimension\.spacing\.twoExtraLarge{gap:var(--spacing-sd-system-dimension-spacing-two-extra-large)}.grid-c_span_2{grid-column:span 2}.order_-1{order:-1}.--thickness_1px{--thickness: 1px}.bd_none{border:none}.h_sd\.reference\.dimension\.scale\.1{height:var(--sizes-sd-reference-dimension-scale-1)}.w_sd\.reference\.dimension\.scale\.1{width:var(--sizes-sd-reference-dimension-scale-1)}.min-h_10px{min-height:10px}.bg_sd\.system\.color\.component\.scrim{background:var(--colors-sd-system-color-component-scrim)}.pos_fixed{position:fixed}.inset_0{top:0;right:0;bottom:0;left:0}.z_sd\.system\.elevation\.zIndex\.modal{z-index:var(--z-index-sd-system-elevation-z-index-modal)}.w_calc\(100\%_-_\{spacing\.sd\.system\.dimension\.spacing\.extraLarge\}\){width:calc(100% - var(--spacing-sd-system-dimension-spacing-extra-large))}.max-w_375px{max-width:375px}.h_100vh{height:100vh}.bx-sh_sd\.system\.elevation\.shadow\.level5{box-shadow:var(--shadows-sd-system-elevation-shadow-level5)}.min-w_100\%{min-width:100%}.max-w_100\%{max-width:100%}.p_sd\.system\.dimension\.spacing\.twoExtraSmall{padding:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.bx-sh_sd\.system\.elevation\.shadow\.level1{box-shadow:var(--shadows-sd-system-elevation-shadow-level1)}.ring_none{outline:2px solid transparent;outline-offset:2px}.w_240{width:240px}.h_48px{height:48px}.gap_sd\.system\.dimension\.spacing\.small{gap:var(--spacing-sd-system-dimension-spacing-small)}.py_sd\.system\.dimension\.spacing\.extraSmall{padding-block:var(--spacing-sd-system-dimension-spacing-extra-small)}.ps_sd\.system\.dimension\.spacing\.medium{padding-inline-start:var(--spacing-sd-system-dimension-spacing-medium)}.w_\{spacing\.sd\.reference\.dimension\.scale\.17\}{width:var(--spacing-sd-reference-dimension-scale-17)}.h_\{spacing\.sd\.reference\.dimension\.scale\.17\}{height:var(--spacing-sd-reference-dimension-scale-17)}.w_\{spacing\.sd\.reference\.dimension\.scale\.13\}{width:var(--spacing-sd-reference-dimension-scale-13)}.h_\{spacing\.sd\.reference\.dimension\.scale\.13\}{height:var(--spacing-sd-reference-dimension-scale-13)}.w_\{spacing\.sd\.reference\.dimension\.scale\.10\}{width:var(--spacing-sd-reference-dimension-scale-10)}.h_\{spacing\.sd\.reference\.dimension\.scale\.10\}{height:var(--spacing-sd-reference-dimension-scale-10)}.min-h_48{min-height:48px}.min-h_38{min-height:38px}.min-w_24{min-width:24px}.trf_translate\(-50\%\,_-50\%\){transform:translate(-50%,-50%)}.w_calc\(100\%_-_\{spacing\.sd\.system\.dimension\.spacing\.large\}_\*_2\){width:calc(100% - var(--spacing-sd-system-dimension-spacing-large) * 2)}.max-w_408px{max-width:408px}.c_sd\.system\.color\.impression\.onNegative{color:var(--colors-sd-system-color-impression-on-negative)}.px_sd\.system\.dimension\.spacing\.twoExtraSmall{padding-inline:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.h_16{height:16px}.min-w_16{min-width:16px}.px_sd\.system\.dimension\.spacing\.extraSmall{padding-inline:var(--spacing-sd-system-dimension-spacing-extra-small)}.h_8{height:8px}.px_0{padding-inline:0}.min-w_8{min-width:8px}.anim_1s_linear_infinite_spin{animation:1s linear infinite spin}.stk_sd\.reference\.color\.scale\.gray\.400{stroke:var(--colors-sd-reference-color-scale-gray-400)}.w_16px{width:16px}.w_24px{width:24px}.w_96px{width:96px}.h_96px{height:96px}.stk_sd\.reference\.color\.scale\.white\.1000{stroke:var(--colors-sd-reference-color-scale-white-1000)}.c_sd\.system\.color\.component\.outlineVariant{color:var(--colors-sd-system-color-component-outline-variant)}.tov_ellipsis{text-overflow:ellipsis}.d_inline-grid{display:inline-grid}.z_sd\.system\.elevation\.zIndex\.dropdown{z-index:var(--z-index-sd-system-elevation-z-index-dropdown)}.w_40px{width:40px}.w_20px{width:20px}.w_sd\.system\.dimension\.spacing\.large{width:var(--sizes-sd-system-dimension-spacing-large)}.op_0{opacity:0}.h_sd\.system\.dimension\.spacing\.large{height:var(--sizes-sd-system-dimension-spacing-large)}.white-space_nowrap{white-space:nowrap}.bdr_sd\.system\.dimension\.radius\.small{border-radius:var(--radii-sd-system-dimension-radius-small)}.c_sd\.reference\.color\.scale\.orange\.500{color:sd.reference.color.scale.orange.5}.w_1em{width:1em}.h_1em{height:1em}.fill_currentColor{fill:currentColor}.w_52{width:52px}.d_block{display:block}.w_20{width:20px}.h_20{height:20px}.my_5{margin-block:5px}.mx_6{margin-inline:6px}.w_160{width:160px}.h_44{height:44px}.bd-b_2px_solid{border-bottom:2px solid}.w_8{width:8px}.w_16{width:16px}.field-sizing_content{field-sizing:content}.min-h_2lh{min-height:2lh}.ta_right{text-align:right}.place-items_center{place-items:center}.w_48px{width:48px}.gap_10px{gap:10px}.bx-sh_sd\.system\.elevation\.shadow\.level3{box-shadow:var(--shadows-sd-system-elevation-shadow-level3)}.bg_sd\.system\.color\.component\.inverseSurface{background:var(--colors-sd-system-color-component-inverse-surface)}.c_sd\.system\.color\.impression\.positive{color:var(--colors-sd-system-color-impression-positive)}.gap_8px{gap:8px}.flex-d_row-reverse{flex-direction:row-reverse}.pt_sd\.system\.dimension\.spacing\.small{padding-top:var(--spacing-sd-system-dimension-spacing-small)}.pb_sd\.system\.dimension\.spacing\.medium{padding-bottom:var(--spacing-sd-system-dimension-spacing-medium)}.flex-d_column{flex-direction:column}.ai_center{align-items:center}.jc_center{justify-content:center}.bg-c_sd\.reference\.color\.scale\.blue\.200{background-color:var(--colors-sd-reference-color-scale-blue-200)}.fs_11{font-size:11px}.fs_19{font-size:19px}.fs_37{font-size:37px}.pr_sd\.system\.dimension\.spacing\.twoExtraSmall{padding-right:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.pl_sd\.system\.dimension\.spacing\.twoExtraSmall{padding-left:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.pr_sd\.system\.dimension\.spacing\.extraSmall{padding-right:var(--spacing-sd-system-dimension-spacing-extra-small)}.pl_sd\.system\.dimension\.spacing\.extraSmall{padding-left:var(--spacing-sd-system-dimension-spacing-extra-small)}.pr_sd\.system\.dimension\.spacing\.medium{padding-right:var(--spacing-sd-system-dimension-spacing-medium)}.pl_sd\.system\.dimension\.spacing\.medium{padding-left:var(--spacing-sd-system-dimension-spacing-medium)}.grid-tc_24px_1fr{grid-template-columns:24px 1fr}.cg_sd\.system\.dimension\.spacing\.twoExtraSmall{column-gap:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.rg_sd\.system\.dimension\.spacing\.extraSmall{row-gap:var(--spacing-sd-system-dimension-spacing-extra-small)}.bd-w_sd\.system\.dimension\.border\.medium{border-width:var(--border-widths-sd-system-dimension-border-medium)}.border-style_solid{border-style:solid}.bd-c_sd\.system\.color\.component\.outline{border-color:var(--colors-sd-system-color-component-outline)}.bd-c_sd\.system\.color\.impression\.negativeContainer{border-color:var(--colors-sd-system-color-impression-negative-container)}.bd-c_sd\.system\.color\.impression\.noticeContainer{border-color:var(--colors-sd-system-color-impression-notice-container)}.jc_space-around{justify-content:space-around}.bd-t-c_sd\.system\.color\.component\.outline{border-top-color:var(--colors-sd-system-color-component-outline)}.top_-6px{top:-6px}.right_4px{right:4px}.top_-2\.5px{top:-2.5px}.ring-w_sd\.system\.dimension\.border\.medium{outline-width:var(--border-widths-sd-system-dimension-border-medium)}.outline-style_solid{outline-style:solid}.ring-c_sd\.system\.color\.component\.outline{outline-color:var(--colors-sd-system-color-component-outline)}.bg-c_sd\.system\.color\.component\.surface{background-color:var(--colors-sd-system-color-component-surface)}.pl_sd\.system\.dimension\.spacing\.extraLarge{padding-left:var(--spacing-sd-system-dimension-spacing-extra-large)}.pr_sd\.system\.dimension\.spacing\.extraLarge{padding-right:var(--spacing-sd-system-dimension-spacing-extra-large)}.flex-sh_0{flex-shrink:0}.mt_sd\.system\.dimension\.spacing\.twoExtraSmall{margin-top:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.ai_flex-start{align-items:flex-start}.bg-c_sd\.reference\.color\.scale\.gray\.200{background-color:var(--colors-sd-reference-color-scale-gray-200)}.jc_space-between{justify-content:space-between}.grid-tc_1fr{grid-template-columns:1fr}.grid-tc_auto_1fr{grid-template-columns:auto 1fr}.grid-tc_1fr_1fr{grid-template-columns:1fr 1fr}.as_flex-end{align-self:flex-end}.ai_baseline{align-items:baseline}.border-block-end-width_var\(--thickness\){border-block-end-width:var(--thickness)}.bd-c_sd\.reference\.color\.scale\.gray\.200{border-color:var(--colors-sd-reference-color-scale-gray-200)}.bd-c_sd\.reference\.color\.scale\.gray\.300{border-color:var(--colors-sd-reference-color-scale-gray-300)}.bd-c_sd\.system\.color\.component\.outlineVariant{border-color:var(--colors-sd-system-color-component-outline-variant)}.border-bottom-style_solid{border-bottom-style:solid}.border-left-style_solid{border-left-style:solid}.top_0{top:0}.left_0{left:0}.jc_flex-start{justify-content:flex-start}.right_0{right:0}.jc_flex-end{justify-content:flex-end}.pr_sd\.system\.dimension\.spacing\.small{padding-right:var(--spacing-sd-system-dimension-spacing-small)}.ml_2px{margin-left:2px}.bg-c_sd\.system\.color\.impression\.primaryContainer{background-color:var(--colors-sd-system-color-impression-primary-container)}.ring-c_transparent{outline-color:transparent}.flex-g_1{flex-grow:1}.right_sd\.system\.dimension\.spacing\.medium{right:var(--spacing-sd-system-dimension-spacing-medium)}.top_sd\.system\.dimension\.spacing\.extraSmall{top:var(--spacing-sd-system-dimension-spacing-extra-small)}.top_50\%{top:50%}.left_50\%{left:50%}.pt_sd\.system\.dimension\.spacing\.extraLarge{padding-top:var(--spacing-sd-system-dimension-spacing-extra-large)}.pb_sd\.system\.dimension\.spacing\.large{padding-bottom:var(--spacing-sd-system-dimension-spacing-large)}.bg-c_sd\.system\.color\.impression\.negative{background-color:var(--colors-sd-system-color-impression-negative)}.bg-c_sd\.system\.color\.impression\.primary{background-color:var(--colors-sd-system-color-impression-primary)}.lh_24px{line-height:24px}.lh_1{line-height:1}.grid-tc_auto_1fr_auto{grid-template-columns:auto 1fr auto}.pb_sd\.system\.dimension\.spacing\.small{padding-bottom:var(--spacing-sd-system-dimension-spacing-small)}.pt_sd\.system\.dimension\.spacing\.twoExtraSmall{padding-top:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.pb_sd\.system\.dimension\.spacing\.twoExtraSmall{padding-bottom:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.scr-pl_sd\.system\.dimension\.spacing\.twoExtraSmall{scroll-padding-left:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.pb_sd\.system\.dimension\.spacing\.extraSmall{padding-bottom:var(--spacing-sd-system-dimension-spacing-extra-small)}.pt_sd\.system\.dimension\.spacing\.extraSmall{padding-top:var(--spacing-sd-system-dimension-spacing-extra-small)}.grid-tc_1fr_auto{grid-template-columns:1fr auto}.bg-c_sd\.system\.color\.interaction\.disabled{background-color:var(--colors-sd-system-color-interaction-disabled)}.bd-w_1{border-width:1px}.trs-dur_\.2s{--transition-duration: .2s;transition-duration:.2s}.trs-prop_background\,_borderColor{--transition-prop: background, borderColor;transition-property:background,borderColor}.trs-tmf_cubic-bezier\(\.2\,_0\,_0\,_1\){--transition-easing: cubic-bezier(.2, 0, 0, 1);transition-timing-function:cubic-bezier(.2,0,0,1)}.trs-dur_\.3s{--transition-duration: .3s;transition-duration:.3s}.trs-prop_transform\,_borderColor{--transition-prop: transform, borderColor;transition-property:transform,borderColor}.lh_sd\.reference\.typography\.lineHeight\.tight{line-height:var(--line-heights-sd-reference-typography-line-height-tight)}.trs-prop_color\,_border-color{--transition-prop: color, border-color;transition-property:color,border-color}.bd-b-c_transparent{border-bottom-color:transparent}.bg-c_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.interaction\.hoveredOnPrimary\}\,_\{colors\.sd\.system\.color\.impression\.negativeContainer\}\)\;{background-color:color-mix(in srgb,var(--colors-sd-system-color-interaction-hovered-on-primary),var(--colors-sd-system-color-impression-negative-container))}.grid-tc_auto{grid-template-columns:auto}.mt_sd\.system\.dimension\.spacing\.extraSmall{margin-top:var(--spacing-sd-system-dimension-spacing-extra-small)}.mr_sd\.system\.dimension\.spacing\.twoExtraSmall{margin-right:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.mb_sd\.system\.dimension\.spacing\.twoExtraSmall{margin-bottom:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.ml_sd\.system\.dimension\.spacing\.small{margin-left:var(--spacing-sd-system-dimension-spacing-small)}.flex-d_row{flex-direction:row}.bd-c_sd\.system\.color\.impression\.negative{border-color:var(--colors-sd-system-color-impression-negative)}.open\:trf_rotate\(180deg\):is([open],[data-open],[data-state=open]){transform:rotate(180deg)}.open\:trf_rotate\(0deg\):is([open],[data-open],[data-state=open]){transform:rotate(0)}.\[\&_svg\]\:w_sd\.reference\.dimension\.scale\.8 svg{width:var(--sizes-sd-reference-dimension-scale-8)}.\[\&_svg\]\:h_sd\.reference\.dimension\.scale\.8 svg{height:var(--sizes-sd-reference-dimension-scale-8)}.disabled\:cursor_not-allowed:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed}.disabled\:bg_sd\.system\.color\.interaction\.disabled:is(:disabled,[disabled],[data-disabled]){background:var(--colors-sd-system-color-interaction-disabled)}.disabled\:c_sd\.system\.color\.interaction\.disabledOnSurface:is(:disabled,[disabled],[data-disabled]){color:var(--colors-sd-system-color-interaction-disabled-on-surface)}.disabled\:ring_none:is(:disabled,[disabled],[data-disabled]){outline:2px solid transparent;outline-offset:2px}.\[\&_\.checkmark\]\:c_sd\.system\.color\.impression\.onPrimaryContainer .checkmark{color:var(--colors-sd-system-color-impression-on-primary-container)}.disabled\:c_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.component\.outline\}\,_\{colors\.sd\.system\.color\.interaction\.hoveredOnPrimary\}\)\;:is(:disabled,[disabled],[data-disabled]){color:color-mix(in srgb,var(--colors-sd-system-color-component-outline),var(--colors-sd-system-color-interaction-hovered-on-primary))}.disabled\:ring_solid:is(:disabled,[disabled],[data-disabled]){outline:solid}.disabled\:ring-o_0px:is(:disabled,[disabled],[data-disabled]){outline-offset:0px}.disabled\:bg_transparent:is(:disabled,[disabled],[data-disabled]){background:transparent}.\[\&_svg\]\:w_sd\.reference\.dimension\.scale\.12 svg{width:var(--sizes-sd-reference-dimension-scale-12)}.\[\&_svg\]\:h_sd\.reference\.dimension\.scale\.12 svg{height:var(--sizes-sd-reference-dimension-scale-12)}.selected\:bg_sd\.system\.color\.interaction\.selectedSurface:is([aria-selected=true],[data-selected]){background:var(--colors-sd-system-color-interaction-selected-surface)}.disabled\:op_0\.3:is(:disabled,[disabled],[data-disabled]){opacity:.3}.\[\&_svg\]\:w_24px svg{width:24px}.\[\&_svg\]\:h_24px svg{height:24px}.\[\&_svg\]\:d_block svg{display:block}.\[\&_svg\]\:max-h_100\% svg{max-height:100%}.\[\&_svg\]\:max-w_100\% svg{max-width:100%}.\[\&_svg\]\:w_40px svg{width:40px}.\[\&_svg\]\:h_40px svg{height:40px}.disabled\:c_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.impression\.primary\}\,_\{colors\.sd\.system\.color\.interaction\.hoveredOnPrimary\}\)\;:is(:disabled,[disabled],[data-disabled]){color:color-mix(in srgb,var(--colors-sd-system-color-impression-primary),var(--colors-sd-system-color-interaction-hovered-on-primary))}.disabled\:c_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.component\.outlineVariant\}\,_\{colors\.sd\.system\.color\.interaction\.hoveredOnPrimary\}\)\;:is(:disabled,[disabled],[data-disabled]){color:color-mix(in srgb,var(--colors-sd-system-color-component-outline-variant),var(--colors-sd-system-color-interaction-hovered-on-primary))}.placeholder\:c_sd\.system\.color\.component\.onSurfaceVariant::placeholder,.placeholder\:c_sd\.system\.color\.component\.onSurfaceVariant[data-placeholder]{color:var(--colors-sd-system-color-component-on-surface-variant)}[data-disabled] .\[\[data-disabled\]_\&\]\:c_sd\.system\.color\.interaction\.disabledOnSurface{color:var(--colors-sd-system-color-interaction-disabled-on-surface)}[data-state=open] .\[\[data-state\=open\]_\&\]\:op_1{opacity:1}[data-placeholder-shown] .\[\[data-placeholder-shown\]_\&\]\:c_sd\.system\.color\.component\.onSurfaceVariant{color:var(--colors-sd-system-color-component-on-surface-variant)}.disabled\:cursor_default:is(:disabled,[disabled],[data-disabled]){cursor:default}.checked\:trf_translateX\(19px\):is(:checked,[data-checked],[aria-checked=true],[data-state=checked]){transform:translate(19px)}.selected\:c_sd\.system\.color\.impression\.primary:is([aria-selected=true],[data-selected]){color:var(--colors-sd-system-color-impression-primary)}.disabled\:bg-c_sd\.system\.color\.interaction\.disabled:is(:disabled,[disabled],[data-disabled]){background-color:var(--colors-sd-system-color-interaction-disabled)}.highlighted\:bg-c_sd\.system\.color\.interaction\.hoveredVariant[data-highlighted]{background-color:var(--colors-sd-system-color-interaction-hovered-variant)}.disabled\:ring-c_sd\.system\.color\.component\.outline:is(:disabled,[disabled],[data-disabled]){outline-color:var(--colors-sd-system-color-component-outline)}.disabled\:ring-w_sd\.system\.dimension\.border\.medium:is(:disabled,[disabled],[data-disabled]){outline-width:var(--border-widths-sd-system-dimension-border-medium)}.disabled\:ring-c_transparent:is(:disabled,[disabled],[data-disabled]){outline-color:transparent}.invalid\:ring-c_sd\.system\.color\.impression\.negative:is(:invalid,[data-invalid]){outline-color:var(--colors-sd-system-color-impression-negative)}.\[\&\[data-focus\=\"true\"\]_\.control\]\:bd-c_sd\.system\.color\.impression\.primary[data-focus=true] .control{border-color:var(--colors-sd-system-color-impression-primary)}.checked\:bg-c_sd\.system\.color\.impression\.primary:is(:checked,[data-checked],[aria-checked=true],[data-state=checked]){background-color:var(--colors-sd-system-color-impression-primary)}.checked\:bd-c_sd\.system\.color\.impression\.primary:is(:checked,[data-checked],[aria-checked=true],[data-state=checked]){border-color:var(--colors-sd-system-color-impression-primary)}.checked\:bd-c_sd\.system\.color\.component\.surface:is(:checked,[data-checked],[aria-checked=true],[data-state=checked]){border-color:var(--colors-sd-system-color-component-surface)}.selected\:fw_bold:is([aria-selected=true],[data-selected]){font-weight:700}.selected\:bd-b-c_sd\.system\.color\.impression\.primary:is([aria-selected=true],[data-selected]){border-bottom-color:var(--colors-sd-system-color-impression-primary)}.\[\&\:has\(\[data-focus\=\"true\"\]\)\]\:ring-w_sd\.system\.dimension\.border\.thick:has([data-focus=true]){outline-width:var(--border-widths-sd-system-dimension-border-thick)}.\[\&\:has\(\[data-focus\=\"true\"\]\)\]\:ring-c_sd\.system\.color\.impression\.primary:has([data-focus=true]){outline-color:var(--colors-sd-system-color-impression-primary)}.lastOfType\:pb_8px:last-of-type{padding-bottom:8px}.firstOfType\:pb_0px:first-of-type{padding-bottom:0}.focusWithin\:ring-w_sd\.system\.dimension\.border\.thick:focus-within{outline-width:var(--border-widths-sd-system-dimension-border-thick)}.focusWithin\:ring-c_sd\.system\.color\.impression\.primary:focus-within{outline-color:var(--colors-sd-system-color-impression-primary)}.group:has(:focus-visible) .\[\.group\:has\(\:focus-visible\)_\&\]\:ring-o_-2px{outline-offset:-2px}.group:has(:focus-visible) .\[\.group\:has\(\:focus-visible\)_\&\]\:bdr_sd\.system\.dimension\.radius\.small{border-radius:var(--radii-sd-system-dimension-radius-small)}.focusVisible\:ring_1px_solid:is(:focus-visible,[data-focus-visible]){outline:1px solid}.group:has(:focus-visible) .\[\.group\:has\(\:focus-visible\)_\&\]\:bdr_sd\.system\.dimension\.radius\.full{border-radius:var(--radii-sd-system-dimension-radius-full)}.focusVisible\:ring-o_-1px:is(:focus-visible,[data-focus-visible]){outline-offset:-1px}.group:has(:focus-visible) .\[\.group\:has\(\:focus-visible\)_\&\]\:outline-style_solid{outline-style:solid}.group:has(:focus-visible) .\[\.group\:has\(\:focus-visible\)_\&\]\:ring-w_1\.5px{outline-width:1.5px}.group:has(:focus-visible) .\[\.group\:has\(\:focus-visible\)_\&\]\:ring-c_sd\.system\.color\.impression\.primary{outline-color:var(--colors-sd-system-color-impression-primary)}.focusVisible\:ring-c_sd\.system\.color\.component\.outline:is(:focus-visible,[data-focus-visible]){outline-color:var(--colors-sd-system-color-component-outline)}.group:has(:focus-visible) .\[\.group\:has\(\:focus-visible\)_\&\]\:bg-c_sd\.system\.color\.interaction\.selectedSurface{background-color:var(--colors-sd-system-color-interaction-selected-surface)}.focus\:ring-w_sd\.system\.dimension\.border\.thick:is(:focus,[data-focus]){outline-width:var(--border-widths-sd-system-dimension-border-thick)}.focus\:ring-c_sd\.system\.color\.impression\.primary:is(:focus,[data-focus]){outline-color:var(--colors-sd-system-color-impression-primary)}.group:has(:focus-visible) .\[\.group\:has\(\:focus-visible\)_\&\]\:bd-c_sd\.system\.color\.impression\.primary{border-color:var(--colors-sd-system-color-impression-primary)}.focusVisible\:ring-w_1px:is(:focus-visible,[data-focus-visible]){outline-width:1px}.focusVisible\:outline-style_solid:is(:focus-visible,[data-focus-visible]){outline-style:solid}.hover\:bg_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.component\.surface\}\,_\{colors\.sd\.system\.color\.interaction\.hoveredVariant\}\):is(:hover,[data-hover]){background:color-mix(in srgb,var(--colors-sd-system-color-component-surface),var(--colors-sd-system-color-interaction-hovered-variant))}.hover\:bg_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.interaction\.hoveredVariant\}\,_\{colors\.sd\.system\.color\.component\.surface\}\)\;:is(:hover,[data-hover]){background:color-mix(in srgb,var(--colors-sd-system-color-interaction-hovered-variant),var(--colors-sd-system-color-component-surface))}.hover\:c_sd\.system\.color\.impression\.primary:is(:hover,[data-hover]){color:var(--colors-sd-system-color-impression-primary)}.hover\:bg-c_sd\.system\.color\.interaction\.hoveredVariant:is(:hover,[data-hover]){background-color:var(--colors-sd-system-color-interaction-hovered-variant)}.expanded\:\[\&_svg\]\:trf_rotate\(180deg\):is([aria-expanded=true],[data-expanded],[data-state=expanded]) svg{transform:rotate(180deg)}.enabled\:focusVisible\:ring-o_-1px:enabled:is(:focus-visible,[data-focus-visible]){outline-offset:-1px}.selected\:hover\:bg_sd\.system\.color\.interaction\.selectedSurface:is([aria-selected=true],[data-selected]):is(:hover,[data-hover]){background:var(--colors-sd-system-color-interaction-selected-surface)}.disabled\:selected\:bg_transparent:is(:disabled,[disabled],[data-disabled]):is([aria-selected=true],[data-selected]){background:transparent}.disabled\:placeholder\:c_sd\.system\.color\.interaction\.disabledOnSurface:is(:disabled,[disabled],[data-disabled])::placeholder,.disabled\:placeholder\:c_sd\.system\.color\.interaction\.disabledOnSurface:is(:disabled,[disabled],[data-disabled])[data-placeholder]{color:var(--colors-sd-system-color-interaction-disabled-on-surface)}[data-placeholder-shown] .disabled\:\[\[data-placeholder-shown\]_\&\]\:c_sd\.system\.color\.interaction\.disabledOnSurface:is(:disabled,[disabled],[data-disabled]){color:var(--colors-sd-system-color-interaction-disabled-on-surface)}.enabled\:hover\:bg_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.component\.surface\}\,_\{colors\.sd\.system\.color\.interaction\.hoveredVariant\}\):enabled:is(:hover,[data-hover]){background:color-mix(in srgb,var(--colors-sd-system-color-component-surface),var(--colors-sd-system-color-interaction-hovered-variant))}.enabled\:focusVisible\:ring-w_sd\.system\.dimension\.border\.medium:enabled:is(:focus-visible,[data-focus-visible]){outline-width:var(--border-widths-sd-system-dimension-border-medium)}.enabled\:focusVisible\:outline-style_solid:enabled:is(:focus-visible,[data-focus-visible]){outline-style:solid}.enabled\:focusVisible\:ring-c_sd\.system\.color\.interaction\.hovered:enabled:is(:focus-visible,[data-focus-visible]){outline-color:var(--colors-sd-system-color-interaction-hovered)}.enabled\:hover\:bg-c_sd\.system\.color\.interaction\.hoveredVariant:enabled:is(:hover,[data-hover]){background-color:var(--colors-sd-system-color-interaction-hovered-variant)}.enabled\:focusVisible\:bg-c_sd\.system\.color\.interaction\.hoveredVariant:enabled:is(:focus-visible,[data-focus-visible]){background-color:var(--colors-sd-system-color-interaction-hovered-variant)}.enabled\:focusVisible\:ring-c_sd\.system\.color\.component\.outlineVariant:enabled:is(:focus-visible,[data-focus-visible]){outline-color:var(--colors-sd-system-color-component-outline-variant)}.enabled\:hover\:bg-i_linear-gradient\(0deg\,_\{colors\.sd\.system\.color\.interaction\.hovered\}_0\%\,_\{colors\.sd\.system\.color\.interaction\.hovered\}_100\%\):enabled:is(:hover,[data-hover]){background-image:linear-gradient(0deg,var(--colors-sd-system-color-interaction-hovered) 0%,var(--colors-sd-system-color-interaction-hovered) 100%)}.enabled\:focusVisible\:bg-i_linear-gradient\(0deg\,_\{colors\.sd\.system\.color\.interaction\.hovered\}_0\%\,_\{colors\.sd\.system\.color\.interaction\.hovered\}_100\%\):enabled:is(:focus-visible,[data-focus-visible]){background-image:linear-gradient(0deg,var(--colors-sd-system-color-interaction-hovered) 0%,var(--colors-sd-system-color-interaction-hovered) 100%)}.enabled\:focusVisible\:ring-w_sd\.system\.dimension\.border\.thick:enabled:is(:focus-visible,[data-focus-visible]){outline-width:var(--border-widths-sd-system-dimension-border-thick)}.enabled\:focusVisible\:ring-c_sd\.system\.color\.impression\.primary:enabled:is(:focus-visible,[data-focus-visible]){outline-color:var(--colors-sd-system-color-impression-primary)}.enabled\:hover\:ring-c_sd\.system\.color\.interaction\.hovered:enabled:is(:hover,[data-hover]){outline-color:var(--colors-sd-system-color-interaction-hovered)}.checked\:disabled\:bg-c_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.impression\.primary\}\,_\{colors\.sd\.system\.color\.interaction\.hoveredOnPrimary\}\)\;:is(:checked,[data-checked],[aria-checked=true],[data-state=checked]):is(:disabled,[disabled],[data-disabled]){background-color:color-mix(in srgb,var(--colors-sd-system-color-impression-primary),var(--colors-sd-system-color-interaction-hovered-on-primary))}.checked\:disabled\:bd-c_transparent:is(:checked,[data-checked],[aria-checked=true],[data-state=checked]):is(:disabled,[disabled],[data-disabled]){border-color:transparent}.hover\:disabled\:c_sd\.system\.color\.interaction\.disabledOnSurface:is(:hover,[data-hover]):is(:disabled,[disabled],[data-disabled]){color:var(--colors-sd-system-color-interaction-disabled-on-surface)}.enabled\:hover\:after\:pos_absolute:enabled:is(:hover,[data-hover]):after{position:absolute}.enabled\:hover\:after\:inset_0:enabled:is(:hover,[data-hover]):after{top:0;right:0;bottom:0;left:0}.enabled\:hover\:after\:bg_sd\.system\.color\.interaction\.hovered:enabled:is(:hover,[data-hover]):after{background:var(--colors-sd-system-color-interaction-hovered)}.enabled\:focusVisible\:after\:pos_absolute:enabled:is(:focus-visible,[data-focus-visible]):after{position:absolute}.enabled\:focusVisible\:after\:inset_0:enabled:is(:focus-visible,[data-focus-visible]):after{top:0;right:0;bottom:0;left:0}.enabled\:focusVisible\:after\:bg_sd\.system\.color\.interaction\.hovered:enabled:is(:focus-visible,[data-focus-visible]):after{background:var(--colors-sd-system-color-interaction-hovered)}.disabled\:checked\:\[\&_svg\]\:c_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.impression\.primary\}\,_\{colors\.sd\.system\.color\.interaction\.hoveredOnPrimary\}\)\;:is(:disabled,[disabled],[data-disabled]):is(:checked,[data-checked],[aria-checked=true],[data-state=checked]) svg{color:color-mix(in srgb,var(--colors-sd-system-color-impression-primary),var(--colors-sd-system-color-interaction-hovered-on-primary))}.disabled\:checked\:\[\&_\.checkmark\]\:c_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.interaction\.disabled\}\,_\{colors\.sd\.system\.color\.impression\.onPrimaryContainer\}\)\;:is(:disabled,[disabled],[data-disabled]):is(:checked,[data-checked],[aria-checked=true],[data-state=checked]) .checkmark{color:color-mix(in srgb,var(--colors-sd-system-color-interaction-disabled),var(--colors-sd-system-color-impression-on-primary-container))}.enabled\:hover\:after\:content_\'\':enabled:is(:hover,[data-hover]):after{content:""}.enabled\:focusVisible\:after\:content_\'\':enabled:is(:focus-visible,[data-focus-visible]):after{content:""}@layer components{.\[\@layer_components\]\:w_min\(100\%\,_300px\){width:min(100%,300px)}.\[\@layer_components\]\:w_min\(100\%\,_150px\){width:min(100%,150px)}}@layer components;@media screen and (min-width: 48rem){.expanded\:w_44px{width:44px}.expanded\:h_44px{height:44px}.expanded\:pt_sd\.system\.dimension\.spacing\.large{padding-top:var(--spacing-sd-system-dimension-spacing-large)}.expanded\:flex-d_row-reverse{flex-direction:row-reverse}.expanded\:jc_end{justify-content:end}}}
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+Mono:wght@100..900&family=Roboto:wght@100;400;700&display=swap";@layer reset,base,tokens,recipes,utilities;@layer base{:root{--global-font-body: "Roboto", "Noto Sans JP", sans-serif;--global-font-mono: "Noto Sans Mono", monospace;font-optical-sizing:auto;text-rendering:optimizeLegibility;font-feature-settings:"palt";letter-spacing:.03em}}@layer reset{html,:host{--font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;line-height:1.5;font-family:var(--global-font-body, var(--font-fallback))}*,:before,:after,::backdrop,::file-selector-button{margin:0;padding:0;box-sizing:border-box;border-width:0px;border-style:solid;border-color:var(--global-color-border, currentColor)}hr{height:0px;color:inherit;border-top-width:1px}body{height:100%;line-height:inherit}img{border-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{text-wrap:balance;font-size:inherit;font-weight:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ol,ul,menu{list-style:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{-moz-appearance:button;appearance:button;-webkit-appearance:button}button,input,optgroup,select,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:transparent}::placeholder{opacity:1;--placeholder-fallback: color-mix(in srgb, currentColor 50%, transparent);color:var(--global-color-placeholder, var(--placeholder-fallback))}textarea{resize:vertical}table{text-indent:0px;border-collapse:collapse;border-color:inherit}summary{display:list-item}small{font-size:80%}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}sub{bottom:-.25em}sup{top:-.5em}dialog{padding:0}a{color:inherit;text-decoration:inherit}abbr:where([title]){text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{--font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";font-feature-settings:normal;font-variation-settings:normal;font-family:var(--global-font-mono, var(--font-mono-fallback));font-size:1em}progress{vertical-align:baseline}::-webkit-search-decoration,::-webkit-search-cancel-button{-webkit-appearance:none}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}:-moz-ui-invalid{box-shadow:none}:-moz-focusring{outline:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer base{:root{--made-with-panda: "🐼"}*,:before,:after,::backdrop{--blur: ;--brightness: ;--contrast: ;--grayscale: ;--hue-rotate: ;--invert: ;--saturate: ;--sepia: ;--drop-shadow: ;--backdrop-blur: ;--backdrop-brightness: ;--backdrop-contrast: ;--backdrop-grayscale: ;--backdrop-hue-rotate: ;--backdrop-invert: ;--backdrop-opacity: ;--backdrop-saturate: ;--backdrop-sepia: ;--gradient-from-position: ;--gradient-to-position: ;--gradient-via-position: ;--scroll-snap-strictness: proximity;--border-spacing-x: 0;--border-spacing-y: 0;--translate-x: 0;--translate-y: 0;--rotate: 0;--rotate-x: 0;--rotate-y: 0;--skew-x: 0;--skew-y: 0;--scale-x: 1;--scale-y: 1}}@layer tokens{:where(:root,:host){--colors-sd-reference-color-scale-white-1000: #FFFFFF;--colors-sd-reference-color-scale-black-1000: #000000;--colors-sd-reference-color-scale-transparency-5: #0000000D;--colors-sd-reference-color-scale-transparency-20: #00000033;--colors-sd-reference-color-scale-transparency-60: #FFFFFF99;--colors-sd-reference-color-scale-gray-100: #EFEEEB;--colors-sd-reference-color-scale-gray-200: #D9D8D3;--colors-sd-reference-color-scale-gray-300: #C8C7C2;--colors-sd-reference-color-scale-gray-400: #AFAEAA;--colors-sd-reference-color-scale-gray-500: #8C8B87;--colors-sd-reference-color-scale-gray-600: #696966;--colors-sd-reference-color-scale-gray-700: #525250;--colors-sd-reference-color-scale-gray-800: #3F3F3D;--colors-sd-reference-color-scale-gray-900: #31312F;--colors-sd-reference-color-scale-gray-1000: #232322;--colors-sd-reference-color-scale-red-100: #FCEBEA;--colors-sd-reference-color-scale-red-200: #FCD6D3;--colors-sd-reference-color-scale-red-300: #FDB9B4;--colors-sd-reference-color-scale-red-400: #FF8F8F;--colors-sd-reference-color-scale-red-500: #F84258;--colors-sd-reference-color-scale-red-600: #CE0037;--colors-sd-reference-color-scale-red-700: #A4002A;--colors-sd-reference-color-scale-red-800: #81001F;--colors-sd-reference-color-scale-red-900: #650417;--colors-sd-reference-color-scale-red-1000: #49060E;--colors-sd-reference-color-scale-chestnut-100: #FAECE6;--colors-sd-reference-color-scale-chestnut-200: #F7D8C9;--colors-sd-reference-color-scale-chestnut-300: #F7C6B0;--colors-sd-reference-color-scale-chestnut-400: #F49567;--colors-sd-reference-color-scale-chestnut-500: #E26324;--colors-sd-reference-color-scale-chestnut-600: #AB4919;--colors-sd-reference-color-scale-chestnut-700: #803510;--colors-sd-reference-color-scale-chestnut-800: #692C0D;--colors-sd-reference-color-scale-chestnut-900: #50230D;--colors-sd-reference-color-scale-chestnut-1000: #371B0B;--colors-sd-reference-color-scale-beige-100: #F7EDE2;--colors-sd-reference-color-scale-beige-200: #F2DBC0;--colors-sd-reference-color-scale-beige-300: #EDC18A;--colors-sd-reference-color-scale-beige-400: #DAA358;--colors-sd-reference-color-scale-beige-500: #AF8245;--colors-sd-reference-color-scale-beige-600: #846132;--colors-sd-reference-color-scale-beige-700: #684C26;--colors-sd-reference-color-scale-beige-800: #503A1C;--colors-sd-reference-color-scale-beige-900: #3E2D17;--colors-sd-reference-color-scale-beige-1000: #2B2013;--colors-sd-reference-color-scale-yellow-100: #FEEDBE;--colors-sd-reference-color-scale-yellow-200: #FFE885;--colors-sd-reference-color-scale-yellow-300: #FFE600;--colors-sd-reference-color-scale-yellow-400: #EDD202;--colors-sd-reference-color-scale-yellow-500: #AC9301;--colors-sd-reference-color-scale-yellow-600: #857100;--colors-sd-reference-color-scale-yellow-700: #5F5100;--colors-sd-reference-color-scale-yellow-800: #4A3E00;--colors-sd-reference-color-scale-yellow-900: #3A3000;--colors-sd-reference-color-scale-yellow-1000: #292200;--colors-sd-reference-color-scale-green-100: #CAF9E6;--colors-sd-reference-color-scale-green-200: #AEEAD5;--colors-sd-reference-color-scale-green-300: #98E1C8;--colors-sd-reference-color-scale-green-400: #6ED0AE;--colors-sd-reference-color-scale-green-500: #40A683;--colors-sd-reference-color-scale-green-600: #2C755C;--colors-sd-reference-color-scale-green-700: #266751;--colors-sd-reference-color-scale-green-800: #184737;--colors-sd-reference-color-scale-green-900: #12372B;--colors-sd-reference-color-scale-green-1000: #0D271E;--colors-sd-reference-color-scale-sky-blue-100: #D9F6FC;--colors-sd-reference-color-scale-sky-blue-200: #C3EFF4;--colors-sd-reference-color-scale-sky-blue-300: #9CE6EC;--colors-sd-reference-color-scale-sky-blue-400: #64CCD3;--colors-sd-reference-color-scale-sky-blue-500: #00A3AF;--colors-sd-reference-color-scale-sky-blue-600: #00757E;--colors-sd-reference-color-scale-sky-blue-700: #015C63;--colors-sd-reference-color-scale-sky-blue-800: #01474C;--colors-sd-reference-color-scale-sky-blue-900: #02373C;--colors-sd-reference-color-scale-sky-blue-1000: #04272A;--colors-sd-reference-color-scale-blue-100: #EFF2FC;--colors-sd-reference-color-scale-blue-200: #D7DEFB;--colors-sd-reference-color-scale-blue-300: #BFCEFC;--colors-sd-reference-color-scale-blue-400: #8FAEFE;--colors-sd-reference-color-scale-blue-500: #428CFE;--colors-sd-reference-color-scale-blue-600: #0A69CF;--colors-sd-reference-color-scale-blue-700: #0650A0;--colors-sd-reference-color-scale-blue-800: #043F81;--colors-sd-reference-color-scale-blue-900: #073165;--colors-sd-reference-color-scale-blue-1000: #081E3F;--colors-sd-reference-color-scale-purple-100: #F4ECF6;--colors-sd-reference-color-scale-purple-200: #EADAEE;--colors-sd-reference-color-scale-purple-300: #DCBDE4;--colors-sd-reference-color-scale-purple-400: #CC9FD9;--colors-sd-reference-color-scale-purple-500: #AA61C2;--colors-sd-reference-color-scale-purple-600: #914DA9;--colors-sd-reference-color-scale-purple-700: #733B85;--colors-sd-reference-color-scale-purple-800: #592D68;--colors-sd-reference-color-scale-purple-900: #462352;--colors-sd-reference-color-scale-purple-1000: #32183A;--colors-sd-reference-color-scale-pink-100: #F9EBF0;--colors-sd-reference-color-scale-pink-200: #F6D7E0;--colors-sd-reference-color-scale-pink-300: #F5C1D1;--colors-sd-reference-color-scale-pink-400: #F190B4;--colors-sd-reference-color-scale-pink-500: #EB4F8E;--colors-sd-reference-color-scale-pink-600: #B9336B;--colors-sd-reference-color-scale-pink-700: #932653;--colors-sd-reference-color-scale-pink-800: #711D41;--colors-sd-reference-color-scale-pink-900: #591734;--colors-sd-reference-color-scale-pink-1000: #401026;--colors-sd-system-color-impression-primary: #0650A0;--colors-sd-system-color-impression-on-primary: #FFFFFF;--colors-sd-system-color-impression-primary-container: #0650A0;--colors-sd-system-color-impression-on-primary-container: #FFFFFF;--colors-sd-system-color-impression-secondary: #BFCEFC;--colors-sd-system-color-impression-on-secondary: #000000;--colors-sd-system-color-impression-secondary-container: #BFCEFC;--colors-sd-system-color-impression-on-secondary-container: #000000;--colors-sd-system-color-impression-tertiary: #EFF2FC;--colors-sd-system-color-impression-on-tertiary: #000000;--colors-sd-system-color-impression-tertiary-container: #EFF2FC;--colors-sd-system-color-impression-on-tertiary-container: #000000;--colors-sd-system-color-impression-notice: #FFE600;--colors-sd-system-color-impression-on-notice: #000000;--colors-sd-system-color-impression-notice-container: #FFE600;--colors-sd-system-color-impression-on-notice-container: #000000;--colors-sd-system-color-impression-negative: #CE0037;--colors-sd-system-color-impression-on-negative: #FFFFFF;--colors-sd-system-color-impression-negative-container: #FCD6D3;--colors-sd-system-color-impression-on-negative-container: #000000;--colors-sd-system-color-impression-positive: #40A683;--colors-sd-system-color-impression-on-positive: #FFFFFF;--colors-sd-system-color-impression-positive-container: #40A683;--colors-sd-system-color-impression-on-positive-container: #FFFFFF;--colors-sd-system-color-component-surface: #FFFFFF;--colors-sd-system-color-component-on-surface: #000000;--colors-sd-system-color-component-on-surface-variant: #696966;--colors-sd-system-color-component-inverse-surface: #232322;--colors-sd-system-color-component-inverse-on-surface: #FFFFFF;--colors-sd-system-color-component-outline: #C8C7C2;--colors-sd-system-color-component-outline-variant: #8C8B87;--colors-sd-system-color-component-scrim: #00000033;--colors-sd-system-color-interaction-disabled: #EFEEEB;--colors-sd-system-color-interaction-disabled-on-surface: #AFAEAA;--colors-sd-system-color-interaction-selected-surface: #BFCEFC;--colors-sd-system-color-interaction-hovered: #00000033;--colors-sd-system-color-interaction-hovered-variant: #0000000D;--colors-sd-system-color-interaction-hovered-on-primary: #FFFFFF99;--spacing-sd-reference-dimension-scale-0: 0px;--spacing-sd-reference-dimension-scale-1: 1px;--spacing-sd-reference-dimension-scale-2: 2px;--spacing-sd-reference-dimension-scale-3: 4px;--spacing-sd-reference-dimension-scale-4: 8px;--spacing-sd-reference-dimension-scale-5: 12px;--spacing-sd-reference-dimension-scale-6: 16px;--spacing-sd-reference-dimension-scale-7: 20px;--spacing-sd-reference-dimension-scale-8: 24px;--spacing-sd-reference-dimension-scale-9: 28px;--spacing-sd-reference-dimension-scale-10: 32px;--spacing-sd-reference-dimension-scale-11: 36px;--spacing-sd-reference-dimension-scale-12: 40px;--spacing-sd-reference-dimension-scale-13: 48px;--spacing-sd-reference-dimension-scale-14: 56px;--spacing-sd-reference-dimension-scale-15: 64px;--spacing-sd-reference-dimension-scale-16: 72px;--spacing-sd-reference-dimension-scale-17: 80px;--spacing-sd-reference-dimension-scale-18: 96px;--spacing-sd-system-dimension-spacing-none: 0px;--spacing-sd-system-dimension-spacing-two-extra-small: 4px;--spacing-sd-system-dimension-spacing-extra-small: 8px;--spacing-sd-system-dimension-spacing-small: 12px;--spacing-sd-system-dimension-spacing-medium: 16px;--spacing-sd-system-dimension-spacing-large: 20px;--spacing-sd-system-dimension-spacing-extra-large: 24px;--spacing-sd-system-dimension-spacing-two-extra-large: 32px;--spacing-sd-system-dimension-spacing-three-extra-large: 40px;--spacing-sd-system-dimension-spacing-four-extra-large: 48px;--spacing-sd-system-dimension-spacing-five-extra-large: 64px;--spacing-sd-system-dimension-spacing-six-extra-large: 80px;--sizes-sd-reference-dimension-breakpoint-small: 640px;--sizes-sd-reference-dimension-breakpoint-medium: 768px;--sizes-sd-reference-dimension-breakpoint-large: 1024px;--sizes-sd-reference-dimension-breakpoint-extra-large: 1280px;--sizes-sd-reference-dimension-scale-0: 0px;--sizes-sd-reference-dimension-scale-1: 1px;--sizes-sd-reference-dimension-scale-2: 2px;--sizes-sd-reference-dimension-scale-3: 4px;--sizes-sd-reference-dimension-scale-4: 8px;--sizes-sd-reference-dimension-scale-5: 12px;--sizes-sd-reference-dimension-scale-6: 16px;--sizes-sd-reference-dimension-scale-7: 20px;--sizes-sd-reference-dimension-scale-8: 24px;--sizes-sd-reference-dimension-scale-9: 28px;--sizes-sd-reference-dimension-scale-10: 32px;--sizes-sd-reference-dimension-scale-11: 36px;--sizes-sd-reference-dimension-scale-12: 40px;--sizes-sd-reference-dimension-scale-13: 48px;--sizes-sd-reference-dimension-scale-14: 56px;--sizes-sd-reference-dimension-scale-15: 64px;--sizes-sd-reference-dimension-scale-16: 72px;--sizes-sd-reference-dimension-scale-17: 80px;--sizes-sd-reference-dimension-scale-18: 96px;--sizes-sd-system-dimension-breakpoint-compact: 0px;--sizes-sd-system-dimension-breakpoint-expanded: 768px;--sizes-sd-system-dimension-spacing-none: 0px;--sizes-sd-system-dimension-spacing-two-extra-small: 4px;--sizes-sd-system-dimension-spacing-extra-small: 8px;--sizes-sd-system-dimension-spacing-small: 12px;--sizes-sd-system-dimension-spacing-medium: 16px;--sizes-sd-system-dimension-spacing-large: 20px;--sizes-sd-system-dimension-spacing-extra-large: 24px;--sizes-sd-system-dimension-spacing-two-extra-large: 32px;--sizes-sd-system-dimension-spacing-three-extra-large: 40px;--sizes-sd-system-dimension-spacing-four-extra-large: 48px;--sizes-sd-system-dimension-spacing-five-extra-large: 64px;--sizes-sd-system-dimension-spacing-six-extra-large: 80px;--sizes-breakpoint-expanded: 768px;--opacity-sd-reference-elevation-opacity-scale-0: 0;--opacity-sd-reference-elevation-opacity-scale-1: .1;--opacity-sd-reference-elevation-opacity-scale-2: .2;--opacity-sd-reference-elevation-opacity-scale-3: .3;--opacity-sd-reference-elevation-opacity-scale-4: .4;--opacity-sd-reference-elevation-opacity-scale-5: .5;--opacity-sd-reference-elevation-opacity-scale-6: .6;--opacity-sd-reference-elevation-opacity-scale-7: .7;--opacity-sd-reference-elevation-opacity-scale-8: .8;--opacity-sd-reference-elevation-opacity-scale-9: .9;--opacity-sd-reference-elevation-opacity-scale-10: 1;--fonts-sd-reference-typography-font-family-primary: inherit;--fonts-sd-reference-typography-font-family-monospace: Noto Sans Mono;--font-weights-sd-reference-typography-font-weight-regular: 400;--font-weights-sd-reference-typography-font-weight-bold: 700;--line-heights-sd-reference-typography-line-height-none: 1;--line-heights-sd-reference-typography-line-height-tight: 1.4;--line-heights-sd-reference-typography-line-height-normal: 1.6;--line-heights-sd-reference-typography-line-height-relaxed: 1.8;--font-sizes-sd-reference-typography-scale-expanded-four-extra-small: 10px;--font-sizes-sd-reference-typography-scale-expanded-three-extra-small: 11px;--font-sizes-sd-reference-typography-scale-expanded-two-extra-small: 12px;--font-sizes-sd-reference-typography-scale-expanded-extra-small: 13px;--font-sizes-sd-reference-typography-scale-expanded-small: 14px;--font-sizes-sd-reference-typography-scale-expanded-medium: 16px;--font-sizes-sd-reference-typography-scale-expanded-large: 18px;--font-sizes-sd-reference-typography-scale-expanded-extra-large: 21px;--font-sizes-sd-reference-typography-scale-expanded-two-extra-large: 26px;--font-sizes-sd-reference-typography-scale-expanded-three-extra-large: 32px;--font-sizes-sd-reference-typography-scale-expanded-four-extra-large: 43px;--font-sizes-sd-reference-typography-scale-expanded-five-extra-large: 64px;--font-sizes-sd-reference-typography-scale-compact-two-extra-small: 10px;--font-sizes-sd-reference-typography-scale-compact-extra-small: 11px;--font-sizes-sd-reference-typography-scale-compact-small: 12px;--font-sizes-sd-reference-typography-scale-compact-medium: 14px;--font-sizes-sd-reference-typography-scale-compact-large: 16px;--font-sizes-sd-reference-typography-scale-compact-extra-large: 19px;--font-sizes-sd-reference-typography-scale-compact-two-extra-large: 22px;--font-sizes-sd-reference-typography-scale-compact-three-extra-large: 28px;--font-sizes-sd-reference-typography-scale-compact-four-extra-large: 37px;--font-sizes-sd-reference-typography-scale-compact-five-extra-large: 56px;--border-widths-sd-system-dimension-border-medium: 1px;--border-widths-sd-system-dimension-border-thick: 2px;--border-widths-sd-system-dimension-border-extra-thick: 4px;--radii-sd-system-dimension-radius-extra-small: 2px;--radii-sd-system-dimension-radius-small: 4px;--radii-sd-system-dimension-radius-medium: 8px;--radii-sd-system-dimension-radius-large: 12px;--radii-sd-system-dimension-radius-extra-large: 16px;--radii-sd-system-dimension-radius-full: 9999px;--shadows-sd-system-elevation-shadow-level1: 0px 1px 2px 0px #0000004D;--shadows-sd-system-elevation-shadow-level2: 0px 1px 4px 0px #00000033;--shadows-sd-system-elevation-shadow-level3: 0px 2px 8px 0px #00000033;--shadows-sd-system-elevation-shadow-level4: 0px 4px 12px 0px #00000033;--shadows-sd-system-elevation-shadow-level5: 0px 8px 24px 0px #00000033;--z-index-sd-system-elevation-z-index-deep-dive: -1000;--z-index-sd-system-elevation-z-index-base: 0;--z-index-sd-system-elevation-z-index-docked: 10;--z-index-sd-system-elevation-z-index-dropdown: 500;--z-index-sd-system-elevation-z-index-modal: 1000;--z-index-sd-system-elevation-z-index-toast: 2000;--breakpoints-expanded: 768px}[data-panda-theme=asagi]{--colors-sd-system-color-impression-primary: #00757E;--colors-sd-system-color-impression-on-primary: #FFFFFF;--colors-sd-system-color-impression-primary-container: #00757E;--colors-sd-system-color-impression-on-primary-container: #FFFFFF;--colors-sd-system-color-impression-secondary: #AEEAD5;--colors-sd-system-color-impression-on-secondary: #000000;--colors-sd-system-color-impression-secondary-container: #AEEAD5;--colors-sd-system-color-impression-on-secondary-container: #000000;--colors-sd-system-color-impression-tertiary: #EFEEEB;--colors-sd-system-color-impression-on-tertiary: #000000;--colors-sd-system-color-impression-tertiary-container: #EFEEEB;--colors-sd-system-color-impression-on-tertiary-container: #000000;--colors-sd-system-color-impression-notice: #FFE600;--colors-sd-system-color-impression-on-notice: #000000;--colors-sd-system-color-impression-notice-container: #FFE600;--colors-sd-system-color-impression-on-notice-container: #000000;--colors-sd-system-color-impression-negative: #CE0037;--colors-sd-system-color-impression-on-negative: #FFFFFF;--colors-sd-system-color-impression-negative-container: #FCD6D3;--colors-sd-system-color-impression-on-negative-container: #000000;--colors-sd-system-color-impression-positive: #40A683;--colors-sd-system-color-impression-on-positive: #FFFFFF;--colors-sd-system-color-impression-positive-container: #40A683;--colors-sd-system-color-impression-on-positive-container: #FFFFFF;--colors-sd-system-color-component-surface: #FFFFFF;--colors-sd-system-color-component-on-surface: #000000;--colors-sd-system-color-component-on-surface-variant: #696966;--colors-sd-system-color-component-inverse-surface: #232322;--colors-sd-system-color-component-inverse-on-surface: #FFFFFF;--colors-sd-system-color-component-outline: #C8C7C2;--colors-sd-system-color-component-outline-variant: #8C8B87;--colors-sd-system-color-component-scrim: #00000033;--colors-sd-system-color-interaction-disabled: #EFEEEB;--colors-sd-system-color-interaction-disabled-on-surface: #AFAEAA;--colors-sd-system-color-interaction-selected-surface: #AEEAD5;--colors-sd-system-color-interaction-hovered: #00000033;--colors-sd-system-color-interaction-hovered-variant: #0000000D;--colors-sd-system-color-interaction-hovered-on-primary: #FFFFFF99 }[data-panda-theme=kurikawa]{--colors-sd-system-color-impression-primary: #803510;--colors-sd-system-color-impression-on-primary: #FFFFFF;--colors-sd-system-color-impression-primary-container: #803510;--colors-sd-system-color-impression-on-primary-container: #FFFFFF;--colors-sd-system-color-impression-secondary: #F7C6B0;--colors-sd-system-color-impression-on-secondary: #000000;--colors-sd-system-color-impression-secondary-container: #F7C6B0;--colors-sd-system-color-impression-on-secondary-container: #000000;--colors-sd-system-color-impression-tertiary: #F7EDE2;--colors-sd-system-color-impression-on-tertiary: #000000;--colors-sd-system-color-impression-tertiary-container: #F7EDE2;--colors-sd-system-color-impression-on-tertiary-container: #000000;--colors-sd-system-color-impression-notice: #FFE600;--colors-sd-system-color-impression-on-notice: #000000;--colors-sd-system-color-impression-notice-container: #FFE600;--colors-sd-system-color-impression-on-notice-container: #000000;--colors-sd-system-color-impression-negative: #CE0037;--colors-sd-system-color-impression-on-negative: #FFFFFF;--colors-sd-system-color-impression-negative-container: #FCD6D3;--colors-sd-system-color-impression-on-negative-container: #000000;--colors-sd-system-color-impression-positive: #40A683;--colors-sd-system-color-impression-on-positive: #FFFFFF;--colors-sd-system-color-impression-positive-container: #40A683;--colors-sd-system-color-impression-on-positive-container: #FFFFFF;--colors-sd-system-color-component-surface: #FFFFFF;--colors-sd-system-color-component-on-surface: #000000;--colors-sd-system-color-component-on-surface-variant: #696966;--colors-sd-system-color-component-inverse-surface: #232322;--colors-sd-system-color-component-inverse-on-surface: #FFFFFF;--colors-sd-system-color-component-outline: #C8C7C2;--colors-sd-system-color-component-outline-variant: #8C8B87;--colors-sd-system-color-component-scrim: #00000033;--colors-sd-system-color-interaction-disabled: #EFEEEB;--colors-sd-system-color-interaction-disabled-on-surface: #AFAEAA;--colors-sd-system-color-interaction-selected-surface: #F7C6B0;--colors-sd-system-color-interaction-hovered: #00000033;--colors-sd-system-color-interaction-hovered-variant: #0000000D;--colors-sd-system-color-interaction-hovered-on-primary: #FFFFFF99 }[data-panda-theme=sumire]{--colors-sd-system-color-impression-primary: #733B85;--colors-sd-system-color-impression-on-primary: #FFFFFF;--colors-sd-system-color-impression-primary-container: #733B85;--colors-sd-system-color-impression-on-primary-container: #FFFFFF;--colors-sd-system-color-impression-secondary: #DCBDE4;--colors-sd-system-color-impression-on-secondary: #000000;--colors-sd-system-color-impression-secondary-container: #DCBDE4;--colors-sd-system-color-impression-on-secondary-container: #000000;--colors-sd-system-color-impression-tertiary: #073165;--colors-sd-system-color-impression-on-tertiary: #FFFFFF;--colors-sd-system-color-impression-tertiary-container: #073165;--colors-sd-system-color-impression-on-tertiary-container: #FFFFFF;--colors-sd-system-color-impression-notice: #FFE600;--colors-sd-system-color-impression-on-notice: #000000;--colors-sd-system-color-impression-notice-container: #FFE600;--colors-sd-system-color-impression-on-notice-container: #000000;--colors-sd-system-color-impression-negative: #CE0037;--colors-sd-system-color-impression-on-negative: #FFFFFF;--colors-sd-system-color-impression-negative-container: #FCD6D3;--colors-sd-system-color-impression-on-negative-container: #000000;--colors-sd-system-color-impression-positive: #40A683;--colors-sd-system-color-impression-on-positive: #FFFFFF;--colors-sd-system-color-impression-positive-container: #40A683;--colors-sd-system-color-impression-on-positive-container: #FFFFFF;--colors-sd-system-color-component-surface: #FFFFFF;--colors-sd-system-color-component-on-surface: #000000;--colors-sd-system-color-component-on-surface-variant: #696966;--colors-sd-system-color-component-inverse-surface: #232322;--colors-sd-system-color-component-inverse-on-surface: #FFFFFF;--colors-sd-system-color-component-outline: #C8C7C2;--colors-sd-system-color-component-outline-variant: #8C8B87;--colors-sd-system-color-component-scrim: #00000033;--colors-sd-system-color-interaction-disabled: #EFEEEB;--colors-sd-system-color-interaction-disabled-on-surface: #AFAEAA;--colors-sd-system-color-interaction-selected-surface: #DCBDE4;--colors-sd-system-color-interaction-hovered: #00000033;--colors-sd-system-color-interaction-hovered-variant: #0000000D;--colors-sd-system-color-interaction-hovered-on-primary: #FFFFFF99 }[data-panda-theme=tsutsuji]{--colors-sd-system-color-impression-primary: #B9336B;--colors-sd-system-color-impression-on-primary: #FFFFFF;--colors-sd-system-color-impression-primary-container: #F5C1D1;--colors-sd-system-color-impression-on-primary-container: #000000;--colors-sd-system-color-impression-secondary: #F6D7E0;--colors-sd-system-color-impression-on-secondary: #000000;--colors-sd-system-color-impression-secondary-container: #F6D7E0;--colors-sd-system-color-impression-on-secondary-container: #000000;--colors-sd-system-color-impression-tertiary: #401026;--colors-sd-system-color-impression-on-tertiary: #FFFFFF;--colors-sd-system-color-impression-tertiary-container: #401026;--colors-sd-system-color-impression-on-tertiary-container: #FFFFFF;--colors-sd-system-color-impression-notice: #FFE600;--colors-sd-system-color-impression-on-notice: #000000;--colors-sd-system-color-impression-notice-container: #FFE600;--colors-sd-system-color-impression-on-notice-container: #000000;--colors-sd-system-color-impression-negative: #CE0037;--colors-sd-system-color-impression-on-negative: #FFFFFF;--colors-sd-system-color-impression-negative-container: #FCD6D3;--colors-sd-system-color-impression-on-negative-container: #000000;--colors-sd-system-color-impression-positive: #40A683;--colors-sd-system-color-impression-on-positive: #FFFFFF;--colors-sd-system-color-impression-positive-container: #40A683;--colors-sd-system-color-impression-on-positive-container: #FFFFFF;--colors-sd-system-color-component-surface: #FFFFFF;--colors-sd-system-color-component-on-surface: #000000;--colors-sd-system-color-component-on-surface-variant: #696966;--colors-sd-system-color-component-inverse-surface: #232322;--colors-sd-system-color-component-inverse-on-surface: #FFFFFF;--colors-sd-system-color-component-outline: #C8C7C2;--colors-sd-system-color-component-outline-variant: #8C8B87;--colors-sd-system-color-component-scrim: #00000033;--colors-sd-system-color-interaction-disabled: #EFEEEB;--colors-sd-system-color-interaction-disabled-on-surface: #AFAEAA;--colors-sd-system-color-interaction-selected-surface: #F6D7E0;--colors-sd-system-color-interaction-hovered: #00000033;--colors-sd-system-color-interaction-hovered-variant: #0000000D;--colors-sd-system-color-interaction-hovered-on-primary: #FFFFFF99 }@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}@layer utilities{@layer compositions{.textStyle_sd\.system\.typography\.body\.medium_compact{font-size:16px;font-weight:400;font-family:inherit;line-height:1.6}.textStyle_sd\.system\.typography\.label\.extraLarge_compact{font-size:16px;font-weight:400;font-family:inherit;line-height:1}.textStyle_sd\.system\.typography\.label\.small_compact{font-size:11px;font-weight:400;font-family:inherit;line-height:1}.textStyle_sd\.system\.typography\.label\.medium_compact{font-size:12px;font-weight:400;font-family:inherit;line-height:1}.textStyle_sd\.system\.typography\.label\.large_compact{font-size:14px;font-weight:400;font-family:inherit;line-height:1}.textStyle_sd\.system\.typography\.body\.extraSmall_compact{font-size:12px;font-weight:400;font-family:inherit;line-height:1.4}.textStyle_sd\.system\.typography\.title\.large_compact{font-size:22px;font-weight:700;font-family:inherit;line-height:1.6}.textStyle_sd\.system\.typography\.title\.small_compact{font-size:16px;font-weight:700;font-family:inherit;line-height:1.6}.textStyle_sd\.system\.typography\.body\.small_compact{font-size:14px;font-weight:400;font-family:inherit;line-height:1.6}.textStyle_sd\.system\.typography\.title\.medium_compact{font-size:19px;font-weight:700;font-family:inherit;line-height:1.6}.expanded\:textStyle_sd\.system\.typography\.body\.medium_expanded:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:14px;font-weight:400;font-family:inherit;line-height:1.6}.expanded\:textStyle_sd\.system\.typography\.body\.extraSmall_expanded:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:12px;font-weight:400;font-family:inherit;line-height:1.4}.expanded\:textStyle_sd\.system\.typography\.label\.extraLarge_expanded:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:14px;font-weight:400;font-family:inherit;line-height:1}.expanded\:textStyle_sd\.system\.typography\.label\.small_expanded:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:11px;font-weight:400;font-family:inherit;line-height:1}.expanded\:textStyle_sd\.system\.typography\.title\.large_expanded:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:18px;font-weight:700;font-family:inherit;line-height:1.6}.expanded\:textStyle_sd\.system\.typography\.body\.medium_compact:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:16px;font-weight:400;font-family:inherit;line-height:1.6}.expanded\:textStyle_sd\.system\.typography\.label\.large_expanded:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:13px;font-weight:400;font-family:inherit;line-height:1}.expanded\:textStyle_sd\.system\.typography\.body\.small_expanded:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:13px;font-weight:400;font-family:inherit;line-height:1.6}.expanded\:textStyle_sd\.system\.typography\.title\.medium_expanded:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:16px;font-weight:700;font-family:inherit;line-height:1.6}@media screen and (min-width: 48rem){.expanded\:textStyle_sd\.system\.typography\.label\.small_expanded{font-size:11px;font-weight:400;font-family:inherit;line-height:1}.expanded\:textStyle_sd\.system\.typography\.label\.medium_expanded{font-size:12px;font-weight:400;font-family:inherit;line-height:1}.expanded\:textStyle_sd\.system\.typography\.label\.large_expanded{font-size:13px;font-weight:400;font-family:inherit;line-height:1}.expanded\:textStyle_sd\.system\.typography\.body\.medium_expanded{font-size:14px;font-weight:400;font-family:inherit;line-height:1.6}.expanded\:textStyle_sd\.system\.typography\.label\.small_compact{font-size:11px;font-weight:400;font-family:inherit;line-height:1}.expanded\:textStyle_sd\.system\.typography\.title\.small_expanded{font-size:14px;font-weight:700;font-family:inherit;line-height:1.6}.expanded\:textStyle_sd\.system\.typography\.body\.small_expanded{font-size:13px;font-weight:400;font-family:inherit;line-height:1.6}.expanded\:textStyle_sd\.system\.typography\.body\.extraSmall_expanded{font-size:12px;font-weight:400;font-family:inherit;line-height:1.4}}@media screen and (min-width: 48rem){.expanded\:expanded\:textStyle_sd\.system\.typography\.body\.medium_expanded:is([aria-expanded=true],[data-expanded],[data-state=expanded]){font-size:14px;font-weight:400;font-family:inherit;line-height:1.6}}}.d_flex{display:flex}.w_100\%{width:100%}.gap_sd\.system\.dimension\.spacing\.extraSmall{gap:var(--spacing-sd-system-dimension-spacing-extra-small)}.px_sd\.system\.dimension\.spacing\.medium{padding-inline:var(--spacing-sd-system-dimension-spacing-medium)}.py_sd\.system\.dimension\.spacing\.small{padding-block:var(--spacing-sd-system-dimension-spacing-small)}.cursor_pointer{cursor:pointer}.flex_1{flex:1 1 0%}.ta_left{text-align:left}.c_sd\.system\.color\.component\.onSurface{color:var(--colors-sd-system-color-component-on-surface)}.flex_0_0_24px{flex:0 0 24px}.trs_transform_0\.2s{transition:transform .2s}.trf_rotate\(-90deg\){transform:rotate(-90deg)}.w_24{width:24px}.bdr_50\%{border-radius:50%}.h_24{height:24px}.w_40{width:40px}.h_40{height:40px}.w_80{width:80px}.h_80{height:80px}.h_100\%{height:100%}.d_inline-flex{display:inline-flex}.gap_2px{gap:2px}.bdr_sd\.system\.dimension\.radius\.extraLarge{border-radius:var(--radii-sd-system-dimension-radius-extra-large)}.bg_sd\.system\.color\.interaction\.hoveredVariant{background:var(--colors-sd-system-color-interaction-hovered-variant)}.h_16px{height:16px}.h_24px{height:24px}.h_32px{height:32px}.bg_sd\.reference\.color\.scale\.gray\.600{background:var(--colors-sd-reference-color-scale-gray-600)}.c_sd\.system\.color\.component\.inverseOnSurface{color:var(--colors-sd-system-color-component-inverse-on-surface)}.bg_sd\.reference\.color\.scale\.blue\.600{background:var(--colors-sd-reference-color-scale-blue-600)}.bg_sd\.reference\.color\.scale\.green\.600{background:var(--colors-sd-reference-color-scale-green-600)}.bg_sd\.reference\.color\.scale\.yellow\.600{background:var(--colors-sd-reference-color-scale-yellow-600)}.bg_sd\.reference\.color\.scale\.chestnut\.600{background:var(--colors-sd-reference-color-scale-chestnut-600)}.bg_sd\.reference\.color\.scale\.red\.600{background:var(--colors-sd-reference-color-scale-red-600)}.bg_sd\.reference\.color\.scale\.gray\.100{background:var(--colors-sd-reference-color-scale-gray-100)}.c_sd\.reference\.color\.scale\.gray\.800{color:var(--colors-sd-reference-color-scale-gray-800)}.bg_sd\.reference\.color\.scale\.blue\.100{background:var(--colors-sd-reference-color-scale-blue-100)}.c_sd\.reference\.color\.scale\.blue\.800{color:var(--colors-sd-reference-color-scale-blue-800)}.bg_sd\.reference\.color\.scale\.green\.100{background:var(--colors-sd-reference-color-scale-green-100)}.c_sd\.reference\.color\.scale\.green\.800{color:var(--colors-sd-reference-color-scale-green-800)}.bg_sd\.reference\.color\.scale\.yellow\.100{background:var(--colors-sd-reference-color-scale-yellow-100)}.c_sd\.reference\.color\.scale\.yellow\.800{color:var(--colors-sd-reference-color-scale-yellow-800)}.bg_sd\.reference\.color\.scale\.chestnut\.100{background:var(--colors-sd-reference-color-scale-chestnut-100)}.c_sd\.reference\.color\.scale\.chestnut\.800{color:var(--colors-sd-reference-color-scale-chestnut-800)}.bg_sd\.reference\.color\.scale\.red\.100{background:var(--colors-sd-reference-color-scale-red-100)}.c_sd\.reference\.color\.scale\.red\.800{color:var(--colors-sd-reference-color-scale-red-800)}.c_currentColor{color:currentColor}.d_grid{display:grid}.p_sd\.system\.dimension\.spacing\.small{padding:var(--spacing-sd-system-dimension-spacing-small)}.bdr_sd\.system\.dimension\.radius\.medium{border-radius:var(--radii-sd-system-dimension-radius-medium)}.bg_sd\.system\.color\.component\.surface{background:var(--colors-sd-system-color-component-surface)}.bg_sd\.system\.color\.impression\.negativeContainer{background:var(--colors-sd-system-color-impression-negative-container)}.c_sd\.system\.color\.impression\.onNegativeContainer{color:var(--colors-sd-system-color-impression-on-negative-container)}.bg_sd\.system\.color\.impression\.noticeContainer{background:var(--colors-sd-system-color-impression-notice-container)}.c_sd\.system\.color\.impression\.onNoticeContainer{color:var(--colors-sd-system-color-impression-on-notice-container)}.c_sd\.system\.color\.impression\.negative{color:var(--colors-sd-system-color-impression-negative)}.grid-area_2_\/_2_\/_3_\/_3{grid-area:2 / 2 / 3 / 3}.h_64{height:64px}.bd-t_1px_solid{border-top:1px solid}.gap_sd\.system\.dimension\.spacing\.twoExtraSmall{gap:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.pos_relative{position:relative}.c_sd\.system\.color\.impression\.primary{color:var(--colors-sd-system-color-impression-primary)}.pos_absolute{position:absolute}.bdr_sd\.system\.dimension\.radius\.full{border-radius:var(--radii-sd-system-dimension-radius-full)}.ov_hidden{overflow:hidden}.bg_sd\.system\.color\.impression\.primaryContainer{background:var(--colors-sd-system-color-impression-primary-container)}.c_sd\.system\.color\.impression\.onPrimaryContainer{color:var(--colors-sd-system-color-impression-on-primary-container)}.h_48{height:48px}.px_sd\.system\.dimension\.spacing\.extraLarge{padding-inline:var(--spacing-sd-system-dimension-spacing-extra-large)}.h_32{height:32px}.px_sd\.system\.dimension\.spacing\.small{padding-inline:var(--spacing-sd-system-dimension-spacing-small)}.py_sd\.system\.dimension\.spacing\.twoExtraSmall{padding-block:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.z_sd\.system\.elevation\.zIndex\.base{z-index:var(--z-index-sd-system-elevation-z-index-base)}.c_white{color:#fff}.c_gray{color:gray}.p_2px{padding:2px}.gap_sd\.system\.dimension\.spacing\.medium{gap:var(--spacing-sd-system-dimension-spacing-medium)}.c_sd\.system\.color\.component\.outline{color:var(--colors-sd-system-color-component-outline)}.flex-flow_column{flex-flow:column}.c_sd\.system\.color\.component\.onSurfaceVariant{color:var(--colors-sd-system-color-component-on-surface-variant)}.min-h_160px{min-height:160px}.gap_sd\.system\.dimension\.spacing\.twoExtraLarge{gap:var(--spacing-sd-system-dimension-spacing-two-extra-large)}.grid-c_span_2{grid-column:span 2}.order_-1{order:-1}.--thickness_1px{--thickness: 1px}.bd_none{border:none}.h_sd\.reference\.dimension\.scale\.1{height:var(--sizes-sd-reference-dimension-scale-1)}.w_sd\.reference\.dimension\.scale\.1{width:var(--sizes-sd-reference-dimension-scale-1)}.min-h_10px{min-height:10px}.bg_sd\.system\.color\.component\.scrim{background:var(--colors-sd-system-color-component-scrim)}.pos_fixed{position:fixed}.inset_0{top:0;right:0;bottom:0;left:0}.z_sd\.system\.elevation\.zIndex\.modal{z-index:var(--z-index-sd-system-elevation-z-index-modal)}.w_calc\(100\%_-_\{spacing\.sd\.system\.dimension\.spacing\.extraLarge\}\){width:calc(100% - var(--spacing-sd-system-dimension-spacing-extra-large))}.max-w_375px{max-width:375px}.h_100vh{height:100vh}.bx-sh_sd\.system\.elevation\.shadow\.level5{box-shadow:var(--shadows-sd-system-elevation-shadow-level5)}.min-w_100\%{min-width:100%}.max-w_100\%{max-width:100%}.p_sd\.system\.dimension\.spacing\.twoExtraSmall{padding:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.bx-sh_sd\.system\.elevation\.shadow\.level1{box-shadow:var(--shadows-sd-system-elevation-shadow-level1)}.ring_none{outline:2px solid transparent;outline-offset:2px}.w_240{width:240px}.h_48px{height:48px}.gap_sd\.system\.dimension\.spacing\.small{gap:var(--spacing-sd-system-dimension-spacing-small)}.py_sd\.system\.dimension\.spacing\.extraSmall{padding-block:var(--spacing-sd-system-dimension-spacing-extra-small)}.ps_sd\.system\.dimension\.spacing\.medium{padding-inline-start:var(--spacing-sd-system-dimension-spacing-medium)}.w_\{spacing\.sd\.reference\.dimension\.scale\.17\}{width:var(--spacing-sd-reference-dimension-scale-17)}.h_\{spacing\.sd\.reference\.dimension\.scale\.17\}{height:var(--spacing-sd-reference-dimension-scale-17)}.w_\{spacing\.sd\.reference\.dimension\.scale\.13\}{width:var(--spacing-sd-reference-dimension-scale-13)}.h_\{spacing\.sd\.reference\.dimension\.scale\.13\}{height:var(--spacing-sd-reference-dimension-scale-13)}.w_\{spacing\.sd\.reference\.dimension\.scale\.10\}{width:var(--spacing-sd-reference-dimension-scale-10)}.h_\{spacing\.sd\.reference\.dimension\.scale\.10\}{height:var(--spacing-sd-reference-dimension-scale-10)}.min-h_48{min-height:48px}.min-h_38{min-height:38px}.min-w_24{min-width:24px}.trf_translate\(-50\%\,_-50\%\){transform:translate(-50%,-50%)}.w_calc\(100\%_-_\{spacing\.sd\.system\.dimension\.spacing\.large\}_\*_2\){width:calc(100% - var(--spacing-sd-system-dimension-spacing-large) * 2)}.max-w_408px{max-width:408px}.c_sd\.system\.color\.impression\.onNegative{color:var(--colors-sd-system-color-impression-on-negative)}.px_sd\.system\.dimension\.spacing\.twoExtraSmall{padding-inline:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.h_16{height:16px}.min-w_16{min-width:16px}.px_sd\.system\.dimension\.spacing\.extraSmall{padding-inline:var(--spacing-sd-system-dimension-spacing-extra-small)}.h_8{height:8px}.px_0{padding-inline:0}.min-w_8{min-width:8px}.anim_1s_linear_infinite_spin{animation:1s linear infinite spin}.stk_sd\.reference\.color\.scale\.gray\.400{stroke:var(--colors-sd-reference-color-scale-gray-400)}.w_16px{width:16px}.w_24px{width:24px}.w_96px{width:96px}.h_96px{height:96px}.stk_sd\.reference\.color\.scale\.white\.1000{stroke:var(--colors-sd-reference-color-scale-white-1000)}.c_sd\.system\.color\.component\.outlineVariant{color:var(--colors-sd-system-color-component-outline-variant)}.tov_ellipsis{text-overflow:ellipsis}.d_inline-grid{display:inline-grid}.z_sd\.system\.elevation\.zIndex\.dropdown{z-index:var(--z-index-sd-system-elevation-z-index-dropdown)}.w_40px{width:40px}.w_20px{width:20px}.w_sd\.system\.dimension\.spacing\.large{width:var(--sizes-sd-system-dimension-spacing-large)}.op_0{opacity:0}.h_sd\.system\.dimension\.spacing\.large{height:var(--sizes-sd-system-dimension-spacing-large)}.white-space_nowrap{white-space:nowrap}.bdr_sd\.system\.dimension\.radius\.small{border-radius:var(--radii-sd-system-dimension-radius-small)}.w_52{width:52px}.d_block{display:block}.w_20{width:20px}.h_20{height:20px}.my_5{margin-block:5px}.mx_6{margin-inline:6px}.w_160{width:160px}.h_44{height:44px}.bd-b_2px_solid{border-bottom:2px solid}.w_8{width:8px}.w_16{width:16px}.field-sizing_content{field-sizing:content}.min-h_2lh{min-height:2lh}.ta_right{text-align:right}.place-items_center{place-items:center}.w_48px{width:48px}.gap_10px{gap:10px}.bx-sh_sd\.system\.elevation\.shadow\.level3{box-shadow:var(--shadows-sd-system-elevation-shadow-level3)}.bg_sd\.system\.color\.component\.inverseSurface{background:var(--colors-sd-system-color-component-inverse-surface)}.c_sd\.system\.color\.impression\.positive{color:var(--colors-sd-system-color-impression-positive)}.gap_8px{gap:8px}.flex-d_row-reverse{flex-direction:row-reverse}.pt_sd\.system\.dimension\.spacing\.small{padding-top:var(--spacing-sd-system-dimension-spacing-small)}.pb_sd\.system\.dimension\.spacing\.medium{padding-bottom:var(--spacing-sd-system-dimension-spacing-medium)}.flex-d_column{flex-direction:column}.ai_center{align-items:center}.jc_center{justify-content:center}.bg-c_sd\.reference\.color\.scale\.blue\.200{background-color:var(--colors-sd-reference-color-scale-blue-200)}.fs_11{font-size:11px}.fs_19{font-size:19px}.fs_37{font-size:37px}.pr_sd\.system\.dimension\.spacing\.twoExtraSmall{padding-right:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.pl_sd\.system\.dimension\.spacing\.twoExtraSmall{padding-left:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.pr_sd\.system\.dimension\.spacing\.extraSmall{padding-right:var(--spacing-sd-system-dimension-spacing-extra-small)}.pl_sd\.system\.dimension\.spacing\.extraSmall{padding-left:var(--spacing-sd-system-dimension-spacing-extra-small)}.pr_sd\.system\.dimension\.spacing\.medium{padding-right:var(--spacing-sd-system-dimension-spacing-medium)}.pl_sd\.system\.dimension\.spacing\.medium{padding-left:var(--spacing-sd-system-dimension-spacing-medium)}.grid-tc_24px_1fr{grid-template-columns:24px 1fr}.cg_sd\.system\.dimension\.spacing\.twoExtraSmall{column-gap:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.rg_sd\.system\.dimension\.spacing\.extraSmall{row-gap:var(--spacing-sd-system-dimension-spacing-extra-small)}.bd-w_sd\.system\.dimension\.border\.medium{border-width:var(--border-widths-sd-system-dimension-border-medium)}.border-style_solid{border-style:solid}.bd-c_sd\.system\.color\.component\.outline{border-color:var(--colors-sd-system-color-component-outline)}.bd-c_sd\.system\.color\.impression\.negativeContainer{border-color:var(--colors-sd-system-color-impression-negative-container)}.bd-c_sd\.system\.color\.impression\.noticeContainer{border-color:var(--colors-sd-system-color-impression-notice-container)}.jc_space-around{justify-content:space-around}.bd-t-c_sd\.system\.color\.component\.outline{border-top-color:var(--colors-sd-system-color-component-outline)}.top_-6px{top:-6px}.right_4px{right:4px}.top_-2\.5px{top:-2.5px}.ring-w_sd\.system\.dimension\.border\.medium{outline-width:var(--border-widths-sd-system-dimension-border-medium)}.outline-style_solid{outline-style:solid}.ring-c_sd\.system\.color\.component\.outline{outline-color:var(--colors-sd-system-color-component-outline)}.bg-c_sd\.system\.color\.component\.surface{background-color:var(--colors-sd-system-color-component-surface)}.pl_sd\.system\.dimension\.spacing\.extraLarge{padding-left:var(--spacing-sd-system-dimension-spacing-extra-large)}.pr_sd\.system\.dimension\.spacing\.extraLarge{padding-right:var(--spacing-sd-system-dimension-spacing-extra-large)}.flex-sh_0{flex-shrink:0}.mt_sd\.system\.dimension\.spacing\.twoExtraSmall{margin-top:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.ai_flex-start{align-items:flex-start}.bg-c_sd\.reference\.color\.scale\.gray\.200{background-color:var(--colors-sd-reference-color-scale-gray-200)}.jc_space-between{justify-content:space-between}.grid-tc_1fr{grid-template-columns:1fr}.grid-tc_auto_1fr{grid-template-columns:auto 1fr}.grid-tc_1fr_1fr{grid-template-columns:1fr 1fr}.as_flex-end{align-self:flex-end}.ai_baseline{align-items:baseline}.border-block-end-width_var\(--thickness\){border-block-end-width:var(--thickness)}.bd-c_sd\.reference\.color\.scale\.gray\.200{border-color:var(--colors-sd-reference-color-scale-gray-200)}.bd-c_sd\.reference\.color\.scale\.gray\.300{border-color:var(--colors-sd-reference-color-scale-gray-300)}.bd-c_sd\.system\.color\.component\.outlineVariant{border-color:var(--colors-sd-system-color-component-outline-variant)}.border-bottom-style_solid{border-bottom-style:solid}.border-left-style_solid{border-left-style:solid}.top_0{top:0}.left_0{left:0}.jc_flex-start{justify-content:flex-start}.right_0{right:0}.jc_flex-end{justify-content:flex-end}.pr_sd\.system\.dimension\.spacing\.small{padding-right:var(--spacing-sd-system-dimension-spacing-small)}.ml_2px{margin-left:2px}.bg-c_sd\.system\.color\.impression\.primaryContainer{background-color:var(--colors-sd-system-color-impression-primary-container)}.ring-c_transparent{outline-color:transparent}.flex-g_1{flex-grow:1}.right_sd\.system\.dimension\.spacing\.medium{right:var(--spacing-sd-system-dimension-spacing-medium)}.top_sd\.system\.dimension\.spacing\.extraSmall{top:var(--spacing-sd-system-dimension-spacing-extra-small)}.top_50\%{top:50%}.left_50\%{left:50%}.pt_sd\.system\.dimension\.spacing\.extraLarge{padding-top:var(--spacing-sd-system-dimension-spacing-extra-large)}.pb_sd\.system\.dimension\.spacing\.large{padding-bottom:var(--spacing-sd-system-dimension-spacing-large)}.bg-c_sd\.system\.color\.impression\.negative{background-color:var(--colors-sd-system-color-impression-negative)}.bg-c_sd\.system\.color\.impression\.primary{background-color:var(--colors-sd-system-color-impression-primary)}.lh_24px{line-height:24px}.lh_1{line-height:1}.grid-tc_auto_1fr_auto{grid-template-columns:auto 1fr auto}.pb_sd\.system\.dimension\.spacing\.small{padding-bottom:var(--spacing-sd-system-dimension-spacing-small)}.pt_sd\.system\.dimension\.spacing\.twoExtraSmall{padding-top:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.pb_sd\.system\.dimension\.spacing\.twoExtraSmall{padding-bottom:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.scr-pl_sd\.system\.dimension\.spacing\.twoExtraSmall{scroll-padding-left:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.pb_sd\.system\.dimension\.spacing\.extraSmall{padding-bottom:var(--spacing-sd-system-dimension-spacing-extra-small)}.pt_sd\.system\.dimension\.spacing\.extraSmall{padding-top:var(--spacing-sd-system-dimension-spacing-extra-small)}.grid-tc_1fr_auto{grid-template-columns:1fr auto}.bg-c_sd\.system\.color\.interaction\.disabled{background-color:var(--colors-sd-system-color-interaction-disabled)}.bd-w_1{border-width:1px}.trs-dur_\.2s{--transition-duration: .2s;transition-duration:.2s}.trs-prop_background\,_borderColor{--transition-prop: background, borderColor;transition-property:background,borderColor}.trs-tmf_cubic-bezier\(\.2\,_0\,_0\,_1\){--transition-easing: cubic-bezier(.2, 0, 0, 1);transition-timing-function:cubic-bezier(.2,0,0,1)}.trs-dur_\.3s{--transition-duration: .3s;transition-duration:.3s}.trs-prop_transform\,_borderColor{--transition-prop: transform, borderColor;transition-property:transform,borderColor}.lh_sd\.reference\.typography\.lineHeight\.tight{line-height:var(--line-heights-sd-reference-typography-line-height-tight)}.trs-prop_color\,_border-color{--transition-prop: color, border-color;transition-property:color,border-color}.bd-b-c_transparent{border-bottom-color:transparent}.bg-c_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.interaction\.hoveredOnPrimary\}\,_\{colors\.sd\.system\.color\.impression\.negativeContainer\}\)\;{background-color:color-mix(in srgb,var(--colors-sd-system-color-interaction-hovered-on-primary),var(--colors-sd-system-color-impression-negative-container))}.grid-tc_auto{grid-template-columns:auto}.mt_sd\.system\.dimension\.spacing\.extraSmall{margin-top:var(--spacing-sd-system-dimension-spacing-extra-small)}.mr_sd\.system\.dimension\.spacing\.twoExtraSmall{margin-right:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.mb_sd\.system\.dimension\.spacing\.twoExtraSmall{margin-bottom:var(--spacing-sd-system-dimension-spacing-two-extra-small)}.ml_sd\.system\.dimension\.spacing\.small{margin-left:var(--spacing-sd-system-dimension-spacing-small)}.grid-tc_auto_1fr_auto_auto{grid-template-columns:auto 1fr auto auto}.flex-d_row{flex-direction:row}.bd-c_sd\.system\.color\.impression\.negative{border-color:var(--colors-sd-system-color-impression-negative)}.open\:trf_rotate\(180deg\):is([open],[data-open],[data-state=open]){transform:rotate(180deg)}.open\:trf_rotate\(0deg\):is([open],[data-open],[data-state=open]){transform:rotate(0)}.\[\&_svg\]\:w_sd\.reference\.dimension\.scale\.8 svg{width:var(--sizes-sd-reference-dimension-scale-8)}.\[\&_svg\]\:h_sd\.reference\.dimension\.scale\.8 svg{height:var(--sizes-sd-reference-dimension-scale-8)}.disabled\:cursor_not-allowed:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed}.disabled\:bg_sd\.system\.color\.interaction\.disabled:is(:disabled,[disabled],[data-disabled]){background:var(--colors-sd-system-color-interaction-disabled)}.disabled\:c_sd\.system\.color\.interaction\.disabledOnSurface:is(:disabled,[disabled],[data-disabled]){color:var(--colors-sd-system-color-interaction-disabled-on-surface)}.disabled\:ring_none:is(:disabled,[disabled],[data-disabled]){outline:2px solid transparent;outline-offset:2px}.\[\&_\.checkmark\]\:c_sd\.system\.color\.impression\.onPrimaryContainer .checkmark{color:var(--colors-sd-system-color-impression-on-primary-container)}.disabled\:c_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.component\.outline\}\,_\{colors\.sd\.system\.color\.interaction\.hoveredOnPrimary\}\)\;:is(:disabled,[disabled],[data-disabled]){color:color-mix(in srgb,var(--colors-sd-system-color-component-outline),var(--colors-sd-system-color-interaction-hovered-on-primary))}.disabled\:ring_solid:is(:disabled,[disabled],[data-disabled]){outline:solid}.disabled\:ring-o_0px:is(:disabled,[disabled],[data-disabled]){outline-offset:0px}.disabled\:bg_transparent:is(:disabled,[disabled],[data-disabled]){background:transparent}.\[\&_svg\]\:w_sd\.reference\.dimension\.scale\.12 svg{width:var(--sizes-sd-reference-dimension-scale-12)}.\[\&_svg\]\:h_sd\.reference\.dimension\.scale\.12 svg{height:var(--sizes-sd-reference-dimension-scale-12)}.selected\:bg_sd\.system\.color\.interaction\.selectedSurface:is([aria-selected=true],[data-selected]){background:var(--colors-sd-system-color-interaction-selected-surface)}.disabled\:op_0\.3:is(:disabled,[disabled],[data-disabled]){opacity:.3}.\[\&_svg\]\:w_24px svg{width:24px}.\[\&_svg\]\:h_24px svg{height:24px}.\[\&_svg\]\:d_block svg{display:block}.\[\&_svg\]\:max-h_100\% svg{max-height:100%}.\[\&_svg\]\:max-w_100\% svg{max-width:100%}.\[\&_svg\]\:w_40px svg{width:40px}.\[\&_svg\]\:h_40px svg{height:40px}.disabled\:c_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.impression\.primary\}\,_\{colors\.sd\.system\.color\.interaction\.hoveredOnPrimary\}\)\;:is(:disabled,[disabled],[data-disabled]){color:color-mix(in srgb,var(--colors-sd-system-color-impression-primary),var(--colors-sd-system-color-interaction-hovered-on-primary))}.disabled\:c_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.component\.outlineVariant\}\,_\{colors\.sd\.system\.color\.interaction\.hoveredOnPrimary\}\)\;:is(:disabled,[disabled],[data-disabled]){color:color-mix(in srgb,var(--colors-sd-system-color-component-outline-variant),var(--colors-sd-system-color-interaction-hovered-on-primary))}.placeholder\:c_sd\.system\.color\.component\.onSurfaceVariant::placeholder,.placeholder\:c_sd\.system\.color\.component\.onSurfaceVariant[data-placeholder]{color:var(--colors-sd-system-color-component-on-surface-variant)}[data-disabled] .\[\[data-disabled\]_\&\]\:c_sd\.system\.color\.interaction\.disabledOnSurface{color:var(--colors-sd-system-color-interaction-disabled-on-surface)}[data-state=open] .\[\[data-state\=open\]_\&\]\:op_1{opacity:1}[data-placeholder-shown] .\[\[data-placeholder-shown\]_\&\]\:c_sd\.system\.color\.component\.onSurfaceVariant{color:var(--colors-sd-system-color-component-on-surface-variant)}.disabled\:cursor_default:is(:disabled,[disabled],[data-disabled]){cursor:default}.checked\:trf_translateX\(19px\):is(:checked,[data-checked],[aria-checked=true],[data-state=checked]){transform:translate(19px)}.selected\:c_sd\.system\.color\.impression\.primary:is([aria-selected=true],[data-selected]){color:var(--colors-sd-system-color-impression-primary)}.disabled\:bg-c_sd\.system\.color\.interaction\.disabled:is(:disabled,[disabled],[data-disabled]){background-color:var(--colors-sd-system-color-interaction-disabled)}.highlighted\:bg-c_sd\.system\.color\.interaction\.hoveredVariant[data-highlighted]{background-color:var(--colors-sd-system-color-interaction-hovered-variant)}.disabled\:ring-c_sd\.system\.color\.component\.outline:is(:disabled,[disabled],[data-disabled]){outline-color:var(--colors-sd-system-color-component-outline)}.disabled\:ring-w_sd\.system\.dimension\.border\.medium:is(:disabled,[disabled],[data-disabled]){outline-width:var(--border-widths-sd-system-dimension-border-medium)}.disabled\:ring-c_transparent:is(:disabled,[disabled],[data-disabled]){outline-color:transparent}.invalid\:ring-c_sd\.system\.color\.impression\.negative:is(:invalid,[data-invalid]){outline-color:var(--colors-sd-system-color-impression-negative)}.\[\&\[data-focus\=\"true\"\]_\.control\]\:bd-c_sd\.system\.color\.impression\.primary[data-focus=true] .control{border-color:var(--colors-sd-system-color-impression-primary)}.checked\:bg-c_sd\.system\.color\.impression\.primary:is(:checked,[data-checked],[aria-checked=true],[data-state=checked]){background-color:var(--colors-sd-system-color-impression-primary)}.checked\:bd-c_sd\.system\.color\.impression\.primary:is(:checked,[data-checked],[aria-checked=true],[data-state=checked]){border-color:var(--colors-sd-system-color-impression-primary)}.checked\:bd-c_sd\.system\.color\.component\.surface:is(:checked,[data-checked],[aria-checked=true],[data-state=checked]){border-color:var(--colors-sd-system-color-component-surface)}.selected\:fw_bold:is([aria-selected=true],[data-selected]){font-weight:700}.selected\:bd-b-c_sd\.system\.color\.impression\.primary:is([aria-selected=true],[data-selected]){border-bottom-color:var(--colors-sd-system-color-impression-primary)}.\[\&\:has\(\[data-focus\=\"true\"\]\)\]\:ring-w_sd\.system\.dimension\.border\.thick:has([data-focus=true]){outline-width:var(--border-widths-sd-system-dimension-border-thick)}.\[\&\:has\(\[data-focus\=\"true\"\]\)\]\:ring-c_sd\.system\.color\.impression\.primary:has([data-focus=true]){outline-color:var(--colors-sd-system-color-impression-primary)}.lastOfType\:pb_8px:last-of-type{padding-bottom:8px}.firstOfType\:pb_0px:first-of-type{padding-bottom:0}.focusWithin\:ring-w_sd\.system\.dimension\.border\.thick:focus-within{outline-width:var(--border-widths-sd-system-dimension-border-thick)}.focusWithin\:ring-c_sd\.system\.color\.impression\.primary:focus-within{outline-color:var(--colors-sd-system-color-impression-primary)}.group:has(:focus-visible) .\[\.group\:has\(\:focus-visible\)_\&\]\:ring-o_-2px{outline-offset:-2px}.group:has(:focus-visible) .\[\.group\:has\(\:focus-visible\)_\&\]\:bdr_sd\.system\.dimension\.radius\.small{border-radius:var(--radii-sd-system-dimension-radius-small)}.focusVisible\:ring_1px_solid:is(:focus-visible,[data-focus-visible]){outline:1px solid}.group:has(:focus-visible) .\[\.group\:has\(\:focus-visible\)_\&\]\:bdr_sd\.system\.dimension\.radius\.full{border-radius:var(--radii-sd-system-dimension-radius-full)}.focusVisible\:ring-o_-1px:is(:focus-visible,[data-focus-visible]){outline-offset:-1px}.group:has(:focus-visible) .\[\.group\:has\(\:focus-visible\)_\&\]\:outline-style_solid{outline-style:solid}.group:has(:focus-visible) .\[\.group\:has\(\:focus-visible\)_\&\]\:ring-w_1\.5px{outline-width:1.5px}.group:has(:focus-visible) .\[\.group\:has\(\:focus-visible\)_\&\]\:ring-c_sd\.system\.color\.impression\.primary{outline-color:var(--colors-sd-system-color-impression-primary)}.focusVisible\:ring-c_sd\.system\.color\.component\.outline:is(:focus-visible,[data-focus-visible]){outline-color:var(--colors-sd-system-color-component-outline)}.group:has(:focus-visible) .\[\.group\:has\(\:focus-visible\)_\&\]\:bg-c_sd\.system\.color\.interaction\.selectedSurface{background-color:var(--colors-sd-system-color-interaction-selected-surface)}.focus\:ring-w_sd\.system\.dimension\.border\.thick:is(:focus,[data-focus]){outline-width:var(--border-widths-sd-system-dimension-border-thick)}.focus\:ring-c_sd\.system\.color\.impression\.primary:is(:focus,[data-focus]){outline-color:var(--colors-sd-system-color-impression-primary)}.group:has(:focus-visible) .\[\.group\:has\(\:focus-visible\)_\&\]\:bd-c_sd\.system\.color\.impression\.primary{border-color:var(--colors-sd-system-color-impression-primary)}.focusVisible\:ring-w_1px:is(:focus-visible,[data-focus-visible]){outline-width:1px}.focusVisible\:outline-style_solid:is(:focus-visible,[data-focus-visible]){outline-style:solid}.hover\:bg_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.component\.surface\}\,_\{colors\.sd\.system\.color\.interaction\.hoveredVariant\}\):is(:hover,[data-hover]){background:color-mix(in srgb,var(--colors-sd-system-color-component-surface),var(--colors-sd-system-color-interaction-hovered-variant))}.hover\:bg_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.interaction\.hoveredVariant\}\,_\{colors\.sd\.system\.color\.component\.surface\}\)\;:is(:hover,[data-hover]){background:color-mix(in srgb,var(--colors-sd-system-color-interaction-hovered-variant),var(--colors-sd-system-color-component-surface))}.hover\:c_sd\.system\.color\.impression\.primary:is(:hover,[data-hover]){color:var(--colors-sd-system-color-impression-primary)}.hover\:bg-c_sd\.system\.color\.interaction\.hoveredVariant:is(:hover,[data-hover]){background-color:var(--colors-sd-system-color-interaction-hovered-variant)}.expanded\:\[\&_svg\]\:trf_rotate\(180deg\):is([aria-expanded=true],[data-expanded],[data-state=expanded]) svg{transform:rotate(180deg)}.enabled\:focusVisible\:ring-o_-1px:enabled:is(:focus-visible,[data-focus-visible]){outline-offset:-1px}.selected\:hover\:bg_sd\.system\.color\.interaction\.selectedSurface:is([aria-selected=true],[data-selected]):is(:hover,[data-hover]){background:var(--colors-sd-system-color-interaction-selected-surface)}.disabled\:selected\:bg_transparent:is(:disabled,[disabled],[data-disabled]):is([aria-selected=true],[data-selected]){background:transparent}.disabled\:placeholder\:c_sd\.system\.color\.interaction\.disabledOnSurface:is(:disabled,[disabled],[data-disabled])::placeholder,.disabled\:placeholder\:c_sd\.system\.color\.interaction\.disabledOnSurface:is(:disabled,[disabled],[data-disabled])[data-placeholder]{color:var(--colors-sd-system-color-interaction-disabled-on-surface)}[data-placeholder-shown] .disabled\:\[\[data-placeholder-shown\]_\&\]\:c_sd\.system\.color\.interaction\.disabledOnSurface:is(:disabled,[disabled],[data-disabled]){color:var(--colors-sd-system-color-interaction-disabled-on-surface)}.enabled\:hover\:bg_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.component\.surface\}\,_\{colors\.sd\.system\.color\.interaction\.hoveredVariant\}\):enabled:is(:hover,[data-hover]){background:color-mix(in srgb,var(--colors-sd-system-color-component-surface),var(--colors-sd-system-color-interaction-hovered-variant))}.enabled\:focusVisible\:ring-w_sd\.system\.dimension\.border\.medium:enabled:is(:focus-visible,[data-focus-visible]){outline-width:var(--border-widths-sd-system-dimension-border-medium)}.enabled\:focusVisible\:outline-style_solid:enabled:is(:focus-visible,[data-focus-visible]){outline-style:solid}.enabled\:focusVisible\:ring-c_sd\.system\.color\.interaction\.hovered:enabled:is(:focus-visible,[data-focus-visible]){outline-color:var(--colors-sd-system-color-interaction-hovered)}.enabled\:hover\:bg-c_sd\.system\.color\.interaction\.hoveredVariant:enabled:is(:hover,[data-hover]){background-color:var(--colors-sd-system-color-interaction-hovered-variant)}.enabled\:focusVisible\:bg-c_sd\.system\.color\.interaction\.hoveredVariant:enabled:is(:focus-visible,[data-focus-visible]){background-color:var(--colors-sd-system-color-interaction-hovered-variant)}.enabled\:focusVisible\:ring-c_sd\.system\.color\.component\.outlineVariant:enabled:is(:focus-visible,[data-focus-visible]){outline-color:var(--colors-sd-system-color-component-outline-variant)}.enabled\:hover\:bg-i_linear-gradient\(0deg\,_\{colors\.sd\.system\.color\.interaction\.hovered\}_0\%\,_\{colors\.sd\.system\.color\.interaction\.hovered\}_100\%\):enabled:is(:hover,[data-hover]){background-image:linear-gradient(0deg,var(--colors-sd-system-color-interaction-hovered) 0%,var(--colors-sd-system-color-interaction-hovered) 100%)}.enabled\:focusVisible\:bg-i_linear-gradient\(0deg\,_\{colors\.sd\.system\.color\.interaction\.hovered\}_0\%\,_\{colors\.sd\.system\.color\.interaction\.hovered\}_100\%\):enabled:is(:focus-visible,[data-focus-visible]){background-image:linear-gradient(0deg,var(--colors-sd-system-color-interaction-hovered) 0%,var(--colors-sd-system-color-interaction-hovered) 100%)}.enabled\:focusVisible\:ring-w_sd\.system\.dimension\.border\.thick:enabled:is(:focus-visible,[data-focus-visible]){outline-width:var(--border-widths-sd-system-dimension-border-thick)}.enabled\:focusVisible\:ring-c_sd\.system\.color\.impression\.primary:enabled:is(:focus-visible,[data-focus-visible]){outline-color:var(--colors-sd-system-color-impression-primary)}.enabled\:hover\:ring-c_sd\.system\.color\.interaction\.hovered:enabled:is(:hover,[data-hover]){outline-color:var(--colors-sd-system-color-interaction-hovered)}.checked\:disabled\:bg-c_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.impression\.primary\}\,_\{colors\.sd\.system\.color\.interaction\.hoveredOnPrimary\}\)\;:is(:checked,[data-checked],[aria-checked=true],[data-state=checked]):is(:disabled,[disabled],[data-disabled]){background-color:color-mix(in srgb,var(--colors-sd-system-color-impression-primary),var(--colors-sd-system-color-interaction-hovered-on-primary))}.checked\:disabled\:bd-c_transparent:is(:checked,[data-checked],[aria-checked=true],[data-state=checked]):is(:disabled,[disabled],[data-disabled]){border-color:transparent}.hover\:disabled\:c_sd\.system\.color\.interaction\.disabledOnSurface:is(:hover,[data-hover]):is(:disabled,[disabled],[data-disabled]){color:var(--colors-sd-system-color-interaction-disabled-on-surface)}.enabled\:hover\:after\:pos_absolute:enabled:is(:hover,[data-hover]):after{position:absolute}.enabled\:hover\:after\:inset_0:enabled:is(:hover,[data-hover]):after{top:0;right:0;bottom:0;left:0}.enabled\:hover\:after\:bg_sd\.system\.color\.interaction\.hovered:enabled:is(:hover,[data-hover]):after{background:var(--colors-sd-system-color-interaction-hovered)}.enabled\:focusVisible\:after\:pos_absolute:enabled:is(:focus-visible,[data-focus-visible]):after{position:absolute}.enabled\:focusVisible\:after\:inset_0:enabled:is(:focus-visible,[data-focus-visible]):after{top:0;right:0;bottom:0;left:0}.enabled\:focusVisible\:after\:bg_sd\.system\.color\.interaction\.hovered:enabled:is(:focus-visible,[data-focus-visible]):after{background:var(--colors-sd-system-color-interaction-hovered)}.disabled\:checked\:\[\&_svg\]\:c_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.impression\.primary\}\,_\{colors\.sd\.system\.color\.interaction\.hoveredOnPrimary\}\)\;:is(:disabled,[disabled],[data-disabled]):is(:checked,[data-checked],[aria-checked=true],[data-state=checked]) svg{color:color-mix(in srgb,var(--colors-sd-system-color-impression-primary),var(--colors-sd-system-color-interaction-hovered-on-primary))}.disabled\:checked\:\[\&_\.checkmark\]\:c_color-mix\(in_srgb\,_\{colors\.sd\.system\.color\.interaction\.disabled\}\,_\{colors\.sd\.system\.color\.impression\.onPrimaryContainer\}\)\;:is(:disabled,[disabled],[data-disabled]):is(:checked,[data-checked],[aria-checked=true],[data-state=checked]) .checkmark{color:color-mix(in srgb,var(--colors-sd-system-color-interaction-disabled),var(--colors-sd-system-color-impression-on-primary-container))}.enabled\:hover\:after\:content_\'\':enabled:is(:hover,[data-hover]):after{content:""}.enabled\:focusVisible\:after\:content_\'\':enabled:is(:focus-visible,[data-focus-visible]):after{content:""}@layer components{.\[\@layer_components\]\:w_min\(100\%\,_300px\){width:min(100%,300px)}.\[\@layer_components\]\:w_min\(100\%\,_150px\){width:min(100%,150px)}}@layer components;@media screen and (min-width: 48rem){.expanded\:w_44px{width:44px}.expanded\:h_44px{height:44px}.expanded\:pt_sd\.system\.dimension\.spacing\.large{padding-top:var(--spacing-sd-system-dimension-spacing-large)}.expanded\:flex-d_row-reverse{flex-direction:row-reverse}.expanded\:jc_end{justify-content:end}}}
|
package/dist/tokens/getToken.js
CHANGED
package/dist/tokens/index.js
CHANGED
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@serendie/ui",
|
|
3
3
|
"description": "Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric",
|
|
4
4
|
"license": "MIT",
|
|
5
|
-
"version": "0.1.
|
|
5
|
+
"version": "0.1.16",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
8
8
|
"scripts": {
|
|
@@ -36,8 +36,7 @@
|
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@chromatic-com/storybook": "^1.6.1",
|
|
38
38
|
"@figma/code-connect": "^1.2.1",
|
|
39
|
-
"@
|
|
40
|
-
"@serendie/design-token": "file:../design-tokens/",
|
|
39
|
+
"@serendie/design-token": "^0.2.8",
|
|
41
40
|
"@storybook/addon-designs": "^8.0.3",
|
|
42
41
|
"@storybook/addon-essentials": "^8.2.4",
|
|
43
42
|
"@storybook/addon-interactions": "^8.2.4",
|
|
@@ -54,6 +53,7 @@
|
|
|
54
53
|
"@vitejs/plugin-react": "^4.3.1",
|
|
55
54
|
"chromatic": "^11.20.2",
|
|
56
55
|
"deepmerge": "^4.3.1",
|
|
56
|
+
"release-it": "^17.11.0",
|
|
57
57
|
"storybook": "^8.2.4",
|
|
58
58
|
"typescript": "^5.5.3",
|
|
59
59
|
"vite": "^5.3.3",
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as e from "react";
|
|
2
|
-
const l = (C) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...C }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.8001 3.26101V2.05665C17.935 2.46416 21.975 6.7603 21.975 12C21.975 17.2398 17.935 21.5359 12.8001 21.9434V20.739C17.2714 20.3349 20.775 16.5766 20.775 12C20.775 7.42343 17.2714 3.66514 12.8001 3.26101ZM11.2001 20.7391C6.72868 20.335 3.22502 16.5767 3.22502 12C3.22502 7.4234 6.72868 3.66508 11.2001 3.261V2.05664C6.06507 2.46411 2.02502 6.76027 2.02502 12C2.02502 17.2398 6.06507 21.536 11.2001 21.9434V20.7391ZM12 6.72503C10.6745 6.72503 9.60002 7.79955 9.60002 9.12503C9.60002 10.4505 10.6745 11.525 12 11.525C13.3255 11.525 14.4 10.4505 14.4 9.12503C14.4 7.79955 13.3255 6.72503 12 6.72503ZM8.40002 9.12503C8.40002 7.13681 10.0118 5.52503 12 5.52503C13.9882 5.52503 15.6 7.13681 15.6 9.12503C15.6 11.1133 13.9882 12.725 12 12.725C10.0118 12.725 8.40002 11.1133 8.40002 9.12503ZM12 15.1C10.1223 15.1 8.60002 16.6223 8.60002 18.5H7.40002C7.40002 15.9595 9.45951 13.9 12 13.9C14.5405 13.9 16.6 15.9595 16.6 18.5H15.4C15.4 16.6223 13.8778 15.1 12 15.1Z", fill: "black" }));
|
|
3
|
-
export {
|
|
4
|
-
l as default
|
|
5
|
-
};
|
package/dist/assets/check.svg.js
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as e from "react";
|
|
2
|
-
const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M17.5294 8.52941L10.4991 15.5597L6.46875 11.5294L7.52941 10.4688L10.4991 13.4384L16.4688 7.46875L17.5294 8.52941Z", fill: "#279B20" }));
|
|
3
|
-
export {
|
|
4
|
-
l as default
|
|
5
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as e from "react";
|
|
2
|
-
const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("rect", { x: 2.69922, y: 2.69922, width: 18.6, height: 18.6, rx: 9.3, fill: "#279B20" }), /* @__PURE__ */ e.createElement("path", { d: "M17.2286 9.22863L10.1983 16.259L6.16797 12.2286L7.22863 11.168L10.1983 14.1376L16.168 8.16797L17.2286 9.22863Z", fill: "white" }));
|
|
3
|
-
export {
|
|
4
|
-
l as default
|
|
5
|
-
};
|
package/dist/assets/error.svg.js
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as t from "react";
|
|
2
|
-
const e = (q) => /* @__PURE__ */ t.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "#5f6368", ...q }, /* @__PURE__ */ t.createElement("path", { d: "M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" }));
|
|
3
|
-
export {
|
|
4
|
-
e as default
|
|
5
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as C from "react";
|
|
2
|
-
const t = (e) => /* @__PURE__ */ C.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ C.createElement("path", { d: "M12.0035 21.2973C10.7176 21.2973 9.50872 21.0529 8.37682 20.5641C7.24492 20.0754 6.26032 19.4121 5.42302 18.5743C4.58572 17.7364 3.92309 16.7526 3.43511 15.6229C2.94713 14.4931 2.70312 13.286 2.70312 12.0015C2.70312 10.7157 2.9475 9.50677 3.43625 8.37487C3.92498 7.24297 4.58828 6.25837 5.42613 5.42107C6.26396 4.58377 7.24775 3.92113 8.3775 3.43315C9.50725 2.94516 10.7144 2.70117 11.9989 2.70117C13.2847 2.70117 14.4936 2.94555 15.6255 3.4343C16.7574 3.92303 17.742 4.58632 18.5793 5.42417C19.4166 6.262 20.0793 7.2458 20.5673 8.37555C21.0552 9.5053 21.2992 10.7124 21.2992 11.9969C21.2992 13.2828 21.0548 14.4917 20.5661 15.6236C20.0774 16.7555 19.4141 17.7401 18.5762 18.5774C17.7384 19.4147 16.7546 20.0773 15.6249 20.5653C14.4951 21.0533 13.288 21.2973 12.0035 21.2973Z", fill: "#D61930" }), /* @__PURE__ */ C.createElement("path", { d: "M12.0035 21.2973C10.7176 21.2973 9.50872 21.0529 8.37682 20.5641C7.24492 20.0754 6.26032 19.4121 5.42302 18.5743C4.58572 17.7364 3.92309 16.7526 3.43511 15.6229C2.94713 14.4931 2.70312 13.286 2.70312 12.0015C2.70312 10.7157 2.9475 9.50677 3.43625 8.37487C3.92498 7.24297 4.58828 6.25837 5.42613 5.42107C6.26396 4.58377 7.24775 3.92113 8.3775 3.43315C9.50725 2.94516 10.7144 2.70117 11.9989 2.70117C13.2847 2.70117 14.4936 2.94555 15.6255 3.4343C16.7574 3.92303 17.742 4.58632 18.5793 5.42417C19.4166 6.262 20.0793 7.2458 20.5673 8.37555C21.0552 9.5053 21.2992 10.7124 21.2992 11.9969C21.2992 13.2828 21.0548 14.4917 20.5661 15.6236C20.0774 16.7555 19.4141 17.7401 18.5762 18.5774C17.7384 19.4147 16.7546 20.0773 15.6249 20.5653C14.4951 21.0533 13.288 21.2973 12.0035 21.2973Z", fill: "#D61930" }), /* @__PURE__ */ C.createElement("path", { d: "M12.0035 21.2973C10.7176 21.2973 9.50872 21.0529 8.37682 20.5641C7.24492 20.0754 6.26032 19.4121 5.42302 18.5743C4.58572 17.7364 3.92309 16.7526 3.43511 15.6229C2.94713 14.4931 2.70312 13.286 2.70312 12.0015C2.70312 10.7157 2.9475 9.50677 3.43625 8.37487C3.92498 7.24297 4.58828 6.25837 5.42613 5.42107C6.26396 4.58377 7.24775 3.92113 8.3775 3.43315C9.50725 2.94516 10.7144 2.70117 11.9989 2.70117C13.2847 2.70117 14.4936 2.94555 15.6255 3.4343C16.7574 3.92303 17.742 4.58632 18.5793 5.42417C19.4166 6.262 20.0793 7.2458 20.5673 8.37555C21.0552 9.5053 21.2992 10.7124 21.2992 11.9969C21.2992 13.2828 21.0548 14.4917 20.5661 15.6236C20.0774 16.7555 19.4141 17.7401 18.5762 18.5774C17.7384 19.4147 16.7546 20.0773 15.6249 20.5653C14.4951 21.0533 13.288 21.2973 12.0035 21.2973Z", fill: "#D61930" }), /* @__PURE__ */ C.createElement("path", { d: "M12.0035 21.2973C10.7176 21.2973 9.50872 21.0529 8.37682 20.5641C7.24492 20.0754 6.26032 19.4121 5.42302 18.5743C4.58572 17.7364 3.92309 16.7526 3.43511 15.6229C2.94713 14.4931 2.70312 13.286 2.70312 12.0015C2.70312 10.7157 2.9475 9.50677 3.43625 8.37487C3.92498 7.24297 4.58828 6.25837 5.42613 5.42107C6.26396 4.58377 7.24775 3.92113 8.3775 3.43315C9.50725 2.94516 10.7144 2.70117 11.9989 2.70117C13.2847 2.70117 14.4936 2.94555 15.6255 3.4343C16.7574 3.92303 17.742 4.58632 18.5793 5.42417C19.4166 6.262 20.0793 7.2458 20.5673 8.37555C21.0552 9.5053 21.2992 10.7124 21.2992 11.9969C21.2992 13.2828 21.0548 14.4917 20.5661 15.6236C20.0774 16.7555 19.4141 17.7401 18.5762 18.5774C17.7384 19.4147 16.7546 20.0773 15.6249 20.5653C14.4951 21.0533 13.288 21.2973 12.0035 21.2973Z", fill: "#D61930" }), /* @__PURE__ */ C.createElement("path", { d: "M12.0035 21.2973C10.7176 21.2973 9.50872 21.0529 8.37682 20.5641C7.24492 20.0754 6.26032 19.4121 5.42302 18.5743C4.58572 17.7364 3.92309 16.7526 3.43511 15.6229C2.94713 14.4931 2.70312 13.286 2.70312 12.0015C2.70312 10.7157 2.9475 9.50677 3.43625 8.37487C3.92498 7.24297 4.58828 6.25837 5.42613 5.42107C6.26396 4.58377 7.24775 3.92113 8.3775 3.43315C9.50725 2.94516 10.7144 2.70117 11.9989 2.70117C13.2847 2.70117 14.4936 2.94555 15.6255 3.4343C16.7574 3.92303 17.742 4.58632 18.5793 5.42417C19.4166 6.262 20.0793 7.2458 20.5673 8.37555C21.0552 9.5053 21.2992 10.7124 21.2992 11.9969C21.2992 13.2828 21.0548 14.4917 20.5661 15.6236C20.0774 16.7555 19.4141 17.7401 18.5762 18.5774C17.7384 19.4147 16.7546 20.0773 15.6249 20.5653C14.4951 21.0533 13.288 21.2973 12.0035 21.2973Z", fill: "#D61930" }), /* @__PURE__ */ C.createElement("path", { d: "M11.999 16.6303C12.2194 16.6303 12.4028 16.5579 12.5493 16.4132C12.6957 16.2685 12.769 16.086 12.769 15.8656C12.769 15.6453 12.6966 15.4619 12.5519 15.3154C12.4072 15.1689 12.2247 15.0957 12.0043 15.0957C11.784 15.0957 11.6006 15.1681 11.4541 15.3128C11.3076 15.4575 11.2344 15.64 11.2344 15.8604C11.2344 16.0807 11.3067 16.2641 11.4514 16.4106C11.5962 16.5571 11.7787 16.6303 11.999 16.6303ZM11.3123 13.0774H12.7113V7.1582H11.3123V13.0774Z", fill: "white" }));
|
|
3
|
-
export {
|
|
4
|
-
t as default
|
|
5
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as e from "react";
|
|
2
|
-
const q = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "#5f6368", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z" }));
|
|
3
|
-
export {
|
|
4
|
-
q as default
|
|
5
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as e from "react";
|
|
2
|
-
const t = (l) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.1515 12.0001L5.21179 6.06044L6.06032 5.21191L12 11.1516L17.9397 5.21191L18.7882 6.06044L12.8485 12.0001L18.7882 17.9398L17.9397 18.7884L12 12.8487L6.06032 18.7884L5.21179 17.9398L11.1515 12.0001Z", fill: "black" }));
|
|
3
|
-
export {
|
|
4
|
-
t as default
|
|
5
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as e from "react";
|
|
2
|
-
const r = (t) => /* @__PURE__ */ e.createElement("svg", { width: 25, height: 25, viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M5.41384 20.7778C5.18242 20.7041 4.97954 20.5801 4.80519 20.4057C4.63084 20.2314 4.50681 20.0269 4.43309 19.7923L20.0032 4.2019C20.25 4.27755 20.4575 4.4016 20.6258 4.57403C20.7941 4.74645 20.9202 4.94932 21.0042 5.18265L5.41384 20.7778ZM4.40039 14.4922V12.5134L12.7167 4.2019H14.6907L4.40039 14.4922ZM4.40039 7.1807V5.90863C4.40039 5.43363 4.5661 5.03043 4.89752 4.69903C5.22892 4.36761 5.63212 4.2019 6.10712 4.2019H7.38399L4.40039 7.1807ZM18.0177 20.798L20.9965 17.8144V19.0913C20.9965 19.5663 20.8308 19.9695 20.4994 20.3009C20.168 20.6323 19.7648 20.798 19.2898 20.798H18.0177ZM10.7062 20.798L20.9965 10.5077V12.4817L12.685 20.798H10.7062Z", fill: "currentColor" }));
|
|
3
|
-
export {
|
|
4
|
-
r as default
|
|
5
|
-
};
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
declare const icons: {
|
|
2
|
-
add: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
3
|
-
title?: string;
|
|
4
|
-
}>;
|
|
5
|
-
avatar: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
6
|
-
title?: string;
|
|
7
|
-
}>;
|
|
8
|
-
check: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
9
|
-
title?: string;
|
|
10
|
-
}>;
|
|
11
|
-
checkCircle: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
12
|
-
title?: string;
|
|
13
|
-
}>;
|
|
14
|
-
arrow_outward: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
15
|
-
title?: string;
|
|
16
|
-
}>;
|
|
17
|
-
arrow_blank: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
18
|
-
title?: string;
|
|
19
|
-
}>;
|
|
20
|
-
content_copy: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
21
|
-
title?: string;
|
|
22
|
-
}>;
|
|
23
|
-
clipboard_copy: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
24
|
-
title?: string;
|
|
25
|
-
}>;
|
|
26
|
-
chevron_left: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
27
|
-
title?: string;
|
|
28
|
-
}>;
|
|
29
|
-
chevron_right: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
30
|
-
title?: string;
|
|
31
|
-
}>;
|
|
32
|
-
close: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
33
|
-
title?: string;
|
|
34
|
-
}>;
|
|
35
|
-
face: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
36
|
-
title?: string;
|
|
37
|
-
}>;
|
|
38
|
-
search: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
39
|
-
title?: string;
|
|
40
|
-
}>;
|
|
41
|
-
texture: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
42
|
-
title?: string;
|
|
43
|
-
}>;
|
|
44
|
-
expandMore: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
45
|
-
title?: string;
|
|
46
|
-
}>;
|
|
47
|
-
errorCircle: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
48
|
-
title?: string;
|
|
49
|
-
}>;
|
|
50
|
-
error: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
51
|
-
title?: string;
|
|
52
|
-
}>;
|
|
53
|
-
error_fill: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
54
|
-
title?: string;
|
|
55
|
-
}>;
|
|
56
|
-
info: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
57
|
-
title?: string;
|
|
58
|
-
}>;
|
|
59
|
-
menu: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
60
|
-
title?: string;
|
|
61
|
-
}>;
|
|
62
|
-
account_circle: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
63
|
-
title?: string;
|
|
64
|
-
}>;
|
|
65
|
-
settings: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
66
|
-
title?: string;
|
|
67
|
-
}>;
|
|
68
|
-
};
|
|
69
|
-
export type SvgIconName = keyof typeof icons;
|
|
70
|
-
interface SvgIconProps extends React.SVGProps<SVGSVGElement> {
|
|
71
|
-
icon: SvgIconName;
|
|
72
|
-
size?: string;
|
|
73
|
-
}
|
|
74
|
-
export declare const SvgIcon: React.FC<SvgIconProps>;
|
|
75
|
-
export {};
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import { jsx as p } from "react/jsx-runtime";
|
|
2
|
-
import f from "../node_modules/@material-design-icons/svg/round/add.svg.js";
|
|
3
|
-
import v from "../assets/avatar.svg.js";
|
|
4
|
-
import g from "../assets/check.svg.js";
|
|
5
|
-
import n from "../assets/icons/outline/close.svg.js";
|
|
6
|
-
import S from "../assets/checkCircle.svg.js";
|
|
7
|
-
import t from "../node_modules/@material-design-icons/svg/round/arrow_outward.svg.js";
|
|
8
|
-
import m from "../node_modules/@material-design-icons/svg/round/content_copy.svg.js";
|
|
9
|
-
import a from "../node_modules/@material-design-icons/svg/round/chevron_left.svg.js";
|
|
10
|
-
import l from "../node_modules/@material-design-icons/svg/round/chevron_right.svg.js";
|
|
11
|
-
import h from "../node_modules/@material-design-icons/svg/round/face.svg.js";
|
|
12
|
-
import s from "../node_modules/@material-design-icons/svg/round/search.svg.js";
|
|
13
|
-
import C from "../assets/texture.svg.js";
|
|
14
|
-
import u from "../node_modules/@material-design-icons/svg/round/expand_more.svg.js";
|
|
15
|
-
import d from "../assets/error.svg.js";
|
|
16
|
-
import _ from "../assets/errorFill.svg.js";
|
|
17
|
-
import x from "../assets/errorCircle.svg.js";
|
|
18
|
-
import w from "../node_modules/@material-design-icons/svg/outlined/info.svg.js";
|
|
19
|
-
import k from "../node_modules/@material-design-icons/svg/round/menu.svg.js";
|
|
20
|
-
import A from "../node_modules/@material-design-icons/svg/round/account_circle.svg.js";
|
|
21
|
-
import E from "../node_modules/@material-design-icons/svg/round/settings.svg.js";
|
|
22
|
-
import { css as y } from "../ui/styled-system/css/css.js";
|
|
23
|
-
import { cx as M } from "../ui/styled-system/css/cx.js";
|
|
24
|
-
import "../ui/styled-system/helpers.js";
|
|
25
|
-
const b = {
|
|
26
|
-
add: f,
|
|
27
|
-
avatar: v,
|
|
28
|
-
check: g,
|
|
29
|
-
checkCircle: S,
|
|
30
|
-
arrow_outward: t,
|
|
31
|
-
arrow_blank: t,
|
|
32
|
-
content_copy: m,
|
|
33
|
-
clipboard_copy: m,
|
|
34
|
-
chevron_left: a,
|
|
35
|
-
chevron_right: l,
|
|
36
|
-
close: n,
|
|
37
|
-
face: h,
|
|
38
|
-
search: s,
|
|
39
|
-
texture: C,
|
|
40
|
-
expandMore: u,
|
|
41
|
-
errorCircle: x,
|
|
42
|
-
error: d,
|
|
43
|
-
error_fill: _,
|
|
44
|
-
info: w,
|
|
45
|
-
menu: k,
|
|
46
|
-
account_circle: A,
|
|
47
|
-
settings: E
|
|
48
|
-
}, z = ({
|
|
49
|
-
icon: e,
|
|
50
|
-
size: r,
|
|
51
|
-
className: i,
|
|
52
|
-
...c
|
|
53
|
-
}) => {
|
|
54
|
-
const o = b[e];
|
|
55
|
-
return o ? /* @__PURE__ */ p(
|
|
56
|
-
o,
|
|
57
|
-
{
|
|
58
|
-
...c,
|
|
59
|
-
width: r || "1em",
|
|
60
|
-
height: r || "1em",
|
|
61
|
-
className: M(
|
|
62
|
-
y({
|
|
63
|
-
fill: "currentColor"
|
|
64
|
-
}),
|
|
65
|
-
i
|
|
66
|
-
)
|
|
67
|
-
}
|
|
68
|
-
) : null;
|
|
69
|
-
};
|
|
70
|
-
export {
|
|
71
|
-
z as SvgIcon
|
|
72
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { SvgIcon } from './SvgIcon';
|
|
3
|
-
declare const meta: Meta<typeof SvgIcon>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof meta>;
|
|
6
|
-
export declare const Primary: Story;
|
|
7
|
-
export declare const CustomClassName: Story;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as e from "react";
|
|
2
|
-
const h = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }));
|
|
3
|
-
export {
|
|
4
|
-
h as default
|
|
5
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as e from "react";
|
|
2
|
-
const c = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88a9.947 9.947 0 0 1 12.28 0C16.43 19.18 14.03 20 12 20z" }));
|
|
3
|
-
export {
|
|
4
|
-
c as default
|
|
5
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as e from "react";
|
|
2
|
-
const s = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z" }));
|
|
3
|
-
export {
|
|
4
|
-
s as default
|
|
5
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as t from "react";
|
|
2
|
-
const r = (e) => /* @__PURE__ */ t.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...e }, /* @__PURE__ */ t.createElement("path", { d: "M6 7c0 .55.45 1 1 1h7.59l-8.88 8.88a.996.996 0 1 0 1.41 1.41L16 9.41V17c0 .55.45 1 1 1s1-.45 1-1V7c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1z" }));
|
|
3
|
-
export {
|
|
4
|
-
r as default
|
|
5
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as e from "react";
|
|
2
|
-
const a = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M14.71 6.71a.996.996 0 0 0-1.41 0L8.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59a.996.996 0 1 0 1.41-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41z" }));
|
|
3
|
-
export {
|
|
4
|
-
a as default
|
|
5
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as e from "react";
|
|
2
|
-
const a = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M9.29 6.71a.996.996 0 0 0 0 1.41L13.17 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z" }));
|
|
3
|
-
export {
|
|
4
|
-
a as default
|
|
5
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as t from "react";
|
|
2
|
-
const c = (e) => /* @__PURE__ */ t.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...e }, /* @__PURE__ */ t.createElement("path", { d: "M15 20H5V7c0-.55-.45-1-1-1s-1 .45-1 1v13c0 1.1.9 2 2 2h10c.55 0 1-.45 1-1s-.45-1-1-1zm5-4V4c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h9c1.1 0 2-.9 2-2zm-2 0H9V4h9v12z" }));
|
|
3
|
-
export {
|
|
4
|
-
c as default
|
|
5
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as e from "react";
|
|
2
|
-
const a = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M15.88 9.29 12 13.17 8.12 9.29a.996.996 0 1 0-1.41 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 0 0 0-1.41c-.39-.38-1.03-.39-1.42 0z" }));
|
|
3
|
-
export {
|
|
4
|
-
a as default
|
|
5
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as e from "react";
|
|
2
|
-
const a = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M10.25 13a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0zM15 11.75a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5zm7 .25c0 5.52-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2s10 4.48 10 10zm-2 0c0-.78-.12-1.53-.33-2.24-.7.15-1.42.24-2.17.24a10 10 0 0 1-7.76-3.69A10.016 10.016 0 0 1 4 11.86c.01.04 0 .09 0 .14 0 4.41 3.59 8 8 8s8-3.59 8-8z" }));
|
|
3
|
-
export {
|
|
4
|
-
a as default
|
|
5
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as e from "react";
|
|
2
|
-
const s = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z" }));
|
|
3
|
-
export {
|
|
4
|
-
s as default
|
|
5
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as e from "react";
|
|
2
|
-
const a = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }));
|
|
3
|
-
export {
|
|
4
|
-
a as default
|
|
5
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as c from "react";
|
|
2
|
-
const t = (l) => /* @__PURE__ */ c.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...l }, /* @__PURE__ */ c.createElement("path", { d: "M19.5 12c0-.23-.01-.45-.03-.68l1.86-1.41c.4-.3.51-.86.26-1.3l-1.87-3.23a.987.987 0 0 0-1.25-.42l-2.15.91c-.37-.26-.76-.49-1.17-.68l-.29-2.31c-.06-.5-.49-.88-.99-.88h-3.73c-.51 0-.94.38-1 .88l-.29 2.31c-.41.19-.8.42-1.17.68l-2.15-.91c-.46-.2-1-.02-1.25.42L2.41 8.62c-.25.44-.14.99.26 1.3l1.86 1.41a7.343 7.343 0 0 0 0 1.35l-1.86 1.41c-.4.3-.51.86-.26 1.3l1.87 3.23c.25.44.79.62 1.25.42l2.15-.91c.37.26.76.49 1.17.68l.29 2.31c.06.5.49.88.99.88h3.73c.5 0 .93-.38.99-.88l.29-2.31c.41-.19.8-.42 1.17-.68l2.15.91c.46.2 1 .02 1.25-.42l1.87-3.23c.25-.44.14-.99-.26-1.3l-1.86-1.41c.03-.23.04-.45.04-.68zm-7.46 3.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" }));
|
|
3
|
-
export {
|
|
4
|
-
t as default
|
|
5
|
-
};
|
|
File without changes
|
|
File without changes
|