@helsenorge/designsystem-react 3.0.0 → 3.0.1

package/components/PopMenu/styles.module.scss

@@ -1,5 +1,7 @@
-@import '../../scss/_palette.scss';
-@import '../../scss/_breakpoints.scss';
+@use 'sass:map';
+@import '../../scss/palette';
+@import '../../scss/breakpoints';
+
 .pop-menu-button {
   padding: 0;
   border: 0;
@@ -16,15 +18,17 @@
     box-shadow: none;
     outline: none;
   }
+
   :focus > .pop-menu-button {
     box-shadow: none;
   }
 }
 
-//overrides
+// overrides
 :focus > .pop-menu-button:hover {
   box-shadow: none;
 }
+
 html :focus > .pop-menu-button {
   box-shadow: none;
   border: solid;
@@ -34,66 +38,81 @@ html :focus > .pop-menu-button {
   &:focus {
     background-color: transparent;
   }
+
   &:active {
     background-color: $neutral50;
     border: none;
   }
+
   &:hover {
     background-color: $neutral50;
   }
+
   &:active:hover {
     background-color: transparent;
   }
+
   &:active:focus {
     background-color: $neutral50;
     border: 0.1875rem solid $black;
   }
 }
+
 .pop-menu-button--on-gray {
   &:focus {
     background-color: transparent;
   }
+
   &:active {
     background-color: $neutral100;
     border: none;
   }
+
   &:hover {
     background-color: $neutral100;
   }
+
   &:active:hover {
     background-color: transparent;
   }
+
   &:active:focus {
     background-color: $neutral100;
     border: 0.1875rem solid $black;
   }
 }
+
 .pop-menu-button--on-blueberry {
   &:focus {
     background-color: transparent;
   }
+
   &:active {
     background-color: $blueberry100;
     border: none;
   }
+
   &:hover {
     background-color: $blueberry100;
   }
+
   &:active:hover {
     background-color: transparent;
   }
+
   &:active:focus {
     background-color: $blueberry100;
     border: 0.1875rem solid $black;
   }
 }
+
 .pop-menu__pop-over {
   width: 20.875rem;
   width: 26.125rem;
-  border: 0.125rem solid rgb(24, 128, 151);
-  box-shadow: 0px 0px 0.3125rem 0px rgba(0, 0, 0, 0.5);
+  border: 0.125rem solid rgb(24 128 151);
+  box-shadow: 0 0 0.3125rem 0 rgb(0 0 0 / 50%);
 
-  @media (min-width: map-get($grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     width: 26.125rem;
   }
 
@@ -104,6 +123,7 @@ html :focus > .pop-menu-button {
       border-top-right-radius: 0.5625rem;
     }
   }
+
   li:last-of-type {
     a:hover,
     a:focus {
@@ -112,6 +132,7 @@ html :focus > .pop-menu-button {
     }
   }
 }
+
 .pop-menu__pop-over-arrow {
-  filter: drop-shadow(0px -0.185rem 0px rgb(24, 128, 151));
+  filter: drop-shadow(0 -0.185rem 0 rgb(24 128 151));
 }

package/components/PopOver/PopOver.d.ts

@@ -14,18 +14,20 @@ export interface PopOverProps {
     controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;
     /** Ref for the element the PopOver is placed upon */
     popOverRef?: React.RefObject<HTMLDivElement>;
+    /** Show the popover. Only applies when role=tooltip. Default: false. */
+    show?: boolean;
     /** Adds custom classes to the element. */
     className?: string;
     /** Adds custom classes to the arrow element. */
     arrowClassName?: string;
     /** Determines the placement of the popover. Default: automatic positioning. */
     variant?: keyof typeof PopOverVariant;
-    /** Sets role of the PopOver element. If set to "tooltip",  */
+    /** Sets role of the PopOver element */
     role?: PopOverRole;
+    /** Closes popover on click outside the bubble. */
+    closeOnClickOutside?: boolean;
     /** Sets the data-testid attribute. */
     testId?: string;
-    /** Closes bubble on click outside the bubble. */
-    closeOnClickOutside?: boolean;
 }
 declare const PopOver: React.ForwardRefExoticComponent<PopOverProps & React.RefAttributes<HTMLDivElement | SVGSVGElement>>;
 export default PopOver;

package/components/PopOver/PopOver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopOver.d.ts","sourceRoot":"","sources":["../../../src/components/PopOver/PopOver.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAc3D,oBAAY,cAAc;IACxB,iBAAiB,sBAAsB;IACvC,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC;AAEpC,MAAM,WAAW,YAAY;IAC3B,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sHAAsH;IACtH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qDAAqD;IACrD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,aAAa,CAAC,CAAC;IAC5D,qDAAqD;IACrD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC7C,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACtC,8DAA8D;IAC9D,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,QAAA,MAAM,OAAO,qGA8DX,CAAC;AAIH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"PopOver.d.ts","sourceRoot":"","sources":["../../../src/components/PopOver/PopOver.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAc3D,oBAAY,cAAc;IACxB,iBAAiB,sBAAsB;IACvC,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC;AAEpC,MAAM,WAAW,YAAY;IAC3B,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sHAAsH;IACtH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qDAAqD;IACrD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,aAAa,CAAC,CAAC;IAC5D,qDAAqD;IACrD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC7C,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACtC,uCAAuC;IACvC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,kDAAkD;IAClD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,OAAO,qGA2DX,CAAC;AAIH,eAAe,OAAO,CAAC"}

package/components/PopOver/componentdata.json

@@ -1 +1 @@
-{"props":{"id":{"defaultValue":null,"description":"Id of the PopOver","name":"id","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements.","name":"children","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":true,"type":{"name":"ReactNode"}},"controllerRef":{"defaultValue":null,"description":"Ref for the element the PopOver is placed upon","name":"controllerRef","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":true,"type":{"name":"RefObject<HTMLElement | SVGSVGElement>"}},"popOverRef":{"defaultValue":null,"description":"Ref for the element the PopOver is placed upon","name":"popOverRef","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"RefObject<HTMLDivElement>"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"string"}},"arrowClassName":{"defaultValue":null,"description":"Adds custom classes to the arrow element.","name":"arrowClassName","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"string"}},"variant":{"defaultValue":null,"description":"Determines the placement of the popover. Default: automatic positioning.","name":"variant","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"enum","raw":"\"positionautomatic\" | \"positionbelow\" | \"positionabove\"","value":[{"value":"\"positionautomatic\""},{"value":"\"positionbelow\""},{"value":"\"positionabove\""}]}},"role":{"defaultValue":null,"description":"Sets role of the PopOver element. If set to \"tooltip\",","name":"role","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"enum","raw":"\"tooltip\"","value":[{"value":"\"tooltip\""}]}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"string"}},"closeOnClickOutside":{"defaultValue":null,"description":"Closes bubble on click outside the bubble.","name":"closeOnClickOutside","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"boolean"}}}}
+{"props":{"id":{"defaultValue":null,"description":"Id of the PopOver","name":"id","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements.","name":"children","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":true,"type":{"name":"ReactNode"}},"controllerRef":{"defaultValue":null,"description":"Ref for the element the PopOver is placed upon","name":"controllerRef","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":true,"type":{"name":"RefObject<HTMLElement | SVGSVGElement>"}},"popOverRef":{"defaultValue":null,"description":"Ref for the element the PopOver is placed upon","name":"popOverRef","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"RefObject<HTMLDivElement>"}},"show":{"defaultValue":null,"description":"Show the popover. Only applies when role=tooltip. Default: false.","name":"show","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"boolean"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"string"}},"arrowClassName":{"defaultValue":null,"description":"Adds custom classes to the arrow element.","name":"arrowClassName","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"string"}},"variant":{"defaultValue":null,"description":"Determines the placement of the popover. Default: automatic positioning.","name":"variant","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"enum","raw":"\"positionautomatic\" | \"positionbelow\" | \"positionabove\"","value":[{"value":"\"positionautomatic\""},{"value":"\"positionbelow\""},{"value":"\"positionabove\""}]}},"role":{"defaultValue":null,"description":"Sets role of the PopOver element","name":"role","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"enum","raw":"\"tooltip\"","value":[{"value":"\"tooltip\""}]}},"closeOnClickOutside":{"defaultValue":null,"description":"Closes popover on click outside the bubble.","name":"closeOnClickOutside","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"boolean"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"string"}}}}

package/components/PopOver/styles.module.scss

@@ -1,11 +1,13 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/_font-settings.scss';
-@import '../AnchorLink/styles.module.scss';
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+@import '../AnchorLink/styles.module';
 
 .popover {
   $popover: &;
+
   display: flex;
   position: fixed;
   align-items: flex-start !important;
@@ -32,9 +34,9 @@
 
   border: getSpacer(4xs) solid $plum600;
   border-radius: 0.5625rem;
-  box-shadow: 0 0.125rem 1.125rem 0 rgba(0, 0, 0, 0.15);
+  box-shadow: 0 0.125rem 1.125rem 0 rgb(0 0 0 / 15%);
 
-  @media (min-width: map-get($grid-breakpoints, lg)) {
+  @media (min-width: map.get($grid-breakpoints, lg)) {
     font-size: $font-size-md;
     line-height: $lineheight-size-md;
   }
@@ -48,16 +50,17 @@
     z-index: 3;
 
     &--over {
-      border-width: 0.625rem 0.625rem;
+      border-width: 0.625rem;
       border-bottom-color: $white;
-      -webkit-filter: drop-shadow($plum600 0px 0.125rem 0.375rem 0.125rem);
-      filter: drop-shadow(0px -0.185rem 0px $plum600);
+      filter: drop-shadow($plum600 0 0.125rem 0.375rem 0.125rem);
+      filter: drop-shadow(0 -0.185rem 0 $plum600);
     }
+
     &--under {
-      border-width: 0.625rem 0.625rem;
+      border-width: 0.625rem;
       border-top-color: $white;
-      -webkit-filter: drop-shadow($plum600 0px 0.125rem 0.375rem 0.125rem);
-      filter: drop-shadow(0px 0.2rem 0px $plum600);
+      filter: drop-shadow($plum600 0 0.125rem 0.375rem 0.125rem);
+      filter: drop-shadow(0 0.2rem 0 $plum600);
     }
   }
 }

package/components/RadioButton/RadioButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAe,QAAQ,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAKrE,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,gBAAgB,GAAG,UAAU,CAAC;IACxH,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,oHAAoH;IACpH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,2FAoEtB,CAAC;AAEH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAe,QAAQ,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAKrE,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,gBAAgB,GAAG,UAAU,CAAC;IACxH,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,oHAAoH;IACpH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,2FAmEtB,CAAC;AAIH,eAAe,WAAW,CAAC"}

package/components/RadioButton/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';
 
 .radio-button-errors {
   font-size: $font-size-sm;
@@ -20,7 +21,7 @@
     margin-left: -0.75rem;
     border-left: 0.25rem solid $cherry600;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       padding: getSpacer(s) getSpacer(m) getSpacer(l);
     }
   }
