@kaizen/components 0.0.0-canary-bundler--fix-style-inject-20240522033251 → 0.0.0-canary-bundler--local-style-inject-20240522043016

package/dist/esm/DateRangePicker/DateRangePicker.mjs

@@ -0,0 +1,142 @@
+import { __rest, __assign } from 'tslib';
+import React, { useRef, useId, useState } from 'react';
+import classnames from 'classnames';
+import { enUS } from 'date-fns/locale';
+import { isMatch } from 'react-day-picker';
+import { FocusOn } from 'react-focus-on';
+import '../Calendar/CalendarSingle/CalendarSingle.mjs';
+import '../Calendar/CalendarRange/CalendarRange.mjs';
+import { calculateDisabledDays } from '../Calendar/utils/calculateDisabledDays.mjs';
+import 'date-fns';
+import { isDisabledDate } from '../Calendar/utils/isDisabledDate.mjs';
+import { CalendarPopover } from '../Calendar/CalendarPopover/CalendarPopover.mjs';
+import { LegacyCalendarRange } from '../Calendar/LegacyCalendarRange/LegacyCalendarRange.mjs';
+import '../Icon/subcomponents/SVG/SVG.mjs';
+import { DateStartIcon } from '../Icon/DateStartIcon.mjs';
+import { Label } from '../Label/Label.mjs';
+import styles from './DateRangePicker.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094237/Date+Range+Picker Guidance} |
+ * {@link https://cultureamp.design/storybook/?path=/docs/components-date-controls-daterangepicker--docs Storybook}
+ */
+const DateRangePicker = /*#__PURE__*/function () {
+  const DateRangePicker = function (_a) {
+    var _b;
+    var propsId = _a.id,
+      _c = _a.buttonRef,
+      buttonRef = _c === void 0 ? useRef(null) : _c;
+    _a.description; // not used
+    var labelText = _a.labelText,
+      _d = _a.isDisabled,
+      isDisabled = _d === void 0 ? false : _d,
+      classNameOverride = _a.classNameOverride,
+      disabledDates = _a.disabledDates,
+      disabledDaysOfWeek = _a.disabledDaysOfWeek,
+      disabledRange = _a.disabledRange,
+      disabledBeforeAfter = _a.disabledBeforeAfter,
+      disabledBefore = _a.disabledBefore,
+      disabledAfter = _a.disabledAfter,
+      weekStartsOn = _a.weekStartsOn,
+      defaultMonth = _a.defaultMonth,
+      selectedDateRange = _a.selectedDateRange,
+      value = _a.value,
+      onChange = _a.onChange,
+      inputProps = __rest(_a, ["id", "buttonRef", "description", "labelText", "isDisabled", "classNameOverride", "disabledDates", "disabledDaysOfWeek", "disabledRange", "disabledBeforeAfter", "disabledBefore", "disabledAfter", "weekStartsOn", "defaultMonth", "selectedDateRange", "value", "onChange"]);
+    var reactId = useId();
+    var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
+    var containerRef = useRef(null);
+    var _e = useState(false),
+      isOpen = _e[0],
+      setIsOpen = _e[1];
+    var disabledDays = calculateDisabledDays({
+      disabledDates: disabledDates,
+      disabledDaysOfWeek: disabledDaysOfWeek,
+      disabledRange: disabledRange,
+      disabledBeforeAfter: disabledBeforeAfter,
+      disabledBefore: disabledBefore,
+      disabledAfter: disabledAfter
+    });
+    var handleOpenClose = function () {
+      setIsOpen(!isOpen);
+    };
+    var handleReturnFocus = function () {
+      if (buttonRef.current) {
+        buttonRef.current.focus();
+      }
+    };
+    var handleDayClick = function (day) {
+      /** react-day-picker will fire events for disabled days by default.
+       *  We're checking here if it includes the CSS Modules class for disabled
+       *  on the modifier to then return early.
+       * */
+      if (isDisabledDate(day, disabledDays)) {
+        return;
+      }
+      if (!selectedDateRange) return;
+      /** If user has already selected range and then selects again, treat first
+       * click as the start of the new range.
+       *  */
+      if (isSelectingFirstDay(selectedDateRange, day)) {
+        onChange({
+          from: day,
+          to: undefined
+        });
+      } else {
+        // Otherwise, treat click as the final selection.
+        onChange({
+          from: selectedDateRange.from,
+          to: day
+        });
+        handleOpenClose();
+      }
+    };
+    var isSelectingFirstDay = function (range, day) {
+      var isBeforeFirstDay = !!range.from && isMatch(day, [{
+        before: range.from
+      }]);
+      var isRangeSelected = !!range.from && !!range.to;
+      return !range.from || isBeforeFirstDay || isRangeSelected;
+    };
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      ref: containerRef,
+      className: classNameOverride
+    }, /*#__PURE__*/React.createElement(Label, {
+      disabled: isDisabled,
+      htmlFor: id,
+      labelText: labelText
+    }), /*#__PURE__*/React.createElement("button", __assign({
+      type: "button",
+      id: id,
+      className: classnames(styles.button, styles.withStartIconAdornment, (_b = {}, _b[styles.disabled] = isDisabled, _b)),
+      disabled: isDisabled,
+      ref: buttonRef,
+      onClick: handleOpenClose,
+      "aria-label": (selectedDateRange === null || selectedDateRange === void 0 ? void 0 : selectedDateRange.from) ? "Change date: ".concat(value) : "Choose date"
+    }, inputProps), /*#__PURE__*/React.createElement("div", {
+      className: styles.startIconAdornment
+    }, /*#__PURE__*/React.createElement(DateStartIcon, {
+      role: "presentation"
+    })), /*#__PURE__*/React.createElement("span", {
+      className: styles.value
+    }, (selectedDateRange === null || selectedDateRange === void 0 ? void 0 : selectedDateRange.from) ? value : undefined))), isOpen && ( /*#__PURE__*/React.createElement(FocusOn, {
+      scrollLock: false,
+      onDeactivation: handleReturnFocus,
+      onClickOutside: handleOpenClose,
+      onEscapeKey: handleOpenClose,
+      enabled: isOpen
+    }, /*#__PURE__*/React.createElement(CalendarPopover, {
+      referenceElement: containerRef.current
+    }, /*#__PURE__*/React.createElement(LegacyCalendarRange, {
+      selectedRange: selectedDateRange,
+      defaultMonth: defaultMonth,
+      weekStartsOn: weekStartsOn,
+      disabledDays: disabledDays,
+      onDayChange: handleDayClick,
+      locale: enUS
+    })))));
+  };
+  DateRangePicker.displayName = "DateRangePicker";
+  return DateRangePicker;
+}();
+export { DateRangePicker };

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

