@helsenorge/designsystem-react 8.6.0-beta.1 → 9.0.0-beta.0

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 TriggerMode = '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  mode?: TriggerMode;\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 = (mode: TriggerMode, variant: TriggerVariant, isActive: boolean): string | undefined => {\n  if (mode === '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      mode = '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      mode === 'onlight' && styles[`trigger--${variant}`], // variants look the same when mode=ondark\n      mode === 'ondark' && styles[`trigger--${mode}`],\n      styles[`trigger--${size}`],\n      isHovered && styles[`trigger--hovered`],\n      selected && styles[`trigger--selected`],\n      className\n    );\n\n    const iconColor = getIconColor(mode, 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":["HelpSign","size","isHovered","getIcon","jsx","iconMap","iconSizeMap","IconSize","getIconColor","mode","variant","isActive","depth","getColor","Trigger","React","ariaLabel","ariaLabelledById","selected","htmlMarkup","className","testId","rest","ref","buttonIsHovered","hoverRef","useHover","triggerClasses","classNames","styles","iconColor","icon","Icon","AnalyticsId","ariaLabelAttributes","getAriaLabelAttributes","mergeRefs"],"mappings":";;;;;;;;;;AAIA,MAAMA,IAAmC,CAAC,EAAE,MAAAC,GAAM,WAAAC,QAiBzCC,EAAQ,EAAE,MAAAF,GAAM,WAAAC,GAAW,QAfhC,gBAAAE,EAAC,QAAK,EAAA,GAAE,ijBAAijB,CAAA,GAejhB,aAXxC,gBAAAA,EAAC,QAAK,EAAA,GAAE,kjBAAkjB,CAAA,GAWrgB,QAPrD,gBAAAA,EAAC,QAAK,EAAA,GAAE,yhBAAyhB,CAAA,GAOpe,aAH7D,gBAAAA,EAAC,QAAK,EAAA,GAAE,sjBAAsjB,CAAA,GAGpf,GC4CxEC,IAA2C;AAAA,EAC/C,MAAML;AAAA;AAER,GAEMM,IAA6C;AAAA,EACjD,QAAQC,EAAS;AAAA,EACjB,OAAOA,EAAS;AAClB,GAEMC,IAAe,CAACC,GAAmBC,GAAyBC,MAA0C;AAC1G,MAAIF,MAAS;AACJ,WAAA;AAGH,QAAAG,IAAQD,IAAW,MAAM;AAE/B,MAAID,MAAY;AACP,WAAAG,EAAS,QAAQD,CAAK;AAG/B,MAAIF,MAAY;AACP,WAAAG,EAAS,aAAaD,CAAK;AAEtC,GAEME,IAAUC,EAAM;AAAA,EACpB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,SAAAP,IAAU;AAAA,IACV,MAAAD,IAAO;AAAA,IACP,MAAAR,IAAO;AAAA,IACP,UAAAiB,IAAW;AAAA,IACX,WAAAhB;AAAA,IACA,YAAAiB,IAAa;AAAA,IACb,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAM,EAAE,WAAWC,GAAiB,UAAAC,MAAaC,EAA4B,GAEvEC,IAAiBC;AAAA,MACrBC,EAAO;AAAA,MACPpB,MAAS,aAAaoB,EAAO,YAAYnB,CAAO,EAAE;AAAA;AAAA,MAClDD,MAAS,YAAYoB,EAAO,YAAYpB,CAAI,EAAE;AAAA,MAC9CoB,EAAO,YAAY5B,CAAI,EAAE;AAAA,MACzBC,KAAa2B,EAAO,kBAAkB;AAAA,MACtCX,KAAYW,EAAO,mBAAmB;AAAA,MACtCT;AAAA,IAAA,GAGIU,IAAYtB,EAAaC,GAAMC,GAASR,KAAasB,KAAmBN,CAAQ,GAEhFa,IAAO,gBAAA3B,EAAC4B,GAAK,EAAA,SAAS3B,EAAQK,CAAO,GAAG,MAAMJ,EAAYL,CAAI,GAAG,OAAO6B,GAAW,WAAW5B,KAAasB,EAAiB,CAAA;AAElI,QAAIL,MAAe;AAEf,aAAA,gBAAAf,EAAC,UAAK,eAAaiB,GAAQ,oBAAkBY,EAAY,SAAS,WAAWN,GAC1E,UACHI,EAAA,CAAA;AAIJ,UAAMG,IAAsBC,EAAuB,EAAE,OAAOnB,GAAW,IAAIC,GAAkB;AAG3F,WAAA,gBAAAb;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAYY;AAAA,QACZ,MAAK;AAAA,QACL,eAAaK;AAAA,QACb,oBAAkBY,EAAY;AAAA,QAC9B,WAAWN;AAAA,QACX,KAAKS,EAAU,CAACb,GAAKE,CAAQ,CAAC;AAAA,QAC9B,iBAAeP;AAAA,QACd,GAAGgB;AAAA,QACH,GAAGZ;AAAA,QAEH,UAAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAjB,EAAQ,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  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":["HelpSign","size","isHovered","getIcon","jsx","iconMap","iconSizeMap","IconSize","getIconColor","onColor","variant","isActive","depth","getColor","Trigger","React","ariaLabel","ariaLabelledById","selected","htmlMarkup","className","testId","rest","ref","buttonIsHovered","hoverRef","useHover","triggerClasses","classNames","styles","iconColor","icon","Icon","AnalyticsId","ariaLabelAttributes","getAriaLabelAttributes","mergeRefs"],"mappings":";;;;;;;;;;AAIA,MAAMA,IAAmC,CAAC,EAAE,MAAAC,GAAM,WAAAC,QAiBzCC,EAAQ,EAAE,MAAAF,GAAM,WAAAC,GAAW,QAfhC,gBAAAE,EAAC,QAAK,EAAA,GAAE,ijBAAijB,CAAA,GAejhB,aAXxC,gBAAAA,EAAC,QAAK,EAAA,GAAE,kjBAAkjB,CAAA,GAWrgB,QAPrD,gBAAAA,EAAC,QAAK,EAAA,GAAE,yhBAAyhB,CAAA,GAOpe,aAH7D,gBAAAA,EAAC,QAAK,EAAA,GAAE,sjBAAsjB,CAAA,GAGpf,GC4CxEC,IAA2C;AAAA,EAC/C,MAAML;AAAA;AAER,GAEMM,IAA6C;AAAA,EACjD,QAAQC,EAAS;AAAA,EACjB,OAAOA,EAAS;AAClB,GAEMC,IAAe,CAACC,GAAyBC,GAAyBC,MAA0C;AAChH,MAAIF,MAAY;AACP,WAAA;AAGH,QAAAG,IAAQD,IAAW,MAAM;AAE/B,MAAID,MAAY;AACP,WAAAG,EAAS,QAAQD,CAAK;AAG/B,MAAIF,MAAY;AACP,WAAAG,EAAS,aAAaD,CAAK;AAEtC,GAEME,IAAUC,EAAM;AAAA,EACpB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,SAAAP,IAAU;AAAA,IACV,SAAAD,IAAU;AAAA,IACV,MAAAR,IAAO;AAAA,IACP,UAAAiB,IAAW;AAAA,IACX,WAAAhB;AAAA,IACA,YAAAiB,IAAa;AAAA,IACb,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAM,EAAE,WAAWC,GAAiB,UAAAC,MAAaC,EAA4B,GAEvEC,IAAiBC;AAAA,MACrBC,EAAO;AAAA,MACPpB,MAAY,aAAaoB,EAAO,YAAYnB,CAAO,EAAE;AAAA;AAAA,MACrDD,MAAY,YAAYoB,EAAO,YAAYpB,CAAO,EAAE;AAAA,MACpDoB,EAAO,YAAY5B,CAAI,EAAE;AAAA,MACzBC,KAAa2B,EAAO,kBAAkB;AAAA,MACtCX,KAAYW,EAAO,mBAAmB;AAAA,MACtCT;AAAA,IAAA,GAGIU,IAAYtB,EAAaC,GAASC,GAASR,KAAasB,KAAmBN,CAAQ,GAEnFa,IAAO,gBAAA3B,EAAC4B,GAAK,EAAA,SAAS3B,EAAQK,CAAO,GAAG,MAAMJ,EAAYL,CAAI,GAAG,OAAO6B,GAAW,WAAW5B,KAAasB,EAAiB,CAAA;AAElI,QAAIL,MAAe;AAEf,aAAA,gBAAAf,EAAC,UAAK,eAAaiB,GAAQ,oBAAkBY,EAAY,SAAS,WAAWN,GAC1E,UACHI,EAAA,CAAA;AAIJ,UAAMG,IAAsBC,EAAuB,EAAE,OAAOnB,GAAW,IAAIC,GAAkB;AAG3F,WAAA,gBAAAb;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAYY;AAAA,QACZ,MAAK;AAAA,QACL,eAAaK;AAAA,QACb,oBAAkBY,EAAY;AAAA,QAC9B,WAAWN;AAAA,QACX,KAAKS,EAAU,CAACb,GAAKE,CAAQ,CAAC;AAAA,QAC9B,iBAAeP;AAAA,QACd,GAAGgB;AAAA,QACH,GAAGZ;AAAA,QAEH,UAAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAjB,EAAQ,cAAc;"}

