@kaizen/components 0.0.0-canary-bump-react-intl-20230830002428 → 0.0.0-canary-cg-test-20231009053130

package/dist/esm/packages/components/src/Collapsible/Collapsible/Collapsible.js

@@ -0,0 +1,81 @@
+import { __extends, __rest, __assign } from '../../../../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+import classnames from 'classnames';
+import AnimateHeight from 'react-animate-height';
+import { v4 } from 'uuid';
+import { Heading } from '@kaizen/typography';
+import '../../Button/Button/Button.js';
+import { IconButton } from '../../Button/IconButton/IconButton.js';
+import '../../Button/PaginationLink/PaginationLink.js';
+import '../../Button/DirectionalLink/DirectionalLink.js';
+import '../../Icon/subcomponents/SVG/SVG.js';
+import { ChevronDownIcon } from '../../Icon/ChevronDownIcon.js';
+import { ChevronUpIcon } from '../../Icon/ChevronUpIcon.js';
+import styles from './Collapsible.module.scss.js';
+
+var Collapsible = (
+  /** @class */
+  function(_super) {
+    __extends(Collapsible2, _super);
+    function Collapsible2() {
+      var _this = _super !== null && _super.apply(this, arguments) || this;
+      _this.state = {
+        open: !!_this.props.open,
+        id: _this.props.id || v4()
+      };
+      _this.getOpen = function() {
+        return _this.props.controlled ? _this.props.open : _this.state.open;
+      };
+      _this.handleSectionToggle = function() {
+        var _a = _this.props, onToggle = _a.onToggle, controlled = _a.controlled;
+        var open = _this.getOpen();
+        onToggle && onToggle(!open, _this.state.id);
+        if (!controlled) {
+          _this.setState({
+            open: !open
+          });
+        }
+      };
+      _this.handleButtonPress = function(event) {
+        event.stopPropagation();
+        _this.handleSectionToggle();
+      };
+      return _this;
+    }
+    Collapsible2.prototype.render = function() {
+      var _a = this.props; _a.id; var children = _a.children, title = _a.title, renderHeader = _a.renderHeader; _a.open; var group = _a.group, separated = _a.separated, sticky = _a.sticky, noSectionPadding = _a.noSectionPadding; _a.onToggle; var _b = _a.variant, variant = _b === void 0 ? "default" : _b, lazyLoad = _a.lazyLoad; _a.controlled; var classNameOverride = _a.classNameOverride, props = __rest(_a, ["id", "children", "title", "renderHeader", "open", "group", "separated", "sticky", "noSectionPadding", "onToggle", "variant", "lazyLoad", "controlled", "classNameOverride"]);
+      var id = this.state.id;
+      var buttonId = "".concat(id, "-button");
+      var sectionId = "".concat(id, "-section");
+      var open = this.getOpen();
+      var isContainer = !group || separated;
+      return React.createElement(
+        "div",
+        __assign({ id, className: classnames(classNameOverride, isContainer && styles.container, group && !separated && styles.groupItem, separated && styles.separated, open && styles.open, !group && styles.single), "data-testid": "collapsible-container-".concat(id) }, props),
+        React.createElement(
+          "div",
+          { className: classnames(styles.header, open && styles.open, sticky && styles.sticky, open && variant === "default" && styles.defaultVariant, open && variant === "clear" && styles.clearVariant), style: sticky && { top: sticky.top }, onClick: this.handleSectionToggle, "data-testid": "collapsible-header-".concat(id) },
+          renderHeader !== void 0 ? renderHeader(title) : React.createElement(
+            "div",
+            { className: styles.title, "data-testid": "collapsible-button-title-".concat(id) },
+            React.createElement(Heading, { variant: "heading-4", tag: "span" }, title)
+          ),
+          React.createElement(
+            "div",
+            null,
+            React.createElement(IconButton, { label: title, icon: open ? React.createElement(ChevronUpIcon, { role: "presentation" }) : React.createElement(ChevronDownIcon, { role: "presentation" }), type: "button", "aria-expanded": open, "aria-controls": sectionId, "data-testid": "collapsible-button-".concat(id), id: buttonId, onClick: this.handleButtonPress, classNameOverride: styles.chevronButton })
+          )
+        ),
+        (!lazyLoad || open) && React.createElement(
+          AnimateHeight,
+          { height: open ? "auto" : 0, "data-testid": "collapsible-section-".concat(id) },
+          React.createElement("div", { id: sectionId, className: classnames(styles.section, noSectionPadding && styles.noPadding), role: "region", "aria-labelledby": buttonId }, children)
+        )
+      );
+    };
+    return Collapsible2;
+  }(React.Component)
+);
+
+export { Collapsible };
+//# sourceMappingURL=Collapsible.js.map

