@helsenorge/designsystem-react 2.17.0 → 3.0.0

package/components/MaxCharacters/MaxCharacters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MaxCharacters.d.ts","sourceRoot":"","sources":["../../../src/components/MaxCharacters/MaxCharacters.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAI3C,UAAU,kBAAkB;IAC1B,2BAA2B;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,aAAa,EAAE,MAAM,CAAC;IACtB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAe/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"MaxCharacters.d.ts","sourceRoot":"","sources":["../../../src/components/MaxCharacters/MaxCharacters.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAI3C,UAAU,kBAAkB;IAC1B,2BAA2B;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,aAAa,EAAE,MAAM,CAAC;IACtB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAe/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAiBzC,OAAO,EAAe,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEtD,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,UAAU;IACzB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IACrC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IAC9B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,6BAA6B;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAuCD,QAAA,MAAM,KAAK;YAAW,UAAU,GAAG,WAAW;;;;;;;;;CAyK7C,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAe,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAgBtD,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,UAAU;IACzB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IACrC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IAC9B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,6BAA6B;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAuCD,QAAA,MAAM,KAAK;YAAW,UAAU,GAAG,WAAW;;;;;;;;;CAyK7C,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/components/Modal/index.js

@@ -1,2 +1,2 @@
-import"../../Modal.js";import{b as N,a as O,M as P}from"../../Modal.js";import"react";import"classnames";import"../../theme/palette.js";import"../../Button.js";import"../../constants.js";import"../../utils/environment.js";import"../../theme/currys/color.js";import"../../theme/index.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"./styles.module.scss";import"../Icons/AlertSignStroke.js";import"../Icons/AlertSignFill.js";import"../../hooks/useFocusTrap.js";import"../../utils/focus.js";import"../../hooks/useFocusableElements.js";import"../../hooks/useElementList.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../Title.js";import"../Title/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../Icons/CheckOutline.js";import"../Portal/index.js";import"react-dom";export{N as ModalSize,O as ModalVariants,P as default};
+import{M as r}from"../../Modal.js";import{b as N,a as O}from"../../Modal.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/useFocusTrap.js";import"../../hooks/useFocusableElements.js";import"../../hooks/useElementList.js";import"../../utils/focus.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../theme/palette.js";import"../../uuid.js";import"../../utils/environment.js";import"../../Button.js";import"../Icons/Icon.js";import"../../hooks/useUuid.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"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../Icons/AlertSignFill.js";import"../Icons/AlertSignStroke.js";import"../Icons/CheckOutline.js";import"../Portal/index.js";import"react-dom";import"../../Title.js";import"../Title/styles.module.scss";import"./styles.module.scss";export{N as ModalSize,O as ModalVariants,r as default};
 //# sourceMappingURL=index.js.map

package/components/NotificationPanel/DetailButton/DetailButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type Props = {
+    content: React.ReactNode;
+    buttonClosedText: string;
+    buttonText: string;
+    expanderOpenFromStart: boolean;
+};
+export declare const DetailButton: React.FC<Props>;
+export {};
+//# sourceMappingURL=DetailButton.d.ts.map

package/components/NotificationPanel/DetailButton/DetailButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailButton.d.ts","sourceRoot":"","sources":["../../../../src/components/NotificationPanel/DetailButton/DetailButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,qBAAqB,EAAE,OAAO,CAAC;CAChC,CAAC;AACF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+BxC,CAAC"}

package/components/NotificationPanel/DetailButton/componentdata.json

@@ -0,0 +1 @@
+{"props":{"content":{"defaultValue":null,"description":"","name":"content","declarations":[{"fileName":"src/components/NotificationPanel/DetailButton/DetailButton.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"ReactNode"}},"buttonClosedText":{"defaultValue":null,"description":"","name":"buttonClosedText","declarations":[{"fileName":"src/components/NotificationPanel/DetailButton/DetailButton.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string"}},"buttonText":{"defaultValue":null,"description":"","name":"buttonText","declarations":[{"fileName":"src/components/NotificationPanel/DetailButton/DetailButton.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string"}},"expanderOpenFromStart":{"defaultValue":null,"description":"","name":"expanderOpenFromStart","declarations":[{"fileName":"src/components/NotificationPanel/DetailButton/DetailButton.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"boolean"}}}}

package/components/NotificationPanel/DetailButton/styles.module.scss

@@ -0,0 +1,34 @@
+@import '../../../scss/_spacers.scss';
+@import '../../../scss/_breakpoints.scss';
+@import '../../../scss/_font-settings.scss';
+@import '../../../scss/_palette.scss';
+
+.notification-panel__detail-section {
+  display: flex;
+  flex-direction: column-reverse;
+  &__button--wrapper {
+    padding: 0.375rem 0 0.625rem 0;
+    font-size: $font-size-xs;
+    line-height: $lineheight-size-xs;
+  }
+  &__content {
+    padding: getSpacer(3xs) 0;
+    font-size: $font-size-xs;
+    line-height: $lineheight-size-xs;
+  }
+}
+html .notification-panel__detail.notification-panel__detail-button {
+  text-decoration: underline;
+  text-decoration-color: $blueberry600;
+  margin-left: -0.25rem;
+  padding: 0 0 0 getSpacer(3xs);
+  white-space: nowrap;
+  overflow: initial;
+  text-overflow: clip;
+  font-size: $font-size-sm;
+  line-height: 1.625rem;
+  height: 1.625rem;
+  @media (min-width: 0) {
+    min-height: unset;
+  }
+}

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

@@ -0,0 +1,13 @@
+export type Styles = {
+  'notification-panel__detail': string;
+  'notification-panel__detail-button': string;
+  'notification-panel__detail-section': string;
+  'notification-panel__detail-section__button--wrapper': string;
+  'notification-panel__detail-section__content': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/NotificationPanel/NotificationPanel.d.ts

@@ -1,20 +1,29 @@
 import React from 'react';
-export declare type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'crisis';
-export declare type NotificationPanelSizes = 'small' | 'medium' | 'large';
+export type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'success';
+export type NotificationCompactVariants = 'basic' | 'outline';
+export type NotificationPanelSizes = 'small' | 'medium' | 'large';
 export interface NotificationPanelProps {
     /** Adds custom classes to the element. */
     className?: string;
     /** Adds inner child elements. */
     children?: React.ReactNode;
+    /** Adds inner expander elements. */
+    expanderChildren?: React.ReactNode;
+    /** Text for expanderButton. */
+    expanderButtonText?: string;
+    /** Text for expanderButton when closed. */
+    expanderButtonClosedText?: string;
+    /** Makes expander be open from start. */
+    expanderOpenFromStart?: boolean;
     /** Changes the visual representation of the notification panel. */
     variant?: NotificationPanelVariants;
-    /** Adds a shadow effect around the notification panel. */
-    shadow?: boolean;
+    /** Makes the panel more compact. Available in basic and outline. */
+    compactVariant?: NotificationCompactVariants;
     /** Sets a fixed size for the content container. */
     size?: NotificationPanelSizes;
     /** Used in combination with dismissiable property to close the notification panel. */
     onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    /** Toggles the close button in the top right corner. Will only show if there are children. */
+    /** Toggles the close button in the top right corner. */
     dismissable?: boolean;
     /** Enables a fluid outer container that spans the entire width of parent. */
     fluid?: boolean;
@@ -24,8 +33,8 @@ export interface NotificationPanelProps {
     ariaLabelCloseBtn?: string;
     /** Custom id for the label */
     labelId?: string;
-    /** Custom role for the panel */
-    role?: 'alert';
+    /** Custom role for the panel. Default is "region". If variant is alert or crisis, the aria role will be set to "alert" unless the role-prop is also set. */
+    role?: 'region' | 'alert';
     /** Sets the data-testid attribute. */
     testId?: string;
 }

package/components/NotificationPanel/NotificationPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,oBAAY,yBAAyB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC7E,oBAAY,sBAAsB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAUlE,MAAM,WAAW,sBAAsB;IACrC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mEAAmE;IACnE,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAC9B,sFAAsF;IACtF,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAClE,8FAA8F;IAC9F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAiBD,QAAA,MAAM,iBAAiB,+FAmErB,CAAC;AAEH,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"NotificationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,2BAA2B,GAAG,OAAO,GAAG,SAAS,CAAC;AAC9D,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE,MAAM,WAAW,sBAAsB;IACrC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,+BAA+B;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mEAAmE;IACnE,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,oEAAoE;IACpE,cAAc,CAAC,EAAE,2BAA2B,CAAC;IAC7C,mDAAmD;IACnD,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAC9B,sFAAsF;IACtF,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAClE,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4JAA4J;IAC5J,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAeD,QAAA,MAAM,iBAAiB,+FA2HrB,CAAC;AAEH,eAAe,iBAAiB,CAAC"}

package/components/NotificationPanel/componentdata.json

@@ -1 +1 @@
-{"props":{"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Adds inner child elements.","name":"children","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"ReactNode"}},"variant":{"defaultValue":null,"description":"Changes the visual representation of the notification panel.","name":"variant","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"enum","raw":"NotificationPanelVariants","value":[{"value":"\"info\""},{"value":"\"warn\""},{"value":"\"alert\""},{"value":"\"crisis\""}]}},"shadow":{"defaultValue":null,"description":"Adds a shadow effect around the notification panel.","name":"shadow","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"boolean"}},"size":{"defaultValue":null,"description":"Sets a fixed size for the content container.","name":"size","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"enum","raw":"NotificationPanelSizes","value":[{"value":"\"small\""},{"value":"\"medium\""},{"value":"\"large\""}]}},"onClick":{"defaultValue":null,"description":"Used in combination with dismissiable property to close the notification panel.","name":"onClick","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"((e?: MouseEvent<HTMLElement, MouseEvent>) => void)"}},"dismissable":{"defaultValue":null,"description":"Toggles the close button in the top right corner. Will only show if there are children.","name":"dismissable","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"boolean"}},"fluid":{"defaultValue":null,"description":"Enables a fluid outer container that spans the entire width of parent.","name":"fluid","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"boolean"}},"label":{"defaultValue":null,"description":"Sets a label for the notification panel.","name":"label","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"ariaLabelCloseBtn":{"defaultValue":null,"description":"Close button aria-label","name":"ariaLabelCloseBtn","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"labelId":{"defaultValue":null,"description":"Custom id for the label","name":"labelId","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"Custom role for the panel","name":"role","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"enum","raw":"\"alert\"","value":[{"value":"\"alert\""}]}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Adds inner child elements.","name":"children","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"ReactNode"}},"expanderChildren":{"defaultValue":null,"description":"Adds inner expander elements.","name":"expanderChildren","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"ReactNode"}},"expanderButtonText":{"defaultValue":null,"description":"Text for expanderButton.","name":"expanderButtonText","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"expanderButtonClosedText":{"defaultValue":null,"description":"Text for expanderButton when closed.","name":"expanderButtonClosedText","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"expanderOpenFromStart":{"defaultValue":null,"description":"Makes expander be open from start.","name":"expanderOpenFromStart","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"boolean"}},"variant":{"defaultValue":null,"description":"Changes the visual representation of the notification panel.","name":"variant","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"enum","raw":"NotificationPanelVariants","value":[{"value":"\"info\""},{"value":"\"warn\""},{"value":"\"alert\""},{"value":"\"success\""}]}},"compactVariant":{"defaultValue":null,"description":"Makes the panel more compact. Available in basic and outline.","name":"compactVariant","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"enum","raw":"NotificationCompactVariants","value":[{"value":"\"basic\""},{"value":"\"outline\""}]}},"size":{"defaultValue":null,"description":"Sets a fixed size for the content container.","name":"size","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"enum","raw":"NotificationPanelSizes","value":[{"value":"\"small\""},{"value":"\"medium\""},{"value":"\"large\""}]}},"onClick":{"defaultValue":null,"description":"Used in combination with dismissiable property to close the notification panel.","name":"onClick","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"((e?: MouseEvent<HTMLElement, MouseEvent>) => void)"}},"dismissable":{"defaultValue":null,"description":"Toggles the close button in the top right corner.","name":"dismissable","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"boolean"}},"fluid":{"defaultValue":null,"description":"Enables a fluid outer container that spans the entire width of parent.","name":"fluid","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"boolean"}},"label":{"defaultValue":null,"description":"Sets a label for the notification panel.","name":"label","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"ariaLabelCloseBtn":{"defaultValue":null,"description":"Close button aria-label","name":"ariaLabelCloseBtn","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"labelId":{"defaultValue":null,"description":"Custom id for the label","name":"labelId","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"Custom role for the panel. Default is \"region\". If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set.","name":"role","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"enum","raw":"\"alert\" | \"region\"","value":[{"value":"\"alert\""},{"value":"\"region\""}]}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}}}}

