@kaizen/components 1.28.0 → 1.30.0

package/dist/cjs/Table/Table.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.cjs","sources":["../../../src/Table/Table.tsx"],"sourcesContent":["import React, { cloneElement, HTMLAttributes, ReactElement } from \"react\"\nimport classnames from \"classnames\"\nimport { Tooltip } from \"@kaizen/draft-tooltip\"\nimport { Checkbox, CheckedStatus } from \"~components/Checkbox\"\nimport { Heading } from \"~components/Heading\"\nimport {\n  ExclamationIcon,\n  SortAscendingIcon,\n  SortDescendingIcon,\n} from \"~components/Icon\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./Table.module.scss\"\n\nexport type TableContainerProps = {\n  children?: React.ReactNode\n  variant?: \"compact\" | \"default\" | \"data\"\n}\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929256/Table Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-table--docs Storybook}\n */\nexport const TableContainer = ({\n  variant = \"compact\",\n  children,\n  ...otherProps\n}: TableContainerProps): JSX.Element => (\n  <div\n    role=\"table\"\n    className={classnames(\n      styles.container,\n      variant === \"default\" && styles.defaultSpacing,\n      variant === \"data\" && styles.dataVariant\n    )}\n    {...otherProps}\n  >\n    {children}\n  </div>\n)\n\nexport type TableHeaderProps = {\n  children?: React.ReactNode\n}\nexport const TableHeader = ({\n  children,\n  ...otherProps\n}: TableHeaderProps): JSX.Element => (\n  <div role=\"rowgroup\" {...otherProps}>\n    {children}\n  </div>\n)\n\nexport type TableHeaderRowProps = {\n  children?: React.ReactNode\n}\n\nconst ratioToPercent = (width?: number): string | number | undefined =>\n  width != null ? `${width * 100}%` : width\n\n/**\n * @param width value between 1 and 0, to be calculated as a percentage\n * @param flex CSS flex shorthand as a string. Be sure to specify the flex grow,\n *        shrink, and basis, due to IE11 compatibility. eg. use \"1 1 auto\"\n *        instead of just \"1\".\n */\nexport type TableHeaderRowCellProps = {\n  labelText: string\n  onClick?:\n    | ((e: React.MouseEvent<HTMLButtonElement>) => any)\n    | ((e: React.MouseEvent<HTMLAnchorElement>) => any)\n  width?: number\n  flex?: string\n  href?: string\n  icon?: ReactElement\n  checkable?: boolean\n  checkedStatus?: CheckedStatus\n  onCheck?: (event: React.ChangeEvent<HTMLInputElement>) => any\n  reversed?: boolean\n  /**\n   * Shows an up or down arrow, to show that the column is sorted.\n   */\n  sorting?: \"ascending\" | \"descending\"\n  wrapping?: \"nowrap\" | \"wrap\"\n  align?: \"start\" | \"center\" | \"end\"\n  tooltipInfo?: string\n  isTooltipIconHidden?: boolean\n  /**\n   * Specify where the tooltip should be rendered.\n   */\n  tooltipPortalSelector?: string | undefined\n  sortingArrowsOnHover?: \"ascending\" | \"descending\" | undefined\n} & OverrideClassName<HTMLAttributes<HTMLElement>>\n\nexport const TableHeaderRowCell = ({\n  labelText,\n  onClick,\n  href,\n  width,\n  flex,\n  icon,\n  checkable,\n  checkedStatus,\n  onCheck,\n  reversed,\n  sorting: sortingRaw,\n  // I can't say for certain why \"nowrap\" was the default value. Normally you wouldn't\n  // want to clip off information because it doesn't fit on one line.\n  // My assumption is that because since the cell width rows are decoupled, a heading\n  // cell with a word longer than the column width would push the columns out of\n  // alignment? I'm not sure.\n  // Anyway, we can override this default behaviour by setting wrapping to \"wrap\".\n  wrapping = \"nowrap\",\n  align = \"start\",\n  tooltipInfo,\n  // If set, this will hide the tooltip exclamation icon. Useful in situations where\n  // the table header does not have enough space. However, we should always show a\n  // tooltip icon as the default based on design system tooltip guidelines.\n  isTooltipIconHidden = false,\n  tooltipPortalSelector,\n  // If set, this will show the arrow in the direction provided\n  // when the header cell is hovered over.\n  sortingArrowsOnHover,\n  classNameOverride,\n  // There aren't any other props in the type definition, so I'm unsure why we\n  // have this spread.\n  ...otherProps\n}: TableHeaderRowCellProps): JSX.Element => {\n  const sorting = sortingRaw\n  const [isHovered, setIsHovered] = React.useState(false)\n\n  const updateHoverState = (hoverState: boolean): void => {\n    if (sortingArrowsOnHover && hoverState != isHovered)\n      setIsHovered(hoverState)\n  }\n\n  const headerColor = !!reversed\n    ? \"white-reduced-opacity\"\n    : \"dark-reduced-opacity\"\n  const hoveredHeaderColor = !!reversed ? \"white\" : \"dark\"\n\n  // For this \"cellContents\" variable, we start at the inner most child, and\n  // wrap it elements, depending on what the props dictate.\n  let cellContents = (\n    <div className={styles.headerRowCellLabelAndIcons}>\n      {icon && (\n        <span className={styles.headerRowCellIcon}>\n          {cloneElement(icon, { title: labelText, role: \"img\" })}\n        </span>\n      )}\n      {checkable && (\n        <div className={styles.headerRowCellCheckbox}>\n          <Checkbox checkedStatus={checkedStatus} onCheck={onCheck} />\n        </div>\n      )}\n      {tooltipInfo != null && !isTooltipIconHidden ? (\n        <div className={styles.headerRowCellTooltipIcon}>\n          <ExclamationIcon role=\"presentation\" />\n        </div>\n      ) : null}\n      {/* If an \"icon\" is supplied, the label is displayed inside the icon aria title instead */}\n      {!icon ? (\n        <Heading\n          tag=\"div\"\n          variant=\"heading-6\"\n          color={sorting || isHovered ? hoveredHeaderColor : headerColor}\n          classNameOverride={styles.headerRowCellLabel}\n        >\n          {labelText}\n        </Heading>\n      ) : null}\n      {(sorting || (isHovered && sortingArrowsOnHover)) && (\n        <div\n          className={classnames(\n            align === \"center\" && styles.headerRowCellIconAlignCenter,\n            align === \"end\" && styles.headerRowCellIconAlignEnd,\n            reversed && styles.whiteText\n          )}\n        >\n          {sorting === \"ascending\" || sortingArrowsOnHover === \"ascending\" ? (\n            <SortAscendingIcon role=\"presentation\" />\n          ) : (\n            <SortDescendingIcon role=\"presentation\" />\n          )}\n        </div>\n      )}\n    </div>\n  )\n\n  cellContents = href ? (\n    <a\n      className={classnames(\n        styles.headerRowCellButton,\n        reversed && styles.headerRowCellButtonReversed\n      )}\n      href={href}\n      onClick={\n        onClick as (e: React.MouseEvent<HTMLAnchorElement>) => any | undefined\n      }\n      onMouseEnter={(): void => updateHoverState(true)}\n      onFocus={(): void => updateHoverState(true)}\n      onMouseLeave={(): void => updateHoverState(false)}\n      onBlur={(): void => updateHoverState(false)}\n    >\n      {cellContents}\n    </a>\n  ) : onClick ? (\n    <button\n      type=\"button\"\n      className={classnames(\n        styles.headerRowCellButton,\n        reversed && styles.headerRowCellButtonReversed\n      )}\n      onClick={onClick as (e: React.MouseEvent<HTMLButtonElement>) => any}\n      onMouseEnter={(): void => updateHoverState(true)}\n      onFocus={(): void => updateHoverState(true)}\n      onMouseLeave={(): void => updateHoverState(false)}\n      onBlur={(): void => updateHoverState(false)}\n    >\n      {cellContents}\n    </button>\n  ) : (\n    // This div wrapper probably isn't needed, but it's a bit easier\n    // for this flex positioning, to have the dom tree depth match for\n    // each permutation.\n    <div className={styles.headerRowCellNoButton}>{cellContents}</div>\n  )\n\n  cellContents =\n    tooltipInfo != null ? (\n      <Tooltip\n        animationDuration={0}\n        classNameOverride={styles.headerRowCellTooltip}\n        text={tooltipInfo}\n        portalSelector={tooltipPortalSelector}\n      >\n        {cellContents}\n      </Tooltip>\n    ) : (\n      // Again, this wrapper is just to make the dom tree consistent between\n      // different permutations.\n      <div className={styles.headerRowCellTooltip}>{cellContents}</div>\n    )\n\n  return (\n    <div\n      className={classnames(\n        styles.headerRowCell,\n        wrapping === \"nowrap\" && styles.headerRowCellNoWrap,\n        align === \"center\" && styles.headerRowCellAlignCenter,\n        align === \"end\" && styles.headerRowCellAlignEnd,\n        sorting && styles.headerRowCellActive,\n        classNameOverride\n      )}\n      style={{\n        width: ratioToPercent(width),\n        flex,\n      }}\n      role=\"columnheader\"\n      {...otherProps}\n    >\n      {cellContents}\n    </div>\n  )\n}\n\ntype ButtonClickEvent = (e: React.MouseEvent<HTMLButtonElement>) => void\ntype AnchorClickEvent = (e: React.MouseEvent<HTMLAnchorElement>) => void\n\n/**\n * As the Card examples in Storybook take a TableRow,\n * I opted to give the child the role=\"row\" tag. That being\n * said, while TableHeader has a role=\"rowgroup\" as given\n * in an example on the accessibility docs, I couldn't justify\n * adding the same here as all rows look to be wrapped in the\n * TableCard.\n *\n * It may mean that the consumer needs to add their own container\n * around with the role=\"row\". We could also just add it as a\n * very simple component similar to TableHeader.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role\n */\nexport type TableCardProps = OverrideClassName<HTMLAttributes<HTMLElement>> & {\n  onClick?: ButtonClickEvent | AnchorClickEvent\n  expanded?: boolean\n  expandedStyle?: \"well\" | \"popout\"\n  href?: string\n  // Despite there being no onClick or href, still show a hover state on the\n  // rows. An example use case is when you might want to handle click events\n  // at a cell level, instead of the full row level.\n  forceHoverState?: boolean\n  children?: React.ReactNode\n}\n\nexport const TableCard = ({\n  children,\n  expanded,\n  expandedStyle = \"well\",\n  onClick,\n  href,\n  forceHoverState = false,\n  classNameOverride,\n  ...otherProps\n}: TableCardProps): JSX.Element => {\n  const className = classnames(\n    styles.card,\n    expanded && styles.expanded,\n    expanded && styles[expandedStyle],\n    (forceHoverState || onClick != null || href != null) &&\n      styles.hasHoverState,\n    classNameOverride\n  )\n  return href != null ? (\n    <a\n      href={href}\n      className={className}\n      onClick={onClick as AnchorClickEvent}\n      {...otherProps}\n    >\n      {children}\n    </a>\n  ) : onClick ? (\n    <button\n      type=\"button\"\n      className={className}\n      onClick={onClick as ButtonClickEvent}\n      {...otherProps}\n    >\n      {children}\n    </button>\n  ) : (\n    <div className={className} {...otherProps}>\n      {children}\n    </div>\n  )\n}\n\n/**\n * Aria roles like aria-rowindex can be added from\n * the component consumer.\n *\n * @param {*} { children, classNameOverride, ...otherProps }\n */\nexport type TableRowProps = OverrideClassName<HTMLAttributes<HTMLElement>> & {\n  children?: React.ReactNode\n}\nexport const TableRow = ({\n  children,\n  classNameOverride,\n  ...otherProps\n}: TableRowProps): JSX.Element => (\n  <div\n    className={classnames(styles.row, classNameOverride)}\n    role=\"row\"\n    {...otherProps}\n  >\n    {children}\n  </div>\n)\n\n/**\n * @param width value between 1 and 0, to be calculated as a percentage\n * @param flex CSS flex shorthand as a string. Be sure to specify the flex grow,\n *        shrink, and basis, due to IE11 compatibility. eg. use \"1 1 auto\"\n *        instead of just \"1\".\n */\nexport type TableRowCellProps = OverrideClassName<\n  HTMLAttributes<HTMLElement>\n> & {\n  children?: React.ReactNode\n  width?: number\n  flex?: string\n  href?: string\n}\n\nexport const TableRowCell = ({\n  children,\n  width,\n  flex,\n  href,\n  classNameOverride,\n  ...otherProps\n}: TableRowCellProps): JSX.Element =>\n  href != null ? (\n    <a\n      // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role\n      role=\"cell\"\n      style={{\n        width: ratioToPercent(width),\n        flex,\n      }}\n      className={classnames(styles.rowCell, classNameOverride)}\n      href={href}\n      {...otherProps}\n    >\n      {children}\n    </a>\n  ) : (\n    <div\n      role=\"cell\"\n      style={{\n        width: ratioToPercent(width),\n        flex,\n      }}\n      className={classnames(styles.rowCell, classNameOverride)}\n      {...otherProps}\n    >\n      {children}\n    </div>\n  )\n"],"names":["TableContainer","_a","_b","variant","children","otherProps","__rest","React","createElement","__assign","role","className","classnames","styles","container","defaultSpacing","dataVariant","TableHeader","ratioToPercent","width","concat","TableHeaderRowCell","labelText","onClick","href","flex","icon","checkable","checkedStatus","onCheck","reversed","sortingRaw","sorting","wrapping","_c","align","tooltipInfo","_d","isTooltipIconHidden","tooltipPortalSelector","sortingArrowsOnHover","classNameOverride","_e","useState","isHovered","setIsHovered","updateHoverState","hoverState","headerColor","hoveredHeaderColor","cellContents","headerRowCellLabelAndIcons","headerRowCellIcon","cloneElement","title","headerRowCellCheckbox","Checkbox","headerRowCellTooltipIcon","ExclamationIcon","Heading","tag","color","headerRowCellLabel","headerRowCellIconAlignCenter","headerRowCellIconAlignEnd","whiteText","SortAscendingIcon","SortDescendingIcon","headerRowCellButton","headerRowCellButtonReversed","onMouseEnter","onFocus","onMouseLeave","onBlur","type","headerRowCellNoButton","Tooltip","animationDuration","headerRowCellTooltip","text","portalSelector","headerRowCell","headerRowCellNoWrap","headerRowCellAlignCenter","headerRowCellAlignEnd","headerRowCellActive","style","TableCard","expanded","expandedStyle","forceHoverState","card","hasHoverState","TableRow","row","TableRowCell","rowCell"],"mappings":"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"}

