@kaizen/components 1.24.2 → 1.26.0

package/dist/esm/Avatar/Avatar.mjs

@@ -0,0 +1,110 @@
+import { __rest, __assign } from 'tslib';
+import React, { useState, useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import { Textfit } from 'react-textfit';
+import 'uuid';
+import '../Icon/subcomponents/SVG/SVG.mjs';
+import { UserIcon } from '../Icon/UserIcon.mjs';
+import styles from './Avatar.module.scss.mjs';
+var getInitials = function (fullName, max2Characters) {
+  if (max2Characters === void 0) {
+    max2Characters = false;
+  }
+  return fullName == null ? "" : fullName.split(/\s/).reduce(function (acc, name) {
+    return "".concat(acc).concat(name.slice(0, 1));
+  }, "").toUpperCase().substring(0, max2Characters ? 2 : 8);
+};
+var getMaxFontSizePixels = function (size) {
+  if (size === "small") return 8;
+  if (size === "medium") return 16;
+  if (size === "xlarge" || size === "xxlarge") return 34;
+  return 22;
+};
+var fallbackIcon = function (fullName) {
+  if (fullName) {
+    return /*#__PURE__*/React.createElement(UserIcon, {
+      inheritSize: true,
+      role: "img",
+      "aria-label": fullName
+    });
+  }
+  return /*#__PURE__*/React.createElement(UserIcon, {
+    inheritSize: true,
+    role: "presentation"
+  });
+};
+var renderInitials = function (fullName, size, disableInitials) {
+  if (fullName === void 0) {
+    fullName = "";
+  }
+  if (disableInitials === void 0) {
+    disableInitials = false;
+  }
+  var initials = getInitials(fullName);
+  var isLongName = initials.length > 2 && size !== "small";
+  var renderFallback = disableInitials || initials === "";
+  return renderFallback ? /*#__PURE__*/React.createElement("span", {
+    className: styles.fallbackIcon
+  }, fallbackIcon(fullName)) : /*#__PURE__*/React.createElement("abbr", {
+    className: classnames(styles.initials, isLongName && styles.longName),
+    title: fullName || ""
+  }, isLongName ?
+  /*#__PURE__*/
+  // Only called if 3 or more initials, fits text width for long names
+  React.createElement(Textfit, {
+    mode: "single",
+    max: getMaxFontSizePixels(size)
+  }, initials) : getInitials(fullName, size === "small"));
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064857475/Avatar Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-avatar-avatar--docs Storybook}
+ */
+var Avatar = function (_a) {
+  var fullName = _a.fullName,
+    _b = _a.size,
+    size = _b === void 0 ? "medium" : _b,
+    avatarSrc = _a.avatarSrc,
+    _c = _a.disableInitials,
+    disableInitials = _c === void 0 ? false : _c,
+    _d = _a.isCompany,
+    isCompany = _d === void 0 ? false : _d,
+    _e = _a.isCurrentUser,
+    isCurrentUser = _e === void 0 ? true : _e,
+    classNameOverride = _a.classNameOverride,
+    restProps = __rest(_a, ["fullName", "size", "avatarSrc", "disableInitials", "isCompany", "isCurrentUser", "classNameOverride"]);
+  var _f = useState(avatarSrc ? "loading" : "none"),
+    avatarState = _f[0],
+    setAvatarState = _f[1];
+  var image = useRef(null);
+  var renderInitialAvatar = !isCompany && (avatarState === "none" || avatarState === "error");
+  useEffect(function () {
+    setAvatarState(avatarSrc ? "loading" : "none");
+  }, [avatarSrc]);
+  var onImageFailure = function () {
+    return setAvatarState("error");
+  };
+  var onImageSuccess = function () {
+    return setAvatarState("success");
+  };
+  // if the image is cached onLoad may not trigger: https://stackoverflow.com/a/59809184
+  useEffect(function () {
+    var _a;
+    if ((_a = image === null || image === void 0 ? void 0 : image.current) === null || _a === void 0 ? void 0 : _a.complete) onImageSuccess();
+  }, [image]);
+  var isNoneOrError = avatarState === "none" || avatarState === "error";
+  var isPersonal = isNoneOrError && isCurrentUser;
+  var isOtherUser = isNoneOrError && !isCurrentUser;
+  return /*#__PURE__*/React.createElement("span", __assign({
+    className: classnames(styles.wrapper, styles[size], classNameOverride, isCompany && styles.company, isPersonal && styles.personal, isOtherUser && styles.otherUser, (avatarState === "loading" || avatarState === "error") && styles.loading)
+  }, restProps), avatarState !== "none" && /*#__PURE__*/React.createElement("img", {
+    ref: image,
+    className: classnames(styles.avatarImage, isCompany && styles.companyAvatarImage),
+    src: avatarSrc,
+    onError: onImageFailure,
+    onLoad: onImageSuccess,
+    alt: fullName || ""
+  }), renderInitialAvatar && renderInitials(fullName, size, disableInitials));
+};
+export { Avatar };
+//# sourceMappingURL=Avatar.mjs.map

package/dist/esm/Avatar/Avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.mjs","sources":["../../../src/Avatar/Avatar.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { Textfit } from \"react-textfit\"\nimport { UserIcon } from \"~components/Icon\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./Avatar.module.scss\"\n\nexport type AvatarSizes = \"small\" | \"medium\" | \"large\" | \"xlarge\" | \"xxlarge\"\n\ntype BaseAvatarProps = {\n  /**\n   * We use this for the alt text of the avatar, and to derive intials when user has no avatar image.\n   */\n  fullName?: string\n  /**\n   * There are 5 fixed avatar sizes. `\"small\"` will remove border and box shadow to save space.\n   */\n  size?: AvatarSizes\n  /**\n   * Src for the avatar img tag - if not passed we will derive initials from the full name.\n   * Note that the fullName prop will be used as the alt text.\n   */\n  avatarSrc?: string\n  /**\n   * Default behaviour when an avatarSrc is not provided is to generate initials from the username.\n   * This disables this feature and shows the generic avatar.\n   * Enable this prop when there is no specific individual or group identified.\n   */\n  disableInitials?: boolean\n  /**\n   * Renders Company Avatar variant - If true `fullName` and `avatarSrc` will be strictly typed.\n   */\n  isCompany?: boolean\n} & OverrideClassName<HTMLAttributes<HTMLSpanElement>>\n\nexport type GenericAvatarProps = BaseAvatarProps & {\n  isCompany?: false\n  /**\n   * Shows a different background colour if the avatar is the current user and does not have a avatar img.\n   * @default \"true\"\n   */\n  isCurrentUser?: boolean\n}\n\nexport type CompanyAvatarProps = BaseAvatarProps & {\n  fullName: string\n  avatarSrc: string\n  disableInitials?: undefined\n  isCompany: true\n  isCurrentUser?: undefined\n}\n\nexport type AvatarProps = GenericAvatarProps | CompanyAvatarProps\n\nconst getInitials = (\n  fullName?: string,\n  max2Characters: boolean = false\n): string =>\n  fullName == null\n    ? \"\"\n    : fullName\n        .split(/\\s/)\n        .reduce((acc, name) => `${acc}${name.slice(0, 1)}`, \"\")\n        .toUpperCase()\n        .substring(0, max2Characters ? 2 : 8)\n\nconst getMaxFontSizePixels: (size: AvatarSizes) => number = size => {\n  if (size === \"small\") return 8\n  if (size === \"medium\") return 16\n  if (size === \"xlarge\" || size === \"xxlarge\") return 34\n  return 22\n}\n\nconst fallbackIcon = (fullName: string): JSX.Element => {\n  if (fullName) {\n    return <UserIcon inheritSize role=\"img\" aria-label={fullName} />\n  }\n\n  return <UserIcon inheritSize role=\"presentation\" />\n}\n\nconst renderInitials = (\n  fullName = \"\",\n  size: AvatarSizes,\n  disableInitials = false\n): JSX.Element => {\n  const initials = getInitials(fullName)\n  const isLongName = initials.length > 2 && size !== \"small\"\n  const renderFallback = disableInitials || initials === \"\"\n\n  return renderFallback ? (\n    <span className={styles.fallbackIcon}>{fallbackIcon(fullName)}</span>\n  ) : (\n    <abbr\n      className={classnames(styles.initials, isLongName && styles.longName)}\n      title={fullName || \"\"}\n    >\n      {isLongName ? (\n        // Only called if 3 or more initials, fits text width for long names\n        <Textfit mode=\"single\" max={getMaxFontSizePixels(size)}>\n          {initials}\n        </Textfit>\n      ) : (\n        getInitials(fullName, size === \"small\")\n      )}\n    </abbr>\n  )\n}\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064857475/Avatar Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-avatar-avatar--docs Storybook}\n */\nexport const Avatar = ({\n  fullName,\n  size = \"medium\",\n  avatarSrc,\n  disableInitials = false,\n  isCompany = false,\n  isCurrentUser = true,\n  classNameOverride,\n  ...restProps\n}: AvatarProps): JSX.Element => {\n  const [avatarState, setAvatarState] = useState<\n    \"none\" | \"error\" | \"loading\" | \"success\"\n  >(avatarSrc ? \"loading\" : \"none\")\n  const image = useRef<HTMLImageElement>(null)\n  const renderInitialAvatar =\n    !isCompany && (avatarState === \"none\" || avatarState === \"error\")\n\n  useEffect(() => {\n    setAvatarState(avatarSrc ? \"loading\" : \"none\")\n  }, [avatarSrc])\n\n  const onImageFailure = (): void => setAvatarState(\"error\")\n  const onImageSuccess = (): void => setAvatarState(\"success\")\n\n  // if the image is cached onLoad may not trigger: https://stackoverflow.com/a/59809184\n  useEffect(() => {\n    if (image?.current?.complete) onImageSuccess()\n  }, [image])\n\n  const isNoneOrError = avatarState === \"none\" || avatarState === \"error\"\n  const isPersonal = isNoneOrError && isCurrentUser\n  const isOtherUser = isNoneOrError && !isCurrentUser\n\n  return (\n    <span\n      className={classnames(\n        styles.wrapper,\n        styles[size],\n        classNameOverride,\n        isCompany && styles.company,\n        isPersonal && styles.personal,\n        isOtherUser && styles.otherUser,\n        (avatarState === \"loading\" || avatarState === \"error\") && styles.loading\n      )}\n      {...restProps}\n    >\n      {avatarState !== \"none\" && (\n        <img\n          ref={image}\n          className={classnames(\n            styles.avatarImage,\n            isCompany && styles.companyAvatarImage\n          )}\n          src={avatarSrc}\n          onError={onImageFailure}\n          onLoad={onImageSuccess}\n          alt={fullName || \"\"}\n        />\n      )}\n      {renderInitialAvatar && renderInitials(fullName, size, disableInitials)}\n    </span>\n  )\n}\n"],"names":["getInitials","fullName","max2Characters","split","reduce","acc","name","concat","slice","toUpperCase","substring","getMaxFontSizePixels","size","fallbackIcon","React","createElement","UserIcon","inheritSize","role","renderInitials","disableInitials","initials","isLongName","length","renderFallback","className","styles","classnames","longName","title","Textfit","mode","max","Avatar","_a","_b","avatarSrc","_c","_d","isCompany","_e","isCurrentUser","classNameOverride","restProps","__rest","_f","useState","avatarState","setAvatarState","image","useRef","renderInitialAvatar","useEffect","onImageFailure","onImageSuccess","current","complete","isNoneOrError","isPersonal","isOtherUser","wrapper","company","personal","otherUser","loading","ref","avatarImage","companyAvatarImage","src","onError","onLoad","alt"],"mappings":"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"}

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

