@helsenorge/designsystem-react 3.0.0 → 3.0.1

package/components/Stepper/styles.module.scss

@@ -1,13 +1,15 @@
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_spacers.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/_font-settings.scss';
+@use 'sass:map';
+@import '../../scss/breakpoints';
+@import '../../scss/spacers';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
 
 .stepper-wrapper {
   display: flex;
   align-items: center;
   min-height: getSpacer(l);
-  @media (min-width: map-get($grid-breakpoints, md)) {
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
     min-height: getSpacer(xl);
   }
 }
@@ -17,48 +19,50 @@ $transition: 0.4s linear 0s;
 /**
  * Bredde og høyde på markør
  */
-$markerSize: 24px;
+$marker-size: 24px;
 
 /**
  * Bredde og høyde på prikk
  */
-$dotSize: 8px;
+$dot-size: 8px;
 
 /**
  * Høyde på stepper
  */
-$stepperHeight: 12px;
+$stepper-height: 12px;
 
 /**
  * Horisontal padding på stepper
  */
-$stepperPaddingX: 8px;
+$stepper-padding-x: 8px;
 
 /**
  * Avstand fra venstre kant av stepper til midten av første prikk
  */
-$dotOffset: calc($stepperPaddingX + $dotSize / 2);
+$dot-offset: calc($stepper-padding-x + $dot-size / 2);
 
 .stepper {
   flex-grow: 1;
   position: relative;
   display: block;
-  height: $stepperHeight;
+  height: $stepper-height;
   border-radius: 4px;
-  background: linear-gradient(to right, $blueberry600, $blueberry600 $dotOffset, $blueberry50 $dotOffset, $blueberry50), $blueberry600;
+  background: linear-gradient(to right, $blueberry600, $blueberry600 $dot-offset, $blueberry50 $dot-offset, $blueberry50), $blueberry600;
   background-repeat: no-repeat;
+
   @media (prefers-reduced-motion: no-preference) {
     transition: background-position $transition;
   }
 
   &__marker {
     position: absolute;
-    width: $markerSize;
-    height: $markerSize;
-    top: calc(($stepperHeight - $markerSize) / 2);
+    width: $marker-size;
+    height: $marker-size;
+    top: calc(($stepper-height - $marker-size) / 2);
     background-color: $white;
     border: 6px solid $blueberry600;
     border-radius: 50%;
+
     @media (prefers-reduced-motion: no-preference) {
       transition: left $transition;
     }
@@ -76,22 +80,26 @@ $dotOffset: calc($stepperPaddingX + $dotSize / 2);
 
   &__dot {
     position: absolute;
-    top: calc(($stepperHeight - $dotSize) / 2);
-    width: $dotSize;
-    height: $dotSize;
+    top: calc(($stepper-height - $dot-size) / 2);
+    width: $dot-size;
+    height: $dot-size;
     background-color: $blueberry600;
     border-radius: 50%;
+
     @media (prefers-reduced-motion: no-preference) {
       transition: background-color $transition;
     }
+
     &--completed {
       background-color: $blueberry50;
     }
+
     &--left {
-      left: $dotOffset;
+      left: $dot-offset;
     }
+
     &--right {
-      right: $dotOffset;
+      right: $dot-offset;
     }
   }
 }

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,CAqCjC,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/index.js

@@ -1,2 +1,2 @@
-import v,{useState as c,useRef as y,useEffect as u}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 h 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 hr}from"../../TableBody.js";import{T as Tr,a as zr}from"../../TableCell.js";import{T as yr}from"../../TableExpandedRow.js";import{T as Wr}from"../../TableExpanderCell.js";import{H as Vr,T as Er}from"../../TableHead.js";import{S as Ar,T as gr}from"../../TableHeadCell.js";import{T as Rr}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=r=>r.variant===o.centeredoverflow||r.variant===o.block,g=r=>h[`table--${r.variant}-${r.breakpoint}`],D=(r,a)=>p[r.breakpoint]-p[a.breakpoint],w=(r,a)=>p[r.breakpoint]>=a,R=(r,a)=>{if(Array.isArray(r))return r.sort(D),r.find(n=>w(n,a));if(r&&w(r,a))return r},U=(r,a,n,l)=>{const t=R(r,a),e=H(),i=n<=l;if(t)return t.variant===o.centeredoverflow&&!i&&t.fallbackVariant===o.horizontalscroll?{variant:e?o.horizontalscroll:o.none,breakpoint:t.breakpoint}:t.variant===o.centeredoverflow&&!i&&t.fallbackVariant!==o.centeredoverflow?{variant:t.fallbackVariant??o.none,breakpoint:t.breakpoint}:t.variant===o.horizontalscroll&&!e&&t.fallbackVariant===o.centeredoverflow?{variant:i?o.centeredoverflow:o.none,breakpoint:t.breakpoint}:t.variant===o.horizontalscroll&&!e&&t.fallbackVariant!==o.horizontalscroll?{variant:t.fallbackVariant??o.none,breakpoint:t.breakpoint}:t},F=r=>r&&A(r)?g(r):void 0;var o=(r=>(r.none="none",r.centeredoverflow="centeredoverflow",r.horizontalscroll="horizontalscroll",r.block="block",r))(o||{});const I=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"}],kr=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"},{breakpoint:"sm",variant:"centeredoverflow",fallbackVariant:"block"}],vr=({id:r,testId:a,className:n,children:l,breakpointConfig:t=I})=>{const[e,i]=c(),[s,C]=c(0),[m,T]=c(window.innerWidth),f=y(null),d=W();u(()=>{i(U(t,d,s,m))},[t,d,s,m]),u(()=>{var k;(e==null?void 0:e.variant)==="centeredoverflow"&&C(((k=f.current)==null?void 0:k.getBoundingClientRect().width)??0)},[e]),E(()=>T(window.innerWidth),["resize"],100);const z=F(e),x=B(h.table,z,n),b=v.createElement("table",{className:x,id:r,"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{Vr as HeaderCategory,o as ResponsiveTableVariant,Ar as SortDirection,vr as Table,hr as TableBody,Tr as TableCell,yr as TableExpandedRow,Wr as TableExpanderCell,Er as TableHead,gr as TableHeadCell,Rr as TableRow,zr as TextAlign,vr as default,I as defaultConfig,kr as simpleConfig};
+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 { 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 (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\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":"i8CAWA,MAAMA,EAAiBC,GACrBA,EAAO,UAAYC,EAAuB,kBAAoBD,EAAO,UAAYC,EAAuB,MAOpGC,EAAoBF,GAAqCG,EAAO,UAAUH,EAAO,WAAWA,EAAO,YAAY,EAQ/GI,EAA8B,CAACC,EAAqBC,IACxDC,EAAWF,EAAE,UAAU,EAAIE,EAAWD,EAAE,UAAU,EAQ9CE,EAA8B,CAACR,EAA0BS,IAC7DF,EAAWP,EAAO,UAAU,GAAKS,EAQ7BC,EAAyB,CAACV,EAA+CS,IAAyD,CAClI,GAAA,MAAM,QAAQT,CAAM,EACtB,OAAAA,EAAO,KAAKI,CAA2B,EAEhCJ,EAAO,KAAKW,GAAKH,EAA4BG,EAAGF,CAAU,CAAC,EACzD,GAAAT,GAAUQ,EAA4BR,EAAQS,CAAU,EAC1D,OAAAT,CAEX,EASaY,EAAmB,CAC9BZ,EACAS,EACAI,EACAC,IAC0D,CACpD,MAAAC,EAAmBL,EAAuBV,EAAQS,CAAU,EAC5DO,EAAyBC,IACzBC,EAAyBL,GAAcC,EAE7C,GAAKC,EAKH,OAAAA,EAAiB,UAAYd,EAAuB,kBACpD,CAACiB,GACDH,EAAiB,kBAAoBd,EAAuB,iBAErD,CACL,QAASe,EAAyBf,EAAuB,iBAAmBA,EAAuB,KACnG,WAAYc,EAAiB,UAAA,EAK/BA,EAAiB,UAAYd,EAAuB,kBACpD,CAACiB,GACDH,EAAiB,kBAAoBd,EAAuB,iBAErD,CACL,QAASc,EAAiB,iBAAmBd,EAAuB,KACpE,WAAYc,EAAiB,UAAA,EAK/BA,EAAiB,UAAYd,EAAuB,kBACpD,CAACe,GACDD,EAAiB,kBAAoBd,EAAuB,iBAErD,CACL,QAASiB,EAAyBjB,EAAuB,iBAAmBA,EAAuB,KACnG,WAAYc,EAAiB,UAAA,EAK/BA,EAAiB,UAAYd,EAAuB,kBACpD,CAACe,GACDD,EAAiB,kBAAoBd,EAAuB,iBAErD,CACL,QAASc,EAAiB,iBAAmBd,EAAuB,KACpE,WAAYc,EAAiB,UAAA,EAI1BA,CACT,EAOaI,EAAsBnB,GACjCA,GAAUD,EAAcC,CAAM,EAAIE,EAAiBF,CAAM,EAAI,OCrHnD,IAAAC,GAAAA,IAEVA,EAAA,KAAO,OAEPA,EAAA,iBAAmB,mBAEnBA,EAAA,iBAAmB,mBAEnBA,EAAA,MAAQ,QAREA,IAAAA,GAAA,CAAA,CAAA,EAiCL,MAAMmB,EAAoC,CAC/C,CACE,WAAY,KACZ,QAAS,mBACT,gBAAiB,kBACnB,CACF,EAEaC,GAAmC,CAC9C,CACE,WAAY,KACZ,QAAS,mBACT,gBAAiB,kBACnB,EACA,CACE,WAAY,KACZ,QAAS,mBACT,gBAAiB,OACnB,CACF,EAEaC,GAAyB,CAAC,CAAE,GAAAC,EAAI,OAAAC,EAAQ,UAAAC,EAAW,SAAAC,EAAU,iBAAAX,EAAmBK,KAAoB,CAC/G,KAAM,CAACO,EAAeC,CAAgB,EAAIC,EAA2B,EAC/D,CAAChB,EAAYiB,CAAa,EAAID,EAAiB,CAAC,EAChD,CAACf,EAAaiB,CAAc,EAAIF,EAAS,OAAO,UAAU,EAC1DG,EAAWC,EAAyB,IAAI,EACxCxB,EAAayB,IAEnBC,EAAU,IAAM,CACdP,EAAiBhB,EAAiBG,EAAkBN,EAAYI,EAAYC,CAAW,CAAC,GACvF,CAACC,EAAkBN,EAAYI,EAAYC,CAAW,CAAC,EAE1DqB,EAAU,IAAM,QACVR,GAAA,YAAAA,EAAe,WAAY,oBAC7BG,IAAcM,EAAAJ,EAAS,UAAT,YAAAI,EAAkB,wBAAwB,QAAS,CAAC,CACpE,EACC,CAACT,CAAa,CAAC,EAEHU,EAAA,IAAMN,EAAe,OAAO,UAAU,EAAG,CAAC,QAAQ,EAAG,GAAG,EAEjE,MAAAO,EAAkBnB,EAAmBQ,CAAa,EAClDY,EAAaC,EAAWrC,EAAO,MAAOmC,EAAiBb,CAAS,EAEhEgB,EACJC,EAAA,cAAC,QAAM,CAAA,UAAWH,EAAY,GAAAhB,EAAQ,cAAaC,EAAQ,mBAAkBmB,EAAY,MAAO,IAAKX,GAClGN,CACH,EAGE,OAAAC,GAAA,YAAAA,EAAe,WAAY,mCAE1BiB,EAAiB,CAAA,WAAY/B,EAAY,OAAO,qBAC9C4B,CACH,EAIGA,CACT"}
+{"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/Tag/styles.module.scss

@@ -1,7 +1,8 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/_font-settings.scss';
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
 
 /**
 * Konverter en gjennomsiktig farge til en ugjennomsiktig farge ved å simulere fargen plassert
@@ -20,6 +21,7 @@
 
 .tag {
   $tag: &;
+
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
@@ -27,13 +29,14 @@
   border-width: 1px;
   border-style: solid;
   background-color: transparent;
+
   // komponenten bruker ekstra liten font-size og line-height
   font-size: 0.875rem;
   line-height: 1.125rem;
   font-weight: 600;
   border-radius: 100px;
 
-  @media (min-width: map-get($grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: $font-size-xs;
     line-height: 1.25rem;
   }
@@ -46,20 +49,20 @@
     &--#{$color}[type='button'] {
       // banana og kiwi har unntak fra hovedregelen
       @if $color == 'banana' {
-        color: map-get($palette-map, #{$color}900);
-        border-color: map-get($palette-map, #{$color}300);
+        color: map.get($palette-map, #{$color}900);
+        border-color: map.get($palette-map, #{$color}300);
       } @else if $color == 'kiwi' {
-        color: map-get($palette-map, #{$color}900);
-        border-color: map-get($palette-map, #{$color}200);
+        color: map.get($palette-map, #{$color}900);
+        border-color: map.get($palette-map, #{$color}200);
       } @else {
-        color: map-get($palette-map, #{$color}800);
-        border-color: map-get($palette-map, #{$color}200);
+        color: map.get($palette-map, #{$color}800);
+        border-color: map.get($palette-map, #{$color}200);
       }
 
       &#{$tag}--normal {
         &#{$tag}--has-action {
           &:hover {
-            background-color: rgba-to-rgb(rgba(map-get($palette-map, #{$color}200), 0.2));
+            background-color: rgba-to-rgb(rgba(map.get($palette-map, #{$color}200), 0.2));
           }
         }
       }
@@ -68,29 +71,30 @@
         background-color: transparent;
         &#{$tag}--has-action {
           &:hover {
-            background-color: map-get($palette-map, #{$color}100);
-            border-color: map-get($palette-map, #{$color}100);
+            background-color: map.get($palette-map, #{$color}100);
+            border-color: map.get($palette-map, #{$color}100);
           }
+
           &:focus {
             background-color: $white;
             border-color: $white;
-            box-shadow: 0px 0px 0px 3px $black;
+            box-shadow: 0 0 0 3px $black;
           }
         }
       }
 
       &#{$tag}--emphasised {
         @if $color == 'banana' {
-          background-color: rgba-to-rgb(rgba(map-get($palette-map, #{$color}300), 0.4));
+          background-color: rgba-to-rgb(rgba(map.get($palette-map, #{$color}300), 0.4));
         } @else {
-          background-color: rgba-to-rgb(rgba(map-get($palette-map, #{$color}200), 0.4));
+          background-color: rgba-to-rgb(rgba(map.get($palette-map, #{$color}200), 0.4));
         }
         &#{$tag}--has-action {
           &:hover {
             @if $color == 'banana' {
-              background-color: rgba-to-rgb(rgba(map-get($palette-map, #{$color}300), 0.5));
+              background-color: rgba-to-rgb(rgba(map.get($palette-map, #{$color}300), 0.5));
             } @else {
-              background-color: rgba-to-rgb(rgba(map-get($palette-map, #{$color}200), 0.5));
+              background-color: rgba-to-rgb(rgba(map.get($palette-map, #{$color}200), 0.5));
             }
           }
         }
@@ -101,16 +105,18 @@
   &--has-action[type='button'] {
     cursor: pointer;
     font-family: inherit;
+
     &:focus {
       outline: none;
       border-color: $black;
-      box-shadow: inset 0px 0px 0px 2px $black;
+      box-shadow: inset 0 0 0 2px $black;
     }
     &#{$tag}--undo {
       color: $blueberry800;
       background-color: $blueberry100;
       border-color: $blueberry100;
       text-decoration: line-through;
+
       &:hover {
         background-color: $white;
         border-color: $blueberry200;
@@ -122,20 +128,22 @@
     padding: 0 getSpacer(xs);
     min-height: 26px;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       min-height: 30px;
     }
 
     &#{$tag}--has-icon {
       padding: 0 getSpacer(xs) 0 6px;
-      @media (min-width: map-get($grid-breakpoints, md)) {
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
         padding: getSpacer(4xs) getSpacer(xs) getSpacer(4xs) 6px;
       }
     }
 
     &#{$tag}--has-action {
       padding: 0 getSpacer(3xs) 0 getSpacer(xs);
-      @media (min-width: map-get($grid-breakpoints, md)) {
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
         padding: getSpacer(4xs) getSpacer(3xs) getSpacer(4xs) getSpacer(xs);
       }
     }
@@ -144,31 +152,35 @@
       margin-right: getSpacer(4xs);
     }
   }
+
   &--large {
     padding: 0 getSpacer(xs);
     min-height: 30px;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       min-height: 34px;
     }
 
     &#{$tag}--has-icon {
       padding: getSpacer(4xs) getSpacer(xs) getSpacer(4xs) 6px;
-      @media (min-width: map-get($grid-breakpoints, md)) {
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
         padding: getSpacer(3xs) getSpacer(xs) getSpacer(3xs) getSpacer(2xs);
       }
     }
 
     &#{$tag}--has-action {
       padding: getSpacer(4xs) getSpacer(3xs) getSpacer(4xs) getSpacer(xs);
-      @media (min-width: map-get($grid-breakpoints, md)) {
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
         padding: getSpacer(3xs) getSpacer(2xs) getSpacer(3xs) getSpacer(xs);
       }
     }
 
     #{$tag}__icon {
       margin-right: getSpacer(4xs);
-      @media (min-width: map-get($grid-breakpoints, md)) {
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
         margin-right: getSpacer(3xs);
       }
     }

package/components/TagList/styles.module.scss

@@ -1,6 +1,6 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
 
 .tag-list {
   all: unset;

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,2FAkJZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAA2C,QAAQ,EAAE,MAAM,iBAAiB,CAAC;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"}

package/components/Textarea/styles.module.scss

@@ -1,8 +1,8 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/_font-settings.scss';
-@import '../../scss/_input.scss';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+@import '../../scss/input';
 
 .textarea {
   @include input-wrapper;
@@ -14,6 +14,7 @@
 
 .content-wrapper {
   @include content-wrapper;
+
   &__input {
     line-height: 28px;
     height: auto;