@helsenorge/designsystem-react 2.17.0 → 3.0.1

package/components/Table/Table.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Breakpoint } from '../../hooks/useBreakpoint';
-export declare enum SmallViewportVariant {
-    /** No handling responsive behaviour. This will be the default in v3.0.0. */
+export declare enum ResponsiveTableVariant {
+    /** No handling responsive behaviour. Default. */
     none = "none",
     /** Overflow parent container to the left and right while remaining centered horizontally. */
     centeredoverflow = "centeredoverflow",
@@ -14,9 +14,9 @@ export interface BreakpointConfig {
     /** Breakpoint at which responsive behaviour will be applied. The table component uses a "desktop first" approach. */
     breakpoint: keyof typeof Breakpoint;
     /** Desired behaviour on this breakpoint and all smaller screens. */
-    variant: keyof typeof SmallViewportVariant;
+    variant: keyof typeof ResponsiveTableVariant;
     /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */
-    fallbackVariant?: keyof typeof SmallViewportVariant;
+    fallbackVariant?: keyof typeof ResponsiveTableVariant;
 }
 export interface Props {
     /** Unique ID */
@@ -24,13 +24,14 @@ export interface Props {
     /** Id used for testing */
     testId?: string;
     /** Customize how the table behaves on various screen widths */
-    /** @deprecated Rename to breakpointConfig in v3.0.0 and drop support for SmallViewPortVariant */
-    smallViewportVariant?: SmallViewportVariant | BreakpointConfig | BreakpointConfig[];
+    breakpointConfig?: BreakpointConfig | BreakpointConfig[];
     /** Adds custom classes to the element. */
     className?: string;
     /** Sets the content of the table. Use TableHead and TableBody */
     children: React.ReactNode;
 }
+export declare const defaultConfig: BreakpointConfig[];
+export declare const simpleConfig: BreakpointConfig[];
 export declare const Table: React.FC<Props>;
 export default Table;
 //# sourceMappingURL=Table.d.ts.map

package/components/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,OAAO,EAAE,UAAU,EAAiB,MAAM,2BAA2B,CAAC;AAItE,oBAAY,oBAAoB;IAC9B,4EAA4E;IAC5E,IAAI,SAAS;IACb,6FAA6F;IAC7F,gBAAgB,qBAAqB;IACrC,sEAAsE;IACtE,gBAAgB,qBAAqB;IACrC,+BAA+B;IAC/B,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,qHAAqH;IACrH,UAAU,EAAE,MAAM,OAAO,UAAU,CAAC;IACpC,oEAAoE;IACpE,OAAO,EAAE,MAAM,OAAO,oBAAoB,CAAC;IAC3C,+FAA+F;IAC/F,eAAe,CAAC,EAAE,MAAM,OAAO,oBAAoB,CAAC;CACrD;AAED,MAAM,WAAW,KAAK;IACpB,gBAAgB;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,iGAAiG;IACjG,oBAAoB,CAAC,EAAE,oBAAoB,GAAG,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;IACpF,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAoCjC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,OAAO,EAAE,UAAU,EAAiB,MAAM,2BAA2B,CAAC;AAMtE,oBAAY,sBAAsB;IAChC,iDAAiD;IACjD,IAAI,SAAS;IACb,6FAA6F;IAC7F,gBAAgB,qBAAqB;IACrC,sEAAsE;IACtE,gBAAgB,qBAAqB;IACrC,+BAA+B;IAC/B,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,qHAAqH;IACrH,UAAU,EAAE,MAAM,OAAO,UAAU,CAAC;IACpC,oEAAoE;IACpE,OAAO,EAAE,MAAM,OAAO,sBAAsB,CAAC;IAC7C,+FAA+F;IAC/F,eAAe,CAAC,EAAE,MAAM,OAAO,sBAAsB,CAAC;CACvD;AAED,MAAM,WAAW,KAAK;IACpB,gBAAgB;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;IACzD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,EAAE,gBAAgB,EAM3C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,gBAAgB,EAW1C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyCjC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/components/Table/TableBody/index.js

@@ -1,2 +1,2 @@
-import"../../../TableBody.js";import{T as m,T as t}from"../../../TableBody.js";import"react";export{m as TableBody,t as default};
+import{a}from"../../../TableBody.js";import{T as m}from"../../../TableBody.js";import"react";export{m as TableBody,a as default};
 //# sourceMappingURL=index.js.map

package/components/Table/TableCell/TableCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableCell/TableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS,0DAAsG,KAAK,gBAchI,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableCell/TableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS,0DAAsG,KAAK,gBAchI,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/Table/TableCell/index.js

@@ -1,2 +1,2 @@
-import"../../../TableCell.js";import{T,a as i,T as p}from"../../../TableCell.js";import"react";import"classnames";import"../styles.module.scss";export{T as TableCell,i as TextAlign,p as default};
+import{b as e}from"../../../TableCell.js";import{T as p,a as i}from"../../../TableCell.js";import"react";import"classnames";import"../styles.module.scss";export{p as TableCell,i as TextAlign,e as default};
 //# sourceMappingURL=index.js.map

package/components/Table/TableExpandedRow/TableExpandedRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableExpandedRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableExpandedRow/TableExpandedRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,KAAK;IACpB,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,eAAe,EAAE,MAAM,CAAC;IACxB,4BAA4B;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,sFAO1B,KAAK,gBAyBP,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"TableExpandedRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableExpandedRow/TableExpandedRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,KAAK;IACpB,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,eAAe,EAAE,MAAM,CAAC;IACxB,4BAA4B;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,sFAO1B,KAAK,gBAyBP,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/components/Table/TableExpandedRow/index.js

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

package/components/Table/TableExpanderCell/TableExpanderCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableExpanderCell.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableExpanderCell/TableExpanderCell.tsx"],"names":[],"mappings":";AAQA,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,2BAA2B;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,eAAe,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,iBAAiB,gFAM3B,KAAK,gBAgBP,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"TableExpanderCell.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableExpanderCell/TableExpanderCell.tsx"],"names":[],"mappings":";AAUA,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,2BAA2B;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,eAAe,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,iBAAiB,gFAM3B,KAAK,gBAgBP,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/components/Table/TableExpanderCell/TableExpanderCellMobile.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Props } from '../TableRow/TableRow';
-declare type TableExpanderCellMobile = Pick<Props, 'expanded' | 'onClick' | 'hideDetailsText' | 'showDetailsText'>;
-declare const TableExpanderCellMobile: React.FC<TableExpanderCellMobile>;
+type TableExpanderCellMobileProps = Pick<Props, 'expanded' | 'onClick' | 'hideDetailsText' | 'showDetailsText'>;
+declare const TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps>;
 export default TableExpanderCellMobile;
 //# sourceMappingURL=TableExpanderCellMobile.d.ts.map

package/components/Table/TableExpanderCell/TableExpanderCellMobile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableExpanderCellMobile.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAI7C,aAAK,uBAAuB,GAAG,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,SAAS,GAAG,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;AAE3G,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAY9D,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"TableExpanderCellMobile.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C,KAAK,4BAA4B,GAAG,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,SAAS,GAAG,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;AAEhH,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAYnE,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/components/Table/TableExpanderCell/index.js

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

package/components/Table/TableHead/TableHead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableHead/TableHead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,oBAAY,cAAc;IACxB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,KAAK;IACpB,kCAAkC;IAClC,QAAQ,EAAE,cAAc,CAAC;IACzB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS,sCAAyD,KAAK,gBAYnF,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableHead/TableHead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,oBAAY,cAAc;IACxB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,KAAK;IACpB,kCAAkC;IAClC,QAAQ,EAAE,cAAc,CAAC;IACzB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS,sCAAyD,KAAK,gBAYnF,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/Table/TableHead/index.js

@@ -1,2 +1,2 @@
-import"../../../TableHead.js";import{H as T,T as d,T as i}from"../../../TableHead.js";import"react";import"classnames";import"../styles.module.scss";export{T as HeaderCategory,d as TableHead,i as default};
+import{a as e}from"../../../TableHead.js";import{H as d,T as i}from"../../../TableHead.js";import"react";import"classnames";import"../styles.module.scss";export{d as HeaderCategory,i as TableHead,e as default};
 //# sourceMappingURL=index.js.map

package/components/Table/TableHeadCell/TableHeadCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeadCell.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableHeadCell/TableHeadCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,oBAAY,aAAa;IACvB,GAAG,QAAQ;IACX,IAAI,SAAS;CACd;AAED,MAAM,WAAW,KAAK;IACpB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,wDAA+E,KAAK,gBA0C7G,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TableHeadCell.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableHeadCell/TableHeadCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,oBAAY,aAAa;IACvB,GAAG,QAAQ;IACX,IAAI,SAAS;CACd;AAED,MAAM,WAAW,KAAK;IACpB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,wDAA+E,KAAK,gBA0C7G,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/Table/TableHeadCell/index.js

@@ -1,2 +1,2 @@
-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};
+import{a as r}from"../../../TableHeadCell.js";import{S as x,T as C}from"../../../TableHeadCell.js";import"react";import"classnames";import"../../Icons/Icon.js";import"../../../constants.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../../utils/environment.js";import"../../Icons/ArrowDown.js";import"../../Icons/ArrowUp.js";import"../styles.module.scss";export{x as SortDirection,C as TableHeadCell,r as default};
 //# sourceMappingURL=index.js.map

package/components/Table/TableRow/TableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableRow/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,KAAK;IACpB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgCpC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableRow/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,KAAK;IACpB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgCpC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/Table/TableRow/componentdata.json

@@ -1 +1 @@
-{"props":{"expandable":{"defaultValue":null,"description":"Sets if expanded row can be expanded","name":"expandable","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"boolean"}},"expanded":{"defaultValue":null,"description":"Sets if expanded row is expanded","name":"expanded","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"boolean"}},"onClick":{"defaultValue":null,"description":"When hide/show button for expanded row is clicked.","name":"onClick","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"(() => void)"}},"hideDetailsText":{"defaultValue":null,"description":"Text for expanded row hide button.","name":"hideDetailsText","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"showDetailsText":{"defaultValue":null,"description":"Text for expanded row show button.","name":"showDetailsText","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"rowKey":{"defaultValue":null,"description":"Key attribute for row","name":"rowKey","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the cells of the table row element.","name":"children","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}}}}
+{"props":{"expandable":{"defaultValue":null,"description":"Sets if expanded row can be expanded","name":"expandable","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"boolean"}},"expanded":{"defaultValue":null,"description":"Sets if expanded row is expanded","name":"expanded","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"boolean"}},"onClick":{"defaultValue":null,"description":"When hide/show button for expanded row is clicked.","name":"onClick","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"(() => void)"}},"hideDetailsText":{"defaultValue":null,"description":"Text for expanded row hide button.","name":"hideDetailsText","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"showDetailsText":{"defaultValue":null,"description":"Text for expanded row show button.","name":"showDetailsText","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"rowKey":{"defaultValue":null,"description":"Key attribute for row","name":"rowKey","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the cells of the table row element.","name":"children","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},{"fileName":"s/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}}}}

package/components/Table/TableRow/index.js

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

package/components/Table/index.js

@@ -1,2 +1,2 @@
-import d,{useRef as T,useState as w}from"react";import z from"classnames";import k from"./styles.module.scss";import{AnalyticsId as C}from"../../constants.js";import{H as x}from"../../HorizontalScroll.js";import{useSize as y}from"../../hooks/useSize.js";import{Breakpoint as m,useBreakpoint as B}from"../../hooks/useBreakpoint.js";import{isTouchDevice as H}from"../../utils/device.js";import{useLayoutEvent as W}from"../../hooks/useLayoutEvent.js";import{T as ur}from"../../TableBody.js";import{T as Tr,a as wr}from"../../TableCell.js";import{T as Cr}from"../../TableExpandedRow.js";import{T as yr}from"../../TableExpanderCell.js";import{H as Hr,T as Wr}from"../../TableHead.js";import{S as Er,T as Rr}from"../../TableHeadCell.js";import{T as Vr}from"../../TableRow.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../HorizontalScroll/styles.module.scss";import"../../utils/debounce.js";import"../../theme/grid.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"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.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";const S=r=>r.variant===t.centeredoverflow||r.variant===t.block,E=r=>k[`table--${r.variant}-${r.breakpoint}`],R=(r,e)=>m[r.breakpoint]-m[e.breakpoint],f=(r,e)=>m[r.breakpoint]>=e,A=(r,e)=>{if(Array.isArray(r))return r.sort(R),r.find(i=>f(i,e));if(r&&f(r,e))return r},V=(r,e,i,p)=>{var s,c;const o=A(r,e),n=H(),l=i<=p;if(!!o)return o.variant===t.centeredoverflow&&!l&&o.fallbackVariant===t.horizontalscroll?{variant:n?t.horizontalscroll:t.none,breakpoint:o.breakpoint}:o.variant===t.centeredoverflow&&!l&&o.fallbackVariant!==t.centeredoverflow?{variant:(s=o.fallbackVariant)!=null?s:t.none,breakpoint:o.breakpoint}:o.variant===t.horizontalscroll&&!n&&o.fallbackVariant===t.centeredoverflow?{variant:l?t.centeredoverflow:t.none,breakpoint:o.breakpoint}:o.variant===t.horizontalscroll&&!n&&o.fallbackVariant!==t.horizontalscroll?{variant:(c=o.fallbackVariant)!=null?c:t.none,breakpoint:o.breakpoint}:o},D=r=>r&&S(r)?E(r):void 0,F=r=>r===t.block||r===t.horizontalscroll,U=r=>({breakpoint:"sm",variant:r});var t=(r=>(r.none="none",r.centeredoverflow="centeredoverflow",r.horizontalscroll="horizontalscroll",r.block="block",r))(t||{});const fr=({id:r,testId:e,className:i,children:p,smallViewportVariant:o="horizontalscroll"})=>{const n=T(null),l=B(),{width:s=0}=y(n)||{},[c,v]=w(window.innerWidth);W(()=>v(window.innerWidth),["resize"],100);const a=F(o)?U(o):V(o,l,s,c),u=D(a),h=z(k.table,u,i),b=d.createElement("table",{className:h,id:r,"data-testid":e,"data-analyticsid":C.Table,ref:n},p);return(a==null?void 0:a.variant)==="horizontalscroll"&&!(a!=null&&a.fallbackVariant)?d.createElement(x,{childWidth:s,testId:"horizontal-scroll"},b):b};export{Hr as HeaderCategory,t as SmallViewportVariant,Er as SortDirection,fr as Table,ur as TableBody,Tr as TableCell,Cr as TableExpandedRow,yr as TableExpanderCell,Wr as TableHead,Rr as TableHeadCell,Vr as TableRow,wr as TextAlign,fr as default};
+import h,{useState as p,useRef as y,useEffect as u}from"react";import W from"classnames";import{Breakpoint as m,useBreakpoint as H}from"../../hooks/useBreakpoint.js";import{isTouchDevice as V}from"../../utils/device.js";import C from"./styles.module.scss";import{AnalyticsId as E}from"../../constants.js";import{useLayoutEvent as S}from"../../hooks/useLayoutEvent.js";import{H as A}from"../../HorizontalScroll.js";import{T as Tt}from"../../TableBody.js";import{T as zt,a as xt}from"../../TableCell.js";import{T as yt}from"../../TableExpandedRow.js";import{T as Ht}from"../../TableExpanderCell.js";import{H as Et,T as St}from"../../TableHead.js";import{S as Rt,T as gt}from"../../TableHeadCell.js";import{T as Ut}from"../../TableRow.js";import"../../theme/grid.js";import"../../utils/debounce.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useSize.js";import"../HorizontalScroll/styles.module.scss";import"../../Button.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../Icons/ChevronUp.js";import"../Icons/ChevronDown.js";import"../Icons/ArrowDown.js";import"../Icons/ArrowUp.js";const R=t=>t.variant===o.centeredoverflow||t.variant===o.block,g=t=>C[`table--${t.variant}-${t.breakpoint}`],D=(t,a)=>m[t.breakpoint]-m[a.breakpoint],T=(t,a)=>m[t.breakpoint]>=a,U=(t,a)=>{if(Array.isArray(t))return t.sort(D),t.find(n=>T(n,a));if(t&&T(t,a))return t},F=(t,a,n,l)=>{const r=U(t,a),e=V(),i=n<=l;if(r)return r.variant===o.centeredoverflow&&!i&&r.fallbackVariant===o.horizontalscroll?{variant:e?o.horizontalscroll:o.none,breakpoint:r.breakpoint}:r.variant===o.centeredoverflow&&!i&&r.fallbackVariant!==o.centeredoverflow?{variant:r.fallbackVariant??o.none,breakpoint:r.breakpoint}:r.variant===o.horizontalscroll&&!e&&r.fallbackVariant===o.centeredoverflow?{variant:i?o.centeredoverflow:o.none,breakpoint:r.breakpoint}:r.variant===o.horizontalscroll&&!e&&r.fallbackVariant!==o.horizontalscroll?{variant:r.fallbackVariant??o.none,breakpoint:r.breakpoint}:r},I=t=>t&&R(t)?g(t):void 0;var o=(t=>(t.none="none",t.centeredoverflow="centeredoverflow",t.horizontalscroll="horizontalscroll",t.block="block",t))(o||{});const N=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"}],vt=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"},{breakpoint:"sm",variant:"centeredoverflow",fallbackVariant:"block"}],wt=({id:t,testId:a,className:n,children:l,breakpointConfig:r=N})=>{const[e,i]=p(),[s,d]=p(0),[f,z]=p(window.innerWidth),c=y(null),b=H();u(()=>{i(F(r,b,s,f))},[r,b,s,f]),u(()=>{var v,w;d(((v=c.current)==null?void 0:v.getBoundingClientRect().width)??0),((e==null?void 0:e.variant)==="centeredoverflow"||(e==null?void 0:e.variant)==="horizontalscroll")&&d(((w=c.current)==null?void 0:w.getBoundingClientRect().width)??0)},[e]),S(()=>z(window.innerWidth),["resize"],100);const x=I(e),B=W(C.table,x,n),k=h.createElement("table",{className:B,id:t,"data-testid":a,"data-analyticsid":E.Table,ref:c},l);return(e==null?void 0:e.variant)==="horizontalscroll"?h.createElement(A,{childWidth:s,testId:"horizontal-scroll"},k):k};export{Et as HeaderCategory,o as ResponsiveTableVariant,Rt as SortDirection,wt as Table,Tt as TableBody,zt as TableCell,yt as TableExpandedRow,Ht as TableExpanderCell,St as TableHead,gt as TableHeadCell,Ut as TableRow,xt as TextAlign,wt as default,N as defaultConfig,vt as simpleConfig};
 //# sourceMappingURL=index.js.map

package/components/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Table/utils.ts","../../../src/components/Table/Table.tsx"],"sourcesContent":["import { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\nimport { BreakpointConfig, SmallViewportVariant } from './Table';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === SmallViewportVariant.centeredoverflow || config.variant === SmallViewportVariant.block;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string => styles[`table--${config.variant}-${config.breakpoint}`];\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra største til minste\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsDescending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    config.sort(sortByBreakpointsDescending);\n\n    return config.find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): BreakpointConfig | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (\n    breakpointConfig.variant === SmallViewportVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === SmallViewportVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? SmallViewportVariant.horizontalscroll : SmallViewportVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === SmallViewportVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== SmallViewportVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? SmallViewportVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === SmallViewportVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === SmallViewportVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? SmallViewportVariant.centeredoverflow : SmallViewportVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === SmallViewportVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== SmallViewportVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? SmallViewportVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/** @deprecated Midlertidig, fjernes i v3.0.0 */\nexport const isOldFormat = (x: unknown): x is SmallViewportVariant =>\n  (x as SmallViewportVariant) === SmallViewportVariant.block || (x as SmallViewportVariant) === SmallViewportVariant.horizontalscroll;\n\n/** @deprecated Midlertidig, fjernes i v3.0.0 */\nexport const getBackwardsCompatibleConfig = (variant: SmallViewportVariant): BreakpointConfig => {\n  return {\n    breakpoint: 'sm',\n    variant,\n  };\n};\n","import React, { useRef, useState } from 'react';\nimport classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nimport { AnalyticsId } from '../../constants';\nimport HorizontalScroll from '../HorizontalScroll';\nimport { useSize } from '../../hooks/useSize';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { getBackwardsCompatibleConfig, getCurrentConfig, getBreakpointClass, isOldFormat } from './utils';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\n\nexport enum SmallViewportVariant {\n  /** No handling responsive behaviour. This will be the default in v3.0.0. */\n  none = 'none',\n  /** Overflow parent container to the left and right while remaining centered horizontally. */\n  centeredoverflow = 'centeredoverflow',\n  /** Show horizontal scrollbar when table is too big for the screen. */\n  horizontalscroll = 'horizontalscroll',\n  /** Collapse to two columns. */\n  block = 'block',\n}\n\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof SmallViewportVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof SmallViewportVariant;\n}\n\nexport interface Props {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  /** @deprecated Rename to breakpointConfig in v3.0.0 and drop support for SmallViewPortVariant */\n  smallViewportVariant?: SmallViewportVariant | BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n}\n\nexport const Table: React.FC<Props> = ({\n  id,\n  testId,\n  className,\n  children,\n  smallViewportVariant: breakpointConfig = SmallViewportVariant.horizontalscroll,\n}) => {\n  const tableRef = useRef<HTMLTableElement>(null);\n  const breakpoint = useBreakpoint();\n  const { width: tableWidth = 0 } = useSize(tableRef) || {};\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  const currentConfig = isOldFormat(breakpointConfig)\n    ? getBackwardsCompatibleConfig(breakpointConfig)\n    : getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth);\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n\n  const table = (\n    <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table} ref={tableRef}>\n      {children}\n    </table>\n  );\n\n  const useHorizontalScroll = currentConfig?.variant === SmallViewportVariant.horizontalscroll && !currentConfig?.fallbackVariant;\n\n  if (useHorizontalScroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\">\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n"],"names":["configUsesCss","config","SmallViewportVariant","mapConfigToClass","styles","sortByBreakpointsDescending","a","b","Breakpoint","isValidForCurrentBreakpoint","breakpoint","getConfigForBreakpoint","x","getCurrentConfig","tableWidth","windowWidth","breakpointConfig","canUseHorizontalScroll","isTouchDevice","canUseCenteredOverflow","_a","_b","getBreakpointClass","isOldFormat","getBackwardsCompatibleConfig","variant","Table","id","testId","className","children","tableRef","useRef","useBreakpoint","useSize","setWindowWidth","useState","useLayoutEvent","currentConfig","breakpointClass","tableClass","classNames","table","React","AnalyticsId","HorizontalScroll"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Table/utils.ts","../../../src/components/Table/Table.tsx"],"sourcesContent":["import { BreakpointConfig, ResponsiveTableVariant } from './Table';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string => styles[`table--${config.variant}-${config.breakpoint}`];\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra største til minste\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsDescending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    config.sort(sortByBreakpointsDescending);\n\n    return config.find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getCurrentConfig, getBreakpointClass } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport enum ResponsiveTableVariant {\n  /** No handling responsive behaviour. Default. */\n  none = 'none',\n  /** Overflow parent container to the left and right while remaining centered horizontally. */\n  centeredoverflow = 'centeredoverflow',\n  /** Show horizontal scrollbar when table is too big for the screen. */\n  horizontalscroll = 'horizontalscroll',\n  /** Collapse to two columns. */\n  block = 'block',\n}\n\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n}\n\nexport const defaultConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n];\n\nexport const simpleConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n  {\n    breakpoint: 'sm',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.block,\n  },\n];\n\nexport const Table: React.FC<Props> = ({ id, testId, className, children, breakpointConfig = defaultConfig }) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n\n  const table = (\n    <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table} ref={tableRef}>\n      {children}\n    </table>\n  );\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\">\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n"],"names":["configUsesCss","config","ResponsiveTableVariant","mapConfigToClass","styles","sortByBreakpointsDescending","a","b","Breakpoint","isValidForCurrentBreakpoint","breakpoint","getConfigForBreakpoint","x","getCurrentConfig","tableWidth","windowWidth","breakpointConfig","canUseHorizontalScroll","isTouchDevice","canUseCenteredOverflow","getBreakpointClass","defaultConfig","simpleConfig","Table","id","testId","className","children","currentConfig","setCurrentConfig","useState","setTableWidth","setWindowWidth","tableRef","useRef","useBreakpoint","useEffect","_a","_b","useLayoutEvent","breakpointClass","tableClass","classNames","table","React","AnalyticsId","HorizontalScroll"],"mappings":"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"}

