@helsenorge/designsystem-react 10.1.0 → 10.3.0

package/components/StatusDot/styles.module.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
-@import '../../scss/screen-reader';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/screen-reader' as *;
+@use '../../scss/breakpoints' as *;
 
 $status-dot-size: 0.937rem;
 
@@ -11,17 +11,17 @@ $status-dot-size: 0.937rem;
   position: relative;
   display: inline-flex;
   align-items: flex-start;
-  font-size: $font-size-xs;
+  font-size: font-settings.$font-size-xs;
   line-height: 1.4rem;
   font-weight: 400;
 
   @media (min-width: map.get($grid-breakpoints, sm)) {
-    font-size: $font-size-sm;
+    font-size: font-settings.$font-size-sm;
     line-height: 1.6rem;
   }
 
   &--cancelled {
-    color: $cherry600;
+    color: palette.$cherry600;
   }
 
   &__dot {
@@ -29,8 +29,8 @@ $status-dot-size: 0.937rem;
     align-items: center;
     justify-content: center;
     position: relative;
-    top: getSpacer(4xs);
-    margin-right: getSpacer(2xs);
+    top: spacers.getSpacer(4xs);
+    margin-right: spacers.getSpacer(2xs);
     border-radius: 10rem;
     width: $status-dot-size;
     height: $status-dot-size;
@@ -38,44 +38,44 @@ $status-dot-size: 0.937rem;
     min-height: $status-dot-size;
 
     @media (min-width: map.get($grid-breakpoints, sm)) {
-      top: getSpacer(3xs);
+      top: spacers.getSpacer(3xs);
     }
 
     &--info {
-      background: $kiwi900;
+      background: palette.$kiwi900;
     }
     &--info#{&}--on-dark {
-      background: $kiwi400;
+      background: palette.$kiwi400;
     }
 
     &--warning {
-      background: $banana400;
+      background: palette.$banana400;
     }
 
     &--alert,
     &--cancelled {
-      background: $cherry500;
+      background: palette.$cherry500;
     }
     &--alert#{&}--on-dark {
-      background: $cherry300;
+      background: palette.$cherry300;
     }
     &--cancelled#{&}--on-dark {
-      outline: 2px solid $white;
+      outline: 2px solid palette.$white;
     }
 
     &--active {
-      background: $blueberry500;
+      background: palette.$blueberry500;
     }
     &--active#{&}--on-dark {
-      background: $blueberry300;
+      background: palette.$blueberry300;
     }
 
     &--transparent {
-      border: 2px solid $neutral600;
+      border: 2px solid palette.$neutral600;
     }
     &--transparent#{&}--on-dark {
       border: none;
-      background: $white;
+      background: palette.$white;
     }
 
     svg {
@@ -85,7 +85,7 @@ $status-dot-size: 0.937rem;
 
   &__label {
     &--on-dark {
-      color: $white;
+      color: palette.$white;
     }
   }
 }

package/components/Step/styles.module.scss

@@ -1,12 +1,12 @@
 @use 'sass:map';
-@import '../../scss/spacers';
+@use '../../scss/spacers' as spacers;
 
 .step {
   &__stepper {
-    margin-bottom: getSpacer(m);
+    margin-bottom: spacers.getSpacer(m);
   }
 
   &__content {
-    margin-bottom: getSpacer(s);
+    margin-bottom: spacers.getSpacer(s);
   }
 }

package/components/StepButtons/styles.module.scss

@@ -1,25 +1,25 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/screen-reader';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/screen-reader' as *;
+@use '../../scss/breakpoints' as *;
 
 .stepbuttons {
-  margin-top: getSpacer(m);
-  margin-bottom: getSpacer(s);
+  margin-top: spacers.getSpacer(m);
+  margin-bottom: spacers.getSpacer(s);
   display: flex;
   flex-wrap: wrap;
-  gap: getSpacer(m) getSpacer(l);
+  gap: spacers.getSpacer(m) spacers.getSpacer(l);
 
   &--has-sticky-buttons {
-    background-color: $white;
+    background-color: palette.$white;
     position: sticky;
     bottom: 0;
   }
 
   &__buttons {
     display: flex;
-    gap: getSpacer(s);
+    gap: spacers.getSpacer(s);
 
     @media (max-width: map.get($grid-max-breakpoints, xs)) {
       width: 100%;

package/components/Stepper/styles.module.scss

@@ -1,16 +1,16 @@
 @use 'sass:map';
-@import '../../scss/breakpoints';
-@import '../../scss/spacers';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/breakpoints' as *;
 
 .stepper-wrapper {
   display: flex;
   align-items: center;
-  min-height: getSpacer(l);
+  min-height: spacers.getSpacer(l);
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    min-height: getSpacer(xl);
+    min-height: spacers.getSpacer(xl);
   }
 }
 
@@ -47,7 +47,15 @@ $dot-offset: calc($stepper-padding-x + $dot-size / 2);
   display: block;
   height: $stepper-height;
   border-radius: 4px;
-  background: linear-gradient(to right, $blueberry600, $blueberry600 $dot-offset, $blueberry50 $dot-offset, $blueberry50), $blueberry600;
+  background:
+    linear-gradient(
+      to right,
+      palette.$blueberry600,
+      palette.$blueberry600 $dot-offset,
+      palette.$blueberry50 $dot-offset,
+      palette.$blueberry50
+    ),
+    palette.$blueberry600;
   background-repeat: no-repeat;
 
   @media (prefers-reduced-motion: no-preference) {
@@ -59,8 +67,8 @@ $dot-offset: calc($stepper-padding-x + $dot-size / 2);
     width: $marker-size;
     height: $marker-size;
     top: calc(($stepper-height - $marker-size) / 2);
-    background-color: $white;
-    border: 6px solid $blueberry600;
+    background-color: palette.$white;
+    border: 6px solid palette.$blueberry600;
     border-radius: 50%;
 
     @media (prefers-reduced-motion: no-preference) {
@@ -71,11 +79,11 @@ $dot-offset: calc($stepper-padding-x + $dot-size / 2);
   &__number {
     min-width: 2.5rem;
     text-align: right;
-    margin-left: getSpacer(xs);
-    font-size: $font-size-xs;
-    line-height: $lineheight-size-xs;
+    margin-left: spacers.getSpacer(xs);
+    font-size: font-settings.$font-size-xs;
+    line-height: font-settings.$lineheight-size-xs;
     font-weight: 700;
-    color: $blueberry700;
+    color: palette.$blueberry700;
   }
 
   &__dot {
@@ -83,7 +91,7 @@ $dot-offset: calc($stepper-padding-x + $dot-size / 2);
     top: calc(($stepper-height - $dot-size) / 2);
     width: $dot-size;
     height: $dot-size;
-    background-color: $blueberry600;
+    background-color: palette.$blueberry600;
     border-radius: 50%;
 
     @media (prefers-reduced-motion: no-preference) {
@@ -91,7 +99,7 @@ $dot-offset: calc($stepper-padding-x + $dot-size / 2);
     }
 
     &--completed {
-      background-color: $blueberry50;
+      background-color: palette.$blueberry50;
     }
 
     &--left {

package/components/StickyNote/styles.module.scss

@@ -1,5 +1,5 @@
-@use '../../scss/supernova/styles/colors' as *;
-@use '../../scss/font-settings' as fonts;
+@use '../../scss/font-settings' as font-settings;
+@import '../../scss/supernova/styles/colors';
 
 .sticky-note {
   position: relative;
@@ -95,7 +95,7 @@
   &__error-text {
     color: var(--color-notification-status-error);
     line-height: 1.875rem;
-    font-size: fonts.$font-size-sm;
+    font-size: font-settings.$font-size-sm;
     margin-top: 0.75rem;
   }
 }

package/components/Table/styles.module.scss

@@ -1,10 +1,10 @@
 // Kan fjernes når konvensjonen for BEM er tillatt.
 /* stylelint-disable selector-class-pattern */
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/breakpoints' as *;
 @import '../../scss/grid';
 
 /* fix outline for Safari */
@@ -72,7 +72,7 @@ table .table-body .table-row {
       top: 0;
       left: 0;
       width: 60%;
-      padding-right: $spacer;
+      padding-right: spacers.$spacer;
       white-space: normal;
       display: block;
       float: left;
@@ -85,7 +85,7 @@ table .table-body .table-row {
 
   .table__expander-cell-mobile {
     padding-left: 0.75rem;
-    border-bottom: 1px solid $neutral500;
+    border-bottom: 1px solid palette.$neutral500;
 
     &--expanded {
       border-bottom: 0;
@@ -99,7 +99,7 @@ table .table-body .table-row {
 
   .table__cell:first-child {
     border-collapse: collapse;
-    border-top: 1px solid $neutral500;
+    border-top: 1px solid palette.$neutral500;
   }
 
   .table__expanded-row {
@@ -117,7 +117,7 @@ table .table-body .table-row {
   .table__row--expandable {
     .table__cell:nth-child(2) {
       border-collapse: collapse;
-      border-top: 1px solid $neutral500;
+      border-top: 1px solid palette.$neutral500;
     }
 
     &:focus-within {
@@ -126,7 +126,7 @@ table .table-body .table-row {
   }
 
   .table-row:last-child .table__cell:last-child {
-    border-bottom: 1px solid $neutral500;
+    border-bottom: 1px solid palette.$neutral500;
   }
 }
 
@@ -153,10 +153,10 @@ table .table-body .table-row {
 }
 
 .table__head {
-  background: $blueberry50;
+  background: palette.$blueberry50;
 
   &--normal {
-    background: $neutral50;
+    background: palette.$neutral50;
   }
 
   &--transparent {
@@ -164,7 +164,7 @@ table .table-body .table-row {
   }
 
   &--sortable {
-    background: $blueberry50;
+    background: palette.$blueberry50;
   }
 
   @media (min-width: map.get($grid-breakpoints, lg)) {
@@ -184,46 +184,46 @@ table .table-body .table-row {
   // Fix for firefox hover feil
   background-clip: padding-box;
   height: 3.625rem;
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-xs;
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-xs;
   text-align: left;
   vertical-align: bottom;
   font-weight: 700;
   padding: 0.5rem 0.75rem;
-  border: 1px solid $neutral500;
+  border: 1px solid palette.$neutral500;
 
   &--sortable {
     position: relative;
   }
 
   &--sortable:hover {
-    background-color: $blueberry100;
+    background-color: palette.$blueberry100;
     cursor: pointer;
   }
 
   &--sortable:focus-within {
-    outline: 3px solid $black;
+    outline: 3px solid palette.$black;
     outline-offset: -3px;
   }
 
   @media (min-width: map.get($grid-breakpoints, lg)) {
     padding: 1rem;
     height: 5.5rem;
-    font-size: $font-size-md;
-    line-height: $lineheight-size-sm;
+    font-size: font-settings.$font-size-md;
+    line-height: font-settings.$lineheight-size-sm;
     font-weight: 700;
   }
 
   &--compact {
-    padding: getSpacer(2xs) getSpacer(3xs) getSpacer(4xs);
+    padding: spacers.getSpacer(2xs) spacers.getSpacer(3xs) spacers.getSpacer(4xs);
     line-height: 18px;
     font-size: 14px;
     height: unset;
 
     @media (min-width: map.get($grid-breakpoints, sm)) {
-      padding: getSpacer(s) getSpacer(3xs) getSpacer(3xs);
+      padding: spacers.getSpacer(s) spacers.getSpacer(3xs) spacers.getSpacer(3xs);
       line-height: 20px;
-      font-size: $font-size-xs;
+      font-size: font-settings.$font-size-xs;
       height: unset;
     }
   }
@@ -235,11 +235,11 @@ table .table-body .table-row {
 
 .table__cell {
   height: 2, 375;
-  font-size: $font-size-xs;
+  font-size: font-settings.$font-size-xs;
   line-height: 1.5rem;
   padding: 0.5rem 0.75rem;
   text-align: left;
-  border: 1px solid $neutral500;
+  border: 1px solid palette.$neutral500;
 
   &--center {
     text-align: center;
@@ -256,17 +256,17 @@ table .table-body .table-row {
   @media (min-width: map.get($grid-breakpoints, lg)) {
     padding: 1rem;
     height: 3.625rem;
-    font-size: $font-size-sm;
+    font-size: font-settings.$font-size-sm;
     line-height: 1.75rem;
   }
 
   &--compact {
-    padding: getSpacer(4xs) getSpacer(3xs);
+    padding: spacers.getSpacer(4xs) spacers.getSpacer(3xs);
     font-size: 14px;
 
     @media (min-width: map.get($grid-breakpoints, sm)) {
-      padding: getSpacer(3xs);
-      font-size: $font-size-xs;
+      padding: spacers.getSpacer(3xs);
+      font-size: font-settings.$font-size-xs;
     }
   }
 }
@@ -274,18 +274,18 @@ table .table-body .table-row {
 .table__cell-expander {
   text-align: center;
   width: min-content;
-  padding: 0 getSpacer(3xs);
+  padding: 0 spacers.getSpacer(3xs);
   vertical-align: middle;
 }
 
 .table__row--expandable {
   &--selected {
-    background: $neutral100;
+    background: palette.$neutral100;
   }
 
   &:hover {
     cursor: pointer;
-    background: $blueberry50;
+    background: palette.$blueberry50;
   }
 }
 
@@ -301,7 +301,7 @@ table .table-body .table-row {
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
       &--open {
-        border-bottom: 1px solid $neutral100;
+        border-bottom: 1px solid palette.$neutral100;
       }
     }
   }

package/components/Tabs/TabList/styles.module.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
+@use '../../../scss/breakpoints' as *;
 @import '../../../scss/supernova/styles/colors';
-@import '../../../scss/breakpoints';
 
 .tab-list {
   $tab-list: &;

package/components/Tabs/TabPanel/styles.module.scss

@@ -1,14 +1,14 @@
 @use 'sass:map';
-@import '../../../scss/spacers';
-@import '../../../scss/palette';
-@import '../../../scss/breakpoints';
+@use '../../../scss/spacers' as spacers;
+@use '../../../scss/palette' as palette;
+@use '../../../scss/breakpoints' as *;
 @import '../../../scss/supernova/styles/colors';
 
 .tab-panel {
   $tab-panel: &;
   $colors: 'blueberry', 'neutral', 'white';
 
-  padding: getSpacer(l) getSpacer(s) getSpacer(xl);
+  padding: spacers.getSpacer(l) spacers.getSpacer(s) spacers.getSpacer(xl);
   width: 100%;
   border-bottom: 1px solid var(--color-action-border-onlight-focus);
 
@@ -22,7 +22,7 @@
     border-radius: 0 0 0.5rem 0.5rem;
     border: 1px solid var(--color-action-border-onlight-focus);
     border-top: 0;
-    padding: getSpacer(xl) getSpacer(m) getSpacer(2xl);
+    padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xl);
 
     &#{$tab-panel}--first {
       border-radius: 0;

package/components/Tabs/index.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useState, useRef } from "react";
+import React__default, { useState, useRef } from "react";
 import classNames from "classnames";
-import { a as Tab, T as TabList } from "../../TabList.js";
+import { T as TabList, a as Tab } from "../../TabList.js";
 import { T as TabPanel } from "../../TabPanel.js";
 import designsystemlayout from "../../scss/layout.module.scss";
 import styles from "./styles.module.scss";
@@ -61,7 +61,7 @@ const TabsRoot = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { ref: tabsRef, style: { marginTop: "-50px" }, children: /* @__PURE__ */ jsx(TabPanel, { ref: tabPanelRef, color, isFirst: activeTabIndex == 0, children: React.Children.toArray(children)[activeTabIndex] }) })
+    /* @__PURE__ */ jsx("div", { ref: tabsRef, style: { marginTop: "-50px" }, children: /* @__PURE__ */ jsx(TabPanel, { ref: tabPanelRef, color, isFirst: activeTabIndex == 0, children: React__default.Children.toArray(children)[activeTabIndex] }) })
   ] });
 };
 const Tabs = TabsRoot;

package/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets aria label on the \"scroll to the right\" button in TabList */\n  ariaLabelRightButton?: string;\n  /** Sets aria label on the \"scroll to the left\" button in TabList */\n  ariaLabelLeftButton?: string;\n  /** Overrides the default z-index of the tabs header */\n  zIndex?: number;\n}\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  ariaLabelRightButton,\n  ariaLabelLeftButton,\n  zIndex,\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n        style={{\n          zIndex: zIndex,\n        }}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n          ariaLabelLeftButton={ariaLabelLeftButton}\n          ariaLabelRightButton={ariaLabelRightButton}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":[],"mappings":";;;;;;;AAwCA,MAAM,WAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,cAAc;AACnC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,CAAC;AACtD,QAAA,UAAU,OAAuB,IAAI;AACrC,QAAA,cAAc,OAAuB,IAAI;AACzC,QAAA,aAAa,OAAuB,IAAI;AAE9C,MAAI,cAA2B;AAC/B,MAAI,UAAU,SAAS;AACP,kBAAA;AAAA,EAAA;AAGV,QAAA,gBAAgB,CAAC,aAA2B;AAChD,QAAI,CAAC,cAAc;AACjB,2BAAqB,QAAQ;AAAA,IAAA;AAAA,EAEjC;AAEM,QAAA,iBAAiB,eAAe,YAAY;AAGhD,SAAA,qBAAC,OAAI,EAAA,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,oBAAoB,CAAC,GAAG,eAAa,QACjH,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,WAAW,OAAO,kBAAkB,GAAG;AAAA,UAChD,CAAC,OAAO,0BAA0B,CAAC,GAAG;AAAA,QAAA,CACvC;AAAA,QACD,OAAO;AAAA,UACL;AAAA,QACF;AAAA,QAEA,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,gBAAgB,CAAC,UAAkB,cAAc,KAAK;AAAA,cACtD,aAAa;AAAA,cACb;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA;AAAA,cAEC;AAAA,YAAA;AAAA,UACH;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,kBAAkB,KAAK,EAAE,CAAC,EAAG,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1F;AAAA,IACA,oBAAC,OAAI,EAAA,KAAK,SAAS,OAAO,EAAE,WAAW,QAAA,GACrC,UAAA,oBAAC,UAAS,EAAA,KAAK,aAAa,OAAc,SAAS,kBAAkB,GAClE,UAAM,MAAA,SAAS,QAAQ,QAAQ,EAAE,cAAc,EAClD,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;AAKA,MAAM,OAAO;AACb,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets aria label on the \"scroll to the right\" button in TabList */\n  ariaLabelRightButton?: string;\n  /** Sets aria label on the \"scroll to the left\" button in TabList */\n  ariaLabelLeftButton?: string;\n  /** Overrides the default z-index of the tabs header */\n  zIndex?: number;\n}\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  ariaLabelRightButton,\n  ariaLabelLeftButton,\n  zIndex,\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n        style={{\n          zIndex: zIndex,\n        }}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n          ariaLabelLeftButton={ariaLabelLeftButton}\n          ariaLabelRightButton={ariaLabelRightButton}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["React"],"mappings":";;;;;;;AAwCA,MAAM,WAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,cAAc;AACnC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,CAAC;AACtD,QAAA,UAAU,OAAuB,IAAI;AACrC,QAAA,cAAc,OAAuB,IAAI;AACzC,QAAA,aAAa,OAAuB,IAAI;AAE9C,MAAI,cAA2B;AAC/B,MAAI,UAAU,SAAS;AACP,kBAAA;AAAA,EAAA;AAGV,QAAA,gBAAgB,CAAC,aAA2B;AAChD,QAAI,CAAC,cAAc;AACjB,2BAAqB,QAAQ;AAAA,IAAA;AAAA,EAEjC;AAEM,QAAA,iBAAiB,eAAe,YAAY;AAGhD,SAAA,qBAAC,OAAI,EAAA,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,oBAAoB,CAAC,GAAG,eAAa,QACjH,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,WAAW,OAAO,kBAAkB,GAAG;AAAA,UAChD,CAAC,OAAO,0BAA0B,CAAC,GAAG;AAAA,QAAA,CACvC;AAAA,QACD,OAAO;AAAA,UACL;AAAA,QACF;AAAA,QAEA,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,gBAAgB,CAAC,UAAkB,cAAc,KAAK;AAAA,cACtD,aAAa;AAAA,cACb;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA;AAAA,cAEC;AAAA,YAAA;AAAA,UACH;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,kBAAkB,KAAK,EAAE,CAAC,EAAG,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1F;AAAA,IACA,oBAAC,OAAI,EAAA,KAAK,SAAS,OAAO,EAAE,WAAW,QAAA,GACrC,UAAA,oBAAC,UAAS,EAAA,KAAK,aAAa,OAAc,SAAS,kBAAkB,GAClE,UAAMA,eAAA,SAAS,QAAQ,QAAQ,EAAE,cAAc,EAClD,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;AAKA,MAAM,OAAO;AACb,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;"}

package/components/Tabs/styles.module.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
+@use '../../scss/breakpoints' as *;
 @import '../../scss/supernova/styles/colors';
-@import '../../scss/breakpoints';
 
 .tab-list-wrapper {
   position: relative;

package/components/Tag/styles.module.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/breakpoints' as *;
 
 .tag {
   $tag: &;
@@ -28,45 +28,45 @@
     &--#{$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.$palette-map, #{$color}900);
+        border-color: map.get(palette.$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.$palette-map, #{$color}900);
+        border-color: map.get(palette.$palette-map, #{$color}200);
       } @else {
-        color: map.get($palette-map, #{$color}800);
-        border-color: map.get($palette-map, #{$color}200);
+        color: map.get(palette.$palette-map, #{$color}800);
+        border-color: map.get(palette.$palette-map, #{$color}200);
       }
 
       &#{$tag}--emphasised {
-        background-color: map.get($palette-map, #{$color}50);
+        background-color: map.get(palette.$palette-map, #{$color}50);
       }
     }
   }
 
   &--medium {
-    padding: 0 getSpacer(xs);
+    padding: 0 spacers.getSpacer(xs);
     min-height: 1.625rem;
 
     &#{$tag}--has-icon {
-      padding: 0 getSpacer(xs) 0 0.375rem;
+      padding: 0 spacers.getSpacer(xs) 0 0.375rem;
     }
 
     #{$tag}__icon {
-      margin-right: getSpacer(4xs);
+      margin-right: spacers.getSpacer(4xs);
     }
   }
 
   &--large {
-    padding: 0 getSpacer(xs);
+    padding: 0 spacers.getSpacer(xs);
     min-height: 1.875rem;
 
     &#{$tag}--has-icon {
-      padding: getSpacer(4xs) getSpacer(xs) getSpacer(4xs) 0.375rem;
+      padding: spacers.getSpacer(4xs) spacers.getSpacer(xs) spacers.getSpacer(4xs) 0.375rem;
     }
 
     #{$tag}__icon {
-      margin-right: getSpacer(4xs);
+      margin-right: spacers.getSpacer(4xs);
     }
   }
 }

package/components/TagList/index.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import { AnalyticsId } from "../../constants.js";
 import styles from "./styles.module.scss";
 const TagList = ({ children, testId }) => {
-  return /* @__PURE__ */ jsx("ul", { className: styles["tag-list"], "data-testid": testId, "data-analyticsid": AnalyticsId.TagList, children: React.Children.map(children, (child) => /* @__PURE__ */ jsx("li", { className: styles["tag-list__item"], children: child })) });
+  return /* @__PURE__ */ jsx("ul", { className: styles["tag-list"], "data-testid": testId, "data-analyticsid": AnalyticsId.TagList, children: React__default.Children.map(children, (child) => /* @__PURE__ */ jsx("li", { className: styles["tag-list__item"], children: child })) });
 };
 export {
   TagList as default

package/components/TagList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/TagList/TagList.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TagListPropsProps {\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst TagList: React.FC<TagListPropsProps> = ({ children, testId }) => {\n  return (\n    <ul className={styles['tag-list']} data-testid={testId} data-analyticsid={AnalyticsId.TagList}>\n      {React.Children.map(children, child => (\n        <li className={styles['tag-list__item']}>{child}</li>\n      ))}\n    </ul>\n  );\n};\n\nexport default TagList;\n"],"names":[],"mappings":";;;;AAYA,MAAM,UAAuC,CAAC,EAAE,UAAU,aAAa;AAEnE,SAAA,oBAAC,MAAG,EAAA,WAAW,OAAO,UAAU,GAAG,eAAa,QAAQ,oBAAkB,YAAY,SACnF,UAAA,MAAM,SAAS,IAAI,UAAU,CAC5B,UAAA,oBAAC,MAAG,EAAA,WAAW,OAAO,gBAAgB,GAAI,UAAM,MAAA,CAAA,CACjD,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/TagList/TagList.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TagListPropsProps {\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst TagList: React.FC<TagListPropsProps> = ({ children, testId }) => {\n  return (\n    <ul className={styles['tag-list']} data-testid={testId} data-analyticsid={AnalyticsId.TagList}>\n      {React.Children.map(children, child => (\n        <li className={styles['tag-list__item']}>{child}</li>\n      ))}\n    </ul>\n  );\n};\n\nexport default TagList;\n"],"names":["React"],"mappings":";;;;AAYA,MAAM,UAAuC,CAAC,EAAE,UAAU,aAAa;AAEnE,SAAA,oBAAC,MAAG,EAAA,WAAW,OAAO,UAAU,GAAG,eAAa,QAAQ,oBAAkB,YAAY,SACnF,UAAAA,eAAM,SAAS,IAAI,UAAU,CAC5B,UAAA,oBAAC,MAAG,EAAA,WAAW,OAAO,gBAAgB,GAAI,UAAM,MAAA,CAAA,CACjD,EACH,CAAA;AAEJ;"}