@helsenorge/designsystem-react 2.3.0 → 2.5.0

package/components/Progressbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Progressbar/utils.ts","../../../src/components/Progressbar/Dot.tsx","../../../src/components/Progressbar/DotList.tsx","../../../src/components/Progressbar/Progressbar.tsx"],"sourcesContent":["/**\n * Minimum avstand fra markør til prikk\n */\nconst MARKER_DOT_MIN_DISTANCE_PX = 4;\n\n/**\n * Bredde på markør\n */\nconst MARKER_WIDTH_PX = 24;\n\n/**\n * Horisontal padding på progressbar\n */\nexport const PROGRESS_BAR_PADDING_X_PX = 8;\n\n/**\n * Valider at minimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Mimimum-verdi, ikke større enn eller lik maksimum-verdi\n */\nexport const getValidatedMin = (min: number, max: number): number => (min < max ? min : max - 1);\n\n/**\n * Valider at maksimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Maksimum-verdi, ikke mindre enn minimum-verdi\n */\nexport const getValidatedMax = (min: number, max: number): number => (max < min ? min : max);\n\n/**\n * Valider at verdi er innenfor gyldig område\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Verdi, ikke mindre enn 0, ikke mer enn max\n */\nexport const getValidatedValue = (value: number | undefined, min: number, max: number): number => {\n  if (typeof value === 'undefined' || value < min) {\n    return min;\n  }\n\n  return value > max ? max : value;\n};\n\n/**\n * Finn antall prikker det er plass til\n * @param progressbarWidth Bredde på progressbar\n * @returns Antall prikker\n */\nexport const getMaximumDots = (progressbarWidth: number): number =>\n  Math.floor(progressbarWidth / (MARKER_WIDTH_PX + MARKER_DOT_MIN_DISTANCE_PX));\n\n/**\n * Beregn riktig distance mellom prikker\n * @param progressbarWidth Bredde på progressbar\n * @param dots Antall prikker som skal vises\n * @returns Distanse mellom prikker\n */\nexport const getDistanceBetweenDots = (progressbarWidth: number, dots: number): number => (progressbarWidth - MARKER_WIDTH_PX) / (dots - 1);\n\n/**\n * Beregn riktig plassering av markør\n * @param distanceBetweenDots Distanse mellom prikker\n * @param index Nåværende verdi i progressbar\n * @returns Plassering til markør fra venstre\n */\nexport const getMarkerPosition = (distanceBetweenDots: number, index: number): number => distanceBetweenDots * index;\n\n/**\n * Lag liste med tillate verdier fra min til maks\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Liste med verdier\n */\nexport const getAllowedValues = (min: number, max: number): number[] => Array.from(Array(max - min + 1), (_, index) => index + min);\n\n/**\n * Valider props som skal brukes til beregning av posisjon m.m.\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Objekt med gyldige verdier\n */\nexport const getValidatedProps = (\n  value: number | undefined,\n  min: number,\n  max: number\n): { validatedValue: number; validatedMin: number; validatedMax: number } => {\n  const validatedMin = getValidatedMin(min, max);\n  const validatedMax = getValidatedMax(validatedMin, max);\n  const validatedValue = getValidatedValue(value, validatedMin, validatedMax);\n\n  return { validatedValue, validatedMin, validatedMax };\n};\n","import classNames from 'classnames';\nimport React from 'react';\n\nimport { PROGRESS_BAR_PADDING_X_PX } from './utils';\n\nimport styles from './styles.module.scss';\n\ninterface DotProps {\n  index?: number;\n  completed: boolean;\n  distanceBetweenDots?: number;\n  position?: 'left' | 'right';\n}\n\nconst Dot: React.FC<DotProps> = ({ index, completed, distanceBetweenDots, position }) => {\n  const classes = classNames(\n    styles.progressbar__dot,\n    completed && styles['progressbar__dot--completed'],\n    position && styles[`progressbar__dot--${position}`]\n  );\n  const positionWithStyle = !position && typeof index !== 'undefined' && typeof distanceBetweenDots !== 'undefined';\n  const style: React.HTMLAttributes<HTMLSpanElement>['style'] = positionWithStyle\n    ? { left: `${index * distanceBetweenDots + PROGRESS_BAR_PADDING_X_PX}px` }\n    : undefined;\n\n  return <span className={classes} style={style} data-testid=\"dot\" />;\n};\n\nexport default Dot;\n","import React from 'react';\n\nimport Dot from './Dot';\n\ninterface DotListProps {\n  allowedValues: number[];\n  currentValue: number;\n  distanceBetweenDots: number;\n}\n\nconst Dots: React.FC<DotListProps> = ({ allowedValues, currentValue, distanceBetweenDots }) => (\n  <>\n    {allowedValues.map((value, index) => (\n      <Dot index={index} key={value} completed={value < currentValue} distanceBetweenDots={distanceBetweenDots} />\n    ))}\n  </>\n);\n\nexport default Dots;\n","import React, { useRef } from 'react';\n\nimport { useSize } from '../../hooks/useSize';\n\nimport DotList from './DotList';\nimport Dot from './Dot';\nimport { getMaximumDots, getDistanceBetweenDots, getMarkerPosition, getAllowedValues, getValidatedProps } from './utils';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface ProgressbarProps {\n  /**\n   * Sets aria-label of the progressbar. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the progressbar. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Current value. Must be between min and max\n   */\n  value?: number;\n  /**\n   * Minimum value\n   */\n  min?: number;\n  /**\n   * Maximum value\n   */\n  max?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Progressbar: React.FC<ProgressbarProps> = ({ ariaLabelledById, ariaLabel, value, min = 0, max = 2, testId }) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLSpanElement>(null);\n  const { width: wrapperWidth = 0 } = useSize(wrapperRef) || {};\n  const { width: progressbarWidth = 0 } = useSize(ref) || {};\n\n  const { validatedValue, validatedMin, validatedMax } = getValidatedProps(value, min, max);\n  const allowedValues = getAllowedValues(validatedMin, validatedMax);\n  const index = allowedValues.indexOf(validatedValue);\n  const maximumDots = getMaximumDots(wrapperWidth);\n  const distanceBetweenDots = getDistanceBetweenDots(progressbarWidth, allowedValues.length);\n  const markerPosition = getMarkerPosition(distanceBetweenDots, index);\n\n  const showAllDots = allowedValues.length <= maximumDots;\n  const isCompleted = validatedValue === validatedMax;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  return (\n    <div className={styles['progressbar-wrapper']} ref={wrapperRef}>\n      <span\n        role=\"progressbar\"\n        {...ariaLabelAttributes}\n        aria-valuenow={validatedValue}\n        aria-valuemin={validatedMin}\n        aria-valuemax={validatedMax}\n        className={styles.progressbar}\n        style={{\n          backgroundPositionX: `${isCompleted ? progressbarWidth : markerPosition}px`,\n        }}\n        ref={ref}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Progressbar}\n      >\n        {showAllDots && <DotList allowedValues={allowedValues} currentValue={validatedValue} distanceBetweenDots={distanceBetweenDots} />}\n        {!showAllDots && (\n          <>\n            <Dot completed={validatedValue > validatedMin} position=\"left\" />\n            <Dot completed={validatedValue === validatedMax} position=\"right\" />\n          </>\n        )}\n        <span className={styles.progressbar__marker} style={{ left: `${markerPosition}px` }} />\n      </span>\n      {!showAllDots && <span className={styles.progressbar__number}>{`${validatedValue}/${validatedMax}`}</span>}\n    </div>\n  );\n};\n\nexport default Progressbar;\n"],"names":["MARKER_DOT_MIN_DISTANCE_PX","MARKER_WIDTH_PX","PROGRESS_BAR_PADDING_X_PX","getValidatedMin","min","max","getValidatedMax","getValidatedValue","value","getMaximumDots","progressbarWidth","getDistanceBetweenDots","dots","getMarkerPosition","distanceBetweenDots","index","getAllowedValues","_","getValidatedProps","validatedMin","validatedMax","Dot","completed","position","classes","classNames","styles","style","React","Dots","allowedValues","currentValue","Progressbar","ariaLabelledById","ariaLabel","testId","wrapperRef","useRef","ref","wrapperWidth","useSize","validatedValue","maximumDots","markerPosition","showAllDots","isCompleted","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","DotList"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Progressbar/utils.ts","../../../src/components/Progressbar/Dot.tsx","../../../src/components/Progressbar/DotList.tsx","../../../src/components/Progressbar/Progressbar.tsx"],"sourcesContent":["/**\n * Minimum avstand fra markør til prikk\n */\nconst MARKER_DOT_MIN_DISTANCE_PX = 4;\n\n/**\n * Bredde på markør\n */\nconst MARKER_WIDTH_PX = 24;\n\n/**\n * Horisontal padding på progressbar\n */\nexport const PROGRESS_BAR_PADDING_X_PX = 8;\n\n/**\n * Valider at minimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Mimimum-verdi, ikke større enn eller lik maksimum-verdi\n */\nexport const getValidatedMin = (min: number, max: number): number => (min < max ? min : max - 1);\n\n/**\n * Valider at maksimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Maksimum-verdi, ikke mindre enn minimum-verdi\n */\nexport const getValidatedMax = (min: number, max: number): number => (max < min ? min : max);\n\n/**\n * Valider at verdi er innenfor gyldig område\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Verdi, ikke mindre enn 0, ikke mer enn max\n */\nexport const getValidatedValue = (value: number | undefined, min: number, max: number): number => {\n  if (typeof value === 'undefined' || value < min) {\n    return min;\n  }\n\n  return value > max ? max : value;\n};\n\n/**\n * Finn antall prikker det er plass til\n * @param progressbarWidth Bredde på progressbar\n * @returns Antall prikker\n */\nexport const getMaximumDots = (progressbarWidth: number): number =>\n  Math.floor(progressbarWidth / (MARKER_WIDTH_PX + MARKER_DOT_MIN_DISTANCE_PX));\n\n/**\n * Beregn riktig distance mellom prikker\n * @param progressbarWidth Bredde på progressbar\n * @param dots Antall prikker som skal vises\n * @returns Distanse mellom prikker\n */\nexport const getDistanceBetweenDots = (progressbarWidth: number, dots: number): number => (progressbarWidth - MARKER_WIDTH_PX) / (dots - 1);\n\n/**\n * Beregn riktig plassering av markør\n * @param distanceBetweenDots Distanse mellom prikker\n * @param index Nåværende verdi i progressbar\n * @returns Plassering til markør fra venstre\n */\nexport const getMarkerPosition = (distanceBetweenDots: number, index: number): number => distanceBetweenDots * index;\n\n/**\n * Lag liste med tillate verdier fra min til maks\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Liste med verdier\n */\nexport const getAllowedValues = (min: number, max: number): number[] => Array.from(Array(max - min + 1), (_, index) => index + min);\n\n/**\n * Valider props som skal brukes til beregning av posisjon m.m.\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Objekt med gyldige verdier\n */\nexport const getValidatedProps = (\n  value: number | undefined,\n  min: number,\n  max: number\n): { validatedValue: number; validatedMin: number; validatedMax: number } => {\n  const validatedMin = getValidatedMin(min, max);\n  const validatedMax = getValidatedMax(validatedMin, max);\n  const validatedValue = getValidatedValue(value, validatedMin, validatedMax);\n\n  return { validatedValue, validatedMin, validatedMax };\n};\n","import classNames from 'classnames';\nimport React from 'react';\n\nimport { PROGRESS_BAR_PADDING_X_PX } from './utils';\n\nimport styles from './styles.module.scss';\n\ninterface DotProps {\n  index?: number;\n  completed: boolean;\n  distanceBetweenDots?: number;\n  position?: 'left' | 'right';\n}\n\nconst Dot: React.FC<DotProps> = ({ index, completed, distanceBetweenDots, position }) => {\n  const classes = classNames(\n    styles.progressbar__dot,\n    completed && styles['progressbar__dot--completed'],\n    position && styles[`progressbar__dot--${position}`]\n  );\n  const positionWithStyle = !position && typeof index !== 'undefined' && typeof distanceBetweenDots !== 'undefined';\n  const style: React.HTMLAttributes<HTMLSpanElement>['style'] = positionWithStyle\n    ? { left: `${index * distanceBetweenDots + PROGRESS_BAR_PADDING_X_PX}px` }\n    : undefined;\n\n  return <span className={classes} style={style} data-testid=\"dot\" />;\n};\n\nexport default Dot;\n","import React from 'react';\n\nimport Dot from './Dot';\n\ninterface DotListProps {\n  allowedValues: number[];\n  currentValue: number;\n  distanceBetweenDots: number;\n}\n\nconst Dots: React.FC<DotListProps> = ({ allowedValues, currentValue, distanceBetweenDots }) => (\n  <>\n    {allowedValues.map((value, index) => (\n      <Dot index={index} key={value} completed={value < currentValue} distanceBetweenDots={distanceBetweenDots} />\n    ))}\n  </>\n);\n\nexport default Dots;\n","import React, { useRef } from 'react';\n\nimport { useSize } from '../../hooks/useSize';\n\nimport DotList from './DotList';\nimport Dot from './Dot';\nimport { getMaximumDots, getDistanceBetweenDots, getMarkerPosition, getAllowedValues, getValidatedProps } from './utils';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface ProgressbarProps {\n  /**\n   * Sets aria-label of the progressbar. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the progressbar. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Current value. Must be between min and max\n   */\n  value?: number;\n  /**\n   * Minimum value\n   */\n  min?: number;\n  /**\n   * Maximum value\n   */\n  max?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Progressbar: React.FC<ProgressbarProps> = ({ ariaLabelledById, ariaLabel, value, min = 0, max = 2, testId }) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLSpanElement>(null);\n  const { width: wrapperWidth = 0 } = useSize(wrapperRef) || {};\n  const { width: progressbarWidth = 0 } = useSize(ref) || {};\n\n  const { validatedValue, validatedMin, validatedMax } = getValidatedProps(value, min, max);\n  const allowedValues = getAllowedValues(validatedMin, validatedMax);\n  const index = allowedValues.indexOf(validatedValue);\n  const maximumDots = getMaximumDots(wrapperWidth);\n  const distanceBetweenDots = getDistanceBetweenDots(progressbarWidth, allowedValues.length);\n  const markerPosition = getMarkerPosition(distanceBetweenDots, index);\n\n  const showAllDots = allowedValues.length <= maximumDots;\n  const isCompleted = validatedValue === validatedMax;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  return (\n    <div className={styles['progressbar-wrapper']} ref={wrapperRef}>\n      <span\n        role=\"progressbar\"\n        {...ariaLabelAttributes}\n        aria-valuenow={validatedValue}\n        aria-valuemin={validatedMin}\n        aria-valuemax={validatedMax}\n        className={styles.progressbar}\n        style={{\n          backgroundPositionX: `${isCompleted ? progressbarWidth : markerPosition}px`,\n        }}\n        ref={ref}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Progressbar}\n      >\n        {showAllDots && <DotList allowedValues={allowedValues} currentValue={validatedValue} distanceBetweenDots={distanceBetweenDots} />}\n        {!showAllDots && (\n          <>\n            <Dot completed={validatedValue > validatedMin} position=\"left\" />\n            <Dot completed={validatedValue === validatedMax} position=\"right\" />\n          </>\n        )}\n        <span className={styles.progressbar__marker} style={{ left: `${markerPosition}px` }} />\n      </span>\n      {!showAllDots && <span className={styles.progressbar__number}>{`${validatedValue}/${validatedMax}`}</span>}\n    </div>\n  );\n};\n\nexport default Progressbar;\n"],"names":["MARKER_DOT_MIN_DISTANCE_PX","MARKER_WIDTH_PX","PROGRESS_BAR_PADDING_X_PX","getValidatedMin","min","max","getValidatedMax","getValidatedValue","value","getMaximumDots","progressbarWidth","getDistanceBetweenDots","dots","getMarkerPosition","distanceBetweenDots","index","getAllowedValues","_","getValidatedProps","validatedMin","validatedMax","Dot","completed","position","classes","classNames","styles","style","React","Dots","allowedValues","currentValue","Progressbar","ariaLabelledById","ariaLabel","testId","wrapperRef","useRef","ref","wrapperWidth","useSize","validatedValue","maximumDots","markerPosition","showAllDots","isCompleted","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","DotList"],"mappings":"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"}

