@helsenorge/designsystem-react 5.9.1 → 5.10.0

package/Button.js

@@ -1,2 +1,2 @@
-import e,{useRef as lt,useEffect as it}from"react";import w from"classnames";import{Icon as ct}from"./components/Icons/Icon.js";import{AnalyticsId as T,IconSize as v}from"./constants.js";import{useBreakpoint as ut}from"./hooks/useBreakpoint.js";import{useHover as U}from"./hooks/useHover.js";import{useIcons as mt}from"./hooks/useIcons.js";import{useSize as pt}from"./hooks/useSize.js";import{getColor as i}from"./theme/currys/color.js";import{breakpoints as dt}from"./theme/grid.js";import{isTest as bt,isProd as ft}from"./utils/environment.js";import ht from"./components/Icons/ArrowRight.js";import t from"./components/Button/styles.module.scss";const gt=(o,n,a,p,s,C)=>C&&a?!s||o?i("neutral",n?500:700):i("white"):a?!s||o?i("neutral",500):`${i("white")}b3`:o&&!s||!o&&s?"white":p==="normal"?i("blueberry",600):i("cherry",500),N=(o,n)=>n&&o?v.Small:o?v.Medium:v.XSmall,wt=(o,n,a)=>{if(a&&o&&(n===void 0||n===""))throw new Error("Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav")},Ct=e.forwardRef(function(n,a){const{ariaLabel:p,id:s,children:C,wrapperClassName:V,className:j,arrow:B=!1,concept:R="normal",disabled:d=!1,ellipsis:S=!1,fluid:q=!1,htmlMarkup:I="button",mode:D="onlight",onClick:z,size:X="medium",variant:_="fill",href:G,tabIndex:E,testId:M,target:x,type:J="button",...A}=n,[b,f,F]=mt(e.Children.toArray(C)),{hoverRef:W,isHovered:K}=I==="button"?U(a):U(a),$=lt(null),c=pt($),l=!!(b||f)&&!F,Q=b&&(f||B)&&!l,y=D==="ondark",h=ut()<dt.md,H=R==="destructive"&&!d,Y=_==="outline",u=_==="borderless",Z=gt(_==="fill",u,d,R,y,h),L=B&&!u,m=X==="large"&&!H&&!u,tt={...A},O=w(t["button-wrapper"],{[t["button-wrapper--fluid"]]:q||S},V),et=w(t.button,{[t["button--destructive"]]:H,[t["button--normal"]]:!m,[t["button--large"]]:m,[t["button--outline"]]:Y,[t["button--borderless"]]:u,[t["button--left-icon"]]:b&&!l,[t["button--right-icon"]]:f&&!l,[t["button--both-icons"]]:Q,[t["button--only-icon"]]:l,[t["button--arrow"]]:L,[t["button--on-dark"]]:y},j),ot=w(t.button__text,{[t["button__text--ellipsis"]]:S}),rt=w(t.diagonal,{[t["diagonal--on-dark"]]:y});it(()=>{wt(l,p,!bt()&&!ft())},[]);const k=(r,g,at)=>{const st=r&&r.props&&r.props.color?r.props.color:Z;return r&&Object.keys(r).length>0?e.cloneElement(r,{size:g,color:st,isHovered:K,className:at}):null},nt=()=>{let r,g;return c&&(r=Math.atan2(c.height,c.width),g=Math.sqrt(Math.pow(c.width,2)+Math.pow(c.height,2))),e.createElement("span",{className:ot,ref:$},d&&u&&e.createElement("span",{className:rt},e.createElement("span",{style:{transform:`rotate(${r}rad)`,width:g},className:t.diagonal__line})),e.createElement("span",null,l?p:F))},P=()=>e.createElement("span",{className:et},k(b,N(m,h),l?void 0:t["button__left-icon"]),nt(),L?k(e.createElement(ct,{svgIcon:ht}),N(m,h),t.button__arrow):k(f,N(m,h),t["button__right-icon"]));return e.createElement(e.Fragment,null,I==="button"&&e.createElement("button",{id:s,onClick:z,disabled:d,"data-testid":M,"data-analyticsid":T.Button,className:O,ref:W,tabIndex:E,type:J,...tt},P()),I==="a"&&e.createElement("a",{id:s,onClick:z,"data-testid":M,"data-analyticsid":T.Button,className:O,href:G,target:x,rel:x==="_blank"?"noopener noreferrer":n.rel,ref:W,tabIndex:E,...A},P()))}),Ft=Ct;export{Ft as B};
+import e,{useRef as it,useEffect as ct}from"react";import w from"classnames";import{Icon as ut}from"./components/Icons/Icon.js";import{AnalyticsId as U,IconSize as v}from"./constants.js";import{useBreakpoint as mt}from"./hooks/useBreakpoint.js";import{useHover as V}from"./hooks/useHover.js";import{useIcons as pt}from"./hooks/useIcons.js";import{useSize as dt}from"./hooks/useSize.js";import{getColor as i}from"./theme/currys/color.js";import{breakpoints as bt}from"./theme/grid.js";import{isTest as ft,isProd as ht}from"./utils/environment.js";import gt from"./components/Icons/ArrowRight.js";import t from"./components/Button/styles.module.scss";const wt=(o,n,a,p,s,C)=>C&&a?!s||o?i("neutral",n?500:700):i("white"):a?!s||o?i("neutral",500):`${i("white")}b3`:o&&!s||!o&&s?"white":p==="normal"?i("blueberry",600):i("cherry",500),B=(o,n)=>n&&o?v.Small:o?v.Medium:v.XSmall,Ct=(o,n,a)=>{if(a&&o&&(n===void 0||n===""))throw new Error("Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav")},It=e.forwardRef(function(n,a){const{ariaLabel:p,id:s,children:C,wrapperClassName:j,className:q,arrow:N=!1,concept:R="normal",disabled:d=!1,ellipsis:S=!1,fluid:D=!1,htmlMarkup:I="button",mode:X="onlight",onBlur:z,onClick:E,size:G="medium",variant:_="fill",href:J,tabIndex:M,testId:x,target:A,type:K="button",...F}=n,[b,f,W]=pt(e.Children.toArray(C)),{hoverRef:$,isHovered:Q}=I==="button"?V(a):V(a),H=it(null),c=dt(H),l=!!(b||f)&&!W,Y=b&&(f||N)&&!l,y=X==="ondark",h=mt()<bt.md,L=R==="destructive"&&!d,Z=_==="outline",u=_==="borderless",tt=wt(_==="fill",u,d,R,y,h),O=N&&!u,m=G==="large"&&!L&&!u,et={...F},P=w(t["button-wrapper"],{[t["button-wrapper--fluid"]]:D||S},j),ot=w(t.button,{[t["button--destructive"]]:L,[t["button--normal"]]:!m,[t["button--large"]]:m,[t["button--outline"]]:Z,[t["button--borderless"]]:u,[t["button--left-icon"]]:b&&!l,[t["button--right-icon"]]:f&&!l,[t["button--both-icons"]]:Y,[t["button--only-icon"]]:l,[t["button--arrow"]]:O,[t["button--on-dark"]]:y},q),rt=w(t.button__text,{[t["button__text--ellipsis"]]:S}),nt=w(t.diagonal,{[t["diagonal--on-dark"]]:y});ct(()=>{Ct(l,p,!ft()&&!ht())},[]);const k=(r,g,st)=>{const lt=r&&r.props&&r.props.color?r.props.color:tt;return r&&Object.keys(r).length>0?e.cloneElement(r,{size:g,color:lt,isHovered:Q,className:st}):null},at=()=>{let r,g;return c&&(r=Math.atan2(c.height,c.width),g=Math.sqrt(Math.pow(c.width,2)+Math.pow(c.height,2))),e.createElement("span",{className:rt,ref:H},d&&u&&e.createElement("span",{className:nt},e.createElement("span",{style:{transform:`rotate(${r}rad)`,width:g},className:t.diagonal__line})),e.createElement("span",null,l?p:W))},T=()=>e.createElement("span",{className:ot},k(b,B(m,h),l?void 0:t["button__left-icon"]),at(),O?k(e.createElement(ut,{svgIcon:gt}),B(m,h),t.button__arrow):k(f,B(m,h),t["button__right-icon"]));return e.createElement(e.Fragment,null,I==="button"&&e.createElement("button",{id:s,onBlur:z,onClick:E,disabled:d,"data-testid":x,"data-analyticsid":U.Button,className:P,ref:$,tabIndex:M,type:K,...et},T()),I==="a"&&e.createElement("a",{id:s,onBlur:z,onClick:E,"data-testid":x,"data-analyticsid":U.Button,className:P,href:J,target:A,rel:A==="_blank"?"noopener noreferrer":n.rel,ref:$,tabIndex:M,...F},T()))}),Wt=It;export{Wt as B};
 //# sourceMappingURL=Button.js.map

