@helsenorge/designsystem-react 2.14.0 → 2.16.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  const hasBadge = statusMessage && status === PanelStatus.new;\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  const titleClasses = classNames(panelStyles['panel-content-a__title'], { [panelStyles['panel-content-a__title--badge']]: hasBadge });\n\n  const renderDetailsButton = (): JSX.Element => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\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} className={titleClasses}>\n                  {title}\n                </Title>\n                {hasBadge && (\n                  <div className={panelStyles.panel__badge}>\n                    <Badge color=\"blueberry\" testId=\"badge-status\">\n                      {statusMessage}\n                    </Badge>\n                  </div>\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","hasBadge","useEffect","layout3","panelWrapperClass","panelClasses","panelContainer","panelContentLeftClass","panelContentRightClass","panelContentBClass","panelActionBtnClass","titleClasses","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 { 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 hasBadge = statusMessage && status === PanelStatus.new;\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  const titleClasses = classNames(panelStyles['panel-content-a__title'], { [panelStyles['panel-content-a__title--badge']]: hasBadge });\n\n  const renderDetailsButton = (): JSX.Element => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\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} className={titleClasses}>\n                  {title}\n                </Title>\n                {hasBadge && (\n                  <div className={panelStyles.panel__badge}>\n                    <Badge color=\"blueberry\" testId=\"badge-status\">\n                      {statusMessage}\n                    </Badge>\n                  </div>\n                )}\n              </div>\n            )}\n            {contentA}\n          </div>\n          <div className={panelContentRightClass}>\n            {contentB && <div className={panelContentBClass}>{contentB}</div>}\n            {(children || url || date || time || buttonOnClick) && (\n              <div className={btnContainerClass}>\n                {<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","hasBadge","useEffect","layout3","panelWrapperClass","panelClasses","panelContainer","panelContentLeftClass","panelContentRightClass","panelContentBClass","panelActionBtnClass","titleClasses","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","btnContainerClass","renderContent","panelDetailsClasses","AnalyticsId","Title","Badge"],"mappings":"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"}

package/StatusDot.js

@@ -1,2 +1,2 @@
-import o from"react";import t from"classnames";import r from"./components/StatusDot/styles.module.scss";import{IconSize as a,AnalyticsId as _}from"./constants.js";import{Icon as n}from"./components/Icons/Icon.js";import v from"./components/Icons/Undo.js";import{getColor as I}from"./theme/currys/color.js";import E from"./components/Icons/Group.js";import N from"./components/Icons/NoAccess.js";import"./theme/grid.js";import"./hooks/useBreakpoint.js";var X=(e=>(e.info="info",e.warning="warning",e.alert="alert",e.cancelled="cancelled",e.active="active",e.transparent="transparent",e.recurring="recurring",e.group="group",e.noaccess="noaccess",e))(X||{});const U=o.forwardRef(function(m,C){const{variant:s="info",text:i,className:d}=m,l=s==="recurring"||s==="group"||s==="noaccess",p=s==="cancelled",f=t(r.statusdot,{[r["statusdot--cancelled"]]:p},d),g=t(r.statusdot__dot,[l?r["statusdot__dot--icon"]:r[`statusdot__dot--${s}`]]),u=t(r.statusdot__label,{[r["statusdot__label--icon"]]:l});let c=null;return s==="recurring"?c=o.createElement(n,{size:a.XXSmall,svgIcon:v}):s==="group"?c=o.createElement(n,{size:a.XXSmall,svgIcon:E}):s==="noaccess"&&(c=o.createElement(n,{size:a.XXSmall,svgIcon:N,color:I("cherry",600)})),o.createElement("div",{className:f,"data-analyticsid":_.StatusDot},o.createElement("span",{className:g},c),o.createElement("span",{className:u},i))});export{U as S,X as a};
+import t from"react";import n from"classnames";import"./theme/grid.js";import"./hooks/useBreakpoint.js";import{AnalyticsId as g,IconSize as o}from"./constants.js";import{getColor as I}from"./theme/currys/color.js";import _ from"./components/Icons/Attachment.js";import E from"./components/Icons/Group.js";import{Icon as r}from"./components/Icons/Icon.js";import X from"./components/Icons/NoAccess.js";import h from"./components/Icons/Undo.js";import c from"./components/StatusDot/styles.module.scss";var v=(e=>(e.info="info",e.warning="warning",e.alert="alert",e.cancelled="cancelled",e.active="active",e.transparent="transparent",e.recurring="recurring",e.group="group",e.noaccess="noaccess",e.attachment="attachment",e))(v||{});const N=({variant:e})=>e==="recurring"?t.createElement(r,{size:o.XXSmall,svgIcon:h}):e==="group"?t.createElement(r,{size:o.XXSmall,svgIcon:E}):e==="noaccess"?t.createElement(r,{size:o.XXSmall,svgIcon:X,color:I("cherry",600)}):e==="attachment"?t.createElement(r,{size:o.XXSmall,svgIcon:_}):null,k=e=>{const{variant:s="info",text:a,className:m,testId:i}=e,l=s==="recurring"||s==="group"||s==="noaccess"||s==="attachment",d=s==="cancelled",p=n(c.statusdot,d&&c["statusdot--cancelled"],m),u=n(c.statusdot__dot,l?c["statusdot__dot--icon"]:c[`statusdot__dot--${s}`]),f=n(c.statusdot__label,l&&c["statusdot__label--icon"]);return t.createElement("div",{className:p,"data-testid":i,"data-analyticsid":g.StatusDot},t.createElement("span",{className:u},t.createElement(N,{variant:s})),t.createElement("span",{className:f},a))};export{k as S,v as a};
 //# sourceMappingURL=StatusDot.js.map

