@helsenorge/designsystem-react 12.12.2 → 12.12.3

package/lib/Table.js.map

@@ -0,0 +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","React"],"mappings":"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"}

package/lib/TableBody.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+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__default.Children.map(children, (child) => React__default.isValidElement(child) && React__default.cloneElement(child, { mode })) });
+};
+export {
+  TableBody as T
+};
+//# sourceMappingURL=TableBody.js.map

package/lib/TableBody.js.map

@@ -0,0 +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":["React"],"mappings":";;;;;AAgBO,MAAM,YAA6B,CAAC,EAAE,WAAW,UAAU,OAAO,SAAS,QAAQ,GAAG,WAAW;AACtG,QAAM,mBAAmB,WAAW,YAAY,YAAY,GAAG,SAAS;AACxE,SACE,oBAAC,WAAM,WAAW,kBAAmB,GAAG,MACrC,UAAAA,eAAM,SAAS,IAAI,UAAU,CAAA,UAASA,eAAM,eAAoC,KAAK,KAAKA,eAAM,aAAa,OAAO,EAAE,KAAA,CAAM,CAAC,EAAA,CAChI;AAEJ;"}

package/lib/TableCell.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import tableStyles from "./components/Table/styles.module.scss";
+import { M as ModeType } from "./Table.js";
+var TextAlign = /* @__PURE__ */ ((TextAlign2) => {
+  TextAlign2["left"] = "left";
+  TextAlign2["center"] = "center";
+  TextAlign2["right"] = "right";
+  return TextAlign2;
+})(TextAlign || {});
+const TableCell = ({
+  nowrap = false,
+  textAlign = "left",
+  dataLabel,
+  children,
+  className,
+  testId,
+  mode = ModeType.normal,
+  ...rest
+}) => {
+  const tableCellClass = classNames(
+    tableStyles["table__cell"],
+    { [tableStyles["table__cell--compact"]]: mode === ModeType.compact },
+    { [tableStyles["table__cell--nowrap"]]: nowrap },
+    { [tableStyles["table__cell--center"]]: textAlign === "center" },
+    { [tableStyles["table__cell--right"]]: textAlign === "right" },
+    className
+  );
+  return /* @__PURE__ */ jsx("td", { className: tableCellClass, "data-label": dataLabel, "data-testid": testId, ...rest, children });
+};
+export {
+  TableCell as T,
+  TextAlign as a
+};
+//# sourceMappingURL=TableCell.js.map

package/lib/TableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.js","sources":["../src/components/Table/TableCell/TableCell.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 TextAlign {\n  left = 'left',\n  center = 'center',\n  right = 'right',\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {\n  /** Label used for small viewport block */\n  dataLabel?: string;\n  /**  text align in cell */\n  textAlign?: TextAlign;\n  /**  nowrap for white space */\n  nowrap?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table cell */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** For test purposes */\n  testId?: string;\n}\n\nexport const TableCell: React.FC<Props> = ({\n  nowrap = false,\n  textAlign = TextAlign.left,\n  dataLabel,\n  children,\n  className,\n  testId,\n  mode = ModeType.normal,\n  ...rest\n}) => {\n  const tableCellClass = classNames(\n    tableStyles['table__cell'],\n    { [tableStyles['table__cell--compact']]: mode === ModeType.compact },\n    { [tableStyles['table__cell--nowrap']]: nowrap },\n    { [tableStyles['table__cell--center']]: textAlign === 'center' },\n    { [tableStyles['table__cell--right']]: textAlign === 'right' },\n    className\n  );\n\n  return (\n    <td className={tableCellClass} data-label={dataLabel} data-testid={testId} {...rest}>\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n"],"names":["TextAlign"],"mappings":";;;;AAOO,IAAK,8BAAAA,eAAL;AACLA,aAAA,MAAA,IAAO;AACPA,aAAA,QAAA,IAAS;AACTA,aAAA,OAAA,IAAQ;AAHE,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;AAuBL,MAAM,YAA6B,CAAC;AAAA,EACzC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAAA,EAChB,GAAG;AACL,MAAM;AACJ,QAAM,iBAAiB;AAAA,IACrB,YAAY,aAAa;AAAA,IACzB,EAAE,CAAC,YAAY,sBAAsB,CAAC,GAAG,SAAS,SAAS,QAAA;AAAA,IAC3D,EAAE,CAAC,YAAY,qBAAqB,CAAC,GAAG,OAAA;AAAA,IACxC,EAAE,CAAC,YAAY,qBAAqB,CAAC,GAAG,cAAc,SAAA;AAAA,IACtD,EAAE,CAAC,YAAY,oBAAoB,CAAC,GAAG,cAAc,QAAA;AAAA,IACrD;AAAA,EAAA;AAGF,SACE,oBAAC,MAAA,EAAG,WAAW,gBAAgB,cAAY,WAAW,eAAa,QAAS,GAAG,MAC5E,SAAA,CACH;AAEJ;"}

package/lib/TableExpandedRow.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { B as Button } from "./Button.js";
+import { I as Icon } from "./Icon.js";
+import ChevronUp from "./components/Icons/ChevronUp.js";
+import tableStyles from "./components/Table/styles.module.scss";
+import { M as ModeType } from "./Table.js";
+const TableExpandedRow = ({
+  numberOfColumns,
+  expanded,
+  hideDetailsText,
+  toggleClick,
+  children,
+  className,
+  mode = ModeType.normal,
+  id
+}) => {
+  const tableRowClass = classNames(
+    tableStyles["table__expanded-row"],
+    { [tableStyles["table__expanded-row--expanded"]]: expanded },
+    className
+  );
+  const tableCellClass = classNames(tableStyles["table__cell"], className, {
+    [tableStyles["table__cell--compact"]]: mode === ModeType.compact
+  });
+  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__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 })
+    ] })
+  ] }) }) });
+};
+export {
+  TableExpandedRow as T
+};
+//# sourceMappingURL=TableExpandedRow.js.map

