@helsenorge/designsystem-react 15.5.0 → 15.5.1

package/lib/AnchorLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorLink.js","names":[],"sources":["../src/components/AnchorLink/AnchorLink.tsx","../src/components/AnchorLink/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys';\nimport AsChildSlot from '../AsChildSlot';\nimport Icon, { IconSize } from '../Icon';\nimport ArrowUpRightLight from '../Icons/ArrowUpRightLight';\n\nimport AnchorLinkStyles from './styles.module.scss';\n\nexport type AnchorLinkTargets = '_self' | '_blank' | '_parent';\n\nexport type AnchorLinkTags = 'a' | 'button';\n\nexport type AnchorLinkOnClickEvent =\n  React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<unknown> | React.KeyboardEvent<HTMLUListElement> | null;\n\nexport interface AnchorLinkProps {\n  /** When true, onclick and keyboard events will be passed to the child. */\n  asChild?: boolean;\n  /** Sets the content of the <a> tag */\n  children: React.ReactNode;\n  /** URL to link to */\n  href?: string;\n  /** Gives a unique id to the anchor-link :) */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the target type of the <a> tag. _blank adds an arrow icon at the end of the link */\n  target?: AnchorLinkTargets;\n  /** HTML markup for anchor link. Default: a */\n  htmlMarkup?: AnchorLinkTags;\n  /** Function that is called when clicked */\n  onClick?: (e?: AnchorLinkOnClickEvent) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLAnchorElement | HTMLButtonElement | null>;\n}\n\nconst AnchorLink: React.FC<AnchorLinkProps> = props => {\n  const { asChild, id, href, children, className, target = '_self', htmlMarkup = 'a', onClick, testId, ref } = props;\n  const external = target === '_blank';\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement>(\n    ref as React.RefObject<HTMLButtonElement | HTMLAnchorElement>\n  );\n  const anchorClasses = classNames(AnchorLinkStyles.anchorlink, className);\n\n  const commonProps = {\n    id,\n    ['data-testid']: testId,\n    ['data-analyticsid']: AnalyticsId.AnchorLink,\n    onClick,\n  };\n\n  const renderContent = (): React.ReactElement => (\n    <>\n      {children}\n      {external && (\n        <Icon\n          className={AnchorLinkStyles.anchorlink__icon}\n          svgIcon={ArrowUpRightLight}\n          color={getColor('blueberry', 600)}\n          hoverColor={getColor('blueberry', 700)}\n          size={IconSize.XSmall}\n          isHovered={isHovered}\n        />\n      )}\n    </>\n  );\n\n  if (asChild) {\n    return (\n      <AsChildSlot content={<span className={anchorClasses} />} className={AnchorLinkStyles['anchorlink-wrapper']} elementRef={refObject}>\n        {children}\n      </AsChildSlot>\n    );\n  }\n\n  if (htmlMarkup === 'a') {\n    return (\n      <a\n        href={href}\n        target={target}\n        className={anchorClasses}\n        rel={external ? 'noopener noreferrer' : undefined}\n        ref={refObject as React.RefObject<HTMLAnchorElement>}\n        {...commonProps}\n      >\n        {renderContent()}\n      </a>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      className={AnchorLinkStyles['anchorlink-wrapper']}\n      ref={refObject as React.RefObject<HTMLButtonElement>}\n      {...commonProps}\n    >\n      <span className={anchorClasses}>{renderContent()}</span>\n    </button>\n  );\n};\n\nexport default AnchorLink;\n","import AnchorLink from './AnchorLink';\nexport * from './AnchorLink';\nexport default AnchorLink;\n"],"mappings":";;;;;;;;;;AAyCA,IAAM,cAAwC,UAAS;CACrD,MAAM,EAAE,SAAS,IAAI,MAAM,UAAU,WAAW,SAAS,SAAS,aAAa,KAAK,SAAS,QAAQ,QAAQ;CAC7G,MAAM,WAAW,WAAW;CAC5B,MAAM,EAAE,WAAW,cAAc,iBAC/B,GACF;CACA,MAAM,gBAAgB,WAAW,iBAAiB,YAAY,SAAS;CAEvE,MAAM,cAAc;EAClB;GACC,gBAAgB;GAChB,qBAAqB,YAAY;EAClC;CACF;CAEA,MAAM,sBACJ,qBAAA,UAAA,EAAA,UAAA,CACG,UACA,YACC,oBAAC,cAAD;EACE,WAAW,iBAAiB;EAC5B,SAAS;EACT,OAAO,SAAS,aAAa,GAAG;EAChC,YAAY,SAAS,aAAa,GAAG;EACrC,MAAM,SAAS;EACJ;CACZ,CAAA,CAEH,EAAA,CAAA;CAGJ,IAAI,SACF,OACE,oBAAC,qBAAD;EAAa,SAAS,oBAAC,QAAD,EAAM,WAAW,cAAgB,CAAA;EAAG,WAAW,iBAAiB;EAAuB,YAAY;EACtH;CACU,CAAA;CAIjB,IAAI,eAAe,KACjB,OACE,oBAAC,KAAD;EACQ;EACE;EACR,WAAW;EACX,KAAK,WAAW,wBAAwB,KAAA;EACxC,KAAK;EACL,GAAI;YAEH,cAAc;CACd,CAAA;CAIP,OACE,oBAAC,UAAD;EACE,MAAK;EACL,WAAW,iBAAiB;EAC5B,KAAK;EACL,GAAI;YAEJ,oBAAC,QAAD;GAAM,WAAW;aAAgB,cAAc;EAAQ,CAAA;CACjD,CAAA;AAEZ;;;ACvGA,IAAA,qBAAe"}
+{"version":3,"file":"AnchorLink.js","names":[],"sources":["../src/components/AnchorLink/AnchorLink.tsx","../src/components/AnchorLink/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys';\nimport AsChildSlot from '../AsChildSlot';\nimport Icon, { IconSize } from '../Icon';\nimport ArrowUpRightLight from '../Icons/ArrowUpRightLight';\n\nimport AnchorLinkStyles from './styles.module.scss';\n\nexport type AnchorLinkTargets = '_self' | '_blank' | '_parent';\n\nexport type AnchorLinkTags = 'a' | 'button';\n\nexport type AnchorLinkOnClickEvent =\n  React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<unknown> | React.KeyboardEvent<HTMLUListElement> | null;\n\nexport interface AnchorLinkProps {\n  /** When true, onclick and keyboard events will be passed to the child. */\n  asChild?: boolean;\n  /** Sets the content of the <a> tag */\n  children: React.ReactNode;\n  /** URL to link to */\n  href?: string;\n  /** Gives a unique id to the anchor-link :) */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the target type of the <a> tag. _blank adds an arrow icon at the end of the link */\n  target?: AnchorLinkTargets;\n  /** HTML markup for anchor link. Default: a */\n  htmlMarkup?: AnchorLinkTags;\n  /** Function that is called when clicked */\n  onClick?: (e?: AnchorLinkOnClickEvent) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLAnchorElement | HTMLButtonElement | null>;\n}\n\nconst AnchorLink: React.FC<AnchorLinkProps> = props => {\n  const { asChild, id, href, children, className, target = '_self', htmlMarkup = 'a', onClick, testId, ref } = props;\n  const external = target === '_blank';\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement>(\n    ref as React.RefObject<HTMLButtonElement | HTMLAnchorElement>\n  );\n  const anchorClasses = classNames(AnchorLinkStyles.anchorlink, className);\n\n  const commonProps = {\n    id,\n    ['data-testid']: testId,\n    ['data-analyticsid']: AnalyticsId.AnchorLink,\n    onClick,\n  };\n\n  const renderContent = (): React.ReactElement => (\n    <>\n      {children}\n      {external && (\n        <Icon\n          className={AnchorLinkStyles.anchorlink__icon}\n          svgIcon={ArrowUpRightLight}\n          color={getColor('blueberry', 600)}\n          hoverColor={getColor('blueberry', 700)}\n          size={IconSize.XSmall}\n          isHovered={isHovered}\n        />\n      )}\n    </>\n  );\n\n  if (asChild) {\n    return (\n      <AsChildSlot content={<span className={anchorClasses} />} className={AnchorLinkStyles['anchorlink-wrapper']} elementRef={refObject}>\n        {children}\n      </AsChildSlot>\n    );\n  }\n\n  if (htmlMarkup === 'a') {\n    return (\n      <a\n        href={href}\n        target={target}\n        className={anchorClasses}\n        rel={external ? 'noopener noreferrer' : undefined}\n        ref={refObject as React.RefObject<HTMLAnchorElement>}\n        {...commonProps}\n      >\n        {renderContent()}\n      </a>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      className={AnchorLinkStyles['anchorlink-wrapper']}\n      ref={refObject as React.RefObject<HTMLButtonElement>}\n      {...commonProps}\n    >\n      <span className={anchorClasses}>{renderContent()}</span>\n    </button>\n  );\n};\n\nexport default AnchorLink;\n","import AnchorLink from './AnchorLink';\nexport * from './AnchorLink';\nexport default AnchorLink;\n"],"mappings":";;;;;;;;;;AAyCA,IAAM,cAAwC,UAAS;CACrD,MAAM,EAAE,SAAS,IAAI,MAAM,UAAU,WAAW,SAAS,SAAS,aAAa,KAAK,SAAS,QAAQ,QAAQ;CAC7G,MAAM,WAAW,WAAW;CAC5B,MAAM,EAAE,WAAW,cAAc,iBAC/B,GACF;CACA,MAAM,gBAAgB,WAAW,iBAAiB,YAAY,SAAS;CAEvE,MAAM,cAAc;EAClB;GACC,gBAAgB;GAChB,qBAAqB,YAAY;EAClC;CACF;CAEA,MAAM,sBACJ,qBAAA,UAAA,EAAA,UAAA,CACG,UACA,YACC,oBAAC,cAAD;EACE,WAAW,iBAAiB;EAC5B,SAAS;EACT,OAAO,SAAS,aAAa,GAAG;EAChC,YAAY,SAAS,aAAa,GAAG;EACrC,MAAM,SAAS;EACJ;CACZ,CAAA,CAEH,EAAA,CAAA;CAGJ,IAAI,SACF,OACE,oBAAC,qBAAD;EAAa,SAAS,oBAAC,QAAD,EAAM,WAAW,cAAgB,CAAA;EAAG,WAAW,iBAAiB;EAAuB,YAAY;EACtH;CACU,CAAA;CAIjB,IAAI,eAAe,KACjB,OACE,oBAAC,KAAD;EACQ;EACE;EACR,WAAW;EACX,KAAK,WAAW,wBAAwB,KAAA;EACxC,KAAK;EACL,GAAI;EAEH,UAAA,cAAc;CACd,CAAA;CAIP,OACE,oBAAC,UAAD;EACE,MAAK;EACL,WAAW,iBAAiB;EAC5B,KAAK;EACL,GAAI;EAEJ,UAAA,oBAAC,QAAD;GAAM,WAAW;GAAgB,UAAA,cAAc;EAAQ,CAAA;CACjD,CAAA;AAEZ;;;ACvGA,IAAA,qBAAe"}

package/lib/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":[],"sources":["../src/components/Avatar/constants.ts","../src/components/Avatar/Avatar.tsx","../src/components/Avatar/index.ts"],"sourcesContent":["export enum AvatarSize {\n  xsmall = 'xsmall',\n  small = 'small',\n}\n","import cn from 'classnames';\n\nimport { AvatarSize } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icon';\nimport Check from '../Icons/Check';\n\nimport styles from './styles.module.scss';\n\nexport interface AvatarProps {\n  /** Name to display in the avatar. Will be truncated to the first two characters. */\n  children: string;\n  /** Displays a check icon to indicated the selected state. */\n  selected?: boolean;\n  /** Sets blue or black color on avatar. */\n  color?: 'blueberry' | 'black';\n  /** Square or circle variant of avatar. The circle should only be used for representation of someone else. NB: This is temporary and will be renamed in v10 */\n  variant?: 'square' | 'circle';\n  /** Avatar size. Default: small */\n  size?: keyof typeof AvatarSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the root element */\n  ref?: React.Ref<HTMLElement | null>;\n}\nexport type AvatarType = typeof Avatar;\nconst Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {\n  const {\n    children,\n    className = '',\n    selected = false,\n    color = 'blueberry',\n    variant = 'square',\n    size = AvatarSize.small,\n    testId,\n    ref,\n  } = props;\n  const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);\n  return (\n    <span\n      className={cn(\n        styles.avatar,\n        selected && styles['avatar--selected'],\n        color === 'black' && styles['avatar--black'],\n        variant === 'circle' && styles['avatar--circle'],\n        size === AvatarSize.xsmall && styles['avatar--xsmall'],\n        size === AvatarSize.small && styles['avatar--small'],\n        className\n      )}\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Avatar}\n    >\n      {selected ? (\n        <Icon svgIcon={Check} size={IconSize.Small} color={color === 'black' ? palette.neutral900 : palette.blueberry600} />\n      ) : (\n        truncatedName\n      )}\n    </span>\n  );\n};\n\nexport default Avatar;\n","import Avatar from './Avatar';\nexport { AvatarSize } from './constants';\nexport * from './Avatar';\nexport default Avatar;\n"],"mappings":";;;;;;;;AAAA,IAAY,aAAL,yBAAA,YAAA;CACL,WAAA,YAAA;CACA,WAAA,WAAA;;AACF,EAAA,CAAA,CAAA;;;AC0BA,IAAM,UAAiC,UAAuB;CAC5D,MAAM,EACJ,UACA,YAAY,IACZ,WAAW,OACX,QAAQ,aACR,UAAU,UACV,OAAO,WAAW,OAClB,QACA,QACE;CACJ,MAAM,gBAAgB,SAAS,OAAO,CAAC,CAAC,CAAC,kBAAkB,IAAI,SAAS,UAAU,GAAG,CAAC;CACtF,OACE,oBAAC,QAAD;EACE,WAAW,WACT,OAAO,QACP,YAAY,OAAO,qBACnB,UAAU,WAAW,OAAO,kBAC5B,YAAY,YAAY,OAAO,mBAC/B,SAAS,WAAW,UAAU,OAAO,mBACrC,SAAS,WAAW,SAAS,OAAO,kBACpC,SACF;EACK;EACL,eAAa;EACb,oBAAkB,YAAY;YAE7B,WACC,oBAAC,cAAD;GAAM,SAAS;GAAO,MAAM,SAAS;GAAO,OAAO,UAAU,UAAU,QAAQ,aAAa,QAAQ;EAAe,CAAA,IAEnH;CAEE,CAAA;AAEV;;;AC5DA,IAAA,iBAAe"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../src/components/Avatar/constants.ts","../src/components/Avatar/Avatar.tsx","../src/components/Avatar/index.ts"],"sourcesContent":["export enum AvatarSize {\n  xsmall = 'xsmall',\n  small = 'small',\n}\n","import cn from 'classnames';\n\nimport { AvatarSize } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icon';\nimport Check from '../Icons/Check';\n\nimport styles from './styles.module.scss';\n\nexport interface AvatarProps {\n  /** Name to display in the avatar. Will be truncated to the first two characters. */\n  children: string;\n  /** Displays a check icon to indicated the selected state. */\n  selected?: boolean;\n  /** Sets blue or black color on avatar. */\n  color?: 'blueberry' | 'black';\n  /** Square or circle variant of avatar. The circle should only be used for representation of someone else. NB: This is temporary and will be renamed in v10 */\n  variant?: 'square' | 'circle';\n  /** Avatar size. Default: small */\n  size?: keyof typeof AvatarSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the root element */\n  ref?: React.Ref<HTMLElement | null>;\n}\nexport type AvatarType = typeof Avatar;\nconst Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {\n  const {\n    children,\n    className = '',\n    selected = false,\n    color = 'blueberry',\n    variant = 'square',\n    size = AvatarSize.small,\n    testId,\n    ref,\n  } = props;\n  const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);\n  return (\n    <span\n      className={cn(\n        styles.avatar,\n        selected && styles['avatar--selected'],\n        color === 'black' && styles['avatar--black'],\n        variant === 'circle' && styles['avatar--circle'],\n        size === AvatarSize.xsmall && styles['avatar--xsmall'],\n        size === AvatarSize.small && styles['avatar--small'],\n        className\n      )}\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Avatar}\n    >\n      {selected ? (\n        <Icon svgIcon={Check} size={IconSize.Small} color={color === 'black' ? palette.neutral900 : palette.blueberry600} />\n      ) : (\n        truncatedName\n      )}\n    </span>\n  );\n};\n\nexport default Avatar;\n","import Avatar from './Avatar';\nexport { AvatarSize } from './constants';\nexport * from './Avatar';\nexport default Avatar;\n"],"mappings":";;;;;;;;AAAA,IAAY,aAAL,yBAAA,YAAA;CACL,WAAA,YAAA;CACA,WAAA,WAAA;;AACF,EAAA,CAAA,CAAA;;;AC0BA,IAAM,UAAiC,UAAuB;CAC5D,MAAM,EACJ,UACA,YAAY,IACZ,WAAW,OACX,QAAQ,aACR,UAAU,UACV,OAAO,WAAW,OAClB,QACA,QACE;CACJ,MAAM,gBAAgB,SAAS,OAAO,CAAC,CAAC,CAAC,kBAAkB,IAAI,SAAS,UAAU,GAAG,CAAC;CACtF,OACE,oBAAC,QAAD;EACE,WAAW,WACT,OAAO,QACP,YAAY,OAAO,qBACnB,UAAU,WAAW,OAAO,kBAC5B,YAAY,YAAY,OAAO,mBAC/B,SAAS,WAAW,UAAU,OAAO,mBACrC,SAAS,WAAW,SAAS,OAAO,kBACpC,SACF;EACK;EACL,eAAa;EACb,oBAAkB,YAAY;EAE7B,UAAA,WACC,oBAAC,cAAD;GAAM,SAAS;GAAO,MAAM,SAAS;GAAO,OAAO,UAAU,UAAU,QAAQ,aAAa,QAAQ;EAAe,CAAA,IAEnH;CAEE,CAAA;AAEV;;;AC5DA,IAAA,iBAAe"}