@@ -49,7 +50,7 @@
   font-size: $font-size-sm;
   line-height: $lineheight-size-sm;
 
-  @media (min-width: map-get($grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: $font-size-md;
   }
 
@@ -83,7 +84,7 @@
     background-color: $white;
   }
 
-  @media (min-width: map-get($grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     &--bigform {
       padding: 1.68rem getSpacer(l);
     }
@@ -91,10 +92,7 @@
 }
 
 .radio-button {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  -o-appearance: none;
-
+  appearance: none;
   cursor: pointer;
   display: flex;
   justify-content: center;
@@ -191,8 +189,8 @@
 
   &--disabled {
     cursor: default;
-
     color: $neutral400;
+
     &:checked {
       color: $neutral400;
 
@@ -201,6 +199,7 @@
         background-color: transparent;
       }
     }
+
     &:hover {
       box-shadow: 0 0 0 getSpacer(4xs);
       background-color: transparent;
@@ -235,6 +234,7 @@
     background-color: $cherry600;
   }
 }
+
 /******** RESET *********/
 @mixin reset-radio-button() {
   border: 0;
@@ -253,8 +253,6 @@
     font-weight: 400;
     margin: 0;
     word-break: break-word;
-    -webkit-hyphens: auto;
-    -ms-hyphens: auto;
     hyphens: auto;
   }
 }