package/components/Table/styles.module.scss

@@ -1,8 +1,9 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/_font-settings.scss';
-@import '../../scss/_grid.scss';
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+@import '../../scss/grid';
 
 /* fix outline for Safari */
 table tbody tr {
@@ -47,12 +48,10 @@ table tbody tr {
     background-color: $blueberry800;
     text-decoration: underline;
   }
+
   td {
     position: relative;
-    padding-left: 40%;
-    padding-right: 0;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
+    padding: 0.75rem 0 0.75rem 40%;
     float: left;
     clear: both;
     width: 100%;
@@ -90,6 +89,7 @@ table tbody tr {
 
   .table__expanded-row {
     display: none;
+
     &--expanded {
       display: block;
     }
@@ -98,25 +98,28 @@ table tbody tr {
   .table__cell {
     border-top: 0;
     border-bottom: 0;
-
     outline: 0;
 
     &--center {
       text-align: left;
     }
+
     &--right {
       text-align: left;
     }
   }
+
   .table__cell:first-child {
     border-collapse: collapse;
     border-top: 1px solid $neutral500;
   }
+
   .table__expanded-row {
     .table__cell:first-child {
       border-top: 0;
     }
   }
+
   .table__row--expandable {
     .table__cell:nth-child(2) {
       border-collapse: collapse;
@@ -130,6 +133,7 @@ table tbody tr {
 
   .table__expander-cell-mobile {
     border-bottom: 1px solid $neutral500;
+
     &--expanded {
       border-bottom: 0;
     }
@@ -166,9 +170,11 @@ table tbody tr {
 
 .table__head {
   background: $blueberry50;
+
   &--normal {
     background: $neutral50;
   }
+
   &--transparent {
     background: transparent;
   }
@@ -177,7 +183,7 @@ table tbody tr {
     background: $blueberry50;
   }
 
-  @media (min-width: map-get($grid-breakpoints, lg)) {
+  @media (min-width: map.get($grid-breakpoints, lg)) {
     height: 6.125rem;
   }
 }
@@ -185,7 +191,6 @@ table tbody tr {
 .table__head-cell {
   // Fix for firefox hover feil
   background-clip: padding-box;
-
   height: 3.625rem;
   font-size: $font-size-sm;
   line-height: $lineheight-size-xs;
@@ -203,6 +208,7 @@ table tbody tr {
     background-color: $blueberry100;
     cursor: pointer;
   }
+
   &--sortable:focus-within {
     outline: 3px solid $black;
     outline-offset: -3px;
@@ -213,7 +219,8 @@ table tbody tr {
     text-decoration-thickness: 1px;
     text-underline-offset: 0.3125rem;
   }
-  @media (min-width: map-get($grid-breakpoints, lg)) {
+
+  @media (min-width: map.get($grid-breakpoints, lg)) {
     padding: 1rem;
     height: 5.5rem;
     font-size: $font-size-md;
@@ -237,14 +244,16 @@ table tbody tr {
   &--center {
     text-align: center;
   }
+
   &--right {
     text-align: right;
   }
+
   &--nowrap {
     white-space: nowrap;
   }
 
-  @media (min-width: map-get($grid-breakpoints, lg)) {
+  @media (min-width: map.get($grid-breakpoints, lg)) {
     padding: 1rem;
     height: 3.625rem;
     font-size: $font-size-sm;
@@ -263,34 +272,37 @@ table tbody tr {
   &--selected {
     background: $neutral100;
   }
+
   &:hover {
     cursor: pointer;
     background: $blueberry50;
   }
 }
+
 .table__expanded-row {
   display: none;
+
   &--expanded {
     display: table-row;
   }
 
   &-container {
     padding: 0.5rem;
-    @media (min-width: map-get($grid-breakpoints, lg)) {
+
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       &--open {
         border-bottom: 1px solid $neutral100;
       }
     }
   }
 }
+
 .table__sort-button {
   all: unset;
-  &:after {
-    bottom: 0;
+
+  &::after {
+    inset: 0;
     content: '';
-    left: 0;
     position: absolute;
-    right: 0;
-    top: 0;
   }
 }

package/components/Table/utils.d.ts

@@ -1,21 +1,17 @@
+import { BreakpointConfig } from './Table';
 import { Breakpoint } from '../../hooks/useBreakpoint';
-import { BreakpointConfig, SmallViewportVariant } from './Table';
 /**
  * Finn konfigurasjon for nåværende breakpoint og tabellbredde
  * @param config Konfigurasjon for responsiv oppførsel
  * @param breakpoint Nåværende breakpoint
  * @param tableWidth Bredde på tabell i px
- * @returns Konfigurasjon for responsiv oppførsel
+ * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant
  */
-export declare const getCurrentConfig: (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint, tableWidth: number, windowWidth: number) => BreakpointConfig | undefined;
+export declare const getCurrentConfig: (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint, tableWidth: number, windowWidth: number) => Omit<BreakpointConfig, 'fallbackVariant'> | undefined;
 /**
  * Finn klassenavn for responsiv oppførsel
  * @param config Konfigurasjon for responsiv oppførsel
  * @returns Klassenavn
  */
 export declare const getBreakpointClass: (config?: BreakpointConfig) => string | undefined;
-/** @deprecated Midlertidig, fjernes i v3.0.0 */
-export declare const isOldFormat: (x: unknown) => x is SmallViewportVariant;
-/** @deprecated Midlertidig, fjernes i v3.0.0 */
-export declare const getBackwardsCompatibleConfig: (variant: SmallViewportVariant) => BreakpointConfig;
 //# sourceMappingURL=utils.d.ts.map

package/components/Table/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Table/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAqDjE;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,WACnB,gBAAgB,GAAG,gBAAgB,EAAE,cACjC,UAAU,cACV,MAAM,eACL,MAAM,KAClB,gBAAgB,GAAG,SAsDrB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,YAAa,gBAAgB,KAAG,MAAM,GAAG,SACA,CAAC;AAEzE,gDAAgD;AAChD,eAAO,MAAM,WAAW,MAAO,OAAO,8BAC+F,CAAC;AAEtI,gDAAgD;AAChD,eAAO,MAAM,4BAA4B,YAAa,oBAAoB,KAAG,gBAK5E,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Table/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAA0B,MAAM,SAAS,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAsDvD;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,WACnB,gBAAgB,GAAG,gBAAgB,EAAE,cACjC,UAAU,cACV,MAAM,eACL,MAAM,KAClB,KAAK,gBAAgB,EAAE,iBAAiB,CAAC,GAAG,SAsD9C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,YAAa,gBAAgB,KAAG,MAAM,GAAG,SACA,CAAC"}

package/components/Tag/Tag.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SvgIcon } from '../Icons';
 import { PaletteNames } from '../../theme/palette';
+import { SvgIcon } from '../Icons';
 export declare enum TagSize {
     medium = "medium",
     large = "large"
@@ -14,7 +14,7 @@ export declare enum TagVariant {
     oncolor = "oncolor",
     emphasised = "emphasised"
 }
-export declare type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;
+export type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;
 interface TagProps {
     /** Sets the text of the tag */
     children: string;

package/components/Tag/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAW,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAQ5D,oBAAY,OAAO;IACjB,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,oBAAY,SAAS;IACnB,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,UAAU,eAAe;CAC1B;AAED,oBAAY,SAAS,GAAG,OAAO,CAAC,YAAY,EAAE,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC;AAE/G,UAAU,QAAQ;IAChB,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC5B,uFAAuF;IACvF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,OAAO,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IAElC,MAAM,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IAEhC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAuCD,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAqB3B,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAW,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAMnD,oBAAY,OAAO;IACjB,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,oBAAY,SAAS;IACnB,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,UAAU,eAAe;CAC1B;AAED,MAAM,MAAM,SAAS,GAAG,OAAO,CAAC,YAAY,EAAE,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC;AAE/G,UAAU,QAAQ;IAChB,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC5B,uFAAuF;IACvF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,OAAO,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IAElC,MAAM,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IAEhC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAuCD,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAqB3B,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/components/Tag/componentdata.json

@@ -1 +1 @@
-{"props":{"children":{"defaultValue":null,"description":"Sets the text of the tag","name":"children","parent":{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"},"declarations":[{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string & ReactNode"}},"size":{"defaultValue":null,"description":"Sets the size of the tag. Default: small","name":"size","parent":{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"},"declarations":[{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"}],"required":false,"type":{"name":"enum","raw":"\"medium\" | \"large\"","value":[{"value":"\"medium\""},{"value":"\"large\""}]}},"color":{"defaultValue":null,"description":"Sets the background of the tag. Not used if action is \"undo\". Default: blueberry","name":"color","parent":{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"},"declarations":[{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"}],"required":false,"type":{"name":"enum","raw":"TagColors","value":[{"value":"\"banana\""},{"value":"\"blueberry\""},{"value":"\"cherry\""},{"value":"\"kiwi\""},{"value":"\"neutral\""},{"value":"\"plum\""}]}},"svgIcon":{"defaultValue":null,"description":"Adds an icon to the tag. Not shown if action is set.","name":"svgIcon","parent":{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"},"declarations":[{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"}],"required":false,"type":{"name":"SvgIcon"}},"variant":{"defaultValue":null,"description":"","name":"variant","parent":{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"},"declarations":[{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"oncolor\" | \"emphasised\"","value":[{"value":"\"normal\""},{"value":"\"oncolor\""},{"value":"\"emphasised\""}]}},"action":{"defaultValue":null,"description":"","name":"action","parent":{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"},"declarations":[{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"}],"required":false,"type":{"name":"enum","raw":"\"remove\" | \"undo\"","value":[{"value":"\"remove\""},{"value":"\"undo\""}]}},"onClick":{"defaultValue":null,"description":"","name":"onClick","parent":{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"},"declarations":[{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"}],"required":false,"type":{"name":"(() => void)"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute on the expander button.","name":"testId","parent":{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"},"declarations":[{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"children":{"defaultValue":null,"description":"Sets the text of the tag","name":"children","parent":{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"},"declarations":[{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"},{"fileName":"s/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string & ReactNode"}},"size":{"defaultValue":null,"description":"Sets the size of the tag. Default: small","name":"size","parent":{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"},"declarations":[{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"}],"required":false,"type":{"name":"enum","raw":"\"medium\" | \"large\"","value":[{"value":"\"medium\""},{"value":"\"large\""}]}},"color":{"defaultValue":null,"description":"Sets the background of the tag. Not used if action is \"undo\". Default: blueberry","name":"color","parent":{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"},"declarations":[{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"}],"required":false,"type":{"name":"enum","raw":"TagColors","value":[{"value":"\"banana\""},{"value":"\"blueberry\""},{"value":"\"cherry\""},{"value":"\"kiwi\""},{"value":"\"neutral\""},{"value":"\"plum\""}]}},"svgIcon":{"defaultValue":null,"description":"Adds an icon to the tag. Not shown if action is set.","name":"svgIcon","parent":{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"},"declarations":[{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"}],"required":false,"type":{"name":"SvgIcon"}},"variant":{"defaultValue":null,"description":"","name":"variant","parent":{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"},"declarations":[{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"oncolor\" | \"emphasised\"","value":[{"value":"\"normal\""},{"value":"\"oncolor\""},{"value":"\"emphasised\""}]}},"action":{"defaultValue":null,"description":"","name":"action","parent":{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"},"declarations":[{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"}],"required":false,"type":{"name":"enum","raw":"\"remove\" | \"undo\"","value":[{"value":"\"remove\""},{"value":"\"undo\""}]}},"onClick":{"defaultValue":null,"description":"","name":"onClick","parent":{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"},"declarations":[{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"}],"required":false,"type":{"name":"(() => void)"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute on the expander button.","name":"testId","parent":{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"},"declarations":[{"fileName":"src/components/Tag/Tag.tsx","name":"TagProps"}],"required":false,"type":{"name":"string"}}}}

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";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};
+import n from"react";import u from"classnames";import{AnalyticsId as g,IconSize as p}from"../../constants.js";import{useHover as I}from"../../hooks/useHover.js";import{palette as v}from"../../theme/palette.js";import{Icon as f}from"../Icons/Icon.js";import y from"../Icons/Undo.js";import b from"../Icons/X.js";import e from"./styles.module.scss";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":g.Tag},s,n.createElement(f,{svgIcon:h(),size:p.XXSmall,color:v[`${o==="undo"?"blueberry":r}800`],isHovered:d}))},N=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":g.Tag},a&&n.createElement(f,{svgIcon:a,size:p.XXSmall,color:v[`${r}800`],className:e.tag__icon}),s)},B=N;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":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\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","Tag$1"],"mappings":"mbAaY,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,GAAM,EACrBW,EAAO,QAAQR,GAAQ,EACvBQ,EAAO,iBAAiB,EACxBR,IAAW,UAAY,CAACQ,EAAO,QAAQV,GAAO,EAAGU,EAAO,QAAQT,GAAS,CAAC,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,KAC9HjB,EACDgB,EAAA,cAACE,EAAA,CACC,QAASL,EAAc,EACvB,KAAMM,EAAS,QACf,MAAOC,EAAQ,GAAGhB,IAAW,OAAS,YAAcF,MAAU,EAC9D,UAAAM,CAAA,CAAA,CAEJ,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,GAAM,EAAGW,EAAO,QAAQV,GAAO,EAAGU,EAAO,QAAQT,GAAS,EAAG,CAC5G,CAACS,EAAO,eAAe,CAAC,EAAGU,CAAA,CAC5B,EAED,OAAIlB,GAAUC,EAEVW,EAAA,cAAClB,GAAU,KAAAG,EAAY,MAAAC,EAAc,QAAAC,EAAkB,OAAAC,EAAgB,QAAAC,EAAkB,OAAAC,GACtFN,CACH,EAKFgB,EAAA,cAAC,OAAK,CAAA,UAAWN,EAAY,cAAaJ,EAAQ,mBAAkBW,EAAY,GAC7E,EAAAK,GAAYN,EAAA,cAAAE,EAAA,CAAK,QAAAI,EAAkB,KAAMH,EAAS,QAAS,MAAOC,EAAQ,GAAGlB,MAAU,EAAG,UAAWU,EAAO,SAAW,CAAA,EACvHZ,CACH,CAEJ,EAEAuB,EAAeF"}