@kaizen/components 1.47.0 → 1.47.1

package/dist/esm/Modal/GenericModal/subcomponents/ModalAccessibleDescription/ModalAccessibleDescription.mjs

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ModalContext } from '../../context/ModalContext.mjs';
+import styles from './ModalAccessibleDescription.module.scss.mjs';
+const ModalAccessibleDescription = /*#__PURE__*/function () {
+  const ModalAccessibleDescription = function (_a) {
+    var children = _a.children;
+    return /*#__PURE__*/React.createElement(ModalContext.Consumer, null, function (_a) {
+      var describedByID = _a.describedByID;
+      return /*#__PURE__*/React.createElement("div", {
+        id: describedByID,
+        className: styles.modalDescription
+      }, children);
+    });
+  };
+  ModalAccessibleDescription.displayName = "ModalAccessibleDescription";
+  return ModalAccessibleDescription;
+}();
+export { ModalAccessibleDescription };

package/dist/esm/Modal/GenericModal/subcomponents/ModalAccessibleDescription/ModalAccessibleDescription.module.scss.mjs

@@ -0,0 +1,7 @@
+import { styleInject } from '../../../../__build-tools/styleInject.mjs';
+var css_248z = ".ModalAccessibleDescription-module_modalDescription__gq-Mn{grid-column-start:2}";
+var styles = {
+  "modalDescription": "ModalAccessibleDescription-module_modalDescription__gq-Mn"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Modal/GenericModal/subcomponents/ModalAccessibleLabel/ModalAccessibleLabel.mjs

@@ -0,0 +1,22 @@
+import React from 'react';
+import classnames from 'classnames';
+import { ModalContext } from '../../context/ModalContext.mjs';
+import styles from './ModalAccessibleLabel.module.scss.mjs';
+const ModalAccessibleLabel = /*#__PURE__*/function () {
+  const ModalAccessibleLabel = function (_a) {
+    var children = _a.children,
+      _b = _a.isProminent,
+      isProminent = _b === void 0 ? false : _b;
+    return /*#__PURE__*/React.createElement(ModalContext.Consumer, null, function (_a) {
+      var labelledByID = _a.labelledByID;
+      return /*#__PURE__*/React.createElement("div", {
+        id: labelledByID,
+        tabIndex: -1,
+        className: classnames(styles.modalLabel, isProminent && styles.prominent)
+      }, children);
+    });
+  };
+  ModalAccessibleLabel.displayName = "ModalAccessibleLabel";
+  return ModalAccessibleLabel;
+}();
+export { ModalAccessibleLabel };

package/dist/esm/Modal/GenericModal/subcomponents/ModalAccessibleLabel/ModalAccessibleLabel.module.scss.mjs

@@ -0,0 +1,8 @@
+import { styleInject } from '../../../../__build-tools/styleInject.mjs';
+var css_248z = ".ModalAccessibleLabel-module_modalLabel__CQAIs{position:relative}@media (max-width:768px){.ModalAccessibleLabel-module_modalLabel__CQAIs h2{font-size:1.625rem;line-height:2rem}}@media (max-width:375px){.ModalAccessibleLabel-module_modalLabel__CQAIs h2{font-size:1.5rem;line-height:1.875rem}}.ModalAccessibleLabel-module_modalLabel__CQAIs.ModalAccessibleLabel-module_prominent__WEPnY{grid-column-start:2;text-align:left}.ModalAccessibleLabel-module_modalLabel__CQAIs:focus{outline:none}.ModalAccessibleLabel-module_modalLabel__CQAIs:focus-visible:after{background:transparent;border-color:var(--color-blue-500,#0168b3);border-radius:var(--border-focus-ring-border-radius,10px);border-style:var(--border-focus-ring-border-style,solid);border-width:var(--border-focus-ring-border-width,2px);content:\"\";inset:calc(var(--border-focus-ring-border-width, 2px)*2*-1 + -1px);position:absolute}";
+var styles = {
+  "modalLabel": "ModalAccessibleLabel-module_modalLabel__CQAIs",
+  "prominent": "ModalAccessibleLabel-module_prominent__WEPnY"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Modal/GenericModal/subcomponents/ModalBody/ModalBody.mjs

@@ -0,0 +1,16 @@
+import React from 'react';
+import classnames from 'classnames';
+import styles from './ModalBody.module.scss.mjs';
+const ModalBody = /*#__PURE__*/function () {
+  const ModalBody = function (_a) {
+    var _b = _a.inputEdit,
+      inputEdit = _b === void 0 ? false : _b,
+      children = _a.children;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(inputEdit && styles.inputEdit)
+    }, children);
+  };
+  ModalBody.displayName = "ModalBody";
+  return ModalBody;
+}();
+export { ModalBody };

package/dist/esm/Modal/GenericModal/subcomponents/ModalBody/ModalBody.module.scss.mjs

