@bikdotai/bik-component-library 0.0.805-beta.4 → 0.0.805-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/BikGiftedChat/GiftedChat/GiftedChat.js +1 -1
- package/dist/cjs/components/BikGiftedChat/GiftedChat/GiftedChat.js.map +1 -1
- package/dist/cjs/components/BikGiftedChat/GiftedChat/types.js.map +1 -1
- package/dist/cjs/components/avatar/Avatar.js +1 -1
- package/dist/cjs/components/avatar/Avatar.js.map +1 -1
- package/dist/cjs/components/avatar/Avatar.styled.js +3 -3
- package/dist/cjs/components/avatar/Avatar.styled.js.map +1 -1
- package/dist/cjs/components/avatar/AvatarHelper.js +1 -1
- package/dist/cjs/components/avatar/AvatarHelper.js.map +1 -1
- package/dist/cjs/components/bik-layout/BikSidebar.js.map +1 -1
- package/dist/cjs/components/bik-layout/BikSidebarV2/BikSidebarV2.js +2 -0
- package/dist/cjs/components/bik-layout/BikSidebarV2/BikSidebarV2.js.map +1 -0
- package/dist/cjs/components/bik-layout/BikSidebarV2/SidebarV2Popup.js +2 -0
- package/dist/cjs/components/bik-layout/BikSidebarV2/SidebarV2Popup.js.map +1 -0
- package/dist/cjs/components/bik-layout/BikSidebarV2/SidebarV2Styles.js +294 -0
- package/dist/cjs/components/bik-layout/BikSidebarV2/SidebarV2Styles.js.map +1 -0
- package/dist/cjs/components/bik-layout/BikSidebarV2/SimpleSidebarV2.js +2 -0
- package/dist/cjs/components/bik-layout/BikSidebarV2/SimpleSidebarV2.js.map +1 -0
- package/dist/cjs/components/button/Button.js +1 -1
- package/dist/cjs/components/button/Button.js.map +1 -1
- package/dist/cjs/components/button/Button.styled.js +1 -1
- package/dist/cjs/components/button/Button.styled.js.map +1 -1
- package/dist/cjs/components/button/themes.js +1 -1
- package/dist/cjs/components/button/themes.js.map +1 -1
- package/dist/cjs/components/country-code-picker/CountryCodePicker.js.map +1 -1
- package/dist/cjs/components/country-code-picker/CountryPicker.js.map +1 -1
- package/dist/cjs/components/dropdown/Dropdown.js +1 -1
- package/dist/cjs/components/dropdown/Dropdown.js.map +1 -1
- package/dist/cjs/components/dropdown/DropdownPopover/index.js +1 -1
- package/dist/cjs/components/dropdown/DropdownPopover/index.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.js +6 -5
- package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/description/Description.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/description/Description.styled.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.js +7 -7
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.js +8 -4
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js.map +1 -1
- package/dist/cjs/components/dropdown-button/DropdownButton.js +1 -1
- package/dist/cjs/components/dropdown-button/DropdownButton.js.map +1 -1
- package/dist/cjs/components/dropdown-button/DropdownButton.style.js +10 -6
- package/dist/cjs/components/dropdown-button/DropdownButton.style.js.map +1 -1
- package/dist/cjs/components/dual-icon-button/DualIconButton.js +2 -0
- package/dist/cjs/components/dual-icon-button/DualIconButton.js.map +1 -0
- package/dist/cjs/components/dual-icon-button/DualIconButton.styled.js +26 -0
- package/dist/cjs/components/dual-icon-button/DualIconButton.styled.js.map +1 -0
- package/dist/cjs/components/fab-menu/FABMenu.js.map +1 -1
- package/dist/cjs/components/feature-announcements/FeatureAnnouncementProvider.js +1 -1
- package/dist/cjs/components/feature-announcements/FeatureAnnouncementProvider.js.map +1 -1
- package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js +1 -1
- package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js.map +1 -1
- package/dist/cjs/components/feature-announcements/MinorUpdatePopup.js +1 -1
- package/dist/cjs/components/feature-announcements/MinorUpdatePopup.js.map +1 -1
- package/dist/cjs/components/icon-button/IconButton.js +1 -1
- package/dist/cjs/components/icon-button/IconButton.js.map +1 -1
- package/dist/cjs/components/icon-button/IconButton.styled.js +3 -3
- package/dist/cjs/components/icon-button/IconButton.styled.js.map +1 -1
- package/dist/cjs/components/icon-button/theme.js +1 -1
- package/dist/cjs/components/icon-button/theme.js.map +1 -1
- package/dist/cjs/components/input/Input.js +1 -1
- package/dist/cjs/components/input/Input.js.map +1 -1
- package/dist/cjs/components/input/Input.styled.js +1 -1
- package/dist/cjs/components/input/Input.styled.js.map +1 -1
- package/dist/cjs/components/list-item/ListItem.js +1 -1
- package/dist/cjs/components/list-item/ListItem.js.map +1 -1
- package/dist/cjs/components/list-item/ListItem.styled.js +1 -1
- package/dist/cjs/components/list-item/ListItem.styled.js.map +1 -1
- package/dist/cjs/components/list-item/themes.js +1 -1
- package/dist/cjs/components/list-item/themes.js.map +1 -1
- package/dist/cjs/components/multi-level-dropdown/GroupedMenuList.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/GroupedMenuList.js.map +1 -1
- package/dist/cjs/components/multi-level-dropdown/MenuItem.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/MenuItem.js.map +1 -1
- package/dist/cjs/components/multi-level-dropdown/MenuList.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/MenuList.js.map +1 -1
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.js.map +1 -1
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js +33 -30
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js.map +1 -1
- package/dist/cjs/components/tag/Tag.js +1 -1
- package/dist/cjs/components/tag/Tag.js.map +1 -1
- package/dist/cjs/components/tag/Tag.styled.js +1 -1
- package/dist/cjs/components/tag/Tag.styled.js.map +1 -1
- package/dist/cjs/components/tag/model.js.map +1 -1
- package/dist/cjs/components/whats-new/WhatsNew.js +1 -1
- package/dist/cjs/components/whats-new/WhatsNew.js.map +1 -1
- package/dist/cjs/components/whats-new/WhatsNewButton.js +1 -1
- package/dist/cjs/components/whats-new/WhatsNewButton.js.map +1 -1
- package/dist/cjs/components/whats-new/WhatsNewPanel.js +1 -1
- package/dist/cjs/components/whats-new/WhatsNewPanel.js.map +1 -1
- package/dist/cjs/constants/Theme.js +1 -1
- package/dist/cjs/constants/Theme.js.map +1 -1
- package/dist/cjs/icons/Arrows/Chevron/ChevronUp.js +1 -1
- package/dist/cjs/icons/Arrows/Chevron/ChevronUp.js.map +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/src/components/BikGiftedChat/GiftedChat/types.d.ts +2 -2
- package/dist/cjs/src/components/avatar/Avatar.d.ts +3 -2
- package/dist/cjs/src/components/avatar/AvatarHelper.d.ts +5 -4
- package/dist/cjs/src/components/bik-layout/BikSidebarV2/BikSidebarV2.d.ts +33 -0
- package/dist/cjs/src/components/bik-layout/BikSidebarV2/SidebarV2.model.d.ts +27 -0
- package/dist/cjs/src/components/bik-layout/BikSidebarV2/SidebarV2Popup.d.ts +13 -0
- package/dist/cjs/src/components/bik-layout/BikSidebarV2/SidebarV2Styles.d.ts +44 -0
- package/dist/cjs/src/components/bik-layout/BikSidebarV2/SimpleSidebarV2.d.ts +3 -0
- package/dist/cjs/src/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/cjs/src/components/bik-layout/index.d.ts +2 -0
- package/dist/cjs/src/components/button/Button.styled.d.ts +1 -1
- package/dist/cjs/src/components/button/model.d.ts +3 -3
- package/dist/cjs/src/components/button/themes.d.ts +2 -2
- package/dist/cjs/src/components/country-code-picker/CountryCodePicker.d.ts +1 -1
- package/dist/cjs/src/components/country-code-picker/CountryPicker.d.ts +1 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.d.ts +1 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/description/Description.d.ts +1 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/description/Description.styled.d.ts +1 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.d.ts +1 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/menu/MenuItem.d.ts +1 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/menu/MenuList.d.ts +1 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.d.ts +2 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.d.ts +1 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.d.ts +1 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.d.ts +1 -0
- package/dist/cjs/src/components/dropdown/OpenedDropdown/utils/iterationOnOptions.d.ts +2 -0
- package/dist/cjs/src/components/dropdown/hooks/useDropdown.d.ts +2 -0
- package/dist/cjs/src/components/dropdown/type.d.ts +2 -1
- package/dist/cjs/src/components/dropdown-button/DropdownButton.d.ts +3 -1
- package/dist/cjs/src/components/dropdown-button/DropdownButton.style.d.ts +9 -2
- package/dist/cjs/src/components/dual-icon-button/DualIconButton.d.ts +3 -0
- package/dist/cjs/src/components/dual-icon-button/DualIconButton.styled.d.ts +7 -0
- package/dist/cjs/src/components/dual-icon-button/index.d.ts +2 -0
- package/dist/cjs/src/components/dual-icon-button/model.d.ts +12 -0
- package/dist/cjs/src/components/fab-menu/FABMenu.d.ts +1 -1
- package/dist/cjs/src/components/feature-announcements/types/feature.types.d.ts +1 -1
- package/dist/cjs/src/components/icon-button/IconButton.styled.d.ts +3 -1
- package/dist/cjs/src/components/icon-button/model.d.ts +12 -1
- package/dist/cjs/src/components/input/Input.model.d.ts +2 -1
- package/dist/cjs/src/components/input/Input.styled.d.ts +16 -1
- package/dist/cjs/src/components/list-item/List.model.d.ts +1 -1
- package/dist/cjs/src/components/list-item/ListItem.styled.d.ts +1 -1
- package/dist/cjs/src/components/list-item/themes.d.ts +2 -2
- package/dist/cjs/src/components/multi-level-dropdown/GroupedMenuList.d.ts +1 -0
- package/dist/cjs/src/components/multi-level-dropdown/MenuItem.d.ts +1 -0
- package/dist/cjs/src/components/multi-level-dropdown/MenuList.d.ts +1 -0
- package/dist/cjs/src/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts +13 -3
- package/dist/cjs/src/components/multi-level-dropdown/type.d.ts +1 -0
- package/dist/cjs/src/components/tag/Tag.d.ts +1 -1
- package/dist/cjs/src/components/tag/Tag.stories.d.ts +5 -5
- package/dist/cjs/src/components/tag/Tag.styled.d.ts +3 -1
- package/dist/cjs/src/components/tag/model.d.ts +5 -1
- package/dist/cjs/src/components/whats-new/WhatsNew.d.ts +2 -0
- package/dist/cjs/src/components/whats-new/WhatsNew.types.d.ts +2 -0
- package/dist/cjs/src/constants/Theme.d.ts +6 -0
- package/dist/cjs/src/icons/Arrows/Chevron/ChevronUp.d.ts +1 -2
- package/dist/cjs/src/index.d.ts +1 -0
- package/dist/esm/components/BikGiftedChat/GiftedChat/GiftedChat.js +1 -1
- package/dist/esm/components/BikGiftedChat/GiftedChat/GiftedChat.js.map +1 -1
- package/dist/esm/components/BikGiftedChat/GiftedChat/types.js.map +1 -1
- package/dist/esm/components/avatar/Avatar.js +1 -1
- package/dist/esm/components/avatar/Avatar.js.map +1 -1
- package/dist/esm/components/avatar/Avatar.styled.js +6 -6
- package/dist/esm/components/avatar/Avatar.styled.js.map +1 -1
- package/dist/esm/components/avatar/AvatarHelper.js +1 -1
- package/dist/esm/components/avatar/AvatarHelper.js.map +1 -1
- package/dist/esm/components/bik-layout/BikSidebar.js.map +1 -1
- package/dist/esm/components/bik-layout/BikSidebarV2/BikSidebarV2.js +2 -0
- package/dist/esm/components/bik-layout/BikSidebarV2/BikSidebarV2.js.map +1 -0
- package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Popup.js +2 -0
- package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Popup.js.map +1 -0
- package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Styles.js +294 -0
- package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Styles.js.map +1 -0
- package/dist/esm/components/bik-layout/BikSidebarV2/SimpleSidebarV2.js +2 -0
- package/dist/esm/components/bik-layout/BikSidebarV2/SimpleSidebarV2.js.map +1 -0
- package/dist/esm/components/button/Button.js +1 -1
- package/dist/esm/components/button/Button.js.map +1 -1
- package/dist/esm/components/button/Button.styled.js +1 -1
- package/dist/esm/components/button/Button.styled.js.map +1 -1
- package/dist/esm/components/button/themes.js +1 -1
- package/dist/esm/components/button/themes.js.map +1 -1
- package/dist/esm/components/country-code-picker/CountryCodePicker.js.map +1 -1
- package/dist/esm/components/country-code-picker/CountryPicker.js.map +1 -1
- package/dist/esm/components/dropdown/Dropdown.js +1 -1
- package/dist/esm/components/dropdown/Dropdown.js.map +1 -1
- package/dist/esm/components/dropdown/DropdownPopover/index.js +1 -1
- package/dist/esm/components/dropdown/DropdownPopover/index.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.js +3 -2
- package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/description/Description.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/description/Description.styled.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.js +6 -2
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js.map +1 -1
- package/dist/esm/components/dropdown-button/DropdownButton.js +1 -1
- package/dist/esm/components/dropdown-button/DropdownButton.js.map +1 -1
- package/dist/esm/components/dropdown-button/DropdownButton.style.js +8 -4
- package/dist/esm/components/dropdown-button/DropdownButton.style.js.map +1 -1
- package/dist/esm/components/dual-icon-button/DualIconButton.js +2 -0
- package/dist/esm/components/dual-icon-button/DualIconButton.js.map +1 -0
- package/dist/esm/components/dual-icon-button/DualIconButton.styled.js +26 -0
- package/dist/esm/components/dual-icon-button/DualIconButton.styled.js.map +1 -0
- package/dist/esm/components/fab-menu/FABMenu.js.map +1 -1
- package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js +1 -1
- package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js.map +1 -1
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.js +1 -1
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.js.map +1 -1
- package/dist/esm/components/feature-announcements/MinorUpdatePopup.js +1 -1
- package/dist/esm/components/feature-announcements/MinorUpdatePopup.js.map +1 -1
- package/dist/esm/components/icon-button/IconButton.js +1 -1
- package/dist/esm/components/icon-button/IconButton.js.map +1 -1
- package/dist/esm/components/icon-button/IconButton.styled.js +1 -1
- package/dist/esm/components/icon-button/IconButton.styled.js.map +1 -1
- package/dist/esm/components/icon-button/theme.js +1 -1
- package/dist/esm/components/icon-button/theme.js.map +1 -1
- package/dist/esm/components/input/Input.js +1 -1
- package/dist/esm/components/input/Input.js.map +1 -1
- package/dist/esm/components/input/Input.styled.js +1 -1
- package/dist/esm/components/input/Input.styled.js.map +1 -1
- package/dist/esm/components/list-item/ListItem.js +1 -1
- package/dist/esm/components/list-item/ListItem.js.map +1 -1
- package/dist/esm/components/list-item/ListItem.styled.js +1 -1
- package/dist/esm/components/list-item/ListItem.styled.js.map +1 -1
- package/dist/esm/components/list-item/themes.js +1 -1
- package/dist/esm/components/list-item/themes.js.map +1 -1
- package/dist/esm/components/multi-level-dropdown/GroupedMenuList.js +1 -1
- package/dist/esm/components/multi-level-dropdown/GroupedMenuList.js.map +1 -1
- package/dist/esm/components/multi-level-dropdown/MenuItem.js +1 -1
- package/dist/esm/components/multi-level-dropdown/MenuItem.js.map +1 -1
- package/dist/esm/components/multi-level-dropdown/MenuList.js +1 -1
- package/dist/esm/components/multi-level-dropdown/MenuList.js.map +1 -1
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js +1 -1
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js.map +1 -1
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js +32 -29
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js.map +1 -1
- package/dist/esm/components/tag/Tag.js +1 -1
- package/dist/esm/components/tag/Tag.js.map +1 -1
- package/dist/esm/components/tag/Tag.styled.js +1 -1
- package/dist/esm/components/tag/Tag.styled.js.map +1 -1
- package/dist/esm/components/tag/model.js.map +1 -1
- package/dist/esm/components/whats-new/WhatsNew.js +1 -1
- package/dist/esm/components/whats-new/WhatsNew.js.map +1 -1
- package/dist/esm/components/whats-new/WhatsNewButton.js +1 -1
- package/dist/esm/components/whats-new/WhatsNewButton.js.map +1 -1
- package/dist/esm/components/whats-new/WhatsNewPanel.js +1 -1
- package/dist/esm/components/whats-new/WhatsNewPanel.js.map +1 -1
- package/dist/esm/constants/Theme.js +1 -1
- package/dist/esm/constants/Theme.js.map +1 -1
- package/dist/esm/icons/Arrows/Chevron/ChevronUp.js +1 -1
- package/dist/esm/icons/Arrows/Chevron/ChevronUp.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/src/components/BikGiftedChat/GiftedChat/types.d.ts +2 -2
- package/dist/esm/src/components/avatar/Avatar.d.ts +3 -2
- package/dist/esm/src/components/avatar/AvatarHelper.d.ts +5 -4
- package/dist/esm/src/components/bik-layout/BikSidebarV2/BikSidebarV2.d.ts +33 -0
- package/dist/esm/src/components/bik-layout/BikSidebarV2/SidebarV2.model.d.ts +27 -0
- package/dist/esm/src/components/bik-layout/BikSidebarV2/SidebarV2Popup.d.ts +13 -0
- package/dist/esm/src/components/bik-layout/BikSidebarV2/SidebarV2Styles.d.ts +44 -0
- package/dist/esm/src/components/bik-layout/BikSidebarV2/SimpleSidebarV2.d.ts +3 -0
- package/dist/esm/src/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/esm/src/components/bik-layout/index.d.ts +2 -0
- package/dist/esm/src/components/button/Button.styled.d.ts +1 -1
- package/dist/esm/src/components/button/model.d.ts +3 -3
- package/dist/esm/src/components/button/themes.d.ts +2 -2
- package/dist/esm/src/components/country-code-picker/CountryCodePicker.d.ts +1 -1
- package/dist/esm/src/components/country-code-picker/CountryPicker.d.ts +1 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.d.ts +1 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/description/Description.d.ts +1 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/description/Description.styled.d.ts +1 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.d.ts +1 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/menu/MenuItem.d.ts +1 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/menu/MenuList.d.ts +1 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.d.ts +2 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.d.ts +1 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.d.ts +1 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.d.ts +1 -0
- package/dist/esm/src/components/dropdown/OpenedDropdown/utils/iterationOnOptions.d.ts +2 -0
- package/dist/esm/src/components/dropdown/hooks/useDropdown.d.ts +2 -0
- package/dist/esm/src/components/dropdown/type.d.ts +2 -1
- package/dist/esm/src/components/dropdown-button/DropdownButton.d.ts +3 -1
- package/dist/esm/src/components/dropdown-button/DropdownButton.style.d.ts +9 -2
- package/dist/esm/src/components/dual-icon-button/DualIconButton.d.ts +3 -0
- package/dist/esm/src/components/dual-icon-button/DualIconButton.styled.d.ts +7 -0
- package/dist/esm/src/components/dual-icon-button/index.d.ts +2 -0
- package/dist/esm/src/components/dual-icon-button/model.d.ts +12 -0
- package/dist/esm/src/components/fab-menu/FABMenu.d.ts +1 -1
- package/dist/esm/src/components/feature-announcements/types/feature.types.d.ts +1 -1
- package/dist/esm/src/components/icon-button/IconButton.styled.d.ts +3 -1
- package/dist/esm/src/components/icon-button/model.d.ts +12 -1
- package/dist/esm/src/components/input/Input.model.d.ts +2 -1
- package/dist/esm/src/components/input/Input.styled.d.ts +16 -1
- package/dist/esm/src/components/list-item/List.model.d.ts +1 -1
- package/dist/esm/src/components/list-item/ListItem.styled.d.ts +1 -1
- package/dist/esm/src/components/list-item/themes.d.ts +2 -2
- package/dist/esm/src/components/multi-level-dropdown/GroupedMenuList.d.ts +1 -0
- package/dist/esm/src/components/multi-level-dropdown/MenuItem.d.ts +1 -0
- package/dist/esm/src/components/multi-level-dropdown/MenuList.d.ts +1 -0
- package/dist/esm/src/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts +13 -3
- package/dist/esm/src/components/multi-level-dropdown/type.d.ts +1 -0
- package/dist/esm/src/components/tag/Tag.d.ts +1 -1
- package/dist/esm/src/components/tag/Tag.stories.d.ts +5 -5
- package/dist/esm/src/components/tag/Tag.styled.d.ts +3 -1
- package/dist/esm/src/components/tag/model.d.ts +5 -1
- package/dist/esm/src/components/whats-new/WhatsNew.d.ts +2 -0
- package/dist/esm/src/components/whats-new/WhatsNew.types.d.ts +2 -0
- package/dist/esm/src/constants/Theme.d.ts +6 -0
- package/dist/esm/src/icons/Arrows/Chevron/ChevronUp.d.ts +1 -2
- package/dist/esm/src/index.d.ts +1 -0
- package/package.json +1 -2
|
@@ -1,75 +1,78 @@
|
|
|
1
|
-
import e from"styled-components";import{COLORS as
|
|
1
|
+
import e from"styled-components";import{COLORS as t}from"../../constants/Theme.js";const i=e.div`
|
|
2
2
|
position: relative;
|
|
3
|
-
border-radius:
|
|
3
|
+
border-radius: ${e=>{let{version:t}=e;return"3.0"===t?4:8}}px;
|
|
4
4
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
5
|
-
padding-bottom:
|
|
5
|
+
padding-bottom: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
|
|
6
6
|
`,r=e.div`
|
|
7
|
-
width: ${e=>{let{width:
|
|
7
|
+
width: ${e=>{let{width:t}=e;return t||"200px"}};
|
|
8
8
|
max-width: 300px;
|
|
9
9
|
max-height: 280px;
|
|
10
10
|
overflow-y: scroll;
|
|
11
|
-
padding: 4px 0 0;
|
|
11
|
+
padding: ${e=>{let{version:t}=e;return"3.0"===t?"0":"4px 0 0"}};
|
|
12
12
|
&::-webkit-scrollbar {
|
|
13
13
|
width: 0px;
|
|
14
14
|
}
|
|
15
15
|
`,n=e.div`
|
|
16
|
-
margin-top:
|
|
17
|
-
height:
|
|
18
|
-
width: ${e=>{let{width:
|
|
19
|
-
|
|
16
|
+
margin-top: ${e=>{let{version:t}=e;return"3.0"===t?0:64}}px;
|
|
17
|
+
height: ${e=>{let{version:t}=e;return"3.0"===t?236:200}}px;
|
|
18
|
+
width: ${e=>{let{width:t}=e;return t||"200px"}};
|
|
19
|
+
display: ${e=>{let{version:t}=e;return"3.0"===t?"flex":"block"}};
|
|
20
|
+
align-items: center;
|
|
21
|
+
justify-content: center;
|
|
22
|
+
`,o=e.div`
|
|
20
23
|
width: 100%;
|
|
21
24
|
justify-content: center;
|
|
22
25
|
cursor: pointer;
|
|
23
26
|
align-items: center;
|
|
24
27
|
justify-content: space-between;
|
|
25
|
-
margin: 4px 0;
|
|
26
|
-
`,
|
|
28
|
+
margin: ${e=>{let{version:t}=e;return"3.0"===t?"0":"4px 0"}};
|
|
29
|
+
`,d=e.div`
|
|
27
30
|
z-index: 1000;
|
|
28
31
|
position: relative;
|
|
29
32
|
margin: 0px;
|
|
30
33
|
padding: 0px;
|
|
31
34
|
width: 100%;
|
|
32
|
-
`,
|
|
35
|
+
`,s=e.div`
|
|
33
36
|
position: relative;
|
|
34
|
-
padding: 1px 4px;
|
|
37
|
+
padding: ${e=>{let{version:t}=e;return"3.0"===t?"0px":"1px 4px"}};
|
|
35
38
|
cursor: pointer;
|
|
36
39
|
width: 100%;
|
|
37
40
|
&:hover > .submenu,
|
|
38
41
|
&:focus-within > .submenu {
|
|
39
42
|
display: block;
|
|
40
43
|
}
|
|
41
|
-
`,
|
|
44
|
+
`,p=e.div`
|
|
42
45
|
position: relative;
|
|
43
|
-
padding:
|
|
46
|
+
padding: ${e=>{let{version:t}=e;return"3.0"===t?"8px":"4px 8px"}};
|
|
44
47
|
transition: background-color 0.2s;
|
|
45
48
|
width: 100%;
|
|
46
|
-
border-radius:
|
|
49
|
+
border-radius: ${e=>{let{version:t}=e;return"3.0"===t?0:8}}px;
|
|
47
50
|
justify-content: center;
|
|
48
|
-
background-color: ${e=>{let{isSelected:
|
|
49
|
-
color: ${e=>{let{isSelected:
|
|
51
|
+
background-color: ${e=>{let{isSelected:i,isHovered:r,isSubMenuOpen:n,isDisabled:o,version:d}=e;return o?t.surface.standard:i||n?"3.0"===d?t.background.brandLight:t.background.positive.light:r?t.surface.hovered:t.surface.standard}};
|
|
52
|
+
color: ${e=>{let{isSelected:i,isSubMenuOpen:r,version:n}=e;return i||r?"3.0"===n?t.text.primary:t.content.positive:t.content.primary}};
|
|
50
53
|
display: flex;
|
|
51
54
|
align-items: center;
|
|
52
55
|
justify-content: space-between;
|
|
53
56
|
|
|
54
57
|
&:hover {
|
|
55
|
-
background-color: ${e=>{let{isSelected:
|
|
58
|
+
background-color: ${e=>{let{isSelected:i,isDisabled:r,version:n}=e;return r?t.surface.standard:i?"3.0"===n?t.background.brandLight:t.background.positive.light:t.surface.hovered}};
|
|
56
59
|
}
|
|
57
60
|
`,a=e.div`
|
|
58
61
|
display: flex;
|
|
59
62
|
align-items: center;
|
|
60
63
|
gap: 8px;
|
|
61
|
-
`,
|
|
64
|
+
`,l=e.div`
|
|
62
65
|
z-index: 1001;
|
|
63
66
|
position: fixed;
|
|
64
67
|
border-left: 4px solid transparent;
|
|
65
|
-
`,
|
|
68
|
+
`,x=e.div`
|
|
66
69
|
margin: 4px;
|
|
67
|
-
background-color: ${
|
|
70
|
+
background-color: ${t.surface.standard};
|
|
68
71
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
69
|
-
border-radius:
|
|
70
|
-
padding-top:
|
|
72
|
+
border-radius: ${e=>{let{version:t}=e;return"3.0"===t?4:8}}px;
|
|
73
|
+
padding-top: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
|
|
71
74
|
max-height: 480px;
|
|
72
|
-
padding-bottom:
|
|
75
|
+
padding-bottom: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
|
|
73
76
|
overflow-y: scroll;
|
|
74
77
|
|
|
75
78
|
&::-webkit-scrollbar {
|
|
@@ -82,18 +85,18 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
82
85
|
align-items: center;
|
|
83
86
|
justify-content: center;
|
|
84
87
|
margin-right: 4px;
|
|
85
|
-
`,
|
|
88
|
+
`,u=e.div`
|
|
86
89
|
width: 16px;
|
|
87
90
|
height: 16px;
|
|
88
91
|
display: flex;
|
|
89
92
|
align-items: center;
|
|
90
93
|
justify-content: center;
|
|
91
94
|
margin-left: 4px;
|
|
92
|
-
`,
|
|
95
|
+
`,v=e.div`
|
|
93
96
|
width: ${e=>e.width};
|
|
94
|
-
`,g=e(
|
|
97
|
+
`,g=e(l)`
|
|
95
98
|
width: ${e=>e.width};
|
|
96
99
|
top: ${e=>e.top}px;
|
|
97
100
|
left: ${e=>e.left}px;
|
|
98
|
-
`;export{a as ContentContainer,
|
|
101
|
+
`;export{a as ContentContainer,i as DropdownContainer,o as GroupedMenuListContainer,c as LeadingIconContainer,p as MenuItemContainer,s as MenuItemWrapper,n as NoResultsContainer,r as OptionsContainer,d as StyledMenuList,g as StyledSubMenuWrapper,v as SubMenuContainer,x as SubMenuListContainer,l as SubMenuWrapper,u as TrailingIconContainer};
|
|
99
102
|
//# sourceMappingURL=MultiLevelDropdown.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiLevelDropdown.styled.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div<{
|
|
1
|
+
{"version":3,"file":"MultiLevelDropdown.styled.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tposition: relative;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n`;\n\nexport const OptionsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tmax-width: 300px;\n\tmax-height: 280px;\n\toverflow-y: scroll;\n\tpadding: ${({ version }) => (version === '3.0' ? '0' : '4px 0 0')};\n\t&::-webkit-scrollbar {\n\t\twidth: 0px;\n\t}\n`;\n\nexport const NoResultsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tmargin-top: ${({ version }) => (version === '3.0' ? 0 : 64)}px;\n\theight: ${({ version }) => (version === '3.0' ? 236 : 200)}px;\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tdisplay: ${({ version }) => (version === '3.0' ? 'flex' : 'block')};\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const GroupedMenuListContainer = styled.div<{\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: 100%;\n\tjustify-content: center;\n\tcursor: pointer;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmargin: ${({ version }) => (version === '3.0' ? '0' : '4px 0')};\n`;\n\nexport const StyledMenuList = styled.div`\n\tz-index: 1000;\n\tposition: relative;\n\tmargin: 0px;\n\tpadding: 0px;\n\twidth: 100%;\n`;\n\nexport const MenuItemWrapper = styled.div<{ version?: '1.0' | '2.0' | '3.0' }>`\n\tposition: relative;\n\tpadding: ${({ version }) => (version === '3.0' ? '0px' : '1px 4px')};\n\tcursor: pointer;\n\twidth: 100%;\n\t&:hover > .submenu,\n\t&:focus-within > .submenu {\n\t\tdisplay: block;\n\t}\n`;\n\nexport interface MenuItemContainerProps {\n\tisSelected?: boolean;\n\tisHovered?: boolean;\n\tisSubMenuOpen?: boolean;\n\tisDisabled?: boolean;\n\tversion?: '1.0' | '2.0' | '3.0';\n}\n\nexport const MenuItemContainer = styled.div<MenuItemContainerProps>`\n\tposition: relative;\n\tpadding: ${({ version }) => (version === '3.0' ? '8px' : '4px 8px')};\n\ttransition: background-color 0.2s;\n\twidth: 100%;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 0 : 8)}px;\n\tjustify-content: center;\n\tbackground-color: ${({\n\t\tisSelected,\n\t\tisHovered,\n\t\tisSubMenuOpen,\n\t\tisDisabled,\n\t\tversion,\n\t}) =>\n\t\tisDisabled\n\t\t\t? COLORS.surface.standard\n\t\t\t: isSelected || isSubMenuOpen\n\t\t\t? version === '3.0'\n\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t: COLORS.background.positive.light\n\t\t\t: isHovered\n\t\t\t? COLORS.surface.hovered\n\t\t\t: COLORS.surface.standard};\n\tcolor: ${({ isSelected, isSubMenuOpen, version }) =>\n\t\tisSelected || isSubMenuOpen\n\t\t\t? version === '3.0'\n\t\t\t\t? COLORS.text.primary\n\t\t\t\t: COLORS.content.positive\n\t\t\t: COLORS.content.primary};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\n\t&:hover {\n\t\tbackground-color: ${({ isSelected, isDisabled, version }) =>\n\t\t\tisDisabled\n\t\t\t\t? COLORS.surface.standard\n\t\t\t\t: isSelected\n\t\t\t\t? version === '3.0'\n\t\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t\t: COLORS.background.positive.light\n\t\t\t\t: COLORS.surface.hovered};\n\t}\n`;\n\nexport const ContentContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const SubMenuWrapper = styled.div`\n\tz-index: 1001;\n\tposition: fixed;\n\tborder-left: 4px solid transparent;\n`;\n\nexport const SubMenuListContainer = styled.div<{\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tmargin: 4px;\n\tbackground-color: ${COLORS.surface.standard};\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tpadding-top: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n\tmax-height: 480px;\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n\toverflow-y: scroll;\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const LeadingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-right: 4px;\n`;\n\nexport const TrailingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-left: 4px;\n`;\n\nexport const SubMenuContainer = styled.div<{ width: string }>`\n\twidth: ${(props) => props.width};\n`;\n\nexport const StyledSubMenuWrapper = styled(SubMenuWrapper)<{\n\twidth: string;\n\ttop: number;\n\tleft: number;\n}>`\n\twidth: ${(props) => props.width};\n\ttop: ${(props) => props.top}px;\n\tleft: ${(props) => props.left}px;\n`;\n"],"names":["DropdownContainer","styled","div","_ref","version","_ref2","OptionsContainer","_ref3","width","_ref4","NoResultsContainer","_ref5","_ref6","_ref7","_ref8","GroupedMenuListContainer","_ref9","StyledMenuList","MenuItemWrapper","_ref10","MenuItemContainer","_ref11","_ref12","_ref13","isSelected","isHovered","isSubMenuOpen","isDisabled","COLORS","surface","standard","background","brandLight","positive","light","hovered","_ref14","text","primary","content","_ref15","ContentContainer","SubMenuWrapper","SubMenuListContainer","_ref16","_ref17","_ref18","LeadingIconContainer","TrailingIconContainer","SubMenuContainer","props","StyledSubMenuWrapper","top","left"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as i}from"react/jsx-runtime";import n from"react";import{Tooltip as a}from"../tooltips/Tooltip.js";import{AiBodyTiny as r,AiBodyCaption as t,BodyTiny as s,BodyCaption as c}from"../TypographyStyle.js";import{ValidTagTypeMap as o}from"./model.js";import{Tag as l}from"./Tag.styled.js";import{getTagIconColor as g}from"./themes.js";const d=d=>{let{tagText:m,LeadingIcon:p,TrailingIcon:b,onLeadingIconClicked:
|
|
1
|
+
import{jsx as e,jsxs as i}from"react/jsx-runtime";import n from"react";import{Tooltip as a}from"../tooltips/Tooltip.js";import{AiBodyTiny as r,AiBodyCaption as t,BodyTiny as s,BodyCaption as c}from"../TypographyStyle.js";import{ValidTagTypeMap as o}from"./model.js";import{Tag as l}from"./Tag.styled.js";import{getTagIconColor as g}from"./themes.js";const d=d=>{let{tagText:m,LeadingIcon:p,TrailingIcon:b,onLeadingIconClicked:h,leadingIconId:j,trailingIconId:O,onTrailingIconClicked:u,theme:f="light",type:I="neutral",variant:T="regular",version:y,cursor:k,alignIcon:w,noBorder:C,tagHtmlText:N,contentPadding:L,padding:x,height:v,leadingIconTooltip:E,trailingIconTooltip:$,tagColor:z,numberOfLines:B,backgroundColor:P,borderRadius:R,size:H="regular"}=d,S=m;const q=f;let A=I;o[T][I]||(A="neutral"),"circle"===T&&"number"==typeof S&&S>99&&(S="99+");const D={height:"compressed"===T?12:16,width:"compressed"===T?12:16,color:g(f,A),style:{display:"block"}};return e(l,Object.assign({cursor:k,theme:q,type:A,variant:T,version:y,alignIcon:w,noBorder:C,contentPadding:L,padding:x,height:v,backgroundColor:P,borderRadius:R,size:H},{children:i("div",Object.assign({className:"container"},{children:[p&&(E?e(a,Object.assign({},E,{children:e("button",Object.assign({className:"icon-leading",onClick:h,id:`${j}-wrapper`||"leading-icon-wrapper"},{children:n.createElement(p,Object.assign(Object.assign({},D),{id:j||"leading-icon"}))}))})):e("button",Object.assign({className:"icon-leading",onClick:h,id:`${j}-wrapper`||"leading-icon-wrapper"},{children:n.createElement(p,Object.assign(Object.assign({},D),{id:j||"leading-icon"}))}))),N&&("ai"===I&&"light"===f?e("small"===H?r:t,Object.assign({numberOfLines:B},{children:N})):e("small"===H?s:c,Object.assign({className:"text",numberOfLines:B},{children:N}))),!N&&""!==S&&("ai"===I&&"light"===f?e("small"===H?r:t,Object.assign({numberOfLines:B},{children:S})):e("small"===H?s:c,Object.assign({className:"text",color:z,numberOfLines:B},{children:S}))),b&&($?e(a,Object.assign({},$,{children:e("button",Object.assign({className:"icon-trailing",onClick:u,id:`${O}-wrapper`||"trailing-icon-wrapper"},{children:n.createElement(b,Object.assign(Object.assign({},D),{id:O||"trailing-icon"}))}))})):e("button",Object.assign({className:"icon-trailing",onClick:u,id:`${O}-wrapper`||"trailing-icon-wrapper"},{children:n.createElement(b,Object.assign(Object.assign({},D),{id:O||"trailing-icon"}))})))]}))}))};d.displayName="Tag";export{d as Tag};
|
|
2
2
|
//# sourceMappingURL=Tag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport {\n\tAiBodyCaption,\n\tAiBodyTiny,\n\tBodyCaption,\n\tBodyTiny,\n} from '../TypographyStyle';\nimport { TagProps, ValidTagTypeMap } from './model';\nimport * as Sc from './Tag.styled';\nimport { getTagIconColor } from './themes';\n\nexport const Tag = ({\n\ttagText,\n\tLeadingIcon,\n\tTrailingIcon,\n\tonLeadingIconClicked = undefined,\n\tleadingIconId,\n\ttrailingIconId,\n\tonTrailingIconClicked = undefined,\n\ttheme = 'light',\n\ttype = 'neutral',\n\tvariant = 'regular',\n\tversion,\n\tcursor,\n\talignIcon,\n\tnoBorder,\n\ttagHtmlText,\n\tcontentPadding,\n\tleadingIconTooltip,\n\ttrailingIconTooltip,\n\ttagColor,\n\tnumberOfLines,\n\tbackgroundColor,\n\tborderRadius,\n\tsize = 'regular',\n}: TagProps) => {\n\tlet displayTagText = tagText;\n\tconst displayTheme = theme;\n\tlet displayType = type;\n\n\tif (!ValidTagTypeMap[variant][type]) {\n\t\tdisplayType = 'neutral';\n\t}\n\n\tif (variant === 'circle') {\n\t\tif (typeof displayTagText === 'number' && displayTagText > 99) {\n\t\t\tdisplayTagText = '99+';\n\t\t}\n\t}\n\n\tconst iconColor = getTagIconColor(theme, displayType);\n\tconst iconProps = {\n\t\theight: variant === 'compressed' ? 12 : 16,\n\t\twidth: variant === 'compressed' ? 12 : 16,\n\t\tcolor: iconColor,\n\t\tstyle: { display: 'block' },\n\t};\n\n\treturn (\n\t\t<Sc.Tag\n\t\t\tcursor={cursor}\n\t\t\ttheme={displayTheme}\n\t\t\ttype={displayType}\n\t\t\tvariant={variant}\n\t\t\tversion={version}\n\t\t\talignIcon={alignIcon}\n\t\t\tnoBorder={noBorder}\n\t\t\tcontentPadding={contentPadding}\n\t\t\tbackgroundColor={backgroundColor}\n\t\t\tborderRadius={borderRadius}\n\t\t\tsize={size}\n\t\t>\n\t\t\t<div className=\"container\">\n\t\t\t\t{LeadingIcon &&\n\t\t\t\t\t(leadingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...leadingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` || 'leading-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: leadingIconId || 'leading-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` || 'leading-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: leadingIconId || 'leading-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\n\t\t\t\t{tagHtmlText &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{!tagHtmlText &&\n\t\t\t\t\tdisplayTagText !== '' &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{TrailingIcon &&\n\t\t\t\t\t(trailingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...trailingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` || 'trailing-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: trailingIconId || 'trailing-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` || 'trailing-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: trailingIconId || 'trailing-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\t\t\t</div>\n\t\t</Sc.Tag>\n\t);\n};\n\nTag.displayName = 'Tag';\n"],"names":["Tag","_ref","tagText","LeadingIcon","TrailingIcon","onLeadingIconClicked","leadingIconId","trailingIconId","onTrailingIconClicked","theme","type","variant","version","cursor","alignIcon","noBorder","tagHtmlText","contentPadding","leadingIconTooltip","trailingIconTooltip","tagColor","numberOfLines","backgroundColor","borderRadius","size","displayTagText","displayTheme","displayType","ValidTagTypeMap","iconProps","
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport {\n\tAiBodyCaption,\n\tAiBodyTiny,\n\tBodyCaption,\n\tBodyTiny,\n} from '../TypographyStyle';\nimport { TagProps, ValidTagTypeMap } from './model';\nimport * as Sc from './Tag.styled';\nimport { getTagIconColor } from './themes';\n\nexport const Tag = ({\n\ttagText,\n\tLeadingIcon,\n\tTrailingIcon,\n\tonLeadingIconClicked = undefined,\n\tleadingIconId,\n\ttrailingIconId,\n\tonTrailingIconClicked = undefined,\n\ttheme = 'light',\n\ttype = 'neutral',\n\tvariant = 'regular',\n\tversion,\n\tcursor,\n\talignIcon,\n\tnoBorder,\n\ttagHtmlText,\n\tcontentPadding,\n\tpadding,\n\theight,\n\tleadingIconTooltip,\n\ttrailingIconTooltip,\n\ttagColor,\n\tnumberOfLines,\n\tbackgroundColor,\n\tborderRadius,\n\tsize = 'regular',\n}: TagProps) => {\n\tlet displayTagText = tagText;\n\tconst displayTheme = theme;\n\tlet displayType = type;\n\n\tif (!ValidTagTypeMap[variant][type]) {\n\t\tdisplayType = 'neutral';\n\t}\n\n\tif (variant === 'circle') {\n\t\tif (typeof displayTagText === 'number' && displayTagText > 99) {\n\t\t\tdisplayTagText = '99+';\n\t\t}\n\t}\n\n\tconst iconColor = getTagIconColor(theme, displayType);\n\tconst iconProps = {\n\t\theight: variant === 'compressed' ? 12 : 16,\n\t\twidth: variant === 'compressed' ? 12 : 16,\n\t\tcolor: iconColor,\n\t\tstyle: { display: 'block' },\n\t};\n\n\treturn (\n\t\t<Sc.Tag\n\t\t\tcursor={cursor}\n\t\t\ttheme={displayTheme}\n\t\t\ttype={displayType}\n\t\t\tvariant={variant}\n\t\t\tversion={version}\n\t\t\talignIcon={alignIcon}\n\t\t\tnoBorder={noBorder}\n\t\t\tcontentPadding={contentPadding}\n\t\t\tpadding={padding}\n\t\t\theight={height}\n\t\t\tbackgroundColor={backgroundColor}\n\t\t\tborderRadius={borderRadius}\n\t\t\tsize={size}\n\t\t>\n\t\t\t<div className=\"container\">\n\t\t\t\t{LeadingIcon &&\n\t\t\t\t\t(leadingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...leadingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` || 'leading-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: leadingIconId || 'leading-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` || 'leading-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: leadingIconId || 'leading-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\n\t\t\t\t{tagHtmlText &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{!tagHtmlText &&\n\t\t\t\t\tdisplayTagText !== '' &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{TrailingIcon &&\n\t\t\t\t\t(trailingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...trailingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` || 'trailing-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: trailingIconId || 'trailing-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` || 'trailing-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: trailingIconId || 'trailing-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\t\t\t</div>\n\t\t</Sc.Tag>\n\t);\n};\n\nTag.displayName = 'Tag';\n"],"names":["Tag","_ref","tagText","LeadingIcon","TrailingIcon","onLeadingIconClicked","leadingIconId","trailingIconId","onTrailingIconClicked","theme","type","variant","version","cursor","alignIcon","noBorder","tagHtmlText","contentPadding","padding","height","leadingIconTooltip","trailingIconTooltip","tagColor","numberOfLines","backgroundColor","borderRadius","size","displayTagText","displayTheme","displayType","ValidTagTypeMap","iconProps","width","color","getTagIconColor","style","display","_jsx","Sc","Object","assign","children","_jsxs","className","Tooltip","onClick","id","React","createElement","AiBodyTiny","AiBodyCaption","BodyTiny","BodyCaption","displayName"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import c from"@emotion/styled/base";import{getPadding as
|
|
1
|
+
import c from"@emotion/styled/base";import{getPadding as g,getBackgroundColor as I,generateBorder as b,getTextColor as l}from"./themes.js";const i=c("div","production"===process.env.NODE_ENV?{target:"e930jd90"}:{target:"e930jd90",label:"Tag"})("cursor:",(c=>{var g;return null!==(g=c.cursor)&&void 0!==g?g:"default"}),";",(c=>"small"!==c.size&&("regular"===c.variant?"display: block;\n\t\t min-height: 26px;\n\t\t":"min-height: 20px;"))," .container{display:flex;align-items:",(c=>c.alignIcon?c.alignIcon:"center"),";gap:6px;",(c=>c.height?`height: ${c.height}px; box-sizing: border-box;`:"small"===c.size?"height: 16px; box-sizing: border-box;":"")," padding:",(c=>c.padding?c.padding:"small"===c.size?"2px 6px":c.contentPadding?`${c.contentPadding}px`:g(c.variant)),";background:",(c=>{var g;return null!==(g=c.backgroundColor)&&void 0!==g?g:I(c.theme,c.type)}),";border-radius:",(c=>void 0!==c.borderRadius?"number"==typeof c.borderRadius?`${c.borderRadius}px`:c.borderRadius:"regular"===c.variant?"4px":"12px"),";",(c=>!c.noBorder&&"light"===c.theme&&`border: ${"2.0"===c.version?.5:1}px solid ${b(c.type,c.theme)};`)," .text{color:",(c=>l(c.theme,c.type)),";}.icon-trailing{all:unset;display:flex;}.icon-leading{all:unset;display:flex;}}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZy5zdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUU4QiIsImZpbGUiOiJUYWcuc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgZ2VuZXJhdGVCb3JkZXIsIGdldEJhY2tncm91bmRDb2xvciwgZ2V0UGFkZGluZywgZ2V0VGV4dENvbG9yLCB9IGZyb20gJy4vdGhlbWVzJztcclxuZXhwb3J0IGNvbnN0IFRhZyA9IHN0eWxlZC5kaXYgYFxuXHRjdXJzb3I6ICR7KHByb3BzKSA9PiB7IHZhciBfYTsgcmV0dXJuIChfYSA9IHByb3BzLmN1cnNvcikgIT09IG51bGwgJiYgX2EgIT09IHZvaWQgMCA/IF9hIDogJ2RlZmF1bHQnOyB9fTtcblx0JHsocHJvcHMpID0+IHByb3BzLnNpemUgIT09ICdzbWFsbCcgJiZcclxuICAgIChwcm9wcy52YXJpYW50ID09PSAncmVndWxhcidcclxuICAgICAgICA/IGBkaXNwbGF5OiBibG9jaztcblx0XHQgICAgIG1pbi1oZWlnaHQ6IDI2cHg7XG5cdFx0YFxyXG4gICAgICAgIDogYG1pbi1oZWlnaHQ6IDIwcHg7YCl9XG5cdC5jb250YWluZXIge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0YWxpZ24taXRlbXM6ICR7KHByb3BzKSA9PiAocHJvcHMuYWxpZ25JY29uID8gcHJvcHMuYWxpZ25JY29uIDogJ2NlbnRlcicpfTtcblx0XHRnYXA6IDZweDtcblx0XHQkeyhwcm9wcykgPT4gcHJvcHMuaGVpZ2h0XHJcbiAgICA/IGBoZWlnaHQ6ICR7cHJvcHMuaGVpZ2h0fXB4OyBib3gtc2l6aW5nOiBib3JkZXItYm94O2BcclxuICAgIDogcHJvcHMuc2l6ZSA9PT0gJ3NtYWxsJ1xyXG4gICAgICAgID8gJ2hlaWdodDogMTZweDsgYm94LXNpemluZzogYm9yZGVyLWJveDsnXHJcbiAgICAgICAgOiAnJ31cblx0XHRwYWRkaW5nOiAkeyhwcm9wcykgPT4gcHJvcHMucGFkZGluZ1xyXG4gICAgPyBwcm9wcy5wYWRkaW5nXHJcbiAgICA6IHByb3BzLnNpemUgPT09ICdzbWFsbCdcclxuICAgICAgICA/ICcycHggNnB4J1xyXG4gICAgICAgIDogcHJvcHMuY29udGVudFBhZGRpbmdcclxuICAgICAgICAgICAgPyBgJHtwcm9wcy5jb250ZW50UGFkZGluZ31weGBcclxuICAgICAgICAgICAgOiBnZXRQYWRkaW5nKHByb3BzLnZhcmlhbnQpfTtcblx0XHRiYWNrZ3JvdW5kOiAkeyhwcm9wcykgPT4geyB2YXIgX2E7IHJldHVybiAoX2EgPSBwcm9wcy5iYWNrZ3JvdW5kQ29sb3IpICE9PSBudWxsICYmIF9hICE9PSB2b2lkIDAgPyBfYSA6IGdldEJhY2tncm91bmRDb2xvcihwcm9wcy50aGVtZSwgcHJvcHMudHlwZSk7IH19O1xuXG5cdFx0Ym9yZGVyLXJhZGl1czogJHsocHJvcHMpID0+IHByb3BzLmJvcmRlclJhZGl1cyAhPT0gdW5kZWZpbmVkXHJcbiAgICA/IHR5cGVvZiBwcm9wcy5ib3JkZXJSYWRpdXMgPT09ICdudW1iZXInXHJcbiAgICAgICAgPyBgJHtwcm9wcy5ib3JkZXJSYWRpdXN9cHhgXHJcbiAgICAgICAgOiBwcm9wcy5ib3JkZXJSYWRpdXNcclxuICAgIDogcHJvcHMudmFyaWFudCA9PT0gJ3JlZ3VsYXInXHJcbiAgICAgICAgPyAnNHB4J1xyXG4gICAgICAgIDogJzEycHgnfTtcblxuXHRcdCR7KHByb3BzKSA9PiAhcHJvcHMubm9Cb3JkZXIgJiZcclxuICAgIHByb3BzLnRoZW1lID09PSAnbGlnaHQnICYmXHJcbiAgICBgYm9yZGVyOiAke3Byb3BzLnZlcnNpb24gPT09ICcyLjAnID8gMC41IDogMX1weCBzb2xpZCAke2dlbmVyYXRlQm9yZGVyKHByb3BzLnR5cGUsIHByb3BzLnRoZW1lKX07YH1cblxuXHRcdC50ZXh0IHtcblx0XHRcdGNvbG9yOiAkeyhwcm9wcykgPT4gZ2V0VGV4dENvbG9yKHByb3BzLnRoZW1lLCBwcm9wcy50eXBlKX07XG5cdFx0fVxuXG5cdFx0Lmljb24tdHJhaWxpbmcge1xuXHRcdFx0YWxsOiB1bnNldDtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0fVxuXG5cdFx0Lmljb24tbGVhZGluZyB7XG5cdFx0XHRhbGw6IHVuc2V0O1xuXHRcdFx0ZGlzcGxheTogZmxleDtcblx0XHR9XG5cdH1cbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVRhZy5zdHlsZWQuanMubWFwIl19 */"));export{i as Tag};
|
|
2
2
|
//# sourceMappingURL=Tag.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.styled.js","sources":["../../../../src/components/tag/Tag.styled.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { TagTheme, TagType, TagVariant } from './model';\nimport {\n\tgenerateBorder,\n\tgetBackgroundColor,\n\tgetPadding,\n\tgetTextColor,\n} from './themes';\n\nexport const Tag = styled.div<{\n\ttheme: TagTheme;\n\ttype: TagType;\n\tvariant: TagVariant;\n\tversion?: '1.0' | '2.0';\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\tcontentPadding?: number;\n\tbackgroundColor?: string;\n\tborderRadius?: string | number;\n\tsize?: 'regular' | 'small';\n}>`\n\tcursor: ${(props) => props.cursor ?? 'default'};\n\t${(props) =>\n\t\tprops.size !== 'small' &&\n\t\t(props.variant === 'regular'\n\t\t\t? `display: block;\n\t\t min-height: 26px;\n\t\t`\n\t\t\t: `min-height: 20px;`)}\n\t.container {\n\t\tdisplay: flex;\n\t\talign-items: ${(props) => (props.alignIcon ? props.alignIcon : 'center')};\n\t\tgap: 6px;\n\t\t${(props) =>\n\t\t\tprops.size === 'small'
|
|
1
|
+
{"version":3,"file":"Tag.styled.js","sources":["../../../../src/components/tag/Tag.styled.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { TagTheme, TagType, TagVariant } from './model';\nimport {\n\tgenerateBorder,\n\tgetBackgroundColor,\n\tgetPadding,\n\tgetTextColor,\n} from './themes';\n\nexport const Tag = styled.div<{\n\ttheme: TagTheme;\n\ttype: TagType;\n\tvariant: TagVariant;\n\tversion?: '1.0' | '2.0' | '3.0';\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\tcontentPadding?: number;\n\tpadding?: string;\n\theight?: number;\n\tbackgroundColor?: string;\n\tborderRadius?: string | number;\n\tsize?: 'regular' | 'small';\n}>`\n\tcursor: ${(props) => props.cursor ?? 'default'};\n\t${(props) =>\n\t\tprops.size !== 'small' &&\n\t\t(props.variant === 'regular'\n\t\t\t? `display: block;\n\t\t min-height: 26px;\n\t\t`\n\t\t\t: `min-height: 20px;`)}\n\t.container {\n\t\tdisplay: flex;\n\t\talign-items: ${(props) => (props.alignIcon ? props.alignIcon : 'center')};\n\t\tgap: 6px;\n\t\t${(props) =>\n\t\t\tprops.height\n\t\t\t\t? `height: ${props.height}px; box-sizing: border-box;`\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? 'height: 16px; box-sizing: border-box;'\n\t\t\t\t: ''}\n\t\tpadding: ${(props) =>\n\t\t\tprops.padding\n\t\t\t\t? props.padding\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? '2px 6px'\n\t\t\t\t: props.contentPadding\n\t\t\t\t? `${props.contentPadding}px`\n\t\t\t\t: getPadding(props.variant)};\n\t\tbackground: ${(props) =>\n\t\t\tprops.backgroundColor ?? getBackgroundColor(props.theme, props.type)};\n\n\t\tborder-radius: ${(props) =>\n\t\t\tprops.borderRadius !== undefined\n\t\t\t\t? typeof props.borderRadius === 'number'\n\t\t\t\t\t? `${props.borderRadius}px`\n\t\t\t\t\t: props.borderRadius\n\t\t\t\t: props.variant === 'regular'\n\t\t\t\t? '4px'\n\t\t\t\t: '12px'};\n\n\t\t${(props) =>\n\t\t\t!props.noBorder &&\n\t\t\tprops.theme === 'light' &&\n\t\t\t`border: ${props.version === '2.0' ? 0.5 : 1}px solid ${generateBorder(\n\t\t\t\tprops.type,\n\t\t\t\tprops.theme,\n\t\t\t)};`}\n\n\t\t.text {\n\t\t\tcolor: ${(props) => getTextColor(props.theme, props.type)};\n\t\t}\n\n\t\t.icon-trailing {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t.icon-leading {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n`;\n"],"names":["Tag","_styled","process","env","NODE_ENV","target","label","props","_a","cursor","size","variant","alignIcon","height","padding","contentPadding","getPadding","backgroundColor","getBackgroundColor","theme","type","undefined","borderRadius","noBorder","version","generateBorder","getTextColor"],"mappings":"2IASO,MAAMA,EAAGC,QAAA,eAAAC,QAAAC,IAAAC,SAAA,CAAAC,OAAA,YAAA,CAAAA,OAAA,WAAAC,MAAA,OAAAL,CAAA,WAeJM,IAAS,IAAAC,EAAC,OAAY,QAAZA,EAAAD,EAAME,cAAM,IAAAD,EAAAA,EAAI,SAAS,GAC3CD,KAAAA,GACa,UAAfA,EAAMG,OACa,YAAlBH,EAAMI,QACJ,0EAGoB,yCAGPJ,GAAWA,EAAMK,UAAYL,EAAMK,UAAY,UAE5DL,aAAAA,GACFA,EAAMM,OACH,WAAWN,EAAMM,oCACF,UAAfN,EAAMG,KACN,wCACA,IACQH,aAAAA,GACXA,EAAMO,QACHP,EAAMO,QACS,UAAfP,EAAMG,KACN,UACAH,EAAMQ,eACN,GAAGR,EAAMQ,mBACTC,EAAWT,EAAMI,UAAQ,gBACdJ,IAAS,IAAAC,EACvB,OAAqB,QAArBA,EAAAD,EAAMU,uBAAe,IAAAT,EAAAA,EAAIU,EAAmBX,EAAMY,MAAOZ,EAAMa,KAAK,sBAEnDb,QACMc,IAAvBd,EAAMe,aAC2B,iBAAvBf,EAAMe,aACZ,GAAGf,EAAMe,iBACTf,EAAMe,aACW,YAAlBf,EAAMI,QACN,MACA,QAAM,KAEPJ,IACDA,EAAMgB,UACS,UAAhBhB,EAAMY,OACK,WAAkB,QAAlBZ,EAAMiB,QAAoB,GAAM,aAAaC,EACvDlB,EAAMa,KACNb,EAAMY,4BAIGZ,GAAUmB,EAAanB,EAAMY,MAAOZ,EAAMa,OAAKlB,oFAa3D,eAb2DA,QAAAC,IAAAC,SAa3D,GAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"model.js","sources":["../../../../src/components/tag/model.ts"],"sourcesContent":["import React from 'react';\nimport { MouseEventHandler } from 'react';\nimport { TooltipProps } from '../tooltips/Tooltip';\n\nexport type TagTheme = 'light' | 'dark';\n\nexport type TagVariant = 'regular' | 'circle' | 'compressed';\n\nexport type TagType =\n\t| 'negative'\n\t| 'warning'\n\t| 'positive'\n\t| 'neutral'\n\t| 'white'\n\t| 'purple'\n\t| 'blue'\n\t| 'grey'\n\t| 'ai';\n\nexport const ValidTagTypeMap = {\n\tregular: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n\tcircle: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\tblue: true,\n\t\tgrey: true,\n\t\tai: true,\n\t},\n\tcompressed: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n};\n\nexport interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Set the theme of the Tag\n\t * @default default light\n\t */\n\ttheme?: TagTheme;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default neutral\n\t */\n\ttype?: TagType;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default regular\n\t */\n\tvariant?: TagVariant;\n\n\t/**\n\t * The icon component that is the right of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tTrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon id,\n\t * @default trailing-icon\n\t */\n\ttrailingIconId?: string;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * Tooltip props for the trailing icon\n\t * @default undefined\n\t */\n\ttrailingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\t/**\n\t * The icon component that is to the left of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tLeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * The left icon id,\n\t * @default leading-icon\n\t */\n\tleadingIconId?: string;\n\t/**\n\t * Tooltip props for the leading icon\n\t * @default undefined\n\t */\n\tleadingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\ttagText: string | number;\n\tversion?: '1.0' | '2.0';\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\ttagHtmlText?: JSX.Element;\n\tcontentPadding?: number;\n\ttagColor?: string;\n\tnumberOfLines?: number;\n\t/**\n\t * Override the computed background color of the tag container.\n\t * @default undefined (uses theme/type color)\n\t */\n\tbackgroundColor?: string;\n\t/**\n\t * Override the border-radius of the tag container.\n\t * @default undefined (uses variant-based radius: 4px for regular, 12px otherwise)\n\t */\n\tborderRadius?: string | number;\n\t/**\n\t * Controls the size of the tag. 'small' sets height to 16px and uses tiny font.\n\t * @default 'regular'\n\t */\n\tsize?: 'regular' | 'small';\n}\n"],"names":["ValidTagTypeMap","regular","negative","warning","positive","neutral","white","purple","blue","ai","circle","grey","compressed"],"mappings":"AAmBO,MAAMA,EAAkB,CAC9BC,QAAS,CACRC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNC,IAAI,GAELC,OAAQ,CACPR,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTG,MAAM,EACNG,MAAM,EACNF,IAAI,GAELG,WAAY,CACXV,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNC,IAAI"}
|
|
1
|
+
{"version":3,"file":"model.js","sources":["../../../../src/components/tag/model.ts"],"sourcesContent":["import React from 'react';\nimport { MouseEventHandler } from 'react';\nimport { TooltipProps } from '../tooltips/Tooltip';\n\nexport type TagTheme = 'light' | 'dark';\n\nexport type TagVariant = 'regular' | 'circle' | 'compressed';\n\nexport type TagType =\n\t| 'negative'\n\t| 'warning'\n\t| 'positive'\n\t| 'neutral'\n\t| 'white'\n\t| 'purple'\n\t| 'blue'\n\t| 'grey'\n\t| 'ai';\n\nexport const ValidTagTypeMap = {\n\tregular: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n\tcircle: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\tblue: true,\n\t\tgrey: true,\n\t\tai: true,\n\t},\n\tcompressed: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n};\n\nexport interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Set the theme of the Tag\n\t * @default default light\n\t */\n\ttheme?: TagTheme;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default neutral\n\t */\n\ttype?: TagType;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default regular\n\t */\n\tvariant?: TagVariant;\n\n\t/**\n\t * The icon component that is the right of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tTrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon id,\n\t * @default trailing-icon\n\t */\n\ttrailingIconId?: string;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * Tooltip props for the trailing icon\n\t * @default undefined\n\t */\n\ttrailingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\t/**\n\t * The icon component that is to the left of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tLeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * The left icon id,\n\t * @default leading-icon\n\t */\n\tleadingIconId?: string;\n\t/**\n\t * Tooltip props for the leading icon\n\t * @default undefined\n\t */\n\tleadingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\ttagText: string | number;\n\tversion?: '1.0' | '2.0' | '3.0';\n\t/** Custom CSS padding string, e.g. '4px 8px' */\n\tpadding?: string;\n\t/** Custom height in px */\n\theight?: number;\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\ttagHtmlText?: JSX.Element;\n\tcontentPadding?: number;\n\ttagColor?: string;\n\tnumberOfLines?: number;\n\t/**\n\t * Override the computed background color of the tag container.\n\t * @default undefined (uses theme/type color)\n\t */\n\tbackgroundColor?: string;\n\t/**\n\t * Override the border-radius of the tag container.\n\t * @default undefined (uses variant-based radius: 4px for regular, 12px otherwise)\n\t */\n\tborderRadius?: string | number;\n\t/**\n\t * Controls the size of the tag. 'small' sets height to 16px and uses tiny font.\n\t * @default 'regular'\n\t */\n\tsize?: 'regular' | 'small';\n}\n"],"names":["ValidTagTypeMap","regular","negative","warning","positive","neutral","white","purple","blue","ai","circle","grey","compressed"],"mappings":"AAmBO,MAAMA,EAAkB,CAC9BC,QAAS,CACRC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNC,IAAI,GAELC,OAAQ,CACPR,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTG,MAAM,EACNG,MAAM,EACNF,IAAI,GAELG,WAAY,CACXV,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNC,IAAI"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{useState as n}from"react";import{WhatsNewButton as i}from"./WhatsNewButton.js";import{WhatsNewPanel as s}from"./WhatsNewPanel.js";import{useWhatsNewContext as r}from"./WhatsNewProvider.js";const
|
|
1
|
+
import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{useState as n}from"react";import{WhatsNewButton as i}from"./WhatsNewButton.js";import{WhatsNewPanel as s}from"./WhatsNewPanel.js";import{useWhatsNewContext as r}from"./WhatsNewProvider.js";const c=c=>{let{title:a="What's new",tooltip:h="What's new",searchPlaceholder:l="Search posts",emptyStateTitle:d="Nothing new!",emptyStateDescription:m="There are no new updates or features at the moment. Check back soon!",noResultsText:p="Sorry, no results found.",width:C="480px",onContentClick:u,renderCustomContent:w,buttonTestId:g="whats-new-button",iconWidth:f=24,iconHeight:W=24,iconColor:P,iconPadding:S,customIcon:T}=c;const[k,x]=n(!1),{whatsNewContent:y,isLoading:N,newContentCount:j}=r();return t(e,{children:[o(i,{onClick:()=>x(!0),newContentCount:j,isOpen:k,isLoading:N,tooltip:h,testId:g,iconWidth:f,iconHeight:W,iconColor:P,iconPadding:S,customIcon:T}),o(s,{isOpen:k,onClose:()=>x(!1),content:y,isLoading:N,title:a,searchPlaceholder:l,emptyStateTitle:d,emptyStateDescription:m,noResultsText:p,width:C,onContentClick:t=>{u&&u(t)},renderCustomContent:w})]})};export{c as WhatsNew};
|
|
2
2
|
//# sourceMappingURL=WhatsNew.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WhatsNew.js","sources":["../../../../src/components/whats-new/WhatsNew.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { WhatsNewContent } from './WhatsNew.types';\nimport { WhatsNewButton } from './WhatsNewButton';\nimport { WhatsNewPanel } from './WhatsNewPanel';\nimport { useWhatsNewContext } from './WhatsNewProvider';\n\ninterface WhatsNewProps {\n\ttitle?: string;\n\ttooltip?: string;\n\tsearchPlaceholder?: string;\n\temptyStateTitle?: string;\n\temptyStateDescription?: string;\n\tnoResultsText?: string;\n\twidth?: string;\n\tonContentClick?: (content: WhatsNewContent) => void;\n\trenderCustomContent?: (content: WhatsNewContent) => React.ReactNode;\n\tbuttonTestId?: string;\n\ticonWidth?: number;\n\ticonHeight?: number;\n\tcustomIcon?: React.ComponentType<{\n\t\twidth?: number;\n\t\theight?: number;\n\t\tcolor?: string;\n\t}>;\n}\n\nexport const WhatsNew: React.FC<WhatsNewProps> = ({\n\ttitle = \"What's new\",\n\ttooltip = \"What's new\",\n\tsearchPlaceholder = 'Search posts',\n\temptyStateTitle = 'Nothing new!',\n\temptyStateDescription = 'There are no new updates or features at the moment. Check back soon!',\n\tnoResultsText = 'Sorry, no results found.',\n\twidth = '480px',\n\tonContentClick,\n\trenderCustomContent,\n\tbuttonTestId = 'whats-new-button',\n\ticonWidth =
|
|
1
|
+
{"version":3,"file":"WhatsNew.js","sources":["../../../../src/components/whats-new/WhatsNew.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { WhatsNewContent } from './WhatsNew.types';\nimport { WhatsNewButton } from './WhatsNewButton';\nimport { WhatsNewPanel } from './WhatsNewPanel';\nimport { useWhatsNewContext } from './WhatsNewProvider';\n\ninterface WhatsNewProps {\n\ttitle?: string;\n\ttooltip?: string;\n\tsearchPlaceholder?: string;\n\temptyStateTitle?: string;\n\temptyStateDescription?: string;\n\tnoResultsText?: string;\n\twidth?: string;\n\tonContentClick?: (content: WhatsNewContent) => void;\n\trenderCustomContent?: (content: WhatsNewContent) => React.ReactNode;\n\tbuttonTestId?: string;\n\ticonWidth?: number;\n\ticonHeight?: number;\n\ticonColor?: string;\n\ticonPadding?: number;\n\tcustomIcon?: React.ComponentType<{\n\t\twidth?: number;\n\t\theight?: number;\n\t\tcolor?: string;\n\t}>;\n}\n\nexport const WhatsNew: React.FC<WhatsNewProps> = ({\n\ttitle = \"What's new\",\n\ttooltip = \"What's new\",\n\tsearchPlaceholder = 'Search posts',\n\temptyStateTitle = 'Nothing new!',\n\temptyStateDescription = 'There are no new updates or features at the moment. Check back soon!',\n\tnoResultsText = 'Sorry, no results found.',\n\twidth = '480px',\n\tonContentClick,\n\trenderCustomContent,\n\tbuttonTestId = 'whats-new-button',\n\ticonWidth = 24,\n\ticonHeight = 24,\n\ticonColor,\n\ticonPadding,\n\tcustomIcon,\n}) => {\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst { whatsNewContent, isLoading, newContentCount } = useWhatsNewContext();\n\n\tconst handleOpen = () => setIsOpen(true);\n\tconst handleClose = () => setIsOpen(false);\n\n\tconst handleContentClick = (contentItem: WhatsNewContent) => {\n\t\t// WhatsNewPanel handles video/redirect logic directly\n\t\t// This handler is only for parent-level analytics/tracking\n\n\t\tif (onContentClick) {\n\t\t\tonContentClick(contentItem);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<WhatsNewButton\n\t\t\t\tonClick={handleOpen}\n\t\t\t\tnewContentCount={newContentCount}\n\t\t\t\tisOpen={isOpen}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\ttooltip={tooltip}\n\t\t\t\ttestId={buttonTestId}\n\t\t\t\ticonWidth={iconWidth}\n\t\t\t\ticonHeight={iconHeight}\n\t\t\t\ticonColor={iconColor}\n\t\t\t\ticonPadding={iconPadding}\n\t\t\t\tcustomIcon={customIcon}\n\t\t\t/>\n\t\t\t<WhatsNewPanel\n\t\t\t\tisOpen={isOpen}\n\t\t\t\tonClose={handleClose}\n\t\t\t\tcontent={whatsNewContent}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\ttitle={title}\n\t\t\t\tsearchPlaceholder={searchPlaceholder}\n\t\t\t\temptyStateTitle={emptyStateTitle}\n\t\t\t\temptyStateDescription={emptyStateDescription}\n\t\t\t\tnoResultsText={noResultsText}\n\t\t\t\twidth={width}\n\t\t\t\tonContentClick={handleContentClick}\n\t\t\t\trenderCustomContent={renderCustomContent}\n\t\t\t/>\n\t\t</>\n\t);\n};\n"],"names":["WhatsNew","_ref","title","tooltip","searchPlaceholder","emptyStateTitle","emptyStateDescription","noResultsText","width","onContentClick","renderCustomContent","buttonTestId","iconWidth","iconHeight","iconColor","iconPadding","customIcon","isOpen","setIsOpen","useState","whatsNewContent","isLoading","newContentCount","useWhatsNewContext","_jsxs","_jsx","WhatsNewButton","onClick","handleOpen","testId","WhatsNewPanel","onClose","handleClose","content","contentItem"],"mappings":"oQA4BaA,MAAAA,EAAoCC,IAgB5C,IAhB6CC,MACjDA,EAAQ,aAAYC,QACpBA,EAAU,aAAYC,kBACtBA,EAAoB,eAAcC,gBAClCA,EAAkB,eAAcC,sBAChCA,EAAwB,uEAAsEC,cAC9FA,EAAgB,2BAA0BC,MAC1CA,EAAQ,QAAOC,eACfA,EAAcC,oBACdA,EAAmBC,aACnBA,EAAe,mBAAkBC,UACjCA,EAAY,GAAEC,WACdA,EAAa,GAAEC,UACfA,EAASC,YACTA,EAAWC,WACXA,GACAf,EACA,MAAOgB,EAAQC,GAAaC,GAAS,IAC/BC,gBAAEA,EAAeC,UAAEA,EAASC,gBAAEA,GAAoBC,IAcxD,OACCC,eACCC,EAACC,GACAC,QAfgBC,IAAMV,GAAU,GAgBhCI,gBAAiBA,EACjBL,OAAQA,EACRI,UAAWA,EACXlB,QAASA,EACT0B,OAAQlB,EACRC,UAAWA,EACXC,WAAYA,EACZC,UAAWA,EACXC,YAAaA,EACbC,WAAYA,IAEbS,EAACK,EACA,CAAAb,OAAQA,EACRc,QA5BiBC,IAAMd,GAAU,GA6BjCe,QAASb,EACTC,UAAWA,EACXnB,MAAOA,EACPE,kBAAmBA,EACnBC,gBAAiBA,EACjBC,sBAAuBA,EACvBC,cAAeA,EACfC,MAAOA,EACPC,eAnCyByB,IAIvBzB,GACHA,EAAeyB,EACf,EA8BCxB,oBAAqBA,MAEpB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as t,jsx as n}from"react/jsx-runtime";import
|
|
1
|
+
import{jsxs as t,jsx as n}from"react/jsx-runtime";import o from"../../assets/icons/whatsNew.svg.js";import{COLORS as i}from"../../constants/Theme.js";import{IconButton as e}from"../icon-button/IconButton.js";import{Tooltip as s}from"../tooltips/Tooltip.js";import{WhatsNewIconContainer as r}from"./WhatsNew.styles.js";const c=c=>{let{onClick:a,newContentCount:d=0,isOpen:l=!1,isLoading:m=!1,tooltip:p="What's new",testId:h="whats-new-button",iconWidth:f=24,iconHeight:g=24,iconColor:b,iconPadding:u,customIcon:j}=c;return m?t("div",Object.assign({style:{margin:"0px 8px"}},{children:[n("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),n("style",{children:"\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t"})]})):t(r,Object.assign({count:d},{children:[n(s,Object.assign({body:p,placement:"bottom"},{children:n(e,{Icon:null!=j?j:o,width:f,height:g,isSelected:l,iconColor:null!=b?b:l?i.content.brand:i.content.primary,onClick:a,"data-testid":h})})),d>0&&n("div",Object.assign({className:"notification--count"},{children:n("div",Object.assign({className:"count--text"},{children:d}))}))]}))};export{c as WhatsNewButton};
|
|
2
2
|
//# sourceMappingURL=WhatsNewButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WhatsNewButton.js","sources":["../../../../src/components/whats-new/WhatsNewButton.tsx"],"sourcesContent":["import React from 'react';\nimport WhatsNewIcon from '../../assets/icons/whatsNew.svg';\nimport { COLORS } from '../../constants/Theme';\nimport { Tooltip } from '../tooltips';\nimport { WhatsNewIconContainer } from './WhatsNew.styles';\nimport { WhatsNewButtonProps } from './WhatsNew.types';\n\nexport const WhatsNewButton: React.FC<WhatsNewButtonProps> = ({\n\tonClick,\n\tnewContentCount = 0,\n\tisOpen = false,\n\tisLoading = false,\n\ttooltip = \"What's new\",\n\ttestId = 'whats-new-button',\n\ticonWidth =
|
|
1
|
+
{"version":3,"file":"WhatsNewButton.js","sources":["../../../../src/components/whats-new/WhatsNewButton.tsx"],"sourcesContent":["import React from 'react';\nimport WhatsNewIcon from '../../assets/icons/whatsNew.svg';\nimport { COLORS } from '../../constants/Theme';\nimport { IconButton } from '../icon-button';\nimport { Tooltip } from '../tooltips';\nimport { WhatsNewIconContainer } from './WhatsNew.styles';\nimport { WhatsNewButtonProps } from './WhatsNew.types';\n\nexport const WhatsNewButton: React.FC<WhatsNewButtonProps> = ({\n\tonClick,\n\tnewContentCount = 0,\n\tisOpen = false,\n\tisLoading = false,\n\ttooltip = \"What's new\",\n\ttestId = 'whats-new-button',\n\ticonWidth = 24,\n\ticonHeight = 24,\n\ticonColor,\n\ticonPadding,\n\tcustomIcon: CustomIcon,\n}) => {\n\tif (isLoading) {\n\t\treturn (\n\t\t\t<div style={{ margin: '0px 8px' }}>\n\t\t\t\t{/* Simple loading spinner */}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\tborder: '2px solid #f3f3f3',\n\t\t\t\t\t\tborderTop: '2px solid #731DCF',\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tanimation: 'spin 1s linear infinite',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<style>\n\t\t\t\t\t{`\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t`}\n\t\t\t\t</style>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<WhatsNewIconContainer count={newContentCount}>\n\t\t\t<Tooltip body={tooltip} placement={'bottom'}>\n\t\t\t\t<IconButton\n\t\t\t\t\tIcon={\n\t\t\t\t\t\t(CustomIcon ?? WhatsNewIcon) as React.FC<\n\t\t\t\t\t\t\tReact.SVGAttributes<SVGElement>\n\t\t\t\t\t\t>\n\t\t\t\t\t}\n\t\t\t\t\twidth={iconWidth}\n\t\t\t\t\theight={iconHeight}\n\t\t\t\t\tisSelected={isOpen}\n\t\t\t\t\ticonColor={\n\t\t\t\t\t\ticonColor ??\n\t\t\t\t\t\t(isOpen ? COLORS.content.brand : COLORS.content.primary)\n\t\t\t\t\t}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\tdata-testid={testId}\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t\t{newContentCount > 0 && (\n\t\t\t\t<div className=\"notification--count\">\n\t\t\t\t\t<div className=\"count--text\">{newContentCount}</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</WhatsNewIconContainer>\n\t);\n};\n"],"names":["WhatsNewButton","_ref","onClick","newContentCount","isOpen","isLoading","tooltip","testId","iconWidth","iconHeight","iconColor","iconPadding","customIcon","CustomIcon","_jsxs","Object","assign","style","margin","children","_jsx","width","height","border","borderTop","borderRadius","animation","WhatsNewIconContainer","count","Tooltip","body","placement","IconButton","Icon","WhatsNewIcon","isSelected","COLORS","content","brand","primary","className"],"mappings":"8TAQaA,MAAAA,EAAgDC,IAYxD,IAZyDC,QAC7DA,EAAOC,gBACPA,EAAkB,EAACC,OACnBA,GAAS,EAAKC,UACdA,GAAY,EAAKC,QACjBA,EAAU,aAAYC,OACtBA,EAAS,mBAAkBC,UAC3BA,EAAY,GAAEC,WACdA,EAAa,GAAEC,UACfA,EAASC,YACTA,EACAC,WAAYC,GACZZ,EACA,OAAII,EAEFS,EAAA,MAAAC,OAAAC,OAAA,CAAKC,MAAO,CAAEC,OAAQ,YAAW,CAAAC,SAAA,CAEhCC,EACC,MAAA,CAAAH,MAAO,CACNI,MAAO,GACPC,OAAQ,GACRC,OAAQ,oBACRC,UAAW,oBACXC,aAAc,MACdC,UAAW,6BAGbN,EACE,QAAA,CAAAD,SAAA,qKAYJL,EAACa,EAAqBZ,OAAAC,OAAA,CAACY,MAAOzB,GAC7B,CAAAgB,SAAA,CAAAC,EAACS,EAAOd,OAAAC,OAAA,CAACc,KAAMxB,EAASyB,UAAW,UAClC,CAAAZ,SAAAC,EAACY,EAAU,CACVC,KACEpB,QAAAA,EAAcqB,EAIhBb,MAAOb,EACPc,OAAQb,EACR0B,WAAY/B,EACZM,UACCA,QAAAA,EACCN,EAASgC,EAAOC,QAAQC,MAAQF,EAAOC,QAAQE,QAEjDrC,QAASA,EAAO,cACHK,OAGdJ,EAAkB,GAClBiB,EAAK,MAAAL,OAAAC,OAAA,CAAAwB,UAAU,iCACdpB,EAAK,MAAAL,OAAAC,OAAA,CAAAwB,UAAU,eAAe,CAAArB,SAAAhB,WAGT"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,Fragment as t,jsxs as
|
|
1
|
+
import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import{format as n,differenceInBusinessDays as o}from"date-fns";import{useState as s,useMemo as a}from"react";import i from"../../assets/icons/searchIcon.svg.js";import c from"../../assets/icons/whatsNew.svg.js";import{COLORS as d}from"../../constants/Theme.js";import{Button as l}from"../button/Button.js";import{VideoModal as m}from"../feature-announcements/VideoModal.js";import{SearchBar as h}from"../searchBar/searchBar.js";import{SideModal as u}from"../side-modal/SideModal.js";import{TitleMedium as p,TitleRegular as g,BodyPrimary as f,Caption as b,TitleSmall as w}from"../TypographyStyle.js";import{MainContainer as j,WhatsNewWrapper as y,MainCardContainer as v,BackgroundImageContainer as x}from"./WhatsNew.styles.js";const C=C=>{let{isOpen:N,onClose:O,content:k,isLoading:A=!1,title:D="What's new on BIK",searchPlaceholder:S="Search posts",emptyStateTitle:T="Nothing new!",emptyStateDescription:L="There are no new updates or features at the moment. Check back soon!",noResultsText:M="Sorry, no results found.",width:B="480px",onContentClick:W,renderCustomContent:U}=C;const[V,E]=s(""),[I,_]=s(!1),[P,R]=s(""),z=e=>{if(!e.createdAt)return!1;const t=e.createdAt.toDate?e.createdAt.toDate():new Date(e.createdAt);return o(new Date,t)<7},F=a((()=>{if(!V.trim())return k;const e=V.toLowerCase();return k.filter((t=>t.title.toLowerCase().includes(e)||t.body.toLowerCase().includes(e)||t.content&&t.content.toLowerCase().includes(e)))}),[k,V]),H=0===k.length,K=0===F.length;return N?r(u,Object.assign({width:B,onClose:O,header:"",headerCustomComponent:e(p,Object.assign({color:d.background.inverse},{children:D})),headerStyle:{background:d.background.brandLight},hideFooter:!0},{children:[r(j,{children:[e("div",Object.assign({className:"mt-8"},{children:e(h,{width:"100%",isEnabled:!H,onChange:e=>{E(e)},onEnter:e=>{E(e)},placeholder:S,variant:"default",searchValue:V,onClickCross:()=>{E("")}})})),e(y,{children:H||K?r("div",Object.assign({className:"no--data--found"},{children:[e("div",Object.assign({className:"icon--wrapper"},{children:e(H?c:i,{width:32,height:32})})),H?r(t,{children:[e(g,{children:T}),e(f,Object.assign({color:d.content.secondary,className:"text--align",style:{maxWidth:300}},{children:L}))]}):K?e(f,Object.assign({color:d.content.secondary,className:"text--align",style:{maxWidth:300}},{children:M})):null]})):e("div",Object.assign({className:"scroller"},{children:F.map(((o,s)=>{var a;return U?U(o):r(v,Object.assign({className:"padding--16 mb-mt-8"},{children:[e(x,{imageUrl:o.image,height:"209px",width:"100%",style:{borderRadius:"4px"}}),e("div",Object.assign({className:"mt-20 full--width"},{children:r("div",Object.assign({className:"created--at flex flex--row"},{children:[z(o)?e("div",Object.assign({className:"new--content--tag"},{children:e(b,{children:"New"})})):e(t,{}),e(b,Object.assign({style:{color:d.content.placeholder}},{children:o.createdAt?n(o.createdAt.toDate?o.createdAt.toDate():new Date(o.createdAt),"dd MMMM yyyy"):""}))]}))})),e("div",Object.assign({className:"mt--8"},{children:e(w,{children:o.title})})),e("div",{dangerouslySetInnerHTML:{__html:o.body},className:"card--desc mt--12"}),e("div",Object.assign({className:"flex flex--row mt-20 full--width"},{children:e(l,{buttonText:(null===(a=o.primaryButton)||void 0===a?void 0:a.text)||o.buttonText||"Explore the feature",onClick:()=>(e=>{var t;if(e.productVideo)R(e.productVideo),_(!0);else{const r=(null===(t=e.primaryButton)||void 0===t?void 0:t.redirectionUrl)||e.redirectUrl;r&&window.open(r,"_blank","noopener,noreferrer")}W&&W(e)})(o),matchParentWidth:!0,size:"medium"})}))]}),`whats-new-${s}`)}))}))})]}),e(m,{isOpen:I,videoUrl:P,onClose:()=>{_(!1)}})]})):e(t,{})};export{C as WhatsNewPanel};
|
|
2
2
|
//# sourceMappingURL=WhatsNewPanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WhatsNewPanel.js","sources":["../../../../src/components/whats-new/WhatsNewPanel.tsx"],"sourcesContent":["import { differenceInBusinessDays, format } from 'date-fns';\nimport React, { useMemo, useState } from 'react';\nimport SearchIconSvg from '../../assets/icons/searchIcon.svg';\nimport WhatsNewIcon from '../../assets/icons/whatsNew.svg';\nimport { COLORS } from '../../constants/Theme';\nimport { Button } from '../button';\nimport { VideoModal } from '../feature-announcements/VideoModal';\nimport { SearchBar } from '../searchBar';\nimport { SideModal } from '../side-modal';\nimport {\n\tBodyPrimary,\n\tCaption,\n\tTitleMedium,\n\tTitleRegular,\n\tTitleSmall,\n} from '../TypographyStyle';\nimport {\n\tBackgroundImageContainer,\n\tMainCardContainer,\n\tMainContainer,\n\tWhatsNewWrapper,\n} from './WhatsNew.styles';\nimport { WhatsNewContent, WhatsNewPanelProps } from './WhatsNew.types';\n\nexport const WhatsNewPanel: React.FC<WhatsNewPanelProps> = ({\n\tisOpen,\n\tonClose,\n\tcontent,\n\tisLoading = false,\n\ttitle = \"What's new on BIK\",\n\tsearchPlaceholder = 'Search posts',\n\temptyStateTitle = 'Nothing new!',\n\temptyStateDescription = 'There are no new updates or features at the moment. Check back soon!',\n\tnoResultsText = 'Sorry, no results found.',\n\twidth = '480px',\n\tonContentClick,\n\trenderCustomContent,\n}) => {\n\tconst [searchText, setSearchText] = useState('');\n\tconst [isVideoModalOpen, setIsVideoModalOpen] = useState(false);\n\tconst [videoUrl, setVideoUrl] = useState('');\n\n\tconst ifNewContent = (contentItem: WhatsNewContent): boolean => {\n\t\tif (!contentItem.createdAt) return false;\n\t\tconst createdAt = contentItem.createdAt.toDate\n\t\t\t? contentItem.createdAt.toDate()\n\t\t\t: new Date(contentItem.createdAt);\n\t\treturn differenceInBusinessDays(new Date(), createdAt) < 7;\n\t};\n\n\tconst modifiedWhatsNewContent = useMemo(() => {\n\t\tif (!searchText.trim()) return content;\n\n\t\tconst searchLower = searchText.toLowerCase();\n\t\treturn content.filter(\n\t\t\t(item) =>\n\t\t\t\titem.title.toLowerCase().includes(searchLower) ||\n\t\t\t\titem.body.toLowerCase().includes(searchLower) ||\n\t\t\t\t(item.content && item.content.toLowerCase().includes(searchLower)),\n\t\t);\n\t}, [content, searchText]);\n\n\tconst handleContentClick = (contentItem: WhatsNewContent) => {\n\t\tconst action = contentItem.primaryButton?.action;\n\t\tconsole.log('Content item clicked:', contentItem);\n\t\tif (action === 'Play Video' || (!action && contentItem.productVideo)) {\n\t\t\tif (contentItem.productVideo) {\n\t\t\t\tsetVideoUrl(contentItem.productVideo);\n\t\t\t\tsetIsVideoModalOpen(true);\n\t\t\t}\n\t\t} else {\n\t\t\t// No video - redirect to primary redirection URL or fallback to redirectUrl\n\t\t\tconst redirectionUrl =\n\t\t\t\tcontentItem.primaryButton?.redirectionUrl || contentItem.redirectUrl;\n\t\t\tif (redirectionUrl) {\n\t\t\t\twindow.open(redirectionUrl, '_blank', 'noopener,noreferrer');\n\t\t\t}\n\t\t}\n\n\t\tif (onContentClick) {\n\t\t\tonContentClick(contentItem);\n\t\t}\n\t};\n\n\tconst isWhatsNewContentEmpty = content.length === 0;\n\tconst isModifiedWhatsNewContentEmpty = modifiedWhatsNewContent.length === 0;\n\n\tif (!isOpen) {\n\t\treturn <></>;\n\t}\n\n\treturn (\n\t\t<SideModal\n\t\t\twidth={width}\n\t\t\tonClose={onClose}\n\t\t\theader=\"\"\n\t\t\theaderCustomComponent={\n\t\t\t\t<TitleMedium color={COLORS.background.inverse}>{title}</TitleMedium>\n\t\t\t}\n\t\t\theaderStyle={{ background: COLORS.background.brandLight }}\n\t\t\thideFooter={true}\n\t\t>\n\t\t\t<MainContainer>\n\t\t\t\t<div className=\"mt-8\">\n\t\t\t\t\t<SearchBar\n\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\tisEnabled={!isWhatsNewContentEmpty}\n\t\t\t\t\t\tonChange={(inputText: string) => {\n\t\t\t\t\t\t\tsetSearchText(inputText);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonEnter={(inputText: string) => {\n\t\t\t\t\t\t\tsetSearchText(inputText);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\t\tsearchValue={searchText}\n\t\t\t\t\t\tonClickCross={() => {\n\t\t\t\t\t\t\tsetSearchText('');\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<WhatsNewWrapper>\n\t\t\t\t\t{isWhatsNewContentEmpty || isModifiedWhatsNewContentEmpty ? (\n\t\t\t\t\t\t<div className=\"no--data--found\">\n\t\t\t\t\t\t\t<div className=\"icon--wrapper\">\n\t\t\t\t\t\t\t\t{isWhatsNewContentEmpty ? (\n\t\t\t\t\t\t\t\t\t<WhatsNewIcon width={32} height={32} />\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<SearchIconSvg width={32} height={32} />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{isWhatsNewContentEmpty ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<TitleRegular>{emptyStateTitle}</TitleRegular>\n\t\t\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\t\tclassName=\"text--align\"\n\t\t\t\t\t\t\t\t\t\tstyle={{ maxWidth: 300 }}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{emptyStateDescription}\n\t\t\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : isModifiedWhatsNewContentEmpty ? (\n\t\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\tclassName=\"text--align\"\n\t\t\t\t\t\t\t\t\tstyle={{ maxWidth: 300 }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{noResultsText}\n\t\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div className=\"scroller\">\n\t\t\t\t\t\t\t{modifiedWhatsNewContent.map((contentItem, index) => {\n\t\t\t\t\t\t\t\tif (renderCustomContent) {\n\t\t\t\t\t\t\t\t\treturn renderCustomContent(contentItem);\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<MainCardContainer\n\t\t\t\t\t\t\t\t\t\tclassName=\"padding--16 mb-mt-8\"\n\t\t\t\t\t\t\t\t\t\tkey={`whats-new-${index}`}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<BackgroundImageContainer\n\t\t\t\t\t\t\t\t\t\t\timageUrl={contentItem.image}\n\t\t\t\t\t\t\t\t\t\t\theight=\"209px\"\n\t\t\t\t\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ borderRadius: '4px' }}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<div className=\"mt-20 full--width\">\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"created--at flex flex--row\">\n\t\t\t\t\t\t\t\t\t\t\t\t{ifNewContent(contentItem) ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"new--content--tag\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Caption>New</Caption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t<Caption style={{ color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{contentItem.createdAt\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? format(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontentItem.createdAt.toDate\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? contentItem.createdAt.toDate()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: new Date(contentItem.createdAt),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'dd MMMM yyyy',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: ''}\n\t\t\t\t\t\t\t\t\t\t\t\t</Caption>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"mt--8\">\n\t\t\t\t\t\t\t\t\t\t\t<TitleSmall>{contentItem.title}</TitleSmall>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: contentItem.body }}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"card--desc mt--12\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex--row mt-20 full--width\">\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonText={\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontentItem.primaryButton?.text ||\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontentItem.buttonText ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Explore the feature'\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => handleContentClick(contentItem)}\n\t\t\t\t\t\t\t\t\t\t\t\tmatchParentWidth={true}\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</MainCardContainer>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</WhatsNewWrapper>\n\t\t\t</MainContainer>\n\t\t\t<VideoModal\n\t\t\t\tisOpen={isVideoModalOpen}\n\t\t\t\tvideoUrl={videoUrl}\n\t\t\t\tonClose={() => {\n\t\t\t\t\tsetIsVideoModalOpen(false);\n\t\t\t\t}}\n\t\t\t/>\n\t\t</SideModal>\n\t);\n};\n"],"names":["WhatsNewPanel","_ref","isOpen","onClose","content","isLoading","title","searchPlaceholder","emptyStateTitle","emptyStateDescription","noResultsText","width","onContentClick","renderCustomContent","searchText","setSearchText","useState","isVideoModalOpen","setIsVideoModalOpen","videoUrl","setVideoUrl","ifNewContent","contentItem","createdAt","toDate","Date","differenceInBusinessDays","modifiedWhatsNewContent","useMemo","trim","searchLower","toLowerCase","filter","item","includes","body","isWhatsNewContentEmpty","length","isModifiedWhatsNewContentEmpty","_jsxs","SideModal","Object","assign","header","headerCustomComponent","_jsx","TitleMedium","color","COLORS","background","inverse","headerStyle","brandLight","hideFooter","MainContainer","children","className","SearchBar","isEnabled","onChange","inputText","onEnter","placeholder","variant","searchValue","onClickCross","WhatsNewWrapper","WhatsNewIcon","SearchIconSvg","height","_Fragment","TitleRegular","BodyPrimary","secondary","style","maxWidth","map","index","MainCardContainer","BackgroundImageContainer","imageUrl","image","borderRadius","Caption","format","TitleSmall","dangerouslySetInnerHTML","__html","Button","buttonText","primaryButton","_a","text","onClick","action","console","log","productVideo","redirectionUrl","_b","redirectUrl","window","open","handleContentClick","matchParentWidth","size","VideoModal"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"WhatsNewPanel.js","sources":["../../../../src/components/whats-new/WhatsNewPanel.tsx"],"sourcesContent":["import { differenceInBusinessDays, format } from 'date-fns';\nimport React, { useMemo, useState } from 'react';\nimport SearchIconSvg from '../../assets/icons/searchIcon.svg';\nimport WhatsNewIcon from '../../assets/icons/whatsNew.svg';\nimport { COLORS } from '../../constants/Theme';\nimport { Button } from '../button';\nimport { VideoModal } from '../feature-announcements/VideoModal';\nimport { SearchBar } from '../searchBar';\nimport { SideModal } from '../side-modal';\nimport {\n\tBodyPrimary,\n\tCaption,\n\tTitleMedium,\n\tTitleRegular,\n\tTitleSmall,\n} from '../TypographyStyle';\nimport {\n\tBackgroundImageContainer,\n\tMainCardContainer,\n\tMainContainer,\n\tWhatsNewWrapper,\n} from './WhatsNew.styles';\nimport { WhatsNewContent, WhatsNewPanelProps } from './WhatsNew.types';\n\nexport const WhatsNewPanel: React.FC<WhatsNewPanelProps> = ({\n\tisOpen,\n\tonClose,\n\tcontent,\n\tisLoading = false,\n\ttitle = \"What's new on BIK\",\n\tsearchPlaceholder = 'Search posts',\n\temptyStateTitle = 'Nothing new!',\n\temptyStateDescription = 'There are no new updates or features at the moment. Check back soon!',\n\tnoResultsText = 'Sorry, no results found.',\n\twidth = '480px',\n\tonContentClick,\n\trenderCustomContent,\n}) => {\n\tconst [searchText, setSearchText] = useState('');\n\tconst [isVideoModalOpen, setIsVideoModalOpen] = useState(false);\n\tconst [videoUrl, setVideoUrl] = useState('');\n\n\tconst ifNewContent = (contentItem: WhatsNewContent): boolean => {\n\t\tif (!contentItem.createdAt) return false;\n\t\tconst createdAt = contentItem.createdAt.toDate\n\t\t\t? contentItem.createdAt.toDate()\n\t\t\t: new Date(contentItem.createdAt);\n\t\treturn differenceInBusinessDays(new Date(), createdAt) < 7;\n\t};\n\n\tconst modifiedWhatsNewContent = useMemo(() => {\n\t\tif (!searchText.trim()) return content;\n\n\t\tconst searchLower = searchText.toLowerCase();\n\t\treturn content.filter(\n\t\t\t(item) =>\n\t\t\t\titem.title.toLowerCase().includes(searchLower) ||\n\t\t\t\titem.body.toLowerCase().includes(searchLower) ||\n\t\t\t\t(item.content && item.content.toLowerCase().includes(searchLower)),\n\t\t);\n\t}, [content, searchText]);\n\n\tconst handleContentClick = (contentItem: WhatsNewContent) => {\n\t\tif (contentItem.productVideo) {\n\t\t\t// Video exists - always play video first\n\t\t\tsetVideoUrl(contentItem.productVideo);\n\t\t\tsetIsVideoModalOpen(true);\n\t\t} else {\n\t\t\t// No video - redirect to primary redirection URL or fallback to redirectUrl\n\t\t\tconst redirectionUrl =\n\t\t\t\tcontentItem.primaryButton?.redirectionUrl || contentItem.redirectUrl;\n\t\t\tif (redirectionUrl) {\n\t\t\t\twindow.open(redirectionUrl, '_blank', 'noopener,noreferrer');\n\t\t\t}\n\t\t}\n\n\t\tif (onContentClick) {\n\t\t\tonContentClick(contentItem);\n\t\t}\n\t};\n\n\tconst isWhatsNewContentEmpty = content.length === 0;\n\tconst isModifiedWhatsNewContentEmpty = modifiedWhatsNewContent.length === 0;\n\n\tif (!isOpen) {\n\t\treturn <></>;\n\t}\n\n\treturn (\n\t\t<SideModal\n\t\t\twidth={width}\n\t\t\tonClose={onClose}\n\t\t\theader=\"\"\n\t\t\theaderCustomComponent={\n\t\t\t\t<TitleMedium color={COLORS.background.inverse}>{title}</TitleMedium>\n\t\t\t}\n\t\t\theaderStyle={{ background: COLORS.background.brandLight }}\n\t\t\thideFooter={true}\n\t\t>\n\t\t\t<MainContainer>\n\t\t\t\t<div className=\"mt-8\">\n\t\t\t\t\t<SearchBar\n\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\tisEnabled={!isWhatsNewContentEmpty}\n\t\t\t\t\t\tonChange={(inputText: string) => {\n\t\t\t\t\t\t\tsetSearchText(inputText);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonEnter={(inputText: string) => {\n\t\t\t\t\t\t\tsetSearchText(inputText);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\t\tsearchValue={searchText}\n\t\t\t\t\t\tonClickCross={() => {\n\t\t\t\t\t\t\tsetSearchText('');\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<WhatsNewWrapper>\n\t\t\t\t\t{isWhatsNewContentEmpty || isModifiedWhatsNewContentEmpty ? (\n\t\t\t\t\t\t<div className=\"no--data--found\">\n\t\t\t\t\t\t\t<div className=\"icon--wrapper\">\n\t\t\t\t\t\t\t\t{isWhatsNewContentEmpty ? (\n\t\t\t\t\t\t\t\t\t<WhatsNewIcon width={32} height={32} />\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<SearchIconSvg width={32} height={32} />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{isWhatsNewContentEmpty ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<TitleRegular>{emptyStateTitle}</TitleRegular>\n\t\t\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\t\tclassName=\"text--align\"\n\t\t\t\t\t\t\t\t\t\tstyle={{ maxWidth: 300 }}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{emptyStateDescription}\n\t\t\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : isModifiedWhatsNewContentEmpty ? (\n\t\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\tclassName=\"text--align\"\n\t\t\t\t\t\t\t\t\tstyle={{ maxWidth: 300 }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{noResultsText}\n\t\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div className=\"scroller\">\n\t\t\t\t\t\t\t{modifiedWhatsNewContent.map((contentItem, index) => {\n\t\t\t\t\t\t\t\tif (renderCustomContent) {\n\t\t\t\t\t\t\t\t\treturn renderCustomContent(contentItem);\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<MainCardContainer\n\t\t\t\t\t\t\t\t\t\tclassName=\"padding--16 mb-mt-8\"\n\t\t\t\t\t\t\t\t\t\tkey={`whats-new-${index}`}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<BackgroundImageContainer\n\t\t\t\t\t\t\t\t\t\t\timageUrl={contentItem.image}\n\t\t\t\t\t\t\t\t\t\t\theight=\"209px\"\n\t\t\t\t\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ borderRadius: '4px' }}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<div className=\"mt-20 full--width\">\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"created--at flex flex--row\">\n\t\t\t\t\t\t\t\t\t\t\t\t{ifNewContent(contentItem) ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"new--content--tag\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Caption>New</Caption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t<Caption style={{ color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{contentItem.createdAt\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? format(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontentItem.createdAt.toDate\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? contentItem.createdAt.toDate()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: new Date(contentItem.createdAt),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'dd MMMM yyyy',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: ''}\n\t\t\t\t\t\t\t\t\t\t\t\t</Caption>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"mt--8\">\n\t\t\t\t\t\t\t\t\t\t\t<TitleSmall>{contentItem.title}</TitleSmall>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: contentItem.body }}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"card--desc mt--12\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex--row mt-20 full--width\">\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonText={\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontentItem.primaryButton?.text ||\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontentItem.buttonText ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Explore the feature'\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => handleContentClick(contentItem)}\n\t\t\t\t\t\t\t\t\t\t\t\tmatchParentWidth={true}\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</MainCardContainer>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</WhatsNewWrapper>\n\t\t\t</MainContainer>\n\t\t\t<VideoModal\n\t\t\t\tisOpen={isVideoModalOpen}\n\t\t\t\tvideoUrl={videoUrl}\n\t\t\t\tonClose={() => {\n\t\t\t\t\tsetIsVideoModalOpen(false);\n\t\t\t\t}}\n\t\t\t/>\n\t\t</SideModal>\n\t);\n};\n"],"names":["WhatsNewPanel","_ref","isOpen","onClose","content","isLoading","title","searchPlaceholder","emptyStateTitle","emptyStateDescription","noResultsText","width","onContentClick","renderCustomContent","searchText","setSearchText","useState","isVideoModalOpen","setIsVideoModalOpen","videoUrl","setVideoUrl","ifNewContent","contentItem","createdAt","toDate","Date","differenceInBusinessDays","modifiedWhatsNewContent","useMemo","trim","searchLower","toLowerCase","filter","item","includes","body","isWhatsNewContentEmpty","length","isModifiedWhatsNewContentEmpty","_jsxs","SideModal","Object","assign","header","headerCustomComponent","_jsx","TitleMedium","color","COLORS","background","inverse","headerStyle","brandLight","hideFooter","MainContainer","children","className","SearchBar","isEnabled","onChange","inputText","onEnter","placeholder","variant","searchValue","onClickCross","WhatsNewWrapper","WhatsNewIcon","SearchIconSvg","height","_Fragment","TitleRegular","BodyPrimary","secondary","style","maxWidth","map","index","MainCardContainer","BackgroundImageContainer","imageUrl","image","borderRadius","Caption","format","TitleSmall","dangerouslySetInnerHTML","__html","Button","buttonText","primaryButton","_a","text","onClick","productVideo","redirectionUrl","redirectUrl","window","open","handleContentClick","matchParentWidth","size","VideoModal"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e={brand:{900:"#28034E",800:"#4B1583",500:"#731DCF",100:"#F3EDF9",50:"#EFE6F9",10:"#F9F3FF"},grayscale:{900:"#212121",700:"#616161",500:"#9E9E9E",400:"#BDBDBD",200:"#E0E0E0",100:"#F0F0F0",70:"#F7F7F7",50:"#FAFAFA",white:"#FFFFFF",alpha:"#00000088"},negative:{900:"#B92321",700:"#D53434",100:"#FFCED4",50:"#FFEBEF"},warning:{900:"#99631B",500:"#FEC02D",100:"#FFEABE",50:"#FFF7E5"},positive:{900:"#00580E",700:"#1A872C",100:"#C3E4C4",50:"#E6F4E7"},bikAi:{500:"linear-gradient(93deg, #FF166A 0.37%, #FB5F08 100%)",100:"linear-gradient(93deg, #FEBAD2 0.37%, #FDD1B9 100%)",50:"linear-gradient(93deg, #FFE6EE 0.37%, #FFF0E7 100%)"}},t={background:{inactive:e.grayscale[200],base:e.grayscale[100],inverse:e.brand[900],inverseLight:e.brand[800],brand:e.brand[500],brandLight:e.brand[50],brandVeryLight:e.brand[10],pureWhite:e.grayscale.white,brandTint:e.brand[100],negative:{vibrant:e.negative[700],light:e.negative[50]},warning:{vibrant:e.warning[500],light:e.warning[50]},positive:{vibrant:e.positive[700],light:e.positive[50]},blue:{light:"#E5F2FF"}},icon:{placeholder:"#9E9E9E"},scrim:{standard:"#00000099"},surface:{standard:e.grayscale.white,subdued:e.grayscale[50],hovered:e.grayscale[100],grey:e.grayscale[70],ai:e.bikAi[500],aiLight:e.bikAi[50]},content:{primary:e.grayscale[900],secondary:e.grayscale[700],placeholder:e.grayscale[500],inactive:e.grayscale[400],brand:e.brand[500],primaryInverse:e.grayscale.white,secondaryInverse:"#ffffffcc",negative:e.negative[900],warning:e.warning[900],positive:e.positive[900],blue:"#28458F",ai:e.bikAi[500]},stroke:{primary:e.grayscale[200],brand:e.brand[500],negative:{lightAlt:e.negative[100],vibrant:e.negative[700]},warning:{lightAlt:e.warning[100],vibrant:e.warning[500]},positive:{lightAlt:e.positive[100],vibrant:e.positive[700]},brandLightAlt:"#DDCCF0",blue:{lightAlt:"#C3D5E5"},ai:{lightAlt:"#FEBAD2",vibrant:"#F23275"}},special:{whatsapp:{brand:"#25D366",gradient:"linear-gradient(360deg, #20B038 0%, #60D66A 100%)",dark:"#455A64",gradientArr:["#20B038","#60D66A"]},brand:{google:"#DD4B39",facebook:"#1877F2"}},text:{primary:e.grayscale[900],secondary:e.grayscale[700],placeholder:e.grayscale[500],disabled:e.grayscale[400],white:e.grayscale.white,brand:e.brand[500],altPrimary:e.brand[900],altSecondary:e.brand[800]}},i={display:{fontWeight:"400",fontSize:32,lineHeight:40,letterSpacing:0},titleXLarge:{fontWeight:"600",fontSize:32,lineHeight:40,letterSpacing:0},titleLarge:{fontWeight:"600",fontSize:28,lineHeight:40,letterSpacing:0},titleMedium:{fontWeight:"600",fontSize:20,lineHeight:28,letterSpacing:0},titleRegular:{fontWeight:"600",fontSize:16,lineHeight:24,letterSpacing:0},titleSmall:{fontWeight:"600",fontSize:14,lineHeight:20,letterSpacing:0},bodyPrimary:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},bodyLarge:{fontWeight:"400",fontSize:20,lineHeight:28,letterSpacing:0},bodySecondary:{fontWeight:"400",fontSize:14,lineHeight:20,letterSpacing:0},caption:{fontWeight:"400",fontSize:12,lineHeight:16,letterSpacing:0},tiny:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0},subHeading:{fontWeight:"600",fontSize:10,lineHeight:12,letterSpacing:0},title1:{fontWeight:"600",fontSize:24,lineHeight:32,letterSpacing:0},title1Mobile:{fontWeight:"600",fontSize:20,lineHeight:30,letterSpacing:0},title2:{fontWeight:"600",fontSize:20,lineHeight:28,letterSpacing:0},title2Mobile:{fontWeight:"600",fontSize:18,lineHeight:24,letterSpacing:0},title3:{fontWeight:"600",fontSize:16,lineHeight:24,letterSpacing:0},title3Mobile:{fontWeight:"500",fontSize:14,lineHeight:20,letterSpacing:0},title4:{fontWeight:"400",fontSize:14,lineHeight:20,letterSpacing:0},textPlaceholder:{fontWeight:"400",fontSize:12,lineHeight:16,letterSpacing:0},title4Mobile:{fontWeight:"400",fontSize:10,lineHeight:16,letterSpacing:0},bodyRegularMobile:{fontWeight:"400",fontSize:14,lineHeight:18,letterSpacing:0},bodyRegular:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},bodySmall:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0},buttonLarge:{fontWeight:"600",fontSize:16,lineHeight:20,letterSpacing:0},buttonRegular:{fontWeight:"600",fontSize:14,lineHeight:20,letterSpacing:0},captionMobile:{fontWeight:"500",fontSize:10,lineHeight:12,letterSpacing:0},captionBold:{fontWeight:"700",fontSize:12,lineHeight:16,letterSpacing:0},text1Bold:{fontWeight:"700",fontSize:10,lineHeight:14,letterSpacing:0},toast:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},toastMobile:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0}},n={colorsV2:t,fonts:i};export{e as BASE_COLORS,t as COLORS,n as DEFAULT_THEME,i as FONTS};
|
|
1
|
+
const e={brand:{900:"#28034E",850:"#360A63",800:"#4B1583",700:"#5E3A83",500:"#731DCF",100:"#F3EDF9",50:"#EFE6F9",10:"#F9F3FF"},grayscale:{900:"#212121",700:"#616161",500:"#9E9E9E",400:"#BDBDBD",200:"#E0E0E0",100:"#F0F0F0",70:"#F7F7F7",50:"#FAFAFA",white:"#FFFFFF",alpha:"#00000088"},negative:{900:"#B92321",700:"#D53434",100:"#FFCED4",50:"#FFEBEF"},warning:{900:"#99631B",500:"#FEC02D",100:"#FFEABE",50:"#FFF7E5"},positive:{900:"#00580E",700:"#1A872C",100:"#C3E4C4",50:"#E6F4E7"},bikAi:{500:"linear-gradient(93deg, #FF166A 0.37%, #FB5F08 100%)",100:"linear-gradient(93deg, #FEBAD2 0.37%, #FDD1B9 100%)",50:"linear-gradient(93deg, #FFE6EE 0.37%, #FFF0E7 100%)"}},t={background:{inactive:e.grayscale[200],base:e.grayscale[100],inverse:e.brand[900],inverseLight:e.brand[800],brand:e.brand[500],brandLight:e.brand[50],brandVeryLight:e.brand[10],pureWhite:e.grayscale.white,brandTint:e.brand[100],brandHovered:e.brand[850],negative:{vibrant:e.negative[700],light:e.negative[50]},warning:{vibrant:e.warning[500],light:e.warning[50]},positive:{vibrant:e.positive[700],light:e.positive[50]},blue:{light:"#E5F2FF"}},icon:{placeholder:"#9E9E9E"},scrim:{standard:"#00000099"},surface:{standard:e.grayscale.white,subdued:e.grayscale[50],hovered:e.grayscale[100],grey:e.grayscale[70],ai:e.bikAi[500],aiLight:e.bikAi[50]},content:{primary:e.grayscale[900],secondary:e.grayscale[700],placeholder:e.grayscale[500],inactive:e.grayscale[400],brand:e.brand[500],primaryInverse:e.grayscale.white,secondaryInverse:"#ffffffcc",negative:e.negative[900],warning:e.warning[900],positive:e.positive[900],blue:"#28458F",ai:e.bikAi[500]},stroke:{primary:e.grayscale[200],brand:e.brand[500],negative:{lightAlt:e.negative[100],vibrant:e.negative[700]},warning:{lightAlt:e.warning[100],vibrant:e.warning[500]},positive:{lightAlt:e.positive[100],vibrant:e.positive[700]},brandLightAlt:"#DDCCF0",brandSubdued:e.brand[700],blue:{lightAlt:"#C3D5E5"},ai:{lightAlt:"#FEBAD2",vibrant:"#F23275"}},special:{whatsapp:{brand:"#25D366",gradient:"linear-gradient(360deg, #20B038 0%, #60D66A 100%)",dark:"#455A64",gradientArr:["#20B038","#60D66A"]},brand:{google:"#DD4B39",facebook:"#1877F2"}},text:{primary:e.grayscale[900],secondary:e.grayscale[700],placeholder:e.grayscale[500],disabled:e.grayscale[400],white:e.grayscale.white,brand:e.brand[500],altPrimary:e.brand[900],altSecondary:e.brand[800]}},i={display:{fontWeight:"400",fontSize:32,lineHeight:40,letterSpacing:0},titleXLarge:{fontWeight:"600",fontSize:32,lineHeight:40,letterSpacing:0},titleLarge:{fontWeight:"600",fontSize:28,lineHeight:40,letterSpacing:0},titleMedium:{fontWeight:"600",fontSize:20,lineHeight:28,letterSpacing:0},titleRegular:{fontWeight:"600",fontSize:16,lineHeight:24,letterSpacing:0},titleSmall:{fontWeight:"600",fontSize:14,lineHeight:20,letterSpacing:0},bodyPrimary:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},bodyLarge:{fontWeight:"400",fontSize:20,lineHeight:28,letterSpacing:0},bodySecondary:{fontWeight:"400",fontSize:14,lineHeight:20,letterSpacing:0},caption:{fontWeight:"400",fontSize:12,lineHeight:16,letterSpacing:0},tiny:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0},subHeading:{fontWeight:"600",fontSize:10,lineHeight:12,letterSpacing:0},title1:{fontWeight:"600",fontSize:24,lineHeight:32,letterSpacing:0},title1Mobile:{fontWeight:"600",fontSize:20,lineHeight:30,letterSpacing:0},title2:{fontWeight:"600",fontSize:20,lineHeight:28,letterSpacing:0},title2Mobile:{fontWeight:"600",fontSize:18,lineHeight:24,letterSpacing:0},title3:{fontWeight:"600",fontSize:16,lineHeight:24,letterSpacing:0},title3Mobile:{fontWeight:"500",fontSize:14,lineHeight:20,letterSpacing:0},title4:{fontWeight:"400",fontSize:14,lineHeight:20,letterSpacing:0},textPlaceholder:{fontWeight:"400",fontSize:12,lineHeight:16,letterSpacing:0},title4Mobile:{fontWeight:"400",fontSize:10,lineHeight:16,letterSpacing:0},bodyRegularMobile:{fontWeight:"400",fontSize:14,lineHeight:18,letterSpacing:0},bodyRegular:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},bodySmall:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0},buttonLarge:{fontWeight:"600",fontSize:16,lineHeight:20,letterSpacing:0},buttonRegular:{fontWeight:"600",fontSize:14,lineHeight:20,letterSpacing:0},captionMobile:{fontWeight:"500",fontSize:10,lineHeight:12,letterSpacing:0},captionBold:{fontWeight:"700",fontSize:12,lineHeight:16,letterSpacing:0},text1Bold:{fontWeight:"700",fontSize:10,lineHeight:14,letterSpacing:0},toast:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},toastMobile:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0}},n={colorsV2:t,fonts:i};export{e as BASE_COLORS,t as COLORS,n as DEFAULT_THEME,i as FONTS};
|
|
2
2
|
//# sourceMappingURL=Theme.js.map
|