package/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport statusDotStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { Icon } from '../Icons/Icon';\nimport Undo from '../Icons/Undo';\nimport { getColor } from '../../theme/currys';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\nimport { IconSize } from '../..';\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n}\n\nexport interface StatusDotProps {\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: StatusDotProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { variant = StatusDotVariant.info, text, className } = props;\n  const hasIcon = variant === StatusDotVariant.recurring || variant === StatusDotVariant.group || variant === StatusDotVariant.noaccess;\n  const isCancelled = variant === StatusDotVariant.cancelled;\n  const statusDotClasses = classNames(statusDotStyles['statusdot'], { [statusDotStyles['statusdot--cancelled']]: isCancelled }, className);\n  const dotClasses = classNames(statusDotStyles['statusdot__dot'], [\n    hasIcon ? statusDotStyles[`statusdot__dot--icon`] : statusDotStyles[`statusdot__dot--${variant}`],\n  ]);\n  const labelClasses = classNames(statusDotStyles['statusdot__label'], {\n    [statusDotStyles[`statusdot__label--icon`]]: hasIcon,\n  });\n  let svgIcon: JSX.Element | null = null;\n\n  if (variant === StatusDotVariant.recurring) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={Undo} />;\n  } else if (variant === StatusDotVariant.group) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  }\n\n  return (\n    <div className={statusDotClasses} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>{svgIcon}</span>\n      <span className={labelClasses}>{text}</span>\n    </div>\n  );\n});\n\nexport default Spacer;\n"],"names":["StatusDotVariant","Spacer","React","props","ref","variant","text","className","hasIcon","isCancelled","statusDotClasses","classNames","statusDotStyles","dotClasses","labelClasses","svgIcon","Icon","IconSize","Undo","Group","NoAccess","getColor","AnalyticsId"],"mappings":"ocAaY,IAAAA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,UAAY,YACZA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,UAAY,YACZA,EAAA,MAAQ,QACRA,EAAA,SAAW,WATDA,IAAAA,GAAA,CAAA,CAAA,EAqBZ,MAAMC,EAASC,EAAM,WAAW,SAA4BC,EAAuBC,EAAsC,CACvH,KAAM,CAAE,QAAAC,EAAU,OAAuB,KAAAC,EAAM,UAAAC,GAAcJ,EACvDK,EAAUH,IAAY,aAA8BA,IAAY,SAA0BA,IAAY,WACtGI,EAAcJ,IAAY,YAC1BK,EAAmBC,EAAWC,EAAgB,UAAc,CAAE,CAACA,EAAgB,yBAA0BH,CAAY,EAAGF,CAAS,EACjIM,EAAaF,EAAWC,EAAgB,eAAmB,CAC/DJ,EAAUI,EAAgB,wBAA0BA,EAAgB,mBAAmBP,IAAA,CACxF,EACKS,EAAeH,EAAWC,EAAgB,iBAAqB,CACnE,CAACA,EAAgB,2BAA4BJ,CAAA,CAC9C,EACD,IAAIO,EAA8B,KAElC,OAAIV,IAAY,YACdU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASC,CAAA,CAAM,EAC9Cb,IAAY,QACrBU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASE,CAAA,CAAO,EAC/Cd,IAAY,aACrBU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASG,EAAU,MAAOC,EAAS,SAAU,GAAG,CAAA,CAAG,GAI1FnB,EAAA,cAAA,MAAA,CAAI,UAAWQ,EAAkB,mBAAkBY,EAAY,SAAA,EAC7DpB,EAAA,cAAA,OAAA,CAAK,UAAWW,CAAa,EAAAE,CAAQ,EACrCb,EAAA,cAAA,OAAA,CAAK,UAAWY,CAAA,EAAeR,CAAK,CACvC,CAEJ,CAAC"}
+{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport Attachment from '../Icons/Attachment';\nimport Group from '../Icons/Group';\nimport { Icon } from '../Icons/Icon';\nimport NoAccess from '../Icons/NoAccess';\nimport Undo from '../Icons/Undo';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ variant }) => {\n  if (variant === StatusDotVariant.recurring) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Undo} />;\n  } else if (variant === StatusDotVariant.group) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    return <Icon size={IconSize.XXSmall} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  } else if (variant === StatusDotVariant.attachment) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Attachment} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const hasIcon =\n    variant === StatusDotVariant.recurring ||\n    variant === StatusDotVariant.group ||\n    variant === StatusDotVariant.noaccess ||\n    variant === StatusDotVariant.attachment;\n\n  const isCancelled = variant === StatusDotVariant.cancelled;\n\n  const statusDotClasses = classNames(styles['statusdot'], isCancelled && styles['statusdot--cancelled'], className);\n  const dotClasses = classNames(styles['statusdot__dot'], hasIcon ? styles[`statusdot__dot--icon`] : styles[`statusdot__dot--${variant}`]);\n  const labelClasses = classNames(styles['statusdot__label'], hasIcon && styles[`statusdot__label--icon`]);\n\n  return (\n    <div className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>\n        <StatusDotIcon variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </div>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotVariant","StatusDotIcon","variant","React","Icon","IconSize","Undo","Group","NoAccess","getColor","Attachment","StatusDot","props","text","className","testId","hasIcon","isCancelled","statusDotClasses","classNames","styles","dotClasses","labelClasses","AnalyticsId"],"mappings":"ofAeY,IAAAA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,UAAY,YACZA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,UAAY,YACZA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,WAAa,aAVHA,IAAAA,GAAA,CAAA,CAAA,EAiBZ,MAAMC,EAA8C,CAAC,CAAE,QAAAC,KACjDA,IAAY,YACNC,EAAA,cAAAC,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASC,CAAA,CAAM,EAC3CJ,IAAY,QACbC,EAAA,cAAAC,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASE,CAAA,CAAO,EAC5CL,IAAY,WACbC,EAAA,cAAAC,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASG,EAAU,MAAOC,EAAS,SAAU,GAAG,CAAA,CAAG,EAC/EP,IAAY,aACbC,EAAA,cAAAC,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASK,CAAA,CAAY,EAGrD,KAcHC,EAA+CC,GAAA,CACnD,KAAM,CAAE,QAAAV,EAAU,OAAuB,KAAAW,EAAM,UAAAC,EAAW,OAAAC,CAAW,EAAAH,EAE/DI,EACJd,IAAY,aACZA,IAAY,SACZA,IAAY,YACZA,IAAY,aAERe,EAAcf,IAAY,YAE1BgB,EAAmBC,EAAWC,EAAO,UAAcH,GAAeG,EAAO,wBAAyBN,CAAS,EAC3GO,EAAaF,EAAWC,EAAO,eAAmBJ,EAAUI,EAAO,wBAA0BA,EAAO,mBAAmBlB,IAAU,EACjIoB,EAAeH,EAAWC,EAAO,iBAAqBJ,GAAWI,EAAO,yBAAyB,EAEvG,OACGjB,EAAA,cAAA,MAAA,CAAI,UAAWe,EAAkB,cAAaH,EAAQ,mBAAkBQ,EAAY,SAAA,EAClFpB,EAAA,cAAA,OAAA,CAAK,UAAWkB,CAAA,EACdlB,EAAA,cAAAF,EAAA,CAAc,QAAAC,CAAkB,CAAA,CACnC,EACCC,EAAA,cAAA,OAAA,CAAK,UAAWmB,CAAA,EAAeT,CAAK,CACvC,CAEJ"}

package/TableExpandedRow.js

@@ -1,2 +1,2 @@
-import t from"react";import o from"classnames";import e from"./components/Table/styles.module.scss";import{B as b}from"./Button.js";import{Icon as i}from"./components/Icons/Icon.js";import _ from"./components/Icons/ChevronUp.js";const N=function({numberOfColumns:r,expanded:a,hideDetailsText:l,toggleClick:s,children:c,className:n}){const m=o(e["table__expanded-row"],{[e["table__expanded-row--expanded"]]:a},n),d=o(e.table__cell,n),p=o(e["table__expanded-row-container"],{[e["table__expanded-row-container--expanded"]]:a});return t.createElement("tr",{className:m},t.createElement("td",{colSpan:r,className:d},t.createElement("div",{className:p},c,t.createElement(b,{className:e["table__expanded-row-button"],variant:"borderless",onClick:s,tabIndex:a?0:-1},l,t.createElement(i,{svgIcon:_})))))};export{N as T};
+import e from"react";import o from"classnames";import a from"./components/Table/styles.module.scss";import{B as i}from"./Button.js";import{Icon as b}from"./components/Icons/Icon.js";import _ from"./components/Icons/ChevronUp.js";const u=function({numberOfColumns:n,expanded:t,hideDetailsText:l,toggleClick:s,children:c,className:r}){const m=o(a["table__expanded-row"],{[a["table__expanded-row--expanded"]]:t},r),d=o(a.table__cell,r),p=o(a["table__expanded-row-container"],{[a["table__expanded-row-container--expanded"]]:t});return e.createElement("tr",{className:m},e.createElement("td",{colSpan:n,className:d},e.createElement("div",{className:p},c,e.createElement(i,{variant:"borderless",onClick:s,"aria-expanded":t,tabIndex:t?0:-1},l,e.createElement(b,{svgIcon:_})))))};export{u as T};
 //# sourceMappingURL=TableExpandedRow.js.map

package/TableExpandedRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableExpandedRow.js","sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport tableStyles from '../styles.module.scss';\nimport Button from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronUp from '../../Icons/ChevronUp';\n\nexport interface Props {\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Number of columns in table. */\n  numberOfColumns: number;\n  /** Text for hide button. */\n  hideDetailsText: string;\n  /** When hide button inside expanded row is clicked. */\n  toggleClick: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the expanded row.  */\n  children: React.ReactNode;\n}\n\nexport const TableExpandedRow = function TableExpandedRow({\n  numberOfColumns,\n  expanded,\n  hideDetailsText,\n  toggleClick,\n  children,\n  className,\n}: Props) {\n  const tableRowClass = classNames(\n    tableStyles['table__expanded-row'],\n    { [tableStyles['table__expanded-row--expanded']]: expanded },\n    className\n  );\n  const tableCellClass = classNames(tableStyles['table__cell'], className);\n\n  const containerClass = classNames(tableStyles['table__expanded-row-container'], {\n    [tableStyles['table__expanded-row-container--expanded']]: expanded,\n  });\n\n  return (\n    <tr className={tableRowClass}>\n      <td colSpan={numberOfColumns} className={tableCellClass}>\n        <div className={containerClass}>\n          {children}\n          <Button\n            className={tableStyles['table__expanded-row-button']}\n            variant={'borderless'}\n            onClick={toggleClick}\n            tabIndex={expanded ? 0 : -1}\n          >\n            {hideDetailsText}\n            <Icon svgIcon={ChevronUp} />\n          </Button>\n        </div>\n      </td>\n    </tr>\n  );\n};\n\nexport default TableExpandedRow;\n"],"names":["TableExpandedRow","numberOfColumns","expanded","hideDetailsText","toggleClick","children","className","tableRowClass","classNames","tableStyles","tableCellClass","containerClass","React","Button","Icon","ChevronUp"],"mappings":"qOAsBa,MAAAA,EAAmB,SAA0B,CACxD,gBAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAU,CACR,MAAMC,EAAgBC,EACpBC,EAAY,uBACZ,CAAE,CAACA,EAAY,kCAAmCP,CAAS,EAC3DI,CAAA,EAEII,EAAiBF,EAAWC,EAAY,YAAgBH,CAAS,EAEjEK,EAAiBH,EAAWC,EAAY,iCAAkC,CAC9E,CAACA,EAAY,4CAA6CP,CAAA,CAC3D,EAED,OACGU,EAAA,cAAA,KAAA,CAAG,UAAWL,CAAA,EACZK,EAAA,cAAA,KAAA,CAAG,QAASX,EAAiB,UAAWS,CAAA,EACtCE,EAAA,cAAA,MAAA,CAAI,UAAWD,CAAA,EACbN,EACAO,EAAA,cAAAC,EAAA,CACC,UAAWJ,EAAY,8BACvB,QAAS,aACT,QAASL,EACT,SAAUF,EAAW,EAAI,EAAA,EAExBC,EACAS,EAAA,cAAAE,EAAA,CAAK,QAASC,CAAA,CAAW,CAC5B,CACF,CACF,CACF,CAEJ"}
+{"version":3,"file":"TableExpandedRow.js","sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport tableStyles from '../styles.module.scss';\nimport Button from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronUp from '../../Icons/ChevronUp';\n\nexport interface Props {\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Number of columns in table. */\n  numberOfColumns: number;\n  /** Text for hide button. */\n  hideDetailsText: string;\n  /** When hide button inside expanded row is clicked. */\n  toggleClick: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the expanded row.  */\n  children: React.ReactNode;\n}\n\nexport const TableExpandedRow = function TableExpandedRow({\n  numberOfColumns,\n  expanded,\n  hideDetailsText,\n  toggleClick,\n  children,\n  className,\n}: Props) {\n  const tableRowClass = classNames(\n    tableStyles['table__expanded-row'],\n    { [tableStyles['table__expanded-row--expanded']]: expanded },\n    className\n  );\n  const tableCellClass = classNames(tableStyles['table__cell'], className);\n\n  const containerClass = classNames(tableStyles['table__expanded-row-container'], {\n    [tableStyles['table__expanded-row-container--expanded']]: expanded,\n  });\n\n  return (\n    <tr className={tableRowClass}>\n      <td colSpan={numberOfColumns} className={tableCellClass}>\n        <div className={containerClass}>\n          {children}\n          <Button variant={'borderless'} onClick={toggleClick} aria-expanded={expanded} tabIndex={expanded ? 0 : -1}>\n            {hideDetailsText}\n            <Icon svgIcon={ChevronUp} />\n          </Button>\n        </div>\n      </td>\n    </tr>\n  );\n};\n\nexport default TableExpandedRow;\n"],"names":["TableExpandedRow","numberOfColumns","expanded","hideDetailsText","toggleClick","children","className","tableRowClass","classNames","tableStyles","tableCellClass","containerClass","React","Button","Icon","ChevronUp"],"mappings":"qOAsBa,MAAAA,EAAmB,SAA0B,CACxD,gBAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAU,CACR,MAAMC,EAAgBC,EACpBC,EAAY,uBACZ,CAAE,CAACA,EAAY,kCAAmCP,CAAS,EAC3DI,CAAA,EAEII,EAAiBF,EAAWC,EAAY,YAAgBH,CAAS,EAEjEK,EAAiBH,EAAWC,EAAY,iCAAkC,CAC9E,CAACA,EAAY,4CAA6CP,CAAA,CAC3D,EAED,OACGU,EAAA,cAAA,KAAA,CAAG,UAAWL,CAAA,EACZK,EAAA,cAAA,KAAA,CAAG,QAASX,EAAiB,UAAWS,CAAA,EACtCE,EAAA,cAAA,MAAA,CAAI,UAAWD,CAAA,EACbN,EACAO,EAAA,cAAAC,EAAA,CAAO,QAAS,aAAc,QAAST,EAAa,gBAAeF,EAAU,SAAUA,EAAW,EAAI,EAAA,EACpGC,EACAS,EAAA,cAAAE,EAAA,CAAK,QAASC,CAAA,CAAW,CAC5B,CACF,CACF,CACF,CAEJ"}

