@kaizen/components 1.37.0 → 1.38.0

package/dist/esm/Tag/Tag.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.mjs","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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"}
+{"version":3,"file":"Tag.mjs","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","default","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":";;;;;;;;;;;;AAmCA,IAAMA,YAAY,GAAG,SAAAA,CACnBC,yBAAoD,EAAA;EAEpD,OAAA,OAAO,IAAIA,yBAAyB;AAApC,CAAoC;AAEtC,IAAMC,YAAY,GAAG,SAAAA,CACnBD,yBAAoD,EAAA;EAEpD,OAAAD,YAAY,CAACC,yBAAyB,CAAC,kBACrCE,KAAG,CAAAC,aAAA,CAAAD,KAAA,CAAAE,QAAA,EAAA,IAAA,EAAAJ,yBAAyB,CAAI,mBAEhCE,KAAA,CAAAC,aAAA,CAACE,MAAM,EAAAC,QAAA,CAAA,EAAA,EAAKN,yBAAyB,EAAA;IAAEO,IAAI,EAAC;GAAO,CAAA,CAAG,CACvD;AAJD,CAIC;AAEH;;;AAGG;AAHH,MAIaC,GAAG;EAAA,MAAHA,GAAG,GAAG,SAAAA,CAACC,KAAe,EAAA;IAE/B,IAAAC,QAAQ,GASND,KAAK,CAAAC,QATC;MACRC,EAAA,GAQEF,KAAK,CAAAG,OARY;MAAnBA,OAAO,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,SAAS,GAAAA,EAAA;MACnBE,EAOE,GAAAJ,KAAK,CAPQF,IAAA;MAAfA,IAAI,GAAAM,EAAA,KAAA,KAAA,CAAA,GAAG,QAAQ,GAAAA,EAAA;MACfC,EAAA,GAMEL,KAAK,CAAAM,MANO;MAAdA,MAAM,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,GAAAA,EAAA;MACdE,EAKE,GAAAP,KAAK,CALYQ,WAAA;MAAnBA,WAAW,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAAA,EAAA;MACnBE,SAAS,GAIPT,KAAK,CAJES,SAAA;MACTC,WAAW,GAGTV,KAAK,CAAAU,WAHI;MACXC,YAAY,GAEVX,KAAK,CAFKW,YAAA;MACZC,aAAa,GACXZ,KAAK,CAAAY,aADM;IAGf,IAAMC,WAAW,GAAGD,aAAa,IAAIA,aAAa,GAAG,CAAC;IACtD,IAAME,WAAW,GAAGhB,IAAI,KAAK,QAAQ;IACrC,oBACEL,KACE,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAAqB,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACC,IAAI,EACXD,MAAM,CAACd,OAAO,CAAC,EACfA,OAAO,KAAK,SAAS,IAAIc,MAAM,CAACE,OAAO,EACvCF,MAAM,CAACnB,IAAI,CAAC,EACZQ,MAAM,IAAIW,MAAM,CAACX,MAAM,EACvBE,WAAW,IAAIS,MAAM,CAACT,WAAW;IAClC,CAAA,eAEDf,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAKqB,SAAS,EAAEE,MAAM,CAACG;IAAe,CAAA,eACpC3B,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAE,QAAA,EAAA,IAAA,EACGmB,WAAW,IACT,YAAA;MACC,QAAQd,KAAK,CAACG,OAAO;QACnB,KAAK,oBAAoB;UACvB,oBACEV,KAAM,CAAAC,aAAA,CAAA,MAAA,EAAA;YAAAqB,SAAS,EAAEE,MAAM,CAACI;UAAc,CAAA,eACpC5B,KAAC,CAAAC,aAAA,CAAA4B,WAAW;YAACC,IAAI,EAAC;UAAiB,CAAA,CAAA,CAC9B;QAEX,KAAK,oBAAoB;UACvB,oBACE9B,KAAM,CAAAC,aAAA,CAAA,MAAA,EAAA;YAAAqB,SAAS,EAAEE,MAAM,CAACI;UAAc,CAAA,eACpC5B,KAAC,CAAAC,aAAA,CAAA8B,eAAe;YAACD,IAAI,EAAC;UAAiB,CAAA,CAAA,CAClC;QAEX,KAAK,sBAAsB;UACzB,oBACE9B,KAAM,CAAAC,aAAA,CAAA,MAAA,EAAA;YAAAqB,SAAS,EAAEE,MAAM,CAACI;UAAc,CAAA,eACpC5B,KAAC,CAAAC,aAAA,CAAA+B,WAAW;YAACF,IAAI,EAAC;UAAiB,CAAA,CAAA,CAC9B;QAEX,KAAK,uBAAuB;UAC1B,oBACE9B,KAAM,CAAAC,aAAA,CAAA,MAAA,EAAA;YAAAqB,SAAS,EAAEE,MAAM,CAACI;UAAc,CAAA,eACpC5B,KAAC,CAAAC,aAAA,CAAAgC,eAAe;YAACH,IAAI,EAAC;UAAiB,CAAA,CAAA,CAClC;QAEX,KAAK,SAAS;UACZ,oBACE9B;YAAMsB,SAAS,EAAEE,MAAM,CAACU;aACrB3B,KAAK,CAAC4B,MAAM,IAAIpC,YAAY,CAACQ,KAAK,CAAC4B,MAAM,CAAC,CACtC;QAEX;UACE;MACH;IACH,CAAC,CAAG,CAAA,eACNnC,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;MACEqB,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACY,WAAW,EAClBhB,WAAW,IAAII,MAAM,CAACa,QAAQ,CAC/B;MACDC,KAAK,EAAE;QACLC,QAAQ,EAAEnB,WAAW,GAAGD,aAAa,GAAGqB;MACzC;IAAA,CAAA,EAEAhC,QAAQ,CACJ,EACNO,WAAW,mBACVf,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAE,QAAA,EAAA,IAAA,eACEF,KACE,CAAAC,aAAA,CAAA,QAAA,EAAA;MAAAwC,IAAI,EAAC,QAAQ;MACbnB,SAAS,EAAEE,MAAM,CAACkB,aAAa;MAC/BC,OAAO,EAAE3B,SAAS;MAClBC,WAAW,EAAEA,WAAW;MACxBC,YAAY,EAAEA;IAAY,CAAA,eAE1BlB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAKqB,SAAS,EAAEE,MAAM,CAACoB;IAAW,CAAA,eAChC5C,KAAA,CAAAC,aAAA,CAAC4C,SAAS,EAAA;MAACC,WAAW,EAAA,IAAA;MAAChB,IAAI,EAAC,KAAK;MAAA,YAAA,EAAY;KAAS,CAAG,CACrD,CACC,CACR,CACJ,EACApB,OAAO,KAAK,YAAY,mBACvBV;MAAMsB,SAAS,EAAEE,MAAM,CAACuB;IAAQ,CAAA,eAC9B/C,KAAC,CAAAC,aAAA,CAAA+C,QAAQ,EACP;MAAAlB,IAAI,EAAC,cAAc;MACnBmB,iBAAiB,EAAEzB,MAAM,CAAC0B,aAAa;MACvCC,KAAK,EAAC,IAAI;MACVC,MAAM,EAAC,IAAI;MACXC,OAAO,EAAC,WAAW;MACnBC,IAAI,EAAC;KACL,CAAA,eACFtD,KAAC,CAAAC,aAAA,CAAA+C,QAAQ,EACP;MAAAlB,IAAI,EAAC,cAAc;MACnBmB,iBAAiB,EAAEzB,MAAM,CAAC+B,UAAU;MACpCJ,KAAK,EAAC,IAAI;MACVC,MAAM,EAAC,IAAI;MACXC,OAAO,EAAC,WAAW;MACnBC,IAAI,EAAC;KACL,CAAA,eACFtD,KAAC,CAAAC,aAAA,CAAA+C,QAAQ,EACP;MAAAlB,IAAI,EAAC,cAAc;MACnBmB,iBAAiB,EAAEzB,MAAM,CAACgC,UAAU;MACpCL,KAAK,EAAC,IAAI;MACVC,MAAM,EAAC,IAAI;MACXC,OAAO,EAAC,WAAW;MACnBC,IAAI,EAAC;KACL,CAAA,eACFtD,KAAA,CAAAC,aAAA,CAAC+C,QAAQ,EAAA;MACPlB,IAAI,EAAC,cAAc;MACnBmB,iBAAiB,EAAEzB,MAAM,CAACiC,UAAU;MACpCN,KAAK,EAAC,IAAI;MACVC,MAAM,EAAC,IAAI;MACXC,OAAO,EAAC,WAAW;MACnBC,IAAI,EAAC;KAAM,CACX,CACG,CACR,CACA,CACC,CACF;EAEV,CAAC;EAEDhD,GAAG,CAACoD,WAAW,GAAG,KAAK;EAAA,OArIVpD,GAAG;AAAA;"}