package/components/RadioButton/index.js

@@ -1,2 +1,2 @@
-import"../../RadioButton.js";import{R as f,R as s}from"../../RadioButton.js";import"react";import"classnames";import"../../uuid.js";import"./styles.module.scss";import"../../constants.js";export{f as RadioButton,s as default};
+import"../../RadioButton.js";import{R as s,R as u}from"../../RadioButton.js";import"react";import"classnames";import"../../uuid.js";import"../../utils/environment.js";import"./styles.module.scss";import"../../constants.js";export{s as RadioButton,u as default};
 //# sourceMappingURL=index.js.map

package/components/Select/Select.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { FormMode } from '../../constants';
+declare type SelectConcept = 'normal' | 'transparent';
+export interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'disabled' | 'required' | 'value'> {
+    /** Component shown after label */
+    afterLabelChildren?: React.ReactNode;
+    /** Sets the content of the select element. */
+    children: React.ReactNode;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Changes the visuals of the component */
+    concept?: SelectConcept;
+    /** The label text above the select */
+    label?: string;
+    /** Changes the visuals of the component */
+    mode?: keyof typeof FormMode;
+    /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */
+    error?: boolean;
+    /** Error text to show above the component */
+    errorText?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** select id of the select element */
+    selectId?: string;
+    /** Width of select in characters (approximate) */
+    width?: number;
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+export default Select;
+//# sourceMappingURL=Select.d.ts.map

package/components/Select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAA2C,QAAQ,EAAY,MAAM,iBAAiB,CAAC;AAO9F,aAAK,aAAa,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;IAClI,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,8CAA8C;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,yHAAyH;IACzH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAaD,eAAO,MAAM,MAAM,uFAyEjB,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/components/Select/componentdata.json

@@ -0,0 +1 @@
+{"props":{"afterLabelChildren":{"defaultValue":null,"description":"Component shown after label","name":"afterLabelChildren","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"ReactNode"}},"children":{"defaultValue":null,"description":"Sets the content of the select element.","name":"children","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":true,"type":{"name":"ReactNode"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"concept":{"defaultValue":null,"description":"Changes the visuals of the component","name":"concept","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"enum","raw":"SelectConcept","value":[{"value":"\"normal\""},{"value":"\"transparent\""}]}},"label":{"defaultValue":null,"description":"The label text above the select","name":"label","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"mode":{"defaultValue":null,"description":"Changes the visuals of the component","name":"mode","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"ondark\""},{"value":"\"oninvalid\""}]}},"error":{"defaultValue":null,"description":"Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup","name":"error","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"boolean"}},"errorText":{"defaultValue":null,"description":"Error text to show above the component","name":"errorText","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"selectId":{"defaultValue":null,"description":"select id of the select element","name":"selectId","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"width":{"defaultValue":null,"description":"Width of select in characters (approximate)","name":"width","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"number"}},"name":{"defaultValue":null,"description":"","name":"name","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"string"}},"disabled":{"defaultValue":null,"description":"","name":"disabled","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"required":{"defaultValue":null,"description":"","name":"required","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"value":{"defaultValue":null,"description":"","name":"value","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}}}}

package/components/Select/index.d.ts

@@ -0,0 +1,4 @@
+import Select from './Select';
+export * from './Select';
+export default Select;
+//# sourceMappingURL=index.d.ts.map

package/components/Select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,eAAe,MAAM,CAAC"}

package/components/Select/index.js

@@ -0,0 +1,2 @@
+import"../../Select.js";import{S as k,S as n}from"../../Select.js";import"react";import"classnames";import"./styles.module.scss";import"../../constants.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ChevronDown.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";export{k as Select,n as default};
+//# sourceMappingURL=index.js.map

package/components/Select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/Select/styles.module.scss

@@ -0,0 +1,125 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/font-settings.scss';
+
+.select-wrapper {
+  display: flex;
+  flex-direction: column;
+
+  &__label-wrapper {
+    display: inline-flex;
+    align-items: center;
+    line-height: getSpacer(m);
+    font-size: $font-size-sm;
+    font-weight: 600;
+    padding-bottom: getSpacer(xs);
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      line-height: getSpacer(l);
+      font-size: $font-size-md;
+    }
+
+    &--on-dark {
+      color: $white;
+    }
+  }
+
+  &__after-label-children {
+    padding-left: 0.75rem;
+  }
+}
+
+.select-inner-wrapper {
+  // Grid brukes til å kunne plassere custom ikon fritt over select elementet
+  display: inline-grid;
+  background-color: $white;
+  align-items: center;
+  // Andre kolonne her styrer plassering av select ikonet
+  grid-template-columns: 1fr 2.8rem;
+
+  &--transparent {
+    background-color: transparent;
+  }
+
+  &:hover {
+    background: $neutral50;
+  }
+  &--on-blueberry {
+    &:hover {
+      background-color: $blueberry50;
+    }
+  }
+  &--invalid {
+    &:hover {
+      background-color: $cherry50;
+    }
+  }
+  &--disabled {
+    background: $neutral50;
+
+    &:hover {
+      background: $neutral50;
+    }
+  }
+}
+
+.select {
+  /* Pil fjernes for browsere utenom IE */
+  appearance: none;
+
+  height: 2.5rem;
+  align-items: center;
+  background-color: transparent;
+  grid-column: 1 / 3;
+  grid-row: 1;
+  padding-left: getSpacer(xs);
+  border: none;
+  outline: $neutral700 solid 2px;
+  outline-offset: -2px;
+  font-family: inherit;
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
+  border-radius: 0;
+
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    height: 3.125rem;
+    font-size: $font-size-md;
+  }
+
+  &--on-blueberry {
+    outline-color: $blueberry500;
+  }
+  &--invalid {
+    outline-color: $cherry500;
+  }
+
+  :hover > & {
+    outline-width: 3px;
+    outline-offset: -1px;
+  }
+  &:focus {
+    outline: $black solid 4px;
+    outline-offset: -2px;
+  }
+
+  &:disabled {
+    outline: $neutral500 solid 2px;
+    outline-offset: -2px;
+  }
+
+  & > option {
+    background: $white;
+    font-family: inherit;
+    font-size: $font-size-sm;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      font-size: $font-size-md;
+    }
+  }
+}
+
+.select-arrow {
+  grid-column: 2;
+  grid-row: 1;
+}

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

