From bcf07db4765b9fbd02718a16e3c6d6e14b1ce3c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Wed, 31 Jan 2024 11:58:31 -0700 Subject: [PATCH 1/9] feat(icons): add LogoPaste icon --- .changeset/sweet-panthers-float.md | 6 +++ packages/paste-icons/build.icon-list.js | 2 +- packages/paste-icons/json/icons.json | 2 +- packages/paste-icons/src/LogoPasteIcon.tsx | 49 ++++++++++++++++++++++ packages/paste-icons/svg/LogoPaste.svg | 3 ++ 5 files changed, 60 insertions(+), 2 deletions(-) create mode 100644 .changeset/sweet-panthers-float.md create mode 100644 packages/paste-icons/src/LogoPasteIcon.tsx create mode 100644 packages/paste-icons/svg/LogoPaste.svg diff --git a/.changeset/sweet-panthers-float.md b/.changeset/sweet-panthers-float.md new file mode 100644 index 0000000000..d73745339e --- /dev/null +++ b/.changeset/sweet-panthers-float.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/icons": minor +"@twilio-paste/core": minor +--- + +[Icons] Add new LogoPaste icon diff --git a/packages/paste-icons/build.icon-list.js b/packages/paste-icons/build.icon-list.js index 43f52ae275..aa087fe7e3 100644 --- a/packages/paste-icons/build.icon-list.js +++ b/packages/paste-icons/build.icon-list.js @@ -1 +1 @@ -module.exports = ["src/AcceptIcon.tsx","src/AddListIcon.tsx","src/AddSeriesIcon.tsx","src/AgentIcon.tsx","src/AlignLeftIcon.tsx","src/AlignRightIcon.tsx","src/AlignVerticalCenterIcon.tsx","src/ArchiveIcon.tsx","src/ArrowBackIcon.tsx","src/ArrowDownIcon.tsx","src/ArrowForwardIcon.tsx","src/ArrowUpIcon.tsx","src/AttachIcon.tsx","src/AttachmentIcon.tsx","src/AutomaticUpdatesIcon.tsx","src/BoldIcon.tsx","src/BuildIcon.tsx","src/BuiltInIcon.tsx","src/BusinessIcon.tsx","src/ButtonIcon.tsx","src/CalendarIcon.tsx","src/CallActiveIcon.tsx","src/CallAddIcon.tsx","src/CallFailedIcon.tsx","src/CallHoldIcon.tsx","src/CallIcon.tsx","src/CallIncomingIcon.tsx","src/CallOutgoingIcon.tsx","src/CallTransferIcon.tsx","src/ChatIcon.tsx","src/CheckboxCheckIcon.tsx","src/CheckboxLineIcon.tsx","src/CheckmarkCircleIcon.tsx","src/ChevronDisclosureCollapsedIcon.tsx","src/ChevronDisclosureExpandedIcon.tsx","src/ChevronDisclosureIcon.tsx","src/ChevronDoubleLeftIcon.tsx","src/ChevronDoubleRightIcon.tsx","src/ChevronDownIcon.tsx","src/ChevronExpandIcon.tsx","src/ChevronLeftIcon.tsx","src/ChevronRightIcon.tsx","src/ChevronUpIcon.tsx","src/ClearIcon.tsx","src/CloseCircleIcon.tsx","src/CloseIcon.tsx","src/CloudIcon.tsx","src/CodeIcon.tsx","src/CollapseIcon.tsx","src/ColorPickerIcon.tsx","src/ColumnIcon.tsx","src/CommunityIcon.tsx","src/ConnectivityAvailableIcon.tsx","src/ConnectivityBusyIcon.tsx","src/ConnectivityNeutralIcon.tsx","src/ConnectivityOfflineIcon.tsx","src/ConnectivityUnavailableIcon.tsx","src/CopyIcon.tsx","src/CreditCardIcon.tsx","src/CustomIcon.tsx","src/DarkModeIcon.tsx","src/DataBarChartIcon.tsx","src/DataLineChartIcon.tsx","src/DataPieChartIcon.tsx","src/DataTableIcon.tsx","src/DatabaseIcon.tsx","src/DeleteIcon.tsx","src/DeliveredIcon.tsx","src/DialpadIcon.tsx","src/DirectoryIcon.tsx","src/DisableIcon.tsx","src/DividerIcon.tsx","src/DoNotIcon.tsx","src/DocumentationIcon.tsx","src/DownloadIcon.tsx","src/DragHorizontalIcon.tsx","src/DragIcon.tsx","src/DragVerticalIcon.tsx","src/EditIcon.tsx","src/ElasticSIPTrunkingCapableIcon.tsx","src/EmailIcon.tsx","src/EmojiIcon.tsx","src/ErrorIcon.tsx","src/ExpandIcon.tsx","src/ExportIcon.tsx","src/FaxCapableIcon.tsx","src/FeedIcon.tsx","src/FileAudioIcon.tsx","src/FileIcon.tsx","src/FileImageIcon.tsx","src/FileVideoIcon.tsx","src/FileZipIcon.tsx","src/FilterIcon.tsx","src/FlagIcon.tsx","src/GitIcon.tsx","src/HeatmapIcon.tsx","src/HideIcon.tsx","src/HistoryIcon.tsx","src/ImageTextIcon.tsx","src/InboxIcon.tsx","src/IndentDecreaseIcon.tsx","src/IndentIncreaseIcon.tsx","src/InformationIcon.tsx","src/ItalicIcon.tsx","src/LightModeIcon.tsx","src/LinkExternalIcon.tsx","src/LinkIcon.tsx","src/LoadingIcon.tsx","src/LockIcon.tsx","src/LogInIcon.tsx","src/LogOutIcon.tsx","src/LogoTwilioIcon.tsx","src/LowerHandIcon.tsx","src/MMSCapableIcon.tsx","src/MenuIcon.tsx","src/MicrophoneOffIcon.tsx","src/MicrophoneOnIcon.tsx","src/MinusIcon.tsx","src/MobileIcon.tsx","src/MoreIcon.tsx","src/NeutralIcon.tsx","src/NewIcon.tsx","src/NotesIcon.tsx","src/NotificationIcon.tsx","src/OrderedListIcon.tsx","src/OutOfDateIcon.tsx","src/PauseIcon.tsx","src/PinIcon.tsx","src/PlayIcon.tsx","src/PlusIcon.tsx","src/ProcessDisabledIcon.tsx","src/ProcessDraftIcon.tsx","src/ProcessErrorIcon.tsx","src/ProcessInProgressIcon.tsx","src/ProcessNeutralIcon.tsx","src/ProcessSuccessIcon.tsx","src/ProcessWarningIcon.tsx","src/ProductAPIExplorerIcon.tsx","src/ProductAddOnsIcon.tsx","src/ProductAdminAccessControlIcon.tsx","src/ProductAdminAccountsIcon.tsx","src/ProductAdminDomainsIcon.tsx","src/ProductAdminResoldCustomersIcon.tsx","src/ProductAdminSSOIcon.tsx","src/ProductAdminUsersIcon.tsx","src/ProductAlarmsIcon.tsx","src/ProductAssetsIcon.tsx","src/ProductAudiencesIcon.tsx","src/ProductAuthyIcon.tsx","src/ProductAutopilotIcon.tsx","src/ProductBillingIcon.tsx","src/ProductCLIIcon.tsx","src/ProductChannelsIcon.tsx","src/ProductChatIcon.tsx","src/ProductCodeExchangeCommunityIcon.tsx","src/ProductCodeExchangePartnerIcon.tsx","src/ProductCommsIcon.tsx","src/ProductConnectedDevicesIcon.tsx","src/ProductConnectionsIcon.tsx","src/ProductContactCenterAdminIcon.tsx","src/ProductContactCenterAssessmentsIcon.tsx","src/ProductContactCenterQueuesIcon.tsx","src/ProductContactCenterTasksIcon.tsx","src/ProductContactCenterTeamsIcon.tsx","src/ProductConversationsIcon.tsx","src/ProductDebuggerIcon.tsx","src/ProductDestinationsIcon.tsx","src/ProductElasticSIPTrunkingIcon.tsx","src/ProductEmailAPIIcon.tsx","src/ProductEngageIcon.tsx","src/ProductEngagementIntelligencePlatformIcon.tsx","src/ProductEventLibraryIcon.tsx","src/ProductEventStreamIcon.tsx","src/ProductEventStreamsIcon.tsx","src/ProductFaxIcon.tsx","src/ProductFlexIcon.tsx","src/ProductFlowIcon.tsx","src/ProductFrontlineIcon.tsx","src/ProductFunctionsIcon.tsx","src/ProductHomeIcon.tsx","src/ProductInsightsIcon.tsx","src/ProductInterconnectIcon.tsx","src/ProductInternetOfThingsEmbeddedSIMIcon.tsx","src/ProductInternetOfThingsIcon.tsx","src/ProductInternetOfThingsNarrowbandIcon.tsx","src/ProductInternetOfThingsProgrammableAssetTrackerIcon.tsx","src/ProductInternetOfThingsSuperSIMIcon.tsx","src/ProductInternetOfThingsTrustOnboardIcon.tsx","src/ProductInternetOfThingsWirelessIcon.tsx","src/ProductJourneysIcon.tsx","src/ProductKeysIcon.tsx","src/ProductLiveIcon.tsx","src/ProductLogsIcon.tsx","src/ProductLookupIcon.tsx","src/ProductMappingIcon.tsx","src/ProductMarketingCampaignsIcon.tsx","src/ProductMessagingIcon.tsx","src/ProductMicrovisorIcon.tsx","src/ProductNotifyIcon.tsx","src/ProductOneAdminIcon.tsx","src/ProductPayConnectorIcon.tsx","src/ProductPersonasIcon.tsx","src/ProductPhoneNumbersIcon.tsx","src/ProductPrivacyIcon.tsx","src/ProductProtocolsIcon.tsx","src/ProductProxyIcon.tsx","src/ProductRegionalIcon.tsx","src/ProductReverseETLIcon.tsx","src/ProductSDKIcon.tsx","src/ProductSegmentIcon.tsx","src/ProductSettingsIcon.tsx","src/ProductSourceSchemaIcon.tsx","src/ProductSourcesIcon.tsx","src/ProductStudioIcon.tsx","src/ProductSupportIcon.tsx","src/ProductSwitcherIcon.tsx","src/ProductSyncIcon.tsx","src/ProductTaskRouterIcon.tsx","src/ProductTraitsIcon.tsx","src/ProductTrustHubIcon.tsx","src/ProductTwiMLBinsIcon.tsx","src/ProductTwilioOrgIcon.tsx","src/ProductUSSDIcon.tsx","src/ProductUnifyIcon.tsx","src/ProductUsageIcon.tsx","src/ProductVerifyIcon.tsx","src/ProductVideoIcon.tsx","src/ProductVoiceIcon.tsx","src/ProductVoiceIntelligenceIcon.tsx","src/RaiseHandIcon.tsx","src/RecordIcon.tsx","src/RedoIcon.tsx","src/RefreshIcon.tsx","src/RepeatIcon.tsx","src/ResetIcon.tsx","src/SMSCapableIcon.tsx","src/SMSIcon.tsx","src/ScreenShareIcon.tsx","src/SearchIcon.tsx","src/SelectIcon.tsx","src/SelectedIcon.tsx","src/SendIcon.tsx","src/SentIcon.tsx","src/ShareIcon.tsx","src/ShowIcon.tsx","src/ShrinkIcon.tsx","src/SkipBackIcon.tsx","src/SkipForwardIcon.tsx","src/SocialIcon.tsx","src/SortAlphabeticalIcon.tsx","src/SpacerVerticalIcon.tsx","src/StarIcon.tsx","src/StopIcon.tsx","src/StopScreenShareIcon.tsx","src/StoreIcon.tsx","src/StrikethroughIcon.tsx","src/SubscriptIcon.tsx","src/SuccessIcon.tsx","src/SuperscriptIcon.tsx","src/SupportIcon.tsx","src/SystemStatusIcon.tsx","src/TaskIcon.tsx","src/TextAlignCenterIcon.tsx","src/TextAlignJustifyIcon.tsx","src/TextAlignLeftIcon.tsx","src/TextAlignRightIcon.tsx","src/TextFormatClearIcon.tsx","src/TextFormatIcon.tsx","src/TextHighlightIcon.tsx","src/ThemeIcon.tsx","src/ThumbsDownIcon.tsx","src/ThumbsUpIcon.tsx","src/TimeIcon.tsx","src/TipIcon.tsx","src/TokenIcon.tsx","src/TourIcon.tsx","src/TranslationIcon.tsx","src/TrendDownIcon.tsx","src/TrendUpIcon.tsx","src/UnarchiveIcon.tsx","src/UnderlineIcon.tsx","src/UndoIcon.tsx","src/UnlockIcon.tsx","src/UnorderedListIcon.tsx","src/UnpinIcon.tsx","src/UnsortedIcon.tsx","src/UnsubscribeIcon.tsx","src/UploadIcon.tsx","src/UploadToCloudIcon.tsx","src/UserIcon.tsx","src/UsersIcon.tsx","src/VideoOffIcon.tsx","src/VideoOnIcon.tsx","src/VoiceCapableIcon.tsx","src/VoicemailIcon.tsx","src/VolumeOffIcon.tsx","src/VolumeOnIcon.tsx","src/WarningIcon.tsx","src/WebCapableIcon.tsx","src/ZoomInIcon.tsx"]; \ No newline at end of file +module.exports = ["src/AcceptIcon.tsx","src/AddListIcon.tsx","src/AddSeriesIcon.tsx","src/AgentIcon.tsx","src/AlignLeftIcon.tsx","src/AlignRightIcon.tsx","src/AlignVerticalCenterIcon.tsx","src/ArchiveIcon.tsx","src/ArrowBackIcon.tsx","src/ArrowDownIcon.tsx","src/ArrowForwardIcon.tsx","src/ArrowUpIcon.tsx","src/AttachIcon.tsx","src/AttachmentIcon.tsx","src/AutomaticUpdatesIcon.tsx","src/BoldIcon.tsx","src/BuildIcon.tsx","src/BuiltInIcon.tsx","src/BusinessIcon.tsx","src/ButtonIcon.tsx","src/CalendarIcon.tsx","src/CallActiveIcon.tsx","src/CallAddIcon.tsx","src/CallFailedIcon.tsx","src/CallHoldIcon.tsx","src/CallIcon.tsx","src/CallIncomingIcon.tsx","src/CallOutgoingIcon.tsx","src/CallTransferIcon.tsx","src/ChatIcon.tsx","src/CheckboxCheckIcon.tsx","src/CheckboxLineIcon.tsx","src/CheckmarkCircleIcon.tsx","src/ChevronDisclosureCollapsedIcon.tsx","src/ChevronDisclosureExpandedIcon.tsx","src/ChevronDisclosureIcon.tsx","src/ChevronDoubleLeftIcon.tsx","src/ChevronDoubleRightIcon.tsx","src/ChevronDownIcon.tsx","src/ChevronExpandIcon.tsx","src/ChevronLeftIcon.tsx","src/ChevronRightIcon.tsx","src/ChevronUpIcon.tsx","src/ClearIcon.tsx","src/CloseCircleIcon.tsx","src/CloseIcon.tsx","src/CloudIcon.tsx","src/CodeIcon.tsx","src/CollapseIcon.tsx","src/ColorPickerIcon.tsx","src/ColumnIcon.tsx","src/CommunityIcon.tsx","src/ConnectivityAvailableIcon.tsx","src/ConnectivityBusyIcon.tsx","src/ConnectivityNeutralIcon.tsx","src/ConnectivityOfflineIcon.tsx","src/ConnectivityUnavailableIcon.tsx","src/CopyIcon.tsx","src/CreditCardIcon.tsx","src/CustomIcon.tsx","src/DarkModeIcon.tsx","src/DataBarChartIcon.tsx","src/DataLineChartIcon.tsx","src/DataPieChartIcon.tsx","src/DataTableIcon.tsx","src/DatabaseIcon.tsx","src/DeleteIcon.tsx","src/DeliveredIcon.tsx","src/DialpadIcon.tsx","src/DirectoryIcon.tsx","src/DisableIcon.tsx","src/DividerIcon.tsx","src/DoNotIcon.tsx","src/DocumentationIcon.tsx","src/DownloadIcon.tsx","src/DragHorizontalIcon.tsx","src/DragIcon.tsx","src/DragVerticalIcon.tsx","src/EditIcon.tsx","src/ElasticSIPTrunkingCapableIcon.tsx","src/EmailIcon.tsx","src/EmojiIcon.tsx","src/ErrorIcon.tsx","src/ExpandIcon.tsx","src/ExportIcon.tsx","src/FaxCapableIcon.tsx","src/FeedIcon.tsx","src/FileAudioIcon.tsx","src/FileIcon.tsx","src/FileImageIcon.tsx","src/FileVideoIcon.tsx","src/FileZipIcon.tsx","src/FilterIcon.tsx","src/FlagIcon.tsx","src/GitIcon.tsx","src/HeatmapIcon.tsx","src/HideIcon.tsx","src/HistoryIcon.tsx","src/ImageTextIcon.tsx","src/InboxIcon.tsx","src/IndentDecreaseIcon.tsx","src/IndentIncreaseIcon.tsx","src/InformationIcon.tsx","src/ItalicIcon.tsx","src/LightModeIcon.tsx","src/LinkExternalIcon.tsx","src/LinkIcon.tsx","src/LoadingIcon.tsx","src/LockIcon.tsx","src/LogInIcon.tsx","src/LogOutIcon.tsx","src/LogoPasteIcon.tsx","src/LogoTwilioIcon.tsx","src/LowerHandIcon.tsx","src/MMSCapableIcon.tsx","src/MenuIcon.tsx","src/MicrophoneOffIcon.tsx","src/MicrophoneOnIcon.tsx","src/MinusIcon.tsx","src/MobileIcon.tsx","src/MoreIcon.tsx","src/NeutralIcon.tsx","src/NewIcon.tsx","src/NotesIcon.tsx","src/NotificationIcon.tsx","src/OrderedListIcon.tsx","src/OutOfDateIcon.tsx","src/PauseIcon.tsx","src/PinIcon.tsx","src/PlayIcon.tsx","src/PlusIcon.tsx","src/ProcessDisabledIcon.tsx","src/ProcessDraftIcon.tsx","src/ProcessErrorIcon.tsx","src/ProcessInProgressIcon.tsx","src/ProcessNeutralIcon.tsx","src/ProcessSuccessIcon.tsx","src/ProcessWarningIcon.tsx","src/ProductAPIExplorerIcon.tsx","src/ProductAddOnsIcon.tsx","src/ProductAdminAccessControlIcon.tsx","src/ProductAdminAccountsIcon.tsx","src/ProductAdminDomainsIcon.tsx","src/ProductAdminResoldCustomersIcon.tsx","src/ProductAdminSSOIcon.tsx","src/ProductAdminUsersIcon.tsx","src/ProductAlarmsIcon.tsx","src/ProductAssetsIcon.tsx","src/ProductAudiencesIcon.tsx","src/ProductAuthyIcon.tsx","src/ProductAutopilotIcon.tsx","src/ProductBillingIcon.tsx","src/ProductCLIIcon.tsx","src/ProductChannelsIcon.tsx","src/ProductChatIcon.tsx","src/ProductCodeExchangeCommunityIcon.tsx","src/ProductCodeExchangePartnerIcon.tsx","src/ProductCommsIcon.tsx","src/ProductConnectedDevicesIcon.tsx","src/ProductConnectionsIcon.tsx","src/ProductContactCenterAdminIcon.tsx","src/ProductContactCenterAssessmentsIcon.tsx","src/ProductContactCenterQueuesIcon.tsx","src/ProductContactCenterTasksIcon.tsx","src/ProductContactCenterTeamsIcon.tsx","src/ProductConversationsIcon.tsx","src/ProductDebuggerIcon.tsx","src/ProductDestinationsIcon.tsx","src/ProductElasticSIPTrunkingIcon.tsx","src/ProductEmailAPIIcon.tsx","src/ProductEngageIcon.tsx","src/ProductEngagementIntelligencePlatformIcon.tsx","src/ProductEventLibraryIcon.tsx","src/ProductEventStreamIcon.tsx","src/ProductEventStreamsIcon.tsx","src/ProductFaxIcon.tsx","src/ProductFlexIcon.tsx","src/ProductFlowIcon.tsx","src/ProductFrontlineIcon.tsx","src/ProductFunctionsIcon.tsx","src/ProductHomeIcon.tsx","src/ProductInsightsIcon.tsx","src/ProductInterconnectIcon.tsx","src/ProductInternetOfThingsEmbeddedSIMIcon.tsx","src/ProductInternetOfThingsIcon.tsx","src/ProductInternetOfThingsNarrowbandIcon.tsx","src/ProductInternetOfThingsProgrammableAssetTrackerIcon.tsx","src/ProductInternetOfThingsSuperSIMIcon.tsx","src/ProductInternetOfThingsTrustOnboardIcon.tsx","src/ProductInternetOfThingsWirelessIcon.tsx","src/ProductJourneysIcon.tsx","src/ProductKeysIcon.tsx","src/ProductLiveIcon.tsx","src/ProductLogsIcon.tsx","src/ProductLookupIcon.tsx","src/ProductMappingIcon.tsx","src/ProductMarketingCampaignsIcon.tsx","src/ProductMessagingIcon.tsx","src/ProductMicrovisorIcon.tsx","src/ProductNotifyIcon.tsx","src/ProductOneAdminIcon.tsx","src/ProductPayConnectorIcon.tsx","src/ProductPersonasIcon.tsx","src/ProductPhoneNumbersIcon.tsx","src/ProductPrivacyIcon.tsx","src/ProductProtocolsIcon.tsx","src/ProductProxyIcon.tsx","src/ProductRegionalIcon.tsx","src/ProductReverseETLIcon.tsx","src/ProductSDKIcon.tsx","src/ProductSegmentIcon.tsx","src/ProductSettingsIcon.tsx","src/ProductSourceSchemaIcon.tsx","src/ProductSourcesIcon.tsx","src/ProductStudioIcon.tsx","src/ProductSupportIcon.tsx","src/ProductSwitcherIcon.tsx","src/ProductSyncIcon.tsx","src/ProductTaskRouterIcon.tsx","src/ProductTraitsIcon.tsx","src/ProductTrustHubIcon.tsx","src/ProductTwiMLBinsIcon.tsx","src/ProductTwilioOrgIcon.tsx","src/ProductUSSDIcon.tsx","src/ProductUnifyIcon.tsx","src/ProductUsageIcon.tsx","src/ProductVerifyIcon.tsx","src/ProductVideoIcon.tsx","src/ProductVoiceIcon.tsx","src/ProductVoiceIntelligenceIcon.tsx","src/RaiseHandIcon.tsx","src/RecordIcon.tsx","src/RedoIcon.tsx","src/RefreshIcon.tsx","src/RepeatIcon.tsx","src/ResetIcon.tsx","src/SMSCapableIcon.tsx","src/SMSIcon.tsx","src/ScreenShareIcon.tsx","src/SearchIcon.tsx","src/SelectIcon.tsx","src/SelectedIcon.tsx","src/SendIcon.tsx","src/SentIcon.tsx","src/ShareIcon.tsx","src/ShowIcon.tsx","src/ShrinkIcon.tsx","src/SkipBackIcon.tsx","src/SkipForwardIcon.tsx","src/SocialIcon.tsx","src/SortAlphabeticalIcon.tsx","src/SpacerVerticalIcon.tsx","src/StarIcon.tsx","src/StopIcon.tsx","src/StopScreenShareIcon.tsx","src/StoreIcon.tsx","src/StrikethroughIcon.tsx","src/SubscriptIcon.tsx","src/SuccessIcon.tsx","src/SuperscriptIcon.tsx","src/SupportIcon.tsx","src/SystemStatusIcon.tsx","src/TaskIcon.tsx","src/TextAlignCenterIcon.tsx","src/TextAlignJustifyIcon.tsx","src/TextAlignLeftIcon.tsx","src/TextAlignRightIcon.tsx","src/TextFormatClearIcon.tsx","src/TextFormatIcon.tsx","src/TextHighlightIcon.tsx","src/ThemeIcon.tsx","src/ThumbsDownIcon.tsx","src/ThumbsUpIcon.tsx","src/TimeIcon.tsx","src/TipIcon.tsx","src/TokenIcon.tsx","src/TourIcon.tsx","src/TranslationIcon.tsx","src/TrendDownIcon.tsx","src/TrendUpIcon.tsx","src/UnarchiveIcon.tsx","src/UnderlineIcon.tsx","src/UndoIcon.tsx","src/UnlockIcon.tsx","src/UnorderedListIcon.tsx","src/UnpinIcon.tsx","src/UnsortedIcon.tsx","src/UnsubscribeIcon.tsx","src/UploadIcon.tsx","src/UploadToCloudIcon.tsx","src/UserIcon.tsx","src/UsersIcon.tsx","src/VideoOffIcon.tsx","src/VideoOnIcon.tsx","src/VoiceCapableIcon.tsx","src/VoicemailIcon.tsx","src/VolumeOffIcon.tsx","src/VolumeOnIcon.tsx","src/WarningIcon.tsx","src/WebCapableIcon.tsx","src/ZoomInIcon.tsx"]; \ No newline at end of file diff --git a/packages/paste-icons/json/icons.json b/packages/paste-icons/json/icons.json index 307804374a..87197e86f6 100644 --- a/packages/paste-icons/json/icons.json +++ b/packages/paste-icons/json/icons.json @@ -1 +1 @@ -{"icons":[{"name":"AcceptIcon","svg":"/svg/AcceptIcon.svg","cjs":"/cjs/AcceptIcon.js","esm":"/esm/AcceptIcon.js"},{"name":"AddListIcon","svg":"/svg/AddListIcon.svg","cjs":"/cjs/AddListIcon.js","esm":"/esm/AddListIcon.js"},{"name":"AddSeriesIcon","svg":"/svg/AddSeriesIcon.svg","cjs":"/cjs/AddSeriesIcon.js","esm":"/esm/AddSeriesIcon.js"},{"name":"AgentIcon","svg":"/svg/AgentIcon.svg","cjs":"/cjs/AgentIcon.js","esm":"/esm/AgentIcon.js"},{"name":"AlignLeftIcon","svg":"/svg/AlignLeftIcon.svg","cjs":"/cjs/AlignLeftIcon.js","esm":"/esm/AlignLeftIcon.js"},{"name":"AlignRightIcon","svg":"/svg/AlignRightIcon.svg","cjs":"/cjs/AlignRightIcon.js","esm":"/esm/AlignRightIcon.js"},{"name":"AlignVerticalCenterIcon","svg":"/svg/AlignVerticalCenterIcon.svg","cjs":"/cjs/AlignVerticalCenterIcon.js","esm":"/esm/AlignVerticalCenterIcon.js"},{"name":"ArchiveIcon","svg":"/svg/ArchiveIcon.svg","cjs":"/cjs/ArchiveIcon.js","esm":"/esm/ArchiveIcon.js"},{"name":"ArrowBackIcon","svg":"/svg/ArrowBackIcon.svg","cjs":"/cjs/ArrowBackIcon.js","esm":"/esm/ArrowBackIcon.js"},{"name":"ArrowDownIcon","svg":"/svg/ArrowDownIcon.svg","cjs":"/cjs/ArrowDownIcon.js","esm":"/esm/ArrowDownIcon.js"},{"name":"ArrowForwardIcon","svg":"/svg/ArrowForwardIcon.svg","cjs":"/cjs/ArrowForwardIcon.js","esm":"/esm/ArrowForwardIcon.js"},{"name":"ArrowUpIcon","svg":"/svg/ArrowUpIcon.svg","cjs":"/cjs/ArrowUpIcon.js","esm":"/esm/ArrowUpIcon.js"},{"name":"AttachIcon","svg":"/svg/AttachIcon.svg","cjs":"/cjs/AttachIcon.js","esm":"/esm/AttachIcon.js"},{"name":"AttachmentIcon","svg":"/svg/AttachmentIcon.svg","cjs":"/cjs/AttachmentIcon.js","esm":"/esm/AttachmentIcon.js"},{"name":"AutomaticUpdatesIcon","svg":"/svg/AutomaticUpdatesIcon.svg","cjs":"/cjs/AutomaticUpdatesIcon.js","esm":"/esm/AutomaticUpdatesIcon.js"},{"name":"BoldIcon","svg":"/svg/BoldIcon.svg","cjs":"/cjs/BoldIcon.js","esm":"/esm/BoldIcon.js"},{"name":"BuildIcon","svg":"/svg/BuildIcon.svg","cjs":"/cjs/BuildIcon.js","esm":"/esm/BuildIcon.js"},{"name":"BuiltInIcon","svg":"/svg/BuiltInIcon.svg","cjs":"/cjs/BuiltInIcon.js","esm":"/esm/BuiltInIcon.js"},{"name":"BusinessIcon","svg":"/svg/BusinessIcon.svg","cjs":"/cjs/BusinessIcon.js","esm":"/esm/BusinessIcon.js"},{"name":"ButtonIcon","svg":"/svg/ButtonIcon.svg","cjs":"/cjs/ButtonIcon.js","esm":"/esm/ButtonIcon.js"},{"name":"CalendarIcon","svg":"/svg/CalendarIcon.svg","cjs":"/cjs/CalendarIcon.js","esm":"/esm/CalendarIcon.js"},{"name":"CallActiveIcon","svg":"/svg/CallActiveIcon.svg","cjs":"/cjs/CallActiveIcon.js","esm":"/esm/CallActiveIcon.js"},{"name":"CallAddIcon","svg":"/svg/CallAddIcon.svg","cjs":"/cjs/CallAddIcon.js","esm":"/esm/CallAddIcon.js"},{"name":"CallFailedIcon","svg":"/svg/CallFailedIcon.svg","cjs":"/cjs/CallFailedIcon.js","esm":"/esm/CallFailedIcon.js"},{"name":"CallHoldIcon","svg":"/svg/CallHoldIcon.svg","cjs":"/cjs/CallHoldIcon.js","esm":"/esm/CallHoldIcon.js"},{"name":"CallIcon","svg":"/svg/CallIcon.svg","cjs":"/cjs/CallIcon.js","esm":"/esm/CallIcon.js"},{"name":"CallIncomingIcon","svg":"/svg/CallIncomingIcon.svg","cjs":"/cjs/CallIncomingIcon.js","esm":"/esm/CallIncomingIcon.js"},{"name":"CallOutgoingIcon","svg":"/svg/CallOutgoingIcon.svg","cjs":"/cjs/CallOutgoingIcon.js","esm":"/esm/CallOutgoingIcon.js"},{"name":"CallTransferIcon","svg":"/svg/CallTransferIcon.svg","cjs":"/cjs/CallTransferIcon.js","esm":"/esm/CallTransferIcon.js"},{"name":"ChatIcon","svg":"/svg/ChatIcon.svg","cjs":"/cjs/ChatIcon.js","esm":"/esm/ChatIcon.js"},{"name":"CheckboxCheckIcon","svg":"/svg/CheckboxCheckIcon.svg","cjs":"/cjs/CheckboxCheckIcon.js","esm":"/esm/CheckboxCheckIcon.js"},{"name":"CheckboxLineIcon","svg":"/svg/CheckboxLineIcon.svg","cjs":"/cjs/CheckboxLineIcon.js","esm":"/esm/CheckboxLineIcon.js"},{"name":"ChevronDisclosureIcon","svg":"/svg/ChevronDisclosureIcon.svg","cjs":"/cjs/ChevronDisclosureIcon.js","esm":"/esm/ChevronDisclosureIcon.js"},{"name":"ChevronDoubleLeftIcon","svg":"/svg/ChevronDoubleLeftIcon.svg","cjs":"/cjs/ChevronDoubleLeftIcon.js","esm":"/esm/ChevronDoubleLeftIcon.js"},{"name":"ChevronDoubleRightIcon","svg":"/svg/ChevronDoubleRightIcon.svg","cjs":"/cjs/ChevronDoubleRightIcon.js","esm":"/esm/ChevronDoubleRightIcon.js"},{"name":"ChevronDownIcon","svg":"/svg/ChevronDownIcon.svg","cjs":"/cjs/ChevronDownIcon.js","esm":"/esm/ChevronDownIcon.js"},{"name":"ChevronExpandIcon","svg":"/svg/ChevronExpandIcon.svg","cjs":"/cjs/ChevronExpandIcon.js","esm":"/esm/ChevronExpandIcon.js"},{"name":"ChevronLeftIcon","svg":"/svg/ChevronLeftIcon.svg","cjs":"/cjs/ChevronLeftIcon.js","esm":"/esm/ChevronLeftIcon.js"},{"name":"ChevronRightIcon","svg":"/svg/ChevronRightIcon.svg","cjs":"/cjs/ChevronRightIcon.js","esm":"/esm/ChevronRightIcon.js"},{"name":"ChevronUpIcon","svg":"/svg/ChevronUpIcon.svg","cjs":"/cjs/ChevronUpIcon.js","esm":"/esm/ChevronUpIcon.js"},{"name":"ClearIcon","svg":"/svg/ClearIcon.svg","cjs":"/cjs/ClearIcon.js","esm":"/esm/ClearIcon.js"},{"name":"CloseIcon","svg":"/svg/CloseIcon.svg","cjs":"/cjs/CloseIcon.js","esm":"/esm/CloseIcon.js"},{"name":"CloudIcon","svg":"/svg/CloudIcon.svg","cjs":"/cjs/CloudIcon.js","esm":"/esm/CloudIcon.js"},{"name":"CodeIcon","svg":"/svg/CodeIcon.svg","cjs":"/cjs/CodeIcon.js","esm":"/esm/CodeIcon.js"},{"name":"CollapseIcon","svg":"/svg/CollapseIcon.svg","cjs":"/cjs/CollapseIcon.js","esm":"/esm/CollapseIcon.js"},{"name":"ColorPickerIcon","svg":"/svg/ColorPickerIcon.svg","cjs":"/cjs/ColorPickerIcon.js","esm":"/esm/ColorPickerIcon.js"},{"name":"ColumnIcon","svg":"/svg/ColumnIcon.svg","cjs":"/cjs/ColumnIcon.js","esm":"/esm/ColumnIcon.js"},{"name":"CommunityIcon","svg":"/svg/CommunityIcon.svg","cjs":"/cjs/CommunityIcon.js","esm":"/esm/CommunityIcon.js"},{"name":"ConnectivityAvailableIcon","svg":"/svg/ConnectivityAvailableIcon.svg","cjs":"/cjs/ConnectivityAvailableIcon.js","esm":"/esm/ConnectivityAvailableIcon.js"},{"name":"ConnectivityBusyIcon","svg":"/svg/ConnectivityBusyIcon.svg","cjs":"/cjs/ConnectivityBusyIcon.js","esm":"/esm/ConnectivityBusyIcon.js"},{"name":"ConnectivityNeutralIcon","svg":"/svg/ConnectivityNeutralIcon.svg","cjs":"/cjs/ConnectivityNeutralIcon.js","esm":"/esm/ConnectivityNeutralIcon.js"},{"name":"ConnectivityOfflineIcon","svg":"/svg/ConnectivityOfflineIcon.svg","cjs":"/cjs/ConnectivityOfflineIcon.js","esm":"/esm/ConnectivityOfflineIcon.js"},{"name":"ConnectivityUnavailableIcon","svg":"/svg/ConnectivityUnavailableIcon.svg","cjs":"/cjs/ConnectivityUnavailableIcon.js","esm":"/esm/ConnectivityUnavailableIcon.js"},{"name":"CopyIcon","svg":"/svg/CopyIcon.svg","cjs":"/cjs/CopyIcon.js","esm":"/esm/CopyIcon.js"},{"name":"CreditCardIcon","svg":"/svg/CreditCardIcon.svg","cjs":"/cjs/CreditCardIcon.js","esm":"/esm/CreditCardIcon.js"},{"name":"CustomIcon","svg":"/svg/CustomIcon.svg","cjs":"/cjs/CustomIcon.js","esm":"/esm/CustomIcon.js"},{"name":"DarkModeIcon","svg":"/svg/DarkModeIcon.svg","cjs":"/cjs/DarkModeIcon.js","esm":"/esm/DarkModeIcon.js"},{"name":"DataBarChartIcon","svg":"/svg/DataBarChartIcon.svg","cjs":"/cjs/DataBarChartIcon.js","esm":"/esm/DataBarChartIcon.js"},{"name":"DataLineChartIcon","svg":"/svg/DataLineChartIcon.svg","cjs":"/cjs/DataLineChartIcon.js","esm":"/esm/DataLineChartIcon.js"},{"name":"DataPieChartIcon","svg":"/svg/DataPieChartIcon.svg","cjs":"/cjs/DataPieChartIcon.js","esm":"/esm/DataPieChartIcon.js"},{"name":"DataTableIcon","svg":"/svg/DataTableIcon.svg","cjs":"/cjs/DataTableIcon.js","esm":"/esm/DataTableIcon.js"},{"name":"DatabaseIcon","svg":"/svg/DatabaseIcon.svg","cjs":"/cjs/DatabaseIcon.js","esm":"/esm/DatabaseIcon.js"},{"name":"DeleteIcon","svg":"/svg/DeleteIcon.svg","cjs":"/cjs/DeleteIcon.js","esm":"/esm/DeleteIcon.js"},{"name":"DeliveredIcon","svg":"/svg/DeliveredIcon.svg","cjs":"/cjs/DeliveredIcon.js","esm":"/esm/DeliveredIcon.js"},{"name":"DialpadIcon","svg":"/svg/DialpadIcon.svg","cjs":"/cjs/DialpadIcon.js","esm":"/esm/DialpadIcon.js"},{"name":"DirectoryIcon","svg":"/svg/DirectoryIcon.svg","cjs":"/cjs/DirectoryIcon.js","esm":"/esm/DirectoryIcon.js"},{"name":"DisableIcon","svg":"/svg/DisableIcon.svg","cjs":"/cjs/DisableIcon.js","esm":"/esm/DisableIcon.js"},{"name":"DividerIcon","svg":"/svg/DividerIcon.svg","cjs":"/cjs/DividerIcon.js","esm":"/esm/DividerIcon.js"},{"name":"DoNotIcon","svg":"/svg/DoNotIcon.svg","cjs":"/cjs/DoNotIcon.js","esm":"/esm/DoNotIcon.js"},{"name":"DocumentationIcon","svg":"/svg/DocumentationIcon.svg","cjs":"/cjs/DocumentationIcon.js","esm":"/esm/DocumentationIcon.js"},{"name":"DownloadIcon","svg":"/svg/DownloadIcon.svg","cjs":"/cjs/DownloadIcon.js","esm":"/esm/DownloadIcon.js"},{"name":"DragHorizontalIcon","svg":"/svg/DragHorizontalIcon.svg","cjs":"/cjs/DragHorizontalIcon.js","esm":"/esm/DragHorizontalIcon.js"},{"name":"DragIcon","svg":"/svg/DragIcon.svg","cjs":"/cjs/DragIcon.js","esm":"/esm/DragIcon.js"},{"name":"DragVerticalIcon","svg":"/svg/DragVerticalIcon.svg","cjs":"/cjs/DragVerticalIcon.js","esm":"/esm/DragVerticalIcon.js"},{"name":"EditIcon","svg":"/svg/EditIcon.svg","cjs":"/cjs/EditIcon.js","esm":"/esm/EditIcon.js"},{"name":"ElasticSIPTrunkingCapableIcon","svg":"/svg/ElasticSIPTrunkingCapableIcon.svg","cjs":"/cjs/ElasticSIPTrunkingCapableIcon.js","esm":"/esm/ElasticSIPTrunkingCapableIcon.js"},{"name":"EmailIcon","svg":"/svg/EmailIcon.svg","cjs":"/cjs/EmailIcon.js","esm":"/esm/EmailIcon.js"},{"name":"EmojiIcon","svg":"/svg/EmojiIcon.svg","cjs":"/cjs/EmojiIcon.js","esm":"/esm/EmojiIcon.js"},{"name":"ErrorIcon","svg":"/svg/ErrorIcon.svg","cjs":"/cjs/ErrorIcon.js","esm":"/esm/ErrorIcon.js"},{"name":"ExpandIcon","svg":"/svg/ExpandIcon.svg","cjs":"/cjs/ExpandIcon.js","esm":"/esm/ExpandIcon.js"},{"name":"ExportIcon","svg":"/svg/ExportIcon.svg","cjs":"/cjs/ExportIcon.js","esm":"/esm/ExportIcon.js"},{"name":"FaxCapableIcon","svg":"/svg/FaxCapableIcon.svg","cjs":"/cjs/FaxCapableIcon.js","esm":"/esm/FaxCapableIcon.js"},{"name":"FeedIcon","svg":"/svg/FeedIcon.svg","cjs":"/cjs/FeedIcon.js","esm":"/esm/FeedIcon.js"},{"name":"FileAudioIcon","svg":"/svg/FileAudioIcon.svg","cjs":"/cjs/FileAudioIcon.js","esm":"/esm/FileAudioIcon.js"},{"name":"FileIcon","svg":"/svg/FileIcon.svg","cjs":"/cjs/FileIcon.js","esm":"/esm/FileIcon.js"},{"name":"FileImageIcon","svg":"/svg/FileImageIcon.svg","cjs":"/cjs/FileImageIcon.js","esm":"/esm/FileImageIcon.js"},{"name":"FileVideoIcon","svg":"/svg/FileVideoIcon.svg","cjs":"/cjs/FileVideoIcon.js","esm":"/esm/FileVideoIcon.js"},{"name":"FileZipIcon","svg":"/svg/FileZipIcon.svg","cjs":"/cjs/FileZipIcon.js","esm":"/esm/FileZipIcon.js"},{"name":"FilterIcon","svg":"/svg/FilterIcon.svg","cjs":"/cjs/FilterIcon.js","esm":"/esm/FilterIcon.js"},{"name":"FlagIcon","svg":"/svg/FlagIcon.svg","cjs":"/cjs/FlagIcon.js","esm":"/esm/FlagIcon.js"},{"name":"GitIcon","svg":"/svg/GitIcon.svg","cjs":"/cjs/GitIcon.js","esm":"/esm/GitIcon.js"},{"name":"HeatmapIcon","svg":"/svg/HeatmapIcon.svg","cjs":"/cjs/HeatmapIcon.js","esm":"/esm/HeatmapIcon.js"},{"name":"HideIcon","svg":"/svg/HideIcon.svg","cjs":"/cjs/HideIcon.js","esm":"/esm/HideIcon.js"},{"name":"HistoryIcon","svg":"/svg/HistoryIcon.svg","cjs":"/cjs/HistoryIcon.js","esm":"/esm/HistoryIcon.js"},{"name":"ImageTextIcon","svg":"/svg/ImageTextIcon.svg","cjs":"/cjs/ImageTextIcon.js","esm":"/esm/ImageTextIcon.js"},{"name":"InboxIcon","svg":"/svg/InboxIcon.svg","cjs":"/cjs/InboxIcon.js","esm":"/esm/InboxIcon.js"},{"name":"IndentDecreaseIcon","svg":"/svg/IndentDecreaseIcon.svg","cjs":"/cjs/IndentDecreaseIcon.js","esm":"/esm/IndentDecreaseIcon.js"},{"name":"IndentIncreaseIcon","svg":"/svg/IndentIncreaseIcon.svg","cjs":"/cjs/IndentIncreaseIcon.js","esm":"/esm/IndentIncreaseIcon.js"},{"name":"InformationIcon","svg":"/svg/InformationIcon.svg","cjs":"/cjs/InformationIcon.js","esm":"/esm/InformationIcon.js"},{"name":"ItalicIcon","svg":"/svg/ItalicIcon.svg","cjs":"/cjs/ItalicIcon.js","esm":"/esm/ItalicIcon.js"},{"name":"LightModeIcon","svg":"/svg/LightModeIcon.svg","cjs":"/cjs/LightModeIcon.js","esm":"/esm/LightModeIcon.js"},{"name":"LinkExternalIcon","svg":"/svg/LinkExternalIcon.svg","cjs":"/cjs/LinkExternalIcon.js","esm":"/esm/LinkExternalIcon.js"},{"name":"LinkIcon","svg":"/svg/LinkIcon.svg","cjs":"/cjs/LinkIcon.js","esm":"/esm/LinkIcon.js"},{"name":"LoadingIcon","svg":"/svg/LoadingIcon.svg","cjs":"/cjs/LoadingIcon.js","esm":"/esm/LoadingIcon.js"},{"name":"LockIcon","svg":"/svg/LockIcon.svg","cjs":"/cjs/LockIcon.js","esm":"/esm/LockIcon.js"},{"name":"LogInIcon","svg":"/svg/LogInIcon.svg","cjs":"/cjs/LogInIcon.js","esm":"/esm/LogInIcon.js"},{"name":"LogOutIcon","svg":"/svg/LogOutIcon.svg","cjs":"/cjs/LogOutIcon.js","esm":"/esm/LogOutIcon.js"},{"name":"LogoTwilioIcon","svg":"/svg/LogoTwilioIcon.svg","cjs":"/cjs/LogoTwilioIcon.js","esm":"/esm/LogoTwilioIcon.js"},{"name":"LowerHandIcon","svg":"/svg/LowerHandIcon.svg","cjs":"/cjs/LowerHandIcon.js","esm":"/esm/LowerHandIcon.js"},{"name":"MMSCapableIcon","svg":"/svg/MMSCapableIcon.svg","cjs":"/cjs/MMSCapableIcon.js","esm":"/esm/MMSCapableIcon.js"},{"name":"MenuIcon","svg":"/svg/MenuIcon.svg","cjs":"/cjs/MenuIcon.js","esm":"/esm/MenuIcon.js"},{"name":"MicrophoneOffIcon","svg":"/svg/MicrophoneOffIcon.svg","cjs":"/cjs/MicrophoneOffIcon.js","esm":"/esm/MicrophoneOffIcon.js"},{"name":"MicrophoneOnIcon","svg":"/svg/MicrophoneOnIcon.svg","cjs":"/cjs/MicrophoneOnIcon.js","esm":"/esm/MicrophoneOnIcon.js"},{"name":"MinusIcon","svg":"/svg/MinusIcon.svg","cjs":"/cjs/MinusIcon.js","esm":"/esm/MinusIcon.js"},{"name":"MobileIcon","svg":"/svg/MobileIcon.svg","cjs":"/cjs/MobileIcon.js","esm":"/esm/MobileIcon.js"},{"name":"MoreIcon","svg":"/svg/MoreIcon.svg","cjs":"/cjs/MoreIcon.js","esm":"/esm/MoreIcon.js"},{"name":"NeutralIcon","svg":"/svg/NeutralIcon.svg","cjs":"/cjs/NeutralIcon.js","esm":"/esm/NeutralIcon.js"},{"name":"NewIcon","svg":"/svg/NewIcon.svg","cjs":"/cjs/NewIcon.js","esm":"/esm/NewIcon.js"},{"name":"NotesIcon","svg":"/svg/NotesIcon.svg","cjs":"/cjs/NotesIcon.js","esm":"/esm/NotesIcon.js"},{"name":"NotificationIcon","svg":"/svg/NotificationIcon.svg","cjs":"/cjs/NotificationIcon.js","esm":"/esm/NotificationIcon.js"},{"name":"OrderedListIcon","svg":"/svg/OrderedListIcon.svg","cjs":"/cjs/OrderedListIcon.js","esm":"/esm/OrderedListIcon.js"},{"name":"OutOfDateIcon","svg":"/svg/OutOfDateIcon.svg","cjs":"/cjs/OutOfDateIcon.js","esm":"/esm/OutOfDateIcon.js"},{"name":"PauseIcon","svg":"/svg/PauseIcon.svg","cjs":"/cjs/PauseIcon.js","esm":"/esm/PauseIcon.js"},{"name":"PinIcon","svg":"/svg/PinIcon.svg","cjs":"/cjs/PinIcon.js","esm":"/esm/PinIcon.js"},{"name":"PlayIcon","svg":"/svg/PlayIcon.svg","cjs":"/cjs/PlayIcon.js","esm":"/esm/PlayIcon.js"},{"name":"PlusIcon","svg":"/svg/PlusIcon.svg","cjs":"/cjs/PlusIcon.js","esm":"/esm/PlusIcon.js"},{"name":"ProcessDisabledIcon","svg":"/svg/ProcessDisabledIcon.svg","cjs":"/cjs/ProcessDisabledIcon.js","esm":"/esm/ProcessDisabledIcon.js"},{"name":"ProcessDraftIcon","svg":"/svg/ProcessDraftIcon.svg","cjs":"/cjs/ProcessDraftIcon.js","esm":"/esm/ProcessDraftIcon.js"},{"name":"ProcessErrorIcon","svg":"/svg/ProcessErrorIcon.svg","cjs":"/cjs/ProcessErrorIcon.js","esm":"/esm/ProcessErrorIcon.js"},{"name":"ProcessInProgressIcon","svg":"/svg/ProcessInProgressIcon.svg","cjs":"/cjs/ProcessInProgressIcon.js","esm":"/esm/ProcessInProgressIcon.js"},{"name":"ProcessNeutralIcon","svg":"/svg/ProcessNeutralIcon.svg","cjs":"/cjs/ProcessNeutralIcon.js","esm":"/esm/ProcessNeutralIcon.js"},{"name":"ProcessSuccessIcon","svg":"/svg/ProcessSuccessIcon.svg","cjs":"/cjs/ProcessSuccessIcon.js","esm":"/esm/ProcessSuccessIcon.js"},{"name":"ProcessWarningIcon","svg":"/svg/ProcessWarningIcon.svg","cjs":"/cjs/ProcessWarningIcon.js","esm":"/esm/ProcessWarningIcon.js"},{"name":"ProductAPIExplorerIcon","svg":"/svg/ProductAPIExplorerIcon.svg","cjs":"/cjs/ProductAPIExplorerIcon.js","esm":"/esm/ProductAPIExplorerIcon.js"},{"name":"ProductAddOnsIcon","svg":"/svg/ProductAddOnsIcon.svg","cjs":"/cjs/ProductAddOnsIcon.js","esm":"/esm/ProductAddOnsIcon.js"},{"name":"ProductAdminAccessControlIcon","svg":"/svg/ProductAdminAccessControlIcon.svg","cjs":"/cjs/ProductAdminAccessControlIcon.js","esm":"/esm/ProductAdminAccessControlIcon.js"},{"name":"ProductAdminAccountsIcon","svg":"/svg/ProductAdminAccountsIcon.svg","cjs":"/cjs/ProductAdminAccountsIcon.js","esm":"/esm/ProductAdminAccountsIcon.js"},{"name":"ProductAdminDomainsIcon","svg":"/svg/ProductAdminDomainsIcon.svg","cjs":"/cjs/ProductAdminDomainsIcon.js","esm":"/esm/ProductAdminDomainsIcon.js"},{"name":"ProductAdminResoldCustomersIcon","svg":"/svg/ProductAdminResoldCustomersIcon.svg","cjs":"/cjs/ProductAdminResoldCustomersIcon.js","esm":"/esm/ProductAdminResoldCustomersIcon.js"},{"name":"ProductAdminSSOIcon","svg":"/svg/ProductAdminSSOIcon.svg","cjs":"/cjs/ProductAdminSSOIcon.js","esm":"/esm/ProductAdminSSOIcon.js"},{"name":"ProductAdminUsersIcon","svg":"/svg/ProductAdminUsersIcon.svg","cjs":"/cjs/ProductAdminUsersIcon.js","esm":"/esm/ProductAdminUsersIcon.js"},{"name":"ProductAlarmsIcon","svg":"/svg/ProductAlarmsIcon.svg","cjs":"/cjs/ProductAlarmsIcon.js","esm":"/esm/ProductAlarmsIcon.js"},{"name":"ProductAssetsIcon","svg":"/svg/ProductAssetsIcon.svg","cjs":"/cjs/ProductAssetsIcon.js","esm":"/esm/ProductAssetsIcon.js"},{"name":"ProductAudiencesIcon","svg":"/svg/ProductAudiencesIcon.svg","cjs":"/cjs/ProductAudiencesIcon.js","esm":"/esm/ProductAudiencesIcon.js"},{"name":"ProductAuthyIcon","svg":"/svg/ProductAuthyIcon.svg","cjs":"/cjs/ProductAuthyIcon.js","esm":"/esm/ProductAuthyIcon.js"},{"name":"ProductAutopilotIcon","svg":"/svg/ProductAutopilotIcon.svg","cjs":"/cjs/ProductAutopilotIcon.js","esm":"/esm/ProductAutopilotIcon.js"},{"name":"ProductBillingIcon","svg":"/svg/ProductBillingIcon.svg","cjs":"/cjs/ProductBillingIcon.js","esm":"/esm/ProductBillingIcon.js"},{"name":"ProductCLIIcon","svg":"/svg/ProductCLIIcon.svg","cjs":"/cjs/ProductCLIIcon.js","esm":"/esm/ProductCLIIcon.js"},{"name":"ProductChannelsIcon","svg":"/svg/ProductChannelsIcon.svg","cjs":"/cjs/ProductChannelsIcon.js","esm":"/esm/ProductChannelsIcon.js"},{"name":"ProductChatIcon","svg":"/svg/ProductChatIcon.svg","cjs":"/cjs/ProductChatIcon.js","esm":"/esm/ProductChatIcon.js"},{"name":"ProductCodeExchangeCommunityIcon","svg":"/svg/ProductCodeExchangeCommunityIcon.svg","cjs":"/cjs/ProductCodeExchangeCommunityIcon.js","esm":"/esm/ProductCodeExchangeCommunityIcon.js"},{"name":"ProductCodeExchangePartnerIcon","svg":"/svg/ProductCodeExchangePartnerIcon.svg","cjs":"/cjs/ProductCodeExchangePartnerIcon.js","esm":"/esm/ProductCodeExchangePartnerIcon.js"},{"name":"ProductCommsIcon","svg":"/svg/ProductCommsIcon.svg","cjs":"/cjs/ProductCommsIcon.js","esm":"/esm/ProductCommsIcon.js"},{"name":"ProductConnectedDevicesIcon","svg":"/svg/ProductConnectedDevicesIcon.svg","cjs":"/cjs/ProductConnectedDevicesIcon.js","esm":"/esm/ProductConnectedDevicesIcon.js"},{"name":"ProductConnectionsIcon","svg":"/svg/ProductConnectionsIcon.svg","cjs":"/cjs/ProductConnectionsIcon.js","esm":"/esm/ProductConnectionsIcon.js"},{"name":"ProductContactCenterAdminIcon","svg":"/svg/ProductContactCenterAdminIcon.svg","cjs":"/cjs/ProductContactCenterAdminIcon.js","esm":"/esm/ProductContactCenterAdminIcon.js"},{"name":"ProductContactCenterAssessmentsIcon","svg":"/svg/ProductContactCenterAssessmentsIcon.svg","cjs":"/cjs/ProductContactCenterAssessmentsIcon.js","esm":"/esm/ProductContactCenterAssessmentsIcon.js"},{"name":"ProductContactCenterQueuesIcon","svg":"/svg/ProductContactCenterQueuesIcon.svg","cjs":"/cjs/ProductContactCenterQueuesIcon.js","esm":"/esm/ProductContactCenterQueuesIcon.js"},{"name":"ProductContactCenterTasksIcon","svg":"/svg/ProductContactCenterTasksIcon.svg","cjs":"/cjs/ProductContactCenterTasksIcon.js","esm":"/esm/ProductContactCenterTasksIcon.js"},{"name":"ProductContactCenterTeamsIcon","svg":"/svg/ProductContactCenterTeamsIcon.svg","cjs":"/cjs/ProductContactCenterTeamsIcon.js","esm":"/esm/ProductContactCenterTeamsIcon.js"},{"name":"ProductConversationsIcon","svg":"/svg/ProductConversationsIcon.svg","cjs":"/cjs/ProductConversationsIcon.js","esm":"/esm/ProductConversationsIcon.js"},{"name":"ProductDebuggerIcon","svg":"/svg/ProductDebuggerIcon.svg","cjs":"/cjs/ProductDebuggerIcon.js","esm":"/esm/ProductDebuggerIcon.js"},{"name":"ProductDestinationsIcon","svg":"/svg/ProductDestinationsIcon.svg","cjs":"/cjs/ProductDestinationsIcon.js","esm":"/esm/ProductDestinationsIcon.js"},{"name":"ProductElasticSIPTrunkingIcon","svg":"/svg/ProductElasticSIPTrunkingIcon.svg","cjs":"/cjs/ProductElasticSIPTrunkingIcon.js","esm":"/esm/ProductElasticSIPTrunkingIcon.js"},{"name":"ProductEmailAPIIcon","svg":"/svg/ProductEmailAPIIcon.svg","cjs":"/cjs/ProductEmailAPIIcon.js","esm":"/esm/ProductEmailAPIIcon.js"},{"name":"ProductEngageIcon","svg":"/svg/ProductEngageIcon.svg","cjs":"/cjs/ProductEngageIcon.js","esm":"/esm/ProductEngageIcon.js"},{"name":"ProductEventLibraryIcon","svg":"/svg/ProductEventLibraryIcon.svg","cjs":"/cjs/ProductEventLibraryIcon.js","esm":"/esm/ProductEventLibraryIcon.js"},{"name":"ProductEventStreamIcon","svg":"/svg/ProductEventStreamIcon.svg","cjs":"/cjs/ProductEventStreamIcon.js","esm":"/esm/ProductEventStreamIcon.js"},{"name":"ProductEventStreamsIcon","svg":"/svg/ProductEventStreamsIcon.svg","cjs":"/cjs/ProductEventStreamsIcon.js","esm":"/esm/ProductEventStreamsIcon.js"},{"name":"ProductFaxIcon","svg":"/svg/ProductFaxIcon.svg","cjs":"/cjs/ProductFaxIcon.js","esm":"/esm/ProductFaxIcon.js"},{"name":"ProductFlexIcon","svg":"/svg/ProductFlexIcon.svg","cjs":"/cjs/ProductFlexIcon.js","esm":"/esm/ProductFlexIcon.js"},{"name":"ProductFlowIcon","svg":"/svg/ProductFlowIcon.svg","cjs":"/cjs/ProductFlowIcon.js","esm":"/esm/ProductFlowIcon.js"},{"name":"ProductFrontlineIcon","svg":"/svg/ProductFrontlineIcon.svg","cjs":"/cjs/ProductFrontlineIcon.js","esm":"/esm/ProductFrontlineIcon.js"},{"name":"ProductFunctionsIcon","svg":"/svg/ProductFunctionsIcon.svg","cjs":"/cjs/ProductFunctionsIcon.js","esm":"/esm/ProductFunctionsIcon.js"},{"name":"ProductHomeIcon","svg":"/svg/ProductHomeIcon.svg","cjs":"/cjs/ProductHomeIcon.js","esm":"/esm/ProductHomeIcon.js"},{"name":"ProductInsightsIcon","svg":"/svg/ProductInsightsIcon.svg","cjs":"/cjs/ProductInsightsIcon.js","esm":"/esm/ProductInsightsIcon.js"},{"name":"ProductInterconnectIcon","svg":"/svg/ProductInterconnectIcon.svg","cjs":"/cjs/ProductInterconnectIcon.js","esm":"/esm/ProductInterconnectIcon.js"},{"name":"ProductInternetOfThingsEmbeddedSIMIcon","svg":"/svg/ProductInternetOfThingsEmbeddedSIMIcon.svg","cjs":"/cjs/ProductInternetOfThingsEmbeddedSIMIcon.js","esm":"/esm/ProductInternetOfThingsEmbeddedSIMIcon.js"},{"name":"ProductInternetOfThingsIcon","svg":"/svg/ProductInternetOfThingsIcon.svg","cjs":"/cjs/ProductInternetOfThingsIcon.js","esm":"/esm/ProductInternetOfThingsIcon.js"},{"name":"ProductInternetOfThingsNarrowbandIcon","svg":"/svg/ProductInternetOfThingsNarrowbandIcon.svg","cjs":"/cjs/ProductInternetOfThingsNarrowbandIcon.js","esm":"/esm/ProductInternetOfThingsNarrowbandIcon.js"},{"name":"ProductInternetOfThingsProgrammableAssetTrackerIcon","svg":"/svg/ProductInternetOfThingsProgrammableAssetTrackerIcon.svg","cjs":"/cjs/ProductInternetOfThingsProgrammableAssetTrackerIcon.js","esm":"/esm/ProductInternetOfThingsProgrammableAssetTrackerIcon.js"},{"name":"ProductInternetOfThingsSuperSIMIcon","svg":"/svg/ProductInternetOfThingsSuperSIMIcon.svg","cjs":"/cjs/ProductInternetOfThingsSuperSIMIcon.js","esm":"/esm/ProductInternetOfThingsSuperSIMIcon.js"},{"name":"ProductInternetOfThingsTrustOnboardIcon","svg":"/svg/ProductInternetOfThingsTrustOnboardIcon.svg","cjs":"/cjs/ProductInternetOfThingsTrustOnboardIcon.js","esm":"/esm/ProductInternetOfThingsTrustOnboardIcon.js"},{"name":"ProductInternetOfThingsWirelessIcon","svg":"/svg/ProductInternetOfThingsWirelessIcon.svg","cjs":"/cjs/ProductInternetOfThingsWirelessIcon.js","esm":"/esm/ProductInternetOfThingsWirelessIcon.js"},{"name":"ProductJourneysIcon","svg":"/svg/ProductJourneysIcon.svg","cjs":"/cjs/ProductJourneysIcon.js","esm":"/esm/ProductJourneysIcon.js"},{"name":"ProductKeysIcon","svg":"/svg/ProductKeysIcon.svg","cjs":"/cjs/ProductKeysIcon.js","esm":"/esm/ProductKeysIcon.js"},{"name":"ProductLiveIcon","svg":"/svg/ProductLiveIcon.svg","cjs":"/cjs/ProductLiveIcon.js","esm":"/esm/ProductLiveIcon.js"},{"name":"ProductLogsIcon","svg":"/svg/ProductLogsIcon.svg","cjs":"/cjs/ProductLogsIcon.js","esm":"/esm/ProductLogsIcon.js"},{"name":"ProductLookupIcon","svg":"/svg/ProductLookupIcon.svg","cjs":"/cjs/ProductLookupIcon.js","esm":"/esm/ProductLookupIcon.js"},{"name":"ProductMappingIcon","svg":"/svg/ProductMappingIcon.svg","cjs":"/cjs/ProductMappingIcon.js","esm":"/esm/ProductMappingIcon.js"},{"name":"ProductMarketingCampaignsIcon","svg":"/svg/ProductMarketingCampaignsIcon.svg","cjs":"/cjs/ProductMarketingCampaignsIcon.js","esm":"/esm/ProductMarketingCampaignsIcon.js"},{"name":"ProductMessagingIcon","svg":"/svg/ProductMessagingIcon.svg","cjs":"/cjs/ProductMessagingIcon.js","esm":"/esm/ProductMessagingIcon.js"},{"name":"ProductMicrovisorIcon","svg":"/svg/ProductMicrovisorIcon.svg","cjs":"/cjs/ProductMicrovisorIcon.js","esm":"/esm/ProductMicrovisorIcon.js"},{"name":"ProductNotifyIcon","svg":"/svg/ProductNotifyIcon.svg","cjs":"/cjs/ProductNotifyIcon.js","esm":"/esm/ProductNotifyIcon.js"},{"name":"ProductOneAdminIcon","svg":"/svg/ProductOneAdminIcon.svg","cjs":"/cjs/ProductOneAdminIcon.js","esm":"/esm/ProductOneAdminIcon.js"},{"name":"ProductPayConnectorIcon","svg":"/svg/ProductPayConnectorIcon.svg","cjs":"/cjs/ProductPayConnectorIcon.js","esm":"/esm/ProductPayConnectorIcon.js"},{"name":"ProductPhoneNumbersIcon","svg":"/svg/ProductPhoneNumbersIcon.svg","cjs":"/cjs/ProductPhoneNumbersIcon.js","esm":"/esm/ProductPhoneNumbersIcon.js"},{"name":"ProductPrivacyIcon","svg":"/svg/ProductPrivacyIcon.svg","cjs":"/cjs/ProductPrivacyIcon.js","esm":"/esm/ProductPrivacyIcon.js"},{"name":"ProductProtocolsIcon","svg":"/svg/ProductProtocolsIcon.svg","cjs":"/cjs/ProductProtocolsIcon.js","esm":"/esm/ProductProtocolsIcon.js"},{"name":"ProductProxyIcon","svg":"/svg/ProductProxyIcon.svg","cjs":"/cjs/ProductProxyIcon.js","esm":"/esm/ProductProxyIcon.js"},{"name":"ProductRegionalIcon","svg":"/svg/ProductRegionalIcon.svg","cjs":"/cjs/ProductRegionalIcon.js","esm":"/esm/ProductRegionalIcon.js"},{"name":"ProductReverseETLIcon","svg":"/svg/ProductReverseETLIcon.svg","cjs":"/cjs/ProductReverseETLIcon.js","esm":"/esm/ProductReverseETLIcon.js"},{"name":"ProductSDKIcon","svg":"/svg/ProductSDKIcon.svg","cjs":"/cjs/ProductSDKIcon.js","esm":"/esm/ProductSDKIcon.js"},{"name":"ProductSegmentIcon","svg":"/svg/ProductSegmentIcon.svg","cjs":"/cjs/ProductSegmentIcon.js","esm":"/esm/ProductSegmentIcon.js"},{"name":"ProductSettingsIcon","svg":"/svg/ProductSettingsIcon.svg","cjs":"/cjs/ProductSettingsIcon.js","esm":"/esm/ProductSettingsIcon.js"},{"name":"ProductSourceSchemaIcon","svg":"/svg/ProductSourceSchemaIcon.svg","cjs":"/cjs/ProductSourceSchemaIcon.js","esm":"/esm/ProductSourceSchemaIcon.js"},{"name":"ProductSourcesIcon","svg":"/svg/ProductSourcesIcon.svg","cjs":"/cjs/ProductSourcesIcon.js","esm":"/esm/ProductSourcesIcon.js"},{"name":"ProductStudioIcon","svg":"/svg/ProductStudioIcon.svg","cjs":"/cjs/ProductStudioIcon.js","esm":"/esm/ProductStudioIcon.js"},{"name":"ProductSupportIcon","svg":"/svg/ProductSupportIcon.svg","cjs":"/cjs/ProductSupportIcon.js","esm":"/esm/ProductSupportIcon.js"},{"name":"ProductSwitcherIcon","svg":"/svg/ProductSwitcherIcon.svg","cjs":"/cjs/ProductSwitcherIcon.js","esm":"/esm/ProductSwitcherIcon.js"},{"name":"ProductSyncIcon","svg":"/svg/ProductSyncIcon.svg","cjs":"/cjs/ProductSyncIcon.js","esm":"/esm/ProductSyncIcon.js"},{"name":"ProductTaskRouterIcon","svg":"/svg/ProductTaskRouterIcon.svg","cjs":"/cjs/ProductTaskRouterIcon.js","esm":"/esm/ProductTaskRouterIcon.js"},{"name":"ProductTraitsIcon","svg":"/svg/ProductTraitsIcon.svg","cjs":"/cjs/ProductTraitsIcon.js","esm":"/esm/ProductTraitsIcon.js"},{"name":"ProductTrustHubIcon","svg":"/svg/ProductTrustHubIcon.svg","cjs":"/cjs/ProductTrustHubIcon.js","esm":"/esm/ProductTrustHubIcon.js"},{"name":"ProductTwiMLBinsIcon","svg":"/svg/ProductTwiMLBinsIcon.svg","cjs":"/cjs/ProductTwiMLBinsIcon.js","esm":"/esm/ProductTwiMLBinsIcon.js"},{"name":"ProductTwilioOrgIcon","svg":"/svg/ProductTwilioOrgIcon.svg","cjs":"/cjs/ProductTwilioOrgIcon.js","esm":"/esm/ProductTwilioOrgIcon.js"},{"name":"ProductUSSDIcon","svg":"/svg/ProductUSSDIcon.svg","cjs":"/cjs/ProductUSSDIcon.js","esm":"/esm/ProductUSSDIcon.js"},{"name":"ProductUnifyIcon","svg":"/svg/ProductUnifyIcon.svg","cjs":"/cjs/ProductUnifyIcon.js","esm":"/esm/ProductUnifyIcon.js"},{"name":"ProductUsageIcon","svg":"/svg/ProductUsageIcon.svg","cjs":"/cjs/ProductUsageIcon.js","esm":"/esm/ProductUsageIcon.js"},{"name":"ProductVerifyIcon","svg":"/svg/ProductVerifyIcon.svg","cjs":"/cjs/ProductVerifyIcon.js","esm":"/esm/ProductVerifyIcon.js"},{"name":"ProductVideoIcon","svg":"/svg/ProductVideoIcon.svg","cjs":"/cjs/ProductVideoIcon.js","esm":"/esm/ProductVideoIcon.js"},{"name":"ProductVoiceIcon","svg":"/svg/ProductVoiceIcon.svg","cjs":"/cjs/ProductVoiceIcon.js","esm":"/esm/ProductVoiceIcon.js"},{"name":"ProductVoiceIntelligenceIcon","svg":"/svg/ProductVoiceIntelligenceIcon.svg","cjs":"/cjs/ProductVoiceIntelligenceIcon.js","esm":"/esm/ProductVoiceIntelligenceIcon.js"},{"name":"RaiseHandIcon","svg":"/svg/RaiseHandIcon.svg","cjs":"/cjs/RaiseHandIcon.js","esm":"/esm/RaiseHandIcon.js"},{"name":"RecordIcon","svg":"/svg/RecordIcon.svg","cjs":"/cjs/RecordIcon.js","esm":"/esm/RecordIcon.js"},{"name":"RedoIcon","svg":"/svg/RedoIcon.svg","cjs":"/cjs/RedoIcon.js","esm":"/esm/RedoIcon.js"},{"name":"RefreshIcon","svg":"/svg/RefreshIcon.svg","cjs":"/cjs/RefreshIcon.js","esm":"/esm/RefreshIcon.js"},{"name":"RepeatIcon","svg":"/svg/RepeatIcon.svg","cjs":"/cjs/RepeatIcon.js","esm":"/esm/RepeatIcon.js"},{"name":"ResetIcon","svg":"/svg/ResetIcon.svg","cjs":"/cjs/ResetIcon.js","esm":"/esm/ResetIcon.js"},{"name":"SMSCapableIcon","svg":"/svg/SMSCapableIcon.svg","cjs":"/cjs/SMSCapableIcon.js","esm":"/esm/SMSCapableIcon.js"},{"name":"SMSIcon","svg":"/svg/SMSIcon.svg","cjs":"/cjs/SMSIcon.js","esm":"/esm/SMSIcon.js"},{"name":"ScreenShareIcon","svg":"/svg/ScreenShareIcon.svg","cjs":"/cjs/ScreenShareIcon.js","esm":"/esm/ScreenShareIcon.js"},{"name":"SearchIcon","svg":"/svg/SearchIcon.svg","cjs":"/cjs/SearchIcon.js","esm":"/esm/SearchIcon.js"},{"name":"SelectIcon","svg":"/svg/SelectIcon.svg","cjs":"/cjs/SelectIcon.js","esm":"/esm/SelectIcon.js"},{"name":"SelectedIcon","svg":"/svg/SelectedIcon.svg","cjs":"/cjs/SelectedIcon.js","esm":"/esm/SelectedIcon.js"},{"name":"SendIcon","svg":"/svg/SendIcon.svg","cjs":"/cjs/SendIcon.js","esm":"/esm/SendIcon.js"},{"name":"SentIcon","svg":"/svg/SentIcon.svg","cjs":"/cjs/SentIcon.js","esm":"/esm/SentIcon.js"},{"name":"ShareIcon","svg":"/svg/ShareIcon.svg","cjs":"/cjs/ShareIcon.js","esm":"/esm/ShareIcon.js"},{"name":"ShowIcon","svg":"/svg/ShowIcon.svg","cjs":"/cjs/ShowIcon.js","esm":"/esm/ShowIcon.js"},{"name":"ShrinkIcon","svg":"/svg/ShrinkIcon.svg","cjs":"/cjs/ShrinkIcon.js","esm":"/esm/ShrinkIcon.js"},{"name":"SkipBackIcon","svg":"/svg/SkipBackIcon.svg","cjs":"/cjs/SkipBackIcon.js","esm":"/esm/SkipBackIcon.js"},{"name":"SkipForwardIcon","svg":"/svg/SkipForwardIcon.svg","cjs":"/cjs/SkipForwardIcon.js","esm":"/esm/SkipForwardIcon.js"},{"name":"SocialIcon","svg":"/svg/SocialIcon.svg","cjs":"/cjs/SocialIcon.js","esm":"/esm/SocialIcon.js"},{"name":"SortAlphabeticalIcon","svg":"/svg/SortAlphabeticalIcon.svg","cjs":"/cjs/SortAlphabeticalIcon.js","esm":"/esm/SortAlphabeticalIcon.js"},{"name":"SpacerVerticalIcon","svg":"/svg/SpacerVerticalIcon.svg","cjs":"/cjs/SpacerVerticalIcon.js","esm":"/esm/SpacerVerticalIcon.js"},{"name":"StarIcon","svg":"/svg/StarIcon.svg","cjs":"/cjs/StarIcon.js","esm":"/esm/StarIcon.js"},{"name":"StopIcon","svg":"/svg/StopIcon.svg","cjs":"/cjs/StopIcon.js","esm":"/esm/StopIcon.js"},{"name":"StopScreenShareIcon","svg":"/svg/StopScreenShareIcon.svg","cjs":"/cjs/StopScreenShareIcon.js","esm":"/esm/StopScreenShareIcon.js"},{"name":"StoreIcon","svg":"/svg/StoreIcon.svg","cjs":"/cjs/StoreIcon.js","esm":"/esm/StoreIcon.js"},{"name":"StrikethroughIcon","svg":"/svg/StrikethroughIcon.svg","cjs":"/cjs/StrikethroughIcon.js","esm":"/esm/StrikethroughIcon.js"},{"name":"SubscriptIcon","svg":"/svg/SubscriptIcon.svg","cjs":"/cjs/SubscriptIcon.js","esm":"/esm/SubscriptIcon.js"},{"name":"SuccessIcon","svg":"/svg/SuccessIcon.svg","cjs":"/cjs/SuccessIcon.js","esm":"/esm/SuccessIcon.js"},{"name":"SuperscriptIcon","svg":"/svg/SuperscriptIcon.svg","cjs":"/cjs/SuperscriptIcon.js","esm":"/esm/SuperscriptIcon.js"},{"name":"SupportIcon","svg":"/svg/SupportIcon.svg","cjs":"/cjs/SupportIcon.js","esm":"/esm/SupportIcon.js"},{"name":"SystemStatusIcon","svg":"/svg/SystemStatusIcon.svg","cjs":"/cjs/SystemStatusIcon.js","esm":"/esm/SystemStatusIcon.js"},{"name":"TaskIcon","svg":"/svg/TaskIcon.svg","cjs":"/cjs/TaskIcon.js","esm":"/esm/TaskIcon.js"},{"name":"TextAlignCenterIcon","svg":"/svg/TextAlignCenterIcon.svg","cjs":"/cjs/TextAlignCenterIcon.js","esm":"/esm/TextAlignCenterIcon.js"},{"name":"TextAlignJustifyIcon","svg":"/svg/TextAlignJustifyIcon.svg","cjs":"/cjs/TextAlignJustifyIcon.js","esm":"/esm/TextAlignJustifyIcon.js"},{"name":"TextAlignLeftIcon","svg":"/svg/TextAlignLeftIcon.svg","cjs":"/cjs/TextAlignLeftIcon.js","esm":"/esm/TextAlignLeftIcon.js"},{"name":"TextAlignRightIcon","svg":"/svg/TextAlignRightIcon.svg","cjs":"/cjs/TextAlignRightIcon.js","esm":"/esm/TextAlignRightIcon.js"},{"name":"TextFormatClearIcon","svg":"/svg/TextFormatClearIcon.svg","cjs":"/cjs/TextFormatClearIcon.js","esm":"/esm/TextFormatClearIcon.js"},{"name":"TextFormatIcon","svg":"/svg/TextFormatIcon.svg","cjs":"/cjs/TextFormatIcon.js","esm":"/esm/TextFormatIcon.js"},{"name":"TextHighlightIcon","svg":"/svg/TextHighlightIcon.svg","cjs":"/cjs/TextHighlightIcon.js","esm":"/esm/TextHighlightIcon.js"},{"name":"ThemeIcon","svg":"/svg/ThemeIcon.svg","cjs":"/cjs/ThemeIcon.js","esm":"/esm/ThemeIcon.js"},{"name":"ThumbsDownIcon","svg":"/svg/ThumbsDownIcon.svg","cjs":"/cjs/ThumbsDownIcon.js","esm":"/esm/ThumbsDownIcon.js"},{"name":"ThumbsUpIcon","svg":"/svg/ThumbsUpIcon.svg","cjs":"/cjs/ThumbsUpIcon.js","esm":"/esm/ThumbsUpIcon.js"},{"name":"TimeIcon","svg":"/svg/TimeIcon.svg","cjs":"/cjs/TimeIcon.js","esm":"/esm/TimeIcon.js"},{"name":"TipIcon","svg":"/svg/TipIcon.svg","cjs":"/cjs/TipIcon.js","esm":"/esm/TipIcon.js"},{"name":"TokenIcon","svg":"/svg/TokenIcon.svg","cjs":"/cjs/TokenIcon.js","esm":"/esm/TokenIcon.js"},{"name":"TourIcon","svg":"/svg/TourIcon.svg","cjs":"/cjs/TourIcon.js","esm":"/esm/TourIcon.js"},{"name":"TranslationIcon","svg":"/svg/TranslationIcon.svg","cjs":"/cjs/TranslationIcon.js","esm":"/esm/TranslationIcon.js"},{"name":"TrendDownIcon","svg":"/svg/TrendDownIcon.svg","cjs":"/cjs/TrendDownIcon.js","esm":"/esm/TrendDownIcon.js"},{"name":"TrendUpIcon","svg":"/svg/TrendUpIcon.svg","cjs":"/cjs/TrendUpIcon.js","esm":"/esm/TrendUpIcon.js"},{"name":"UnarchiveIcon","svg":"/svg/UnarchiveIcon.svg","cjs":"/cjs/UnarchiveIcon.js","esm":"/esm/UnarchiveIcon.js"},{"name":"UnderlineIcon","svg":"/svg/UnderlineIcon.svg","cjs":"/cjs/UnderlineIcon.js","esm":"/esm/UnderlineIcon.js"},{"name":"UndoIcon","svg":"/svg/UndoIcon.svg","cjs":"/cjs/UndoIcon.js","esm":"/esm/UndoIcon.js"},{"name":"UnlockIcon","svg":"/svg/UnlockIcon.svg","cjs":"/cjs/UnlockIcon.js","esm":"/esm/UnlockIcon.js"},{"name":"UnorderedListIcon","svg":"/svg/UnorderedListIcon.svg","cjs":"/cjs/UnorderedListIcon.js","esm":"/esm/UnorderedListIcon.js"},{"name":"UnpinIcon","svg":"/svg/UnpinIcon.svg","cjs":"/cjs/UnpinIcon.js","esm":"/esm/UnpinIcon.js"},{"name":"UnsortedIcon","svg":"/svg/UnsortedIcon.svg","cjs":"/cjs/UnsortedIcon.js","esm":"/esm/UnsortedIcon.js"},{"name":"UnsubscribeIcon","svg":"/svg/UnsubscribeIcon.svg","cjs":"/cjs/UnsubscribeIcon.js","esm":"/esm/UnsubscribeIcon.js"},{"name":"UploadIcon","svg":"/svg/UploadIcon.svg","cjs":"/cjs/UploadIcon.js","esm":"/esm/UploadIcon.js"},{"name":"UploadToCloudIcon","svg":"/svg/UploadToCloudIcon.svg","cjs":"/cjs/UploadToCloudIcon.js","esm":"/esm/UploadToCloudIcon.js"},{"name":"UserIcon","svg":"/svg/UserIcon.svg","cjs":"/cjs/UserIcon.js","esm":"/esm/UserIcon.js"},{"name":"UsersIcon","svg":"/svg/UsersIcon.svg","cjs":"/cjs/UsersIcon.js","esm":"/esm/UsersIcon.js"},{"name":"VideoOffIcon","svg":"/svg/VideoOffIcon.svg","cjs":"/cjs/VideoOffIcon.js","esm":"/esm/VideoOffIcon.js"},{"name":"VideoOnIcon","svg":"/svg/VideoOnIcon.svg","cjs":"/cjs/VideoOnIcon.js","esm":"/esm/VideoOnIcon.js"},{"name":"VoiceCapableIcon","svg":"/svg/VoiceCapableIcon.svg","cjs":"/cjs/VoiceCapableIcon.js","esm":"/esm/VoiceCapableIcon.js"},{"name":"VoicemailIcon","svg":"/svg/VoicemailIcon.svg","cjs":"/cjs/VoicemailIcon.js","esm":"/esm/VoicemailIcon.js"},{"name":"VolumeOffIcon","svg":"/svg/VolumeOffIcon.svg","cjs":"/cjs/VolumeOffIcon.js","esm":"/esm/VolumeOffIcon.js"},{"name":"VolumeOnIcon","svg":"/svg/VolumeOnIcon.svg","cjs":"/cjs/VolumeOnIcon.js","esm":"/esm/VolumeOnIcon.js"},{"name":"WarningIcon","svg":"/svg/WarningIcon.svg","cjs":"/cjs/WarningIcon.js","esm":"/esm/WarningIcon.js"},{"name":"WebCapableIcon","svg":"/svg/WebCapableIcon.svg","cjs":"/cjs/WebCapableIcon.js","esm":"/esm/WebCapableIcon.js"},{"name":"ZoomInIcon","svg":"/svg/ZoomInIcon.svg","cjs":"/cjs/ZoomInIcon.js","esm":"/esm/ZoomInIcon.js"}],"deprecatedIcons":[{"name":"CheckmarkCircleIcon","svg":"/svg/CheckmarkCircleIcon.svg","cjs":"/cjs/CheckmarkCircleIcon.js","esm":"/esm/CheckmarkCircleIcon.js"},{"name":"ChevronDisclosureCollapsedIcon","svg":"/svg/ChevronDisclosureCollapsedIcon.svg","cjs":"/cjs/ChevronDisclosureCollapsedIcon.js","esm":"/esm/ChevronDisclosureCollapsedIcon.js"},{"name":"ChevronDisclosureExpandedIcon","svg":"/svg/ChevronDisclosureExpandedIcon.svg","cjs":"/cjs/ChevronDisclosureExpandedIcon.js","esm":"/esm/ChevronDisclosureExpandedIcon.js"},{"name":"CloseCircleIcon","svg":"/svg/CloseCircleIcon.svg","cjs":"/cjs/CloseCircleIcon.js","esm":"/esm/CloseCircleIcon.js"},{"name":"ProductEngagementIntelligencePlatformIcon","svg":"/svg/ProductEngagementIntelligencePlatformIcon.svg","cjs":"/cjs/ProductEngagementIntelligencePlatformIcon.js","esm":"/esm/ProductEngagementIntelligencePlatformIcon.js"},{"name":"ProductPersonasIcon","svg":"/svg/ProductPersonasIcon.svg","cjs":"/cjs/ProductPersonasIcon.js","esm":"/esm/ProductPersonasIcon.js"}]} \ No newline at end of file +{"icons":[{"name":"AcceptIcon","svg":"/svg/AcceptIcon.svg","cjs":"/cjs/AcceptIcon.js","esm":"/esm/AcceptIcon.js"},{"name":"AddListIcon","svg":"/svg/AddListIcon.svg","cjs":"/cjs/AddListIcon.js","esm":"/esm/AddListIcon.js"},{"name":"AddSeriesIcon","svg":"/svg/AddSeriesIcon.svg","cjs":"/cjs/AddSeriesIcon.js","esm":"/esm/AddSeriesIcon.js"},{"name":"AgentIcon","svg":"/svg/AgentIcon.svg","cjs":"/cjs/AgentIcon.js","esm":"/esm/AgentIcon.js"},{"name":"AlignLeftIcon","svg":"/svg/AlignLeftIcon.svg","cjs":"/cjs/AlignLeftIcon.js","esm":"/esm/AlignLeftIcon.js"},{"name":"AlignRightIcon","svg":"/svg/AlignRightIcon.svg","cjs":"/cjs/AlignRightIcon.js","esm":"/esm/AlignRightIcon.js"},{"name":"AlignVerticalCenterIcon","svg":"/svg/AlignVerticalCenterIcon.svg","cjs":"/cjs/AlignVerticalCenterIcon.js","esm":"/esm/AlignVerticalCenterIcon.js"},{"name":"ArchiveIcon","svg":"/svg/ArchiveIcon.svg","cjs":"/cjs/ArchiveIcon.js","esm":"/esm/ArchiveIcon.js"},{"name":"ArrowBackIcon","svg":"/svg/ArrowBackIcon.svg","cjs":"/cjs/ArrowBackIcon.js","esm":"/esm/ArrowBackIcon.js"},{"name":"ArrowDownIcon","svg":"/svg/ArrowDownIcon.svg","cjs":"/cjs/ArrowDownIcon.js","esm":"/esm/ArrowDownIcon.js"},{"name":"ArrowForwardIcon","svg":"/svg/ArrowForwardIcon.svg","cjs":"/cjs/ArrowForwardIcon.js","esm":"/esm/ArrowForwardIcon.js"},{"name":"ArrowUpIcon","svg":"/svg/ArrowUpIcon.svg","cjs":"/cjs/ArrowUpIcon.js","esm":"/esm/ArrowUpIcon.js"},{"name":"AttachIcon","svg":"/svg/AttachIcon.svg","cjs":"/cjs/AttachIcon.js","esm":"/esm/AttachIcon.js"},{"name":"AttachmentIcon","svg":"/svg/AttachmentIcon.svg","cjs":"/cjs/AttachmentIcon.js","esm":"/esm/AttachmentIcon.js"},{"name":"AutomaticUpdatesIcon","svg":"/svg/AutomaticUpdatesIcon.svg","cjs":"/cjs/AutomaticUpdatesIcon.js","esm":"/esm/AutomaticUpdatesIcon.js"},{"name":"BoldIcon","svg":"/svg/BoldIcon.svg","cjs":"/cjs/BoldIcon.js","esm":"/esm/BoldIcon.js"},{"name":"BuildIcon","svg":"/svg/BuildIcon.svg","cjs":"/cjs/BuildIcon.js","esm":"/esm/BuildIcon.js"},{"name":"BuiltInIcon","svg":"/svg/BuiltInIcon.svg","cjs":"/cjs/BuiltInIcon.js","esm":"/esm/BuiltInIcon.js"},{"name":"BusinessIcon","svg":"/svg/BusinessIcon.svg","cjs":"/cjs/BusinessIcon.js","esm":"/esm/BusinessIcon.js"},{"name":"ButtonIcon","svg":"/svg/ButtonIcon.svg","cjs":"/cjs/ButtonIcon.js","esm":"/esm/ButtonIcon.js"},{"name":"CalendarIcon","svg":"/svg/CalendarIcon.svg","cjs":"/cjs/CalendarIcon.js","esm":"/esm/CalendarIcon.js"},{"name":"CallActiveIcon","svg":"/svg/CallActiveIcon.svg","cjs":"/cjs/CallActiveIcon.js","esm":"/esm/CallActiveIcon.js"},{"name":"CallAddIcon","svg":"/svg/CallAddIcon.svg","cjs":"/cjs/CallAddIcon.js","esm":"/esm/CallAddIcon.js"},{"name":"CallFailedIcon","svg":"/svg/CallFailedIcon.svg","cjs":"/cjs/CallFailedIcon.js","esm":"/esm/CallFailedIcon.js"},{"name":"CallHoldIcon","svg":"/svg/CallHoldIcon.svg","cjs":"/cjs/CallHoldIcon.js","esm":"/esm/CallHoldIcon.js"},{"name":"CallIcon","svg":"/svg/CallIcon.svg","cjs":"/cjs/CallIcon.js","esm":"/esm/CallIcon.js"},{"name":"CallIncomingIcon","svg":"/svg/CallIncomingIcon.svg","cjs":"/cjs/CallIncomingIcon.js","esm":"/esm/CallIncomingIcon.js"},{"name":"CallOutgoingIcon","svg":"/svg/CallOutgoingIcon.svg","cjs":"/cjs/CallOutgoingIcon.js","esm":"/esm/CallOutgoingIcon.js"},{"name":"CallTransferIcon","svg":"/svg/CallTransferIcon.svg","cjs":"/cjs/CallTransferIcon.js","esm":"/esm/CallTransferIcon.js"},{"name":"ChatIcon","svg":"/svg/ChatIcon.svg","cjs":"/cjs/ChatIcon.js","esm":"/esm/ChatIcon.js"},{"name":"CheckboxCheckIcon","svg":"/svg/CheckboxCheckIcon.svg","cjs":"/cjs/CheckboxCheckIcon.js","esm":"/esm/CheckboxCheckIcon.js"},{"name":"CheckboxLineIcon","svg":"/svg/CheckboxLineIcon.svg","cjs":"/cjs/CheckboxLineIcon.js","esm":"/esm/CheckboxLineIcon.js"},{"name":"ChevronDisclosureIcon","svg":"/svg/ChevronDisclosureIcon.svg","cjs":"/cjs/ChevronDisclosureIcon.js","esm":"/esm/ChevronDisclosureIcon.js"},{"name":"ChevronDoubleLeftIcon","svg":"/svg/ChevronDoubleLeftIcon.svg","cjs":"/cjs/ChevronDoubleLeftIcon.js","esm":"/esm/ChevronDoubleLeftIcon.js"},{"name":"ChevronDoubleRightIcon","svg":"/svg/ChevronDoubleRightIcon.svg","cjs":"/cjs/ChevronDoubleRightIcon.js","esm":"/esm/ChevronDoubleRightIcon.js"},{"name":"ChevronDownIcon","svg":"/svg/ChevronDownIcon.svg","cjs":"/cjs/ChevronDownIcon.js","esm":"/esm/ChevronDownIcon.js"},{"name":"ChevronExpandIcon","svg":"/svg/ChevronExpandIcon.svg","cjs":"/cjs/ChevronExpandIcon.js","esm":"/esm/ChevronExpandIcon.js"},{"name":"ChevronLeftIcon","svg":"/svg/ChevronLeftIcon.svg","cjs":"/cjs/ChevronLeftIcon.js","esm":"/esm/ChevronLeftIcon.js"},{"name":"ChevronRightIcon","svg":"/svg/ChevronRightIcon.svg","cjs":"/cjs/ChevronRightIcon.js","esm":"/esm/ChevronRightIcon.js"},{"name":"ChevronUpIcon","svg":"/svg/ChevronUpIcon.svg","cjs":"/cjs/ChevronUpIcon.js","esm":"/esm/ChevronUpIcon.js"},{"name":"ClearIcon","svg":"/svg/ClearIcon.svg","cjs":"/cjs/ClearIcon.js","esm":"/esm/ClearIcon.js"},{"name":"CloseIcon","svg":"/svg/CloseIcon.svg","cjs":"/cjs/CloseIcon.js","esm":"/esm/CloseIcon.js"},{"name":"CloudIcon","svg":"/svg/CloudIcon.svg","cjs":"/cjs/CloudIcon.js","esm":"/esm/CloudIcon.js"},{"name":"CodeIcon","svg":"/svg/CodeIcon.svg","cjs":"/cjs/CodeIcon.js","esm":"/esm/CodeIcon.js"},{"name":"CollapseIcon","svg":"/svg/CollapseIcon.svg","cjs":"/cjs/CollapseIcon.js","esm":"/esm/CollapseIcon.js"},{"name":"ColorPickerIcon","svg":"/svg/ColorPickerIcon.svg","cjs":"/cjs/ColorPickerIcon.js","esm":"/esm/ColorPickerIcon.js"},{"name":"ColumnIcon","svg":"/svg/ColumnIcon.svg","cjs":"/cjs/ColumnIcon.js","esm":"/esm/ColumnIcon.js"},{"name":"CommunityIcon","svg":"/svg/CommunityIcon.svg","cjs":"/cjs/CommunityIcon.js","esm":"/esm/CommunityIcon.js"},{"name":"ConnectivityAvailableIcon","svg":"/svg/ConnectivityAvailableIcon.svg","cjs":"/cjs/ConnectivityAvailableIcon.js","esm":"/esm/ConnectivityAvailableIcon.js"},{"name":"ConnectivityBusyIcon","svg":"/svg/ConnectivityBusyIcon.svg","cjs":"/cjs/ConnectivityBusyIcon.js","esm":"/esm/ConnectivityBusyIcon.js"},{"name":"ConnectivityNeutralIcon","svg":"/svg/ConnectivityNeutralIcon.svg","cjs":"/cjs/ConnectivityNeutralIcon.js","esm":"/esm/ConnectivityNeutralIcon.js"},{"name":"ConnectivityOfflineIcon","svg":"/svg/ConnectivityOfflineIcon.svg","cjs":"/cjs/ConnectivityOfflineIcon.js","esm":"/esm/ConnectivityOfflineIcon.js"},{"name":"ConnectivityUnavailableIcon","svg":"/svg/ConnectivityUnavailableIcon.svg","cjs":"/cjs/ConnectivityUnavailableIcon.js","esm":"/esm/ConnectivityUnavailableIcon.js"},{"name":"CopyIcon","svg":"/svg/CopyIcon.svg","cjs":"/cjs/CopyIcon.js","esm":"/esm/CopyIcon.js"},{"name":"CreditCardIcon","svg":"/svg/CreditCardIcon.svg","cjs":"/cjs/CreditCardIcon.js","esm":"/esm/CreditCardIcon.js"},{"name":"CustomIcon","svg":"/svg/CustomIcon.svg","cjs":"/cjs/CustomIcon.js","esm":"/esm/CustomIcon.js"},{"name":"DarkModeIcon","svg":"/svg/DarkModeIcon.svg","cjs":"/cjs/DarkModeIcon.js","esm":"/esm/DarkModeIcon.js"},{"name":"DataBarChartIcon","svg":"/svg/DataBarChartIcon.svg","cjs":"/cjs/DataBarChartIcon.js","esm":"/esm/DataBarChartIcon.js"},{"name":"DataLineChartIcon","svg":"/svg/DataLineChartIcon.svg","cjs":"/cjs/DataLineChartIcon.js","esm":"/esm/DataLineChartIcon.js"},{"name":"DataPieChartIcon","svg":"/svg/DataPieChartIcon.svg","cjs":"/cjs/DataPieChartIcon.js","esm":"/esm/DataPieChartIcon.js"},{"name":"DataTableIcon","svg":"/svg/DataTableIcon.svg","cjs":"/cjs/DataTableIcon.js","esm":"/esm/DataTableIcon.js"},{"name":"DatabaseIcon","svg":"/svg/DatabaseIcon.svg","cjs":"/cjs/DatabaseIcon.js","esm":"/esm/DatabaseIcon.js"},{"name":"DeleteIcon","svg":"/svg/DeleteIcon.svg","cjs":"/cjs/DeleteIcon.js","esm":"/esm/DeleteIcon.js"},{"name":"DeliveredIcon","svg":"/svg/DeliveredIcon.svg","cjs":"/cjs/DeliveredIcon.js","esm":"/esm/DeliveredIcon.js"},{"name":"DialpadIcon","svg":"/svg/DialpadIcon.svg","cjs":"/cjs/DialpadIcon.js","esm":"/esm/DialpadIcon.js"},{"name":"DirectoryIcon","svg":"/svg/DirectoryIcon.svg","cjs":"/cjs/DirectoryIcon.js","esm":"/esm/DirectoryIcon.js"},{"name":"DisableIcon","svg":"/svg/DisableIcon.svg","cjs":"/cjs/DisableIcon.js","esm":"/esm/DisableIcon.js"},{"name":"DividerIcon","svg":"/svg/DividerIcon.svg","cjs":"/cjs/DividerIcon.js","esm":"/esm/DividerIcon.js"},{"name":"DoNotIcon","svg":"/svg/DoNotIcon.svg","cjs":"/cjs/DoNotIcon.js","esm":"/esm/DoNotIcon.js"},{"name":"DocumentationIcon","svg":"/svg/DocumentationIcon.svg","cjs":"/cjs/DocumentationIcon.js","esm":"/esm/DocumentationIcon.js"},{"name":"DownloadIcon","svg":"/svg/DownloadIcon.svg","cjs":"/cjs/DownloadIcon.js","esm":"/esm/DownloadIcon.js"},{"name":"DragHorizontalIcon","svg":"/svg/DragHorizontalIcon.svg","cjs":"/cjs/DragHorizontalIcon.js","esm":"/esm/DragHorizontalIcon.js"},{"name":"DragIcon","svg":"/svg/DragIcon.svg","cjs":"/cjs/DragIcon.js","esm":"/esm/DragIcon.js"},{"name":"DragVerticalIcon","svg":"/svg/DragVerticalIcon.svg","cjs":"/cjs/DragVerticalIcon.js","esm":"/esm/DragVerticalIcon.js"},{"name":"EditIcon","svg":"/svg/EditIcon.svg","cjs":"/cjs/EditIcon.js","esm":"/esm/EditIcon.js"},{"name":"ElasticSIPTrunkingCapableIcon","svg":"/svg/ElasticSIPTrunkingCapableIcon.svg","cjs":"/cjs/ElasticSIPTrunkingCapableIcon.js","esm":"/esm/ElasticSIPTrunkingCapableIcon.js"},{"name":"EmailIcon","svg":"/svg/EmailIcon.svg","cjs":"/cjs/EmailIcon.js","esm":"/esm/EmailIcon.js"},{"name":"EmojiIcon","svg":"/svg/EmojiIcon.svg","cjs":"/cjs/EmojiIcon.js","esm":"/esm/EmojiIcon.js"},{"name":"ErrorIcon","svg":"/svg/ErrorIcon.svg","cjs":"/cjs/ErrorIcon.js","esm":"/esm/ErrorIcon.js"},{"name":"ExpandIcon","svg":"/svg/ExpandIcon.svg","cjs":"/cjs/ExpandIcon.js","esm":"/esm/ExpandIcon.js"},{"name":"ExportIcon","svg":"/svg/ExportIcon.svg","cjs":"/cjs/ExportIcon.js","esm":"/esm/ExportIcon.js"},{"name":"FaxCapableIcon","svg":"/svg/FaxCapableIcon.svg","cjs":"/cjs/FaxCapableIcon.js","esm":"/esm/FaxCapableIcon.js"},{"name":"FeedIcon","svg":"/svg/FeedIcon.svg","cjs":"/cjs/FeedIcon.js","esm":"/esm/FeedIcon.js"},{"name":"FileAudioIcon","svg":"/svg/FileAudioIcon.svg","cjs":"/cjs/FileAudioIcon.js","esm":"/esm/FileAudioIcon.js"},{"name":"FileIcon","svg":"/svg/FileIcon.svg","cjs":"/cjs/FileIcon.js","esm":"/esm/FileIcon.js"},{"name":"FileImageIcon","svg":"/svg/FileImageIcon.svg","cjs":"/cjs/FileImageIcon.js","esm":"/esm/FileImageIcon.js"},{"name":"FileVideoIcon","svg":"/svg/FileVideoIcon.svg","cjs":"/cjs/FileVideoIcon.js","esm":"/esm/FileVideoIcon.js"},{"name":"FileZipIcon","svg":"/svg/FileZipIcon.svg","cjs":"/cjs/FileZipIcon.js","esm":"/esm/FileZipIcon.js"},{"name":"FilterIcon","svg":"/svg/FilterIcon.svg","cjs":"/cjs/FilterIcon.js","esm":"/esm/FilterIcon.js"},{"name":"FlagIcon","svg":"/svg/FlagIcon.svg","cjs":"/cjs/FlagIcon.js","esm":"/esm/FlagIcon.js"},{"name":"GitIcon","svg":"/svg/GitIcon.svg","cjs":"/cjs/GitIcon.js","esm":"/esm/GitIcon.js"},{"name":"HeatmapIcon","svg":"/svg/HeatmapIcon.svg","cjs":"/cjs/HeatmapIcon.js","esm":"/esm/HeatmapIcon.js"},{"name":"HideIcon","svg":"/svg/HideIcon.svg","cjs":"/cjs/HideIcon.js","esm":"/esm/HideIcon.js"},{"name":"HistoryIcon","svg":"/svg/HistoryIcon.svg","cjs":"/cjs/HistoryIcon.js","esm":"/esm/HistoryIcon.js"},{"name":"ImageTextIcon","svg":"/svg/ImageTextIcon.svg","cjs":"/cjs/ImageTextIcon.js","esm":"/esm/ImageTextIcon.js"},{"name":"InboxIcon","svg":"/svg/InboxIcon.svg","cjs":"/cjs/InboxIcon.js","esm":"/esm/InboxIcon.js"},{"name":"IndentDecreaseIcon","svg":"/svg/IndentDecreaseIcon.svg","cjs":"/cjs/IndentDecreaseIcon.js","esm":"/esm/IndentDecreaseIcon.js"},{"name":"IndentIncreaseIcon","svg":"/svg/IndentIncreaseIcon.svg","cjs":"/cjs/IndentIncreaseIcon.js","esm":"/esm/IndentIncreaseIcon.js"},{"name":"InformationIcon","svg":"/svg/InformationIcon.svg","cjs":"/cjs/InformationIcon.js","esm":"/esm/InformationIcon.js"},{"name":"ItalicIcon","svg":"/svg/ItalicIcon.svg","cjs":"/cjs/ItalicIcon.js","esm":"/esm/ItalicIcon.js"},{"name":"LightModeIcon","svg":"/svg/LightModeIcon.svg","cjs":"/cjs/LightModeIcon.js","esm":"/esm/LightModeIcon.js"},{"name":"LinkExternalIcon","svg":"/svg/LinkExternalIcon.svg","cjs":"/cjs/LinkExternalIcon.js","esm":"/esm/LinkExternalIcon.js"},{"name":"LinkIcon","svg":"/svg/LinkIcon.svg","cjs":"/cjs/LinkIcon.js","esm":"/esm/LinkIcon.js"},{"name":"LoadingIcon","svg":"/svg/LoadingIcon.svg","cjs":"/cjs/LoadingIcon.js","esm":"/esm/LoadingIcon.js"},{"name":"LockIcon","svg":"/svg/LockIcon.svg","cjs":"/cjs/LockIcon.js","esm":"/esm/LockIcon.js"},{"name":"LogInIcon","svg":"/svg/LogInIcon.svg","cjs":"/cjs/LogInIcon.js","esm":"/esm/LogInIcon.js"},{"name":"LogOutIcon","svg":"/svg/LogOutIcon.svg","cjs":"/cjs/LogOutIcon.js","esm":"/esm/LogOutIcon.js"},{"name":"LogoPasteIcon","svg":"/svg/LogoPasteIcon.svg","cjs":"/cjs/LogoPasteIcon.js","esm":"/esm/LogoPasteIcon.js"},{"name":"LogoTwilioIcon","svg":"/svg/LogoTwilioIcon.svg","cjs":"/cjs/LogoTwilioIcon.js","esm":"/esm/LogoTwilioIcon.js"},{"name":"LowerHandIcon","svg":"/svg/LowerHandIcon.svg","cjs":"/cjs/LowerHandIcon.js","esm":"/esm/LowerHandIcon.js"},{"name":"MMSCapableIcon","svg":"/svg/MMSCapableIcon.svg","cjs":"/cjs/MMSCapableIcon.js","esm":"/esm/MMSCapableIcon.js"},{"name":"MenuIcon","svg":"/svg/MenuIcon.svg","cjs":"/cjs/MenuIcon.js","esm":"/esm/MenuIcon.js"},{"name":"MicrophoneOffIcon","svg":"/svg/MicrophoneOffIcon.svg","cjs":"/cjs/MicrophoneOffIcon.js","esm":"/esm/MicrophoneOffIcon.js"},{"name":"MicrophoneOnIcon","svg":"/svg/MicrophoneOnIcon.svg","cjs":"/cjs/MicrophoneOnIcon.js","esm":"/esm/MicrophoneOnIcon.js"},{"name":"MinusIcon","svg":"/svg/MinusIcon.svg","cjs":"/cjs/MinusIcon.js","esm":"/esm/MinusIcon.js"},{"name":"MobileIcon","svg":"/svg/MobileIcon.svg","cjs":"/cjs/MobileIcon.js","esm":"/esm/MobileIcon.js"},{"name":"MoreIcon","svg":"/svg/MoreIcon.svg","cjs":"/cjs/MoreIcon.js","esm":"/esm/MoreIcon.js"},{"name":"NeutralIcon","svg":"/svg/NeutralIcon.svg","cjs":"/cjs/NeutralIcon.js","esm":"/esm/NeutralIcon.js"},{"name":"NewIcon","svg":"/svg/NewIcon.svg","cjs":"/cjs/NewIcon.js","esm":"/esm/NewIcon.js"},{"name":"NotesIcon","svg":"/svg/NotesIcon.svg","cjs":"/cjs/NotesIcon.js","esm":"/esm/NotesIcon.js"},{"name":"NotificationIcon","svg":"/svg/NotificationIcon.svg","cjs":"/cjs/NotificationIcon.js","esm":"/esm/NotificationIcon.js"},{"name":"OrderedListIcon","svg":"/svg/OrderedListIcon.svg","cjs":"/cjs/OrderedListIcon.js","esm":"/esm/OrderedListIcon.js"},{"name":"OutOfDateIcon","svg":"/svg/OutOfDateIcon.svg","cjs":"/cjs/OutOfDateIcon.js","esm":"/esm/OutOfDateIcon.js"},{"name":"PauseIcon","svg":"/svg/PauseIcon.svg","cjs":"/cjs/PauseIcon.js","esm":"/esm/PauseIcon.js"},{"name":"PinIcon","svg":"/svg/PinIcon.svg","cjs":"/cjs/PinIcon.js","esm":"/esm/PinIcon.js"},{"name":"PlayIcon","svg":"/svg/PlayIcon.svg","cjs":"/cjs/PlayIcon.js","esm":"/esm/PlayIcon.js"},{"name":"PlusIcon","svg":"/svg/PlusIcon.svg","cjs":"/cjs/PlusIcon.js","esm":"/esm/PlusIcon.js"},{"name":"ProcessDisabledIcon","svg":"/svg/ProcessDisabledIcon.svg","cjs":"/cjs/ProcessDisabledIcon.js","esm":"/esm/ProcessDisabledIcon.js"},{"name":"ProcessDraftIcon","svg":"/svg/ProcessDraftIcon.svg","cjs":"/cjs/ProcessDraftIcon.js","esm":"/esm/ProcessDraftIcon.js"},{"name":"ProcessErrorIcon","svg":"/svg/ProcessErrorIcon.svg","cjs":"/cjs/ProcessErrorIcon.js","esm":"/esm/ProcessErrorIcon.js"},{"name":"ProcessInProgressIcon","svg":"/svg/ProcessInProgressIcon.svg","cjs":"/cjs/ProcessInProgressIcon.js","esm":"/esm/ProcessInProgressIcon.js"},{"name":"ProcessNeutralIcon","svg":"/svg/ProcessNeutralIcon.svg","cjs":"/cjs/ProcessNeutralIcon.js","esm":"/esm/ProcessNeutralIcon.js"},{"name":"ProcessSuccessIcon","svg":"/svg/ProcessSuccessIcon.svg","cjs":"/cjs/ProcessSuccessIcon.js","esm":"/esm/ProcessSuccessIcon.js"},{"name":"ProcessWarningIcon","svg":"/svg/ProcessWarningIcon.svg","cjs":"/cjs/ProcessWarningIcon.js","esm":"/esm/ProcessWarningIcon.js"},{"name":"ProductAPIExplorerIcon","svg":"/svg/ProductAPIExplorerIcon.svg","cjs":"/cjs/ProductAPIExplorerIcon.js","esm":"/esm/ProductAPIExplorerIcon.js"},{"name":"ProductAddOnsIcon","svg":"/svg/ProductAddOnsIcon.svg","cjs":"/cjs/ProductAddOnsIcon.js","esm":"/esm/ProductAddOnsIcon.js"},{"name":"ProductAdminAccessControlIcon","svg":"/svg/ProductAdminAccessControlIcon.svg","cjs":"/cjs/ProductAdminAccessControlIcon.js","esm":"/esm/ProductAdminAccessControlIcon.js"},{"name":"ProductAdminAccountsIcon","svg":"/svg/ProductAdminAccountsIcon.svg","cjs":"/cjs/ProductAdminAccountsIcon.js","esm":"/esm/ProductAdminAccountsIcon.js"},{"name":"ProductAdminDomainsIcon","svg":"/svg/ProductAdminDomainsIcon.svg","cjs":"/cjs/ProductAdminDomainsIcon.js","esm":"/esm/ProductAdminDomainsIcon.js"},{"name":"ProductAdminResoldCustomersIcon","svg":"/svg/ProductAdminResoldCustomersIcon.svg","cjs":"/cjs/ProductAdminResoldCustomersIcon.js","esm":"/esm/ProductAdminResoldCustomersIcon.js"},{"name":"ProductAdminSSOIcon","svg":"/svg/ProductAdminSSOIcon.svg","cjs":"/cjs/ProductAdminSSOIcon.js","esm":"/esm/ProductAdminSSOIcon.js"},{"name":"ProductAdminUsersIcon","svg":"/svg/ProductAdminUsersIcon.svg","cjs":"/cjs/ProductAdminUsersIcon.js","esm":"/esm/ProductAdminUsersIcon.js"},{"name":"ProductAlarmsIcon","svg":"/svg/ProductAlarmsIcon.svg","cjs":"/cjs/ProductAlarmsIcon.js","esm":"/esm/ProductAlarmsIcon.js"},{"name":"ProductAssetsIcon","svg":"/svg/ProductAssetsIcon.svg","cjs":"/cjs/ProductAssetsIcon.js","esm":"/esm/ProductAssetsIcon.js"},{"name":"ProductAudiencesIcon","svg":"/svg/ProductAudiencesIcon.svg","cjs":"/cjs/ProductAudiencesIcon.js","esm":"/esm/ProductAudiencesIcon.js"},{"name":"ProductAuthyIcon","svg":"/svg/ProductAuthyIcon.svg","cjs":"/cjs/ProductAuthyIcon.js","esm":"/esm/ProductAuthyIcon.js"},{"name":"ProductAutopilotIcon","svg":"/svg/ProductAutopilotIcon.svg","cjs":"/cjs/ProductAutopilotIcon.js","esm":"/esm/ProductAutopilotIcon.js"},{"name":"ProductBillingIcon","svg":"/svg/ProductBillingIcon.svg","cjs":"/cjs/ProductBillingIcon.js","esm":"/esm/ProductBillingIcon.js"},{"name":"ProductCLIIcon","svg":"/svg/ProductCLIIcon.svg","cjs":"/cjs/ProductCLIIcon.js","esm":"/esm/ProductCLIIcon.js"},{"name":"ProductChannelsIcon","svg":"/svg/ProductChannelsIcon.svg","cjs":"/cjs/ProductChannelsIcon.js","esm":"/esm/ProductChannelsIcon.js"},{"name":"ProductChatIcon","svg":"/svg/ProductChatIcon.svg","cjs":"/cjs/ProductChatIcon.js","esm":"/esm/ProductChatIcon.js"},{"name":"ProductCodeExchangeCommunityIcon","svg":"/svg/ProductCodeExchangeCommunityIcon.svg","cjs":"/cjs/ProductCodeExchangeCommunityIcon.js","esm":"/esm/ProductCodeExchangeCommunityIcon.js"},{"name":"ProductCodeExchangePartnerIcon","svg":"/svg/ProductCodeExchangePartnerIcon.svg","cjs":"/cjs/ProductCodeExchangePartnerIcon.js","esm":"/esm/ProductCodeExchangePartnerIcon.js"},{"name":"ProductCommsIcon","svg":"/svg/ProductCommsIcon.svg","cjs":"/cjs/ProductCommsIcon.js","esm":"/esm/ProductCommsIcon.js"},{"name":"ProductConnectedDevicesIcon","svg":"/svg/ProductConnectedDevicesIcon.svg","cjs":"/cjs/ProductConnectedDevicesIcon.js","esm":"/esm/ProductConnectedDevicesIcon.js"},{"name":"ProductConnectionsIcon","svg":"/svg/ProductConnectionsIcon.svg","cjs":"/cjs/ProductConnectionsIcon.js","esm":"/esm/ProductConnectionsIcon.js"},{"name":"ProductContactCenterAdminIcon","svg":"/svg/ProductContactCenterAdminIcon.svg","cjs":"/cjs/ProductContactCenterAdminIcon.js","esm":"/esm/ProductContactCenterAdminIcon.js"},{"name":"ProductContactCenterAssessmentsIcon","svg":"/svg/ProductContactCenterAssessmentsIcon.svg","cjs":"/cjs/ProductContactCenterAssessmentsIcon.js","esm":"/esm/ProductContactCenterAssessmentsIcon.js"},{"name":"ProductContactCenterQueuesIcon","svg":"/svg/ProductContactCenterQueuesIcon.svg","cjs":"/cjs/ProductContactCenterQueuesIcon.js","esm":"/esm/ProductContactCenterQueuesIcon.js"},{"name":"ProductContactCenterTasksIcon","svg":"/svg/ProductContactCenterTasksIcon.svg","cjs":"/cjs/ProductContactCenterTasksIcon.js","esm":"/esm/ProductContactCenterTasksIcon.js"},{"name":"ProductContactCenterTeamsIcon","svg":"/svg/ProductContactCenterTeamsIcon.svg","cjs":"/cjs/ProductContactCenterTeamsIcon.js","esm":"/esm/ProductContactCenterTeamsIcon.js"},{"name":"ProductConversationsIcon","svg":"/svg/ProductConversationsIcon.svg","cjs":"/cjs/ProductConversationsIcon.js","esm":"/esm/ProductConversationsIcon.js"},{"name":"ProductDebuggerIcon","svg":"/svg/ProductDebuggerIcon.svg","cjs":"/cjs/ProductDebuggerIcon.js","esm":"/esm/ProductDebuggerIcon.js"},{"name":"ProductDestinationsIcon","svg":"/svg/ProductDestinationsIcon.svg","cjs":"/cjs/ProductDestinationsIcon.js","esm":"/esm/ProductDestinationsIcon.js"},{"name":"ProductElasticSIPTrunkingIcon","svg":"/svg/ProductElasticSIPTrunkingIcon.svg","cjs":"/cjs/ProductElasticSIPTrunkingIcon.js","esm":"/esm/ProductElasticSIPTrunkingIcon.js"},{"name":"ProductEmailAPIIcon","svg":"/svg/ProductEmailAPIIcon.svg","cjs":"/cjs/ProductEmailAPIIcon.js","esm":"/esm/ProductEmailAPIIcon.js"},{"name":"ProductEngageIcon","svg":"/svg/ProductEngageIcon.svg","cjs":"/cjs/ProductEngageIcon.js","esm":"/esm/ProductEngageIcon.js"},{"name":"ProductEventLibraryIcon","svg":"/svg/ProductEventLibraryIcon.svg","cjs":"/cjs/ProductEventLibraryIcon.js","esm":"/esm/ProductEventLibraryIcon.js"},{"name":"ProductEventStreamIcon","svg":"/svg/ProductEventStreamIcon.svg","cjs":"/cjs/ProductEventStreamIcon.js","esm":"/esm/ProductEventStreamIcon.js"},{"name":"ProductEventStreamsIcon","svg":"/svg/ProductEventStreamsIcon.svg","cjs":"/cjs/ProductEventStreamsIcon.js","esm":"/esm/ProductEventStreamsIcon.js"},{"name":"ProductFaxIcon","svg":"/svg/ProductFaxIcon.svg","cjs":"/cjs/ProductFaxIcon.js","esm":"/esm/ProductFaxIcon.js"},{"name":"ProductFlexIcon","svg":"/svg/ProductFlexIcon.svg","cjs":"/cjs/ProductFlexIcon.js","esm":"/esm/ProductFlexIcon.js"},{"name":"ProductFlowIcon","svg":"/svg/ProductFlowIcon.svg","cjs":"/cjs/ProductFlowIcon.js","esm":"/esm/ProductFlowIcon.js"},{"name":"ProductFrontlineIcon","svg":"/svg/ProductFrontlineIcon.svg","cjs":"/cjs/ProductFrontlineIcon.js","esm":"/esm/ProductFrontlineIcon.js"},{"name":"ProductFunctionsIcon","svg":"/svg/ProductFunctionsIcon.svg","cjs":"/cjs/ProductFunctionsIcon.js","esm":"/esm/ProductFunctionsIcon.js"},{"name":"ProductHomeIcon","svg":"/svg/ProductHomeIcon.svg","cjs":"/cjs/ProductHomeIcon.js","esm":"/esm/ProductHomeIcon.js"},{"name":"ProductInsightsIcon","svg":"/svg/ProductInsightsIcon.svg","cjs":"/cjs/ProductInsightsIcon.js","esm":"/esm/ProductInsightsIcon.js"},{"name":"ProductInterconnectIcon","svg":"/svg/ProductInterconnectIcon.svg","cjs":"/cjs/ProductInterconnectIcon.js","esm":"/esm/ProductInterconnectIcon.js"},{"name":"ProductInternetOfThingsEmbeddedSIMIcon","svg":"/svg/ProductInternetOfThingsEmbeddedSIMIcon.svg","cjs":"/cjs/ProductInternetOfThingsEmbeddedSIMIcon.js","esm":"/esm/ProductInternetOfThingsEmbeddedSIMIcon.js"},{"name":"ProductInternetOfThingsIcon","svg":"/svg/ProductInternetOfThingsIcon.svg","cjs":"/cjs/ProductInternetOfThingsIcon.js","esm":"/esm/ProductInternetOfThingsIcon.js"},{"name":"ProductInternetOfThingsNarrowbandIcon","svg":"/svg/ProductInternetOfThingsNarrowbandIcon.svg","cjs":"/cjs/ProductInternetOfThingsNarrowbandIcon.js","esm":"/esm/ProductInternetOfThingsNarrowbandIcon.js"},{"name":"ProductInternetOfThingsProgrammableAssetTrackerIcon","svg":"/svg/ProductInternetOfThingsProgrammableAssetTrackerIcon.svg","cjs":"/cjs/ProductInternetOfThingsProgrammableAssetTrackerIcon.js","esm":"/esm/ProductInternetOfThingsProgrammableAssetTrackerIcon.js"},{"name":"ProductInternetOfThingsSuperSIMIcon","svg":"/svg/ProductInternetOfThingsSuperSIMIcon.svg","cjs":"/cjs/ProductInternetOfThingsSuperSIMIcon.js","esm":"/esm/ProductInternetOfThingsSuperSIMIcon.js"},{"name":"ProductInternetOfThingsTrustOnboardIcon","svg":"/svg/ProductInternetOfThingsTrustOnboardIcon.svg","cjs":"/cjs/ProductInternetOfThingsTrustOnboardIcon.js","esm":"/esm/ProductInternetOfThingsTrustOnboardIcon.js"},{"name":"ProductInternetOfThingsWirelessIcon","svg":"/svg/ProductInternetOfThingsWirelessIcon.svg","cjs":"/cjs/ProductInternetOfThingsWirelessIcon.js","esm":"/esm/ProductInternetOfThingsWirelessIcon.js"},{"name":"ProductJourneysIcon","svg":"/svg/ProductJourneysIcon.svg","cjs":"/cjs/ProductJourneysIcon.js","esm":"/esm/ProductJourneysIcon.js"},{"name":"ProductKeysIcon","svg":"/svg/ProductKeysIcon.svg","cjs":"/cjs/ProductKeysIcon.js","esm":"/esm/ProductKeysIcon.js"},{"name":"ProductLiveIcon","svg":"/svg/ProductLiveIcon.svg","cjs":"/cjs/ProductLiveIcon.js","esm":"/esm/ProductLiveIcon.js"},{"name":"ProductLogsIcon","svg":"/svg/ProductLogsIcon.svg","cjs":"/cjs/ProductLogsIcon.js","esm":"/esm/ProductLogsIcon.js"},{"name":"ProductLookupIcon","svg":"/svg/ProductLookupIcon.svg","cjs":"/cjs/ProductLookupIcon.js","esm":"/esm/ProductLookupIcon.js"},{"name":"ProductMappingIcon","svg":"/svg/ProductMappingIcon.svg","cjs":"/cjs/ProductMappingIcon.js","esm":"/esm/ProductMappingIcon.js"},{"name":"ProductMarketingCampaignsIcon","svg":"/svg/ProductMarketingCampaignsIcon.svg","cjs":"/cjs/ProductMarketingCampaignsIcon.js","esm":"/esm/ProductMarketingCampaignsIcon.js"},{"name":"ProductMessagingIcon","svg":"/svg/ProductMessagingIcon.svg","cjs":"/cjs/ProductMessagingIcon.js","esm":"/esm/ProductMessagingIcon.js"},{"name":"ProductMicrovisorIcon","svg":"/svg/ProductMicrovisorIcon.svg","cjs":"/cjs/ProductMicrovisorIcon.js","esm":"/esm/ProductMicrovisorIcon.js"},{"name":"ProductNotifyIcon","svg":"/svg/ProductNotifyIcon.svg","cjs":"/cjs/ProductNotifyIcon.js","esm":"/esm/ProductNotifyIcon.js"},{"name":"ProductOneAdminIcon","svg":"/svg/ProductOneAdminIcon.svg","cjs":"/cjs/ProductOneAdminIcon.js","esm":"/esm/ProductOneAdminIcon.js"},{"name":"ProductPayConnectorIcon","svg":"/svg/ProductPayConnectorIcon.svg","cjs":"/cjs/ProductPayConnectorIcon.js","esm":"/esm/ProductPayConnectorIcon.js"},{"name":"ProductPhoneNumbersIcon","svg":"/svg/ProductPhoneNumbersIcon.svg","cjs":"/cjs/ProductPhoneNumbersIcon.js","esm":"/esm/ProductPhoneNumbersIcon.js"},{"name":"ProductPrivacyIcon","svg":"/svg/ProductPrivacyIcon.svg","cjs":"/cjs/ProductPrivacyIcon.js","esm":"/esm/ProductPrivacyIcon.js"},{"name":"ProductProtocolsIcon","svg":"/svg/ProductProtocolsIcon.svg","cjs":"/cjs/ProductProtocolsIcon.js","esm":"/esm/ProductProtocolsIcon.js"},{"name":"ProductProxyIcon","svg":"/svg/ProductProxyIcon.svg","cjs":"/cjs/ProductProxyIcon.js","esm":"/esm/ProductProxyIcon.js"},{"name":"ProductRegionalIcon","svg":"/svg/ProductRegionalIcon.svg","cjs":"/cjs/ProductRegionalIcon.js","esm":"/esm/ProductRegionalIcon.js"},{"name":"ProductReverseETLIcon","svg":"/svg/ProductReverseETLIcon.svg","cjs":"/cjs/ProductReverseETLIcon.js","esm":"/esm/ProductReverseETLIcon.js"},{"name":"ProductSDKIcon","svg":"/svg/ProductSDKIcon.svg","cjs":"/cjs/ProductSDKIcon.js","esm":"/esm/ProductSDKIcon.js"},{"name":"ProductSegmentIcon","svg":"/svg/ProductSegmentIcon.svg","cjs":"/cjs/ProductSegmentIcon.js","esm":"/esm/ProductSegmentIcon.js"},{"name":"ProductSettingsIcon","svg":"/svg/ProductSettingsIcon.svg","cjs":"/cjs/ProductSettingsIcon.js","esm":"/esm/ProductSettingsIcon.js"},{"name":"ProductSourceSchemaIcon","svg":"/svg/ProductSourceSchemaIcon.svg","cjs":"/cjs/ProductSourceSchemaIcon.js","esm":"/esm/ProductSourceSchemaIcon.js"},{"name":"ProductSourcesIcon","svg":"/svg/ProductSourcesIcon.svg","cjs":"/cjs/ProductSourcesIcon.js","esm":"/esm/ProductSourcesIcon.js"},{"name":"ProductStudioIcon","svg":"/svg/ProductStudioIcon.svg","cjs":"/cjs/ProductStudioIcon.js","esm":"/esm/ProductStudioIcon.js"},{"name":"ProductSupportIcon","svg":"/svg/ProductSupportIcon.svg","cjs":"/cjs/ProductSupportIcon.js","esm":"/esm/ProductSupportIcon.js"},{"name":"ProductSwitcherIcon","svg":"/svg/ProductSwitcherIcon.svg","cjs":"/cjs/ProductSwitcherIcon.js","esm":"/esm/ProductSwitcherIcon.js"},{"name":"ProductSyncIcon","svg":"/svg/ProductSyncIcon.svg","cjs":"/cjs/ProductSyncIcon.js","esm":"/esm/ProductSyncIcon.js"},{"name":"ProductTaskRouterIcon","svg":"/svg/ProductTaskRouterIcon.svg","cjs":"/cjs/ProductTaskRouterIcon.js","esm":"/esm/ProductTaskRouterIcon.js"},{"name":"ProductTraitsIcon","svg":"/svg/ProductTraitsIcon.svg","cjs":"/cjs/ProductTraitsIcon.js","esm":"/esm/ProductTraitsIcon.js"},{"name":"ProductTrustHubIcon","svg":"/svg/ProductTrustHubIcon.svg","cjs":"/cjs/ProductTrustHubIcon.js","esm":"/esm/ProductTrustHubIcon.js"},{"name":"ProductTwiMLBinsIcon","svg":"/svg/ProductTwiMLBinsIcon.svg","cjs":"/cjs/ProductTwiMLBinsIcon.js","esm":"/esm/ProductTwiMLBinsIcon.js"},{"name":"ProductTwilioOrgIcon","svg":"/svg/ProductTwilioOrgIcon.svg","cjs":"/cjs/ProductTwilioOrgIcon.js","esm":"/esm/ProductTwilioOrgIcon.js"},{"name":"ProductUSSDIcon","svg":"/svg/ProductUSSDIcon.svg","cjs":"/cjs/ProductUSSDIcon.js","esm":"/esm/ProductUSSDIcon.js"},{"name":"ProductUnifyIcon","svg":"/svg/ProductUnifyIcon.svg","cjs":"/cjs/ProductUnifyIcon.js","esm":"/esm/ProductUnifyIcon.js"},{"name":"ProductUsageIcon","svg":"/svg/ProductUsageIcon.svg","cjs":"/cjs/ProductUsageIcon.js","esm":"/esm/ProductUsageIcon.js"},{"name":"ProductVerifyIcon","svg":"/svg/ProductVerifyIcon.svg","cjs":"/cjs/ProductVerifyIcon.js","esm":"/esm/ProductVerifyIcon.js"},{"name":"ProductVideoIcon","svg":"/svg/ProductVideoIcon.svg","cjs":"/cjs/ProductVideoIcon.js","esm":"/esm/ProductVideoIcon.js"},{"name":"ProductVoiceIcon","svg":"/svg/ProductVoiceIcon.svg","cjs":"/cjs/ProductVoiceIcon.js","esm":"/esm/ProductVoiceIcon.js"},{"name":"ProductVoiceIntelligenceIcon","svg":"/svg/ProductVoiceIntelligenceIcon.svg","cjs":"/cjs/ProductVoiceIntelligenceIcon.js","esm":"/esm/ProductVoiceIntelligenceIcon.js"},{"name":"RaiseHandIcon","svg":"/svg/RaiseHandIcon.svg","cjs":"/cjs/RaiseHandIcon.js","esm":"/esm/RaiseHandIcon.js"},{"name":"RecordIcon","svg":"/svg/RecordIcon.svg","cjs":"/cjs/RecordIcon.js","esm":"/esm/RecordIcon.js"},{"name":"RedoIcon","svg":"/svg/RedoIcon.svg","cjs":"/cjs/RedoIcon.js","esm":"/esm/RedoIcon.js"},{"name":"RefreshIcon","svg":"/svg/RefreshIcon.svg","cjs":"/cjs/RefreshIcon.js","esm":"/esm/RefreshIcon.js"},{"name":"RepeatIcon","svg":"/svg/RepeatIcon.svg","cjs":"/cjs/RepeatIcon.js","esm":"/esm/RepeatIcon.js"},{"name":"ResetIcon","svg":"/svg/ResetIcon.svg","cjs":"/cjs/ResetIcon.js","esm":"/esm/ResetIcon.js"},{"name":"SMSCapableIcon","svg":"/svg/SMSCapableIcon.svg","cjs":"/cjs/SMSCapableIcon.js","esm":"/esm/SMSCapableIcon.js"},{"name":"SMSIcon","svg":"/svg/SMSIcon.svg","cjs":"/cjs/SMSIcon.js","esm":"/esm/SMSIcon.js"},{"name":"ScreenShareIcon","svg":"/svg/ScreenShareIcon.svg","cjs":"/cjs/ScreenShareIcon.js","esm":"/esm/ScreenShareIcon.js"},{"name":"SearchIcon","svg":"/svg/SearchIcon.svg","cjs":"/cjs/SearchIcon.js","esm":"/esm/SearchIcon.js"},{"name":"SelectIcon","svg":"/svg/SelectIcon.svg","cjs":"/cjs/SelectIcon.js","esm":"/esm/SelectIcon.js"},{"name":"SelectedIcon","svg":"/svg/SelectedIcon.svg","cjs":"/cjs/SelectedIcon.js","esm":"/esm/SelectedIcon.js"},{"name":"SendIcon","svg":"/svg/SendIcon.svg","cjs":"/cjs/SendIcon.js","esm":"/esm/SendIcon.js"},{"name":"SentIcon","svg":"/svg/SentIcon.svg","cjs":"/cjs/SentIcon.js","esm":"/esm/SentIcon.js"},{"name":"ShareIcon","svg":"/svg/ShareIcon.svg","cjs":"/cjs/ShareIcon.js","esm":"/esm/ShareIcon.js"},{"name":"ShowIcon","svg":"/svg/ShowIcon.svg","cjs":"/cjs/ShowIcon.js","esm":"/esm/ShowIcon.js"},{"name":"ShrinkIcon","svg":"/svg/ShrinkIcon.svg","cjs":"/cjs/ShrinkIcon.js","esm":"/esm/ShrinkIcon.js"},{"name":"SkipBackIcon","svg":"/svg/SkipBackIcon.svg","cjs":"/cjs/SkipBackIcon.js","esm":"/esm/SkipBackIcon.js"},{"name":"SkipForwardIcon","svg":"/svg/SkipForwardIcon.svg","cjs":"/cjs/SkipForwardIcon.js","esm":"/esm/SkipForwardIcon.js"},{"name":"SocialIcon","svg":"/svg/SocialIcon.svg","cjs":"/cjs/SocialIcon.js","esm":"/esm/SocialIcon.js"},{"name":"SortAlphabeticalIcon","svg":"/svg/SortAlphabeticalIcon.svg","cjs":"/cjs/SortAlphabeticalIcon.js","esm":"/esm/SortAlphabeticalIcon.js"},{"name":"SpacerVerticalIcon","svg":"/svg/SpacerVerticalIcon.svg","cjs":"/cjs/SpacerVerticalIcon.js","esm":"/esm/SpacerVerticalIcon.js"},{"name":"StarIcon","svg":"/svg/StarIcon.svg","cjs":"/cjs/StarIcon.js","esm":"/esm/StarIcon.js"},{"name":"StopIcon","svg":"/svg/StopIcon.svg","cjs":"/cjs/StopIcon.js","esm":"/esm/StopIcon.js"},{"name":"StopScreenShareIcon","svg":"/svg/StopScreenShareIcon.svg","cjs":"/cjs/StopScreenShareIcon.js","esm":"/esm/StopScreenShareIcon.js"},{"name":"StoreIcon","svg":"/svg/StoreIcon.svg","cjs":"/cjs/StoreIcon.js","esm":"/esm/StoreIcon.js"},{"name":"StrikethroughIcon","svg":"/svg/StrikethroughIcon.svg","cjs":"/cjs/StrikethroughIcon.js","esm":"/esm/StrikethroughIcon.js"},{"name":"SubscriptIcon","svg":"/svg/SubscriptIcon.svg","cjs":"/cjs/SubscriptIcon.js","esm":"/esm/SubscriptIcon.js"},{"name":"SuccessIcon","svg":"/svg/SuccessIcon.svg","cjs":"/cjs/SuccessIcon.js","esm":"/esm/SuccessIcon.js"},{"name":"SuperscriptIcon","svg":"/svg/SuperscriptIcon.svg","cjs":"/cjs/SuperscriptIcon.js","esm":"/esm/SuperscriptIcon.js"},{"name":"SupportIcon","svg":"/svg/SupportIcon.svg","cjs":"/cjs/SupportIcon.js","esm":"/esm/SupportIcon.js"},{"name":"SystemStatusIcon","svg":"/svg/SystemStatusIcon.svg","cjs":"/cjs/SystemStatusIcon.js","esm":"/esm/SystemStatusIcon.js"},{"name":"TaskIcon","svg":"/svg/TaskIcon.svg","cjs":"/cjs/TaskIcon.js","esm":"/esm/TaskIcon.js"},{"name":"TextAlignCenterIcon","svg":"/svg/TextAlignCenterIcon.svg","cjs":"/cjs/TextAlignCenterIcon.js","esm":"/esm/TextAlignCenterIcon.js"},{"name":"TextAlignJustifyIcon","svg":"/svg/TextAlignJustifyIcon.svg","cjs":"/cjs/TextAlignJustifyIcon.js","esm":"/esm/TextAlignJustifyIcon.js"},{"name":"TextAlignLeftIcon","svg":"/svg/TextAlignLeftIcon.svg","cjs":"/cjs/TextAlignLeftIcon.js","esm":"/esm/TextAlignLeftIcon.js"},{"name":"TextAlignRightIcon","svg":"/svg/TextAlignRightIcon.svg","cjs":"/cjs/TextAlignRightIcon.js","esm":"/esm/TextAlignRightIcon.js"},{"name":"TextFormatClearIcon","svg":"/svg/TextFormatClearIcon.svg","cjs":"/cjs/TextFormatClearIcon.js","esm":"/esm/TextFormatClearIcon.js"},{"name":"TextFormatIcon","svg":"/svg/TextFormatIcon.svg","cjs":"/cjs/TextFormatIcon.js","esm":"/esm/TextFormatIcon.js"},{"name":"TextHighlightIcon","svg":"/svg/TextHighlightIcon.svg","cjs":"/cjs/TextHighlightIcon.js","esm":"/esm/TextHighlightIcon.js"},{"name":"ThemeIcon","svg":"/svg/ThemeIcon.svg","cjs":"/cjs/ThemeIcon.js","esm":"/esm/ThemeIcon.js"},{"name":"ThumbsDownIcon","svg":"/svg/ThumbsDownIcon.svg","cjs":"/cjs/ThumbsDownIcon.js","esm":"/esm/ThumbsDownIcon.js"},{"name":"ThumbsUpIcon","svg":"/svg/ThumbsUpIcon.svg","cjs":"/cjs/ThumbsUpIcon.js","esm":"/esm/ThumbsUpIcon.js"},{"name":"TimeIcon","svg":"/svg/TimeIcon.svg","cjs":"/cjs/TimeIcon.js","esm":"/esm/TimeIcon.js"},{"name":"TipIcon","svg":"/svg/TipIcon.svg","cjs":"/cjs/TipIcon.js","esm":"/esm/TipIcon.js"},{"name":"TokenIcon","svg":"/svg/TokenIcon.svg","cjs":"/cjs/TokenIcon.js","esm":"/esm/TokenIcon.js"},{"name":"TourIcon","svg":"/svg/TourIcon.svg","cjs":"/cjs/TourIcon.js","esm":"/esm/TourIcon.js"},{"name":"TranslationIcon","svg":"/svg/TranslationIcon.svg","cjs":"/cjs/TranslationIcon.js","esm":"/esm/TranslationIcon.js"},{"name":"TrendDownIcon","svg":"/svg/TrendDownIcon.svg","cjs":"/cjs/TrendDownIcon.js","esm":"/esm/TrendDownIcon.js"},{"name":"TrendUpIcon","svg":"/svg/TrendUpIcon.svg","cjs":"/cjs/TrendUpIcon.js","esm":"/esm/TrendUpIcon.js"},{"name":"UnarchiveIcon","svg":"/svg/UnarchiveIcon.svg","cjs":"/cjs/UnarchiveIcon.js","esm":"/esm/UnarchiveIcon.js"},{"name":"UnderlineIcon","svg":"/svg/UnderlineIcon.svg","cjs":"/cjs/UnderlineIcon.js","esm":"/esm/UnderlineIcon.js"},{"name":"UndoIcon","svg":"/svg/UndoIcon.svg","cjs":"/cjs/UndoIcon.js","esm":"/esm/UndoIcon.js"},{"name":"UnlockIcon","svg":"/svg/UnlockIcon.svg","cjs":"/cjs/UnlockIcon.js","esm":"/esm/UnlockIcon.js"},{"name":"UnorderedListIcon","svg":"/svg/UnorderedListIcon.svg","cjs":"/cjs/UnorderedListIcon.js","esm":"/esm/UnorderedListIcon.js"},{"name":"UnpinIcon","svg":"/svg/UnpinIcon.svg","cjs":"/cjs/UnpinIcon.js","esm":"/esm/UnpinIcon.js"},{"name":"UnsortedIcon","svg":"/svg/UnsortedIcon.svg","cjs":"/cjs/UnsortedIcon.js","esm":"/esm/UnsortedIcon.js"},{"name":"UnsubscribeIcon","svg":"/svg/UnsubscribeIcon.svg","cjs":"/cjs/UnsubscribeIcon.js","esm":"/esm/UnsubscribeIcon.js"},{"name":"UploadIcon","svg":"/svg/UploadIcon.svg","cjs":"/cjs/UploadIcon.js","esm":"/esm/UploadIcon.js"},{"name":"UploadToCloudIcon","svg":"/svg/UploadToCloudIcon.svg","cjs":"/cjs/UploadToCloudIcon.js","esm":"/esm/UploadToCloudIcon.js"},{"name":"UserIcon","svg":"/svg/UserIcon.svg","cjs":"/cjs/UserIcon.js","esm":"/esm/UserIcon.js"},{"name":"UsersIcon","svg":"/svg/UsersIcon.svg","cjs":"/cjs/UsersIcon.js","esm":"/esm/UsersIcon.js"},{"name":"VideoOffIcon","svg":"/svg/VideoOffIcon.svg","cjs":"/cjs/VideoOffIcon.js","esm":"/esm/VideoOffIcon.js"},{"name":"VideoOnIcon","svg":"/svg/VideoOnIcon.svg","cjs":"/cjs/VideoOnIcon.js","esm":"/esm/VideoOnIcon.js"},{"name":"VoiceCapableIcon","svg":"/svg/VoiceCapableIcon.svg","cjs":"/cjs/VoiceCapableIcon.js","esm":"/esm/VoiceCapableIcon.js"},{"name":"VoicemailIcon","svg":"/svg/VoicemailIcon.svg","cjs":"/cjs/VoicemailIcon.js","esm":"/esm/VoicemailIcon.js"},{"name":"VolumeOffIcon","svg":"/svg/VolumeOffIcon.svg","cjs":"/cjs/VolumeOffIcon.js","esm":"/esm/VolumeOffIcon.js"},{"name":"VolumeOnIcon","svg":"/svg/VolumeOnIcon.svg","cjs":"/cjs/VolumeOnIcon.js","esm":"/esm/VolumeOnIcon.js"},{"name":"WarningIcon","svg":"/svg/WarningIcon.svg","cjs":"/cjs/WarningIcon.js","esm":"/esm/WarningIcon.js"},{"name":"WebCapableIcon","svg":"/svg/WebCapableIcon.svg","cjs":"/cjs/WebCapableIcon.js","esm":"/esm/WebCapableIcon.js"},{"name":"ZoomInIcon","svg":"/svg/ZoomInIcon.svg","cjs":"/cjs/ZoomInIcon.js","esm":"/esm/ZoomInIcon.js"}],"deprecatedIcons":[{"name":"CheckmarkCircleIcon","svg":"/svg/CheckmarkCircleIcon.svg","cjs":"/cjs/CheckmarkCircleIcon.js","esm":"/esm/CheckmarkCircleIcon.js"},{"name":"ChevronDisclosureCollapsedIcon","svg":"/svg/ChevronDisclosureCollapsedIcon.svg","cjs":"/cjs/ChevronDisclosureCollapsedIcon.js","esm":"/esm/ChevronDisclosureCollapsedIcon.js"},{"name":"ChevronDisclosureExpandedIcon","svg":"/svg/ChevronDisclosureExpandedIcon.svg","cjs":"/cjs/ChevronDisclosureExpandedIcon.js","esm":"/esm/ChevronDisclosureExpandedIcon.js"},{"name":"CloseCircleIcon","svg":"/svg/CloseCircleIcon.svg","cjs":"/cjs/CloseCircleIcon.js","esm":"/esm/CloseCircleIcon.js"},{"name":"ProductEngagementIntelligencePlatformIcon","svg":"/svg/ProductEngagementIntelligencePlatformIcon.svg","cjs":"/cjs/ProductEngagementIntelligencePlatformIcon.js","esm":"/esm/ProductEngagementIntelligencePlatformIcon.js"},{"name":"ProductPersonasIcon","svg":"/svg/ProductPersonasIcon.svg","cjs":"/cjs/ProductPersonasIcon.js","esm":"/esm/ProductPersonasIcon.js"}]} \ No newline at end of file diff --git a/packages/paste-icons/src/LogoPasteIcon.tsx b/packages/paste-icons/src/LogoPasteIcon.tsx new file mode 100644 index 0000000000..a871a9b530 --- /dev/null +++ b/packages/paste-icons/src/LogoPasteIcon.tsx @@ -0,0 +1,49 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {useUID} from '@twilio-paste/uid-library'; + +import {IconWrapper} from './helpers/IconWrapper'; +import type {IconWrapperProps} from './helpers/IconWrapper'; + +export interface LogoPasteIconProps extends IconWrapperProps { + title?: string; + decorative: boolean; +} + +const LogoPasteIcon = React.forwardRef( + ({as, display, element = 'ICON', size, color, title, decorative}, ref) => { + const titleId = `LogoPasteIcon-${useUID()}`; + + if (!decorative && title == null) { + throw new Error('[LogoPasteIcon]: Missing a title for non-decorative icon.'); + } + + return ( + + + {title ? {title} : null} + + + + ); + } +); + +LogoPasteIcon.displayName = 'LogoPasteIcon'; +export {LogoPasteIcon}; diff --git a/packages/paste-icons/svg/LogoPaste.svg b/packages/paste-icons/svg/LogoPaste.svg new file mode 100644 index 0000000000..42255b35a3 --- /dev/null +++ b/packages/paste-icons/svg/LogoPaste.svg @@ -0,0 +1,3 @@ + + + From 2ac904e5b09a8a959776ee3a75257a179e828d22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Mon, 5 Feb 2024 09:40:57 -0700 Subject: [PATCH 2/9] chore: homehero 1 --- .../customization-landing-page/WhyPaste.tsx | 14 +- .../src/components/homepage/HomeHero.tsx | 123 +++++------- .../src/components/homepage/SearchBox.tsx | 87 +++++++++ .../component-showcase/ColumnOneShowcase.tsx | 178 ++++++++++++++++++ .../component-showcase/ColumnTwoShowcase.tsx | 17 ++ .../component-showcase/ComboboxShowcase.tsx | 38 ++++ .../ProgressStepsShowcase.tsx | 30 +++ .../homepage/component-showcase/index.tsx | 49 +++++ .../src/components/site-wrapper/SiteBody.tsx | 4 +- .../site-wrapper/site-header/index.tsx | 2 +- 10 files changed, 458 insertions(+), 84 deletions(-) create mode 100644 packages/paste-website/src/components/homepage/SearchBox.tsx create mode 100644 packages/paste-website/src/components/homepage/component-showcase/ColumnOneShowcase.tsx create mode 100644 packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx create mode 100644 packages/paste-website/src/components/homepage/component-showcase/ComboboxShowcase.tsx create mode 100644 packages/paste-website/src/components/homepage/component-showcase/ProgressStepsShowcase.tsx create mode 100644 packages/paste-website/src/components/homepage/component-showcase/index.tsx diff --git a/packages/paste-website/src/components/customization-landing-page/WhyPaste.tsx b/packages/paste-website/src/components/customization-landing-page/WhyPaste.tsx index ffdbedef22..6c6189d024 100644 --- a/packages/paste-website/src/components/customization-landing-page/WhyPaste.tsx +++ b/packages/paste-website/src/components/customization-landing-page/WhyPaste.tsx @@ -8,7 +8,7 @@ import { DoodleLoopArrowLarge } from "../../assets/illustrations/DoodleLoopArrow import WhyPasteMobile from "../../assets/images/customization/why-paste-mobile.png"; import WhyPasteImg from "../../assets/images/customization/why-paste.png"; import { useDarkModeContext } from "../../context/DarkModeContext"; -import { useSlantedSkew } from "../SlantedBackgroundGradient"; +// import { useSlantedSkew } from "../SlantedBackgroundGradient"; import { A11yIcon } from "../icons/A11yIcon"; import { CustomizableIcon } from "../icons/CustomizableIcon"; import { ThemableIcon } from "../icons/ThemableIcon"; @@ -16,7 +16,7 @@ import { LandingPageSection, LandingPageSectionContent } from "./LandingPageLayo import { ReasonBlock } from "./ReasonBlock"; const WhyPasteTopAngle = (): JSX.Element => { - const [skewOffset] = useSlantedSkew(); + // const [skewOffset] = useSlantedSkew(); const { theme } = useDarkModeContext(); return ( @@ -28,7 +28,7 @@ const WhyPasteTopAngle = (): JSX.Element => { left={0} position="absolute" right={0} - top={skewOffset} + // top={skewOffset} transform="skewY(10deg)" transformOrigin="100% 0" zIndex="zIndex0" @@ -37,7 +37,7 @@ const WhyPasteTopAngle = (): JSX.Element => { }; const WhyPasteBottomAngle = (): JSX.Element => { - const [skewOffset] = useSlantedSkew(-0.35); + // const [skewOffset] = useSlantedSkew(-0.35); const { theme } = useDarkModeContext(); return ( @@ -45,7 +45,7 @@ const WhyPasteBottomAngle = (): JSX.Element => { // @ts-expect-error combat semi opaque dark mode token value backgroundColor={theme === "dark" ? "#2a3342" : "colorBackgroundPrimaryWeakest"} borderRadius="borderRadius20" - bottom={skewOffset} + // bottom={skewOffset} height="100%" left={0} position="absolute" @@ -66,8 +66,8 @@ export const WhyPaste = (): JSX.Element => { maxWidth="96%" marginX="auto" > - - + {/* */} + {/* */} diff --git a/packages/paste-website/src/components/homepage/HomeHero.tsx b/packages/paste-website/src/components/homepage/HomeHero.tsx index 340b94cba8..b1983d03e1 100644 --- a/packages/paste-website/src/components/homepage/HomeHero.tsx +++ b/packages/paste-website/src/components/homepage/HomeHero.tsx @@ -1,21 +1,16 @@ import { Anchor } from "@twilio-paste/anchor"; -import { Badge } from "@twilio-paste/badge"; import { Box } from "@twilio-paste/box"; -import { Column, Grid } from "@twilio-paste/grid"; +import { DisplayHeading } from "@twilio-paste/display-heading"; import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; -import { NewIcon } from "@twilio-paste/icons/esm/NewIcon"; import { Text } from "@twilio-paste/text"; import * as React from "react"; import { SITE_CONTENT_MAX_WIDTH } from "../../constants"; import { event } from "../../lib/gtag"; -import { SlantedBackgroundGradient } from "../SlantedBackgroundGradient"; -import { HomeHeroIllustration } from "./HomeHeroIllustration"; -import { NewComponentBanner } from "./NewComponentBanner"; -import { NewComponentBannerLink } from "./NewComponentBannerLink"; -import { NewComponentBannerText } from "./NewComponentBannerText"; +import { SearchBox } from "./SearchBox"; +import { ComponentShowcase } from "./component-showcase"; -const SeeRoadmapAnchor = (): JSX.Element => { +const BouncyAnchor: React.FC<{ text: string; href: string }> = ({ text, href }): JSX.Element => { const [hovered, setHovered] = React.useState(false); const handleMouseEnter = (): void => { @@ -28,8 +23,7 @@ const SeeRoadmapAnchor = (): JSX.Element => { return ( @@ -40,7 +34,7 @@ const SeeRoadmapAnchor = (): JSX.Element => { }) } > - See our roadmap + {text} { transform={hovered ? "translateY(1px) translateX(4px)" : "translateY(1px) translateX(0)"} transition="all 100ms ease" > - + ); @@ -58,72 +52,53 @@ const HomeHero = (): JSX.Element => { return ( - + + + + Paste + + + Build inclusive, delightful customer experiences with Twilio’s open-source design system. + + + - - - - - - New - - The Page Header component is here! - - event({ - category: "Hero", - action: "click-new-banner", - label: "Page header announcement", - }) - } - > - See more - - - - Build inclusive, delightful Twilio customer experiences with Paste. - - - - - - - - - + + - + + ); }; diff --git a/packages/paste-website/src/components/homepage/SearchBox.tsx b/packages/paste-website/src/components/homepage/SearchBox.tsx new file mode 100644 index 0000000000..169ee64fab --- /dev/null +++ b/packages/paste-website/src/components/homepage/SearchBox.tsx @@ -0,0 +1,87 @@ +import { Anchor } from "@twilio-paste/anchor"; +import { Box } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; +import { LogoPasteIcon } from "@twilio-paste/icons/esm/LogoPasteIcon"; +import { SearchIcon } from "@twilio-paste/icons/esm/SearchIcon"; +import { Text } from "@twilio-paste/text"; +import * as React from "react"; + +import { SiteSearch } from "../site-search"; + +const SearchBox: React.FC = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onOpen = (): void => { + setIsOpen(true); + }; + + const onClose = (): void => { + setIsOpen(false); + }; + + return ( + <> + + + + + + Get to know our{" "} + + 100+ + {" "} + components, patterns, and{" "} + templates + + + + + + + + ); +}; + +export { SearchBox }; diff --git a/packages/paste-website/src/components/homepage/component-showcase/ColumnOneShowcase.tsx b/packages/paste-website/src/components/homepage/component-showcase/ColumnOneShowcase.tsx new file mode 100644 index 0000000000..76a200ed38 --- /dev/null +++ b/packages/paste-website/src/components/homepage/component-showcase/ColumnOneShowcase.tsx @@ -0,0 +1,178 @@ +// eslint-disable-next-line eslint-comments/disable-enable-pair +/* eslint-disable react/jsx-max-depth */ +import { Badge } from "@twilio-paste/badge"; +import { Box } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; +import { ButtonGroup } from "@twilio-paste/button-group"; +import { CopyIcon } from "@twilio-paste/icons/esm/CopyIcon"; +import { EditIcon } from "@twilio-paste/icons/esm/EditIcon"; +import { ExportIcon } from "@twilio-paste/icons/esm/ExportIcon"; +import { VoiceCapableIcon } from "@twilio-paste/icons/esm/VoiceCapableIcon"; +import { + StatusMenu, + StatusMenuBadge, + StatusMenuItemChild, + StatusMenuItemRadio, + useStatusMenuState, +} from "@twilio-paste/status"; +import type { StatusBadgeVariants } from "@twilio-paste/status"; +import * as React from "react"; + +import { ComboboxShowcase } from "./ComboboxShowcase"; + +const ProcessObject = { + Success: { + variant: "ProcessSuccess", + children: "Complete", + }, + Neutral: { + variant: "ProcessNeutral", + children: "In review", + }, + Warning: { + variant: "ProcessWarning", + children: "Needs attention", + }, + Error: { + variant: "ProcessError", + children: "Rejected", + }, + InProgress: { + variant: "ProcessInProgress", + children: "In-progress", + }, + Disabled: { + variant: "ProcessDisabled", + children: "Paused", + }, + Draft: { + variant: "ProcessDraft", + children: "Draft", + }, +}; + +export const ColumnOneShowcase: React.FC = () => { + const [process, setProcess] = React.useState(ProcessObject.Success); + const menu = useStatusMenuState(); + const onClick = (status: any): void => { + setProcess(ProcessObject[status as keyof typeof ProcessObject]); + menu.hide(); + }; + return ( + + + + + + + + + + + + Voice + + <> + + {process.children} + + + onClick("Success")} + variant="default" + > + {ProcessObject.Success.children} + + onClick("Neutral")} + variant="default" + > + {ProcessObject.Neutral.children} + + onClick("Warning")} + variant="default" + > + {ProcessObject.Warning.children} + + onClick("Error")} + variant="default" + > + {ProcessObject.Error.children} + + onClick("InProgress")} + variant="default" + > + + {ProcessObject.InProgress.children} + + + onClick("Disabled")} + variant="default" + > + {ProcessObject.Disabled.children} + + onClick("Draft")} + variant="default" + > + {ProcessObject.Draft.children} + + + + + + + ); +}; diff --git a/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx b/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx new file mode 100644 index 0000000000..c069fe868c --- /dev/null +++ b/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx @@ -0,0 +1,17 @@ +import { Box } from "@twilio-paste/box"; +import { Callout, CalloutHeading, CalloutText } from "@twilio-paste/callout"; +import * as React from "react"; + +export const ColumnTwoShowcase: React.FC = () => { + return ( + + + Auto recharge disabled + We recommend enabling auto recharge to keep your account active. + + + box + + + ); +}; diff --git a/packages/paste-website/src/components/homepage/component-showcase/ComboboxShowcase.tsx b/packages/paste-website/src/components/homepage/component-showcase/ComboboxShowcase.tsx new file mode 100644 index 0000000000..e317e272e7 --- /dev/null +++ b/packages/paste-website/src/components/homepage/component-showcase/ComboboxShowcase.tsx @@ -0,0 +1,38 @@ +import { Box } from "@twilio-paste/box"; +import { MultiselectCombobox } from "@twilio-paste/combobox"; +import { Text } from "@twilio-paste/text"; +import * as React from "react"; + +const comboboxItems = ["Javascript", "Python", "Go", "Java", "PHP", "C#", "Swift", "Scala", "HTML", "CSS"]; + +const getFilteredItems = (inputValue: string): string[] => { + const lowerCasedInputValue = inputValue.toLowerCase(); + return comboboxItems.filter(function filterItems(item) { + return item.toLowerCase().includes(lowerCasedInputValue); + }); +}; + +const SampleEmptyState = (): React.ReactElement => ( + + + No results found + + +); + +export const ComboboxShowcase: React.FC = () => { + const [inputValue, setInputValue] = React.useState(""); + const filteredItems = React.useMemo(() => getFilteredItems(inputValue), [inputValue]); + return ( + { + setInputValue(newInputValue); + }} + /> + ); +}; diff --git a/packages/paste-website/src/components/homepage/component-showcase/ProgressStepsShowcase.tsx b/packages/paste-website/src/components/homepage/component-showcase/ProgressStepsShowcase.tsx new file mode 100644 index 0000000000..e99f72a7ca --- /dev/null +++ b/packages/paste-website/src/components/homepage/component-showcase/ProgressStepsShowcase.tsx @@ -0,0 +1,30 @@ +import { + ProgressStepComplete, + ProgressStepCurrent, + ProgressStepIncomplete, + ProgressStepSeparator, + ProgressSteps, +} from "@twilio-paste/progress-steps"; +import * as React from "react"; + +export const ProgressStepsShowcase: React.FC = () => { + return ( + + null}> + Account type + + + null}> + General information + + + null} disabled> + Sender types + + + null} disabled> + Connectivity requirements + + + ); +}; diff --git a/packages/paste-website/src/components/homepage/component-showcase/index.tsx b/packages/paste-website/src/components/homepage/component-showcase/index.tsx new file mode 100644 index 0000000000..f6c51f2a50 --- /dev/null +++ b/packages/paste-website/src/components/homepage/component-showcase/index.tsx @@ -0,0 +1,49 @@ +import { Box } from "@twilio-paste/box"; +import * as React from "react"; + +import { ColumnOneShowcase } from "./ColumnOneShowcase"; +import { ColumnTwoShowcase } from "./ColumnTwoShowcase"; +import { ProgressStepsShowcase } from "./ProgressStepsShowcase"; + +const ComponentShowcase: React.FC = () => { + return ( + + + + + + + + + + + + ); +}; + +export { ComponentShowcase }; diff --git a/packages/paste-website/src/components/site-wrapper/SiteBody.tsx b/packages/paste-website/src/components/site-wrapper/SiteBody.tsx index 8681c2ecbe..cba90c6e04 100644 --- a/packages/paste-website/src/components/site-wrapper/SiteBody.tsx +++ b/packages/paste-website/src/components/site-wrapper/SiteBody.tsx @@ -1,5 +1,5 @@ import { Box } from "@twilio-paste/box"; -import { LogoTwilioIcon } from "@twilio-paste/icons/esm/LogoTwilioIcon"; +import { LogoPasteIcon } from "@twilio-paste/icons/esm/LogoPasteIcon"; import { Sidebar, SidebarBody, @@ -112,7 +112,7 @@ export const SiteBody: React.FC = ({ children }) => { > - + Twilio Paste diff --git a/packages/paste-website/src/components/site-wrapper/site-header/index.tsx b/packages/paste-website/src/components/site-wrapper/site-header/index.tsx index 74dad17f5b..bc6b1ba4a5 100644 --- a/packages/paste-website/src/components/site-wrapper/site-header/index.tsx +++ b/packages/paste-website/src/components/site-wrapper/site-header/index.tsx @@ -44,8 +44,8 @@ export const SiteHeader: React.FC<{ - + From d5265650659e47aa991ea41675b01e71d9a79df1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Mon, 5 Feb 2024 21:37:15 -0700 Subject: [PATCH 3/9] chore: homehero 2 --- .../public/images/avatars/token1.png | Bin 0 -> 17068 bytes .../public/images/avatars/token2.png | Bin 0 -> 12939 bytes .../public/images/avatars/token3.png | Bin 0 -> 14457 bytes .../public/images/avatars/token4.png | Bin 0 -> 15422 bytes .../src/components/homepage/HomeHero.tsx | 94 +++++++----- .../src/components/homepage/SearchBox.tsx | 1 + .../component-showcase/ColumnOneShowcase.tsx | 140 +++++++++++++++++- .../component-showcase/ColumnTwoShowcase.tsx | 73 ++++++++- .../homepage/component-showcase/index.tsx | 15 +- .../src/components/icons/CircleIcon.tsx | 37 +++++ .../site-footer/SiteFooterHeader.tsx | 13 -- .../site-footer/SiteFooterNav.tsx | 4 +- .../site-wrapper/site-footer/index.tsx | 8 +- packages/paste-website/src/pages/index.tsx | 6 +- 14 files changed, 312 insertions(+), 79 deletions(-) create mode 100644 packages/paste-website/public/images/avatars/token1.png create mode 100644 packages/paste-website/public/images/avatars/token2.png create mode 100644 packages/paste-website/public/images/avatars/token3.png create mode 100644 packages/paste-website/public/images/avatars/token4.png create mode 100644 packages/paste-website/src/components/icons/CircleIcon.tsx diff --git a/packages/paste-website/public/images/avatars/token1.png b/packages/paste-website/public/images/avatars/token1.png new file mode 100644 index 0000000000000000000000000000000000000000..17e0707555cbb9e42b856fc2e0c2c6cd8f31e917 GIT binary patch literal 17068 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 literal 0 HcmV?d00001 diff --git a/packages/paste-website/public/images/avatars/token2.png b/packages/paste-website/public/images/avatars/token2.png new file mode 100644 index 0000000000000000000000000000000000000000..b4679f455bab8f20144595aaade7efd2636ee895 GIT binary patch literal 12939 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 literal 0 HcmV?d00001 diff --git a/packages/paste-website/public/images/avatars/token4.png b/packages/paste-website/public/images/avatars/token4.png new file mode 100644 index 0000000000000000000000000000000000000000..357d391bb074072a57119fd3d781644677e9d232 GIT binary patch literal 15422 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 F{s;E3>^cAd literal 0 HcmV?d00001 diff --git a/packages/paste-website/src/components/homepage/HomeHero.tsx b/packages/paste-website/src/components/homepage/HomeHero.tsx index b1983d03e1..d85dc52262 100644 --- a/packages/paste-website/src/components/homepage/HomeHero.tsx +++ b/packages/paste-website/src/components/homepage/HomeHero.tsx @@ -3,10 +3,12 @@ import { Box } from "@twilio-paste/box"; import { DisplayHeading } from "@twilio-paste/display-heading"; import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; import { Text } from "@twilio-paste/text"; +import { useTheme } from "@twilio-paste/theme"; import * as React from "react"; import { SITE_CONTENT_MAX_WIDTH } from "../../constants"; import { event } from "../../lib/gtag"; +import CircleIcon from "../icons/CircleIcon"; import { SearchBox } from "./SearchBox"; import { ComponentShowcase } from "./component-showcase"; @@ -49,56 +51,66 @@ const BouncyAnchor: React.FC<{ text: string; href: string }> = ({ text, href }): }; const HomeHero = (): JSX.Element => { + const theme = useTheme(); return ( - + - - - Paste - - - Build inclusive, delightful customer experiences with Twilio’s open-source design system. - - - - - + + + Paste + + + Build inclusive, delightful customer experiences with Twilio’s open-source design system. + + + + + + + + + + + - ); }; diff --git a/packages/paste-website/src/components/homepage/SearchBox.tsx b/packages/paste-website/src/components/homepage/SearchBox.tsx index 169ee64fab..fbf5975631 100644 --- a/packages/paste-website/src/components/homepage/SearchBox.tsx +++ b/packages/paste-website/src/components/homepage/SearchBox.tsx @@ -22,6 +22,7 @@ const SearchBox: React.FC = () => { return ( <> { const [process, setProcess] = React.useState(ProcessObject.Success); const menu = useStatusMenuState(); + const [switchOn, setSwitchOn] = React.useState(true); const onClick = (status: any): void => { setProcess(ProcessObject[status as keyof typeof ProcessObject]); menu.hide(); }; + const [sliderValue, setSliderValue] = React.useState(50); + const sliderId = useUID(); + const [showDisclosure, setShowDisclosure] = React.useState(true); + const disclosure = useDisclosureState(); + const toggleDisclosure = (): void => setShowDisclosure((state) => !state); + const customDisclosureState = { + ...disclosure, + toggle: toggleDisclosure, + visible: showDisclosure, + }; + return ( - + { rowGap="space70" padding="space70" borderRadius="borderRadius30" + element="FIRST_BOX_COLUMN_1" > @@ -173,6 +215,102 @@ export const ColumnOneShowcase: React.FC = () => { + + setSwitchOn(!switchOn)}> + Enable animations + + + + + + + {""} + + + + + + setSliderValue(newValue)} hideRangeLabels /> + + + + Helpful links + + + + + Icons list + + + + + + + + + + + + + + + + + + + + + + + Tokens list + + + + $color-text-success + + + + $color-text + + + + $color-data-visualization-10 + + + + $color-background-primary + + + + + + ); }; diff --git a/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx b/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx index c069fe868c..f294d3d952 100644 --- a/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx +++ b/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx @@ -1,16 +1,83 @@ +import { Avatar } from "@twilio-paste/avatar"; import { Box } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; import { Callout, CalloutHeading, CalloutText } from "@twilio-paste/callout"; +import { ChatComposer } from "@twilio-paste/chat-composer"; +import { + ChatBookend, + ChatBookendItem, + ChatBubble, + ChatEvent, + ChatLog, + ChatMessage, + ChatMessageMeta, + ChatMessageMetaItem, +} from "@twilio-paste/chat-log"; +import { CheckboxCheckIcon } from "@twilio-paste/icons/esm/CheckboxCheckIcon"; +import { FilterIcon } from "@twilio-paste/icons/esm/FilterIcon"; +import { PlusIcon } from "@twilio-paste/icons/esm/PlusIcon"; import * as React from "react"; export const ColumnTwoShowcase: React.FC = () => { + const [followPressed, setFollowPressed] = React.useState(false); return ( - + Auto recharge disabled We recommend enabling auto recharge to keep your account active. - - box + + + + + + + + + Yesterday + + Chat Started ・ 3:34pm + + + Gibby Radki has joined the chat・3:43pm + + I have shipped the item back, how long will it take to get the refund? + + 3:45pm + + + + Hi Gibby + You should receive the refund within 10 days + Do you need help with anything else? + + Gibby Radki · 3:47pm + + + + { + throw e; + }, + }} + placeholder="Contact Owl Corp" + ariaLabel="A basic chat composer" + /> ); diff --git a/packages/paste-website/src/components/homepage/component-showcase/index.tsx b/packages/paste-website/src/components/homepage/component-showcase/index.tsx index f6c51f2a50..b6f177826d 100644 --- a/packages/paste-website/src/components/homepage/component-showcase/index.tsx +++ b/packages/paste-website/src/components/homepage/component-showcase/index.tsx @@ -10,18 +10,17 @@ const ComponentShowcase: React.FC = () => { = () => { > - - - - - - + + ); }; diff --git a/packages/paste-website/src/components/icons/CircleIcon.tsx b/packages/paste-website/src/components/icons/CircleIcon.tsx new file mode 100644 index 0000000000..a75baa87d8 --- /dev/null +++ b/packages/paste-website/src/components/icons/CircleIcon.tsx @@ -0,0 +1,37 @@ +import { useUID } from "@twilio-paste/uid-library"; +import * as React from "react"; + +export interface CircleIconProps { + className?: string; + size?: number; + color?: string; + title?: string; + decorative?: boolean; +} + +const CircleIcon = React.memo( + ({ title = "Circle Icon", decorative = true, className, color, size }: CircleIconProps) => { + const titleId = useUID(); + return ( + + + {title ? {title} : null} + {/* */} + + + + ); + }, +); + +export default CircleIcon; diff --git a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterHeader.tsx b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterHeader.tsx index c57e993cb4..cece23383e 100644 --- a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterHeader.tsx +++ b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterHeader.tsx @@ -1,5 +1,4 @@ import { Box } from "@twilio-paste/box"; -import { Text } from "@twilio-paste/text"; import { useTheme } from "@twilio-paste/theme"; import HeartDoodleIcon from "../../icons/HeartDoodleIcon"; @@ -19,18 +18,6 @@ const SiteFooterHeader = (): JSX.Element => { color={theme.textColors.colorTextInverse} decorative /> - - Black lives matter. - ); }; diff --git a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterNav.tsx b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterNav.tsx index 625d2dc65e..e7aaf0ec9a 100644 --- a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterNav.tsx +++ b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterNav.tsx @@ -17,7 +17,7 @@ const SiteFooterNav = (): JSX.Element => { as="nav" display="flex" flexDirection={["column", "row"]} - marginLeft={["space0", "space120"]} + // marginLeft={["space0", "space120"]} textAlign={["center", "left"]} > @@ -182,7 +182,7 @@ const SiteFooterNav = (): JSX.Element => { - + { - const router = useRouter(); return ( - {router.pathname === "/" && } diff --git a/packages/paste-website/src/pages/index.tsx b/packages/paste-website/src/pages/index.tsx index e8313e8743..f4c8fe1a82 100644 --- a/packages/paste-website/src/pages/index.tsx +++ b/packages/paste-website/src/pages/index.tsx @@ -32,11 +32,11 @@ const Homepage = ({ navigationData }: InferGetStaticPropsType - + {/* */} - + {/* */} - + {/* */} ); }; From 3543ed0b70e421e8b14bad78ec13587393d32253 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Mon, 5 Feb 2024 23:06:31 -0700 Subject: [PATCH 4/9] chore: themeable --- .../src/components/homepage/HomeHero.tsx | 2 +- .../src/components/homepage/NewSection.tsx | 35 +++++++++++++ .../components/homepage/SectionSeparator.tsx | 27 ++++++++++ .../src/components/homepage/Themeable.tsx | 28 ++++++++++ .../src/components/homepage/WhatsNew.tsx | 51 +++++++++++++++++++ .../homepage/component-showcase/index.tsx | 1 + packages/paste-website/src/pages/index.tsx | 5 +- 7 files changed, 147 insertions(+), 2 deletions(-) create mode 100644 packages/paste-website/src/components/homepage/NewSection.tsx create mode 100644 packages/paste-website/src/components/homepage/SectionSeparator.tsx create mode 100644 packages/paste-website/src/components/homepage/Themeable.tsx create mode 100644 packages/paste-website/src/components/homepage/WhatsNew.tsx diff --git a/packages/paste-website/src/components/homepage/HomeHero.tsx b/packages/paste-website/src/components/homepage/HomeHero.tsx index d85dc52262..95d85824a1 100644 --- a/packages/paste-website/src/components/homepage/HomeHero.tsx +++ b/packages/paste-website/src/components/homepage/HomeHero.tsx @@ -62,7 +62,7 @@ const HomeHero = (): JSX.Element => { maxWidth={SITE_CONTENT_MAX_WIDTH} marginLeft="auto" marginRight="auto" - zIndex="zIndex10" + // zIndex="zIndex10" overflow="hidden" element="HOME_HERO" > diff --git a/packages/paste-website/src/components/homepage/NewSection.tsx b/packages/paste-website/src/components/homepage/NewSection.tsx new file mode 100644 index 0000000000..4aec90ab8d --- /dev/null +++ b/packages/paste-website/src/components/homepage/NewSection.tsx @@ -0,0 +1,35 @@ +import { Anchor } from "@twilio-paste/anchor"; +import { Box } from "@twilio-paste/box"; +import * as React from "react"; + +import { SITE_CONTENT_MAX_WIDTH } from "../../constants"; +import { WhatsNew } from "./WhatsNew"; + +const NewSection: React.FC = (): React.ReactElement => { + return ( + + + + We're hiring a Product Designer! Apply here + + + Read more about our latest release + + + Check out our roadmap + + + + ); +}; + +export { NewSection }; diff --git a/packages/paste-website/src/components/homepage/SectionSeparator.tsx b/packages/paste-website/src/components/homepage/SectionSeparator.tsx new file mode 100644 index 0000000000..67c9a0cd7b --- /dev/null +++ b/packages/paste-website/src/components/homepage/SectionSeparator.tsx @@ -0,0 +1,27 @@ +import { Anchor } from "@twilio-paste/anchor"; +import { Box } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; +import { Heading } from "@twilio-paste/heading"; +import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; +import { LinkExternalIcon } from "@twilio-paste/icons/esm/LinkExternalIcon"; +import { LogoPasteIcon } from "@twilio-paste/icons/esm/LogoPasteIcon"; +import { SearchIcon } from "@twilio-paste/icons/esm/SearchIcon"; +import { Text } from "@twilio-paste/text"; +import * as React from "react"; + +interface SectionSeparatorProps { + children: React.ReactNode; +} + +const SectionSeparator: React.FC = ({ children }) => { + return ( + + + {children} + + + + ); +}; + +export { SectionSeparator }; diff --git a/packages/paste-website/src/components/homepage/Themeable.tsx b/packages/paste-website/src/components/homepage/Themeable.tsx new file mode 100644 index 0000000000..66281e30d2 --- /dev/null +++ b/packages/paste-website/src/components/homepage/Themeable.tsx @@ -0,0 +1,28 @@ +import { Box } from "@twilio-paste/box"; +import { Heading } from "@twilio-paste/heading"; +import * as React from "react"; + +import { SITE_CONTENT_MAX_WIDTH } from "../../constants"; +import { SectionSeparator } from "./SectionSeparator"; + +const Themeable: React.FC = (): React.ReactElement => { + return ( + + + Themeable and composable + + start from anywhere + component and primitive builder + + + + Built with your favorite technologies, Typescript + React + Figma + + ts logo react logo figma logo + + + + ); +}; + +export { Themeable }; diff --git a/packages/paste-website/src/components/homepage/WhatsNew.tsx b/packages/paste-website/src/components/homepage/WhatsNew.tsx new file mode 100644 index 0000000000..9ff966c3a7 --- /dev/null +++ b/packages/paste-website/src/components/homepage/WhatsNew.tsx @@ -0,0 +1,51 @@ +import { Anchor } from "@twilio-paste/anchor"; +import { Box } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; +import { Heading } from "@twilio-paste/heading"; +import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; +import { LinkExternalIcon } from "@twilio-paste/icons/esm/LinkExternalIcon"; +import { LogoPasteIcon } from "@twilio-paste/icons/esm/LogoPasteIcon"; +import { SearchIcon } from "@twilio-paste/icons/esm/SearchIcon"; +import { Text } from "@twilio-paste/text"; +import * as React from "react"; + +interface WhatsNewProps { + children: React.ReactNode; + showExternal?: boolean; + href: string; +} + +const WhatsNew: React.FC = ({ showExternal, href, children }) => { + return ( + + + {children} + + + + ); +}; + +export { WhatsNew }; diff --git a/packages/paste-website/src/components/homepage/component-showcase/index.tsx b/packages/paste-website/src/components/homepage/component-showcase/index.tsx index b6f177826d..f65cfd3e02 100644 --- a/packages/paste-website/src/components/homepage/component-showcase/index.tsx +++ b/packages/paste-website/src/components/homepage/component-showcase/index.tsx @@ -23,6 +23,7 @@ const ComponentShowcase: React.FC = () => { width="fit-content" borderBottomLeftRadius="borderRadius30" borderBottomRightRadius="borderRadius30" + zIndex="zIndex10" element="COMPONENT_SHOWCASE" > - {/* */} + + {/* */} From 7d0d94b4d5d1eb001f32dff4104803b1defa6f28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Wed, 7 Feb 2024 10:18:50 -0700 Subject: [PATCH 5/9] chore: rough draft 1 --- .../__snapshots__/icons.spec.tsx.snap | 1 + .../src/assets/illustrations/figma-logo.svg | 14 ++ .../src/assets/illustrations/footer_img.svg | 215 ++++++++++++++++++ .../assets/illustrations/illo_design-tool.svg | 12 + .../src/assets/illustrations/puzzle_illo.svg | 144 ++++++++++++ .../src/assets/illustrations/react-logo.svg | 10 + .../src/assets/illustrations/token_colors.svg | 9 + .../src/assets/illustrations/ts-logo.svg | 11 + .../customization-landing-page/WhyPaste.tsx | 46 ---- .../src/components/homepage/Accessibility.tsx | 143 ++++++++++++ .../src/components/homepage/BouncyAnchor.tsx | 33 +++ .../homepage/CommunityOfBuilders.tsx | 69 ++++++ .../components/homepage/DesignEfficiency.tsx | 51 +++++ .../homepage/ForTwilioCustomers.tsx | 76 +++++++ .../src/components/homepage/HomeHero.tsx | 44 +--- .../components/homepage/SectionSeparator.tsx | 12 +- .../src/components/homepage/Templates.tsx | 75 ++++++ .../src/components/homepage/Themeable.tsx | 74 +++++- .../components/homepage/WeDoTheThinking.tsx | 64 ++++++ .../src/components/homepage/WhatsNew.tsx | 4 - .../component-showcase/ColumnTwoShowcase.tsx | 6 +- .../homepage/component-showcase/index.tsx | 8 +- .../src/components/icons/HeartDoodleIcon.tsx | 4 +- .../site-footer/SiteFooterIllustration.tsx | 6 +- .../site-footer/SiteFooterNav.tsx | 106 +++++---- .../site-footer/SiteFooterTopAngle.tsx | 24 -- .../site-wrapper/site-footer/index.tsx | 10 +- packages/paste-website/src/pages/index.tsx | 19 +- 28 files changed, 1090 insertions(+), 200 deletions(-) create mode 100644 packages/paste-website/src/assets/illustrations/figma-logo.svg create mode 100644 packages/paste-website/src/assets/illustrations/footer_img.svg create mode 100644 packages/paste-website/src/assets/illustrations/illo_design-tool.svg create mode 100644 packages/paste-website/src/assets/illustrations/puzzle_illo.svg create mode 100644 packages/paste-website/src/assets/illustrations/react-logo.svg create mode 100644 packages/paste-website/src/assets/illustrations/token_colors.svg create mode 100644 packages/paste-website/src/assets/illustrations/ts-logo.svg create mode 100644 packages/paste-website/src/components/homepage/Accessibility.tsx create mode 100644 packages/paste-website/src/components/homepage/BouncyAnchor.tsx create mode 100644 packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx create mode 100644 packages/paste-website/src/components/homepage/DesignEfficiency.tsx create mode 100644 packages/paste-website/src/components/homepage/ForTwilioCustomers.tsx create mode 100644 packages/paste-website/src/components/homepage/Templates.tsx create mode 100644 packages/paste-website/src/components/homepage/WeDoTheThinking.tsx delete mode 100644 packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterTopAngle.tsx diff --git a/packages/paste-icons/__test__/__snapshots__/icons.spec.tsx.snap b/packages/paste-icons/__test__/__snapshots__/icons.spec.tsx.snap index 3803af3898..6405af3204 100644 --- a/packages/paste-icons/__test__/__snapshots__/icons.spec.tsx.snap +++ b/packages/paste-icons/__test__/__snapshots__/icons.spec.tsx.snap @@ -113,6 +113,7 @@ Array [ "LockIcon", "LogInIcon", "LogOutIcon", + "LogoPasteIcon", "LogoTwilioIcon", "LowerHandIcon", "MMSCapableIcon", diff --git a/packages/paste-website/src/assets/illustrations/figma-logo.svg b/packages/paste-website/src/assets/illustrations/figma-logo.svg new file mode 100644 index 0000000000..c989da3922 --- /dev/null +++ b/packages/paste-website/src/assets/illustrations/figma-logo.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/paste-website/src/assets/illustrations/footer_img.svg b/packages/paste-website/src/assets/illustrations/footer_img.svg new file mode 100644 index 0000000000..337de8c2e9 --- /dev/null +++ b/packages/paste-website/src/assets/illustrations/footer_img.svg @@ -0,0 +1,215 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/paste-website/src/assets/illustrations/illo_design-tool.svg b/packages/paste-website/src/assets/illustrations/illo_design-tool.svg new file mode 100644 index 0000000000..4d9042256d --- /dev/null +++ b/packages/paste-website/src/assets/illustrations/illo_design-tool.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/paste-website/src/assets/illustrations/puzzle_illo.svg b/packages/paste-website/src/assets/illustrations/puzzle_illo.svg new file mode 100644 index 0000000000..02654e3b28 --- /dev/null +++ b/packages/paste-website/src/assets/illustrations/puzzle_illo.svg @@ -0,0 +1,144 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/paste-website/src/assets/illustrations/react-logo.svg b/packages/paste-website/src/assets/illustrations/react-logo.svg new file mode 100644 index 0000000000..08a91554af --- /dev/null +++ b/packages/paste-website/src/assets/illustrations/react-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/paste-website/src/assets/illustrations/token_colors.svg b/packages/paste-website/src/assets/illustrations/token_colors.svg new file mode 100644 index 0000000000..0cddc9aea7 --- /dev/null +++ b/packages/paste-website/src/assets/illustrations/token_colors.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/paste-website/src/assets/illustrations/ts-logo.svg b/packages/paste-website/src/assets/illustrations/ts-logo.svg new file mode 100644 index 0000000000..a6ceb183a9 --- /dev/null +++ b/packages/paste-website/src/assets/illustrations/ts-logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/paste-website/src/components/customization-landing-page/WhyPaste.tsx b/packages/paste-website/src/components/customization-landing-page/WhyPaste.tsx index 6c6189d024..c1e33fe631 100644 --- a/packages/paste-website/src/components/customization-landing-page/WhyPaste.tsx +++ b/packages/paste-website/src/components/customization-landing-page/WhyPaste.tsx @@ -7,56 +7,12 @@ import Image from "next/image"; import { DoodleLoopArrowLarge } from "../../assets/illustrations/DoodleLoopArrowLarge"; import WhyPasteMobile from "../../assets/images/customization/why-paste-mobile.png"; import WhyPasteImg from "../../assets/images/customization/why-paste.png"; -import { useDarkModeContext } from "../../context/DarkModeContext"; -// import { useSlantedSkew } from "../SlantedBackgroundGradient"; import { A11yIcon } from "../icons/A11yIcon"; import { CustomizableIcon } from "../icons/CustomizableIcon"; import { ThemableIcon } from "../icons/ThemableIcon"; import { LandingPageSection, LandingPageSectionContent } from "./LandingPageLayoutUtils"; import { ReasonBlock } from "./ReasonBlock"; -const WhyPasteTopAngle = (): JSX.Element => { - // const [skewOffset] = useSlantedSkew(); - const { theme } = useDarkModeContext(); - - return ( - - ); -}; - -const WhyPasteBottomAngle = (): JSX.Element => { - // const [skewOffset] = useSlantedSkew(-0.35); - const { theme } = useDarkModeContext(); - - return ( - - ); -}; - export const WhyPaste = (): JSX.Element => { return ( { maxWidth="96%" marginX="auto" > - {/* */} - {/* */} diff --git a/packages/paste-website/src/components/homepage/Accessibility.tsx b/packages/paste-website/src/components/homepage/Accessibility.tsx new file mode 100644 index 0000000000..48035e948a --- /dev/null +++ b/packages/paste-website/src/components/homepage/Accessibility.tsx @@ -0,0 +1,143 @@ +// eslint-disable-next-line eslint-comments/disable-enable-pair +/* eslint-disable react/jsx-max-depth */ +import { Box } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; +import { Heading } from "@twilio-paste/heading"; +import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; +import { ListItem, UnorderedList } from "@twilio-paste/list"; +import { + Modal, + ModalBody, + ModalContext, + ModalDialogContent, + ModalFooter, + ModalFooterActions, + ModalHeader, + ModalHeading, +} from "@twilio-paste/modal"; +import { Paragraph } from "@twilio-paste/paragraph"; +import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@twilio-paste/tabs"; +import { useUID } from "@twilio-paste/uid-library"; +import * as React from "react"; + +import { SITE_CONTENT_MAX_WIDTH } from "../../constants"; +import { BouncyAnchor } from "./BouncyAnchor"; +import { SectionSeparator } from "./SectionSeparator"; + +const Accessibility: React.FC = (): React.ReactElement => { + const selectedTabId = useUID(); + const [modalIsOpen, setModalIsOpen] = React.useState(true); + const onDismiss = (): void => setModalIsOpen(false); + const onOpenModal = (): void => setModalIsOpen(true); + const modalHeadingID = useUID(); + + return ( + + + Accessibility + + + + What we talk about when we talk about accessibility + + + Accessibility is more than just color contrast. We believe in designing for each user, not just “all + users”. We build with these considerations in mind: + + + Screen magnification, voice dictation, color blindness, and those who require help with fine motor + control. + + Semantic HTML to better communicate with assistive technologies. + UI controls that are designed to be instantly recognizable and easy to see. + + Keyboard navigation and focus management to allow task completion through a variety of input devices. + + + + + + + + + Focus management + Screen reader support + Keyboard support + + + + + + + + + Focus management + + + + All elements required to interact with the modal, including closing or acknowledging it, are + contained in the modal since they trap focus, and users can't interact with the + underlying page. + + + + + + + + + + + + + + screen reader support + + + + + keyboard support + + + + + + + + + ); +}; + +export { Accessibility }; diff --git a/packages/paste-website/src/components/homepage/BouncyAnchor.tsx b/packages/paste-website/src/components/homepage/BouncyAnchor.tsx new file mode 100644 index 0000000000..d3a7576719 --- /dev/null +++ b/packages/paste-website/src/components/homepage/BouncyAnchor.tsx @@ -0,0 +1,33 @@ +import { Anchor } from "@twilio-paste/anchor"; +import { Box } from "@twilio-paste/box"; +import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; +import * as React from "react"; + +const BouncyAnchor: React.FC<{ text: string; href: string }> = ({ text, href }): JSX.Element => { + const [hovered, setHovered] = React.useState(false); + + const handleMouseEnter = (): void => { + setHovered(true); + }; + const handleMouseLeave = (): void => { + setHovered(false); + }; + + return ( + + + {text} + + + + + + ); +}; + +export { BouncyAnchor }; diff --git a/packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx b/packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx new file mode 100644 index 0000000000..7963069bbb --- /dev/null +++ b/packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx @@ -0,0 +1,69 @@ +import { Box } from "@twilio-paste/box"; +import { Heading } from "@twilio-paste/heading"; +import { Text } from "@twilio-paste/text"; +import Image from "next/image"; +import * as React from "react"; + +import DesignTool from "../../assets/illustrations/illo_design-tool.svg"; +import { SITE_CONTENT_MAX_WIDTH } from "../../constants"; + +const StatBox: React.FC<{ stat: string; description: string }> = ({ stat, description }): React.ReactElement => { + return ( + + + {stat} + + + {description} + + + ); +}; + +const CommunityOfBuilders: React.FC = (): React.ReactElement => { + return ( + + + + + + Join our community of builders + + + + + + + + + + + + + + + ); +}; + +export { CommunityOfBuilders }; diff --git a/packages/paste-website/src/components/homepage/DesignEfficiency.tsx b/packages/paste-website/src/components/homepage/DesignEfficiency.tsx new file mode 100644 index 0000000000..74cabde30e --- /dev/null +++ b/packages/paste-website/src/components/homepage/DesignEfficiency.tsx @@ -0,0 +1,51 @@ +import { Box } from "@twilio-paste/box"; +import { Heading } from "@twilio-paste/heading"; +import { LinkExternalIcon } from "@twilio-paste/icons/esm/LinkExternalIcon"; +import { Paragraph } from "@twilio-paste/paragraph"; +import { Text } from "@twilio-paste/text"; +import Image from "next/image"; +import * as React from "react"; + +import TokenColors from "../../assets/illustrations/token_colors.svg"; +import { SITE_CONTENT_MAX_WIDTH } from "../../constants"; +import { SectionSeparator } from "./SectionSeparator"; + +const DesignEfficiency: React.FC = (): React.ReactElement => { + return ( + + + Design efficiency + + + + Built by designers, for designers + + 1-to-1 code and design libraries means production-ready design prototypes, too. + + With our libraries, you can swap themes easily with Figma variable modes, and prep design files for + efficient design and engineering collaboration. + + + Find us on Figma Community + + icons icons icons icons icons + + + + + + + + ); +}; + +export { DesignEfficiency }; diff --git a/packages/paste-website/src/components/homepage/ForTwilioCustomers.tsx b/packages/paste-website/src/components/homepage/ForTwilioCustomers.tsx new file mode 100644 index 0000000000..c2319a7c1d --- /dev/null +++ b/packages/paste-website/src/components/homepage/ForTwilioCustomers.tsx @@ -0,0 +1,76 @@ +import { Box } from "@twilio-paste/box"; +import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; +import { Text } from "@twilio-paste/text"; +import Image from "next/image"; +import * as React from "react"; + +import PuzzleIllo from "../../assets/illustrations/puzzle_illo.svg"; + +const ForTwilioCustomers: React.FC = (): React.ReactElement => { + return ( + + + + + For Twilio customers + + + Some blurb here that’s basically a quick setup guide for customers. + + + Eng quick start + + + Customization overview + + + Figma Community file + + + + + + + + ); +}; + +export { ForTwilioCustomers }; diff --git a/packages/paste-website/src/components/homepage/HomeHero.tsx b/packages/paste-website/src/components/homepage/HomeHero.tsx index 95d85824a1..2368321805 100644 --- a/packages/paste-website/src/components/homepage/HomeHero.tsx +++ b/packages/paste-website/src/components/homepage/HomeHero.tsx @@ -1,55 +1,14 @@ -import { Anchor } from "@twilio-paste/anchor"; import { Box } from "@twilio-paste/box"; import { DisplayHeading } from "@twilio-paste/display-heading"; -import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; import { Text } from "@twilio-paste/text"; import { useTheme } from "@twilio-paste/theme"; -import * as React from "react"; import { SITE_CONTENT_MAX_WIDTH } from "../../constants"; -import { event } from "../../lib/gtag"; import CircleIcon from "../icons/CircleIcon"; +import { BouncyAnchor } from "./BouncyAnchor"; import { SearchBox } from "./SearchBox"; import { ComponentShowcase } from "./component-showcase"; -const BouncyAnchor: React.FC<{ text: string; href: string }> = ({ text, href }): JSX.Element => { - const [hovered, setHovered] = React.useState(false); - - const handleMouseEnter = (): void => { - setHovered(true); - }; - const handleMouseLeave = (): void => { - setHovered(false); - }; - - return ( - - - event({ - category: "Hero", - action: "click-see-roadmap", - label: "See our roadmap", - }) - } - > - {text} - - - - - - ); -}; - const HomeHero = (): JSX.Element => { const theme = useTheme(); return ( @@ -62,7 +21,6 @@ const HomeHero = (): JSX.Element => { maxWidth={SITE_CONTENT_MAX_WIDTH} marginLeft="auto" marginRight="auto" - // zIndex="zIndex10" overflow="hidden" element="HOME_HERO" > diff --git a/packages/paste-website/src/components/homepage/SectionSeparator.tsx b/packages/paste-website/src/components/homepage/SectionSeparator.tsx index 67c9a0cd7b..1f27d3e396 100644 --- a/packages/paste-website/src/components/homepage/SectionSeparator.tsx +++ b/packages/paste-website/src/components/homepage/SectionSeparator.tsx @@ -1,21 +1,15 @@ -import { Anchor } from "@twilio-paste/anchor"; import { Box } from "@twilio-paste/box"; -import { Button } from "@twilio-paste/button"; -import { Heading } from "@twilio-paste/heading"; -import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; -import { LinkExternalIcon } from "@twilio-paste/icons/esm/LinkExternalIcon"; -import { LogoPasteIcon } from "@twilio-paste/icons/esm/LogoPasteIcon"; -import { SearchIcon } from "@twilio-paste/icons/esm/SearchIcon"; import { Text } from "@twilio-paste/text"; import * as React from "react"; interface SectionSeparatorProps { children: React.ReactNode; + gridArea?: string; } -const SectionSeparator: React.FC = ({ children }) => { +const SectionSeparator: React.FC = ({ children, gridArea }) => { return ( - + {children} diff --git a/packages/paste-website/src/components/homepage/Templates.tsx b/packages/paste-website/src/components/homepage/Templates.tsx new file mode 100644 index 0000000000..a05852fb41 --- /dev/null +++ b/packages/paste-website/src/components/homepage/Templates.tsx @@ -0,0 +1,75 @@ +import { Box } from "@twilio-paste/box"; +import { Heading } from "@twilio-paste/heading"; +import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; +import { Pagination, PaginationArrow, PaginationItems } from "@twilio-paste/pagination"; +import { Text } from "@twilio-paste/text"; +import * as React from "react"; + +import { SITE_CONTENT_MAX_WIDTH } from "../../constants"; + +const Templates: React.FC = (): React.ReactElement => { + return ( + + + + + Explore our templates + + + Page templates bring a collection of components and patterns together into full-page layouts to drive + cohesion across our platforms. + + + + Get inspired by these examples of Paste templates in use, and start building your customer experiences + today. + + + Check out our templates + + + + + templates carousel + + + + + + + + + + + ); +}; + +export { Templates }; diff --git a/packages/paste-website/src/components/homepage/Themeable.tsx b/packages/paste-website/src/components/homepage/Themeable.tsx index 66281e30d2..6000daed60 100644 --- a/packages/paste-website/src/components/homepage/Themeable.tsx +++ b/packages/paste-website/src/components/homepage/Themeable.tsx @@ -1,24 +1,82 @@ import { Box } from "@twilio-paste/box"; import { Heading } from "@twilio-paste/heading"; +import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; +import { Text } from "@twilio-paste/text"; +import Image from "next/image"; import * as React from "react"; +import FigmaLogo from "../../assets/illustrations/figma-logo.svg"; +import ReactLogo from "../../assets/illustrations/react-logo.svg"; +import TypescriptLogo from "../../assets/illustrations/ts-logo.svg"; import { SITE_CONTENT_MAX_WIDTH } from "../../constants"; import { SectionSeparator } from "./SectionSeparator"; const Themeable: React.FC = (): React.ReactElement => { return ( - - - Themeable and composable - - start from anywhere - component and primitive builder + + + Themeable and composable + + + + + Start from anywhere + + + With Paste, you can get production-ready experiences up in minutes with our 80+ styled components and + pre-built themes. + + + + Or get complete control by bringing your own theme and creating custom components with our functional + primitives. + + + + Check out our templates + + + + component and primitive builder + + - + Built with your favorite technologies, Typescript + React + Figma - ts logo react logo figma logo + + + + + diff --git a/packages/paste-website/src/components/homepage/WeDoTheThinking.tsx b/packages/paste-website/src/components/homepage/WeDoTheThinking.tsx new file mode 100644 index 0000000000..01917b33c0 --- /dev/null +++ b/packages/paste-website/src/components/homepage/WeDoTheThinking.tsx @@ -0,0 +1,64 @@ +import { Box } from "@twilio-paste/box"; +import { Heading } from "@twilio-paste/heading"; +import { CheckboxCheckIcon } from "@twilio-paste/icons/esm/CheckboxCheckIcon"; +import { Paragraph } from "@twilio-paste/paragraph"; +import { Text } from "@twilio-paste/text"; +import * as React from "react"; + +const ThinkingLine: React.FC<{ children: React.ReactNode }> = ({ children }): React.ReactElement => { + return ( + + + + + + {children} + + + ); +}; + +const WeDoTheThinking: React.FC = (): React.ReactElement => { + return ( + + + + We do the thinking so you don't have to + + + Creating seamless and accessible user experiences can be a tough task. But we help you simplify the journey. + + + Paste handles the research, design, testing, and engineering of the core building blocks. This frees up your + energy to tackle customer challenges instead of UI issues. + + + Accessibility standards + User research + Competitive analysis + Product requirements + Design & API review + Usage guidelines + Built-in constraints + Dos and Dont's + Performance + + + + ); +}; + +export { WeDoTheThinking }; diff --git a/packages/paste-website/src/components/homepage/WhatsNew.tsx b/packages/paste-website/src/components/homepage/WhatsNew.tsx index 9ff966c3a7..6de29ff5d7 100644 --- a/packages/paste-website/src/components/homepage/WhatsNew.tsx +++ b/packages/paste-website/src/components/homepage/WhatsNew.tsx @@ -1,12 +1,8 @@ -import { Anchor } from "@twilio-paste/anchor"; import { Box } from "@twilio-paste/box"; import { Button } from "@twilio-paste/button"; import { Heading } from "@twilio-paste/heading"; import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; import { LinkExternalIcon } from "@twilio-paste/icons/esm/LinkExternalIcon"; -import { LogoPasteIcon } from "@twilio-paste/icons/esm/LogoPasteIcon"; -import { SearchIcon } from "@twilio-paste/icons/esm/SearchIcon"; -import { Text } from "@twilio-paste/text"; import * as React from "react"; interface WhatsNewProps { diff --git a/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx b/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx index f294d3d952..8dd66b59d7 100644 --- a/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx +++ b/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx @@ -16,6 +16,7 @@ import { import { CheckboxCheckIcon } from "@twilio-paste/icons/esm/CheckboxCheckIcon"; import { FilterIcon } from "@twilio-paste/icons/esm/FilterIcon"; import { PlusIcon } from "@twilio-paste/icons/esm/PlusIcon"; +import { UserIcon } from "@twilio-paste/icons/esm/UserIcon"; import * as React from "react"; export const ColumnTwoShowcase: React.FC = () => { @@ -64,7 +65,10 @@ export const ColumnTwoShowcase: React.FC = () => { You should receive the refund within 10 days Do you need help with anything else? - Gibby Radki · 3:47pm + + + Gibby Radki · 3:47pm + diff --git a/packages/paste-website/src/components/homepage/component-showcase/index.tsx b/packages/paste-website/src/components/homepage/component-showcase/index.tsx index f65cfd3e02..e2d2cde4b1 100644 --- a/packages/paste-website/src/components/homepage/component-showcase/index.tsx +++ b/packages/paste-website/src/components/homepage/component-showcase/index.tsx @@ -21,8 +21,12 @@ const ComponentShowcase: React.FC = () => { top="0" height="min-content" width="fit-content" - borderBottomLeftRadius="borderRadius30" - borderBottomRightRadius="borderRadius30" + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-expect-error + borderBottomLeftRadius="32px" + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-expect-error + borderBottomRightRadius="32px" zIndex="zIndex10" element="COMPONENT_SHOWCASE" > diff --git a/packages/paste-website/src/components/icons/HeartDoodleIcon.tsx b/packages/paste-website/src/components/icons/HeartDoodleIcon.tsx index 0575d9943b..fbf3fc066e 100644 --- a/packages/paste-website/src/components/icons/HeartDoodleIcon.tsx +++ b/packages/paste-website/src/components/icons/HeartDoodleIcon.tsx @@ -17,15 +17,15 @@ const HeartDoodleIcon = React.memo( {title ? {title} : null} diff --git a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterIllustration.tsx b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterIllustration.tsx index 60311ac23a..c7d620bfa7 100644 --- a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterIllustration.tsx +++ b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterIllustration.tsx @@ -2,13 +2,13 @@ import { Box } from "@twilio-paste/box"; import { useTheme } from "@twilio-paste/theme"; import Image from "next/image"; -import FooterBuildingBlocks from "../../../assets/illustrations/footer_building_blocks.svg"; +import FooterImg from "../../../assets/illustrations/footer_img.svg"; const SiteFooterIllustration = (): JSX.Element => { const theme = useTheme(); return ( - - + + ); }; diff --git a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterNav.tsx b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterNav.tsx index e7aaf0ec9a..1b612a42e9 100644 --- a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterNav.tsx +++ b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterNav.tsx @@ -1,6 +1,7 @@ import { Anchor } from "@twilio-paste/anchor"; import { Box } from "@twilio-paste/box"; import { Stack } from "@twilio-paste/stack"; +import { Text } from "@twilio-paste/text"; import { useTheme } from "@twilio-paste/theme"; import { FIGMA_PROFILE_URL, REMIX_DOMAIN, STORYBOOK_DOMAIN } from "../../../constants"; @@ -17,11 +18,14 @@ const SiteFooterNav = (): JSX.Element => { as="nav" display="flex" flexDirection={["column", "row"]} - // marginLeft={["space0", "space120"]} + marginBottom="space130" textAlign={["center", "left"]} > - + + + Learn more + { About event({ category: "Footer", - action: "click-our-roadmap", - label: "Our roadmap", + action: "click-design-guidelines", + label: "Design guidelines", }) } > - Our roadmap + Design guidelines event({ category: "Footer", - action: "click-design-guidelines", - label: "Design guidelines", + action: "click-quickstart", + label: "Quick Start for engineers", }) } > - Design guidelines + Quick start for engineers event({ category: "Footer", - action: "click-quickstart", - label: "Quick Start", + action: "click-our-roadmap", + label: "Roadmap", }) } > - Quick start + Roadmap - + + + Get help + event({ category: "Footer", - action: "click-github", - label: "Github", + action: "click-github-discussions", + label: "Github discussions", }) } > - Github + Ask a question event({ category: "Footer", - action: "click-figma", - label: "Figma", + action: "click-report-a-bug", + label: "Report a bug", }) } > - Figma + Report a bug event({ category: "Footer", - action: "click-storybook", - label: "Storybook", + action: "click-how-we-work", + label: "How we work", }) } > - Storybook + How we work + + + + + + Build with Paste + event({ category: "Footer", - action: "click-remix", - label: "Theme Designer", + action: "click-github", + label: "Github", }) } > - Paste Remix + Github - - - - event({ category: "Footer", - action: "click-get-support", - label: "Get support", + action: "click-figma", + label: "Figma", }) } > - Get support + Figma event({ category: "Footer", - action: "click-report-a-bug", - label: "Report a bug", + action: "click-storybook", + label: "Storybook", }) } > - Report a bug + Storybook event({ category: "Footer", - action: "click-how-we-work", - label: "How we work", + action: "click-remix", + label: "Theme Designer", }) } > - How we work + Paste Remix diff --git a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterTopAngle.tsx b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterTopAngle.tsx deleted file mode 100644 index 238c7ab4aa..0000000000 --- a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterTopAngle.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Box } from "@twilio-paste/box"; - -import { useSlantedSkew } from "../../SlantedBackgroundGradient"; - -const SiteFooterTopAngle = (): JSX.Element => { - const [skewOffset] = useSlantedSkew(); - - return ( - - ); -}; - -export { SiteFooterTopAngle }; diff --git a/packages/paste-website/src/components/site-wrapper/site-footer/index.tsx b/packages/paste-website/src/components/site-wrapper/site-footer/index.tsx index d224f722ed..c963c01511 100644 --- a/packages/paste-website/src/components/site-wrapper/site-footer/index.tsx +++ b/packages/paste-website/src/components/site-wrapper/site-footer/index.tsx @@ -6,18 +6,18 @@ import { SiteFooterNav } from "./SiteFooterNav"; const SiteFooter: React.FC = () => { return ( - + diff --git a/packages/paste-website/src/pages/index.tsx b/packages/paste-website/src/pages/index.tsx index cefd069952..0c1af20245 100644 --- a/packages/paste-website/src/pages/index.tsx +++ b/packages/paste-website/src/pages/index.tsx @@ -1,14 +1,18 @@ +import { Box } from "@twilio-paste/box"; import type { GetStaticProps, InferGetStaticPropsType } from "next"; import Head from "next/head"; import * as React from "react"; import VisibilitySensor from "react-visibility-sensor"; -import { Experiment } from "../components/homepage/Experiment"; -import { GetStarted } from "../components/homepage/GetStarted"; +import { Accessibility } from "../components/homepage/Accessibility"; +import { CommunityOfBuilders } from "../components/homepage/CommunityOfBuilders"; +import { DesignEfficiency } from "../components/homepage/DesignEfficiency"; +import { ForTwilioCustomers } from "../components/homepage/ForTwilioCustomers"; import { HomeHero } from "../components/homepage/HomeHero"; import { NewSection } from "../components/homepage/NewSection"; -import { PopularComponentsAndPatterns } from "../components/homepage/Popular"; +import { Templates } from "../components/homepage/Templates"; import { Themeable } from "../components/homepage/Themeable"; +import { WeDoTheThinking } from "../components/homepage/WeDoTheThinking"; import { SiteWrapper } from "../components/site-wrapper"; import { SiteMetaDefaults } from "../constants"; import { getNavigationData } from "../utils/api"; @@ -36,10 +40,15 @@ const Homepage = ({ navigationData }: InferGetStaticPropsType + + + + + + - {/* */} + - {/* */} ); }; From 6ebf29bad384c6e8f0f35d4ff17e4c7cb08075ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Wed, 7 Feb 2024 10:47:26 -0700 Subject: [PATCH 6/9] chore: format --- packages/paste-icons/src/LogoPasteIcon.tsx | 18 +++++++++--------- .../src/components/homepage/Accessibility.tsx | 5 ++--- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/packages/paste-icons/src/LogoPasteIcon.tsx b/packages/paste-icons/src/LogoPasteIcon.tsx index a871a9b530..4aa92e1199 100644 --- a/packages/paste-icons/src/LogoPasteIcon.tsx +++ b/packages/paste-icons/src/LogoPasteIcon.tsx @@ -1,11 +1,11 @@ +import { useUID } from "@twilio-paste/uid-library"; /** * This file was automatically generated with @twilio-labs/svg-to-react */ -import * as React from 'react'; -import {useUID} from '@twilio-paste/uid-library'; +import * as React from "react"; -import {IconWrapper} from './helpers/IconWrapper'; -import type {IconWrapperProps} from './helpers/IconWrapper'; +import { IconWrapper } from "./helpers/IconWrapper"; +import type { IconWrapperProps } from "./helpers/IconWrapper"; export interface LogoPasteIconProps extends IconWrapperProps { title?: string; @@ -13,11 +13,11 @@ export interface LogoPasteIconProps extends IconWrapperProps { } const LogoPasteIcon = React.forwardRef( - ({as, display, element = 'ICON', size, color, title, decorative}, ref) => { + ({ as, display, element = "ICON", size, color, title, decorative }, ref) => { const titleId = `LogoPasteIcon-${useUID()}`; if (!decorative && title == null) { - throw new Error('[LogoPasteIcon]: Missing a title for non-decorative icon.'); + throw new Error("[LogoPasteIcon]: Missing a title for non-decorative icon."); } return ( @@ -42,8 +42,8 @@ const LogoPasteIcon = React.forwardRef( ); - } + }, ); -LogoPasteIcon.displayName = 'LogoPasteIcon'; -export {LogoPasteIcon}; +LogoPasteIcon.displayName = "LogoPasteIcon"; +export { LogoPasteIcon }; diff --git a/packages/paste-website/src/components/homepage/Accessibility.tsx b/packages/paste-website/src/components/homepage/Accessibility.tsx index 48035e948a..8750983fec 100644 --- a/packages/paste-website/src/components/homepage/Accessibility.tsx +++ b/packages/paste-website/src/components/homepage/Accessibility.tsx @@ -6,7 +6,6 @@ import { Heading } from "@twilio-paste/heading"; import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; import { ListItem, UnorderedList } from "@twilio-paste/list"; import { - Modal, ModalBody, ModalContext, ModalDialogContent, @@ -28,7 +27,7 @@ const Accessibility: React.FC = (): React.ReactElement => { const selectedTabId = useUID(); const [modalIsOpen, setModalIsOpen] = React.useState(true); const onDismiss = (): void => setModalIsOpen(false); - const onOpenModal = (): void => setModalIsOpen(true); + const onOpenModal = (): void => setModalIsOpen(!modalIsOpen); const modalHeadingID = useUID(); return ( @@ -97,7 +96,7 @@ const Accessibility: React.FC = (): React.ReactElement => { - From 1c3dc7e121c4b281d25e3fe7094096b9be16aa3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Wed, 7 Feb 2024 14:42:00 -0700 Subject: [PATCH 7/9] chore: move new hompeage to /new slug --- .../src/components/homepage/HomeHero.tsx | 175 ++++++++++++------ .../src/components/homepage/NewHomeHero.tsx | 76 ++++++++ packages/paste-website/src/pages/index.tsx | 28 +-- .../paste-website/src/pages/new/index.tsx | 64 +++++++ 4 files changed, 261 insertions(+), 82 deletions(-) create mode 100644 packages/paste-website/src/components/homepage/NewHomeHero.tsx create mode 100644 packages/paste-website/src/pages/new/index.tsx diff --git a/packages/paste-website/src/components/homepage/HomeHero.tsx b/packages/paste-website/src/components/homepage/HomeHero.tsx index 2368321805..340b94cba8 100644 --- a/packages/paste-website/src/components/homepage/HomeHero.tsx +++ b/packages/paste-website/src/components/homepage/HomeHero.tsx @@ -1,74 +1,129 @@ +import { Anchor } from "@twilio-paste/anchor"; +import { Badge } from "@twilio-paste/badge"; import { Box } from "@twilio-paste/box"; -import { DisplayHeading } from "@twilio-paste/display-heading"; +import { Column, Grid } from "@twilio-paste/grid"; +import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; +import { NewIcon } from "@twilio-paste/icons/esm/NewIcon"; import { Text } from "@twilio-paste/text"; -import { useTheme } from "@twilio-paste/theme"; +import * as React from "react"; import { SITE_CONTENT_MAX_WIDTH } from "../../constants"; -import CircleIcon from "../icons/CircleIcon"; -import { BouncyAnchor } from "./BouncyAnchor"; -import { SearchBox } from "./SearchBox"; -import { ComponentShowcase } from "./component-showcase"; +import { event } from "../../lib/gtag"; +import { SlantedBackgroundGradient } from "../SlantedBackgroundGradient"; +import { HomeHeroIllustration } from "./HomeHeroIllustration"; +import { NewComponentBanner } from "./NewComponentBanner"; +import { NewComponentBannerLink } from "./NewComponentBannerLink"; +import { NewComponentBannerText } from "./NewComponentBannerText"; + +const SeeRoadmapAnchor = (): JSX.Element => { + const [hovered, setHovered] = React.useState(false); + + const handleMouseEnter = (): void => { + setHovered(true); + }; + const handleMouseLeave = (): void => { + setHovered(false); + }; -const HomeHero = (): JSX.Element => { - const theme = useTheme(); return ( - + + + event({ + category: "Hero", + action: "click-see-roadmap", + label: "See our roadmap", + }) + } + > + See our roadmap + + + + + ); +}; + +const HomeHero = (): JSX.Element => { + return ( + + - - - Paste - - - Build inclusive, delightful customer experiences with Twilio’s open-source design system. - - - - - - - + + + + + + New + + The Page Header component is here! + + event({ + category: "Hero", + action: "click-new-banner", + label: "Page header announcement", + }) + } + > + See more + + + + Build inclusive, delightful Twilio customer experiences with Paste. + + + + + + + + + - - - - - + ); }; diff --git a/packages/paste-website/src/components/homepage/NewHomeHero.tsx b/packages/paste-website/src/components/homepage/NewHomeHero.tsx new file mode 100644 index 0000000000..50aa4b7459 --- /dev/null +++ b/packages/paste-website/src/components/homepage/NewHomeHero.tsx @@ -0,0 +1,76 @@ +import { Box } from "@twilio-paste/box"; +import { DisplayHeading } from "@twilio-paste/display-heading"; +import { Text } from "@twilio-paste/text"; +import { useTheme } from "@twilio-paste/theme"; + +import { SITE_CONTENT_MAX_WIDTH } from "../../constants"; +import CircleIcon from "../icons/CircleIcon"; +import { BouncyAnchor } from "./BouncyAnchor"; +import { SearchBox } from "./SearchBox"; +import { ComponentShowcase } from "./component-showcase"; + +const NewHomeHero = (): JSX.Element => { + const theme = useTheme(); + return ( + + + + + + Paste + + + Build inclusive, delightful customer experiences with Twilio’s open-source design system. + + + + + + + + + + + + + + + ); +}; + +export { NewHomeHero }; diff --git a/packages/paste-website/src/pages/index.tsx b/packages/paste-website/src/pages/index.tsx index 0c1af20245..1316559d21 100644 --- a/packages/paste-website/src/pages/index.tsx +++ b/packages/paste-website/src/pages/index.tsx @@ -1,18 +1,12 @@ -import { Box } from "@twilio-paste/box"; import type { GetStaticProps, InferGetStaticPropsType } from "next"; import Head from "next/head"; import * as React from "react"; import VisibilitySensor from "react-visibility-sensor"; -import { Accessibility } from "../components/homepage/Accessibility"; -import { CommunityOfBuilders } from "../components/homepage/CommunityOfBuilders"; -import { DesignEfficiency } from "../components/homepage/DesignEfficiency"; -import { ForTwilioCustomers } from "../components/homepage/ForTwilioCustomers"; +import { Experiment } from "../components/homepage/Experiment"; +import { GetStarted } from "../components/homepage/GetStarted"; import { HomeHero } from "../components/homepage/HomeHero"; -import { NewSection } from "../components/homepage/NewSection"; -import { Templates } from "../components/homepage/Templates"; -import { Themeable } from "../components/homepage/Themeable"; -import { WeDoTheThinking } from "../components/homepage/WeDoTheThinking"; +import { PopularComponentsAndPatterns } from "../components/homepage/Popular"; import { SiteWrapper } from "../components/site-wrapper"; import { SiteMetaDefaults } from "../constants"; import { getNavigationData } from "../utils/api"; @@ -29,7 +23,6 @@ const Homepage = ({ navigationData }: InferGetStaticPropsType @@ -38,29 +31,20 @@ const Homepage = ({ navigationData }: InferGetStaticPropsType - - - - - - - - + - + + ); }; - export const getStaticProps: GetStaticProps<{ navigationData: Feature[] }> = async () => { const navigationData = await getNavigationData(); - return { props: { navigationData, }, }; }; - export default Homepage; diff --git a/packages/paste-website/src/pages/new/index.tsx b/packages/paste-website/src/pages/new/index.tsx new file mode 100644 index 0000000000..b60f1781d4 --- /dev/null +++ b/packages/paste-website/src/pages/new/index.tsx @@ -0,0 +1,64 @@ +import { Box } from "@twilio-paste/box"; +import type { GetStaticProps, InferGetStaticPropsType } from "next"; +import Head from "next/head"; +import * as React from "react"; +import VisibilitySensor from "react-visibility-sensor"; + +import { Accessibility } from "../../components/homepage/Accessibility"; +import { CommunityOfBuilders } from "../../components/homepage/CommunityOfBuilders"; +import { DesignEfficiency } from "../../components/homepage/DesignEfficiency"; +import { ForTwilioCustomers } from "../../components/homepage/ForTwilioCustomers"; +import { NewHomeHero } from "../../components/homepage/NewHomeHero"; +import { NewSection } from "../../components/homepage/NewSection"; +import { Templates } from "../../components/homepage/Templates"; +import { Themeable } from "../../components/homepage/Themeable"; +import { WeDoTheThinking } from "../../components/homepage/WeDoTheThinking"; +import { SiteWrapper } from "../../components/site-wrapper"; +import { SiteMetaDefaults } from "../../constants"; +import { getNavigationData } from "../../utils/api"; +import type { Feature } from "../../utils/api"; + +const NewHomePage = ({ navigationData }: InferGetStaticPropsType): React.ReactElement => { + /* + * Only load the Experiment section iframe when the user scrolls down to + * the Popular section (the section prior) + */ + const [showIframe, setShowIframe] = React.useState(false); + function handleVisibilityChange(isVisible: boolean): void { + if (!showIframe) { + setShowIframe(isVisible); + } + } + return ( + + + {SiteMetaDefaults.TITLE} + + + + + + + + + + + + + + + + + ); +}; + +export const getStaticProps: GetStaticProps<{ navigationData: Feature[] }> = async () => { + const navigationData = await getNavigationData(); + return { + props: { + navigationData, + }, + }; +}; + +export default NewHomePage; From c0e6eec20853b3f85b7af94a9fe019a35405eb0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Thu, 8 Feb 2024 10:28:04 -0700 Subject: [PATCH 8/9] chore: remove all site wrapper changes from this pr --- .../customization-landing-page/WhyPaste.tsx | 46 ++++++++ .../src/components/icons/HeartDoodleIcon.tsx | 4 +- .../src/components/site-wrapper/SiteBody.tsx | 4 +- .../site-footer/SiteFooterHeader.tsx | 13 +++ .../site-footer/SiteFooterIllustration.tsx | 6 +- .../site-footer/SiteFooterNav.tsx | 109 ++++++++---------- .../site-footer/SiteFooterTopAngle.tsx | 24 ++++ .../site-wrapper/site-footer/index.tsx | 19 +-- .../site-wrapper/site-header/index.tsx | 2 +- 9 files changed, 151 insertions(+), 76 deletions(-) create mode 100644 packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterTopAngle.tsx diff --git a/packages/paste-website/src/components/customization-landing-page/WhyPaste.tsx b/packages/paste-website/src/components/customization-landing-page/WhyPaste.tsx index c1e33fe631..ffdbedef22 100644 --- a/packages/paste-website/src/components/customization-landing-page/WhyPaste.tsx +++ b/packages/paste-website/src/components/customization-landing-page/WhyPaste.tsx @@ -7,12 +7,56 @@ import Image from "next/image"; import { DoodleLoopArrowLarge } from "../../assets/illustrations/DoodleLoopArrowLarge"; import WhyPasteMobile from "../../assets/images/customization/why-paste-mobile.png"; import WhyPasteImg from "../../assets/images/customization/why-paste.png"; +import { useDarkModeContext } from "../../context/DarkModeContext"; +import { useSlantedSkew } from "../SlantedBackgroundGradient"; import { A11yIcon } from "../icons/A11yIcon"; import { CustomizableIcon } from "../icons/CustomizableIcon"; import { ThemableIcon } from "../icons/ThemableIcon"; import { LandingPageSection, LandingPageSectionContent } from "./LandingPageLayoutUtils"; import { ReasonBlock } from "./ReasonBlock"; +const WhyPasteTopAngle = (): JSX.Element => { + const [skewOffset] = useSlantedSkew(); + const { theme } = useDarkModeContext(); + + return ( + + ); +}; + +const WhyPasteBottomAngle = (): JSX.Element => { + const [skewOffset] = useSlantedSkew(-0.35); + const { theme } = useDarkModeContext(); + + return ( + + ); +}; + export const WhyPaste = (): JSX.Element => { return ( { maxWidth="96%" marginX="auto" > + + diff --git a/packages/paste-website/src/components/icons/HeartDoodleIcon.tsx b/packages/paste-website/src/components/icons/HeartDoodleIcon.tsx index fbf3fc066e..46ef990f2e 100644 --- a/packages/paste-website/src/components/icons/HeartDoodleIcon.tsx +++ b/packages/paste-website/src/components/icons/HeartDoodleIcon.tsx @@ -17,14 +17,14 @@ const HeartDoodleIcon = React.memo( {title ? {title} : null} diff --git a/packages/paste-website/src/components/site-wrapper/SiteBody.tsx b/packages/paste-website/src/components/site-wrapper/SiteBody.tsx index cba90c6e04..8681c2ecbe 100644 --- a/packages/paste-website/src/components/site-wrapper/SiteBody.tsx +++ b/packages/paste-website/src/components/site-wrapper/SiteBody.tsx @@ -1,5 +1,5 @@ import { Box } from "@twilio-paste/box"; -import { LogoPasteIcon } from "@twilio-paste/icons/esm/LogoPasteIcon"; +import { LogoTwilioIcon } from "@twilio-paste/icons/esm/LogoTwilioIcon"; import { Sidebar, SidebarBody, @@ -112,7 +112,7 @@ export const SiteBody: React.FC = ({ children }) => { > - + Twilio Paste diff --git a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterHeader.tsx b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterHeader.tsx index cece23383e..c57e993cb4 100644 --- a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterHeader.tsx +++ b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterHeader.tsx @@ -1,4 +1,5 @@ import { Box } from "@twilio-paste/box"; +import { Text } from "@twilio-paste/text"; import { useTheme } from "@twilio-paste/theme"; import HeartDoodleIcon from "../../icons/HeartDoodleIcon"; @@ -18,6 +19,18 @@ const SiteFooterHeader = (): JSX.Element => { color={theme.textColors.colorTextInverse} decorative /> + + Black lives matter. + ); }; diff --git a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterIllustration.tsx b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterIllustration.tsx index c7d620bfa7..60311ac23a 100644 --- a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterIllustration.tsx +++ b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterIllustration.tsx @@ -2,13 +2,13 @@ import { Box } from "@twilio-paste/box"; import { useTheme } from "@twilio-paste/theme"; import Image from "next/image"; -import FooterImg from "../../../assets/illustrations/footer_img.svg"; +import FooterBuildingBlocks from "../../../assets/illustrations/footer_building_blocks.svg"; const SiteFooterIllustration = (): JSX.Element => { const theme = useTheme(); return ( - - + + ); }; diff --git a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterNav.tsx b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterNav.tsx index 1b612a42e9..6497181fbb 100644 --- a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterNav.tsx +++ b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterNav.tsx @@ -1,7 +1,6 @@ import { Anchor } from "@twilio-paste/anchor"; import { Box } from "@twilio-paste/box"; import { Stack } from "@twilio-paste/stack"; -import { Text } from "@twilio-paste/text"; import { useTheme } from "@twilio-paste/theme"; import { FIGMA_PROFILE_URL, REMIX_DOMAIN, STORYBOOK_DOMAIN } from "../../../constants"; @@ -18,14 +17,11 @@ const SiteFooterNav = (): JSX.Element => { as="nav" display="flex" flexDirection={["column", "row"]} - marginBottom="space130" + marginLeft={["space0", "space120"]} textAlign={["center", "left"]} > - + - - Learn more - { About event({ category: "Footer", - action: "click-design-guidelines", - label: "Design guidelines", + action: "click-our-roadmap", + label: "Our roadmap", }) } > - Design guidelines + Our roadmap event({ category: "Footer", - action: "click-quickstart", - label: "Quick Start for engineers", + action: "click-design-guidelines", + label: "Design guidelines", }) } > - Quick start for engineers + Design guidelines event({ category: "Footer", - action: "click-our-roadmap", - label: "Roadmap", + action: "click-quickstart", + label: "Quick Start", }) } > - Roadmap + Quick start - + - - Get help - event({ category: "Footer", - action: "click-github-discussions", - label: "Github discussions", + action: "click-github", + label: "Github", }) } > - Ask a question + Github event({ category: "Footer", - action: "click-report-a-bug", - label: "Report a bug", + action: "click-figma", + label: "Figma", }) } > - Report a bug + Figma event({ category: "Footer", - action: "click-how-we-work", - label: "How we work", + action: "click-storybook", + label: "Storybook", }) } > - How we work + Storybook - - - - - - Build with Paste - event({ category: "Footer", - action: "click-github", - label: "Github", + action: "click-remix", + label: "Theme Designer", }) } > - Github + Paste Remix + + + + event({ category: "Footer", - action: "click-figma", - label: "Figma", + action: "click-get-support", + label: "Get support", }) } > - Figma + Get support event({ category: "Footer", - action: "click-storybook", - label: "Storybook", + action: "click-report-a-bug", + label: "Report a bug", }) } > - Storybook + Report a bug event({ category: "Footer", - action: "click-remix", - label: "Theme Designer", + action: "click-how-we-work", + label: "How we work", }) } > - Paste Remix + How we work - + { ); }; - export { SiteFooterNav }; diff --git a/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterTopAngle.tsx b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterTopAngle.tsx new file mode 100644 index 0000000000..238c7ab4aa --- /dev/null +++ b/packages/paste-website/src/components/site-wrapper/site-footer/SiteFooterTopAngle.tsx @@ -0,0 +1,24 @@ +import { Box } from "@twilio-paste/box"; + +import { useSlantedSkew } from "../../SlantedBackgroundGradient"; + +const SiteFooterTopAngle = (): JSX.Element => { + const [skewOffset] = useSlantedSkew(); + + return ( + + ); +}; + +export { SiteFooterTopAngle }; diff --git a/packages/paste-website/src/components/site-wrapper/site-footer/index.tsx b/packages/paste-website/src/components/site-wrapper/site-footer/index.tsx index c963c01511..41c49eacec 100644 --- a/packages/paste-website/src/components/site-wrapper/site-footer/index.tsx +++ b/packages/paste-website/src/components/site-wrapper/site-footer/index.tsx @@ -1,23 +1,27 @@ import { Box } from "@twilio-paste/box"; +import { useRouter } from "next/router"; import { SITE_CONTENT_MAX_WIDTH } from "../../../constants"; import { SiteFooterIllustration } from "./SiteFooterIllustration"; import { SiteFooterNav } from "./SiteFooterNav"; +import { SiteFooterTopAngle } from "./SiteFooterTopAngle"; const SiteFooter: React.FC = () => { + const router = useRouter(); return ( - + + {router.pathname === "/" && } @@ -28,5 +32,4 @@ const SiteFooter: React.FC = () => { ); }; - export { SiteFooter }; diff --git a/packages/paste-website/src/components/site-wrapper/site-header/index.tsx b/packages/paste-website/src/components/site-wrapper/site-header/index.tsx index bc6b1ba4a5..74dad17f5b 100644 --- a/packages/paste-website/src/components/site-wrapper/site-header/index.tsx +++ b/packages/paste-website/src/components/site-wrapper/site-header/index.tsx @@ -44,8 +44,8 @@ export const SiteHeader: React.FC<{ - + From 9218147f4c21233d234844b01db9fa7e0312e7f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Thu, 8 Feb 2024 13:03:59 -0700 Subject: [PATCH 9/9] chore: fix danger check --- cypress/integration/sitemap-vrt/constants.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/cypress/integration/sitemap-vrt/constants.ts b/cypress/integration/sitemap-vrt/constants.ts index 42470f6941..3c1c12518f 100644 --- a/cypress/integration/sitemap-vrt/constants.ts +++ b/cypress/integration/sitemap-vrt/constants.ts @@ -271,6 +271,7 @@ export const SITEMAP = [ "/introduction/for-engineers/manual-installation/", "/introduction/for-engineers/quickstart/", "/introduction/working-with-us/", + "/new", "/page-templates/", "/page-templates/object-details/", "/page-templates/objects-list/",