package/components/NotificationPanel/index.js

@@ -1,2 +1,2 @@
-import t from"react";import p from"classnames";import e from"./styles.module.scss";import{C as L}from"../../Close.js";import{AnalyticsId as A}from"../../constants.js";import{useUuid as S}from"../../hooks/useUuid.js";import{palette as o}from"../../theme/palette.js";import{getAriaLabelAttributes as $}from"../../utils/accessibility.js";import{Icon as r}from"../Icons/Icon.js";import P from"../Icons/InfoSignStroke.js";import h from"../Icons/AlertSignStroke.js";import v from"../Icons/AlertSignFill.js";import"../Icons/X.js";import"../../uuid.js";import"../../utils/environment.js";import"../Close/styles.module.scss";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";const F={info:t.createElement(r,{svgIcon:P,color:o.kiwi900,hoverColor:o.kiwi900}),warn:t.createElement(r,{svgIcon:h,color:"black",hoverColor:"black"}),alert:t.createElement(r,{svgIcon:v,color:o.cherry500,hoverColor:o.cherry500}),alertLabel:t.createElement(r,{svgIcon:h,color:o.cherry500,hoverColor:o.cherry500}),crisis:t.createElement(r,{svgIcon:v,color:o.banana200,hoverColor:o.banana200})},M=({fluid:l,variant:s,shadow:n,children:a})=>{if(l){const c=p(e["fluid-wrapper"],e[`fluid-wrapper--${s}`],{[e["fluid-wrapper--shadow"]]:n});return t.createElement("div",{className:c},a)}return a},Y=t.forwardRef((l,s)=>{const{children:n,variant:a="info",shadow:c=!1,dismissable:d=!1,onClick:C,label:i,fluid:b=!1,size:u,className:E,labelId:I,role:_,testId:g}=l,m=S(I),w=()=>{const k=p(e["notification-panel__content"],e[`notification-panel__content--${a}`]);return t.createElement("div",{className:k,id:i?void 0:m},i&&t.createElement("h1",{className:e["notification-panel__label"],dangerouslySetInnerHTML:{__html:i},id:m}),n)},f=!!i&&!n,y=p(e["notification-panel"],u&&e[`notification-panel--${u}`],e[`notification-panel--${a}`],{[e["notification-panel--shadow"]]:!b&&c,[e["notification-panel--has-children"]]:!!n,[e["notification-panel--label-only"]]:f,[e["notification-panel--dismissable"]]:!f&&d},E),N=$({label:i,id:m});return t.createElement(M,{fluid:b,variant:a,shadow:c},t.createElement("section",{ref:s,role:_,"data-testid":g,"data-analyticsid":A.NotificationPanel,className:y,...N},t.createElement("span",{className:e["notification-panel__icon"]},F[a==="alert"&&i&&!n?"alertLabel":a]),!f&&d&&t.createElement("span",{className:e["notification-panel__close"]},t.createElement(L,{ariaLabel:l.ariaLabelCloseBtn,onClick:C})),w()))});export{Y as default};
+import t,{useState as $}from"react";import s from"classnames";import{AnalyticsId as x,IconSize as l}from"../../constants.js";import{useUuid as N}from"../../hooks/useUuid.js";import{getAriaLabelAttributes as I}from"../../utils/accessibility.js";import{B as R}from"../../Button.js";import{Icon as _}from"../Icons/Icon.js";import D from"../Icons/ChevronDown.js";import U from"../Icons/ChevronUp.js";import d from"./DetailButton/styles.module.scss";import{getColor as M}from"../../theme/currys/color.js";import{palette as r}from"../../theme/palette.js";import{C as O}from"../../Close.js";import V from"../Icons/CheckFill.js";import W from"../Icons/ErrorSignFill.js";import j from"../Icons/InfoSignFill.js";import q from"../Icons/TriangleX.js";import e from"./styles.module.scss";import"../../uuid.js";import"../../utils/environment.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"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../theme/index.js";import"../../theme/spacers.js";import"../Icons/X.js";import"../Close/styles.module.scss";const G=({content:m,buttonText:p,buttonClosedText:o,expanderOpenFromStart:n})=>{const[i,E]=$(n),c=i?p:o,b=N(),u=I({label:c,id:b,prefer:"label"}),C={onClick:()=>E(!i),variant:"borderless",className:s(d["notification-panel__detail"],d["notification-panel__detail-button"]),"aria-expanded":i,...u};return t.createElement("div",{className:d["notification-panel__detail-section"]},t.createElement("div",{className:d["notification-panel__detail-section__button--wrapper"]},t.createElement(R,{testId:"expand","data-analyticsid":x.Expander,...C},c,t.createElement(_,{svgIcon:i?U:D}))),i&&t.createElement("div",{className:s(d["notification-panel__detail-section__content"])},m))},H=({fluid:m,variant:p,children:o})=>{if(m){const n=s(e["fluid-wrapper"],{[e[`fluid-wrapper--${p}`]]:p});return t.createElement("div",{className:n},o)}return o},J=t.forwardRef((m,p)=>{const{children:o,variant:n="info",dismissable:i=!1,onClick:E,expanderChildren:c,expanderButtonText:b,expanderButtonClosedText:u,expanderOpenFromStart:C=!1,compactVariant:a,label:f,fluid:S=!1,size:h,className:g,labelId:w,role:y,testId:T}=m,v=N(w),B={info:t.createElement(_,{svgIcon:j,color:r.blueberry700,hoverColor:r.blueberry700,size:a?l.XSmall:l.Small}),warn:t.createElement(_,{svgIcon:W,color:r.banana700,hoverColor:r.banana700,size:a?l.XSmall:l.Small}),alert:t.createElement(_,{svgIcon:q,color:r.cherry700,hoverColor:r.cherry700,size:a?l.XSmall:l.Small}),success:t.createElement(_,{svgIcon:V,color:r.kiwi900,hoverColor:r.kiwi900,size:a?l.XSmall:l.Small})},k=()=>{const L=s(e["notification-panel__content"]),P=s(e["notification-panel__label"],{[e["notification-panel__label--no-content"]]:!o&&!c,[e["notification-panel__label__compact"]]:!!a,[e["notification-panel__label__compact--basic"]]:a==="basic"}),X=s(e["notification-panel__children"],{[e["notification-panel__label-and-content--spacing"]]:f});return t.createElement("div",{className:L,id:f?void 0:v},f&&t.createElement("h1",{className:P,id:v},f),o&&!a&&t.createElement("div",{className:X},o),c&&b&&u&&!a&&t.createElement(G,{expanderOpenFromStart:C,content:c,buttonText:b,buttonClosedText:u}))},z=s(e["notification-panel"],e[`notification-panel--${n}`],{[e[`notification-panel--${h}`]]:!!h,[e["notification-panel__compact"]]:!!a,[e["notification-panel__compact--basic"]]:a==="basic",[e["notification-panel__compact--outline"]]:a==="outline",[e["notification-panel--has-children"]]:!!o,[e["notification-panel--with-content"]]:c||f&&o,[e["notification-panel--dismissable"]]:i},g),A=I({label:f,id:v}),F=y||n==="alert"&&"alert"||"region";return t.createElement(H,{fluid:S,variant:n},t.createElement("section",{ref:p,role:F,"data-testid":T,"data-analyticsid":x.NotificationPanel,className:z,...A},t.createElement("span",{className:e["notification-panel__icon"]},B[n]),i&&t.createElement("span",{className:e["notification-panel__close"]},t.createElement(O,{ariaLabel:m.ariaLabelCloseBtn,onClick:E,color:M("black")})),k()))}),Te=J;export{Te as default};
 //# sourceMappingURL=index.js.map