package/lib/TableExpandedRow.js.map

@@ -0,0 +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":["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,SAAA;AAAA,IAClD;AAAA,EAAA;AAEF,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,SACE,oBAAC,MAAA,EAAG,WAAW,eAAe,IAC5B,UAAA,oBAAC,MAAA,EAAG,SAAS,iBAAiB,WAAW,gBACvC,UAAA,qBAAC,OAAA,EAAI,WAAW,gBACb,UAAA;AAAA,IAAAA,eAAM,SAAS,IAAI,UAAU,CAAA,UAASA,eAAM,eAAe,KAAK,KAAKA,eAAM,aAAa,KAAK,CAAC;AAAA,IAC/F,qBAAC,QAAA,EAAO,SAAS,cAAc,SAAS,aAAa,iBAAe,UAAU,UAAU,WAAW,IAAI,IACpG,UAAA;AAAA,MAAA;AAAA,MACD,oBAAC,MAAA,EAAK,SAAS,UAAA,CAAW;AAAA,IAAA,EAAA,CAC5B;AAAA,EAAA,EAAA,CACF,GACF,GACF;AAEJ;"}

package/lib/TableExpanderCell.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { B as Button } from "./Button.js";
+import { I as Icon } from "./Icon.js";
+import ChevronDown from "./components/Icons/ChevronDown.js";
+import ChevronUp from "./components/Icons/ChevronUp.js";
+import tableStyles from "./components/Table/styles.module.scss";
+import { M as ModeType } from "./Table.js";
+const TableExpanderCell = ({
+  expandableRowId,
+  hideDetailsText,
+  showDetailsText,
+  expanded,
+  className,
+  mode = ModeType.normal
+}) => {
+  const tableCellClass = classNames(tableStyles["table__cell"], tableStyles["table__cell-expander"], className, {
+    [tableStyles["table__cell--compact"]]: mode === ModeType.compact
+  });
+  const icon = expanded ? ChevronUp : ChevronDown;
+  return /* @__PURE__ */ jsx("td", { className: tableCellClass, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "borderless",
+      "aria-expanded": expanded,
+      "aria-controls": expandableRowId,
+      ariaLabel: expanded ? hideDetailsText : showDetailsText,
+      children: /* @__PURE__ */ jsx(Icon, { svgIcon: icon })
+    }
+  ) });
+};
+export {
+  TableExpanderCell as T
+};
+//# sourceMappingURL=TableExpanderCell.js.map

