@helsenorge/designsystem-react 2.4.0 → 2.6.0

package/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport panelStyles from './styles.module.scss';\nimport Title, { TitleTags } from '../Title';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport { AnchorTarget, AnalyticsId } from '../../constants';\n\nimport Icon, { IconSize, SvgPathProps } from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ArrowRight from '../Icons/ArrowRight';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport { palette } from '../../theme/palette';\nimport Pencil from '../Icons/Pencil';\nimport Calendar from '../Icons/Calendar';\nimport Watch from '../Icons/Watch';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\n\nexport enum PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n  children?: React.ReactNode;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Displays a status on the left side: defualt normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Changes the visual representation of the panel. */\n  variant?: keyof typeof PanelVariant;\n  /** Url to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Display icon on right */\n  iconRight?: boolean;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content*/\n  contentB?: React.ReactNode | string;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when panel button is clicked  */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Show close button in bottom of Panel Expand */\n  /** @deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */\n  showCloseButtonInExpand?: boolean;\n  /** Layout (see description) */\n  layout?: keyof typeof PanelLayout;\n  /** Clicking anywhere on the container will trigger a click on the panel's button */\n  containerAsButton?: boolean;\n  /** Displays time with icon */\n  time?: string;\n  /** Displays date with icon */\n  date?: string;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Opens or closes the panel */\n  expanded?: boolean;\n  /** Called when panel is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    children,\n    contentA,\n    contentB,\n    className,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    target = '_self',\n    icon,\n    iconRight = false,\n    variant = PanelVariant.fill,\n    status = PanelStatus.normal,\n    statusMessage,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonAriaLabelledById,\n    buttonAriaLabel,\n    layout = PanelLayout.layout2,\n    containerAsButton = false,\n    date,\n    time,\n    noTopBorder,\n    buttonOnClick,\n    buttonHtmlMarkup = 'a',\n    expanded = false,\n    onExpand,\n    renderChildrenWhenClosed = false,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanded);\n  const previousIsExpanded = usePrevious(isExpanded);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    if (expanded !== isExpanded) {\n      setIsExpanded(expanded);\n    }\n  }, [expanded]);\n\n  useEffect(() => {\n    if (onExpand && isExpanded !== !!previousIsExpanded) {\n      onExpand(isExpanded);\n    }\n  }, [isExpanded, onExpand]);\n\n  const layout3 = [PanelLayout.layout3a.toString(), PanelLayout.layout3b.toString(), PanelLayout.layout3c.toString()].includes(layout);\n\n  const panelWrapperClass = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const panelContainer = classNames({\n    [panelStyles['panel__container']]: layout === PanelLayout.layout2 && contentB,\n    [panelStyles['panel__container--layout3']]: layout3 && contentB,\n    [panelStyles['panel__container--grow']]: icon,\n  });\n\n  const panelContentLeftClass = classNames({\n    [panelStyles['panel-content-a']]: layout === PanelLayout.layout2,\n    [panelStyles['panel-content-a--layout3a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel-content-a--layout3b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel-content-a--layout3c']]: layout === PanelLayout.layout3c,\n  });\n\n  const panelContentRightClass = classNames({\n    [panelStyles['panel__content-right--layout1']]: contentB && layout === PanelLayout.layout1,\n    [panelStyles['panel__content-right--layout2']]: contentB && layout === PanelLayout.layout2,\n    [panelStyles['panel__content-right--layout3']]: contentB && layout3,\n    [panelStyles['panel__content-right--layout3a']]: contentB && layout === PanelLayout.layout3a,\n    [panelStyles['panel__content-right--layout3b']]: contentB && layout === PanelLayout.layout3b,\n    [panelStyles['panel__content-right--layout3c']]: contentB && layout === PanelLayout.layout3c,\n  });\n\n  const panelContentBClass = classNames(panelStyles['panel-content-b'], {\n    [panelStyles['panel-content-b--layout1']]: layout === PanelLayout.layout1,\n    [panelStyles['panel-content-b--layout3']]: layout3,\n  });\n\n  const panelActionBtnClass = classNames(panelStyles['panel__details-btn']);\n\n  const renderDetailsButton = (): JSX.Element => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : () => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (!!children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const btnContainerClass = classNames(panelStyles['panel__btn-container'], {\n    [panelStyles['panel__btn-container--layout3']]: layout3,\n    [panelStyles['panel__btn-container--padding-top']]: contentB,\n  });\n\n  const renderContent = () => {\n    if (!children) {\n      return null;\n    }\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n      [panelStyles['panel-details--with-icon']]: icon,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div ref={ref} data-testid={testId} className={panelWrapperClass} data-analyticsid={AnalyticsId.Panel}>\n      <div className={panelClasses}>\n        {icon && !iconRight && <div className={panelStyles.panel__icon}>{icon}</div>}\n        <div className={panelContainer}>\n          <div className={panelContentLeftClass}>\n            <StatusText status={status} statusMessage={statusMessage} />\n            {title && (\n              <div className={panelStyles['panel-content-a__title-container']}>\n                <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId}>\n                  {title}\n                </Title>\n                {statusMessage && status === PanelStatus.new && (\n                  <Badge color=\"blueberry\" testId=\"badge-status\" className={panelStyles.panel__badge}>\n                    {statusMessage}\n                  </Badge>\n                )}\n              </div>\n            )}\n            {contentA}\n            {breakpoint >= Breakpoint.lg && <DateTime date={date} time={time} />}\n          </div>\n          <div className={panelContentRightClass}>\n            {contentB && <div className={panelContentBClass}>{contentB}</div>}\n            {(children || url || date || time || buttonOnClick) && (\n              <div className={btnContainerClass}>\n                {breakpoint < Breakpoint.lg && <DateTime date={date} time={time} />}\n                {(children || url || buttonOnClick) && <div className={panelActionBtnClass}>{renderDetailsButton()}</div>}\n              </div>\n            )}\n          </div>\n        </div>\n        {icon && iconRight && <div className={panelStyles['panel__icon--right']}>{icon}</div>}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","React","Icon","IconSize","DateTime","date","time","Calendar","Watch","Panel","props","ref","children","contentA","contentB","className","testId","title","titleHtmlMarkup","url","target","icon","iconRight","variant","buttonText","buttonTextClose","buttonAriaLabelledById","buttonAriaLabel","layout","containerAsButton","noTopBorder","buttonOnClick","buttonHtmlMarkup","expanded","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useState","previousIsExpanded","usePrevious","titleId","useUuid","buttonTextId","breakpoint","useBreakpoint","useEffect","layout3","panelWrapperClass","panelClasses","panelContainer","panelContentLeftClass","panelContentRightClass","panelContentBClass","panelActionBtnClass","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","btnContainerClass","renderContent","panelDetailsClasses","AnalyticsId","Title","Badge","Breakpoint"],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport panelStyles from './styles.module.scss';\nimport Title, { TitleTags } from '../Title';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport { AnchorTarget, AnalyticsId } from '../../constants';\n\nimport Icon, { IconSize, SvgPathProps } from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ArrowRight from '../Icons/ArrowRight';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport { palette } from '../../theme/palette';\nimport Pencil from '../Icons/Pencil';\nimport Calendar from '../Icons/Calendar';\nimport Watch from '../Icons/Watch';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\n\nexport enum PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n  children?: React.ReactNode;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Displays a status on the left side: defualt normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Changes the visual representation of the panel. */\n  variant?: keyof typeof PanelVariant;\n  /** Url to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Display icon on right */\n  iconRight?: boolean;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content*/\n  contentB?: React.ReactNode | string;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when panel button is clicked  */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Show close button in bottom of Panel Expand */\n  /** @deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */\n  showCloseButtonInExpand?: boolean;\n  /** Layout (see description) */\n  layout?: keyof typeof PanelLayout;\n  /** Clicking anywhere on the container will trigger a click on the panel's button */\n  containerAsButton?: boolean;\n  /** Displays time with icon */\n  time?: string;\n  /** Displays date with icon */\n  date?: string;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Opens or closes the panel */\n  expanded?: boolean;\n  /** Called when panel is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    children,\n    contentA,\n    contentB,\n    className,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    target = '_self',\n    icon,\n    iconRight = false,\n    variant = PanelVariant.fill,\n    status = PanelStatus.normal,\n    statusMessage,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonAriaLabelledById,\n    buttonAriaLabel,\n    layout = PanelLayout.layout2,\n    containerAsButton = false,\n    date,\n    time,\n    noTopBorder,\n    buttonOnClick,\n    buttonHtmlMarkup = 'a',\n    expanded = false,\n    onExpand,\n    renderChildrenWhenClosed = false,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanded);\n  const previousIsExpanded = usePrevious(isExpanded);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    if (expanded !== isExpanded) {\n      setIsExpanded(expanded);\n    }\n  }, [expanded]);\n\n  useEffect(() => {\n    if (onExpand && isExpanded !== !!previousIsExpanded) {\n      onExpand(isExpanded);\n    }\n  }, [isExpanded, onExpand]);\n\n  const layout3 = [PanelLayout.layout3a.toString(), PanelLayout.layout3b.toString(), PanelLayout.layout3c.toString()].includes(layout);\n\n  const panelWrapperClass = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const panelContainer = classNames({\n    [panelStyles['panel__container']]: layout === PanelLayout.layout2 && contentB,\n    [panelStyles['panel__container--layout3']]: layout3 && contentB,\n    [panelStyles['panel__container--grow']]: icon,\n  });\n\n  const panelContentLeftClass = classNames({\n    [panelStyles['panel-content-a']]: layout === PanelLayout.layout2,\n    [panelStyles['panel-content-a--layout3a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel-content-a--layout3b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel-content-a--layout3c']]: layout === PanelLayout.layout3c,\n  });\n\n  const panelContentRightClass = classNames({\n    [panelStyles['panel__content-right--layout1']]: contentB && layout === PanelLayout.layout1,\n    [panelStyles['panel__content-right--layout2']]: contentB && layout === PanelLayout.layout2,\n    [panelStyles['panel__content-right--layout3']]: contentB && layout3,\n    [panelStyles['panel__content-right--layout3a']]: contentB && layout === PanelLayout.layout3a,\n    [panelStyles['panel__content-right--layout3b']]: contentB && layout === PanelLayout.layout3b,\n    [panelStyles['panel__content-right--layout3c']]: contentB && layout === PanelLayout.layout3c,\n  });\n\n  const panelContentBClass = classNames(panelStyles['panel-content-b'], {\n    [panelStyles['panel-content-b--layout1']]: layout === PanelLayout.layout1,\n    [panelStyles['panel-content-b--layout3']]: layout3,\n  });\n\n  const panelActionBtnClass = classNames(panelStyles['panel__details-btn']);\n\n  const renderDetailsButton = (): JSX.Element => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : () => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (!!children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const btnContainerClass = classNames(panelStyles['panel__btn-container'], {\n    [panelStyles['panel__btn-container--layout3']]: layout3,\n    [panelStyles['panel__btn-container--padding-top']]: contentB,\n  });\n\n  const renderContent = () => {\n    if (!children) {\n      return null;\n    }\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n      [panelStyles['panel-details--with-icon']]: icon,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div ref={ref} data-testid={testId} className={panelWrapperClass} data-analyticsid={AnalyticsId.Panel}>\n      <div className={panelClasses}>\n        {icon && !iconRight && <div className={panelStyles.panel__icon}>{icon}</div>}\n        <div className={panelContainer}>\n          <div className={panelContentLeftClass}>\n            <StatusText status={status} statusMessage={statusMessage} />\n            {title && (\n              <div className={panelStyles['panel-content-a__title-container']}>\n                <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId}>\n                  {title}\n                </Title>\n                {statusMessage && status === PanelStatus.new && (\n                  <Badge color=\"blueberry\" testId=\"badge-status\" className={panelStyles.panel__badge}>\n                    {statusMessage}\n                  </Badge>\n                )}\n              </div>\n            )}\n            {contentA}\n            {breakpoint >= Breakpoint.lg && <DateTime date={date} time={time} />}\n          </div>\n          <div className={panelContentRightClass}>\n            {contentB && <div className={panelContentBClass}>{contentB}</div>}\n            {(children || url || date || time || buttonOnClick) && (\n              <div className={btnContainerClass}>\n                {breakpoint < Breakpoint.lg && <DateTime date={date} time={time} />}\n                {(children || url || buttonOnClick) && <div className={panelActionBtnClass}>{renderDetailsButton()}</div>}\n              </div>\n            )}\n          </div>\n        </div>\n        {icon && iconRight && <div className={panelStyles['panel__icon--right']}>{icon}</div>}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","React","Icon","IconSize","DateTime","date","time","Calendar","Watch","Panel","props","ref","children","contentA","contentB","className","testId","title","titleHtmlMarkup","url","target","icon","iconRight","variant","buttonText","buttonTextClose","buttonAriaLabelledById","buttonAriaLabel","layout","containerAsButton","noTopBorder","buttonOnClick","buttonHtmlMarkup","expanded","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useState","previousIsExpanded","usePrevious","titleId","useUuid","buttonTextId","breakpoint","useBreakpoint","useEffect","layout3","panelWrapperClass","panelClasses","panelContainer","panelContentLeftClass","panelContentRightClass","panelContentBClass","panelActionBtnClass","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","btnContainerClass","renderContent","panelDetailsClasses","AnalyticsId","Title","Badge","Breakpoint"],"mappings":"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"}

package/RadioButton.js

@@ -1,2 +1,2 @@
-import r from"react";import t from"classnames";import{a as F}from"./uuid.js";import o from"./components/RadioButton/styles.module.scss";import{FormMode as l,FormVariant as I,AnalyticsId as x}from"./constants.js";const M=r.forwardRef((p,f)=>{const{className:y,defaultChecked:v=!1,disabled:e,label:s,inputId:i=F(),mode:n,name:B=i,variant:N,errorText:a,error:b=!!a,value:g=s,testId:k,required:w}=p,u=b||n===l.oninvalid,m=n===l.ondark,c=n===l.onblueberry,d=N===I.bigform,R=t(o["radio-button-wrapper"],{[o["radio-button-wrapper--with-error"]]:a,[o["radio-button-wrapper--bigform"]]:d}),C=t(o["radio-button-label"],{[o["radio-button-label--disabled"]]:e,[o["radio-button-label--on-dark"]]:m,[o["radio-button-label--on-blueberry"]]:c,[o["radio-button-label--invalid"]]:u,[o["radio-button-label--bigform"]]:d}),E=t(o["radio-button"],{[o["radio-button--on-dark"]]:m,[o["radio-button--disabled"]]:e,[o["radio-button--on-blueberry"]]:c,[o["radio-button--invalid"]]:u},y),h=t(o["radio-button-errors"],{[o["radio-button-errors--bigform"]]:d});return r.createElement("div",{"data-testid":k,"data-analyticsid":x.RadioButton,className:R},a&&r.createElement("p",{className:h},a),r.createElement("label",{htmlFor:i,className:C},r.createElement("input",{id:i,name:B,className:E,type:"radio",disabled:e,value:g,ref:f,"aria-invalid":b,defaultChecked:v,required:w}),s))});export{M as R};
+import r from"react";import a from"classnames";import{a as I}from"./uuid.js";import o from"./components/RadioButton/styles.module.scss";import{FormMode as l,FormVariant as x,AnalyticsId as S}from"./constants.js";const T=r.forwardRef((p,f)=>{const{className:y,defaultChecked:v=!1,disabled:e,label:s,inputId:i=I(),mode:n,name:B=i,variant:N,errorText:t,error:b=!!t,value:g=s,testId:k,required:w,...R}=p,u=b||n===l.oninvalid,m=n===l.ondark,c=n===l.onblueberry,d=N===x.bigform,C=a(o["radio-button-wrapper"],{[o["radio-button-wrapper--with-error"]]:t,[o["radio-button-wrapper--bigform"]]:d}),E=a(o["radio-button-label"],{[o["radio-button-label--disabled"]]:e,[o["radio-button-label--on-dark"]]:m,[o["radio-button-label--on-blueberry"]]:c,[o["radio-button-label--invalid"]]:u,[o["radio-button-label--bigform"]]:d}),h=a(o["radio-button"],{[o["radio-button--on-dark"]]:m,[o["radio-button--disabled"]]:e,[o["radio-button--on-blueberry"]]:c,[o["radio-button--invalid"]]:u},y),F=a(o["radio-button-errors"],{[o["radio-button-errors--bigform"]]:d});return r.createElement("div",{"data-testid":k,"data-analyticsid":S.RadioButton,className:C},t&&r.createElement("p",{className:F},t),r.createElement("label",{htmlFor:i,className:E},r.createElement("input",{id:i,name:B,className:h,type:"radio",disabled:e,value:g,ref:f,"aria-invalid":b,defaultChecked:v,required:w,...R}),s))});export{T as R};
 //# sourceMappingURL=RadioButton.js.map

package/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\nimport { uuid } from '../../utils/uuid';\n\nimport radioButtonStyles from './styles.module.scss';\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\n\nexport interface RadioButtonProps\n  extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The label text next to the radioButton */\n  label: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  variant?: keyof typeof FormVariant;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode,\n    name = inputId,\n    variant,\n    errorText,\n    error = !!errorText,\n    value = label,\n    testId,\n    required,\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const bigform = variant === FormVariant.bigform;\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper--bigform']]: bigform,\n  });\n  const radioButtonLabelClasses = classNames(radioButtonStyles['radio-button-label'], {\n    [radioButtonStyles['radio-button-label--disabled']]: disabled,\n    [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n    [radioButtonStyles['radio-button-label--on-blueberry']]: onBlueberry,\n    [radioButtonStyles['radio-button-label--invalid']]: invalid,\n    [radioButtonStyles['radio-button-label--bigform']]: bigform,\n  });\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n    },\n    className\n  );\n  const errorStyles = classNames(radioButtonStyles['radio-button-errors'], {\n    [radioButtonStyles['radio-button-errors--bigform']]: bigform,\n  });\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      <label htmlFor={inputId} className={radioButtonLabelClasses}>\n        <input\n          id={inputId}\n          name={name}\n          className={radioButtonClasses}\n          type=\"radio\"\n          disabled={disabled}\n          value={value}\n          ref={ref}\n          aria-invalid={error}\n          defaultChecked={defaultChecked}\n          required={required}\n        />\n        {label}\n      </label>\n    </div>\n  );\n});\n\nexport default RadioButton;\n"],"names":["RadioButton","React","props","ref","className","defaultChecked","disabled","label","inputId","uuid","mode","name","variant","errorText","error","value","testId","required","invalid","FormMode","onDark","onBlueberry","bigform","FormVariant","radioButtonWrapperClasses","classNames","radioButtonStyles","radioButtonLabelClasses","radioButtonClasses","errorStyles","AnalyticsId"],"mappings":"oNA4BO,MAAMA,EAAcC,EAAM,WAAW,CAACC,EAAyBC,IAAqC,CACnG,KAAA,CACJ,UAAAC,EACA,eAAAC,EAAiB,GACjB,SAAAC,EACA,MAAAC,EACA,QAAAC,EAAUC,EAAK,EACf,KAAAC,EACA,KAAAC,EAAOH,EACP,QAAAI,EACA,UAAAC,EACA,MAAAC,EAAQ,CAAC,CAACD,EACV,MAAAE,EAAQR,EACR,OAAAS,EACA,SAAAC,CACE,EAAAf,EACEgB,EAAUJ,GAASJ,IAASS,EAAS,UACrCC,EAASV,IAASS,EAAS,OAC3BE,EAAcX,IAASS,EAAS,YAChCG,EAAUV,IAAYW,EAAY,QAElCC,EAA4BC,EAAWC,EAAkB,wBAAyB,CACtF,CAACA,EAAkB,qCAAsCb,EACzD,CAACa,EAAkB,kCAAmCJ,CAAA,CACvD,EACKK,EAA0BF,EAAWC,EAAkB,sBAAuB,CAClF,CAACA,EAAkB,iCAAkCpB,EACrD,CAACoB,EAAkB,gCAAiCN,EACpD,CAACM,EAAkB,qCAAsCL,EACzD,CAACK,EAAkB,gCAAiCR,EACpD,CAACQ,EAAkB,gCAAiCJ,CAAA,CACrD,EACKM,EAAqBH,EACzBC,EAAkB,gBAClB,CACE,CAACA,EAAkB,0BAA2BN,EAC9C,CAACM,EAAkB,2BAA4BpB,EAC/C,CAACoB,EAAkB,+BAAgCL,EACnD,CAACK,EAAkB,0BAA2BR,CAChD,EACAd,CAAA,EAEIyB,EAAcJ,EAAWC,EAAkB,uBAAwB,CACvE,CAACA,EAAkB,iCAAkCJ,CAAA,CACtD,EAED,OACGrB,EAAA,cAAA,MAAA,CAAI,cAAae,EAAQ,mBAAkBc,EAAY,YAAa,UAAWN,CAAA,EAC7EX,GAAcZ,EAAA,cAAA,IAAA,CAAE,UAAW4B,CAAc,EAAAhB,CAAU,EACnDZ,EAAA,cAAA,QAAA,CAAM,QAASO,EAAS,UAAWmB,CAAA,EACjC1B,EAAA,cAAA,QAAA,CACC,GAAIO,EACJ,KAAAG,EACA,UAAWiB,EACX,KAAK,QACL,SAAAtB,EACA,MAAAS,EACA,IAAAZ,EACA,eAAcW,EACd,eAAAT,EACA,SAAAY,CAAA,CACF,EACCV,CACH,CACF,CAEJ,CAAC"}
+{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\nimport { uuid } from '../../utils/uuid';\n\nimport radioButtonStyles from './styles.module.scss';\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\n\nexport interface RadioButtonProps\n  extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The label text next to the radioButton */\n  label: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  variant?: keyof typeof FormVariant;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode,\n    name = inputId,\n    variant,\n    errorText,\n    error = !!errorText,\n    value = label,\n    testId,\n    required,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const bigform = variant === FormVariant.bigform;\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper--bigform']]: bigform,\n  });\n  const radioButtonLabelClasses = classNames(radioButtonStyles['radio-button-label'], {\n    [radioButtonStyles['radio-button-label--disabled']]: disabled,\n    [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n    [radioButtonStyles['radio-button-label--on-blueberry']]: onBlueberry,\n    [radioButtonStyles['radio-button-label--invalid']]: invalid,\n    [radioButtonStyles['radio-button-label--bigform']]: bigform,\n  });\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n    },\n    className\n  );\n  const errorStyles = classNames(radioButtonStyles['radio-button-errors'], {\n    [radioButtonStyles['radio-button-errors--bigform']]: bigform,\n  });\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      <label htmlFor={inputId} className={radioButtonLabelClasses}>\n        <input\n          id={inputId}\n          name={name}\n          className={radioButtonClasses}\n          type=\"radio\"\n          disabled={disabled}\n          value={value}\n          ref={ref}\n          aria-invalid={error}\n          defaultChecked={defaultChecked}\n          required={required}\n          {...rest}\n        />\n        {label}\n      </label>\n    </div>\n  );\n});\n\nexport default RadioButton;\n"],"names":["RadioButton","React","props","ref","className","defaultChecked","disabled","label","inputId","uuid","mode","name","variant","errorText","error","value","testId","required","rest","invalid","FormMode","onDark","onBlueberry","bigform","FormVariant","radioButtonWrapperClasses","classNames","radioButtonStyles","radioButtonLabelClasses","radioButtonClasses","errorStyles","AnalyticsId"],"mappings":"oNA4BO,MAAMA,EAAcC,EAAM,WAAW,CAACC,EAAyBC,IAAqC,CACnG,KAAA,CACJ,UAAAC,EACA,eAAAC,EAAiB,GACjB,SAAAC,EACA,MAAAC,EACA,QAAAC,EAAUC,EAAK,EACf,KAAAC,EACA,KAAAC,EAAOH,EACP,QAAAI,EACA,UAAAC,EACA,MAAAC,EAAQ,CAAC,CAACD,EACV,MAAAE,EAAQR,EACR,OAAAS,EACA,SAAAC,KACGC,CACD,EAAAhB,EACEiB,EAAUL,GAASJ,IAASU,EAAS,UACrCC,EAASX,IAASU,EAAS,OAC3BE,EAAcZ,IAASU,EAAS,YAChCG,EAAUX,IAAYY,EAAY,QAElCC,EAA4BC,EAAWC,EAAkB,wBAAyB,CACtF,CAACA,EAAkB,qCAAsCd,EACzD,CAACc,EAAkB,kCAAmCJ,CAAA,CACvD,EACKK,EAA0BF,EAAWC,EAAkB,sBAAuB,CAClF,CAACA,EAAkB,iCAAkCrB,EACrD,CAACqB,EAAkB,gCAAiCN,EACpD,CAACM,EAAkB,qCAAsCL,EACzD,CAACK,EAAkB,gCAAiCR,EACpD,CAACQ,EAAkB,gCAAiCJ,CAAA,CACrD,EACKM,EAAqBH,EACzBC,EAAkB,gBAClB,CACE,CAACA,EAAkB,0BAA2BN,EAC9C,CAACM,EAAkB,2BAA4BrB,EAC/C,CAACqB,EAAkB,+BAAgCL,EACnD,CAACK,EAAkB,0BAA2BR,CAChD,EACAf,CAAA,EAEI0B,EAAcJ,EAAWC,EAAkB,uBAAwB,CACvE,CAACA,EAAkB,iCAAkCJ,CAAA,CACtD,EAED,OACGtB,EAAA,cAAA,MAAA,CAAI,cAAae,EAAQ,mBAAkBe,EAAY,YAAa,UAAWN,CAAA,EAC7EZ,GAAcZ,EAAA,cAAA,IAAA,CAAE,UAAW6B,CAAc,EAAAjB,CAAU,EACnDZ,EAAA,cAAA,QAAA,CAAM,QAASO,EAAS,UAAWoB,CAAA,EACjC3B,EAAA,cAAA,QAAA,CACC,GAAIO,EACJ,KAAAG,EACA,UAAWkB,EACX,KAAK,QACL,SAAAvB,EACA,MAAAS,EACA,IAAAZ,EACA,eAAcW,EACd,eAAAT,EACA,SAAAY,EACC,GAAGC,CAAA,CACN,EACCX,CACH,CACF,CAEJ,CAAC"}

package/Select.js

@@ -0,0 +1,2 @@
+import r from"react";import c from"classnames";import e from"./components/Select/styles.module.scss";import{AnalyticsId as k,IconSize as D,AVERAGE_CHARACTER_WIDTH_PX as T}from"./constants.js";import{Icon as z}from"./components/Icons/Icon.js";import H from"./components/Icons/ChevronDown.js";import{getColor as w}from"./theme/currys/color.js";import{E as L}from"./ErrorWrapper.js";import{useUuid as X}from"./hooks/useUuid.js";const $=t=>{const a="2rem";return`calc(${t*T}px + ${a})`},q=(t,a)=>a?w("neutral",500):w(t?"cherry":"blueberry",600),K=r.forwardRef((t,a)=>{const{afterLabelChildren:s,className:f,children:v,concept:E="normal",disabled:n,error:C,errorText:i,label:m,selectId:p,name:h=p,mode:o,testId:y,width:d,required:I,value:_,...N}=t,b=X(p),u=o==="onblueberry",l=o==="oninvalid"||!!i||!!C,S=o==="ondark",W=q(l,!!n),g=d?$(d):void 0,x=c(e["select-wrapper__label-wrapper"],{[e["select-wrapper__label-wrapper--on-dark"]]:S}),A=c(e["select-inner-wrapper"],{[e["select-inner-wrapper--transparent"]]:E==="transparent",[e["select-inner-wrapper--on-blueberry"]]:u,[e["select-inner-wrapper--invalid"]]:l,[e["select-inner-wrapper--disabled"]]:n},f),R=c(e.select,{[e["select--on-blueberry"]]:u,[e["select--invalid"]]:l});return r.createElement(L,{errorText:i},r.createElement("div",{"data-testid":y,"data-analyticsid":k.Select,className:e["select-wrapper"],style:{maxWidth:g}},m&&r.createElement("div",{className:x},r.createElement("label",{htmlFor:b},m),s&&r.createElement("div",{className:e["select-wrapper__after-label-children"]},s)),r.createElement("div",{className:A},r.createElement(z,{className:e["select-arrow"],svgIcon:H,color:W,size:D.XSmall}),r.createElement("select",{"aria-invalid":!!l,id:b,name:h,className:R,disabled:n,ref:a,required:I,value:_,...N},v))))});export{K as S};
+//# sourceMappingURL=Select.js.map

package/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport selectStyles from './styles.module.scss';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport Icon from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { useUuid } from '../../hooks/useUuid';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'disabled' | 'required' | 'value'> {\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: string;\n  /** Changes the visuals of the component */\n  mode?: keyof typeof FormMode;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef((props: SelectProps, ref: React.Ref<HTMLSelectElement>) => {\n  const {\n    afterLabelChildren,\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    label,\n    selectId,\n    name = selectId,\n    mode,\n    testId,\n    width,\n    required,\n    value,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const onBlueberry = mode === 'onblueberry';\n  const invalid = mode === 'oninvalid' || !!errorText || !!error;\n  const onDark = mode === 'ondark';\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectLabelClasses = classNames(selectStyles['select-wrapper__label-wrapper'], {\n    [selectStyles['select-wrapper__label-wrapper--on-dark']]: onDark,\n  });\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectStyles['select-wrapper']} style={{ maxWidth }}>\n        {label && (\n          <div className={selectLabelClasses}>\n            <label htmlFor={uuid}>{label}</label>\n            {afterLabelChildren && <div className={selectStyles['select-wrapper__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\n        <div className={selectInnerWrapperClasses}>\n          <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            value={value}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","paddingWidth","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","afterLabelChildren","className","children","concept","error","errorText","label","selectId","name","mode","testId","width","required","value","rest","uuid","useUuid","onBlueberry","onDark","iconColor","maxWidth","selectLabelClasses","classNames","selectStyles","selectInnerWrapperClasses","selectClasses","ErrorWrapper","AnalyticsId","Icon","ChevronDown","IconSize"],"mappings":"yaAuCA,MAAMA,EAAqBC,GAA+B,CACxD,MAAMC,EAAe,OAEd,MAAA,QAAQD,EAAaE,SAAkCD,IAChE,EAEME,EAAe,CAACC,EAAkBC,IAE/BA,EAAWC,EAAS,UAAW,GAAG,EAAIA,EAD3BF,EAAU,SAAW,YAC0B,GAAG,EAGzDG,EAASC,EAAM,WAAW,CAACC,EAAoBC,IAAsC,CAC1F,KAAA,CACJ,mBAAAC,EACA,UAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,SACV,SAAAT,EACA,MAAAU,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,KAAAC,EAAOD,EACP,KAAAE,EACA,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,MAAAC,KACGC,CACD,EAAAhB,EAEEiB,EAAOC,EAAQT,CAAQ,EACvBU,EAAcR,IAAS,cACvBhB,EAAUgB,IAAS,aAAe,CAAC,CAACJ,GAAa,CAAC,CAACD,EACnDc,EAAST,IAAS,SAClBU,EAAY3B,EAAaC,EAAS,CAAC,CAACC,CAAQ,EAC5C0B,EAAWT,EAAQvB,EAAkBuB,CAAK,EAAI,OAE9CU,EAAqBC,EAAWC,EAAa,iCAAkC,CACnF,CAACA,EAAa,2CAA4CL,CAAA,CAC3D,EAEKM,EAA4BF,EAChCC,EAAa,wBACb,CACE,CAACA,EAAa,sCAAuCpB,IAAY,cACjE,CAACoB,EAAa,uCAAwCN,EACtD,CAACM,EAAa,kCAAmC9B,EACjD,CAAC8B,EAAa,mCAAoC7B,CACpD,EACAO,CAAA,EAGIwB,EAAgBH,EAAWC,EAAa,OAAQ,CACpD,CAACA,EAAa,yBAA0BN,EACxC,CAACM,EAAa,oBAAqB9B,CAAA,CACpC,EAED,OACGI,EAAA,cAAA6B,EAAA,CAAa,UAAArB,CAAA,EACXR,EAAA,cAAA,MAAA,CAAI,cAAaa,EAAQ,mBAAkBiB,EAAY,OAAQ,UAAWJ,EAAa,kBAAmB,MAAO,CAAE,SAAAH,CAAS,CAAA,EAC1Hd,GACET,EAAA,cAAA,MAAA,CAAI,UAAWwB,CAAA,EACbxB,EAAA,cAAA,QAAA,CAAM,QAASkB,CAAO,EAAAT,CAAM,EAC5BN,GAAuBH,EAAA,cAAA,MAAA,CAAI,UAAW0B,EAAa,uCAA0C,EAAAvB,CAAmB,CACnH,EAEDH,EAAA,cAAA,MAAA,CAAI,UAAW2B,CAAA,EACb3B,EAAA,cAAA+B,EAAA,CAAK,UAAWL,EAAa,gBAAiB,QAASM,EAAa,MAAOV,EAAW,KAAMW,EAAS,MAAA,CAAQ,EAC7GjC,EAAA,cAAA,SAAA,CACC,eAAc,CAAC,CAACJ,EAChB,GAAIsB,EACJ,KAAAP,EACA,UAAWiB,EACX,SAAA/B,EACA,IAAAK,EACA,SAAAa,EACA,MAAAC,EACC,GAAGC,CAAA,EAEHZ,CACH,CACF,CACF,CACF,CAEJ,CAAC"}

package/Textarea.js

@@ -1,2 +1,2 @@
-import r,{useState as A,useRef as Z,useEffect as ee}from"react";import s from"classnames";import e from"./components/Textarea/styles.module.scss";import{FormMode as f,AnalyticsId as te}from"./constants.js";import{a as re}from"./uuid.js";import{A as ae}from"./Input.js";import{E as ne}from"./ErrorWrapper.js";const oe=o=>{const p="2rem",a="16px",l="4px";return`calc(${o*ae}px + ${p} + ${a} + ${l})`},ue=r.forwardRef((o,p)=>{const{maxCharacters:a,maxText:l,width:b,testId:I,defaultValue:_,marginBottom:k,transparent:L,mode:m,label:E,textareaId:g=re(),minRows:v=3,maxRows:c=10,grow:C,errorText:R,afterLabelChildren:T,belowLabelChildren:W,autoFocus:B,disabled:S,name:F,autoComplete:M,placeholder:D,readOnly:V,required:q}=o,[z,y]=A(v),[u,G]=A(_||""),i=Z(null),H=t=>{const d=t.rows;t.rows=v;const n=Math.floor((t.scrollHeight-16)/28);n===d&&(t.rows=n),n>=c&&(t.rows=c,t.scrollTop=t.scrollHeight),n<c?y(n):y(c)},O=t=>{C&&H(t.target),G(t.target.value)},x=m===f.ondark,P=m===f.onblueberry,X=a&&u.toString().length>a,h=m===f.oninvalid||R||X,j=s(e.textarea,{[e["textarea--gutterBottom"]]:k}),J=s(e["textarea__label-wrapper"],{[e["textarea__label-wrapper--on-dark"]]:x}),K=s(e["content-wrapper"],{[e["content-wrapper--transparent"]]:L,[e["content-wrapper--on-blueberry"]]:P,[e["content-wrapper--on-dark"]]:x,[e["content-wrapper--invalid"]]:h,[e["content-wrapper--disabled"]]:o.disabled}),Q=s(e["content-wrapper__input"],{[e["content-wrapper__input--disabled"]]:o.disabled}),U=s(e["textarea__counter-wrapper"],{[e["textarea__counter-wrapper--on-dark"]]:x,[e["textarea__counter-wrapper--invalid"]]:h});ee(()=>{var t,w,d;if(C&&((t=i.current)==null?void 0:t.children)&&((w=i.current)==null?void 0:w.children[0])){const n=(d=i.current)==null?void 0:d.children[0];H(n)}},[]);let N=0;a&&(N=u.toString().length/a);const Y=N>.95?"polite":"off",$=b?oe(b):void 0;return r.createElement(ne,{errorText:R},r.createElement("div",{"data-testid":I,"data-analyticsid":te.Textarea,className:j},E&&r.createElement("div",{className:J},r.createElement("label",{htmlFor:g},E),T&&r.createElement("div",{className:e["textarea__after-label-children"]},T)),W&&r.createElement("div",null,W),r.createElement("div",{className:K,ref:i,style:{maxWidth:$}},r.createElement("textarea",{rows:z,defaultValue:_,id:g,className:Q,ref:p,onChange:O,"aria-invalid":!!h,autoFocus:B,disabled:S,name:F,autoComplete:M,placeholder:D,readOnly:V,required:q})),a&&r.createElement("div",{"aria-live":Y,"aria-atomic":"true",className:U,style:{maxWidth:$}},r.createElement("p",null,`${u.toString().length}/${a} ${l||"tegn"}`))))});export{ue as T};
+import r,{useState as k,useRef as re,useEffect as ae}from"react";import s from"classnames";import t from"./components/Textarea/styles.module.scss";import{FormMode as f,AnalyticsId as ne,AVERAGE_CHARACTER_WIDTH_PX as oe}from"./constants.js";import{a as se}from"./uuid.js";import{E as le}from"./ErrorWrapper.js";const ce=o=>{const p="2rem",a="16px",l="4px";return`calc(${o*oe}px + ${p} + ${a} + ${l})`},he=r.forwardRef((o,p)=>{const{maxCharacters:a,maxText:l,width:b,testId:A,defaultValue:g,marginBottom:L,transparent:B,mode:m,label:_,textareaId:E=se(),minRows:C=3,maxRows:c=10,grow:v,errorText:R,afterLabelChildren:T,belowLabelChildren:W,autoFocus:S,disabled:F,name:M,autoComplete:D,placeholder:V,readOnly:q,required:z,onChange:y,...G}=o,[O,H]=k(C),[u,P]=k(g||""),i=re(null),N=e=>{const d=e.rows;e.rows=C;const n=Math.floor((e.scrollHeight-16)/28);n===d&&(e.rows=n),n>=c&&(e.rows=c,e.scrollTop=e.scrollHeight),n<c?H(n):H(c)},X=e=>{v&&N(e.target),P(e.target.value)},x=m===f.ondark,j=m===f.onblueberry,J=a&&u.toString().length>a,h=m===f.oninvalid||R||J,K=s(t.textarea,{[t["textarea--gutterBottom"]]:L}),Q=s(t["textarea__label-wrapper"],{[t["textarea__label-wrapper--on-dark"]]:x}),U=s(t["content-wrapper"],{[t["content-wrapper--transparent"]]:B,[t["content-wrapper--on-blueberry"]]:j,[t["content-wrapper--on-dark"]]:x,[t["content-wrapper--invalid"]]:h,[t["content-wrapper--disabled"]]:o.disabled}),Y=s(t["content-wrapper__input"],{[t["content-wrapper__input--disabled"]]:o.disabled}),Z=s(t["textarea__counter-wrapper"],{[t["textarea__counter-wrapper--on-dark"]]:x,[t["textarea__counter-wrapper--invalid"]]:h});ae(()=>{var e,w,d;if(v&&((e=i.current)==null?void 0:e.children)&&((w=i.current)==null?void 0:w.children[0])){const n=(d=i.current)==null?void 0:d.children[0];N(n)}},[]);let $=0;a&&($=u.toString().length/a);const ee=$>.95?"polite":"off",I=b?ce(b):void 0,te=e=>{y&&y(e),X(e)};return r.createElement(le,{errorText:R},r.createElement("div",{"data-testid":A,"data-analyticsid":ne.Textarea,className:K},_&&r.createElement("div",{className:Q},r.createElement("label",{htmlFor:E},_),T&&r.createElement("div",{className:t["textarea__after-label-children"]},T)),W&&r.createElement("div",null,W),r.createElement("div",{className:U,ref:i,style:{maxWidth:I}},r.createElement("textarea",{rows:O,defaultValue:g,id:E,className:Y,ref:p,"aria-invalid":!!h,autoFocus:S,disabled:F,name:M,autoComplete:D,placeholder:V,readOnly:q,required:z,onChange:te,...G})),a&&r.createElement("div",{"aria-live":ee,"aria-atomic":"true",className:Z,style:{maxWidth:I}},r.createElement("p",null,`${u.toString().length}/${a} ${l||"tegn"}`))))});export{he 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';\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\nimport { FormMode, AnalyticsId } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport { AVERAGE_CHARACTER_WIDTH_PX } from '../Input';\nimport ErrorWrapper from '../ErrorWrapper';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    'autoFocus' | 'disabled' | 'name' | 'autoComplete' | 'placeholder' | 'readOnly' | 'required' | 'defaultValue'\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?: string;\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  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Component shown under label */\n  belowLabelChildren?: React.ReactNode;\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: max,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    afterLabelChildren,\n    belowLabelChildren,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete,\n    placeholder,\n    readOnly,\n    required,\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\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 handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(event.target);\n    }\n    setTextareaInput(event.target.value);\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const textHasError = max && textareaInput.toString().length > max;\n  const onError = mode === FormMode.oninvalid || errorText || textHasError;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const labelWrapperClass = cn(styles['textarea__label-wrapper'], {\n    [styles[`textarea__label-wrapper--on-dark`]]: onDark,\n  });\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: transparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['content-wrapper__input'], {\n    [styles[`content-wrapper__input--disabled`]]: props.disabled,\n  });\n\n  const counterTextClass = cn(styles['textarea__counter-wrapper'], {\n    [styles[`textarea__counter-wrapper--on-dark`]]: onDark,\n    [styles[`textarea__counter-wrapper--invalid`]]: onError,\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  let progress = 0;\n  if (max) {\n    progress = textareaInput.toString().length / max;\n  }\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\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        {label && (\n          <div className={labelWrapperClass}>\n            <label htmlFor={textareaId}>{label}</label>\n            {afterLabelChildren && <div className={styles['textarea__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\n        {belowLabelChildren && <div>{belowLabelChildren}</div>}\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            onChange={handleChange}\n            aria-invalid={!!onError}\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n          />\n        </div>\n        {max && (\n          <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n            <p>{`${textareaInput.toString().length}/${max} ${maxText ? maxText : 'tegn'}`}</p>\n          </div>\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","max","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","label","textareaId","uuid","minRows","maxRows","grow","errorText","afterLabelChildren","belowLabelChildren","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","resizeHeight","target","previousRows","currentRows","handleChange","event","onDark","FormMode","onBlueberry","textHasError","onError","textareaWrapperClass","cn","styles","labelWrapperClass","contentWrapperClass","textareaClass","counterTextClass","useEffect","_a","_b","textarea","_c","progress","ariaLevel","maxWidth","ErrorWrapper","AnalyticsId"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    'autoFocus' | 'disabled' | 'name' | 'autoComplete' | 'placeholder' | 'readOnly' | 'required' | 'defaultValue' | '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?: string;\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  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Component shown under label */\n  belowLabelChildren?: React.ReactNode;\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: max,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    afterLabelChildren,\n    belowLabelChildren,\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  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 handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(event.target);\n    }\n    setTextareaInput(event.target.value);\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const textHasError = max && textareaInput.toString().length > max;\n  const onError = mode === FormMode.oninvalid || errorText || textHasError;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const labelWrapperClass = cn(styles['textarea__label-wrapper'], {\n    [styles[`textarea__label-wrapper--on-dark`]]: onDark,\n  });\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: transparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['content-wrapper__input'], {\n    [styles[`content-wrapper__input--disabled`]]: props.disabled,\n  });\n\n  const counterTextClass = cn(styles['textarea__counter-wrapper'], {\n    [styles[`textarea__counter-wrapper--on-dark`]]: onDark,\n    [styles[`textarea__counter-wrapper--invalid`]]: onError,\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  let progress = 0;\n  if (max) {\n    progress = textareaInput.toString().length / max;\n  }\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {label && (\n          <div className={labelWrapperClass}>\n            <label htmlFor={textareaId}>{label}</label>\n            {afterLabelChildren && <div className={styles['textarea__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\n        {belowLabelChildren && <div>{belowLabelChildren}</div>}\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-invalid={!!onError}\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {max && (\n          <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n            <p>{`${textareaInput.toString().length}/${max} ${maxText ? maxText : 'tegn'}`}</p>\n          </div>\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","max","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","label","textareaId","uuid","minRows","maxRows","grow","errorText","afterLabelChildren","belowLabelChildren","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","resizeHeight","target","previousRows","currentRows","handleChange","event","onDark","FormMode","onBlueberry","textHasError","onError","textareaWrapperClass","cn","styles","labelWrapperClass","contentWrapperClass","textareaClass","counterTextClass","useEffect","_a","_b","textarea","_c","progress","ariaLevel","maxWidth","onChangeHandler","ErrorWrapper","AnalyticsId"],"mappings":"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"}

package/Tooltip.js

@@ -1,2 +1,2 @@
-import e,{useRef as y,useState as l,useEffect as O,useContext as h}from"react";import{AnalyticsId as k}from"./constants.js";import{useUuid as D}from"./hooks/useUuid.js";import{H as L}from"./HelpBubble.js";import R from"./components/Tooltip/styles.module.scss";const S=r=>{const{children:a,description:i,testId:c}=r,u=200,f=`help-bubble-${D()}`,m=y(null),p=y(!0),g=M(),x=V(),[n,t]=l(!1),[d,o]=l(!1),[s,w]=l(null);O(()=>{p.current||x(),p.current&&(p.current=!1)},[n]);const T=()=>{d||t(!1)},b=()=>{g||w(window.setTimeout(()=>{o(!0)},u))},E=()=>{o(!1),s&&clearTimeout(s)};O(()=>(document.addEventListener("mouseup",T),()=>{document.removeEventListener("mouseup",T),s&&clearTimeout(s)}),[]);const B=v=>{v.key==="Enter"&&(t(d?!1:!n),o(!1)),v.key==="Escape"&&(t(!1),o(!1))},H=()=>{t(!n),o(!1)};return e.createElement(e.Fragment,null,e.createElement("span",{className:R.word,ref:m,tabIndex:0,onClick:()=>H(),onMouseEnter:()=>b(),onMouseLeave:()=>E(),onFocus:()=>b(),onBlur:()=>E(),onKeyDown:B,"aria-describedby":f,"data-testid":c,"data-analyticsid":k.Tooltip},a),e.createElement(L,{helpBubbleId:f,controllerRef:m,showBubble:n||d,noCloseButton:!0},i))},C=e.createContext(!1),I=e.createContext(()=>{}),M=()=>h(C),V=()=>h(I),U=({children:r})=>{const[a,i]=l(!1),c=()=>{i(u=>!u)};return e.createElement(C.Provider,{value:a},e.createElement(I.Provider,{value:c},r))};export{S as T,V as a,U as b,M as u};
+import t,{useRef as y,useContext as C,useEffect as u,useState as b}from"react";import{useDelayedState as D}from"./hooks/useDelayedState.js";import{useUuid as v}from"./hooks/useUuid.js";import{H as B}from"./HelpBubble.js";import{T as R}from"./TooltipWord.js";const x=200,K=({children:s,description:r,testId:i})=>{const n=v(),a=y(null),{currentTooltip:p,setCurrentTooltip:c}=C(d),[{showTooltip:l,keepOpen:m},h,o]=D({showTooltip:!1,keepOpen:!1},x);u(()=>{!c||c(l?n:void 0)},[l]),u(()=>{p!==n&&typeof p<"u"&&o(e=>({showTooltip:!1,keepOpen:e.keepOpen}))},[p]);const f=()=>{l||o({showTooltip:!1,keepOpen:!1})};u(()=>(document.addEventListener("mouseup",f),()=>{document.removeEventListener("mouseup",f)}),[]);const k=()=>{o(e=>({showTooltip:!e.showTooltip,keepOpen:!e.keepOpen}))},w=()=>{p||h(e=>({showTooltip:!0,keepOpen:e.keepOpen}))},O=()=>{o(e=>({showTooltip:!1,keepOpen:e.keepOpen}))},E=e=>{e.key==="Enter"&&o(T=>({showTooltip:!T.showTooltip,keepOpen:!T.keepOpen})),e.key==="Escape"&&o({showTooltip:!1,keepOpen:!1})};return t.createElement(t.Fragment,null,t.createElement(R,{ref:a,onClick:k,onFocus:w,onBlur:O,onKeyDown:E,ariaDescribedById:n,testId:i},s),t.createElement(B,{helpBubbleId:n,controllerRef:a,role:"tooltip",showBubble:l||m},r))},d=t.createContext({currentTooltip:void 0}),P=({children:s})=>{const[r,i]=b();return t.createElement(d.Provider,{value:{currentTooltip:r,setCurrentTooltip:i}},s)};export{K as T,P as a};
 //# sourceMappingURL=Tooltip.js.map

package/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useContext, useState, useEffect, useRef, ReactChild, ReactChildren, ReactNode } from 'react';\nimport { AnalyticsId } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\n\nimport HelpBubble from '../HelpBubble';\n\nimport tooltipstyles from './styles.module.scss';\n\nexport interface TooltipProps {\n  /**Ordet som skal ha en tilhørende hjelpeblubb */\n  children: ReactNode;\n  /**Teksten som skal vises i hjelpeblubben */\n  description: ReactNode;\n  /**Valgfri test-id */\n  testId?: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = (props: TooltipProps): JSX.Element => {\n  const { children, description, testId } = props;\n\n  const HOVER_DELAY = 200;\n\n  const ariaDescribedBy = `help-bubble-${useUuid()}`;\n  const node = useRef<HTMLDivElement>(null);\n  const firstRender = useRef(true);\n  const anyTooltipIsOpen = useTooltipOpen();\n  const toggleTooltipIsOpen = useTooltipOpenToggle();\n  const [visTooltip, setVisTooltip] = useState(false);\n  const [hoverVisTooltip, setHoverVisTooltip] = useState(false);\n  const [delayHandler, setDelayHandler] = useState<number | null>(null);\n\n  useEffect(() => {\n    if (!firstRender.current) toggleTooltipIsOpen();\n    if (firstRender.current) firstRender.current = false;\n  }, [visTooltip]);\n\n  const handleClick = (): void => {\n    if (!hoverVisTooltip) {\n      setVisTooltip(false);\n    }\n  };\n\n  const handleMouseEnter = (): void => {\n    if (!anyTooltipIsOpen) {\n      setDelayHandler(\n        window.setTimeout(() => {\n          setHoverVisTooltip(true);\n        }, HOVER_DELAY)\n      );\n    }\n  };\n\n  const handleMouseLeave = (): void => {\n    setHoverVisTooltip(false);\n    delayHandler && clearTimeout(delayHandler);\n  };\n\n  useEffect(() => {\n    document.addEventListener('mouseup', handleClick);\n    return (): void => {\n      document.removeEventListener('mouseup', handleClick);\n      delayHandler && clearTimeout(delayHandler);\n    };\n  }, []);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (e.key === 'Enter') {\n      hoverVisTooltip ? setVisTooltip(false) : setVisTooltip(!visTooltip);\n      setHoverVisTooltip(false);\n    }\n    if (e.key === 'Escape') {\n      setVisTooltip(false);\n      setHoverVisTooltip(false);\n    }\n  };\n\n  const handleTooltipClick = () => {\n    setVisTooltip(!visTooltip);\n    setHoverVisTooltip(false);\n  };\n\n  return (\n    <>\n      <span\n        className={tooltipstyles.word}\n        ref={node}\n        tabIndex={0}\n        onClick={(): void => handleTooltipClick()}\n        onMouseEnter={(): void => handleMouseEnter()}\n        onMouseLeave={(): void => handleMouseLeave()}\n        onFocus={(): void => handleMouseEnter()}\n        onBlur={(): void => handleMouseLeave()}\n        onKeyDown={handleKeyDown}\n        aria-describedby={ariaDescribedBy}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Tooltip}\n      >\n        {children}\n      </span>\n      <HelpBubble helpBubbleId={ariaDescribedBy} controllerRef={node} showBubble={visTooltip || hoverVisTooltip} noCloseButton>\n        {description}\n      </HelpBubble>\n    </>\n  );\n};\n\nconst TooltipOpenContext = React.createContext(false);\nconst TooltipOpenToggleContext = React.createContext(() => {});\n\ninterface ContextProps {\n  children: ReactChild | ReactChildren;\n}\nexport const useTooltipOpen = () => {\n  return useContext(TooltipOpenContext);\n};\nexport const useTooltipOpenToggle = () => {\n  return useContext(TooltipOpenToggleContext);\n};\n\nexport const TooltipOpenProvider = ({ children }: ContextProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const tooltipIsOpen = () => {\n    setIsOpen(prevIsOpen => !prevIsOpen);\n  };\n\n  return (\n    <TooltipOpenContext.Provider value={isOpen}>\n      <TooltipOpenToggleContext.Provider value={tooltipIsOpen}>{children}</TooltipOpenToggleContext.Provider>\n    </TooltipOpenContext.Provider>\n  );\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","props","children","description","testId","HOVER_DELAY","ariaDescribedBy","useUuid","node","useRef","firstRender","anyTooltipIsOpen","useTooltipOpen","toggleTooltipIsOpen","useTooltipOpenToggle","visTooltip","setVisTooltip","useState","hoverVisTooltip","setHoverVisTooltip","delayHandler","setDelayHandler","useEffect","handleClick","handleMouseEnter","handleMouseLeave","handleKeyDown","e","handleTooltipClick","React","tooltipstyles","AnalyticsId","HelpBubble","TooltipOpenContext","TooltipOpenToggleContext","useContext","TooltipOpenProvider","isOpen","setIsOpen","tooltipIsOpen","prevIsOpen"],"mappings":"oQAiBa,MAAAA,EAAmCC,GAAqC,CACnF,KAAM,CAAE,SAAAC,EAAU,YAAAC,EAAa,OAAAC,CAAA,EAAWH,EAEpCI,EAAc,IAEdC,EAAkB,eAAeC,EAAQ,IACzCC,EAAOC,EAAuB,IAAI,EAClCC,EAAcD,EAAO,EAAI,EACzBE,EAAmBC,IACnBC,EAAsBC,IACtB,CAACC,EAAYC,CAAa,EAAIC,EAAS,EAAK,EAC5C,CAACC,EAAiBC,CAAkB,EAAIF,EAAS,EAAK,EACtD,CAACG,EAAcC,CAAe,EAAIJ,EAAwB,IAAI,EAEpEK,EAAU,IAAM,CACTZ,EAAY,SAA6BG,IAC1CH,EAAY,UAASA,EAAY,QAAU,GAAA,EAC9C,CAACK,CAAU,CAAC,EAEf,MAAMQ,EAAc,IAAY,CACzBL,GACHF,EAAc,EAAK,CACrB,EAGIQ,EAAmB,IAAY,CAC9Bb,GACHU,EACE,OAAO,WAAW,IAAM,CACtBF,EAAmB,EAAI,GACtBd,CAAW,CAAA,CAElB,EAGIoB,EAAmB,IAAY,CACnCN,EAAmB,EAAK,EACxBC,GAAgB,aAAaA,CAAY,CAAA,EAG3CE,EAAU,KACC,SAAA,iBAAiB,UAAWC,CAAW,EACzC,IAAY,CACR,SAAA,oBAAoB,UAAWA,CAAW,EACnDH,GAAgB,aAAaA,CAAY,CAAA,GAE1C,CAAE,CAAA,EAEC,MAAAM,EAAiBC,GAAiD,CAClEA,EAAE,MAAQ,UACMX,EAAlBE,EAAgC,GAAuB,CAACH,CAAnB,EACrCI,EAAmB,EAAK,GAEtBQ,EAAE,MAAQ,WACZX,EAAc,EAAK,EACnBG,EAAmB,EAAK,EAC1B,EAGIS,EAAqB,IAAM,CAC/BZ,EAAc,CAACD,CAAU,EACzBI,EAAmB,EAAK,CAAA,EAG1B,uCAEKU,EAAA,cAAA,OAAA,CACC,UAAWC,EAAc,KACzB,IAAKtB,EACL,SAAU,EACV,QAAS,IAAYoB,EAAmB,EACxC,aAAc,IAAYJ,EAAiB,EAC3C,aAAc,IAAYC,EAAiB,EAC3C,QAAS,IAAYD,EAAiB,EACtC,OAAQ,IAAYC,EAAiB,EACrC,UAAWC,EACX,mBAAkBpB,EAClB,cAAaF,EACb,mBAAkB2B,EAAY,OAE7B,EAAA7B,CACH,EACC2B,EAAA,cAAAG,EAAA,CAAW,aAAc1B,EAAiB,cAAeE,EAAM,WAAYO,GAAcG,EAAiB,cAAa,EAAA,EACrHf,CACH,CACF,CAEJ,EAEM8B,EAAqBJ,EAAM,cAAc,EAAK,EAC9CK,EAA2BL,EAAM,cAAc,IAAM,CAAC,CAAC,EAKhDjB,EAAiB,IACrBuB,EAAWF,CAAkB,EAEzBnB,EAAuB,IAC3BqB,EAAWD,CAAwB,EAG/BE,EAAsB,CAAC,CAAE,SAAAlC,KAA6B,CACjE,KAAM,CAACmC,EAAQC,CAAS,EAAIrB,EAAS,EAAK,EAEpCsB,EAAgB,IAAM,CAChBD,EAAAE,GAAc,CAACA,CAAU,CAAA,EAInC,OAAAX,EAAA,cAACI,EAAmB,SAAnB,CAA4B,MAAOI,CAClC,EAAAR,EAAA,cAACK,EAAyB,SAAzB,CAAkC,MAAOK,CAAA,EAAgBrC,CAAS,CACrE,CAEJ"}
+{"version":3,"file":"Tooltip.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useContext, useState, useEffect, useRef } from 'react';\nimport { useDelayedState } from '../../hooks/useDelayedState';\n\nimport { useUuid } from '../../hooks/useUuid';\nimport HelpBubble from '../HelpBubble';\n\nimport TooltipWord from './TooltipWord';\n\nconst HOVER_DELAY_MS = 200;\n\nexport interface TooltipProps {\n  /** Ordet som skal ha en tilhørende tooltip */\n  children: string;\n  /** Teksten som skal vises i tooltip */\n  description: React.ReactNode;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ children, description, testId }) => {\n  const helpBubbleId = useUuid();\n  const wordRef = useRef<HTMLSpanElement>(null);\n  const { currentTooltip, setCurrentTooltip } = useContext(TooltipOpenContext);\n  const [{ showTooltip, keepOpen }, setShowTooltipDelayed, setShowTooltip] = useDelayedState(\n    { showTooltip: false, keepOpen: false },\n    HOVER_DELAY_MS\n  );\n\n  useEffect(() => {\n    if (!setCurrentTooltip) {\n      return;\n    }\n    if (showTooltip) {\n      setCurrentTooltip(helpBubbleId);\n    } else {\n      setCurrentTooltip(undefined);\n    }\n  }, [showTooltip]);\n\n  useEffect(() => {\n    if (currentTooltip !== helpBubbleId && typeof currentTooltip !== 'undefined') {\n      setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n    }\n  }, [currentTooltip]);\n\n  const handleDocumentClick = (): void => {\n    if (!showTooltip) {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('mouseup', handleDocumentClick);\n    return (): void => {\n      document.removeEventListener('mouseup', handleDocumentClick);\n    };\n  }, []);\n\n  const handleTooltipClick = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n  };\n\n  const handleFocus = (): void => {\n    if (!currentTooltip) {\n      setShowTooltipDelayed(prevState => ({ showTooltip: true, keepOpen: prevState.keepOpen }));\n    }\n  };\n\n  const handleBlur = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>): void => {\n    if (e.key === 'Enter') {\n      setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n    }\n    if (e.key === 'Escape') {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  return (\n    <>\n      <TooltipWord\n        ref={wordRef}\n        onClick={handleTooltipClick}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        ariaDescribedById={helpBubbleId}\n        testId={testId}\n      >\n        {children}\n      </TooltipWord>\n      <HelpBubble helpBubbleId={helpBubbleId} controllerRef={wordRef} role=\"tooltip\" showBubble={showTooltip || keepOpen}>\n        {description}\n      </HelpBubble>\n    </>\n  );\n};\n\nexport type TooltipContext = {\n  currentTooltip?: string;\n  setCurrentTooltip?: (id?: string) => void;\n};\n\nconst TooltipOpenContext = React.createContext<TooltipContext>({\n  currentTooltip: undefined,\n});\n\nexport const TooltipOpenProvider: React.FC = ({ children }) => {\n  const [currentTooltip, setCurrentTooltip] = useState<string>();\n\n  return <TooltipOpenContext.Provider value={{ currentTooltip, setCurrentTooltip }}>{children}</TooltipOpenContext.Provider>;\n};\n\nexport default Tooltip;\n"],"names":["HOVER_DELAY_MS","Tooltip","children","description","testId","helpBubbleId","useUuid","wordRef","useRef","currentTooltip","setCurrentTooltip","useContext","TooltipOpenContext","showTooltip","keepOpen","setShowTooltipDelayed","setShowTooltip","useDelayedState","useEffect","prevState","handleDocumentClick","handleTooltipClick","handleFocus","handleBlur","handleKeyDown","React","TooltipWord","HelpBubble","TooltipOpenProvider","useState"],"mappings":"kQAQA,MAAMA,EAAiB,IAWVC,EAAkC,CAAC,CAAE,SAAAC,EAAU,YAAAC,EAAa,OAAAC,KAAa,CACpF,MAAMC,EAAeC,IACfC,EAAUC,EAAwB,IAAI,EACtC,CAAE,eAAAC,EAAgB,kBAAAC,CAAkB,EAAIC,EAAWC,CAAkB,EACrE,CAAC,CAAE,YAAAC,EAAa,SAAAC,CAAY,EAAAC,EAAuBC,CAAc,EAAIC,EACzE,CAAE,YAAa,GAAO,SAAU,EAAM,EACtCjB,CAAA,EAGFkB,EAAU,IAAM,CACV,CAACR,GAIHA,EADEG,EACgBR,EAEA,MAFY,CAGhC,EACC,CAACQ,CAAW,CAAC,EAEhBK,EAAU,IAAM,CACVT,IAAmBJ,GAAgB,OAAOI,EAAmB,KAC/DO,MAA6B,CAAE,YAAa,GAAO,SAAUG,EAAU,QAAW,EAAA,CACpF,EACC,CAACV,CAAc,CAAC,EAEnB,MAAMW,EAAsB,IAAY,CACjCP,GACHG,EAAe,CAAE,YAAa,GAAO,SAAU,EAAO,CAAA,CACxD,EAGFE,EAAU,KACC,SAAA,iBAAiB,UAAWE,CAAmB,EACjD,IAAY,CACR,SAAA,oBAAoB,UAAWA,CAAmB,CAAA,GAE5D,CAAE,CAAA,EAEL,MAAMC,EAAqB,IAAY,CACtBL,EAAAG,IAAc,CAAE,YAAa,CAACA,EAAU,YAAa,SAAU,CAACA,EAAU,QAAA,EAAW,CAAA,EAGhGG,EAAc,IAAY,CACzBb,GACHM,MAAoC,CAAE,YAAa,GAAM,SAAUI,EAAU,QAAW,EAAA,CAC1F,EAGII,EAAa,IAAY,CAC7BP,MAA6B,CAAE,YAAa,GAAO,SAAUG,EAAU,QAAW,EAAA,CAAA,EAG9EK,EAAiB,GAAkD,CACnE,EAAE,MAAQ,SACGR,EAAAG,IAAc,CAAE,YAAa,CAACA,EAAU,YAAa,SAAU,CAACA,EAAU,QAAA,EAAW,EAElG,EAAE,MAAQ,UACZH,EAAe,CAAE,YAAa,GAAO,SAAU,EAAO,CAAA,CACxD,EAGF,uCAEKS,EAAA,cAAAC,EAAA,CACC,IAAKnB,EACL,QAASc,EACT,QAASC,EACT,OAAQC,EACR,UAAWC,EACX,kBAAmBnB,EACnB,OAAAD,CAEC,EAAAF,CACH,EACCuB,EAAA,cAAAE,EAAA,CAAW,aAAAtB,EAA4B,cAAeE,EAAS,KAAK,UAAU,WAAYM,GAAeC,CAAA,EACvGX,CACH,CACF,CAEJ,EAOMS,EAAqBa,EAAM,cAA8B,CAC7D,eAAgB,MAClB,CAAC,EAEYG,EAAgC,CAAC,CAAE,SAAA1B,KAAe,CAC7D,KAAM,CAACO,EAAgBC,CAAiB,EAAImB,EAAiB,EAEtD,OAAAJ,EAAA,cAACb,EAAmB,SAAnB,CAA4B,MAAO,CAAE,eAAAH,EAAgB,kBAAAC,CAAkB,CAAA,EAAIR,CAAS,CAC9F"}

package/TooltipWord.js

@@ -0,0 +1,2 @@
+import e from"react";import{AnalyticsId as p}from"./constants.js";import l from"./components/Tooltip/TooltipWord/styles.module.scss";const n=e.forwardRef(({children:o,onClick:r,onFocus:a,onBlur:t,onKeyDown:d,testId:i,ariaDescribedById:s},m)=>e.createElement("span",{className:l.word,ref:m,tabIndex:0,onClick:r,onMouseEnter:a,onMouseLeave:t,onFocus:a,onBlur:t,onKeyDown:d,"aria-describedby":s,"data-testid":i,"data-analyticsid":p.Tooltip},o));n.displayName="TooltipWord";export{n as T};
+//# sourceMappingURL=TooltipWord.js.map

package/TooltipWord.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipWord.js","sources":["../src/components/Tooltip/TooltipWord/TooltipWord.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TooltipWordProps {\n  /** Ordet som skal ha en tilhørende tooltip */\n  children: string;\n  /** Callback når ordet klikkes på */\n  onClick: () => void;\n  /** Callback når ordet får fokus eller hovres over */\n  onFocus: () => void;\n  /** Callback når ordet mister fokus eller hover forsvinner */\n  onBlur: () => void;\n  /** Callback når det skrives på tastaturet */\n  onKeyDown: (e: React.KeyboardEvent<HTMLSpanElement>) => void;\n  /** ID til element som beskriver ordet */\n  ariaDescribedById: string;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nconst TooltipWord = React.forwardRef<HTMLSpanElement, TooltipWordProps>(\n  ({ children, onClick, onFocus, onBlur, onKeyDown, testId, ariaDescribedById }, ref) => (\n    <span\n      className={styles.word}\n      ref={ref}\n      tabIndex={0}\n      onClick={onClick}\n      onMouseEnter={onFocus}\n      onMouseLeave={onBlur}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n      aria-describedby={ariaDescribedById}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Tooltip}\n    >\n      {children}\n    </span>\n  )\n);\n\nTooltipWord.displayName = 'TooltipWord';\n\nexport default TooltipWord;\n"],"names":["TooltipWord","React","children","onClick","onFocus","onBlur","onKeyDown","testId","ariaDescribedById","ref","styles","AnalyticsId"],"mappings":"qIAuBA,MAAMA,EAAcC,EAAM,WACxB,CAAC,CAAE,SAAAC,EAAU,QAAAC,EAAS,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,OAAAC,EAAQ,kBAAAC,CAAqB,EAAAC,IAC5ER,EAAA,cAAA,OAAA,CACC,UAAWS,EAAO,KAClB,IAAAD,EACA,SAAU,EACV,QAAAN,EACA,aAAcC,EACd,aAAcC,EACd,QAAAD,EACA,OAAAC,EACA,UAAAC,EACA,mBAAkBE,EAClB,cAAaD,EACb,mBAAkBI,EAAY,OAAA,EAE7BT,CACH,CAEJ,EAEAF,EAAY,YAAc"}

package/__mocks__/uuid.js

@@ -1,2 +1,2 @@
-import{u as i}from"../uuid.js";const t={id:0};jest.spyOn(i,"uuid").mockImplementation(()=>(t.id++,`testid-${t.id}`));
+import{u as i}from"../uuid.js";import"../utils/environment.js";const t={id:0};jest.spyOn(i,"uuid").mockImplementation(()=>(t.id++,`testid-${t.id}`));
 //# sourceMappingURL=uuid.js.map

package/__mocks__/uuid.js.map

@@ -1 +1 @@
-{"version":3,"file":"uuid.js","sources":["../../src/__mocks__/uuid.ts"],"sourcesContent":["import * as uuidUtils from '../utils/uuid';\n\nconst testId = {\n  id: 0,\n};\n\n/**\n * Returnerer en unik, forutsigbar id hver gang uuid() kalles\n */\njest.spyOn(uuidUtils, 'uuid').mockImplementation(() => {\n  testId.id++;\n  return `testid-${testId.id}`;\n});\n"],"names":["testId","uuidUtils"],"mappings":"+BAEA,MAAMA,EAAS,CACb,GAAI,CACN,EAKA,KAAK,MAAMC,EAAW,MAAM,EAAE,mBAAmB,KACxCD,EAAA,KACA,UAAUA,EAAO,KACzB"}
+{"version":3,"file":"uuid.js","sources":["../../src/__mocks__/uuid.ts"],"sourcesContent":["import * as uuidUtils from '../utils/uuid';\n\nconst testId = {\n  id: 0,\n};\n\n/**\n * Returnerer en unik, forutsigbar id hver gang uuid() kalles\n */\njest.spyOn(uuidUtils, 'uuid').mockImplementation(() => {\n  testId.id++;\n  return `testid-${testId.id}`;\n});\n"],"names":["testId","uuidUtils"],"mappings":"+DAEA,MAAMA,EAAS,CACb,GAAI,CACN,EAKA,KAAK,MAAMC,EAAW,MAAM,EAAE,mBAAmB,KACxCD,EAAA,KACA,UAAUA,EAAO,KACzB"}

package/components/AnchorLink/index.js

@@ -1,2 +1,2 @@
-import"../../AnchorLink.js";import{A as x}from"../../AnchorLink.js";import"react";import"../Icons/Icon.js";import"classnames";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../Icons/ArrowUpRight.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"./styles.module.scss";export{x as default};
+import"../../AnchorLink.js";import{A as L}from"../../AnchorLink.js";import"react";import"../Icons/Icon.js";import"classnames";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"./styles.module.scss";export{L as default};
 //# sourceMappingURL=index.js.map

package/components/Avatar/index.js

@@ -1,2 +1,2 @@
-import a from"react";import{Icon as d}from"../Icons/Icon.js";import{AnalyticsId as p,IconSize as f}from"../../constants.js";import v from"../Icons/Check.js";import u from"classnames";import t from"./styles.module.scss";import{palette as c}from"../../theme/palette.js";import"../../hooks/useUuid.js";import"../../uuid.js";const z=a.forwardRef(function(s,l){const{children:e,className:m="",selected:r=!1,variant:o="normal",testId:n}=s,i=e.charAt(0).toLocaleUpperCase()+e.substring(1,2);return a.createElement("span",{className:u(t.avatar,r&&t["avatar--selected"],o==="black"&&t["avatar--black"],m),ref:l,"data-testid":n,"data-analyticsid":p.Avatar},r?a.createElement(d,{svgIcon:v,size:f.Small,color:o==="black"?c.neutral900:c.blueberry600}):i)});export{z as default};
+import a from"react";import{Icon as p}from"../Icons/Icon.js";import{AnalyticsId as d,IconSize as f}from"../../constants.js";import v from"../Icons/Check.js";import u from"classnames";import t from"./styles.module.scss";import{palette as c}from"../../theme/palette.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";const C=a.forwardRef(function(s,m){const{children:r,className:l="",selected:e=!1,variant:o="normal",testId:i}=s,n=r.charAt(0).toLocaleUpperCase()+r.substring(1,2);return a.createElement("span",{className:u(t.avatar,e&&t["avatar--selected"],o==="black"&&t["avatar--black"],l),ref:m,"data-testid":i,"data-analyticsid":d.Avatar},e?a.createElement(p,{svgIcon:v,size:f.Small,color:o==="black"?c.neutral900:c.blueberry600}):n)});export{C as default};
 //# sourceMappingURL=index.js.map

package/components/Avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport Icon, { IconSize } from '../Icons';\nimport Check from '../Icons/Check';\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nimport { palette } from '../../theme/palette';\nimport { AnalyticsId } from '../../constants';\n\ninterface AvatarProps {\n  /** Name to display in the avatar. Will be truncated to the first two characters. */\n  children: string;\n  /** Displays a check icon to indicated the selected state. */\n  selected?: boolean;\n  /** background and color will be determined on variant. */\n  variant?: 'normal' | 'black';\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Avatar = React.forwardRef(function AvatarForwardedRef(props: AvatarProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', selected = false, variant = 'normal', testId } = props;\n  const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);\n  return (\n    <span\n      className={cn(styles.avatar, selected && styles['avatar--selected'], variant === 'black' && styles['avatar--black'], className)}\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Avatar}\n    >\n      {selected ? (\n        <Icon svgIcon={Check} size={IconSize.Small} color={variant === 'black' ? palette.neutral900 : palette.blueberry600} />\n      ) : (\n        truncatedName\n      )}\n    </span>\n  );\n});\n\nexport default Avatar;\n"],"names":["Avatar","React","props","ref","children","className","selected","variant","testId","truncatedName","cn","styles","AnalyticsId","Icon","Check","IconSize","palette"],"mappings":"iUAuBA,MAAMA,EAASC,EAAM,WAAW,SAA4BC,EAAoBC,EAAsC,CAC9G,KAAA,CAAE,SAAAC,EAAU,UAAAC,EAAY,GAAI,SAAAC,EAAW,GAAO,QAAAC,EAAU,SAAU,OAAAC,CAAW,EAAAN,EAC7EO,EAAgBL,EAAS,OAAO,CAAC,EAAE,kBAAsB,EAAAA,EAAS,UAAU,EAAG,CAAC,EACtF,OACGH,EAAA,cAAA,OAAA,CACC,UAAWS,EAAGC,EAAO,OAAQL,GAAYK,EAAO,oBAAqBJ,IAAY,SAAWI,EAAO,iBAAkBN,CAAS,EAC9H,IAAAF,EACA,cAAaK,EACb,mBAAkBI,EAAY,MAAA,EAE7BN,EACEL,EAAA,cAAAY,EAAA,CAAK,QAASC,EAAO,KAAMC,EAAS,MAAO,MAAOR,IAAY,QAAUS,EAAQ,WAAaA,EAAQ,YAAA,CAAc,EAEpHP,CAEJ,CAEJ,CAAC"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport Icon, { IconSize } from '../Icons';\nimport Check from '../Icons/Check';\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nimport { palette } from '../../theme/palette';\nimport { AnalyticsId } from '../../constants';\n\ninterface AvatarProps {\n  /** Name to display in the avatar. Will be truncated to the first two characters. */\n  children: string;\n  /** Displays a check icon to indicated the selected state. */\n  selected?: boolean;\n  /** background and color will be determined on variant. */\n  variant?: 'normal' | 'black';\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Avatar = React.forwardRef(function AvatarForwardedRef(props: AvatarProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', selected = false, variant = 'normal', testId } = props;\n  const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);\n  return (\n    <span\n      className={cn(styles.avatar, selected && styles['avatar--selected'], variant === 'black' && styles['avatar--black'], className)}\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Avatar}\n    >\n      {selected ? (\n        <Icon svgIcon={Check} size={IconSize.Small} color={variant === 'black' ? palette.neutral900 : palette.blueberry600} />\n      ) : (\n        truncatedName\n      )}\n    </span>\n  );\n});\n\nexport default Avatar;\n"],"names":["Avatar","React","props","ref","children","className","selected","variant","testId","truncatedName","cn","styles","AnalyticsId","Icon","Check","IconSize","palette"],"mappings":"oWAuBA,MAAMA,EAASC,EAAM,WAAW,SAA4BC,EAAoBC,EAAsC,CAC9G,KAAA,CAAE,SAAAC,EAAU,UAAAC,EAAY,GAAI,SAAAC,EAAW,GAAO,QAAAC,EAAU,SAAU,OAAAC,CAAW,EAAAN,EAC7EO,EAAgBL,EAAS,OAAO,CAAC,EAAE,kBAAsB,EAAAA,EAAS,UAAU,EAAG,CAAC,EACtF,OACGH,EAAA,cAAA,OAAA,CACC,UAAWS,EAAGC,EAAO,OAAQL,GAAYK,EAAO,oBAAqBJ,IAAY,SAAWI,EAAO,iBAAkBN,CAAS,EAC9H,IAAAF,EACA,cAAaK,EACb,mBAAkBI,EAAY,MAAA,EAE7BN,EACEL,EAAA,cAAAY,EAAA,CAAK,QAASC,EAAO,KAAMC,EAAS,MAAO,MAAOR,IAAY,QAAUS,EAAQ,WAAaA,EAAQ,YAAA,CAAc,EAEpHP,CAEJ,CAEJ,CAAC"}

package/components/Button/index.js

@@ -1,2 +1,2 @@
-import"../../Button.js";import{B as q}from"../../Button.js";import"react";import"../../constants.js";import"../../uuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Icon.js";import"classnames";import"../../hooks/useUuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"./styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../debounce.js";export{q as default};
+import"../../Button.js";import{B as v}from"../../Button.js";import"react";import"../../constants.js";import"../../utils/environment.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Icon.js";import"classnames";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"./styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";export{v as default};
 //# sourceMappingURL=index.js.map

package/components/ButtonWithModal/index.js

@@ -1,2 +1,2 @@
-import t,{useState as i}from"react";import{B as p}from"../../Button.js";import{M as e}from"../../Modal.js";import"../../constants.js";import"../../uuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Icon.js";import"classnames";import"../../hooks/useUuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../debounce.js";import"../Modal/styles.module.scss";import"../Icons/AlertSignStroke.js";import"../Icons/AlertSignFill.js";import"../../hooks/useFocusTrap.js";import"../../hooks/focus-utils.js";import"../../hooks/useFocusableElements.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../Title.js";import"../Title/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../Icons/CheckOutline.js";import"../Portal/index.js";import"react-dom";const P=t.forwardRef(function(o,d){const[m,r]=i(!1);return t.createElement("div",{"data-testid":o.testId},t.createElement(p,{onClick:()=>r(!0)},o.buttonText),m&&t.createElement(e,{...o,onClose:()=>r(!1)}))});export{P as default};
+import t,{useState as i}from"react";import{B as p}from"../../Button.js";import{M as e}from"../../Modal.js";import"../../constants.js";import"../../utils/environment.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Icon.js";import"classnames";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../Modal/styles.module.scss";import"../Icons/AlertSignStroke.js";import"../Icons/AlertSignFill.js";import"../../hooks/useFocusTrap.js";import"../../utils/focus.js";import"../../hooks/useFocusableElements.js";import"../../hooks/useElementList.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../Title.js";import"../Title/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../Icons/CheckOutline.js";import"../Portal/index.js";import"react-dom";const U=t.forwardRef(function(o,d){const[m,r]=i(!1);return t.createElement("div",{"data-testid":o.testId},t.createElement(p,{onClick:()=>r(!0)},o.buttonText),m&&t.createElement(e,{...o,onClose:()=>r(!1)}))});export{U as default};
 //# sourceMappingURL=index.js.map

package/components/ButtonWithModal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ButtonWithModal/ButtonWithModal.tsx"],"sourcesContent":["/* istanbul ignore file */\nimport React, { useState } from 'react';\nimport Button from '../Button';\nimport Modal, { ModalProps } from '../Modal/Modal';\n\ninterface ModalWithButtonProps extends ModalProps {\n  /** Text of the button */\n  buttonText: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst ModalWithButton = React.forwardRef(function ModalForwardedRef(props: ModalWithButtonProps, ref: React.ForwardedRef<HTMLElement>) {\n  const [showModal, setShowModal] = useState(false);\n\n  return (\n    <div data-testid={props.testId}>\n      <Button onClick={() => setShowModal(true)}>{props.buttonText}</Button>\n      {showModal && <Modal {...props} onClose={() => setShowModal(false)} />}\n    </div>\n  );\n});\n\nexport default ModalWithButton;\n"],"names":["ModalWithButton","React","props","ref","showModal","setShowModal","useState","Button","Modal"],"mappings":"8mCAYA,MAAMA,EAAkBC,EAAM,WAAW,SAA2BC,EAA6BC,EAAsC,CACrI,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAS,EAAK,EAEhD,OACGL,EAAA,cAAA,MAAA,CAAI,cAAaC,EAAM,MAAA,EACrBD,EAAA,cAAAM,EAAA,CAAO,QAAS,IAAMF,EAAa,EAAI,CAAA,EAAIH,EAAM,UAAW,EAC5DE,GAAcH,EAAA,cAAAO,EAAA,CAAO,GAAGN,EAAO,QAAS,IAAMG,EAAa,EAAK,CAAG,CAAA,CACtE,CAEJ,CAAC"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ButtonWithModal/ButtonWithModal.tsx"],"sourcesContent":["/* istanbul ignore file */\nimport React, { useState } from 'react';\nimport Button from '../Button';\nimport Modal, { ModalProps } from '../Modal/Modal';\n\ninterface ModalWithButtonProps extends ModalProps {\n  /** Text of the button */\n  buttonText: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst ModalWithButton = React.forwardRef(function ModalForwardedRef(props: ModalWithButtonProps, ref: React.ForwardedRef<HTMLElement>) {\n  const [showModal, setShowModal] = useState(false);\n\n  return (\n    <div data-testid={props.testId}>\n      <Button onClick={() => setShowModal(true)}>{props.buttonText}</Button>\n      {showModal && <Modal {...props} onClose={() => setShowModal(false)} />}\n    </div>\n  );\n});\n\nexport default ModalWithButton;\n"],"names":["ModalWithButton","React","props","ref","showModal","setShowModal","useState","Button","Modal"],"mappings":"urCAYA,MAAMA,EAAkBC,EAAM,WAAW,SAA2BC,EAA6BC,EAAsC,CACrI,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAS,EAAK,EAEhD,OACGL,EAAA,cAAA,MAAA,CAAI,cAAaC,EAAM,MAAA,EACrBD,EAAA,cAAAM,EAAA,CAAO,QAAS,IAAMF,EAAa,EAAI,CAAA,EAAIH,EAAM,UAAW,EAC5DE,GAAcH,EAAA,cAAAO,EAAA,CAAO,GAAGN,EAAO,QAAS,IAAMG,EAAa,EAAK,CAAG,CAAA,CACtE,CAEJ,CAAC"}

package/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormMode, FormVariant } from '../../constants';
-export interface CheckboxProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'value' | 'disabled' | 'checked' | 'required'> {
+export interface CheckboxProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'> {
     /** Adds custom classes to the element. */
     className?: string;
     /** The label text next to the checkbox */

package/components/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAUnD,OAAO,EAAe,QAAQ,EAAE,WAAW,EAAY,MAAM,iBAAiB,CAAC;AAE/E,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;IACjH,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,iHAAiH;IACjH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,QAAQ,wFAgFnB,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAUnD,OAAO,EAAe,QAAQ,EAAE,WAAW,EAAY,MAAM,iBAAiB,CAAC;AAE/E,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC9H,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,iHAAiH;IACjH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,QAAQ,wFAyFnB,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/components/Checkbox/componentdata.json

@@ -1 +1 @@
-{"props":{"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"},"declarations":[{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"}],"required":false,"type":{"name":"string"}},"label":{"defaultValue":null,"description":"The label text next to the checkbox","name":"label","parent":{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"},"declarations":[{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"}],"required":true,"type":{"name":"string"}},"inputId":{"defaultValue":null,"description":"input id of the checkbox","name":"inputId","parent":{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"},"declarations":[{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"}],"required":false,"type":{"name":"string"}},"mode":{"defaultValue":null,"description":"Changes the visuals of the checkbox","name":"mode","parent":{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"},"declarations":[{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"ondark\""},{"value":"\"oninvalid\""}]}},"variant":{"defaultValue":null,"description":"Changes the visuals of the checkbox","name":"variant","parent":{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"},"declarations":[{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"bigform\"","value":[{"value":"\"normal\""},{"value":"\"bigform\""}]}},"error":{"defaultValue":null,"description":"Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup","name":"error","parent":{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"},"declarations":[{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"}],"required":false,"type":{"name":"boolean"}},"errorText":{"defaultValue":null,"description":"Error text to show above the component","name":"errorText","parent":{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"},"declarations":[{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"},"declarations":[{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"}],"required":false,"type":{"name":"string"}},"name":{"defaultValue":null,"description":"","name":"name","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"value":{"defaultValue":null,"description":"","name":"value","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}},"disabled":{"defaultValue":null,"description":"","name":"disabled","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"checked":{"defaultValue":null,"description":"","name":"checked","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"required":{"defaultValue":null,"description":"","name":"required","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}}}}
+{"props":{"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"},"declarations":[{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"}],"required":false,"type":{"name":"string"}},"label":{"defaultValue":null,"description":"The label text next to the checkbox","name":"label","parent":{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"},"declarations":[{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"}],"required":true,"type":{"name":"string"}},"inputId":{"defaultValue":null,"description":"input id of the checkbox","name":"inputId","parent":{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"},"declarations":[{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"}],"required":false,"type":{"name":"string"}},"mode":{"defaultValue":null,"description":"Changes the visuals of the checkbox","name":"mode","parent":{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"},"declarations":[{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"ondark\""},{"value":"\"oninvalid\""}]}},"variant":{"defaultValue":null,"description":"Changes the visuals of the checkbox","name":"variant","parent":{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"},"declarations":[{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"bigform\"","value":[{"value":"\"normal\""},{"value":"\"bigform\""}]}},"error":{"defaultValue":null,"description":"Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup","name":"error","parent":{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"},"declarations":[{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"}],"required":false,"type":{"name":"boolean"}},"errorText":{"defaultValue":null,"description":"Error text to show above the component","name":"errorText","parent":{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"},"declarations":[{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"},"declarations":[{"fileName":"src/components/Checkbox/Checkbox.tsx","name":"CheckboxProps"}],"required":false,"type":{"name":"string"}},"name":{"defaultValue":null,"description":"","name":"name","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"value":{"defaultValue":null,"description":"","name":"value","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}},"disabled":{"defaultValue":null,"description":"","name":"disabled","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"checked":{"defaultValue":null,"description":"","name":"checked","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"required":{"defaultValue":null,"description":"","name":"required","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"onChange":{"defaultValue":null,"description":"","name":"onChange","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"ChangeEventHandler<HTMLInputElement>"}}}}

package/components/Checkbox/index.js

@@ -1,2 +1,2 @@
-import"../../Checkbox.js";import{C as l,C as u}from"../../Checkbox.js";import"react";import"classnames";import"../../uuid.js";import"../Icons/Check.js";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"./styles.module.scss";export{l as Checkbox,u as default};
+import"../../Checkbox.js";import{C as u,C as g}from"../../Checkbox.js";import"react";import"classnames";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Check.js";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"./styles.module.scss";export{u as Checkbox,g as default};
 //# sourceMappingURL=index.js.map

package/components/Close/index.js

@@ -1,2 +1,2 @@
-import"../../Close.js";import{C as b}from"../../Close.js";import"react";import"../../theme/palette.js";import"../Icons/Icon.js";import"classnames";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../Icons/X.js";import"./styles.module.scss";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";export{b as default};
+import"../../Close.js";import{C as c}from"../../Close.js";import"react";import"../../theme/palette.js";import"../Icons/Icon.js";import"classnames";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/X.js";import"./styles.module.scss";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";export{c as default};
 //# sourceMappingURL=index.js.map

package/components/Dropdown/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAuBhD,oBAAY,YAAY;IACtB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,0BAA0B;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACjC,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA2JrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAuBhD,oBAAY,YAAY;IACtB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,0BAA0B;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACjC,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAsJrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/Dropdown/index.js

@@ -1,2 +1,2 @@
-import t,{useRef as f,useState as W}from"react";import v from"classnames";import{Icon as X}from"../Icons/Icon.js";import{KeyboardEventKey as r,AnalyticsId as j,IconSize as q}from"../../constants.js";import{theme as C}from"../../theme/index.js";import"../../hooks/useBreakpoint.js";import{useHover as F}from"../../hooks/useHover.js";import{useResizeObserver as G}from"../../hooks/useResizeObserver.js";import{useToggle as J}from"../../hooks/useToggle.js";import{useKeyboardEvent as Q}from"../../hooks/useKeyboardEvent.js";import{useOutsideEvent as Y}from"../../hooks/useOutsideEvent.js";import{useUuid as g}from"../../hooks/useUuid.js";import e from"./styles.module.scss";import Z from"../Icons/PlusSmall.js";import{B as M}from"../../Button.js";import"../../uuid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/usePrevious.js";import"../../theme/currys/color.js";import"../../hooks/useIcons.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../debounce.js";var ee=(s=>(s.onwhite="onwhite",s.ongrey="ongrey",s.onblueberry="onblueberry",s.oncherry="oncherry",s))(ee||{});const Ce=s=>{const{label:R,placeholder:A,closeText:O="Lukk",noCloseButton:$=!1,onToggle:H,open:K=!1,children:_,mode:d="onwhite",transparent:S=!1,fluid:y=!1,testId:z,disabled:c}=s,p=f(null),b=f(null),{hoverRef:m,isHovered:B}=F(),{value:a,toggleValue:w}=J(!c&&K,H),i=f(t.Children.map(_,()=>t.createRef())),[h,L]=W(),{width:T}=G(m)||{},E=g(),x=g(),I=g(),k=()=>{var o;w(),(o=b.current)==null||o.focus()},u=()=>{var o;w(),(o=m.current)==null||o.focus()},U=o=>{var N;if(o.preventDefault(),!i.current)return;if(a){if(o.key===r.Escape&&a){u();return}}else{k();return}const l=i.current.findIndex(V=>V.current===o.target);let n=l;o.key===r.Home?n=0:o.key===r.End?n=i.current.length-1:o.key===r.ArrowDown&&l<i.current.length-1?n=l+1:o.key===r.ArrowUp&&l>0?n=l-1:o.key===r.Enter&&l!==-1&&(n=l),n!==-1&&((N=i.current[n].current)==null||N.focus(),L(n))};Q("keydown",p,[r.ArrowDown,r.ArrowUp,r.End,r.Enter,r.Escape,r.Home],U),Y(p,()=>a&&u());const D=v(e.dropdown__toggle,!c&&{[e["dropdown__toggle--on-white"]]:d==="onwhite",[e["dropdown__toggle--on-grey"]]:d==="ongrey",[e["dropdown__toggle--on-blueberry"]]:d==="onblueberry",[e["dropdown__toggle--on-cherry"]]:d==="oncherry",[e["dropdown__toggle--transparent"]]:S,[e["dropdown__toggle--fluid"]]:y,[e["dropdown__toggle--open"]]:a}),P=v(e.dropdown__content,a&&e["dropdown__content--open"]);return t.createElement("div",{className:e.dropdown,ref:p},t.createElement("span",{id:E,className:e.dropdown__label},R),t.createElement("button",{type:"button",onClick:()=>!a&&k(),className:D,ref:m,"data-testid":z,"data-analyticsid":j.Dropdown,disabled:c,"aria-labelledby":x,"aria-haspopup":"listbox","aria-expanded":a},t.createElement("span",{id:x,className:e.dropdown__toggle__label},A),t.createElement(X,{color:c?C.palette.neutral500:C.palette.blueberry600,svgIcon:Z,className:e.dropdown__icon,isHovered:B,size:q.XSmall})),t.createElement("div",{className:P,style:{width:y?"100%":`${T}px`}},t.createElement("ul",{className:e.dropdown__options,role:"listbox","aria-labelledby":E,tabIndex:-1,"aria-activedescendant":typeof h<"u"?`${I}-${h}`:void 0,ref:b},t.Children.map(_,(o,l)=>{var n;return t.createElement("li",{className:e.dropdown__input,role:"option",id:`${I}-${l}`},t.cloneElement(o,{ref:(n=i.current)==null?void 0:n[l]}))})),!$&&t.createElement("div",{className:e.dropdown__close},t.createElement(M,{onClick:u,fluid:!0,"aria-expanded":a},O))))};export{ee as DropdownMode,Ce as default};
+import t,{useRef as f,useState as V}from"react";import k from"classnames";import{Icon as W}from"../Icons/Icon.js";import{KeyboardEventKey as r,AnalyticsId as X,IconSize as j}from"../../constants.js";import{theme as C}from"../../theme/index.js";import"../../hooks/useBreakpoint.js";import{useHover as q}from"../../hooks/useHover.js";import{useResizeObserver as F}from"../../hooks/useResizeObserver.js";import{useToggle as G}from"../../hooks/useToggle.js";import{useKeyboardEvent as J}from"../../hooks/useKeyboardEvent.js";import{useOutsideEvent as Q}from"../../hooks/useOutsideEvent.js";import{useUuid as g}from"../../hooks/useUuid.js";import e from"./styles.module.scss";import Y from"../Icons/PlusSmall.js";import{B as Z}from"../../Button.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/usePrevious.js";import"../../theme/currys/color.js";import"../../hooks/useIcons.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";var M=(s=>(s.onwhite="onwhite",s.ongrey="ongrey",s.onblueberry="onblueberry",s.oncherry="oncherry",s))(M||{});const Re=s=>{const{label:R,placeholder:A,closeText:K="Lukk",noCloseButton:O=!1,onToggle:$,open:H=!1,children:_,mode:d="onwhite",transparent:S=!1,fluid:b=!1,testId:z,disabled:c}=s,p=f(null),y=f(null),{hoverRef:m,isHovered:B}=q(),{value:a,toggleValue:w}=G(!c&&H,$),i=f(t.Children.map(_,()=>t.createRef())),[h,L]=V(),{width:T}=F(m)||{},E=g(),x=g(),I=g(),N=()=>{var o;w(),(o=y.current)==null||o.focus()},u=()=>{var o;w(),(o=m.current)==null||o.focus()};J(p,o=>{var v;if(o.preventDefault(),!i.current)return;if(a){if(o.key===r.Escape&&a){u();return}}else{N();return}const l=i.current.findIndex(P=>P.current===o.target);let n=l;o.key===r.Home?n=0:o.key===r.End?n=i.current.length-1:o.key===r.ArrowDown&&l<i.current.length-1?n=l+1:o.key===r.ArrowUp&&l>0?n=l-1:o.key===r.Enter&&l!==-1&&(n=l),n!==-1&&((v=i.current[n].current)==null||v.focus(),L(n))},[r.ArrowDown,r.ArrowUp,r.End,r.Enter,r.Escape,r.Home]),Q(p,()=>a&&u());const U=k(e.dropdown__toggle,!c&&{[e["dropdown__toggle--on-white"]]:d==="onwhite",[e["dropdown__toggle--on-grey"]]:d==="ongrey",[e["dropdown__toggle--on-blueberry"]]:d==="onblueberry",[e["dropdown__toggle--on-cherry"]]:d==="oncherry",[e["dropdown__toggle--transparent"]]:S,[e["dropdown__toggle--fluid"]]:b,[e["dropdown__toggle--open"]]:a}),D=k(e.dropdown__content,a&&e["dropdown__content--open"]);return t.createElement("div",{className:e.dropdown,ref:p},t.createElement("span",{id:E,className:e.dropdown__label},R),t.createElement("button",{type:"button",onClick:()=>!a&&N(),className:U,ref:m,"data-testid":z,"data-analyticsid":X.Dropdown,disabled:c,"aria-labelledby":x,"aria-haspopup":"listbox","aria-expanded":a},t.createElement("span",{id:x,className:e.dropdown__toggle__label},A),t.createElement(W,{color:c?C.palette.neutral500:C.palette.blueberry600,svgIcon:Y,className:e.dropdown__icon,isHovered:B,size:j.XSmall})),t.createElement("div",{className:D,style:{width:b?"100%":`${T}px`}},t.createElement("ul",{className:e.dropdown__options,role:"listbox","aria-labelledby":E,tabIndex:-1,"aria-activedescendant":typeof h<"u"?`${I}-${h}`:void 0,ref:y},t.Children.map(_,(o,l)=>{var n;return t.createElement("li",{className:e.dropdown__input,role:"option",id:`${I}-${l}`},t.cloneElement(o,{ref:(n=i.current)==null?void 0:n[l]}))})),!O&&t.createElement("div",{className:e.dropdown__close},t.createElement(Z,{onClick:u,fluid:!0,"aria-expanded":a},K))))};export{M as DropdownMode,Re as default};
 //# sourceMappingURL=index.js.map