@@ -0,0 +1,33 @@
+var css_248z = ".DateRangePicker-module_button__cA-Ss{align-items:center;appearance:none;background:transparent;background-clip:padding-box;background-color:var(--color-white,#fff);border:none;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);color:inherit;color:var(--color-purple-800,#2f2438);display:inline;display:flex;font:inherit;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);height:48px;letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:1.5;margin:0;margin-top:var(--spacing-6,.375rem);padding:0;padding:0 var(--spacing-sm,.75rem);position:relative;text-align:left;width:100%}[dir=rtl] .DateRangePicker-module_button__cA-Ss{text-align:right}.DateRangePicker-module_button__cA-Ss:focus-visible:not([disabled]),.DateRangePicker-module_button__cA-Ss:hover:not([disabled]){background-color:var(--color-gray-200,#f4f4f5);border-color:var(--color-gray-600,#524e56);color:var(--color-purple-800,#2f2438)}.DateRangePicker-module_button__cA-Ss:focus-visible:not([disabled]){outline:var(--color-blue-500,#0168b3) var(--border-focus-ring-border-style,solid) var(--border-focus-ring-border-width,2px);outline-offset:1px}.DateRangePicker-module_button__cA-Ss :focus:not([disabled]){outline:none}.DateRangePicker-module_button__cA-Ss.DateRangePicker-module_disabled__f0zmt{background:var(--color-white,#fff);border-color:rgba(var(--color-gray-500-rgb,135,135,146),.7);color:rgba(var(--color-purple-800-rgb,47,36,56),.7);opacity:.5}.DateRangePicker-module_button__cA-Ss .DateRangePicker-module_value__dtZAj{padding-left:1.75rem;padding-right:var(--spacing-sm,.75rem)}.DateRangePicker-module_button__cA-Ss .DateRangePicker-module_value__dtZAj[dir=rtl],[dir=rtl] .DateRangePicker-module_button__cA-Ss .DateRangePicker-module_value__dtZAj{padding-left:var(--spacing-sm,.75rem);padding-right:1.75rem}.DateRangePicker-module_startIconAdornment__lCw3l{margin-top:-1px}.DateRangePicker-module_withStartIconAdornment__auP6u .DateRangePicker-module_startIconAdornment__lCw3l{color:var(--color-purple-800,#2f2438);height:1.25rem;left:var(--spacing-sm,.75rem);opacity:.5;position:absolute;right:auto;top:50%;transform:translateY(-50%)}.DateRangePicker-module_withStartIconAdornment__auP6u .DateRangePicker-module_startIconAdornment__lCw3l[dir=rtl],[dir=rtl] .DateRangePicker-module_withStartIconAdornment__auP6u .DateRangePicker-module_startIconAdornment__lCw3l{left:auto;right:var(--spacing-sm,.75rem)}.DateRangePicker-module_withStartIconAdornment__auP6u:focus-within:not(.DateRangePicker-module_disabled__f0zmt) .DateRangePicker-module_startIconAdornment__lCw3l,.DateRangePicker-module_withStartIconAdornment__auP6u:hover:not(.DateRangePicker-module_disabled__f0zmt) .DateRangePicker-module_startIconAdornment__lCw3l{opacity:.7}.DateRangePicker-module_withStartIconAdornment__auP6u .DateRangePicker-module_button__cA-Ss{padding-left:calc(var(--spacing-md, 1.5rem) + 1.25rem);padding-right:var(--spacing-sm,.75rem)}.DateRangePicker-module_withStartIconAdornment__auP6u .DateRangePicker-module_button__cA-Ss[dir=rtl],[dir=rtl] .DateRangePicker-module_withStartIconAdornment__auP6u .DateRangePicker-module_button__cA-Ss{padding-left:var(--spacing-sm,.75rem);padding-right:calc(var(--spacing-md, 1.5rem) + 1.25rem)}";
+var styles = {
+  "button": "DateRangePicker-module_button__cA-Ss",
+  "disabled": "DateRangePicker-module_disabled__f0zmt",
+  "value": "DateRangePicker-module_value__dtZAj",
+  "startIconAdornment": "DateRangePicker-module_startIconAdornment__lCw3l",
+  "withStartIconAdornment": "DateRangePicker-module_withStartIconAdornment__auP6u"
+};
+// Forked from https://github.com/egoist/style-inject
+function styleInject(css, {
+  insertAt
+} = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const 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));
+  }
+}
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default, styleInject };

