@pexip/components 19.1.3 → 19.2.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 19.2.0
+
+### Minor Changes
+
+- 3b4f202: Distributes additional `components-no-global-styles.css` build
+  without global styles.
+- 8c3bb88: Checkbox supports custom label and MultiSelect component supports
+  descriptions
+
+### Patch Changes
+
+- 13e3722: Generate the package documentation in a folder called doc-dist
+- Updated dependencies [13e3722]
+  - @pexip/signal@16.9.3
+  - @pexip/hooks@21.0.5
+  - @pexip/utils@17.1.3
+
 ## 19.1.3
 
 ### Patch Changes

package/api-docs/README.mdx

@@ -0,0 +1,330 @@
+# `@pexip/components`
+
+Shared UI component library based on Pexip's design system.
+
+## Install
+
+`npm install @pexip/components`
+
+## Usage
+
+In your project, simply do the following:
+
+```tsx
+import {FullSizeWindow, Sidebar} from '@pexip/components';
+
+() => <FullSizeWindow>My stuff</FullSizeWindow>;
+```
+
+There are some global styles as well, with fonts, tokens, etc.
+
+```tsx
+// Import fonts
+import '@pexip/components/src/fonts.css';
+// Import other global styles
+import '@pexip/components/dist/index.css';
+```
+
+## Enumerations
+
+| Enumeration | Description |
+| ------ | ------ |
+| [Color](enumerations/Color.mdx) | - |
+| [RgbColor](enumerations/RgbColor.mdx) | - |
+| [FontVariant](enumerations/FontVariant.mdx) | - |
+| [LockStyle](enumerations/LockStyle.mdx) | - |
+| [ProgressBarColor](enumerations/ProgressBarColor.mdx) | - |
+| [AvatarType](enumerations/AvatarType.mdx) | - |
+| [ModalType](enumerations/ModalType.mdx) | - |
+| [StatCardVariant](enumerations/StatCardVariant.mdx) | - |
+| [TestId](enumerations/TestId.mdx) | - |
+
+## Interfaces
+
+| Interface | Description |
+| ------ | ------ |
+| [IconSource](interfaces/IconSource.mdx) | - |
+| [IconCollection](interfaces/IconCollection.mdx) | - |
+| [LoadingBoxProps](interfaces/LoadingBoxProps.mdx) | - |
+| [EnhancerProps](interfaces/EnhancerProps.mdx) | - |
+| [FloatRootOverflow](interfaces/FloatRootOverflow.mdx) | - |
+| [VideoHandle](interfaces/VideoHandle.mdx) | - |
+| [FullSizeWindowCommonProps](interfaces/FullSizeWindowCommonProps.mdx) | - |
+| [ModalHandle](interfaces/ModalHandle.mdx) | - |
+| [MultistepItem](interfaces/MultistepItem.mdx) | - |
+| [StatCardRowData](interfaces/StatCardRowData.mdx) | - |
+| [ToastProps](interfaces/ToastProps.mdx) | - |
+| [WithTransitionProps](interfaces/WithTransitionProps.mdx) | - |
+
+## Type Aliases
+
+| Type Alias | Description |
+| ------ | ------ |
+| [Breakpoint](type-aliases/Breakpoint.mdx) | - |
+| [BadgeCounterProps](type-aliases/BadgeCounterProps.mdx) | - |
+| [ButtonTextProps](type-aliases/ButtonTextProps.mdx) | - |
+| [ButtonProps](type-aliases/ButtonProps.mdx) | - |
+| [AlignWithFloatRootTrigger](type-aliases/AlignWithFloatRootTrigger.mdx) | - |
+| [InteractiveElementHTMLTag](type-aliases/InteractiveElementHTMLTag.mdx) | - |
+| [InteractiveElementProps](type-aliases/InteractiveElementProps.mdx) | - |
+| [PanelProps](type-aliases/PanelProps.mdx) | - |
+| [IScrollbars](type-aliases/IScrollbars.mdx) | - |
+| [SimpleButtonProps](type-aliases/SimpleButtonProps.mdx) | - |
+| [TextProps](type-aliases/TextProps.mdx) | - |
+| [TextLinkProps](type-aliases/TextLinkProps.mdx) | - |
+| [NotificationTooltipPosition](type-aliases/NotificationTooltipPosition.mdx) | - |
+| [OverlayOpacity](type-aliases/OverlayOpacity.mdx) | - |
+| [FullSizeWindowColorBackgroundProps](type-aliases/FullSizeWindowColorBackgroundProps.mdx) | - |
+| [FullSizeWindowImageBackgroundProps](type-aliases/FullSizeWindowImageBackgroundProps.mdx) | - |
+| [StatusItem](type-aliases/StatusItem.mdx) | - |
+| [ActivityCardAction](type-aliases/ActivityCardAction.mdx) | - |
+| [AriaMenuProps](type-aliases/AriaMenuProps.mdx) | - |
+| [AriaMenuItem](type-aliases/AriaMenuItem.mdx) | The structure of a menu item that can be used to create a dropdown menu. |
+| [BreadcrumbItem](type-aliases/BreadcrumbItem.mdx) | - |
+| [DropContentPosition](type-aliases/DropContentPosition.mdx) | - |
+| [DropContentType](type-aliases/DropContentType.mdx) | - |
+| [GroupProps](type-aliases/GroupProps.mdx) | - |
+| [MenuItem](type-aliases/MenuItem.mdx) | - |
+| [MenuAction](type-aliases/MenuAction.mdx) | - |
+| [MenuContent](type-aliases/MenuContent.mdx) | - |
+| [ModalProps](type-aliases/ModalProps.mdx) | - |
+| [MultistepIndicatorProps](type-aliases/MultistepIndicatorProps.mdx) | - |
+| [NotificationToastMessage](type-aliases/NotificationToastMessage.mdx) | - |
+| [NotificationToastSignal](type-aliases/NotificationToastSignal.mdx) | - |
+| [SelectProps](type-aliases/SelectProps.mdx) | - |
+| [TableResultsCountProps](type-aliases/TableResultsCountProps.mdx) | - |
+| [TagItem](type-aliases/TagItem.mdx) | - |
+| [ToastPosition](type-aliases/ToastPosition.mdx) | - |
+| [Theme](type-aliases/Theme.mdx) | - |
+| [Option](type-aliases/Option.mdx) | - |
+| [MultiselectOption](type-aliases/MultiselectOption.mdx) | - |
+| [ButtonHTMLTag](type-aliases/ButtonHTMLTag.mdx) | - |
+| [InlineElement](type-aliases/InlineElement.mdx) | - |
+| [HeadingElement](type-aliases/HeadingElement.mdx) | - |
+| [ClickEventHandler](type-aliases/ClickEventHandler.mdx) | - |
+| [ImageSrc](type-aliases/ImageSrc.mdx) | - |
+| [BackgroundImageSrc](type-aliases/BackgroundImageSrc.mdx) | - |
+| [LinkTarget](type-aliases/LinkTarget.mdx) | - |
+| [ExtendedTooltipPosition](type-aliases/ExtendedTooltipPosition.mdx) | - |
+| [TooltipPosition](type-aliases/TooltipPosition.mdx) | - |
+| [AllSize](type-aliases/AllSize.mdx) | - |
+| [BaseSizeModifier](type-aliases/BaseSizeModifier.mdx) | - |
+| [SizeModifier](type-aliases/SizeModifier.mdx) | - |
+| [LogoSizeModifier](type-aliases/LogoSizeModifier.mdx) | - |
+| [StandardSizeModifier](type-aliases/StandardSizeModifier.mdx) | - |
+| [ExtendedSizeModifier](type-aliases/ExtendedSizeModifier.mdx) | - |
+| [ModalSizeModifier](type-aliases/ModalSizeModifier.mdx) | - |
+| [VideoWrapperSizeModifier](type-aliases/VideoWrapperSizeModifier.mdx) | - |
+| [ButtonModifiersValues](type-aliases/ButtonModifiersValues.mdx) | - |
+| [ColorScheme](type-aliases/ColorScheme.mdx) | - |
+| [ButtonVariant](type-aliases/ButtonVariant.mdx) | - |
+| [InputVariant](type-aliases/InputVariant.mdx) | - |
+| [LabelModifier](type-aliases/LabelModifier.mdx) | - |
+| [ShadowModifier](type-aliases/ShadowModifier.mdx) | - |
+| [HeadingFontVariant](type-aliases/HeadingFontVariant.mdx) | - |
+| [StatIndicatorVariant](type-aliases/StatIndicatorVariant.mdx) | - |
+| [TextVariant](type-aliases/TextVariant.mdx) | - |
+| [VideoWrapperVariant](type-aliases/VideoWrapperVariant.mdx) | - |
+| [FullSizeWindowBackgroundVariant](type-aliases/FullSizeWindowBackgroundVariant.mdx) | - |
+| [BadgeCounterVariant](type-aliases/BadgeCounterVariant.mdx) | - |
+
+## Variables
+
+| Variable | Description |
+| ------ | ------ |
+| [IconTypes](variables/IconTypes.mdx) | - |
+| [breakpoints](variables/breakpoints.mdx) | - |
+| [variables](variables/variables.mdx) | - |
+| [ActionsRow](variables/ActionsRow.mdx) | - |
+| [Announcer](variables/Announcer.mdx) | Announcer component that announces messages to screen readers via aria-live region. This component should be placed at the top of the application. |
+| [Audio](variables/Audio.mdx) | - |
+| [BadgeCounter](variables/BadgeCounter.mdx) | - |
+| [Box](variables/Box.mdx) | - |
+| [BoxHeader](variables/BoxHeader.mdx) | - |
+| [LoadingBox](variables/LoadingBox.mdx) | - |
+| [Enhancers](variables/Enhancers.mdx) | - |
+| [ButtonText](variables/ButtonText.mdx) | - |
+| [Button](variables/Button.mdx) | - |
+| [RefButton](variables/RefButton.mdx) | - |
+| [CallToAction](variables/CallToAction.mdx) | - |
+| [Checkbox](variables/Checkbox.mdx) | - |
+| [CoreHeader](variables/CoreHeader.mdx) | - |
+| [Divider](variables/Divider.mdx) | - |
+| [DragAndDrop](variables/DragAndDrop.mdx) | - |
+| [Draggable](variables/Draggable.mdx) | - |
+| [FileUpload](variables/FileUpload.mdx) | - |
+| [Heading](variables/Heading.mdx) | - |
+| [Icon](variables/Icon.mdx) | - |
+| [Input](variables/Input.mdx) | - |
+| [InputLabel](variables/InputLabel.mdx) | - |
+| [InteractiveElement](variables/InteractiveElement.mdx) | - |
+| [RefInteractiveElement](variables/RefInteractiveElement.mdx) | - |
+| [LineHeading](variables/LineHeading.mdx) | - |
+| [ListBoxLink](variables/ListBoxLink.mdx) | - |
+| [ListLink](variables/ListLink.mdx) | - |
+| [Logo](variables/Logo.mdx) | - |
+| [Panel](variables/Panel.mdx) | - |
+| [PexipLogo](variables/PexipLogo.mdx) | - |
+| [Pill](variables/Pill.mdx) | - |
+| [ProgressBar](variables/ProgressBar.mdx) | - |
+| [RadioButton](variables/RadioButton.mdx) | - |
+| [RangeSlider](variables/RangeSlider.mdx) | - |
+| [Scrollbars](variables/Scrollbars.mdx) | - |
+| [SimpleButton](variables/SimpleButton.mdx) | SimpleButton looks and acts mostly the same as a normal Button except it has less features. The idea is to make it easy to do use composition (children components) to add desired behaviour. |
+| [RefSimpleButton](variables/RefSimpleButton.mdx) | - |
+| [Spinner](variables/Spinner.mdx) | - |
+| [StatIndicator](variables/StatIndicator.mdx) | - |
+| [StepNumber](variables/StepNumber.mdx) | - |
+| [SvgImage](variables/SvgImage.mdx) | - |
+| [Text](variables/Text.mdx) | - |
+| [TextArea](variables/TextArea.mdx) | - |
+| [TextHeading](variables/TextHeading.mdx) | - |
+| [TextLink](variables/TextLink.mdx) | - |
+| [ToggleSwitch](variables/ToggleSwitch.mdx) | - |
+| [CustomTooltip](variables/CustomTooltip.mdx) | - |
+| [NotificationTooltip](variables/NotificationTooltip.mdx) | - |
+| [Tooltip](variables/Tooltip.mdx) | Tooltips need to be accessible to keyboard and screen reader users, so we ensure that they are only placed on focusable and hoverable elements. For example, plain text and disabled buttons aren't focusable, meaning keyboard and screen reader users would be unable to access the information in that tooltip. |
+| [URLToLink](variables/URLToLink.mdx) | - |
+| [Video](variables/Video.mdx) | - |
+| [CardLayout](variables/CardLayout.mdx) | - |
+| [CenterLayout](variables/CenterLayout.mdx) | - |
+| [FullSizeWindow](variables/FullSizeWindow.mdx) | - |
+| [FullscreenLayout](variables/FullscreenLayout.mdx) | - |
+| [FullscreenOverlay](variables/FullscreenOverlay.mdx) | - |
+| [FullscreenSpinner](variables/FullscreenSpinner.mdx) | - |
+| [Cell](variables/Cell.mdx) | - |
+| [Grid](variables/Grid.mdx) | - |
+| [Scrim](variables/Scrim.mdx) | - |
+| [Wrapper](variables/Wrapper.mdx) | - |
+| [AboutText](variables/AboutText.mdx) | - |
+| [AboutModal](variables/AboutModal.mdx) | - |
+| [Accordion](variables/Accordion.mdx) | - |
+| [ActivityCard](variables/ActivityCard.mdx) | - |
+| [ariaMenuOpenStateSignal](variables/ariaMenuOpenStateSignal.mdx) | - |
+| [AriaMenu](variables/AriaMenu.mdx) | AriaMenu component represents a dropdown menu. |
+| [AspectRatio](variables/AspectRatio.mdx) | A wrapper that makes its children element bound to an aspect ratio. Default ration is 16:9, `{width: 16, height: 9}` |
+| [ColorPickerPreviewButton](variables/ColorPickerPreviewButton.mdx) | - |
+| [ImagePreviewButton](variables/ImagePreviewButton.mdx) | - |
+| [ColorPreviewButton](variables/ColorPreviewButton.mdx) | - |
+| [Avatar](variables/Avatar.mdx) | - |
+| [Bar](variables/Bar.mdx) | - |
+| [Breadcrumbs](variables/Breadcrumbs.mdx) | - |
+| [CakeTimer](variables/CakeTimer.mdx) | - |
+| [Captions](variables/Captions.mdx) | - |
+| [CircleCountDown](variables/CircleCountDown.mdx) | - |
+| [ModalCloseButton](variables/ModalCloseButton.mdx) | A generic close button for modals, tooltips and pill toasts. |
+| [CollapsableContainer](variables/CollapsableContainer.mdx) | - |
+| [CondensedTabs](variables/CondensedTabs.mdx) | - |
+| [ConfirmationModal](variables/ConfirmationModal.mdx) | - |
+| [ContextMenu](variables/ContextMenu.mdx) | ContextMenu will the show the "menu" component as a context menu when the user right clicks on the given child element. |
+| [DragAndUploadFiles](variables/DragAndUploadFiles.mdx) | - |
+| [DropContent](variables/DropContent.mdx) | - |
+| [Form](variables/Form.mdx) | - |
+| [Group](variables/Group.mdx) | - |
+| [InfoMessage](variables/InfoMessage.mdx) | - |
+| [KebabMenuButton](variables/KebabMenuButton.mdx) | - |
+| [List](variables/List.mdx) | - |
+| [Row](variables/Row.mdx) | - |
+| [MenuEntry](variables/MenuEntry.mdx) | - |
+| [Menu](variables/Menu.mdx) | - |
+| [Modal](variables/Modal.mdx) | - |
+| [ModalCloseButtonWithTooltip](variables/ModalCloseButtonWithTooltip.mdx) | - |
+| [HotkeysTooltip](variables/HotkeysTooltip.mdx) | - |
+| [HotKey](variables/HotKey.mdx) | - |
+| [ConfirmableMultiselect](variables/ConfirmableMultiselect.mdx) | - |
+| [Multiselect](variables/Multiselect.mdx) | - |
+| [MultistepIndicator](variables/MultistepIndicator.mdx) | - |
+| [NotificationToast](variables/NotificationToast.mdx) | The NotificationToast component works like a normal toast, except it displays data received via a signal, and it stores the messages as an array, displaying one at a time. |
+| [notificationToastSignal](variables/notificationToastSignal.mdx) | - |
+| [NumberStepInput](variables/NumberStepInput.mdx) | - |
+| [PasswordInput](variables/PasswordInput.mdx) | The PasswordInput is a normal Input element that can toggle between `password` and `text` type with a show/hide button. |
+| [PopOutWindow](variables/PopOutWindow.mdx) | - |
+| [PreferenceInput](variables/PreferenceInput.mdx) | - |
+| [PreferenceWrapper](variables/PreferenceWrapper.mdx) | - |
+| [PreferenceMultiselect](variables/PreferenceMultiselect.mdx) | - |
+| [PreferenceRow](variables/PreferenceRow.mdx) | - |
+| [SearchInput](variables/SearchInput.mdx) | - |
+| [Section](variables/Section.mdx) | - |
+| [SectionAccordion](variables/SectionAccordion.mdx) | - |
+| [Select](variables/Select.mdx) | - |
+| [Sheet](variables/Sheet.mdx) | - |
+| [StatCardBox](variables/StatCardBox.mdx) | - |
+| [StatCardRow](variables/StatCardRow.mdx) | - |
+| [StatCard](variables/StatCard.mdx) | - |
+| [ExpanderCell](variables/ExpanderCell.mdx) | - |
+| [InfoHeadCell](variables/InfoHeadCell.mdx) | - |
+| [SortingIndicator](variables/SortingIndicator.mdx) | - |
+| [Table](variables/Table.mdx) | - |
+| [TableBody](variables/TableBody.mdx) | - |
+| [TableCell](variables/TableCell.mdx) | - |
+| [TableContent](variables/TableContent.mdx) | - |
+| [TableHead](variables/TableHead.mdx) | - |
+| [TableHeadCell](variables/TableHeadCell.mdx) | - |
+| [TablePagination](variables/TablePagination.mdx) | - |
+| [TableRowWrapper](variables/TableRowWrapper.mdx) | - |
+| [TableRow](variables/TableRow.mdx) | - |
+| [TableSection](variables/TableSection.mdx) | - |
+| [Tabs](variables/Tabs.mdx) | - |
+| [Tab](variables/Tab.mdx) | - |
+| [Tag](variables/Tag.mdx) | - |
+| [TagList](variables/TagList.mdx) | - |
+| [ThreeColumnSelector](variables/ThreeColumnSelector.mdx) | - |
+| [Toast](variables/Toast.mdx) | - |
+| [User](variables/User.mdx) | - |
+| [UserMenuButton](variables/UserMenuButton.mdx) | - |
+| [UserMenuDropContent](variables/UserMenuDropContent.mdx) | - |
+| [VideoWrapper](variables/VideoWrapper.mdx) | - |
+| [themeValues](variables/themeValues.mdx) | - |
+| [ThemeContext](variables/ThemeContext.mdx) | - |
+| [ThemeConsumer](variables/ThemeConsumer.mdx) | - |
+| [ThemeProvider](variables/ThemeProvider.mdx) | - |
+| [TooltipPositionValue](variables/TooltipPositionValue.mdx) | - |
+
+## Functions
+
+| Function | Description |
+| ------ | ------ |
+| [announce](functions/announce.mdx) | Announce a message to screen readers. Announcer needs to be mounted in the application for this to work. |
+| [useInput](functions/useInput.mdx) | - |
+| [useMultistepIndicator](functions/useMultistepIndicator.mdx) | Convenience hook for using steps in MultistepIndicator |
+| [useGroupedPagesNav](functions/useGroupedPagesNav.mdx) | - |
+| [useTabs](functions/useTabs.mdx) | - |
+| [withTabName](functions/withTabName.mdx) | - |
+| [withTransition](functions/withTransition.mdx) | - |
+| [useBelow360](functions/useBelow360.mdx) | - |
+| [useLandscape](functions/useLandscape.mdx) | - |
+| [useLg](functions/useLg.mdx) | - |
+| [useLgDown](functions/useLgDown.mdx) | - |
+| [useLgUp](functions/useLgUp.mdx) | - |
+| [useMd](functions/useMd.mdx) | - |
+| [useMdDown](functions/useMdDown.mdx) | - |
+| [useMdToXl](functions/useMdToXl.mdx) | - |
+| [useMdUp](functions/useMdUp.mdx) | - |
+| [useMobileDevice](functions/useMobileDevice.mdx) | - |
+| [useMobileDeviceLandscape](functions/useMobileDeviceLandscape.mdx) | - |
+| [useMobileDevicePortrait](functions/useMobileDevicePortrait.mdx) | - |
+| [usePortrait](functions/usePortrait.mdx) | - |
+| [useSm](functions/useSm.mdx) | - |
+| [useSmDown](functions/useSmDown.mdx) | - |
+| [useSmToLg](functions/useSmToLg.mdx) | - |
+| [useSmToXl](functions/useSmToXl.mdx) | - |
+| [useSmUp](functions/useSmUp.mdx) | - |
+| [useTabletDevice](functions/useTabletDevice.mdx) | - |
+| [useTouchDevice](functions/useTouchDevice.mdx) | - |
+| [useXl](functions/useXl.mdx) | - |
+| [useXlDown](functions/useXlDown.mdx) | - |
+| [useXlUp](functions/useXlUp.mdx) | - |
+| [useXs](functions/useXs.mdx) | - |
+| [useBreakpointChange](functions/useBreakpointChange.mdx) | - |
+| [useFocusFrom](functions/useFocusFrom.mdx) | This hook gives the ability to set the focus on an element which is then blurred right away, thereby effectively resetting the focus order. The next focusable element that comes after this element will be focused on the next tab. |
+| [useFocusFromOpened](functions/useFocusFromOpened.mdx) | Use this hook to set the focus point on an element when something becomes opened, e.g. set focus on a panel container or menu container when it becomes visible so that the next time the user hits on the tab key the element that becomes focused on is potentially a tabbable element inside the container element. |
+| [useModal](functions/useModal.mdx) | - |
+| [useModalHandle](functions/useModalHandle.mdx) | - |
+| [useScrollIntoView](functions/useScrollIntoView.mdx) | - |
+| [withColorScheme](functions/withColorScheme.mdx) | - |
+| [sizeToPadding](functions/sizeToPadding.mdx) | - |
+| [isImageSrcString](functions/isImageSrcString.mdx) | - |
+| [isImageSrcEmpty](functions/isImageSrcEmpty.mdx) | - |
+| [isBackgroundImageSrcEmpty](functions/isBackgroundImageSrcEmpty.mdx) | - |
+| [onEnter](functions/onEnter.mdx) | - |
+| [isValidIconName](functions/isValidIconName.mdx) | - |

