@helsenorge/designsystem-react 2.9.2 → 2.10.0

package/components/ListHeader/ListHeader.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { AvatarProps, AvatarType } from '../Avatar';
+import { BadgeProps, BadgeType } from '../Badge';
+import { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';
+import { SvgIcon } from '../Icons';
+export declare type ListHeaderSize = 'small' | 'medium' | 'large';
+export interface ListHeaderType extends React.ForwardRefExoticComponent<ListHeaderProps & React.RefAttributes<HTMLLIElement>> {
+    Avatar?: AvatarType;
+    Badge?: BadgeType;
+    ListHeaderText?: ListHeaderTextType;
+}
+export declare const renderListHeader: (element: React.ReactNode, chevronIcon: SvgIcon, isHovered: boolean, size: ListHeaderSize, icon?: React.ReactElement) => false | "" | 0 | JSX.Element | null | undefined;
+export interface ListHeaderProps {
+    /** Adds custom classes to the ListHeader element. */
+    className?: string;
+    /** Chevron to render inside of the ListHeader */
+    chevronIcon?: SvgIcon;
+    /** Children to be rendered inside of ListHeader */
+    children: React.ReactNode;
+    /** icon to be rendered inside of ListHeader */
+    icon?: React.ReactElement;
+    /** whether or not the parent is hovered */
+    isHovered?: boolean;
+    /** Changes size of the ListHeader. */
+    size?: ListHeaderSize;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const mapChildren: (children: React.ReactNode, isJsxChild?: boolean) => {
+    avatarChild?: AvatarProps | undefined;
+    listHeaderTextChildren: Array<ListHeaderTextProps>;
+    badgeChild?: BadgeProps | undefined;
+    stringChildren: Array<string>;
+    remainingChildren: Array<any>;
+};
+export declare const ListHeader: ListHeaderType;
+export default ListHeader;
+//# sourceMappingURL=ListHeader.d.ts.map

package/components/ListHeader/ListHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ListHeader/ListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAe,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC5D,OAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxD,OAAuB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAI1G,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAGnD,oBAAY,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,yBAAyB,CAAC,eAAe,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3H,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACrC;AAED,eAAO,MAAM,gBAAgB,YAClB,MAAM,SAAS,eACX,OAAO,aACT,OAAO,QACZ,cAAc,SACb,MAAM,YAAY,oDAc1B,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,aACZ,MAAM,SAAS;;4BAID,MAAM,mBAAmB,CAAC;;oBAElC,MAAM,MAAM,CAAC;uBACV,MAAM,GAAG,CAAC;CA8B9B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,cAqEvB,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/components/ListHeader/ListHeaderText/ListHeaderText.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StatusDotVariant } from '../../StatusDot';
+export declare type ListHeaderTextType = React.ForwardRefExoticComponent<ListHeaderTextProps & React.RefAttributes<HTMLLIElement>>;
+export interface ListHeaderTextProps {
+    /** The first text in the ListHeaderText Component */
+    firstText: string;
+    /** Will style the first text as bold */
+    firstTextEmphasised?: boolean;
+    /** The second text in the ListHeaderText Component */
+    secondText?: string;
+    /** Will style the second text as bold */
+    secondTextEmphasised?: boolean;
+    /** Whether or not this ListHeaderText is a sub text */
+    subText?: boolean;
+    /** Decides the variant for the StatusDot */
+    statusDotVariant?: StatusDotVariant;
+    /** Adds custom classes to the ListHeaderText component. */
+    className?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const ListHeaderText: ListHeaderTextType;
+export default ListHeaderText;
+//# sourceMappingURL=ListHeaderText.d.ts.map

package/components/ListHeader/ListHeaderText/ListHeaderText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListHeaderText.d.ts","sourceRoot":"","sources":["../../../../src/components/ListHeader/ListHeaderText/ListHeaderText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAkB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAI9D,oBAAY,kBAAkB,GAAG,KAAK,CAAC,yBAAyB,CAAC,mBAAmB,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AAE3H,MAAM,WAAW,mBAAmB;IAClC,qDAAqD;IACrD,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,cAAc,EAAE,kBAmC3B,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/components/ListHeader/ListHeaderText/componentdata.json

@@ -0,0 +1 @@
+{"props":{"firstText":{"defaultValue":null,"description":"The first text in the ListHeaderText Component","name":"firstText","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":true,"type":{"name":"string"}},"firstTextEmphasised":{"defaultValue":null,"description":"Will style the first text as bold","name":"firstTextEmphasised","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"boolean"}},"secondText":{"defaultValue":null,"description":"The second text in the ListHeaderText Component","name":"secondText","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"string"}},"secondTextEmphasised":{"defaultValue":null,"description":"Will style the second text as bold","name":"secondTextEmphasised","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"boolean"}},"subText":{"defaultValue":null,"description":"Whether or not this ListHeaderText is a sub text","name":"subText","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"boolean"}},"statusDotVariant":{"defaultValue":null,"description":"Decides the variant for the StatusDot","name":"statusDotVariant","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"enum","raw":"StatusDotVariant","value":[{"value":"\"info\"","description":"","fullComment":"","tags":{}},{"value":"\"warning\"","description":"","fullComment":"","tags":{}},{"value":"\"alert\"","description":"","fullComment":"","tags":{}},{"value":"\"cancelled\"","description":"","fullComment":"","tags":{}},{"value":"\"active\"","description":"","fullComment":"","tags":{}},{"value":"\"transparent\"","description":"","fullComment":"","tags":{}},{"value":"\"recurring\"","description":"","fullComment":"","tags":{}},{"value":"\"group\"","description":"","fullComment":"","tags":{}},{"value":"\"noaccess\"","description":"","fullComment":"","tags":{}}]}},"className":{"defaultValue":null,"description":"Adds custom classes to the ListHeaderText component.","name":"className","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"string"}}}}

package/components/ListHeader/ListHeaderText/index.d.ts

@@ -0,0 +1,4 @@
+import ListHeaderText from './ListHeaderText';
+export * from './ListHeaderText';
+export default ListHeaderText;
+//# sourceMappingURL=index.d.ts.map

package/components/ListHeader/ListHeaderText/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ListHeader/ListHeaderText/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,eAAe,cAAc,CAAC"}

package/components/ListHeader/ListHeaderText/index.js

@@ -0,0 +1,2 @@
+import"../../../ListHeaderText.js";import{L as n,L as q}from"../../../ListHeaderText.js";import"react";import"classnames";import"../../../StatusDot.js";import"../../StatusDot/styles.module.scss";import"../../../constants.js";import"../../Icons/Icon.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../../utils/environment.js";import"../../Icons/Undo.js";import"../../../theme/currys/color.js";import"../../../theme/index.js";import"../../../theme/palette.js";import"../../../theme/spacers.js";import"../../../theme/grid.js";import"../../Icons/Group.js";import"../../Icons/NoAccess.js";import"../../../hooks/useBreakpoint.js";import"../styles.module.scss";export{n as ListHeaderText,q as default};
+//# sourceMappingURL=index.js.map

package/components/ListHeader/ListHeaderText/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/ListHeader/componentdata.json

@@ -0,0 +1 @@
+{"props":{"className":{"defaultValue":null,"description":"Adds custom classes to the ListHeader element.","name":"className","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"string"}},"chevronIcon":{"defaultValue":null,"description":"Chevron to render inside of the ListHeader","name":"chevronIcon","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"SvgIcon"}},"children":{"defaultValue":null,"description":"Children to be rendered inside of ListHeader","name":"children","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":true,"type":{"name":"ReactNode"}},"icon":{"defaultValue":null,"description":"icon to be rendered inside of ListHeader","name":"icon","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},"isHovered":{"defaultValue":null,"description":"whether or not the parent is hovered","name":"isHovered","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"boolean"}},"size":{"defaultValue":null,"description":"Changes size of the ListHeader.","name":"size","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"enum","raw":"ListHeaderSize","value":[{"value":"\"small\""},{"value":"\"medium\""},{"value":"\"large\""}]}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"string"}}}}

