@helsenorge/designsystem-react 3.1.4 → 3.2.1-beta.1

package/components/ServiceMessage/styles.module.scss

@@ -7,6 +7,24 @@
 .service-message {
   font-family: 'Source Sans Pro', Arial, Verdana, sans-serif;
 
+  &__outer-wrapper {
+    &--success {
+      background-color: $kiwi50;
+    }
+
+    &--info {
+      background-color: $blueberry50;
+    }
+
+    &--warn {
+      background-color: $banana50;
+    }
+
+    &--alert {
+      background-color: $cherry50;
+    }
+  }
+
   &__wrapper {
     padding: getSpacer(3xs) getSpacer(xs);
 

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

@@ -11,6 +11,10 @@ export type Styles = {
   'service-message__icon--expander': string;
   'service-message__icon--signal': string;
   'service-message__label': string;
+  'service-message__outer-wrapper--alert': string;
+  'service-message__outer-wrapper--info': string;
+  'service-message__outer-wrapper--success': string;
+  'service-message__outer-wrapper--warn': string;
   'service-message__top-row': string;
   'service-message__top-row--container': string;
   'service-message__wrapper': string;

package/components/StatusDot/StatusDot.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
+export declare enum StatusDotModes {
+    onwhite = "onwhite",
+    ondark = "ondark"
+}
 export declare enum StatusDotVariant {
     info = "info",
     warning = "warning",
@@ -12,9 +16,14 @@ export declare enum StatusDotVariant {
     attachment = "attachment"
 }
 export interface StatusDotIconProps {
+    /** The variant defines style formatting and what icon to use */
     variant?: keyof typeof StatusDotVariant;
 }
 export interface StatusDotProps {
+    /** id that is placed on the wrapper */
+    id?: string;
+    /** Defines the color mode, onwhite, ondark etc. */
+    mode?: keyof typeof StatusDotModes;
     /** Visual variants for the statusdot */
     variant?: keyof typeof StatusDotVariant;
     /** Text placed to the right of the statusdot */

package/components/StatusDot/StatusDot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDot/StatusDot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,oBAAY,gBAAgB;IAC1B,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,SAAS,cAAc;IACvB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,UAAU,eAAe;CAC1B;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;CACzC;AAgBD,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;IACxC,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAuBvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"StatusDot.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDot/StatusDot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,oBAAY,cAAc;IACxB,OAAO,YAAY;IACnB,MAAM,WAAW;CAClB;AAED,oBAAY,gBAAgB;IAC1B,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,SAAS,cAAc;IACvB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,UAAU,eAAe;CAC1B;AAED,MAAM,WAAW,kBAAkB;IACjC,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;CACzC;AAgBD,MAAM,WAAW,cAAc;IAC7B,uCAAuC;IACvC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;IACxC,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2BvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/StatusDot/componentdata.json

@@ -1 +1 @@
-{"props":{"variant":{"defaultValue":null,"description":"Visual variants for the statusdot","name":"variant","parent":{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"},"declarations":[{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"}],"required":false,"type":{"name":"enum","raw":"\"info\" | \"warning\" | \"alert\" | \"cancelled\" | \"active\" | \"transparent\" | \"recurring\" | \"group\" | \"noaccess\" | \"attachment\"","value":[{"value":"\"info\""},{"value":"\"warning\""},{"value":"\"alert\""},{"value":"\"cancelled\""},{"value":"\"active\""},{"value":"\"transparent\""},{"value":"\"recurring\""},{"value":"\"group\""},{"value":"\"noaccess\""},{"value":"\"attachment\""}]}},"text":{"defaultValue":null,"description":"Text placed to the right of the statusdot","name":"text","parent":{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"},"declarations":[{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"}],"required":true,"type":{"name":"string"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"},"declarations":[{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"},"declarations":[{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"id":{"defaultValue":null,"description":"id that is placed on the wrapper","name":"id","parent":{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"},"declarations":[{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"}],"required":false,"type":{"name":"string"}},"mode":{"defaultValue":null,"description":"Defines the color mode, onwhite, ondark etc.","name":"mode","parent":{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"},"declarations":[{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ondark\"","value":[{"value":"\"onwhite\""},{"value":"\"ondark\""}]}},"variant":{"defaultValue":null,"description":"Visual variants for the statusdot","name":"variant","parent":{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"},"declarations":[{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"}],"required":false,"type":{"name":"enum","raw":"\"info\" | \"warning\" | \"alert\" | \"cancelled\" | \"active\" | \"transparent\" | \"recurring\" | \"group\" | \"noaccess\" | \"attachment\"","value":[{"value":"\"info\""},{"value":"\"warning\""},{"value":"\"alert\""},{"value":"\"cancelled\""},{"value":"\"active\""},{"value":"\"transparent\""},{"value":"\"recurring\""},{"value":"\"group\""},{"value":"\"noaccess\""},{"value":"\"attachment\""}]}},"text":{"defaultValue":null,"description":"Text placed to the right of the statusdot","name":"text","parent":{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"},"declarations":[{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"}],"required":true,"type":{"name":"string"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"},"declarations":[{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"},"declarations":[{"fileName":"src/components/StatusDot/StatusDot.tsx","name":"StatusDotProps"}],"required":false,"type":{"name":"string"}}}}

package/components/StatusDot/index.js

@@ -1,2 +1,2 @@
-import{S as o}from"../../StatusDot.js";import{a as j}from"../../StatusDot.js";import"react";import"classnames";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../constants.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Attachment.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"./styles.module.scss";export{j as StatusDotVariant,o as default};
+import{S as o}from"../../StatusDot.js";import{a as h,b as j}from"../../StatusDot.js";import"react";import"classnames";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../constants.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Attachment.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"./styles.module.scss";export{h as StatusDotModes,j as StatusDotVariant,o as default};
 //# sourceMappingURL=index.js.map

package/components/StatusDot/styles.module.scss

@@ -1,5 +1,7 @@
-@import '../../scss/palette';
+@use 'sass:map';
 @import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
 @import '../../scss/font-settings';
 @import '../../scss/screen-reader';
 
@@ -7,9 +9,14 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  font-size: $font-size-sm;
+  font-size: $font-size-xs;
+  line-height: $lineheight-size-xs;
   font-weight: 400;
-  line-height: $lineheight-size-sm;
+
+  @media (min-width: map.get($grid-breakpoints, sm)) {
+    font-size: $font-size-sm;
+    line-height: $lineheight-size-sm;
+  }
 
   &--cancelled {
     color: $cherry600;
@@ -56,5 +63,9 @@
     &--icon {
       margin-left: getSpacer(m);
     }
+
+    &--on-dark {
+      color: $white;
+    }
   }
 }

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

@@ -9,6 +9,7 @@ export type Styles = {
   'statusdot__dot--transparent': string;
   'statusdot__dot--warning': string;
   'statusdot__label--icon': string;
+  'statusdot__label--on-dark': string;
   'statusdot--cancelled': string;
 };
 

package/components/Step/componentdata.json

@@ -1 +1 @@
-{"props":{"stepper":{"defaultValue":null,"description":"Stepper viser fremdriften","name":"stepper","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<StepperProps, string | JSXElementConstructor<any>>"}},"children":{"defaultValue":null,"description":"Innhold i steget","name":"children","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},{"fileName":"s/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"backButton":{"defaultValue":null,"description":"Knapp for å gå tilbake. Vises med \"outline\" variant.","name":"backButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}},"forwardButton":{"defaultValue":null,"description":"Knapp for å gå videre. Vises med \"fill\" variant.","name":"forwardButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}},"additionalButtons":{"defaultValue":null,"description":"Ekstra knapper. Valgfritt utseende.","name":"additionalButtons","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>[]"}},"cancelButton":{"defaultValue":null,"description":"Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant.","name":"cancelButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}}}}
+{"props":{"stepper":{"defaultValue":null,"description":"Stepper viser fremdriften","name":"stepper","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<StepperProps, string | JSXElementConstructor<any>>"}},"children":{"defaultValue":null,"description":"Innhold i steget","name":"children","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"backButton":{"defaultValue":null,"description":"Knapp for å gå tilbake. Vises med \"outline\" variant.","name":"backButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}},"forwardButton":{"defaultValue":null,"description":"Knapp for å gå videre. Vises med \"fill\" variant.","name":"forwardButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}},"additionalButtons":{"defaultValue":null,"description":"Ekstra knapper. Valgfritt utseende.","name":"additionalButtons","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>[]"}},"cancelButton":{"defaultValue":null,"description":"Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant.","name":"cancelButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}}}}

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,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,CAwCjC,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,CA+CjC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/components/Table/TableBody/TableBody.d.ts