package/TableExpanderCell.js

@@ -1,2 +1,2 @@
-import o from"react";import s from"classnames";import l from"./components/Table/styles.module.scss";import{Icon as i}from"./components/Icons/Icon.js";import{B as p}from"./Button.js";import b from"./components/Icons/ChevronDown.js";import f from"./components/Icons/ChevronUp.js";import{palette as C}from"./theme/palette.js";const L=function({expandableRowId:e,hideDetailsText:t,showDetailsText:a,expanded:r,className:m}){const n=s(l.table__cell,l["table__cell-expander"],m),c=r?f:b;return o.createElement("td",{className:n,"aria-controls":e,"aria-label":r?t:a},o.createElement(p,{variant:"borderless","aria-expanded":r,"aria-controls":e,ariaLabel:r?t:a},o.createElement(i,{svgIcon:c,color:C.blueberry500})))};export{L as T};
+import r from"react";import c from"classnames";import t from"./components/Table/styles.module.scss";import{Icon as i}from"./components/Icons/Icon.js";import{B as p}from"./Button.js";import b from"./components/Icons/ChevronDown.js";import f from"./components/Icons/ChevronUp.js";const h=function({expandableRowId:o,hideDetailsText:a,showDetailsText:l,expanded:e,className:n}){const m=c(t.table__cell,t["table__cell-expander"],n),s=e?f:b;return r.createElement("td",{className:m},r.createElement(p,{variant:"borderless","aria-expanded":e,"aria-controls":o,ariaLabel:e?a:l},r.createElement(i,{svgIcon:s})))};export{h as T};
 //# sourceMappingURL=TableExpanderCell.js.map

