@situaction/traq-ui-ste 1.0.26 → 1.0.28

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.
Files changed (7) hide show
  1. package/dist/components/button/Button.js +53 -41
  2. package/dist/components/icon-button/IconButton.js +67 -55
  3. package/dist/components/theme/ThemeContext.d.ts +2 -1
  4. package/dist/components/theme/ThemeContext.js +14 -14
  5. package/dist/styles/Button.css +1 -1
  6. package/dist/styles/IconButton.css +1 -1
  7. package/package.json +1 -1
package/dist/components/button/Button.js CHANGED
@@ -1,84 +1,96 @@
1
- import { jsxs as f, jsx as o } from "react/jsx-runtime";
2
- import { useTheme as x } from "../theme/ThemeContext.js";
3
- import '../../styles/Button.css';const k = "_button_zk0df_23", g = "_flexHorizontalCenter_zk0df_178", r = {
4
- button: k,
5
- "button-primary": "_button-primary_zk0df_45",
6
- "button-secondary": "_button-secondary_zk0df_59",
7
- "button-tertiary": "_button-tertiary_zk0df_73",
8
- "button-ghost": "_button-ghost_zk0df_87",
9
- "button-text": "_button-text_zk0df_103",
10
- "button-text-selected": "_button-text-selected_zk0df_116",
11
- "button-error": "_button-error_zk0df_122",
12
- "button-size-xl": "_button-size-xl_zk0df_135",
13
- "button-size-l": "_button-size-l_zk0df_141",
14
- "button-size-m": "_button-size-m_zk0df_147",
15
- "button-size-s": "_button-size-s_zk0df_153",
16
- "button-size-menu": "_button-size-menu_zk0df_159",
17
- "button-gap-menu": "_button-gap-menu_zk0df_165",
18
- "button-gap-xl": "_button-gap-xl_zk0df_168",
19
- "button-gap-l": "_button-gap-l_zk0df_171",
20
- "button-gap-m": "_button-gap-m_zk0df_165",
21
- "button-gap-s": "_button-gap-s_zk0df_174",
22
- flexHorizontalCenter: g
23
- }, H = ({
1
+ import { jsxs as g, jsx as o } from "react/jsx-runtime";
2
+ import { useTheme as j } from "../theme/ThemeContext.js";
3
+ import '../../styles/Button.css';const h = "_button_1j0bt_23", $ = "_flexHorizontalCenter_1j0bt_178", r = {
4
+ button: h,
5
+ "button-primary": "_button-primary_1j0bt_45",
6
+ "button-secondary": "_button-secondary_1j0bt_59",
7
+ "button-tertiary": "_button-tertiary_1j0bt_73",
8
+ "button-ghost": "_button-ghost_1j0bt_87",
9
+ "button-text": "_button-text_1j0bt_103",
10
+ "button-text-selected": "_button-text-selected_1j0bt_116",
11
+ "button-error": "_button-error_1j0bt_122",
12
+ "button-size-xl": "_button-size-xl_1j0bt_135",
13
+ "button-size-l": "_button-size-l_1j0bt_141",
14
+ "button-size-m": "_button-size-m_1j0bt_147",
15
+ "button-size-s": "_button-size-s_1j0bt_153",
16
+ "button-size-menu": "_button-size-menu_1j0bt_159",
17
+ "button-gap-menu": "_button-gap-menu_1j0bt_165",
18
+ "button-gap-xl": "_button-gap-xl_1j0bt_168",
19
+ "button-gap-l": "_button-gap-l_1j0bt_171",
20
+ "button-gap-m": "_button-gap-m_1j0bt_165",
21
+ "button-gap-s": "_button-gap-s_1j0bt_174",
22
+ flexHorizontalCenter: $
23
+ }, C = ({
24
24
  mode: a = "primary",
25
25
  size: n = "m",
26
26
  color: t,
27
27
  colorMode: e,
28
28
  label: l,
29
- error: m,
29
+ error: b,
30
30
  selected: d,
31
- childrenLeft: i,
32
- childrenRight: c,
33
- ...y
31
+ childrenLeft: c,
32
+ childrenRight: i,
33
+ ...m
34
34
  }) => {
35
- const { mode: _ } = x(), s = () => m ? "error" : a, u = [
35
+ const { mode: y } = j(), s = () => b ? "error" : a, _ = [
36
36
  r.button,
37
37
  r[`button-${s()}`],
38
38
  r[`button-size-${n}`],
39
39
  r[`button-gap-${n}`],
40
40
  d && a === "text" && r["button-text-selected"],
41
41
  r.flexHorizontalCenter
42
- ].filter(Boolean).join(" "), b = {
42
+ ].filter(Boolean).join(" "), u = {
43
43
  "--dynamic-color-primary-text": t ? `var(--color-${t}-900)` : "var(--primary-color-900)",
44
44
  "--dynamic-color-text": "var(--color-light-100)",
45
45
  "--dynamic-color": t ? `var(--color-${t}-200)` : "var(--primary-color)",
46
46
  "--dynamic-color-hover": t ? `var(--color-${t}-200)` : "var(--primary-color-100)",
47
- "--dynamic-color-activated": t ? `var(--color-${t}-50)` : "var(--primary-color-50)"
47
+ "--dynamic-color-activated": t ? `var(--color-${t}-50)` : "var(--primary-color-50)",
48
+ "--dynamic-color-disabled": "var(--color-light-40)",
49
+ "--dynamic-border-disabled": "var(--color-light-10)",
50
+ "--dynamic-back-disabled": "var(--color-light-05)"
48
51
  }, v = {
49
52
  "--dynamic-color-primary-text": "var(--color-light-100)",
50
53
  "--dynamic-color-text": t ? `var(--color-${t}-900)` : "var(--primary-color-900)",
51
54
  "--dynamic-color": t ? `var(--color-${t}-900})` : "var(--primary-color)",
52
55
  "--dynamic-color-hover": t ? `var(--color-${t}-800)` : "var(--primary-color-800)",
53
- "--dynamic-color-activated": t ? `var(--color-${t}-700})` : "var(--primary-color-700)"
56
+ "--dynamic-color-activated": t ? `var(--color-${t}-700})` : "var(--primary-color-700)",
57
+ "--dynamic-color-disabled": "var(--color-dark-40)",
58
+ "--dynamic-border-disabled": "var(--color-dark-10)",
59
+ "--dynamic-back-disabled": "var(--color-dark-05)"
54
60
  }, p = {
55
61
  "--dynamic-color-primary-text": t ? `var(--color-${t}-900)` : "var(--primary-color-950)",
56
62
  "--dynamic-color-text": "var(--color-light-100)",
57
63
  "--dynamic-color": t ? `var(--color-${t}-200)` : "var(--primary-color-200)",
58
64
  "--dynamic-color-hover": t ? `var(--color-${t}-200})` : "var(--primary-color-100)",
59
- "--dynamic-color-activated": t ? `var(--color-${t}-50})` : "var(--primary-color-50)"
60
- }, z = {
65
+ "--dynamic-color-activated": t ? `var(--color-${t}-50})` : "var(--primary-color-50)",
66
+ "--dynamic-color-disabled": "var(--color-light-40)",
67
+ "--dynamic-border-disabled": "var(--color-light-10)",
68
+ "--dynamic-back-disabled": "var(--color-light-05)"
69
+ }, x = {
61
70
  "--dynamic-color-primary-text": "var(--color-light-100)",
62
71
  "--dynamic-color-text": t ? `var(--color-${t}-900)` : "var(--secondary-color)",
63
72
  "--dynamic-color": t ? `var(--color-${t}-900)` : "var(--secondary-color)",
64
73
  "--dynamic-color-hover": t ? `var(--color-${t}-800)` : "var(--primary-color-800)",
65
- "--dynamic-color-activated": t ? `var(--color-${t}-700)` : "var(--primary-color-700)"
74
+ "--dynamic-color-activated": t ? `var(--color-${t}-700)` : "var(--primary-color-700)",
75
+ "--dynamic-color-disabled": "var(--color-dark-40)",
76
+ "--dynamic-border-disabled": "var(--color-dark-10)",
77
+ "--dynamic-back-disabled": "var(--color-dark-05)"
66
78
  };
67
- return /* @__PURE__ */ f(
79
+ return /* @__PURE__ */ g(
68
80
  "button",
69
81
  {
70
82
  type: "button",
71
- className: u,
72
- style: e ? e === "dark" ? p : z : _ === "dark" ? b : v,
73
- ...y,
83
+ className: _,
84
+ style: e ? e === "dark" ? p : x : y === "dark" ? u : v,
85
+ ...m,
74
86
  children: [
75
- i && /* @__PURE__ */ o("span", { className: r.flexHorizontalCenter, children: i }),
87
+ c && /* @__PURE__ */ o("span", { className: r.flexHorizontalCenter, children: c }),
76
88
  /* @__PURE__ */ o("span", { children: l }),
77
- c && /* @__PURE__ */ o("span", { className: r.flexHorizontalCenter, children: c })
89
+ i && /* @__PURE__ */ o("span", { className: r.flexHorizontalCenter, children: i })
78
90
  ]
79
91
  }
80
92
  );
81
93
  };
82
94
  export {
83
- H as Button
95
+ C as Button
84
96
  };
package/dist/components/icon-button/IconButton.js CHANGED
@@ -1,76 +1,88 @@
1
- import { jsx as $ } from "react/jsx-runtime";
2
- import { useTheme as x } from "../theme/ThemeContext.js";
3
- import '../../styles/IconButton.css';const z = "_button_67ovb_23", h = "_flexHorizontalCenter_67ovb_168", t = {
4
- button: z,
5
- "button-round": "_button-round_67ovb_50",
6
- "button-primary": "_button-primary_67ovb_53",
7
- "button-secondary": "_button-secondary_67ovb_66",
8
- "button-tertiary": "_button-tertiary_67ovb_80",
9
- "button-ghost": "_button-ghost_67ovb_94",
10
- "button-icon": "_button-icon_67ovb_107",
11
- "button-icon-selected": "_button-icon-selected_67ovb_119",
12
- "button-error": "_button-error_67ovb_128",
13
- "button-size-xl": "_button-size-xl_67ovb_141",
14
- "button-size-l": "_button-size-l_67ovb_146",
15
- "button-size-m": "_button-size-m_67ovb_151",
16
- "button-size-s": "_button-size-s_67ovb_156",
17
- "button-size-menu": "_button-size-menu_67ovb_161",
18
- flexHorizontalCenter: h
19
- }, S = ({
20
- mode: r = "primary",
21
- color: o,
1
+ import { jsx as h } from "react/jsx-runtime";
2
+ import { useTheme as $ } from "../theme/ThemeContext.js";
3
+ import '../../styles/IconButton.css';const x = "_button_151my_23", g = "_flexHorizontalCenter_151my_168", o = {
4
+ button: x,
5
+ "button-round": "_button-round_151my_50",
6
+ "button-primary": "_button-primary_151my_53",
7
+ "button-secondary": "_button-secondary_151my_66",
8
+ "button-tertiary": "_button-tertiary_151my_80",
9
+ "button-ghost": "_button-ghost_151my_94",
10
+ "button-icon": "_button-icon_151my_107",
11
+ "button-icon-selected": "_button-icon-selected_151my_119",
12
+ "button-error": "_button-error_151my_128",
13
+ "button-size-xl": "_button-size-xl_151my_141",
14
+ "button-size-l": "_button-size-l_151my_146",
15
+ "button-size-m": "_button-size-m_151my_151",
16
+ "button-size-s": "_button-size-s_151my_156",
17
+ "button-size-menu": "_button-size-menu_151my_161",
18
+ flexHorizontalCenter: g
19
+ }, C = ({
20
+ mode: t = "primary",
21
+ color: r,
22
22
  colorMode: a,
23
23
  size: n = "m",
24
- error: e,
24
+ error: c,
25
25
  selected: i,
26
- round: c,
26
+ round: e,
27
27
  disabled: l,
28
- children: v,
28
+ children: d,
29
29
  onClick: y
30
30
  }) => {
31
- const { mode: m } = x(), b = () => e ? "error" : r, u = [
32
- t.button,
33
- t[`button-${b()}`],
34
- c && t["button-round"],
35
- t[`button-size-${n}`],
36
- i && r === "icon" && t["button-icon-selected"],
37
- t.flexHorizontalCenter
38
- ].filter(Boolean).join(" "), s = {
39
- "--dynamic-color-primary-text": o ? `var(--color-${o}-900)` : "var(--primary-color-900)",
31
+ const { mode: m } = $(), s = () => c ? "error" : t, b = [
32
+ o.button,
33
+ o[`button-${s()}`],
34
+ e && o["button-round"],
35
+ o[`button-size-${n}`],
36
+ i && t === "icon" && o["button-icon-selected"],
37
+ o.flexHorizontalCenter
38
+ ].filter(Boolean).join(" "), v = {
39
+ "--dynamic-color-primary-text": r ? `var(--color-${r}-900)` : "var(--primary-color-900)",
40
40
  "--dynamic-color-text": "var(--color-light-100)",
41
- "--dynamic-color": o ? `var(--color-${o}-200)` : "var(--primary-color)",
42
- "--dynamic-color-hover": o ? `var(--color-${o}-200)` : "var(--primary-color-100)",
43
- "--dynamic-color-activated": o ? `var(--color-${o}-50)` : "var(--primary-color-50)"
44
- }, _ = {
41
+ "--dynamic-color": r ? `var(--color-${r}-200)` : "var(--primary-color)",
42
+ "--dynamic-color-hover": r ? `var(--color-${r}-200)` : "var(--primary-color-100)",
43
+ "--dynamic-color-activated": r ? `var(--color-${r}-50)` : "var(--primary-color-50)",
44
+ "--dynamic-color-disabled": "var(--color-light-40)",
45
+ "--dynamic-border-disabled": "var(--color-light-10)",
46
+ "--dynamic-back-disabled": "var(--color-light-05)"
47
+ }, u = {
45
48
  "--dynamic-color-primary-text": "var(--color-light-100)",
46
- "--dynamic-color-text": o ? `var(--color-${o}-900)` : "var(--primary-color-900)",
47
- "--dynamic-color": o ? `var(--color-${o}-900)` : "var(--primary-color)",
48
- "--dynamic-color-hover": o ? `var(--color-${o}-800)` : "var(--primary-color-800)",
49
- "--dynamic-color-activated": o ? `var(--color-${o}-700)` : "var(--primary-color-700)"
50
- }, d = {
51
- "--dynamic-color-primary-text": o ? `var(--color-${o}-900)` : "var(--primary-color-950)",
49
+ "--dynamic-color-text": r ? `var(--color-${r}-900)` : "var(--primary-color-900)",
50
+ "--dynamic-color": r ? `var(--color-${r}-900)` : "var(--primary-color)",
51
+ "--dynamic-color-hover": r ? `var(--color-${r}-800)` : "var(--primary-color-800)",
52
+ "--dynamic-color-activated": r ? `var(--color-${r}-700)` : "var(--primary-color-700)",
53
+ "--dynamic-color-disabled": "var(--color-dark-40)",
54
+ "--dynamic-border-disabled": "var(--color-dark-10)",
55
+ "--dynamic-back-disabled": "var(--color-dark-05)"
56
+ }, _ = {
57
+ "--dynamic-color-primary-text": r ? `var(--color-${r}-900)` : "var(--primary-color-950)",
52
58
  "--dynamic-color-text": "var(--color-light-100)",
53
- "--dynamic-color": o ? `var(--color-${o}-200)` : "var(--primary-color-200)",
54
- "--dynamic-color-hover": o ? `var(--color-${o}-200)` : "var(--primary-color-100)",
55
- "--dynamic-color-activated": o ? `var(--color-${o}-50)` : "var(--primary-color-50)"
59
+ "--dynamic-color": r ? `var(--color-${r}-200)` : "var(--primary-color-200)",
60
+ "--dynamic-color-hover": r ? `var(--color-${r}-200)` : "var(--primary-color-100)",
61
+ "--dynamic-color-activated": r ? `var(--color-${r}-50)` : "var(--primary-color-50)",
62
+ "--dynamic-color-disabled": "var(--color-light-40)",
63
+ "--dynamic-border-disabled": "var(--color-light-10)",
64
+ "--dynamic-back-disabled": "var(--color-light-05)"
56
65
  }, p = {
57
66
  "--dynamic-color-primary-text": "var(--color-light-100)",
58
- "--dynamic-color-text": o ? `var(--color-${o}-900)` : "var(--secondary-color)",
59
- "--dynamic-color": o ? `var(--color-${o}-900})` : "var(--secondary-color)",
60
- "--dynamic-color-hover": o ? `var(--color-${o}-800)` : "var(--primary-color-800)",
61
- "--dynamic-color-activated": o ? `var(--color-${o}-700)` : "var(--primary-color-700)"
67
+ "--dynamic-color-text": r ? `var(--color-${r}-900)` : "var(--secondary-color)",
68
+ "--dynamic-color": r ? `var(--color-${r}-900})` : "var(--secondary-color)",
69
+ "--dynamic-color-hover": r ? `var(--color-${r}-800)` : "var(--primary-color-800)",
70
+ "--dynamic-color-activated": r ? `var(--color-${r}-700)` : "var(--primary-color-700)",
71
+ "--dynamic-color-disabled": "var(--color-dark-40)",
72
+ "--dynamic-border-disabled": "var(--color-dark-10)",
73
+ "--dynamic-back-disabled": "var(--color-dark-05)"
62
74
  };
63
- return /* @__PURE__ */ $(
75
+ return /* @__PURE__ */ h(
64
76
  "button",
65
77
  {
66
- className: u,
67
- style: a ? a === "dark" ? d : p : m === "dark" ? s : _,
78
+ className: b,
79
+ style: a ? a === "dark" ? _ : p : m === "dark" ? v : u,
68
80
  onClick: y,
69
81
  disabled: l,
70
- children: v
82
+ children: d
71
83
  }
72
84
  );
73
85
  };
74
86
  export {
75
- S as IconButton
87
+ C as IconButton
76
88
  };
package/dist/components/theme/ThemeContext.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ReactNode, FC } from 'react';
1
+ import { ReactNode, FC, Dispatch, SetStateAction } from 'react';
2
2
 
3
3
  type Mode = 'light' | 'dark';
4
4
  interface Theme {
@@ -15,6 +15,7 @@ interface ThemeContextType {
15
15
  theme: Theme;
16
16
  mode: Mode;
17
17
  toggleMode: () => void;
18
+ setMode: Dispatch<SetStateAction<Mode>>;
18
19
  }
19
20
  interface ThemeProviderProps {
20
21
  children: ReactNode;
package/dist/components/theme/ThemeContext.js CHANGED
@@ -1,22 +1,22 @@
1
- import { jsx as f } from "react/jsx-runtime";
2
- import { createContext as k, useState as h, useContext as w } from "react";
1
+ import { jsx as h } from "react/jsx-runtime";
2
+ import { createContext as S, useState as $, useContext as k } from "react";
3
3
  import { baseTheme as r } from "./createTheme.js";
4
- import '../../styles/ThemeContext.css';const $ = k(void 0), V = ({ children: a, theme: t, mode: x }) => {
5
- var y, c, p, s, d, m, e, n;
6
- const [o] = h(t ?? r), [l, b] = h(x ?? "light"), C = () => {
7
- b((i) => i === "light" ? "dark" : "light");
8
- }, F = (i) => [950, 900, 800, 700, 600, 500, 400, 300, 200, 100, 50].reduce((v, g) => (v[`--primary-color-${g}`] = `var(--color-${i}-${g})`, v), {}), S = {
9
- "--font-family": ((y = o == null ? void 0 : o.typography) == null ? void 0 : y.fontFamily) ?? r.typography.fontFamily,
10
- "--font-family-secondary": ((c = o == null ? void 0 : o.typography) == null ? void 0 : c.fontFamilySecondary) ?? r.typography.fontFamilySecondary,
4
+ import '../../styles/ThemeContext.css';const x = S(void 0), V = ({ children: a, theme: t, mode: b }) => {
5
+ var c, s, p, d, e, m, n, v;
6
+ const [o] = $(t ?? r), [l, y] = $(b ?? "light"), C = () => {
7
+ y((i) => i === "light" ? "dark" : "light");
8
+ }, F = (i) => [950, 900, 800, 700, 600, 500, 400, 300, 200, 100, 50].reduce((g, f) => (g[`--primary-color-${f}`] = `var(--color-${i}-${f})`, g), {}), M = {
9
+ "--font-family": ((c = o == null ? void 0 : o.typography) == null ? void 0 : c.fontFamily) ?? r.typography.fontFamily,
10
+ "--font-family-secondary": ((s = o == null ? void 0 : o.typography) == null ? void 0 : s.fontFamilySecondary) ?? r.typography.fontFamilySecondary,
11
11
  ...F(((p = o == null ? void 0 : o.color) == null ? void 0 : p.primary) ?? r.color.primary),
12
12
  "--primary-dark-color-disabled": t === void 0 ? "var(--color-blue-grey-800)" : "var(--color-dark-10)",
13
- "--primary-color": l === "light" ? `var(--color-${((s = o == null ? void 0 : o.color) == null ? void 0 : s.primary) ?? r.color.primary}-900)` : `var(--color-${((d = o == null ? void 0 : o.color) == null ? void 0 : d.primary) ?? r.color.primary}-200)`,
14
- "--secondary-color": l === "light" ? `var(--color-${((m = o == null ? void 0 : o.color) == null ? void 0 : m.primary) ?? r.color.primary}-200)` : `var(--color-${((e = o == null ? void 0 : o.color) == null ? void 0 : e.primary) ?? r.color.primary}-900)`,
15
- "--color-text": l === "light" ? `var(--color-${((n = o == null ? void 0 : o.color) == null ? void 0 : n.primary) ?? r.color.primary}-900)` : "var(--color-light-100)"
13
+ "--primary-color": l === "light" ? `var(--color-${((d = o == null ? void 0 : o.color) == null ? void 0 : d.primary) ?? r.color.primary}-900)` : `var(--color-${((e = o == null ? void 0 : o.color) == null ? void 0 : e.primary) ?? r.color.primary}-200)`,
14
+ "--secondary-color": l === "light" ? `var(--color-${((m = o == null ? void 0 : o.color) == null ? void 0 : m.primary) ?? r.color.primary}-200)` : `var(--color-${((n = o == null ? void 0 : o.color) == null ? void 0 : n.primary) ?? r.color.primary}-900)`,
15
+ "--color-text": l === "light" ? `var(--color-${((v = o == null ? void 0 : o.color) == null ? void 0 : v.primary) ?? r.color.primary}-900)` : "var(--color-light-100)"
16
16
  };
17
- return /* @__PURE__ */ f($.Provider, { value: { theme: o, mode: l, toggleMode: C }, children: /* @__PURE__ */ f("div", { style: { ...S, height: "100%" }, children: a }) });
17
+ return /* @__PURE__ */ h(x.Provider, { value: { theme: o, mode: l, toggleMode: C, setMode: y }, children: /* @__PURE__ */ h("div", { style: { ...M, height: "100%" }, children: a }) });
18
18
  }, q = () => {
19
- const a = w($);
19
+ const a = k(x);
20
20
  if (a === void 0)
21
21
  throw new Error("useTheme must be used within a ThemeProvider");
22
22
  return a;
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}h1{font-size:1.875em;font-style:normal;font-weight:700;line-height:2.25rem}h2{font-size:1.5em;font-style:normal;font-weight:700;line-height:2rem;margin:0}h3{font-size:1.25em;font-style:normal;font-weight:700;line-height:1.75rem;margin:0}h4{font-size:1.125em;font-style:normal;font-weight:700;line-height:1.75rem;margin:0}h5{font-size:1em;font-style:normal;font-weight:700;line-height:1.5rem;margin:0}h6{font-size:.875em;font-style:normal;font-weight:700;line-height:1.25rem;margin:0}.textExtraLarge{font-size:1.25em;font-style:normal;line-height:2rem}.textLarge{font-size:1.125em;font-style:normal;line-height:1.75rem}.textMedium{font-size:1em;font-style:normal;line-height:1.5rem}.textSmall{font-size:.875em;font-style:normal;line-height:1.25rem}.textSmaller{font-size:.75em;font-style:normal;line-height:1rem}.labelExtraLarge{font-size:1.25em;font-style:normal;line-height:normal;letter-spacing:1.2px}.labelLarge{font-size:1.125em;font-style:normal;line-height:normal;letter-spacing:1.08px}.labelMedium{font-size:1em;font-style:normal;line-height:normal;letter-spacing:.96px}.labelSmall{font-size:.875em;font-style:normal;line-height:normal;letter-spacing:.84px}.labelSmaller{font-size:.75em;font-style:normal;line-height:normal;letter-spacing:.72px}.labelSmallest{font-size:.625em;font-style:normal;line-height:normal;letter-spacing:.6px}.fontWeight-100{font-weight:100}.fontWeight-200{font-weight:200}.fontWeight-300{font-weight:300}.fontWeight-400{font-weight:400}.fontWeight-500{font-weight:500}.fontWeight-600{font-weight:600}.fontWeight-700{font-weight:700}.fontWeight-800{font-weight:800}.fontWeight-900{font-weight:900}._button_zk0df_23{font-family:var(--font-family);font-weight:500;border:0;cursor:pointer;width:fit-content}._button_zk0df_23:focus-visible{outline:2px solid var(--dynamic-color);outline-offset:2px}._button_zk0df_23:disabled{background-color:#0f0f0f0d;color:#0f0f0f66;border:1px solid rgba(15,15,15,.1);cursor:initial;pointer-events:none}._button_zk0df_23:disabled *{fill:#0f0f0f66}._button-primary_zk0df_45{color:var(--dynamic-color-primary-text);background-color:var(--dynamic-color)}._button-primary_zk0df_45:hover{background-color:var(--dynamic-color-hover)}._button-primary_zk0df_45:active{background-color:var(--dynamic-color-activated);outline:none}._button-primary_zk0df_45 *{fill:var(--dynamic-color-primary-text)}._button-secondary_zk0df_59{color:var(--dynamic-color-text);background-color:#96b4ee33;border:1px solid rgba(150,180,238,.5)}._button-secondary_zk0df_59:hover{background-color:#96b4ee66}._button-secondary_zk0df_59:active{background-color:#96b4ee99}._button-secondary_zk0df_59 *{fill:var(--dynamic-color-text)}._button-tertiary_zk0df_73{color:var(--dynamic-color-text);background-color:transparent;border:1px solid rgba(150,180,238,.5)}._button-tertiary_zk0df_73:hover{background-color:#96b4ee1a}._button-tertiary_zk0df_73:active{background-color:#96b4ee33}._button-tertiary_zk0df_73 *{fill:var(--dynamic-color-text)}._button-ghost_zk0df_87{color:var(--dynamic-color-text);background-color:transparent}._button-ghost_zk0df_87:hover{background-color:#96b4ee1a}._button-ghost_zk0df_87:active{background-color:#96b4ee33}._button-ghost_zk0df_87:disabled{border:none}._button-ghost_zk0df_87 *{fill:var(--dynamic-color-text)}._button-text_zk0df_103{color:#a5b4bb;background-color:transparent;padding:0!important}._button-text_zk0df_103:hover{color:#788d98}._button-text_zk0df_103:disabled{border:none;background-color:transparent;color:#a5b4bb}._button-text-selected_zk0df_116,._button-text-selected_zk0df_116:hover{color:var(--color-text)}._button-error_zk0df_122{color:#fff;background-color:#ff4747}._button-error_zk0df_122:hover{background-color:#ed1515}._button-error_zk0df_122:active{background-color:#c80d0d}._button-error_zk0df_122 *{fill:#fff}._button-size-xl_zk0df_135{padding:1rem 2rem;font-size:1.125em;line-height:28px;border-radius:8px}._button-size-l_zk0df_141{padding:.75rem 1.5rem;font-size:1em;line-height:24px;border-radius:8px}._button-size-m_zk0df_147{padding:.5rem 1rem;font-size:.875em;line-height:22px;border-radius:4px}._button-size-s_zk0df_153{padding:.375rem .75rem;font-size:.75em;line-height:16px;border-radius:4px}._button-size-menu_zk0df_159{padding:.5rem;font-size:1em;line-height:24px;border-radius:4px}._button-gap-menu_zk0df_165{gap:.5rem}._button-gap-xl_zk0df_168{gap:12px}._button-gap-l_zk0df_171{gap:8px}._button-gap-m_zk0df_165,._button-gap-s_zk0df_174{gap:4px}._flexHorizontalCenter_zk0df_178{display:flex;justify-content:center;align-items:center;flex-direction:row}
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}h1{font-size:1.875em;font-style:normal;font-weight:700;line-height:2.25rem}h2{font-size:1.5em;font-style:normal;font-weight:700;line-height:2rem;margin:0}h3{font-size:1.25em;font-style:normal;font-weight:700;line-height:1.75rem;margin:0}h4{font-size:1.125em;font-style:normal;font-weight:700;line-height:1.75rem;margin:0}h5{font-size:1em;font-style:normal;font-weight:700;line-height:1.5rem;margin:0}h6{font-size:.875em;font-style:normal;font-weight:700;line-height:1.25rem;margin:0}.textExtraLarge{font-size:1.25em;font-style:normal;line-height:2rem}.textLarge{font-size:1.125em;font-style:normal;line-height:1.75rem}.textMedium{font-size:1em;font-style:normal;line-height:1.5rem}.textSmall{font-size:.875em;font-style:normal;line-height:1.25rem}.textSmaller{font-size:.75em;font-style:normal;line-height:1rem}.labelExtraLarge{font-size:1.25em;font-style:normal;line-height:normal;letter-spacing:1.2px}.labelLarge{font-size:1.125em;font-style:normal;line-height:normal;letter-spacing:1.08px}.labelMedium{font-size:1em;font-style:normal;line-height:normal;letter-spacing:.96px}.labelSmall{font-size:.875em;font-style:normal;line-height:normal;letter-spacing:.84px}.labelSmaller{font-size:.75em;font-style:normal;line-height:normal;letter-spacing:.72px}.labelSmallest{font-size:.625em;font-style:normal;line-height:normal;letter-spacing:.6px}.fontWeight-100{font-weight:100}.fontWeight-200{font-weight:200}.fontWeight-300{font-weight:300}.fontWeight-400{font-weight:400}.fontWeight-500{font-weight:500}.fontWeight-600{font-weight:600}.fontWeight-700{font-weight:700}.fontWeight-800{font-weight:800}.fontWeight-900{font-weight:900}._button_1j0bt_23{font-family:var(--font-family);font-weight:500;border:0;cursor:pointer;width:fit-content}._button_1j0bt_23:focus-visible{outline:2px solid var(--dynamic-color);outline-offset:2px}._button_1j0bt_23:disabled{background-color:var(--dynamic-back-disabled);color:var(--dynamic-color-disabled);border:1px solid var(--dynamic-border-disabled);cursor:initial;pointer-events:none}._button_1j0bt_23:disabled *{fill:var(--dynamic-color-disabled)}._button-primary_1j0bt_45{color:var(--dynamic-color-primary-text);background-color:var(--dynamic-color)}._button-primary_1j0bt_45:hover{background-color:var(--dynamic-color-hover)}._button-primary_1j0bt_45:active{background-color:var(--dynamic-color-activated);outline:none}._button-primary_1j0bt_45 *{fill:var(--dynamic-color-primary-text)}._button-secondary_1j0bt_59{color:var(--dynamic-color-text);background-color:#96b4ee33;border:1px solid rgba(150,180,238,.5)}._button-secondary_1j0bt_59:hover{background-color:#96b4ee66}._button-secondary_1j0bt_59:active{background-color:#96b4ee99}._button-secondary_1j0bt_59 *{fill:var(--dynamic-color-text)}._button-tertiary_1j0bt_73{color:var(--dynamic-color-text);background-color:transparent;border:1px solid rgba(150,180,238,.5)}._button-tertiary_1j0bt_73:hover{background-color:#96b4ee1a}._button-tertiary_1j0bt_73:active{background-color:#96b4ee33}._button-tertiary_1j0bt_73 *{fill:var(--dynamic-color-text)}._button-ghost_1j0bt_87{color:var(--dynamic-color-text);background-color:transparent}._button-ghost_1j0bt_87:hover{background-color:#96b4ee1a}._button-ghost_1j0bt_87:active{background-color:#96b4ee33}._button-ghost_1j0bt_87:disabled{border:none}._button-ghost_1j0bt_87 *{fill:var(--dynamic-color-text)}._button-text_1j0bt_103{color:#a5b4bb;background-color:transparent;padding:0!important}._button-text_1j0bt_103:hover{color:#788d98}._button-text_1j0bt_103:disabled{border:none;background-color:transparent;color:#a5b4bb}._button-text-selected_1j0bt_116,._button-text-selected_1j0bt_116:hover{color:var(--color-text)}._button-error_1j0bt_122{color:#fff;background-color:#ff4747}._button-error_1j0bt_122:hover{background-color:#ed1515}._button-error_1j0bt_122:active{background-color:#c80d0d}._button-error_1j0bt_122 *{fill:#fff}._button-size-xl_1j0bt_135{padding:1rem 2rem;font-size:1.125em;line-height:28px;border-radius:8px}._button-size-l_1j0bt_141{padding:.75rem 1.5rem;font-size:1em;line-height:24px;border-radius:8px}._button-size-m_1j0bt_147{padding:.5rem 1rem;font-size:.875em;line-height:22px;border-radius:4px}._button-size-s_1j0bt_153{padding:.375rem .75rem;font-size:.75em;line-height:16px;border-radius:4px}._button-size-menu_1j0bt_159{padding:.5rem;font-size:1em;line-height:24px;border-radius:4px}._button-gap-menu_1j0bt_165{gap:.5rem}._button-gap-xl_1j0bt_168{gap:12px}._button-gap-l_1j0bt_171{gap:8px}._button-gap-m_1j0bt_165,._button-gap-s_1j0bt_174{gap:4px}._flexHorizontalCenter_1j0bt_178{display:flex;justify-content:center;align-items:center;flex-direction:row}
package/dist/styles/IconButton.css CHANGED
@@ -1 +1 @@
1
- ._button_67ovb_23{font-family:var(--font-family);font-weight:500;border:0;cursor:pointer;line-height:1;display:inline-flex;justify-content:center;align-items:center;min-width:12px;min-height:12px;aspect-ratio:1/1}._button_67ovb_23:focus-visible{outline:none}._button_67ovb_23:disabled{background-color:#0f0f0f0d;color:#0f0f0f66;border:1px solid rgba(15,15,15,.1);cursor:initial;pointer-events:none}._button_67ovb_23:disabled *{fill:#0f0f0f66}._button-round_67ovb_50._button_67ovb_23{border-radius:50%}._button-primary_67ovb_53{color:var(--dynamic-color-primary-text);background-color:var(--dynamic-color)}._button-primary_67ovb_53:hover{background-color:var(--dynamic-color-hover)}._button-primary_67ovb_53:active{background-color:var(--dynamic-color-activated)}._button-primary_67ovb_53 *{fill:var(--dynamic-color-primary-text)}._button-secondary_67ovb_66{color:var(--dynamic-color-text);background-color:#96b4ee33;border:1px solid rgba(150,180,238,.5)}._button-secondary_67ovb_66:hover{background-color:#96b4ee66}._button-secondary_67ovb_66:active{background-color:#96b4ee99}._button-secondary_67ovb_66 *{fill:var(--dynamic-color-text)}._button-tertiary_67ovb_80{color:var(--dynamic-color-text);background-color:transparent;border:1px solid rgba(150,180,238,.5)}._button-tertiary_67ovb_80:hover{background-color:#96b4ee1a}._button-tertiary_67ovb_80:active{background-color:#96b4ee33}._button-tertiary_67ovb_80 *{fill:var(--dynamic-color-text)}._button-ghost_67ovb_94{color:var(--dynamic-color-text);background-color:transparent}._button-ghost_67ovb_94:hover{background-color:#96b4ee1a}._button-ghost_67ovb_94:active{background-color:#96b4ee33}._button-ghost_67ovb_94 *{fill:var(--dynamic-color-text)}._button-icon_67ovb_107{fill:#a5b4bb;background-color:transparent}._button-icon_67ovb_107:hover{fill:#788d98}._button-icon_67ovb_107:disabled{border:none;background-color:transparent;fill:#a5b4bb}._button-icon-selected_67ovb_119,._button-icon-selected_67ovb_119:hover{fill:var(--dynamic-color-text)}._button-icon_67ovb_107 svg{fill:inherit}._button-error_67ovb_128{color:#fff;background-color:#ff4747}._button-error_67ovb_128:hover{background-color:#ed1515}._button-error_67ovb_128:active{background-color:#c80d0d}._button-error_67ovb_128 *{fill:#fff}._button-size-xl_67ovb_141{border-radius:.5rem;padding:1rem;font-size:1.125em}._button-size-l_67ovb_146{border-radius:.5rem;padding:.75rem;font-size:1em}._button-size-m_67ovb_151{border-radius:.25rem;padding:.5rem;font-size:.875em}._button-size-s_67ovb_156{border-radius:.25rem;padding:.375rem;font-size:.75em}._button-size-menu_67ovb_161{padding:.5rem;font-size:1em;line-height:24px;border-radius:4px}._flexHorizontalCenter_67ovb_168{display:flex;justify-content:center;align-items:center;flex-direction:row}
1
+ ._button_151my_23{font-family:var(--font-family);font-weight:500;border:0;cursor:pointer;line-height:1;display:inline-flex;justify-content:center;align-items:center;min-width:12px;min-height:12px;aspect-ratio:1/1}._button_151my_23:focus-visible{outline:none}._button_151my_23:disabled{background-color:var(--dynamic-back-disabled);color:var(--dynamic-color-disabled);border:1px solid var(--dynamic-border-disabled);cursor:initial;pointer-events:none}._button_151my_23:disabled *{fill:var(--dynamic-color-disabled)}._button-round_151my_50._button_151my_23{border-radius:50%}._button-primary_151my_53{color:var(--dynamic-color-primary-text);background-color:var(--dynamic-color)}._button-primary_151my_53:hover{background-color:var(--dynamic-color-hover)}._button-primary_151my_53:active{background-color:var(--dynamic-color-activated)}._button-primary_151my_53 *{fill:var(--dynamic-color-primary-text)}._button-secondary_151my_66{color:var(--dynamic-color-text);background-color:#96b4ee33;border:1px solid rgba(150,180,238,.5)}._button-secondary_151my_66:hover{background-color:#96b4ee66}._button-secondary_151my_66:active{background-color:#96b4ee99}._button-secondary_151my_66 *{fill:var(--dynamic-color-text)}._button-tertiary_151my_80{color:var(--dynamic-color-text);background-color:transparent;border:1px solid rgba(150,180,238,.5)}._button-tertiary_151my_80:hover{background-color:#96b4ee1a}._button-tertiary_151my_80:active{background-color:#96b4ee33}._button-tertiary_151my_80 *{fill:var(--dynamic-color-text)}._button-ghost_151my_94{color:var(--dynamic-color-text);background-color:transparent}._button-ghost_151my_94:hover{background-color:#96b4ee1a}._button-ghost_151my_94:active{background-color:#96b4ee33}._button-ghost_151my_94 *{fill:var(--dynamic-color-text)}._button-icon_151my_107{fill:#a5b4bb;background-color:transparent}._button-icon_151my_107:hover{fill:#788d98}._button-icon_151my_107:disabled{border:none;background-color:transparent;fill:#a5b4bb}._button-icon-selected_151my_119,._button-icon-selected_151my_119:hover{fill:var(--dynamic-color-text)}._button-icon_151my_107 svg{fill:inherit}._button-error_151my_128{color:#fff;background-color:#ff4747}._button-error_151my_128:hover{background-color:#ed1515}._button-error_151my_128:active{background-color:#c80d0d}._button-error_151my_128 *{fill:#fff}._button-size-xl_151my_141{border-radius:.5rem;padding:1rem;font-size:1.125em}._button-size-l_151my_146{border-radius:.5rem;padding:.75rem;font-size:1em}._button-size-m_151my_151{border-radius:.25rem;padding:.5rem;font-size:.875em}._button-size-s_151my_156{border-radius:.25rem;padding:.375rem;font-size:.75em}._button-size-menu_151my_161{padding:.5rem;font-size:1em;line-height:24px;border-radius:4px}._flexHorizontalCenter_151my_168{display:flex;justify-content:center;align-items:center;flex-direction:row}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@situaction/traq-ui-ste",
3
- "version": "1.0.26",
3
+ "version": "1.0.28",
4
4
  "description": "library react component Situaction",
5
5
  "main": "dist/main.js",
6
6
  "types": "dist/main.d.ts",