@@ -5,6 +5,6 @@ export interface Props {
     /** Sets the content of the table body. Use TableRows */
     children?: React.ReactNode;
 }
-export declare const TableBody: ({ className, children }: Props) => JSX.Element;
+export declare const TableBody: ({ className, children }: Props) => React.JSX.Element;
 export default TableBody;
 //# sourceMappingURL=TableBody.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableBody/TableBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,4BAA+C,KAAK,gBAEzE,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableBody/TableBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,4BAA+C,KAAK,sBAEzE,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -16,6 +16,6 @@ export interface Props {
     /** Sets the content of the table cell */
     children: React.ReactNode;
 }
-export declare const TableCell: ({ nowrap, textAlign, dataLabel, children, className }: Props) => JSX.Element;
+export declare const TableCell: ({ nowrap, textAlign, dataLabel, children, className }: Props) => React.JSX.Element;
 export default TableCell;
 //# sourceMappingURL=TableCell.d.ts.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;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"}
+{"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,sBAchI,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -13,6 +13,6 @@ export interface Props {
     /** Sets the content of the expanded row.  */
     children: React.ReactNode;
 }
-export declare const TableExpandedRow: ({ numberOfColumns, expanded, hideDetailsText, toggleClick, children, className, }: Props) => JSX.Element;
+export declare const TableExpandedRow: ({ numberOfColumns, expanded, hideDetailsText, toggleClick, children, className, }: Props) => React.JSX.Element;
 export default TableExpandedRow;
 //# sourceMappingURL=TableExpandedRow.d.ts.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;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"}