package/dist/esm/TextArea/TextArea.mjs

@@ -63,7 +63,7 @@ const TextArea = /*#__PURE__*/function () {
       className: styles.wrapper,
       style: getWrapperStyle()
     }, /*#__PURE__*/React.createElement("textarea", __assign({
-      className: classnames(styles.textarea, styles[status], reversed ? styles.reversed : styles["default"], disabled && styles.disabled),
+      className: classnames(styles.textarea, styles[status], reversed ? styles.reversed : styles.default, disabled && styles.disabled),
       rows: rows,
       onChange: onChange || propsOnChange,
       value: controlledValue,

package/dist/esm/TextArea/TextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.mjs","sources":["../../../src/TextArea/TextArea.tsx"],"sourcesContent":["import React, {\n  TextareaHTMLAttributes,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./TextArea.module.scss\"\n\nexport type TextAreaProps = {\n  textAreaRef?: React.RefObject<HTMLTextAreaElement>\n  status?: \"default\" | \"error\" | \"caution\"\n  autogrow?: boolean\n  reversed?: boolean\n} & OverrideClassName<TextareaHTMLAttributes<HTMLTextAreaElement>>\n\nexport const TextArea = ({\n  textAreaRef: propsTextAreaRef,\n  status = \"default\",\n  autogrow = false,\n  reversed = false,\n  rows = 3,\n  defaultValue,\n  value,\n  disabled,\n  onChange: propsOnChange,\n  ...restProps\n}: TextAreaProps): JSX.Element => {\n  const [textAreaHeight, setTextAreaHeight] = useState<string>(\"auto\")\n  const [parentHeight, setParentHeight] = useState<string>(\"auto\")\n  const [internalValue, setInternalValue] = useState<\n    string | number | readonly string[] | undefined\n  >(autogrow ? defaultValue : undefined)\n  // ^ holds an internal state of the value so that autogrow can still work with uncontrolled textareas\n  // essentially forces the textarea into an (interally) controlled mode if autogrow is true\n  const textAreaRef = propsTextAreaRef || useRef(null)\n\n  useEffect(() => {\n    if (!autogrow) return\n\n    const scrollHeight = textAreaRef.current!.scrollHeight\n    if (scrollHeight < 1) return\n\n    const borderWidth = textAreaRef.current\n      ? parseInt(getComputedStyle(textAreaRef.current).borderTopWidth, 10)\n      : 0\n    const newHeight = scrollHeight + borderWidth * 2\n    setParentHeight(`${newHeight}px`)\n    setTextAreaHeight(`${newHeight}px`)\n  }, [internalValue])\n\n  const onChange = !autogrow\n    ? undefined\n    : (event: React.ChangeEvent<HTMLTextAreaElement>): void => {\n        setTextAreaHeight(\"auto\")\n        // ^ this is required to avoid the textarea height from building up indefinitely\n        // see https://medium.com/@lucasalgus/creating-a-custom-auto-resize-textarea-component-for-your-react-web-application-6959c0ad68bc#2dee\n\n        setInternalValue(event.target.value)\n        if (propsOnChange) {\n          propsOnChange(event)\n        }\n      }\n\n  const getWrapperStyle = (): { minHeight: string } | undefined =>\n    autogrow ? { minHeight: parentHeight } : undefined\n\n  const getTextAreaStyle = (): { height: string } | undefined =>\n    autogrow ? { height: textAreaHeight } : undefined\n\n  const controlledValue = value || internalValue\n\n  return (\n    <div className={styles.wrapper} style={getWrapperStyle()}>\n      <textarea\n        className={classnames(\n          styles.textarea,\n          styles[status],\n          reversed ? styles.reversed : styles.default,\n          disabled && styles.disabled\n        )}\n        rows={rows}\n        onChange={onChange || propsOnChange}\n        value={controlledValue}\n        defaultValue={controlledValue ? undefined : defaultValue}\n        // ^ React throws a warning if you specify both a value and a defaultValue\n        ref={textAreaRef}\n        style={getTextAreaStyle()}\n        disabled={disabled}\n        {...restProps}\n      />\n\n      {/* Textareas aren't able to have pseudo elements like ::after on them,\n          so we have to create an element ourselves for the focus ring */}\n      <div className={styles.focusRing} />\n    </div>\n  )\n}\n\nTextArea.displayName = \"TextArea\"\n"],"names":["TextArea","_a","propsTextAreaRef","_b","status","_c","autogrow","_d","reversed","_e","rows","defaultValue","value","disabled","propsOnChange","restProps","__rest","_f","useState","textAreaHeight","setTextAreaHeight","_g","parentHeight","setParentHeight","_h","undefined","internalValue","setInternalValue","textAreaRef","useRef","useEffect","scrollHeight","current","borderWidth","parseInt","getComputedStyle","borderTopWidth","newHeight","concat","onChange","event","target","getWrapperStyle","minHeight","getTextAreaStyle","height","controlledValue","React","createElement","className","styles","wrapper","style","__assign","classnames","textarea","ref","focusRing","displayName"],"mappings":"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"}
+{"version":3,"file":"TextArea.mjs","sources":["../../../src/TextArea/TextArea.tsx"],"sourcesContent":["import React, {\n  TextareaHTMLAttributes,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./TextArea.module.scss\"\n\nexport type TextAreaProps = {\n  textAreaRef?: React.RefObject<HTMLTextAreaElement>\n  status?: \"default\" | \"error\" | \"caution\"\n  autogrow?: boolean\n  reversed?: boolean\n} & OverrideClassName<TextareaHTMLAttributes<HTMLTextAreaElement>>\n\nexport const TextArea = ({\n  textAreaRef: propsTextAreaRef,\n  status = \"default\",\n  autogrow = false,\n  reversed = false,\n  rows = 3,\n  defaultValue,\n  value,\n  disabled,\n  onChange: propsOnChange,\n  ...restProps\n}: TextAreaProps): JSX.Element => {\n  const [textAreaHeight, setTextAreaHeight] = useState<string>(\"auto\")\n  const [parentHeight, setParentHeight] = useState<string>(\"auto\")\n  const [internalValue, setInternalValue] = useState<\n    string | number | readonly string[] | undefined\n  >(autogrow ? defaultValue : undefined)\n  // ^ holds an internal state of the value so that autogrow can still work with uncontrolled textareas\n  // essentially forces the textarea into an (interally) controlled mode if autogrow is true\n  const textAreaRef = propsTextAreaRef || useRef(null)\n\n  useEffect(() => {\n    if (!autogrow) return\n\n    const scrollHeight = textAreaRef.current!.scrollHeight\n    if (scrollHeight < 1) return\n\n    const borderWidth = textAreaRef.current\n      ? parseInt(getComputedStyle(textAreaRef.current).borderTopWidth, 10)\n      : 0\n    const newHeight = scrollHeight + borderWidth * 2\n    setParentHeight(`${newHeight}px`)\n    setTextAreaHeight(`${newHeight}px`)\n  }, [internalValue])\n\n  const onChange = !autogrow\n    ? undefined\n    : (event: React.ChangeEvent<HTMLTextAreaElement>): void => {\n        setTextAreaHeight(\"auto\")\n        // ^ this is required to avoid the textarea height from building up indefinitely\n        // see https://medium.com/@lucasalgus/creating-a-custom-auto-resize-textarea-component-for-your-react-web-application-6959c0ad68bc#2dee\n\n        setInternalValue(event.target.value)\n        if (propsOnChange) {\n          propsOnChange(event)\n        }\n      }\n\n  const getWrapperStyle = (): { minHeight: string } | undefined =>\n    autogrow ? { minHeight: parentHeight } : undefined\n\n  const getTextAreaStyle = (): { height: string } | undefined =>\n    autogrow ? { height: textAreaHeight } : undefined\n\n  const controlledValue = value || internalValue\n\n  return (\n    <div className={styles.wrapper} style={getWrapperStyle()}>\n      <textarea\n        className={classnames(\n          styles.textarea,\n          styles[status],\n          reversed ? styles.reversed : styles.default,\n          disabled && styles.disabled\n        )}\n        rows={rows}\n        onChange={onChange || propsOnChange}\n        value={controlledValue}\n        defaultValue={controlledValue ? undefined : defaultValue}\n        // ^ React throws a warning if you specify both a value and a defaultValue\n        ref={textAreaRef}\n        style={getTextAreaStyle()}\n        disabled={disabled}\n        {...restProps}\n      />\n\n      {/* Textareas aren't able to have pseudo elements like ::after on them,\n          so we have to create an element ourselves for the focus ring */}\n      <div className={styles.focusRing} />\n    </div>\n  )\n}\n\nTextArea.displayName = \"TextArea\"\n"],"names":["TextArea","_a","propsTextAreaRef","_b","status","_c","autogrow","_d","reversed","_e","rows","defaultValue","value","disabled","propsOnChange","restProps","__rest","_f","useState","textAreaHeight","setTextAreaHeight","_g","parentHeight","setParentHeight","_h","undefined","internalValue","setInternalValue","textAreaRef","useRef","useEffect","scrollHeight","current","borderWidth","parseInt","getComputedStyle","borderTopWidth","newHeight","concat","onChange","event","target","getWrapperStyle","minHeight","getTextAreaStyle","height","controlledValue","React","createElement","className","styles","wrapper","style","__assign","classnames","textarea","default","ref","focusRing","displayName"],"mappings":"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"}

package/dist/esm/TextAreaField/TextAreaField.mjs

@@ -68,13 +68,13 @@ const TextAreaField = /*#__PURE__*/function () {
       status: status,
       disabled: disabled,
       "aria-describedby": ariaDescribedBy
-    }, restProps)), !disabled && validationMessage && /*#__PURE__*/React.createElement(FieldMessage, {
+    }, restProps)), !disabled && validationMessage && ( /*#__PURE__*/React.createElement(FieldMessage, {
       id: validationMessageAria,
       "data-testid": validationMessageAria,
       message: validationMessage,
       status: status,
       reversed: reversed
-    }), !renderDescriptionOnTop && renderDescription("bottom"));
+    })), !renderDescriptionOnTop && renderDescription("bottom"));
   };
   TextAreaField.displayName = "TextAreaField";
   return TextAreaField;

