@kaizen/components 2.3.7 → 2.5.0

package/dist/esm/src/Illustration/Spot/Spot.mjs

@@ -27,6 +27,13 @@ var Negative = createSpotIllustration("moods-negative.svg");
 var Positive = createSpotIllustration("moods-positive.svg");
 /* prettier-ignore */
 var Assertive = createSpotIllustration("moods-assertive.svg");
+/**
+ * Template Library / PCD
+ */
+/* prettier-ignore */
+var PCDSurvey = createSpotIllustration("template-library-pcq-survey-full.svg");
+/* prettier-ignore */
+var PCDPulseSurvey = createSpotIllustration("template-library-pcq-survey-pulse.svg");
 /**
  * Template Library / Engagement
  */
@@ -313,4 +320,4 @@ var Recommendation = createSpotIllustration("miscellaneous-recommendation.svg");
 var Objective = createSpotIllustration("miscellaneous-objective.svg");
 /* prettier-ignore */
 var CalendarSync = createSpotIllustration("miscellaneous-calendar-sync.svg");
-export { AccountBasics, Action, ActionPlans, AddImage, AddUser, Alarm, AmplifyOthers, Assertive, BCorp, BaselineSurvey, Behaviour, BenefitsSurvey, BlankSurvey, CalendarSync, CandidateSurvey, Cautionary, ChangeAgents, ChangeReadiness, ChangeSuccess, Coaching, Communications, Community, Company, CompanyDetails, Conversations, CustomOnboardSurvey, CustomSurvey, CustomUnattributedSurvey, DataVisualization, EmergencyResponse, EmployeeData, EndOfProbation, EngagementSurvey, EssentialProductivity, EssentialResilience, ExecutiveReportSharing, ExitSurvey, FastAction, Feedback, Fire, Fireworks, FullImport, Gdpr, GeneralOnboardSurvey, Goals, HaveTheCourageToBeVulnerable, HealthAndSafety, HrisImport, InclusionSurvey, Individual180, Individual360, Individual360Pulse, InfluentialCommunication, Informative, Insights, InternSurvey, LeaderReportSharing, Leadership180, Leadership360, LeadingChange, LeadingThroughCrisis, Learn, LearnFasterThroughFeedback, London, Manager180, Manager360, Manager360Pulse, ManagerLearning, ManagerReportSharing, MeetingVoices, Melbourne, Microphone, Negative, NewWaysOfWorking, NewYork, Objective, OneOnOne, PaperPen, PartialImport, PerformanceDiagnostics, PhasedWeek1OnboardSurvey, PhasedWeek5OnboardSurvey, Positive, PowerfulInsights, Privacy, Process, Productivity, PulseSurvey, QuickEngagementSurvey, ReOnboarding, ReadArticle, Recommendation, RemoteManager, RemoteOnboardSurvey, RemoteWorkQSet, ReportSharing, Resilience, Resources, Response, ReturnToWorkplace, SanFrancisco, ScienceBackedTools, ShareReport, SinglePointOnboardSurvey, SkillsDevelopment, SpreadsheetTemplate, Starburst, Stop, Strategy, TakeAim, Team1, Team2, TeamEffectiveness1, TeamEffectiveness2, TeamEffectiveness3, Templates, Timezone, TrafficCone, Training1, Training2, Training3, Trophy, TrustOthersToMakeDecisions, UnderConstruction, ValueAdd, ValuesSurvey1, ValuesSurvey2, Video, ViewReports, WellbeingSurvey, WellbeingSurvey1, WellbeingSurvey2, WellbeingSurvey3, Workshop };
+export { AccountBasics, Action, ActionPlans, AddImage, AddUser, Alarm, AmplifyOthers, Assertive, BCorp, BaselineSurvey, Behaviour, BenefitsSurvey, BlankSurvey, CalendarSync, CandidateSurvey, Cautionary, ChangeAgents, ChangeReadiness, ChangeSuccess, Coaching, Communications, Community, Company, CompanyDetails, Conversations, CustomOnboardSurvey, CustomSurvey, CustomUnattributedSurvey, DataVisualization, EmergencyResponse, EmployeeData, EndOfProbation, EngagementSurvey, EssentialProductivity, EssentialResilience, ExecutiveReportSharing, ExitSurvey, FastAction, Feedback, Fire, Fireworks, FullImport, Gdpr, GeneralOnboardSurvey, Goals, HaveTheCourageToBeVulnerable, HealthAndSafety, HrisImport, InclusionSurvey, Individual180, Individual360, Individual360Pulse, InfluentialCommunication, Informative, Insights, InternSurvey, LeaderReportSharing, Leadership180, Leadership360, LeadingChange, LeadingThroughCrisis, Learn, LearnFasterThroughFeedback, London, Manager180, Manager360, Manager360Pulse, ManagerLearning, ManagerReportSharing, MeetingVoices, Melbourne, Microphone, Negative, NewWaysOfWorking, NewYork, Objective, OneOnOne, PCDPulseSurvey, PCDSurvey, PaperPen, PartialImport, PerformanceDiagnostics, PhasedWeek1OnboardSurvey, PhasedWeek5OnboardSurvey, Positive, PowerfulInsights, Privacy, Process, Productivity, PulseSurvey, QuickEngagementSurvey, ReOnboarding, ReadArticle, Recommendation, RemoteManager, RemoteOnboardSurvey, RemoteWorkQSet, ReportSharing, Resilience, Resources, Response, ReturnToWorkplace, SanFrancisco, ScienceBackedTools, ShareReport, SinglePointOnboardSurvey, SkillsDevelopment, SpreadsheetTemplate, Starburst, Stop, Strategy, TakeAim, Team1, Team2, TeamEffectiveness1, TeamEffectiveness2, TeamEffectiveness3, Templates, Timezone, TrafficCone, Training1, Training2, Training3, Trophy, TrustOthersToMakeDecisions, UnderConstruction, ValueAdd, ValuesSurvey1, ValuesSurvey2, Video, ViewReports, WellbeingSurvey, WellbeingSurvey1, WellbeingSurvey2, WellbeingSurvey3, Workshop };

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/Tag/Tag.mjs

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { Avatar } from '../Avatar/Avatar.mjs';
 import { Icon } from '../Icon/Icon.mjs';
 import { LiveIcon } from './subcomponents/LiveIcon/LiveIcon.mjs';