+{"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,sBAyBP,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export interface Props {
     /** Adds custom classes to the element. */
     className?: string;
@@ -11,6 +11,6 @@ export interface Props {
     /** Text for show button used for aria label. */
     showDetailsText: string;
 }
-export declare const TableExpanderCell: ({ expandableRowId, hideDetailsText, showDetailsText, expanded, className, }: Props) => JSX.Element;
+export declare const TableExpanderCell: ({ expandableRowId, hideDetailsText, showDetailsText, expanded, className, }: Props) => React.JSX.Element;
 export default TableExpanderCell;
 //# sourceMappingURL=TableExpanderCell.d.ts.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":";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"}
+{"version":3,"file":"TableExpanderCell.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableExpanderCell/TableExpanderCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,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,sBAgBP,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -12,6 +12,6 @@ export interface Props {
     /** Sets the content of the thead. Add table rows  */
     children: React.ReactNode;
 }
-export declare const TableHead: ({ category, className, children }: Props) => JSX.Element;
+export declare const TableHead: ({ category, className, children }: Props) => React.JSX.Element;
 export default TableHead;
 //# sourceMappingURL=TableHead.d.ts.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;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"}
+{"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,sBAYnF,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -15,6 +15,6 @@ export interface Props {
     /** Sets the content of the td element.  */
     children?: React.ReactNode;
 }
-export declare const TableHeadCell: ({ sortable, onClick, className, children, sortDir }: Props) => JSX.Element;
+export declare const TableHeadCell: ({ sortable, onClick, className, children, sortDir }: Props) => React.JSX.Element;
 export default TableHeadCell;
 //# sourceMappingURL=TableHeadCell.d.ts.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;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"}
+{"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,sBA0C7G,CAAC;AAEF,eAAe,aAAa,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":"s/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":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}}}}

package/components/Table/index.js