@@ -0,0 +1,19 @@
+var styles = {
+  "wrapper": "Avatar-module_wrapper__LY2q2",
+  "small": "Avatar-module_small__PeksS",
+  "personal": "Avatar-module_personal__2U7--",
+  "otherUser": "Avatar-module_otherUser__b-drl",
+  "company": "Avatar-module_company__2qtJE",
+  "initials": "Avatar-module_initials__VDY2Q",
+  "medium": "Avatar-module_medium__Vy3V8",
+  "large": "Avatar-module_large__qiNWs",
+  "xlarge": "Avatar-module_xlarge__Vx4IG",
+  "xxlarge": "Avatar-module_xxlarge__oOoGq",
+  "avatarImage": "Avatar-module_avatarImage__FuULy",
+  "loading": "Avatar-module_loading__i9V-D",
+  "companyAvatarImage": "Avatar-module_companyAvatarImage__7rlfG",
+  "fallbackIcon": "Avatar-module_fallbackIcon__MPWxq",
+  "longName": "Avatar-module_longName__31Yuf"
+};
+export { styles as default };
+//# sourceMappingURL=Avatar.module.scss.mjs.map

package/dist/esm/Avatar/Avatar.module.scss.mjs.map

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

package/dist/esm/AvatarGroup/AvatarGroup.mjs