package/dist/cjs/Table/Table.module.scss.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var styles = {
+  "container": "Table-module_container__w-zFG",
+  "headerRowCell": "Table-module_headerRowCell__kW0YN",
+  "headerRowCellNoWrap": "Table-module_headerRowCellNoWrap__BSuzX",
+  "headerRowCellLabel": "Table-module_headerRowCellLabel__5v6m8",
+  "headerRowCellAlignCenter": "Table-module_headerRowCellAlignCenter__cobEI",
+  "headerRowCellAlignEnd": "Table-module_headerRowCellAlignEnd__dQOOQ",
+  "headerRowCellCheckbox": "Table-module_headerRowCellCheckbox__CdMiY",
+  "headerRowCellTooltip": "Table-module_headerRowCellTooltip__uzbpY",
+  "headerRowCellButton": "Table-module_headerRowCellButton__uikM7",
+  "headerRowCellButtonReversed": "Table-module_headerRowCellButtonReversed__uk87N",
+  "headerRowCellNoButton": "Table-module_headerRowCellNoButton__dqf1B",
+  "headerRowCellLabelAndIcons": "Table-module_headerRowCellLabelAndIcons__OCCVi",
+  "headerRowCellTooltipIcon": "Table-module_headerRowCellTooltipIcon__X0ETJ",
+  "headerRowCellIcon": "Table-module_headerRowCellIcon__gB3zI",
+  "headerRowCellActive": "Table-module_headerRowCellActive__wshmg",
+  "card": "Table-module_card__RGyjC",
+  "well": "Table-module_well__xQmO5",
+  "row": "Table-module_row__GYSl1",
+  "popout": "Table-module_popout__PeAVV",
+  "expanded": "Table-module_expanded__dasr3",
+  "hasHoverState": "Table-module_hasHoverState__u5n3E",
+  "rowCell": "Table-module_rowCell__A5-2R",
+  "defaultSpacing": "Table-module_defaultSpacing__zq1Ci",
+  "dataVariant": "Table-module_dataVariant__vBOag",
+  "rowCellAlignCenter": "Table-module_rowCellAlignCenter__apkoC",
+  "rowCellAlignEnd": "Table-module_rowCellAlignEnd__qZfa1",
+  "whiteText": "Table-module_whiteText__4f-q5"
+};
+module.exports = styles;
+//# sourceMappingURL=Table.module.scss.cjs.map

