@apple-pie/slice 0.1.10 → 0.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +96 -176
- package/dist/cjs/chunks/{Avatar-Czt-12Ih.js → Avatar-CUaQ3kN1.js} +5 -5
- package/dist/cjs/chunks/{AvatarGroup-CGH2zY7a.js → AvatarGroup-B3M7o4Hh.js} +23 -20
- package/dist/cjs/chunks/{Button-mVVfNCqC.js → Button-DXvjvGtY.js} +12 -11
- package/dist/cjs/chunks/{ButtonBar-CFAb4bfQ.js → ButtonBar-BZ6sme27.js} +7 -7
- package/dist/cjs/chunks/{Camera-BGV_tNUP.js → Camera-rVC4KI4v.js} +1 -1
- package/dist/cjs/chunks/{CheckBox-DyOgP15i.js → CheckBox-DQRLqTAK.js} +1 -1
- package/dist/cjs/chunks/{Chip-Z8erRdWG.js → Chip-Pv9-KTnh.js} +11 -10
- package/dist/cjs/chunks/{DivInput-DdZA8S1k.js → DivInput-DO3Dgbjp.js} +4 -4
- package/dist/cjs/chunks/{DropDown-Ce8aU2va.js → DropDown-C3AZ5b_b.js} +49 -50
- package/dist/cjs/chunks/{ErrorSummary-By4CjJ9a.js → ErrorSummary-BTgAd3sK.js} +47 -25
- package/dist/cjs/chunks/{FileList-CCAtVNDo.js → FileList-BHwBIics.js} +4 -4
- package/dist/cjs/chunks/{Grouper-BbovOSYw.js → Grouper-D4yyHHkM.js} +1 -1
- package/dist/cjs/chunks/{Icon-N0YJuKQf.js → Icon-D1EB8S5r.js} +6 -5
- package/dist/cjs/chunks/{IconButton-BXotgG2u.js → IconButton-B07Ttxbr.js} +11 -11
- package/dist/cjs/chunks/Label-CTzvGcds.js +102 -0
- package/dist/cjs/chunks/{Pager-Da9AqSFN.js → Pager-BN37VYEC.js} +1 -1
- package/dist/cjs/chunks/{ProgressIndicator-CyFcr6Dk.js → ProgressIndicator-BGqIwycX.js} +1 -1
- package/dist/cjs/chunks/{PromptInput-D317oh1e.js → PromptInput-z6TuhHsG.js} +1 -1
- package/dist/cjs/chunks/{RadioButton-B8GIKGm-.js → RadioButton-DuIsM4lu.js} +21 -17
- package/dist/cjs/chunks/{RadioButtonList-3o1IvhdC.js → RadioButtonList-bu11ILyw.js} +20 -13
- package/dist/cjs/chunks/{Switch-BiTshVLM.js → Switch-Cbn0ql3B.js} +15 -11
- package/dist/cjs/chunks/{TabBar-DZ2y7owf.js → TabBar-Bcq_n4Mk.js} +8 -8
- package/dist/cjs/chunks/{TextArea-2w4E6d2H.js → TextArea-BSKbDOEt.js} +17 -24
- package/dist/cjs/chunks/{TextField-BAcYBHb1.js → TextField-BNacOZVx.js} +50 -70
- package/dist/cjs/chunks/{Tip-59T3TUN4.js → Tip-DAxoyMyA.js} +7 -6
- package/dist/cjs/chunks/{Toast-skIBuJ3b.js → Toast-CZzAWG0S.js} +1 -1
- package/dist/cjs/chunks/{UploadArea-CxYAAs7Q.js → UploadArea-CKuE4rtg.js} +6 -6
- package/dist/cjs/chunks/{localDBStore-BHEk_9fJ.js → localDBStore-zyDhaEiP.js} +42 -10
- package/dist/cjs/components/Avatar/index.js +1 -1
- package/dist/cjs/components/AvatarGroup/index.js +2 -2
- package/dist/cjs/components/Button/index.js +3 -3
- package/dist/cjs/components/ButtonBar/index.js +2 -2
- package/dist/cjs/components/Camera/index.js +3 -3
- package/dist/cjs/components/CheckBox/index.js +2 -2
- package/dist/cjs/components/Chip/index.js +2 -2
- package/dist/cjs/components/DivInput/index.js +1 -1
- package/dist/cjs/components/DropDown/index.js +2 -2
- package/dist/cjs/components/ErrorSummary/index.js +6 -2
- package/dist/cjs/components/FileList/index.js +3 -3
- package/dist/cjs/components/Grouper/index.js +2 -2
- package/dist/cjs/components/Icon/index.js +1 -1
- package/dist/cjs/components/IconButton/index.js +2 -2
- package/dist/cjs/components/Label/index.js +7 -5
- package/dist/cjs/components/Pager/index.js +1 -1
- package/dist/cjs/components/Progress/index.js +2 -2
- package/dist/cjs/components/PromptInput/index.js +5 -5
- package/dist/cjs/components/RadioButton/index.js +2 -2
- package/dist/cjs/components/RadioButtonList/index.js +3 -3
- package/dist/cjs/components/Switch/index.js +1 -1
- package/dist/cjs/components/TabBar/index.js +3 -3
- package/dist/cjs/components/TextArea/index.js +4 -4
- package/dist/cjs/components/Textfield/index.js +5 -6
- package/dist/cjs/components/Tip/index.js +1 -1
- package/dist/cjs/components/Toast/index.js +2 -2
- package/dist/cjs/components/UploadArea/index.js +8 -7
- package/dist/cjs/hooks/useObserveTheme.js +5 -5
- package/dist/cjs/hooks/useTheme.js +2 -2
- package/dist/cjs/index.js +8 -3
- package/dist/cjs/providers/ThemeProvider.js +12 -9
- package/dist/cjs/providers.js +4 -3
- package/dist/cjs/stores/LocalDB.js +1 -1
- package/dist/cjs/stores.js +1 -1
- package/dist/esm/chunks/{Avatar-DCCbj2eA.mjs → Avatar-CSLVUF_y.mjs} +5 -5
- package/dist/esm/chunks/{AvatarGroup-BaD2Xmda.mjs → AvatarGroup--ELW-bO1.mjs} +23 -20
- package/dist/esm/chunks/{Button-m0XAJsq5.mjs → Button-daLv0i7S.mjs} +13 -12
- package/dist/esm/chunks/{ButtonBar-CNQHRn77.mjs → ButtonBar-DXK8meQq.mjs} +7 -7
- package/dist/esm/chunks/{Camera-7TuowjX_.mjs → Camera-BqmVsVKy.mjs} +2 -2
- package/dist/esm/chunks/{CheckBox-DO9hTdv8.mjs → CheckBox-BsaYFNC6.mjs} +1 -1
- package/dist/esm/chunks/{Chip-BqneFUOR.mjs → Chip-BRZeD1OX.mjs} +11 -10
- package/dist/esm/chunks/{DivInput-Ch9XjfWd.mjs → DivInput-DeSpC8Wm.mjs} +4 -4
- package/dist/esm/chunks/{DropDown-Cvf2d_3u.mjs → DropDown-DOJvg96J.mjs} +48 -51
- package/dist/esm/chunks/{ErrorSummary-S0shes-m.mjs → ErrorSummary-CHLkvdHk.mjs} +52 -27
- package/dist/esm/chunks/{FileList-Ckix8gUY.mjs → FileList-5LElsgoE.mjs} +5 -5
- package/dist/esm/chunks/{Grouper-B_FutfjV.mjs → Grouper-DR14qDXP.mjs} +1 -1
- package/dist/esm/chunks/{Icon-C92f63Ib.mjs → Icon-CUSQtytG.mjs} +6 -5
- package/dist/esm/chunks/{IconButton-4O5S9S9G.mjs → IconButton-DG69Vlhj.mjs} +11 -11
- package/dist/esm/chunks/Label-CRsE7o3D.mjs +115 -0
- package/dist/esm/chunks/{Pager-BlLYeA2F.mjs → Pager-BYT7_mCb.mjs} +1 -1
- package/dist/esm/chunks/{ProgressIndicator-CfM2c4ty.mjs → ProgressIndicator-D7paCpgY.mjs} +1 -1
- package/dist/esm/chunks/{PromptInput-C6liKbFf.mjs → PromptInput-CpxUcInZ.mjs} +3 -3
- package/dist/esm/chunks/{RadioButton-COEnChNW.mjs → RadioButton-B5ZF5oJ_.mjs} +22 -18
- package/dist/esm/chunks/{RadioButtonList-De3rbLQb.mjs → RadioButtonList-D9ZAZgkK.mjs} +22 -13
- package/dist/esm/chunks/{Switch-Cv6LABsW.mjs → Switch-BhCOo5Lu.mjs} +15 -11
- package/dist/esm/chunks/{TabBar-qiozE5zA.mjs → TabBar-BK7OcjPl.mjs} +9 -9
- package/dist/esm/chunks/{TextArea-DKRF4Irr.mjs → TextArea-BmsEj6IA.mjs} +18 -25
- package/dist/esm/chunks/{TextField-CGOR6507.mjs → TextField-DWPpevsj.mjs} +54 -72
- package/dist/esm/chunks/{Tip-CroDIKO4.mjs → Tip-BnKB9qMi.mjs} +7 -6
- package/dist/esm/chunks/{Toast-CM493gMR.mjs → Toast-DPHLwDES.mjs} +1 -1
- package/dist/esm/chunks/{UploadArea-DNAH-Bu5.mjs → UploadArea-DPiOaNpc.mjs} +9 -9
- package/dist/esm/chunks/{localDBStore-C-Ch2MFq.mjs → localDBStore-B4jkR5Jx.mjs} +42 -10
- package/dist/esm/components/Avatar/index.mjs +1 -1
- package/dist/esm/components/AvatarGroup/index.mjs +2 -2
- package/dist/esm/components/Button/index.mjs +3 -3
- package/dist/esm/components/ButtonBar/index.mjs +2 -2
- package/dist/esm/components/Camera/index.mjs +3 -3
- package/dist/esm/components/CheckBox/index.mjs +2 -2
- package/dist/esm/components/Chip/index.mjs +2 -2
- package/dist/esm/components/DivInput/index.mjs +1 -1
- package/dist/esm/components/DropDown/index.mjs +5 -5
- package/dist/esm/components/ErrorSummary/index.mjs +21 -1
- package/dist/esm/components/FileList/index.mjs +3 -3
- package/dist/esm/components/Grouper/index.mjs +2 -2
- package/dist/esm/components/Icon/index.mjs +1 -1
- package/dist/esm/components/IconButton/index.mjs +2 -2
- package/dist/esm/components/Label/index.mjs +1 -19
- package/dist/esm/components/Pager/index.mjs +1 -1
- package/dist/esm/components/Progress/index.mjs +2 -2
- package/dist/esm/components/PromptInput/index.mjs +5 -5
- package/dist/esm/components/RadioButton/index.mjs +2 -2
- package/dist/esm/components/RadioButtonList/index.mjs +4 -4
- package/dist/esm/components/Switch/index.mjs +1 -1
- package/dist/esm/components/TabBar/index.mjs +3 -3
- package/dist/esm/components/TextArea/index.mjs +4 -4
- package/dist/esm/components/Textfield/index.mjs +7 -7
- package/dist/esm/components/Tip/index.mjs +1 -1
- package/dist/esm/components/Toast/index.mjs +2 -2
- package/dist/esm/components/UploadArea/index.mjs +7 -7
- package/dist/esm/hooks/useObserveTheme.mjs +5 -5
- package/dist/esm/hooks/useTheme.mjs +2 -2
- package/dist/esm/index.mjs +27 -27
- package/dist/esm/providers/ThemeProvider.mjs +13 -8
- package/dist/esm/providers.mjs +2 -0
- package/dist/esm/stores/LocalDB.mjs +1 -1
- package/dist/esm/stores.mjs +1 -1
- package/dist/types/components/Avatar/_types.d.ts +3 -0
- package/dist/types/components/AvatarGroup/_types.d.ts +3 -0
- package/dist/types/components/Button/Button.d.ts +6 -2
- package/dist/types/components/Button/_types.d.ts +3 -1
- package/dist/types/components/ButtonBar/_types.d.ts +4 -0
- package/dist/types/components/Chip/_types.d.ts +5 -1
- package/dist/types/components/DivInput/_types.d.ts +2 -0
- package/dist/types/components/DropDown/DropDown.d.ts +2 -3
- package/dist/types/components/DropDown/_types.d.ts +20 -14
- package/dist/types/components/ErrorSummary/ErrorSummary.d.ts +1 -2
- package/dist/types/components/ErrorSummary/_types.d.ts +7 -4
- package/dist/types/components/FileList/_types.d.ts +1 -0
- package/dist/types/components/IconButton/_types.d.ts +3 -0
- package/dist/types/components/Label/Label.d.ts +1 -1
- package/dist/types/components/Label/_types.d.ts +18 -8
- package/dist/types/components/Label/index.d.ts +1 -0
- package/dist/types/components/RadioButton/RadioButton.d.ts +1 -1
- package/dist/types/components/RadioButton/_types.d.ts +12 -11
- package/dist/types/components/RadioButtonList/RadioButtonList.d.ts +1 -1
- package/dist/types/components/RadioButtonList/_types.d.ts +8 -6
- package/dist/types/components/Switch/Switch.d.ts +1 -1
- package/dist/types/components/Switch/_types.d.ts +7 -3
- package/dist/types/components/TabBar/_types.d.ts +2 -2
- package/dist/types/components/TextArea/_types.d.ts +5 -6
- package/dist/types/components/Textfield/_types.d.ts +14 -20
- package/dist/types/components/Tip/_types.d.ts +4 -1
- package/dist/types/components/UploadArea/UploadArea.d.ts +10 -2
- package/dist/types/components/UploadArea/_types.d.ts +5 -1
- package/dist/types/components/playHelpers.d.ts +1 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/providers/ThemeProvider.d.ts +1 -1
- package/dist/types/utils/functions/files.d.ts +1 -1
- package/package.json +1 -1
- package/dist/cjs/chunks/Label-CZvJbATa.js +0 -118
- package/dist/esm/chunks/Label-7ezP3eHw.mjs +0 -131
- package/dist/types/components/Switch/Switch.stories.d.ts +0 -5
|
@@ -10,7 +10,7 @@ import { B as Badge } from "./Badge-DyICxZP2.mjs";
|
|
|
10
10
|
|
|
11
11
|
import { D as Dot } from "./Dot-CLGwQu-i.mjs";
|
|
12
12
|
|
|
13
|
-
import { I as Icon } from "./Icon-
|
|
13
|
+
import { I as Icon } from "./Icon-CUSQtytG.mjs";
|
|
14
14
|
|
|
15
15
|
import { T as ToolTipType } from "./sharedTypes-tn9-uJvb.mjs";
|
|
16
16
|
|
|
@@ -18,15 +18,15 @@ import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
|
|
|
18
18
|
|
|
19
19
|
var css_button = "IconButton-module_button__rziqa flexBox-module_row__z24tF", css_label = "IconButton-module_label__qWGFD flexBox-module_row__z24tF type-module_body-l-regular__lOYbg", css_icon = "IconButton-module_icon__2DDWy flexBox-module_row__z24tF", css_count = "IconButton-module_count__6r373 flexBox-module_row__z24tF";
|
|
20
20
|
|
|
21
|
-
styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__ZAFft {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__s3KvF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__Lhqqq {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__vRHSP {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__tjdFc {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__Iy-VX {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__LuQBA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__uW1on {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__UBcvQ {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__lOYbg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__BqRC7 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__Fh2dt {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__pF2kC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__BeyrH {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__Ruknj {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__z8L3G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__0O3g6 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__KXxEB {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__cJeEA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__eRe05 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Xmwtf {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__5q1m3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__k9VFV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.IconButton-module_button__rziqa {\n\tposition: relative;\n\tbackground: var(--ib-bg);\n\tborder-radius: var(--ib-border-radius);\n\tborder: var(--ib-border) solid var(--core-outline-primary);\n\tgap: 6px;\n\tcursor: pointer;\n\tappearance: none;\n\t-webkit-appearance: none;\n\tbackground-image: none;\n\toutline: none;\n\t&:hover {\n\t\tbackground: var(--ib-bg-hover);\n\t}\n}\n\n.IconButton-module_label__qWGFD {\n\tcolor: var(--ib-color);\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n\tword-break: break-all;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: 1;\n\t-webkit-box-orient: vertical;\n}\n\n.IconButton-module_icon__2DDWy {\n\tmin-height: var(--ib-icon-size);\n\theight: var(--ib-icon-size);\n\tmin-width: var(--ib-icon-size);\n\twidth: var(--ib-icon-size);\n}\n\n.IconButton-module_count__6r373 {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\ttransform: translateX(5px) translateY(-2px);\n}\n");
|
|
21
|
+
styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__ZAFft {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__s3KvF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__Lhqqq {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__vRHSP {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__tjdFc {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__Iy-VX {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__LuQBA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__uW1on {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__UBcvQ {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__lOYbg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__BqRC7 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__Fh2dt {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__pF2kC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__BeyrH {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__Ruknj {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__z8L3G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__0O3g6 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__KXxEB {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__cJeEA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__eRe05 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Xmwtf {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__5q1m3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__k9VFV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.IconButton-module_button__rziqa {\n\tposition: relative;\n\tbackground: var(--ib-bg-color);\n\tborder-radius: var(--ib-border-radius);\n\tborder: var(--ib-border) solid var(--core-outline-primary);\n\tgap: 6px;\n\tcursor: pointer;\n\tappearance: none;\n\t-webkit-appearance: none;\n\tbackground-image: none;\n\toutline: none;\n\t&:hover {\n\t\tbackground: var(--ib-bg-color-hover);\n\t}\n}\n\n.IconButton-module_label__qWGFD {\n\tcolor: var(--ib-color);\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n\tword-break: break-all;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: 1;\n\t-webkit-box-orient: vertical;\n}\n\n.IconButton-module_icon__2DDWy {\n\tmin-height: var(--ib-icon-size);\n\theight: var(--ib-icon-size);\n\tmin-width: var(--ib-icon-size);\n\twidth: var(--ib-icon-size);\n}\n\n.IconButton-module_count__6r373 {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\ttransform: translateX(5px) translateY(-2px);\n}\n");
|
|
22
22
|
|
|
23
23
|
const IconButton = React.memo(props => {
|
|
24
|
-
const {frameSize: frameSize = 36, iconSize: iconSize = 20, icon: icon = "more", borderRadius: borderRadius = 4, tooltip: tooltip, color: color, colorOn: colorOn, bgColor: bgColor = "var(--core-surface-secondary)", bgColorHover: bgColorHover = "var(--core-outline-primary)", bgColorOn: bgColorOn = "var(--core-outline-primary)", transition: transition, variants: variants, initial: initial, animate: animate, exit: exit, fillColor: fillColor, label: label, hover: hover, count: count = 0, toggle: toggle = !
|
|
24
|
+
const {frameSize: frameSize = 36, iconSize: iconSize = 20, icon: icon = "more", borderRadius: borderRadius = 4, border: border = !1, tooltip: tooltip, color: color, colorOn: colorOn, bgColor: bgColor = "var(--core-surface-secondary)", bgColorHover: bgColorHover = "var(--core-outline-primary)", bgColorOn: bgColorOn = "var(--core-outline-primary)", iconColor: iconColor = "var(--core-text-primary)", iconColorOn: iconColorOn = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-primary)", transition: transition, variants: variants, initial: initial, animate: animate, exit: exit, fillColor: fillColor, label: label, hover: hover = !0, count: count = 0, toggle: toggle = !1, toggleIcon: toggleIcon = !1, isToggled: isToggled = !1, disabled: disabled = !1, showDot: showDot = !1, onClick: onClick = () => null, onToolTip: onToolTip = () => null} = props, divAttributes = __rest(props, [ "frameSize", "iconSize", "icon", "borderRadius", "border", "tooltip", "color", "colorOn", "bgColor", "bgColorHover", "bgColorOn", "iconColor", "iconColorOn", "iconColorHover", "transition", "variants", "initial", "animate", "exit", "fillColor", "label", "hover", "count", "toggle", "toggleIcon", "isToggled", "disabled", "showDot", "onClick", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = useRef(null), [on, setOn] = useState(isToggled), [hovered, setHovered] = useState(!1);
|
|
25
25
|
useEffect(() => setOn(isToggled), [ isToggled ]);
|
|
26
26
|
const handleClick = useCallback(e => {
|
|
27
|
-
disabled || (tooltip && onToolTip(null), setOn(!on), onClick(e));
|
|
28
|
-
}, [ disabled, tooltip, onToolTip, on, onClick ]), handleMouseEnter = useCallback(e => {
|
|
29
|
-
if (!(null == ref ? void 0 : ref.current) || !tooltip) return;
|
|
27
|
+
disabled || (tooltip && onToolTip(null), toggle && setOn(!on), onClick(e));
|
|
28
|
+
}, [ disabled, tooltip, onToolTip, on, onClick, toggle ]), handleMouseEnter = useCallback(e => {
|
|
29
|
+
if (setHovered(!0), !(null == ref ? void 0 : ref.current) || !tooltip) return;
|
|
30
30
|
const tip = {
|
|
31
31
|
type: ToolTipType.button,
|
|
32
32
|
payload: {
|
|
@@ -37,10 +37,10 @@ const IconButton = React.memo(props => {
|
|
|
37
37
|
};
|
|
38
38
|
onToolTip(tip);
|
|
39
39
|
}, [ tooltip, onToolTip ]), handleMouseLeave = useCallback(() => {
|
|
40
|
-
tooltip && onToolTip(null);
|
|
41
|
-
}, [ tooltip, onToolTip ]),
|
|
42
|
-
"--ib-bg": bgColorNormal,
|
|
43
|
-
"--ib-bg-hover": bgHoverColor,
|
|
40
|
+
setHovered(!1), tooltip && onToolTip(null);
|
|
41
|
+
}, [ tooltip, onToolTip ]), bgColorNormal = useMemo(() => on && toggle ? bgColorOn : null != bgColor ? bgColor : "var(--core-surface-secondary)", [ toggle, bgColorOn, bgColor, on ]), bgHoverColor = useMemo(() => hover && on ? bgColorOn : hover ? bgColorHover : null != bgColor ? bgColor : "transparent", [ hover, bgColor, bgColorOn, bgColorHover, on ]), textColor = useMemo(() => toggle && on ? colorOn : null != color ? color : "var(--core-text-primary)", [ toggle, on, colorOn, color ]), setIconColor = useMemo(() => toggle && on ? iconColorOn : hovered ? iconColorHover : null != iconColor ? iconColor : "var(--core-text-primary)", [ toggle, on, iconColorOn, iconColor, iconColorHover, hovered ]), cssVars = useMemo(() => ({
|
|
42
|
+
"--ib-bg-color": bgColorNormal,
|
|
43
|
+
"--ib-bg-color-hover": bgHoverColor,
|
|
44
44
|
"--ib-icon-size": `${null != frameSize ? frameSize : 0}px`,
|
|
45
45
|
"--ib-border-radius": `${null != borderRadius ? borderRadius : 0}px`,
|
|
46
46
|
"--ib-border": border ? "1px" : 0,
|
|
@@ -70,7 +70,7 @@ const IconButton = React.memo(props => {
|
|
|
70
70
|
},
|
|
71
71
|
children: jsx(Icon, {
|
|
72
72
|
name: icon,
|
|
73
|
-
strokeColor:
|
|
73
|
+
strokeColor: setIconColor,
|
|
74
74
|
fillColor: fillColor,
|
|
75
75
|
disabled: disabled,
|
|
76
76
|
size: iconSize,
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import { _ as __rest } from "./tslib.es6-c-7TIv71.mjs";
|
|
2
|
+
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
|
|
5
|
+
import { useCallback, useMemo } from "react";
|
|
6
|
+
|
|
7
|
+
import { s as setStyle } from "./misc-N8KLjOXc.mjs";
|
|
8
|
+
|
|
9
|
+
import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
|
|
10
|
+
|
|
11
|
+
var LabelBackground, css = {
|
|
12
|
+
label: "Label-module_label__RaRvM",
|
|
13
|
+
button: "Label-module_button__N8bcQ type-module_body-m-regular__LuQBA",
|
|
14
|
+
xs: "Label-module_xs__K9Ai6 type-module_body-xs-regular__ZAFft",
|
|
15
|
+
s: "Label-module_s__Zh8Gp type-module_body-s-regular__vRHSP",
|
|
16
|
+
m: "Label-module_m__BJtGL type-module_body-m-regular__LuQBA",
|
|
17
|
+
l: "Label-module_l__t70tt type-module_body-l-regular__lOYbg"
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
function resolveSemanticBackground(backgroundColor) {
|
|
21
|
+
if (!backgroundColor || "string" != typeof backgroundColor) return;
|
|
22
|
+
const semanticKey = backgroundColor;
|
|
23
|
+
return LabelBackground[semanticKey] ? LabelBackground[semanticKey] : Object.values(LabelBackground).find(value => value === backgroundColor);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function Label(props) {
|
|
27
|
+
const {children: children, label: label, backgroundColor: backgroundColor, borderWidth: borderWidth, borderSize: borderSize = 1, borderColor: borderColor = "var(--core-outline-primary)", bgColor: bgColor = "transparent", borderRadius: borderRadius = 4, padding: padding, textColor: textColor = "var(--core-text-primary)", textSize: textSize = "s", onClick: onClick} = props, divAttributes = __rest(props, [ "children", "label", "backgroundColor", "borderWidth", "borderSize", "borderColor", "bgColor", "borderRadius", "padding", "textColor", "textSize", "onClick" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", isInteractive = Boolean(onClick), resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, handleClick = useCallback(e => {
|
|
28
|
+
isInteractive && (null == onClick || onClick(e));
|
|
29
|
+
}, [ isInteractive, onClick ]), setBgColor = useMemo(() => {
|
|
30
|
+
if (!resolvedBackgroundColor) return "transparent";
|
|
31
|
+
const fill = resolveSemanticBackground(resolvedBackgroundColor);
|
|
32
|
+
if (!fill) return resolvedBackgroundColor;
|
|
33
|
+
switch (fill) {
|
|
34
|
+
case "red":
|
|
35
|
+
return "var(--feedback-warning)";
|
|
36
|
+
|
|
37
|
+
case "green":
|
|
38
|
+
return "var(--feedback-positive)";
|
|
39
|
+
|
|
40
|
+
case "yellow":
|
|
41
|
+
return "var(--array-yellow)";
|
|
42
|
+
|
|
43
|
+
case "grey":
|
|
44
|
+
case "white":
|
|
45
|
+
return "var(--core-surface-secondary)";
|
|
46
|
+
|
|
47
|
+
case "lightGrey":
|
|
48
|
+
return "var(--core-button-disabled)";
|
|
49
|
+
|
|
50
|
+
case "blue":
|
|
51
|
+
return "var(--core-button-primary)";
|
|
52
|
+
|
|
53
|
+
default:
|
|
54
|
+
return "var(--core-surface-primary)";
|
|
55
|
+
}
|
|
56
|
+
}, [ resolvedBackgroundColor ]), setBorderColor = useMemo(() => {
|
|
57
|
+
if (!resolvedBackgroundColor) return borderColor;
|
|
58
|
+
const fill = resolveSemanticBackground(resolvedBackgroundColor);
|
|
59
|
+
if (!fill) return borderColor;
|
|
60
|
+
switch (fill) {
|
|
61
|
+
case "red":
|
|
62
|
+
return "var(--feedback-warning)";
|
|
63
|
+
|
|
64
|
+
case "green":
|
|
65
|
+
return "var(--feedback-positive)";
|
|
66
|
+
|
|
67
|
+
case "yellow":
|
|
68
|
+
return "var(--array-yellow-label)";
|
|
69
|
+
|
|
70
|
+
case "grey":
|
|
71
|
+
case "lightGrey":
|
|
72
|
+
case "white":
|
|
73
|
+
return "var(--core-outline-primary)";
|
|
74
|
+
|
|
75
|
+
case "blue":
|
|
76
|
+
return "var(--core-button-primary)";
|
|
77
|
+
|
|
78
|
+
default:
|
|
79
|
+
return "var(--core-surface-primary)";
|
|
80
|
+
}
|
|
81
|
+
}, [ resolvedBackgroundColor, borderColor ]), setPadding = useMemo(() => padding ? setStyle(padding) : "2px 4px", [ padding ]), cssVars = useMemo(() => ({
|
|
82
|
+
"--label-padding": setPadding,
|
|
83
|
+
"--label-border-radius": setStyle(borderRadius),
|
|
84
|
+
"--label-cursor": onClick ? "pointer" : "default",
|
|
85
|
+
"--label-color": textColor,
|
|
86
|
+
"--label-bg-color": setBgColor,
|
|
87
|
+
"--label-border-size": setStyle(resolvedBorderWidth),
|
|
88
|
+
"--label-border-color": setBorderColor
|
|
89
|
+
}), [ setPadding, borderRadius, onClick, textColor, setBorderColor, setBgColor, resolvedBorderWidth ]);
|
|
90
|
+
return isInteractive ? jsx("button", Object.assign({
|
|
91
|
+
id: divId,
|
|
92
|
+
type: "button",
|
|
93
|
+
className: `${css.button} ${css[textSize]}${divClass}`,
|
|
94
|
+
style: Object.assign(Object.assign({}, divStyle), cssVars),
|
|
95
|
+
"aria-label": "Label button",
|
|
96
|
+
onClick: e => handleClick(e)
|
|
97
|
+
}, rest, {
|
|
98
|
+
children: null != children ? children : label
|
|
99
|
+
})) : jsx("span", Object.assign({
|
|
100
|
+
id: divId,
|
|
101
|
+
className: `${css.label} ${css[textSize]}${divClass}`,
|
|
102
|
+
style: Object.assign(Object.assign({}, divStyle), cssVars)
|
|
103
|
+
}, rest, {
|
|
104
|
+
children: null != children ? children : label
|
|
105
|
+
}));
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
styleInject(".type-module_body-xs-regular__ZAFft {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__s3KvF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__Lhqqq {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__vRHSP {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__tjdFc {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__Iy-VX {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__LuQBA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__uW1on {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__UBcvQ {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__lOYbg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__BqRC7 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__Fh2dt {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__pF2kC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__BeyrH {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__Ruknj {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__z8L3G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__0O3g6 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__KXxEB {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__cJeEA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__eRe05 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Xmwtf {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__5q1m3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__k9VFV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.Label-module_label__RaRvM {\n\tline-height: 1em;\n\twhite-space: nowrap;\n\tpadding: var(--label-padding) !important;\n\twidth: min-content;\n\tcolor: var(--label-color);\n\tborder-radius: var(--label-border-radius);\n\tborder: var(--label-border-size) solid var(--label-border-color);\n\tcursor: default;\n\tbackground: var(--label-bg-color);\n}\n\n.Label-module_button__N8bcQ {\n\tdisplay: inline-flex !important;\n\tbackground: var(--label-bg-color);\n\tcolor: var(--label-color);\n\tborder-radius: var(--label-border-radius);\n\tborder: var(--label-border-size) solid var(--label-border-color);\n\twidth: min-content;\n\tcursor: pointer;\n\tappearance: none;\n\t-webkit-appearance: none;\n\tbackground-image: none;\n\toutline: none;\n}\n\n.Label-module_xs__K9Ai6 {\n}\n\n.Label-module_s__Zh8Gp {\n}\n\n.Label-module_m__BJtGL {\n}\n\n.Label-module_l__t70tt {\n}\n"),
|
|
109
|
+
function(LabelBackground) {
|
|
110
|
+
LabelBackground.red = "red", LabelBackground.yellow = "yellow", LabelBackground.green = "green",
|
|
111
|
+
LabelBackground.blue = "blue", LabelBackground.grey = "grey", LabelBackground.lightGrey = "lightGrey",
|
|
112
|
+
LabelBackground.white = "white";
|
|
113
|
+
}(LabelBackground || (LabelBackground = {}));
|
|
114
|
+
|
|
115
|
+
export { Label as L, LabelBackground as a };
|
|
@@ -10,7 +10,7 @@ import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
|
|
|
10
10
|
|
|
11
11
|
var css_wrapper = "Pager-module_wrapper__eutVg flexBox-module_row__z24tF", css_bullet = "Pager-module_bullet__TxyR5 flexBox-module_row__z24tF", css_selected = "Pager-module_selected__C6xbR";
|
|
12
12
|
|
|
13
|
-
styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n.Pager-module_wrapper__eutVg {\n\tgap: var(--pager-gap);\n\twidth: 100%;\n\tz-index: var(--elevation-status);\n}\n\n.Pager-module_bullet__TxyR5 {\n\twidth: var(--pager-size);\n\theight: var(--pager-size);\n\tmax-width: var(--pager-size);\n\tmax-height: var(--pager-size);\n\tbackground: var(--pager-color);\n\tborder-radius: 100%;\n\tborder: 0;\n\tcursor: pointer;\n\ttransition: background var(--motion-water-duration) var(--motion-water) 0s;\n\t&:hover {\n\t\tbackground: var(--pager-colorHover);\n\t}\n}\n\n.Pager-module_selected__C6xbR {\n\tbackground: var(--pager-colorOn);\n\t&:hover {\n\t\tbackground: var(--pager-colorOn);\n\t}\n}\n");
|
|
13
|
+
styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n.Pager-module_wrapper__eutVg {\n\tgap: var(--pager-gap);\n\twidth: 100%;\n\tz-index: var(--elevation-status);\n}\n\n.Pager-module_bullet__TxyR5 {\n\twidth: var(--pager-size);\n\theight: var(--pager-size);\n\tmax-width: var(--pager-size);\n\tmax-height: var(--pager-size);\n\tbackground: var(--pager-color);\n\tborder-radius: 100%;\n\tborder: 0;\n\tcursor: pointer;\n\toutline: none;\n\ttransition: background var(--motion-water-duration) var(--motion-water) 0s;\n\t&:hover {\n\t\tbackground: var(--pager-colorHover);\n\t}\n}\n\n.Pager-module_selected__C6xbR {\n\tbackground: var(--pager-colorOn);\n\t&:hover {\n\t\tbackground: var(--pager-colorOn);\n\t}\n}\n");
|
|
14
14
|
|
|
15
15
|
const Pager = React.memo(props => {
|
|
16
16
|
const {size: size = 8, index: index = 0, color: color, colorHover: colorHover, colorOn: colorOn, pages: pages = 2, gap: gap = 4, onChange: onChange = () => null} = props, divAttributes = __rest(props, [ "size", "index", "color", "colorHover", "colorOn", "pages", "gap", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [selected, setSelected] = useState(index), bullets = useMemo(() => Array.from({
|
|
@@ -10,7 +10,7 @@ import "../hooks/useWindow.mjs";
|
|
|
10
10
|
|
|
11
11
|
import { _ as __rest } from "./tslib.es6-c-7TIv71.mjs";
|
|
12
12
|
|
|
13
|
-
import { I as Icon } from "./Icon-
|
|
13
|
+
import { I as Icon } from "./Icon-CUSQtytG.mjs";
|
|
14
14
|
|
|
15
15
|
import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
|
|
16
16
|
|
|
@@ -8,11 +8,11 @@ import "../theme/colors.mjs";
|
|
|
8
8
|
|
|
9
9
|
import "../hooks/useWindow.mjs";
|
|
10
10
|
|
|
11
|
-
import { B as Button } from "./Button-
|
|
11
|
+
import { B as Button } from "./Button-daLv0i7S.mjs";
|
|
12
12
|
|
|
13
|
-
import {
|
|
13
|
+
import { F as FileList } from "./FileList-5LElsgoE.mjs";
|
|
14
14
|
|
|
15
|
-
import {
|
|
15
|
+
import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
|
|
16
16
|
|
|
17
17
|
var css = {
|
|
18
18
|
wrapperBg: "PromptInput-module_wrapperBg__zabZq flexBox-module_columnStart__C7P44",
|
|
@@ -6,20 +6,22 @@ import React, { useState, useEffect, useCallback, useMemo } from "react";
|
|
|
6
6
|
|
|
7
7
|
import { s as setStyle } from "./misc-N8KLjOXc.mjs";
|
|
8
8
|
|
|
9
|
-
import { I as Icon } from "./Icon-
|
|
9
|
+
import { I as Icon } from "./Icon-CUSQtytG.mjs";
|
|
10
10
|
|
|
11
11
|
import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
|
|
12
12
|
|
|
13
|
-
var css_wrapper = "RadioButton-module_wrapper__-pWRe flexBox-module_row__z24tF", css_radioIcon = "RadioButton-module_radioIcon__I27Xv flexBox-module_column__ezvMq", css_radioTitle = "RadioButton-module_radioTitle__zCQII flexBox-module_rowStart__4tcxS type-module_body-m-regular__LuQBA",
|
|
13
|
+
var css_wrapper = "RadioButton-module_wrapper__-pWRe flexBox-module_row__z24tF", css_radioIcon = "RadioButton-module_radioIcon__I27Xv flexBox-module_column__ezvMq", css_radioTitle = "RadioButton-module_radioTitle__zCQII flexBox-module_rowStart__4tcxS type-module_body-m-regular__LuQBA", css_radioContent = "RadioButton-module_radioContent__38xVx flexBox-module_columnStart__C7P44";
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
const RadioButton = React.memo(props => {
|
|
18
|
-
const {option: option, selected: selected = !1, controlType: controlType = "radio", deselect: deselect = !0, tabIndex: tabIndex = 1, wrap: wrap = !1, list: list = !1, hideRadio: hideRadio = !1, toggleIcon: toggleIcon = !0, noFrame: noFrame = !0, checkedIcon: checkedIcon = "check circle", iconColor: iconColor, gap: gap = 6, onChange: onChange = () => null} = props, divAttributes = __rest(props, [ "option", "selected", "controlType", "deselect", "tabIndex", "wrap", "list", "hideRadio", "toggleIcon", "noFrame", "checkedIcon", "iconColor", "gap", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [isSelected, setIsSelected] = useState(selected);
|
|
15
|
+
function RadioButtonComponent(props) {
|
|
16
|
+
const {label: label, children: children, fieldName: fieldName, value: value, selected: selected = !1, controlType: controlType = "radio", deselect: deselect = !0, tabIndex: tabIndex = 0, wrap: wrap = !1, list: list = !1, hideRadio: hideRadio = !1, noFrame: noFrame = !0, icon: icon = "circle", checkedIcon: checkedIcon = "check circle", iconColor: iconColor, gap: gap = 6, onChange: onChange = () => null} = props, divAttributes = __rest(props, [ "label", "children", "fieldName", "value", "selected", "controlType", "deselect", "tabIndex", "wrap", "list", "hideRadio", "noFrame", "icon", "checkedIcon", "iconColor", "gap", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [isSelected, setIsSelected] = useState(selected);
|
|
19
17
|
useEffect(() => setIsSelected(selected), [ selected ]);
|
|
20
18
|
const handleChange = useCallback(() => {
|
|
21
|
-
isSelected && !deselect || (setIsSelected(!isSelected), onChange(
|
|
22
|
-
|
|
19
|
+
isSelected && !deselect || (setIsSelected(!isSelected), onChange({
|
|
20
|
+
fieldName: fieldName,
|
|
21
|
+
label: label,
|
|
22
|
+
value: value
|
|
23
|
+
}, !isSelected));
|
|
24
|
+
}, [ isSelected, deselect, onChange, fieldName, label, value ]), setAriaLabel = useMemo(() => label || (children && "string" == typeof children ? children : "Radio Button"), [ label, children ]), setIconColor = useMemo(() => iconColor || "var(--core-text-primary)", [ iconColor ]), iconName = useMemo(() => isSelected ? checkedIcon : icon, [ isSelected, checkedIcon, icon ]), setFlex = useMemo(() => list ? "unset" : wrap ? "40%" : "1", [ list, wrap ]), cssVars = useMemo(() => ({
|
|
23
25
|
"--rb-max-width": wrap ? "50%" : "100%",
|
|
24
26
|
"--rb-flex": setFlex,
|
|
25
27
|
"--rb-padding": noFrame ? "0" : "8px 16px 8px 10px",
|
|
@@ -35,27 +37,29 @@ const RadioButton = React.memo(props => {
|
|
|
35
37
|
onClick: handleChange,
|
|
36
38
|
role: controlType,
|
|
37
39
|
tabIndex: tabIndex,
|
|
38
|
-
"aria-label":
|
|
40
|
+
"aria-label": setAriaLabel,
|
|
39
41
|
"aria-checked": isSelected
|
|
40
42
|
}, rest, {
|
|
41
|
-
children: [
|
|
43
|
+
children: [ !hideRadio && jsx("div", {
|
|
42
44
|
className: css_radioIcon,
|
|
43
45
|
children: jsx(Icon, {
|
|
44
46
|
name: iconName,
|
|
45
47
|
strokeColor: setIconColor,
|
|
46
48
|
size: 20
|
|
47
49
|
})
|
|
48
|
-
}),
|
|
50
|
+
}), jsx("div", {
|
|
49
51
|
className: css_radioContent,
|
|
50
|
-
children:
|
|
52
|
+
children: jsx("div", {
|
|
51
53
|
className: css_radioTitle,
|
|
52
|
-
children:
|
|
53
|
-
})
|
|
54
|
-
className: css_radioSummary,
|
|
55
|
-
children: option.description
|
|
56
|
-
}) ]
|
|
54
|
+
children: null != label ? label : children
|
|
55
|
+
})
|
|
57
56
|
}) ]
|
|
58
57
|
}));
|
|
59
|
-
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__ZAFft {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__s3KvF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__Lhqqq {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__vRHSP {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__tjdFc {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__Iy-VX {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__LuQBA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__uW1on {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__UBcvQ {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__lOYbg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__BqRC7 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__Fh2dt {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__pF2kC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__BeyrH {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__Ruknj {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__z8L3G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__0O3g6 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__KXxEB {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__cJeEA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__eRe05 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Xmwtf {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__5q1m3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__k9VFV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.RadioButton-module_wrapper__-pWRe {\n\tpadding: var(--rb-padding) !important;\n\tmax-width: var(--rb-max-width);\n\tflex: var(--rb-flex);\n\tborder: var(--rb-border);\n\tbackground: var(--rb-bg);\n\tgap: var(--rb-gap);\n\tborder-radius: 8px;\n\tcursor: pointer;\n\ttransition: all var(--motion-water-duration) var(--motion-water) 0s;\n\tuser-select: none;\n\t-webkit-user-select: none;\n\tappearance: none;\n\t-webkit-appearance: none;\n\tbackground-image: none;\n\toutline: none;\n}\n\n.RadioButton-module_radioIcon__I27Xv {\n\twidth: 20px;\n\theight: 20px;\n\tmax-width: 20px;\n\tmax-height: 20px;\n\tmin-height: 20px;\n\tmin-width: 20px;\n}\n\n.RadioButton-module_radioTitle__zCQII {\n\tcolor: var(--core-text-primary);\n\twhite-space: nowrap;\n\tflex: 1;\n}\n\n.RadioButton-module_radioSummary__PNr0Z {\n\tcolor: var(--core-text-primary);\n\tflex: 1;\n}\n\n.RadioButton-module_radioContent__38xVx {\n\twidth: 100%;\n}\n"),
|
|
61
|
+
RadioButtonComponent.displayName = "RadioButton";
|
|
62
|
+
|
|
63
|
+
const RadioButton = React.memo(RadioButtonComponent);
|
|
60
64
|
|
|
61
65
|
export { RadioButton as R };
|
|
@@ -4,16 +4,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
4
4
|
|
|
5
5
|
import React, { useId, useState, useEffect, useCallback, useMemo } from "react";
|
|
6
6
|
|
|
7
|
-
import {
|
|
7
|
+
import { s as setStyle } from "./misc-N8KLjOXc.mjs";
|
|
8
|
+
|
|
9
|
+
import { R as RadioButton } from "./RadioButton-B5ZF5oJ_.mjs";
|
|
8
10
|
|
|
9
11
|
import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
|
|
10
12
|
|
|
11
13
|
var css_wrapper = "RadioButtonList-module_wrapper__wnq1-", css_column = "RadioButtonList-module_column__Bq16e flexBox-module_columnStart__C7P44", css_row = "RadioButtonList-module_row__D3szq flexBox-module_rowStart__4tcxS";
|
|
12
14
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
const RadioButtonList = React.memo(props => {
|
|
16
|
-
const {options: options = [], selectedIndexes: selectedIndexes = null, selectedOptions: selectedOptions = null, label: label = null, deselect: deselect = !1, multiSelect: multiSelect = !1, wrap: wrap = !1, tabIndexSeed: tabIndexSeed = 0, spacer: spacer = "none", custom: custom = 0, gap: gap = 16, hideRadio: hideRadio = !1, noFrame: noFrame = !0, toggleIcon: toggleIcon = !0, iconColor: iconColor, checkedIcon: checkedIcon = "check circle", iconSelectedColor: iconSelectedColor, onChange: onChange = () => null} = props, divAttributes = __rest(props, [ "options", "selectedIndexes", "selectedOptions", "label", "deselect", "multiSelect", "wrap", "tabIndexSeed", "spacer", "custom", "gap", "hideRadio", "noFrame", "toggleIcon", "iconColor", "checkedIcon", "iconSelectedColor", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", labelId = useId(), [selected, setSelected] = useState(selectedIndexes);
|
|
15
|
+
function RadioButtonListComponent(props) {
|
|
16
|
+
const {width: width = "min-content", options: options = [], selectedIndexes: selectedIndexes = null, selectedOptions: selectedOptions = null, label: label = null, deselect: deselect = !1, multiSelect: multiSelect = !1, wrap: wrap = !1, tabIndexSeed: tabIndexSeed = 0, spacer: spacer = "none", custom: custom = 0, gap: gap = 16, hideRadio: hideRadio = !1, noFrame: noFrame = !0, toggleIcon: toggleIcon = !0, iconColor: iconColor, icon: icon = "circle", checkedIcon: checkedIcon = "check circle", iconSelectedColor: iconSelectedColor, onChange: onChange = () => null} = props, divAttributes = __rest(props, [ "width", "options", "selectedIndexes", "selectedOptions", "label", "deselect", "multiSelect", "wrap", "tabIndexSeed", "spacer", "custom", "gap", "hideRadio", "noFrame", "toggleIcon", "iconColor", "icon", "checkedIcon", "iconSelectedColor", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", labelId = useId(), [selected, setSelected] = useState(selectedIndexes);
|
|
17
17
|
useEffect(() => setSelected(selectedIndexes), [ selectedIndexes ]), useEffect(() => {
|
|
18
18
|
if (!selectedOptions || !options) return;
|
|
19
19
|
const selections = [];
|
|
@@ -40,7 +40,9 @@ const RadioButtonList = React.memo(props => {
|
|
|
40
40
|
}, [ options, onChange ]), handleChange = useCallback((selection, state) => {
|
|
41
41
|
multiSelect ? doMultiSelection(selection, state) : doSingleSelection(selection, state);
|
|
42
42
|
}, [ multiSelect, doMultiSelection, doSingleSelection ]), renderedOptions = useMemo(() => options.map((option, i) => jsx(RadioButton, {
|
|
43
|
-
|
|
43
|
+
label: option.label,
|
|
44
|
+
value: option.value,
|
|
45
|
+
fieldName: option.fieldName,
|
|
44
46
|
selected: isSelected(i),
|
|
45
47
|
controlType: multiSelect ? "checkbox" : "radio",
|
|
46
48
|
deselect: deselect,
|
|
@@ -48,15 +50,17 @@ const RadioButtonList = React.memo(props => {
|
|
|
48
50
|
noFrame: noFrame,
|
|
49
51
|
hideRadio: hideRadio,
|
|
50
52
|
onChange: (_option, state) => handleChange(i, state),
|
|
51
|
-
tabIndex:
|
|
52
|
-
toggleIcon: toggleIcon,
|
|
53
|
+
tabIndex: tabIndexSeed ? tabIndexSeed + i : 0,
|
|
53
54
|
iconColor: isSelected(i) ? iconSelectedColor : iconColor,
|
|
54
|
-
checkedIcon: checkedIcon
|
|
55
|
-
|
|
55
|
+
checkedIcon: checkedIcon,
|
|
56
|
+
icon: icon,
|
|
57
|
+
list: !0
|
|
58
|
+
}, `${option.fieldName}_${i}`)), [ options, isSelected, multiSelect, deselect, wrap, noFrame, hideRadio, handleChange, iconColor, iconSelectedColor, checkedIcon, tabIndexSeed, icon ]), margin = useMemo(() => "none" === spacer ? 0 : "custom" === spacer ? custom : 0, [ spacer, custom ]), cssVars = useMemo(() => ({
|
|
56
59
|
"--rb-list-flex-wrap": wrap ? "wrap" : "nowrap",
|
|
57
60
|
"--rb-list-margin-bottom": noFrame ? 0 : `${margin}px`,
|
|
58
|
-
"--rb-gap": `${gap}px
|
|
59
|
-
|
|
61
|
+
"--rb-gap": `${gap}px`,
|
|
62
|
+
"--rb-list-width": setStyle(width)
|
|
63
|
+
}), [ wrap, margin, gap, noFrame, width ]);
|
|
60
64
|
return jsxs("div", Object.assign({
|
|
61
65
|
id: divId,
|
|
62
66
|
className: `${css_wrapper} ${noFrame ? css_column : css_row}${divClass}`,
|
|
@@ -69,6 +73,11 @@ const RadioButtonList = React.memo(props => {
|
|
|
69
73
|
children: label
|
|
70
74
|
}), renderedOptions ]
|
|
71
75
|
}));
|
|
72
|
-
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n.RadioButtonList-module_wrapper__wnq1- {\n\talign-items: flex-start;\n\twidth: var(--rb-list-width);\n\tflex-wrap: var(--rb-list-flex-wrap);\n\tmargin-bottom: var(--rb-list-margin-bottom);\n\tgap: var(--rb-gap);\n}\n\n.RadioButtonList-module_column__Bq16e {\n}\n\n.RadioButtonList-module_row__D3szq {\n}\n"),
|
|
79
|
+
RadioButtonListComponent.displayName = "RadioButtonList";
|
|
80
|
+
|
|
81
|
+
const RadioButtonList = React.memo(RadioButtonListComponent);
|
|
73
82
|
|
|
74
83
|
export { RadioButtonList as R };
|
|
@@ -10,25 +10,23 @@ import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
|
|
|
10
10
|
|
|
11
11
|
var css_wrapper = "Switch-module_wrapper__kudO9 flexBox-module_row__z24tF", css_knob = "Switch-module_knob__vKNOc flexBox-module_row__z24tF";
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
const Switch = React.memo(props => {
|
|
16
|
-
const {state: state = !1, height: height = 22, width: width = 44, padding: padding = 3, bgColorOn: bgColorOn = "var(--feedback-positive)", bgColorOff: bgColorOff = "var(--core-text-disabled)", knobColor: knobColor = "var(--core-surface-primary)", onChange: onChange = () => null} = props, divAttributes = __rest(props, [ "state", "height", "width", "padding", "bgColorOn", "bgColorOff", "knobColor", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [on, setOn] = useState(state);
|
|
13
|
+
function SwitchComponent(props) {
|
|
14
|
+
const {fieldName: fieldName, state: state = !1, value: value, height: height = 22, width: width = 44, padding: padding = 3, backgroundColorOn: backgroundColorOn, backgroundColorOff: backgroundColorOff, bgColorOn: bgColorOn = "var(--feedback-positive)", bgColorOff: bgColorOff = "var(--core-text-disabled)", knobColor: knobColor = "var(--core-surface-primary)", onChange: onChange = () => null} = props, divAttributes = __rest(props, [ "fieldName", "state", "value", "height", "width", "padding", "backgroundColorOn", "backgroundColorOff", "bgColorOn", "bgColorOff", "knobColor", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [on, setOn] = useState(state), resolvedBackgroundColorOn = null != backgroundColorOn ? backgroundColorOn : bgColorOn, resolvedBackgroundColorOff = null != backgroundColorOff ? backgroundColorOff : bgColorOff;
|
|
17
15
|
useEffect(() => {
|
|
18
16
|
setOn(state);
|
|
19
17
|
}, [ state ]);
|
|
20
18
|
const handleClick = useCallback(() => {
|
|
21
|
-
setOn(!on), onChange(!on);
|
|
22
|
-
}, [ on, onChange ]),
|
|
23
|
-
justifyContent: on ? "flex-end" : "flex-start"
|
|
24
|
-
}), [ on ]), cssVars = useMemo(() => ({
|
|
19
|
+
setOn(!on), onChange(value, !on);
|
|
20
|
+
}, [ on, onChange, value ]), cssVars = useMemo(() => ({
|
|
25
21
|
"--switch-width": `${width}px`,
|
|
26
22
|
"--switch-height": `${height}px`,
|
|
27
23
|
"--switch-padding": `${padding}px`,
|
|
28
24
|
"--switch-knob-size": height - 2 * padding + "px",
|
|
29
25
|
"--switch-knob-color": knobColor,
|
|
30
|
-
"--switch-bg-color": on ?
|
|
31
|
-
}), [ width, height, padding,
|
|
26
|
+
"--switch-bg-color": on ? resolvedBackgroundColorOn : resolvedBackgroundColorOff
|
|
27
|
+
}), [ width, height, padding, resolvedBackgroundColorOff, resolvedBackgroundColorOn, on, knobColor ]), justify = useMemo(() => ({
|
|
28
|
+
justifyContent: on ? "flex-end" : "flex-start"
|
|
29
|
+
}), [ on ]);
|
|
32
30
|
return jsx(motion.button, Object.assign({
|
|
33
31
|
id: divId,
|
|
34
32
|
type: "button",
|
|
@@ -36,6 +34,7 @@ const Switch = React.memo(props => {
|
|
|
36
34
|
style: Object.assign(Object.assign(Object.assign({}, divStyle), justify), cssVars),
|
|
37
35
|
onClick: handleClick,
|
|
38
36
|
role: "switch",
|
|
37
|
+
"aria-label": null != fieldName ? fieldName : "Switch",
|
|
39
38
|
"aria-checked": on
|
|
40
39
|
}, rest, {
|
|
41
40
|
children: jsx(motion.div, {
|
|
@@ -43,6 +42,11 @@ const Switch = React.memo(props => {
|
|
|
43
42
|
layout: "preserve-aspect"
|
|
44
43
|
})
|
|
45
44
|
}));
|
|
46
|
-
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n.Switch-module_wrapper__kudO9 {\n\tpadding: var(--switch-padding) !important;\n\twidth: var(--switch-width);\n\theight: var(--switch-height);\n\tborder-radius: 100px;\n\tcursor: pointer;\n\tbackground: var(--switch-bg-color);\n\ttransition: background var(--motion-water-duration) var(--motion-water) 0s;\n\tappearance: none;\n\t-webkit-appearance: none;\n\tborder: 0;\n\toutline: none;\n}\n\n.Switch-module_knob__vKNOc {\n\twidth: var(--switch-knob-size);\n\theight: var(--switch-knob-size);\n\tbackground: var(--switch-knob-color);\n\tborder-radius: 100%;\n}\n"),
|
|
48
|
+
SwitchComponent.displayName = "Switch";
|
|
49
|
+
|
|
50
|
+
const Switch = React.memo(SwitchComponent);
|
|
47
51
|
|
|
48
52
|
export { Switch as S };
|
|
@@ -12,9 +12,9 @@ import "../hooks/useWindow.mjs";
|
|
|
12
12
|
|
|
13
13
|
import { B as Badge } from "./Badge-DyICxZP2.mjs";
|
|
14
14
|
|
|
15
|
-
import { I as Icon } from "./Icon-
|
|
15
|
+
import { I as Icon } from "./Icon-CUSQtytG.mjs";
|
|
16
16
|
|
|
17
|
-
import { I as IconButton } from "./IconButton-
|
|
17
|
+
import { I as IconButton } from "./IconButton-DG69Vlhj.mjs";
|
|
18
18
|
|
|
19
19
|
import { T as ToolTipType } from "./sharedTypes-tn9-uJvb.mjs";
|
|
20
20
|
|
|
@@ -25,15 +25,15 @@ var css_wrapper = "TabBar-module_wrapper__cyOR1 flexBox-module_rowStart__4tcxS",
|
|
|
25
25
|
styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__ZAFft {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__s3KvF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__Lhqqq {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__vRHSP {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__tjdFc {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__Iy-VX {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__LuQBA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__uW1on {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__UBcvQ {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__lOYbg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__BqRC7 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__Fh2dt {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__pF2kC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__BeyrH {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__Ruknj {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__z8L3G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__0O3g6 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__KXxEB {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__cJeEA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__eRe05 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Xmwtf {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__5q1m3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__k9VFV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.TabBar-module_wrapper__cyOR1 {\n\tgap: var(--tab-bar-gap);\n\tborder-bottom: var(--tab-bar-border-bottom) solid var(--core-outline-primary);\n\theight: var(--tab-bar-height);\n\twidth: var(--tab-bar-width);\n\tcursor: pointer;\n}\n\n.TabBar-module_option__gYjDf {\n\tgap: var(--tab-bar-option-gap);\n\tcolor: var(--tab-bar-option-color);\n\tpadding: var(--tab-bar-option-padding) !important;\n\theight: 100%;\n\twidth: var(--tab-bar-option-width);\n\tflex: var(--tab-bar-option-flex);\n\twhite-space: nowrap;\n\tbox-shadow: 0 var(--tab-bar-option-border) 0 0 var(--core-text-special);\n\tcursor: var(--tab-bar-option-cursor);\n\t-webkit-user-select: none;\n\tuser-select: none;\n\tappearance: none;\n\t-webkit-appearance: none;\n\tbackground-image: none;\n\tbackground-color: transparent;\n\tborder: 0;\n\toutline: none;\n\ttext-align: left;\n}\n\n.TabBar-module_icon__JDgG3 {\n\tmax-height: var(--tab-bar-icon-size);\n\tmin-height: var(--tab-bar-icon-size);\n\tmax-width: var(--tab-bar-icon-size);\n\tmin-width: var(--tab-bar-icon-size);\n}\n\n.TabBar-module_close__bvSBh {\n\theight: 100%;\n\tpadding: var(--tab-bar-close-padding) !important;\n\tborder-left: 1px solid var(--core-outline-primary);\n\twidth: min-content;\n}\n");
|
|
26
26
|
|
|
27
27
|
const placeholderOptions = [ {
|
|
28
|
-
name: "
|
|
28
|
+
name: "Light",
|
|
29
29
|
value: "Option 1",
|
|
30
|
-
icon:
|
|
30
|
+
icon: "circle"
|
|
31
31
|
}, {
|
|
32
|
-
name: "
|
|
32
|
+
name: "Dark",
|
|
33
33
|
value: "Option 2",
|
|
34
|
-
icon: "
|
|
34
|
+
icon: "target"
|
|
35
35
|
} ], TabBar = React.memo(props => {
|
|
36
|
-
const {options: options = placeholderOptions, selected: selected = 0, border: border = !0, underline: underline = !0, height: height = "100%", width: width = "100%", tabWidth: tabWidth = "
|
|
36
|
+
const {options: options = placeholderOptions, selected: selected = 0, border: border = !0, underline: underline = !0, height: height = "100%", width: width = "100%", tabWidth: tabWidth = "fill", padding: padding = 8, iconSize: iconSize = 20, iconGap: iconGap = 8, tabGap: tabGap = 0, disabled: disabled = !1, hasClose: hasClose = !1, closeWidth: closeWidth = "auto", selectedValue: selectedValue = null, onChange: onChange = () => null, onTabChange: onTabChange = () => null, onClose: onClose = () => null, onToolTip: onToolTip = () => null} = props, divAttributes = __rest(props, [ "options", "selected", "border", "underline", "height", "width", "tabWidth", "padding", "iconSize", "iconGap", "tabGap", "disabled", "hasClose", "closeWidth", "selectedValue", "onChange", "onTabChange", "onClose", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [index, setIndex] = useState(selected), optionRefs = useRef([]);
|
|
37
37
|
useEffect(() => {
|
|
38
38
|
let selectedIndex = 0;
|
|
39
39
|
selectedValue && options ? (selectedIndex = options.findIndex(option => option.value === selectedValue),
|
|
@@ -119,7 +119,7 @@ const placeholderOptions = [ {
|
|
|
119
119
|
TabBar.displayName = "TabBar";
|
|
120
120
|
|
|
121
121
|
const Option = React.memo(props => {
|
|
122
|
-
const theme = useTheme(), {label: label = "Option", value: value = 0, icon: icon = null, selected: selected = !1, onClick: onClick = () => null, onToolTip: onToolTip = () => null, padding: padding = 8, iconSize: iconSize = 20, iconGap: iconGap = 6, disabled: disabled = !1, showToolTip: showToolTip = null, underline: underline = !0, tabWidth: tabWidth = "
|
|
122
|
+
const theme = useTheme(), {label: label = "Option", value: value = 0, icon: icon = null, selected: selected = !1, onClick: onClick = () => null, onToolTip: onToolTip = () => null, padding: padding = 8, iconSize: iconSize = 20, iconGap: iconGap = 6, disabled: disabled = !1, showToolTip: showToolTip = null, underline: underline = !0, tabWidth: tabWidth = "fill", count: count = 0, onKeyDown: onKeyDown = () => null, buttonRef: buttonRef} = props, ref = useRef(null), strokeColor = useMemo(() => !disabled && selected ? theme.current.colors["core-text-special"] : disabled ? theme.current.colors["core-text-disabled"] : theme.current.colors["core-text-primary"], [ disabled, selected, theme ]), handleMouseOver = useCallback(e => {
|
|
123
123
|
if (onToolTip(null), showToolTip && ref.current) {
|
|
124
124
|
const tip = {
|
|
125
125
|
type: ToolTipType.button,
|
|
@@ -133,7 +133,7 @@ const Option = React.memo(props => {
|
|
|
133
133
|
}
|
|
134
134
|
}, [ showToolTip, onToolTip ]), handleMouseLeave = useCallback(() => {
|
|
135
135
|
showToolTip && onToolTip(null);
|
|
136
|
-
}, [ showToolTip, onToolTip ]), textColor = useMemo(() => disabled ? "var(--core-text-disabled)" : selected ? "var(--core-text-special)" : "var(--core-text-primary)", [ disabled, selected ]), setTabWidth = useMemo(() => "
|
|
136
|
+
}, [ showToolTip, onToolTip ]), textColor = useMemo(() => disabled ? "var(--core-text-disabled)" : selected ? "var(--core-text-special)" : "var(--core-text-primary)", [ disabled, selected ]), setTabWidth = useMemo(() => "compact" === tabWidth ? "min-content" : "fill" === tabWidth ? "unset" : `${tabWidth}px`, [ tabWidth ]), setTabFlex = useMemo(() => "fill" === tabWidth ? "1" : "unset", [ tabWidth ]), setUnderline = useMemo(() => selected && underline && !disabled ? "1px" : "0", [ underline, disabled, selected ]), cssVars = useMemo(() => ({
|
|
137
137
|
"--tab-bar-option-border": setUnderline,
|
|
138
138
|
"--tab-bar-option-padding": `${padding}px`,
|
|
139
139
|
"--tab-bar-option-icon-size": `${iconSize}px`,
|