package/api-docs/enumerations/AvatarType.mdx

@@ -0,0 +1,8 @@
+## Enumeration Members
+
+| Enumeration Member | Value |
+| ------ | ------ |
+| <a id="icon"></a> `Icon` | `"icon"` |
+| <a id="image"></a> `Image` | `"image"` |
+| <a id="initials"></a> `Initials` | `"initials"` |
+| <a id="number"></a> `Number` | `"number"` |

package/api-docs/enumerations/Color.mdx

@@ -0,0 +1,65 @@
+## Enumeration Members
+
+| Enumeration Member | Value |
+| ------ | ------ |
+| <a id="white"></a> `White` | `"#ffffff"` |
+| <a id="blue40"></a> `Blue40` | `"#b1aaff"` |
+| <a id="blue20"></a> `Blue20` | `"#d0ccff"` |
+| <a id="red100"></a> `Red100` | `"#ff7273"` |
+| <a id="green100"></a> `Green100` | `"#0ebec7"` |
+| <a id="blue100"></a> `Blue100` | `"#4b37ff"` |
+| <a id="textlinkbluedarkbg"></a> `TextLinkBlueDarkBg` | `"#00c2ff"` |
+| <a id="textlinkbluehoverdarkbg"></a> `TextLinkBlueHoverDarkBg` | `"#52d7ff"` |
+| <a id="blue50"></a> `Blue50` | `"#a198ff"` |
+| <a id="green90"></a> `Green90` | `"#30c8cf"` |
+| <a id="green80"></a> `Green80` | `"#51d2d8"` |
+| <a id="green60"></a> `Green60` | `"#8de5e9"` |
+| <a id="green40"></a> `Green40` | `"#baf4f6"` |
+| <a id="red90"></a> `Red90` | `"#ff9697"` |
+| <a id="red80"></a> `Red80` | `"#ffb6b7"` |
+| <a id="red70"></a> `Red70` | `"#f24949"` |
+| <a id="red60"></a> `Red60` | `"#ffe3e4"` |
+| <a id="red40"></a> `Red40` | `"#fff7f7"` |
+| <a id="blue90"></a> `Blue90` | `"#5d4cff"` |
+| <a id="signalredhover"></a> `SignalRedHover` | `"#bc1515"` |
+| <a id="deepblue100"></a> `DeepBlue100` | `"#0a2136"` |
+| <a id="neutral100"></a> `Neutral100` | `"#212121"` |
+| <a id="deepblue90"></a> `DeepBlue90` | `"#1e3a54"` |
+| <a id="neutral90"></a> `Neutral90` | `"#323232"` |
+| <a id="signalred"></a> `SignalRed` | `"#e60000"` |
+| <a id="signalgreen"></a> `SignalGreen` | `"#2c8500"` |
+| <a id="joinhover"></a> `JoinHover` | `"#488716"` |
+| <a id="joindisabled"></a> `JoinDisabled` | `"#e3eede"` |
+| <a id="signalgreen130"></a> `SignalGreen130` | `"#205e01"` |
+| <a id="join"></a> `Join` | `"#5eaf1d"` |
+| <a id="deepblue80"></a> `DeepBlue80` | `"#3c5974"` |
+| <a id="neutral80"></a> `Neutral80` | `"#494949"` |
+| <a id="deepblue50"></a> `DeepBlue50` | `"#a5b8ca"` |
+| <a id="neutral50"></a> `Neutral50` | `"#c3c4c5"` |
+| <a id="deepblue40"></a> `DeepBlue40` | `"#c1d1df"` |
+| <a id="neutral40"></a> `Neutral40` | `"#d2d2d2"` |
+| <a id="deepblue30"></a> `DeepBlue30` | `"#d8e3ee"` |
+| <a id="neutral30"></a> `Neutral30` | `"#dcdcdc"` |
+| <a id="deepblue20"></a> `DeepBlue20` | `"#e8f0f8"` |
+| <a id="neutral20"></a> `Neutral20` | `"#e6e6e6"` |
+| <a id="grey"></a> `Grey` | `"#f7f7f7"` |
+| <a id="black"></a> `Black` | `"#111111"` |
+| <a id="deepblue60"></a> `DeepBlue60` | `"#728fac"` |
+| <a id="neutral60"></a> `Neutral60` | `"#989898"` |
+| <a id="deepblue70"></a> `DeepBlue70` | `"#577490"` |
+| <a id="neutral70"></a> `Neutral70` | `"#777777"` |
+| <a id="deepblue10"></a> `DeepBlue10` | `"#f4f7fb"` |
+| <a id="neutral10"></a> `Neutral10` | `"#f2f2f2"` |
+| <a id="deepblue5"></a> `DeepBlue5` | `"#ffffff"` |
+| <a id="neutral5"></a> `Neutral5` | `"#ffffff"` |
+| <a id="textlinkbluewhitebg"></a> `TextLinkBlueWhiteBg` | `"#032fff"` |
+| <a id="textlinkbluehoverwhitebg"></a> `TextLinkBlueHoverWhiteBg` | `"#0023d1"` |
+| <a id="signalorange130"></a> `SignalOrange130` | `"#bc5a00"` |
+| <a id="signalorange80"></a> `SignalOrange80` | `"#fef1e6"` |
+| <a id="green130"></a> `Green130` | `"#00777c"` |
+| <a id="signalorange120"></a> `SignalOrange120` | `"#ff9a3e"` |
+| <a id="signalorange110"></a> `SignalOrange110` | `"#fcc592"` |
+| <a id="signalorange100"></a> `SignalOrange100` | `"#ffd1a7"` |
+| <a id="signalorange90"></a> `SignalOrange90` | `"#fdd8b7"` |
+| <a id="signalorange60"></a> `SignalOrange60` | `"#fff5ed"` |
+| <a id="signalorange40"></a> `SignalOrange40` | `"#fff8f2"` |

