@kaizen/components 2.4.0 → 3.0.0

package/dist/cjs/src/SingleSelect/subcomponents/SelectToggle/SelectToggle.cjs

@@ -19,13 +19,11 @@ var SelectToggle = React__default.default.forwardRef(function (_a, ref) {
     value = _a.value,
     valueProps = _a.valueProps,
     isOpen = _a.isOpen,
-    _b = _a.placeholder,
-    placeholder = _b === void 0 ? 'Select' : _b,
     status = _a.status,
     isDisabled = _a.isDisabled,
     isReversed = _a.isReversed,
     classNameOverride = _a.classNameOverride,
-    restProps = tslib.__rest(_a, ["label", "labelProps", "value", "valueProps", "isOpen", "placeholder", "status", "isDisabled", "isReversed", "classNameOverride"]);
+    restProps = tslib.__rest(_a, ["label", "labelProps", "value", "valueProps", "isOpen", "status", "isDisabled", "isReversed", "classNameOverride"]);
   return React__default.default.createElement("div", null, React__default.default.createElement(Label.Label, tslib.__assign({}, labelProps, {
     reversed: isReversed,
     disabled: isDisabled
@@ -36,10 +34,10 @@ var SelectToggle = React__default.default.forwardRef(function (_a, ref) {
     role: "combobox"
   }, restProps, {
     ref: ref,
-    className: classnames__default.default(SelectToggle_module.selectToggle, (value === null || value === undefined) && SelectToggle_module.placeholder, status === 'error' && SelectToggle_module.error, status === 'caution' && SelectToggle_module.caution, isDisabled && SelectToggle_module.disabled, isReversed && SelectToggle_module.reversed, classNameOverride)
+    className: classnames__default.default(SelectToggle_module.selectToggle, status === 'error' && SelectToggle_module.error, status === 'caution' && SelectToggle_module.caution, isDisabled && SelectToggle_module.disabled, isReversed && SelectToggle_module.reversed, classNameOverride)
   }), React__default.default.createElement("span", tslib.__assign({}, valueProps, {
     className: SelectToggle_module.value
-  }), value !== null && value !== void 0 ? value : placeholder), React__default.default.createElement(Icon.Icon, {
+  }), value), React__default.default.createElement(Icon.Icon, {
     name: isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
     isPresentational: true,
     className: SelectToggle_module.icon

package/dist/cjs/src/SingleSelect/subcomponents/SelectToggle/SelectToggle.module.scss.cjs

@@ -3,7 +3,6 @@
 var styles = {
   "icon": "SelectToggle-module_icon__rsV9A",
   "selectToggle": "SelectToggle-module_selectToggle__e6slL",
-  "placeholder": "SelectToggle-module_placeholder__w7o7S",
   "error": "SelectToggle-module_error__npEgr",
   "caution": "SelectToggle-module_caution__9jSK0",
   "disabled": "SelectToggle-module_disabled__2MKmF",

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

@@ -60,8 +60,7 @@ var TimeFieldComponent = function (_a) {
     onChange: handleOnChange,
     isDisabled: isDisabled,
     hideTimeZone: true,
-    locale: locale,
-    validationState: status === 'default' ? 'valid' : 'invalid'
+    locale: locale
   }));
   var hasError = !!validationMessage && status === 'error';
   var descriptionId = hasError ? "".concat(id, "-field-message") : undefined;
@@ -84,7 +83,7 @@ var TimeFieldComponent = function (_a) {
   }, React__default.default.createElement("div", tslib.__assign({}, fieldProps, {
     id: id,
     ref: inputRef,
-    className: classnames__default.default(TimeField_module.input, state.isDisabled && TimeField_module.isDisabled, state.validationState === 'invalid' && TimeField_module.error)
+    className: classnames__default.default(TimeField_module.input, state.isDisabled && TimeField_module.isDisabled, status === 'error' && TimeField_module.error)
   }), state.segments.map(function (segment, i) {
     return React__default.default.createElement(TimeSegment.TimeSegment, {
       key: i,

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

@@ -26,10 +26,8 @@ const Button = /*#__PURE__*/function () {
       _f = _a.hasHiddenPendingLabel,
       propsHasHiddenPendingLabel = _f === void 0 ? false : _f,
       pendingLabel = _a.pendingLabel,
-      isReversed = _a.isReversed,
-      restProps = __rest(_a, ["variant", "size", "className", "children", "isDisabled", "isFullWidth", "icon", "iconPosition", "hasHiddenLabel", "isPending", "hasHiddenPendingLabel", "pendingLabel", "isReversed"]);
-    var shouldUseReverse = useReversedColors();
-    var isReversedVariant = isReversed !== null && isReversed !== void 0 ? isReversed : shouldUseReverse;
+      restProps = __rest(_a, ["variant", "size", "className", "children", "isDisabled", "isFullWidth", "icon", "iconPosition", "hasHiddenLabel", "isPending", "hasHiddenPendingLabel", "pendingLabel"]);
+    var isReversedVariant = useReversedColors();
     var pendingProps = isPending ? {
       isPending: isPending,
       hasHiddenPendingLabel: hasHiddenLabel || propsHasHiddenPendingLabel,

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

@@ -1,78 +1,34 @@
-import { __rest, __assign } from 'tslib';
-import React, { useState } from 'react';
+import { __rest } from 'tslib';
+import React from 'react';
 import classnames from 'classnames';
-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 '../TooltipV1/Tooltip.mjs';
 import { useMediaQueries } from '../utils/useMediaQueries.mjs';
 import styles from './GuidanceBlock.module.css.mjs';
-var WithTooltip = function (_a) {
-  var tooltipProps = _a.tooltipProps,
-    children = _a.children;
-  return tooltipProps ? /*#__PURE__*/React.createElement(Tooltip, __assign({}, tooltipProps), children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
-};
+
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093807/Guidance+Block Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-guidanceblock--docs Storybook}
  */
 const GuidanceBlock = /*#__PURE__*/function () {
   const GuidanceBlock = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var _g = _a.layout,
-      layout = _g === void 0 ? 'default' : _g,
-      _h = _a.variant,
-      variant = _h === void 0 ? 'default' : _h,
-      _j = _a.withActionButtonArrow,
-      withActionButtonArrow = _j === void 0 ? true : _j,
-      _k = _a.noMaxWidth,
-      noMaxWidth = _k === void 0 ? false : _k,
-      _l = _a.illustrationType,
-      illustrationType = _l === void 0 ? 'spot' : _l,
-      _m = _a.smallScreenTextAlignment,
-      smallScreenTextAlignment = _m === void 0 ? 'center' : _m,
-      actions = _a.actions,
+    var _b, _c, _d, _e;
+    var _f = _a.layout,
+      layout = _f === void 0 ? 'default' : _f,
+      _g = _a.variant,
+      variant = _g === void 0 ? 'default' : _g,
+      _h = _a.noMaxWidth,
+      noMaxWidth = _h === void 0 ? false : _h,
+      _j = _a.illustrationType,
+      illustrationType = _j === void 0 ? 'spot' : _j,
+      _k = _a.smallScreenTextAlignment,
+      smallScreenTextAlignment = _k === void 0 ? 'center' : _k,
       illustration = _a.illustration,
-      secondaryDismiss = _a.secondaryDismiss,
       actionsSlot = _a.actionsSlot,
-      restProps = __rest(_a, ["layout", "variant", "withActionButtonArrow", "noMaxWidth", "illustrationType", "smallScreenTextAlignment", "actions", "illustration", "secondaryDismiss", "actionsSlot"]);
-    var _o = useState(false),
-      hidden = _o[0],
-      setHidden = _o[1];
-    var _p = useState(false),
-      removed = _p[0],
-      setRemoved = _p[1];
+      restProps = __rest(_a, ["layout", "variant", "noMaxWidth", "illustrationType", "smallScreenTextAlignment", "illustration", "actionsSlot"]);
     var queries = useMediaQueries().queries;
-    var containerRef = /*#__PURE__*/React.createRef();
-    var handleDismissBanner = function () {
-      var _a;
-      setHidden(true);
-      (_a = actions === null || actions === void 0 ? void 0 : actions.dismiss) === null || _a === void 0 ? void 0 : _a.onClick();
-    };
-    var onTransitionEnd = function (e) {
-      // Be careful: this assumes the final CSS property to be animated is "margin-top".
-      if (hidden && e.propertyName === 'margin-top') {
-        setRemoved(true);
-      }
-    };
-    var marginTop = function () {
-      if (hidden && containerRef.current) {
-        return -containerRef.current.clientHeight + 'px';
-      }
-      return '0';
-    };
-    if (removed) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null);
-    }
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames(styles.banner, variant && styles[variant], layout && styles[layout], hidden && styles.hidden, queries.isSmall && styles.centerContent, noMaxWidth && styles.noMaxWidth, illustrationType === 'scene' && styles.hasSceneIllustration, smallScreenTextAlignment === 'left' && styles.smallScreenTextAlignment),
-      style: {
-        marginTop: marginTop()
-      },
-      ref: containerRef,
-      onTransitionEnd: onTransitionEnd
+      className: classnames(styles.banner, variant && styles[variant], layout && styles[layout], queries.isSmall && styles.centerContent, noMaxWidth && styles.noMaxWidth, illustrationType === 'scene' && styles.hasSceneIllustration, smallScreenTextAlignment === 'left' && styles.smallScreenTextAlignment)
     }, /*#__PURE__*/React.createElement("div", {
       className: styles.illustrationWrapper
     }, /*#__PURE__*/React.createElement("div", {
@@ -91,31 +47,9 @@ const GuidanceBlock = /*#__PURE__*/function () {
     }, (_d = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _d === void 0 ? void 0 : _d.title)), /*#__PURE__*/React.createElement(Text, {
       tag: "p",
       variant: "body"
-    }, (_e = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _e === void 0 ? void 0 : _e.description)))), (actions === null || actions === void 0 ? void 0 : actions.primary) || actionsSlot ? (/*#__PURE__*/React.createElement("div", {
+    }, (_e = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _e === void 0 ? void 0 : _e.description)))), actionsSlot && /*#__PURE__*/React.createElement("div", {
       className: styles.buttonContainer
-    }, (actions === null || actions === void 0 ? void 0 : actions.primary) && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WithTooltip, {
-      tooltipProps: actions.primary.tooltip
-    }, /*#__PURE__*/React.createElement(Button, __assign({
-      icon: withActionButtonArrow ? (/*#__PURE__*/React.createElement(Icon, {
-        name: "arrow_forward",
-        isPresentational: true,
-        shouldMirrorInRTL: true
-      })) : undefined,
-      iconPosition: "end"
-    }, actions.primary, {
-      fullWidth: queries.isSmall
-    }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && (/*#__PURE__*/React.createElement(WithTooltip, {
-      tooltipProps: actions.secondary.tooltip
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.secondaryAction
-    }, /*#__PURE__*/React.createElement(Button, __assign({
-      secondary: true
-    }, actions.secondary, {
-      onClick: secondaryDismiss ? function () {
-        return handleDismissBanner();
-      } : (_f = actions === null || actions === void 0 ? void 0 : actions.secondary) === null || _f === void 0 ? void 0 : _f.onClick,
-      fullWidth: queries.isSmall
-    }))))))), !actions && actionsSlot && actionsSlot)) : null));
+    }, actionsSlot)));
   };
   GuidanceBlock.displayName = 'GuidanceBlock';
   return GuidanceBlock;

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

@@ -7,7 +7,6 @@ var styles = {
   "descriptionContainer": "GuidanceBlock-module_descriptionContainer__w1-P-",
   "descriptionAndActions": "GuidanceBlock-module_descriptionAndActions__aQhc9",
   "buttonContainer": "GuidanceBlock-module_buttonContainer__bcVmB",
-  "hidden": "GuidanceBlock-module_hidden__mwvrs",
   "headingWrapper": "GuidanceBlock-module_headingWrapper__OfZB5",
   "default": "GuidanceBlock-module_default__7naG4",
   "positive": "GuidanceBlock-module_positive__iCp-1",

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

@@ -30,10 +30,8 @@ const LinkButton = /*#__PURE__*/function () {
       isFullWidth = _f === void 0 ? false : _f,
       isDisabled = _a.isDisabled,
       className = _a.className,
-      isReversed = _a.isReversed,
-      otherProps = __rest(_a, ["children", "variant", "size", "icon", "iconPosition", "hasHiddenLabel", "isFullWidth", "isDisabled", "className", "isReversed"]);
-    var shouldUseReverse = useReversedColors();
-    var isReversedVariant = isReversed !== null && isReversed !== void 0 ? isReversed : shouldUseReverse;
+      otherProps = __rest(_a, ["children", "variant", "size", "icon", "iconPosition", "hasHiddenLabel", "isFullWidth", "isDisabled", "className"]);
+    var isReversedVariant = useReversedColors();
     return /*#__PURE__*/React.createElement(Link, __assign({
       ref: ref,
       className: mergeClassNames(styles.linkButton, buttonStyles.button, buttonStyles[size], hasHiddenLabel && buttonStyles["".concat(size, "IconButton")], isDisabled && buttonStyles.isDisabled, isReversedVariant ? buttonStyles["".concat(variant, "Reversed")] : buttonStyles[variant], isFullWidth && buttonStyles.fullWidth, className),

package/dist/esm/src/Modal/ConfirmationModal/ConfirmationModal.mjs

@@ -77,7 +77,9 @@ const ConfirmationModal = /*#__PURE__*/function () {
     if (onConfirm) {
       var confirmAction = {
         label: confirmLabel,
-        onClick: onConfirm
+        onClick: onConfirm,
+        destructive: variant === 'warning',
+        primary: variant !== 'warning'
       };
       var workingProps = confirmWorking ? {
         working: true,
@@ -118,7 +120,6 @@ const ConfirmationModal = /*#__PURE__*/function () {
       className: classnames(isProminent && styles.prominent, !unpadded && styles.padded)
     }, /*#__PURE__*/React.createElement(ModalAccessibleDescription, null, children))), /*#__PURE__*/React.createElement(ModalFooter, {
       actions: footerActions,
-      appearance: variant == 'warning' ? 'destructive' : 'primary',
       unpadded: unpadded
     })));
   };

package/dist/esm/src/Modal/ContextModal/ContextModal.mjs

@@ -89,7 +89,6 @@ const ContextModal = /*#__PURE__*/function () {
     }))))), /*#__PURE__*/React.createElement(ModalFooter, {
       variant: image ? 'context' : undefined,
       actions: footerActions,
-      appearance: "primary",
       unpadded: unpadded
     })));
   };