package/dist/cjs/Table/Table.module.scss.cjs.map

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

package/dist/cjs/Tag/Tag.cjs

@@ -0,0 +1,135 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Avatar = require('../Avatar/Avatar.cjs');
+require('uuid');
+require('../Icon/subcomponents/SVG/SVG.cjs');
+var CautionIcon = require('../Icon/CautionIcon.cjs');
+var ClearIcon = require('../Icon/ClearIcon.cjs');
+var ExclamationIcon = require('../Icon/ExclamationIcon.cjs');
+var InformationIcon = require('../Icon/InformationIcon.cjs');
+var LiveIcon = require('../Icon/LiveIcon.cjs');
+var SuccessIcon = require('../Icon/SuccessIcon.cjs');
+var Tag_module = require('./Tag.module.scss.cjs');
+var isJSXElement = function (imageElementOrAvatarProps) {
+  return "props" in imageElementOrAvatarProps;
+};
+var renderAvatar = function (imageElementOrAvatarProps) {
+  return isJSXElement(imageElementOrAvatarProps) ? React.createElement(React.Fragment, null, imageElementOrAvatarProps) : React.createElement(Avatar.Avatar, tslib.__assign({}, imageElementOrAvatarProps, {
+    size: "small"
+  }));
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081928978/Tags Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-tag--docs Storybook}
+ */
+const Tag = /*#__PURE__*/function () {
+  const Tag = function (props) {
+    var children = props.children,
+      _a = props.variant,
+      variant = _a === void 0 ? "default" : _a,
+      _b = props.size,
+      size = _b === void 0 ? "medium" : _b,
+      _c = props.inline,
+      inline = _c === void 0 ? false : _c,
+      _d = props.dismissible,
+      dismissible = _d === void 0 ? false : _d,
+      onDismiss = props.onDismiss,
+      onMouseDown = props.onMouseDown,
+      onMouseLeave = props.onMouseLeave,
+      truncateWidth = props.truncateWidth;
+    var isTruncated = truncateWidth && truncateWidth > 0;
+    var canShowIcon = size === "medium";
+    return React.createElement("div", {
+      className: classnames(Tag_module.root, Tag_module[variant], variant === "profile" && Tag_module["default"], Tag_module[size], inline && Tag_module.inline, dismissible && Tag_module.dismissible)
+    }, React.createElement("div", {
+      className: Tag_module.layoutContainer
+    }, React.createElement(React.Fragment, null, canShowIcon && function () {
+      switch (props.variant) {
+        case "validationPositive":
+          return React.createElement("span", {
+            className: Tag_module.validationIcon
+          }, React.createElement(SuccessIcon.SuccessIcon, {
+            role: "presentation"
+          }));
+        case "validationNegative":
+          return React.createElement("span", {
+            className: Tag_module.validationIcon
+          }, React.createElement(ExclamationIcon.ExclamationIcon, {
+            role: "presentation"
+          }));
+        case "validationCautionary":
+          return React.createElement("span", {
+            className: Tag_module.validationIcon
+          }, React.createElement(CautionIcon.CautionIcon, {
+            role: "presentation"
+          }));
+        case "validationInformative":
+          return React.createElement("span", {
+            className: Tag_module.validationIcon
+          }, React.createElement(InformationIcon.InformationIcon, {
+            role: "presentation"
+          }));
+        case "profile":
+          return React.createElement("span", {
+            className: Tag_module.profile
+          }, props.avatar && renderAvatar(props.avatar));
+        default:
+          return;
+      }
+    }(), React.createElement("span", {
+      className: classnames(Tag_module.textContent, isTruncated && Tag_module.truncate),
+      style: {
+        maxWidth: isTruncated ? truncateWidth : undefined
+      }
+    }, children), dismissible && React.createElement(React.Fragment, null, React.createElement("button", {
+      type: "button",
+      className: Tag_module.dismissButton,
+      onClick: onDismiss,
+      onMouseDown: onMouseDown,
+      onMouseLeave: onMouseLeave
+    }, React.createElement("div", {
+      className: Tag_module.iconWrapper
+    }, React.createElement(ClearIcon.ClearIcon, {
+      inheritSize: true,
+      role: "img",
+      "aria-label": "Dismiss"
+    })))), variant === "statusLive" && React.createElement("span", {
+      className: Tag_module.liveIcon
+    }, React.createElement(LiveIcon.LiveIcon, {
+      role: "presentation",
+      classNameOverride: Tag_module.liveIcon_base,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none"
+    }), React.createElement(LiveIcon.LiveIcon, {
+      role: "presentation",
+      classNameOverride: Tag_module.liveIcon_1,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none"
+    }), React.createElement(LiveIcon.LiveIcon, {
+      role: "presentation",
+      classNameOverride: Tag_module.liveIcon_2,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none"
+    }), React.createElement(LiveIcon.LiveIcon, {
+      role: "presentation",
+      classNameOverride: Tag_module.liveIcon_3,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none"
+    })))));
+  };
+  Tag.displayName = "Tag";
+  return Tag;
+}();
+exports.Tag = Tag;
+//# sourceMappingURL=Tag.cjs.map