@@ -0,0 +1,44 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { Avatar } from '../Avatar/Avatar.mjs';
+import styles from './AvatarGroup.module.scss.mjs';
+var renderCounter = function (remainingAvatars) {
+  if (remainingAvatars <= 0) return;
+  return /*#__PURE__*/React.createElement("li", {
+    "aria-label": "There ".concat(remainingAvatars > 1 ? "are ".concat(remainingAvatars, " other members") : "is ".concat(remainingAvatars, " other member"), " of this group"),
+    className: styles.AvatarGroupItem
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.AvatarCounter,
+    "aria-hidden": true
+  }, "+".concat(remainingAvatars)));
+};
+var renderAvatars = function (avatars, maxVisible, size) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, avatars === null || avatars === void 0 ? void 0 : avatars.map(function (avatarProps, index) {
+    return index < maxVisible && /*#__PURE__*/React.createElement("li", {
+      key: "avatar-".concat(index),
+      className: styles.AvatarGroupItem
+    }, /*#__PURE__*/React.createElement(Avatar, __assign({}, avatarProps, {
+      size: size
+    })));
+  }), renderCounter((avatars === null || avatars === void 0 ? void 0 : avatars.length) - maxVisible));
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3065021264/Avatar+Group Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-avatar-avatar-group--docs Storybook}
+ */
+var AvatarGroup = function (_a) {
+  var _b = _a.size,
+    size = _b === void 0 ? "medium" : _b,
+    _c = _a.maxVisible,
+    maxVisible = _c === void 0 ? 2 : _c,
+    avatars = _a.avatars,
+    classNameOverride = _a.classNameOverride,
+    restProps = __rest(_a, ["size", "maxVisible", "avatars", "classNameOverride"]);
+  return /*#__PURE__*/React.createElement("ul", __assign({
+    className: classnames(styles.AvatarGroup, styles[size], classNameOverride),
+    "aria-label": "Avatar Group"
+  }, restProps), renderAvatars(avatars, maxVisible, size));
+};
+export { AvatarGroup };
+//# sourceMappingURL=AvatarGroup.mjs.map

package/dist/esm/AvatarGroup/AvatarGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.mjs","sources":["../../../src/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport {\n  Avatar,\n  CompanyAvatarProps,\n  GenericAvatarProps,\n} from \"~components/Avatar\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./AvatarGroup.module.scss\"\n\nexport type AvatarGroupAvatarProps =\n  | Omit<GenericAvatarProps, \"size\">\n  | Omit<CompanyAvatarProps, \"size\">\n\nexport type AvatarGroupSize = \"small\" | \"medium\" | \"large\"\nexport type AvatarList = [AvatarGroupAvatarProps, ...AvatarGroupAvatarProps[]]\n\nexport type AvatarGroupProps = {\n  /**\n   * There are 3 fixed sizes available. `\"small\"` will remove border and box shadow to save space.\n   * @default \"medium\"\n   */\n  size?: AvatarGroupSize\n  /**\n   * If the length of Avatars exceeds the `maxVisible` a counter token will render\n   * @default 2\n   */\n  maxVisible: 2 | 3 | 4 | 5 | 6\n  /**\n   * Takes a array of `AvatarProps` that must have at least item.\n   * Note that 'size' is omitted from the `AvatarProps` type so it will throw a type error if size is provided.\n   * */\n  avatars: AvatarList\n} & OverrideClassName<HTMLAttributes<HTMLUListElement>>\n\nconst renderCounter = (remainingAvatars: number): JSX.Element | void => {\n  if (remainingAvatars <= 0) return\n  return (\n    <li\n      aria-label={`There ${\n        remainingAvatars > 1\n          ? `are ${remainingAvatars} other members`\n          : `is ${remainingAvatars} other member`\n      } of this group`}\n      className={styles.AvatarGroupItem}\n    >\n      <span className={styles.AvatarCounter} aria-hidden={true}>\n        {`+${remainingAvatars}`}\n      </span>\n    </li>\n  )\n}\n\nconst renderAvatars = (\n  avatars: AvatarList,\n  maxVisible: number,\n  size: AvatarGroupSize\n): JSX.Element => (\n  <>\n    {avatars?.map(\n      (avatarProps, index) =>\n        index < maxVisible && (\n          <li key={`avatar-${index}`} className={styles.AvatarGroupItem}>\n            <Avatar {...avatarProps} size={size} />\n          </li>\n        )\n    )}\n    {renderCounter(avatars?.length - maxVisible)}\n  </>\n)\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3065021264/Avatar+Group Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-avatar-avatar-group--docs Storybook}\n */\nexport const AvatarGroup = ({\n  size = \"medium\",\n  maxVisible = 2,\n  avatars,\n  classNameOverride,\n  ...restProps\n}: AvatarGroupProps): JSX.Element => (\n  <ul\n    className={classnames(styles.AvatarGroup, styles[size], classNameOverride)}\n    aria-label=\"Avatar Group\"\n    {...restProps}\n  >\n    {renderAvatars(avatars, maxVisible, size)}\n  </ul>\n)\n"],"names":["renderCounter","remainingAvatars","React","createElement","concat","className","styles","AvatarGroupItem","AvatarCounter","renderAvatars","avatars","maxVisible","size","Fragment","map","avatarProps","index","key","Avatar","length","AvatarGroup","_a","_b","_c","classNameOverride","restProps","__rest","__assign","classnames"],"mappings":";;;;;AAmCA,IAAMA,aAAa,GAAG,SAAAA,CAACC,gBAAwB,EAAA;EAC7C,IAAIA,gBAAgB,IAAI,CAAC,EAAE;EAC3B,oBACEC,KAAA,CAAAC,aAAA,CAAA,IAAA,EAAA;IAAA,YAAA,EACc,QACV,CAAAC,MAAA,CAAAH,gBAAgB,GAAG,CAAC,GAChB,MAAO,CAAAG,MAAA,CAAAH,gBAAgB,EAAgB,gBAAA,CAAA,GACvC,KAAM,CAAAG,MAAA,CAAAH,gBAAgB,EAAe,eAAA,CAAA,EAAA,gBAAA,CAC3B;IAChBI,SAAS,EAAEC,MAAM,CAACC;EAAe,CAAA,eAEjCL,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IAAME,SAAS,EAAEC,MAAM,CAACE,aAAa;IAAe,aAAA,EAAA;EACjD,CAAA,EAAA,GAAA,CAAAJ,MAAA,CAAIH,gBAAgB,CAAE,CAClB,CACJ;AAET,CAAC;AAED,IAAMQ,aAAa,GAAG,SAAAA,CACpBC,OAAmB,EACnBC,UAAkB,EAClBC,IAAqB,EAAA;EACL,oBAChBV,KACG,CAAAC,aAAA,CAAAD,KAAA,CAAAW,QAAA,EAAA,IAAA,EAAAH,OAAO,aAAPA,OAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAPA,OAAO,CAAEI,GAAG,CACX,UAACC,WAAW,EAAEC,KAAK,EAAA;IACjB,OAAAA,KAAK,GAAGL,UAAU,iBAChBT;MAAIe,GAAG,EAAE,SAAU,CAAAb,MAAA,CAAAY,KAAK,CAAE;MAAEX,SAAS,EAAEC,MAAM,CAACC;IAAe,CAAA,eAC3DL,KAAC,CAAAC,aAAA,CAAAe,MAAM,eAAKH,WAAW,EAAA;MAAEH,IAAI,EAAEA;KAAQ,CAAA,CAAA,CAE1C;EAJD,CAIC,CACJ,EACAZ,aAAa,CAAC,CAAAU,OAAO,KAAP,IAAA,IAAAA,OAAO,uBAAPA,OAAO,CAAES,MAAM,IAAGR,UAAU,CAAC,CAC3C;AACJ,CAAA;AAED;;;AAGG;AACI,IAAMS,WAAW,GAAG,SAAAA,CAACC,EAMT,EAAA;EALjB,IAAAC,EAAA,GAAAD,EAAA,CAAAT,IAAe;IAAfA,IAAI,GAAAU,EAAA,KAAA,KAAA,CAAA,GAAG,QAAQ,GAAAA,EAAA;IACfC,EAAc,GAAAF,EAAA,CAAAV,UAAA;IAAdA,UAAU,GAAAY,EAAA,KAAA,KAAA,CAAA,GAAG,CAAC,GAAAA,EAAA;IACdb,OAAO,GAAAW,EAAA,CAAAX,OAAA;IACPc,iBAAiB,uBAAA;IACdC,SAAS,GALcC,MAAA,CAAAL,EAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,SAAA,EAAA,mBAAA,CAM3B,CADa;EACuB,oBACnCnB,KAAA,CAAAC,aAAA,CAAA,IAAA,EAAAwB,QAAA,CAAA;IACEtB,SAAS,EAAEuB,UAAU,CAACtB,MAAM,CAACc,WAAW,EAAEd,MAAM,CAACM,IAAI,CAAC,EAAEY,iBAAiB,CAAC;IAAA,YAAA,EAC/D;EAAc,CAAA,EACrBC,SAAS,CAAA,EAEZhB,aAAa,CAACC,OAAO,EAAEC,UAAU,EAAEC,IAAI,CAAC,CACtC;;"}

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