@@ -0,0 +1,21 @@
+export type Styles = {
+  select: string;
+  'select--invalid': string;
+  'select--on-blueberry': string;
+  'select-arrow': string;
+  'select-inner-wrapper': string;
+  'select-inner-wrapper--disabled': string;
+  'select-inner-wrapper--invalid': string;
+  'select-inner-wrapper--on-blueberry': string;
+  'select-inner-wrapper--transparent': string;
+  'select-wrapper': string;
+  'select-wrapper__after-label-children': string;
+  'select-wrapper__label-wrapper': string;
+  'select-wrapper__label-wrapper--on-dark': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Slider/index.js

@@ -1,2 +1,2 @@
-import l,{useState as S,useRef as I,useEffect as y}from"react";import _ from"classnames";import{T as W}from"../../Title.js";import c from"./styles.module.scss";import{AnalyticsId as j}from"../../constants.js";import{useSize as O}from"../../hooks/useSize.js";import"../Title/styles.module.scss";import"../../debounce.js";const L=e=>(e.stopPropagation&&e.stopPropagation(),e.preventDefault&&e.preventDefault(),!1),U=e=>q(e)?e.touches[0].pageX:e.pageX,q=e=>e.type==="touchcancel"||e.type==="touchend"||e.type==="touchenter"||e.type==="touchleave"||e.type==="touchmove"||e.type==="touchstart"?e.touches.length!==0:!1,G=(e,t,i,a,s)=>{const r=s-a;return(t-i)/r*e},H=(e,t,i,a,s,r)=>{const n=r-s,f=(t-i)/n,v=Math.round(e/f);return J(v,a,r)},J=(e,t,i)=>{const a=e%t;let s=e-a;const r=Math.floor(i/t)*t;if(e>r){const n=i-r;e>r+n/2&&(s=i)}return Math.round(s)},Q=(e,t,i,a)=>{let s=a+e;return s<0&&(s=0),s>t-i&&(s=t-i),s},Y=(e,t,i,a)=>{const s=t?t.getBoundingClientRect():void 0,r=s?s.left:0,n=r?e-(r+i/2):0;a(n)},Z=(e,t)=>{document.addEventListener("mousemove",e,!1),document.addEventListener("mouseup",t,!1)},ee=(e,t)=>{document.removeEventListener("mousemove",e,!1),document.removeEventListener("mouseup",t,!1)},te=(e,t)=>{document.addEventListener("touchmove",e,!1),document.addEventListener("touchend",t,!1)},oe=(e,t)=>{document.removeEventListener("touchmove",e,!1),document.removeEventListener("touchend",t,!1)},ue=l.forwardRef(function(t,i){const{title:a,labelLeft:s,labelRight:r,disabled:n=!1,step:f=1,onChange:v,testId:$}=t,[p,B]=S(50),[M,k]=S(!1),[T,b]=S(0),[F,x]=S(0),N=i||I(null),g=I(null),{width:h}=O(N)||{width:0},{width:m}=O(g)||{width:0},E=0,P=100,R=o=>{C(o)},z=o=>{A(o)},D=o=>{C(o)},V=o=>{A(o)};y(()=>{b(G(p,h,m,E,P))},[p,h,m]),y(()=>{M&&(Z(R,z),te(D,V))},[M]),y(()=>{!n&&v&&v(p)},[p]);const K=o=>{if(n)return;const d=P-E,u=(h-m)/d;(o.key==="ArrowRight"||o.key==="ArrowDown")&&w(f*u),(o.key==="ArrowLeft"||o.key==="ArrowUp")&&w(-f*u)},X=o=>{var u;if(n)return;const d=U(o);Y(d,g.current,m,w),k(!0),x(d),(u=g.current)==null||u.focus(),L(o)},A=o=>{n||(k(!1),ee(R,z),oe(D,V),L(o))},C=o=>{if(n||!M)return;const u=U(o)-F;w(u),L(o)},w=o=>{if(o===0)return;const d=Q(o,h,m,T);b(d),x(d+o),B(H(d,h,m,f,E,P))};return l.createElement("div",{className:c.slider,"data-testid":$,"data-analyticsid":j.Slider},a&&l.createElement(W,{htmlMarkup:"h3",margin:1.5,appearance:"title3"},a),l.createElement("div",{ref:N,className:_(c["slider__track-wrapper"],n?c["slider__track-wrapper--disabled"]:""),onMouseDown:X,onTouchStart:X,"data-testid":"tracker"},l.createElement("div",{className:_(c.slider__track,n?c["slider__track--disabled"]:"")}),l.createElement("div",{ref:g,className:_(c.slider__trigger,n?c["slider__trigger--disabled"]:""),style:{left:`${T}px`},onKeyDown:K,role:"slider","aria-valuenow":p,"aria-valuemin":E,"aria-valuemax":P,"aria-label":`${a?a+" ":""}${s?s+" ":""}${r?r+" ":""}`,tabIndex:n?-1:0},l.createElement("div",{className:_(c["slider__trigger-inner"],n?c["slider__trigger-inner--disabled"]:"")}))),(s||r)&&l.createElement("span",{className:c.slider__options},l.createElement("p",{className:c.slider__text,"aria-hidden":!0},s),l.createElement("p",{className:c.slider__text,"aria-hidden":!0},r)))});export{ue as Slider,ue as default};
+import l,{useState as S,useRef as I,useEffect as y}from"react";import _ from"classnames";import{T as W}from"../../Title.js";import c from"./styles.module.scss";import{AnalyticsId as j}from"../../constants.js";import{useSize as O}from"../../hooks/useSize.js";import"../Title/styles.module.scss";import"../../utils/debounce.js";const L=e=>(e.stopPropagation&&e.stopPropagation(),e.preventDefault&&e.preventDefault(),!1),U=e=>q(e)?e.touches[0].pageX:e.pageX,q=e=>e.type==="touchcancel"||e.type==="touchend"||e.type==="touchenter"||e.type==="touchleave"||e.type==="touchmove"||e.type==="touchstart"?e.touches.length!==0:!1,G=(e,t,i,a,s)=>{const r=s-a;return(t-i)/r*e},H=(e,t,i,a,s,r)=>{const n=r-s,f=(t-i)/n,v=Math.round(e/f);return J(v,a,r)},J=(e,t,i)=>{const a=e%t;let s=e-a;const r=Math.floor(i/t)*t;if(e>r){const n=i-r;e>r+n/2&&(s=i)}return Math.round(s)},Q=(e,t,i,a)=>{let s=a+e;return s<0&&(s=0),s>t-i&&(s=t-i),s},Y=(e,t,i,a)=>{const s=t?t.getBoundingClientRect():void 0,r=s?s.left:0,n=r?e-(r+i/2):0;a(n)},Z=(e,t)=>{document.addEventListener("mousemove",e,!1),document.addEventListener("mouseup",t,!1)},ee=(e,t)=>{document.removeEventListener("mousemove",e,!1),document.removeEventListener("mouseup",t,!1)},te=(e,t)=>{document.addEventListener("touchmove",e,!1),document.addEventListener("touchend",t,!1)},oe=(e,t)=>{document.removeEventListener("touchmove",e,!1),document.removeEventListener("touchend",t,!1)},ue=l.forwardRef(function(t,i){const{title:a,labelLeft:s,labelRight:r,disabled:n=!1,step:f=1,onChange:v,testId:$}=t,[p,B]=S(50),[M,k]=S(!1),[T,b]=S(0),[F,x]=S(0),N=i||I(null),g=I(null),{width:h}=O(N)||{width:0},{width:m}=O(g)||{width:0},E=0,P=100,R=o=>{C(o)},z=o=>{A(o)},D=o=>{C(o)},V=o=>{A(o)};y(()=>{b(G(p,h,m,E,P))},[p,h,m]),y(()=>{M&&(Z(R,z),te(D,V))},[M]),y(()=>{!n&&v&&v(p)},[p]);const K=o=>{if(n)return;const d=P-E,u=(h-m)/d;(o.key==="ArrowRight"||o.key==="ArrowDown")&&w(f*u),(o.key==="ArrowLeft"||o.key==="ArrowUp")&&w(-f*u)},X=o=>{var u;if(n)return;const d=U(o);Y(d,g.current,m,w),k(!0),x(d),(u=g.current)==null||u.focus(),L(o)},A=o=>{n||(k(!1),ee(R,z),oe(D,V),L(o))},C=o=>{if(n||!M)return;const u=U(o)-F;w(u),L(o)},w=o=>{if(o===0)return;const d=Q(o,h,m,T);b(d),x(d+o),B(H(d,h,m,f,E,P))};return l.createElement("div",{className:c.slider,"data-testid":$,"data-analyticsid":j.Slider},a&&l.createElement(W,{htmlMarkup:"h3",margin:1.5,appearance:"title3"},a),l.createElement("div",{ref:N,className:_(c["slider__track-wrapper"],n?c["slider__track-wrapper--disabled"]:""),onMouseDown:X,onTouchStart:X,"data-testid":"tracker"},l.createElement("div",{className:_(c.slider__track,n?c["slider__track--disabled"]:"")}),l.createElement("div",{ref:g,className:_(c.slider__trigger,n?c["slider__trigger--disabled"]:""),style:{left:`${T}px`},onKeyDown:K,role:"slider","aria-valuenow":p,"aria-valuemin":E,"aria-valuemax":P,"aria-label":`${a?a+" ":""}${s?s+" ":""}${r?r+" ":""}`,tabIndex:n?-1:0},l.createElement("div",{className:_(c["slider__trigger-inner"],n?c["slider__trigger-inner--disabled"]:"")}))),(s||r)&&l.createElement("span",{className:c.slider__options},l.createElement("p",{className:c.slider__text,"aria-hidden":!0},s),l.createElement("p",{className:c.slider__text,"aria-hidden":!0},r)))});export{ue as Slider,ue as default};
 //# sourceMappingURL=index.js.map

package/components/Slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Slider/SliderUtils.tsx","../../../src/components/Slider/Slider.tsx"],"sourcesContent":["/** Stopper MouseEvent eller TouchEvent parameter e som sendes inn fra å nå videre.*/\nexport const stopEvent = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): boolean => {\n  if (e.stopPropagation) e.stopPropagation();\n  if (e.preventDefault) e.preventDefault();\n  return false;\n};\n\n/** Henter ut x posisjon til MouseEvent eller TouchEvent e */\nexport const getMousePosition = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): number => {\n  if (isTouchEvent(e)) {\n    const touch: Touch = (e as TouchEvent).touches[0];\n    return touch.pageX;\n  }\n  return (e as MouseEvent).pageX;\n};\n\n/** Returnerer en boolean på om innsendte event e er en TouchEvent */\nexport const isTouchEvent = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): boolean => {\n  if (\n    e.type === 'touchcancel' ||\n    e.type === 'touchend' ||\n    e.type === 'touchenter' ||\n    e.type === 'touchleave' ||\n    e.type === 'touchmove' ||\n    e.type === 'touchstart'\n  ) {\n    return !((e as TouchEvent).touches.length === 0);\n  }\n  return false;\n};\n\n/** Kalkulerer x posisjonen til slideren basert på value som sendes inn,\n *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,\n *  og min og max verdier som er satt på slider komponentet. */\nexport const calculateSliderPositionBasedOnValue = (\n  value: number,\n  trackerWidth: number,\n  sliderWidth: number,\n  min: number,\n  max: number\n): number => {\n  const size: number = max - min;\n  const pixelPerSize: number = (trackerWidth - sliderWidth) / size;\n  return pixelPerSize * value;\n};\n\n/** Kalkulerer verdi basert på sliderPosition som sendes inn,\n *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,\n *  og min og max verdier som er satt på slider komponentet. */\nexport const calculateValueBasedOnSliderPosition = (\n  sliderPosition: number,\n  trackerWidth: number,\n  sliderWidth: number,\n  step: number,\n  min: number,\n  max: number\n): number => {\n  const size: number = max - min;\n  const pixelPerSize: number = (trackerWidth - sliderWidth) / size;\n  const newValue: number = Math.round(sliderPosition / pixelPerSize);\n  return alignValue(newValue, step, max);\n};\n\n/** Kalkulerer modifisert value basert på step parameteret,\n * med hensyn til max verdi til slideren.\n * Med en step på 10 vil da value gå fra 0 til 10 til 20 osv. */\nexport const alignValue = (value: number, step: number, max: number): number => {\n  const valModStep: number = value % step;\n  let alignedValue: number = value - valModStep;\n\n  const possibleMaxValueWithCurrentStep: number = Math.floor(max / step) * step;\n  if (value > possibleMaxValueWithCurrentStep) {\n    const diff: number = max - possibleMaxValueWithCurrentStep;\n    if (value > possibleMaxValueWithCurrentStep + diff / 2) {\n      alignedValue = max;\n    }\n  }\n\n  return Math.round(alignedValue);\n};\n\n/** Kalkulerer ny x posisjon til slider basert på innsendt differanse diff,\n *  nåværende sliderXPos, bredden til tracker - TrackerWidth og bredden til\n *  slider - sliderWidth. */\nexport const calculateChangeOfPosition = (diff: number, trackerWidth: number, sliderWidth: number, sliderXPos: number): number => {\n  let newSliderPos: number = sliderXPos + diff;\n  if (newSliderPos < 0) {\n    newSliderPos = 0;\n  }\n  if (newSliderPos > trackerWidth - sliderWidth) {\n    newSliderPos = trackerWidth - sliderWidth;\n  }\n  return newSliderPos;\n};\n\n/** Kalkulerer posisjon til slider basert på xPos, nåværende sliderELement og\n *  bredden til slider - sliderWidth */\nexport const calculateSliderTranslate = (\n  xPos: number,\n  sliderElement: HTMLDivElement | null,\n  sliderWidth: number,\n  cb: (a: number) => void\n) => {\n  const elementViewportPosition = sliderElement ? sliderElement.getBoundingClientRect() : undefined;\n  const sliderPageXPos = elementViewportPosition ? elementViewportPosition.left : 0;\n  const diff: number = sliderPageXPos ? xPos - (sliderPageXPos + sliderWidth / 2) : 0;\n  cb(diff);\n};\n\n/** Legger til mousemove og mouseup event listeners,\n *  basert på moveMouseEvent og mouseUpEvent eventene */\nexport const addMouseListeners = (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void): void => {\n  document.addEventListener('mousemove', moveMouseEvent, false);\n  document.addEventListener('mouseup', mouseUpEvent, false);\n};\n\n/** Fjerner mousemove og mouseup event listeners,\n *  basert på moveMouseEvent og mouseUpEvent eventene */\nexport const removeMouseListeners = (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void): void => {\n  document.removeEventListener('mousemove', moveMouseEvent, false);\n  document.removeEventListener('mouseup', mouseUpEvent, false);\n};\n\n/** Legger til touchmove og touchend event listeners,\n *  basert på moveTouchEvent og touchUpEvent eventene */\nexport const addTouchListeners = (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void): void => {\n  document.addEventListener('touchmove', moveTouchEvent, false);\n  document.addEventListener('touchend', touchUpEvent, false);\n};\n\n/** Fjerner touchmove og touchup event listeners,\n *  basert på moveTouchEvent og touchUpEvent eventene */\nexport const removeTouchListeners = (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void): void => {\n  document.removeEventListener('touchmove', moveTouchEvent, false);\n  document.removeEventListener('touchend', touchUpEvent, false);\n};\n","import React, { useEffect, useState, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport Title from '../Title';\n\nimport {\n  stopEvent,\n  getMousePosition,\n  calculateSliderPositionBasedOnValue,\n  calculateValueBasedOnSliderPosition,\n  calculateChangeOfPosition,\n  calculateSliderTranslate,\n  addMouseListeners,\n  addTouchListeners,\n  removeMouseListeners,\n  removeTouchListeners,\n} from './SliderUtils';\n\nimport SliderStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tDecides the number of steps for each movement of the slider. */\n  step?: number;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Slider = React.forwardRef(function SliderForwardedRef(props: SliderProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { title, labelLeft, labelRight, disabled = false, step = 1, onChange, testId } = props;\n  const [value, setValue] = useState(50);\n  const [isMouseDown, setIsMouseDown] = useState(false);\n\n  const [sliderXPos, setSliderXPos] = useState(0);\n  const [sliderTemporaryXPos, setSliderTemporaryXPos] = useState(0);\n  const trackerRef = ref ? (ref as React.RefObject<HTMLDivElement>) : useRef<HTMLDivElement>(null);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const { width: trackerWidth } = useSize(trackerRef) || { width: 0 };\n  const { width: sliderWidth } = useSize(sliderRef) || { width: 0 };\n  const min = 0;\n  const max = 100;\n\n  const moveMouseEvent = (evt: MouseEvent) => {\n    onMouseMove(evt);\n  };\n  const mouseUpEvent = (evt: MouseEvent) => {\n    onMouseUp(evt);\n  };\n  const moveTouchEvent = (evt: TouchEvent) => {\n    onMouseMove(evt);\n  };\n  const touchUpEvent = (evt: TouchEvent) => {\n    onMouseUp(evt);\n  };\n\n  useEffect(() => {\n    setSliderXPos(calculateSliderPositionBasedOnValue(value, trackerWidth, sliderWidth, min, max));\n  }, [value, trackerWidth, sliderWidth]);\n\n  useEffect(() => {\n    if (isMouseDown) {\n      addMouseListeners(moveMouseEvent, mouseUpEvent);\n      addTouchListeners(moveTouchEvent, touchUpEvent);\n    }\n  }, [isMouseDown]);\n\n  useEffect(() => {\n    if (!disabled && onChange) {\n      onChange(value);\n    }\n  }, [value]);\n\n  const onKeyDown = (evt: React.KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    const size: number = max - min;\n    const pixelPerSize: number = (trackerWidth - sliderWidth) / size;\n    if (evt.key === 'ArrowRight' || evt.key === 'ArrowDown') {\n      updateSliderPosition(step * pixelPerSize);\n    }\n    if (evt.key === 'ArrowLeft' || evt.key === 'ArrowUp') {\n      updateSliderPosition(-step * pixelPerSize);\n    }\n  };\n\n  const onMouseOrTouchDown = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): void => {\n    if (disabled) return;\n    const updatedMousePosition: number = getMousePosition(e);\n    calculateSliderTranslate(updatedMousePosition, sliderRef.current, sliderWidth, updateSliderPosition);\n    setIsMouseDown(true);\n    setSliderTemporaryXPos(updatedMousePosition);\n    sliderRef.current?.focus();\n    stopEvent(e);\n  };\n\n  const onMouseUp = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): void => {\n    if (disabled) return;\n    setIsMouseDown(false);\n    removeMouseListeners(moveMouseEvent, mouseUpEvent);\n    removeTouchListeners(moveTouchEvent, touchUpEvent);\n    stopEvent(e);\n  };\n\n  const onMouseMove = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): void => {\n    if (disabled || !isMouseDown) return;\n    const updatedMousePosition: number = getMousePosition(e);\n    const diff: number = updatedMousePosition - sliderTemporaryXPos;\n    updateSliderPosition(diff);\n    stopEvent(e);\n  };\n\n  const updateSliderPosition = (diff: number): void => {\n    if (diff === 0) return;\n    const updatedSliderPos: number = calculateChangeOfPosition(diff, trackerWidth, sliderWidth, sliderXPos);\n    setSliderXPos(updatedSliderPos);\n    setSliderTemporaryXPos(updatedSliderPos + diff);\n    setValue(calculateValueBasedOnSliderPosition(updatedSliderPos, trackerWidth, sliderWidth, step, min, max));\n  };\n\n  return (\n    <div className={SliderStyles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title htmlMarkup={'h3'} margin={1.5} appearance={'title3'}>\n          {title}\n        </Title>\n      )}\n      <div\n        ref={trackerRef}\n        className={classNames(SliderStyles['slider__track-wrapper'], disabled ? SliderStyles['slider__track-wrapper--disabled'] : '')}\n        onMouseDown={onMouseOrTouchDown}\n        onTouchStart={onMouseOrTouchDown}\n        data-testid={'tracker'}\n      >\n        <div className={classNames(SliderStyles.slider__track, disabled ? SliderStyles['slider__track--disabled'] : '')} />\n        <div\n          ref={sliderRef}\n          className={classNames(SliderStyles.slider__trigger, disabled ? SliderStyles['slider__trigger--disabled'] : '')}\n          style={{\n            left: `${sliderXPos}px`,\n          }}\n          onKeyDown={onKeyDown}\n          role={'slider'}\n          aria-valuenow={value}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-label={`${title ? title + ' ' : ''}${labelLeft ? labelLeft + ' ' : ''}${labelRight ? labelRight + ' ' : ''}`}\n          tabIndex={disabled ? -1 : 0}\n        >\n          <div\n            className={classNames(SliderStyles['slider__trigger-inner'], disabled ? SliderStyles['slider__trigger-inner--disabled'] : '')}\n          />\n        </div>\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={SliderStyles.slider__options}>\n          <p className={SliderStyles.slider__text} aria-hidden={true}>\n            {labelLeft}\n          </p>\n          <p className={SliderStyles.slider__text} aria-hidden={true}>\n            {labelRight}\n          </p>\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport default Slider;\n"],"names":["stopEvent","getMousePosition","isTouchEvent","calculateSliderPositionBasedOnValue","value","trackerWidth","sliderWidth","min","max","size","calculateValueBasedOnSliderPosition","sliderPosition","step","pixelPerSize","newValue","alignValue","valModStep","alignedValue","possibleMaxValueWithCurrentStep","diff","calculateChangeOfPosition","sliderXPos","newSliderPos","calculateSliderTranslate","xPos","sliderElement","cb","elementViewportPosition","sliderPageXPos","addMouseListeners","moveMouseEvent","mouseUpEvent","removeMouseListeners","addTouchListeners","moveTouchEvent","touchUpEvent","removeTouchListeners","Slider","React","props","ref","title","labelLeft","labelRight","disabled","onChange","testId","setValue","useState","isMouseDown","setIsMouseDown","setSliderXPos","sliderTemporaryXPos","setSliderTemporaryXPos","trackerRef","useRef","sliderRef","useSize","evt","onMouseMove","onMouseUp","useEffect","onKeyDown","updateSliderPosition","onMouseOrTouchDown","e","updatedMousePosition","_a","updatedSliderPos","SliderStyles","AnalyticsId","Title","classNames"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Slider/SliderUtils.tsx","../../../src/components/Slider/Slider.tsx"],"sourcesContent":["/** Stopper MouseEvent eller TouchEvent parameter e som sendes inn fra å nå videre.*/\nexport const stopEvent = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): boolean => {\n  if (e.stopPropagation) e.stopPropagation();\n  if (e.preventDefault) e.preventDefault();\n  return false;\n};\n\n/** Henter ut x posisjon til MouseEvent eller TouchEvent e */\nexport const getMousePosition = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): number => {\n  if (isTouchEvent(e)) {\n    const touch: Touch = (e as TouchEvent).touches[0];\n    return touch.pageX;\n  }\n  return (e as MouseEvent).pageX;\n};\n\n/** Returnerer en boolean på om innsendte event e er en TouchEvent */\nexport const isTouchEvent = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): boolean => {\n  if (\n    e.type === 'touchcancel' ||\n    e.type === 'touchend' ||\n    e.type === 'touchenter' ||\n    e.type === 'touchleave' ||\n    e.type === 'touchmove' ||\n    e.type === 'touchstart'\n  ) {\n    return !((e as TouchEvent).touches.length === 0);\n  }\n  return false;\n};\n\n/** Kalkulerer x posisjonen til slideren basert på value som sendes inn,\n *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,\n *  og min og max verdier som er satt på slider komponentet. */\nexport const calculateSliderPositionBasedOnValue = (\n  value: number,\n  trackerWidth: number,\n  sliderWidth: number,\n  min: number,\n  max: number\n): number => {\n  const size: number = max - min;\n  const pixelPerSize: number = (trackerWidth - sliderWidth) / size;\n  return pixelPerSize * value;\n};\n\n/** Kalkulerer verdi basert på sliderPosition som sendes inn,\n *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,\n *  og min og max verdier som er satt på slider komponentet. */\nexport const calculateValueBasedOnSliderPosition = (\n  sliderPosition: number,\n  trackerWidth: number,\n  sliderWidth: number,\n  step: number,\n  min: number,\n  max: number\n): number => {\n  const size: number = max - min;\n  const pixelPerSize: number = (trackerWidth - sliderWidth) / size;\n  const newValue: number = Math.round(sliderPosition / pixelPerSize);\n  return alignValue(newValue, step, max);\n};\n\n/** Kalkulerer modifisert value basert på step parameteret,\n * med hensyn til max verdi til slideren.\n * Med en step på 10 vil da value gå fra 0 til 10 til 20 osv. */\nexport const alignValue = (value: number, step: number, max: number): number => {\n  const valModStep: number = value % step;\n  let alignedValue: number = value - valModStep;\n\n  const possibleMaxValueWithCurrentStep: number = Math.floor(max / step) * step;\n  if (value > possibleMaxValueWithCurrentStep) {\n    const diff: number = max - possibleMaxValueWithCurrentStep;\n    if (value > possibleMaxValueWithCurrentStep + diff / 2) {\n      alignedValue = max;\n    }\n  }\n\n  return Math.round(alignedValue);\n};\n\n/** Kalkulerer ny x posisjon til slider basert på innsendt differanse diff,\n *  nåværende sliderXPos, bredden til tracker - TrackerWidth og bredden til\n *  slider - sliderWidth. */\nexport const calculateChangeOfPosition = (diff: number, trackerWidth: number, sliderWidth: number, sliderXPos: number): number => {\n  let newSliderPos: number = sliderXPos + diff;\n  if (newSliderPos < 0) {\n    newSliderPos = 0;\n  }\n  if (newSliderPos > trackerWidth - sliderWidth) {\n    newSliderPos = trackerWidth - sliderWidth;\n  }\n  return newSliderPos;\n};\n\n/** Kalkulerer posisjon til slider basert på xPos, nåværende sliderELement og\n *  bredden til slider - sliderWidth */\nexport const calculateSliderTranslate = (\n  xPos: number,\n  sliderElement: HTMLDivElement | null,\n  sliderWidth: number,\n  cb: (a: number) => void\n) => {\n  const elementViewportPosition = sliderElement ? sliderElement.getBoundingClientRect() : undefined;\n  const sliderPageXPos = elementViewportPosition ? elementViewportPosition.left : 0;\n  const diff: number = sliderPageXPos ? xPos - (sliderPageXPos + sliderWidth / 2) : 0;\n  cb(diff);\n};\n\n/** Legger til mousemove og mouseup event listeners,\n *  basert på moveMouseEvent og mouseUpEvent eventene */\nexport const addMouseListeners = (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void): void => {\n  document.addEventListener('mousemove', moveMouseEvent, false);\n  document.addEventListener('mouseup', mouseUpEvent, false);\n};\n\n/** Fjerner mousemove og mouseup event listeners,\n *  basert på moveMouseEvent og mouseUpEvent eventene */\nexport const removeMouseListeners = (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void): void => {\n  document.removeEventListener('mousemove', moveMouseEvent, false);\n  document.removeEventListener('mouseup', mouseUpEvent, false);\n};\n\n/** Legger til touchmove og touchend event listeners,\n *  basert på moveTouchEvent og touchUpEvent eventene */\nexport const addTouchListeners = (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void): void => {\n  document.addEventListener('touchmove', moveTouchEvent, false);\n  document.addEventListener('touchend', touchUpEvent, false);\n};\n\n/** Fjerner touchmove og touchup event listeners,\n *  basert på moveTouchEvent og touchUpEvent eventene */\nexport const removeTouchListeners = (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void): void => {\n  document.removeEventListener('touchmove', moveTouchEvent, false);\n  document.removeEventListener('touchend', touchUpEvent, false);\n};\n","import React, { useEffect, useState, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport Title from '../Title';\n\nimport {\n  stopEvent,\n  getMousePosition,\n  calculateSliderPositionBasedOnValue,\n  calculateValueBasedOnSliderPosition,\n  calculateChangeOfPosition,\n  calculateSliderTranslate,\n  addMouseListeners,\n  addTouchListeners,\n  removeMouseListeners,\n  removeTouchListeners,\n} from './SliderUtils';\n\nimport SliderStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tDecides the number of steps for each movement of the slider. */\n  step?: number;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Slider = React.forwardRef(function SliderForwardedRef(props: SliderProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { title, labelLeft, labelRight, disabled = false, step = 1, onChange, testId } = props;\n  const [value, setValue] = useState(50);\n  const [isMouseDown, setIsMouseDown] = useState(false);\n\n  const [sliderXPos, setSliderXPos] = useState(0);\n  const [sliderTemporaryXPos, setSliderTemporaryXPos] = useState(0);\n  const trackerRef = ref ? (ref as React.RefObject<HTMLDivElement>) : useRef<HTMLDivElement>(null);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const { width: trackerWidth } = useSize(trackerRef) || { width: 0 };\n  const { width: sliderWidth } = useSize(sliderRef) || { width: 0 };\n  const min = 0;\n  const max = 100;\n\n  const moveMouseEvent = (evt: MouseEvent) => {\n    onMouseMove(evt);\n  };\n  const mouseUpEvent = (evt: MouseEvent) => {\n    onMouseUp(evt);\n  };\n  const moveTouchEvent = (evt: TouchEvent) => {\n    onMouseMove(evt);\n  };\n  const touchUpEvent = (evt: TouchEvent) => {\n    onMouseUp(evt);\n  };\n\n  useEffect(() => {\n    setSliderXPos(calculateSliderPositionBasedOnValue(value, trackerWidth, sliderWidth, min, max));\n  }, [value, trackerWidth, sliderWidth]);\n\n  useEffect(() => {\n    if (isMouseDown) {\n      addMouseListeners(moveMouseEvent, mouseUpEvent);\n      addTouchListeners(moveTouchEvent, touchUpEvent);\n    }\n  }, [isMouseDown]);\n\n  useEffect(() => {\n    if (!disabled && onChange) {\n      onChange(value);\n    }\n  }, [value]);\n\n  const onKeyDown = (evt: React.KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    const size: number = max - min;\n    const pixelPerSize: number = (trackerWidth - sliderWidth) / size;\n    if (evt.key === 'ArrowRight' || evt.key === 'ArrowDown') {\n      updateSliderPosition(step * pixelPerSize);\n    }\n    if (evt.key === 'ArrowLeft' || evt.key === 'ArrowUp') {\n      updateSliderPosition(-step * pixelPerSize);\n    }\n  };\n\n  const onMouseOrTouchDown = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): void => {\n    if (disabled) return;\n    const updatedMousePosition: number = getMousePosition(e);\n    calculateSliderTranslate(updatedMousePosition, sliderRef.current, sliderWidth, updateSliderPosition);\n    setIsMouseDown(true);\n    setSliderTemporaryXPos(updatedMousePosition);\n    sliderRef.current?.focus();\n    stopEvent(e);\n  };\n\n  const onMouseUp = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): void => {\n    if (disabled) return;\n    setIsMouseDown(false);\n    removeMouseListeners(moveMouseEvent, mouseUpEvent);\n    removeTouchListeners(moveTouchEvent, touchUpEvent);\n    stopEvent(e);\n  };\n\n  const onMouseMove = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): void => {\n    if (disabled || !isMouseDown) return;\n    const updatedMousePosition: number = getMousePosition(e);\n    const diff: number = updatedMousePosition - sliderTemporaryXPos;\n    updateSliderPosition(diff);\n    stopEvent(e);\n  };\n\n  const updateSliderPosition = (diff: number): void => {\n    if (diff === 0) return;\n    const updatedSliderPos: number = calculateChangeOfPosition(diff, trackerWidth, sliderWidth, sliderXPos);\n    setSliderXPos(updatedSliderPos);\n    setSliderTemporaryXPos(updatedSliderPos + diff);\n    setValue(calculateValueBasedOnSliderPosition(updatedSliderPos, trackerWidth, sliderWidth, step, min, max));\n  };\n\n  return (\n    <div className={SliderStyles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title htmlMarkup={'h3'} margin={1.5} appearance={'title3'}>\n          {title}\n        </Title>\n      )}\n      <div\n        ref={trackerRef}\n        className={classNames(SliderStyles['slider__track-wrapper'], disabled ? SliderStyles['slider__track-wrapper--disabled'] : '')}\n        onMouseDown={onMouseOrTouchDown}\n        onTouchStart={onMouseOrTouchDown}\n        data-testid={'tracker'}\n      >\n        <div className={classNames(SliderStyles.slider__track, disabled ? SliderStyles['slider__track--disabled'] : '')} />\n        <div\n          ref={sliderRef}\n          className={classNames(SliderStyles.slider__trigger, disabled ? SliderStyles['slider__trigger--disabled'] : '')}\n          style={{\n            left: `${sliderXPos}px`,\n          }}\n          onKeyDown={onKeyDown}\n          role={'slider'}\n          aria-valuenow={value}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-label={`${title ? title + ' ' : ''}${labelLeft ? labelLeft + ' ' : ''}${labelRight ? labelRight + ' ' : ''}`}\n          tabIndex={disabled ? -1 : 0}\n        >\n          <div\n            className={classNames(SliderStyles['slider__trigger-inner'], disabled ? SliderStyles['slider__trigger-inner--disabled'] : '')}\n          />\n        </div>\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={SliderStyles.slider__options}>\n          <p className={SliderStyles.slider__text} aria-hidden={true}>\n            {labelLeft}\n          </p>\n          <p className={SliderStyles.slider__text} aria-hidden={true}>\n            {labelRight}\n          </p>\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport default Slider;\n"],"names":["stopEvent","getMousePosition","isTouchEvent","calculateSliderPositionBasedOnValue","value","trackerWidth","sliderWidth","min","max","size","calculateValueBasedOnSliderPosition","sliderPosition","step","pixelPerSize","newValue","alignValue","valModStep","alignedValue","possibleMaxValueWithCurrentStep","diff","calculateChangeOfPosition","sliderXPos","newSliderPos","calculateSliderTranslate","xPos","sliderElement","cb","elementViewportPosition","sliderPageXPos","addMouseListeners","moveMouseEvent","mouseUpEvent","removeMouseListeners","addTouchListeners","moveTouchEvent","touchUpEvent","removeTouchListeners","Slider","React","props","ref","title","labelLeft","labelRight","disabled","onChange","testId","setValue","useState","isMouseDown","setIsMouseDown","setSliderXPos","sliderTemporaryXPos","setSliderTemporaryXPos","trackerRef","useRef","sliderRef","useSize","evt","onMouseMove","onMouseUp","useEffect","onKeyDown","updateSliderPosition","onMouseOrTouchDown","e","updatedMousePosition","_a","updatedSliderPos","SliderStyles","AnalyticsId","Title","classNames"],"mappings":"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"}