package/dist/esm/packages/components/src/Collapsible/Collapsible/Collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.js","sources":["../../../../../../../src/Collapsible/Collapsible/Collapsible.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport AnimateHeight from \"react-animate-height\"\nimport { v4 } from \"uuid\"\nimport { Heading } from \"@kaizen/typography\"\nimport { IconButton } from \"~components/Button\"\nimport { ChevronUpIcon, ChevronDownIcon } from \"~components/Icon\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { Sticky } from \"../types\"\nimport styles from \"./Collapsible.module.scss\"\n\ntype Variant = \"default\" | \"clear\"\n\nexport type CollapsibleProps = {\n  children: JSX.Element | JSX.Element[] | string\n  title: string\n  renderHeader?: (title: string) => JSX.Element | JSX.Element[]\n  open?: boolean\n  group?: boolean\n  separated?: boolean\n  sticky?: Sticky\n  noSectionPadding?: boolean\n  onToggle?: (open: boolean, id: string) => void\n  /**\n   * By default, the header will change background colour when open. When the variant\n   * is set to 'clear', it will not have a background but a border-bottom will appear\n   * to separate the heading from the content.\n   */\n  variant?: Variant\n  /**\n   * Will avoid rendering the content until required (especially important when you\n   * have queries inside sections).\n   * Removes animation.\n   */\n  lazyLoad?: boolean\n  /**\n   * Disables internal `open` state, allowing it to be controlled in the usage.\n   */\n  controlled?: boolean\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\ntype State = {\n  open: boolean\n  id: string\n}\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094383/Collapsible Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-collapsible--docs Storybook}\n */\nexport class Collapsible extends React.Component<CollapsibleProps, State> {\n  public state = {\n    open: !!this.props.open,\n    id: this.props.id || v4(),\n  }\n\n  public render(): JSX.Element {\n    const {\n      id: _,\n      children,\n      title,\n      renderHeader,\n      open: _propsOpen, // Unused, but extracted so as not to spread into the container\n      group,\n      separated,\n      sticky,\n      noSectionPadding,\n      onToggle: _onToggle, // Unused, but extracted so as not to spread into the container\n      variant = \"default\",\n      lazyLoad,\n      controlled: _controlled, // Unused, but extracted so as not to spread into the container\n      classNameOverride,\n      ...props\n    } = this.props\n\n    const { id } = this.state\n    const buttonId = `${id}-button`\n    const sectionId = `${id}-section`\n    const open = this.getOpen()\n    const isContainer = !group || separated\n\n    return (\n      <div\n        id={id}\n        className={classnames(\n          classNameOverride,\n          isContainer && styles.container,\n          group && !separated && styles.groupItem,\n          separated && styles.separated,\n          open && styles.open,\n          !group && styles.single\n        )}\n        data-testid={`collapsible-container-${id}`}\n        {...props} // `title` is missing because it is used for the header; requires breaking change to fix\n      >\n        {/* Disabling these a11y linting errors because there is an IconButton that mitigates these concerns. The onClick here is just an additional layer. */}\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,\n        jsx-a11y/no-static-element-interactions */}\n        <div\n          className={classnames(\n            styles.header,\n            open && styles.open,\n            sticky && styles.sticky,\n            open && variant === \"default\" && styles.defaultVariant,\n            open && variant === \"clear\" && styles.clearVariant\n          )}\n          style={sticky && { top: sticky.top }}\n          onClick={this.handleSectionToggle}\n          data-testid={`collapsible-header-${id}`}\n        >\n          {renderHeader !== undefined ? (\n            renderHeader(title)\n          ) : (\n            <div\n              className={styles.title}\n              data-testid={`collapsible-button-title-${id}`}\n            >\n              <Heading variant=\"heading-4\" tag=\"span\">\n                {title}\n              </Heading>\n            </div>\n          )}\n          <div>\n            <IconButton\n              label={title}\n              icon={\n                open ? (\n                  <ChevronUpIcon role=\"presentation\" />\n                ) : (\n                  <ChevronDownIcon role=\"presentation\" />\n                )\n              }\n              type=\"button\"\n              aria-expanded={open}\n              aria-controls={sectionId}\n              data-testid={`collapsible-button-${id}`}\n              id={buttonId}\n              onClick={this.handleButtonPress}\n              classNameOverride={styles.chevronButton}\n            />\n          </div>\n        </div>\n        {(!lazyLoad || open) && (\n          <AnimateHeight\n            height={open ? \"auto\" : 0}\n            data-testid={`collapsible-section-${id}`}\n          >\n            <div\n              id={sectionId}\n              className={classnames(\n                styles.section,\n                noSectionPadding && styles.noPadding\n              )}\n              role=\"region\"\n              aria-labelledby={buttonId}\n            >\n              {children}\n            </div>\n          </AnimateHeight>\n        )}\n      </div>\n    )\n  }\n\n  private getOpen = (): boolean | undefined =>\n    this.props.controlled ? this.props.open : this.state.open\n\n  private handleSectionToggle = (): void => {\n    const { onToggle, controlled } = this.props\n    const open = this.getOpen()\n\n    onToggle && onToggle(!open, this.state.id)\n\n    if (!controlled) {\n      this.setState({\n        open: !open,\n      })\n    }\n  }\n\n  private handleButtonPress = (event: React.MouseEvent): void => {\n    event.stopPropagation()\n    this.handleSectionToggle()\n  }\n}\n"],"names":["Collapsible"],"mappings":"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"}

package/dist/esm/packages/components/src/Collapsible/Collapsible/Collapsible.module.scss.js

@@ -0,0 +1,4 @@
+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"};
+
+export { styles as default };
+//# sourceMappingURL=Collapsible.module.scss.js.map

package/dist/esm/packages/components/src/Collapsible/Collapsible/Collapsible.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/packages/components/src/Collapsible/CollapsibleGroup/CollapsibleGroup.js

@@ -0,0 +1,21 @@
+import { __rest, __assign } from '../../../../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './CollapsibleGroup.module.scss.js';
+
+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 = __rest(_a, ["children", "separated", "sticky", "noSectionPadding", "lazyLoad", "onToggle", "classNameOverride"]);
+  return React.createElement("div", __assign({ className: classnames(classNameOverride, !separated && styles.container) }, props), React.Children.map(children, function(collapsible) {
+    return React.cloneElement(collapsible, {
+      group: true,
+      separated,
+      sticky,
+      noSectionPadding,
+      lazyLoad,
+      onToggle
+    });
+  }));
+};
+
+export { CollapsibleGroup };
+//# sourceMappingURL=CollapsibleGroup.js.map

package/dist/esm/packages/components/src/Collapsible/CollapsibleGroup/CollapsibleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleGroup.js","sources":["../../../../../../../src/Collapsible/CollapsibleGroup/CollapsibleGroup.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { CollapsibleProps } from \"~components/Collapsible/Collapsible\"\nimport { Sticky } from \"~components/Collapsible/types\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./CollapsibleGroup.module.scss\"\n\nexport type CollapsibleGroupProps = {\n  children: Array<React.ReactElement<CollapsibleProps>>\n  separated?: boolean\n  sticky?: Sticky\n  noSectionPadding?: boolean\n  lazyLoad?: boolean\n  onToggle?: (open: boolean, id: string) => void\n} & Omit<OverrideClassName<HTMLAttributes<HTMLDivElement>>, \"children\">\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094383/Collapsible Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-collapsible-collapsible-group--docs Storybook}\n */\nexport const CollapsibleGroup = ({\n  children,\n  separated = false,\n  sticky,\n  noSectionPadding = false,\n  lazyLoad = false,\n  onToggle,\n  classNameOverride,\n  ...props\n}: CollapsibleGroupProps): JSX.Element => (\n  <div\n    className={classnames(classNameOverride, !separated && styles.container)}\n    {...props}\n  >\n    {React.Children.map(children, collapsible =>\n      React.cloneElement(collapsible, {\n        group: true,\n        separated,\n        sticky,\n        noSectionPadding,\n        lazyLoad,\n        onToggle,\n      })\n    )}\n  </div>\n)\n"],"names":[],"mappings":";;;;;AAoBa,IAAA,gBAAA,GAAmB,SAAC,EAST,EAAA;AARtB,EAAA,IAAA,QAAA,GAAQ,GAAA,QACR,EAAA,EAAA,GAAiB,GAAA,SAAjB,EAAA,SAAA,GAAY,OAAA,KAAA,CAAA,GAAA,KAAA,GAAK,IACjB,MAAM,GAAA,EAAA,CAAA,QACN,EAAwB,GAAA,EAAA,CAAA,kBAAxB,gBAAmB,GAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,GAAK,EACxB,EAAA,EAAA,cAAA,EAAA,QAAA,GAAW,OAAA,KAAA,CAAA,GAAA,KAAA,OACX,QAAQ,GAAA,EAAA,CAAA,QACR,EAAA,iBAAA,GAAiB,EAAA,CAAA,iBAAA,EACd,QAAK,MAAA,CAAA,EAAA,EARuB,oGAShC,CAAA,CAAA;AAAyC,EACxC,OAAA,KAAA,CACE,cAAA,KAAA,EAAA,QAAA,CAAA,EAAA,SAAW,EAAA,UAAA,CAAW,mBAAmB,CAAC,SAAA,IAAa,OAAO,SAAS,CAAA,IACnE,KAAK,CAAA,EAER,MAAM,QAAS,CAAA,GAAA,CAAI,QAAU,EAAA,SAAA,WAAW,EAAA;AACvC,IAAA,OAAA,KAAA,CAAM,aAAa,WAAa,EAAA;AAAA,MAC9B,KAAO,EAAA,IAAA;AAAA,MACP,SAAA;AAAA,MACA,MAAA;AAAA,MACA,gBAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,KACD,CAAA,CAAA;AAAA,GAAC,CACH,CAAA,CAAA;;;;;"}