@@ -1,2 +1,2 @@
-import v,{useState as c,useRef as y,useEffect as w}from"react";import B from"classnames";import{Breakpoint as p,useBreakpoint as W}from"../../hooks/useBreakpoint.js";import{isTouchDevice as H}from"../../utils/device.js";import u from"./styles.module.scss";import{AnalyticsId as V}from"../../constants.js";import{useLayoutEvent as E}from"../../hooks/useLayoutEvent.js";import{H as S}from"../../HorizontalScroll.js";import{T as ut}from"../../TableBody.js";import{T as zt,a as Ct}from"../../TableCell.js";import{T as yt}from"../../TableExpandedRow.js";import{T as Wt}from"../../TableExpanderCell.js";import{H as Vt,T as Et}from"../../TableHead.js";import{S as At,T as Dt}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 A=t=>t.variant===o.centeredoverflow||t.variant===o.block,D=t=>u[`table--${t.variant}-${t.breakpoint}`],R=(t,a)=>p[t.breakpoint]-p[a.breakpoint],h=(t,a)=>p[t.breakpoint]>=a,U=(t,a)=>{if(Array.isArray(t))return t.sort(R),t.find(n=>h(n,a));if(t&&h(t,a))return t},F=(t,a,n,l)=>{const r=U(t,a),e=H(),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&&A(t)?D(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"}],kt=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"},{breakpoint:"sm",variant:"centeredoverflow",fallbackVariant:"block"}],vt=({id:t,testId:a,className:n,children:l,breakpointConfig:r=N})=>{const[e,i]=c(),[s,T]=c(0),[m,z]=c(window.innerWidth),f=y(null),d=W();w(()=>{i(F(r,d,s,m))},[r,d,s,m]),w(()=>{var k;((e==null?void 0:e.variant)==="centeredoverflow"||(e==null?void 0:e.variant)==="horizontalscroll")&&T(((k=f.current)==null?void 0:k.getBoundingClientRect().width)??0)},[e]),E(()=>z(window.innerWidth),["resize"],100);const C=I(e),x=B(u.table,C,n),b=v.createElement("table",{className:x,id:t,"data-testid":a,"data-analyticsid":V.Table,ref:f},l);return(e==null?void 0:e.variant)==="horizontalscroll"?v.createElement(S,{childWidth:s,testId:"horizontal-scroll"},b):b};export{Vt as HeaderCategory,o as ResponsiveTableVariant,At as SortDirection,vt as Table,ut as TableBody,zt as TableCell,yt as TableExpandedRow,Wt as TableExpanderCell,Et as TableHead,Dt as TableHeadCell,Ut as TableRow,Ct as TextAlign,vt as default,N as defaultConfig,kt as simpleConfig};
+import h,{useState as s,useRef as S,useEffect as T}from"react";import U from"classnames";import{Breakpoint as d,useBreakpoint as V}from"../../hooks/useBreakpoint.js";import{isTouchDevice as R}from"../../utils/device.js";import z from"./styles.module.scss";import{AnalyticsId as _}from"../../constants.js";import{useLayoutEvent as D}from"../../hooks/useLayoutEvent.js";import{H as A}from"../../HorizontalScroll.js";import{T as Wt}from"../../TableBody.js";import{T as Et,a as Ht}from"../../TableCell.js";import{T as Ut}from"../../TableExpandedRow.js";import{T as Rt}from"../../TableExpanderCell.js";import{H as Dt,T as At}from"../../TableHead.js";import{S as Nt,T as Ot}from"../../TableHeadCell.js";import{T as Pt}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 I=t=>t.variant===o.centeredoverflow||t.variant===o.block,N=t=>z[`table--${t.variant}-${t.breakpoint}`],O=(t,a)=>d[t.breakpoint]-d[a.breakpoint],u=(t,a)=>d[t.breakpoint]>=a,L=(t,a)=>{if(Array.isArray(t))return t.sort(O),t.find(n=>u(n,a));if(t&&u(t,a))return t},P=(t,a,n,c)=>{const e=L(t,a),r=R(),l=n<=c;if(e)return e.variant===o.centeredoverflow&&!l&&e.fallbackVariant===o.horizontalscroll?{variant:r?o.horizontalscroll:o.none,breakpoint:e.breakpoint}:e.variant===o.centeredoverflow&&!l&&e.fallbackVariant!==o.centeredoverflow?{variant:e.fallbackVariant??o.none,breakpoint:e.breakpoint}:e.variant===o.horizontalscroll&&!r&&e.fallbackVariant===o.centeredoverflow?{variant:l?o.centeredoverflow:o.none,breakpoint:e.breakpoint}:e.variant===o.horizontalscroll&&!r&&e.fallbackVariant!==o.horizontalscroll?{variant:e.fallbackVariant??o.none,breakpoint:e.breakpoint}:e},$=t=>t&&I(t)?N(t):void 0,F=(t,a)=>({left:`${(t-a)/2-8}px`});var o=(t=>(t.none="none",t.centeredoverflow="centeredoverflow",t.horizontalscroll="horizontalscroll",t.block="block",t))(o||{});const G=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"}],zt=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"},{breakpoint:"sm",variant:"centeredoverflow",fallbackVariant:"block"}],Ct=({id:t,testId:a,className:n,children:c,breakpointConfig:e=G})=>{const[r,l]=s(),[i,C]=s(0),[x,y]=s(0),[m,W]=s(window.innerWidth),p=S(null),f=V();T(()=>{l(P(e,f,i,m))},[e,f,i,m]),T(()=>{var v,k,w;((r==null?void 0:r.variant)==="centeredoverflow"||(r==null?void 0:r.variant)==="horizontalscroll")&&C(((v=p.current)==null?void 0:v.getBoundingClientRect().width)??0),(r==null?void 0:r.variant)==="centeredoverflow"&&y(((w=(k=p.current)==null?void 0:k.parentElement)==null?void 0:w.getBoundingClientRect().width)??0)},[r]),D(()=>W(window.innerWidth),["resize"],100);const B=(r==null?void 0:r.variant)==="centeredoverflow"?F(x,i):void 0,E=$(r),H=U(z.table,E,n),b=h.createElement("table",{className:H,id:t,"data-testid":a,"data-analyticsid":_.Table,ref:p,style:B},c);return(r==null?void 0:r.variant)==="horizontalscroll"?h.createElement(A,{childWidth:i,testId:"horizontal-scroll"},b):b};export{Dt as HeaderCategory,o as ResponsiveTableVariant,Nt as SortDirection,Ct as Table,Wt as TableBody,Et as TableCell,Ut as TableExpandedRow,Rt as TableExpanderCell,At as TableHead,Ot as TableHeadCell,Pt as TableRow,Ht as TextAlign,Ct as default,G as defaultConfig,zt 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 { 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    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","useLayoutEvent","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 React from 'react';\n\nimport { BreakpointConfig, ResponsiveTableVariant } from './Table';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string => styles[`table--${config.variant}-${config.breakpoint}`];\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra største til minste\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsDescending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    config.sort(sortByBreakpointsDescending);\n\n    return config.find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/**\n * Finn riktig posisjon for horisontal sentrering av tabell som skal vises \"centeredoverflow\"\n * @param parentWidth Bredde på element som tabellen ligger i\n * @param tableWidth Bredde på tabellen\n * @returns Styling som posisjonerer tabellen riktig\n */\nexport const getCenteredOverflowTableStyle = (parentWidth: number, tableWidth: number): React.CSSProperties => {\n  const COLUMN_GUTTER_WIDTH_PX = 8;\n\n  return { left: `${(parentWidth - tableWidth) / 2 - COLUMN_GUTTER_WIDTH_PX}px` };\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { 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 [parentWidth, setParentWidth] = 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    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n\n  const table = (\n    <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table} ref={tableRef} style={tableStyle}>\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","getCenteredOverflowTableStyle","parentWidth","defaultConfig","simpleConfig","Table","id","testId","className","children","currentConfig","setCurrentConfig","useState","setTableWidth","setParentWidth","setWindowWidth","tableRef","useRef","useBreakpoint","useEffect","_a","_c","_b","useLayoutEvent","tableStyle","breakpointClass","tableClass","classNames","table","React","AnalyticsId","HorizontalScroll"],"mappings":"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"}

package/components/Table/styles.module.scss

@@ -12,8 +12,6 @@ table tbody tr {
 
 @mixin centeredoverflow {
   position: relative;
-  left: 50%;
-  transform: translateX(-50%);
 }
 
 @mixin block {

package/components/Table/utils.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { BreakpointConfig } from './Table';
 import { Breakpoint } from '../../hooks/useBreakpoint';
 /**
@@ -14,4 +15,11 @@ export declare const getCurrentConfig: (config: BreakpointConfig | BreakpointCon
  * @returns Klassenavn
  */
 export declare const getBreakpointClass: (config?: BreakpointConfig) => string | undefined;
+/**
+ * Finn riktig posisjon for horisontal sentrering av tabell som skal vises "centeredoverflow"
+ * @param parentWidth Bredde på element som tabellen ligger i
+ * @param tableWidth Bredde på tabellen
+ * @returns Styling som posisjonerer tabellen riktig
+ */
+export declare const getCenteredOverflowTableStyle: (parentWidth: number, tableWidth: number) => React.CSSProperties;
 //# 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,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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Table/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,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;AAEzE;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B,gBAAiB,MAAM,cAAc,MAAM,KAAG,MAAM,aAI7F,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":"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"}}}}
+{"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"}}}}

package/components/Textarea/Textarea.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormMode } from '../../constants';
-interface TextareaProps extends Pick<React.InputHTMLAttributes<HTMLTextAreaElement>, 'autoFocus' | 'disabled' | 'name' | 'autoComplete' | 'placeholder' | 'readOnly' | 'required' | 'defaultValue' | 'onChange'> {
+interface TextareaProps extends Pick<React.InputHTMLAttributes<HTMLTextAreaElement>, 'aria-describedby' | 'autoFocus' | 'disabled' | 'name' | 'autoComplete' | 'placeholder' | 'readOnly' | 'required' | 'defaultValue' | 'onChange'> {
     /** max character limit in textarea  */
     maxCharacters?: number;
     /** The text is displayed in the end of the text-counter */
@@ -16,7 +16,7 @@ interface TextareaProps extends Pick<React.InputHTMLAttributes<HTMLTextAreaEleme
     /** Changes the visuals of the textarea */
     mode?: keyof typeof FormMode;
     /** Label of the input */
-    label?: string;
+    label?: React.ReactNode;
     /** id of the textarea */
     textareaId?: string;
     /** max rows */
@@ -27,10 +27,6 @@ interface TextareaProps extends Pick<React.InputHTMLAttributes<HTMLTextAreaEleme
     grow?: boolean;
     /** Error text to show above the component */
     errorText?: string;
-    /** Component shown after label */
-    afterLabelChildren?: React.ReactNode;
-    /** Component shown under label */
-    belowLabelChildren?: React.ReactNode;
 }
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default Textarea;

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,EAA2C,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAOpF,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,GAAG,UAAU,CAC3H;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,2FAmJZ,CAAC;AAIH,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;AAQpF,UAAU,aACR,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,EAC5C,kBAAkB,GAClB,WAAW,GACX,UAAU,GACV,MAAM,GACN,cAAc,GACd,aAAa,GACb,UAAU,GACV,UAAU,GACV,cAAc,GACd,UAAU,CACb;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,KAAK,CAAC,SAAS,CAAC;IACxB,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;CACpB;AAUD,QAAA,MAAM,QAAQ,2FAwIZ,CAAC;AAIH,eAAe,QAAQ,CAAC"}

package/components/Textarea/componentdata.json

@@ -1 +1 @@
-{"props":{"maxCharacters":{"defaultValue":null,"description":"max character limit in textarea","name":"maxCharacters","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"number"}},"maxText":{"defaultValue":null,"description":"The text is displayed in the end of the text-counter","name":"maxText","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"string"}},"width":{"defaultValue":null,"description":"Width of textarea in characters (approximate)","name":"width","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"number"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"string"}},"marginBottom":{"defaultValue":null,"description":"If true, the component will have a bottom margin.","name":"marginBottom","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"boolean"}},"transparent":{"defaultValue":null,"description":"If true, the component will be transparent.","name":"transparent","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"boolean"}},"mode":{"defaultValue":null,"description":"Changes the visuals of the textarea","name":"mode","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"ondark\""},{"value":"\"oninvalid\""}]}},"label":{"defaultValue":null,"description":"Label of the input","name":"label","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"string"}},"textareaId":{"defaultValue":null,"description":"id of the textarea","name":"textareaId","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"string"}},"maxRows":{"defaultValue":null,"description":"max rows","name":"maxRows","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"number"}},"minRows":{"defaultValue":null,"description":"min rows","name":"minRows","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"number"}},"grow":{"defaultValue":null,"description":"auto-grows until maxRows","name":"grow","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"boolean"}},"errorText":{"defaultValue":null,"description":"Error text to show above the component","name":"errorText","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"string"}},"afterLabelChildren":{"defaultValue":null,"description":"Component shown after label","name":"afterLabelChildren","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"ReactNode"}},"belowLabelChildren":{"defaultValue":null,"description":"Component shown under label","name":"belowLabelChildren","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"ReactNode"}},"autoFocus":{"defaultValue":null,"description":"","name":"autoFocus","parent":{"fileName":"s/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"s/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"disabled":{"defaultValue":null,"description":"","name":"disabled","parent":{"fileName":"s/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"s/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"name":{"defaultValue":null,"description":"","name":"name","parent":{"fileName":"s/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"s/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"autoComplete":{"defaultValue":null,"description":"","name":"autoComplete","parent":{"fileName":"s/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"s/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"placeholder":{"defaultValue":null,"description":"","name":"placeholder","parent":{"fileName":"s/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"s/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"readOnly":{"defaultValue":null,"description":"","name":"readOnly","parent":{"fileName":"s/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"s/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"required":{"defaultValue":null,"description":"","name":"required","parent":{"fileName":"s/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"s/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"defaultValue":{"defaultValue":null,"description":"","name":"defaultValue","parent":{"fileName":"s/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"s/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}},"onChange":{"defaultValue":null,"description":"","name":"onChange","parent":{"fileName":"s/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"s/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"ChangeEventHandler<HTMLTextAreaElement>"}}}}
+{"props":{"maxCharacters":{"defaultValue":null,"description":"max character limit in textarea","name":"maxCharacters","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"number"}},"maxText":{"defaultValue":null,"description":"The text is displayed in the end of the text-counter","name":"maxText","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"string"}},"width":{"defaultValue":null,"description":"Width of textarea in characters (approximate)","name":"width","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"number"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"string"}},"marginBottom":{"defaultValue":null,"description":"If true, the component will have a bottom margin.","name":"marginBottom","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"boolean"}},"transparent":{"defaultValue":null,"description":"If true, the component will be transparent.","name":"transparent","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"boolean"}},"mode":{"defaultValue":null,"description":"Changes the visuals of the textarea","name":"mode","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"ondark\""},{"value":"\"oninvalid\""}]}},"label":{"defaultValue":null,"description":"Label of the input","name":"label","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"ReactNode"}},"textareaId":{"defaultValue":null,"description":"id of the textarea","name":"textareaId","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"string"}},"maxRows":{"defaultValue":null,"description":"max rows","name":"maxRows","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"number"}},"minRows":{"defaultValue":null,"description":"min rows","name":"minRows","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"number"}},"grow":{"defaultValue":null,"description":"auto-grows until maxRows","name":"grow","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"boolean"}},"errorText":{"defaultValue":null,"description":"Error text to show above the component","name":"errorText","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"string"}},"aria-describedby":{"defaultValue":null,"description":"Identifies the element (or elements) that describes the object.\n@see aria-labelledby","name":"aria-describedby","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"autoFocus":{"defaultValue":null,"description":"","name":"autoFocus","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"disabled":{"defaultValue":null,"description":"","name":"disabled","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"name":{"defaultValue":null,"description":"","name":"name","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"autoComplete":{"defaultValue":null,"description":"","name":"autoComplete","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"placeholder":{"defaultValue":null,"description":"","name":"placeholder","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"readOnly":{"defaultValue":null,"description":"","name":"readOnly","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"required":{"defaultValue":null,"description":"","name":"required","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"defaultValue":{"defaultValue":null,"description":"","name":"defaultValue","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}},"onChange":{"defaultValue":null,"description":"","name":"onChange","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"ChangeEventHandler<HTMLTextAreaElement>"}}}}

package/components/Textarea/index.js

@@ -1,2 +1,2 @@
-import{T as t}from"../../Textarea.js";import"react";import"classnames";import"../../constants.js";import"../../uuid.js";import"../../utils/environment.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../../MaxCharacters.js";import"../MaxCharacters/styles.module.scss";import"./styles.module.scss";export{t as default};
+import{T as t}from"../../Textarea.js";import"react";import"classnames";import"../../constants.js";import"../../uuid.js";import"../../utils/environment.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../../Label.js";import"../../Spacer.js";import"../Spacer/styles.module.scss";import"../Label/styles.module.scss";import"../../utils/component.js";import"../../StatusDot.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Attachment.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../../MaxCharacters.js";import"../MaxCharacters/styles.module.scss";import"./styles.module.scss";export{t as default};
 //# sourceMappingURL=index.js.map

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

@@ -9,9 +9,6 @@ export type Styles = {
   'content-wrapper--on-dark': string;
   'content-wrapper--transparent': string;
   textarea: string;
-  'textarea__after-label-children': string;
-  'textarea__label-wrapper': string;
-  'textarea__label-wrapper--on-dark': string;
   'textarea--gutterBottom': string;
 };
 

package/components/Tooltip/TooltipWord/styles.module.scss

@@ -5,9 +5,12 @@
   all: unset;
   position: relative;
   display: inline-block;
-  text-decoration: underline 0.15rem dashed $plum400;
   cursor: help;
 
+  // bruker border istedet for text-decoration for å komme rundt text-decoraton-thickness begrensninger i safari
+  border-bottom: 0.2rem dotted $plum400;
+  line-height: 1.4rem;
+
   &:focus-visible {
     box-shadow: 0 0 0 getSpacer(4xs) $black;
     outline: none;