package/components/Select/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';
 
 .select-wrapper {
   display: flex;
@@ -15,7 +16,7 @@
     font-weight: 600;
     padding-bottom: getSpacer(xs);
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       line-height: getSpacer(l);
       font-size: $font-size-md;
     }
@@ -35,6 +36,7 @@
   display: inline-grid;
   background-color: $white;
   align-items: center;
+
   // Andre kolonne her styrer plassering av select ikonet
   grid-template-columns: 1fr 2.8rem;
 
@@ -45,16 +47,19 @@
   &:hover {
     background: $neutral50;
   }
+
   &--on-blueberry {
     &:hover {
       background-color: $blueberry50;
     }
   }
+
   &--invalid {
     &:hover {
       background-color: $cherry50;
     }
   }
+
   &--disabled {
     background: $neutral50;
 
@@ -67,7 +72,6 @@
 .select {
   /* Pil fjernes for browsere utenom IE */
   appearance: none;
-
   height: 2.5rem;
   align-items: center;
   background-color: transparent;
@@ -82,7 +86,7 @@
   line-height: $lineheight-size-sm;
   border-radius: 0;
 
-  @media (min-width: map-get($grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     height: 3.125rem;
     font-size: $font-size-md;
   }
@@ -90,6 +94,7 @@
   &--on-blueberry {
     outline-color: $blueberry500;
   }
+
   &--invalid {
     outline-color: $cherry600;
   }
@@ -98,6 +103,7 @@
     outline-width: 3px;
     outline-offset: -1px;
   }
+
   &:focus {
     outline: $black solid 4px;
     outline-offset: -2px;
@@ -113,7 +119,7 @@
     font-family: inherit;
     font-size: $font-size-sm;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       font-size: $font-size-md;
     }
   }

package/components/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA4B3D,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAOD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA4KxC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA4B3D,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAOD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8KxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/components/Slider/index.js

@@ -1,2 +1,2 @@
-import s,{useState as b,useRef as D,useEffect as h}from"react";import P from"classnames";import{AnalyticsId as j}from"../../constants.js";import{useSize as M}from"../../hooks/useSize.js";import{useUuid as g}from"../../hooks/useUuid.js";import{getAriaLabelAttributes as C}from"../../utils/accessibility.js";import{T as K}from"../../Title.js";import i from"./styles.module.scss";import"../../utils/debounce.js";import"../../uuid.js";import"../../utils/environment.js";import"../Title/styles.module.scss";const W=(a,k,c)=>{const[u,r]=b(a);return[u,f=>{f>c?r(c):f<k?r(k):r(f)}]},m=100,d=0,N=1,V=10,$=({title:a,ariaLabel:k,labelLeft:c,labelRight:u,disabled:r=!1,onChange:E,testId:f})=>{const[L,S]=b(!1),[n,o]=W((m-d)/2,d,m),p=g(),w=g(),_=g(),A=D(null),v=D(null),{width:y}=M(A)||{width:0},{width:U}=M(v)||{width:0};h(()=>{const e=()=>{S(!1)};return document.addEventListener("pointerup",e),()=>{document.removeEventListener("pointerup",e)}},[]);const I=e=>{var l;const t=((l=A.current)==null?void 0:l.getBoundingClientRect().x)??0;return Math.round((e-t)/y*(m-d))};h(()=>{const e=t=>{if(!r&&L){const l=I(t.clientX);o(l)}};return document.addEventListener("pointermove",e),()=>{document.removeEventListener("pointermove",e)}},[L]),h(()=>{!r&&E&&E(n)},[n]);const R=e=>{if(r)return;let t=!1;switch(e.key){case"ArrowLeft":case"ArrowDown":o(n-N),t=!0;break;case"PageDown":o(n-V),t=!0;break;case"ArrowRight":case"ArrowUp":o(n+N),t=!0;break;case"PageUp":o(n+V),t=!0;break;case"Home":o(d),t=!0;break;case"End":o(m),t=!0;break}t&&(e.preventDefault(),e.stopPropagation())},T=e=>{var l;if(r)return;const t=I(e.clientX);o(t),(l=v.current)==null||l.focus()},x=e=>{var t;r||(S(!0),e.preventDefault(),e.stopPropagation(),(t=v.current)==null||t.focus())},B=(y-U)/(m-d)*n,X=C({label:k,id:(()=>{if(a&&c&&u)return[p,w,_].join(" ");if(a&&c)return[p,w].join(" ");if(a&&u)return[p,_].join(" ");if(a)return p})(),prefer:"label"});return s.createElement("div",{className:i.slider,"data-testid":f,"data-analyticsid":j.Slider},a&&s.createElement(K,{htmlMarkup:"h3",margin:1.5,appearance:"title3",id:p},a),s.createElement("div",{ref:A,className:P(i["slider__track-wrapper"],r&&i["slider__track-wrapper--disabled"]),onClick:T,onPointerDown:x},s.createElement("div",{className:P(i.slider__track,r&&i["slider__track--disabled"])}),s.createElement("div",{role:"slider",ref:v,className:P(i.slider__marker,r&&i["slider__marker--disabled"]),style:{left:`${B}px`},onKeyDown:R,"aria-valuenow":n,"aria-valuemin":d,"aria-valuemax":m,tabIndex:r?void 0:0,"aria-disabled":r,...X})),(c||u)&&s.createElement("span",{className:i.slider__options},s.createElement("span",{id:w},c),s.createElement("span",{id:_},u)))},ae=$;export{$ as Slider,ae as default};
+import s,{useState as b,useRef as D,useEffect as h}from"react";import P from"classnames";import{AnalyticsId as j}from"../../constants.js";import{useSize as M}from"../../hooks/useSize.js";import{useUuid as g}from"../../hooks/useUuid.js";import{getAriaLabelAttributes as C}from"../../utils/accessibility.js";import{T as K}from"../../Title.js";import i from"./styles.module.scss";import"../../utils/debounce.js";import"../../uuid.js";import"../../utils/environment.js";import"../Title/styles.module.scss";const W=(n,k,c)=>{const[u,r]=b(n);return[u,f=>{f>c?r(c):f<k?r(k):r(f)}]},m=100,d=0,N=1,V=10,$=({title:n,ariaLabel:k,labelLeft:c,labelRight:u,disabled:r=!1,onChange:E,testId:f})=>{const[L,S]=b(!1),[a,o]=W((m-d)/2,d,m),p=g(),w=g(),_=g(),A=D(null),v=D(null),{width:y}=M(A)||{width:0},{width:U}=M(v)||{width:0};h(()=>{const e=()=>{S(!1)};return document.addEventListener("pointerup",e),()=>{document.removeEventListener("pointerup",e)}},[]);const I=e=>{var l;const t=((l=A.current)==null?void 0:l.getBoundingClientRect().x)??0;return Math.round((e-t)/y*(m-d))};h(()=>{const e=t=>{if(!r&&L){const l=I(t.clientX);o(l)}};return document.addEventListener("pointermove",e),()=>{document.removeEventListener("pointermove",e)}},[L]),h(()=>{!r&&E&&E(a)},[a]);const R=e=>{if(r)return;let t=!1;switch(e.key){case"ArrowLeft":case"ArrowDown":o(a-N),t=!0;break;case"PageDown":o(a-V),t=!0;break;case"ArrowRight":case"ArrowUp":o(a+N),t=!0;break;case"PageUp":o(a+V),t=!0;break;case"Home":o(d),t=!0;break;case"End":o(m),t=!0;break}t&&(e.preventDefault(),e.stopPropagation())},T=e=>{var l;if(r)return;const t=I(e.clientX);o(t),(l=v.current)==null||l.focus()},x=e=>{var t;r||(S(!0),e.preventDefault(),e.stopPropagation(),(t=v.current)==null||t.focus())},B=(y-U)/(m-d)*a,X=C({label:k,id:(()=>{if(n&&c&&u)return[p,w,_].join(" ");if(n&&c)return[p,w].join(" ");if(n&&u)return[p,_].join(" ");if(n)return p})(),prefer:"label"});return s.createElement("div",{className:i.slider,"data-testid":f,"data-analyticsid":j.Slider},n&&s.createElement(K,{htmlMarkup:"h3",margin:1.5,appearance:"title3",id:p},n),s.createElement("div",{ref:A,className:P(i["slider__track-wrapper"],r&&i["slider__track-wrapper--disabled"]),onClick:T,onPointerDown:x},s.createElement("div",{className:P(i.slider__track,r&&i["slider__track--disabled"])}),s.createElement("div",{role:r?void 0:"slider",ref:v,className:P(i.slider__marker,r&&i["slider__marker--disabled"]),style:{left:`${B}px`},onKeyDown:R,"aria-valuenow":a,"aria-valuemin":d,"aria-valuemax":m,tabIndex:r?void 0:0,"aria-disabled":r,...X})),(c||u)&&s.createElement("span",{className:i.slider__options},s.createElement("span",{id:w},c),s.createElement("span",{id:_},u)))},ne=$;export{$ as Slider,ne as default};
 //# sourceMappingURL=index.js.map

package/components/Slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  return [value, setSafeValue];\n};\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst MAX_VALUE = 100;\nconst MIN_VALUE = 0;\nconst STEP = 1;\nconst LARGE_STEP = 10;\n\nexport const Slider: React.FC<SliderProps> = ({ title, ariaLabel, labelLeft, labelRight, disabled = false, onChange, testId }) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [value, setValue] = useSafeNumberValue((MAX_VALUE - MIN_VALUE) / 2, MIN_VALUE, MAX_VALUE);\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const { width: markerWidth } = useSize(markerRef) || { width: 0 };\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    return Math.round(((markerPosition - trackPosition) / trackWidth) * (MAX_VALUE - MIN_VALUE));\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValue(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (!disabled && onChange) {\n      onChange(value);\n    }\n  }, [value]);\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValue(value - STEP);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValue(value - LARGE_STEP);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValue(value + STEP);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValue(value + LARGE_STEP);\n        flag = true;\n        break;\n      case 'Home':\n        setValue(MIN_VALUE);\n        flag = true;\n        break;\n      case 'End':\n        setValue(MAX_VALUE);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValue(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = ((trackWidth - markerWidth) / (MAX_VALUE - MIN_VALUE)) * value;\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title htmlMarkup={'h3'} margin={1.5} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      <div\n        ref={trackRef}\n        className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n        onClick={handleTrackClick}\n        onPointerDown={handlePointerDown}\n      >\n        <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])} />\n        <div\n          role={'slider'}\n          ref={markerRef}\n          className={classNames(styles.slider__marker, disabled && styles['slider__marker--disabled'])}\n          style={{\n            left: `${markerXPos}px`,\n          }}\n          onKeyDown={handleKeyDown}\n          aria-valuenow={value}\n          aria-valuemin={MIN_VALUE}\n          aria-valuemax={MAX_VALUE}\n          tabIndex={disabled ? undefined : 0}\n          aria-disabled={disabled}\n          {...ariaLabelAttributes}\n        />\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","newValue","MAX_VALUE","MIN_VALUE","STEP","LARGE_STEP","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","testId","isMoving","setIsMoving","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","markerWidth","useEffect","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","handlePointerMove","e","handleKeyDown","flag","handleTrackClick","handlePointerDown","markerXPos","ariaLabelAttributes","getAriaLabelAttributes","React","styles","AnalyticsId","Title","classNames","Slider$1"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  return [value, setSafeValue];\n};\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst MAX_VALUE = 100;\nconst MIN_VALUE = 0;\nconst STEP = 1;\nconst LARGE_STEP = 10;\n\nexport const Slider: React.FC<SliderProps> = ({ title, ariaLabel, labelLeft, labelRight, disabled = false, onChange, testId }) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [value, setValue] = useSafeNumberValue((MAX_VALUE - MIN_VALUE) / 2, MIN_VALUE, MAX_VALUE);\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const { width: markerWidth } = useSize(markerRef) || { width: 0 };\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    return Math.round(((markerPosition - trackPosition) / trackWidth) * (MAX_VALUE - MIN_VALUE));\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValue(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (!disabled && onChange) {\n      onChange(value);\n    }\n  }, [value]);\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValue(value - STEP);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValue(value - LARGE_STEP);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValue(value + STEP);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValue(value + LARGE_STEP);\n        flag = true;\n        break;\n      case 'Home':\n        setValue(MIN_VALUE);\n        flag = true;\n        break;\n      case 'End':\n        setValue(MAX_VALUE);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValue(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = ((trackWidth - markerWidth) / (MAX_VALUE - MIN_VALUE)) * value;\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title htmlMarkup={'h3'} margin={1.5} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren */}\n      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n      <div\n        ref={trackRef}\n        className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n        onClick={handleTrackClick}\n        onPointerDown={handlePointerDown}\n      >\n        <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])} />\n        <div\n          role={disabled ? undefined : 'slider'}\n          ref={markerRef}\n          className={classNames(styles.slider__marker, disabled && styles['slider__marker--disabled'])}\n          style={{\n            left: `${markerXPos}px`,\n          }}\n          onKeyDown={handleKeyDown}\n          aria-valuenow={value}\n          aria-valuemin={MIN_VALUE}\n          aria-valuemax={MAX_VALUE}\n          tabIndex={disabled ? undefined : 0}\n          aria-disabled={disabled}\n          {...ariaLabelAttributes}\n        />\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","newValue","MAX_VALUE","MIN_VALUE","STEP","LARGE_STEP","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","testId","isMoving","setIsMoving","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","markerWidth","useEffect","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","handlePointerMove","e","handleKeyDown","flag","handleTrackClick","handlePointerDown","markerXPos","ariaLabelAttributes","getAriaLabelAttributes","React","styles","AnalyticsId","Title","classNames","Slider$1"],"mappings":"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"}