package/dist/esm/DateRangePicker/utils/formatDateRangeValue.mjs

@@ -0,0 +1,22 @@
+var dateFormatOptions = {
+  month: "short",
+  year: "numeric",
+  day: "numeric"
+};
+var dateWithoutYearFormatOptions = {
+  month: "short",
+  day: "numeric"
+};
+var formatDateRangeValue = function (dateRange) {
+  var _a, _b, _c, _d;
+  if (dateRange.to) {
+    var isSameYear = ((_a = dateRange.from) === null || _a === void 0 ? void 0 : _a.getFullYear()) === ((_b = dateRange === null || dateRange === void 0 ? void 0 : dateRange.to) === null || _b === void 0 ? void 0 : _b.getFullYear());
+    var from = isSameYear ? (_c = dateRange.from) === null || _c === void 0 ? void 0 : _c.toLocaleDateString("en-US", dateWithoutYearFormatOptions) : (_d = dateRange.from) === null || _d === void 0 ? void 0 : _d.toLocaleDateString("en-US", dateFormatOptions);
+    var to = dateRange.to.toLocaleDateString("en-US", dateFormatOptions);
+    return "".concat(from, " \u2013 ").concat(to);
+  } else {
+    var from = dateRange.from ? dateRange.from.toLocaleDateString("en-US", dateFormatOptions) : "";
+    return from;
+  }
+};
+export { formatDateRangeValue };

package/dist/esm/Divider/Divider.mjs

