@helsenorge/designsystem-react 10.5.0 → 10.6.1

package/Trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Trigger.js","sources":["../src/components/Trigger/HelpSign.tsx","../src/components/Trigger/Trigger.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIcon, SvgPathProps } from '../Icon';\n\nconst HelpSign: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n  const normal = (\n    <path d=\"M18.854 19.678c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.222 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.84-3.424l1.042-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.136 1.022l-2.564-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 10.186c0-.908.726-1.678 1.656-1.678.908 0 1.656.77 1.656 1.678 0 .907-.748 1.657-1.656 1.657-.93 0-1.656-.75-1.656-1.657Z\" />\n  );\n\n  const normalHover = (\n    <path d=\"M18.854 18.178c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.223 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.838-3.424l1.044-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.135 1.022l-2.563-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 11.686c0-.908.725-1.678 1.655-1.678.908 0 1.657.77 1.657 1.678 0 .907-.749 1.657-1.657 1.657-.93 0-1.655-.75-1.655-1.657Z\" />\n  );\n\n  const xSmall = (\n    <path d=\"M23.98 14.937c-3.425 0-5.127 2.473-5.127 4.741 0 .363.047.726.137 1.044l2.563.182c-.09-.25-.136-.681-.136-1.022 0-1.292.885-2.586 2.563-2.586 1.658 0 2.45 1.112 2.45 2.291 0 .772-.317 1.43-1.065 1.974l-1.043.749c-1.317.953-1.84 2.065-1.84 3.425 0 .319.024.567.047.862h2.267c-.021-.135-.021-.25-.021-.295 0-.884.385-1.633 1.133-2.154l.976-.681c1.317-.93 2.27-2.2 2.27-3.993 0-2.314-1.816-4.537-5.174-4.537m-.294 13.248c-.93 0-1.656.773-1.656 1.678a1.65 1.65 0 0 0 1.656 1.657c.907 0 1.656-.748 1.656-1.657 0-.905-.749-1.678-1.656-1.678\" />\n  );\n\n  const xSmallHover = (\n    <path d=\"M18.853 18.289c0-2.268 1.701-4.742 5.127-4.742 3.357 0 5.173 2.223 5.173 4.537 0 1.794-.953 3.065-2.27 3.994l-.976.681c-.747.52-1.133 1.27-1.133 2.154 0 .046 0 .16.022.295h-2.267a39.324 39.324 0 0 0-.01-.125 8.468 8.468 0 0 1-.037-.737c0-1.36.523-2.472 1.839-3.425l1.043-.75c.748-.543 1.065-1.201 1.065-1.973 0-1.18-.792-2.29-2.45-2.29-1.678 0-2.562 1.293-2.562 2.585 0 .341.045.772.135 1.022l-2.563-.183a3.914 3.914 0 0 1-.136-1.043Zm3.176 11.575c0-.907.726-1.679 1.656-1.679.908 0 1.657.772 1.657 1.68 0 .907-.749 1.656-1.657 1.656-.93 0-1.656-.749-1.656-1.657Z\" />\n  );\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover });\n};\n\nexport default HelpSign;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon, { SvgIcon } from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type TriggerTags = 'button' | 'span';\n\nexport type TriggerVariant = 'help'; // @todo Support variant='info' in later version\n\nexport type TriggerSize = 'medium' | 'large';\n\nexport type TriggerOnColor = 'onlight' | 'ondark';\n\nexport interface TriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Controls the icon and color. Default: help.\n   */\n  variant?: TriggerVariant;\n  /**\n   * Changes the design based on the background the trigger is placed on. Default: onlight.\n   */\n  onColor?: TriggerOnColor;\n  /**\n   * Size of the trigger. Default: medium.\n   */\n  size?: TriggerSize;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Indicates that the trigger is hovered. Used in combination with htmlMarkup=span to force visual hover state.\n   */\n  isHovered?: boolean;\n  /**\n   * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button\n   */\n  htmlMarkup?: TriggerTags;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n}\n\nconst iconMap: Record<TriggerVariant, SvgIcon> = {\n  help: HelpSign,\n  //info: InfoSignStroke, // @todo Support variant='info' in later version\n};\n\nconst iconSizeMap: Record<TriggerSize, IconSize> = {\n  medium: IconSize.XSmall,\n  large: IconSize.Small,\n};\n\nconst getIconColor = (onColor: TriggerOnColor, variant: TriggerVariant, isActive: boolean): string | undefined => {\n  if (onColor === 'ondark') {\n    return 'white';\n  }\n\n  const depth = isActive ? 800 : 600;\n\n  if (variant === 'help') {\n    return getColor('plum', depth);\n  }\n\n  if (variant === 'info') {\n    return getColor('blueberry', depth);\n  }\n};\n\nconst Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(\n  (\n    {\n      ariaLabel,\n      ariaLabelledById,\n      variant = 'help',\n      onColor = 'onlight',\n      size = 'medium',\n      selected = false,\n      isHovered,\n      htmlMarkup = 'button',\n      className,\n      testId,\n      ...rest\n    },\n    ref\n  ) => {\n    const { isHovered: buttonIsHovered, hoverRef } = useHover<HTMLButtonElement>();\n\n    const triggerClasses = classNames(\n      styles.trigger,\n      onColor === 'onlight' && styles[`trigger--${variant}`], // variants look the same when onColor=ondark\n      onColor === 'ondark' && styles[`trigger--${onColor}`],\n      styles[`trigger--${size}`],\n      isHovered && styles[`trigger--hovered`],\n      selected && styles[`trigger--selected`],\n      className\n    );\n\n    const iconColor = getIconColor(onColor, variant, isHovered || buttonIsHovered || selected);\n\n    const icon = <Icon svgIcon={iconMap[variant]} size={iconSizeMap[size]} color={iconColor} isHovered={isHovered || buttonIsHovered} />;\n\n    if (htmlMarkup === 'span') {\n      return (\n        <span data-testid={testId} data-analyticsid={AnalyticsId.Trigger} className={triggerClasses}>\n          {icon}\n        </span>\n      );\n    }\n\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n    return (\n      <button\n        aria-label={ariaLabel}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Trigger}\n        className={triggerClasses}\n        ref={mergeRefs([ref, hoverRef])}\n        aria-expanded={selected}\n        {...ariaLabelAttributes}\n        {...rest}\n      >\n        {icon}\n      </button>\n    );\n  }\n);\n\nTrigger.displayName = 'Trigger';\n\nexport default Trigger;\n"],"names":["React"],"mappings":";;;;;;;;;;AAIA,MAAM,WAAmC,CAAC,EAAE,MAAM,gBAAkD;AAClG,QAAM,SACJ,oBAAC,QAAK,EAAA,GAAE,ijBAAijB,CAAA;AAG3jB,QAAM,cACJ,oBAAC,QAAK,EAAA,GAAE,kjBAAkjB,CAAA;AAG5jB,QAAM,SACJ,oBAAC,QAAK,EAAA,GAAE,yhBAAyhB,CAAA;AAGniB,QAAM,cACJ,oBAAC,QAAK,EAAA,GAAE,sjBAAsjB,CAAA;AAGzjB,SAAA,QAAQ,EAAE,MAAM,WAAW,QAAQ,aAAa,QAAQ,aAAa;AAC9E;AC2CA,MAAM,UAA2C;AAAA,EAC/C,MAAM;AAAA;AAER;AAEA,MAAM,cAA6C;AAAA,EACjD,QAAQ,SAAS;AAAA,EACjB,OAAO,SAAS;AAClB;AAEA,MAAM,eAAe,CAAC,SAAyB,SAAyB,aAA0C;AAChH,MAAI,YAAY,UAAU;AACjB,WAAA;AAAA,EAAA;AAGH,QAAA,QAAQ,WAAW,MAAM;AAE/B,MAAI,YAAY,QAAQ;AACf,WAAA,SAAS,QAAQ,KAAK;AAAA,EAAA;AAG/B,MAAI,YAAY,QAAQ;AACf,WAAA,SAAS,aAAa,KAAK;AAAA,EAAA;AAEtC;AAEA,MAAM,UAAUA,eAAM;AAAA,EACpB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AACH,UAAM,EAAE,WAAW,iBAAiB,SAAA,IAAa,SAA4B;AAE7E,UAAM,iBAAiB;AAAA,MACrB,OAAO;AAAA,MACP,YAAY,aAAa,OAAO,YAAY,OAAO,EAAE;AAAA;AAAA,MACrD,YAAY,YAAY,OAAO,YAAY,OAAO,EAAE;AAAA,MACpD,OAAO,YAAY,IAAI,EAAE;AAAA,MACzB,aAAa,OAAO,kBAAkB;AAAA,MACtC,YAAY,OAAO,mBAAmB;AAAA,MACtC;AAAA,IACF;AAEA,UAAM,YAAY,aAAa,SAAS,SAAS,aAAa,mBAAmB,QAAQ;AAEzF,UAAM,OAAO,oBAAC,MAAK,EAAA,SAAS,QAAQ,OAAO,GAAG,MAAM,YAAY,IAAI,GAAG,OAAO,WAAW,WAAW,aAAa,iBAAiB;AAElI,QAAI,eAAe,QAAQ;AAEvB,aAAA,oBAAC,UAAK,eAAa,QAAQ,oBAAkB,YAAY,SAAS,WAAW,gBAC1E,UACH,KAAA,CAAA;AAAA,IAAA;AAIJ,UAAM,sBAAsB,uBAAuB,EAAE,OAAO,WAAW,IAAI,kBAAkB;AAG3F,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAY;AAAA,QACZ,MAAK;AAAA,QACL,eAAa;AAAA,QACb,oBAAkB,YAAY;AAAA,QAC9B,WAAW;AAAA,QACX,KAAK,UAAU,CAAC,KAAK,QAAQ,CAAC;AAAA,QAC9B,iBAAe;AAAA,QACd,GAAG;AAAA,QACH,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,QAAQ,cAAc;"}
+{"version":3,"file":"Trigger.js","sources":["../src/components/Trigger/HelpSign.tsx","../src/components/Trigger/Trigger.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIcon, SvgPathProps } from '../Icon';\n\nconst HelpSign: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n  const normal = (\n    <path d=\"M18.854 19.678c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.222 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.84-3.424l1.042-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.136 1.022l-2.564-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 10.186c0-.908.726-1.678 1.656-1.678.908 0 1.656.77 1.656 1.678 0 .907-.748 1.657-1.656 1.657-.93 0-1.656-.75-1.656-1.657Z\" />\n  );\n\n  const normalHover = (\n    <path d=\"M18.854 18.178c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.223 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.838-3.424l1.044-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.135 1.022l-2.563-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 11.686c0-.908.725-1.678 1.655-1.678.908 0 1.657.77 1.657 1.678 0 .907-.749 1.657-1.657 1.657-.93 0-1.655-.75-1.655-1.657Z\" />\n  );\n\n  const xSmall = (\n    <path d=\"M23.98 14.937c-3.425 0-5.127 2.473-5.127 4.741 0 .363.047.726.137 1.044l2.563.182c-.09-.25-.136-.681-.136-1.022 0-1.292.885-2.586 2.563-2.586 1.658 0 2.45 1.112 2.45 2.291 0 .772-.317 1.43-1.065 1.974l-1.043.749c-1.317.953-1.84 2.065-1.84 3.425 0 .319.024.567.047.862h2.267c-.021-.135-.021-.25-.021-.295 0-.884.385-1.633 1.133-2.154l.976-.681c1.317-.93 2.27-2.2 2.27-3.993 0-2.314-1.816-4.537-5.174-4.537m-.294 13.248c-.93 0-1.656.773-1.656 1.678a1.65 1.65 0 0 0 1.656 1.657c.907 0 1.656-.748 1.656-1.657 0-.905-.749-1.678-1.656-1.678\" />\n  );\n\n  const xSmallHover = (\n    <path d=\"M18.853 18.289c0-2.268 1.701-4.742 5.127-4.742 3.357 0 5.173 2.223 5.173 4.537 0 1.794-.953 3.065-2.27 3.994l-.976.681c-.747.52-1.133 1.27-1.133 2.154 0 .046 0 .16.022.295h-2.267a39.324 39.324 0 0 0-.01-.125 8.468 8.468 0 0 1-.037-.737c0-1.36.523-2.472 1.839-3.425l1.043-.75c.748-.543 1.065-1.201 1.065-1.973 0-1.18-.792-2.29-2.45-2.29-1.678 0-2.562 1.293-2.562 2.585 0 .341.045.772.135 1.022l-2.563-.183a3.914 3.914 0 0 1-.136-1.043Zm3.176 11.575c0-.907.726-1.679 1.656-1.679.908 0 1.657.772 1.657 1.68 0 .907-.749 1.656-1.657 1.656-.93 0-1.656-.749-1.656-1.657Z\" />\n  );\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover });\n};\n\nexport default HelpSign;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon, { SvgIcon } from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type TriggerTags = 'button' | 'span';\n\nexport type TriggerVariant = 'help'; // @todo Support variant='info' in later version\n\nexport type TriggerSize = 'medium' | 'large';\n\nexport type TriggerOnColor = 'onlight' | 'ondark';\n\nexport interface TriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Controls the icon and color. Default: help.\n   */\n  /** @deprecated This will be removed in next major version */\n  variant?: TriggerVariant;\n  /**\n   * Changes the design based on the background the trigger is placed on. Default: onlight.\n   */\n  onColor?: TriggerOnColor;\n  /**\n   * Size of the trigger. Default: medium.\n   */\n  size?: TriggerSize;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Indicates that the trigger is hovered. Used in combination with htmlMarkup=span to force visual hover state.\n   */\n  isHovered?: boolean;\n  /**\n   * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button\n   */\n  htmlMarkup?: TriggerTags;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n}\n\nconst iconMap: Record<TriggerVariant, SvgIcon> = {\n  help: HelpSign,\n  //info: InfoSignStroke, // @todo Support variant='info' in later version\n};\n\nconst iconSizeMap: Record<TriggerSize, IconSize> = {\n  medium: IconSize.XSmall,\n  large: IconSize.Small,\n};\n\nconst getIconColor = (onColor: TriggerOnColor, variant: TriggerVariant, isActive: boolean): string | undefined => {\n  if (onColor === 'ondark') {\n    return 'white';\n  }\n\n  const depth = isActive ? 800 : 600;\n\n  if (variant === 'help') {\n    return getColor('plum', depth);\n  }\n\n  if (variant === 'info') {\n    return getColor('blueberry', depth);\n  }\n};\n\nconst Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(\n  (\n    {\n      ariaLabel,\n      ariaLabelledById,\n      variant = 'help',\n      onColor = 'onlight',\n      size = 'medium',\n      selected = false,\n      isHovered,\n      htmlMarkup = 'button',\n      className,\n      testId,\n      ...rest\n    },\n    ref\n  ) => {\n    const { isHovered: buttonIsHovered, hoverRef } = useHover<HTMLButtonElement>();\n\n    const triggerClasses = classNames(\n      styles.trigger,\n      onColor === 'onlight' && styles[`trigger--${variant}`], // variants look the same when onColor=ondark\n      onColor === 'ondark' && styles[`trigger--${onColor}`],\n      styles[`trigger--${size}`],\n      isHovered && styles[`trigger--hovered`],\n      selected && styles[`trigger--selected`],\n      className\n    );\n\n    const iconColor = getIconColor(onColor, variant, isHovered || buttonIsHovered || selected);\n\n    const icon = <Icon svgIcon={iconMap[variant]} size={iconSizeMap[size]} color={iconColor} isHovered={isHovered || buttonIsHovered} />;\n\n    if (htmlMarkup === 'span') {\n      return (\n        <span data-testid={testId} data-analyticsid={AnalyticsId.Trigger} className={triggerClasses}>\n          {icon}\n        </span>\n      );\n    }\n\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n    return (\n      <button\n        aria-label={ariaLabel}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Trigger}\n        className={triggerClasses}\n        ref={mergeRefs([ref, hoverRef])}\n        aria-expanded={selected}\n        {...ariaLabelAttributes}\n        {...rest}\n      >\n        {icon}\n      </button>\n    );\n  }\n);\n\nTrigger.displayName = 'Trigger';\n\nexport default Trigger;\n"],"names":["React"],"mappings":";;;;;;;;;;AAIA,MAAM,WAAmC,CAAC,EAAE,MAAM,gBAAkD;AAClG,QAAM,SACJ,oBAAC,QAAK,EAAA,GAAE,ijBAAijB,CAAA;AAG3jB,QAAM,cACJ,oBAAC,QAAK,EAAA,GAAE,kjBAAkjB,CAAA;AAG5jB,QAAM,SACJ,oBAAC,QAAK,EAAA,GAAE,yhBAAyhB,CAAA;AAGniB,QAAM,cACJ,oBAAC,QAAK,EAAA,GAAE,sjBAAsjB,CAAA;AAGzjB,SAAA,QAAQ,EAAE,MAAM,WAAW,QAAQ,aAAa,QAAQ,aAAa;AAC9E;AC4CA,MAAM,UAA2C;AAAA,EAC/C,MAAM;AAAA;AAER;AAEA,MAAM,cAA6C;AAAA,EACjD,QAAQ,SAAS;AAAA,EACjB,OAAO,SAAS;AAClB;AAEA,MAAM,eAAe,CAAC,SAAyB,SAAyB,aAA0C;AAChH,MAAI,YAAY,UAAU;AACjB,WAAA;AAAA,EAAA;AAGH,QAAA,QAAQ,WAAW,MAAM;AAE/B,MAAI,YAAY,QAAQ;AACf,WAAA,SAAS,QAAQ,KAAK;AAAA,EAAA;AAG/B,MAAI,YAAY,QAAQ;AACf,WAAA,SAAS,aAAa,KAAK;AAAA,EAAA;AAEtC;AAEA,MAAM,UAAUA,eAAM;AAAA,EACpB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AACH,UAAM,EAAE,WAAW,iBAAiB,SAAA,IAAa,SAA4B;AAE7E,UAAM,iBAAiB;AAAA,MACrB,OAAO;AAAA,MACP,YAAY,aAAa,OAAO,YAAY,OAAO,EAAE;AAAA;AAAA,MACrD,YAAY,YAAY,OAAO,YAAY,OAAO,EAAE;AAAA,MACpD,OAAO,YAAY,IAAI,EAAE;AAAA,MACzB,aAAa,OAAO,kBAAkB;AAAA,MACtC,YAAY,OAAO,mBAAmB;AAAA,MACtC;AAAA,IACF;AAEA,UAAM,YAAY,aAAa,SAAS,SAAS,aAAa,mBAAmB,QAAQ;AAEzF,UAAM,OAAO,oBAAC,MAAK,EAAA,SAAS,QAAQ,OAAO,GAAG,MAAM,YAAY,IAAI,GAAG,OAAO,WAAW,WAAW,aAAa,iBAAiB;AAElI,QAAI,eAAe,QAAQ;AAEvB,aAAA,oBAAC,UAAK,eAAa,QAAQ,oBAAkB,YAAY,SAAS,WAAW,gBAC1E,UACH,KAAA,CAAA;AAAA,IAAA;AAIJ,UAAM,sBAAsB,uBAAuB,EAAE,OAAO,WAAW,IAAI,kBAAkB;AAG3F,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAY;AAAA,QACZ,MAAK;AAAA,QACL,eAAa;AAAA,QACb,oBAAkB,YAAY;AAAA,QAC9B,WAAW;AAAA,QACX,KAAK,UAAU,CAAC,KAAK,QAAQ,CAAC;AAAA,QAC9B,iBAAe;AAAA,QACd,GAAG;AAAA,QACH,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,QAAQ,cAAc;"}