@@ -0,0 +1,7 @@
+import { styleInject } from '../../../../__build-tools/styleInject.mjs';
+var css_248z = ".ModalBody-module_inputEdit__4Krgt{background-color:var(--color-gray-200,#f4f4f5);border-radius:var(--border-solid-border-radius,7px)}";
+var styles = {
+  "inputEdit": "ModalBody-module_inputEdit__4Krgt"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

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

@@ -0,0 +1,39 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { Button } from '../../../../Button/Button/Button.mjs';
+import '../../../../Button/IconButton/IconButton.mjs';
+import { useMediaQueries } from '../../../../utils/useMediaQueries.mjs';
+import { ModalBody } from '../ModalBody/ModalBody.mjs';
+import styles from './ModalFooter.module.scss.mjs';
+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"]);
+    var queries = useMediaQueries().queries;
+    return /*#__PURE__*/React.createElement(ModalBody, {
+      inputEdit: variant === "inputEdit"
+    }, /*#__PURE__*/React.createElement("div", __assign({
+      className: classnames(styles.actions, !unpadded && styles.padded, variant === "context" && styles.informationPadded, alignStart && styles.actionsAlignStart)
+    }, props), actions.map(function (action, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.actionButton,
+        key: index
+      }, /*#__PURE__*/React.createElement(Button, __assign({
+        type: "button",
+        primary: index === 0 && appearance === "primary",
+        destructive: index === 0 && appearance === "destructive",
+        secondary: index > 0,
+        fullWidth: queries.isSmall
+      }, action)));
+    })));
+  };
+  ModalFooter.displayName = "ModalFooter";
+  return ModalFooter;
+}();
+export { ModalFooter };

package/dist/esm/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.module.scss.mjs

@@ -0,0 +1,17 @@
+import { styleInject } from '../../../../__build-tools/styleInject.mjs';
+var css_248z = ".ModalFooter-module_actions__q2PiD{display:flex;flex-direction:row-reverse;justify-content:flex-start}.ModalFooter-module_actionsAlignStart__4wZ75{flex-direction:row-reverse;justify-content:flex-end}.ModalFooter-module_padded__9PLtz{flex-direction:column;padding:var(--spacing-md,1.5rem)}@media (min-width:768px){.ModalFooter-module_padded__9PLtz{flex-direction:row-reverse;padding:0 var(--spacing-lg,2.25rem) var(--spacing-lg,2.25rem) var(--spacing-lg,2.25rem)}}.ModalFooter-module_actionButton__YD4vG{width:100%}@media (min-width:768px){.ModalFooter-module_actionButton__YD4vG{width:inherit}}.ModalFooter-module_actionButton__YD4vG+.ModalFooter-module_actionButton__YD4vG{margin-right:var(--spacing-sm,.75rem)}@media (max-width:calc(768px - 1px)){.ModalFooter-module_actionButton__YD4vG+.ModalFooter-module_actionButton__YD4vG{margin-top:var(--spacing-sm,.75rem)}}.ModalFooter-module_footerWrap__IEAMY{align-items:baseline;box-sizing:border-box;width:100%}.ModalFooter-module_center__w232S{display:flex;justify-content:center}.ModalFooter-module_border__jj-Zy{border-top:1px solid var(--border-solid-border-color,#e1e2ea)}.ModalFooter-module_start__0GJno{display:flex;justify-content:flex-start}.ModalFooter-module_end__KuUbk{display:flex;justify-content:flex-end}.ModalFooter-module_fixed__mV5fZ{bottom:0;left:0;position:absolute}.ModalFooter-module_filler__kElGb{visibility:hidden}";
+var styles = {
+  "actions": "ModalFooter-module_actions__q2PiD",
+  "actionsAlignStart": "ModalFooter-module_actionsAlignStart__4wZ75",
+  "padded": "ModalFooter-module_padded__9PLtz",
+  "actionButton": "ModalFooter-module_actionButton__YD4vG",
+  "footerWrap": "ModalFooter-module_footerWrap__IEAMY",
+  "center": "ModalFooter-module_center__w232S",
+  "border": "ModalFooter-module_border__jj-Zy",
+  "start": "ModalFooter-module_start__0GJno",
+  "end": "ModalFooter-module_end__KuUbk",
+  "fixed": "ModalFooter-module_fixed__mV5fZ",
+  "filler": "ModalFooter-module_filler__kElGb"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.mjs

@@ -0,0 +1,29 @@
+import React from 'react';
+import '../../../../Button/Button/Button.mjs';
+import { IconButton } from '../../../../Button/IconButton/IconButton.mjs';
+import 'tslib';
+import '../../../../Icon/subcomponents/SVG/SVG.mjs';
+import { CloseIcon } from '../../../../Icon/CloseIcon.mjs';
+import { ModalBody } from '../ModalBody/ModalBody.mjs';
+import styles from './ModalHeader.module.scss.mjs';
+const ModalHeader = /*#__PURE__*/function () {
+  const ModalHeader = function (_a) {
+    var reversed = _a.reversed,
+      onDismiss = _a.onDismiss,
+      children = _a.children;
+    return /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
+      className: styles.dismissButton
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      label: "Dismiss",
+      icon: /*#__PURE__*/React.createElement(CloseIcon, {
+        role: "presentation"
+      }),
+      reversed: reversed,
+      onClick: onDismiss,
+      disabled: onDismiss == undefined
+    })), children);
+  };
+  ModalHeader.displayName = "ModalHeader";
+  return ModalHeader;
+}();
+export { ModalHeader };