package/dist/cjs/Tag/Tag.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.cjs","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import React from \"react\"\nimport classnames from \"classnames\"\nimport { Avatar, AvatarProps } from \"~components/Avatar\"\nimport {\n  CautionIcon,\n  ClearIcon,\n  ExclamationIcon,\n  InformationIcon,\n  LiveIcon,\n  SuccessIcon,\n} from \"~components/Icon\"\nimport { TagVariants } from \"./types\"\nimport styles from \"./Tag.module.scss\"\n\nexport type TagWithAvatarProps = Omit<DefaultTagProps, \"variant\"> & {\n  variant: \"profile\"\n  avatar: JSX.Element | AvatarProps\n}\n\ntype Variant = (typeof TagVariants)[number]\n\nexport interface DefaultTagProps {\n  variant?: Variant\n  children: React.ReactNode\n  size?: \"medium\" | \"small\"\n  inline?: boolean\n  dismissible?: boolean\n  onDismiss?: React.MouseEventHandler<HTMLSpanElement>\n  onMouseDown?: React.MouseEventHandler<HTMLSpanElement>\n  onMouseLeave?: React.MouseEventHandler<HTMLSpanElement>\n  truncateWidth?: number\n}\n\nexport type TagProps = DefaultTagProps | TagWithAvatarProps\n\nconst isJSXElement = (\n  imageElementOrAvatarProps: JSX.Element | AvatarProps\n): imageElementOrAvatarProps is JSX.Element =>\n  \"props\" in imageElementOrAvatarProps\n\nconst renderAvatar = (\n  imageElementOrAvatarProps: JSX.Element | AvatarProps\n): JSX.Element =>\n  isJSXElement(imageElementOrAvatarProps) ? (\n    <>{imageElementOrAvatarProps}</>\n  ) : (\n    <Avatar {...imageElementOrAvatarProps} size=\"small\" />\n  )\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081928978/Tags Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-tag--docs Storybook}\n */\nexport const Tag = (props: TagProps): JSX.Element => {\n  const {\n    children,\n    variant = \"default\",\n    size = \"medium\",\n    inline = false,\n    dismissible = false,\n    onDismiss,\n    onMouseDown,\n    onMouseLeave,\n    truncateWidth,\n  } = props\n\n  const isTruncated = truncateWidth && truncateWidth > 0\n  const canShowIcon = size === \"medium\"\n  return (\n    <div\n      className={classnames(\n        styles.root,\n        styles[variant],\n        variant === \"profile\" && styles.default,\n        styles[size],\n        inline && styles.inline,\n        dismissible && styles.dismissible\n      )}\n    >\n      <div className={styles.layoutContainer}>\n        <>\n          {canShowIcon &&\n            ((): JSX.Element | void => {\n              switch (props.variant) {\n                case \"validationPositive\":\n                  return (\n                    <span className={styles.validationIcon}>\n                      <SuccessIcon role=\"presentation\" />\n                    </span>\n                  )\n                case \"validationNegative\":\n                  return (\n                    <span className={styles.validationIcon}>\n                      <ExclamationIcon role=\"presentation\" />\n                    </span>\n                  )\n                case \"validationCautionary\":\n                  return (\n                    <span className={styles.validationIcon}>\n                      <CautionIcon role=\"presentation\" />\n                    </span>\n                  )\n                case \"validationInformative\":\n                  return (\n                    <span className={styles.validationIcon}>\n                      <InformationIcon role=\"presentation\" />\n                    </span>\n                  )\n                case \"profile\":\n                  return (\n                    <span className={styles.profile}>\n                      {props.avatar && renderAvatar(props.avatar)}\n                    </span>\n                  )\n                default:\n                  return\n              }\n            })()}\n          <span\n            className={classnames(\n              styles.textContent,\n              isTruncated && styles.truncate\n            )}\n            style={{\n              maxWidth: isTruncated ? truncateWidth : undefined,\n            }}\n          >\n            {children}\n          </span>\n          {dismissible && (\n            <>\n              <button\n                type=\"button\"\n                className={styles.dismissButton}\n                onClick={onDismiss}\n                onMouseDown={onMouseDown}\n                onMouseLeave={onMouseLeave}\n              >\n                <div className={styles.iconWrapper}>\n                  <ClearIcon inheritSize role=\"img\" aria-label=\"Dismiss\" />\n                </div>\n              </button>\n            </>\n          )}\n          {variant === \"statusLive\" && (\n            <span className={styles.liveIcon}>\n              <LiveIcon\n                role=\"presentation\"\n                classNameOverride={styles.liveIcon_base}\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n              />\n              <LiveIcon\n                role=\"presentation\"\n                classNameOverride={styles.liveIcon_1}\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n              />\n              <LiveIcon\n                role=\"presentation\"\n                classNameOverride={styles.liveIcon_2}\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n              />\n              <LiveIcon\n                role=\"presentation\"\n                classNameOverride={styles.liveIcon_3}\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n              />\n            </span>\n          )}\n        </>\n      </div>\n    </div>\n  )\n}\n\nTag.displayName = \"Tag\"\n"],"names":["isJSXElement","imageElementOrAvatarProps","renderAvatar","React","createElement","Fragment","Avatar","__assign","size","Tag","props","children","_a","variant","_b","_c","inline","_d","dismissible","onDismiss","onMouseDown","onMouseLeave","truncateWidth","isTruncated","canShowIcon","className","classnames","styles","root","layoutContainer","validationIcon","SuccessIcon","role","ExclamationIcon","CautionIcon","InformationIcon","profile","avatar","textContent","truncate","style","maxWidth","undefined","type","dismissButton","onClick","iconWrapper","ClearIcon","inheritSize","liveIcon","LiveIcon","classNameOverride","liveIcon_base","width","height","viewBox","fill","liveIcon_1","liveIcon_2","liveIcon_3","displayName"],"mappings":"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"}