package/components/AnchorLink/styles.module.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
 
 $underline-width: 0.0625rem;
 $focus-width: 0.15rem;

package/components/Button/styles.module.scss

@@ -3,8 +3,8 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/screen-reader' as *;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 $dark-mode-disabled-transparrent: #ffffffb3;
 $with-icons: // icon-class, size-class, padding-left, padding-right, padding-left desktop, padding-right desktop, svg-margin-left, svg-margin-right, svg-margin-left desktop, svg-margin-right desktop
@@ -70,7 +70,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   :disabled > & {
     outline-color: palette.$neutral700;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       outline-color: palette.$neutral500;
     }
   }
@@ -84,7 +84,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 
   :disabled > & {
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       color: palette.$neutral700;
     }
   }
@@ -147,7 +147,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     outline-color: palette.$white;
 
     :disabled > & {
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         outline-color: $dark-mode-disabled-transparrent;
       }
     }
@@ -169,7 +169,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     color: palette.$white;
 
     :disabled > & {
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         color: $dark-mode-disabled-transparrent;
       }
     }
@@ -232,7 +232,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     color: palette.$neutral800;
   }
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     min-height: 3.125rem;
     padding: 0 spacers.getSpacer(l);
     font-size: font-settings.$font-size-md;
@@ -244,7 +244,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     padding: 0 spacers.getSpacer(l);
     font-size: 1.3125rem;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       min-height: 4.5rem;
       padding: 0 spacers.getSpacer(xl);
       font-size: font-settings.$font-size-lg;