package/dist/esm/TextAreaField/TextAreaField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextAreaField.mjs","sources":["../../../src/TextAreaField/TextAreaField.tsx"],"sourcesContent":["import React, { useId } from \"react\"\nimport classnames from \"classnames\"\nimport { FieldGroup } from \"~components/FieldGroup\"\nimport { FieldMessage } from \"~components/FieldMessage\"\nimport { Label } from \"~components/Label\"\nimport { TextArea, TextAreaProps } from \"~components/TextArea\"\nimport styles from \"./TextAreaField.module.scss\"\n\nexport type TextAreaFieldProps = {\n  labelText: string | React.ReactNode\n  inline?: boolean\n  validationMessage?: string | React.ReactNode\n  description?: string | React.ReactNode\n  variant?: \"default\" | \"prominent\"\n} & TextAreaProps\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081895966/Text+Area+Field Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-text-area-field--docs Storybook}\n */\nexport const TextAreaField = ({\n  labelText,\n  inline = false,\n  validationMessage,\n  description,\n  variant = \"default\",\n  id: propsId,\n  reversed = false,\n  status = \"default\",\n  disabled,\n  ...restProps\n}: TextAreaFieldProps): JSX.Element => {\n  const id = propsId ?? useId()\n\n  const validationMessageAria = validationMessage\n    ? `${id}-field-validation-message`\n    : \"\"\n  const descriptionAria = description ? `${id}-field-message` : \"\"\n  const ariaDescribedBy = [validationMessageAria, descriptionAria].reduce(\n    (prev, curr) => (curr ? [curr, prev].join(\" \") : prev),\n    \"\"\n  )\n\n  const renderDescriptionOnTop = variant === \"prominent\"\n  const renderDescription = (\n    position: \"top\" | \"bottom\"\n  ): JSX.Element | null => {\n    if (!description) return null\n    return (\n      <div className={classnames(styles.message, disabled && styles.disabled)}>\n        <FieldMessage\n          id={descriptionAria}\n          data-testid={`${id}-field-description`}\n          message={description}\n          reversed={reversed}\n          position={position}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <FieldGroup\n      id={`${id}-field-group`}\n      inline={inline}\n      data-testid={`${id}-field-group`}\n      classNameOverride={disabled ? styles.disabled : undefined}\n    >\n      <div\n        className={classnames(\n          styles.textareaLabel,\n          variant === \"prominent\" && styles.textareaLabelProminent\n        )}\n      >\n        <Label\n          id={`${id}-field-label`}\n          data-testid={`${id}-field-label`}\n          htmlFor={`${id}-field-textarea`}\n          labelText={labelText}\n          reversed={reversed}\n          variant={variant}\n          disabled={disabled}\n        />\n      </div>\n      {renderDescriptionOnTop && renderDescription(\"top\")}\n      <TextArea\n        id={`${id}-field-textarea`}\n        data-testid={`${id}-field-textarea`}\n        reversed={reversed}\n        status={status}\n        disabled={disabled}\n        aria-describedby={ariaDescribedBy}\n        {...restProps}\n      />\n      {!disabled && validationMessage && (\n        <FieldMessage\n          id={validationMessageAria}\n          data-testid={validationMessageAria}\n          message={validationMessage}\n          status={status}\n          reversed={reversed}\n        />\n      )}\n      {!renderDescriptionOnTop && renderDescription(\"bottom\")}\n    </FieldGroup>\n  )\n}\n\nTextAreaField.displayName = \"TextAreaField\"\n"],"names":["TextAreaField","_a","labelText","_b","inline","validationMessage","description","_c","variant","propsId","id","_d","reversed","_e","status","disabled","restProps","__rest","useId","validationMessageAria","concat","descriptionAria","ariaDescribedBy","reduce","prev","curr","join","renderDescriptionOnTop","renderDescription","position","React","createElement","className","classnames","styles","message","FieldMessage","FieldGroup","classNameOverride","undefined","textareaLabel","textareaLabelProminent","Label","htmlFor","TextArea","__assign","displayName"],"mappings":"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"}
+{"version":3,"file":"TextAreaField.mjs","sources":["../../../src/TextAreaField/TextAreaField.tsx"],"sourcesContent":["import React, { useId } from \"react\"\nimport classnames from \"classnames\"\nimport { FieldGroup } from \"~components/FieldGroup\"\nimport { FieldMessage } from \"~components/FieldMessage\"\nimport { Label } from \"~components/Label\"\nimport { TextArea, TextAreaProps } from \"~components/TextArea\"\nimport styles from \"./TextAreaField.module.scss\"\n\nexport type TextAreaFieldProps = {\n  labelText: string | React.ReactNode\n  inline?: boolean\n  validationMessage?: string | React.ReactNode\n  description?: string | React.ReactNode\n  variant?: \"default\" | \"prominent\"\n} & TextAreaProps\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081895966/Text+Area+Field Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-text-area-field--docs Storybook}\n */\nexport const TextAreaField = ({\n  labelText,\n  inline = false,\n  validationMessage,\n  description,\n  variant = \"default\",\n  id: propsId,\n  reversed = false,\n  status = \"default\",\n  disabled,\n  ...restProps\n}: TextAreaFieldProps): JSX.Element => {\n  const id = propsId ?? useId()\n\n  const validationMessageAria = validationMessage\n    ? `${id}-field-validation-message`\n    : \"\"\n  const descriptionAria = description ? `${id}-field-message` : \"\"\n  const ariaDescribedBy = [validationMessageAria, descriptionAria].reduce(\n    (prev, curr) => (curr ? [curr, prev].join(\" \") : prev),\n    \"\"\n  )\n\n  const renderDescriptionOnTop = variant === \"prominent\"\n  const renderDescription = (\n    position: \"top\" | \"bottom\"\n  ): JSX.Element | null => {\n    if (!description) return null\n    return (\n      <div className={classnames(styles.message, disabled && styles.disabled)}>\n        <FieldMessage\n          id={descriptionAria}\n          data-testid={`${id}-field-description`}\n          message={description}\n          reversed={reversed}\n          position={position}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <FieldGroup\n      id={`${id}-field-group`}\n      inline={inline}\n      data-testid={`${id}-field-group`}\n      classNameOverride={disabled ? styles.disabled : undefined}\n    >\n      <div\n        className={classnames(\n          styles.textareaLabel,\n          variant === \"prominent\" && styles.textareaLabelProminent\n        )}\n      >\n        <Label\n          id={`${id}-field-label`}\n          data-testid={`${id}-field-label`}\n          htmlFor={`${id}-field-textarea`}\n          labelText={labelText}\n          reversed={reversed}\n          variant={variant}\n          disabled={disabled}\n        />\n      </div>\n      {renderDescriptionOnTop && renderDescription(\"top\")}\n      <TextArea\n        id={`${id}-field-textarea`}\n        data-testid={`${id}-field-textarea`}\n        reversed={reversed}\n        status={status}\n        disabled={disabled}\n        aria-describedby={ariaDescribedBy}\n        {...restProps}\n      />\n      {!disabled && validationMessage && (\n        <FieldMessage\n          id={validationMessageAria}\n          data-testid={validationMessageAria}\n          message={validationMessage}\n          status={status}\n          reversed={reversed}\n        />\n      )}\n      {!renderDescriptionOnTop && renderDescription(\"bottom\")}\n    </FieldGroup>\n  )\n}\n\nTextAreaField.displayName = \"TextAreaField\"\n"],"names":["TextAreaField","_a","labelText","_b","inline","validationMessage","description","_c","variant","propsId","id","_d","reversed","_e","status","disabled","restProps","__rest","useId","validationMessageAria","concat","descriptionAria","ariaDescribedBy","reduce","prev","curr","join","renderDescriptionOnTop","renderDescription","position","React","createElement","className","classnames","styles","message","FieldMessage","FieldGroup","classNameOverride","undefined","textareaLabel","textareaLabelProminent","Label","htmlFor","TextArea","__assign","displayName"],"mappings":"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"}