@@ -0,0 +1,25 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './Divider.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082061035/Divider Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-divider--docs Storybook}
+ */
+const Divider = /*#__PURE__*/function () {
+  const Divider = function (_a) {
+    var variant = _a.variant,
+      _b = _a.isReversed,
+      isReversed = _b === void 0 ? false : _b,
+      classNameOverride = _a.classNameOverride,
+      props = __rest(_a, ["variant", "isReversed", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("hr", __assign({
+      "aria-hidden": "true",
+      className: classnames(styles.wrapper, classNameOverride, isReversed && styles.reversed, styles[variant])
+    }, props));
+  };
+  Divider.displayName = "Divider";
+  return Divider;
+}();
+export { Divider };

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

@@ -0,0 +1,33 @@
+var css_248z = ".Divider-module_wrapper__K5mht{border:0;border-radius:var(--border-solid-border-radius,7px);margin:0;visibility:visible;width:100%}.Divider-module_content__BhDyy,.Divider-module_menuSeparator__kjXV5{border-top:1px solid;border-color:rgba(var(--color-gray-600-rgb,82,78,86),.1)}.Divider-module_canvas__2eQT6{border-bottom:1px solid;border-top:1px solid;border-color:rgba(var(--color-gray-600-rgb,82,78,86),.1)}.Divider-module_reversed__puJw2{border-color:rgba(var(--color-white-rgb,255,255,255),.1)}.Divider-module_menuSeparator__kjXV5{margin:5px 0}";
+var styles = {
+  "wrapper": "Divider-module_wrapper__K5mht",
+  "content": "Divider-module_content__BhDyy",
+  "menuSeparator": "Divider-module_menuSeparator__kjXV5",
+  "canvas": "Divider-module_canvas__2eQT6",
+  "reversed": "Divider-module_reversed__puJw2"
+};
+// Forked from https://github.com/egoist/style-inject
+function styleInject(css, {
+  insertAt
+} = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const 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));
+  }
+}
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default, styleInject };

package/dist/esm/EmptyState/EmptyState.mjs

@@ -0,0 +1,65 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { Heading } from '../Heading/Heading.mjs';
+import '../Illustration/subcomponents/Base/Base.mjs';
+import '../Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.mjs';
+import { EmptyStatesPositive, EmptyStatesNeutral, EmptyStatesNegative, EmptyStatesInformative, EmptyStatesAction } from '../Illustration/Scene/Scene.mjs';
+import { Text } from '../Text/Text.mjs';
+import styles from './EmptyState.module.scss.mjs';
+var ILLUSTRATIONS = {
+  positive: EmptyStatesPositive,
+  neutral: EmptyStatesNeutral,
+  negative: EmptyStatesNegative,
+  informative: EmptyStatesInformative,
+  action: EmptyStatesAction
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094098/Empty+State Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-empty-state--docs Storybook}
+ */
+const EmptyState = /*#__PURE__*/function () {
+  const EmptyState = function (_a) {
+    var children = _a.children,
+      id = _a.id,
+      _b = _a.illustrationType,
+      illustrationType = _b === void 0 ? "informative" : _b,
+      _c = _a.layoutContext,
+      layoutContext = _c === void 0 ? "sidebarAndContent" : _c,
+      headingProps = _a.headingProps,
+      bodyText = _a.bodyText,
+      straightCorners = _a.straightCorners,
+      _d = _a.isAnimated,
+      isAnimated = _d === void 0 ? true : _d,
+      _e = _a.loop,
+      loop = _e === void 0 ? false : _e,
+      classNameOverride = _a.classNameOverride,
+      props = __rest(_a, ["children", "id", "illustrationType", "layoutContext", "headingProps", "bodyText", "straightCorners", "isAnimated", "loop", "classNameOverride"]);
+    var IllustrationComponent = ILLUSTRATIONS[illustrationType];
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: classnames(classNameOverride, styles[illustrationType], styles.container, styles.zen, styles[layoutContext], straightCorners && styles.straightCorners),
+      id: id
+    }, props), /*#__PURE__*/React.createElement("div", {
+      className: styles.illustrationSide
+    }, isAnimated ? ( /*#__PURE__*/React.createElement(IllustrationComponent, {
+      isAnimated: true,
+      loop: loop,
+      classNameOverride: styles.illustration
+    })) : ( /*#__PURE__*/React.createElement(IllustrationComponent, {
+      alt: illustrationType,
+      classNameOverride: styles.illustration
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: styles.textSide
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.textSideInner
+    }, headingProps && ( /*#__PURE__*/React.createElement(Heading, __assign({
+      classNameOverride: styles.heading
+    }, headingProps))), /*#__PURE__*/React.createElement(Text, {
+      variant: "body",
+      classNameOverride: styles.description
+    }, bodyText), children)));
+  };
+  EmptyState.displayName = "EmptyState";
+  return EmptyState;
+}();
+export { EmptyState };

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

