@helsenorge/designsystem-react 9.4.0 → 9.4.3

package/Expander.js

@@ -1,109 +1,128 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { useRef as C } from "react";
-import d from "classnames";
-import { ZIndex as O, AnalyticsId as b, IconSize as c } from "./constants.js";
-import { useExpand as U } from "./hooks/useExpand.js";
-import { useHover as Z } from "./hooks/useHover.js";
-import { useSticky as q } from "./hooks/useSticky.js";
-import { B as F } from "./Button.js";
-import { I as x } from "./Icon.js";
-import z from "./components/Icons/ChevronDown.js";
-import E from "./components/Icons/ChevronUp.js";
-import { L as G } from "./LazyIcon.js";
-import e from "./components/Expander/styles.module.scss";
-var J = /* @__PURE__ */ ((s) => (s.small = "small", s.large = "large", s))(J || {});
-const de = (s) => {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import classNames from "classnames";
+import { ZIndex, AnalyticsId, IconSize } from "./constants.js";
+import { useExpand } from "./hooks/useExpand.js";
+import { useHover } from "./hooks/useHover.js";
+import { useSize } from "./hooks/useSize.js";
+import { B as Button } from "./Button.js";
+import { I as Icon } from "./Icon.js";
+import ChevronDown from "./components/Icons/ChevronDown.js";
+import ChevronUp from "./components/Icons/ChevronUp.js";
+import { L as LazyIcon } from "./LazyIcon.js";
+import styles from "./components/Expander/styles.module.scss";
+var ExpanderSize = /* @__PURE__ */ ((ExpanderSize2) => {
+  ExpanderSize2["small"] = "small";
+  ExpanderSize2["large"] = "large";
+  return ExpanderSize2;
+})(ExpanderSize || {});
+const Expander = (props) => {
   const {
-    title: _,
-    children: k,
-    size: n = "small",
-    color: g,
-    contentClassNames: $,
-    svgIcon: a,
-    expanded: S = !1,
-    noNestedLine: w = !1,
-    sticky: L = !1,
-    testId: f,
-    onExpand: W,
-    renderChildrenWhenClosed: X = !1,
-    zIndex: B = O.ExpanderTrigger
-  } = s, [r, u] = U(S, W), v = C(null), i = C(null), { isHovered: l } = Z(i), { isOutsideWindow: H, isLeavingWindow: h, offsetHeight: y, contentWidth: I } = q(v, i), o = L && r && H, N = (p) => /* @__PURE__ */ t("span", { className: d(e.expander__icon, e[`expander__icon--${p}`]), children: /* @__PURE__ */ t(x, { svgIcon: r ? E : z, size: c.XSmall, isHovered: l }) }), R = d(
-    e.expander__trigger,
-    n === "large" && e[`expander__trigger--${n}`],
-    n === "large" && e[`expander__trigger--${g || "neutral"}`],
-    n === "large" && a && e["expander__trigger--icon"],
-    r && e["expander__trigger--expanded"],
-    o && !h && e["expander__trigger--sticky"]
-  ), T = () => /* @__PURE__ */ m(
+    title,
+    children,
+    size = "small",
+    color,
+    contentClassNames,
+    svgIcon: icon,
+    expanded = false,
+    noNestedLine = false,
+    sticky = false,
+    testId,
+    onExpand,
+    renderChildrenWhenClosed = false,
+    zIndex = ZIndex.ExpanderTrigger
+  } = props;
+  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);
+  const expanderRef = useRef(null);
+  const triggerRef = useRef(null);
+  const { isHovered } = useHover(triggerRef);
+  const contentSize = useSize(expanderRef);
+  const triggerSize = useSize(triggerRef);
+  const isSticky = sticky && isExpanded;
+  const renderChevron = (align) => /* @__PURE__ */ jsx("span", { className: classNames(styles["expander__icon"], styles[`expander__icon--${align}`]), children: /* @__PURE__ */ jsx(Icon, { svgIcon: isExpanded ? ChevronUp : ChevronDown, size: IconSize.XSmall, isHovered }) });
+  const triggerClassName = classNames(
+    styles["expander__trigger"],
+    size === "large" && styles[`expander__trigger--${size}`],
+    size === "large" && styles[`expander__trigger--${color || "neutral"}`],
+    size === "large" && icon && styles["expander__trigger--icon"],
+    isExpanded && styles["expander__trigger--expanded"],
+    isSticky && styles["expander__trigger--sticky"]
+  );
+  const renderTrigger = () => /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
-      className: R,
+      className: triggerClassName,
       style: {
-        zIndex: l || o ? B : void 0,
-        width: o && I ? `${I}px` : void 0
+        zIndex: isHovered || isSticky ? zIndex : void 0,
+        width: isSticky && (contentSize == null ? void 0 : contentSize.width) ? `${contentSize.width}px` : void 0
       },
-      "aria-expanded": r,
-      ref: i,
-      onClick: () => u(!r),
-      "data-testid": f,
-      "data-analyticsid": b.Expander,
+      "aria-expanded": isExpanded,
+      ref: triggerRef,
+      onClick: () => setIsExpanded(!isExpanded),
+      "data-testid": testId,
+      "data-analyticsid": AnalyticsId.Expander,
       children: [
-        n === "small" && N("left"),
-        a && /* @__PURE__ */ t("span", { className: d(e.expander__icon, e["expander__icon--left"]), children: typeof a == "string" ? /* @__PURE__ */ t(G, { iconName: a, size: c.XSmall, isHovered: l }) : /* @__PURE__ */ t(x, { svgIcon: a, size: c.XSmall, isHovered: l }) }),
-        _,
-        n === "large" && N("right")
+        size === "small" && renderChevron("left"),
+        icon && /* @__PURE__ */ jsx("span", { className: classNames(styles["expander__icon"], styles["expander__icon--left"]), children: typeof icon === "string" ? /* @__PURE__ */ jsx(LazyIcon, { iconName: icon, size: IconSize.XSmall, isHovered }) : /* @__PURE__ */ jsx(Icon, { svgIcon: icon, size: IconSize.XSmall, isHovered }) }),
+        title,
+        size === "large" && renderChevron("right")
       ]
     }
