@situaction/traq-ui-ste 1.0.25 → 1.0.27

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 +70 -56
  2. package/dist/components/icon-button/IconButton.js +66 -52
  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,70 +1,84 @@
1
- import { jsxs as w, jsx as a } from "react/jsx-runtime";
2
- import { useEffect as g } from "react";
1
+ import { jsxs as f, jsx as o } from "react/jsx-runtime";
3
2
  import { useTheme as x } from "../theme/ThemeContext.js";
4
- import '../../styles/Button.css';const d = "_button_138cw_23", z = "_flexHorizontalCenter_138cw_178", o = {
5
- button: d,
6
- "button-primary": "_button-primary_138cw_45",
7
- "button-secondary": "_button-secondary_138cw_59",
8
- "button-tertiary": "_button-tertiary_138cw_73",
9
- "button-ghost": "_button-ghost_138cw_87",
10
- "button-text": "_button-text_138cw_103",
11
- "button-text-selected": "_button-text-selected_138cw_116",
12
- "button-error": "_button-error_138cw_122",
13
- "button-size-xl": "_button-size-xl_138cw_135",
14
- "button-size-l": "_button-size-l_138cw_141",
15
- "button-size-m": "_button-size-m_138cw_147",
16
- "button-size-s": "_button-size-s_138cw_153",
17
- "button-size-menu": "_button-size-menu_138cw_159",
18
- "button-gap-menu": "_button-gap-menu_138cw_165",
19
- "button-gap-xl": "_button-gap-xl_138cw_168",
20
- "button-gap-l": "_button-gap-l_138cw_171",
21
- "button-gap-m": "_button-gap-m_138cw_165",
22
- "button-gap-s": "_button-gap-s_138cw_174",
23
- flexHorizontalCenter: z
24
- }, $ = ({
25
- mode: r = "primary",
26
- size: u = "m",
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 = ({
24
+ mode: a = "primary",
25
+ size: n = "m",
27
26
  color: t,
28
- colorMode: n,
29
- label: i,
30
- error: c,
31
- selected: l,
32
- childrenLeft: _,
33
- childrenRight: s,
34
- ...b
27
+ colorMode: e,
28
+ label: l,
29
+ error: m,
30
+ selected: d,
31
+ childrenLeft: i,
32
+ childrenRight: c,
33
+ ...y
35
34
  }) => {
36
- const { mode: e } = x(), m = () => c ? "error" : r;
37
- g(() => {
38
- n && !t && console.warn("`colorMode` is defined but `color` is missing. `colorMode` will be ignored.");
39
- }, [t]);
40
- const p = [
41
- o.button,
42
- o[`button-${m()}`],
43
- o[`button-size-${u}`],
44
- o[`button-gap-${u}`],
45
- l && r === "text" && o["button-text-selected"],
46
- o.flexHorizontalCenter
47
- ].join(" "), y = {
48
- "--dynamic-color-text": t ? n === "dark" ? `var(--color-${t}-900)` : "var(--color-light-100)" : e === "light" ? "var(--color-light-100)" : "var(--primary-color-900)",
49
- "--dynamic-color": t ? `var(--color-${t}-${n === "dark" ? "200" : "900"})` : "var(--primary-color)",
50
- "--dynamic-color-hover": t ? `var(--color-${t}-${n === "dark" ? "100" : "800"})` : e === "light" ? "var(--primary-color-800)" : "var(--primary-color-100)",
51
- "--dynamic-color-activated": t ? `var(--color-${t}-${n === "dark" ? "50" : "700"})` : e === "light" ? "var(--primary-color-700)" : "var(--primary-color-50)"
35
+ const { mode: _ } = x(), s = () => m ? "error" : a, u = [
36
+ r.button,
37
+ r[`button-${s()}`],
38
+ r[`button-size-${n}`],
39
+ r[`button-gap-${n}`],
40
+ d && a === "text" && r["button-text-selected"],
41
+ r.flexHorizontalCenter
42
+ ].filter(Boolean).join(" "), b = {
43
+ "--dynamic-color-primary-text": t ? `var(--color-${t}-900)` : "var(--primary-color-900)",
44
+ "--dynamic-color-text": "var(--color-light-100)",
45
+ "--dynamic-color": t ? `var(--color-${t}-200)` : "var(--primary-color)",
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)"
48
+ }, v = {
49
+ "--dynamic-color-primary-text": "var(--color-light-100)",
50
+ "--dynamic-color-text": t ? `var(--color-${t}-900)` : "var(--primary-color-900)",
51
+ "--dynamic-color": t ? `var(--color-${t}-900})` : "var(--primary-color)",
52
+ "--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)"
54
+ }, p = {
55
+ "--dynamic-color-primary-text": t ? `var(--color-${t}-900)` : "var(--primary-color-950)",
56
+ "--dynamic-color-text": "var(--color-light-100)",
57
+ "--dynamic-color": t ? `var(--color-${t}-200)` : "var(--primary-color-200)",
58
+ "--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 = {
61
+ "--dynamic-color-primary-text": "var(--color-light-100)",
62
+ "--dynamic-color-text": t ? `var(--color-${t}-900)` : "var(--secondary-color)",
63
+ "--dynamic-color": t ? `var(--color-${t}-900)` : "var(--secondary-color)",
64
+ "--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)"
52
66
  };
53
- return /* @__PURE__ */ w(
67
+ return /* @__PURE__ */ f(
54
68
  "button",
55
69
  {
56
70
  type: "button",
57
- className: p,
58
- style: r === "primary" ? y : void 0,
59
- ...b,
71
+ className: u,
72
+ style: e ? e === "dark" ? p : z : _ === "dark" ? b : v,
73
+ ...y,
60
74
  children: [
61
- _ && /* @__PURE__ */ a("span", { className: o.flexHorizontalCenter, children: _ }),
62
- /* @__PURE__ */ a("span", { children: i }),
63
- s && /* @__PURE__ */ a("span", { className: o.flexHorizontalCenter, children: s })
75
+ i && /* @__PURE__ */ o("span", { className: r.flexHorizontalCenter, children: i }),
76
+ /* @__PURE__ */ o("span", { children: l }),
77
+ c && /* @__PURE__ */ o("span", { className: r.flexHorizontalCenter, children: c })
64
78
  ]
65
79
  }
66
80
  );
67
81
  };
68
82
  export {
69
- $ as Button
83
+ H as Button
70
84
  };
package/dist/components/icon-button/IconButton.js CHANGED
@@ -1,62 +1,76 @@
1
- import { jsx as g } from "react/jsx-runtime";
2
- import { useEffect as y } from "react";
3
- import { useTheme as d } from "../theme/ThemeContext.js";
4
- import '../../styles/IconButton.css';const z = "_button_16ptg_23", v = "_flexHorizontalCenter_16ptg_168", o = {
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 = {
5
4
  button: z,
6
- "button-round": "_button-round_16ptg_50",
7
- "button-primary": "_button-primary_16ptg_53",
8
- "button-secondary": "_button-secondary_16ptg_66",
9
- "button-tertiary": "_button-tertiary_16ptg_80",
10
- "button-ghost": "_button-ghost_16ptg_94",
11
- "button-icon": "_button-icon_16ptg_107",
12
- "button-icon-selected": "_button-icon-selected_16ptg_119",
13
- "button-error": "_button-error_16ptg_128",
14
- "button-size-xl": "_button-size-xl_16ptg_141",
15
- "button-size-l": "_button-size-l_16ptg_146",
16
- "button-size-m": "_button-size-m_16ptg_151",
17
- "button-size-s": "_button-size-s_16ptg_156",
18
- "button-size-menu": "_button-size-menu_16ptg_161",
19
- flexHorizontalCenter: v
20
- }, $ = ({
21
- mode: e = "primary",
22
- color: t,
23
- colorMode: r,
24
- size: i = "m",
25
- error: u,
26
- selected: a,
27
- round: s,
28
- disabled: _,
29
- children: b,
30
- onClick: l
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,
22
+ colorMode: a,
23
+ size: n = "m",
24
+ error: e,
25
+ selected: i,
26
+ round: c,
27
+ disabled: l,
28
+ children: v,
29
+ onClick: y
31
30
  }) => {
32
- const { mode: n } = d(), c = () => u ? "error" : e;
33
- y(() => {
34
- r && !t && console.warn("`colorMode` is defined but `color` is missing. `colorMode` will be ignored.");
35
- }, [t]);
36
- const m = [
37
- o.button,
38
- o[`button-${c()}`],
39
- s && o["button-round"],
40
- o[`button-size-${i}`],
41
- a && e === "icon" && o["button-icon-selected"],
42
- o.flexHorizontalCenter
43
- ].join(" "), p = {
44
- "--dynamic-color-text": t ? r === "dark" ? "var(--primary-color-900)" : "var(--color-light-100)" : n === "light" ? "var(--color-light-100)" : "var(--primary-color-900)",
45
- "--dynamic-color": t ? `var(--color-${t}-${r === "dark" ? "200" : "900"})` : "var(--primary-color)",
46
- "--dynamic-color-hover": t ? `var(--color-${t}-${r === "dark" ? "100" : "800"})` : n === "light" ? "var(--primary-color-800)" : "var(--primary-color-100)",
47
- "--dynamic-color-activated": t ? `var(--color-${t}-${r === "dark" ? "50" : "700"})` : n === "light" ? "var(--primary-color-700)" : "var(--primary-color-50)"
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)",
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
+ }, _ = {
45
+ "--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)",
52
+ "--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)"
56
+ }, p = {
57
+ "--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)"
48
62
  };
49
- return /* @__PURE__ */ g(
63
+ return /* @__PURE__ */ $(
50
64
  "button",
51
65
  {
52
- className: m,
53
- style: p,
54
- onClick: l,
55
- disabled: _,
56
- children: b
66
+ className: u,
67
+ style: a ? a === "dark" ? d : p : m === "dark" ? s : _,
68
+ onClick: y,
69
+ disabled: l,
70
+ children: v
57
71
  }
58
72
  );
59
73
  };
60
74
  export {
61
- $ as IconButton
75
+ S as IconButton
62
76
  };
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_138cw_23{font-family:var(--font-family);font-weight:500;border:0;cursor:pointer;width:fit-content}._button_138cw_23:focus-visible{outline:2px solid var(--dynamic-color);outline-offset:2px}._button_138cw_23:disabled{background-color:#0f0f0f0d;color:#0f0f0f66;border:1px solid rgba(15,15,15,.1);cursor:initial;pointer-events:none}._button_138cw_23:disabled *{fill:#0f0f0f66}._button-primary_138cw_45{color:var(--dynamic-color-text);background-color:var(--dynamic-color)}._button-primary_138cw_45:hover{background-color:var(--dynamic-color-hover)}._button-primary_138cw_45:active{background-color:var(--dynamic-color-activated);outline:none}._button-primary_138cw_45 *{fill:var(--dynamic-color-text)}._button-secondary_138cw_59{color:var(--color-text);background-color:#96b4ee33;border:1px solid rgba(150,180,238,.5)}._button-secondary_138cw_59:hover{background-color:#96b4ee66}._button-secondary_138cw_59:active{background-color:#96b4ee99}._button-secondary_138cw_59 *{fill:var(--color-text)}._button-tertiary_138cw_73{color:var(--color-text);background-color:transparent;border:1px solid rgba(150,180,238,.5)}._button-tertiary_138cw_73:hover{background-color:#96b4ee1a}._button-tertiary_138cw_73:active{background-color:#96b4ee33}._button-tertiary_138cw_73 *{fill:var(--color-text)}._button-ghost_138cw_87{color:var(--color-text);background-color:transparent}._button-ghost_138cw_87:hover{background-color:#96b4ee1a}._button-ghost_138cw_87:active{background-color:#96b4ee33}._button-ghost_138cw_87:disabled{border:none}._button-ghost_138cw_87 *{fill:var(--color-text)}._button-text_138cw_103{color:#a5b4bb;background-color:transparent;padding:0!important}._button-text_138cw_103:hover{color:#788d98}._button-text_138cw_103:disabled{border:none;background-color:transparent;color:#a5b4bb}._button-text-selected_138cw_116,._button-text-selected_138cw_116:hover{color:var(--color-text)}._button-error_138cw_122{color:#fff;background-color:#ff4747}._button-error_138cw_122:hover{background-color:#ed1515}._button-error_138cw_122:active{background-color:#c80d0d}._button-error_138cw_122 *{fill:var(--color-text)}._button-size-xl_138cw_135{padding:1rem 2rem;font-size:1.125em;line-height:28px;border-radius:8px}._button-size-l_138cw_141{padding:.75rem 1.5rem;font-size:1em;line-height:24px;border-radius:8px}._button-size-m_138cw_147{padding:.5rem 1rem;font-size:.875em;line-height:22px;border-radius:4px}._button-size-s_138cw_153{padding:.375rem .75rem;font-size:.75em;line-height:16px;border-radius:4px}._button-size-menu_138cw_159{padding:.5rem;font-size:1em;line-height:24px;border-radius:4px}._button-gap-menu_138cw_165{gap:.5rem}._button-gap-xl_138cw_168{gap:12px}._button-gap-l_138cw_171{gap:8px}._button-gap-m_138cw_165,._button-gap-s_138cw_174{gap:4px}._flexHorizontalCenter_138cw_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_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}
package/dist/styles/IconButton.css CHANGED
@@ -1 +1 @@
1
- ._button_16ptg_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_16ptg_23:focus-visible{outline:none}._button_16ptg_23:disabled{background-color:#0f0f0f0d;color:#0f0f0f66;border:1px solid rgba(15,15,15,.1);cursor:initial;pointer-events:none}._button_16ptg_23:disabled *{fill:#0f0f0f66}._button-round_16ptg_50._button_16ptg_23{border-radius:50%}._button-primary_16ptg_53{color:var(--dynamic-color-text);background-color:var(--dynamic-color)}._button-primary_16ptg_53:hover{background-color:var(--dynamic-color-hover)}._button-primary_16ptg_53:active{background-color:var(--dynamic-color-activated)}._button-primary_16ptg_53 *{fill:var(--dynamic-color-text)}._button-secondary_16ptg_66{color:var(--color-text);background-color:#96b4ee33;border:1px solid rgba(150,180,238,.5)}._button-secondary_16ptg_66:hover{background-color:#96b4ee66}._button-secondary_16ptg_66:active{background-color:#96b4ee99}._button-secondary_16ptg_66 *{fill:var(--color-text)}._button-tertiary_16ptg_80{color:var(--color-text);background-color:transparent;border:1px solid rgba(150,180,238,.5)}._button-tertiary_16ptg_80:hover{background-color:#96b4ee1a}._button-tertiary_16ptg_80:active{background-color:#96b4ee33}._button-tertiary_16ptg_80 *{fill:var(--color-text)}._button-ghost_16ptg_94{color:var(--color-text);background-color:transparent}._button-ghost_16ptg_94:hover{background-color:#96b4ee1a}._button-ghost_16ptg_94:active{background-color:#96b4ee33}._button-ghost_16ptg_94 *{fill:var(--color-text)}._button-icon_16ptg_107{fill:#a5b4bb;background-color:transparent}._button-icon_16ptg_107:hover{fill:#788d98}._button-icon_16ptg_107:disabled{border:none;background-color:transparent;fill:#a5b4bb}._button-icon-selected_16ptg_119,._button-icon-selected_16ptg_119:hover{fill:var(--color-text)}._button-icon_16ptg_107 svg{fill:inherit}._button-error_16ptg_128{color:#fff;background-color:#ff4747}._button-error_16ptg_128:hover{background-color:#ed1515}._button-error_16ptg_128:active{background-color:#c80d0d}._button-error_16ptg_128 *{fill:var(--color-text)}._button-size-xl_16ptg_141{border-radius:.5rem;padding:1rem;font-size:1.125em}._button-size-l_16ptg_146{border-radius:.5rem;padding:.75rem;font-size:1em}._button-size-m_16ptg_151{border-radius:.25rem;padding:.5rem;font-size:.875em}._button-size-s_16ptg_156{border-radius:.25rem;padding:.375rem;font-size:.75em}._button-size-menu_16ptg_161{padding:.5rem;font-size:1em;line-height:24px;border-radius:4px}._flexHorizontalCenter_16ptg_168{display:flex;justify-content:center;align-items:center;flex-direction:row}
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}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@situaction/traq-ui-ste",
3
- "version": "1.0.25",
3
+ "version": "1.0.27",
4
4
  "description": "library react component Situaction",
5
5
  "main": "dist/main.js",
6
6
  "types": "dist/main.d.ts",