@mindlogic-ai/logician-ui 4.0.0 → 5.0.0-alpha.1
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/MIGRATION-5.0.md +155 -0
- package/USAGE.md +1 -1
- package/codemods/5.0/README.md +244 -0
- package/codemods/5.0/__testfixtures__/badge-variants.input.tsx +20 -0
- package/codemods/5.0/__testfixtures__/badge-variants.output.tsx +21 -0
- package/codemods/5.0/__testfixtures__/button-variants.input.tsx +124 -0
- package/codemods/5.0/__testfixtures__/button-variants.output.tsx +116 -0
- package/codemods/5.0/__testfixtures__/card-gradient.input.tsx +12 -0
- package/codemods/5.0/__testfixtures__/card-gradient.output.tsx +16 -0
- package/codemods/5.0/__testfixtures__/index.input.tsx +43 -0
- package/codemods/5.0/__testfixtures__/index.output.tsx +53 -0
- package/codemods/5.0/__testfixtures__/tag-chip-conflict.input.tsx +10 -0
- package/codemods/5.0/__testfixtures__/tag-chip-conflict.output.tsx +12 -0
- package/codemods/5.0/__testfixtures__/tag-chip-merge.input.tsx +42 -0
- package/codemods/5.0/__testfixtures__/tag-chip-merge.output.tsx +44 -0
- package/codemods/5.0/__testfixtures__/tag-chip.input.tsx +67 -0
- package/codemods/5.0/__testfixtures__/tag-chip.output.tsx +99 -0
- package/codemods/5.0/__testfixtures__/token-renames.input.tsx +88 -0
- package/codemods/5.0/__testfixtures__/token-renames.output.tsx +88 -0
- package/codemods/5.0/badge-variants.js +91 -0
- package/codemods/5.0/button-variants.js +234 -0
- package/codemods/5.0/card-gradient.js +72 -0
- package/codemods/5.0/codemods.test.ts +441 -0
- package/codemods/5.0/index.js +220 -0
- package/codemods/5.0/lib/shared.js +273 -0
- package/codemods/5.0/tag-chip.js +436 -0
- package/codemods/5.0/token-renames.js +231 -0
- package/codemods/vitest.config.ts +22 -0
- package/dist/components/Avatar/Avatar.d.ts +37 -0
- package/dist/components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/components/Avatar/Avatar.js +31 -2
- package/dist/components/Avatar/Avatar.js.map +1 -1
- package/dist/components/Avatar/Avatar.mjs +30 -3
- package/dist/components/Avatar/Avatar.mjs.map +1 -1
- package/dist/components/Avatar/index.d.ts +1 -1
- package/dist/components/Avatar/index.d.ts.map +1 -1
- package/dist/components/Badge/Badge.d.ts.map +1 -1
- package/dist/components/Badge/Badge.js +10 -6
- package/dist/components/Badge/Badge.js.map +1 -1
- package/dist/components/Badge/Badge.mjs +11 -7
- package/dist/components/Badge/Badge.mjs.map +1 -1
- package/dist/components/Badge/Badge.styles.d.ts +17 -3
- package/dist/components/Badge/Badge.styles.d.ts.map +1 -1
- package/dist/components/Badge/Badge.styles.js +51 -45
- package/dist/components/Badge/Badge.styles.js.map +1 -1
- package/dist/components/Badge/Badge.styles.mjs +50 -46
- package/dist/components/Badge/Badge.styles.mjs.map +1 -1
- package/dist/components/Badge/Badge.types.d.ts +16 -12
- package/dist/components/Badge/Badge.types.d.ts.map +1 -1
- package/dist/components/Badge/index.d.ts +2 -2
- package/dist/components/Badge/index.d.ts.map +1 -1
- package/dist/components/Banner/Banner.styles.d.ts +7 -3
- package/dist/components/Banner/Banner.styles.d.ts.map +1 -1
- package/dist/components/Banner/Banner.styles.js +43 -27
- package/dist/components/Banner/Banner.styles.js.map +1 -1
- package/dist/components/Banner/Banner.styles.mjs +44 -28
- package/dist/components/Banner/Banner.styles.mjs.map +1 -1
- package/dist/components/Banner/Banner.types.d.ts +1 -1
- package/dist/components/Banner/Banner.types.d.ts.map +1 -1
- package/dist/components/BottomSheet/BottomSheetCloseButton.d.ts.map +1 -1
- package/dist/components/BottomSheet/BottomSheetCloseButton.js +1 -1
- package/dist/components/BottomSheet/BottomSheetCloseButton.js.map +1 -1
- package/dist/components/BottomSheet/BottomSheetCloseButton.mjs +1 -1
- package/dist/components/BottomSheet/BottomSheetCloseButton.mjs.map +1 -1
- package/dist/components/Breadcrumb/BreadcrumbLink/BreadcrumbLink.js +1 -1
- package/dist/components/Breadcrumb/BreadcrumbLink/BreadcrumbLink.js.map +1 -1
- package/dist/components/Breadcrumb/BreadcrumbLink/BreadcrumbLink.mjs +1 -1
- package/dist/components/Breadcrumb/BreadcrumbLink/BreadcrumbLink.mjs.map +1 -1
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Button/Button.js +33 -14
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Button/Button.legacy.d.ts +53 -0
- package/dist/components/Button/Button.legacy.d.ts.map +1 -0
- package/dist/components/Button/Button.legacy.js +131 -0
- package/dist/components/Button/Button.legacy.js.map +1 -0
- package/dist/components/Button/Button.legacy.mjs +127 -0
- package/dist/components/Button/Button.legacy.mjs.map +1 -0
- package/dist/components/Button/Button.mjs +33 -14
- package/dist/components/Button/Button.mjs.map +1 -1
- package/dist/components/Button/Button.styles.d.ts +38 -26
- package/dist/components/Button/Button.styles.d.ts.map +1 -1
- package/dist/components/Button/Button.styles.js +142 -378
- package/dist/components/Button/Button.styles.js.map +1 -1
- package/dist/components/Button/Button.styles.mjs +141 -379
- package/dist/components/Button/Button.styles.mjs.map +1 -1
- package/dist/components/Button/Button.types.d.ts +45 -37
- package/dist/components/Button/Button.types.d.ts.map +1 -1
- package/dist/components/Button/index.d.ts +2 -2
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Card/Card.d.ts.map +1 -1
- package/dist/components/Card/Card.js +1 -7
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Card/Card.mjs +1 -7
- package/dist/components/Card/Card.mjs.map +1 -1
- package/dist/components/Card/Card.styles.d.ts +1 -12
- package/dist/components/Card/Card.styles.d.ts.map +1 -1
- package/dist/components/Card/Card.styles.js +6 -13
- package/dist/components/Card/Card.styles.js.map +1 -1
- package/dist/components/Card/Card.styles.mjs +6 -13
- package/dist/components/Card/Card.styles.mjs.map +1 -1
- package/dist/components/Card/Card.types.d.ts +1 -5
- package/dist/components/Card/Card.types.d.ts.map +1 -1
- package/dist/components/Checkbox/CheckboxControl.d.ts.map +1 -1
- package/dist/components/Checkbox/CheckboxControl.js +14 -8
- package/dist/components/Checkbox/CheckboxControl.js.map +1 -1
- package/dist/components/Checkbox/CheckboxControl.mjs +14 -8
- package/dist/components/Checkbox/CheckboxControl.mjs.map +1 -1
- package/dist/components/Chip/Chip.d.ts +5 -1
- package/dist/components/Chip/Chip.d.ts.map +1 -1
- package/dist/components/Chip/Chip.js +24 -18
- package/dist/components/Chip/Chip.js.map +1 -1
- package/dist/components/Chip/Chip.mjs +24 -18
- package/dist/components/Chip/Chip.mjs.map +1 -1
- package/dist/components/Chip/Chip.types.d.ts +38 -23
- package/dist/components/Chip/Chip.types.d.ts.map +1 -1
- package/dist/components/Chip/index.d.ts +0 -1
- package/dist/components/Chip/index.d.ts.map +1 -1
- package/dist/components/Code/Code.d.ts.map +1 -1
- package/dist/components/Code/Code.js +2 -2
- package/dist/components/Code/Code.js.map +1 -1
- package/dist/components/Code/Code.mjs +2 -2
- package/dist/components/Code/Code.mjs.map +1 -1
- package/dist/components/CodeTabs/CodeTabs.d.ts.map +1 -1
- package/dist/components/CodeTabs/CodeTabs.js +16 -2
- package/dist/components/CodeTabs/CodeTabs.js.map +1 -1
- package/dist/components/CodeTabs/CodeTabs.mjs +16 -2
- package/dist/components/CodeTabs/CodeTabs.mjs.map +1 -1
- package/dist/components/CodeTabs/CodeTabs.styles.d.ts +27 -0
- package/dist/components/CodeTabs/CodeTabs.styles.d.ts.map +1 -0
- package/dist/components/CodeTabs/CodeTabs.styles.js +32 -0
- package/dist/components/CodeTabs/CodeTabs.styles.js.map +1 -0
- package/dist/components/CodeTabs/CodeTabs.styles.mjs +30 -0
- package/dist/components/CodeTabs/CodeTabs.styles.mjs.map +1 -0
- package/dist/components/CodeTabs/CopyButton.d.ts.map +1 -1
- package/dist/components/CodeTabs/CopyButton.js +6 -3
- package/dist/components/CodeTabs/CopyButton.js.map +1 -1
- package/dist/components/CodeTabs/CopyButton.mjs +6 -3
- package/dist/components/CodeTabs/CopyButton.mjs.map +1 -1
- package/dist/components/Confetti/Confetti.d.ts +6 -9
- package/dist/components/Confetti/Confetti.d.ts.map +1 -1
- package/dist/components/Confetti/Confetti.js +8 -42
- package/dist/components/Confetti/Confetti.js.map +1 -1
- package/dist/components/Confetti/Confetti.mjs +8 -42
- package/dist/components/Confetti/Confetti.mjs.map +1 -1
- package/dist/components/Confetti/confettiColors.d.ts +25 -0
- package/dist/components/Confetti/confettiColors.d.ts.map +1 -0
- package/dist/components/Confetti/confettiColors.js +43 -0
- package/dist/components/Confetti/confettiColors.js.map +1 -0
- package/dist/components/Confetti/confettiColors.mjs +40 -0
- package/dist/components/Confetti/confettiColors.mjs.map +1 -0
- package/dist/components/CopyableCode/CopyableCode.d.ts.map +1 -1
- package/dist/components/CopyableCode/CopyableCode.js +2 -1
- package/dist/components/CopyableCode/CopyableCode.js.map +1 -1
- package/dist/components/CopyableCode/CopyableCode.mjs +2 -1
- package/dist/components/CopyableCode/CopyableCode.mjs.map +1 -1
- package/dist/components/CountBadge/CountBadge.d.ts +41 -0
- package/dist/components/CountBadge/CountBadge.d.ts.map +1 -0
- package/dist/components/CountBadge/CountBadge.js +60 -0
- package/dist/components/CountBadge/CountBadge.js.map +1 -0
- package/dist/components/CountBadge/CountBadge.mjs +58 -0
- package/dist/components/CountBadge/CountBadge.mjs.map +1 -0
- package/dist/components/CountBadge/CountBadge.styles.d.ts +13 -0
- package/dist/components/CountBadge/CountBadge.styles.d.ts.map +1 -0
- package/dist/components/CountBadge/CountBadge.styles.js +42 -0
- package/dist/components/CountBadge/CountBadge.styles.js.map +1 -0
- package/dist/components/CountBadge/CountBadge.styles.mjs +37 -0
- package/dist/components/CountBadge/CountBadge.styles.mjs.map +1 -0
- package/dist/components/CountBadge/CountBadge.types.d.ts +33 -0
- package/dist/components/CountBadge/CountBadge.types.d.ts.map +1 -0
- package/dist/components/CountBadge/index.d.ts +3 -0
- package/dist/components/CountBadge/index.d.ts.map +1 -0
- package/dist/components/DatePicker/RangeDatePicker.js +9 -7
- package/dist/components/DatePicker/RangeDatePicker.js.map +1 -1
- package/dist/components/DatePicker/RangeDatePicker.mjs +9 -7
- package/dist/components/DatePicker/RangeDatePicker.mjs.map +1 -1
- package/dist/components/DatePicker/SingleDatePicker.js +6 -4
- package/dist/components/DatePicker/SingleDatePicker.js.map +1 -1
- package/dist/components/DatePicker/SingleDatePicker.mjs +6 -4
- package/dist/components/DatePicker/SingleDatePicker.mjs.map +1 -1
- package/dist/components/ErrorFallback/ErrorFallback.d.ts.map +1 -1
- package/dist/components/ErrorFallback/ErrorFallback.js +5 -4
- package/dist/components/ErrorFallback/ErrorFallback.js.map +1 -1
- package/dist/components/ErrorFallback/ErrorFallback.mjs +5 -4
- package/dist/components/ErrorFallback/ErrorFallback.mjs.map +1 -1
- package/dist/components/ExpandableText/ExpandableText.js +1 -1
- package/dist/components/ExpandableText/ExpandableText.js.map +1 -1
- package/dist/components/ExpandableText/ExpandableText.mjs +1 -1
- package/dist/components/ExpandableText/ExpandableText.mjs.map +1 -1
- package/dist/components/FileItem/FileItem.d.ts.map +1 -1
- package/dist/components/FileItem/FileItem.js +2 -2
- package/dist/components/FileItem/FileItem.js.map +1 -1
- package/dist/components/FileItem/FileItem.mjs +2 -2
- package/dist/components/FileItem/FileItem.mjs.map +1 -1
- package/dist/components/Form/FieldError/FieldError.d.ts +1 -1
- package/dist/components/Form/FieldError/FieldError.js +2 -2
- package/dist/components/Form/FieldError/FieldError.js.map +1 -1
- package/dist/components/Form/FieldError/FieldError.mjs +2 -2
- package/dist/components/Form/FieldError/FieldError.mjs.map +1 -1
- package/dist/components/Form/FormModalFooter/FormModalFooter.d.ts.map +1 -1
- package/dist/components/Form/FormModalFooter/FormModalFooter.js +19 -1
- package/dist/components/Form/FormModalFooter/FormModalFooter.js.map +1 -1
- package/dist/components/Form/FormModalFooter/FormModalFooter.mjs +19 -1
- package/dist/components/Form/FormModalFooter/FormModalFooter.mjs.map +1 -1
- package/dist/components/Form/FormSection/CollapsibleFormSection.js +1 -0
- package/dist/components/Form/FormSection/CollapsibleFormSection.js.map +1 -1
- package/dist/components/Form/FormSection/CollapsibleFormSection.mjs +1 -0
- package/dist/components/Form/FormSection/CollapsibleFormSection.mjs.map +1 -1
- package/dist/components/FormLabel/FormLabel.js +1 -1
- package/dist/components/FormLabel/FormLabel.js.map +1 -1
- package/dist/components/FormLabel/FormLabel.mjs +1 -1
- package/dist/components/FormLabel/FormLabel.mjs.map +1 -1
- package/dist/components/Icon/_utils/createIcon.d.ts +2 -2
- package/dist/components/Icon/_utils/createIcon.js +2 -2
- package/dist/components/Icon/_utils/createIcon.mjs +2 -2
- package/dist/components/Icon/_utils/createIconGroup.d.ts +1 -1
- package/dist/components/Icon/_utils/createIconGroup.js +1 -1
- package/dist/components/Icon/_utils/createIconGroup.mjs +1 -1
- package/dist/components/IconButton/IconButton.d.ts.map +1 -1
- package/dist/components/IconButton/IconButton.js +20 -10
- package/dist/components/IconButton/IconButton.js.map +1 -1
- package/dist/components/IconButton/IconButton.mjs +20 -10
- package/dist/components/IconButton/IconButton.mjs.map +1 -1
- package/dist/components/IconButton/IconButton.styles.d.ts +24 -8
- package/dist/components/IconButton/IconButton.styles.d.ts.map +1 -1
- package/dist/components/IconButton/IconButton.styles.js +77 -11
- package/dist/components/IconButton/IconButton.styles.js.map +1 -1
- package/dist/components/IconButton/IconButton.styles.mjs +77 -13
- package/dist/components/IconButton/IconButton.styles.mjs.map +1 -1
- package/dist/components/IconButton/IconButton.types.d.ts +25 -20
- package/dist/components/IconButton/IconButton.types.d.ts.map +1 -1
- package/dist/components/IconButton/index.d.ts +1 -1
- package/dist/components/IconButton/index.d.ts.map +1 -1
- package/dist/components/InlineCode/InlineCode.js +6 -6
- package/dist/components/InlineCode/InlineCode.js.map +1 -1
- package/dist/components/InlineCode/InlineCode.mjs +6 -6
- package/dist/components/InlineCode/InlineCode.mjs.map +1 -1
- package/dist/components/Input/Input.d.ts.map +1 -1
- package/dist/components/Input/Input.js +12 -10
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/Input/Input.mjs +12 -10
- package/dist/components/Input/Input.mjs.map +1 -1
- package/dist/components/LineGraph/LineGraph.d.ts.map +1 -1
- package/dist/components/LineGraph/LineGraph.js +28 -8
- package/dist/components/LineGraph/LineGraph.js.map +1 -1
- package/dist/components/LineGraph/LineGraph.mjs +28 -8
- package/dist/components/LineGraph/LineGraph.mjs.map +1 -1
- package/dist/components/LineGraph/seriesColors.d.ts +22 -0
- package/dist/components/LineGraph/seriesColors.d.ts.map +1 -0
- package/dist/components/LineGraph/seriesColors.js +26 -0
- package/dist/components/LineGraph/seriesColors.js.map +1 -0
- package/dist/components/LineGraph/seriesColors.mjs +23 -0
- package/dist/components/LineGraph/seriesColors.mjs.map +1 -0
- package/dist/components/Loaders/LoaderStatus.d.ts +21 -0
- package/dist/components/Loaders/LoaderStatus.d.ts.map +1 -0
- package/dist/components/Loaders/LoaderStatus.js +29 -0
- package/dist/components/Loaders/LoaderStatus.js.map +1 -0
- package/dist/components/Loaders/LoaderStatus.mjs +27 -0
- package/dist/components/Loaders/LoaderStatus.mjs.map +1 -0
- package/dist/components/Loaders/Loaders.styles.d.ts +21 -0
- package/dist/components/Loaders/Loaders.styles.d.ts.map +1 -0
- package/dist/components/Loaders/Loaders.styles.js +33 -0
- package/dist/components/Loaders/Loaders.styles.js.map +1 -0
- package/dist/components/Loaders/Loaders.styles.mjs +29 -0
- package/dist/components/Loaders/Loaders.styles.mjs.map +1 -0
- package/dist/components/Loaders/Loaders.translations.json.js +19 -0
- package/dist/components/Loaders/Loaders.translations.json.js.map +1 -0
- package/dist/components/Loaders/Loaders.translations.json.mjs +14 -0
- package/dist/components/Loaders/Loaders.translations.json.mjs.map +1 -0
- package/dist/components/Loaders/PageLoader.d.ts +10 -2
- package/dist/components/Loaders/PageLoader.d.ts.map +1 -1
- package/dist/components/Loaders/PageLoader.js +6 -3
- package/dist/components/Loaders/PageLoader.js.map +1 -1
- package/dist/components/Loaders/PageLoader.mjs +7 -4
- package/dist/components/Loaders/PageLoader.mjs.map +1 -1
- package/dist/components/Loaders/SectionLoader.d.ts +2 -4
- package/dist/components/Loaders/SectionLoader.d.ts.map +1 -1
- package/dist/components/Loaders/SectionLoader.js +5 -2
- package/dist/components/Loaders/SectionLoader.js.map +1 -1
- package/dist/components/Loaders/SectionLoader.mjs +6 -3
- package/dist/components/Loaders/SectionLoader.mjs.map +1 -1
- package/dist/components/Loaders/ThinkingDots.d.ts +10 -0
- package/dist/components/Loaders/ThinkingDots.d.ts.map +1 -0
- package/dist/components/Loaders/ThinkingDots.js +20 -0
- package/dist/components/Loaders/ThinkingDots.js.map +1 -0
- package/dist/components/Loaders/ThinkingDots.mjs +18 -0
- package/dist/components/Loaders/ThinkingDots.mjs.map +1 -0
- package/dist/components/Loaders/index.d.ts +2 -1
- package/dist/components/Loaders/index.d.ts.map +1 -1
- package/dist/components/LogicianProvider/LogicianProvider.d.ts +12 -0
- package/dist/components/LogicianProvider/LogicianProvider.d.ts.map +1 -1
- package/dist/components/LogicianProvider/LogicianProvider.js +15 -5
- package/dist/components/LogicianProvider/LogicianProvider.js.map +1 -1
- package/dist/components/LogicianProvider/LogicianProvider.mjs +16 -6
- package/dist/components/LogicianProvider/LogicianProvider.mjs.map +1 -1
- package/dist/components/Menu/MenuItem.d.ts.map +1 -1
- package/dist/components/Menu/MenuItem.js +10 -6
- package/dist/components/Menu/MenuItem.js.map +1 -1
- package/dist/components/Menu/MenuItem.mjs +10 -6
- package/dist/components/Menu/MenuItem.mjs.map +1 -1
- package/dist/components/Menu/MenuList.js +1 -1
- package/dist/components/Menu/MenuList.js.map +1 -1
- package/dist/components/Menu/MenuList.mjs +1 -1
- package/dist/components/Menu/MenuList.mjs.map +1 -1
- package/dist/components/Modal/Modal.d.ts +1 -1
- package/dist/components/Modal/Modal.d.ts.map +1 -1
- package/dist/components/Modal/Modal.js +2 -2
- package/dist/components/Modal/Modal.js.map +1 -1
- package/dist/components/Modal/Modal.mjs +2 -2
- package/dist/components/Modal/Modal.mjs.map +1 -1
- package/dist/components/Modal/Modal.types.d.ts +12 -0
- package/dist/components/Modal/Modal.types.d.ts.map +1 -1
- package/dist/components/Modal/ModalContext.d.ts +2 -0
- package/dist/components/Modal/ModalContext.d.ts.map +1 -1
- package/dist/components/Modal/ModalContext.js +1 -0
- package/dist/components/Modal/ModalContext.js.map +1 -1
- package/dist/components/Modal/ModalContext.mjs +1 -0
- package/dist/components/Modal/ModalContext.mjs.map +1 -1
- package/dist/components/Modal/ModalHeader.d.ts +20 -1
- package/dist/components/Modal/ModalHeader.d.ts.map +1 -1
- package/dist/components/Modal/ModalHeader.js +46 -2
- package/dist/components/Modal/ModalHeader.js.map +1 -1
- package/dist/components/Modal/ModalHeader.mjs +47 -3
- package/dist/components/Modal/ModalHeader.mjs.map +1 -1
- package/dist/components/Modal/index.d.ts +2 -2
- package/dist/components/Modal/index.d.ts.map +1 -1
- package/dist/components/MonthPicker/MonthButton/MonthButton.d.ts.map +1 -1
- package/dist/components/MonthPicker/MonthButton/MonthButton.js +10 -9
- package/dist/components/MonthPicker/MonthButton/MonthButton.js.map +1 -1
- package/dist/components/MonthPicker/MonthButton/MonthButton.mjs +10 -9
- package/dist/components/MonthPicker/MonthButton/MonthButton.mjs.map +1 -1
- package/dist/components/Pagination/Pagination.d.ts.map +1 -1
- package/dist/components/Pagination/Pagination.js +1 -1
- package/dist/components/Pagination/Pagination.js.map +1 -1
- package/dist/components/Pagination/Pagination.mjs +1 -1
- package/dist/components/Pagination/Pagination.mjs.map +1 -1
- package/dist/components/PinInput/PinInput.d.ts.map +1 -1
- package/dist/components/PinInput/PinInput.js +5 -1
- package/dist/components/PinInput/PinInput.js.map +1 -1
- package/dist/components/PinInput/PinInput.mjs +5 -1
- package/dist/components/PinInput/PinInput.mjs.map +1 -1
- package/dist/components/ProgressBar/ProgressBar.js +1 -1
- package/dist/components/ProgressBar/ProgressBar.mjs +1 -1
- package/dist/components/RadialProgress/RadialProgress.d.ts.map +1 -1
- package/dist/components/RadialProgress/RadialProgress.js +4 -7
- package/dist/components/RadialProgress/RadialProgress.js.map +1 -1
- package/dist/components/RadialProgress/RadialProgress.mjs +4 -7
- package/dist/components/RadialProgress/RadialProgress.mjs.map +1 -1
- package/dist/components/RadialProgress/RadialProgress.types.d.ts +1 -1
- package/dist/components/RadialProgress/RadialProgress.types.d.ts.map +1 -1
- package/dist/components/Radio/RadioControl.d.ts.map +1 -1
- package/dist/components/Radio/RadioControl.js +26 -5
- package/dist/components/Radio/RadioControl.js.map +1 -1
- package/dist/components/Radio/RadioControl.mjs +26 -5
- package/dist/components/Radio/RadioControl.mjs.map +1 -1
- package/dist/components/Radio/RadioGroup.js +1 -1
- package/dist/components/Radio/RadioGroup.js.map +1 -1
- package/dist/components/Radio/RadioGroup.mjs +1 -1
- package/dist/components/Radio/RadioGroup.mjs.map +1 -1
- package/dist/components/SeeMoreButton/SeeMoreButton.d.ts.map +1 -1
- package/dist/components/SeeMoreButton/SeeMoreButton.js +8 -3
- package/dist/components/SeeMoreButton/SeeMoreButton.js.map +1 -1
- package/dist/components/SeeMoreButton/SeeMoreButton.mjs +8 -3
- package/dist/components/SeeMoreButton/SeeMoreButton.mjs.map +1 -1
- package/dist/components/SeeMoreButton/SeeMoreButton.styles.d.ts +20 -10
- package/dist/components/SeeMoreButton/SeeMoreButton.styles.d.ts.map +1 -1
- package/dist/components/SeeMoreButton/SeeMoreButton.styles.js +13 -5
- package/dist/components/SeeMoreButton/SeeMoreButton.styles.js.map +1 -1
- package/dist/components/SeeMoreButton/SeeMoreButton.styles.mjs +13 -5
- package/dist/components/SeeMoreButton/SeeMoreButton.styles.mjs.map +1 -1
- package/dist/components/SeeMoreButton/SeeMoreButton.types.d.ts +6 -2
- package/dist/components/SeeMoreButton/SeeMoreButton.types.d.ts.map +1 -1
- package/dist/components/Select/Select.styles.d.ts +13 -12
- package/dist/components/Select/Select.styles.d.ts.map +1 -1
- package/dist/components/Select/Select.styles.js +20 -14
- package/dist/components/Select/Select.styles.js.map +1 -1
- package/dist/components/Select/Select.styles.mjs +20 -14
- package/dist/components/Select/Select.styles.mjs.map +1 -1
- package/dist/components/Slider/SliderThumb/SliderThumb.js +1 -1
- package/dist/components/Slider/SliderThumb/SliderThumb.js.map +1 -1
- package/dist/components/Slider/SliderThumb/SliderThumb.mjs +1 -1
- package/dist/components/Slider/SliderThumb/SliderThumb.mjs.map +1 -1
- package/dist/components/Slider/SliderThumbs/SliderThumbs.js +1 -1
- package/dist/components/Slider/SliderThumbs/SliderThumbs.js.map +1 -1
- package/dist/components/Slider/SliderThumbs/SliderThumbs.mjs +1 -1
- package/dist/components/Slider/SliderThumbs/SliderThumbs.mjs.map +1 -1
- package/dist/components/Switch/SwitchControl.d.ts.map +1 -1
- package/dist/components/Switch/SwitchControl.js +8 -2
- package/dist/components/Switch/SwitchControl.js.map +1 -1
- package/dist/components/Switch/SwitchControl.mjs +8 -2
- package/dist/components/Switch/SwitchControl.mjs.map +1 -1
- package/dist/components/Table/Table.types.d.ts +1 -1
- package/dist/components/Tabs/Tab/Tab.d.ts.map +1 -1
- package/dist/components/Tabs/Tab/Tab.js +1 -1
- package/dist/components/Tabs/Tab/Tab.js.map +1 -1
- package/dist/components/Tabs/Tab/Tab.mjs +1 -1
- package/dist/components/Tabs/Tab/Tab.mjs.map +1 -1
- package/dist/components/Tabs/Tab/Tab.styles.d.ts +10 -12
- package/dist/components/Tabs/Tab/Tab.styles.d.ts.map +1 -1
- package/dist/components/Tabs/Tab/Tab.styles.js +8 -10
- package/dist/components/Tabs/Tab/Tab.styles.js.map +1 -1
- package/dist/components/Tabs/Tab/Tab.styles.mjs +8 -10
- package/dist/components/Tabs/Tab/Tab.styles.mjs.map +1 -1
- package/dist/components/Tag/Tag.d.ts.map +1 -1
- package/dist/components/Tag/Tag.js +41 -14
- package/dist/components/Tag/Tag.js.map +1 -1
- package/dist/components/Tag/Tag.mjs +43 -16
- package/dist/components/Tag/Tag.mjs.map +1 -1
- package/dist/components/Tag/Tag.styles.d.ts +55 -17
- package/dist/components/Tag/Tag.styles.d.ts.map +1 -1
- package/dist/components/Tag/Tag.styles.js +148 -128
- package/dist/components/Tag/Tag.styles.js.map +1 -1
- package/dist/components/Tag/Tag.styles.mjs +145 -126
- package/dist/components/Tag/Tag.styles.mjs.map +1 -1
- package/dist/components/Tag/Tag.types.d.ts +50 -29
- package/dist/components/Tag/Tag.types.d.ts.map +1 -1
- package/dist/components/Tag/TagCloseButton/TagCloseButton.d.ts +5 -0
- package/dist/components/Tag/TagCloseButton/TagCloseButton.d.ts.map +1 -1
- package/dist/components/Tag/TagCloseButton/TagCloseButton.js +7 -1
- package/dist/components/Tag/TagCloseButton/TagCloseButton.js.map +1 -1
- package/dist/components/Tag/TagCloseButton/TagCloseButton.mjs +7 -1
- package/dist/components/Tag/TagCloseButton/TagCloseButton.mjs.map +1 -1
- package/dist/components/Tag/index.d.ts +3 -2
- package/dist/components/Tag/index.d.ts.map +1 -1
- package/dist/components/Textarea/Textarea.d.ts.map +1 -1
- package/dist/components/Textarea/Textarea.js +12 -10
- package/dist/components/Textarea/Textarea.js.map +1 -1
- package/dist/components/Textarea/Textarea.mjs +12 -10
- package/dist/components/Textarea/Textarea.mjs.map +1 -1
- package/dist/components/Toast/Toast.js +1 -1
- package/dist/components/Toast/Toast.mjs +1 -1
- package/dist/components/Toast/Toast.styles.d.ts +5 -3
- package/dist/components/Toast/Toast.styles.d.ts.map +1 -1
- package/dist/components/Toast/Toast.styles.js +54 -35
- package/dist/components/Toast/Toast.styles.js.map +1 -1
- package/dist/components/Toast/Toast.styles.mjs +54 -35
- package/dist/components/Toast/Toast.styles.mjs.map +1 -1
- package/dist/components/Toast/Toast.types.d.ts +8 -1
- package/dist/components/Toast/Toast.types.d.ts.map +1 -1
- package/dist/components/Toast/ToastIcon/ToastIcon.d.ts.map +1 -1
- package/dist/components/Toast/ToastIcon/ToastIcon.js +6 -4
- package/dist/components/Toast/ToastIcon/ToastIcon.js.map +1 -1
- package/dist/components/Toast/ToastIcon/ToastIcon.mjs +6 -4
- package/dist/components/Toast/ToastIcon/ToastIcon.mjs.map +1 -1
- package/dist/components/Toast/Toaster.d.ts.map +1 -1
- package/dist/components/Toast/Toaster.js +12 -1
- package/dist/components/Toast/Toaster.js.map +1 -1
- package/dist/components/Toast/Toaster.mjs +12 -1
- package/dist/components/Toast/Toaster.mjs.map +1 -1
- package/dist/components/Toast/useToast.d.ts +2 -2
- package/dist/components/Toast/useToast.d.ts.map +1 -1
- package/dist/components/Toast/useToast.js +42 -8
- package/dist/components/Toast/useToast.js.map +1 -1
- package/dist/components/Toast/useToast.mjs +43 -9
- package/dist/components/Toast/useToast.mjs.map +1 -1
- package/dist/components/Tooltip/Tooltip.js +2 -2
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.mjs +2 -2
- package/dist/components/Tooltip/Tooltip.mjs.map +1 -1
- package/dist/components/Tree/TreeBranchControl.js +1 -1
- package/dist/components/Tree/TreeBranchControl.js.map +1 -1
- package/dist/components/Tree/TreeBranchControl.mjs +1 -1
- package/dist/components/Tree/TreeBranchControl.mjs.map +1 -1
- package/dist/components/Tree/TreeItem.js +1 -1
- package/dist/components/Tree/TreeItem.js.map +1 -1
- package/dist/components/Tree/TreeItem.mjs +1 -1
- package/dist/components/Tree/TreeItem.mjs.map +1 -1
- package/dist/components/Typography/Caption.js +5 -5
- package/dist/components/Typography/Caption.js.map +1 -1
- package/dist/components/Typography/Caption.mjs +5 -5
- package/dist/components/Typography/Caption.mjs.map +1 -1
- package/dist/components/Typography/Link.d.ts +10 -16
- package/dist/components/Typography/Link.d.ts.map +1 -1
- package/dist/components/Typography/Link.js +24 -29
- package/dist/components/Typography/Link.js.map +1 -1
- package/dist/components/Typography/Link.mjs +24 -29
- package/dist/components/Typography/Link.mjs.map +1 -1
- package/dist/components/Typography/Overline.js +2 -2
- package/dist/components/Typography/Overline.js.map +1 -1
- package/dist/components/Typography/Overline.mjs +2 -2
- package/dist/components/Typography/Overline.mjs.map +1 -1
- package/dist/components/Workflow/Workflow.js +1 -1
- package/dist/components/Workflow/Workflow.js.map +1 -1
- package/dist/components/Workflow/Workflow.mjs +1 -1
- package/dist/components/Workflow/Workflow.mjs.map +1 -1
- package/dist/components/Workflow/canvas/Canvas/BranchLabelBadge.d.ts.map +1 -1
- package/dist/components/Workflow/canvas/Canvas/BranchLabelBadge.js +7 -6
- package/dist/components/Workflow/canvas/Canvas/BranchLabelBadge.js.map +1 -1
- package/dist/components/Workflow/canvas/Canvas/BranchLabelBadge.mjs +7 -6
- package/dist/components/Workflow/canvas/Canvas/BranchLabelBadge.mjs.map +1 -1
- package/dist/components/Workflow/canvas/Canvas/Canvas.js +8 -8
- package/dist/components/Workflow/canvas/Canvas/Canvas.js.map +1 -1
- package/dist/components/Workflow/canvas/Canvas/Canvas.mjs +8 -8
- package/dist/components/Workflow/canvas/Canvas/Canvas.mjs.map +1 -1
- package/dist/components/Workflow/canvas/Canvas/Canvas.styles.d.ts +2 -2
- package/dist/components/Workflow/canvas/Canvas/Canvas.styles.d.ts.map +1 -1
- package/dist/components/Workflow/canvas/Canvas/Canvas.styles.js +13 -12
- package/dist/components/Workflow/canvas/Canvas/Canvas.styles.js.map +1 -1
- package/dist/components/Workflow/canvas/Canvas/Canvas.styles.mjs +13 -12
- package/dist/components/Workflow/canvas/Canvas/Canvas.styles.mjs.map +1 -1
- package/dist/components/Workflow/canvas/Canvas/LabeledEdge.js +1 -1
- package/dist/components/Workflow/canvas/Canvas/LabeledEdge.js.map +1 -1
- package/dist/components/Workflow/canvas/Canvas/LabeledEdge.mjs +1 -1
- package/dist/components/Workflow/canvas/Canvas/LabeledEdge.mjs.map +1 -1
- package/dist/components/Workflow/canvas/CollapsibleSection/CollapsibleSection.js +1 -1
- package/dist/components/Workflow/canvas/CollapsibleSection/CollapsibleSection.js.map +1 -1
- package/dist/components/Workflow/canvas/CollapsibleSection/CollapsibleSection.mjs +1 -1
- package/dist/components/Workflow/canvas/CollapsibleSection/CollapsibleSection.mjs.map +1 -1
- package/dist/components/Workflow/canvas/DrawerShell/DrawerHeader.d.ts.map +1 -1
- package/dist/components/Workflow/canvas/DrawerShell/DrawerHeader.js +1 -1
- package/dist/components/Workflow/canvas/DrawerShell/DrawerHeader.js.map +1 -1
- package/dist/components/Workflow/canvas/DrawerShell/DrawerHeader.mjs +1 -1
- package/dist/components/Workflow/canvas/DrawerShell/DrawerHeader.mjs.map +1 -1
- package/dist/components/Workflow/canvas/DrawerShell/DrawerIssues.js +2 -2
- package/dist/components/Workflow/canvas/DrawerShell/DrawerIssues.js.map +1 -1
- package/dist/components/Workflow/canvas/DrawerShell/DrawerIssues.mjs +2 -2
- package/dist/components/Workflow/canvas/DrawerShell/DrawerIssues.mjs.map +1 -1
- package/dist/components/Workflow/canvas/DrawerShell/DrawerShell.js +5 -4
- package/dist/components/Workflow/canvas/DrawerShell/DrawerShell.js.map +1 -1
- package/dist/components/Workflow/canvas/DrawerShell/DrawerShell.mjs +5 -4
- package/dist/components/Workflow/canvas/DrawerShell/DrawerShell.mjs.map +1 -1
- package/dist/components/Workflow/canvas/EdgeInspector/BuiltInEdgeInspector.js +2 -2
- package/dist/components/Workflow/canvas/EdgeInspector/BuiltInEdgeInspector.js.map +1 -1
- package/dist/components/Workflow/canvas/EdgeInspector/BuiltInEdgeInspector.mjs +2 -2
- package/dist/components/Workflow/canvas/EdgeInspector/BuiltInEdgeInspector.mjs.map +1 -1
- package/dist/components/Workflow/canvas/FieldWrapper/FieldWrapper.js +1 -1
- package/dist/components/Workflow/canvas/FieldWrapper/FieldWrapper.js.map +1 -1
- package/dist/components/Workflow/canvas/FieldWrapper/FieldWrapper.mjs +1 -1
- package/dist/components/Workflow/canvas/FieldWrapper/FieldWrapper.mjs.map +1 -1
- package/dist/components/Workflow/canvas/GraphErrorBanner/GraphErrorBanner.js +1 -1
- package/dist/components/Workflow/canvas/GraphErrorBanner/GraphErrorBanner.js.map +1 -1
- package/dist/components/Workflow/canvas/GraphErrorBanner/GraphErrorBanner.mjs +1 -1
- package/dist/components/Workflow/canvas/GraphErrorBanner/GraphErrorBanner.mjs.map +1 -1
- package/dist/components/Workflow/canvas/IconTile/IconTile.styles.d.ts +11 -3
- package/dist/components/Workflow/canvas/IconTile/IconTile.styles.d.ts.map +1 -1
- package/dist/components/Workflow/canvas/IconTile/IconTile.styles.js +29 -13
- package/dist/components/Workflow/canvas/IconTile/IconTile.styles.js.map +1 -1
- package/dist/components/Workflow/canvas/IconTile/IconTile.styles.mjs +29 -13
- package/dist/components/Workflow/canvas/IconTile/IconTile.styles.mjs.map +1 -1
- package/dist/components/Workflow/canvas/IssueList/IssueList.js +2 -2
- package/dist/components/Workflow/canvas/IssueList/IssueList.js.map +1 -1
- package/dist/components/Workflow/canvas/IssueList/IssueList.mjs +2 -2
- package/dist/components/Workflow/canvas/IssueList/IssueList.mjs.map +1 -1
- package/dist/components/Workflow/canvas/NodePalette/NodePalette.d.ts.map +1 -1
- package/dist/components/Workflow/canvas/NodePalette/NodePalette.js +2 -2
- package/dist/components/Workflow/canvas/NodePalette/NodePalette.js.map +1 -1
- package/dist/components/Workflow/canvas/NodePalette/NodePalette.mjs +2 -2
- package/dist/components/Workflow/canvas/NodePalette/NodePalette.mjs.map +1 -1
- package/dist/components/Workflow/canvas/NodePalette/NodePaletteToggle.d.ts.map +1 -1
- package/dist/components/Workflow/canvas/NodePalette/NodePaletteToggle.js +1 -1
- package/dist/components/Workflow/canvas/NodePalette/NodePaletteToggle.js.map +1 -1
- package/dist/components/Workflow/canvas/NodePalette/NodePaletteToggle.mjs +1 -1
- package/dist/components/Workflow/canvas/NodePalette/NodePaletteToggle.mjs.map +1 -1
- package/dist/components/Workflow/canvas/NodeShell/NodeShell.d.ts.map +1 -1
- package/dist/components/Workflow/canvas/NodeShell/NodeShell.js +42 -32
- package/dist/components/Workflow/canvas/NodeShell/NodeShell.js.map +1 -1
- package/dist/components/Workflow/canvas/NodeShell/NodeShell.mjs +42 -32
- package/dist/components/Workflow/canvas/NodeShell/NodeShell.mjs.map +1 -1
- package/dist/components/Workflow/canvas/NodeShell/NodeShell.styles.d.ts +9 -4
- package/dist/components/Workflow/canvas/NodeShell/NodeShell.styles.d.ts.map +1 -1
- package/dist/components/Workflow/canvas/NodeShell/NodeShell.styles.js +8 -8
- package/dist/components/Workflow/canvas/NodeShell/NodeShell.styles.js.map +1 -1
- package/dist/components/Workflow/canvas/NodeShell/NodeShell.styles.mjs +7 -7
- package/dist/components/Workflow/canvas/NodeShell/NodeShell.styles.mjs.map +1 -1
- package/dist/components/Workflow/canvas/NodeShell/NodeShell.types.d.ts +2 -0
- package/dist/components/Workflow/canvas/NodeShell/NodeShell.types.d.ts.map +1 -1
- package/dist/components/Workflow/canvas/SeverityDot/SeverityDot.d.ts +5 -4
- package/dist/components/Workflow/canvas/SeverityDot/SeverityDot.d.ts.map +1 -1
- package/dist/components/Workflow/canvas/SeverityDot/SeverityDot.js +1 -1
- package/dist/components/Workflow/canvas/SeverityDot/SeverityDot.js.map +1 -1
- package/dist/components/Workflow/canvas/SeverityDot/SeverityDot.mjs +1 -1
- package/dist/components/Workflow/canvas/SeverityDot/SeverityDot.mjs.map +1 -1
- package/dist/components/Workflow/canvas/colorVar.d.ts +20 -0
- package/dist/components/Workflow/canvas/colorVar.d.ts.map +1 -0
- package/dist/components/Workflow/canvas/colorVar.js +32 -0
- package/dist/components/Workflow/canvas/colorVar.js.map +1 -0
- package/dist/components/Workflow/canvas/colorVar.mjs +29 -0
- package/dist/components/Workflow/canvas/colorVar.mjs.map +1 -0
- package/dist/components/Workflow/canvas/issueSeverity.d.ts +6 -4
- package/dist/components/Workflow/canvas/issueSeverity.d.ts.map +1 -1
- package/dist/components/Workflow/canvas/issueSeverity.js +6 -4
- package/dist/components/Workflow/canvas/issueSeverity.js.map +1 -1
- package/dist/components/Workflow/canvas/issueSeverity.mjs +6 -4
- package/dist/components/Workflow/canvas/issueSeverity.mjs.map +1 -1
- package/dist/components/Workflow/canvas/workflowLabelProps.d.ts +1 -1
- package/dist/components/Workflow/canvas/workflowLabelProps.js +1 -1
- package/dist/components/Workflow/canvas/workflowLabelProps.mjs +1 -1
- package/dist/index.d.ts +5 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +24 -9
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +11 -8
- package/dist/index.mjs.map +1 -1
- package/dist/theme/colors.d.ts +43 -1139
- package/dist/theme/colors.d.ts.map +1 -1
- package/dist/theme/colors.js +336 -760
- package/dist/theme/colors.js.map +1 -1
- package/dist/theme/colors.mjs +334 -761
- package/dist/theme/colors.mjs.map +1 -1
- package/dist/theme/deprecatedColorTokens.json.js +69 -0
- package/dist/theme/deprecatedColorTokens.json.js.map +1 -0
- package/dist/theme/deprecatedColorTokens.json.mjs +64 -0
- package/dist/theme/deprecatedColorTokens.json.mjs.map +1 -0
- package/dist/theme/global.d.ts +3 -2
- package/dist/theme/global.d.ts.map +1 -1
- package/dist/theme/global.js +12 -18
- package/dist/theme/global.js.map +1 -1
- package/dist/theme/global.mjs +12 -18
- package/dist/theme/global.mjs.map +1 -1
- package/dist/theme/index.d.ts +34 -1
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/index.js +143 -81
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/index.mjs +144 -84
- package/dist/theme/index.mjs.map +1 -1
- package/dist/theme/palette.generated.d.ts +887 -0
- package/dist/theme/palette.generated.d.ts.map +1 -0
- package/dist/theme/palette.generated.js +898 -0
- package/dist/theme/palette.generated.js.map +1 -0
- package/dist/theme/palette.generated.mjs +893 -0
- package/dist/theme/palette.generated.mjs.map +1 -0
- package/dist/theme/paletteSwatches.d.ts +22 -0
- package/dist/theme/paletteSwatches.d.ts.map +1 -0
- package/dist/theme/recipes/table.js +2 -2
- package/dist/theme/recipes/table.js.map +1 -1
- package/dist/theme/recipes/table.mjs +2 -2
- package/dist/theme/recipes/table.mjs.map +1 -1
- package/dist/utils/disabledControl.d.ts +27 -0
- package/dist/utils/disabledControl.d.ts.map +1 -0
- package/dist/utils/disabledControl.js +33 -0
- package/dist/utils/disabledControl.js.map +1 -0
- package/dist/utils/disabledControl.mjs +30 -0
- package/dist/utils/disabledControl.mjs.map +1 -0
- package/dist/utils/focusRing.d.ts +7 -1
- package/dist/utils/focusRing.d.ts.map +1 -1
- package/dist/utils/focusRing.js +8 -1
- package/dist/utils/focusRing.js.map +1 -1
- package/dist/utils/focusRing.mjs +8 -2
- package/dist/utils/focusRing.mjs.map +1 -1
- package/dist/utils/isDev.d.ts +22 -0
- package/dist/utils/isDev.d.ts.map +1 -0
- package/dist/utils/isDev.js +34 -0
- package/dist/utils/isDev.js.map +1 -0
- package/dist/utils/isDev.mjs +32 -0
- package/dist/utils/isDev.mjs.map +1 -0
- package/eslint/index.js +28 -0
- package/eslint/rules/no-deprecated-tokens.js +128 -0
- package/eslint/rules/no-deprecated-tokens.test.ts +130 -0
- package/package.json +16 -7
- package/src/components/Accordion/Accordion.stories.tsx +20 -12
- package/src/components/Appear/Appear.stories.tsx +6 -13
- package/src/components/Avatar/Avatar.hue.test.ts +67 -0
- package/src/components/Avatar/Avatar.stories.tsx +79 -23
- package/src/components/Avatar/Avatar.tsx +56 -2
- package/src/components/Avatar/index.tsx +1 -1
- package/src/components/Badge/Badge.stories.tsx +24 -50
- package/src/components/Badge/Badge.styles.ts +56 -50
- package/src/components/Badge/Badge.tsx +11 -7
- package/src/components/Badge/Badge.types.ts +18 -14
- package/src/components/Badge/index.ts +7 -1
- package/src/components/Banner/Banner.stories.tsx +10 -3
- package/src/components/Banner/Banner.styles.ts +43 -27
- package/src/components/Banner/Banner.types.ts +1 -1
- package/src/components/BottomSheet/BottomSheet.stories.tsx +3 -4
- package/src/components/BottomSheet/BottomSheetCloseButton.tsx +0 -1
- package/src/components/Breadcrumb/BreadcrumbLink/BreadcrumbLink.tsx +1 -1
- package/src/components/Button/Button.legacy.ts +181 -0
- package/src/components/Button/Button.lift.test.tsx +6 -14
- package/src/components/Button/Button.press.test.tsx +20 -15
- package/src/components/Button/Button.stories.tsx +140 -346
- package/src/components/Button/Button.styles.ts +158 -392
- package/src/components/Button/Button.tsx +49 -17
- package/src/components/Button/Button.types.ts +53 -37
- package/src/components/Button/Button.variants.test.tsx +158 -0
- package/src/components/Button/index.tsx +2 -0
- package/src/components/Card/Card.styles.ts +6 -13
- package/src/components/Card/Card.tsx +1 -6
- package/src/components/Card/Card.types.ts +1 -5
- package/src/components/Checkbox/CheckboxControl.tsx +17 -10
- package/src/components/Chip/Chip.stories.tsx +17 -230
- package/src/components/Chip/Chip.tsx +40 -24
- package/src/components/Chip/Chip.types.ts +38 -26
- package/src/components/Chip/index.ts +0 -6
- package/src/components/Code/Code.tsx +2 -3
- package/src/components/CodeTabs/CodeTabs.contrast.test.tsx +109 -0
- package/src/components/CodeTabs/CodeTabs.styles.ts +26 -0
- package/src/components/CodeTabs/CodeTabs.tsx +16 -4
- package/src/components/CodeTabs/CopyButton.tsx +6 -4
- package/src/components/Confetti/Confetti.stories.tsx +1 -1
- package/src/components/Confetti/Confetti.tsx +8 -43
- package/src/components/Confetti/confettiColors.test.ts +47 -0
- package/src/components/Confetti/confettiColors.ts +41 -0
- package/src/components/Container/Container.stories.tsx +1 -1
- package/src/components/CopyableCode/CopyableCode.tsx +1 -2
- package/src/components/CountBadge/CountBadge.stories.tsx +109 -0
- package/src/components/CountBadge/CountBadge.styles.ts +40 -0
- package/src/components/CountBadge/CountBadge.test.tsx +57 -0
- package/src/components/CountBadge/CountBadge.tsx +112 -0
- package/src/components/CountBadge/CountBadge.types.ts +34 -0
- package/src/components/CountBadge/index.ts +2 -0
- package/src/components/DatePicker/RangeDatePicker.tsx +8 -8
- package/src/components/DatePicker/SingleDatePicker.tsx +5 -5
- package/src/components/ErrorFallback/ErrorFallback.lift.test.tsx +45 -0
- package/src/components/ErrorFallback/ErrorFallback.tsx +16 -31
- package/src/components/ExpandableText/ExpandableText.tsx +1 -1
- package/src/components/FileItem/FileItem.tsx +1 -4
- package/src/components/FlyTo/FlyTo.stories.tsx +6 -1
- package/src/components/Form/FieldError/FieldError.tsx +2 -2
- package/src/components/Form/FormFooter/FormFooter.stories.tsx +4 -4
- package/src/components/Form/FormModalFooter/FormModalFooter.tsx +5 -6
- package/src/components/Form/FormSection/FormSection.stories.tsx +1 -1
- package/src/components/FormIntegration/FormIntegration.stories.tsx +4 -4
- package/src/components/FormLabel/FormLabel.tsx +1 -1
- package/src/components/Icon/ICON_MANAGEMENT.md +7 -7
- package/src/components/Icon/Icon.stories.tsx +220 -116
- package/src/components/Icon/_utils/createIcon.tsx +2 -2
- package/src/components/Icon/_utils/createIconGroup.tsx +1 -1
- package/src/components/IconButton/IconButton.stories.tsx +63 -216
- package/src/components/IconButton/IconButton.styles.ts +104 -27
- package/src/components/IconButton/IconButton.tsx +39 -12
- package/src/components/IconButton/IconButton.types.ts +30 -20
- package/src/components/IconButton/index.tsx +1 -0
- package/src/components/InlineCode/InlineCode.tsx +6 -6
- package/src/components/Input/Input.stories.tsx +10 -10
- package/src/components/Input/Input.tsx +12 -10
- package/src/components/LineGraph/LineGraph.tsx +24 -6
- package/src/components/LineGraph/seriesColors.test.ts +40 -0
- package/src/components/LineGraph/seriesColors.ts +42 -0
- package/src/components/Loaders/LoaderStatus.tsx +25 -0
- package/src/components/Loaders/Loaders.styles.ts +28 -0
- package/src/components/Loaders/Loaders.test.tsx +63 -0
- package/src/components/Loaders/Loaders.translations.json +9 -0
- package/src/components/Loaders/PageLoader.stories.tsx +15 -1
- package/src/components/Loaders/PageLoader.tsx +28 -4
- package/src/components/Loaders/SectionLoader.stories.tsx +10 -3
- package/src/components/Loaders/SectionLoader.tsx +16 -3
- package/src/components/Loaders/ThinkingDots.tsx +27 -0
- package/src/components/Loaders/index.ts +2 -1
- package/src/components/LogicianProvider/LogicianProvider.stories.tsx +28 -43
- package/src/components/LogicianProvider/LogicianProvider.tsx +35 -5
- package/src/components/Masonry/Masonry.stories.tsx +17 -5
- package/src/components/Menu/Menu.stories.tsx +58 -20
- package/src/components/Menu/MenuItem.highlight.test.tsx +72 -0
- package/src/components/Menu/MenuItem.tsx +9 -6
- package/src/components/Menu/MenuList.tsx +1 -1
- package/src/components/Modal/Modal.stories.tsx +76 -25
- package/src/components/Modal/Modal.tsx +5 -1
- package/src/components/Modal/Modal.types.ts +13 -0
- package/src/components/Modal/ModalContext.ts +4 -0
- package/src/components/Modal/ModalHeader.a11y.test.tsx +51 -0
- package/src/components/Modal/ModalHeader.tsx +73 -3
- package/src/components/Modal/index.tsx +2 -2
- package/src/components/MonthPicker/MonthButton/MonthButton.tsx +9 -14
- package/src/components/MonthPicker/MonthPicker.stories.tsx +13 -9
- package/src/components/Pagination/Pagination.stories.tsx +5 -6
- package/src/components/Pagination/Pagination.tsx +0 -2
- package/src/components/PinInput/PinInput.tsx +9 -5
- package/src/components/Popover/Popover.stories.tsx +5 -5
- package/src/components/ProgressBar/ProgressBar.tsx +1 -1
- package/src/components/Pulse/Pulse.stories.tsx +1 -1
- package/src/components/RadialProgress/RadialProgress.tsx +4 -7
- package/src/components/RadialProgress/RadialProgress.types.ts +1 -1
- package/src/components/Radio/Radio.stories.tsx +1 -1
- package/src/components/Radio/RadioControl.indicator.test.tsx +72 -0
- package/src/components/Radio/RadioControl.tsx +34 -6
- package/src/components/Radio/RadioGroup.tsx +1 -1
- package/src/components/Reveal/Reveal.stories.tsx +5 -1
- package/src/components/ScaledContext/ScaledContext.stories.tsx +21 -14
- package/src/components/SeeMoreButton/SeeMoreButton.border.test.tsx +51 -0
- package/src/components/SeeMoreButton/SeeMoreButton.stories.tsx +8 -0
- package/src/components/SeeMoreButton/SeeMoreButton.styles.ts +14 -6
- package/src/components/SeeMoreButton/SeeMoreButton.tsx +11 -2
- package/src/components/SeeMoreButton/SeeMoreButton.types.ts +9 -2
- package/src/components/SegmentedProgressBar/SegmentedProgressBar.stories.tsx +48 -31
- package/src/components/Select/Combobox.stories.tsx +1 -1
- package/src/components/Select/Comparison.stories.tsx +1 -1
- package/src/components/Select/Select.stories.tsx +22 -22
- package/src/components/Select/Select.styles.ts +20 -14
- package/src/components/Shake/Shake.stories.tsx +10 -12
- package/src/components/Slider/Slider.stories.tsx +43 -9
- package/src/components/Slider/SliderThumb/SliderThumb.tsx +1 -1
- package/src/components/Slider/SliderThumbs/SliderThumbs.tsx +1 -1
- package/src/components/SwapTransition/SwapTransition.stories.tsx +3 -4
- package/src/components/Switch/SwitchControl.tsx +8 -0
- package/src/components/Table/Table.stories.tsx +36 -20
- package/src/components/Table/Table.types.ts +1 -1
- package/src/components/Tabs/Tab/Tab.styles.ts +8 -10
- package/src/components/Tabs/Tab/Tab.tsx +1 -0
- package/src/components/Tabs/Tabs.stories.tsx +38 -26
- package/src/components/Tag/Tag.legacy.test.tsx +179 -0
- package/src/components/Tag/Tag.stories.tsx +107 -148
- package/src/components/Tag/Tag.styles.ts +186 -135
- package/src/components/Tag/Tag.test.tsx +115 -0
- package/src/components/Tag/Tag.tsx +103 -21
- package/src/components/Tag/Tag.types.ts +52 -29
- package/src/components/Tag/TagCloseButton/TagCloseButton.tsx +19 -1
- package/src/components/Tag/index.ts +5 -3
- package/src/components/Textarea/Textarea.stories.tsx +6 -1
- package/src/components/Textarea/Textarea.tsx +13 -11
- package/src/components/Toast/Toast.action.test.tsx +13 -0
- package/src/components/Toast/Toast.stories.tsx +17 -7
- package/src/components/Toast/Toast.styles.ts +54 -35
- package/src/components/Toast/Toast.tsx +1 -1
- package/src/components/Toast/Toast.types.ts +9 -1
- package/src/components/Toast/Toast.update.test.tsx +124 -0
- package/src/components/Toast/ToastIcon/ToastIcon.tsx +6 -4
- package/src/components/Toast/Toaster.tsx +14 -2
- package/src/components/Toast/useToast.tsx +54 -14
- package/src/components/Tooltip/Tooltip.stories.tsx +12 -12
- package/src/components/Tooltip/Tooltip.tsx +2 -2
- package/src/components/Tree/Tree.GuideElbow.stories.tsx +2 -2
- package/src/components/Tree/TreeBranchControl.tsx +1 -1
- package/src/components/Tree/TreeBranchIndentGuide.test.tsx +2 -2
- package/src/components/Tree/TreeItem.tsx +1 -1
- package/src/components/Typography/Caption.tsx +5 -5
- package/src/components/Typography/Link.tsx +27 -29
- package/src/components/Typography/Overline.tsx +2 -2
- package/src/components/Workflow/README.md +58 -52
- package/src/components/Workflow/Workflow.translations.json +1 -1
- package/src/components/Workflow/Workflow.tsx +1 -1
- package/src/components/Workflow/canvas/Canvas/BranchLabelBadge.tsx +7 -6
- package/src/components/Workflow/canvas/Canvas/Canvas.styles.ts +14 -12
- package/src/components/Workflow/canvas/Canvas/Canvas.tsx +9 -9
- package/src/components/Workflow/canvas/Canvas/LabeledEdge.tsx +2 -2
- package/src/components/Workflow/canvas/CollapsibleSection/CollapsibleSection.tsx +4 -4
- package/src/components/Workflow/canvas/DrawerShell/DrawerHeader.tsx +2 -4
- package/src/components/Workflow/canvas/DrawerShell/DrawerIssues.tsx +2 -2
- package/src/components/Workflow/canvas/DrawerShell/DrawerShell.tsx +6 -6
- package/src/components/Workflow/canvas/EdgeInspector/BuiltInEdgeInspector.tsx +4 -4
- package/src/components/Workflow/canvas/FieldWrapper/FieldWrapper.tsx +2 -2
- package/src/components/Workflow/canvas/GraphErrorBanner/GraphErrorBanner.tsx +12 -12
- package/src/components/Workflow/canvas/IconTile/IconTile.styles.ts +29 -13
- package/src/components/Workflow/canvas/IssueList/IssueList.tsx +3 -3
- package/src/components/Workflow/canvas/NodePalette/NodePalette.tsx +6 -7
- package/src/components/Workflow/canvas/NodePalette/NodePaletteToggle.tsx +1 -2
- package/src/components/Workflow/canvas/NodeShell/NodeShell.styles.ts +6 -8
- package/src/components/Workflow/canvas/NodeShell/NodeShell.test.tsx +79 -0
- package/src/components/Workflow/canvas/NodeShell/NodeShell.tsx +46 -37
- package/src/components/Workflow/canvas/NodeShell/NodeShell.types.ts +2 -0
- package/src/components/Workflow/canvas/SeverityDot/SeverityDot.tsx +6 -5
- package/src/components/Workflow/canvas/canvasStroke.test.ts +84 -0
- package/src/components/Workflow/canvas/colorVar.ts +26 -0
- package/src/components/Workflow/canvas/issueSeverity.ts +7 -5
- package/src/components/Workflow/canvas/workflowLabelProps.ts +1 -1
- package/src/components/Workflow/stories/Workflow.stories.tsx +4 -5
- package/src/components/a11y.kwcag.test.tsx +64 -83
- package/src/components/claude.md +40 -58
- package/src/components/noRawScales.test.ts +152 -0
- package/src/components/noSandBackground.test.ts +282 -0
- package/src/index.ts +18 -1
- package/src/stories/SizeComparison.stories.tsx +1 -1
- package/src/theme/BazePalette.stories.tsx +202 -0
- package/src/theme/Borders.stories.tsx +9 -9
- package/src/theme/Motion.stories.tsx +19 -19
- package/src/theme/MotionCases.stories.tsx +1 -1
- package/src/theme/Palette.stories.tsx +101 -515
- package/src/theme/SemanticTokens.mdx +61 -242
- package/src/theme/Surfaces.stories.tsx +3 -3
- package/src/theme/chakraTokens.test.ts +115 -0
- package/src/theme/claude.md +111 -502
- package/src/theme/colors.ts +403 -822
- package/src/theme/contrast.test.ts +344 -0
- package/src/theme/cssVarNames.test.ts +36 -0
- package/src/theme/deprecatedColorTokens.json +95 -0
- package/src/theme/global.ts +12 -19
- package/src/theme/index.ts +154 -82
- package/src/theme/palette.generated.ts +893 -0
- package/src/theme/paletteSwatches.test.ts +42 -0
- package/src/theme/paletteSwatches.ts +80 -0
- package/src/theme/recipes/table.ts +2 -2
- package/src/utils/disabledControl.ts +27 -0
- package/src/utils/focusRing.ts +9 -2
- package/src/utils/isDev.test.ts +41 -0
- package/src/utils/isDev.ts +27 -0
- package/dist/components/Chip/Chip.styles.d.ts +0 -20
- package/dist/components/Chip/Chip.styles.d.ts.map +0 -1
- package/dist/components/Chip/Chip.styles.js +0 -143
- package/dist/components/Chip/Chip.styles.js.map +0 -1
- package/dist/components/Chip/Chip.styles.mjs +0 -137
- package/dist/components/Chip/Chip.styles.mjs.map +0 -1
- package/src/components/Chip/Chip.styles.ts +0 -147
|
@@ -6,39 +6,8 @@ var React = require('react');
|
|
|
6
6
|
var react = require('@chakra-ui/react');
|
|
7
7
|
var motion = require('../../theme/motion.js');
|
|
8
8
|
var Confetti_styles = require('./Confetti.styles.js');
|
|
9
|
+
var confettiColors = require('./confettiColors.js');
|
|
9
10
|
|
|
10
|
-
/**
|
|
11
|
-
* Literal hex, and the one place in this library that is deliberately off the
|
|
12
|
-
* palette.
|
|
13
|
-
*
|
|
14
|
-
* The first version reached for `primary.main` / `success.main` /
|
|
15
|
-
* `warning.main` / `danger.main`, which was wrong twice over. **Semantically**,
|
|
16
|
-
* those colours mean things: raining the error red and the warning amber over
|
|
17
|
-
* "payment complete" says something the screen does not. Confetti is the one
|
|
18
|
-
* element on a page with nothing to communicate, so a colour that communicates
|
|
19
|
-
* is the wrong kind of colour.
|
|
20
|
-
*
|
|
21
|
-
* **And optically**, the palette is built for interface legibility — text and
|
|
22
|
-
* controls on a light surface — so it sits dark and desaturated: average
|
|
23
|
-
* lightness 47%, nothing above 80% saturation, and three of the five in the
|
|
24
|
-
* blue range. Fifty pieces of that read as a chart legend falling. These six
|
|
25
|
-
* average 56% lightness, four of them are fully saturated, and they span the
|
|
26
|
-
* whole wheel (9°–330°), which is what makes a burst read as a burst.
|
|
27
|
-
*
|
|
28
|
-
* The cost, stated rather than hidden: these do not follow a re-theme, and they
|
|
29
|
-
* do not adapt to dark mode — a bright hex on a dark surface is brighter still.
|
|
30
|
-
* That is acceptable for a burst that lasts two seconds and carries no
|
|
31
|
-
* information, and it is why `colors` is a prop: an app that needs its own
|
|
32
|
-
* festival palette passes one.
|
|
33
|
-
*/
|
|
34
|
-
const DEFAULT_COLORS = [
|
|
35
|
-
'#FFD700', // gold
|
|
36
|
-
'#FF69B4', // hot pink
|
|
37
|
-
'#00CED1', // turquoise
|
|
38
|
-
'#FF6347', // tomato
|
|
39
|
-
'#9370DB', // medium purple
|
|
40
|
-
'#32CD32', // lime
|
|
41
|
-
];
|
|
42
11
|
/**
|
|
43
12
|
* A seeded generator, so one burst is stable across re-renders.
|
|
44
13
|
*
|
|
@@ -81,15 +50,12 @@ const scatter = (seed) => {
|
|
|
81
50
|
* nothing, and doing it in CSS keeps the decision on the same media query as
|
|
82
51
|
* every other preset instead of on a hook that has to guess before hydration.
|
|
83
52
|
*
|
|
84
|
-
* **The default colours are
|
|
85
|
-
*
|
|
86
|
-
*
|
|
87
|
-
*
|
|
88
|
-
*
|
|
89
|
-
*
|
|
90
|
-
* fifty pieces of it read as a chart legend falling. The cost is real and
|
|
91
|
-
* stated: these do not follow a re-theme and do not adapt to dark mode. `colors`
|
|
92
|
-
* is a prop for an app that needs its own.
|
|
53
|
+
* **The default colours are decorative only** (`confettiColors.ts`): coral,
|
|
54
|
+
* beige and the system hues that mean nothing — red, yellow, green and blue are
|
|
55
|
+
* left out because they are the danger, warning, success and info colours, and
|
|
56
|
+
* raining error red over "payment complete" says something the screen does not.
|
|
57
|
+
* They are light-mode hex and do not flip for dark mode. `colors` is a prop for
|
|
58
|
+
* an app that needs its own.
|
|
93
59
|
*
|
|
94
60
|
* **Takes no children — it is an overlay, not a wrapper.** It renders absolutely
|
|
95
61
|
* against the nearest positioned ancestor, which is therefore the stage: give
|
|
@@ -100,7 +66,7 @@ const scatter = (seed) => {
|
|
|
100
66
|
* {justPurchased && <Confetti />}
|
|
101
67
|
* ```
|
|
102
68
|
*/
|
|
103
|
-
const Confetti = React.forwardRef(({ pieceCount = 50, colors =
|
|
69
|
+
const Confetti = React.forwardRef(({ pieceCount = 50, colors = confettiColors.DEFAULT_CONFETTI_COLORS, seed = 1, ...rest }, ref) => {
|
|
104
70
|
const pieces = React.useMemo(() => {
|
|
105
71
|
const next = scatter(seed);
|
|
106
72
|
return Array.from({ length: pieceCount }, (_, i) => ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Confetti.js","sources":["../../../src/components/Confetti/Confetti.tsx"],"sourcesContent":[null],"names":["forwardRef","useMemo","MOTION_DURATION_MS","_jsx","Box","confettiPiece"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Confetti.js","sources":["../../../src/components/Confetti/Confetti.tsx"],"sourcesContent":[null],"names":["forwardRef","DEFAULT_CONFETTI_COLORS","useMemo","MOTION_DURATION_MS","_jsx","Box","confettiPiece"],"mappings":"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"}
|
|
@@ -4,39 +4,8 @@ import { forwardRef, useMemo } from 'react';
|
|
|
4
4
|
import { Box } from '@chakra-ui/react';
|
|
5
5
|
import { MOTION_DURATION_MS } from '../../theme/motion.mjs';
|
|
6
6
|
import { confettiPiece } from './Confetti.styles.mjs';
|
|
7
|
+
import { DEFAULT_CONFETTI_COLORS } from './confettiColors.mjs';
|
|
7
8
|
|
|
8
|
-
/**
|
|
9
|
-
* Literal hex, and the one place in this library that is deliberately off the
|
|
10
|
-
* palette.
|
|
11
|
-
*
|
|
12
|
-
* The first version reached for `primary.main` / `success.main` /
|
|
13
|
-
* `warning.main` / `danger.main`, which was wrong twice over. **Semantically**,
|
|
14
|
-
* those colours mean things: raining the error red and the warning amber over
|
|
15
|
-
* "payment complete" says something the screen does not. Confetti is the one
|
|
16
|
-
* element on a page with nothing to communicate, so a colour that communicates
|
|
17
|
-
* is the wrong kind of colour.
|
|
18
|
-
*
|
|
19
|
-
* **And optically**, the palette is built for interface legibility — text and
|
|
20
|
-
* controls on a light surface — so it sits dark and desaturated: average
|
|
21
|
-
* lightness 47%, nothing above 80% saturation, and three of the five in the
|
|
22
|
-
* blue range. Fifty pieces of that read as a chart legend falling. These six
|
|
23
|
-
* average 56% lightness, four of them are fully saturated, and they span the
|
|
24
|
-
* whole wheel (9°–330°), which is what makes a burst read as a burst.
|
|
25
|
-
*
|
|
26
|
-
* The cost, stated rather than hidden: these do not follow a re-theme, and they
|
|
27
|
-
* do not adapt to dark mode — a bright hex on a dark surface is brighter still.
|
|
28
|
-
* That is acceptable for a burst that lasts two seconds and carries no
|
|
29
|
-
* information, and it is why `colors` is a prop: an app that needs its own
|
|
30
|
-
* festival palette passes one.
|
|
31
|
-
*/
|
|
32
|
-
const DEFAULT_COLORS = [
|
|
33
|
-
'#FFD700', // gold
|
|
34
|
-
'#FF69B4', // hot pink
|
|
35
|
-
'#00CED1', // turquoise
|
|
36
|
-
'#FF6347', // tomato
|
|
37
|
-
'#9370DB', // medium purple
|
|
38
|
-
'#32CD32', // lime
|
|
39
|
-
];
|
|
40
9
|
/**
|
|
41
10
|
* A seeded generator, so one burst is stable across re-renders.
|
|
42
11
|
*
|
|
@@ -79,15 +48,12 @@ const scatter = (seed) => {
|
|
|
79
48
|
* nothing, and doing it in CSS keeps the decision on the same media query as
|
|
80
49
|
* every other preset instead of on a hook that has to guess before hydration.
|
|
81
50
|
*
|
|
82
|
-
* **The default colours are
|
|
83
|
-
*
|
|
84
|
-
*
|
|
85
|
-
*
|
|
86
|
-
*
|
|
87
|
-
*
|
|
88
|
-
* fifty pieces of it read as a chart legend falling. The cost is real and
|
|
89
|
-
* stated: these do not follow a re-theme and do not adapt to dark mode. `colors`
|
|
90
|
-
* is a prop for an app that needs its own.
|
|
51
|
+
* **The default colours are decorative only** (`confettiColors.ts`): coral,
|
|
52
|
+
* beige and the system hues that mean nothing — red, yellow, green and blue are
|
|
53
|
+
* left out because they are the danger, warning, success and info colours, and
|
|
54
|
+
* raining error red over "payment complete" says something the screen does not.
|
|
55
|
+
* They are light-mode hex and do not flip for dark mode. `colors` is a prop for
|
|
56
|
+
* an app that needs its own.
|
|
91
57
|
*
|
|
92
58
|
* **Takes no children — it is an overlay, not a wrapper.** It renders absolutely
|
|
93
59
|
* against the nearest positioned ancestor, which is therefore the stage: give
|
|
@@ -98,7 +64,7 @@ const scatter = (seed) => {
|
|
|
98
64
|
* {justPurchased && <Confetti />}
|
|
99
65
|
* ```
|
|
100
66
|
*/
|
|
101
|
-
const Confetti = forwardRef(({ pieceCount = 50, colors =
|
|
67
|
+
const Confetti = forwardRef(({ pieceCount = 50, colors = DEFAULT_CONFETTI_COLORS, seed = 1, ...rest }, ref) => {
|
|
102
68
|
const pieces = useMemo(() => {
|
|
103
69
|
const next = scatter(seed);
|
|
104
70
|
return Array.from({ length: pieceCount }, (_, i) => ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Confetti.mjs","sources":["../../../src/components/Confetti/Confetti.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Confetti.mjs","sources":["../../../src/components/Confetti/Confetti.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;;AAQA;;;;;;AAMG;AACH,MAAM,OAAO,GAAG,CAAC,IAAY,KAAI;AAC/B,IAAA,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC;AACjB,IAAA,OAAO,MAAK;QACV,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,GAAG,UAAU,IAAI,UAAU;QAC3C,OAAO,CAAC,GAAG,UAAU;AACvB,IAAA,CAAC;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CG;AACI,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,UAAU,GAAG,EAAE,EACf,MAAM,GAAG,uBAAuB,EAChC,IAAI,GAAG,CAAC,EACR,GAAG,IAAI,EACO,EAChB,GAAkC,KAChC;AACF,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAK;AAC1B,QAAA,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;AAC1B,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM;AACnD,YAAA,EAAE,EAAE,CAAC;AACL,YAAA,IAAI,EAAE,CAAA,EAAG,IAAI,EAAE,GAAG,GAAG,CAAA,CAAA,CAAG;AACxB,YAAA,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;;AAEjD,YAAA,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC,CAAA,EAAA,CAAI;;;;AAI3C,YAAA,IAAI,EAAE,IAAI,EAAE,GAAG,GAAG,GAAG,SAAS,GAAG,QAAQ;;;;;;;AAOzC,YAAA,KAAK,EAAE,CAAA,EAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAA,EAAA,CAAI;AACxC,YAAA,MAAM,EAAE,CAAA,EAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAA,EAAA,CAAI;;;;AAIzC,YAAA,IAAI,EAAE,CAAC,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;;;;;AAKvC,YAAA,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAA,EAAA,CAAI;AAC3D,SAAA,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;IAE9B,QACEA,IAAC,GAAG,EAAA,EACF,GAAG,EAAE,GAAG,EACR,QAAQ,EAAC,UAAU,EACnB,KAAK,EAAC,GAAG,EACT,QAAQ,EAAC,QAAQ,EACjB,aAAa,EAAC,MAAM,EAAA,aAAA,EAAA,IAAA;;;;QAKpB,aAAa,EAAC,MAAM,EAAA,GAChB,IAAI,YAEP,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,MACZA,GAAA,CAAC,GAAG,EAAA,EAEF,GAAG,EAAE,aAAa,EAClB,EAAE,EAAE,CAAC,CAAC,KAAK,EACX,IAAI,EAAE,CAAC,CAAC,IAAI,EACZ,CAAC,EAAE,CAAC,CAAC,KAAK,EACV,CAAC,EAAE,CAAC,CAAC,MAAM,EACX,KAAK,EACH;gBACE,kBAAkB,EAAE,CAAC,CAAC,KAAK;gBAC3B,iBAAiB,EAAE,CAAC,CAAC,IAAI;gBACzB,iBAAiB,EAAE,CAAC,CAAC,IAAI;gBACzB,cAAc,EAAE,CAAC,CAAC,KAAK;aACD,EAAA,EAZrB,CAAC,CAAC,EAAE,CAcT,CACH,CAAC,EAAA,CACE;AAEV,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Hues that carry meaning elsewhere in the system and so never colour a piece
|
|
3
|
+
* by default: red, yellow and green are the danger, warning and success
|
|
4
|
+
* solids, and blue is info and links. The same rule as the chart series
|
|
5
|
+
* defaults (`LineGraph/seriesColors.ts`) — a red piece in a "payment complete"
|
|
6
|
+
* burst says something the screen does not.
|
|
7
|
+
*/
|
|
8
|
+
export declare const CONFETTI_EXCLUDED_HUES: readonly ["red", "yellow", "green", "blue"];
|
|
9
|
+
/**
|
|
10
|
+
* Default piece colours: the house coral (`CORAL.base`, the send/accent coral —
|
|
11
|
+
* not a status colour), the house beige (`RAMPS.sand.light['8']`, the raw step
|
|
12
|
+
* behind `secondary.fg`), and the light-mode base of every system hue that
|
|
13
|
+
* carries no status meaning (brown, orange, mint, teal, cyan, indigo, purple,
|
|
14
|
+
* pink …).
|
|
15
|
+
*
|
|
16
|
+
* Raw hex rather than tokens is a choice, not a constraint. Each piece is a
|
|
17
|
+
* `<Box bg={…}>`, so a token string would resolve just as well; hex keeps the
|
|
18
|
+
* default in the same shape as the `colors` prop (any CSS colour string), and
|
|
19
|
+
* keeps the burst the same in both modes. The cost, stated rather than hidden:
|
|
20
|
+
* these are the LIGHT-mode values and do not follow dark mode — acceptable for
|
|
21
|
+
* a two-second burst that carries no information. `colors` is a prop for an
|
|
22
|
+
* app that needs its own (tokens included).
|
|
23
|
+
*/
|
|
24
|
+
export declare const DEFAULT_CONFETTI_COLORS: string[];
|
|
25
|
+
//# sourceMappingURL=confettiColors.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"confettiColors.d.ts","sourceRoot":"","sources":["../../../src/components/Confetti/confettiColors.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,6CAKzB,CAAC;AAMX;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,EAI3C,CAAC"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var palette_generated = require('../../theme/palette.generated.js');
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Hues that carry meaning elsewhere in the system and so never colour a piece
|
|
8
|
+
* by default: red, yellow and green are the danger, warning and success
|
|
9
|
+
* solids, and blue is info and links. The same rule as the chart series
|
|
10
|
+
* defaults (`LineGraph/seriesColors.ts`) — a red piece in a "payment complete"
|
|
11
|
+
* burst says something the screen does not.
|
|
12
|
+
*/
|
|
13
|
+
const CONFETTI_EXCLUDED_HUES = [
|
|
14
|
+
'red',
|
|
15
|
+
'yellow',
|
|
16
|
+
'green',
|
|
17
|
+
'blue',
|
|
18
|
+
];
|
|
19
|
+
const DECORATIVE_HUES = Object.keys(palette_generated.SYSTEM_HUES).filter((hue) => !CONFETTI_EXCLUDED_HUES.includes(hue));
|
|
20
|
+
/**
|
|
21
|
+
* Default piece colours: the house coral (`CORAL.base`, the send/accent coral —
|
|
22
|
+
* not a status colour), the house beige (`RAMPS.sand.light['8']`, the raw step
|
|
23
|
+
* behind `secondary.fg`), and the light-mode base of every system hue that
|
|
24
|
+
* carries no status meaning (brown, orange, mint, teal, cyan, indigo, purple,
|
|
25
|
+
* pink …).
|
|
26
|
+
*
|
|
27
|
+
* Raw hex rather than tokens is a choice, not a constraint. Each piece is a
|
|
28
|
+
* `<Box bg={…}>`, so a token string would resolve just as well; hex keeps the
|
|
29
|
+
* default in the same shape as the `colors` prop (any CSS colour string), and
|
|
30
|
+
* keeps the burst the same in both modes. The cost, stated rather than hidden:
|
|
31
|
+
* these are the LIGHT-mode values and do not follow dark mode — acceptable for
|
|
32
|
+
* a two-second burst that carries no information. `colors` is a prop for an
|
|
33
|
+
* app that needs its own (tokens included).
|
|
34
|
+
*/
|
|
35
|
+
const DEFAULT_CONFETTI_COLORS = [
|
|
36
|
+
palette_generated.CORAL.base,
|
|
37
|
+
palette_generated.RAMPS.sand.light['8'],
|
|
38
|
+
...DECORATIVE_HUES.map((hue) => palette_generated.SYSTEM_HUES[hue].base),
|
|
39
|
+
];
|
|
40
|
+
|
|
41
|
+
exports.CONFETTI_EXCLUDED_HUES = CONFETTI_EXCLUDED_HUES;
|
|
42
|
+
exports.DEFAULT_CONFETTI_COLORS = DEFAULT_CONFETTI_COLORS;
|
|
43
|
+
//# sourceMappingURL=confettiColors.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"confettiColors.js","sources":["../../../src/components/Confetti/confettiColors.ts"],"sourcesContent":[null],"names":["SYSTEM_HUES","CORAL","RAMPS"],"mappings":";;;;;AAGA;;;;;;AAMG;AACI,MAAM,sBAAsB,GAAG;IACpC,KAAK;IACL,QAAQ;IACR,OAAO;IACP,MAAM;;AAGR,MAAM,eAAe,GAAI,MAAM,CAAC,IAAI,CAACA,6BAAW,CAAiB,CAAC,MAAM,CACtE,CAAC,GAAG,KAAK,CAAE,sBAA4C,CAAC,QAAQ,CAAC,GAAG,CAAC,CACtE;AAED;;;;;;;;;;;;;;AAcG;AACI,MAAM,uBAAuB,GAAa;AAC/C,IAAAC,uBAAK,CAAC,IAAI;AACV,IAAAC,uBAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;AACrB,IAAA,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC,GAAG,KAAKF,6BAAW,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;;;;;;"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { SYSTEM_HUES, CORAL, RAMPS } from '../../theme/palette.generated.mjs';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Hues that carry meaning elsewhere in the system and so never colour a piece
|
|
6
|
+
* by default: red, yellow and green are the danger, warning and success
|
|
7
|
+
* solids, and blue is info and links. The same rule as the chart series
|
|
8
|
+
* defaults (`LineGraph/seriesColors.ts`) — a red piece in a "payment complete"
|
|
9
|
+
* burst says something the screen does not.
|
|
10
|
+
*/
|
|
11
|
+
const CONFETTI_EXCLUDED_HUES = [
|
|
12
|
+
'red',
|
|
13
|
+
'yellow',
|
|
14
|
+
'green',
|
|
15
|
+
'blue',
|
|
16
|
+
];
|
|
17
|
+
const DECORATIVE_HUES = Object.keys(SYSTEM_HUES).filter((hue) => !CONFETTI_EXCLUDED_HUES.includes(hue));
|
|
18
|
+
/**
|
|
19
|
+
* Default piece colours: the house coral (`CORAL.base`, the send/accent coral —
|
|
20
|
+
* not a status colour), the house beige (`RAMPS.sand.light['8']`, the raw step
|
|
21
|
+
* behind `secondary.fg`), and the light-mode base of every system hue that
|
|
22
|
+
* carries no status meaning (brown, orange, mint, teal, cyan, indigo, purple,
|
|
23
|
+
* pink …).
|
|
24
|
+
*
|
|
25
|
+
* Raw hex rather than tokens is a choice, not a constraint. Each piece is a
|
|
26
|
+
* `<Box bg={…}>`, so a token string would resolve just as well; hex keeps the
|
|
27
|
+
* default in the same shape as the `colors` prop (any CSS colour string), and
|
|
28
|
+
* keeps the burst the same in both modes. The cost, stated rather than hidden:
|
|
29
|
+
* these are the LIGHT-mode values and do not follow dark mode — acceptable for
|
|
30
|
+
* a two-second burst that carries no information. `colors` is a prop for an
|
|
31
|
+
* app that needs its own (tokens included).
|
|
32
|
+
*/
|
|
33
|
+
const DEFAULT_CONFETTI_COLORS = [
|
|
34
|
+
CORAL.base,
|
|
35
|
+
RAMPS.sand.light['8'],
|
|
36
|
+
...DECORATIVE_HUES.map((hue) => SYSTEM_HUES[hue].base),
|
|
37
|
+
];
|
|
38
|
+
|
|
39
|
+
export { CONFETTI_EXCLUDED_HUES, DEFAULT_CONFETTI_COLORS };
|
|
40
|
+
//# sourceMappingURL=confettiColors.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"confettiColors.mjs","sources":["../../../src/components/Confetti/confettiColors.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAGA;;;;;;AAMG;AACI,MAAM,sBAAsB,GAAG;IACpC,KAAK;IACL,QAAQ;IACR,OAAO;IACP,MAAM;;AAGR,MAAM,eAAe,GAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAiB,CAAC,MAAM,CACtE,CAAC,GAAG,KAAK,CAAE,sBAA4C,CAAC,QAAQ,CAAC,GAAG,CAAC,CACtE;AAED;;;;;;;;;;;;;;AAcG;AACI,MAAM,uBAAuB,GAAa;AAC/C,IAAA,KAAK,CAAC,IAAI;AACV,IAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;AACrB,IAAA,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyableCode.d.ts","sourceRoot":"","sources":["../../../src/components/CopyableCode/CopyableCode.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AA6DzD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,GAAI,uCAI1B,iBAAiB,
|
|
1
|
+
{"version":3,"file":"CopyableCode.d.ts","sourceRoot":"","sources":["../../../src/components/CopyableCode/CopyableCode.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AA6DzD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,GAAI,uCAI1B,iBAAiB,4CA8DnB,CAAC"}
|
|
@@ -6,6 +6,7 @@ var React = require('react');
|
|
|
6
6
|
var react = require('@chakra-ui/react');
|
|
7
7
|
var useTranslate = require('../../hooks/useTranslate.js');
|
|
8
8
|
var Button = require('../Button/Button.js');
|
|
9
|
+
require('../Button/Button.styles.js');
|
|
9
10
|
var Card = require('../Card/Card.js');
|
|
10
11
|
var index = require('../Icon/index.js');
|
|
11
12
|
|
|
@@ -70,7 +71,7 @@ const CopyableCode = ({ children, onCopy, containerProps, }) => {
|
|
|
70
71
|
return (jsxRuntime.jsxs(react.Flex, { position: "relative", width: "100%", ...containerProps, children: [jsxRuntime.jsxs(Card.Card, { overflow: "hidden", maxW: "100%", p: 0, width: "100%", children: [jsxRuntime.jsx(react.Box, { as: "pre", whiteSpace: "nowrap", overflowX: "scroll", p: 4, pr: 20, children: children }), jsxRuntime.jsx(react.Box, { position: "absolute", right: 0, top: 0, bottom: 0, w: 24,
|
|
71
72
|
// Fade matches the Card surface (bg.surface) so it flips with the
|
|
72
73
|
// mode instead of fading to white on dark.
|
|
73
|
-
bg: "linear-gradient(to right, transparent, var(--chakra-colors-bg-surface) 15%)", pointerEvents: "none" })] }), jsxRuntime.jsx(Button.Button, {
|
|
74
|
+
bg: "linear-gradient(to right, transparent, var(--chakra-colors-bg-surface) 15%)", pointerEvents: "none" })] }), jsxRuntime.jsx(Button.Button, { variant: "primary", size: "xs", onClick: handleCopy, position: "absolute", right: 4, top: "50%", transform: "translateY(-50%)", zIndex: 1, children: jsxRuntime.jsxs(react.Box, { display: "inline-grid", placeItems: "center", overflow: "hidden", children: [jsxRuntime.jsxs(SwapLabel, { show: !copied, past: true, children: [jsxRuntime.jsx(index.FaRegCopy, { boxSize: "xs" }), translate('copy')] }), jsxRuntime.jsxs(SwapLabel, { show: copied, past: false, children: [jsxRuntime.jsx(index.FaCheck, { boxSize: "xs" }), translate('copied')] })] }) })] }));
|
|
74
75
|
};
|
|
75
76
|
|
|
76
77
|
exports.CopyableCode = CopyableCode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyableCode.js","sources":["../../../src/components/CopyableCode/CopyableCode.tsx"],"sourcesContent":[null],"names":["_jsx","Box","useTranslate","useState","useRef","useEffect","_jsxs","Flex","Card","Button","FaRegCopy","FaCheck"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CopyableCode.js","sources":["../../../src/components/CopyableCode/CopyableCode.tsx"],"sourcesContent":[null],"names":["_jsx","Box","useTranslate","useState","useRef","useEffect","_jsxs","Flex","Card","Button","FaRegCopy","FaCheck"],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@ import { useState, useRef, useEffect } from 'react';
|
|
|
4
4
|
import { Flex, Box } from '@chakra-ui/react';
|
|
5
5
|
import { useTranslate } from '../../hooks/useTranslate.mjs';
|
|
6
6
|
import { Button } from '../Button/Button.mjs';
|
|
7
|
+
import '../Button/Button.styles.mjs';
|
|
7
8
|
import { Card } from '../Card/Card.mjs';
|
|
8
9
|
import { FaRegCopy, FaCheck } from '../Icon/index.mjs';
|
|
9
10
|
|
|
@@ -68,7 +69,7 @@ const CopyableCode = ({ children, onCopy, containerProps, }) => {
|
|
|
68
69
|
return (jsxs(Flex, { position: "relative", width: "100%", ...containerProps, children: [jsxs(Card, { overflow: "hidden", maxW: "100%", p: 0, width: "100%", children: [jsx(Box, { as: "pre", whiteSpace: "nowrap", overflowX: "scroll", p: 4, pr: 20, children: children }), jsx(Box, { position: "absolute", right: 0, top: 0, bottom: 0, w: 24,
|
|
69
70
|
// Fade matches the Card surface (bg.surface) so it flips with the
|
|
70
71
|
// mode instead of fading to white on dark.
|
|
71
|
-
bg: "linear-gradient(to right, transparent, var(--chakra-colors-bg-surface) 15%)", pointerEvents: "none" })] }), jsx(Button, {
|
|
72
|
+
bg: "linear-gradient(to right, transparent, var(--chakra-colors-bg-surface) 15%)", pointerEvents: "none" })] }), jsx(Button, { variant: "primary", size: "xs", onClick: handleCopy, position: "absolute", right: 4, top: "50%", transform: "translateY(-50%)", zIndex: 1, children: jsxs(Box, { display: "inline-grid", placeItems: "center", overflow: "hidden", children: [jsxs(SwapLabel, { show: !copied, past: true, children: [jsx(FaRegCopy, { boxSize: "xs" }), translate('copy')] }), jsxs(SwapLabel, { show: copied, past: false, children: [jsx(FaCheck, { boxSize: "xs" }), translate('copied')] })] }) })] }));
|
|
72
73
|
};
|
|
73
74
|
|
|
74
75
|
export { CopyableCode };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyableCode.mjs","sources":["../../../src/components/CopyableCode/CopyableCode.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CopyableCode.mjs","sources":["../../../src/components/CopyableCode/CopyableCode.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CountBadge — an unread / notification count (moved into the design system
|
|
3
|
+
* from FactChat's `UnreadCountBadge`).
|
|
4
|
+
*
|
|
5
|
+
* - Numeric: `count` as text, capped at `max` (default 99 → `"99+"`). Renders
|
|
6
|
+
* nothing for 0 unless `showZero`.
|
|
7
|
+
* - Dot (`dot`): a small circle with no number. `aria-hidden` unless it is
|
|
8
|
+
* given a `label` — then it is an `img` with that name.
|
|
9
|
+
*
|
|
10
|
+
* Give it a `label` whenever the number alone would not make sense out of
|
|
11
|
+
* context and the badge sits in readable content — next to a nav item's
|
|
12
|
+
* text, in a list row.
|
|
13
|
+
*
|
|
14
|
+
* NOT on an icon-only button: the button's `aria-label` replaces its whole
|
|
15
|
+
* subtree as the accessible name, so the badge's hidden label is never
|
|
16
|
+
* announced. Put the count in the button's `aria-label` instead and leave
|
|
17
|
+
* the badge unlabelled (it is then only the visible number):
|
|
18
|
+
*
|
|
19
|
+
* ```tsx
|
|
20
|
+
* <IconButton aria-label={`알림, 읽지 않음 ${n}개`} variant="ghost">
|
|
21
|
+
* <BellIcon />
|
|
22
|
+
* <CountBadge count={n} position="absolute" top={0} right={0} />
|
|
23
|
+
* </IconButton>
|
|
24
|
+
* ```
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* ```tsx
|
|
28
|
+
* <CountBadge count={5} />
|
|
29
|
+
* <CountBadge count={120} label="읽지 않은 알림 120개" /> // shows 99+
|
|
30
|
+
* <CountBadge dot label="새 소식" />
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
33
|
+
export declare const CountBadge: import("react").ForwardRefExoticComponent<Omit<import("@chakra-ui/react").BoxProps, "children"> & {
|
|
34
|
+
count?: number;
|
|
35
|
+
max?: number;
|
|
36
|
+
dot?: boolean;
|
|
37
|
+
showZero?: boolean;
|
|
38
|
+
label?: string;
|
|
39
|
+
size?: import("./CountBadge.types").CountBadgeSize;
|
|
40
|
+
} & import("react").RefAttributes<HTMLSpanElement>>;
|
|
41
|
+
//# sourceMappingURL=CountBadge.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../src/components/CountBadge/CountBadge.tsx"],"names":[],"mappings":"AAWA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,UAAU;;;;;;;mDAkEtB,CAAC"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var react = require('@chakra-ui/react');
|
|
7
|
+
var CountBadge_styles = require('./CountBadge.styles.js');
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* CountBadge — an unread / notification count (moved into the design system
|
|
11
|
+
* from FactChat's `UnreadCountBadge`).
|
|
12
|
+
*
|
|
13
|
+
* - Numeric: `count` as text, capped at `max` (default 99 → `"99+"`). Renders
|
|
14
|
+
* nothing for 0 unless `showZero`.
|
|
15
|
+
* - Dot (`dot`): a small circle with no number. `aria-hidden` unless it is
|
|
16
|
+
* given a `label` — then it is an `img` with that name.
|
|
17
|
+
*
|
|
18
|
+
* Give it a `label` whenever the number alone would not make sense out of
|
|
19
|
+
* context and the badge sits in readable content — next to a nav item's
|
|
20
|
+
* text, in a list row.
|
|
21
|
+
*
|
|
22
|
+
* NOT on an icon-only button: the button's `aria-label` replaces its whole
|
|
23
|
+
* subtree as the accessible name, so the badge's hidden label is never
|
|
24
|
+
* announced. Put the count in the button's `aria-label` instead and leave
|
|
25
|
+
* the badge unlabelled (it is then only the visible number):
|
|
26
|
+
*
|
|
27
|
+
* ```tsx
|
|
28
|
+
* <IconButton aria-label={`알림, 읽지 않음 ${n}개`} variant="ghost">
|
|
29
|
+
* <BellIcon />
|
|
30
|
+
* <CountBadge count={n} position="absolute" top={0} right={0} />
|
|
31
|
+
* </IconButton>
|
|
32
|
+
* ```
|
|
33
|
+
*
|
|
34
|
+
* @example
|
|
35
|
+
* ```tsx
|
|
36
|
+
* <CountBadge count={5} />
|
|
37
|
+
* <CountBadge count={120} label="읽지 않은 알림 120개" /> // shows 99+
|
|
38
|
+
* <CountBadge dot label="새 소식" />
|
|
39
|
+
* ```
|
|
40
|
+
*/
|
|
41
|
+
const CountBadge = React.forwardRef(({ count, max = 99, dot = false, showZero = false, label, size = 'md', 'aria-label': ariaLabel, ...rest }, ref) => {
|
|
42
|
+
const name = label ?? ariaLabel;
|
|
43
|
+
const isEmpty = (count ?? 0) <= 0;
|
|
44
|
+
if (dot) {
|
|
45
|
+
if (count !== undefined && isEmpty && !showZero)
|
|
46
|
+
return null;
|
|
47
|
+
const dotSize = CountBadge_styles.countBadgeDotSizes[size];
|
|
48
|
+
return (jsxRuntime.jsx(react.Box, { as: "span", display: "inline-block", flexShrink: 0, boxSize: dotSize, borderRadius: "full", bgColor: "count.bg", ...(name
|
|
49
|
+
? { role: 'img', 'aria-label': name }
|
|
50
|
+
: { 'aria-hidden': true }), "data-count-badge": "dot", ...rest, ref: ref }));
|
|
51
|
+
}
|
|
52
|
+
if (isEmpty && !showZero)
|
|
53
|
+
return null;
|
|
54
|
+
const text = CountBadge_styles.formatCount(count ?? 0, max);
|
|
55
|
+
return (jsxRuntime.jsx(react.Box, { as: "span", ...CountBadge_styles.countBadgeBaseStyles, ...CountBadge_styles.countBadgeSizeStyles[size], "data-count-badge": "count", ...rest, ref: ref, children: name ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Box, { as: "span", "aria-hidden": true, children: text }), jsxRuntime.jsx(react.Box, { as: "span", srOnly: true, children: name })] })) : (text) }));
|
|
56
|
+
});
|
|
57
|
+
CountBadge.displayName = 'CountBadge';
|
|
58
|
+
|
|
59
|
+
exports.CountBadge = CountBadge;
|
|
60
|
+
//# sourceMappingURL=CountBadge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CountBadge.js","sources":["../../../src/components/CountBadge/CountBadge.tsx"],"sourcesContent":[null],"names":["forwardRef","countBadgeDotSizes","_jsx","Box","formatCount","countBadgeBaseStyles","countBadgeSizeStyles","_jsxs","_Fragment"],"mappings":";;;;;;;;AAWA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BG;AACI,MAAM,UAAU,GAAGA,gBAAU,CAClC,CACE,EACE,KAAK,EACL,GAAG,GAAG,EAAE,EACR,GAAG,GAAG,KAAK,EACX,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,IAAI,GAAG,IAAI,EACX,YAAY,EAAE,SAAS,EACvB,GAAG,IAAI,EACS,EAClB,GAAmC,KACjC;AACF,IAAA,MAAM,IAAI,GAAG,KAAK,IAAI,SAAS;IAC/B,MAAM,OAAO,GAAG,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC;IAEjC,IAAI,GAAG,EAAE;AACP,QAAA,IAAI,KAAK,KAAK,SAAS,IAAI,OAAO,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,IAAI;AAC5D,QAAA,MAAM,OAAO,GAAGC,oCAAkB,CAAC,IAAI,CAAC;AACxC,QAAA,QACEC,cAAA,CAACC,SAAG,EAAA,EACF,EAAE,EAAC,MAAM,EACT,OAAO,EAAC,cAAc,EACtB,UAAU,EAAE,CAAC,EACb,OAAO,EAAE,OAAO,EAChB,YAAY,EAAC,MAAM,EACnB,OAAO,EAAC,UAAU,EAAA,IACb;kBACD,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI;AACnC,kBAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,EAAA,kBAAA,EACX,KAAK,EAAA,GAClB,IAAI,EACR,GAAG,EAAE,GAAG,EAAA,CACR;IAEN;IAEA,IAAI,OAAO,IAAI,CAAC,QAAQ;AAAE,QAAA,OAAO,IAAI;IAErC,MAAM,IAAI,GAAGC,6BAAW,CAAC,KAAK,IAAI,CAAC,EAAE,GAAG,CAAC;AAEzC,IAAA,QACEF,cAAA,CAACC,SAAG,EAAA,EACF,EAAE,EAAC,MAAM,EAAA,GACLE,sCAAoB,EAAA,GACpBC,sCAAoB,CAAC,IAAI,CAAC,EAAA,kBAAA,EACb,OAAO,EAAA,GACpB,IAAI,EACR,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,IAAI,IACHC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACEN,cAAA,CAACC,SAAG,EAAA,EAAC,EAAE,EAAC,MAAM,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EACX,IAAI,EAAA,CACD,EACND,cAAA,CAACC,SAAG,EAAA,EAAC,EAAE,EAAC,MAAM,EAAC,MAAM,EAAA,IAAA,EAAA,QAAA,EAClB,IAAI,EAAA,CACD,CAAA,EAAA,CACL,KAEH,IAAI,CACL,EAAA,CACG;AAEV,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { Box } from '@chakra-ui/react';
|
|
5
|
+
import { countBadgeDotSizes, formatCount, countBadgeSizeStyles, countBadgeBaseStyles } from './CountBadge.styles.mjs';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* CountBadge — an unread / notification count (moved into the design system
|
|
9
|
+
* from FactChat's `UnreadCountBadge`).
|
|
10
|
+
*
|
|
11
|
+
* - Numeric: `count` as text, capped at `max` (default 99 → `"99+"`). Renders
|
|
12
|
+
* nothing for 0 unless `showZero`.
|
|
13
|
+
* - Dot (`dot`): a small circle with no number. `aria-hidden` unless it is
|
|
14
|
+
* given a `label` — then it is an `img` with that name.
|
|
15
|
+
*
|
|
16
|
+
* Give it a `label` whenever the number alone would not make sense out of
|
|
17
|
+
* context and the badge sits in readable content — next to a nav item's
|
|
18
|
+
* text, in a list row.
|
|
19
|
+
*
|
|
20
|
+
* NOT on an icon-only button: the button's `aria-label` replaces its whole
|
|
21
|
+
* subtree as the accessible name, so the badge's hidden label is never
|
|
22
|
+
* announced. Put the count in the button's `aria-label` instead and leave
|
|
23
|
+
* the badge unlabelled (it is then only the visible number):
|
|
24
|
+
*
|
|
25
|
+
* ```tsx
|
|
26
|
+
* <IconButton aria-label={`알림, 읽지 않음 ${n}개`} variant="ghost">
|
|
27
|
+
* <BellIcon />
|
|
28
|
+
* <CountBadge count={n} position="absolute" top={0} right={0} />
|
|
29
|
+
* </IconButton>
|
|
30
|
+
* ```
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* ```tsx
|
|
34
|
+
* <CountBadge count={5} />
|
|
35
|
+
* <CountBadge count={120} label="읽지 않은 알림 120개" /> // shows 99+
|
|
36
|
+
* <CountBadge dot label="새 소식" />
|
|
37
|
+
* ```
|
|
38
|
+
*/
|
|
39
|
+
const CountBadge = forwardRef(({ count, max = 99, dot = false, showZero = false, label, size = 'md', 'aria-label': ariaLabel, ...rest }, ref) => {
|
|
40
|
+
const name = label ?? ariaLabel;
|
|
41
|
+
const isEmpty = (count ?? 0) <= 0;
|
|
42
|
+
if (dot) {
|
|
43
|
+
if (count !== undefined && isEmpty && !showZero)
|
|
44
|
+
return null;
|
|
45
|
+
const dotSize = countBadgeDotSizes[size];
|
|
46
|
+
return (jsx(Box, { as: "span", display: "inline-block", flexShrink: 0, boxSize: dotSize, borderRadius: "full", bgColor: "count.bg", ...(name
|
|
47
|
+
? { role: 'img', 'aria-label': name }
|
|
48
|
+
: { 'aria-hidden': true }), "data-count-badge": "dot", ...rest, ref: ref }));
|
|
49
|
+
}
|
|
50
|
+
if (isEmpty && !showZero)
|
|
51
|
+
return null;
|
|
52
|
+
const text = formatCount(count ?? 0, max);
|
|
53
|
+
return (jsx(Box, { as: "span", ...countBadgeBaseStyles, ...countBadgeSizeStyles[size], "data-count-badge": "count", ...rest, ref: ref, children: name ? (jsxs(Fragment, { children: [jsx(Box, { as: "span", "aria-hidden": true, children: text }), jsx(Box, { as: "span", srOnly: true, children: name })] })) : (text) }));
|
|
54
|
+
});
|
|
55
|
+
CountBadge.displayName = 'CountBadge';
|
|
56
|
+
|
|
57
|
+
export { CountBadge };
|
|
58
|
+
//# sourceMappingURL=CountBadge.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CountBadge.mjs","sources":["../../../src/components/CountBadge/CountBadge.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;AAWA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,KAAK,EACL,GAAG,GAAG,EAAE,EACR,GAAG,GAAG,KAAK,EACX,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,IAAI,GAAG,IAAI,EACX,YAAY,EAAE,SAAS,EACvB,GAAG,IAAI,EACS,EAClB,GAAmC,KACjC;AACF,IAAA,MAAM,IAAI,GAAG,KAAK,IAAI,SAAS;IAC/B,MAAM,OAAO,GAAG,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC;IAEjC,IAAI,GAAG,EAAE;AACP,QAAA,IAAI,KAAK,KAAK,SAAS,IAAI,OAAO,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,IAAI;AAC5D,QAAA,MAAM,OAAO,GAAG,kBAAkB,CAAC,IAAI,CAAC;AACxC,QAAA,QACEA,GAAA,CAAC,GAAG,EAAA,EACF,EAAE,EAAC,MAAM,EACT,OAAO,EAAC,cAAc,EACtB,UAAU,EAAE,CAAC,EACb,OAAO,EAAE,OAAO,EAChB,YAAY,EAAC,MAAM,EACnB,OAAO,EAAC,UAAU,EAAA,IACb;kBACD,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI;AACnC,kBAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,EAAA,kBAAA,EACX,KAAK,EAAA,GAClB,IAAI,EACR,GAAG,EAAE,GAAG,EAAA,CACR;IAEN;IAEA,IAAI,OAAO,IAAI,CAAC,QAAQ;AAAE,QAAA,OAAO,IAAI;IAErC,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,IAAI,CAAC,EAAE,GAAG,CAAC;AAEzC,IAAA,QACEA,GAAA,CAAC,GAAG,EAAA,EACF,EAAE,EAAC,MAAM,EAAA,GACL,oBAAoB,EAAA,GACpB,oBAAoB,CAAC,IAAI,CAAC,EAAA,kBAAA,EACb,OAAO,EAAA,GACpB,IAAI,EACR,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,IAAI,IACHC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAAC,GAAG,EAAA,EAAC,EAAE,EAAC,MAAM,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EACX,IAAI,EAAA,CACD,EACNA,GAAA,CAAC,GAAG,EAAA,EAAC,EAAE,EAAC,MAAM,EAAC,MAAM,EAAA,IAAA,EAAA,QAAA,EAClB,IAAI,EAAA,CACD,CAAA,EAAA,CACL,KAEH,IAAI,CACL,EAAA,CACG;AAEV,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { BoxProps } from '@chakra-ui/react';
|
|
2
|
+
import type { CountBadgeSize } from './CountBadge.types';
|
|
3
|
+
/**
|
|
4
|
+
* Shared look: the `count.*` pair (coral-red fill, white number), a pill whose
|
|
5
|
+
* min-width equals its height so a single digit is a circle, and tabular
|
|
6
|
+
* figures so the width does not jitter as the number changes.
|
|
7
|
+
*/
|
|
8
|
+
export declare const countBadgeBaseStyles: BoxProps;
|
|
9
|
+
export declare const countBadgeSizeStyles: Record<CountBadgeSize, BoxProps>;
|
|
10
|
+
export declare const countBadgeDotSizes: Record<CountBadgeSize, string>;
|
|
11
|
+
/** `120, 99 → "99+"`; negative / non-finite → `"0"`. */
|
|
12
|
+
export declare const formatCount: (count: number, max: number) => string;
|
|
13
|
+
//# sourceMappingURL=CountBadge.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CountBadge.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CountBadge/CountBadge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,QAYlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAIjE,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAI7D,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,WAAW,GAAI,OAAO,MAAM,EAAE,KAAK,MAAM,KAAG,MAGxD,CAAC"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Shared look: the `count.*` pair (coral-red fill, white number), a pill whose
|
|
6
|
+
* min-width equals its height so a single digit is a circle, and tabular
|
|
7
|
+
* figures so the width does not jitter as the number changes.
|
|
8
|
+
*/
|
|
9
|
+
const countBadgeBaseStyles = {
|
|
10
|
+
display: 'inline-flex',
|
|
11
|
+
alignItems: 'center',
|
|
12
|
+
justifyContent: 'center',
|
|
13
|
+
flexShrink: 0,
|
|
14
|
+
bgColor: 'count.bg',
|
|
15
|
+
color: 'count.fg',
|
|
16
|
+
borderRadius: 'full',
|
|
17
|
+
fontWeight: 'bold',
|
|
18
|
+
lineHeight: '1',
|
|
19
|
+
whiteSpace: 'nowrap',
|
|
20
|
+
fontVariantNumeric: 'tabular-nums',
|
|
21
|
+
};
|
|
22
|
+
const countBadgeSizeStyles = {
|
|
23
|
+
sm: { h: '16px', minW: '16px', px: '4px', fontSize: '10px' },
|
|
24
|
+
md: { h: '18px', minW: '18px', px: '5px', fontSize: '11px' },
|
|
25
|
+
lg: { h: '22px', minW: '22px', px: '6px', fontSize: '12px' },
|
|
26
|
+
};
|
|
27
|
+
const countBadgeDotSizes = {
|
|
28
|
+
sm: '6px',
|
|
29
|
+
md: '8px',
|
|
30
|
+
lg: '10px',
|
|
31
|
+
};
|
|
32
|
+
/** `120, 99 → "99+"`; negative / non-finite → `"0"`. */
|
|
33
|
+
const formatCount = (count, max) => {
|
|
34
|
+
const safe = Number.isFinite(count) && count > 0 ? Math.floor(count) : 0;
|
|
35
|
+
return safe > max ? `${max}+` : String(safe);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
exports.countBadgeBaseStyles = countBadgeBaseStyles;
|
|
39
|
+
exports.countBadgeDotSizes = countBadgeDotSizes;
|
|
40
|
+
exports.countBadgeSizeStyles = countBadgeSizeStyles;
|
|
41
|
+
exports.formatCount = formatCount;
|
|
42
|
+
//# sourceMappingURL=CountBadge.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CountBadge.styles.js","sources":["../../../src/components/CountBadge/CountBadge.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA;;;;AAIG;AACI,MAAM,oBAAoB,GAAa;AAC5C,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,cAAc,EAAE,QAAQ;AACxB,IAAA,UAAU,EAAE,CAAC;AACb,IAAA,OAAO,EAAE,UAAU;AACnB,IAAA,KAAK,EAAE,UAAU;AACjB,IAAA,YAAY,EAAE,MAAM;AACpB,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,UAAU,EAAE,GAAG;AACf,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,kBAAkB,EAAE,cAAc;;AAG7B,MAAM,oBAAoB,GAAqC;AACpE,IAAA,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE;AAC5D,IAAA,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE;AAC5D,IAAA,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE;;AAGvD,MAAM,kBAAkB,GAAmC;AAChE,IAAA,EAAE,EAAE,KAAK;AACT,IAAA,EAAE,EAAE,KAAK;AACT,IAAA,EAAE,EAAE,MAAM;;AAGZ;MACa,WAAW,GAAG,CAAC,KAAa,EAAE,GAAW,KAAY;IAChE,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;AACxE,IAAA,OAAO,IAAI,GAAG,GAAG,GAAG,CAAA,EAAG,GAAG,CAAA,CAAA,CAAG,GAAG,MAAM,CAAC,IAAI,CAAC;AAC9C;;;;;;;"}
|