@apple-pie/slice 0.0.3 → 0.0.5
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 +132 -58
- package/dist/cjs/chunks/{Avatar-8-wPWe0V.js → Avatar-z2YcOAoP.js} +1 -1
- package/dist/cjs/chunks/{AvatarGroup-CVKmgBbD.js → AvatarGroup-Cz8369zI.js} +1 -1
- package/dist/cjs/chunks/{Badge-CMapJCij.js → Badge-COSg__VJ.js} +1 -1
- package/dist/cjs/chunks/{UIButton-CH4p-8yq.js → Button-BNXqiA13.js} +30 -35
- package/dist/cjs/chunks/{UIButtonBar-0fHPB0ww.js → ButtonBar-CeDdAOlH.js} +5 -5
- package/dist/cjs/chunks/{UICard-DBDSyT7E.js → Card-Cc_c-S7i.js} +5 -5
- package/dist/cjs/chunks/{CheckBox-7AACxrdZ.js → CheckBox-hTWIPqV_.js} +2 -2
- package/dist/cjs/chunks/{UIChip-kjhvRrOV.js → Chip-CLKVldi4.js} +5 -5
- package/dist/cjs/chunks/{DivInput-BKKJTFeV.js → DivInput-DnY2emt-.js} +2 -2
- package/dist/cjs/chunks/{Dot-Dnr9M9na.js → Dot-B5dO8kSS.js} +1 -1
- package/dist/cjs/chunks/{DrggablePanel-C6TPsDB-.js → DrggablePanel-BtsURL9o.js} +1 -1
- package/dist/cjs/chunks/{DropDown-D9sf_m2I.js → DropDown-COr9u96t.js} +2 -2
- package/dist/cjs/chunks/{ErrorSummary-Dv44onsV.js → ErrorSummary-BrSHbGpk.js} +1 -1
- package/dist/cjs/chunks/FileIcon-CEMQK_Je.js +132 -0
- package/dist/cjs/chunks/FileList-DWIm4o46.js +163 -0
- package/dist/cjs/chunks/{FlexDiv-DZBpswHV.js → FlexDiv-BHl29ywz.js} +1 -1
- package/dist/cjs/chunks/{Grouper-_kd2nU78.js → Grouper-EyHoeA8w.js} +3 -3
- package/dist/cjs/chunks/{IconButton-BfsPlKTb.js → IconButton-9QZ4eKBZ.js} +4 -4
- package/dist/cjs/chunks/{UILabel-DkBE2AIt.js → Label-DZJ_YDtD.js} +26 -8
- package/dist/cjs/chunks/{Overlay-DwCPvGB5.js → Overlay-DV3C5NDO.js} +1 -1
- package/dist/cjs/chunks/{Pager-CFtZ0IIW.js → Pager-CRjpl1FZ.js} +2 -2
- package/dist/cjs/chunks/{ProgressIndicator-C5oB7Mky.js → ProgressIndicator-BAwAaw58.js} +2 -2
- package/dist/cjs/chunks/PromptInput-DmO8a3oX.js +212 -0
- package/dist/cjs/chunks/{RadioButton-e_y2qiPE.js → RadioButton-DA9YUGEF.js} +2 -2
- package/dist/cjs/chunks/{RadioButtonList-I81UwHmM.js → RadioButtonList-BtsT7GJc.js} +1 -1
- package/dist/cjs/chunks/{Slider-C-gn7Sby.js → Slider-CqrIwn-L.js} +1 -1
- package/dist/cjs/chunks/{TabBar-D3bj4pjj.js → TabBar-WsNlr-aZ.js} +4 -4
- package/dist/cjs/chunks/{TextArea-B1oKK3_b.js → TextArea-BMJWUH2H.js} +3 -3
- package/dist/cjs/chunks/{TextField-CiQdPP5E.js → TextField-mfwz79cD.js} +5 -5
- package/dist/cjs/chunks/{Tip-C2pzExut.js → Tip-Af6FMEDi.js} +2 -2
- package/dist/cjs/chunks/{Toast-DrijUwoL.js → Toast-CxAEOW4z.js} +27 -10
- package/dist/cjs/chunks/{_types-CoWzQFsT.js → _types-BNlHsGMQ.js} +2 -2
- package/dist/cjs/chunks/{utils-CbayehuI.js → utils-BwNacfBU.js} +2 -0
- package/dist/cjs/chunks/windowStore-CPcVHJq6.js +93 -0
- package/dist/cjs/hooks/useKeyboardShortcuts.js +3 -1
- package/dist/cjs/hooks/useObserveTheme.js +14 -8
- package/dist/cjs/hooks/useTrackRenders.js +2 -1
- package/dist/cjs/hooks/useWindow.js +29 -7
- package/dist/cjs/index.js +48 -41
- package/dist/cjs/providers/ThemeProvider.js +6 -3
- package/dist/cjs/stores/window.js +12 -0
- package/dist/cjs/stores.js +6 -0
- package/dist/cjs/theme/type.js +103 -22
- package/dist/cjs/uikit/Avatar.js +1 -1
- package/dist/cjs/uikit/AvatarGroup.js +2 -2
- package/dist/cjs/uikit/Badge.js +1 -1
- package/dist/cjs/uikit/{UIButton.js → Button.js} +8 -8
- package/dist/cjs/uikit/{UIButtonBar.js → ButtonBar.js} +7 -7
- package/dist/cjs/uikit/{UICard.js → Card.js} +4 -4
- package/dist/cjs/uikit/CheckBox.js +3 -3
- package/dist/cjs/uikit/{UIChip.js → Chip.js} +4 -4
- package/dist/cjs/uikit/DivInput.js +2 -2
- package/dist/cjs/uikit/Dot.js +1 -1
- package/dist/cjs/uikit/DraggablePanel.js +2 -2
- package/dist/cjs/uikit/DropDown.js +3 -3
- package/dist/cjs/uikit/ErrorSummary.js +1 -1
- package/dist/cjs/uikit/{UIFileIcon.js → FileIcon.js} +7 -2
- package/dist/cjs/uikit/FileList.js +24 -0
- package/dist/cjs/uikit/FlexDiv.js +1 -1
- package/dist/cjs/uikit/Grouper.js +4 -4
- package/dist/cjs/uikit/Icon.js +2 -2
- package/dist/cjs/uikit/IconButton.js +5 -5
- package/dist/cjs/uikit/{UILabel.js → Label.js} +3 -2
- package/dist/cjs/uikit/Overlay.js +1 -1
- package/dist/cjs/uikit/Pager.js +2 -2
- package/dist/cjs/uikit/Progress.js +1 -1
- package/dist/cjs/uikit/{EditorButtonBar.js → PromptInput.js} +12 -11
- package/dist/cjs/uikit/RadioButton.js +6 -6
- package/dist/cjs/uikit/RadioButtonList.js +7 -7
- package/dist/cjs/uikit/Slider.js +2 -2
- package/dist/cjs/uikit/TabBar.js +6 -6
- package/dist/cjs/uikit/TextArea.js +8 -8
- package/dist/cjs/uikit/Textfield.js +8 -8
- package/dist/cjs/uikit/Tip.js +2 -2
- package/dist/cjs/uikit/Toast.js +3 -3
- package/dist/css/type.module.css +55 -10
- package/dist/esm/chunks/{Avatar-D_muqPrW.js → Avatar-BtkvMV1v.js} +1 -1
- package/dist/esm/chunks/{AvatarGroup-D8Xmrn52.js → AvatarGroup-pbqdS56o.js} +1 -1
- package/dist/esm/chunks/{Badge-PPf5Uvw3.js → Badge-DtxDLSO0.js} +1 -1
- package/dist/esm/chunks/{UIButton-DKx-_O8h.js → Button-BUJkJqdO.js} +30 -35
- package/dist/esm/chunks/{UIButtonBar-BNdA5eVq.js → ButtonBar-Bl0oCxd8.js} +5 -5
- package/dist/esm/chunks/{UICard-Dn5f3wg8.js → Card-Bjk0kgQh.js} +5 -5
- package/dist/esm/chunks/{CheckBox-CswFI0Xc.js → CheckBox-CvkZuSeB.js} +2 -2
- package/dist/esm/chunks/{UIChip-DqnGeVyR.js → Chip-o-YG_HAf.js} +5 -5
- package/dist/esm/chunks/{DivInput-iKFkeU2F.js → DivInput-D6ORPrkT.js} +2 -2
- package/dist/esm/chunks/{Dot-B84UVs2e.js → Dot-BZcEZbnm.js} +1 -1
- package/dist/esm/chunks/{DrggablePanel-CYYwTmFd.js → DrggablePanel-DWrTjXvf.js} +1 -1
- package/dist/esm/chunks/{DropDown-D4t6EhKL.js → DropDown-BDIvYWI-.js} +2 -2
- package/dist/esm/chunks/{ErrorSummary-DhU5SKPt.js → ErrorSummary-DzDnacH0.js} +1 -1
- package/dist/esm/chunks/FileIcon-Cxh-QsYb.js +130 -0
- package/dist/esm/chunks/FileList-yo_u1Kvw.js +161 -0
- package/dist/esm/chunks/{FlexDiv-CmMpORgn.js → FlexDiv-CFyndG99.js} +1 -1
- package/dist/esm/chunks/{Grouper-BbreOXI9.js → Grouper-NJbpaaQG.js} +3 -3
- package/dist/esm/chunks/{IconButton-CguHGkBM.js → IconButton-3m9ugITV.js} +4 -4
- package/dist/esm/chunks/{UILabel-RnbodPCS.js → Label-CgntsR3g.js} +26 -8
- package/dist/esm/chunks/{Overlay-CCBy7n7H.js → Overlay-BolsHW9S.js} +1 -1
- package/dist/esm/chunks/{Pager-BsSti93V.js → Pager-BHLyXq9p.js} +2 -2
- package/dist/esm/chunks/{ProgressIndicator-BVukxMU6.js → ProgressIndicator-uI9BZwBB.js} +2 -2
- package/dist/esm/chunks/PromptInput-C_qj6kGp.js +210 -0
- package/dist/esm/chunks/{RadioButton-B5BxQI0R.js → RadioButton-D8otD_Jj.js} +2 -2
- package/dist/esm/chunks/{RadioButtonList-C2z8McAD.js → RadioButtonList-CtX1j7rO.js} +1 -1
- package/dist/esm/chunks/{Slider-C-PcWqTz.js → Slider-O6UelMjh.js} +1 -1
- package/dist/esm/chunks/{TabBar-BSBcgTbd.js → TabBar-C0NgwRa2.js} +4 -4
- package/dist/esm/chunks/{TextArea-COM0UPo2.js → TextArea-DK0giDGR.js} +3 -3
- package/dist/esm/chunks/{TextField-Bh24bRWs.js → TextField-CQ4XYYNm.js} +5 -5
- package/dist/esm/chunks/{Tip-Ct19Ljul.js → Tip-iFECDhwN.js} +2 -2
- package/dist/esm/chunks/{Toast-BR0oMX6z.js → Toast-ZxMZtbd0.js} +27 -10
- package/dist/esm/chunks/{_types-BaYeLEWK.js → _types-RJ7q8S0B.js} +2 -2
- package/dist/esm/chunks/{utils-BRZK2Drn.js → utils-CZ1LWeN6.js} +2 -0
- package/dist/esm/chunks/windowStore-Cu4W4zJM.js +91 -0
- package/dist/esm/hooks/useKeyboardShortcuts.js +3 -1
- package/dist/esm/hooks/useObserveTheme.js +14 -8
- package/dist/esm/hooks/useTrackRenders.js +2 -1
- package/dist/esm/hooks/useWindow.js +30 -8
- package/dist/esm/index.js +33 -33
- package/dist/esm/providers/ThemeProvider.js +6 -3
- package/dist/esm/stores/window.js +2 -0
- package/dist/esm/stores.js +1 -0
- package/dist/esm/theme/type.js +103 -22
- package/dist/esm/uikit/Avatar.js +1 -1
- package/dist/esm/uikit/AvatarGroup.js +2 -2
- package/dist/esm/uikit/Badge.js +1 -1
- package/dist/esm/uikit/{UIButtonBar.js → Button.js} +8 -8
- package/dist/esm/uikit/{UIButton.js → ButtonBar.js} +7 -7
- package/dist/esm/uikit/{UICard.js → Card.js} +3 -3
- package/dist/esm/uikit/CheckBox.js +3 -3
- package/dist/esm/uikit/{UIChip.js → Chip.js} +3 -3
- package/dist/esm/uikit/DivInput.js +2 -2
- package/dist/esm/uikit/Dot.js +1 -1
- package/dist/esm/uikit/DraggablePanel.js +2 -2
- package/dist/esm/uikit/DropDown.js +3 -3
- package/dist/esm/uikit/ErrorSummary.js +1 -1
- package/dist/esm/uikit/{UIFileIcon.js → FileIcon.js} +2 -1
- package/dist/esm/uikit/FileList.js +18 -0
- package/dist/esm/uikit/FlexDiv.js +1 -1
- package/dist/esm/uikit/Grouper.js +4 -4
- package/dist/esm/uikit/Icon.js +2 -2
- package/dist/esm/uikit/IconButton.js +5 -5
- package/dist/esm/uikit/{UILabel.js → Label.js} +2 -1
- package/dist/esm/uikit/Overlay.js +1 -1
- package/dist/esm/uikit/Pager.js +2 -2
- package/dist/esm/uikit/Progress.js +1 -1
- package/dist/esm/uikit/{EditorButtonBar.js → PromptInput.js} +11 -10
- package/dist/esm/uikit/RadioButton.js +6 -6
- package/dist/esm/uikit/RadioButtonList.js +7 -7
- package/dist/esm/uikit/Slider.js +2 -2
- package/dist/esm/uikit/TabBar.js +6 -6
- package/dist/esm/uikit/TextArea.js +8 -8
- package/dist/esm/uikit/Textfield.js +8 -8
- package/dist/esm/uikit/Tip.js +2 -2
- package/dist/esm/uikit/Toast.js +3 -3
- package/dist/types/hooks/index.d.ts +1 -1
- package/dist/types/hooks/useKeyboardShortcuts/useKeyboardShortcuts.d.ts +1 -0
- package/dist/types/hooks/useWindow/useWindow.d.ts +11 -2
- package/dist/types/index.d.ts +17 -21
- package/dist/types/providers/ThemeProvider.d.ts +1 -0
- package/dist/types/stores/index.d.ts +1 -0
- package/dist/types/stores/window/_types.d.ts +28 -0
- package/dist/types/stores/window/index.d.ts +2 -0
- package/dist/types/stores/window/windowStore.d.ts +17 -0
- package/dist/types/theme/type/types.d.ts +5 -0
- package/dist/types/uikit/{UIButton/UIButton.d.ts → Button/Button.d.ts} +3 -3
- package/dist/types/uikit/{UIButton → Button}/_types.d.ts +3 -3
- package/dist/types/uikit/Button/index.d.ts +2 -0
- package/dist/types/uikit/ButtonBar/ButtonBar.d.ts +2 -0
- package/dist/types/uikit/{UIButtonBar → ButtonBar}/_types.d.ts +2 -2
- package/dist/types/uikit/ButtonBar/index.d.ts +2 -0
- package/dist/types/uikit/Card/Card.d.ts +3 -0
- package/dist/types/uikit/{UICard → Card}/_types.d.ts +2 -2
- package/dist/types/uikit/Card/index.d.ts +2 -0
- package/dist/types/uikit/Chip/Chip.d.ts +3 -0
- package/dist/types/uikit/{UIChip → Chip}/_types.d.ts +2 -2
- package/dist/types/uikit/Chip/index.d.ts +3 -0
- package/dist/types/uikit/FileIcon/FileIcon.d.ts +3 -0
- package/dist/types/uikit/FileIcon/_types.d.ts +27 -0
- package/dist/types/uikit/FileIcon/fileIconRegistry.d.ts +4 -0
- package/dist/types/uikit/FileIcon/index.d.ts +3 -0
- package/dist/types/uikit/FileList/FileList.d.ts +3 -0
- package/dist/types/uikit/FileList/_types.d.ts +23 -0
- package/dist/types/uikit/FileList/index.d.ts +2 -0
- package/dist/types/uikit/Label/Label.d.ts +2 -0
- package/dist/types/uikit/Label/_types.d.ts +16 -0
- package/dist/types/uikit/Label/index.d.ts +2 -0
- package/dist/types/uikit/PromptInput/PromptInput.d.ts +63 -0
- package/dist/types/uikit/PromptInput/_types.d.ts +35 -0
- package/dist/types/uikit/PromptInput/index.d.ts +2 -0
- package/dist/types/uikit/Toast/_types.d.ts +1 -1
- package/dist/types/util/files.d.ts +9 -0
- package/dist/types/util/utils.d.ts +4 -0
- package/package.json +5 -2
- package/dist/cjs/chunks/EditorButtonBar-CUNDgRQd.js +0 -244
- package/dist/cjs/chunks/MessageInput-CiHFo2j8.js +0 -399
- package/dist/cjs/chunks/UIFileIcon-ZrbDIeYz.js +0 -54
- package/dist/cjs/uikit/MessageInput.js +0 -30
- package/dist/esm/chunks/EditorButtonBar-FnMa8Zv2.js +0 -242
- package/dist/esm/chunks/MessageInput-DMHzCwjO.js +0 -397
- package/dist/esm/chunks/UIFileIcon-qGxIPsJJ.js +0 -52
- package/dist/esm/uikit/MessageInput.js +0 -24
- package/dist/types/theme/components/BrandColors.d.ts +0 -1
- package/dist/types/theme/components/ColorTile.d.ts +0 -6
- package/dist/types/theme/components/ColorTileGroup.d.ts +0 -6
- package/dist/types/theme/components/ThemeColors.d.ts +0 -2
- package/dist/types/theme/components/_types.d.ts +0 -15
- package/dist/types/uikit/EditorButtonBar/EditorButtonBar.d.ts +0 -4
- package/dist/types/uikit/EditorButtonBar/_Data.d.ts +0 -12
- package/dist/types/uikit/EditorButtonBar/_types.d.ts +0 -61
- package/dist/types/uikit/EditorButtonBar/index.d.ts +0 -2
- package/dist/types/uikit/MessageInput/ExcerptList/ExcerptList.d.ts +0 -2
- package/dist/types/uikit/MessageInput/ExcerptList/_types.d.ts +0 -15
- package/dist/types/uikit/MessageInput/FileList/FileList.d.ts +0 -2
- package/dist/types/uikit/MessageInput/FileList/_types.d.ts +0 -6
- package/dist/types/uikit/MessageInput/InputField/MessageInput.d.ts +0 -2
- package/dist/types/uikit/MessageInput/InputField/_types.d.ts +0 -39
- package/dist/types/uikit/MessageInput/UserList/UserList.d.ts +0 -5
- package/dist/types/uikit/MessageInput/UserList/_types.d.ts +0 -40
- package/dist/types/uikit/MessageInput/_Data.d.ts +0 -6
- package/dist/types/uikit/MessageInput/_types.d.ts +0 -42
- package/dist/types/uikit/MessageInput/index.d.ts +0 -4
- package/dist/types/uikit/UIButton/index.d.ts +0 -2
- package/dist/types/uikit/UIButtonBar/UIButtonBar.d.ts +0 -2
- package/dist/types/uikit/UIButtonBar/index.d.ts +0 -2
- package/dist/types/uikit/UICard/UICard.d.ts +0 -3
- package/dist/types/uikit/UICard/index.d.ts +0 -2
- package/dist/types/uikit/UIChip/UIChip.d.ts +0 -3
- package/dist/types/uikit/UIChip/index.d.ts +0 -3
- package/dist/types/uikit/UIFileIcon/UIFileIcon.d.ts +0 -3
- package/dist/types/uikit/UIFileIcon/_types.d.ts +0 -19
- package/dist/types/uikit/UIFileIcon/index.d.ts +0 -2
- package/dist/types/uikit/UILabel/UILabel.d.ts +0 -2
- package/dist/types/uikit/UILabel/_types.d.ts +0 -11
- package/dist/types/uikit/UILabel/index.d.ts +0 -2
package/README.md
CHANGED
|
@@ -1,80 +1,154 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Slice (`@apple-pie/slice`)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Slice is a TypeScript-first React UI kit with theme tokens, utility hooks, optional Zustand stores, Storybook docs, and benchmark tooling.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Beta and links
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
- This project is currently in **beta**. Until the official v1 release, breaking changes may be introduced without prior notice.
|
|
8
|
+
- Documentation and showcase: https://slice-uikit.com
|
|
9
|
+
- Repository: access is limited to authorized contributors/collaborators.
|
|
8
10
|
|
|
9
|
-
|
|
11
|
+
## What is included
|
|
10
12
|
|
|
11
|
-
|
|
13
|
+
- 30+ reusable UI components (inputs, buttons, navigation, overlays, feedback, layout, icons)
|
|
14
|
+
- Theme system with light/dark presets and typed theme tokens
|
|
15
|
+
- React hooks for theme, window sizing, keyboard shortcuts, local storage, resize, and more
|
|
16
|
+
- Optional Zustand-powered stores (`toast`, `tip`)
|
|
17
|
+
- Rollup + TypeScript build pipeline for CJS, ESM, and declaration output
|
|
18
|
+
- Component performance benchmarks powered by Vitest
|
|
12
19
|
|
|
13
|
-
|
|
14
|
-
- TextField, TextArea, DivInput - Text input components with validation support
|
|
15
|
-
- CheckBox, RadioButton, RadioButtonList - Selection controls
|
|
16
|
-
- Switch, Slider - Toggle and range inputs
|
|
17
|
-
- DropDown - Customizable dropdown menus
|
|
20
|
+
## Installation
|
|
18
21
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
- Pager - Pagination controls
|
|
22
|
+
```bash
|
|
23
|
+
npm install @apple-pie/slice
|
|
24
|
+
```
|
|
23
25
|
|
|
24
|
-
|
|
25
|
-
- Badge - Status indicators and labels
|
|
26
|
-
- Dot - Simple status dots
|
|
27
|
-
- ProgressIndicator, DoneCheck - Loading and completion states
|
|
28
|
-
- ProgressBar - Multi-step progress visualization
|
|
29
|
-
- ErrorSummary - Error message display
|
|
26
|
+
Peer dependencies:
|
|
30
27
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
- UILabel - Styled text labels
|
|
35
|
-
- Overlay - Modal overlays
|
|
28
|
+
```bash
|
|
29
|
+
npm install react react-dom motion
|
|
30
|
+
```
|
|
36
31
|
|
|
37
|
-
|
|
38
|
-
- Icon - Comprehensive icon set with IconNames
|
|
39
|
-
- UIFileIcon - File type icons
|
|
40
|
-
- DocIcons - Document type indicators
|
|
41
|
-
- Logos - Brand logos
|
|
32
|
+
Optional (only if using store exports):
|
|
42
33
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
- Grouper - Content grouping
|
|
47
|
-
- DraggablePanel - Draggable UI panels
|
|
34
|
+
```bash
|
|
35
|
+
npm install zustand
|
|
36
|
+
```
|
|
48
37
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
38
|
+
## Quick start
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import { ThemeProvider, Avatar, Button, useTheme } from '@apple-pie/slice';
|
|
42
|
+
|
|
43
|
+
function ThemeToggle() {
|
|
44
|
+
const theme = useTheme();
|
|
45
|
+
return (
|
|
46
|
+
<Button
|
|
47
|
+
label={theme.isDark ? 'Switch to Light' : 'Switch to Dark'}
|
|
48
|
+
onClick={() => theme.toggle()}
|
|
49
|
+
/>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
export default function App() {
|
|
54
|
+
return (
|
|
55
|
+
<ThemeProvider system>
|
|
56
|
+
<Avatar size={32} first="John" last="Appleseed" />
|
|
57
|
+
<ThemeToggle />
|
|
58
|
+
</ThemeProvider>
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
```
|
|
53
62
|
|
|
54
|
-
|
|
63
|
+
## Public API
|
|
55
64
|
|
|
56
|
-
|
|
65
|
+
Root import:
|
|
57
66
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
- **Comprehensive Styling:** Colors, typography, corners, and legacy style support
|
|
67
|
+
```ts
|
|
68
|
+
import { Avatar, useTheme, ThemeProvider } from '@apple-pie/slice';
|
|
69
|
+
```
|
|
62
70
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
-
|
|
66
|
-
- `
|
|
71
|
+
Subpath imports are also published:
|
|
72
|
+
|
|
73
|
+
- `@apple-pie/slice/uikit/*`
|
|
74
|
+
- `@apple-pie/slice/hooks`
|
|
75
|
+
- `@apple-pie/slice/hooks/*`
|
|
76
|
+
- `@apple-pie/slice/providers`
|
|
77
|
+
- `@apple-pie/slice/providers/*`
|
|
78
|
+
- `@apple-pie/slice/stores`
|
|
79
|
+
- `@apple-pie/slice/stores/*`
|
|
80
|
+
- `@apple-pie/slice/theme`
|
|
81
|
+
- `@apple-pie/slice/theme/colors`
|
|
82
|
+
- `@apple-pie/slice/theme/corners`
|
|
83
|
+
- `@apple-pie/slice/theme/elevations`
|
|
84
|
+
- `@apple-pie/slice/theme/type`
|
|
85
|
+
- `@apple-pie/slice/theme/themes`
|
|
86
|
+
|
|
87
|
+
## Components
|
|
88
|
+
|
|
89
|
+
- `Avatar`, `AvatarGroup`, `Badge`, `CheckBox`, `DivInput`, `Dot`, `DropDown`
|
|
90
|
+
- `ErrorSummary`, `FlexDiv`, `Grouper`, `Icon`, `IconButton`
|
|
91
|
+
- `Logos`, `PromptInput`, `Overlay`, `Pager`, `ProgressIndicator`, `DoneCheck`
|
|
92
|
+
- `RadioButton`, `RadioButtonList`, `Slider`, `Spacer`, `Switch`, `TabBar`
|
|
93
|
+
- `TextField`, `TextArea`, `Tip`, `Toast`, `Button`, `ButtonBar`
|
|
94
|
+
- `Card`, `Chip`, `Label`, `DocIcons`, `DraggablePanel`
|
|
95
|
+
|
|
96
|
+
## Hooks
|
|
97
|
+
|
|
98
|
+
- `useTheme`, `useObserveTheme`
|
|
99
|
+
- `useKeyboardShortcuts`
|
|
100
|
+
- `useDoubleClick`
|
|
101
|
+
- `useToolTip`
|
|
102
|
+
- `useLastUpdated`
|
|
103
|
+
- `useLocalStore`
|
|
104
|
+
- `useWindow`
|
|
105
|
+
- `useObserveResize`
|
|
106
|
+
|
|
107
|
+
## Stores (optional)
|
|
108
|
+
|
|
109
|
+
- `toast` store: `useToast`, `useToastActions`, `toastActions`, `getToast`
|
|
110
|
+
- `tip` store: `useTip`, `useTipActions`, `tipActions`, `getTip`
|
|
111
|
+
|
|
112
|
+
Example:
|
|
113
|
+
|
|
114
|
+
```ts
|
|
115
|
+
import { useToast, useToastActions } from '@apple-pie/slice/stores/toast';
|
|
116
|
+
```
|
|
67
117
|
|
|
68
|
-
##
|
|
118
|
+
## Theme exports
|
|
119
|
+
|
|
120
|
+
- Presets: `lightTheme`, `darkTheme`
|
|
121
|
+
- Color tokens: `light`, `dark`
|
|
122
|
+
- Elevation tokens: `elevations` / `Elevation`
|
|
123
|
+
- Types: `SliceTheme`, `Colors`, `Type`, `Corners`, `Elevations`
|
|
124
|
+
|
|
125
|
+
## Development
|
|
69
126
|
|
|
70
127
|
```bash
|
|
71
|
-
npm
|
|
128
|
+
npm run dev # Vite dev app
|
|
129
|
+
npm run storybook # Storybook on :6006
|
|
130
|
+
npm run test # Vitest tests
|
|
131
|
+
npm run benchmark # Benchmarks with formatted report
|
|
132
|
+
npm run benchmark:raw # Raw vitest benchmark output
|
|
133
|
+
npm run build # Rollup + types + css copy
|
|
134
|
+
npm run lint # Biome format + check
|
|
72
135
|
```
|
|
73
136
|
|
|
74
|
-
|
|
75
|
-
You will need to manage your own version of react, react-dom,
|
|
76
|
-
styled-components and motion. Your project must have
|
|
77
|
-
the following dependencies installed:
|
|
137
|
+
Benchmark details: `benchmarks/GUIDE.md`
|
|
78
138
|
|
|
79
|
-
|
|
80
|
-
|
|
139
|
+
Build architecture details: `devdocs/build-architecture.md`
|
|
140
|
+
|
|
141
|
+
## Build outputs
|
|
142
|
+
|
|
143
|
+
`npm run build` generates:
|
|
144
|
+
|
|
145
|
+
- `dist/esm` for ESM
|
|
146
|
+
- `dist/cjs` for CommonJS
|
|
147
|
+
- `dist/types` for `.d.ts`
|
|
148
|
+
- `dist/css` for shared utility css modules
|
|
149
|
+
|
|
150
|
+
## Notes
|
|
151
|
+
|
|
152
|
+
- Styling is CSS-module based and published with CSS side effects enabled (`"**/*.css"`).
|
|
153
|
+
- Storybook docs (`*.stories.*` and `src/stories/**`) are excluded from publishable type output.
|
|
154
|
+
- Named media query aliases are compiled via PostCSS custom media. Definitions live in `src/theme/breakpoints/custom-media.css` and can be used in CSS as `@media (--bp-tablet) { ... }`.
|
|
@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var styleInject_es = require('./style-inject.es-XZHJH68X.js');
|
|
7
7
|
|
|
8
|
-
var css_248z = ".flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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__QWEzl {\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__FxEAv {\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__rf7AV {\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__8-FO- {\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__qyYq- {\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__7GQ5Z {\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__Qtp5G {\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__Ieh9K {\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__0lZ3I {\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__Ar4d3 {\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__6tV1n {\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__I8Q1v {\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_heading-s-
|
|
8
|
+
var css_248z = ".flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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__QWEzl {\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__FxEAv {\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__rf7AV {\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__8-FO- {\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__qyYq- {\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__7GQ5Z {\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__Qtp5G {\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__Ieh9K {\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__0lZ3I {\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__Ar4d3 {\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__6tV1n {\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__I8Q1v {\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__zDf-z {\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__R5GpK {\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__SI-hC {\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__jGIb2 {\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__QFgN8 {\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__tdBSi {\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__-7Uyu {\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__8hGYF {\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__Cryjg {\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__PUi44 {\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__1B6fk {\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.Avatar-module_wrapper__U4ZJr {\n\tposition: relative;\n\tmin-height: var(--avatar-size);\n\tmin-width: var(--avatar-size);\n\theight: var(--avatar-size);\n\twidth: var(--avatar-size);\n\tborder: 0;\n\toutline: 0;\n}\n\n.Avatar-module_user__GIczo {\n\tfont-size: var(--avatar-font-size) !important;\n\tmin-height: var(--avatar-size);\n\tmin-width: var(--avatar-size);\n\theight: var(--avatar-size);\n\twidth: var(--avatar-size);\n\tline-height: 1em;\n\ttext-transform: uppercase;\n\tborder-radius: 100%;\n\tborder: var(--avatar-border) solid var(--avatar-border-color);\n\tbackground-color: var(--avatar-bg-color);\n\tcolor: var(--avatar-color);\n\tbackground-image: var(--avatar-bg-image);\n\tbackground-size: cover;\n\tcursor: pointer;\n\tuser-select: none;\n\t-webkit-user-select: none;\n\ttransition: border-color 0.2s ease-in-out 0s;\n\t&:hover {\n\t\tborder-color: var(--core-link-primary);\n\t}\n}\n";
|
|
9
9
|
var css = {"wrapper":"Avatar-module_wrapper__U4ZJr flexBox-module_row__PWxbe type-module_body-m-regular__Qtp5G","user":"Avatar-module_user__GIczo flexBox-module_row__PWxbe type-module_body-m-regular__Qtp5G"};
|
|
10
10
|
styleInject_es.styleInject(css_248z);
|
|
11
11
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var tslib_es6 = require('./tslib.es6-4H29ixHs.js');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var Avatar = require('./Avatar-
|
|
6
|
+
var Avatar = require('./Avatar-z2YcOAoP.js');
|
|
7
7
|
var styleInject_es = require('./style-inject.es-XZHJH68X.js');
|
|
8
8
|
|
|
9
9
|
var css_248z = ".flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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.AvatarGroup-module_wrapper__mmcUR {\n\tgap: var(--ag-gap);\n\tmargin: var(--ag-margin);\n}\n\n.AvatarGroup-module_avatar__YbQ5O {\n\tdisplay: inline-block;\n\tmargin-left: var(--ag-overlap);\n\tborder-radius: 100%;\n\t&:first-child {\n\t\tmargin-left: 0;\n\t}\n}\n";
|
|
@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var styleInject_es = require('./style-inject.es-XZHJH68X.js');
|
|
7
7
|
|
|
8
|
-
var css_248z = ".flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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__QWEzl {\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__FxEAv {\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__rf7AV {\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__8-FO- {\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__qyYq- {\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__7GQ5Z {\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__Qtp5G {\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__Ieh9K {\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__0lZ3I {\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__Ar4d3 {\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__6tV1n {\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__I8Q1v {\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_heading-s-
|
|
8
|
+
var css_248z = ".flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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__QWEzl {\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__FxEAv {\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__rf7AV {\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__8-FO- {\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__qyYq- {\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__7GQ5Z {\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__Qtp5G {\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__Ieh9K {\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__0lZ3I {\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__Ar4d3 {\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__6tV1n {\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__I8Q1v {\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__zDf-z {\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__R5GpK {\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__SI-hC {\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__jGIb2 {\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__QFgN8 {\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__tdBSi {\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__-7Uyu {\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__8hGYF {\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__Cryjg {\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__PUi44 {\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__1B6fk {\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}.Badge-module_badge__8-cpJ {\n\tline-height: 1em;\n\tcolor: var(--badge-color);\n\tbackground: var(--badge-bg);\n\tpadding: 2px 8px;\n\tmin-width: 24px;\n\twidth: min-content;\n\tborder-radius: 8px;\n\twhite-space: nowrap;\n}\n";
|
|
9
9
|
var css = {"badge":"Badge-module_badge__8-cpJ flexBox-module_row__PWxbe type-module_body-xs-medium__FxEAv"};
|
|
10
10
|
styleInject_es.styleInject(css_248z);
|
|
11
11
|
|
|
@@ -4,22 +4,18 @@ var tslib_es6 = require('./tslib.es6-4H29ixHs.js');
|
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var react = require('motion/react');
|
|
6
6
|
var React = require('react');
|
|
7
|
-
var
|
|
8
|
-
require('
|
|
9
|
-
require('
|
|
10
|
-
var
|
|
11
|
-
var Dot = require('./Dot-Dnr9M9na.js');
|
|
12
|
-
var _types = require('./_types-CoWzQFsT.js');
|
|
13
|
-
var ProgressIndicator = require('./ProgressIndicator-C5oB7Mky.js');
|
|
7
|
+
var Badge = require('./Badge-COSg__VJ.js');
|
|
8
|
+
var Dot = require('./Dot-B5dO8kSS.js');
|
|
9
|
+
var _types = require('./_types-BNlHsGMQ.js');
|
|
10
|
+
var ProgressIndicator = require('./ProgressIndicator-BAwAaw58.js');
|
|
14
11
|
var sharedTypes = require('./sharedTypes-BvTjh6M5.js');
|
|
15
12
|
var styleInject_es = require('./style-inject.es-XZHJH68X.js');
|
|
16
13
|
|
|
17
|
-
var css_248z = ".flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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__QWEzl {\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__FxEAv {\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__rf7AV {\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__8-FO- {\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__qyYq- {\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__7GQ5Z {\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__Qtp5G {\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__Ieh9K {\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__0lZ3I {\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__Ar4d3 {\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__6tV1n {\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__I8Q1v {\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_heading-s-
|
|
18
|
-
var css = {"button":"
|
|
14
|
+
var css_248z = ".flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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__QWEzl {\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__FxEAv {\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__rf7AV {\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__8-FO- {\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__qyYq- {\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__7GQ5Z {\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__Qtp5G {\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__Ieh9K {\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__0lZ3I {\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__Ar4d3 {\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__6tV1n {\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__I8Q1v {\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__zDf-z {\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__R5GpK {\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__SI-hC {\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__jGIb2 {\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__QFgN8 {\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__tdBSi {\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__-7Uyu {\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__8hGYF {\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__Cryjg {\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__PUi44 {\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__1B6fk {\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.Button-module_button__-gHnS {\n\tposition: relative;\n\tuser-select: none;\n\tmin-width: var(--ui-button-min-width);\n\t-webkit-user-select: none;\n}\n\n.Button-module_label__jzYdr {\n\tuser-select: none;\n\t-webkit-user-select: none;\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n\twhite-space: nowrap;\n\tword-break: break-all;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: 1;\n\t-webkit-box-orient: vertical;\n\t&:hover {\n\t\ttext-decoration: var(--ui-button-decoration);\n\t}\n}\n\n.Button-module_count__8YTcm {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\ttransform: translateX(10px) translateY(-2px);\n}\n\n.Button-module_icon__BNF2p {\n\tmin-width: var(--ui-button-icon-size);\n\tmin-height: var(--ui-button-icon-size);\n\theight: var(--ui-button-icon-size);\n\twidth: var(--ui-button-icon-size);\n}\n\n.Button-module_m__q-q0F {\n}\n\n.Button-module_l__r6jKt {\n}\n\n.Button-module_s__GucGM {\n}\n";
|
|
15
|
+
var css = {"button":"Button-module_button__-gHnS flexBox-module_row__PWxbe","label":"Button-module_label__jzYdr","count":"Button-module_count__8YTcm flexBox-module_row__PWxbe","icon":"Button-module_icon__BNF2p flexBox-module_row__PWxbe","m":"Button-module_m__q-q0F type-module_body-m-regular__Qtp5G","l":"Button-module_l__r6jKt type-module_body-l-regular__Ar4d3","s":"Button-module_s__GucGM type-module_body-s-regular__8-FO-"};
|
|
19
16
|
styleInject_es.styleInject(css_248z);
|
|
20
17
|
|
|
21
|
-
const
|
|
22
|
-
const theme = hooks_useTheme.useTheme();
|
|
18
|
+
const ButtonComponent = React.forwardRef((props, buttonRef) => {
|
|
23
19
|
const { size = 'medium', variant = 'outline', label = undefined, labelSize = 'm', iconRight = undefined, iconLeft = undefined, count = props.count === undefined ? undefined : Number(props.count), showDot = undefined, tooltip = undefined, round = false, state = 'normal', fill = false, iconSize = props.iconSize === undefined ? 20 : Number(props.iconSize), width = 'auto', underline = false, borderRadius = undefined, iconColor = undefined, bgColor = undefined, bgColorDisabled = undefined, labelColor = undefined, transition = undefined, variants = undefined, initial = undefined, animate = undefined, exit = undefined, paddingRight = undefined, paddingLeft = undefined, progress = false, working = false, duration = undefined, trigger = false, destructive = false, onClick = () => null, onToolTip = () => null } = props, divAttributes = tslib_es6.__rest(props, ["size", "variant", "label", "labelSize", "iconRight", "iconLeft", "count", "showDot", "tooltip", "round", "state", "fill", "iconSize", "width", "underline", "borderRadius", "iconColor", "bgColor", "bgColorDisabled", "labelColor", "transition", "variants", "initial", "animate", "exit", "paddingRight", "paddingLeft", "progress", "working", "duration", "trigger", "destructive", "onClick", "onToolTip"]);
|
|
24
20
|
const { id: divId, className, style } = divAttributes, rest = tslib_es6.__rest(divAttributes, ["id", "className", "style"]);
|
|
25
21
|
const divStyle = style !== null && style !== void 0 ? style : {};
|
|
@@ -30,7 +26,7 @@ const UIButtonComponent = React.forwardRef((props, buttonRef) => {
|
|
|
30
26
|
const ref = React.useRef(null);
|
|
31
27
|
const handleClick = React.useCallback((e) => {
|
|
32
28
|
onToolTip(null);
|
|
33
|
-
if (
|
|
29
|
+
if (btnState === 'disabled')
|
|
34
30
|
return;
|
|
35
31
|
if (progress && duration) {
|
|
36
32
|
setPlaying(true);
|
|
@@ -38,11 +34,10 @@ const UIButtonComponent = React.forwardRef((props, buttonRef) => {
|
|
|
38
34
|
else {
|
|
39
35
|
onClick(e);
|
|
40
36
|
}
|
|
41
|
-
}, [onToolTip,
|
|
37
|
+
}, [onToolTip, btnState, progress, duration, onClick]);
|
|
42
38
|
React.useEffect(() => setBtnState(state), [state]);
|
|
43
39
|
React.useEffect(() => setPlaying(working), [working]);
|
|
44
|
-
// memo button
|
|
45
|
-
// biome-ignore lint/correctness/useExhaustiveDependencies: avoid expensive observers
|
|
40
|
+
// memo button widths
|
|
46
41
|
React.useEffect(() => {
|
|
47
42
|
if (!variant || !size || !labelSize)
|
|
48
43
|
return;
|
|
@@ -50,7 +45,7 @@ const UIButtonComponent = React.forwardRef((props, buttonRef) => {
|
|
|
50
45
|
setBtnWidth(ref.current.offsetWidth);
|
|
51
46
|
else
|
|
52
47
|
setBtnWidth(width);
|
|
53
|
-
}, [width, variant, labelSize, size
|
|
48
|
+
}, [width, variant, labelSize, size]);
|
|
54
49
|
React.useImperativeHandle(buttonRef, () => ({
|
|
55
50
|
triggerClick: () => handleClick(undefined),
|
|
56
51
|
}));
|
|
@@ -60,13 +55,16 @@ const UIButtonComponent = React.forwardRef((props, buttonRef) => {
|
|
|
60
55
|
}, [trigger, handleClick]);
|
|
61
56
|
// memo destructive check
|
|
62
57
|
const destructiveColor = React.useCallback((icon) => {
|
|
63
|
-
if (icon
|
|
64
|
-
|
|
58
|
+
if (icon) {
|
|
59
|
+
if (btnState === 'disabled')
|
|
60
|
+
return 'var(--core-text-disabled)';
|
|
61
|
+
if (variant === 'solid')
|
|
62
|
+
return 'var(--core-text-light)';
|
|
65
63
|
}
|
|
66
64
|
if (destructive)
|
|
67
|
-
return
|
|
68
|
-
return
|
|
69
|
-
}, [destructive,
|
|
65
|
+
return 'var(--feedback-warning)';
|
|
66
|
+
return 'var(--core-text-primary)';
|
|
67
|
+
}, [destructive, variant, btnState]);
|
|
70
68
|
// memo solid styles
|
|
71
69
|
const solid = React.useMemo(() => {
|
|
72
70
|
return {
|
|
@@ -113,7 +111,7 @@ const UIButtonComponent = React.forwardRef((props, buttonRef) => {
|
|
|
113
111
|
iconColor: {
|
|
114
112
|
normal: iconColor || destructiveColor(true),
|
|
115
113
|
hover: iconColor || destructiveColor(true),
|
|
116
|
-
disabled: iconColor ||
|
|
114
|
+
disabled: iconColor || destructiveColor(true),
|
|
117
115
|
},
|
|
118
116
|
background: {
|
|
119
117
|
normal: bgColor || 'var(--core-surface-primary)',
|
|
@@ -142,12 +140,12 @@ const UIButtonComponent = React.forwardRef((props, buttonRef) => {
|
|
|
142
140
|
},
|
|
143
141
|
};
|
|
144
142
|
}, [
|
|
145
|
-
|
|
143
|
+
labelColor,
|
|
146
144
|
destructive,
|
|
145
|
+
destructiveColor,
|
|
147
146
|
bgColor,
|
|
148
147
|
bgColorDisabled,
|
|
149
|
-
|
|
150
|
-
destructiveColor,
|
|
148
|
+
iconColor,
|
|
151
149
|
]);
|
|
152
150
|
// memo text styles
|
|
153
151
|
const text = React.useMemo(() => {
|
|
@@ -256,7 +254,7 @@ const UIButtonComponent = React.forwardRef((props, buttonRef) => {
|
|
|
256
254
|
const buttonStyle = React.useMemo(() => ({
|
|
257
255
|
color: colorStyles[variant].color[btnState],
|
|
258
256
|
background: fill
|
|
259
|
-
?
|
|
257
|
+
? 'var(--core-surface-primary)'
|
|
260
258
|
: colorStyles[variant].background[state],
|
|
261
259
|
paddingRight: paddingRight !== null && paddingRight !== void 0 ? paddingRight : sizingStyles[size].paddingRight,
|
|
262
260
|
paddingLeft: paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : sizingStyles[size].paddingLeft,
|
|
@@ -276,7 +274,6 @@ const UIButtonComponent = React.forwardRef((props, buttonRef) => {
|
|
|
276
274
|
variant,
|
|
277
275
|
btnState,
|
|
278
276
|
fill,
|
|
279
|
-
theme,
|
|
280
277
|
state,
|
|
281
278
|
paddingRight,
|
|
282
279
|
paddingLeft,
|
|
@@ -284,12 +281,10 @@ const UIButtonComponent = React.forwardRef((props, buttonRef) => {
|
|
|
284
281
|
size,
|
|
285
282
|
width,
|
|
286
283
|
]);
|
|
287
|
-
// memo icon stroke color
|
|
288
|
-
const iconStrokeColor = React.useMemo(() => colorStyles[variant].iconColor[state], [colorStyles, variant, state]);
|
|
289
284
|
// memo progress color
|
|
290
285
|
const progressColor = React.useMemo(() => destructive
|
|
291
|
-
?
|
|
292
|
-
: colorStyles[variant].color[btnState], [destructive,
|
|
286
|
+
? 'var(feedback-warning)'
|
|
287
|
+
: colorStyles[variant].color[btnState], [destructive, colorStyles, variant, btnState]);
|
|
293
288
|
const setStyle = React.useCallback((value) => {
|
|
294
289
|
if (value === undefined)
|
|
295
290
|
return 'unset';
|
|
@@ -309,9 +304,9 @@ const UIButtonComponent = React.forwardRef((props, buttonRef) => {
|
|
|
309
304
|
'--ui-button-icon-size': iconDivSize,
|
|
310
305
|
};
|
|
311
306
|
}, [underline, btnWidth, setStyle, iconDivSize]);
|
|
312
|
-
return (jsxRuntime.jsxs(react.motion.div, Object.assign({ id: divId, className: `${css.button}${divClass}`, ref: ref, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: Object.assign(Object.assign(Object.assign({}, divStyle), buttonStyle), cssVars), transition: transition, variants: variants, initial: initial, animate: animate, exit: exit, onClick: handleClick }, rest, { children: [!playing && iconLeft && (jsxRuntime.jsx("div", { className: css.icon, children: jsxRuntime.jsx(_types.Icon, { name: iconLeft, size: sizingStyles[size].iconSize, strokeColor:
|
|
307
|
+
return (jsxRuntime.jsxs(react.motion.div, Object.assign({ id: divId, className: `${css.button}${divClass}`, ref: ref, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: Object.assign(Object.assign(Object.assign({}, divStyle), buttonStyle), cssVars), transition: transition, variants: variants, initial: initial, animate: animate, exit: exit, onClick: handleClick }, rest, { children: [!playing && iconLeft && (jsxRuntime.jsx("div", { className: css.icon, children: jsxRuntime.jsx(_types.Icon, { name: iconLeft, size: sizingStyles[size].iconSize, strokeColor: colorStyles[variant].iconColor[btnState], pointer: btnState !== 'disabled' }) })), playing && iconLeft && (jsxRuntime.jsx("div", { className: css.icon, children: jsxRuntime.jsx(ProgressIndicator.ProgressIndicator, { show: playing, didStop: handleDidStop, duration: duration, size: sizingStyles[size].iconSize, color: progressColor, inline: true }) })), playing && !iconLeft && !iconRight && (jsxRuntime.jsx("div", { className: css.icon, children: jsxRuntime.jsx(ProgressIndicator.ProgressIndicator, { show: playing, didStop: handleDidStop, duration: duration, size: sizingStyles[size].iconSize, color: progressColor, inline: false }) })), shouldShowLabel && (jsxRuntime.jsx("div", { className: `${css.label} ${css[labelSize]}`, children: label })), playing && iconRight && (jsxRuntime.jsx("div", { className: css.icon, children: jsxRuntime.jsx(ProgressIndicator.ProgressIndicator, { show: playing, didStop: handleDidStop, duration: duration, size: sizingStyles[size].iconSize, color: progressColor, inline: true }) })), !playing && iconRight && (jsxRuntime.jsx("div", { className: css.icon, children: jsxRuntime.jsx(_types.Icon, { name: iconRight, size: sizingStyles[size].iconSize, strokeColor: colorStyles[variant].iconColor[btnState], pointer: btnState !== 'disabled' }) })), jsxRuntime.jsx(Dot.Dot, { show: !playing && showDot }), !playing && count && (jsxRuntime.jsx("div", { className: css.count, children: jsxRuntime.jsx(Badge.Badge, { variant: 'light', count: Number(count) }) }))] })));
|
|
313
308
|
});
|
|
314
|
-
|
|
315
|
-
const
|
|
309
|
+
ButtonComponent.displayName = 'Button';
|
|
310
|
+
const Button = React.memo(ButtonComponent);
|
|
316
311
|
|
|
317
|
-
exports.
|
|
312
|
+
exports.Button = Button;
|
|
@@ -6,14 +6,14 @@ var React = require('react');
|
|
|
6
6
|
var hooks_useTheme = require('../hooks/useTheme.js');
|
|
7
7
|
require('../theme/colors.js');
|
|
8
8
|
require('../hooks/useWindow.js');
|
|
9
|
-
var IconButton = require('./IconButton-
|
|
9
|
+
var IconButton = require('./IconButton-9QZ4eKBZ.js');
|
|
10
10
|
var styleInject_es = require('./style-inject.es-XZHJH68X.js');
|
|
11
11
|
|
|
12
|
-
var css_248z = ".flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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__QWEzl {\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__FxEAv {\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__rf7AV {\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__8-FO- {\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__qyYq- {\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__7GQ5Z {\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__Qtp5G {\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__Ieh9K {\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__0lZ3I {\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__Ar4d3 {\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__6tV1n {\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__I8Q1v {\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_heading-s-
|
|
13
|
-
var css = {"wrapper":"
|
|
12
|
+
var css_248z = ".flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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__QWEzl {\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__FxEAv {\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__rf7AV {\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__8-FO- {\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__qyYq- {\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__7GQ5Z {\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__Qtp5G {\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__Ieh9K {\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__0lZ3I {\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__Ar4d3 {\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__6tV1n {\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__I8Q1v {\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__zDf-z {\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__R5GpK {\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__SI-hC {\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__jGIb2 {\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__QFgN8 {\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__tdBSi {\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__-7Uyu {\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__8hGYF {\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__Cryjg {\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__PUi44 {\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__1B6fk {\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.ButtonBar-module_wrapper__056Gm {\n}\n\n.ButtonBar-module_label__ubTGP {\n\tcolor: var(--core-text-disabled);\n\tpadding-right: 4px;\n}\n\n.ButtonBar-module_button__woeDh {\n\theight: 32px;\n\tgap: 0;\n\tcursor: pointer;\n\tbackground: var(--core-surface-primary);\n\tcolor: var(--core-text-disabled);\n\t&:last-child {\n\t\t&:hover {\n\t\t\tbackground: var(--core-surface-primary);\n\t\t}\n\t}\n\t&:first-child {\n\t\t&:hover {\n\t\t\tbackground: var(--core-surface-primary);\n\t\t}\n\t}\n\t&:hover {\n\t\tbackground: var(--core-surface-primary);\n\t\tcolor: var(--core-text-primary);\n\t}\n}\n\n.ButtonBar-module_selected__0KKNw {\n\tbackground: var(--core-surface-primary);\n\tcolor: var(--core-link-primary);\n}\n\n.ButtonBar-module_divider__kfIkV {\n\tdisplay: block;\n\tbackground: var(--core-outline-primary);\n\twidth: 1px;\n\theight: 16px;\n\tmargin: 0 4px;\n}\n\n.ButtonBar-module_last__1yYdd {\n\tdisplay: none;\n}\n";
|
|
13
|
+
var css = {"wrapper":"ButtonBar-module_wrapper__056Gm flexBox-module_rowStart__nJZnW","label":"ButtonBar-module_label__ubTGP flexBox-module_rowStart__nJZnW type-module_body-s-regular__8-FO-","button":"ButtonBar-module_button__woeDh flexBox-module_rowStart__nJZnW","selected":"ButtonBar-module_selected__0KKNw","divider":"ButtonBar-module_divider__kfIkV","last":"ButtonBar-module_last__1yYdd"};
|
|
14
14
|
styleInject_es.styleInject(css_248z);
|
|
15
15
|
|
|
16
|
-
function
|
|
16
|
+
function ButtonBar(props) {
|
|
17
17
|
const { options = [], current = 0, label, onChange = () => null, onToolTip = () => null } = props, divAttributes = tslib_es6.__rest(props, ["options", "current", "label", "onChange", "onToolTip"]);
|
|
18
18
|
const { id: divId, className, style } = divAttributes, rest = tslib_es6.__rest(divAttributes, ["id", "className", "style"]);
|
|
19
19
|
const divStyle = style !== null && style !== void 0 ? style : {};
|
|
@@ -55,4 +55,4 @@ function UIButtonBar(props) {
|
|
|
55
55
|
})] })));
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
exports.
|
|
58
|
+
exports.ButtonBar = ButtonBar;
|
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
var tslib_es6 = require('./tslib.es6-4H29ixHs.js');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var _types = require('./_types-
|
|
6
|
+
var _types = require('./_types-BNlHsGMQ.js');
|
|
7
7
|
var styleInject_es = require('./style-inject.es-XZHJH68X.js');
|
|
8
8
|
|
|
9
|
-
var css_248z = ".flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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__QWEzl {\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__FxEAv {\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__rf7AV {\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__8-FO- {\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__qyYq- {\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__7GQ5Z {\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__Qtp5G {\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__Ieh9K {\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__0lZ3I {\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__Ar4d3 {\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__6tV1n {\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__I8Q1v {\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_heading-s-
|
|
10
|
-
var css = {"card":"
|
|
9
|
+
var css_248z = ".flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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__QWEzl {\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__FxEAv {\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__rf7AV {\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__8-FO- {\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__qyYq- {\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__7GQ5Z {\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__Qtp5G {\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__Ieh9K {\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__0lZ3I {\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__Ar4d3 {\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__6tV1n {\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__I8Q1v {\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__zDf-z {\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__R5GpK {\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__SI-hC {\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__jGIb2 {\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__QFgN8 {\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__tdBSi {\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__-7Uyu {\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__8hGYF {\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__Cryjg {\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__PUi44 {\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__1B6fk {\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.Card-module_card__PHKoO {\n\tpadding: 8px 14px 8px 8px !important;\n\tcolor: var(--core-text-primary);\n\twidth: var(--card-width);\n\tmax-width: min-content;\n\tflex: var(--card-flex);\n\tgap: 8px;\n\tborder-radius: 8px;\n\tborder: 1px solid var(--core-outline-primary);\n\tcursor: pointer;\n\ttransition: all 0.25s ease-in-out 0s;\n\t&:hover {\n\t\tcolor: var(--core-button-primary);\n\t\tborder: 1px solid var(--core-button-primary);\n\t}\n}\n\n.Card-module_icon__k0FIP {\n\tmin-width: 20px;\n\tmin-height: 20px;\n\tmax-width: 20px;\n\tmax-height: 20px;\n}\n\n.Card-module_label__mGere {\n\tflex: 1;\n\tword-break: break-all;\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n\toverflow-wrap: anywhere;\n\tdisplay: -webkit-box;\n\twhite-space: nowrap;\n\t-webkit-line-clamp: 1;\n\t-webkit-box-orient: vertical;\n}\n";
|
|
10
|
+
var css = {"card":"Card-module_card__PHKoO flexBox-module_rowStart__nJZnW type-module_body-m-regular__Qtp5G","icon":"Card-module_icon__k0FIP flexBox-module_row__PWxbe","label":"Card-module_label__mGere"};
|
|
11
11
|
styleInject_es.styleInject(css_248z);
|
|
12
12
|
|
|
13
|
-
const
|
|
13
|
+
const Card = React.memo(function Card(props) {
|
|
14
14
|
const { id, icon, label, command, width, onCommand = () => null } = props, divAttributes = tslib_es6.__rest(props, ["id", "icon", "label", "command", "width", "onCommand"]);
|
|
15
15
|
const { className, style } = divAttributes, rest = tslib_es6.__rest(divAttributes, ["className", "style"]);
|
|
16
16
|
const divStyle = style !== null && style !== void 0 ? style : {};
|
|
@@ -33,4 +33,4 @@ const UICard = React.memo(function UICard(props) {
|
|
|
33
33
|
return (jsxRuntime.jsxs("div", Object.assign({ id: id, className: `${css.card}${divClass}`, style: Object.assign(Object.assign({}, divStyle), cssVars), onClick: () => onCommand({ id, command }), onKeyDown: () => onCommand({ id, command }) }, rest, { children: [icon && (jsxRuntime.jsx("div", { className: css.icon, children: jsxRuntime.jsx(_types.Icon, { name: icon }) })), label && jsxRuntime.jsx("div", { className: css.label, children: label })] })));
|
|
34
34
|
});
|
|
35
35
|
|
|
36
|
-
exports.
|
|
36
|
+
exports.Card = Card;
|