package/components/Slider/styles.module.scss

@@ -45,7 +45,7 @@
     cursor: pointer;
 
     &:focus-within {
-      box-shadow: 0px 0px 0px 0.1rem $black;
+      box-shadow: 0 0 0 0.1rem $black;
     }
 
     &::after {

package/components/Spacer/styles.module.scss

@@ -1,4 +1,4 @@
-@import '../../scss/spacers.scss';
+@import '../../scss/spacers';
 
 .spacer {
   display: block;
@@ -8,39 +8,51 @@
   &--4xs {
     height: getSpacer(4xs);
   }
+
   &--3xs {
     height: getSpacer(3xs);
   }
+
   &--2xs {
     height: getSpacer(2xs);
   }
+
   &--xs {
     height: getSpacer(xs);
   }
+
   &--s {
     height: getSpacer(s);
   }
+
   &--m {
     height: getSpacer(m);
   }
+
   &--l {
     height: getSpacer(l);
   }
+
   &--xl {
     height: getSpacer(xl);
   }
+
   &--2xl {
     height: getSpacer(2xl);
   }
+
   &--3xl {
     height: getSpacer(3xl);
   }
+
   &--4xl {
     height: getSpacer(4xl);
   }
+
   &--5xl {
     height: getSpacer(5xl);
   }
+
   &--6xl {
     height: getSpacer(6xl);
   }

package/components/StatusDot/styles.module.scss

@@ -1,7 +1,7 @@
 @import '../../scss/palette';
-@import '../../scss/spacers.scss';
+@import '../../scss/spacers';
 @import '../../scss/font-settings';
-@import '../../scss/screen-reader.scss';
+@import '../../scss/screen-reader';
 
 .statusdot {
   position: relative;