package/components/StatusDot/index.js

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

package/components/StatusDot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport statusDotStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { Icon } from '../Icons/Icon';\nimport Undo from '../Icons/Undo';\nimport { getColor } from '../../theme/currys';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\nimport { IconSize } from '../..';\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n}\n\nexport interface StatusDotProps {\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: StatusDotProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { variant = StatusDotVariant.info, text, className } = props;\n  const hasIcon = variant === StatusDotVariant.recurring || variant === StatusDotVariant.group || variant === StatusDotVariant.noaccess;\n  const isCancelled = variant === StatusDotVariant.cancelled;\n  const statusDotClasses = classNames(statusDotStyles['statusdot'], { [statusDotStyles['statusdot--cancelled']]: isCancelled }, className);\n  const dotClasses = classNames(statusDotStyles['statusdot__dot'], [\n    hasIcon ? statusDotStyles[`statusdot__dot--icon`] : statusDotStyles[`statusdot__dot--${variant}`],\n  ]);\n  const labelClasses = classNames(statusDotStyles['statusdot__label'], { [statusDotStyles[`statusdot__label--icon`]]: hasIcon });\n  let svgIcon: JSX.Element | null = null;\n\n  if (variant === StatusDotVariant.recurring) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={Undo} />;\n  } else if (variant === StatusDotVariant.group) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  }\n\n  return (\n    <div className={statusDotClasses} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>{svgIcon}</span>\n      <span className={labelClasses}>{text}</span>\n    </div>\n  );\n});\n\nexport default Spacer;\n"],"names":["StatusDotVariant","Spacer","React","props","ref","variant","text","className","hasIcon","isCancelled","statusDotClasses","classNames","statusDotStyles","dotClasses","labelClasses","svgIcon","Icon","IconSize","Undo","Group","NoAccess","getColor","AnalyticsId"],"mappings":"uiBAaY,IAAAA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,UAAY,YACZA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,UAAY,YACZA,EAAA,MAAQ,QACRA,EAAA,SAAW,WATDA,IAAAA,GAAA,CAAA,CAAA,EAqBZ,MAAMC,EAASC,EAAM,WAAW,SAA4BC,EAAuBC,EAAsC,CACvH,KAAM,CAAE,QAAAC,EAAU,OAAuB,KAAAC,EAAM,UAAAC,GAAcJ,EACvDK,EAAUH,IAAY,aAA8BA,IAAY,SAA0BA,IAAY,WACtGI,EAAcJ,IAAY,YAC1BK,EAAmBC,EAAWC,EAAgB,UAAc,CAAE,CAACA,EAAgB,yBAA0BH,CAAY,EAAGF,CAAS,EACjIM,EAAaF,EAAWC,EAAgB,eAAmB,CAC/DJ,EAAUI,EAAgB,wBAA0BA,EAAgB,mBAAmBP,IAAA,CACxF,EACKS,EAAeH,EAAWC,EAAgB,iBAAqB,CAAE,CAACA,EAAgB,2BAA4BJ,CAAS,CAAA,EAC7H,IAAIO,EAA8B,KAElC,OAAIV,IAAY,YACdU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASC,CAAA,CAAM,EAC9Cb,IAAY,QACrBU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASE,CAAA,CAAO,EAC/Cd,IAAY,aACrBU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASG,EAAU,MAAOC,EAAS,SAAU,GAAG,CAAA,CAAG,GAI1FnB,EAAA,cAAA,MAAA,CAAI,UAAWQ,EAAkB,mBAAkBY,EAAY,SAAA,EAC7DpB,EAAA,cAAA,OAAA,CAAK,UAAWW,CAAa,EAAAE,CAAQ,EACrCb,EAAA,cAAA,OAAA,CAAK,UAAWY,CAAA,EAAeR,CAAK,CACvC,CAEJ,CAAC"}
+{"version":3,"file":"index.js","sources":["../../../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport statusDotStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { Icon } from '../Icons/Icon';\nimport Undo from '../Icons/Undo';\nimport { getColor } from '../../theme/currys';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\nimport { IconSize } from '../..';\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n}\n\nexport interface StatusDotProps {\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: StatusDotProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { variant = StatusDotVariant.info, text, className } = props;\n  const hasIcon = variant === StatusDotVariant.recurring || variant === StatusDotVariant.group || variant === StatusDotVariant.noaccess;\n  const isCancelled = variant === StatusDotVariant.cancelled;\n  const statusDotClasses = classNames(statusDotStyles['statusdot'], { [statusDotStyles['statusdot--cancelled']]: isCancelled }, className);\n  const dotClasses = classNames(statusDotStyles['statusdot__dot'], [\n    hasIcon ? statusDotStyles[`statusdot__dot--icon`] : statusDotStyles[`statusdot__dot--${variant}`],\n  ]);\n  const labelClasses = classNames(statusDotStyles['statusdot__label'], { [statusDotStyles[`statusdot__label--icon`]]: hasIcon });\n  let svgIcon: JSX.Element | null = null;\n\n  if (variant === StatusDotVariant.recurring) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={Undo} />;\n  } else if (variant === StatusDotVariant.group) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  }\n\n  return (\n    <div className={statusDotClasses} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>{svgIcon}</span>\n      <span className={labelClasses}>{text}</span>\n    </div>\n  );\n});\n\nexport default Spacer;\n"],"names":["StatusDotVariant","Spacer","React","props","ref","variant","text","className","hasIcon","isCancelled","statusDotClasses","classNames","statusDotStyles","dotClasses","labelClasses","svgIcon","Icon","IconSize","Undo","Group","NoAccess","getColor","AnalyticsId"],"mappings":"0kBAaY,IAAAA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,UAAY,YACZA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,UAAY,YACZA,EAAA,MAAQ,QACRA,EAAA,SAAW,WATDA,IAAAA,GAAA,CAAA,CAAA,EAqBZ,MAAMC,EAASC,EAAM,WAAW,SAA4BC,EAAuBC,EAAsC,CACvH,KAAM,CAAE,QAAAC,EAAU,OAAuB,KAAAC,EAAM,UAAAC,GAAcJ,EACvDK,EAAUH,IAAY,aAA8BA,IAAY,SAA0BA,IAAY,WACtGI,EAAcJ,IAAY,YAC1BK,EAAmBC,EAAWC,EAAgB,UAAc,CAAE,CAACA,EAAgB,yBAA0BH,CAAY,EAAGF,CAAS,EACjIM,EAAaF,EAAWC,EAAgB,eAAmB,CAC/DJ,EAAUI,EAAgB,wBAA0BA,EAAgB,mBAAmBP,IAAA,CACxF,EACKS,EAAeH,EAAWC,EAAgB,iBAAqB,CAAE,CAACA,EAAgB,2BAA4BJ,CAAS,CAAA,EAC7H,IAAIO,EAA8B,KAElC,OAAIV,IAAY,YACdU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASC,CAAA,CAAM,EAC9Cb,IAAY,QACrBU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASE,CAAA,CAAO,EAC/Cd,IAAY,aACrBU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASG,EAAU,MAAOC,EAAS,SAAU,GAAG,CAAA,CAAG,GAI1FnB,EAAA,cAAA,MAAA,CAAI,UAAWQ,EAAkB,mBAAkBY,EAAY,SAAA,EAC7DpB,EAAA,cAAA,OAAA,CAAK,UAAWW,CAAa,EAAAE,CAAQ,EACrCb,EAAA,cAAA,OAAA,CAAK,UAAWY,CAAA,EAAeR,CAAK,CACvC,CAEJ,CAAC"}