package/api-docs/enumerations/FontVariant.mdx

@@ -0,0 +1,20 @@
+## Enumeration Members
+
+| Enumeration Member | Value |
+| ------ | ------ |
+| <a id="h1"></a> `H1` | `"h1"` |
+| <a id="h2"></a> `H2` | `"h2"` |
+| <a id="h3"></a> `H3` | `"h3"` |
+| <a id="h4"></a> `H4` | `"h4"` |
+| <a id="h5"></a> `H5` | `"h5"` |
+| <a id="h6"></a> `H6` | `"h6"` |
+| <a id="bodybold"></a> `BodyBold` | `"bodyBold"` |
+| <a id="button"></a> `Button` | `"button"` |
+| <a id="body"></a> `Body` | `"body"` |
+| <a id="bodylink"></a> `BodyLink` | `"bodyLink"` |
+| <a id="smallbold"></a> `SmallBold` | `"smallBold"` |
+| <a id="small"></a> `Small` | `"small"` |
+| <a id="smalllink"></a> `SmallLink` | `"smallLink"` |
+| <a id="xsmallbold"></a> `XSmallBold` | `"xSmallBold"` |
+| <a id="xsmall"></a> `XSmall` | `"xSmall"` |
+| <a id="xsmalllink"></a> `XSmallLink` | `"xSmallLink"` |