@@ -0,0 +1,10 @@
+var styles = {
+  "AvatarGroup": "AvatarGroup-module_AvatarGroup__bdL0o",
+  "small": "AvatarGroup-module_small__7uv8k",
+  "AvatarGroupItem": "AvatarGroup-module_AvatarGroupItem__xQol-",
+  "medium": "AvatarGroup-module_medium__af52y",
+  "large": "AvatarGroup-module_large__HN9Yy",
+  "AvatarCounter": "AvatarGroup-module_AvatarCounter__PKFzl"
+};
+export { styles as default };
+//# sourceMappingURL=AvatarGroup.module.scss.mjs.map

package/dist/esm/AvatarGroup/AvatarGroup.module.scss.mjs.map

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

package/dist/esm/Badge/Badge.mjs

@@ -0,0 +1,43 @@
+import { __rest, __assign } from 'tslib';
+import React, { useState, useLayoutEffect } from 'react';
+import classnames from 'classnames';
+import styles from './Badge.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064857333/Badge Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-badge--docs Storybook}
+ */
+const Badge = /*#__PURE__*/function () {
+  const Badge = function (_a) {
+    var children = _a.children,
+      _b = _a.variant,
+      variant = _b === void 0 ? "default" : _b,
+      _c = _a.reversed,
+      reversed = _c === void 0 ? false : _c,
+      _d = _a.size,
+      size = _d === void 0 ? "small" : _d,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["children", "variant", "reversed", "size", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("span", __assign({
+      className: classnames(styles.badge, styles[variant], classNameOverride, reversed && styles.reversed, size === "large" && styles.large)
+    }, restProps), variant !== "dot" && children);
+  };
+  Badge.displayName = "Badge";
+  return Badge;
+}();
+var BadgeAnimated = function (props) {
+  var _a = useState(false),
+    isFocused = _a[0],
+    setIsFocused = _a[1];
+  useLayoutEffect(function () {
+    setIsFocused(true);
+    setTimeout(function () {
+      setIsFocused(false);
+    }, 150);
+  }, [props.children]);
+  return /*#__PURE__*/React.createElement("span", {
+    className: classnames(styles.animation, isFocused && styles.animationOn)
+  }, /*#__PURE__*/React.createElement(Badge, __assign({}, props)));
+};
+export { Badge, BadgeAnimated };
+//# sourceMappingURL=Badge.mjs.map

package/dist/esm/Badge/Badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.mjs","sources":["../../../src/Badge/Badge.tsx"],"sourcesContent":["import React, { HTMLAttributes, useLayoutEffect, useState } from \"react\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./Badge.module.scss\"\n\ntype BadgeCommonProps = {\n  children?: string\n  /**\n   * The \"dark\" variant is no longer in the UI kit\n   */\n  variant?: \"default\" | \"active\" | \"dark\"\n  /**\n   * renders reversed colors. Use on purple background\n   */\n  reversed?: boolean\n  /**\n   * Supports \"small\" and \"large\" sizes - defaults to \"small\"\n   */\n  size?: \"small\" | \"large\"\n} & OverrideClassName<HTMLAttributes<HTMLSpanElement>>\n\ntype DotProps = Omit<BadgeCommonProps, \"variant\"> & {\n  children?: never\n  variant: \"dot\"\n}\n\nexport type BadgeProps = BadgeCommonProps | DotProps\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064857333/Badge Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-badge--docs Storybook}\n */\nexport const Badge = ({\n  children,\n  variant = \"default\",\n  reversed = false,\n  size = \"small\",\n  classNameOverride,\n  ...restProps\n}: BadgeProps): JSX.Element => (\n  <span\n    className={classnames(\n      styles.badge,\n      styles[variant],\n      classNameOverride,\n      reversed && styles.reversed,\n      size === \"large\" && styles.large\n    )}\n    {...restProps}\n  >\n    {variant !== \"dot\" && children}\n  </span>\n)\n\nexport const BadgeAnimated = (props: BadgeProps): JSX.Element => {\n  const [isFocused, setIsFocused] = useState(false)\n\n  useLayoutEffect(() => {\n    setIsFocused(true)\n    setTimeout(() => {\n      setIsFocused(false)\n    }, 150)\n  }, [props.children])\n\n  return (\n    <span\n      className={classnames(styles.animation, isFocused && styles.animationOn)}\n    >\n      <Badge {...props} />\n    </span>\n  )\n}\n\nBadge.displayName = \"Badge\"\n"],"names":["Badge","_a","children","_b","variant","_c","reversed","_d","size","classNameOverride","restProps","__rest","React","createElement","__assign","className","classnames","styles","badge","large","displayName","BadgeAnimated","props","useState","isFocused","setIsFocused","useLayoutEffect","setTimeout","animation","animationOn"],"mappings":";;;;;AA4BA;;;AAGG;AAHH,MAIaA,KAAK;EAAA,MAALA,KAAK,GAAG,SAAAA,CAACC,EAOT,EAAA;IANX,IAAAC,QAAQ,GAAAD,EAAA,CAAAC,QAAA;MACRC,EAAA,GAAAF,EAAA,CAAAG,OAAmB;MAAnBA,OAAO,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,SAAS,GAAAA,EAAA;MACnBE,EAAgB,GAAAJ,EAAA,CAAAK,QAAA;MAAhBA,QAAQ,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,GAAAA,EAAA;MAChBE,EAAc,GAAAN,EAAA,CAAAO,IAAA;MAAdA,IAAI,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,OAAO,GAAAA,EAAA;MACdE,iBAAiB,GAAAR,EAAA,CAAAQ,iBAAA;MACdC,SAAS,GAAAC,MAAA,CAAAV,EAAA,EANQ,gEAOrB,CADa;IACiB,oBAC7BW,KACE,CAAAC,aAAA,CAAA,MAAA,EAAAC,QAAA,CAAA;MAAAC,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACC,KAAK,EACZD,MAAM,CAACb,OAAO,CAAC,EACfK,iBAAiB,EACjBH,QAAQ,IAAIW,MAAM,CAACX,QAAQ,EAC3BE,IAAI,KAAK,OAAO,IAAIS,MAAM,CAACE,KAAK;OAE9BT,SAAS,CAAA,EAEZN,OAAO,KAAK,KAAK,IAAIF,QAAQ,CACzB;GACR;EAqBDF,KAAK,CAACoB,WAAW,GAAG,OAAO;EAAA,OAzCdpB,KAAK;AAAA;AAsBX,IAAMqB,aAAa,GAAG,SAAAA,CAACC,KAAiB,EAAA;EACvC,IAAArB,EAAA,GAA4BsB,QAAQ,CAAC,KAAK,CAAC;IAA1CC,SAAS,GAAAvB,EAAA,CAAA,CAAA,CAAA;IAAEwB,YAAY,GAAAxB,EAAA,CAAA,CAAA,CAAmB;EAEjDyB,eAAe,CAAC,YAAA;IACdD,YAAY,CAAC,IAAI,CAAC;IAClBE,UAAU,CAAC,YAAA;MACTF,YAAY,CAAC,KAAK,CAAC;IACpB,CAAA,EAAE,GAAG,CAAC;EACT,CAAC,EAAE,CAACH,KAAK,CAACpB,QAAQ,CAAC,CAAC;EAEpB,oBACEU,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IACEE,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACW,SAAS,EAAEJ,SAAS,IAAIP,MAAM,CAACY,WAAW;EAAC,CAAA,eAExEjB,KAAA,CAAAC,aAAA,CAACb,KAAK,EAAKc,QAAA,CAAA,CAAA,CAAA,EAAAQ,KAAK,CAAI,CAAA,CACf;AAEX,CAAC;"}

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

