@logora/debate 0.4.50 → 0.4.51

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.
@@ -0,0 +1 @@
1
+ ._toolbar_1vwec_3{display:flex!important;justify-content:space-between!important;flex-wrap:wrap;background:var(--background-color-primary, white);padding-top:var(--spacer-md, calc(var(--space-unit, 1em) * .75))!important;vertical-align:middle;align-items:flex-start;gap:var(--space-unit, 1em)}._toolbar_1vwec_3._toolbarIsActive_1vwec_13{border-top:1px solid var(--text-tertiary, #fafafa)}._iconToolbar_1vwec_17{display:flex!important;gap:var(--spacer-lg, calc(var(--space-unit, 1em) * 1.5))}._iconToolbar_1vwec_17._shortBar_1vwec_21{gap:var(--spacer-md, calc(var(--space-unit, 1em) * .75))}._toolbarItem_1vwec_25{border:0;background:none;padding:0!important;cursor:pointer;vertical-align:middle;touch-action:manipulation;display:flex;align-items:center;justify-content:center;outline:none}@container (max-width: 575.98px){._toolbarItem_1vwec_25{min-width:44px;min-height:44px}}._toolbarItem_1vwec_25._disabled_1vwec_43{cursor:not-allowed}._toolbarItem_1vwec_25:active,._toolbarItem_1vwec_25._active_1vwec_46{background-color:#bababa66;border-radius:50%}._toolbarItem_1vwec_25 ._format_1vwec_50{background-size:contain;display:inline-block;vertical-align:-.25em;display:flex!important}._actionButton_1vwec_57{display:flex!important;gap:var(--space-unit, 1em);margin-left:auto}._inputSubmitActionButton_1vwec_63{width:100%;height:35px;display:flex!important;justify-content:center!important;align-items:center!important;background-color:var(--call-primary-color, #434343)!important}._inputSubmitActionButton_1vwec_63._submitAction_1vwec_71 svg{fill:var(--text-light, white)!important}._inputSubmitActionButton_1vwec_63 ._inputSourceText_1vwec_74{display:none!important;margin-left:var(--spacer-sm, calc(var(--space-unit, 1em) * .5))!important;font-size:var(--font-size-small, 16px)}@container (min-width: 576px){._inputSubmitActionButton_1vwec_63 ._inputSourceText_1vwec_74{display:block!important}}._tooltip_1vwec_85{width:230px!important;margin-left:-117px!important}
@@ -0,0 +1 @@
1
+ ._listHeader_10hfs_3{display:flex;justify-content:space-between;align-items:center;position:relative;flex-wrap:wrap;gap:var(--space-unit, 1em)}@container (max-width: 575.98px){._listHeader_10hfs_3{flex-direction:column;align-items:flex-start}._listHeader_10hfs_3._listHeaderOneItem_10hfs_16{flex-direction:row;align-items:center;flex-wrap:nowrap!important}}._listTitle_10hfs_23{font-size:var(--font-size-extra-large, 22px);line-height:var(--line-height-tight, 1.08em);font-weight:var(--font-weight-bold, 700);font-variation-settings:var(--font-variation-bold, normal);font-family:var(--title-font-family, var(--font-family, "Montserrat"))}._listSubtitle_10hfs_31{color:var(--text-primary, #222222);font-weight:var(--font-weight-normal, 400);font-variation-settings:var(--font-variation-normal, normal);font-size:var(--font-size-normal, 16px);margin-top:var(--spacer-sm, calc(var(--space-unit, 1em) * .5))}._rightBar_10hfs_39{display:flex;gap:var(--space-unit, 1em);flex-wrap:wrap}@container (max-width: 575.98px){._rightBar_10hfs_39{width:100%;justify-content:space-between}._rightBar_10hfs_39._rightBarOneItem_10hfs_49{justify-content:flex-end}}._rightBar_10hfs_39{flex:1 1 auto;justify-content:flex-end;align-items:center;flex-direction:row}._search_10hfs_60{flex:1;max-width:35%}@container (max-width: 575.98px){._search_10hfs_60{max-width:80%}}._tagSection_10hfs_70{position:relative;display:flex;align-items:stretch;width:100%;max-width:100%}._tagList_10hfs_78{display:flex;flex-direction:row;justify-content:flex-start;flex:1;overflow-x:auto;overflow-y:hidden;gap:var(--spacer-md, calc(var(--space-unit, 1em) * .75));padding-bottom:var(--spacer-md, calc(var(--space-unit, 1em) * .75));scrollbar-width:none}@container (max-width: 575.98px){._tagList_10hfs_78{gap:var(--spacer-sm, calc(var(--space-unit, 1em) * .5))}}._tagList_10hfs_78::-webkit-scrollbar{display:none}._arrow_10hfs_98{position:absolute;top:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;padding:0;transition:opacity .2s ease;outline:none;background:none;line-height:0}._arrow_10hfs_98 svg{display:block}._arrow_10hfs_98:focus-visible{outline:2px solid var(--call-primary-color, #434343);outline-offset:-2px}._arrowLeft_10hfs_122{left:0;padding-left:var(--spacer-xs, calc(var(--space-unit, 1em) * .325));background:linear-gradient(to right,var(--background-color-container, white) 40%,transparent)}._arrowLeft_10hfs_122 svg{transform:rotate(90deg)}._arrowRight_10hfs_131{right:0;padding-right:var(--spacer-xs, calc(var(--space-unit, 1em) * .325));background:linear-gradient(to left,var(--background-color-container, white) 40%,transparent)}._arrowRight_10hfs_131 svg{transform:rotate(-90deg)}._arrowHidden_10hfs_140{opacity:0;pointer-events:none}._tagItem_10hfs_145{display:flex!important;color:var(--text-secondary, #5F5F5F);cursor:pointer;white-space:nowrap}._select_10hfs_152{max-width:300px}@container (max-width: 575.98px){._select_10hfs_152{max-width:300px}}
@@ -1,24 +1,24 @@
1
- import '../../../../assets/components/input/text_editor/plugins/ToolbarPlugin.module-C3yG2biv.css';const t = "_toolbar_awaxp_3", o = "_toolbarIsActive_awaxp_13", a = "_iconToolbar_awaxp_17", n = "_shortBar_awaxp_21", _ = "_toolbarItem_awaxp_25", c = "_active_awaxp_45", i = "_format_awaxp_49", s = "_actionButton_awaxp_56", r = "_inputSubmitActionButton_awaxp_62", b = "_submitAction_awaxp_70", u = {
1
+ import '../../../../assets/components/input/text_editor/plugins/ToolbarPlugin.module-DPrYyi_2.css';const t = "_toolbar_1vwec_3", o = "_toolbarIsActive_1vwec_13", c = "_iconToolbar_1vwec_17", n = "_shortBar_1vwec_21", _ = "_toolbarItem_1vwec_25", i = "_active_1vwec_46", a = "_format_1vwec_50", s = "_actionButton_1vwec_57", e = "_inputSubmitActionButton_1vwec_63", r = "_submitAction_1vwec_71", b = {
2
2
  toolbar: t,
3
3
  toolbarIsActive: o,
4
- iconToolbar: a,
4
+ iconToolbar: c,
5
5
  shortBar: n,
6
6
  toolbarItem: _,
7
- active: c,
8
- format: i,
7
+ active: i,
8
+ format: a,
9
9
  actionButton: s,
10
- inputSubmitActionButton: r,
11
- submitAction: b
10
+ inputSubmitActionButton: e,
11
+ submitAction: r
12
12
  };
13
13
  export {
14
14
  s as actionButton,
15
- c as active,
16
- u as default,
17
- i as format,
18
- a as iconToolbar,
19
- r as inputSubmitActionButton,
15
+ i as active,
16
+ b as default,
17
+ a as format,
18
+ c as iconToolbar,
19
+ e as inputSubmitActionButton,
20
20
  n as shortBar,
21
- b as submitAction,
21
+ r as submitAction,
22
22
  t as toolbar,
23
23
  o as toolbarIsActive,
24
24
  _ as toolbarItem
@@ -1,109 +1,129 @@
1
- import { jsx as i, Fragment as g, jsxs as h } from "react/jsx-runtime";
2
- import v from "classnames";
3
- import { useState as T } from "react";
4
- import { useIntl as _ } from "react-intl";
5
- import { useLocation as z } from "react-router";
6
- import a from "./ActionBar.module.scss.js";
7
- import { useResponsive as D } from "../../../hooks/use_responsive/useResponsive.js";
8
- import { SearchInput as F } from "../../../input/search_input/SearchInput.js";
9
- import { Select as P } from "../../../input/select/Select.js";
10
- import { Tag as E } from "../../../tag/tag/Tag.js";
11
- import { Icon as G } from "../../../icons/icon/Icon.js";
12
- const O = ({
13
- title: n,
14
- subtitle: u,
15
- showDebateConsultationSubtitle: y = !1,
16
- sortOptions: r,
17
- defaultSelectOption: A,
18
- searchBar: s = !1,
19
- tagList: o,
20
- pinnedTagList: c = [],
21
- activeTagId: d,
22
- withUrlParams: m = !1,
23
- onSearch: I,
24
- onSortChange: N,
25
- onTagChange: w
1
+ import { jsx as r, Fragment as T, jsxs as d } from "react/jsx-runtime";
2
+ import R from "classnames";
3
+ import { useState as v, useRef as G, useCallback as J, useEffect as K } from "react";
4
+ import { useIntl as Q } from "react-intl";
5
+ import { useLocation as V } from "react-router";
6
+ import t from "./ActionBar.module.scss.js";
7
+ import { useResponsive as X } from "../../../hooks/use_responsive/useResponsive.js";
8
+ import { SearchInput as Y } from "../../../input/search_input/SearchInput.js";
9
+ import { Select as Z } from "../../../input/select/Select.js";
10
+ import { Icon as b } from "../../../icons/icon/Icon.js";
11
+ import { Tag as U } from "../../../tag/tag/Tag.js";
12
+ const de = ({
13
+ title: f,
14
+ subtitle: w,
15
+ showDebateConsultationSubtitle: k = !1,
16
+ sortOptions: n,
17
+ defaultSelectOption: x,
18
+ searchBar: o = !1,
19
+ tagList: m,
20
+ pinnedTagList: h = [],
21
+ activeTagId: u,
22
+ withUrlParams: g = !1,
23
+ onSearch: $,
24
+ onSortChange: L,
25
+ onTagChange: H
26
26
  }) => {
27
- const x = _(), b = z(), { isMobile: J } = D(), [k, C] = T(!1), l = new URLSearchParams(
28
- typeof window < "u" ? window.location.search : b.search
29
- ), f = Array.isArray(o) ? o : o?.data || [], p = [
27
+ const B = Q(), M = V(), { isMobile: q } = X(), [j, z] = v(!1), s = G(null), [y, P] = v(!1), [A, W] = v(!1), a = new URLSearchParams(
28
+ typeof window < "u" ? window.location.search : M.search
29
+ ), S = Array.isArray(m) ? m : m?.data || [], C = [
30
30
  ...new Set(
31
- (Array.isArray(c) ? c : [c]).filter(Boolean).map(String)
31
+ (Array.isArray(h) ? h : [h]).filter(Boolean).map(String)
32
32
  )
33
- ], S = f.length > 0 ? [
34
- ...p.map((e) => f.find((t) => String(t.id) === e)).filter(Boolean),
35
- ...f.filter((e) => !p.includes(String(e.id)))
36
- ] : [], M = (e) => {
37
- if (m) {
38
- for (const t of l.keys())
39
- r.map((R) => {
40
- R.name === t && l.delete(t);
33
+ ], p = S.length > 0 ? [
34
+ ...C.map((e) => S.find((l) => String(l.id) === e)).filter(Boolean),
35
+ ...S.filter((e) => !C.includes(String(e.id)))
36
+ ] : [], i = J(() => {
37
+ const e = s.current;
38
+ e && (P(e.scrollLeft > 1), W(e.scrollLeft + e.clientWidth < e.scrollWidth - 1));
39
+ }, []);
40
+ K(() => {
41
+ i();
42
+ const e = s.current;
43
+ if (!e) return;
44
+ const l = new ResizeObserver(i);
45
+ return l.observe(e), () => l.disconnect();
46
+ }, [p, i]);
47
+ const I = (e, l) => {
48
+ l.stopPropagation();
49
+ const c = s.current;
50
+ if (!c) return;
51
+ const N = 200;
52
+ c.scrollBy({
53
+ left: e === "left" ? -N : N,
54
+ behavior: "smooth"
55
+ }), setTimeout(i, 300);
56
+ }, _ = (e) => {
57
+ if (g) {
58
+ for (const l of a.keys())
59
+ n.map((c) => {
60
+ c.name === l && a.delete(l);
41
61
  });
42
- l.delete("sort"), l.set(
62
+ a.delete("sort"), a.set(
43
63
  e.type === "filter" ? e.name : "sort",
44
64
  e.value
45
65
  );
46
66
  }
47
- N(e);
48
- }, j = (e) => {
49
- m && (e.id === d ? l.delete("tagId") : l.set("tagId", e.id)), w(e.id === d ? null : e.id);
50
- }, B = (e) => {
51
- m && (e ? l.set("search", e) : l.delete("search")), I(e), C(e !== "");
52
- }, H = (e) => {
53
- const t = d === e.id;
54
- return /* @__PURE__ */ i(
67
+ L(e);
68
+ }, D = (e) => {
69
+ g && (e.id === u ? a.delete("tagId") : a.set("tagId", e.id)), H(e.id === u ? null : e.id);
70
+ }, E = (e) => {
71
+ g && (e ? a.set("search", e) : a.delete("search")), $(e), z(e !== "");
72
+ }, F = (e) => {
73
+ const l = u === e.id;
74
+ return /* @__PURE__ */ r(
55
75
  "div",
56
76
  {
57
- className: a.tagItem,
58
- onClick: () => j(e),
59
- children: /* @__PURE__ */ i(
60
- E,
77
+ className: t.tagItem,
78
+ onClick: () => D(e),
79
+ children: /* @__PURE__ */ r(
80
+ U,
61
81
  {
62
82
  text: e.display_name,
63
- active: t,
64
- rightIcon: t && /* @__PURE__ */ i(G, { name: "close", height: 10, width: 10 })
83
+ active: l,
84
+ rightIcon: l && /* @__PURE__ */ r(b, { name: "close", height: 10, width: 10 })
65
85
  }
66
86
  )
67
87
  },
68
88
  e.id
69
89
  );
70
90
  };
71
- return /* @__PURE__ */ i(g, { children: (n || r || s) && /* @__PURE__ */ h(g, { children: [
72
- /* @__PURE__ */ h(
91
+ return /* @__PURE__ */ r(T, { children: (f || n || o) && /* @__PURE__ */ d(T, { children: [
92
+ /* @__PURE__ */ d(
73
93
  "div",
74
94
  {
75
- className: v(a.listHeader, {
76
- [a.listHeaderOneItem]: !s || !r
95
+ className: R(t.listHeader, {
96
+ [t.listHeaderOneItem]: !o || !n
77
97
  }),
78
98
  children: [
79
- n && /* @__PURE__ */ i("div", { className: a.listTitle, children: n }),
80
- (r || s) && /* @__PURE__ */ h(
99
+ f && /* @__PURE__ */ r("div", { className: t.listTitle, children: f }),
100
+ (n || o) && /* @__PURE__ */ d(
81
101
  "div",
82
102
  {
83
- className: v(a.rightBar, {
84
- [a.rightBarOneItem]: !s || !r
103
+ className: R(t.rightBar, {
104
+ [t.rightBarOneItem]: !o || !n
85
105
  }),
86
106
  children: [
87
- s ? /* @__PURE__ */ i("div", { className: a.search, children: /* @__PURE__ */ i(
88
- F,
107
+ o ? /* @__PURE__ */ r("div", { className: t.search, children: /* @__PURE__ */ r(
108
+ Y,
89
109
  {
90
- onSearchSubmit: B,
91
- placeholder: x.formatMessage({
110
+ onSearchSubmit: E,
111
+ placeholder: B.formatMessage({
92
112
  id: "info.search_mobile",
93
113
  defaultMessage: "Search"
94
114
  }),
95
115
  reducedByDefault: !1
96
116
  }
97
117
  ) }) : null,
98
- r ? /* @__PURE__ */ i(
99
- P,
118
+ n ? /* @__PURE__ */ r(
119
+ Z,
100
120
  {
101
- onChange: M,
102
- options: r,
103
- defaultOption: A,
121
+ onChange: _,
122
+ options: n,
123
+ defaultOption: x,
104
124
  horizontalPosition: "right",
105
- disabled: k,
106
- className: a.select
125
+ disabled: j,
126
+ className: t.select
107
127
  }
108
128
  ) : null
109
129
  ]
@@ -112,10 +132,42 @@ const O = ({
112
132
  ]
113
133
  }
114
134
  ),
115
- y && u && /* @__PURE__ */ i("div", { className: a.listSubtitle, children: u }),
116
- S.length > 0 && /* @__PURE__ */ i("div", { className: a.tagList, children: S.map(H) })
135
+ k && w && /* @__PURE__ */ r("div", { className: t.listSubtitle, children: w }),
136
+ p.length > 0 && /* @__PURE__ */ d("div", { className: t.tagSection, children: [
137
+ /* @__PURE__ */ r(
138
+ "button",
139
+ {
140
+ type: "button",
141
+ className: `${t.arrow} ${t.arrowLeft} ${y ? "" : t.arrowHidden}`,
142
+ onClick: (e) => I("left", e),
143
+ "aria-label": "Tag précédent",
144
+ tabIndex: y ? 0 : -1,
145
+ children: /* @__PURE__ */ r(b, { name: "lightArrow", height: 24, width: 24 })
146
+ }
147
+ ),
148
+ /* @__PURE__ */ r(
149
+ "div",
150
+ {
151
+ ref: s,
152
+ className: t.tagList,
153
+ onScroll: i,
154
+ children: p.map(F)
155
+ }
156
+ ),
157
+ /* @__PURE__ */ r(
158
+ "button",
159
+ {
160
+ type: "button",
161
+ className: `${t.arrow} ${t.arrowRight} ${A ? "" : t.arrowHidden}`,
162
+ onClick: (e) => I("right", e),
163
+ "aria-label": "Tag suivant",
164
+ tabIndex: A ? 0 : -1,
165
+ children: /* @__PURE__ */ r(b, { name: "lightArrow", height: 24, width: 24 })
166
+ }
167
+ )
168
+ ] })
117
169
  ] }) });
118
170
  };
119
171
  export {
120
- O as ActionBar
172
+ de as ActionBar
121
173
  };
@@ -1,25 +1,35 @@
1
- import '../../../../assets/components/list/paginated_list/action_bar/ActionBar.module-BDMBrj2Y.css';const t = "_listHeader_fga2s_3", e = "_listHeaderOneItem_fga2s_16", s = "_listTitle_fga2s_23", a = "_listSubtitle_fga2s_31", _ = "_rightBar_fga2s_39", i = "_rightBarOneItem_fga2s_49", l = "_search_fga2s_60", g = "_tagList_fga2s_70", r = "_tagItem_fga2s_85", c = "_select_fga2s_92", n = {
1
+ import '../../../../assets/components/list/paginated_list/action_bar/ActionBar.module-DP4kPR9x.css';const t = "_listHeader_10hfs_3", s = "_listHeaderOneItem_10hfs_16", e = "_listTitle_10hfs_23", r = "_listSubtitle_10hfs_31", _ = "_rightBar_10hfs_39", a = "_rightBarOneItem_10hfs_49", i = "_search_10hfs_60", o = "_tagSection_10hfs_70", n = "_tagList_10hfs_78", h = "_arrow_10hfs_98", c = "_arrowLeft_10hfs_122", l = "_arrowRight_10hfs_131", f = "_arrowHidden_10hfs_140", g = "_tagItem_10hfs_145", d = "_select_10hfs_152", w = {
2
2
  listHeader: t,
3
- listHeaderOneItem: e,
4
- listTitle: s,
5
- listSubtitle: a,
3
+ listHeaderOneItem: s,
4
+ listTitle: e,
5
+ listSubtitle: r,
6
6
  rightBar: _,
7
- rightBarOneItem: i,
8
- search: l,
9
- tagList: g,
10
- tagItem: r,
11
- select: c
7
+ rightBarOneItem: a,
8
+ search: i,
9
+ tagSection: o,
10
+ tagList: n,
11
+ arrow: h,
12
+ arrowLeft: c,
13
+ arrowRight: l,
14
+ arrowHidden: f,
15
+ tagItem: g,
16
+ select: d
12
17
  };
13
18
  export {
14
- n as default,
19
+ h as arrow,
20
+ f as arrowHidden,
21
+ c as arrowLeft,
22
+ l as arrowRight,
23
+ w as default,
15
24
  t as listHeader,
16
- e as listHeaderOneItem,
17
- a as listSubtitle,
18
- s as listTitle,
25
+ s as listHeaderOneItem,
26
+ r as listSubtitle,
27
+ e as listTitle,
19
28
  _ as rightBar,
20
- i as rightBarOneItem,
21
- l as search,
22
- c as select,
23
- r as tagItem,
24
- g as tagList
29
+ a as rightBarOneItem,
30
+ i as search,
31
+ d as select,
32
+ g as tagItem,
33
+ n as tagList,
34
+ o as tagSection
25
35
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@logora/debate",
3
- "version": "0.4.50",
3
+ "version": "0.4.51",
4
4
  "type": "module",
5
5
  "license": "AGPL-3.0",
6
6
  "description": "Design system of @Logora made with React",
@@ -1 +0,0 @@
1
- ._toolbar_awaxp_3{display:flex!important;justify-content:space-between!important;flex-wrap:wrap;background:var(--background-color-primary, white);padding-top:var(--spacer-md, calc(var(--space-unit, 1em) * .75))!important;vertical-align:middle;align-items:flex-start;gap:var(--space-unit, 1em)}._toolbar_awaxp_3._toolbarIsActive_awaxp_13{border-top:1px solid var(--text-tertiary, #fafafa)}._iconToolbar_awaxp_17{display:flex!important;gap:var(--spacer-lg, calc(var(--space-unit, 1em) * 1.5))}._iconToolbar_awaxp_17._shortBar_awaxp_21{gap:var(--spacer-md, calc(var(--space-unit, 1em) * .75))}._toolbarItem_awaxp_25{border:0;background:none;padding:0!important;cursor:pointer;vertical-align:middle;touch-action:manipulation;display:flex;align-items:center;justify-content:center}@container (max-width: 575.98px){._toolbarItem_awaxp_25{min-width:44px;min-height:44px}}._toolbarItem_awaxp_25._disabled_awaxp_42{cursor:not-allowed}._toolbarItem_awaxp_25._active_awaxp_45{background-color:#bababa66;border-radius:50%}._toolbarItem_awaxp_25 ._format_awaxp_49{background-size:contain;display:inline-block;vertical-align:-.25em;display:flex!important}._actionButton_awaxp_56{display:flex!important;gap:var(--space-unit, 1em);margin-left:auto}._inputSubmitActionButton_awaxp_62{width:100%;height:35px;display:flex!important;justify-content:center!important;align-items:center!important;background-color:var(--call-primary-color, #434343)!important}._inputSubmitActionButton_awaxp_62._submitAction_awaxp_70 svg{fill:var(--text-light, white)!important}._inputSubmitActionButton_awaxp_62 ._inputSourceText_awaxp_73{display:none!important;margin-left:var(--spacer-sm, calc(var(--space-unit, 1em) * .5))!important;font-size:var(--font-size-small, 16px)}@container (min-width: 576px){._inputSubmitActionButton_awaxp_62 ._inputSourceText_awaxp_73{display:block!important}}._tooltip_awaxp_84{width:230px!important;margin-left:-117px!important}
@@ -1 +0,0 @@
1
- ._listHeader_fga2s_3{display:flex;justify-content:space-between;align-items:center;position:relative;flex-wrap:wrap;gap:var(--space-unit, 1em)}@container (max-width: 575.98px){._listHeader_fga2s_3{flex-direction:column;align-items:flex-start}._listHeader_fga2s_3._listHeaderOneItem_fga2s_16{flex-direction:row;align-items:center;flex-wrap:nowrap!important}}._listTitle_fga2s_23{font-size:var(--font-size-extra-large, 22px);line-height:var(--line-height-tight, 1.08em);font-weight:var(--font-weight-bold, 700);font-variation-settings:var(--font-variation-bold, normal);font-family:var(--title-font-family, var(--font-family, "Montserrat"))}._listSubtitle_fga2s_31{color:var(--text-primary, #222222);font-weight:var(--font-weight-normal, 400);font-variation-settings:var(--font-variation-normal, normal);font-size:var(--font-size-normal, 16px);margin-top:var(--spacer-sm, calc(var(--space-unit, 1em) * .5))}._rightBar_fga2s_39{display:flex;gap:var(--space-unit, 1em);flex-wrap:wrap}@container (max-width: 575.98px){._rightBar_fga2s_39{width:100%;justify-content:space-between}._rightBar_fga2s_39._rightBarOneItem_fga2s_49{justify-content:flex-end}}._rightBar_fga2s_39{flex:1 1 auto;justify-content:flex-end;align-items:center;flex-direction:row}._search_fga2s_60{flex:1;max-width:35%}@container (max-width: 575.98px){._search_fga2s_60{max-width:80%}}._tagList_fga2s_70{display:flex;flex-direction:row;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;gap:var(--spacer-md, calc(var(--space-unit, 1em) * .75));padding-bottom:var(--spacer-md, calc(var(--space-unit, 1em) * .75))}@container (max-width: 575.98px){._tagList_fga2s_70{gap:var(--spacer-sm, calc(var(--space-unit, 1em) * .5))}}._tagItem_fga2s_85{display:flex!important;color:var(--text-secondary, #5F5F5F);cursor:pointer;white-space:nowrap}._select_fga2s_92{max-width:300px}@container (max-width: 575.98px){._select_fga2s_92{max-width:300px}}