package/components/ListHeader/index.d.ts

@@ -0,0 +1,5 @@
+import { ListHeader } from './ListHeader';
+export { ListHeaderText } from './ListHeaderText';
+export * from './ListHeader';
+export default ListHeader;
+//# sourceMappingURL=index.d.ts.map

package/components/ListHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ListHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,cAAc,cAAc,CAAC;AAC7B,eAAe,UAAU,CAAC"}

package/components/ListHeader/index.js

@@ -0,0 +1,2 @@
+import"../../ListHeader.js";import{L as z,L as A,m as B,r as D}from"../../ListHeader.js";import{L as F}from"../../ListHeaderText.js";import"react";import"classnames";import"../../Avatar.js";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../theme/palette.js";import"../../Badge.js";import"../Badge/styles.module.scss";import"./styles.module.scss";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../utils/component.js";import"../../StatusDot.js";import"../StatusDot/styles.module.scss";import"../Icons/Undo.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";export{z as ListHeader,F as ListHeaderText,A as default,B as mapChildren,D as renderListHeader};
+//# sourceMappingURL=index.js.map

package/components/ListHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/ListHeader/styles.module.scss

@@ -0,0 +1,149 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_font-settings.scss';
+@import '../../scss/_palette.scss';
+
+.list-header {
+  display: flex;
+  width: 100%;
+  padding-right: getSpacer(2xs);
+  padding-left: getSpacer(2xs);
+  text-align: left;
+  align-items: center;
+
+  &--for-element-content {
+    align-content: flex-start;
+    padding-top: getSpacer(s);
+    padding-bottom: getSpacer(s);
+  }
+  &--top-align-content {
+    align-items: flex-start;
+  }
+
+  &__content {
+    border-bottom: 1px solid transparent;
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    &--string {
+      margin: getSpacer(xs) 0;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin: getSpacer(s) 0;
+      }
+    }
+    &--element {
+      display: flex;
+      align-items: flex-start;
+      flex-direction: column;
+    }
+    &--spacing {
+      margin-left: getSpacer(s);
+    }
+    :focus > & {
+      border-color: $black;
+    }
+  }
+
+  &__icon,
+  &__avatar {
+    display: flex;
+    align-items: center;
+
+    &--for-element-content {
+      &--medium {
+        height: $lineheight-size-sm;
+      }
+      &--large {
+        height: $lineheight-size-md;
+      }
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        &--medium {
+          height: $lineheight-size-md;
+        }
+        &--large {
+          height: $lineheight-size-lg;
+        }
+      }
+    }
+  }
+
+  &__icon {
+    &--for-string-content {
+      margin: getSpacer(3xs) getSpacer(2xs) getSpacer(3xs) 0;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin: getSpacer(2xs) getSpacer(2xs) getSpacer(2xs) 0;
+      }
+    }
+    &--for-element-content {
+      margin: 0 getSpacer(2xs) 0 0;
+    }
+  }
+
+  &__avatar {
+    &--for-string-content {
+      margin: getSpacer(3xs) getSpacer(s) getSpacer(3xs) 0;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin: getSpacer(2xs) getSpacer(s) getSpacer(2xs) 0;
+      }
+    }
+    &--for-element-content {
+      margin: 0 getSpacer(s) 0 0;
+    }
+  }
+
+  &__chevron,
+  &__badge {
+    display: flex;
+    align-items: center;
+    padding-left: getSpacer(2xs);
+    &--for-string-content {
+      margin: getSpacer(3xs) 0 getSpacer(3xs) auto;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin: getSpacer(2xs) 0 getSpacer(2xs) auto;
+      }
+    }
+    &--right {
+      margin-left: auto;
+      margin-right: getSpacer(2xs);
+    }
+    //Height needs to be same as line-height
+    &--small {
+      height: $lineheight-size-xs;
+    }
+    &--medium {
+      height: $lineheight-size-sm;
+    }
+    &--large {
+      height: $lineheight-size-md;
+    }
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      &--small {
+        height: $lineheight-size-sm;
+      }
+      &--medium {
+        height: $lineheight-size-md;
+      }
+      &--large {
+        height: $lineheight-size-lg;
+      }
+    }
+  }
+}
+
+.statusDot {
+  padding: 1rem;
+}
+.text-wrapper {
+  display: flex;
+  align-items: flex-start;
+  font-size: 20px;
+  font-weight: 400;
+
+  &--sub-level {
+    font-size: 18px;
+  }
+  &__text--emphasised {
+    font-weight: 600;
+  }
+}

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

