@helsenorge/designsystem-react 7.13.4 → 8.0.1

package/components/ServiceMessage/ServiceMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServiceMessage.js","sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnchorLinkTargets } from '../AnchorLink';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Forward from '../Icons/Forward';\nimport X from '../Icons/X';\nimport { NotificationPanelVariants } from '../NotificationPanel';\n\nimport styles from './styles.module.scss';\n\ninterface LabelProps {\n  label: string;\n  variant: NotificationPanelVariants;\n  id: string;\n  hasExpander: boolean;\n  isExpanded: boolean;\n  dismissable: boolean;\n  onExpand: () => void;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {\n  const breakpoint = useBreakpoint();\n  const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n  const CustomTag = hasExpander ? 'button' : 'span';\n\n  const labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  return (\n    <div className={labelContainerClasses} ref={hoverRef}>\n      <div className={styles['service-message__container']}>\n        <div className={styles['service-message__row']}>\n          <div className={styles['service-message__col']}>\n            <div className={styles['service-message__label']}>\n              <NotificationBadge variant={variant == 'alert' ? 'error' : variant} size={iconSize} isHovered={isHovered} />\n              <h1 className={styles['service-message__title']} id={id}>\n                <CustomTag\n                  className={styles['service-message__toggle']}\n                  onClick={hasExpander ? onExpand : undefined}\n                  aria-expanded={hasExpander ? isExpanded : undefined}\n                >\n                  {label}\n                </CustomTag>\n              </h1>\n              {hasExpander && <Icon size={iconSize} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />}\n              {!hasExpander && dismissable && (\n                <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface ContentProps {\n  info?: string;\n  extraInfo?: string;\n  urlTitle?: string;\n  url?: string;\n  target?: AnchorLinkTargets;\n  dismissable: boolean;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n  const { hoverRef: readMoreRef, isHovered: readMoreHoverRefIsHovered } = useHover<HTMLAnchorElement>();\n  const { hoverRef: closeButtonRef, isHovered: closeButtonIsHovered } = useHover<HTMLButtonElement>();\n\n  const hasUrl = url && urlTitle;\n\n  return (\n    <div className={styles['service-message__container']}>\n      <div className={styles['service-message__row']}>\n        <div className={styles['service-message__col']}>\n          <div className={styles['service-message__content']}>\n            {info && <p className={styles['service-message__info']}>{info}</p>}\n            {extraInfo && (\n              <p className={classNames(styles['service-message__info'], styles['service-message__info--extra'])}>{extraInfo}</p>\n            )}\n            <div className={styles['service-message__actions']}>\n              {hasUrl && (\n                <a className={styles['service-message__action']} href={url} ref={readMoreRef} target={target}>\n                  {urlTitle}\n                  <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n                </a>\n              )}\n\n              {dismissable && (\n                <button\n                  ref={closeButtonRef}\n                  className={classNames(styles['service-message__action'], styles['service-message__action--close'])}\n                  aria-label={closeBtnText}\n                  onClick={onDismiss}\n                >\n                  {closeBtnText}\n                  <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={closeButtonIsHovered} />\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expanded */\n  info?: string;\n  /** String displayed in service-message when expanded, with a smaller font */\n  extraInfo?: string;\n  /** function that runs on dismiss */\n  onDismiss?: () => void;\n  /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n  dismissable?: boolean;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Name that describes a url-link for the user*/\n  urlTitle?: string;\n  /** Url for further information*/\n  url?: string;\n  /** Sets target for the anchorlink to the url*/\n  target?: AnchorLinkTargets;\n  /** Text on close-button in service messages. */\n  closeBtnText?: string;\n  /** Changes the visual representation. */\n  variant?: NotificationPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n  label,\n  dismissable = true,\n  onDismiss,\n  info,\n  extraInfo,\n  urlTitle,\n  url,\n  target = '_self',\n  closeBtnText = 'fjern melding',\n  expanderOpenFromStart = false,\n  variant = 'error',\n  testId,\n}) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const labelId = useUuid();\n  const hasExpander = !!info || !!extraInfo;\n\n  const ariaRole = variant === 'alert' || variant === 'error' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n  const handleClick = (): void => {\n    hasExpander && setIsExpanded(!isExpanded);\n  };\n\n  const classes = classNames(styles['service-message'], styles[`service-message--${variant}`]);\n\n  return (\n    <div className={classes} role={ariaRole} {...ariaLabelAttributes} data-testid={testId}>\n      <Label\n        label={label}\n        variant={variant}\n        id={labelId}\n        hasExpander={hasExpander}\n        isExpanded={isExpanded}\n        dismissable={dismissable}\n        onExpand={handleClick}\n        onDismiss={onDismiss}\n        closeBtnText={closeBtnText}\n      />\n      {hasExpander && isExpanded && (\n        <Content\n          info={info}\n          extraInfo={extraInfo}\n          urlTitle={urlTitle}\n          url={url}\n          target={target}\n          dismissable={dismissable}\n          onDismiss={onDismiss}\n          closeBtnText={closeBtnText}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n"],"names":["Label","label","variant","id","hasExpander","isExpanded","dismissable","onExpand","onDismiss","closeBtnText","breakpoint","useBreakpoint","isHovered","hoverRef","useHover","iconSize","breakpoints","IconSize","CustomTag","labelContainerClasses","classNames","styles","React","NotificationBadge","Icon","ChevronUp","ChevronDown","Close","Content","info","extraInfo","urlTitle","url","target","readMoreRef","readMoreHoverRefIsHovered","closeButtonRef","closeButtonIsHovered","hasUrl","Forward","getColor","X","ServiceMessage","expanderOpenFromStart","testId","setIsExpanded","useState","labelId","useUuid","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","handleClick","classes"],"mappings":"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"}
+{"version":3,"file":"ServiceMessage.js","sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnchorLinkTargets } from '../AnchorLink';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Forward from '../Icons/Forward';\nimport X from '../Icons/X';\nimport { NotificationPanelVariants } from '../NotificationPanel';\n\nimport styles from './styles.module.scss';\n\ninterface LabelProps {\n  label: string;\n  variant: NotificationPanelVariants;\n  id: string;\n  hasExpander: boolean;\n  isExpanded: boolean;\n  dismissable: boolean;\n  onExpand: () => void;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {\n  const breakpoint = useBreakpoint();\n  const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n  const CustomTag = hasExpander ? 'button' : 'span';\n\n  const labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  return (\n    <div className={labelContainerClasses} ref={hoverRef}>\n      <div className={styles['service-message__container']}>\n        <div className={styles['service-message__row']}>\n          <div className={styles['service-message__col']}>\n            <div className={styles['service-message__label']}>\n              <NotificationBadge variant={variant} size={iconSize} isHovered={isHovered} />\n              <h1 className={styles['service-message__title']} id={id}>\n                <CustomTag\n                  className={styles['service-message__toggle']}\n                  onClick={hasExpander ? onExpand : undefined}\n                  aria-expanded={hasExpander ? isExpanded : undefined}\n                >\n                  {label}\n                </CustomTag>\n              </h1>\n              {hasExpander && <Icon size={iconSize} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />}\n              {!hasExpander && dismissable && (\n                <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface ContentProps {\n  info?: string;\n  extraInfo?: string;\n  urlTitle?: string;\n  url?: string;\n  target?: AnchorLinkTargets;\n  dismissable: boolean;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n  const { hoverRef: readMoreRef, isHovered: readMoreHoverRefIsHovered } = useHover<HTMLAnchorElement>();\n  const { hoverRef: closeButtonRef, isHovered: closeButtonIsHovered } = useHover<HTMLButtonElement>();\n\n  const hasUrl = url && urlTitle;\n\n  return (\n    <div className={styles['service-message__container']}>\n      <div className={styles['service-message__row']}>\n        <div className={styles['service-message__col']}>\n          <div className={styles['service-message__content']}>\n            {info && <p className={styles['service-message__info']}>{info}</p>}\n            {extraInfo && (\n              <p className={classNames(styles['service-message__info'], styles['service-message__info--extra'])}>{extraInfo}</p>\n            )}\n            <div className={styles['service-message__actions']}>\n              {hasUrl && (\n                <a className={styles['service-message__action']} href={url} ref={readMoreRef} target={target}>\n                  {urlTitle}\n                  <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n                </a>\n              )}\n\n              {dismissable && (\n                <button\n                  ref={closeButtonRef}\n                  className={classNames(styles['service-message__action'], styles['service-message__action--close'])}\n                  aria-label={closeBtnText}\n                  onClick={onDismiss}\n                >\n                  {closeBtnText}\n                  <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={closeButtonIsHovered} />\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expanded */\n  info?: string;\n  /** String displayed in service-message when expanded, with a smaller font */\n  extraInfo?: string;\n  /** function that runs on dismiss */\n  onDismiss?: () => void;\n  /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n  dismissable?: boolean;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Name that describes a url-link for the user*/\n  urlTitle?: string;\n  /** Url for further information*/\n  url?: string;\n  /** Sets target for the anchorlink to the url*/\n  target?: AnchorLinkTargets;\n  /** Text on close-button in service messages. */\n  closeBtnText?: string;\n  /** Changes the visual representation. */\n  variant?: NotificationPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n  label,\n  dismissable = true,\n  onDismiss,\n  info,\n  extraInfo,\n  urlTitle,\n  url,\n  target = '_self',\n  closeBtnText = 'fjern melding',\n  expanderOpenFromStart = false,\n  variant = 'error',\n  testId,\n}) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const labelId = useUuid();\n  const hasExpander = !!info || !!extraInfo;\n\n  const ariaRole = variant === 'error' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n  const handleClick = (): void => {\n    hasExpander && setIsExpanded(!isExpanded);\n  };\n\n  const classes = classNames(styles['service-message'], styles[`service-message--${variant}`]);\n\n  return (\n    <div className={classes} role={ariaRole} {...ariaLabelAttributes} data-testid={testId}>\n      <Label\n        label={label}\n        variant={variant}\n        id={labelId}\n        hasExpander={hasExpander}\n        isExpanded={isExpanded}\n        dismissable={dismissable}\n        onExpand={handleClick}\n        onDismiss={onDismiss}\n        closeBtnText={closeBtnText}\n      />\n      {hasExpander && isExpanded && (\n        <Content\n          info={info}\n          extraInfo={extraInfo}\n          urlTitle={urlTitle}\n          url={url}\n          target={target}\n          dismissable={dismissable}\n          onDismiss={onDismiss}\n          closeBtnText={closeBtnText}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n"],"names":["Label","label","variant","id","hasExpander","isExpanded","dismissable","onExpand","onDismiss","closeBtnText","breakpoint","useBreakpoint","isHovered","hoverRef","useHover","iconSize","breakpoints","IconSize","CustomTag","labelContainerClasses","classNames","styles","NotificationBadge","React","Icon","ChevronUp","ChevronDown","Close","Content","info","extraInfo","urlTitle","url","target","readMoreRef","readMoreHoverRefIsHovered","closeButtonRef","closeButtonIsHovered","hasUrl","Forward","getColor","X","ServiceMessage","expanderOpenFromStart","testId","setIsExpanded","useState","labelId","useUuid","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","handleClick","classes"],"mappings":"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"}

package/components/ServiceMessage/styles.module.scss

@@ -54,19 +54,6 @@
     }
   }
 
-  &--alert {
-    background-color: $cherry50;
-
-    &:hover {
-      background-color: rgba-to-rgb(rgba($cherry500, 0.1), $cherry50);
-    }
-
-    &#{$servicemessage},
-    &#{$servicemessage}__label-container {
-      border-color: $cherry700;
-    }
-  }
-
   &--error {
     background-color: $cherry50;
 

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

@@ -15,7 +15,6 @@ export type Styles = {
   'service-message__row': string;
   'service-message__title': string;
   'service-message__toggle': string;
-  'service-message--alert': string;
   'service-message--error': string;
   'service-message--info': string;
   'service-message--success': string;

package/components/Tabs/Tabs.d.ts

@@ -5,6 +5,7 @@ export type { TabProps } from './Tab';
 export type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;
 export type TabsType = 'normal' | 'framed';
 export interface TabsProps {
+    children?: React.ReactNode;
     /** Controlled state for Tabs component */
     activeTab?: number;
     /** Adds custom classes to the element. */

package/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { useSticky } from '../../hooks/useSticky';\nimport { PaletteNames } from '../../theme/palette';\nimport { isMobileUA } from '../../utils/mobile';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsType = 'normal' | 'framed';\n\nexport interface TabsProps {\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the visual type of the tabs */\n  type?: TabsType;\n}\n\nconst swipeDistanceThreshold = 75;\n\nconst TabsRoot: React.FC<TabsProps> = ({ activeTab, children, className, color = 'white', sticky = true, testId, type = 'normal' }) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const [touchStartX, setTouchStartX] = useState(0);\n  const [touchEndX, setTouchEndX] = useState(0);\n  const [translateX, setTranslateX] = useState(0);\n  const [panelAnimation, setPanelAnimation] = useState<'left' | 'right' | null>(null);\n  const mobile = isMobileUA();\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  const onValueChange = (newValue: number, oldValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n      if (newValue > oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onLeftSwipe();\n      } else if (newValue < oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onRightSwipe();\n      }\n    }\n  };\n\n  const onRightSwipe = (): void => {\n    mobile && setPanelAnimation('right');\n  };\n\n  const onLeftSwipe = (): void => {\n    mobile && setPanelAnimation('left');\n  };\n\n  const resetAnimation = (): void => {\n    setPanelAnimation(null);\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  useEffect(() => {\n    const handleTouchStart = (event: TouchEvent): void => {\n      setTouchStartX(event.touches[0].clientX);\n    };\n\n    const handleTouchMove = (event: TouchEvent): void => {\n      setTouchEndX(event.touches[0].clientX);\n      const newTranslateX = event.touches[0].clientX - touchStartX;\n\n      if (activeTabIndex === 0 && newTranslateX > 0) {\n        setTranslateX(0);\n      } else if (activeTabIndex === React.Children.count(children) - 1 && newTranslateX < 0) {\n        setTranslateX(0);\n      } else {\n        setTranslateX(newTranslateX);\n      }\n    };\n\n    const handleTouchEnd = (): void => {\n      const swipeDistance = Math.abs(touchEndX - touchStartX);\n      if (swipeDistance >= swipeDistanceThreshold) {\n        if (touchEndX > touchStartX) {\n          // User swiped right\n          onValueChange(Math.max(0, activeTabIndex - 1), activeTabIndex);\n        } else {\n          // User swiped left\n          onValueChange(Math.min(React.Children.count(children) - 1, activeTabIndex + 1), activeTabIndex);\n        }\n      }\n      setTranslateX(0);\n    };\n\n    if (tabsRef.current) {\n      tabsRef.current.addEventListener('touchstart', handleTouchStart);\n      tabsRef.current.addEventListener('touchmove', handleTouchMove);\n      tabsRef.current.addEventListener('touchend', handleTouchEnd);\n    }\n    return () => {\n      if (tabsRef.current) {\n        tabsRef.current.removeEventListener('touchstart', handleTouchStart);\n        tabsRef.current.removeEventListener('touchmove', handleTouchMove);\n        tabsRef.current.removeEventListener('touchend', handleTouchEnd);\n      }\n    };\n  }, [touchStartX, touchEndX, activeTabIndex]);\n\n  useEffect(() => {\n    const handleAnimationEnd = (): void => {\n      resetAnimation();\n    };\n\n    if (tabPanelRef.current) {\n      tabPanelRef.current.addEventListener('animationend', handleAnimationEnd);\n    }\n\n    return () => {\n      if (tabPanelRef.current) {\n        tabPanelRef.current.removeEventListener('animationend', handleAnimationEnd);\n      }\n    };\n  }, []);\n\n  const { isOutsideWindow } = useSticky(tabListRef, tabsRef);\n\n  return (\n    <div className={className} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky && isOutsideWindow,\n        })}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index, activeTabIndex)}\n          selectedTab={activeTabIndex}\n          color={color}\n          type={type}\n        >\n          {children}\n        </TabList>\n        <div\n          className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`], {\n            [styles['panel-wrapper--framed']]: type == 'framed',\n          })}\n        ></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: type == 'framed' ? '-40px' : '' }}>\n        <TabPanel\n          ref={tabPanelRef}\n          color={color}\n          type={type}\n          isFirst={activeTabIndex == 0}\n          translateX={translateX}\n          animate={panelAnimation}\n        >\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["swipeDistanceThreshold","TabsRoot","activeTab","children","className","color","sticky","testId","type","isControlled","uncontrolledValue","setUncontrolledValue","useState","touchStartX","setTouchStartX","touchEndX","setTouchEndX","translateX","setTranslateX","panelAnimation","setPanelAnimation","mobile","isMobileUA","tabsRef","useRef","tabPanelRef","tabListRef","onValueChange","newValue","oldValue","onLeftSwipe","onRightSwipe","resetAnimation","activeTabIndex","useEffect","handleTouchStart","event","handleTouchMove","newTranslateX","React","handleTouchEnd","handleAnimationEnd","isOutsideWindow","useSticky","classNames","styles","TabList","index","TabPanel","Tabs","Tab"],"mappings":";;;;;;;;AAgCA,MAAMA,IAAyB,IAEzBC,IAAgC,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,WAAAC,GAAW,OAAAC,IAAQ,SAAS,QAAAC,IAAS,IAAM,QAAAC,GAAQ,MAAAC,IAAO,eAAe;AACrI,QAAMC,IAAeP,MAAc,QAC7B,CAACQ,GAAmBC,CAAoB,IAAIC,EAAS,CAAC,GACtD,CAACC,GAAaC,CAAc,IAAIF,EAAS,CAAC,GAC1C,CAACG,GAAWC,CAAY,IAAIJ,EAAS,CAAC,GACtC,CAACK,GAAYC,CAAa,IAAIN,EAAS,CAAC,GACxC,CAACO,GAAgBC,CAAiB,IAAIR,EAAkC,IAAI,GAC5ES,IAASC,KACTC,IAAUC,EAAuB,IAAI,GACrCC,IAAcD,EAAuB,IAAI,GACzCE,IAAaF,EAAuB,IAAI,GAExCG,IAAgB,CAACC,GAAkBC,MAA2B;AAClE,IAAKpB,MACHE,EAAqBiB,CAAQ,GACzBA,IAAWC,KAEbX,EAAc,CAAC,GACHY,OACHF,IAAWC,MAEpBX,EAAc,CAAC,GACFa;EAEjB,GAGIA,IAAe,MAAY;AAC/B,IAAAV,KAAUD,EAAkB,OAAO;AAAA,EAAA,GAG/BU,IAAc,MAAY;AAC9B,IAAAT,KAAUD,EAAkB,MAAM;AAAA,EAAA,GAG9BY,IAAiB,MAAY;AACjC,IAAAZ,EAAkB,IAAI;AAAA,EAAA,GAGlBa,IAAiBxB,IAAeP,IAAYQ;AAElD,EAAAwB,EAAU,MAAM;AACR,UAAAC,IAAmB,CAACC,MAA4B;AACpD,MAAAtB,EAAesB,EAAM,QAAQ,CAAC,EAAE,OAAO;AAAA,IAAA,GAGnCC,IAAkB,CAACD,MAA4B;AACnD,MAAApB,EAAaoB,EAAM,QAAQ,CAAC,EAAE,OAAO;AACrC,YAAME,IAAgBF,EAAM,QAAQ,CAAC,EAAE,UAAUvB;AAE7C,MAAAoB,MAAmB,KAAKK,IAAgB,KAEjCL,MAAmBM,EAAM,SAAS,MAAMpC,CAAQ,IAAI,KAAKmC,IAAgB,IADlFpB,EAAc,CAAC,IAIfA,EAAcoB,CAAa;AAAA,IAC7B,GAGIE,IAAiB,MAAY;AAEjC,MADsB,KAAK,IAAIzB,IAAYF,CAAW,KACjCb,MACfe,IAAYF,IAEdc,EAAc,KAAK,IAAI,GAAGM,IAAiB,CAAC,GAAGA,CAAc,IAG/CN,EAAA,KAAK,IAAIY,EAAM,SAAS,MAAMpC,CAAQ,IAAI,GAAG8B,IAAiB,CAAC,GAAGA,CAAc,IAGlGf,EAAc,CAAC;AAAA,IAAA;AAGjB,WAAIK,EAAQ,YACFA,EAAA,QAAQ,iBAAiB,cAAcY,CAAgB,GACvDZ,EAAA,QAAQ,iBAAiB,aAAac,CAAe,GACrDd,EAAA,QAAQ,iBAAiB,YAAYiB,CAAc,IAEtD,MAAM;AACX,MAAIjB,EAAQ,YACFA,EAAA,QAAQ,oBAAoB,cAAcY,CAAgB,GAC1DZ,EAAA,QAAQ,oBAAoB,aAAac,CAAe,GACxDd,EAAA,QAAQ,oBAAoB,YAAYiB,CAAc;AAAA,IAChE;AAAA,EAED,GAAA,CAAC3B,GAAaE,GAAWkB,CAAc,CAAC,GAE3CC,EAAU,MAAM;AACd,UAAMO,IAAqB,MAAY;AACtB,MAAAT;IAAA;AAGjB,WAAIP,EAAY,WACFA,EAAA,QAAQ,iBAAiB,gBAAgBgB,CAAkB,GAGlE,MAAM;AACX,MAAIhB,EAAY,WACFA,EAAA,QAAQ,oBAAoB,gBAAgBgB,CAAkB;AAAA,IAC5E;AAAA,EAEJ,GAAG,CAAE,CAAA;AAEL,QAAM,EAAE,iBAAAC,EAAoB,IAAAC,EAAUjB,GAAYH,CAAO;AAEzD,SACGgB,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAAnC,GAAsB,eAAaG,KACtCgC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKb;AAAA,MACL,WAAWkB,EAAWC,EAAO,kBAAkB,GAAG;AAAA,QAChD,CAACA,EAAO,0BAA0B,CAAC,GAAGvC,KAAUoC;AAAA,MAAA,CACjD;AAAA,IAAA;AAAA,IAEDH,gBAAAA,EAAA;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,gBAAgB,CAACC,MAAkBpB,EAAcoB,GAAOd,CAAc;AAAA,QACtE,aAAaA;AAAA,QACb,OAAA5B;AAAA,QACA,MAAAG;AAAA,MAAA;AAAA,MAECL;AAAA,IACH;AAAA,IACAoC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWK,EAAWC,EAAO,eAAe,GAAGA,EAAO,kBAAkBxC,CAAK,EAAE,GAAG;AAAA,UAChF,CAACwC,EAAO,uBAAuB,CAAC,GAAGrC,KAAQ;AAAA,QAAA,CAC5C;AAAA,MAAA;AAAA,IACF;AAAA,EAAA,GAEH+B,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKhB,GAAS,OAAO,EAAE,WAAWf,KAAQ,WAAW,UAAU,GAClE,EAAA,GAAA+B,gBAAAA,EAAA;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,KAAKvB;AAAA,MACL,OAAApB;AAAA,MACA,MAAAG;AAAA,MACA,SAASyB,KAAkB;AAAA,MAC3B,YAAAhB;AAAA,MACA,SAASE;AAAA,IAAA;AAAA,IAERoB,EAAM,SAAS,QAAQpC,CAAQ,EAAE8B,CAAc;AAAA,EAEpD,CAAA,CACF;AAEJ,GAKMgB,IAAOhD;AACbgD,EAAK,cAAc;AACnBA,EAAK,MAAMC;AACXD,EAAK,IAAI,cAAc;"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { useSticky } from '../../hooks/useSticky';\nimport { PaletteNames } from '../../theme/palette';\nimport { isMobileUA } from '../../utils/mobile';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsType = 'normal' | 'framed';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the visual type of the tabs */\n  type?: TabsType;\n}\n\nconst swipeDistanceThreshold = 75;\n\nconst TabsRoot: React.FC<TabsProps> = ({ activeTab, children, className, color = 'white', sticky = true, testId, type = 'normal' }) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const [touchStartX, setTouchStartX] = useState(0);\n  const [touchEndX, setTouchEndX] = useState(0);\n  const [translateX, setTranslateX] = useState(0);\n  const [panelAnimation, setPanelAnimation] = useState<'left' | 'right' | null>(null);\n  const mobile = isMobileUA();\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  const onValueChange = (newValue: number, oldValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n      if (newValue > oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onLeftSwipe();\n      } else if (newValue < oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onRightSwipe();\n      }\n    }\n  };\n\n  const onRightSwipe = (): void => {\n    mobile && setPanelAnimation('right');\n  };\n\n  const onLeftSwipe = (): void => {\n    mobile && setPanelAnimation('left');\n  };\n\n  const resetAnimation = (): void => {\n    setPanelAnimation(null);\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  useEffect(() => {\n    const handleTouchStart = (event: TouchEvent): void => {\n      setTouchStartX(event.touches[0].clientX);\n    };\n\n    const handleTouchMove = (event: TouchEvent): void => {\n      setTouchEndX(event.touches[0].clientX);\n      const newTranslateX = event.touches[0].clientX - touchStartX;\n\n      if (activeTabIndex === 0 && newTranslateX > 0) {\n        setTranslateX(0);\n      } else if (activeTabIndex === React.Children.count(children) - 1 && newTranslateX < 0) {\n        setTranslateX(0);\n      } else {\n        setTranslateX(newTranslateX);\n      }\n    };\n\n    const handleTouchEnd = (): void => {\n      const swipeDistance = Math.abs(touchEndX - touchStartX);\n      if (swipeDistance >= swipeDistanceThreshold) {\n        if (touchEndX > touchStartX) {\n          // User swiped right\n          onValueChange(Math.max(0, activeTabIndex - 1), activeTabIndex);\n        } else {\n          // User swiped left\n          onValueChange(Math.min(React.Children.count(children) - 1, activeTabIndex + 1), activeTabIndex);\n        }\n      }\n      setTranslateX(0);\n    };\n\n    if (tabsRef.current) {\n      tabsRef.current.addEventListener('touchstart', handleTouchStart);\n      tabsRef.current.addEventListener('touchmove', handleTouchMove);\n      tabsRef.current.addEventListener('touchend', handleTouchEnd);\n    }\n    return () => {\n      if (tabsRef.current) {\n        tabsRef.current.removeEventListener('touchstart', handleTouchStart);\n        tabsRef.current.removeEventListener('touchmove', handleTouchMove);\n        tabsRef.current.removeEventListener('touchend', handleTouchEnd);\n      }\n    };\n  }, [touchStartX, touchEndX, activeTabIndex]);\n\n  useEffect(() => {\n    const handleAnimationEnd = (): void => {\n      resetAnimation();\n    };\n\n    if (tabPanelRef.current) {\n      tabPanelRef.current.addEventListener('animationend', handleAnimationEnd);\n    }\n\n    return () => {\n      if (tabPanelRef.current) {\n        tabPanelRef.current.removeEventListener('animationend', handleAnimationEnd);\n      }\n    };\n  }, []);\n\n  const { isOutsideWindow } = useSticky(tabListRef, tabsRef);\n\n  return (\n    <div className={className} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky && isOutsideWindow,\n        })}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index, activeTabIndex)}\n          selectedTab={activeTabIndex}\n          color={color}\n          type={type}\n        >\n          {children}\n        </TabList>\n        <div\n          className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`], {\n            [styles['panel-wrapper--framed']]: type == 'framed',\n          })}\n        ></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: type == 'framed' ? '-40px' : '' }}>\n        <TabPanel\n          ref={tabPanelRef}\n          color={color}\n          type={type}\n          isFirst={activeTabIndex == 0}\n          translateX={translateX}\n          animate={panelAnimation}\n        >\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["swipeDistanceThreshold","TabsRoot","activeTab","children","className","color","sticky","testId","type","isControlled","uncontrolledValue","setUncontrolledValue","useState","touchStartX","setTouchStartX","touchEndX","setTouchEndX","translateX","setTranslateX","panelAnimation","setPanelAnimation","mobile","isMobileUA","tabsRef","useRef","tabPanelRef","tabListRef","onValueChange","newValue","oldValue","onLeftSwipe","onRightSwipe","resetAnimation","activeTabIndex","useEffect","handleTouchStart","event","handleTouchMove","newTranslateX","React","handleTouchEnd","handleAnimationEnd","isOutsideWindow","useSticky","classNames","styles","TabList","index","TabPanel","Tabs","Tab"],"mappings":"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"}

package/components/Tag/Tag.d.ts

@@ -6,10 +6,6 @@ export declare enum TagSize {
     medium = "medium",
     large = "large"
 }
-export declare enum TagAction {
-    remove = "remove",
-    undo = "undo"
-}
 export declare enum TagVariant {
     normal = "normal",
     oncolor = "oncolor",
@@ -19,15 +15,13 @@ export type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry'
 export interface TagProps {
     /** Sets the text of the tag */
     children: string;
-    /** Sets the size of the tag. Default: small */
+    /** Sets the size of the tag. Default: medium */
     size?: keyof typeof TagSize;
-    /** Sets the background of the tag. Not used if action is "undo". Default: blueberry */
+    /** Sets the background of the tag. Default: blueberry */
     color?: TagColors;
-    /** Adds an icon to the tag. Not shown if action is set. */
+    /** Adds an icon to the tag. */
     svgIcon?: SvgIcon | IconName;
     variant?: keyof typeof TagVariant;
-    action?: keyof typeof TagAction;
-    onClick?: () => void;
     /** Sets the data-testid attribute on the expander button. */
     testId?: string;
 }

package/components/Tag/Tag.js

@@ -1,48 +1,22 @@
-import n from "react";
+import r from "react";
 import p from "classnames";
-import { AnalyticsId as f, IconSize as u } from "../../constants.js";
-import { useHover as I } from "../../hooks/useHover.js";
-import { palette as g } from "../../theme/palette.js";
-import { Icon as v } from "../Icon/Icon.js";
-import h from "../Icons/Undo.js";
-import X from "../Icons/X.js";
-import { LazyIcon as b } from "../LazyIcon/LazyIcon.js";
-import t from "../Tag/styles.module.scss";
-var z = /* @__PURE__ */ ((e) => (e.medium = "medium", e.large = "large", e))(z || {}), E = /* @__PURE__ */ ((e) => (e.remove = "remove", e.undo = "undo", e))(E || {}), N = /* @__PURE__ */ ((e) => (e.normal = "normal", e.oncolor = "oncolor", e.emphasised = "emphasised", e))(N || {});
-const _ = (e) => {
-  const { children: s, size: c, color: a, variant: r, action: o, onClick: m, testId: l } = e, { hoverRef: i, isHovered: d } = I(), $ = p(
-    t.tag,
-    t[`tag--${c}`],
-    o === "undo" && t[`tag--${o}`],
-    t["tag--has-action"],
-    o === "remove" && [t[`tag--${a}`], t[`tag--${r}`]]
-  ), y = () => {
-    switch (o) {
-      case "remove":
-        return X;
-      case "undo":
-        return h;
-    }
-  };
-  return /* @__PURE__ */ n.createElement("button", { className: $, onClick: m, ref: i, type: "button", "data-testid": l, "data-analyticsid": f.Tag }, s, /* @__PURE__ */ n.createElement(
-    v,
-    {
-      svgIcon: y(),
-      size: u.XXSmall,
-      color: g[`${o === "undo" ? "blueberry" : a}800`],
-      isHovered: d
-    }
-  ));
-}, j = (e) => {
-  const { children: s, size: c = "medium", color: a = "blueberry", svgIcon: r, variant: o = "normal", action: m, onClick: l, testId: i } = e, d = p(t.tag, t[`tag--${c}`], t[`tag--${a}`], t[`tag--${o}`], {
-    [t["tag--has-icon"]]: r
+import { AnalyticsId as g, IconSize as m } from "../../constants.js";
+import { palette as s } from "../../theme/palette.js";
+import { Icon as f } from "../Icon/Icon.js";
+import { LazyIcon as u } from "../LazyIcon/LazyIcon.js";
+import a from "../Tag/styles.module.scss";
+var h = /* @__PURE__ */ ((e) => (e.medium = "medium", e.large = "large", e))(h || {}), y = /* @__PURE__ */ ((e) => (e.normal = "normal", e.oncolor = "oncolor", e.emphasised = "emphasised", e))(y || {});
+const E = (e) => {
+  const { children: l, size: c = "medium", color: o = "blueberry", svgIcon: t, variant: i = "normal", testId: n } = e, d = p(a.tag, a[`tag--${c}`], a[`tag--${o}`], {
+    [a["tag--has-icon"]]: t,
+    [a["tag--emphasised"]]: i == "emphasised"
+    /* emphasised */
   });
-  return m && l ? /* @__PURE__ */ n.createElement(_, { size: c, color: a, variant: o, action: m, onClick: l, testId: i }, s) : /* @__PURE__ */ n.createElement("span", { className: d, "data-testid": i, "data-analyticsid": f.Tag }, r && (typeof r == "string" ? /* @__PURE__ */ n.createElement(b, { iconName: r, size: u.XXSmall, color: g[`${a}800`], className: t.tag__icon }) : /* @__PURE__ */ n.createElement(v, { svgIcon: r, size: u.XXSmall, color: g[`${a}800`], className: t.tag__icon })), s);
+  return /* @__PURE__ */ r.createElement("span", { className: d, "data-testid": n, "data-analyticsid": g.Tag }, t && (typeof t == "string" ? /* @__PURE__ */ r.createElement(u, { iconName: t, size: m.XXSmall, color: s[`${o}800`], className: a.tag__icon }) : /* @__PURE__ */ r.createElement(f, { svgIcon: t, size: m.XXSmall, color: s[`${o}800`], className: a.tag__icon })), l);
 };
 export {
-  E as TagAction,
-  z as TagSize,
-  N as TagVariant,
-  j as default
+  h as TagSize,
+  y as TagVariant,
+  E as default
 };
 //# sourceMappingURL=Tag.js.map

package/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum TagSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum TagAction {\n  remove = 'remove',\n  undo = 'undo',\n}\n\nexport enum TagVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n\nexport type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface TagProps {\n  /** Sets the text of the tag */\n  children: string;\n  /** Sets the size of the tag. Default: small */\n  size?: keyof typeof TagSize;\n  /** Sets the background of the tag. Not used if action is \"undo\". Default: blueberry */\n  color?: TagColors;\n  /** Adds an icon to the tag. Not shown if action is set. */\n  svgIcon?: SvgIcon | IconName;\n  /* Changes the appearance of the tag. Not used if action is \"undo\". Default: normal */\n  variant?: keyof typeof TagVariant;\n  /* Makes the tag a clickable button that performs an action. onClick must also be set. */\n  action?: keyof typeof TagAction;\n  /* Called when action is set and the tag is clicked on. action must also be set. */\n  onClick?: () => void;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\ntype ActionTagProps = Required<Pick<TagProps, 'children' | 'size' | 'color' | 'variant' | 'action' | 'onClick'>> & Pick<TagProps, 'testId'>;\n\nconst ActionTag: React.FC<ActionTagProps> = props => {\n  const { children, size, color, variant, action, onClick, testId } = props;\n\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n\n  const tagClasses = cn(\n    styles.tag,\n    styles[`tag--${size}`],\n    action === 'undo' && styles[`tag--${action}`],\n    styles['tag--has-action'],\n    action === 'remove' && [styles[`tag--${color}`], styles[`tag--${variant}`]]\n  );\n\n  const getActionIcon = (): SvgIcon => {\n    switch (action) {\n      case 'remove':\n        return X;\n      case 'undo':\n        return Undo;\n    }\n  };\n\n  return (\n    <button className={tagClasses} onClick={onClick} ref={hoverRef} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n      <Icon\n        svgIcon={getActionIcon()}\n        size={IconSize.XXSmall}\n        color={palette[`${action === 'undo' ? 'blueberry' : color}800`]}\n        isHovered={isHovered}\n      />\n    </button>\n  );\n};\n\nconst Tag: React.FC<TagProps> = props => {\n  const { children, size = TagSize.medium, color = 'blueberry', svgIcon, variant = 'normal', action, onClick, testId } = props;\n\n  const tagClasses = cn(styles.tag, styles[`tag--${size}`], styles[`tag--${color}`], styles[`tag--${variant}`], {\n    [styles['tag--has-icon']]: svgIcon,\n  });\n\n  if (action && onClick) {\n    return (\n      <ActionTag size={size} color={color} variant={variant} action={action} onClick={onClick} testId={testId}>\n        {children}\n      </ActionTag>\n    );\n  }\n\n  return (\n    <span className={tagClasses} data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {svgIcon &&\n        (typeof svgIcon === 'string' ? (\n          <LazyIcon iconName={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ) : (\n          <Icon svgIcon={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ))}\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n"],"names":["TagSize","TagAction","TagVariant","ActionTag","props","children","size","color","variant","action","onClick","testId","hoverRef","isHovered","useHover","tagClasses","cn","styles","getActionIcon","Undo","React","AnalyticsId","Icon","IconSize","palette","Tag","svgIcon","LazyIcon"],"mappings":";;;;;;;;;;AAeY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,OAAO,QAFGA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,aAAa,cAHHA,IAAAA,KAAA,CAAA,CAAA;AA6BZ,MAAMC,IAAsC,CAASC,MAAA;AAC7C,QAAA,EAAE,UAAAC,GAAU,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAW,IAAAP,GAE9D,EAAE,UAAAQ,GAAU,WAAAC,EAAU,IAAIC,EAA4B,GAEtDC,IAAaC;AAAAA,IACjBC,EAAO;AAAA,IACPA,EAAO,QAAQX,CAAI,EAAE;AAAA,IACrBG,MAAW,UAAUQ,EAAO,QAAQR,CAAM,EAAE;AAAA,IAC5CQ,EAAO,iBAAiB;AAAA,IACxBR,MAAW,YAAY,CAACQ,EAAO,QAAQV,CAAK,EAAE,GAAGU,EAAO,QAAQT,CAAO,EAAE,CAAC;AAAA,EAAA,GAGtEU,IAAgB,MAAe;AACnC,YAAQT,GAAQ;AAAA,MACd,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAAU;AAAA,IACX;AAAA,EAAA;AAGF,SACGC,gBAAAA,EAAA,cAAA,UAAA,EAAO,WAAWL,GAAY,SAAAL,GAAkB,KAAKE,GAAU,MAAK,UAAS,eAAaD,GAAQ,oBAAkBU,EAAY,OAC9HhB,GACDe,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,SAASJ,EAAc;AAAA,MACvB,MAAMK,EAAS;AAAA,MACf,OAAOC,EAAQ,GAAGf,MAAW,SAAS,cAAcF,CAAK,KAAK;AAAA,MAC9D,WAAAM;AAAA,IAAA;AAAA,EAAA,CAEJ;AAEJ,GAEMY,IAA0B,CAASrB,MAAA;AACvC,QAAM,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAgB,OAAAC,IAAQ,aAAa,SAAAmB,GAAS,SAAAlB,IAAU,UAAU,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IAAWP,GAEjHW,IAAaC,EAAGC,EAAO,KAAKA,EAAO,QAAQX,CAAI,EAAE,GAAGW,EAAO,QAAQV,CAAK,EAAE,GAAGU,EAAO,QAAQT,CAAO,EAAE,GAAG;AAAA,IAC5G,CAACS,EAAO,eAAe,CAAC,GAAGS;AAAA,EAAA,CAC5B;AAED,SAAIjB,KAAUC,IAEVU,gBAAAA,EAAA,cAACjB,KAAU,MAAAG,GAAY,OAAAC,GAAc,SAAAC,GAAkB,QAAAC,GAAgB,SAAAC,GAAkB,QAAAC,KACtFN,CACH,IAKFe,gBAAAA,EAAA,cAAC,UAAK,WAAWL,GAAY,eAAaJ,GAAQ,oBAAkBU,EAAY,IAC7E,GAAAK,MACE,OAAOA,KAAY,2CACjBC,GAAS,EAAA,UAAUD,GAAS,MAAMH,EAAS,SAAS,OAAOC,EAAQ,GAAGjB,CAAK,KAAK,GAAG,WAAWU,EAAO,UAAA,CAAW,IAEhHG,gBAAAA,EAAA,cAAAE,GAAA,EAAK,SAAAI,GAAkB,MAAMH,EAAS,SAAS,OAAOC,EAAQ,GAAGjB,CAAK,KAAK,GAAG,WAAWU,EAAO,UAAW,CAAA,IAE/GZ,CACH;AAEJ;"}
+{"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum TagSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum TagVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n\nexport type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface TagProps {\n  /** Sets the text of the tag */\n  children: string;\n  /** Sets the size of the tag. Default: medium */\n  size?: keyof typeof TagSize;\n  /** Sets the background of the tag. Default: blueberry */\n  color?: TagColors;\n  /** Adds an icon to the tag. */\n  svgIcon?: SvgIcon | IconName;\n  /* Changes the appearance of the tag. Default: normal */\n  variant?: keyof typeof TagVariant;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Tag: React.FC<TagProps> = props => {\n  const { children, size = TagSize.medium, color = 'blueberry', svgIcon, variant = 'normal', testId } = props;\n\n  const tagClasses = cn(styles.tag, styles[`tag--${size}`], styles[`tag--${color}`], {\n    [styles['tag--has-icon']]: svgIcon,\n    [styles['tag--emphasised']]: variant == TagVariant.emphasised,\n  });\n\n  return (\n    <span className={tagClasses} data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {svgIcon &&\n        (typeof svgIcon === 'string' ? (\n          <LazyIcon iconName={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ) : (\n          <Icon svgIcon={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ))}\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n"],"names":["TagSize","TagVariant","Tag","props","children","size","color","svgIcon","variant","testId","tagClasses","cn","styles","React","AnalyticsId","LazyIcon","IconSize","palette","Icon"],"mappings":";;;;;;;AAYY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,aAAa,cAHHA,IAAAA,KAAA,CAAA,CAAA;AAuBZ,MAAMC,IAA0B,CAASC,MAAA;AACjC,QAAA,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAgB,OAAAC,IAAQ,aAAa,SAAAC,GAAS,SAAAC,IAAU,UAAU,QAAAC,EAAA,IAAWN,GAEhGO,IAAaC,EAAGC,EAAO,KAAKA,EAAO,QAAQP,CAAI,EAAE,GAAGO,EAAO,QAAQN,CAAK,EAAE,GAAG;AAAA,IACjF,CAACM,EAAO,eAAe,CAAC,GAAGL;AAAA,IAC3B,CAACK,EAAO,iBAAiB,CAAC,GAAGJ,KAAW;AAAA;AAAA,EAAA,CACzC;AAGC,SAAAK,gBAAAA,EAAA,cAAC,UAAK,WAAWH,GAAY,eAAaD,GAAQ,oBAAkBK,EAAY,IAC7E,GAAAP,MACE,OAAOA,KAAY,2CACjBQ,GAAS,EAAA,UAAUR,GAAS,MAAMS,EAAS,SAAS,OAAOC,EAAQ,GAAGX,CAAK,KAAK,GAAG,WAAWM,EAAO,UAAA,CAAW,IAEhHC,gBAAAA,EAAA,cAAAK,GAAA,EAAK,SAAAX,GAAkB,MAAMS,EAAS,SAAS,OAAOC,EAAQ,GAAGX,CAAK,KAAK,GAAG,WAAWM,EAAO,UAAW,CAAA,IAE/GR,CACH;AAEJ;"}

package/components/Tag/index.js

@@ -1,9 +1,8 @@
-import o from "./Tag.js";
-import { TagAction as e, TagSize as g, TagVariant as i } from "./Tag.js";
+import r from "./Tag.js";
+import { TagSize as e, TagVariant as f } from "./Tag.js";
 export {
-  e as TagAction,
-  g as TagSize,
-  i as TagVariant,
-  o as default
+  e as TagSize,
+  f as TagVariant,
+  r as default
 };
 //# sourceMappingURL=index.js.map

package/components/Tag/styles.module.scss

@@ -21,11 +21,6 @@
   font-weight: 600;
   border-radius: 100px;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: $font-size-xs;
-    line-height: 1.25rem;
-  }
-
   $colors: 'blueberry', 'neutral', 'cherry', 'banana', 'kiwi', 'plum';
 
   @each $color in $colors {
@@ -44,93 +39,18 @@
         border-color: map.get($palette-map, #{$color}200);
       }
 
-      &#{$tag}--normal {
-        &#{$tag}--has-action {
-          &:hover {
-            background-color: rgba-to-rgb(rgba(map.get($palette-map, #{$color}200), 0.2));
-          }
-        }
-      }
-
-      &#{$tag}--oncolor {
-        background-color: transparent;
-        &#{$tag}--has-action {
-          &:hover {
-            background-color: map.get($palette-map, #{$color}100);
-            border-color: map.get($palette-map, #{$color}100);
-          }
-
-          &:focus {
-            background-color: $white;
-            border-color: $white;
-            box-shadow: 0 0 0 3px $black;
-          }
-        }
-      }
-
       &#{$tag}--emphasised {
-        @if $color == 'banana' {
-          background-color: rgba-to-rgb(rgba(map.get($palette-map, #{$color}300), 0.4));
-        } @else {
-          background-color: rgba-to-rgb(rgba(map.get($palette-map, #{$color}200), 0.4));
-        }
-        &#{$tag}--has-action {
-          &:hover {
-            @if $color == 'banana' {
-              background-color: rgba-to-rgb(rgba(map.get($palette-map, #{$color}300), 0.5));
-            } @else {
-              background-color: rgba-to-rgb(rgba(map.get($palette-map, #{$color}200), 0.5));
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &--has-action[type='button'] {
-    cursor: pointer;
-    font-family: inherit;
-
-    &:focus {
-      outline: none;
-      border-color: $black;
-      box-shadow: inset 0 0 0 2px $black;
-    }
-    &#{$tag}--undo {
-      color: $blueberry800;
-      background-color: $blueberry100;
-      border-color: $blueberry100;
-      text-decoration: line-through;
-
-      &:hover {
-        background-color: $white;
-        border-color: $blueberry200;
+        background-color: map.get($palette-map, #{$color}50);
       }
     }
   }
 
   &--medium {
     padding: 0 getSpacer(xs);
-    min-height: 26px;
-
-    @media (min-width: map.get($grid-breakpoints, md)) {
-      min-height: 30px;
-    }
+    min-height: 1.625rem;
 
     &#{$tag}--has-icon {
-      padding: 0 getSpacer(xs) 0 6px;
-
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        padding: getSpacer(4xs) getSpacer(xs) getSpacer(4xs) 6px;
-      }
-    }
-
-    &#{$tag}--has-action {
-      padding: 0 getSpacer(3xs) 0 getSpacer(xs);
-
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        padding: getSpacer(4xs) getSpacer(3xs) getSpacer(4xs) getSpacer(xs);
-      }
+      padding: 0 getSpacer(xs) 0 0.375rem;
     }
 
     #{$tag}__icon {
@@ -140,34 +60,14 @@
 
   &--large {
     padding: 0 getSpacer(xs);
-    min-height: 30px;
-
-    @media (min-width: map.get($grid-breakpoints, md)) {
-      min-height: 34px;
-    }
+    min-height: 1.875rem;
 
     &#{$tag}--has-icon {
-      padding: getSpacer(4xs) getSpacer(xs) getSpacer(4xs) 6px;
-
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        padding: getSpacer(3xs) getSpacer(xs) getSpacer(3xs) getSpacer(2xs);
-      }
-    }
-
-    &#{$tag}--has-action {
-      padding: getSpacer(4xs) getSpacer(3xs) getSpacer(4xs) getSpacer(xs);
-
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        padding: getSpacer(3xs) getSpacer(2xs) getSpacer(3xs) getSpacer(xs);
-      }
+      padding: getSpacer(4xs) getSpacer(xs) getSpacer(4xs) 0.375rem;
     }
 
     #{$tag}__icon {
       margin-right: getSpacer(4xs);
-
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        margin-right: getSpacer(3xs);
-      }
     }
   }
 }

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

@@ -5,16 +5,12 @@ export type Styles = {
   'tag--blueberry': string;
   'tag--cherry': string;
   'tag--emphasised': string;
-  'tag--has-action': string;
   'tag--has-icon': string;
   'tag--kiwi': string;
   'tag--large': string;
   'tag--medium': string;
   'tag--neutral': string;
-  'tag--normal': string;
-  'tag--oncolor': string;
   'tag--plum': string;
-  'tag--undo': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/TagList/TagList.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface TagListPropsProps {
+    children?: React.ReactNode;
     /** Sets the data-testid attribute on the expander button. */
     testId?: string;
 }

package/components/TagList/TagList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagList.js","sources":["../../../src/components/TagList/TagList.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TagListPropsProps {\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst TagList: React.FC<TagListPropsProps> = ({ children, testId }) => {\n  return (\n    <ul className={styles['tag-list']} data-testid={testId} data-analyticsid={AnalyticsId.TagList}>\n      {React.Children.map(children, child => (\n        <li className={styles['tag-list__item']}>{child}</li>\n      ))}\n    </ul>\n  );\n};\n\nexport default TagList;\n"],"names":["TagList","children","testId","React","styles","AnalyticsId","child"],"mappings":";;;AAWA,MAAMA,IAAuC,CAAC,EAAE,UAAAC,GAAU,QAAAC,QAEtDC,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWC,EAAO,UAAU,GAAG,eAAaF,GAAQ,oBAAkBG,EAAY,QACnF,GAAAF,EAAM,SAAS,IAAIF,GAAU,CAC5BK,MAAAH,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWC,EAAO,gBAAgB,EAAA,GAAIE,CAAM,CACjD,CACH;"}
+{"version":3,"file":"TagList.js","sources":["../../../src/components/TagList/TagList.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TagListPropsProps {\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst TagList: React.FC<TagListPropsProps> = ({ children, testId }) => {\n  return (\n    <ul className={styles['tag-list']} data-testid={testId} data-analyticsid={AnalyticsId.TagList}>\n      {React.Children.map(children, child => (\n        <li className={styles['tag-list__item']}>{child}</li>\n      ))}\n    </ul>\n  );\n};\n\nexport default TagList;\n"],"names":["TagList","children","testId","React","styles","AnalyticsId","child"],"mappings":";;;AAYA,MAAMA,IAAuC,CAAC,EAAE,UAAAC,GAAU,QAAAC,QAEtDC,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWC,EAAO,UAAU,GAAG,eAAaF,GAAQ,oBAAkBG,EAAY,QACnF,GAAAF,EAAM,SAAS,IAAIF,GAAU,CAC5BK,MAAAH,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWC,EAAO,gBAAgB,EAAA,GAAIE,CAAM,CACjD,CACH;"}

package/components/Tooltip/Tooltip.d.ts

@@ -12,5 +12,8 @@ export type TooltipContext = {
     currentTooltip?: string;
     setCurrentTooltip?: (id?: string) => void;
 };
-export declare const TooltipOpenProvider: React.FC;
+interface TooltipOpenProviderProps {
+    children?: React.ReactNode;
+}
+export declare const TooltipOpenProvider: React.FC<TooltipOpenProviderProps>;
 export default Tooltip;

package/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useContext, useState, useEffect, useRef } from 'react';\n\nimport TooltipWord from './TooltipWord';\nimport { useDelayedState } from '../../hooks/useDelayedState';\nimport { useUuid } from '../../hooks/useUuid';\nimport HelpBubble from '../HelpBubble';\n\nconst HOVER_DELAY_MS = 200;\n\nexport interface TooltipProps {\n  /** Ordet som skal ha en tilhørende tooltip */\n  children: string;\n  /** Teksten som skal vises i tooltip */\n  description: React.ReactNode;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ children, description, testId }) => {\n  const helpBubbleId = useUuid();\n  const wordRef = useRef<HTMLButtonElement>(null);\n  const { currentTooltip, setCurrentTooltip } = useContext(TooltipOpenContext);\n  const [{ showTooltip, keepOpen }, setShowTooltipDelayed, setShowTooltip] = useDelayedState(\n    { showTooltip: false, keepOpen: false },\n    HOVER_DELAY_MS\n  );\n\n  useEffect(() => {\n    if (!setCurrentTooltip) {\n      return;\n    }\n    if (showTooltip) {\n      setCurrentTooltip(helpBubbleId);\n    } else {\n      setCurrentTooltip(undefined);\n    }\n  }, [showTooltip]);\n\n  useEffect(() => {\n    if (currentTooltip !== helpBubbleId && typeof currentTooltip !== 'undefined') {\n      setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n    }\n  }, [currentTooltip]);\n\n  const handleDocumentClick = (): void => {\n    if (!showTooltip) {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('mouseup', handleDocumentClick);\n    return (): void => {\n      document.removeEventListener('mouseup', handleDocumentClick);\n    };\n  }, []);\n\n  const handleTooltipClick = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n  };\n\n  const handleFocus = (): void => {\n    if (!currentTooltip) {\n      setShowTooltipDelayed(prevState => ({ showTooltip: true, keepOpen: prevState.keepOpen }));\n    }\n  };\n\n  const handleBlur = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>): void => {\n    if (e.key === 'Enter') {\n      setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n    }\n    if (e.key === 'Escape') {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  return (\n    <>\n      <TooltipWord\n        ref={wordRef}\n        onClick={handleTooltipClick}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        ariaDescribedById={helpBubbleId}\n        testId={testId}\n      >\n        {children}\n      </TooltipWord>\n      <HelpBubble helpBubbleId={helpBubbleId} controllerRef={wordRef} role=\"tooltip\" showBubble={showTooltip || keepOpen}>\n        {description}\n      </HelpBubble>\n    </>\n  );\n};\n\nexport type TooltipContext = {\n  currentTooltip?: string;\n  setCurrentTooltip?: (id?: string) => void;\n};\n\nconst TooltipOpenContext = React.createContext<TooltipContext>({\n  currentTooltip: undefined,\n});\n\nexport const TooltipOpenProvider: React.FC = ({ children }) => {\n  const [currentTooltip, setCurrentTooltip] = useState<string>();\n\n  return <TooltipOpenContext.Provider value={{ currentTooltip, setCurrentTooltip }}>{children}</TooltipOpenContext.Provider>;\n};\n\nexport default Tooltip;\n"],"names":["HOVER_DELAY_MS","Tooltip","children","description","testId","helpBubbleId","useUuid","wordRef","useRef","currentTooltip","setCurrentTooltip","useContext","TooltipOpenContext","showTooltip","keepOpen","setShowTooltipDelayed","setShowTooltip","useDelayedState","useEffect","prevState","handleDocumentClick","handleTooltipClick","handleFocus","handleBlur","handleKeyDown","React","TooltipWord","HelpBubble","TooltipOpenProvider","useState"],"mappings":";;;;;AAOA,MAAMA,IAAiB,KAWVC,IAAkC,CAAC,EAAE,UAAAC,GAAU,aAAAC,GAAa,QAAAC,QAAa;AACpF,QAAMC,IAAeC,KACfC,IAAUC,EAA0B,IAAI,GACxC,EAAE,gBAAAC,GAAgB,mBAAAC,EAAkB,IAAIC,EAAWC,CAAkB,GACrE,CAAC,EAAE,aAAAC,GAAa,UAAAC,EAAY,GAAAC,GAAuBC,CAAc,IAAIC;AAAA,IACzE,EAAE,aAAa,IAAO,UAAU,GAAM;AAAA,IACtCjB;AAAA,EAAA;AAGF,EAAAkB,EAAU,MAAM;AACd,IAAKR,KAIHA,EADEG,IACgBR,IAEA,MAFY;AAAA,EAGhC,GACC,CAACQ,CAAW,CAAC,GAEhBK,EAAU,MAAM;AACd,IAAIT,MAAmBJ,KAAgB,OAAOI,IAAmB,OAC/DO,EAAe,QAAc,EAAE,aAAa,IAAO,UAAUG,EAAU,SAAW,EAAA;AAAA,EACpF,GACC,CAACV,CAAc,CAAC;AAEnB,QAAMW,IAAsB,MAAY;AACtC,IAAKP,KACHG,EAAe,EAAE,aAAa,IAAO,UAAU,GAAO,CAAA;AAAA,EACxD;AAGF,EAAAE,EAAU,OACC,SAAA,iBAAiB,WAAWE,CAAmB,GACjD,MAAY;AACR,aAAA,oBAAoB,WAAWA,CAAmB;AAAA,EAAA,IAE5D,CAAE,CAAA;AAEL,QAAMC,IAAqB,MAAY;AACtB,IAAAL,EAAA,CAAAG,OAAc,EAAE,aAAa,CAACA,EAAU,aAAa,UAAU,CAACA,EAAU,SAAA,EAAW;AAAA,EAAA,GAGhGG,IAAc,MAAY;AAC9B,IAAKb,KACHM,EAAsB,QAAc,EAAE,aAAa,IAAM,UAAUI,EAAU,SAAW,EAAA;AAAA,EAC1F,GAGII,IAAa,MAAY;AAC7B,IAAAP,EAAe,QAAc,EAAE,aAAa,IAAO,UAAUG,EAAU,SAAW,EAAA;AAAA,EAAA,GAG9EK,IAAgB,CAAC,MAAkD;AACnE,IAAA,EAAE,QAAQ,WACGR,EAAA,CAAAG,OAAc,EAAE,aAAa,CAACA,EAAU,aAAa,UAAU,CAACA,EAAU,SAAA,EAAW,GAElG,EAAE,QAAQ,YACZH,EAAe,EAAE,aAAa,IAAO,UAAU,GAAO,CAAA;AAAA,EACxD;AAGF,SAEIS,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKnB;AAAA,MACL,SAASc;AAAA,MACT,SAASC;AAAA,MACT,QAAQC;AAAA,MACR,WAAWC;AAAA,MACX,mBAAmBnB;AAAA,MACnB,QAAAD;AAAA,IAAA;AAAA,IAECF;AAAA,EAAA,GAEHuB,gBAAAA,EAAA,cAACE,GAAW,EAAA,cAAAtB,GAA4B,eAAeE,GAAS,MAAK,WAAU,YAAYM,KAAeC,EACvG,GAAAX,CACH,CACF;AAEJ,GAOMS,IAAqBa,EAAM,cAA8B;AAAA,EAC7D,gBAAgB;AAClB,CAAC,GAEYG,IAAgC,CAAC,EAAE,UAAA1B,QAAe;AAC7D,QAAM,CAACO,GAAgBC,CAAiB,IAAImB,EAAiB;AAEtD,SAAAJ,gBAAAA,EAAA,cAACb,EAAmB,UAAnB,EAA4B,OAAO,EAAE,gBAAAH,GAAgB,mBAAAC,IAAkB,GAAIR,CAAS;AAC9F;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useContext, useState, useEffect, useRef } from 'react';\n\nimport TooltipWord from './TooltipWord';\nimport { useDelayedState } from '../../hooks/useDelayedState';\nimport { useUuid } from '../../hooks/useUuid';\nimport HelpBubble from '../HelpBubble';\n\nconst HOVER_DELAY_MS = 200;\n\nexport interface TooltipProps {\n  /** Ordet som skal ha en tilhørende tooltip */\n  children: string;\n  /** Teksten som skal vises i tooltip */\n  description: React.ReactNode;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ children, description, testId }) => {\n  const helpBubbleId = useUuid();\n  const wordRef = useRef<HTMLButtonElement>(null);\n  const { currentTooltip, setCurrentTooltip } = useContext(TooltipOpenContext);\n  const [{ showTooltip, keepOpen }, setShowTooltipDelayed, setShowTooltip] = useDelayedState(\n    { showTooltip: false, keepOpen: false },\n    HOVER_DELAY_MS\n  );\n\n  useEffect(() => {\n    if (!setCurrentTooltip) {\n      return;\n    }\n    if (showTooltip) {\n      setCurrentTooltip(helpBubbleId);\n    } else {\n      setCurrentTooltip(undefined);\n    }\n  }, [showTooltip]);\n\n  useEffect(() => {\n    if (currentTooltip !== helpBubbleId && typeof currentTooltip !== 'undefined') {\n      setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n    }\n  }, [currentTooltip]);\n\n  const handleDocumentClick = (): void => {\n    if (!showTooltip) {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('mouseup', handleDocumentClick);\n    return (): void => {\n      document.removeEventListener('mouseup', handleDocumentClick);\n    };\n  }, []);\n\n  const handleTooltipClick = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n  };\n\n  const handleFocus = (): void => {\n    if (!currentTooltip) {\n      setShowTooltipDelayed(prevState => ({ showTooltip: true, keepOpen: prevState.keepOpen }));\n    }\n  };\n\n  const handleBlur = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>): void => {\n    if (e.key === 'Enter') {\n      setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n    }\n    if (e.key === 'Escape') {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  return (\n    <>\n      <TooltipWord\n        ref={wordRef}\n        onClick={handleTooltipClick}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        ariaDescribedById={helpBubbleId}\n        testId={testId}\n      >\n        {children}\n      </TooltipWord>\n      <HelpBubble helpBubbleId={helpBubbleId} controllerRef={wordRef} role=\"tooltip\" showBubble={showTooltip || keepOpen}>\n        {description}\n      </HelpBubble>\n    </>\n  );\n};\n\nexport type TooltipContext = {\n  currentTooltip?: string;\n  setCurrentTooltip?: (id?: string) => void;\n};\n\nconst TooltipOpenContext = React.createContext<TooltipContext>({\n  currentTooltip: undefined,\n});\n\ninterface TooltipOpenProviderProps {\n  children?: React.ReactNode;\n}\n\nexport const TooltipOpenProvider: React.FC<TooltipOpenProviderProps> = ({ children }) => {\n  const [currentTooltip, setCurrentTooltip] = useState<string>();\n\n  return <TooltipOpenContext.Provider value={{ currentTooltip, setCurrentTooltip }}>{children}</TooltipOpenContext.Provider>;\n};\n\nexport default Tooltip;\n"],"names":["HOVER_DELAY_MS","Tooltip","children","description","testId","helpBubbleId","useUuid","wordRef","useRef","currentTooltip","setCurrentTooltip","useContext","TooltipOpenContext","showTooltip","keepOpen","setShowTooltipDelayed","setShowTooltip","useDelayedState","useEffect","prevState","handleDocumentClick","handleTooltipClick","handleFocus","handleBlur","handleKeyDown","React","TooltipWord","HelpBubble","TooltipOpenProvider","useState"],"mappings":";;;;;AAOA,MAAMA,IAAiB,KAWVC,IAAkC,CAAC,EAAE,UAAAC,GAAU,aAAAC,GAAa,QAAAC,QAAa;AACpF,QAAMC,IAAeC,KACfC,IAAUC,EAA0B,IAAI,GACxC,EAAE,gBAAAC,GAAgB,mBAAAC,EAAkB,IAAIC,EAAWC,CAAkB,GACrE,CAAC,EAAE,aAAAC,GAAa,UAAAC,EAAY,GAAAC,GAAuBC,CAAc,IAAIC;AAAA,IACzE,EAAE,aAAa,IAAO,UAAU,GAAM;AAAA,IACtCjB;AAAA,EAAA;AAGF,EAAAkB,EAAU,MAAM;AACd,IAAKR,KAIHA,EADEG,IACgBR,IAEA,MAFY;AAAA,EAGhC,GACC,CAACQ,CAAW,CAAC,GAEhBK,EAAU,MAAM;AACd,IAAIT,MAAmBJ,KAAgB,OAAOI,IAAmB,OAC/DO,EAAe,QAAc,EAAE,aAAa,IAAO,UAAUG,EAAU,SAAW,EAAA;AAAA,EACpF,GACC,CAACV,CAAc,CAAC;AAEnB,QAAMW,IAAsB,MAAY;AACtC,IAAKP,KACHG,EAAe,EAAE,aAAa,IAAO,UAAU,GAAO,CAAA;AAAA,EACxD;AAGF,EAAAE,EAAU,OACC,SAAA,iBAAiB,WAAWE,CAAmB,GACjD,MAAY;AACR,aAAA,oBAAoB,WAAWA,CAAmB;AAAA,EAAA,IAE5D,CAAE,CAAA;AAEL,QAAMC,IAAqB,MAAY;AACtB,IAAAL,EAAA,CAAAG,OAAc,EAAE,aAAa,CAACA,EAAU,aAAa,UAAU,CAACA,EAAU,SAAA,EAAW;AAAA,EAAA,GAGhGG,IAAc,MAAY;AAC9B,IAAKb,KACHM,EAAsB,QAAc,EAAE,aAAa,IAAM,UAAUI,EAAU,SAAW,EAAA;AAAA,EAC1F,GAGII,IAAa,MAAY;AAC7B,IAAAP,EAAe,QAAc,EAAE,aAAa,IAAO,UAAUG,EAAU,SAAW,EAAA;AAAA,EAAA,GAG9EK,IAAgB,CAAC,MAAkD;AACnE,IAAA,EAAE,QAAQ,WACGR,EAAA,CAAAG,OAAc,EAAE,aAAa,CAACA,EAAU,aAAa,UAAU,CAACA,EAAU,SAAA,EAAW,GAElG,EAAE,QAAQ,YACZH,EAAe,EAAE,aAAa,IAAO,UAAU,GAAO,CAAA;AAAA,EACxD;AAGF,SAEIS,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKnB;AAAA,MACL,SAASc;AAAA,MACT,SAASC;AAAA,MACT,QAAQC;AAAA,MACR,WAAWC;AAAA,MACX,mBAAmBnB;AAAA,MACnB,QAAAD;AAAA,IAAA;AAAA,IAECF;AAAA,EAAA,GAEHuB,gBAAAA,EAAA,cAACE,GAAW,EAAA,cAAAtB,GAA4B,eAAeE,GAAS,MAAK,WAAU,YAAYM,KAAeC,EACvG,GAAAX,CACH,CACF;AAEJ,GAOMS,IAAqBa,EAAM,cAA8B;AAAA,EAC7D,gBAAgB;AAClB,CAAC,GAMYG,IAA0D,CAAC,EAAE,UAAA1B,QAAe;AACvF,QAAM,CAACO,GAAgBC,CAAiB,IAAImB,EAAiB;AAEtD,SAAAJ,gBAAAA,EAAA,cAACb,EAAmB,UAAnB,EAA4B,OAAO,EAAE,gBAAAH,GAAgB,mBAAAC,IAAkB,GAAIR,CAAS;AAC9F;"}

package/components/Validation/Validation.d.ts

@@ -6,11 +6,6 @@ interface ValidationProps {
     errorTitle?: string;
     /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */
     errors?: ValidationErrors;
-    /**
-     * Summary of form errors
-     * @deprecated Use errorTitle and errors instead
-     * */
-    errorSummary?: string;
     /** Items in the Validation compontent */
     children?: React.ReactNode;
     /** Adds custom classes to the element. */

package/components/Validation/Validation.js

@@ -1,15 +1,14 @@
-import e from "react";
-import s from "classnames";
-import l from "./ValidationSummary.js";
-import { AnalyticsId as n } from "../../constants.js";
-import { isComponent as d } from "../../utils/component.js";
-import { FormGroup as c } from "../FormGroup/FormGroup.js";
-import t from "../Validation/styles.module.scss";
-const f = e.forwardRef((r, m) => {
-  const o = r.errors || r.errorSummary ? t["form-group-wrapper--error-sibling"] : "", i = s(t["validation-errors"], r.errorSummary && t["validation-errors--visible"]);
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { "data-testid": r.testId, "data-analyticsid": n.Validation, className: r.className, ref: m }, e.Children.map(r.children, (a) => d(a, c) ? e.cloneElement(a, {
-    className: o
-  }) : a)), /* @__PURE__ */ e.createElement(l, { errorTitle: r.errorTitle, errors: r.errors }, r.errorSummary && /* @__PURE__ */ e.createElement("div", { className: i }, r.errorSummary)));
+import r from "react";
+import m from "./ValidationSummary.js";
+import { AnalyticsId as o } from "../../constants.js";
+import { isComponent as l } from "../../utils/component.js";
+import { FormGroup as d } from "../FormGroup/FormGroup.js";
+import s from "../Validation/styles.module.scss";
+const f = r.forwardRef((t, n) => {
+  const a = (e) => l(e, d) ? r.cloneElement(e, {
+    errorWrapperClassName: s["validation__error-wrapper"]
+  }) : r.isValidElement(e) && e.type === r.Fragment ? r.Children.map(e.props.children, (i) => a(i)) : e;
+  return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", { "data-testid": t.testId, "data-analyticsid": o.Validation, className: t.className, ref: n }, r.Children.map(t.children, (e) => a(e))), /* @__PURE__ */ r.createElement(m, { errorTitle: t.errorTitle, errors: t.errors }));
 });
 f.displayName = "Validation";
 export {

package/components/Validation/Validation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Validation.js","sources":["../../../src/components/Validation/Validation.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { ValidationErrors } from './types';\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId, FormSize } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport FormGroup, { FormGroupProps } from '../FormGroup/FormGroup';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /**\n   * Summary of form errors\n   * @deprecated Use errorTitle and errors instead\n   * */\n  errorSummary?: string;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Validation = React.forwardRef((props: ValidationProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const hasErrors = props.errors || props.errorSummary;\n  const formGroupClasses = hasErrors ? styles['form-group-wrapper--error-sibling'] : '';\n  const errorClasses = classNames(styles['validation-errors'], props.errorSummary && styles['validation-errors--visible']);\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => {\n          if (isComponent<FormGroupProps>(child, FormGroup)) {\n            return React.cloneElement(child, {\n              className: formGroupClasses,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors}>\n        {props.errorSummary && <div className={errorClasses}>{props.errorSummary}</div>}\n      </ValidationSummary>\n    </>\n  );\n});\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n"],"names":["Validation","React","props","ref","formGroupClasses","styles","errorClasses","classNames","AnalyticsId","child","isComponent","FormGroup","ValidationSummary"],"mappings":";;;;;;;AAgCO,MAAMA,IAAaC,EAAM,WAAW,CAACC,GAAwBC,MAA4C;AAE9G,QAAMC,IADYF,EAAM,UAAUA,EAAM,eACHG,EAAO,mCAAmC,IAAI,IAC7EC,IAAeC,EAAWF,EAAO,mBAAmB,GAAGH,EAAM,gBAAgBG,EAAO,4BAA4B,CAAC;AAEvH,2DAEKJ,gBAAAA,EAAA,cAAA,OAAA,EAAI,eAAaC,EAAM,QAAQ,oBAAkBM,EAAY,YAAY,WAAWN,EAAM,WAAW,KAAAC,KACnGF,EAAM,SAAS,IAAIC,EAAM,UAAU,CAACO,MAC/BC,EAA4BD,GAAOE,CAAS,IACvCV,EAAM,aAAaQ,GAAO;AAAA,IAC/B,WAAWL;AAAA,EAAA,CACZ,IAGIK,CACR,CACH,GACAR,gBAAAA,EAAA,cAACW,KAAkB,YAAYV,EAAM,YAAY,QAAQA,EAAM,UAC5DA,EAAM,gDAAiB,OAAI,EAAA,WAAWI,KAAeJ,EAAM,YAAa,CAC3E,CACF;AAEJ,CAAC;AAEDF,EAAW,cAAc;"}
+{"version":3,"file":"Validation.js","sources":["../../../src/components/Validation/Validation.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ValidationErrors } from './types';\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId, FormSize } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport FormGroup, { FormGroupProps } from '../FormGroup/FormGroup';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Validation = React.forwardRef((props: ValidationProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const renderChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        errorWrapperClassName: styles['validation__error-wrapper'],\n      });\n    }\n    if (React.isValidElement(child) && child.type === React.Fragment) {\n      return React.Children.map(child.props.children, (child: React.ReactNode) => {\n        return renderChild(child);\n      });\n    }\n\n    return child;\n  };\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} />\n    </>\n  );\n});\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n"],"names":["Validation","React","props","ref","renderChild","child","isComponent","FormGroup","styles","AnalyticsId","ValidationSummary"],"mappings":";;;;;;AAyBO,MAAMA,IAAaC,EAAM,WAAW,CAACC,GAAwBC,MAA4C;AACxG,QAAAC,IAAc,CAACC,MACfC,EAA4BD,GAAOE,CAAS,IACvCN,EAAM,aAAaI,GAAO;AAAA,IAC/B,uBAAuBG,EAAO,2BAA2B;AAAA,EAAA,CAC1D,IAECP,EAAM,eAAeI,CAAK,KAAKA,EAAM,SAASJ,EAAM,WAC/CA,EAAM,SAAS,IAAII,EAAM,MAAM,UAAU,CAACA,MACxCD,EAAYC,CAAK,CACzB,IAGIA;AAGT,SAEIJ,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA,cAAC,OAAI,EAAA,eAAaC,EAAM,QAAQ,oBAAkBO,EAAY,YAAY,WAAWP,EAAM,WAAW,KAAAC,KACnGF,EAAM,SAAS,IAAIC,EAAM,UAAU,CAACG,MAA2BD,EAAYC,CAAK,CAAC,CACpF,GACCJ,gBAAAA,EAAA,cAAAS,GAAA,EAAkB,YAAYR,EAAM,YAAY,QAAQA,EAAM,OAAQ,CAAA,CACzE;AAEJ,CAAC;AAEDF,EAAW,cAAc;"}

package/components/Validation/ValidationSummary.js

@@ -6,8 +6,8 @@ import { Title as s } from "../Title/Title.js";
 import a from "../Validation/styles.module.scss";
 const y = (e) => {
   const { errorTitleHtmlMarkup: l = "h2" } = e, t = n(), i = m(
-    a["validation-summary"],
-    !!e.errors && Object.entries(e.errors).length > 0 && a["validation-summary--visible"]
+    a.validation__summary,
+    !!e.errors && Object.entries(e.errors).length > 0 && a["validation__summary--visible"]
   );
   return /* @__PURE__ */ r.createElement("div", { role: "alert", "aria-live": "polite", "aria-relevant": "all", "aria-labelledby": t, className: i }, !!e.errors && Object.entries(e.errors).length > 0 && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(s, { appearance: "title4", id: t, htmlMarkup: l, margin: { marginTop: 0, marginBottom: 1 } }, e.errorTitle), /* @__PURE__ */ r.createElement(o, { errors: e.errors })), e.children);
 };