package/TableExpanderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableExpanderCell.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport tableStyles from '../styles.module.scss';\nimport Icon from '../../Icons';\nimport Button from '../../Button';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { palette } from '../../../theme/palette';\n\nexport interface Props {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Id for expanded row. */\n  expandableRowId: string;\n  /** Text for hide button used for aria label. */\n  hideDetailsText: string;\n  /** Text for show button used for aria label. */\n  showDetailsText: string;\n}\n\nexport const TableExpanderCell = function TableExpanderCell({\n  expandableRowId,\n  hideDetailsText,\n  showDetailsText,\n  expanded,\n  className,\n}: Props) {\n  const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className);\n  const icon = expanded ? ChevronUp : ChevronDown;\n\n  return (\n    <td className={tableCellClass} aria-controls={expandableRowId} aria-label={expanded ? hideDetailsText : showDetailsText}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={expanded}\n        aria-controls={expandableRowId}\n        ariaLabel={expanded ? hideDetailsText : showDetailsText}\n      >\n        <Icon svgIcon={icon} color={palette.blueberry500}></Icon>\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCell;\n"],"names":["TableExpanderCell","expandableRowId","hideDetailsText","showDetailsText","expanded","className","tableCellClass","classNames","tableStyles","icon","ChevronUp","ChevronDown","React","Button","Icon","palette"],"mappings":"mUAsBa,MAAAA,EAAoB,SAA2B,CAC1D,gBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAU,CACR,MAAMC,EAAiBC,EAAWC,EAAY,YAAgBA,EAAY,wBAAyBH,CAAS,EACtGI,EAAOL,EAAWM,EAAYC,EAEpC,OACGC,EAAA,cAAA,KAAA,CAAG,UAAWN,EAAgB,gBAAeL,EAAiB,aAAYG,EAAWF,EAAkBC,CAAA,EACrGS,EAAA,cAAAC,EAAA,CACC,QAAQ,aACR,gBAAeT,EACf,gBAAeH,EACf,UAAWG,EAAWF,EAAkBC,CAAA,EAEvCS,EAAA,cAAAE,EAAA,CAAK,QAASL,EAAM,MAAOM,EAAQ,YAAc,CAAA,CACpD,CACF,CAEJ"}
+{"version":3,"file":"TableExpanderCell.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport tableStyles from '../styles.module.scss';\nimport Icon from '../../Icons';\nimport Button from '../../Button';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\n\nexport interface Props {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Id for expanded row. */\n  expandableRowId: string;\n  /** Text for hide button used for aria label. */\n  hideDetailsText: string;\n  /** Text for show button used for aria label. */\n  showDetailsText: string;\n}\n\nexport const TableExpanderCell = function TableExpanderCell({\n  expandableRowId,\n  hideDetailsText,\n  showDetailsText,\n  expanded,\n  className,\n}: Props) {\n  const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className);\n  const icon = expanded ? ChevronUp : ChevronDown;\n\n  return (\n    <td className={tableCellClass}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={expanded}\n        aria-controls={expandableRowId}\n        ariaLabel={expanded ? hideDetailsText : showDetailsText}\n      >\n        <Icon svgIcon={icon} />\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCell;\n"],"names":["TableExpanderCell","expandableRowId","hideDetailsText","showDetailsText","expanded","className","tableCellClass","classNames","tableStyles","icon","ChevronUp","ChevronDown","React","Button","Icon"],"mappings":"sRAqBa,MAAAA,EAAoB,SAA2B,CAC1D,gBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAU,CACR,MAAMC,EAAiBC,EAAWC,EAAY,YAAgBA,EAAY,wBAAyBH,CAAS,EACtGI,EAAOL,EAAWM,EAAYC,EAEpC,OACGC,EAAA,cAAA,KAAA,CAAG,UAAWN,CAAA,EACZM,EAAA,cAAAC,EAAA,CACC,QAAQ,aACR,gBAAeT,EACf,gBAAeH,EACf,UAAWG,EAAWF,EAAkBC,CAAA,EAEvCS,EAAA,cAAAE,EAAA,CAAK,QAASL,CAAM,CAAA,CACvB,CACF,CAEJ"}