package/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconProps, IconSize } from './../Icons/';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useIcons } from '../../hooks/useIcons';\nimport { useSize } from '../../hooks/useSize';\nimport { getColor } from '../../theme/currys/color';\nimport { breakpoints } from '../../theme/grid';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonMode = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: boolean;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  mode?: ButtonMode;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean) => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow = false,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    mode = 'onlight',\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const buttonContentSize = useSize(buttonContentRef);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = mode === 'ondark';\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, mobile);\n  const hasArrow = arrow && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(buttonStyles['button__text'], {\n    [buttonStyles['button__text--ellipsis']]: ellipsis,\n  });\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (\n    iconElement: React.ReactElement<IconProps> | {} | undefined | null,\n    iconSize: number,\n    iconClassName?: string\n  ): React.ReactElement<IconProps> | React.Component<IconProps> | null => {\n    const color =\n      iconElement && (iconElement as React.ReactElement<IconProps>).props && (iconElement as React.ReactElement<IconProps>).props.color\n        ? (iconElement as React.ReactElement<IconProps>).props.color\n        : iconColor;\n    return iconElement && Object.keys(iconElement).length > 0\n      ? React.cloneElement(iconElement as React.ReactElement<IconProps>, { size: iconSize, color, isHovered, className: iconClassName })\n      : null;\n  };\n\n  const renderButtonContent = (): JSX.Element => {\n    let angle;\n    let diagonalWidth;\n    if (buttonContentSize) {\n      angle = Math.atan2(buttonContentSize.height, buttonContentSize.width);\n      diagonalWidth = Math.sqrt(Math.pow(buttonContentSize.width, 2) + Math.pow(buttonContentSize.height, 2));\n    }\n\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span style={{ transform: `rotate(${angle}rad)`, width: diagonalWidth }} className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(<Icon svgIcon={ArrowRight} />, getLargeIconSize(large, mobile), buttonStyles['button__arrow'])\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n    </span>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={hoverRef as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["getIconColor","fill","borderless","disabled","concept","ondark","mobile","getColor","getLargeIconSize","large","IconSize","checkOnlyIconAria","onlyIcon","ariaLabel","devEnv","Button","React","props","ref","id","children","wrapperClassName","className","arrow","ellipsis","fluid","htmlMarkup","mode","onClick","size","variant","href","tabIndex","testId","target","type","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","buttonContentSize","useSize","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","isProd","renderIcon","iconElement","iconSize","iconClassName","color","renderButtonContent","angle","diagonalWidth","renderbuttonContentWrapper","Icon","ArrowRight","AnalyticsId","Button$1"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconProps, IconSize } from './../Icons/';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useIcons } from '../../hooks/useIcons';\nimport { useSize } from '../../hooks/useSize';\nimport { getColor } from '../../theme/currys/color';\nimport { breakpoints } from '../../theme/grid';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonMode = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: boolean;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  mode?: ButtonMode;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean) => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow = false,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    mode = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const buttonContentSize = useSize(buttonContentRef);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = mode === 'ondark';\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, mobile);\n  const hasArrow = arrow && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(buttonStyles['button__text'], {\n    [buttonStyles['button__text--ellipsis']]: ellipsis,\n  });\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (\n    iconElement: React.ReactElement<IconProps> | {} | undefined | null,\n    iconSize: number,\n    iconClassName?: string\n  ): React.ReactElement<IconProps> | React.Component<IconProps> | null => {\n    const color =\n      iconElement && (iconElement as React.ReactElement<IconProps>).props && (iconElement as React.ReactElement<IconProps>).props.color\n        ? (iconElement as React.ReactElement<IconProps>).props.color\n        : iconColor;\n    return iconElement && Object.keys(iconElement).length > 0\n      ? React.cloneElement(iconElement as React.ReactElement<IconProps>, { size: iconSize, color, isHovered, className: iconClassName })\n      : null;\n  };\n\n  const renderButtonContent = (): JSX.Element => {\n    let angle;\n    let diagonalWidth;\n    if (buttonContentSize) {\n      angle = Math.atan2(buttonContentSize.height, buttonContentSize.width);\n      diagonalWidth = Math.sqrt(Math.pow(buttonContentSize.width, 2) + Math.pow(buttonContentSize.height, 2));\n    }\n\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span style={{ transform: `rotate(${angle}rad)`, width: diagonalWidth }} className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(<Icon svgIcon={ArrowRight} />, getLargeIconSize(large, mobile), buttonStyles['button__arrow'])\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n    </span>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={hoverRef as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["getIconColor","fill","borderless","disabled","concept","ondark","mobile","getColor","getLargeIconSize","large","IconSize","checkOnlyIconAria","onlyIcon","ariaLabel","devEnv","Button","React","props","ref","id","children","wrapperClassName","className","arrow","ellipsis","fluid","htmlMarkup","mode","onBlur","onClick","size","variant","href","tabIndex","testId","target","type","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","buttonContentSize","useSize","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","isProd","renderIcon","iconElement","iconSize","iconClassName","color","renderButtonContent","angle","diagonalWidth","renderbuttonContentWrapper","Icon","ArrowRight","AnalyticsId","Button$1"],"mappings":"yoBA8DA,MAAMA,GAAe,CACnBC,EACAC,EACAC,EACAC,EACAC,EACAC,IAEIA,GAAUH,EACL,CAACE,GAAUJ,EAAOM,EAAS,UAAYL,EAAmB,IAAN,GAAS,EAAIK,EAAS,OAAO,EAEtFJ,EACK,CAACE,GAAUJ,EAAOM,EAAS,UAAW,GAAG,EAAI,GAAGA,EAAS,OAAO,CAAC,KAErEN,GAAQ,CAACI,GAAY,CAACJ,GAAQI,EAC1B,QAGFD,IAAY,SAAWG,EAAS,YAAa,GAAG,EAAIA,EAAS,SAAU,GAAG,EAE7EC,EAAmB,CAACC,EAAgBH,IACpCA,GAAUG,EAAcC,EAAS,MACjCD,EAAcC,EAAS,OACpBA,EAAS,OAGZC,GAAoB,CAACC,EAAmBC,EAA+BC,IAAoB,CAC/F,GAAIA,GAAUF,IAAaC,IAAc,QAAaA,IAAc,IAC5D,MAAA,IAAI,MAAM,yEAAyE,CAE7F,EAEME,GAASC,EAAM,WAAW,SAC9BC,EACAC,EACA,CACM,KAAA,CACJ,UAAAL,EACA,GAAAM,EACA,SAAAC,EACA,iBAAAC,EACA,UAAAC,EACA,MAAAC,EAAQ,GACR,QAAAnB,EAAU,SACV,SAAAD,EAAW,GACX,SAAAqB,EAAW,GACX,MAAAC,EAAQ,GACR,WAAAC,EAAa,SACb,KAAAC,EAAO,UACP,OAAAC,EACA,QAAAC,EACA,KAAAC,EAAO,SACP,QAAAC,EAAU,OACV,KAAAC,EACA,SAAAC,EACA,OAAAC,EACA,OAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACD,EAAApB,EAEE,CAACqB,EAAUC,EAAWC,CAAY,EAAIC,GAASzB,EAAM,SAAS,QAAQI,CAAQ,CAAC,EAC/E,CAAE,SAAAsB,EAAU,UAAAC,CAChB,EAAAjB,IAAe,SACXkB,EAA4B1B,CAAyC,EACrE0B,EAA4B1B,CAAyC,EACrE2B,EAAmBC,GAAuB,IAAI,EAC9CC,EAAoBC,GAAQH,CAAgB,EAC5CjC,EAAW,CAAC,EAAE0B,GAAYC,IAAc,CAACC,EACzCS,EAAYX,IAAaC,GAAahB,IAAU,CAACX,EACjDsC,EAASvB,IAAS,SAElBrB,EADa6C,KACSC,GAAY,GAClCC,EAAcjD,IAAY,eAAiB,CAACD,EAC5CmD,EAAiBvB,IAAY,UAC7BwB,EAAoBxB,IAAY,aAChCyB,GAAYxD,GAAa+B,IAAY,OAAQwB,EAAmBpD,EAAUC,EAAS8C,EAAQ5C,CAAM,EACjGmD,EAAWlC,GAAS,CAACgC,EACrB9C,EAAQqB,IAAS,SAAW,CAACuB,GAAe,CAACE,EAC7CG,GAAO,CAAE,GAAGrB,GAEZsB,EAAuBC,EAC3BC,EAAa,gBAAgB,EAC7B,CAAE,CAACA,EAAa,uBAAuB,CAAC,EAAGpC,GAASD,CAAS,EAC7DH,CAAA,EAEIyC,GAAgBF,EACpBC,EAAa,OACb,CACE,CAACA,EAAa,qBAAqB,CAAC,EAAGR,EACvC,CAACQ,EAAa,gBAAgB,CAAC,EAAG,CAACpD,EACnC,CAACoD,EAAa,eAAe,CAAC,EAAGpD,EACjC,CAACoD,EAAa,iBAAiB,CAAC,EAAGP,EACnC,CAACO,EAAa,oBAAoB,CAAC,EAAGN,EACtC,CAACM,EAAa,mBAAmB,CAAC,EAAGvB,GAAY,CAAC1B,EAClD,CAACiD,EAAa,oBAAoB,CAAC,EAAGtB,GAAa,CAAC3B,EACpD,CAACiD,EAAa,oBAAoB,CAAC,EAAGZ,EACtC,CAACY,EAAa,mBAAmB,CAAC,EAAGjD,EACrC,CAACiD,EAAa,eAAe,CAAC,EAAGJ,EACjC,CAACI,EAAa,iBAAiB,CAAC,EAAGX,CACrC,EACA5B,CAAA,EAEIyC,GAAoBH,EAAWC,EAAa,aAAiB,CACjE,CAACA,EAAa,wBAAwB,CAAC,EAAGrC,CAAA,CAC3C,EACKwC,GAAkBJ,EAAWC,EAAa,SAAa,CAC3D,CAACA,EAAa,mBAAmB,CAAC,EAAGX,CAAA,CACtC,EAEDe,GAAU,IAAM,CACdtD,GAAkBC,EAAUC,EAAW,CAACqD,MAAY,CAACC,IAAQ,CAC/D,EAAG,CAAE,CAAA,EAEL,MAAMC,EAAa,CACjBC,EACAC,EACAC,KACsE,CAChE,MAAAC,GACJH,GAAgBA,EAA8C,OAAUA,EAA8C,MAAM,MACvHA,EAA8C,MAAM,MACrDb,GACN,OAAOa,GAAe,OAAO,KAAKA,CAAW,EAAE,OAAS,EACpDrD,EAAM,aAAaqD,EAA8C,CAAE,KAAMC,EAAU,MAAAE,GAAO,UAAA7B,EAAW,UAAW4B,EAAA,CAAe,EAC/H,IAAA,EAGAE,GAAsB,IAAmB,CACzC,IAAAC,EACAC,EACJ,OAAI5B,IACF2B,EAAQ,KAAK,MAAM3B,EAAkB,OAAQA,EAAkB,KAAK,EACpE4B,EAAgB,KAAK,KAAK,KAAK,IAAI5B,EAAkB,MAAO,CAAC,EAAI,KAAK,IAAIA,EAAkB,OAAQ,CAAC,CAAC,GAIrG/B,EAAA,cAAA,OAAA,CAAK,UAAW+C,GAAmB,IAAKlB,CACtC,EAAA1C,GAAYoD,GACXvC,EAAA,cAAC,QAAK,UAAWgD,EAAA,EACdhD,EAAA,cAAA,OAAA,CAAK,MAAO,CAAE,UAAW,UAAU0D,CAAK,OAAQ,MAAOC,CAAc,EAAG,UAAWd,EAAa,cAAmB,CAAA,CACtH,EAED7C,EAAA,cAAA,OAAA,KAAMJ,EAAWC,EAAY2B,CAAa,CAC7C,CAAA,EAIEoC,EAA6B,IAChC5D,EAAA,cAAA,OAAA,CAAK,UAAW8C,EACd,EAAAM,EAAW9B,EAAU9B,EAAiBC,EAAOH,CAAM,EAAIM,EAA+C,OAApCiD,EAAa,mBAAmB,CAAa,EAC/GY,KACAhB,EACGW,EAAYpD,EAAA,cAAA6D,GAAA,CAAK,QAASC,EAAY,CAAA,EAAItE,EAAiBC,EAAOH,CAAM,EAAGuD,EAAa,aAAgB,EACxGO,EAAW7B,EAAW/B,EAAiBC,EAAOH,CAAM,EAAGuD,EAAa,oBAAoB,CAAC,CAC/F,EAIA,OAAA7C,EAAA,cAAAA,EAAA,SAAA,KACGU,IAAe,UACdV,EAAA,cAAC,SAAA,CACC,GAAAG,EACA,OAAAS,EACA,QAAAC,EACA,SAAA1B,EACA,cAAa+B,EACb,mBAAkB6C,EAAY,OAC9B,UAAWpB,EACX,IAAKjB,EACL,SAAAT,EACA,KAAAG,EACC,GAAGsB,EAAA,EAEHkB,EAA2B,CAAA,EAG/BlD,IAAe,KACdV,EAAA,cAAC,IAAA,CACC,GAAAG,EACA,OAAAS,EACA,QAAAC,EACA,cAAaK,EACb,mBAAkB6C,EAAY,OAC9B,UAAWpB,EACX,KAAA3B,EACA,OAAAG,EACA,IAAKA,IAAW,SAAW,sBAAwBlB,EAAM,IACzD,IAAKyB,EACL,SAAAT,EACC,GAAGI,CAAA,EAEHuC,EAA2B,CAAA,CAGlC,CAEJ,CAAC,EAEDI,GAAejE"}

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [5.9.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv5.9.1&targetVersion=GTv5.9.2) (2023-12-12)
+
+### Bug Fixes
+
+- slider forenklet emojirendring ([9df0d90](https://github.com/helsenorge/designsystem/commit/9df0d90e58c16f0609ce2c0de6c770f10420e7eb)),
+  closes [#313810](https://github.com/helsenorge/designsystem/issues/313810)
+
+## [5.9.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv5.9.0&targetVersion=GTv5.9.1) (2023-12-11)
+
+### Bug Fixes
+
+- promopanel har position=relative ([360a762](https://github.com/helsenorge/designsystem/commit/360a762ec3ce63cfe870f6cd7300af9fb9b83a5e)),
+  closes [#315387](https://github.com/helsenorge/designsystem/issues/315387)
+
 ## [5.9.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv5.8.0&targetVersion=GTv5.9.0) (2023-12-11)
 
 ### Features

package/Input.js

@@ -1,2 +1,2 @@
-import r,{useRef as A,useState as K,useEffect as he}from"react";import x from"classnames";import{FormMode as l,FormVariant as ge,IconSize as D,AnalyticsId as ve,AVERAGE_CHARACTER_WIDTH_PX as Ce}from"./constants.js";import{useBreakpoint as xe,Breakpoint as _e}from"./hooks/useBreakpoint.js";import{useUuid as Ee}from"./hooks/useUuid.js";import{getColor as F}from"./theme/currys/color.js";import{E as ye}from"./ErrorWrapper.js";import{Icon as ke}from"./components/Icons/Icon.js";import{a as we}from"./Label.js";import{M as Ie}from"./MaxCharacters.js";import t from"./components/Input/styles.module.scss";var Ne=(e=>(e.text="text",e.number="number",e.email="email",e.password="password",e.search="search",e.tel="tel",e.url="url",e.date="date",e.time="time",e))(Ne||{});const Re=(e,u,f)=>{const o=u?"1.5rem":"2rem",b=u?`${f}px`:"0px",d="4px";return`calc(${e*Ce}px + ${o} + ${b} + ${d})`},M=r.forwardRef((e,u)=>{const{className:f,defaultValue:o="",placeholder:b,type:d="text",name:z,transparent:B=!1,icon:c,iconRight:h,inputId:P,inputWrapperRef:U,mode:i=l.onwhite,baseIncrementValue:_,variant:H,label:O,error:X,errorText:E,testId:q,disabled:s,readOnly:G,autoComplete:L,afterInputChildren:j,rightOfInput:J,width:y,required:Q,onChange:k,onKeyDown:w,autoFocus:Y,maxCharacters:m,maxText:Z,...T}=e,ee=xe(),p=A(null),I=Ee(P),[N,R]=K(o),[te,ne]=K(void 0),g=A(!1),W=/^[0-9]$/;he(()=>{R(o)},[o]);const re=i===l.ondark,ae=i===l.onblueberry,oe=!!m&&N.toString().length>m,v=i===l.oninvalid||!!E||!!X||oe,C=H===ge.bigform,ie=B&&i!==l.ondark&&!v,ce=x(t["input-wrapper"],f),se=x(t["input-container"],{[t["input-container--transparent"]]:ie,[t["input-container--on-blueberry"]]:ae,[t["input-container--on-dark"]]:re,[t["input-container--invalid"]]:v,[t["input-container--bigform"]]:C,[t["input-container--disabled"]]:s,[t["input-container--with-icon"]]:c}),le=x(t["input-container__input"],{[t["input-container__input--bigform"]]:C,[t["input-container__input--disabled"]]:s}),ue=s?F("neutral",500):F("black"),S=ee===_e.xs||!C?D.XSmall:D.Small,V=()=>c!==void 0?r.createElement(ke,{className:t["input-container__input__icon"],color:ue,size:S,svgIcon:c}):null,de=n=>{if(p&&p.current&&c){const a=h?0:1;p.current.children[a].focus(),e.onClick&&e.onClick(n)}},me=n=>{const a=pe(n);k&&k(n),R(a),ne(a)},pe=n=>{if(typeof _>"u"||d!=="number")return n.target.value;const a=Number(n.target.value);return!te&&!g.current&&(a===1||a===-1)&&(n.target.value=_+""),n.target.value},fe=n=>{W.test(n.key)&&(g.current=!0),w&&w(n)},be=n=>{W.test(n.key)&&(g.current=!1)},$=y?Re(y,!!c,S):void 0;return r.createElement(ye,{errorText:E},r.createElement("div",{"data-testid":q,"data-analyticsid":ve.Input,className:ce,ref:U},we(O,I,i,s),r.createElement("div",{className:t["content-wrapper"]},r.createElement("div",{onClick:de,ref:p,className:se,style:{maxWidth:$}},!h&&V(),r.createElement("input",{onChange:me,onKeyDown:fe,onKeyUp:be,name:z,type:d,defaultValue:o,id:I,className:le,ref:u,"aria-labelledby":e["aria-labelledby"]??void 0,"aria-describedby":e["aria-describedby"]??void 0,"aria-invalid":!!v,disabled:s,placeholder:b,readOnly:G,autoComplete:L||"off",required:Q,autoFocus:Y,...T}),h&&V()),r.createElement("div",{className:t["content-wrapper__right-of-input"]},J)),m&&r.createElement(Ie,{maxCharacters:m,length:N.toString().length,maxText:Z,mode:i,maxWidth:$}),j))});M.displayName="Input";const Ue=M;export{Ue as I,Ne as a};
+import r,{useRef as A,useState as K,useEffect as he}from"react";import x from"classnames";import{FormMode as l,FormVariant as ge,IconSize as D,AnalyticsId as ve,AVERAGE_CHARACTER_WIDTH_PX as Ce}from"./constants.js";import{useBreakpoint as xe,Breakpoint as _e}from"./hooks/useBreakpoint.js";import{useUuid as Ee}from"./hooks/useUuid.js";import{getColor as F}from"./theme/currys/color.js";import{E as ye}from"./ErrorWrapper.js";import{Icon as ke}from"./components/Icons/Icon.js";import{a as we}from"./Label.js";import{M as Ie}from"./MaxCharacters.js";import t from"./components/Input/styles.module.scss";var Ne=(e=>(e.text="text",e.number="number",e.email="email",e.password="password",e.search="search",e.tel="tel",e.url="url",e.date="date",e.time="time",e))(Ne||{});const Re=(e,u,f)=>{const o=u?"1.5rem":"2rem",b=u?`${f}px`:"0px",d="4px";return`calc(${e*Ce}px + ${o} + ${b} + ${d})`},M=r.forwardRef((e,u)=>{const{className:f,defaultValue:o,placeholder:b,type:d="text",name:z,transparent:B=!1,icon:c,iconRight:h,inputId:P,inputWrapperRef:U,mode:i=l.onwhite,baseIncrementValue:_,variant:H,label:O,error:X,errorText:E,testId:q,disabled:s,readOnly:G,autoComplete:L,afterInputChildren:j,rightOfInput:J,width:y,required:Q,onChange:k,onKeyDown:w,autoFocus:Y,maxCharacters:m,maxText:Z,...T}=e,ee=xe(),p=A(null),I=Ee(P),[N,R]=K(o||""),[te,ne]=K(void 0),g=A(!1),W=/^[0-9]$/;he(()=>{R(o||"")},[o]);const re=i===l.ondark,ae=i===l.onblueberry,oe=!!m&&N.toString().length>m,v=i===l.oninvalid||!!E||!!X||oe,C=H===ge.bigform,ie=B&&i!==l.ondark&&!v,ce=x(t["input-wrapper"],f),se=x(t["input-container"],{[t["input-container--transparent"]]:ie,[t["input-container--on-blueberry"]]:ae,[t["input-container--on-dark"]]:re,[t["input-container--invalid"]]:v,[t["input-container--bigform"]]:C,[t["input-container--disabled"]]:s,[t["input-container--with-icon"]]:c}),le=x(t["input-container__input"],{[t["input-container__input--bigform"]]:C,[t["input-container__input--disabled"]]:s}),ue=s?F("neutral",500):F("black"),S=ee===_e.xs||!C?D.XSmall:D.Small,V=()=>c!==void 0?r.createElement(ke,{className:t["input-container__input__icon"],color:ue,size:S,svgIcon:c}):null,de=n=>{if(p&&p.current&&c){const a=h?0:1;p.current.children[a].focus(),e.onClick&&e.onClick(n)}},me=n=>{const a=pe(n);k&&k(n),R(a),ne(a)},pe=n=>{if(typeof _>"u"||d!=="number")return n.target.value;const a=Number(n.target.value);return!te&&!g.current&&(a===1||a===-1)&&(n.target.value=_+""),n.target.value},fe=n=>{W.test(n.key)&&(g.current=!0),w&&w(n)},be=n=>{W.test(n.key)&&(g.current=!1)},$=y?Re(y,!!c,S):void 0;return r.createElement(ye,{errorText:E},r.createElement("div",{"data-testid":q,"data-analyticsid":ve.Input,className:ce,ref:U},we(O,I,i,s),r.createElement("div",{className:t["content-wrapper"]},r.createElement("div",{onClick:de,ref:p,className:se,style:{maxWidth:$}},!h&&V(),r.createElement("input",{onChange:me,onKeyDown:fe,onKeyUp:be,name:z,type:d,defaultValue:o,id:I,className:le,ref:u,"aria-labelledby":e["aria-labelledby"]??void 0,"aria-describedby":e["aria-describedby"]??void 0,"aria-invalid":!!v,disabled:s,placeholder:b,readOnly:G,autoComplete:L||"off",required:Q,autoFocus:Y,...T}),h&&V()),r.createElement("div",{className:t["content-wrapper__right-of-input"]},J)),m&&r.createElement(Ie,{maxCharacters:m,length:N.toString().length,maxText:Z,mode:i,maxWidth:$}),j))});M.displayName="Input";const Ue=M;export{Ue as I,Ne as a};
 //# sourceMappingURL=Input.js.map

package/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'name'\n    | 'placeholder'\n    | 'defaultValue'\n    | 'required'\n    | 'value'\n    | 'min'\n    | 'max'\n    | 'aria-describedby'\n    | 'aria-labelledby'\n    | 'onBlur'\n    | 'onClick'\n    | 'onChange'\n    | 'onFocus'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  variant?: keyof typeof FormVariant;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue = '',\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputId,\n    inputWrapperRef,\n    mode = FormMode.onwhite,\n    baseIncrementValue,\n    variant,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n  const inputIdState = useUuid(inputId);\n  const [input, setInput] = useState(defaultValue);\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const numRegex = /^[0-9]$/;\n\n  useEffect(() => {\n    setInput(defaultValue);\n  }, [defaultValue]);\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const bigForm = variant === FormVariant.bigform;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--bigform']]: bigForm,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--bigform']]: bigForm,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    return icon !== undefined ? (\n      <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />\n    ) : null;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRef && inputContainerRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      props.onClick && props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    onKeyDown && onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, mode as FormMode, disabled)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div onClick={handleClick} ref={inputContainerRef} className={inputContainer} style={{ maxWidth }}>\n            {!iconRight && renderIcon()}\n            <input\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputIdState}\n              className={inputClass}\n              ref={ref}\n              aria-labelledby={props['aria-labelledby'] ?? undefined}\n              aria-describedby={props['aria-describedby'] ?? undefined}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...rest}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters maxCharacters={maxCharacters} length={input.toString().length} maxText={maxText} mode={mode} maxWidth={maxWidth} />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","name","transparent","icon","iconRight","inputId","inputWrapperRef","mode","FormMode","baseIncrementValue","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterInputChildren","rightOfInput","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","inputContainerRef","useRef","inputIdState","useUuid","input","setInput","useState","prevValue","setPrevValue","numKeyPressed","numRegex","useEffect","onDark","onBlueberry","maxCharactersExceeded","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","inputContainer","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","e","selectedChild","handleChange","newValue","getIncrementValue","valueAsNumber","handleKeyDown","handleKeyUp","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Input$1"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'name'\n    | 'placeholder'\n    | 'defaultValue'\n    | 'required'\n    | 'value'\n    | 'min'\n    | 'max'\n    | 'aria-describedby'\n    | 'aria-labelledby'\n    | 'onBlur'\n    | 'onClick'\n    | 'onChange'\n    | 'onFocus'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  variant?: keyof typeof FormVariant;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputId,\n    inputWrapperRef,\n    mode = FormMode.onwhite,\n    baseIncrementValue,\n    variant,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n  const inputIdState = useUuid(inputId);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const numRegex = /^[0-9]$/;\n\n  useEffect(() => {\n    setInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const bigForm = variant === FormVariant.bigform;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--bigform']]: bigForm,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--bigform']]: bigForm,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    return icon !== undefined ? (\n      <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />\n    ) : null;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRef && inputContainerRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      props.onClick && props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    onKeyDown && onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, mode as FormMode, disabled)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div onClick={handleClick} ref={inputContainerRef} className={inputContainer} style={{ maxWidth }}>\n            {!iconRight && renderIcon()}\n            <input\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputIdState}\n              className={inputClass}\n              ref={ref}\n              aria-labelledby={props['aria-labelledby'] ?? undefined}\n              aria-describedby={props['aria-describedby'] ?? undefined}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...rest}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters maxCharacters={maxCharacters} length={input.toString().length} maxText={maxText} mode={mode} maxWidth={maxWidth} />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","name","transparent","icon","iconRight","inputId","inputWrapperRef","mode","FormMode","baseIncrementValue","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterInputChildren","rightOfInput","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","inputContainerRef","useRef","inputIdState","useUuid","input","setInput","useState","prevValue","setPrevValue","numKeyPressed","numRegex","useEffect","onDark","onBlueberry","maxCharactersExceeded","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","inputContainer","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","e","selectedChild","handleChange","newValue","getIncrementValue","valueAsNumber","handleKeyDown","handleKeyUp","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Input$1"],"mappings":"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"}