package/dist/esm/packages/components/src/Collapsible/CollapsibleGroup/CollapsibleGroup.module.scss.js

@@ -0,0 +1,4 @@
+var styles = {"container":"CollapsibleGroup-module_container__EjMRg"};
+
+export { styles as default };
+//# sourceMappingURL=CollapsibleGroup.module.scss.js.map

package/dist/esm/packages/components/src/Collapsible/CollapsibleGroup/CollapsibleGroup.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleGroup.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/packages/components/src/Collapsible/ExpertAdviceCollapsible/ExpertAdviceCollapsible.js

@@ -0,0 +1,29 @@
+import { __assign } from '../../../../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+import { Heading } from '@kaizen/typography';
+import { Brand } from '../../Brand/Brand.js';
+import { Collapsible } from '../Collapsible/Collapsible.js';
+import styles from './ExpertAdviceCollapsible.module.scss.js';
+
+var ExpertAdviceCollapsible = function(props) {
+  return React.createElement(
+    Collapsible,
+    __assign({}, props, { noSectionPadding: true, classNameOverride: styles.expertAdviceContainer, renderHeader: function() {
+      return React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(
+          "div",
+          { className: styles.expertAdviceHeader },
+          React.createElement(Brand, { classNameOverride: styles.expertAdviceIcon, alt: "Expert Advice", variant: "collective-intelligence", reversed: true }),
+          React.createElement(Heading, { variant: "heading-4", tag: "span", classNameOverride: styles.expertAdviceHeading }, props.title)
+        )
+      );
+    } }),
+    React.createElement("div", { className: styles.expertAdviceSection }, props.children)
+  );
+};
+ExpertAdviceCollapsible.displayName = "ExpertAdviceCollapsible";
+
+export { ExpertAdviceCollapsible };
+//# sourceMappingURL=ExpertAdviceCollapsible.js.map

package/dist/esm/packages/components/src/Collapsible/ExpertAdviceCollapsible/ExpertAdviceCollapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpertAdviceCollapsible.js","sources":["../../../../../../../src/Collapsible/ExpertAdviceCollapsible/ExpertAdviceCollapsible.tsx"],"sourcesContent":["import React from \"react\"\nimport { Heading } from \"@kaizen/typography\"\nimport { Brand } from \"~components/Brand\"\nimport {\n  CollapsibleProps,\n  Collapsible,\n} from \"~components/Collapsible/Collapsible\"\nimport styles from \"./ExpertAdviceCollapsible.module.scss\"\n\nexport type ExpertAdviceCollapsibleProps = Omit<\n  CollapsibleProps,\n  \"renderHeader\" | \"variant\" | \"group\" | \"separated\"\n>\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094383/Collapsible Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-collapsible--docs Storybook}\n */\nexport const ExpertAdviceCollapsible = (\n  props: ExpertAdviceCollapsibleProps\n): JSX.Element => (\n  <Collapsible\n    {...props}\n    noSectionPadding\n    classNameOverride={styles.expertAdviceContainer}\n    renderHeader={(): JSX.Element => (\n      <>\n        <div className={styles.expertAdviceHeader}>\n          <Brand\n            classNameOverride={styles.expertAdviceIcon}\n            alt=\"Expert Advice\"\n            variant=\"collective-intelligence\"\n            reversed\n          />\n          <Heading\n            variant=\"heading-4\"\n            tag=\"span\"\n            classNameOverride={styles.expertAdviceHeading}\n          >\n            {props.title}\n          </Heading>\n        </div>\n      </>\n    )}\n  >\n    <div className={styles.expertAdviceSection}>{props.children}</div>\n  </Collapsible>\n)\n\nExpertAdviceCollapsible.displayName = \"ExpertAdviceCollapsible\"\n"],"names":[],"mappings":";;;;;;;AAkBa,IAAA,uBAAA,GAA0B,SACrC,KAAmC,EAAA;AACnB,EAAA,OAChB,KAAC,CAAA,aAAA;AAAA,IAAA,WAAA;AAAA,IACK,QAAA,CAAA,EAAA,EAAA,SACJ,gBAAgB,EAAA,IAAA,EAChB,iBAAmB,EAAA,MAAA,CAAO,qBAC1B,EAAA,YAAA,EAAc,WAAmB;AAAA,MAAA,OAC/B,KAAA,CAAA,aAAA;AAAA,QAAA,KAAA,CAAA,QAAA;AAAA,QAAA,IAAA;AAAA,QACE,KAAA,CAAA,aAAA;AAAA,UAAA,KAAA;AAAA,UAAA,EAAK,SAAW,EAAA,MAAA,CAAO,kBAAkB,EAAA;AAAA,UACvC,KAAA,CAAA,aAAA,CAAC,KACC,EAAA,EAAA,iBAAmB,EAAA,MAAA,CAAO,gBAC1B,EAAA,GAAA,EAAI,eACJ,EAAA,OAAA,EAAQ,yBACR,EAAA,QAAA,EACA,MAAA,CAAA;AAAA,UACF,KAAC,CAAA,aAAA,CAAA,OACC,EAAA,EAAA,OAAQ,EAAA,WAAA,EACR,GAAI,EAAA,MAAA,EACJ,iBAAmB,EAAA,MAAA,CAAO,mBAEzB,EAAA,EAAA,MAAM,KAAK,CAAA;AAAA,SACJ;AAAA,OACN,CAAA;AAAA,OAET,CAAA;AAAA,IAED,KAAA,CAAA,cAAA,KAAA,EAAA,EAAK,WAAW,MAAO,CAAA,mBAAA,EAAsB,EAAA,KAAA,CAAM,QAAQ,CAAA;AAAA,GAAO,CAAA;AAzBpD,EAAA;AA6BlB,uBAAA,CAAwB,WAAc,GAAA,yBAAA;;;;"}