package/dist/esm/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.module.scss.mjs

@@ -0,0 +1,10 @@
+import { styleInject } from '../../../../__build-tools/styleInject.mjs';
+var css_248z = ".ModalHeader-module_dismissButton__YhHZl{left:auto;position:absolute;right:0;top:0;z-index:1060}.ModalHeader-module_dismissButton__YhHZl[dir=rtl],[dir=rtl] .ModalHeader-module_dismissButton__YhHZl{left:0;right:auto}.ModalHeader-module_layout__K8x4O{width:100%}.ModalHeader-module_fixed__JEeic{left:0;position:absolute;top:0}.ModalHeader-module_filler__w1MCN{visibility:hidden}";
+var styles = {
+  "dismissButton": "ModalHeader-module_dismissButton__YhHZl",
+  "layout": "ModalHeader-module_layout__K8x4O",
+  "fixed": "ModalHeader-module_fixed__JEeic",
+  "filler": "ModalHeader-module_filler__w1MCN"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Modal/InputEditModal/InputEditModal.mjs

@@ -0,0 +1,85 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { Heading } from '../../Heading/Heading.mjs';
+import { GenericModal } from '../GenericModal/GenericModal.mjs';
+import '../GenericModal/context/ModalContext.mjs';
+import '../GenericModal/subcomponents/ModalAccessibleDescription/ModalAccessibleDescription.mjs';
+import { ModalFooter } from '../GenericModal/subcomponents/ModalFooter/ModalFooter.mjs';
+import { ModalHeader } from '../GenericModal/subcomponents/ModalHeader/ModalHeader.mjs';
+import { ModalAccessibleLabel } from '../GenericModal/subcomponents/ModalAccessibleLabel/ModalAccessibleLabel.mjs';
+import { ModalBody } from '../GenericModal/subcomponents/ModalBody/ModalBody.mjs';
+import styles from './InputEditModal.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal#Input-Edit-Modal Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-modals-inputeditmodal--docs Storybook}
+ */
+const InputEditModal = /*#__PURE__*/function () {
+  const InputEditModal = function (_a) {
+    var isOpen = _a.isOpen,
+      mood = _a.mood,
+      title = _a.title,
+      onSubmit = _a.onSubmit,
+      onSecondaryAction = _a.onSecondaryAction,
+      onAfterLeave = _a.onAfterLeave,
+      _b = _a.localeDirection,
+      localeDirection = _b === void 0 ? "ltr" : _b,
+      _c = _a.submitLabel,
+      submitLabel = _c === void 0 ? "Submit" : _c,
+      _d = _a.dismissLabel,
+      dismissLabel = _d === void 0 ? "Cancel" : _d,
+      secondaryLabel = _a.secondaryLabel,
+      submitWorking = _a.submitWorking,
+      children = _a.children,
+      _e = _a.unpadded,
+      unpadded = _e === void 0 ? false : _e,
+      propsOnDismiss = _a.onDismiss,
+      onAfterEnter = _a.onAfterEnter,
+      props = __rest(_a, ["isOpen", "mood", "title", "onSubmit", "onSecondaryAction", "onAfterLeave", "localeDirection", "submitLabel", "dismissLabel", "secondaryLabel", "submitWorking", "children", "unpadded", "onDismiss", "onAfterEnter"]);
+    var onDismiss = submitWorking ? undefined : propsOnDismiss;
+    var submitAction = {
+      label: submitLabel,
+      onClick: onSubmit
+    };
+    var workingProps = submitWorking ? {
+      working: true,
+      workingLabel: submitWorking.label,
+      workingLabelHidden: submitWorking.labelHidden
+    } : {};
+    var showSecondary = onSecondaryAction && secondaryLabel;
+    var footerActions = [__assign(__assign({}, submitAction), workingProps), {
+      label: showSecondary ? secondaryLabel : dismissLabel,
+      onClick: showSecondary ? onSecondaryAction : onDismiss,
+      disabled: !!submitWorking
+    }];
+    return /*#__PURE__*/React.createElement(GenericModal, {
+      isOpen: isOpen,
+      onEscapeKeyup: onDismiss,
+      onAfterLeave: onAfterLeave,
+      onAfterEnter: onAfterEnter
+    }, /*#__PURE__*/React.createElement("div", __assign({
+      className: styles.modal,
+      dir: localeDirection,
+      "data-modal": true
+    }, props), /*#__PURE__*/React.createElement(ModalHeader, {
+      onDismiss: onDismiss
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.header, localeDirection === "rtl" && styles.textAlignRTL, !unpadded && styles.padded)
+    }, /*#__PURE__*/React.createElement(ModalAccessibleLabel, null, /*#__PURE__*/React.createElement(Heading, {
+      tag: "h2",
+      variant: "heading-2"
+    }, title)))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.body, !unpadded && styles.padded),
+      dir: localeDirection
+    }, children)), /*#__PURE__*/React.createElement(ModalFooter, {
+      actions: footerActions,
+      appearance: mood === "destructive" ? "destructive" : "primary",
+      variant: "inputEdit",
+      unpadded: unpadded
+    })));
+  };
+  InputEditModal.displayName = "InputEditModal";
+  return InputEditModal;
+}();
+export { InputEditModal };