-  ), j = d(
-    e.expander__button,
-    r && e["expander__button--expanded"],
-    o && !h && e["expander__button--sticky"]
-  ), A = () => /* @__PURE__ */ m(
-    F,
+  );
+  const buttonClassName = classNames(styles["expander__button"], isExpanded && styles["expander__button--expanded"]);
+  const renderButton = () => /* @__PURE__ */ jsx(
+    "div",
     {
-      variant: "borderless",
-      textClassName: e.expander__button__text,
-      className: j,
-      "aria-expanded": r,
-      ref: i,
-      onClick: () => u(!r),
-      testId: f,
-      "data-analyticsid": b.Expander,
-      children: [
-        /* @__PURE__ */ t(x, { svgIcon: r ? E : z, size: c.XSmall }),
-        _
-      ]
+      style: {
+        width: isSticky && (triggerSize == null ? void 0 : triggerSize.width) ? `${triggerSize == null ? void 0 : triggerSize.width}px` : void 0,
+        height: isSticky && (triggerSize == null ? void 0 : triggerSize.height) ? `${triggerSize == null ? void 0 : triggerSize.height}px` : void 0
+      },
+      className: classNames({
+        [styles["expander__button-container--sticky"]]: isSticky
+      }),
+      children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "borderless",
+          textClassName: styles["expander__button__text"],
+          className: buttonClassName,
+          "aria-expanded": isExpanded,
+          ref: triggerRef,
+          onClick: () => setIsExpanded(!isExpanded),
+          testId,
+          "data-analyticsid": AnalyticsId.Expander,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { svgIcon: isExpanded ? ChevronUp : ChevronDown, size: IconSize.XSmall }),
+            title
+          ]
+        }
+      )
     }