@@ -257,7 +257,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
       padding-left: $pl;
       padding-right: $pr;
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         padding-left: $pld;
         padding-right: $prd;
       }
@@ -269,7 +269,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
       margin-left: $svgml;
       margin-right: $svgmr;
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         margin-left: $svgmld;
         margin-right: $svgmrd;
       }
@@ -336,7 +336,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     align-items: center;
     justify-content: center;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       margin: 0 auto 0 0;
     }
 
@@ -372,7 +372,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   @include on-dark;
 
-  @include tiny-screens-media-query {
+  @include breakpoints.tiny-screens-media-query {
     min-height: spacers.getSpacer(l);
     padding: 0 spacers.getSpacer(xs);
   }
@@ -395,7 +395,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   &--on-dark &__line {
     border-color: palette.$white;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       border-color: $dark-mode-disabled-transparrent;
     }
   }

package/components/Checkbox/styles.module.scss

@@ -3,7 +3,7 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/screen-reader' as *;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 @mixin dashed-dotted-border() {
   box-shadow: none;
@@ -245,7 +245,7 @@ $checkbox-icon-size: 1.625rem;
     background-color: palette.$blueberry800;
   }
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     &--large {
       padding: 1.68rem spacers.getSpacer(l);
     }

package/components/Chip/styles.module.scss

