@apple-pie/slice 0.1.9 → 0.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/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-ID8wGXIa.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-CflUNqhY.js} +11 -10
- package/dist/cjs/chunks/{DivInput-DdZA8S1k.js → DivInput-DrwFMexA.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/{IndexedDB-BxQn7aHU.js → IndexedDB-BaVmQgkK.js} +12 -10
- 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-B-Wlfnhx.js → PromptInput-D0aehf9X.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-D7E8loob.js → TextArea-CEwhpWXT.js} +17 -24
- package/dist/cjs/chunks/{TextField-BAcYBHb1.js → TextField-Dl9sTcC4.js} +50 -70
- package/dist/cjs/chunks/{Tip-59T3TUN4.js → Tip-BTIo1xG2.js} +7 -6
- package/dist/cjs/chunks/{Toast-skIBuJ3b.js → Toast-CZzAWG0S.js} +1 -1
- package/dist/cjs/chunks/{UploadArea-Bfrwzo4O.js → UploadArea-z9-1YjIV.js} +6 -6
- package/dist/cjs/chunks/localDBStore-zyDhaEiP.js +289 -0
- 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 +7 -8
- package/dist/cjs/index.js +8 -3
- package/dist/cjs/stores/LocalDB.js +6 -5
- package/dist/cjs/stores.js +7 -7
- package/dist/cjs/utils/index.js +1 -1
- package/dist/cjs/utils/objects/index.js +1 -1
- package/dist/css/flexBox.module.css +85 -0
- package/dist/css/type.module.css +206 -0
- 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-D24zg6UY.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-DdgYV-Ct.mjs} +11 -10
- package/dist/esm/chunks/{DivInput-Ch9XjfWd.mjs → DivInput-B7sawFbK.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/{IndexedDB-CNOziQ6p.mjs → IndexedDB-CJgzPHPB.mjs} +12 -10
- 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-Cmist_vy.mjs → PromptInput-yf2ir2-x.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-Ff5hxF1H.mjs → TextArea-CWmzQA0V.mjs} +18 -25
- package/dist/esm/chunks/{TextField-CGOR6507.mjs → TextField-6Aq-AT47.mjs} +54 -72
- package/dist/esm/chunks/{Tip-CroDIKO4.mjs → Tip-DfmcLbBf.mjs} +7 -6
- package/dist/esm/chunks/{Toast-CM493gMR.mjs → Toast-DPHLwDES.mjs} +1 -1
- package/dist/esm/chunks/{UploadArea-6z-mVZs3.mjs → UploadArea-igD1l2Ht.mjs} +9 -9
- package/dist/esm/chunks/localDBStore-B4jkR5Jx.mjs +297 -0
- 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/index.mjs +27 -27
- package/dist/esm/stores/LocalDB.mjs +6 -2
- package/dist/esm/stores.mjs +6 -2
- package/dist/esm/utils/index.mjs +1 -1
- package/dist/esm/utils/objects/index.mjs +1 -1
- package/dist/types/components/Avatar/Avatar.d.ts +3 -0
- package/dist/types/components/Avatar/_types.d.ts +25 -0
- package/dist/types/components/Avatar/index.d.ts +2 -0
- package/dist/types/components/AvatarGroup/AvatarGroup.d.ts +3 -0
- package/dist/types/components/AvatarGroup/_types.d.ts +28 -0
- package/dist/types/components/AvatarGroup/index.d.ts +2 -0
- package/dist/types/components/Badge/Badge.d.ts +3 -0
- package/dist/types/components/Badge/_types.d.ts +8 -0
- package/dist/types/components/Badge/index.d.ts +2 -0
- package/dist/types/components/Button/Button.d.ts +80 -0
- package/dist/types/components/Button/_types.d.ts +47 -0
- package/dist/types/components/Button/index.d.ts +2 -0
- package/dist/types/components/ButtonBar/ButtonBar.d.ts +17 -0
- package/dist/types/components/ButtonBar/_types.d.ts +31 -0
- package/dist/types/components/ButtonBar/index.d.ts +2 -0
- package/dist/types/components/Camera/Camera.d.ts +11 -0
- package/dist/types/components/Camera/_types.d.ts +79 -0
- package/dist/types/components/Camera/index.d.ts +2 -0
- package/dist/types/components/CheckBox/CheckBox.d.ts +3 -0
- package/dist/types/components/CheckBox/_types.d.ts +11 -0
- package/dist/types/components/CheckBox/index.d.ts +2 -0
- package/dist/types/components/Chip/Chip.d.ts +3 -0
- package/dist/types/components/Chip/_types.d.ts +35 -0
- package/dist/types/components/Chip/index.d.ts +3 -0
- package/dist/types/components/DivInput/DivInput.d.ts +3 -0
- package/dist/types/components/DivInput/_types.d.ts +25 -0
- package/dist/types/components/DivInput/index.d.ts +2 -0
- package/dist/types/components/Dot/Dot.d.ts +3 -0
- package/dist/types/components/Dot/_types.d.ts +19 -0
- package/dist/types/components/Dot/index.d.ts +2 -0
- package/dist/types/components/DraggablePanel/DrggablePanel.d.ts +44 -0
- package/dist/types/components/DraggablePanel/_types.d.ts +5 -0
- package/dist/types/components/DraggablePanel/index.d.ts +1 -0
- package/dist/types/components/DropDown/DropDown.d.ts +3 -0
- package/dist/types/components/DropDown/_types.d.ts +40 -0
- package/dist/types/components/DropDown/index.d.ts +2 -0
- package/dist/types/components/ErrorSummary/ErrorSummary.d.ts +3 -0
- package/dist/types/components/ErrorSummary/_types.d.ts +15 -0
- package/dist/types/components/ErrorSummary/index.d.ts +2 -0
- package/dist/types/components/FileIcon/FileIcon.d.ts +3 -0
- package/dist/types/components/FileIcon/_types.d.ts +27 -0
- package/dist/types/components/FileIcon/fileIconRegistry.d.ts +4 -0
- package/dist/types/components/FileIcon/index.d.ts +3 -0
- package/dist/types/components/FileList/FileList.d.ts +3 -0
- package/dist/types/components/FileList/_types.d.ts +25 -0
- package/dist/types/components/FileList/index.d.ts +2 -0
- package/dist/types/components/FlexDiv/FlexDiv.d.ts +60 -0
- package/dist/types/components/FlexDiv/_types.d.ts +34 -0
- package/dist/types/components/FlexDiv/index.d.ts +2 -0
- package/dist/types/components/Grouper/Grouper.d.ts +3 -0
- package/dist/types/components/Grouper/_types.d.ts +20 -0
- package/dist/types/components/Grouper/index.d.ts +2 -0
- package/dist/types/components/Icon/Icon.d.ts +3 -0
- package/dist/types/components/Icon/_types.d.ts +131 -0
- package/dist/types/components/Icon/iconRegistry.d.ts +17 -0
- package/dist/types/components/Icon/index.d.ts +2 -0
- package/dist/types/components/IconButton/IconButton.d.ts +3 -0
- package/dist/types/components/IconButton/_types.d.ts +37 -0
- package/dist/types/components/IconButton/index.d.ts +2 -0
- package/dist/types/components/Label/Label.d.ts +2 -0
- package/dist/types/components/Label/_types.d.ts +26 -0
- package/dist/types/components/Label/index.d.ts +3 -0
- package/dist/types/components/Overlay/Overlay.d.ts +3 -0
- package/dist/types/components/Overlay/_types.d.ts +12 -0
- package/dist/types/components/Overlay/index.d.ts +2 -0
- package/dist/types/components/Pager/Pager.d.ts +3 -0
- package/dist/types/components/Pager/_types.d.ts +13 -0
- package/dist/types/components/Pager/index.d.ts +2 -0
- package/dist/types/components/Progress/DoneCheck/DoneCheck.d.ts +3 -0
- package/dist/types/components/Progress/DoneCheck/_types.d.ts +13 -0
- package/dist/types/components/Progress/ProgressIndicator/ProgressIndicator.d.ts +3 -0
- package/dist/types/components/Progress/ProgressIndicator/_types.d.ts +14 -0
- package/dist/types/components/Progress/index.d.ts +4 -0
- package/dist/types/components/PromptInput/PromptInput.d.ts +63 -0
- package/dist/types/components/PromptInput/_types.d.ts +35 -0
- package/dist/types/components/PromptInput/index.d.ts +2 -0
- package/dist/types/components/RadioButton/RadioButton.d.ts +3 -0
- package/dist/types/components/RadioButton/_types.d.ts +27 -0
- package/dist/types/components/RadioButton/index.d.ts +2 -0
- package/dist/types/components/RadioButtonList/RadioButtonList.d.ts +3 -0
- package/dist/types/components/RadioButtonList/_types.d.ts +26 -0
- package/dist/types/components/RadioButtonList/index.d.ts +2 -0
- package/dist/types/components/Slider/Slider.d.ts +3 -0
- package/dist/types/components/Slider/_types.d.ts +18 -0
- package/dist/types/components/Slider/index.d.ts +2 -0
- package/dist/types/components/Spacer/Spacer.d.ts +3 -0
- package/dist/types/components/Spacer/_types.d.ts +6 -0
- package/dist/types/components/Spacer/index.d.ts +2 -0
- package/dist/types/components/Switch/Switch.d.ts +3 -0
- package/dist/types/components/Switch/Switch.stories.d.ts +5 -0
- package/dist/types/components/Switch/_types.d.ts +17 -0
- package/dist/types/components/Switch/index.d.ts +2 -0
- package/dist/types/components/TabBar/TabBar.d.ts +3 -0
- package/dist/types/components/TabBar/_types.d.ts +52 -0
- package/dist/types/components/TabBar/index.d.ts +2 -0
- package/dist/types/components/TextArea/TextArea.d.ts +3 -0
- package/dist/types/components/TextArea/_types.d.ts +40 -0
- package/dist/types/components/TextArea/index.d.ts +2 -0
- package/dist/types/components/Textfield/TextField.d.ts +3 -0
- package/dist/types/components/Textfield/_types.d.ts +73 -0
- package/dist/types/components/Textfield/index.d.ts +2 -0
- package/dist/types/components/Tip/Tip.d.ts +3 -0
- package/dist/types/components/Tip/_types.d.ts +31 -0
- package/dist/types/components/Tip/index.d.ts +2 -0
- package/dist/types/components/Toast/Toast.d.ts +3 -0
- package/dist/types/components/Toast/_types.d.ts +24 -0
- package/dist/types/components/Toast/index.d.ts +2 -0
- package/dist/types/components/UploadArea/UploadArea.d.ts +62 -0
- package/dist/types/components/UploadArea/_types.d.ts +50 -0
- package/dist/types/components/UploadArea/index.d.ts +3 -0
- package/dist/types/components/playHelpers.d.ts +35 -0
- package/dist/types/components/sharedTypes.d.ts +21 -0
- package/dist/types/hooks/index.d.ts +9 -0
- package/dist/types/hooks/useDoubleClick/useDoubleClick.d.ts +1 -0
- package/dist/types/hooks/useKeyboardShortcuts/useKeyboardShortcuts.d.ts +9 -0
- package/dist/types/hooks/useLastUpdated/useLastUpdated.d.ts +4 -0
- package/dist/types/hooks/useLocalStore/useLocalStore.d.ts +1 -0
- package/dist/types/hooks/useObserveResize/useObserveResize.d.ts +9 -0
- package/dist/types/hooks/useObserveTheme/useObserveTheme.d.ts +2 -0
- package/dist/types/hooks/useTheme/useTheme.d.ts +47 -0
- package/dist/types/hooks/useToolTip/useToolTip.d.ts +6 -0
- package/dist/types/hooks/useTrackRenders/useTrackRenders.d.ts +5 -0
- package/dist/types/hooks/useWindow/useWindow.d.ts +43 -0
- package/dist/types/index.d.ts +75 -0
- package/dist/types/providers/ThemeProvider.d.ts +13 -0
- package/dist/types/providers/index.d.ts +1 -0
- package/dist/types/stores/LocalDB/_types.d.ts +43 -0
- package/dist/types/stores/LocalDB/index.d.ts +2 -0
- package/dist/types/stores/LocalDB/localDBStore.d.ts +18 -0
- package/dist/types/stores/SSE/_types.d.ts +17 -0
- package/dist/types/stores/SSE/index.d.ts +2 -0
- package/dist/types/stores/SSE/sseStore.d.ts +28 -0
- package/dist/types/stores/WS/_types.d.ts +17 -0
- package/dist/types/stores/WS/index.d.ts +2 -0
- package/dist/types/stores/WS/wsStore.d.ts +19 -0
- package/dist/types/stores/index.d.ts +6 -0
- package/dist/types/stores/tip/_types.d.ts +8 -0
- package/dist/types/stores/tip/index.d.ts +2 -0
- package/dist/types/stores/tip/tipStore.d.ts +12 -0
- package/dist/types/stores/toast/_types.d.ts +14 -0
- package/dist/types/stores/toast/index.d.ts +2 -0
- package/dist/types/stores/toast/toastStore.d.ts +12 -0
- package/dist/types/stores/uploads/_types.d.ts +16 -0
- package/dist/types/stores/uploads/index.d.ts +2 -0
- package/dist/types/stores/uploads/uploadsStore.d.ts +22 -0
- package/dist/types/stores/window/_types.d.ts +33 -0
- package/dist/types/stores/window/index.d.ts +3 -0
- package/dist/types/stores/window/windowStore.d.ts +25 -0
- package/dist/types/theme/colors/colors.d.ts +6 -0
- package/dist/types/theme/colors/types.d.ts +174 -0
- package/dist/types/theme/corners/corners.d.ts +2 -0
- package/dist/types/theme/corners/types.d.ts +10 -0
- package/dist/types/theme/elevations/_types.d.ts +10 -0
- package/dist/types/theme/elevations/elevations.d.ts +5 -0
- package/dist/types/theme/index.d.ts +9 -0
- package/dist/types/theme/motion/_types.d.ts +8 -0
- package/dist/types/theme/motion/motion.d.ts +5 -0
- package/dist/types/theme/themes.d.ts +16 -0
- package/dist/types/theme/type/type.d.ts +5 -0
- package/dist/types/theme/type/types.d.ts +25 -0
- package/dist/types/utils/functions/colors.d.ts +8 -0
- package/dist/types/utils/functions/debounce.d.ts +9 -0
- package/dist/types/utils/functions/files.d.ts +15 -0
- package/dist/types/utils/functions/misc.d.ts +61 -0
- package/dist/types/utils/index.d.ts +5 -0
- package/dist/types/utils/objects/IndexedDB/IndexedDB.d.ts +62 -0
- package/dist/types/utils/objects/SSEConnection/SSEConnection.d.ts +187 -0
- package/dist/types/utils/objects/WSConnection/WSConnection.d.ts +159 -0
- package/dist/types/utils/objects/index.d.ts +6 -0
- package/dist/types/workers/uploads/uploads-worker.d.ts +129 -0
- package/dist/types/workers/uploads/uploads.d.ts +1 -0
- package/package.json +1 -1
- package/dist/cjs/chunks/Label-CZvJbATa.js +0 -118
- package/dist/cjs/chunks/localDBStore-Cl1YFPIe.js +0 -182
- package/dist/esm/chunks/Label-7ezP3eHw.mjs +0 -131
- package/dist/esm/chunks/localDBStore-CbCoeN66.mjs +0 -186
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var LabelBackground, tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BTF7BCZW.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css = {
|
|
4
|
+
label: "Label-module_label__RaRvM",
|
|
5
|
+
button: "Label-module_button__N8bcQ type-module_body-m-regular__LuQBA",
|
|
6
|
+
xs: "Label-module_xs__K9Ai6 type-module_body-xs-regular__ZAFft",
|
|
7
|
+
s: "Label-module_s__Zh8Gp type-module_body-s-regular__vRHSP",
|
|
8
|
+
m: "Label-module_m__BJtGL type-module_body-m-regular__LuQBA",
|
|
9
|
+
l: "Label-module_l__t70tt type-module_body-l-regular__lOYbg"
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
function resolveSemanticBackground(backgroundColor) {
|
|
13
|
+
if (!backgroundColor || "string" != typeof backgroundColor) return;
|
|
14
|
+
const semanticKey = backgroundColor;
|
|
15
|
+
return exports.LabelBackground[semanticKey] ? exports.LabelBackground[semanticKey] : Object.values(exports.LabelBackground).find(value => value === backgroundColor);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
styleInject_es.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"),
|
|
19
|
+
exports.LabelBackground = void 0, (LabelBackground = exports.LabelBackground || (exports.LabelBackground = {})).red = "red",
|
|
20
|
+
LabelBackground.yellow = "yellow", LabelBackground.green = "green", LabelBackground.blue = "blue",
|
|
21
|
+
LabelBackground.grey = "grey", LabelBackground.lightGrey = "lightGrey", LabelBackground.white = "white",
|
|
22
|
+
exports.Label = function(props) {
|
|
23
|
+
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 = tslib_es6.__rest(props, [ "children", "label", "backgroundColor", "borderWidth", "borderSize", "borderColor", "bgColor", "borderRadius", "padding", "textColor", "textSize", "onClick" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__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 = React.useCallback(e => {
|
|
24
|
+
isInteractive && (null == onClick || onClick(e));
|
|
25
|
+
}, [ isInteractive, onClick ]), setBgColor = React.useMemo(() => {
|
|
26
|
+
if (!resolvedBackgroundColor) return "transparent";
|
|
27
|
+
const fill = resolveSemanticBackground(resolvedBackgroundColor);
|
|
28
|
+
if (!fill) return resolvedBackgroundColor;
|
|
29
|
+
switch (fill) {
|
|
30
|
+
case "red":
|
|
31
|
+
return "var(--feedback-warning)";
|
|
32
|
+
|
|
33
|
+
case "green":
|
|
34
|
+
return "var(--feedback-positive)";
|
|
35
|
+
|
|
36
|
+
case "yellow":
|
|
37
|
+
return "var(--array-yellow)";
|
|
38
|
+
|
|
39
|
+
case "grey":
|
|
40
|
+
case "white":
|
|
41
|
+
return "var(--core-surface-secondary)";
|
|
42
|
+
|
|
43
|
+
case "lightGrey":
|
|
44
|
+
return "var(--core-button-disabled)";
|
|
45
|
+
|
|
46
|
+
case "blue":
|
|
47
|
+
return "var(--core-button-primary)";
|
|
48
|
+
|
|
49
|
+
default:
|
|
50
|
+
return "var(--core-surface-primary)";
|
|
51
|
+
}
|
|
52
|
+
}, [ resolvedBackgroundColor ]), setBorderColor = React.useMemo(() => {
|
|
53
|
+
if (!resolvedBackgroundColor) return borderColor;
|
|
54
|
+
const fill = resolveSemanticBackground(resolvedBackgroundColor);
|
|
55
|
+
if (!fill) return borderColor;
|
|
56
|
+
switch (fill) {
|
|
57
|
+
case "red":
|
|
58
|
+
return "var(--feedback-warning)";
|
|
59
|
+
|
|
60
|
+
case "green":
|
|
61
|
+
return "var(--feedback-positive)";
|
|
62
|
+
|
|
63
|
+
case "yellow":
|
|
64
|
+
return "var(--array-yellow-label)";
|
|
65
|
+
|
|
66
|
+
case "grey":
|
|
67
|
+
case "lightGrey":
|
|
68
|
+
case "white":
|
|
69
|
+
return "var(--core-outline-primary)";
|
|
70
|
+
|
|
71
|
+
case "blue":
|
|
72
|
+
return "var(--core-button-primary)";
|
|
73
|
+
|
|
74
|
+
default:
|
|
75
|
+
return "var(--core-surface-primary)";
|
|
76
|
+
}
|
|
77
|
+
}, [ resolvedBackgroundColor, borderColor ]), setPadding = React.useMemo(() => padding ? misc.setStyle(padding) : "2px 4px", [ padding ]), cssVars = React.useMemo(() => ({
|
|
78
|
+
"--label-padding": setPadding,
|
|
79
|
+
"--label-border-radius": misc.setStyle(borderRadius),
|
|
80
|
+
"--label-cursor": onClick ? "pointer" : "default",
|
|
81
|
+
"--label-color": textColor,
|
|
82
|
+
"--label-bg-color": setBgColor,
|
|
83
|
+
"--label-border-size": misc.setStyle(resolvedBorderWidth),
|
|
84
|
+
"--label-border-color": setBorderColor
|
|
85
|
+
}), [ setPadding, borderRadius, onClick, textColor, setBorderColor, setBgColor, resolvedBorderWidth ]);
|
|
86
|
+
return isInteractive ? jsxRuntime.jsx("button", Object.assign({
|
|
87
|
+
id: divId,
|
|
88
|
+
type: "button",
|
|
89
|
+
className: `${css.button} ${css[textSize]}${divClass}`,
|
|
90
|
+
style: Object.assign(Object.assign({}, divStyle), cssVars),
|
|
91
|
+
"aria-label": "Label button",
|
|
92
|
+
onClick: e => handleClick(e)
|
|
93
|
+
}, rest, {
|
|
94
|
+
children: null != children ? children : label
|
|
95
|
+
})) : jsxRuntime.jsx("span", Object.assign({
|
|
96
|
+
id: divId,
|
|
97
|
+
className: `${css.label} ${css[textSize]}${divClass}`,
|
|
98
|
+
style: Object.assign(Object.assign({}, divStyle), cssVars)
|
|
99
|
+
}, rest, {
|
|
100
|
+
children: null != children ? children : label
|
|
101
|
+
}));
|
|
102
|
+
};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BTF7BCZW.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), 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";
|
|
4
4
|
|
|
5
|
-
styleInject_es.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");
|
|
5
|
+
styleInject_es.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");
|
|
6
6
|
|
|
7
7
|
const Pager = React.memo(props => {
|
|
8
8
|
const {size: size = 8, index: index = 0, color: color, colorHover: colorHover, colorOn: colorOn, pages: pages = 2, gap: gap = 4, onChange: onChange = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "size", "index", "color", "colorHover", "colorOn", "pages", "gap", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [selected, setSelected] = React.useState(index), bullets = React.useMemo(() => Array.from({
|
|
@@ -4,7 +4,7 @@ var jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_u
|
|
|
4
4
|
|
|
5
5
|
require("../theme/colors.js"), require("../hooks/useWindow.js");
|
|
6
6
|
|
|
7
|
-
var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), Icon = require("./Icon-
|
|
7
|
+
var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), Icon = require("./Icon-D1EB8S5r.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), react = require("motion/react"), css$1_wrapper = "DoneCheck-module_wrapper__AlISD flexBox-module_row__z24tF", css$1_icon = "DoneCheck-module_icon__bKaFp flexBox-module_row__z24tF";
|
|
8
8
|
|
|
9
9
|
styleInject_es.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.DoneCheck-module_wrapper__AlISD {\n\theight: var(--icon-height);\n\tmax-height: var(--icon-height);\n\twidth: var(--icon-width);\n\tmax-width: var(--icon-width);\n\toverflow: visible;\n}\n\n.DoneCheck-module_icon__bKaFp {\n\theight: var(--icon-height);\n\tmax-height: var(--icon-height);\n\twidth: var(--icon-width);\n\tmax-width: var(--icon-width);\n\tscale: var(--icon-scale);\n\ttransition: var(--icon-transition);\n}\n");
|
|
10
10
|
|
|
@@ -4,7 +4,7 @@ var jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_u
|
|
|
4
4
|
|
|
5
5
|
require("../theme/colors.js"), require("../hooks/useWindow.js");
|
|
6
6
|
|
|
7
|
-
var Button = require("./Button-
|
|
7
|
+
var Button = require("./Button-ID8wGXIa.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), FileList = require("./FileList-BHwBIics.js"), css = {
|
|
8
8
|
wrapperBg: "PromptInput-module_wrapperBg__zabZq flexBox-module_columnStart__C7P44",
|
|
9
9
|
bgRotate: "PromptInput-module_bgRotate__Um720",
|
|
10
10
|
textareaWrapper: "PromptInput-module_textareaWrapper__KusiV flexBox-module_columnStart__C7P44",
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BTF7BCZW.js"), Icon = require("./Icon-
|
|
3
|
+
var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BTF7BCZW.js"), Icon = require("./Icon-D1EB8S5r.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), 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";
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const RadioButton = React.memo(props => {
|
|
8
|
-
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 = tslib_es6.__rest(props, [ "option", "selected", "controlType", "deselect", "tabIndex", "wrap", "list", "hideRadio", "toggleIcon", "noFrame", "checkedIcon", "iconColor", "gap", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [isSelected, setIsSelected] = React.useState(selected);
|
|
5
|
+
function RadioButtonComponent(props) {
|
|
6
|
+
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 = tslib_es6.__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 = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [isSelected, setIsSelected] = React.useState(selected);
|
|
9
7
|
React.useEffect(() => setIsSelected(selected), [ selected ]);
|
|
10
8
|
const handleChange = React.useCallback(() => {
|
|
11
|
-
isSelected && !deselect || (setIsSelected(!isSelected), onChange(
|
|
12
|
-
|
|
9
|
+
isSelected && !deselect || (setIsSelected(!isSelected), onChange({
|
|
10
|
+
fieldName: fieldName,
|
|
11
|
+
label: label,
|
|
12
|
+
value: value
|
|
13
|
+
}, !isSelected));
|
|
14
|
+
}, [ isSelected, deselect, onChange, fieldName, label, value ]), setAriaLabel = React.useMemo(() => label || (children && "string" == typeof children ? children : "Radio Button"), [ label, children ]), setIconColor = React.useMemo(() => iconColor || "var(--core-text-primary)", [ iconColor ]), iconName = React.useMemo(() => isSelected ? checkedIcon : icon, [ isSelected, checkedIcon, icon ]), setFlex = React.useMemo(() => list ? "unset" : wrap ? "40%" : "1", [ list, wrap ]), cssVars = React.useMemo(() => ({
|
|
13
15
|
"--rb-max-width": wrap ? "50%" : "100%",
|
|
14
16
|
"--rb-flex": setFlex,
|
|
15
17
|
"--rb-padding": noFrame ? "0" : "8px 16px 8px 10px",
|
|
@@ -25,27 +27,29 @@ const RadioButton = React.memo(props => {
|
|
|
25
27
|
onClick: handleChange,
|
|
26
28
|
role: controlType,
|
|
27
29
|
tabIndex: tabIndex,
|
|
28
|
-
"aria-label":
|
|
30
|
+
"aria-label": setAriaLabel,
|
|
29
31
|
"aria-checked": isSelected
|
|
30
32
|
}, rest, {
|
|
31
|
-
children: [
|
|
33
|
+
children: [ !hideRadio && jsxRuntime.jsx("div", {
|
|
32
34
|
className: css_radioIcon,
|
|
33
35
|
children: jsxRuntime.jsx(Icon.Icon, {
|
|
34
36
|
name: iconName,
|
|
35
37
|
strokeColor: setIconColor,
|
|
36
38
|
size: 20
|
|
37
39
|
})
|
|
38
|
-
}), jsxRuntime.
|
|
40
|
+
}), jsxRuntime.jsx("div", {
|
|
39
41
|
className: css_radioContent,
|
|
40
|
-
children:
|
|
42
|
+
children: jsxRuntime.jsx("div", {
|
|
41
43
|
className: css_radioTitle,
|
|
42
|
-
children:
|
|
43
|
-
})
|
|
44
|
-
className: css_radioSummary,
|
|
45
|
-
children: option.description
|
|
46
|
-
}) ]
|
|
44
|
+
children: null != label ? label : children
|
|
45
|
+
})
|
|
47
46
|
}) ]
|
|
48
47
|
}));
|
|
49
|
-
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
styleInject_es.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"),
|
|
51
|
+
RadioButtonComponent.displayName = "RadioButton";
|
|
52
|
+
|
|
53
|
+
const RadioButton = React.memo(RadioButtonComponent);
|
|
50
54
|
|
|
51
55
|
exports.RadioButton = RadioButton;
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), RadioButton = require("./RadioButton-
|
|
3
|
+
var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BTF7BCZW.js"), RadioButton = require("./RadioButton-DuIsM4lu.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), 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";
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const RadioButtonList = React.memo(props => {
|
|
8
|
-
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 = tslib_es6.__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 = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", labelId = React.useId(), [selected, setSelected] = React.useState(selectedIndexes);
|
|
5
|
+
function RadioButtonListComponent(props) {
|
|
6
|
+
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 = tslib_es6.__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 = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", labelId = React.useId(), [selected, setSelected] = React.useState(selectedIndexes);
|
|
9
7
|
React.useEffect(() => setSelected(selectedIndexes), [ selectedIndexes ]), React.useEffect(() => {
|
|
10
8
|
if (!selectedOptions || !options) return;
|
|
11
9
|
const selections = [];
|
|
@@ -32,7 +30,9 @@ const RadioButtonList = React.memo(props => {
|
|
|
32
30
|
}, [ options, onChange ]), handleChange = React.useCallback((selection, state) => {
|
|
33
31
|
multiSelect ? doMultiSelection(selection, state) : doSingleSelection(selection, state);
|
|
34
32
|
}, [ multiSelect, doMultiSelection, doSingleSelection ]), renderedOptions = React.useMemo(() => options.map((option, i) => jsxRuntime.jsx(RadioButton.RadioButton, {
|
|
35
|
-
|
|
33
|
+
label: option.label,
|
|
34
|
+
value: option.value,
|
|
35
|
+
fieldName: option.fieldName,
|
|
36
36
|
selected: isSelected(i),
|
|
37
37
|
controlType: multiSelect ? "checkbox" : "radio",
|
|
38
38
|
deselect: deselect,
|
|
@@ -40,15 +40,17 @@ const RadioButtonList = React.memo(props => {
|
|
|
40
40
|
noFrame: noFrame,
|
|
41
41
|
hideRadio: hideRadio,
|
|
42
42
|
onChange: (_option, state) => handleChange(i, state),
|
|
43
|
-
tabIndex:
|
|
44
|
-
toggleIcon: toggleIcon,
|
|
43
|
+
tabIndex: tabIndexSeed ? tabIndexSeed + i : 0,
|
|
45
44
|
iconColor: isSelected(i) ? iconSelectedColor : iconColor,
|
|
46
|
-
checkedIcon: checkedIcon
|
|
47
|
-
|
|
45
|
+
checkedIcon: checkedIcon,
|
|
46
|
+
icon: icon,
|
|
47
|
+
list: !0
|
|
48
|
+
}, `${option.fieldName}_${i}`)), [ options, isSelected, multiSelect, deselect, wrap, noFrame, hideRadio, handleChange, iconColor, iconSelectedColor, checkedIcon, tabIndexSeed, icon ]), margin = React.useMemo(() => "none" === spacer ? 0 : "custom" === spacer ? custom : 0, [ spacer, custom ]), cssVars = React.useMemo(() => ({
|
|
48
49
|
"--rb-list-flex-wrap": wrap ? "wrap" : "nowrap",
|
|
49
50
|
"--rb-list-margin-bottom": noFrame ? 0 : `${margin}px`,
|
|
50
|
-
"--rb-gap": `${gap}px
|
|
51
|
-
|
|
51
|
+
"--rb-gap": `${gap}px`,
|
|
52
|
+
"--rb-list-width": misc.setStyle(width)
|
|
53
|
+
}), [ wrap, margin, gap, noFrame, width ]);
|
|
52
54
|
return jsxRuntime.jsxs("div", Object.assign({
|
|
53
55
|
id: divId,
|
|
54
56
|
className: `${css_wrapper} ${noFrame ? css_column : css_row}${divClass}`,
|
|
@@ -61,6 +63,11 @@ const RadioButtonList = React.memo(props => {
|
|
|
61
63
|
children: label
|
|
62
64
|
}), renderedOptions ]
|
|
63
65
|
}));
|
|
64
|
-
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
styleInject_es.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"),
|
|
69
|
+
RadioButtonListComponent.displayName = "RadioButtonList";
|
|
70
|
+
|
|
71
|
+
const RadioButtonList = React.memo(RadioButtonListComponent);
|
|
65
72
|
|
|
66
73
|
exports.RadioButtonList = RadioButtonList;
|
|
@@ -2,25 +2,23 @@
|
|
|
2
2
|
|
|
3
3
|
var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_wrapper = "Switch-module_wrapper__kudO9 flexBox-module_row__z24tF", css_knob = "Switch-module_knob__vKNOc flexBox-module_row__z24tF";
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const Switch = React.memo(props => {
|
|
8
|
-
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 = tslib_es6.__rest(props, [ "state", "height", "width", "padding", "bgColorOn", "bgColorOff", "knobColor", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [on, setOn] = React.useState(state);
|
|
5
|
+
function SwitchComponent(props) {
|
|
6
|
+
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 = tslib_es6.__rest(props, [ "fieldName", "state", "value", "height", "width", "padding", "backgroundColorOn", "backgroundColorOff", "bgColorOn", "bgColorOff", "knobColor", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [on, setOn] = React.useState(state), resolvedBackgroundColorOn = null != backgroundColorOn ? backgroundColorOn : bgColorOn, resolvedBackgroundColorOff = null != backgroundColorOff ? backgroundColorOff : bgColorOff;
|
|
9
7
|
React.useEffect(() => {
|
|
10
8
|
setOn(state);
|
|
11
9
|
}, [ state ]);
|
|
12
10
|
const handleClick = React.useCallback(() => {
|
|
13
|
-
setOn(!on), onChange(!on);
|
|
14
|
-
}, [ on, onChange ]),
|
|
15
|
-
justifyContent: on ? "flex-end" : "flex-start"
|
|
16
|
-
}), [ on ]), cssVars = React.useMemo(() => ({
|
|
11
|
+
setOn(!on), onChange(value, !on);
|
|
12
|
+
}, [ on, onChange, value ]), cssVars = React.useMemo(() => ({
|
|
17
13
|
"--switch-width": `${width}px`,
|
|
18
14
|
"--switch-height": `${height}px`,
|
|
19
15
|
"--switch-padding": `${padding}px`,
|
|
20
16
|
"--switch-knob-size": height - 2 * padding + "px",
|
|
21
17
|
"--switch-knob-color": knobColor,
|
|
22
|
-
"--switch-bg-color": on ?
|
|
23
|
-
}), [ width, height, padding,
|
|
18
|
+
"--switch-bg-color": on ? resolvedBackgroundColorOn : resolvedBackgroundColorOff
|
|
19
|
+
}), [ width, height, padding, resolvedBackgroundColorOff, resolvedBackgroundColorOn, on, knobColor ]), justify = React.useMemo(() => ({
|
|
20
|
+
justifyContent: on ? "flex-end" : "flex-start"
|
|
21
|
+
}), [ on ]);
|
|
24
22
|
return jsxRuntime.jsx(react.motion.button, Object.assign({
|
|
25
23
|
id: divId,
|
|
26
24
|
type: "button",
|
|
@@ -28,6 +26,7 @@ const Switch = React.memo(props => {
|
|
|
28
26
|
style: Object.assign(Object.assign(Object.assign({}, divStyle), justify), cssVars),
|
|
29
27
|
onClick: handleClick,
|
|
30
28
|
role: "switch",
|
|
29
|
+
"aria-label": null != fieldName ? fieldName : "Switch",
|
|
31
30
|
"aria-checked": on
|
|
32
31
|
}, rest, {
|
|
33
32
|
children: jsxRuntime.jsx(react.motion.div, {
|
|
@@ -35,6 +34,11 @@ const Switch = React.memo(props => {
|
|
|
35
34
|
layout: "preserve-aspect"
|
|
36
35
|
})
|
|
37
36
|
}));
|
|
38
|
-
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
styleInject_es.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"),
|
|
40
|
+
SwitchComponent.displayName = "Switch";
|
|
41
|
+
|
|
42
|
+
const Switch = React.memo(SwitchComponent);
|
|
39
43
|
|
|
40
44
|
exports.Switch = Switch;
|
|
@@ -4,20 +4,20 @@ var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/
|
|
|
4
4
|
|
|
5
5
|
require("../theme/colors.js"), require("../hooks/useWindow.js");
|
|
6
6
|
|
|
7
|
-
var Badge = require("./Badge-CY_DG6cD.js"), Icon = require("./Icon-
|
|
7
|
+
var Badge = require("./Badge-CY_DG6cD.js"), Icon = require("./Icon-D1EB8S5r.js"), IconButton = require("./IconButton-B07Ttxbr.js"), sharedTypes = require("./sharedTypes-gCECyn2N.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_wrapper = "TabBar-module_wrapper__cyOR1 flexBox-module_rowStart__4tcxS", css_option = "TabBar-module_option__gYjDf flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_icon = "TabBar-module_icon__JDgG3 flexBox-module_row__z24tF", css_close = "TabBar-module_close__bvSBh flexBox-module_row__z24tF";
|
|
8
8
|
|
|
9
9
|
styleInject_es.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");
|
|
10
10
|
|
|
11
11
|
const placeholderOptions = [ {
|
|
12
|
-
name: "
|
|
12
|
+
name: "Light",
|
|
13
13
|
value: "Option 1",
|
|
14
|
-
icon:
|
|
14
|
+
icon: "circle"
|
|
15
15
|
}, {
|
|
16
|
-
name: "
|
|
16
|
+
name: "Dark",
|
|
17
17
|
value: "Option 2",
|
|
18
|
-
icon: "
|
|
18
|
+
icon: "target"
|
|
19
19
|
} ], TabBar = React.memo(props => {
|
|
20
|
-
const {options: options = placeholderOptions, selected: selected = 0, border: border = !0, underline: underline = !0, height: height = "100%", width: width = "100%", tabWidth: tabWidth = "
|
|
20
|
+
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 = tslib_es6.__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 = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [index, setIndex] = React.useState(selected), optionRefs = React.useRef([]);
|
|
21
21
|
React.useEffect(() => {
|
|
22
22
|
let selectedIndex = 0;
|
|
23
23
|
selectedValue && options ? (selectedIndex = options.findIndex(option => option.value === selectedValue),
|
|
@@ -103,7 +103,7 @@ const placeholderOptions = [ {
|
|
|
103
103
|
TabBar.displayName = "TabBar";
|
|
104
104
|
|
|
105
105
|
const Option = React.memo(props => {
|
|
106
|
-
const theme = hooks_useTheme.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 = "
|
|
106
|
+
const theme = hooks_useTheme.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 = React.useRef(null), strokeColor = React.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 = React.useCallback(e => {
|
|
107
107
|
if (onToolTip(null), showToolTip && ref.current) {
|
|
108
108
|
const tip = {
|
|
109
109
|
type: sharedTypes.ToolTipType.button,
|
|
@@ -117,7 +117,7 @@ const Option = React.memo(props => {
|
|
|
117
117
|
}
|
|
118
118
|
}, [ showToolTip, onToolTip ]), handleMouseLeave = React.useCallback(() => {
|
|
119
119
|
showToolTip && onToolTip(null);
|
|
120
|
-
}, [ showToolTip, onToolTip ]), textColor = React.useMemo(() => disabled ? "var(--core-text-disabled)" : selected ? "var(--core-text-special)" : "var(--core-text-primary)", [ disabled, selected ]), setTabWidth = React.useMemo(() => "
|
|
120
|
+
}, [ showToolTip, onToolTip ]), textColor = React.useMemo(() => disabled ? "var(--core-text-disabled)" : selected ? "var(--core-text-special)" : "var(--core-text-primary)", [ disabled, selected ]), setTabWidth = React.useMemo(() => "compact" === tabWidth ? "min-content" : "fill" === tabWidth ? "unset" : `${tabWidth}px`, [ tabWidth ]), setTabFlex = React.useMemo(() => "fill" === tabWidth ? "1" : "unset", [ tabWidth ]), setUnderline = React.useMemo(() => selected && underline && !disabled ? "1px" : "0", [ underline, disabled, selected ]), cssVars = React.useMemo(() => ({
|
|
121
121
|
"--tab-bar-option-border": setUnderline,
|
|
122
122
|
"--tab-bar-option-padding": `${padding}px`,
|
|
123
123
|
"--tab-bar-option-icon-size": `${iconSize}px`,
|