@@ -0,0 +1,13 @@
+var styles = {
+  "badge": "Badge-module_badge__CRtsW",
+  "large": "Badge-module_large__0QOpY",
+  "default": "Badge-module_default__k4Kcf",
+  "active": "Badge-module_active__-e-i2",
+  "reversed": "Badge-module_reversed__OgQLB",
+  "dark": "Badge-module_dark__RH34a",
+  "dot": "Badge-module_dot__BOKL1",
+  "animation": "Badge-module_animation__NTy6C",
+  "animationOn": "Badge-module_animationOn__nWK38"
+};
+export { styles as default };
+//# sourceMappingURL=Badge.module.scss.mjs.map

package/dist/esm/Badge/Badge.module.scss.mjs.map

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

package/dist/esm/Brand/Brand.mjs

@@ -0,0 +1,32 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { assetUrl } from '@kaizen/hosted-assets';
+import styles from './Brand.module.scss.mjs';
+const Brand = /*#__PURE__*/function () {
+  const Brand = function (_a) {
+    var variant = _a.variant,
+      alt = _a.alt,
+      _b = _a.reversed,
+      reversed = _b === void 0 ? false : _b,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["variant", "alt", "reversed", "classNameOverride"]);
+    var brandTheme = reversed ? "-reversed" : "-default";
+    return /*#__PURE__*/React.createElement("picture", __assign({
+      className: classNameOverride
+    }, restProps), /*#__PURE__*/React.createElement("source", {
+      srcSet: assetUrl("brand/".concat(variant, "-reversed.svg")),
+      media: "(forced-colors: active) and (prefers-color-scheme: dark)"
+    }), /*#__PURE__*/React.createElement("source", {
+      srcSet: assetUrl("brand/".concat(variant, "-default.svg")),
+      media: "(forced-colors: active) and (prefers-color-scheme: light)"
+    }), /*#__PURE__*/React.createElement("img", {
+      src: assetUrl("brand/".concat(variant).concat(brandTheme, ".svg")),
+      alt: alt,
+      className: styles.img
+    }));
+  };
+  Brand.displayName = "Brand";
+  return Brand;
+}();
+export { Brand };
+//# sourceMappingURL=Brand.mjs.map

package/dist/esm/Brand/Brand.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Brand.mjs","sources":["../../../src/Brand/Brand.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport { assetUrl } from \"@kaizen/hosted-assets\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./Brand.module.scss\"\n\nexport type BrandProps = {\n  variant:\n    | \"logo-horizontal\"\n    | \"logo-vertical\"\n    | \"enso\"\n    | \"collective-intelligence\"\n  alt: string\n  reversed?: boolean\n} & OverrideClassName<HTMLAttributes<HTMLElement>>\n\nexport const Brand = ({\n  variant,\n  alt,\n  reversed = false,\n  classNameOverride,\n  ...restProps\n}: BrandProps): JSX.Element => {\n  const brandTheme = reversed ? \"-reversed\" : \"-default\"\n\n  return (\n    <picture className={classNameOverride} {...restProps}>\n      <source\n        srcSet={assetUrl(`brand/${variant}-reversed.svg`)}\n        media=\"(forced-colors: active) and (prefers-color-scheme: dark)\"\n      />\n      <source\n        srcSet={assetUrl(`brand/${variant}-default.svg`)}\n        media=\"(forced-colors: active) and (prefers-color-scheme: light)\"\n      />\n      <img\n        src={assetUrl(`brand/${variant}${brandTheme}.svg`)}\n        alt={alt}\n        className={styles.img}\n      />\n    </picture>\n  )\n}\n\nBrand.displayName = \"Brand\"\n"],"names":["Brand","_a","variant","alt","_b","reversed","classNameOverride","restProps","__rest","brandTheme","React","createElement","__assign","className","srcSet","assetUrl","concat","media","src","styles","img","displayName"],"mappings":";;;;MAeaA,KAAK;EAAA,MAALA,KAAK,GAAG,SAAAA,CAACC,EAMT,EAAA;IALX,IAAAC,OAAO,GAAAD,EAAA,CAAAC,OAAA;MACPC,GAAG,GAAAF,EAAA,CAAAE,GAAA;MACHC,gBAAgB;MAAhBC,QAAQ,mBAAG,KAAK,GAAAD,EAAA;MAChBE,iBAAiB,GAAAL,EAAA,CAAAK,iBAAA;MACdC,SAAS,GAAAC,MAAA,CAAAP,EAAA,EALQ,mDAMrB,CADa;IAEZ,IAAMQ,UAAU,GAAGJ,QAAQ,GAAG,WAAW,GAAG,UAAU;IAEtD,oBACEK,KAAS,CAAAC,aAAA,CAAA,SAAA,EAAAC,QAAA,CAAA;MAAAC,SAAS,EAAEP;OAAuBC,SAAS,CAAA,eAClDG,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;MACEG,MAAM,EAAEC,QAAQ,CAAC,QAAS,CAAAC,MAAA,CAAAd,OAAO,EAAe,eAAA,CAAA,CAAC;MACjDe,KAAK,EAAC;IAA0D,CAChE,CAAA,eACFP,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;MACEG,MAAM,EAAEC,QAAQ,CAAC,QAAS,CAAAC,MAAA,CAAAd,OAAO,EAAc,cAAA,CAAA,CAAC;MAChDe,KAAK,EAAC;IAA2D,CACjE,CAAA,eACFP,KACE,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAAO,GAAG,EAAEH,QAAQ,CAAC,gBAASb,OAAO,CAAA,CAAAc,MAAA,CAAGP,UAAU,EAAA,MAAA,CAAM,CAAC;MAClDN,GAAG,EAAEA,GAAG;MACRU,SAAS,EAAEM,MAAM,CAACC;IAAG,CAAA,CACrB,CACM;EAEd,CAAC;EAEDpB,KAAK,CAACqB,WAAW,GAAG,OAAO;EAAA,OA5BdrB,KAAK;AAAA;"}

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