package/lib/TableExpanderCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableExpanderCell.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.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';\n\nexport interface Props {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Id for expanded row. */\n  expandableRowId: string;\n  /** Text for hide button used for aria label. */\n  hideDetailsText: string;\n  /** Text for show button used for aria label. */\n  showDetailsText: string;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableExpanderCell = ({\n  expandableRowId,\n  hideDetailsText,\n  showDetailsText,\n  expanded,\n  className,\n  mode = ModeType.normal,\n}: Props): React.JSX.Element => {\n  const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className, {\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n  const icon = expanded ? ChevronUp : ChevronDown;\n\n  return (\n    <td className={tableCellClass}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={expanded}\n        aria-controls={expandableRowId}\n        ariaLabel={expanded ? hideDetailsText : showDetailsText}\n      >\n        <Icon svgIcon={icon} />\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCell;\n"],"names":[],"mappings":";;;;;;;;AA0BO,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAClB,MAAgC;AAC9B,QAAM,iBAAiB,WAAW,YAAY,aAAa,GAAG,YAAY,sBAAsB,GAAG,WAAW;AAAA,IAC5G,CAAC,YAAY,sBAAsB,CAAC,GAAG,SAAS,SAAS;AAAA,EAAA,CAC1D;AACD,QAAM,OAAO,WAAW,YAAY;AAEpC,SACE,oBAAC,MAAA,EAAG,WAAW,gBACb,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,WAAW,WAAW,kBAAkB;AAAA,MAExC,UAAA,oBAAC,MAAA,EAAK,SAAS,KAAA,CAAM;AAAA,IAAA;AAAA,EAAA,GAEzB;AAEJ;"}

package/lib/TableHead.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import tableStyles from "./components/Table/styles.module.scss";
+import { M as ModeType } from "./Table.js";
+var HeaderCategory = /* @__PURE__ */ ((HeaderCategory2) => {
+  HeaderCategory2["normal"] = "normal";
+  HeaderCategory2["transparent"] = "transparent";
+  HeaderCategory2["sortable"] = "sortable";
+  return HeaderCategory2;
+})(HeaderCategory || {});
+const TableHead = ({ category = "normal", className, children, mode, ...rest }) => {
+  const tableHeadClass = classNames(
+    tableStyles["table__head"],
+    {
+      [tableStyles["table__head--normal"]]: category === "normal",
+      [tableStyles["table__head--transparent"]]: category === "transparent",
+      [tableStyles["table__head--sortable"]]: category == "sortable",
+      [tableStyles["table__head--compact"]]: mode == ModeType.compact
+    },
+    className
+  );
+  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,
+  TableHead as T
+};
+//# sourceMappingURL=TableHead.js.map

package/lib/TableHead.js.map

@@ -0,0 +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","React"],"mappings":";;;;;AAOO,IAAK,mCAAAA,oBAAL;AACLA,kBAAA,QAAA,IAAS;AACTA,kBAAA,aAAA,IAAc;AACdA,kBAAA,UAAA,IAAW;AAHD,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAiBL,MAAM,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,IAAA;AAAA,IAE1D;AAAA,EAAA;AAGF,SACE,oBAAC,WAAM,WAAW,gBAAiB,GAAG,MACnC,UAAAC,eAAM,SAAS,IAAI,UAAU,CAAA,UAASA,eAAM,eAAoC,KAAK,KAAKA,eAAM,aAAa,OAAO,EAAE,KAAA,CAAM,CAAC,EAAA,CAChI;AAEJ;"}