package/dist/esm/TextField/TextField.mjs

@@ -56,25 +56,25 @@ const TextField = /*#__PURE__*/function () {
       reversed: reversed,
       status: status,
       startIconAdornment: icon,
-      endIconAdornment: status === "success" && /*#__PURE__*/React.createElement("div", {
+      endIconAdornment: status === "success" && ( /*#__PURE__*/React.createElement("div", {
         className: classnames(styles.success, disabled && styles.disabled)
       }, /*#__PURE__*/React.createElement(SuccessIcon, {
         role: "presentation"
-      }))
-    }, restProps)), validationMessage && /*#__PURE__*/React.createElement("div", {
+      })))
+    }, restProps)), validationMessage && ( /*#__PURE__*/React.createElement("div", {
       className: classnames(styles.message, disabled && styles.disabled)
     }, /*#__PURE__*/React.createElement(FieldMessage, {
       id: validationMessageAria,
       message: validationMessage,
       status: status,
       reversed: reversed
-    })), description && /*#__PURE__*/React.createElement("div", {
+    }))), description && ( /*#__PURE__*/React.createElement("div", {
       className: classnames(styles.message, disabled && styles.disabled)
     }, /*#__PURE__*/React.createElement(FieldMessage, {
       id: descriptionAria,
       message: description,
       reversed: reversed
-    })));
+    }))));
   };
   TextField.displayName = "TextField";
   return TextField;