@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
 
 .chip {
   $chip: &;

package/components/Close/styles.module.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .close {
   display: flex;
@@ -14,7 +14,7 @@
   background-color: transparent;
   cursor: pointer;
 
-  @media (max-width: map.get($grid-breakpoints, sm)) {
+  @media (max-width: map.get(breakpoints.$grid-breakpoints, sm)) {
     height: 2.375rem;
     width: 2.375rem;
   }

package/components/Drawer/styles.module.scss

@@ -2,8 +2,8 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .drawer {
   position: fixed;
@@ -32,7 +32,7 @@
     border-radius: 0.75rem 0.75rem 0 0;
     outline: none;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       justify-content: space-between;
       height: 100%;
       max-height: 100dvh;
@@ -43,14 +43,14 @@
     }
 
     &--right {
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         transform: translateX(100%);
         right: 0;
         left: unset;
       }
     }
 
-    @include tiny-screens-media-query {
+    @include breakpoints.tiny-screens-media-query {
       max-height: 100dvh;
       border-radius: 0;
     }
@@ -61,7 +61,7 @@
       max-height: inherit;
       overflow: hidden;
 
-      @include tiny-screens-media-query {
+      @include breakpoints.tiny-screens-media-query {
         overflow-y: auto;
 
         &:focus-visible {
@@ -79,11 +79,11 @@
     padding: spacers.getSpacer(xs) spacers.getSpacer(2xs);
     border-bottom: 1px solid var(--color-base-border-neutral);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding: spacers.getSpacer(xs);
     }
 
-    @include tiny-screens-media-query {
+    @include breakpoints.tiny-screens-media-query {
       padding: spacers.getSpacer(4xs) 0;
       flex-direction: column-reverse;
       align-items: flex-start;
@@ -99,11 +99,11 @@
       outline-offset: -1px;
     }
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding: spacers.getSpacer(s) spacers.getSpacer(xs);
     }
 
-    @include tiny-screens-media-query {
+    @include breakpoints.tiny-screens-media-query {
       overflow-y: unset;
     }
   }
@@ -114,11 +114,11 @@
     border-top: 1px solid var(--color-base-border-neutral);
     padding: spacers.getSpacer(s) spacers.getSpacer(2xs);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding: spacers.getSpacer(m) spacers.getSpacer(xs);
     }
 
-    @include tiny-screens-media-query {
+    @include breakpoints.tiny-screens-media-query {
       flex-wrap: wrap;
       gap: spacers.getSpacer(2xs) 0;
       padding: spacers.getSpacer(2xs) 0;

package/components/Dropdown/index.js

@@ -44,13 +44,15 @@ const Dropdown = (props) => {
   const dropdownRef = useRef(null);
   const optionsRef = useRef(null);
   const { hoverRef: buttonRef, isHovered } = useHover();
+  const openedByKeyboard = useRef(false);
   const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);
   const inputRefList = useRef(React__default.Children.map(children, () => React__default.createRef()));
   const [currentIndex, setCurrentIndex] = useState();
   const labelId = useUuid();
   const toggleLabelId = useUuid();
   const optionIdPrefix = useUuid();
-  const handleOpen = () => {
+  const handleOpen = (isKeyboard) => {
+    openedByKeyboard.current = isKeyboard;
     toggleIsOpen();
   };
   const handleClose = () => {
@@ -60,7 +62,7 @@ const Dropdown = (props) => {
   };
   useEffect(() => {
     var _a, _b, _c;
-    if (isOpen) {
+    if (isOpen && openedByKeyboard.current) {
       (_c = (_b = (_a = inputRefList.current) == null ? void 0 : _a.find((inputRef, index) => {
         if (inputRef.current && !inputRef.current.hasAttribute("disabled")) {
           setCurrentIndex(index);
@@ -75,7 +77,7 @@ const Dropdown = (props) => {
       return;
     }
     if (!isOpen) {
-      handleOpen();
+      handleOpen(true);
       event.preventDefault();
       return;
     } else if (event.key === KeyboardEventKey.Escape && isOpen) {
@@ -95,7 +97,7 @@ const Dropdown = (props) => {
     } else if (event.key === KeyboardEventKey.Enter && index !== -1) {
       nextIndex = index;
     }
-    if (nextIndex !== -1) {
+    if (nextIndex !== -1 && event.key !== KeyboardEventKey.Space) {
       event.preventDefault();
       (_a = inputRefList.current[nextIndex].current) == null ? void 0 : _a.focus();
       setCurrentIndex(nextIndex);
@@ -107,7 +109,8 @@ const Dropdown = (props) => {
     KeyboardEventKey.End,
     KeyboardEventKey.Enter,
     KeyboardEventKey.Escape,
-    KeyboardEventKey.Home
+    KeyboardEventKey.Home,
+    KeyboardEventKey.Space
   ]);
   useOutsideEvent(dropdownRef, () => isOpen && handleClose());
   const toggleClasses = classNames(
@@ -133,7 +136,7 @@ const Dropdown = (props) => {
       "button",
       {
         type: "button",
-        onClick: () => !isOpen && handleOpen(),
+        onClick: () => !isOpen && handleOpen(false),
         className: toggleClasses,
         ref: buttonRef,
         "data-testid": testId,

package/components/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  ZIndex,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n  useUuid,\n} from '../..';\nimport { isComponent } from '../../utils/component';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\nimport RadioButton, { RadioButtonProps } from '../RadioButton';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Visible for screen readers  */\n  label: string;\n  /** Text on the trigger button that opens the dropdown */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Close button text */\n  closeText?: string;\n  /** Minimum width for the dropdown in pixels. Does not affect trigger button */\n  dropdownMinWidth?: number;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  onColor?: keyof typeof DropdownOnColor;\n  /** Makes the background of the trigger transparent */\n  transparent?: boolean;\n  /** Makes the width of the full component adjust to its parent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    closeText = 'Lukk',\n    noCloseButton = false,\n    onToggle,\n    dropdownMinWidth,\n    open = false,\n    children,\n    onColor = DropdownOnColor.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n\n  const handleOpen = (): void => {\n    toggleIsOpen();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  useEffect(() => {\n    if (isOpen) {\n      inputRefList.current\n        ?.find((inputRef, index) => {\n          if (inputRef.current && !inputRef.current.hasAttribute('disabled')) {\n            setCurrentIndex(index);\n            return true;\n          }\n        })\n        ?.current?.focus();\n    }\n  }, [isOpen]);\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen();\n      event.preventDefault();\n      return;\n    } else if (event.key === KeyboardEventKey.Escape && isOpen) {\n      handleClose();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n\n    if (nextIndex !== -1) {\n      event.preventDefault();\n\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: onColor === DropdownOnColor.onwhite,\n      [styles['dropdown__toggle--on-grey']]: onColor === DropdownOnColor.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: onColor === DropdownOnColor.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: onColor === DropdownOnColor.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  const renderChildren = React.Children.map(children, (child, index) => {\n    const role = isComponent<RadioButtonProps>(child, RadioButton)\n      ? 'menuitemradio'\n      : isComponent<CheckboxProps>(child, Checkbox)\n        ? 'menuitemcheckbox'\n        : 'menuitem';\n\n    return (\n      <li className={styles.dropdown__input} role={role} id={`${optionIdPrefix}-${index}`}>\n        {React.isValidElement(child) && inputRefList.current && inputRefList.current[index]\n          ? React.cloneElement(child as React.ReactElement, { ref: mergeRefs([child.props.ref, inputRefList.current[index]]) })\n          : child}\n      </li>\n    );\n  });\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={(): false | void => !isOpen && handleOpen()}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `auto`, minWidth: dropdownMinWidth ?? 'auto', zIndex: zIndex }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"menu\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {renderChildren}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} aria-expanded={isOpen}>\n              {closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownOnColor","React"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  ZIndex,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n  useUuid,\n} from '../..';\nimport { isComponent } from '../../utils/component';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\nimport RadioButton, { RadioButtonProps } from '../RadioButton';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Visible for screen readers  */\n  label: string;\n  /** Text on the trigger button that opens the dropdown */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Close button text */\n  closeText?: string;\n  /** Minimum width for the dropdown in pixels. Does not affect trigger button */\n  dropdownMinWidth?: number;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  onColor?: keyof typeof DropdownOnColor;\n  /** Makes the background of the trigger transparent */\n  transparent?: boolean;\n  /** Makes the width of the full component adjust to its parent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    closeText = 'Lukk',\n    noCloseButton = false,\n    onToggle,\n    dropdownMinWidth,\n    open = false,\n    children,\n    onColor = DropdownOnColor.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const openedByKeyboard = useRef<boolean>(false);\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n\n  const handleOpen = (isKeyboard: boolean): void => {\n    openedByKeyboard.current = isKeyboard;\n    toggleIsOpen();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  useEffect(() => {\n    if (isOpen && openedByKeyboard.current) {\n      inputRefList.current\n        ?.find((inputRef, index) => {\n          if (inputRef.current && !inputRef.current.hasAttribute('disabled')) {\n            setCurrentIndex(index);\n            return true;\n          }\n        })\n        ?.current?.focus();\n    }\n  }, [isOpen]);\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen(true);\n      event.preventDefault();\n      return;\n    } else if (event.key === KeyboardEventKey.Escape && isOpen) {\n      handleClose();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n\n    if (nextIndex !== -1 && event.key !== KeyboardEventKey.Space) {\n      event.preventDefault();\n\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n    KeyboardEventKey.Space,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: onColor === DropdownOnColor.onwhite,\n      [styles['dropdown__toggle--on-grey']]: onColor === DropdownOnColor.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: onColor === DropdownOnColor.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: onColor === DropdownOnColor.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  const renderChildren = React.Children.map(children, (child, index) => {\n    const role = isComponent<RadioButtonProps>(child, RadioButton)\n      ? 'menuitemradio'\n      : isComponent<CheckboxProps>(child, Checkbox)\n        ? 'menuitemcheckbox'\n        : 'menuitem';\n\n    return (\n      <li className={styles.dropdown__input} role={role} id={`${optionIdPrefix}-${index}`}>\n        {React.isValidElement(child) && inputRefList.current && inputRefList.current[index]\n          ? React.cloneElement(child as React.ReactElement, { ref: mergeRefs([child.props.ref, inputRefList.current[index]]) })\n          : child}\n      </li>\n    );\n  });\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={(): false | void => !isOpen && handleOpen(false)}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `auto`, minWidth: dropdownMinWidth ?? 'auto', zIndex: zIndex }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"menu\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {renderChildren}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} aria-expanded={isOpen}>\n              {closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownOnColor","React"],"mappings":"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"}

package/components/Dropdown/styles.module.scss

@@ -3,7 +3,7 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/screen-reader' as *;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .dropdown {
   position: relative;
@@ -25,7 +25,7 @@
     font-size: font-settings.$font-size-sm;
     line-height: 1.3rem; // Custom fordi teksten skal henge bedre sammen om den går over to linjer
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding: spacers.getSpacer(3xs) spacers.getSpacer(3xs) spacers.getSpacer(3xs) spacers.getSpacer(s);
       font-size: font-settings.$font-size-md;
       line-height: 1.5rem;
@@ -167,7 +167,7 @@
     &__label {
       padding: spacers.getSpacer(3xs) 0;
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         padding: spacers.getSpacer(2xs) 0;
       }
     }
@@ -197,7 +197,7 @@
     padding: 0;
     margin: 0;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       max-height: 464px;
     }
   }
@@ -210,7 +210,7 @@
     border-bottom: 1px solid palette.$neutral300;
     padding: spacers.getSpacer(2xs) spacers.getSpacer(s);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding: spacers.getSpacer(s);
     }
 

package/components/Duolist/styles.module.scss

@@ -3,8 +3,8 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .duolist-wrapper {
   &--border {

package/components/EmptyState/styles.module.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
 @use '../../scss/font-mixins' as fonts;
 @use '../../scss/spacers' as spacers;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .emptystate {
   display: flex;
@@ -11,7 +11,7 @@
   padding: spacers.getSpacer(s);
   align-items: center;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     gap: spacers.getSpacer(m);
     padding: spacers.getSpacer(l);
   }
@@ -26,7 +26,7 @@
   &--blank {
     border: none;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding-left: spacers.getSpacer(2xs);
     }
   }
@@ -51,7 +51,7 @@
     flex-flow: column;
     gap: spacers.getSpacer(3xs);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       gap: spacers.getSpacer(xs);
     }
   }

package/components/ErrorWrapper/styles.module.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use '../../scss/spacers' as spacers;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 @use '../../scss/font-mixins' as fonts;
 
 .error-wrapper {
@@ -10,7 +10,7 @@
     border: 1px solid var(--core-color-cherry-400);
     border-left: 4px solid var(--color-notification-border-error);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding: spacers.getSpacer(s) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(m);
     }
   }

package/components/Expander/styles.module.scss

@@ -4,8 +4,8 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../Button/styles.module' as button;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .expander {
   position: initial;
@@ -60,7 +60,7 @@
     font-weight: 600;
     text-align: left;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       font-size: font-settings.$font-size-md;
       line-height: font-settings.$lineheight-size-md;
     }
@@ -70,7 +70,7 @@
       padding: spacers.getSpacer(xs) spacers.getSpacer(2xs) spacers.getSpacer(xs) spacers.getSpacer(s);
       cursor: pointer;
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         padding: spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(l);
       }
     }
@@ -78,7 +78,7 @@
     &--icon {
       padding-left: spacers.getSpacer(2xs);
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         padding-left: spacers.getSpacer(s);
       }
     }
@@ -173,7 +173,7 @@
       padding-left: spacers.getSpacer(s);
       border-left: solid 3px palette.$neutral200;
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         margin-left: calc(38px / 2 - 1px); // Halvparten av chevron-ikonets bredde minus halve bredden på border
         padding-left: calc(
           38px / 2 + 12px - 2px
@@ -184,11 +184,11 @@
     &--large {
       padding: spacers.getSpacer(s) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(s);
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         padding: spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(xl);
       }
       &#{$content}--icon {
-        @media (min-width: map.get($grid-breakpoints, md)) {
+        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
           padding-left: 70px;
         }
       }

package/components/ExpanderHierarchy/expander.module.scss

@@ -2,7 +2,7 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/spacers' as spacers;
 @use '../../scss/font-mixins' as fonts;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .expander {
   $item: &;
@@ -23,7 +23,7 @@
     border-bottom: 1px solid palette.$neutral500;
     padding: spacers.getSpacer(xs) 0;
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       flex-direction: row-reverse;
       justify-content: start;
       padding: spacers.getSpacer(s) spacers.getSpacer(s) spacers.getSpacer(s) spacers.getSpacer(2xs);
@@ -53,7 +53,7 @@
     &--2-and-lower {
       padding: spacers.getSpacer(2xs) 0;
 
-      @media (min-width: map.get($grid-breakpoints, lg)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
         padding: spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(2xs);
       }
     }
@@ -106,13 +106,13 @@
 
     &--1,
     &--2 {
-      @media (min-width: map.get($grid-breakpoints, lg)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
         padding-left: spacers.getSpacer(2xl);
       }
     }
 
     &--3-and-lower {
-      @media (min-width: map.get($grid-breakpoints, lg)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
         padding-left: spacers.getSpacer(xl);
       }
     }
@@ -125,13 +125,13 @@
       margin-left: spacers.getSpacer(xs);
     }
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       margin-left: 0;
       margin-right: spacers.getSpacer(s);
     }
 
     &--3-and-lower {
-      @media (min-width: map.get($grid-breakpoints, lg)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
         margin-right: spacers.getSpacer(xs);
       }
     }