package/Textarea.js

@@ -1,2 +1,2 @@
-import o,{useState as A,useRef as Y,useEffect as M}from"react";import h from"classnames";import{FormMode as m,AnalyticsId as Z,AVERAGE_CHARACTER_WIDTH_PX as ee}from"./constants.js";import{u as te}from"./uuid.js";import{E as ae}from"./ErrorWrapper.js";import{a as re}from"./Label.js";import{M as ne}from"./MaxCharacters.js";import t from"./components/Textarea/styles.module.scss";const oe=r=>{const u="2rem",n="16px",p="4px";return`calc(${r*ee}px + ${u} + ${n} + ${p})`},N=o.forwardRef((r,u)=>{const{maxCharacters:n,maxText:p,width:f,testId:$,defaultValue:i="",marginBottom:B,transparent:k,mode:s=m.onwhite,label:L,textareaId:b=te(),minRows:g=3,maxRows:c=10,grow:w,errorText:C,autoFocus:S,disabled:E,name:D,autoComplete:T,placeholder:F,readOnly:V,required:q,onChange:y,...z}=r,[G,R]=A(g),[v,W]=A(i),l=Y(null);M(()=>{W(i)},[i]);const _=e=>{const d=e.rows;e.rows=g;const a=Math.floor((e.scrollHeight-16)/28);a===d&&(e.rows=a),a>=c&&(e.rows=c,e.scrollTop=e.scrollHeight),a<c?R(a):R(c)},O=s===m.ondark,P=s===m.onblueberry,X=!!n&&v.toString().length>n,H=s===m.oninvalid||!!C||X,j=h(t.textarea,{[t["textarea--gutterBottom"]]:B}),J=h(t["input-container"],{[t["input-container--transparent"]]:k,[t["input-container--on-blueberry"]]:P,[t["input-container--on-dark"]]:O,[t["input-container--invalid"]]:H,[t["input-container--disabled"]]:r.disabled}),K=h(t["input-container__input"],{[t["input-container__input--disabled"]]:r.disabled});M(()=>{var e,x,d;if(w&&((e=l.current)!=null&&e.children)&&((x=l.current)!=null&&x.children[0])){const a=(d=l.current)==null?void 0:d.children[0];_(a)}},[]);const Q=e=>{w&&_(e.target),W(e.target.value)},U=e=>{y&&y(e),Q(e)},I=f?oe(f):void 0;return o.createElement(ae,{errorText:C},o.createElement("div",{"data-testid":$,"data-analyticsid":Z.Textarea,className:j},re(L,b,s,E),o.createElement("div",{className:J,ref:l,style:{maxWidth:I}},o.createElement("textarea",{rows:G,defaultValue:i,id:b,className:K,ref:u,"aria-describedby":r["aria-describedby"]??void 0,"aria-invalid":!!H,autoFocus:S,disabled:E,name:D,autoComplete:T||void 0,placeholder:F,readOnly:V,required:q,onChange:U,...z})),n&&o.createElement(ne,{maxCharacters:n,length:v.toString().length,maxText:p,mode:s,maxWidth:I})))});N.displayName="Textarea";const xe=N;export{xe as T};
+import o,{useState as A,useRef as Y,useEffect as M}from"react";import h from"classnames";import{FormMode as m,AnalyticsId as Z,AVERAGE_CHARACTER_WIDTH_PX as ee}from"./constants.js";import{u as te}from"./uuid.js";import{E as ae}from"./ErrorWrapper.js";import{a as re}from"./Label.js";import{M as ne}from"./MaxCharacters.js";import t from"./components/Textarea/styles.module.scss";const oe=r=>{const u="2rem",n="16px",p="4px";return`calc(${r*ee}px + ${u} + ${n} + ${p})`},N=o.forwardRef((r,u)=>{const{maxCharacters:n,maxText:p,width:f,testId:$,defaultValue:i,marginBottom:B,transparent:k,mode:s=m.onwhite,label:L,textareaId:b=te(),minRows:g=3,maxRows:c=10,grow:w,errorText:C,autoFocus:S,disabled:E,name:D,autoComplete:T,placeholder:F,readOnly:V,required:q,onChange:y,...z}=r,[G,R]=A(g),[v,W]=A(i||""),l=Y(null);M(()=>{W(i||"")},[i]);const _=e=>{const d=e.rows;e.rows=g;const a=Math.floor((e.scrollHeight-16)/28);a===d&&(e.rows=a),a>=c&&(e.rows=c,e.scrollTop=e.scrollHeight),a<c?R(a):R(c)},O=s===m.ondark,P=s===m.onblueberry,X=!!n&&v.toString().length>n,H=s===m.oninvalid||!!C||X,j=h(t.textarea,{[t["textarea--gutterBottom"]]:B}),J=h(t["input-container"],{[t["input-container--transparent"]]:k,[t["input-container--on-blueberry"]]:P,[t["input-container--on-dark"]]:O,[t["input-container--invalid"]]:H,[t["input-container--disabled"]]:r.disabled}),K=h(t["input-container__input"],{[t["input-container__input--disabled"]]:r.disabled});M(()=>{var e,x,d;if(w&&((e=l.current)!=null&&e.children)&&((x=l.current)!=null&&x.children[0])){const a=(d=l.current)==null?void 0:d.children[0];_(a)}},[]);const Q=e=>{w&&_(e.target),W(e.target.value)},U=e=>{y&&y(e),Q(e)},I=f?oe(f):void 0;return o.createElement(ae,{errorText:C},o.createElement("div",{"data-testid":$,"data-analyticsid":Z.Textarea,className:j},re(L,b,s,E),o.createElement("div",{className:J,ref:l,style:{maxWidth:I}},o.createElement("textarea",{rows:G,defaultValue:i,id:b,className:K,ref:u,"aria-describedby":r["aria-describedby"]??void 0,"aria-invalid":!!H,autoFocus:S,disabled:E,name:D,autoComplete:T||void 0,placeholder:F,readOnly:V,required:q,onChange:U,...z})),n&&o.createElement(ne,{maxCharacters:n,length:v.toString().length,maxText:p,mode:s,maxWidth:I})))});N.displayName="Textarea";const xe=N;export{xe as T};
 //# sourceMappingURL=Textarea.js.map