package/TableRow.js

@@ -1,2 +1,2 @@
-import l from"react";import a from"classnames";import e from"./components/Table/styles.module.scss";import{B as x}from"./Button.js";import{Icon as u}from"./components/Icons/Icon.js";import w from"./components/Icons/ChevronUp.js";import C from"./components/Icons/ChevronDown.js";const h=function({rowKey:b,hideDetailsText:m,showDetailsText:s,expandable:r,expanded:t,onClick:o,className:c,children:i}){const p=a(e["table-row"],{[e["table__row--expandable"]]:r,[e["table__row--expanded"]]:t},c);let n=null;if(r){const _="expandableMobile",d=a(e.table__cell,e["table__expander-cell-mobile"],{[e["table__expander-cell-mobile--expanded"]]:t}),f=a(e["table__expander-button-mobile"],{[e["table__expander-button-mobile--expanded"]]:t});n=l.createElement("td",{key:_,className:d},l.createElement(x,{"aria-expanded":t,variant:"borderless",className:f,onClick:()=>{o&&o()}},l.createElement(u,{svgIcon:t?w:C})," ",t?m:s))}return l.createElement("tr",{className:p,onClick:o,key:b},i,n)};export{h as T};
+import r from"react";import n from"classnames";import t from"./components/Table/styles.module.scss";import{B as p}from"./Button.js";import{Icon as _}from"./components/Icons/Icon.js";import f from"./components/Icons/ChevronUp.js";import w from"./components/Icons/ChevronDown.js";const E=({expanded:e,onClick:a,hideDetailsText:m,showDetailsText:l})=>{const o=n(t.table__cell,t["table__expander-cell-mobile"],{[t["table__expander-cell-mobile--expanded"]]:e});return r.createElement("td",{className:o},r.createElement(p,{"aria-expanded":e,variant:"borderless",onClick:a},r.createElement(_,{svgIcon:e?f:w})," ",e?m:l))},T=({rowKey:e,hideDetailsText:a,showDetailsText:m,expandable:l,expanded:o,onClick:s,className:c,children:b})=>{const i=n(t["table-row"],{[t["table__row--expandable"]]:l,[t["table__row--expanded"]]:o},c);return r.createElement("tr",{className:i,onClick:s,key:e},b,l&&r.createElement(E,{expanded:o,onClick:s,hideDetailsText:a,showDetailsText:m}))};export{T};
 //# sourceMappingURL=TableRow.js.map

package/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport tableStyles from '../styles.module.scss';\n\nimport Button from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport ChevronDown from '../../Icons/ChevronDown';\n\nexport interface Props {\n  /** Sets if expanded row can be expanded */\n  expandable?: boolean;\n  /** Sets if expanded row is expanded */\n  expanded?: boolean;\n  /** When hide/show button for expanded row is clicked. */\n  onClick?: () => void;\n  /** Text for expanded row hide button. */\n  hideDetailsText?: string;\n  /** Text for expanded row show button. */\n  showDetailsText?: string;\n  /** Key attribute for row */\n  rowKey?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the cells of the table row element.  */\n  children?: React.ReactNode;\n}\n\nexport const TableRow = function TableRow({\n  rowKey,\n  hideDetailsText,\n  showDetailsText,\n  expandable,\n  expanded,\n  onClick,\n  className,\n  children,\n}: Props) {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n      [tableStyles['table__row--expanded']]: expanded,\n    },\n    className\n  );\n  let expandablerButtonMobile: JSX.Element | null = null;\n  if (expandable) {\n    const expandableKeyMobile = `expandableMobile`;\n    // Extra column to appear on smaller screens\n    const expanderCellMobileClass = classNames(tableStyles['table__cell'], tableStyles['table__expander-cell-mobile'], {\n      [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\n    });\n\n    const expanderButtonMobileClass = classNames(tableStyles['table__expander-button-mobile'], {\n      [tableStyles['table__expander-button-mobile--expanded']]: expanded,\n    });\n    expandablerButtonMobile = (\n      <td key={expandableKeyMobile} className={expanderCellMobileClass}>\n        <Button\n          aria-expanded={expanded}\n          variant=\"borderless\"\n          className={expanderButtonMobileClass}\n          onClick={() => {\n            onClick && onClick();\n          }}\n        >\n          <Icon svgIcon={expanded ? ChevronUp : ChevronDown} /> {expanded ? hideDetailsText : showDetailsText}\n        </Button>\n      </td>\n    );\n  }\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey}>\n      {children}\n      {expandablerButtonMobile}\n    </tr>\n  );\n};\n\nexport default TableRow;\n"],"names":["TableRow","rowKey","hideDetailsText","showDetailsText","expandable","expanded","onClick","className","children","tableRowClass","classNames","tableStyles","expandablerButtonMobile","expandableKeyMobile","expanderCellMobileClass","expanderButtonMobileClass","React","Button","Icon","ChevronUp","ChevronDown"],"mappings":"sRA4Ba,MAAAA,EAAW,SAAkB,CACxC,OAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,WAAAC,EACA,SAAAC,EACA,QAAAC,EACA,UAAAC,EACA,SAAAC,CACF,EAAU,CACR,MAAMC,EAAgBC,EACpBC,EAAY,aACZ,CACE,CAACA,EAAY,2BAA4BP,EACzC,CAACO,EAAY,yBAA0BN,CACzC,EACAE,CAAA,EAEF,IAAIK,EAA8C,KAClD,GAAIR,EAAY,CACd,MAAMS,EAAsB,mBAEtBC,EAA0BJ,EAAWC,EAAY,YAAgBA,EAAY,+BAAgC,CACjH,CAACA,EAAY,0CAA2CN,CAAA,CACzD,EAEKU,EAA4BL,EAAWC,EAAY,iCAAkC,CACzF,CAACA,EAAY,4CAA6CN,CAAA,CAC3D,EACDO,EACGI,EAAA,cAAA,KAAA,CAAG,IAAKH,EAAqB,UAAWC,CAAA,EACtCE,EAAA,cAAAC,EAAA,CACC,gBAAeZ,EACf,QAAQ,aACR,UAAWU,EACX,QAAS,IAAM,CACbT,GAAWA,EAAQ,CACrB,CAAA,EAECU,EAAA,cAAAE,EAAA,CAAK,QAASb,EAAWc,EAAYC,CAAa,CAAA,EAAE,IAAEf,EAAWH,EAAkBC,CACtF,CACF,CAEJ,CAEA,OACGa,EAAA,cAAA,KAAA,CAAG,UAAWP,EAAe,QAAAH,EAAkB,IAAKL,CAAA,EAClDO,EACAI,CACH,CAEJ"}
+{"version":3,"file":"TableRow.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport { Props } from '../TableRow/TableRow';\n\nimport tableStyles from '../styles.module.scss';\n\ntype TableExpanderCellMobile = Pick<Props, 'expanded' | 'onClick' | 'hideDetailsText' | 'showDetailsText'>;\n\nconst TableExpanderCellMobile: React.FC<TableExpanderCellMobile> = ({ expanded, onClick, hideDetailsText, showDetailsText }) => {\n  const cellClass = classNames(tableStyles.table__cell, tableStyles['table__expander-cell-mobile'], {\n    [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\n  });\n\n  return (\n    <td className={cellClass}>\n      <Button aria-expanded={expanded} variant=\"borderless\" onClick={onClick}>\n        <Icon svgIcon={expanded ? ChevronUp : ChevronDown} /> {expanded ? hideDetailsText : showDetailsText}\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCellMobile;\n","import React from 'react';\nimport classNames from 'classnames';\nimport tableStyles from '../styles.module.scss';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\n\nexport interface Props {\n  /** Sets if expanded row can be expanded */\n  expandable?: boolean;\n  /** Sets if expanded row is expanded */\n  expanded?: boolean;\n  /** When hide/show button for expanded row is clicked. */\n  onClick?: () => void;\n  /** Text for expanded row hide button. */\n  hideDetailsText?: string;\n  /** Text for expanded row show button. */\n  showDetailsText?: string;\n  /** Key attribute for row */\n  rowKey?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the cells of the table row element.  */\n  children?: React.ReactNode;\n}\n\nexport const TableRow: React.FC<Props> = ({\n  rowKey,\n  hideDetailsText,\n  showDetailsText,\n  expandable,\n  expanded,\n  onClick,\n  className,\n  children,\n}) => {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n      [tableStyles['table__row--expanded']]: expanded,\n    },\n    className\n  );\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey}>\n      {children}\n      {expandable && (\n        <TableExpanderCellMobile\n          expanded={expanded}\n          onClick={onClick}\n          hideDetailsText={hideDetailsText}\n          showDetailsText={showDetailsText}\n        />\n      )}\n    </tr>\n  );\n};\n\nexport default TableRow;\n"],"names":["TableExpanderCellMobile","expanded","onClick","hideDetailsText","showDetailsText","cellClass","classNames","tableStyles","React","Button","Icon","ChevronUp","ChevronDown","TableRow","rowKey","expandable","className","children","tableRowClass"],"mappings":"sRAaA,MAAMA,EAA6D,CAAC,CAAE,SAAAC,EAAU,QAAAC,EAAS,gBAAAC,EAAiB,gBAAAC,KAAsB,CAC9H,MAAMC,EAAYC,EAAWC,EAAY,YAAaA,EAAY,+BAAgC,CAChG,CAACA,EAAY,0CAA2CN,CAAA,CACzD,EAED,OACGO,EAAA,cAAA,KAAA,CAAG,UAAWH,CAAA,EACZG,EAAA,cAAAC,EAAA,CAAO,gBAAeR,EAAU,QAAQ,aAAa,QAAAC,CAAA,EACnDM,EAAA,cAAAE,EAAA,CAAK,QAAST,EAAWU,EAAYC,CAAa,CAAA,EAAE,IAAEX,EAAWE,EAAkBC,CACtF,CACF,CAEJ,ECDaS,EAA4B,CAAC,CACxC,OAAAC,EACA,gBAAAX,EACA,gBAAAC,EACA,WAAAW,EACA,SAAAd,EACA,QAAAC,EACA,UAAAc,EACA,SAAAC,CACF,IAAM,CACJ,MAAMC,EAAgBZ,EACpBC,EAAY,aACZ,CACE,CAACA,EAAY,2BAA4BQ,EACzC,CAACR,EAAY,yBAA0BN,CACzC,EACAe,CAAA,EAGF,OACGR,EAAA,cAAA,KAAA,CAAG,UAAWU,EAAe,QAAAhB,EAAkB,IAAKY,CAClD,EAAAG,EACAF,GACEP,EAAA,cAAAR,EAAA,CACC,SAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,gBAAAC,CACF,CAAA,CAEJ,CAEJ"}