@@ -0,0 +1,5 @@
+var styles = {
+  "img": "Brand-module_img__uWvra"
+};
+export { styles as default };
+//# sourceMappingURL=Brand.module.scss.mjs.map

package/dist/esm/Brand/Brand.module.scss.mjs.map

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

package/dist/esm/BrandMoment/BrandMoment.mjs

@@ -0,0 +1,97 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { assetUrl } from '@kaizen/hosted-assets';
+import { useMediaQueries } from '@kaizen/responsive';
+import { Heading, Paragraph } from '@kaizen/typography';
+import { Button } from '../Button/Button/Button.mjs';
+import '../Button/IconButton/IconButton.mjs';
+import '../Button/PaginationLink/PaginationLink.mjs';
+import '../Button/DirectionalLink/DirectionalLink.mjs';
+import styles from './BrandMoment.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082061589/Brand+Moment Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-brand-moment--docs Storybook}
+ */
+const BrandMoment = /*#__PURE__*/function () {
+  const BrandMoment = function (_a) {
+    var mood = _a.mood,
+      illustration = _a.illustration,
+      header = _a.header,
+      body = _a.body,
+      primaryAction = _a.primaryAction,
+      secondaryAction = _a.secondaryAction,
+      text = _a.text,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["mood", "illustration", "header", "body", "primaryAction", "secondaryAction", "text", "classNameOverride"]);
+    var queries = useMediaQueries().queries;
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: classnames(styles.body, styles[mood], classNameOverride)
+    }, restProps), /*#__PURE__*/React.createElement("header", {
+      className: styles.header
+    }, header), /*#__PURE__*/React.createElement("main", {
+      className: styles.main
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.container
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.mainInner
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.left
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.leftInner
+    }, illustration)), /*#__PURE__*/React.createElement("div", {
+      className: styles.right
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.rightInner
+    }, text.subtitle && /*#__PURE__*/React.createElement(Heading, {
+      variant: "heading-3",
+      tag: "h1",
+      classNameOverride: styles.subtitle
+    }, text.subtitle), /*#__PURE__*/React.createElement(Heading, {
+      variant: "display-0",
+      tag: text.subtitle ? "h2" : "h1",
+      classNameOverride: styles.title
+    }, text.title), text.body && /*#__PURE__*/React.createElement(Paragraph, {
+      variant: "intro-lede",
+      classNameOverride: styles.textBody
+    }, text.body), body && /*#__PURE__*/React.createElement("div", {
+      className: styles.textBody
+    }, body), /*#__PURE__*/React.createElement("div", {
+      className: styles.actions
+    }, primaryAction && /*#__PURE__*/React.createElement(Button, __assign({
+      primary: true,
+      fullWidth: queries.isSmall
+    }, primaryAction)), secondaryAction && /*#__PURE__*/React.createElement("div", {
+      className: styles.secondaryAction
+    }, /*#__PURE__*/React.createElement(Button, __assign({
+      secondary: true,
+      fullWidth: queries.isSmall
+    }, secondaryAction))))))))), text.footer && /*#__PURE__*/React.createElement("footer", {
+      className: styles.footer
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.container
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.footerInner
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.poweredByContainer
+    }, /*#__PURE__*/React.createElement(Paragraph, {
+      variant: "extra-small",
+      color: "dark-reduced-opacity"
+    }, "Powered by"), /*#__PURE__*/React.createElement("a", {
+      href: "https://www.cultureamp.com",
+      className: styles.poweredByLogo
+    }, /*#__PURE__*/React.createElement("img", {
+      src: assetUrl("brand/logo-horizontal-default.svg"),
+      alt: "Culture Amp"
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: styles.footerTextContainer
+    }, /*#__PURE__*/React.createElement(Paragraph, {
+      variant: "extra-small"
+    }, text.footer))))));
+  };
+  BrandMoment.displayName = "BrandMoment";
+  return BrandMoment;
+}();
+export { BrandMoment };
+//# sourceMappingURL=BrandMoment.mjs.map