package/components/NotificationPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport styles from './styles.module.scss';\nimport Close from '../Close';\nimport { AnalyticsId } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Icon from '../Icons';\nimport InfoSignStroke from '../Icons/InfoSignStroke';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport AlertSignFill from '../Icons/AlertSignFill';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'crisis';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\n\nconst variantToIconMap = {\n  info: <Icon svgIcon={InfoSignStroke} color={palette.kiwi900} hoverColor={palette.kiwi900} />,\n  warn: <Icon svgIcon={AlertSignStroke} color=\"black\" hoverColor=\"black\" />,\n  alert: <Icon svgIcon={AlertSignFill} color={palette.cherry500} hoverColor={palette.cherry500} />,\n  alertLabel: <Icon svgIcon={AlertSignStroke} color={palette.cherry500} hoverColor={palette.cherry500} />,\n  crisis: <Icon svgIcon={AlertSignFill} color={palette.banana200} hoverColor={palette.banana200} />,\n};\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Adds a shadow effect around the notification panel. */\n  shadow?: boolean;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. Will only show if there are children. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel */\n  role?: 'alert';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid' | 'variant' | 'shadow'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, variant, shadow, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper'], styles[`fluid-wrapper--${variant}`], {\n      [styles['fluid-wrapper--shadow']]: shadow,\n    });\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    shadow = false,\n    dismissable = false,\n    onClick,\n    label,\n    fluid = false,\n    size,\n    className,\n    labelId,\n    role,\n    testId,\n  } = props;\n  const uuid = useUuid(labelId);\n\n  const renderContent = (): JSX.Element => {\n    const contentClasses = classNames(styles['notification-panel__content'], styles[`notification-panel__content--${variant}`]);\n\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && <h1 className={styles['notification-panel__label']} dangerouslySetInnerHTML={{ __html: label }} id={uuid} />}\n        {children}\n      </div>\n    );\n  };\n\n  const labelOnly = !!label && !children;\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    size && styles[`notification-panel--${size}`],\n    styles[`notification-panel--${variant}`],\n    {\n      [styles['notification-panel--shadow']]: !fluid && shadow,\n      [styles['notification-panel--has-children']]: !!children,\n      [styles['notification-panel--label-only']]: labelOnly,\n      [styles['notification-panel--dismissable']]: !labelOnly && dismissable,\n    },\n    className\n  );\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: uuid });\n\n  return (\n    <FluidWrapper fluid={fluid} variant={variant} shadow={shadow}>\n      <section\n        ref={ref}\n        role={role}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <span className={styles['notification-panel__icon']}>\n          {variantToIconMap[variant === 'alert' && label && !children ? 'alertLabel' : variant]}\n        </span>\n        {!labelOnly && dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} />\n          </span>\n        )}\n        {renderContent()}\n      </section>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":["variantToIconMap","React","Icon","InfoSignStroke","palette","AlertSignStroke","AlertSignFill","FluidWrapper","fluid","variant","shadow","children","fluidClasses","classNames","styles","NotificationPanel","props","ref","dismissable","onClick","label","size","className","labelId","role","testId","uuid","useUuid","renderContent","contentClasses","labelOnly","notificationPanelClasses","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","Close"],"mappings":"yqBAiBA,MAAMA,EAAmB,CACvB,KAAOC,EAAA,cAAAC,EAAA,CAAK,QAASC,EAAgB,MAAOC,EAAQ,QAAS,WAAYA,EAAQ,OAAA,CAAS,EAC1F,KAAOH,EAAA,cAAAC,EAAA,CAAK,QAASG,EAAiB,MAAM,QAAQ,WAAW,OAAA,CAAQ,EACvE,MAAQJ,EAAA,cAAAC,EAAA,CAAK,QAASI,EAAe,MAAOF,EAAQ,UAAW,WAAYA,EAAQ,SAAA,CAAW,EAC9F,WAAaH,EAAA,cAAAC,EAAA,CAAK,QAASG,EAAiB,MAAOD,EAAQ,UAAW,WAAYA,EAAQ,SAAA,CAAW,EACrG,OAASH,EAAA,cAAAC,EAAA,CAAK,QAASI,EAAe,MAAOF,EAAQ,UAAW,WAAYA,EAAQ,SAAA,CAAW,CACjG,EAmCMG,EAAyC,CAAC,CAAE,MAAAC,EAAO,QAAAC,EAAS,OAAAC,EAAQ,SAAAC,KAAe,CACvF,GAAIH,EAAO,CACT,MAAMI,EAAeC,EAAWC,EAAO,iBAAkBA,EAAO,kBAAkBL,KAAY,CAC5F,CAACK,EAAO,0BAA2BJ,CAAA,CACpC,EAED,OAAQT,EAAA,cAAA,MAAA,CAAI,UAAWW,CAAA,EAAeD,CAAS,CACjD,CACO,OAAAA,CACT,EAEMI,EAAoBd,EAAM,WAAmD,CAACe,EAAOC,IAAQ,CAC3F,KAAA,CACJ,SAAAN,EACA,QAAAF,EAAU,OACV,OAAAC,EAAS,GACT,YAAAQ,EAAc,GACd,QAAAC,EACA,MAAAC,EACA,MAAAZ,EAAQ,GACR,KAAAa,EACA,UAAAC,EACA,QAAAC,EACA,KAAAC,EACA,OAAAC,CACE,EAAAT,EACEU,EAAOC,EAAQJ,CAAO,EAEtBK,EAAgB,IAAmB,CACvC,MAAMC,EAAiBhB,EAAWC,EAAO,+BAAgCA,EAAO,gCAAgCL,IAAU,EAE1H,OACGR,EAAA,cAAA,MAAA,CAAI,UAAW4B,EAAgB,GAAKT,EAAe,OAAPM,CAAO,EACjDN,GAAUnB,EAAA,cAAA,KAAA,CAAG,UAAWa,EAAO,6BAA8B,wBAAyB,CAAE,OAAQM,CAAM,EAAG,GAAIM,CAAA,CAAM,EACnHf,CACH,CAAA,EAIEmB,EAAY,CAAC,CAACV,GAAS,CAACT,EAExBoB,EAA2BlB,EAC/BC,EAAO,sBACPO,GAAQP,EAAO,uBAAuBO,KACtCP,EAAO,uBAAuBL,KAC9B,CACE,CAACK,EAAO,+BAAgC,CAACN,GAASE,EAClD,CAACI,EAAO,qCAAsC,CAAC,CAACH,EAChD,CAACG,EAAO,mCAAoCgB,EAC5C,CAAChB,EAAO,oCAAqC,CAACgB,GAAaZ,CAC7D,EACAI,CAAA,EAGIU,EAAsBC,EAAuB,CAAE,MAAAb,EAAO,GAAIM,EAAM,EAEtE,OACGzB,EAAA,cAAAM,EAAA,CAAa,MAAAC,EAAc,QAAAC,EAAkB,OAAAC,CAAA,EAC3CT,EAAA,cAAA,UAAA,CACC,IAAAgB,EACA,KAAAO,EACA,cAAaC,EACb,mBAAkBS,EAAY,kBAC9B,UAAWH,EACV,GAAGC,CAAA,EAEH/B,EAAA,cAAA,OAAA,CAAK,UAAWa,EAAO,2BAAA,EACrBd,EAAiBS,IAAY,SAAWW,GAAS,CAACT,EAAW,aAAeF,EAC/E,EACC,CAACqB,GAAaZ,GACZjB,EAAA,cAAA,OAAA,CAAK,UAAWa,EAAO,4BAAA,EACrBb,EAAA,cAAAkC,EAAA,CAAM,UAAWnB,EAAM,kBAAmB,QAAAG,CAAA,CAAkB,CAC/D,EAEDS,EACH,CAAA,CACF,CAEJ,CAAC"}
+{"version":3,"file":"index.js","sources":["../../../src/components/NotificationPanel/DetailButton/DetailButton.tsx","../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../../constants';\nimport { useUuid } from '../../../hooks/useUuid';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../../utils/accessibility';\nimport Button, { ButtonProps } from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\n\nimport styles from './styles.module.scss';\n\ntype Props = {\n  content: React.ReactNode;\n  buttonClosedText: string;\n  buttonText: string;\n  expanderOpenFromStart: boolean;\n};\nexport const DetailButton: React.FC<Props> = ({ content, buttonText, buttonClosedText, expanderOpenFromStart }: Props): JSX.Element => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n  const activeButtonText = isExpanded ? buttonText : buttonClosedText;\n\n  const buttonTextId = useUuid();\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: activeButtonText,\n    id: buttonTextId,\n    prefer: 'label',\n  });\n\n  const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n    onClick: () => setIsExpanded(!isExpanded),\n    variant: 'borderless',\n    className: classNames(styles['notification-panel__detail'], styles['notification-panel__detail-button']),\n    'aria-expanded': isExpanded,\n    ...ariaLabelAttributes,\n  };\n\n  return (\n    <div className={styles['notification-panel__detail-section']}>\n      <div className={styles['notification-panel__detail-section__button--wrapper']}>\n        <Button testId=\"expand\" data-analyticsid={AnalyticsId.Expander} {...commonProps}>\n          {activeButtonText}\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      </div>\n      {isExpanded && <div className={classNames(styles['notification-panel__detail-section__content'])}>{content}</div>}\n    </div>\n  );\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { DetailButton } from './DetailButton/DetailButton';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Close from '../Close';\nimport Icon from '../Icons';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is \"region\". If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid' | 'variant'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, variant, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper'], { [styles[`fluid-wrapper--${variant}`]]: variant });\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    fluid = false,\n    size,\n    className,\n    labelId,\n    role,\n    testId,\n  } = props;\n  const uuid = useUuid(labelId);\n  const variantToIconMap = {\n    info: (\n      <Icon\n        svgIcon={InfoSignFill}\n        color={palette.blueberry700}\n        hoverColor={palette.blueberry700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    warn: (\n      <Icon\n        svgIcon={ErrorSignFill}\n        color={palette.banana700}\n        hoverColor={palette.banana700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    alert: (\n      <Icon\n        svgIcon={TriangleX}\n        color={palette.cherry700}\n        hoverColor={palette.cherry700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    success: (\n      <Icon\n        svgIcon={CheckFill}\n        color={palette.kiwi900}\n        hoverColor={palette.kiwi900}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n  };\n  const renderContent = (): JSX.Element => {\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label__compact']]: !!compactVariant,\n      [styles['notification-panel__label__compact--basic']]: compactVariant === 'basic',\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__label-and-content--spacing']]: label,\n    });\n\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && (\n          <h1 className={labelClasses} id={uuid}>\n            {label}\n          </h1>\n        )}\n        {children && !compactVariant && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <DetailButton\n            expanderOpenFromStart={expanderOpenFromStart}\n            content={expanderChildren}\n            buttonText={expanderButtonText}\n            buttonClosedText={expanderButtonClosedText}\n          />\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    {\n      [styles[`notification-panel--${size}`]]: !!size,\n      [styles['notification-panel__compact']]: !!compactVariant,\n      [styles['notification-panel__compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel__compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--has-children']]: !!children,\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: uuid });\n\n  const ariaRole = role || (variant === 'alert' && 'alert') || 'region';\n\n  return (\n    <FluidWrapper fluid={fluid} variant={variant}>\n      <section\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <span className={styles['notification-panel__icon']}>{variantToIconMap[variant]}</span>\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color={getColor('black')} />\n          </span>\n        )}\n        {renderContent()}\n      </section>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":["DetailButton","content","buttonText","buttonClosedText","expanderOpenFromStart","isExpanded","setIsExpanded","useState","activeButtonText","buttonTextId","useUuid","ariaLabelAttributes","getAriaLabelAttributes","commonProps","classNames","styles","React","Button","AnalyticsId","Icon","ChevronUp","ChevronDown","FluidWrapper","fluid","variant","children","fluidClasses","NotificationPanel","props","ref","dismissable","onClick","expanderChildren","expanderButtonText","expanderButtonClosedText","compactVariant","label","size","className","labelId","role","testId","uuid","variantToIconMap","InfoSignFill","palette","IconSize","ErrorSignFill","TriangleX","CheckFill","renderContent","contentClasses","labelClasses","childrenClasses","notificationPanelClasses","ariaRole","Close","getColor","NotificationPanel$1"],"mappings":"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"}

package/components/NotificationPanel/styles.module.scss

@@ -7,46 +7,40 @@
 .notification-panel {
   $panel: &;
   display: flex;
-  width: inherit;
+  padding: getSpacer(2xs) getSpacer(s) getSpacer(2xs) getSpacer(2xs);
+  box-shadow: 0.25rem 0.25rem 0.375rem rgba(0, 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);
+      margin-right: getSpacer(m);
     }
+  }
+  &__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(s);
-      padding-right: getSpacer(m);
-      #{$panel}__icon {
-        margin-right: getSpacer(m);
-      }
+      padding-left: getSpacer(2xs);
+      padding-right: getSpacer(s);
     }