package/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue = '',\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete,\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue);\n  const referanse = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue);\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode, disabled)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","errorText","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Textarea$1"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete,\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode, disabled)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","errorText","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Textarea$1"],"mappings":"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"}

package/components/Button/Button.d.ts

@@ -28,6 +28,8 @@ export interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttri
     htmlMarkup?: ButtonTags;
     /** Changes the button colors for different backgrounds. */
     mode?: ButtonMode;
+    /** Function that is called when the Button loses focus */
+    onBlur?: () => void;
     /** Function that is called when clicked */
     onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;
     /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */

package/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAqB,MAAM,OAAO,CAAC;AAKjE,OAAO,EAAE,eAAe,EAAE,eAAe,EAAe,MAAM,iBAAiB,CAAC;AAYhF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,aAAa,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,CAAC;AAC9D,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC9C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,GAAG,CAAC;AAExC,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,eAAe,EAAE,cAAc;IACnF,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iGAAiG;IACjG,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oDAAoD;IACpD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACvI,uGAAuG;IACvG,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uDAAuD;IACvD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;CAC9D;AAkCD,QAAA,MAAM,MAAM,2GAkKV,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAqB,MAAM,OAAO,CAAC;AAKjE,OAAO,EAAE,eAAe,EAAE,eAAe,EAAe,MAAM,iBAAiB,CAAC;AAYhF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,aAAa,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,CAAC;AAC9D,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC9C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,GAAG,CAAC;AAExC,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,eAAe,EAAE,cAAc;IACnF,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iGAAiG;IACjG,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oDAAoD;IACpD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACvI,uGAAuG;IACvG,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uDAAuD;IACvD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;CAC9D;AAkCD,QAAA,MAAM,MAAM,2GAqKV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/components/Button/componentdata.json

