diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 324310b6cb..c60b8c6154 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -16,6 +16,7 @@
     "dsznajder.es7-react-js-snippets",
     "oouo-diogo-perdigao.docthis",
     "yzhang.markdown-all-in-one",
-    "davidanson.vscode-markdownlint"
+    "davidanson.vscode-markdownlint",
+    "TwilioPaste.vs-code-intellisense"
   ]
 }
diff --git a/cypress/integration/filter-group-examples/index.spec.ts b/cypress/integration/filter-group-examples/index.spec.ts
deleted file mode 100644
index 263215d1e0..0000000000
--- a/cypress/integration/filter-group-examples/index.spec.ts
+++ /dev/null
@@ -1,160 +0,0 @@
-describe("Filter group pattern examples", () => {
-  beforeEach(() => {
-    cy.visit("/patterns/filter-group");
-    cy.get('[data-cy="filter-group-default-example"]').first().as("filterGroupWrapper");
-    cy.get("@filterGroupWrapper").find('select[name="type"]').as("roomTypeSelect");
-    cy.get("@filterGroupWrapper").find('select[name="range"]').as("dateRangeSelect");
-    cy.get("@filterGroupWrapper").find('input[name="search"]').as("searchInput");
-  });
-
-  it("filters the table with the search bar", () => {
-    cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
-    cy.get("@searchInput").type("test").should("have.value", "test");
-    cy.get("@filterGroupWrapper").find('[data-cy="filter-group-search-button"]').click();
-    cy.get("@filterGroupWrapper").find("tr").should("have.length", 3);
-  });
-
-  it("filters the table with the selects", () => {
-    cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
-    cy.get("@roomTypeSelect").select("Group").should("have.value", "Group");
-    cy.get("@dateRangeSelect").select("day").should("have.value", "day");
-    cy.get("@filterGroupWrapper").find('[data-cy="filter-group-apply-button"]').click();
-    cy.get("@filterGroupWrapper").find("tr").should("have.length", 2);
-  });
-
-  describe("Empty state", () => {
-    it("shows the empty state when search returns no results", () => {
-      cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
-      cy.get("@searchInput").type("asdfasdf");
-      cy.get("@filterGroupWrapper").find('[data-cy="filter-group-search-button"]').click();
-      cy.get("@filterGroupWrapper").find("table").should("have.length", 0);
-      cy.get("@filterGroupWrapper").find('[data-cy="filter-group-empty-state-clear-button"]').should("be.visible");
-    });
-
-    it("shows the empty state when selects returns no results", () => {
-      cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
-      cy.get("@roomTypeSelect").select("Peer to Peer");
-      cy.get("@dateRangeSelect").select("day");
-      cy.get("@filterGroupWrapper").find('[data-cy="filter-group-apply-button"]').click();
-      cy.get("@filterGroupWrapper").find("table").should("have.length", 0);
-      cy.get("@filterGroupWrapper").find('[data-cy="filter-group-empty-state-clear-button"]').should("be.visible");
-    });
-  });
-
-  describe("Clear buttons", () => {
-    beforeEach(() => {
-      cy.get("@roomTypeSelect").select("Group");
-      cy.get("@dateRangeSelect").select("day");
-      cy.get("@searchInput").type("sfasdf");
-      cy.get("@filterGroupWrapper").find('[data-cy="filter-group-apply-button"]').click();
-    });
-
-    it("clears the filters when press clear button", () => {
-      cy.get("@filterGroupWrapper").find("tr").should("have.length", 0);
-      cy.get("@filterGroupWrapper").find('[data-cy="filter-group-clear-button"]').click();
-      cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
-      cy.get("@roomTypeSelect").should("have.value", "All");
-      cy.get("@dateRangeSelect").should("have.value", "all");
-      cy.get("@searchInput").should("have.value", "");
-    });
-
-    it("clears the filters when press empty state clear button", () => {
-      cy.get("@filterGroupWrapper").find("tr").should("have.length", 0);
-      cy.get("@filterGroupWrapper").find('[data-cy="filter-group-empty-state-clear-button"]').click();
-      cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
-      cy.get("@roomTypeSelect").should("have.value", "All");
-      cy.get("@dateRangeSelect").should("have.value", "all");
-      cy.get("@searchInput").should("have.value", "");
-    });
-  });
-});
-
-describe("Custom date/time pattern example", () => {
-  beforeEach(() => {
-    cy.visit("/patterns/filter-group");
-    cy.get('[data-cy="custom-filter-group-example"]').first().as("filterGroupWrapper");
-    cy.get("@filterGroupWrapper").find('select[name="type"]').as("roomTypeSelect");
-    cy.get("@filterGroupWrapper").find('select[name="range"]').as("dateRangeSelect");
-    cy.get("@filterGroupWrapper").find('input[name="search"]').as("searchInput");
-    cy.get("@filterGroupWrapper").find('[data-cy="custom-filter-group-popover-button"]').as("dateTimePopoverButton");
-  });
-
-  it("filters the table with the search bar", () => {
-    cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
-    cy.get("@searchInput").type("test").should("have.value", "test");
-    cy.get("@filterGroupWrapper").find('[data-cy="custom-filter-group-search-button"]').click();
-    cy.get("@filterGroupWrapper").find("tr").should("have.length", 3);
-  });
-
-  it("filters the table with the selects", () => {
-    cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
-    cy.get("@roomTypeSelect").select("WebRTC Go").should("have.value", "WebRTC Go");
-    cy.get("@dateRangeSelect").select("day").should("have.value", "day");
-    cy.get("@filterGroupWrapper").find('[data-cy="custom-filter-group-apply-button"]').click();
-    cy.get("@filterGroupWrapper").find("tr").should("have.length", 3);
-  });
-
-  describe("Empty state", () => {
-    it("shows the empty state when search returns no results", () => {
-      cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
-      cy.get("@searchInput").type("asdfasdf");
-      cy.get("@filterGroupWrapper").find('[data-cy="custom-filter-group-search-button"]').click();
-      cy.get("@filterGroupWrapper").find("table").should("have.length", 0);
-      cy.get("@filterGroupWrapper").find('[data-cy="filter-group-empty-state-clear-button"]').should("be.visible");
-    });
-
-    it("shows the empty state when selects returns no results", () => {
-      cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
-      cy.get("@roomTypeSelect").select("Peer to Peer");
-      cy.get("@dateRangeSelect").select("12hours");
-      cy.get("@filterGroupWrapper").find('[data-cy="custom-filter-group-apply-button"]').click();
-      cy.get("@filterGroupWrapper").find("table").should("have.length", 0);
-      cy.get("@filterGroupWrapper").find('[data-cy="filter-group-empty-state-clear-button"]').should("be.visible");
-    });
-  });
-
-  it("clears the filters when press empty state clear button", () => {
-    cy.get("@roomTypeSelect").select("Peer to Peer");
-    cy.get("@dateRangeSelect").select("12hours");
-    cy.get("@searchInput").type("sfasdf");
-    cy.get("@filterGroupWrapper").find('[data-cy="custom-filter-group-apply-button"]').click();
-
-    cy.get("@filterGroupWrapper").find("tr").should("have.length", 0);
-    cy.get("@filterGroupWrapper").find('[data-cy="filter-group-empty-state-clear-button"]').click();
-    cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
-    cy.get("@roomTypeSelect").should("have.value", "All");
-    cy.get("@dateRangeSelect").should("have.value", "all");
-    cy.get("@searchInput").should("have.value", "");
-  });
-
-  describe("Custom date/time popover", () => {
-    beforeEach(() => {
-      cy.get("@dateTimePopoverButton").click();
-
-      cy.get('input[name="customDate.startDate"]').as("startDateInput");
-      cy.get('input[name="customDate.startTime"]').as("startTimeInput");
-      cy.get('input[name="customDate.endDate"]').as("endDateInput");
-      cy.get('input[name="customDate.endTime"]').as("endTimeInput");
-      cy.get('[data-cy="custom-filter-group-popover-apply-button"]').as("popoverApplyButton");
-    });
-
-    it("clears the date/time values if change the range select", () => {
-      const TODAY = new Date();
-
-      cy.get("@startDateInput").type("2022-05-01");
-      cy.get("@startTimeInput").type("10:30");
-      cy.get("@endDateInput").type("2022-05-01");
-      cy.get("@endTimeInput").type("20:30");
-
-      cy.get("@popoverApplyButton").click();
-
-      cy.get("@dateRangeSelect").select("12hours");
-      cy.get("@filterGroupWrapper").find('[data-cy="custom-filter-group-apply-button"]').click();
-
-      cy.get("@startDateInput").should("have.value", TODAY.toISOString().slice(0, 10));
-      cy.get("@startTimeInput").should("have.value", "00:00");
-      cy.get("@endDateInput").should("have.value", TODAY.toISOString().slice(0, 10));
-      cy.get("@endTimeInput").should("have.value", "23:59");
-    });
-  });
-});
diff --git a/cypress/integration/sitemap-vrt/constants.ts b/cypress/integration/sitemap-vrt/constants.ts
index 2c4facd2e7..ea293316a8 100644
--- a/cypress/integration/sitemap-vrt/constants.ts
+++ b/cypress/integration/sitemap-vrt/constants.ts
@@ -294,7 +294,7 @@ export const SITEMAP = [
   "/patterns/confirmation/",
   "/patterns/delete/",
   "/patterns/data-export/",
-  "/patterns/filter-group/",
+  "/patterns/filter/",
   "/patterns/",
   "/patterns/empty-state/",
   "/patterns/error-state/",
diff --git a/packages/paste-icons/build.icon-list.js b/packages/paste-icons/build.icon-list.js
index 53b368bb9b..114513b22b 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/ArtificialIntelligenceIcon.tsx","src/AttachIcon.tsx","src/AttachmentIcon.tsx","src/AuthenticationIcon.tsx","src/AutomaticUpdatesIcon.tsx","src/AvailableIcon.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/CartIcon.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/CustomerCareIcon.tsx","src/DarkModeIcon.tsx","src/DataArrayIcon.tsx","src/DataBarChartIcon.tsx","src/DataBooleanIcon.tsx","src/DataLineChartIcon.tsx","src/DataNumberIcon.tsx","src/DataObjectIcon.tsx","src/DataPieChartIcon.tsx","src/DataStringIcon.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/FolderIcon.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/NotificationOrnamentIcon.tsx","src/OrderedListIcon.tsx","src/OutOfDateIcon.tsx","src/PauseIcon.tsx","src/PaymentIcon.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/ProductAIAssistantsIcon.tsx","src/ProductAPIExplorerIcon.tsx","src/ProductAccountDashboardIcon.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/ProductConversationalInsightsIcon.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/ProductSendGridIcon.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/ProductUnifiedProfilesIcon.tsx","src/ProductUnifyIcon.tsx","src/ProductUsageIcon.tsx","src/ProductVerifyIcon.tsx","src/ProductVideoIcon.tsx","src/ProductVoiceIcon.tsx","src/ProductVoiceIntelligenceIcon.tsx","src/RCSCapableIcon.tsx","src/RaiseHandIcon.tsx","src/RecordIcon.tsx","src/RedoIcon.tsx","src/RefreshIcon.tsx","src/RepeatIcon.tsx","src/RepeatPurchaseIcon.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/SentimentNegativeIcon.tsx","src/SentimentNeutralIcon.tsx","src/SentimentPositiveIcon.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/SupportRequestIcon.tsx","src/SystemStatusIcon.tsx","src/TaskIcon.tsx","src/TemplateMessageIcon.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/TransferIcon.tsx","src/TranslationIcon.tsx","src/TrendDownIcon.tsx","src/TrendUpIcon.tsx","src/TriggerIcon.tsx","src/UnarchiveIcon.tsx","src/UnderlineIcon.tsx","src/UndoIcon.tsx","src/UnlockIcon.tsx","src/UnorderedListIcon.tsx","src/UnpinIcon.tsx","src/UnsortedIcon.tsx","src/UnstarIcon.tsx","src/UnsubscribeIcon.tsx","src/UploadIcon.tsx","src/UploadToCloudIcon.tsx","src/UpsellIcon.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/WinbackIcon.tsx","src/ZoomInIcon.tsx"];
+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/ArtificialIntelligenceIcon.tsx","src/AttachIcon.tsx","src/AttachmentIcon.tsx","src/AuthenticationIcon.tsx","src/AutomaticUpdatesIcon.tsx","src/AvailableIcon.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/CartIcon.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/CustomerCareIcon.tsx","src/DarkModeIcon.tsx","src/DataArrayIcon.tsx","src/DataBarChartIcon.tsx","src/DataBooleanIcon.tsx","src/DataLineChartIcon.tsx","src/DataNumberIcon.tsx","src/DataObjectIcon.tsx","src/DataPieChartIcon.tsx","src/DataStringIcon.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/FolderIcon.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/NotificationOrnamentIcon.tsx","src/OrderedListIcon.tsx","src/OutOfDateIcon.tsx","src/PauseIcon.tsx","src/PaymentIcon.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/ProductAIAssistantsIcon.tsx","src/ProductAPIExplorerIcon.tsx","src/ProductAccountDashboardIcon.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/ProductConversationalInsightsIcon.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/ProductSendGridIcon.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/ProductUnifiedProfilesIcon.tsx","src/ProductUnifyIcon.tsx","src/ProductUsageIcon.tsx","src/ProductVerifyIcon.tsx","src/ProductVideoIcon.tsx","src/ProductVoiceIcon.tsx","src/ProductVoiceIntelligenceIcon.tsx","src/RCSCapableIcon.tsx","src/RaiseHandIcon.tsx","src/RecordIcon.tsx","src/RedoIcon.tsx","src/RefreshIcon.tsx","src/RepeatIcon.tsx","src/RepeatPurchaseIcon.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/SentimentNegativeIcon.tsx","src/SentimentNeutralIcon.tsx","src/SentimentPositiveIcon.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/SupportRequestIcon.tsx","src/SystemStatusIcon.tsx","src/TaskIcon.tsx","src/TemplateMessageIcon.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/TransferIcon.tsx","src/TranslationIcon.tsx","src/TrendDownIcon.tsx","src/TrendUpIcon.tsx","src/TriggerIcon.tsx","src/UnarchiveIcon.tsx","src/UnderlineIcon.tsx","src/UndoIcon.tsx","src/UnlockIcon.tsx","src/UnorderedListIcon.tsx","src/UnpinIcon.tsx","src/UnsortedIcon.tsx","src/UnstarIcon.tsx","src/UnsubscribeIcon.tsx","src/UploadIcon.tsx","src/UploadToCloudIcon.tsx","src/UpsellIcon.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/WinbackIcon.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 c8a5c6d4cb..380549b31d 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":"ArtificialIntelligenceIcon","svg":"/svg/ArtificialIntelligenceIcon.svg","cjs":"/cjs/ArtificialIntelligenceIcon.js","esm":"/esm/ArtificialIntelligenceIcon.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":"AuthenticationIcon","svg":"/svg/AuthenticationIcon.svg","cjs":"/cjs/AuthenticationIcon.js","esm":"/esm/AuthenticationIcon.js"},{"name":"AutomaticUpdatesIcon","svg":"/svg/AutomaticUpdatesIcon.svg","cjs":"/cjs/AutomaticUpdatesIcon.js","esm":"/esm/AutomaticUpdatesIcon.js"},{"name":"AvailableIcon","svg":"/svg/AvailableIcon.svg","cjs":"/cjs/AvailableIcon.js","esm":"/esm/AvailableIcon.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":"CartIcon","svg":"/svg/CartIcon.svg","cjs":"/cjs/CartIcon.js","esm":"/esm/CartIcon.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":"CustomerCareIcon","svg":"/svg/CustomerCareIcon.svg","cjs":"/cjs/CustomerCareIcon.js","esm":"/esm/CustomerCareIcon.js"},{"name":"DarkModeIcon","svg":"/svg/DarkModeIcon.svg","cjs":"/cjs/DarkModeIcon.js","esm":"/esm/DarkModeIcon.js"},{"name":"DataArrayIcon","svg":"/svg/DataArrayIcon.svg","cjs":"/cjs/DataArrayIcon.js","esm":"/esm/DataArrayIcon.js"},{"name":"DataBarChartIcon","svg":"/svg/DataBarChartIcon.svg","cjs":"/cjs/DataBarChartIcon.js","esm":"/esm/DataBarChartIcon.js"},{"name":"DataBooleanIcon","svg":"/svg/DataBooleanIcon.svg","cjs":"/cjs/DataBooleanIcon.js","esm":"/esm/DataBooleanIcon.js"},{"name":"DataLineChartIcon","svg":"/svg/DataLineChartIcon.svg","cjs":"/cjs/DataLineChartIcon.js","esm":"/esm/DataLineChartIcon.js"},{"name":"DataNumberIcon","svg":"/svg/DataNumberIcon.svg","cjs":"/cjs/DataNumberIcon.js","esm":"/esm/DataNumberIcon.js"},{"name":"DataObjectIcon","svg":"/svg/DataObjectIcon.svg","cjs":"/cjs/DataObjectIcon.js","esm":"/esm/DataObjectIcon.js"},{"name":"DataPieChartIcon","svg":"/svg/DataPieChartIcon.svg","cjs":"/cjs/DataPieChartIcon.js","esm":"/esm/DataPieChartIcon.js"},{"name":"DataStringIcon","svg":"/svg/DataStringIcon.svg","cjs":"/cjs/DataStringIcon.js","esm":"/esm/DataStringIcon.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":"FolderIcon","svg":"/svg/FolderIcon.svg","cjs":"/cjs/FolderIcon.js","esm":"/esm/FolderIcon.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":"NotificationOrnamentIcon","svg":"/svg/NotificationOrnamentIcon.svg","cjs":"/cjs/NotificationOrnamentIcon.js","esm":"/esm/NotificationOrnamentIcon.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":"PaymentIcon","svg":"/svg/PaymentIcon.svg","cjs":"/cjs/PaymentIcon.js","esm":"/esm/PaymentIcon.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":"ProductAIAssistantsIcon","svg":"/svg/ProductAIAssistantsIcon.svg","cjs":"/cjs/ProductAIAssistantsIcon.js","esm":"/esm/ProductAIAssistantsIcon.js"},{"name":"ProductAPIExplorerIcon","svg":"/svg/ProductAPIExplorerIcon.svg","cjs":"/cjs/ProductAPIExplorerIcon.js","esm":"/esm/ProductAPIExplorerIcon.js"},{"name":"ProductAccountDashboardIcon","svg":"/svg/ProductAccountDashboardIcon.svg","cjs":"/cjs/ProductAccountDashboardIcon.js","esm":"/esm/ProductAccountDashboardIcon.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":"ProductConversationalInsightsIcon","svg":"/svg/ProductConversationalInsightsIcon.svg","cjs":"/cjs/ProductConversationalInsightsIcon.js","esm":"/esm/ProductConversationalInsightsIcon.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":"ProductSendGridIcon","svg":"/svg/ProductSendGridIcon.svg","cjs":"/cjs/ProductSendGridIcon.js","esm":"/esm/ProductSendGridIcon.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":"ProductUnifiedProfilesIcon","svg":"/svg/ProductUnifiedProfilesIcon.svg","cjs":"/cjs/ProductUnifiedProfilesIcon.js","esm":"/esm/ProductUnifiedProfilesIcon.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":"RCSCapableIcon","svg":"/svg/RCSCapableIcon.svg","cjs":"/cjs/RCSCapableIcon.js","esm":"/esm/RCSCapableIcon.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":"RepeatPurchaseIcon","svg":"/svg/RepeatPurchaseIcon.svg","cjs":"/cjs/RepeatPurchaseIcon.js","esm":"/esm/RepeatPurchaseIcon.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":"SentimentNegativeIcon","svg":"/svg/SentimentNegativeIcon.svg","cjs":"/cjs/SentimentNegativeIcon.js","esm":"/esm/SentimentNegativeIcon.js"},{"name":"SentimentNeutralIcon","svg":"/svg/SentimentNeutralIcon.svg","cjs":"/cjs/SentimentNeutralIcon.js","esm":"/esm/SentimentNeutralIcon.js"},{"name":"SentimentPositiveIcon","svg":"/svg/SentimentPositiveIcon.svg","cjs":"/cjs/SentimentPositiveIcon.js","esm":"/esm/SentimentPositiveIcon.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":"SupportRequestIcon","svg":"/svg/SupportRequestIcon.svg","cjs":"/cjs/SupportRequestIcon.js","esm":"/esm/SupportRequestIcon.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":"TemplateMessageIcon","svg":"/svg/TemplateMessageIcon.svg","cjs":"/cjs/TemplateMessageIcon.js","esm":"/esm/TemplateMessageIcon.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":"TransferIcon","svg":"/svg/TransferIcon.svg","cjs":"/cjs/TransferIcon.js","esm":"/esm/TransferIcon.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":"TriggerIcon","svg":"/svg/TriggerIcon.svg","cjs":"/cjs/TriggerIcon.js","esm":"/esm/TriggerIcon.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":"UnstarIcon","svg":"/svg/UnstarIcon.svg","cjs":"/cjs/UnstarIcon.js","esm":"/esm/UnstarIcon.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":"UpsellIcon","svg":"/svg/UpsellIcon.svg","cjs":"/cjs/UpsellIcon.js","esm":"/esm/UpsellIcon.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":"WinbackIcon","svg":"/svg/WinbackIcon.svg","cjs":"/cjs/WinbackIcon.js","esm":"/esm/WinbackIcon.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"}]}
+{"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":"ArtificialIntelligenceIcon","svg":"/svg/ArtificialIntelligenceIcon.svg","cjs":"/cjs/ArtificialIntelligenceIcon.js","esm":"/esm/ArtificialIntelligenceIcon.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":"AuthenticationIcon","svg":"/svg/AuthenticationIcon.svg","cjs":"/cjs/AuthenticationIcon.js","esm":"/esm/AuthenticationIcon.js"},{"name":"AutomaticUpdatesIcon","svg":"/svg/AutomaticUpdatesIcon.svg","cjs":"/cjs/AutomaticUpdatesIcon.js","esm":"/esm/AutomaticUpdatesIcon.js"},{"name":"AvailableIcon","svg":"/svg/AvailableIcon.svg","cjs":"/cjs/AvailableIcon.js","esm":"/esm/AvailableIcon.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":"CartIcon","svg":"/svg/CartIcon.svg","cjs":"/cjs/CartIcon.js","esm":"/esm/CartIcon.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":"CustomerCareIcon","svg":"/svg/CustomerCareIcon.svg","cjs":"/cjs/CustomerCareIcon.js","esm":"/esm/CustomerCareIcon.js"},{"name":"DarkModeIcon","svg":"/svg/DarkModeIcon.svg","cjs":"/cjs/DarkModeIcon.js","esm":"/esm/DarkModeIcon.js"},{"name":"DataArrayIcon","svg":"/svg/DataArrayIcon.svg","cjs":"/cjs/DataArrayIcon.js","esm":"/esm/DataArrayIcon.js"},{"name":"DataBarChartIcon","svg":"/svg/DataBarChartIcon.svg","cjs":"/cjs/DataBarChartIcon.js","esm":"/esm/DataBarChartIcon.js"},{"name":"DataBooleanIcon","svg":"/svg/DataBooleanIcon.svg","cjs":"/cjs/DataBooleanIcon.js","esm":"/esm/DataBooleanIcon.js"},{"name":"DataLineChartIcon","svg":"/svg/DataLineChartIcon.svg","cjs":"/cjs/DataLineChartIcon.js","esm":"/esm/DataLineChartIcon.js"},{"name":"DataNumberIcon","svg":"/svg/DataNumberIcon.svg","cjs":"/cjs/DataNumberIcon.js","esm":"/esm/DataNumberIcon.js"},{"name":"DataObjectIcon","svg":"/svg/DataObjectIcon.svg","cjs":"/cjs/DataObjectIcon.js","esm":"/esm/DataObjectIcon.js"},{"name":"DataPieChartIcon","svg":"/svg/DataPieChartIcon.svg","cjs":"/cjs/DataPieChartIcon.js","esm":"/esm/DataPieChartIcon.js"},{"name":"DataStringIcon","svg":"/svg/DataStringIcon.svg","cjs":"/cjs/DataStringIcon.js","esm":"/esm/DataStringIcon.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":"FolderIcon","svg":"/svg/FolderIcon.svg","cjs":"/cjs/FolderIcon.js","esm":"/esm/FolderIcon.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":"NotificationOrnamentIcon","svg":"/svg/NotificationOrnamentIcon.svg","cjs":"/cjs/NotificationOrnamentIcon.js","esm":"/esm/NotificationOrnamentIcon.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":"PaymentIcon","svg":"/svg/PaymentIcon.svg","cjs":"/cjs/PaymentIcon.js","esm":"/esm/PaymentIcon.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":"ProductAIAssistantsIcon","svg":"/svg/ProductAIAssistantsIcon.svg","cjs":"/cjs/ProductAIAssistantsIcon.js","esm":"/esm/ProductAIAssistantsIcon.js"},{"name":"ProductAPIExplorerIcon","svg":"/svg/ProductAPIExplorerIcon.svg","cjs":"/cjs/ProductAPIExplorerIcon.js","esm":"/esm/ProductAPIExplorerIcon.js"},{"name":"ProductAccountDashboardIcon","svg":"/svg/ProductAccountDashboardIcon.svg","cjs":"/cjs/ProductAccountDashboardIcon.js","esm":"/esm/ProductAccountDashboardIcon.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":"ProductConversationalInsightsIcon","svg":"/svg/ProductConversationalInsightsIcon.svg","cjs":"/cjs/ProductConversationalInsightsIcon.js","esm":"/esm/ProductConversationalInsightsIcon.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":"ProductSendGridIcon","svg":"/svg/ProductSendGridIcon.svg","cjs":"/cjs/ProductSendGridIcon.js","esm":"/esm/ProductSendGridIcon.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":"ProductUnifiedProfilesIcon","svg":"/svg/ProductUnifiedProfilesIcon.svg","cjs":"/cjs/ProductUnifiedProfilesIcon.js","esm":"/esm/ProductUnifiedProfilesIcon.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":"RCSCapableIcon","svg":"/svg/RCSCapableIcon.svg","cjs":"/cjs/RCSCapableIcon.js","esm":"/esm/RCSCapableIcon.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":"RepeatPurchaseIcon","svg":"/svg/RepeatPurchaseIcon.svg","cjs":"/cjs/RepeatPurchaseIcon.js","esm":"/esm/RepeatPurchaseIcon.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":"SentimentNegativeIcon","svg":"/svg/SentimentNegativeIcon.svg","cjs":"/cjs/SentimentNegativeIcon.js","esm":"/esm/SentimentNegativeIcon.js"},{"name":"SentimentNeutralIcon","svg":"/svg/SentimentNeutralIcon.svg","cjs":"/cjs/SentimentNeutralIcon.js","esm":"/esm/SentimentNeutralIcon.js"},{"name":"SentimentPositiveIcon","svg":"/svg/SentimentPositiveIcon.svg","cjs":"/cjs/SentimentPositiveIcon.js","esm":"/esm/SentimentPositiveIcon.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":"SupportRequestIcon","svg":"/svg/SupportRequestIcon.svg","cjs":"/cjs/SupportRequestIcon.js","esm":"/esm/SupportRequestIcon.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":"TemplateMessageIcon","svg":"/svg/TemplateMessageIcon.svg","cjs":"/cjs/TemplateMessageIcon.js","esm":"/esm/TemplateMessageIcon.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":"TransferIcon","svg":"/svg/TransferIcon.svg","cjs":"/cjs/TransferIcon.js","esm":"/esm/TransferIcon.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":"TriggerIcon","svg":"/svg/TriggerIcon.svg","cjs":"/cjs/TriggerIcon.js","esm":"/esm/TriggerIcon.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":"UnstarIcon","svg":"/svg/UnstarIcon.svg","cjs":"/cjs/UnstarIcon.js","esm":"/esm/UnstarIcon.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":"UpsellIcon","svg":"/svg/UpsellIcon.svg","cjs":"/cjs/UpsellIcon.js","esm":"/esm/UpsellIcon.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":"WinbackIcon","svg":"/svg/WinbackIcon.svg","cjs":"/cjs/WinbackIcon.js","esm":"/esm/WinbackIcon.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-website/next.config.mjs b/packages/paste-website/next.config.mjs
index f9222bab6d..ce7814352d 100644
--- a/packages/paste-website/next.config.mjs
+++ b/packages/paste-website/next.config.mjs
@@ -64,6 +64,7 @@ const nextConfig = {
       },
       { source: "/articles", destination: "/blog", permanent: true },
       { source: "/patterns/navigation", destination: "/experiences/navigation", permanent: true },
+      { source: "/patterns/filter-group", destination: "/patterns/filter", permanent: true },
     ];
   },
   // https://nextjs.org/docs/pages/api-reference/next-config-js/headers