package/dist/cjs/Tag/Tag.module.scss.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+var styles = {
+  "root": "Tag-module_root__uRhoc",
+  "profile": "Tag-module_profile__OoGsS",
+  "layoutContainer": "Tag-module_layoutContainer__pBLSz",
+  "validationIcon": "Tag-module_validationIcon__B-YLv",
+  "textContent": "Tag-module_textContent__q76X-",
+  "iconWrapper": "Tag-module_iconWrapper__aPrKH",
+  "dismissButton": "Tag-module_dismissButton__rHv7r",
+  "background": "Tag-module_background__LkzGB",
+  "truncate": "Tag-module_truncate__5w7HW",
+  "inline": "Tag-module_inline__pPM-d",
+  "medium": "Tag-module_medium__NkOrv",
+  "small": "Tag-module_small__-xyNk",
+  "default": "Tag-module_default__6PVke",
+  "sentimentPositive": "Tag-module_sentimentPositive__nbqE1",
+  "sentimentNeutral": "Tag-module_sentimentNeutral__8BtD8",
+  "sentimentNegative": "Tag-module_sentimentNegative__1J85t",
+  "sentimentNone": "Tag-module_sentimentNone__8BWjU",
+  "validationPositive": "Tag-module_validationPositive__vgFUE",
+  "validationInformative": "Tag-module_validationInformative__bnJ4A",
+  "validationNegative": "Tag-module_validationNegative__lZgIY",
+  "validationCautionary": "Tag-module_validationCautionary__ERS2t",
+  "statusLive": "Tag-module_statusLive__xG48w",
+  "statusAction": "Tag-module_statusAction__woL-O",
+  "statusClosed": "Tag-module_statusClosed__VhZP-",
+  "statusDraft": "Tag-module_statusDraft__9QZDv",
+  "liveIcon": "Tag-module_liveIcon__URtak",
+  "liveIcon_base": "Tag-module_liveIcon_base__Nk5um",
+  "liveIcon_1": "Tag-module_liveIcon_1__STFJY",
+  "liveIcon_2": "Tag-module_liveIcon_2__rko-D",
+  "liveIcon_3": "Tag-module_liveIcon_3__fL71y",
+  "pulse-inner": "Tag-module_pulse-inner__0-JFL",
+  "pulse-outer": "Tag-module_pulse-outer__f9Oox"
+};
+module.exports = styles;
+//# sourceMappingURL=Tag.module.scss.cjs.map

package/dist/cjs/Tag/Tag.module.scss.cjs.map

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

package/dist/cjs/Tile/InformationTile/InformationTile.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var GenericTile = require('../subcomponents/GenericTile/GenericTile.cjs');
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#InformationTile%3A Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-tiles-informationtile--docs Storybook}
+ */
+const InformationTile = /*#__PURE__*/function () {
+  const InformationTile = function (props) {
+    return React.createElement(GenericTile.GenericTile, tslib.__assign({}, props));
+  };
+  InformationTile.displayName = "InformationTile";
+  return InformationTile;
+}();
+exports.InformationTile = InformationTile;
+//# sourceMappingURL=InformationTile.cjs.map

package/dist/cjs/Tile/InformationTile/InformationTile.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InformationTile.cjs","sources":["../../../../src/Tile/InformationTile/InformationTile.tsx"],"sourcesContent":["import React from \"react\"\nimport { GenericTile, GenericTileProps } from \"../subcomponents/GenericTile\"\n\nexport type InformationTileProps = GenericTileProps\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#InformationTile%3A Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-tiles-informationtile--docs Storybook}\n */\nexport const InformationTile = (props: InformationTileProps): JSX.Element => (\n  <GenericTile {...props} />\n)\n\nInformationTile.displayName = \"InformationTile\"\n"],"names":["InformationTile","props","React","createElement","GenericTile","__assign","displayName"],"mappings":";;;;;;AAKA;;;AAGG;AAHH,MAIaA,eAAe;EAAA,MAAfA,eAAe,GAAG,SAAAA,CAACC,KAA2B,EAAkB;IAAA,OAC3EC,KAAA,CAAAC,aAAA,CAACC,WAAW,CAAAA,WAAA,EAAKC,cAAA,CAAA,CAAA,CAAA,EAAAJ,KAAK,EAAI;EAC3B,CAAA;EAEDD,eAAe,CAACM,WAAW,GAAG,iBAAiB;EAAA,OAJlCN,eAAe;AAAA;"}

package/dist/cjs/Tile/MultiActionTile/MultiActionTile.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var GenericTile = require('../subcomponents/GenericTile/GenericTile.cjs');
+var Action = require('../subcomponents/GenericTile/Action.cjs');
+var MultiActionTile_module = require('./MultiActionTile.module.scss.cjs');
+var renderActions = function (primaryAction, secondaryAction) {
+  return React.createElement("div", {
+    className: MultiActionTile_module.actions
+  }, secondaryAction && React.createElement("div", {
+    className: "mr-8"
+  }, React.createElement(Action, {
+    action: secondaryAction,
+    secondary: true
+  })), React.createElement(Action, {
+    action: primaryAction
+  }));
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#MultiActionTile.1 Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-tiles-multiactiontile--docs Storybook}
+ */
+const MultiActionTile = /*#__PURE__*/function () {
+  const MultiActionTile = function (_a) {
+    var children = _a.children,
+      primaryAction = _a.primaryAction,
+      secondaryAction = _a.secondaryAction,
+      restProps = tslib.__rest(_a, ["children", "primaryAction", "secondaryAction"]);
+    return React.createElement(GenericTile.GenericTile, tslib.__assign({
+      footer: renderActions(primaryAction, secondaryAction)
+    }, restProps), children);
+  };
+  MultiActionTile.displayName = "MultiActionTile";
+  return MultiActionTile;
+}();
+exports.MultiActionTile = MultiActionTile;
+//# sourceMappingURL=MultiActionTile.cjs.map

package/dist/cjs/Tile/MultiActionTile/MultiActionTile.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiActionTile.cjs","sources":["../../../../src/Tile/MultiActionTile/MultiActionTile.tsx"],"sourcesContent":["import React from \"react\"\nimport {\n  GenericTile,\n  GenericTileProps,\n  TileAction,\n} from \"../subcomponents/GenericTile\"\nimport Action from \"../subcomponents/GenericTile/Action\"\nimport styles from \"./MultiActionTile.module.scss\"\n\nexport type MultiActionTileProps = {\n  primaryAction: TileAction\n  secondaryAction?: TileAction\n} & Omit<GenericTileProps, \"footer\">\n\nconst renderActions = (\n  primaryAction: TileAction,\n  secondaryAction?: TileAction\n): JSX.Element => (\n  <div className={styles.actions}>\n    {secondaryAction && (\n      <div className=\"mr-8\">\n        <Action action={secondaryAction} secondary />\n      </div>\n    )}\n    <Action action={primaryAction} />\n  </div>\n)\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#MultiActionTile.1 Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-tiles-multiactiontile--docs Storybook}\n */\nexport const MultiActionTile = ({\n  children,\n  primaryAction,\n  secondaryAction,\n  ...restProps\n}: MultiActionTileProps): JSX.Element => (\n  <GenericTile\n    footer={renderActions(primaryAction, secondaryAction)}\n    {...restProps}\n  >\n    {children}\n  </GenericTile>\n)\n\nMultiActionTile.displayName = \"MultiActionTile\"\n"],"names":["renderActions","primaryAction","secondaryAction","React","createElement","className","styles","actions","Action","action","secondary","MultiActionTile","_a","children","restProps","__rest","GenericTile","footer","displayName"],"mappings":";;;;;;;AAcA,IAAMA,aAAa,GAAG,SAAAA,CACpBC,aAAyB,EACzBC,eAA4B,EAAA;EACZ,OAChBC,KAAK,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAAC,SAAS,EAAEC,sBAAM,CAACC;EAAO,CAAA,EAC3BL,eAAe,IACdC,KAAK,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAAC,SAAS,EAAC;EAAM,CAAA,EACnBF,KAAC,CAAAC,aAAA,CAAAI,MAAM;IAACC,MAAM,EAAEP,eAAe;IAAEQ,SAAS,EAAG;EAAA,CAAA,CAAA,CAEhD,EACDP,KAAC,CAAAC,aAAA,CAAAI,MAAM,EAAC;IAAAC,MAAM,EAAER;IAAiB,CAC7B;CACP;AAED;;;AAGG;AAHH,MAIaU,eAAe;EAAA,MAAfA,eAAe,GAAG,SAAAA,CAACC,EAKT,EAAA;IAJrB,IAAAC,QAAQ,GAAAD,EAAA,CAAAC,QAAA;MACRZ,aAAa,GAAAW,EAAA,CAAAX,aAAA;MACbC,eAAe,GAAAU,EAAA,CAAAV,eAAA;MACZY,SAAS,GAJkBC,KAAAA,CAAAA,MAAA,CAAAH,EAAA,EAAA,CAAA,UAAA,EAAA,eAAA,EAAA,iBAAA,CAK/B,CADa;IAC2B,OACvCT,KAAC,CAAAC,aAAA,CAAAY,uBAAW;MACVC,MAAM,EAAEjB,aAAa,CAACC,aAAa,EAAEC,eAAe;IAAC,CACjD,EAAAY,SAAS,GAEZD,QAAQ,CACG;GACf;EAEDF,eAAe,CAACO,WAAW,GAAG,iBAAiB;EAAA,OAdlCP,eAAe;AAAA;"}