package/Textarea.js

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

package/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\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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"}
+{"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';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\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,\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 onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const 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  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {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        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","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","onDark","FormMode","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","labelWrapperClass","contentWrapperClass","textareaClass","useEffect","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","MaxCharacters"],"mappings":"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"}

package/components/Avatar/Avatar.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
+export declare enum AvatarSize {
+    xsmall = "xsmall",
+    small = "small"
+}
 export interface AvatarProps {
     /** Name to display in the avatar. Will be truncated to the first two characters. */
     children: string;
@@ -6,6 +10,8 @@ export interface AvatarProps {
     selected?: boolean;
     /** background and color will be determined on variant. */
     variant?: 'normal' | 'black';
+    /** Avatar size. Default: small */
+    size?: keyof typeof AvatarSize;
     /** Adds custom classes to the element. */
     className?: string;
     /** Sets the data-testid attribute. */

package/components/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,WAAW,WAAW;IAC1B,oFAAoF;IACpF,QAAQ,EAAE,MAAM,CAAC;IACjB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AACD,oBAAY,UAAU,GAAG,KAAK,CAAC,yBAAyB,CAAC,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;AACzG,QAAA,MAAM,MAAM,EAAE,UAiBZ,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,oFAAoF;IACpF,QAAQ,EAAE,MAAM,CAAC;IACjB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IAC/B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AACD,oBAAY,UAAU,GAAG,KAAK,CAAC,yBAAyB,CAAC,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;AACzG,QAAA,MAAM,MAAM,EAAE,UAwBZ,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/components/Avatar/componentdata.json

@@ -1 +1 @@
-{"props":{"children":{"defaultValue":null,"description":"Name to display in the avatar. Will be truncated to the first two characters.","name":"children","parent":{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"},"declarations":[{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"}],"required":true,"type":{"name":"string"}},"selected":{"defaultValue":null,"description":"Displays a check icon to indicated the selected state.","name":"selected","parent":{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"},"declarations":[{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"}],"required":false,"type":{"name":"boolean"}},"variant":{"defaultValue":null,"description":"background and color will be determined on variant.","name":"variant","parent":{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"},"declarations":[{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"black\"","value":[{"value":"\"normal\""},{"value":"\"black\""}]}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"},"declarations":[{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"},"declarations":[{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"children":{"defaultValue":null,"description":"Name to display in the avatar. Will be truncated to the first two characters.","name":"children","parent":{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"},"declarations":[{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"}],"required":true,"type":{"name":"string"}},"selected":{"defaultValue":null,"description":"Displays a check icon to indicated the selected state.","name":"selected","parent":{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"},"declarations":[{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"}],"required":false,"type":{"name":"boolean"}},"variant":{"defaultValue":null,"description":"background and color will be determined on variant.","name":"variant","parent":{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"},"declarations":[{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"black\"","value":[{"value":"\"normal\""},{"value":"\"black\""}]}},"size":{"defaultValue":null,"description":"Avatar size. Default: small","name":"size","parent":{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"},"declarations":[{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"}],"required":false,"type":{"name":"enum","raw":"\"xsmall\" | \"small\"","value":[{"value":"\"xsmall\""},{"value":"\"small\""}]}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"},"declarations":[{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"},"declarations":[{"fileName":"src/components/Avatar/Avatar.tsx","name":"AvatarProps"}],"required":false,"type":{"name":"string"}}}}