package/lib/TableHeadCell.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { I as Icon } from "./Icon.js";
+import { IconSize } from "./constants.js";
+import ArrowDown from "./components/Icons/ArrowDown.js";
+import ArrowUp from "./components/Icons/ArrowUp.js";
+import tableStyles from "./components/Table/styles.module.scss";
+import { M as ModeType } from "./Table.js";
+var SortDirection = /* @__PURE__ */ ((SortDirection2) => {
+  SortDirection2["asc"] = "asc";
+  SortDirection2["desc"] = "desc";
+  return SortDirection2;
+})(SortDirection || {});
+const TableHeadCell = ({
+  sortable,
+  onClick,
+  className,
+  children,
+  sortDir,
+  mode = ModeType.normal,
+  scope = "col",
+  ...rest
+}) => {
+  const tableHeadCellDefaultClass = classNames(tableStyles["table__head-cell"], className, {
+    [tableStyles["table__head-cell--compact"]]: mode === ModeType.compact
+  });
+  if (!sortable && !children) {
+    return /* @__PURE__ */ jsx("td", { className: tableHeadCellDefaultClass });
+  }
+  if (!sortable) {
+    return /* @__PURE__ */ jsx("th", { scope, className: tableHeadCellDefaultClass, ...rest, children });
+  }
+  const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles["table__head-cell--sortable"], className);
+  const renderSortIcon = () => sortDir && /* @__PURE__ */ jsx("div", { className: tableStyles["table__head-cell-sort-icon-wrapper"], children: /* @__PURE__ */ jsx(Icon, { svgIcon: sortDir == "asc" ? ArrowDown : ArrowUp, size: IconSize.XXSmall }) });
+  const getSortDirection = () => {
+    switch (sortDir) {
+      case "asc":
+        return "ascending";
+      case "desc":
+        return "descending";
+    }
+  };
+  return /* @__PURE__ */ jsx("th", { scope, className: sortableClasses, "aria-sort": getSortDirection(), ...rest, children: /* @__PURE__ */ jsxs("button", { type: "button", onClick, className: tableStyles["table__sort-button"], "aria-pressed": sortDir ? !!sortDir : void 0, children: [
+    renderSortIcon(),
+    children
+  ] }) });
+};
+export {
+  SortDirection as S,
+  TableHeadCell as T
+};
+//# sourceMappingURL=TableHeadCell.js.map

package/lib/TableHeadCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeadCell.js","sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum SortDirection {\n  asc = 'asc',\n  desc = 'desc',\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'th'>, 'style'> {\n  /** Sets if column for head cell should be sortable*/\n  sortable?: boolean;\n  /** Sort direction  */\n  sortDir?: SortDirection;\n  /** Function that is called when clicked */\n  onClick?: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the td 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 TableHeadCell: React.FC<Props> = ({\n  sortable,\n  onClick,\n  className,\n  children,\n  sortDir,\n  mode = ModeType.normal,\n  scope = 'col',\n  ...rest\n}) => {\n  const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n    [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n  });\n\n  if (!sortable && !children) {\n    return <td className={tableHeadCellDefaultClass}></td>;\n  }\n\n  if (!sortable) {\n    return (\n      <th scope={scope} className={tableHeadCellDefaultClass} {...rest}>\n        {children}\n      </th>\n    );\n  }\n\n  const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles['table__head-cell--sortable'], className);\n\n  const renderSortIcon = (): React.JSX.Element | undefined =>\n    sortDir && (\n      <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n        <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n      </div>\n    );\n\n  const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n    switch (sortDir) {\n      case SortDirection.asc:\n        return 'ascending';\n      case SortDirection.desc:\n        return 'descending';\n    }\n  };\n\n  return (\n    <th scope={scope} className={sortableClasses} aria-sort={getSortDirection()} {...rest}>\n      <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n        {renderSortIcon()}\n        {children}\n      </button>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["SortDirection"],"mappings":";;;;;;;;AAUO,IAAK,kCAAAA,mBAAL;AACLA,iBAAA,KAAA,IAAM;AACNA,iBAAA,MAAA,IAAO;AAFG,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAoBL,MAAM,gBAAiC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAAA,EAChB,QAAQ;AAAA,EACR,GAAG;AACL,MAAM;AACJ,QAAM,4BAA4B,WAAW,YAAY,kBAAkB,GAAG,WAAW;AAAA,IACvF,CAAC,YAAY,2BAA2B,CAAC,GAAG,SAAS,SAAS;AAAA,EAAA,CAC/D;AAED,MAAI,CAAC,YAAY,CAAC,UAAU;AAC1B,WAAO,oBAAC,MAAA,EAAG,WAAW,0BAAA,CAA2B;AAAA,EACnD;AAEA,MAAI,CAAC,UAAU;AACb,+BACG,MAAA,EAAG,OAAc,WAAW,2BAA4B,GAAG,MACzD,UACH;AAAA,EAEJ;AAEA,QAAM,kBAAkB,WAAW,2BAA2B,YAAY,4BAA4B,GAAG,SAAS;AAElH,QAAM,iBAAiB,MACrB,+BACG,OAAA,EAAI,WAAW,YAAY,oCAAoC,GAC9D,8BAAC,MAAA,EAAK,SAAS,WAAW,QAAoB,YAAY,SAAS,MAAM,SAAS,SAAS,GAC7F;AAGJ,QAAM,mBAAmB,MAAyC;AAChE,YAAQ,SAAA;AAAA,MACN,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,SACE,oBAAC,MAAA,EAAG,OAAc,WAAW,iBAAiB,aAAW,iBAAA,GAAqB,GAAG,MAC/E,UAAA,qBAAC,UAAA,EAAO,MAAK,UAAS,SAAkB,WAAW,YAAY,oBAAoB,GAAG,gBAAc,UAAU,CAAC,CAAC,UAAU,QACvH,UAAA;AAAA,IAAA,eAAA;AAAA,IACA;AAAA,EAAA,EAAA,CACH,EAAA,CACF;AAEJ;"}