-  ), D = () => {
-    if (!X && !r)
+  );
+  const renderContent = () => {
+    if (!renderChildrenWhenClosed && !isExpanded) {
       return null;
-    const p = d(
-      e.expander__content,
-      e[`expander__content--${n}`],
-      n === "large" && e[`expander__content--${g || "neutral"}`],
-      n === "large" && a && e["expander__content--icon"],
-      r && e["expander__content--expanded"],
-      n === "small" && !w && e["expander__content--nested-line"],
-      $
+    }
+    const contentClassName = classNames(
+      styles["expander__content"],
+      styles[`expander__content--${size}`],
+      size === "large" && styles[`expander__content--${color || "neutral"}`],
+      size === "large" && icon && styles["expander__content--icon"],
+      isExpanded && styles["expander__content--expanded"],
+      size === "small" && !noNestedLine && styles["expander__content--nested-line"],
+      { [styles["expander__content--sticky"]]: isSticky },
+      contentClassNames
     );
-    return /* @__PURE__ */ t("div", { className: p, children: k });
+    return /* @__PURE__ */ jsx("div", { className: contentClassName, children });
   };
-  return /* @__PURE__ */ m(
-    "div",
-    {
-      className: e.expander,
-      ref: v,
-      style: { paddingTop: o && y ? `${y}px` : void 0 },
-      children: [
-        n === "large" ? T() : A(),
-        D()
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: styles["expander"], ref: expanderRef, children: [
+    size === "large" ? renderTrigger() : renderButton(),
+    renderContent()
+  ] });
 };
 export {
-  de as E,
-  J as a
+  Expander as E,
+  ExpanderSize as a
 };
 //# sourceMappingURL=Expander.js.map

package/Expander.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.js","sources":["../src/components/Expander/Expander.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useSticky } from '../../hooks/useSticky';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\nexport interface ExpanderProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets classnames on the content area */\n  contentClassNames?: string;\n  /** Sets the size of the expander. Default: ExpanderSize.small */\n  size?: ExpanderSize;\n  /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n  color?: ExpanderColors;\n  /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n  svgIcon?: SvgIcon | IconName;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n  noNestedLine?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n  const {\n    title,\n    children,\n    size = ExpanderSize.small,\n    color,\n    contentClassNames,\n    svgIcon: icon,\n    expanded = false,\n    noNestedLine = false,\n    sticky = false,\n    testId,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    zIndex = ZIndex.ExpanderTrigger,\n  } = props;\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n  const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n\n  const renderChevron = (align: 'left' | 'right'): React.ReactNode => (\n    <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n    </span>\n  );\n\n  const triggerClassName = classNames(\n    styles['expander__trigger'],\n    size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n    size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n    size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n    isExpanded && styles['expander__trigger--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__trigger--sticky']\n  );\n\n  const renderTrigger = (): React.ReactNode => (\n    <button\n      type=\"button\"\n      className={triggerClassName}\n      style={{\n        zIndex: isHovered || isSticky ? zIndex : undefined,\n        width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n      }}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={(): void => setIsExpanded(!isExpanded)}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      {size === ExpanderSize.small && renderChevron('left')}\n      {icon && (\n        <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n          {typeof icon === 'string' ? (\n            <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          ) : (\n            <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          )}\n        </span>\n      )}\n      {title}\n      {size === ExpanderSize.large && renderChevron('right')}\n    </button>\n  );\n\n  const buttonClassName = classNames(\n    styles['expander__button'],\n    isExpanded && styles['expander__button--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__button--sticky']\n  );\n\n  const renderButton = (): React.ReactNode => (\n    <Button\n      variant=\"borderless\"\n      textClassName={styles['expander__button__text']}\n      className={buttonClassName}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={(): void => setIsExpanded(!isExpanded)}\n      testId={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      {title}\n    </Button>\n  );\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const contentClassName = classNames(\n      styles['expander__content'],\n      styles[`expander__content--${size}`],\n      size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n      size === ExpanderSize.large && icon && styles['expander__content--icon'],\n      isExpanded && styles['expander__content--expanded'],\n      size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line'],\n      contentClassNames\n    );\n\n    return <div className={contentClassName}>{children}</div>;\n  };\n\n  return (\n    <div\n      className={styles['expander']}\n      ref={expanderRef}\n      style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n    >\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n"],"names":["ExpanderSize","Expander","props","title","children","size","color","contentClassNames","icon","expanded","noNestedLine","sticky","testId","onExpand","renderChildrenWhenClosed","zIndex","ZIndex","isExpanded","setIsExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","renderChevron","align","jsx","classNames","styles","Icon","ChevronUp","ChevronDown","IconSize","triggerClassName","renderTrigger","jsxs","AnalyticsId","LazyIcon","buttonClassName","renderButton","Button","renderContent","contentClassName"],"mappings":"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"}
+{"version":3,"file":"Expander.js","sources":["../src/components/Expander/Expander.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useSize } from '../../hooks/useSize';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\nexport interface ExpanderProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets classnames on the content area */\n  contentClassNames?: string;\n  /** Sets the size of the expander. Default: ExpanderSize.small */\n  size?: ExpanderSize;\n  /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n  color?: ExpanderColors;\n  /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n  svgIcon?: SvgIcon | IconName;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n  noNestedLine?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n  const {\n    title,\n    children,\n    size = ExpanderSize.small,\n    color,\n    contentClassNames,\n    svgIcon: icon,\n    expanded = false,\n    noNestedLine = false,\n    sticky = false,\n    testId,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    zIndex = ZIndex.ExpanderTrigger,\n  } = props;\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n  const contentSize = useSize(expanderRef);\n  const triggerSize = useSize(triggerRef);\n\n  const isSticky = sticky && isExpanded;\n\n  const renderChevron = (align: 'left' | 'right'): React.ReactNode => (\n    <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n    </span>\n  );\n\n  const triggerClassName = classNames(\n    styles['expander__trigger'],\n    size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n    size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n    size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n    isExpanded && styles['expander__trigger--expanded'],\n    isSticky && styles['expander__trigger--sticky']\n  );\n\n  const renderTrigger = (): React.ReactNode => (\n    <button\n      type=\"button\"\n      className={triggerClassName}\n      style={{\n        zIndex: isHovered || isSticky ? zIndex : undefined,\n        width: isSticky && contentSize?.width ? `${contentSize.width}px` : undefined,\n      }}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={(): void => setIsExpanded(!isExpanded)}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      {size === ExpanderSize.small && renderChevron('left')}\n      {icon && (\n        <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n          {typeof icon === 'string' ? (\n            <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          ) : (\n            <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          )}\n        </span>\n      )}\n      {title}\n      {size === ExpanderSize.large && renderChevron('right')}\n    </button>\n  );\n\n  const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  const renderButton = (): React.ReactNode => (\n    <div\n      style={{\n        width: isSticky && triggerSize?.width ? `${triggerSize?.width}px` : undefined,\n        height: isSticky && triggerSize?.height ? `${triggerSize?.height}px` : undefined,\n      }}\n      className={classNames({\n        [styles['expander__button-container--sticky']]: isSticky,\n      })}\n    >\n      <Button\n        variant=\"borderless\"\n        textClassName={styles['expander__button__text']}\n        className={buttonClassName}\n        aria-expanded={isExpanded}\n        ref={triggerRef}\n        onClick={(): void => setIsExpanded(!isExpanded)}\n        testId={testId}\n        data-analyticsid={AnalyticsId.Expander}\n      >\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n        {title}\n      </Button>\n    </div>\n  );\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const contentClassName = classNames(\n      styles['expander__content'],\n      styles[`expander__content--${size}`],\n      size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n      size === ExpanderSize.large && icon && styles['expander__content--icon'],\n      isExpanded && styles['expander__content--expanded'],\n      size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line'],\n      { [styles['expander__content--sticky']]: isSticky },\n      contentClassNames\n    );\n\n    return <div className={contentClassName}>{children}</div>;\n  };\n\n  return (\n    <div className={styles['expander']} ref={expanderRef}>\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n"],"names":["ExpanderSize"],"mappings":"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"}