package/dist/esm/packages/components/src/Collapsible/ExpertAdviceCollapsible/ExpertAdviceCollapsible.module.scss.js

@@ -0,0 +1,4 @@
+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"};
+
+export { styles as default };
+//# sourceMappingURL=ExpertAdviceCollapsible.module.scss.js.map

package/dist/esm/packages/components/src/Collapsible/ExpertAdviceCollapsible/ExpertAdviceCollapsible.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpertAdviceCollapsible.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/packages/components/src/Divider/Divider.js

@@ -0,0 +1,13 @@
+import { __rest, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './Divider.module.scss.js';
+
+var 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 React.createElement("hr", __assign({ "aria-hidden": "true", className: classnames(styles.wrapper, classNameOverride, isReversed && styles.reversed, styles[variant]) }, props));
+};
+Divider.displayName = "Divider";
+
+export { Divider };
+//# sourceMappingURL=Divider.js.map

package/dist/esm/packages/components/src/Divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sources":["../../../../../../src/Divider/Divider.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./Divider.module.scss\"\n\nexport type DividerProps = {\n  variant: \"content\" | \"canvas\" | \"menuSeparator\"\n  isReversed?: boolean\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082061035/Divider Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-divider--docs Storybook}\n */\nexport const Divider = ({\n  variant,\n  isReversed = false,\n  classNameOverride,\n  ...props\n}: DividerProps): JSX.Element => (\n  <hr\n    aria-hidden=\"true\"\n    className={classnames(\n      styles.wrapper,\n      classNameOverride,\n      isReversed && styles.reversed,\n      styles[variant]\n    )}\n    {...props}\n  />\n)\n\nDivider.displayName = \"Divider\"\n"],"names":[],"mappings":";;;;;AAca,IAAA,OAAA,GAAU,SAAC,EAKT,EAAA;AAJb,EAAA,IAAA,OAAA,GAAO,GAAA,OACP,EAAA,EAAA,GAAkB,GAAA,UAAlB,EAAA,UAAA,GAAa,OAAA,KAAA,CAAA,GAAA,KAAA,GAAK,IAClB,iBAAiB,GAAA,EAAA,CAAA,mBACd,KAAK,GAAA,MAAA,CAAA,IAJc,8CAKvB,CAAA,CAAA;AAAgC,EAC/B,OAAA,KAAA,CAAA,cAAA,IAAA,EAAA,QAAA,CAAA,EAAA,aACc,EAAA,MAAA,EACZ,WAAW,UACT,CAAA,MAAA,CAAO,SACP,iBACA,EAAA,UAAA,IAAc,OAAO,QACrB,EAAA,MAAA,CAAO,OAAO,CAAC,CAAA,EAEb,EAAA,KAAK,CAAA,CAAA,CAAA;;AAIb,OAAA,CAAQ,WAAc,GAAA,SAAA;;;;"}

package/dist/esm/packages/components/src/Divider/Divider.module.scss.js

@@ -0,0 +1,4 @@
+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"};
+
+export { styles as default };
+//# sourceMappingURL=Divider.module.scss.js.map

package/dist/esm/packages/components/src/Divider/Divider.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/packages/components/src/EmptyState/EmptyState.js

@@ -0,0 +1,38 @@
+import { __rest, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+import classnames from 'classnames';
+import { EmptyStatesPositive, EmptyStatesNeutral, EmptyStatesNegative, EmptyStatesInformative, EmptyStatesAction } from '@kaizen/draft-illustration';
+import { Heading, Paragraph } from '@kaizen/typography';
+import styles from './EmptyState.module.scss.js';
+
+var ILLUSTRATIONS = {
+  positive: EmptyStatesPositive,
+  neutral: EmptyStatesNeutral,
+  negative: EmptyStatesNegative,
+  informative: EmptyStatesInformative,
+  action: EmptyStatesAction
+};
+var 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 React.createElement(
+    "div",
+    __assign({ className: classnames(classNameOverride, styles[illustrationType], styles.container, styles.zen, styles[layoutContext], straightCorners && styles.straightCorners), id }, props),
+    React.createElement("div", { className: styles.illustrationSide }, isAnimated ? React.createElement(IllustrationComponent, { isAnimated: true, loop, classNameOverride: styles.illustration }) : React.createElement(IllustrationComponent, { alt: illustrationType, classNameOverride: styles.illustration })),
+    React.createElement(
+      "div",
+      { className: styles.textSide },
+      React.createElement(
+        "div",
+        { className: styles.textSideInner },
+        headingProps && React.createElement(Heading, __assign({ classNameOverride: styles.heading }, headingProps)),
+        React.createElement(Paragraph, { variant: "body", classNameOverride: styles.description }, bodyText),
+        children
+      )
+    )
+  );
+};
+EmptyState.displayName = "EmptyState";
+
+export { EmptyState };
+//# sourceMappingURL=EmptyState.js.map