@@ -0,0 +1,43 @@
+var css_248z = ".EmptyState-module_container__-B5OU{border:var(--border-solid-border-width,2px) var(--border-solid-border-style,solid) --border-borderless-border-color;border-radius:var(--border-solid-border-radius,7px);color:var(--color-purple-800,#2f2438);display:flex;justify-content:space-around;padding:2% var(--spacing-md,1.5rem);width:100%}@media (max-width:815px){.EmptyState-module_container__-B5OU{align-items:center;flex-direction:column;padding-bottom:var(--spacing-md,1.5rem);padding-top:var(--spacing-md,1.5rem)}}.EmptyState-module_container__-B5OU.EmptyState-module_straightCorners__Aeou0{border-radius:0}@media (min-width:1416px){.EmptyState-module_container__-B5OU.EmptyState-module_sidebarAndContent__Eysay{padding-bottom:var(--spacing-md,1.5rem);padding-top:var(--spacing-md,1.5rem)}}@media (min-width:1128px){.EmptyState-module_container__-B5OU.EmptyState-module_contentOnly__RWVVX{padding-bottom:var(--spacing-md,1.5rem);padding-top:var(--spacing-md,1.5rem)}}.EmptyState-module_container__-B5OU.EmptyState-module_positive__o3dXR{background-color:var(--color-green-100,#e8f8f4)}.EmptyState-module_container__-B5OU.EmptyState-module_negative__e5ci6{background-color:var(--color-red-100,#fdeaee)}.EmptyState-module_container__-B5OU.EmptyState-module_action__OdsgJ{background-color:var(--color-orange-100,#fff0e8)}.EmptyState-module_container__-B5OU.EmptyState-module_neutral__L6fBb{background-color:var(--color-purple-100,#f4edf8)}.EmptyState-module_container__-B5OU.EmptyState-module_informative__x0GSr{background-color:var(--color-blue-100,#e6f6ff)}.EmptyState-module_illustrationSide__ZSjF3,.EmptyState-module_textSide__tv54w{display:inline-block}.EmptyState-module_illustrationSide__ZSjF3{flex-grow:0;flex-shrink:1;margin-bottom:var(--spacing-md,1.5rem);min-width:224px}@media (max-width:815px){.EmptyState-module_illustrationSide__ZSjF3{width:224px}}@media (min-width:816px){.EmptyState-module_illustrationSide__ZSjF3{align-items:flex-end;box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;justify-content:center;margin-bottom:0;max-width:50%;min-width:40%;padding-inline-end:var(--spacing-md,1.5rem)}}@media (min-width:1416px){.EmptyState-module_sidebarAndContent__Eysay .EmptyState-module_illustrationSide__ZSjF3{flex-basis:auto;flex-shrink:1}}@media (min-width:1128px){.EmptyState-module_contentOnly__RWVVX .EmptyState-module_illustrationSide__ZSjF3{flex-basis:auto;flex-shrink:1}}.EmptyState-module_illustrationSide__ZSjF3 video,.EmptyState-module_illustration__HyD2k{max-height:366px;max-width:100%;min-height:196px;width:auto}@media (max-width:815px){.EmptyState-module_illustrationSide__ZSjF3 video,.EmptyState-module_illustration__HyD2k{max-height:196px}}.EmptyState-module_textSide__tv54w{-webkit-font-smoothing:antialiased;align-items:center;display:flex;flex-grow:1;flex-shrink:1}@media (min-width:816px){.EmptyState-module_textSide__tv54w{flex-basis:50%;flex-grow:0}}.EmptyState-module_textSideInner__Yynhi{flex-grow:0;height:auto;margin:0 var(--spacing-sm,.75rem)}@media (max-width:815px){.EmptyState-module_textSideInner__Yynhi{margin-bottom:0}}@media (min-width:816px){.EmptyState-module_textSideInner__Yynhi{max-width:426px}}.EmptyState-module_heading__y-yvC{margin-bottom:var(--spacing-md,1.5rem)}@media (max-width:375px){.EmptyState-module_heading__y-yvC{font-size:1.25rem;font-weight:700;line-height:1.5rem}}.EmptyState-module_description__fsJOc{margin-bottom:var(--spacing-md,1.5rem)}";
+var styles = {
+  "container": "EmptyState-module_container__-B5OU",
+  "straightCorners": "EmptyState-module_straightCorners__Aeou0",
+  "sidebarAndContent": "EmptyState-module_sidebarAndContent__Eysay",
+  "contentOnly": "EmptyState-module_contentOnly__RWVVX",
+  "positive": "EmptyState-module_positive__o3dXR",
+  "negative": "EmptyState-module_negative__e5ci6",
+  "action": "EmptyState-module_action__OdsgJ",
+  "neutral": "EmptyState-module_neutral__L6fBb",
+  "informative": "EmptyState-module_informative__x0GSr",
+  "illustrationSide": "EmptyState-module_illustrationSide__ZSjF3",
+  "textSide": "EmptyState-module_textSide__tv54w",
+  "illustration": "EmptyState-module_illustration__HyD2k",
+  "textSideInner": "EmptyState-module_textSideInner__Yynhi",
+  "heading": "EmptyState-module_heading__y-yvC",
+  "description": "EmptyState-module_description__fsJOc"
+};
+// Forked from https://github.com/egoist/style-inject
+function styleInject(css, {
+  insertAt
+} = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const 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));
+  }
+}
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default, styleInject };