package/components/Avatar/index.js

@@ -1,2 +1,2 @@
-import"../../Avatar.js";import{A as v}from"../../Avatar.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/Check.js";import"./styles.module.scss";import"../../theme/palette.js";export{v as default};
+import"../../Avatar.js";import{a as u,A as x}from"../../Avatar.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/Check.js";import"./styles.module.scss";import"../../theme/palette.js";export{u as AvatarSize,x as default};
 //# sourceMappingURL=index.js.map

package/components/Avatar/styles.module.scss

@@ -1,22 +1,37 @@
 @import '../../scss/_palette.scss';
+@import '../../scss/_font-settings';
 
 .avatar {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 3rem;
-  height: 3rem;
-  font-size: 1.5rem;
   font-weight: 600;
   background-color: $blueberry500;
   color: $white;
+
   &--selected {
     background-color: transparent;
   }
+
   &--black {
     background-color: $neutral900;
   }
+
   &--selected#{&}--black {
     background-color: transparent;
   }
+
+  &--xsmall {
+    width: 2.375rem;
+    height: 2.375rem;
+    font-size: $font-size-md;
+    line-height: $lineheight-size-md;
+  }
+
+  &--small {
+    width: 3rem;
+    height: 3rem;
+    font-size: $font-size-lg;
+    line-height: $lineheight-size-lg;
+  }
 }

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

