@helsenorge/designsystem-react 12.4.0 → 12.5.0

package/CHANGELOG.md

@@ -1,3 +1,55 @@
+## [12.5.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.4.0&targetVersion=GTv12.5.0) (2025-10-08)
+
+### Features
+
+- **datepicker:** default språkstøtte fra sot
+  ([1f2b2ae](https://github.com/helsenorge/designsystem/commit/1f2b2ae2ddd0ab527d976ec2d3dc6ec9293f58a0))
+- **drawer:** default språkstøtte fra sot
+  ([56517c5](https://github.com/helsenorge/designsystem/commit/56517c50ec9f4d61ecbbd3ce2ebbe509d9af898b))
+- **formgroup:** lagt til legendclassname prop
+  ([9dbd90c](https://github.com/helsenorge/designsystem/commit/9dbd90c7efbb838fb5204870bcfd90a089d03f4c)), closes
+  [#360836](https://github.com/helsenorge/designsystem/issues/360836)
+- **helptriggericon:** lagt til classname prop
+  ([b9d207e](https://github.com/helsenorge/designsystem/commit/b9d207ec0871ce79259562042f4b321b21b94fd8)), closes
+  [#360496](https://github.com/helsenorge/designsystem/issues/360496)
+- **icon:** nytt ikon feedback ([0e3f89c](https://github.com/helsenorge/designsystem/commit/0e3f89c04c897c8667593396cecaceb8d50fd879)),
+  closes [#360055](https://github.com/helsenorge/designsystem/issues/360055)
+- **listeditmode:** funksjonalitet for å redigere liste
+  ([d87e8c5](https://github.com/helsenorge/designsystem/commit/d87e8c59d44ce2278b403df3c3858029db280ad0)), closes
+  [#359697](https://github.com/helsenorge/designsystem/issues/359697)
+- **tabs:** default språkstøtte fra sot
+  ([733fd7e](https://github.com/helsenorge/designsystem/commit/733fd7e559e57cb3dfaf5e2efd52ac8754db8f6d))
+
+### Bug Fixes
+
+- **drawer:** legg breakpoint check på outer level for å vise animasjon riktig igjen
+  ([04f604a](https://github.com/helsenorge/designsystem/commit/04f604aaba66738ac710c28cb5514ec7b0d2967a)), closes
+  [#360641](https://github.com/helsenorge/designsystem/issues/360641)
+- **favoritebutton:** kun vis fokusstrek på focus-visible"
+  ([2dc6b2f](https://github.com/helsenorge/designsystem/commit/2dc6b2f954cdb7a5b5b3e7326a8c0d42723ef972)), closes
+  [#357829](https://github.com/helsenorge/designsystem/issues/357829)
+- **helptriggericon:** fiks så komponenten fungerer i liste igjen
+  ([45f801e](https://github.com/helsenorge/designsystem/commit/45f801edb77306cd7cba614396a7abc1089a610b)), closes
+  [#353532](https://github.com/helsenorge/designsystem/issues/353532) [#360885](https://github.com/helsenorge/designsystem/issues/360885)
+- **helptriggericon:** juster ikon ift tekst uten å endre linjehøyde
+  ([687a0fa](https://github.com/helsenorge/designsystem/commit/687a0fa13798a757408d417bde0d9bdb57cb59e1)), closes
+  [#360885](https://github.com/helsenorge/designsystem/issues/360885)
+- **list:** vertikalt align knapper riktig i liste
+  ([2926423](https://github.com/helsenorge/designsystem/commit/2926423198f6459228ea28b5c68945407756c6e3)), closes
+  [#353532](https://github.com/helsenorge/designsystem/issues/353532)
+- **panel:** juster paddings for å ta hensyn til statuslinje
+  ([1e8f5ff](https://github.com/helsenorge/designsystem/commit/1e8f5ff07c8e796af7269b3f4b92269a50d4fdcb)), closes
+  [#360101](https://github.com/helsenorge/designsystem/issues/360101)
+- **popmenu:** ikon sentreres riktig
+  ([3a8f5ac](https://github.com/helsenorge/designsystem/commit/3a8f5ac3dd9dfcff4fc75f101a4f4a6dbfbd1c88)), closes
+  [#361064](https://github.com/helsenorge/designsystem/issues/361064)
+- **radiobutton:** disabled har samme radius som andre states
+  ([27548a7](https://github.com/helsenorge/designsystem/commit/27548a74a68ac6c2d4c5783b84da056971995a4d)), closes
+  [#350142](https://github.com/helsenorge/designsystem/issues/350142)
+- **radiobutton:** hele wrapperen skal ikke se klikkbar ut
+  ([2c396cd](https://github.com/helsenorge/designsystem/commit/2c396cd1a5c79869ef9d72941c9c93efba47dc47)), closes
+  [#350142](https://github.com/helsenorge/designsystem/issues/350142)
+
 ## [12.4.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.3.0&targetVersion=GTv12.4.0) (2025-09-23)
 
 ### Features

package/Drawer.js

@@ -2,13 +2,14 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { createContext, useId, useRef, useContext, useInsertionEffect, useCallback, useMemo, useEffect, Children, isValidElement, useLayoutEffect, useState } from "react";
 import classNames from "classnames";
-import { ZIndex, KeyboardEventKey, AnalyticsId } from "./constants.js";
+import { LanguageLocales, ZIndex, KeyboardEventKey, AnalyticsId } from "./constants.js";
 import { useFocusTrap } from "./hooks/useFocusTrap.js";
 import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
 import { useKeyboardEvent } from "./hooks/useKeyboardEvent.js";
 import { useOutsideEvent } from "./hooks/useOutsideEvent.js";
 import { useReturnFocusOnUnmount } from "./hooks/useReturnFocusOnUnmount.js";
 import { getAriaLabelAttributes } from "./utils/accessibility.js";
+import { useLanguage } from "./utils/language.js";
 import { disableBodyScroll, enableBodyScroll } from "./utils/scroll.js";
 import { u as uuid } from "./uuid.js";
 import { B as Button } from "./Button.js";
@@ -216,15 +217,33 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, pre
     return jsx(PresenceChild, { isPresent, initial: !isInitialRender.current || initial ? void 0 : false, custom: isPresent ? void 0 : custom, presenceAffectsLayout, mode, onExitComplete: isPresent ? void 0 : onExit, children: child }, key);
   }) });
 };
+const ariaLabelCloseBtn$1 = "Close";
+const enGB = {
+  ariaLabelCloseBtn: ariaLabelCloseBtn$1
+};
+const ariaLabelCloseBtn = "Lukk";
+const nbNO = {
+  ariaLabelCloseBtn
+};
+const getResources = (language) => {
+  switch (language) {
+    case LanguageLocales.ENGLISH:
+      return enGB;
+    case LanguageLocales.NORWEGIAN:
+    default:
+      return nbNO;
+  }
+};
 const Drawer = (props) => {
   const { isOpen, ...rest } = props;
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(InnerDrawer, { ...rest }) });
+  const isMobile = useIsMobileBreakpoint();
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(InnerDrawer, { ...rest, isMobile }) });
 };
 const InnerDrawer = (props) => {
   const {
     ariaLabel,
     ariaLabelledBy,
-    ariaLabelCloseBtn,
+    ariaLabelCloseBtn: ariaLabelCloseBtn2,
     children,
     closeColor = "blueberry",
     desktopDirection = "left",
@@ -239,15 +258,23 @@ const InnerDrawer = (props) => {
     title,
     titleHtmlMarkup = "h3",
     titleId = uuid(),
-    zIndex = ZIndex.OverlayScreen
+    zIndex = ZIndex.OverlayScreen,
+    resources,
+    isMobile
   } = props;
   const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });
   const overlayRef = useRef(null);
   const containerRef = useRef(null);
   const contentRef = useRef(null);
-  const isMobile = useIsMobileBreakpoint();
   const [scope, animate] = useAnimate();
   const [isPresent, safeToRemove] = usePresence();
+  const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+  const defaultResources = getResources(language);
+  const mergedResources = {
+    ...defaultResources,
+    ...resources,
+    ariaLabelCloseBtn: ariaLabelCloseBtn2 || (resources == null ? void 0 : resources.ariaLabelCloseBtn) || defaultResources.ariaLabelCloseBtn
+  };
   const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;
   const headerStyling = classNames(styles.drawer__header, headerClasses, {
     [styles["drawer__header--no-close-button"]]: noCloseButton
@@ -280,8 +307,6 @@ const InnerDrawer = (props) => {
     }
     animate(overlayRef.current, { opacity: 1, pointerEvents: "auto" }, { duration: 0.3, ease: "easeInOut" });
   }, [isPresent]);
-  useEffect(() => {
-  }, [isPresent]);
   const closeDrawer = () => {
     if (!overlayRef.current || !containerRef.current) return;
     animate(overlayRef.current, { opacity: 0, pointerEvents: "none" }, { duration: 0.3, ease: "easeInOut" });
@@ -336,7 +361,7 @@ const InnerDrawer = (props) => {
               !noCloseButton && onRequestClose != void 0 && /* @__PURE__ */ jsx(
                 Close,
                 {
-                  ariaLabel: ariaLabelCloseBtn,
+                  ariaLabel: mergedResources.ariaLabelCloseBtn,
                   color: closeColor,
                   onClick: onRequestClose,
                   className: styles["drawer__header__close-button"]

package/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../node_modules/motion/dist/es/framer-motion/dist/es/context/LayoutGroupContext.mjs","../../../node_modules/motion/dist/es/framer-motion/dist/es/context/PresenceContext.mjs","../../../node_modules/motion/dist/es/framer-motion/dist/es/context/MotionConfigContext.mjs","../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs","../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs","../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs","../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/utils.mjs","../../../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-isomorphic-effect.mjs","../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.mjs","../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\nimport { createContext } from 'react';\n\nconst LayoutGroupContext = createContext({});\n\nexport { LayoutGroupContext };\n","\"use client\";\nimport { createContext } from 'react';\n\n/**\n * @public\n */\nconst PresenceContext = createContext(null);\n\nexport { PresenceContext };\n","\"use client\";\nimport { createContext } from 'react';\n\n/**\n * @public\n */\nconst MotionConfigContext = createContext({\n    transformPagePoint: (p) => p,\n    isStatic: false,\n    reducedMotion: \"never\",\n});\n\nexport { MotionConfigContext };\n","\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport * as React from 'react';\nimport { useId, useRef, useContext, useInsertionEffect } from 'react';\nimport { MotionConfigContext } from '../../context/MotionConfigContext.mjs';\n\n/**\n * Measurement functionality has to be within a separate component\n * to leverage snapshot lifecycle.\n */\nclass PopChildMeasure extends React.Component {\n    getSnapshotBeforeUpdate(prevProps) {\n        const element = this.props.childRef.current;\n        if (element && prevProps.isPresent && !this.props.isPresent) {\n            const size = this.props.sizeRef.current;\n            size.height = element.offsetHeight || 0;\n            size.width = element.offsetWidth || 0;\n            size.top = element.offsetTop;\n            size.left = element.offsetLeft;\n        }\n        return null;\n    }\n    /**\n     * Required with getSnapshotBeforeUpdate to stop React complaining.\n     */\n    componentDidUpdate() { }\n    render() {\n        return this.props.children;\n    }\n}\nfunction PopChild({ children, isPresent }) {\n    const id = useId();\n    const ref = useRef(null);\n    const size = useRef({\n        width: 0,\n        height: 0,\n        top: 0,\n        left: 0,\n    });\n    const { nonce } = useContext(MotionConfigContext);\n    /**\n     * We create and inject a style block so we can apply this explicit\n     * sizing in a non-destructive manner by just deleting the style block.\n     *\n     * We can't apply size via render as the measurement happens\n     * in getSnapshotBeforeUpdate (post-render), likewise if we apply the\n     * styles directly on the DOM node, we might be overwriting\n     * styles set via the style prop.\n     */\n    useInsertionEffect(() => {\n        const { width, height, top, left } = size.current;\n        if (isPresent || !ref.current || !width || !height)\n            return;\n        ref.current.dataset.motionPopId = id;\n        const style = document.createElement(\"style\");\n        if (nonce)\n            style.nonce = nonce;\n        document.head.appendChild(style);\n        if (style.sheet) {\n            style.sheet.insertRule(`\n          [data-motion-pop-id=\"${id}\"] {\n            position: absolute !important;\n            width: ${width}px !important;\n            height: ${height}px !important;\n            top: ${top}px !important;\n            left: ${left}px !important;\n          }\n        `);\n        }\n        return () => {\n            document.head.removeChild(style);\n        };\n    }, [isPresent]);\n    return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React.cloneElement(children, { ref }) }));\n}\n\nexport { PopChild };\n","\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport * as React from 'react';\nimport { useId, useCallback, useMemo } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { PopChild } from './PopChild.mjs';\n\nconst PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => {\n    const presenceChildren = useConstant(newChildrenMap);\n    const id = useId();\n    const memoizedOnExitComplete = useCallback((childId) => {\n        presenceChildren.set(childId, true);\n        for (const isComplete of presenceChildren.values()) {\n            if (!isComplete)\n                return; // can stop searching when any is incomplete\n        }\n        onExitComplete && onExitComplete();\n    }, [presenceChildren, onExitComplete]);\n    const context = useMemo(() => ({\n        id,\n        initial,\n        isPresent,\n        custom,\n        onExitComplete: memoizedOnExitComplete,\n        register: (childId) => {\n            presenceChildren.set(childId, false);\n            return () => presenceChildren.delete(childId);\n        },\n    }), \n    /**\n     * If the presence of a child affects the layout of the components around it,\n     * we want to make a new context value to ensure they get re-rendered\n     * so they can detect that layout change.\n     */\n    presenceAffectsLayout\n        ? [Math.random(), memoizedOnExitComplete]\n        : [isPresent, memoizedOnExitComplete]);\n    useMemo(() => {\n        presenceChildren.forEach((_, key) => presenceChildren.set(key, false));\n    }, [isPresent]);\n    /**\n     * If there's no `motion` components to fire exit animations, we want to remove this\n     * component immediately.\n     */\n    React.useEffect(() => {\n        !isPresent &&\n            !presenceChildren.size &&\n            onExitComplete &&\n            onExitComplete();\n    }, [isPresent]);\n    if (mode === \"popLayout\") {\n        children = jsx(PopChild, { isPresent: isPresent, children: children });\n    }\n    return (jsx(PresenceContext.Provider, { value: context, children: children }));\n};\nfunction newChildrenMap() {\n    return new Map();\n}\n\nexport { PresenceChild };\n","import { useContext, useId, useEffect, useCallback } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\n\n/**\n * When a component is the child of `AnimatePresence`, it can use `usePresence`\n * to access information about whether it's still present in the React tree.\n *\n * ```jsx\n * import { usePresence } from \"framer-motion\"\n *\n * export const Component = () => {\n *   const [isPresent, safeToRemove] = usePresence()\n *\n *   useEffect(() => {\n *     !isPresent && setTimeout(safeToRemove, 1000)\n *   }, [isPresent])\n *\n *   return <div />\n * }\n * ```\n *\n * If `isPresent` is `false`, it means that a component has been removed the tree, but\n * `AnimatePresence` won't really remove it until `safeToRemove` has been called.\n *\n * @public\n */\nfunction usePresence(subscribe = true) {\n    const context = useContext(PresenceContext);\n    if (context === null)\n        return [true, null];\n    const { isPresent, onExitComplete, register } = context;\n    // It's safe to call the following hooks conditionally (after an early return) because the context will always\n    // either be null or non-null for the lifespan of the component.\n    const id = useId();\n    useEffect(() => {\n        if (subscribe)\n            register(id);\n    }, [subscribe]);\n    const safeToRemove = useCallback(() => subscribe && onExitComplete && onExitComplete(id), [id, onExitComplete, subscribe]);\n    return !isPresent && onExitComplete ? [false, safeToRemove] : [true];\n}\n/**\n * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.\n * There is no `safeToRemove` function.\n *\n * ```jsx\n * import { useIsPresent } from \"framer-motion\"\n *\n * export const Component = () => {\n *   const isPresent = useIsPresent()\n *\n *   useEffect(() => {\n *     !isPresent && console.log(\"I've been removed!\")\n *   }, [isPresent])\n *\n *   return <div />\n * }\n * ```\n *\n * @public\n */\nfunction useIsPresent() {\n    return isPresent(useContext(PresenceContext));\n}\nfunction isPresent(context) {\n    return context === null ? true : context.isPresent;\n}\n\nexport { isPresent, useIsPresent, usePresence };\n","import { Children, isValidElement } from 'react';\n\nconst getChildKey = (child) => child.key || \"\";\nfunction onlyElements(children) {\n    const filtered = [];\n    // We use forEach here instead of map as map mutates the component key by preprending `.$`\n    Children.forEach(children, (child) => {\n        if (isValidElement(child))\n            filtered.push(child);\n    });\n    return filtered;\n}\n\nexport { getChildKey, onlyElements };\n","import { useLayoutEffect, useEffect } from 'react';\nimport { isBrowser } from './is-browser.mjs';\n\nconst useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;\n\nexport { useIsomorphicLayoutEffect };\n","\"use client\";\nimport { jsx, Fragment } from 'react/jsx-runtime';\nimport { useMemo, useRef, useState, useContext } from 'react';\nimport { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { PresenceChild } from './PresenceChild.mjs';\nimport { usePresence } from './use-presence.mjs';\nimport { onlyElements, getChildKey } from './utils.mjs';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';\n\n/**\n * `AnimatePresence` enables the animation of components that have been removed from the tree.\n *\n * When adding/removing more than a single child, every child **must** be given a unique `key` prop.\n *\n * Any `motion` components that have an `exit` property defined will animate out when removed from\n * the tree.\n *\n * ```jsx\n * import { motion, AnimatePresence } from 'framer-motion'\n *\n * export const Items = ({ items }) => (\n *   <AnimatePresence>\n *     {items.map(item => (\n *       <motion.div\n *         key={item.id}\n *         initial={{ opacity: 0 }}\n *         animate={{ opacity: 1 }}\n *         exit={{ opacity: 0 }}\n *       />\n *     ))}\n *   </AnimatePresence>\n * )\n * ```\n *\n * You can sequence exit animations throughout a tree using variants.\n *\n * If a child contains multiple `motion` components with `exit` props, it will only unmount the child\n * once all `motion` components have finished animating out. Likewise, any components using\n * `usePresence` all need to call `safeToRemove`.\n *\n * @public\n */\nconst AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = \"sync\", propagate = false, }) => {\n    const [isParentPresent, safeToRemove] = usePresence(propagate);\n    /**\n     * Filter any children that aren't ReactElements. We can only track components\n     * between renders with a props.key.\n     */\n    const presentChildren = useMemo(() => onlyElements(children), [children]);\n    /**\n     * Track the keys of the currently rendered children. This is used to\n     * determine which children are exiting.\n     */\n    const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);\n    /**\n     * If `initial={false}` we only want to pass this to components in the first render.\n     */\n    const isInitialRender = useRef(true);\n    /**\n     * A ref containing the currently present children. When all exit animations\n     * are complete, we use this to re-render the component with the latest children\n     * *committed* rather than the latest children *rendered*.\n     */\n    const pendingPresentChildren = useRef(presentChildren);\n    /**\n     * Track which exiting children have finished animating out.\n     */\n    const exitComplete = useConstant(() => new Map());\n    /**\n     * Save children to render as React state. To ensure this component is concurrent-safe,\n     * we check for exiting children via an effect.\n     */\n    const [diffedChildren, setDiffedChildren] = useState(presentChildren);\n    const [renderedChildren, setRenderedChildren] = useState(presentChildren);\n    useIsomorphicLayoutEffect(() => {\n        isInitialRender.current = false;\n        pendingPresentChildren.current = presentChildren;\n        /**\n         * Update complete status of exiting children.\n         */\n        for (let i = 0; i < renderedChildren.length; i++) {\n            const key = getChildKey(renderedChildren[i]);\n            if (!presentKeys.includes(key)) {\n                if (exitComplete.get(key) !== true) {\n                    exitComplete.set(key, false);\n                }\n            }\n            else {\n                exitComplete.delete(key);\n            }\n        }\n    }, [renderedChildren, presentKeys.length, presentKeys.join(\"-\")]);\n    const exitingChildren = [];\n    if (presentChildren !== diffedChildren) {\n        let nextChildren = [...presentChildren];\n        /**\n         * Loop through all the currently rendered components and decide which\n         * are exiting.\n         */\n        for (let i = 0; i < renderedChildren.length; i++) {\n            const child = renderedChildren[i];\n            const key = getChildKey(child);\n            if (!presentKeys.includes(key)) {\n                nextChildren.splice(i, 0, child);\n                exitingChildren.push(child);\n            }\n        }\n        /**\n         * If we're in \"wait\" mode, and we have exiting children, we want to\n         * only render these until they've all exited.\n         */\n        if (mode === \"wait\" && exitingChildren.length) {\n            nextChildren = exitingChildren;\n        }\n        setRenderedChildren(onlyElements(nextChildren));\n        setDiffedChildren(presentChildren);\n        /**\n         * Early return to ensure once we've set state with the latest diffed\n         * children, we can immediately re-render.\n         */\n        return;\n    }\n    if (process.env.NODE_ENV !== \"production\" &&\n        mode === \"wait\" &&\n        renderedChildren.length > 1) {\n        console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to \"wait\". This will lead to odd visual behaviour.`);\n    }\n    /**\n     * If we've been provided a forceRender function by the LayoutGroupContext,\n     * we can use it to force a re-render amongst all surrounding components once\n     * all components have finished animating out.\n     */\n    const { forceRender } = useContext(LayoutGroupContext);\n    return (jsx(Fragment, { children: renderedChildren.map((child) => {\n            const key = getChildKey(child);\n            const isPresent = propagate && !isParentPresent\n                ? false\n                : presentChildren === renderedChildren ||\n                    presentKeys.includes(key);\n            const onExit = () => {\n                if (exitComplete.has(key)) {\n                    exitComplete.set(key, true);\n                }\n                else {\n                    return;\n                }\n                let isEveryExitComplete = true;\n                exitComplete.forEach((isExitComplete) => {\n                    if (!isExitComplete)\n                        isEveryExitComplete = false;\n                });\n                if (isEveryExitComplete) {\n                    forceRender === null || forceRender === void 0 ? void 0 : forceRender();\n                    setRenderedChildren(pendingPresentChildren.current);\n                    propagate && (safeToRemove === null || safeToRemove === void 0 ? void 0 : safeToRemove());\n                    onExitComplete && onExitComplete();\n                }\n            };\n            return (jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial\n                    ? undefined\n                    : false, custom: isPresent ? undefined : custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, onExitComplete: isPresent ? undefined : onExit, children: child }, key));\n        }) }));\n};\n\nexport { AnimatePresence };\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport { AnalyticsId, KeyboardEventKey, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\n\nexport interface DrawerProps extends InnerDrawerProps {\n  /** Opens and closes the drawer */\n  isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n  /** Sets the aria-label of the drawer */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the drawer */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */\n  closeColor?: 'blueberry' | 'plum';\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\n  /** Sets the style of the Drawer header */\n  headerClasses?: string;\n  /** Title to display in the header of the drawer */\n  title: string;\n  /** id of the drawer title */\n  titleId?: string;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */\n  onRequestClose?: () => void;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Main content of the drawer */\n  children?: React.ReactNode;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Primary CTA callback */\n  onPrimaryAction?: () => void;\n  /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  primaryActionText?: string;\n  /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  secondaryActionText?: string;\n  /** Secondary CTA callback */\n  onSecondaryAction?: () => void;\n  /** Customize the z-index of the drawer */\n  zIndex?: number;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    ariaLabelCloseBtn,\n    children,\n    closeColor = 'blueberry',\n    desktopDirection = 'left',\n    footerContent,\n    headerClasses,\n    noCloseButton = false,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.OverlayScreen,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const isMobile = useIsMobileBreakpoint();\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n  const headerStyling = classNames(styles.drawer__header, headerClasses, {\n    [styles['drawer__header--no-close-button']]: noCloseButton,\n  });\n  const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) || onPrimaryAction || onSecondaryAction;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    if (onRequestClose) onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  useEffect(() => {\n    containerRef.current?.focus();\n    disableBodyScroll();\n\n    return (): void => {\n      enableBodyScroll();\n    };\n  }, []);\n\n  // Open animation.\n  useEffect(() => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    if (!isPresent) {\n      closeDrawer();\n      return;\n    }\n\n    if (isMobile) {\n      animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    } else {\n      animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    }\n\n    animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n  }, [isPresent]);\n\n  useEffect(() => {}, [isPresent]);\n\n  // Close animasjon, vi kaller `onClose()` til slutt\n  const closeDrawer = (): void => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n    if (isMobile) {\n      animate(\n        containerRef.current,\n        { y: '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    } else {\n      animate(\n        containerRef.current,\n        { x: desktopDirection === 'left' ? '-100%' : '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    }\n  };\n\n  const handleCTA = (callback?: () => void): void => {\n    if (callback) {\n      callback();\n    }\n  };\n\n  return (\n    <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n      <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n      <div\n        className={classNames(styles.drawer__container, {\n          [styles['drawer__container--right']]: desktopDirection === 'right',\n        })}\n        ref={containerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabIndex={-1}\n        {...ariaLabelAttributes}\n      >\n        <div className={styles.drawer__container__inner}>\n          <div className={headerStyling}>\n            <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup={titleHtmlMarkup} appearance=\"title3\">\n              {title}\n            </Title>\n            {!noCloseButton && onRequestClose != undefined && (\n              <Close\n                ariaLabel={ariaLabelCloseBtn}\n                color={closeColor}\n                onClick={onRequestClose}\n                className={styles['drawer__header__close-button']}\n              />\n            )}\n          </div>\n          <div\n            className={styles.drawer__content}\n            tabIndex={contentIsScrollable ? 0 : undefined}\n            role={contentIsScrollable ? 'region' : undefined}\n            {...(contentIsScrollable ? ariaLabelAttributes : {})}\n            ref={contentRef}\n          >\n            {children}\n          </div>\n        </div>\n        {hasFooterContent && (\n          <div className={styles.drawer__footer}>\n            {footerContent ? (\n              footerContent\n            ) : (\n              <>\n                {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n                {onSecondaryAction && (\n                  <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                    {secondaryActionText}\n                  </Button>\n                )}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n"],"names":[],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5,6,7,8]}
+{"version":3,"file":"Drawer.js","sources":["../../../node_modules/motion/dist/es/framer-motion/dist/es/context/LayoutGroupContext.mjs","../../../node_modules/motion/dist/es/framer-motion/dist/es/context/PresenceContext.mjs","../../../node_modules/motion/dist/es/framer-motion/dist/es/context/MotionConfigContext.mjs","../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs","../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs","../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs","../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/utils.mjs","../../../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-isomorphic-effect.mjs","../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.mjs","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\nimport { createContext } from 'react';\n\nconst LayoutGroupContext = createContext({});\n\nexport { LayoutGroupContext };\n","\"use client\";\nimport { createContext } from 'react';\n\n/**\n * @public\n */\nconst PresenceContext = createContext(null);\n\nexport { PresenceContext };\n","\"use client\";\nimport { createContext } from 'react';\n\n/**\n * @public\n */\nconst MotionConfigContext = createContext({\n    transformPagePoint: (p) => p,\n    isStatic: false,\n    reducedMotion: \"never\",\n});\n\nexport { MotionConfigContext };\n","\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport * as React from 'react';\nimport { useId, useRef, useContext, useInsertionEffect } from 'react';\nimport { MotionConfigContext } from '../../context/MotionConfigContext.mjs';\n\n/**\n * Measurement functionality has to be within a separate component\n * to leverage snapshot lifecycle.\n */\nclass PopChildMeasure extends React.Component {\n    getSnapshotBeforeUpdate(prevProps) {\n        const element = this.props.childRef.current;\n        if (element && prevProps.isPresent && !this.props.isPresent) {\n            const size = this.props.sizeRef.current;\n            size.height = element.offsetHeight || 0;\n            size.width = element.offsetWidth || 0;\n            size.top = element.offsetTop;\n            size.left = element.offsetLeft;\n        }\n        return null;\n    }\n    /**\n     * Required with getSnapshotBeforeUpdate to stop React complaining.\n     */\n    componentDidUpdate() { }\n    render() {\n        return this.props.children;\n    }\n}\nfunction PopChild({ children, isPresent }) {\n    const id = useId();\n    const ref = useRef(null);\n    const size = useRef({\n        width: 0,\n        height: 0,\n        top: 0,\n        left: 0,\n    });\n    const { nonce } = useContext(MotionConfigContext);\n    /**\n     * We create and inject a style block so we can apply this explicit\n     * sizing in a non-destructive manner by just deleting the style block.\n     *\n     * We can't apply size via render as the measurement happens\n     * in getSnapshotBeforeUpdate (post-render), likewise if we apply the\n     * styles directly on the DOM node, we might be overwriting\n     * styles set via the style prop.\n     */\n    useInsertionEffect(() => {\n        const { width, height, top, left } = size.current;\n        if (isPresent || !ref.current || !width || !height)\n            return;\n        ref.current.dataset.motionPopId = id;\n        const style = document.createElement(\"style\");\n        if (nonce)\n            style.nonce = nonce;\n        document.head.appendChild(style);\n        if (style.sheet) {\n            style.sheet.insertRule(`\n          [data-motion-pop-id=\"${id}\"] {\n            position: absolute !important;\n            width: ${width}px !important;\n            height: ${height}px !important;\n            top: ${top}px !important;\n            left: ${left}px !important;\n          }\n        `);\n        }\n        return () => {\n            document.head.removeChild(style);\n        };\n    }, [isPresent]);\n    return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React.cloneElement(children, { ref }) }));\n}\n\nexport { PopChild };\n","\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport * as React from 'react';\nimport { useId, useCallback, useMemo } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { PopChild } from './PopChild.mjs';\n\nconst PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => {\n    const presenceChildren = useConstant(newChildrenMap);\n    const id = useId();\n    const memoizedOnExitComplete = useCallback((childId) => {\n        presenceChildren.set(childId, true);\n        for (const isComplete of presenceChildren.values()) {\n            if (!isComplete)\n                return; // can stop searching when any is incomplete\n        }\n        onExitComplete && onExitComplete();\n    }, [presenceChildren, onExitComplete]);\n    const context = useMemo(() => ({\n        id,\n        initial,\n        isPresent,\n        custom,\n        onExitComplete: memoizedOnExitComplete,\n        register: (childId) => {\n            presenceChildren.set(childId, false);\n            return () => presenceChildren.delete(childId);\n        },\n    }), \n    /**\n     * If the presence of a child affects the layout of the components around it,\n     * we want to make a new context value to ensure they get re-rendered\n     * so they can detect that layout change.\n     */\n    presenceAffectsLayout\n        ? [Math.random(), memoizedOnExitComplete]\n        : [isPresent, memoizedOnExitComplete]);\n    useMemo(() => {\n        presenceChildren.forEach((_, key) => presenceChildren.set(key, false));\n    }, [isPresent]);\n    /**\n     * If there's no `motion` components to fire exit animations, we want to remove this\n     * component immediately.\n     */\n    React.useEffect(() => {\n        !isPresent &&\n            !presenceChildren.size &&\n            onExitComplete &&\n            onExitComplete();\n    }, [isPresent]);\n    if (mode === \"popLayout\") {\n        children = jsx(PopChild, { isPresent: isPresent, children: children });\n    }\n    return (jsx(PresenceContext.Provider, { value: context, children: children }));\n};\nfunction newChildrenMap() {\n    return new Map();\n}\n\nexport { PresenceChild };\n","import { useContext, useId, useEffect, useCallback } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\n\n/**\n * When a component is the child of `AnimatePresence`, it can use `usePresence`\n * to access information about whether it's still present in the React tree.\n *\n * ```jsx\n * import { usePresence } from \"framer-motion\"\n *\n * export const Component = () => {\n *   const [isPresent, safeToRemove] = usePresence()\n *\n *   useEffect(() => {\n *     !isPresent && setTimeout(safeToRemove, 1000)\n *   }, [isPresent])\n *\n *   return <div />\n * }\n * ```\n *\n * If `isPresent` is `false`, it means that a component has been removed the tree, but\n * `AnimatePresence` won't really remove it until `safeToRemove` has been called.\n *\n * @public\n */\nfunction usePresence(subscribe = true) {\n    const context = useContext(PresenceContext);\n    if (context === null)\n        return [true, null];\n    const { isPresent, onExitComplete, register } = context;\n    // It's safe to call the following hooks conditionally (after an early return) because the context will always\n    // either be null or non-null for the lifespan of the component.\n    const id = useId();\n    useEffect(() => {\n        if (subscribe)\n            register(id);\n    }, [subscribe]);\n    const safeToRemove = useCallback(() => subscribe && onExitComplete && onExitComplete(id), [id, onExitComplete, subscribe]);\n    return !isPresent && onExitComplete ? [false, safeToRemove] : [true];\n}\n/**\n * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.\n * There is no `safeToRemove` function.\n *\n * ```jsx\n * import { useIsPresent } from \"framer-motion\"\n *\n * export const Component = () => {\n *   const isPresent = useIsPresent()\n *\n *   useEffect(() => {\n *     !isPresent && console.log(\"I've been removed!\")\n *   }, [isPresent])\n *\n *   return <div />\n * }\n * ```\n *\n * @public\n */\nfunction useIsPresent() {\n    return isPresent(useContext(PresenceContext));\n}\nfunction isPresent(context) {\n    return context === null ? true : context.isPresent;\n}\n\nexport { isPresent, useIsPresent, usePresence };\n","import { Children, isValidElement } from 'react';\n\nconst getChildKey = (child) => child.key || \"\";\nfunction onlyElements(children) {\n    const filtered = [];\n    // We use forEach here instead of map as map mutates the component key by preprending `.$`\n    Children.forEach(children, (child) => {\n        if (isValidElement(child))\n            filtered.push(child);\n    });\n    return filtered;\n}\n\nexport { getChildKey, onlyElements };\n","import { useLayoutEffect, useEffect } from 'react';\nimport { isBrowser } from './is-browser.mjs';\n\nconst useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;\n\nexport { useIsomorphicLayoutEffect };\n","\"use client\";\nimport { jsx, Fragment } from 'react/jsx-runtime';\nimport { useMemo, useRef, useState, useContext } from 'react';\nimport { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { PresenceChild } from './PresenceChild.mjs';\nimport { usePresence } from './use-presence.mjs';\nimport { onlyElements, getChildKey } from './utils.mjs';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';\n\n/**\n * `AnimatePresence` enables the animation of components that have been removed from the tree.\n *\n * When adding/removing more than a single child, every child **must** be given a unique `key` prop.\n *\n * Any `motion` components that have an `exit` property defined will animate out when removed from\n * the tree.\n *\n * ```jsx\n * import { motion, AnimatePresence } from 'framer-motion'\n *\n * export const Items = ({ items }) => (\n *   <AnimatePresence>\n *     {items.map(item => (\n *       <motion.div\n *         key={item.id}\n *         initial={{ opacity: 0 }}\n *         animate={{ opacity: 1 }}\n *         exit={{ opacity: 0 }}\n *       />\n *     ))}\n *   </AnimatePresence>\n * )\n * ```\n *\n * You can sequence exit animations throughout a tree using variants.\n *\n * If a child contains multiple `motion` components with `exit` props, it will only unmount the child\n * once all `motion` components have finished animating out. Likewise, any components using\n * `usePresence` all need to call `safeToRemove`.\n *\n * @public\n */\nconst AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = \"sync\", propagate = false, }) => {\n    const [isParentPresent, safeToRemove] = usePresence(propagate);\n    /**\n     * Filter any children that aren't ReactElements. We can only track components\n     * between renders with a props.key.\n     */\n    const presentChildren = useMemo(() => onlyElements(children), [children]);\n    /**\n     * Track the keys of the currently rendered children. This is used to\n     * determine which children are exiting.\n     */\n    const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);\n    /**\n     * If `initial={false}` we only want to pass this to components in the first render.\n     */\n    const isInitialRender = useRef(true);\n    /**\n     * A ref containing the currently present children. When all exit animations\n     * are complete, we use this to re-render the component with the latest children\n     * *committed* rather than the latest children *rendered*.\n     */\n    const pendingPresentChildren = useRef(presentChildren);\n    /**\n     * Track which exiting children have finished animating out.\n     */\n    const exitComplete = useConstant(() => new Map());\n    /**\n     * Save children to render as React state. To ensure this component is concurrent-safe,\n     * we check for exiting children via an effect.\n     */\n    const [diffedChildren, setDiffedChildren] = useState(presentChildren);\n    const [renderedChildren, setRenderedChildren] = useState(presentChildren);\n    useIsomorphicLayoutEffect(() => {\n        isInitialRender.current = false;\n        pendingPresentChildren.current = presentChildren;\n        /**\n         * Update complete status of exiting children.\n         */\n        for (let i = 0; i < renderedChildren.length; i++) {\n            const key = getChildKey(renderedChildren[i]);\n            if (!presentKeys.includes(key)) {\n                if (exitComplete.get(key) !== true) {\n                    exitComplete.set(key, false);\n                }\n            }\n            else {\n                exitComplete.delete(key);\n            }\n        }\n    }, [renderedChildren, presentKeys.length, presentKeys.join(\"-\")]);\n    const exitingChildren = [];\n    if (presentChildren !== diffedChildren) {\n        let nextChildren = [...presentChildren];\n        /**\n         * Loop through all the currently rendered components and decide which\n         * are exiting.\n         */\n        for (let i = 0; i < renderedChildren.length; i++) {\n            const child = renderedChildren[i];\n            const key = getChildKey(child);\n            if (!presentKeys.includes(key)) {\n                nextChildren.splice(i, 0, child);\n                exitingChildren.push(child);\n            }\n        }\n        /**\n         * If we're in \"wait\" mode, and we have exiting children, we want to\n         * only render these until they've all exited.\n         */\n        if (mode === \"wait\" && exitingChildren.length) {\n            nextChildren = exitingChildren;\n        }\n        setRenderedChildren(onlyElements(nextChildren));\n        setDiffedChildren(presentChildren);\n        /**\n         * Early return to ensure once we've set state with the latest diffed\n         * children, we can immediately re-render.\n         */\n        return;\n    }\n    if (process.env.NODE_ENV !== \"production\" &&\n        mode === \"wait\" &&\n        renderedChildren.length > 1) {\n        console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to \"wait\". This will lead to odd visual behaviour.`);\n    }\n    /**\n     * If we've been provided a forceRender function by the LayoutGroupContext,\n     * we can use it to force a re-render amongst all surrounding components once\n     * all components have finished animating out.\n     */\n    const { forceRender } = useContext(LayoutGroupContext);\n    return (jsx(Fragment, { children: renderedChildren.map((child) => {\n            const key = getChildKey(child);\n            const isPresent = propagate && !isParentPresent\n                ? false\n                : presentChildren === renderedChildren ||\n                    presentKeys.includes(key);\n            const onExit = () => {\n                if (exitComplete.has(key)) {\n                    exitComplete.set(key, true);\n                }\n                else {\n                    return;\n                }\n                let isEveryExitComplete = true;\n                exitComplete.forEach((isExitComplete) => {\n                    if (!isExitComplete)\n                        isEveryExitComplete = false;\n                });\n                if (isEveryExitComplete) {\n                    forceRender === null || forceRender === void 0 ? void 0 : forceRender();\n                    setRenderedChildren(pendingPresentChildren.current);\n                    propagate && (safeToRemove === null || safeToRemove === void 0 ? void 0 : safeToRemove());\n                    onExitComplete && onExitComplete();\n                }\n            };\n            return (jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial\n                    ? undefined\n                    : false, custom: isPresent ? undefined : custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, onExitComplete: isPresent ? undefined : onExit, children: child }, key));\n        }) }));\n};\n\nexport { AnimatePresence };\n","import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\nimport { HNDesignsystemDrawer } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { HNDesignsystemDrawer } from '../../resources/Resources';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { useLanguage } from '../../utils/language';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\n\nexport interface DrawerProps extends InnerDrawerProps {\n  /** Opens and closes the drawer */\n  isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n  /** Sets the aria-label of the drawer */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the drawer */\n  ariaLabelledBy?: string;\n  /** @deprecated Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */\n  closeColor?: 'blueberry' | 'plum';\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\n  /** Sets the style of the Drawer header */\n  headerClasses?: string;\n  /** Title to display in the header of the drawer */\n  title: string;\n  /** id of the drawer title */\n  titleId?: string;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */\n  onRequestClose?: () => void;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Main content of the drawer */\n  children?: React.ReactNode;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Primary CTA callback */\n  onPrimaryAction?: () => void;\n  /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  primaryActionText?: string;\n  /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  secondaryActionText?: string;\n  /** Secondary CTA callback */\n  onSecondaryAction?: () => void;\n  /** Customize the z-index of the drawer */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDrawer>;\n  /** Sets mobile styling and animation from outer level Drawer */\n  isMobile?: boolean;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    ariaLabelCloseBtn,\n    children,\n    closeColor = 'blueberry',\n    desktopDirection = 'left',\n    footerContent,\n    headerClasses,\n    noCloseButton = false,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.OverlayScreen,\n    resources,\n    isMobile,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDrawer = {\n    ...defaultResources,\n    ...resources,\n    ariaLabelCloseBtn: ariaLabelCloseBtn || resources?.ariaLabelCloseBtn || defaultResources.ariaLabelCloseBtn,\n  };\n\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n  const headerStyling = classNames(styles.drawer__header, headerClasses, {\n    [styles['drawer__header--no-close-button']]: noCloseButton,\n  });\n  const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) || onPrimaryAction || onSecondaryAction;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    if (onRequestClose) onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  useEffect(() => {\n    containerRef.current?.focus();\n    disableBodyScroll();\n\n    return (): void => {\n      enableBodyScroll();\n    };\n  }, []);\n\n  // Open animation.\n  useEffect(() => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    if (!isPresent) {\n      closeDrawer();\n      return;\n    }\n\n    if (isMobile) {\n      animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    } else {\n      animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    }\n\n    animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n  }, [isPresent]);\n\n  // Close animasjon, vi kaller `onClose()` til slutt\n  const closeDrawer = (): void => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n    if (isMobile) {\n      animate(\n        containerRef.current,\n        { y: '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    } else {\n      animate(\n        containerRef.current,\n        { x: desktopDirection === 'left' ? '-100%' : '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    }\n  };\n\n  const handleCTA = (callback?: () => void): void => {\n    if (callback) {\n      callback();\n    }\n  };\n\n  return (\n    <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n      <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n      <div\n        className={classNames(styles.drawer__container, {\n          [styles['drawer__container--right']]: desktopDirection === 'right',\n        })}\n        ref={containerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabIndex={-1}\n        {...ariaLabelAttributes}\n      >\n        <div className={styles.drawer__container__inner}>\n          <div className={headerStyling}>\n            <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup={titleHtmlMarkup} appearance=\"title3\">\n              {title}\n            </Title>\n            {!noCloseButton && onRequestClose != undefined && (\n              <Close\n                ariaLabel={mergedResources.ariaLabelCloseBtn}\n                color={closeColor}\n                onClick={onRequestClose}\n                className={styles['drawer__header__close-button']}\n              />\n            )}\n          </div>\n          <div\n            className={styles.drawer__content}\n            tabIndex={contentIsScrollable ? 0 : undefined}\n            role={contentIsScrollable ? 'region' : undefined}\n            {...(contentIsScrollable ? ariaLabelAttributes : {})}\n            ref={contentRef}\n          >\n            {children}\n          </div>\n        </div>\n        {hasFooterContent && (\n          <div className={styles.drawer__footer}>\n            {footerContent ? (\n              footerContent\n            ) : (\n              <>\n                {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n                {onSecondaryAction && (\n                  <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                    {secondaryActionText}\n                  </Button>\n                )}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n"],"names":["ariaLabelCloseBtn"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5,6,7,8]}

package/FormGroup.js

@@ -19,6 +19,7 @@ const FormGroup = React__default.forwardRef((props, ref) => {
     ariaLabelledBy,
     className,
     fieldsetClassName,
+    legendClassName,
     onColor = FormOnColor.onwhite,
     size = FormSize.medium,
     error,
@@ -38,9 +39,13 @@ const FormGroup = React__default.forwardRef((props, ref) => {
   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 legendClasses = classNames(
+    formGroupStyles["field-set__legend"],
+    {
+      [formGroupStyles["field-set__legend--on-dark"]]: onDark && !error
+    },
+    legendClassName
+  );
   const fieldsetClasses = classNames(formGroupStyles["field-set"], fieldsetClassName);
   const mapFormComponent = (child, index) => {
     if (isComponent(child, FormLayout)) {

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  /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n  ariaLabelledBy?: string;\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    ariaLabelledBy,\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          if (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 aria-labelledby={ariaLabelledBy} 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}>\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      <ErrorWrapper\n        className={errorWrapperClassName}\n        errorText={error}\n        testId={errorWrapperTestId}\n        errorTextId={errorTextUuid}\n        errorMessageRef={ref}\n        renderError={renderError}\n      >\n        {formGroupContent()}\n      </ErrorWrapper>\n    </div>\n  );\n});\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"names":["React"],"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  /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n  ariaLabelledBy?: string;\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  /** Adds custom classes to the legend element. */\n  legendClassName?: 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    ariaLabelledBy,\n    className,\n    fieldsetClassName,\n    legendClassName,\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(\n    formGroupStyles['field-set__legend'],\n    {\n      [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    },\n    legendClassName\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          if (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 aria-labelledby={ariaLabelledBy} 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}>\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      <ErrorWrapper\n        className={errorWrapperClassName}\n        errorText={error}\n        testId={errorWrapperTestId}\n        errorTextId={errorTextUuid}\n        errorMessageRef={ref}\n        renderError={renderError}\n      >\n        {formGroupContent()}\n      </ErrorWrapper>\n    </div>\n  );\n});\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"names":["React"],"mappings":"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"}

package/HelpTriggerIcon.js

@@ -73,7 +73,17 @@ const HelpTriggerIcon = React__default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(HelpTriggerIconInternal, { ...props, ref });
 });
 const HelpTriggerIconInternal = React__default.forwardRef(
-  ({ ariaLabel, ariaLabelledById, htmlMarkup = "button", isHovered = false, size = "medium", testId, weight = "normal", ...buttonRest }, ref) => {
+  ({
+    ariaLabel,
+    ariaLabelledById,
+    className,
+    htmlMarkup = "button",
+    isHovered = false,
+    size = "medium",
+    testId,
+    weight = "normal",
+    ...buttonRest
+  }, ref) => {
     const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });
     const { hoverRef, isHovered: interalIsHovered } = useHover(ref, false);
     const helpIcon = /* @__PURE__ */ jsx(HelpSign, { color: getIconColor(interalIsHovered || isHovered, weight), weight });
@@ -84,7 +94,8 @@ const HelpTriggerIconInternal = React__default.forwardRef(
         [styles["help-trigger-icon--strong"]]: weight === "strong",
         [styles["help-trigger-icon--is-button"]]: isButton
       },
-      styles[`help-trigger-icon--${size}`]
+      styles[`help-trigger-icon--${size}`],
+      className
     );
     if (isButton) {
       return /* @__PURE__ */ jsx(

package/HelpTriggerIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpTriggerIcon.js","sources":["../src/components/HelpTriggerIcon/HelpSign.tsx","../src/components/HelpTriggerIcon/HelpTriggerIcon.tsx"],"sourcesContent":["import React from 'react';\n\nimport { HelpTriggerWeights } from '../HelpTriggerIcon';\n\nexport interface HelpSignProps {\n  color?: string;\n  weight?: HelpTriggerWeights;\n}\n\nconst HelpSign: React.FC<HelpSignProps> = ({ color, weight }: HelpSignProps): React.ReactElement => {\n  const paths =\n    weight === 'normal' ? (\n      <>\n        <defs>\n          <clipPath id=\"clipCircle\" clipPathUnits=\"userSpaceOnUse\">\n            <path\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n              d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0\"\n            />\n          </clipPath>\n        </defs>\n        <path\n          d=\"M10.0004 0V-2C3.38207 -2 -2 3.38088 -2 9.99961H0H2C2 5.59043 5.5908 2 10.0004 2V0ZM0 9.99961H-2C-2 16.6181 3.38187 22 10.0004 22V20V18C5.59101 18 2 14.409 2 9.99961H0ZM10.0004 20V22C16.6191 22 22 16.6179 22 9.99961H20H18C18 14.4092 14.4096 18 10.0004 18V20ZM20 9.99961H22C22 3.38108 16.6189 -2 10.0004 -2V0V2C14.4098 2 18 5.59022 18 9.99961H20Z\"\n          fill={color}\n          clipPath=\"url(#clipCircle)\"\n        />\n        <path\n          d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n          fill={color}\n        />\n        <path\n          d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n          fill={color}\n        />\n      </>\n    ) : (\n      <>\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0Z\"\n        />\n        <path\n          d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n          fill=\"white\"\n        />\n      </>\n    );\n\n  return (\n    <svg fill=\"none\" height=\"20\" overflow=\"visible\" role={'presentation'} width=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      {paths}\n    </svg>\n  );\n};\n\nexport default HelpSign;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport type HelpTriggerIconSizes = 'inherit' | 'medium' | 'large' | 'xlarge';\n\nexport type HelpTriggerIconTags = 'button' | 'span';\n\nexport type HelpTriggerWeights = 'normal' | 'strong';\n\nexport interface HelpTriggerIconProps\n  extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Size of the Icon. Default: medium.\n   */\n\n  size?: HelpTriggerIconSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /**\n   * Sets the colors of the help trigger icon. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n}\n\ninterface HelpTriggerIconInternalProps extends HelpTriggerIconProps {\n  /**\n   * Sets the hover styling of the trigger. Intended for use when wrapped by a parent button.\n   */\n  isHovered?: boolean;\n  /**\n   * Only use this if the parent wrapper is a Button!\n   * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button\n   */\n  htmlMarkup?: HelpTriggerIconTags;\n}\n\nconst getIconColor = (hover: boolean, weight: HelpTriggerWeights): string | undefined => {\n  if (weight === 'normal') {\n    return hover ? 'var(--color-help-graphics-verydark)' : 'var(--color-help-graphics-normal)';\n  }\n};\n\nconst HelpTriggerIcon = React.forwardRef<HTMLButtonElement, HelpTriggerIconProps>((props, ref) => {\n  return <HelpTriggerIconInternal {...props} ref={ref} />;\n});\n\nexport const HelpTriggerIconInternal = React.forwardRef<HTMLButtonElement, HelpTriggerIconInternalProps>(\n  (\n    { ariaLabel, ariaLabelledById, htmlMarkup = 'button', isHovered = false, size = 'medium', testId, weight = 'normal', ...buttonRest },\n    ref\n  ) => {\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n    const { hoverRef, isHovered: interalIsHovered } = useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>, false);\n    const helpIcon = <HelpSign color={getIconColor(interalIsHovered || isHovered, weight)} weight={weight} />;\n    const isButton = htmlMarkup === 'button';\n    const iconClasses = classNames(\n      styles['help-trigger-icon'],\n      {\n        [styles['help-trigger-icon--strong']]: weight === 'strong',\n        [styles['help-trigger-icon--is-button']]: isButton,\n      },\n      styles[`help-trigger-icon--${size}`]\n    );\n\n    if (isButton) {\n      return (\n        <button\n          {...ariaLabelAttributes}\n          type=\"button\"\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.HelpTriggerIcon}\n          className={iconClasses}\n          ref={mergeRefs([hoverRef, ref])}\n          {...buttonRest}\n        >\n          {helpIcon}\n        </button>\n      );\n    }\n\n    return (\n      <span data-testid={testId} data-analyticsid={AnalyticsId.HelpTriggerIcon} className={iconClasses}>\n        {helpIcon}\n      </span>\n    );\n  }\n);\n\nHelpTriggerIcon.displayName = 'HelpTriggerIcon';\nHelpTriggerIconInternal.displayName = 'HelpTriggerIconInternal';\n\nexport default HelpTriggerIcon;\n"],"names":["React"],"mappings":";;;;;;;;AASA,MAAM,WAAoC,CAAC,EAAE,OAAO,aAAgD;AAClG,QAAM,QACJ,WAAW,WACT,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,UACC,UAAA,oBAAC,YAAA,EAAS,IAAG,cAAa,eAAc,kBACtC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,UAAS;AAAA,QACT,GAAE;AAAA,MAAA;AAAA,IAAA,GAEN,EAAA,CACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAM;AAAA,QACN,UAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEX;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAER;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACR,EAAA,CACF,IAEA,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,UAAS;AAAA,QACT,GAAE;AAAA,MAAA;AAAA,IAAA;AAAA,IAEJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAEP;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACP,GACF;AAGJ,6BACG,OAAA,EAAI,MAAK,QAAO,QAAO,MAAK,UAAS,WAAU,MAAM,gBAAgB,OAAM,MAAK,SAAQ,aAAY,OAAM,8BACxG,UAAA,OACH;AAEJ;ACNA,MAAM,eAAe,CAAC,OAAgB,WAAmD;AACvF,MAAI,WAAW,UAAU;AACvB,WAAO,QAAQ,wCAAwC;AAAA,EACzD;AACF;AAEA,MAAM,kBAAkBA,eAAM,WAAoD,CAAC,OAAO,QAAQ;AAChG,SAAO,oBAAC,yBAAA,EAAyB,GAAG,OAAO,IAAA,CAAU;AACvD,CAAC;AAEM,MAAM,0BAA0BA,eAAM;AAAA,EAC3C,CACE,EAAE,WAAW,kBAAkB,aAAa,UAAU,YAAY,OAAO,OAAO,UAAU,QAAQ,SAAS,UAAU,GAAG,WAAA,GACxH,QACG;AACH,UAAM,sBAAsB,uBAAuB,EAAE,OAAO,WAAW,IAAI,kBAAkB;AAC7F,UAAM,EAAE,UAAU,WAAW,qBAAqB,SAA4B,KAA2C,KAAK;AAC9H,UAAM,+BAAY,UAAA,EAAS,OAAO,aAAa,oBAAoB,WAAW,MAAM,GAAG,OAAA,CAAgB;AACvG,UAAM,WAAW,eAAe;AAChC,UAAM,cAAc;AAAA,MAClB,OAAO,mBAAmB;AAAA,MAC1B;AAAA,QACE,CAAC,OAAO,2BAA2B,CAAC,GAAG,WAAW;AAAA,QAClD,CAAC,OAAO,8BAA8B,CAAC,GAAG;AAAA,MAAA;AAAA,MAE5C,OAAO,sBAAsB,IAAI,EAAE;AAAA,IAAA;AAGrC,QAAI,UAAU;AACZ,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,MAAK;AAAA,UACL,eAAa;AAAA,UACb,oBAAkB,YAAY;AAAA,UAC9B,WAAW;AAAA,UACX,KAAK,UAAU,CAAC,UAAU,GAAG,CAAC;AAAA,UAC7B,GAAG;AAAA,UAEH,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGP;AAEA,WACE,oBAAC,UAAK,eAAa,QAAQ,oBAAkB,YAAY,iBAAiB,WAAW,aAClF,UAAA,SAAA,CACH;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;AAC9B,wBAAwB,cAAc;"}
+{"version":3,"file":"HelpTriggerIcon.js","sources":["../src/components/HelpTriggerIcon/HelpSign.tsx","../src/components/HelpTriggerIcon/HelpTriggerIcon.tsx"],"sourcesContent":["import React from 'react';\n\nimport { HelpTriggerWeights } from '../HelpTriggerIcon';\n\nexport interface HelpSignProps {\n  color?: string;\n  weight?: HelpTriggerWeights;\n}\n\nconst HelpSign: React.FC<HelpSignProps> = ({ color, weight }: HelpSignProps): React.ReactElement => {\n  const paths =\n    weight === 'normal' ? (\n      <>\n        <defs>\n          <clipPath id=\"clipCircle\" clipPathUnits=\"userSpaceOnUse\">\n            <path\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n              d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0\"\n            />\n          </clipPath>\n        </defs>\n        <path\n          d=\"M10.0004 0V-2C3.38207 -2 -2 3.38088 -2 9.99961H0H2C2 5.59043 5.5908 2 10.0004 2V0ZM0 9.99961H-2C-2 16.6181 3.38187 22 10.0004 22V20V18C5.59101 18 2 14.409 2 9.99961H0ZM10.0004 20V22C16.6191 22 22 16.6179 22 9.99961H20H18C18 14.4092 14.4096 18 10.0004 18V20ZM20 9.99961H22C22 3.38108 16.6189 -2 10.0004 -2V0V2C14.4098 2 18 5.59022 18 9.99961H20Z\"\n          fill={color}\n          clipPath=\"url(#clipCircle)\"\n        />\n        <path\n          d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n          fill={color}\n        />\n        <path\n          d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n          fill={color}\n        />\n      </>\n    ) : (\n      <>\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0Z\"\n        />\n        <path\n          d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n          fill=\"white\"\n        />\n      </>\n    );\n\n  return (\n    <svg fill=\"none\" height=\"20\" overflow=\"visible\" role={'presentation'} width=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      {paths}\n    </svg>\n  );\n};\n\nexport default HelpSign;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport type HelpTriggerIconSizes = 'inherit' | 'medium' | 'large' | 'xlarge';\n\nexport type HelpTriggerIconTags = 'button' | 'span';\n\nexport type HelpTriggerWeights = 'normal' | 'strong';\n\nexport interface HelpTriggerIconProps\n  extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\n   * Size of the Icon. Default: medium.\n   */\n  size?: HelpTriggerIconSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /**\n   * Sets the colors of the help trigger icon. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n}\n\ninterface HelpTriggerIconInternalProps extends HelpTriggerIconProps {\n  /**\n   * Sets the hover styling of the trigger. Intended for use when wrapped by a parent button.\n   */\n  isHovered?: boolean;\n  /**\n   * Only use this if the parent wrapper is a Button!\n   * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button\n   */\n  htmlMarkup?: HelpTriggerIconTags;\n}\n\nconst getIconColor = (hover: boolean, weight: HelpTriggerWeights): string | undefined => {\n  if (weight === 'normal') {\n    return hover ? 'var(--color-help-graphics-verydark)' : 'var(--color-help-graphics-normal)';\n  }\n};\n\nconst HelpTriggerIcon = React.forwardRef<HTMLButtonElement, HelpTriggerIconProps>((props, ref) => {\n  return <HelpTriggerIconInternal {...props} ref={ref} />;\n});\n\nexport const HelpTriggerIconInternal = React.forwardRef<HTMLButtonElement, HelpTriggerIconInternalProps>(\n  (\n    {\n      ariaLabel,\n      ariaLabelledById,\n      className,\n      htmlMarkup = 'button',\n      isHovered = false,\n      size = 'medium',\n      testId,\n      weight = 'normal',\n      ...buttonRest\n    },\n    ref\n  ) => {\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n    const { hoverRef, isHovered: interalIsHovered } = useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>, false);\n    const helpIcon = <HelpSign color={getIconColor(interalIsHovered || isHovered, weight)} weight={weight} />;\n    const isButton = htmlMarkup === 'button';\n    const iconClasses = classNames(\n      styles['help-trigger-icon'],\n      {\n        [styles['help-trigger-icon--strong']]: weight === 'strong',\n        [styles['help-trigger-icon--is-button']]: isButton,\n      },\n      styles[`help-trigger-icon--${size}`],\n      className\n    );\n\n    if (isButton) {\n      return (\n        <button\n          {...ariaLabelAttributes}\n          type=\"button\"\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.HelpTriggerIcon}\n          className={iconClasses}\n          ref={mergeRefs([hoverRef, ref])}\n          {...buttonRest}\n        >\n          {helpIcon}\n        </button>\n      );\n    }\n\n    return (\n      <span data-testid={testId} data-analyticsid={AnalyticsId.HelpTriggerIcon} className={iconClasses}>\n        {helpIcon}\n      </span>\n    );\n  }\n);\n\nHelpTriggerIcon.displayName = 'HelpTriggerIcon';\nHelpTriggerIconInternal.displayName = 'HelpTriggerIconInternal';\n\nexport default HelpTriggerIcon;\n"],"names":["React"],"mappings":"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"}