package/lib/TableRow.js

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import tableStyles from "./components/Table/styles.module.scss";
+import { M as ModeType } from "./Table.js";
+import { B as Button } from "./Button.js";
+import { I as Icon } from "./Icon.js";
+import ChevronDown from "./components/Icons/ChevronDown.js";
+import ChevronUp from "./components/Icons/ChevronUp.js";
+const TableExpanderCellMobile = ({
+  expanded,
+  onClick,
+  hideDetailsText,
+  showDetailsText,
+  mode = ModeType.normal
+}) => {
+  const cellClass = classNames(tableStyles.table__cell, tableStyles["table__expander-cell-mobile"], {
+    [tableStyles["table__expander-cell-mobile--expanded"]]: expanded,
+    [tableStyles["table__cell--compact"]]: mode === ModeType.compact
+  });
+  return /* @__PURE__ */ jsx("td", { className: cellClass, children: /* @__PURE__ */ jsxs(Button, { "aria-expanded": expanded, variant: "borderless", onClick, children: [
+    /* @__PURE__ */ jsx(Icon, { svgIcon: expanded ? ChevronUp : ChevronDown }),
+    " ",
+    expanded ? hideDetailsText : showDetailsText
+  ] }) });
+};
+const TableRow = ({
+  rowKey,
+  hideDetailsText,
+  showDetailsText,
+  expandable,
+  expanded,
+  onClick,
+  className,
+  children,
+  mode = ModeType.normal,
+  ...rest
+}) => {
+  const tableRowClass = classNames(
+    tableStyles["table-row"],
+    {
+      [tableStyles["table__row--expandable"]]: expandable
+    },
+    className
+  );
+  return /* @__PURE__ */ jsxs("tr", { className: tableRowClass, onClick, ...rest, children: [
+    React__default.Children.map(children, (child) => React__default.isValidElement(child) && React__default.cloneElement(child, { mode })),
+    expandable && /* @__PURE__ */ jsx(
+      TableExpanderCellMobile,
+      {
+        expanded,
+        onClick,
+        hideDetailsText,
+        showDetailsText,
+        mode
+      }
+    )
+  ] }, rowKey);
+};
+export {
+  TableRow as T
+};
+//# sourceMappingURL=TableRow.js.map

package/lib/TableRow.js.map

@@ -0,0 +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":["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;AAED,SACE,oBAAC,MAAA,EAAG,WAAW,WACb,UAAA,qBAAC,UAAO,iBAAe,UAAU,SAAQ,cAAa,SACpD,UAAA;AAAA,IAAA,oBAAC,MAAA,EAAK,SAAS,WAAW,YAAY,aAAa;AAAA,IAAE;AAAA,IAAE,WAAW,kBAAkB;AAAA,EAAA,EAAA,CACtF,EAAA,CACF;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,IAAA;AAAA,IAE3C;AAAA,EAAA;AAGF,8BACG,MAAA,EAAG,WAAW,eAAe,SAAgC,GAAG,MAC9D,UAAA;AAAA,IAAAA,eAAM,SAAS,IAAI,UAAU,CAAA,UAASA,eAAM,eAAoC,KAAK,KAAKA,eAAM,aAAa,OAAO,EAAE,KAAA,CAAM,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/lib/Textarea.js