package/dist/esm/TextField/TextField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.mjs","sources":["../../../src/TextField/TextField.tsx"],"sourcesContent":["import React, { useId } from \"react\"\nimport classnames from \"classnames\"\nimport { FieldGroup } from \"~components/FieldGroup\"\nimport { FieldMessage } from \"~components/FieldMessage\"\nimport { SuccessIcon } from \"~components/Icon\"\nimport { Input, InputProps } from \"~components/Input\"\nimport { Label } from \"~components/Label\"\nimport styles from \"./TextField.module.scss\"\n\ntype OmittedInputProps =\n  | \"startIconAdornment\"\n  | \"endIconAdornment\"\n  | \"ariaDescribedBy\"\n  | \"ariaLabel\"\n\nexport type TextFieldProps = {\n  /**\n   * A short example of input text. For context or additional information use the `description` prop\n   */\n  labelText: React.ReactNode\n  inline?: boolean\n  icon?: JSX.Element\n  /**\n   * A descriptive message for `error` or `caution` states\n   */\n  validationMessage?: string | React.ReactNode\n  /**\n   * A description that provides context for the text field\n   */\n  description?: string | React.ReactNode\n} & Omit<InputProps, OmittedInputProps>\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081928705/Text+Field Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-text-field--docs Storybook}\n */\nexport const TextField = ({\n  id: propsId,\n  labelText,\n  inline = false,\n  icon,\n  validationMessage,\n  description,\n  status,\n  reversed = false,\n  disabled,\n  ...restProps\n}: TextFieldProps): JSX.Element => {\n  const id = propsId ?? useId()\n  const validationMessageAria = validationMessage\n    ? `${id}-field-validation-message`\n    : \"\"\n  const descriptionAria = description ? `${id}-field-description` : \"\"\n\n  const ariaDescribedBy = [validationMessageAria, descriptionAria].reduce(\n    (prev, curr) => (curr ? [curr, prev].join(\" \") : prev),\n    \"\"\n  )\n\n  return (\n    <FieldGroup\n      id={`${id}-field-group`}\n      data-testid={`${id}-field-group`}\n      inline={inline}\n      classNameOverride={classnames(\n        styles.withLabel,\n        disabled && styles.withDisabled\n      )}\n    >\n      <Label\n        id={`${id}-field-label`}\n        data-testid={`${id}-field-label`}\n        htmlFor={`${id}-field-input`}\n        labelText={labelText}\n        reversed={reversed}\n        disabled={disabled}\n      />\n      <Input\n        id={`${id}-field-input`}\n        data-testid={`${id}-field-input`}\n        aria-describedby={ariaDescribedBy}\n        classNameOverride={styles.input}\n        disabled={disabled}\n        reversed={reversed}\n        status={status}\n        startIconAdornment={icon}\n        endIconAdornment={\n          status === \"success\" && (\n            <div\n              className={classnames(\n                styles.success,\n                disabled && styles.disabled\n              )}\n            >\n              <SuccessIcon role=\"presentation\" />\n            </div>\n          )\n        }\n        {...restProps}\n      />\n\n      {validationMessage && (\n        <div\n          className={classnames(styles.message, disabled && styles.disabled)}\n        >\n          <FieldMessage\n            id={validationMessageAria}\n            message={validationMessage}\n            status={status}\n            reversed={reversed}\n          />\n        </div>\n      )}\n\n      {description && (\n        <div\n          className={classnames(styles.message, disabled && styles.disabled)}\n        >\n          <FieldMessage\n            id={descriptionAria}\n            message={description}\n            reversed={reversed}\n          />\n        </div>\n      )}\n    </FieldGroup>\n  )\n}\n\nTextField.displayName = \"TextField\"\n"],"names":["TextField","_a","propsId","id","labelText","_b","inline","icon","validationMessage","description","status","_c","reversed","disabled","restProps","__rest","useId","validationMessageAria","concat","descriptionAria","ariaDescribedBy","reduce","prev","curr","join","React","createElement","FieldGroup","classNameOverride","classnames","styles","withLabel","withDisabled","Label","htmlFor","Input","__assign","input","startIconAdornment","endIconAdornment","className","success","SuccessIcon","role","message","FieldMessage","displayName"],"mappings":"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"}
+{"version":3,"file":"TextField.mjs","sources":["../../../src/TextField/TextField.tsx"],"sourcesContent":["import React, { useId } from \"react\"\nimport classnames from \"classnames\"\nimport { FieldGroup } from \"~components/FieldGroup\"\nimport { FieldMessage } from \"~components/FieldMessage\"\nimport { SuccessIcon } from \"~components/Icon\"\nimport { Input, InputProps } from \"~components/Input\"\nimport { Label } from \"~components/Label\"\nimport styles from \"./TextField.module.scss\"\n\ntype OmittedInputProps =\n  | \"startIconAdornment\"\n  | \"endIconAdornment\"\n  | \"ariaDescribedBy\"\n  | \"ariaLabel\"\n\nexport type TextFieldProps = {\n  /**\n   * A short example of input text. For context or additional information use the `description` prop\n   */\n  labelText: React.ReactNode\n  inline?: boolean\n  icon?: JSX.Element\n  /**\n   * A descriptive message for `error` or `caution` states\n   */\n  validationMessage?: string | React.ReactNode\n  /**\n   * A description that provides context for the text field\n   */\n  description?: string | React.ReactNode\n} & Omit<InputProps, OmittedInputProps>\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081928705/Text+Field Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-text-field--docs Storybook}\n */\nexport const TextField = ({\n  id: propsId,\n  labelText,\n  inline = false,\n  icon,\n  validationMessage,\n  description,\n  status,\n  reversed = false,\n  disabled,\n  ...restProps\n}: TextFieldProps): JSX.Element => {\n  const id = propsId ?? useId()\n  const validationMessageAria = validationMessage\n    ? `${id}-field-validation-message`\n    : \"\"\n  const descriptionAria = description ? `${id}-field-description` : \"\"\n\n  const ariaDescribedBy = [validationMessageAria, descriptionAria].reduce(\n    (prev, curr) => (curr ? [curr, prev].join(\" \") : prev),\n    \"\"\n  )\n\n  return (\n    <FieldGroup\n      id={`${id}-field-group`}\n      data-testid={`${id}-field-group`}\n      inline={inline}\n      classNameOverride={classnames(\n        styles.withLabel,\n        disabled && styles.withDisabled\n      )}\n    >\n      <Label\n        id={`${id}-field-label`}\n        data-testid={`${id}-field-label`}\n        htmlFor={`${id}-field-input`}\n        labelText={labelText}\n        reversed={reversed}\n        disabled={disabled}\n      />\n      <Input\n        id={`${id}-field-input`}\n        data-testid={`${id}-field-input`}\n        aria-describedby={ariaDescribedBy}\n        classNameOverride={styles.input}\n        disabled={disabled}\n        reversed={reversed}\n        status={status}\n        startIconAdornment={icon}\n        endIconAdornment={\n          status === \"success\" && (\n            <div\n              className={classnames(\n                styles.success,\n                disabled && styles.disabled\n              )}\n            >\n              <SuccessIcon role=\"presentation\" />\n            </div>\n          )\n        }\n        {...restProps}\n      />\n\n      {validationMessage && (\n        <div\n          className={classnames(styles.message, disabled && styles.disabled)}\n        >\n          <FieldMessage\n            id={validationMessageAria}\n            message={validationMessage}\n            status={status}\n            reversed={reversed}\n          />\n        </div>\n      )}\n\n      {description && (\n        <div\n          className={classnames(styles.message, disabled && styles.disabled)}\n        >\n          <FieldMessage\n            id={descriptionAria}\n            message={description}\n            reversed={reversed}\n          />\n        </div>\n      )}\n    </FieldGroup>\n  )\n}\n\nTextField.displayName = \"TextField\"\n"],"names":["TextField","_a","propsId","id","labelText","_b","inline","icon","validationMessage","description","status","_c","reversed","disabled","restProps","__rest","useId","validationMessageAria","concat","descriptionAria","ariaDescribedBy","reduce","prev","curr","join","React","createElement","FieldGroup","classNameOverride","classnames","styles","withLabel","withDisabled","Label","htmlFor","Input","__assign","input","startIconAdornment","endIconAdornment","className","success","SuccessIcon","role","message","FieldMessage","displayName"],"mappings":"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"}