package/components/Button/Button.d.ts

@@ -3,7 +3,7 @@ import { HTMLButtonProps, HTMLAnchorProps } from '../../constants';
 export type ButtonConcept = 'normal' | 'destructive';
 export type ButtonVariant = 'fill' | 'outline' | 'borderless';
 export type ButtonSize = 'medium' | 'large';
-export type ButtonMode = 'onlight' | 'ondark';
+export type ButtonOnColor = 'onlight' | 'ondark';
 export type ButtonTags = 'button' | 'a';
 export type ButtonArrows = 'icon' | 'accessibility-character';
 export type ButtonTextPosition = 'left' | 'centered';
@@ -29,7 +29,7 @@ export interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttri
     /** Changes the underlying element of the button. */
     htmlMarkup?: ButtonTags;
     /** Changes the button colors for different backgrounds. */
-    mode?: ButtonMode;
+    onColor?: ButtonOnColor;
     /** Function that is called when the Button loses focus */
     onBlur?: () => void;
     /** Function that is called when clicked */

package/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { FormMode, FormSize } from '../../constants';
-export interface CheckboxProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'> {
+import { FormOnColor, FormSize } from '../../constants';
+import { ErrorWrapperClassNameProps } from '../ErrorWrapper';
+export interface CheckboxProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'> {
     /** Adds custom classes to the element. */
     className?: string;
     /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */
@@ -8,7 +9,7 @@ export interface CheckboxProps extends Pick<React.InputHTMLAttributes<HTMLInputE
     /** input id of the checkbox */
     inputId?: string;
     /** Changes the visuals of the checkbox */
-    mode?: keyof typeof FormMode;
+    onColor?: keyof typeof FormOnColor;
     /** Changes the visuals of the checkbox */
     size?: keyof typeof FormSize;
     /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */

package/components/Checkbox/styles.module.scss

@@ -95,20 +95,6 @@ $checkbox-icon-size: 1.625rem;
 }
 
 .checkbox-wrapper {
-  &--with-error {
-    padding: getSpacer(s) getSpacer(2xs) getSpacer(m);
-    background-color: $cherry100;
-    border-left: 0.25rem solid $cherry600;
-
-    @media (min-width: map.get($grid-breakpoints, md)) {
-      padding: getSpacer(s) getSpacer(m) getSpacer(l);
-    }
-  }
-
-  &--with-error#{&}--large {
-    padding: getSpacer(m);
-  }
-
   &--large {
     margin: getSpacer(2xs) 0;
   }

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

@@ -38,7 +38,6 @@ export type Styles = {
   'checkbox-label--on-dark': string;
   'checkbox-sublabel-wrapper': string;
   'checkbox-wrapper--large': string;
-  'checkbox-wrapper--with-error': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/Dropdown/Dropdown.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare enum DropdownMode {
+export declare enum DropdownOnColor {
     onwhite = "onwhite",
     ongrey = "ongrey",
     onblueberry = "onblueberry",
@@ -21,7 +21,7 @@ export interface DropdownProps {
     /** Whether the dropdown is open or not */
     open?: boolean;
     /** Changes the visuals of the dropdown */
-    mode?: keyof typeof DropdownMode;
+    onColor?: keyof typeof DropdownOnColor;
     /** Makes the background of the trigger transparent */
     transparent?: boolean;
     /** Makes the width of the full component adjust to its parent */

package/components/Dropdown/index.js

@@ -1,6 +1,6 @@
 import { jsx as d, jsxs as g } from "react/jsx-runtime";
 import c, { useRef as _, useState as Z } from "react";
-import R from "classnames";
+import C from "classnames";
 import { theme as A } from "../../theme/index.js";
 import "../../hooks/useBreakpoint.js";
 import { useHover as q } from "../../hooks/useHover.js";
@@ -8,8 +8,8 @@ import { useToggle as F } from "../../hooks/useToggle.js";
 import { useKeyboardEvent as G } from "../../hooks/useKeyboardEvent.js";
 import { useOutsideEvent as J } from "../../hooks/useOutsideEvent.js";
 import { useUuid as y } from "../../hooks/useUuid.js";
-import { ZIndex as Q, KeyboardEventKey as n, AnalyticsId as W, IconSize as Y } from "../../constants.js";
-import { mergeRefs as M } from "../../utils/refs.js";
+import { ZIndex as M, KeyboardEventKey as n, AnalyticsId as Q, IconSize as W } from "../../constants.js";
+import { mergeRefs as Y } from "../../utils/refs.js";
 import { B as ee } from "../../Button.js";
 import { I as oe } from "../../Icon.js";
 import re from "../Icons/PlusSmall.js";
@@ -19,18 +19,18 @@ const Ie = (a) => {
   const {
     label: H,
     placeholder: K,
-    closeText: O = "Lukk",
-    noCloseButton: S = !1,
-    onToggle: $,
-    open: z = !1,
+    closeText: S = "Lukk",
+    noCloseButton: $ = !1,
+    onToggle: z,
+    open: B = !1,
     children: b,
-    mode: p = "onwhite",
-    transparent: B = !1,
+    onColor: p = "onwhite",
+    transparent: L = !1,
     fluid: h = !1,
-    testId: L,
+    testId: P,
     disabled: i,
-    zIndex: P = Q.PopOver
-  } = a, u = _(null), w = _(null), { hoverRef: I, isHovered: T } = q(), { value: t, toggleValue: x } = F(!i && z, $), l = _(c.Children.map(b, () => c.createRef())), [f, U] = Z(), v = y(), N = y(), E = y(), k = () => {
+    zIndex: T = M.PopOver
+  } = a, u = _(null), w = _(null), { hoverRef: I, isHovered: U } = q(), { value: t, toggleValue: x } = F(!i && B, z), l = _(c.Children.map(b, () => c.createRef())), [f, j] = Z(), v = y(), N = y(), E = y(), k = () => {
     var e;
     x(), (e = w.current) == null || e.focus();
   }, m = () => {
@@ -38,7 +38,7 @@ const Ie = (a) => {
     x(), (e = I.current) == null || e.focus();
   };
   G(u, (e) => {
-    var C;
+    var R;
     if (e.preventDefault(), !l.current)
       return;
     if (t) {
@@ -52,7 +52,7 @@ const Ie = (a) => {
     }
     const r = l.current.findIndex((X) => X.current === e.target);
     let s = r;
-    e.key === n.Home ? s = 0 : e.key === n.End ? s = l.current.length - 1 : e.key === n.ArrowDown && r < l.current.length - 1 ? s = r + 1 : e.key === n.ArrowUp && r > 0 ? s = r - 1 : e.key === n.Enter && r !== -1 && (s = r), s !== -1 && ((C = l.current[s].current) == null || C.focus(), U(s));
+    e.key === n.Home ? s = 0 : e.key === n.End ? s = l.current.length - 1 : e.key === n.ArrowDown && r < l.current.length - 1 ? s = r + 1 : e.key === n.ArrowUp && r > 0 ? s = r - 1 : e.key === n.Enter && r !== -1 && (s = r), s !== -1 && ((R = l.current[s].current) == null || R.focus(), j(s));
   }, [
     n.ArrowDown,
     n.ArrowUp,
@@ -61,18 +61,18 @@ const Ie = (a) => {
     n.Escape,
     n.Home
   ]), J(u, () => t && m());
-  const j = R(
+  const D = C(
     o.dropdown__toggle,
     !i && {
       [o["dropdown__toggle--on-white"]]: p === "onwhite",
       [o["dropdown__toggle--on-grey"]]: p === "ongrey",
       [o["dropdown__toggle--on-blueberry"]]: p === "onblueberry",
       [o["dropdown__toggle--on-cherry"]]: p === "oncherry",
-      [o["dropdown__toggle--transparent"]]: B,
+      [o["dropdown__toggle--transparent"]]: L,
       [o["dropdown__toggle--fluid"]]: h,
       [o["dropdown__toggle--open"]]: t
     }
-  ), D = R(o.dropdown__content, t && o["dropdown__content--open"]), V = c.Children.map(b, (e, r) => /* @__PURE__ */ d("li", { className: o.dropdown__input, role: "option", id: `${E}-${r}`, "aria-selected": r === f, children: c.isValidElement(e) && l.current && l.current[r] ? c.cloneElement(e, { ref: M([e.props.ref, l.current[r]]) }) : e }));
+  ), O = C(o.dropdown__content, t && o["dropdown__content--open"]), V = c.Children.map(b, (e, r) => /* @__PURE__ */ d("li", { className: o.dropdown__input, role: "option", id: `${E}-${r}`, "aria-selected": r === f, children: c.isValidElement(e) && l.current && l.current[r] ? c.cloneElement(e, { ref: Y([e.props.ref, l.current[r]]) }) : e }));
   return /* @__PURE__ */ g("div", { className: o.dropdown, ref: u, children: [
     /* @__PURE__ */ d("span", { id: v, className: o.dropdown__label, children: H }),
     /* @__PURE__ */ g(
@@ -80,10 +80,10 @@ const Ie = (a) => {
       {
         type: "button",
         onClick: () => !t && k(),
-        className: j,
+        className: D,
         ref: I,
-        "data-testid": L,
-        "data-analyticsid": W.Dropdown,
+        "data-testid": P,
+        "data-analyticsid": Q.Dropdown,
         disabled: i,
         "aria-labelledby": N,
         "aria-haspopup": "listbox",
@@ -96,14 +96,14 @@ const Ie = (a) => {
               color: i ? A.palette.neutral700 : A.palette.blueberry600,
               svgIcon: re,
               className: o.dropdown__icon,
-              isHovered: !i && T,
-              size: Y.XSmall
+              isHovered: !i && U,
+              size: W.XSmall
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ g("div", { className: D, style: { width: h ? "100%" : "auto", zIndex: P }, children: [
+    /* @__PURE__ */ g("div", { className: O, style: { width: h ? "100%" : "auto", zIndex: T }, children: [
       /* @__PURE__ */ d(
         "ul",
         {
@@ -116,12 +116,12 @@ const Ie = (a) => {
           children: V
         }
       ),
-      !S && /* @__PURE__ */ d("div", { className: o.dropdown__close, children: /* @__PURE__ */ d(ee, { onClick: m, "aria-expanded": t, children: O }) })
+      !$ && /* @__PURE__ */ d("div", { className: o.dropdown__close, children: /* @__PURE__ */ d(ee, { onClick: m, "aria-expanded": t, children: S }) })
     ] })
   ] });
 };
 export {
-  ne as DropdownMode,
+  ne as DropdownOnColor,
   Ie as default
 };
 //# sourceMappingURL=index.js.map

package/components/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { 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 { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownMode {\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  /** 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  mode?: keyof typeof DropdownMode;\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    open = false,\n    children,\n    mode = DropdownMode.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    optionsRef.current?.focus();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    event.preventDefault();\n\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen();\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    if (nextIndex !== -1) {\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']]: mode === DropdownMode.onwhite,\n      [styles['dropdown__toggle--on-grey']]: mode === DropdownMode.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: mode === DropdownMode.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: mode === DropdownMode.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    <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`} aria-selected={index === currentIndex}>\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  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=\"listbox\"\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`, zIndex: zIndex }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"listbox\"\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":["DropdownMode","Dropdown","props","label","placeholder","closeText","noCloseButton","onToggle","open","children","mode","transparent","fluid","testId","disabled","zIndex","ZIndex","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","useKeyboardEvent","event","KeyboardEventKey","index","x","nextIndex","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","renderChildren","child","jsx","mergeRefs","jsxs","AnalyticsId","Icon","theme","PlusSmall","IconSize","Button"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { 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 { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\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  /** 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    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    optionsRef.current?.focus();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    event.preventDefault();\n\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen();\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    if (nextIndex !== -1) {\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    <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`} aria-selected={index === currentIndex}>\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  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=\"listbox\"\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`, zIndex: zIndex }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"listbox\"\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","Dropdown","props","label","placeholder","closeText","noCloseButton","onToggle","open","children","onColor","transparent","fluid","testId","disabled","zIndex","ZIndex","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","useKeyboardEvent","event","KeyboardEventKey","index","x","nextIndex","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","renderChildren","child","jsx","mergeRefs","jsxs","AnalyticsId","Icon","theme","PlusSmall","IconSize","Button"],"mappings":";;;;;;;;;;;;;;;;AAuBY,IAAAA,uBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,WAAW,YAJDA,IAAAA,MAAA,CAAA,CAAA;AAoCZ,MAAMC,KAAoC,CAASC,MAAA;AAC3C,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,eAAAC,IAAgB;AAAA,IAChB,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,aAAAC,IAAc;AAAA,IACd,OAAAC,IAAQ;AAAA,IACR,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC,IAASC,EAAO;AAAA,EACd,IAAAd,GACEe,IAAcC,EAAuB,IAAI,GACzCC,IAAaD,EAAyB,IAAI,GAC1C,EAAE,UAAUE,GAAW,WAAAC,MAAcC,EAA4B,GACjE,EAAE,OAAOC,GAAQ,aAAaC,EAAA,IAAiBC,EAAU,CAACX,KAAYN,GAAMD,CAAQ,GACpFmB,IAAeR,EAAOS,EAAM,SAAS,IAAIlB,GAAU,MAAMkB,EAAM,UAAwB,CAAA,CAAC,GACxF,CAACC,GAAcC,CAAe,IAAIC,EAAiB,GACnDC,IAAUC,KACVC,IAAgBD,KAChBE,IAAiBF,KAEjBG,IAAa,MAAY;;AAChB,IAAAX,MACbY,IAAAjB,EAAW,YAAX,QAAAiB,EAAoB;AAAA,EAAM,GAGtBC,IAAc,MAAY;;AACjB,IAAAb,MACbY,IAAAhB,EAAU,YAAV,QAAAgB,EAAmB;AAAA,EAAM;AAsC3B,EAAAE,EAAiBrB,GAnCgB,CAACsB,MAA+B;;AAG3D,QAFJA,EAAM,eAAe,GAEjB,CAACb,EAAa;AAChB;AAGF,QAAKH;AAGM,UAAAgB,EAAM,QAAQC,EAAiB,UAAUjB,GAAQ;AAC9C,QAAAc;AACZ;AAAA,MACF;AAAA,WANa;AACA,MAAAF;AACX;AAAA,IACS;AAKL,UAAAM,IAAQf,EAAa,QAAQ,UAAU,OAAKgB,EAAE,YAAYH,EAAM,MAAM;AAC5E,QAAII,IAAYF;AAEZ,IAAAF,EAAM,QAAQC,EAAiB,OACrBG,IAAA,IACHJ,EAAM,QAAQC,EAAiB,MAC5BG,IAAAjB,EAAa,QAAQ,SAAS,IACjCa,EAAM,QAAQC,EAAiB,aAAaC,IAAQf,EAAa,QAAQ,SAAS,IAC3FiB,IAAYF,IAAQ,IACXF,EAAM,QAAQC,EAAiB,WAAWC,IAAQ,IAC3DE,IAAYF,IAAQ,IACXF,EAAM,QAAQC,EAAiB,SAASC,MAAU,OAC/CE,IAAAF,IAEVE,MAAc,QAChBP,IAAAV,EAAa,QAAQiB,CAAS,EAAE,YAAhC,QAAAP,EAAyC,SACzCP,EAAgBc,CAAS;AAAA,EAC3B,GAGsD;AAAA,IACtDH,EAAiB;AAAA,IACjBA,EAAiB;AAAA,IACjBA,EAAiB;AAAA,IACjBA,EAAiB;AAAA,IACjBA,EAAiB;AAAA,IACjBA,EAAiB;AAAA,EAAA,CAClB,GAEDI,EAAgB3B,GAAa,MAAMM,KAAUc,EAAa,CAAA;AAE1D,QAAMQ,IAAgBC;AAAA,IACpBC,EAAO;AAAA,IACP,CAACjC,KAAY;AAAA,MACX,CAACiC,EAAO,4BAA4B,CAAC,GAAGrC,MAAY;AAAA,MACpD,CAACqC,EAAO,2BAA2B,CAAC,GAAGrC,MAAY;AAAA,MACnD,CAACqC,EAAO,gCAAgC,CAAC,GAAGrC,MAAY;AAAA,MACxD,CAACqC,EAAO,6BAA6B,CAAC,GAAGrC,MAAY;AAAA,MACrD,CAACqC,EAAO,+BAA+B,CAAC,GAAGpC;AAAA,MAC3C,CAACoC,EAAO,yBAAyB,CAAC,GAAGnC;AAAA,MACrC,CAACmC,EAAO,wBAAwB,CAAC,GAAGxB;AAAA,IACtC;AAAA,EAAA,GAGIyB,IAAiBF,EAAWC,EAAO,mBAAmBxB,KAAUwB,EAAO,yBAAyB,CAAC,GAEjGE,IAAiBtB,EAAM,SAAS,IAAIlB,GAAU,CAACyC,GAAOT,MACzD,gBAAAU,EAAA,MAAA,EAAG,WAAWJ,EAAO,iBAAiB,MAAK,UAAS,IAAI,GAAGb,CAAc,IAAIO,CAAK,IAAI,iBAAeA,MAAUb,GAC7G,UAAMD,EAAA,eAAeuB,CAAK,KAAKxB,EAAa,WAAWA,EAAa,QAAQe,CAAK,IAC9Ed,EAAM,aAAauB,GAA6B,EAAE,KAAKE,EAAU,CAACF,EAAM,MAAM,KAAKxB,EAAa,QAAQe,CAAK,CAAC,CAAC,EAAG,CAAA,IAClHS,EAAA,CACN,CACD;AAED,2BACG,OAAI,EAAA,WAAWH,EAAO,UAAU,KAAK9B,GACpC,UAAA;AAAA,IAAA,gBAAAkC,EAAC,UAAK,IAAIpB,GAAS,WAAWgB,EAAO,iBAClC,UACH5C,GAAA;AAAA,IACA,gBAAAkD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAoB,CAAC9B,KAAUY,EAAW;AAAA,QACnD,WAAWU;AAAA,QACX,KAAKzB;AAAA,QACL,eAAaP;AAAA,QACb,oBAAkByC,EAAY;AAAA,QAC9B,UAAAxC;AAAA,QACA,mBAAiBmB;AAAA,QACjB,iBAAc;AAAA,QACd,iBAAeV;AAAA,QAEf,UAAA;AAAA,UAAA,gBAAA4B,EAAC,UAAK,IAAIlB,GAAe,WAAWc,EAAO,yBACxC,UACH3C,GAAA;AAAA,UACA,gBAAA+C;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,OAAOzC,IAAW0C,EAAM,QAAQ,aAAaA,EAAM,QAAQ;AAAA,cAC3D,SAASC;AAAA,cACT,WAAWV,EAAO;AAAA,cAClB,WAAW,CAACjC,KAAYO;AAAA,cACxB,MAAMqC,EAAS;AAAA,YAAA;AAAA,UACjB;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAL,EAAC,OAAI,EAAA,WAAWL,GAAgB,OAAO,EAAE,OAAOpC,IAAQ,SAAS,QAAQ,QAAAG,EAAA,GACvE,UAAA;AAAA,MAAA,gBAAAoC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWJ,EAAO;AAAA,UAClB,MAAK;AAAA,UACL,mBAAiBhB;AAAA,UACjB,UAAU;AAAA,UACV,yBAAuB,OAAOH,IAAiB,MAAc,GAAGM,CAAc,IAAIN,CAAY,KAAK;AAAA,UACnG,KAAKT;AAAA,UAEJ,UAAA8B;AAAA,QAAA;AAAA,MACH;AAAA,MACC,CAAC3C,KACC,gBAAA6C,EAAA,OAAA,EAAI,WAAWJ,EAAO,iBACrB,UAAC,gBAAAI,EAAAQ,IAAA,EAAO,SAAStB,GAAa,iBAAed,GAC1C,YACH,CAAA,GACF;AAAA,IAAA,GAEJ;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/components/ErrorWrapper/ErrorWrapper.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
+export interface ErrorWrapperClassNameProps {
+    errorWrapperClassName?: string;
+}
 export interface ErrorWrapperProps {
     /** Form component */
     children?: React.ReactNode;

package/components/ExpanderList/ExpanderList.d.ts

@@ -2,14 +2,14 @@ import React from 'react';
 import { PaletteNames } from '../../theme/palette';
 import { ListHeaderType } from '../ListHeader/ListHeader';
 import { TitleTags } from '../Title';
-export type ExpanderListColors = PaletteNames;
+export type ExpanderListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;
 export interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {
     ListHeader?: ListHeaderType;
 }
 export interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {
     Expander: ExpanderType;
 }
-export type ExpanderListVariant = 'line' | 'outline' | 'fill';
+export type ExpanderListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';
 interface ExpanderListProps {
     /** Toggles accordion functionality for the expanders. */
     accordion?: boolean;
@@ -19,14 +19,12 @@ interface ExpanderListProps {
     childPadding?: boolean;
     /** Adds custom classes to the element. */
     className?: string;
-    /** Changes the link list background color on hover. */
+    /** Changes the colors of the list. */
     color?: ExpanderListColors;
     /** Changes the font size. */
     large?: boolean;
     /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */
     renderChildrenWhenClosed?: boolean;
-    /** Stick expander trigger to top of screen while scrolling down */
-    sticky?: boolean;
     /** Sets the data-testid attribute. */
     testId?: string;
     /** Sets visual priority */
@@ -53,6 +51,6 @@ type ExpanderProps = Modify<React.HTMLAttributes<HTMLButtonElement>, {
     onExpand?: (isExpanded: boolean) => void;
     /** Overrides the default z-index of the expander header */
     zIndex?: number;
-}> & Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'sticky' | 'variant'>;
+}> & Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'>;
 export declare const ExpanderList: ExpanderListCompound;
 export default ExpanderList;