package/lib/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../src/components/Button/Button.tsx","../src/components/Button/index.ts"],"sourcesContent":["import React, { type AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { type HTMLButtonProps, type HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { type BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonOnColor = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\nexport type ButtonArrows = 'icon' | 'accessibility-character';\nexport type ButtonTextPosition = 'left' | 'centered';\n\nexport interface ButtonProps extends Omit<HTMLButtonProps, 'onClick' | 'type'>, Omit<HTMLAnchorProps, 'onClick'>, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: ButtonArrows;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  onColor?: ButtonOnColor;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (\n    e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<unknown> | React.KeyboardEvent<HTMLUListElement> | null\n  ) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the text */\n  textClassName?: string;\n  /** Sets the position of the text in the button - only applies when button is fluid */\n  textPosition?: ButtonTextPosition;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n  /** Ref that is passed to the component */\n  ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getIconSize = (large: boolean, mobile: boolean, isBorderless: boolean): IconSize => {\n  if ((isBorderless && large) || (mobile && large)) {\n    return IconSize.Small;\n  }\n\n  if (large) {\n    return IconSize.Medium;\n  }\n\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    // eslint-disable-next-line no-console\n    console.error(new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav'));\n  }\n};\n\nconst Button: React.FC<ButtonProps> = props => {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    onColor = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    textClassName,\n    textPosition = 'left',\n    ref,\n    ...restProps\n  } = props;\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement | null>(ref);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = onColor === 'ondark';\n  const isMobile = useIsMobileBreakpoint();\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, isMobile);\n  const hasArrow = arrow === 'icon' && !borderlessVariant;\n  const large = size === 'large' && !destructive;\n  const largeBorderless = large && borderlessVariant;\n  const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--medium']]: !large,\n      [buttonStyles['button--large-non-borderless']]: large && !largeBorderless,\n      [buttonStyles['button--large-borderless']]: largeBorderless,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(\n    buttonStyles['button__text'],\n    {\n      [buttonStyles['button__text--ellipsis']]: ellipsis,\n      [buttonStyles['button__text--centered']]: fluid && textPosition === 'centered',\n    },\n    textClassName\n  );\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color && !disabled ? iconElement.props.color : iconColor,\n          isHovered: iconElement.props.isHovered === undefined ? !disabled && isHovered : iconElement.props.isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): React.ReactNode => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): React.ReactNode => {\n    const iconSize = getIconSize(large, isMobile, borderlessVariant);\n\n    return (\n      <span className={buttonClasses}>\n        {renderIcon(leftIcon, iconSize, !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n        {renderButtonContent()}\n        {hasArrow\n          ? renderIcon(\n              <Icon svgIcon={ArrowRight} />,\n              iconSize,\n              classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n            )\n          : renderIcon(rightIcon, iconSize, buttonStyles['button__right-icon'])}\n        {hasUURightArrow && (\n          <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']} aria-hidden>\n            {'  →'}\n          </span>\n        )}\n      </span>\n    );\n  };\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={refObject as React.RefObject<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={refObject as React.RefObject<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n};\n\nexport default Button;\n","import Button from './Button';\nexport * from './Button';\nexport default Button;\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":[],"sources":["../src/components/Button/Button.tsx","../src/components/Button/index.ts"],"sourcesContent":["import React, { type AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { type HTMLButtonProps, type HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { type BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonOnColor = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\nexport type ButtonArrows = 'icon' | 'accessibility-character';\nexport type ButtonTextPosition = 'left' | 'centered';\n\nexport interface ButtonProps extends Omit<HTMLButtonProps, 'onClick' | 'type'>, Omit<HTMLAnchorProps, 'onClick'>, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: ButtonArrows;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  onColor?: ButtonOnColor;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (\n    e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<unknown> | React.KeyboardEvent<HTMLUListElement> | null\n  ) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the text */\n  textClassName?: string;\n  /** Sets the position of the text in the button - only applies when button is fluid */\n  textPosition?: ButtonTextPosition;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n  /** Ref that is passed to the component */\n  ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getIconSize = (large: boolean, mobile: boolean, isBorderless: boolean): IconSize => {\n  if ((isBorderless && large) || (mobile && large)) {\n    return IconSize.Small;\n  }\n\n  if (large) {\n    return IconSize.Medium;\n  }\n\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    // eslint-disable-next-line no-console\n    console.error(new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav'));\n  }\n};\n\nconst Button: React.FC<ButtonProps> = props => {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    onColor = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    textClassName,\n    textPosition = 'left',\n    ref,\n    ...restProps\n  } = props;\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement | null>(ref);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = onColor === 'ondark';\n  const isMobile = useIsMobileBreakpoint();\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, isMobile);\n  const hasArrow = arrow === 'icon' && !borderlessVariant;\n  const large = size === 'large' && !destructive;\n  const largeBorderless = large && borderlessVariant;\n  const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--medium']]: !large,\n      [buttonStyles['button--large-non-borderless']]: large && !largeBorderless,\n      [buttonStyles['button--large-borderless']]: largeBorderless,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(\n    buttonStyles['button__text'],\n    {\n      [buttonStyles['button__text--ellipsis']]: ellipsis,\n      [buttonStyles['button__text--centered']]: fluid && textPosition === 'centered',\n    },\n    textClassName\n  );\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color && !disabled ? iconElement.props.color : iconColor,\n          isHovered: iconElement.props.isHovered === undefined ? !disabled && isHovered : iconElement.props.isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): React.ReactNode => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): React.ReactNode => {\n    const iconSize = getIconSize(large, isMobile, borderlessVariant);\n\n    return (\n      <span className={buttonClasses}>\n        {renderIcon(leftIcon, iconSize, !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n        {renderButtonContent()}\n        {hasArrow\n          ? renderIcon(\n              <Icon svgIcon={ArrowRight} />,\n              iconSize,\n              classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n            )\n          : renderIcon(rightIcon, iconSize, buttonStyles['button__right-icon'])}\n        {hasUURightArrow && (\n          <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']} aria-hidden>\n            {'  →'}\n          </span>\n        )}\n      </span>\n    );\n  };\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={refObject as React.RefObject<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={refObject as React.RefObject<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n};\n\nexport default Button;\n","import Button from './Button';\nexport * from './Button';\nexport default Button;\n"],"mappings":"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"}

package/lib/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [15.5.1](https://github.com/helsenorge/designsystem/compare/v15.5.0...v15.5.1) (2026-08-11)
+
+### Bug Fixes
+
+* **datepicker:**  legg til ref som del av interface ([608e3c7](https://github.com/helsenorge/designsystem/commit/608e3c79021264b71503ea35963bfc73ed858bf3)), closes [#382784](https://github.com/helsenorge/designsystem/issues/382784)
+* **datepicker:**  skal ligge over filterdrawer ([12efc78](https://github.com/helsenorge/designsystem/commit/12efc78c305e580632f9007d04c74e0009d5ebe5)), closes [#382949](https://github.com/helsenorge/designsystem/issues/382949)
+* **daterangeselector:**  importer tokenfil ([0beb8eb](https://github.com/helsenorge/designsystem/commit/0beb8eb175ec881665efc40baf8a957adf6b7e34)), closes [#380549](https://github.com/helsenorge/designsystem/issues/380549)
+
 ## [15.5.0](https://github.com/helsenorge/designsystem/compare/v15.4.0...v15.5.0) (2026-08-05)
 
 ### Features

package/lib/Checkbox.js

@@ -8,12 +8,13 @@ import { getAriaDescribedBy } from "./utils/accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { r as renderLabelAsParent, t as getLabelText } from "./utils2.js";
 import classNames from "classnames";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import checkboxStyles from "./components/Checkbox/styles.module.scss";
 //#region src/components/Checkbox/Checkbox.tsx
 var Checkbox = (props) => {
 	const { className, checked = false, disabled, label, inputId = uuid(), onColor = FormOnColor.onwhite, name = inputId, size, errorText, error = !!errorText, errorTextId: errorTextIdProp, errorWrapperClassName, value = getLabelText(label), testId, required, onChange, ref } = props;
+	const [checkedControlledState, setCheckedControlledState] = useState(checked);
 	const [isChecked, setIsChecked] = useState(checked);
 	const errorTextId = useIdWithFallback(errorTextIdProp);
 	const onWhite = onColor === FormOnColor.onwhite;
@@ -44,9 +45,10 @@ var Checkbox = (props) => {
 		[checkboxStyles["checkbox-label__text--on-dark"]]: onDark,
 		[checkboxStyles["checkbox-label__text--disabled"]]: disabled
 	});
-	useEffect(() => {
-		setIsChecked(checked);
-	}, [checked]);
+	if (checked !== checkedControlledState && typeof checked !== "undefined") {
+		setCheckedControlledState(checked);
+		if (typeof checked !== "undefined") setIsChecked(checked);
+	}
 	const onChangeHandler = (e) => {
 		if (onChange) onChange(e);
 		setIsChecked(!isChecked);

package/lib/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport CheckboxMarker from './CheckboxMarker/CheckboxMarker';\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the checkbox */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ref,\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onWhite = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const large = size === FormSize.large;\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--large']]: large,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--large']]: large,\n    [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n    [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n    [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n    [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n    [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <span className={checkboxStyles['checkbox__marker-wrapper']}>\n          <input\n            id={inputId}\n            name={name}\n            className={checkboxClasses}\n            type=\"checkbox\"\n            checked={isChecked}\n            disabled={disabled}\n            value={value}\n            ref={mergedRefs}\n            aria-describedby={getAriaDescribedBy(props, errorTextId)}\n            aria-invalid={error}\n            required={required}\n            onChange={onChangeHandler}\n          />\n          <CheckboxMarker checked={isChecked} disabled={disabled} error={error} onColor={onColor} size={size} />\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: checkboxLabelClasses,\n          labelTextClassName: labelTextClasses,\n          sublabelWrapperClassName: checkboxStyles['checkbox-sublabel-wrapper'],\n          large: large,\n          afterLabelChildrenClassName: checkboxStyles['checkbox-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;AA+CA,IAAa,YAAoC,UAAS;CACxD,MAAM,EACJ,WACA,UAAU,OACV,UACA,OACA,UAAU,KAAK,GACf,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,QAAQ,CAAC,CAAC,WACV,aAAa,iBACb,uBACA,QAAQ,aAAa,KAAK,GAC1B,QACA,UACA,UACA,QACE;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,OAAO;CAClD,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,UAAU,YAAY,YAAY;CACxC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,YAAY,SAAS,YAAY,YAAY;CACnD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,QAAQ,SAAS,SAAS;CAChC,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,GAAG,IAAI,MAAM,IAAI;CACxG,MAAM,aAAa,UAAU,CAAC,KAAK,SAAS,CAAC;CAE7C,MAAM,yBAAyB,WAAW,eAAe,qBAAqB,GAC3E,eAAe,6BAA6B,MAC/C,CAAC;CACD,MAAM,uBAAuB,WAAW,eAAe,mBAAmB;GACvE,eAAe,8BAA8B;GAC7C,eAAe,6BAA6B;GAC5C,eAAe,2BAA2B;GAC1C,eAAe,oCAAoC,SAAS;GAC5D,eAAe,kCAAkC,SAAS;GAC1D,eAAe,qCAAqC,SAAS;GAC7D,eAAe,oCAAoC,SAAS;GAC5D,eAAe,yCAAyC,SAAS;GACjE,eAAe,uCAAuC,SAAS;GAC/D,eAAe,qCAAqC,SAAS;CAChE,CAAC;CACD,MAAM,kBAAkB,WAAW,eAAe,UAAU,SAAS;CACrE,MAAM,mBAAmB,WAAW,eAAe,yBAAyB;GACzE,eAAe,0CAA0C,SAAS;GAClE,eAAe,0CAA0C,SAAS,aAAa;GAC/E,eAAe,mCAAmC;GAClD,eAAe,oCAAoC;CACtD,CAAC;CAED,gBAAgB;EACd,aAAa,OAAO;CACtB,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,mBAAmB,MAAiD;EACxE,IAAI,UACF,SAAS,CAAC;EAGZ,aAAa,CAAC,SAAS;CACzB;CAEA,MAAM,wBAAyC;EAC7C,OACE,oBAAA,UAAA,EAAA,UACE,qBAAC,QAAD;GAAM,WAAW,eAAe;aAAhC,CACE,oBAAC,SAAD;IACE,IAAI;IACE;IACN,WAAW;IACX,MAAK;IACL,SAAS;IACC;IACH;IACP,KAAK;IACL,oBAAkB,mBAAmB,OAAO,WAAW;IACvD,gBAAc;IACJ;IACV,UAAU;GACX,CAAA,GACD,oBAAC,gBAAD;IAAgB,SAAS;IAAqB;IAAiB;IAAgB;IAAe;GAAO,CAAA,CACjG;KACN,CAAA;CAEN;CAEA,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;YACjF,oBAAC,OAAD;GAAK,eAAa;GAAQ,oBAAkB,YAAY;GAAU,WAAW;aAC1E,oBAAoB;IACZ;IACP,UAAU,gBAAgB;IACjB;IACA;IACT,gBAAgB;IAChB,oBAAoB;IACpB,0BAA0B,eAAe;IAClC;IACP,6BAA6B,eAAe;GAC9C,CAAC;EACE,CAAA;CACO,CAAA;AAElB"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport CheckboxMarker from './CheckboxMarker/CheckboxMarker';\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the checkbox */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ref,\n  } = props;\n\n  const [checkedControlledState, setCheckedControlledState] = useState(checked);\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onWhite = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const large = size === FormSize.large;\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--large']]: large,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--large']]: large,\n    [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n    [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n    [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n    [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n    [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n\n  if (checked !== checkedControlledState && typeof checked !== 'undefined') {\n    setCheckedControlledState(checked);\n\n    if (typeof checked !== 'undefined') {\n      setIsChecked(checked);\n    }\n  }\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <span className={checkboxStyles['checkbox__marker-wrapper']}>\n          <input\n            id={inputId}\n            name={name}\n            className={checkboxClasses}\n            type=\"checkbox\"\n            checked={isChecked}\n            disabled={disabled}\n            value={value}\n            ref={mergedRefs}\n            aria-describedby={getAriaDescribedBy(props, errorTextId)}\n            aria-invalid={error}\n            required={required}\n            onChange={onChangeHandler}\n          />\n          <CheckboxMarker checked={isChecked} disabled={disabled} error={error} onColor={onColor} size={size} />\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: checkboxLabelClasses,\n          labelTextClassName: labelTextClasses,\n          sublabelWrapperClassName: checkboxStyles['checkbox-sublabel-wrapper'],\n          large: large,\n          afterLabelChildrenClassName: checkboxStyles['checkbox-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;AA+CA,IAAa,YAAoC,UAAS;CACxD,MAAM,EACJ,WACA,UAAU,OACV,UACA,OACA,UAAU,KAAK,GACf,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,QAAQ,CAAC,CAAC,WACV,aAAa,iBACb,uBACA,QAAQ,aAAa,KAAK,GAC1B,QACA,UACA,UACA,QACE;CAEJ,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,OAAO;CAC5E,MAAM,CAAC,WAAW,gBAAgB,SAAS,OAAO;CAClD,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,UAAU,YAAY,YAAY;CACxC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,YAAY,SAAS,YAAY,YAAY;CACnD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,QAAQ,SAAS,SAAS;CAChC,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,GAAG,IAAI,MAAM,IAAI;CACxG,MAAM,aAAa,UAAU,CAAC,KAAK,SAAS,CAAC;CAE7C,MAAM,yBAAyB,WAAW,eAAe,qBAAqB,GAC3E,eAAe,6BAA6B,MAC/C,CAAC;CACD,MAAM,uBAAuB,WAAW,eAAe,mBAAmB;GACvE,eAAe,8BAA8B;GAC7C,eAAe,6BAA6B;GAC5C,eAAe,2BAA2B;GAC1C,eAAe,oCAAoC,SAAS;GAC5D,eAAe,kCAAkC,SAAS;GAC1D,eAAe,qCAAqC,SAAS;GAC7D,eAAe,oCAAoC,SAAS;GAC5D,eAAe,yCAAyC,SAAS;GACjE,eAAe,uCAAuC,SAAS;GAC/D,eAAe,qCAAqC,SAAS;CAChE,CAAC;CACD,MAAM,kBAAkB,WAAW,eAAe,UAAU,SAAS;CACrE,MAAM,mBAAmB,WAAW,eAAe,yBAAyB;GACzE,eAAe,0CAA0C,SAAS;GAClE,eAAe,0CAA0C,SAAS,aAAa;GAC/E,eAAe,mCAAmC;GAClD,eAAe,oCAAoC;CACtD,CAAC;CAED,IAAI,YAAY,0BAA0B,OAAO,YAAY,aAAa;EACxE,0BAA0B,OAAO;EAEjC,IAAI,OAAO,YAAY,aACrB,aAAa,OAAO;CAExB;CAEA,MAAM,mBAAmB,MAAiD;EACxE,IAAI,UACF,SAAS,CAAC;EAGZ,aAAa,CAAC,SAAS;CACzB;CAEA,MAAM,wBAAyC;EAC7C,OACE,oBAAA,UAAA,EAAA,UACE,qBAAC,QAAD;GAAM,WAAW,eAAe;GAAhC,UAAA,CACE,oBAAC,SAAD;IACE,IAAI;IACE;IACN,WAAW;IACX,MAAK;IACL,SAAS;IACC;IACH;IACP,KAAK;IACL,oBAAkB,mBAAmB,OAAO,WAAW;IACvD,gBAAc;IACJ;IACV,UAAU;GACX,CAAA,GACD,oBAAC,gBAAD;IAAgB,SAAS;IAAqB;IAAiB;IAAgB;IAAe;GAAO,CAAA,CACjG;EACN,CAAA,EAAA,CAAA;CAEN;CAEA,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;EACjF,UAAA,oBAAC,OAAD;GAAK,eAAa;GAAQ,oBAAkB,YAAY;GAAU,WAAW;GAC1E,UAAA,oBAAoB;IACZ;IACP,UAAU,gBAAgB;IACjB;IACA;IACT,gBAAgB;IAChB,oBAAoB;IACpB,0BAA0B,eAAe;IAClC;IACP,6BAA6B,eAAe;GAC9C,CAAC;EACE,CAAA;CACO,CAAA;AAElB"}

package/lib/Checkbox2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox2.js","names":[],"sources":["../src/components/VisualCheckboxCloud/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../../ErrorWrapper';\n\nimport { AnalyticsId } from '../../../constants';\nimport { useIdWithFallback } from '../../../hooks/useIdWithFallback';\nimport { getAriaDescribedBy } from '../../../utils/accessibility';\nimport ErrorWrapper from '../../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends ErrorWrapperClassNameProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'className' | 'children' | 'size'> {\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Label text shown inside the pill. */\n  children: React.ReactNode;\n  /** input id of the underlying checkbox */\n  inputId?: string;\n  /** Activates error styling. Can be true while errorText is empty (e.g. when used in a FormGroup). */\n  error?: boolean;\n  /** Error text to show above the component. */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref forwarded to the underlying input element. */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst Checkbox: React.FC<CheckboxProps> = props => {\n  const {\n    className,\n    checked,\n    defaultChecked,\n    children,\n    inputId: inputIdProp,\n    errorText,\n    error = !!errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    testId,\n    onChange,\n    ref,\n    ...rest\n  } = props;\n\n  const inputId = useIdWithFallback(inputIdProp);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const [isChecked, setIsChecked] = useState<boolean>(!!(checked ?? defaultChecked));\n  const [prevChecked, setPrevChecked] = useState<boolean | undefined>(checked);\n  if (prevChecked !== checked) {\n    setPrevChecked(checked);\n    if (checked !== undefined && checked !== isChecked) {\n      setIsChecked(checked);\n    }\n  }\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    setIsChecked(e.target.checked);\n    onChange?.(e);\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <label\n        className={classNames(\n          styles['visual-checkbox'],\n          {\n            [styles['visual-checkbox--checked']]: isChecked,\n            [styles['visual-checkbox--invalid']]: error,\n          },\n          className\n        )}\n        htmlFor={inputId}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Checkbox}\n      >\n        <input\n          {...rest}\n          id={inputId}\n          ref={ref}\n          className={styles['visual-checkbox__input']}\n          type=\"checkbox\"\n          checked={isChecked}\n          aria-invalid={error}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n          onChange={handleChange}\n        />\n        <span className={styles['visual-checkbox__pill']}>\n          {isChecked && (\n            <span className={styles['visual-checkbox__icon']} aria-hidden=\"true\">\n              <svg width=\"16\" height=\"12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"m14.754.165 1.08 1.074.166.164-.16.17L6.13 12 .159 5.59 0 5.42l.166-.164 1.08-1.075.165-.164.16.17 4.558 4.896 8.3-8.913.16-.17.165.165Z\" />\n              </svg>\n            </span>\n          )}\n          <span className={styles['visual-checkbox__label']}>{children}</span>\n        </span>\n      </label>\n    </ErrorWrapper>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;AAiCA,IAAM,YAAoC,UAAS;CACjD,MAAM,EACJ,WACA,SACA,gBACA,UACA,SAAS,aACT,WACA,QAAQ,CAAC,CAAC,WACV,aAAa,iBACb,uBACA,QACA,UACA,KACA,GAAG,SACD;CAEJ,MAAM,UAAU,kBAAkB,WAAW;CAC7C,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,CAAC,WAAW,gBAAgB,SAAkB,CAAC,EAAE,WAAW,eAAe;CACjF,MAAM,CAAC,aAAa,kBAAkB,SAA8B,OAAO;CAC3E,IAAI,gBAAgB,SAAS;EAC3B,eAAe,OAAO;EACtB,IAAI,YAAY,KAAA,KAAa,YAAY,WACvC,aAAa,OAAO;CAExB;CAEA,MAAM,gBAAgB,MAAiD;EACrE,aAAa,EAAE,OAAO,OAAO;EAC7B,WAAW,CAAC;CACd;CAEA,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;YACjF,qBAAC,SAAD;GACE,WAAW,WACT,OAAO,oBACP;KACG,OAAO,8BAA8B;KACrC,OAAO,8BAA8B;GACxC,GACA,SACF;GACA,SAAS;GACT,eAAa;GACb,oBAAkB,YAAY;aAXhC,CAaE,oBAAC,SAAD;IACE,GAAI;IACJ,IAAI;IACC;IACL,WAAW,OAAO;IAClB,MAAK;IACL,SAAS;IACT,gBAAc;IACd,oBAAkB,mBAAmB,OAAO,WAAW;IACvD,UAAU;GACX,CAAA,GACD,qBAAC,QAAD;IAAM,WAAW,OAAO;cAAxB,CACG,aACC,oBAAC,QAAD;KAAM,WAAW,OAAO;KAA0B,eAAY;eAC5D,oBAAC,OAAD;MAAK,OAAM;MAAK,QAAO;MAAK,MAAK;MAAO,OAAM;gBAC5C,oBAAC,QAAD,EAAM,GAAE,2IAA4I,CAAA;KACjJ,CAAA;IACD,CAAA,GAER,oBAAC,QAAD;KAAM,WAAW,OAAO;KAA4B;IAAe,CAAA,CAC/D;KACD;;CACK,CAAA;AAElB"}
+{"version":3,"file":"Checkbox2.js","names":[],"sources":["../src/components/VisualCheckboxCloud/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../../ErrorWrapper';\n\nimport { AnalyticsId } from '../../../constants';\nimport { useIdWithFallback } from '../../../hooks/useIdWithFallback';\nimport { getAriaDescribedBy } from '../../../utils/accessibility';\nimport ErrorWrapper from '../../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends ErrorWrapperClassNameProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'className' | 'children' | 'size'> {\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Label text shown inside the pill. */\n  children: React.ReactNode;\n  /** input id of the underlying checkbox */\n  inputId?: string;\n  /** Activates error styling. Can be true while errorText is empty (e.g. when used in a FormGroup). */\n  error?: boolean;\n  /** Error text to show above the component. */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref forwarded to the underlying input element. */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst Checkbox: React.FC<CheckboxProps> = props => {\n  const {\n    className,\n    checked,\n    defaultChecked,\n    children,\n    inputId: inputIdProp,\n    errorText,\n    error = !!errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    testId,\n    onChange,\n    ref,\n    ...rest\n  } = props;\n\n  const inputId = useIdWithFallback(inputIdProp);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const [isChecked, setIsChecked] = useState<boolean>(!!(checked ?? defaultChecked));\n  const [prevChecked, setPrevChecked] = useState<boolean | undefined>(checked);\n  if (prevChecked !== checked) {\n    setPrevChecked(checked);\n    if (checked !== undefined && checked !== isChecked) {\n      setIsChecked(checked);\n    }\n  }\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    setIsChecked(e.target.checked);\n    onChange?.(e);\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <label\n        className={classNames(\n          styles['visual-checkbox'],\n          {\n            [styles['visual-checkbox--checked']]: isChecked,\n            [styles['visual-checkbox--invalid']]: error,\n          },\n          className\n        )}\n        htmlFor={inputId}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Checkbox}\n      >\n        <input\n          {...rest}\n          id={inputId}\n          ref={ref}\n          className={styles['visual-checkbox__input']}\n          type=\"checkbox\"\n          checked={isChecked}\n          aria-invalid={error}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n          onChange={handleChange}\n        />\n        <span className={styles['visual-checkbox__pill']}>\n          {isChecked && (\n            <span className={styles['visual-checkbox__icon']} aria-hidden=\"true\">\n              <svg width=\"16\" height=\"12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"m14.754.165 1.08 1.074.166.164-.16.17L6.13 12 .159 5.59 0 5.42l.166-.164 1.08-1.075.165-.164.16.17 4.558 4.896 8.3-8.913.16-.17.165.165Z\" />\n              </svg>\n            </span>\n          )}\n          <span className={styles['visual-checkbox__label']}>{children}</span>\n        </span>\n      </label>\n    </ErrorWrapper>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;AAiCA,IAAM,YAAoC,UAAS;CACjD,MAAM,EACJ,WACA,SACA,gBACA,UACA,SAAS,aACT,WACA,QAAQ,CAAC,CAAC,WACV,aAAa,iBACb,uBACA,QACA,UACA,KACA,GAAG,SACD;CAEJ,MAAM,UAAU,kBAAkB,WAAW;CAC7C,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,CAAC,WAAW,gBAAgB,SAAkB,CAAC,EAAE,WAAW,eAAe;CACjF,MAAM,CAAC,aAAa,kBAAkB,SAA8B,OAAO;CAC3E,IAAI,gBAAgB,SAAS;EAC3B,eAAe,OAAO;EACtB,IAAI,YAAY,KAAA,KAAa,YAAY,WACvC,aAAa,OAAO;CAExB;CAEA,MAAM,gBAAgB,MAAiD;EACrE,aAAa,EAAE,OAAO,OAAO;EAC7B,WAAW,CAAC;CACd;CAEA,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;EACjF,UAAA,qBAAC,SAAD;GACE,WAAW,WACT,OAAO,oBACP;KACG,OAAO,8BAA8B;KACrC,OAAO,8BAA8B;GACxC,GACA,SACF;GACA,SAAS;GACT,eAAa;GACb,oBAAkB,YAAY;GAXhC,UAAA,CAaE,oBAAC,SAAD;IACE,GAAI;IACJ,IAAI;IACC;IACL,WAAW,OAAO;IAClB,MAAK;IACL,SAAS;IACT,gBAAc;IACd,oBAAkB,mBAAmB,OAAO,WAAW;IACvD,UAAU;GACX,CAAA,GACD,qBAAC,QAAD;IAAM,WAAW,OAAO;IAAxB,UAAA,CACG,aACC,oBAAC,QAAD;KAAM,WAAW,OAAO;KAA0B,eAAY;KAC5D,UAAA,oBAAC,OAAD;MAAK,OAAM;MAAK,QAAO;MAAK,MAAK;MAAO,OAAM;MAC5C,UAAA,oBAAC,QAAD,EAAM,GAAE,2IAA4I,CAAA;KACjJ,CAAA;IACD,CAAA,GAER,oBAAC,QAAD;KAAM,WAAW,OAAO;KAA4B;IAAe,CAAA,CAC/D;GACD,CAAA,CAAA;;CACK,CAAA;AAElB"}

package/lib/CheckboxMarker.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxMarker.js","names":[],"sources":["../src/components/Checkbox/CheckboxMarker/CheckboxMarker.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { FormOnColor, FormSize } from '../../../constants';\nimport { getColor } from '../../../theme/currys/color';\n\nimport styles from './styles.module.scss';\n\nexport interface CheckboxMarkerProps {\n  /** Whether the checkbox is checked. Controls the checkmark visibility. */\n  checked?: boolean;\n  /** Disables the visual state of the marker. */\n  disabled?: boolean;\n  /** Activates error styling. */\n  error?: boolean;\n  /** Background context the marker is rendered on. */\n  onColor?: keyof typeof FormOnColor;\n  /** Size variant of the marker. */\n  size?: keyof typeof FormSize;\n  /** Adds custom classes to the marker wrapper. */\n  className?: string;\n}\n\n/**\n * Does not render an <input>; consumers render this on their end.\n */\nexport const CheckboxMarker: React.FC<CheckboxMarkerProps> = props => {\n  const { checked = false, disabled = false, error = false, onColor = FormOnColor.onwhite, size, className } = props;\n\n  const onWhite = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const large = size === FormSize.large;\n\n  const markerClasses = classNames(\n    styles['checkbox__marker'],\n    {\n      [styles['checkbox__marker--on-white']]: onWhite,\n      [styles['checkbox__marker--on-grey']]: onGrey,\n      [styles['checkbox__marker--on-invalid']]: onInvalid,\n      [styles['checkbox__marker--disabled']]: disabled,\n      [styles['checkbox__marker__regular--checked']]: !large && checked,\n      [styles['checkbox__marker__regular--invalid']]: !large && checked && onInvalid,\n      [styles['checkbox__marker__regular--on-dark']]: !large && checked && onDark,\n      [styles['checkbox__marker__large--checked']]: large && checked,\n      [styles['checkbox__marker__large--invalid']]: large && onInvalid,\n      [styles['checkbox__marker--on-dark']]: onDark,\n      [styles['checkbox__marker--on-blueberry']]: onBlueberry,\n      [styles['checkbox__marker--invalid']]: onInvalid,\n      [styles['checkbox__marker__large--invalid']]: large && checked && onInvalid,\n      [styles['checkbox__marker__large--disabled']]: disabled && large && checked,\n      [styles['checkbox__marker__large--checked--invalid']]: large && checked && onInvalid,\n      [styles['checkbox__marker__large--checked--disabled']]: disabled && large && checked,\n    },\n    className\n  );\n\n  const getIconColor = (): string => {\n    if (disabled) {\n      return getColor('neutral', 700);\n    }\n    if (large && checked && onInvalid) {\n      return getColor('white');\n    }\n    if (onDark || (large && checked)) {\n      return getColor('blueberry', 900);\n    }\n    return getColor('white');\n  };\n  const iconColor = getIconColor();\n\n  return (\n    <span className={markerClasses}>\n      {checked && (\n        <span className={styles['checkbox__marker-icon']} aria-hidden=\"true\">\n          <svg\n            strokeWidth=\"2.75\"\n            width=\"18\"\n            height=\"16\"\n            viewBox=\"0 0 16 12\"\n            fill=\"none\"\n            stroke={iconColor}\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M1 6 L6 11 L15 1\" />\n          </svg>\n        </span>\n      )}\n    </span>\n  );\n};\n\nexport default CheckboxMarker;\n"],"mappings":";;;;;;;;;AAyBA,IAAa,kBAAgD,UAAS;CACpE,MAAM,EAAE,UAAU,OAAO,WAAW,OAAO,QAAQ,OAAO,UAAU,YAAY,SAAS,MAAM,cAAc;CAE7G,MAAM,UAAU,YAAY,YAAY;CACxC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,YAAY,SAAS,YAAY,YAAY;CACnD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,QAAQ,SAAS,SAAS;CAEhC,MAAM,gBAAgB,WACpB,OAAO,qBACP;GACG,OAAO,gCAAgC;GACvC,OAAO,+BAA+B;GACtC,OAAO,kCAAkC;GACzC,OAAO,gCAAgC;GACvC,OAAO,wCAAwC,CAAC,SAAS;GACzD,OAAO,wCAAwC,CAAC,SAAS,WAAW;GACpE,OAAO,wCAAwC,CAAC,SAAS,WAAW;GACpE,OAAO,sCAAsC,SAAS;GACtD,OAAO,sCAAsC,SAAS;GACtD,OAAO,+BAA+B;GACtC,OAAO,oCAAoC;GAC3C,OAAO,+BAA+B;GACtC,OAAO,sCAAsC,SAAS,WAAW;GACjE,OAAO,uCAAuC,YAAY,SAAS;GACnE,OAAO,+CAA+C,SAAS,WAAW;GAC1E,OAAO,gDAAgD,YAAY,SAAS;CAC/E,GACA,SACF;CAEA,MAAM,qBAA6B;EACjC,IAAI,UACF,OAAO,SAAS,WAAW,GAAG;EAEhC,IAAI,SAAS,WAAW,WACtB,OAAO,SAAS,OAAO;EAEzB,IAAI,UAAW,SAAS,SACtB,OAAO,SAAS,aAAa,GAAG;EAElC,OAAO,SAAS,OAAO;CACzB;CACA,MAAM,YAAY,aAAa;CAE/B,OACE,oBAAC,QAAD;EAAM,WAAW;YACd,WACC,oBAAC,QAAD;GAAM,WAAW,OAAO;GAA0B,eAAY;aAC5D,oBAAC,OAAD;IACE,aAAY;IACZ,OAAM;IACN,QAAO;IACP,SAAQ;IACR,MAAK;IACL,QAAQ;IACR,OAAM;cAEN,oBAAC,QAAD,EAAM,GAAE,mBAAoB,CAAA;GACzB,CAAA;EACD,CAAA;CAEJ,CAAA;AAEV"}
+{"version":3,"file":"CheckboxMarker.js","names":[],"sources":["../src/components/Checkbox/CheckboxMarker/CheckboxMarker.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { FormOnColor, FormSize } from '../../../constants';\nimport { getColor } from '../../../theme/currys/color';\n\nimport styles from './styles.module.scss';\n\nexport interface CheckboxMarkerProps {\n  /** Whether the checkbox is checked. Controls the checkmark visibility. */\n  checked?: boolean;\n  /** Disables the visual state of the marker. */\n  disabled?: boolean;\n  /** Activates error styling. */\n  error?: boolean;\n  /** Background context the marker is rendered on. */\n  onColor?: keyof typeof FormOnColor;\n  /** Size variant of the marker. */\n  size?: keyof typeof FormSize;\n  /** Adds custom classes to the marker wrapper. */\n  className?: string;\n}\n\n/**\n * Does not render an <input>; consumers render this on their end.\n */\nexport const CheckboxMarker: React.FC<CheckboxMarkerProps> = props => {\n  const { checked = false, disabled = false, error = false, onColor = FormOnColor.onwhite, size, className } = props;\n\n  const onWhite = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const large = size === FormSize.large;\n\n  const markerClasses = classNames(\n    styles['checkbox__marker'],\n    {\n      [styles['checkbox__marker--on-white']]: onWhite,\n      [styles['checkbox__marker--on-grey']]: onGrey,\n      [styles['checkbox__marker--on-invalid']]: onInvalid,\n      [styles['checkbox__marker--disabled']]: disabled,\n      [styles['checkbox__marker__regular--checked']]: !large && checked,\n      [styles['checkbox__marker__regular--invalid']]: !large && checked && onInvalid,\n      [styles['checkbox__marker__regular--on-dark']]: !large && checked && onDark,\n      [styles['checkbox__marker__large--checked']]: large && checked,\n      [styles['checkbox__marker__large--invalid']]: large && onInvalid,\n      [styles['checkbox__marker--on-dark']]: onDark,\n      [styles['checkbox__marker--on-blueberry']]: onBlueberry,\n      [styles['checkbox__marker--invalid']]: onInvalid,\n      [styles['checkbox__marker__large--invalid']]: large && checked && onInvalid,\n      [styles['checkbox__marker__large--disabled']]: disabled && large && checked,\n      [styles['checkbox__marker__large--checked--invalid']]: large && checked && onInvalid,\n      [styles['checkbox__marker__large--checked--disabled']]: disabled && large && checked,\n    },\n    className\n  );\n\n  const getIconColor = (): string => {\n    if (disabled) {\n      return getColor('neutral', 700);\n    }\n    if (large && checked && onInvalid) {\n      return getColor('white');\n    }\n    if (onDark || (large && checked)) {\n      return getColor('blueberry', 900);\n    }\n    return getColor('white');\n  };\n  const iconColor = getIconColor();\n\n  return (\n    <span className={markerClasses}>\n      {checked && (\n        <span className={styles['checkbox__marker-icon']} aria-hidden=\"true\">\n          <svg\n            strokeWidth=\"2.75\"\n            width=\"18\"\n            height=\"16\"\n            viewBox=\"0 0 16 12\"\n            fill=\"none\"\n            stroke={iconColor}\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M1 6 L6 11 L15 1\" />\n          </svg>\n        </span>\n      )}\n    </span>\n  );\n};\n\nexport default CheckboxMarker;\n"],"mappings":";;;;;;;;;AAyBA,IAAa,kBAAgD,UAAS;CACpE,MAAM,EAAE,UAAU,OAAO,WAAW,OAAO,QAAQ,OAAO,UAAU,YAAY,SAAS,MAAM,cAAc;CAE7G,MAAM,UAAU,YAAY,YAAY;CACxC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,YAAY,SAAS,YAAY,YAAY;CACnD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,QAAQ,SAAS,SAAS;CAEhC,MAAM,gBAAgB,WACpB,OAAO,qBACP;GACG,OAAO,gCAAgC;GACvC,OAAO,+BAA+B;GACtC,OAAO,kCAAkC;GACzC,OAAO,gCAAgC;GACvC,OAAO,wCAAwC,CAAC,SAAS;GACzD,OAAO,wCAAwC,CAAC,SAAS,WAAW;GACpE,OAAO,wCAAwC,CAAC,SAAS,WAAW;GACpE,OAAO,sCAAsC,SAAS;GACtD,OAAO,sCAAsC,SAAS;GACtD,OAAO,+BAA+B;GACtC,OAAO,oCAAoC;GAC3C,OAAO,+BAA+B;GACtC,OAAO,sCAAsC,SAAS,WAAW;GACjE,OAAO,uCAAuC,YAAY,SAAS;GACnE,OAAO,+CAA+C,SAAS,WAAW;GAC1E,OAAO,gDAAgD,YAAY,SAAS;CAC/E,GACA,SACF;CAEA,MAAM,qBAA6B;EACjC,IAAI,UACF,OAAO,SAAS,WAAW,GAAG;EAEhC,IAAI,SAAS,WAAW,WACtB,OAAO,SAAS,OAAO;EAEzB,IAAI,UAAW,SAAS,SACtB,OAAO,SAAS,aAAa,GAAG;EAElC,OAAO,SAAS,OAAO;CACzB;CACA,MAAM,YAAY,aAAa;CAE/B,OACE,oBAAC,QAAD;EAAM,WAAW;EACd,UAAA,WACC,oBAAC,QAAD;GAAM,WAAW,OAAO;GAA0B,eAAY;GAC5D,UAAA,oBAAC,OAAD;IACE,aAAY;IACZ,OAAM;IACN,QAAO;IACP,SAAQ;IACR,MAAK;IACL,QAAQ;IACR,OAAM;IAEN,UAAA,oBAAC,QAAD,EAAM,GAAE,mBAAoB,CAAA;GACzB,CAAA;EACD,CAAA;CAEJ,CAAA;AAEV"}

package/lib/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","names":[],"sources":["../src/resources/HN.Designsystem.Chip.en-GB.json","../src/resources/HN.Designsystem.Chip.nb-NO.json","../src/components/Chip/resourceHelper.ts","../src/components/Chip/Chip.tsx","../src/components/Chip/index.ts"],"sourcesContent":["{\n  \"removeAriaLabel\": \"Remove\"\n}\n","{\n  \"removeAriaLabel\": \"Fjern\"\n}\n","import type { HNDesignsystemChip } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Chip.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Chip.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemChip => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemChip } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport Icon, { IconSize } from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface ChipProps {\n  /** Sets the text of the chip */\n  children: string;\n  /** Wether or not to have a close button */\n  withCloseButton?: boolean;\n  /** onClick handler for text-part of the chip */\n  onChipClick?: () => void;\n  /** Button props for main chip button */\n  chipButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** onClick handler for close button */\n  onCloseClick?: () => void;\n  /** Button props for the close button */\n  closeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemChip>;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n  const { children, onChipClick, onCloseClick, chipButtonProps, closeButtonProps, testId, withCloseButton = true, resources } = props;\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources: HNDesignsystemChip = {\n    ...defaultResources,\n    ...resources,\n    removeAriaLabel: closeButtonProps?.['aria-label'] || resources?.removeAriaLabel || `${defaultResources.removeAriaLabel} ${children}`,\n  };\n\n  return (\n    <div className={styles['chip']}>\n      <button\n        {...chipButtonProps}\n        className={classNames(styles['chip__chip'])}\n        onClick={onChipClick}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Tag}\n      >\n        <span\n          className={classNames(styles['chip__chip__inner'], {\n            [styles['chip__chip__inner--without-close']]: !withCloseButton,\n          })}\n        >\n          {children}\n        </span>\n      </button>\n      {withCloseButton && (\n        <button\n          {...closeButtonProps}\n          aria-label={mergedResources.removeAriaLabel}\n          className={classNames(styles['chip__close'])}\n          onClick={onCloseClick}\n          type=\"button\"\n          data-testid={`${testId}-close`}\n          data-analyticsid={AnalyticsId.Tag}\n        >\n          <span className={styles['chip__close__inner']}>\n            <Icon svgIcon={X} size={IconSize.XXSmall} />\n          </span>\n        </button>\n      )}\n    </div>\n  );\n};\n\nexport default Chip;\n","import Chip from './Chip';\nexport * from './Chip';\nexport default Chip;\n"],"mappings":";;;;;;;;;;;AEMA,IAAa,gBAAgB,aAAkD;CAC7E,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;CACX;AACF;;;ACiBA,IAAM,QAA4B,UAAS;CACzC,MAAM,EAAE,UAAU,aAAa,cAAc,iBAAiB,kBAAkB,QAAQ,kBAAkB,MAAM,cAAc;CAC9H,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAC3E,MAAM,mBAAmB,aAAa,QAAQ;CAC9C,MAAM,kBAAsC;EAC1C,GAAG;EACH,GAAG;EACH,iBAAiB,mBAAmB,iBAAiB,WAAW,mBAAmB,GAAG,iBAAiB,gBAAgB,GAAG;CAC5H;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,OAAO;YAAvB,CACE,oBAAC,UAAD;GACE,GAAI;GACJ,WAAW,WAAW,OAAO,aAAa;GAC1C,SAAS;GACT,MAAK;GACL,eAAa;GACb,oBAAkB,YAAY;aAE9B,oBAAC,QAAD;IACE,WAAW,WAAW,OAAO,sBAAsB,GAChD,OAAO,sCAAsC,CAAC,gBACjD,CAAC;IAEA;GACG,CAAA;EACA,CAAA,GACP,mBACC,oBAAC,UAAD;GACE,GAAI;GACJ,cAAY,gBAAgB;GAC5B,WAAW,WAAW,OAAO,cAAc;GAC3C,SAAS;GACT,MAAK;GACL,eAAa,GAAG,OAAO;GACvB,oBAAkB,YAAY;aAE9B,oBAAC,QAAD;IAAM,WAAW,OAAO;cACtB,oBAAC,cAAD;KAAM,SAAS;KAAG,MAAM,SAAS;IAAU,CAAA;GACvC,CAAA;EACA,CAAA,CAEP;;AAET;;;AC1EA,IAAA,eAAe"}
+{"version":3,"file":"Chip.js","names":[],"sources":["../src/resources/HN.Designsystem.Chip.en-GB.json","../src/resources/HN.Designsystem.Chip.nb-NO.json","../src/components/Chip/resourceHelper.ts","../src/components/Chip/Chip.tsx","../src/components/Chip/index.ts"],"sourcesContent":["{\n  \"removeAriaLabel\": \"Remove\"\n}\n","{\n  \"removeAriaLabel\": \"Fjern\"\n}\n","import type { HNDesignsystemChip } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Chip.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Chip.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemChip => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemChip } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport Icon, { IconSize } from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface ChipProps {\n  /** Sets the text of the chip */\n  children: string;\n  /** Wether or not to have a close button */\n  withCloseButton?: boolean;\n  /** onClick handler for text-part of the chip */\n  onChipClick?: () => void;\n  /** Button props for main chip button */\n  chipButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** onClick handler for close button */\n  onCloseClick?: () => void;\n  /** Button props for the close button */\n  closeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemChip>;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n  const { children, onChipClick, onCloseClick, chipButtonProps, closeButtonProps, testId, withCloseButton = true, resources } = props;\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources: HNDesignsystemChip = {\n    ...defaultResources,\n    ...resources,\n    removeAriaLabel: closeButtonProps?.['aria-label'] || resources?.removeAriaLabel || `${defaultResources.removeAriaLabel} ${children}`,\n  };\n\n  return (\n    <div className={styles['chip']}>\n      <button\n        {...chipButtonProps}\n        className={classNames(styles['chip__chip'])}\n        onClick={onChipClick}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Tag}\n      >\n        <span\n          className={classNames(styles['chip__chip__inner'], {\n            [styles['chip__chip__inner--without-close']]: !withCloseButton,\n          })}\n        >\n          {children}\n        </span>\n      </button>\n      {withCloseButton && (\n        <button\n          {...closeButtonProps}\n          aria-label={mergedResources.removeAriaLabel}\n          className={classNames(styles['chip__close'])}\n          onClick={onCloseClick}\n          type=\"button\"\n          data-testid={`${testId}-close`}\n          data-analyticsid={AnalyticsId.Tag}\n        >\n          <span className={styles['chip__close__inner']}>\n            <Icon svgIcon={X} size={IconSize.XXSmall} />\n          </span>\n        </button>\n      )}\n    </div>\n  );\n};\n\nexport default Chip;\n","import Chip from './Chip';\nexport * from './Chip';\nexport default Chip;\n"],"mappings":";;;;;;;;;;;AEMA,IAAa,gBAAgB,aAAkD;CAC7E,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;CACX;AACF;;;ACiBA,IAAM,QAA4B,UAAS;CACzC,MAAM,EAAE,UAAU,aAAa,cAAc,iBAAiB,kBAAkB,QAAQ,kBAAkB,MAAM,cAAc;CAC9H,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAC3E,MAAM,mBAAmB,aAAa,QAAQ;CAC9C,MAAM,kBAAsC;EAC1C,GAAG;EACH,GAAG;EACH,iBAAiB,mBAAmB,iBAAiB,WAAW,mBAAmB,GAAG,iBAAiB,gBAAgB,GAAG;CAC5H;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACE,oBAAC,UAAD;GACE,GAAI;GACJ,WAAW,WAAW,OAAO,aAAa;GAC1C,SAAS;GACT,MAAK;GACL,eAAa;GACb,oBAAkB,YAAY;GAE9B,UAAA,oBAAC,QAAD;IACE,WAAW,WAAW,OAAO,sBAAsB,GAChD,OAAO,sCAAsC,CAAC,gBACjD,CAAC;IAEA;GACG,CAAA;EACA,CAAA,GACP,mBACC,oBAAC,UAAD;GACE,GAAI;GACJ,cAAY,gBAAgB;GAC5B,WAAW,WAAW,OAAO,cAAc;GAC3C,SAAS;GACT,MAAK;GACL,eAAa,GAAG,OAAO;GACvB,oBAAkB,YAAY;GAE9B,UAAA,oBAAC,QAAD;IAAM,WAAW,OAAO;IACtB,UAAA,oBAAC,cAAD;KAAM,SAAS;KAAG,MAAM,SAAS;IAAU,CAAA;GACvC,CAAA;EACA,CAAA,CAEP;;AAET;;;AC1EA,IAAA,eAAe"}

package/lib/Close.js.map

@@ -1 +1 @@
-{"version":3,"file":"Close.js","names":[],"sources":["../src/components/Close/Close.tsx","../src/components/Close/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Keeps the icon small for all screen sizes */\n  small?: boolean;\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Gives color to the svg */\n  color?: 'blueberry' | 'black' | 'plum';\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst Close: React.FC<CloseProps> = props => {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = 'blueberry', ref } = props;\n  const { refObject, isHovered } = usePseudoClasses();\n\n  const iconSize = useIsMobileBreakpoint() || small ? 38 : 48;\n\n  let iconColor;\n  if (color === 'black') {\n    iconColor = 'black';\n  } else if (color === 'plum') {\n    iconColor = 'var(--core-color-plum-700)';\n  } else {\n    iconColor = 'var(--color-action-graphics-onlight)';\n  }\n\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n  return (\n    <button\n      ref={mergeRefs([ref, refObject])}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <span\n        className={classNames(styles['close__inner-container'], {\n          [styles['close__inner-container--small']]: small,\n          [styles['close__inner-container--plum']]: color == 'plum',\n        })}\n      >\n        <Icon svgIcon={X} color={iconColor} size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n};\n\nexport default Close;\n","import Close from './Close';\nexport * from './Close';\nexport default Close;\n"],"mappings":";;;;;;;;;;AA4BA,IAAM,SAA8B,UAAS;CAC3C,MAAM,EAAE,OAAO,QAAQ,YAAY,QAAQ,SAAS,WAAW,QAAQ,aAAa,QAAQ;CAC5F,MAAM,EAAE,WAAW,cAAc,iBAAiB;CAElD,MAAM,WAAW,sBAAsB,KAAK,QAAQ,KAAK;CAEzD,IAAI;CACJ,IAAI,UAAU,SACZ,YAAY;MACP,IAAI,UAAU,QACnB,YAAY;MAEZ,YAAY;CAGd,MAAM,eAAe,WAAW,OAAO,OAAO,GAAG,OAAO,kBAAkB,MAAM,GAAG,SAAS;CAE5F,OACE,oBAAC,UAAD;EACE,KAAK,UAAU,CAAC,KAAK,SAAS,CAAC;EAC/B,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,cAAY;EACH;EACT,MAAK;YAEL,oBAAC,QAAD;GACE,WAAW,WAAW,OAAO,2BAA2B;KACrD,OAAO,mCAAmC;KAC1C,OAAO,kCAAkC,SAAS;GACrD,CAAC;aAED,oBAAC,cAAD;IAAM,SAAS;IAAG,OAAO;IAAW,MAAM;IAAqB;GAAY,CAAA;EACvE,CAAA;CACA,CAAA;AAEZ;;;AC/DA,IAAA,gBAAe"}
+{"version":3,"file":"Close.js","names":[],"sources":["../src/components/Close/Close.tsx","../src/components/Close/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Keeps the icon small for all screen sizes */\n  small?: boolean;\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Gives color to the svg */\n  color?: 'blueberry' | 'black' | 'plum';\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst Close: React.FC<CloseProps> = props => {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = 'blueberry', ref } = props;\n  const { refObject, isHovered } = usePseudoClasses();\n\n  const iconSize = useIsMobileBreakpoint() || small ? 38 : 48;\n\n  let iconColor;\n  if (color === 'black') {\n    iconColor = 'black';\n  } else if (color === 'plum') {\n    iconColor = 'var(--core-color-plum-700)';\n  } else {\n    iconColor = 'var(--color-action-graphics-onlight)';\n  }\n\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n  return (\n    <button\n      ref={mergeRefs([ref, refObject])}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <span\n        className={classNames(styles['close__inner-container'], {\n          [styles['close__inner-container--small']]: small,\n          [styles['close__inner-container--plum']]: color == 'plum',\n        })}\n      >\n        <Icon svgIcon={X} color={iconColor} size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n};\n\nexport default Close;\n","import Close from './Close';\nexport * from './Close';\nexport default Close;\n"],"mappings":";;;;;;;;;;AA4BA,IAAM,SAA8B,UAAS;CAC3C,MAAM,EAAE,OAAO,QAAQ,YAAY,QAAQ,SAAS,WAAW,QAAQ,aAAa,QAAQ;CAC5F,MAAM,EAAE,WAAW,cAAc,iBAAiB;CAElD,MAAM,WAAW,sBAAsB,KAAK,QAAQ,KAAK;CAEzD,IAAI;CACJ,IAAI,UAAU,SACZ,YAAY;MACP,IAAI,UAAU,QACnB,YAAY;MAEZ,YAAY;CAGd,MAAM,eAAe,WAAW,OAAO,OAAO,GAAG,OAAO,kBAAkB,MAAM,GAAG,SAAS;CAE5F,OACE,oBAAC,UAAD;EACE,KAAK,UAAU,CAAC,KAAK,SAAS,CAAC;EAC/B,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,cAAY;EACH;EACT,MAAK;EAEL,UAAA,oBAAC,QAAD;GACE,WAAW,WAAW,OAAO,2BAA2B;KACrD,OAAO,mCAAmC;KAC1C,OAAO,kCAAkC,SAAS;GACrD,CAAC;GAED,UAAA,oBAAC,cAAD;IAAM,SAAS;IAAG,OAAO;IAAW,MAAM;IAAqB;GAAY,CAAA;EACvE,CAAA;CACA,CAAA;AAEZ;;;AC/DA,IAAA,gBAAe"}

package/lib/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":[],"sources":["../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/resources/HN.Designsystem.Drawer.nn-NO.json","../src/resources/HN.Designsystem.Drawer.se-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/DrawerBackButton.tsx","../src/components/Drawer/DrawerHeaderContent.tsx","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["{\n  \"ariaLabelCloseBtn\": \"Close\",\n  \"ariaLabelBackButton\": \"Go back\"\n}\n","{\n  \"ariaLabelBackButton\": \"Gå tilbake\",\n  \"ariaLabelCloseBtn\": \"Lukk\"\n}\n","{\n  \"ariaLabelCloseBtn\": \"Lukk\",\n  \"ariaLabelBackButton\": \"Gå tilbake\"\n}\n","{\n  \"ariaLabelCloseBtn\": \"Gidde\",\n  \"ariaLabelBackButton\": \"Mana ruovttoluotta\"\n}\n","import type { HNDesignsystemDrawer } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Drawer.nn-NO.json';\nimport seNO from '../../resources/HN.Designsystem.Drawer.se-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.SAMI_NORTHERN:\n      return seNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon from '../Icon';\nimport ChevronLeft from '../Icons/ChevronLeft';\n\nimport styles from './DrawerBackButton.module.scss';\n\nexport interface DrawerBackButtonProps {\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n}\n\nconst DrawerBackButton: React.FC<DrawerBackButtonProps> = props => {\n  const { ariaLabel = 'Tilbake', onClick, className } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  const iconSize = useIsMobileBreakpoint() ? 38 : 48;\n\n  return (\n    <button ref={refObject} className={classNames(styles['back-button'], className)} aria-label={ariaLabel} onClick={onClick} type=\"button\">\n      <span className={classNames(styles['back-button__inner-container'])}>\n        <Icon svgIcon={ChevronLeft} color={'var(--color-action-graphics-onlight'} size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n};\n\nexport default DrawerBackButton;\n","import type React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TitleTags } from '../Title';\n\nimport DrawerBackButton from './DrawerBackButton';\nimport Title from '../Title';\n\nimport styles from './DrawerHeaderContent.module.scss';\n\nexport interface DrawerHeaderContentProps {\n  /** Title shown in the header */\n  title?: React.ReactNode;\n  /** id of the title element */\n  titleId?: string;\n  /** Ref passed to the title heading element */\n  titleRef?: React.Ref<HTMLHeadingElement | null>;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Shows a back button before the title. When present the title is centered. */\n  withBackButton?: boolean;\n  /** Callback for the back button */\n  onRequestBack?: () => void;\n  /** Sets the aria-label of the back button */\n  backButtonAriaLabel?: string;\n  /** Adds custom classes to the root element. */\n  className?: string;\n}\n\nconst DrawerHeaderContent: React.FC<DrawerHeaderContentProps> = props => {\n  const { title, titleId, titleRef, titleHtmlMarkup = 'h3', withBackButton, onRequestBack, backButtonAriaLabel, className } = props;\n\n  return (\n    <div className={classNames(styles['header-content'], className)}>\n      <span\n        className={classNames(styles['header-content__title'], {\n          [styles['header-content__title--centered']]: withBackButton,\n        })}\n      >\n        <Title id={titleId} ref={titleRef} tabIndex={-1} htmlMarkup={titleHtmlMarkup} appearance=\"title3\">\n          {title}\n        </Title>\n      </span>\n      {withBackButton && (\n        <DrawerBackButton ariaLabel={backButtonAriaLabel} onClick={onRequestBack} className={styles['header-content__back-button']} />\n      )}\n    </div>\n  );\n};\n\nexport default DrawerHeaderContent;\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport type { HNDesignsystemDrawer } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport DrawerHeaderContent from './DrawerHeaderContent';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\ntype PaddingSizes = 'normal' | 'extra';\n\nexport interface DrawerProps extends InnerDrawerProps {\n  /** Opens and closes the drawer */\n  isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n  /** Sets the aria-label of the drawer */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the drawer */\n  ariaLabelledBy?: string;\n  /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */\n  closeColor?: 'blueberry' | 'plum';\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\n  /** Sets the style of the Drawer header */\n  headerClasses?: string;\n  /** Optional content that replaces the default title (and back button) in the header. The close button is still rendered. */\n  headerContent?: React.ReactNode;\n  /** Title to display in the header of the drawer */\n  title?: string;\n  /** id of the drawer title */\n  titleId?: string;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */\n  onRequestClose?: () => void;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Main content of the drawer */\n  children?: React.ReactNode;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Primary CTA callback */\n  onPrimaryAction?: () => void;\n  /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  primaryActionText?: string;\n  /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  secondaryActionText?: string;\n  /** Secondary CTA callback */\n  onSecondaryAction?: () => void;\n  /** Customize the z-index of the drawer */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDrawer>;\n  /** Sets mobile styling and animation from outer level Drawer */\n  isMobile?: boolean;\n  /** Shows a back button to the left of title */\n  withBackButton?: boolean;\n  /** Callback for the back button */\n  onRequestBack?: () => void;\n  /** Sets classname for content part in Drawer */\n  contentClassName?: string;\n  /** Sets the content padding of the Drawer */\n  paddingSize?: PaddingSizes;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    children,\n    closeColor = 'blueberry',\n    desktopDirection = 'left',\n    footerContent,\n    headerClasses,\n    headerContent,\n    noCloseButton = false,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.OverlayScreen,\n    resources,\n    isMobile,\n    withBackButton,\n    onRequestBack,\n    contentClassName,\n    paddingSize = 'normal',\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  // topContent and bottomContent are used to detect scroll position for shadow effects\n  const topContent = useRef<HTMLDivElement>(null);\n  const bottomContent = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n  const titleRef = useRef<HTMLHeadingElement>(null);\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const [headerHeight, setHeaderHeight] = React.useState(0);\n  const [footerHeight, setFooterHeight] = React.useState(0);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContentVisible = useIsVisible(bottomContent, 0);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDrawer = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  // eslint-disable-next-line react-hooks/refs\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n  const headerStyling = classNames(\n    styles.drawer__header,\n    { [styles['drawer__header--padding-extra']]: paddingSize === 'extra' },\n    headerClasses\n  );\n  const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) || onPrimaryAction || onSecondaryAction;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    if (onRequestClose) onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  // Close animasjon, vi kaller `onClose()` til slutt\n  const closeDrawer = (): void => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n    if (isMobile) {\n      animate(\n        containerRef.current,\n        { y: '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    } else {\n      animate(\n        containerRef.current,\n        { x: desktopDirection === 'left' ? '-100%' : '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    }\n  };\n\n  useEffect(() => {\n    containerRef.current?.focus();\n    disableBodyScroll();\n\n    return (): void => {\n      enableBodyScroll();\n    };\n  }, []);\n\n  // Measure header and footer heights\n  useEffect(() => {\n    const updateHeights = (): void => {\n      if (headerRef.current) {\n        setHeaderHeight(headerRef.current.offsetHeight);\n      }\n      if (footerRef.current) {\n        setFooterHeight(footerRef.current.offsetHeight);\n      }\n    };\n\n    updateHeights();\n\n    // Update heights when content changes\n    const resizeObserver = new ResizeObserver(updateHeights);\n    if (headerRef.current) {\n      resizeObserver.observe(headerRef.current);\n    }\n    if (footerRef.current) {\n      resizeObserver.observe(footerRef.current);\n    }\n\n    return (): void => {\n      resizeObserver.disconnect();\n    };\n  }, [hasFooterContent]);\n\n  // Open animation.\n  useEffect(() => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    if (!isPresent) {\n      closeDrawer();\n      return;\n    }\n\n    if (isMobile) {\n      animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    } else {\n      animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    }\n\n    animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n  }, [isPresent]);\n\n  const handleCTA = (callback?: () => void): void => {\n    if (callback) {\n      callback();\n    }\n  };\n\n  useEffect(() => {\n    titleRef.current?.focus();\n  }, [title]);\n\n  const headerMain = (\n    <DrawerHeaderContent\n      title={title}\n      titleId={ariaLabelAttributes?.['aria-labelledby']}\n      titleRef={titleRef}\n      titleHtmlMarkup={titleHtmlMarkup}\n      withBackButton={withBackButton && onRequestBack !== undefined}\n      onRequestBack={onRequestBack}\n      backButtonAriaLabel={mergedResources.ariaLabelBackButton}\n    />\n  );\n\n  return (\n    <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n      <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n      <div\n        className={classNames(styles.drawer__container, {\n          [styles['drawer__container--right']]: desktopDirection === 'right',\n        })}\n        ref={containerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabIndex={-1}\n        {...ariaLabelAttributes}\n      >\n        <div className={styles.drawer__container__inner}>\n          <div className={headerStyling} ref={headerRef}>\n            {headerContent ?? headerMain}\n            {!noCloseButton && onRequestClose != undefined && (\n              <Close\n                ariaLabel={mergedResources.ariaLabelCloseBtn}\n                color={closeColor}\n                onClick={onRequestClose}\n                className={styles['drawer__header__close-button']}\n              />\n            )}\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n            style={{\n              opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n              top: headerHeight,\n            }}\n          />\n          <div\n            className={classNames(styles.drawer__content, contentClassName)}\n            tabIndex={contentIsScrollable ? 0 : undefined}\n            role={contentIsScrollable ? 'region' : undefined}\n            {...(contentIsScrollable ? ariaLabelAttributes : {})}\n            ref={contentRef}\n          >\n            <div ref={topContent} />\n            <div\n              className={classNames(styles['drawer__content__children'], {\n                [styles['drawer__content__children--padding-extra']]: paddingSize === 'extra',\n              })}\n            >\n              {children}\n            </div>\n            <div ref={bottomContent} style={{ height: '1px' }} />\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n            style={{\n              opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n              bottom: hasFooterContent ? footerHeight : 0,\n            }}\n          />\n        </div>\n        {hasFooterContent && (\n          <div\n            className={classNames(styles.drawer__footer, { [styles['drawer__footer--padding-extra']]: paddingSize === 'extra' })}\n            ref={footerRef}\n          >\n            {footerContent ? (\n              footerContent\n            ) : (\n              <>\n                {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n                {onSecondaryAction && (\n                  <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                    {secondaryActionText}\n                  </Button>\n                )}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport * from './Drawer';\nexport default Drawer;\n"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","names":[],"sources":["../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/resources/HN.Designsystem.Drawer.nn-NO.json","../src/resources/HN.Designsystem.Drawer.se-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/DrawerBackButton.tsx","../src/components/Drawer/DrawerHeaderContent.tsx","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["{\n  \"ariaLabelCloseBtn\": \"Close\",\n  \"ariaLabelBackButton\": \"Go back\"\n}\n","{\n  \"ariaLabelBackButton\": \"Gå tilbake\",\n  \"ariaLabelCloseBtn\": \"Lukk\"\n}\n","{\n  \"ariaLabelCloseBtn\": \"Lukk\",\n  \"ariaLabelBackButton\": \"Gå tilbake\"\n}\n","{\n  \"ariaLabelCloseBtn\": \"Gidde\",\n  \"ariaLabelBackButton\": \"Mana ruovttoluotta\"\n}\n","import type { HNDesignsystemDrawer } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Drawer.nn-NO.json';\nimport seNO from '../../resources/HN.Designsystem.Drawer.se-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.SAMI_NORTHERN:\n      return seNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon from '../Icon';\nimport ChevronLeft from '../Icons/ChevronLeft';\n\nimport styles from './DrawerBackButton.module.scss';\n\nexport interface DrawerBackButtonProps {\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n}\n\nconst DrawerBackButton: React.FC<DrawerBackButtonProps> = props => {\n  const { ariaLabel = 'Tilbake', onClick, className } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  const iconSize = useIsMobileBreakpoint() ? 38 : 48;\n\n  return (\n    <button ref={refObject} className={classNames(styles['back-button'], className)} aria-label={ariaLabel} onClick={onClick} type=\"button\">\n      <span className={classNames(styles['back-button__inner-container'])}>\n        <Icon svgIcon={ChevronLeft} color={'var(--color-action-graphics-onlight'} size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n};\n\nexport default DrawerBackButton;\n","import type React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TitleTags } from '../Title';\n\nimport DrawerBackButton from './DrawerBackButton';\nimport Title from '../Title';\n\nimport styles from './DrawerHeaderContent.module.scss';\n\nexport interface DrawerHeaderContentProps {\n  /** Title shown in the header */\n  title?: React.ReactNode;\n  /** id of the title element */\n  titleId?: string;\n  /** Ref passed to the title heading element */\n  titleRef?: React.Ref<HTMLHeadingElement | null>;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Shows a back button before the title. When present the title is centered. */\n  withBackButton?: boolean;\n  /** Callback for the back button */\n  onRequestBack?: () => void;\n  /** Sets the aria-label of the back button */\n  backButtonAriaLabel?: string;\n  /** Adds custom classes to the root element. */\n  className?: string;\n}\n\nconst DrawerHeaderContent: React.FC<DrawerHeaderContentProps> = props => {\n  const { title, titleId, titleRef, titleHtmlMarkup = 'h3', withBackButton, onRequestBack, backButtonAriaLabel, className } = props;\n\n  return (\n    <div className={classNames(styles['header-content'], className)}>\n      <span\n        className={classNames(styles['header-content__title'], {\n          [styles['header-content__title--centered']]: withBackButton,\n        })}\n      >\n        <Title id={titleId} ref={titleRef} tabIndex={-1} htmlMarkup={titleHtmlMarkup} appearance=\"title3\">\n          {title}\n        </Title>\n      </span>\n      {withBackButton && (\n        <DrawerBackButton ariaLabel={backButtonAriaLabel} onClick={onRequestBack} className={styles['header-content__back-button']} />\n      )}\n    </div>\n  );\n};\n\nexport default DrawerHeaderContent;\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport type { HNDesignsystemDrawer } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport DrawerHeaderContent from './DrawerHeaderContent';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\ntype PaddingSizes = 'normal' | 'extra';\n\nexport interface DrawerProps extends InnerDrawerProps {\n  /** Opens and closes the drawer */\n  isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n  /** Sets the aria-label of the drawer */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the drawer */\n  ariaLabelledBy?: string;\n  /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */\n  closeColor?: 'blueberry' | 'plum';\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\n  /** Sets the style of the Drawer header */\n  headerClasses?: string;\n  /** Optional content that replaces the default title (and back button) in the header. The close button is still rendered. */\n  headerContent?: React.ReactNode;\n  /** Title to display in the header of the drawer */\n  title?: string;\n  /** id of the drawer title */\n  titleId?: string;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */\n  onRequestClose?: () => void;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Main content of the drawer */\n  children?: React.ReactNode;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Primary CTA callback */\n  onPrimaryAction?: () => void;\n  /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  primaryActionText?: string;\n  /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  secondaryActionText?: string;\n  /** Secondary CTA callback */\n  onSecondaryAction?: () => void;\n  /** Customize the z-index of the drawer */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDrawer>;\n  /** Sets mobile styling and animation from outer level Drawer */\n  isMobile?: boolean;\n  /** Shows a back button to the left of title */\n  withBackButton?: boolean;\n  /** Callback for the back button */\n  onRequestBack?: () => void;\n  /** Sets classname for content part in Drawer */\n  contentClassName?: string;\n  /** Sets the content padding of the Drawer */\n  paddingSize?: PaddingSizes;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    children,\n    closeColor = 'blueberry',\n    desktopDirection = 'left',\n    footerContent,\n    headerClasses,\n    headerContent,\n    noCloseButton = false,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.OverlayScreen,\n    resources,\n    isMobile,\n    withBackButton,\n    onRequestBack,\n    contentClassName,\n    paddingSize = 'normal',\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  // topContent and bottomContent are used to detect scroll position for shadow effects\n  const topContent = useRef<HTMLDivElement>(null);\n  const bottomContent = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n  const titleRef = useRef<HTMLHeadingElement>(null);\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const [headerHeight, setHeaderHeight] = React.useState(0);\n  const [footerHeight, setFooterHeight] = React.useState(0);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContentVisible = useIsVisible(bottomContent, 0);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDrawer = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  // eslint-disable-next-line react-hooks/refs\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n  const headerStyling = classNames(\n    styles.drawer__header,\n    { [styles['drawer__header--padding-extra']]: paddingSize === 'extra' },\n    headerClasses\n  );\n  const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) || onPrimaryAction || onSecondaryAction;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    if (onRequestClose) onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  // Close animasjon, vi kaller `onClose()` til slutt\n  const closeDrawer = (): void => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n    if (isMobile) {\n      animate(\n        containerRef.current,\n        { y: '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    } else {\n      animate(\n        containerRef.current,\n        { x: desktopDirection === 'left' ? '-100%' : '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    }\n  };\n\n  useEffect(() => {\n    containerRef.current?.focus();\n    disableBodyScroll();\n\n    return (): void => {\n      enableBodyScroll();\n    };\n  }, []);\n\n  // Measure header and footer heights\n  useEffect(() => {\n    const updateHeights = (): void => {\n      if (headerRef.current) {\n        setHeaderHeight(headerRef.current.offsetHeight);\n      }\n      if (footerRef.current) {\n        setFooterHeight(footerRef.current.offsetHeight);\n      }\n    };\n\n    updateHeights();\n\n    // Update heights when content changes\n    const resizeObserver = new ResizeObserver(updateHeights);\n    if (headerRef.current) {\n      resizeObserver.observe(headerRef.current);\n    }\n    if (footerRef.current) {\n      resizeObserver.observe(footerRef.current);\n    }\n\n    return (): void => {\n      resizeObserver.disconnect();\n    };\n  }, [hasFooterContent]);\n\n  // Open animation.\n  useEffect(() => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    if (!isPresent) {\n      closeDrawer();\n      return;\n    }\n\n    if (isMobile) {\n      animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    } else {\n      animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    }\n\n    animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n  }, [isPresent]);\n\n  const handleCTA = (callback?: () => void): void => {\n    if (callback) {\n      callback();\n    }\n  };\n\n  useEffect(() => {\n    titleRef.current?.focus();\n  }, [title]);\n\n  const headerMain = (\n    <DrawerHeaderContent\n      title={title}\n      titleId={ariaLabelAttributes?.['aria-labelledby']}\n      titleRef={titleRef}\n      titleHtmlMarkup={titleHtmlMarkup}\n      withBackButton={withBackButton && onRequestBack !== undefined}\n      onRequestBack={onRequestBack}\n      backButtonAriaLabel={mergedResources.ariaLabelBackButton}\n    />\n  );\n\n  return (\n    <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n      <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n      <div\n        className={classNames(styles.drawer__container, {\n          [styles['drawer__container--right']]: desktopDirection === 'right',\n        })}\n        ref={containerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabIndex={-1}\n        {...ariaLabelAttributes}\n      >\n        <div className={styles.drawer__container__inner}>\n          <div className={headerStyling} ref={headerRef}>\n            {headerContent ?? headerMain}\n            {!noCloseButton && onRequestClose != undefined && (\n              <Close\n                ariaLabel={mergedResources.ariaLabelCloseBtn}\n                color={closeColor}\n                onClick={onRequestClose}\n                className={styles['drawer__header__close-button']}\n              />\n            )}\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n            style={{\n              opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n              top: headerHeight,\n            }}\n          />\n          <div\n            className={classNames(styles.drawer__content, contentClassName)}\n            tabIndex={contentIsScrollable ? 0 : undefined}\n            role={contentIsScrollable ? 'region' : undefined}\n            {...(contentIsScrollable ? ariaLabelAttributes : {})}\n            ref={contentRef}\n          >\n            <div ref={topContent} />\n            <div\n              className={classNames(styles['drawer__content__children'], {\n                [styles['drawer__content__children--padding-extra']]: paddingSize === 'extra',\n              })}\n            >\n              {children}\n            </div>\n            <div ref={bottomContent} style={{ height: '1px' }} />\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n            style={{\n              opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n              bottom: hasFooterContent ? footerHeight : 0,\n            }}\n          />\n        </div>\n        {hasFooterContent && (\n          <div\n            className={classNames(styles.drawer__footer, { [styles['drawer__footer--padding-extra']]: paddingSize === 'extra' })}\n            ref={footerRef}\n          >\n            {footerContent ? (\n              footerContent\n            ) : (\n              <>\n                {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n                {onSecondaryAction && (\n                  <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                    {secondaryActionText}\n                  </Button>\n                )}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport * from './Drawer';\nexport default Drawer;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AIQA,IAAa,gBAAgB,aAAoD;CAC/E,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB,mBACnB,OAAO;EACT,KAAK,gBAAgB,eACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;CACX;AACF;;;ACFA,IAAM,oBAAoD,UAAS;CACjE,MAAM,EAAE,YAAY,WAAW,SAAS,cAAc;CACtD,MAAM,EAAE,WAAW,cAAc,iBAAoC;CAErE,MAAM,WAAW,sBAAsB,IAAI,KAAK;CAEhD,OACE,oBAAC,UAAD;EAAQ,KAAK;EAAW,WAAW,WAAW,OAAO,gBAAgB,SAAS;EAAG,cAAY;EAAoB;EAAS,MAAK;EAC7H,UAAA,oBAAC,QAAD;GAAM,WAAW,WAAW,OAAO,+BAA+B;GAChE,UAAA,oBAAC,cAAD;IAAM,SAAS;IAAa,OAAO;IAAuC,MAAM;IAAqB;GAAY,CAAA;EAC7G,CAAA;CACA,CAAA;AAEZ;;;ACDA,IAAM,uBAA0D,UAAS;CACvE,MAAM,EAAE,OAAO,SAAS,UAAU,kBAAkB,MAAM,gBAAgB,eAAe,qBAAqB,cAAc;CAE5H,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,SAAO,mBAAmB,SAAS;EAA9D,UAAA,CACE,oBAAC,QAAD;GACE,WAAW,WAAW,SAAO,0BAA0B,GACpD,SAAO,qCAAqC,eAC/C,CAAC;GAED,UAAA,oBAAC,eAAD;IAAO,IAAI;IAAS,KAAK;IAAU,UAAU;IAAI,YAAY;IAAiB,YAAW;IACtF,UAAA;GACI,CAAA;EACH,CAAA,GACL,kBACC,oBAAC,kBAAD;GAAkB,WAAW;GAAqB,SAAS;GAAe,WAAW,SAAO;EAAiC,CAAA,CAE5H;;AAET;;;ACoCA,IAAM,UAAgC,UAAS;CAC7C,MAAM,EAAE,QAAQ,GAAG,SAAS;CAC5B,MAAM,WAAW,sBAAsB;CAEvC,OAAO,oBAAC,iBAAD,EAAA,UAAkB,UAAU,oBAAC,aAAD;EAAa,GAAI;EAAgB;CAAW,CAAA,EAAmB,CAAA;AACpG;AAEA,IAAM,eAA0C,UAAS;CACvD,MAAM,EACJ,WACA,gBACA,UACA,aAAa,aACb,mBAAmB,QACnB,eACA,eACA,eACA,gBAAgB,OAChB,iBACA,gBACA,mBACA,mBACA,qBACA,OACA,kBAAkB,MAClB,UAAU,KAAK,GACf,SAAS,OAAO,eAChB,WACA,UACA,gBACA,eACA,kBACA,cAAc,aACZ;CAEJ,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAgB,YAAY;CAAQ,CAAC;CAChH,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,aAAa,OAAuB,IAAI;CAE9C,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,gBAAgB,OAAuB,IAAI;CACjD,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,WAAW,OAA2B,IAAI;CAChD,MAAM,CAAC,OAAO,WAAW,WAAW;CACpC,MAAM,CAAC,WAAW,gBAAgB,YAAY;CAC9C,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,CAAC;CACxD,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,CAAC;CACxD,MAAM,oBAAoB,aAAa,UAAU;CACjD,MAAM,uBAAuB,aAAa,eAAe,CAAC;CAC1D,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAwC;EAC5C,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAGA,MAAM,sBAAsB,WAAW,WAAW,WAAW,QAAQ,eAAe,WAAW,QAAQ;CACvG,MAAM,gBAAgB,WACpB,SAAO,gBACP,GAAG,SAAO,mCAAmC,gBAAgB,QAAQ,GACrE,aACF;CACA,MAAM,mBAAoB,OAAO,kBAAkB,eAAe,iBAAkB,mBAAmB;CAEvG,aAAa,cAAc,IAAI;CAC/B,wBAAwB,YAAY;CACpC,gBAAgB,oBAAoB;EAClC,IAAI,gBAAgB,eAAe;CACrC,CAAC;CACD,iBAAiB,oBAAoB,kBAAkB,eAAe,GAAG,CAAC,iBAAiB,MAAM,CAAC;CAGlG,MAAM,oBAA0B;EAC9B,IAAI,CAAC,WAAW,WAAW,CAAC,aAAa,SAAS;EAElD,QAAQ,WAAW,SAAS;GAAE,SAAS;GAAG,eAAe;EAAO,GAAG;GAAE,UAAU;GAAK,MAAM;EAAY,CAAC;EAEvG,IAAI,UACF,QACE,aAAa,SACb,EAAE,GAAG,OAAO,GACZ;GACE,UAAU;GACV,MAAM;GACN,kBAAkB;IAChB,IAAI,cAAc,aAAa;GACjC;EACF,CACF;OAEA,QACE,aAAa,SACb,EAAE,GAAG,qBAAqB,SAAS,UAAU,OAAO,GACpD;GACE,UAAU;GACV,MAAM;GACN,kBAAkB;IAChB,IAAI,cAAc,aAAa;GACjC;EACF,CACF;CAEJ;CAEA,gBAAgB;EACd,aAAa,SAAS,MAAM;EAC5B,kBAAkB;EAElB,aAAmB;GACjB,iBAAiB;EACnB;CACF,GAAG,CAAC,CAAC;CAGL,gBAAgB;EACd,MAAM,sBAA4B;GAChC,IAAI,UAAU,SACZ,gBAAgB,UAAU,QAAQ,YAAY;GAEhD,IAAI,UAAU,SACZ,gBAAgB,UAAU,QAAQ,YAAY;EAElD;EAEA,cAAc;EAGd,MAAM,iBAAiB,IAAI,eAAe,aAAa;EACvD,IAAI,UAAU,SACZ,eAAe,QAAQ,UAAU,OAAO;EAE1C,IAAI,UAAU,SACZ,eAAe,QAAQ,UAAU,OAAO;EAG1C,aAAmB;GACjB,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,gBAAgB,CAAC;CAGrB,gBAAgB;EACd,IAAI,CAAC,WAAW,WAAW,CAAC,aAAa,SAAS;EAElD,IAAI,CAAC,WAAW;GACd,YAAY;GACZ;EACF;EAEA,IAAI,UACF,QAAQ,aAAa,SAAS,EAAE,GAAG,IAAI,GAAG;GAAE,UAAU;GAAK,MAAM;EAAY,CAAC;OAE9E,QAAQ,aAAa,SAAS,EAAE,GAAG,IAAI,GAAG;GAAE,UAAU;GAAK,MAAM;EAAY,CAAC;EAGhF,QAAQ,WAAW,SAAS;GAAE,SAAS;GAAG,eAAe;EAAO,GAAG;GAAE,UAAU;GAAK,MAAM;EAAY,CAAC;CACzG,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,aAAa,aAAgC;EACjD,IAAI,UACF,SAAS;CAEb;CAEA,gBAAgB;EACd,SAAS,SAAS,MAAM;CAC1B,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,aACJ,oBAAC,qBAAD;EACS;EACP,SAAS,sBAAsB;EACrB;EACO;EACjB,gBAAgB,kBAAkB,kBAAkB,KAAA;EACrC;EACf,qBAAqB,gBAAgB;CACtC,CAAA;CAGH,OACE,qBAAC,OAAD;EAAK,WAAW,SAAO;EAAQ,KAAK;EAAO,OAAO,EAAE,OAAO;EAAG,oBAAkB,YAAY;EAA5F,UAAA,CACE,oBAAC,OAAD;GAAK,WAAW,SAAO;GAAiB,KAAK;GAAY,eAAY;EAAQ,CAAA,GAC7E,qBAAC,OAAD;GACE,WAAW,WAAW,SAAO,mBAAmB,GAC7C,SAAO,8BAA8B,qBAAqB,QAC7D,CAAC;GACD,KAAK;GACL,MAAK;GACL,cAAW;GACX,UAAU;GACV,GAAI;GARN,UAAA,CAUE,qBAAC,OAAD;IAAK,WAAW,SAAO;IAAvB,UAAA;KACE,qBAAC,OAAD;MAAK,WAAW;MAAe,KAAK;MAApC,UAAA,CACG,iBAAiB,YACjB,CAAC,iBAAiB,kBAAkB,KAAA,KACnC,oBAAC,eAAD;OACE,WAAW,gBAAgB;OAC3B,OAAO;OACP,SAAS;OACT,WAAW,SAAO;MACnB,CAAA,CAEA;;KACL,oBAAC,OAAD;MACE,WAAW,WAAW,SAAO,4BAA4B,SAAO,+BAA+B;MAC/F,OAAO;OACL,SAAS,CAAC,qBAAqB,sBAAsB,IAAI;OACzD,KAAK;MACP;KACD,CAAA;KACD,qBAAC,OAAD;MACE,WAAW,WAAW,SAAO,iBAAiB,gBAAgB;MAC9D,UAAU,sBAAsB,IAAI,KAAA;MACpC,MAAM,sBAAsB,WAAW,KAAA;MACvC,GAAK,sBAAsB,sBAAsB,CAAC;MAClD,KAAK;MALP,UAAA;OAOE,oBAAC,OAAD,EAAK,KAAK,WAAa,CAAA;OACvB,oBAAC,OAAD;QACE,WAAW,WAAW,SAAO,8BAA8B,GACxD,SAAO,8CAA8C,gBAAgB,QACxE,CAAC;QAEA;OACE,CAAA;OACL,oBAAC,OAAD;QAAK,KAAK;QAAe,OAAO,EAAE,QAAQ,MAAM;OAAI,CAAA;MACjD;;KACL,oBAAC,OAAD;MACE,WAAW,WAAW,SAAO,4BAA4B,SAAO,kCAAkC;MAClG,OAAO;OACL,SAAS,CAAC,wBAAwB,sBAAsB,IAAI;OAC5D,QAAQ,mBAAmB,eAAe;MAC5C;KACD,CAAA;IACE;GACJ,CAAA,GAAA,oBACC,oBAAC,OAAD;IACE,WAAW,WAAW,SAAO,gBAAgB,GAAG,SAAO,mCAAmC,gBAAgB,QAAQ,CAAC;IACnH,KAAK;IAEJ,UAAA,gBACC,gBAEA,qBAAA,UAAA,EAAA,UAAA,CACG,mBAAmB,oBAAC,gBAAD;KAAQ,eAAe,UAAU,eAAe;KAAI,UAAA;IAA0B,CAAA,GACjG,qBACC,oBAAC,gBAAD;KAAQ,SAAQ;KAAa,eAAe,UAAU,iBAAiB;KACpE,UAAA;IACK,CAAA,CAEV,EAAA,CAAA;GAED,CAAA,CAEJ;EACF,CAAA,CAAA;;AAET;;;AC1VA,IAAA,iBAAe"}

package/lib/DrawerNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerNavigation.js","names":[],"sources":["../src/components/Filter/DrawerNavigation/useDrawerNavigation.ts","../src/components/Filter/DrawerNavigation/DrawerNavigation.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface NavigateProps<ViewId extends string = string> {\n  goToView: (id: ViewId) => void;\n  goBack: () => void;\n  goToViewAndClearStack: (id: ViewId) => void;\n}\n\nexport const DrawerNavigationContext = createContext<NavigateProps | null>(null);\n\nexport function useDrawerNavigation<ViewId extends string = string>(): NavigateProps<ViewId> {\n  const context = useContext(DrawerNavigationContext);\n  if (!context) {\n    throw new Error('useDrawerNavigation must be used inside a <DrawerNavigation> component');\n  }\n  return context as NavigateProps<ViewId>;\n}\n","import type React from 'react';\nimport { Children, isValidElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport { animate, useReducedMotion } from 'motion/react';\n\nimport { type NavigateProps, DrawerNavigationContext } from './useDrawerNavigation';\nimport uuid from '../../../utils/uuid';\nimport Drawer from '../../Drawer';\nimport DrawerHeaderContent from '../../Drawer/DrawerHeaderContent';\n\nimport styles from './styles.module.scss';\n\nexport interface DrawerViewProps<ViewId extends string = string> {\n  /** Id for the view. Important for navigation */\n  id: ViewId;\n  /** Title used for Drawer in current view */\n  title: string;\n  /** Mark this view as the home/default view */\n  home?: boolean;\n  /** Content inside the drawer for this view */\n  children: React.ReactNode;\n  /** Default onClose callback for drawer. Will override onCloseButton on parent */\n  onCloseButton?: () => void;\n  /** Content sent to footer section of Drawer. Will override footer on parent */\n  footer?: React.ReactNode;\n  /** Classname set on the content inside Drawer */\n  drawerContentClassname?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction DrawerView<ViewId extends string>(_props: DrawerViewProps<ViewId>): React.ReactNode {\n  // DrawerView is never rendered directly — DrawerNavigation reads its props\n  return null;\n}\n\nexport interface DrawerNavigationProps {\n  /** Views and other children components inside the Drawer navigation. Views are put in stack */\n  children: React.ReactNode;\n  /** Is drawer open or closed */\n  isOpen: boolean;\n  /** Navigate to this view when the drawer opens. Defaults to home view. */\n  initialView?: string;\n  /** Default onClose callback for drawer. View onCloseButton callback will override this. */\n  onCloseButton?: () => void;\n  /** Content sent to footer section of Drawer. View footer will override this */\n  footer?: React.ReactNode;\n}\n\nfunction parseChildren(children: React.ReactNode): { views: DrawerViewProps[]; other: React.ReactNode[] } {\n  const views: DrawerViewProps[] = [];\n  const other: React.ReactNode[] = [];\n  Children.forEach(children, child => {\n    if (isValidElement<DrawerViewProps>(child) && child.type === DrawerView) {\n      views.push({\n        id: child.props.id,\n        title: child.props.title,\n        home: child.props.home,\n        children: child.props.children,\n        onCloseButton: child.props.onCloseButton,\n        footer: child.props.footer,\n        drawerContentClassname: child.props.drawerContentClassname,\n      });\n    } else {\n      /** Added possibility of other children to support Modals that need navigation context */\n      other.push(child);\n    }\n  });\n  return { views, other };\n}\n\nfunction DrawerNavigation({ children, isOpen, initialView, onCloseButton, footer }: DrawerNavigationProps): React.ReactNode {\n  const { views, other } = useMemo(() => parseChildren(children), [children]);\n\n  const incomingContentRef = useRef<HTMLDivElement>(null);\n  const outgoingContentRef = useRef<HTMLDivElement>(null);\n  const incomingHeaderRef = useRef<HTMLDivElement>(null);\n  const outgoingHeaderRef = useRef<HTMLDivElement>(null);\n  const titleRef = useRef<HTMLHeadingElement>(null);\n  const titleId = useMemo(() => uuid(), []);\n  const homeView = views.find(v => v.home) ?? views[0];\n  const [viewStack, setViewStack] = useState<string[]>([homeView?.id]);\n  const prevStackLength = useRef<number>(viewStack.length);\n  const prevView = useRef<DrawerViewProps | undefined>(undefined);\n  const reducedMotion = useReducedMotion();\n\n  const currentViewId = viewStack[viewStack.length - 1];\n  const currentView = views.find(v => v.id === currentViewId);\n\n  // The previous view, kept mounted as an overlay while it slides out during a navigation transition\n  const [outgoing, setOutgoing] = useState<{ view: DrawerViewProps; dir: 'left' | 'right'; withBackButton: boolean } | null>(null);\n\n  const goToView = useCallback(\n    (id: string): void => {\n      if (views.some(v => v.id === id)) {\n        setViewStack(stack => [...stack, id]);\n      }\n    },\n    [views]\n  );\n\n  const goBack = useCallback((): void => {\n    setViewStack(stack => (stack.length > 1 ? stack.slice(0, -1) : stack));\n  }, []);\n\n  const goToViewAndClearStack = useCallback(\n    (id: string): void => {\n      if (views.some(v => v.id === id)) {\n        setViewStack(id === homeView?.id ? [homeView.id] : [homeView?.id, id]);\n      }\n    },\n    [views, homeView]\n  );\n\n  // Detect a navigation and capture the outgoing view + direction\n  useEffect(() => {\n    if (!isOpen) {\n      prevView.current = undefined;\n      return;\n    }\n\n    const previous = prevView.current;\n    prevView.current = currentView;\n\n    const previousStackLength = prevStackLength.current;\n    const dir: 'left' | 'right' = viewStack.length >= previousStackLength ? 'left' : 'right';\n    prevStackLength.current = viewStack.length;\n\n    if (isOpen && !reducedMotion && previous && currentView && previous.id !== currentView.id) {\n      setOutgoing({ view: previous, dir, withBackButton: previousStackLength > 1 });\n    }\n  }, [viewStack, currentView, isOpen]);\n\n  // Animates the incoming and outgoing views\n  useLayoutEffect(() => {\n    if (!outgoing || !incomingContentRef.current || !outgoingContentRef.current) {\n      return;\n    }\n\n    const incomingFrom = outgoing.dir === 'left' ? '100%' : '-100%';\n    const outgoingTo = outgoing.dir === 'left' ? '-100%' : '100%';\n    const options = { duration: 0.3, ease: 'easeInOut' } as const;\n\n    animate(incomingContentRef.current, { x: [incomingFrom, '0%'] }, options);\n    if (incomingHeaderRef.current) {\n      animate(incomingHeaderRef.current, { x: [incomingFrom, '0%'] }, options);\n    }\n    if (outgoingHeaderRef.current) {\n      animate(outgoingHeaderRef.current, { x: ['0%', outgoingTo] }, options);\n    }\n    const leaving = animate(outgoingContentRef.current, { x: ['0%', outgoingTo] }, { ...options, onComplete: () => setOutgoing(null) });\n\n    return (): void => {\n      leaving.stop();\n    };\n  }, [outgoing]);\n\n  // Moves focus between incoming and outgoing view\n  useEffect(() => {\n    if (isOpen) {\n      titleRef.current?.focus();\n    }\n  }, [currentViewId, isOpen]);\n\n  const navigate = useMemo<NavigateProps>(() => ({ goBack, goToView, goToViewAndClearStack }), [goBack, goToView, goToViewAndClearStack]);\n\n  const [prevIsOpen, setPrevIsOpen] = useState(isOpen);\n  if (prevIsOpen !== isOpen) {\n    setPrevIsOpen(isOpen);\n    if (!isOpen) {\n      setViewStack([homeView?.id]);\n    } else if (initialView && views.some(v => v.id === initialView)) {\n      setViewStack(initialView === homeView?.id ? [homeView.id] : [homeView?.id, initialView]);\n    }\n  }\n\n  const headerContent = (\n    <div className={styles.header} style={{ overflow: outgoing ? 'hidden' : 'visible' }}>\n      {outgoing && (\n        <div ref={outgoingHeaderRef} aria-hidden inert className={styles['header__layer']} style={{ position: 'absolute', inset: 0 }}>\n          <DrawerHeaderContent title={outgoing.view.title} withBackButton={outgoing.withBackButton} onRequestBack={() => undefined} />\n        </div>\n      )}\n      <div ref={incomingHeaderRef} className={styles['header__layer']}>\n        <DrawerHeaderContent\n          title={currentView?.title}\n          titleId={titleId}\n          titleRef={titleRef}\n          withBackButton={viewStack.length > 1}\n          onRequestBack={goBack}\n        />\n      </div>\n    </div>\n  );\n\n  return (\n    <DrawerNavigationContext.Provider value={navigate}>\n      <Drawer\n        isOpen={isOpen}\n        onRequestClose={currentView?.onCloseButton ?? onCloseButton}\n        footerContent={currentView?.footer ?? footer}\n        contentClassName={currentView?.drawerContentClassname}\n        paddingSize={'extra'}\n        headerContent={headerContent}\n      >\n        <div className={styles['content']} style={{ overflow: outgoing ? 'hidden' : 'visible' }}>\n          {outgoing && (\n            <div ref={outgoingContentRef} aria-hidden inert style={{ position: 'absolute', width: '100%' }}>\n              {outgoing.view.children}\n            </div>\n          )}\n          <div ref={incomingContentRef}>{currentView?.children}</div>\n        </div>\n      </Drawer>\n      {other}\n    </DrawerNavigationContext.Provider>\n  );\n}\n\nDrawerNavigation.View = DrawerView;\n\nexport default DrawerNavigation;\n"],"mappings":"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"}
+{"version":3,"file":"DrawerNavigation.js","names":[],"sources":["../src/components/Filter/DrawerNavigation/useDrawerNavigation.ts","../src/components/Filter/DrawerNavigation/DrawerNavigation.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface NavigateProps<ViewId extends string = string> {\n  goToView: (id: ViewId) => void;\n  goBack: () => void;\n  goToViewAndClearStack: (id: ViewId) => void;\n}\n\nexport const DrawerNavigationContext = createContext<NavigateProps | null>(null);\n\nexport function useDrawerNavigation<ViewId extends string = string>(): NavigateProps<ViewId> {\n  const context = useContext(DrawerNavigationContext);\n  if (!context) {\n    throw new Error('useDrawerNavigation must be used inside a <DrawerNavigation> component');\n  }\n  return context as NavigateProps<ViewId>;\n}\n","import type React from 'react';\nimport { Children, isValidElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport { animate, useReducedMotion } from 'motion/react';\n\nimport { type NavigateProps, DrawerNavigationContext } from './useDrawerNavigation';\nimport uuid from '../../../utils/uuid';\nimport Drawer from '../../Drawer';\nimport DrawerHeaderContent from '../../Drawer/DrawerHeaderContent';\n\nimport styles from './styles.module.scss';\n\nexport interface DrawerViewProps<ViewId extends string = string> {\n  /** Id for the view. Important for navigation */\n  id: ViewId;\n  /** Title used for Drawer in current view */\n  title: string;\n  /** Mark this view as the home/default view */\n  home?: boolean;\n  /** Content inside the drawer for this view */\n  children: React.ReactNode;\n  /** Default onClose callback for drawer. Will override onCloseButton on parent */\n  onCloseButton?: () => void;\n  /** Content sent to footer section of Drawer. Will override footer on parent */\n  footer?: React.ReactNode;\n  /** Classname set on the content inside Drawer */\n  drawerContentClassname?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction DrawerView<ViewId extends string>(_props: DrawerViewProps<ViewId>): React.ReactNode {\n  // DrawerView is never rendered directly — DrawerNavigation reads its props\n  return null;\n}\n\nexport interface DrawerNavigationProps {\n  /** Views and other children components inside the Drawer navigation. Views are put in stack */\n  children: React.ReactNode;\n  /** Is drawer open or closed */\n  isOpen: boolean;\n  /** Navigate to this view when the drawer opens. Defaults to home view. */\n  initialView?: string;\n  /** Default onClose callback for drawer. View onCloseButton callback will override this. */\n  onCloseButton?: () => void;\n  /** Content sent to footer section of Drawer. View footer will override this */\n  footer?: React.ReactNode;\n}\n\nfunction parseChildren(children: React.ReactNode): { views: DrawerViewProps[]; other: React.ReactNode[] } {\n  const views: DrawerViewProps[] = [];\n  const other: React.ReactNode[] = [];\n  Children.forEach(children, child => {\n    if (isValidElement<DrawerViewProps>(child) && child.type === DrawerView) {\n      views.push({\n        id: child.props.id,\n        title: child.props.title,\n        home: child.props.home,\n        children: child.props.children,\n        onCloseButton: child.props.onCloseButton,\n        footer: child.props.footer,\n        drawerContentClassname: child.props.drawerContentClassname,\n      });\n    } else {\n      /** Added possibility of other children to support Modals that need navigation context */\n      other.push(child);\n    }\n  });\n  return { views, other };\n}\n\nfunction DrawerNavigation({ children, isOpen, initialView, onCloseButton, footer }: DrawerNavigationProps): React.ReactNode {\n  const { views, other } = useMemo(() => parseChildren(children), [children]);\n\n  const incomingContentRef = useRef<HTMLDivElement>(null);\n  const outgoingContentRef = useRef<HTMLDivElement>(null);\n  const incomingHeaderRef = useRef<HTMLDivElement>(null);\n  const outgoingHeaderRef = useRef<HTMLDivElement>(null);\n  const titleRef = useRef<HTMLHeadingElement>(null);\n  const titleId = useMemo(() => uuid(), []);\n  const homeView = views.find(v => v.home) ?? views[0];\n  const [viewStack, setViewStack] = useState<string[]>([homeView?.id]);\n  const prevStackLength = useRef<number>(viewStack.length);\n  const prevView = useRef<DrawerViewProps | undefined>(undefined);\n  const reducedMotion = useReducedMotion();\n\n  const currentViewId = viewStack[viewStack.length - 1];\n  const currentView = views.find(v => v.id === currentViewId);\n\n  // The previous view, kept mounted as an overlay while it slides out during a navigation transition\n  const [outgoing, setOutgoing] = useState<{ view: DrawerViewProps; dir: 'left' | 'right'; withBackButton: boolean } | null>(null);\n\n  const goToView = useCallback(\n    (id: string): void => {\n      if (views.some(v => v.id === id)) {\n        setViewStack(stack => [...stack, id]);\n      }\n    },\n    [views]\n  );\n\n  const goBack = useCallback((): void => {\n    setViewStack(stack => (stack.length > 1 ? stack.slice(0, -1) : stack));\n  }, []);\n\n  const goToViewAndClearStack = useCallback(\n    (id: string): void => {\n      if (views.some(v => v.id === id)) {\n        setViewStack(id === homeView?.id ? [homeView.id] : [homeView?.id, id]);\n      }\n    },\n    [views, homeView]\n  );\n\n  // Detect a navigation and capture the outgoing view + direction\n  useEffect(() => {\n    if (!isOpen) {\n      prevView.current = undefined;\n      return;\n    }\n\n    const previous = prevView.current;\n    prevView.current = currentView;\n\n    const previousStackLength = prevStackLength.current;\n    const dir: 'left' | 'right' = viewStack.length >= previousStackLength ? 'left' : 'right';\n    prevStackLength.current = viewStack.length;\n\n    if (isOpen && !reducedMotion && previous && currentView && previous.id !== currentView.id) {\n      setOutgoing({ view: previous, dir, withBackButton: previousStackLength > 1 });\n    }\n  }, [viewStack, currentView, isOpen]);\n\n  // Animates the incoming and outgoing views\n  useLayoutEffect(() => {\n    if (!outgoing || !incomingContentRef.current || !outgoingContentRef.current) {\n      return;\n    }\n\n    const incomingFrom = outgoing.dir === 'left' ? '100%' : '-100%';\n    const outgoingTo = outgoing.dir === 'left' ? '-100%' : '100%';\n    const options = { duration: 0.3, ease: 'easeInOut' } as const;\n\n    animate(incomingContentRef.current, { x: [incomingFrom, '0%'] }, options);\n    if (incomingHeaderRef.current) {\n      animate(incomingHeaderRef.current, { x: [incomingFrom, '0%'] }, options);\n    }\n    if (outgoingHeaderRef.current) {\n      animate(outgoingHeaderRef.current, { x: ['0%', outgoingTo] }, options);\n    }\n    const leaving = animate(outgoingContentRef.current, { x: ['0%', outgoingTo] }, { ...options, onComplete: () => setOutgoing(null) });\n\n    return (): void => {\n      leaving.stop();\n    };\n  }, [outgoing]);\n\n  // Moves focus between incoming and outgoing view\n  useEffect(() => {\n    if (isOpen) {\n      titleRef.current?.focus();\n    }\n  }, [currentViewId, isOpen]);\n\n  const navigate = useMemo<NavigateProps>(() => ({ goBack, goToView, goToViewAndClearStack }), [goBack, goToView, goToViewAndClearStack]);\n\n  const [prevIsOpen, setPrevIsOpen] = useState(isOpen);\n  if (prevIsOpen !== isOpen) {\n    setPrevIsOpen(isOpen);\n    if (!isOpen) {\n      setViewStack([homeView?.id]);\n    } else if (initialView && views.some(v => v.id === initialView)) {\n      setViewStack(initialView === homeView?.id ? [homeView.id] : [homeView?.id, initialView]);\n    }\n  }\n\n  const headerContent = (\n    <div className={styles.header} style={{ overflow: outgoing ? 'hidden' : 'visible' }}>\n      {outgoing && (\n        <div ref={outgoingHeaderRef} aria-hidden inert className={styles['header__layer']} style={{ position: 'absolute', inset: 0 }}>\n          <DrawerHeaderContent title={outgoing.view.title} withBackButton={outgoing.withBackButton} onRequestBack={() => undefined} />\n        </div>\n      )}\n      <div ref={incomingHeaderRef} className={styles['header__layer']}>\n        <DrawerHeaderContent\n          title={currentView?.title}\n          titleId={titleId}\n          titleRef={titleRef}\n          withBackButton={viewStack.length > 1}\n          onRequestBack={goBack}\n        />\n      </div>\n    </div>\n  );\n\n  return (\n    <DrawerNavigationContext.Provider value={navigate}>\n      <Drawer\n        isOpen={isOpen}\n        onRequestClose={currentView?.onCloseButton ?? onCloseButton}\n        footerContent={currentView?.footer ?? footer}\n        contentClassName={currentView?.drawerContentClassname}\n        paddingSize={'extra'}\n        headerContent={headerContent}\n      >\n        <div className={styles['content']} style={{ overflow: outgoing ? 'hidden' : 'visible' }}>\n          {outgoing && (\n            <div ref={outgoingContentRef} aria-hidden inert style={{ position: 'absolute', width: '100%' }}>\n              {outgoing.view.children}\n            </div>\n          )}\n          <div ref={incomingContentRef}>{currentView?.children}</div>\n        </div>\n      </Drawer>\n      {other}\n    </DrawerNavigationContext.Provider>\n  );\n}\n\nDrawerNavigation.View = DrawerView;\n\nexport default DrawerNavigation;\n"],"mappings":"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"}

package/lib/Duolist.js.map

@@ -1 +1 @@
-{"version":3,"file":"Duolist.js","names":[],"sources":["../src/components/Duolist/Duolist.tsx","../src/components/Duolist/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TitleProps } from '../Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Spacer from '../Spacer';\n\nimport duolistStyles from './styles.module.scss';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\nexport interface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: React.ReactElement<TitleProps>;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n  /** Use collapsed mode on columns from chosen breakpoint and below. */\n  useCollapsedFromAndBelowBreakpoint?: keyof typeof Breakpoint;\n}\n\nexport interface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt\n          data-separator={nonFormatted ? separator : undefined}\n          className={dtClassNames}\n          data-testid={props.testId && `${props.testId}-term`}\n        >\n          {term}\n        </dt>\n        <dd className={ddClassNames} data-testid={props.testId && `${props.testId}-description`}>\n          {description}\n        </dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n    useCollapsedFromAndBelowBreakpoint,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n  const breakpoint = useBreakpoint();\n  const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];\n\n  const duolistWrapperClasses = classNames(\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n    [duolistStyles['duolist--collapsed']]: useCollapsedMode,\n    [duolistStyles['duolist--not-collapsed']]: !useCollapsedMode,\n  });\n\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl\n        style={!nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : undefined}\n        className={duolistClasses}\n      >\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              ...duolistGroup.props,\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n","import Duolist from './Duolist';\nexport * from './Duolist';\nexport default Duolist;\n"],"mappings":";;;;;;;;AAyDA,IAAa,gBAA4C,UAAS;CAChE,MAAM,EAAE,SAAS,aAAa,aAAa,WAAW,kBAAkB,SAAS,SAAS,aAAa,YAAY,MAAM,SAAS;CAElI,MAAM,YAAY,eAAe;CACjC,MAAM,aAAa,eAAe;CAClC,MAAM,eAAe,WAAW;CAEhC,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;CACjD,CAAC;CACD,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;CACjD,CAAC;CAED,MAAM,sBAAsB;EAC1B,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;GACE,kBAAgB,eAAe,YAAY,KAAA;GAC3C,WAAW;GACX,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aAE5C;EACC,CAAA,GACJ,oBAAC,MAAD;GAAI,WAAW;GAAc,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aACvE;EACC,CAAA,CACJ,EAAA,CAAA;CAEN;CAEA,OAAO,eAAe,oBAAC,OAAD,EAAA,UAAM,cAAc,EAAO,CAAA,IAAI,oBAAA,UAAA,EAAA,UAAG,cAAc,EAAI,CAAA;AAC5E;AAEA,IAAa,WAAkC,UAAS;CACtD,MAAM,EACJ,YACA,SAAS,aACT,kBACA,OACA,SAAS,aACT,WACA,UAAU,UACV,UACA,WACA,QACA,uCACE;CAEJ,MAAM,YAAY,WAAW;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,kBAAkB,cAAc,SAAS;CAC/C,MAAM,eAAe,WAAW;CAChC,MAAM,aAAa,cAAc;CACjC,MAAM,mBAAmB,sCAAsC,cAAc,WAAW;CAExF,MAAM,wBAAwB,WAC5B;GACG,cAAc,6BAA6B;GAC3C,cAAc,wCAAwC;CACzD,GACA,SACF;CAEA,MAAM,iBAAiB,WAAW,cAAc,SAAS;GACtD,cAAc,mBAAmB;GACjC,cAAc,4BAA4B;GAC1C,cAAc,wBAAwB;GACtC,cAAc,4BAA4B,CAAC;CAC9C,CAAC;CAED,MAAM,qBAAqB,mBAAmB,mBAAmB,MAAM;CAEvE,OACE,qBAAC,OAAD;EAAK,WAAW;EAAuB,eAAa;EAAQ,oBAAkB,YAAY;YAA1F,CACG,SACC,qBAAA,UAAA,EAAA,UAAA,CACG,OACD,oBAAC,gBAAD,CAAS,CAAA,CACT,EAAA,CAAA,GAEJ,oBAAC,MAAD;GACE,OAAO,CAAC,eAAe,EAAE,qBAAqB,mBAAmB,QAAQ,QAAQ,qBAAqB,IAAI,KAAA;GAC1G,WAAW;aAEV,MAAM,SAAS,IAAI,WAAW,UAAmE;IAChG,IAAI,UAAU,QAAQ,OAAO,UAAU,aAAa;IACpD,MAAM,eAAe;IACrB,IAAI,aAAa,SAAS,cACxB,OAAO,MAAM,aAAa,OAAgD;KACxE,GAAG,aAAa;KAChB,YAAY,aAAa,MAAM,cAAc;KAC7C,QAAQ,aAAa,MAAM,UAAU;KACrC,WAAW,aAAa,MAAM,aAAa;IAC7C,CAAC;GAEL,CAAC;EACC,CAAA,CACD;;AAET;;;AC7JA,IAAA,kBAAe"}
+{"version":3,"file":"Duolist.js","names":[],"sources":["../src/components/Duolist/Duolist.tsx","../src/components/Duolist/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TitleProps } from '../Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Spacer from '../Spacer';\n\nimport duolistStyles from './styles.module.scss';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\nexport interface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: React.ReactElement<TitleProps>;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n  /** Use collapsed mode on columns from chosen breakpoint and below. */\n  useCollapsedFromAndBelowBreakpoint?: keyof typeof Breakpoint;\n}\n\nexport interface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt\n          data-separator={nonFormatted ? separator : undefined}\n          className={dtClassNames}\n          data-testid={props.testId && `${props.testId}-term`}\n        >\n          {term}\n        </dt>\n        <dd className={ddClassNames} data-testid={props.testId && `${props.testId}-description`}>\n          {description}\n        </dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n    useCollapsedFromAndBelowBreakpoint,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n  const breakpoint = useBreakpoint();\n  const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];\n\n  const duolistWrapperClasses = classNames(\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n    [duolistStyles['duolist--collapsed']]: useCollapsedMode,\n    [duolistStyles['duolist--not-collapsed']]: !useCollapsedMode,\n  });\n\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl\n        style={!nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : undefined}\n        className={duolistClasses}\n      >\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              ...duolistGroup.props,\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n","import Duolist from './Duolist';\nexport * from './Duolist';\nexport default Duolist;\n"],"mappings":";;;;;;;;AAyDA,IAAa,gBAA4C,UAAS;CAChE,MAAM,EAAE,SAAS,aAAa,aAAa,WAAW,kBAAkB,SAAS,SAAS,aAAa,YAAY,MAAM,SAAS;CAElI,MAAM,YAAY,eAAe;CACjC,MAAM,aAAa,eAAe;CAClC,MAAM,eAAe,WAAW;CAEhC,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;CACjD,CAAC;CACD,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;CACjD,CAAC;CAED,MAAM,sBAAsB;EAC1B,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;GACE,kBAAgB,eAAe,YAAY,KAAA;GAC3C,WAAW;GACX,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;GAE5C,UAAA;EACC,CAAA,GACJ,oBAAC,MAAD;GAAI,WAAW;GAAc,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;GACvE,UAAA;EACC,CAAA,CACJ,EAAA,CAAA;CAEN;CAEA,OAAO,eAAe,oBAAC,OAAD,EAAA,UAAM,cAAc,EAAO,CAAA,IAAI,oBAAA,UAAA,EAAA,UAAG,cAAc,EAAI,CAAA;AAC5E;AAEA,IAAa,WAAkC,UAAS;CACtD,MAAM,EACJ,YACA,SAAS,aACT,kBACA,OACA,SAAS,aACT,WACA,UAAU,UACV,UACA,WACA,QACA,uCACE;CAEJ,MAAM,YAAY,WAAW;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,kBAAkB,cAAc,SAAS;CAC/C,MAAM,eAAe,WAAW;CAChC,MAAM,aAAa,cAAc;CACjC,MAAM,mBAAmB,sCAAsC,cAAc,WAAW;CAExF,MAAM,wBAAwB,WAC5B;GACG,cAAc,6BAA6B;GAC3C,cAAc,wCAAwC;CACzD,GACA,SACF;CAEA,MAAM,iBAAiB,WAAW,cAAc,SAAS;GACtD,cAAc,mBAAmB;GACjC,cAAc,4BAA4B;GAC1C,cAAc,wBAAwB;GACtC,cAAc,4BAA4B,CAAC;CAC9C,CAAC;CAED,MAAM,qBAAqB,mBAAmB,mBAAmB,MAAM;CAEvE,OACE,qBAAC,OAAD;EAAK,WAAW;EAAuB,eAAa;EAAQ,oBAAkB,YAAY;EAA1F,UAAA,CACG,SACC,qBAAA,UAAA,EAAA,UAAA,CACG,OACD,oBAAC,gBAAD,CAAS,CAAA,CACT,EAAA,CAAA,GAEJ,oBAAC,MAAD;GACE,OAAO,CAAC,eAAe,EAAE,qBAAqB,mBAAmB,QAAQ,QAAQ,qBAAqB,IAAI,KAAA;GAC1G,WAAW;GAEV,UAAA,MAAM,SAAS,IAAI,WAAW,UAAmE;IAChG,IAAI,UAAU,QAAQ,OAAO,UAAU,aAAa;IACpD,MAAM,eAAe;IACrB,IAAI,aAAa,SAAS,cACxB,OAAO,MAAM,aAAa,OAAgD;KACxE,GAAG,aAAa;KAChB,YAAY,aAAa,MAAM,cAAc;KAC7C,QAAQ,aAAa,MAAM,UAAU;KACrC,WAAW,aAAa,MAAM,aAAa;IAC7C,CAAC;GAEL,CAAC;EACC,CAAA,CACD;;AAET;;;AC7JA,IAAA,kBAAe"}