@@ -2,6 +2,8 @@ export type Styles = {
   avatar: string;
   'avatar--black': string;
   'avatar--selected': string;
+  'avatar--small': string;
+  'avatar--xsmall': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/ErrorWrapper/ErrorWrapper.d.ts

@@ -4,6 +4,10 @@ export interface ErrorWrapperProps {
     errorText?: string;
     /** Form component */
     children?: React.ReactNode;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
 }
 export declare const ErrorWrapper: React.FC<ErrorWrapperProps>;
 export default ErrorWrapper;

package/components/ErrorWrapper/ErrorWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorWrapper/ErrorWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,iBAAiB;IAChC,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiBpD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ErrorWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorWrapper/ErrorWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,iBAAiB;IAChC,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiBpD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/ErrorWrapper/componentdata.json

@@ -1 +1 @@
-{"props":{"errorText":{"defaultValue":null,"description":"Error message","name":"errorText","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Form component","name":"children","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}}}}
+{"props":{"errorText":{"defaultValue":null,"description":"Error message","name":"errorText","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Form component","name":"children","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"}],"required":false,"type":{"name":"string"}}}}

package/components/ExpanderList/index.js

@@ -1,2 +1,2 @@
-import o,{useState as V,useRef as O,useEffect as k}from"react";import{useHover as M}from"../../hooks/useHover.js";import{usePrevious as Z}from"../../hooks/usePrevious.js";import{isElementInViewport as q}from"../../utils/viewport.js";import g from"classnames";import i from"./styles.module.scss";import{AnalyticsId as U,ZIndex as F}from"../../constants.js";import{useUuid as G}from"../../hooks/useUuid.js";import{useSticky as K}from"../../hooks/useSticky.js";import{mergeRefs as Q}from"../../utils/refs.js";import{r as X}from"../../ListHeader.js";import Y from"../Icons/ChevronUp.js";import v from"../Icons/ChevronDown.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../Avatar.js";import"../Icons/Icon.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../theme/palette.js";import"../../Badge.js";import"../Badge/styles.module.scss";import"../../ListHeaderText.js";import"../../StatusDot.js";import"../StatusDot/styles.module.scss";import"../Icons/Undo.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../../hooks/useBreakpoint.js";import"../ListHeader/styles.module.scss";import"../../utils/component.js";const B=o.forwardRef((p,w)=>{const{id:m,children:L,padding:N=!0,color:f="neutral",className:R="",icon:$,large:y=!1,title:l,titleHtmlMarkup:b="span",expanded:c=!1,sticky:H,testId:W,handleExpanderClick:T,onExpand:d,renderChildrenWhenClosed:u,variant:a="line"}=p,[r,_]=V(c),j=Z(r),h=O(null),E=O(null),{isHovered:I}=M(E),{isOutsideWindow:C,isLeavingWindow:n,offsetHeight:e,contentWidth:t}=K(h,E),s=H&&r&&C,x=typeof l=="object",A=g(R,{[i["expander-list__item--"+a]]:a,[i["expander-list__item--jsx"]]:x}),z=g(i["expander-list-link"],i[`expander-list-link--${f}`],{[i["expander-list-link--fill"]]:a==="fill",[i["expander-list-link--closed"]]:!r,[i["expander-list-link--large"]]:y,[i["expander-list-link--jsx"]]:x,[i["expander-list-link--sticky"]]:s&&!n,[i["expander-list-link--absolute"]]:s&&n});k(()=>{c!==r&&_(c)},[c]),k(()=>{d&&r!==!!j&&d(r)},[r,d]);const D=()=>{if(!u&&!r)return null;const J=g(i["expander-list-link__main-content"],r&&i["expander-list-link__main-content--expanded"],N?i["expander-list-link__main-content--padding"]:"");return o.createElement("div",{className:J},L)};return o.createElement("li",{className:A,ref:Q([w,h]),style:{paddingTop:s&&e?`${e}px`:void 0}},o.createElement("button",{type:"button",id:m,onClick:T,"data-testid":W,"data-analyticsid":U.ExpanderListExpander,className:z,ref:E,"aria-expanded":r,style:{zIndex:I||s?F.ExpanderTrigger:void 0,width:s&&t?`${t}px`:void 0}},X(l,b,r?Y:v,I,y?"large":"medium",$)),D())}),P=p=>o.isValidElement(p)&&p.type===B,S=o.forwardRef((p,w)=>{const{children:m,childPadding:L=!0,large:N,isOpen:f=!1,renderChildrenWhenClosed:R=!1,color:$,className:y="",accordion:l=!1,topBorder:b=!0,bottomBorder:c=!0,sticky:H=!1,testId:W,variant:T}=p,[d,u]=V(),[a,r]=V(),_=G(),j=o.Children.count(m),h=g(i["expander-list"],y);function E(n,e){u(t=>l?{[e]:!(t!=null&&t[e])}:{...t,[e]:!(t!=null&&t[e])}),r(n.currentTarget)}const I=n=>g(i["expander-list__item"],{[i["expander-list__item--top"]]:n===0&&b,[i["expander-list__item--no-bottom"]]:n===j-1&&!c}),C=n=>`${_}-${n}`;return k(()=>{l&&a&&!q(a)&&a.scrollIntoView()},[l,a]),k(()=>{if(f){const n=C(0);u(e=>l?{[n]:!(e!=null&&e[n])}:{...e,[n]:!(e!=null&&e[n])})}},[f]),k(()=>{var n;if(!f){const e=(n=o.Children.map(m,t=>{if(P(t))return t}))==null?void 0:n.reduce((t,s,x)=>(typeof s.props.expanded<"u"&&(t[C(x)]=s.props.expanded),t),{});u({...d,...e})}},[m]),o.createElement("ul",{className:h,ref:w,"data-testid":W,"data-analyticsid":U.ExpanderList},o.Children.map(m,(n,e)=>{if(P(n)){const t=C(e),s=d==null?void 0:d[t],x=I(e);return o.cloneElement(n,{id:t,key:e,expanded:s,padding:L,color:$,large:N,sticky:H,"aria-expanded":s,className:x,handleExpanderClick:A=>E(A,`${_}-${e}`),renderChildrenWhenClosed:R,variant:T})}return n}))});S.Expander=B;B.displayName="ExpanderList.Expander";export{S as ExpanderList,S as default};
+import o,{useState as V,useRef as O,useEffect as k}from"react";import{useHover as M}from"../../hooks/useHover.js";import{usePrevious as Z}from"../../hooks/usePrevious.js";import{isElementInViewport as q}from"../../utils/viewport.js";import g from"classnames";import i from"./styles.module.scss";import{AnalyticsId as U,ZIndex as F}from"../../constants.js";import{useUuid as G}from"../../hooks/useUuid.js";import{useSticky as K}from"../../hooks/useSticky.js";import{mergeRefs as Q}from"../../utils/refs.js";import{r as X}from"../../ListHeader.js";import Y from"../Icons/ChevronUp.js";import v from"../Icons/ChevronDown.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../Avatar.js";import"../Icons/Icon.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../theme/palette.js";import"../../Badge.js";import"../Badge/styles.module.scss";import"../../ListHeaderText.js";import"../../StatusDot.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../ListHeader/styles.module.scss";import"../../utils/component.js";const B=o.forwardRef((p,w)=>{const{id:m,children:L,padding:N=!0,color:f="neutral",className:R="",icon:$,large:y=!1,title:l,titleHtmlMarkup:b="span",expanded:c=!1,sticky:H,testId:W,handleExpanderClick:T,onExpand:d,renderChildrenWhenClosed:u,variant:a="line"}=p,[r,_]=V(c),j=Z(r),h=O(null),E=O(null),{isHovered:I}=M(E),{isOutsideWindow:C,isLeavingWindow:n,offsetHeight:e,contentWidth:t}=K(h,E),s=H&&r&&C,x=typeof l=="object",A=g(R,{[i["expander-list__item--"+a]]:a,[i["expander-list__item--jsx"]]:x}),z=g(i["expander-list-link"],i[`expander-list-link--${f}`],{[i["expander-list-link--fill"]]:a==="fill",[i["expander-list-link--closed"]]:!r,[i["expander-list-link--large"]]:y,[i["expander-list-link--jsx"]]:x,[i["expander-list-link--sticky"]]:s&&!n,[i["expander-list-link--absolute"]]:s&&n});k(()=>{c!==r&&_(c)},[c]),k(()=>{d&&r!==!!j&&d(r)},[r,d]);const D=()=>{if(!u&&!r)return null;const J=g(i["expander-list-link__main-content"],r&&i["expander-list-link__main-content--expanded"],N?i["expander-list-link__main-content--padding"]:"");return o.createElement("div",{className:J},L)};return o.createElement("li",{className:A,ref:Q([w,h]),style:{paddingTop:s&&e?`${e}px`:void 0}},o.createElement("button",{type:"button",id:m,onClick:T,"data-testid":W,"data-analyticsid":U.ExpanderListExpander,className:z,ref:E,"aria-expanded":r,style:{zIndex:I||s?F.ExpanderTrigger:void 0,width:s&&t?`${t}px`:void 0}},X(l,b,r?Y:v,I,y?"large":"medium",$)),D())}),P=p=>o.isValidElement(p)&&p.type===B,S=o.forwardRef((p,w)=>{const{children:m,childPadding:L=!0,large:N,isOpen:f=!1,renderChildrenWhenClosed:R=!1,color:$,className:y="",accordion:l=!1,topBorder:b=!0,bottomBorder:c=!0,sticky:H=!1,testId:W,variant:T}=p,[d,u]=V(),[a,r]=V(),_=G(),j=o.Children.count(m),h=g(i["expander-list"],y);function E(n,e){u(t=>l?{[e]:!(t!=null&&t[e])}:{...t,[e]:!(t!=null&&t[e])}),r(n.currentTarget)}const I=n=>g(i["expander-list__item"],{[i["expander-list__item--top"]]:n===0&&b,[i["expander-list__item--no-bottom"]]:n===j-1&&!c}),C=n=>`${_}-${n}`;return k(()=>{l&&a&&!q(a)&&a.scrollIntoView()},[l,a]),k(()=>{if(f){const n=C(0);u(e=>l?{[n]:!(e!=null&&e[n])}:{...e,[n]:!(e!=null&&e[n])})}},[f]),k(()=>{var n;if(!f){const e=(n=o.Children.map(m,t=>{if(P(t))return t}))==null?void 0:n.reduce((t,s,x)=>(typeof s.props.expanded<"u"&&(t[C(x)]=s.props.expanded),t),{});u({...d,...e})}},[m]),o.createElement("ul",{className:h,ref:w,"data-testid":W,"data-analyticsid":U.ExpanderList},o.Children.map(m,(n,e)=>{if(P(n)){const t=C(e),s=d==null?void 0:d[t],x=I(e);return o.cloneElement(n,{id:t,key:e,expanded:s,padding:L,color:$,large:N,sticky:H,"aria-expanded":s,className:x,handleExpanderClick:A=>E(A,`${_}-${e}`),renderChildrenWhenClosed:R,variant:T})}return n}))});S.Expander=B;B.displayName="ExpanderList.Expander";export{S as ExpanderList,S as default};
 //# sourceMappingURL=index.js.map