package/dist/esm/packages/components/src/EmptyState/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sources":["../../../../../../src/EmptyState/EmptyState.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport {\n  AnimatedSceneProps,\n  EmptyStatesAction,\n  EmptyStatesInformative,\n  EmptyStatesNegative,\n  EmptyStatesNeutral,\n  EmptyStatesPositive,\n} from \"@kaizen/draft-illustration\"\nimport { HeadingProps, Heading, Paragraph } from \"@kaizen/typography\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./EmptyState.module.scss\"\n\nconst ILLUSTRATIONS: Record<\n  string,\n  (props: AnimatedSceneProps) => JSX.Element\n> = {\n  positive: EmptyStatesPositive,\n  neutral: EmptyStatesNeutral,\n  negative: EmptyStatesNegative,\n  informative: EmptyStatesInformative,\n  action: EmptyStatesAction,\n}\n\ntype IllustrationType =\n  | \"positive\"\n  | \"neutral\"\n  | \"negative\"\n  | \"informative\"\n  | \"action\"\n\ntype LayoutContextType = \"sidebarAndContent\" | \"contentOnly\"\n\nexport type EmptyStateProps = {\n  children?: React.ReactNode\n  id?: string\n  illustrationType?: IllustrationType\n  layoutContext?: LayoutContextType\n  bodyText: string | React.ReactNode\n  straightCorners?: boolean\n  headingProps?: HeadingProps\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>> &\n  Pick<AnimatedSceneProps, \"isAnimated\" | \"loop\">\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094098/Empty+State Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-empty-state--docs Storybook}\n */\nexport const EmptyState = ({\n  children,\n  id,\n  illustrationType = \"informative\",\n  layoutContext = \"sidebarAndContent\",\n  headingProps,\n  bodyText,\n  straightCorners,\n  isAnimated = true,\n  loop = false,\n  classNameOverride,\n  ...props\n}: EmptyStateProps): JSX.Element => {\n  const IllustrationComponent = ILLUSTRATIONS[illustrationType]\n\n  return (\n    <div\n      className={classnames(\n        classNameOverride,\n        styles[illustrationType],\n        styles.container,\n        styles.zen,\n        styles[layoutContext],\n        straightCorners && styles.straightCorners\n      )}\n      id={id}\n      {...props}\n    >\n      <div className={styles.illustrationSide}>\n        {isAnimated ? (\n          <IllustrationComponent\n            isAnimated\n            loop={loop}\n            classNameOverride={styles.illustration}\n          />\n        ) : (\n          <IllustrationComponent\n            alt={illustrationType}\n            classNameOverride={styles.illustration}\n          />\n        )}\n      </div>\n      <div className={styles.textSide}>\n        <div className={styles.textSideInner}>\n          {headingProps && (\n            <Heading classNameOverride={styles.heading} {...headingProps} />\n          )}\n          <Paragraph variant=\"body\" classNameOverride={styles.description}>\n            {bodyText}\n          </Paragraph>\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nEmptyState.displayName = \"EmptyState\"\n"],"names":[],"mappings":";;;;;;;AAcA,IAAM,aAGF,GAAA;AAAA,EACF,QAAU,EAAA,mBAAA;AAAA,EACV,OAAS,EAAA,kBAAA;AAAA,EACT,QAAU,EAAA,mBAAA;AAAA,EACV,WAAa,EAAA,sBAAA;AAAA,EACb,MAAQ,EAAA,iBAAA;;AA2BG,IAAA,UAAA,GAAa,SAAC,EAYT,EAAA;AAXhB,EAAA,IAAA,sBACA,EAAA,EAAA,UACA,EAAA,GAAA,EAAA,CAAA,gBAAA,EAAA,gBAAA,GAAmB,EAAA,KAAA,KAAA,CAAA,GAAA,kBACnB,EAAA,EAAA,GAAA,EAAA,CAAA,aAAA,EAAA,aAAa,GAAA,EAAA,KAAA,KAAG,CAAA,GAAA,mBAAA,GAAmB,EACnC,EAAA,YAAA,GAAY,EAAA,CAAA,YAAA,EACZ,sBACA,EAAA,eAAA,qBACA,EAAA,EAAA,GAAA,EAAA,CAAA,UAAA,EAAA,UAAU,GAAA,EAAA,KAAA,KAAG,CAAA,GAAA,IAAA,GAAI,EACjB,EAAA,EAAA,GAAA,EAAA,CAAA,IAAA,EAAA,IAAI,GAAA,EAAA,KAAA,KAAG,CAAA,GAAA,KAAA,GAAK,IACZ,wCACG,EAAA,KAAA,GAXsB,MAAA,CAAA,EAAA,EAAA,CAAA,UAAA,EAAA,IAAA,EAAA,kBAAA,EAAA,eAAA,EAAA,cAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,MAAA,EAAA,mBAAA,CAY1B,CAAA,CAAA;AACC,EAAM,IAAA,qBAAA,GAAwB,cAAc,gBAAgB,CAAA,CAAA;AAE5D,EAAA,OACE,KACE,CAAA,aAAA;AAAA,IAAA,KAAA;AAAA,IAAA,QAAA,CAAA,EAAA,SAAW,EAAA,UAAA,CACT,mBACA,MAAO,CAAA,gBAAgB,GACvB,MAAO,CAAA,SAAA,EACP,OAAO,GACP,EAAA,MAAA,CAAO,aAAa,CACpB,EAAA,eAAA,IAAmB,OAAO,eAAe,CAAA,EAE3C,MACI,KAAK,CAAA;AAAA,IAET,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAW,EAAA,MAAA,CAAO,gBACpB,EAAA,EAAA,UACC,GAAA,KAAA,CAAC,aAAA,CAAA,qBAAA,IACC,UAAU,EAAA,IAAA,EACV,IACA,EAAA,iBAAA,EAAmB,MAAO,CAAA,YAAA,MAG5B,mBAAC,CAAA,qBAAA,EAAqB,EACpB,GAAA,EAAK,gBACL,EAAA,iBAAA,EAAmB,MAAO,CAAA,YAAA,EAC1B,CACH,CAAA;AAAA,IAEH,KAAA,CAAA,aAAA;AAAA,MAAA,KAAA;AAAA,MAAA,EAAK,SAAW,EAAA,MAAA,CAAO,QAAQ,EAAA;AAAA,MAC7B,KAAA,CAAA,aAAA;AAAA,QAAA,KAAA;AAAA,QAAA,EAAK,SAAW,EAAA,MAAA,CAAO,aAAa,EAAA;AAAA,QACjC,YAAA,IACC,KAAC,CAAA,aAAA,CAAA,OAAQ,EAAA,QAAA,CAAA,EAAA,iBAAA,EAAmB,MAAO,CAAA,OAAA,EAAa,EAAA,YAAY;QAE9D,KAAA,CAAA,aAAC,CAAA,SAAA,EAAS,EAAC,OAAA,EAAQ,QAAO,iBAAmB,EAAA,MAAA,CAAO,WAAW,EAAA,EAC5D,QAAQ,CAAA;AAAA,QAEV,QAAA;AAAA,OAAQ;AAAA,KACL;AAAA,GACF,CAAA;AAGZ,EAAA;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}

package/dist/esm/packages/components/src/EmptyState/EmptyState.module.scss.js

@@ -0,0 +1,4 @@
+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"};
+
+export { styles as default };
+//# sourceMappingURL=EmptyState.module.scss.js.map

package/dist/esm/packages/components/src/EmptyState/EmptyState.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/packages/components/src/ErrorPage/ErrorPage.js

