@kaizen/components 1.81.1 → 2.0.0

package/dist/esm/src/Card/Card.mjs

@@ -7,25 +7,24 @@ import styles from './Card.module.css.mjs';
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094938/Card Guidance} |
- * {@link https://cultureamp.design/?path=/story/components-card--docs Storybook}
+ * {@link https://cultureamp.design/?path=/docs/components-card-api-specification--docs Storybook}
  */
 const Card = /*#__PURE__*/function () {
   const Card = function (_a) {
     var children = _a.children,
       _b = _a.tag,
       tag = _b === void 0 ? 'div' : _b,
-      variant = _a.variant,
       _c = _a.color,
       color = _c === void 0 ? 'white' : _c,
       _d = _a.isElevated,
       isElevated = _d === void 0 ? false : _d,
       classNameOverride = _a.classNameOverride,
       isAiLoading = _a.isAiLoading,
-      props = __rest(_a, ["children", "tag", "variant", "color", "isElevated", "classNameOverride", "isAiLoading"]);
+      props = __rest(_a, ["children", "tag", "color", "isElevated", "classNameOverride", "isAiLoading"]);
     var Element = tag;
     var animationClass = useExitingAnimation(isAiLoading, sharedAiStyles.aiMomentLoading, sharedAiStyles.aiMomentExiting, 500);
     return /*#__PURE__*/React.createElement(Element, __assign({
-      className: classnames(styles.wrapper, variant ? styles[variant] : styles[color], isElevated && styles.elevated, isAiLoading !== undefined && sharedAiStyles.aiMoment, isAiLoading !== undefined && animationClass, classNameOverride)
+      className: classnames(styles.wrapper, styles[color], isElevated && styles.elevated, isAiLoading !== undefined && sharedAiStyles.aiMoment, isAiLoading !== undefined && animationClass, classNameOverride)
     }, props), isAiLoading !== undefined && (/*#__PURE__*/React.createElement("div", {
       "aria-hidden": true,
       className: sharedAiStyles.aiMomentBackground

package/dist/esm/src/Card/Card.module.css.mjs

@@ -8,13 +8,6 @@ var styles = {
   "purple": "Card-module_purple__cp6Bx",
   "red": "Card-module_red__Ux35X",
   "white": "Card-module_white__LjMQF",
-  "yellow": "Card-module_yellow__A3F9a",
-  "default": "Card-module_default__c8nG0",
-  "informative": "Card-module_informative__6la3C",
-  "positive": "Card-module_positive__waT0O",
-  "cautionary": "Card-module_cautionary__Fxfva",
-  "destructive": "Card-module_destructive__OqDdg",
-  "assertive": "Card-module_assertive__5ntbN",
-  "highlight": "Card-module_highlight__QJ5hP"
+  "yellow": "Card-module_yellow__A3F9a"
 };
 export { styles as default };

package/dist/esm/src/Checkbox/Checkbox/Checkbox.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import { Icon } from '../../__next__/Icon/Icon.mjs';
+import { Icon } from '../../Icon/Icon.mjs';
 import styles from './Checkbox.module.scss.mjs';
 var renderCheckOrMixedIcon = function (status, reversed) {
   if (status === 'off') return;

package/dist/esm/src/ClearButton/ClearButton.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import { Icon } from '../__next__/Icon/Icon.mjs';
+import { Icon } from '../Icon/Icon.mjs';
 import styles from './ClearButton.module.scss.mjs';
 const ClearButton = /*#__PURE__*/function () {
   const ClearButton = function (_a) {

package/dist/esm/src/Collapsible/Collapsible/Collapsible.mjs

@@ -2,10 +2,10 @@ import { __rest, __assign } from 'tslib';
 import React, { useState, useId } from 'react';
 import classnames from 'classnames';
 import AnimateHeight from 'react-animate-height';
-import '../../Button/Button/Button.mjs';
-import { IconButton } from '../../Button/IconButton/IconButton.mjs';
+import '../../ButtonV1/Button/Button.mjs';
+import { IconButton } from '../../ButtonV1/IconButton/IconButton.mjs';
 import { Heading } from '../../Heading/Heading.mjs';
-import { Icon } from '../../__next__/Icon/Icon.mjs';
+import { Icon } from '../../Icon/Icon.mjs';
 import styles from './Collapsible.module.scss.mjs';
 const Collapsible = /*#__PURE__*/function () {
   const Collapsible = function (_a) {

package/dist/esm/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import { Icon } from '../../__next__/Icon/Icon.mjs';
+import { Icon } from '../../Icon/Icon.mjs';
 import { isRefObject } from '../../utils/isRefObject.mjs';
 import { DateInput } from '../DateInput/DateInput.mjs';
 import styles from './DateInputWithIconButton.module.scss.mjs';

package/dist/esm/src/DateRangePicker/DateRangePicker.mjs

@@ -11,9 +11,9 @@ import 'date-fns';
 import { isDisabledDate } from '../Calendar/utils/isDisabledDate.mjs';
 import { CalendarPopover } from '../Calendar/CalendarPopover/CalendarPopover.mjs';
 import { LegacyCalendarRange } from '../Calendar/LegacyCalendarRange/LegacyCalendarRange.mjs';
+import { Icon } from '../Icon/Icon.mjs';
 import { Label } from '../Label/Label.mjs';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
-import { Icon } from '../__next__/Icon/Icon.mjs';
 import styles from './DateRangePicker.module.scss.mjs';
 
 /**

package/dist/esm/src/EmptyState/EmptyState.mjs

@@ -4,22 +4,14 @@ import classnames from 'classnames';
 import { Heading } from '../Heading/Heading.mjs';
 import '../Illustration/subcomponents/Base/Base.mjs';
 import '../Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.mjs';
-import { EmptyStatesNegative, EmptyStatesNeutral, EmptyStatesPositive, EmptyStatesInformative } from '../Illustration/Scene/Scene.mjs';
+import { EmptyStatesNeutral, EmptyStatesInformative, EmptyStatesNegative, EmptyStatesPositive } from '../Illustration/Scene/Scene.mjs';
 import { Text } from '../Text/Text.mjs';
 import styles from './EmptyState.module.css.mjs';
 var ILLUSTRATIONS = {
   'success': EmptyStatesPositive,
   'warning': EmptyStatesNegative,
   'informative': EmptyStatesInformative,
-  'expert-advice': EmptyStatesNeutral,
-  /** @deprecated Replaced by success */
-  'positive': EmptyStatesPositive,
-  /** @deprecated Replaced by expert-advice */
-  'neutral': EmptyStatesNeutral,
-  /** @deprecated Replaced by warning */
-  'negative': EmptyStatesNegative,
-  /** @deprecated Replaced by warning */
-  'action': EmptyStatesNegative
+  'expert-advice': EmptyStatesNeutral
 };
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094098/Empty+State Guidance} |
@@ -29,11 +21,9 @@ const EmptyState = /*#__PURE__*/function () {
   const EmptyState = function (_a) {
     var children = _a.children,
       id = _a.id,
-      illustrationType = _a.illustrationType,
       _b = _a.variant,
-      variant = _b === void 0 ? 'informative' : _b;
-    _a.layoutContext;
-    var headingProps = _a.headingProps,
+      variant = _b === void 0 ? 'informative' : _b,
+      headingProps = _a.headingProps,
       bodyText = _a.bodyText,
       straightCorners = _a.straightCorners,
       _c = _a.isAnimated,
@@ -41,10 +31,10 @@ const EmptyState = /*#__PURE__*/function () {
       _d = _a.loop,
       loop = _d === void 0 ? false : _d,
       classNameOverride = _a.classNameOverride,
-      props = __rest(_a, ["children", "id", "illustrationType", "variant", "layoutContext", "headingProps", "bodyText", "straightCorners", "isAnimated", "loop", "classNameOverride"]);
-    var IllustrationComponent = ILLUSTRATIONS[illustrationType !== null && illustrationType !== void 0 ? illustrationType : variant];
+      props = __rest(_a, ["children", "id", "variant", "headingProps", "bodyText", "straightCorners", "isAnimated", "loop", "classNameOverride"]);
+    var IllustrationComponent = ILLUSTRATIONS[variant];
     return /*#__PURE__*/React.createElement("div", __assign({
-      className: classnames(styles.container, illustrationType ? styles[illustrationType] : styles[variant], straightCorners && styles.straightCorners, classNameOverride),
+      className: classnames(styles.container, styles[variant], straightCorners && styles.straightCorners, classNameOverride),
       id: id
     }, props), /*#__PURE__*/React.createElement("div", {
       className: styles.content

package/dist/esm/src/EmptyState/EmptyState.module.css.mjs

@@ -1,10 +1,6 @@
 var styles = {
   "container": "EmptyState-module_container__0kOpV",
   "straightCorners": "EmptyState-module_straightCorners__BNh-9",
-  "positive": "EmptyState-module_positive__Z2a3J",
-  "negative": "EmptyState-module_negative__mSmjN",
-  "action": "EmptyState-module_action__l1243",
-  "neutral": "EmptyState-module_neutral__i9IVq",
   "success": "EmptyState-module_success__w9nvN",
   "warning": "EmptyState-module_warning__vdEBx",
   "informative": "EmptyState-module_informative__aeHUD",

package/dist/esm/src/ErrorPage/ErrorPage.mjs

@@ -3,11 +3,11 @@ import React from 'react';
 import { useIntl, FormattedMessage } from '@cultureamp/i18n-react-intl';
 import classnames from 'classnames';
 import { BrandMoment } from '../BrandMoment/BrandMoment.mjs';
+import { Icon } from '../Icon/Icon.mjs';
 import '../Illustration/subcomponents/Base/Base.mjs';
 import '../Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.mjs';
 import { BrandMomentError } from '../Illustration/Scene/Scene.mjs';
 import { Text } from '../Text/Text.mjs';
-import { Icon } from '../__next__/Icon/Icon.mjs';
 import { useErrorMessages } from './hooks/useErrorMessages.mjs';
 import styles from './ErrorPage.module.scss.mjs';
 var getMailToHref = function (code) {

package/dist/esm/src/FieldMessage/FieldMessage.mjs

@@ -1,8 +1,8 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
+import { Icon } from '../Icon/Icon.mjs';
 import { Text } from '../Text/Text.mjs';
-import { Icon } from '../__next__/Icon/Icon.mjs';
 import styles from './FieldMessage.module.scss.mjs';
 const FieldMessage = /*#__PURE__*/function () {
   const FieldMessage = function (_a) {

package/dist/esm/src/Filter/FilterBar/context/FilterBarContext.mjs

@@ -52,15 +52,6 @@ var FilterBarProvider = function (_a) {
     getActiveFilterValues: function () {
       return values;
     },
-    toggleOpenFilter: function (id, isOpen) {
-      dispatch({
-        type: 'update_single_filter',
-        id: id,
-        data: {
-          isOpen: isOpen
-        }
-      });
-    },
     setFilterOpenState: function (id, isOpen) {
       dispatch({
         type: 'update_single_filter',

package/dist/esm/src/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.mjs

@@ -1,9 +1,9 @@
 import React, { useRef, useEffect } from 'react';
 import { useIntl } from '@cultureamp/i18n-react-intl';
-import { Button } from '../../../../Button/Button/Button.mjs';
-import '../../../../Button/IconButton/IconButton.mjs';
-import { Menu, MenuList, MenuItem } from '../../../../Menu/index.mjs';
-import { Icon } from '../../../../__next__/Icon/Icon.mjs';
+import { Button } from '../../../../ButtonV1/Button/Button.mjs';
+import '../../../../ButtonV1/IconButton/IconButton.mjs';
+import { Icon } from '../../../../Icon/Icon.mjs';
+import { Menu, MenuList, MenuItem } from '../../../../MenuV1/index.mjs';
 import { useFilterBarContext } from '../../context/FilterBarContext.mjs';
 const AddFiltersMenu = /*#__PURE__*/function () {
   const AddFiltersMenu = function () {

package/dist/esm/src/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.mjs

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useIntl } from '@cultureamp/i18n-react-intl';
 import classnames from 'classnames';
-import { Button } from '../../../../Button/Button/Button.mjs';
-import '../../../../Button/IconButton/IconButton.mjs';
+import { Button } from '../../../../ButtonV1/Button/Button.mjs';
+import '../../../../ButtonV1/IconButton/IconButton.mjs';
 import { useFilterBarContext } from '../../context/FilterBarContext.mjs';
 import styles from './ClearAllButton.module.css.mjs';
 const ClearAllButton = /*#__PURE__*/function () {

package/dist/esm/src/Filter/FilterButton/FilterButton/FilterButton.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import classnames from 'classnames';
-import { Icon } from '../../../__next__/Icon/Icon.mjs';
+import { Icon } from '../../../Icon/Icon.mjs';
 import { isRefObject } from '../../../utils/isRefObject.mjs';
 import { FilterButtonBase } from '../subcomponents/FilterButtonBase/FilterButtonBase.mjs';
 import styles from './FilterButton.module.css.mjs';

package/dist/esm/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.mjs

@@ -3,8 +3,8 @@ import React, { forwardRef } from 'react';
 import { useIntl } from '@cultureamp/i18n-react-intl';
 import classnames from 'classnames';
 import { ButtonGroup } from '../../../ButtonGroup/ButtonGroup.mjs';
-import { Tooltip } from '../../../Tooltip/Tooltip.mjs';
-import { Icon } from '../../../__next__/Icon/Icon.mjs';
+import { Icon } from '../../../Icon/Icon.mjs';
+import { Tooltip } from '../../../TooltipV1/Tooltip.mjs';
 import { isRefObject } from '../../../utils/isRefObject.mjs';
 import { FilterButton } from '../FilterButton/FilterButton.mjs';
 import { FilterButtonBase } from '../subcomponents/FilterButtonBase/FilterButtonBase.mjs';

package/dist/esm/src/Filter/FilterMultiSelect/subcomponents/LoadMoreButton/LoadMoreButton.mjs

@@ -1,7 +1,7 @@
 import { __assign } from 'tslib';
 import React from 'react';
-import { Button } from '../../../../Button/Button/Button.mjs';
-import '../../../../Button/IconButton/IconButton.mjs';
+import { Button } from '../../../../ButtonV1/Button/Button.mjs';
+import '../../../../ButtonV1/IconButton/IconButton.mjs';
 import styles from './LoadMoreButton.module.scss.mjs';
 const LoadMoreButton = /*#__PURE__*/function () {
   const LoadMoreButton = function (props) {

package/dist/esm/src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.mjs

@@ -6,8 +6,8 @@ import { useOption } from '@react-aria/listbox';
 import { mergeProps } from '@react-aria/utils';
 import classnames from 'classnames';
 import { Badge } from '../../../../Badge/Badge.mjs';
+import { Icon } from '../../../../Icon/Icon.mjs';
 import { VisuallyHidden } from '../../../../VisuallyHidden/VisuallyHidden.mjs';
-import { Icon } from '../../../../__next__/Icon/Icon.mjs';
 import '../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';
 import { useSelectionContext } from '../../context/SelectionProvider/SelectionProvider.mjs';
 import styles from './MultiSelectOption.module.scss.mjs';

package/dist/esm/src/Filter/FilterSelect/FilterSelect.mjs

@@ -5,18 +5,18 @@ import { useSelect, HiddenSelect } from '@react-aria/select';
 import { useSelectState } from '@react-stately/select';
 import { Filter } from '../Filter/Filter.mjs';
 import { FilterContents } from '../Filter/subcomponents/FilterContents/FilterContents.mjs';
-import { SelectProvider } from '../../__next__/Select/context/SelectContext.mjs';
-import '../../__next__/Select/subcomponents/ListBox/ListBox.mjs';
-import { ListBoxSection } from '../../__next__/Select/subcomponents/ListBoxSection/ListBoxSection.mjs';
-import { ListItem } from '../../__next__/Select/subcomponents/ListItem/ListItem.mjs';
-import '../../__next__/Select/subcomponents/ListItems/ListItems.mjs';
-import { Option } from '../../__next__/Select/subcomponents/Option/Option.mjs';
-import '../../__next__/Select/subcomponents/Overlay/Overlay.mjs';
-import { SectionDivider } from '../../__next__/Select/subcomponents/SectionDivider/SectionDivider.mjs';
-import { SelectPopoverContents } from '../../__next__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.mjs';
-import '../../__next__/Select/subcomponents/SelectToggle/SelectToggle.mjs';
-import { getDisabledKeysFromItems } from '../../__next__/Select/utils/getDisabledKeysFromItems.mjs';
-import { transformSelectItemToCollectionElement } from '../../__next__/Select/utils/transformSelectItemToCollectionElement.mjs';
+import { SelectProvider } from '../../SingleSelect/context/SelectContext.mjs';
+import '../../SingleSelect/subcomponents/ListBox/ListBox.mjs';
+import { ListBoxSection } from '../../SingleSelect/subcomponents/ListBoxSection/ListBoxSection.mjs';
+import { ListItem } from '../../SingleSelect/subcomponents/ListItem/ListItem.mjs';
+import '../../SingleSelect/subcomponents/ListItems/ListItems.mjs';
+import { Option } from '../../SingleSelect/subcomponents/Option/Option.mjs';
+import '../../SingleSelect/subcomponents/Overlay/Overlay.mjs';
+import { SectionDivider } from '../../SingleSelect/subcomponents/SectionDivider/SectionDivider.mjs';
+import { SelectPopoverContents } from '../../SingleSelect/subcomponents/SelectPopoverContents/SelectPopoverContents.mjs';
+import '../../SingleSelect/subcomponents/SelectToggle/SelectToggle.mjs';
+import { getDisabledKeysFromItems } from '../../SingleSelect/utils/getDisabledKeysFromItems.mjs';
+import { transformSelectItemToCollectionElement } from '../../SingleSelect/utils/transformSelectItemToCollectionElement.mjs';
 import styles from './FilterSelect.module.css.mjs';
 const FilterSelect = /*#__PURE__*/function () {
   const FilterSelect = function (_a) {

package/dist/esm/src/GuidanceBlock/GuidanceBlock.mjs

@@ -1,14 +1,14 @@
 import { __rest, __assign } from 'tslib';
 import React, { useState } from 'react';
 import classnames from 'classnames';
-import { Button } from '../Button/Button/Button.mjs';
-import '../Button/IconButton/IconButton.mjs';
+import { Button } from '../ButtonV1/Button/Button.mjs';
+import '../ButtonV1/IconButton/IconButton.mjs';
 import { Heading } from '../Heading/Heading.mjs';
+import { Icon } from '../Icon/Icon.mjs';
 import { Text } from '../Text/Text.mjs';
-import { Tooltip } from '../Tooltip/Tooltip.mjs';
+import { Tooltip } from '../TooltipV1/Tooltip.mjs';
 import { useMediaQueries } from '../utils/useMediaQueries.mjs';
 import styles from './GuidanceBlock.module.css.mjs';
-import { Icon } from '../__next__/Icon/Icon.mjs';
 var WithTooltip = function (_a) {
   var tooltipProps = _a.tooltipProps,
     children = _a.children;

package/dist/esm/src/Icon/Icon.module.css.mjs

@@ -0,0 +1,9 @@
+var styles = {
+  "material-symbols-outlined": "Icon-module_material-symbols-outlined__9Sv7S",
+  "icon": "Icon-module_icon__axtlp",
+  "filled": "Icon-module_filled__N1VVu",
+  "shouldMirrorInRTL": "Icon-module_shouldMirrorInRTL__bKmbn",
+  "iconLTR": "Icon-module_iconLTR__jvIwB",
+  "iconRTL": "Icon-module_iconRTL__16aXy"
+};
+export { styles as default };

package/dist/esm/src/IconV1/subcomponents/SVG/SVG.module.scss.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "icon": "SVG-module_icon__EKRwX",
+  "inheritSize": "SVG-module_inheritSize__3-DrP"
+};
+export { styles as default };

package/dist/esm/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.mjs

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect } from 'react';
 import classnames from 'classnames';
-import '../../../Button/Button/Button.mjs';
-import { IconButton } from '../../../Button/IconButton/IconButton.mjs';
+import '../../../ButtonV1/Button/Button.mjs';
+import { IconButton } from '../../../ButtonV1/IconButton/IconButton.mjs';
 import { assetUrl } from '../../../utils/hostedAssets.mjs';
 import { canPlayWebm } from '../../utils/canPlayWebm.mjs';
 import { usePausePlay } from '../../utils/usePausePlay.mjs';

package/dist/esm/src/Illustration/utils/usePausePlay.mjs

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Icon } from '../../__next__/Icon/Icon.mjs';
+import { Icon } from '../../Icon/Icon.mjs';
 var usePausePlay = function (videoRef) {
   var _a = useState(false),
     isPaused = _a[0],

package/dist/esm/src/Input/InputSearch/InputSearch.mjs

@@ -3,12 +3,12 @@ import React, { useRef } from 'react';
 import { useIntl } from '@cultureamp/i18n-react-intl';
 import classnames from 'classnames';
 import { ClearButton } from '../../ClearButton/ClearButton.mjs';
+import { Icon } from '../../Icon/Icon.mjs';
 import '../../Loading/LoadingGraphic/LoadingGraphic.mjs';
 import '../../Loading/LoadingHeading/LoadingHeading.mjs';
 import '../../Loading/LoadingInput/LoadingInput.mjs';
 import '../../Loading/LoadingParagraph/LoadingParagraph.mjs';
 import { LoadingSpinner } from '../../Loading/LoadingSpinner/LoadingSpinner.mjs';
-import { Icon } from '../../__next__/Icon/Icon.mjs';
 import styles from './InputSearch.module.scss.mjs';
 const InputSearch = /*#__PURE__*/function () {
   const InputSearch = function (props) {

package/dist/esm/src/LikertScale/LikertScale.mjs

@@ -0,0 +1,148 @@
+import React, { useState, createRef } from 'react';
+import classnames from 'classnames';
+import { FieldMessage } from '../FieldMessage/FieldMessage.mjs';
+import { Icon } from '../Icon/Icon.mjs';
+import { Text } from '../Text/Text.mjs';
+import determineSelectionFromKeyPress from './utils/determineSelectionFromKeyPress.mjs';
+import styles from './LikertScale.module.scss.mjs';
+var SelectedItemIcon = function () {
+  return /*#__PURE__*/React.createElement(Icon, {
+    name: "check",
+    isPresentational: true,
+    className: styles.check
+  });
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060201/Likert+Scale Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-likertscale--docs Storybook}
+ */
+var LikertScale = function (_a) {
+  var _b, _c;
+  var scale = _a.scale,
+    selectedItem = _a.selectedItem,
+    reversed = _a.reversed,
+    _d = _a.colorSchema,
+    colorSchema = _d === void 0 ? 'classical' : _d,
+    dataTestId = _a["data-testid"],
+    onSelect = _a.onSelect,
+    validationMessage = _a.validationMessage,
+    status = _a.status,
+    labelId = _a.labelId,
+    isRequired = _a.isRequired;
+  var _e = useState(null),
+    hoveredItem = _e[0],
+    setHoveredItem = _e[1];
+  var itemRefs = scale.map(function (s) {
+    return {
+      value: s.value,
+      ref: /*#__PURE__*/createRef()
+    };
+  });
+  var handleRadioClick = function (item) {
+    var _a;
+    // Is this a click on the item that is currently selected?
+    var isClickOnSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === item.value;
+    // Grab "Not rated" state item from the scale, its value is -1
+    var notYetRated = (_a = scale.find(function (s) {
+      return s.value === -1;
+    })) !== null && _a !== void 0 ? _a : null;
+    // Clear or set new selection
+    var newItem = isClickOnSelectedItem ? notYetRated : item;
+    onSelect(newItem);
+    setHoveredItem(null);
+  };
+  /**
+   * Because the radios have been built with divs, we need to add the keyboard functionality manually
+   */
+  var handleKeyDown = function (event, focusedItem) {
+    var _a, _b, _c;
+    var newPosition = determineSelectionFromKeyPress(event.keyCode, selectedItem, focusedItem);
+    if (newPosition) {
+      event.preventDefault();
+      onSelect((_a = scale.find(function (s) {
+        return s.value === newPosition;
+      })) !== null && _a !== void 0 ? _a : null);
+      // Update focus
+      var itemRef = itemRefs.find(function (item) {
+        return item.value === newPosition;
+      });
+      (_c = (_b = itemRef === null || itemRef === void 0 ? void 0 : itemRef.ref) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.focus();
+    }
+  };
+  var legend = (_c = (_b = hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.label) !== null && _b !== void 0 ? _b : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) !== null && _c !== void 0 ? _c : 'Not rated';
+  var shouldDisplayValidationMessage = status !== 'default' && validationMessage !== undefined;
+  var validationMessageId = shouldDisplayValidationMessage ? "".concat(labelId, "-field-validation-message") : undefined;
+  var isRated = selectedItem && selectedItem.value > 0;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(styles.container, isRated && styles.rated, reversed && [styles.reversed], hoveredItem !== null && styles.hovered),
+    "aria-labelledby": isRequired ? "".concat(labelId) : labelId,
+    role: "radiogroup",
+    tabIndex: -1,
+    "aria-describedby": validationMessageId,
+    "data-testid": dataTestId,
+    "aria-required": isRequired
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.legend,
+    "data-testid": dataTestId && "".concat(dataTestId, "-legend")
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "small",
+    color: reversed ? 'white' : 'dark'
+  }, legend)), /*#__PURE__*/React.createElement("div", {
+    className: classnames(styles.itemContainer, isRated && styles.rated, reversed && styles.reversed)
+  }, scale.map(function (item) {
+    if (item.value <= 0) {
+      return;
+    }
+    var isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === item.value;
+    var itemRef = itemRefs.find(function (i) {
+      return item.value === i.value;
+    });
+    // Make control tabbable
+    var tabIndex = 0;
+    // Unless.. there's an item selected and it's not this one
+    if (selectedItem && selectedItem.value > 0 && selectedItem.value !== item.value) {
+      tabIndex = -1;
+    }
+    var isSelected = selectedItem && item.value <= (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) && !hoveredItem;
+    var isSuggested = hoveredItem && hoveredItem.value >= item.value;
+    var isUnselected = selectedItem && selectedItem.value < item.value;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.likertItem, colorSchema == 'blue' ? styles.blueColorSchema : styles.classicalColorSchema, styles["likertItem".concat(item.value)], isSelected && styles.selected, isSuggested && styles.suggested, isUnselected && styles.unselected),
+      key: item.value,
+      "data-testid": dataTestId && "".concat(dataTestId, "-item-").concat(item.value),
+      onClick: function () {
+        return handleRadioClick(item);
+      },
+      onMouseEnter: function () {
+        return setHoveredItem(item);
+      },
+      onMouseLeave: function () {
+        return setHoveredItem(null);
+      },
+      onKeyDown: function (event) {
+        return handleKeyDown(event, item);
+      },
+      onFocus: function () {
+        return setHoveredItem(item);
+      },
+      onBlur: function () {
+        return setHoveredItem(null);
+      },
+      role: "radio",
+      "aria-label": item.label,
+      "aria-checked": isSelectedItem,
+      "aria-posinset": item.value,
+      "aria-setsize": 5,
+      tabIndex: tabIndex,
+      ref: itemRef === null || itemRef === void 0 ? void 0 : itemRef.ref
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.likertItemFill, styles["field".concat(item.value)], isSelectedItem && styles.pop)
+    }), isSelectedItem ? /*#__PURE__*/React.createElement(SelectedItemIcon, null) : null);
+  })), shouldDisplayValidationMessage && (/*#__PURE__*/React.createElement(FieldMessage, {
+    id: validationMessageId,
+    message: validationMessage,
+    status: status,
+    reversed: reversed
+  })));
+};
+export { LikertScale };

package/dist/esm/src/LikertScale/LikertScale.module.scss.mjs

@@ -0,0 +1,26 @@
+var styles = {
+  "container": "LikertScale-module_container__Bukf-",
+  "rated": "LikertScale-module_rated__ROxnc",
+  "likertItem": "LikertScale-module_likertItem__eP1CK",
+  "unselected": "LikertScale-module_unselected__u0860",
+  "likertItemFill": "LikertScale-module_likertItemFill__ezezf",
+  "reversed": "LikertScale-module_reversed__1Qv-P",
+  "likertItem4": "LikertScale-module_likertItem4__zCn-z",
+  "likertItem5": "LikertScale-module_likertItem5__zlLeK",
+  "check": "LikertScale-module_check__OQ6Vg",
+  "suggested": "LikertScale-module_suggested__Coarq",
+  "itemContainer": "LikertScale-module_itemContainer__HP9-l",
+  "legend": "LikertScale-module_legend__vrqgt",
+  "classicalColorSchema": "LikertScale-module_classicalColorSchema__RQxlf",
+  "field1": "LikertScale-module_field1__Jn1Bm",
+  "selected": "LikertScale-module_selected__p-uBW",
+  "field2": "LikertScale-module_field2__1UNws",
+  "field3": "LikertScale-module_field3__19aIY",
+  "field4": "LikertScale-module_field4__SMr6O",
+  "field5": "LikertScale-module_field5__XzwLL",
+  "blueColorSchema": "LikertScale-module_blueColorSchema__UxEqp",
+  "pop": "LikertScale-module_pop__-d3Gv",
+  "likertItem1": "LikertScale-module_likertItem1__hUT3Q",
+  "hovered": "LikertScale-module_hovered__DDQ7g"
+};
+export { styles as default };

package/dist/esm/src/LinkButton/LinkButton.mjs

@@ -8,10 +8,10 @@ import '../Loading/LoadingInput/LoadingInput.mjs';
 import '../Loading/LoadingParagraph/LoadingParagraph.mjs';
 import '../Loading/LoadingSpinner/LoadingSpinner.mjs';
 import '../VisuallyHidden/VisuallyHidden.mjs';
-import { ButtonContent } from '../__next__/Button/subcomponents/ButtonContent/ButtonContent.mjs';
+import { ButtonContent } from '../Button/subcomponents/ButtonContent/ButtonContent.mjs';
 import { useReversedColors } from '../utils/ReversedColors/ReversedColors.mjs';
 import { mergeClassNames } from '../utils/mergeClassNames.mjs';
-import buttonStyles from '../__next__/Button/Button.module.css.mjs';
+import buttonStyles from '../Button/Button.module.css.mjs';
 import styles from './LinkButton.module.css.mjs';
 const LinkButton = /*#__PURE__*/function () {
   const LinkButton = /*#__PURE__*/forwardRef(function (_a, ref) {