jfs-components 0.1.12 → 0.1.17
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/CHANGELOG.md +15 -0
- package/lib/commonjs/components/ActionFooter/ActionFooter.js +7 -24
- package/lib/commonjs/components/ActionTile/ActionTile.js +10 -10
- package/lib/commonjs/components/AmountInput/AmountInput.js +3 -3
- package/lib/commonjs/components/AreaLineChart/AreaLineChart.js +2 -2
- package/lib/commonjs/components/Attached/Attached.js +1 -1
- package/lib/commonjs/components/Avatar/Avatar.js +10 -10
- package/lib/commonjs/components/AvatarGroup/AvatarGroup.js +9 -9
- package/lib/commonjs/components/Badge/Badge.js +12 -12
- package/lib/commonjs/components/BenefitCard/BenefitCard.js +95 -21
- package/lib/commonjs/components/BottomNav/BottomNav.js +2 -2
- package/lib/commonjs/components/BottomNavItem/BottomNavItem.js +3 -3
- package/lib/commonjs/components/Button/Button.js +31 -19
- package/lib/commonjs/components/Card/Card.js +20 -20
- package/lib/commonjs/components/CardAdvisory/CardAdvisory.js +6 -6
- package/lib/commonjs/components/CardCTA/CardCTA.js +21 -21
- package/lib/commonjs/components/CardFeedback/CardFeedback.js +18 -18
- package/lib/commonjs/components/CardFinancialCondition/CardFinancialCondition.js +7 -7
- package/lib/commonjs/components/CardInsight/CardInsight.js +1 -2
- package/lib/commonjs/components/Carousel/Carousel.js +18 -12
- package/lib/commonjs/components/CarouselCardAccounts/CarouselCardAccounts.js +75 -0
- package/lib/commonjs/components/Checkbox/Checkbox.js +6 -13
- package/lib/commonjs/components/ChipGroup/ChipGroup.js +1 -1
- package/lib/commonjs/components/ChipSelect/ChipSelect.js +11 -11
- package/lib/commonjs/components/CircularProgressBar/CircularProgressBar.js +5 -5
- package/lib/commonjs/components/CircularProgressBarDoted/CircularProgressBarDoted.js +8 -8
- package/lib/commonjs/components/CircularRating/CircularRating.js +3 -3
- package/lib/commonjs/components/CompareTable/CompareTable.js +16 -16
- package/lib/commonjs/components/DebitCard/DebitCard.js +18 -18
- package/lib/commonjs/components/Disclaimer/Disclaimer.js +5 -5
- package/lib/commonjs/components/DonutChart/DonutChart.js +11 -11
- package/lib/commonjs/components/Drawer/Drawer.js +60 -60
- package/lib/commonjs/components/Dropdown/Dropdown.js +22 -23
- package/lib/commonjs/components/DropdownInput/DropdownInput.js +10 -10
- package/lib/commonjs/components/EmptyState/EmptyState.js +14 -14
- package/lib/commonjs/components/FilterBar/FilterBar.js +2 -2
- package/lib/commonjs/components/Form/Form.js +3 -3
- package/lib/commonjs/components/FormField/FormField.js +6 -6
- package/lib/commonjs/components/FullscreenModal/FullscreenModal.js +24 -24
- package/lib/commonjs/components/Gauge/Gauge.js +8 -8
- package/lib/commonjs/components/HoldingsCard/HoldingsCard.js +10 -10
- package/lib/commonjs/components/Icon/Icon.js +6 -6
- package/lib/commonjs/components/IconCapsule/IconCapsule.js +7 -7
- package/lib/commonjs/components/InputSearch/InputSearch.js +9 -9
- package/lib/commonjs/components/InstitutionBadge/InstitutionBadge.js +3 -3
- package/lib/commonjs/components/ListGroup/ListGroup.js +8 -8
- package/lib/commonjs/components/ListItem/ListItem.js +10 -10
- package/lib/commonjs/components/LottieIntroBlock/LottieIntroBlock.js +13 -13
- package/lib/commonjs/components/LottiePlayer/LottiePlayer.js +2 -2
- package/lib/commonjs/components/LottiePlayer/LottiePlayer.web.js +2 -2
- package/lib/commonjs/components/MediaCard/MediaCard.js +21 -21
- package/lib/commonjs/components/MessageField/MessageField.js +8 -8
- package/lib/commonjs/components/MoneyValue/MoneyValue.js +7 -7
- package/lib/commonjs/components/NavArrow/NavArrow.js +8 -8
- package/lib/commonjs/components/NoteInput/NoteInput.js +12 -12
- package/lib/commonjs/components/Nudge/Nudge.js +20 -20
- package/lib/commonjs/components/OTP/OTP.js +15 -15
- package/lib/commonjs/components/PageHero/PageHero.js +16 -16
- package/lib/commonjs/components/PaymentFeedback/PaymentFeedback.js +23 -23
- package/lib/commonjs/components/Popup/Popup.js +1 -1
- package/lib/commonjs/components/ProgressBadge/ProgressBadge.js +5 -5
- package/lib/commonjs/components/Radio/Radio.js +8 -8
- package/lib/commonjs/components/RechargeCard/RechargeCard.js +31 -31
- package/lib/commonjs/components/SavingsGoalSummary/SavingsGoalSummary.js +59 -12
- package/lib/commonjs/components/ScrollArea/ScrollArea.js +126 -0
- package/lib/commonjs/components/Section/Section.js +24 -24
- package/lib/commonjs/components/StatusHero/StatusHero.js +14 -14
- package/lib/commonjs/components/Stepper/Step.js +16 -16
- package/lib/commonjs/components/Stepper/StepLabel.js +16 -16
- package/lib/commonjs/components/Stepper/Stepper.js +3 -3
- package/lib/commonjs/components/SuggestiveSearch/SuggestiveSearch.js +10 -10
- package/lib/commonjs/components/SupportText/SupportText.js +6 -6
- package/lib/commonjs/components/SupportText/SupportTextIcon.js +2 -2
- package/lib/commonjs/components/Text/Text.js +14 -2
- package/lib/commonjs/components/TextInput/TextInput.js +14 -14
- package/lib/commonjs/components/TextSegment/TextSegment.js +14 -2
- package/lib/commonjs/components/ThreadHero/ThreadHero.js +17 -17
- package/lib/commonjs/components/Title/Title.js +38 -16
- package/lib/commonjs/components/Toast/Toast.js +15 -15
- package/lib/commonjs/components/Toggle/Toggle.js +3 -11
- package/lib/commonjs/components/Tooltip/Tooltip.js +12 -12
- package/lib/commonjs/components/TransactionBubble/TransactionBubble.js +13 -13
- package/lib/commonjs/components/TransactionDetails/TransactionDetails.js +10 -10
- package/lib/commonjs/components/TransactionStatus/TransactionStatus.js +9 -9
- package/lib/commonjs/components/UpiHandle/UpiHandle.js +15 -15
- package/lib/commonjs/components/index.js +14 -0
- package/lib/commonjs/design-tokens/Coin Variables-variables-full.json +1 -1
- package/lib/commonjs/design-tokens/figma-modes.generated.js +50 -42
- package/lib/commonjs/icons/components/Icon4g.js +19 -0
- package/lib/commonjs/icons/components/Icon4gltedata.js +19 -0
- package/lib/commonjs/icons/components/Icon5g.js +19 -0
- package/lib/commonjs/icons/components/Icon5gdoubleplus.js +19 -0
- package/lib/commonjs/icons/components/Icon5gplus.js +19 -0
- package/lib/commonjs/icons/components/IconAdblocker.js +19 -0
- package/lib/commonjs/icons/components/IconAdblockplus.js +19 -0
- package/lib/commonjs/icons/components/IconAnalytics.js +19 -0
- package/lib/commonjs/icons/components/IconAnalyticsdata.js +19 -0
- package/lib/commonjs/icons/components/IconAnalyticspiechart.js +19 -0
- package/lib/commonjs/icons/components/IconAnalyticspiecharttree.js +19 -0
- package/lib/commonjs/icons/components/IconAnalyticspiecharttwo.js +19 -0
- package/lib/commonjs/icons/components/IconCompoundinterest.js +19 -0
- package/lib/commonjs/icons/components/IconConsumptionaccounted.js +19 -0
- package/lib/commonjs/icons/components/IconConsumptionaverage.js +19 -0
- package/lib/commonjs/icons/components/IconConsumptionhigh.js +19 -0
- package/lib/commonjs/icons/components/IconConsumptionlow.js +19 -0
- package/lib/commonjs/icons/components/IconConsumptionunaccounted.js +19 -0
- package/lib/commonjs/icons/components/IconCsvdoc.js +19 -0
- package/lib/commonjs/icons/components/IconDatabase.js +19 -0
- package/lib/commonjs/icons/components/IconDigitalecosystem.js +19 -0
- package/lib/commonjs/icons/components/IconDigitalselfservice.js +19 -0
- package/lib/commonjs/icons/components/IconDistribution.js +19 -0
- package/lib/commonjs/icons/components/IconDocument.js +19 -0
- package/lib/commonjs/icons/components/IconDocumentdoc.js +19 -0
- package/lib/commonjs/icons/components/IconDocumentjpg.js +19 -0
- package/lib/commonjs/icons/components/IconDocumentodt.js +19 -0
- package/lib/commonjs/icons/components/IconDocumentpdf.js +19 -0
- package/lib/commonjs/icons/components/IconDocumentpng.js +19 -0
- package/lib/commonjs/icons/components/IconDocumentraw.js +19 -0
- package/lib/commonjs/icons/components/IconDocumentrtf.js +19 -0
- package/lib/commonjs/icons/components/IconDocumentsettings.js +19 -0
- package/lib/commonjs/icons/components/IconDocumenttif.js +19 -0
- package/lib/commonjs/icons/components/IconDocumenttxt.js +19 -0
- package/lib/commonjs/icons/components/IconDocumentunknown.js +19 -0
- package/lib/commonjs/icons/components/IconDocumentxls.js +19 -0
- package/lib/commonjs/icons/components/IconDocumentxlsx.js +19 -0
- package/lib/commonjs/icons/components/IconFilerequest.js +19 -0
- package/lib/commonjs/icons/components/IconFilesend.js +19 -0
- package/lib/commonjs/icons/components/IconFileshare.js +19 -0
- package/lib/commonjs/icons/components/IconFindinpage.js +19 -0
- package/lib/commonjs/icons/components/IconFolder.js +19 -0
- package/lib/commonjs/icons/components/IconFolderbookmarks.js +19 -0
- package/lib/commonjs/icons/components/IconFolderfavorites.js +19 -0
- package/lib/commonjs/icons/components/IconFolderlocked.js +19 -0
- package/lib/commonjs/icons/components/IconFoldermovefiles.js +19 -0
- package/lib/commonjs/icons/components/IconFolderpublic.js +19 -0
- package/lib/commonjs/icons/components/IconFolderrated.js +19 -0
- package/lib/commonjs/icons/components/IconFolderrequest.js +19 -0
- package/lib/commonjs/icons/components/IconForm.js +19 -0
- package/lib/commonjs/icons/components/IconFormadd.js +19 -0
- package/lib/commonjs/icons/components/IconForms.js +19 -0
- package/lib/commonjs/icons/components/IconGraphincreasing.js +19 -0
- package/lib/commonjs/icons/components/IconGraphlow.js +19 -0
- package/lib/commonjs/icons/components/IconGraphtable.js +19 -0
- package/lib/commonjs/icons/components/IconHealthreport.js +19 -0
- package/lib/commonjs/icons/components/IconHubmode.js +19 -0
- package/lib/commonjs/icons/components/IconInfrastructure.js +19 -0
- package/lib/commonjs/icons/components/IconInterestlow.js +19 -0
- package/lib/commonjs/icons/components/IconLte.js +19 -0
- package/lib/commonjs/icons/components/IconNetworkfuture.js +19 -0
- package/lib/commonjs/icons/components/IconPagesettings.js +19 -0
- package/lib/commonjs/icons/components/IconPptxdoc.js +19 -0
- package/lib/commonjs/icons/components/IconPreferrednumber.js +19 -0
- package/lib/commonjs/icons/components/IconPremiumnumber.js +19 -0
- package/lib/commonjs/icons/components/IconProjection.js +19 -0
- package/lib/commonjs/icons/components/IconRequest.js +19 -0
- package/lib/commonjs/icons/components/IconRoutestraffic.js +19 -0
- package/lib/commonjs/icons/components/IconTechnology.js +19 -0
- package/lib/commonjs/icons/components/IconVolte.js +19 -0
- package/lib/commonjs/icons/components/IconVonr.js +19 -0
- package/lib/commonjs/icons/components/IconVowifi.js +19 -0
- package/lib/commonjs/icons/components/IconVpndata.js +19 -0
- package/lib/commonjs/icons/components/index.js +803 -0
- package/lib/commonjs/icons/registry.js +2 -2
- package/lib/commonjs/utils/index.js +25 -0
- package/lib/commonjs/utils/react-utils.js +62 -0
- package/lib/commonjs/utils/shadow.js +200 -0
- package/lib/module/components/ActionFooter/ActionFooter.js +7 -24
- package/lib/module/components/ActionTile/ActionTile.js +10 -10
- package/lib/module/components/AmountInput/AmountInput.js +3 -3
- package/lib/module/components/AreaLineChart/AreaLineChart.js +2 -2
- package/lib/module/components/Attached/Attached.js +1 -1
- package/lib/module/components/Avatar/Avatar.js +10 -10
- package/lib/module/components/AvatarGroup/AvatarGroup.js +9 -9
- package/lib/module/components/Badge/Badge.js +12 -12
- package/lib/module/components/BenefitCard/BenefitCard.js +95 -21
- package/lib/module/components/BottomNav/BottomNav.js +2 -2
- package/lib/module/components/BottomNavItem/BottomNavItem.js +3 -3
- package/lib/module/components/Button/Button.js +32 -20
- package/lib/module/components/Card/Card.js +20 -20
- package/lib/module/components/CardAdvisory/CardAdvisory.js +6 -6
- package/lib/module/components/CardCTA/CardCTA.js +21 -21
- package/lib/module/components/CardFeedback/CardFeedback.js +18 -18
- package/lib/module/components/CardFinancialCondition/CardFinancialCondition.js +7 -7
- package/lib/module/components/CardInsight/CardInsight.js +1 -2
- package/lib/module/components/Carousel/Carousel.js +18 -12
- package/lib/module/components/CarouselCardAccounts/CarouselCardAccounts.js +71 -0
- package/lib/module/components/Checkbox/Checkbox.js +2 -9
- package/lib/module/components/ChipGroup/ChipGroup.js +1 -1
- package/lib/module/components/ChipSelect/ChipSelect.js +11 -11
- package/lib/module/components/CircularProgressBar/CircularProgressBar.js +5 -5
- package/lib/module/components/CircularProgressBarDoted/CircularProgressBarDoted.js +8 -8
- package/lib/module/components/CircularRating/CircularRating.js +3 -3
- package/lib/module/components/CompareTable/CompareTable.js +16 -16
- package/lib/module/components/DebitCard/DebitCard.js +18 -18
- package/lib/module/components/Disclaimer/Disclaimer.js +5 -5
- package/lib/module/components/DonutChart/DonutChart.js +11 -11
- package/lib/module/components/Drawer/Drawer.js +60 -60
- package/lib/module/components/Dropdown/Dropdown.js +22 -23
- package/lib/module/components/DropdownInput/DropdownInput.js +10 -10
- package/lib/module/components/EmptyState/EmptyState.js +14 -14
- package/lib/module/components/FilterBar/FilterBar.js +2 -2
- package/lib/module/components/Form/Form.js +3 -3
- package/lib/module/components/FormField/FormField.js +6 -6
- package/lib/module/components/FullscreenModal/FullscreenModal.js +24 -24
- package/lib/module/components/Gauge/Gauge.js +8 -8
- package/lib/module/components/HoldingsCard/HoldingsCard.js +10 -10
- package/lib/module/components/Icon/Icon.js +6 -6
- package/lib/module/components/IconCapsule/IconCapsule.js +7 -7
- package/lib/module/components/InputSearch/InputSearch.js +9 -9
- package/lib/module/components/InstitutionBadge/InstitutionBadge.js +3 -3
- package/lib/module/components/ListGroup/ListGroup.js +8 -8
- package/lib/module/components/ListItem/ListItem.js +10 -10
- package/lib/module/components/LottieIntroBlock/LottieIntroBlock.js +13 -13
- package/lib/module/components/LottiePlayer/LottiePlayer.js +2 -2
- package/lib/module/components/LottiePlayer/LottiePlayer.web.js +2 -2
- package/lib/module/components/MediaCard/MediaCard.js +21 -21
- package/lib/module/components/MessageField/MessageField.js +8 -8
- package/lib/module/components/MoneyValue/MoneyValue.js +7 -7
- package/lib/module/components/NavArrow/NavArrow.js +8 -8
- package/lib/module/components/NoteInput/NoteInput.js +12 -12
- package/lib/module/components/Nudge/Nudge.js +20 -20
- package/lib/module/components/OTP/OTP.js +15 -15
- package/lib/module/components/PageHero/PageHero.js +16 -16
- package/lib/module/components/PaymentFeedback/PaymentFeedback.js +23 -23
- package/lib/module/components/Popup/Popup.js +1 -1
- package/lib/module/components/ProgressBadge/ProgressBadge.js +5 -5
- package/lib/module/components/Radio/Radio.js +9 -9
- package/lib/module/components/RechargeCard/RechargeCard.js +31 -31
- package/lib/module/components/SavingsGoalSummary/SavingsGoalSummary.js +60 -13
- package/lib/module/components/ScrollArea/ScrollArea.js +121 -0
- package/lib/module/components/Section/Section.js +24 -24
- package/lib/module/components/StatusHero/StatusHero.js +14 -14
- package/lib/module/components/Stepper/Step.js +16 -16
- package/lib/module/components/Stepper/StepLabel.js +16 -16
- package/lib/module/components/Stepper/Stepper.js +3 -3
- package/lib/module/components/SuggestiveSearch/SuggestiveSearch.js +10 -10
- package/lib/module/components/SupportText/SupportText.js +6 -6
- package/lib/module/components/SupportText/SupportTextIcon.js +2 -2
- package/lib/module/components/Text/Text.js +15 -3
- package/lib/module/components/TextInput/TextInput.js +14 -14
- package/lib/module/components/TextSegment/TextSegment.js +15 -3
- package/lib/module/components/ThreadHero/ThreadHero.js +17 -17
- package/lib/module/components/Title/Title.js +39 -17
- package/lib/module/components/Toast/Toast.js +15 -15
- package/lib/module/components/Toggle/Toggle.js +4 -12
- package/lib/module/components/Tooltip/Tooltip.js +12 -12
- package/lib/module/components/TransactionBubble/TransactionBubble.js +13 -13
- package/lib/module/components/TransactionDetails/TransactionDetails.js +10 -10
- package/lib/module/components/TransactionStatus/TransactionStatus.js +9 -9
- package/lib/module/components/UpiHandle/UpiHandle.js +15 -15
- package/lib/module/components/index.js +2 -0
- package/lib/module/design-tokens/Coin Variables-variables-full.json +1 -1
- package/lib/module/design-tokens/figma-modes.generated.js +50 -42
- package/lib/module/icons/components/Icon4g.js +12 -0
- package/lib/module/icons/components/Icon4gltedata.js +12 -0
- package/lib/module/icons/components/Icon5g.js +12 -0
- package/lib/module/icons/components/Icon5gdoubleplus.js +12 -0
- package/lib/module/icons/components/Icon5gplus.js +12 -0
- package/lib/module/icons/components/IconAdblocker.js +12 -0
- package/lib/module/icons/components/IconAdblockplus.js +12 -0
- package/lib/module/icons/components/IconAnalytics.js +12 -0
- package/lib/module/icons/components/IconAnalyticsdata.js +12 -0
- package/lib/module/icons/components/IconAnalyticspiechart.js +12 -0
- package/lib/module/icons/components/IconAnalyticspiecharttree.js +12 -0
- package/lib/module/icons/components/IconAnalyticspiecharttwo.js +12 -0
- package/lib/module/icons/components/IconCompoundinterest.js +12 -0
- package/lib/module/icons/components/IconConsumptionaccounted.js +12 -0
- package/lib/module/icons/components/IconConsumptionaverage.js +12 -0
- package/lib/module/icons/components/IconConsumptionhigh.js +12 -0
- package/lib/module/icons/components/IconConsumptionlow.js +12 -0
- package/lib/module/icons/components/IconConsumptionunaccounted.js +12 -0
- package/lib/module/icons/components/IconCsvdoc.js +12 -0
- package/lib/module/icons/components/IconDatabase.js +12 -0
- package/lib/module/icons/components/IconDigitalecosystem.js +12 -0
- package/lib/module/icons/components/IconDigitalselfservice.js +12 -0
- package/lib/module/icons/components/IconDistribution.js +12 -0
- package/lib/module/icons/components/IconDocument.js +12 -0
- package/lib/module/icons/components/IconDocumentdoc.js +12 -0
- package/lib/module/icons/components/IconDocumentjpg.js +12 -0
- package/lib/module/icons/components/IconDocumentodt.js +12 -0
- package/lib/module/icons/components/IconDocumentpdf.js +12 -0
- package/lib/module/icons/components/IconDocumentpng.js +12 -0
- package/lib/module/icons/components/IconDocumentraw.js +12 -0
- package/lib/module/icons/components/IconDocumentrtf.js +12 -0
- package/lib/module/icons/components/IconDocumentsettings.js +12 -0
- package/lib/module/icons/components/IconDocumenttif.js +12 -0
- package/lib/module/icons/components/IconDocumenttxt.js +12 -0
- package/lib/module/icons/components/IconDocumentunknown.js +12 -0
- package/lib/module/icons/components/IconDocumentxls.js +12 -0
- package/lib/module/icons/components/IconDocumentxlsx.js +12 -0
- package/lib/module/icons/components/IconFilerequest.js +12 -0
- package/lib/module/icons/components/IconFilesend.js +12 -0
- package/lib/module/icons/components/IconFileshare.js +12 -0
- package/lib/module/icons/components/IconFindinpage.js +12 -0
- package/lib/module/icons/components/IconFolder.js +12 -0
- package/lib/module/icons/components/IconFolderbookmarks.js +12 -0
- package/lib/module/icons/components/IconFolderfavorites.js +12 -0
- package/lib/module/icons/components/IconFolderlocked.js +12 -0
- package/lib/module/icons/components/IconFoldermovefiles.js +12 -0
- package/lib/module/icons/components/IconFolderpublic.js +12 -0
- package/lib/module/icons/components/IconFolderrated.js +12 -0
- package/lib/module/icons/components/IconFolderrequest.js +12 -0
- package/lib/module/icons/components/IconForm.js +12 -0
- package/lib/module/icons/components/IconFormadd.js +12 -0
- package/lib/module/icons/components/IconForms.js +12 -0
- package/lib/module/icons/components/IconGraphincreasing.js +12 -0
- package/lib/module/icons/components/IconGraphlow.js +12 -0
- package/lib/module/icons/components/IconGraphtable.js +12 -0
- package/lib/module/icons/components/IconHealthreport.js +12 -0
- package/lib/module/icons/components/IconHubmode.js +12 -0
- package/lib/module/icons/components/IconInfrastructure.js +12 -0
- package/lib/module/icons/components/IconInterestlow.js +12 -0
- package/lib/module/icons/components/IconLte.js +12 -0
- package/lib/module/icons/components/IconNetworkfuture.js +12 -0
- package/lib/module/icons/components/IconPagesettings.js +12 -0
- package/lib/module/icons/components/IconPptxdoc.js +12 -0
- package/lib/module/icons/components/IconPreferrednumber.js +12 -0
- package/lib/module/icons/components/IconPremiumnumber.js +12 -0
- package/lib/module/icons/components/IconProjection.js +12 -0
- package/lib/module/icons/components/IconRequest.js +12 -0
- package/lib/module/icons/components/IconRoutestraffic.js +12 -0
- package/lib/module/icons/components/IconTechnology.js +12 -0
- package/lib/module/icons/components/IconVolte.js +12 -0
- package/lib/module/icons/components/IconVonr.js +12 -0
- package/lib/module/icons/components/IconVowifi.js +12 -0
- package/lib/module/icons/components/IconVpndata.js +12 -0
- package/lib/module/icons/components/index.js +73 -0
- package/lib/module/icons/registry.js +2 -2
- package/lib/module/utils/index.js +2 -1
- package/lib/module/utils/react-utils.js +61 -0
- package/lib/module/utils/shadow.js +194 -0
- package/lib/typescript/src/components/BenefitCard/BenefitCard.d.ts +33 -4
- package/lib/typescript/src/components/Carousel/Carousel.d.ts +11 -1
- package/lib/typescript/src/components/CarouselCardAccounts/CarouselCardAccounts.d.ts +57 -0
- package/lib/typescript/src/components/SavingsGoalSummary/SavingsGoalSummary.d.ts +11 -1
- package/lib/typescript/src/components/ScrollArea/ScrollArea.d.ts +77 -0
- package/lib/typescript/src/components/Text/Text.d.ts +12 -3
- package/lib/typescript/src/components/TextSegment/TextSegment.d.ts +12 -3
- package/lib/typescript/src/components/Title/Title.d.ts +12 -2
- package/lib/typescript/src/components/index.d.ts +2 -0
- package/lib/typescript/src/design-tokens/figma-modes.generated.d.ts +23 -15
- package/lib/typescript/src/icons/components/Icon4g.d.ts +3 -0
- package/lib/typescript/src/icons/components/Icon4gltedata.d.ts +3 -0
- package/lib/typescript/src/icons/components/Icon5g.d.ts +3 -0
- package/lib/typescript/src/icons/components/Icon5gdoubleplus.d.ts +3 -0
- package/lib/typescript/src/icons/components/Icon5gplus.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconAdblocker.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconAdblockplus.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconAnalytics.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconAnalyticsdata.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconAnalyticspiechart.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconAnalyticspiecharttree.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconAnalyticspiecharttwo.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconCompoundinterest.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconConsumptionaccounted.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconConsumptionaverage.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconConsumptionhigh.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconConsumptionlow.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconConsumptionunaccounted.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconCsvdoc.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconDatabase.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconDigitalecosystem.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconDigitalselfservice.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconDistribution.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconDocument.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconDocumentdoc.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconDocumentjpg.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconDocumentodt.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconDocumentpdf.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconDocumentpng.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconDocumentraw.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconDocumentrtf.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconDocumentsettings.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconDocumenttif.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconDocumenttxt.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconDocumentunknown.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconDocumentxls.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconDocumentxlsx.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconFilerequest.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconFilesend.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconFileshare.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconFindinpage.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconFolder.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconFolderbookmarks.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconFolderfavorites.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconFolderlocked.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconFoldermovefiles.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconFolderpublic.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconFolderrated.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconFolderrequest.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconForm.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconFormadd.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconForms.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconGraphincreasing.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconGraphlow.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconGraphtable.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconHealthreport.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconHubmode.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconInfrastructure.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconInterestlow.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconLte.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconNetworkfuture.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconPagesettings.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconPptxdoc.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconPreferrednumber.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconPremiumnumber.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconProjection.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconRequest.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconRoutestraffic.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconTechnology.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconVolte.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconVonr.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconVowifi.d.ts +3 -0
- package/lib/typescript/src/icons/components/IconVpndata.d.ts +3 -0
- package/lib/typescript/src/icons/components/index.d.ts +73 -0
- package/lib/typescript/src/icons/registry.d.ts +1 -1
- package/lib/typescript/src/utils/index.d.ts +2 -0
- package/lib/typescript/src/utils/react-utils.d.ts +40 -1
- package/lib/typescript/src/utils/shadow.d.ts +72 -0
- package/package.json +2 -1
- package/src/components/ActionFooter/ActionFooter.tsx +8 -26
- package/src/components/ActionTile/ActionTile.tsx +10 -10
- package/src/components/AmountInput/AmountInput.tsx +3 -3
- package/src/components/AreaLineChart/AreaLineChart.tsx +2 -2
- package/src/components/Attached/Attached.tsx +1 -1
- package/src/components/Avatar/Avatar.tsx +10 -10
- package/src/components/AvatarGroup/AvatarGroup.tsx +9 -9
- package/src/components/Badge/Badge.tsx +12 -13
- package/src/components/BenefitCard/BenefitCard.tsx +120 -27
- package/src/components/BottomNav/BottomNav.tsx +2 -2
- package/src/components/BottomNavItem/BottomNavItem.tsx +3 -3
- package/src/components/Button/Button.tsx +30 -20
- package/src/components/Card/Card.tsx +20 -20
- package/src/components/CardAdvisory/CardAdvisory.tsx +6 -6
- package/src/components/CardCTA/CardCTA.tsx +21 -21
- package/src/components/CardFeedback/CardFeedback.tsx +18 -18
- package/src/components/CardFinancialCondition/CardFinancialCondition.tsx +7 -10
- package/src/components/CardInsight/CardInsight.tsx +1 -3
- package/src/components/Carousel/Carousel.tsx +29 -12
- package/src/components/CarouselCardAccounts/CarouselCardAccounts.tsx +113 -0
- package/src/components/Checkbox/Checkbox.tsx +2 -8
- package/src/components/ChipGroup/ChipGroup.tsx +1 -1
- package/src/components/ChipSelect/ChipSelect.tsx +11 -11
- package/src/components/CircularProgressBar/CircularProgressBar.tsx +5 -5
- package/src/components/CircularProgressBarDoted/CircularProgressBarDoted.tsx +8 -8
- package/src/components/CircularRating/CircularRating.tsx +3 -3
- package/src/components/CompareTable/CompareTable.tsx +16 -16
- package/src/components/DebitCard/DebitCard.tsx +22 -22
- package/src/components/Disclaimer/Disclaimer.tsx +5 -5
- package/src/components/DonutChart/DonutChart.tsx +11 -45
- package/src/components/Drawer/Drawer.tsx +80 -71
- package/src/components/Dropdown/Dropdown.tsx +23 -28
- package/src/components/DropdownInput/DropdownInput.tsx +10 -17
- package/src/components/EmptyState/EmptyState.tsx +14 -14
- package/src/components/FilterBar/FilterBar.tsx +2 -2
- package/src/components/Form/Form.tsx +3 -3
- package/src/components/FormField/FormField.tsx +6 -11
- package/src/components/FullscreenModal/FullscreenModal.tsx +24 -24
- package/src/components/Gauge/Gauge.tsx +8 -8
- package/src/components/HoldingsCard/HoldingsCard.tsx +10 -10
- package/src/components/Icon/Icon.tsx +6 -6
- package/src/components/IconCapsule/IconCapsule.tsx +7 -7
- package/src/components/InputSearch/InputSearch.tsx +9 -9
- package/src/components/InstitutionBadge/InstitutionBadge.tsx +3 -6
- package/src/components/ListGroup/ListGroup.tsx +8 -8
- package/src/components/ListItem/ListItem.tsx +10 -10
- package/src/components/LottieIntroBlock/LottieIntroBlock.tsx +13 -16
- package/src/components/LottiePlayer/LottiePlayer.tsx +2 -2
- package/src/components/LottiePlayer/LottiePlayer.web.tsx +2 -2
- package/src/components/MediaCard/MediaCard.tsx +21 -21
- package/src/components/MessageField/MessageField.tsx +8 -16
- package/src/components/MoneyValue/MoneyValue.tsx +7 -7
- package/src/components/NavArrow/NavArrow.tsx +8 -8
- package/src/components/NoteInput/NoteInput.tsx +12 -12
- package/src/components/Nudge/Nudge.tsx +20 -20
- package/src/components/OTP/OTP.tsx +16 -16
- package/src/components/PageHero/PageHero.tsx +16 -16
- package/src/components/PaymentFeedback/PaymentFeedback.tsx +27 -27
- package/src/components/Popup/Popup.tsx +1 -1
- package/src/components/ProgressBadge/ProgressBadge.tsx +5 -5
- package/src/components/Radio/Radio.tsx +8 -9
- package/src/components/RechargeCard/RechargeCard.tsx +31 -31
- package/src/components/SavingsGoalSummary/SavingsGoalSummary.tsx +105 -13
- package/src/components/ScrollArea/ScrollArea.tsx +200 -0
- package/src/components/Section/Section.tsx +26 -26
- package/src/components/StatusHero/StatusHero.tsx +14 -14
- package/src/components/Stepper/Step.tsx +16 -18
- package/src/components/Stepper/StepLabel.tsx +16 -27
- package/src/components/Stepper/Stepper.tsx +3 -4
- package/src/components/SuggestiveSearch/SuggestiveSearch.tsx +10 -20
- package/src/components/SupportText/SupportText.tsx +6 -6
- package/src/components/SupportText/SupportTextIcon.tsx +2 -2
- package/src/components/Text/Text.tsx +23 -5
- package/src/components/TextInput/TextInput.tsx +14 -14
- package/src/components/TextSegment/TextSegment.tsx +22 -4
- package/src/components/ThreadHero/ThreadHero.tsx +17 -17
- package/src/components/Title/Title.tsx +44 -18
- package/src/components/Toast/Toast.tsx +15 -15
- package/src/components/Toggle/Toggle.tsx +5 -10
- package/src/components/Tooltip/Tooltip.tsx +12 -12
- package/src/components/TransactionBubble/TransactionBubble.tsx +15 -15
- package/src/components/TransactionDetails/TransactionDetails.tsx +10 -10
- package/src/components/TransactionStatus/TransactionStatus.tsx +9 -9
- package/src/components/UpiHandle/UpiHandle.tsx +15 -15
- package/src/components/index.ts +2 -0
- package/src/design-tokens/Coin Variables-variables-full.json +1 -1
- package/src/design-tokens/figma-modes.generated.ts +50 -42
- package/src/icons/components/Icon4g.tsx +11 -0
- package/src/icons/components/Icon4gltedata.tsx +11 -0
- package/src/icons/components/Icon5g.tsx +11 -0
- package/src/icons/components/Icon5gdoubleplus.tsx +11 -0
- package/src/icons/components/Icon5gplus.tsx +11 -0
- package/src/icons/components/IconAdblocker.tsx +11 -0
- package/src/icons/components/IconAdblockplus.tsx +11 -0
- package/src/icons/components/IconAnalytics.tsx +11 -0
- package/src/icons/components/IconAnalyticsdata.tsx +11 -0
- package/src/icons/components/IconAnalyticspiechart.tsx +11 -0
- package/src/icons/components/IconAnalyticspiecharttree.tsx +11 -0
- package/src/icons/components/IconAnalyticspiecharttwo.tsx +11 -0
- package/src/icons/components/IconCompoundinterest.tsx +11 -0
- package/src/icons/components/IconConsumptionaccounted.tsx +11 -0
- package/src/icons/components/IconConsumptionaverage.tsx +11 -0
- package/src/icons/components/IconConsumptionhigh.tsx +11 -0
- package/src/icons/components/IconConsumptionlow.tsx +11 -0
- package/src/icons/components/IconConsumptionunaccounted.tsx +11 -0
- package/src/icons/components/IconCsvdoc.tsx +11 -0
- package/src/icons/components/IconDatabase.tsx +11 -0
- package/src/icons/components/IconDigitalecosystem.tsx +11 -0
- package/src/icons/components/IconDigitalselfservice.tsx +11 -0
- package/src/icons/components/IconDistribution.tsx +11 -0
- package/src/icons/components/IconDocument.tsx +11 -0
- package/src/icons/components/IconDocumentdoc.tsx +11 -0
- package/src/icons/components/IconDocumentjpg.tsx +11 -0
- package/src/icons/components/IconDocumentodt.tsx +11 -0
- package/src/icons/components/IconDocumentpdf.tsx +11 -0
- package/src/icons/components/IconDocumentpng.tsx +11 -0
- package/src/icons/components/IconDocumentraw.tsx +11 -0
- package/src/icons/components/IconDocumentrtf.tsx +11 -0
- package/src/icons/components/IconDocumentsettings.tsx +11 -0
- package/src/icons/components/IconDocumenttif.tsx +11 -0
- package/src/icons/components/IconDocumenttxt.tsx +11 -0
- package/src/icons/components/IconDocumentunknown.tsx +11 -0
- package/src/icons/components/IconDocumentxls.tsx +11 -0
- package/src/icons/components/IconDocumentxlsx.tsx +11 -0
- package/src/icons/components/IconFilerequest.tsx +11 -0
- package/src/icons/components/IconFilesend.tsx +11 -0
- package/src/icons/components/IconFileshare.tsx +11 -0
- package/src/icons/components/IconFindinpage.tsx +11 -0
- package/src/icons/components/IconFolder.tsx +11 -0
- package/src/icons/components/IconFolderbookmarks.tsx +11 -0
- package/src/icons/components/IconFolderfavorites.tsx +11 -0
- package/src/icons/components/IconFolderlocked.tsx +11 -0
- package/src/icons/components/IconFoldermovefiles.tsx +11 -0
- package/src/icons/components/IconFolderpublic.tsx +11 -0
- package/src/icons/components/IconFolderrated.tsx +11 -0
- package/src/icons/components/IconFolderrequest.tsx +11 -0
- package/src/icons/components/IconForm.tsx +11 -0
- package/src/icons/components/IconFormadd.tsx +11 -0
- package/src/icons/components/IconForms.tsx +11 -0
- package/src/icons/components/IconGraphincreasing.tsx +11 -0
- package/src/icons/components/IconGraphlow.tsx +11 -0
- package/src/icons/components/IconGraphtable.tsx +11 -0
- package/src/icons/components/IconHealthreport.tsx +11 -0
- package/src/icons/components/IconHubmode.tsx +11 -0
- package/src/icons/components/IconInfrastructure.tsx +11 -0
- package/src/icons/components/IconInterestlow.tsx +11 -0
- package/src/icons/components/IconLte.tsx +11 -0
- package/src/icons/components/IconNetworkfuture.tsx +11 -0
- package/src/icons/components/IconPagesettings.tsx +11 -0
- package/src/icons/components/IconPptxdoc.tsx +11 -0
- package/src/icons/components/IconPreferrednumber.tsx +11 -0
- package/src/icons/components/IconPremiumnumber.tsx +11 -0
- package/src/icons/components/IconProjection.tsx +11 -0
- package/src/icons/components/IconRequest.tsx +11 -0
- package/src/icons/components/IconRoutestraffic.tsx +11 -0
- package/src/icons/components/IconTechnology.tsx +11 -0
- package/src/icons/components/IconVolte.tsx +11 -0
- package/src/icons/components/IconVonr.tsx +11 -0
- package/src/icons/components/IconVowifi.tsx +11 -0
- package/src/icons/components/IconVpndata.tsx +11 -0
- package/src/icons/components/index.ts +73 -0
- package/src/icons/registry.ts +293 -1
- package/src/utils/index.ts +2 -0
- package/src/utils/react-utils.ts +72 -1
- package/src/utils/shadow.ts +219 -0
|
@@ -62,39 +62,39 @@ function HeroText({
|
|
|
62
62
|
modes
|
|
63
63
|
}) {
|
|
64
64
|
const styles = (0, _react.useMemo)(() => {
|
|
65
|
-
const gap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/gap', modes))
|
|
66
|
-
const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/textWrap/gap', modes))
|
|
65
|
+
const gap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/gap', modes));
|
|
66
|
+
const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/textWrap/gap', modes));
|
|
67
67
|
const eyebrowStyle = {
|
|
68
|
-
color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/color', modes)
|
|
69
|
-
fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontFamily', modes)
|
|
70
|
-
fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontSize', modes))
|
|
71
|
-
fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontWeight', modes)
|
|
72
|
-
lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/lineHeight', modes))
|
|
68
|
+
color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/color', modes),
|
|
69
|
+
fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontFamily', modes),
|
|
70
|
+
fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontSize', modes)),
|
|
71
|
+
fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontWeight', modes)),
|
|
72
|
+
lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/lineHeight', modes)),
|
|
73
73
|
textAlign: 'center'
|
|
74
74
|
};
|
|
75
75
|
const headlineStyle = {
|
|
76
|
-
color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/color', modes)
|
|
77
|
-
fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontFamily', modes)
|
|
78
|
-
fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontSize', modes))
|
|
79
|
-
fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontWeight', modes)
|
|
80
|
-
lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/lineHeight', modes))
|
|
76
|
+
color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/color', modes),
|
|
77
|
+
fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontFamily', modes),
|
|
78
|
+
fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontSize', modes)),
|
|
79
|
+
fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontWeight', modes)),
|
|
80
|
+
lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/lineHeight', modes)),
|
|
81
81
|
textAlign: 'center',
|
|
82
82
|
width: '100%'
|
|
83
83
|
};
|
|
84
84
|
const supportingTextStyle = {
|
|
85
|
-
color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/color', modes)
|
|
86
|
-
fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/fontFamily', modes)
|
|
87
|
-
fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/fontSize', modes))
|
|
88
|
-
fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/fontWeight', modes)
|
|
89
|
-
lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/lineHeight', modes))
|
|
85
|
+
color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/color', modes),
|
|
86
|
+
fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/fontFamily', modes),
|
|
87
|
+
fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/fontSize', modes)),
|
|
88
|
+
fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/fontWeight', modes)),
|
|
89
|
+
lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/lineHeight', modes)),
|
|
90
90
|
textAlign: 'center'
|
|
91
91
|
};
|
|
92
92
|
const priceTextStyle = {
|
|
93
|
-
color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/body/color', modes)
|
|
94
|
-
fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/body/fontFamily', modes)
|
|
95
|
-
fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/body/fontSize', modes))
|
|
96
|
-
fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/body/fontWeight', modes)
|
|
97
|
-
lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/body/lineHeight', modes))
|
|
93
|
+
color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/body/color', modes),
|
|
94
|
+
fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/body/fontFamily', modes),
|
|
95
|
+
fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/body/fontSize', modes)),
|
|
96
|
+
fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/body/fontWeight', modes)),
|
|
97
|
+
lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/body/lineHeight', modes)),
|
|
98
98
|
textAlign: 'center'
|
|
99
99
|
};
|
|
100
100
|
return {
|
|
@@ -217,7 +217,7 @@ function FullscreenModal({
|
|
|
217
217
|
...propModes,
|
|
218
218
|
...FULLSCREEN_MODAL_FORCED_MODES
|
|
219
219
|
}), [globalModes, propModes]);
|
|
220
|
-
const rootGap = Number((0, _figmaVariablesResolver.getVariableByName)('fullScreenModal/gap', modes))
|
|
220
|
+
const rootGap = Number((0, _figmaVariablesResolver.getVariableByName)('fullScreenModal/gap', modes));
|
|
221
221
|
|
|
222
222
|
// Safe-area insets so the floating chrome clears the system bars: the close
|
|
223
223
|
// button drops below the status bar / notch, and the sticky footer keeps its
|
|
@@ -231,7 +231,7 @@ function FullscreenModal({
|
|
|
231
231
|
// Extend (not replace) the footer's token bottom padding by the bottom inset
|
|
232
232
|
// so the action button never sits under the system navigation area.
|
|
233
233
|
const footerInsetStyle = (0, _react.useMemo)(() => {
|
|
234
|
-
const base = Number((0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/bottom', modes))
|
|
234
|
+
const base = Number((0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/bottom', modes));
|
|
235
235
|
return {
|
|
236
236
|
paddingBottom: base + insets.bottom
|
|
237
237
|
};
|
|
@@ -97,26 +97,26 @@ function Gauge({
|
|
|
97
97
|
const arcPath = `M ${startX} ${centerY} A ${radius} ${radius} 0 0 1 ${endX} ${centerY}`;
|
|
98
98
|
const arcLength = Math.PI * radius;
|
|
99
99
|
const progress = clamp(value, min, max);
|
|
100
|
-
const titleColor = (0, _figmaVariablesResolver.getVariableByName)('gauge/title/color', modes)
|
|
100
|
+
const titleColor = (0, _figmaVariablesResolver.getVariableByName)('gauge/title/color', modes);
|
|
101
101
|
const titleFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/title/fontSize', modes), 23);
|
|
102
102
|
const titleLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/title/lineHeight', modes), 23);
|
|
103
|
-
const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('gauge/title/fontFamily', modes)
|
|
103
|
+
const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('gauge/title/fontFamily', modes);
|
|
104
104
|
const titleFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('gauge/title/fontWeight', modes), '900');
|
|
105
105
|
const titleHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/title/height', modes), 46);
|
|
106
106
|
const readoutGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/readout/gap', modes), 8);
|
|
107
107
|
const readoutPadding = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/readout/padding', modes), 8);
|
|
108
|
-
const valueColor = (0, _figmaVariablesResolver.getVariableByName)('gauge/readout/value/color', modes)
|
|
108
|
+
const valueColor = (0, _figmaVariablesResolver.getVariableByName)('gauge/readout/value/color', modes);
|
|
109
109
|
const valueFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/readout/value/fontSize', modes), 36);
|
|
110
110
|
const valueLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/readout/value/lineHeight', modes), 36);
|
|
111
|
-
const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('gauge/readout/value/fontFamily', modes)
|
|
111
|
+
const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('gauge/readout/value/fontFamily', modes);
|
|
112
112
|
const valueFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('gauge/readout/value/fontWeight', modes), '800');
|
|
113
|
-
const captionColor = (0, _figmaVariablesResolver.getVariableByName)('gauge/caption/color', modes)
|
|
113
|
+
const captionColor = (0, _figmaVariablesResolver.getVariableByName)('gauge/caption/color', modes);
|
|
114
114
|
const captionFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/caption/fontSize', modes), 14);
|
|
115
115
|
const captionLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/caption/lineHeight', modes), 18);
|
|
116
|
-
const captionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('gauge/caption/fontFamily', modes)
|
|
116
|
+
const captionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('gauge/caption/fontFamily', modes);
|
|
117
117
|
const captionFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('gauge/caption/fontWeight', modes), '500');
|
|
118
|
-
const trackColor = getStrokeColor(trackStyle, (0, _figmaVariablesResolver.getVariableByName)('gauge/track/color', modes)
|
|
119
|
-
const progressColor = getStrokeColor(progressStyle, (0, _figmaVariablesResolver.getVariableByName)('gauge/progress/color', modes)
|
|
118
|
+
const trackColor = getStrokeColor(trackStyle, (0, _figmaVariablesResolver.getVariableByName)('gauge/track/color', modes));
|
|
119
|
+
const progressColor = getStrokeColor(progressStyle, (0, _figmaVariablesResolver.getVariableByName)('gauge/progress/color', modes));
|
|
120
120
|
const containerStyle = {
|
|
121
121
|
alignItems: 'center',
|
|
122
122
|
gap,
|
|
@@ -43,8 +43,8 @@ function HoldingsCard({
|
|
|
43
43
|
disableTruncation
|
|
44
44
|
}) {
|
|
45
45
|
// ---- Container tokens ----
|
|
46
|
-
const containerFill = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/fill', modes)
|
|
47
|
-
const containerStroke = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/stroke', modes)
|
|
46
|
+
const containerFill = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/fill', modes);
|
|
47
|
+
const containerStroke = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/stroke', modes);
|
|
48
48
|
const containerStrokeWeight = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/strokeWeight', modes) ?? 1).toString());
|
|
49
49
|
const containerCornerRadius = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/cornerRadius', modes) ?? 16).toString());
|
|
50
50
|
const containerGap = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/gap', modes) ?? 10).toString());
|
|
@@ -57,26 +57,26 @@ function HoldingsCard({
|
|
|
57
57
|
|
|
58
58
|
// ---- Hero tokens ----
|
|
59
59
|
const heroGap = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/gap', modes) ?? 4).toString());
|
|
60
|
-
const heroLabelColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/color', modes)
|
|
60
|
+
const heroLabelColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/color', modes);
|
|
61
61
|
const heroLabelFontSize = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/fontSize', modes) ?? 12).toString());
|
|
62
|
-
const heroLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/fontFamily', modes)
|
|
62
|
+
const heroLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/fontFamily', modes);
|
|
63
63
|
const heroLabelLineHeight = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/lineHeight', modes) ?? 16).toString());
|
|
64
64
|
const heroLabelFontWeight = ((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/fontWeight', modes) ?? '400').toString();
|
|
65
|
-
const heroValueColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/color', modes)
|
|
65
|
+
const heroValueColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/color', modes);
|
|
66
66
|
const heroValueFontSize = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/fontSize', modes) ?? 20).toString());
|
|
67
|
-
const heroValueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/fontFamily', modes)
|
|
67
|
+
const heroValueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/fontFamily', modes);
|
|
68
68
|
const heroValueLineHeight = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/lineHeight', modes) ?? 22).toString());
|
|
69
69
|
const heroValueFontWeight = ((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/fontWeight', modes) ?? '700').toString();
|
|
70
70
|
|
|
71
71
|
// ---- Details grid tokens ----
|
|
72
|
-
const detailLabelColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/color', modes)
|
|
72
|
+
const detailLabelColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/color', modes);
|
|
73
73
|
const detailLabelFontSize = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/fontSize', modes) ?? 10).toString());
|
|
74
|
-
const detailLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/fontFamily', modes)
|
|
74
|
+
const detailLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/fontFamily', modes);
|
|
75
75
|
const detailLabelLineHeight = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/lineHeight', modes) ?? 12).toString());
|
|
76
76
|
const detailLabelFontWeight = ((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/fontWeight', modes) ?? '500').toString();
|
|
77
|
-
const detailValueColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/color', modes)
|
|
77
|
+
const detailValueColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/color', modes);
|
|
78
78
|
const detailValueFontSize = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/fontSize', modes) ?? 12).toString());
|
|
79
|
-
const detailValueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/fontFamily', modes)
|
|
79
|
+
const detailValueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/fontFamily', modes);
|
|
80
80
|
const detailValueLineHeight = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/lineHeight', modes) ?? 14).toString());
|
|
81
81
|
const detailValueFontWeight = ((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/fontWeight', modes) ?? '500').toString();
|
|
82
82
|
const dataItemGap = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/dataItem/gap', modes) ?? 4).toString());
|
|
@@ -14,12 +14,12 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
14
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
15
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
16
16
|
function resolveIconTokens(modes) {
|
|
17
|
-
const iconColor = (0, _figmaVariablesResolver.getVariableByName)('icon/color', modes)
|
|
18
|
-
const iconSize = (0, _figmaVariablesResolver.getVariableByName)('icon/size', modes)
|
|
19
|
-
const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/left', modes)
|
|
20
|
-
const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/top', modes)
|
|
21
|
-
const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/right', modes)
|
|
22
|
-
const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/bottom', modes)
|
|
17
|
+
const iconColor = (0, _figmaVariablesResolver.getVariableByName)('icon/color', modes);
|
|
18
|
+
const iconSize = (0, _figmaVariablesResolver.getVariableByName)('icon/size', modes);
|
|
19
|
+
const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/left', modes);
|
|
20
|
+
const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/top', modes);
|
|
21
|
+
const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/right', modes);
|
|
22
|
+
const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/bottom', modes);
|
|
23
23
|
return {
|
|
24
24
|
containerStyle: {
|
|
25
25
|
flexDirection: 'column',
|
|
@@ -14,13 +14,13 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
14
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
15
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
16
16
|
function resolveIconCapsuleTokens(modes) {
|
|
17
|
-
const size = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/size', modes)
|
|
18
|
-
const radiusRaw = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/radius', modes)
|
|
19
|
-
const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/background', modes)
|
|
20
|
-
const borderColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/border/color', modes)
|
|
21
|
-
const borderSize = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/border/size', modes)
|
|
22
|
-
const iconColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/icon/color', modes)
|
|
23
|
-
const iconSize = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/icon/size', modes)
|
|
17
|
+
const size = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/size', modes);
|
|
18
|
+
const radiusRaw = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/radius', modes);
|
|
19
|
+
const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/background', modes);
|
|
20
|
+
const borderColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/border/color', modes);
|
|
21
|
+
const borderSize = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/border/size', modes);
|
|
22
|
+
const iconColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/icon/color', modes);
|
|
23
|
+
const iconSize = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/icon/size', modes);
|
|
24
24
|
|
|
25
25
|
// 9999 is the design-token sentinel for "perfect circle"
|
|
26
26
|
const borderRadius = radiusRaw === 9999 ? size / 2 : radiusRaw;
|
|
@@ -24,13 +24,13 @@ function SupportText({
|
|
|
24
24
|
style
|
|
25
25
|
}) {
|
|
26
26
|
// Resolve variables
|
|
27
|
-
const gap = (0, _figmaVariablesResolver.getVariableByName)('supportText/gap', modes)
|
|
28
|
-
const foreground = (0, _figmaVariablesResolver.getVariableByName)('supportText/foreground', modes)
|
|
29
|
-
const iconSize = (0, _figmaVariablesResolver.getVariableByName)('supportText/icon/size', modes)
|
|
30
|
-
const fontSize = (0, _figmaVariablesResolver.getVariableByName)('supportText/fontSize', modes)
|
|
31
|
-
const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('supportText/fontFamily', modes)
|
|
32
|
-
const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('supportText/fontWeight', modes)
|
|
33
|
-
const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('supportText/lineHeight', modes)
|
|
27
|
+
const gap = (0, _figmaVariablesResolver.getVariableByName)('supportText/gap', modes);
|
|
28
|
+
const foreground = (0, _figmaVariablesResolver.getVariableByName)('supportText/foreground', modes);
|
|
29
|
+
const iconSize = (0, _figmaVariablesResolver.getVariableByName)('supportText/icon/size', modes);
|
|
30
|
+
const fontSize = (0, _figmaVariablesResolver.getVariableByName)('supportText/fontSize', modes);
|
|
31
|
+
const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('supportText/fontFamily', modes);
|
|
32
|
+
const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('supportText/fontWeight', modes);
|
|
33
|
+
const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('supportText/lineHeight', modes);
|
|
34
34
|
const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
|
|
35
35
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
36
36
|
style: [{
|
|
@@ -77,7 +77,7 @@ const InputSearch = /*#__PURE__*/(0, _react.forwardRef)(function InputSearch({
|
|
|
77
77
|
...modes,
|
|
78
78
|
'InputState': isFocused ? 'Active' : 'Idle'
|
|
79
79
|
};
|
|
80
|
-
const formFieldGap = (0, _figmaVariablesResolver.getVariableByName)('formField/gap', componentModes)
|
|
80
|
+
const formFieldGap = (0, _figmaVariablesResolver.getVariableByName)('formField/gap', componentModes);
|
|
81
81
|
|
|
82
82
|
// If state is active (has text) and focused? Or just if it has text?
|
|
83
83
|
// Design typically: Active state (focused) shows clear button if there is text.
|
|
@@ -103,7 +103,7 @@ const InputSearch = /*#__PURE__*/(0, _react.forwardRef)(function InputSearch({
|
|
|
103
103
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
|
|
104
104
|
name: "ic_close",
|
|
105
105
|
size: 18,
|
|
106
|
-
color: (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/color', componentModes)
|
|
106
|
+
color: (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/color', componentModes)
|
|
107
107
|
})
|
|
108
108
|
})]
|
|
109
109
|
}) : null;
|
|
@@ -38,9 +38,9 @@ const toFontWeight = (value, fallback) => {
|
|
|
38
38
|
};
|
|
39
39
|
function resolveInstitutionBadgeTokens(modes) {
|
|
40
40
|
const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/gap', modes), 8);
|
|
41
|
-
const foreground = (0, _figmaVariablesResolver.getVariableByName)('institutionBadge/foreground', modes)
|
|
41
|
+
const foreground = (0, _figmaVariablesResolver.getVariableByName)('institutionBadge/foreground', modes);
|
|
42
42
|
const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/fontSize', modes), 14);
|
|
43
|
-
const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('institutionBadge/fontFamily', modes)
|
|
43
|
+
const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('institutionBadge/fontFamily', modes);
|
|
44
44
|
const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/lineHeight', modes), 18);
|
|
45
45
|
const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/fontWeight', modes), '500');
|
|
46
46
|
|
|
@@ -50,7 +50,7 @@ function resolveInstitutionBadgeTokens(modes) {
|
|
|
50
50
|
const avatarRadiusRaw = toNumber((0, _figmaVariablesResolver.getVariableByName)('avatar/radius', modes), 9999);
|
|
51
51
|
// 9999 is the design-token sentinel for "perfect circle".
|
|
52
52
|
const avatarRadius = avatarRadiusRaw === 9999 ? avatarSize / 2 : avatarRadiusRaw;
|
|
53
|
-
const avatarBorderColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/color', modes)
|
|
53
|
+
const avatarBorderColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/color', modes);
|
|
54
54
|
const avatarBorderSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('avatar/border/size', modes), 1);
|
|
55
55
|
return {
|
|
56
56
|
containerStyle: {
|
|
@@ -52,19 +52,19 @@ function ListGroup({
|
|
|
52
52
|
...rest
|
|
53
53
|
}) {
|
|
54
54
|
// Resolve container tokens
|
|
55
|
-
const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('listGroup/background', modes)
|
|
55
|
+
const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('listGroup/background', modes);
|
|
56
56
|
// The current exported token aliases a missing Figma variable. Keep the
|
|
57
57
|
// transparent fallback without logging the missing alias on every render.
|
|
58
58
|
const borderColor = 'rgba(255,255,255,0)';
|
|
59
|
-
const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('listGroup/borderWidth', modes)
|
|
60
|
-
const gap = (0, _figmaVariablesResolver.getVariableByName)('listGroup/gap', modes)
|
|
59
|
+
const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('listGroup/borderWidth', modes);
|
|
60
|
+
const gap = (0, _figmaVariablesResolver.getVariableByName)('listGroup/gap', modes);
|
|
61
61
|
|
|
62
62
|
// Resolve label typography tokens
|
|
63
|
-
const labelColor = (0, _figmaVariablesResolver.getVariableByName)('listGroup/label/color', modes)
|
|
64
|
-
const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('listGroup/fontSize', modes)
|
|
65
|
-
const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listGroup/lineHeight', modes)
|
|
66
|
-
const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listGroup/fontFamily', modes)
|
|
67
|
-
const labelFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listGroup/fontWeight', modes)
|
|
63
|
+
const labelColor = (0, _figmaVariablesResolver.getVariableByName)('listGroup/label/color', modes);
|
|
64
|
+
const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('listGroup/fontSize', modes);
|
|
65
|
+
const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listGroup/lineHeight', modes);
|
|
66
|
+
const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listGroup/fontFamily', modes);
|
|
67
|
+
const labelFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listGroup/fontWeight', modes);
|
|
68
68
|
const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
|
|
69
69
|
const containerStyle = {
|
|
70
70
|
backgroundColor,
|
|
@@ -63,17 +63,17 @@ function resolveListItemTokens(modes) {
|
|
|
63
63
|
const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/left', resolvedModes) ?? 0;
|
|
64
64
|
const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/right', resolvedModes) ?? 0;
|
|
65
65
|
const textWrapGap = (0, _figmaVariablesResolver.getVariableByName)('listItem/text wrap', resolvedModes) ?? 0;
|
|
66
|
-
const titleColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/color', textModes)
|
|
67
|
-
const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontSize', textModes)
|
|
68
|
-
const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/lineHeight', textModes)
|
|
69
|
-
const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontFamily', textModes)
|
|
70
|
-
const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontWeight', textModes)
|
|
66
|
+
const titleColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/color', textModes);
|
|
67
|
+
const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontSize', textModes);
|
|
68
|
+
const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/lineHeight', textModes);
|
|
69
|
+
const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontFamily', textModes);
|
|
70
|
+
const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontWeight', textModes);
|
|
71
71
|
const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
|
|
72
|
-
const supportColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/color', textModes)
|
|
73
|
-
const supportFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontSize', textModes)
|
|
74
|
-
const supportLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/lineHeight', textModes)
|
|
75
|
-
const supportFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontFamily', textModes)
|
|
76
|
-
const supportFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontWeight', textModes)
|
|
72
|
+
const supportColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/color', textModes);
|
|
73
|
+
const supportFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontSize', textModes);
|
|
74
|
+
const supportLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/lineHeight', textModes);
|
|
75
|
+
const supportFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontFamily', textModes);
|
|
76
|
+
const supportFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontWeight', textModes);
|
|
77
77
|
const supportFontWeight = typeof supportFontWeightRaw === 'number' ? supportFontWeightRaw.toString() : supportFontWeightRaw;
|
|
78
78
|
return {
|
|
79
79
|
baseContainerStyle: {
|
|
@@ -57,26 +57,26 @@ function LottieIntroBlock({
|
|
|
57
57
|
}), [globalModes, propModes]);
|
|
58
58
|
|
|
59
59
|
// Container
|
|
60
|
-
const gap = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/gap', modes))
|
|
61
|
-
const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/padding/horizontal', modes))
|
|
62
|
-
const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/padding/vertical', modes))
|
|
60
|
+
const gap = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/gap', modes));
|
|
61
|
+
const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/padding/horizontal', modes));
|
|
62
|
+
const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/padding/vertical', modes));
|
|
63
63
|
|
|
64
64
|
// Text wrap
|
|
65
|
-
const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/textWrap/gap', modes))
|
|
65
|
+
const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/textWrap/gap', modes));
|
|
66
66
|
|
|
67
67
|
// Title
|
|
68
|
-
const titleColor = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/foreground', modes)
|
|
69
|
-
const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/fontSize', modes))
|
|
70
|
-
const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/fontFamily', modes)
|
|
71
|
-
const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/lineHeight', modes))
|
|
72
|
-
const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/fontWeight', modes)
|
|
68
|
+
const titleColor = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/foreground', modes);
|
|
69
|
+
const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/fontSize', modes));
|
|
70
|
+
const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/fontFamily', modes);
|
|
71
|
+
const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/lineHeight', modes));
|
|
72
|
+
const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/fontWeight', modes);
|
|
73
73
|
|
|
74
74
|
// Support text
|
|
75
|
-
const supportColor = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/foreground', modes)
|
|
76
|
-
const supportFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/fontSize', modes))
|
|
77
|
-
const supportFontFamily = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/fontFamily', modes)
|
|
75
|
+
const supportColor = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/foreground', modes);
|
|
76
|
+
const supportFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/fontSize', modes));
|
|
77
|
+
const supportFontFamily = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/fontFamily', modes);
|
|
78
78
|
const supportLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/lineHeight', modes)) || 18;
|
|
79
|
-
const supportFontWeight = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/fontWeight', modes)
|
|
79
|
+
const supportFontWeight = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/fontWeight', modes);
|
|
80
80
|
const containerStyle = {
|
|
81
81
|
flexDirection: 'column',
|
|
82
82
|
alignItems: 'center',
|
|
@@ -27,8 +27,8 @@ function resolveSize(size, modes) {
|
|
|
27
27
|
height: size
|
|
28
28
|
};
|
|
29
29
|
if (size && typeof size === 'object') return size;
|
|
30
|
-
const width = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes))
|
|
31
|
-
const height = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes))
|
|
30
|
+
const width = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes));
|
|
31
|
+
const height = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes));
|
|
32
32
|
return {
|
|
33
33
|
width,
|
|
34
34
|
height
|
|
@@ -18,8 +18,8 @@ function resolveSize(size, modes) {
|
|
|
18
18
|
height: size
|
|
19
19
|
};
|
|
20
20
|
if (size && typeof size === 'object') return size;
|
|
21
|
-
const width = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes))
|
|
22
|
-
const height = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes))
|
|
21
|
+
const width = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes));
|
|
22
|
+
const height = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes));
|
|
23
23
|
return {
|
|
24
24
|
width,
|
|
25
25
|
height
|
|
@@ -46,7 +46,7 @@ function MediaCard({
|
|
|
46
46
|
modes = _reactUtils.EMPTY_MODES,
|
|
47
47
|
style
|
|
48
48
|
}) {
|
|
49
|
-
const radius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/radius', modes)
|
|
49
|
+
const radius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/radius', modes));
|
|
50
50
|
const containerStyle = {
|
|
51
51
|
borderRadius: radius,
|
|
52
52
|
overflow: 'hidden',
|
|
@@ -114,11 +114,11 @@ function Title({
|
|
|
114
114
|
}) {
|
|
115
115
|
const context = (0, _react.useContext)(MediaCardContext);
|
|
116
116
|
const modes = propModes || context.modes || {};
|
|
117
|
-
const color = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/color', modes)
|
|
118
|
-
const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/fontSize', modes)
|
|
119
|
-
const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/fontFamily', modes)
|
|
120
|
-
const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/lineHeight', modes)
|
|
121
|
-
const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/fontWeight', modes)
|
|
117
|
+
const color = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/color', modes);
|
|
118
|
+
const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/fontSize', modes));
|
|
119
|
+
const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/fontFamily', modes);
|
|
120
|
+
const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/lineHeight', modes));
|
|
121
|
+
const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/fontWeight', modes);
|
|
122
122
|
const textStyle = {
|
|
123
123
|
color,
|
|
124
124
|
fontSize,
|
|
@@ -162,9 +162,9 @@ function Footer({
|
|
|
162
162
|
}) {
|
|
163
163
|
const context = (0, _react.useContext)(MediaCardContext);
|
|
164
164
|
const modes = propModes || context.modes || {};
|
|
165
|
-
const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/gap', modes)
|
|
166
|
-
const paddingHorizontal = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/padding/horizontal', modes)
|
|
167
|
-
const paddingVertical = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/padding/vertical', modes)
|
|
165
|
+
const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/gap', modes));
|
|
166
|
+
const paddingHorizontal = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/padding/horizontal', modes));
|
|
167
|
+
const paddingVertical = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/padding/vertical', modes));
|
|
168
168
|
|
|
169
169
|
// Figma tokens:
|
|
170
170
|
// blur/minimal/background -> tint laid over the live blur, also used
|
|
@@ -175,8 +175,8 @@ function Footer({
|
|
|
175
175
|
// with the previous expo-blur scale) and
|
|
176
176
|
// maps it internally — here we convert the
|
|
177
177
|
// token's radius to that intensity scale.
|
|
178
|
-
const glassBgColor = (0, _figmaVariablesResolver.getVariableByName)('blur/minimal/background', modes)
|
|
179
|
-
const blurRadius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('blur/minimal', modes)
|
|
178
|
+
const glassBgColor = (0, _figmaVariablesResolver.getVariableByName)('blur/minimal/background', modes);
|
|
179
|
+
const blurRadius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('blur/minimal', modes));
|
|
180
180
|
const intensity = Math.max(0, Math.min(100, Math.round(blurRadius * 1.7)));
|
|
181
181
|
|
|
182
182
|
// Pick the iOS/Android material tint from "Contrast Context" mode so the
|
|
@@ -225,11 +225,11 @@ function FooterTitle({
|
|
|
225
225
|
}) {
|
|
226
226
|
const context = (0, _react.useContext)(MediaCardContext);
|
|
227
227
|
const modes = propModes || context.modes || {};
|
|
228
|
-
const color = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/color', modes)
|
|
229
|
-
const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/fontSize', modes)
|
|
230
|
-
const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/fontFamily', modes)
|
|
231
|
-
const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/lineHeight', modes)
|
|
232
|
-
const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/fontWeight', modes)
|
|
228
|
+
const color = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/color', modes);
|
|
229
|
+
const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/fontSize', modes));
|
|
230
|
+
const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/fontFamily', modes);
|
|
231
|
+
const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/lineHeight', modes));
|
|
232
|
+
const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/fontWeight', modes);
|
|
233
233
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
234
234
|
style: [{
|
|
235
235
|
color,
|
|
@@ -253,11 +253,11 @@ function FooterSubtitle({
|
|
|
253
253
|
}) {
|
|
254
254
|
const context = (0, _react.useContext)(MediaCardContext);
|
|
255
255
|
const modes = propModes || context.modes || {};
|
|
256
|
-
const color = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/color', modes)
|
|
257
|
-
const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/fontSize', modes)
|
|
258
|
-
const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/fontFamily', modes)
|
|
259
|
-
const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/lineHeight', modes)
|
|
260
|
-
const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/fontWeight', modes)
|
|
256
|
+
const color = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/color', modes);
|
|
257
|
+
const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/fontSize', modes));
|
|
258
|
+
const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/fontFamily', modes);
|
|
259
|
+
const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/lineHeight', modes));
|
|
260
|
+
const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/fontWeight', modes);
|
|
261
261
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
262
262
|
style: [{
|
|
263
263
|
color,
|
|
@@ -50,13 +50,13 @@ function firstError(error) {
|
|
|
50
50
|
function useMessageFieldTokens(modes) {
|
|
51
51
|
return (0, _react.useMemo)(() => {
|
|
52
52
|
const wrapperGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/gap', modes), 8);
|
|
53
|
-
const labelColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/label/foreground', modes)
|
|
54
|
-
const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('messageField/label/fontFamily', modes)
|
|
53
|
+
const labelColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/label/foreground', modes);
|
|
54
|
+
const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('messageField/label/fontFamily', modes);
|
|
55
55
|
const labelFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/label/fontSize', modes), 14);
|
|
56
56
|
const labelLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/label/lineHeight', modes), 17);
|
|
57
57
|
const labelFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('messageField/label/fontWeight', modes), '500');
|
|
58
|
-
const textareaBackground = (0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/background', modes)
|
|
59
|
-
const textareaBorderColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/border/color', modes)
|
|
58
|
+
const textareaBackground = (0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/background', modes);
|
|
59
|
+
const textareaBorderColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/border/color', modes);
|
|
60
60
|
const textareaBorderSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/border/size', modes), 1.5);
|
|
61
61
|
const textareaRadius = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/radius', modes), 8);
|
|
62
62
|
const textareaPadding = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/padding', modes), 12);
|
|
@@ -69,13 +69,13 @@ function useMessageFieldTokens(modes) {
|
|
|
69
69
|
// the `FormField States` cascade once typed-state tokens land. We
|
|
70
70
|
// never re-route this through another token (e.g. the counter
|
|
71
71
|
// color) because that conflates two semantically distinct tokens.
|
|
72
|
-
const inputTextColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/text/foreground', modes)
|
|
73
|
-
const inputFontFamily = (0, _figmaVariablesResolver.getVariableByName)('messageField/text/fontFamily', modes)
|
|
72
|
+
const inputTextColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/text/foreground', modes);
|
|
73
|
+
const inputFontFamily = (0, _figmaVariablesResolver.getVariableByName)('messageField/text/fontFamily', modes);
|
|
74
74
|
const inputFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/text/fontSize', modes), 16);
|
|
75
75
|
const inputLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/text/lineHeight', modes), 21);
|
|
76
76
|
const inputFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('messageField/text/fontWeight', modes), '400');
|
|
77
|
-
const counterColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/maxLength/foreground', modes)
|
|
78
|
-
const counterFontFamily = (0, _figmaVariablesResolver.getVariableByName)('messageField/maxLength/fontFamily', modes)
|
|
77
|
+
const counterColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/maxLength/foreground', modes);
|
|
78
|
+
const counterFontFamily = (0, _figmaVariablesResolver.getVariableByName)('messageField/maxLength/fontFamily', modes);
|
|
79
79
|
const counterFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/maxLength/fontSize', modes), 14);
|
|
80
80
|
const counterLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/maxLength/lineHeight', modes), 18);
|
|
81
81
|
const counterFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('messageField/maxLength/fontWeight', modes), '400');
|
|
@@ -92,14 +92,14 @@ function MoneyValue({
|
|
|
92
92
|
}, [value, negative, hidden]);
|
|
93
93
|
|
|
94
94
|
// Resolve typography and layout tokens from Figma
|
|
95
|
-
const textColor = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/text/color', modes)
|
|
96
|
-
const currencyFontSize = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/currency/fontSize', modes)
|
|
97
|
-
const currencyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/currency/lineHeight', modes)
|
|
98
|
-
const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/value/fontSize', modes)
|
|
99
|
-
const valueLineHeight = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/value/lineHeight', modes)
|
|
100
|
-
const fontWeightValue = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/fontWeight', modes)
|
|
95
|
+
const textColor = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/text/color', modes);
|
|
96
|
+
const currencyFontSize = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/currency/fontSize', modes);
|
|
97
|
+
const currencyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/currency/lineHeight', modes);
|
|
98
|
+
const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/value/fontSize', modes);
|
|
99
|
+
const valueLineHeight = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/value/lineHeight', modes);
|
|
100
|
+
const fontWeightValue = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/fontWeight', modes);
|
|
101
101
|
const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue;
|
|
102
|
-
const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/fontFamily', modes)
|
|
102
|
+
const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/fontFamily', modes);
|
|
103
103
|
const gap = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/gap', modes) ?? 4;
|
|
104
104
|
|
|
105
105
|
// Resolve currency to a symbol, supporting both symbols and ISO codes
|
|
@@ -23,14 +23,14 @@ const touchTargetStyle = {
|
|
|
23
23
|
justifyContent: 'center'
|
|
24
24
|
};
|
|
25
25
|
function resolveNavArrowTokens(modes) {
|
|
26
|
-
const iconColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/color', modes)
|
|
27
|
-
const widthToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/width', modes))
|
|
28
|
-
const heightToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/height', modes))
|
|
29
|
-
const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/radius', modes))
|
|
30
|
-
const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/background', modes)
|
|
31
|
-
const iconWidth = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/width', modes))
|
|
32
|
-
const iconHeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/height', modes))
|
|
33
|
-
const strokeWeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/strokeWeight', modes))
|
|
26
|
+
const iconColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/color', modes);
|
|
27
|
+
const widthToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/width', modes));
|
|
28
|
+
const heightToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/height', modes));
|
|
29
|
+
const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/radius', modes));
|
|
30
|
+
const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/background', modes);
|
|
31
|
+
const iconWidth = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/width', modes));
|
|
32
|
+
const iconHeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/height', modes));
|
|
33
|
+
const strokeWeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/strokeWeight', modes));
|
|
34
34
|
return {
|
|
35
35
|
iconColor,
|
|
36
36
|
iconWidth,
|