@situaction/traq-ui-ste 1.0.12 → 1.0.14
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 +4 -4
- package/dist/components/button/Button.js +43 -44
- package/dist/components/icon-button/IconButton.d.ts +3 -1
- package/dist/components/icon-button/IconButton.js +37 -34
- package/dist/components/input/Input.d.ts +8 -4
- package/dist/components/input/Input.js +93 -118
- package/dist/components/tag/Tag.js +12 -13
- package/dist/components/title/Title.d.ts +8 -0
- package/dist/components/title/Title.js +11 -0
- package/dist/main.d.ts +1 -0
- package/dist/main.js +9 -7
- package/dist/styles/Button.css +1 -1
- package/dist/styles/IconButton.css +1 -1
- package/dist/styles/Input.css +1 -1
- package/dist/styles/index.css +1 -1
- package/dist/styles/main.css +1 -1
- package/package.json +4 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
1
|
+
import { ButtonHTMLAttributes, FC, ReactNode } from 'react';
|
|
2
2
|
import { Color } from '../interface';
|
|
3
3
|
|
|
4
4
|
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
@@ -8,12 +8,12 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
8
8
|
size?: 's' | 'm' | 'l' | 'xl'; /** How large should the button be? */
|
|
9
9
|
label: string; /** button contents */
|
|
10
10
|
error?: boolean;
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
iconLeft?: ReactNode; /** Additional content inside the input */
|
|
12
|
+
iconRight?: ReactNode; /** Additional content inside the input */
|
|
13
13
|
onClick?: () => void; /** Optional click handler */
|
|
14
14
|
}
|
|
15
15
|
/**
|
|
16
16
|
* Primary UI component for user interaction
|
|
17
17
|
*/
|
|
18
|
-
export declare const Button:
|
|
18
|
+
export declare const Button: FC<ButtonProps>;
|
|
19
19
|
export {};
|
|
@@ -1,64 +1,63 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as p, jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import '../../styles/index.css';import '../../styles/Button.css';/* empty css */
|
|
3
3
|
import { useEffect as z } from "react";
|
|
4
|
-
const c = "
|
|
4
|
+
const c = "_button_dzhnj_190", r = {
|
|
5
5
|
button: c,
|
|
6
|
-
"button-primary": "_button-
|
|
7
|
-
"button-secondary": "_button-
|
|
8
|
-
"button-tertiary": "_button-
|
|
9
|
-
"button-ghost": "_button-
|
|
10
|
-
"button-error": "_button-
|
|
11
|
-
"button-size-xl": "_button-size-
|
|
12
|
-
"button-size-l": "_button-size-
|
|
13
|
-
"button-size-m": "_button-size-
|
|
14
|
-
"button-size-s": "_button-size-
|
|
15
|
-
"button-gap-xl": "_button-gap-
|
|
16
|
-
"button-gap-l": "_button-gap-
|
|
17
|
-
"button-gap-m": "_button-gap-
|
|
18
|
-
"button-gap-s": "_button-gap-
|
|
19
|
-
},
|
|
20
|
-
mode:
|
|
21
|
-
size:
|
|
6
|
+
"button-primary": "_button-primary_dzhnj_214",
|
|
7
|
+
"button-secondary": "_button-secondary_dzhnj_227",
|
|
8
|
+
"button-tertiary": "_button-tertiary_dzhnj_241",
|
|
9
|
+
"button-ghost": "_button-ghost_dzhnj_255",
|
|
10
|
+
"button-error": "_button-error_dzhnj_268",
|
|
11
|
+
"button-size-xl": "_button-size-xl_dzhnj_281",
|
|
12
|
+
"button-size-l": "_button-size-l_dzhnj_286",
|
|
13
|
+
"button-size-m": "_button-size-m_dzhnj_291",
|
|
14
|
+
"button-size-s": "_button-size-s_dzhnj_296",
|
|
15
|
+
"button-gap-xl": "_button-gap-xl_dzhnj_301",
|
|
16
|
+
"button-gap-l": "_button-gap-l_dzhnj_304",
|
|
17
|
+
"button-gap-m": "_button-gap-m_dzhnj_307",
|
|
18
|
+
"button-gap-s": "_button-gap-s_dzhnj_307"
|
|
19
|
+
}, g = ({
|
|
20
|
+
mode: a = "primary",
|
|
21
|
+
size: e = "m",
|
|
22
22
|
color: t,
|
|
23
|
-
colorMode:
|
|
24
|
-
label:
|
|
25
|
-
error:
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
...
|
|
23
|
+
colorMode: n,
|
|
24
|
+
label: u,
|
|
25
|
+
error: b,
|
|
26
|
+
iconLeft: s,
|
|
27
|
+
iconRight: i,
|
|
28
|
+
..._
|
|
29
29
|
}) => {
|
|
30
|
-
const l = () =>
|
|
30
|
+
const l = () => b ? "error" : a;
|
|
31
31
|
z(() => {
|
|
32
|
-
|
|
32
|
+
n && !t && console.warn("`colorMode` is defined but `color` is missing. `colorMode` will be ignored.");
|
|
33
33
|
}, [t]);
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
34
|
+
const d = [
|
|
35
|
+
r.button,
|
|
36
|
+
r[`button-${l()}`],
|
|
37
|
+
r[`button-size-${e}`],
|
|
38
|
+
r[`button-gap-${e}`],
|
|
39
39
|
"flexHorizontalCenter"
|
|
40
40
|
].join(" "), m = {
|
|
41
|
-
"--dynamic-color-text": t ?
|
|
42
|
-
"--dynamic-color": t ? `var(--color-${t}-${
|
|
43
|
-
"--dynamic-color-hover": t ? `var(--color-${t}-${
|
|
44
|
-
"--dynamic-color-activated": t ? `var(--color-${t}-${
|
|
45
|
-
"--dynamic-color-disabled": t ? r === "dark" ? "var(--color-dark-10)" : `var(--color-${t}-50)` : "var(--btn-primary-color-disabled)"
|
|
41
|
+
"--dynamic-color-text": t ? n === "dark" ? `var(--primary-${t}-900)` : "var(--color-light-100)" : "var(--btn-primary-color-text)",
|
|
42
|
+
"--dynamic-color": t ? `var(--color-${t}-${n === "dark" ? "200" : "900"})` : "var(--btn-primary-color)",
|
|
43
|
+
"--dynamic-color-hover": t ? `var(--color-${t}-${n === "dark" ? "100" : "800"})` : "var(--btn-primary-color-hover)",
|
|
44
|
+
"--dynamic-color-activated": t ? `var(--color-${t}-${n === "dark" ? "50" : "700"})` : "var(--btn-primary-color-activated)"
|
|
46
45
|
};
|
|
47
|
-
return /* @__PURE__ */
|
|
46
|
+
return /* @__PURE__ */ p(
|
|
48
47
|
"button",
|
|
49
48
|
{
|
|
50
49
|
type: "button",
|
|
51
|
-
className:
|
|
52
|
-
style:
|
|
53
|
-
...
|
|
50
|
+
className: d,
|
|
51
|
+
style: a === "primary" ? m : void 0,
|
|
52
|
+
..._,
|
|
54
53
|
children: [
|
|
55
|
-
|
|
56
|
-
/* @__PURE__ */
|
|
57
|
-
|
|
54
|
+
s && /* @__PURE__ */ o("span", { className: "flexHorizontalCenter", children: s }),
|
|
55
|
+
/* @__PURE__ */ o("span", { children: u }),
|
|
56
|
+
i && /* @__PURE__ */ o("span", { className: "flexHorizontalCenter", children: i })
|
|
58
57
|
]
|
|
59
58
|
}
|
|
60
59
|
);
|
|
61
60
|
};
|
|
62
61
|
export {
|
|
63
|
-
|
|
62
|
+
g as Button
|
|
64
63
|
};
|
|
@@ -5,8 +5,10 @@ interface IconButtonProps {
|
|
|
5
5
|
mode?: 'primary' | 'secondary' | 'tertiary' | 'ghost';
|
|
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?: 's' | 'm' | 'l' | 'xl'; /** How large should the button be? */
|
|
9
|
+
round?: boolean;
|
|
9
10
|
error?: boolean;
|
|
11
|
+
disabled?: boolean;
|
|
10
12
|
children: ReactElement; /** Only icons (React elements) allowed inside the button */
|
|
11
13
|
onClick?: () => void; /** Optional click handler */
|
|
12
14
|
}
|
|
@@ -1,52 +1,55 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useEffect as
|
|
3
|
-
import '../../styles/IconButton.css';const
|
|
4
|
-
button:
|
|
5
|
-
"button-
|
|
6
|
-
"button-
|
|
7
|
-
"button-
|
|
8
|
-
"button-
|
|
9
|
-
"button-
|
|
10
|
-
"button-
|
|
11
|
-
"button-size-
|
|
12
|
-
"button-size-
|
|
13
|
-
"button-size-
|
|
14
|
-
"button-size-
|
|
15
|
-
},
|
|
16
|
-
mode:
|
|
1
|
+
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect as l } from "react";
|
|
3
|
+
import '../../styles/IconButton.css';const z = "_button_1v38z_190", o = {
|
|
4
|
+
button: z,
|
|
5
|
+
"button-round": "_button-round_1v38z_219",
|
|
6
|
+
"button-primary": "_button-primary_1v38z_222",
|
|
7
|
+
"button-secondary": "_button-secondary_1v38z_235",
|
|
8
|
+
"button-tertiary": "_button-tertiary_1v38z_249",
|
|
9
|
+
"button-ghost": "_button-ghost_1v38z_263",
|
|
10
|
+
"button-error": "_button-error_1v38z_276",
|
|
11
|
+
"button-size-xl": "_button-size-xl_1v38z_289",
|
|
12
|
+
"button-size-l": "_button-size-l_1v38z_294",
|
|
13
|
+
"button-size-m": "_button-size-m_1v38z_299",
|
|
14
|
+
"button-size-s": "_button-size-s_1v38z_304"
|
|
15
|
+
}, p = ({
|
|
16
|
+
mode: n = "primary",
|
|
17
17
|
color: t,
|
|
18
18
|
colorMode: r,
|
|
19
|
-
size:
|
|
20
|
-
error:
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
size: e = "m",
|
|
20
|
+
error: a,
|
|
21
|
+
round: i,
|
|
22
|
+
disabled: u,
|
|
23
|
+
children: s,
|
|
24
|
+
onClick: b
|
|
23
25
|
}) => {
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
+
const _ = () => a ? "error" : n;
|
|
27
|
+
l(() => {
|
|
26
28
|
r && !t && console.warn("`colorMode` is defined but `color` is missing. `colorMode` will be ignored.");
|
|
27
29
|
}, [t]);
|
|
28
|
-
const
|
|
30
|
+
const v = [
|
|
29
31
|
o.button,
|
|
30
|
-
o[`button-${
|
|
31
|
-
o[
|
|
32
|
+
o[`button-${_()}`],
|
|
33
|
+
i && o["button-round"],
|
|
34
|
+
o[`button-size-${e}`],
|
|
32
35
|
"flexHorizontalCenter"
|
|
33
|
-
].join(" "),
|
|
36
|
+
].join(" "), c = {
|
|
34
37
|
"--dynamic-color-text": t ? r === "dark" ? "var(--primary-color-900)" : "var(--color-light-100)" : "var(--btn-primary-color-text)",
|
|
35
38
|
"--dynamic-color": t ? `var(--color-${t}-${r === "dark" ? "200" : "900"})` : "var(--btn-primary-color)",
|
|
36
39
|
"--dynamic-color-hover": t ? `var(--color-${t}-${r === "dark" ? "100" : "800"})` : "var(--btn-primary-color-hover)",
|
|
37
|
-
"--dynamic-color-activated": t ? `var(--color-${t}-${r === "dark" ? "50" : "700"})` : "var(--btn-primary-color-activated)"
|
|
38
|
-
"--dynamic-color-disabled": t ? r === "dark" ? "var(--color-dark-10)" : `var(--color-${t}-50)` : "var(--btn-primary-color-disabled)"
|
|
40
|
+
"--dynamic-color-activated": t ? `var(--color-${t}-${r === "dark" ? "50" : "700"})` : "var(--btn-primary-color-activated)"
|
|
39
41
|
};
|
|
40
|
-
return /* @__PURE__ */
|
|
42
|
+
return /* @__PURE__ */ m(
|
|
41
43
|
"button",
|
|
42
44
|
{
|
|
43
|
-
className:
|
|
44
|
-
style:
|
|
45
|
-
onClick:
|
|
46
|
-
|
|
45
|
+
className: v,
|
|
46
|
+
style: c,
|
|
47
|
+
onClick: b,
|
|
48
|
+
disabled: u,
|
|
49
|
+
children: s
|
|
47
50
|
}
|
|
48
51
|
);
|
|
49
52
|
};
|
|
50
53
|
export {
|
|
51
|
-
|
|
54
|
+
p as IconButton
|
|
52
55
|
};
|
|
@@ -1,16 +1,20 @@
|
|
|
1
|
-
import { InputHTMLAttributes, ReactNode } from 'react';
|
|
1
|
+
import { FC, InputHTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
|
|
3
3
|
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
4
4
|
sizeStyle?: 's' | 'm' | 'l' | 'xl'; /** How large should the input be? */
|
|
5
5
|
label: string; /** input contents **/
|
|
6
6
|
labelUnit?: string;
|
|
7
|
+
dark?: boolean;
|
|
7
8
|
color?: string; /** red, green, blue, pink **/
|
|
9
|
+
classNames?: string; /** class names for parent div due to general input props (input elem takes every other props in <Input/> component) **/
|
|
10
|
+
focusBackground?: boolean;
|
|
8
11
|
status?: 'default' | 'error' | 'success' | 'ternary'; /** input status style **/
|
|
9
12
|
ghost?: boolean;
|
|
10
|
-
|
|
11
|
-
|
|
13
|
+
round?: boolean;
|
|
14
|
+
iconLeft?: ReactNode; /** Additional content inside the input */
|
|
15
|
+
iconRight?: ReactNode; /** Additional content inside the input */
|
|
12
16
|
defaultValue?: string;
|
|
13
17
|
disabled?: boolean;
|
|
14
18
|
}
|
|
15
|
-
export declare const Input:
|
|
19
|
+
export declare const Input: FC<InputProps>;
|
|
16
20
|
export {};
|
|
@@ -1,133 +1,108 @@
|
|
|
1
|
-
import { jsxs as f, jsx as
|
|
2
|
-
import { useState as
|
|
3
|
-
import '../../styles/Input.css';const
|
|
4
|
-
"input-style": "_input-
|
|
5
|
-
"input-style-ghost": "_input-style-
|
|
6
|
-
"input-style-disabled": "_input-style-
|
|
7
|
-
"input-style-focused": "_input-style-
|
|
8
|
-
"input-
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"input-style-error": "_input-style-
|
|
12
|
-
"input-style-
|
|
13
|
-
"input-style-
|
|
14
|
-
"input-style-success": "_input-style-
|
|
15
|
-
"input-style-success-
|
|
16
|
-
"input-
|
|
17
|
-
"floating-
|
|
18
|
-
"floating-
|
|
19
|
-
"floating-
|
|
20
|
-
"floating-
|
|
21
|
-
"floating-input-size-
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
|
|
26
|
-
"
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
"input-style-size-s": "_input-style-size-s_1in9x_500"
|
|
32
|
-
}, K = ({
|
|
33
|
-
sizeStyle: c = "m",
|
|
34
|
-
label: b,
|
|
35
|
-
labelUnit: m,
|
|
1
|
+
import { jsxs as f, jsx as s, Fragment as R } from "react/jsx-runtime";
|
|
2
|
+
import { useState as y, useRef as q } from "react";
|
|
3
|
+
import '../../styles/Input.css';const e = {
|
|
4
|
+
"input-style": "_input-style_1efo0_363",
|
|
5
|
+
"input-style-ghost": "_input-style-ghost_1efo0_374",
|
|
6
|
+
"input-style-disabled": "_input-style-disabled_1efo0_379",
|
|
7
|
+
"input-style-focused": "_input-style-focused_1efo0_388",
|
|
8
|
+
"input-style-error": "_input-style-error_1efo0_393",
|
|
9
|
+
"input-style-error-focused": "_input-style-error-focused_1efo0_400",
|
|
10
|
+
"input-style-error-focus-background": "_input-style-error-focus-background_1efo0_406",
|
|
11
|
+
"input-style-error-disabled": "_input-style-error-disabled_1efo0_409",
|
|
12
|
+
"input-style-success": "_input-style-success_1efo0_417",
|
|
13
|
+
"input-style-success-focused": "_input-style-success-focused_1efo0_424",
|
|
14
|
+
"input-style-success-focus-background": "_input-style-success-focus-background_1efo0_430",
|
|
15
|
+
"input-style-success-disabled": "_input-style-success-disabled_1efo0_433",
|
|
16
|
+
"input-container": "_input-container_1efo0_441",
|
|
17
|
+
"floating-input": "_floating-input_1efo0_445",
|
|
18
|
+
"floating-input-size-xl": "_floating-input-size-xl_1efo0_451",
|
|
19
|
+
"floating-input-size-l": "_floating-input-size-l_1efo0_455",
|
|
20
|
+
"floating-input-size-m": "_floating-input-size-m_1efo0_459",
|
|
21
|
+
"floating-input-size-s": "_floating-input-size-s_1efo0_463",
|
|
22
|
+
"input-style-size-xl": "_input-style-size-xl_1efo0_467",
|
|
23
|
+
"input-style-size-l": "_input-style-size-l_1efo0_473",
|
|
24
|
+
"input-style-size-m": "_input-style-size-m_1efo0_479",
|
|
25
|
+
"input-style-size-s": "_input-style-size-s_1efo0_485",
|
|
26
|
+
"input-style-radius": "_input-style-radius_1efo0_491"
|
|
27
|
+
}, G = ({
|
|
28
|
+
sizeStyle: l = "m",
|
|
29
|
+
label: d,
|
|
30
|
+
labelUnit: u,
|
|
36
31
|
color: n,
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
32
|
+
dark: r,
|
|
33
|
+
focusBackground: i,
|
|
34
|
+
status: c = "default",
|
|
35
|
+
ghost: g = !1,
|
|
36
|
+
iconLeft: a,
|
|
37
|
+
iconRight: p,
|
|
38
|
+
round: m,
|
|
39
|
+
classNames: b,
|
|
40
|
+
disabled: o,
|
|
42
41
|
defaultValue: z,
|
|
43
|
-
...
|
|
42
|
+
...h
|
|
44
43
|
}) => {
|
|
45
|
-
const [
|
|
46
|
-
|
|
47
|
-
},
|
|
44
|
+
const [t, _] = y(!1), [$, v] = y(z || ""), x = q(null), S = () => _(!0), j = () => _(!1), N = (D) => {
|
|
45
|
+
v(D.target.value);
|
|
46
|
+
}, C = [
|
|
48
47
|
e["input-style"],
|
|
49
|
-
e[`input-style-size-${
|
|
50
|
-
e[`input-style-gap-${
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
d && e["input-style-focused"],
|
|
55
|
-
_ && e["input-style-disabled"]
|
|
56
|
-
].filter(Boolean).join(" "), S = [
|
|
57
|
-
e["input-style-error"],
|
|
58
|
-
_ && e["input-style-error-disabled"],
|
|
59
|
-
d && e["input-style-error-focused"]
|
|
48
|
+
e[`input-style-size-${l}`],
|
|
49
|
+
e[`input-style-gap-${c}`],
|
|
50
|
+
m && e["input-style-radius"],
|
|
51
|
+
"flexHorizontalBetween gap4",
|
|
52
|
+
g && e["input-style-ghost"]
|
|
60
53
|
].filter(Boolean).join(" "), F = [
|
|
54
|
+
t && e["input-style-focused"],
|
|
55
|
+
o && e["input-style-disabled"]
|
|
56
|
+
].filter(Boolean).join(" "), k = [
|
|
57
|
+
e["input-style-error"],
|
|
58
|
+
o && e["input-style-error-disabled"],
|
|
59
|
+
t && e["input-style-error-focused"],
|
|
60
|
+
t && i && e["input-style-error-focus-background"]
|
|
61
|
+
].filter(Boolean).join(" "), B = [
|
|
61
62
|
e["input-style-success"],
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
o && e["input-style-success-disabled"],
|
|
64
|
+
t && e["input-style-success-focused"],
|
|
65
|
+
t && i && e["input-style-success-focus-background"]
|
|
66
|
+
].filter(Boolean).join(" "), I = () => {
|
|
67
|
+
switch (c) {
|
|
66
68
|
case "error":
|
|
67
|
-
return
|
|
69
|
+
return k;
|
|
68
70
|
case "success":
|
|
69
|
-
return
|
|
71
|
+
return B;
|
|
70
72
|
default:
|
|
71
|
-
return
|
|
73
|
+
return F;
|
|
72
74
|
}
|
|
73
|
-
},
|
|
74
|
-
e["floating-label"],
|
|
75
|
-
e[`floating-label-size-${c}`]
|
|
76
|
-
].join(" "), k = [
|
|
75
|
+
}, w = [
|
|
77
76
|
e["floating-input"],
|
|
78
|
-
e[`floating-input-size-${
|
|
79
|
-
].join(" "),
|
|
80
|
-
"--dynamic-color":
|
|
81
|
-
"--dynamic-color-border":
|
|
82
|
-
"--dynamic-background-color": `$color-${n}-50`
|
|
77
|
+
e[`floating-input-size-${l}`]
|
|
78
|
+
].join(" "), H = {
|
|
79
|
+
"--dynamic-color": `var(--color-${n}-${r ? "800" : "300"})`,
|
|
80
|
+
"--dynamic-color-border": `var(--color-${n}-${r ? "800" : "300"})`,
|
|
81
|
+
"--dynamic-background-color": `${i ? `var(--color-${n}-50)` : "transparent"}`
|
|
83
82
|
}, V = {
|
|
84
|
-
"--dynamic-color": "var(--
|
|
85
|
-
"--dynamic-color-border": "
|
|
86
|
-
"--dynamic-background-color": "
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
{
|
|
102
|
-
|
|
103
|
-
className:
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
style: n ? w : V,
|
|
107
|
-
children: [
|
|
108
|
-
r && /* @__PURE__ */ t("div", { className: W, ref: u }),
|
|
109
|
-
l && (o === "left" || o === "both") && /* @__PURE__ */ t("span", { className: "flexHorizontal", children: l }),
|
|
110
|
-
/* @__PURE__ */ f("div", { className: e["input-container"], children: [
|
|
111
|
-
/* @__PURE__ */ t(
|
|
112
|
-
"input",
|
|
113
|
-
{
|
|
114
|
-
className: k,
|
|
115
|
-
placeholder: " ",
|
|
116
|
-
value: r,
|
|
117
|
-
onChange: j,
|
|
118
|
-
...B
|
|
119
|
-
}
|
|
120
|
-
),
|
|
121
|
-
/* @__PURE__ */ t("label", { className: I, ref: s, children: b })
|
|
122
|
-
] }),
|
|
123
|
-
l && (o === "right" || o === "both") && /* @__PURE__ */ f(O, { children: [
|
|
124
|
-
/* @__PURE__ */ t("div", { children: m }),
|
|
125
|
-
/* @__PURE__ */ t("span", { className: "flexHorizontal", children: l })
|
|
126
|
-
] })
|
|
127
|
-
]
|
|
128
|
-
}
|
|
129
|
-
);
|
|
83
|
+
"--dynamic-color": "var(--color-blue-situaction-800)",
|
|
84
|
+
"--dynamic-color-border": "var(--color-blue-situaction-800)",
|
|
85
|
+
"--dynamic-background-color": `${i ? "var(--color-blue-situaction-50)" : "transparent"}`
|
|
86
|
+
};
|
|
87
|
+
return /* @__PURE__ */ f("div", { ref: x, className: `input-style ${C} ${b} ${I()} gap-xs-2`, onFocus: S, onBlur: j, style: n ? H : V, children: [
|
|
88
|
+
a && /* @__PURE__ */ s("span", { className: "", children: a }),
|
|
89
|
+
/* @__PURE__ */ s("div", { className: e["input-container"], children: /* @__PURE__ */ s(
|
|
90
|
+
"input",
|
|
91
|
+
{
|
|
92
|
+
autoCorrect: "false",
|
|
93
|
+
className: w,
|
|
94
|
+
placeholder: d,
|
|
95
|
+
value: $,
|
|
96
|
+
onChange: N,
|
|
97
|
+
...h
|
|
98
|
+
}
|
|
99
|
+
) }),
|
|
100
|
+
/* @__PURE__ */ f(R, { children: [
|
|
101
|
+
u && /* @__PURE__ */ s("div", { children: u }),
|
|
102
|
+
p && /* @__PURE__ */ s("span", { className: "flexHorizontal", children: p })
|
|
103
|
+
] })
|
|
104
|
+
] });
|
|
130
105
|
};
|
|
131
106
|
export {
|
|
132
|
-
|
|
107
|
+
G as Input
|
|
133
108
|
};
|
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
import { jsxs as u, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect as m } from "react";
|
|
3
3
|
import { IconButton as _ } from "../icon-button/IconButton.js";
|
|
4
|
-
import '../../styles/Tag.css';const f = "_tag_1rbf7_6",
|
|
4
|
+
import '../../styles/Tag.css';const f = "_tag_1rbf7_6", i = {
|
|
5
5
|
tag: f,
|
|
6
6
|
"tag-children": "_tag-children_1rbf7_16",
|
|
7
7
|
"tag-size-xl": "_tag-size-xl_1rbf7_24",
|
|
8
8
|
"tag-size-l": "_tag-size-l_1rbf7_28",
|
|
9
9
|
"tag-size-m": "_tag-size-m_1rbf7_32",
|
|
10
10
|
"tag-size-s": "_tag-size-s_1rbf7_36"
|
|
11
|
-
}, a = ["light", "dark", "grey", "blue-grey", "blue", "blue-situaction", "purple", "pink", "gold", "brown", "emerald"],
|
|
12
|
-
label:
|
|
11
|
+
}, a = ["light", "dark", "grey", "blue-grey", "blue", "blue-situaction", "purple", "pink", "gold", "brown", "emerald"], v = ({
|
|
12
|
+
label: l,
|
|
13
13
|
color: t,
|
|
14
|
-
deletable:
|
|
14
|
+
deletable: n = !1,
|
|
15
15
|
size: o = "m",
|
|
16
|
-
children:
|
|
17
|
-
onClick:
|
|
16
|
+
children: s,
|
|
17
|
+
onClick: r
|
|
18
18
|
}) => {
|
|
19
19
|
m(() => {
|
|
20
20
|
t && !a.includes(t) && console.warn(`Warning: The color "${t}" is not a valid option. Expected one of: ${a.join(", ")}.`);
|
|
21
21
|
}, [t]);
|
|
22
22
|
const c = [
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
i.tag,
|
|
24
|
+
i[`tag-size-${o}`],
|
|
25
25
|
"flexHorizontalCenter"
|
|
26
26
|
].join(" "), g = {
|
|
27
27
|
"--dynamic-background": t && a.includes(t) ? `var(--color-${t}-200)` : "var(--color-blue-situaction-200)",
|
|
@@ -34,15 +34,14 @@ import '../../styles/Tag.css';const f = "_tag_1rbf7_6", s = {
|
|
|
34
34
|
{
|
|
35
35
|
className: c,
|
|
36
36
|
style: g,
|
|
37
|
-
onClick: l,
|
|
38
37
|
children: [
|
|
39
|
-
|
|
40
|
-
/* @__PURE__ */ e("label", { className: "flexHorizontal", children:
|
|
41
|
-
|
|
38
|
+
s && /* @__PURE__ */ e("div", { className: `flexHorizontalCenter ${i["tag-children"]}`, children: s }),
|
|
39
|
+
/* @__PURE__ */ e("label", { className: "flexHorizontal", children: l }),
|
|
40
|
+
n && /* @__PURE__ */ e(_, { mode: "ghost", size: "s", onClick: () => r, children: /* @__PURE__ */ e("svg", { style: d, xmlns: "http://www.w3.org/2000/svg", width: "9", height: "9", fill: "currentColor", viewBox: "0 0 256 256", children: /* @__PURE__ */ e("path", { d: "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z" }) }) })
|
|
42
41
|
]
|
|
43
42
|
}
|
|
44
43
|
);
|
|
45
44
|
};
|
|
46
45
|
export {
|
|
47
|
-
|
|
46
|
+
v as Tag
|
|
48
47
|
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsxs as i, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
const t = ({
|
|
3
|
+
title: e,
|
|
4
|
+
children: r
|
|
5
|
+
}) => /* @__PURE__ */ i("div", { className: "flexHorizontal gap-xs-3 fontSize30", children: [
|
|
6
|
+
r,
|
|
7
|
+
/* @__PURE__ */ o("h1", { children: e })
|
|
8
|
+
] });
|
|
9
|
+
export {
|
|
10
|
+
t as Title
|
|
11
|
+
};
|
package/dist/main.d.ts
CHANGED
|
@@ -4,4 +4,5 @@ export { Input } from './components/input/Input';
|
|
|
4
4
|
export { Tabs } from './components/tabs/Tabs';
|
|
5
5
|
export { IconButton } from './components/icon-button/IconButton';
|
|
6
6
|
export { Tag } from './components/tag/Tag';
|
|
7
|
+
export { Title } from './components/title/Title';
|
|
7
8
|
export { ThemeProvider, useTheme } from './components/theme/ThemeContext';
|
package/dist/main.js
CHANGED
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import { Button as t } from "./components/button/Button.js";
|
|
2
2
|
import { Input as p } from "./components/input/Input.js";
|
|
3
3
|
import { Tabs as x } from "./components/tabs/Tabs.js";
|
|
4
|
-
import { IconButton as
|
|
5
|
-
import { Tag as
|
|
6
|
-
import {
|
|
4
|
+
import { IconButton as n } from "./components/icon-button/IconButton.js";
|
|
5
|
+
import { Tag as i } from "./components/tag/Tag.js";
|
|
6
|
+
import { Title as h } from "./components/title/Title.js";
|
|
7
|
+
import { ThemeProvider as B, useTheme as I } from "./components/theme/ThemeContext.js";
|
|
7
8
|
import './styles/index.css';import './styles/main.css';/* empty css */
|
|
8
9
|
export {
|
|
9
10
|
t as Button,
|
|
10
|
-
|
|
11
|
+
n as IconButton,
|
|
11
12
|
p as Input,
|
|
12
13
|
x as Tabs,
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
i as Tag,
|
|
15
|
+
B as ThemeProvider,
|
|
16
|
+
h as Title,
|
|
17
|
+
I as useTheme
|
|
16
18
|
};
|
package/dist/styles/Button.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--color-light-05: rgba(255, 255, 255, .05);--color-light-10: rgba(255, 255, 255, .1);--color-light-20: rgba(255, 255, 255, .2);--color-light-30: rgba(255, 255, 255, .3);--color-light-40: rgba(255, 255, 255, .4);--color-light-50: rgba(255, 255, 255, .5);--color-light-60: rgba(255, 255, 255, .6);--color-light-70: rgba(255, 255, 255, .7);--color-light-80: rgba(255, 255, 255, .8);--color-light-90: rgba(255, 255, 255, .9);--color-light-100: #FFF;--color-dark-05: rgba(15, 15, 15, .05);--color-dark-10: rgba(15, 15, 15, .1);--color-dark-20: rgba(15, 15, 15, .2);--color-dark-30: rgba(15, 15, 15, .3);--color-dark-40: rgba(15, 15, 15, .4);--color-dark-50: rgba(15, 15, 15, .5);--color-dark-60: rgba(15, 15, 15, .6);--color-dark-70: rgba(15, 15, 15, .7);--color-dark-80: rgba(15, 15, 15, .8);--color-dark-90: rgba(15, 15, 15, .9);--color-dark-100: #09090B;--color-grey-50: #FAFAFA;--color-grey-100: #E7E7E7;--color-grey-200: #D1D1D1;--color-grey-300: #B0B0B0;--color-grey-400: #888888;--color-grey-500: #6D6D6D;--color-grey-600: #5D5D5D;--color-grey-700: #4F4F4F;--color-grey-800: #454545;--color-grey-900: #3D3D3D;--color-grey-950: #0F0F0F;--color-blue-grey-50: #F4F6F7;--color-blue-grey-100: #E3E8EA;--color-blue-grey-200: #CAD3D7;--color-blue-grey-300: #A5B4BB;--color-blue-grey-400: #788D98;--color-blue-grey-500: #55626C;--color-blue-grey-600: #49565F;--color-blue-grey-700: #445058;--color-blue-grey-800: #3A4047;--color-blue-grey-900: #2B3137;--color-blue-grey-950: #24292E;--color-blue-50: #F5F8FE;--color-blue-100: #EFF4FD;--color-blue-200: #EAF0FC;--color-blue-300: #E0E9FA;--color-blue-400: #D5E1F8;--color-blue-500: #CBDAF7;--color-blue-600: #C0D2F5;--color-blue-700: #B6CBF4;--color-blue-800: #ABC3F1;--color-blue-900: #A1BCF0;--color-blue-950: #24292E;--color-blue-situaction-50: #EFF8FF;--color-blue-situaction-100: #DFF1FF;--color-blue-situaction-200: #C3E9FD;--color-blue-situaction-300: #7ED3FB;--color-blue-situaction-400: #31B7FF;--color-blue-situaction-500: #069DEF;--color-blue-situaction-600: #007DCE;--color-blue-situaction-700: #02548A;--color-blue-situaction-800: #1F416D;--color-blue-situaction-900: #1D3557;--color-blue-situaction-950: #14243D;--color-purple-50: #F1F2FC;--color-purple-100: #E6E7F9;--color-purple-200: #D1D3F4;--color-purple-300: #B5B6EC;--color-purple-400: #9A96E3;--color-purple-500: #887DD7;--color-purple-600: #6E59C5;--color-purple-700: #6652B0;--color-purple-800: #53458E;--color-purple-900: #463D72;--color-purple-950: #2A2442;--color-pink-50: #FBF4F8;--color-pink-100: #F8EBF3;--color-pink-200: #F2D8E9;--color-pink-300: #E9B8D6;--color-pink-400: #DB8BBB;--color-pink-500: #CC68A0;--color-pink-600: #B84A83;--color-pink-700: #9D3869;--color-pink-800: #833158;--color-pink-900: #6E2D4C;--color-pink-950: #42152A;--color-gold-50: #FDFAE9;--color-gold-100: #FAF0B9;--color-gold-200: #F8E490;--color-gold-300: #F4CF50;--color-gold-400: #EEB721;--color-gold-500: #DE9F14;--color-gold-600: #C07A0E;--color-gold-700: #99570F;--color-gold-800: #7F4614;--color-gold-900: #6C3917;--color-gold-950: #3F1C09;--color-brown-50: #FDF9ED;--color-brown-100: #F6E4B6;--color-brown-200: #F2D897;--color-brown-300: #ECBD5F;--color-brown-400: #E6A637;--color-brown-500: #DF8620;--color-brown-600: #C7681A;--color-brown-700: #A44919;--color-brown-800: #853A19;--color-brown-900: #6C3019;--color-brown-950: #3E1709;--color-emerald-50: #F2F7F3;--color-emerald-100: #DFECE0;--color-emerald-200: #C1D9C5;--color-emerald-300: #98BDA0;--color-emerald-400: #71A07D;--color-emerald-500: #4A7F59;--color-emerald-600: #376445;--color-emerald-700: #2C5038;--color-emerald-800: #25402F;--color-emerald-900: #1F3527;--color-emerald-950: #111D15
|
|
1
|
+
:root{--color-light-05: rgba(255, 255, 255, .05);--color-light-10: rgba(255, 255, 255, .1);--color-light-20: rgba(255, 255, 255, .2);--color-light-30: rgba(255, 255, 255, .3);--color-light-40: rgba(255, 255, 255, .4);--color-light-50: rgba(255, 255, 255, .5);--color-light-60: rgba(255, 255, 255, .6);--color-light-70: rgba(255, 255, 255, .7);--color-light-80: rgba(255, 255, 255, .8);--color-light-90: rgba(255, 255, 255, .9);--color-light-100: #FFF;--color-dark-05: rgba(15, 15, 15, .05);--color-dark-10: rgba(15, 15, 15, .1);--color-dark-20: rgba(15, 15, 15, .2);--color-dark-30: rgba(15, 15, 15, .3);--color-dark-40: rgba(15, 15, 15, .4);--color-dark-50: rgba(15, 15, 15, .5);--color-dark-60: rgba(15, 15, 15, .6);--color-dark-70: rgba(15, 15, 15, .7);--color-dark-80: rgba(15, 15, 15, .8);--color-dark-90: rgba(15, 15, 15, .9);--color-dark-100: #09090B;--color-grey-50: #FAFAFA;--color-grey-100: #E7E7E7;--color-grey-200: #D1D1D1;--color-grey-300: #B0B0B0;--color-grey-400: #888888;--color-grey-500: #6D6D6D;--color-grey-600: #5D5D5D;--color-grey-700: #4F4F4F;--color-grey-800: #454545;--color-grey-900: #3D3D3D;--color-grey-950: #0F0F0F;--color-blue-grey-50: #F4F6F7;--color-blue-grey-100: #E3E8EA;--color-blue-grey-200: #CAD3D7;--color-blue-grey-300: #A5B4BB;--color-blue-grey-400: #788D98;--color-blue-grey-500: #55626C;--color-blue-grey-600: #49565F;--color-blue-grey-700: #445058;--color-blue-grey-800: #3A4047;--color-blue-grey-900: #2B3137;--color-blue-grey-950: #24292E;--color-blue-50: #F5F8FE;--color-blue-100: #EFF4FD;--color-blue-200: #EAF0FC;--color-blue-300: #E0E9FA;--color-blue-400: #D5E1F8;--color-blue-500: #CBDAF7;--color-blue-600: #C0D2F5;--color-blue-700: #B6CBF4;--color-blue-800: #ABC3F1;--color-blue-900: #A1BCF0;--color-blue-950: #24292E;--color-blue-situaction-50: #EFF8FF;--color-blue-situaction-100: #DFF1FF;--color-blue-situaction-200: #C3E9FD;--color-blue-situaction-300: #7ED3FB;--color-blue-situaction-400: #31B7FF;--color-blue-situaction-500: #069DEF;--color-blue-situaction-600: #007DCE;--color-blue-situaction-700: #02548A;--color-blue-situaction-800: #1F416D;--color-blue-situaction-900: #1D3557;--color-blue-situaction-950: #14243D;--color-purple-50: #F1F2FC;--color-purple-100: #E6E7F9;--color-purple-200: #D1D3F4;--color-purple-300: #B5B6EC;--color-purple-400: #9A96E3;--color-purple-500: #887DD7;--color-purple-600: #6E59C5;--color-purple-700: #6652B0;--color-purple-800: #53458E;--color-purple-900: #463D72;--color-purple-950: #2A2442;--color-pink-50: #FBF4F8;--color-pink-100: #F8EBF3;--color-pink-200: #F2D8E9;--color-pink-300: #E9B8D6;--color-pink-400: #DB8BBB;--color-pink-500: #CC68A0;--color-pink-600: #B84A83;--color-pink-700: #9D3869;--color-pink-800: #833158;--color-pink-900: #6E2D4C;--color-pink-950: #42152A;--color-gold-50: #FDFAE9;--color-gold-100: #FAF0B9;--color-gold-200: #F8E490;--color-gold-300: #F4CF50;--color-gold-400: #EEB721;--color-gold-500: #DE9F14;--color-gold-600: #C07A0E;--color-gold-700: #99570F;--color-gold-800: #7F4614;--color-gold-900: #6C3917;--color-gold-950: #3F1C09;--color-brown-50: #FDF9ED;--color-brown-100: #F6E4B6;--color-brown-200: #F2D897;--color-brown-300: #ECBD5F;--color-brown-400: #E6A637;--color-brown-500: #DF8620;--color-brown-600: #C7681A;--color-brown-700: #A44919;--color-brown-800: #853A19;--color-brown-900: #6C3019;--color-brown-950: #3E1709;--color-emerald-50: #F2F7F3;--color-emerald-100: #DFECE0;--color-emerald-200: #C1D9C5;--color-emerald-300: #98BDA0;--color-emerald-400: #71A07D;--color-emerald-500: #4A7F59;--color-emerald-600: #376445;--color-emerald-700: #2C5038;--color-emerald-800: #25402F;--color-emerald-900: #1F3527;--color-emerald-950: #111D15;--color-red-50: #FFF1F1;--color-red-100: #FFDFDF;--color-red-200: #FFC5C5;--color-red-300: #FF9D9D;--color-red-400: #FF6464;--color-red-500: #FF4747;--color-red-600: #ED1515;--color-red-700: #C80D0D;--color-red-800: #A50F0F;--color-red-900: #881414;--color-red-950: #4B0404;--color-green-50: #F1FCF3;--color-green-100: #DFF9E3;--color-green-200: #C1F1C8;--color-green-300: #91E49E;--color-green-400: #45C85A;--color-green-500: #33B449;--color-green-600: #259437;--color-green-700: #20752F;--color-green-800: #1E5D29;--color-green-900: #1B4C24;--color-green-950: #092A10}:root,[data-theme=light]{--btn-primary-color: var(--primary-color-900);--btn-primary-color-hover: var(--primary-color-800);--btn-primary-color-activated: var(--primary-color-700);--btn-primary-color-text: var(--color-light-100);--secondary-color-text: var(--color-blue-situaction-900);--btn-ghost-color-hover: var(--color-dark-05);--btn-ghost-color-activated: var(--color-dark-10);--btn-ghost-color-text: var(--color-grey-950)}[data-theme=dark]{--btn-primary-color: var(--primary-color-200);--btn-primary-color-hover: var(--primary-color-100);--btn-primary-color-activated: var(--primary-color-50);--btn-primary-color-text: var(--primary-color-900);--secondary-color-text: var(--color-light-100);--btn-ghost-color-hover: var(--color-light-05);--btn-ghost-color-activated: var(--color-light-10);--btn-ghost-color-text: var(--color-light-100)}._button_dzhnj_190{font-family:var(--font-family);font-weight:500;border:0;border-radius:8px;cursor:pointer;line-height:1;width:fit-content}._button_dzhnj_190:focus{outline:2px solid var(--dynamic-color);outline-offset:2px}._button_dzhnj_190:disabled{background-color:var(--color-dark-05);color:var(--color-dark-40);border:1px solid var(--color-dark-10);cursor:initial;pointer-events:none}._button_dzhnj_190:disabled *{fill:var(--color-dark-40)}._button-primary_dzhnj_214{color:var(--dynamic-color-text);background-color:var(--dynamic-color)}._button-primary_dzhnj_214:hover{background-color:var(--dynamic-color-hover)}._button-primary_dzhnj_214:active{background-color:var(--dynamic-color-activated)}._button-primary_dzhnj_214 *{fill:var(--dynamic-color-text)}._button-secondary_dzhnj_227{color:var(--secondary-color-text);background-color:#96b4ee33;border:1px solid rgba(150,180,238,.5)}._button-secondary_dzhnj_227:hover{background-color:#96b4ee66}._button-secondary_dzhnj_227:active{background-color:#96b4ee99}._button-secondary_dzhnj_227 *{fill:var(--secondary-color-text)}._button-tertiary_dzhnj_241{color:var(--secondary-color-text);background-color:transparent;border:1px solid rgba(150,180,238,.5)}._button-tertiary_dzhnj_241:hover{background-color:#96b4ee1a}._button-tertiary_dzhnj_241:active{background-color:#96b4ee33}._button-tertiary_dzhnj_241 *{fill:var(--secondary-color-text)}._button-ghost_dzhnj_255{color:var(--btn-ghost-color-text);background-color:transparent}._button-ghost_dzhnj_255:hover{background-color:var(--btn-ghost-color-hover)}._button-ghost_dzhnj_255:active{background-color:var(--btn-ghost-color-activated)}._button-ghost_dzhnj_255 *{fill:var(--btn-ghost-color-text)}._button-error_dzhnj_268{color:var(color-light-100);background-color:#ff4747}._button-error_dzhnj_268:hover{background-color:#ed1515}._button-error_dzhnj_268:active{background-color:#c80d0d}._button-error_dzhnj_268 *{fill:var(--secondary-color-text)}._button-size-xl_dzhnj_281{padding:16px 32px;font-size:1.125em;line-height:28px}._button-size-l_dzhnj_286{padding:12px 24px;font-size:1em;line-height:24px}._button-size-m_dzhnj_291{padding:8px 16px;font-size:.875em;line-height:22px}._button-size-s_dzhnj_296{padding:6px 12px;font-size:.75em;line-height:16px}._button-gap-xl_dzhnj_301{gap:12px}._button-gap-l_dzhnj_304{gap:8px}._button-gap-m_dzhnj_307,._button-gap-s_dzhnj_307{gap:4px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--color-light-05: rgba(255, 255, 255, .05);--color-light-10: rgba(255, 255, 255, .1);--color-light-20: rgba(255, 255, 255, .2);--color-light-30: rgba(255, 255, 255, .3);--color-light-40: rgba(255, 255, 255, .4);--color-light-50: rgba(255, 255, 255, .5);--color-light-60: rgba(255, 255, 255, .6);--color-light-70: rgba(255, 255, 255, .7);--color-light-80: rgba(255, 255, 255, .8);--color-light-90: rgba(255, 255, 255, .9);--color-light-100: #FFF;--color-dark-05: rgba(15, 15, 15, .05);--color-dark-10: rgba(15, 15, 15, .1);--color-dark-20: rgba(15, 15, 15, .2);--color-dark-30: rgba(15, 15, 15, .3);--color-dark-40: rgba(15, 15, 15, .4);--color-dark-50: rgba(15, 15, 15, .5);--color-dark-60: rgba(15, 15, 15, .6);--color-dark-70: rgba(15, 15, 15, .7);--color-dark-80: rgba(15, 15, 15, .8);--color-dark-90: rgba(15, 15, 15, .9);--color-dark-100: #09090B;--color-grey-50: #FAFAFA;--color-grey-100: #E7E7E7;--color-grey-200: #D1D1D1;--color-grey-300: #B0B0B0;--color-grey-400: #888888;--color-grey-500: #6D6D6D;--color-grey-600: #5D5D5D;--color-grey-700: #4F4F4F;--color-grey-800: #454545;--color-grey-900: #3D3D3D;--color-grey-950: #0F0F0F;--color-blue-grey-50: #F4F6F7;--color-blue-grey-100: #E3E8EA;--color-blue-grey-200: #CAD3D7;--color-blue-grey-300: #A5B4BB;--color-blue-grey-400: #788D98;--color-blue-grey-500: #55626C;--color-blue-grey-600: #49565F;--color-blue-grey-700: #445058;--color-blue-grey-800: #3A4047;--color-blue-grey-900: #2B3137;--color-blue-grey-950: #24292E;--color-blue-50: #F5F8FE;--color-blue-100: #EFF4FD;--color-blue-200: #EAF0FC;--color-blue-300: #E0E9FA;--color-blue-400: #D5E1F8;--color-blue-500: #CBDAF7;--color-blue-600: #C0D2F5;--color-blue-700: #B6CBF4;--color-blue-800: #ABC3F1;--color-blue-900: #A1BCF0;--color-blue-950: #24292E;--color-blue-situaction-50: #EFF8FF;--color-blue-situaction-100: #DFF1FF;--color-blue-situaction-200: #C3E9FD;--color-blue-situaction-300: #7ED3FB;--color-blue-situaction-400: #31B7FF;--color-blue-situaction-500: #069DEF;--color-blue-situaction-600: #007DCE;--color-blue-situaction-700: #02548A;--color-blue-situaction-800: #1F416D;--color-blue-situaction-900: #1D3557;--color-blue-situaction-950: #14243D;--color-purple-50: #F1F2FC;--color-purple-100: #E6E7F9;--color-purple-200: #D1D3F4;--color-purple-300: #B5B6EC;--color-purple-400: #9A96E3;--color-purple-500: #887DD7;--color-purple-600: #6E59C5;--color-purple-700: #6652B0;--color-purple-800: #53458E;--color-purple-900: #463D72;--color-purple-950: #2A2442;--color-pink-50: #FBF4F8;--color-pink-100: #F8EBF3;--color-pink-200: #F2D8E9;--color-pink-300: #E9B8D6;--color-pink-400: #DB8BBB;--color-pink-500: #CC68A0;--color-pink-600: #B84A83;--color-pink-700: #9D3869;--color-pink-800: #833158;--color-pink-900: #6E2D4C;--color-pink-950: #42152A;--color-gold-50: #FDFAE9;--color-gold-100: #FAF0B9;--color-gold-200: #F8E490;--color-gold-300: #F4CF50;--color-gold-400: #EEB721;--color-gold-500: #DE9F14;--color-gold-600: #C07A0E;--color-gold-700: #99570F;--color-gold-800: #7F4614;--color-gold-900: #6C3917;--color-gold-950: #3F1C09;--color-brown-50: #FDF9ED;--color-brown-100: #F6E4B6;--color-brown-200: #F2D897;--color-brown-300: #ECBD5F;--color-brown-400: #E6A637;--color-brown-500: #DF8620;--color-brown-600: #C7681A;--color-brown-700: #A44919;--color-brown-800: #853A19;--color-brown-900: #6C3019;--color-brown-950: #3E1709;--color-emerald-50: #F2F7F3;--color-emerald-100: #DFECE0;--color-emerald-200: #C1D9C5;--color-emerald-300: #98BDA0;--color-emerald-400: #71A07D;--color-emerald-500: #4A7F59;--color-emerald-600: #376445;--color-emerald-700: #2C5038;--color-emerald-800: #25402F;--color-emerald-900: #1F3527;--color-emerald-950: #111D15
|
|
1
|
+
:root{--color-light-05: rgba(255, 255, 255, .05);--color-light-10: rgba(255, 255, 255, .1);--color-light-20: rgba(255, 255, 255, .2);--color-light-30: rgba(255, 255, 255, .3);--color-light-40: rgba(255, 255, 255, .4);--color-light-50: rgba(255, 255, 255, .5);--color-light-60: rgba(255, 255, 255, .6);--color-light-70: rgba(255, 255, 255, .7);--color-light-80: rgba(255, 255, 255, .8);--color-light-90: rgba(255, 255, 255, .9);--color-light-100: #FFF;--color-dark-05: rgba(15, 15, 15, .05);--color-dark-10: rgba(15, 15, 15, .1);--color-dark-20: rgba(15, 15, 15, .2);--color-dark-30: rgba(15, 15, 15, .3);--color-dark-40: rgba(15, 15, 15, .4);--color-dark-50: rgba(15, 15, 15, .5);--color-dark-60: rgba(15, 15, 15, .6);--color-dark-70: rgba(15, 15, 15, .7);--color-dark-80: rgba(15, 15, 15, .8);--color-dark-90: rgba(15, 15, 15, .9);--color-dark-100: #09090B;--color-grey-50: #FAFAFA;--color-grey-100: #E7E7E7;--color-grey-200: #D1D1D1;--color-grey-300: #B0B0B0;--color-grey-400: #888888;--color-grey-500: #6D6D6D;--color-grey-600: #5D5D5D;--color-grey-700: #4F4F4F;--color-grey-800: #454545;--color-grey-900: #3D3D3D;--color-grey-950: #0F0F0F;--color-blue-grey-50: #F4F6F7;--color-blue-grey-100: #E3E8EA;--color-blue-grey-200: #CAD3D7;--color-blue-grey-300: #A5B4BB;--color-blue-grey-400: #788D98;--color-blue-grey-500: #55626C;--color-blue-grey-600: #49565F;--color-blue-grey-700: #445058;--color-blue-grey-800: #3A4047;--color-blue-grey-900: #2B3137;--color-blue-grey-950: #24292E;--color-blue-50: #F5F8FE;--color-blue-100: #EFF4FD;--color-blue-200: #EAF0FC;--color-blue-300: #E0E9FA;--color-blue-400: #D5E1F8;--color-blue-500: #CBDAF7;--color-blue-600: #C0D2F5;--color-blue-700: #B6CBF4;--color-blue-800: #ABC3F1;--color-blue-900: #A1BCF0;--color-blue-950: #24292E;--color-blue-situaction-50: #EFF8FF;--color-blue-situaction-100: #DFF1FF;--color-blue-situaction-200: #C3E9FD;--color-blue-situaction-300: #7ED3FB;--color-blue-situaction-400: #31B7FF;--color-blue-situaction-500: #069DEF;--color-blue-situaction-600: #007DCE;--color-blue-situaction-700: #02548A;--color-blue-situaction-800: #1F416D;--color-blue-situaction-900: #1D3557;--color-blue-situaction-950: #14243D;--color-purple-50: #F1F2FC;--color-purple-100: #E6E7F9;--color-purple-200: #D1D3F4;--color-purple-300: #B5B6EC;--color-purple-400: #9A96E3;--color-purple-500: #887DD7;--color-purple-600: #6E59C5;--color-purple-700: #6652B0;--color-purple-800: #53458E;--color-purple-900: #463D72;--color-purple-950: #2A2442;--color-pink-50: #FBF4F8;--color-pink-100: #F8EBF3;--color-pink-200: #F2D8E9;--color-pink-300: #E9B8D6;--color-pink-400: #DB8BBB;--color-pink-500: #CC68A0;--color-pink-600: #B84A83;--color-pink-700: #9D3869;--color-pink-800: #833158;--color-pink-900: #6E2D4C;--color-pink-950: #42152A;--color-gold-50: #FDFAE9;--color-gold-100: #FAF0B9;--color-gold-200: #F8E490;--color-gold-300: #F4CF50;--color-gold-400: #EEB721;--color-gold-500: #DE9F14;--color-gold-600: #C07A0E;--color-gold-700: #99570F;--color-gold-800: #7F4614;--color-gold-900: #6C3917;--color-gold-950: #3F1C09;--color-brown-50: #FDF9ED;--color-brown-100: #F6E4B6;--color-brown-200: #F2D897;--color-brown-300: #ECBD5F;--color-brown-400: #E6A637;--color-brown-500: #DF8620;--color-brown-600: #C7681A;--color-brown-700: #A44919;--color-brown-800: #853A19;--color-brown-900: #6C3019;--color-brown-950: #3E1709;--color-emerald-50: #F2F7F3;--color-emerald-100: #DFECE0;--color-emerald-200: #C1D9C5;--color-emerald-300: #98BDA0;--color-emerald-400: #71A07D;--color-emerald-500: #4A7F59;--color-emerald-600: #376445;--color-emerald-700: #2C5038;--color-emerald-800: #25402F;--color-emerald-900: #1F3527;--color-emerald-950: #111D15;--color-red-50: #FFF1F1;--color-red-100: #FFDFDF;--color-red-200: #FFC5C5;--color-red-300: #FF9D9D;--color-red-400: #FF6464;--color-red-500: #FF4747;--color-red-600: #ED1515;--color-red-700: #C80D0D;--color-red-800: #A50F0F;--color-red-900: #881414;--color-red-950: #4B0404;--color-green-50: #F1FCF3;--color-green-100: #DFF9E3;--color-green-200: #C1F1C8;--color-green-300: #91E49E;--color-green-400: #45C85A;--color-green-500: #33B449;--color-green-600: #259437;--color-green-700: #20752F;--color-green-800: #1E5D29;--color-green-900: #1B4C24;--color-green-950: #092A10}:root,[data-theme=light]{--btn-primary-color: var(--primary-color-900);--btn-primary-color-hover: var(--primary-color-800);--btn-primary-color-activated: var(--primary-color-700);--btn-primary-color-text: var(--color-light-100);--secondary-color-text: var(--color-blue-situaction-900);--btn-ghost-color-hover: var(--color-dark-05);--btn-ghost-color-activated: var(--color-dark-10);--btn-ghost-color-text: var(--color-grey-950)}[data-theme=dark]{--btn-primary-color: var(--primary-color-200);--btn-primary-color-hover: var(--primary-color-100);--btn-primary-color-activated: var(--primary-color-50);--btn-primary-color-text: var(--primary-color-900);--secondary-color-text: var(--color-light-100);--btn-ghost-color-hover: var(--color-light-05);--btn-ghost-color-activated: var(--color-light-10);--btn-ghost-color-text: var(--color-light-100)}._button_1v38z_190{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_1v38z_190:focus{outline:2px solid var(--dynamic-color);outline-offset:2px}._button_1v38z_190:disabled{background-color:var(--color-dark-05);color:var(--color-dark-40);border:1px solid var(--color-dark-10);cursor:initial;pointer-events:none}._button_1v38z_190:disabled *{fill:var(--color-dark-40)}._button-round_1v38z_219._button_1v38z_190{border-radius:50%}._button-primary_1v38z_222{color:var(--dynamic-color-text);background-color:var(--dynamic-color)}._button-primary_1v38z_222:hover{background-color:var(--dynamic-color-hover)}._button-primary_1v38z_222:active{background-color:var(--dynamic-color-activated)}._button-primary_1v38z_222 *{fill:var(--dynamic-color-text)}._button-secondary_1v38z_235{color:var(--secondary-color-text);background-color:#96b4ee33;border:1px solid rgba(150,180,238,.5)}._button-secondary_1v38z_235:hover{background-color:#96b4ee66}._button-secondary_1v38z_235:active{background-color:#96b4ee99}._button-secondary_1v38z_235 *{fill:var(--secondary-color-text)}._button-tertiary_1v38z_249{color:var(--secondary-color-text);background-color:transparent;border:1px solid rgba(150,180,238,.5)}._button-tertiary_1v38z_249:hover{background-color:#96b4ee1a}._button-tertiary_1v38z_249:active{background-color:#96b4ee33}._button-tertiary_1v38z_249 *{fill:var(--secondary-color-text)}._button-ghost_1v38z_263{color:var(--btn-ghost-color-text);background-color:transparent}._button-ghost_1v38z_263:hover{background-color:var(--btn-ghost-color-hover)}._button-ghost_1v38z_263:active{background-color:var(--btn-ghost-color-activated)}._button-ghost_1v38z_263 *{fill:var(--btn-ghost-color-text)}._button-error_1v38z_276{color:var(color-light-100);background-color:#ff4747}._button-error_1v38z_276:hover{background-color:#ed1515}._button-error_1v38z_276:active{background-color:#c80d0d}._button-error_1v38z_276 *{fill:var(--secondary-color-text)}._button-size-xl_1v38z_289{border-radius:.5rem;padding:1rem;font-size:1.125em}._button-size-l_1v38z_294{border-radius:.5rem;padding:.75rem;font-size:1em}._button-size-m_1v38z_299{border-radius:.25rem;padding:.5rem;font-size:.875em}._button-size-s_1v38z_304{border-radius:.25rem;padding:.375rem;font-size:.75em}
|
package/dist/styles/Input.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root,[data-theme=light]{--btn-primary-color: var(--primary-color-900);--btn-primary-color-hover: var(--primary-color-800);--btn-primary-color-activated: var(--primary-color-700);--btn-primary-color-disabled: var(--primary-color-50);--btn-primary-color-text: var(--color-light-100);--btn-secondary-color: rgba(150, 180, 238, .1);--btn-secondary-color-hover: rgba(150, 180, 238, .2);--btn-secondary-color-activated: rgba(150, 180, 238, .3);--btn-secondary-color-disabled: var(--color-dark-05);--btn-secondary-color-border-disabled: var(--color-dark-20);--btn-secondary-color-text: var(--color-blue-situaction-900);--btn-secondary-color-border: rgba(150, 180, 238, .5);--btn-tertiary-color: var(--color-light-100);--btn-tertiary-color-hover: var(--color-dark-05);--btn-tertiary-color-activated: var(--color-dark-10);--btn-tertiary-color-disabled: var(--color-dark-05);--btn-tertiary-color-border-disabled: var(--color-dark-20);--btn-tertiary-color-text: var(--color-grey-950);--btn-tertiary-color-border: var(--color-dark-20);--btn-ghost-color-hover: var(--color-dark-05);--btn-ghost-color-activated: var(--color-dark-10);--btn-ghost-color-text: var(--color-grey-950);--btn-ghost-color-text-disabled: var(--color-dark-40)}[data-theme=dark]{--btn-primary-color: var(--primary-color-200);--btn-primary-color-hover: var(--primary-color-100);--btn-primary-color-activated: var(--primary-color-50);--btn-primary-color-disabled: var(--primary-dark-color-disabled);--btn-primary-color-text: var(--primary-color-900);--btn-secondary-color: rgba(150, 180, 238, .1);--btn-secondary-color-hover: rgba(150, 180, 238, .2);--btn-secondary-color-activated: rgba(150, 180, 238, .3);--btn-secondary-color-disabled: var(--color-dark-05);--btn-secondary-color-border-disabled: var(--color-light-20);--btn-secondary-color-text: var(--color-light-100);--btn-secondary-color-border: rgba(150, 180, 238, .5);--btn-tertiary-color: var(--color-light-100);--btn-tertiary-color-hover: var(---color-light-05);--btn-tertiary-color-activated: var(--color-light-10);--btn-tertiary-color-disabled: var(--color-light-05);--btn-tertiary-color-border-disabled: var(--color-light-40);--btn-tertiary-color-text: var(--color-light-100);--btn-tertiary-color-border: var(--color-light-20);--btn-ghost-color-hover: var(--color-light-05);--btn-ghost-color-activated: var(--color-light-10);--btn-ghost-color-text: var(--color-light-100);--btn-ghost-color-text-disabled: var(--color-light-40)}:root{--color-light-05: rgba(255, 255, 255, .05);--color-light-10: rgba(255, 255, 255, .1);--color-light-20: rgba(255, 255, 255, .2);--color-light-30: rgba(255, 255, 255, .3);--color-light-40: rgba(255, 255, 255, .4);--color-light-50: rgba(255, 255, 255, .5);--color-light-60: rgba(255, 255, 255, .6);--color-light-70: rgba(255, 255, 255, .7);--color-light-80: rgba(255, 255, 255, .8);--color-light-90: rgba(255, 255, 255, .9);--color-light-100: #FFF;--color-dark-05: rgba(15, 15, 15, .05);--color-dark-10: rgba(15, 15, 15, .1);--color-dark-20: rgba(15, 15, 15, .2);--color-dark-30: rgba(15, 15, 15, .3);--color-dark-40: rgba(15, 15, 15, .4);--color-dark-50: rgba(15, 15, 15, .5);--color-dark-60: rgba(15, 15, 15, .6);--color-dark-70: rgba(15, 15, 15, .7);--color-dark-80: rgba(15, 15, 15, .8);--color-dark-90: rgba(15, 15, 15, .9);--color-dark-100: #09090B;--color-grey-50: #FAFAFA;--color-grey-100: #E7E7E7;--color-grey-200: #D1D1D1;--color-grey-300: #B0B0B0;--color-grey-400: #888888;--color-grey-500: #6D6D6D;--color-grey-600: #5D5D5D;--color-grey-700: #4F4F4F;--color-grey-800: #454545;--color-grey-900: #3D3D3D;--color-grey-950: #0F0F0F;--color-blue-grey-50: #F4F6F7;--color-blue-grey-100: #E3E8EA;--color-blue-grey-200: #CAD3D7;--color-blue-grey-300: #A5B4BB;--color-blue-grey-400: #788D98;--color-blue-grey-500: #55626C;--color-blue-grey-600: #49565F;--color-blue-grey-700: #445058;--color-blue-grey-800: #3A4047;--color-blue-grey-900: #2B3137;--color-blue-grey-950: #24292E;--color-blue-50: #F5F8FE;--color-blue-100: #EFF4FD;--color-blue-200: #EAF0FC;--color-blue-300: #E0E9FA;--color-blue-400: #D5E1F8;--color-blue-500: #CBDAF7;--color-blue-600: #C0D2F5;--color-blue-700: #B6CBF4;--color-blue-800: #ABC3F1;--color-blue-900: #A1BCF0;--color-blue-950: #24292E;--color-blue-situaction-50: #EFF8FF;--color-blue-situaction-100: #DFF1FF;--color-blue-situaction-200: #C3E9FD;--color-blue-situaction-300: #7ED3FB;--color-blue-situaction-400: #31B7FF;--color-blue-situaction-500: #069DEF;--color-blue-situaction-600: #007DCE;--color-blue-situaction-700: #02548A;--color-blue-situaction-800: #1F416D;--color-blue-situaction-900: #1D3557;--color-blue-situaction-950: #14243D;--color-purple-50: #F1F2FC;--color-purple-100: #E6E7F9;--color-purple-200: #D1D3F4;--color-purple-300: #B5B6EC;--color-purple-400: #9A96E3;--color-purple-500: #887DD7;--color-purple-600: #6E59C5;--color-purple-700: #6652B0;--color-purple-800: #53458E;--color-purple-900: #463D72;--color-purple-950: #2A2442;--color-pink-50: #FBF4F8;--color-pink-100: #F8EBF3;--color-pink-200: #F2D8E9;--color-pink-300: #E9B8D6;--color-pink-400: #DB8BBB;--color-pink-500: #CC68A0;--color-pink-600: #B84A83;--color-pink-700: #9D3869;--color-pink-800: #833158;--color-pink-900: #6E2D4C;--color-pink-950: #42152A;--color-gold-50: #FDFAE9;--color-gold-100: #FAF0B9;--color-gold-200: #F8E490;--color-gold-300: #F4CF50;--color-gold-400: #EEB721;--color-gold-500: #DE9F14;--color-gold-600: #C07A0E;--color-gold-700: #99570F;--color-gold-800: #7F4614;--color-gold-900: #6C3917;--color-gold-950: #3F1C09;--color-brown-50: #FDF9ED;--color-brown-100: #F6E4B6;--color-brown-200: #F2D897;--color-brown-300: #ECBD5F;--color-brown-400: #E6A637;--color-brown-500: #DF8620;--color-brown-600: #C7681A;--color-brown-700: #A44919;--color-brown-800: #853A19;--color-brown-900: #6C3019;--color-brown-950: #3E1709;--color-emerald-50: #F2F7F3;--color-emerald-100: #DFECE0;--color-emerald-200: #C1D9C5;--color-emerald-300: #98BDA0;--color-emerald-400: #71A07D;--color-emerald-500: #4A7F59;--color-emerald-600: #376445;--color-emerald-700: #2C5038;--color-emerald-800: #25402F;--color-emerald-900: #1F3527;--color-emerald-950: #111D15}._input-style_1in9x_333{font-family:Urbanist,sans-serif;border:1px solid var(--color-blue-grey-300);box-shadow:0 4px 5px #0000000a;color:var(--btn-primary-color);position:relative}._input-style-ghost_1in9x_341{border-bottom:1px solid var(--color-blue-grey-300);border-width:0 0 1px 0;border-radius:0!important}._input-style-disabled_1in9x_346{background-color:var(--color-light-100);border-color:var(--color-blue-grey-300);pointer-events:none;color:var(--color-blue-grey-300)}._input-style-disabled_1in9x_346 input{color:var(--color-blue-grey-300)}._input-style-focused_1in9x_355{border-color:var(--dynamic-color);color:var(--dynamic-color);background-color:var(--dynamic-background-color)}._input-style-focused_1in9x_355 ._input-container_1in9x_360 ._floating-input_1in9x_360:not(:placeholder-shown)~._floating-label_1in9x_360{color:var(--color-blue-situaction-900)}._input-style-error_1in9x_363{border-color:#ff4747;color:#ff4747}._input-style-error_1in9x_363 ._input-container_1in9x_360 ._floating-input_1in9x_360:not(:placeholder-shown)~._floating-label_1in9x_360{color:#ff4747}._input-style-error-focused_1in9x_370{background-color:#fff1f1}._input-style-error-disabled_1in9x_373{background-color:#fff1f1;border-color:#ff9d9d;color:#ff9d9d}._input-style-error-disabled_1in9x_373 input{color:#ff9d9d}._input-style-success_1in9x_381{border-color:#33b449;color:#33b449}._input-style-success_1in9x_381 ._input-container_1in9x_360 ._floating-input_1in9x_360:not(:placeholder-shown)~._floating-label_1in9x_360{color:#33b449}._input-style-success-focused_1in9x_388{background-color:#f1fcf3}._input-style-success-disabled_1in9x_391{background-color:#f1fcf3;border-color:#91e49e;color:#91e49e}._input-style-success-disabled_1in9x_391 input{color:#91e49e}._input-style_1in9x_333 ._input-container_1in9x_360{position:relative;width:100%}._input-style_1in9x_333 ._floating-label_1in9x_360{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all;width:auto;z-index:1;line-height:14px}._input-style_1in9x_333 ._floating-label-size-xl_1in9x_416{font-size:1em}._input-style_1in9x_333 ._floating-label-size-l_1in9x_419,._input-style_1in9x_333 ._floating-label-size-m_1in9x_422{font-size:.875em}._input-style_1in9x_333 ._floating-label-size-s_1in9x_425{font-size:.75em}._input-style_1in9x_333 ._floating-input_1in9x_360{display:block;width:100%;box-sizing:border-box}._input-style_1in9x_333 ._floating-input-size-xl_1in9x_434{font-size:1.125em;line-height:28px}._input-style_1in9x_333 ._floating-input-size-l_1in9x_438{font-size:1em;line-height:24px}._input-style_1in9x_333 ._floating-input-size-m_1in9x_442{font-size:.875em;line-height:22px}._input-style_1in9x_333 ._floating-input-size-s_1in9x_446{font-size:.875em;line-height:20px}._input-style_1in9x_333 ._floating-input_1in9x_360:not(:placeholder-shown)~._floating-label_1in9x_360{top:-10px;font-size:14px}._input-style_1in9x_333 ._floating-input_1in9x_360:not(:placeholder-shown)~._floating-label_1in9x_360._floating-label-size-xl_1in9x_416{top:-19px}._input-style_1in9x_333 ._floating-input_1in9x_360:not(:placeholder-shown)~._floating-label_1in9x_360._floating-label-size-l_1in9x_419{top:-16px}._input-style_1in9x_333 ._floating-input_1in9x_360:not(:placeholder-shown)~._floating-label_1in9x_360._floating-label-size-m_1in9x_422{top:-12px}._input-style_1in9x_333 ._floating-input_1in9x_360:not(:placeholder-shown)~._floating-label_1in9x_360._floating-label-size-s_1in9x_425{top:-11px}._input-style_1in9x_333 ._hideBorder_1in9x_466{position:absolute;top:-1px;left:0;width:100%;height:1px;background-color:#535bf2;z-index:0;transition:background-color .2s ease}._input-style_1in9x_333 ._hideBorder-error_1in9x_476{background-color:#fff1f1}._input-style_1in9x_333 ._hideBorder-success_1in9x_479{background-color:#f1fcf3}._input-style-size-xl_1in9x_482{padding:16px;font-size:1.125em;line-height:28px;border-radius:8px}._input-style-size-l_1in9x_488{padding:12px;font-size:1em;line-height:24px;border-radius:8px}._input-style-size-m_1in9x_494{padding:8px;font-size:.875em;line-height:22px;border-radius:8px}._input-style-size-s_1in9x_500{padding:6px;font-size:.875em;line-height:20px;border-radius:4px}input{color:var(--color-blue-situaction-900)}
|
|
1
|
+
:root,[data-theme=light]{--btn-primary-color: var(--primary-color-900);--btn-primary-color-hover: var(--primary-color-800);--btn-primary-color-activated: var(--primary-color-700);--btn-primary-color-text: var(--color-light-100);--secondary-color-text: var(--color-blue-situaction-900);--btn-ghost-color-hover: var(--color-dark-05);--btn-ghost-color-activated: var(--color-dark-10);--btn-ghost-color-text: var(--color-grey-950)}[data-theme=dark]{--btn-primary-color: var(--primary-color-200);--btn-primary-color-hover: var(--primary-color-100);--btn-primary-color-activated: var(--primary-color-50);--btn-primary-color-text: var(--primary-color-900);--secondary-color-text: var(--color-light-100);--btn-ghost-color-hover: var(--color-light-05);--btn-ghost-color-activated: var(--color-light-10);--btn-ghost-color-text: var(--color-light-100)}:root{--color-light-05: rgba(255, 255, 255, .05);--color-light-10: rgba(255, 255, 255, .1);--color-light-20: rgba(255, 255, 255, .2);--color-light-30: rgba(255, 255, 255, .3);--color-light-40: rgba(255, 255, 255, .4);--color-light-50: rgba(255, 255, 255, .5);--color-light-60: rgba(255, 255, 255, .6);--color-light-70: rgba(255, 255, 255, .7);--color-light-80: rgba(255, 255, 255, .8);--color-light-90: rgba(255, 255, 255, .9);--color-light-100: #FFF;--color-dark-05: rgba(15, 15, 15, .05);--color-dark-10: rgba(15, 15, 15, .1);--color-dark-20: rgba(15, 15, 15, .2);--color-dark-30: rgba(15, 15, 15, .3);--color-dark-40: rgba(15, 15, 15, .4);--color-dark-50: rgba(15, 15, 15, .5);--color-dark-60: rgba(15, 15, 15, .6);--color-dark-70: rgba(15, 15, 15, .7);--color-dark-80: rgba(15, 15, 15, .8);--color-dark-90: rgba(15, 15, 15, .9);--color-dark-100: #09090B;--color-grey-50: #FAFAFA;--color-grey-100: #E7E7E7;--color-grey-200: #D1D1D1;--color-grey-300: #B0B0B0;--color-grey-400: #888888;--color-grey-500: #6D6D6D;--color-grey-600: #5D5D5D;--color-grey-700: #4F4F4F;--color-grey-800: #454545;--color-grey-900: #3D3D3D;--color-grey-950: #0F0F0F;--color-blue-grey-50: #F4F6F7;--color-blue-grey-100: #E3E8EA;--color-blue-grey-200: #CAD3D7;--color-blue-grey-300: #A5B4BB;--color-blue-grey-400: #788D98;--color-blue-grey-500: #55626C;--color-blue-grey-600: #49565F;--color-blue-grey-700: #445058;--color-blue-grey-800: #3A4047;--color-blue-grey-900: #2B3137;--color-blue-grey-950: #24292E;--color-blue-50: #F5F8FE;--color-blue-100: #EFF4FD;--color-blue-200: #EAF0FC;--color-blue-300: #E0E9FA;--color-blue-400: #D5E1F8;--color-blue-500: #CBDAF7;--color-blue-600: #C0D2F5;--color-blue-700: #B6CBF4;--color-blue-800: #ABC3F1;--color-blue-900: #A1BCF0;--color-blue-950: #24292E;--color-blue-situaction-50: #EFF8FF;--color-blue-situaction-100: #DFF1FF;--color-blue-situaction-200: #C3E9FD;--color-blue-situaction-300: #7ED3FB;--color-blue-situaction-400: #31B7FF;--color-blue-situaction-500: #069DEF;--color-blue-situaction-600: #007DCE;--color-blue-situaction-700: #02548A;--color-blue-situaction-800: #1F416D;--color-blue-situaction-900: #1D3557;--color-blue-situaction-950: #14243D;--color-purple-50: #F1F2FC;--color-purple-100: #E6E7F9;--color-purple-200: #D1D3F4;--color-purple-300: #B5B6EC;--color-purple-400: #9A96E3;--color-purple-500: #887DD7;--color-purple-600: #6E59C5;--color-purple-700: #6652B0;--color-purple-800: #53458E;--color-purple-900: #463D72;--color-purple-950: #2A2442;--color-pink-50: #FBF4F8;--color-pink-100: #F8EBF3;--color-pink-200: #F2D8E9;--color-pink-300: #E9B8D6;--color-pink-400: #DB8BBB;--color-pink-500: #CC68A0;--color-pink-600: #B84A83;--color-pink-700: #9D3869;--color-pink-800: #833158;--color-pink-900: #6E2D4C;--color-pink-950: #42152A;--color-gold-50: #FDFAE9;--color-gold-100: #FAF0B9;--color-gold-200: #F8E490;--color-gold-300: #F4CF50;--color-gold-400: #EEB721;--color-gold-500: #DE9F14;--color-gold-600: #C07A0E;--color-gold-700: #99570F;--color-gold-800: #7F4614;--color-gold-900: #6C3917;--color-gold-950: #3F1C09;--color-brown-50: #FDF9ED;--color-brown-100: #F6E4B6;--color-brown-200: #F2D897;--color-brown-300: #ECBD5F;--color-brown-400: #E6A637;--color-brown-500: #DF8620;--color-brown-600: #C7681A;--color-brown-700: #A44919;--color-brown-800: #853A19;--color-brown-900: #6C3019;--color-brown-950: #3E1709;--color-emerald-50: #F2F7F3;--color-emerald-100: #DFECE0;--color-emerald-200: #C1D9C5;--color-emerald-300: #98BDA0;--color-emerald-400: #71A07D;--color-emerald-500: #4A7F59;--color-emerald-600: #376445;--color-emerald-700: #2C5038;--color-emerald-800: #25402F;--color-emerald-900: #1F3527;--color-emerald-950: #111D15;--color-red-50: #FFF1F1;--color-red-100: #FFDFDF;--color-red-200: #FFC5C5;--color-red-300: #FF9D9D;--color-red-400: #FF6464;--color-red-500: #FF4747;--color-red-600: #ED1515;--color-red-700: #C80D0D;--color-red-800: #A50F0F;--color-red-900: #881414;--color-red-950: #4B0404;--color-green-50: #F1FCF3;--color-green-100: #DFF9E3;--color-green-200: #C1F1C8;--color-green-300: #91E49E;--color-green-400: #45C85A;--color-green-500: #33B449;--color-green-600: #259437;--color-green-700: #20752F;--color-green-800: #1E5D29;--color-green-900: #1B4C24;--color-green-950: #092A10}input{font-family:Urbanist,sans-serif;border:none;background-color:transparent}input:focus{outline:none;box-shadow:none;border-color:transparent}._input-style_1efo0_363{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_1efo0_363 input{color:var(--dynamic-color)}._input-style-ghost_1efo0_374{border-bottom:solid var(--color-blue-grey-300);border-width:0 0 1px 0;border-radius:0!important}._input-style-disabled_1efo0_379{background-color:var(--color-light-100);border-color:var(--color-blue-grey-300);pointer-events:none;color:var(--color-blue-grey-300)}._input-style-disabled_1efo0_379 input{color:var(--color-blue-grey-300)}._input-style-focused_1efo0_388{color:var(--dynamic-color);border-color:var(--dynamic-color-border);background-color:var(--dynamic-background-color)}._input-style-error_1efo0_393{border-color:#ff4747;color:#ff4747}._input-style-error_1efo0_393 input,._input-style-error-focused_1efo0_400,._input-style-error-focused_1efo0_400 input{color:#ff4747}._input-style-error-focus-background_1efo0_406{background-color:#fff1f1}._input-style-error-disabled_1efo0_409{background-color:#fff1f1;border-color:#ff9d9d;color:#ff9d9d}._input-style-error-disabled_1efo0_409 input{color:#ff9d9d}._input-style-success_1efo0_417{border-color:#33b449;color:#33b449}._input-style-success_1efo0_417 input,._input-style-success-focused_1efo0_424,._input-style-success-focused_1efo0_424 input{color:#33b449}._input-style-success-focus-background_1efo0_430{background-color:#f1fcf3}._input-style-success-disabled_1efo0_433{background-color:#f1fcf3;border-color:#91e49e;color:#91e49e}._input-style-success-disabled_1efo0_433 input{color:#91e49e}._input-style_1efo0_363 ._input-container_1efo0_441{position:relative;width:100%}._input-style_1efo0_363 ._floating-input_1efo0_445{display:block;width:100%;box-sizing:border-box}._input-style_1efo0_363 ._floating-input-size-xl_1efo0_451{font-size:1.125em;line-height:28px}._input-style_1efo0_363 ._floating-input-size-l_1efo0_455{font-size:1em;line-height:24px}._input-style_1efo0_363 ._floating-input-size-m_1efo0_459{font-size:.875em;line-height:22px}._input-style_1efo0_363 ._floating-input-size-s_1efo0_463{font-size:.875em;line-height:20px}._input-style-size-xl_1efo0_467{padding:16px;font-size:1.125em;line-height:28px;border-radius:8px}._input-style-size-l_1efo0_473{padding:12px;font-size:1em;line-height:24px;border-radius:8px}._input-style-size-m_1efo0_479{padding:8px;font-size:.875em;line-height:22px;border-radius:8px}._input-style-size-s_1efo0_485{padding:6px;font-size:.875em;line-height:20px;border-radius:4px}._input-style-radius_1efo0_491{border-radius:50px}
|
package/dist/styles/index.css
CHANGED
|
@@ -1 +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}.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}.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}.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}:root,body{font-family:Urbanist,sans-serif}.fontUrbanist{font-family:Urbanist,sans-serif}.textColorPrimary{color:var(--color-blue-situaction-900)}.backColorPrimary{background-color:var(--color-blue-situaction-900)}.flexHorizontal{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}.flexHorizontalCenter{display:flex;justify-content:center;align-items:center;flex-direction:row}.flexHorizontalBetween{display:flex;justify-content:space-between;align-items:center;flex-direction:row}.flexVertical{display:flex;justify-content:flex-start;align-items:center;flex-direction:column}.flexVerticalCenter{display:flex;justify-content:center;align-items:center;flex-direction:row}
|
package/dist/styles/main.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}html{overflow-x:hidden}body{line-height:1;width:100vw;height:100vh}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}button{border:none;padding:0;cursor:pointer}input{font-family:Urbanist,sans-serif;border:none;background-color:transparent}input:focus{outline:none;box-shadow:none;border-color:transparent}:root{--color-light-05: rgba(255, 255, 255, .05);--color-light-10: rgba(255, 255, 255, .1);--color-light-20: rgba(255, 255, 255, .2);--color-light-30: rgba(255, 255, 255, .3);--color-light-40: rgba(255, 255, 255, .4);--color-light-50: rgba(255, 255, 255, .5);--color-light-60: rgba(255, 255, 255, .6);--color-light-70: rgba(255, 255, 255, .7);--color-light-80: rgba(255, 255, 255, .8);--color-light-90: rgba(255, 255, 255, .9);--color-light-100: #FFF;--color-dark-05: rgba(15, 15, 15, .05);--color-dark-10: rgba(15, 15, 15, .1);--color-dark-20: rgba(15, 15, 15, .2);--color-dark-30: rgba(15, 15, 15, .3);--color-dark-40: rgba(15, 15, 15, .4);--color-dark-50: rgba(15, 15, 15, .5);--color-dark-60: rgba(15, 15, 15, .6);--color-dark-70: rgba(15, 15, 15, .7);--color-dark-80: rgba(15, 15, 15, .8);--color-dark-90: rgba(15, 15, 15, .9);--color-dark-100: #09090B;--color-grey-50: #FAFAFA;--color-grey-100: #E7E7E7;--color-grey-200: #D1D1D1;--color-grey-300: #B0B0B0;--color-grey-400: #888888;--color-grey-500: #6D6D6D;--color-grey-600: #5D5D5D;--color-grey-700: #4F4F4F;--color-grey-800: #454545;--color-grey-900: #3D3D3D;--color-grey-950: #0F0F0F;--color-blue-grey-50: #F4F6F7;--color-blue-grey-100: #E3E8EA;--color-blue-grey-200: #CAD3D7;--color-blue-grey-300: #A5B4BB;--color-blue-grey-400: #788D98;--color-blue-grey-500: #55626C;--color-blue-grey-600: #49565F;--color-blue-grey-700: #445058;--color-blue-grey-800: #3A4047;--color-blue-grey-900: #2B3137;--color-blue-grey-950: #24292E;--color-blue-50: #F5F8FE;--color-blue-100: #EFF4FD;--color-blue-200: #EAF0FC;--color-blue-300: #E0E9FA;--color-blue-400: #D5E1F8;--color-blue-500: #CBDAF7;--color-blue-600: #C0D2F5;--color-blue-700: #B6CBF4;--color-blue-800: #ABC3F1;--color-blue-900: #A1BCF0;--color-blue-950: #24292E;--color-blue-situaction-50: #EFF8FF;--color-blue-situaction-100: #DFF1FF;--color-blue-situaction-200: #C3E9FD;--color-blue-situaction-300: #7ED3FB;--color-blue-situaction-400: #31B7FF;--color-blue-situaction-500: #069DEF;--color-blue-situaction-600: #007DCE;--color-blue-situaction-700: #02548A;--color-blue-situaction-800: #1F416D;--color-blue-situaction-900: #1D3557;--color-blue-situaction-950: #14243D;--color-purple-50: #F1F2FC;--color-purple-100: #E6E7F9;--color-purple-200: #D1D3F4;--color-purple-300: #B5B6EC;--color-purple-400: #9A96E3;--color-purple-500: #887DD7;--color-purple-600: #6E59C5;--color-purple-700: #6652B0;--color-purple-800: #53458E;--color-purple-900: #463D72;--color-purple-950: #2A2442;--color-pink-50: #FBF4F8;--color-pink-100: #F8EBF3;--color-pink-200: #F2D8E9;--color-pink-300: #E9B8D6;--color-pink-400: #DB8BBB;--color-pink-500: #CC68A0;--color-pink-600: #B84A83;--color-pink-700: #9D3869;--color-pink-800: #833158;--color-pink-900: #6E2D4C;--color-pink-950: #42152A;--color-gold-50: #FDFAE9;--color-gold-100: #FAF0B9;--color-gold-200: #F8E490;--color-gold-300: #F4CF50;--color-gold-400: #EEB721;--color-gold-500: #DE9F14;--color-gold-600: #C07A0E;--color-gold-700: #99570F;--color-gold-800: #7F4614;--color-gold-900: #6C3917;--color-gold-950: #3F1C09;--color-brown-50: #FDF9ED;--color-brown-100: #F6E4B6;--color-brown-200: #F2D897;--color-brown-300: #ECBD5F;--color-brown-400: #E6A637;--color-brown-500: #DF8620;--color-brown-600: #C7681A;--color-brown-700: #A44919;--color-brown-800: #853A19;--color-brown-900: #6C3019;--color-brown-950: #3E1709;--color-emerald-50: #F2F7F3;--color-emerald-100: #DFECE0;--color-emerald-200: #C1D9C5;--color-emerald-300: #98BDA0;--color-emerald-400: #71A07D;--color-emerald-500: #4A7F59;--color-emerald-600: #376445;--color-emerald-700: #2C5038;--color-emerald-800: #25402F;--color-emerald-900: #1F3527;--color-emerald-950: #111D15}:root,[data-theme=light]{--btn-primary-color: var(--primary-color-900);--btn-primary-color-hover: var(--primary-color-800);--btn-primary-color-activated: var(--primary-color-700);--btn-primary-color-disabled: var(--primary-color-50);--btn-primary-color-text: var(--color-light-100);--btn-secondary-color: rgba(150, 180, 238, .1);--btn-secondary-color-hover: rgba(150, 180, 238, .2);--btn-secondary-color-activated: rgba(150, 180, 238, .3);--btn-secondary-color-disabled: var(--color-dark-05);--btn-secondary-color-border-disabled: var(--color-dark-20);--btn-secondary-color-text: var(--color-blue-situaction-900);--btn-secondary-color-border: rgba(150, 180, 238, .5);--btn-tertiary-color: var(--color-light-100);--btn-tertiary-color-hover: var(--color-dark-05);--btn-tertiary-color-activated: var(--color-dark-10);--btn-tertiary-color-disabled: var(--color-dark-05);--btn-tertiary-color-border-disabled: var(--color-dark-20);--btn-tertiary-color-text: var(--color-grey-950);--btn-tertiary-color-border: var(--color-dark-20);--btn-ghost-color-hover: var(--color-dark-05);--btn-ghost-color-activated: var(--color-dark-10);--btn-ghost-color-text: var(--color-grey-950);--btn-ghost-color-text-disabled: var(--color-dark-40)}[data-theme=dark]{--btn-primary-color: var(--primary-color-200);--btn-primary-color-hover: var(--primary-color-100);--btn-primary-color-activated: var(--primary-color-50);--btn-primary-color-disabled: var(--primary-dark-color-disabled);--btn-primary-color-text: var(--primary-color-900);--btn-secondary-color: rgba(150, 180, 238, .1);--btn-secondary-color-hover: rgba(150, 180, 238, .2);--btn-secondary-color-activated: rgba(150, 180, 238, .3);--btn-secondary-color-disabled: var(--color-dark-05);--btn-secondary-color-border-disabled: var(--color-light-20);--btn-secondary-color-text: var(--color-light-100);--btn-secondary-color-border: rgba(150, 180, 238, .5);--btn-tertiary-color: var(--color-light-100);--btn-tertiary-color-hover: var(---color-light-05);--btn-tertiary-color-activated: var(--color-light-10);--btn-tertiary-color-disabled: var(--color-light-05);--btn-tertiary-color-border-disabled: var(--color-light-40);--btn-tertiary-color-text: var(--color-light-100);--btn-tertiary-color-border: var(--color-light-20);--btn-ghost-color-hover: var(--color-light-05);--btn-ghost-color-activated: var(--color-light-10);--btn-ghost-color-text: var(--color-light-100);--btn-ghost-color-text-disabled: var(--color-light-40)}
|
|
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}.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}.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}:root{--spacing-xs-7: .125rem;--spacing-xs-6: .25rem;--spacing-xs-5: .375rem;--spacing-xs-4: .5rem;--spacing-xs-3: .625rem;--spacing-xs-2: .75rem;--spacing-xs: .875rem;--spacing-s: 1rem;--spacing-m-1: 1.125rem;--spacing-m-2: 1.25rem;--spacing-l: 1.5rem;--spacing-xl: 1.75rem;--spacing-xl-2: 2rem;--spacing-xl-3: 2.25rem;--spacing-xl-4: 2.75rem;--spacing-xl-5: 3rem;--spacing-xl-6: 4rem}:root{--color-light-05: rgba(255, 255, 255, .05);--color-light-10: rgba(255, 255, 255, .1);--color-light-20: rgba(255, 255, 255, .2);--color-light-30: rgba(255, 255, 255, .3);--color-light-40: rgba(255, 255, 255, .4);--color-light-50: rgba(255, 255, 255, .5);--color-light-60: rgba(255, 255, 255, .6);--color-light-70: rgba(255, 255, 255, .7);--color-light-80: rgba(255, 255, 255, .8);--color-light-90: rgba(255, 255, 255, .9);--color-light-100: #FFF;--color-dark-05: rgba(15, 15, 15, .05);--color-dark-10: rgba(15, 15, 15, .1);--color-dark-20: rgba(15, 15, 15, .2);--color-dark-30: rgba(15, 15, 15, .3);--color-dark-40: rgba(15, 15, 15, .4);--color-dark-50: rgba(15, 15, 15, .5);--color-dark-60: rgba(15, 15, 15, .6);--color-dark-70: rgba(15, 15, 15, .7);--color-dark-80: rgba(15, 15, 15, .8);--color-dark-90: rgba(15, 15, 15, .9);--color-dark-100: #09090B;--color-grey-50: #FAFAFA;--color-grey-100: #E7E7E7;--color-grey-200: #D1D1D1;--color-grey-300: #B0B0B0;--color-grey-400: #888888;--color-grey-500: #6D6D6D;--color-grey-600: #5D5D5D;--color-grey-700: #4F4F4F;--color-grey-800: #454545;--color-grey-900: #3D3D3D;--color-grey-950: #0F0F0F;--color-blue-grey-50: #F4F6F7;--color-blue-grey-100: #E3E8EA;--color-blue-grey-200: #CAD3D7;--color-blue-grey-300: #A5B4BB;--color-blue-grey-400: #788D98;--color-blue-grey-500: #55626C;--color-blue-grey-600: #49565F;--color-blue-grey-700: #445058;--color-blue-grey-800: #3A4047;--color-blue-grey-900: #2B3137;--color-blue-grey-950: #24292E;--color-blue-50: #F5F8FE;--color-blue-100: #EFF4FD;--color-blue-200: #EAF0FC;--color-blue-300: #E0E9FA;--color-blue-400: #D5E1F8;--color-blue-500: #CBDAF7;--color-blue-600: #C0D2F5;--color-blue-700: #B6CBF4;--color-blue-800: #ABC3F1;--color-blue-900: #A1BCF0;--color-blue-950: #24292E;--color-blue-situaction-50: #EFF8FF;--color-blue-situaction-100: #DFF1FF;--color-blue-situaction-200: #C3E9FD;--color-blue-situaction-300: #7ED3FB;--color-blue-situaction-400: #31B7FF;--color-blue-situaction-500: #069DEF;--color-blue-situaction-600: #007DCE;--color-blue-situaction-700: #02548A;--color-blue-situaction-800: #1F416D;--color-blue-situaction-900: #1D3557;--color-blue-situaction-950: #14243D;--color-purple-50: #F1F2FC;--color-purple-100: #E6E7F9;--color-purple-200: #D1D3F4;--color-purple-300: #B5B6EC;--color-purple-400: #9A96E3;--color-purple-500: #887DD7;--color-purple-600: #6E59C5;--color-purple-700: #6652B0;--color-purple-800: #53458E;--color-purple-900: #463D72;--color-purple-950: #2A2442;--color-pink-50: #FBF4F8;--color-pink-100: #F8EBF3;--color-pink-200: #F2D8E9;--color-pink-300: #E9B8D6;--color-pink-400: #DB8BBB;--color-pink-500: #CC68A0;--color-pink-600: #B84A83;--color-pink-700: #9D3869;--color-pink-800: #833158;--color-pink-900: #6E2D4C;--color-pink-950: #42152A;--color-gold-50: #FDFAE9;--color-gold-100: #FAF0B9;--color-gold-200: #F8E490;--color-gold-300: #F4CF50;--color-gold-400: #EEB721;--color-gold-500: #DE9F14;--color-gold-600: #C07A0E;--color-gold-700: #99570F;--color-gold-800: #7F4614;--color-gold-900: #6C3917;--color-gold-950: #3F1C09;--color-brown-50: #FDF9ED;--color-brown-100: #F6E4B6;--color-brown-200: #F2D897;--color-brown-300: #ECBD5F;--color-brown-400: #E6A637;--color-brown-500: #DF8620;--color-brown-600: #C7681A;--color-brown-700: #A44919;--color-brown-800: #853A19;--color-brown-900: #6C3019;--color-brown-950: #3E1709;--color-emerald-50: #F2F7F3;--color-emerald-100: #DFECE0;--color-emerald-200: #C1D9C5;--color-emerald-300: #98BDA0;--color-emerald-400: #71A07D;--color-emerald-500: #4A7F59;--color-emerald-600: #376445;--color-emerald-700: #2C5038;--color-emerald-800: #25402F;--color-emerald-900: #1F3527;--color-emerald-950: #111D15;--color-red-50: #FFF1F1;--color-red-100: #FFDFDF;--color-red-200: #FFC5C5;--color-red-300: #FF9D9D;--color-red-400: #FF6464;--color-red-500: #FF4747;--color-red-600: #ED1515;--color-red-700: #C80D0D;--color-red-800: #A50F0F;--color-red-900: #881414;--color-red-950: #4B0404;--color-green-50: #F1FCF3;--color-green-100: #DFF9E3;--color-green-200: #C1F1C8;--color-green-300: #91E49E;--color-green-400: #45C85A;--color-green-500: #33B449;--color-green-600: #259437;--color-green-700: #20752F;--color-green-800: #1E5D29;--color-green-900: #1B4C24;--color-green-950: #092A10}:root,[data-theme=light]{--btn-primary-color: var(--primary-color-900);--btn-primary-color-hover: var(--primary-color-800);--btn-primary-color-activated: var(--primary-color-700);--btn-primary-color-text: var(--color-light-100);--secondary-color-text: var(--color-blue-situaction-900);--btn-ghost-color-hover: var(--color-dark-05);--btn-ghost-color-activated: var(--color-dark-10);--btn-ghost-color-text: var(--color-grey-950)}[data-theme=dark]{--btn-primary-color: var(--primary-color-200);--btn-primary-color-hover: var(--primary-color-100);--btn-primary-color-activated: var(--primary-color-50);--btn-primary-color-text: var(--primary-color-900);--secondary-color-text: var(--color-light-100);--btn-ghost-color-hover: var(--color-light-05);--btn-ghost-color-activated: var(--color-light-10);--btn-ghost-color-text: var(--color-light-100)}
|
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.14",
|
|
4
4
|
"description": "library react component Situaction",
|
|
5
5
|
"main": "dist/main.js",
|
|
6
6
|
"types": "dist/main.d.ts",
|
|
@@ -71,11 +71,13 @@
|
|
|
71
71
|
"ts-jest": "^29.1.5",
|
|
72
72
|
"ts-node": "^10.9.2",
|
|
73
73
|
"typescript": "^5.2.2",
|
|
74
|
-
"vite": "^5.
|
|
74
|
+
"vite": "^5.4.8",
|
|
75
75
|
"vite-plugin-dts": "^3.9.1",
|
|
76
76
|
"vite-plugin-lib-inject-css": "^2.1.1"
|
|
77
77
|
},
|
|
78
78
|
"dependencies": {
|
|
79
|
+
"react": "^18.3.1",
|
|
80
|
+
"react-dom": "^18.3.1",
|
|
79
81
|
"storybook-figma": "^0.1.2",
|
|
80
82
|
"storybook-react-context": "^0.6.0"
|
|
81
83
|
}
|