@situaction/traq-ui-ste 1.0.20 → 1.0.21
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.js +31 -31
- package/dist/components/checkbox/Checkbox.d.ts +1 -2
- package/dist/components/checkbox/Checkbox.js +6 -6
- package/dist/components/input/Input.d.ts +1 -1
- package/dist/components/input/Input.js +49 -47
- package/dist/components/tag-counter/TagCounter.d.ts +8 -0
- package/dist/components/tag-counter/TagCounter.js +20 -0
- package/dist/main.d.ts +3 -0
- package/dist/main.js +11 -5
- package/dist/styles/Button.css +1 -1
- package/dist/styles/Input.css +1 -1
- package/dist/styles/TagCounter.css +1 -0
- package/package.json +1 -1
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useEffect as
|
|
3
|
-
import { useTheme as
|
|
4
|
-
import '../../styles/Button.css';const
|
|
5
|
-
button:
|
|
6
|
-
"button-primary": "_button-
|
|
7
|
-
"button-secondary": "_button-
|
|
8
|
-
"button-tertiary": "_button-
|
|
9
|
-
"button-ghost": "_button-
|
|
10
|
-
"button-text": "_button-
|
|
11
|
-
"button-text-selected": "_button-text-
|
|
12
|
-
"button-error": "_button-
|
|
13
|
-
"button-size-xl": "_button-size-
|
|
14
|
-
"button-size-l": "_button-size-
|
|
15
|
-
"button-size-m": "_button-size-
|
|
16
|
-
"button-size-s": "_button-size-
|
|
17
|
-
"button-gap-xl": "_button-gap-
|
|
18
|
-
"button-gap-l": "_button-gap-
|
|
19
|
-
"button-gap-m": "_button-gap-
|
|
20
|
-
"button-gap-s": "_button-gap-
|
|
21
|
-
flexHorizontalCenter:
|
|
1
|
+
import { jsxs as y, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect as x } from "react";
|
|
3
|
+
import { useTheme as g } from "../theme/ThemeContext.js";
|
|
4
|
+
import '../../styles/Button.css';const v = "_button_1031d_21", z = "_flexHorizontalCenter_1031d_167", o = {
|
|
5
|
+
button: v,
|
|
6
|
+
"button-primary": "_button-primary_1031d_43",
|
|
7
|
+
"button-secondary": "_button-secondary_1031d_57",
|
|
8
|
+
"button-tertiary": "_button-tertiary_1031d_71",
|
|
9
|
+
"button-ghost": "_button-ghost_1031d_85",
|
|
10
|
+
"button-text": "_button-text_1031d_101",
|
|
11
|
+
"button-text-selected": "_button-text-selected_1031d_114",
|
|
12
|
+
"button-error": "_button-error_1031d_120",
|
|
13
|
+
"button-size-xl": "_button-size-xl_1031d_133",
|
|
14
|
+
"button-size-l": "_button-size-l_1031d_139",
|
|
15
|
+
"button-size-m": "_button-size-m_1031d_145",
|
|
16
|
+
"button-size-s": "_button-size-s_1031d_151",
|
|
17
|
+
"button-gap-xl": "_button-gap-xl_1031d_157",
|
|
18
|
+
"button-gap-l": "_button-gap-l_1031d_160",
|
|
19
|
+
"button-gap-m": "_button-gap-m_1031d_163",
|
|
20
|
+
"button-gap-s": "_button-gap-s_1031d_163",
|
|
21
|
+
flexHorizontalCenter: z
|
|
22
22
|
}, C = ({
|
|
23
23
|
mode: n = "primary",
|
|
24
24
|
size: s = "m",
|
|
@@ -29,32 +29,32 @@ import '../../styles/Button.css';const d = "_button_tf4v4_21", g = "_flexHorizon
|
|
|
29
29
|
selected: b,
|
|
30
30
|
childrenLeft: i,
|
|
31
31
|
childrenRight: _,
|
|
32
|
-
...
|
|
32
|
+
...d
|
|
33
33
|
}) => {
|
|
34
|
-
const { mode: e } =
|
|
35
|
-
|
|
34
|
+
const { mode: e } = g(), c = () => l ? "error" : n;
|
|
35
|
+
x(() => {
|
|
36
36
|
r && !t && console.warn("`colorMode` is defined but `color` is missing. `colorMode` will be ignored.");
|
|
37
37
|
}, [t]);
|
|
38
|
-
const
|
|
38
|
+
const m = [
|
|
39
39
|
o.button,
|
|
40
|
-
o[`button-${
|
|
40
|
+
o[`button-${c()}`],
|
|
41
41
|
o[`button-size-${s}`],
|
|
42
42
|
o[`button-gap-${s}`],
|
|
43
43
|
b && n === "text" && o["button-text-selected"],
|
|
44
44
|
o.flexHorizontalCenter
|
|
45
|
-
].join(" "),
|
|
45
|
+
].join(" "), p = {
|
|
46
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
47
|
"--dynamic-color": t ? `var(--color-${t}-${r === "dark" ? "200" : "900"})` : "var(--primary-color)",
|
|
48
48
|
"--dynamic-color-hover": t ? `var(--color-${t}-${r === "dark" ? "100" : "800"})` : e === "light" ? "var(--primary-color-800)" : "var(--primary-color-100)",
|
|
49
49
|
"--dynamic-color-activated": t ? `var(--color-${t}-${r === "dark" ? "50" : "700"})` : e === "light" ? "var(--primary-color-700)" : "var(--primary-color-50)"
|
|
50
50
|
};
|
|
51
|
-
return /* @__PURE__ */
|
|
51
|
+
return /* @__PURE__ */ y(
|
|
52
52
|
"button",
|
|
53
53
|
{
|
|
54
54
|
type: "button",
|
|
55
|
-
className:
|
|
56
|
-
style: n === "primary" ?
|
|
57
|
-
...
|
|
55
|
+
className: m,
|
|
56
|
+
style: n === "primary" ? p : void 0,
|
|
57
|
+
...d,
|
|
58
58
|
children: [
|
|
59
59
|
i && /* @__PURE__ */ a("span", { className: o.flexHorizontalCenter, children: i }),
|
|
60
60
|
/* @__PURE__ */ a("span", { children: u }),
|
|
@@ -22,10 +22,10 @@ import '../../styles/Checkbox.css';const n = "_checkbox_1cb1z_21", r = "_checked
|
|
|
22
22
|
disabled: i = !1,
|
|
23
23
|
onChange: o
|
|
24
24
|
}) => {
|
|
25
|
-
const { mode: k } = m(), [c,
|
|
25
|
+
const { mode: k } = m(), [c, _] = x(h), a = () => {
|
|
26
26
|
const d = !c;
|
|
27
|
-
|
|
28
|
-
},
|
|
27
|
+
_(d), o && o(d);
|
|
28
|
+
}, l = [
|
|
29
29
|
e.checkbox,
|
|
30
30
|
e[`checkbox-size-${b}`],
|
|
31
31
|
c && e.checked,
|
|
@@ -36,12 +36,12 @@ import '../../styles/Checkbox.css';const n = "_checkbox_1cb1z_21", r = "_checked
|
|
|
36
36
|
"div",
|
|
37
37
|
{
|
|
38
38
|
"data-testid": "checkbox",
|
|
39
|
-
className:
|
|
40
|
-
onClick:
|
|
39
|
+
className: l,
|
|
40
|
+
onClick: a,
|
|
41
41
|
children: c && t
|
|
42
42
|
}
|
|
43
43
|
);
|
|
44
44
|
};
|
|
45
45
|
export {
|
|
46
|
-
g as
|
|
46
|
+
g as Checkbox
|
|
47
47
|
};
|
|
@@ -5,7 +5,7 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
5
5
|
/** How large should the input be? **/
|
|
6
6
|
sizeStyle?: Size;
|
|
7
7
|
/** input status style **/
|
|
8
|
-
status?: 'default' | 'error' | 'success' | 'secondary';
|
|
8
|
+
status?: 'default' | 'error' | 'success' | 'secondary' | 'ghost';
|
|
9
9
|
/** The label or placeholder text for the input field **/
|
|
10
10
|
label: string;
|
|
11
11
|
/** Optional unit or additional label to display next to the input **/
|
|
@@ -1,84 +1,86 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as a, jsx as s, Fragment as c } from "react/jsx-runtime";
|
|
2
2
|
import { useState as y, useRef as j } from "react";
|
|
3
3
|
import { useTheme as N } from "../theme/ThemeContext.js";
|
|
4
|
-
import '../../styles/Input.css';const k = "
|
|
5
|
-
"input-style": "_input-
|
|
6
|
-
"input-style-disabled": "_input-style-
|
|
7
|
-
"input-style-focused": "_input-style-
|
|
8
|
-
"input-style-secondary": "_input-style-
|
|
9
|
-
"input-style-
|
|
10
|
-
"input-style-
|
|
11
|
-
"input-
|
|
12
|
-
"input-
|
|
13
|
-
"input-style-size-
|
|
14
|
-
"input-style-size-
|
|
15
|
-
"input-style-size-
|
|
16
|
-
"input-style-
|
|
4
|
+
import '../../styles/Input.css';const k = "_flexHorizontalBetween_115tz_153", I = "_flexHorizontal_115tz_153", t = {
|
|
5
|
+
"input-style": "_input-style_115tz_37",
|
|
6
|
+
"input-style-disabled": "_input-style-disabled_115tz_49",
|
|
7
|
+
"input-style-focused": "_input-style-focused_115tz_60",
|
|
8
|
+
"input-style-secondary": "_input-style-secondary_115tz_68",
|
|
9
|
+
"input-style-ghost": "_input-style-ghost_115tz_82",
|
|
10
|
+
"input-style-error": "_input-style-error_115tz_85",
|
|
11
|
+
"input-style-success": "_input-style-success_115tz_95",
|
|
12
|
+
"input-container": "_input-container_115tz_105",
|
|
13
|
+
"input-style-size-xl": "_input-style-size-xl_115tz_109",
|
|
14
|
+
"input-style-size-l": "_input-style-size-l_115tz_119",
|
|
15
|
+
"input-style-size-m": "_input-style-size-m_115tz_129",
|
|
16
|
+
"input-style-size-s": "_input-style-size-s_115tz_139",
|
|
17
|
+
"input-style-radius": "_input-style-radius_115tz_149",
|
|
17
18
|
flexHorizontalBetween: k,
|
|
18
19
|
flexHorizontal: I
|
|
19
20
|
}, M = ({
|
|
20
|
-
sizeStyle:
|
|
21
|
-
label:
|
|
22
|
-
labelUnit:
|
|
23
|
-
status:
|
|
21
|
+
sizeStyle: p = "m",
|
|
22
|
+
label: d,
|
|
23
|
+
labelUnit: n,
|
|
24
|
+
status: l = "default",
|
|
24
25
|
childrenLeft: o,
|
|
25
26
|
childrenRight: i,
|
|
26
27
|
round: _,
|
|
27
28
|
disabled: r,
|
|
28
|
-
defaultValue:
|
|
29
|
-
...
|
|
29
|
+
defaultValue: z,
|
|
30
|
+
...h
|
|
30
31
|
}) => {
|
|
31
|
-
const { mode:
|
|
32
|
-
|
|
32
|
+
const { mode: e } = N(), [f, u] = y(!1), [m, g] = y(z || ""), v = j(null), x = () => u(!0), B = () => u(!1), H = (F) => {
|
|
33
|
+
g(F.target.value);
|
|
33
34
|
}, b = [
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
_ &&
|
|
37
|
-
|
|
35
|
+
t["input-style"],
|
|
36
|
+
t[`input-style-size-${p}`],
|
|
37
|
+
_ && t["input-style-radius"],
|
|
38
|
+
t.flexHorizontalBetween
|
|
38
39
|
].filter(Boolean).join(" "), S = [
|
|
39
|
-
f &&
|
|
40
|
-
r &&
|
|
41
|
-
|
|
40
|
+
f && t["input-style-focused"],
|
|
41
|
+
r && t["input-style-disabled"],
|
|
42
|
+
l === "secondary" && t["input-style-secondary"],
|
|
43
|
+
l === "ghost" && t["input-style-ghost"]
|
|
42
44
|
].filter(Boolean).join(" "), w = () => {
|
|
43
|
-
switch (
|
|
45
|
+
switch (l) {
|
|
44
46
|
case "error":
|
|
45
|
-
return
|
|
47
|
+
return t["input-style-error"];
|
|
46
48
|
case "success":
|
|
47
|
-
return
|
|
49
|
+
return t["input-style-success"];
|
|
48
50
|
default:
|
|
49
51
|
return S;
|
|
50
52
|
}
|
|
51
53
|
}, C = {
|
|
52
|
-
"--dynamic-color":
|
|
53
|
-
"--dynamic-color-activated":
|
|
54
|
-
"--dynamic-color-disabled":
|
|
55
|
-
"--dynamic-color-border-disabled":
|
|
56
|
-
"--dynamic-color-secondary":
|
|
54
|
+
"--dynamic-color": e === "light" ? "var(--color-blue-grey-400)" : "var(--color-blue-grey-200)",
|
|
55
|
+
"--dynamic-color-activated": e === "light" ? "var(--color-dark-100)" : "var(--color-light-100)",
|
|
56
|
+
"--dynamic-color-disabled": e === "light" ? "var(--color-dark-40)" : "var(--color-light-40)",
|
|
57
|
+
"--dynamic-color-border-disabled": e === "light" ? "var(--color-dark-10)" : "var(--color-light-10)",
|
|
58
|
+
"--dynamic-color-secondary": e === "light" ? "var(--color-blue-situaction-900)" : "var(--color-light-100)"
|
|
57
59
|
};
|
|
58
|
-
return /* @__PURE__ */
|
|
60
|
+
return /* @__PURE__ */ a(
|
|
59
61
|
"div",
|
|
60
62
|
{
|
|
61
|
-
ref:
|
|
63
|
+
ref: v,
|
|
62
64
|
className: `input-style ${b} ${w()}`,
|
|
63
|
-
onFocus:
|
|
65
|
+
onFocus: x,
|
|
64
66
|
onBlur: B,
|
|
65
67
|
style: C,
|
|
66
68
|
children: [
|
|
67
|
-
o && /* @__PURE__ */
|
|
68
|
-
/* @__PURE__ */
|
|
69
|
+
o && /* @__PURE__ */ s(c, { children: o }),
|
|
70
|
+
/* @__PURE__ */ s("div", { className: t["input-container"], children: /* @__PURE__ */ s(
|
|
69
71
|
"input",
|
|
70
72
|
{
|
|
71
73
|
autoCorrect: "false",
|
|
72
|
-
placeholder:
|
|
74
|
+
placeholder: d,
|
|
73
75
|
disabled: r,
|
|
74
76
|
value: m,
|
|
75
77
|
onChange: H,
|
|
76
|
-
...
|
|
78
|
+
...h
|
|
77
79
|
}
|
|
78
80
|
) }),
|
|
79
|
-
/* @__PURE__ */
|
|
80
|
-
|
|
81
|
-
i && /* @__PURE__ */
|
|
81
|
+
/* @__PURE__ */ a(c, { children: [
|
|
82
|
+
n && /* @__PURE__ */ s("div", { children: n }),
|
|
83
|
+
i && /* @__PURE__ */ s("span", { className: t.flexHorizontal, children: i })
|
|
82
84
|
] })
|
|
83
85
|
]
|
|
84
86
|
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { useTheme as n } from "../theme/ThemeContext.js";
|
|
3
|
+
import '../../styles/TagCounter.css';const t = {
|
|
4
|
+
"tag-counter": "_tag-counter_12ztz_21",
|
|
5
|
+
"dark-mode": "_dark-mode_12ztz_32",
|
|
6
|
+
"tag-counter-size-xl": "_tag-counter-size-xl_12ztz_36",
|
|
7
|
+
"tag-counter-size-l": "_tag-counter-size-l_12ztz_43",
|
|
8
|
+
"tag-counter-size-m": "_tag-counter-size-m_12ztz_50",
|
|
9
|
+
"tag-counter-size-s": "_tag-counter-size-s_12ztz_57"
|
|
10
|
+
}, _ = ({ label: e, size: o = "m" }) => {
|
|
11
|
+
const { mode: r } = n(), s = [
|
|
12
|
+
t["tag-counter"],
|
|
13
|
+
t[`tag-counter-size-${o}`],
|
|
14
|
+
r === "dark" && t["dark-mode"]
|
|
15
|
+
].join(" ");
|
|
16
|
+
return /* @__PURE__ */ a("div", { className: s, children: e });
|
|
17
|
+
};
|
|
18
|
+
export {
|
|
19
|
+
_ as TagCounter
|
|
20
|
+
};
|
package/dist/main.d.ts
CHANGED
|
@@ -5,4 +5,7 @@ export { Tabs } from './components/tabs/Tabs';
|
|
|
5
5
|
export { IconButton } from './components/icon-button/IconButton';
|
|
6
6
|
export { Tag } from './components/tag/Tag';
|
|
7
7
|
export { Title } from './components/title/Title';
|
|
8
|
+
export { TagCounter } from './components/tag-counter/TagCounter.tsx';
|
|
9
|
+
export { Checkbox } from './components/checkbox/Checkbox.tsx';
|
|
10
|
+
export { Tooltip } from './components/tooltip/Tooltip.tsx';
|
|
8
11
|
export { ThemeProvider, useTheme } from './components/theme/ThemeContext';
|
package/dist/main.js
CHANGED
|
@@ -1,17 +1,23 @@
|
|
|
1
1
|
import { Button as e } from "./components/button/Button.js";
|
|
2
2
|
import { Input as m } from "./components/input/Input.js";
|
|
3
|
-
import { Tabs as
|
|
3
|
+
import { Tabs as x } from "./components/tabs/Tabs.js";
|
|
4
4
|
import { IconButton as T } from "./components/icon-button/IconButton.js";
|
|
5
5
|
import { Tag as u } from "./components/tag/Tag.js";
|
|
6
6
|
import { Title as h } from "./components/title/Title.js";
|
|
7
|
-
import {
|
|
7
|
+
import { TagCounter as b } from "./components/tag-counter/TagCounter.js";
|
|
8
|
+
import { Checkbox as g } from "./components/checkbox/Checkbox.js";
|
|
9
|
+
import { Tooltip as s } from "./components/tooltip/Tooltip.js";
|
|
10
|
+
import { ThemeProvider as C, useTheme as I } from "./components/theme/ThemeContext.js";
|
|
8
11
|
import './styles/main.css';export {
|
|
9
12
|
e as Button,
|
|
13
|
+
g as Checkbox,
|
|
10
14
|
T as IconButton,
|
|
11
15
|
m as Input,
|
|
12
|
-
|
|
16
|
+
x as Tabs,
|
|
13
17
|
u as Tag,
|
|
14
|
-
|
|
18
|
+
b as TagCounter,
|
|
19
|
+
C as ThemeProvider,
|
|
15
20
|
h as Title,
|
|
16
|
-
|
|
21
|
+
s as Tooltip,
|
|
22
|
+
I as useTheme
|
|
17
23
|
};
|
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_1031d_21{font-family:var(--font-family);font-weight:500;border:0;cursor:pointer;width:fit-content}._button_1031d_21:focus-visible{outline:2px solid var(--dynamic-color);outline-offset:2px}._button_1031d_21:disabled{background-color:#0f0f0f0d;color:#0f0f0f66;border:1px solid rgba(15,15,15,.1);cursor:initial;pointer-events:none}._button_1031d_21:disabled *{fill:#0f0f0f66}._button-primary_1031d_43{color:var(--dynamic-color-text);background-color:var(--dynamic-color)}._button-primary_1031d_43:hover{background-color:var(--dynamic-color-hover)}._button-primary_1031d_43:active{background-color:var(--dynamic-color-activated);outline:none}._button-primary_1031d_43 *{fill:var(--dynamic-color-text)}._button-secondary_1031d_57{color:var(--color-text);background-color:#96b4ee33;border:1px solid rgba(150,180,238,.5)}._button-secondary_1031d_57:hover{background-color:#96b4ee66}._button-secondary_1031d_57:active{background-color:#96b4ee99}._button-secondary_1031d_57 *{fill:var(--color-text)}._button-tertiary_1031d_71{color:var(--color-text);background-color:transparent;border:1px solid rgba(150,180,238,.5)}._button-tertiary_1031d_71:hover{background-color:#96b4ee1a}._button-tertiary_1031d_71:active{background-color:#96b4ee33}._button-tertiary_1031d_71 *{fill:var(--color-text)}._button-ghost_1031d_85{color:var(--color-text);background-color:transparent}._button-ghost_1031d_85:hover{background-color:#96b4ee1a}._button-ghost_1031d_85:active{background-color:#96b4ee33}._button-ghost_1031d_85:disabled{border:none}._button-ghost_1031d_85 *{fill:var(--color-text)}._button-text_1031d_101{color:#96b4eecc;background-color:transparent;padding:0!important}._button-text_1031d_101:hover{color:#96b4ee}._button-text_1031d_101:disabled{border:none;background-color:transparent;color:#a5b4bb}._button-text-selected_1031d_114,._button-text-selected_1031d_114:hover{color:var(--color-text)}._button-error_1031d_120{color:#fff;background-color:#ff4747}._button-error_1031d_120:hover{background-color:#ed1515}._button-error_1031d_120:active{background-color:#c80d0d}._button-error_1031d_120 *{fill:var(--color-text)}._button-size-xl_1031d_133{padding:1rem 2rem;font-size:1.125em;line-height:28px;border-radius:8px}._button-size-l_1031d_139{padding:.75rem 1.5rem;font-size:1em;line-height:24px;border-radius:8px}._button-size-m_1031d_145{padding:.5rem 1rem;font-size:.875em;line-height:22px;border-radius:4px}._button-size-s_1031d_151{padding:.375rem .75rem;font-size:.75em;line-height:16px;border-radius:4px}._button-gap-xl_1031d_157{gap:12px}._button-gap-l_1031d_160{gap:8px}._button-gap-m_1031d_163,._button-gap-s_1031d_163{gap:4px}._flexHorizontalCenter_1031d_167{display:flex;justify-content:center;align-items:center;flex-direction:row}
|
package/dist/styles/Input.css
CHANGED
|
@@ -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::placeholder{font-family:Urbanist,sans-serif;color:var(--dynamic-color)}._input-
|
|
1
|
+
input{font-family:Urbanist,sans-serif;border:none;background-color:transparent}input:focus{outline:none;box-shadow:none;border-color:transparent}input::placeholder{font-family:Urbanist,sans-serif;color:var(--dynamic-color)}._input-style_115tz_37{font-family:Urbanist,sans-serif;border:1px solid rgba(150,180,238,.5);color:var(--dynamic-color)}._input-style_115tz_37 input{color:var(--dynamic-color-activated)}._input-style_115tz_37 *{fill:var(--dynamic-color)}._input-style-disabled_115tz_49{background-color:#0f0f0f0d;border-color:var(--dynamic-color-border-disabled);pointer-events:none}._input-style-disabled_115tz_49 input{color:var(--dynamic-color-disabled)}._input-style-disabled_115tz_49 *{fill:var(--dynamic-color-disabled)}._input-style-focused_115tz_60{color:var(--dynamic-color);border-color:var(--dynamic-color-border);background-color:var(--dynamic-background-color)}._input-style-focused_115tz_60 *{fill:var(--dynamic-color-activated)}._input-style-secondary_115tz_68{background-color:#96b4ee33;color:var(--dynamic-color-secondary);border:1px solid rgba(150,180,238,.5)}._input-style-secondary_115tz_68 input{color:var(--dynamic-color-secondary)}._input-style-secondary_115tz_68 input::placeholder{color:var(--dynamic-color-secondary)}._input-style-secondary_115tz_68 *{fill:var(--dynamic-color-secondary)}._input-style-ghost_115tz_82{border:none}._input-style-error_115tz_85{border-color:#ff4747;color:#ff4747}._input-style-error_115tz_85 input::placeholder{color:#ff4747}._input-style-error_115tz_85 *{fill:#ff4747}._input-style-success_115tz_95{border-color:#33b449;color:#33b449}._input-style-success_115tz_95 input::placeholder{color:#33b449}._input-style-success_115tz_95 *{fill:#33b449}._input-style_115tz_37 ._input-container_115tz_105{position:relative;width:100%}._input-style-size-xl_115tz_109{padding:1rem;font-size:1.125em;line-height:28px;border-radius:8px;gap:.625rem}._input-style-size-xl_115tz_109 input{line-height:28px}._input-style-size-l_115tz_119{padding:.75rem;font-size:1em;line-height:24px;border-radius:8px;gap:.5rem}._input-style-size-l_115tz_119 input{line-height:24px}._input-style-size-m_115tz_129{padding:.5rem;font-size:.875em;line-height:20px;border-radius:4px;gap:.375rem}._input-style-size-m_115tz_129 input{line-height:20px}._input-style-size-s_115tz_139{padding:.375rem;font-size:.75em;line-height:16px;border-radius:4px;gap:.25rem}._input-style-size-s_115tz_139 input{line-height:16px}._input-style-radius_115tz_149{border-radius:50px}._flexHorizontalBetween_115tz_153{display:flex;justify-content:space-between;align-items:center;flex-direction:row}._flexHorizontal_115tz_153{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._tag-counter_12ztz_21{color:#1d3557;background-color:#96b4ee66;width:fit-content;display:flex;justify-content:center;align-items:center;padding:4px;box-sizing:border-box}._tag-counter_12ztz_21._dark-mode_12ztz_32{color:#fff;background-color:#fff3}._tag-counter-size-xl_12ztz_36{border-radius:.25rem;font-size:1.125em;line-height:1.75rem;min-width:1.75rem;height:1.75rem}._tag-counter-size-l_12ztz_43{border-radius:.25rem;font-size:1em;line-height:1.5rem;min-width:1.5rem;height:1.5rem}._tag-counter-size-m_12ztz_50{border-radius:.125rem;font-size:.875em;line-height:1.25rem;min-width:1.25rem;height:1.25rem}._tag-counter-size-s_12ztz_57{border-radius:.125rem;font-size:.75em;line-height:1rem;min-width:1rem;height:1rem}
|