package/api-docs/enumerations/LockStyle.mdx

@@ -0,0 +1,7 @@
+## Enumeration Members
+
+| Enumeration Member | Value |
+| ------ | ------ |
+| <a id="none"></a> `NONE` | `0` |
+| <a id="vertical"></a> `VERTICAL` | `1` |
+| <a id="horizontal"></a> `HORIZONTAL` | `2` |

package/api-docs/enumerations/ModalType.mdx

@@ -0,0 +1,6 @@
+## Enumeration Members
+
+| Enumeration Member | Value |
+| ------ | ------ |
+| <a id="overlay"></a> `Overlay` | `"overlay"` |
+| <a id="positioned"></a> `Positioned` | `"positioned"` |

package/api-docs/enumerations/ProgressBarColor.mdx

@@ -0,0 +1,8 @@
+## Enumeration Members
+
+| Enumeration Member | Value |
+| ------ | ------ |
+| <a id="good"></a> `Good` | `"good"` |
+| <a id="warn"></a> `Warn` | `"warn"` |
+| <a id="danger"></a> `Danger` | `"danger"` |
+| <a id="primary"></a> `Primary` | `"primary"` |

package/api-docs/enumerations/RgbColor.mdx

@@ -0,0 +1,64 @@
+## Enumeration Members
+
+| Enumeration Member | Value |
+| ------ | ------ |
+| <a id="white"></a> `White` | `"255,255,255"` |
+| <a id="blue40"></a> `Blue40` | `"177,170,255"` |
+| <a id="blue20"></a> `Blue20` | `"208,204,255"` |
+| <a id="red100"></a> `Red100` | `"255,114,115"` |
+| <a id="green100"></a> `Green100` | `"14,190,199"` |
+| <a id="blue100"></a> `Blue100` | `"75,55,255"` |
+| <a id="textlinkbluedarkbg"></a> `TextLinkBlueDarkBg` | `"0,194,255"` |
+| <a id="textlinkbluehoverdarkbg"></a> `TextLinkBlueHoverDarkBg` | `"82,215,255"` |
+| <a id="blue50"></a> `Blue50` | `"161,152,255"` |
+| <a id="green90"></a> `Green90` | `"48,200,207"` |
+| <a id="green80"></a> `Green80` | `"81,210,216"` |
+| <a id="green60"></a> `Green60` | `"141,229,233"` |
+| <a id="green40"></a> `Green40` | `"186,244,246"` |
+| <a id="red90"></a> `Red90` | `"255,150,151"` |
+| <a id="red80"></a> `Red80` | `"255,182,183"` |
+| <a id="red60"></a> `Red60` | `"255,227,228"` |
+| <a id="red40"></a> `Red40` | `"255,247,247"` |
+| <a id="blue90"></a> `Blue90` | `"93,76,255"` |
+| <a id="signalredhover"></a> `SignalRedHover` | `"188,21,21"` |
+| <a id="deepblue100"></a> `DeepBlue100` | `"10,33,54"` |
+| <a id="neutral100"></a> `Neutral100` | `"33,33,33"` |
+| <a id="deepblue90"></a> `DeepBlue90` | `"30,58,84"` |
+| <a id="neutral90"></a> `Neutral90` | `"50,50,50"` |
+| <a id="signalred"></a> `SignalRed` | `"230,0,0"` |
+| <a id="signalgreen"></a> `SignalGreen` | `"44,133,0"` |
+| <a id="joinhover"></a> `JoinHover` | `"72,135,22"` |
+| <a id="joindisabled"></a> `JoinDisabled` | `"227,238,222"` |
+| <a id="signalgreen130"></a> `SignalGreen130` | `"32,94,1"` |
+| <a id="join"></a> `Join` | `"94,175,29"` |
+| <a id="deepblue80"></a> `DeepBlue80` | `"60,89,116"` |
+| <a id="neutral80"></a> `Neutral80` | `"73,73,73"` |
+| <a id="deepblue50"></a> `DeepBlue50` | `"165,184,202"` |
+| <a id="neutral50"></a> `Neutral50` | `"195,196,197"` |
+| <a id="deepblue40"></a> `DeepBlue40` | `"193,209,223"` |
+| <a id="neutral40"></a> `Neutral40` | `"210,210,210"` |
+| <a id="deepblue30"></a> `DeepBlue30` | `"216,227,238"` |
+| <a id="neutral30"></a> `Neutral30` | `"220,220,220"` |
+| <a id="deepblue20"></a> `DeepBlue20` | `"232,240,248"` |
+| <a id="neutral20"></a> `Neutral20` | `"230,230,230"` |
+| <a id="grey"></a> `Grey` | `"247,247,247"` |
+| <a id="black"></a> `Black` | `"17,17,17"` |
+| <a id="deepblue60"></a> `DeepBlue60` | `"114,143,172"` |
+| <a id="neutral60"></a> `Neutral60` | `"152,152,152"` |
+| <a id="deepblue70"></a> `DeepBlue70` | `"87,116,144"` |
+| <a id="neutral70"></a> `Neutral70` | `"119,119,119"` |
+| <a id="deepblue10"></a> `DeepBlue10` | `"244,247,251"` |
+| <a id="neutral10"></a> `Neutral10` | `"242,242,242"` |
+| <a id="deepblue5"></a> `DeepBlue5` | `"255,255,255"` |
+| <a id="neutral5"></a> `Neutral5` | `"255,255,255"` |
+| <a id="textlinkbluewhitebg"></a> `TextLinkBlueWhiteBg` | `"3,47,255"` |
+| <a id="textlinkbluehoverwhitebg"></a> `TextLinkBlueHoverWhiteBg` | `"0,35,209"` |
+| <a id="signalorange130"></a> `SignalOrange130` | `"188,90,0"` |
+| <a id="signalorange80"></a> `SignalOrange80` | `"254,241,230"` |
+| <a id="green130"></a> `Green130` | `"0,119,124"` |
+| <a id="signalorange120"></a> `SignalOrange120` | `"255,154,62"` |
+| <a id="signalorange110"></a> `SignalOrange110` | `"252,197,146"` |
+| <a id="signalorange100"></a> `SignalOrange100` | `"255,209,167"` |
+| <a id="signalorange90"></a> `SignalOrange90` | `"253,216,183"` |
+| <a id="signalorange60"></a> `SignalOrange60` | `"255,245,237"` |
+| <a id="signalorange40"></a> `SignalOrange40` | `"255,248,242"` |