@@ -0,0 +1,148 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+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";
+import { getAriaDescribedBy } from "./utils/accessibility.js";
+import { u as uuid } from "./uuid.js";
+import { E as ErrorWrapper } from "./ErrorWrapper.js";
+import { a as renderLabel } from "./Label.js";
+import { M as MaxCharacters } from "./MaxCharacters.js";
+import styles from "./components/Textarea/styles.module.scss";
+const getTextareaMaxWidth = (characters) => {
+  const paddingWidth = "2rem";
+  const scrollbarWidth = "16px";
+  const borderWidth = "4px";
+  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;
+};
+const Textarea = React__default.forwardRef((props, ref) => {
+  const {
+    maxCharacters,
+    maxText,
+    width,
+    testId,
+    defaultValue,
+    marginBottom: gutterBottom,
+    transparent,
+    onColor = FormOnColor.onwhite,
+    label,
+    textareaId = uuid(),
+    minRows = 3,
+    maxRows = 10,
+    grow,
+    error,
+    errorText,
+    errorTextId,
+    errorWrapperClassName,
+    autoFocus,
+    disabled,
+    name,
+    autoComplete = "off",
+    placeholder,
+    readOnly,
+    required,
+    onChange,
+    value,
+    ...rest
+  } = props;
+  const [rows, setRows] = useState(minRows);
+  const [textareaInput, setTextareaInput] = useState(value || defaultValue || "");
+  const referanse = useRef(null);
+  const errorTextUuid = useUuid(errorTextId);
+  useEffect(() => {
+    setTextareaInput(defaultValue || "");
+  }, [defaultValue]);
+  const resizeHeight = (target) => {
+    const textareaLineHeight = 28;
+    const previousRows = target.rows;
+    target.rows = minRows;
+    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight);
+    if (currentRows === previousRows) {
+      target.rows = currentRows;
+    }
+    if (currentRows >= maxRows) {
+      target.rows = maxRows;
+      target.scrollTop = target.scrollHeight;
+    }
+    if (currentRows < maxRows) {
+      setRows(currentRows);
+    } else {
+      setRows(maxRows);
+    }
+  };
+  const onDark = onColor === FormOnColor.ondark;
+  const onBlueberry = onColor === FormOnColor.onblueberry;
+  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;
+  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;
+  const textareaWrapperClass = classNames(styles.textarea, {
+    [styles["textarea--gutterBottom"]]: gutterBottom
+  });
+  const contentWrapperClass = classNames(styles["input-container"], {
+    [styles["input-container--transparent"]]: transparent,
+    [styles["input-container--on-blueberry"]]: onBlueberry,
+    [styles["input-container--on-dark"]]: onDark,
+    [styles["input-container--invalid"]]: onError,
+    [styles["input-container--disabled"]]: props.disabled
+  });
+  const textareaClass = classNames(styles["input-container__input"], {
+    [styles[`input-container__input--disabled`]]: props.disabled
+  });
+  useEffect(() => {
+    var _a, _b, _c;
+    if (value) setTextareaInput(value);
+    if (grow && ((_a = referanse.current) == null ? void 0 : _a.children) && ((_b = referanse.current) == null ? void 0 : _b.children[0])) {
+      const textarea = (_c = referanse.current) == null ? void 0 : _c.children[0];
+      resizeHeight(textarea);
+    }
+  }, [value]);
+  const onChangeHandler = (e) => {
+    setTextareaInput(e.target.value);
+    if (onChange) {
+      onChange(e);
+    }
+    if (grow) {
+      resizeHeight(e.target);
+    }
+  };
+  const maxWidth = width ? getTextareaMaxWidth(width) : void 0;
+  return /* @__PURE__ */ jsx(ErrorWrapper, { className: errorWrapperClassName, errorText, errorTextId: errorTextUuid, children: /* @__PURE__ */ jsxs("div", { "data-testid": testId, "data-analyticsid": AnalyticsId.Textarea, className: textareaWrapperClass, children: [
+    renderLabel(label, textareaId, onColor),
+    /* @__PURE__ */ jsx("div", { className: contentWrapperClass, ref: referanse, style: { maxWidth }, children: /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...rest,
+        rows,
+        defaultValue,
+        id: textareaId,
+        className: textareaClass,
+        ref,
+        "aria-describedby": getAriaDescribedBy(props, errorTextUuid),
+        "aria-invalid": !!onError,
+        autoFocus,
+        disabled,
+        name,
+        autoComplete: autoComplete ? autoComplete : void 0,
+        placeholder,
+        readOnly,
+        required,
+        onChange: onChangeHandler,
+        value
+      }
+    ) }),
+    maxCharacters && /* @__PURE__ */ jsx(
+      MaxCharacters,
+      {
+        maxCharacters,
+        length: textareaInput.toString().length,
+        maxText,
+        onColor,
+        maxWidth
+      }
+    )
+  ] }) });
+});
+Textarea.displayName = "Textarea";
+export {
+  Textarea as T
+};
+//# sourceMappingURL=Textarea.js.map

