@apple-pie/slice 0.1.1 → 0.1.3
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 +110 -5
- package/dist/cjs/chunks/{Avatar-zAhrTMO4.js → Avatar-YNcGDUzr.js} +27 -14
- package/dist/cjs/chunks/{AvatarGroup-qI2wNIKO.js → AvatarGroup-Dn5R1XIU.js} +2 -2
- package/dist/cjs/chunks/{Badge-Bv6c2YVC.js → Badge-CY_DG6cD.js} +2 -2
- package/dist/cjs/chunks/{Button-CNrcvIUu.js → Button-hg5kGC1P.js} +9 -9
- package/dist/cjs/chunks/{ButtonBar-CcL0wFXX.js → ButtonBar-C9Nm9faU.js} +2 -2
- package/dist/cjs/chunks/Camera-Dx_PT3pS.js +364 -0
- package/dist/cjs/chunks/{Card-pxbzaSWm.js → Card-AgEMKJ4O.js} +2 -2
- package/dist/cjs/chunks/{CheckBox-tcFDVDGG.js → CheckBox-CLMxlUff.js} +2 -2
- package/dist/cjs/chunks/{Chip-DfMVpYjg.js → Chip-CIy_Xe3i.js} +7 -7
- package/dist/cjs/chunks/{DivInput-hHsbuscc.js → DivInput-C73sqUF3.js} +10 -10
- package/dist/cjs/chunks/{Dot-BSSClfHQ.js → Dot-_HCJ3qxd.js} +2 -2
- package/dist/cjs/chunks/{DrggablePanel-BbDhV-a9.js → DrggablePanel-BzvBBhS7.js} +4 -4
- package/dist/cjs/chunks/{DropDown-C0vV24pv.js → DropDown-FZb52YxR.js} +9 -9
- package/dist/cjs/chunks/{ErrorSummary-CIUqlSLC.js → ErrorSummary-By4CjJ9a.js} +2 -2
- package/dist/cjs/chunks/{FileIcon-DTQaXxfC.js → FileIcon-hYwcre20.js} +2 -2
- package/dist/cjs/chunks/{FileList-C8Aq-iCW.js → FileList-BQgcnKPP.js} +21 -21
- package/dist/cjs/chunks/{FlexDiv-CW5gSa4V.js → FlexDiv-B3q6j3W9.js} +2 -2
- package/dist/cjs/chunks/{Grouper-B16IH2YM.js → Grouper-Bgc1wrQM.js} +2 -2
- package/dist/cjs/chunks/{IconButton-BDKARPkc.js → IconButton-CBWmUZxR.js} +2 -2
- package/dist/cjs/chunks/{Label-ZlQVpETS.js → Label-D15cIroT.js} +22 -20
- package/dist/cjs/chunks/{Overlay-Bb2YoSKr.js → Overlay-DL0EJDyk.js} +2 -2
- package/dist/cjs/chunks/{Pager-Bp1rPImK.js → Pager-TUxcWbmn.js} +3 -3
- package/dist/cjs/chunks/{ProgressIndicator-Qx3jfv8r.js → ProgressIndicator-qjya_Yb5.js} +4 -4
- package/dist/cjs/chunks/{PromptInput-7rftpDc1.js → PromptInput-ZqHQUfXw.js} +13 -13
- package/dist/cjs/chunks/{RadioButton-D5EJdMlL.js → RadioButton-Ce9uf54a.js} +3 -3
- package/dist/cjs/chunks/{RadioButtonList-DqsaDvEr.js → RadioButtonList-dhPr-Uhs.js} +2 -2
- package/dist/cjs/chunks/{Slider-CZvCAodl.js → Slider-CrjpZooG.js} +4 -4
- package/dist/cjs/chunks/{Switch-C9UtaIAt.js → Switch-Xqf0vwul.js} +2 -2
- package/dist/cjs/chunks/{TabBar-DlhY_3G4.js → TabBar-DuwypMB6.js} +2 -2
- package/dist/cjs/chunks/{TextArea-D0i83Jjq.js → TextArea-BhzVGfKA.js} +2 -2
- package/dist/cjs/chunks/{TextField-DRhQUqYA.js → TextField-hIjxrOG9.js} +10 -10
- package/dist/cjs/chunks/{Tip-CjMHa-fD.js → Tip-ik8-p4_4.js} +7 -7
- package/dist/cjs/chunks/{Toast-BdrI0h64.js → Toast-DMUM1wuL.js} +11 -11
- package/dist/cjs/chunks/{UploadArea-DBsMosuN.js → UploadArea-B4GA06LW.js} +15 -15
- package/dist/cjs/chunks/{_types-BMRxxH7h.js → _types-C_zOsCbB.js} +79 -11
- package/dist/cjs/chunks/colors-uej0anrN.js +27 -0
- package/dist/cjs/chunks/{utils-BsBHecUI.js → misc-C-M6KKsH.js} +27 -9
- package/dist/cjs/chunks/sseStore-Dg0WuXsI.js +59 -0
- package/dist/cjs/components/Avatar/index.js +7 -0
- package/dist/cjs/components/AvatarGroup/index.js +7 -0
- package/dist/cjs/{uikit → components}/Badge/index.js +1 -1
- package/dist/cjs/{uikit → components}/Button/index.js +4 -4
- package/dist/cjs/{uikit → components}/ButtonBar/index.js +4 -4
- package/dist/cjs/components/Camera/index.js +11 -0
- package/dist/cjs/{uikit → components}/Card/index.js +3 -3
- package/dist/cjs/{uikit → components}/CheckBox/index.js +3 -3
- package/dist/cjs/{uikit → components}/Chip/index.js +2 -2
- package/dist/cjs/components/DivInput/index.js +7 -0
- package/dist/cjs/{uikit → components}/Dot/index.js +1 -1
- package/dist/cjs/{uikit → components}/DraggablePanel/index.js +2 -2
- package/dist/cjs/{uikit → components}/DropDown/index.js +2 -2
- package/dist/cjs/{uikit → components}/ErrorSummary/index.js +1 -1
- package/dist/cjs/{uikit → components}/FileIcon/index.js +2 -2
- package/dist/cjs/{uikit → components}/FileList/index.js +4 -4
- package/dist/cjs/{uikit → components}/FlexDiv/index.js +1 -1
- package/dist/cjs/{uikit → components}/Grouper/index.js +4 -4
- package/dist/cjs/{uikit → components}/Icon/index.js +2 -2
- package/dist/cjs/{uikit → components}/IconButton/index.js +4 -4
- package/dist/cjs/{uikit → components}/Label/index.js +2 -2
- package/dist/cjs/{uikit → components}/Overlay/index.js +1 -1
- package/dist/cjs/components/Pager/index.js +7 -0
- package/dist/cjs/{uikit → components}/Progress/index.js +3 -3
- package/dist/cjs/{uikit → components}/PromptInput/index.js +7 -7
- package/dist/cjs/{uikit → components}/RadioButton/index.js +2 -2
- package/dist/cjs/{uikit → components}/RadioButtonList/index.js +3 -3
- package/dist/cjs/{uikit → components}/Slider/index.js +2 -2
- package/dist/cjs/{uikit → components}/Switch/index.js +1 -1
- package/dist/cjs/{uikit → components}/TabBar/index.js +4 -4
- package/dist/cjs/{uikit → components}/TextArea/index.js +5 -5
- package/dist/cjs/{uikit → components}/Textfield/index.js +6 -6
- package/dist/cjs/components/Tip/index.js +7 -0
- package/dist/cjs/{uikit → components}/Toast/index.js +4 -4
- package/dist/cjs/{uikit → components}/UploadArea/index.js +6 -6
- package/dist/cjs/hooks/useTrackRenders.js +3 -3
- package/dist/cjs/index.js +6 -6
- package/dist/cjs/stores/SSE.js +9 -0
- package/dist/cjs/stores.js +7 -3
- package/dist/cjs/utils/index.js +7 -0
- package/dist/cjs/utils/objects/index.js +140 -0
- package/dist/esm/chunks/{Avatar-D5mMmaIi.mjs → Avatar-CDMV6f9w.mjs} +30 -15
- package/dist/esm/chunks/{AvatarGroup-B3_zWk_-.mjs → AvatarGroup-BZ18GwhK.mjs} +3 -3
- package/dist/esm/chunks/{Badge-BISGWj5-.mjs → Badge-DyICxZP2.mjs} +2 -2
- package/dist/esm/chunks/{Button-qeCEnTFJ.mjs → Button-DJDS7Yad.mjs} +12 -12
- package/dist/esm/chunks/{ButtonBar-jMNpQysA.mjs → ButtonBar-DIsqJmrS.mjs} +3 -3
- package/dist/esm/chunks/Camera-BvJJ5cd-.mjs +380 -0
- package/dist/esm/chunks/{Card-4u4hpBAM.mjs → Card-DjHdCav5.mjs} +3 -3
- package/dist/esm/chunks/{CheckBox-D2jWAviD.mjs → CheckBox-C1LPehvl.mjs} +3 -3
- package/dist/esm/chunks/{Chip-DnsTVVmp.mjs → Chip-ByaaWpFx.mjs} +7 -7
- package/dist/esm/chunks/{DivInput-B4ohgnLJ.mjs → DivInput-B7BliU1p.mjs} +3 -3
- package/dist/esm/chunks/{Dot-C-Xu24wF.mjs → Dot-CLGwQu-i.mjs} +2 -2
- package/dist/esm/chunks/{DrggablePanel-CEg9sHHt.mjs → DrggablePanel-DvactFf5.mjs} +3 -3
- package/dist/esm/chunks/{DropDown-CCePGFHd.mjs → DropDown-CM01mO_W.mjs} +9 -9
- package/dist/esm/chunks/{ErrorSummary-CZw06dSh.mjs → ErrorSummary-S0shes-m.mjs} +2 -2
- package/dist/esm/chunks/{FileIcon-BcIJzIwA.mjs → FileIcon-CC_k5dUW.mjs} +1 -1
- package/dist/esm/chunks/{FileList-db86wx1X.mjs → FileList-CmlXqPXl.mjs} +18 -18
- package/dist/esm/chunks/{FlexDiv-BLYDgWu2.mjs → FlexDiv-LGEGGrT0.mjs} +2 -2
- package/dist/esm/chunks/{Grouper-D8mQt9_Q.mjs → Grouper-DNmAYWdR.mjs} +4 -4
- package/dist/esm/chunks/{IconButton-DlgZO9hb.mjs → IconButton-C8RBNFzh.mjs} +5 -5
- package/dist/esm/chunks/{Label-Cj_LkQLx.mjs → Label-DOvquc82.mjs} +21 -19
- package/dist/esm/chunks/{Overlay-Bh0enFIe.mjs → Overlay-Cw9o1fHb.mjs} +2 -2
- package/dist/esm/chunks/{Pager-6mBRDV3D.mjs → Pager-BX4TMwD_.mjs} +3 -3
- package/dist/esm/chunks/{ProgressIndicator-DsN3c0J5.mjs → ProgressIndicator-h11R3FG1.mjs} +5 -5
- package/dist/esm/chunks/{PromptInput-BGt0FgwF.mjs → PromptInput-DSHVUuEf.mjs} +14 -14
- package/dist/esm/chunks/{RadioButton-D9qz4XDZ.mjs → RadioButton-_lo_FJ8g.mjs} +4 -4
- package/dist/esm/chunks/{RadioButtonList-DCaC7MnI.mjs → RadioButtonList-CLHJxrI_.mjs} +3 -3
- package/dist/esm/chunks/{Slider-C3A8GCfH.mjs → Slider-Bih21QiT.mjs} +3 -3
- package/dist/esm/chunks/{Switch-Dt4ynf5r.mjs → Switch-nWg2Ykea.mjs} +2 -2
- package/dist/esm/chunks/{TabBar-CYGdcsab.mjs → TabBar-CDDzA_m1.mjs} +5 -5
- package/dist/esm/chunks/{TextArea-BWnMMBN0.mjs → TextArea-CyVBzMoN.mjs} +3 -3
- package/dist/esm/chunks/{TextField-D8j5hLhv.mjs → TextField-CYI2vbvO.mjs} +12 -12
- package/dist/esm/chunks/{Tip-CHQh-Yq0.mjs → Tip-B-cDOFvV.mjs} +6 -6
- package/dist/esm/chunks/{Toast-MzHPO4x3.mjs → Toast-ovxR12_-.mjs} +8 -8
- package/dist/esm/chunks/{UploadArea-DwGsYUhY.mjs → UploadArea-Kez3VD4d.mjs} +14 -14
- package/dist/esm/chunks/{_types-B0zIFpYY.mjs → _types-CTmvSEX0.mjs} +100 -32
- package/dist/esm/chunks/colors-DR9fLI5X.mjs +30 -0
- package/dist/esm/chunks/{utils-BQ1v7VE4.mjs → misc-cg9I7drO.mjs} +21 -2
- package/dist/esm/chunks/sseStore-m3IPyLwJ.mjs +56 -0
- package/dist/esm/components/Avatar/index.mjs +11 -0
- package/dist/esm/components/AvatarGroup/index.mjs +13 -0
- package/dist/esm/{uikit → components}/Badge/index.mjs +1 -1
- package/dist/esm/{uikit → components}/Button/index.mjs +6 -6
- package/dist/esm/{uikit → components}/ButtonBar/index.mjs +6 -6
- package/dist/esm/components/Camera/index.mjs +35 -0
- package/dist/esm/{uikit → components}/Card/index.mjs +3 -3
- package/dist/esm/{uikit → components}/CheckBox/index.mjs +3 -3
- package/dist/esm/{uikit → components}/Chip/index.mjs +3 -3
- package/dist/esm/{uikit → components}/DivInput/index.mjs +2 -2
- package/dist/esm/{uikit → components}/Dot/index.mjs +1 -1
- package/dist/esm/{uikit → components}/DraggablePanel/index.mjs +2 -2
- package/dist/esm/{uikit → components}/DropDown/index.mjs +3 -3
- package/dist/esm/{uikit → components}/ErrorSummary/index.mjs +1 -1
- package/dist/esm/{uikit → components}/FileIcon/index.mjs +2 -2
- package/dist/esm/{uikit → components}/FileList/index.mjs +5 -5
- package/dist/esm/{uikit → components}/FlexDiv/index.mjs +1 -1
- package/dist/esm/{uikit → components}/Grouper/index.mjs +4 -4
- package/dist/esm/{uikit → components}/Icon/index.mjs +2 -2
- package/dist/esm/{uikit → components}/IconButton/index.mjs +5 -5
- package/dist/esm/{uikit → components}/Label/index.mjs +2 -2
- package/dist/esm/{uikit → components}/Overlay/index.mjs +1 -1
- package/dist/esm/components/Pager/index.mjs +11 -0
- package/dist/esm/{uikit → components}/Progress/index.mjs +3 -3
- package/dist/esm/{uikit → components}/PromptInput/index.mjs +9 -9
- package/dist/esm/{uikit → components}/RadioButton/index.mjs +3 -3
- package/dist/esm/{uikit → components}/RadioButtonList/index.mjs +4 -4
- package/dist/esm/{uikit → components}/Slider/index.mjs +2 -2
- package/dist/esm/{uikit → components}/Switch/index.mjs +1 -1
- package/dist/esm/{uikit → components}/TabBar/index.mjs +6 -6
- package/dist/esm/{uikit → components}/TextArea/index.mjs +7 -7
- package/dist/esm/{uikit → components}/Textfield/index.mjs +8 -8
- package/dist/esm/{uikit → components}/Tip/index.mjs +2 -2
- package/dist/esm/{uikit → components}/Toast/index.mjs +3 -3
- package/dist/esm/{uikit → components}/UploadArea/index.mjs +6 -6
- package/dist/esm/hooks/useTrackRenders.mjs +1 -1
- package/dist/esm/index.mjs +39 -37
- package/dist/esm/stores/SSE.mjs +7 -0
- package/dist/esm/stores.mjs +4 -0
- package/dist/esm/utils/index.mjs +7 -0
- package/dist/esm/utils/objects/index.mjs +140 -0
- package/dist/types/{uikit → components}/Avatar/_types.d.ts +3 -3
- package/dist/types/components/Camera/Camera.d.ts +11 -0
- package/dist/types/components/Camera/_types.d.ts +78 -0
- package/dist/types/components/Camera/index.d.ts +2 -0
- package/dist/types/{uikit → components}/Icon/_types.d.ts +5 -0
- package/dist/types/{uikit → components}/Switch/Switch.stories.d.ts +1 -1
- package/dist/types/hooks/useToolTip/useToolTip.d.ts +1 -1
- package/dist/types/index.d.ts +74 -74
- package/dist/types/stores/SSE/_types.d.ts +17 -0
- package/dist/types/stores/SSE/index.d.ts +2 -0
- package/dist/types/stores/SSE/sseStore.d.ts +28 -0
- package/dist/types/stores/index.d.ts +1 -0
- package/dist/types/stores/tip/_types.d.ts +1 -1
- package/dist/types/stores/toast/_types.d.ts +1 -1
- package/dist/types/utils/functions/colors.d.ts +8 -0
- package/dist/types/{util → utils/functions}/files.d.ts +1 -1
- package/dist/types/{util/utils.d.ts → utils/functions/misc.d.ts} +2 -2
- package/dist/types/utils/index.d.ts +4 -0
- package/dist/types/utils/objects/SSEConnection/SSEConnection.d.ts +166 -0
- package/dist/types/utils/objects/WSConnection/WSConnection.d.ts +0 -0
- package/dist/types/utils/objects/index.d.ts +2 -0
- package/package.json +15 -5
- package/dist/cjs/chunks/Logos-CAHU-eIP.js +0 -483
- package/dist/cjs/uikit/Avatar/index.js +0 -6
- package/dist/cjs/uikit/AvatarGroup/index.js +0 -7
- package/dist/cjs/uikit/DivInput/index.js +0 -7
- package/dist/cjs/uikit/Logos/index.js +0 -9
- package/dist/cjs/uikit/Pager/index.js +0 -7
- package/dist/cjs/uikit/Tip/index.js +0 -7
- package/dist/esm/chunks/Logos-CpcaarOG.mjs +0 -493
- package/dist/esm/uikit/Avatar/index.mjs +0 -9
- package/dist/esm/uikit/AvatarGroup/index.mjs +0 -11
- package/dist/esm/uikit/Logos/index.mjs +0 -25
- package/dist/esm/uikit/Pager/index.mjs +0 -11
- package/dist/types/uikit/Logos/Logos.d.ts +0 -2
- package/dist/types/uikit/Logos/_types.d.ts +0 -9
- package/dist/types/uikit/Logos/index.d.ts +0 -2
- package/dist/types/util/flexBox.d.ts +0 -11
- package/dist/types/workers/uploads/uploads.runtime.d.ts +0 -1
- /package/dist/cjs/{uikit → components}/DocIcon/index.js +0 -0
- /package/dist/cjs/{uikit → components}/Spacer/index.js +0 -0
- /package/dist/esm/{uikit → components}/DocIcon/index.mjs +0 -0
- /package/dist/esm/{uikit → components}/Spacer/index.mjs +0 -0
- /package/dist/types/{uikit → components}/Avatar/Avatar.d.ts +0 -0
- /package/dist/types/{uikit → components}/Avatar/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/AvatarGroup/AvatarGroup.d.ts +0 -0
- /package/dist/types/{uikit → components}/AvatarGroup/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/AvatarGroup/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/Badge/Badge.d.ts +0 -0
- /package/dist/types/{uikit → components}/Badge/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/Badge/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/Button/Button.d.ts +0 -0
- /package/dist/types/{uikit → components}/Button/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/Button/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/ButtonBar/ButtonBar.d.ts +0 -0
- /package/dist/types/{uikit → components}/ButtonBar/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/ButtonBar/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/Card/Card.d.ts +0 -0
- /package/dist/types/{uikit → components}/Card/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/Card/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/CheckBox/CheckBox.d.ts +0 -0
- /package/dist/types/{uikit → components}/CheckBox/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/CheckBox/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/Chip/Chip.d.ts +0 -0
- /package/dist/types/{uikit → components}/Chip/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/Chip/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/DivInput/DivInput.d.ts +0 -0
- /package/dist/types/{uikit → components}/DivInput/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/DivInput/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/DocIcon/DocIcons.d.ts +0 -0
- /package/dist/types/{uikit → components}/DocIcon/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/DocIcon/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/Dot/Dot.d.ts +0 -0
- /package/dist/types/{uikit → components}/Dot/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/Dot/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/DraggablePanel/DrggablePanel.d.ts +0 -0
- /package/dist/types/{uikit → components}/DraggablePanel/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/DraggablePanel/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/DropDown/DropDown.d.ts +0 -0
- /package/dist/types/{uikit → components}/DropDown/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/DropDown/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/ErrorSummary/ErrorSummary.d.ts +0 -0
- /package/dist/types/{uikit → components}/ErrorSummary/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/ErrorSummary/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/FileIcon/FileIcon.d.ts +0 -0
- /package/dist/types/{uikit → components}/FileIcon/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/FileIcon/fileIconRegistry.d.ts +0 -0
- /package/dist/types/{uikit → components}/FileIcon/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/FileList/FileList.d.ts +0 -0
- /package/dist/types/{uikit → components}/FileList/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/FileList/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/FlexDiv/FlexDiv.d.ts +0 -0
- /package/dist/types/{uikit → components}/FlexDiv/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/FlexDiv/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/Grouper/Grouper.d.ts +0 -0
- /package/dist/types/{uikit → components}/Grouper/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/Grouper/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/Icon/Icon.d.ts +0 -0
- /package/dist/types/{uikit → components}/Icon/iconRegistry.d.ts +0 -0
- /package/dist/types/{uikit → components}/Icon/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/IconButton/IconButton.d.ts +0 -0
- /package/dist/types/{uikit → components}/IconButton/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/IconButton/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/Label/Label.d.ts +0 -0
- /package/dist/types/{uikit → components}/Label/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/Label/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/Overlay/Overlay.d.ts +0 -0
- /package/dist/types/{uikit → components}/Overlay/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/Overlay/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/Pager/Pager.d.ts +0 -0
- /package/dist/types/{uikit → components}/Pager/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/Pager/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/Progress/DoneCheck/DoneCheck.d.ts +0 -0
- /package/dist/types/{uikit → components}/Progress/DoneCheck/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/Progress/ProgressIndicator/ProgressIndicator.d.ts +0 -0
- /package/dist/types/{uikit → components}/Progress/ProgressIndicator/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/Progress/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/PromptInput/PromptInput.d.ts +0 -0
- /package/dist/types/{uikit → components}/PromptInput/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/PromptInput/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/RadioButton/RadioButton.d.ts +0 -0
- /package/dist/types/{uikit → components}/RadioButton/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/RadioButton/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/RadioButtonList/RadioButtonList.d.ts +0 -0
- /package/dist/types/{uikit → components}/RadioButtonList/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/RadioButtonList/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/Slider/Slider.d.ts +0 -0
- /package/dist/types/{uikit → components}/Slider/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/Slider/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/Spacer/Spacer.d.ts +0 -0
- /package/dist/types/{uikit → components}/Spacer/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/Spacer/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/Switch/Switch.d.ts +0 -0
- /package/dist/types/{uikit → components}/Switch/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/Switch/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/TabBar/TabBar.d.ts +0 -0
- /package/dist/types/{uikit → components}/TabBar/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/TabBar/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/TextArea/TextArea.d.ts +0 -0
- /package/dist/types/{uikit → components}/TextArea/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/TextArea/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/Textfield/TextField.d.ts +0 -0
- /package/dist/types/{uikit → components}/Textfield/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/Textfield/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/Tip/Tip.d.ts +0 -0
- /package/dist/types/{uikit → components}/Tip/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/Tip/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/Toast/Toast.d.ts +0 -0
- /package/dist/types/{uikit → components}/Toast/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/Toast/index.d.ts +0 -0
- /package/dist/types/{uikit → components}/UploadArea/UploadArea.d.ts +0 -0
- /package/dist/types/{uikit → components}/UploadArea/_types.d.ts +0 -0
- /package/dist/types/{uikit → components}/UploadArea/index.d.ts +0 -0
- /package/dist/types/{stories → components}/playHelpers.d.ts +0 -0
- /package/dist/types/{uikit → components}/sharedTypes.d.ts +0 -0
- /package/dist/types/{util → utils/functions}/debounce.d.ts +0 -0
package/README.md
CHANGED
|
@@ -10,10 +10,11 @@ Slice is a TypeScript-first React UI kit with theme tokens, utility hooks, optio
|
|
|
10
10
|
|
|
11
11
|
## What is included
|
|
12
12
|
|
|
13
|
-
- 30+ reusable UI components (inputs, buttons, navigation, overlays, feedback, layout, icons, upload UI)
|
|
13
|
+
- 30+ reusable UI components (inputs, buttons, navigation, overlays, feedback, layout, icons, upload UI, camera/stream UI)
|
|
14
14
|
- Theme system with light/dark presets and typed theme tokens
|
|
15
15
|
- React hooks for theme, window sizing, keyboard shortcuts, local storage, resize, and more
|
|
16
16
|
- Optional Zustand-powered stores (`toast`, `tip`, `uploads`, `window`)
|
|
17
|
+
- Utility functions and low-level objects such as `SSEConnection`
|
|
17
18
|
- Rollup + TypeScript build pipeline for CJS, ESM, and declaration output
|
|
18
19
|
- Component performance benchmarks powered by Vitest
|
|
19
20
|
|
|
@@ -70,13 +71,15 @@ import { Avatar, useTheme, ThemeProvider } from '@apple-pie/slice';
|
|
|
70
71
|
|
|
71
72
|
Subpath imports are also published:
|
|
72
73
|
|
|
73
|
-
- `@apple-pie/slice/
|
|
74
|
+
- `@apple-pie/slice/components/*`
|
|
74
75
|
- `@apple-pie/slice/hooks`
|
|
75
76
|
- `@apple-pie/slice/hooks/*`
|
|
76
77
|
- `@apple-pie/slice/providers`
|
|
77
78
|
- `@apple-pie/slice/providers/*`
|
|
78
79
|
- `@apple-pie/slice/stores`
|
|
79
80
|
- `@apple-pie/slice/stores/*`
|
|
81
|
+
- `@apple-pie/slice/utils`
|
|
82
|
+
- `@apple-pie/slice/utils/objects`
|
|
80
83
|
- `@apple-pie/slice/workers/*`
|
|
81
84
|
- `@apple-pie/slice/theme`
|
|
82
85
|
- `@apple-pie/slice/theme/colors`
|
|
@@ -88,12 +91,51 @@ Subpath imports are also published:
|
|
|
88
91
|
## Components
|
|
89
92
|
|
|
90
93
|
- `Avatar`, `AvatarGroup`, `Badge`, `CheckBox`, `DivInput`, `Dot`, `DropDown`
|
|
94
|
+
- `Camera`
|
|
91
95
|
- `ErrorSummary`, `FileIcon`, `FileList`, `FlexDiv`, `Grouper`, `Icon`, `IconButton`
|
|
92
|
-
- `
|
|
96
|
+
- `PromptInput`, `Overlay`, `Pager`, `ProgressIndicator`, `DoneCheck`
|
|
93
97
|
- `RadioButton`, `RadioButtonList`, `Slider`, `Spacer`, `Switch`, `TabBar`
|
|
94
98
|
- `TextField`, `TextArea`, `Tip`, `Toast`, `Button`, `ButtonBar`
|
|
95
99
|
- `Card`, `Chip`, `Label`, `DocIcons`, `DraggablePanel`, `UploadArea`
|
|
96
100
|
|
|
101
|
+
Camera notes:
|
|
102
|
+
|
|
103
|
+
- `Camera` exposes both `CameraProps` and an imperative `CameraElement` ref handle
|
|
104
|
+
- Use the forwarded ref for low-level stream access (`stream`, `videoTrack`, `audioTrack`) and imperative controls such as `startCamera()`, `stopCamera()`, `toggleVideo()`, `toggleMic()`, and `snapshot()`
|
|
105
|
+
- Preferred devices can be supplied through `sessionSettings.videoDeviceId` and `sessionSettings.micDeviceId`
|
|
106
|
+
|
|
107
|
+
Example:
|
|
108
|
+
|
|
109
|
+
```tsx
|
|
110
|
+
import { useRef } from 'react';
|
|
111
|
+
import { Camera } from '@apple-pie/slice';
|
|
112
|
+
import type { CameraElement } from '@apple-pie/slice';
|
|
113
|
+
|
|
114
|
+
export function CameraExample() {
|
|
115
|
+
const cameraRef = useRef<CameraElement | null>(null);
|
|
116
|
+
|
|
117
|
+
return (
|
|
118
|
+
<>
|
|
119
|
+
<Camera
|
|
120
|
+
ref={cameraRef}
|
|
121
|
+
width={400}
|
|
122
|
+
height={320}
|
|
123
|
+
sessionSettings={{
|
|
124
|
+
videoDeviceId: 'preferred-video-device-id',
|
|
125
|
+
micDeviceId: 'preferred-mic-device-id',
|
|
126
|
+
}}
|
|
127
|
+
/>
|
|
128
|
+
<button onClick={() => cameraRef.current?.snapshot?.()}>
|
|
129
|
+
Take Snapshot
|
|
130
|
+
</button>
|
|
131
|
+
<button onClick={() => cameraRef.current?.toggleVideo?.()}>
|
|
132
|
+
Toggle Video
|
|
133
|
+
</button>
|
|
134
|
+
</>
|
|
135
|
+
);
|
|
136
|
+
}
|
|
137
|
+
```
|
|
138
|
+
|
|
97
139
|
## Hooks
|
|
98
140
|
|
|
99
141
|
- `useTheme`, `useObserveTheme`
|
|
@@ -109,6 +151,7 @@ Subpath imports are also published:
|
|
|
109
151
|
|
|
110
152
|
- `toast` store: `useToast`, `useToastActions`, `toastActions`, `getToast`
|
|
111
153
|
- `tip` store: `useTip`, `useTipActions`, `tipActions`, `getTip`
|
|
154
|
+
- `SSE` store: `useSSEStore`, `useSSE`, `useMessage`, `useConnectionMessage`, `useConnectionClose`, `useIsConnected`
|
|
112
155
|
- `window` store: `useWindowStore`, atomic viewport/runtime hooks, imperative viewport helpers
|
|
113
156
|
- `uploads` store: `useUploadsStore`, `useUploads`, `useUploadsActions`, `createUploadsWorker`, `uploadsActions`
|
|
114
157
|
|
|
@@ -118,6 +161,34 @@ Example:
|
|
|
118
161
|
import { useToast, useToastActions } from '@apple-pie/slice/stores/toast';
|
|
119
162
|
```
|
|
120
163
|
|
|
164
|
+
SSE store example:
|
|
165
|
+
|
|
166
|
+
```tsx
|
|
167
|
+
import { useEffect } from 'react';
|
|
168
|
+
import {
|
|
169
|
+
useSSE,
|
|
170
|
+
useIsConnected,
|
|
171
|
+
useMessage,
|
|
172
|
+
} from '@apple-pie/slice/stores/SSE';
|
|
173
|
+
|
|
174
|
+
function StreamingExample() {
|
|
175
|
+
const { addConnection, removeConnection } = useSSE();
|
|
176
|
+
const connected = useIsConnected('assistant');
|
|
177
|
+
const text = useMessage<string>('message', 'assistant');
|
|
178
|
+
|
|
179
|
+
useEffect(() => {
|
|
180
|
+
addConnection('assistant', {
|
|
181
|
+
url: '/api/stream',
|
|
182
|
+
connectionClose: { message: 'eos' },
|
|
183
|
+
});
|
|
184
|
+
|
|
185
|
+
return () => removeConnection('assistant');
|
|
186
|
+
}, [addConnection, removeConnection]);
|
|
187
|
+
|
|
188
|
+
return <div>{connected ? text ?? 'streaming...' : 'disconnected'}</div>;
|
|
189
|
+
}
|
|
190
|
+
```
|
|
191
|
+
|
|
121
192
|
Uploads store example:
|
|
122
193
|
|
|
123
194
|
```ts
|
|
@@ -152,6 +223,40 @@ This worker URL pattern assumes modern frontend tooling such as Vite or similar
|
|
|
152
223
|
- Elevation tokens: `elevations` / `Elevation`
|
|
153
224
|
- Types: `SliceTheme`, `Colors`, `Type`, `Corners`, `Elevations`
|
|
154
225
|
|
|
226
|
+
## Utilities
|
|
227
|
+
|
|
228
|
+
- Package utilities are published from `@apple-pie/slice/utils`
|
|
229
|
+
- Low-level utility objects such as `SSEConnection` are also published from `@apple-pie/slice/utils/objects`
|
|
230
|
+
- Internal utility source lives under `src/utils/functions/*`
|
|
231
|
+
- Shared utility CSS modules live under `src/utils/styling/*`
|
|
232
|
+
|
|
233
|
+
Example:
|
|
234
|
+
|
|
235
|
+
```ts
|
|
236
|
+
import { addOpacity, copyToClipboard, tintFromColor } from '@apple-pie/slice/utils';
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
SSE utility example:
|
|
240
|
+
|
|
241
|
+
```ts
|
|
242
|
+
import { SSEConnection } from '@apple-pie/slice/utils/objects';
|
|
243
|
+
|
|
244
|
+
const connection = new SSEConnection({
|
|
245
|
+
url: '/api/events',
|
|
246
|
+
unifiedOnMessage: true,
|
|
247
|
+
connectionClose: { message: 'eos' },
|
|
248
|
+
onMessageCallback: (message) => {
|
|
249
|
+
if (message.type === 'message') {
|
|
250
|
+
console.log(message.data);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
if (message.type === 'close') {
|
|
254
|
+
console.log('stream closed');
|
|
255
|
+
}
|
|
256
|
+
},
|
|
257
|
+
});
|
|
258
|
+
```
|
|
259
|
+
|
|
155
260
|
## Development
|
|
156
261
|
|
|
157
262
|
```bash
|
|
@@ -166,7 +271,7 @@ npm run lint # Biome format + check
|
|
|
166
271
|
|
|
167
272
|
Benchmark details: `benchmarks/GUIDE.md`
|
|
168
273
|
|
|
169
|
-
Build architecture details: `
|
|
274
|
+
Build architecture details: `contributor-docs/build-architecture.md`
|
|
170
275
|
|
|
171
276
|
## Build outputs
|
|
172
277
|
|
|
@@ -180,5 +285,5 @@ Build architecture details: `devdocs/build-architecture.md`
|
|
|
180
285
|
## Notes
|
|
181
286
|
|
|
182
287
|
- Styling is CSS-module based and published with CSS side effects enabled (`"**/*.css"`).
|
|
183
|
-
- Storybook docs (`*.stories.*` and `
|
|
288
|
+
- Storybook docs (`*.stories.*` and `documentation/**`) are excluded from publishable type output.
|
|
184
289
|
- 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) { ... }`.
|
|
@@ -1,18 +1,30 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_wrapper = "Avatar-
|
|
3
|
+
var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-C-M6KKsH.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_wrapper = "Avatar-module_wrapper__ab1D7 flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_user = "Avatar-module_user__ZQv0Q flexBox-module_row__z24tF type-module_body-m-regular__LuQBA";
|
|
4
4
|
|
|
5
|
-
styleInject_es.styleInject(".flexBox-
|
|
5
|
+
styleInject_es.styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__ZAFft {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__s3KvF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__Lhqqq {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__vRHSP {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__tjdFc {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__Iy-VX {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__LuQBA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__uW1on {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__UBcvQ {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__lOYbg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__BqRC7 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__Fh2dt {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__pF2kC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__BeyrH {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__Ruknj {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__z8L3G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__0O3g6 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__KXxEB {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__cJeEA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__eRe05 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Xmwtf {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__5q1m3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__k9VFV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.Avatar-module_wrapper__ab1D7 {\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__ZQv0Q {\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 var(--motion-water-duration) var(--motion-water) 0s;\n\t&:hover {\n\t\tborder-color: var(--core-link-primary);\n\t}\n}\n");
|
|
6
6
|
|
|
7
7
|
const Avatar = React.memo(props => {
|
|
8
|
-
const {first: first = "", last: last = "", image: image = "", border: border = 0, color: color, borderColor: borderColor, bgColor: bgColor, firstOnly: firstOnly = !1, onClick: onClick, onKeyDown: onKeyDown, fontSize: fontSize, onToolTip: onToolTip = () => null, size: size = 34, frame: frame = 34, tabIndex: tabIndex = 0} = props, divAttributes = tslib_es6.__rest(props, [ "first", "last", "image", "border", "color", "borderColor", "bgColor", "firstOnly", "onClick", "onKeyDown", "fontSize", "onToolTip", "size", "frame", "tabIndex" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", initials = React.useMemo(() => `${null == first ? void 0 : first.charAt(0)}${firstOnly ? "" : last.charAt(0)}`, [ first, last, firstOnly ]), bgImage = React.useMemo(() => firstOnly ? "" : image ? `url(${image})` : "", [ firstOnly, image ])
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
8
|
+
const {first: first = "", last: last = "", image: image = "", border: border = 0, color: color, borderColor: borderColor, bgColor: bgColor, firstOnly: firstOnly = !1, onClick: onClick, onKeyDown: onKeyDown, fontSize: fontSize, onToolTip: onToolTip = () => null, size: size = 34, frame: frame = 34, tabIndex: tabIndex = 0} = props, divAttributes = tslib_es6.__rest(props, [ "first", "last", "image", "border", "color", "borderColor", "bgColor", "firstOnly", "onClick", "onKeyDown", "fontSize", "onToolTip", "size", "frame", "tabIndex" ]), [textSize, setTextSize] = React.useState("inherit"), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = React.useRef(null), initials = React.useMemo(() => `${null == first ? void 0 : first.charAt(0)}${firstOnly ? "" : last.charAt(0)}`, [ first, last, firstOnly ]), bgImage = React.useMemo(() => firstOnly ? "" : image ? `url(${image})` : "", [ firstOnly, image ]);
|
|
9
|
+
React.useEffect(() => {
|
|
10
|
+
var _a;
|
|
11
|
+
if (void 0 !== fontSize) {
|
|
12
|
+
if ("auto" === fontSize || "number" == typeof fontSize && fontSize <= 1) {
|
|
13
|
+
const parentHeight = null === (_a = ref.current) || void 0 === _a ? void 0 : _a.offsetHeight;
|
|
14
|
+
if (!parentHeight) return void setTextSize("inherit");
|
|
15
|
+
let size = .5;
|
|
16
|
+
"number" == typeof fontSize && (size = fontSize);
|
|
17
|
+
const fSize = Math.round(parentHeight * size);
|
|
18
|
+
return void setTextSize(fSize);
|
|
19
|
+
}
|
|
20
|
+
if ("string" == typeof fontSize && fontSize.includes("%")) {
|
|
21
|
+
const normalized = misc.normalizedPercent(fontSize);
|
|
22
|
+
return void setTextSize(normalized);
|
|
23
|
+
}
|
|
24
|
+
setTextSize(fontSize);
|
|
25
|
+
} else setTextSize("inherit");
|
|
26
|
+
}, [ fontSize ]);
|
|
27
|
+
const displayContent = React.useMemo(() => firstOnly || !image ? initials : null, [ firstOnly, image, initials ]), onMouseEnter = React.useCallback(event => {
|
|
16
28
|
onToolTip({
|
|
17
29
|
payload: {
|
|
18
30
|
label: first
|
|
@@ -22,15 +34,15 @@ const Avatar = React.memo(props => {
|
|
|
22
34
|
}, [ first, onToolTip ]), onMouseLeave = React.useCallback(() => {
|
|
23
35
|
onToolTip(null);
|
|
24
36
|
}, [ onToolTip ]), avatarVars = React.useMemo(() => ({
|
|
25
|
-
"--avatar-size":
|
|
26
|
-
"--avatar-frame":
|
|
37
|
+
"--avatar-size": misc.setStyle(size),
|
|
38
|
+
"--avatar-frame": misc.setStyle(frame),
|
|
27
39
|
"--avatar-border": `${border}px`,
|
|
28
40
|
"--avatar-color": null != color ? color : "var(--core-text-primary)",
|
|
29
41
|
"--avatar-bg-color": null != bgColor ? bgColor : "var(--core-surface-secondary)",
|
|
30
42
|
"--avatar-border-color": null != borderColor ? borderColor : "var(--core-surface-primary)",
|
|
31
43
|
"--avatar-bg-image": `${bgImage}`,
|
|
32
|
-
"--avatar-font-size":
|
|
33
|
-
}), [ size, frame, border, color, bgColor, borderColor, bgImage,
|
|
44
|
+
"--avatar-font-size": misc.setStyle(textSize)
|
|
45
|
+
}), [ size, frame, border, color, bgColor, borderColor, bgImage, textSize ]), classNames = React.useMemo(() => `${css_wrapper}${divClass}`, [ divClass ]);
|
|
34
46
|
return jsxRuntime.jsx("div", Object.assign({
|
|
35
47
|
id: divId,
|
|
36
48
|
className: classNames,
|
|
@@ -44,6 +56,7 @@ const Avatar = React.memo(props => {
|
|
|
44
56
|
"aria-label": `User Avatar - ${first}`
|
|
45
57
|
}, rest, {
|
|
46
58
|
children: jsxRuntime.jsx("div", {
|
|
59
|
+
ref: ref,
|
|
47
60
|
"aria-hidden": !0,
|
|
48
61
|
className: css_user,
|
|
49
62
|
children: displayContent
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), Avatar = require("./Avatar-
|
|
3
|
+
var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), Avatar = require("./Avatar-YNcGDUzr.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_wrapper = "AvatarGroup-module_wrapper__MtOyq flexBox-module_rowStart__4tcxS", css_avatar = "AvatarGroup-module_avatar__5NVpW";
|
|
4
4
|
|
|
5
|
-
styleInject_es.styleInject(".flexBox-
|
|
5
|
+
styleInject_es.styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n.AvatarGroup-module_wrapper__MtOyq {\n\tgap: var(--ag-gap);\n\tmargin: var(--ag-margin);\n}\n\n.AvatarGroup-module_avatar__5NVpW {\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");
|
|
6
6
|
|
|
7
7
|
const AvatarGroup = React.memo(props => {
|
|
8
8
|
const {avatars: avatars = [], size: size = 32, border: border = 3, overlap: overlap = 8, gap: gap = 0, borderColor: borderColor, margin: margin = 0, firstOnly: firstOnly = !1, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "avatars", "size", "border", "overlap", "gap", "borderColor", "margin", "firstOnly", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", cssVars = React.useMemo(() => ({
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_badge = "Badge-
|
|
3
|
+
var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_badge = "Badge-module_badge__RsuMz flexBox-module_row__z24tF type-module_body-xs-medium__s3KvF";
|
|
4
4
|
|
|
5
|
-
styleInject_es.styleInject(".flexBox-
|
|
5
|
+
styleInject_es.styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__ZAFft {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__s3KvF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__Lhqqq {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__vRHSP {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__tjdFc {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__Iy-VX {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__LuQBA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__uW1on {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__UBcvQ {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__lOYbg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__BqRC7 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__Fh2dt {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__pF2kC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__BeyrH {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__Ruknj {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__z8L3G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__0O3g6 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__KXxEB {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__cJeEA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__eRe05 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Xmwtf {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__5q1m3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__k9VFV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.Badge-module_badge__RsuMz {\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");
|
|
6
6
|
|
|
7
7
|
const Badge = React.memo(props => {
|
|
8
8
|
const {count: count, variant: variant = "dark", hideNull: hideNull = !0} = props, divAttributes = tslib_es6.__rest(props, [ "count", "variant", "hideNull" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", displayCount = React.useMemo(() => void 0 === count ? "0" : "string" == typeof count ? count : count > 99 ? "99+" : count.toString(), [ count ]), cssVars = React.useMemo(() => ({
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), Badge = require("./Badge-
|
|
4
|
-
button: "Button-
|
|
5
|
-
label: "Button-
|
|
6
|
-
count: "Button-
|
|
7
|
-
icon: "Button-
|
|
8
|
-
m: "Button-
|
|
9
|
-
l: "Button-
|
|
10
|
-
s: "Button-
|
|
3
|
+
var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), Badge = require("./Badge-CY_DG6cD.js"), Dot = require("./Dot-_HCJ3qxd.js"), _types = require("./_types-C_zOsCbB.js"), ProgressIndicator = require("./ProgressIndicator-qjya_Yb5.js"), sharedTypes = require("./sharedTypes-gCECyn2N.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css = {
|
|
4
|
+
button: "Button-module_button__2ZuB7 flexBox-module_row__z24tF",
|
|
5
|
+
label: "Button-module_label__UJ3Zt",
|
|
6
|
+
count: "Button-module_count__DFxVB flexBox-module_row__z24tF",
|
|
7
|
+
icon: "Button-module_icon__-43u5 flexBox-module_row__z24tF",
|
|
8
|
+
m: "Button-module_m__DR-gs type-module_body-m-regular__LuQBA",
|
|
9
|
+
l: "Button-module_l__0E0yI type-module_body-l-regular__lOYbg",
|
|
10
|
+
s: "Button-module_s__dSKOL type-module_body-s-regular__vRHSP"
|
|
11
11
|
};
|
|
12
12
|
|
|
13
|
-
styleInject_es.styleInject(".flexBox-
|
|
13
|
+
styleInject_es.styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__ZAFft {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__s3KvF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__Lhqqq {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__vRHSP {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__tjdFc {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__Iy-VX {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__LuQBA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__uW1on {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__UBcvQ {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__lOYbg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__BqRC7 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__Fh2dt {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__pF2kC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__BeyrH {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__Ruknj {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__z8L3G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__0O3g6 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__KXxEB {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__cJeEA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__eRe05 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Xmwtf {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__5q1m3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__k9VFV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.Button-module_button__2ZuB7 {\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__UJ3Zt {\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__DFxVB {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\ttransform: translateX(10px) translateY(-2px);\n}\n\n.Button-module_icon__-43u5 {\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__DR-gs {\n}\n\n.Button-module_l__0E0yI {\n}\n\n.Button-module_s__dSKOL {\n}\n");
|
|
14
14
|
|
|
15
15
|
const ButtonComponent = React.forwardRef((props, buttonRef) => {
|
|
16
16
|
const {size: size = "medium", variant: variant = "outline", label: label, labelSize: labelSize = "m", iconRight: iconRight, iconLeft: iconLeft, count: count = (void 0 === props.count ? void 0 : Number(props.count)), showDot: showDot, tooltip: tooltip, round: round = !1, state: state = "normal", fill: fill = !1, iconSize: iconSize = (void 0 === props.iconSize ? 20 : Number(props.iconSize)), width: width = "auto", underline: underline = !1, borderRadius: borderRadius, iconColor: iconColor, bgColor: bgColor, bgColorDisabled: bgColorDisabled, labelColor: labelColor, transition: transition, variants: variants, initial: initial, animate: animate, exit: exit, paddingRight: paddingRight, paddingLeft: paddingLeft, progress: progress = !1, working: working = !1, duration: duration, trigger: trigger = !1, destructive: destructive = !1, onClick: onClick = () => null, onToolTip: 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" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [btnState, setBtnState] = React.useState(state), [btnWidth, setBtnWidth] = React.useState(void 0), [playing, setPlaying] = React.useState(working), ref = React.useRef(null), handleClick = React.useCallback(e => {
|
|
@@ -4,9 +4,9 @@ var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/
|
|
|
4
4
|
|
|
5
5
|
require("../theme/colors.js"), require("../hooks/useWindow.js");
|
|
6
6
|
|
|
7
|
-
var IconButton = require("./IconButton-
|
|
7
|
+
var IconButton = require("./IconButton-CBWmUZxR.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_wrapper = "ButtonBar-module_wrapper__FYZ3s flexBox-module_rowStart__4tcxS", css_label = "ButtonBar-module_label__UcAS1 flexBox-module_rowStart__4tcxS type-module_body-s-regular__vRHSP", css_button = "ButtonBar-module_button__bMR3h flexBox-module_rowStart__4tcxS", css_selected = "ButtonBar-module_selected__wKvmi", css_divider = "ButtonBar-module_divider__HkWJw", css_last = "ButtonBar-module_last__S9VdD";
|
|
8
8
|
|
|
9
|
-
styleInject_es.styleInject(".flexBox-
|
|
9
|
+
styleInject_es.styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__ZAFft {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__s3KvF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__Lhqqq {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__vRHSP {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__tjdFc {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__Iy-VX {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__LuQBA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__uW1on {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__UBcvQ {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__lOYbg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__BqRC7 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__Fh2dt {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__pF2kC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__BeyrH {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__Ruknj {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__z8L3G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__0O3g6 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__KXxEB {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__cJeEA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__eRe05 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Xmwtf {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__5q1m3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__k9VFV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.ButtonBar-module_wrapper__FYZ3s {\n}\n\n.ButtonBar-module_label__UcAS1 {\n\tcolor: var(--core-text-disabled);\n\tpadding-right: 4px;\n}\n\n.ButtonBar-module_button__bMR3h {\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__wKvmi {\n\tbackground: var(--core-surface-primary);\n\tcolor: var(--core-link-primary);\n}\n\n.ButtonBar-module_divider__HkWJw {\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__S9VdD {\n\tdisplay: none;\n}\n"),
|
|
10
10
|
exports.ButtonBar = function(props) {
|
|
11
11
|
const {options: options = [], current: current = 0, label: label, onChange: onChange = () => null, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "options", "current", "label", "onChange", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", theme = hooks_useTheme.useTheme(), [hovered, setHovered] = React.useState(-1), [currentPage, setCurrentPage] = React.useState(current);
|
|
12
12
|
React.useEffect(() => setCurrentPage(current), [ current ]);
|