@@ -0,0 +1,41 @@
+export type Styles = {
+  'list-header': string;
+  'list-header__avatar': string;
+  'list-header__avatar--for-element-content': string;
+  'list-header__avatar--for-element-content--large': string;
+  'list-header__avatar--for-element-content--medium': string;
+  'list-header__avatar--for-string-content': string;
+  'list-header__badge': string;
+  'list-header__badge--for-string-content': string;
+  'list-header__badge--large': string;
+  'list-header__badge--medium': string;
+  'list-header__badge--right': string;
+  'list-header__badge--small': string;
+  'list-header__chevron': string;
+  'list-header__chevron--for-string-content': string;
+  'list-header__chevron--large': string;
+  'list-header__chevron--medium': string;
+  'list-header__chevron--right': string;
+  'list-header__chevron--small': string;
+  'list-header__content': string;
+  'list-header__content--element': string;
+  'list-header__content--spacing': string;
+  'list-header__content--string': string;
+  'list-header__icon': string;
+  'list-header__icon--for-element-content': string;
+  'list-header__icon--for-element-content--large': string;
+  'list-header__icon--for-element-content--medium': string;
+  'list-header__icon--for-string-content': string;
+  'list-header--for-element-content': string;
+  'list-header--top-align-content': string;
+  statusDot: string;
+  'text-wrapper': string;
+  'text-wrapper__text--emphasised': string;
+  'text-wrapper--sub-level': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/NotificationPanel/NotificationPanel.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export declare type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'crisis';
 export declare type NotificationPanelSizes = 'small' | 'medium' | 'large';
-interface NotificationPanelProps {
+export interface NotificationPanelProps {
     /** Adds custom classes to the element. */
     className?: string;
     /** Adds inner child elements. */

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,UAAU,sBAAsB;IAC9B,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;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"}

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

package/components/NotificationPanel/styles.module.scss

@@ -10,13 +10,14 @@
   width: inherit;
 
   &--has-children {
-    padding: getSpacer(2xs) getSpacer(s) getSpacer(m) getSpacer(2xs);
+    padding: getSpacer(2xs) getSpacer(s) getSpacer(2xs) getSpacer(2xs);
     #{$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);

package/components/StatusDot/StatusDot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDot/StatusDot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,oBAAY,gBAAgB;IAC1B,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,SAAS,cAAc;IACvB,KAAK,UAAU;IACf,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;IACxC,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,MAAM,oFAyBV,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"StatusDot.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDot/StatusDot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,oBAAY,gBAAgB;IAC1B,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,SAAS,cAAc;IACvB,KAAK,UAAU;IACf,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;IACxC,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,MAAM,oFA2BV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/components/StatusDot/index.js

@@ -1,2 +1,2 @@
-import r from"react";import c from"classnames";import s from"./styles.module.scss";import{IconSize as l,AnalyticsId as _}from"../../constants.js";import{Icon as n}from"../Icons/Icon.js";import v from"../Icons/Undo.js";import{getColor as I}from"../../theme/currys/color.js";import E from"../Icons/Group.js";import N from"../Icons/NoAccess.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";var X=(e=>(e.info="info",e.warning="warning",e.alert="alert",e.cancelled="cancelled",e.active="active",e.transparent="transparent",e.recurring="recurring",e.group="group",e.noaccess="noaccess",e))(X||{});const J=r.forwardRef(function(m,C){const{variant:o="info",text:i,className:p}=m,a=o==="recurring"||o==="group"||o==="noaccess",d=o==="cancelled",f=c(s.statusdot,{[s["statusdot--cancelled"]]:d},p),u=c(s.statusdot__dot,[a?s["statusdot__dot--icon"]:s[`statusdot__dot--${o}`]]),g=c(s.statusdot__label,{[s["statusdot__label--icon"]]:a});let t=null;return o==="recurring"?t=r.createElement(n,{size:l.XXSmall,svgIcon:v}):o==="group"?t=r.createElement(n,{size:l.XXSmall,svgIcon:E}):o==="noaccess"&&(t=r.createElement(n,{size:l.XXSmall,svgIcon:N,color:I("cherry",600)})),r.createElement("div",{className:f,"data-analyticsid":_.StatusDot},r.createElement("span",{className:u},t),r.createElement("span",{className:g},i))});export{X as StatusDotVariant,J as default};
+import"../../StatusDot.js";import{a as h,S as j}from"../../StatusDot.js";import"react";import"classnames";import"./styles.module.scss";import"../../constants.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Undo.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../../hooks/useBreakpoint.js";export{h as StatusDotVariant,j as default};
 //# sourceMappingURL=index.js.map

package/components/StatusDot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport statusDotStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { Icon } from '../Icons/Icon';\nimport Undo from '../Icons/Undo';\nimport { getColor } from '../../theme/currys';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\nimport { IconSize } from '../..';\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n}\n\nexport interface StatusDotProps {\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: StatusDotProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { variant = StatusDotVariant.info, text, className } = props;\n  const hasIcon = variant === StatusDotVariant.recurring || variant === StatusDotVariant.group || variant === StatusDotVariant.noaccess;\n  const isCancelled = variant === StatusDotVariant.cancelled;\n  const statusDotClasses = classNames(statusDotStyles['statusdot'], { [statusDotStyles['statusdot--cancelled']]: isCancelled }, className);\n  const dotClasses = classNames(statusDotStyles['statusdot__dot'], [\n    hasIcon ? statusDotStyles[`statusdot__dot--icon`] : statusDotStyles[`statusdot__dot--${variant}`],\n  ]);\n  const labelClasses = classNames(statusDotStyles['statusdot__label'], { [statusDotStyles[`statusdot__label--icon`]]: hasIcon });\n  let svgIcon: JSX.Element | null = null;\n\n  if (variant === StatusDotVariant.recurring) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={Undo} />;\n  } else if (variant === StatusDotVariant.group) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  }\n\n  return (\n    <div className={statusDotClasses} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>{svgIcon}</span>\n      <span className={labelClasses}>{text}</span>\n    </div>\n  );\n});\n\nexport default Spacer;\n"],"names":["StatusDotVariant","Spacer","React","props","ref","variant","text","className","hasIcon","isCancelled","statusDotClasses","classNames","statusDotStyles","dotClasses","labelClasses","svgIcon","Icon","IconSize","Undo","Group","NoAccess","getColor","AnalyticsId"],"mappings":"0kBAaY,IAAAA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,UAAY,YACZA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,UAAY,YACZA,EAAA,MAAQ,QACRA,EAAA,SAAW,WATDA,IAAAA,GAAA,CAAA,CAAA,EAqBZ,MAAMC,EAASC,EAAM,WAAW,SAA4BC,EAAuBC,EAAsC,CACvH,KAAM,CAAE,QAAAC,EAAU,OAAuB,KAAAC,EAAM,UAAAC,GAAcJ,EACvDK,EAAUH,IAAY,aAA8BA,IAAY,SAA0BA,IAAY,WACtGI,EAAcJ,IAAY,YAC1BK,EAAmBC,EAAWC,EAAgB,UAAc,CAAE,CAACA,EAAgB,yBAA0BH,CAAY,EAAGF,CAAS,EACjIM,EAAaF,EAAWC,EAAgB,eAAmB,CAC/DJ,EAAUI,EAAgB,wBAA0BA,EAAgB,mBAAmBP,IAAA,CACxF,EACKS,EAAeH,EAAWC,EAAgB,iBAAqB,CAAE,CAACA,EAAgB,2BAA4BJ,CAAS,CAAA,EAC7H,IAAIO,EAA8B,KAElC,OAAIV,IAAY,YACdU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASC,CAAA,CAAM,EAC9Cb,IAAY,QACrBU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASE,CAAA,CAAO,EAC/Cd,IAAY,aACrBU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASG,EAAU,MAAOC,EAAS,SAAU,GAAG,CAAA,CAAG,GAI1FnB,EAAA,cAAA,MAAA,CAAI,UAAWQ,EAAkB,mBAAkBY,EAAY,SAAA,EAC7DpB,EAAA,cAAA,OAAA,CAAK,UAAWW,CAAa,EAAAE,CAAQ,EACrCb,EAAA,cAAA,OAAA,CAAK,UAAWY,CAAA,EAAeR,CAAK,CACvC,CAEJ,CAAC"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/StatusDot/styles.module.scss

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