package/api-docs/enumerations/StatCardVariant.mdx

@@ -0,0 +1,7 @@
+## Enumeration Members
+
+| Enumeration Member | Value |
+| ------ | ------ |
+| <a id="danger"></a> `Danger` | `"danger"` |
+| <a id="success"></a> `Success` | `"success"` |
+| <a id="warning"></a> `Warning` | `"warning"` |

package/api-docs/enumerations/TestId.mdx

@@ -0,0 +1,45 @@
+## Enumeration Members
+
+| Enumeration Member | Value |
+| ------ | ------ |
+| <a id="badgecounternumber"></a> `BadgeCounterNumber` | `"badge-counter-number"` |
+| <a id="buttonmodalclose"></a> `ButtonModalClose` | `"button-modal-close"` |
+| <a id="buttonthreecolumnselector"></a> `ButtonThreeColumnSelector` | `"button-three-column-selector"` |
+| <a id="buttoncollapsablecontainertoggle"></a> `ButtonCollapsableContainerToggle` | `"button-collapsable-container-toggle"` |
+| <a id="checkboxcheck"></a> `CheckboxCheck` | `"checkbox-check"` |
+| <a id="confirmablemultiselectconfirm"></a> `ConfirmableMultiselectConfirm` | `"confirmable-multiselect-confirm"` |
+| <a id="headercore"></a> `HeaderCore` | `"header-core"` |
+| <a id="headercoreenhancers"></a> `HeaderCoreEnhancers` | `"header-core-enhancers"` |
+| <a id="headercoredivider"></a> `HeaderCoreDivider` | `"header-core-divider"` |
+| <a id="linestep"></a> `LineStep` | `"line-step"` |
+| <a id="inputclearbutton"></a> `InputClearButton` | `"input-clear-button"` |
+| <a id="modalmask"></a> `ModalMask` | `"modal-mask"` |
+| <a id="multiselectview"></a> `MultiselectView` | `"multiselect-view"` |
+| <a id="multiselectitem"></a> `MultiselectItem` | `"multiselect-item"` |
+| <a id="multistepindicator"></a> `MultistepIndicator` | `"multistep-indicator"` |
+| <a id="multistepindicatorbutton"></a> `MultistepIndicatorButton` | `"multistep-indicator-button"` |
+| <a id="notificationtooltipinner"></a> `NotificationTooltipInner` | `"notification-tooltip-inner"` |
+| <a id="notificationtooltipclose"></a> `NotificationTooltipClose` | `"notification-tooltip-close"` |
+| <a id="notificationtooltipheader"></a> `NotificationTooltipHeader` | `"notification-tooltip-header"` |
+| <a id="notificationtooltiptext"></a> `NotificationTooltipText` | `"notification-tooltip-text"` |
+| <a id="notificationtooltipcta"></a> `NotificationTooltipCta` | `"notification-tooltip-cta"` |
+| <a id="postmeetingheader"></a> `PostMeetingHeader` | `"PostMeetingHeader"` |
+| <a id="sectionaccordiondetails"></a> `SectionAccordionDetails` | `"section-accordion-details"` |
+| <a id="sectionaccordionsummary"></a> `SectionAccordionSummary` | `"section-accordion-summary"` |
+| <a id="selecticon"></a> `SelectIcon` | `"select-icon"` |
+| <a id="selectchevron"></a> `SelectChevron` | `"select-chevron"` |
+| <a id="selectview"></a> `SelectView` | `"select-view"` |
+| <a id="stepnumber"></a> `StepNumber` | `"step-number"` |
+| <a id="stepnumberstring"></a> `StepNumberString` | `"step-number-string"` |
+| <a id="stepnumbercheckmark"></a> `StepNumberCheckmark` | `"step-number-checkmark"` |
+| <a id="tab"></a> `Tab` | `"tab"` |
+| <a id="tooltipinner"></a> `TooltipInner` | `"tooltip-inner"` |
+| <a id="userview"></a> `UserView` | `"user-view"` |
+| <a id="privacypolicylink"></a> `PrivacyPolicyLink` | `"privacy-policy-link"` |
+| <a id="termsofservicelink"></a> `TermsOfServiceLink` | `"terms-of-service-link"` |
+| <a id="version"></a> `Version` | `"version"` |
+| <a id="numberstepincrement"></a> `NumberStepIncrement` | `"number-step-increment"` |
+| <a id="numberstepdecrement"></a> `NumberStepDecrement` | `"number-step-decrement"` |
+| <a id="numberstepinput"></a> `NumberStepInput` | `"number-step-input"` |
+| <a id="stepnumberwarning"></a> `StepNumberWarning` | `"StepNumberWarning"` |
+| <a id="simplebarscrollable"></a> `SimpleBarScrollable` | `"simple-bar-scrollable"` |

