@helsenorge/designsystem-react 10.1.0 → 10.2.0

package/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../src/components/Table/utils.ts","../src/components/Table/Table.tsx"],"sourcesContent":["import React from 'react';\n\nimport { BreakpointConfig, ResponsiveTableVariant } from './Table';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string =>\n  config.variant === 'centeredoverflow' || config.variant === 'block' ? styles[`table--${config.variant}-${config.breakpoint}`] : '';\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra største til minste\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsDescending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    config.sort(sortByBreakpointsDescending);\n\n    return config.find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/**\n * Finn riktig posisjon for horisontal sentrering av tabell som skal vises \"centeredoverflow\"\n * @param parentWidth Bredde på element som tabellen ligger i\n * @param tableWidth Bredde på tabellen\n * @returns Styling som posisjonerer tabellen riktig\n */\nexport const getCenteredOverflowTableStyle = (parentWidth: number, tableWidth: number): React.CSSProperties | undefined => {\n  if (parentWidth >= tableWidth) {\n    return;\n  }\n\n  const COLUMN_GUTTER_WIDTH_PX = 8;\n\n  return { left: `${(parentWidth - tableWidth) / 2 - COLUMN_GUTTER_WIDTH_PX}px` };\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport enum ResponsiveTableVariant {\n  /** No handling responsive behaviour. Default. */\n  none = 'none',\n  /** Overflow parent container to the left and right while remaining centered horizontally. */\n  centeredoverflow = 'centeredoverflow',\n  /** Show horizontal scrollbar when table is too big for the screen. */\n  horizontalscroll = 'horizontalscroll',\n  /** Collapse to two columns. */\n  block = 'block',\n}\nexport enum ModeType {\n  compact = 'compact',\n  normal = 'normal',\n}\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'table'>, 'style'> {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Sets aria-label of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabel?: string;\n  /** Sets aria-labelledby of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabelledById?: string;\n}\n\nexport const defaultConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n];\n\nexport const simpleConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n  {\n    breakpoint: 'sm',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.block,\n  },\n];\n\nexport const Table: React.FC<Props> = ({\n  id,\n  testId,\n  className,\n  children,\n  breakpointConfig = defaultConfig,\n  mode = ModeType.normal,\n  scrollAriaLabel,\n  scrollAriaLabelledById,\n  ...rest\n}) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const tableIsVisible = useIsVisible(tableRef, 0);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig, breakpoint]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  useEffect(() => {\n    if (tableWidth === 0 && tableIsVisible) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n  }, [tableWidth, tableIsVisible]);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n\n  const table = (\n    <table\n      className={tableClass}\n      id={id}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Table}\n      ref={tableRef}\n      style={tableStyle}\n      {...rest}\n    >\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </table>\n  );\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\" {...ariaLabelAttributes}>\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n"],"names":["styles","ResponsiveTableVariant","ModeType"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../src/components/Table/utils.ts","../src/components/Table/Table.tsx"],"sourcesContent":["import React from 'react';\n\nimport { BreakpointConfig, ResponsiveTableVariant } from './Table';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string =>\n  config.variant === 'centeredoverflow' || config.variant === 'block' ? styles[`table--${config.variant}-${config.breakpoint}`] : '';\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra største til minste\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsDescending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    config.sort(sortByBreakpointsDescending);\n\n    return config.find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/**\n * Finn riktig posisjon for horisontal sentrering av tabell som skal vises \"centeredoverflow\"\n * @param parentWidth Bredde på element som tabellen ligger i\n * @param tableWidth Bredde på tabellen\n * @returns Styling som posisjonerer tabellen riktig\n */\nexport const getCenteredOverflowTableStyle = (parentWidth: number, tableWidth: number): React.CSSProperties | undefined => {\n  if (parentWidth >= tableWidth) {\n    return;\n  }\n\n  const COLUMN_GUTTER_WIDTH_PX = 8;\n\n  return { left: `${(parentWidth - tableWidth) / 2 - COLUMN_GUTTER_WIDTH_PX}px` };\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport enum ResponsiveTableVariant {\n  /** No handling responsive behaviour. Default. */\n  none = 'none',\n  /** Overflow parent container to the left and right while remaining centered horizontally. */\n  centeredoverflow = 'centeredoverflow',\n  /** Show horizontal scrollbar when table is too big for the screen. */\n  horizontalscroll = 'horizontalscroll',\n  /** Collapse to two columns. */\n  block = 'block',\n}\nexport enum ModeType {\n  compact = 'compact',\n  normal = 'normal',\n}\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'table'>, 'style'> {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Sets aria-label of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabel?: string;\n  /** Sets aria-labelledby of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabelledById?: string;\n}\n\nexport const defaultConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n];\n\nexport const simpleConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n  {\n    breakpoint: 'sm',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.block,\n  },\n];\n\nexport const Table: React.FC<Props> = ({\n  id,\n  testId,\n  className,\n  children,\n  breakpointConfig = defaultConfig,\n  mode = ModeType.normal,\n  scrollAriaLabel,\n  scrollAriaLabelledById,\n  ...rest\n}) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const tableIsVisible = useIsVisible(tableRef, 0);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig, breakpoint]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  useEffect(() => {\n    if (tableWidth === 0 && tableIsVisible) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n  }, [tableWidth, tableIsVisible]);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n\n  const table = (\n    <table\n      className={tableClass}\n      id={id}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Table}\n      ref={tableRef}\n      style={tableStyle}\n      {...rest}\n    >\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </table>\n  );\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\" {...ariaLabelAttributes}>\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n"],"names":["styles","ResponsiveTableVariant","ModeType","React"],"mappings":"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"}

package/TableBody.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import tableStyles from "./components/Table/styles.module.scss";
 import { M as ModeType } from "./Table.js";
 const TableBody = ({ className, children, mode = ModeType.normal, ...rest }) => {
   const tableBodyClasses = classNames(tableStyles["table-body"], className);
-  return /* @__PURE__ */ jsx("tbody", { className: tableBodyClasses, ...rest, children: React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child, { mode })) });
+  return /* @__PURE__ */ jsx("tbody", { className: tableBodyClasses, ...rest, children: React__default.Children.map(children, (child) => React__default.isValidElement(child) && React__default.cloneElement(child, { mode })) });
 };
 export {
   TableBody as T

package/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","sources":["../src/components/Table/TableBody/TableBody.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table body. Use TableRows */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableBody: React.FC<Props> = ({ className, children, mode = ModeType.normal, ...rest }) => {\n  const tableBodyClasses = classNames(tableStyles['table-body'], className);\n  return (\n    <tbody className={tableBodyClasses} {...rest}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </tbody>\n  );\n};\n\nexport default TableBody;\n"],"names":[],"mappings":";;;;;AAgBa,MAAA,YAA6B,CAAC,EAAE,WAAW,UAAU,OAAO,SAAS,QAAQ,GAAG,WAAW;AACtG,QAAM,mBAAmB,WAAW,YAAY,YAAY,GAAG,SAAS;AAEtE,SAAA,oBAAC,WAAM,WAAW,kBAAmB,GAAG,MACrC,UAAA,MAAM,SAAS,IAAI,UAAU,CAAA,UAAS,MAAM,eAAoC,KAAK,KAAK,MAAM,aAAa,OAAO,EAAE,KAAM,CAAA,CAAC,EAChI,CAAA;AAEJ;"}
+{"version":3,"file":"TableBody.js","sources":["../src/components/Table/TableBody/TableBody.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table body. Use TableRows */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableBody: React.FC<Props> = ({ className, children, mode = ModeType.normal, ...rest }) => {\n  const tableBodyClasses = classNames(tableStyles['table-body'], className);\n  return (\n    <tbody className={tableBodyClasses} {...rest}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </tbody>\n  );\n};\n\nexport default TableBody;\n"],"names":["React"],"mappings":";;;;;AAgBa,MAAA,YAA6B,CAAC,EAAE,WAAW,UAAU,OAAO,SAAS,QAAQ,GAAG,WAAW;AACtG,QAAM,mBAAmB,WAAW,YAAY,YAAY,GAAG,SAAS;AAEtE,SAAA,oBAAC,WAAM,WAAW,kBAAmB,GAAG,MACrC,UAAAA,eAAM,SAAS,IAAI,UAAU,CAAA,UAASA,eAAM,eAAoC,KAAK,KAAKA,eAAM,aAAa,OAAO,EAAE,KAAM,CAAA,CAAC,EAChI,CAAA;AAEJ;"}

package/TableExpandedRow.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { B as Button } from "./Button.js";
 import { I as Icon } from "./Icon.js";
@@ -26,7 +26,7 @@ const TableExpandedRow = ({
   });
   const containerClass = classNames(tableStyles["table__expanded-row-container"]);
   return /* @__PURE__ */ jsx("tr", { className: tableRowClass, id, children: /* @__PURE__ */ jsx("td", { colSpan: numberOfColumns, className: tableCellClass, children: /* @__PURE__ */ jsxs("div", { className: containerClass, children: [
-    React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child)),
+    React__default.Children.map(children, (child) => React__default.isValidElement(child) && React__default.cloneElement(child)),
     /* @__PURE__ */ jsxs(Button, { variant: "borderless", onClick: toggleClick, "aria-expanded": expanded, tabIndex: expanded ? 0 : -1, children: [
       hideDetailsText,
       /* @__PURE__ */ jsx(Icon, { svgIcon: ChevronUp })

package/TableExpandedRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableExpandedRow.js","sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\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  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Row id. For use with aria-controls. */\n  id?: string;\n}\n\nexport const TableExpandedRow = ({\n  numberOfColumns,\n  expanded,\n  hideDetailsText,\n  toggleClick,\n  children,\n  className,\n  mode = ModeType.normal,\n  id,\n}: Props): React.JSX.Element => {\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    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n\n  const containerClass = classNames(tableStyles['table__expanded-row-container']);\n\n  return (\n    <tr className={tableRowClass} id={id}>\n      <td colSpan={numberOfColumns} className={tableCellClass}>\n        <div className={containerClass}>\n          {React.Children.map(children, child => React.isValidElement(child) && React.cloneElement(child))}\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":[],"mappings":";;;;;;;;AA6BO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAAA,EAChB;AACF,MAAgC;AAC9B,QAAM,gBAAgB;AAAA,IACpB,YAAY,qBAAqB;AAAA,IACjC,EAAE,CAAC,YAAY,+BAA+B,CAAC,GAAG,SAAS;AAAA,IAC3D;AAAA,EACF;AACA,QAAM,iBAAiB,WAAW,YAAY,aAAa,GAAG,WAAW;AAAA,IACvE,CAAC,YAAY,sBAAsB,CAAC,GAAG,SAAS,SAAS;AAAA,EAAA,CAC1D;AAED,QAAM,iBAAiB,WAAW,YAAY,+BAA+B,CAAC;AAE9E,SACG,oBAAA,MAAA,EAAG,WAAW,eAAe,IAC5B,UAAC,oBAAA,MAAA,EAAG,SAAS,iBAAiB,WAAW,gBACvC,UAAC,qBAAA,OAAA,EAAI,WAAW,gBACb,UAAA;AAAA,IAAM,MAAA,SAAS,IAAI,UAAU,CAAS,UAAA,MAAM,eAAe,KAAK,KAAK,MAAM,aAAa,KAAK,CAAC;AAAA,IAC/F,qBAAC,QAAO,EAAA,SAAS,cAAc,SAAS,aAAa,iBAAe,UAAU,UAAU,WAAW,IAAI,IACpG,UAAA;AAAA,MAAA;AAAA,MACD,oBAAC,MAAK,EAAA,SAAS,UAAW,CAAA;AAAA,IAAA,EAC5B,CAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA,GACF;AAEJ;"}
+{"version":3,"file":"TableExpandedRow.js","sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\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  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Row id. For use with aria-controls. */\n  id?: string;\n}\n\nexport const TableExpandedRow = ({\n  numberOfColumns,\n  expanded,\n  hideDetailsText,\n  toggleClick,\n  children,\n  className,\n  mode = ModeType.normal,\n  id,\n}: Props): React.JSX.Element => {\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    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n\n  const containerClass = classNames(tableStyles['table__expanded-row-container']);\n\n  return (\n    <tr className={tableRowClass} id={id}>\n      <td colSpan={numberOfColumns} className={tableCellClass}>\n        <div className={containerClass}>\n          {React.Children.map(children, child => React.isValidElement(child) && React.cloneElement(child))}\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":["React"],"mappings":";;;;;;;;AA6BO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAAA,EAChB;AACF,MAAgC;AAC9B,QAAM,gBAAgB;AAAA,IACpB,YAAY,qBAAqB;AAAA,IACjC,EAAE,CAAC,YAAY,+BAA+B,CAAC,GAAG,SAAS;AAAA,IAC3D;AAAA,EACF;AACA,QAAM,iBAAiB,WAAW,YAAY,aAAa,GAAG,WAAW;AAAA,IACvE,CAAC,YAAY,sBAAsB,CAAC,GAAG,SAAS,SAAS;AAAA,EAAA,CAC1D;AAED,QAAM,iBAAiB,WAAW,YAAY,+BAA+B,CAAC;AAE9E,SACG,oBAAA,MAAA,EAAG,WAAW,eAAe,IAC5B,UAAC,oBAAA,MAAA,EAAG,SAAS,iBAAiB,WAAW,gBACvC,UAAC,qBAAA,OAAA,EAAI,WAAW,gBACb,UAAA;AAAA,IAAMA,eAAA,SAAS,IAAI,UAAU,CAAS,UAAAA,eAAM,eAAe,KAAK,KAAKA,eAAM,aAAa,KAAK,CAAC;AAAA,IAC/F,qBAAC,QAAO,EAAA,SAAS,cAAc,SAAS,aAAa,iBAAe,UAAU,UAAU,WAAW,IAAI,IACpG,UAAA;AAAA,MAAA;AAAA,MACD,oBAAC,MAAK,EAAA,SAAS,UAAW,CAAA;AAAA,IAAA,EAC5B,CAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA,GACF;AAEJ;"}

package/TableHead.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import tableStyles from "./components/Table/styles.module.scss";
 import { M as ModeType } from "./Table.js";
@@ -20,7 +20,7 @@ const TableHead = ({ category = "normal", className, children, mode, ...rest })
     },
     className
   );
-  return /* @__PURE__ */ jsx("thead", { className: tableHeadClass, ...rest, children: React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child, { mode })) });
+  return /* @__PURE__ */ jsx("thead", { className: tableHeadClass, ...rest, children: React__default.Children.map(children, (child) => React__default.isValidElement(child) && React__default.cloneElement(child, { mode })) });
 };
 export {
   HeaderCategory as H,

package/TableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.js","sources":["../src/components/Table/TableHead/TableHead.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum HeaderCategory {\n  normal = 'normal',\n  transparent = 'transparent',\n  sortable = 'sortable',\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'thead'>, 'style'> {\n  /** Header category for styling. Default: normal */\n  category?: HeaderCategory;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the thead. Add table rows  */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHead: React.FC<Props> = ({ category = HeaderCategory.normal, className, children, mode, ...rest }) => {\n  const tableHeadClass = classNames(\n    tableStyles['table__head'],\n    {\n      [tableStyles['table__head--normal']]: category === HeaderCategory.normal,\n      [tableStyles['table__head--transparent']]: category === HeaderCategory.transparent,\n      [tableStyles['table__head--sortable']]: category == HeaderCategory.sortable,\n      [tableStyles['table__head--compact']]: mode == ModeType.compact,\n    },\n    className\n  );\n\n  return (\n    <thead className={tableHeadClass} {...rest}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </thead>\n  );\n};\n\nexport default TableHead;\n"],"names":["HeaderCategory"],"mappings":";;;;;AAOY,IAAA,mCAAAA,oBAAL;AACLA,kBAAA,QAAS,IAAA;AACTA,kBAAA,aAAc,IAAA;AACdA,kBAAA,UAAW,IAAA;AAHDA,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAiBC,MAAA,YAA6B,CAAC,EAAE,WAAW,UAAuB,WAAW,UAAU,MAAM,GAAG,WAAW;AACtH,QAAM,iBAAiB;AAAA,IACrB,YAAY,aAAa;AAAA,IACzB;AAAA,MACE,CAAC,YAAY,qBAAqB,CAAC,GAAG,aAAa;AAAA,MACnD,CAAC,YAAY,0BAA0B,CAAC,GAAG,aAAa;AAAA,MACxD,CAAC,YAAY,uBAAuB,CAAC,GAAG,YAAY;AAAA,MACpD,CAAC,YAAY,sBAAsB,CAAC,GAAG,QAAQ,SAAS;AAAA,IAC1D;AAAA,IACA;AAAA,EACF;AAGE,SAAA,oBAAC,WAAM,WAAW,gBAAiB,GAAG,MACnC,UAAA,MAAM,SAAS,IAAI,UAAU,CAAA,UAAS,MAAM,eAAoC,KAAK,KAAK,MAAM,aAAa,OAAO,EAAE,KAAM,CAAA,CAAC,EAChI,CAAA;AAEJ;"}
+{"version":3,"file":"TableHead.js","sources":["../src/components/Table/TableHead/TableHead.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum HeaderCategory {\n  normal = 'normal',\n  transparent = 'transparent',\n  sortable = 'sortable',\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'thead'>, 'style'> {\n  /** Header category for styling. Default: normal */\n  category?: HeaderCategory;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the thead. Add table rows  */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHead: React.FC<Props> = ({ category = HeaderCategory.normal, className, children, mode, ...rest }) => {\n  const tableHeadClass = classNames(\n    tableStyles['table__head'],\n    {\n      [tableStyles['table__head--normal']]: category === HeaderCategory.normal,\n      [tableStyles['table__head--transparent']]: category === HeaderCategory.transparent,\n      [tableStyles['table__head--sortable']]: category == HeaderCategory.sortable,\n      [tableStyles['table__head--compact']]: mode == ModeType.compact,\n    },\n    className\n  );\n\n  return (\n    <thead className={tableHeadClass} {...rest}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </thead>\n  );\n};\n\nexport default TableHead;\n"],"names":["HeaderCategory","React"],"mappings":";;;;;AAOY,IAAA,mCAAAA,oBAAL;AACLA,kBAAA,QAAS,IAAA;AACTA,kBAAA,aAAc,IAAA;AACdA,kBAAA,UAAW,IAAA;AAHDA,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAiBC,MAAA,YAA6B,CAAC,EAAE,WAAW,UAAuB,WAAW,UAAU,MAAM,GAAG,WAAW;AACtH,QAAM,iBAAiB;AAAA,IACrB,YAAY,aAAa;AAAA,IACzB;AAAA,MACE,CAAC,YAAY,qBAAqB,CAAC,GAAG,aAAa;AAAA,MACnD,CAAC,YAAY,0BAA0B,CAAC,GAAG,aAAa;AAAA,MACxD,CAAC,YAAY,uBAAuB,CAAC,GAAG,YAAY;AAAA,MACpD,CAAC,YAAY,sBAAsB,CAAC,GAAG,QAAQ,SAAS;AAAA,IAC1D;AAAA,IACA;AAAA,EACF;AAGE,SAAA,oBAAC,WAAM,WAAW,gBAAiB,GAAG,MACnC,UAAAC,eAAM,SAAS,IAAI,UAAU,CAAA,UAASA,eAAM,eAAoC,KAAK,KAAKA,eAAM,aAAa,OAAO,EAAE,KAAM,CAAA,CAAC,EAChI,CAAA;AAEJ;"}

package/TableRow.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import tableStyles from "./components/Table/styles.module.scss";
 import { M as ModeType } from "./Table.js";
@@ -44,7 +44,7 @@ const TableRow = ({
     className
   );
   return /* @__PURE__ */ jsxs("tr", { className: tableRowClass, onClick, ...rest, children: [
-    React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child, { mode })),
+    React__default.Children.map(children, (child) => React__default.isValidElement(child) && React__default.cloneElement(child, { mode })),
     expandable && /* @__PURE__ */ jsx(
       TableExpanderCellMobile,
       {

package/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport { Props } from '../TableRow/TableRow';\n\ntype TableExpanderCellMobileProps = Pick<Props, 'expanded' | 'onClick' | 'hideDetailsText' | 'showDetailsText' | 'mode'>;\n\nconst TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps> = ({\n  expanded,\n  onClick,\n  hideDetailsText,\n  showDetailsText,\n  mode = ModeType.normal,\n}) => {\n  const cellClass = classNames(tableStyles.table__cell, tableStyles['table__expander-cell-mobile'], {\n    [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\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';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {\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  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\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  mode = ModeType.normal,\n  ...rest\n}) => {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n    },\n    className\n  );\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey} {...rest}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n      {expandable && (\n        <TableExpanderCellMobile\n          expanded={expanded}\n          onClick={onClick}\n          hideDetailsText={hideDetailsText}\n          showDetailsText={showDetailsText}\n          mode={mode}\n        />\n      )}\n    </tr>\n  );\n};\n\nexport default TableRow;\n"],"names":[],"mappings":";;;;;;;;;AAcA,MAAM,0BAAkE,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAClB,MAAM;AACJ,QAAM,YAAY,WAAW,YAAY,aAAa,YAAY,6BAA6B,GAAG;AAAA,IAChG,CAAC,YAAY,uCAAuC,CAAC,GAAG;AAAA,IACxD,CAAC,YAAY,sBAAsB,CAAC,GAAG,SAAS,SAAS;AAAA,EAAA,CAC1D;AAGC,SAAA,oBAAC,MAAG,EAAA,WAAW,WACb,UAAA,qBAAC,UAAO,iBAAe,UAAU,SAAQ,cAAa,SACpD,UAAA;AAAA,IAAA,oBAAC,MAAK,EAAA,SAAS,WAAW,YAAY,aAAa;AAAA,IAAE;AAAA,IAAE,WAAW,kBAAkB;AAAA,EAAA,EAAA,CACtF,EACF,CAAA;AAEJ;ACJO,MAAM,WAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAAA,EAChB,GAAG;AACL,MAAM;AACJ,QAAM,gBAAgB;AAAA,IACpB,YAAY,WAAW;AAAA,IACvB;AAAA,MACE,CAAC,YAAY,wBAAwB,CAAC,GAAG;AAAA,IAC3C;AAAA,IACA;AAAA,EACF;AAEA,8BACG,MAAG,EAAA,WAAW,eAAe,SAAgC,GAAG,MAC9D,UAAA;AAAA,IAAA,MAAM,SAAS,IAAI,UAAU,CAAA,UAAS,MAAM,eAAoC,KAAK,KAAK,MAAM,aAAa,OAAO,EAAE,KAAM,CAAA,CAAC;AAAA,IAC7H,cACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,EAAA,GATiD,MAWrD;AAEJ;"}
+{"version":3,"file":"TableRow.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport { Props } from '../TableRow/TableRow';\n\ntype TableExpanderCellMobileProps = Pick<Props, 'expanded' | 'onClick' | 'hideDetailsText' | 'showDetailsText' | 'mode'>;\n\nconst TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps> = ({\n  expanded,\n  onClick,\n  hideDetailsText,\n  showDetailsText,\n  mode = ModeType.normal,\n}) => {\n  const cellClass = classNames(tableStyles.table__cell, tableStyles['table__expander-cell-mobile'], {\n    [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\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';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {\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  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\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  mode = ModeType.normal,\n  ...rest\n}) => {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n    },\n    className\n  );\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey} {...rest}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n      {expandable && (\n        <TableExpanderCellMobile\n          expanded={expanded}\n          onClick={onClick}\n          hideDetailsText={hideDetailsText}\n          showDetailsText={showDetailsText}\n          mode={mode}\n        />\n      )}\n    </tr>\n  );\n};\n\nexport default TableRow;\n"],"names":["React"],"mappings":";;;;;;;;;AAcA,MAAM,0BAAkE,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAClB,MAAM;AACJ,QAAM,YAAY,WAAW,YAAY,aAAa,YAAY,6BAA6B,GAAG;AAAA,IAChG,CAAC,YAAY,uCAAuC,CAAC,GAAG;AAAA,IACxD,CAAC,YAAY,sBAAsB,CAAC,GAAG,SAAS,SAAS;AAAA,EAAA,CAC1D;AAGC,SAAA,oBAAC,MAAG,EAAA,WAAW,WACb,UAAA,qBAAC,UAAO,iBAAe,UAAU,SAAQ,cAAa,SACpD,UAAA;AAAA,IAAA,oBAAC,MAAK,EAAA,SAAS,WAAW,YAAY,aAAa;AAAA,IAAE;AAAA,IAAE,WAAW,kBAAkB;AAAA,EAAA,EAAA,CACtF,EACF,CAAA;AAEJ;ACJO,MAAM,WAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAAA,EAChB,GAAG;AACL,MAAM;AACJ,QAAM,gBAAgB;AAAA,IACpB,YAAY,WAAW;AAAA,IACvB;AAAA,MACE,CAAC,YAAY,wBAAwB,CAAC,GAAG;AAAA,IAC3C;AAAA,IACA;AAAA,EACF;AAEA,8BACG,MAAG,EAAA,WAAW,eAAe,SAAgC,GAAG,MAC9D,UAAA;AAAA,IAAAA,eAAM,SAAS,IAAI,UAAU,CAAA,UAASA,eAAM,eAAoC,KAAK,KAAKA,eAAM,aAAa,OAAO,EAAE,KAAM,CAAA,CAAC;AAAA,IAC7H,cACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,EAAA,GATiD,MAWrD;AAEJ;"}

package/Textarea.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect } from "react";
+import React__default, { useState, useRef, useEffect } from "react";
 import classNames from "classnames";
 import { FormOnColor, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from "./constants.js";
 import { useUuid } from "./hooks/useUuid.js";
@@ -15,7 +15,7 @@ const getTextareaMaxWidth = (characters) => {
   const borderWidth = "4px";
   return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;
 };
-const Textarea = React.forwardRef((props, ref) => {
+const Textarea = React__default.forwardRef((props, ref) => {
   const {
     maxCharacters,
     maxText,

package/Textarea.js.map

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

package/Title.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "./constants.js";
 import titleStyles from "./components/Title/styles.module.scss";
-const Title = React.forwardRef(function TitleForwardedRef(props, ref) {
+const Title = React__default.forwardRef(function TitleForwardedRef(props, ref) {
   const { id, children, className, htmlMarkup = "h1", appearance = "title1", margin = 0, testId } = props;
   const titleClasses = classNames(
     titleStyles.title,

package/Title.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title.js","sources":["../src/components/Title/Title.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport titleStyles from './styles.module.scss';\n\nexport type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';\nexport type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5' | 'title6';\n\nexport interface TitleProps {\n  children: React.ReactNode;\n  /** Gives a unique id to the title */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds top and bottom margin in rem. */\n  margin?: number | TitleMargin;\n  /** Changes the underlying element of the title. */\n  htmlMarkup?: TitleTags;\n  /** Changes the appearance of the title. */\n  appearance?: TitleAppearances;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Title = React.forwardRef(function TitleForwardedRef(props: TitleProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const { id, children, className, htmlMarkup = 'h1', appearance = 'title1', margin = 0, testId } = props;\n  const titleClasses = classNames(\n    titleStyles.title,\n    {\n      [titleStyles['title--feature']]: appearance === 'titleFeature',\n      [titleStyles['title--title1']]: appearance === 'title1',\n      [titleStyles['title--title2']]: appearance === 'title2',\n      [titleStyles['title--title3']]: appearance === 'title3',\n      [titleStyles['title--title4']]: appearance === 'title4',\n      [titleStyles['title--title5']]: appearance === 'title5',\n      [titleStyles['title--title6']]: appearance === 'title6',\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  const inlineStyle = instanceOfTitleMargin(margin)\n    ? { marginTop: `${margin.marginTop}rem`, marginBottom: `${margin.marginBottom}rem` }\n    : { marginTop: `${margin}rem`, marginBottom: `${margin}rem` };\n\n  return (\n    <CustomTag id={id} className={titleClasses} style={inlineStyle} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Title}>\n      {children}\n    </CustomTag>\n  );\n});\n\nexport interface TitleMargin {\n  marginTop: number;\n  marginBottom: number;\n}\n\nexport const instanceOfTitleMargin = (margin: unknown): margin is TitleMargin => {\n  return Object.prototype.hasOwnProperty.call(margin, 'marginTop') && Object.prototype.hasOwnProperty.call(margin, 'marginBottom');\n};\n\nexport default Title;\n"],"names":[],"mappings":";;;;;AA2BO,MAAM,QAAQ,MAAM,WAAW,SAAS,kBAAkB,OAAmB,KAA6C;AACzH,QAAA,EAAE,IAAI,UAAU,WAAW,aAAa,MAAM,aAAa,UAAU,SAAS,GAAG,OAAW,IAAA;AAClG,QAAM,eAAe;AAAA,IACnB,YAAY;AAAA,IACZ;AAAA,MACE,CAAC,YAAY,gBAAgB,CAAC,GAAG,eAAe;AAAA,MAChD,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,IACjD;AAAA,IACA;AAAA,EACF;AACA,QAAM,YAAY;AAEZ,QAAA,cAAc,sBAAsB,MAAM,IAC5C,EAAE,WAAW,GAAG,OAAO,SAAS,OAAO,cAAc,GAAG,OAAO,YAAY,MAAA,IAC3E,EAAE,WAAW,GAAG,MAAM,OAAO,cAAc,GAAG,MAAM,MAAM;AAE9D,SACG,oBAAA,WAAA,EAAU,IAAQ,WAAW,cAAc,OAAO,aAAa,KAAU,eAAa,QAAQ,oBAAkB,YAAY,OAC1H,UACH;AAEJ,CAAC;AAOY,MAAA,wBAAwB,CAAC,WAA2C;AAC/E,SAAO,OAAO,UAAU,eAAe,KAAK,QAAQ,WAAW,KAAK,OAAO,UAAU,eAAe,KAAK,QAAQ,cAAc;AACjI;"}
+{"version":3,"file":"Title.js","sources":["../src/components/Title/Title.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport titleStyles from './styles.module.scss';\n\nexport type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';\nexport type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5' | 'title6';\n\nexport interface TitleProps {\n  children: React.ReactNode;\n  /** Gives a unique id to the title */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds top and bottom margin in rem. */\n  margin?: number | TitleMargin;\n  /** Changes the underlying element of the title. */\n  htmlMarkup?: TitleTags;\n  /** Changes the appearance of the title. */\n  appearance?: TitleAppearances;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Title = React.forwardRef(function TitleForwardedRef(props: TitleProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const { id, children, className, htmlMarkup = 'h1', appearance = 'title1', margin = 0, testId } = props;\n  const titleClasses = classNames(\n    titleStyles.title,\n    {\n      [titleStyles['title--feature']]: appearance === 'titleFeature',\n      [titleStyles['title--title1']]: appearance === 'title1',\n      [titleStyles['title--title2']]: appearance === 'title2',\n      [titleStyles['title--title3']]: appearance === 'title3',\n      [titleStyles['title--title4']]: appearance === 'title4',\n      [titleStyles['title--title5']]: appearance === 'title5',\n      [titleStyles['title--title6']]: appearance === 'title6',\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  const inlineStyle = instanceOfTitleMargin(margin)\n    ? { marginTop: `${margin.marginTop}rem`, marginBottom: `${margin.marginBottom}rem` }\n    : { marginTop: `${margin}rem`, marginBottom: `${margin}rem` };\n\n  return (\n    <CustomTag id={id} className={titleClasses} style={inlineStyle} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Title}>\n      {children}\n    </CustomTag>\n  );\n});\n\nexport interface TitleMargin {\n  marginTop: number;\n  marginBottom: number;\n}\n\nexport const instanceOfTitleMargin = (margin: unknown): margin is TitleMargin => {\n  return Object.prototype.hasOwnProperty.call(margin, 'marginTop') && Object.prototype.hasOwnProperty.call(margin, 'marginBottom');\n};\n\nexport default Title;\n"],"names":["React"],"mappings":";;;;;AA2BO,MAAM,QAAQA,eAAM,WAAW,SAAS,kBAAkB,OAAmB,KAA6C;AACzH,QAAA,EAAE,IAAI,UAAU,WAAW,aAAa,MAAM,aAAa,UAAU,SAAS,GAAG,OAAW,IAAA;AAClG,QAAM,eAAe;AAAA,IACnB,YAAY;AAAA,IACZ;AAAA,MACE,CAAC,YAAY,gBAAgB,CAAC,GAAG,eAAe;AAAA,MAChD,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,IACjD;AAAA,IACA;AAAA,EACF;AACA,QAAM,YAAY;AAEZ,QAAA,cAAc,sBAAsB,MAAM,IAC5C,EAAE,WAAW,GAAG,OAAO,SAAS,OAAO,cAAc,GAAG,OAAO,YAAY,MAAA,IAC3E,EAAE,WAAW,GAAG,MAAM,OAAO,cAAc,GAAG,MAAM,MAAM;AAE9D,SACG,oBAAA,WAAA,EAAU,IAAQ,WAAW,cAAc,OAAO,aAAa,KAAU,eAAa,QAAQ,oBAAkB,YAAY,OAC1H,UACH;AAEJ,CAAC;AAOY,MAAA,wBAAwB,CAAC,WAA2C;AAC/E,SAAO,OAAO,UAAU,eAAe,KAAK,QAAQ,WAAW,KAAK,OAAO,UAAU,eAAe,KAAK,QAAQ,cAAc;AACjI;"}

package/TooltipWord.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import { AnalyticsId } from "./constants.js";
 import styles from "./components/Tooltip/TooltipWord/styles.module.scss";
-const TooltipWord = React.forwardRef(
+const TooltipWord = React__default.forwardRef(
   ({ children, onClick, onFocus, onBlur, onKeyDown, testId, ariaDescribedById }, ref) => /* @__PURE__ */ jsx(
     "button",
     {

package/TooltipWord.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipWord.js","sources":["../src/components/Tooltip/TooltipWord/TooltipWord.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TooltipWordProps {\n  /** Ordet som skal ha en tilhørende tooltip */\n  children: string;\n  /** Callback når ordet klikkes på */\n  onClick: () => void;\n  /** Callback når ordet får fokus eller hovres over */\n  onFocus: () => void;\n  /** Callback når ordet mister fokus eller hover forsvinner */\n  onBlur: () => void;\n  /** Callback når det skrives på tastaturet */\n  onKeyDown: (e: React.KeyboardEvent<HTMLSpanElement>) => void;\n  /** ID til element som beskriver ordet */\n  ariaDescribedById: string;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nconst TooltipWord = React.forwardRef<HTMLButtonElement, TooltipWordProps>(\n  ({ children, onClick, onFocus, onBlur, onKeyDown, testId, ariaDescribedById }, ref) => (\n    <button\n      className={styles.word}\n      ref={ref}\n      onClick={onClick}\n      onMouseEnter={onFocus}\n      onMouseLeave={onBlur}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n      aria-describedby={ariaDescribedById}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Tooltip}\n    >\n      {children}\n    </button>\n  )\n);\n\nTooltipWord.displayName = 'TooltipWord';\n\nexport default TooltipWord;\n"],"names":[],"mappings":";;;;AAuBA,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,UAAU,SAAS,SAAS,QAAQ,WAAW,QAAQ,qBAAqB,QAC7E;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,OAAO;AAAA,MAClB;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAE7B;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,YAAY,cAAc;"}
+{"version":3,"file":"TooltipWord.js","sources":["../src/components/Tooltip/TooltipWord/TooltipWord.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TooltipWordProps {\n  /** Ordet som skal ha en tilhørende tooltip */\n  children: string;\n  /** Callback når ordet klikkes på */\n  onClick: () => void;\n  /** Callback når ordet får fokus eller hovres over */\n  onFocus: () => void;\n  /** Callback når ordet mister fokus eller hover forsvinner */\n  onBlur: () => void;\n  /** Callback når det skrives på tastaturet */\n  onKeyDown: (e: React.KeyboardEvent<HTMLSpanElement>) => void;\n  /** ID til element som beskriver ordet */\n  ariaDescribedById: string;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nconst TooltipWord = React.forwardRef<HTMLButtonElement, TooltipWordProps>(\n  ({ children, onClick, onFocus, onBlur, onKeyDown, testId, ariaDescribedById }, ref) => (\n    <button\n      className={styles.word}\n      ref={ref}\n      onClick={onClick}\n      onMouseEnter={onFocus}\n      onMouseLeave={onBlur}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n      aria-describedby={ariaDescribedById}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Tooltip}\n    >\n      {children}\n    </button>\n  )\n);\n\nTooltipWord.displayName = 'TooltipWord';\n\nexport default TooltipWord;\n"],"names":["React"],"mappings":";;;;AAuBA,MAAM,cAAcA,eAAM;AAAA,EACxB,CAAC,EAAE,UAAU,SAAS,SAAS,QAAQ,WAAW,QAAQ,qBAAqB,QAC7E;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,OAAO;AAAA,MAClB;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAE7B;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,YAAY,cAAc;"}

package/Trigger.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { g as getIcon, I as Icon } from "./Icon.js";
-import { IconSize, AnalyticsId } from "./constants.js";
+import { AnalyticsId, IconSize } from "./constants.js";
 import { useHover } from "./hooks/useHover.js";
 import { getColor } from "./theme/currys/color.js";
 import { getAriaLabelAttributes } from "./utils/accessibility.js";
@@ -35,7 +35,7 @@ const getIconColor = (onColor, variant, isActive) => {
     return getColor("blueberry", depth);
   }
 };
-const Trigger = React.forwardRef(
+const Trigger = React__default.forwardRef(
   ({
     ariaLabel,
     ariaLabelledById,

package/Trigger.js.map

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

package/components/Button/styles.module.scss

@@ -365,6 +365,11 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 
   @include on-dark;
+
+  @include tiny-screens-media-query {
+    min-height: getSpacer(l);
+    padding: 0 getSpacer(xs);
+  }
 }
 
 .diagonal {

package/components/DictionaryTrigger/index.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "../../constants.js";
 import styles from "./styles.module.scss";
-const DictionaryTrigger = React.forwardRef(
+const DictionaryTrigger = React__default.forwardRef(
   ({ children, selected = false, className, testId, ...rest }, ref) => {
     const triggerClasses = classNames(styles.dictionarytrigger, className);
     return /* @__PURE__ */ jsx(

package/components/DictionaryTrigger/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/DictionaryTrigger/DictionaryTrigger.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {\n  /**\n   * Sets the content of the trigger.\n   */\n  children: React.ReactNode;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n}\n\nconst DictionaryTrigger = React.forwardRef<HTMLButtonElement, DictionaryTriggerProps>(\n  ({ children, selected = false, className, testId, ...rest }, ref) => {\n    const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n    return (\n      <button\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.DictionaryTrigger}\n        className={triggerClasses}\n        aria-expanded={selected}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n"],"names":[],"mappings":";;;;;AA2BA,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CAAC,EAAE,UAAU,WAAW,OAAO,WAAW,QAAQ,GAAG,KAAK,GAAG,QAAQ;AACnE,UAAM,iBAAiB,WAAW,OAAO,mBAAmB,SAAS;AAGnE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAa;AAAA,QACb,oBAAkB,YAAY;AAAA,QAC9B,WAAW;AAAA,QACX,iBAAe;AAAA,QACf;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,kBAAkB,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/DictionaryTrigger/DictionaryTrigger.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {\n  /**\n   * Sets the content of the trigger.\n   */\n  children: React.ReactNode;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n}\n\nconst DictionaryTrigger = React.forwardRef<HTMLButtonElement, DictionaryTriggerProps>(\n  ({ children, selected = false, className, testId, ...rest }, ref) => {\n    const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n    return (\n      <button\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.DictionaryTrigger}\n        className={triggerClasses}\n        aria-expanded={selected}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n"],"names":["React"],"mappings":";;;;;AA2BA,MAAM,oBAAoBA,eAAM;AAAA,EAC9B,CAAC,EAAE,UAAU,WAAW,OAAO,WAAW,QAAQ,GAAG,KAAK,GAAG,QAAQ;AACnE,UAAM,iBAAiB,WAAW,OAAO,mBAAmB,SAAS;AAGnE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAa;AAAA,QACb,oBAAkB,YAAY;AAAA,QAC9B,WAAW;AAAA,QACX,iBAAe;AAAA,QACf;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,kBAAkB,cAAc;"}

package/components/Drawer/Drawer.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+import { TitleTags } from '../Title';
+type DesktopDirections = 'left' | 'right';
+export interface DrawerProps extends InnerDrawerProps {
+    /** Opens and closes the drawer */
+    isOpen: boolean;
+}
+export interface InnerDrawerProps {
+    /** Sets the aria-label of the drawer */
+    ariaLabel?: string;
+    /** Sets the aria-labelledby of the drawer */
+    ariaLabelledBy?: string;
+    /** Close button aria-label */
+    ariaLabelCloseBtn?: string;
+    /** Direction of the drawer on desktop. Default: left */
+    desktopDirection?: DesktopDirections;
+    /** Title to display in the header of the drawer */
+    title: string;
+    /** id of the drawer title */
+    titleId?: string;
+    /** Changes the underlying element of the title. Default: h3 */
+    titleHtmlMarkup?: TitleTags;
+    /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */
+    onRequestClose: () => void;
+    /** Optional footer content that can be rendered instead of default CTA(s) */
+    footerContent?: React.ReactNode;
+    /** Main content of the drawer */
+    children?: React.ReactNode;
+    /** Primary CTA callback */
+    onPrimaryAction?: () => void;
+    /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */
+    primaryActionText?: string;
+    /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */
+    secondaryActionText?: string;
+    /** Secondary CTA callback */
+    onSecondaryAction?: () => void;
+    /** Customize the z-index of the drawer */
+    zIndex?: number;
+}
+declare const Drawer: React.FC<DrawerProps>;
+export default Drawer;

package/components/Drawer/Drawer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Drawer/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Drawer } from './Drawer';
+export * from './Drawer';
+export default Drawer;