package/dist/esm/Modal/InputEditModal/InputEditModal.module.scss.mjs

@@ -0,0 +1,26 @@
+import { styleInject } from '../../__build-tools/styleInject.mjs';
+var css_248z = ".InputEditModal-module_defaultModalWidth__My9Eh{max-width:600px;min-width:300px}.InputEditModal-module_backdropLayer__aVLSb{background-color:#000;bottom:0;left:0;opacity:50%;position:fixed;right:0;top:0;z-index:1040}.InputEditModal-module_backdropLayer__aVLSb[dir=rtl],[dir=rtl] .InputEditModal-module_backdropLayer__aVLSb{left:0;right:0}.InputEditModal-module_scrollLayer__isygg{align-items:center;bottom:0;display:flex;left:0;overflow-y:auto;position:fixed;right:0;top:0;z-index:1050}.InputEditModal-module_scrollLayer__isygg[dir=rtl],[dir=rtl] .InputEditModal-module_scrollLayer__isygg{left:0;right:0}.InputEditModal-module_modalLayer__r5vqj{margin:auto;padding:1.5rem 0;width:100%}.InputEditModal-module_modal__SbQqp{-webkit-font-smoothing:antialiased;background-color:var(--color-white,#fff);border-radius:var(--border-solid-border-radius,7px);box-shadow:var(--shadow-large-box-shadow,0 3px 9px 0 rgba(0,0,0,.1),0 8px 40px 0 rgba(0,0,0,.08));color:var(--color-purple-800,#2f2438);margin:auto;position:relative;width:90%}@media (min-width:768px){.InputEditModal-module_modal__SbQqp{width:100%}}.InputEditModal-module_animatingEnter__qZgX2{transition-duration:var(--animation-duration-fast,.3s)}.InputEditModal-module_animatingEnter__qZgX2 .InputEditModal-module_backdropLayer__aVLSb{animation-duration:201ms;animation-fill-mode:forwards;animation-name:InputEditModal-module_fade-0-to-0-5__ywvjR}@keyframes InputEditModal-module_fade-0-to-0-5__ywvjR{0%{opacity:0}to{opacity:.5}}.InputEditModal-module_animatingEnter__qZgX2 [data-modal]{animation-duration:var(--animation-duration-fast,.3s);animation-fill-mode:forwards;animation-name:InputEditModal-module_custom-1__wSZX6;animation-timing-function:var(--animation-easing-function-bounce-in,cubic-bezier(.485,.155,.24,1.245))}@keyframes InputEditModal-module_custom-1__wSZX6{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.InputEditModal-module_animatingLeave__S2HGz{transition-duration:var(--animation-duration-rapid,.2s)}.InputEditModal-module_animatingLeave__S2HGz .InputEditModal-module_backdropLayer__aVLSb{animation-duration:var(--animation-duration-rapid,.2s);animation-fill-mode:forwards;animation-name:InputEditModal-module_fade-0-5-to-0__s2WmG}@keyframes InputEditModal-module_fade-0-5-to-0__s2WmG{0%{opacity:.5}to{opacity:0}}.InputEditModal-module_animatingLeave__S2HGz [data-modal]{animation-duration:var(--animation-duration-rapid,.2s);animation-fill-mode:forwards;animation-name:InputEditModal-module_custom-3__T3riv;animation-timing-function:var(--animation-easing-function-bounce-out,cubic-bezier(.485,.155,.515,.845))}@keyframes InputEditModal-module_custom-3__T3riv{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}.InputEditModal-module_unscrollable__GN1M2{overflow:hidden!important}.InputEditModal-module_pseudoScrollbar__WCHmn{padding-right:15px!important}.InputEditModal-module_hide__N88RW{opacity:0;pointer-events:none}.InputEditModal-module_modal__SbQqp{max-width:600px;min-width:300px}.InputEditModal-module_animatingEnter__qZgX2 .InputEditModal-module_modal__SbQqp{animation-duration:var(--animation-duration-fast,.3s);animation-fill-mode:forwards;animation-name:InputEditModal-module_custom-5__trORr;animation-timing-function:var(--animation-easing-function-bounce-in,cubic-bezier(.485,.155,.24,1.245))}@keyframes InputEditModal-module_custom-5__trORr{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.InputEditModal-module_animatingLeave__S2HGz .InputEditModal-module_modal__SbQqp{animation-duration:var(--animation-duration-rapid,.2s);animation-fill-mode:forwards;animation-name:InputEditModal-module_custom-7__-98CZ;animation-timing-function:var(--animation-easing-function-bounce-out,cubic-bezier(.485,.155,.515,.845))}@keyframes InputEditModal-module_custom-7__-98CZ{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}.InputEditModal-module_header__nivTf{color:var(--color-purple-800,#2f2438);text-align:left}.InputEditModal-module_header__nivTf.InputEditModal-module_textAlignRTL__5QQP8{text-align:right}.InputEditModal-module_header__nivTf.InputEditModal-module_padded__ZdEIS{padding:var(--spacing-md,1.5rem) var(--spacing-lg,2.25rem)}@media (max-width:768px){.InputEditModal-module_header__nivTf.InputEditModal-module_padded__ZdEIS{padding:var(--spacing-md,1.5rem)}}.InputEditModal-module_body__LyxBE{background:var(--color-gray-200,#f4f4f5)}.InputEditModal-module_body__LyxBE.InputEditModal-module_padded__ZdEIS{padding:var(--spacing-md,1.5rem) var(--spacing-lg,2.25rem) var(--spacing-md,1.5rem) var(--spacing-lg,2.25rem)}@media (max-width:768px){.InputEditModal-module_body__LyxBE.InputEditModal-module_padded__ZdEIS{padding:var(--spacing-md,1.5rem)}}";
+var styles = {
+  "defaultModalWidth": "InputEditModal-module_defaultModalWidth__My9Eh",
+  "backdropLayer": "InputEditModal-module_backdropLayer__aVLSb",
+  "scrollLayer": "InputEditModal-module_scrollLayer__isygg",
+  "modalLayer": "InputEditModal-module_modalLayer__r5vqj",
+  "modal": "InputEditModal-module_modal__SbQqp",
+  "animatingEnter": "InputEditModal-module_animatingEnter__qZgX2",
+  "fade-0-to-0-5": "InputEditModal-module_fade-0-to-0-5__ywvjR",
+  "custom-1": "InputEditModal-module_custom-1__wSZX6",
+  "animatingLeave": "InputEditModal-module_animatingLeave__S2HGz",
+  "fade-0-5-to-0": "InputEditModal-module_fade-0-5-to-0__s2WmG",
+  "custom-3": "InputEditModal-module_custom-3__T3riv",
+  "unscrollable": "InputEditModal-module_unscrollable__GN1M2",
+  "pseudoScrollbar": "InputEditModal-module_pseudoScrollbar__WCHmn",
+  "hide": "InputEditModal-module_hide__N88RW",
+  "custom-5": "InputEditModal-module_custom-5__trORr",
+  "custom-7": "InputEditModal-module_custom-7__-98CZ",
+  "header": "InputEditModal-module_header__nivTf",
+  "textAlignRTL": "InputEditModal-module_textAlignRTL__5QQP8",
+  "padded": "InputEditModal-module_padded__ZdEIS",
+  "body": "InputEditModal-module_body__LyxBE"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Modal/util/console.mjs

@@ -0,0 +1,13 @@
+var yellow = "\u001b[33m ";
+var reset = "\u001b[0m ";
+/**
+ * @deprecated Do not use ever again
+ */
+var warn = function (message) {
+  // eslint-disable-next-line no-console
+  console.warn("".concat(yellow, "\nCULTUREAMP UI WARNING:\n").concat(singleLine(message)).concat(reset, "\n"));
+};
+var singleLine = function (message) {
+  return message.replace(/^ +/gm, " ").replace(/\n|\r/gm, "").trim();
+};
+export { singleLine, warn };

package/dist/esm/MultiSelect/MultiSelect.mjs

@@ -0,0 +1,110 @@
+import { __rest, __assign } from 'tslib';
+import React, { useId, useRef } from 'react';
+import classnames from 'classnames';
+import { FieldMessage } from '../FieldMessage/FieldMessage.mjs';
+import { Heading } from '../Heading/Heading.mjs';
+import { MultiSelectOptions } from './subcomponents/MultiSelectOptions/MultiSelectOptions.mjs';
+import { MultiSelectToggle } from './subcomponents/MultiSelectToggle/MultiSelectToggle.mjs';
+import { Popover } from './subcomponents/Popover/Popover.mjs';
+import { useFloating } from '@floating-ui/react-dom';
+import styles from './MultiSelect.module.scss.mjs';
+const MultiSelect = /*#__PURE__*/function () {
+  const MultiSelect = function (_a) {
+    var propsId = _a.id,
+      label = _a.label,
+      items = _a.items,
+      selectedValues = _a.selectedValues,
+      description = _a.description,
+      onSelectedValuesChange = _a.onSelectedValuesChange,
+      isOpen = _a.isOpen,
+      onOpenChange = _a.onOpenChange,
+      classNameOverride = _a.classNameOverride,
+      validationMessage = _a.validationMessage,
+      restProps = __rest(_a, ["id", "label", "items", "selectedValues", "description", "onSelectedValuesChange", "isOpen", "onOpenChange", "classNameOverride", "validationMessage"]);
+    var id = propsId !== null && propsId !== void 0 ? propsId : useId();
+    var descriptionId = "".concat(id, "-description");
+    var validationId = "".concat(id, "-validation-message");
+    var toggleButtonRef = useRef(null);
+    var refs = useFloating().refs;
+    var handleToggleClick = function () {
+      return onOpenChange(!isOpen);
+    };
+    var handleClose = function () {
+      return onOpenChange(false);
+    };
+    var onClickOutside = function (e) {
+      var toggle = refs.reference.current;
+      var isInToggle = toggle.contains(e.target);
+      if (!isInToggle) {
+        e.stopPropagation();
+        handleClose();
+      }
+    };
+    var itemsMap = items.reduce(function (acc, item) {
+      acc[item.value] = item;
+      return acc;
+    }, {});
+    var handleOnRemoveOption = function (optionValue) {
+      var newValues = new Set(selectedValues.values());
+      newValues.delete(optionValue);
+      onSelectedValuesChange(newValues);
+    };
+    var handleRemoveAllOptions = function () {
+      var newValues = new Set([]);
+      onSelectedValuesChange(newValues);
+    };
+    return /*#__PURE__*/React.createElement("div", __assign({
+      id: id,
+      className: classnames(classNameOverride)
+    }, restProps), /*#__PURE__*/React.createElement(Heading, {
+      tag: "span",
+      variant: "heading-6",
+      id: "".concat(id, "--label")
+    }, label), /*#__PURE__*/React.createElement("div", {
+      ref: refs.setReference,
+      className: styles.toggleContainer
+    }, /*#__PURE__*/React.createElement(MultiSelectToggle, {
+      ref: toggleButtonRef,
+      id: "".concat(id, "--toggle"),
+      "aria-labelledby": "".concat(id, "--label"),
+      "aria-describedby": "".concat(validationId, " ").concat(descriptionId),
+      "aria-controls": "".concat(id, "--popover"),
+      onClick: handleToggleClick,
+      isOpen: isOpen,
+      selectedOptions: Array.from(selectedValues).map(function (value) {
+        return itemsMap[value];
+      }),
+      status: validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.status,
+      onRemoveOption: handleOnRemoveOption,
+      onRemoveAllOptions: handleRemoveAllOptions
+    })), validationMessage && ( /*#__PURE__*/React.createElement(FieldMessage, __assign({
+      id: validationId
+    }, validationMessage))), description && /*#__PURE__*/React.createElement(FieldMessage, {
+      id: descriptionId,
+      message: description
+    }), isOpen && ( /*#__PURE__*/React.createElement(Popover, {
+      refs: refs,
+      id: "".concat(id, "--popover"),
+      focusOnProps: {
+        enabled: true,
+        onClickOutside: onClickOutside,
+        onEscapeKey: handleClose,
+        shards: [toggleButtonRef],
+        noIsolation: true,
+        onActivation: function () {
+          var _a, _b;
+          return (_b = (_a = refs.floating) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+      },
+      classNameOverride: styles.popover
+    }, /*#__PURE__*/React.createElement(MultiSelectOptions, {
+      id: "".concat(id, "--options"),
+      options: items,
+      onChange: onSelectedValuesChange,
+      selectedValues: selectedValues
+    }))));
+  };
+  MultiSelect.displayName = "MultiSelect";
+  return MultiSelect;
+}();
+export { MultiSelect };

package/dist/esm/MultiSelect/MultiSelect.module.scss.mjs

@@ -0,0 +1,8 @@
+import { styleInject } from '../__build-tools/styleInject.mjs';
+var css_248z = ".MultiSelect-module_toggleContainer__AxNnf{margin-top:var(--spacing-6,.375rem)}.MultiSelect-module_popover__jI13O{padding:var(--spacing-12,.75rem)}";
+var styles = {
+  "toggleContainer": "MultiSelect-module_toggleContainer__AxNnf",
+  "popover": "MultiSelect-module_popover__jI13O"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/MultiSelect/subcomponents/Checkbox/Checkbox.mjs

@@ -0,0 +1,57 @@
+import { __rest, __assign } from 'tslib';
+import React, { useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import '../../../Icon/subcomponents/SVG/SVG.mjs';
+import { CheckIcon } from '../../../Icon/CheckIcon.mjs';
+import { MinusIcon } from '../../../Icon/MinusIcon.mjs';
+import styles from './Checkbox.module.scss.mjs';
+var renderIcon = function (status) {
+  switch (status) {
+    case "indeterminate":
+      return /*#__PURE__*/React.createElement(MinusIcon, {
+        role: "presentation",
+        classNameOverride: styles.icon
+      });
+    case "checked":
+      return /*#__PURE__*/React.createElement(CheckIcon, {
+        role: "presentation",
+        classNameOverride: styles.icon
+      });
+    default:
+      return null;
+  }
+};
+const Checkbox = /*#__PURE__*/function () {
+  const Checkbox = function (_a) {
+    var checkedStatus = _a.checkedStatus,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["checkedStatus", "classNameOverride"]);
+    var checkboxRef = useRef(null);
+    useEffect(function () {
+      if (checkboxRef.current) {
+        if (checkedStatus === "checked") {
+          checkboxRef.current.checked = true;
+          checkboxRef.current.indeterminate = false;
+        } else if (checkedStatus === "unchecked") {
+          checkboxRef.current.checked = false;
+          checkboxRef.current.indeterminate = false;
+        } else if (checkedStatus === "indeterminate") {
+          checkboxRef.current.checked = false;
+          checkboxRef.current.indeterminate = true;
+        }
+      }
+    }, [checkedStatus]);
+    return /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles.checkbox, checkedStatus !== "unchecked" && styles.selected, classNameOverride)
+    }, /*#__PURE__*/React.createElement("input", __assign({
+      ref: checkboxRef,
+      type: "checkbox",
+      className: styles.nativeCheckbox
+    }, restProps)), /*#__PURE__*/React.createElement("span", {
+      className: styles.iconContainer
+    }, renderIcon(checkedStatus)));
+  };
+  Checkbox.displayName = "Checkbox";
+  return Checkbox;
+}();
+export { Checkbox };

package/dist/esm/MultiSelect/subcomponents/Checkbox/Checkbox.module.scss.mjs

@@ -0,0 +1,11 @@
+import { styleInject } from '../../../__build-tools/styleInject.mjs';
+var css_248z = ".Checkbox-module_checkbox__0LHj5{background:var(--color-white,#fff);border:var(--border-solid-border-width,2px) var(--border-solid-border-style,solid) var(--color-gray-500,#878792);border-radius:var(--border-solid-border-radius,7px);box-sizing:border-box;display:inline-block;height:24px;min-width:24px;position:relative;width:24px}.Checkbox-module_checkbox__0LHj5:focus-within,.Checkbox-module_checkbox__0LHj5:hover{background:var(--color-gray-200,#f4f4f5);border-color:var(--color-gray-600,#524e56)}.Checkbox-module_checkbox__0LHj5:focus-within:after{border-color:var(--color-blue-500,#0168b3);border-radius:var(--border-focus-ring-border-radius,10px);border-style:var(--border-focus-ring-border-style,solid);border-width:var(--border-focus-ring-border-width,2px);content:\"\";height:26px;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:26px}.Checkbox-module_selected__-Nd6E{background:var(--color-gray-500,#878792);background-color:var(--color-gray-500,#878792)}.Checkbox-module_selected__-Nd6E:focus-within,.Checkbox-module_selected__-Nd6E:hover{background:var(--color-gray-600,#524e56);border-color:var(--color-gray-600,#524e56)}.Checkbox-module_nativeCheckbox__BauKG{height:100%;opacity:0;position:absolute;width:100%}.Checkbox-module_iconContainer__Nsip6{display:inline-block;height:100%;pointer-events:none;position:relative;width:100%}.Checkbox-module_icon__2b48e{color:var(--color-white,#fff);height:24px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:24px}";
+var styles = {
+  "checkbox": "Checkbox-module_checkbox__0LHj5",
+  "selected": "Checkbox-module_selected__-Nd6E",
+  "nativeCheckbox": "Checkbox-module_nativeCheckbox__BauKG",
+  "iconContainer": "Checkbox-module_iconContainer__Nsip6",
+  "icon": "Checkbox-module_icon__2b48e"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/MultiSelect/subcomponents/MultiSelectOptionField/MultiSelectOptionField.mjs

@@ -0,0 +1,30 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { Checkbox } from '../Checkbox/Checkbox.mjs';
+import styles from './MultiSelectOptionField.module.scss.mjs';
+const MultiSelectOptionField = /*#__PURE__*/function () {
+  const MultiSelectOptionField = function (_a) {
+    var id = _a.id,
+      option = _a.option,
+      checkedStatus = _a.checkedStatus,
+      onChange = _a.onChange,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["id", "option", "checkedStatus", "onChange", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: classnames(styles.multiSelectOptionField, classNameOverride)
+    }, restProps), /*#__PURE__*/React.createElement(Checkbox, {
+      id: id,
+      checkedStatus: checkedStatus,
+      onChange: onChange,
+      value: option.value,
+      classNameOverride: classnames(styles.checkbox, [checkedStatus !== "unchecked" && styles.checked])
+    }), /*#__PURE__*/React.createElement("label", {
+      htmlFor: id,
+      className: styles.label
+    }, option.label));
+  };
+  MultiSelectOptionField.displayName = "MultiSelect.OptionField";
+  return MultiSelectOptionField;
+}();
+export { MultiSelectOptionField };