package/components/Validation/index.js

@@ -1,2 +1,2 @@
-import"../../Validation.js";import{V as J,V as K}from"../../Validation.js";import"react";import"classnames";import"../../FormGroup.js";import"../FormGroup/styles.module.scss";import"../../Checkbox.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Check.js";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Checkbox/styles.module.scss";import"../../RadioButton.js";import"../RadioButton/styles.module.scss";import"../../Input.js";import"../../hooks/useBreakpoint.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../Input/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../../FormLayout.js";import"../FormLayout/styles.module.scss";import"../../Select.js";import"../Select/styles.module.scss";import"../Icons/ChevronDown.js";import"./styles.module.scss";export{J as Validation,K as default};
+import"../../Validation.js";import{V as K,V as L}from"../../Validation.js";import"react";import"classnames";import"../../FormGroup.js";import"../FormGroup/styles.module.scss";import"../../Checkbox.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Check.js";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Checkbox/styles.module.scss";import"../../RadioButton.js";import"../RadioButton/styles.module.scss";import"../../Input.js";import"../../hooks/useBreakpoint.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../Input/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../../FormLayout.js";import"../FormLayout/styles.module.scss";import"../../Select.js";import"../Select/styles.module.scss";import"../Icons/ChevronDown.js";import"../../utils/component.js";import"./styles.module.scss";export{K as Validation,L as default};
 //# sourceMappingURL=index.js.map

package/package.json

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

package/utils/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const isComponent: <T>(element: {} | null | undefined, type: React.ForwardRefExoticComponent<T>) => element is React.ReactElement<T, string | React.JSXElementConstructor<any>>;
+//# sourceMappingURL=component.d.ts.map

package/utils/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/utils/component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,WAAW,eACb,EAAE,GAAG,IAAI,GAAG,SAAS,0HAEwF,CAAC"}

package/utils/component.js

@@ -0,0 +1,2 @@
+import i from"react";const e=(o,t)=>i.isValidElement(o)&&o.type===t;export{e as isComponent};
+//# sourceMappingURL=component.js.map

package/utils/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../src/utils/component.ts"],"sourcesContent":["import React from 'react';\n\nexport const isComponent = <T>(\n  element: {} | null | undefined,\n  type: React.ForwardRefExoticComponent<T>\n): element is React.ReactElement<T> => React.isValidElement<T>(element) && (element as React.ReactElement).type === type;\n"],"names":["isComponent","element","type","React"],"mappings":"qBAEa,MAAAA,EAAc,CACzBC,EACAC,IACqCC,EAAM,eAAkBF,CAAO,GAAMA,EAA+B,OAASC"}