package/api-docs/functions/announce.mdx

@@ -0,0 +1,21 @@
+```ts
+function announce(
+   message, 
+   politeness, 
+   timeout): void;
+```
+
+Announce a message to screen readers.
+Announcer needs to be mounted in the application for this to work.
+
+## Parameters
+
+| Parameter | Type | Default value | Description |
+| ------ | ------ | ------ | ------ |
+| `message` | `ReactNode` | `undefined` | The message to announce. |
+| `politeness` | `"assertive"` \| `"polite"` | `'polite'` | The politeness level of the announcement. |
+| `timeout` | `number` | `5000` | The time in milliseconds util the message is removed from area-live region. |
+
+## Returns
+
+`void`

package/api-docs/functions/isBackgroundImageSrcEmpty.mdx

@@ -0,0 +1,13 @@
+```ts
+function isBackgroundImageSrcEmpty(backgroundImageSrc): boolean;
+```
+
+## Parameters
+
+| Parameter | Type |
+| ------ | ------ |
+| `backgroundImageSrc` | \| [`BackgroundImageSrc`](../type-aliases/BackgroundImageSrc.mdx) \| `undefined` |
+
+## Returns
+
+`boolean`

package/api-docs/functions/isImageSrcEmpty.mdx

@@ -0,0 +1,13 @@
+```ts
+function isImageSrcEmpty(imageSrc): boolean;
+```
+
+## Parameters
+
+| Parameter | Type |
+| ------ | ------ |
+| `imageSrc` | [`ImageSrc`](../type-aliases/ImageSrc.mdx) \| `undefined` |
+
+## Returns
+
+`boolean`