@@ -1 +1 @@
-{"props":{"ariaLabel":{"defaultValue":null,"description":"Sets the aria-label of the button, use when the button only includes an icon","name":"ariaLabel","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"string"}},"id":{"defaultValue":null,"description":"Gives a unique id to the button","name":"id","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the content of the button.","name":"children","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":true,"type":{"name":"ReactNode"}},"wrapperClassName":{"defaultValue":null,"description":"Adds custom classes to the wrapper element.","name":"wrapperClassName","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"string"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"string"}},"arrow":{"defaultValue":null,"description":"Enables an arrow icon to the right inside the button (Not available in borderless variant)","name":"arrow","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"boolean"}},"concept":{"defaultValue":null,"description":"Changes the intent of the button. Mostly changes the color profile.","name":"concept","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"enum","raw":"ButtonConcept","value":[{"value":"\"normal\""},{"value":"\"destructive\""}]}},"ellipsis":{"defaultValue":null,"description":"Disables text wrapping and enables ellipsis.","name":"ellipsis","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"boolean"}},"fluid":{"defaultValue":null,"description":"Makes the button scale to full width of its parent element.","name":"fluid","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"boolean"}},"htmlMarkup":{"defaultValue":null,"description":"Changes the underlying element of the button.","name":"htmlMarkup","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"enum","raw":"ButtonTags","value":[{"value":"\"button\""},{"value":"\"a\""}]}},"mode":{"defaultValue":null,"description":"Changes the button colors for different backgrounds.","name":"mode","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"enum","raw":"ButtonMode","value":[{"value":"\"onlight\""},{"value":"\"ondark\""}]}},"onClick":{"defaultValue":null,"description":"Function that is called when clicked","name":"onClick","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"((e?: MouseEvent<HTMLElement, MouseEvent> | FormEvent<{}> | KeyboardEvent<HTMLUListElement> | null) => void)"}},"size":{"defaultValue":null,"description":"Changes the button colors for different backgrounds. (Large not available in borderless variant)","name":"size","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"enum","raw":"ButtonSize","value":[{"value":"\"medium\""},{"value":"\"large\""}]}},"variant":{"defaultValue":null,"description":"Changes the visual representation of the button.","name":"variant","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"enum","raw":"ButtonVariant","value":[{"value":"\"fill\""},{"value":"\"outline\""},{"value":"\"borderless\""}]}},"tabIndex":{"defaultValue":null,"description":"Specifies the focus order relative to the other buttons or controls on the page","name":"tabIndex","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"number"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"string"}},"type":{"defaultValue":null,"description":"Button type. Default: button","name":"type","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"enum","raw":"\"button\" | \"submit\" | \"reset\"","value":[{"value":"\"button\""},{"value":"\"submit\""},{"value":"\"reset\""}]}},"autoFocus":{"defaultValue":null,"description":"","name":"autoFocus","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"boolean"}},"disabled":{"defaultValue":null,"description":"","name":"disabled","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"boolean"}},"form":{"defaultValue":null,"description":"","name":"form","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"string"}},"formAction":{"defaultValue":null,"description":"","name":"formAction","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"string"}},"formEncType":{"defaultValue":null,"description":"","name":"formEncType","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"string"}},"formMethod":{"defaultValue":null,"description":"","name":"formMethod","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"string"}},"formNoValidate":{"defaultValue":null,"description":"","name":"formNoValidate","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"boolean"}},"formTarget":{"defaultValue":null,"description":"","name":"formTarget","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"string"}},"name":{"defaultValue":null,"description":"","name":"name","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"string"}},"value":{"defaultValue":null,"description":"","name":"value","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"string | number | string[]"}},"download":{"defaultValue":null,"description":"","name":"download","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"string"}},"href":{"defaultValue":null,"description":"","name":"href","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"string"}},"hrefLang":{"defaultValue":null,"description":"","name":"hrefLang","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"string"}},"media":{"defaultValue":null,"description":"","name":"media","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"string"}},"ping":{"defaultValue":null,"description":"","name":"ping","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"string"}},"rel":{"defaultValue":null,"description":"","name":"rel","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"enum","raw":"AnchorTarget","value":[{"value":"\"_self\""},{"value":"\"_blank\""},{"value":"\"_parent\""},{"value":"\"_top\""}]}},"target":{"defaultValue":null,"description":"","name":"target","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"string"}},"referrerPolicy":{"defaultValue":null,"description":"","name":"referrerPolicy","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"enum","raw":"\"\" | \"same-origin\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\"","value":[{"value":"\"\""},{"value":"\"same-origin\""},{"value":"\"no-referrer\""},{"value":"\"no-referrer-when-downgrade\""},{"value":"\"origin\""},{"value":"\"origin-when-cross-origin\""},{"value":"\"strict-origin\""},{"value":"\"strict-origin-when-cross-origin\""},{"value":"\"unsafe-url\""}]}},"aria-activedescendant":{"defaultValue":null,"description":"Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.","name":"aria-activedescendant","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-atomic":{"defaultValue":null,"description":"Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.","name":"aria-atomic","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-autocomplete":{"defaultValue":null,"description":"Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.","name":"aria-autocomplete","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"inline\" | \"list\" | \"both\"","value":[{"value":"\"none\""},{"value":"\"inline\""},{"value":"\"list\""},{"value":"\"both\""}]}},"aria-busy":{"defaultValue":null,"description":"Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.","name":"aria-busy","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-checked":{"defaultValue":null,"description":"Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.","name":"aria-checked","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"boolean | \"true\" | \"false\" | \"mixed\""}},"aria-colcount":{"defaultValue":null,"description":"Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.","name":"aria-colcount","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-colindex":{"defaultValue":null,"description":"Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.","name":"aria-colindex","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-colspan":{"defaultValue":null,"description":"Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.","name":"aria-colspan","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-controls":{"defaultValue":null,"description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.","name":"aria-controls","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-current":{"defaultValue":null,"description":"Indicates the element that represents the current item within a container or set of related elements.","name":"aria-current","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"boolean | \"true\" | \"false\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\""}},"aria-describedby":{"defaultValue":null,"description":"Identifies the element (or elements) that describes the object.\n@see aria-labelledby","name":"aria-describedby","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-details":{"defaultValue":null,"description":"Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.","name":"aria-details","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-disabled":{"defaultValue":null,"description":"Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.","name":"aria-disabled","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-dropeffect":{"defaultValue":null,"description":"Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1","name":"aria-dropeffect","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"copy\" | \"execute\" | \"link\" | \"move\" | \"popup\"","value":[{"value":"\"none\""},{"value":"\"copy\""},{"value":"\"execute\""},{"value":"\"link\""},{"value":"\"move\""},{"value":"\"popup\""}]}},"aria-errormessage":{"defaultValue":null,"description":"Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.","name":"aria-errormessage","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-expanded":{"defaultValue":null,"description":"Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.","name":"aria-expanded","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-flowto":{"defaultValue":null,"description":"Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.","name":"aria-flowto","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-grabbed":{"defaultValue":null,"description":"Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n@deprecated in ARIA 1.1","name":"aria-grabbed","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-haspopup":{"defaultValue":null,"description":"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.","name":"aria-haspopup","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"boolean | \"true\" | \"false\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\""}},"aria-hidden":{"defaultValue":null,"description":"Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.","name":"aria-hidden","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-invalid":{"defaultValue":null,"description":"Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.","name":"aria-invalid","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\""}},"aria-keyshortcuts":{"defaultValue":null,"description":"Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.","name":"aria-keyshortcuts","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-label":{"defaultValue":null,"description":"Defines a string value that labels the current element.\n@see aria-labelledby.","name":"aria-label","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-labelledby":{"defaultValue":null,"description":"Identifies the element (or elements) that labels the current element.\n@see aria-describedby.","name":"aria-labelledby","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-level":{"defaultValue":null,"description":"Defines the hierarchical level of an element within a structure.","name":"aria-level","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-live":{"defaultValue":null,"description":"Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.","name":"aria-live","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"enum","raw":"\"off\" | \"assertive\" | \"polite\"","value":[{"value":"\"off\""},{"value":"\"assertive\""},{"value":"\"polite\""}]}},"aria-modal":{"defaultValue":null,"description":"Indicates whether an element is modal when displayed.","name":"aria-modal","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-multiline":{"defaultValue":null,"description":"Indicates whether a text box accepts multiple lines of input or only a single line.","name":"aria-multiline","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-multiselectable":{"defaultValue":null,"description":"Indicates that the user may select more than one item from the current selectable descendants.","name":"aria-multiselectable","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-orientation":{"defaultValue":null,"description":"Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.","name":"aria-orientation","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},"aria-owns":{"defaultValue":null,"description":"Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.","name":"aria-owns","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-placeholder":{"defaultValue":null,"description":"Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.","name":"aria-placeholder","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-posinset":{"defaultValue":null,"description":"Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.","name":"aria-posinset","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-pressed":{"defaultValue":null,"description":"Indicates the current \"pressed\" state of toggle buttons.\n@see aria-checked\n@see aria-selected.","name":"aria-pressed","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"boolean | \"true\" | \"false\" | \"mixed\""}},"aria-readonly":{"defaultValue":null,"description":"Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.","name":"aria-readonly","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-relevant":{"defaultValue":null,"description":"Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.","name":"aria-relevant","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"enum","raw":"\"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text\" | \"text additions\" | \"text removals\"","value":[{"value":"\"additions\""},{"value":"\"additions removals\""},{"value":"\"additions text\""},{"value":"\"all\""},{"value":"\"removals\""},{"value":"\"removals additions\""},{"value":"\"removals text\""},{"value":"\"text\""},{"value":"\"text additions\""},{"value":"\"text removals\""}]}},"aria-required":{"defaultValue":null,"description":"Indicates that user input is required on the element before a form may be submitted.","name":"aria-required","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-roledescription":{"defaultValue":null,"description":"Defines a human-readable, author-localized description for the role of an element.","name":"aria-roledescription","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-rowcount":{"defaultValue":null,"description":"Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.","name":"aria-rowcount","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-rowindex":{"defaultValue":null,"description":"Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.","name":"aria-rowindex","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-rowspan":{"defaultValue":null,"description":"Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.","name":"aria-rowspan","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-selected":{"defaultValue":null,"description":"Indicates the current \"selected\" state of various widgets.\n@see aria-checked\n@see aria-pressed.","name":"aria-selected","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-setsize":{"defaultValue":null,"description":"Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.","name":"aria-setsize","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-sort":{"defaultValue":null,"description":"Indicates if items in a table or grid are sorted in ascending or descending order.","name":"aria-sort","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"ascending\" | \"descending\" | \"other\"","value":[{"value":"\"none\""},{"value":"\"ascending\""},{"value":"\"descending\""},{"value":"\"other\""}]}},"aria-valuemax":{"defaultValue":null,"description":"Defines the maximum allowed value for a range widget.","name":"aria-valuemax","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-valuemin":{"defaultValue":null,"description":"Defines the minimum allowed value for a range widget.","name":"aria-valuemin","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-valuenow":{"defaultValue":null,"description":"Defines the current value for a range widget.\n@see aria-valuetext.","name":"aria-valuenow","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-valuetext":{"defaultValue":null,"description":"Defines the human readable text alternative of aria-valuenow for a range widget.","name":"aria-valuetext","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"ariaLabel":{"defaultValue":null,"description":"Sets the aria-label of the button, use when the button only includes an icon","name":"ariaLabel","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"string"}},"id":{"defaultValue":null,"description":"Gives a unique id to the button","name":"id","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the content of the button.","name":"children","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":true,"type":{"name":"ReactNode"}},"wrapperClassName":{"defaultValue":null,"description":"Adds custom classes to the wrapper element.","name":"wrapperClassName","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"string"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"string"}},"arrow":{"defaultValue":null,"description":"Enables an arrow icon to the right inside the button (Not available in borderless variant)","name":"arrow","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"boolean"}},"concept":{"defaultValue":null,"description":"Changes the intent of the button. Mostly changes the color profile.","name":"concept","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"enum","raw":"ButtonConcept","value":[{"value":"\"normal\""},{"value":"\"destructive\""}]}},"ellipsis":{"defaultValue":null,"description":"Disables text wrapping and enables ellipsis.","name":"ellipsis","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"boolean"}},"fluid":{"defaultValue":null,"description":"Makes the button scale to full width of its parent element.","name":"fluid","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"boolean"}},"htmlMarkup":{"defaultValue":null,"description":"Changes the underlying element of the button.","name":"htmlMarkup","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"enum","raw":"ButtonTags","value":[{"value":"\"button\""},{"value":"\"a\""}]}},"mode":{"defaultValue":null,"description":"Changes the button colors for different backgrounds.","name":"mode","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"enum","raw":"ButtonMode","value":[{"value":"\"onlight\""},{"value":"\"ondark\""}]}},"onBlur":{"defaultValue":null,"description":"Function that is called when the Button loses focus","name":"onBlur","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"(() => void)"}},"onClick":{"defaultValue":null,"description":"Function that is called when clicked","name":"onClick","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"((e?: MouseEvent<HTMLElement, MouseEvent> | FormEvent<{}> | KeyboardEvent<HTMLUListElement> | null) => void)"}},"size":{"defaultValue":null,"description":"Changes the button colors for different backgrounds. (Large not available in borderless variant)","name":"size","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"enum","raw":"ButtonSize","value":[{"value":"\"medium\""},{"value":"\"large\""}]}},"variant":{"defaultValue":null,"description":"Changes the visual representation of the button.","name":"variant","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"enum","raw":"ButtonVariant","value":[{"value":"\"fill\""},{"value":"\"outline\""},{"value":"\"borderless\""}]}},"tabIndex":{"defaultValue":null,"description":"Specifies the focus order relative to the other buttons or controls on the page","name":"tabIndex","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"number"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"string"}},"type":{"defaultValue":null,"description":"Button type. Default: button","name":"type","parent":{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"src/components/Button/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"enum","raw":"\"button\" | \"submit\" | \"reset\"","value":[{"value":"\"button\""},{"value":"\"submit\""},{"value":"\"reset\""}]}},"autoFocus":{"defaultValue":null,"description":"","name":"autoFocus","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"boolean"}},"disabled":{"defaultValue":null,"description":"","name":"disabled","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"boolean"}},"form":{"defaultValue":null,"description":"","name":"form","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"string"}},"formAction":{"defaultValue":null,"description":"","name":"formAction","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"string"}},"formEncType":{"defaultValue":null,"description":"","name":"formEncType","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"string"}},"formMethod":{"defaultValue":null,"description":"","name":"formMethod","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"string"}},"formNoValidate":{"defaultValue":null,"description":"","name":"formNoValidate","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"boolean"}},"formTarget":{"defaultValue":null,"description":"","name":"formTarget","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"string"}},"name":{"defaultValue":null,"description":"","name":"name","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"string"}},"value":{"defaultValue":null,"description":"","name":"value","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLButtonProps"}],"required":false,"type":{"name":"string | number | string[]"}},"download":{"defaultValue":null,"description":"","name":"download","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"string"}},"href":{"defaultValue":null,"description":"","name":"href","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"string"}},"hrefLang":{"defaultValue":null,"description":"","name":"hrefLang","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"string"}},"media":{"defaultValue":null,"description":"","name":"media","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"string"}},"ping":{"defaultValue":null,"description":"","name":"ping","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"string"}},"rel":{"defaultValue":null,"description":"","name":"rel","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"enum","raw":"AnchorTarget","value":[{"value":"\"_self\""},{"value":"\"_blank\""},{"value":"\"_parent\""},{"value":"\"_top\""}]}},"target":{"defaultValue":null,"description":"","name":"target","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"string"}},"referrerPolicy":{"defaultValue":null,"description":"","name":"referrerPolicy","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"enum","raw":"\"\" | \"same-origin\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\"","value":[{"value":"\"\""},{"value":"\"same-origin\""},{"value":"\"no-referrer\""},{"value":"\"no-referrer-when-downgrade\""},{"value":"\"origin\""},{"value":"\"origin-when-cross-origin\""},{"value":"\"strict-origin\""},{"value":"\"strict-origin-when-cross-origin\""},{"value":"\"unsafe-url\""}]}},"aria-activedescendant":{"defaultValue":null,"description":"Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.","name":"aria-activedescendant","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-atomic":{"defaultValue":null,"description":"Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.","name":"aria-atomic","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-autocomplete":{"defaultValue":null,"description":"Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.","name":"aria-autocomplete","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"inline\" | \"list\" | \"both\"","value":[{"value":"\"none\""},{"value":"\"inline\""},{"value":"\"list\""},{"value":"\"both\""}]}},"aria-busy":{"defaultValue":null,"description":"Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.","name":"aria-busy","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-checked":{"defaultValue":null,"description":"Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.","name":"aria-checked","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"boolean | \"true\" | \"false\" | \"mixed\""}},"aria-colcount":{"defaultValue":null,"description":"Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.","name":"aria-colcount","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-colindex":{"defaultValue":null,"description":"Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.","name":"aria-colindex","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-colspan":{"defaultValue":null,"description":"Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.","name":"aria-colspan","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-controls":{"defaultValue":null,"description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.","name":"aria-controls","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-current":{"defaultValue":null,"description":"Indicates the element that represents the current item within a container or set of related elements.","name":"aria-current","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"boolean | \"true\" | \"false\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\""}},"aria-describedby":{"defaultValue":null,"description":"Identifies the element (or elements) that describes the object.\n@see aria-labelledby","name":"aria-describedby","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-details":{"defaultValue":null,"description":"Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.","name":"aria-details","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-disabled":{"defaultValue":null,"description":"Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.","name":"aria-disabled","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-dropeffect":{"defaultValue":null,"description":"Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1","name":"aria-dropeffect","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"copy\" | \"execute\" | \"link\" | \"move\" | \"popup\"","value":[{"value":"\"none\""},{"value":"\"copy\""},{"value":"\"execute\""},{"value":"\"link\""},{"value":"\"move\""},{"value":"\"popup\""}]}},"aria-errormessage":{"defaultValue":null,"description":"Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.","name":"aria-errormessage","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-expanded":{"defaultValue":null,"description":"Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.","name":"aria-expanded","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-flowto":{"defaultValue":null,"description":"Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.","name":"aria-flowto","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-grabbed":{"defaultValue":null,"description":"Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n@deprecated in ARIA 1.1","name":"aria-grabbed","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-haspopup":{"defaultValue":null,"description":"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.","name":"aria-haspopup","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"boolean | \"true\" | \"false\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\""}},"aria-hidden":{"defaultValue":null,"description":"Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.","name":"aria-hidden","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-invalid":{"defaultValue":null,"description":"Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.","name":"aria-invalid","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\""}},"aria-keyshortcuts":{"defaultValue":null,"description":"Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.","name":"aria-keyshortcuts","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-label":{"defaultValue":null,"description":"Defines a string value that labels the current element.\n@see aria-labelledby.","name":"aria-label","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-labelledby":{"defaultValue":null,"description":"Identifies the element (or elements) that labels the current element.\n@see aria-describedby.","name":"aria-labelledby","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-level":{"defaultValue":null,"description":"Defines the hierarchical level of an element within a structure.","name":"aria-level","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-live":{"defaultValue":null,"description":"Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.","name":"aria-live","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"enum","raw":"\"off\" | \"assertive\" | \"polite\"","value":[{"value":"\"off\""},{"value":"\"assertive\""},{"value":"\"polite\""}]}},"aria-modal":{"defaultValue":null,"description":"Indicates whether an element is modal when displayed.","name":"aria-modal","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-multiline":{"defaultValue":null,"description":"Indicates whether a text box accepts multiple lines of input or only a single line.","name":"aria-multiline","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-multiselectable":{"defaultValue":null,"description":"Indicates that the user may select more than one item from the current selectable descendants.","name":"aria-multiselectable","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-orientation":{"defaultValue":null,"description":"Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.","name":"aria-orientation","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},"aria-owns":{"defaultValue":null,"description":"Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.","name":"aria-owns","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-placeholder":{"defaultValue":null,"description":"Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.","name":"aria-placeholder","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-posinset":{"defaultValue":null,"description":"Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.","name":"aria-posinset","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-pressed":{"defaultValue":null,"description":"Indicates the current \"pressed\" state of toggle buttons.\n@see aria-checked\n@see aria-selected.","name":"aria-pressed","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"boolean | \"true\" | \"false\" | \"mixed\""}},"aria-readonly":{"defaultValue":null,"description":"Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.","name":"aria-readonly","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-relevant":{"defaultValue":null,"description":"Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.","name":"aria-relevant","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"enum","raw":"\"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text\" | \"text additions\" | \"text removals\"","value":[{"value":"\"additions\""},{"value":"\"additions removals\""},{"value":"\"additions text\""},{"value":"\"all\""},{"value":"\"removals\""},{"value":"\"removals additions\""},{"value":"\"removals text\""},{"value":"\"text\""},{"value":"\"text additions\""},{"value":"\"text removals\""}]}},"aria-required":{"defaultValue":null,"description":"Indicates that user input is required on the element before a form may be submitted.","name":"aria-required","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-roledescription":{"defaultValue":null,"description":"Defines a human-readable, author-localized description for the role of an element.","name":"aria-roledescription","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"aria-rowcount":{"defaultValue":null,"description":"Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.","name":"aria-rowcount","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-rowindex":{"defaultValue":null,"description":"Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.","name":"aria-rowindex","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-rowspan":{"defaultValue":null,"description":"Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.","name":"aria-rowspan","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-selected":{"defaultValue":null,"description":"Indicates the current \"selected\" state of various widgets.\n@see aria-checked\n@see aria-pressed.","name":"aria-selected","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"Booleanish"}},"aria-setsize":{"defaultValue":null,"description":"Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.","name":"aria-setsize","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-sort":{"defaultValue":null,"description":"Indicates if items in a table or grid are sorted in ascending or descending order.","name":"aria-sort","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"ascending\" | \"descending\" | \"other\"","value":[{"value":"\"none\""},{"value":"\"ascending\""},{"value":"\"descending\""},{"value":"\"other\""}]}},"aria-valuemax":{"defaultValue":null,"description":"Defines the maximum allowed value for a range widget.","name":"aria-valuemax","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-valuemin":{"defaultValue":null,"description":"Defines the minimum allowed value for a range widget.","name":"aria-valuemin","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-valuenow":{"defaultValue":null,"description":"Defines the current value for a range widget.\n@see aria-valuetext.","name":"aria-valuenow","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"number"}},"aria-valuetext":{"defaultValue":null,"description":"Defines the human readable text alternative of aria-valuenow for a range widget.","name":"aria-valuetext","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}}}}

package/components/Slider/Slider.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 export type SliderStep = {
     label?: number | string;
-    /** Start emojicode with &# - otherwise it will render as a regular string */
     emojiUniCode?: string;
 };
 interface SliderProps {

package/components/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgC3D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,wCAAwC;IACxC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2RxC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgC3D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,wCAAwC;IACxC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA4QxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/components/Slider/index.js

@@ -1,2 +1,2 @@
-import a,{useState as T,useRef as U,useEffect as E}from"react";import b from"classnames";import{AnalyticsId as G}from"../../constants.js";import{useSize as J}from"../../hooks/useSize.js";import{useUuid as S}from"../../hooks/useUuid.js";import{getAriaLabelAttributes as Q}from"../../utils/accessibility.js";import{T as Y}from"../../Title.js";import o from"./styles.module.scss";import"../../utils/debounce.js";import"../../uuid.js";import"../../utils/environment.js";import"../Title/styles.module.scss";const Z=(m,v,l)=>{const[_,n]=T(m),h=r=>{r>l?n(l):r<v?n(v):n(r)};return E(()=>{n((l-v)/2+v)},[v,l]),[_,h]},x=({title:m,ariaLabel:v,labelLeft:l,labelRight:_,disabled:n=!1,onChange:h,steps:r,step:p=1,minValue:i=0,maxValue:s=r?r.length-1:100,testId:$})=>{const[A,I]=T(!1),[d,f]=Z((s-i)/2+i,i,s),g=S(),y=S(),w=S(),j=U(null),N=U(null),{width:C}=J(j)||{width:0},M=s/10;E(()=>{const e=()=>{I(!1)};return document.addEventListener("pointerup",e),()=>{document.removeEventListener("pointerup",e)}},[]);const D=e=>{var R;const t=((R=j.current)==null?void 0:R.getBoundingClientRect().x)??0,c=(e-t)/C,k=s-i;let u=c*k+i;return u=Math.round(u/p)*p,u=Math.max(i,Math.min(s,u)),u};E(()=>{const e=t=>{if(!n&&A){const c=D(t.clientX);f(c)}};return document.addEventListener("pointermove",e),()=>{document.removeEventListener("pointermove",e)}},[A]),E(()=>{!n&&h&&h(d)},[d]);const B=e=>{if(n)return;let t=!1;switch(e.key){case"ArrowLeft":case"ArrowDown":f(d-p),t=!0;break;case"PageDown":f(d-M),t=!0;break;case"ArrowRight":case"ArrowUp":f(d+p),t=!0;break;case"PageUp":f(d+M),t=!0;break;case"Home":f(i),t=!0;break;case"End":f(s),t=!0;break}t&&(e.preventDefault(),e.stopPropagation())},X=e=>{var c;if(n)return;const t=D(e.clientX);f(t),(c=N.current)==null||c.focus()},z=e=>{var t;n||(I(!0),e.preventDefault(),e.stopPropagation(),(t=N.current)==null||t.focus())},K=s!==i?C/(s-i)*(d-i):0,W=()=>{const e=r?Math.round((d-i)/p):null;if(r&&e!==null&&e>=0&&e<r.length){const t=r[e],c=t.emojiUniCode,k=c?L(c):void 0,u=typeof t.label<"u"?t.label.toString():void 0;return k&&u?`${k} ${u}`:k||u}},H=Q({label:v,id:(()=>{if(m&&l&&_)return[g,y,w].join(" ");if(m&&l)return[g,y].join(" ");if(m&&_)return[g,w].join(" ");if(m)return g})(),prefer:"label"}),P=(e,t)=>({left:`${e/(t-1)*100}%`}),L=e=>{try{if(/^&#\d+/.test(e)){const c=e.replace(/^&#/,"");return String.fromCodePoint(parseInt(c,16))}else return e}catch{return e}},O=()=>a.createElement("div",{className:o["slider__emoji-container"]},r==null?void 0:r.map((e,t)=>e.emojiUniCode&&a.createElement("div",{"aria-hidden":!0,key:"emoji"+t,className:o.slider__emoji,style:P(t,r.length)},L(e.emojiUniCode)))),q=()=>r==null?void 0:r.map((e,t)=>a.createElement("div",{key:"step"+t,className:o.slider__track__step,style:P(t,r.length)})),F=()=>a.createElement("div",{className:o["slider__value-container"]},r==null?void 0:r.map((e,t)=>typeof e.label<"u"&&a.createElement("div",{"aria-hidden":!0,key:"label"+t,className:o.slider__value,style:P(t,r.length)},e.label)));return a.createElement("div",{className:o.slider,"data-testid":$,"data-analyticsid":G.Slider},m&&a.createElement(Y,{className:o.slider__title,htmlMarkup:"h3",margin:0,appearance:"title3",id:g},m),a.createElement("div",{className:o["slider__content-container"]},O(),a.createElement("div",{ref:j,className:b(o["slider__track-wrapper"],n&&o["slider__track-wrapper--disabled"]),onClick:X,onPointerDown:z},a.createElement("div",{className:b(o.slider__track,n&&o["slider__track--disabled"])},q()),a.createElement("div",{role:n?void 0:"slider",ref:N,className:b(o.slider__marker,n&&o["slider__marker--disabled"]),style:{left:`${K}px`},onKeyDown:B,"aria-valuenow":d,"aria-valuetext":W(),"aria-valuemin":i,"aria-valuemax":s,tabIndex:n?void 0:0,"aria-disabled":n,...H})),F()),(l||_)&&a.createElement("span",{className:o.slider__options},a.createElement("span",{id:y},l),a.createElement("span",{id:w},_)))},fe=x;export{x as Slider,fe as default};
+import a,{useState as R,useRef as U,useEffect as h}from"react";import S from"classnames";import{AnalyticsId as F}from"../../constants.js";import{useSize as G}from"../../hooks/useSize.js";import{useUuid as j}from"../../hooks/useUuid.js";import{getAriaLabelAttributes as J}from"../../utils/accessibility.js";import{T as Q}from"../../Title.js";import o from"./styles.module.scss";import"../../utils/debounce.js";import"../../uuid.js";import"../../utils/environment.js";import"../Title/styles.module.scss";const Y=(u,f,l)=>{const[v,n]=R(u),E=t=>{t>l?n(l):t<f?n(f):n(t)};return h(()=>{n((l-f)/2+f)},[f,l]),[v,E]},Z=({title:u,ariaLabel:f,labelLeft:l,labelRight:v,disabled:n=!1,onChange:E,steps:t,step:_=1,minValue:i=0,maxValue:s=t?t.length-1:100,testId:$})=>{const[A,I]=R(!1),[d,m]=Y((s-i)/2+i,i,s),k=j(),y=j(),w=j(),N=U(null),b=U(null),{width:M}=G(N)||{width:0},C=s/10;h(()=>{const r=()=>{I(!1)};return document.addEventListener("pointerup",r),()=>{document.removeEventListener("pointerup",r)}},[]);const D=r=>{var L;const e=((L=N.current)==null?void 0:L.getBoundingClientRect().x)??0,c=(r-e)/M,p=s-i;let g=c*p+i;return g=Math.round(g/_)*_,g=Math.max(i,Math.min(s,g)),g};h(()=>{const r=e=>{if(!n&&A){const c=D(e.clientX);m(c)}};return document.addEventListener("pointermove",r),()=>{document.removeEventListener("pointermove",r)}},[A]),h(()=>{!n&&E&&E(d)},[d]);const B=r=>{if(n)return;let e=!1;switch(r.key){case"ArrowLeft":case"ArrowDown":m(d-_),e=!0;break;case"PageDown":m(d-C),e=!0;break;case"ArrowRight":case"ArrowUp":m(d+_),e=!0;break;case"PageUp":m(d+C),e=!0;break;case"Home":m(i),e=!0;break;case"End":m(s),e=!0;break}e&&(r.preventDefault(),r.stopPropagation())},T=r=>{var c;if(n)return;const e=D(r.clientX);m(e),(c=b.current)==null||c.focus()},X=r=>{var e;n||(I(!0),r.preventDefault(),r.stopPropagation(),(e=b.current)==null||e.focus())},z=s!==i?M/(s-i)*(d-i):0,K=()=>{const r=t?Math.round((d-i)/_):null;if(t&&r!==null&&r>=0&&r<t.length){const e=t[r],c=e.emojiUniCode,p=typeof e.label<"u"?e.label.toString():void 0;return c&&p?`${c} ${p}`:c||p}},H=J({label:f,id:(()=>{if(u&&l&&v)return[k,y,w].join(" ");if(u&&l)return[k,y].join(" ");if(u&&v)return[k,w].join(" ");if(u)return k})(),prefer:"label"}),P=(r,e)=>({left:`${r/(e-1)*100}%`}),O=()=>a.createElement("div",{className:o["slider__emoji-container"]},t==null?void 0:t.map((r,e)=>r.emojiUniCode&&a.createElement("div",{"aria-hidden":!0,key:"emoji"+e,className:o.slider__emoji,style:P(e,t.length)},r.emojiUniCode))),W=()=>t==null?void 0:t.map((r,e)=>a.createElement("div",{key:"step"+e,className:o.slider__track__step,style:P(e,t.length)})),q=()=>a.createElement("div",{className:o["slider__value-container"]},t==null?void 0:t.map((r,e)=>typeof r.label<"u"&&a.createElement("div",{"aria-hidden":!0,key:"label"+e,className:o.slider__value,style:P(e,t.length)},r.label)));return a.createElement("div",{className:o.slider,"data-testid":$,"data-analyticsid":F.Slider},u&&a.createElement(Q,{className:o.slider__title,htmlMarkup:"h3",margin:0,appearance:"title3",id:k},u),a.createElement("div",{className:o["slider__content-container"]},O(),a.createElement("div",{ref:N,className:S(o["slider__track-wrapper"],n&&o["slider__track-wrapper--disabled"]),onClick:T,onPointerDown:X},a.createElement("div",{className:S(o.slider__track,n&&o["slider__track--disabled"])},W()),a.createElement("div",{role:n?void 0:"slider",ref:b,className:S(o.slider__marker,n&&o["slider__marker--disabled"]),style:{left:`${z}px`},onKeyDown:B,"aria-valuenow":d,"aria-valuetext":K(),"aria-valuemin":i,"aria-valuemax":s,tabIndex:n?void 0:0,"aria-disabled":n,...H})),q()),(l||v)&&a.createElement("span",{className:o.slider__options},a.createElement("span",{id:y},l),a.createElement("span",{id:w},v)))},me=Z;export{Z as Slider,me as default};
 //# sourceMappingURL=index.js.map

package/components/Slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setValue((max - min) / 2 + min);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  /** Start emojicode with &# - otherwise it will render as a regular string */\n  emojiUniCode?: string;\n};\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** Sets the steps data for the slider*/\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Slider: React.FC<SliderProps> = ({\n  title,\n  ariaLabel,\n  labelLeft,\n  labelRight,\n  disabled = false,\n  onChange,\n  steps,\n  step = 1,\n  minValue = 0,\n  maxValue = steps ? steps.length - 1 : 100,\n  testId,\n}) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [value, setValue] = useSafeNumberValue((maxValue - minValue) / 2 + minValue, minValue, maxValue);\n\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValue(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (!disabled && onChange) {\n      onChange(value);\n    }\n  }, [value]);\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValue(value - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValue(value - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValue(value + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValue(value + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValue(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValue(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValue(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (value - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((value - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const emojiAsText = emojiCode ? safelyReturnEmoji(emojiCode) : undefined;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiAsText && label ? `${emojiAsText} ${label}` : emojiAsText || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPostionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  const safelyReturnEmoji = (code: string): string => {\n    try {\n      const regex = /^&#\\d+/;\n      if (regex.test(code)) {\n        const emojiWithoutRegex = code.replace(/^&#/, '');\n        return String.fromCodePoint(parseInt(emojiWithoutRegex, 16));\n      } else {\n        return code;\n      }\n    } catch (e) {\n      return code;\n    }\n  };\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPostionStyling(index, steps.length)}\n              >\n                {safelyReturnEmoji(step.emojiUniCode)}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPostionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPostionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      <div className={styles['slider__content-container']}>\n        {renderEmojies()}\n        {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div\n          ref={trackRef}\n          className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n          onClick={handleTrackClick}\n          onPointerDown={handlePointerDown}\n        >\n          <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n          <div\n            role={disabled ? undefined : 'slider'}\n            ref={markerRef}\n            className={classNames(styles.slider__marker, disabled && styles['slider__marker--disabled'])}\n            style={{\n              left: `${markerXPos}px`,\n            }}\n            onKeyDown={handleKeyDown}\n            aria-valuenow={value}\n            aria-valuetext={getAriaValueText()}\n            aria-valuemin={minValue}\n            aria-valuemax={maxValue}\n            tabIndex={disabled ? undefined : 0}\n            aria-disabled={disabled}\n            {...ariaLabelAttributes}\n          />\n        </div>\n        {renderStepLabels()}\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","testId","isMoving","setIsMoving","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","largeStep","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","e","handleKeyDown","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","emojiAsText","safelyReturnEmoji","label","ariaLabelAttributes","getAriaLabelAttributes","getXPostionStyling","index","stepsLength","code","emojiWithoutRegex","renderEmojies","React","styles","renderSteps","_step","renderStepLabels","AnalyticsId","Title","classNames","Slider$1"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setValue((max - min) / 2 + min);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** Sets the steps data for the slider*/\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Slider: React.FC<SliderProps> = ({\n  title,\n  ariaLabel,\n  labelLeft,\n  labelRight,\n  disabled = false,\n  onChange,\n  steps,\n  step = 1,\n  minValue = 0,\n  maxValue = steps ? steps.length - 1 : 100,\n  testId,\n}) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [value, setValue] = useSafeNumberValue((maxValue - minValue) / 2 + minValue, minValue, maxValue);\n\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValue(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (!disabled && onChange) {\n      onChange(value);\n    }\n  }, [value]);\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValue(value - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValue(value - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValue(value + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValue(value + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValue(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValue(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValue(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (value - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((value - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPostionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPostionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPostionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPostionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      <div className={styles['slider__content-container']}>\n        {renderEmojies()}\n        {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div\n          ref={trackRef}\n          className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n          onClick={handleTrackClick}\n          onPointerDown={handlePointerDown}\n        >\n          <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n          <div\n            role={disabled ? undefined : 'slider'}\n            ref={markerRef}\n            className={classNames(styles.slider__marker, disabled && styles['slider__marker--disabled'])}\n            style={{\n              left: `${markerXPos}px`,\n            }}\n            onKeyDown={handleKeyDown}\n            aria-valuenow={value}\n            aria-valuetext={getAriaValueText()}\n            aria-valuemin={minValue}\n            aria-valuemax={maxValue}\n            tabIndex={disabled ? undefined : 0}\n            aria-disabled={disabled}\n            {...ariaLabelAttributes}\n          />\n        </div>\n        {renderStepLabels()}\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","testId","isMoving","setIsMoving","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","largeStep","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","handleKeyDown","e","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","label","ariaLabelAttributes","getAriaLabelAttributes","getXPostionStyling","index","stepsLength","renderEmojies","React","styles","renderSteps","_step","renderStepLabels","AnalyticsId","Title","classNames","Slider$1"],"mappings":"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"}

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/helsenorge/designsystem"
   },
   "homepage": "https://helsenorge.design",
-  "version": "5.9.1",
+  "version": "5.10.0",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {