@helsenorge/designsystem-react 4.3.0 → 4.4.0

package/components/ExpanderList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useSticky } from '../../hooks/useSticky';\nimport { useUuid } from '../../hooks/useUuid';\nimport { PaletteNames } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\nimport { TitleTags } from '../Title';\n\nimport expanderListStyles from './styles.module.scss';\n\nexport type ExpanderListColors = PaletteNames;\nexport interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {\n  ListHeader?: ListHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {\n  Expander: ExpanderType;\n}\n\nexport type ExpanderListVariant = 'line' | 'outline' | 'fill';\n\ninterface ExpanderListProps {\n  /** Toggles accordion functionality for the expanders. */\n  accordion?: boolean;\n  /** @deprecated Skal fases ut - Brukes ikke lenger. */\n  bottomBorder?: boolean;\n  /** Items in the ExpanderList */\n  children: React.ReactNode;\n  /** Toggles padding of child elements */\n  childPadding?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the link list background color on hover. */\n  color?: ExpanderListColors;\n  /** Changes the font size. */\n  large?: boolean;\n  /** Opens the first item in the list. */\n  /** @deprecated Skal fases ut til fordel for å bruke expanded-prop på første ExpanderList.Expander */\n  isOpen?: boolean;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** @deprecated Skal fases ut - Brukes ikke lenger. */\n  topBorder?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: ExpanderListVariant;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\ntype ExpanderProps = Modify<\n  React.HTMLAttributes<HTMLButtonElement>,\n  {\n    id?: string;\n    title: JSX.Element | string;\n    /** Changes the underlying element of the title. Default: span*/\n    titleHtmlMarkup?: TitleTags;\n    children: React.ReactNode;\n    className?: string;\n    color?: ExpanderListColors;\n    icon?: React.ReactElement;\n    padding?: boolean;\n    expanded?: boolean;\n    large?: boolean;\n    testId?: string;\n    handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n    /** Called when expander is open/closed. */\n    onExpand?: (isExpanded: boolean) => void;\n  }\n> &\n  Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'sticky' | 'variant'>;\n\nconst Expander: ExpanderType = React.forwardRef<HTMLLIElement, ExpanderProps>((props, ref) => {\n  const {\n    id,\n    children,\n    padding = true,\n    color = 'neutral',\n    className = '',\n    icon,\n    large = false,\n    title,\n    titleHtmlMarkup = 'span',\n    expanded = false,\n    sticky,\n    testId,\n    handleExpanderClick,\n    onExpand,\n    renderChildrenWhenClosed,\n    variant = 'line',\n  } = props;\n  const [isExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLLIElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n\n  const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n  const isJsxTitle = typeof title === 'object';\n\n  const itemClasses = classNames(className, {\n    [expanderListStyles['expander-list__item--' + variant]]: variant,\n    [expanderListStyles['expander-list__item--jsx']]: isJsxTitle,\n  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n    [expanderListStyles['expander-list-link--fill']]: variant === 'fill',\n    [expanderListStyles['expander-list-link--closed']]: !isExpanded,\n    [expanderListStyles['expander-list-link--large']]: large,\n    [expanderListStyles['expander-list-link--jsx']]: isJsxTitle,\n    [expanderListStyles['expander-list-link--sticky']]: isSticky && !isLeavingWindow,\n    [expanderListStyles['expander-list-link--absolute']]: isSticky && isLeavingWindow,\n  });\n\n  const renderContent = () => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const mainContentClasses = classNames(\n      expanderListStyles['expander-list-link__main-content'],\n      isExpanded && expanderListStyles['expander-list-link__main-content--expanded'],\n      padding ? expanderListStyles['expander-list-link__main-content--padding'] : ''\n    );\n\n    return <div className={mainContentClasses}>{children}</div>;\n  };\n\n  return (\n    <li\n      className={itemClasses}\n      ref={mergeRefs([ref, expanderRef])}\n      style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n    >\n      <button\n        type=\"button\"\n        id={id}\n        onClick={handleExpanderClick}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderListExpander}\n        className={expanderClasses}\n        ref={triggerRef}\n        aria-expanded={isExpanded}\n        style={{\n          zIndex: isHovered || isSticky ? ZIndex.ExpanderTrigger : undefined,\n          width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n        }}\n      >\n        {renderListHeader(title, titleHtmlMarkup, isHovered, large ? 'large' : 'medium', isExpanded ? ChevronUp : ChevronDown, icon)}\n      </button>\n      {renderContent()}\n    </li>\n  );\n});\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: {} | null | undefined): element is React.ReactElement<ExpanderProps> =>\n  React.isValidElement<ExpanderProps>(element) && (element as React.ReactElement).type === Expander;\n\nexport const ExpanderList = React.forwardRef((props: ExpanderListProps, ref: React.Ref<HTMLUListElement>) => {\n  const {\n    children,\n    childPadding = true,\n    large,\n    isOpen = false,\n    renderChildrenWhenClosed = false,\n    color,\n    className = '',\n    accordion = false,\n    topBorder = true,\n    bottomBorder = true,\n    sticky = false,\n    testId,\n    variant,\n  } = props;\n  const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n  const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n  const uuid = useUuid();\n  const childCount = React.Children.count(children);\n  const expanderListClasses = classNames(expanderListStyles['expander-list'], className);\n\n  function handleExpanderClick(event: React.MouseEvent<HTMLElement, MouseEvent>, id: string): void {\n    setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    setLatestExpander(event.currentTarget);\n  }\n\n  /** Returns the class modifier top when we want to show the top border and no-bottom when we don't want to show the bottom border */\n  const getExpanderItemClass = (index: number) => {\n    return classNames(expanderListStyles['expander-list__item'], {\n      [expanderListStyles['expander-list__item--top']]: index === 0 && topBorder,\n      [expanderListStyles['expander-list__item--no-bottom']]: index === childCount - 1 && !bottomBorder,\n    });\n  };\n\n  const getExpanderId = (index: number) => `${uuid}-${index}`;\n\n  useEffect(() => {\n    if (accordion && latestExpander && !isElementInViewport(latestExpander)) {\n      latestExpander.scrollIntoView();\n    }\n  }, [accordion, latestExpander]);\n\n  useEffect(() => {\n    if (isOpen) {\n      const id = getExpanderId(0);\n      setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      const newActiveExpander = React.Children.map(children, child => {\n        if (isExpanderComponent(child)) {\n          return child;\n        }\n      })?.reduce((acc, child, index) => {\n        // Expanded-status skal bare settes dersom prop er satt av den som bruker komponenten\n        if (typeof child.props.expanded !== 'undefined') {\n          acc[getExpanderId(index)] = child.props.expanded;\n        }\n        return acc;\n      }, {} as ActiveExpander);\n\n      setActiveExpander({ ...activeExpander, ...newActiveExpander });\n    }\n  }, [children]);\n\n  return (\n    <ul className={expanderListClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderList}>\n      {React.Children.map(children, (child, index) => {\n        if (isExpanderComponent(child)) {\n          const id = getExpanderId(index);\n          const expanded = activeExpander?.[id];\n          const expanderItemClass = getExpanderItemClass(index);\n\n          return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n            id,\n            key: index,\n            expanded,\n            padding: childPadding,\n            color,\n            large,\n            sticky,\n            'aria-expanded': expanded,\n            className: expanderItemClass,\n            handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => handleExpanderClick(event, `${uuid}-${index}`),\n            renderChildrenWhenClosed,\n            variant,\n          });\n        }\n        return child;\n      })}\n    </ul>\n  );\n}) as ExpanderListCompound;\n\nExpanderList.displayName = 'ExpanderList';\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n"],"names":["Expander","React","props","ref","id","children","padding","color","className","icon","large","title","titleHtmlMarkup","expanded","sticky","testId","handleExpanderClick","onExpand","renderChildrenWhenClosed","variant","isExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","isJsxTitle","itemClasses","classNames","expanderListStyles","expanderClasses","renderContent","mainContentClasses","mergeRefs","AnalyticsId","ZIndex","renderListHeader","ChevronUp","ChevronDown","isExpanderComponent","element","ExpanderList","childPadding","isOpen","accordion","topBorder","bottomBorder","activeExpander","setActiveExpander","useState","latestExpander","setLatestExpander","uuid","useUuid","childCount","expanderListClasses","event","prevState","getExpanderItemClass","index","getExpanderId","useEffect","isElementInViewport","newActiveExpander","_a","child","acc","expanderItemClass","ExpanderList$1"],"mappings":"m5CAoFA,MAAMA,EAAyBC,EAAM,WAAyC,CAACC,EAAOC,IAAQ,CACtF,KAAA,CACJ,GAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,GACV,MAAAC,EAAQ,UACR,UAAAC,EAAY,GACZ,KAAAC,EACA,MAAAC,EAAQ,GACR,MAAAC,EACA,gBAAAC,EAAkB,OAClB,SAAAC,EAAW,GACX,OAAAC,EACA,OAAAC,EACA,oBAAAC,EACA,SAAAC,EACA,yBAAAC,EACA,QAAAC,EAAU,MACR,EAAAjB,EACE,CAACkB,CAAU,EAAIC,EAAUR,EAAUI,CAAQ,EAC3CK,EAAcC,EAAsB,IAAI,EACxCC,EAAaD,EAA0B,IAAI,EAC3C,CAAE,UAAAE,CAAA,EAAcC,EAASF,CAAU,EAEnC,CAAE,gBAAAG,EAAiB,gBAAAC,EAAiB,aAAAC,EAAc,aAAAC,GAAiBC,EAAUT,EAAaE,CAAU,EACpGQ,EAAWlB,GAAUM,GAAcO,EACnCM,EAAa,OAAOtB,GAAU,SAE9BuB,EAAcC,EAAW3B,EAAW,CACxC,CAAC4B,EAAmB,wBAA0BjB,CAAO,CAAC,EAAGA,EACzD,CAACiB,EAAmB,0BAA0B,CAAC,EAAGH,CAAA,CACnD,EAEKI,EAAkBF,EAAWC,EAAmB,oBAAoB,EAAGA,EAAmB,uBAAuB7B,GAAO,EAAG,CAC/H,CAAC6B,EAAmB,0BAA0B,CAAC,EAAGjB,IAAY,OAC9D,CAACiB,EAAmB,4BAA4B,CAAC,EAAG,CAAChB,EACrD,CAACgB,EAAmB,2BAA2B,CAAC,EAAG1B,EACnD,CAAC0B,EAAmB,yBAAyB,CAAC,EAAGH,EACjD,CAACG,EAAmB,4BAA4B,CAAC,EAAGJ,GAAY,CAACJ,EACjE,CAACQ,EAAmB,8BAA8B,CAAC,EAAGJ,GAAYJ,CAAA,CACnE,EAEKU,EAAgB,IAAM,CACtB,GAAA,CAACpB,GAA4B,CAACE,EACzB,OAAA,KAGT,MAAMmB,EAAqBJ,EACzBC,EAAmB,kCAAkC,EACrDhB,GAAcgB,EAAmB,4CAA4C,EAC7E9B,EAAU8B,EAAmB,2CAA2C,EAAI,EAAA,EAG9E,OAAQnC,EAAA,cAAA,MAAA,CAAI,UAAWsC,CAAA,EAAqBlC,CAAS,CAAA,EAIrD,OAAAJ,EAAA,cAAC,KAAA,CACC,UAAWiC,EACX,IAAKM,EAAU,CAACrC,EAAKmB,CAAW,CAAC,EACjC,MAAO,CAAE,WAAYU,GAAYH,EAAe,GAAGA,MAAmB,MAAU,CAAA,EAEhF5B,EAAA,cAAC,SAAA,CACC,KAAK,SACL,GAAAG,EACA,QAASY,EACT,cAAaD,EACb,mBAAkB0B,EAAY,qBAC9B,UAAWJ,EACX,IAAKb,EACL,gBAAeJ,EACf,MAAO,CACL,OAAQK,GAAaO,EAAWU,EAAO,gBAAkB,OACzD,MAAOV,GAAYF,EAAe,GAAGA,MAAmB,MAC1D,CAAA,EAECa,EAAiBhC,EAAOC,EAAiBa,EAAWf,EAAQ,QAAU,SAAUU,EAAawB,EAAYC,EAAapC,CAAI,CAC7H,EACC6B,EAAc,CAAA,CAGrB,CAAC,EAIKQ,EAAuBC,GAC3B9C,EAAM,eAA8B8C,CAAO,GAAMA,EAA+B,OAAS/C,EAE9EgD,EAAe/C,EAAM,WAAW,CAACC,EAA0BC,IAAqC,CACrG,KAAA,CACJ,SAAAE,EACA,aAAA4C,EAAe,GACf,MAAAvC,EACA,OAAAwC,EAAS,GACT,yBAAAhC,EAA2B,GAC3B,MAAAX,EACA,UAAAC,EAAY,GACZ,UAAA2C,EAAY,GACZ,UAAAC,EAAY,GACZ,aAAAC,EAAe,GACf,OAAAvC,EAAS,GACT,OAAAC,EACA,QAAAI,CACE,EAAAjB,EACE,CAACoD,EAAgBC,CAAiB,EAAIC,EAAyB,EAC/D,CAACC,EAAgBC,CAAiB,EAAIF,EAAsB,EAC5DG,EAAOC,IACPC,EAAa5D,EAAM,SAAS,MAAMI,CAAQ,EAC1CyD,EAAsB3B,EAAWC,EAAmB,eAAe,EAAG5B,CAAS,EAE5E,SAAAQ,EAAoB+C,EAAkD3D,EAAkB,CAC7EmD,EAAAS,GAAcb,EAAY,CAAE,CAAC/C,CAAE,EAAG,EAAC4D,GAAA,MAAAA,EAAY5D,KAAQ,CAAE,GAAG4D,EAAW,CAAC5D,CAAE,EAAG,EAAC4D,GAAA,MAAAA,EAAY5D,GAAE,CAAI,EAClHsD,EAAkBK,EAAM,aAAa,CACvC,CAGM,MAAAE,EAAwBC,GACrB/B,EAAWC,EAAmB,qBAAqB,EAAG,CAC3D,CAACA,EAAmB,0BAA0B,CAAC,EAAG8B,IAAU,GAAKd,EACjE,CAAChB,EAAmB,gCAAgC,CAAC,EAAG8B,IAAUL,EAAa,GAAK,CAACR,CAAA,CACtF,EAGGc,EAAiBD,GAAkB,GAAGP,KAAQO,IAEpD,OAAAE,EAAU,IAAM,CACVjB,GAAaM,GAAkB,CAACY,EAAoBZ,CAAc,GACpEA,EAAe,eAAe,CAChC,EACC,CAACN,EAAWM,CAAc,CAAC,EAE9BW,EAAU,IAAM,CACd,GAAIlB,EAAQ,CACJ,MAAA9C,EAAK+D,EAAc,CAAC,EACRZ,EAAAS,GAAcb,EAAY,CAAE,CAAC/C,CAAE,EAAG,EAAC4D,GAAA,MAAAA,EAAY5D,KAAQ,CAAE,GAAG4D,EAAW,CAAC5D,CAAE,EAAG,EAAC4D,GAAA,MAAAA,EAAY5D,GAAE,CAAI,EACpH,EACC,CAAC8C,CAAM,CAAC,EAEXkB,EAAU,IAAM,OACd,GAAI,CAAClB,EAAQ,CACX,MAAMoB,GAAoBC,EAAAtE,EAAM,SAAS,IAAII,EAAmBmE,GAAA,CAC1D,GAAA1B,EAAoB0B,CAAK,EACpB,OAAAA,CAEV,CAAA,IAJyB,YAAAD,EAItB,OAAO,CAACE,EAAKD,EAAON,KAElB,OAAOM,EAAM,MAAM,SAAa,MAClCC,EAAIN,EAAcD,CAAK,CAAC,EAAIM,EAAM,MAAM,UAEnCC,GACN,CAAoB,GAEvBlB,EAAkB,CAAE,GAAGD,EAAgB,GAAGgB,CAAmB,CAAA,EAC/D,EACC,CAACjE,CAAQ,CAAC,kBAGV,KAAG,CAAA,UAAWyD,EAAqB,IAAA3D,EAAU,cAAaY,EAAQ,mBAAkB0B,EAAY,YAAA,EAC9FxC,EAAM,SAAS,IAAII,EAAU,CAACmE,EAAON,IAAU,CAC1C,GAAApB,EAAoB0B,CAAK,EAAG,CACxB,MAAApE,EAAK+D,EAAcD,CAAK,EACxBrD,EAAWyC,GAAA,YAAAA,EAAiBlD,GAC5BsE,EAAoBT,EAAqBC,CAAK,EAE7C,OAAAjE,EAAM,aAAauE,EAA4C,CACpE,GAAApE,EACA,IAAK8D,EACL,SAAArD,EACA,QAASoC,EACT,MAAA1C,EACA,MAAAG,EACA,OAAAI,EACA,gBAAiBD,EACjB,UAAW6D,EACX,oBAAsBX,GAAyC/C,EAAoB+C,EAAO,GAAGJ,KAAQO,GAAO,EAC5G,yBAAAhD,EACA,QAAAC,CAAA,CACD,EAEI,OAAAqD,CACR,CAAA,CACH,CAEJ,CAAC,EAEDxB,EAAa,YAAc,eAC3BA,EAAa,SAAWhD,EACxBA,EAAS,YAAc,wBAEvB,MAAA2E,GAAe3B"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useSticky } from '../../hooks/useSticky';\nimport { useUuid } from '../../hooks/useUuid';\nimport { PaletteNames } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\nimport { TitleTags } from '../Title';\n\nimport expanderListStyles from './styles.module.scss';\n\nexport type ExpanderListColors = PaletteNames;\nexport interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {\n  ListHeader?: ListHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {\n  Expander: ExpanderType;\n}\n\nexport type ExpanderListVariant = 'line' | 'outline' | 'fill';\n\ninterface ExpanderListProps {\n  /** Toggles accordion functionality for the expanders. */\n  accordion?: boolean;\n  /** @deprecated Skal fases ut - Brukes ikke lenger. */\n  bottomBorder?: boolean;\n  /** Items in the ExpanderList */\n  children: React.ReactNode;\n  /** Toggles padding of child elements */\n  childPadding?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the link list background color on hover. */\n  color?: ExpanderListColors;\n  /** Changes the font size. */\n  large?: boolean;\n  /** Opens the first item in the list. */\n  /** @deprecated Skal fases ut til fordel for å bruke expanded-prop på første ExpanderList.Expander */\n  isOpen?: boolean;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** @deprecated Skal fases ut - Brukes ikke lenger. */\n  topBorder?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: ExpanderListVariant;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\ntype ExpanderProps = Modify<\n  React.HTMLAttributes<HTMLButtonElement>,\n  {\n    id?: string;\n    title: JSX.Element | string;\n    /** Changes the underlying element of the title. Default: span*/\n    titleHtmlMarkup?: TitleTags;\n    children: React.ReactNode;\n    className?: string;\n    color?: ExpanderListColors;\n    icon?: React.ReactElement;\n    padding?: boolean;\n    expanded?: boolean;\n    large?: boolean;\n    testId?: string;\n    handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n    /** Called when expander is open/closed. */\n    onExpand?: (isExpanded: boolean) => void;\n  }\n> &\n  Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'sticky' | 'variant'>;\n\nconst Expander: ExpanderType = React.forwardRef<HTMLLIElement, ExpanderProps>((props, ref) => {\n  const {\n    id,\n    children,\n    padding = true,\n    color = 'neutral',\n    className = '',\n    icon,\n    large = false,\n    title,\n    titleHtmlMarkup = 'span',\n    expanded = false,\n    sticky,\n    testId,\n    handleExpanderClick,\n    onExpand,\n    renderChildrenWhenClosed,\n    variant = 'line',\n  } = props;\n  const [isExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLLIElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n\n  const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n  const isJsxTitle = typeof title === 'object';\n\n  const itemClasses = classNames(className, {\n    [expanderListStyles['expander-list__item--' + variant]]: variant,\n    [expanderListStyles['expander-list__item--jsx']]: isJsxTitle,\n  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n    [expanderListStyles['expander-list-link--fill']]: variant === 'fill',\n    [expanderListStyles['expander-list-link--closed']]: !isExpanded,\n    [expanderListStyles['expander-list-link--large']]: large,\n    [expanderListStyles['expander-list-link--jsx']]: isJsxTitle,\n    [expanderListStyles['expander-list-link--sticky']]: isSticky && !isLeavingWindow,\n    [expanderListStyles['expander-list-link--absolute']]: isSticky && isLeavingWindow,\n  });\n\n  const renderContent = () => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const mainContentClasses = classNames(\n      expanderListStyles['expander-list-link__main-content'],\n      isExpanded && expanderListStyles['expander-list-link__main-content--expanded'],\n      padding ? expanderListStyles['expander-list-link__main-content--padding'] : ''\n    );\n\n    return <div className={mainContentClasses}>{children}</div>;\n  };\n\n  return (\n    <li\n      className={itemClasses}\n      ref={mergeRefs([ref, expanderRef])}\n      style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n    >\n      <button\n        type=\"button\"\n        id={id}\n        onClick={handleExpanderClick}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderListExpander}\n        className={expanderClasses}\n        ref={triggerRef}\n        aria-expanded={isExpanded}\n        style={{\n          zIndex: isHovered || isSticky ? ZIndex.ExpanderTrigger : undefined,\n          width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n        }}\n      >\n        {renderListHeader(title, titleHtmlMarkup, isHovered, large ? 'large' : 'medium', isExpanded ? ChevronUp : ChevronDown, icon)}\n      </button>\n      {renderContent()}\n    </li>\n  );\n});\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: {} | null | undefined): element is React.ReactElement<ExpanderProps> =>\n  React.isValidElement<ExpanderProps>(element) && (element as React.ReactElement).type === Expander;\n\nexport const ExpanderList = React.forwardRef((props: ExpanderListProps, ref: React.Ref<HTMLUListElement>) => {\n  const {\n    children,\n    childPadding = true,\n    large,\n    isOpen = false,\n    renderChildrenWhenClosed = false,\n    color,\n    className = '',\n    accordion = false,\n    topBorder = true,\n    bottomBorder = true,\n    sticky = false,\n    testId,\n    variant,\n  } = props;\n  const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n  const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n  const uuid = useUuid();\n  const childCount = React.Children.count(children);\n  const expanderListClasses = classNames(expanderListStyles['expander-list'], className);\n\n  function handleExpanderClick(event: React.MouseEvent<HTMLElement, MouseEvent>, id: string): void {\n    setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    setLatestExpander(event.currentTarget);\n  }\n\n  /** Returns the class modifier top when we want to show the top border and no-bottom when we don't want to show the bottom border */\n  const getExpanderItemClass = (index: number) => {\n    return classNames(expanderListStyles['expander-list__item'], {\n      [expanderListStyles['expander-list__item--top']]: index === 0 && topBorder,\n      [expanderListStyles['expander-list__item--no-bottom']]: index === childCount - 1 && !bottomBorder,\n    });\n  };\n\n  const getExpanderId = (index: number) => `${uuid}-${index}`;\n\n  useEffect(() => {\n    if (accordion && latestExpander && !isElementInViewport(latestExpander)) {\n      latestExpander.scrollIntoView();\n    }\n  }, [accordion, latestExpander]);\n\n  useEffect(() => {\n    if (isOpen) {\n      const id = getExpanderId(0);\n      setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      const newActiveExpander = React.Children.map(children, child => {\n        if (isExpanderComponent(child)) {\n          return child;\n        }\n      })?.reduce((acc, child, index) => {\n        // Expanded-status skal bare settes dersom prop er satt av den som bruker komponenten\n        if (typeof child.props.expanded !== 'undefined') {\n          acc[getExpanderId(index)] = child.props.expanded;\n        }\n        return acc;\n      }, {} as ActiveExpander);\n\n      setActiveExpander({ ...activeExpander, ...newActiveExpander });\n    }\n  }, [children]);\n\n  return (\n    <ul className={expanderListClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderList}>\n      {React.Children.map(children, (child, index) => {\n        if (isExpanderComponent(child)) {\n          const id = getExpanderId(index);\n          const expanded = activeExpander?.[id];\n          const expanderItemClass = getExpanderItemClass(index);\n\n          return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n            id,\n            key: index,\n            expanded,\n            padding: childPadding,\n            color,\n            large,\n            sticky,\n            'aria-expanded': expanded,\n            className: expanderItemClass,\n            handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => handleExpanderClick(event, `${uuid}-${index}`),\n            renderChildrenWhenClosed,\n            variant,\n          });\n        }\n        return child;\n      })}\n    </ul>\n  );\n}) as ExpanderListCompound;\n\nExpanderList.displayName = 'ExpanderList';\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n"],"names":["Expander","React","props","ref","id","children","padding","color","className","icon","large","title","titleHtmlMarkup","expanded","sticky","testId","handleExpanderClick","onExpand","renderChildrenWhenClosed","variant","isExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","isJsxTitle","itemClasses","classNames","expanderListStyles","expanderClasses","renderContent","mainContentClasses","mergeRefs","AnalyticsId","ZIndex","renderListHeader","ChevronUp","ChevronDown","isExpanderComponent","element","ExpanderList","childPadding","isOpen","accordion","topBorder","bottomBorder","activeExpander","setActiveExpander","useState","latestExpander","setLatestExpander","uuid","useUuid","childCount","expanderListClasses","event","prevState","getExpanderItemClass","index","getExpanderId","useEffect","isElementInViewport","newActiveExpander","_a","child","acc","expanderItemClass","ExpanderList$1"],"mappings":"27CAoFA,MAAMA,EAAyBC,EAAM,WAAyC,CAACC,EAAOC,IAAQ,CACtF,KAAA,CACJ,GAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,GACV,MAAAC,EAAQ,UACR,UAAAC,EAAY,GACZ,KAAAC,EACA,MAAAC,EAAQ,GACR,MAAAC,EACA,gBAAAC,EAAkB,OAClB,SAAAC,EAAW,GACX,OAAAC,EACA,OAAAC,EACA,oBAAAC,EACA,SAAAC,EACA,yBAAAC,EACA,QAAAC,EAAU,MACR,EAAAjB,EACE,CAACkB,CAAU,EAAIC,EAAUR,EAAUI,CAAQ,EAC3CK,EAAcC,EAAsB,IAAI,EACxCC,EAAaD,EAA0B,IAAI,EAC3C,CAAE,UAAAE,CAAA,EAAcC,EAASF,CAAU,EAEnC,CAAE,gBAAAG,EAAiB,gBAAAC,EAAiB,aAAAC,EAAc,aAAAC,GAAiBC,EAAUT,EAAaE,CAAU,EACpGQ,EAAWlB,GAAUM,GAAcO,EACnCM,EAAa,OAAOtB,GAAU,SAE9BuB,EAAcC,EAAW3B,EAAW,CACxC,CAAC4B,EAAmB,wBAA0BjB,CAAO,CAAC,EAAGA,EACzD,CAACiB,EAAmB,0BAA0B,CAAC,EAAGH,CAAA,CACnD,EAEKI,EAAkBF,EAAWC,EAAmB,oBAAoB,EAAGA,EAAmB,uBAAuB7B,GAAO,EAAG,CAC/H,CAAC6B,EAAmB,0BAA0B,CAAC,EAAGjB,IAAY,OAC9D,CAACiB,EAAmB,4BAA4B,CAAC,EAAG,CAAChB,EACrD,CAACgB,EAAmB,2BAA2B,CAAC,EAAG1B,EACnD,CAAC0B,EAAmB,yBAAyB,CAAC,EAAGH,EACjD,CAACG,EAAmB,4BAA4B,CAAC,EAAGJ,GAAY,CAACJ,EACjE,CAACQ,EAAmB,8BAA8B,CAAC,EAAGJ,GAAYJ,CAAA,CACnE,EAEKU,EAAgB,IAAM,CACtB,GAAA,CAACpB,GAA4B,CAACE,EACzB,OAAA,KAGT,MAAMmB,EAAqBJ,EACzBC,EAAmB,kCAAkC,EACrDhB,GAAcgB,EAAmB,4CAA4C,EAC7E9B,EAAU8B,EAAmB,2CAA2C,EAAI,EAAA,EAG9E,OAAQnC,EAAA,cAAA,MAAA,CAAI,UAAWsC,CAAA,EAAqBlC,CAAS,CAAA,EAIrD,OAAAJ,EAAA,cAAC,KAAA,CACC,UAAWiC,EACX,IAAKM,EAAU,CAACrC,EAAKmB,CAAW,CAAC,EACjC,MAAO,CAAE,WAAYU,GAAYH,EAAe,GAAGA,MAAmB,MAAU,CAAA,EAEhF5B,EAAA,cAAC,SAAA,CACC,KAAK,SACL,GAAAG,EACA,QAASY,EACT,cAAaD,EACb,mBAAkB0B,EAAY,qBAC9B,UAAWJ,EACX,IAAKb,EACL,gBAAeJ,EACf,MAAO,CACL,OAAQK,GAAaO,EAAWU,EAAO,gBAAkB,OACzD,MAAOV,GAAYF,EAAe,GAAGA,MAAmB,MAC1D,CAAA,EAECa,EAAiBhC,EAAOC,EAAiBa,EAAWf,EAAQ,QAAU,SAAUU,EAAawB,EAAYC,EAAapC,CAAI,CAC7H,EACC6B,EAAc,CAAA,CAGrB,CAAC,EAIKQ,EAAuBC,GAC3B9C,EAAM,eAA8B8C,CAAO,GAAMA,EAA+B,OAAS/C,EAE9EgD,EAAe/C,EAAM,WAAW,CAACC,EAA0BC,IAAqC,CACrG,KAAA,CACJ,SAAAE,EACA,aAAA4C,EAAe,GACf,MAAAvC,EACA,OAAAwC,EAAS,GACT,yBAAAhC,EAA2B,GAC3B,MAAAX,EACA,UAAAC,EAAY,GACZ,UAAA2C,EAAY,GACZ,UAAAC,EAAY,GACZ,aAAAC,EAAe,GACf,OAAAvC,EAAS,GACT,OAAAC,EACA,QAAAI,CACE,EAAAjB,EACE,CAACoD,EAAgBC,CAAiB,EAAIC,EAAyB,EAC/D,CAACC,EAAgBC,CAAiB,EAAIF,EAAsB,EAC5DG,EAAOC,IACPC,EAAa5D,EAAM,SAAS,MAAMI,CAAQ,EAC1CyD,EAAsB3B,EAAWC,EAAmB,eAAe,EAAG5B,CAAS,EAE5E,SAAAQ,EAAoB+C,EAAkD3D,EAAkB,CAC7EmD,EAAAS,GAAcb,EAAY,CAAE,CAAC/C,CAAE,EAAG,EAAC4D,GAAA,MAAAA,EAAY5D,KAAQ,CAAE,GAAG4D,EAAW,CAAC5D,CAAE,EAAG,EAAC4D,GAAA,MAAAA,EAAY5D,GAAE,CAAI,EAClHsD,EAAkBK,EAAM,aAAa,CACvC,CAGM,MAAAE,EAAwBC,GACrB/B,EAAWC,EAAmB,qBAAqB,EAAG,CAC3D,CAACA,EAAmB,0BAA0B,CAAC,EAAG8B,IAAU,GAAKd,EACjE,CAAChB,EAAmB,gCAAgC,CAAC,EAAG8B,IAAUL,EAAa,GAAK,CAACR,CAAA,CACtF,EAGGc,EAAiBD,GAAkB,GAAGP,KAAQO,IAEpD,OAAAE,EAAU,IAAM,CACVjB,GAAaM,GAAkB,CAACY,EAAoBZ,CAAc,GACpEA,EAAe,eAAe,CAChC,EACC,CAACN,EAAWM,CAAc,CAAC,EAE9BW,EAAU,IAAM,CACd,GAAIlB,EAAQ,CACJ,MAAA9C,EAAK+D,EAAc,CAAC,EACRZ,EAAAS,GAAcb,EAAY,CAAE,CAAC/C,CAAE,EAAG,EAAC4D,GAAA,MAAAA,EAAY5D,KAAQ,CAAE,GAAG4D,EAAW,CAAC5D,CAAE,EAAG,EAAC4D,GAAA,MAAAA,EAAY5D,GAAE,CAAI,EACpH,EACC,CAAC8C,CAAM,CAAC,EAEXkB,EAAU,IAAM,OACd,GAAI,CAAClB,EAAQ,CACX,MAAMoB,GAAoBC,EAAAtE,EAAM,SAAS,IAAII,EAAmBmE,GAAA,CAC1D,GAAA1B,EAAoB0B,CAAK,EACpB,OAAAA,CAEV,CAAA,IAJyB,YAAAD,EAItB,OAAO,CAACE,EAAKD,EAAON,KAElB,OAAOM,EAAM,MAAM,SAAa,MAClCC,EAAIN,EAAcD,CAAK,CAAC,EAAIM,EAAM,MAAM,UAEnCC,GACN,CAAoB,GAEvBlB,EAAkB,CAAE,GAAGD,EAAgB,GAAGgB,CAAmB,CAAA,EAC/D,EACC,CAACjE,CAAQ,CAAC,kBAGV,KAAG,CAAA,UAAWyD,EAAqB,IAAA3D,EAAU,cAAaY,EAAQ,mBAAkB0B,EAAY,YAAA,EAC9FxC,EAAM,SAAS,IAAII,EAAU,CAACmE,EAAON,IAAU,CAC1C,GAAApB,EAAoB0B,CAAK,EAAG,CACxB,MAAApE,EAAK+D,EAAcD,CAAK,EACxBrD,EAAWyC,GAAA,YAAAA,EAAiBlD,GAC5BsE,EAAoBT,EAAqBC,CAAK,EAE7C,OAAAjE,EAAM,aAAauE,EAA4C,CACpE,GAAApE,EACA,IAAK8D,EACL,SAAArD,EACA,QAASoC,EACT,MAAA1C,EACA,MAAAG,EACA,OAAAI,EACA,gBAAiBD,EACjB,UAAW6D,EACX,oBAAsBX,GAAyC/C,EAAoB+C,EAAO,GAAGJ,KAAQO,GAAO,EAC5G,yBAAAhD,EACA,QAAAC,CAAA,CACD,EAEI,OAAAqD,CACR,CAAA,CACH,CAEJ,CAAC,EAEDxB,EAAa,YAAc,eAC3BA,EAAa,SAAWhD,EACxBA,EAAS,YAAc,wBAEvB,MAAA2E,GAAe3B"}

package/components/FormExample/index.js

@@ -1,4 +1,4 @@
-import f from"react";import{isTest as xt}from"../../utils/environment.js";import{B as pt}from"../../Button.js";import{C as te}from"../../Checkbox.js";import{F as X}from"../../FormGroup.js";import{F as kt,a as Et}from"../../FormLayout.js";import Ge from"../Icons/Hospital.js";import{I as me}from"../../Input.js";import{L}from"../../Label.js";import{R as he}from"../../RadioButton.js";import{S as Ke}from"../../Select.js";import{T as je}from"../../Textarea.js";import{V as Vt}from"../../Validation.js";import be from"./styles.module.scss";import"classnames";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../hooks/usePseudoClasses.js";import"../../utils/refs.js";import"../Icons/Check.js";import"../Checkbox/styles.module.scss";import"../../utils/component.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../FormGroup/styles.module.scss";import"../FormLayout/styles.module.scss";import"../../MaxCharacters.js";import"../MaxCharacters/styles.module.scss";import"../Input/styles.module.scss";import"../../Spacer.js";import"../Spacer/styles.module.scss";import"../Label/styles.module.scss";import"../../StatusDot.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../RadioButton/styles.module.scss";import"../Icons/ChevronDown.js";import"../Select/styles.module.scss";import"../Textarea/styles.module.scss";import"../Validation/styles.module.scss";var ge=e=>e.type==="checkbox",ne=e=>e instanceof Date,I=e=>e==null;const it=e=>typeof e=="object";var O=e=>!I(e)&&!Array.isArray(e)&&it(e)&&!ne(e),_t=e=>O(e)&&e.target?ge(e.target)?e.target.checked:e.target.value:e,At=e=>e.substring(0,e.search(/\.\d+(\.|$)/))||e,Dt=(e,l)=>e.has(At(l)),St=e=>{const l=e.constructor&&e.constructor.prototype;return O(l)&&l.hasOwnProperty("isPrototypeOf")},Me=typeof window<"u"&&typeof window.HTMLElement<"u"&&typeof document<"u";function re(e){let l;const i=Array.isArray(e);if(e instanceof Date)l=new Date(e);else if(e instanceof Set)l=new Set(e);else if(!(Me&&(e instanceof Blob||e instanceof FileList))&&(i||O(e)))if(l=i?[]:{},!Array.isArray(e)&&!St(e))l=e;else for(const r in e)l[r]=re(e[r]);else return e;return l}var ve=e=>Array.isArray(e)?e.filter(Boolean):[],F=e=>e===void 0,y=(e,l,i)=>{if(!l||!O(e))return i;const r=ve(l.split(/[,[\].]+?/)).reduce((s,o)=>I(s)?s:s[o],e);return F(r)||r===e?F(e[l])?i:e[l]:r};const ze={BLUR:"blur",FOCUS_OUT:"focusout",CHANGE:"change"},G={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"},Q={max:"max",min:"min",maxLength:"maxLength",minLength:"minLength",pattern:"pattern",required:"required",validate:"validate"};f.createContext(null);var wt=(e,l,i,r=!0)=>{const s={defaultValues:l._defaultValues};for(const o in e)Object.defineProperty(s,o,{get:()=>{const c=o;return l._proxyFormState[c]!==G.all&&(l._proxyFormState[c]=!r||G.all),i&&(i[c]=!0),e[c]}});return s},P=e=>O(e)&&!Object.keys(e).length,Tt=(e,l,i,r)=>{i(e);const{name:s,...o}=e;return P(o)||Object.keys(o).length>=Object.keys(l).length||Object.keys(o).find(c=>l[c]===(!r||G.all))},we=e=>Array.isArray(e)?e:[e];function Ft(e){const l=f.useRef(e);l.current=e,f.useEffect(()=>{const i=!e.disabled&&l.current.subject&&l.current.subject.subscribe({next:l.current.next});return()=>{i&&i.unsubscribe()}},[e.disabled])}var j=e=>typeof e=="string",Lt=(e,l,i,r,s)=>j(e)?(r&&l.watch.add(e),y(i,e,s)):Array.isArray(e)?e.map(o=>(r&&l.watch.add(o),y(i,o))):(r&&(l.watchAll=!0),i),Re=e=>/^\w*$/.test(e),st=e=>ve(e.replace(/["|']|\]/g,"").split(/\.|\[/));function _(e,l,i){let r=-1;const s=Re(l)?[l]:st(l),o=s.length,c=o-1;for(;++r<o;){const b=s[r];let k=i;if(r!==c){const M=e[b];k=O(M)||Array.isArray(M)?M:isNaN(+s[r+1])?{}:[]}e[b]=k,e=e[b]}return e}var Ot=(e,l,i,r,s)=>l?{...i[e],types:{...i[e]&&i[e].types?i[e].types:{},[r]:s||!0}}:{};const Ce=(e,l,i)=>{for(const r of i||Object.keys(e)){const s=y(e,r);if(s){const{_f:o,...c}=s;if(o&&l(o.name)){if(o.ref.focus){o.ref.focus();break}else if(o.refs&&o.refs[0].focus){o.refs[0].focus();break}}else O(c)&&Ce(c,l)}}};var Je=e=>({isOnSubmit:!e||e===G.onSubmit,isOnBlur:e===G.onBlur,isOnChange:e===G.onChange,isOnAll:e===G.all,isOnTouch:e===G.onTouched}),Qe=(e,l,i)=>!i&&(l.watchAll||l.watch.has(e)||[...l.watch].some(r=>e.startsWith(r)&&/^\.\w+/.test(e.slice(r.length)))),Ct=(e,l,i)=>{const r=ve(y(e,i));return _(r,"root",l[i]),_(e,i,r),e},oe=e=>typeof e=="boolean",Ie=e=>e.type==="file",Y=e=>typeof e=="function",pe=e=>{if(!Me)return!1;const l=e?e.ownerDocument:0;return e instanceof(l&&l.defaultView?l.defaultView.HTMLElement:HTMLElement)},xe=e=>j(e),Ne=e=>e.type==="radio",ke=e=>e instanceof RegExp;const Xe={value:!1,isValid:!1},Ye={value:!0,isValid:!0};var lt=e=>{if(Array.isArray(e)){if(e.length>1){const l=e.filter(i=>i&&i.checked&&!i.disabled).map(i=>i.value);return{value:l,isValid:!!l.length}}return e[0].checked&&!e[0].disabled?e[0].attributes&&!F(e[0].attributes.value)?F(e[0].value)||e[0].value===""?Ye:{value:e[0].value,isValid:!0}:Ye:Xe}return Xe};const Ze={isValid:!1,value:null};var at=e=>Array.isArray(e)?e.reduce((l,i)=>i&&i.checked&&!i.disabled?{isValid:!0,value:i.value}:l,Ze):Ze;function et(e,l,i="validate"){if(xe(e)||Array.isArray(e)&&e.every(xe)||oe(e)&&!e)return{type:i,message:xe(e)?e:"",ref:l}}var ae=e=>O(e)&&!ke(e)?e:{value:e,message:""},tt=async(e,l,i,r,s)=>{const{ref:o,refs:c,required:b,maxLength:k,minLength:M,min:H,max:A,pattern:p,validate:$,name:N,valueAsNumber:ue,mount:se,disabled:ce}=e._f,v=y(l,N);if(!se||ce)return{};const q=c?c[0]:o,B=E=>{r&&q.reportValidity&&(q.setCustomValidity(oe(E)?"":E||""),q.reportValidity())},S={},Z=Ne(o),ee=ge(o),de=Z||ee,U=(ue||Ie(o))&&F(o.value)&&F(v)||pe(o)&&o.value===""||v===""||Array.isArray(v)&&!v.length,K=Ot.bind(null,N,i,S),W=(E,x,h,V=Q.maxLength,T=Q.minLength)=>{const R=E?x:h;S[N]={type:E?V:T,message:R,ref:o,...K(E?V:T,R)}};if(s?!Array.isArray(v)||!v.length:b&&(!de&&(U||I(v))||oe(v)&&!v||ee&&!lt(c).isValid||Z&&!at(c).isValid)){const{value:E,message:x}=xe(b)?{value:!!b,message:b}:ae(b);if(E&&(S[N]={type:Q.required,message:x,ref:q,...K(Q.required,x)},!i))return B(x),S}if(!U&&(!I(H)||!I(A))){let E,x;const h=ae(A),V=ae(H);if(!I(v)&&!isNaN(v)){const T=o.valueAsNumber||v&&+v;I(h.value)||(E=T>h.value),I(V.value)||(x=T<V.value)}else{const T=o.valueAsDate||new Date(v),R=fe=>new Date(new Date().toDateString()+" "+fe),z=o.type=="time",J=o.type=="week";j(h.value)&&v&&(E=z?R(v)>R(h.value):J?v>h.value:T>new Date(h.value)),j(V.value)&&v&&(x=z?R(v)<R(V.value):J?v<V.value:T<new Date(V.value))}if((E||x)&&(W(!!E,h.message,V.message,Q.max,Q.min),!i))return B(S[N].message),S}if((k||M)&&!U&&(j(v)||s&&Array.isArray(v))){const E=ae(k),x=ae(M),h=!I(E.value)&&v.length>+E.value,V=!I(x.value)&&v.length<+x.value;if((h||V)&&(W(h,E.message,x.message),!i))return B(S[N].message),S}if(p&&!U&&j(v)){const{value:E,message:x}=ae(p);if(ke(E)&&!v.match(E)&&(S[N]={type:Q.pattern,message:x,ref:o,...K(Q.pattern,x)},!i))return B(x),S}if($){if(Y($)){const E=await $(v,l),x=et(E,q);if(x&&(S[N]={...x,...K(Q.validate,x.message)},!i))return B(x.message),S}else if(O($)){let E={};for(const x in $){if(!P(E)&&!i)break;const h=et(await $[x](v,l),q,x);h&&(E={...h,...K(x,h.message)},B(h.message),i&&(S[N]=E))}if(!P(E)&&(S[N]={ref:q,...E},!i))return S}}return B(!0),S};function Mt(e,l){const i=l.slice(0,-1).length;let r=0;for(;r<i;)e=F(e)?r++:e[l[r++]];return e}function Rt(e){for(const l in e)if(!F(e[l]))return!1;return!0}function C(e,l){const i=Array.isArray(l)?l:Re(l)?[l]:st(l),r=i.length===1?e:Mt(e,i),s=i.length-1,o=i[s];return r&&delete r[o],s!==0&&(O(r)&&P(r)||Array.isArray(r)&&Rt(r))&&C(e,i.slice(0,-1)),e}function Te(){let e=[];return{get observers(){return e},next:s=>{for(const o of e)o.next&&o.next(s)},subscribe:s=>(e.push(s),{unsubscribe:()=>{e=e.filter(o=>o!==s)}}),unsubscribe:()=>{e=[]}}}var Ee=e=>I(e)||!it(e);function ie(e,l){if(Ee(e)||Ee(l))return e===l;if(ne(e)&&ne(l))return e.getTime()===l.getTime();const i=Object.keys(e),r=Object.keys(l);if(i.length!==r.length)return!1;for(const s of i){const o=e[s];if(!r.includes(s))return!1;if(s!=="ref"){const c=l[s];if(ne(o)&&ne(c)||O(o)&&O(c)||Array.isArray(o)&&Array.isArray(c)?!ie(o,c):o!==c)return!1}}return!0}var nt=e=>e.type==="select-multiple",It=e=>Ne(e)||ge(e),Fe=e=>pe(e)&&e.isConnected,ot=e=>{for(const l in e)if(Y(e[l]))return!0;return!1};function Ve(e,l={}){const i=Array.isArray(e);if(O(e)||i)for(const r in e)Array.isArray(e[r])||O(e[r])&&!ot(e[r])?(l[r]=Array.isArray(e[r])?[]:{},Ve(e[r],l[r])):I(e[r])||(l[r]=!0);return l}function ut(e,l,i){const r=Array.isArray(e);if(O(e)||r)for(const s in e)Array.isArray(e[s])||O(e[s])&&!ot(e[s])?F(l)||Ee(i[s])?i[s]=Array.isArray(e[s])?Ve(e[s],[]):{...Ve(e[s])}:ut(e[s],I(l)?{}:l[s],i[s]):i[s]=!ie(e[s],l[s]);return i}var Le=(e,l)=>ut(e,l,Ve(l)),ct=(e,{valueAsNumber:l,valueAsDate:i,setValueAs:r})=>F(e)?e:l?e===""?NaN:e&&+e:i&&j(e)?new Date(e):r?r(e):e;function Oe(e){const l=e.ref;if(!(e.refs?e.refs.every(i=>i.disabled):l.disabled))return Ie(l)?l.files:Ne(l)?at(e.refs).value:nt(l)?[...l.selectedOptions].map(({value:i})=>i):ge(l)?lt(e.refs).value:ct(F(l.value)?e.ref.value:l.value,e)}var Nt=(e,l,i,r)=>{const s={};for(const o of e){const c=y(l,o);c&&_(s,o,c._f)}return{criteriaMode:i,names:[...e],fields:s,shouldUseNativeValidation:r}},ye=e=>F(e)?e:ke(e)?e.source:O(e)?ke(e.value)?e.value.source:e.value:e,Ut=e=>e.mount&&(e.required||e.min||e.max||e.maxLength||e.minLength||e.pattern||e.validate);function rt(e,l,i){const r=y(e,i);if(r||Re(i))return{error:r,name:i};const s=i.split(".");for(;s.length;){const o=s.join("."),c=y(l,o),b=y(e,o);if(c&&!Array.isArray(c)&&i!==o)return{name:i};if(b&&b.type)return{name:o,error:b};s.pop()}return{name:i}}var qt=(e,l,i,r,s)=>s.isOnAll?!1:!i&&s.isOnTouch?!(l||e):(i?r.isOnBlur:s.isOnBlur)?!e:(i?r.isOnChange:s.isOnChange)?e:!0,Bt=(e,l)=>!ve(y(e,l)).length&&C(e,l);const Pt={mode:G.onSubmit,reValidateMode:G.onChange,shouldFocusError:!0};function Ht(e={},l){let i={...Pt,...e},r={submitCount:0,isDirty:!1,isLoading:Y(i.defaultValues),isValidating:!1,isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,touchedFields:{},dirtyFields:{},errors:{}},s={},o=O(i.defaultValues)||O(i.values)?re(i.defaultValues||i.values)||{}:{},c=i.shouldUnregister?{}:re(o),b={action:!1,mount:!1,watch:!1},k={mount:new Set,unMount:new Set,array:new Set,watch:new Set},M,H=0;const A={isDirty:!1,dirtyFields:!1,touchedFields:!1,isValidating:!1,isValid:!1,errors:!1},p={values:Te(),array:Te(),state:Te()},$=e.resetOptions&&e.resetOptions.keepDirtyValues,N=Je(i.mode),ue=Je(i.reValidateMode),se=i.criteriaMode===G.all,ce=t=>a=>{clearTimeout(H),H=setTimeout(t,a)},v=async t=>{if(A.isValid||t){const a=i.resolver?P((await U()).errors):await W(s,!0);a!==r.isValid&&p.state.next({isValid:a})}},q=t=>A.isValidating&&p.state.next({isValidating:t}),B=(t,a=[],n,m,d=!0,u=!0)=>{if(m&&n){if(b.action=!0,u&&Array.isArray(y(s,t))){const g=n(y(s,t),m.argA,m.argB);d&&_(s,t,g)}if(u&&Array.isArray(y(r.errors,t))){const g=n(y(r.errors,t),m.argA,m.argB);d&&_(r.errors,t,g),Bt(r.errors,t)}if(A.touchedFields&&u&&Array.isArray(y(r.touchedFields,t))){const g=n(y(r.touchedFields,t),m.argA,m.argB);d&&_(r.touchedFields,t,g)}A.dirtyFields&&(r.dirtyFields=Le(o,c)),p.state.next({name:t,isDirty:x(t,a),dirtyFields:r.dirtyFields,errors:r.errors,isValid:r.isValid})}else _(c,t,a)},S=(t,a)=>{_(r.errors,t,a),p.state.next({errors:r.errors})},Z=(t,a,n,m)=>{const d=y(s,t);if(d){const u=y(c,t,F(n)?y(o,t):n);F(u)||m&&m.defaultChecked||a?_(c,t,a?u:Oe(d._f)):T(t,u),b.mount&&v()}},ee=(t,a,n,m,d)=>{let u=!1,g=!1;const D={name:t};if(!n||m){A.isDirty&&(g=r.isDirty,r.isDirty=D.isDirty=x(),u=g!==D.isDirty);const w=ie(y(o,t),a);g=y(r.dirtyFields,t),w?C(r.dirtyFields,t):_(r.dirtyFields,t,!0),D.dirtyFields=r.dirtyFields,u=u||A.dirtyFields&&g!==!w}if(n){const w=y(r.touchedFields,t);w||(_(r.touchedFields,t,n),D.touchedFields=r.touchedFields,u=u||A.touchedFields&&w!==n)}return u&&d&&p.state.next(D),u?D:{}},de=(t,a,n,m)=>{const d=y(r.errors,t),u=A.isValid&&oe(a)&&r.isValid!==a;if(e.delayError&&n?(M=ce(()=>S(t,n)),M(e.delayError)):(clearTimeout(H),M=null,n?_(r.errors,t,n):C(r.errors,t)),(n?!ie(d,n):d)||!P(m)||u){const g={...m,...u&&oe(a)?{isValid:a}:{},errors:r.errors,name:t};r={...r,...g},p.state.next(g)}q(!1)},U=async t=>i.resolver(c,i.context,Nt(t||k.mount,s,i.criteriaMode,i.shouldUseNativeValidation)),K=async t=>{const{errors:a}=await U();if(t)for(const n of t){const m=y(a,n);m?_(r.errors,n,m):C(r.errors,n)}else r.errors=a;return a},W=async(t,a,n={valid:!0})=>{for(const m in t){const d=t[m];if(d){const{_f:u,...g}=d;if(u){const D=k.array.has(u.name),w=await tt(d,c,se,i.shouldUseNativeValidation&&!a,D);if(w[u.name]&&(n.valid=!1,a))break;!a&&(y(w,u.name)?D?Ct(r.errors,w,u.name):_(r.errors,u.name,w[u.name]):C(r.errors,u.name))}g&&await W(g,a,n)}}return n.valid},E=()=>{for(const t of k.unMount){const a=y(s,t);a&&(a._f.refs?a._f.refs.every(n=>!Fe(n)):!Fe(a._f.ref))&&_e(t)}k.unMount=new Set},x=(t,a)=>(t&&a&&_(c,t,a),!ie(Ue(),o)),h=(t,a,n)=>Lt(t,k,{...b.mount?c:F(a)?o:j(t)?{[t]:a}:a},n,a),V=t=>ve(y(b.mount?c:o,t,e.shouldUnregister?y(o,t,[]):[])),T=(t,a,n={})=>{const m=y(s,t);let d=a;if(m){const u=m._f;u&&(!u.disabled&&_(c,t,ct(a,u)),d=pe(u.ref)&&I(a)?"":a,nt(u.ref)?[...u.ref.options].forEach(g=>g.selected=d.includes(g.value)):u.refs?ge(u.ref)?u.refs.length>1?u.refs.forEach(g=>(!g.defaultChecked||!g.disabled)&&(g.checked=Array.isArray(d)?!!d.find(D=>D===g.value):d===g.value)):u.refs[0]&&(u.refs[0].checked=!!d):u.refs.forEach(g=>g.checked=g.value===d):Ie(u.ref)?u.ref.value="":(u.ref.value=d,u.ref.type||p.values.next({name:t,values:{...c}})))}(n.shouldDirty||n.shouldTouch)&&ee(t,d,n.shouldTouch,n.shouldDirty,!0),n.shouldValidate&&fe(t)},R=(t,a,n)=>{for(const m in a){const d=a[m],u=`${t}.${m}`,g=y(s,u);(k.array.has(t)||!Ee(d)||g&&!g._f)&&!ne(d)?R(u,d,n):T(u,d,n)}},z=(t,a,n={})=>{const m=y(s,t),d=k.array.has(t),u=re(a);_(c,t,u),d?(p.array.next({name:t,values:{...c}}),(A.isDirty||A.dirtyFields)&&n.shouldDirty&&p.state.next({name:t,dirtyFields:Le(o,c),isDirty:x(t,u)})):m&&!m._f&&!I(u)?R(t,u,n):T(t,u,n),Qe(t,k)&&p.state.next({...r}),p.values.next({name:t,values:{...c}}),!b.mount&&l()},J=async t=>{const a=t.target;let n=a.name,m=!0;const d=y(s,n),u=()=>a.type?Oe(d._f):_t(t);if(d){let g,D;const w=u(),le=t.type===ze.BLUR||t.type===ze.FOCUS_OUT,vt=!Ut(d._f)&&!i.resolver&&!y(r.errors,n)&&!d._f.deps||qt(le,y(r.touchedFields,n),r.isSubmitted,ue,N),De=Qe(n,k,le);_(c,n,w),le?(d._f.onBlur&&d._f.onBlur(t),M&&M(0)):d._f.onChange&&d._f.onChange(t);const Se=ee(n,w,le,!1),ht=!P(Se)||De;if(!le&&p.values.next({name:n,type:t.type,values:{...c}}),vt)return A.isValid&&v(),ht&&p.state.next({name:n,...De?{}:Se});if(!le&&De&&p.state.next({...r}),q(!0),i.resolver){const{errors:$e}=await U([n]),bt=rt(r.errors,s,n),We=rt($e,s,bt.name||n);g=We.error,n=We.name,D=P($e)}else g=(await tt(d,c,se,i.shouldUseNativeValidation))[n],m=isNaN(w)||w===y(c,n,w),m&&(g?D=!1:A.isValid&&(D=await W(s,!0)));m&&(d._f.deps&&fe(d._f.deps),de(n,D,g,Se))}},fe=async(t,a={})=>{let n,m;const d=we(t);if(q(!0),i.resolver){const u=await K(F(t)?t:d);n=P(u),m=t?!d.some(g=>y(u,g)):n}else t?(m=(await Promise.all(d.map(async u=>{const g=y(s,u);return await W(g&&g._f?{[u]:g}:g)}))).every(Boolean),!(!m&&!r.isValid)&&v()):m=n=await W(s);return p.state.next({...!j(t)||A.isValid&&n!==r.isValid?{}:{name:t},...i.resolver||!t?{isValid:n}:{},errors:r.errors,isValidating:!1}),a.shouldFocus&&!m&&Ce(s,u=>u&&y(r.errors,u),t?d:k.mount),m},Ue=t=>{const a={...o,...b.mount?c:{}};return F(t)?a:j(t)?y(a,t):t.map(n=>y(a,n))},qe=(t,a)=>({invalid:!!y((a||r).errors,t),isDirty:!!y((a||r).dirtyFields,t),isTouched:!!y((a||r).touchedFields,t),error:y((a||r).errors,t)}),dt=t=>{t&&we(t).forEach(a=>C(r.errors,a)),p.state.next({errors:t?r.errors:{}})},ft=(t,a,n)=>{const m=(y(s,t,{_f:{}})._f||{}).ref;_(r.errors,t,{...a,ref:m}),p.state.next({name:t,errors:r.errors,isValid:!1}),n&&n.shouldFocus&&m&&m.focus&&m.focus()},mt=(t,a)=>Y(t)?p.values.subscribe({next:n=>t(h(void 0,a),n)}):h(t,a,!0),_e=(t,a={})=>{for(const n of t?we(t):k.mount)k.mount.delete(n),k.array.delete(n),a.keepValue||(C(s,n),C(c,n)),!a.keepError&&C(r.errors,n),!a.keepDirty&&C(r.dirtyFields,n),!a.keepTouched&&C(r.touchedFields,n),!i.shouldUnregister&&!a.keepDefaultValue&&C(o,n);p.values.next({values:{...c}}),p.state.next({...r,...a.keepDirty?{isDirty:x()}:{}}),!a.keepIsValid&&v()},Ae=(t,a={})=>{let n=y(s,t);const m=oe(a.disabled);return _(s,t,{...n||{},_f:{...n&&n._f?n._f:{ref:{name:t}},name:t,mount:!0,...a}}),k.mount.add(t),n?m&&_(c,t,a.disabled?void 0:y(c,t,Oe(n._f))):Z(t,!0,a.value),{...m?{disabled:a.disabled}:{},...i.shouldUseNativeValidation?{required:!!a.required,min:ye(a.min),max:ye(a.max),minLength:ye(a.minLength),maxLength:ye(a.maxLength),pattern:ye(a.pattern)}:{},name:t,onChange:J,onBlur:J,ref:d=>{if(d){Ae(t,a),n=y(s,t);const u=F(d.value)&&d.querySelectorAll&&d.querySelectorAll("input,select,textarea")[0]||d,g=It(u),D=n._f.refs||[];if(g?D.find(w=>w===u):u===n._f.ref)return;_(s,t,{_f:{...n._f,...g?{refs:[...D.filter(Fe),u,...Array.isArray(y(o,t))?[{}]:[]],ref:{type:u.type,name:t}}:{ref:u}}}),Z(t,!1,void 0,u)}else n=y(s,t,{}),n._f&&(n._f.mount=!1),(i.shouldUnregister||a.shouldUnregister)&&!(Dt(k.array,t)&&b.action)&&k.unMount.add(t)}}},Be=()=>i.shouldFocusError&&Ce(s,t=>t&&y(r.errors,t),k.mount),yt=(t,a)=>async n=>{n&&(n.preventDefault&&n.preventDefault(),n.persist&&n.persist());let m=re(c);if(p.state.next({isSubmitting:!0}),i.resolver){const{errors:d,values:u}=await U();r.errors=d,m=u}else await W(s);C(r.errors,"root"),P(r.errors)?(p.state.next({errors:{}}),await t(m,n)):(a&&await a({...r.errors},n),Be(),setTimeout(Be)),p.state.next({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:P(r.errors),submitCount:r.submitCount+1,errors:r.errors})},gt=(t,a={})=>{y(s,t)&&(F(a.defaultValue)?z(t,y(o,t)):(z(t,a.defaultValue),_(o,t,a.defaultValue)),a.keepTouched||C(r.touchedFields,t),a.keepDirty||(C(r.dirtyFields,t),r.isDirty=a.defaultValue?x(t,y(o,t)):x()),a.keepError||(C(r.errors,t),A.isValid&&v()),p.state.next({...r}))},Pe=(t,a={})=>{const n=t||o,m=re(n),d=t&&!P(t)?m:o;if(a.keepDefaultValues||(o=n),!a.keepValues){if(a.keepDirtyValues||$)for(const u of k.mount)y(r.dirtyFields,u)?_(d,u,y(c,u)):z(u,y(d,u));else{if(Me&&F(t))for(const u of k.mount){const g=y(s,u);if(g&&g._f){const D=Array.isArray(g._f.refs)?g._f.refs[0]:g._f.ref;if(pe(D)){const w=D.closest("form");if(w){w.reset();break}}}}s={}}c=e.shouldUnregister?a.keepDefaultValues?re(o):{}:m,p.array.next({values:{...d}}),p.values.next({values:{...d}})}k={mount:new Set,unMount:new Set,array:new Set,watch:new Set,watchAll:!1,focus:""},!b.mount&&l(),b.mount=!A.isValid||!!a.keepIsValid,b.watch=!!e.shouldUnregister,p.state.next({submitCount:a.keepSubmitCount?r.submitCount:0,isDirty:a.keepDirty?r.isDirty:!!(a.keepDefaultValues&&!ie(t,o)),isSubmitted:a.keepIsSubmitted?r.isSubmitted:!1,dirtyFields:a.keepDirtyValues?r.dirtyFields:a.keepDefaultValues&&t?Le(o,t):{},touchedFields:a.keepTouched?r.touchedFields:{},errors:a.keepErrors?r.errors:{},isSubmitting:!1,isSubmitSuccessful:!1})},He=(t,a)=>Pe(Y(t)?t(c):t,a);return{control:{register:Ae,unregister:_e,getFieldState:qe,_executeSchema:U,_getWatch:h,_getDirty:x,_updateValid:v,_removeUnmounted:E,_updateFieldArray:B,_getFieldArray:V,_reset:Pe,_resetDefaultValues:()=>Y(i.defaultValues)&&i.defaultValues().then(t=>{He(t,i.resetOptions),p.state.next({isLoading:!1})}),_updateFormState:t=>{r={...r,...t}},_subjects:p,_proxyFormState:A,get _fields(){return s},get _formValues(){return c},get _state(){return b},set _state(t){b=t},get _defaultValues(){return o},get _names(){return k},set _names(t){k=t},get _formState(){return r},set _formState(t){r=t},get _options(){return i},set _options(t){i={...i,...t}}},trigger:fe,register:Ae,handleSubmit:yt,watch:mt,setValue:z,getValues:Ue,reset:He,resetField:gt,clearErrors:dt,unregister:_e,setError:ft,setFocus:(t,a={})=>{const n=y(s,t),m=n&&n._f;if(m){const d=m.refs?m.refs[0]:m.ref;d.focus&&(d.focus(),a.shouldSelect&&d.select())}},getFieldState:qe}}function $t(e={}){const l=f.useRef(),[i,r]=f.useState({isDirty:!1,isValidating:!1,isLoading:Y(e.defaultValues),isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,submitCount:0,dirtyFields:{},touchedFields:{},errors:{},defaultValues:Y(e.defaultValues)?void 0:e.defaultValues});l.current||(l.current={...Ht(e,()=>r(o=>({...o}))),formState:i});const s=l.current.control;return s._options=e,Ft({subject:s._subjects.state,next:o=>{Tt(o,s._proxyFormState,s._updateFormState,!0)&&r({...s._formState})}}),f.useEffect(()=>{e.values&&!ie(e.values,s._defaultValues)?s._reset(e.values,s._options.resetOptions):s._resetDefaultValues()},[e.values,s]),f.useEffect(()=>{s._state.mount||(s._updateValid(),s._state.mount=!0),s._state.watch&&(s._state.watch=!1,s._subjects.state.next({...s._formState})),s._removeUnmounted()}),l.current.formState=wt(i,s),l.current}var Wt=(e=>(e.formgroup="formgroup",e.checkbox="checkbox",e.radiobutton="radiobutton",e.textarea="textarea",e.input="input",e.select="select",e.date="date",e))(Wt||{});const Gt=e=>{const{exampleType:l="formgroup"}=e,{register:i,handleSubmit:r,formState:{errors:s}}=$t(),o=new Date;o.setHours(0),o.setMinutes(0),o.setSeconds(0);const c=new Date;c.setDate(o.getDate()-5),c.setHours(6),c.setMinutes(10),c.setSeconds(0);const b=new Date;b.setDate(o.getDate()+5),b.setHours(22),b.setMinutes(0),b.setSeconds(0);const k="field1",M="field2",H="field3",A="field4",p="field5",$="field6",N="field7",ue="field8",se="field9",ce=s.field1||s.field2||s.field3||s.field4||s.field5||s.field6||s.field7||s.field8||s.field9,v="Du må velge et alternativ",q="Du må velge to alternativ",B="Det kan ikke legges inn mer enn 40 tegn",S="Du må skrive noe her",Z='Du må velge "Option 2"',ee=`Du må velge dato mellom ${c.toLocaleDateString("nb")} og ${b.toLocaleDateString("nb")}`,de=`Du må skrive inn tidspunkt mellom ${c.toLocaleTimeString("nb",{hour:"2-digit",minute:"2-digit"})} og ${b.toLocaleTimeString("nb",{hour:"2-digit",minute:"2-digit"})}`,U=h=>h.length>=2||q,K=h=>h.toString()==="Option 2"||Z,W=(h,V,T)=>{const R=new Date(h);return!!h&&R.getTime()>=V.getTime()&&R.getTime()<=T.getTime()||ee},E=(h,V)=>{const T=new Date;T.setHours(h),T.setMinutes(V),T.setSeconds(0);const R=c.toLocaleTimeString("nb"),z=b.toLocaleTimeString("nb"),J=T.toLocaleTimeString("nb");return console.log("value",J),!!T&&J>=R&&J<=z||de},x=()=>{if(l==="formgroup"){const h=[f.createElement(te,{key:0,inputId:"checkbox1",label:f.createElement(L,{labelTexts:[{text:"Checkbox 1"}]}),...i(k,{required:v})}),f.createElement(te,{key:1,inputId:"checkbox2",label:f.createElement(L,{labelTexts:[{text:"Checkbox 2"}]}),...i(k,{required:v})}),f.createElement(te,{key:2,inputId:"checkbox3",label:f.createElement(L,{labelTexts:[{text:"Checkbox 3"}]}),...i(k,{required:v})})];return[f.createElement(X,{key:0,title:"Gruppe tittel",legend:"Velg minst en",error:s.field1?s.field1.message:void 0,variant:e.variant},f.createElement(kt,{maxColumns:Et.two},h.map(V=>V))),f.createElement(X,{key:1,legend:"Velg minst to",error:s.field2?s.field2.message:void 0,variant:e.variant},f.createElement(te,{inputId:"checkbox4",label:f.createElement(L,{labelTexts:[{text:"Checkbox 4"}]}),...i(M,{validate:U})}),f.createElement(te,{inputId:"checkbox5",label:f.createElement(L,{labelTexts:[{text:"Checkbox 5"}]}),...i(M,{validate:U})}),f.createElement(te,{inputId:"checkbox6",label:f.createElement(L,{labelTexts:[{text:"Checkbox 6"}]}),...i(M,{validate:U})})),f.createElement(X,{key:2,legend:"Velg en",error:s.field3?s.field3.message:void 0,variant:e.variant},f.createElement(he,{inputId:"radiobutton1",label:f.createElement(L,{labelTexts:[{text:"Radiobutton 1"}]}),...i(H,{required:v})}),f.createElement(he,{inputId:"radiobutton2",label:f.createElement(L,{labelTexts:[{text:"Radiobutton 2"}]}),...i(H,{required:v})}),f.createElement(he,{inputId:"radiobutton3",label:f.createElement(L,{labelTexts:[{text:"Radiobutton 3"}]}),...i(H,{required:v})})),f.createElement(X,{key:3,error:s.field4?s.field4.message:void 0},f.createElement(je,{defaultValue:`Dette er en test 
+import f from"react";import{isTest as xt}from"../../utils/environment.js";import{B as pt}from"../../Button.js";import{C as te}from"../../Checkbox.js";import{F as X}from"../../FormGroup.js";import{F as kt,a as Et}from"../../FormLayout.js";import Ge from"../Icons/Hospital.js";import{I as me}from"../../Input.js";import{L}from"../../Label.js";import{R as he}from"../../RadioButton.js";import{S as Ke}from"../../Select.js";import{T as je}from"../../Textarea.js";import{V as Vt}from"../../Validation.js";import be from"./styles.module.scss";import"classnames";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../utils/refs.js";import"../Icons/Check.js";import"../Checkbox/styles.module.scss";import"../../utils/component.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../FormGroup/styles.module.scss";import"../FormLayout/styles.module.scss";import"../../MaxCharacters.js";import"../MaxCharacters/styles.module.scss";import"../Input/styles.module.scss";import"../../Spacer.js";import"../Spacer/styles.module.scss";import"../Label/styles.module.scss";import"../../StatusDot.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../RadioButton/styles.module.scss";import"../Icons/ChevronDown.js";import"../Select/styles.module.scss";import"../Textarea/styles.module.scss";import"../Validation/styles.module.scss";var ge=e=>e.type==="checkbox",ne=e=>e instanceof Date,I=e=>e==null;const it=e=>typeof e=="object";var O=e=>!I(e)&&!Array.isArray(e)&&it(e)&&!ne(e),_t=e=>O(e)&&e.target?ge(e.target)?e.target.checked:e.target.value:e,At=e=>e.substring(0,e.search(/\.\d+(\.|$)/))||e,Dt=(e,l)=>e.has(At(l)),St=e=>{const l=e.constructor&&e.constructor.prototype;return O(l)&&l.hasOwnProperty("isPrototypeOf")},Me=typeof window<"u"&&typeof window.HTMLElement<"u"&&typeof document<"u";function re(e){let l;const i=Array.isArray(e);if(e instanceof Date)l=new Date(e);else if(e instanceof Set)l=new Set(e);else if(!(Me&&(e instanceof Blob||e instanceof FileList))&&(i||O(e)))if(l=i?[]:{},!Array.isArray(e)&&!St(e))l=e;else for(const r in e)l[r]=re(e[r]);else return e;return l}var ve=e=>Array.isArray(e)?e.filter(Boolean):[],F=e=>e===void 0,y=(e,l,i)=>{if(!l||!O(e))return i;const r=ve(l.split(/[,[\].]+?/)).reduce((s,o)=>I(s)?s:s[o],e);return F(r)||r===e?F(e[l])?i:e[l]:r};const ze={BLUR:"blur",FOCUS_OUT:"focusout",CHANGE:"change"},G={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"},Q={max:"max",min:"min",maxLength:"maxLength",minLength:"minLength",pattern:"pattern",required:"required",validate:"validate"};f.createContext(null);var wt=(e,l,i,r=!0)=>{const s={defaultValues:l._defaultValues};for(const o in e)Object.defineProperty(s,o,{get:()=>{const c=o;return l._proxyFormState[c]!==G.all&&(l._proxyFormState[c]=!r||G.all),i&&(i[c]=!0),e[c]}});return s},P=e=>O(e)&&!Object.keys(e).length,Tt=(e,l,i,r)=>{i(e);const{name:s,...o}=e;return P(o)||Object.keys(o).length>=Object.keys(l).length||Object.keys(o).find(c=>l[c]===(!r||G.all))},we=e=>Array.isArray(e)?e:[e];function Ft(e){const l=f.useRef(e);l.current=e,f.useEffect(()=>{const i=!e.disabled&&l.current.subject&&l.current.subject.subscribe({next:l.current.next});return()=>{i&&i.unsubscribe()}},[e.disabled])}var j=e=>typeof e=="string",Lt=(e,l,i,r,s)=>j(e)?(r&&l.watch.add(e),y(i,e,s)):Array.isArray(e)?e.map(o=>(r&&l.watch.add(o),y(i,o))):(r&&(l.watchAll=!0),i),Re=e=>/^\w*$/.test(e),st=e=>ve(e.replace(/["|']|\]/g,"").split(/\.|\[/));function _(e,l,i){let r=-1;const s=Re(l)?[l]:st(l),o=s.length,c=o-1;for(;++r<o;){const b=s[r];let k=i;if(r!==c){const M=e[b];k=O(M)||Array.isArray(M)?M:isNaN(+s[r+1])?{}:[]}e[b]=k,e=e[b]}return e}var Ot=(e,l,i,r,s)=>l?{...i[e],types:{...i[e]&&i[e].types?i[e].types:{},[r]:s||!0}}:{};const Ce=(e,l,i)=>{for(const r of i||Object.keys(e)){const s=y(e,r);if(s){const{_f:o,...c}=s;if(o&&l(o.name)){if(o.ref.focus){o.ref.focus();break}else if(o.refs&&o.refs[0].focus){o.refs[0].focus();break}}else O(c)&&Ce(c,l)}}};var Je=e=>({isOnSubmit:!e||e===G.onSubmit,isOnBlur:e===G.onBlur,isOnChange:e===G.onChange,isOnAll:e===G.all,isOnTouch:e===G.onTouched}),Qe=(e,l,i)=>!i&&(l.watchAll||l.watch.has(e)||[...l.watch].some(r=>e.startsWith(r)&&/^\.\w+/.test(e.slice(r.length)))),Ct=(e,l,i)=>{const r=ve(y(e,i));return _(r,"root",l[i]),_(e,i,r),e},oe=e=>typeof e=="boolean",Ie=e=>e.type==="file",Y=e=>typeof e=="function",pe=e=>{if(!Me)return!1;const l=e?e.ownerDocument:0;return e instanceof(l&&l.defaultView?l.defaultView.HTMLElement:HTMLElement)},xe=e=>j(e),Ne=e=>e.type==="radio",ke=e=>e instanceof RegExp;const Xe={value:!1,isValid:!1},Ye={value:!0,isValid:!0};var lt=e=>{if(Array.isArray(e)){if(e.length>1){const l=e.filter(i=>i&&i.checked&&!i.disabled).map(i=>i.value);return{value:l,isValid:!!l.length}}return e[0].checked&&!e[0].disabled?e[0].attributes&&!F(e[0].attributes.value)?F(e[0].value)||e[0].value===""?Ye:{value:e[0].value,isValid:!0}:Ye:Xe}return Xe};const Ze={isValid:!1,value:null};var at=e=>Array.isArray(e)?e.reduce((l,i)=>i&&i.checked&&!i.disabled?{isValid:!0,value:i.value}:l,Ze):Ze;function et(e,l,i="validate"){if(xe(e)||Array.isArray(e)&&e.every(xe)||oe(e)&&!e)return{type:i,message:xe(e)?e:"",ref:l}}var ae=e=>O(e)&&!ke(e)?e:{value:e,message:""},tt=async(e,l,i,r,s)=>{const{ref:o,refs:c,required:b,maxLength:k,minLength:M,min:H,max:A,pattern:p,validate:$,name:N,valueAsNumber:ue,mount:se,disabled:ce}=e._f,v=y(l,N);if(!se||ce)return{};const q=c?c[0]:o,B=E=>{r&&q.reportValidity&&(q.setCustomValidity(oe(E)?"":E||""),q.reportValidity())},S={},Z=Ne(o),ee=ge(o),de=Z||ee,U=(ue||Ie(o))&&F(o.value)&&F(v)||pe(o)&&o.value===""||v===""||Array.isArray(v)&&!v.length,K=Ot.bind(null,N,i,S),W=(E,x,h,V=Q.maxLength,T=Q.minLength)=>{const R=E?x:h;S[N]={type:E?V:T,message:R,ref:o,...K(E?V:T,R)}};if(s?!Array.isArray(v)||!v.length:b&&(!de&&(U||I(v))||oe(v)&&!v||ee&&!lt(c).isValid||Z&&!at(c).isValid)){const{value:E,message:x}=xe(b)?{value:!!b,message:b}:ae(b);if(E&&(S[N]={type:Q.required,message:x,ref:q,...K(Q.required,x)},!i))return B(x),S}if(!U&&(!I(H)||!I(A))){let E,x;const h=ae(A),V=ae(H);if(!I(v)&&!isNaN(v)){const T=o.valueAsNumber||v&&+v;I(h.value)||(E=T>h.value),I(V.value)||(x=T<V.value)}else{const T=o.valueAsDate||new Date(v),R=fe=>new Date(new Date().toDateString()+" "+fe),z=o.type=="time",J=o.type=="week";j(h.value)&&v&&(E=z?R(v)>R(h.value):J?v>h.value:T>new Date(h.value)),j(V.value)&&v&&(x=z?R(v)<R(V.value):J?v<V.value:T<new Date(V.value))}if((E||x)&&(W(!!E,h.message,V.message,Q.max,Q.min),!i))return B(S[N].message),S}if((k||M)&&!U&&(j(v)||s&&Array.isArray(v))){const E=ae(k),x=ae(M),h=!I(E.value)&&v.length>+E.value,V=!I(x.value)&&v.length<+x.value;if((h||V)&&(W(h,E.message,x.message),!i))return B(S[N].message),S}if(p&&!U&&j(v)){const{value:E,message:x}=ae(p);if(ke(E)&&!v.match(E)&&(S[N]={type:Q.pattern,message:x,ref:o,...K(Q.pattern,x)},!i))return B(x),S}if($){if(Y($)){const E=await $(v,l),x=et(E,q);if(x&&(S[N]={...x,...K(Q.validate,x.message)},!i))return B(x.message),S}else if(O($)){let E={};for(const x in $){if(!P(E)&&!i)break;const h=et(await $[x](v,l),q,x);h&&(E={...h,...K(x,h.message)},B(h.message),i&&(S[N]=E))}if(!P(E)&&(S[N]={ref:q,...E},!i))return S}}return B(!0),S};function Mt(e,l){const i=l.slice(0,-1).length;let r=0;for(;r<i;)e=F(e)?r++:e[l[r++]];return e}function Rt(e){for(const l in e)if(!F(e[l]))return!1;return!0}function C(e,l){const i=Array.isArray(l)?l:Re(l)?[l]:st(l),r=i.length===1?e:Mt(e,i),s=i.length-1,o=i[s];return r&&delete r[o],s!==0&&(O(r)&&P(r)||Array.isArray(r)&&Rt(r))&&C(e,i.slice(0,-1)),e}function Te(){let e=[];return{get observers(){return e},next:s=>{for(const o of e)o.next&&o.next(s)},subscribe:s=>(e.push(s),{unsubscribe:()=>{e=e.filter(o=>o!==s)}}),unsubscribe:()=>{e=[]}}}var Ee=e=>I(e)||!it(e);function ie(e,l){if(Ee(e)||Ee(l))return e===l;if(ne(e)&&ne(l))return e.getTime()===l.getTime();const i=Object.keys(e),r=Object.keys(l);if(i.length!==r.length)return!1;for(const s of i){const o=e[s];if(!r.includes(s))return!1;if(s!=="ref"){const c=l[s];if(ne(o)&&ne(c)||O(o)&&O(c)||Array.isArray(o)&&Array.isArray(c)?!ie(o,c):o!==c)return!1}}return!0}var nt=e=>e.type==="select-multiple",It=e=>Ne(e)||ge(e),Fe=e=>pe(e)&&e.isConnected,ot=e=>{for(const l in e)if(Y(e[l]))return!0;return!1};function Ve(e,l={}){const i=Array.isArray(e);if(O(e)||i)for(const r in e)Array.isArray(e[r])||O(e[r])&&!ot(e[r])?(l[r]=Array.isArray(e[r])?[]:{},Ve(e[r],l[r])):I(e[r])||(l[r]=!0);return l}function ut(e,l,i){const r=Array.isArray(e);if(O(e)||r)for(const s in e)Array.isArray(e[s])||O(e[s])&&!ot(e[s])?F(l)||Ee(i[s])?i[s]=Array.isArray(e[s])?Ve(e[s],[]):{...Ve(e[s])}:ut(e[s],I(l)?{}:l[s],i[s]):i[s]=!ie(e[s],l[s]);return i}var Le=(e,l)=>ut(e,l,Ve(l)),ct=(e,{valueAsNumber:l,valueAsDate:i,setValueAs:r})=>F(e)?e:l?e===""?NaN:e&&+e:i&&j(e)?new Date(e):r?r(e):e;function Oe(e){const l=e.ref;if(!(e.refs?e.refs.every(i=>i.disabled):l.disabled))return Ie(l)?l.files:Ne(l)?at(e.refs).value:nt(l)?[...l.selectedOptions].map(({value:i})=>i):ge(l)?lt(e.refs).value:ct(F(l.value)?e.ref.value:l.value,e)}var Nt=(e,l,i,r)=>{const s={};for(const o of e){const c=y(l,o);c&&_(s,o,c._f)}return{criteriaMode:i,names:[...e],fields:s,shouldUseNativeValidation:r}},ye=e=>F(e)?e:ke(e)?e.source:O(e)?ke(e.value)?e.value.source:e.value:e,Ut=e=>e.mount&&(e.required||e.min||e.max||e.maxLength||e.minLength||e.pattern||e.validate);function rt(e,l,i){const r=y(e,i);if(r||Re(i))return{error:r,name:i};const s=i.split(".");for(;s.length;){const o=s.join("."),c=y(l,o),b=y(e,o);if(c&&!Array.isArray(c)&&i!==o)return{name:i};if(b&&b.type)return{name:o,error:b};s.pop()}return{name:i}}var qt=(e,l,i,r,s)=>s.isOnAll?!1:!i&&s.isOnTouch?!(l||e):(i?r.isOnBlur:s.isOnBlur)?!e:(i?r.isOnChange:s.isOnChange)?e:!0,Bt=(e,l)=>!ve(y(e,l)).length&&C(e,l);const Pt={mode:G.onSubmit,reValidateMode:G.onChange,shouldFocusError:!0};function Ht(e={},l){let i={...Pt,...e},r={submitCount:0,isDirty:!1,isLoading:Y(i.defaultValues),isValidating:!1,isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,touchedFields:{},dirtyFields:{},errors:{}},s={},o=O(i.defaultValues)||O(i.values)?re(i.defaultValues||i.values)||{}:{},c=i.shouldUnregister?{}:re(o),b={action:!1,mount:!1,watch:!1},k={mount:new Set,unMount:new Set,array:new Set,watch:new Set},M,H=0;const A={isDirty:!1,dirtyFields:!1,touchedFields:!1,isValidating:!1,isValid:!1,errors:!1},p={values:Te(),array:Te(),state:Te()},$=e.resetOptions&&e.resetOptions.keepDirtyValues,N=Je(i.mode),ue=Je(i.reValidateMode),se=i.criteriaMode===G.all,ce=t=>a=>{clearTimeout(H),H=setTimeout(t,a)},v=async t=>{if(A.isValid||t){const a=i.resolver?P((await U()).errors):await W(s,!0);a!==r.isValid&&p.state.next({isValid:a})}},q=t=>A.isValidating&&p.state.next({isValidating:t}),B=(t,a=[],n,m,d=!0,u=!0)=>{if(m&&n){if(b.action=!0,u&&Array.isArray(y(s,t))){const g=n(y(s,t),m.argA,m.argB);d&&_(s,t,g)}if(u&&Array.isArray(y(r.errors,t))){const g=n(y(r.errors,t),m.argA,m.argB);d&&_(r.errors,t,g),Bt(r.errors,t)}if(A.touchedFields&&u&&Array.isArray(y(r.touchedFields,t))){const g=n(y(r.touchedFields,t),m.argA,m.argB);d&&_(r.touchedFields,t,g)}A.dirtyFields&&(r.dirtyFields=Le(o,c)),p.state.next({name:t,isDirty:x(t,a),dirtyFields:r.dirtyFields,errors:r.errors,isValid:r.isValid})}else _(c,t,a)},S=(t,a)=>{_(r.errors,t,a),p.state.next({errors:r.errors})},Z=(t,a,n,m)=>{const d=y(s,t);if(d){const u=y(c,t,F(n)?y(o,t):n);F(u)||m&&m.defaultChecked||a?_(c,t,a?u:Oe(d._f)):T(t,u),b.mount&&v()}},ee=(t,a,n,m,d)=>{let u=!1,g=!1;const D={name:t};if(!n||m){A.isDirty&&(g=r.isDirty,r.isDirty=D.isDirty=x(),u=g!==D.isDirty);const w=ie(y(o,t),a);g=y(r.dirtyFields,t),w?C(r.dirtyFields,t):_(r.dirtyFields,t,!0),D.dirtyFields=r.dirtyFields,u=u||A.dirtyFields&&g!==!w}if(n){const w=y(r.touchedFields,t);w||(_(r.touchedFields,t,n),D.touchedFields=r.touchedFields,u=u||A.touchedFields&&w!==n)}return u&&d&&p.state.next(D),u?D:{}},de=(t,a,n,m)=>{const d=y(r.errors,t),u=A.isValid&&oe(a)&&r.isValid!==a;if(e.delayError&&n?(M=ce(()=>S(t,n)),M(e.delayError)):(clearTimeout(H),M=null,n?_(r.errors,t,n):C(r.errors,t)),(n?!ie(d,n):d)||!P(m)||u){const g={...m,...u&&oe(a)?{isValid:a}:{},errors:r.errors,name:t};r={...r,...g},p.state.next(g)}q(!1)},U=async t=>i.resolver(c,i.context,Nt(t||k.mount,s,i.criteriaMode,i.shouldUseNativeValidation)),K=async t=>{const{errors:a}=await U();if(t)for(const n of t){const m=y(a,n);m?_(r.errors,n,m):C(r.errors,n)}else r.errors=a;return a},W=async(t,a,n={valid:!0})=>{for(const m in t){const d=t[m];if(d){const{_f:u,...g}=d;if(u){const D=k.array.has(u.name),w=await tt(d,c,se,i.shouldUseNativeValidation&&!a,D);if(w[u.name]&&(n.valid=!1,a))break;!a&&(y(w,u.name)?D?Ct(r.errors,w,u.name):_(r.errors,u.name,w[u.name]):C(r.errors,u.name))}g&&await W(g,a,n)}}return n.valid},E=()=>{for(const t of k.unMount){const a=y(s,t);a&&(a._f.refs?a._f.refs.every(n=>!Fe(n)):!Fe(a._f.ref))&&_e(t)}k.unMount=new Set},x=(t,a)=>(t&&a&&_(c,t,a),!ie(Ue(),o)),h=(t,a,n)=>Lt(t,k,{...b.mount?c:F(a)?o:j(t)?{[t]:a}:a},n,a),V=t=>ve(y(b.mount?c:o,t,e.shouldUnregister?y(o,t,[]):[])),T=(t,a,n={})=>{const m=y(s,t);let d=a;if(m){const u=m._f;u&&(!u.disabled&&_(c,t,ct(a,u)),d=pe(u.ref)&&I(a)?"":a,nt(u.ref)?[...u.ref.options].forEach(g=>g.selected=d.includes(g.value)):u.refs?ge(u.ref)?u.refs.length>1?u.refs.forEach(g=>(!g.defaultChecked||!g.disabled)&&(g.checked=Array.isArray(d)?!!d.find(D=>D===g.value):d===g.value)):u.refs[0]&&(u.refs[0].checked=!!d):u.refs.forEach(g=>g.checked=g.value===d):Ie(u.ref)?u.ref.value="":(u.ref.value=d,u.ref.type||p.values.next({name:t,values:{...c}})))}(n.shouldDirty||n.shouldTouch)&&ee(t,d,n.shouldTouch,n.shouldDirty,!0),n.shouldValidate&&fe(t)},R=(t,a,n)=>{for(const m in a){const d=a[m],u=`${t}.${m}`,g=y(s,u);(k.array.has(t)||!Ee(d)||g&&!g._f)&&!ne(d)?R(u,d,n):T(u,d,n)}},z=(t,a,n={})=>{const m=y(s,t),d=k.array.has(t),u=re(a);_(c,t,u),d?(p.array.next({name:t,values:{...c}}),(A.isDirty||A.dirtyFields)&&n.shouldDirty&&p.state.next({name:t,dirtyFields:Le(o,c),isDirty:x(t,u)})):m&&!m._f&&!I(u)?R(t,u,n):T(t,u,n),Qe(t,k)&&p.state.next({...r}),p.values.next({name:t,values:{...c}}),!b.mount&&l()},J=async t=>{const a=t.target;let n=a.name,m=!0;const d=y(s,n),u=()=>a.type?Oe(d._f):_t(t);if(d){let g,D;const w=u(),le=t.type===ze.BLUR||t.type===ze.FOCUS_OUT,vt=!Ut(d._f)&&!i.resolver&&!y(r.errors,n)&&!d._f.deps||qt(le,y(r.touchedFields,n),r.isSubmitted,ue,N),De=Qe(n,k,le);_(c,n,w),le?(d._f.onBlur&&d._f.onBlur(t),M&&M(0)):d._f.onChange&&d._f.onChange(t);const Se=ee(n,w,le,!1),ht=!P(Se)||De;if(!le&&p.values.next({name:n,type:t.type,values:{...c}}),vt)return A.isValid&&v(),ht&&p.state.next({name:n,...De?{}:Se});if(!le&&De&&p.state.next({...r}),q(!0),i.resolver){const{errors:$e}=await U([n]),bt=rt(r.errors,s,n),We=rt($e,s,bt.name||n);g=We.error,n=We.name,D=P($e)}else g=(await tt(d,c,se,i.shouldUseNativeValidation))[n],m=isNaN(w)||w===y(c,n,w),m&&(g?D=!1:A.isValid&&(D=await W(s,!0)));m&&(d._f.deps&&fe(d._f.deps),de(n,D,g,Se))}},fe=async(t,a={})=>{let n,m;const d=we(t);if(q(!0),i.resolver){const u=await K(F(t)?t:d);n=P(u),m=t?!d.some(g=>y(u,g)):n}else t?(m=(await Promise.all(d.map(async u=>{const g=y(s,u);return await W(g&&g._f?{[u]:g}:g)}))).every(Boolean),!(!m&&!r.isValid)&&v()):m=n=await W(s);return p.state.next({...!j(t)||A.isValid&&n!==r.isValid?{}:{name:t},...i.resolver||!t?{isValid:n}:{},errors:r.errors,isValidating:!1}),a.shouldFocus&&!m&&Ce(s,u=>u&&y(r.errors,u),t?d:k.mount),m},Ue=t=>{const a={...o,...b.mount?c:{}};return F(t)?a:j(t)?y(a,t):t.map(n=>y(a,n))},qe=(t,a)=>({invalid:!!y((a||r).errors,t),isDirty:!!y((a||r).dirtyFields,t),isTouched:!!y((a||r).touchedFields,t),error:y((a||r).errors,t)}),dt=t=>{t&&we(t).forEach(a=>C(r.errors,a)),p.state.next({errors:t?r.errors:{}})},ft=(t,a,n)=>{const m=(y(s,t,{_f:{}})._f||{}).ref;_(r.errors,t,{...a,ref:m}),p.state.next({name:t,errors:r.errors,isValid:!1}),n&&n.shouldFocus&&m&&m.focus&&m.focus()},mt=(t,a)=>Y(t)?p.values.subscribe({next:n=>t(h(void 0,a),n)}):h(t,a,!0),_e=(t,a={})=>{for(const n of t?we(t):k.mount)k.mount.delete(n),k.array.delete(n),a.keepValue||(C(s,n),C(c,n)),!a.keepError&&C(r.errors,n),!a.keepDirty&&C(r.dirtyFields,n),!a.keepTouched&&C(r.touchedFields,n),!i.shouldUnregister&&!a.keepDefaultValue&&C(o,n);p.values.next({values:{...c}}),p.state.next({...r,...a.keepDirty?{isDirty:x()}:{}}),!a.keepIsValid&&v()},Ae=(t,a={})=>{let n=y(s,t);const m=oe(a.disabled);return _(s,t,{...n||{},_f:{...n&&n._f?n._f:{ref:{name:t}},name:t,mount:!0,...a}}),k.mount.add(t),n?m&&_(c,t,a.disabled?void 0:y(c,t,Oe(n._f))):Z(t,!0,a.value),{...m?{disabled:a.disabled}:{},...i.shouldUseNativeValidation?{required:!!a.required,min:ye(a.min),max:ye(a.max),minLength:ye(a.minLength),maxLength:ye(a.maxLength),pattern:ye(a.pattern)}:{},name:t,onChange:J,onBlur:J,ref:d=>{if(d){Ae(t,a),n=y(s,t);const u=F(d.value)&&d.querySelectorAll&&d.querySelectorAll("input,select,textarea")[0]||d,g=It(u),D=n._f.refs||[];if(g?D.find(w=>w===u):u===n._f.ref)return;_(s,t,{_f:{...n._f,...g?{refs:[...D.filter(Fe),u,...Array.isArray(y(o,t))?[{}]:[]],ref:{type:u.type,name:t}}:{ref:u}}}),Z(t,!1,void 0,u)}else n=y(s,t,{}),n._f&&(n._f.mount=!1),(i.shouldUnregister||a.shouldUnregister)&&!(Dt(k.array,t)&&b.action)&&k.unMount.add(t)}}},Be=()=>i.shouldFocusError&&Ce(s,t=>t&&y(r.errors,t),k.mount),yt=(t,a)=>async n=>{n&&(n.preventDefault&&n.preventDefault(),n.persist&&n.persist());let m=re(c);if(p.state.next({isSubmitting:!0}),i.resolver){const{errors:d,values:u}=await U();r.errors=d,m=u}else await W(s);C(r.errors,"root"),P(r.errors)?(p.state.next({errors:{}}),await t(m,n)):(a&&await a({...r.errors},n),Be(),setTimeout(Be)),p.state.next({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:P(r.errors),submitCount:r.submitCount+1,errors:r.errors})},gt=(t,a={})=>{y(s,t)&&(F(a.defaultValue)?z(t,y(o,t)):(z(t,a.defaultValue),_(o,t,a.defaultValue)),a.keepTouched||C(r.touchedFields,t),a.keepDirty||(C(r.dirtyFields,t),r.isDirty=a.defaultValue?x(t,y(o,t)):x()),a.keepError||(C(r.errors,t),A.isValid&&v()),p.state.next({...r}))},Pe=(t,a={})=>{const n=t||o,m=re(n),d=t&&!P(t)?m:o;if(a.keepDefaultValues||(o=n),!a.keepValues){if(a.keepDirtyValues||$)for(const u of k.mount)y(r.dirtyFields,u)?_(d,u,y(c,u)):z(u,y(d,u));else{if(Me&&F(t))for(const u of k.mount){const g=y(s,u);if(g&&g._f){const D=Array.isArray(g._f.refs)?g._f.refs[0]:g._f.ref;if(pe(D)){const w=D.closest("form");if(w){w.reset();break}}}}s={}}c=e.shouldUnregister?a.keepDefaultValues?re(o):{}:m,p.array.next({values:{...d}}),p.values.next({values:{...d}})}k={mount:new Set,unMount:new Set,array:new Set,watch:new Set,watchAll:!1,focus:""},!b.mount&&l(),b.mount=!A.isValid||!!a.keepIsValid,b.watch=!!e.shouldUnregister,p.state.next({submitCount:a.keepSubmitCount?r.submitCount:0,isDirty:a.keepDirty?r.isDirty:!!(a.keepDefaultValues&&!ie(t,o)),isSubmitted:a.keepIsSubmitted?r.isSubmitted:!1,dirtyFields:a.keepDirtyValues?r.dirtyFields:a.keepDefaultValues&&t?Le(o,t):{},touchedFields:a.keepTouched?r.touchedFields:{},errors:a.keepErrors?r.errors:{},isSubmitting:!1,isSubmitSuccessful:!1})},He=(t,a)=>Pe(Y(t)?t(c):t,a);return{control:{register:Ae,unregister:_e,getFieldState:qe,_executeSchema:U,_getWatch:h,_getDirty:x,_updateValid:v,_removeUnmounted:E,_updateFieldArray:B,_getFieldArray:V,_reset:Pe,_resetDefaultValues:()=>Y(i.defaultValues)&&i.defaultValues().then(t=>{He(t,i.resetOptions),p.state.next({isLoading:!1})}),_updateFormState:t=>{r={...r,...t}},_subjects:p,_proxyFormState:A,get _fields(){return s},get _formValues(){return c},get _state(){return b},set _state(t){b=t},get _defaultValues(){return o},get _names(){return k},set _names(t){k=t},get _formState(){return r},set _formState(t){r=t},get _options(){return i},set _options(t){i={...i,...t}}},trigger:fe,register:Ae,handleSubmit:yt,watch:mt,setValue:z,getValues:Ue,reset:He,resetField:gt,clearErrors:dt,unregister:_e,setError:ft,setFocus:(t,a={})=>{const n=y(s,t),m=n&&n._f;if(m){const d=m.refs?m.refs[0]:m.ref;d.focus&&(d.focus(),a.shouldSelect&&d.select())}},getFieldState:qe}}function $t(e={}){const l=f.useRef(),[i,r]=f.useState({isDirty:!1,isValidating:!1,isLoading:Y(e.defaultValues),isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,submitCount:0,dirtyFields:{},touchedFields:{},errors:{},defaultValues:Y(e.defaultValues)?void 0:e.defaultValues});l.current||(l.current={...Ht(e,()=>r(o=>({...o}))),formState:i});const s=l.current.control;return s._options=e,Ft({subject:s._subjects.state,next:o=>{Tt(o,s._proxyFormState,s._updateFormState,!0)&&r({...s._formState})}}),f.useEffect(()=>{e.values&&!ie(e.values,s._defaultValues)?s._reset(e.values,s._options.resetOptions):s._resetDefaultValues()},[e.values,s]),f.useEffect(()=>{s._state.mount||(s._updateValid(),s._state.mount=!0),s._state.watch&&(s._state.watch=!1,s._subjects.state.next({...s._formState})),s._removeUnmounted()}),l.current.formState=wt(i,s),l.current}var Wt=(e=>(e.formgroup="formgroup",e.checkbox="checkbox",e.radiobutton="radiobutton",e.textarea="textarea",e.input="input",e.select="select",e.date="date",e))(Wt||{});const Gt=e=>{const{exampleType:l="formgroup"}=e,{register:i,handleSubmit:r,formState:{errors:s}}=$t(),o=new Date;o.setHours(0),o.setMinutes(0),o.setSeconds(0);const c=new Date;c.setDate(o.getDate()-5),c.setHours(6),c.setMinutes(10),c.setSeconds(0);const b=new Date;b.setDate(o.getDate()+5),b.setHours(22),b.setMinutes(0),b.setSeconds(0);const k="field1",M="field2",H="field3",A="field4",p="field5",$="field6",N="field7",ue="field8",se="field9",ce=s.field1||s.field2||s.field3||s.field4||s.field5||s.field6||s.field7||s.field8||s.field9,v="Du må velge et alternativ",q="Du må velge to alternativ",B="Det kan ikke legges inn mer enn 40 tegn",S="Du må skrive noe her",Z='Du må velge "Option 2"',ee=`Du må velge dato mellom ${c.toLocaleDateString("nb")} og ${b.toLocaleDateString("nb")}`,de=`Du må skrive inn tidspunkt mellom ${c.toLocaleTimeString("nb",{hour:"2-digit",minute:"2-digit"})} og ${b.toLocaleTimeString("nb",{hour:"2-digit",minute:"2-digit"})}`,U=h=>h.length>=2||q,K=h=>h.toString()==="Option 2"||Z,W=(h,V,T)=>{const R=new Date(h);return!!h&&R.getTime()>=V.getTime()&&R.getTime()<=T.getTime()||ee},E=(h,V)=>{const T=new Date;T.setHours(h),T.setMinutes(V),T.setSeconds(0);const R=c.toLocaleTimeString("nb"),z=b.toLocaleTimeString("nb"),J=T.toLocaleTimeString("nb");return console.log("value",J),!!T&&J>=R&&J<=z||de},x=()=>{if(l==="formgroup"){const h=[f.createElement(te,{key:0,inputId:"checkbox1",label:f.createElement(L,{labelTexts:[{text:"Checkbox 1"}]}),...i(k,{required:v})}),f.createElement(te,{key:1,inputId:"checkbox2",label:f.createElement(L,{labelTexts:[{text:"Checkbox 2"}]}),...i(k,{required:v})}),f.createElement(te,{key:2,inputId:"checkbox3",label:f.createElement(L,{labelTexts:[{text:"Checkbox 3"}]}),...i(k,{required:v})})];return[f.createElement(X,{key:0,title:"Gruppe tittel",legend:"Velg minst en",error:s.field1?s.field1.message:void 0,variant:e.variant},f.createElement(kt,{maxColumns:Et.two},h.map(V=>V))),f.createElement(X,{key:1,legend:"Velg minst to",error:s.field2?s.field2.message:void 0,variant:e.variant},f.createElement(te,{inputId:"checkbox4",label:f.createElement(L,{labelTexts:[{text:"Checkbox 4"}]}),...i(M,{validate:U})}),f.createElement(te,{inputId:"checkbox5",label:f.createElement(L,{labelTexts:[{text:"Checkbox 5"}]}),...i(M,{validate:U})}),f.createElement(te,{inputId:"checkbox6",label:f.createElement(L,{labelTexts:[{text:"Checkbox 6"}]}),...i(M,{validate:U})})),f.createElement(X,{key:2,legend:"Velg en",error:s.field3?s.field3.message:void 0,variant:e.variant},f.createElement(he,{inputId:"radiobutton1",label:f.createElement(L,{labelTexts:[{text:"Radiobutton 1"}]}),...i(H,{required:v})}),f.createElement(he,{inputId:"radiobutton2",label:f.createElement(L,{labelTexts:[{text:"Radiobutton 2"}]}),...i(H,{required:v})}),f.createElement(he,{inputId:"radiobutton3",label:f.createElement(L,{labelTexts:[{text:"Radiobutton 3"}]}),...i(H,{required:v})})),f.createElement(X,{key:3,error:s.field4?s.field4.message:void 0},f.createElement(je,{defaultValue:`Dette er en test 
 
  Hello 
 

package/components/HelpBubble/index.js

@@ -1,2 +1,2 @@
-import{H as o}from"../../HelpBubble.js";import{a as G}from"../../HelpBubble.js";import"react";import"classnames";import"../../constants.js";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../../utils/refs.js";import"../PopOver/styles.module.scss";import"./styles.module.scss";export{G as HelpBubbleVariant,o as default};
+import{H as o}from"../../HelpBubble.js";import{a as I}from"../../HelpBubble.js";import"react";import"classnames";import"../../constants.js";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../../utils/refs.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../PopOver/styles.module.scss";import"./styles.module.scss";export{I as HelpBubbleVariant,o as default};
 //# sourceMappingURL=index.js.map

package/components/HelpBubbleExample/index.js

@@ -1,2 +1,2 @@
-import i,{useRef as o}from"react";import{H as r}from"../../HelpBubble.js";import"classnames";import"../../constants.js";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../../utils/refs.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";const a=e=>{const t=o(null);return i.createElement("div",null,i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."),i.createElement("div",{style:{position:"relative",display:"inline"}},i.createElement("span",{ref:t,style:{display:"inline-block",color:"red"}},"Jeg er en tooltip tekst."),i.createElement(r,{...e,onClose:()=>{alert("Bubble closed")},controllerRef:t},e.children)),i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."))},w=a;export{w as default};
+import i,{useRef as o}from"react";import{H as r}from"../../HelpBubble.js";import"classnames";import"../../constants.js";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../../utils/refs.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";const a=e=>{const t=o(null);return i.createElement("div",null,i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."),i.createElement("div",{style:{position:"relative",display:"inline"}},i.createElement("span",{ref:t,style:{display:"inline-block",color:"red"}},"Jeg er en tooltip tekst."),i.createElement(r,{...e,onClose:()=>{alert("Bubble closed")},controllerRef:t},e.children)),i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."))},z=a;export{z as default};
 //# sourceMappingURL=index.js.map

package/components/HelpBubbleExample/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/HelpBubbleExample/HelpBubbleExample.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport HelpBubble, { HelpBubbleProps } from '../HelpBubble/HelpBubble';\n\nconst HelpBubbleExample: React.FC<HelpBubbleProps> = props => {\n  const controllerRef = useRef<HTMLSpanElement>(null);\n\n  return (\n    <div>\n      <span>\n        {\n          'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n        }\n      </span>\n      <div style={{ position: 'relative', display: 'inline' }}>\n        <span ref={controllerRef} style={{ display: 'inline-block', color: 'red' }}>\n          {'Jeg er en tooltip tekst.'}\n        </span>\n        <HelpBubble\n          {...props}\n          onClose={() => {\n            alert('Bubble closed');\n          }}\n          controllerRef={controllerRef}\n        >\n          {props.children}\n        </HelpBubble>\n      </div>\n      <span>\n        {\n          'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n        }\n      </span>\n    </div>\n  );\n};\n\nexport default HelpBubbleExample;\n"],"names":["HelpBubbleExample","props","controllerRef","useRef","React","HelpBubble","HelpBubbleExample$1"],"mappings":"+9BAIA,MAAMA,EAAwDC,GAAA,CACtD,MAAAC,EAAgBC,EAAwB,IAAI,EAGhD,OAAAC,EAAA,cAAC,MACC,KAAAA,EAAA,cAAC,OAEG,KAAA,+pBAEJ,EACAA,EAAA,cAAC,MAAI,CAAA,MAAO,CAAE,SAAU,WAAY,QAAS,QAAS,CAAA,EACnDA,EAAA,cAAA,OAAA,CAAK,IAAKF,EAAe,MAAO,CAAE,QAAS,eAAgB,MAAO,KAChE,CAAA,EAAA,0BACH,EACAE,EAAA,cAACC,EAAA,CACE,GAAGJ,EACJ,QAAS,IAAM,CACb,MAAM,eAAe,CACvB,EACA,cAAAC,CAAA,EAECD,EAAM,QAAA,CAEX,EACCG,EAAA,cAAA,OAAA,KAEG,+pBAEJ,CACF,CAEJ,EAEAE,EAAeN"}
+{"version":3,"file":"index.js","sources":["../../../src/components/HelpBubbleExample/HelpBubbleExample.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport HelpBubble, { HelpBubbleProps } from '../HelpBubble/HelpBubble';\n\nconst HelpBubbleExample: React.FC<HelpBubbleProps> = props => {\n  const controllerRef = useRef<HTMLSpanElement>(null);\n\n  return (\n    <div>\n      <span>\n        {\n          'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n        }\n      </span>\n      <div style={{ position: 'relative', display: 'inline' }}>\n        <span ref={controllerRef} style={{ display: 'inline-block', color: 'red' }}>\n          {'Jeg er en tooltip tekst.'}\n        </span>\n        <HelpBubble\n          {...props}\n          onClose={() => {\n            alert('Bubble closed');\n          }}\n          controllerRef={controllerRef}\n        >\n          {props.children}\n        </HelpBubble>\n      </div>\n      <span>\n        {\n          'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n        }\n      </span>\n    </div>\n  );\n};\n\nexport default HelpBubbleExample;\n"],"names":["HelpBubbleExample","props","controllerRef","useRef","React","HelpBubble","HelpBubbleExample$1"],"mappings":"ugCAIA,MAAMA,EAAwDC,GAAA,CACtD,MAAAC,EAAgBC,EAAwB,IAAI,EAGhD,OAAAC,EAAA,cAAC,MACC,KAAAA,EAAA,cAAC,OAEG,KAAA,+pBAEJ,EACAA,EAAA,cAAC,MAAI,CAAA,MAAO,CAAE,SAAU,WAAY,QAAS,QAAS,CAAA,EACnDA,EAAA,cAAA,OAAA,CAAK,IAAKF,EAAe,MAAO,CAAE,QAAS,eAAgB,MAAO,KAChE,CAAA,EAAA,0BACH,EACAE,EAAA,cAACC,EAAA,CACE,GAAGJ,EACJ,QAAS,IAAM,CACb,MAAM,eAAe,CACvB,EACA,cAAAC,CAAA,EAECD,EAAM,QAAA,CAEX,EACCG,EAAA,cAAA,OAAA,KAEG,+pBAEJ,CACF,CAEJ,EAEAE,EAAeN"}

package/components/HelpQuestion/HelpQuestion.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+interface HelpQuestionProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-controls'> {
+    /**
+     * Help question contents
+     */
+    children: string;
+    /**
+     * Indicates that the help question is in use.
+     */
+    selected?: boolean;
+    /**
+     * Classname will be applied to the button element.
+     */
+    className?: string;
+    /**
+     * Sets the data-testid attribute.
+     */
+    testId?: string;
+}
+declare const HelpQuestion: React.ForwardRefExoticComponent<HelpQuestionProps & React.RefAttributes<HTMLButtonElement>>;
+export default HelpQuestion;
+//# sourceMappingURL=HelpQuestion.d.ts.map

package/components/HelpQuestion/HelpQuestion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpQuestion.d.ts","sourceRoot":"","sources":["../../../src/components/HelpQuestion/HelpQuestion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,UAAU,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,eAAe,CAAC;IACjH;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,YAAY,6FAqBjB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/components/HelpQuestion/componentdata.json

@@ -0,0 +1 @@
+{"props":{"children":{"defaultValue":null,"description":"Help question contents","name":"children","parent":{"fileName":"src/components/HelpQuestion/HelpQuestion.tsx","name":"HelpQuestionProps"},"declarations":[{"fileName":"src/components/HelpQuestion/HelpQuestion.tsx","name":"HelpQuestionProps"}],"required":true,"type":{"name":"string"}},"selected":{"defaultValue":{"value":"false"},"description":"Indicates that the help question is in use.","name":"selected","parent":{"fileName":"src/components/HelpQuestion/HelpQuestion.tsx","name":"HelpQuestionProps"},"declarations":[{"fileName":"src/components/HelpQuestion/HelpQuestion.tsx","name":"HelpQuestionProps"}],"required":false,"type":{"name":"boolean"}},"className":{"defaultValue":null,"description":"Classname will be applied to the button element.","name":"className","parent":{"fileName":"src/components/HelpQuestion/HelpQuestion.tsx","name":"HelpQuestionProps"},"declarations":[{"fileName":"src/components/HelpQuestion/HelpQuestion.tsx","name":"HelpQuestionProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/HelpQuestion/HelpQuestion.tsx","name":"HelpQuestionProps"},"declarations":[{"fileName":"src/components/HelpQuestion/HelpQuestion.tsx","name":"HelpQuestionProps"}],"required":false,"type":{"name":"string"}},"onClick":{"defaultValue":null,"description":"","name":"onClick","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"MouseEventHandler<HTMLButtonElement>"}},"aria-controls":{"defaultValue":null,"description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.","name":"aria-controls","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}}}}

package/components/HelpQuestion/index.d.ts

@@ -0,0 +1,4 @@
+import HelpQuestion from './HelpQuestion';
+export * from './HelpQuestion';
+export default HelpQuestion;
+//# sourceMappingURL=index.d.ts.map

package/components/HelpQuestion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/HelpQuestion/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,cAAc,gBAAgB,CAAC;AAC/B,eAAe,YAAY,CAAC"}

package/components/HelpQuestion/index.js

@@ -0,0 +1,2 @@
+import e from"react";import u from"classnames";import{AnalyticsId as c}from"../../constants.js";import{usePseudoClasses as d}from"../../hooks/usePseudoClasses.js";import{mergeRefs as y}from"../../utils/refs.js";import{T as H}from"../../Trigger.js";import o from"./styles.module.scss";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../utils/accessibility.js";import"../Trigger/styles.module.scss";const r=e.forwardRef(({children:i,selected:t=!1,className:s,onClick:m,testId:p},a)=>{const{isHovered:n,refObject:l}=d(),f=u(o.helpquestion,t&&o["helpquestion--selected"],s);return e.createElement("button",{type:"button","data-testid":p,className:f,onClick:m,ref:y([a,l]),"aria-expanded":t,"data-analyticsid":c.HelpQuestion},e.createElement(H,{variant:"help",htmlMarkup:"span",selected:t,isHovered:n}),i)});r.displayName="HelpQuestion";const P=r;export{P as default};
+//# sourceMappingURL=index.js.map

package/components/HelpQuestion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/HelpQuestion/HelpQuestion.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Trigger from '../Trigger';\n\nimport styles from './styles.module.scss';\n\ninterface HelpQuestionProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-controls'> {\n  /**\n   * Help question contents\n   */\n  children: string;\n  /**\n   * Indicates that the help question is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n}\n\nconst HelpQuestion = React.forwardRef<HTMLButtonElement, HelpQuestionProps>(\n  ({ children, selected = false, className, onClick, testId }, ref) => {\n    const { isHovered, refObject } = usePseudoClasses<HTMLButtonElement>();\n\n    const classes = classNames(styles.helpquestion, selected && styles['helpquestion--selected'], className);\n\n    return (\n      <button\n        type=\"button\"\n        data-testid={testId}\n        className={classes}\n        onClick={onClick}\n        ref={mergeRefs([ref, refObject])}\n        aria-expanded={selected}\n        data-analyticsid={AnalyticsId.HelpQuestion}\n      >\n        <Trigger variant=\"help\" htmlMarkup=\"span\" selected={selected} isHovered={isHovered} />\n        {children}\n      </button>\n    );\n  }\n);\n\nHelpQuestion.displayName = 'HelpQuestion';\n\nexport default HelpQuestion;\n"],"names":["HelpQuestion","React","children","selected","className","onClick","testId","ref","isHovered","refObject","usePseudoClasses","classes","classNames","styles","mergeRefs","AnalyticsId","Trigger","HelpQuestion$1"],"mappings":"mpBA8BA,MAAMA,EAAeC,EAAM,WACzB,CAAC,CAAE,SAAAC,EAAU,SAAAC,EAAW,GAAO,UAAAC,EAAW,QAAAC,EAAS,OAAAC,CAAO,EAAGC,IAAQ,CACnE,KAAM,CAAE,UAAAC,EAAW,UAAAC,CAAU,EAAIC,EAAoC,EAE/DC,EAAUC,EAAWC,EAAO,aAAcV,GAAYU,EAAO,wBAAwB,EAAGT,CAAS,EAGrG,OAAAH,EAAA,cAAC,SAAA,CACC,KAAK,SACL,cAAaK,EACb,UAAWK,EACX,QAAAN,EACA,IAAKS,EAAU,CAACP,EAAKE,CAAS,CAAC,EAC/B,gBAAeN,EACf,mBAAkBY,EAAY,YAAA,kBAE7BC,EAAQ,CAAA,QAAQ,OAAO,WAAW,OAAO,SAAAb,EAAoB,UAAAK,EAAsB,EACnFN,CAAA,CAGP,CACF,EAEAF,EAAa,YAAc,eAE3B,MAAAiB,EAAejB"}

package/components/HelpQuestion/styles.module.scss

@@ -0,0 +1,49 @@
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+
+.helpquestion {
+  display: inline-flex;
+  align-items: center;
+  text-align: left;
+  gap: getSpacer(xs);
+  padding: getSpacer(xs);
+  border: 0;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+  color: $plum600;
+  font-weight: 600;
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-xs;
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    gap: getSpacer(s);
+    font-size: $font-size-md;
+    line-height: $lineheight-size-sm;
+  }
+
+  &:hover {
+    color: $plum800;
+    background-color: rgba($plum600, 0.1);
+  }
+
+  &:focus-visible {
+    box-shadow: inset 0 0 0 3px $black;
+  }
+
+  &--selected {
+    color: $plum800;
+    background-color: rgba($plum600, 0.1);
+
+    &:hover {
+      background-color: rgba($plum600, 0.2);
+    }
+
+    &:focus-visible {
+      background-color: rgba($plum600, 0.1);
+    }
+  }
+}

package/components/HelpQuestion/styles.module.scss.d.ts

@@ -0,0 +1,10 @@
+export type Styles = {
+  helpquestion: string;
+  'helpquestion--selected': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;