diff --git a/packages/paste-website/package.json b/packages/paste-website/package.json
index 1e72183f0e..8921789925 100644
--- a/packages/paste-website/package.json
+++ b/packages/paste-website/package.json
@@ -111,6 +111,7 @@
     "@twilio-paste/separator": "^8.1.1",
     "@twilio-paste/sibling-box": "^9.1.1",
     "@twilio-paste/side-modal": "^4.1.3",
+    "@twilio-paste/side-panel": "^1.0.0",
     "@twilio-paste/sidebar": "^1.1.1",
     "@twilio-paste/skeleton-loader": "^6.1.1",
     "@twilio-paste/slider": "^3.0.1",
diff --git a/packages/paste-website/src/__tests__/filterGroup.test.tsx b/packages/paste-website/src/__tests__/filterGroup.test.tsx
index 6e296acc28..96593de88a 100644
--- a/packages/paste-website/src/__tests__/filterGroup.test.tsx
+++ b/packages/paste-website/src/__tests__/filterGroup.test.tsx
@@ -7,7 +7,7 @@ import {
   filterByRoomType,
   filterBySearchString,
   isEndDateBeforeStartDate,
-} from "../component-examples/filter-group/helpers";
+} from "../component-examples/filter/helpers";
 
 describe("filterBySearchString", () => {
   it("should filter by unique name", () => {
@@ -36,11 +36,6 @@ describe("filterByRoomType", () => {
     const result = filterByRoomType("Peer to Peer", "Group");
     expect(result).toBeFalsy();
   });
-
-  it("should always include if the filter is All", () => {
-    const result = filterByRoomType("Peer to Peer", "All");
-    expect(result).toBeTruthy();
-  });
 });
 
 describe("filterByDateRange", () => {
diff --git a/packages/paste-website/src/assets/images/patterns/filter-dynamic.png b/packages/paste-website/src/assets/images/patterns/filter-dynamic.png
new file mode 100644
index 0000000000..bf2452c85e
Binary files /dev/null and b/packages/paste-website/src/assets/images/patterns/filter-dynamic.png differ
diff --git a/packages/paste-website/src/assets/images/patterns/filter-fetching.png b/packages/paste-website/src/assets/images/patterns/filter-fetching.png
new file mode 100644
index 0000000000..1e2b8cbcdb
Binary files /dev/null and b/packages/paste-website/src/assets/images/patterns/filter-fetching.png differ
diff --git a/packages/paste-website/src/assets/images/patterns/filter-filter_bar.png b/packages/paste-website/src/assets/images/patterns/filter-filter_bar.png
new file mode 100644
index 0000000000..79bf3d0f91
Binary files /dev/null and b/packages/paste-website/src/assets/images/patterns/filter-filter_bar.png differ
diff --git a/packages/paste-website/src/assets/images/patterns/filter-main.png b/packages/paste-website/src/assets/images/patterns/filter-main.png
new file mode 100644
index 0000000000..ef7661aeec
Binary files /dev/null and b/packages/paste-website/src/assets/images/patterns/filter-main.png differ
diff --git a/packages/paste-website/src/assets/images/patterns/filter-responsive.png b/packages/paste-website/src/assets/images/patterns/filter-responsive.png
new file mode 100644
index 0000000000..d1427cfe25
Binary files /dev/null and b/packages/paste-website/src/assets/images/patterns/filter-responsive.png differ
diff --git a/packages/paste-website/src/assets/images/patterns/filter-responsive_2.png b/packages/paste-website/src/assets/images/patterns/filter-responsive_2.png
new file mode 100644
index 0000000000..a4c1652dfe
Binary files /dev/null and b/packages/paste-website/src/assets/images/patterns/filter-responsive_2.png differ
diff --git a/packages/paste-website/src/assets/images/patterns/filter-usage.png b/packages/paste-website/src/assets/images/patterns/filter-usage.png
new file mode 100644
index 0000000000..093e026082
Binary files /dev/null and b/packages/paste-website/src/assets/images/patterns/filter-usage.png differ
diff --git a/packages/paste-website/src/component-examples/filter/Examples.tsx b/packages/paste-website/src/component-examples/filter/Examples.tsx
new file mode 100644
index 0000000000..a5154ae149
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/Examples.tsx
@@ -0,0 +1,18 @@
+/* DISCLAIMER: this is an example, not meant to be used in production */
+import { Anchor } from "@twilio-paste/anchor";
+import { Box } from "@twilio-paste/box";
+
+import { DefaultFilter } from "./components/DefaultFilter";
+import { TABLE_DATA } from "./constants";
+import type { FilterListType } from "./types";
+
+const filterList: FilterListType = ["roomType", "participants", "dateCompleted"];
+
+export const DefaultFilterGroupExample = (): JSX.Element => (
+  <Box marginBottom="space70" data-cy="filter-default-example">
+    <DefaultFilter data={TABLE_DATA} filterList={filterList} />
+    <Anchor showExternal href="https://codesandbox.io/s/default-filter-group-rloskb?file=/src/App.tsx">
+      <strong>View example in CodeSandbox</strong>
+    </Anchor>
+  </Box>
+);
diff --git a/packages/paste-website/src/component-examples/filter/components/CustomDateFilterGroup.tsx b/packages/paste-website/src/component-examples/filter/components/CustomDateFilterGroup.tsx
new file mode 100644
index 0000000000..cefb5c3adf
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/CustomDateFilterGroup.tsx
@@ -0,0 +1,198 @@
+/* DISCLAIMER: this is an example, not meant to be used in production */
+
+import { Box } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { ExportIcon } from "@twilio-paste/icons/esm/ExportIcon";
+import { FilterIcon } from "@twilio-paste/icons/esm/FilterIcon";
+import { SearchIcon } from "@twilio-paste/icons/esm/SearchIcon";
+import { Input } from "@twilio-paste/input";
+import { Label } from "@twilio-paste/label";
+import { Option, Select } from "@twilio-paste/select";
+import { Separator } from "@twilio-paste/separator";
+import { useUID } from "@twilio-paste/uid-library";
+import isEqual from "lodash/isEqual";
+import * as React from "react";
+import { useForm, useFormState } from "react-hook-form";
+
+import { DATE_TIME_RANGES, FORM_DEFAULT_VALUES, ROOM_TYPES } from "../constants";
+import { filterByDateTimeRange, filterByRoomType, filterBySearchString, isEndDateBeforeStartDate } from "../helpers";
+import type { DateTimeFormValues, FilterDateTimeProps } from "../types";
+import { DateTimePopover } from "./DateTimePopover";
+import { EmptyState } from "./EmptyState";
+import { SampleDataGrid } from "./SampleDataGrid";
+
+// Note: update the codesandboxes if update this
+export const CustomDateFilter: React.FC<React.PropsWithChildren<FilterDateTimeProps>> = ({ data }) => {
+  const dateRangesId = `quality-${useUID()}`;
+  const roomTypesId = `type-${useUID()}`;
+
+  const { control, handleSubmit, register, reset, resetField, setError, setValue, watch } = useForm<DateTimeFormValues>(
+    {
+      defaultValues: FORM_DEFAULT_VALUES,
+      criteriaMode: "all",
+    },
+  );
+  const { errors } = useFormState({
+    control,
+  });
+
+  const [areButtonsDisabled, setAreButtonsDisabled] = React.useState(true);
+  const [filteredTableData, setFilteredTableData] = React.useState(data);
+
+  React.useEffect(() => {
+    const subscription = watch((value, { name, type }) => {
+      const { range, customDate } = value;
+
+      if (type === "change") {
+        setAreButtonsDisabled(false);
+
+        if (name?.includes("customDate") && range !== "custom") {
+          setValue("range", "custom");
+        }
+
+        if (name === "customDate.endDate") {
+          if (customDate?.startDate && customDate?.startTime && customDate?.endDate && customDate?.endTime) {
+            const isEndDateInvalid = isEndDateBeforeStartDate(
+              customDate.startDate,
+              customDate.startTime,
+              customDate.endDate,
+              customDate.endTime,
+            );
+
+            if (isEndDateInvalid) {
+              setError("customDate.endDate", {
+                type: "custom",
+                message: "End date has to be after the start date.",
+              });
+            } else return;
+          } else return;
+        }
+
+        if (name === "range" && !isEqual(customDate, FORM_DEFAULT_VALUES.customDate)) {
+          resetField("customDate");
+        }
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [watch, setValue, resetField, setError]);
+
+  const handleApplyFilters = (callback?: VoidFunction) => (formData: DateTimeFormValues) => {
+    const { search, type, range, customDate } = formData;
+    const { startDate, startTime, endDate, endTime } = customDate;
+
+    const filtered = data.filter(({ uniqueName, sid, roomType, dateCompleted }) => {
+      return (
+        filterBySearchString(uniqueName, sid, search) &&
+        filterByRoomType(roomType, type) &&
+        filterByDateTimeRange(dateCompleted, range, startDate, startTime, endDate, endTime)
+      );
+    });
+    setFilteredTableData(filtered);
+    setAreButtonsDisabled(true);
+    reset(undefined, {
+      keepValues: true,
+      keepTouched: false,
+      keepSubmitCount: true,
+    });
+    if (callback) callback();
+  };
+
+  const handleClearAll = (): void => {
+    reset(undefined, {
+      keepTouched: false,
+      keepSubmitCount: true,
+    });
+    setFilteredTableData(data);
+    setAreButtonsDisabled(true);
+  };
+
+  return (
+    <Box paddingBottom="space70" as="form" onSubmit={handleSubmit(handleApplyFilters())}>
+      <Box display="flex" alignItems="flex-end" columnGap="space50">
+        <Box>
+          <Label htmlFor={roomTypesId}>Room type</Label>
+          <Select id={roomTypesId} {...register("type")}>
+            {ROOM_TYPES.map((type) => (
+              <Option value={type} key={type}>
+                {type}
+              </Option>
+            ))}
+          </Select>
+        </Box>
+        <Box>
+          <Label htmlFor={dateRangesId}>Date/time range</Label>
+          <Select
+            id={dateRangesId}
+            {...register("range")}
+            insertAfter={
+              <DateTimePopover
+                onApply={(cb) => handleSubmit(handleApplyFilters(cb))}
+                register={register}
+                errors={errors}
+              />
+            }
+          >
+            {DATE_TIME_RANGES.map((range) => (
+              <Option value={range.value} key={range.value}>
+                {range.name}
+              </Option>
+            ))}
+          </Select>
+        </Box>
+        <Box display="flex" columnGap="space50" paddingLeft="space40">
+          <Button
+            variant="primary"
+            aria-label="Apply filters"
+            disabled={areButtonsDisabled}
+            onClick={handleSubmit(handleApplyFilters())}
+            data-cy="custom-filter-group-apply-button"
+          >
+            <FilterIcon decorative />
+            Apply
+          </Button>
+          <Button
+            variant="link"
+            disabled={areButtonsDisabled}
+            onClick={handleClearAll}
+            data-cy="custom-filter-group-clear-button"
+          >
+            Clear all
+          </Button>
+        </Box>
+      </Box>
+      <Box paddingY="space50">
+        <Separator orientation="horizontal" />
+      </Box>
+      <Box display="flex" justifyContent="space-between">
+        <Box width="size40">
+          <Input
+            aria-label="Search"
+            type="text"
+            placeholder="Search by SID or unique name"
+            {...register("search")}
+            insertAfter={
+              <Button
+                variant="link"
+                onClick={handleSubmit(handleApplyFilters())}
+                data-cy="custom-filter-group-search-button"
+              >
+                <SearchIcon decorative={false} title="Search" />
+              </Button>
+            }
+          />
+        </Box>
+        <Button variant="secondary">
+          <ExportIcon decorative />
+          Export CSV
+        </Button>
+      </Box>
+      <Box paddingTop="space50">
+        {filteredTableData.length > 0 ? (
+          <SampleDataGrid data={filteredTableData} showDateTime />
+        ) : (
+          <EmptyState handleClearAll={handleClearAll} />
+        )}
+      </Box>
+    </Box>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/DateTimePopover.tsx b/packages/paste-website/src/component-examples/filter/components/DateTimePopover.tsx
new file mode 100644
index 0000000000..af3a21d6d2
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/DateTimePopover.tsx
@@ -0,0 +1,132 @@
+/* DISCLAIMER: this is an example, not meant to be used in production */
+
+import { ErrorMessage } from "@hookform/error-message";
+import { Box } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { DatePicker } from "@twilio-paste/date-picker";
+import { Heading } from "@twilio-paste/heading";
+import { HelpText } from "@twilio-paste/help-text";
+import { CalendarIcon } from "@twilio-paste/icons/esm/CalendarIcon";
+import { Label } from "@twilio-paste/label";
+import { Popover, PopoverButton, PopoverContainer, usePopoverState } from "@twilio-paste/popover";
+import { Text } from "@twilio-paste/text";
+import { TimePicker } from "@twilio-paste/time-picker";
+import { useUID } from "@twilio-paste/uid-library";
+import * as React from "react";
+
+import type { DateTimePopoverProps } from "../types";
+
+export const DateTimePopover: React.FC<React.PropsWithChildren<DateTimePopoverProps>> = ({
+  onApply,
+  register,
+  errors,
+}) => {
+  const startId = `start-date-${useUID()}`;
+  const endId = `end-date-${useUID()}`;
+  const popoverId = `date-popover-${useUID()}`;
+
+  const popover = usePopoverState({ baseId: popoverId });
+
+  return (
+    <PopoverContainer state={popover}>
+      <PopoverButton variant="link" data-cy="custom-filter-group-popover-button">
+        <CalendarIcon decorative={false} title="Set custom date/time range" />
+      </PopoverButton>
+      <Popover aria-label="Custom date range" data-cy="custom-date-popover">
+        <Heading as="h2" variant="heading40">
+          Custom date range
+        </Heading>
+        <Text as="p" color="colorTextWeak" marginBottom="space70">
+          All dates/times in UTC. Usage data available up to 7 days.
+        </Text>
+        <Box display="flex" flexDirection="column" marginBottom="space50" rowGap="space50">
+          <Box display="flex" flexDirection="row" columnGap="space50">
+            <Box width="100%">
+              <Label htmlFor={`${startId}-date`} required>
+                Start date
+              </Label>
+              <DatePicker
+                id={`${startId}-date`}
+                aria-describedby={`${startId}-date-error`}
+                required
+                {...register("customDate.startDate", { required: "Start date is required." })}
+              />
+              <ErrorMessage
+                errors={errors}
+                name="customDate.startDate"
+                render={({ message }): React.ReactNode => (
+                  <HelpText variant="error" id={`${startId}-date-error`} data-cy="start-date-error">
+                    {message}
+                  </HelpText>
+                )}
+              />
+            </Box>
+            <Box width="100%">
+              <Label htmlFor={`${startId}-time`} required>
+                Start time
+              </Label>
+              <TimePicker
+                id={`${startId}-time`}
+                required
+                {...register("customDate.startTime", { required: "Start time is required." })}
+              />
+              <ErrorMessage
+                errors={errors}
+                name="customDate.startTime"
+                render={({ message }) => (
+                  <HelpText variant="error" id={`${startId}-time-error`} data-cy="start-time-error">
+                    {message}
+                  </HelpText>
+                )}
+              />
+            </Box>
+          </Box>
+          <Box display="flex" flexDirection="row" columnGap="space50">
+            <Box width="100%">
+              <Label htmlFor={`${endId}-date`} required>
+                End date
+              </Label>
+              <DatePicker
+                id={`${endId}-date`}
+                aria-describedby={`${endId}-date-error`}
+                required
+                {...register("customDate.endDate", { required: "End date is required." })}
+              />
+              <ErrorMessage
+                errors={errors}
+                name="customDate.endDate"
+                render={({ message }): React.ReactNode => (
+                  <HelpText variant="error" id={`${endId}-date-error`} data-cy="end-date-error">
+                    {message}
+                  </HelpText>
+                )}
+              />
+            </Box>
+            <Box width="100%">
+              <Label htmlFor={`${endId}-time`} required>
+                End time
+              </Label>
+              <TimePicker
+                id={`${endId}-time`}
+                required
+                {...register("customDate.endTime", { required: "End time is required." })}
+              />
+              <ErrorMessage
+                errors={errors}
+                name="customDate.endTime"
+                render={({ message }) => (
+                  <HelpText variant="error" id={`${endId}-time-error`} data-cy="end-time-error">
+                    {message}
+                  </HelpText>
+                )}
+              />
+            </Box>
+          </Box>
+        </Box>
+        <Button variant="primary" onClick={onApply(popover.hide)} data-cy="custom-filter-group-popover-apply-button">
+          Apply
+        </Button>
+      </Popover>
+    </PopoverContainer>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/DefaultFilter.tsx b/packages/paste-website/src/component-examples/filter/components/DefaultFilter.tsx
new file mode 100644
index 0000000000..10220e0444
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/DefaultFilter.tsx
@@ -0,0 +1,285 @@
+/* DISCLAIMER: this is an example, not meant to be used in production */
+
+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 { DetailText } from "@twilio-paste/detail-text";
+import { FormPillGroup, useFormPillState } from "@twilio-paste/form-pill-group";
+import { Heading } from "@twilio-paste/heading";
+import { ExportIcon } from "@twilio-paste/icons/esm/ExportIcon";
+import { MoreIcon } from "@twilio-paste/icons/esm/MoreIcon";
+import { Text } from "@twilio-paste/text";
+import * as React from "react";
+
+import { applyFilters, isValueEmpty, slugify } from "../helpers";
+import type { ExtendedTableDataRow, FilterListType, FilterMapType, FilterProps, selectedFilterProps } from "../types";
+import { EmptyState } from "./EmptyState";
+import { ExtendedDataGrid } from "./ExtendedDataGrid";
+import { FilterPill } from "./FilterPill";
+import { SampleDataGrid } from "./SampleDataGrid";
+import { AddFilters } from "./filters/AddFilters";
+import { CustomFilter } from "./filters/CustomFilter";
+import { DateRangeFilter } from "./filters/DateRangeFilter";
+import { DepartmentFilter } from "./filters/DepartmentFilter";
+import { ParticipantsFilter } from "./filters/ParticipantsFilter";
+import { PlatformFilter } from "./filters/PlatformFilter";
+import { RoomSidFilter } from "./filters/RoomSidFilter";
+import { RoomTypeFilter } from "./filters/RoomTypeFilter";
+import { SearchFilter } from "./filters/SearchFilter";
+import { UniqueNameFilter } from "./filters/UniqueNameFilter";
+
+function countMoreFilters(selectedMoreFilters: Record<string, string | string[]>): number {
+  let count = 0;
+  for (const key in selectedMoreFilters) {
+    if (Array.isArray(selectedMoreFilters[key])) {
+      if (selectedMoreFilters[key].length > 0) count += 1;
+    } else {
+      count += 1;
+    }
+  }
+
+  return count;
+}
+
+// Note: update the codesandboxes if update this
+export const DefaultFilter: React.FC<React.PropsWithChildren<FilterProps>> = ({
+  data,
+  withSearch,
+  filterList,
+  addFiltersList,
+  recommendedFiltersList,
+  onMoreFiltersClick,
+  extendedTable,
+  selectedMoreFilters,
+  setSelectedMoreFilters,
+  selectedFiltersDefault,
+}) => {
+  const [selectedFilters, setSelectedFilters] = React.useState<Record<string, selectedFilterProps>>(
+    selectedFiltersDefault || {},
+  );
+  const [addedFilters, setAddedFilters] = React.useState<FilterListType>([]);
+  const pillState = useFormPillState();
+
+  const [filteredTableData, setFilteredTableData] = React.useState(data);
+
+  const handleApplyFilters = (filters: selectedFilterProps): void => {
+    const filteredData = applyFilters(filters, data as ExtendedTableDataRow[]);
+    setFilteredTableData(filteredData);
+  };
+
+  function handleClearAll(): void {
+    setSelectedFilters({});
+    setSelectedMoreFilters?.({});
+    setFilteredTableData(data);
+  }
+
+  React.useEffect(() => {
+    if (selectedMoreFilters) {
+      setSelectedFilters((e) => {
+        return { ...e, ...(selectedMoreFilters as Record<string, selectedFilterProps>) };
+      });
+      handleApplyFilters({ ...selectedFilters, ...selectedMoreFilters } as selectedFilterProps);
+    }
+
+    // for EmptyState example
+    if (selectedFiltersDefault) {
+      handleApplyFilters(selectedFiltersDefault as selectedFilterProps);
+    }
+  }, [selectedMoreFilters, selectedFiltersDefault]);
+
+  const filterMap: FilterMapType = {
+    roomType: {
+      label: "Room type",
+      component: RoomTypeFilter,
+    },
+    participants: {
+      label: "Participants",
+      component: ParticipantsFilter,
+    },
+    dateCompleted: {
+      label: "Date range",
+      component: DateRangeFilter,
+    },
+    custom: {
+      label: "Date range",
+      component: CustomFilter,
+    },
+    sid: {
+      label: "Room SID",
+      component: RoomSidFilter,
+    },
+    uniqueName: {
+      label: "Unique Name",
+      component: UniqueNameFilter,
+    },
+    department: {
+      label: "Department",
+      component: DepartmentFilter,
+    },
+    platform: {
+      label: "Platform",
+      component: PlatformFilter,
+    },
+  };
+
+  function removeFilter(filter: string): void {
+    const newFilters = { ...selectedFilters };
+    const { [filter]: _, ...rest } = newFilters;
+
+    setSelectedFilters(rest);
+    handleApplyFilters(rest as selectedFilterProps);
+  }
+
+  function addFilter(type: string, value: selectedFilterProps): void {
+    const newFilters = { ...selectedFilters, [type]: value };
+    setSelectedFilters(newFilters);
+    handleApplyFilters(newFilters as selectedFilterProps);
+  }
+
+  return (
+    <Box padding="space50">
+      {withSearch ? (
+        <Box marginBottom="space50" maxWidth="size30">
+          <SearchFilter
+            onChange={(e) => {
+              const newFilters = { ...selectedFilters, search: e.target.value };
+
+              if (newFilters.search === "") {
+                const { search: _, ...rest } = newFilters;
+
+                setSelectedFilters(rest as Record<string, selectedFilterProps>);
+                handleApplyFilters(rest as selectedFilterProps);
+                return;
+              }
+
+              setSelectedFilters(newFilters as Record<string, selectedFilterProps>);
+              handleApplyFilters(newFilters as selectedFilterProps);
+            }}
+            value={(selectedFilters.search as string) || ""}
+          />
+        </Box>
+      ) : null}
+
+      <Heading as="h1" variant="heading50">
+        Filter
+      </Heading>
+
+      <FormPillGroup {...pillState} aria-label="Filters:" size="large" variant="tree">
+        {filterList.map((pill) => {
+          return (
+            <FilterPill
+              key={pill}
+              pill={pill}
+              selectedFilters={selectedFilters}
+              filterMap={filterMap}
+              pillState={pillState}
+              onDismiss={() => {
+                removeFilter(pill);
+              }}
+              onApply={(type: string, value) => {
+                if (isValueEmpty(type, value)) {
+                  removeFilter(type);
+                  return;
+                }
+                addFilter(type, value);
+              }}
+            />
+          );
+        })}
+
+        {addedFilters.length > 0
+          ? addedFilters.map((pill: string) => {
+              return (
+                <FilterPill
+                  key={pill}
+                  pill={pill}
+                  selectedFilters={selectedFilters}
+                  filterMap={filterMap}
+                  pillState={pillState}
+                  onDismiss={() => {
+                    removeFilter(pill);
+                  }}
+                  onApply={(type: string, value) => {
+                    if (!value || (Array.isArray(value) && value.length === 0)) {
+                      removeFilter(type);
+                      return;
+                    }
+                    addFilter(type, value);
+                  }}
+                  onRemove={() => {
+                    const newFilters = addedFilters.filter((item) => item !== pill);
+                    setAddedFilters(newFilters);
+
+                    removeFilter(pill);
+                  }}
+                />
+              );
+            })
+          : null}
+
+        {addFiltersList && addFiltersList.length > 0 ? (
+          <AddFilters
+            onApply={(_: string, value) => {
+              const sluggedList = (value as FilterListType).map((item) => slugify(item));
+              setAddedFilters(sluggedList as FilterListType);
+            }}
+            addFiltersList={addFiltersList}
+            filterMap={filterMap}
+            recommendedFiltersList={recommendedFiltersList}
+            value={addedFilters}
+          />
+        ) : null}
+
+        {onMoreFiltersClick ? (
+          <Button variant="secondary" size="rounded_small" onClick={onMoreFiltersClick}>
+            <Box display="flex" alignItems="center" columnGap="space20">
+              More filters
+              {selectedMoreFilters && countMoreFilters(selectedMoreFilters) > 0 ? (
+                <Badge as="span" variant="neutral_counter" size="small">
+                  <Box minWidth="12px">{countMoreFilters(selectedMoreFilters)}</Box>
+                </Badge>
+              ) : null}
+            </Box>
+          </Button>
+        ) : null}
+      </FormPillGroup>
+
+      <Box display="flex" justifyContent="space-between" alignItems="center" columnGap="space30" marginTop="space50">
+        <Box display="flex" columnGap="space30">
+          <DetailText marginTop="space0">
+            <Text as="span" color="colorTextWeak" fontSize="fontSize30">
+              {filteredTableData.length} result{filteredTableData.length !== 1 && "s"}
+            </Text>
+          </DetailText>
+          {filteredTableData.length !== data.length ? (
+            <Button variant="link" onClick={handleClearAll}>
+              Clear all
+            </Button>
+          ) : null}
+        </Box>
+
+        <ButtonGroup>
+          <Button variant="secondary" size="small">
+            <ExportIcon decorative />
+            Export CSV
+          </Button>
+          <Button variant="secondary" size="icon_small">
+            <MoreIcon decorative={false} title="More options" />
+          </Button>
+        </ButtonGroup>
+      </Box>
+      <Box marginTop="space60">
+        {filteredTableData.length > 0 ? (
+          extendedTable ? (
+            <ExtendedDataGrid data={filteredTableData as ExtendedTableDataRow[]} showDateTime />
+          ) : (
+            <SampleDataGrid data={filteredTableData} showDateTime />
+          )
+        ) : (
+          <EmptyState handleClearAll={handleClearAll} />
+        )}
+      </Box>
+    </Box>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/EmptyState.tsx b/packages/paste-website/src/component-examples/filter/components/EmptyState.tsx
new file mode 100644
index 0000000000..a5a7f6e1e2
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/EmptyState.tsx
@@ -0,0 +1,35 @@
+/* DISCLAIMER: this is an example, not meant to be used in production */
+
+import { Box } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { Heading } from "@twilio-paste/heading";
+import { Paragraph } from "@twilio-paste/paragraph";
+import * as React from "react";
+
+import { NoResultsIllustration } from "./NoResultsIllustration";
+
+export const EmptyState: React.FC<React.PropsWithChildren<{ handleClearAll: () => void }>> = ({ handleClearAll }) => (
+  <Box
+    height="size30"
+    borderStyle="solid"
+    borderColor="colorBorderWeaker"
+    borderWidth="borderWidth20"
+    display="flex"
+    justifyContent="center"
+    alignItems="center"
+    columnGap="space110"
+  >
+    <Box height="94px" aria-hidden="true">
+      <NoResultsIllustration />
+    </Box>
+    <Box>
+      <Heading as="div" variant="heading30">
+        No results found
+      </Heading>
+      <Paragraph>Try changing the filters or the search term.</Paragraph>
+      <Button variant="primary" onClick={handleClearAll} data-cy="filter-group-empty-state-clear-button">
+        Clear all filters
+      </Button>
+    </Box>
+  </Box>
+);
diff --git a/packages/paste-website/src/component-examples/filter/components/ExtendedDataGrid.tsx b/packages/paste-website/src/component-examples/filter/components/ExtendedDataGrid.tsx
new file mode 100644
index 0000000000..7aace71a84
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/ExtendedDataGrid.tsx
@@ -0,0 +1,73 @@
+/* DISCLAIMER: this is an example, not meant to be used in production */
+
+import { Badge } from "@twilio-paste/badge";
+import {
+  DataGrid,
+  DataGridBody,
+  DataGridCell,
+  DataGridHead,
+  DataGridHeader,
+  DataGridRow,
+} from "@twilio-paste/data-grid";
+import * as React from "react";
+
+import { EXTENDED_TABLE_HEADERS } from "../constants";
+import { formatDate, formatDateTime } from "../helpers";
+import type { ExtendedDataGridProps } from "../types";
+
+export const ExtendedDataGrid: React.FC<React.PropsWithChildren<ExtendedDataGridProps>> = ({
+  data,
+  showDateTime = false,
+}) => {
+  const [renderDates, setRenderDates] = React.useState(false);
+  React.useEffect(() => {
+    setRenderDates(true);
+  }, []);
+
+  return (
+    <DataGrid aria-label="Video rooms" scrollHorizontally noWrap>
+      <DataGridHead>
+        <DataGridRow>
+          {EXTENDED_TABLE_HEADERS.map((header) => (
+            <DataGridHeader key={header}>{header}</DataGridHeader>
+          ))}
+        </DataGridRow>
+      </DataGridHead>
+      <DataGridBody>
+        {data.map(
+          ({
+            sid,
+            uniqueName,
+            roomType,
+            participants,
+            dateCompleted,
+            status,
+            hostName,
+            department,
+            platform,
+            tags,
+          }) => (
+            <DataGridRow key={sid}>
+              <DataGridCell>{sid}</DataGridCell>
+              <DataGridCell>{uniqueName}</DataGridCell>
+              <DataGridCell>{roomType}</DataGridCell>
+              <DataGridCell>{participants}</DataGridCell>
+              {renderDates && (
+                <DataGridCell>{showDateTime ? formatDateTime(dateCompleted) : formatDate(dateCompleted)}</DataGridCell>
+              )}
+              <DataGridCell>{status}</DataGridCell>
+              <DataGridCell>{hostName}</DataGridCell>
+              <DataGridCell>{department}</DataGridCell>
+              <DataGridCell>{platform}</DataGridCell>
+              <DataGridCell>
+                <Badge as="span" variant="decorative10">
+                  {tags}
+                </Badge>
+              </DataGridCell>
+            </DataGridRow>
+          ),
+        )}
+      </DataGridBody>
+    </DataGrid>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/FilterAction.tsx b/packages/paste-website/src/component-examples/filter/components/FilterAction.tsx
new file mode 100644
index 0000000000..a78d76edd7
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/FilterAction.tsx
@@ -0,0 +1,34 @@
+import { Box } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { ButtonGroup } from "@twilio-paste/button-group";
+import { DeleteIcon } from "@twilio-paste/icons/esm/DeleteIcon";
+import React from "react";
+
+export const FilterAction: React.FC<{
+  onApply: () => void;
+  onClear: (() => void) | null;
+  onRemove?: () => void;
+}> = ({ onApply, onClear, onRemove }) => {
+  return (
+    <Box marginTop="space70" display="flex" alignItems="center" justifyContent="space-between">
+      <ButtonGroup>
+        <Button variant="primary" onClick={onApply}>
+          Apply
+        </Button>
+        {onClear ? (
+          <Button variant="link" onClick={onClear}>
+            Clear all
+          </Button>
+        ) : (
+          <></>
+        )}
+      </ButtonGroup>
+      {onRemove ? (
+        <Button variant="link" onClick={onRemove}>
+          <DeleteIcon decorative />
+          <span>Remove filter</span>
+        </Button>
+      ) : null}
+    </Box>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/FilterPill.tsx b/packages/paste-website/src/component-examples/filter/components/FilterPill.tsx
new file mode 100644
index 0000000000..2b46bd7198
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/FilterPill.tsx
@@ -0,0 +1,108 @@
+import { Badge } from "@twilio-paste/badge";
+import { Box } from "@twilio-paste/box";
+import { formatReturnDate } from "@twilio-paste/date-picker";
+import { type useFormPillState } from "@twilio-paste/form-pill-group";
+import { PlusIcon } from "@twilio-paste/icons/esm/PlusIcon";
+import { Popover, PopoverContainer, PopoverFormPillButton, usePopoverState } from "@twilio-paste/popover";
+import React from "react";
+
+import type { FilterMapType, ParticipantsType, selectedFilterProps } from "../types";
+
+const multipleSelectFilterList = new Set(["sid", "uniqueName", "hostName", "tags", "department", "platform"]);
+
+const FilterPillView: React.FC<{
+  label: string;
+  selectedType: string | null;
+  selectedValue: selectedFilterProps;
+}> = ({ label, selectedType, selectedValue }) => {
+  if (selectedType === "roomType" && typeof selectedValue === "string") {
+    return (
+      <span>
+        {label}: {selectedValue}
+      </span>
+    );
+  }
+
+  if (selectedType === "participants") {
+    const { min, max } = selectedValue as ParticipantsType;
+
+    return (
+      <span>
+        {label}: {`${min} - ${max}`}
+      </span>
+    );
+  }
+
+  if (selectedType === "dateCompleted" || selectedType === "custom") {
+    const { startDate, endDate } = selectedValue as { startDate: string; endDate: string };
+
+    return (
+      <span>
+        {label}: {formatReturnDate(startDate, "MMM dd, yyyy")} - {formatReturnDate(endDate, "MMM dd, yyyy")}
+      </span>
+    );
+  }
+
+  if (selectedType && multipleSelectFilterList.has(selectedType)) {
+    const value = selectedValue as string[];
+
+    return (
+      <Box display="flex" alignItems="center" columnGap="space20">
+        {label}
+        {value.length === 1 ? (
+          `: ${value[0]}`
+        ) : (
+          <Badge as="span" variant="neutral_counter" size="small">
+            <Box textAlign="center" minWidth="12px">
+              {value.length}
+            </Box>
+          </Badge>
+        )}
+      </Box>
+    );
+  }
+
+  return <span>{label}</span>;
+};
+
+export const FilterPill: React.FC<{
+  pill: string;
+  selectedFilters: Record<string, selectedFilterProps>;
+  filterMap: FilterMapType;
+  pillState: ReturnType<typeof useFormPillState>;
+  onDismiss?: () => void;
+  onApply: (type: string, value: selectedFilterProps) => void;
+  onRemove?: () => void;
+}> = ({ pill, selectedFilters, filterMap, pillState, onDismiss, onApply, onRemove }) => {
+  const popover = usePopoverState({ baseId: pill });
+
+  const isSelected = pill in selectedFilters;
+  const PopoverComponent = filterMap[pill].component;
+  const value = selectedFilters[pill];
+
+  return (
+    <PopoverContainer key={pill} state={popover}>
+      <PopoverFormPillButton
+        {...pillState}
+        selected={isSelected}
+        onDismiss={
+          isSelected
+            ? (e) => {
+                onDismiss?.();
+
+                e.stopPropagation();
+                popover.hide();
+              }
+            : undefined
+        }
+      >
+        {!isSelected ? <PlusIcon decorative /> : null}
+        <FilterPillView label={filterMap[pill].label} selectedType={isSelected ? pill : null} selectedValue={value} />
+      </PopoverFormPillButton>
+
+      <Popover aria-label={pill} width="size40">
+        <PopoverComponent value={value} onApply={onApply} popover={popover} onRemove={onRemove} />
+      </Popover>
+    </PopoverContainer>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/NoResultsIllustration.tsx b/packages/paste-website/src/component-examples/filter/components/NoResultsIllustration.tsx
new file mode 100644
index 0000000000..296fde3352
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/NoResultsIllustration.tsx
@@ -0,0 +1,122 @@
+/* DISCLAIMER: this is an example, not meant to be used in production */
+
+export const NoResultsIllustration = (): JSX.Element => (
+  <svg width="100%" height="100%" viewBox="0 0 223 94" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M41.749 27.436c-4.296 5.97-6.855 13.254-7.019 20.551-.106 5.04.692 10.128 2.406 14.864 2.746 7.579 8.216 13.877 15.504 17.366 6.643 3.173 14.296 3.901 21.573 2.773 11.443-1.774 22.476-8.636 27.311-19.176 6.303-13.736 1.902-31.525-9.014-41.148-9.624-8.484-25.152-10.951-37.323-6.028-5.41 2.185-10.058 6.075-13.45 10.798h.012Z"
+      fill="#EDF6FF"
+    />
+    <path
+      d="M151.781 34.92c-2.5 3.479-3.991 7.72-4.085 11.962-.058 2.938.399 5.899 1.409 8.66 1.596 4.406 4.777 8.084 9.025 10.117 3.862 1.845 8.322 2.28 12.559 1.621 6.666-1.034 13.086-5.029 15.903-11.162 3.674-8.002 1.104-18.354-5.246-23.958-5.599-4.935-14.648-6.38-21.725-3.514-3.145 1.27-5.857 3.537-7.828 6.287l-.012-.012Z"
+      fill="#FBEDE3"
+    />
+    <path
+      d="M136.416 3.502h-.798c-.528 0-1.056 0-1.573-.012-1.033 0-2.054-.024-3.04-.024-1.983-.023-3.873-.035-5.68-.047-3.615-.023-6.89-.058-9.848-.082-5.915-.035-10.586-.047-14.213-.035-7.277.023-10.434.082-11.314.094-2.242.047-3.909.106-5.012.176-1.103.07-1.643.141-1.655.2v.023c-.2-.34-.48 4.019-.692 14.84-.047 2.362-.223 11.88-.493 25.427-.235 6.78.047 14.582-.094 22.96 0 .258-.012.529-.023.787v1.199c0 .129 0 .305.023.446.047.306.14.611.293.882.294.552.81.998 1.409 1.198a7.254 7.254 0 0 0 1.69.282c.563.035 1.103.035 1.655.047.551 0 1.091.012 1.643.023h3.333c4.46-.023 9.026-.14 13.65-.188a275.09 275.09 0 0 1 6.96 0c2.336.048 4.671.083 7.019.13l7.03.14 1.749.036 1.749.059c1.173.035 2.371.07 3.568-.177.598-.129 1.209-.328 1.737-.693.54-.364.962-.916 1.173-1.527.235-.6.247-1.257.27-1.81.024-.575.059-1.151.083-1.727.105-2.303.211-4.594.293-6.862.164-4.536.293-8.977.376-13.29.176-8.624.234-16.696.199-23.828 0-3.572-.059-6.898-.106-9.953-.035-1.527-.058-2.984-.093-4.359-.024-.693-.036-1.363-.059-2.009 0-.329-.012-.646-.024-.963"
+      fill="#fff"
+    />
+    <path
+      d="M137.485 11.186c0 1.786.082 6.38.07 13.09-.035 3.348-.07 7.226-.117 11.55-.071 4.312-.012 9.07-.212 14.17-.14 5.1-.293 10.552-.575 16.262-.129 1.422.082 2.95-.704 3.984-.763 1.057-2.253 1.362-3.674 1.433-1.443.07-2.957-.07-4.471-.082-1.514-.035-3.04-.059-4.578-.094-3.075-.059-6.185-.118-9.342-.188a517.035 517.035 0 0 0-9.542 0c-3.204.047-6.42.082-9.66.129-1.62.023-3.239.047-4.847.035-1.62 0-3.251 0-4.824-.105a5.682 5.682 0 0 1-1.115-.212 2.127 2.127 0 0 1-.857-.505c-.504-.494-.68-1.14-.645-1.916.023-1.621.035-3.242.059-4.852 0-3.231-.012-6.451-.024-9.659-.082-6.392.176-12.678.258-18.8.118-6.122.235-12.067.352-17.73.06-2.832.13-5.605.235-8.284.047-1.34.106-2.668.2-3.96.035-.564.152-1.563.129-1.293l.364-.047.47-.035c.316-.023.621-.035.938-.047 10.035-.34 18.709-.223 25.211-.223 6.514.035 10.892.07 12.417.07 15.951.141 20.141-.775-1.443-.963-1.514 0-5.939-.024-12.547-.059-3.31 0-7.159-.035-11.467.024-2.148.023-4.413.035-6.784.058-1.185 0-2.394.071-3.638.106l-1.878.07c-.317 0-.634.024-.95.048l-.482.047c-.188.023-.258.011-.622.094a.746.746 0 0 0-.317.176c-.094.106-.14.258-.176.4-.059.305-.059.375-.082.575l-.082.987c-.035.658-.07 1.316-.118 1.974-.047 1.328-.105 2.668-.152 4.042-.059 2.726-.13 5.546-.2 8.425-.105 5.746-.223 11.773-.328 17.966-.059 3.102-.13 6.239-.188 9.423-.047 3.184 0 6.392.012 9.623.023 3.232.035 6.475 0 9.73-.024.81-.047 1.633-.024 2.455-.023.928.434 1.892 1.209 2.444.81.588 1.725.635 2.547.717.822.023 1.655.059 2.476.059 6.538.07 13.063-.177 19.472-.188 6.408-.07 12.734.153 18.861.235 1.537.023 3.04.07 4.554.117 1.502.024 3.098.035 4.565-.67a3.555 3.555 0 0 0 1.679-1.739c.34-.74.375-1.574.399-2.267.059-1.445.129-2.879.188-4.289.27-5.652.34-11.033.493-16.027.082-10 .152-18.483.211-24.722l-.129-11.233c-.258-8.954-.74-8.672-.611-.317l.036-.012Z"
+      fill="#121C2D"
+    />
+    <path
+      d="M96.71 11.609c-.469-.117-6.736-.211-7.135-.211-.517 0-.681.951.023.951.399 0 6.854-.082 7.112-.14.294-.06.27-.541 0-.612v.012ZM130.795 11.644c-1.749.06-25.763-.622-27.3-.481-1.984.023-2.477.975.187.951 1.479-.129 26.08.365 27.077.13 1.104-.07 1.068-.553.036-.611v.011Z"
+      fill="#121C2D"
+    />
+    <path
+      d="M129.691 15.534c-2.488-.142-36.396-.659-38.532-.682-2.782-.035-3.533.905.247.952 2.1.023 36.83.364 38.226.329 1.561-.035 1.526-.517.071-.6h-.012Z"
+      fill="#51A5DF"
+    />
+    <path
+      d="M117.907 20.022c-1.784-.117-26.044-.27-27.581-.27-1.996 0-2.535.94.164.951 1.514 0 26.384-.023 27.382-.07 1.115-.059 1.08-.54.035-.611Z"
+      fill="#EE2F46"
+    />
+    <path
+      d="M130.196 20.034c-.61-.118-8.815-.212-9.331-.212-.669 0-.868.952.047.952.516 0 8.943-.082 9.284-.141.375-.059.364-.54 0-.611v.012ZM129.069 25.204c-1.221-.094-10.188-.34-19.108-.4-8.92-.082-17.793-.164-18.85-.176-2.746-.035-3.474.905.235.952 1.033 0 10.106.035 19.084.059 8.979 0 17.864.164 18.556.164 1.538-.023 1.503-.505.071-.6h.012ZM96.71 29.352c-.469-.118-6.736-.212-7.135-.212-.517 0-.681.952.023.952.399 0 6.854-.082 7.112-.141.294-.059.27-.54 0-.611v.012Z"
+      fill="#121C2D"
+    />
+    <path
+      d="M130.795 29.387c-1.749.058-25.763-.623-27.3-.482-1.984.023-2.477.975.187.952 1.479-.13 26.08.364 27.077.129 1.104-.07 1.068-.552.036-.611v.012Z"
+      fill="#EE2F46"
+    />
+    <path
+      d="M129.691 33.264c-2.488-.14-36.396-.658-38.532-.681-2.782-.035-3.533.904.247.952 2.1.023 36.83.364 38.226.329 1.561-.036 1.526-.517.071-.6h-.012ZM117.907 37.765c-1.784-.118-26.044-.27-27.581-.27-1.996 0-2.535.94.164.951 1.514 0 26.384-.023 27.382-.07 1.115-.06 1.08-.54.035-.611Z"
+      fill="#121C2D"
+    />
+    <path
+      d="M130.196 37.764c-.61-.117-8.815-.211-9.331-.211-.669 0-.868.952.047.952.516 0 8.943-.083 9.284-.141.375-.059.364-.54 0-.611v.011Z"
+      fill="#EE2F46"
+    />
+    <path
+      d="M129.069 42.935c-1.221-.094-10.188-.341-19.108-.4-8.92-.082-17.793-.164-18.85-.176-2.746-.035-3.474.905.235.952 1.033 0 10.106.035 19.084.058 8.979 0 17.864.165 18.556.165 1.538-.024 1.503-.505.071-.6h.012Z"
+      fill="#51A5DF"
+    />
+    <path
+      d="M106.616 47.024c-1.068-.106-15.563-.177-16.478-.177-1.186 0-1.526.952.082.952.904 0 15.786-.117 16.384-.164.669-.06.634-.54.012-.611Z"
+      fill="#EE2F46"
+    />
+    <path
+      d="M131.006 47.94c-1.267.094-18.696-.67-19.823-.493-1.444.011-1.796.963.141.951.54-.011 5.258-.058 9.952.118 4.695.164 9.355.07 9.719.035.809-.07.774-.552.023-.61h-.012Z"
+      fill="#121C2D"
+    />
+    <path
+      d="M129.691 51.818c-2.488-.142-36.396-.658-38.532-.682-2.782-.035-3.533.905.247.952 2.1.023 36.83.364 38.226.329 1.561-.035 1.526-.517.071-.6h-.012Z"
+      fill="#EE2F46"
+    />
+    <path
+      d="M117.907 56.318c-1.784-.118-26.044-.27-27.581-.27-1.996 0-2.535.94.164.951 1.514 0 26.384-.023 27.382-.07 1.115-.059 1.08-.54.035-.611Z"
+      fill="#51A5DF"
+    />
+    <path
+      d="M130.196 56.318c-.61-.118-8.815-.212-9.331-.212-.669 0-.868.952.047.952.516 0 8.943-.082 9.284-.141.375-.059.364-.54 0-.611v.012Z"
+      fill="#EE2F46"
+    />
+    <path
+      d="M129.069 61.488c-1.221-.094-10.188-.34-19.108-.4-8.92-.082-17.793-.164-18.85-.176-2.746-.035-3.474.905.235.952 1.033 0 10.106.035 19.084.059 8.979 0 17.864.164 18.556.164 1.538-.023 1.503-.505.071-.6h.012Z"
+      fill="#121C2D"
+    />
+    <path
+      d="M130.901 34.815c-7.066 2.056-10.235 9.612-9.601 16.568a13.326 13.326 0 0 0 2.359 6.427c3.052 4.324 8.345 6.04 13.403 5.593a17.094 17.094 0 0 0 4.331-.952c7.348-2.702 10.059-10.798 8.181-18.107a18.176 18.176 0 0 0-1.373-3.642c-1.432-2.785-3.65-4.97-6.585-6.004-2.934-1.034-6.208-1.222-9.201-.435"
+      fill="#fff"
+    />
+    <path
+      d="M134.785 34.145c.657-.035 2.394-.2 4.847.341 1.221.282 2.617.705 3.955 1.563 1.338.846 2.63 2.103 3.627 3.701 1.01 1.598 1.772 3.525 2.172 5.617.434 2.08.481 4.347.046 6.591-.399 2.245-1.384 4.442-2.84 6.298-1.514 1.81-3.533 3.22-5.821 3.948-4.554 1.493-9.812.94-13.568-1.562a12.17 12.17 0 0 1-4.214-4.853c-.915-1.88-1.291-3.866-1.302-5.734-.071-3.76.974-6.92 2.183-8.977 1.197-2.103 2.476-3.126 2.887-3.502 2.253-1.868 4.108-2.432 4.143-2.75.023-.14-.364-.128-1.279.107-.881.293-2.324.846-3.897 2.303-.434.4-1.749 1.621-2.969 3.912-1.186 2.292-2.195 5.7-1.937 9.706.082 1.997.657 4.148 1.772 6.122 1.127 1.962 2.817 3.748 4.953 4.923 4.249 2.385 9.824 2.679 14.53.717 1.198-.459 2.277-1.175 3.287-1.95a14.167 14.167 0 0 0 2.558-2.81c1.409-2.09 2.219-4.5 2.489-6.861.528-4.759-.81-9.306-3.122-12.443-1.162-1.563-2.594-2.75-4.038-3.502-1.455-.752-2.852-1.093-4.037-1.316-2.383-.411-3.956-.211-4.331-.188-1.737.188-2.5.611-2.465.729.035.14.845 0 2.394-.118l-.023-.012ZM172.966 90.91c.352-.059 1.256-.212 2.371-.882 1.079-.67 2.464-1.868 2.981-3.889a3.186 3.186 0 0 0-.047-1.621c-.153-.54-.411-1.034-.716-1.493a36.851 36.851 0 0 0-2.019-2.69c-1.455-1.786-3.098-3.607-4.789-5.393-3.392-3.584-7.018-7.05-10.128-9.765-1.561-1.363-2.993-2.526-4.226-3.419-.622-.447-1.173-.823-1.702-1.105-.539-.27-.939-.528-1.549-.493h.082c-1.432-.117-1.655-.317-1.784-.34-.657-.26-.986-.67-1.173-1.011-.188-.341-.2-.611-.317-.694-.082-.07-.352.094-.352.717.011.306.117.694.41 1.07.282.387.799.728 1.385.904.094 0 .259.165 1.773.294h.082c.07 0 .364.059.774.258.399.212.904.506 1.468.894 1.138.775 2.535 1.891 4.096 3.219 3.122 2.655 6.866 6.192 10.387 9.846 1.76 1.822 3.462 3.69 4.964 5.5 1.397 1.809 3.181 3.595 2.63 5.334-.505 1.727-1.784 2.844-2.747 3.407-.998.576-1.737.682-1.913.74-.857.177-1.291.26-1.303.4-.012.118.446.318 1.35.2l.012.012Z"
+      fill="#121C2D"
+    />
+    <path
+      d="M170.089 88.56c-.622-.729-4.988-4.982-9.789-9.647-2.382-2.338-4.871-4.794-6.971-7.027-1.045-1.116-2.007-2.173-2.794-3.125-.786-.94-1.42-1.857-1.678-2.444-.282-2.115-.564-3.102-.857-3.443-.458-.623-1.115-.846-1.561-.81-.458.035-.646.27-.634.375.012.13.2.153.47.27.246.095.739.353 1.033.858.035.13.258.341.622 3.02.481 1.222 2.007 2.996 4.084 5.229 2.077 2.209 4.671 4.759 7.23 7.226 5.117 4.9 9.964 9.53 10.387 9.929 1.021.952 1.338.587.469-.388l-.011-.023Z"
+      fill="#121C2D"
+    />
+    <path
+      d="M152.179 56.118c.34-.717 1.009-2.703 1.115-5.64.059-1.469.059-3.173-.188-5.053-.246-1.88-.763-3.948-1.796-5.969-2.007-4.03-6.255-7.778-11.689-8.777-5.399-.987-11.444.846-15.646 4.806-2.101 1.962-3.744 4.43-4.671 7.12-.939 2.68-1.256 5.535-.939 8.225.258 2.703 1.139 5.253 2.347 7.45 1.256 2.185 2.853 4.042 4.672 5.37 1.795 1.363 3.791 2.173 5.633 2.585 1.843.41 3.545.481 4.977.423 2.887-.118 4.777-.729 5.422-.929 1.69-.564 2.958-1.386 3.697-2.103.752-.717 1.033-1.269.998-1.386-.047-.141-.399.14-1.209.716-.821.564-2.183 1.41-4.366 2.045-.599.164-2.43.693-5.235.728-2.746.036-6.69-.493-9.999-3.337-3.357-2.702-5.857-7.437-6.139-12.69-.129-2.62.294-5.346 1.373-7.86a18.002 18.002 0 0 1 2.054-3.56 19.686 19.686 0 0 1 2.864-2.985c4.272-3.537 10.211-4.923 15.235-3.572 5.046 1.351 8.826 5.158 10.434 9.047 1.655 3.937 1.596 7.708 1.467 10.352-.141 2.68-.763 4.265-.916 4.653-.692 1.75-1.349 2.432-1.22 2.562.058.082.939-.47 1.725-2.186v-.035ZM176.438 85.505c-.176-.564-1.408-2.491-3.486-4.783-2.042-2.314-4.812-5.1-7.652-7.778a196.988 196.988 0 0 0-8.087-7.238c-.587-.494-1.127-.94-1.608-1.351-.504-.388-.868-.8-1.467-1.081-1.068-.412-1.702-.4-1.913-.47-.575-.106-.962-.188-1.244-.282-.27-.094-.47-.188-.587-.141-.106.023-.164.258.117.61.282.365.939.659 1.749.788.211.059.939.082 1.655.446.141.083.352.259.575.447.223.176.458.376.704.576a223.307 223.307 0 0 1 9.824 8.613c2.876 2.667 5.646 5.428 7.629 7.649 2.031 2.209 3.122 3.96 3.193 4.218.305.564.34.787.492.834.13.059.353-.4.083-1.034l.023-.023Z"
+      fill="#121C2D"
+    />
+    <mask id="a" maskUnits="userSpaceOnUse" x="121" y="34" width="29" height="30">
+      <path
+        d="M131.054 35.074c-6.878 2.02-9.965 9.411-9.343 16.226.2 2.256.998 4.454 2.289 6.298 2.969 4.23 8.122 5.91 13.051 5.476a16.695 16.695 0 0 0 4.214-.928c7.147-2.644 9.788-10.575 7.957-17.731a17.352 17.352 0 0 0-1.338-3.56c-1.397-2.726-3.544-4.865-6.408-5.875-2.864-1.01-6.045-1.199-8.955-.423l-1.456.54-.011-.023Z"
+        fill="#fff"
+      />
+    </mask>
+    <g mask="url(#a)">
+      <path
+        d="M147.519 35.309c-1.35-.153-19.706-.87-20.868-.917-1.514-.059-1.937.881.105.952 1.139.035 19.953.587 20.716.564.845-.035.845-.517.047-.6Z"
+        fill="#EE2F46"
+      />
+      <path
+        d="M148.576 42.688c-2.066-.13-17.159-.494-32.171-.54-15.023-.048-29.964-.165-31.736-.212-4.613-.07-5.845.87.41.963 1.75.047 17.019.106 32.136.094 15.117-.012 30.094.27 31.244.294 2.594 0 2.523-.482.105-.6h.012Z"
+        fill="#51A5DF"
+      />
+      <path
+        d="M151.065 49.832c-1.127-.024-9.261-.165-17.371-.306a654.995 654.995 0 0 0-17.147-.07c-2.5.023-3.134.987.234.951.939-.011 9.179-.129 17.348-.035 8.168.094 16.255.094 16.877.07 1.397-.046 1.362-.528.059-.61Z"
+        fill="#121C2D"
+      />
+      <path
+        d="M154.585 57.775c-1.995-.106-16.573-.341-31.068-.482-14.506-.141-28.931-.447-30.645-.505-4.46-.118-5.657.81.388.963 3.38.259 59.001.552 61.231.635 2.5-.012 2.441-.506.105-.6l-.011-.011Z"
+        fill="#EE2F46"
+      />
+    </g>
+    <path
+      d="M132.837 75.564c-1.878-.023-9.671-.106-20.411-.223-5.375 0-11.478.059-17.945-.012-3.228-.047-6.561-.106-9.906-.305-.833-.06-1.678-.118-2.5-.224-.41-.047-.822-.117-1.209-.2-.41-.093-.645-.176-.939-.458-1.138-.998-1.303-2.796-1.314-4.441.023-27.319.68-54.532.81-57.751.129-4.195.035-6.85-.2-7.05-.223-.2-.599 2.091-.775 7.778-.047 1.586-.258 9.341-.41 20.128-.06 5.393-.13 11.55-.2 18.083l-.07 10.023c0 1.704 0 3.42-.012 5.135.023 1.727-.047 3.43.094 5.205.105.881.293 1.798.774 2.62.247.411.576.776.951 1.07a2.1 2.1 0 0 0 .68.364c.236.07.459.129.67.164 1.749.306 3.439.376 5.14.47 3.392.153 6.714.188 9.953.212 6.456-.012 12.5-.036 17.758-.047 10.516.047 17.852.082 18.908.082 4.707-.024 4.566-.505.165-.6l-.012-.023Z"
+      fill="#121C2D"
+    />
+  </svg>
+);
diff --git a/packages/paste-website/src/component-examples/filter/components/SampleDataGrid.tsx b/packages/paste-website/src/component-examples/filter/components/SampleDataGrid.tsx
new file mode 100644
index 0000000000..01dce8f86d
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/SampleDataGrid.tsx
@@ -0,0 +1,50 @@
+/* DISCLAIMER: this is an example, not meant to be used in production */
+
+import {
+  DataGrid,
+  DataGridBody,
+  DataGridCell,
+  DataGridHead,
+  DataGridHeader,
+  DataGridRow,
+} from "@twilio-paste/data-grid";
+import * as React from "react";
+
+import { TABLE_HEADERS } from "../constants";
+import { formatDate, formatDateTime } from "../helpers";
+import type { SampleDataGridProps } from "../types";
+
+export const SampleDataGrid: React.FC<React.PropsWithChildren<SampleDataGridProps>> = ({
+  data,
+  showDateTime = false,
+}) => {
+  const [renderDates, setRenderDates] = React.useState(false);
+  React.useEffect(() => {
+    setRenderDates(true);
+  }, []);
+
+  return (
+    <DataGrid aria-label="Video rooms" scrollHorizontally noWrap>
+      <DataGridHead>
+        <DataGridRow>
+          {TABLE_HEADERS.map((header) => (
+            <DataGridHeader key={header}>{header}</DataGridHeader>
+          ))}
+        </DataGridRow>
+      </DataGridHead>
+      <DataGridBody>
+        {data.map(({ sid, uniqueName, roomType, participants, dateCompleted }) => (
+          <DataGridRow key={sid}>
+            <DataGridCell>{sid}</DataGridCell>
+            <DataGridCell>{uniqueName}</DataGridCell>
+            <DataGridCell>{roomType}</DataGridCell>
+            <DataGridCell>{participants}</DataGridCell>
+            {renderDates && (
+              <DataGridCell>{showDateTime ? formatDateTime(dateCompleted) : formatDate(dateCompleted)}</DataGridCell>
+            )}
+          </DataGridRow>
+        ))}
+      </DataGridBody>
+    </DataGrid>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/filters/AddFilters.tsx b/packages/paste-website/src/component-examples/filter/components/filters/AddFilters.tsx
new file mode 100644
index 0000000000..929439bee5
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/filters/AddFilters.tsx
@@ -0,0 +1,158 @@
+import { Badge } from "@twilio-paste/badge";
+import { Box } from "@twilio-paste/box";
+import { Checkbox, CheckboxGroup } from "@twilio-paste/checkbox";
+import { MultiselectCombobox, useMultiselectCombobox } from "@twilio-paste/combobox";
+import type { Item } from "@twilio-paste/combobox/dist/types";
+import type { UseMultipleSelectionStateChange } from "@twilio-paste/dropdown-library";
+import { PlusIcon } from "@twilio-paste/icons/esm/PlusIcon";
+import { Popover, PopoverButton, PopoverContainer, usePopoverState } from "@twilio-paste/popover";
+import { Text } from "@twilio-paste/text";
+import React from "react";
+
+import { slugify } from "../../helpers";
+import type { FilterListType, FilterMapType } from "../../types";
+import { FilterAction } from "../FilterAction";
+
+function getFilteredItems(inputValue: string, addFiltersList: FilterListType): FilterListType {
+  const lowerCasedInputValue = inputValue.toLowerCase();
+
+  return addFiltersList.filter((item) => {
+    return item.toLowerCase().includes(lowerCasedInputValue);
+  });
+}
+
+const EmptyState = (): React.ReactElement => (
+  <Box paddingY="space40" paddingX="space50">
+    <Text as="span" fontStyle="italic" color="colorTextWeak">
+      No results found
+    </Text>
+  </Box>
+);
+
+export const AddFilters: React.FC<{
+  onApply?: (type: string, value: Item[]) => void;
+  addFiltersList: FilterListType;
+  filterMap: FilterMapType;
+  recommendedFiltersList?: FilterListType;
+  value: string[];
+}> = ({ onApply, addFiltersList, filterMap, recommendedFiltersList, value }) => {
+  const [inputValue, setInputValue] = React.useState("");
+
+  const popover = usePopoverState({ baseId: "add-filters" });
+  const filteredItems = React.useMemo(() => getFilteredItems(inputValue, addFiltersList), [inputValue, addFiltersList]);
+
+  const onSelectedItemsChange = React.useCallback((comboboxItems: UseMultipleSelectionStateChange<Item>) => {
+    return comboboxItems.selectedItems;
+  }, []);
+
+  const state = useMultiselectCombobox({
+    initialSelectedItems: [],
+    onSelectedItemsChange,
+  });
+
+  /*
+   * this will be used to set the selected items when the popover is triggered,
+   * for it to work, we need to fix popover closing on multiselect click
+   */
+
+  /*
+   * React.useEffect(() => {
+   *   if (popover.visible) {
+   *  state.setSelectedItems(value.map((item) => filterMap[item].label));
+   * }
+   * }, [popover.visible]);
+   */
+
+  return (
+    <PopoverContainer state={popover}>
+      <PopoverButton
+        variant="secondary"
+        size="rounded_small"
+        // @ts-expect-error types are wrong
+        borderRadius="borderRadiusPill"
+      >
+        <PlusIcon decorative />
+        <span>Add filters</span>
+
+        {value.length > 0 ? (
+          <Box marginLeft="space20">
+            <Badge variant="neutral_counter" as="span" size="small">
+              {value.length}
+            </Badge>
+          </Box>
+        ) : null}
+      </PopoverButton>
+
+      <Popover aria-label="add-filters" width="size40">
+        <Box>
+          <MultiselectCombobox
+            state={state}
+            labelText="Search"
+            selectedItemsLabelText="Selected filters"
+            items={filteredItems.map((item) => filterMap[item].label)}
+            emptyState={EmptyState}
+            onInputValueChange={({ inputValue: newInputValue = "" }) => {
+              setInputValue(newInputValue);
+            }}
+            onSelectedItemsChange={(comboboxItems) => {
+              const { selectedItems } = comboboxItems;
+              if (selectedItems) {
+                const sluggedItems = selectedItems.map((item) => slugify(item as string));
+                state.setSelectedItems(sluggedItems);
+              }
+            }}
+          />
+
+          {recommendedFiltersList ? (
+            <Box marginTop="space70">
+              <CheckboxGroup name="rec-filters" legend="Filters" helpText="Info that helps a user with this field.">
+                {recommendedFiltersList.map((item) => {
+                  const labelName = filterMap[item].label;
+                  return (
+                    <Checkbox
+                      key={labelName}
+                      id={labelName}
+                      value={labelName}
+                      checked={state.selectedItems.includes(labelName)}
+                      onChange={(e) => {
+                        let selectedCheckedItems = [];
+
+                        if (e.target.checked) {
+                          selectedCheckedItems = [...state.selectedItems, labelName];
+                        } else {
+                          selectedCheckedItems = state.selectedItems.filter(
+                            (selectedItem) => selectedItem !== labelName,
+                          );
+                        }
+                        state.setSelectedItems(selectedCheckedItems);
+                      }}
+                    >
+                      {labelName}
+                    </Checkbox>
+                  );
+                })}
+              </CheckboxGroup>
+            </Box>
+          ) : null}
+
+          <FilterAction
+            onApply={() => {
+              if (onApply && popover) {
+                onApply("add-filter", state.selectedItems);
+                popover.hide();
+              }
+            }}
+            onClear={
+              state.selectedItems.length > 0
+                ? () => {
+                    setInputValue("");
+                    state.setSelectedItems([]);
+                  }
+                : null
+            }
+          />
+        </Box>
+      </Popover>
+    </PopoverContainer>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/filters/CustomFilter.tsx b/packages/paste-website/src/component-examples/filter/components/filters/CustomFilter.tsx
new file mode 100644
index 0000000000..8745275c9c
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/filters/CustomFilter.tsx
@@ -0,0 +1,158 @@
+import { Box } from "@twilio-paste/box";
+import { DatePicker } from "@twilio-paste/date-picker";
+import { HelpText } from "@twilio-paste/help-text";
+import { Label } from "@twilio-paste/label";
+import type { usePopoverState } from "@twilio-paste/popover";
+import { Radio, RadioGroup } from "@twilio-paste/radio-group";
+import { useUID } from "@twilio-paste/uid-library";
+import React from "react";
+
+import { DATE_RANGES } from "../../constants";
+import { FilterAction } from "../FilterAction";
+
+export const CustomFilter: React.FC = ({
+  onApply,
+  popover,
+  value: Value,
+}: {
+  onApply?: (
+    type: string,
+    value: {
+      startDate: string;
+      endDate: string;
+      type: string;
+    },
+  ) => void;
+  popover?: ReturnType<typeof usePopoverState>;
+  value?: {
+    startDate: string;
+    endDate: string;
+    type: string;
+  };
+}) => {
+  const startDateID = useUID();
+  const endDateID = useUID();
+
+  const [startDate, setStartDate] = React.useState(Value?.startDate || "");
+  const [endDate, setEndDate] = React.useState(Value?.endDate || "");
+  const [selectedDate, setSelectedDate] = React.useState<string>(Value?.type || "");
+  const [showError, setShowError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    setStartDate(Value?.startDate || "");
+    setEndDate(Value?.endDate || "");
+    setSelectedDate(Value?.type || "");
+  }, [Value, popover?.visible]);
+
+  function getStartDate(): string {
+    switch (selectedDate) {
+      case "1": {
+        const oneDayAgo = new Date();
+        oneDayAgo.setDate(oneDayAgo.getDate() - 1);
+        return oneDayAgo.toISOString().split("T")[0];
+      }
+      case "7": {
+        const sevenDaysAgo = new Date();
+        sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+        return sevenDaysAgo.toISOString().split("T")[0];
+      }
+      case "14": {
+        const fourteenDaysAgo = new Date();
+        fourteenDaysAgo.setDate(fourteenDaysAgo.getDate() - 14);
+        return fourteenDaysAgo.toISOString().split("T")[0];
+      }
+      default: {
+        return startDate;
+      }
+    }
+  }
+
+  return (
+    <Box>
+      <RadioGroup
+        name="custom"
+        legend="Date range"
+        onChange={(value) => {
+          setSelectedDate(value);
+          setShowError(null);
+        }}
+        value={selectedDate}
+      >
+        {DATE_RANGES.map(({ name, value }) => (
+          <Radio key={value} id={value} value={value} name="custom" checked={selectedDate === value}>
+            {name}
+          </Radio>
+        ))}
+      </RadioGroup>
+      {selectedDate === "Custom" ? (
+        <Box display="flex" columnGap="space50" marginTop="space50">
+          <Box>
+            <Label htmlFor={startDateID}>Start</Label>
+            <DatePicker
+              id={startDateID}
+              onChange={(e) => {
+                setStartDate(e.target.value);
+                setShowError(null);
+              }}
+              value={startDate}
+            />
+          </Box>
+          <Box>
+            <Label htmlFor={endDateID}>End</Label>
+            <DatePicker
+              id={endDateID}
+              onChange={(e) => {
+                setEndDate(e.target.value);
+                setShowError(null);
+              }}
+              value={endDate}
+            />
+          </Box>
+        </Box>
+      ) : (
+        <></>
+      )}
+
+      {showError ? (
+        <Box marginTop="space50">
+          <HelpText variant="error">{showError}</HelpText>
+        </Box>
+      ) : null}
+
+      <FilterAction
+        onApply={() => {
+          if (onApply && popover) {
+            if (selectedDate === "Custom" && (startDate === "" || endDate === "")) {
+              setShowError("Please enter custom date");
+              return;
+            }
+
+            if (selectedDate === "Custom" && startDate > endDate) {
+              setShowError("End date has to be after the start date");
+              return;
+            }
+
+            setShowError(null);
+
+            onApply("custom", {
+              startDate: selectedDate === "Custom" ? startDate : getStartDate(),
+              endDate: selectedDate === "Custom" ? endDate : new Date().toISOString().split("T")[0],
+              type: selectedDate,
+            });
+            popover.hide();
+          }
+        }}
+        onClear={
+          selectedDate !== null
+            ? () => {
+                setStartDate("");
+                setEndDate("");
+                setSelectedDate("");
+                setShowError(null);
+              }
+            : null
+        }
+      />
+    </Box>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/filters/DateRangeFilter.tsx b/packages/paste-website/src/component-examples/filter/components/filters/DateRangeFilter.tsx
new file mode 100644
index 0000000000..daaac6bb2c
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/filters/DateRangeFilter.tsx
@@ -0,0 +1,114 @@
+import { Box } from "@twilio-paste/box";
+import { DatePicker } from "@twilio-paste/date-picker";
+import { Heading } from "@twilio-paste/heading";
+import { HelpText } from "@twilio-paste/help-text";
+import { Label } from "@twilio-paste/label";
+import { Paragraph } from "@twilio-paste/paragraph";
+import type { usePopoverState } from "@twilio-paste/popover";
+import { useUID } from "@twilio-paste/uid-library";
+import React from "react";
+
+import { FilterAction } from "../FilterAction";
+
+export const DateRangeFilter: React.FC = ({
+  onApply,
+  popover,
+  value,
+}: {
+  onApply?: (
+    type: string,
+    value: {
+      startDate: string;
+      endDate: string;
+    },
+  ) => void;
+  popover?: ReturnType<typeof usePopoverState>;
+  value?: {
+    startDate: string;
+    endDate: string;
+  };
+}) => {
+  const startDateID = useUID();
+  const endDateID = useUID();
+
+  const [startDate, setStartDate] = React.useState("");
+  const [endDate, setEndDate] = React.useState("");
+  const [showError, setShowError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    setStartDate(value?.startDate || "");
+    setEndDate(value?.endDate || "");
+  }, [value, popover?.visible]);
+
+  return (
+    <Box>
+      <Heading variant="heading40" as="h2">
+        Custom date range
+      </Heading>
+      <Paragraph>All dates/times in UTC. Usage data available up to 7 days.</Paragraph>
+      <Box display="flex" flexDirection="column" rowGap="space70">
+        <Box display="flex" columnGap="space50">
+          <Box>
+            <Label htmlFor={startDateID}>Start date</Label>
+            <DatePicker
+              id={startDateID}
+              onChange={(e) => {
+                setStartDate(e.target.value);
+                setShowError(null);
+              }}
+              value={startDate}
+            />
+          </Box>
+          <Box>
+            <Label htmlFor={endDateID}>End date</Label>
+            <DatePicker
+              id={endDateID}
+              onChange={(e) => {
+                setEndDate(e.target.value);
+                setShowError(null);
+              }}
+              value={endDate}
+            />
+          </Box>
+        </Box>
+      </Box>
+
+      {showError ? (
+        <HelpText id="participants_help_text" variant="error">
+          {showError}
+        </HelpText>
+      ) : undefined}
+
+      <FilterAction
+        onApply={() => {
+          if (onApply && popover) {
+            if ((startDate === "" && endDate !== "") || (startDate !== "" && endDate === "")) {
+              setShowError("Please enter both start and end date");
+              return;
+            }
+
+            if (startDate > endDate) {
+              setShowError("End date has to be after the start date");
+              return;
+            }
+
+            onApply("dateCompleted", {
+              startDate,
+              endDate,
+            });
+            popover.hide();
+          }
+        }}
+        onClear={
+          startDate !== "" || endDate !== ""
+            ? () => {
+                setStartDate("");
+                setEndDate("");
+                setShowError(null);
+              }
+            : null
+        }
+      />
+    </Box>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/filters/DepartmentFilter.tsx b/packages/paste-website/src/component-examples/filter/components/filters/DepartmentFilter.tsx
new file mode 100644
index 0000000000..0464e1566e
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/filters/DepartmentFilter.tsx
@@ -0,0 +1,70 @@
+import { Box } from "@twilio-paste/box";
+import { Checkbox, CheckboxGroup } from "@twilio-paste/checkbox";
+import type { Item } from "@twilio-paste/combobox/dist/types";
+import type { usePopoverState } from "@twilio-paste/popover";
+import React from "react";
+
+import { FilterAction } from "../FilterAction";
+
+const departmentList = ["Operations", "Marketing", "IT", "R&D", "Finance", "Customer Support"];
+
+export const DepartmentFilter: React.FC = ({
+  onApply,
+  popover,
+  value,
+}: {
+  onApply?: (type: string, value: Item[]) => void;
+  popover?: ReturnType<typeof usePopoverState>;
+  value?: Item[];
+}) => {
+  const [values, setValues] = React.useState<string[]>([]);
+
+  React.useEffect(() => {
+    setValues((value as string[]) || []);
+  }, [value, popover?.visible]);
+
+  return (
+    <Box>
+      <CheckboxGroup name="department-list" legend="Department" helpText="Select one or more options">
+        {departmentList.map((item) => {
+          return (
+            <Checkbox
+              key={item}
+              id={item}
+              value={item}
+              checked={values.includes(item)}
+              onChange={(e) => {
+                if (e.target.checked) {
+                  const updatedList = [...values, item];
+                  setValues(updatedList);
+                  return;
+                }
+
+                const updatedList = values.filter((v) => v !== item);
+                setValues(updatedList);
+              }}
+            >
+              {item}
+            </Checkbox>
+          );
+        })}
+      </CheckboxGroup>
+
+      <FilterAction
+        onApply={() => {
+          if (onApply && popover) {
+            onApply("department", values);
+            popover.hide();
+          }
+        }}
+        onClear={
+          values.length > 0
+            ? () => {
+                setValues([]);
+              }
+            : null
+        }
+      />
+    </Box>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/filters/HostNameFilter.tsx b/packages/paste-website/src/component-examples/filter/components/filters/HostNameFilter.tsx
new file mode 100644
index 0000000000..0c7a5be552
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/filters/HostNameFilter.tsx
@@ -0,0 +1,123 @@
+import { Box } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { Checkbox, CheckboxGroup } from "@twilio-paste/checkbox";
+import { MultiselectCombobox, useMultiselectCombobox } from "@twilio-paste/combobox";
+import type { Item } from "@twilio-paste/combobox/dist/types";
+import type { UseMultipleSelectionStateChange } from "@twilio-paste/dropdown-library";
+import { Text } from "@twilio-paste/text";
+import React from "react";
+
+function getFilteredItems(inputValue: string, addFiltersList: string[]): string[] {
+  const lowerCasedInputValue = inputValue.toLowerCase();
+
+  return addFiltersList.filter((item) => {
+    return item.toLowerCase().includes(lowerCasedInputValue);
+  });
+}
+
+const EmptyState = (): React.ReactElement => (
+  <Box paddingY="space40" paddingX="space50">
+    <Text as="span" fontStyle="italic" color="colorTextWeak">
+      No results found
+    </Text>
+  </Box>
+);
+
+export type HostNameFilterProps = {
+  label: string;
+  items: string[];
+  setSelectedCount: (count: number | null) => void;
+  setSelectedMoreFilters: React.Dispatch<React.SetStateAction<Record<string, string | string[]>>>;
+  selectedMoreFilters?: Record<string, string | string[]>;
+};
+
+export const HostNameFilter: React.FC<HostNameFilterProps> = ({
+  label,
+  items,
+  setSelectedCount,
+  setSelectedMoreFilters,
+  selectedMoreFilters,
+}) => {
+  const [inputValue, setInputValue] = React.useState("");
+  const filteredItems = React.useMemo(() => getFilteredItems(inputValue, items as string[]), [inputValue, items]);
+
+  const onSelectedItemsChange = React.useCallback(
+    (comboboxItems: UseMultipleSelectionStateChange<Item>) => {
+      setSelectedCount(comboboxItems?.selectedItems?.length || null);
+      setSelectedMoreFilters((prev) => {
+        return {
+          ...prev,
+          hostName: (comboboxItems.selectedItems as string[]) || [],
+        };
+      });
+      return comboboxItems.selectedItems;
+    },
+    [setSelectedCount, setSelectedMoreFilters],
+  );
+
+  const state = useMultiselectCombobox({
+    initialSelectedItems: (selectedMoreFilters && (selectedMoreFilters.hostName as Item[])) || [],
+    onSelectedItemsChange,
+  });
+
+  React.useEffect(() => {
+    state.setSelectedItems((selectedMoreFilters && (selectedMoreFilters.hostName as Item[])) || []);
+  }, [selectedMoreFilters]);
+
+  return (
+    <Box>
+      <MultiselectCombobox
+        state={state}
+        labelText={label}
+        selectedItemsLabelText="Selected Host name filters"
+        items={filteredItems}
+        emptyState={EmptyState}
+        onInputValueChange={({ inputValue: newInputValue = "" }) => {
+          setInputValue(newInputValue);
+        }}
+        onSelectedItemsChange={(comboboxItems) => {
+          const { selectedItems } = comboboxItems;
+          state.setSelectedItems(selectedItems || []);
+        }}
+      />
+
+      <Box marginTop="space70">
+        <CheckboxGroup name="recently-used-hostName" legend="Recently used">
+          {(items as string[]).slice(0, 4).map((item) => {
+            return (
+              <Checkbox
+                key={item}
+                id={item}
+                value={item}
+                checked={state.selectedItems.includes(item)}
+                onChange={(e) => {
+                  let selectedCheckedItems = [];
+
+                  if (e.target.checked) {
+                    selectedCheckedItems = [...state.selectedItems, item];
+                  } else {
+                    selectedCheckedItems = state.selectedItems.filter((selectedItem) => selectedItem !== item);
+                  }
+                  state.setSelectedItems(selectedCheckedItems);
+                }}
+              >
+                {item}
+              </Checkbox>
+            );
+          })}
+        </CheckboxGroup>
+      </Box>
+
+      <Box marginTop="space70">
+        <Button
+          variant="link"
+          onClick={() => {
+            state.setSelectedItems([]);
+          }}
+        >
+          Clear all
+        </Button>
+      </Box>
+    </Box>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/filters/MoreFilters.tsx b/packages/paste-website/src/component-examples/filter/components/filters/MoreFilters.tsx
new file mode 100644
index 0000000000..f2246da0f9
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/filters/MoreFilters.tsx
@@ -0,0 +1,206 @@
+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 { Disclosure, DisclosureContent, DisclosureHeading } from "@twilio-paste/disclosure";
+import { Heading } from "@twilio-paste/heading";
+import { Separator } from "@twilio-paste/separator";
+import {
+  SidePanel,
+  SidePanelBody,
+  SidePanelContainer,
+  SidePanelFooter,
+  SidePanelHeader,
+  SidePanelPushContentWrapper,
+} from "@twilio-paste/side-panel";
+import { useUID } from "@twilio-paste/uid-library";
+import React from "react";
+
+import { EXTENDED_STATIC_TABLE_DATA } from "../../constants";
+import type { FilterListType } from "../../types";
+import { DefaultFilter } from "../DefaultFilter";
+import { HostNameFilter } from "./HostNameFilter";
+import { StatusFilter } from "./StatusFilter";
+import { TagsFilter } from "./TagsFilter";
+
+const moreFilterDefaultList: FilterListType = ["roomType", "participants", "dateCompleted", "department", "platform"];
+
+const moreFiltersSideModal = [
+  {
+    label: "Host names",
+    type: "hostName",
+    items: [
+      "Luffy Lawson",
+      "Brooks Benson",
+      "Tony Tony Turner",
+      "Sanji Stevens",
+      "Robin Rye",
+      "Nami Nelson",
+      "Tony Tony Turner",
+    ],
+    isOpen: true,
+  },
+  {
+    label: "Status",
+    type: "status",
+    items: ["Active", "Completed", "Scheduled", "Cancelled"],
+  },
+  {
+    label: "Tags",
+    type: "tags",
+    items: ["Training", "Meeting", "Support", "External", "Urgent", "Recurring"],
+  },
+];
+
+const disclosureMap: {
+  [key: string]: React.FC<{
+    label: string;
+    items: string[];
+    setSelectedCount: (count: number | null) => void;
+    setSelectedMoreFilters: React.Dispatch<React.SetStateAction<Record<string, string | string[]>>>;
+    selectedMoreFilters?: Record<string, string | string[]>;
+  }>;
+} = {
+  hostName: HostNameFilter,
+  status: StatusFilter,
+  tags: TagsFilter,
+};
+
+const DisclosureFilter = ({
+  filter,
+  setSelectedMoreFilters,
+  tempSelectedMoreFilters,
+}: {
+  filter: {
+    label: string;
+    type: string;
+    items: string[];
+    isOpen?: boolean;
+  };
+  setSelectedMoreFilters: React.Dispatch<React.SetStateAction<Record<string, string | string[]>>>;
+  tempSelectedMoreFilters: Record<string, string | string[]>;
+}): React.ReactElement => {
+  const [selectedCount, setSelectedCount] = React.useState<null | number>(
+    tempSelectedMoreFilters[filter.type]?.length || null,
+  );
+
+  React.useEffect(() => {
+    setSelectedCount(tempSelectedMoreFilters[filter.type]?.length || null);
+  }, [tempSelectedMoreFilters, filter.type]);
+
+  const FilterComponent = disclosureMap[filter.type];
+  return (
+    <Box
+      width="100%"
+      borderRadius="borderRadius20"
+      borderWidth="borderWidth10"
+      borderColor="colorBorderWeaker"
+      borderStyle="solid"
+    >
+      <Disclosure visible={filter.isOpen}>
+        <DisclosureHeading as="h2" variant="heading50">
+          <Box display="flex" justifyContent="space-between" alignItems="center" columnGap="space20" width="100%">
+            <Box as="span">{filter.label}</Box>
+
+            {selectedCount ? (
+              <Badge as="span" variant="neutral_counter" size="small">
+                Selected {filter.type === "status" ? 1 : selectedCount}
+              </Badge>
+            ) : null}
+          </Box>
+        </DisclosureHeading>
+        <DisclosureContent>
+          <FilterComponent
+            key={filter.label}
+            label={filter.label}
+            items={filter.items}
+            setSelectedCount={setSelectedCount}
+            setSelectedMoreFilters={setSelectedMoreFilters}
+            selectedMoreFilters={tempSelectedMoreFilters}
+          />
+        </DisclosureContent>
+      </Disclosure>
+    </Box>
+  );
+};
+
+export const MoreFilters: React.FC = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [tempSelectedMoreFilters, setTempSelectedMoreFilters] = React.useState<Record<string, string | string[]>>({});
+  const [selectedMoreFilters, setSelectedMoreFilters] = React.useState<Record<string, string | string[]>>({});
+  const sidePanelId = useUID();
+
+  React.useEffect(() => {
+    setTempSelectedMoreFilters(selectedMoreFilters);
+  }, [isOpen, selectedMoreFilters]);
+
+  return (
+    <SidePanelContainer id={sidePanelId} isOpen={isOpen} setIsOpen={setIsOpen}>
+      <SidePanel label="">
+        <SidePanelHeader>
+          <Heading as="h3" variant="heading30" marginBottom="space0">
+            More filters
+          </Heading>
+        </SidePanelHeader>
+        <Separator orientation="horizontal" verticalSpacing="space0" />
+        <SidePanelBody>
+          <Box
+            display="flex"
+            flexDirection="column"
+            rowGap="space40"
+            marginTop="space70"
+            marginBottom="space70"
+            width="100%"
+          >
+            {moreFiltersSideModal.map((filter) => {
+              return (
+                <DisclosureFilter
+                  key={filter.label}
+                  filter={filter}
+                  tempSelectedMoreFilters={tempSelectedMoreFilters}
+                  setSelectedMoreFilters={setTempSelectedMoreFilters}
+                />
+              );
+            })}
+          </Box>
+        </SidePanelBody>
+        <SidePanelFooter>
+          <ButtonGroup>
+            <Button
+              variant="primary"
+              onClick={() => {
+                setSelectedMoreFilters(tempSelectedMoreFilters);
+              }}
+            >
+              Apply
+            </Button>
+            <Button
+              variant="secondary"
+              onClick={() => {
+                const temp = {};
+                setTempSelectedMoreFilters(temp);
+              }}
+            >
+              Clear all
+            </Button>
+          </ButtonGroup>
+        </SidePanelFooter>
+      </SidePanel>
+
+      <SidePanelPushContentWrapper>
+        <Box paddingRight={isOpen ? "space70" : "space0"}>
+          <DefaultFilter
+            data={EXTENDED_STATIC_TABLE_DATA}
+            filterList={moreFilterDefaultList}
+            onMoreFiltersClick={() => {
+              setIsOpen((e) => !e);
+            }}
+            extendedTable
+            selectedMoreFilters={selectedMoreFilters}
+            setSelectedMoreFilters={setSelectedMoreFilters}
+          />
+        </Box>
+      </SidePanelPushContentWrapper>
+    </SidePanelContainer>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/filters/ParticipantsFilter.tsx b/packages/paste-website/src/component-examples/filter/components/filters/ParticipantsFilter.tsx
new file mode 100644
index 0000000000..d5d60edfbf
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/filters/ParticipantsFilter.tsx
@@ -0,0 +1,113 @@
+import { Box } from "@twilio-paste/box";
+import { HelpText } from "@twilio-paste/help-text";
+import { Input } from "@twilio-paste/input";
+import { Label } from "@twilio-paste/label";
+import type { usePopoverState } from "@twilio-paste/popover";
+import React from "react";
+
+import { FilterAction } from "../FilterAction";
+
+export const ParticipantsFilter: React.FC = ({
+  onApply,
+  popover,
+  onRemove,
+  value,
+}: {
+  onApply?: (
+    type: string,
+    value: {
+      min: string;
+      max: string;
+    },
+  ) => void;
+  popover?: ReturnType<typeof usePopoverState>;
+  onRemove?: () => void;
+  value?: {
+    min: string;
+    max: string;
+  };
+}) => {
+  const [minValue, setMinValue] = React.useState("");
+  const [maxValue, setMaxValue] = React.useState("");
+  const [showError, setShowError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    setMinValue(value?.min || "");
+    setMaxValue(value?.max || "");
+  }, [value, popover?.visible]);
+
+  return (
+    <Box>
+      <Box display="flex" alignItems="center" columnGap="space50">
+        <Box>
+          <Label htmlFor="min_participants">Min. Participants</Label>
+          <Input
+            id="min_participants"
+            name="min_participants"
+            type="number"
+            placeholder="ex. 1"
+            onChange={(e) => {
+              setShowError(null);
+              setMinValue(e.target.value);
+            }}
+            value={minValue}
+          />
+        </Box>
+
+        <Box>
+          <Label htmlFor="max_participants">Max. Participants</Label>
+          <Input
+            id="max_participants"
+            name="max_participants"
+            type="number"
+            placeholder="ex. 100"
+            onChange={(e) => {
+              setShowError(null);
+              setMaxValue(e.target.value);
+            }}
+            value={maxValue}
+            min={minValue}
+          />
+        </Box>
+      </Box>
+
+      {showError ? (
+        <HelpText id="participants_help_text" variant="error">
+          {showError}
+        </HelpText>
+      ) : undefined}
+
+      <FilterAction
+        onApply={() => {
+          if (onApply && popover) {
+            if ((minValue === "" && maxValue !== "") || (minValue !== "" && maxValue === "")) {
+              setShowError("Please enter both min and max value");
+              return;
+            }
+
+            if (minValue !== "" && maxValue !== "" && parseInt(minValue, 10) > parseInt(maxValue, 10)) {
+              setShowError("Min value has to be less than max value");
+              return;
+            }
+
+            onApply("participants", {
+              min: minValue,
+              max: maxValue,
+            });
+            popover.hide();
+          }
+        }}
+        onClear={
+          minValue !== "" || maxValue !== ""
+            ? () => {
+                setShowError(null);
+                setMinValue("");
+                setMaxValue("");
+              }
+            : null
+        }
+        onRemove={onRemove}
+      />
+    </Box>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/filters/PlatformFilter.tsx b/packages/paste-website/src/component-examples/filter/components/filters/PlatformFilter.tsx
new file mode 100644
index 0000000000..58e4f00c7f
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/filters/PlatformFilter.tsx
@@ -0,0 +1,70 @@
+import { Box } from "@twilio-paste/box";
+import { Checkbox, CheckboxGroup } from "@twilio-paste/checkbox";
+import type { Item } from "@twilio-paste/combobox/dist/types";
+import type { usePopoverState } from "@twilio-paste/popover";
+import React from "react";
+
+import { FilterAction } from "../FilterAction";
+
+const platformList = ["Zoom", "Meets", "Microsoft Teams", "Slack", "Others"];
+
+export const PlatformFilter: React.FC = ({
+  onApply,
+  popover,
+  value,
+}: {
+  onApply?: (type: string, value: Item[]) => void;
+  popover?: ReturnType<typeof usePopoverState>;
+  value?: Item[];
+}) => {
+  const [values, setValues] = React.useState<string[]>([]);
+
+  React.useEffect(() => {
+    setValues((value as string[]) || []);
+  }, [value, popover?.visible]);
+
+  return (
+    <Box>
+      <CheckboxGroup name="platform-list" legend="Platform" helpText="Select one or more options">
+        {platformList.map((item) => {
+          return (
+            <Checkbox
+              key={item}
+              id={item}
+              value={item}
+              checked={values.includes(item)}
+              onChange={(e) => {
+                if (e.target.checked) {
+                  const updatedList = [...values, item];
+                  setValues(updatedList);
+                  return;
+                }
+
+                const updatedList = values.filter((v) => v !== item);
+                setValues(updatedList);
+              }}
+            >
+              {item}
+            </Checkbox>
+          );
+        })}
+      </CheckboxGroup>
+
+      <FilterAction
+        onApply={() => {
+          if (onApply && popover) {
+            onApply("platform", values);
+            popover.hide();
+          }
+        }}
+        onClear={
+          values.length > 0
+            ? () => {
+                setValues([]);
+              }
+            : null
+        }
+      />
+    </Box>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/filters/RoomSidFilter.tsx b/packages/paste-website/src/component-examples/filter/components/filters/RoomSidFilter.tsx
new file mode 100644
index 0000000000..7dcfc0ded6
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/filters/RoomSidFilter.tsx
@@ -0,0 +1,134 @@
+import { Box } from "@twilio-paste/box";
+import { Checkbox, CheckboxGroup } from "@twilio-paste/checkbox";
+import { MultiselectCombobox, useMultiselectCombobox } from "@twilio-paste/combobox";
+import type { Item } from "@twilio-paste/combobox/dist/types";
+import type { UseMultipleSelectionStateChange } from "@twilio-paste/dropdown-library";
+import type { usePopoverState } from "@twilio-paste/popover";
+import { Text } from "@twilio-paste/text";
+import React from "react";
+
+import { slugify } from "../../helpers";
+import { FilterAction } from "../FilterAction";
+
+function getFilteredItems(inputValue: string, roomSidList: string[]): string[] {
+  const lowerCasedInputValue = inputValue.toLowerCase();
+
+  return roomSidList.filter((item) => {
+    return item.toLowerCase().includes(lowerCasedInputValue);
+  });
+}
+
+const EmptyState = (): React.ReactElement => (
+  <Box paddingY="space40" paddingX="space50">
+    <Text as="span" fontStyle="italic" color="colorTextWeak">
+      No results found
+    </Text>
+  </Box>
+);
+
+const roomSidList = [
+  "RM76426b3e9986878d6316a22bf02d6fc3",
+  "RMmg889qwslt6bijmzfjxleq4fn3eyxwdj6",
+  "RM8fcu56sr0tz6cf9a2phf5zo8vv5m65697",
+  "RM1z17xfzcjdgwf254jk3k0gtu3r7xzxo0l",
+  "RMx2fw108pgls48zzf4oh6uzl4ly4s4j6b8",
+  "RMwwxh0rskqqy2wzg7t7f3ha4haavymbnqt",
+  "RMi2or733rf2vd6lziwe8g66smzykqkoplf",
+];
+
+export const RoomSidFilter: React.FC = ({
+  onApply,
+  value,
+  popover,
+}: {
+  onApply?: (type: string, value: Item[]) => void;
+  value?: string[];
+  popover?: ReturnType<typeof usePopoverState>;
+}) => {
+  const [inputValue, setInputValue] = React.useState("");
+
+  const filteredItems = React.useMemo(() => getFilteredItems(inputValue, roomSidList), [inputValue]);
+
+  const onSelectedItemsChange = React.useCallback((comboboxItems: UseMultipleSelectionStateChange<Item>) => {
+    return comboboxItems.selectedItems;
+  }, []);
+
+  const state = useMultiselectCombobox({
+    initialSelectedItems: [],
+    onSelectedItemsChange,
+  });
+
+  const { setSelectedItems } = state;
+
+  React.useEffect(() => {
+    if (popover?.visible && value === undefined) {
+      setSelectedItems([]);
+    }
+  }, [value, popover?.visible, setSelectedItems]);
+
+  return (
+    <Box>
+      <MultiselectCombobox
+        state={state}
+        labelText="Add filter"
+        selectedItemsLabelText="Selected filters"
+        items={filteredItems}
+        emptyState={EmptyState}
+        onInputValueChange={({ inputValue: newInputValue = "" }) => {
+          setInputValue(newInputValue);
+        }}
+        onSelectedItemsChange={(comboboxItems) => {
+          const { selectedItems } = comboboxItems;
+          if (selectedItems) {
+            const sluggedItems = selectedItems.map((item) => slugify(item as string));
+            state.setSelectedItems(sluggedItems);
+          }
+        }}
+      />
+
+      <Box marginTop="space70">
+        <CheckboxGroup name="recently-used-filters" legend="Recently used">
+          {roomSidList.slice(0, 3).map((item) => {
+            return (
+              <Checkbox
+                key={item}
+                id={item}
+                value={item}
+                checked={state.selectedItems.includes(item)}
+                onChange={(e) => {
+                  let selectedCheckedItems = [];
+
+                  if (e.target.checked) {
+                    selectedCheckedItems = [...state.selectedItems, item];
+                  } else {
+                    selectedCheckedItems = state.selectedItems.filter((selectedItem) => selectedItem !== item);
+                  }
+                  setSelectedItems(selectedCheckedItems);
+                }}
+              >
+                {item}
+              </Checkbox>
+            );
+          })}
+        </CheckboxGroup>
+      </Box>
+
+      <FilterAction
+        onApply={() => {
+          if (onApply && popover) {
+            onApply("sid", state.selectedItems);
+            popover.hide();
+          }
+        }}
+        onClear={
+          state.selectedItems.length > 0
+            ? () => {
+                setInputValue("");
+                setSelectedItems([]);
+              }
+            : null
+        }
+      />
+    </Box>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/filters/RoomTypeFilter.tsx b/packages/paste-website/src/component-examples/filter/components/filters/RoomTypeFilter.tsx
new file mode 100644
index 0000000000..101cb1f0fb
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/filters/RoomTypeFilter.tsx
@@ -0,0 +1,57 @@
+import { Box } from "@twilio-paste/box";
+import type { usePopoverState } from "@twilio-paste/popover";
+import { Radio, RadioGroup } from "@twilio-paste/radio-group";
+import React from "react";
+
+import { FilterAction } from "../FilterAction";
+
+export const RoomTypeFilter: React.FC = ({
+  onApply,
+  popover,
+  value,
+}: {
+  onApply?: (type: string, value: string) => void;
+  popover?: ReturnType<typeof usePopoverState>;
+  value?: string;
+}) => {
+  const roomTypes = ["Group", "WebRTC Go", "Peer to Peer"];
+  const [selectedRoomType, setSelectedRoomType] = React.useState<string>("");
+
+  React.useEffect(() => {
+    setSelectedRoomType(value || "");
+  }, [value, popover?.visible]);
+
+  return (
+    <Box>
+      <RadioGroup
+        name="roomType"
+        legend="Room type"
+        helpText="Select one option"
+        onChange={setSelectedRoomType}
+        value={selectedRoomType}
+      >
+        {roomTypes.map((roomType) => (
+          <Radio key={roomType} id={roomType} value={roomType} name="roomType" checked={selectedRoomType === roomType}>
+            {roomType}
+          </Radio>
+        ))}
+      </RadioGroup>
+
+      <FilterAction
+        onApply={() => {
+          if (onApply && popover) {
+            onApply("roomType", selectedRoomType);
+            popover.hide();
+          }
+        }}
+        onClear={
+          selectedRoomType !== ""
+            ? () => {
+                setSelectedRoomType("");
+              }
+            : null
+        }
+      />
+    </Box>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/filters/SearchFilter.tsx b/packages/paste-website/src/component-examples/filter/components/filters/SearchFilter.tsx
new file mode 100644
index 0000000000..0daeb66c1e
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/filters/SearchFilter.tsx
@@ -0,0 +1,23 @@
+import { SearchIcon } from "@twilio-paste/icons/esm/SearchIcon";
+import { Input } from "@twilio-paste/input";
+import { Label } from "@twilio-paste/label";
+import React from "react";
+
+export const SearchFilter: React.FC<{
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  value: string;
+}> = ({ onChange, value }) => {
+  return (
+    <>
+      <Label htmlFor="search-filter">Search</Label>
+      <Input
+        id="search-filter"
+        type="search"
+        insertBefore={<SearchIcon decorative />}
+        name="search-filter"
+        onChange={onChange}
+        value={value}
+      />
+    </>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/filters/StatusFilter.tsx b/packages/paste-website/src/component-examples/filter/components/filters/StatusFilter.tsx
new file mode 100644
index 0000000000..a668468f99
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/filters/StatusFilter.tsx
@@ -0,0 +1,64 @@
+import { Box } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { Radio, RadioGroup } from "@twilio-paste/radio-group";
+import React from "react";
+
+export const StatusFilter: React.FC<{
+  label: string;
+  setSelectedCount: (count: number | null) => void;
+  items: string[];
+  setSelectedMoreFilters: React.Dispatch<React.SetStateAction<Record<string, string | string[]>>>;
+  selectedMoreFilters?: Record<string, string | string[]>;
+}> = ({ label, setSelectedCount, items, setSelectedMoreFilters, selectedMoreFilters }) => {
+  const [value, setValue] = React.useState<string>(
+    selectedMoreFilters ? (selectedMoreFilters.status as string) || "" : "",
+  );
+
+  React.useEffect(() => {
+    setValue(selectedMoreFilters ? (selectedMoreFilters.status as string) || "" : "");
+  }, [selectedMoreFilters]);
+
+  return (
+    <Box>
+      <RadioGroup
+        name="status-filter"
+        value={value}
+        legend={label}
+        onChange={(newValue) => {
+          setValue(newValue);
+          setSelectedCount(1);
+          setSelectedMoreFilters((prev) => {
+            return {
+              ...prev,
+              status: newValue,
+            };
+          });
+        }}
+      >
+        {items.map((item) => (
+          <Radio key={item} id={item} value={item} name="status-filter" checked={value === item}>
+            {item}
+          </Radio>
+        ))}
+      </RadioGroup>
+
+      <Box marginTop="space70">
+        <Button
+          variant="link"
+          onClick={() => {
+            setValue("");
+            setSelectedCount(null);
+            setSelectedMoreFilters((prev) => {
+              return {
+                ...prev,
+                status: "",
+              };
+            });
+          }}
+        >
+          Clear all
+        </Button>
+      </Box>
+    </Box>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/filters/TagsFilter.tsx b/packages/paste-website/src/component-examples/filter/components/filters/TagsFilter.tsx
new file mode 100644
index 0000000000..eaa5280054
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/filters/TagsFilter.tsx
@@ -0,0 +1,83 @@
+import { Box } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { Checkbox, CheckboxGroup } from "@twilio-paste/checkbox";
+import React from "react";
+
+export const TagsFilter: React.FC<{
+  label: string;
+  setSelectedCount: (count: number | null) => void;
+  items: string[];
+  setSelectedMoreFilters: React.Dispatch<React.SetStateAction<Record<string, string | string[]>>>;
+  selectedMoreFilters?: Record<string, string | string[]>;
+}> = ({ label, setSelectedCount, items, setSelectedMoreFilters, selectedMoreFilters }) => {
+  const [values, setValues] = React.useState<string[]>(
+    selectedMoreFilters ? (selectedMoreFilters?.tags as string[]) || [] : [],
+  );
+
+  React.useEffect(() => {
+    setValues(selectedMoreFilters ? (selectedMoreFilters?.tags as string[]) || [] : []);
+  }, [selectedMoreFilters]);
+
+  return (
+    <Box>
+      <CheckboxGroup name="recently-used-tags" legend={label}>
+        {(items as string[]).map((item) => {
+          return (
+            <Checkbox
+              key={item}
+              id={item}
+              value={item}
+              checked={values.includes(item)}
+              onChange={(e) => {
+                if (e.target.checked) {
+                  const updatedList = [...values, item];
+                  setValues(updatedList);
+                  setSelectedMoreFilters((prev) => {
+                    return {
+                      ...prev,
+                      tags: updatedList,
+                    };
+                  });
+                  setSelectedCount(updatedList.length);
+
+                  return;
+                }
+
+                const updatedList = values.filter((value) => value !== item);
+                setValues(updatedList);
+
+                setSelectedMoreFilters((prev) => {
+                  return {
+                    ...prev,
+                    tags: updatedList,
+                  };
+                });
+                setSelectedCount(updatedList.length);
+              }}
+            >
+              {item}
+            </Checkbox>
+          );
+        })}
+      </CheckboxGroup>
+
+      <Box marginTop="space70">
+        <Button
+          variant="link"
+          onClick={() => {
+            setValues([]);
+            setSelectedCount(null);
+            setSelectedMoreFilters((prev) => {
+              return {
+                ...prev,
+                tags: [],
+              };
+            });
+          }}
+        >
+          Clear all
+        </Button>
+      </Box>
+    </Box>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/components/filters/UniqueNameFilter.tsx b/packages/paste-website/src/component-examples/filter/components/filters/UniqueNameFilter.tsx
new file mode 100644
index 0000000000..4a15184c78
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/components/filters/UniqueNameFilter.tsx
@@ -0,0 +1,134 @@
+import { Box } from "@twilio-paste/box";
+import { Checkbox, CheckboxGroup } from "@twilio-paste/checkbox";
+import { MultiselectCombobox, useMultiselectCombobox } from "@twilio-paste/combobox";
+import type { Item } from "@twilio-paste/combobox/dist/types";
+import type { UseMultipleSelectionStateChange } from "@twilio-paste/dropdown-library";
+import type { usePopoverState } from "@twilio-paste/popover";
+import { Text } from "@twilio-paste/text";
+import React from "react";
+
+import { slugify } from "../../helpers";
+import { FilterAction } from "../FilterAction";
+
+function getFilteredItems(inputValue: string, uniqueNameList: string[]): string[] {
+  const lowerCasedInputValue = inputValue.toLowerCase();
+
+  return uniqueNameList.filter((item) => {
+    return item.toLowerCase().includes(lowerCasedInputValue);
+  });
+}
+
+const EmptyState = (): React.ReactElement => (
+  <Box paddingY="space40" paddingX="space50">
+    <Text as="span" fontStyle="italic" color="colorTextWeak">
+      No results found
+    </Text>
+  </Box>
+);
+
+const uniqueNameList = [
+  "Test Room",
+  "Quick Sync",
+  "My 1:1",
+  "Team Meeting",
+  "All Hands",
+  "Project Meeting",
+  "Test Room 2",
+];
+
+export const UniqueNameFilter: React.FC = ({
+  onApply,
+  value,
+  popover,
+}: {
+  onApply?: (type: string, value: Item[]) => void;
+  value?: string[];
+  popover?: ReturnType<typeof usePopoverState>;
+}) => {
+  const [inputValue, setInputValue] = React.useState("");
+
+  const filteredItems = React.useMemo(() => getFilteredItems(inputValue, uniqueNameList), [inputValue]);
+
+  const onSelectedItemsChange = React.useCallback((comboboxItems: UseMultipleSelectionStateChange<Item>) => {
+    return comboboxItems.selectedItems;
+  }, []);
+
+  const state = useMultiselectCombobox({
+    initialSelectedItems: [],
+    onSelectedItemsChange,
+  });
+
+  const { setSelectedItems } = state;
+
+  React.useEffect(() => {
+    if (popover?.visible && value === undefined) {
+      setSelectedItems([]);
+    }
+  }, [value, popover?.visible, setSelectedItems]);
+
+  return (
+    <Box>
+      <MultiselectCombobox
+        state={state}
+        labelText="Add filter"
+        selectedItemsLabelText="Selected filters"
+        items={filteredItems}
+        emptyState={EmptyState}
+        onInputValueChange={({ inputValue: newInputValue = "" }) => {
+          setInputValue(newInputValue);
+        }}
+        onSelectedItemsChange={(comboboxItems) => {
+          const { selectedItems } = comboboxItems;
+          if (selectedItems) {
+            const sluggedItems = selectedItems.map((item) => slugify(item as string));
+            setSelectedItems(sluggedItems);
+          }
+        }}
+      />
+
+      <Box marginTop="space70">
+        <CheckboxGroup name="recently-used-filters" legend="Recently used">
+          {uniqueNameList.slice(0, 3).map((item) => {
+            return (
+              <Checkbox
+                key={item}
+                id={item}
+                value={item}
+                checked={state.selectedItems.includes(item)}
+                onChange={(e) => {
+                  let selectedCheckedItems = [];
+
+                  if (e.target.checked) {
+                    selectedCheckedItems = [...state.selectedItems, item];
+                  } else {
+                    selectedCheckedItems = state.selectedItems.filter((selectedItem) => selectedItem !== item);
+                  }
+                  setSelectedItems(selectedCheckedItems);
+                }}
+              >
+                {item}
+              </Checkbox>
+            );
+          })}
+        </CheckboxGroup>
+      </Box>
+
+      <FilterAction
+        onApply={() => {
+          if (onApply && popover) {
+            onApply("uniqueName", state.selectedItems);
+            popover.hide();
+          }
+        }}
+        onClear={
+          state.selectedItems.length > 0
+            ? () => {
+                setInputValue("");
+                setSelectedItems([]);
+              }
+            : null
+        }
+      />
+    </Box>
+  );
+};
diff --git a/packages/paste-website/src/component-examples/filter/constants.ts b/packages/paste-website/src/component-examples/filter/constants.ts
new file mode 100644
index 0000000000..f8ec0a6633
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/constants.ts
@@ -0,0 +1,247 @@
+/* DISCLAIMER: this is an example, not meant to be used in production */
+
+import { formatDate } from "./helpers";
+import type { DateTimeFormValues, ExtendedTableDataRow, TableDataRow } from "./types";
+
+export const ROOM_TYPES = ["All", "Group", "WebRTC Go", "Peer to Peer"];
+export const DATE_RANGES = [
+  { name: "Last 24 hours", value: "1" },
+  { name: "Last 7 days", value: "7" },
+  { name: "Last 14 days", value: "14" },
+  { name: "Custom", value: "Custom" },
+];
+export const DATE_TIME_RANGES = [
+  { name: "All", value: "all" },
+  { name: "Last 12 hours", value: "12hours" },
+  { name: "Last 24 hours", value: "day" },
+  { name: "Last 3 days", value: "threeDays" },
+  { name: "Custom", value: "custom" },
+];
+export const TABLE_HEADERS = ["Room SID", "Unique Name", "Room Type", "Participants", "Date Completed"];
+export const EXTENDED_TABLE_HEADERS = [
+  "Room SID",
+  "Unique Name",
+  "Room Type",
+  "Participants",
+  "Date Completed",
+  "Status",
+  "Host Name",
+  "Department",
+  "Platform",
+  "Tags",
+];
+
+const today = new Date();
+const fourteenHoursAgo = new Date();
+fourteenHoursAgo.setHours(fourteenHoursAgo.getHours() - 14);
+const twoDaysAgo = new Date();
+twoDaysAgo.setDate(twoDaysAgo.getDate() - 2);
+const oneWeekAgo = new Date();
+oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
+const twoWeeksAgo = new Date();
+twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14);
+const fourWeeksAgo = new Date();
+fourWeeksAgo.setDate(fourWeeksAgo.getDate() - 28);
+
+export const FORM_DEFAULT_VALUES: DateTimeFormValues = {
+  search: "",
+  type: "Group",
+  range: "all",
+  customDate: {
+    startDate: formatDate(today),
+    startTime: "00:00",
+    endDate: formatDate(today),
+    endTime: "23:59",
+  },
+};
+
+export const TABLE_DATA: TableDataRow[] = [
+  {
+    sid: "RM76426b3e9986878d6316a22bf02d6fc3",
+    uniqueName: "Test Room",
+    roomType: "Group",
+    participants: 50,
+    dateCompleted: today,
+  },
+  {
+    sid: "RMmg889qwslt6bijmzfjxleq4fn3eyxwdj6",
+    uniqueName: "Quick Sync",
+    roomType: "Peer to Peer",
+    participants: 3,
+    dateCompleted: fourWeeksAgo,
+  },
+  {
+    sid: "RM8fcu56sr0tz6cf9a2phf5zo8vv5m65697",
+    uniqueName: "My 1:1",
+    roomType: "WebRTC Go",
+    participants: 2,
+    dateCompleted: today,
+  },
+  {
+    sid: "RM1z17xfzcjdgwf254jk3k0gtu3r7xzxo0l",
+    uniqueName: "Team Meeting",
+    roomType: "Group",
+    participants: 23,
+    dateCompleted: oneWeekAgo,
+  },
+  {
+    sid: "RMx2fw108pgls48zzf4oh6uzl4ly4s4j6b8",
+    uniqueName: "All Hands",
+    roomType: "Group",
+    participants: 41,
+    dateCompleted: twoWeeksAgo,
+  },
+  {
+    sid: "RMwwxh0rskqqy2wzg7t7f3ha4haavymbnqt",
+    uniqueName: "Project Meeting",
+    roomType: "Group",
+    participants: 6,
+    dateCompleted: twoWeeksAgo,
+  },
+  {
+    sid: "RMi2or733rf2vd6lziwe8g66smzykqkoplf",
+    uniqueName: "Test Room 2",
+    roomType: "WebRTC Go",
+    participants: 1,
+    dateCompleted: fourWeeksAgo,
+  },
+];
+
+export const STATIC_TABLE_DATA: TableDataRow[] = [
+  {
+    sid: "RM76426b3e9986878d6316a22bf02d6fc3",
+    uniqueName: "Test Room",
+    roomType: "Group",
+    participants: 50,
+    dateCompleted: new Date(2024, 6, 1, 8, 39, 25),
+  },
+  {
+    sid: "RMmg889qwslt6bijmzfjxleq4fn3eyxwdj6",
+    uniqueName: "Quick Sync",
+    roomType: "Peer to Peer",
+    participants: 3,
+    dateCompleted: new Date(2024, 6, 1, 18, 39, 25),
+  },
+  {
+    sid: "RM8fcu56sr0tz6cf9a2phf5zo8vv5m65697",
+    uniqueName: "My 1:1",
+    roomType: "WebRTC Go",
+    participants: 2,
+    dateCompleted: new Date(2024, 7, 1, 8, 39, 25),
+  },
+  {
+    sid: "RM1z17xfzcjdgwf254jk3k0gtu3r7xzxo0l",
+    uniqueName: "Team Meeting",
+    roomType: "Group",
+    participants: 23,
+    dateCompleted: new Date(2024, 6, 22, 8, 39, 25),
+  },
+  {
+    sid: "RMx2fw108pgls48zzf4oh6uzl4ly4s4j6b8",
+    uniqueName: "All Hands",
+    roomType: "Group",
+    participants: 41,
+    dateCompleted: new Date(2024, 6, 15, 8, 39, 25),
+  },
+  {
+    sid: "RMwwxh0rskqqy2wzg7t7f3ha4haavymbnqt",
+    uniqueName: "Project Meeting",
+    roomType: "Group",
+    participants: 6,
+    dateCompleted: new Date(2024, 6, 15, 8, 39, 25),
+  },
+  {
+    sid: "RMi2or733rf2vd6lziwe8g66smzykqkoplf",
+    uniqueName: "Test Room 2",
+    roomType: "WebRTC Go",
+    participants: 1,
+    dateCompleted: new Date(2024, 6, 1, 18, 39, 25),
+  },
+];
+
+export const EXTENDED_STATIC_TABLE_DATA: ExtendedTableDataRow[] = [
+  {
+    sid: "RM76426b3e9986878d6316a22bf02d6fc3",
+    uniqueName: "Test Room",
+    roomType: "Group",
+    participants: 50,
+    dateCompleted: new Date(2024, 6, 1, 8, 39, 25),
+    status: "Active",
+    hostName: "Luffy Lawson",
+    department: "Operations",
+    platform: "Zoom",
+    tags: "Training",
+  },
+  {
+    sid: "RMmg889qwslt6bijmzfjxleq4fn3eyxwdj6",
+    uniqueName: "Quick Sync",
+    roomType: "Peer to Peer",
+    participants: 3,
+    dateCompleted: new Date(2024, 6, 1, 18, 39, 25),
+    status: "Completed",
+    hostName: "Brooks Benson",
+    department: "Marketing",
+    platform: "Meets",
+    tags: "Meeting",
+  },
+  {
+    sid: "RM8fcu56sr0tz6cf9a2phf5zo8vv5m65697",
+    uniqueName: "My 1:1",
+    roomType: "WebRTC Go",
+    participants: 2,
+    dateCompleted: new Date(2024, 7, 1, 8, 39, 25),
+    status: "Scheduled",
+    hostName: "Tony Tony Turner",
+    department: "Customer Support",
+    platform: "Microsoft Teams",
+    tags: "Support",
+  },
+  {
+    sid: "RM1z17xfzcjdgwf254jk3k0gtu3r7xzxo0l",
+    uniqueName: "Team Meeting",
+    roomType: "Group",
+    participants: 23,
+    dateCompleted: new Date(2024, 6, 22, 8, 39, 25),
+    status: "Cancelled",
+    hostName: "Sanji Stevens",
+    department: "IT",
+    platform: "Slack",
+    tags: "External",
+  },
+  {
+    sid: "RMx2fw108pgls48zzf4oh6uzl4ly4s4j6b8",
+    uniqueName: "All Hands",
+    roomType: "Group",
+    participants: 41,
+    dateCompleted: new Date(2024, 6, 15, 8, 39, 25),
+    status: "Active",
+    hostName: "Robin Rye",
+    department: "R&D",
+    platform: "Meets",
+    tags: "Urgent",
+  },
+  {
+    sid: "RMwwxh0rskqqy2wzg7t7f3ha4haavymbnqt",
+    uniqueName: "Project Meeting",
+    roomType: "Group",
+    participants: 6,
+    dateCompleted: new Date(2024, 6, 15, 8, 39, 25),
+    status: "Completed",
+    hostName: "Nami Nelson",
+    department: "Finance",
+    platform: "Zoom",
+    tags: "Recurring",
+  },
+  {
+    sid: "RMi2or733rf2vd6lziwe8g66smzykqkoplf",
+    uniqueName: "Test Room 2",
+    roomType: "WebRTC Go",
+    participants: 1,
+    dateCompleted: new Date(2024, 6, 1, 18, 39, 25),
+    status: "Scheduled",
+    hostName: "Tony Tony Turner",
+    department: "Customer Support",
+    platform: "Others",
+    tags: "Support",
+  },
+];
diff --git a/packages/paste-website/src/component-examples/filter/helpers.ts b/packages/paste-website/src/component-examples/filter/helpers.ts
new file mode 100644
index 0000000000..95ce426d88
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/helpers.ts
@@ -0,0 +1,162 @@
+/* DISCLAIMER: this is an example, not meant to be used in production */
+
+import { add, format, isAfter, isBefore } from "date-fns";
+import type { Duration } from "date-fns";
+
+import type {
+  DateRangeType,
+  DateRanges,
+  DateTimeRanges,
+  ExtendedTableDataRow,
+  ParticipantsType,
+  RoomTypes,
+  selectedFilterProps,
+} from "./types";
+
+export const formatDate = (date: Date): string => format(date, "yyyy-MM-dd");
+export const formatDateTime = (date: Date): string => format(date, "HH:mm:ss 'UTC' yyyy-MM-dd");
+
+export const filterBySearchString = (uniqueName: string, sid: string, searchValue: string): boolean => {
+  const lowerCaseName = uniqueName.toLocaleLowerCase();
+  const lowerCaseSid = sid.toLocaleLowerCase();
+
+  return lowerCaseName.includes(searchValue) || lowerCaseSid.includes(searchValue);
+};
+
+export const filterByRoomType = (roomType: RoomTypes, filterValue: RoomTypes): boolean => {
+  return roomType === filterValue;
+};
+
+export const dateDifference = (date1: Date, date2: Date): number =>
+  Math.round((date1.valueOf() - date2.valueOf()) / (1000 * 60 * 60 * 24));
+
+export const filterByDateRange = (dateCompleted: Date, filterValue: DateRanges): boolean => {
+  const today = new Date();
+  const rangeMap: Record<DateRanges, number> = {
+    day: 1,
+    oneWeek: 7,
+    twoWeeks: 14,
+    all: Infinity,
+  };
+
+  return dateDifference(today, dateCompleted) <= rangeMap[filterValue];
+};
+
+export const filterByDateTimeRange = (
+  dateCompleted: Date,
+  filterValue: DateTimeRanges,
+  startDate: string,
+  startTime: string,
+  endDate: string,
+  endTime: string,
+): boolean => {
+  if (filterValue === "all") return true;
+  if (filterValue !== "custom") {
+    const rangeMap: Record<"12hours" | "day" | "threeDays", Duration> = {
+      "12hours": { hours: -12 },
+      day: { days: -1 },
+      threeDays: { days: -3 },
+    };
+    const computedStart = add(new Date(), rangeMap[filterValue]);
+
+    return isAfter(dateCompleted, computedStart);
+  }
+
+  const computedCustomStart = new Date(`${startDate}T${startTime}`);
+  const computedCustomEnd = new Date(`${endDate}T${endTime}`);
+
+  return isAfter(dateCompleted, computedCustomStart) && isBefore(dateCompleted, computedCustomEnd);
+};
+
+export const isEndDateBeforeStartDate = (
+  startDate: string,
+  startTime: string,
+  endDate: string,
+  endTime: string,
+): boolean => {
+  const computedStart = new Date(`${startDate}T${startTime}`);
+  const computedEnd = new Date(`${endDate}T${endTime}`);
+
+  return isBefore(computedEnd, computedStart);
+};
+
+export const isValueEmpty = (type: string, value: selectedFilterProps): boolean => {
+  if (type === "roomType" || type === "status") {
+    return value === "";
+  }
+
+  if (["participants", "dateCompleted", "custom"].includes(type)) {
+    return Object.values(value)?.includes("");
+  }
+
+  if (["sid", "uniqueName", "hostName", "tags", "department", "platform"].includes(type)) {
+    return (value as string[])?.length === 0;
+  }
+
+  return false;
+};
+
+export const applyFilters = (filters: selectedFilterProps, data: ExtendedTableDataRow[]): ExtendedTableDataRow[] => {
+  let filteredData = [...data];
+
+  Object.entries(filters).forEach(([type, value]) => {
+    if (["roomType", "status"].includes(type) && value !== "") {
+      filteredData = filteredData.filter((item) => item[type as keyof ExtendedTableDataRow] === value);
+    }
+
+    if (type === "participants") {
+      const { min, max } = value as unknown as ParticipantsType;
+
+      filteredData = filteredData.filter(
+        (item) => item.participants >= parseInt(min, 10) && item.participants <= parseInt(max, 10),
+      );
+    }
+
+    if (type === "dateCompleted" || type === "custom") {
+      const { startDate, endDate } = value as unknown as DateRangeType;
+
+      const start = startDate ? new Date(`${startDate}T00:00:00`) : -Infinity;
+      const end = endDate ? new Date(`${endDate}T23:59:59`) : Infinity;
+
+      filteredData = filteredData.filter((item) => {
+        const itemDate = new Date(item.dateCompleted);
+
+        return itemDate >= start && itemDate <= end;
+      });
+    }
+
+    if (type === "search") {
+      const search = value as string;
+
+      filteredData = filteredData.filter((item) => {
+        const { uniqueName, roomType, participants, dateCompleted, sid } = item;
+
+        return (
+          uniqueName.toLowerCase().includes(search.toLowerCase()) ||
+          roomType.toLowerCase().includes(search.toLowerCase()) ||
+          participants.toString().includes(search) ||
+          dateCompleted.toString().includes(search) ||
+          sid.toLowerCase().includes(search.toLowerCase())
+        );
+      });
+    }
+
+    if (["sid", "uniqueName", "hostName", "tags", "department", "platform"].includes(type)) {
+      const search = value as unknown as string[];
+
+      if (search.length > 0) {
+        filteredData = filteredData.filter((item) => {
+          const itemValue = (item[type as keyof ExtendedTableDataRow] as string).toLowerCase();
+
+          return search.some((searchValue) => itemValue === searchValue.toLowerCase());
+        });
+      }
+    }
+  });
+
+  return filteredData;
+};
+
+export const slugify = (text: string): string => {
+  return text.toString().toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]+/g, "");
+};
diff --git a/packages/paste-website/src/component-examples/filter/types.ts b/packages/paste-website/src/component-examples/filter/types.ts
new file mode 100644
index 0000000000..b34291aeae
--- /dev/null
+++ b/packages/paste-website/src/component-examples/filter/types.ts
@@ -0,0 +1,121 @@
+/* DISCLAIMER: this is an example, not meant to be used in production */
+
+import type { Item } from "@twilio-paste/combobox/dist/types";
+import type { usePopoverState } from "@twilio-paste/popover";
+import type { FieldError, UseFormRegister, UseFormReturn } from "react-hook-form";
+
+export type DateRanges = "all" | "day" | "oneWeek" | "twoWeeks";
+export type DateTimeRanges = "all" | "12hours" | "day" | "threeDays" | "custom";
+export type CustomDateInputNames =
+  | "customDate.startDate"
+  | "customDate.startTime"
+  | "customDate.endDate"
+  | "customDate.endTime";
+
+export interface DateTimeFormValues {
+  range: DateTimeRanges;
+  type: RoomTypes;
+  search: string;
+  customDate: {
+    startDate: string;
+    startTime: string;
+    endDate: string;
+    endTime: string;
+  };
+}
+
+export interface DateTimeFormErrors {
+  range?: FieldError;
+  type?: FieldError;
+  search?: FieldError;
+  customDate?: {
+    startDate?: FieldError;
+    startTime?: FieldError;
+    endDate?: FieldError;
+    endTime?: FieldError;
+  };
+}
+
+export interface DateTimePopoverProps {
+  onApply: (callback: VoidFunction) => ReturnType<UseFormReturn["handleSubmit"]>;
+  register: UseFormRegister<DateTimeFormValues>;
+  errors: DateTimeFormErrors;
+}
+export interface TableDataRow {
+  sid: string;
+  uniqueName: string;
+  roomType: RoomTypes;
+  participants: number;
+  dateCompleted: Date;
+}
+
+export interface ExtendedTableDataRow extends TableDataRow {
+  status: "Active" | "Completed" | "Scheduled" | "Cancelled";
+  hostName: string;
+  department: string;
+  platform: string;
+  tags: "Training" | "Meeting" | "Support" | "External" | "Urgent" | "Recurring";
+}
+
+export type FilterMapType = {
+  [key: string]: {
+    label: string;
+    component: React.FC<{
+      onApply: (type: string, value: selectedFilterProps) => void;
+      popover: ReturnType<typeof usePopoverState>;
+      onRemove?: () => void;
+      value?: selectedFilterProps;
+    }>;
+  };
+};
+
+export interface FilterDateTimeProps {
+  children?: never;
+  data: TableDataRow[];
+}
+export interface SampleDataGridProps {
+  data: TableDataRow[];
+  showDateTime?: boolean;
+}
+
+export interface ExtendedDataGridProps {
+  data: ExtendedTableDataRow[];
+  showDateTime?: boolean;
+}
+
+export type RoomTypes = "Group" | "WebRTC Go" | "Peer to Peer" | "";
+export type ParticipantsType = { min: string; max: string };
+export type DateRangeType = { startDate: string; endDate: string };
+export type SearchFilterType = { search: string };
+
+export type selectedFilterProps = RoomTypes | ParticipantsType | DateRangeType | SearchFilterType | Item[] | string[];
+
+export type FilterListType = Array<
+  | "roomType"
+  | "participants"
+  | "dateCompleted"
+  | "sid"
+  | "uniqueName"
+  | "hostName"
+  | "status"
+  | "tags"
+  | "platform"
+  | "department"
+  | "custom"
+  | "search"
+  | "add-filters"
+>;
+
+export interface FilterProps {
+  children?: never;
+  data: ExtendedTableDataRow[] | TableDataRow[];
+  withSearch?: boolean;
+  onMoreFiltersClick?: () => void;
+  filterList: FilterListType;
+  addFiltersList?: FilterListType;
+  recommendedFiltersList?: FilterListType;
+  extendedTable?: boolean;
+  selectedMoreFilters?: Record<string, string | string[]>;
+  setSelectedMoreFilters?: React.Dispatch<React.SetStateAction<Record<string, string | string[]>>>;
+  selectedFiltersDefault?: Record<string, selectedFilterProps>;
+}
diff --git a/packages/paste-website/src/pages/components/form-pill-group/index.mdx b/packages/paste-website/src/pages/components/form-pill-group/index.mdx
index fe201dcaf2..ffe7e121af 100644
--- a/packages/paste-website/src/pages/components/form-pill-group/index.mdx
+++ b/packages/paste-website/src/pages/components/form-pill-group/index.mdx
@@ -139,9 +139,9 @@ A Form Pill can have an optional [Avatar](/components/avatar) or [Icon](/compone
   {basicExample}
 </LivePreview>
 
-### Large 
+### Large
 
-Use `size="large"` Form Pills only for specific and approved use cases, such as in the filter group pattern (link coming soon!).
+Use `size="large"` Form Pills only for specific and approved use cases, such as in the [filter pattern](/patterns/filter).
 
 <LivePreview scope={{FormPill, FormPillGroup, useFormPillState, ProductVideoIcon, ProductVerifyIcon}} noInline>
   {largeExample}
@@ -198,9 +198,9 @@ The `onSelect` event handler will fire when a user presses the spacebar or enter
   {selectableAndDismissableExample}
 </LivePreview>
 
-### Tree variant for filters 
+### Tree variant for filters
 
-The `tree` variant for FormPillGroup changes the accessibility roles and DOM elements of the FormPill to be more tree-like where selecting the pill expands more options. This variant of Form Pills is only for specific and approved use cases, such as in the filter pattern (link coming soon!).
+The `tree` variant for FormPillGroup changes the accessibility roles and DOM elements of the FormPill to be more tree-like where selecting the pill expands more options. This variant of Form Pills is only for specific and approved use cases, such as in the [filter pattern](/patterns/filter).
 
 <LivePreview scope={{FormPill, FormPillGroup, useFormPillState, ProductVideoIcon, ProductVerifyIcon}} noInline>
   {treeVariantExample}
diff --git a/packages/paste-website/src/pages/components/popover/index.mdx b/packages/paste-website/src/pages/components/popover/index.mdx
index de0f97b156..2c849af3cb 100644
--- a/packages/paste-website/src/pages/components/popover/index.mdx
+++ b/packages/paste-website/src/pages/components/popover/index.mdx
@@ -310,7 +310,7 @@ To launch a Popover from a Badge component, use the PopoverBadgeButton component
 
 ### PopoverFormPillButton
 
-This component should **only be used as part of the filter pattern** (link coming soon!). It renders a FormPill and accepts all of its props, which are listed [on the Form Pill Group page](/components/form-pill-group#basic).
+This component should **only be used as part of the [filter pattern](/patterns/filter)**. It renders a FormPill and accepts all of its props, which are listed [on the Form Pill Group page](/components/form-pill-group#basic).
 
 <LivePreview
   scope={{
diff --git a/packages/paste-website/src/pages/components/side-panel/index.mdx b/packages/paste-website/src/pages/components/side-panel/index.mdx
index c933eeb5db..c7e3c5c5c3 100644
--- a/packages/paste-website/src/pages/components/side-panel/index.mdx
+++ b/packages/paste-website/src/pages/components/side-panel/index.mdx
@@ -76,7 +76,8 @@ export const SidePanelExample = (): React.ReactNode => {
         </Box>
       </SidePanelPushContentWrapper>
     </SidePanelContainer>
-  )`}
+  )
+}`}
 />
 
 ## Guidelines
@@ -148,7 +149,8 @@ export const SidePanelExample = (): React.ReactNode => {
         </Box>
       </SidePanelPushContentWrapper>
     </SidePanelContainer>
-  )`}
+  )
+}`}
 />
 
 ### Internationalization
@@ -179,7 +181,8 @@ export const SidePanelExample = (): React.ReactNode => {
         </Box>
       </SidePanelPushContentWrapper>
     </SidePanelContainer>
-  )`}
+  )
+}`}
 />
 
 ## Composition notes
@@ -202,7 +205,7 @@ The Side Panel Header Actions component is a container for action buttons that a
 
 The Side Panel Body is a container for the main content of the Side Panel. This is where the majority of the content will be placed.
 
-#### Side Panel Footer 
+#### Side Panel Footer
 
 The Side Panel Footer is a container for the Side Panel's overall actions, such as a [Chat Composer](/components/chat-composer) or [Button(s)](/components/button).
 
@@ -212,4 +215,4 @@ The Side Panel Push Content Wrapper is a container for the main page content tha
 
 #### Side Panel Button (or Side Panel Badge Button)
 
-In order to ensure accessibility, use one of the buttons exported from the Side Panel package as the trigger for the Side Panel. The Side Panel Button is a button that opens the Side Panel when clicked.
\ No newline at end of file
+In order to ensure accessibility, use one of the buttons exported from the Side Panel package as the trigger for the Side Panel. The Side Panel Button is a button that opens the Side Panel when clicked.
diff --git a/packages/paste-website/src/pages/patterns/filter/index.mdx b/packages/paste-website/src/pages/patterns/filter/index.mdx
new file mode 100644
index 0000000000..4d1bb77872
--- /dev/null
+++ b/packages/paste-website/src/pages/patterns/filter/index.mdx
@@ -0,0 +1,611 @@
+export const meta = {
+  title: 'Filter',
+  description: 'Filters enable users to narrow down and refine results across various types of content pages, including rich content pages, data tables, lists, data insights, and more.',
+  slug: '/patterns/filter/',
+};
+
+import {Anchor} from '@twilio-paste/anchor';
+import {Box} from '@twilio-paste/box';
+import {Card} from '@twilio-paste/card';
+import {Grid, Column} from '@twilio-paste/grid';
+import {Heading} from '@twilio-paste/heading';
+import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout';
+import {UnorderedList, OrderedList, ListItem} from '@twilio-paste/list'
+import {DoDont, Do, Dont} from '../../../components/DoDont';
+
+import DefaultLayout from '../../../layouts/DefaultLayout';
+import {getFeature, getNavigationData} from '../../../utils/api';
+import {Blockquote} from '../../../components/Blockquote';
+import {ResponsiveImage} from '../../../components/ResponsiveImage';
+import MainImage from '../../../assets/images/patterns/filter-main.png';
+import UsageImage from '../../../assets/images/patterns/filter-usage.png';
+import FilterBarImage from '../../../assets/images/patterns/filter-filter_bar.png';
+import FetchingImage from '../../../assets/images/patterns/filter-fetching.png';
+import DynamicImage from '../../../assets/images/patterns/filter-dynamic.png';
+import Responsive1Image from '../../../assets/images/patterns/filter-responsive.png';
+import Responsive2Image from '../../../assets/images/patterns/filter-responsive_2.png';
+
+export default DefaultLayout;
+
+export const getStaticProps = async () => {
+  const navigationData = await getNavigationData();
+  const feature = await getFeature('Filter');
+  return {
+    props: {
+      data: {
+        ...feature,
+      },
+      navigationData,
+    },
+  };
+};
+
+
+
+<NormalizedPatternHeader description={meta.description} name={meta.title} data={props.data} />
+
+
+
+<contentwrapper>
+
+<PageAside data={mdxHeadings} />
+
+<content>
+
+<ResponsiveImage src={MainImage} alt="a demo page with filter pattern" />
+
+```jsx
+// import the components for filter group patterns as required
+
+import { FormPillGroup, useFormPillState } from "@twilio-paste/core/form-pill-group";
+import {Input} from '@twilio-paste/core/input';
+import {MultiselectCombobox, useMultiselectCombobox} from "@twilio-paste/core/combobox";
+import {Button} from '@twilio-paste/core/button';
+import {ButtonGroup} from "@twilio-paste/core/button-group";
+import {Disclosure, DisclosureContent, DisclosureHeading} from "@twilio-paste/core/disclosure";
+import {Badge} from "@twilio-paste/core/badge";
+import {Checkbox, CheckboxGroup} from "@twilio-paste/core/checkbox";
+import {Radio, RadioGroup} from "@twilio-paste/core/radio-group";
+import { Popover, PopoverButton, PopoverContainer, usePopoverState } from "@twilio-paste/core/popover";
+```
+
+## Usage
+
+The filter pattern should be used when a user is presented with a page containing a large amount of data that they could be filtering or searching through. The filter parameters and functionality you can surface to the user will be highly dependent on the page use case.
+
+This pattern provides recommendations for selection methods, layout, and behavior to reduce complexity and improve user efficiency when using different types of filters in a feature. Before adding filters to your feature, it's essential to:
+
+<OrderedList>
+  <ListItem>
+    Familiarize yourself with your feature’s filter values and categories.
+    <UnorderedList>
+      <ListItem>List all filtering criteria available.</ListItem>
+      <ListItem>Map out the relationships between different filters and choose the ones that will be part of your feature. Remember filters should give users a sense of control and not overwhelm them.</ListItem>
+      <Blockquote
+        name="Defining Helpful Filter Categories and Values for Better UX"
+        source="Nielsen Norman Group"
+        sourceUrl="https://www.nngroup.com/articles/filter-categories-values/"
+      >
+        A truly usable faceted search provides filter categories and filter values that are appropriate, predictable, free of jargon, and prioritized
+      </Blockquote>
+      <ResponsiveImage src={UsageImage} alt="The filter category label should be the same as the form field label" />
+      <ListItem>Check our <Anchor href="/components/form#selection-methods">Form documentation</Anchor> to choose the best selection method for your filter use case.</ListItem>
+    </UnorderedList>
+  </ListItem>
+  <ListItem>
+    Determine users' intent and their relationship with the product and dataset.
+    <UnorderedList>
+      <ListItem>Categorize filters into the most relevant and commonly used filters versus the more advanced or less used ones.</ListItem>
+      <ListItem>Determine how many different types of users will access the feature and how much the filtering criteria will vary from use case to use case. If necessary, consider allowing users to <Anchor href="#add-filters">add custom filters</Anchor> to provide a more tailored experience.</ListItem>
+      <ListItem>Identify any filter values that naturally lead to additional refinement options, and consider implementing <Anchor href="#conditional-filters">conditional filters</Anchor>.</ListItem>
+    </UnorderedList>
+  </ListItem>
+  <ListItem>
+    Determine any technical constraints.
+    <UnorderedList>
+      <ListItem>Ensure you have a good understanding of how the data is set up, including which filtering behaviors and combinations are not possible.</ListItem>
+      <ListItem>Evaluate carefully the best filtering behavior for <Anchor href="#fetching-results">fetching results</Anchor>. Keep in mind user intent, but also loading times and the size of the dataset.</ListItem>
+      <ListItem>Ensure that all filter options correspond to data present in the results. Avoid including filters for data that are not visible or accessible within the dataset.</ListItem>
+      <ListItem>Evaluate the expected growth of your filtering criteria and ensure it can manage larger datasets without notable performance decline.</ListItem>
+    </UnorderedList>
+  </ListItem>
+</OrderedList>
+
+### Accessibility
+
+When using the filter pattern, ensure that users:
+<UnorderedList>
+  <ListItem>Can easily identify and understand labels for each selection method, filter value, or category.</ListItem>
+  <ListItem>Are notified of state changes. For example, when a button changes from the disabled state to the default state, or when the dataset enters a loading state.</ListItem>
+  <ListItem>Can complete all actions with the keyboard.</ListItem>
+</UnorderedList>
+
+<Callout variant="neutral" marginY="space70">
+  <CalloutText>
+    Check accessibility considerations for each component part of the filter feature, for example if you’re using Time Picker, follow its accessibility guidelines.
+  </CalloutText>
+</Callout>
+
+## Variations
+
+### Filter bar
+
+A filter bar is the default way of displaying filters.
+
+Use it when all filters are relevant and necessary to the search. It can also be used in combination with a [More filters Side Panel](#more-filters-side-panel) when there are secondary filter criteria.
+
+#### Ingredients
+- [Heading](/components/heading)
+- [Form Pill Group](/components/form-pill-group)
+- [Detail Text](/components/detail-text) (for number of results)
+- [Popover](/components/popover)
+- [Form](/components/form) and other form field components
+- [Primary Button](/components/button#primary-button) (for applying filters)
+- [Secondary Button](/components/button#secondary-button) (for clearing filters)
+- [Link-style Button](/components/button#link-style-button) (for clearing results)
+
+<StoryPreview
+  title="Filter bar example"
+  storyID="website-filterexamples--default-filter-example"
+  height="600px"
+  code={`
+export const FilterPatternExample = ({data}): React.ReactNode => {
+  const [selectedFilters, setSelectedFilters] = React.useState({});
+  const [filteredTableData, setFilteredTableData] = React.useState(data);
+  const pillState = useFormPillState();
+  const popover = usePopoverState({ baseId: pill });
+  return (
+    <>
+      <Heading as="h1" variant="heading50">Filter</Heading>
+      <FormPillGroup {...pillState} aria-label="Filters:" size="large">
+        {filterList.map((pill) => {
+          return (
+            <PopoverContainer key={pill} state={popover}>
+              <PopoverButton
+                variant="reset"
+                size="reset"
+                borderRadius="borderRadiusPill"
+              >
+                <FormPill
+                  {...pillState}
+                  selected={isSelected}
+                  onDismiss={
+                    // Remove the filter from the selected filters
+                  }
+                >
+                  {!isSelected ? <PlusIcon decorative /> : null}
+                  <FilterPillView label={filterMap[pill].label} selectedType={isSelected ? pill : null} selectedValue={value} />
+                </FormPill>
+              </PopoverButton>
+              <Popover aria-label={pill} width="size40">
+                <FilterComponent value={value} onApply={onApply} popover={popover} onRemove={onRemove} /> // Create different filter components
+              </Popover>
+            </PopoverContainer>
+          );
+        })}
+      </FormPillGroup>
+      <Box display="flex" justifyContent="space-between" alignItems="center" columnGap="space30" marginTop="space50">
+        <Box display="flex" columnGap="space30">
+          <DetailText marginTop="space0">
+            <Text as="span" color="colorTextWeak" fontSize="fontSize30">
+              {filteredTableData.length} result{filteredTableData.length !== 1 && "s"}
+            </Text>
+          </DetailText>
+          {filteredTableData.length !== data.length ? (
+            <Button variant="link" onClick={handleClearAll}>
+              Clear all
+            </Button>
+          ) : null}
+        </Box>
+      </Box>
+      <DataGrid data={filteredTableData} />
+    </>
+  )
+}`}
+/>
+
+#### Surfacing results
+<UnorderedList>
+  <ListItem>When a filter value is selected by the user, the corresponding Form Pill will enter a selected state.</ListItem>
+  <ListItem>When a single filter value is selected, the filter updates to display the name of the selected filter.</ListItem>
+  <ListItem>When two or more filter values are selected per filter category, the total number of selected filters will be displayed in a counter badge.</ListItem>
+  <ListItem>In some scenarios, it is necessary to have filter values pre-selected by default to display results. Since the selection was not made by the user, the Form Pill will remain in its default state, displaying the pre-selected filter value.</ListItem>
+</UnorderedList>
+
+ <ResponsiveImage src={FilterBarImage} alt="The filter bar has different states based on interaction" />
+
+<DoDont>
+  <Do title="Do" body="Arrange filters in a way that mirrors how users think about and interact with the data." />
+  <Dont title="Don't" body="Don't overload the filter bar with too many filters. It's designed for prioritized, essential filters to keep the screen uncluttered and easy to navigate." />
+  <Do title="Do" body="Arrange filter values in a logical order; for example, dates should be in chronological order and names should be in alphabetical order." />
+</DoDont>
+
+### More filters Side Panel
+
+Use it in scenarios where the list of filters is extensive and there are filters that are not a priority to the search. Prioritize the most relevant and commonly used filters in the filter bar for visibility, while offering advanced filtering options in a Side Panel.
+
+#### Ingredients
+- [Secondary rounded Button](/components/button#rounded-small-button) (for more filters)
+- [Side Panel](/components/side-panel)
+- [Neutral counter Badge](/components/badge)
+- [Dismissible Form Pill Group](/components/form-pill-group#dismissible) (for showing filter selections)
+- [Disclosure](/components/disclosure) (for filter categories)
+- [Link-style Button](/components/button#link-style-button) (for clearing results)
+
+<StoryPreview
+  title="More filters Side Panel example"
+  storyID="website-filterexamples--more-filter-example"
+  height="600px"
+  code={`
+export const MoreFilterPatternExample = ({data, filterList}): React.ReactNode => {
+  const [selectedFilters, setSelectedFilters] = React.useState({});
+  const pillState = useFormPillState();
+  const [filteredTableData, setFilteredTableData] = React.useState(data);
+  return (
+    <>
+      <SidePanelContainer id={sidePanelId} isOpen={isOpen} setIsOpen={setIsOpen}>
+        <SidePanel>
+          <SidePanelHeader>
+            <Heading as="h3" variant="heading30">
+              More filters
+            </Heading>
+          </SidePanelHeader>
+          <Separator orientation="horizontal" verticalSpacing="space0" />
+          <SidePanelBody>
+            <Box
+              display="flex"
+              flexDirection="column"
+              rowGap="space40"
+              marginTop="space70"
+              marginBottom="space70"
+              width="100%"
+            >
+              {filterList.map((filter) => {
+                return (
+                <Disclosure>
+                  <DisclosureHeading as="h2" variant="heading50">
+                    <Box display="flex" justifyContent="space-between" alignItems="center" columnGap="space20" width="100%">
+                      <Box as="span">{filter.label}</Box>
+                        {selectedCount ? (
+                          <Badge as="span" variant="neutral_counter" size="small">
+                            Selected {filter.type === "status" ? 1 : selectedCount}
+                          </Badge>
+                        ) : null}
+                      </Box>
+                  </DisclosureHeading>
+                  <DisclosureContent>
+                    <FilterComponent
+                      key={filter.label}
+                      label={filter.label}
+                      items={filter.items}
+                      setSelectedCount={setSelectedCount}
+                      setSelectedMoreFilters={setSelectedMoreFilters}
+                      selectedMoreFilters={tempSelectedMoreFilters}
+                    />
+                  </DisclosureContent>
+                </Disclosure>
+                );
+              })}
+            </Box>
+          </SidePanelBody>
+          <SidePanelFooter>
+            <ButtonGroup>
+              <Button
+                variant="primary"
+                onClick={() => {
+                  // Apply filters
+                }}
+              >
+                Apply
+              </Button>
+              <Button
+                variant="secondary"
+                onClick={() => {
+                  // Clear all filters
+                }}
+              >
+                Clear all
+              </Button>
+            </ButtonGroup>
+          </SidePanelFooter>
+        </SidePanel>
+        <SidePanelPushContentWrapper>
+        // Filter components from other examples
+        </SidePanelPushContentWrapper>
+      </SidePanelContainer>
+    </>
+  )
+}`}
+/>
+
+#### Surfacing results
+
+<UnorderedList>
+  <ListItem>In the “More filters” Side Panel when filters are selected, a counter Badge will be displayed in the right corner of the filter value (disclosure)</ListItem>
+  <ListItem>“More filters” Button will have a counter Badge with the number of selected filter values.</ListItem>
+</UnorderedList>
+
+<DoDont>
+  <Do title="Do" body="Ensure that the filters in the Filter bar and those in the Side Panel are independent and won’t need to be applied along with another filter criteria to return relevant results." />
+  <Dont title="Don't" body="Don’t use a “More Filters” Side Panel for fewer than 3 additional filters." />
+</DoDont>
+
+### Add filters
+
+An "Add filters" Popover allows users to add a filter value from a predefined list of filter options. Use it in scenarios where the list of filters may not be relevant to all users, or the user would benefit from creating their own filters set.
+
+<Callout variant="neutral" marginY="space70">
+  <CalloutHeading as="h4">Demo coming soon!</CalloutHeading>
+</Callout>
+
+## Composition
+
+### Combining search and filters
+
+If there is search functionality, it should always take priority over filters. The search should be placed higher in the hierarchy, with the expectation that users will search first and then use the filters to refine and narrow down the search results.
+
+<StoryPreview
+  title="Filter with search example"
+  storyID="website-filterexamples--search-filter-example"
+  height="600px"
+  code={`
+export const SearchFilterPatternExample = ({data}): React.ReactNode => {
+  const [selectedFilters, setSelectedFilters] = React.useState({});
+  const pillState = useFormPillState();
+  const [filteredTableData, setFilteredTableData] = React.useState(data);
+  return (
+    <>
+      <Heading as="h1" variant="heading50">Filter</Heading>
+      <>
+        <Label htmlFor="search-filter">Search</Label>
+        <Input
+          id="search-filter"
+          type="search"
+          insertBefore={<SearchIcon decorative />}
+          name="search-filter"
+          onChange={onChange}
+        />
+      </>
+      <FormPillGroup {...pillState} aria-label="Filters:" size="large">
+        {filterList.map((pill) => {
+          return (
+            <PopoverContainer key={pill} state={popover}>
+              <PopoverButton
+                variant="reset"
+                size="reset"
+                borderRadius="borderRadiusPill"
+              >
+                <FormPill
+                  {...pillState}
+                  selected={isSelected}
+                  onDismiss={
+                    // Remove the filter from the selected filters
+                  }
+                >
+                  {!isSelected ? <PlusIcon decorative /> : null}
+                  <FilterPillView label={filterMap[pill].label} selectedType={isSelected ? pill : null} selectedValue={value} />
+                </FormPill>
+              </PopoverButton>
+              <Popover aria-label={pill} width="size40">
+                <FilterComponent value={value} onApply={onApply} popover={popover} onRemove={onRemove} /> // Create different filter components
+              </Popover>
+            </PopoverContainer>
+          );
+        })}
+      </FormPillGroup>
+      <Box display="flex" justifyContent="space-between" alignItems="center" columnGap="space30" marginTop="space50">
+        <Box display="flex" columnGap="space30">
+          <DetailText marginTop="space0">
+            <Text as="span" color="colorTextWeak" fontSize="fontSize30">
+              {filteredTableData.length} result{filteredTableData.length !== 1 && "s"}
+            </Text>
+          </DetailText>
+          {filteredTableData.length !== data.length ? (
+            <Button variant="link" onClick={handleClearAll}>
+              Clear all
+            </Button>
+          ) : null}
+        </Box>
+      </Box>
+      <DataGrid data={filteredTableData} />
+    </>
+  )
+}`}
+/>
+
+### Conditional filters
+
+A conditional filter is a type of filter that becomes available based on the initial filter selections made by the user.
+
+<StoryPreview
+  title="Conditional filter example"
+  storyID="website-filterexamples--conditional-filter-example"
+  height="600px"
+  code={`
+export const ConditionalFilterPatternExample = ({data}): React.ReactNode => {
+  const [selectedFilters, setSelectedFilters] = React.useState({});
+  const pillState = useFormPillState();
+  const [filteredTableData, setFilteredTableData] = React.useState(data);
+  return (
+    <>
+      <Heading as="h1" variant="heading50">Filter</Heading>
+      <FormPillGroup {...pillState} aria-label="Filters:" size="large">
+        {filterList.map((pill) => {
+          return (
+            <PopoverContainer key={pill} state={popover}>
+              <PopoverButton
+                variant="reset"
+                size="reset"
+                borderRadius="borderRadiusPill"
+              >
+                <FormPill
+                  {...pillState}
+                  selected={isSelected}
+                  onDismiss={
+                    // Remove the filter from the selected filters
+                  }
+                >
+                  {!isSelected ? <PlusIcon decorative /> : null}
+                  <FilterPillView label={filterMap[pill].label} selectedType={isSelected ? pill : null} selectedValue={value} />
+                </FormPill>
+              </PopoverButton>
+              <Popover aria-label={pill} width="size40">
+                <FilterComponent value={value} onApply={onApply} popover={popover} onRemove={onRemove} /> // Create different filter components
+              </Popover>
+            </PopoverContainer>
+          );
+        })}
+      </FormPillGroup>
+      <Box display="flex" justifyContent="space-between" alignItems="center" columnGap="space30" marginTop="space50">
+        <Box display="flex" columnGap="space30">
+          <DetailText marginTop="space0">
+            <Text as="span" color="colorTextWeak" fontSize="fontSize30">
+              {filteredTableData.length} result{filteredTableData.length !== 1 && "s"}
+            </Text>
+          </DetailText>
+          {filteredTableData.length !== data.length ? (
+            <Button variant="link" onClick={handleClearAll}>
+              Clear all
+            </Button>
+          ) : null}
+        </Box>
+      </Box>
+      <DataGrid data={filteredTableData} />
+    </>
+  )
+}`}
+/>
+
+Use it when filter selections naturally lead to additional criteria, or where certain filter formulas are only necessary for very specific use cases.
+
+<DoDont>
+  <Do title="Do" body="Consider the performance implications of loading conditional filters." />
+  <Dont title="Don't" body="Don’t use conditional filtering for essential filter criteria." />
+</DoDont>
+
+## Behavior
+
+### Fetching results
+
+#### Batch filtering
+
+Batch filtering requires the user to click an “Apply” button to see the results.
+
+ <ResponsiveImage src={FetchingImage} alt="The filter bar supports batch filtering of results on click of apply" />
+
+
+Use batch filtering when:
+<UnorderedList>
+  <ListItem>There are categories with multiple interdependent filter values, and the user might want to take more time selecting the right group of filters.</ListItem>
+  <ListItem>The dataset cannot be refreshed automatically and the system needs time to load the data.</ListItem>
+  <ListItem>You want to prevent "no results" scenarios.</ListItem>
+</UnorderedList>
+
+To load results: Once the user clicks the "Apply" button, the Popover will automatically close, and a loading screen will be displayed until the data is fully loaded. It is recommended to use the [Skeleton Loader](/components/skeleton-loader) when loading the results of the filters and/or search.
+
+#### Dynamic filtering
+
+Dynamic filters are applied as soon as a filter selection is made.
+
+ <ResponsiveImage src={DynamicImage} alt="The filter bar also supports batch filtering of results as soon as selection is made" />
+
+Use dynamic filtering when:
+<UnorderedList>
+  <ListItem>The filter experience is more explorative and users need to play around with the filters to find their desired results.</ListItem>
+  <ListItem>The user is expected to make multiple quick filter changes during the task.</ListItem>
+</UnorderedList>
+
+<Callout variant="neutral" marginY="space70">
+  <CalloutText>
+    Be cautious when dynamically updating results, as they can divert user attention.
+  </CalloutText>
+</Callout>
+
+To load results: Dynamic filtering is designed to allow users to experiment with different filters. The Popover will remain open until the user closes it, while the results load in the background.
+
+### Empty states
+
+When the applied filters and/or search does not return any results, use the [empty state pattern](/patterns/empty-state) to inform the user and provide a method to reset all filter and search criteria.
+
+<StoryPreview
+  title="Empty filter example"
+  storyID="website-filterexamples--no-result-example"
+  height="600px"
+  code={`
+export const EmptyFilterPatternExample = ({data}): React.ReactNode => {
+  const [selectedFilters, setSelectedFilters] = React.useState({});
+  const pillState = useFormPillState();
+  const [filteredTableData, setFilteredTableData] = React.useState(data);
+  return (
+    <>
+      <Heading as="h1" variant="heading50">Filter</Heading>
+      <FormPillGroup {...pillState} aria-label="Filters:" size="large">
+        {filterList.map((pill) => {
+          return (
+            <PopoverContainer key={pill} state={popover}>
+              <PopoverButton
+                variant="reset"
+                size="reset"
+                borderRadius="borderRadiusPill"
+              >
+                <FormPill
+                  {...pillState}
+                  selected={isSelected}
+                  onDismiss={
+                    // Remove the filter from the selected filters
+                  }
+                >
+                  {!isSelected ? <PlusIcon decorative /> : null}
+                  <FilterPillView label={filterMap[pill].label} selectedType={isSelected ? pill : null} selectedValue={value} />
+                </FormPill>
+              </PopoverButton>
+              <Popover aria-label={pill} width="size40">
+                <FilterComponent value={value} onApply={onApply} popover={popover} onRemove={onRemove} /> // Create different filter components
+              </Popover>
+            </PopoverContainer>
+          );
+        })}
+      </FormPillGroup>
+      <Box display="flex" justifyContent="space-between" alignItems="center" columnGap="space30" marginTop="space50">
+        <Box display="flex" columnGap="space30">
+          <DetailText marginTop="space0">
+            <Text as="span" color="colorTextWeak" fontSize="fontSize30">
+              {filteredTableData.length} result{filteredTableData.length !== 1 && "s"}
+            </Text>
+          </DetailText>
+          {filteredTableData.length !== data.length ? (
+            <Button variant="link" onClick={handleClearAll}>
+              Clear all
+            </Button>
+          ) : null}
+        </Box>
+      </Box>
+      <DataGrid data={filteredTableData} />
+    </>
+  )
+}`}
+/>
+
+### Clearing filters
+
+A clear filter option will be available when filters are selected. By default, "clear all filters" will remove all filter criteria and display all results. In use cases where there is a selected filter value by default, "clear all filters" will reset the filters to their default state.
+
+<DoDont>
+  <Do title="Do" body="Provide ways to clear all filters as a global action." />
+  <Do title="Do" body="Provide ways to clear all filters on a filter category level." />
+</DoDont>
+
+### Responsive
+
+On mobile screen sizes, consolidate all filter options under a "Filter" button to optimize screen space and usability.
+
+ <ResponsiveImage src={Responsive1Image} alt="On smaller screens, filter modal will take full width" />
+
+At smaller screen sizes, filter Pills will overflow onto the next row. All other actions (such as "More filters", “Add filters”, "Clear all” and table actions) move to the last row to maintain a clean and organized layout.
+
+ <ResponsiveImage src={Responsive2Image} alt="filter pills will stack vertically to make better use of available space" />
+
+
+</content>
+
+</contentwrapper>
diff --git a/packages/paste-website/stories/Filter.stories.tsx b/packages/paste-website/stories/Filter.stories.tsx
new file mode 100644
index 0000000000..c43b8c4ea6
--- /dev/null
+++ b/packages/paste-website/stories/Filter.stories.tsx
@@ -0,0 +1,77 @@
+import * as React from "react";
+
+import { DefaultFilter } from "../src/component-examples/filter/components/DefaultFilter";
+import { MoreFilters } from "../src/component-examples/filter/components/filters/MoreFilters";
+import { STATIC_TABLE_DATA } from "../src/component-examples/filter/constants";
+import type { FilterListType } from "../src/component-examples/filter/types";
+
+export default {
+  title: "Website/FilterExamples",
+};
+
+const filterList: FilterListType = ["roomType", "participants", "dateCompleted"];
+export const DefaultFilterExample = (): JSX.Element => {
+  return <DefaultFilter data={STATIC_TABLE_DATA} filterList={filterList} />;
+};
+
+DefaultFilterExample.parameters = {
+  padding: false,
+};
+
+export const SearchFilterExample = (): JSX.Element => {
+  return <DefaultFilter data={STATIC_TABLE_DATA} withSearch filterList={filterList} />;
+};
+
+SearchFilterExample.parameters = {
+  padding: false,
+};
+
+export const ConditionalFilterExample = (): JSX.Element => {
+  const conditionalFilterList: FilterListType = ["custom"];
+  return <DefaultFilter data={STATIC_TABLE_DATA} filterList={conditionalFilterList} />;
+};
+
+ConditionalFilterExample.parameters = {
+  padding: false,
+};
+
+/*
+ * export const AddFilterExample = (): JSX.Element => {
+ * const addFilterList: FilterListType = ["roomType", "participants"];
+ * const addFiltersList: FilterListType = ["sid", "uniqueName", "participants"];
+ * const recommendedFiltersList: FilterListType = ["uniqueName", "participants"];
+ * return (
+ *  <DefaultFilter
+ *    data={STATIC_TABLE_DATA}
+ *    filterList={addFilterList}
+ *    addFiltersList={addFiltersList}
+ *    recommendedFiltersList={recommendedFiltersList}
+ *  />
+ * );
+ * };
+ */
+
+export const MoreFilterExample = (): JSX.Element => {
+  return <MoreFilters />;
+};
+
+MoreFilterExample.parameters = {
+  padding: false,
+};
+
+export const NoResultExample = (): JSX.Element => {
+  const noResultList: FilterListType = ["roomType", "participants", "dateCompleted"];
+  return (
+    <DefaultFilter
+      data={STATIC_TABLE_DATA}
+      filterList={noResultList}
+      selectedFiltersDefault={{
+        participants: { min: "100", max: "200" },
+      }}
+    />
+  );
+};
+
+NoResultExample.parameters = {
+  padding: false,
+};
diff --git a/yarn.lock b/yarn.lock
index 185fb11e4e..345a9283f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14686,7 +14686,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@twilio-paste/side-panel@^1.1.0, @twilio-paste/side-panel@workspace:packages/paste-core/components/side-panel":
+"@twilio-paste/side-panel@^1.0.0, @twilio-paste/side-panel@^1.1.0, @twilio-paste/side-panel@workspace:packages/paste-core/components/side-panel":
   version: 0.0.0-use.local
   resolution: "@twilio-paste/side-panel@workspace:packages/paste-core/components/side-panel"
   dependencies:
@@ -15984,6 +15984,7 @@ __metadata:
     "@twilio-paste/separator": ^8.1.1
     "@twilio-paste/sibling-box": ^9.1.1
     "@twilio-paste/side-modal": ^4.1.3
+    "@twilio-paste/side-panel": ^1.0.0
     "@twilio-paste/sidebar": ^1.1.1
     "@twilio-paste/skeleton-loader": ^6.1.1
     "@twilio-paste/slider": ^3.0.1