package/lib/Textarea.js.map

@@ -0,0 +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    if (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/lib/Title.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+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__default.forwardRef(function TitleForwardedRef(props, ref) {
+  const { id, children, className, htmlMarkup = "h1", appearance = "title1", margin = 0, testId } = props;
+  const titleClasses = classNames(
+    titleStyles.title,
+    {
+      [titleStyles["title--feature"]]: appearance === "titleFeature",
+      [titleStyles["title--title1"]]: appearance === "title1",
+      [titleStyles["title--title2"]]: appearance === "title2",
+      [titleStyles["title--title3"]]: appearance === "title3",
+      [titleStyles["title--title4"]]: appearance === "title4",
+      [titleStyles["title--title5"]]: appearance === "title5",
+      [titleStyles["title--title6"]]: appearance === "title6"
+    },
+    className
+  );
+  const CustomTag = htmlMarkup;
+  const inlineStyle = instanceOfTitleMargin(margin) ? { marginTop: `${margin.marginTop}rem`, marginBottom: `${margin.marginBottom}rem` } : { marginTop: `${margin}rem`, marginBottom: `${margin}rem` };
+  return /* @__PURE__ */ jsx(CustomTag, { id, className: titleClasses, style: inlineStyle, ref, "data-testid": testId, "data-analyticsid": AnalyticsId.Title, children });
+});
+const instanceOfTitleMargin = (margin) => {
+  return Object.prototype.hasOwnProperty.call(margin, "marginTop") && Object.prototype.hasOwnProperty.call(margin, "marginBottom");
+};
+export {
+  Title as T,
+  instanceOfTitleMargin as i
+};
+//# sourceMappingURL=Title.js.map

package/lib/Title.js.map

@@ -0,0 +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":["React"],"mappings":";;;;;AA2BO,MAAM,QAAQA,eAAM,WAAW,SAAS,kBAAkB,OAAmB,KAA6C;AAC/H,QAAM,EAAE,IAAI,UAAU,WAAW,aAAa,MAAM,aAAa,UAAU,SAAS,GAAG,OAAA,IAAW;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,IAAA;AAAA,IAEjD;AAAA,EAAA;AAEF,QAAM,YAAY;AAElB,QAAM,cAAc,sBAAsB,MAAM,IAC5C,EAAE,WAAW,GAAG,OAAO,SAAS,OAAO,cAAc,GAAG,OAAO,YAAY,MAAA,IAC3E,EAAE,WAAW,GAAG,MAAM,OAAO,cAAc,GAAG,MAAM,MAAA;AAExD,SACE,oBAAC,WAAA,EAAU,IAAQ,WAAW,cAAc,OAAO,aAAa,KAAU,eAAa,QAAQ,oBAAkB,YAAY,OAC1H,UACH;AAEJ,CAAC;AAOM,MAAM,wBAAwB,CAAC,WAA2C;AAC/E,SAAO,OAAO,UAAU,eAAe,KAAK,QAAQ,WAAW,KAAK,OAAO,UAAU,eAAe,KAAK,QAAQ,cAAc;AACjI;"}

package/lib/Toast.js

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
+import { C as Close } from "./Close.js";
+import { I as Icon } from "./Icon.js";
+import { IconSize } from "./constants.js";
+import CheckFill from "./components/Icons/CheckFill.js";
+import styles from "./components/Toast/styles.module.scss";
+const Toast = ({ testId, title, message, onClose }) => {
+  const isMobile = useIsMobileBreakpoint();
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsxs("output", { className: styles["toast"], "data-testid": testId, children: [
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        size: isMobile ? IconSize.XSmall : IconSize.Small,
+        svgIcon: CheckFill,
+        className: classNames(styles["toast__icon"], styles["toast__icon--check"])
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: styles["toast__text-container"], children: [
+      /* @__PURE__ */ jsx("span", { className: styles["toast__title"], children: title }),
+      message && /* @__PURE__ */ jsx("span", { className: styles["toast__description"], children: message })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Close,
+      {
+        onClick: handleClose,
+        color: "black",
+        className: classNames(styles["toast__icon"], styles["toast__icon--close"]),
+        testId: `${testId}-close`
+      }
+    )
+  ] });
+};
+export {
+  Toast as T
+};
+//# sourceMappingURL=Toast.js.map