package/components/Table/TableExpandedRow/index.js

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

package/components/Table/TableExpanderCell/index.js

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

package/components/Table/TableHeadCell/index.js

@@ -1,2 +1,2 @@
-import"../../../TableHeadCell.js";import{S as b,T as C,T as H}from"../../../TableHeadCell.js";import"react";import"classnames";import"../styles.module.scss";import"../../Icons/Icon.js";import"../../../constants.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../Icons/ArrowUp.js";import"../../Icons/ArrowDown.js";export{b as SortDirection,C as TableHeadCell,H as default};
+import"../../../TableHeadCell.js";import{S as C,T as H,T as S}from"../../../TableHeadCell.js";import"react";import"classnames";import"../styles.module.scss";import"../../Icons/Icon.js";import"../../../constants.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../../utils/environment.js";import"../../Icons/ArrowUp.js";import"../../Icons/ArrowDown.js";export{C as SortDirection,H as TableHeadCell,S as default};
 //# sourceMappingURL=index.js.map

package/components/Table/TableRow/index.js

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

package/components/Table/index.js

@@ -1,2 +1,2 @@
-import r,{useRef as b}from"react";import n from"classnames";import e from"./styles.module.scss";import{AnalyticsId as f}from"../../constants.js";import{H as T}from"../../HorizontalScroll.js";import{useSize as d}from"../../hooks/useSize.js";import{T as X}from"../../TableBody.js";import{T as Z,a as _}from"../../TableCell.js";import{T as V}from"../../TableExpandedRow.js";import{T as to}from"../../TableExpanderCell.js";import{H as eo,T as ao}from"../../TableHead.js";import{S as mo,T as io}from"../../TableHeadCell.js";import{T as so}from"../../TableRow.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../HorizontalScroll/styles.module.scss";import"../../debounce.js";import"../../Button.js";import"../../uuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../Icons/ChevronUp.js";import"../Icons/ChevronDown.js";import"../Icons/ArrowUp.js";import"../Icons/ArrowDown.js";var x=(o=>(o.horizontalscroll="horizontalscroll",o.block="block",o))(x||{});const P=function({id:a,testId:l,className:m,children:i,smallViewportVariant:p="horizontalscroll"}){const t=b(null),{width:s=0}=d(t)||{},c=n(e.table,{[e["table--collapse2col"]]:p==="block"},m);return r.createElement(T,{childWidth:s},r.createElement("table",{className:c,id:a,"data-testid":l,"data-analyticsid":f.Table,ref:t},i))};export{eo as HeaderCategory,x as SmallViewportVariant,mo as SortDirection,P as Table,X as TableBody,Z as TableCell,V as TableExpandedRow,to as TableExpanderCell,ao as TableHead,io as TableHeadCell,so as TableRow,_ as TextAlign,P as default};
+import r,{useRef as b}from"react";import n from"classnames";import e from"./styles.module.scss";import{AnalyticsId as f}from"../../constants.js";import{H as T}from"../../HorizontalScroll.js";import{useSize as d}from"../../hooks/useSize.js";import{T as Y}from"../../TableBody.js";import{T as _,a as $}from"../../TableCell.js";import{T as oo}from"../../TableExpandedRow.js";import{T as ro}from"../../TableExpanderCell.js";import{H as ao,T as lo}from"../../TableHead.js";import{S as io,T as po}from"../../TableHeadCell.js";import{T as co}from"../../TableRow.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../HorizontalScroll/styles.module.scss";import"../../utils/debounce.js";import"../../Button.js";import"../../utils/environment.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../Icons/ChevronUp.js";import"../Icons/ChevronDown.js";import"../Icons/ArrowUp.js";import"../Icons/ArrowDown.js";var x=(o=>(o.horizontalscroll="horizontalscroll",o.block="block",o))(x||{});const Q=function({id:a,testId:l,className:m,children:i,smallViewportVariant:p="horizontalscroll"}){const t=b(null),{width:s=0}=d(t)||{},c=n(e.table,{[e["table--collapse2col"]]:p==="block"},m);return r.createElement(T,{childWidth:s},r.createElement("table",{className:c,id:a,"data-testid":l,"data-analyticsid":f.Table,ref:t},i))};export{ao as HeaderCategory,x as SmallViewportVariant,io as SortDirection,Q as Table,Y as TableBody,_ as TableCell,oo as TableExpandedRow,ro as TableExpanderCell,lo as TableHead,po as TableHeadCell,co as TableRow,$ as TextAlign,Q as default};
 //# sourceMappingURL=index.js.map