package/FormGroup.js

@@ -1,120 +1,133 @@
-import { jsxs as p, jsx as d } from "react/jsx-runtime";
-import t, { useState as A } from "react";
-import f from "classnames";
-import { FormOnColor as E, FormSize as k, AnalyticsId as D } from "./constants.js";
-import { useUuid as F } from "./hooks/useUuid.js";
-import { isComponent as s } from "./utils/component.js";
-import { C as H } from "./Checkbox.js";
-import { E as O } from "./ErrorWrapper.js";
-import { F as q } from "./FormLayout.js";
-import { I as J } from "./Input.js";
-import { R as K, g as P } from "./RadioButton.js";
-import { S as Q } from "./Select.js";
-import { S as V } from "./Slider.js";
-import { T as X } from "./Textarea.js";
-import { T as Y } from "./Title.js";
-import i from "./components/FormGroup/styles.module.scss";
-const G = t.forwardRef((r, R) => {
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState } from "react";
+import classNames from "classnames";
+import { FormOnColor, FormSize, AnalyticsId } from "./constants.js";
+import { useUuid } from "./hooks/useUuid.js";
+import { isComponent } from "./utils/component.js";
+import { C as Checkbox } from "./Checkbox.js";
+import { E as ErrorWrapper } from "./ErrorWrapper.js";
+import { F as FormLayout } from "./FormLayout.js";
+import { I as Input } from "./Input.js";
+import { R as RadioButton, g as getRadioLabelClasses } from "./RadioButton.js";
+import { S as Select } from "./Select.js";
+import { S as Slider } from "./Slider.js";
+import { T as Textarea } from "./Textarea.js";
+import { T as Title } from "./Title.js";
+import formGroupStyles from "./components/FormGroup/styles.module.scss";
+const FormGroup = React.forwardRef((props, ref) => {
   const {
-    className: S,
-    fieldsetClassName: y,
-    onColor: n = E.onwhite,
-    size: m = k.medium,
-    error: o,
-    errorTextId: _,
-    name: l,
-    htmlMarkup: c = "fieldset",
-    renderError: b = !0,
-    errorWrapperClassName: w,
-    errorWrapperTestId: W
-  } = r, [v, L] = A(), j = F(), a = F(_), I = n === E.ondark, z = m === k.large, B = f(i["form-group-wrapper"], S), M = f({
-    [i["form-group-wrapper__title--on-dark"]]: I && !o
-  }), g = f(i["field-set__legend"], {
-    [i["field-set__legend--on-dark"]]: I && !o
-  }), C = f(i["field-set"], y), u = (e, U) => {
-    if (s(e, q))
-      return t.cloneElement(e, {
-        size: m,
-        mapHelper: u
+    className,
+    fieldsetClassName,
+    onColor = FormOnColor.onwhite,
+    size = FormSize.medium,
+    error,
+    errorTextId,
+    name,
+    htmlMarkup = "fieldset",
+    renderError = true,
+    errorWrapperClassName,
+    errorWrapperTestId
+  } = props;
+  const [checkedRadioId, setCheckedRadioId] = useState();
+  const radioGroupId = useUuid();
+  const errorTextUuid = useUuid(errorTextId);
+  const onDark = onColor === FormOnColor.ondark;
+  const isLarge = size === FormSize.large;
+  const formGroupWrapperClasses = classNames(formGroupStyles["form-group-wrapper"], className);
+  const titleClasses = classNames({
+    [formGroupStyles["form-group-wrapper__title--on-dark"]]: onDark && !error
+  });
+  const legendClasses = classNames(formGroupStyles["field-set__legend"], {
+    [formGroupStyles["field-set__legend--on-dark"]]: onDark && !error
+  });
+  const fieldsetClasses = classNames(formGroupStyles["field-set"], fieldsetClassName);
+  const mapFormComponent = (child, index) => {
+    if (isComponent(child, FormLayout)) {
+      return React.cloneElement(child, {
+        size,
+        mapHelper: mapFormComponent
       });
-    if (s(e, G))
-      return t.cloneElement(e, {
-        onColor: n,
-        size: m,
-        error: o,
-        renderError: !1,
-        errorTextId: a
+    } else if (isComponent(child, FormGroup)) {
+      return React.cloneElement(child, {
+        onColor,
+        size,
+        error,
+        renderError: false,
+        errorTextId: errorTextUuid
       });
-    if (s(e, H))
-      return t.cloneElement(e, {
-        name: l ?? e.props.name,
-        onColor: n,
-        size: m,
-        error: !!o,
-        errorTextId: a
+    } else if (isComponent(child, Checkbox)) {
+      return React.cloneElement(child, {
+        name: name ?? child.props.name,
+        onColor,
+        size,
+        error: !!error,
+        errorTextId: errorTextUuid
       });
-    if (s(e, K)) {
-      const T = typeof e.props.inputId > "u" ? j + U : e.props.inputId;
-      return t.cloneElement(e, {
-        inputId: T,
-        name: l ?? e.props.name,
-        onColor: n,
-        size: m,
-        onChange: (N) => {
-          L(N.target.id), e.props.onChange && e.props.onChange(N);
+    } else if (isComponent(child, RadioButton)) {
+      const radioId = typeof child.props.inputId === "undefined" ? radioGroupId + index : child.props.inputId;
+      return React.cloneElement(child, {
+        inputId: radioId,
+        name: name ?? child.props.name,
+        onColor,
+        size,
+        onChange: (event) => {
+          setCheckedRadioId(event.target.id);
+          child.props.onChange && child.props.onChange(event);
         },
-        error: !!o,
-        errorTextId: a,
-        labelClassNames: P(T, n, z, v)
+        error: !!error,
+        errorTextId: errorTextUuid,
+        labelClassNames: getRadioLabelClasses(radioId, onColor, isLarge, checkedRadioId)
+      });
+    } else if (isComponent(child, Input)) {
+      return React.cloneElement(child, {
+        name: name ?? child.props.name,
+        onColor,
+        size,
+        error: !!error,
+        errorTextId: errorTextUuid
+      });
+    } else if (isComponent(child, Textarea)) {
+      return React.cloneElement(child, {
+        name: name ?? child.props.name,
+        onColor,
+        error: !!error,
+        errorTextId: errorTextUuid
+      });
+    } else if (isComponent(child, Select)) {
+      return React.cloneElement(child, {
+        name: name ?? child.props.name,
+        onColor,
+        error: !!error,
+        errorTextId: errorTextUuid
+      });
+    } else if (isComponent(child, Slider)) {
+      return React.cloneElement(child, {
+        name: name ?? child.props.name,
+        error: !!error,
+        errorTextId: errorTextUuid
       });
-    } else {
-      if (s(e, J))
-        return t.cloneElement(e, {
-          name: l ?? e.props.name,
-          onColor: n,
-          size: m,
-          error: !!o,
-          errorTextId: a
-        });
-      if (s(e, X))
-        return t.cloneElement(e, {
-          name: l ?? e.props.name,
-          onColor: n,
-          error: !!o,
-          errorTextId: a
-        });
-      if (s(e, Q))
-        return t.cloneElement(e, {
-          name: l ?? e.props.name,
-          onColor: n,
-          error: !!o,
-          errorTextId: a
-        });
-      if (s(e, V))
-        return t.cloneElement(e, {
-          name: l ?? e.props.name,
-          error: !!o,
-          errorTextId: a
-        });
     }
-    return e;
-  }, x = () => /* @__PURE__ */ p("div", { children: [
-    c === "div" && /* @__PURE__ */ p("div", { className: C, children: [
-      r.legend && /* @__PURE__ */ d("h5", { className: g, children: r.legend }),
-      t.Children.map(r.children, u)
-    ] }),
-    c === "fieldset" && /* @__PURE__ */ p("fieldset", { name: r.fieldsetName, className: C, children: [
-      r.legend && /* @__PURE__ */ d("legend", { className: g, children: r.legend }),
-      t.Children.map(r.children, u)
-    ] })
-  ] });
-  return /* @__PURE__ */ p("div", { "data-testid": r.testId, "data-analyticsid": D.FormGroup, className: B, ref: R, tabIndex: -1, children: [
-    r.title && /* @__PURE__ */ d(Y, { className: M, htmlMarkup: "h4", appearance: "title4", margin: { marginTop: 0, marginBottom: o ? 1 : 2 }, children: r.title }),
-    b ? /* @__PURE__ */ d(O, { className: w, errorText: o, testId: W, errorTextId: a, children: x() }) : x()
+    return child;
+  };
+  const formGroupContent = () => {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      htmlMarkup === "div" && /* @__PURE__ */ jsxs("div", { className: fieldsetClasses, children: [
+        props.legend && /* @__PURE__ */ jsx("h5", { className: legendClasses, children: props.legend }),
+        React.Children.map(props.children, mapFormComponent)
+      ] }),
+      htmlMarkup === "fieldset" && /* @__PURE__ */ jsxs("fieldset", { name: props.fieldsetName, className: fieldsetClasses, children: [
+        props.legend && /* @__PURE__ */ jsx("legend", { className: legendClasses, children: props.legend }),
+        React.Children.map(props.children, mapFormComponent)
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-testid": props.testId, "data-analyticsid": AnalyticsId.FormGroup, className: formGroupWrapperClasses, ref, tabIndex: -1, children: [
+    props.title && /* @__PURE__ */ jsx(Title, { className: titleClasses, htmlMarkup: "h4", appearance: "title4", margin: { marginTop: 0, marginBottom: error ? 1 : 2 }, children: props.title }),
+    renderError ? /* @__PURE__ */ jsx(ErrorWrapper, { className: errorWrapperClassName, errorText: error, testId: errorWrapperTestId, errorTextId: errorTextUuid, children: formGroupContent() }) : formGroupContent()
   ] });
 });
-G.displayName = "FormGroup";
+FormGroup.displayName = "FormGroup";
 export {
-  G as F
+  FormGroup as F
 };
 //# sourceMappingURL=FormGroup.js.map

package/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { isComponent } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport Input, { InputProps } from '../Input/Input';\nimport RadioButton, { RadioButtonProps, getRadioLabelClasses } from '../RadioButton/RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Slider, { SliderProps } from '../Slider';\nimport Textarea, { TextareaProps } from '../Textarea';\nimport Title from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Changes the visuals of the formgroup */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Error message */\n  error?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const {\n    className,\n    fieldsetClassName,\n    onColor = FormOnColor.onwhite,\n    size = FormSize.medium,\n    error,\n    errorTextId,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n  } = props;\n  const [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const radioGroupId = useUuid();\n  const errorTextUuid = useUuid(errorTextId);\n  const onDark = onColor === FormOnColor.ondark;\n  const isLarge = size === FormSize.large;\n  const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n  const titleClasses = classNames({\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n  });\n\n  const legendClasses = classNames(formGroupStyles['field-set__legend'], {\n    [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n  });\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n    if (isComponent<FormLayoutProps>(child, FormLayout)) {\n      return React.cloneElement(child, {\n        size,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        onColor,\n        size,\n        error,\n        renderError: false,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          setCheckedRadioId(event.target.id);\n          child.props.onChange && child.props.onChange(event);\n        },\n        error: !!error,\n        errorTextId: errorTextUuid,\n        labelClassNames: getRadioLabelClasses(radioId, onColor as FormOnColor, isLarge, checkedRadioId),\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<TextareaProps>(child, Textarea)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<SliderProps>(child, Slider)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = (): React.ReactNode => {\n    return (\n      <div>\n        {htmlMarkup === 'div' && (\n          <div className={fieldsetClasses}>\n            {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset name={props.fieldsetName} className={fieldsetClasses}>\n            {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses} ref={ref} tabIndex={-1}>\n      {props.title && (\n        <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n          {props.title}\n        </Title>\n      )}\n      {renderError ? (\n        <ErrorWrapper className={errorWrapperClassName} errorText={error} testId={errorWrapperTestId} errorTextId={errorTextUuid}>\n          {formGroupContent()}\n        </ErrorWrapper>\n      ) : (\n        formGroupContent()\n      )}\n    </div>\n  );\n});\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"names":["FormGroup","React","props","ref","className","fieldsetClassName","onColor","FormOnColor","size","FormSize","error","errorTextId","name","htmlMarkup","renderError","errorWrapperClassName","errorWrapperTestId","checkedRadioId","setCheckedRadioId","useState","radioGroupId","useUuid","errorTextUuid","onDark","isLarge","formGroupWrapperClasses","classNames","formGroupStyles","titleClasses","legendClasses","fieldsetClasses","mapFormComponent","child","index","isComponent","FormLayout","Checkbox","RadioButton","radioId","event","getRadioLabelClasses","Input","Textarea","Select","Slider","formGroupContent","jsxs","jsx","AnalyticsId","Title","ErrorWrapper"],"mappings":"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"}
+{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { isComponent } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport Input, { InputProps } from '../Input/Input';\nimport RadioButton, { RadioButtonProps, getRadioLabelClasses } from '../RadioButton/RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Slider, { SliderProps } from '../Slider';\nimport Textarea, { TextareaProps } from '../Textarea';\nimport Title from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Changes the visuals of the formgroup */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Error message */\n  error?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const {\n    className,\n    fieldsetClassName,\n    onColor = FormOnColor.onwhite,\n    size = FormSize.medium,\n    error,\n    errorTextId,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n  } = props;\n  const [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const radioGroupId = useUuid();\n  const errorTextUuid = useUuid(errorTextId);\n  const onDark = onColor === FormOnColor.ondark;\n  const isLarge = size === FormSize.large;\n  const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n  const titleClasses = classNames({\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n  });\n\n  const legendClasses = classNames(formGroupStyles['field-set__legend'], {\n    [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n  });\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n    if (isComponent<FormLayoutProps>(child, FormLayout)) {\n      return React.cloneElement(child, {\n        size,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        onColor,\n        size,\n        error,\n        renderError: false,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          setCheckedRadioId(event.target.id);\n          child.props.onChange && child.props.onChange(event);\n        },\n        error: !!error,\n        errorTextId: errorTextUuid,\n        labelClassNames: getRadioLabelClasses(radioId, onColor as FormOnColor, isLarge, checkedRadioId),\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<TextareaProps>(child, Textarea)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<SliderProps>(child, Slider)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = (): React.ReactNode => {\n    return (\n      <div>\n        {htmlMarkup === 'div' && (\n          <div className={fieldsetClasses}>\n            {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset name={props.fieldsetName} className={fieldsetClasses}>\n            {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses} ref={ref} tabIndex={-1}>\n      {props.title && (\n        <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n          {props.title}\n        </Title>\n      )}\n      {renderError ? (\n        <ErrorWrapper className={errorWrapperClassName} errorText={error} testId={errorWrapperTestId} errorTextId={errorTextUuid}>\n          {formGroupContent()}\n        </ErrorWrapper>\n      ) : (\n        formGroupContent()\n      )}\n    </div>\n  );\n});\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"names":[],"mappings":"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"}