-  }
-  &--label-only {
-    align-items: center;
-    padding: getSpacer(m) getSpacer(s) getSpacer(m) getSpacer(2xs);
-    #{$panel}__icon {
-      display: flex;
-      margin-right: getSpacer(2xs);
+    &--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);
   }
@@ -57,22 +51,48 @@
     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.notification-panel__compact {
+    box-shadow: none;
+    background-color: transparent;
   }
-  &--alert#{&}--label-only {
-    color: $cherry500;
+  &--alert.notification-panel__compact--basic {
+    border: none;
   }
-  &--crisis {
-    background-color: $black;
+  &--success {
+    border: 0.125rem solid $kiwi900;
+    background-color: $kiwi50;
+  }
+  &--success.notification-panel__compact {
+    box-shadow: none;
+    background-color: transparent;
   }
-  &--shadow {
-    box-shadow: 0 0.3rem getSpacer(2xs) -0.1rem rgba(0, 0, 0, 0.15);
+  &--success.notification-panel__compact--basic {
+    border: none;
   }
 
   &__close {
@@ -80,76 +100,57 @@
     margin-left: auto;
     padding-left: getSpacer(2xs);
   }
-
   &__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;
+      font-size: $font-size-sm;
+      line-height: 1.625rem;
+    }
+  }
+  &__label {
+    font-weight: 700;
+    margin: getSpacer(2xs) 0 0 0;
+    &__compact {
+      font-weight: 600;
+      font-size: $font-size-xs;
+      line-height: 1.25rem;
+    }
+    &__compact--basic {
+      font-weight: 400;
     }
   }
+  &__label--no-content {
+    margin: 0;
+    font-weight: 600;
+  }
+  &__children {
+    font-weight: 600;
+    padding: getSpacer(3xs) 0;
+  }
+  &__icon {
+    line-height: 0;
+  }
+  &--with-content {
+    padding-bottom: getSpacer(xs);
+  }
 }
 
 .fluid-wrapper {
   display: flex;
   justify-content: center;
   width: 100%;
-
-  &--info {
-    background-color: $kiwi50;
-  }
-  &--warn {
-    background-color: $banana50;
-  }
-  &--alert {
-    background-color: $cherry100;
-  }
-  &--crisis {
-    background-color: $black;
-  }
-  &--shadow {
-    box-shadow: 0 0.3rem getSpacer(2xs) -0.1rem rgba(0, 0, 0, 0.15);
-  }
 }

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/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"}