package/components/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport classNames from 'classnames';\n\nimport tableStyles from './styles.module.scss';\n\nimport { AnalyticsId } from '../../constants';\nimport HorizontalScroll from '../HorizontalScroll';\nimport { useSize } from '../../hooks/useSize';\n\nexport enum SmallViewportVariant {\n  /**\n   * Show horizontal scrollbar when table is too big for the screen\n   */\n  horizontalscroll = 'horizontalscroll',\n  /**\n   * Collapse to two columns on small screens\n   */\n  block = 'block',\n}\n\nexport interface Props {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Type of table view om small devices */\n  smallViewportVariant?: SmallViewportVariant;\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}\n\nexport const Table = function Table({\n  id,\n  testId,\n  className,\n  children,\n  smallViewportVariant = SmallViewportVariant.horizontalscroll,\n}: Props) {\n  const tableRef = useRef<HTMLTableElement>(null);\n  const { width: tableWidth = 0 } = useSize(tableRef) || {};\n  const tableClass = classNames(\n    tableStyles['table'],\n    { [tableStyles['table--collapse2col']]: smallViewportVariant === SmallViewportVariant.block },\n    className\n  );\n\n  return (\n    <HorizontalScroll childWidth={tableWidth}>\n      <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table} ref={tableRef}>\n        {children}\n      </table>\n    </HorizontalScroll>\n  );\n};\n\nexport default Table;\n"],"names":["SmallViewportVariant","Table","id","testId","className","children","smallViewportVariant","tableRef","useRef","tableWidth","useSize","tableClass","classNames","tableStyles","React","HorizontalScroll","AnalyticsId"],"mappings":"4uCASY,IAAAA,GAAAA,IAIVA,EAAA,iBAAmB,mBAInBA,EAAA,MAAQ,QAREA,IAAAA,GAAA,CAAA,CAAA,EAwBC,MAAAC,EAAQ,SAAe,CAClC,GAAAC,EACA,OAAAC,EACA,UAAAC,EACA,SAAAC,EACA,qBAAAC,EAAuB,kBACzB,EAAU,CACF,MAAAC,EAAWC,EAAyB,IAAI,EACxC,CAAE,MAAOC,EAAa,GAAMC,EAAQH,CAAQ,GAAK,GACjDI,EAAaC,EACjBC,EAAY,MACZ,CAAE,CAACA,EAAY,wBAAyBP,IAAyB,OAA2B,EAC5FF,CAAA,EAGF,OACGU,EAAA,cAAAC,EAAA,CAAiB,WAAYN,CAAA,EAC3BK,EAAA,cAAA,QAAA,CAAM,UAAWH,EAAY,GAAAT,EAAQ,cAAaC,EAAQ,mBAAkBa,EAAY,MAAO,IAAKT,CAAA,EAClGF,CACH,CACF,CAEJ"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport classNames from 'classnames';\n\nimport tableStyles from './styles.module.scss';\n\nimport { AnalyticsId } from '../../constants';\nimport HorizontalScroll from '../HorizontalScroll';\nimport { useSize } from '../../hooks/useSize';\n\nexport enum SmallViewportVariant {\n  /**\n   * Show horizontal scrollbar when table is too big for the screen\n   */\n  horizontalscroll = 'horizontalscroll',\n  /**\n   * Collapse to two columns on small screens\n   */\n  block = 'block',\n}\n\nexport interface Props {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Type of table view om small devices */\n  smallViewportVariant?: SmallViewportVariant;\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}\n\nexport const Table = function Table({\n  id,\n  testId,\n  className,\n  children,\n  smallViewportVariant = SmallViewportVariant.horizontalscroll,\n}: Props) {\n  const tableRef = useRef<HTMLTableElement>(null);\n  const { width: tableWidth = 0 } = useSize(tableRef) || {};\n  const tableClass = classNames(\n    tableStyles['table'],\n    { [tableStyles['table--collapse2col']]: smallViewportVariant === SmallViewportVariant.block },\n    className\n  );\n\n  return (\n    <HorizontalScroll childWidth={tableWidth}>\n      <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table} ref={tableRef}>\n        {children}\n      </table>\n    </HorizontalScroll>\n  );\n};\n\nexport default Table;\n"],"names":["SmallViewportVariant","Table","id","testId","className","children","smallViewportVariant","tableRef","useRef","tableWidth","useSize","tableClass","classNames","tableStyles","React","HorizontalScroll","AnalyticsId"],"mappings":"sxCASY,IAAAA,GAAAA,IAIVA,EAAA,iBAAmB,mBAInBA,EAAA,MAAQ,QAREA,IAAAA,GAAA,CAAA,CAAA,EAwBC,MAAAC,EAAQ,SAAe,CAClC,GAAAC,EACA,OAAAC,EACA,UAAAC,EACA,SAAAC,EACA,qBAAAC,EAAuB,kBACzB,EAAU,CACF,MAAAC,EAAWC,EAAyB,IAAI,EACxC,CAAE,MAAOC,EAAa,GAAMC,EAAQH,CAAQ,GAAK,GACjDI,EAAaC,EACjBC,EAAY,MACZ,CAAE,CAACA,EAAY,wBAAyBP,IAAyB,OAA2B,EAC5FF,CAAA,EAGF,OACGU,EAAA,cAAAC,EAAA,CAAiB,WAAYN,CAAA,EAC3BK,EAAA,cAAA,QAAA,CAAM,UAAWH,EAAY,GAAAT,EAAQ,cAAaC,EAAQ,mBAAkBa,EAAY,MAAO,IAAKT,CAAA,EAClGF,CACH,CACF,CAEJ"}