package/dist/esm/ErrorPage/ErrorPage.mjs

@@ -0,0 +1,93 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import { useIntl, FormattedMessage } from '@cultureamp/i18n-react-intl';
+import classnames from 'classnames';
+import { BrandMoment } from '../BrandMoment/BrandMoment.mjs';
+import '../Icon/subcomponents/SVG/SVG.mjs';
+import { ArrowRightIcon } from '../Icon/ArrowRightIcon.mjs';
+import { EmailIcon } from '../Icon/EmailIcon.mjs';
+import '../Illustration/subcomponents/Base/Base.mjs';
+import '../Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.mjs';
+import { BrandMomentError } from '../Illustration/Scene/Scene.mjs';
+import { Text } from '../Text/Text.mjs';
+import { useErrorMessages } from './hooks/useErrorMessages.mjs';
+import styles from './ErrorPage.module.scss.mjs';
+var getMailToHref = function (code) {
+  var supportEmail = "support@cultureamp.com";
+  var subject = "Houston we have a problem";
+  var body = "Hi there,\n\nI received a ".concat(code, " error page while I was trying to...");
+  return encodeURI("mailto:".concat(supportEmail, "?subject=").concat(subject, "&body=").concat(body));
+};
+var HOME_HREF = "/app/home";
+const ErrorPage = /*#__PURE__*/function () {
+  const ErrorPage = function (_a) {
+    var code = _a.code,
+      title = _a.title,
+      message = _a.message,
+      callToAction = _a.callToAction,
+      classNameOverride = _a.classNameOverride;
+    var formatMessage = useIntl().formatMessage;
+    var content = useErrorMessages(code);
+    var actions = {
+      primary: {
+        href: (callToAction === null || callToAction === void 0 ? void 0 : callToAction.homeHref) || HOME_HREF
+      },
+      secondary: (callToAction === null || callToAction === void 0 ? void 0 : callToAction.onContactSupport) ? {
+        onClick: callToAction.onContactSupport
+      } : {
+        href: getMailToHref(code)
+      }
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(classNameOverride)
+    }, /*#__PURE__*/React.createElement(BrandMoment, {
+      header: /*#__PURE__*/React.createElement(React.Fragment, null),
+      body: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: styles.paragraphPadding
+      }, /*#__PURE__*/React.createElement(Text, {
+        variant: "intro-lede"
+      }, message || content.message)), /*#__PURE__*/React.createElement(Text, {
+        color: "dark-reduced-opacity",
+        variant: "small"
+      }, /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "kzErrorPage.errorCode",
+        defaultMessage: "Error code {code}",
+        values: {
+          code: code
+        }
+      }))),
+      illustration: /*#__PURE__*/React.createElement(BrandMomentError, {
+        isAnimated: true,
+        loop: true
+      }),
+      mood: "negative",
+      primaryAction: __assign(__assign({}, actions.primary), {
+        icon: /*#__PURE__*/React.createElement(ArrowRightIcon, {
+          role: "presentation"
+        }),
+        iconPosition: "end",
+        label: formatMessage({
+          id: "kzErrorPage.goToHome",
+          defaultMessage: "Go to Home",
+          description: "Home button label"
+        })
+      }),
+      secondaryAction: __assign(__assign({}, actions.secondary), {
+        icon: /*#__PURE__*/React.createElement(EmailIcon, {
+          role: "presentation"
+        }),
+        label: formatMessage({
+          id: "kzErrorPage",
+          defaultMessage: "Contact support",
+          description: "Label for contact button"
+        })
+      }),
+      text: {
+        title: title || content.title
+      }
+    }));
+  };
+  ErrorPage.displayName = "ErrorPage";
+  return ErrorPage;
+}();
+export { ErrorPage };

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

