@kaizen/components 2.5.0 → 3.0.0

package/dist/cjs/src/Button/Button.cjs

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

package/dist/cjs/src/GuidanceBlock/GuidanceBlock.cjs

@@ -3,12 +3,8 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var Button = require('../ButtonV1/Button/Button.cjs');
-require('../ButtonV1/IconButton/IconButton.cjs');
 var Heading = require('../Heading/Heading.cjs');
-var Icon = require('../Icon/Icon.cjs');
 var Text = require('../Text/Text.cjs');
-var Tooltip = require('../TooltipV1/Tooltip.cjs');
 var useMediaQueries = require('../utils/useMediaQueries.cjs');
 var GuidanceBlock_module = require('./GuidanceBlock.module.css.cjs');
 function _interopDefault(e) {
@@ -18,69 +14,29 @@ function _interopDefault(e) {
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var WithTooltip = function (_a) {
-  var tooltipProps = _a.tooltipProps,
-    children = _a.children;
-  return tooltipProps ? React__default.default.createElement(Tooltip.Tooltip, tslib.__assign({}, tooltipProps), children) : React__default.default.createElement(React__default.default.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}
  */
 var 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 = tslib.__rest(_a, ["layout", "variant", "withActionButtonArrow", "noMaxWidth", "illustrationType", "smallScreenTextAlignment", "actions", "illustration", "secondaryDismiss", "actionsSlot"]);
-  var _o = React.useState(false),
-    hidden = _o[0],
-    setHidden = _o[1];
-  var _p = React.useState(false),
-    removed = _p[0],
-    setRemoved = _p[1];
+    restProps = tslib.__rest(_a, ["layout", "variant", "noMaxWidth", "illustrationType", "smallScreenTextAlignment", "illustration", "actionsSlot"]);
   var queries = useMediaQueries.useMediaQueries().queries;
-  var containerRef = React__default.default.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 React__default.default.createElement(React__default.default.Fragment, null);
-  }
   return React__default.default.createElement("div", {
-    className: classnames__default.default(GuidanceBlock_module.banner, variant && GuidanceBlock_module[variant], layout && GuidanceBlock_module[layout], hidden && GuidanceBlock_module.hidden, queries.isSmall && GuidanceBlock_module.centerContent, noMaxWidth && GuidanceBlock_module.noMaxWidth, illustrationType === 'scene' && GuidanceBlock_module.hasSceneIllustration, smallScreenTextAlignment === 'left' && GuidanceBlock_module.smallScreenTextAlignment),
-    style: {
-      marginTop: marginTop()
-    },
-    ref: containerRef,
-    onTransitionEnd: onTransitionEnd
+    className: classnames__default.default(GuidanceBlock_module.banner, variant && GuidanceBlock_module[variant], layout && GuidanceBlock_module[layout], queries.isSmall && GuidanceBlock_module.centerContent, noMaxWidth && GuidanceBlock_module.noMaxWidth, illustrationType === 'scene' && GuidanceBlock_module.hasSceneIllustration, smallScreenTextAlignment === 'left' && GuidanceBlock_module.smallScreenTextAlignment)
   }, React__default.default.createElement("div", {
     className: GuidanceBlock_module.illustrationWrapper
   }, React__default.default.createElement("div", {
@@ -99,31 +55,9 @@ var GuidanceBlock = function (_a) {
   }, (_d = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _d === void 0 ? void 0 : _d.title)), React__default.default.createElement(Text.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 ? React__default.default.createElement("div", {
+  }, (_e = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _e === void 0 ? void 0 : _e.description))), actionsSlot && React__default.default.createElement("div", {
     className: GuidanceBlock_module.buttonContainer
-  }, (actions === null || actions === void 0 ? void 0 : actions.primary) && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(WithTooltip, {
-    tooltipProps: actions.primary.tooltip
-  }, React__default.default.createElement(Button.Button, tslib.__assign({
-    icon: withActionButtonArrow ? React__default.default.createElement(Icon.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) && React__default.default.createElement(WithTooltip, {
-    tooltipProps: actions.secondary.tooltip
-  }, React__default.default.createElement("div", {
-    className: GuidanceBlock_module.secondaryAction
-  }, React__default.default.createElement(Button.Button, tslib.__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';
 exports.GuidanceBlock = GuidanceBlock;

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

@@ -9,7 +9,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/cjs/src/LinkButton/LinkButton.cjs

@@ -37,10 +37,8 @@ var LinkButton = React.forwardRef(function (_a, ref) {
     isFullWidth = _f === void 0 ? false : _f,
     isDisabled = _a.isDisabled,
     className = _a.className,
-    isReversed = _a.isReversed,
-    otherProps = tslib.__rest(_a, ["children", "variant", "size", "icon", "iconPosition", "hasHiddenLabel", "isFullWidth", "isDisabled", "className", "isReversed"]);
-  var shouldUseReverse = ReversedColors.useReversedColors();
-  var isReversedVariant = isReversed !== null && isReversed !== void 0 ? isReversed : shouldUseReverse;
+    otherProps = tslib.__rest(_a, ["children", "variant", "size", "icon", "iconPosition", "hasHiddenLabel", "isFullWidth", "isDisabled", "className"]);
+  var isReversedVariant = ReversedColors.useReversedColors();
   return React__default.default.createElement(reactAriaComponents.Link, tslib.__assign({
     ref: ref,
     className: mergeClassNames.mergeClassNames(LinkButton_module.linkButton, Button_module.button, Button_module[size], hasHiddenLabel && Button_module["".concat(size, "IconButton")], isDisabled && Button_module.isDisabled, isReversedVariant ? Button_module["".concat(variant, "Reversed")] : Button_module[variant], isFullWidth && Button_module.fullWidth, className),

package/dist/cjs/src/Modal/ConfirmationModal/ConfirmationModal.cjs

@@ -85,7 +85,9 @@ var ConfirmationModal = function (_a) {
   if (onConfirm) {
     var confirmAction = {
       label: confirmLabel,
-      onClick: onConfirm
+      onClick: onConfirm,
+      destructive: variant === 'warning',
+      primary: variant !== 'warning'
     };
     var workingProps = confirmWorking ? {
       working: true,
@@ -126,7 +128,6 @@ var ConfirmationModal = function (_a) {
     className: classnames__default.default(isProminent && ConfirmationModal_module.prominent, !unpadded && ConfirmationModal_module.padded)
   }, React__default.default.createElement(ModalAccessibleDescription.ModalAccessibleDescription, null, children))), React__default.default.createElement(ModalFooter.ModalFooter, {
     actions: footerActions,
-    appearance: variant == 'warning' ? 'destructive' : 'primary',
     unpadded: unpadded
   })));
 };

package/dist/cjs/src/Modal/ContextModal/ContextModal.cjs

@@ -97,7 +97,6 @@ var ContextModal = function (_a) {
   })))), React__default.default.createElement(ModalFooter.ModalFooter, {
     variant: image ? 'context' : undefined,
     actions: footerActions,
-    appearance: "primary",
     unpadded: unpadded
   })));
 };

package/dist/cjs/src/Modal/GenericModal/GenericModal.cjs

@@ -6,7 +6,6 @@ var react = require('@headlessui/react');
 var classnames = require('classnames');
 var reactFocusOn = require('react-focus-on');
 var useIsClientReady = require('../../utils/useIsClientReady/useIsClientReady.cjs');
-var console = require('../util/console.cjs');
 var ModalContext = require('./context/ModalContext.cjs');
 var GenericModal_module = require('./GenericModal.module.scss.cjs');
 function _interopDefault(e) {
@@ -50,7 +49,8 @@ var GenericModal = function (_a) {
     // Ensure that consumers have provided an element that labels the modal
     // to meet ARIA accessibility guidelines.
     if (!document.getElementById(labelledByID)) {
-      console.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/cjs/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.cjs

@@ -18,11 +18,9 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var 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 = tslib.__rest(_a, ["unpadded", "actions", "appearance", "alignStart", "variant"]);
+    props = tslib.__rest(_a, ["unpadded", "actions", "alignStart", "variant"]);
   var queries = useMediaQueries.useMediaQueries().queries;
   return React__default.default.createElement(ModalBody.ModalBody, {
     inputEdit: variant === 'inputEdit'
@@ -34,9 +32,8 @@ var ModalFooter = function (_a) {
       key: index
     }, React__default.default.createElement(Button.Button, tslib.__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/cjs/src/Select/Select.cjs

@@ -22,6 +22,14 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var ReactSelect__default = /*#__PURE__*/_interopDefault(ReactSelect);
 var Async__default = /*#__PURE__*/_interopDefault(Async);
 
+// react-select defaults to showing "Select..." placeholder text, which goes against our a11y
+// standards — use `label` for the field name and `description` for help text instead.
+// `noPlaceholderText` overrides the default string; `NullPlaceholder` removes the empty DOM node
+// that react-select still renders even when the text is empty.
+var noPlaceholderText = '';
+var NullPlaceholder = function () {
+  return null;
+};
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
@@ -38,8 +46,7 @@ var Select = React__default.default.forwardRef(function (_a, ref) {
     description = _a.description,
     propsFullWidth = _a.fullWidth,
     propsClassName = _a.className,
-    placeholder = _a.placeholder,
-    props = tslib.__rest(_a, ["variant", "status", "reversed", "label", "validationMessage", "description", "fullWidth", "className", "placeholder"]);
+    props = tslib.__rest(_a, ["variant", "status", "reversed", "label", "validationMessage", "description", "fullWidth", "className"]);
   var reactId = React.useId();
   // the default for fullWidth depends on the variant
   var fullWidth = propsFullWidth !== null && propsFullWidth !== void 0 ? propsFullWidth : !['secondary', 'secondary-small'].includes(variant);
@@ -51,10 +58,10 @@ var Select = React__default.default.forwardRef(function (_a, ref) {
   }, label) : null, React__default.default.createElement(ReactSelect__default.default, tslib.__assign({}, props, {
     ref: ref,
     "aria-labelledby": labelId,
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : '',
+    placeholder: noPlaceholderText,
     components: {
       Control: Control,
-      Placeholder: Placeholder,
+      Placeholder: NullPlaceholder,
       DropdownIndicator: DropdownIndicator,
       Menu: Menu,
       GroupHeading: GroupHeading,
@@ -79,14 +86,13 @@ var Select = React__default.default.forwardRef(function (_a, ref) {
 Select.displayName = 'Select';
 var AsyncSelect = React__default.default.forwardRef(function (_a, ref) {
   var propsClassName = _a.className,
-    placeholder = _a.placeholder,
-    props = tslib.__rest(_a, ["className", "placeholder"]);
+    props = tslib.__rest(_a, ["className"]);
   return React__default.default.createElement(Async__default.default, tslib.__assign({}, props, {
     ref: ref,
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : '',
+    placeholder: noPlaceholderText,
     components: {
       Control: Control,
-      Placeholder: Placeholder,
+      Placeholder: NullPlaceholder,
       DropdownIndicator: DropdownIndicator,
       Menu: Menu,
       Option: Option,
@@ -111,13 +117,6 @@ var Control = function (props) {
     className: classnames__default.default(Select_module.control, props.isFocused && Select_module.focusedControl, props.isDisabled && Select_module.disabled)
   })));
 };
-var Placeholder = function (props) {
-  return React__default.default.createElement(ReactSelect.components.Placeholder, tslib.__assign({}, props, {
-    className: Select_module.placeholderOverrides
-  }), React__default.default.createElement("span", {
-    className: Select_module.placeholder
-  }, props.children));
-};
 var DropdownIndicator = function (props) {
   return React__default.default.createElement(ReactSelect.components.DropdownIndicator, tslib.__assign({}, props, {
     className: Select_module.dropdownIndicator

package/dist/cjs/src/Select/Select.module.scss.cjs

@@ -13,7 +13,6 @@ var styles = {
   "valueContainer": "Select-module_valueContainer__MGkpr",
   "indicatorsContainer": "Select-module_indicatorsContainer__2xCsm",
   "loadingMessage": "Select-module_loadingMessage__4Ej9T",
-  "placeholder": "Select-module_placeholder__OAeGA",
   "menu": "Select-module_menu__axmUL",
   "groupHeading": "Select-module_groupHeading__eNw6U",
   "option": "Select-module_option__EdP-F",

package/dist/cjs/src/SingleSelect/SingleSelect.cjs

@@ -10,7 +10,7 @@ var FieldMessage = require('../FieldMessage/FieldMessage.cjs');
 var Popover = require('../MultiSelect/subcomponents/Popover/Popover.cjs');
 var reactDom = require('@floating-ui/react-dom');
 var SelectContext = require('./context/SelectContext.cjs');
-var ListBox = require('./subcomponents/ListBox/ListBox.cjs');
+require('./subcomponents/ListBox/ListBox.cjs');
 var ListBoxSection = require('./subcomponents/ListBoxSection/ListBoxSection.cjs');
 var ListItem = require('./subcomponents/ListItem/ListItem.cjs');
 require('./subcomponents/ListItems/ListItems.cjs');
@@ -50,12 +50,10 @@ var SingleSelect = function (_a) {
     classNameOverride = _a.classNameOverride,
     selectedKey = _a.selectedKey,
     description = _a.description,
-    _d = _a.placeholder,
-    placeholder = _d === void 0 ? '' : _d,
     isDisabled = _a.isDisabled,
     onSelectionChange = _a.onSelectionChange,
     portalContainerId = _a.portalContainerId,
-    restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "onSelectionChange", "portalContainerId"]);
+    restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "classNameOverride", "selectedKey", "description", "isDisabled", "onSelectionChange", "portalContainerId"]);
   var refs = reactDom.useFloating().refs;
   var triggerRef = refs.reference;
   var fallbackId = React.useId();
@@ -71,7 +69,6 @@ var SingleSelect = function (_a) {
     disabledKeys: disabledKeys,
     selectedKey: typeof selectedKey === 'number' ? selectedKey.toString() : selectedKey,
     description: description,
-    placeholder: placeholder,
     isDisabled: isDisabled,
     isRequired: isRequired,
     onSelectionChange: onSelectionChange ? function (key) {
@@ -79,13 +76,13 @@ var SingleSelect = function (_a) {
     } : undefined
   }, restProps);
   var state = select.useSelectState(ariaSelectProps);
-  var _e = select$1.useSelect(ariaSelectProps, state, triggerRef),
-    labelProps = _e.labelProps,
-    reactAriaTriggerProps = _e.triggerProps,
-    valueProps = _e.valueProps,
-    menuProps = _e.menuProps,
-    errorMessageProps = _e.errorMessageProps,
-    descriptionProps = _e.descriptionProps;
+  var _d = select$1.useSelect(ariaSelectProps, state, triggerRef),
+    labelProps = _d.labelProps,
+    reactAriaTriggerProps = _d.triggerProps,
+    valueProps = _d.valueProps,
+    menuProps = _d.menuProps,
+    errorMessageProps = _d.errorMessageProps,
+    descriptionProps = _d.descriptionProps;
   // Hack incoming:
   // react-aria/useSelect wants to prefix the combobox's accessible name with the value of the select.
   // We use role=combobox, meaning screen readers will read the value.
@@ -102,7 +99,6 @@ var SingleSelect = function (_a) {
     'value': (_b = state === null || state === void 0 ? void 0 : state.selectedItem) === null || _b === void 0 ? void 0 : _b.rendered,
     valueProps: valueProps,
     'isOpen': state.isOpen,
-    placeholder: placeholder,
     status: status,
     'isDisabled': triggerProps.isDisabled,
     isReversed: isReversed,
@@ -110,9 +106,9 @@ var SingleSelect = function (_a) {
     'aria-describedby': classnames__default.default(validationMessage && validationId, description && descriptionId),
     'aria-required': isRequired
   });
-  var _f = React.useState(),
-    portalContainer = _f[0],
-    setPortalContainer = _f[1];
+  var _e = React.useState(),
+    portalContainer = _e[0],
+    setPortalContainer = _e[1];
   React.useEffect(function () {
     if (portalContainerId) {
       var portalElement = document.getElementById(portalContainerId);
@@ -153,7 +149,4 @@ SingleSelect.Section = ListBoxSection.ListBoxSection;
 SingleSelect.SectionDivider = SectionDivider.SectionDivider;
 SingleSelect.Option = Option.Option;
 SingleSelect.ItemDefaultRender = ListItem.ListItem;
-// @deprecated Legacy exported aliases
-SingleSelect.TriggerButton = SelectToggle.SelectToggle;
-SingleSelect.ListBox = ListBox.ListBox;
 exports.SingleSelect = SingleSelect;

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/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/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/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),