package/components/Tag/index.js

@@ -1,2 +1,2 @@
-import n from"react";import u from"classnames";import{Icon as g}from"../Icons/Icon.js";import{AnalyticsId as p,IconSize as v}from"../../constants.js";import{palette as f}from"../../theme/palette.js";import e from"./styles.module.scss";import{useHover as I}from"../../hooks/useHover.js";import y from"../Icons/Undo.js";import b from"../Icons/X.js";import"../../hooks/useUuid.js";import"../../uuid.js";var E=(t=>(t.medium="medium",t.large="large",t))(E||{}),X=(t=>(t.remove="remove",t.undo="undo",t))(X||{}),z=(t=>(t.normal="normal",t.oncolor="oncolor",t.emphasised="emphasised",t))(z||{});const C=t=>{const{children:s,size:m,color:r,variant:a,action:o,onClick:c,testId:i}=t,{hoverRef:l,isHovered:d}=I(),$=u(e.tag,e[`tag--${m}`],e[`tag--${o}`],e["tag--has-action"],o==="remove"&&[e[`tag--${r}`],e[`tag--${a}`]]),h=()=>{switch(o){case"remove":return b;case"undo":return y}};return n.createElement("button",{className:$,onClick:c,ref:l,type:"button","data-testid":i,"data-analyticsid":p.Tag},s,n.createElement(g,{svgIcon:h(),size:v.XXSmall,color:f[`${o==="undo"?"blueberry":r}800`],isHovered:d}))},q=t=>{const{children:s,size:m="medium",color:r="blueberry",svgIcon:a,variant:o="normal",action:c,onClick:i,testId:l}=t,d=u(e.tag,e[`tag--${m}`],e[`tag--${r}`],e[`tag--${o}`],{[e["tag--has-icon"]]:a});return c&&i?n.createElement(C,{size:m,color:r,variant:o,action:c,onClick:i,testId:l},s):n.createElement("span",{className:d,"data-testid":l,"data-analyticsid":p.Tag},a&&n.createElement(g,{svgIcon:a,size:v.XXSmall,color:f[`${r}800`],className:e.tag__icon}),s)};export{X as TagAction,E as TagSize,z as TagVariant,q as default};
+import n from"react";import u from"classnames";import{Icon as g}from"../Icons/Icon.js";import{AnalyticsId as p,IconSize as v}from"../../constants.js";import{palette as f}from"../../theme/palette.js";import e from"./styles.module.scss";import{useHover as I}from"../../hooks/useHover.js";import y from"../Icons/Undo.js";import b from"../Icons/X.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";var E=(t=>(t.medium="medium",t.large="large",t))(E||{}),X=(t=>(t.remove="remove",t.undo="undo",t))(X||{}),z=(t=>(t.normal="normal",t.oncolor="oncolor",t.emphasised="emphasised",t))(z||{});const C=t=>{const{children:s,size:m,color:r,variant:a,action:o,onClick:c,testId:i}=t,{hoverRef:l,isHovered:d}=I(),$=u(e.tag,e[`tag--${m}`],e[`tag--${o}`],e["tag--has-action"],o==="remove"&&[e[`tag--${r}`],e[`tag--${a}`]]),h=()=>{switch(o){case"remove":return b;case"undo":return y}};return n.createElement("button",{className:$,onClick:c,ref:l,type:"button","data-testid":i,"data-analyticsid":p.Tag},s,n.createElement(g,{svgIcon:h(),size:v.XXSmall,color:f[`${o==="undo"?"blueberry":r}800`],isHovered:d}))},B=t=>{const{children:s,size:m="medium",color:r="blueberry",svgIcon:a,variant:o="normal",action:c,onClick:i,testId:l}=t,d=u(e.tag,e[`tag--${m}`],e[`tag--${r}`],e[`tag--${o}`],{[e["tag--has-icon"]]:a});return c&&i?n.createElement(C,{size:m,color:r,variant:o,action:c,onClick:i,testId:l},s):n.createElement("span",{className:d,"data-testid":l,"data-analyticsid":p.Tag},a&&n.createElement(g,{svgIcon:a,size:v.XXSmall,color:f[`${r}800`],className:e.tag__icon}),s)};export{X as TagAction,E as TagSize,z as TagVariant,B as default};
 //# sourceMappingURL=index.js.map