package/dist/cjs/Tile/MultiActionTile/MultiActionTile.module.scss.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "actions": "MultiActionTile-module_actions__mntsC"
+};
+module.exports = styles;
+//# sourceMappingURL=MultiActionTile.module.scss.cjs.map

package/dist/cjs/Tile/MultiActionTile/MultiActionTile.module.scss.cjs.map

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

package/dist/cjs/Tile/TileGrid/TileGrid.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var TileGrid_module = require('./TileGrid.module.scss.cjs');
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#TileGrid Guidance} |
+ * {@link https://cultureamp.design/storybook/?path=/docs/components-tiles-tilegrid--docs Storybook}
+ */
+const TileGrid = /*#__PURE__*/function () {
+  const TileGrid = function (_a) {
+    var children = _a.children,
+      classNameOverride = _a.classNameOverride,
+      restProps = tslib.__rest(_a, ["children", "classNameOverride"]);
+    return React.createElement("div", tslib.__assign({
+      className: classnames(TileGrid_module.grid, classNameOverride),
+      "data-tile-grid": true
+    }, restProps), children);
+  };
+  TileGrid.displayName = "TileGrid";
+  return TileGrid;
+}();
+exports.TileGrid = TileGrid;
+//# sourceMappingURL=TileGrid.cjs.map

package/dist/cjs/Tile/TileGrid/TileGrid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileGrid.cjs","sources":["../../../../src/Tile/TileGrid/TileGrid.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactElement } from \"react\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { InformationTileProps } from \"../InformationTile\"\nimport { MultiActionTileProps } from \"../MultiActionTile\"\nimport styles from \"./TileGrid.module.scss\"\n\ntype TileProps = InformationTileProps | MultiActionTileProps\n\nexport type TileElement = ReactElement<TileProps>\n\nexport interface TileGridProps\n  extends OverrideClassName<HTMLAttributes<HTMLDivElement>> {\n  children: TileElement[] | TileElement\n}\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#TileGrid Guidance} |\n * {@link https://cultureamp.design/storybook/?path=/docs/components-tiles-tilegrid--docs Storybook}\n */\nexport const TileGrid = ({\n  children,\n  classNameOverride,\n  ...restProps\n}: TileGridProps): JSX.Element => (\n  <div\n    className={classnames(styles.grid, classNameOverride)}\n    data-tile-grid\n    {...restProps}\n  >\n    {children}\n  </div>\n)\n\nTileGrid.displayName = \"TileGrid\"\n"],"names":["TileGrid","_a","children","classNameOverride","restProps","__rest","React","createElement","__assign","className","classnames","styles","grid","displayName"],"mappings":";;;;;;;AAgBA;;;AAGG;AAHH,MAIaA,QAAQ;EAAA,MAARA,QAAQ,GAAG,SAAAA,CAACC,EAIT,EAAA;IAHd,IAAAC,QAAQ,cAAA;MACRC,iBAAiB,uBAAA;MACdC,SAAS,GAHWC,KAAA,CAAAA,MAAA,CAAAJ,EAAA,EAAA,CAAA,UAAA,EAAA,mBAAA,CAIxB,CADa;IACoB,OAChCK,KACE,CAAAC,aAAA,CAAA,KAAA,EAAAC,KAAAA,CAAAA,QAAA,CAAA;MAAAC,SAAS,EAAEC,UAAU,CAACC,eAAM,CAACC,IAAI,EAAET,iBAAiB,CAAC;MAEjD,gBAAA,EAAA;IAAA,CAAA,EAAAC,SAAS,GAEZF,QAAQ,CACL;GACP;EAEDF,QAAQ,CAACa,WAAW,GAAG,UAAU;EAAA,OAdpBb,QAAQ;AAAA;"}

package/dist/cjs/Tile/TileGrid/TileGrid.module.scss.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "grid": "TileGrid-module_grid__1WCNc"
+};
+module.exports = styles;
+//# sourceMappingURL=TileGrid.module.scss.cjs.map

package/dist/cjs/Tile/TileGrid/TileGrid.module.scss.cjs.map

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

package/dist/cjs/Tile/subcomponents/GenericTile/Action.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+var Button = require('../../../Button/Button/Button.cjs');
+require('../../../Button/IconButton/IconButton.cjs');
+var Action = function (_a) {
+  var action = _a.action,
+    _b = _a.secondary,
+    secondary = _b === void 0 ? false : _b,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c;
+  var label = action.label,
+    href = action.href,
+    onClick = action.onClick,
+    icon = action.icon,
+    automationId = action.automationId,
+    newTabAndIUnderstandTheAccessibilityImplications = action.newTabAndIUnderstandTheAccessibilityImplications;
+  return React.createElement(Button.Button, {
+    label: label,
+    href: href,
+    onClick: onClick,
+    secondary: secondary,
+    icon: icon,
+    "data-automation-id": automationId,
+    disabled: disabled,
+    newTabAndIUnderstandTheAccessibilityImplications: newTabAndIUnderstandTheAccessibilityImplications
+  });
+};
+module.exports = Action;
+//# sourceMappingURL=Action.cjs.map