-import styles from './Tag.module.scss.mjs';
+import styles from './Tag.module.css.mjs';
 var isJSXElement = function (imageElementOrAvatarProps) {
   return 'props' in imageElementOrAvatarProps;
 };

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

@@ -0,0 +1,28 @@
+var styles = {
+  "root": "Tag-module_root__sGbnM",
+  "profile": "Tag-module_profile__lpDJR",
+  "layoutContainer": "Tag-module_layoutContainer__cPxSs",
+  "validationIcon": "Tag-module_validationIcon__i87BD",
+  "textContent": "Tag-module_textContent__61iwm",
+  "iconWrapper": "Tag-module_iconWrapper__gXgCb",
+  "dismissButton": "Tag-module_dismissButton__MgLNJ",
+  "background": "Tag-module_background__DaA0W",
+  "truncate": "Tag-module_truncate__5kX5V",
+  "inline": "Tag-module_inline__QQfqi",
+  "medium": "Tag-module_medium__PI53x",
+  "small": "Tag-module_small__hcPrf",
+  "default": "Tag-module_default__Wq9hK",
+  "sentimentPositive": "Tag-module_sentimentPositive__M4lXI",
+  "sentimentNeutral": "Tag-module_sentimentNeutral__uxZ6y",
+  "sentimentNegative": "Tag-module_sentimentNegative__JxDtU",
+  "sentimentNone": "Tag-module_sentimentNone__vDXoz",
+  "validationPositive": "Tag-module_validationPositive__KXW2z",
+  "validationInformative": "Tag-module_validationInformative__wJlj5",
+  "validationNegative": "Tag-module_validationNegative__CEuAp",
+  "validationCautionary": "Tag-module_validationCautionary__ay3Dg",
+  "statusLive": "Tag-module_statusLive__Ycm63",
+  "statusAction": "Tag-module_statusAction__Gdpew",
+  "statusClosed": "Tag-module_statusClosed__9Ggv1",
+  "statusDraft": "Tag-module_statusDraft__m3ksY"
+};
+export { styles as default };

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/TimeField/TimeField.mjs

@@ -1,5 +1,5 @@
 import { __assign, __rest } from 'tslib';
-import React, { useId } from 'react';
+import React, { useId, useMemo } from 'react';
 import { Time } from '@internationalized/date';
 import { useTimeField } from '@react-aria/datepicker';
 import { I18nProvider } from '@react-aria/i18n';
@@ -45,8 +45,13 @@ const TimeFieldComponent = /*#__PURE__*/function () {
         minutes: timeValue.minute
       });
     };
+    var timeValue = useMemo(function () {
+      return value ? new Time(value.hour, value.minutes) : null;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [value === null || value === void 0 ? void 0 : value.hour, value === null || value === void 0 ? void 0 : value.minutes]);
     var state = useTimeFieldState(__assign(__assign({}, restProps), {
-      value: value ? new Time(value.hour, value.minutes) : null,
+      value: timeValue,
       onChange: handleOnChange,
       isDisabled: isDisabled,
       hideTimeZone: true,

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.

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

@@ -0,0 +1,5 @@
+var styles = {
+  "tooltip": "Tooltip-module_tooltip__Q1YfF",
+  "reversed": "Tooltip-module_reversed__IIGeJ"
+};
+export { styles as default };

package/dist/esm/src/VisuallyHidden/VisuallyHidden.mjs

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

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

@@ -0,0 +1,4 @@
+var styles = {
+  "srOnly": "VisuallyHidden-module_srOnly__-f5sJ"
+};
+export { styles as default };