package/components/Tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { palette, PaletteNames } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\nimport { useHover } from '../../hooks/useHover';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\nimport { AnalyticsId } from '../../constants';\n\nexport enum TagSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum TagAction {\n  remove = 'remove',\n  undo = 'undo',\n}\n\nexport enum TagVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n\nexport type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\ninterface TagProps {\n  /** Sets the text of the tag */\n  children: string;\n  /** Sets the size of the tag. Default: small */\n  size?: keyof typeof TagSize;\n  /** Sets the background of the tag. Not used if action is \"undo\". Default: blueberry */\n  color?: TagColors;\n  /** Adds an icon to the tag. Not shown if action is set. */\n  svgIcon?: SvgIcon;\n  /* Changes the appearance of the tag. Not used if action is \"undo\". Default: normal */\n  variant?: keyof typeof TagVariant;\n  /* Makes the tag a clickable button that performs an action. onClick must also be set. */\n  action?: keyof typeof TagAction;\n  /* Called when action is set and the tag is clicked on. action must also be set. */\n  onClick?: () => void;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\ntype ActionTagProps = Required<Pick<TagProps, 'children' | 'size' | 'color' | 'variant' | 'action' | 'onClick'>> & Pick<TagProps, 'testId'>;\n\nconst ActionTag: React.FC<ActionTagProps> = props => {\n  const { children, size, color, variant, action, onClick, testId } = props;\n\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n\n  const tagClasses = cn(\n    styles.tag,\n    styles[`tag--${size}`],\n    styles[`tag--${action}`],\n    styles['tag--has-action'],\n    action === 'remove' && [styles[`tag--${color}`], styles[`tag--${variant}`]]\n  );\n\n  const getActionIcon = (): SvgIcon => {\n    switch (action) {\n      case 'remove':\n        return X;\n      case 'undo':\n        return Undo;\n    }\n  };\n\n  return (\n    <button className={tagClasses} onClick={onClick} ref={hoverRef} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n      <Icon\n        svgIcon={getActionIcon()}\n        size={IconSize.XXSmall}\n        color={palette[`${action === 'undo' ? 'blueberry' : color}800`]}\n        isHovered={isHovered}\n      />\n    </button>\n  );\n};\n\nconst Tag: React.FC<TagProps> = props => {\n  const { children, size = TagSize.medium, color = 'blueberry', svgIcon, variant = 'normal', action, onClick, testId } = props;\n\n  const tagClasses = cn(styles.tag, styles[`tag--${size}`], styles[`tag--${color}`], styles[`tag--${variant}`], {\n    [styles['tag--has-icon']]: svgIcon,\n  });\n\n  if (action && onClick) {\n    return (\n      <ActionTag size={size} color={color} variant={variant} action={action} onClick={onClick} testId={testId}>\n        {children}\n      </ActionTag>\n    );\n  }\n\n  return (\n    <span className={tagClasses} data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />}\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n"],"names":["TagSize","TagAction","TagVariant","ActionTag","props","children","size","color","variant","action","onClick","testId","hoverRef","isHovered","useHover","tagClasses","cn","styles","getActionIcon","X","Undo","React","AnalyticsId","Icon","IconSize","palette","Tag","svgIcon"],"mappings":"gZAYY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFEA,IAAAA,GAAA,CAAA,CAAA,EAKAC,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,KAAO,OAFGA,IAAAA,GAAA,CAAA,CAAA,EAKAC,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,QAAU,UACVA,EAAA,WAAa,aAHHA,IAAAA,GAAA,CAAA,CAAA,EA6BZ,MAAMC,EAA+CC,GAAA,CAC7C,KAAA,CAAE,SAAAC,EAAU,KAAAC,EAAM,MAAAC,EAAO,QAAAC,EAAS,OAAAC,EAAQ,QAAAC,EAAS,OAAAC,CAAW,EAAAP,EAE9D,CAAE,SAAAQ,EAAU,UAAAC,CAAU,EAAIC,EAA4B,EAEtDC,EAAaC,EACjBC,EAAO,IACPA,EAAO,QAAQX,KACfW,EAAO,QAAQR,KACfQ,EAAO,mBACPR,IAAW,UAAY,CAACQ,EAAO,QAAQV,KAAUU,EAAO,QAAQT,IAAU,CAAA,EAGtEU,EAAgB,IAAe,CACnC,OAAQT,EAAQ,CACd,IAAK,SACI,OAAAU,EACT,IAAK,OACI,OAAAC,CACX,CAAA,EAGF,OACGC,EAAA,cAAA,SAAA,CAAO,UAAWN,EAAY,QAAAL,EAAkB,IAAKE,EAAU,KAAK,SAAS,cAAaD,EAAQ,mBAAkBW,EAAY,GAAA,EAC9HjB,EACAgB,EAAA,cAAAE,EAAA,CACC,QAASL,EAAc,EACvB,KAAMM,EAAS,QACf,MAAOC,EAAQ,GAAGhB,IAAW,OAAS,YAAcF,QACpD,UAAAM,CACF,CAAA,CACF,CAEJ,EAEMa,EAAmCtB,GAAA,CACvC,KAAM,CAAE,SAAAC,EAAU,KAAAC,EAAO,SAAgB,MAAAC,EAAQ,YAAa,QAAAoB,EAAS,QAAAnB,EAAU,SAAU,OAAAC,EAAQ,QAAAC,EAAS,OAAAC,CAAA,EAAWP,EAEjHW,EAAaC,EAAGC,EAAO,IAAKA,EAAO,QAAQX,KAASW,EAAO,QAAQV,KAAUU,EAAO,QAAQT,KAAY,CAC5G,CAACS,EAAO,kBAAmBU,CAAA,CAC5B,EAED,OAAIlB,GAAUC,EAETW,EAAA,cAAAlB,EAAA,CAAU,KAAAG,EAAY,MAAAC,EAAc,QAAAC,EAAkB,OAAAC,EAAgB,QAAAC,EAAkB,OAAAC,CAAA,EACtFN,CACH,EAKDgB,EAAA,cAAA,OAAA,CAAK,UAAWN,EAAY,cAAaJ,EAAQ,mBAAkBW,EAAY,GAAA,EAC7EK,GAAYN,EAAA,cAAAE,EAAA,CAAK,QAAAI,EAAkB,KAAMH,EAAS,QAAS,MAAOC,EAAQ,GAAGlB,QAAa,UAAWU,EAAO,SAAA,CAAW,EACvHZ,CACH,CAEJ"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { palette, PaletteNames } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\nimport { useHover } from '../../hooks/useHover';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\nimport { AnalyticsId } from '../../constants';\n\nexport enum TagSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum TagAction {\n  remove = 'remove',\n  undo = 'undo',\n}\n\nexport enum TagVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n\nexport type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\ninterface TagProps {\n  /** Sets the text of the tag */\n  children: string;\n  /** Sets the size of the tag. Default: small */\n  size?: keyof typeof TagSize;\n  /** Sets the background of the tag. Not used if action is \"undo\". Default: blueberry */\n  color?: TagColors;\n  /** Adds an icon to the tag. Not shown if action is set. */\n  svgIcon?: SvgIcon;\n  /* Changes the appearance of the tag. Not used if action is \"undo\". Default: normal */\n  variant?: keyof typeof TagVariant;\n  /* Makes the tag a clickable button that performs an action. onClick must also be set. */\n  action?: keyof typeof TagAction;\n  /* Called when action is set and the tag is clicked on. action must also be set. */\n  onClick?: () => void;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\ntype ActionTagProps = Required<Pick<TagProps, 'children' | 'size' | 'color' | 'variant' | 'action' | 'onClick'>> & Pick<TagProps, 'testId'>;\n\nconst ActionTag: React.FC<ActionTagProps> = props => {\n  const { children, size, color, variant, action, onClick, testId } = props;\n\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n\n  const tagClasses = cn(\n    styles.tag,\n    styles[`tag--${size}`],\n    styles[`tag--${action}`],\n    styles['tag--has-action'],\n    action === 'remove' && [styles[`tag--${color}`], styles[`tag--${variant}`]]\n  );\n\n  const getActionIcon = (): SvgIcon => {\n    switch (action) {\n      case 'remove':\n        return X;\n      case 'undo':\n        return Undo;\n    }\n  };\n\n  return (\n    <button className={tagClasses} onClick={onClick} ref={hoverRef} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n      <Icon\n        svgIcon={getActionIcon()}\n        size={IconSize.XXSmall}\n        color={palette[`${action === 'undo' ? 'blueberry' : color}800`]}\n        isHovered={isHovered}\n      />\n    </button>\n  );\n};\n\nconst Tag: React.FC<TagProps> = props => {\n  const { children, size = TagSize.medium, color = 'blueberry', svgIcon, variant = 'normal', action, onClick, testId } = props;\n\n  const tagClasses = cn(styles.tag, styles[`tag--${size}`], styles[`tag--${color}`], styles[`tag--${variant}`], {\n    [styles['tag--has-icon']]: svgIcon,\n  });\n\n  if (action && onClick) {\n    return (\n      <ActionTag size={size} color={color} variant={variant} action={action} onClick={onClick} testId={testId}>\n        {children}\n      </ActionTag>\n    );\n  }\n\n  return (\n    <span className={tagClasses} data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />}\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n"],"names":["TagSize","TagAction","TagVariant","ActionTag","props","children","size","color","variant","action","onClick","testId","hoverRef","isHovered","useHover","tagClasses","cn","styles","getActionIcon","X","Undo","React","AnalyticsId","Icon","IconSize","palette","Tag","svgIcon"],"mappings":"mbAYY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFEA,IAAAA,GAAA,CAAA,CAAA,EAKAC,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,KAAO,OAFGA,IAAAA,GAAA,CAAA,CAAA,EAKAC,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,QAAU,UACVA,EAAA,WAAa,aAHHA,IAAAA,GAAA,CAAA,CAAA,EA6BZ,MAAMC,EAA+CC,GAAA,CAC7C,KAAA,CAAE,SAAAC,EAAU,KAAAC,EAAM,MAAAC,EAAO,QAAAC,EAAS,OAAAC,EAAQ,QAAAC,EAAS,OAAAC,CAAW,EAAAP,EAE9D,CAAE,SAAAQ,EAAU,UAAAC,CAAU,EAAIC,EAA4B,EAEtDC,EAAaC,EACjBC,EAAO,IACPA,EAAO,QAAQX,KACfW,EAAO,QAAQR,KACfQ,EAAO,mBACPR,IAAW,UAAY,CAACQ,EAAO,QAAQV,KAAUU,EAAO,QAAQT,IAAU,CAAA,EAGtEU,EAAgB,IAAe,CACnC,OAAQT,EAAQ,CACd,IAAK,SACI,OAAAU,EACT,IAAK,OACI,OAAAC,CACX,CAAA,EAGF,OACGC,EAAA,cAAA,SAAA,CAAO,UAAWN,EAAY,QAAAL,EAAkB,IAAKE,EAAU,KAAK,SAAS,cAAaD,EAAQ,mBAAkBW,EAAY,GAAA,EAC9HjB,EACAgB,EAAA,cAAAE,EAAA,CACC,QAASL,EAAc,EACvB,KAAMM,EAAS,QACf,MAAOC,EAAQ,GAAGhB,IAAW,OAAS,YAAcF,QACpD,UAAAM,CACF,CAAA,CACF,CAEJ,EAEMa,EAAmCtB,GAAA,CACvC,KAAM,CAAE,SAAAC,EAAU,KAAAC,EAAO,SAAgB,MAAAC,EAAQ,YAAa,QAAAoB,EAAS,QAAAnB,EAAU,SAAU,OAAAC,EAAQ,QAAAC,EAAS,OAAAC,CAAA,EAAWP,EAEjHW,EAAaC,EAAGC,EAAO,IAAKA,EAAO,QAAQX,KAASW,EAAO,QAAQV,KAAUU,EAAO,QAAQT,KAAY,CAC5G,CAACS,EAAO,kBAAmBU,CAAA,CAC5B,EAED,OAAIlB,GAAUC,EAETW,EAAA,cAAAlB,EAAA,CAAU,KAAAG,EAAY,MAAAC,EAAc,QAAAC,EAAkB,OAAAC,EAAgB,QAAAC,EAAkB,OAAAC,CAAA,EACtFN,CACH,EAKDgB,EAAA,cAAA,OAAA,CAAK,UAAWN,EAAY,cAAaJ,EAAQ,mBAAkBW,EAAY,GAAA,EAC7EK,GAAYN,EAAA,cAAAE,EAAA,CAAK,QAAAI,EAAkB,KAAMH,EAAS,QAAS,MAAOC,EAAQ,GAAGlB,QAAa,UAAWU,EAAO,SAAA,CAAW,EACvHZ,CACH,CAEJ"}

package/components/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,QAAQ,EAAe,MAAM,iBAAiB,CAAC;AAKxD,UAAU,aACR,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,EAC9C,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,aAAa,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,CAC9G;IACD,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAUD,QAAA,MAAM,QAAQ,2FA+IZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAA2C,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAIpF,UAAU,aACR,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,EAC9C,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,aAAa,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,CAC9G;IACD,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAUD,QAAA,MAAM,QAAQ,2FA+IZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/components/Textarea/index.js

@@ -1,2 +1,2 @@
-import"../../Textarea.js";import{T as n}from"../../Textarea.js";import"react";import"classnames";import"./styles.module.scss";import"../../constants.js";import"../../uuid.js";import"../../Input.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../Input/styles.module.scss";export{n as default};
+import"../../Textarea.js";import{T as d}from"../../Textarea.js";import"react";import"classnames";import"./styles.module.scss";import"../../constants.js";import"../../uuid.js";import"../../utils/environment.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";export{d as default};
 //# sourceMappingURL=index.js.map

package/components/Tile/index.js

@@ -1,2 +1,2 @@
-import e from"react";import f from"classnames";import{AnalyticsId as T,IconSize as w}from"../../constants.js";import"../Icons/Icon.js";import t from"./styles.module.scss";import{useHover as C}from"../../hooks/useHover.js";import"../../hooks/useUuid.js";import"../../uuid.js";const k=e.forwardRef((l,i)=>{const{children:o,className:s,htmlMarkup:n="span",highlighted:r,compact:c}=l,a=f(t.tile__title,{[t["tile__title--highlighted"]]:r,[t["tile__title--compact"]]:c},s),m=n;return e.createElement(m,{className:a,ref:i},o)}),v=e.forwardRef((l,i)=>{const{icon:o,title:s,className:n="",description:r,fixed:c=!1,highlighted:a=!1,testId:m,htmlMarkup:p="a",...E}=l,{hoverRef:h,isHovered:_}=C(i),d=!r,b=f(t.tile,{[t["tile--fixed"]]:c,[t["tile--compact"]]:d,[t["tile--highlighted"]]:a,[t["tile--button"]]:p==="button"},n),N=f(t["title-wrapper"],{[t["title-wrapper--compact"]]:d}),u=()=>e.createElement(e.Fragment,null,e.createElement("div",{className:N},e.cloneElement(o,{size:w.Medium,isHovered:_,color:a?"white":"black"}),e.cloneElement(s,{highlighted:a,compact:d})),r?e.createElement("p",{className:t.tile__description},r):null),g={className:b,["data-testid"]:m,["data-analyticsid"]:T.Tile,...E};return e.createElement(e.Fragment,null,p==="a"&&e.createElement("a",{ref:h,rel:l.target==="_blank"?"noopener noreferrer":l.rel,...g},u()),p==="button"&&e.createElement("button",{ref:h,type:"button",...g},u()))});v.Title=k;export{v as Tile,v as default};
+import e from"react";import f from"classnames";import{AnalyticsId as T,IconSize as w}from"../../constants.js";import"../Icons/Icon.js";import t from"./styles.module.scss";import{useHover as C}from"../../hooks/useHover.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";const k=e.forwardRef((l,a)=>{const{children:o,className:s,htmlMarkup:n="span",highlighted:r,compact:c}=l,i=f(t.tile__title,{[t["tile__title--highlighted"]]:r,[t["tile__title--compact"]]:c},s),m=n;return e.createElement(m,{className:i,ref:a},o)}),v=e.forwardRef((l,a)=>{const{icon:o,title:s,className:n="",description:r,fixed:c=!1,highlighted:i=!1,testId:m,htmlMarkup:p="a",...E}=l,{hoverRef:h,isHovered:_}=C(a),d=!r,b=f(t.tile,{[t["tile--fixed"]]:c,[t["tile--compact"]]:d,[t["tile--highlighted"]]:i,[t["tile--button"]]:p==="button"},n),N=f(t["title-wrapper"],{[t["title-wrapper--compact"]]:d}),u=()=>e.createElement(e.Fragment,null,e.createElement("div",{className:N},e.cloneElement(o,{size:w.Medium,isHovered:_,color:i?"white":"black"}),e.cloneElement(s,{highlighted:i,compact:d})),r?e.createElement("p",{className:t.tile__description},r):null),g={className:b,["data-testid"]:m,["data-analyticsid"]:T.Tile,...E};return e.createElement(e.Fragment,null,p==="a"&&e.createElement("a",{ref:h,rel:l.target==="_blank"?"noopener noreferrer":l.rel,...g},u()),p==="button"&&e.createElement("button",{ref:h,type:"button",...g},u()))});v.Title=k;export{v as Tile,v as default};
 //# sourceMappingURL=index.js.map