package/dist/cjs/Tile/subcomponents/GenericTile/Action.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Action.cjs","sources":["../../../../../src/Tile/subcomponents/GenericTile/Action.tsx"],"sourcesContent":["import React from \"react\"\nimport { Button } from \"~components/Button\"\nimport { TileAction } from \"./GenericTile\"\n\ntype ActionProps = {\n  action: TileAction\n  secondary?: boolean\n  disabled?: boolean\n}\n\nconst Action = ({\n  action,\n  secondary = false,\n  disabled = false,\n}: ActionProps): JSX.Element => {\n  const {\n    label,\n    href,\n    onClick,\n    icon,\n    automationId,\n    newTabAndIUnderstandTheAccessibilityImplications,\n  } = action\n\n  return (\n    <Button\n      label={label}\n      href={href}\n      onClick={onClick}\n      secondary={secondary}\n      icon={icon}\n      data-automation-id={automationId}\n      disabled={disabled}\n      newTabAndIUnderstandTheAccessibilityImplications={\n        newTabAndIUnderstandTheAccessibilityImplications\n      }\n    />\n  )\n}\n\nexport default Action\n"],"names":["Action","_a","action","_b","secondary","_c","disabled","label","href","onClick","icon","automationId","newTabAndIUnderstandTheAccessibilityImplications","React","createElement","Button"],"mappings":";;;;;AAUM,IAAAA,MAAM,GAAG,SAAAA,CAACC,EAIF,EAAA;EAHZ,IAAAC,MAAM,GAAAD,EAAA,CAAAC,MAAA;IACNC,EAAiB,GAAAF,EAAA,CAAAG,SAAA;IAAjBA,SAAS,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,GAAAA,EAAA;IACjBE,EAAgB,GAAAJ,EAAA,CAAAK,QAAA;IAAhBA,QAAQ,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAAA,EAAA;EAGd,IAAAE,KAAK,GAMHL,MAAM,CAAAK,KANH;IACLC,IAAI,GAKFN,MAAM,CALJM,IAAA;IACJC,OAAO,GAILP,MAAM,CAAAO,OAJD;IACPC,IAAI,GAGFR,MAAM,CAHJQ,IAAA;IACJC,YAAY,GAEVT,MAAM,CAAAS,YAFI;IACZC,gDAAgD,GAC9CV,MAAM,iDADwC;EAGlD,OACEW,KAAA,CAAAC,aAAA,CAACC,MAAAA,CAAAA,MAAM,EAAA;IACLR,KAAK,EAAEA,KAAK;IACZC,IAAI,EAAEA,IAAI;IACVC,OAAO,EAAEA,OAAO;IAChBL,SAAS,EAAEA,SAAS;IACpBM,IAAI,EAAEA,IAAI;IAAA,oBAAA,EACUC,YAAY;IAChCL,QAAQ,EAAEA,QAAQ;IAClBM,gDAAgD,EAC9CA;EAAgD,CAAA,CAElD;AAEN,CAAA;"}

package/dist/cjs/Tile/subcomponents/GenericTile/GenericTile.cjs

@@ -0,0 +1,117 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+require('../../../Button/Button/Button.cjs');
+var IconButton = require('../../../Button/IconButton/IconButton.cjs');
+var Heading = require('../../../Heading/Heading.cjs');
+require('uuid');
+require('../../../Icon/subcomponents/SVG/SVG.cjs');
+var ArrowBackwardIcon = require('../../../Icon/ArrowBackwardIcon.cjs');
+var InformationIcon = require('../../../Icon/InformationIcon.cjs');
+var Text = require('../../../Text/Text.cjs');
+var Action = require('./Action.cjs');
+var GenericTile_module = require('./GenericTile.module.scss.cjs');
+const GenericTile = /*#__PURE__*/function () {
+  const GenericTile = function (_a) {
+    var children = _a.children,
+      title = _a.title,
+      _b = _a.titleTag,
+      titleTag = _b === void 0 ? "h3" : _b,
+      metadata = _a.metadata,
+      information = _a.information,
+      mood = _a.mood,
+      footer = _a.footer,
+      classNameOverride = _a.classNameOverride,
+      restProps = tslib.__rest(_a, ["children", "title", "titleTag", "metadata", "information", "mood", "footer", "classNameOverride"]);
+    var _c = React.useState(false),
+      isFlipped = _c[0],
+      setIsFlipped = _c[1];
+    var renderTitle = function () {
+      return React.createElement("div", {
+        className: GenericTile_module.title
+      }, React.createElement(Heading.Heading, {
+        variant: "heading-3",
+        tag: titleTag
+      }, title), metadata && React.createElement("div", {
+        className: "pt-4"
+      }, React.createElement(Text.Text, {
+        variant: "small",
+        color: "dark-reduced-opacity"
+      }, metadata)));
+    };
+    var renderActions = function (primaryAction, secondaryAction, disabled) {
+      return React.createElement("div", {
+        className: GenericTile_module.actions
+      }, secondaryAction && React.createElement(Action, {
+        action: secondaryAction,
+        secondary: true,
+        disabled: disabled
+      }), primaryAction && React.createElement(Action, {
+        action: primaryAction,
+        disabled: disabled
+      }));
+    };
+    var renderFront = function () {
+      return React.createElement("div", {
+        className: classnames(GenericTile_module.face, GenericTile_module.faceFront, mood === "positive" && GenericTile_module.faceMoodPositive, mood === "informative" && GenericTile_module.faceMoodInformative, mood === "cautionary" && GenericTile_module.faceMoodCautionary, mood === "assertive" && GenericTile_module.faceMoodAssertive, mood === "negative" && GenericTile_module.faceMoodNegative, mood === "prominent" && GenericTile_module.faceMoodProminent)
+      }, information && React.createElement("div", {
+        className: GenericTile_module.informationBtn
+      }, React.createElement(IconButton.IconButton, {
+        label: "Information",
+        icon: React.createElement(InformationIcon.InformationIcon, {
+          role: "presentation"
+        }),
+        onClick: function () {
+          return setIsFlipped(true);
+        },
+        disabled: isFlipped,
+        "aria-hidden": isFlipped
+      })), renderTitle(), React.createElement("div", {
+        className: GenericTile_module.children
+      }, children && children), footer && React.createElement("div", {
+        className: GenericTile_module.footer
+      }, footer));
+    };
+    var renderInformation = function (informationProp) {
+      if (informationProp && typeof informationProp === "object" && "text" in informationProp) {
+        return React.createElement(React.Fragment, null, React.createElement(Text.Text, {
+          variant: "body"
+        }, informationProp.text), (informationProp.primaryAction || informationProp.secondaryAction) && React.createElement("div", {
+          className: GenericTile_module.footer
+        }, renderActions(informationProp.primaryAction, informationProp.secondaryAction, !isFlipped)));
+      }
+      return informationProp;
+    };
+    var renderBack = function () {
+      if (!information) return;
+      return React.createElement("div", {
+        className: classnames(GenericTile_module.face, GenericTile_module.faceBack)
+      }, React.createElement("div", {
+        className: GenericTile_module.informationBtn
+      }, React.createElement(IconButton.IconButton, {
+        label: "Information",
+        icon: React.createElement(ArrowBackwardIcon.ArrowBackwardIcon, {
+          role: "presentation"
+        }),
+        onClick: function () {
+          return setIsFlipped(false);
+        },
+        disabled: !isFlipped,
+        "aria-hidden": !isFlipped
+      })), React.createElement("div", {
+        className: GenericTile_module.information
+      }, renderInformation(information)));
+    };
+    return React.createElement("div", tslib.__assign({
+      className: classnames(GenericTile_module.root, classNameOverride)
+    }, restProps), React.createElement("div", {
+      className: classnames(GenericTile_module.tile, isFlipped && GenericTile_module.isFlipped)
+    }, React.createElement(React.Fragment, null, renderFront(), renderBack())));
+  };
+  GenericTile.displayName = "GenericTile";
+  return GenericTile;
+}();
+exports.GenericTile = GenericTile;
+//# sourceMappingURL=GenericTile.cjs.map

