@kaizen/components 2.4.0 → 2.5.0

package/dist/cjs/src/Heading/Heading.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var Heading_module = require('./Heading.module.scss.cjs');
+var Heading_module = require('./Heading.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/Heading/Heading.module.css.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var styles = {
+  "heading": "Heading-module_heading__6D0PM",
+  "display-0": "Heading-module_display-0__Dmiig",
+  "composable-header-title": "Heading-module_composable-header-title__CPBzk",
+  "heading-1": "Heading-module_heading-1__-GXEH",
+  "heading-2": "Heading-module_heading-2__LiRAV",
+  "heading-3": "Heading-module_heading-3__nVAgQ",
+  "heading-4": "Heading-module_heading-4__ESVT7",
+  "heading-5": "Heading-module_heading-5__zzZxI",
+  "heading-6": "Heading-module_heading-6__-JvYA",
+  "dark": "Heading-module_dark__vO-Uw",
+  "dark-reduced-opacity": "Heading-module_dark-reduced-opacity__24gWp",
+  "white": "Heading-module_white__AJgq4",
+  "white-reduced-opacity": "Heading-module_white-reduced-opacity__VvQaa",
+  "positive": "Heading-module_positive__GVkBf",
+  "small": "Heading-module_small__bALDR",
+  "large": "Heading-module_large__FLTyA",
+  "negative": "Heading-module_negative__exyNh"
+};
+module.exports = styles;

package/dist/cjs/src/Label/Label.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var Label_module = require('./Label.module.scss.cjs');
+var Label_module = require('./Label.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/Label/Label.module.css.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var styles = {
+  "label": "Label-module_label__jvxMB",
+  "reversed": "Label-module_reversed__Qu7Kc",
+  "disabled": "Label-module_disabled__3Mej6",
+  "text": "Label-module_text__zkbHj",
+  "checkboxOrRadio": "Label-module_checkboxOrRadio__lzm9I",
+  "checkbox": "Label-module_checkbox__vtFpn",
+  "radio": "Label-module_radio__xenTn",
+  "toggle": "Label-module_toggle__prty7",
+  "prependedLabel": "Label-module_prependedLabel__XhXdP",
+  "appendedLabel": "Label-module_appendedLabel__vp5Uc",
+  "prominent": "Label-module_prominent__dW3K7"
+};
+module.exports = styles;

package/dist/cjs/src/LabelledMessage/LabelledMessage.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var LabelledMessage_module = require('./LabelledMessage.module.scss.cjs');
+var LabelledMessage_module = require('./LabelledMessage.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/LabelledMessage/LabelledMessage.module.css.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "labelledMessage": "LabelledMessage-module_labelledMessage__kz-UQ",
+  "labelSeparator": "LabelledMessage-module_labelSeparator__A-4BK"
+};
+module.exports = styles;

