@situaction/traq-ui-ste 1.0.15 → 1.0.17
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/Button.d.ts +2 -2
- package/dist/components/button/Button.js +53 -52
- package/dist/components/checkbox/Checkbox.d.ts +12 -0
- package/dist/components/checkbox/Checkbox.js +47 -0
- package/dist/components/icon-button/IconButton.js +47 -46
- package/dist/components/input/Input.js +63 -63
- package/dist/components/interface.d.ts +1 -0
- package/dist/components/theme/ThemeContext.js +27 -21
- package/dist/styles/Button.css +1 -1
- package/dist/styles/Checkbox.css +1 -0
- package/dist/styles/IconButton.css +1 -1
- package/dist/styles/Input.css +1 -1
- package/dist/styles/main.css +1 -1
- package/package.json +3 -3
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { ButtonHTMLAttributes, FC, ReactNode } from 'react';
|
|
2
|
-
import { Color } from '../interface';
|
|
2
|
+
import { Color, Size } from '../interface';
|
|
3
3
|
|
|
4
4
|
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
5
|
mode?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'text'; /** Is this the principal call to action on the page? */
|
|
6
6
|
color?: Color; /** What background color to use (blue, red, ...)*/
|
|
7
7
|
colorMode?: 'light' | 'dark'; /** what mode do you use for light or dark color **/
|
|
8
|
-
size?:
|
|
8
|
+
size?: Size; /** How large should the button be? */
|
|
9
9
|
label: string; /** button contents */
|
|
10
10
|
error?: boolean; /** If true, the button will be styled to indicate an error state. */
|
|
11
11
|
selected?: boolean; /** If true, the button is activated */
|
|
@@ -1,67 +1,68 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useEffect as
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
"button-
|
|
7
|
-
"button-
|
|
8
|
-
"button-
|
|
9
|
-
"button-
|
|
10
|
-
"button-text
|
|
11
|
-
"button-
|
|
12
|
-
"button-
|
|
13
|
-
"button-size-
|
|
14
|
-
"button-size-
|
|
15
|
-
"button-size-
|
|
16
|
-
"button-
|
|
17
|
-
"button-gap-
|
|
18
|
-
"button-gap-
|
|
19
|
-
"button-gap-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
1
|
+
import { jsxs as k, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect as x } from "react";
|
|
3
|
+
import { useTheme as d } from "../theme/ThemeContext.js";
|
|
4
|
+
import '../../styles/Button.css';const g = "_button_1b5ik_21", v = "_flexHorizontalCenter_1b5ik_163", o = {
|
|
5
|
+
button: g,
|
|
6
|
+
"button-primary": "_button-primary_1b5ik_43",
|
|
7
|
+
"button-secondary": "_button-secondary_1b5ik_57",
|
|
8
|
+
"button-tertiary": "_button-tertiary_1b5ik_71",
|
|
9
|
+
"button-ghost": "_button-ghost_1b5ik_85",
|
|
10
|
+
"button-text": "_button-text_1b5ik_101",
|
|
11
|
+
"button-text-selected": "_button-text-selected_1b5ik_114",
|
|
12
|
+
"button-error": "_button-error_1b5ik_120",
|
|
13
|
+
"button-size-xl": "_button-size-xl_1b5ik_133",
|
|
14
|
+
"button-size-l": "_button-size-l_1b5ik_138",
|
|
15
|
+
"button-size-m": "_button-size-m_1b5ik_143",
|
|
16
|
+
"button-size-s": "_button-size-s_1b5ik_148",
|
|
17
|
+
"button-gap-xl": "_button-gap-xl_1b5ik_153",
|
|
18
|
+
"button-gap-l": "_button-gap-l_1b5ik_156",
|
|
19
|
+
"button-gap-m": "_button-gap-m_1b5ik_159",
|
|
20
|
+
"button-gap-s": "_button-gap-s_1b5ik_159",
|
|
21
|
+
flexHorizontalCenter: v
|
|
22
|
+
}, $ = ({
|
|
23
|
+
mode: n = "primary",
|
|
23
24
|
size: a = "m",
|
|
24
25
|
color: t,
|
|
25
|
-
colorMode:
|
|
26
|
-
label:
|
|
27
|
-
error:
|
|
28
|
-
selected:
|
|
29
|
-
childrenLeft:
|
|
30
|
-
childrenRight:
|
|
31
|
-
...
|
|
26
|
+
colorMode: r,
|
|
27
|
+
label: _,
|
|
28
|
+
error: u,
|
|
29
|
+
selected: l,
|
|
30
|
+
childrenLeft: b,
|
|
31
|
+
childrenRight: s,
|
|
32
|
+
...c
|
|
32
33
|
}) => {
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
const { mode: e } = d(), m = () => u ? "error" : n;
|
|
35
|
+
x(() => {
|
|
36
|
+
r && !t && console.warn("`colorMode` is defined but `color` is missing. `colorMode` will be ignored.");
|
|
36
37
|
}, [t]);
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
].join(" "),
|
|
45
|
-
"--dynamic-color-text": t ?
|
|
46
|
-
"--dynamic-color": t ? `var(--color-${t}-${
|
|
47
|
-
"--dynamic-color-hover": t ? `var(--color-${t}-${
|
|
48
|
-
"--dynamic-color-activated": t ? `var(--color-${t}-${
|
|
38
|
+
const p = [
|
|
39
|
+
o.button,
|
|
40
|
+
o[`button-${m()}`],
|
|
41
|
+
o[`button-size-${a}`],
|
|
42
|
+
o[`button-gap-${a}`],
|
|
43
|
+
l && n === "text" && o["button-text-selected"],
|
|
44
|
+
o.flexHorizontalCenter
|
|
45
|
+
].join(" "), y = {
|
|
46
|
+
"--dynamic-color-text": t ? r === "dark" ? `var(--color-${t}-900)` : "var(--color-light-100)" : e === "light" ? "var(--color-light-100)" : "var(--primary-color-900)",
|
|
47
|
+
"--dynamic-color": t ? `var(--color-${t}-${r === "dark" ? "200" : "900"})` : "var(--primary-color)",
|
|
48
|
+
"--dynamic-color-hover": t ? `var(--color-${t}-${r === "dark" ? "100" : "800"})` : e === "light" ? "var(--primary-color-800)" : "var(--primary-color-100)",
|
|
49
|
+
"--dynamic-color-activated": t ? `var(--color-${t}-${r === "dark" ? "50" : "700"})` : e === "light" ? "var(--primary-color-700)" : "var(--primary-color-50)"
|
|
49
50
|
};
|
|
50
|
-
return /* @__PURE__ */
|
|
51
|
+
return /* @__PURE__ */ k(
|
|
51
52
|
"button",
|
|
52
53
|
{
|
|
53
54
|
type: "button",
|
|
54
|
-
className:
|
|
55
|
-
style:
|
|
56
|
-
...
|
|
55
|
+
className: p,
|
|
56
|
+
style: n === "primary" ? y : void 0,
|
|
57
|
+
...c,
|
|
57
58
|
children: [
|
|
58
|
-
|
|
59
|
-
/* @__PURE__ */
|
|
60
|
-
|
|
59
|
+
b && /* @__PURE__ */ i("span", { className: o.flexHorizontalCenter, children: b }),
|
|
60
|
+
/* @__PURE__ */ i("span", { children: _ }),
|
|
61
|
+
s && /* @__PURE__ */ i("span", { className: o.flexHorizontalCenter, children: s })
|
|
61
62
|
]
|
|
62
63
|
}
|
|
63
64
|
);
|
|
64
65
|
};
|
|
65
66
|
export {
|
|
66
|
-
|
|
67
|
+
$ as Button
|
|
67
68
|
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
import { Size } from '../interface';
|
|
3
|
+
|
|
4
|
+
export interface CheckboxProps {
|
|
5
|
+
checked?: boolean;
|
|
6
|
+
icon?: ReactNode;
|
|
7
|
+
size?: Size;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
onChange?: (checked: boolean) => void;
|
|
10
|
+
}
|
|
11
|
+
declare const Checkbox: FC<CheckboxProps>;
|
|
12
|
+
export default Checkbox;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import { useState as x } from "react";
|
|
3
|
+
import { useTheme as m } from "../theme/ThemeContext.js";
|
|
4
|
+
import '../../styles/Checkbox.css';const n = "_checkbox_1cb1z_21", r = "_checked_1cb1z_32", z = "_disabled_1cb1z_44", e = {
|
|
5
|
+
checkbox: n,
|
|
6
|
+
"dark-mode": "_dark-mode_1cb1z_29",
|
|
7
|
+
checked: r,
|
|
8
|
+
disabled: z,
|
|
9
|
+
"checkbox-size-s": "_checkbox-size-s_1cb1z_58",
|
|
10
|
+
"checkbox-size-m": "_checkbox-size-m_1cb1z_63",
|
|
11
|
+
"checkbox-size-l": "_checkbox-size-l_1cb1z_68",
|
|
12
|
+
"checkbox-size-xl": "_checkbox-size-xl_1cb1z_73"
|
|
13
|
+
}, g = ({
|
|
14
|
+
checked: h = !1,
|
|
15
|
+
icon: t = /* @__PURE__ */ s("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 256 256", children: /* @__PURE__ */ s(
|
|
16
|
+
"path",
|
|
17
|
+
{
|
|
18
|
+
d: "M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
|
19
|
+
}
|
|
20
|
+
) }),
|
|
21
|
+
size: b = "m",
|
|
22
|
+
disabled: i = !1,
|
|
23
|
+
onChange: o
|
|
24
|
+
}) => {
|
|
25
|
+
const { mode: k } = m(), [c, a] = x(h), l = () => {
|
|
26
|
+
const d = !c;
|
|
27
|
+
a(d), o && o(d);
|
|
28
|
+
}, _ = [
|
|
29
|
+
e.checkbox,
|
|
30
|
+
e[`checkbox-size-${b}`],
|
|
31
|
+
c && e.checked,
|
|
32
|
+
i && e.disabled,
|
|
33
|
+
k === "dark" && e["dark-mode"]
|
|
34
|
+
].filter(Boolean).join(" ");
|
|
35
|
+
return /* @__PURE__ */ s(
|
|
36
|
+
"div",
|
|
37
|
+
{
|
|
38
|
+
"data-testid": "checkbox",
|
|
39
|
+
className: _,
|
|
40
|
+
onClick: l,
|
|
41
|
+
children: c && t
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
};
|
|
45
|
+
export {
|
|
46
|
+
g as default
|
|
47
|
+
};
|
|
@@ -1,60 +1,61 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useEffect as
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
"button-
|
|
7
|
-
"button-
|
|
8
|
-
"button-
|
|
9
|
-
"button-
|
|
10
|
-
"button-
|
|
11
|
-
"button-text
|
|
12
|
-
"button-
|
|
13
|
-
"button-
|
|
14
|
-
"button-size-
|
|
15
|
-
"button-size-
|
|
16
|
-
"button-size-
|
|
1
|
+
import { jsx as d } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect as w } from "react";
|
|
3
|
+
import { useTheme as p } from "../theme/ThemeContext.js";
|
|
4
|
+
import '../../styles/IconButton.css';const v = "_button_1tm5w_21", x = "_flexHorizontalCenter_1tm5w_158", o = {
|
|
5
|
+
button: v,
|
|
6
|
+
"button-round": "_button-round_1tm5w_49",
|
|
7
|
+
"button-primary": "_button-primary_1tm5w_52",
|
|
8
|
+
"button-secondary": "_button-secondary_1tm5w_65",
|
|
9
|
+
"button-tertiary": "_button-tertiary_1tm5w_79",
|
|
10
|
+
"button-ghost": "_button-ghost_1tm5w_93",
|
|
11
|
+
"button-text": "_button-text_1tm5w_106",
|
|
12
|
+
"button-text-selected": "_button-text-selected_1tm5w_118",
|
|
13
|
+
"button-error": "_button-error_1tm5w_124",
|
|
14
|
+
"button-size-xl": "_button-size-xl_1tm5w_137",
|
|
15
|
+
"button-size-l": "_button-size-l_1tm5w_142",
|
|
16
|
+
"button-size-m": "_button-size-m_1tm5w_147",
|
|
17
|
+
"button-size-s": "_button-size-s_1tm5w_152",
|
|
17
18
|
flexHorizontalCenter: x
|
|
18
|
-
},
|
|
19
|
-
mode:
|
|
19
|
+
}, h = ({
|
|
20
|
+
mode: e = "primary",
|
|
20
21
|
color: t,
|
|
21
|
-
colorMode:
|
|
22
|
-
size:
|
|
23
|
-
error:
|
|
24
|
-
selected:
|
|
25
|
-
round:
|
|
26
|
-
disabled:
|
|
27
|
-
children:
|
|
28
|
-
onClick:
|
|
22
|
+
colorMode: r,
|
|
23
|
+
size: i = "m",
|
|
24
|
+
error: a,
|
|
25
|
+
selected: u,
|
|
26
|
+
round: s,
|
|
27
|
+
disabled: m,
|
|
28
|
+
children: _,
|
|
29
|
+
onClick: b
|
|
29
30
|
}) => {
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
const { mode: n } = p(), l = () => a ? "error" : e;
|
|
32
|
+
w(() => {
|
|
33
|
+
r && !t && console.warn("`colorMode` is defined but `color` is missing. `colorMode` will be ignored.");
|
|
33
34
|
}, [t]);
|
|
34
|
-
const
|
|
35
|
+
const c = [
|
|
35
36
|
o.button,
|
|
36
|
-
o[`button-${
|
|
37
|
-
|
|
38
|
-
o[`button-size-${
|
|
39
|
-
|
|
37
|
+
o[`button-${l()}`],
|
|
38
|
+
s && o["button-round"],
|
|
39
|
+
o[`button-size-${i}`],
|
|
40
|
+
u && e === "icon" && o["button-text-selected"],
|
|
40
41
|
o.flexHorizontalCenter
|
|
41
|
-
].join(" "),
|
|
42
|
-
"--dynamic-color-text": t ?
|
|
43
|
-
"--dynamic-color": t ? `var(--color-${t}-${
|
|
44
|
-
"--dynamic-color-hover": t ? `var(--color-${t}-${
|
|
45
|
-
"--dynamic-color-activated": t ? `var(--color-${t}-${
|
|
42
|
+
].join(" "), y = {
|
|
43
|
+
"--dynamic-color-text": t ? r === "dark" ? "var(--primary-color-900)" : "var(--color-light-100)" : n === "light" ? "var(--color-light-100)" : "var(--primary-color-900)",
|
|
44
|
+
"--dynamic-color": t ? `var(--color-${t}-${r === "dark" ? "200" : "900"})` : "var(--primary-color)",
|
|
45
|
+
"--dynamic-color-hover": t ? `var(--color-${t}-${r === "dark" ? "100" : "800"})` : n === "light" ? "var(--primary-color-800)" : "var(--primary-color-100)",
|
|
46
|
+
"--dynamic-color-activated": t ? `var(--color-${t}-${r === "dark" ? "50" : "700"})` : n === "light" ? "var(--primary-color-700)" : "var(--primary-color-50)"
|
|
46
47
|
};
|
|
47
|
-
return /* @__PURE__ */
|
|
48
|
+
return /* @__PURE__ */ d(
|
|
48
49
|
"button",
|
|
49
50
|
{
|
|
50
|
-
className:
|
|
51
|
-
style:
|
|
52
|
-
onClick:
|
|
53
|
-
disabled:
|
|
54
|
-
children:
|
|
51
|
+
className: c,
|
|
52
|
+
style: y,
|
|
53
|
+
onClick: b,
|
|
54
|
+
disabled: m,
|
|
55
|
+
children: _
|
|
55
56
|
}
|
|
56
57
|
);
|
|
57
58
|
};
|
|
58
59
|
export {
|
|
59
|
-
|
|
60
|
+
h as IconButton
|
|
60
61
|
};
|
|
@@ -1,83 +1,83 @@
|
|
|
1
1
|
import { jsxs as _, jsx as s, Fragment as R } from "react/jsx-runtime";
|
|
2
2
|
import { useState as y, useRef as q } from "react";
|
|
3
|
-
import '../../styles/Input.css';const A = "
|
|
4
|
-
"input-style": "_input-
|
|
5
|
-
"input-style-ghost": "_input-style-
|
|
6
|
-
"input-style-disabled": "_input-style-
|
|
7
|
-
"input-style-focused": "_input-style-
|
|
8
|
-
"input-style-error": "_input-style-
|
|
9
|
-
"input-style-error-focused": "_input-style-error-
|
|
10
|
-
"input-style-error-focus-background": "_input-style-error-focus-
|
|
11
|
-
"input-style-error-disabled": "_input-style-error-
|
|
12
|
-
"input-style-success": "_input-style-
|
|
13
|
-
"input-style-success-focused": "_input-style-success-
|
|
14
|
-
"input-style-success-focus-background": "_input-style-success-focus-
|
|
15
|
-
"input-style-success-disabled": "_input-style-success-
|
|
16
|
-
"input-container": "_input-
|
|
17
|
-
"floating-input": "_floating-
|
|
18
|
-
"floating-input-size-xl": "_floating-input-size-
|
|
19
|
-
"floating-input-size-l": "_floating-input-size-
|
|
20
|
-
"floating-input-size-m": "_floating-input-size-
|
|
21
|
-
"floating-input-size-s": "_floating-input-size-
|
|
22
|
-
"input-style-size-xl": "_input-style-size-
|
|
23
|
-
"input-style-size-l": "_input-style-size-
|
|
24
|
-
"input-style-size-m": "_input-style-size-
|
|
25
|
-
"input-style-size-s": "_input-style-size-
|
|
26
|
-
"input-style-radius": "_input-style-
|
|
3
|
+
import '../../styles/Input.css';const A = "_flexHorizontalBetween_1edvz_165", E = "_flexHorizontal_1edvz_165", e = {
|
|
4
|
+
"input-style": "_input-style_1edvz_33",
|
|
5
|
+
"input-style-ghost": "_input-style-ghost_1edvz_44",
|
|
6
|
+
"input-style-disabled": "_input-style-disabled_1edvz_49",
|
|
7
|
+
"input-style-focused": "_input-style-focused_1edvz_58",
|
|
8
|
+
"input-style-error": "_input-style-error_1edvz_63",
|
|
9
|
+
"input-style-error-focused": "_input-style-error-focused_1edvz_70",
|
|
10
|
+
"input-style-error-focus-background": "_input-style-error-focus-background_1edvz_76",
|
|
11
|
+
"input-style-error-disabled": "_input-style-error-disabled_1edvz_79",
|
|
12
|
+
"input-style-success": "_input-style-success_1edvz_87",
|
|
13
|
+
"input-style-success-focused": "_input-style-success-focused_1edvz_94",
|
|
14
|
+
"input-style-success-focus-background": "_input-style-success-focus-background_1edvz_100",
|
|
15
|
+
"input-style-success-disabled": "_input-style-success-disabled_1edvz_103",
|
|
16
|
+
"input-container": "_input-container_1edvz_111",
|
|
17
|
+
"floating-input": "_floating-input_1edvz_115",
|
|
18
|
+
"floating-input-size-xl": "_floating-input-size-xl_1edvz_121",
|
|
19
|
+
"floating-input-size-l": "_floating-input-size-l_1edvz_125",
|
|
20
|
+
"floating-input-size-m": "_floating-input-size-m_1edvz_129",
|
|
21
|
+
"floating-input-size-s": "_floating-input-size-s_1edvz_133",
|
|
22
|
+
"input-style-size-xl": "_input-style-size-xl_1edvz_137",
|
|
23
|
+
"input-style-size-l": "_input-style-size-l_1edvz_143",
|
|
24
|
+
"input-style-size-m": "_input-style-size-m_1edvz_149",
|
|
25
|
+
"input-style-size-s": "_input-style-size-s_1edvz_155",
|
|
26
|
+
"input-style-radius": "_input-style-radius_1edvz_161",
|
|
27
27
|
flexHorizontalBetween: A,
|
|
28
28
|
flexHorizontal: E
|
|
29
29
|
}, K = ({
|
|
30
30
|
sizeStyle: u = "m",
|
|
31
|
-
label:
|
|
31
|
+
label: z,
|
|
32
32
|
labelUnit: o,
|
|
33
33
|
color: n,
|
|
34
34
|
dark: r,
|
|
35
35
|
focusBackground: l,
|
|
36
36
|
status: a = "default",
|
|
37
|
-
ghost:
|
|
37
|
+
ghost: f = !1,
|
|
38
38
|
iconLeft: c,
|
|
39
39
|
iconRight: p,
|
|
40
|
-
round:
|
|
40
|
+
round: v,
|
|
41
41
|
classNames: g,
|
|
42
42
|
disabled: i,
|
|
43
43
|
defaultValue: m,
|
|
44
|
-
...
|
|
44
|
+
...b
|
|
45
45
|
}) => {
|
|
46
|
-
const [
|
|
47
|
-
|
|
48
|
-
},
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
46
|
+
const [t, d] = y(!1), [h, x] = y(m || ""), $ = q(null), H = () => d(!0), S = () => d(!1), j = (D) => {
|
|
47
|
+
x(D.target.value);
|
|
48
|
+
}, B = [
|
|
49
|
+
e["input-style"],
|
|
50
|
+
e[`input-style-size-${u}`],
|
|
51
|
+
e[`input-style-gap-${a}`],
|
|
52
|
+
v && e["input-style-radius"],
|
|
53
|
+
e.flexHorizontalBetween,
|
|
54
54
|
"gap4",
|
|
55
|
-
|
|
56
|
-
].filter(Boolean).join(" "), B = [
|
|
57
|
-
e && t["input-style-focused"],
|
|
58
|
-
i && t["input-style-disabled"]
|
|
55
|
+
f && e["input-style-ghost"]
|
|
59
56
|
].filter(Boolean).join(" "), N = [
|
|
60
|
-
t["input-style-
|
|
61
|
-
i &&
|
|
62
|
-
e && t["input-style-error-focused"],
|
|
63
|
-
e && l && t["input-style-error-focus-background"]
|
|
57
|
+
t && e["input-style-focused"],
|
|
58
|
+
i && e["input-style-disabled"]
|
|
64
59
|
].filter(Boolean).join(" "), C = [
|
|
65
|
-
|
|
66
|
-
i &&
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
].filter(Boolean).join(" "), w =
|
|
60
|
+
e["input-style-error"],
|
|
61
|
+
i && e["input-style-error-disabled"],
|
|
62
|
+
t && e["input-style-error-focused"],
|
|
63
|
+
t && l && e["input-style-error-focus-background"]
|
|
64
|
+
].filter(Boolean).join(" "), w = [
|
|
65
|
+
e["input-style-success"],
|
|
66
|
+
i && e["input-style-success-disabled"],
|
|
67
|
+
t && e["input-style-success-focused"],
|
|
68
|
+
t && l && e["input-style-success-focus-background"]
|
|
69
|
+
].filter(Boolean).join(" "), F = () => {
|
|
70
70
|
switch (a) {
|
|
71
71
|
case "error":
|
|
72
|
-
return N;
|
|
73
|
-
case "success":
|
|
74
72
|
return C;
|
|
73
|
+
case "success":
|
|
74
|
+
return w;
|
|
75
75
|
default:
|
|
76
|
-
return
|
|
76
|
+
return N;
|
|
77
77
|
}
|
|
78
|
-
},
|
|
79
|
-
|
|
80
|
-
|
|
78
|
+
}, k = [
|
|
79
|
+
e["floating-input"],
|
|
80
|
+
e[`floating-input-size-${u}`]
|
|
81
81
|
].join(" "), I = {
|
|
82
82
|
"--dynamic-color": `var(--color-${n}-${r ? "800" : "300"})`,
|
|
83
83
|
"--dynamic-color-border": `var(--color-${n}-${r ? "800" : "300"})`,
|
|
@@ -87,22 +87,22 @@ import '../../styles/Input.css';const A = "_flexHorizontalBetween_dkt9v_197", E
|
|
|
87
87
|
"--dynamic-color-border": "var(--color-blue-situaction-800)",
|
|
88
88
|
"--dynamic-background-color": `${l ? "var(--color-blue-situaction-50)" : "transparent"}`
|
|
89
89
|
};
|
|
90
|
-
return /* @__PURE__ */ _("div", { ref:
|
|
90
|
+
return /* @__PURE__ */ _("div", { ref: $, className: `input-style ${B} ${g} ${F()} gap-xs-2`, onFocus: H, onBlur: S, style: n ? I : V, children: [
|
|
91
91
|
c && /* @__PURE__ */ s("span", { className: "", children: c }),
|
|
92
|
-
/* @__PURE__ */ s("div", { className:
|
|
92
|
+
/* @__PURE__ */ s("div", { className: e["input-container"], children: /* @__PURE__ */ s(
|
|
93
93
|
"input",
|
|
94
94
|
{
|
|
95
95
|
autoCorrect: "false",
|
|
96
|
-
className:
|
|
97
|
-
placeholder:
|
|
98
|
-
value:
|
|
99
|
-
onChange:
|
|
100
|
-
...
|
|
96
|
+
className: k,
|
|
97
|
+
placeholder: z,
|
|
98
|
+
value: h,
|
|
99
|
+
onChange: j,
|
|
100
|
+
...b
|
|
101
101
|
}
|
|
102
102
|
) }),
|
|
103
103
|
/* @__PURE__ */ _(R, { children: [
|
|
104
104
|
o && /* @__PURE__ */ s("div", { children: o }),
|
|
105
|
-
p && /* @__PURE__ */ s("span", { className:
|
|
105
|
+
p && /* @__PURE__ */ s("span", { className: e.flexHorizontal, children: p })
|
|
106
106
|
] })
|
|
107
107
|
] });
|
|
108
108
|
};
|
|
@@ -1,26 +1,32 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { createContext as
|
|
1
|
+
import { jsx as E } from "react/jsx-runtime";
|
|
2
|
+
import { createContext as F, useState as v, useEffect as P, useContext as S } from "react";
|
|
3
3
|
import { baseTheme as r } from "./createTheme.js";
|
|
4
|
-
import '../../styles/ThemeContext.css';const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
4
|
+
import '../../styles/ThemeContext.css';const f = F(void 0), M = ({ children: y, theme: s, mode: g }) => {
|
|
5
|
+
const [o] = v(s ?? r), [a, $] = v(g ?? "light"), x = () => {
|
|
6
|
+
$((t) => t === "light" ? "dark" : "light");
|
|
7
|
+
}, b = (t) => [950, 900, 800, 700, 600, 500, 400, 300, 200, 100, 50].reduce((l, i) => (l[`--primary-color-${i}`] = `var(--color-${t}-${i})`, l), {});
|
|
8
|
+
return P(() => {
|
|
9
|
+
var c, l, i, e, p, d, m, n;
|
|
10
|
+
const t = {
|
|
11
|
+
"--font-family": ((c = o == null ? void 0 : o.typography) == null ? void 0 : c.fontFamily) ?? r.typography.fontFamily,
|
|
12
|
+
"--font-family-secondary": ((l = o == null ? void 0 : o.typography) == null ? void 0 : l.fontFamilySecondary) ?? r.typography.fontFamilySecondary,
|
|
13
|
+
...b(((i = o == null ? void 0 : o.color) == null ? void 0 : i.primary) ?? r.color.primary),
|
|
14
|
+
"--primary-dark-color-disabled": s === void 0 ? "var(--color-blue-grey-800)" : "var(--color-dark-10)",
|
|
15
|
+
"--primary-color": a === "light" ? `var(--color-${((e = o == null ? void 0 : o.color) == null ? void 0 : e.primary) ?? r.color.primary}-900)` : `var(--color-${((p = o == null ? void 0 : o.color) == null ? void 0 : p.primary) ?? r.color.primary}-200)`,
|
|
16
|
+
"--secondary-color": a === "light" ? `var(--color-${((d = o == null ? void 0 : o.color) == null ? void 0 : d.primary) ?? r.color.primary}-200)` : `var(--color-${((m = o == null ? void 0 : o.color) == null ? void 0 : m.primary) ?? r.color.primary}-900)`,
|
|
17
|
+
"--color-text": a === "light" ? `var(--color-${((n = o == null ? void 0 : o.color) == null ? void 0 : n.primary) ?? r.color.primary}-900)` : "var(--color-light-100)"
|
|
18
|
+
};
|
|
19
|
+
Object.entries(t).forEach(([h, C]) => {
|
|
20
|
+
document.documentElement.style.setProperty(h, C);
|
|
21
|
+
});
|
|
22
|
+
}, [o, a]), /* @__PURE__ */ E(f.Provider, { value: { theme: o, mode: a, toggleMode: x }, children: y });
|
|
23
|
+
}, j = () => {
|
|
24
|
+
const y = S(f);
|
|
25
|
+
if (y === void 0)
|
|
20
26
|
throw new Error("useTheme must be used within a ThemeProvider");
|
|
21
|
-
return
|
|
27
|
+
return y;
|
|
22
28
|
};
|
|
23
29
|
export {
|
|
24
|
-
|
|
25
|
-
|
|
30
|
+
M as ThemeProvider,
|
|
31
|
+
j as useTheme
|
|
26
32
|
};
|
package/dist/styles/Button.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@font-face{font-family:Urbanist-Thin;src:url(../fonts/Urbanist-Thin.ttf) format("truetype");font-weight:100;font-style:normal}@font-face{font-family:Urbanist-Extra-Light;src:url(../fonts/Urbanist-ExtraLight.ttf) format("truetype");font-weight:200;font-style:normal}@font-face{font-family:Urbanist-Light;src:url(../fonts/Urbanist-Light.ttf) format("truetype");font-weight:300;font-style:normal}@font-face{font-family:Urbanist-Regular;src:url(../fonts/Urbanist-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Urbanist;src:url(../fonts/Urbanist-Medium.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:Urbanist-Back;src:url(../fonts/Urbanist-Black.ttf) format("truetype");font-weight:600;font-style:normal}@font-face{font-family:Urbanist-Semi-Bold;src:url(../fonts/Urbanist-SemiBold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:Urbanist-Bold;src:url(../fonts/Urbanist-Bold.ttf) format("truetype");font-weight:800;font-style:normal}@font-face{font-family:Urbanist-Extra-Bold;src:url(../fonts/Urbanist-ExtraBold.ttf) format("truetype");font-weight:900;font-style:normal}:root,body{font-family:Urbanist,sans-serif;line-height:1;width:100vw;height:100vh}
|
|
1
|
+
@font-face{font-family:Urbanist-Thin;src:url(../fonts/Urbanist-Thin.ttf) format("truetype");font-weight:100;font-style:normal}@font-face{font-family:Urbanist-Extra-Light;src:url(../fonts/Urbanist-ExtraLight.ttf) format("truetype");font-weight:200;font-style:normal}@font-face{font-family:Urbanist-Light;src:url(../fonts/Urbanist-Light.ttf) format("truetype");font-weight:300;font-style:normal}@font-face{font-family:Urbanist-Regular;src:url(../fonts/Urbanist-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Urbanist;src:url(../fonts/Urbanist-Medium.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:Urbanist-Back;src:url(../fonts/Urbanist-Black.ttf) format("truetype");font-weight:600;font-style:normal}@font-face{font-family:Urbanist-Semi-Bold;src:url(../fonts/Urbanist-SemiBold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:Urbanist-Bold;src:url(../fonts/Urbanist-Bold.ttf) format("truetype");font-weight:800;font-style:normal}@font-face{font-family:Urbanist-Extra-Bold;src:url(../fonts/Urbanist-ExtraBold.ttf) format("truetype");font-weight:900;font-style:normal}:root,body{font-family:Urbanist,sans-serif;line-height:1;width:100vw;height:100vh}._button_1b5ik_21{font-family:var(--font-family);font-weight:500;border:0;border-radius:8px;cursor:pointer;width:fit-content}._button_1b5ik_21:focus{outline:none}._button_1b5ik_21:disabled{background-color:#0f0f0f0d;color:#0f0f0f66;border:1px solid rgba(15,15,15,.1);cursor:initial;pointer-events:none}._button_1b5ik_21:disabled *{fill:#0f0f0f66}._button-primary_1b5ik_43{color:var(--dynamic-color-text);background-color:var(--dynamic-color)}._button-primary_1b5ik_43:hover{background-color:var(--dynamic-color-hover)}._button-primary_1b5ik_43:active{background-color:var(--dynamic-color-activated);outline:none}._button-primary_1b5ik_43 *{fill:var(--dynamic-color-text)}._button-secondary_1b5ik_57{color:var(--color-text);background-color:#96b4ee33;border:1px solid rgba(150,180,238,.5)}._button-secondary_1b5ik_57:hover{background-color:#96b4ee66}._button-secondary_1b5ik_57:active{background-color:#96b4ee99}._button-secondary_1b5ik_57 *{fill:var(--color-text)}._button-tertiary_1b5ik_71{color:var(--color-text);background-color:transparent;border:1px solid rgba(150,180,238,.5)}._button-tertiary_1b5ik_71:hover{background-color:#96b4ee1a}._button-tertiary_1b5ik_71:active{background-color:#96b4ee33}._button-tertiary_1b5ik_71 *{fill:var(--color-text)}._button-ghost_1b5ik_85{color:var(--color-text);background-color:transparent}._button-ghost_1b5ik_85:hover{background-color:#96b4ee1a}._button-ghost_1b5ik_85:active{background-color:#96b4ee33}._button-ghost_1b5ik_85:disabled{border:none}._button-ghost_1b5ik_85 *{fill:var(--color-text)}._button-text_1b5ik_101{color:#96b4eecc;background-color:transparent;padding:0!important}._button-text_1b5ik_101:hover{color:#96b4ee}._button-text_1b5ik_101:disabled{border:none;background-color:transparent;color:#a5b4bb}._button-text-selected_1b5ik_114,._button-text-selected_1b5ik_114:hover{color:var(--color-text)}._button-error_1b5ik_120{color:#fff;background-color:#ff4747}._button-error_1b5ik_120:hover{background-color:#ed1515}._button-error_1b5ik_120:active{background-color:#c80d0d}._button-error_1b5ik_120 *{fill:var(--color-text)}._button-size-xl_1b5ik_133{padding:1rem 2rem;font-size:1.125em;line-height:28px}._button-size-l_1b5ik_138{padding:.75rem 1.5rem;font-size:1em;line-height:24px}._button-size-m_1b5ik_143{padding:.5rem 1rem;font-size:.875em;line-height:22px}._button-size-s_1b5ik_148{padding:.375rem .75rem;font-size:.75em;line-height:16px}._button-gap-xl_1b5ik_153{gap:12px}._button-gap-l_1b5ik_156{gap:8px}._button-gap-m_1b5ik_159,._button-gap-s_1b5ik_159{gap:4px}._flexHorizontalCenter_1b5ik_163{display:flex;justify-content:center;align-items:center;flex-direction:row}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._checkbox_1cb1z_21{cursor:pointer;display:flex;align-items:center;justify-content:center;border:1px solid var(--primary-color-950);padding:.125rem}._checkbox_1cb1z_21._dark-mode_1cb1z_29{border:1px solid #FFF}._checkbox_1cb1z_21._checked_1cb1z_32{background-color:var(--primary-color-950)}._checkbox_1cb1z_21._checked_1cb1z_32 *{fill:#fff}._checkbox_1cb1z_21._checked_1cb1z_32._dark-mode_1cb1z_29{background-color:#fff}._checkbox_1cb1z_21._checked_1cb1z_32._dark-mode_1cb1z_29 *{fill:#09090b}._checkbox_1cb1z_21._disabled_1cb1z_44{border:1px solid rgba(15,15,15,.2);pointer-events:none}._checkbox_1cb1z_21._disabled_1cb1z_44._dark-mode_1cb1z_29{border:1px solid rgba(255,255,255,.2)}._checkbox_1cb1z_21._disabled_1cb1z_44._checked_1cb1z_32{border:1px solid transparent;background-color:#0f0f0f33}._checkbox_1cb1z_21._disabled_1cb1z_44._checked_1cb1z_32._dark-mode_1cb1z_29{background-color:#fff3}._checkbox-size-s_1cb1z_58{width:10px;height:10px;border-radius:.063rem}._checkbox-size-m_1cb1z_63{width:12px;height:12px;border-radius:.125rem}._checkbox-size-l_1cb1z_68{width:14px;height:14px;border-radius:.125rem}._checkbox-size-xl_1cb1z_73{width:16px;height:16px;border-radius:.125rem}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
._button_1tm5w_21{font-family:var(--font-family);font-weight:500;border:0;cursor:pointer;line-height:1;box-shadow:0 4px 10px #00000008;display:inline-flex;justify-content:center;align-items:center;min-width:12px;min-height:12px;aspect-ratio:1/1}._button_1tm5w_21:focus{outline:none}._button_1tm5w_21:disabled{background-color:#0f0f0f0d;color:#0f0f0f66;border:1px solid rgba(15,15,15,.1);cursor:initial;pointer-events:none}._button_1tm5w_21:disabled *{fill:#0f0f0f66}._button-round_1tm5w_49._button_1tm5w_21{border-radius:50%}._button-primary_1tm5w_52{color:var(--dynamic-color-text);background-color:var(--dynamic-color)}._button-primary_1tm5w_52:hover{background-color:var(--dynamic-color-hover)}._button-primary_1tm5w_52:active{background-color:var(--dynamic-color-activated)}._button-primary_1tm5w_52 *{fill:var(--dynamic-color-text)}._button-secondary_1tm5w_65{color:var(--color-text);background-color:#96b4ee33;border:1px solid rgba(150,180,238,.5)}._button-secondary_1tm5w_65:hover{background-color:#96b4ee66}._button-secondary_1tm5w_65:active{background-color:#96b4ee99}._button-secondary_1tm5w_65 *{fill:var(--color-text)}._button-tertiary_1tm5w_79{color:var(--color-text);background-color:transparent;border:1px solid rgba(150,180,238,.5)}._button-tertiary_1tm5w_79:hover{background-color:#96b4ee1a}._button-tertiary_1tm5w_79:active{background-color:#96b4ee33}._button-tertiary_1tm5w_79 *{fill:var(--color-text)}._button-ghost_1tm5w_93{color:var(--color-text);background-color:transparent}._button-ghost_1tm5w_93:hover{background-color:#96b4ee1a}._button-ghost_1tm5w_93:active{background-color:#96b4ee33}._button-ghost_1tm5w_93 *{fill:var(--dynamic-color-text)}._button-text_1tm5w_106{color:#96b4eecc;background-color:transparent}._button-text_1tm5w_106:hover{color:#96b4ee}._button-text_1tm5w_106:disabled{border:none;background-color:transparent;color:#a5b4bb}._button-text-selected_1tm5w_118,._button-text-selected_1tm5w_118:hover{color:var(--color-text)}._button-error_1tm5w_124{color:#fff;background-color:#ff4747}._button-error_1tm5w_124:hover{background-color:#ed1515}._button-error_1tm5w_124:active{background-color:#c80d0d}._button-error_1tm5w_124 *{fill:var(--color-text)}._button-size-xl_1tm5w_137{border-radius:.5rem;padding:1rem;font-size:1.125em}._button-size-l_1tm5w_142{border-radius:.5rem;padding:.75rem;font-size:1em}._button-size-m_1tm5w_147{border-radius:.25rem;padding:.5rem;font-size:.875em}._button-size-s_1tm5w_152{border-radius:.25rem;padding:.375rem;font-size:.75em}._flexHorizontalCenter_1tm5w_158{display:flex;justify-content:center;align-items:center;flex-direction:row}
|
package/dist/styles/Input.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
input{font-family:Urbanist,sans-serif;border:none;background-color:transparent}input:focus{outline:none;box-shadow:none;border-color:transparent}._input-style_1edvz_33{font-family:Urbanist,sans-serif;border:1px solid var(--dynamic-color-border);box-shadow:0 4px 5px #0000000a;color:var(--dynamic-color);position:relative}._input-style_1edvz_33 input{color:var(--dynamic-color)}._input-style-ghost_1edvz_44{border-bottom:solid #A5B4BB;border-width:0 0 1px 0;border-radius:0!important}._input-style-disabled_1edvz_49{background-color:#fff;border-color:#a5b4bb;pointer-events:none;color:#a5b4bb}._input-style-disabled_1edvz_49 input{color:#a5b4bb}._input-style-focused_1edvz_58{color:var(--dynamic-color);border-color:var(--dynamic-color-border);background-color:var(--dynamic-background-color)}._input-style-error_1edvz_63{border-color:#ff4747;color:#ff4747}._input-style-error_1edvz_63 input,._input-style-error-focused_1edvz_70,._input-style-error-focused_1edvz_70 input{color:#ff4747}._input-style-error-focus-background_1edvz_76{background-color:#fff1f1}._input-style-error-disabled_1edvz_79{background-color:#fff1f1;border-color:#ff9d9d;color:#ff9d9d}._input-style-error-disabled_1edvz_79 input{color:#ff9d9d}._input-style-success_1edvz_87{border-color:#33b449;color:#33b449}._input-style-success_1edvz_87 input,._input-style-success-focused_1edvz_94,._input-style-success-focused_1edvz_94 input{color:#33b449}._input-style-success-focus-background_1edvz_100{background-color:#f1fcf3}._input-style-success-disabled_1edvz_103{background-color:#f1fcf3;border-color:#91e49e;color:#91e49e}._input-style-success-disabled_1edvz_103 input{color:#91e49e}._input-style_1edvz_33 ._input-container_1edvz_111{position:relative;width:100%}._input-style_1edvz_33 ._floating-input_1edvz_115{display:block;width:100%;box-sizing:border-box}._input-style_1edvz_33 ._floating-input-size-xl_1edvz_121{font-size:1.125em;line-height:28px}._input-style_1edvz_33 ._floating-input-size-l_1edvz_125{font-size:1em;line-height:24px}._input-style_1edvz_33 ._floating-input-size-m_1edvz_129{font-size:.875em;line-height:22px}._input-style_1edvz_33 ._floating-input-size-s_1edvz_133{font-size:.875em;line-height:20px}._input-style-size-xl_1edvz_137{padding:1rem;font-size:1.125em;line-height:28px;border-radius:8px}._input-style-size-l_1edvz_143{padding:.75rem;font-size:1em;line-height:24px;border-radius:8px}._input-style-size-m_1edvz_149{padding:.5rem;font-size:.875em;line-height:22px;border-radius:8px}._input-style-size-s_1edvz_155{padding:.375rem;font-size:.875em;line-height:20px;border-radius:4px}._input-style-radius_1edvz_161{border-radius:50px}._flexHorizontalBetween_1edvz_165{display:flex;justify-content:space-between;align-items:center;flex-direction:row}._flexHorizontal_1edvz_165{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}
|
package/dist/styles/main.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.padding-xs-7{padding:.125rem}.padding-xs-6{padding:.25rem}.padding-xs-5{padding:.375rem}.padding-xs-4{padding:.5rem}.padding-xs-3{padding:.625rem}.padding-xs-2{padding:.75rem}.padding-xs{padding:.875rem}.padding-s{padding:1rem}.padding-m-1{padding:1.125rem}.padding-m-2{padding:1.25rem}.padding-l{padding:1.5rem}.padding-xl{padding:1.75rem}.padding-xl-2{padding:2rem}.padding-xl-3{padding:2.25rem}.padding-xl-4{padding:2.75rem}.padding-xl-5{padding:3rem}.padding-xl-6{padding:4rem}.padding-h-xs-7{padding:0 .125rem}.padding-h-xs-6{padding:0 .25rem}.padding-h-xs-5{padding:0 .375rem}.padding-h-xs-4{padding:0 .5rem}.padding-h-xs-3{padding:0 .625rem}.padding-h-xs-2{padding:0 .75rem}.padding-h-xs{padding:0 .875rem}.padding-h-s{padding:0 1rem}.padding-h-m-1{padding:0 1.125rem}.padding-h-m-2{padding:0 1.25rem}.padding-h-l{padding:0 1.5rem}.padding-h-xl{padding:0 1.75rem}.padding-h-xl-2{padding:0 2rem}.padding-h-xl-3{padding:0 2.25rem}.padding-h-xl-4{padding:0 2.75rem}.padding-h-xl-5{padding:0 3rem}.padding-h-xl-6{padding:0 4rem}.padding-v-xs-7{padding:.125rem 0}.padding-v-xs-6{padding:.25rem 0}.padding-v-xs-5{padding:.375rem 0}.padding-v-xs-4{padding:.5rem 0}.padding-v-xs-3{padding:.625rem 0}.padding-v-xs-2{padding:.75rem 0}.padding-v-xs{padding:.875rem 0}.padding-v-s{padding:1rem 0}.padding-v-m-1{padding:1.125rem 0}.padding-v-m-2{padding:1.25rem 0}.padding-v-l{padding:1.5rem 0}.padding-v-xl{padding:1.75rem 0}.padding-v-xl-2{padding:2rem 0}.padding-v-xl-3{padding:2.25rem 0}.padding-v-xl-4{padding:2.75rem 0}.padding-v-xl-5{padding:3rem 0}.padding-v-xl-6{padding:4rem 0}.padding-l-xs-7{padding:0 .125rem}.padding-l-xs-6{padding:0 .25rem}.padding-l-xs-5{padding:0 .375rem}.padding-l-xs-4{padding:0 .5rem}.padding-l-xs-3{padding:0 .625rem}.padding-l-xs-2{padding:0 .75rem}.padding-l-xs{padding:0 .875rem}.padding-l-s{padding:0 1rem}.padding-l-m-1{padding:0 1.125rem}.padding-l-m-2{padding:0 1.25rem}.padding-l-l{padding:0 1.5rem}.padding-l-xl{padding:0 1.75rem}.padding-l-xl-2{padding:0 2rem}.padding-l-xl-3{padding:0 2.25rem}.padding-l-xl-4{padding:0 2.75rem}.padding-l-xl-5{padding:0 3rem}.padding-l-xl-6{padding:0 4rem}.padding-r-xs-7{padding:0 .125rem}.padding-r-xs-6{padding:0 .25rem}.padding-r-xs-5{padding:0 .375rem}.padding-r-xs-4{padding:0 .5rem}.padding-r-xs-3{padding:0 .625rem}.padding-r-xs-2{padding:0 .75rem}.padding-r-xs{padding:0 .875rem}.padding-r-s{padding:0 1rem}.padding-r-m-1{padding:0 1.125rem}.padding-r-m-2{padding:0 1.25rem}.padding-r-l{padding:0 1.5rem}.padding-r-xl{padding:0 1.75rem}.padding-r-xl-2{padding:0 2rem}.padding-r-xl-3{padding:0 2.25rem}.padding-r-xl-4{padding:0 2.75rem}.padding-r-xl-5{padding:0 3rem}.padding-r-xl-6{padding:0 4rem}.padding-top-xs-7{padding-top:.125rem}.padding-top-xs-6{padding-top:.25rem}.padding-top-xs-5{padding-top:.375rem}.padding-top-xs-4{padding-top:.5rem}.padding-top-xs-3{padding-top:.625rem}.padding-top-xs-2{padding-top:.75rem}.padding-top-xs{padding-top:.875rem}.padding-top-s{padding-top:1rem}.padding-top-m-1{padding-top:1.125rem}.padding-top-m-2{padding-top:1.25rem}.padding-top-l{padding-top:1.5rem}.padding-top-xl{padding-top:1.75rem}.padding-top-xl-2{padding-top:2rem}.padding-top-xl-3{padding-top:2.25rem}.padding-top-xl-4{padding-top:2.75rem}.padding-top-xl-5{padding-top:3rem}.padding-top-xl-6{padding-top:4rem}.padding-bottom-xs-7{padding-bottom:.125rem}.padding-bottom-xs-6{padding-bottom:.25rem}.padding-bottom-xs-5{padding-bottom:.375rem}.padding-bottom-xs-4{padding-bottom:.5rem}.padding-bottom-xs-3{padding-bottom:.625rem}.padding-bottom-xs-2{padding-bottom:.75rem}.padding-bottom-xs{padding-bottom:.875rem}.padding-bottom-s{padding-bottom:1rem}.padding-bottom-m-1{padding-bottom:1.125rem}.padding-bottom-m-2{padding-bottom:1.25rem}.padding-bottom-l{padding-bottom:1.5rem}.padding-bottom-xl{padding-bottom:1.75rem}.padding-bottom-xl-2{padding-bottom:2rem}.padding-bottom-xl-3{padding-bottom:2.25rem}.padding-bottom-xl-4{padding-bottom:2.75rem}.padding-bottom-xl-5{padding-bottom:3rem}.padding-bottom-xl-6{padding-bottom:4rem}.margin-xs-7{margin:.125rem}.margin-xs-6{margin:.25rem}.margin-xs-5{margin:.375rem}.margin-xs-4{margin:.5rem}.margin-xs-3{margin:.625rem}.margin-xs-2{margin:.75rem}.margin-xs{margin:.875rem}.margin-s{margin:1rem}.margin-m-1{margin:1.125rem}.margin-m-2{margin:1.25rem}.margin-l{margin:1.5rem}.margin-xl{margin:1.75rem}.margin-xl-2{margin:2rem}.margin-xl-3{margin:2.25rem}.margin-xl-4{margin:2.75rem}.margin-xl-5{margin:3rem}.margin-xl-6{margin:4rem}.margin-h-xs-7{margin:0 .125rem}.margin-h-xs-6{margin:0 .25rem}.margin-h-xs-5{margin:0 .375rem}.margin-h-xs-4{margin:0 .5rem}.margin-h-xs-3{margin:0 .625rem}.margin-h-xs-2{margin:0 .75rem}.margin-h-xs{margin:0 .875rem}.margin-h-s{margin:0 1rem}.margin-h-m-1{margin:0 1.125rem}.margin-h-m-2{margin:0 1.25rem}.margin-h-l{margin:0 1.5rem}.margin-h-xl{margin:0 1.75rem}.margin-h-xl-2{margin:0 2rem}.margin-h-xl-3{margin:0 2.25rem}.margin-h-xl-4{margin:0 2.75rem}.margin-h-xl-5{margin:0 3rem}.margin-h-xl-6{margin:0 4rem}.margin-v-xs-7{margin:.125rem 0}.margin-v-xs-6{margin:.25rem 0}.margin-v-xs-5{margin:.375rem 0}.margin-v-xs-4{margin:.5rem 0}.margin-v-xs-3{margin:.625rem 0}.margin-v-xs-2{margin:.75rem 0}.margin-v-xs{margin:.875rem 0}.margin-v-s{margin:1rem 0}.margin-v-m-1{margin:1.125rem 0}.margin-v-m-2{margin:1.25rem 0}.margin-v-l{margin:1.5rem 0}.margin-v-xl{margin:1.75rem 0}.margin-v-xl-2{margin:2rem 0}.margin-v-xl-3{margin:2.25rem 0}.margin-v-xl-4{margin:2.75rem 0}.margin-v-xl-5{margin:3rem 0}.margin-v-xl-6{margin:4rem 0}.margin-l-xs-7{margin-left:.125rem}.margin-l-xs-6{margin-left:.25rem}.margin-l-xs-5{margin-left:.375rem}.margin-l-xs-4{margin-left:.5rem}.margin-l-xs-3{margin-left:.625rem}.margin-l-xs-2{margin-left:.75rem}.margin-l-xs{margin-left:.875rem}.margin-l-s{margin-left:1rem}.margin-l-m-1{margin-left:1.125rem}.margin-l-m-2{margin-left:1.25rem}.margin-l-l{margin-left:1.5rem}.margin-l-xl{margin-left:1.75rem}.margin-l-xl-2{margin-left:2rem}.margin-l-xl-3{margin-left:2.25rem}.margin-l-xl-4{margin-left:2.75rem}.margin-l-xl-5{margin-left:3rem}.margin-l-xl-6{margin-left:4rem}.margin-r-xs-7{margin-right:.125rem}.margin-r-xs-6{margin-right:.25rem}.margin-r-xs-5{margin-right:.375rem}.margin-r-xs-4{margin-right:.5rem}.margin-r-xs-3{margin-right:.625rem}.margin-r-xs-2{margin-right:.75rem}.margin-r-xs{margin-right:.875rem}.margin-r-s{margin-right:1rem}.margin-r-m-1{margin-right:1.125rem}.margin-r-m-2{margin-right:1.25rem}.margin-r-l{margin-right:1.5rem}.margin-r-xl{margin-right:1.75rem}.margin-r-xl-2{margin-right:2rem}.margin-r-xl-3{margin-right:2.25rem}.margin-r-xl-4{margin-right:2.75rem}.margin-r-xl-5{margin-right:3rem}.margin-r-xl-6{margin-right:4rem}.margin-top-xs-7{margin-top:.125rem}.margin-top-xs-6{margin-top:.25rem}.margin-top-xs-5{margin-top:.375rem}.margin-top-xs-4{margin-top:.5rem}.margin-top-xs-3{margin-top:.625rem}.margin-top-xs-2{margin-top:.75rem}.margin-top-xs{margin-top:.875rem}.margin-top-s{margin-top:1rem}.margin-top-m-1{margin-top:1.125rem}.margin-top-m-2{margin-top:1.25rem}.margin-top-l{margin-top:1.5rem}.margin-top-xl{margin-top:1.75rem}.margin-top-xl-2{margin-top:2rem}.margin-top-xl-3{margin-top:2.25rem}.margin-top-xl-4{margin-top:2.75rem}.margin-top-xl-5{margin-top:3rem}.margin-top-xl-6{margin-top:4rem}.margin-bottom-xs-7{margin-bottom:.125rem}.margin-bottom-xs-6{margin-bottom:.25rem}.margin-bottom-xs-5{margin-bottom:.375rem}.margin-bottom-xs-4{margin-bottom:.5rem}.margin-bottom-xs-3{margin-bottom:.625rem}.margin-bottom-xs-2{margin-bottom:.75rem}.margin-bottom-xs{margin-bottom:.875rem}.margin-bottom-s{margin-bottom:1rem}.margin-bottom-m-1{margin-bottom:1.125rem}.margin-bottom-m-2{margin-bottom:1.25rem}.margin-bottom-l{margin-bottom:1.5rem}.margin-bottom-xl{margin-bottom:1.75rem}.margin-bottom-xl-2{margin-bottom:2rem}.margin-bottom-xl-3{margin-bottom:2.25rem}.margin-bottom-xl-4{margin-bottom:2.75rem}.margin-bottom-xl-5{margin-bottom:3rem}.margin-bottom-xl-6{margin-bottom:4rem}.fontSize10{font-size:.625em}.fontSize12{font-size:.75em}.fontSize14{font-size:.875em}.fontSize16{font-size:1em}.fontSize18{font-size:1.125em}.fontSize20{font-size:1.25em}.fontSize22{font-size:1.375em}.fontSize24{font-size:1.5em}.fontSize30{font-size:1.875em}.fontSize32{font-size:2em}.fontSize40{font-size:3em}.fontSize64{font-size:4em}.gap-xs-7{gap:.125rem}.gap-xs-6{gap:.25rem}.gap-xs-5{gap:.375rem}.gap-xs-4{gap:.5rem}.gap-xs-3{gap:.625rem}.gap-xs-2{gap:.75rem}.gap-xs{gap:.875rem}.gap-s{gap:1rem}.gap-m-1{gap:1.125rem}.gap-m-2{gap:1.25rem}.gap-l{gap:1.5rem}.gap-xl{gap:1.75rem}.gap-xl-2{gap:2rem}.gap-xl-3{gap:2.25rem}.gap-xl-4{gap:2.75rem}.gap-xl-5{gap:3rem}.gap-xl-6{gap:4rem}
|
|
1
|
+
.padding-xs-7{padding:.125rem}.padding-xs-6{padding:.25rem}.padding-xs-5{padding:.375rem}.padding-xs-4{padding:.5rem}.padding-xs-3{padding:.625rem}.padding-xs-2{padding:.75rem}.padding-xs{padding:.875rem}.padding-s{padding:1rem}.padding-m-1{padding:1.125rem}.padding-m-2{padding:1.25rem}.padding-l{padding:1.5rem}.padding-xl{padding:1.75rem}.padding-xl-2{padding:2rem}.padding-xl-3{padding:2.25rem}.padding-xl-4{padding:2.75rem}.padding-xl-5{padding:3rem}.padding-xl-6{padding:4rem}.padding-h-xs-7{padding:0 .125rem}.padding-h-xs-6{padding:0 .25rem}.padding-h-xs-5{padding:0 .375rem}.padding-h-xs-4{padding:0 .5rem}.padding-h-xs-3{padding:0 .625rem}.padding-h-xs-2{padding:0 .75rem}.padding-h-xs{padding:0 .875rem}.padding-h-s{padding:0 1rem}.padding-h-m-1{padding:0 1.125rem}.padding-h-m-2{padding:0 1.25rem}.padding-h-l{padding:0 1.5rem}.padding-h-xl{padding:0 1.75rem}.padding-h-xl-2{padding:0 2rem}.padding-h-xl-3{padding:0 2.25rem}.padding-h-xl-4{padding:0 2.75rem}.padding-h-xl-5{padding:0 3rem}.padding-h-xl-6{padding:0 4rem}.padding-v-xs-7{padding:.125rem 0}.padding-v-xs-6{padding:.25rem 0}.padding-v-xs-5{padding:.375rem 0}.padding-v-xs-4{padding:.5rem 0}.padding-v-xs-3{padding:.625rem 0}.padding-v-xs-2{padding:.75rem 0}.padding-v-xs{padding:.875rem 0}.padding-v-s{padding:1rem 0}.padding-v-m-1{padding:1.125rem 0}.padding-v-m-2{padding:1.25rem 0}.padding-v-l{padding:1.5rem 0}.padding-v-xl{padding:1.75rem 0}.padding-v-xl-2{padding:2rem 0}.padding-v-xl-3{padding:2.25rem 0}.padding-v-xl-4{padding:2.75rem 0}.padding-v-xl-5{padding:3rem 0}.padding-v-xl-6{padding:4rem 0}.padding-l-xs-7{padding:0 .125rem}.padding-l-xs-6{padding:0 .25rem}.padding-l-xs-5{padding:0 .375rem}.padding-l-xs-4{padding:0 .5rem}.padding-l-xs-3{padding:0 .625rem}.padding-l-xs-2{padding:0 .75rem}.padding-l-xs{padding:0 .875rem}.padding-l-s{padding:0 1rem}.padding-l-m-1{padding:0 1.125rem}.padding-l-m-2{padding:0 1.25rem}.padding-l-l{padding:0 1.5rem}.padding-l-xl{padding:0 1.75rem}.padding-l-xl-2{padding:0 2rem}.padding-l-xl-3{padding:0 2.25rem}.padding-l-xl-4{padding:0 2.75rem}.padding-l-xl-5{padding:0 3rem}.padding-l-xl-6{padding:0 4rem}.padding-r-xs-7{padding:0 .125rem}.padding-r-xs-6{padding:0 .25rem}.padding-r-xs-5{padding:0 .375rem}.padding-r-xs-4{padding:0 .5rem}.padding-r-xs-3{padding:0 .625rem}.padding-r-xs-2{padding:0 .75rem}.padding-r-xs{padding:0 .875rem}.padding-r-s{padding:0 1rem}.padding-r-m-1{padding:0 1.125rem}.padding-r-m-2{padding:0 1.25rem}.padding-r-l{padding:0 1.5rem}.padding-r-xl{padding:0 1.75rem}.padding-r-xl-2{padding:0 2rem}.padding-r-xl-3{padding:0 2.25rem}.padding-r-xl-4{padding:0 2.75rem}.padding-r-xl-5{padding:0 3rem}.padding-r-xl-6{padding:0 4rem}.padding-top-xs-7{padding-top:.125rem}.padding-top-xs-6{padding-top:.25rem}.padding-top-xs-5{padding-top:.375rem}.padding-top-xs-4{padding-top:.5rem}.padding-top-xs-3{padding-top:.625rem}.padding-top-xs-2{padding-top:.75rem}.padding-top-xs{padding-top:.875rem}.padding-top-s{padding-top:1rem}.padding-top-m-1{padding-top:1.125rem}.padding-top-m-2{padding-top:1.25rem}.padding-top-l{padding-top:1.5rem}.padding-top-xl{padding-top:1.75rem}.padding-top-xl-2{padding-top:2rem}.padding-top-xl-3{padding-top:2.25rem}.padding-top-xl-4{padding-top:2.75rem}.padding-top-xl-5{padding-top:3rem}.padding-top-xl-6{padding-top:4rem}.padding-bottom-xs-7{padding-bottom:.125rem}.padding-bottom-xs-6{padding-bottom:.25rem}.padding-bottom-xs-5{padding-bottom:.375rem}.padding-bottom-xs-4{padding-bottom:.5rem}.padding-bottom-xs-3{padding-bottom:.625rem}.padding-bottom-xs-2{padding-bottom:.75rem}.padding-bottom-xs{padding-bottom:.875rem}.padding-bottom-s{padding-bottom:1rem}.padding-bottom-m-1{padding-bottom:1.125rem}.padding-bottom-m-2{padding-bottom:1.25rem}.padding-bottom-l{padding-bottom:1.5rem}.padding-bottom-xl{padding-bottom:1.75rem}.padding-bottom-xl-2{padding-bottom:2rem}.padding-bottom-xl-3{padding-bottom:2.25rem}.padding-bottom-xl-4{padding-bottom:2.75rem}.padding-bottom-xl-5{padding-bottom:3rem}.padding-bottom-xl-6{padding-bottom:4rem}.margin-xs-7{margin:.125rem}.margin-xs-6{margin:.25rem}.margin-xs-5{margin:.375rem}.margin-xs-4{margin:.5rem}.margin-xs-3{margin:.625rem}.margin-xs-2{margin:.75rem}.margin-xs{margin:.875rem}.margin-s{margin:1rem}.margin-m-1{margin:1.125rem}.margin-m-2{margin:1.25rem}.margin-l{margin:1.5rem}.margin-xl{margin:1.75rem}.margin-xl-2{margin:2rem}.margin-xl-3{margin:2.25rem}.margin-xl-4{margin:2.75rem}.margin-xl-5{margin:3rem}.margin-xl-6{margin:4rem}.margin-h-xs-7{margin:0 .125rem}.margin-h-xs-6{margin:0 .25rem}.margin-h-xs-5{margin:0 .375rem}.margin-h-xs-4{margin:0 .5rem}.margin-h-xs-3{margin:0 .625rem}.margin-h-xs-2{margin:0 .75rem}.margin-h-xs{margin:0 .875rem}.margin-h-s{margin:0 1rem}.margin-h-m-1{margin:0 1.125rem}.margin-h-m-2{margin:0 1.25rem}.margin-h-l{margin:0 1.5rem}.margin-h-xl{margin:0 1.75rem}.margin-h-xl-2{margin:0 2rem}.margin-h-xl-3{margin:0 2.25rem}.margin-h-xl-4{margin:0 2.75rem}.margin-h-xl-5{margin:0 3rem}.margin-h-xl-6{margin:0 4rem}.margin-v-xs-7{margin:.125rem 0}.margin-v-xs-6{margin:.25rem 0}.margin-v-xs-5{margin:.375rem 0}.margin-v-xs-4{margin:.5rem 0}.margin-v-xs-3{margin:.625rem 0}.margin-v-xs-2{margin:.75rem 0}.margin-v-xs{margin:.875rem 0}.margin-v-s{margin:1rem 0}.margin-v-m-1{margin:1.125rem 0}.margin-v-m-2{margin:1.25rem 0}.margin-v-l{margin:1.5rem 0}.margin-v-xl{margin:1.75rem 0}.margin-v-xl-2{margin:2rem 0}.margin-v-xl-3{margin:2.25rem 0}.margin-v-xl-4{margin:2.75rem 0}.margin-v-xl-5{margin:3rem 0}.margin-v-xl-6{margin:4rem 0}.margin-l-xs-7{margin-left:.125rem}.margin-l-xs-6{margin-left:.25rem}.margin-l-xs-5{margin-left:.375rem}.margin-l-xs-4{margin-left:.5rem}.margin-l-xs-3{margin-left:.625rem}.margin-l-xs-2{margin-left:.75rem}.margin-l-xs{margin-left:.875rem}.margin-l-s{margin-left:1rem}.margin-l-m-1{margin-left:1.125rem}.margin-l-m-2{margin-left:1.25rem}.margin-l-l{margin-left:1.5rem}.margin-l-xl{margin-left:1.75rem}.margin-l-xl-2{margin-left:2rem}.margin-l-xl-3{margin-left:2.25rem}.margin-l-xl-4{margin-left:2.75rem}.margin-l-xl-5{margin-left:3rem}.margin-l-xl-6{margin-left:4rem}.margin-r-xs-7{margin-right:.125rem}.margin-r-xs-6{margin-right:.25rem}.margin-r-xs-5{margin-right:.375rem}.margin-r-xs-4{margin-right:.5rem}.margin-r-xs-3{margin-right:.625rem}.margin-r-xs-2{margin-right:.75rem}.margin-r-xs{margin-right:.875rem}.margin-r-s{margin-right:1rem}.margin-r-m-1{margin-right:1.125rem}.margin-r-m-2{margin-right:1.25rem}.margin-r-l{margin-right:1.5rem}.margin-r-xl{margin-right:1.75rem}.margin-r-xl-2{margin-right:2rem}.margin-r-xl-3{margin-right:2.25rem}.margin-r-xl-4{margin-right:2.75rem}.margin-r-xl-5{margin-right:3rem}.margin-r-xl-6{margin-right:4rem}.margin-top-xs-7{margin-top:.125rem}.margin-top-xs-6{margin-top:.25rem}.margin-top-xs-5{margin-top:.375rem}.margin-top-xs-4{margin-top:.5rem}.margin-top-xs-3{margin-top:.625rem}.margin-top-xs-2{margin-top:.75rem}.margin-top-xs{margin-top:.875rem}.margin-top-s{margin-top:1rem}.margin-top-m-1{margin-top:1.125rem}.margin-top-m-2{margin-top:1.25rem}.margin-top-l{margin-top:1.5rem}.margin-top-xl{margin-top:1.75rem}.margin-top-xl-2{margin-top:2rem}.margin-top-xl-3{margin-top:2.25rem}.margin-top-xl-4{margin-top:2.75rem}.margin-top-xl-5{margin-top:3rem}.margin-top-xl-6{margin-top:4rem}.margin-bottom-xs-7{margin-bottom:.125rem}.margin-bottom-xs-6{margin-bottom:.25rem}.margin-bottom-xs-5{margin-bottom:.375rem}.margin-bottom-xs-4{margin-bottom:.5rem}.margin-bottom-xs-3{margin-bottom:.625rem}.margin-bottom-xs-2{margin-bottom:.75rem}.margin-bottom-xs{margin-bottom:.875rem}.margin-bottom-s{margin-bottom:1rem}.margin-bottom-m-1{margin-bottom:1.125rem}.margin-bottom-m-2{margin-bottom:1.25rem}.margin-bottom-l{margin-bottom:1.5rem}.margin-bottom-xl{margin-bottom:1.75rem}.margin-bottom-xl-2{margin-bottom:2rem}.margin-bottom-xl-3{margin-bottom:2.25rem}.margin-bottom-xl-4{margin-bottom:2.75rem}.margin-bottom-xl-5{margin-bottom:3rem}.margin-bottom-xl-6{margin-bottom:4rem}.fontSize10{font-size:.625em}.fontSize12{font-size:.75em}.fontSize14{font-size:.875em}.fontSize16{font-size:1em}.fontSize18{font-size:1.125em}.fontSize20{font-size:1.25em}.fontSize22{font-size:1.375em}.fontSize24{font-size:1.5em}.fontSize30{font-size:1.875em}.fontSize32{font-size:2em}.fontSize40{font-size:3em}.fontSize64{font-size:4em}.gap-xs-7{gap:.125rem}.gap-xs-6{gap:.25rem}.gap-xs-5{gap:.375rem}.gap-xs-4{gap:.5rem}.gap-xs-3{gap:.625rem}.gap-xs-2{gap:.75rem}.gap-xs{gap:.875rem}.gap-s{gap:1rem}.gap-m-1{gap:1.125rem}.gap-m-2{gap:1.25rem}.gap-l{gap:1.5rem}.gap-xl{gap:1.75rem}.gap-xl-2{gap:2rem}.gap-xl-3{gap:2.25rem}.gap-xl-4{gap:2.75rem}.gap-xl-5{gap:3rem}.gap-xl-6{gap:4rem}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@situaction/traq-ui-ste",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.17",
|
|
4
4
|
"description": "library react component Situaction",
|
|
5
5
|
"main": "dist/main.js",
|
|
6
6
|
"types": "dist/main.d.ts",
|
|
@@ -43,10 +43,10 @@
|
|
|
43
43
|
"@storybook/react": "^8.3.5",
|
|
44
44
|
"@storybook/react-vite": "^8.3.5",
|
|
45
45
|
"@storybook/test": "^8.3.5",
|
|
46
|
-
"@testing-library/jest-dom": "^6.
|
|
46
|
+
"@testing-library/jest-dom": "^6.6.2",
|
|
47
47
|
"@testing-library/react": "^16.0.0",
|
|
48
48
|
"@testing-library/user-event": "^14.5.2",
|
|
49
|
-
"@types/jest": "^29.5.
|
|
49
|
+
"@types/jest": "^29.5.14",
|
|
50
50
|
"@types/node": "^20.14.2",
|
|
51
51
|
"@types/react": "^18.2.66",
|
|
52
52
|
"@types/react-dom": "^18.2.22",
|