@@ -0,0 +1,62 @@
+import { __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+import { useIntl, FormattedMessage } from '@cultureamp/i18n-react-intl';
+import classnames from 'classnames';
+import { BrandMomentError } from '@kaizen/draft-illustration';
+import { Paragraph } from '@kaizen/typography';
+import { BrandMoment } from '../BrandMoment/BrandMoment.js';
+import 'uuid';
+import '../Icon/subcomponents/SVG/SVG.js';
+import { ArrowRightIcon } from '../Icon/ArrowRightIcon.js';
+import { EmailIcon } from '../Icon/EmailIcon.js';
+import { useErrorMessages } from './hooks/useErrorMessages.js';
+import styles from './ErrorPage.module.scss.js';
+
+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";
+var 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 React.createElement(
+    "div",
+    { className: classnames(classNameOverride) },
+    React.createElement(BrandMoment, { header: React.createElement(React.Fragment, null), body: React.createElement(
+      React.Fragment,
+      null,
+      React.createElement(
+        "div",
+        { className: styles.paragraphPadding },
+        React.createElement(Paragraph, { variant: "intro-lede" }, message || content.message)
+      ),
+      React.createElement(
+        Paragraph,
+        { color: "dark-reduced-opacity", variant: "small" },
+        React.createElement(FormattedMessage, { id: "kzErrorPage.errorCode", defaultMessage: "Error code {code}", values: { code } })
+      )
+    ), illustration: React.createElement(BrandMomentError, { isAnimated: true, loop: true }), mood: "negative", primaryAction: __assign(__assign({}, actions.primary), { icon: 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: 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";
+
+export { ErrorPage };
+//# sourceMappingURL=ErrorPage.js.map

package/dist/esm/packages/components/src/ErrorPage/ErrorPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorPage.js","sources":["../../../../../../src/ErrorPage/ErrorPage.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport { FormattedMessage, useIntl } from \"@cultureamp/i18n-react-intl\"\nimport classNames from \"classnames\"\nimport { BrandMomentError } from \"@kaizen/draft-illustration\"\nimport { Paragraph } from \"@kaizen/typography\"\nimport { BrandMoment } from \"~components/BrandMoment\"\nimport { ArrowRightIcon, EmailIcon } from \"~components/Icon\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { ErrorStatuses, useErrorMessages } from \"./hooks\"\nimport styles from \"./ErrorPage.module.scss\"\n\nconst getMailToHref = (code: ErrorStatuses): string => {\n  const supportEmail = \"support@cultureamp.com\"\n  const subject = \"Houston we have a problem\"\n  const body = `Hi there,\\n\\nI received a ${code} error page while I was trying to...`\n  return encodeURI(`mailto:${supportEmail}?subject=${subject}&amp;body=${body}`)\n}\n\nconst HOME_HREF = \"/app/home\"\n\nexport type ErrorPageProps = {\n  code: ErrorStatuses\n  title?: string\n  message?: React.ReactNode | string\n  callToAction?: {\n    onContactSupport: () => void\n    homeHref?: string\n  }\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\nexport const ErrorPage = ({\n  code,\n  title,\n  message,\n  callToAction,\n  classNameOverride,\n}: ErrorPageProps): JSX.Element => {\n  const { formatMessage } = useIntl()\n  const content = useErrorMessages(code)\n\n  const actions = {\n    primary: { href: callToAction?.homeHref || HOME_HREF },\n    secondary: callToAction?.onContactSupport\n      ? { onClick: callToAction.onContactSupport }\n      : { href: getMailToHref(code) },\n  }\n\n  return (\n    <div className={classNames(classNameOverride)}>\n      <BrandMoment\n        header={<></>}\n        body={\n          <>\n            <div className={styles.paragraphPadding}>\n              <Paragraph variant=\"intro-lede\">\n                {message || content.message}\n              </Paragraph>\n            </div>\n            <Paragraph color=\"dark-reduced-opacity\" variant=\"small\">\n              <FormattedMessage\n                id=\"kzErrorPage.errorCode\"\n                defaultMessage=\"Error code {code}\"\n                values={{ code }}\n              />\n            </Paragraph>\n          </>\n        }\n        illustration={<BrandMomentError isAnimated loop />}\n        mood=\"negative\"\n        primaryAction={{\n          ...actions.primary,\n          icon: <ArrowRightIcon role=\"presentation\" />,\n          iconPosition: \"end\",\n          label: formatMessage({\n            id: \"kzErrorPage.goToHome\",\n            defaultMessage: \"Go to Home\",\n            description: \"Home button label\",\n          }),\n        }}\n        secondaryAction={{\n          ...actions.secondary,\n          icon: <EmailIcon role=\"presentation\" />,\n          label: formatMessage({\n            id: \"kzErrorPage\",\n            defaultMessage: \"Contact support\",\n            description: \"Label for contact button\",\n          }),\n        }}\n        text={{\n          title: title || content.title,\n        }}\n      />\n    </div>\n  )\n}\n\nErrorPage.displayName = \"ErrorPage\"\n"],"names":["classNames"],"mappings":"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"}

package/dist/esm/packages/components/src/ErrorPage/ErrorPage.module.scss.js

@@ -0,0 +1,4 @@
+var styles = {"paragraphPadding":"ErrorPage-module_paragraphPadding__-L-qy"};
+
+export { styles as default };
+//# sourceMappingURL=ErrorPage.module.scss.js.map

package/dist/esm/packages/components/src/ErrorPage/ErrorPage.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorPage.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/packages/components/src/ErrorPage/hooks/useErrorMessages.js

@@ -0,0 +1,122 @@
+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: "Your request has slipped into the void",
+        description: "Heading for page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.400.message",
+        defaultMessage: "Sorry but your request couldn\u2019t be completed. Go back and try again, or head to 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\u2019t 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: "Missing pages are one of life's mysteries",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.404.message",
+        defaultMessage: "Sorry but we can't fing the page you're looking for. 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 never comes easy",
+        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 };
+//# sourceMappingURL=useErrorMessages.js.map

package/dist/esm/packages/components/src/ErrorPage/hooks/useErrorMessages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useErrorMessages.js","sources":["../../../../../../../src/ErrorPage/hooks/useErrorMessages.ts"],"sourcesContent":["import { useIntl } from \"@cultureamp/i18n-react-intl\"\nexport const statusCodes = [\n  \"400\",\n  \"401\",\n  \"403\",\n  \"404\",\n  \"422\",\n  \"500\",\n  \"502\",\n  \"503\",\n  \"504\",\n] as const\n\nexport type ErrorStatuses = (typeof statusCodes)[number]\ntype TranslationMap = Record<ErrorStatuses, { title: string; message: string }>\n\nexport const useErrorMessages = (\n  code: ErrorStatuses\n): TranslationMap[ErrorStatuses] => {\n  const { formatMessage } = useIntl()\n\n  const translationsMap: TranslationMap = {\n    400: {\n      title: formatMessage({\n        id: \"kzErrorPage.400.title\",\n        defaultMessage: \"Your request has slipped into the void\",\n        description: \"Heading for page\",\n      }),\n      message: formatMessage({\n        id: \"kzErrorPage.400.message\",\n        defaultMessage:\n          \"Sorry but your request couldn’t be completed. Go back and try again, or head to Home\",\n        description: \"Call to action instructions for the user\",\n      }),\n    },\n    401: {\n      title: formatMessage({\n        id: \"kzErrorPage.401.title\",\n        defaultMessage: \"You can't view this page\",\n        description: \"Main title for page\",\n      }),\n      message: formatMessage({\n        id: \"kzErrorPage.401.message\",\n        defaultMessage:\n          \"Sorry but we can't verify if you're able to view this page. Go back and try again, or head to Home\",\n        description: \"Call to action instructions for the user\",\n      }),\n    },\n    403: {\n      title: formatMessage({\n        id: \"kzErrorPage.403.title\",\n        defaultMessage: \"You can't view this page\",\n        description: \"Main title for page\",\n      }),\n      message: formatMessage({\n        id: \"kzErrorPage.403.message\",\n        defaultMessage:\n          \"Sorry but it looks like you don’t have permission to view this page. Go back and try again, or head to Home\",\n        description: \"Call to action instructions for the user\",\n      }),\n    },\n    404: {\n      title: formatMessage({\n        id: \"kzErrorPage.404.title\",\n        defaultMessage: \"Missing pages are one of life's mysteries\",\n        description: \"Main title of page\",\n      }),\n      message: formatMessage({\n        id: \"kzErrorPage.404.message\",\n        defaultMessage:\n          \"Sorry but we can't fing the page you're looking for. Go back and try again, or head to Home\",\n        description: \"Call to action instructions for the user\",\n      }),\n    },\n    422: {\n      title: formatMessage({\n        id: \"kzErrorPage.422.title\",\n        defaultMessage: \"Change never comes easy\",\n        description: \"Main title of page\",\n      }),\n      message: formatMessage({\n        id: \"kzErrorPage.422.message\",\n        defaultMessage:\n          \"Sorry but your change couldn't be made. Go back and try again, or head to Home\",\n        description: \"Call to action instructions for the user\",\n      }),\n    },\n    500: {\n      title: formatMessage({\n        id: \"kzErrorPage.500.title\",\n        defaultMessage: \"Something's gone wrong on our side\",\n        description: \"Main title of page\",\n      }),\n      message: formatMessage({\n        id: \"kzErrorPage.500\",\n        defaultMessage:\n          \"Sorry there's an issue with our system and this page can't be displayed. Go back and try again, or head to Home\",\n        description: \"Call to action instructions for the user\",\n      }),\n    },\n    502: {\n      title: formatMessage({\n        id: \"kzErrorPage.502.title\",\n        defaultMessage: \"You can't view this page\",\n        description: \"Main title of page\",\n      }),\n      message: formatMessage({\n        id: \"kzErrorPage.502.message\",\n        defaultMessage:\n          \"Sorry about this. The best thing to do is go back and try again.\",\n        description: \"Call to action instructions for the user\",\n      }),\n    },\n    503: {\n      title: formatMessage({\n        id: \"kzErrorPage.503.title\",\n        defaultMessage: \"You can't view this page\",\n        description: \"Main title of page\",\n      }),\n      message: formatMessage({\n        id: \"kzErrorPage.503.message\",\n        defaultMessage:\n          \"Sorry about this. The best thing to do is go back and try again.\",\n        description: \"Call to action instructions for the user\",\n      }),\n    },\n    504: {\n      title: formatMessage({\n        id: \"kzErrorPage.504.title\",\n        defaultMessage: \"You can't view this page\",\n        description: \"Main title of page\",\n      }),\n      message: formatMessage({\n        id: \"kzErrorPage.504.message\",\n        defaultMessage:\n          \"Sorry about this. The best thing to do is go back and try again.\",\n        description: \"Call to action instructions for the user\",\n      }),\n    },\n  }\n\n  return (\n    translationsMap[code] || {\n      title: \"\",\n      message: \"\",\n    }\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/packages/components/src/FieldGroup/FieldGroup.js

@@ -0,0 +1,13 @@
+import { __rest, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './FieldGroup.module.scss.js';
+
+var 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 React.createElement("div", __assign({ className: classnames(styles.group, classNameOverride, inline && styles.inline) }, restProps), children);
+};
+FieldGroup.displayName = "FieldGroup";
+
+export { FieldGroup };
+//# sourceMappingURL=FieldGroup.js.map

package/dist/esm/packages/components/src/FieldGroup/FieldGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroup.js","sources":["../../../../../../src/FieldGroup/FieldGroup.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./FieldGroup.module.scss\"\n\nexport type FieldGroupProps = {\n  children?: React.ReactNode\n  inline?: boolean\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\nexport const FieldGroup = ({\n  children,\n  inline = false,\n  classNameOverride,\n  ...restProps\n}: FieldGroupProps): JSX.Element => (\n  <div\n    className={classnames(\n      styles.group,\n      classNameOverride,\n      inline && styles.inline\n    )}\n    {...restProps}\n  >\n    {children}\n  </div>\n)\n\nFieldGroup.displayName = \"FieldGroup\"\n"],"names":[],"mappings":";;;;;AAUa,IAAA,UAAA,GAAa,SAAC,EAKT,EAAA;AAJhB,EAAA,IAAA,QAAA,GAAQ,GAAA,QACR,EAAA,EAAA,GAAc,GAAA,MAAd,EAAA,MAAA,GAAS,OAAA,KAAA,CAAA,GAAA,KAAA,GAAK,IACd,iBAAiB,GAAA,EAAA,CAAA,mBACd,SAAS,GAAA,MAAA,CAAA,IAJa,2CAK1B,CAAA,CAAA;AAAmC,EAAA,OAClC,MACE,aAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EAAA,WAAW,UACT,CAAA,MAAA,CAAO,KACP,EAAA,iBAAA,EACA,UAAU,MAAO,CAAA,MAAM,GAErB,EAAA,SAAS,GAEZ,QAAQ,CAAA,CAAA;;AAIb,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}

package/dist/esm/packages/components/src/FieldGroup/FieldGroup.module.scss.js

@@ -0,0 +1,4 @@
+var styles = {"group":"FieldGroup-module_group__74Z9M","inline":"FieldGroup-module_inline__K7D9L"};
+
+export { styles as default };
+//# sourceMappingURL=FieldGroup.module.scss.js.map

package/dist/esm/packages/components/src/FieldGroup/FieldGroup.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroup.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/packages/components/src/FieldMessage/FieldMessage.js

@@ -0,0 +1,28 @@
+import { __rest, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+import classnames from 'classnames';
+import 'uuid';
+import '../Icon/subcomponents/SVG/SVG.js';
+import { CautionWhiteIcon } from '../Icon/CautionWhiteIcon.js';
+import { ExclamationWhiteIcon } from '../Icon/ExclamationWhiteIcon.js';
+import { Text } from '../Text/Text.js';
+import styles from './FieldMessage.module.scss.js';
+
+var FieldMessage = function(_a) {
+  var message = _a.message, _b = _a.status, status = _b === void 0 ? "default" : _b, _c = _a.position, position = _c === void 0 ? "bottom" : _c, _d = _a.reversed, reversed = _d === void 0 ? false : _d, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["message", "status", "position", "reversed", "classNameOverride"]);
+  var textColor = status === "default" || status === "success" ? reversed ? "white-reduced-opacity" : "dark-reduced-opacity" : "dark";
+  return React.createElement(
+    "div",
+    __assign({ className: classnames(styles.message, styles[status], classNameOverride, reversed && styles.reversed, position === "bottom" && styles.positionBottom, position === "top" && styles.positionTop) }, restProps),
+    (status === "error" || status === "caution") && React.createElement("span", { className: styles.warningIcon }, status === "error" ? React.createElement(ExclamationWhiteIcon, { role: "img", inheritSize: false, "aria-label": "".concat(status, " message") }) : React.createElement(CautionWhiteIcon, { role: "img", inheritSize: false, "aria-label": "".concat(status, " message") })),
+    React.createElement(
+      "div",
+      { className: styles.message },
+      React.createElement(Text, { variant: "small", tag: typeof message === "string" ? "p" : "div", color: textColor }, message)
+    )
+  );
+};
+FieldMessage.displayName = "FieldMessage";
+
+export { FieldMessage };
+//# sourceMappingURL=FieldMessage.js.map

package/dist/esm/packages/components/src/FieldMessage/FieldMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldMessage.js","sources":["../../../../../../src/FieldMessage/FieldMessage.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { CautionWhiteIcon, ExclamationWhiteIcon } from \"~components/Icon\"\nimport { Text } from \"~components/Text\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./FieldMessage.module.scss\"\n\nexport type FieldMessageStatus = \"default\" | \"success\" | \"error\" | \"caution\"\n\nexport type FieldMessageProps = {\n  message?: React.ReactNode\n  /** @default \"default\" */\n  status?: FieldMessageStatus\n  /** @default \"bottom\" */\n  position?: \"top\" | \"bottom\"\n  reversed?: boolean\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\nexport const FieldMessage = ({\n  message,\n  status = \"default\",\n  position = \"bottom\",\n  reversed = false,\n  classNameOverride,\n  ...restProps\n}: FieldMessageProps): JSX.Element => {\n  const textColor =\n    status === \"default\" || status === \"success\"\n      ? reversed\n        ? \"white-reduced-opacity\"\n        : \"dark-reduced-opacity\"\n      : \"dark\"\n\n  return (\n    <div\n      className={classnames(\n        styles.message,\n        styles[status],\n        classNameOverride,\n        reversed && styles.reversed,\n        position === \"bottom\" && styles.positionBottom,\n        position === \"top\" && styles.positionTop\n      )}\n      {...restProps}\n    >\n      {(status === \"error\" || status === \"caution\") && (\n        <span className={styles.warningIcon}>\n          {status === \"error\" ? (\n            <ExclamationWhiteIcon\n              role=\"img\"\n              inheritSize={false}\n              aria-label={`${status} message`}\n            />\n          ) : (\n            <CautionWhiteIcon\n              role=\"img\"\n              inheritSize={false}\n              aria-label={`${status} message`}\n            />\n          )}\n        </span>\n      )}\n      <div className={styles.message}>\n        <Text\n          variant=\"small\"\n          tag={typeof message === \"string\" ? \"p\" : \"div\"}\n          color={textColor}\n        >\n          {message}\n        </Text>\n      </div>\n    </div>\n  )\n}\n\nFieldMessage.displayName = \"FieldMessage\"\n"],"names":[],"mappings":";;;;;;;;;;AAkBa,IAAA,YAAA,GAAe,SAAC,EAOT,EAAA;AANlB,EAAA,IAAA,UAAO,EAAA,CAAA,OAAA,EACP,EAAA,GAAA,EAAA,CAAA,QAAA,MAAS,GAAA,EAAA,KAAA,KAAA,CAAA,GAAA,SAAA,GAAS,IAClB,EAAmB,GAAA,EAAA,CAAA,UAAnB,QAAW,GAAA,EAAA,KAAA,SAAA,QAAQ,GAAA,EAAA,EACnB,EAAgB,GAAA,EAAA,CAAA,UAAhB,QAAQ,GAAA,EAAA,KAAA,SAAG,KAAK,GAAA,EAAA,EAChB,oBAAiB,EAAA,CAAA,iBAAA,EACd,SAAS,GAAA,MAAA,CAAA,IANe,kEAO5B,CAAA,CAAA;AACC,EAAA,IAAM,YACJ,MAAW,KAAA,SAAA,IAAa,WAAW,SAC/B,GAAA,QAAA,GACE,0BACA,sBACF,GAAA,MAAA,CAAA;AAEN,EAAA,OACE,KACE,CAAA,aAAA;AAAA,IAAA,KAAA;AAAA,IAAA,QAAA,CAAA,EAAA,SAAW,EAAA,UAAA,CACT,OAAO,OACP,EAAA,MAAA,CAAO,MAAM,CAAA,EACb,iBACA,EAAA,QAAA,IAAY,OAAO,QACnB,EAAA,QAAA,KAAa,QAAY,IAAA,MAAA,CAAO,cAChC,EAAA,QAAA,KAAa,SAAS,MAAO,CAAA,WAAW,KAEtC,SAAS,CAAA;AAAA,IAEX,CAAA,MAAA,KAAW,WAAW,MAAW,KAAA,SAAA,KACjC,MAAM,aAAA,CAAA,MAAA,EAAA,EAAA,SAAW,EAAA,MAAA,CAAO,aACrB,EAAA,MAAA,KAAW,UACV,KAAC,CAAA,aAAA,CAAA,sBACC,EAAA,IAAA,EAAK,OACL,WAAa,EAAA,KAAA,EACD,cAAA,EAAA,CAAA,MAAA,CAAG,QAAM,UAAA,CAAA,EACrB,CAEF,GAAA,KAAA,CAAC,cAAA,gBACC,EAAA,EAAA,MAAK,KACL,EAAA,WAAA,EAAa,OACD,YAAA,EAAA,EAAA,CAAA,OAAG,MAAM,EAAA,UAAA,CACrB,EAAA,CACH,CAAA;AAAA,IAGL,KAAA,CAAA,aAAA;AAAA,MAAA,KAAA;AAAA,MAAA,EAAK,SAAW,EAAA,MAAA,CAAO,OAAO,EAAA;AAAA,MAC5B,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,SAAQ,OACR,EAAA,GAAA,EAAK,OAAO,OAAA,KAAY,WAAW,GAAM,GAAA,KAAA,EACzC,KAAO,EAAA,SAAA,IAEN,OAAO,CAAA;AAAA,KACH;AAAA,GACH,CAAA;AAGZ,EAAA;AAEA,YAAA,CAAa,WAAc,GAAA,cAAA;;;;"}