package/dist/esm/BrandMoment/BrandMoment.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandMoment.mjs","sources":["../../../src/BrandMoment/BrandMoment.tsx"],"sourcesContent":["import React, { ReactNode, ReactElement, HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { SceneProps } from \"@kaizen/draft-illustration\"\nimport { assetUrl } from \"@kaizen/hosted-assets\"\nimport { useMediaQueries } from \"@kaizen/responsive\"\nimport { Heading, Paragraph } from \"@kaizen/typography\"\nimport { Button, ButtonProps } from \"~components/Button\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./BrandMoment.module.scss\"\n\nexport type BrandMomentProps = {\n  mood: \"informative\" | \"positive\" | \"negative\"\n  illustration: ReactElement<SceneProps>\n  header: ReactNode\n  body?: ReactNode\n  primaryAction?: ButtonProps\n  secondaryAction?: ButtonProps\n  text: {\n    title: ReactNode\n    subtitle?: ReactNode\n    body?: ReactNode\n    footer?: ReactNode\n  }\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082061589/Brand+Moment Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-brand-moment--docs Storybook}\n */\nexport const BrandMoment = ({\n  mood,\n  illustration,\n  header,\n  body,\n  primaryAction,\n  secondaryAction,\n  text,\n  classNameOverride,\n  ...restProps\n}: BrandMomentProps): JSX.Element => {\n  const { queries } = useMediaQueries()\n\n  return (\n    <div\n      className={classnames(styles.body, styles[mood], classNameOverride)}\n      {...restProps}\n    >\n      <header className={styles.header}>{header}</header>\n      <main className={styles.main}>\n        <div className={styles.container}>\n          <div className={styles.mainInner}>\n            <div className={styles.left}>\n              <div className={styles.leftInner}>{illustration}</div>\n            </div>\n            <div className={styles.right}>\n              <div className={styles.rightInner}>\n                {text.subtitle && (\n                  <Heading\n                    variant=\"heading-3\"\n                    tag=\"h1\"\n                    classNameOverride={styles.subtitle}\n                  >\n                    {text.subtitle}\n                  </Heading>\n                )}\n                <Heading\n                  variant=\"display-0\"\n                  tag={text.subtitle ? \"h2\" : \"h1\"}\n                  classNameOverride={styles.title}\n                >\n                  {text.title}\n                </Heading>\n                {text.body && (\n                  <Paragraph\n                    variant=\"intro-lede\"\n                    classNameOverride={styles.textBody}\n                  >\n                    {text.body}\n                  </Paragraph>\n                )}\n                {body && <div className={styles.textBody}>{body}</div>}\n                <div className={styles.actions}>\n                  {primaryAction && (\n                    <Button\n                      primary\n                      fullWidth={queries.isSmall}\n                      {...primaryAction}\n                    />\n                  )}\n                  {secondaryAction && (\n                    <div className={styles.secondaryAction}>\n                      <Button\n                        secondary\n                        fullWidth={queries.isSmall}\n                        {...secondaryAction}\n                      />\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </main>\n      {text.footer && (\n        <footer className={styles.footer}>\n          <div className={styles.container}>\n            <div className={styles.footerInner}>\n              <div className={styles.poweredByContainer}>\n                <Paragraph variant=\"extra-small\" color=\"dark-reduced-opacity\">\n                  Powered by\n                </Paragraph>\n                <a\n                  href=\"https://www.cultureamp.com\"\n                  className={styles.poweredByLogo}\n                >\n                  <img\n                    src={assetUrl(\"brand/logo-horizontal-default.svg\")}\n                    alt=\"Culture Amp\"\n                  />\n                </a>\n              </div>\n              <div className={styles.footerTextContainer}>\n                <Paragraph variant=\"extra-small\">{text.footer}</Paragraph>\n              </div>\n            </div>\n          </div>\n        </footer>\n      )}\n    </div>\n  )\n}\n\nBrandMoment.displayName = \"BrandMoment\"\n"],"names":["BrandMoment","_a","mood","illustration","header","body","primaryAction","secondaryAction","text","classNameOverride","restProps","__rest","queries","useMediaQueries","React","createElement","__assign","className","classnames","styles","main","container","mainInner","left","leftInner","right","rightInner","subtitle","Heading","variant","tag","title","Paragraph","textBody","actions","Button","primary","fullWidth","isSmall","secondary","footer","footerInner","poweredByContainer","color","href","poweredByLogo","src","assetUrl","alt","footerTextContainer","displayName"],"mappings":"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"}

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

@@ -0,0 +1,26 @@
+var styles = {
+  "body": "BrandMoment-module_body__J4lls",
+  "informative": "BrandMoment-module_informative__Qvwcd",
+  "positive": "BrandMoment-module_positive__78wqJ",
+  "negative": "BrandMoment-module_negative__atXal",
+  "container": "BrandMoment-module_container__4ORHI",
+  "header": "BrandMoment-module_header__EAP5Q",
+  "main": "BrandMoment-module_main__cdWko",
+  "mainInner": "BrandMoment-module_mainInner__xsFA6",
+  "left": "BrandMoment-module_left__ZHJiM",
+  "leftInner": "BrandMoment-module_leftInner__TY5DY",
+  "right": "BrandMoment-module_right__B-PR2",
+  "rightInner": "BrandMoment-module_rightInner__XvQ5Y",
+  "subtitle": "BrandMoment-module_subtitle__z9PL8",
+  "title": "BrandMoment-module_title__GrdAR",
+  "textBody": "BrandMoment-module_textBody__W6LvQ",
+  "secondaryAction": "BrandMoment-module_secondaryAction__d18oJ",
+  "actions": "BrandMoment-module_actions__Z3NrK",
+  "footer": "BrandMoment-module_footer__vSeX1",
+  "footerInner": "BrandMoment-module_footerInner__Wt9Rt",
+  "poweredByContainer": "BrandMoment-module_poweredByContainer__OkhVN",
+  "footerTextContainer": "BrandMoment-module_footerTextContainer__8iin9",
+  "poweredByLogo": "BrandMoment-module_poweredByLogo__w6M7o"
+};
+export { styles as default };
+//# sourceMappingURL=BrandMoment.module.scss.mjs.map

package/dist/esm/BrandMoment/BrandMoment.module.scss.mjs.map

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

package/dist/esm/Button/Button/Button.mjs

@@ -0,0 +1,29 @@
+import { __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { GenericButton } from '../GenericButton/GenericButton.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-buttons-button--docs Storybook}
+ */
+const Button = /*#__PURE__*/function () {
+  const Button = /*#__PURE__*/forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(GenericButton, __assign({}, props, {
+      ref: ref
+    }));
+  });
+  Button.defaultProps = {
+    fullWidth: false,
+    primary: false,
+    secondary: false,
+    destructive: false,
+    disabled: false,
+    reversed: false,
+    iconPosition: "start",
+    newTabAndIUnderstandTheAccessibilityImplications: false
+  };
+  Button.displayName = "Button";
+  return Button;
+}();
+export { Button };
+//# sourceMappingURL=Button.mjs.map