package/dist/esm/Tile/MultiActionTile/MultiActionTile.mjs

@@ -6,12 +6,12 @@ import styles from './MultiActionTile.module.scss.mjs';
 var renderActions = function (primaryAction, secondaryAction) {
   return /*#__PURE__*/React.createElement("div", {
     className: styles.actions
-  }, secondaryAction && /*#__PURE__*/React.createElement("div", {
+  }, secondaryAction && ( /*#__PURE__*/React.createElement("div", {
     className: "mr-8"
   }, /*#__PURE__*/React.createElement(Action, {
     action: secondaryAction,
     secondary: true
-  })), /*#__PURE__*/React.createElement(Action, {
+  }))), /*#__PURE__*/React.createElement(Action, {
     action: primaryAction
   }));
 };

package/dist/esm/Tile/MultiActionTile/MultiActionTile.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiActionTile.mjs","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,oBAChBC,KAAK,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAAC,SAAS,EAAEC,MAAM,CAACC;EAAO,CAAA,EAC3BL,eAAe,iBACdC,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,MAAA,CAAAH,EAAA,EAAA,CAAA,UAAA,EAAA,eAAA,EAAA,iBAAA,CAK/B,CADa;IAC2B,oBACvCT,KAAC,CAAAC,aAAA,CAAAY,WAAW;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;"}
+{"version":3,"file":"MultiActionTile.mjs","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,oBAChBC,KAAK,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAAC,SAAS,EAAEC,MAAM,CAACC;EAAO,CAAA,EAC3BL,eAAe,mBACdC,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,CACzC,CACP,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,MAAA,CAAAH,EAAA,EAAA,CAAA,UAAA,EAAA,eAAA,EAAA,iBAAA,CAK/B,CADa;IAC2B,oBACvCT,KAAC,CAAAC,aAAA,CAAAY,WAAW;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/esm/Tile/subcomponents/GenericTile/GenericTile.mjs

@@ -31,21 +31,21 @@ const GenericTile = /*#__PURE__*/function () {
       }, /*#__PURE__*/React.createElement(Heading, {
         variant: "heading-3",
         tag: titleTag
-      }, title), metadata && /*#__PURE__*/React.createElement("div", {
+      }, title), metadata && ( /*#__PURE__*/React.createElement("div", {
         className: "pt-4"
       }, /*#__PURE__*/React.createElement(Text, {
         variant: "small",
         color: "dark-reduced-opacity"
-      }, metadata)));
+      }, metadata))));
     };
     var renderActions = function (primaryAction, secondaryAction, disabled) {
       return /*#__PURE__*/React.createElement("div", {
         className: styles.actions
-      }, secondaryAction && /*#__PURE__*/React.createElement(Action, {
+      }, secondaryAction && ( /*#__PURE__*/React.createElement(Action, {
         action: secondaryAction,
         secondary: true,
         disabled: disabled
-      }), primaryAction && /*#__PURE__*/React.createElement(Action, {
+      })), primaryAction && /*#__PURE__*/React.createElement(Action, {
         action: primaryAction,
         disabled: disabled
       }));
@@ -53,7 +53,7 @@ const GenericTile = /*#__PURE__*/function () {
     var renderFront = function () {
       return /*#__PURE__*/React.createElement("div", {
         className: classnames(styles.face, styles.faceFront, mood === "positive" && styles.faceMoodPositive, mood === "informative" && styles.faceMoodInformative, mood === "cautionary" && styles.faceMoodCautionary, mood === "assertive" && styles.faceMoodAssertive, mood === "negative" && styles.faceMoodNegative, mood === "prominent" && styles.faceMoodProminent)
-      }, information && /*#__PURE__*/React.createElement("div", {
+      }, information && ( /*#__PURE__*/React.createElement("div", {
         className: styles.informationBtn
       }, /*#__PURE__*/React.createElement(IconButton, {
         label: "Information",
@@ -65,7 +65,7 @@ const GenericTile = /*#__PURE__*/function () {
         },
         disabled: isFlipped,
         "aria-hidden": isFlipped
-      })), renderTitle(), /*#__PURE__*/React.createElement("div", {
+      }))), renderTitle(), /*#__PURE__*/React.createElement("div", {
         className: styles.children
       }, children && children), footer && /*#__PURE__*/React.createElement("div", {
         className: styles.footer
@@ -75,9 +75,9 @@ const GenericTile = /*#__PURE__*/function () {
       if (informationProp && typeof informationProp === "object" && "text" in informationProp) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
           variant: "body"
-        }, informationProp.text), (informationProp.primaryAction || informationProp.secondaryAction) && /*#__PURE__*/React.createElement("div", {
+        }, informationProp.text), (informationProp.primaryAction || informationProp.secondaryAction) && ( /*#__PURE__*/React.createElement("div", {
           className: styles.footer
-        }, renderActions(informationProp.primaryAction, informationProp.secondaryAction, !isFlipped)));
+        }, renderActions(informationProp.primaryAction, informationProp.secondaryAction, !isFlipped))));
       }
       return informationProp;
     };