package/dist/esm/MultiSelect/subcomponents/MultiSelectOptionField/MultiSelectOptionField.module.scss.mjs

@@ -0,0 +1,10 @@
+import { styleInject } from '../../../__build-tools/styleInject.mjs';
+var css_248z = ".MultiSelectOptionField-module_multiSelectOptionField__-PNh-{align-items:flex-start;border-radius:var(--border-solid-border-radius,7px);display:flex;gap:var(--spacing-6,.375rem);padding:var(--spacing-6,.375rem);position:relative}.MultiSelectOptionField-module_multiSelectOptionField__-PNh-:focus-within,.MultiSelectOptionField-module_multiSelectOptionField__-PNh-:hover{background:var(--color-blue-100,#e6f6ff)}.MultiSelectOptionField-module_multiSelectOptionField__-PNh-:focus-within .MultiSelectOptionField-module_checkbox__rDOxI,.MultiSelectOptionField-module_multiSelectOptionField__-PNh-:hover .MultiSelectOptionField-module_checkbox__rDOxI{background-color:var(--color-gray-200,#f4f4f5);border-color:var(--color-gray-600,#524e56)}.MultiSelectOptionField-module_multiSelectOptionField__-PNh-:focus-within .MultiSelectOptionField-module_checkbox__rDOxI.MultiSelectOptionField-module_checked__wo-TX,.MultiSelectOptionField-module_multiSelectOptionField__-PNh-:hover .MultiSelectOptionField-module_checkbox__rDOxI.MultiSelectOptionField-module_checked__wo-TX{background-color:var(--color-gray-600,#524e56)}.MultiSelectOptionField-module_multiSelectOptionField__-PNh-:focus-within:after{border-color:var(--color-blue-500,#0168b3);border-radius:var(--border-focus-ring-border-radius,10px);border-style:var(--border-focus-ring-border-style,solid);border-width:var(--border-focus-ring-border-width,2px);content:\"\";height:calc(100% + 2px);left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% + 2px);z-index:2}.MultiSelectOptionField-module_multiSelectOptionField__-PNh-:focus-within .MultiSelectOptionField-module_checkbox__rDOxI:after{display:none}.MultiSelectOptionField-module_label__79KfB{color:var(--color-purple-800,#2f2438);font-family:var(--typography-paragraph-body-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:var(--typography-paragraph-body-line-height,1.5rem);overflow-wrap:anywhere}.MultiSelectOptionField-module_label__79KfB:before{content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}";
+var styles = {
+  "multiSelectOptionField": "MultiSelectOptionField-module_multiSelectOptionField__-PNh-",
+  "checkbox": "MultiSelectOptionField-module_checkbox__rDOxI",
+  "checked": "MultiSelectOptionField-module_checked__wo-TX",
+  "label": "MultiSelectOptionField-module_label__79KfB"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.mjs

@@ -0,0 +1,51 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { Text } from '../../../Text/Text.mjs';
+import { VisuallyHidden } from '../../../VisuallyHidden/VisuallyHidden.mjs';
+import { MultiSelectOptionField } from '../MultiSelectOptionField/MultiSelectOptionField.mjs';
+import styles from './MultiSelectOptions.module.scss.mjs';
+const MultiSelectOptions = /*#__PURE__*/function () {
+  const MultiSelectOptions = function (_a) {
+    var id = _a.id,
+      options = _a.options,
+      selectedValues = _a.selectedValues,
+      onChange = _a.onChange,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["id", "options", "selectedValues", "onChange", "classNameOverride"]);
+    var optionsCountId = "".concat(id, "--options-count");
+    var handleOptionChange = function (optionValue) {
+      var newValues = new Set(selectedValues.values());
+      if (newValues.has(optionValue)) {
+        newValues.delete(optionValue);
+      } else {
+        newValues.add(optionValue);
+      }
+      onChange(newValues);
+    };
+    return /*#__PURE__*/React.createElement("fieldset", __assign({
+      id: id,
+      "aria-describedby": optionsCountId,
+      className: classnames(styles.multiSelectOptions, classNameOverride)
+    }, restProps), /*#__PURE__*/React.createElement(VisuallyHidden, {
+      id: optionsCountId,
+      "aria-live": "polite"
+    }, "Options available: ", options.length), options.length === 0 ? ( /*#__PURE__*/React.createElement(Text, {
+      tag: "span",
+      variant: "body"
+    }, "No options available")) : options.map(function (option) {
+      return /*#__PURE__*/React.createElement(MultiSelectOptionField, {
+        key: option.value,
+        id: "".concat(id, "--").concat(option.value),
+        onChange: function () {
+          return handleOptionChange(option.value);
+        },
+        checkedStatus: selectedValues.has(option.value) ? "checked" : "unchecked",
+        option: option
+      });
+    }));
+  };
+  MultiSelectOptions.displayName = "MultiSelectOptions";
+  return MultiSelectOptions;
+}();
+export { MultiSelectOptions };

package/dist/esm/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.module.scss.mjs

@@ -0,0 +1,7 @@
+import { styleInject } from '../../../__build-tools/styleInject.mjs';
+var css_248z = ".MultiSelectOptions-module_multiSelectOptions__b8hYg{border:none;display:flex;flex-direction:column;margin:0;padding:0}";
+var styles = {
+  "multiSelectOptions": "MultiSelectOptions-module_multiSelectOptions__b8hYg"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };