@helsenorge/designsystem-react 2.17.0 → 3.0.1

package/components/NotificationPanel/styles.module.scss

@@ -1,78 +1,120 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_font-settings.scss';
-@import '../../scss/_palette.scss';
-@import '../AnchorLink/styles.module.scss';
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/font-settings';
+@import '../../scss/palette';
+@import '../AnchorLink/styles.module';
 
 .notification-panel {
   $panel: &;
+
   display: flex;
-  width: inherit;
+  padding: getSpacer(2xs) getSpacer(s) getSpacer(2xs) getSpacer(2xs);
+  box-shadow: 0.25rem 0.25rem 0.375rem rgb(0 0 0 / 15%);
+  border-radius: 0.25rem;
 
-  &--has-children {
-    padding: getSpacer(2xs) getSpacer(s) getSpacer(2xs) getSpacer(2xs);
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    padding-left: getSpacer(s);
+    padding-right: getSpacer(m);
     #{$panel}__icon {
-      margin-top: getSpacer(2xs);
-      margin-right: getSpacer(2xs);
-    }
-    #{$panel}__content {
-      margin-top: getSpacer(s);
-      margin-bottom: getSpacer(s);
-    }
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      padding-left: getSpacer(s);
-      padding-right: getSpacer(m);
-      #{$panel}__icon {
-        margin-right: getSpacer(m);
-      }
+      margin-right: getSpacer(m);
     }
   }
-  &--label-only {
-    align-items: center;
-    padding: getSpacer(m) getSpacer(s) getSpacer(m) getSpacer(2xs);
-    #{$panel}__icon {
-      display: flex;
-      margin-right: getSpacer(2xs);
+
+  &__compact {
+    width: fit-content;
+    font-weight: 600;
+    font-size: $font-size-xs;
+    line-height: 1.25rem;
+    box-shadow: none;
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      padding-left: getSpacer(2xs);
+      padding-right: getSpacer(s);
+    }
+
+    &--basic {
+      font-weight: 400;
     }
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      padding: getSpacer(l) getSpacer(m) getSpacer(l) getSpacer(s);
-      #{$panel}__icon {
-        margin-right: getSpacer(s);
-      }
+
+    &--outline {
+      border: none;
     }
   }
+  #{$panel}__icon {
+    margin-right: getSpacer(2xs);
+  }
+
   &--dismissable {
     padding: getSpacer(2xs) getSpacer(2xs) getSpacer(m) getSpacer(2xs);
   }
-  &--dismissable#{&}--has-children {
-    padding-left: getSpacer(s);
-  }
+
   &--small {
-    max-width: map-get($grid-breakpoints, sm);
+    max-width: map.get($grid-breakpoints, sm);
   }
+
   &--medium {
-    max-width: map-get($grid-breakpoints, md);
+    max-width: map.get($grid-breakpoints, md);
   }
+
   &--large {
-    max-width: map-get($grid-breakpoints, lg);
+    max-width: map.get($grid-breakpoints, lg);
   }
+
   &--info {
-    background-color: $kiwi50;
+    border: 0.125rem solid $blueberry700;
+    background-color: $blueberry50;
   }
+
+  &--info.notification-panel__compact {
+    box-shadow: none;
+    background-color: transparent;
+  }
+
+  &--info.notification-panel__compact--basic {
+    border: none;
+  }
+
   &--warn {
+    border: 0.125rem solid $banana700;
     background-color: $banana50;
   }
+
+  &--warn.notification-panel__compact {
+    box-shadow: none;
+    background-color: transparent;
+  }
+
+  &--warn.notification-panel__compact--basic {
+    border: none;
+  }
+
   &--alert {
-    background-color: $cherry100;
+    border: 0.125rem solid $cherry700;
+    background-color: $cherry50;
   }
-  &--alert#{&}--label-only {
-    color: $cherry500;
+
+  &--alert.notification-panel__compact {
+    box-shadow: none;
+    background-color: transparent;
   }
