@kaizen/components 0.0.0-canary-bundler--fix-style-inject-20240522033251 → 0.0.0-canary-declare-inject-within-20240522052630

package/dist/cjs/Checkbox/CheckboxField/CheckboxField.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Label = require('../../Label/Label.cjs');
+var Checkbox = require('../Checkbox/Checkbox.cjs');
+var CheckboxField_module = require('./CheckboxField.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094661/Checkbox+Field Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-checkobx-controls-checkbox-field--docs Storybook}
+ */
+var CheckboxField = function (_a) {
+  var propsId = _a.id,
+    labelText = _a.labelText,
+    checkedStatus = _a.checkedStatus,
+    _b = _a.disabled,
+    disabled = _b === void 0 ? false : _b,
+    _c = _a.reversed,
+    reversed = _c === void 0 ? false : _c,
+    _d = _a.noBottomMargin,
+    noBottomMargin = _d === void 0 ? false : _d,
+    dataTestId = _a["data-testid"],
+    classNameOverride = _a.classNameOverride,
+    restProps = tslib.__rest(_a, ["id", "labelText", "checkedStatus", "disabled", "reversed", "noBottomMargin", "data-testid", "classNameOverride"]);
+  var id = propsId !== null && propsId !== void 0 ? propsId : React.useId();
+  return React__default.default.createElement("div", {
+    "data-testid": dataTestId,
+    className: classnames__default.default(CheckboxField_module.default.container, classNameOverride, checkedStatus === "on" && CheckboxField_module.default.checked, checkedStatus === "mixed" && CheckboxField_module.default.mixed, reversed && CheckboxField_module.default.reversed, noBottomMargin && CheckboxField_module.default.noBottomMargin)
+  }, React__default.default.createElement(Label.Label, {
+    id: "".concat(id, "-field-label"),
+    htmlFor: "".concat(id, "-field-checkbox"),
+    "data-testid": "".concat(id, "-field-label"),
+    labelText: labelText,
+    reversed: reversed,
+    labelType: "checkbox",
+    disabled: disabled
+  }, React__default.default.createElement(Checkbox.Checkbox, tslib.__assign({
+    id: "".concat(id, "-field-checkbox"),
+    "data-testid": "".concat(id, "-field-checkbox"),
+    disabled: disabled,
+    reversed: reversed,
+    checkedStatus: checkedStatus
+  }, restProps))));
+};
+CheckboxField.displayName = "CheckboxField";
+exports.CheckboxField = CheckboxField;

package/dist/cjs/Checkbox/CheckboxField/CheckboxField.module.scss.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".CheckboxField-module_container__3J-jG{margin-bottom:var(--spacing-xs,.375rem);position:relative}.CheckboxField-module_container__3J-jG label{-webkit-tap-highlight-color:transparent;padding-top:0}.CheckboxField-module_container__3J-jG.CheckboxField-module_noBottomMargin__vTcJF{margin-bottom:0}@media (hover:hover) and (pointer:fine){.CheckboxField-module_container__3J-jG label:hover input:not([disabled])+div{background-color:var(--color-gray-100,#f9f9f9);border-color:var(--color-gray-500,#878792)}}.CheckboxField-module_container__3J-jG.CheckboxField-module_checked__uAhcE label,.CheckboxField-module_container__3J-jG.CheckboxField-module_mixed__smfKh label{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-bold-font-weight,600);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:var(--typography-paragraph-body-line-height,1.5rem);position:static}";
+var styles = {
+  "container": "CheckboxField-module_container__3J-jG",
+  "noBottomMargin": "CheckboxField-module_noBottomMargin__vTcJF",
+  "checked": "CheckboxField-module_checked__uAhcE",
+  "mixed": "CheckboxField-module_mixed__smfKh"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;

package/dist/cjs/Checkbox/CheckboxGroup/CheckboxGroup.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Label = require('../../Label/Label.cjs');
+var CheckboxGroup_module = require('./CheckboxGroup.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094522/Checkbox+Group Guidance} |
+ * {@link https://cultureamp.design/storybook/?path=/docs/components-checkbox-controls-checkbox-group--docs Storybook}
+ */
+var CheckboxGroup = function (_a) {
+  var children = _a.children,
+    labelText = _a.labelText,
+    propsLabelId = _a.labelId,
+    _b = _a.noBottomMargin,
+    noBottomMargin = _b === void 0 ? false : _b,
+    _c = _a.reversed,
+    reversed = _c === void 0 ? false : _c,
+    classNameOverride = _a.classNameOverride,
+    restProps = tslib.__rest(_a, ["children", "labelText", "labelId", "noBottomMargin", "reversed", "classNameOverride"]);
+  var labelId = propsLabelId !== null && propsLabelId !== void 0 ? propsLabelId : React.useId();
+  return React__default.default.createElement("div", tslib.__assign({
+    className: classnames__default.default(CheckboxGroup_module.default.checkboxGroupContainer, classNameOverride, noBottomMargin && CheckboxGroup_module.default.noBottomMargin, reversed && CheckboxGroup_module.default.reversed),
+    role: "group",
+    "aria-labelledby": labelId
+  }, restProps), React__default.default.createElement("div", {
+    className: CheckboxGroup_module.default.checkboxGroupLabel
+  }, React__default.default.createElement(Label.Label, {
+    id: labelId,
+    labelText: labelText,
+    labelType: "text",
+    reversed: reversed
+  })), children);
+};
+CheckboxGroup.displayName = "CheckboxGroup";
+exports.CheckboxGroup = CheckboxGroup;

package/dist/cjs/Checkbox/CheckboxGroup/CheckboxGroup.module.scss.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".CheckboxGroup-module_checkboxGroupLabel__a9Iet{margin-bottom:var(--spacing-sm,.75rem)}.CheckboxGroup-module_checkboxGroupContainer__NTUWc{display:flex;flex-direction:column;margin-bottom:var(--spacing-sm,.75rem)}.CheckboxGroup-module_checkboxGroupContainer__NTUWc.CheckboxGroup-module_noBottomMargin__J7ADb{margin-bottom:0}";
+var styles = {
+  "checkboxGroupLabel": "CheckboxGroup-module_checkboxGroupLabel__a9Iet",
+  "checkboxGroupContainer": "CheckboxGroup-module_checkboxGroupContainer__NTUWc",
+  "noBottomMargin": "CheckboxGroup-module_noBottomMargin__J7ADb"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;

package/dist/cjs/ClearButton/ClearButton.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+require('../Icon/subcomponents/SVG/SVG.cjs');
+var ClearIcon = require('../Icon/ClearIcon.cjs');
+var ClearButton_module = require('./ClearButton.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var ClearButton = function (_a) {
+  var classNameOverride = _a.classNameOverride,
+    _b = _a.isReversed,
+    isReversed = _b === void 0 ? false : _b,
+    restProps = tslib.__rest(_a, ["classNameOverride", "isReversed"]);
+  return React__default.default.createElement("button", tslib.__assign({
+    type: "button",
+    "aria-label": "clear",
+    className: classnames__default.default(ClearButton_module.default.clearButton, isReversed ? ClearButton_module.default.reversed : ClearButton_module.default.default, classNameOverride)
+  }, restProps), React__default.default.createElement(ClearIcon.ClearIcon, {
+    role: "presentation"
+  }));
+};
+ClearButton.displayName = "ClearButton";
+exports.ClearButton = ClearButton;

package/dist/cjs/ClearButton/ClearButton.module.scss.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".ClearButton-module_clearButton__CSOIc{appearance:none;background:transparent;border:none;color:inherit;display:inline;display:inline-flex;font:inherit;margin:0;padding:0;position:relative}.ClearButton-module_clearButton__CSOIc:hover{cursor:pointer}.ClearButton-module_clearButton__CSOIc:focus{outline:none}.ClearButton-module_clearButton__CSOIc:focus-visible:after{background:transparent;border-radius:50%;border-style:var(--border-focus-ring-border-style,solid);border-width:var(--border-focus-ring-border-width,2px);content:\"\";inset:-1px;position:absolute}.ClearButton-module_default__lBJxw{color:var(--color-gray-500,#878792)}.ClearButton-module_default__lBJxw:focus-visible,.ClearButton-module_default__lBJxw:hover{color:var(--color-purple-800,#2f2438)}.ClearButton-module_default__lBJxw:focus-visible:after{border-color:var(--color-blue-500,#0168b3)}.ClearButton-module_reversed__0I2DC{color:rgba(var(--color-white-rgb,255,255,255),.8)}.ClearButton-module_reversed__0I2DC:focus-visible,.ClearButton-module_reversed__0I2DC:hover{color:var(--color-white,#fff)}.ClearButton-module_reversed__0I2DC:focus-visible:after{border-color:var(--color-blue-300,#73c0e8)}";
+var styles = {
+  "clearButton": "ClearButton-module_clearButton__CSOIc",
+  "default": "ClearButton-module_default__lBJxw",
+  "reversed": "ClearButton-module_reversed__0I2DC"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;

package/dist/cjs/Collapsible/Collapsible/Collapsible.cjs

@@ -0,0 +1,100 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var AnimateHeight = require('react-animate-height');
+require('../../Button/Button/Button.cjs');
+var IconButton = require('../../Button/IconButton/IconButton.cjs');
+var Heading = require('../../Heading/Heading.cjs');
+require('../../Icon/subcomponents/SVG/SVG.cjs');
+var ChevronDownIcon = require('../../Icon/ChevronDownIcon.cjs');
+var ChevronUpIcon = require('../../Icon/ChevronUpIcon.cjs');
+var Collapsible_module = require('./Collapsible.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var AnimateHeight__default = /*#__PURE__*/_interopDefault(AnimateHeight);
+var Collapsible = function (_a) {
+  var children = _a.children,
+    title = _a.title,
+    renderHeader = _a.renderHeader,
+    open = _a.open,
+    group = _a.group,
+    separated = _a.separated,
+    sticky = _a.sticky,
+    noSectionPadding = _a.noSectionPadding,
+    onToggle = _a.onToggle,
+    variant = _a.variant,
+    lazyLoad = _a.lazyLoad,
+    controlled = _a.controlled,
+    classNameOverride = _a.classNameOverride,
+    propsId = _a.id,
+    restProps = tslib.__rest(_a, ["children", "title", "renderHeader", "open", "group", "separated", "sticky", "noSectionPadding", "onToggle", "variant", "lazyLoad", "controlled", "classNameOverride", "id"]);
+  var _b = React.useState(open !== null && open !== void 0 ? open : false),
+    stateIsOpen = _b[0],
+    setIsOpen = _b[1];
+  var getOpen = function () {
+    return controlled ? open : stateIsOpen;
+  };
+  var id = propsId !== null && propsId !== void 0 ? propsId : React.useId();
+  var handleSectionToggle = function () {
+    var newIsOpen = !getOpen();
+    if (!controlled) setIsOpen(newIsOpen);
+    onToggle === null || onToggle === void 0 ? void 0 : onToggle(newIsOpen, id);
+  };
+  var handleButtonPress = function (event) {
+    event.stopPropagation();
+    handleSectionToggle();
+  };
+  var buttonId = "".concat(id, "-button");
+  var sectionId = "".concat(id, "-section");
+  var isOpen = getOpen();
+  var isContainer = !group || separated;
+  return React__default.default.createElement("div", tslib.__assign({
+    id: id,
+    className: classnames__default.default(classNameOverride, isContainer && Collapsible_module.default.container, group && !separated && Collapsible_module.default.groupItem, separated && Collapsible_module.default.separated, isOpen && Collapsible_module.default.open, !group && Collapsible_module.default.single),
+    "data-testid": "collapsible-container-".concat(id)
+  }, restProps), React__default.default.createElement("div", {
+    className: classnames__default.default(Collapsible_module.default.header, isOpen && Collapsible_module.default.open, sticky && Collapsible_module.default.sticky, isOpen && variant === "default" && Collapsible_module.default.defaultVariant, isOpen && variant === "clear" && Collapsible_module.default.clearVariant),
+    style: sticky && {
+      top: sticky.top
+    },
+    onClick: handleSectionToggle,
+    "data-testid": "collapsible-header-".concat(id)
+  }, renderHeader !== undefined ? renderHeader(title) : React__default.default.createElement("div", {
+    className: Collapsible_module.default.title,
+    "data-testid": "collapsible-button-title-".concat(id)
+  }, React__default.default.createElement(Heading.Heading, {
+    variant: "heading-4",
+    tag: "span"
+  }, title)), React__default.default.createElement("div", null, React__default.default.createElement(IconButton.IconButton, {
+    label: title,
+    icon: isOpen ? React__default.default.createElement(ChevronUpIcon.ChevronUpIcon, {
+      role: "presentation"
+    }) : React__default.default.createElement(ChevronDownIcon.ChevronDownIcon, {
+      role: "presentation"
+    }),
+    type: "button",
+    "aria-expanded": isOpen,
+    "aria-controls": sectionId,
+    "data-testid": "collapsible-button-".concat(id),
+    id: buttonId,
+    onClick: handleButtonPress,
+    classNameOverride: Collapsible_module.default.chevronButton
+  }))), (!lazyLoad || isOpen) && React__default.default.createElement(AnimateHeight__default.default, {
+    height: isOpen ? "auto" : 0,
+    "data-testid": "collapsible-section-".concat(id)
+  }, React__default.default.createElement("div", {
+    id: sectionId,
+    className: classnames__default.default(Collapsible_module.default.section, noSectionPadding && Collapsible_module.default.noPadding),
+    role: "region",
+    "aria-labelledby": buttonId
+  }, children)));
+};
+Collapsible.displayName = "Collapsible";
+exports.Collapsible = Collapsible;

package/dist/cjs/Collapsible/Collapsible/Collapsible.module.scss.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".Collapsible-module_header__yf32d{align-items:center;background-color:var(--color-white,#fff);border:none;display:flex;padding:var(--spacing-sm,.75rem) var(--spacing-sm,.75rem) var(--spacing-sm,.75rem) var(--spacing-md,1.5rem);text-align:left;transition:background-color var(--animation-duration-rapid,.2s)}.Collapsible-module_header__yf32d:hover{background-color:var(--color-gray-200,#f4f4f5)}[dir=rtl] .Collapsible-module_header__yf32d{padding-left:var(--spacing-sm,.75rem);padding-right:var(--spacing-md,1.5rem);text-align:right}.Collapsible-module_header__yf32d .Collapsible-module_open__YlzQL{border-bottom-left-radius:0;border-bottom-right-radius:0}.Collapsible-module_container__EBC1U{background-color:var(--color-white,#fff);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06))}.Collapsible-module_container__EBC1U,.Collapsible-module_single__ZU2Tg .Collapsible-module_header__yf32d{border-radius:var(--border-borderless-border-radius,7px)}.Collapsible-module_separated__IKYdN+.Collapsible-module_separated__IKYdN{margin-left:0;margin-right:0;margin-top:calc(var(--spacing-md, 1.5rem)*.3)}.Collapsible-module_separated__IKYdN .Collapsible-module_header__yf32d{border-radius:var(--border-borderless-border-radius,7px)}.Collapsible-module_groupItem__JECHF+.Collapsible-module_groupItem__JECHF{border-top:1px var(--border-solid-border-style,solid) rgba(var(--color-gray-600-rgb,82,78,86),.2)}.Collapsible-module_groupItem__JECHF:first-of-type>.Collapsible-module_header__yf32d{border-top-left-radius:var(--border-borderless-border-radius,7px);border-top-right-radius:var(--border-borderless-border-radius,7px)}.Collapsible-module_groupItem__JECHF:last-of-type>.Collapsible-module_header__yf32d:not(.Collapsible-module_open__YlzQL){border-bottom-left-radius:var(--border-borderless-border-radius,7px);border-bottom-right-radius:var(--border-borderless-border-radius,7px)}.Collapsible-module_chevronButton__Ti18q:hover{background-color:transparent!important}.Collapsible-module_title__Mwsd6{flex:1 1 auto}.Collapsible-module_defaultVariant__BqxxR{background-color:var(--color-gray-200,#f4f4f5)}.Collapsible-module_clearVariant__BHkHf{border-bottom:1px var(--border-solid-border-style,solid) rgba(var(--color-gray-600-rgb,82,78,86),.2)}.Collapsible-module_sticky__m1V8p{position:-webkit-sticky;position:sticky;z-index:10}.Collapsible-module_section__yfZvI{padding:var(--spacing-md,1.5rem)}.Collapsible-module_noPadding__Vfm3q{padding:0}.Collapsible-module_hide__cvbIi{display:none}";
+var styles = {
+  "header": "Collapsible-module_header__yf32d",
+  "open": "Collapsible-module_open__YlzQL",
+  "container": "Collapsible-module_container__EBC1U",
+  "single": "Collapsible-module_single__ZU2Tg",
+  "separated": "Collapsible-module_separated__IKYdN",
+  "groupItem": "Collapsible-module_groupItem__JECHF",
+  "chevronButton": "Collapsible-module_chevronButton__Ti18q",
+  "title": "Collapsible-module_title__Mwsd6",
+  "defaultVariant": "Collapsible-module_defaultVariant__BqxxR",
+  "clearVariant": "Collapsible-module_clearVariant__BHkHf",
+  "sticky": "Collapsible-module_sticky__m1V8p",
+  "section": "Collapsible-module_section__yfZvI",
+  "noPadding": "Collapsible-module_noPadding__Vfm3q",
+  "hide": "Collapsible-module_hide__cvbIi"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;

package/dist/cjs/Collapsible/CollapsibleGroup/CollapsibleGroup.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var CollapsibleGroup_module = require('./CollapsibleGroup.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094383/Collapsible Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-collapsible-collapsible-group--docs Storybook}
+ */
+var CollapsibleGroup = function (_a) {
+  var children = _a.children,
+    _b = _a.separated,
+    separated = _b === void 0 ? false : _b,
+    sticky = _a.sticky,
+    _c = _a.noSectionPadding,
+    noSectionPadding = _c === void 0 ? false : _c,
+    _d = _a.lazyLoad,
+    lazyLoad = _d === void 0 ? false : _d,
+    onToggle = _a.onToggle,
+    classNameOverride = _a.classNameOverride,
+    props = tslib.__rest(_a, ["children", "separated", "sticky", "noSectionPadding", "lazyLoad", "onToggle", "classNameOverride"]);
+  return React__default.default.createElement("div", tslib.__assign({
+    className: classnames__default.default(classNameOverride, !separated && CollapsibleGroup_module.default.container)
+  }, props), React__default.default.Children.map(children, function (collapsible) {
+    return React__default.default.cloneElement(collapsible, {
+      group: true,
+      separated: separated,
+      sticky: sticky,
+      noSectionPadding: noSectionPadding,
+      lazyLoad: lazyLoad,
+      onToggle: onToggle
+    });
+  }));
+};
+exports.CollapsibleGroup = CollapsibleGroup;

package/dist/cjs/Collapsible/CollapsibleGroup/CollapsibleGroup.module.scss.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".CollapsibleGroup-module_container__EjMRg{background-color:#fff;border-radius:var(--border-borderless-border-radius,7px);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06))}";
+var styles = {
+  "container": "CollapsibleGroup-module_container__EjMRg"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;

package/dist/cjs/Collapsible/ExpertAdviceCollapsible/ExpertAdviceCollapsible.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var Brand = require('../../Brand/Brand.cjs');
+var Collapsible = require('../Collapsible/Collapsible.cjs');
+var Heading = require('../../Heading/Heading.cjs');
+var ExpertAdviceCollapsible_module = require('./ExpertAdviceCollapsible.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094383/Collapsible Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-collapsible--docs Storybook}
+ */
+var ExpertAdviceCollapsible = function (props) {
+  return React__default.default.createElement(Collapsible.Collapsible, tslib.__assign({}, props, {
+    noSectionPadding: true,
+    classNameOverride: ExpertAdviceCollapsible_module.default.expertAdviceContainer,
+    renderHeader: function () {
+      return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("div", {
+        className: ExpertAdviceCollapsible_module.default.expertAdviceHeader
+      }, React__default.default.createElement(Brand.Brand, {
+        classNameOverride: ExpertAdviceCollapsible_module.default.expertAdviceIcon,
+        alt: "Expert Advice",
+        variant: "collective-intelligence",
+        reversed: true
+      }), React__default.default.createElement(Heading.Heading, {
+        variant: "heading-4",
+        tag: "span",
+        classNameOverride: ExpertAdviceCollapsible_module.default.expertAdviceHeading
+      }, props.title)));
+    }
+  }), React__default.default.createElement("div", {
+    className: ExpertAdviceCollapsible_module.default.expertAdviceSection
+  }, props.children));
+};
+ExpertAdviceCollapsible.displayName = "ExpertAdviceCollapsible";
+exports.ExpertAdviceCollapsible = ExpertAdviceCollapsible;

package/dist/cjs/Collapsible/ExpertAdviceCollapsible/ExpertAdviceCollapsible.module.scss.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".ExpertAdviceCollapsible-module_expertAdviceContainer__RIHw4{background-color:var(--color-purple-100,#f4edf8);border:2px var(--border-solid-border-style,solid) var(--color-purple-300,#c9a5dd);box-shadow:none;color:var(--color-purple-800,#2f2438)}.ExpertAdviceCollapsible-module_expertAdviceContainer__RIHw4>div:first-of-type{background-color:var(--color-purple-100,#f4edf8);border-radius:var(--border-borderless-border-radius,7px)}.ExpertAdviceCollapsible-module_expertAdviceContainer__RIHw4>div:first-of-type:hover{background-color:var(--color-purple-100,#f4edf8)}.ExpertAdviceCollapsible-module_expertAdviceContainer__RIHw4:hover{border-color:var(--color-purple-500,#844587)}.ExpertAdviceCollapsible-module_expertAdviceHeader__1wthc{align-items:center;background-color:var(--color-purple-100,#f4edf8);display:flex;flex:1 1 auto}.ExpertAdviceCollapsible-module_expertAdviceHeading__4G4Jh{color:var(--color-purple-600,#5f3361)}.ExpertAdviceCollapsible-module_expertAdviceContainer__RIHw4:hover .ExpertAdviceCollapsible-module_expertAdviceHeading__4G4Jh{color:var(--color-purple-700,#4a234d)}.ExpertAdviceCollapsible-module_expertAdviceIcon__DMwbR{height:1.75rem;margin-inline-end:var(--spacing-sm,.75rem);width:1.75rem}.ExpertAdviceCollapsible-module_expertAdviceSection__ox-SR{padding:0 var(--spacing-md,1.5rem) var(--spacing-md,1.5rem)}";
+var styles = {
+  "expertAdviceContainer": "ExpertAdviceCollapsible-module_expertAdviceContainer__RIHw4",
+  "expertAdviceHeader": "ExpertAdviceCollapsible-module_expertAdviceHeader__1wthc",
+  "expertAdviceHeading": "ExpertAdviceCollapsible-module_expertAdviceHeading__4G4Jh",
+  "expertAdviceIcon": "ExpertAdviceCollapsible-module_expertAdviceIcon__DMwbR",
+  "expertAdviceSection": "ExpertAdviceCollapsible-module_expertAdviceSection__ox-SR"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;

package/dist/cjs/Container/Container.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Container_module = require('./Container.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3086156812/Layout Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-content--docs Storybook}
+ */
+var Container = React__default.default.forwardRef(function (_a, ref) {
+  var children = _a.children,
+    style = _a.style,
+    classNameOverride = _a.classNameOverride,
+    restProps = tslib.__rest(_a, ["children", "style", "classNameOverride"]);
+  return React__default.default.createElement("div", tslib.__assign({
+    ref: ref,
+    className: classnames__default.default(Container_module.default.container, classNameOverride),
+    style: style
+  }, restProps), children);
+});
+Container.displayName = "Container";
+exports.Container = Container;

package/dist/cjs/Container/Container.module.scss.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".Container-module_container__jSUGk{display:flex;justify-content:center;width:100%}.Container-module_container__jSUGk *,.Container-module_container__jSUGk :after,.Container-module_container__jSUGk :before{box-sizing:border-box}";
+var styles = {
+  "container": "Container-module_container__jSUGk"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;