package/dist/esm/src/Modal/GenericModal/GenericModal.mjs

@@ -4,7 +4,6 @@ import { Transition } from '@headlessui/react';
 import classnames from 'classnames';
 import { FocusOn } from 'react-focus-on';
 import { useIsClientReady } from '../../utils/useIsClientReady/useIsClientReady.mjs';
-import { warn } from '../util/console.mjs';
 import { ModalContext } from './context/ModalContext.mjs';
 import styles from './GenericModal.module.scss.mjs';
 const GenericModal = /*#__PURE__*/function () {
@@ -42,7 +41,8 @@ const GenericModal = /*#__PURE__*/function () {
       // Ensure that consumers have provided an element that labels the modal
       // to meet ARIA accessibility guidelines.
       if (!document.getElementById(labelledByID)) {
-        warn("When using the Modal component, you must provide a label for the modal.\n        Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.");
+        // eslint-disable-next-line no-console
+        console.warn('When using the Modal component, you must provide a label for the modal. Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.');
       }
     };
     var focusOnAccessibleLabel = function () {

package/dist/esm/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.mjs

@@ -10,11 +10,9 @@ const ModalFooter = /*#__PURE__*/function () {
   const ModalFooter = function (_a) {
     var unpadded = _a.unpadded,
       actions = _a.actions,
-      _b = _a.appearance,
-      appearance = _b === void 0 ? 'primary' : _b,
       alignStart = _a.alignStart,
       variant = _a.variant,
-      props = __rest(_a, ["unpadded", "actions", "appearance", "alignStart", "variant"]);
+      props = __rest(_a, ["unpadded", "actions", "alignStart", "variant"]);
     var queries = useMediaQueries().queries;
     return /*#__PURE__*/React.createElement(ModalBody, {
       inputEdit: variant === 'inputEdit'
@@ -26,9 +24,8 @@ const ModalFooter = /*#__PURE__*/function () {
         key: index
       }, /*#__PURE__*/React.createElement(Button, __assign({
         type: "button",
-        primary: index === 0 && appearance === 'primary',
-        destructive: index === 0 && appearance === 'destructive',
-        secondary: index > 0,
+        primary: index === 0 && !action.destructive && !action.secondary,
+        secondary: index > 0 && !action.destructive && !action.primary,
         fullWidth: queries.isSmall
       }, action)));
     })));

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;