package/dist/cjs/src/Notification/InlineNotification/InlineNotification.cjs

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var GenericNotification = require('../subcomponents/GenericNotification/GenericNotification.cjs');
-var GenericNotification_module = require('../subcomponents/GenericNotification/GenericNotification.module.scss.cjs');
+var GenericNotification_module = require('../subcomponents/GenericNotification/GenericNotification.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.cjs

@@ -3,7 +3,7 @@
 var React = require('react');
 var ToastNotificationContext = require('../context/ToastNotificationContext.cjs');
 var ToastNotificationsMap = require('./subcomponents/ToastNotificationsMap/ToastNotificationsMap.cjs');
-var ToastNotificationsList_module = require('./ToastNotificationsList.module.scss.cjs');
+var ToastNotificationsList_module = require('./ToastNotificationsList.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/Notification/ToastNotification/ToastNotificationsList/{ToastNotificationsList.module.scss.cjs → ToastNotificationsList.module.css.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
 var styles = {
-  "toastNotificationsList": "ToastNotificationsList-module_toastNotificationsList__APiSP"
+  "toastNotificationsList": "ToastNotificationsList-module_toastNotificationsList__AUm-A"
 };
 module.exports = styles;

package/dist/cjs/src/Notification/subcomponents/CancelButton/CancelButton.cjs

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var Icon = require('../../../Icon/Icon.cjs');
-var GenericNotification_module = require('../GenericNotification/GenericNotification.module.scss.cjs');
+var GenericNotification_module = require('../GenericNotification/GenericNotification.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/Notification/subcomponents/GenericNotification/GenericNotification.cjs

@@ -7,7 +7,7 @@ var isRefObject = require('../../../utils/isRefObject.cjs');
 var CancelButton = require('../CancelButton/CancelButton.cjs');
 var NotificationHeading = require('../NotificationHeading/NotificationHeading.cjs');
 var NotificationIcon = require('../NotificationIcon/NotificationIcon.cjs');
-var GenericNotification_module = require('./GenericNotification.module.scss.cjs');
+var GenericNotification_module = require('./GenericNotification.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/Notification/subcomponents/GenericNotification/GenericNotification.module.css.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var styles = {
+  "notification": "GenericNotification-module_notification__-lOMz",
+  "inline": "GenericNotification-module_inline__lnYb9",
+  "toast": "GenericNotification-module_toast__dPvtC",
+  "global": "GenericNotification-module_global__i1IKL",
+  "success": "GenericNotification-module_success__HMC7W",
+  "informative": "GenericNotification-module_informative__S4sGn",
+  "cautionary": "GenericNotification-module_cautionary__VMbSA",
+  "security": "GenericNotification-module_security__pdJT9",
+  "warning": "GenericNotification-module_warning__42AEX",
+  "hidden": "GenericNotification-module_hidden__QOpq1",
+  "icon": "GenericNotification-module_icon__rMIaU",
+  "textContainer": "GenericNotification-module_textContainer__yHSKi",
+  "forceMultiline": "GenericNotification-module_forceMultiline__SlLf9",
+  "title": "GenericNotification-module_title__3cvl6",
+  "notificationTitle": "GenericNotification-module_notificationTitle__-yijp",
+  "text": "GenericNotification-module_text__B5r5l",
+  "cancel": "GenericNotification-module_cancel__4O-Ys",
+  "disabled": "GenericNotification-module_disabled__V2Wyr",
+  "hover": "GenericNotification-module_hover__erovs",
+  "active": "GenericNotification-module_active__2ksOr",
+  "cancelLabel": "GenericNotification-module_cancelLabel__uLIuz",
+  "noBottomMargin": "GenericNotification-module_noBottomMargin__okqYr",
+  "persistent": "GenericNotification-module_persistent__y-Jp7",
+  "subtle": "GenericNotification-module_subtle__TCixZ"
+};
+module.exports = styles;

package/dist/cjs/src/Notification/subcomponents/NotificationHeading/NotificationHeading.cjs

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var Heading = require('../../../Heading/Heading.cjs');
-var GenericNotification_module = require('../GenericNotification/GenericNotification.module.scss.cjs');
+var GenericNotification_module = require('../GenericNotification/GenericNotification.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/Select/Select.cjs

@@ -3,8 +3,10 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
+var reactAria = require('react-aria');
 var ReactSelect = require('react-select');
 var Async = require('react-select/async');
+var ClearButton = require('../ClearButton/ClearButton.cjs');
 var FieldMessage = require('../FieldMessage/FieldMessage.cjs');
 var Icon = require('../Icon/Icon.cjs');
 var Label = require('../Label/Label.cjs');
@@ -94,7 +96,7 @@ var AsyncSelect = React__default.default.forwardRef(function (_a, ref) {
       MultiValue: MultiValue,
       IndicatorsContainer: IndicatorsContainer,
       ValueContainer: ValueContainer,
-      ClearIndicator: undefined,
+      ClearIndicator: ClearIndicator,
       IndicatorSeparator: null,
       LoadingMessage: LoadingMessage
     },
@@ -184,12 +186,12 @@ var ValueContainer = function (props) {
   }));
 };
 var ClearIndicator = function (props) {
-  return React__default.default.createElement(ReactSelect.components.ClearIndicator, tslib.__assign({}, props, {
-    className: Select_module.clearIndicator
-  }), React__default.default.createElement(Icon.Icon, {
-    name: "cancel",
-    isPresentational: true,
-    isFilled: true
+  var buttonRef = React__default.default.useRef(null);
+  var buttonProps = reactAria.useButton(tslib.__assign(tslib.__assign({}, props), {
+    onClick: props.clearValue
+  }), buttonRef).buttonProps;
+  return React__default.default.createElement(ClearButton.ClearButton, tslib.__assign({}, buttonProps, {
+    classNameOverride: Select_module.clearIndicator
   }));
 };
 exports.AsyncSelect = AsyncSelect;

package/dist/cjs/src/Text/Text.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var Text_module = require('./Text.module.scss.cjs');
+var Text_module = require('./Text.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/Text/Text.module.css.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var styles = {
+  "text": "Text-module_text__3xRq3",
+  "intro-lede": "Text-module_intro-lede__Pf95y",
+  "body": "Text-module_body__o-QuI",
+  "small": "Text-module_small__d6k-f",
+  "extra-small": "Text-module_extra-small__jP3Xx",
+  "dark": "Text-module_dark__ApVTx",
+  "dark-reduced-opacity": "Text-module_dark-reduced-opacity__-ef8o",
+  "white": "Text-module_white__Vj0Na",
+  "white-reduced-opacity": "Text-module_white-reduced-opacity__kYl0h",
+  "positive": "Text-module_positive__ngZQ5",
+  "negative": "Text-module_negative__729Es"
+};
+module.exports = styles;

package/dist/cjs/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.cjs

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var Icon = require('../../Icon/Icon.cjs');
-var ToggleSwitch_module = require('./ToggleSwitch.module.scss.cjs');
+var ToggleSwitch_module = require('./ToggleSwitch.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.css.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var styles = {
+  "checkbox": "ToggleSwitch-module_checkbox__NmNyg",
+  "track": "ToggleSwitch-module_track__Zvo6N",
+  "disabled": "ToggleSwitch-module_disabled__qntEm",
+  "thumb": "ToggleSwitch-module_thumb__YIdcS",
+  "checkIcon": "ToggleSwitch-module_checkIcon__J4eSM",
+  "on": "ToggleSwitch-module_on__-OJbU",
+  "off": "ToggleSwitch-module_off__e-dto",
+  "reversed": "ToggleSwitch-module_reversed__5Jz8i"
+};
+module.exports = styles;

package/dist/cjs/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.cjs

@@ -6,7 +6,7 @@ var classnames = require('classnames');
 var FieldGroup = require('../../FieldGroup/FieldGroup.cjs');
 var Label = require('../../Label/Label.cjs');
 var ToggleSwitch = require('../ToggleSwitch/ToggleSwitch.cjs');
-var ToggleSwitchField_module = require('./ToggleSwitchField.module.scss.cjs');
+var ToggleSwitchField_module = require('./ToggleSwitchField.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.module.css.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var styles = {
+  "container": "ToggleSwitchField-module_container__6c4oG",
+  "fullWidth": "ToggleSwitchField-module_fullWidth__iGJSg",
+  "inner": "ToggleSwitchField-module_inner__k1hyg",
+  "on": "ToggleSwitchField-module_on__8RJfp"
+};
+module.exports = styles;

package/dist/cjs/src/Tooltip/OverlayArrow.cjs

@@ -6,7 +6,7 @@ var reactAriaComponents = require('react-aria-components');
 require('use-debounce');
 var ReversedColors = require('../utils/ReversedColors/ReversedColors.cjs');
 var mergeClassNames = require('../utils/mergeClassNames.cjs');
-var OverlayArrow_module = require('./OverlayArrow.module.scss.cjs');
+var OverlayArrow_module = require('./OverlayArrow.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/Tooltip/OverlayArrow.module.css.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "overlayArrow": "OverlayArrow-module_overlayArrow__65sMU",
+  "reversed": "OverlayArrow-module_reversed__ChGpb"
+};
+module.exports = styles;

package/dist/cjs/src/Tooltip/Tooltip.cjs

@@ -8,7 +8,7 @@ require('use-debounce');
 var ReversedColors = require('../utils/ReversedColors/ReversedColors.cjs');
 var mergeClassNames = require('../utils/mergeClassNames.cjs');
 var OverlayArrow = require('./OverlayArrow.cjs');
-var Tooltip_module = require('./Tooltip.module.scss.cjs');
+var Tooltip_module = require('./Tooltip.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/Tooltip/Tooltip.module.css.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "tooltip": "Tooltip-module_tooltip__Q1YfF",
+  "reversed": "Tooltip-module_reversed__IIGeJ"
+};
+module.exports = styles;

package/dist/esm/src/Heading/Heading.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import { createElement } from 'react';
 import classnames from 'classnames';
-import styles from './Heading.module.scss.mjs';
+import styles from './Heading.module.css.mjs';
 var VARIANTS_24PX_OR_GREATER = ['display-0', 'heading-1', 'heading-2'];
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3074885298/Typography#Headings Guidance}

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

@@ -0,0 +1,20 @@
+var styles = {
+  "heading": "Heading-module_heading__6D0PM",
+  "display-0": "Heading-module_display-0__Dmiig",
+  "composable-header-title": "Heading-module_composable-header-title__CPBzk",
+  "heading-1": "Heading-module_heading-1__-GXEH",
+  "heading-2": "Heading-module_heading-2__LiRAV",
+  "heading-3": "Heading-module_heading-3__nVAgQ",
+  "heading-4": "Heading-module_heading-4__ESVT7",
+  "heading-5": "Heading-module_heading-5__zzZxI",
+  "heading-6": "Heading-module_heading-6__-JvYA",
+  "dark": "Heading-module_dark__vO-Uw",
+  "dark-reduced-opacity": "Heading-module_dark-reduced-opacity__24gWp",
+  "white": "Heading-module_white__AJgq4",
+  "white-reduced-opacity": "Heading-module_white-reduced-opacity__VvQaa",
+  "positive": "Heading-module_positive__GVkBf",
+  "small": "Heading-module_small__bALDR",
+  "large": "Heading-module_large__FLTyA",
+  "negative": "Heading-module_negative__exyNh"
+};
+export { styles as default };

package/dist/esm/src/Label/Label.mjs

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

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

@@ -0,0 +1,14 @@
+var styles = {
+  "label": "Label-module_label__jvxMB",
+  "reversed": "Label-module_reversed__Qu7Kc",
+  "disabled": "Label-module_disabled__3Mej6",
+  "text": "Label-module_text__zkbHj",
+  "checkboxOrRadio": "Label-module_checkboxOrRadio__lzm9I",
+  "checkbox": "Label-module_checkbox__vtFpn",
+  "radio": "Label-module_radio__xenTn",
+  "toggle": "Label-module_toggle__prty7",
+  "prependedLabel": "Label-module_prependedLabel__XhXdP",
+  "appendedLabel": "Label-module_appendedLabel__vp5Uc",
+  "prominent": "Label-module_prominent__dW3K7"
+};
+export { styles as default };

package/dist/esm/src/LabelledMessage/LabelledMessage.mjs

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

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

@@ -0,0 +1,5 @@
+var styles = {
+  "labelledMessage": "LabelledMessage-module_labelledMessage__kz-UQ",
+  "labelSeparator": "LabelledMessage-module_labelSeparator__A-4BK"
+};
+export { styles as default };

package/dist/esm/src/Notification/InlineNotification/InlineNotification.mjs

@@ -2,7 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import classnames from 'classnames';
 import { GenericNotification } from '../subcomponents/GenericNotification/GenericNotification.mjs';
-import styles from '../subcomponents/GenericNotification/GenericNotification.module.scss.mjs';
+import styles from '../subcomponents/GenericNotification/GenericNotification.module.css.mjs';
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093392/Inline+Notification Guidance} |

package/dist/esm/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.mjs

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useToastNotificationContext } from '../context/ToastNotificationContext.mjs';
 import { ToastNotificationsMap } from './subcomponents/ToastNotificationsMap/ToastNotificationsMap.mjs';
-import styles from './ToastNotificationsList.module.scss.mjs';
+import styles from './ToastNotificationsList.module.css.mjs';
 var toastNotificationListId = 'toast-notifications-list';
 const ToastNotificationsList = /*#__PURE__*/function () {
   const ToastNotificationsList = function () {

package/dist/esm/src/Notification/ToastNotification/ToastNotificationsList/{ToastNotificationsList.module.scss.mjs → ToastNotificationsList.module.css.mjs}

@@ -1,4 +1,4 @@
 var styles = {
-  "toastNotificationsList": "ToastNotificationsList-module_toastNotificationsList__APiSP"
+  "toastNotificationsList": "ToastNotificationsList-module_toastNotificationsList__AUm-A"
 };
 export { styles as default };

package/dist/esm/src/Notification/subcomponents/CancelButton/CancelButton.mjs

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Icon } from '../../../Icon/Icon.mjs';
-import styles from '../GenericNotification/GenericNotification.module.scss.mjs';
+import styles from '../GenericNotification/GenericNotification.module.css.mjs';
 const CancelButton = /*#__PURE__*/function () {
   const CancelButton = function (_a) {
     var onClick = _a.onClick;

package/dist/esm/src/Notification/subcomponents/GenericNotification/GenericNotification.mjs

@@ -5,7 +5,7 @@ import { isRefObject } from '../../../utils/isRefObject.mjs';
 import { CancelButton } from '../CancelButton/CancelButton.mjs';
 import { NotificationHeading } from '../NotificationHeading/NotificationHeading.mjs';
 import { NotificationIconVariant } from '../NotificationIcon/NotificationIcon.mjs';
-import styles from './GenericNotification.module.scss.mjs';
+import styles from './GenericNotification.module.css.mjs';
 const GenericNotification = /*#__PURE__*/function () {
   const GenericNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
     var variant = _a.variant,

package/dist/esm/src/Notification/subcomponents/GenericNotification/GenericNotification.module.css.mjs

@@ -0,0 +1,27 @@
+var styles = {
+  "notification": "GenericNotification-module_notification__-lOMz",
+  "inline": "GenericNotification-module_inline__lnYb9",
+  "toast": "GenericNotification-module_toast__dPvtC",
+  "global": "GenericNotification-module_global__i1IKL",
+  "success": "GenericNotification-module_success__HMC7W",
+  "informative": "GenericNotification-module_informative__S4sGn",
+  "cautionary": "GenericNotification-module_cautionary__VMbSA",
+  "security": "GenericNotification-module_security__pdJT9",
+  "warning": "GenericNotification-module_warning__42AEX",
+  "hidden": "GenericNotification-module_hidden__QOpq1",
+  "icon": "GenericNotification-module_icon__rMIaU",
+  "textContainer": "GenericNotification-module_textContainer__yHSKi",
+  "forceMultiline": "GenericNotification-module_forceMultiline__SlLf9",
+  "title": "GenericNotification-module_title__3cvl6",
+  "notificationTitle": "GenericNotification-module_notificationTitle__-yijp",
+  "text": "GenericNotification-module_text__B5r5l",
+  "cancel": "GenericNotification-module_cancel__4O-Ys",
+  "disabled": "GenericNotification-module_disabled__V2Wyr",
+  "hover": "GenericNotification-module_hover__erovs",
+  "active": "GenericNotification-module_active__2ksOr",
+  "cancelLabel": "GenericNotification-module_cancelLabel__uLIuz",
+  "noBottomMargin": "GenericNotification-module_noBottomMargin__okqYr",
+  "persistent": "GenericNotification-module_persistent__y-Jp7",
+  "subtle": "GenericNotification-module_subtle__TCixZ"
+};
+export { styles as default };

package/dist/esm/src/Notification/subcomponents/NotificationHeading/NotificationHeading.mjs

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Heading } from '../../../Heading/Heading.mjs';
-import styles from '../GenericNotification/GenericNotification.module.scss.mjs';
+import styles from '../GenericNotification/GenericNotification.module.css.mjs';
 const NotificationHeading = /*#__PURE__*/function () {
   const NotificationHeading = function (_a) {
     var _b, _c, _d;

package/dist/esm/src/Select/Select.mjs

@@ -1,8 +1,10 @@
 import { __rest, __assign } from 'tslib';
 import React, { useId, useState } from 'react';
 import classnames from 'classnames';
+import { useButton } from 'react-aria';
 import ReactSelect, { components } from 'react-select';
 import Async from 'react-select/async';
+import { ClearButton } from '../ClearButton/ClearButton.mjs';
 import { FieldMessage } from '../FieldMessage/FieldMessage.mjs';
 import { Icon } from '../Icon/Icon.mjs';
 import { Label } from '../Label/Label.mjs';
@@ -87,7 +89,7 @@ const AsyncSelect = /*#__PURE__*/function () {
         MultiValue: MultiValue,
         IndicatorsContainer: IndicatorsContainer,
         ValueContainer: ValueContainer,
-        ClearIndicator: undefined,
+        ClearIndicator: ClearIndicator,
         IndicatorSeparator: null,
         LoadingMessage: LoadingMessage
       },
@@ -179,12 +181,12 @@ var ValueContainer = function (props) {
   }));
 };
 var ClearIndicator = function (props) {
-  return /*#__PURE__*/React.createElement(components.ClearIndicator, __assign({}, props, {
-    className: styles.clearIndicator
-  }), /*#__PURE__*/React.createElement(Icon, {
-    name: "cancel",
-    isPresentational: true,
-    isFilled: true
+  var buttonRef = React.useRef(null);
+  var buttonProps = useButton(__assign(__assign({}, props), {
+    onClick: props.clearValue
+  }), buttonRef).buttonProps;
+  return /*#__PURE__*/React.createElement(ClearButton, __assign({}, buttonProps, {
+    classNameOverride: styles.clearIndicator
   }));
 };
 export { AsyncSelect, Select };

package/dist/esm/src/Text/Text.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import { createElement } from 'react';
 import classnames from 'classnames';
-import styles from './Text.module.scss.mjs';
+import styles from './Text.module.css.mjs';
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3074885298/Typography#Paragraph Guidance}

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

@@ -0,0 +1,14 @@
+var styles = {
+  "text": "Text-module_text__3xRq3",
+  "intro-lede": "Text-module_intro-lede__Pf95y",
+  "body": "Text-module_body__o-QuI",
+  "small": "Text-module_small__d6k-f",
+  "extra-small": "Text-module_extra-small__jP3Xx",
+  "dark": "Text-module_dark__ApVTx",
+  "dark-reduced-opacity": "Text-module_dark-reduced-opacity__-ef8o",
+  "white": "Text-module_white__Vj0Na",
+  "white-reduced-opacity": "Text-module_white-reduced-opacity__kYl0h",
+  "positive": "Text-module_positive__ngZQ5",
+  "negative": "Text-module_negative__729Es"
+};
+export { styles as default };

package/dist/esm/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.mjs

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

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

@@ -0,0 +1,11 @@
+var styles = {
+  "checkbox": "ToggleSwitch-module_checkbox__NmNyg",
+  "track": "ToggleSwitch-module_track__Zvo6N",
+  "disabled": "ToggleSwitch-module_disabled__qntEm",
+  "thumb": "ToggleSwitch-module_thumb__YIdcS",
+  "checkIcon": "ToggleSwitch-module_checkIcon__J4eSM",
+  "on": "ToggleSwitch-module_on__-OJbU",
+  "off": "ToggleSwitch-module_off__e-dto",
+  "reversed": "ToggleSwitch-module_reversed__5Jz8i"
+};
+export { styles as default };

package/dist/esm/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.mjs

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { FieldGroup } from '../../FieldGroup/FieldGroup.mjs';
 import { Label } from '../../Label/Label.mjs';
 import { ToggleSwitch } from '../ToggleSwitch/ToggleSwitch.mjs';
-import styles from './ToggleSwitchField.module.scss.mjs';
+import styles from './ToggleSwitchField.module.css.mjs';
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3075638160/Toggle+Switch Guidance} |

package/dist/esm/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.module.css.mjs

@@ -0,0 +1,7 @@
+var styles = {
+  "container": "ToggleSwitchField-module_container__6c4oG",
+  "fullWidth": "ToggleSwitchField-module_fullWidth__iGJSg",
+  "inner": "ToggleSwitchField-module_inner__k1hyg",
+  "on": "ToggleSwitchField-module_on__8RJfp"
+};
+export { styles as default };

package/dist/esm/src/Tooltip/OverlayArrow.mjs

@@ -4,7 +4,7 @@ import { OverlayArrow as OverlayArrow$1 } from 'react-aria-components';
 import 'use-debounce';
 import { useReversedColors } from '../utils/ReversedColors/ReversedColors.mjs';
 import { mergeClassNames } from '../utils/mergeClassNames.mjs';
-import styles from './OverlayArrow.module.scss.mjs';
+import styles from './OverlayArrow.module.css.mjs';
 
 /**
  * An OverlayArrow renders a custom arrow element relative to an overlay element

package/dist/esm/src/Tooltip/OverlayArrow.module.css.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "overlayArrow": "OverlayArrow-module_overlayArrow__65sMU",
+  "reversed": "OverlayArrow-module_reversed__ChGpb"
+};
+export { styles as default };

package/dist/esm/src/Tooltip/Tooltip.mjs

@@ -7,7 +7,7 @@ import 'use-debounce';
 import { useReversedColors } from '../utils/ReversedColors/ReversedColors.mjs';
 import { mergeClassNames } from '../utils/mergeClassNames.mjs';
 import { OverlayArrow } from './OverlayArrow.mjs';
-import styles from './Tooltip.module.scss.mjs';
+import styles from './Tooltip.module.css.mjs';
 
 /**
  * A tooltip displays a description of an element on hover or focus.