package/dist/cjs/Tile/subcomponents/GenericTile/GenericTile.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenericTile.cjs","sources":["../../../../../src/Tile/subcomponents/GenericTile/GenericTile.tsx"],"sourcesContent":["import React, { HTMLAttributes, useState } from \"react\"\nimport classnames from \"classnames\"\nimport { IconButton } from \"~components/Button\"\nimport { GenericButtonProps } from \"~components/Button/GenericButton\"\nimport { AllowedHeadingTags, Heading } from \"~components/Heading\"\nimport { ArrowBackwardIcon, InformationIcon } from \"~components/Icon\"\nimport { Text } from \"~components/Text\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport Action from \"./Action\"\nimport { Moods } from \"./types\"\nimport styles from \"./GenericTile.module.scss\"\n\nexport type TileAction = {\n  label: string\n  onClick?: GenericButtonProps[\"onClick\"]\n  href?: string\n  icon?: JSX.Element\n  /**\n   * @deprecated use data-testid instead\n   */\n  automationId?: string\n  newTabAndIUnderstandTheAccessibilityImplications?: boolean\n} & HTMLAttributes<HTMLButtonElement>\n\nexport type TileInformation = {\n  text: string\n  primaryAction?: TileAction\n  secondaryAction?: TileAction\n}\n\nexport type GenericTileProps = {\n  children?: React.ReactNode\n  title: React.ReactNode\n  titleTag?: AllowedHeadingTags\n  metadata?: string\n  information?: TileInformation | React.ReactNode\n  mood?: Moods\n  footer: React.ReactNode\n} & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, \"title\">>\n\nexport const GenericTile = ({\n  children,\n  title,\n  titleTag = \"h3\",\n  metadata,\n  information,\n  mood,\n  footer,\n  classNameOverride,\n  ...restProps\n}: GenericTileProps): JSX.Element => {\n  const [isFlipped, setIsFlipped] = useState<boolean>(false)\n\n  const renderTitle = (): JSX.Element => (\n    <div className={styles.title}>\n      <Heading variant=\"heading-3\" tag={titleTag}>\n        {title}\n      </Heading>\n      {metadata && (\n        <div className=\"pt-4\">\n          <Text variant=\"small\" color=\"dark-reduced-opacity\">\n            {metadata}\n          </Text>\n        </div>\n      )}\n    </div>\n  )\n\n  const renderActions = (\n    primaryAction?: TileAction,\n    secondaryAction?: TileAction,\n    disabled?: boolean\n  ): JSX.Element => (\n    <div className={styles.actions}>\n      {secondaryAction && (\n        <Action action={secondaryAction} secondary disabled={disabled} />\n      )}\n      {primaryAction && <Action action={primaryAction} disabled={disabled} />}\n    </div>\n  )\n\n  const renderFront = (): JSX.Element => (\n    <div\n      className={classnames(\n        styles.face,\n        styles.faceFront,\n        mood === \"positive\" && styles.faceMoodPositive,\n        mood === \"informative\" && styles.faceMoodInformative,\n        mood === \"cautionary\" && styles.faceMoodCautionary,\n        mood === \"assertive\" && styles.faceMoodAssertive,\n        mood === \"negative\" && styles.faceMoodNegative,\n        mood === \"prominent\" && styles.faceMoodProminent\n      )}\n    >\n      {information && (\n        <div className={styles.informationBtn}>\n          <IconButton\n            label=\"Information\"\n            icon={<InformationIcon role=\"presentation\" />}\n            onClick={(): void => setIsFlipped(true)}\n            disabled={isFlipped}\n            aria-hidden={isFlipped}\n          />\n        </div>\n      )}\n      {renderTitle()}\n      <div className={styles.children}>{children && children}</div>\n      {footer && <div className={styles.footer}>{footer}</div>}\n    </div>\n  )\n\n  const renderInformation = (\n    informationProp: GenericTileProps[\"information\"] | undefined\n  ): JSX.Element | React.ReactNode => {\n    if (\n      informationProp &&\n      typeof informationProp === \"object\" &&\n      \"text\" in informationProp\n    ) {\n      return (\n        <>\n          <Text variant=\"body\">{informationProp.text}</Text>\n          {(informationProp.primaryAction ||\n            informationProp.secondaryAction) && (\n            <div className={styles.footer}>\n              {renderActions(\n                informationProp.primaryAction,\n                informationProp.secondaryAction,\n                !isFlipped\n              )}\n            </div>\n          )}\n        </>\n      )\n    }\n\n    return informationProp\n  }\n\n  const renderBack = (): JSX.Element | void => {\n    if (!information) return\n\n    return (\n      <div className={classnames(styles.face, styles.faceBack)}>\n        <div className={styles.informationBtn}>\n          <IconButton\n            label=\"Information\"\n            icon={<ArrowBackwardIcon role=\"presentation\" />}\n            onClick={(): void => setIsFlipped(false)}\n            disabled={!isFlipped}\n            aria-hidden={!isFlipped}\n          />\n        </div>\n        <div className={styles.information}>\n          {renderInformation(information)}\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className={classnames(styles.root, classNameOverride)} {...restProps}>\n      <div className={classnames(styles.tile, isFlipped && styles.isFlipped)}>\n        <>\n          {renderFront()}\n          {renderBack()}\n        </>\n      </div>\n    </div>\n  )\n}\n\nGenericTile.displayName = \"GenericTile\"\n"],"names":["GenericTile","_a","children","title","_b","titleTag","metadata","information","mood","footer","classNameOverride","restProps","__rest","_c","useState","isFlipped","setIsFlipped","renderTitle","React","className","styles","createElement","Heading","variant","tag","Text","color","renderActions","primaryAction","secondaryAction","disabled","actions","Action","action","secondary","renderFront","classnames","face","faceFront","faceMoodPositive","faceMoodInformative","faceMoodCautionary","faceMoodAssertive","faceMoodNegative","faceMoodProminent","informationBtn","IconButton","label","icon","InformationIcon","role","onClick","renderInformation","informationProp","Fragment","text","renderBack","faceBack","ArrowBackwardIcon","__assign","root","tile","displayName"],"mappings":"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"}