@helsenorge/designsystem-react 3.0.0 → 3.0.1

package/components/Tile/styles.module.scss

@@ -1,6 +1,7 @@
-@import '../../scss/_palette.scss';
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
+@use 'sass:map';
+@import '../../scss/palette';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
 
 @mixin tile-title {
   overflow-wrap: break-word;
@@ -13,7 +14,7 @@
   margin: 0;
   margin-left: 0.5rem;
 
-  @media (min-width: map-get($grid-breakpoints, sm)) {
+  @media (min-width: map.get($grid-breakpoints, sm)) {
     font-size: 1.25rem;
     margin-top: 1rem;
   }
@@ -48,17 +49,19 @@
   }
 
   &--compact {
-    padding: 1.5rem 1rem 1.5rem 1rem;
+    padding: 1.5rem 1rem;
   }
 
   svg {
     flex-shrink: 0;
   }
+
   &:hover,
   &:active,
   &:focus {
     background-color: $neutral100;
   }
+
   &:focus {
     box-shadow: 0 0 0 6px $neutral600;
   }
@@ -66,11 +69,13 @@
   &--highlighted {
     background-color: $blueberry500;
     color: $white;
+
     &:hover,
     &:active,
     &:focus {
       background-color: $blueberry700;
     }
+
     &:focus {
       box-shadow: 0 0 0 6px $blueberry700;
     }
@@ -105,7 +110,7 @@
   align-items: center;
   padding-bottom: 0.5rem;
 
-  @media (min-width: map-get($grid-breakpoints, sm)) {
+  @media (min-width: map.get($grid-breakpoints, sm)) {
     flex-direction: column;
     align-items: start;
 

package/components/Title/Title.d.ts

@@ -21,6 +21,6 @@ export interface TitleMargin {
     marginTop: number;
     marginBottom: number;
 }
-export declare const instanceOfTitleMargin: (margin: any) => margin is TitleMargin;
+export declare const instanceOfTitleMargin: (margin: unknown) => margin is TitleMargin;
 export default Title;
 //# sourceMappingURL=Title.d.ts.map

package/components/Title/Title.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/components/Title/Title.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAClE,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErG,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,mDAAmD;IACnD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,KAAK,uFAyBhB,CAAC;AAEH,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,WAAY,GAAG,0BAEhD,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/components/Title/Title.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAClE,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErG,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,mDAAmD;IACnD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,KAAK,uFAyBhB,CAAC;AAEH,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,WAAY,OAAO,0BAEpD,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/components/Title/styles.module.scss

@@ -9,18 +9,23 @@
   &--feature {
     @include title-feature;
   }
+
   &--title1 {
     @include title1;
   }
+
   &--title2 {
     @include title2;
   }
+
   &--title3 {
     @include title3;
   }
+
   &--title4 {
     @include title4;
   }
+
   &--title5 {
     @include title5;
   }

package/components/Tooltip/TooltipWord/TooltipWord.d.ts

@@ -15,6 +15,6 @@ export interface TooltipWordProps {
     /** Valgfri test-id */
     testId?: string;
 }
-declare const TooltipWord: React.ForwardRefExoticComponent<TooltipWordProps & React.RefAttributes<HTMLSpanElement>>;
+declare const TooltipWord: React.ForwardRefExoticComponent<TooltipWordProps & React.RefAttributes<HTMLButtonElement>>;
 export default TooltipWord;
 //# sourceMappingURL=TooltipWord.d.ts.map

package/components/Tooltip/TooltipWord/TooltipWord.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipWord.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/TooltipWord/TooltipWord.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,gBAAgB;IAC/B,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,CAAC;IACjB,oCAAoC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qDAAqD;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,6DAA6D;IAC7D,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,6CAA6C;IAC7C,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAC7D,yCAAyC;IACzC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,WAAW,0FAmBhB,CAAC;AAIF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"TooltipWord.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/TooltipWord/TooltipWord.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,gBAAgB;IAC/B,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,CAAC;IACjB,oCAAoC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qDAAqD;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,6DAA6D;IAC7D,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,6CAA6C;IAC7C,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAC7D,yCAAyC;IACzC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,WAAW,4FAkBhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

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

@@ -1,10 +1,10 @@
-@import '../../../scss/_palette.scss';
-@import '../../../scss/_spacers.scss';
+@import '../../../scss/palette';
+@import '../../../scss/spacers';
 
 .word {
+  all: unset;
   position: relative;
   display: inline-block;
-  -webkit-text-decoration: underline dashed $plum400;
   text-decoration: underline 0.15rem dashed $plum400;
   cursor: help;
 

package/components/Tooltip/index.js

@@ -1,2 +1,2 @@
-import{T as p}from"../../Tooltip.js";import{a as J,b as K}from"../../Tooltip.js";import"react";import"../../TooltipWord.js";import"../../constants.js";import"./TooltipWord/styles.module.scss";import"../../hooks/useDelayedState.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../HelpBubble.js";import"classnames";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../../utils/refs.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";export{J as Tooltip,K as TooltipOpenProvider,p as default};
+import{T as p}from"../../Tooltip.js";import{a as J,b as K}from"../../Tooltip.js";import"react";import"../../TooltipWord.js";import"../../constants.js";import"./TooltipWord/styles.module.scss";import"../../hooks/useDelayedState.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../HelpBubble.js";import"classnames";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../../utils/refs.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";export{J as Tooltip,K as TooltipOpenProvider,p as default};
 //# sourceMappingURL=index.js.map

package/components/TooltipExample/index.js

@@ -1,2 +1,2 @@
-import t from"react";import{longLoremText as m}from"../../utils/loremtext.js";import{b as i,T as r}from"../../Tooltip.js";import"../../TooltipWord.js";import"../../constants.js";import"../Tooltip/TooltipWord/styles.module.scss";import"../../hooks/useDelayedState.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../HelpBubble.js";import"classnames";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../../utils/refs.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";const e=o=>t.createElement(i,null,t.createElement(t.Fragment,null,t.createElement(r,{...o},"Et tooltip her.")," "+m,t.createElement("button",null,"Knapp"),"Dette er ",t.createElement(r,{...o},o.children)," som skal ha nærmere forklaring.",m,t.createElement(r,{...o},"Enda et tooltip her."))),J=e;export{J as default};
+import t from"react";import{longLoremText as m}from"../../utils/loremtext.js";import{b as i,T as r}from"../../Tooltip.js";import"../../TooltipWord.js";import"../../constants.js";import"../Tooltip/TooltipWord/styles.module.scss";import"../../hooks/useDelayedState.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../HelpBubble.js";import"classnames";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../../utils/refs.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";const e=o=>t.createElement(i,null,t.createElement(t.Fragment,null,t.createElement(r,{...o},"Et tooltip her.")," "+m,t.createElement("button",null,"Knapp"),"Dette er ",t.createElement(r,{...o},o.children)," som skal ha nærmere forklaring.",m,t.createElement(r,{...o},"Enda et tooltip her."))),J=e;export{J as default};
 //# sourceMappingURL=index.js.map

package/components/Validation/styles.module.scss

@@ -1,6 +1,6 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/font-settings.scss';
+@import '../../scss/spacers';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
 
 .validation {
   &__errors {

package/hoc/withBreakpoint/withBreakpoint.d.ts

@@ -7,7 +7,7 @@ export declare function withBreakpoint<P extends BreakpointProps, C extends Reac
     ref?: React.Ref<InstanceType<C>>;
 }, keyof BreakpointProps>>;
 export declare function withBreakpoint<P extends BreakpointProps & {
-    ref?: React.Ref<any>;
+    ref?: React.Ref<unknown>;
 }>(Component: React.ForwardRefExoticComponent<P>): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;
 export declare function withBreakpoint<P extends BreakpointProps>(Component: React.FunctionComponent<P>): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;
 export default withBreakpoint;

package/hoc/withBreakpoint/withBreakpoint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withBreakpoint.d.ts","sourceRoot":"","sources":["../../../src/hoc/withBreakpoint/withBreakpoint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAiB,MAAM,2BAA2B,CAAC;AAEtE,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,UAAU,CAAC;CACxB;AAGD,wBAAgB,cAAc,CAAC,CAAC,SAAS,eAAe,EAAE,CAAC,SAAS,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EACzF,SAAS,EAAE,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GACpC,KAAK,CAAC,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,EAAE,MAAM,eAAe,CAAC,CAAC,CAAC;AAE1I,wBAAgB,cAAc,CAAC,CAAC,SAAS,eAAe,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;CAAE,EACjF,SAAS,EAAE,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC,GAC5C,KAAK,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,eAAe,CAAC,CAAC,CAAC;AAEnE,wBAAgB,cAAc,CAAC,CAAC,SAAS,eAAe,EACtD,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,GACpC,KAAK,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,eAAe,CAAC,CAAC,CAAC;AASnE,eAAe,cAAc,CAAC"}
+{"version":3,"file":"withBreakpoint.d.ts","sourceRoot":"","sources":["../../../src/hoc/withBreakpoint/withBreakpoint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAiB,MAAM,2BAA2B,CAAC;AAEtE,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,UAAU,CAAC;CACxB;AAGD,wBAAgB,cAAc,CAAC,CAAC,SAAS,eAAe,EAAE,CAAC,SAAS,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EACzF,SAAS,EAAE,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GACpC,KAAK,CAAC,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,EAAE,MAAM,eAAe,CAAC,CAAC,CAAC;AAE1I,wBAAgB,cAAc,CAAC,CAAC,SAAS,eAAe,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;CAAE,EACrF,SAAS,EAAE,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC,GAC5C,KAAK,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,eAAe,CAAC,CAAC,CAAC;AAEnE,wBAAgB,cAAc,CAAC,CAAC,SAAS,eAAe,EACtD,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,GACpC,KAAK,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,eAAe,CAAC,CAAC,CAAC;AASnE,eAAe,cAAc,CAAC"}

package/hoc/withBreakpoint/withBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"withBreakpoint.js","sources":["../../../src/hoc/withBreakpoint/withBreakpoint.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\n\nexport interface BreakpointProps {\n  breakpoint: Breakpoint;\n}\n\n// Hentet fra https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35834#issuecomment-497605842\nexport function withBreakpoint<P extends BreakpointProps, C extends React.ComponentClass<P>>(\n  Component: C & React.ComponentType<P>\n): React.ForwardRefExoticComponent<Omit<React.ComponentPropsWithoutRef<C> & { ref?: React.Ref<InstanceType<C>> }, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps & { ref?: React.Ref<any> }>(\n  Component: React.ForwardRefExoticComponent<P>\n): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps>(\n  Component: React.FunctionComponent<P>\n): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps>(Component: React.ComponentType<P>) {\n  return React.forwardRef((props, ref) => {\n    const breakpoint = useBreakpoint();\n    return <Component ref={ref} {...(props as P)} breakpoint={breakpoint} />;\n  });\n}\n\nexport default withBreakpoint;\n"],"names":["withBreakpoint","Component","React","props","ref","breakpoint","useBreakpoint"],"mappings":"8GAqBO,SAASA,EAA0CC,EAAmC,CAC3F,OAAOC,EAAM,WAAW,CAACC,EAAOC,IAAQ,CACtC,MAAMC,EAAaC,IACnB,OAAQJ,EAAA,cAAAD,EAAA,CAAU,IAAAG,EAAW,GAAID,EAAa,WAAAE,CAAwB,CAAA,CAAA,CACvE,CACH"}
+{"version":3,"file":"withBreakpoint.js","sources":["../../../src/hoc/withBreakpoint/withBreakpoint.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\n\nexport interface BreakpointProps {\n  breakpoint: Breakpoint;\n}\n\n// Hentet fra https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35834#issuecomment-497605842\nexport function withBreakpoint<P extends BreakpointProps, C extends React.ComponentClass<P>>(\n  Component: C & React.ComponentType<P>\n): React.ForwardRefExoticComponent<Omit<React.ComponentPropsWithoutRef<C> & { ref?: React.Ref<InstanceType<C>> }, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps & { ref?: React.Ref<unknown> }>(\n  Component: React.ForwardRefExoticComponent<P>\n): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps>(\n  Component: React.FunctionComponent<P>\n): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps>(Component: React.ComponentType<P>) {\n  return React.forwardRef((props, ref) => {\n    const breakpoint = useBreakpoint();\n    return <Component ref={ref} {...(props as P)} breakpoint={breakpoint} />;\n  });\n}\n\nexport default withBreakpoint;\n"],"names":["withBreakpoint","Component","React","props","ref","breakpoint","useBreakpoint"],"mappings":"8GAqBO,SAASA,EAA0CC,EAAmC,CAC3F,OAAOC,EAAM,WAAW,CAACC,EAAOC,IAAQ,CACtC,MAAMC,EAAaC,IACnB,OAAQJ,EAAA,cAAAD,EAAA,CAAU,IAAAG,EAAW,GAAID,EAAa,WAAAE,CAAwB,CAAA,CAAA,CACvE,CACH"}

package/hooks/useFocusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAKzC;;;;GAIG;AACH,eAAO,MAAM,YAAY,QAAS,MAAM,SAAS,CAAC,WAAW,CAAC,cAAa,OAAO,KAAU,IA4B3F,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAKzC;;;;GAIG;AACH,eAAO,MAAM,YAAY,QAAS,MAAM,SAAS,CAAC,WAAW,CAAC,0BAAqB,IA4BlF,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/hooks/useFocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.js","sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { useFocusableElements } from './useFocusableElements';\nimport { getDocumentActiveElement } from '../utils/focus';\n\n/**\n * Lås fokus til et bestemt element. Bruker vil bare kunne tabbe mellom fokuserbare elementer innenfor elementet.\n * @param ref Alle barn av dette elementet vil være fokuserbare, elementer utenfor vil ikke det\n * @param trapFocus Om fokus skal \"trappes\" innenfor elementet eller ikke. Default=true.\n */\nexport const useFocusTrap = (ref: React.RefObject<HTMLElement>, trapFocus: boolean = true): void => {\n  const focusableElementList = useFocusableElements(ref);\n\n  const handleKeyboardEvent = (e: KeyboardEvent): void => {\n    if (trapFocus && ref.current && focusableElementList?.length && e.key === 'Tab') {\n      const activeElement = getDocumentActiveElement(ref.current);\n      const firstElement = focusableElementList[0];\n      const lastElement = focusableElementList.length === 1 ? firstElement : focusableElementList[focusableElementList.length - 1];\n\n      if (e.shiftKey && activeElement === firstElement) {\n        /* shift + tab */\n        lastElement.focus();\n        e.preventDefault();\n      } else if (!e.shiftKey && activeElement === lastElement) {\n        /* tab */\n        firstElement.focus();\n        e.preventDefault();\n      }\n    }\n  };\n\n  useEffect(() => {\n    ref.current?.addEventListener('keydown', handleKeyboardEvent);\n\n    return (): void => {\n      ref.current?.removeEventListener('keydown', handleKeyboardEvent);\n    };\n  }, [ref, trapFocus, focusableElementList]); // focusableElementList må være med som dependency for at handleKeyboardEvent skal få oppdatert state\n};\n\nexport default useFocusTrap;\n"],"names":["useFocusTrap","ref","trapFocus","focusableElementList","useFocusableElements","handleKeyboardEvent","e","activeElement","getDocumentActiveElement","firstElement","lastElement","useEffect","_a"],"mappings":"4LAUO,MAAMA,EAAe,CAACC,EAAmCC,EAAqB,KAAe,CAC5F,MAAAC,EAAuBC,EAAqBH,CAAG,EAE/CI,EAAuBC,GAA2B,CACtD,GAAIJ,GAAaD,EAAI,UAAWE,GAAA,MAAAA,EAAsB,SAAUG,EAAE,MAAQ,MAAO,CACzE,MAAAC,EAAgBC,EAAyBP,EAAI,OAAO,EACpDQ,EAAeN,EAAqB,CAAC,EACrCO,EAAcP,EAAqB,SAAW,EAAIM,EAAeN,EAAqBA,EAAqB,OAAS,CAAC,EAEvHG,EAAE,UAAYC,IAAkBE,GAElCC,EAAY,MAAM,EAClBJ,EAAE,eAAe,GACR,CAACA,EAAE,UAAYC,IAAkBG,IAE1CD,EAAa,MAAM,EACnBH,EAAE,eAAe,EAErB,CAAA,EAGFK,EAAU,IAAM,OACV,OAAAC,EAAAX,EAAA,UAAA,MAAAW,EAAS,iBAAiB,UAAWP,GAElC,IAAY,QACbO,EAAAX,EAAA,UAAA,MAAAW,EAAS,oBAAoB,UAAWP,EAAmB,CAEhE,EAAA,CAACJ,EAAKC,EAAWC,CAAoB,CAAC,CAC3C"}
+{"version":3,"file":"useFocusTrap.js","sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { useFocusableElements } from './useFocusableElements';\nimport { getDocumentActiveElement } from '../utils/focus';\n\n/**\n * Lås fokus til et bestemt element. Bruker vil bare kunne tabbe mellom fokuserbare elementer innenfor elementet.\n * @param ref Alle barn av dette elementet vil være fokuserbare, elementer utenfor vil ikke det\n * @param trapFocus Om fokus skal \"trappes\" innenfor elementet eller ikke. Default=true.\n */\nexport const useFocusTrap = (ref: React.RefObject<HTMLElement>, trapFocus = true): void => {\n  const focusableElementList = useFocusableElements(ref);\n\n  const handleKeyboardEvent = (e: KeyboardEvent): void => {\n    if (trapFocus && ref.current && focusableElementList?.length && e.key === 'Tab') {\n      const activeElement = getDocumentActiveElement(ref.current);\n      const firstElement = focusableElementList[0];\n      const lastElement = focusableElementList.length === 1 ? firstElement : focusableElementList[focusableElementList.length - 1];\n\n      if (e.shiftKey && activeElement === firstElement) {\n        /* shift + tab */\n        lastElement.focus();\n        e.preventDefault();\n      } else if (!e.shiftKey && activeElement === lastElement) {\n        /* tab */\n        firstElement.focus();\n        e.preventDefault();\n      }\n    }\n  };\n\n  useEffect(() => {\n    ref.current?.addEventListener('keydown', handleKeyboardEvent);\n\n    return (): void => {\n      ref.current?.removeEventListener('keydown', handleKeyboardEvent);\n    };\n  }, [ref, trapFocus, focusableElementList]); // focusableElementList må være med som dependency for at handleKeyboardEvent skal få oppdatert state\n};\n\nexport default useFocusTrap;\n"],"names":["useFocusTrap","ref","trapFocus","focusableElementList","useFocusableElements","handleKeyboardEvent","e","activeElement","getDocumentActiveElement","firstElement","lastElement","useEffect","_a"],"mappings":"4LAUO,MAAMA,EAAe,CAACC,EAAmCC,EAAY,KAAe,CACnF,MAAAC,EAAuBC,EAAqBH,CAAG,EAE/CI,EAAuBC,GAA2B,CACtD,GAAIJ,GAAaD,EAAI,UAAWE,GAAA,MAAAA,EAAsB,SAAUG,EAAE,MAAQ,MAAO,CACzE,MAAAC,EAAgBC,EAAyBP,EAAI,OAAO,EACpDQ,EAAeN,EAAqB,CAAC,EACrCO,EAAcP,EAAqB,SAAW,EAAIM,EAAeN,EAAqBA,EAAqB,OAAS,CAAC,EAEvHG,EAAE,UAAYC,IAAkBE,GAElCC,EAAY,MAAM,EAClBJ,EAAE,eAAe,GACR,CAACA,EAAE,UAAYC,IAAkBG,IAE1CD,EAAa,MAAM,EACnBH,EAAE,eAAe,GAErB,EAGFK,EAAU,IAAM,OACV,OAAAC,EAAAX,EAAA,UAAA,MAAAW,EAAS,iBAAiB,UAAWP,GAElC,IAAY,QACbO,EAAAX,EAAA,UAAA,MAAAW,EAAS,oBAAoB,UAAWP,EAAmB,CAEhE,EAAA,CAACJ,EAAKC,EAAWC,CAAoB,CAAC,CAC3C"}

package/hooks/useSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSize.js","sources":["../../src/hooks/useSize.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { debounce } from '../utils/debounce';\n\n/**\n * Lytt på endringer i størrelse på et element\n *\n * @param ref Element som skal observeres.\n * @returns Object med høyde, bredde, x og y til elementet. Merk at objektet bare oppdates når høyde eller bredde endres, ikke når\n * posisjonen (x og y) endres.\n */\nexport const useSize = (ref?: React.RefObject<HTMLElement>): DOMRect | undefined => {\n  const ticking = useRef(false);\n  const [size, setSize] = useState<DOMRect>();\n  useEffect(() => {\n    if (typeof ResizeObserver !== 'undefined') {\n      const resizeObserver = new ResizeObserver(entries => {\n        if (!ticking.current) {\n          window.requestAnimationFrame(() => {\n            setSize(entries[0].target.getBoundingClientRect());\n            ticking.current = false;\n          });\n        }\n        ticking.current = true;\n      });\n      if (ref?.current) {\n        resizeObserver.observe(ref?.current);\n      }\n      return (): void => {\n        if (ref?.current) {\n          resizeObserver.unobserve(ref.current);\n        } else {\n          resizeObserver.disconnect();\n        }\n      };\n    } else if (typeof window === 'object') {\n      // For nettlesere som ikke støtter ResizeObserver (iOS 13 og lavere)\n      const handleLayoutEvent = () => {\n        ref?.current && setSize(ref.current.getBoundingClientRect());\n      };\n\n      const events = ['layoutchange', 'resize', 'orientationchange'];\n      const debounceMs = 10;\n\n      const [debouncedCallback, teardown] = debounce(handleLayoutEvent, debounceMs);\n\n      events.forEach(eventName => window.addEventListener(eventName, debouncedCallback));\n\n      debouncedCallback();\n\n      return () => {\n        teardown();\n        events.forEach(eventName => window.removeEventListener(eventName, debouncedCallback));\n      };\n    }\n  }, [ref?.current]);\n\n  return size;\n};\n"],"names":["useSize","ref","ticking","useRef","size","setSize","useState","useEffect","resizeObserver","entries","handleLayoutEvent","events","debouncedCallback","teardown","debounce","eventName"],"mappings":"4GAWa,MAAAA,EAAWC,GAA4D,CAC5E,MAAAC,EAAUC,EAAO,EAAK,EACtB,CAACC,EAAMC,CAAO,EAAIC,EAAkB,EAC1C,OAAAC,EAAU,IAAM,CACV,GAAA,OAAO,eAAmB,IAAa,CACnC,MAAAC,EAAiB,IAAI,eAA0BC,GAAA,CAC9CP,EAAQ,SACX,OAAO,sBAAsB,IAAM,CACjCG,EAAQI,EAAQ,CAAC,EAAE,OAAO,sBAAuB,CAAA,EACjDP,EAAQ,QAAU,EAAA,CACnB,EAEHA,EAAQ,QAAU,EAAA,CACnB,EACD,OAAID,GAAA,MAAAA,EAAK,SACQO,EAAA,QAAQP,GAAA,YAAAA,EAAK,OAAO,EAE9B,IAAY,CACbA,GAAA,MAAAA,EAAK,QACQO,EAAA,UAAUP,EAAI,OAAO,EAEpCO,EAAe,WAAW,CAC5B,CACF,SACS,OAAO,QAAW,SAAU,CAErC,MAAME,EAAoB,IAAM,CAC9BT,GAAA,MAAAA,EAAK,SAAWI,EAAQJ,EAAI,QAAQ,uBAAuB,CAAA,EAGvDU,EAAS,CAAC,eAAgB,SAAU,mBAAmB,EAGvD,CAACC,EAAmBC,CAAQ,EAAIC,EAASJ,EAAmB,EAAU,EAE5E,OAAAC,EAAO,QAAqBI,GAAA,OAAO,iBAAiBA,EAAWH,CAAiB,CAAC,EAE/DA,IAEX,IAAM,CACFC,IACTF,EAAO,QAAqBI,GAAA,OAAO,oBAAoBA,EAAWH,CAAiB,CAAC,CAAA,CAExF,CAAA,EACC,CAACX,GAAA,YAAAA,EAAK,OAAO,CAAC,EAEVG,CACT"}
+{"version":3,"file":"useSize.js","sources":["../../src/hooks/useSize.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { debounce } from '../utils/debounce';\n\n/**\n * Lytt på endringer i størrelse på et element\n *\n * @param ref Element som skal observeres.\n * @returns Object med høyde, bredde, x og y til elementet. Merk at objektet bare oppdates når høyde eller bredde endres, ikke når\n * posisjonen (x og y) endres.\n */\nexport const useSize = (ref?: React.RefObject<HTMLElement>): DOMRect | undefined => {\n  const ticking = useRef(false);\n  const [size, setSize] = useState<DOMRect>();\n  useEffect(() => {\n    if (typeof ResizeObserver !== 'undefined') {\n      const resizeObserver = new ResizeObserver(entries => {\n        if (!ticking.current) {\n          window.requestAnimationFrame(() => {\n            setSize(entries[0].target.getBoundingClientRect());\n            ticking.current = false;\n          });\n        }\n        ticking.current = true;\n      });\n      if (ref?.current) {\n        resizeObserver.observe(ref?.current);\n      }\n      return (): void => {\n        if (ref?.current) {\n          resizeObserver.unobserve(ref.current);\n        } else {\n          resizeObserver.disconnect();\n        }\n      };\n    } else if (typeof window === 'object') {\n      // For nettlesere som ikke støtter ResizeObserver (iOS 13 og lavere)\n      const handleLayoutEvent = () => {\n        ref?.current && setSize(ref.current.getBoundingClientRect());\n      };\n\n      const events = ['layoutchange', 'resize', 'orientationchange'];\n      const debounceMs = 10;\n\n      const [debouncedCallback, teardown] = debounce(handleLayoutEvent, debounceMs);\n\n      events.forEach(eventName => window.addEventListener(eventName, debouncedCallback));\n\n      debouncedCallback();\n\n      return () => {\n        teardown();\n        events.forEach(eventName => window.removeEventListener(eventName, debouncedCallback));\n      };\n    }\n  }, [ref?.current]);\n\n  return size;\n};\n"],"names":["useSize","ref","ticking","useRef","size","setSize","useState","useEffect","resizeObserver","entries","handleLayoutEvent","events","debouncedCallback","teardown","debounce","eventName"],"mappings":"4GAWa,MAAAA,EAAWC,GAA4D,CAC5E,MAAAC,EAAUC,EAAO,EAAK,EACtB,CAACC,EAAMC,CAAO,EAAIC,EAAkB,EAC1C,OAAAC,EAAU,IAAM,CACV,GAAA,OAAO,eAAmB,IAAa,CACnC,MAAAC,EAAiB,IAAI,eAA0BC,GAAA,CAC9CP,EAAQ,SACX,OAAO,sBAAsB,IAAM,CACjCG,EAAQI,EAAQ,CAAC,EAAE,OAAO,sBAAuB,CAAA,EACjDP,EAAQ,QAAU,EAAA,CACnB,EAEHA,EAAQ,QAAU,EAAA,CACnB,EACD,OAAID,GAAA,MAAAA,EAAK,SACQO,EAAA,QAAQP,GAAA,YAAAA,EAAK,OAAO,EAE9B,IAAY,CACbA,GAAA,MAAAA,EAAK,QACQO,EAAA,UAAUP,EAAI,OAAO,EAEpCO,EAAe,WAAW,CAC5B,UAEO,OAAO,QAAW,SAAU,CAErC,MAAME,EAAoB,IAAM,CAC9BT,GAAA,MAAAA,EAAK,SAAWI,EAAQJ,EAAI,QAAQ,uBAAuB,CAAA,EAGvDU,EAAS,CAAC,eAAgB,SAAU,mBAAmB,EAGvD,CAACC,EAAmBC,CAAQ,EAAIC,EAASJ,EAAmB,EAAU,EAE5E,OAAAC,EAAO,QAAqBI,GAAA,OAAO,iBAAiBA,EAAWH,CAAiB,CAAC,EAE/DA,IAEX,IAAM,CACFC,IACTF,EAAO,QAAqBI,GAAA,OAAO,oBAAoBA,EAAWH,CAAiB,CAAC,CAAA,EAExF,EACC,CAACX,GAAA,YAAAA,EAAK,OAAO,CAAC,EAEVG,CACT"}

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "The official design system for Helsenorge built with React.",
   "homepage": "https://helsenorge.design",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "author": "Helsenorge",
   "license": "MIT",
   "peerDependencies": {

package/scss/_body.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import './font-settings';
 @import './palette';
 @import './breakpoints';
@@ -8,7 +9,8 @@ body {
   color: $black;
   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;
     line-height: $lineheight-size-md;
   }

package/scss/_breakpoints.scss

@@ -1,9 +1,8 @@
+@use 'sass:map';
 @import 'spacers';
 
-$grid-gutter-width: map-get($spacers, 5);
-
+$grid-gutter-width: map.get($spacers, 5);
 $grid-columns: 12;
-
 $grid-breakpoints: (
   xxs: 0,
   xs: 360px,
@@ -12,13 +11,11 @@ $grid-breakpoints: (
   lg: 1088px,
   xl: 1450px,
 );
-
 $grid-max-breakpoints: (
-  xs: map-get($grid-breakpoints, sm) - 0.02,
-  sm: map-get($grid-breakpoints, md) - 0.02,
-  md: map-get($grid-breakpoints, lg) - 0.02,
+  xs: map.get($grid-breakpoints, sm) - 0.02,
+  sm: map.get($grid-breakpoints, md) - 0.02,
+  md: map.get($grid-breakpoints, lg) - 0.02,
 );
-
 $container-max-widths: (
   sm: 528px,
   md: 612px,

package/scss/_figma-tokens.scss

@@ -1,8 +1,8 @@
 // Do not edit directly
 // Generated on Wed, 05 Oct 2022 11:38:01 GMT
 
-$palette-white: #ffffff;
-$palette-black: #000000;
+$palette-white: #fff;
+$palette-black: #000;
 $palette-plum900: #3c1471;
 $palette-plum800: #4c1b8c;
 $palette-plum700: #5b22a6;

package/scss/_fonts.scss

@@ -1,4 +1,4 @@
-@import './font-settings.scss';
+@import './font-settings';
 
 /* latin */
 @font-face {
@@ -7,8 +7,9 @@
   font-weight: 200;
   font-display: swap;
   src: local('Source Sans Pro Extra Light'), local('SourceSansPro-ExtraLight'),
-    url(../fonts/source-sans-pro-200-extralight.woff) format('woff'), url(../fonts/source-sans-pro-200-extralight.woff2) format('woff2');
+    url('../fonts/source-sans-pro-200-extralight.woff') format('woff'), url('../fonts/source-sans-pro-200-extralight.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
@@ -16,18 +17,20 @@
   font-weight: 200;
   font-display: swap;
   src: local('Source Sans Pro Extra Light Italic'), local('SourceSansPro-ExtraLightItalic'),
-    url(../fonts/source-sans-pro-200-extralight-italic.woff) format('woff'),
-    url(../fonts/source-sans-pro-200-extralight-italic.woff2) format('woff2');
+    url('../fonts/source-sans-pro-200-extralight-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-200-extralight-italic.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(../fonts/source-sans-pro-300-light.woff) format('woff'),
-    url(../fonts/source-sans-pro-300-light.woff2) format('woff2');
+  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('../fonts/source-sans-pro-300-light.woff') format('woff'),
+    url('../fonts/source-sans-pro-300-light.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
@@ -35,35 +38,41 @@
   font-weight: 300;
   font-display: swap;
   src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightItalic'),
-    url(../fonts/source-sans-pro-300-light-italic.woff) format('woff'), url(../fonts/source-sans-pro-300-light-italic.woff2) format('woff2');
+    url('../fonts/source-sans-pro-300-light-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-300-light-italic.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(../fonts/source-sans-pro-400-regular.woff) format('woff'),
-    url(../fonts/source-sans-pro-400-regular.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('../fonts/source-sans-pro-400-regular.woff') format('woff'),
+    url('../fonts/source-sans-pro-400-regular.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: italic;
   font-weight: 400;
   font-display: swap;
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(../fonts/source-sans-pro-400-regular-italic.woff) format('woff'),
-    url(../fonts/source-sans-pro-400-regular-italic.woff2) format('woff2');
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'),
+    url('../fonts/source-sans-pro-400-regular-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-400-regular-italic.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(../fonts/source-sans-pro-600-semibold.woff) format('woff'),
-    url(../fonts/source-sans-pro-600-semibold.woff2) format('woff2');
+  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url('../fonts/source-sans-pro-600-semibold.woff') format('woff'),
+    url('../fonts/source-sans-pro-600-semibold.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
@@ -71,18 +80,20 @@
   font-weight: 600;
   font-display: swap;
   src: local('Source Sans Pro SemiBold Italic'), local('SourceSansPro-SemiBoldItalic'),
-    url(../fonts/source-sans-pro-600-semibold-italic.woff) format('woff'),
-    url(../fonts/source-sans-pro-600-semibold-italic.woff2) format('woff2');
+    url('../fonts/source-sans-pro-600-semibold-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-600-semibold-italic.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(../fonts/source-sans-pro-700-bold.woff) format('woff'),
-    url(../fonts/source-sans-pro-700-bold.woff2) format('woff2');
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('../fonts/source-sans-pro-700-bold.woff') format('woff'),
+    url('../fonts/source-sans-pro-700-bold.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
@@ -90,17 +101,20 @@
   font-weight: 700;
   font-display: swap;
   src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'),
-    url(../fonts/source-sans-pro-700-bold-italic.woff) format('woff'), url(../fonts/source-sans-pro-700-bold-italic.woff2) format('woff2');
+    url('../fonts/source-sans-pro-700-bold-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-700-bold-italic.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 900;
   font-display: swap;
-  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(../fonts/source-sans-pro-900-black.woff) format('woff'),
-    url(../fonts/source-sans-pro-900-black.woff2) format('woff2');
+  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url('../fonts/source-sans-pro-900-black.woff') format('woff'),
+    url('../fonts/source-sans-pro-900-black.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
@@ -108,5 +122,6 @@
   font-weight: 900;
   font-display: swap;
   src: local('Source Sans Pro Black Italic'), local('SourceSansPro-BlackItalic'),
-    url(../fonts/source-sans-pro-900-black-italic.woff) format('woff'), url(../fonts/source-sans-pro-900-black-italic.woff2) format('woff2');
+    url('../fonts/source-sans-pro-900-black-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-900-black-italic.woff2') format('woff2');
 }

package/scss/_grid.scss

@@ -1,5 +1,6 @@
 $enable-deprecation-messages: true;
-@import 'bootstrap/scss/vendor/_rfs.scss';
-@import 'bootstrap/scss/mixins/_deprecate.scss';
-@import 'bootstrap/scss/mixins/_breakpoints.scss';
-@import 'bootstrap/scss/mixins/_grid.scss';
+
+@import 'bootstrap/scss/vendor/rfs';
+@import 'bootstrap/scss/mixins/deprecate';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/grid';

package/scss/_input.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 @mixin input-wrapper {
   width: 100%;
 
@@ -9,7 +11,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;
     }
@@ -55,17 +57,18 @@
   &:hover {
     background: $neutral50;
     border-color: $neutral700;
-    box-shadow: 0px 0px 0px 1px $neutral700;
+    box-shadow: 0 0 0 1px $neutral700;
 
     &:focus-within {
       border-color: $black;
-      box-shadow: 0px 0px 0px 2px $black;
+      box-shadow: 0 0 0 2px $black;
     }
   }
+
   &:focus-within {
     background: $white;
     border-color: $neutral900;
-    box-shadow: 0px 0px 0px 2px $neutral900;
+    box-shadow: 0 0 0 2px $neutral900;
   }
 
   &--on-blueberry {
@@ -73,43 +76,49 @@
 
     &:hover {
       background: $blueberry50;
-      box-shadow: 0px 0px 0px 1px $blueberry500;
+      box-shadow: 0 0 0 1px $blueberry500;
       border-color: $blueberry500;
     }
 
     &:focus-within {
       background: $white;
       border-color: $neutral900;
-      box-shadow: 0px 0px 0px 2px $neutral900;
+      box-shadow: 0 0 0 2px $neutral900;
     }
   }
+
   &--on-dark {
     border-color: $blueberry900;
+
     &:hover {
       background: $blueberry50;
       border-color: $blueberry900;
-      box-shadow: 0px 0px 0px 1px $blueberry900;
+      box-shadow: 0 0 0 1px $blueberry900;
     }
+
     &:focus-within {
       background: $white;
       border-color: $neutral900;
-      box-shadow: 0px 0px 0px 2px $neutral900;
+      box-shadow: 0 0 0 2px $neutral900;
     }
   }
+
   &--invalid {
     border-color: $cherry600;
 
     &:hover {
       background: $cherry100;
       border-color: $cherry600;
-      box-shadow: 0px 0px 0px 2px $cherry600;
+      box-shadow: 0 0 0 2px $cherry600;
     }
+
     &:focus-within {
       background: $white;
       border-color: $neutral900;
-      box-shadow: 0px 0px 0px 2px $neutral900;
+      box-shadow: 0 0 0 2px $neutral900;
     }
   }
+
   &--transparent {
     background: transparent;
 
@@ -153,7 +162,7 @@
     background-color: transparent;
     width: 100%;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       font-size: $font-size-md;
     }
 

package/scss/_palette.scss

@@ -1,6 +1,5 @@
-$black: #000000;
-$white: #ffffff;
-
+$black: #000;
+$white: #fff;
 $banana50: #fdf8df;
 $banana100: #fcf2bf;
 $banana200: #f9ea9f;
@@ -11,7 +10,6 @@ $banana600: #c59302;
 $banana700: #ab7c00;
 $banana800: #916500;
 $banana900: #764f00;
-
 $blueberry50: #e4f7f9;
 $blueberry100: #cae7ed;
 $blueberry200: #afdae3;
@@ -22,7 +20,6 @@ $blueberry600: #126f87;
 $blueberry700: #08667c;
 $blueberry800: #06596c;
 $blueberry900: #084350;
-
 $cherry50: #fff2ea;
 $cherry100: #f7e1d2;
 $cherry200: #eec0a5;
@@ -33,7 +30,6 @@ $cherry600: #b62e1c;
 $cherry700: #a31f0e;
 $cherry800: #912112;
 $cherry900: #7e1c0e;
-
 $kiwi50: #e6f8ee;
 $kiwi100: #c2edd6;
 $kiwi200: #9de2bf;
@@ -44,7 +40,6 @@ $kiwi600: #10b172;
 $kiwi700: #0ca161;
 $kiwi800: #099150;
 $kiwi900: #078141;
-
 $neutral50: #f5f3f3;
 $neutral100: #eae7e7;
 $neutral200: #d6d4d3;
@@ -55,7 +50,6 @@ $neutral600: #7d7c79;
 $neutral700: #62625f;
 $neutral800: #474745;
 $neutral900: #2b2c2b;
-
 $plum50: #efe4fd;
 $plum100: #d7bdf9;
 $plum200: #bf98f3;
@@ -66,10 +60,8 @@ $plum600: #6a2abf;
 $plum700: #5b22a6;
 $plum800: #4c1b8c;
 $plum900: #3c1471;
-
 $inverted-hover: #ffffff0d;
-$transparentGrey: rgba(102, 102, 102, 0.75);
-
+$transparent-grey: rgb(102 102 102 / 75%);
 $palette-map: (
   'banana50': $banana50,
   'banana100': $banana100,