package/dist/esm/Button/Button/Button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.mjs","sources":["../../../../src/Button/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, Ref } from \"react\"\n\nimport { GenericButton, GenericButtonProps, ButtonRef } from \"../GenericButton\"\n\nexport type ButtonProps = GenericButtonProps\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-buttons-button--docs Storybook}\n */\nexport const Button = forwardRef(\n  (props: ButtonProps, ref: Ref<ButtonRef | undefined>) => (\n    <GenericButton {...props} ref={ref} />\n  )\n)\n\nButton.defaultProps = {\n  fullWidth: false,\n  primary: false,\n  secondary: false,\n  destructive: false,\n  disabled: false,\n  reversed: false,\n  iconPosition: \"start\",\n  newTabAndIUnderstandTheAccessibilityImplications: false,\n}\n\nButton.displayName = \"Button\"\n"],"names":["Button","forwardRef","props","ref","React","GenericButton","__assign","defaultProps","fullWidth","primary","secondary","destructive","disabled","reversed","iconPosition","newTabAndIUnderstandTheAccessibilityImplications","displayName"],"mappings":";;;;AAMA;;;AAGG;AAHH,MAIaA,MAAM;EAAA,MAANA,MAAM,gBAAGC,UAAU,CAC9B,UAACC,KAAkB,EAAEC,GAA+B,EAAA;IAAK,oBACvDC,oBAACC,aAAa,EAAAC,QAAA,CAAA,CAAA,CAAA,EAAKJ,KAAK,EAAA;MAAEC,GAAG,EAAEA;IAAG,CAAA,CAAA,CAAI;GACvC,CACF;EAEDH,MAAM,CAACO,YAAY,GAAG;IACpBC,SAAS,EAAE,KAAK;IAChBC,OAAO,EAAE,KAAK;IACdC,SAAS,EAAE,KAAK;IAChBC,WAAW,EAAE,KAAK;IAClBC,QAAQ,EAAE,KAAK;IACfC,QAAQ,EAAE,KAAK;IACfC,YAAY,EAAE,OAAO;IACrBC,gDAAgD,EAAE;GACnD;EAEDf,MAAM,CAACgB,WAAW,GAAG,QAAQ;EAAA,OAjBhBhB,MAAM;AAAA;"}

package/dist/esm/Button/DirectionalLink/DirectionalLink.mjs

@@ -0,0 +1,44 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import 'uuid';
+import '../../Icon/subcomponents/SVG/SVG.mjs';
+import { ArrowBackwardIcon } from '../../Icon/ArrowBackwardIcon.mjs';
+import { ArrowForwardIcon } from '../../Icon/ArrowForwardIcon.mjs';
+import { EndIcon } from '../../Icon/EndIcon.mjs';
+import { StartIcon } from '../../Icon/StartIcon.mjs';
+import { GenericButton } from '../GenericButton/GenericButton.mjs';
+var iconMap = {
+  prev: /*#__PURE__*/React.createElement(ArrowBackwardIcon, {
+    role: "presentation"
+  }),
+  next: /*#__PURE__*/React.createElement(ArrowForwardIcon, {
+    role: "presentation"
+  }),
+  start: /*#__PURE__*/React.createElement(StartIcon, {
+    role: "presentation"
+  }),
+  end: /*#__PURE__*/React.createElement(EndIcon, {
+    role: "presentation"
+  })
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082092975/Pagination Guidance} |
+ * {@link https://cultureamp.design/?path=/story/components-buttons-directionallink--docs Storybook}
+ */
+const DirectionalLink = /*#__PURE__*/function () {
+  const DirectionalLink = function (props) {
+    return /*#__PURE__*/React.createElement(GenericButton, __assign({}, props, {
+      iconButton: true,
+      directionalLink: true,
+      icon: iconMap[props.direction]
+    }));
+  };
+  DirectionalLink.defaultProps = {
+    reversed: false,
+    disabled: false
+  };
+  DirectionalLink.displayName = "DirectionalLink";
+  return DirectionalLink;
+}();
+export { DirectionalLink };
+//# sourceMappingURL=DirectionalLink.mjs.map

package/dist/esm/Button/DirectionalLink/DirectionalLink.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DirectionalLink.mjs","sources":["../../../../src/Button/DirectionalLink/DirectionalLink.tsx"],"sourcesContent":["import React from \"react\"\nimport {\n  ArrowBackwardIcon,\n  ArrowForwardIcon,\n  EndIcon,\n  StartIcon,\n} from \"~components/Icon\"\nimport { GenericButton, GenericProps } from \"../GenericButton\"\n\nexport type DirectionalLinkProps = {\n  label: string\n  disabled?: boolean\n  direction: \"prev\" | \"next\" | \"start\" | \"end\"\n} & GenericProps\n\nconst iconMap = {\n  prev: <ArrowBackwardIcon role=\"presentation\" />,\n  next: <ArrowForwardIcon role=\"presentation\" />,\n  start: <StartIcon role=\"presentation\" />,\n  end: <EndIcon role=\"presentation\" />,\n}\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082092975/Pagination Guidance} |\n * {@link https://cultureamp.design/?path=/story/components-buttons-directionallink--docs Storybook}\n */\nexport const DirectionalLink = (props: DirectionalLinkProps): JSX.Element => (\n  <GenericButton\n    {...props}\n    iconButton\n    directionalLink\n    icon={iconMap[props.direction]}\n  />\n)\n\nDirectionalLink.defaultProps = {\n  reversed: false,\n  disabled: false,\n}\n\nDirectionalLink.displayName = \"DirectionalLink\"\n"],"names":["iconMap","prev","React","createElement","ArrowBackwardIcon","role","next","ArrowForwardIcon","start","StartIcon","end","EndIcon","DirectionalLink","props","GenericButton","__assign","iconButton","directionalLink","icon","direction","defaultProps","reversed","disabled","displayName"],"mappings":";;;;;;;;;AAeA,IAAMA,OAAO,GAAG;EACdC,IAAI,eAAEC,KAAC,CAAAC,aAAA,CAAAC,iBAAiB;IAACC,IAAI,EAAC;GAAiB,CAAA;EAC/CC,IAAI,eAAEJ,KAAC,CAAAC,aAAA,CAAAI,gBAAgB;IAACF,IAAI,EAAC;GAAiB,CAAA;EAC9CG,KAAK,eAAEN,KAAC,CAAAC,aAAA,CAAAM,SAAS;IAACJ,IAAI,EAAC;GAAiB,CAAA;EACxCK,GAAG,eAAER,KAAC,CAAAC,aAAA,CAAAQ,OAAO;IAACN,IAAI,EAAC;GAAiB;CACrC;AAED;;;AAGG;AAHH,MAIaO,eAAe;EAAA,MAAfA,eAAe,GAAG,SAAAA,CAACC,KAA2B,EAAkB;IAAA,oBAC3EX,KAAA,CAAAC,aAAA,CAACW,aAAa,EAAAC,QAAA,CAAA,CAAA,CAAA,EACRF,KAAK,EACT;MAAAG,UAAU,EACV,IAAA;MAAAC,eAAe,EACf,IAAA;MAAAC,IAAI,EAAElB,OAAO,CAACa,KAAK,CAACM,SAAS;KAAC,CAAA,CAC9B;EACH,CAAA;EAEDP,eAAe,CAACQ,YAAY,GAAG;IAC7BC,QAAQ,EAAE,KAAK;IACfC,QAAQ,EAAE;GACX;EAEDV,eAAe,CAACW,WAAW,GAAG,iBAAiB;EAAA,OAdlCX,eAAe;AAAA;"}