-  &--crisis {
-    background-color: $black;
+
+  &--alert.notification-panel__compact--basic {
+    border: none;
   }
-  &--shadow {
-    box-shadow: 0 0.3rem getSpacer(2xs) -0.1rem rgba(0, 0, 0, 0.15);
+
+  &--success {
+    border: 0.125rem solid $kiwi900;
+    background-color: $kiwi50;
+  }
+
+  &--success.notification-panel__compact {
+    box-shadow: none;
+    background-color: transparent;
+  }
+
+  &--success.notification-panel__compact--basic {
+    border: none;
   }
 
   &__close {
@@ -82,74 +124,66 @@
   }
 
   &__content {
-    max-width: 772px;
-    p {
-      margin: 0;
-    }
+    align-self: center;
 
     a {
       @include anchorlink;
       @include anchorlink-icon;
     }
+  }
 
-    &--crisis {
-      color: $banana200;
-      a {
-        color: $white;
-        &:hover {
-          background-color: rgba(255, 255, 255, 0.2);
-          color: $white;
-        }
-        &:focus {
-          background-color: $white;
-          color: $black;
-          border-color: $white;
-        }
-        &[target='_blank'] {
-          &:after {
-            content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38px' height='38px' viewBox='0 0 48 48' fill='%23bdbab9'><polygon points='33.305,14.659,33.305,29.205,32.005,29.205,32.005,16.948,15.804,33.149,14.885,32.229,31.155,15.959,18.761,15.96,18.761,14.659' /></svg>");
-          }
-
-          &:focus {
-            &:after {
-              content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38px' height='38px' viewBox='0 0 48 48'><polygon points='33.305,14.659,33.305,29.205,32.005,29.205,32.005,16.948,15.804,33.149,14.885,32.229,31.155,15.959,18.761,15.96,18.761,14.659' /></svg>");
-            }
-          }
-        }
-      }
-    }
+  &__children.notification-panel__label-and-content--spacing {
+    font-weight: 500;
   }
 
-  &__label {
-    font-size: $font-size-sm;
+  &__label,
+  &__children {
+    font-size: $font-size-xs;
     line-height: $lineheight-size-xs;
-    font-weight: 600;
     margin: 0;
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      font-size: $font-size-md;
-      line-height: $lineheight-size-md;
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      font-size: $font-size-sm;
+      line-height: 1.625rem;
     }
   }
-}
 
-.fluid-wrapper {
-  display: flex;
-  justify-content: center;
-  width: 100%;
+  &__label {
+    font-weight: 700;
+    margin: getSpacer(2xs) 0 0 0;
 
-  &--info {
-    background-color: $kiwi50;
+    &__compact {
+      font-weight: 600;
+      font-size: $font-size-xs;
+      line-height: 1.25rem;
+    }
+
+    &__compact--basic {
+      font-weight: 400;
+    }
   }
-  &--warn {
-    background-color: $banana50;
+
+  &__label--no-content {
+    margin: 0;
+    font-weight: 600;
   }
-  &--alert {
-    background-color: $cherry100;
+
+  &__children {
+    font-weight: 600;
+    padding: getSpacer(3xs) 0;
   }
-  &--crisis {
-    background-color: $black;
+
+  &__icon {
+    line-height: 0;
   }
-  &--shadow {
-    box-shadow: 0 0.3rem getSpacer(2xs) -0.1rem rgba(0, 0, 0, 0.15);
+
+  &--with-content {
+    padding-bottom: getSpacer(xs);
   }
 }
+
+.fluid-wrapper {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}

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

@@ -3,28 +3,28 @@ export type Styles = {
   anchorlink__icon: string;
   'anchorlink-wrapper': string;
   'fluid-wrapper': string;
-  'fluid-wrapper--alert': string;
-  'fluid-wrapper--crisis': string;
-  'fluid-wrapper--info': string;
-  'fluid-wrapper--shadow': string;
-  'fluid-wrapper--warn': string;
   'notification-panel': string;
+  'notification-panel__children': string;
   'notification-panel__close': string;
+  'notification-panel__compact': string;
+  'notification-panel__compact--basic': string;
+  'notification-panel__compact--outline': string;
   'notification-panel__content': string;
-  'notification-panel__content--crisis': string;
   'notification-panel__icon': string;
   'notification-panel__label': string;
+  'notification-panel__label__compact': string;
+  'notification-panel__label__compact--basic': string;
+  'notification-panel__label--no-content': string;
+  'notification-panel__label-and-content--spacing': string;
   'notification-panel--alert': string;
-  'notification-panel--crisis': string;
   'notification-panel--dismissable': string;
-  'notification-panel--has-children': string;
   'notification-panel--info': string;
-  'notification-panel--label-only': string;
   'notification-panel--large': string;
   'notification-panel--medium': string;
-  'notification-panel--shadow': string;
   'notification-panel--small': string;
+  'notification-panel--success': string;
   'notification-panel--warn': string;
+  'notification-panel--with-content': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/Panel/Panel.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { TitleTags } from '../Title';
-import { ButtonProps, ButtonTags } from '../Button';
 import { AnchorTarget } from '../../constants';
+import { ButtonProps, ButtonTags } from '../Button';
+import { TitleTags } from '../Title';
 export declare enum PanelStatus {
     normal = "normal",
     new = "new",

package/components/Panel/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAe,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAe,MAAM,iBAAiB,CAAC;AAgB5D,oBAAY,WAAW;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,QAAQ,aAAa;IACrB,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,yKAAyK;IACzK,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,4IAA4I;IAC5I,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,oFAAoF;IACpF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAiDD,QAAA,MAAM,KAAK,uFAqMT,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,YAAY,EAAe,MAAM,iBAAiB,CAAC;AAM5D,OAAe,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAS5D,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAI5C,oBAAY,WAAW;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,QAAQ,aAAa;IACrB,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,yKAAyK;IACzK,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,4IAA4I;IAC5I,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,oFAAoF;IACpF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAiDD,QAAA,MAAM,KAAK,uFAwLT,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/components/Panel/index.js

@@ -1,2 +1,2 @@
-import"../../Panel.js";import{c as H,a as I,b as J,P as K}from"../../Panel.js";import"react";import"classnames";import"./styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../../constants.js";import"../../Button.js";import"../../utils/environment.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../Icons/ChevronDown.js";import"../Icons/ChevronUp.js";import"../Icons/AlertSignFill.js";import"../Icons/Pencil.js";import"../Icons/Calendar.js";import"../Icons/Watch.js";import"../../hooks/usePrevious.js";import"../../utils/accessibility.js";import"../../Badge.js";import"../Badge/styles.module.scss";export{H as PanelLayout,I as PanelStatus,J as PanelVariant,K as default};
+import{P as o}from"../../Panel.js";import{c as I,a as J,b as K}from"../../Panel.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/useExpand.js";import"../../hooks/usePrevious.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/palette.js";import"../../utils/accessibility.js";import"../../Badge.js";import"../Badge/styles.module.scss";import"../../Button.js";import"../Icons/Icon.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../Icons/AlertSignFill.js";import"../Icons/Calendar.js";import"../Icons/ChevronDown.js";import"../Icons/ChevronUp.js";import"../Icons/Pencil.js";import"../Icons/Watch.js";import"../../Title.js";import"../Title/styles.module.scss";import"./styles.module.scss";export{I as PanelLayout,J as PanelStatus,K as PanelVariant,o as default};
 //# sourceMappingURL=index.js.map

package/components/Panel/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';
 
 .panel-wrapper {
   width: 100%;
@@ -10,14 +11,15 @@
 @mixin panel-padding {
   padding: getSpacer(s) getSpacer(s) getSpacer(s) getSpacer(s);
 
-  @media (min-width: map-get($grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     padding: getSpacer(l) getSpacer(m) getSpacer(l) getSpacer(l);
   }
 }
 
 @mixin panel-padding-icon {
   padding: getSpacer(m) getSpacer(s) getSpacer(l) getSpacer(s);
-  @media (min-width: map-get($grid-breakpoints, md)) {
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
     padding: getSpacer(m) getSpacer(m) getSpacer(l) getSpacer(m);
   }
 }
@@ -28,26 +30,27 @@
   }
 
   &:focus {
-    box-shadow: inset 0px 0px 0px 3px $box-shadow-color;
+    box-shadow: inset 0 0 0 3px $box-shadow-color;
   }
 }
 
 .panel {
   @include panel-padding;
+
   outline: none;
   position: relative;
   width: 100%;
   box-sizing: border-box;
 
   &__container {
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       display: flex;
       flex-direction: row;
       flex: 1;
     }
 
     &--layout3 {
-      @media (min-width: map-get($grid-breakpoints, lg)) {
+      @media (min-width: map.get($grid-breakpoints, lg)) {
         display: flex;
         flex-direction: row;
       }
@@ -61,13 +64,14 @@
   &--with-icon {
     display: flex;
     flex-direction: row;
+
     @include panel-padding-icon;
   }
 
   &__icon {
     padding-right: getSpacer(s);
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       padding-right: getSpacer(l);
     }
 
@@ -91,7 +95,8 @@
     &--layout1 {
       display: flex;
       flex-direction: column;
-      @media (min-width: map-get($grid-breakpoints, md)) {
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
         flex-direction: row;
       }
     }
@@ -99,7 +104,8 @@
     &--layout2 {
       display: flex;
       flex-direction: column;
-      @media (min-width: map-get($grid-breakpoints, md)) {
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
         max-width: 200px;
       }
     }
@@ -108,7 +114,8 @@
       display: flex;
       flex-direction: column;
       padding-left: 0;
-      @media (min-width: map-get($grid-breakpoints, lg)) {
+
+      @media (min-width: map.get($grid-breakpoints, lg)) {
         flex-direction: row;
         padding-left: getSpacer(m);
       }
@@ -117,9 +124,11 @@
     &--layout3a {
       flex: 0.4;
     }
+
     &--layout3b {
       flex: 0.55;
     }
+
     &--layout3c {
       flex: 0.65;
     }
@@ -128,7 +137,8 @@
   &__btn-container {
     display: flex;
     flex-direction: column;
-    @media (min-width: map-get($grid-breakpoints, lg)) {
+
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       align-self: flex-end;
       flex-direction: row;
     }
@@ -137,10 +147,12 @@
       display: flex;
       align-self: initial;
       flex-direction: column;
-      @media (min-width: map-get($grid-breakpoints, lg)) {
+
+      @media (min-width: map.get($grid-breakpoints, lg)) {
         align-self: flex-end;
       }
     }
+
     &--padding-top {
       padding-top: getSpacer(s);
     }
@@ -148,7 +160,8 @@
 
   &__details-btn {
     align-self: flex-start;
-    @media (min-width: map-get($grid-breakpoints, lg)) {
+
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       align-self: flex-end;
       margin-left: auto;
     }
@@ -156,13 +169,11 @@
 
   &__expand {
     position: unset;
-    &:after {
-      bottom: 0;
+
+    &::after {
+      inset: 0;
       content: '';
-      left: 0;
       position: absolute;
-      right: 0;
-      top: 0;
     }
   }
 
@@ -192,7 +203,7 @@
   }
 
   &--white#{&}--selected {
-    box-shadow: inset 0px 0px 0px 6px $neutral100;
+    box-shadow: inset 0 0 0 6px $neutral100;
   }
 
   &--stroke {
@@ -201,6 +212,7 @@
 
   &--stroke#{&}--clickable {
     @include hover-and-focus-effects($neutral50, $neutral100);
+
     &:focus {
       border-color: $neutral600;
     }
@@ -236,7 +248,7 @@
     cursor: pointer;
   }
 
-  //Panel status
+  // Panel status
   &--status {
     &::before {
       content: '';
@@ -248,6 +260,7 @@
       border-left-style: solid;
     }
   }
+
   &--new {
     &::before {
       border-left-color: $blueberry600;
@@ -271,23 +284,28 @@
 .panel-details {
   background-color: $neutral50;
   display: none;
+
   @include panel-padding;
 
   @media print {
     display: flex;
     flex-direction: column;
   }
+
   &--open {
     display: flex;
     flex-direction: column;
   }
+
   &--line {
     background: $white;
     border-bottom: 1px solid $neutral500;
   }
+
   &--white {
     background: $white;
   }
+
   &--with-icon {
     @include panel-padding-icon;
   }
@@ -298,6 +316,7 @@
   color: $cherry500;
   display: flex;
   margin-bottom: getSpacer(2xs);
+
   span {
     padding-left: 5px;
     align-self: center;
@@ -308,11 +327,12 @@
     color: $blueberry800;
   }
 }
+
 .panel-content-a {
   flex: 1;
   padding-right: 0;
 
-  @media (min-width: map-get($grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     padding-right: getSpacer(m);
   }
 
@@ -332,9 +352,11 @@
   &--layout3a {
     flex: 0.6;
   }
+
   &--layout3b {
     flex: 0.45;
   }
+
   &--layout3c {
     flex: 0.35;
   }
@@ -344,19 +366,21 @@
   flex: 1;
   padding-top: getSpacer(s);
 
-  @media (min-width: map-get($grid-breakpoints, lg)) {
+  @media (min-width: map.get($grid-breakpoints, lg)) {
     padding-top: 0;
   }
 
   &--layout1 {
     padding-top: getSpacer(s);
     padding-left: 0;
-    @media (min-width: map-get($grid-breakpoints, md)) {
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
       padding-right: getSpacer(m);
     }
   }
+
   &--layout3 {
-    @media (min-width: map-get($grid-breakpoints, lg)) {
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       padding-right: getSpacer(m);
     }
   }
@@ -366,7 +390,7 @@
   display: flex;
   flex-direction: column;
 
-  @media (min-width: map-get($grid-breakpoints, lg)) {
+  @media (min-width: map.get($grid-breakpoints, lg)) {
     padding-top: getSpacer(xs);
     flex-direction: row;
   }
@@ -376,7 +400,7 @@
     align-items: center;
     padding-bottom: getSpacer(2xs);
 
-    @media (min-width: map-get($grid-breakpoints, lg)) {
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       padding-top: 0;
       padding-right: getSpacer(m);
       padding-bottom: 0;

package/components/PanelList/PanelList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelList.d.ts","sourceRoot":"","sources":["../../../src/components/PanelList/PanelList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAc,EAAc,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,UAAU,cAAc;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAKD,QAAA,MAAM,SAAS,uFAeb,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"PanelList.d.ts","sourceRoot":"","sources":["../../../src/components/PanelList/PanelList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAc,EAAc,YAAY,EAAE,MAAM,UAAU,CAAC;AAI3D,UAAU,cAAc;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAKD,QAAA,MAAM,SAAS,uFAeb,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/components/PanelList/index.js

@@ -1,2 +1,2 @@
-import r from"react";import a from"./styles.module.scss";import{AnalyticsId as c}from"../../constants.js";import{b as p,P as f}from"../../Panel.js";import P from"classnames";import"../Panel/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../../Button.js";import"../../utils/environment.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../Icons/ChevronDown.js";import"../Icons/ChevronUp.js";import"../Icons/AlertSignFill.js";import"../Icons/Pencil.js";import"../Icons/Calendar.js";import"../Icons/Watch.js";import"../../hooks/usePrevious.js";import"../../utils/accessibility.js";import"../../Badge.js";import"../Badge/styles.module.scss";const y=o=>r.isValidElement(o)&&o.type===f,Y=r.forwardRef(function(e,n){const{testId:s,children:l,variant:i=p.fill}=e,d=(t,m)=>r.cloneElement(t,{variant:i,noTopBorder:i===p.line&&!m,className:P(t.props.className,i!==p.line&&a["panel-list__panel"])});return r.createElement("div",{ref:n,"data-testid":s,className:a["panel-list"],"data-analyticsid":c.PanelList},r.Children.map(l,(t,m)=>y(t)?d(t,m===0):t))});export{Y as default};
+import r from"react";import c from"classnames";import{AnalyticsId as f}from"../../constants.js";import{b as p,P}from"../../Panel.js";import a from"./styles.module.scss";import"../../hooks/useExpand.js";import"../../hooks/usePrevious.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/palette.js";import"../../utils/accessibility.js";import"../../Badge.js";import"../Badge/styles.module.scss";import"../../Button.js";import"../Icons/Icon.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../Icons/AlertSignFill.js";import"../Icons/Calendar.js";import"../Icons/ChevronDown.js";import"../Icons/ChevronUp.js";import"../Icons/Pencil.js";import"../Icons/Watch.js";import"../../Title.js";import"../Title/styles.module.scss";import"../Panel/styles.module.scss";const y=o=>r.isValidElement(o)&&o.type===P,N=r.forwardRef(function(e,n){const{testId:s,children:l,variant:i=p.fill}=e,d=(t,m)=>r.cloneElement(t,{variant:i,noTopBorder:i===p.line&&!m,className:c(t.props.className,i!==p.line&&a["panel-list__panel"])});return r.createElement("div",{ref:n,"data-testid":s,className:a["panel-list"],"data-analyticsid":f.PanelList},r.Children.map(l,(t,m)=>y(t)?d(t,m===0):t))}),Z=N;export{Z as default};
 //# sourceMappingURL=index.js.map