@@ -0,0 +1,29 @@
+var css_248z = ".ErrorPage-module_paragraphPadding__-L-qy{padding:var(--spacing-24,1.5rem) 0}";
+var styles = {
+  "paragraphPadding": "ErrorPage-module_paragraphPadding__-L-qy"
+};
+// Forked from https://github.com/egoist/style-inject
+function styleInject(css, {
+  insertAt
+} = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const 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));
+  }
+}
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default, styleInject };

package/dist/esm/ErrorPage/hooks/useErrorMessages.mjs

@@ -0,0 +1,131 @@
+import { useIntl } from '@cultureamp/i18n-react-intl';
+var useErrorMessages = function (code) {
+  var formatMessage = useIntl().formatMessage;
+  var translationsMap = {
+    400: {
+      title: formatMessage({
+        id: "kzErrorPage.400.title",
+        defaultMessage: "Problem loading page",
+        description: "Heading for page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.400.message",
+        defaultMessage: "Problem loading page right now. Try again or head home.",
+        description: "Call to action instructions for the user"
+      })
+    },
+    401: {
+      title: formatMessage({
+        id: "kzErrorPage.401.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title for page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.401.message",
+        defaultMessage: "Sorry but we can't verify if you're able to view this page. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    403: {
+      title: formatMessage({
+        id: "kzErrorPage.403.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title for page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.403.message",
+        defaultMessage: "Sorry but it looks like you don’t have permission to view this page. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    404: {
+      title: formatMessage({
+        id: "kzErrorPage.404.title",
+        defaultMessage: "Page not found",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.404.message",
+        defaultMessage: "Sorry but we can't find the page you're looking for. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    413: {
+      title: formatMessage({
+        id: "kzErrorPage.413.title",
+        defaultMessage: "Something's gone wrong on our side",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.413",
+        defaultMessage: "Sorry there's an issue with our system and this page can't be displayed. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    422: {
+      title: formatMessage({
+        id: "kzErrorPage.422.title",
+        defaultMessage: "Change couldn't be made",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.422.message",
+        defaultMessage: "Sorry but your change couldn't be made. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    500: {
+      title: formatMessage({
+        id: "kzErrorPage.500.title",
+        defaultMessage: "Something's gone wrong on our side",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.500",
+        defaultMessage: "Sorry there's an issue with our system and this page can't be displayed. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    502: {
+      title: formatMessage({
+        id: "kzErrorPage.502.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.502.message",
+        defaultMessage: "Sorry about this. The best thing to do is go back and try again.",
+        description: "Call to action instructions for the user"
+      })
+    },
+    503: {
+      title: formatMessage({
+        id: "kzErrorPage.503.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.503.message",
+        defaultMessage: "Sorry about this. The best thing to do is go back and try again.",
+        description: "Call to action instructions for the user"
+      })
+    },
+    504: {
+      title: formatMessage({
+        id: "kzErrorPage.504.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.504.message",
+        defaultMessage: "Sorry about this. The best thing to do is go back and try again.",
+        description: "Call to action instructions for the user"
+      })
+    }
+  };
+  return translationsMap[code] || {
+    title: "",
+    message: ""
+  };
+};
+export { useErrorMessages };

package/dist/esm/FieldGroup/FieldGroup.mjs

@@ -0,0 +1,19 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './FieldGroup.module.scss.mjs';
+const FieldGroup = /*#__PURE__*/function () {
+  const FieldGroup = function (_a) {
+    var children = _a.children,
+      _b = _a.inline,
+      inline = _b === void 0 ? false : _b,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["children", "inline", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: classnames(styles.group, classNameOverride, inline && styles.inline)
+    }, restProps), children);
+  };
+  FieldGroup.displayName = "FieldGroup";
+  return FieldGroup;
+}();
+export { FieldGroup };