package/dist/esm/Tile/subcomponents/GenericTile/GenericTile.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GenericTile.mjs","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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"}
+{"version":3,"file":"GenericTile.mjs","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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"}

package/dist/esm/TimeField/TimeField.mjs

@@ -83,11 +83,11 @@ const TimeFieldComponent = /*#__PURE__*/function () {
       });
     }), /*#__PURE__*/React.createElement("div", {
       className: styles.focusRing
-    }))), validationMessage && status === "error" && /*#__PURE__*/React.createElement(FieldMessage, {
+    }))), validationMessage && status === "error" && ( /*#__PURE__*/React.createElement(FieldMessage, {
       id: descriptionId,
       message: validationMessage,
       status: status
-    }));
+    })));
   };
   TimeFieldComponent.displayName = "TimeFieldComponent";
   return TimeFieldComponent;

package/dist/esm/TimeField/TimeField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimeField.mjs","sources":["../../../src/TimeField/TimeField.tsx"],"sourcesContent":["import React, { useId } from \"react\"\nimport { Time } from \"@internationalized/date\"\nimport { useTimeField } from \"@react-aria/datepicker\"\nimport { I18nProvider } from \"@react-aria/i18n\"\nimport {\n  useTimeFieldState,\n  TimeFieldStateOptions,\n} from \"@react-stately/datepicker\"\nimport classnames from \"classnames\"\nimport { FieldMessage } from \"~components/FieldMessage\"\nimport { Heading } from \"~components/Heading\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { TimeSegment } from \"./subcomponents/TimeSegment\"\nimport { StatusType, TimeValue, ValueType } from \"./types\"\nimport styles from \"./TimeField.module.scss\"\n\ntype OmittedTimeFieldProps =\n  | \"errorMessage\"\n  | \"validationState\"\n  | \"value\"\n  | \"onChange\"\n  | \"label\"\n  | \"hideTimeZone\"\n\nexport type TimeFieldProps = {\n  id?: string\n  /**\n   * Field label.\n   */\n  label: string\n  /**\n   * Accepts any valid locale code (https://npm.io/package/locale-codes).\n   */\n  locale: string\n  onChange: (value: ValueType | null) => void\n  value: ValueType | null\n  status?: StatusType\n  validationMessage?: React.ReactNode\n} & OverrideClassName<Omit<TimeFieldStateOptions, OmittedTimeFieldProps>>\n\n// This needed to be placed directly below the props because\n// the prop descriptions wouldn't show in Storybook otherwise.\nexport const TimeField = (props: TimeFieldProps): JSX.Element => (\n  <I18nProvider locale={props.locale}>\n    <TimeFieldComponent {...props} />\n  </I18nProvider>\n)\n\nTimeField.displayName = \"TimeField\"\n\nconst TimeFieldComponent = ({\n  id: propsId,\n  label,\n  locale,\n  onChange,\n  value,\n  status = \"default\",\n  validationMessage,\n  isDisabled,\n  classNameOverride,\n  ...restProps\n}: TimeFieldProps): JSX.Element => {\n  const reactId = useId()\n  const id = propsId ?? reactId\n\n  const handleOnChange = (timeValue: TimeValue | null): void => {\n    if (timeValue === null) {\n      return onChange(null)\n    }\n    onChange({ hour: timeValue.hour, minutes: timeValue.minute })\n  }\n\n  const state = useTimeFieldState({\n    ...restProps,\n    value: value ? new Time(value.hour, value.minutes) : null,\n    onChange: handleOnChange,\n    isDisabled,\n    hideTimeZone: true,\n    locale,\n    validationState: status === \"default\" ? \"valid\" : \"invalid\",\n  })\n  const descriptionId = `${id}-field-message`\n\n  const inputRef = React.useRef(null)\n  const { fieldProps, labelProps } = useTimeField(\n    {\n      ...restProps,\n      label,\n      isDisabled,\n      \"aria-describedby\": descriptionId,\n    },\n    state,\n    inputRef\n  )\n  return (\n    <div className={classNameOverride}>\n      <Heading\n        tag=\"div\"\n        variant=\"heading-6\"\n        {...labelProps}\n        classNameOverride={classnames(\n          styles.heading,\n          state.isDisabled && styles.isDisabled\n        )}\n      >\n        {label}\n      </Heading>\n      <div className={styles.wrapper}>\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div\n          {...fieldProps}\n          id={id}\n          ref={inputRef}\n          className={classnames(\n            styles.input,\n            state.isDisabled && styles.isDisabled,\n            state.validationState === \"invalid\" && styles.error\n          )}\n        >\n          {state.segments.map((segment, i) => (\n            <TimeSegment key={i} segment={segment} state={state} />\n          ))}\n          <div className={styles.focusRing} />\n        </div>\n      </div>\n      {validationMessage && status === \"error\" && (\n        <FieldMessage\n          id={descriptionId}\n          message={validationMessage}\n          status={status}\n        />\n      )}\n    </div>\n  )\n}\n\nTimeFieldComponent.displayName = \"TimeFieldComponent\"\n"],"names":["TimeField","props","React","createElement","I18nProvider","locale","TimeFieldComponent","displayName","_a","propsId","id","label","onChange","value","_b","status","validationMessage","isDisabled","classNameOverride","restProps","__rest","reactId","useId","handleOnChange","timeValue","hour","minutes","minute","state","useTimeFieldState","__assign","Time","hideTimeZone","validationState","descriptionId","concat","inputRef","useRef","_c","useTimeField","fieldProps","labelProps","className","Heading","tag","variant","classnames","styles","heading","wrapper","ref","input","error","segments","map","segment","i","TimeSegment","key","focusRing","FieldMessage","message"],"mappings":"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"}
+{"version":3,"file":"TimeField.mjs","sources":["../../../src/TimeField/TimeField.tsx"],"sourcesContent":["import React, { useId } from \"react\"\nimport { Time } from \"@internationalized/date\"\nimport { useTimeField } from \"@react-aria/datepicker\"\nimport { I18nProvider } from \"@react-aria/i18n\"\nimport {\n  useTimeFieldState,\n  TimeFieldStateOptions,\n} from \"@react-stately/datepicker\"\nimport classnames from \"classnames\"\nimport { FieldMessage } from \"~components/FieldMessage\"\nimport { Heading } from \"~components/Heading\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { TimeSegment } from \"./subcomponents/TimeSegment\"\nimport { StatusType, TimeValue, ValueType } from \"./types\"\nimport styles from \"./TimeField.module.scss\"\n\ntype OmittedTimeFieldProps =\n  | \"errorMessage\"\n  | \"validationState\"\n  | \"value\"\n  | \"onChange\"\n  | \"label\"\n  | \"hideTimeZone\"\n\nexport type TimeFieldProps = {\n  id?: string\n  /**\n   * Field label.\n   */\n  label: string\n  /**\n   * Accepts any valid locale code (https://npm.io/package/locale-codes).\n   */\n  locale: string\n  onChange: (value: ValueType | null) => void\n  value: ValueType | null\n  status?: StatusType\n  validationMessage?: React.ReactNode\n} & OverrideClassName<Omit<TimeFieldStateOptions, OmittedTimeFieldProps>>\n\n// This needed to be placed directly below the props because\n// the prop descriptions wouldn't show in Storybook otherwise.\nexport const TimeField = (props: TimeFieldProps): JSX.Element => (\n  <I18nProvider locale={props.locale}>\n    <TimeFieldComponent {...props} />\n  </I18nProvider>\n)\n\nTimeField.displayName = \"TimeField\"\n\nconst TimeFieldComponent = ({\n  id: propsId,\n  label,\n  locale,\n  onChange,\n  value,\n  status = \"default\",\n  validationMessage,\n  isDisabled,\n  classNameOverride,\n  ...restProps\n}: TimeFieldProps): JSX.Element => {\n  const reactId = useId()\n  const id = propsId ?? reactId\n\n  const handleOnChange = (timeValue: TimeValue | null): void => {\n    if (timeValue === null) {\n      return onChange(null)\n    }\n    onChange({ hour: timeValue.hour, minutes: timeValue.minute })\n  }\n\n  const state = useTimeFieldState({\n    ...restProps,\n    value: value ? new Time(value.hour, value.minutes) : null,\n    onChange: handleOnChange,\n    isDisabled,\n    hideTimeZone: true,\n    locale,\n    validationState: status === \"default\" ? \"valid\" : \"invalid\",\n  })\n  const descriptionId = `${id}-field-message`\n\n  const inputRef = React.useRef(null)\n  const { fieldProps, labelProps } = useTimeField(\n    {\n      ...restProps,\n      label,\n      isDisabled,\n      \"aria-describedby\": descriptionId,\n    },\n    state,\n    inputRef\n  )\n  return (\n    <div className={classNameOverride}>\n      <Heading\n        tag=\"div\"\n        variant=\"heading-6\"\n        {...labelProps}\n        classNameOverride={classnames(\n          styles.heading,\n          state.isDisabled && styles.isDisabled\n        )}\n      >\n        {label}\n      </Heading>\n      <div className={styles.wrapper}>\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div\n          {...fieldProps}\n          id={id}\n          ref={inputRef}\n          className={classnames(\n            styles.input,\n            state.isDisabled && styles.isDisabled,\n            state.validationState === \"invalid\" && styles.error\n          )}\n        >\n          {state.segments.map((segment, i) => (\n            <TimeSegment key={i} segment={segment} state={state} />\n          ))}\n          <div className={styles.focusRing} />\n        </div>\n      </div>\n      {validationMessage && status === \"error\" && (\n        <FieldMessage\n          id={descriptionId}\n          message={validationMessage}\n          status={status}\n        />\n      )}\n    </div>\n  )\n}\n\nTimeFieldComponent.displayName = \"TimeFieldComponent\"\n"],"names":["TimeField","props","React","createElement","I18nProvider","locale","TimeFieldComponent","displayName","_a","propsId","id","label","onChange","value","_b","status","validationMessage","isDisabled","classNameOverride","restProps","__rest","reactId","useId","handleOnChange","timeValue","hour","minutes","minute","state","useTimeFieldState","__assign","Time","hideTimeZone","validationState","descriptionId","concat","inputRef","useRef","_c","useTimeField","fieldProps","labelProps","className","Heading","tag","variant","classnames","styles","heading","wrapper","ref","input","error","segments","map","segment","i","TimeSegment","key","focusRing","FieldMessage","message"],"mappings":"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"}