@helsenorge/designsystem-react 1.0.0 → 1.2.0

package/components/NotificationPanel/NotificationPanel.d.ts

@@ -25,24 +25,6 @@ interface NotificationPanelProps {
     /** Sets the data-testid attribute. */
     testId?: string;
 }
-export declare const variantToColorMap: {
-    info: {
-        color: string;
-        depth: number;
-    };
-    warn: {
-        color: string;
-        depth: number;
-    };
-    alert: {
-        color: string;
-        depth: number;
-    };
-    crisis: {
-        color: string;
-        depth: number;
-    };
-};
 declare const NotificationPanel: React.ForwardRefExoticComponent<NotificationPanelProps & React.RefAttributes<HTMLDivElement>>;
 export default NotificationPanel;
 //# sourceMappingURL=NotificationPanel.d.ts.map

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;AAElE,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,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;CAK7B,CAAC;AAUF,QAAA,MAAM,iBAAiB,+FA6ErB,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;AAS1B,oBAAY,yBAAyB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC7E,oBAAY,sBAAsB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE,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,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAiBD,QAAA,MAAM,iBAAiB,+FAqDrB,CAAC;AAEH,eAAe,iBAAiB,CAAC"}

package/components/NotificationPanel/componentdata.json

@@ -1,221 +1,17 @@
 {
   "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 | undefined",
-        "value": [
-          {
-            "value": "undefined"
-          },
-          {
-            "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 | undefined",
-        "value": [
-          {
-            "value": "undefined"
-          },
-          {
-            "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) | undefined"
-      }
-    },
-    "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.",
+      "description": "",
       "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"
+        "fileName": "src/components/NotificationPanel/utils.tsx",
+        "name": "AriaLabelAttributesConfig"
       },
       "declarations": [
         {
-          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
-          "name": "NotificationPanelProps"
+          "fileName": "src/components/NotificationPanel/utils.tsx",
+          "name": "AriaLabelAttributesConfig"
         }
       ],
       "required": false,
@@ -223,18 +19,18 @@
         "name": "string"
       }
     },
-    "testId": {
+    "id": {
       "defaultValue": null,
-      "description": "Sets the data-testid attribute.",
-      "name": "testId",
+      "description": "",
+      "name": "id",
       "parent": {
-        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
-        "name": "NotificationPanelProps"
+        "fileName": "src/components/NotificationPanel/utils.tsx",
+        "name": "AriaLabelAttributesConfig"
       },
       "declarations": [
         {
-          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
-          "name": "NotificationPanelProps"
+          "fileName": "src/components/NotificationPanel/utils.tsx",
+          "name": "AriaLabelAttributesConfig"
         }
       ],
       "required": false,

package/components/NotificationPanel/index.js

@@ -1,2 +1,2 @@
-import{d as e}from"../../_rollupPluginBabelHelpers-0f007973.js";import a from"react";import{c as o}from"../../index-d1c0552c.js";import{p as i}from"../../palette-f206f488.js";import{I as r}from"../../Icon-d69d65b3.js";import{A as t}from"../../constants-dbdea596.js";import{I as n}from"../../InfoSignStroke-f10d62aa.js";import{A as l}from"../../AlertSignStroke-32f09751.js";import{A as s}from"../../AlertSignFill-5df5b7c7.js";import c from"./styles.module.scss";import{C as m}from"../../Close-08d48540.js";import"../../_tslib-b219470a.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../X-867957f2.js";import"../Close/styles.module.scss";import"../../useBreakpoint-a74f5af5.js";import"../../grid-c105cad1.js";var f={info:{color:"kiwi",depth:50},warn:{color:"banana",depth:50},alert:{color:"cherry",depth:100},crisis:{color:"black",depth:0}},p={info:a.createElement(r,{svgIcon:n,color:i.kiwi900,hoverColor:i.kiwi900}),warn:a.createElement(r,{svgIcon:l,color:"black",hoverColor:"black"}),alert:a.createElement(r,{svgIcon:s,color:i.cherry500,hoverColor:i.cherry500}),alertLabel:a.createElement(r,{svgIcon:l,color:i.cherry500,hoverColor:i.cherry500}),crisis:a.createElement(r,{svgIcon:s,color:i.banana200,hoverColor:i.banana200})},d=a.forwardRef((function(i,r){var n,l,s=i.children,f=i.variant,d=void 0===f?"info":f,b=i.shadow,h=void 0!==b&&b,u=i.dismissable,v=void 0!==u&&u,_=i.onClick,j=i.label,g=i.fluid,w=void 0!==g&&g,C=i.size,E=i.className,k=i.testId;var y,I=!!j&&!s;return y=a.createElement("div",{ref:r,"data-testid":k,"data-analyticsid":t.NotificationPanel,className:o(c["notification-panel"],C&&c["notification-panel--"+C],c["notification-panel--"+d],(n={},e(n,c["notification-panel--shadow"],!w&&h),e(n,c["notification-panel--has-children"],!I),e(n,c["notification-panel--label-only"],I),e(n,c["notification-panel--dismissable"],!I&&v),n),E)},a.createElement("span",{className:c["notification-panel__icon"]},p["alert"===d&&j&&!s?"alertLabel":d]),!I&&v&&a.createElement("span",{className:c["notification-panel__close"]},a.createElement(m,{ariaLabel:i.ariaLabelCloseBtn,onClick:_})),a.createElement("section",{"aria-label":function(){if(s){var e="";return a.Children.map(s,(function(a){"string"==typeof a&&(e+=a)})),e}return""}(),className:o(c["notification-panel__content"],(l={},e(l,c["notification-panel__content--crisis"],"crisis"===d),e(l,c["notification-panel__content--alert"],"alert"===d),l))},j&&a.createElement("h1",{className:c["notification-panel__label"],dangerouslySetInnerHTML:{__html:j}}),s)),w?a.createElement("div",{className:o(c["fluid-wrapper"],c["fluid-wrapper--"+d],e({},c["fluid-wrapper--shadow"],h))},y):y}));export{d as default,f as variantToColorMap};
+import r from"react";import{p as o}from"../../palette-f206f488.js";import{I as e}from"../../Icon-d69d65b3.js";import"../../constants-dbdea596.js";import{I as a}from"../../InfoSignStroke-f10d62aa.js";import{A as l}from"../../AlertSignStroke-32f09751.js";import{A as t}from"../../AlertSignFill-5df5b7c7.js";import"../../_tslib-b219470a.js";import"../../index-d1c0552c.js";import"../../useUuid-3b1e73f2.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"../../uuid-11037462.js";var i={info:r.createElement(e,{svgIcon:a,color:o.kiwi900,hoverColor:o.kiwi900}),warn:r.createElement(e,{svgIcon:l,color:"black",hoverColor:"black"}),alert:r.createElement(e,{svgIcon:t,color:o.cherry500,hoverColor:o.cherry500}),alertLabel:r.createElement(e,{svgIcon:l,color:o.cherry500,hoverColor:o.cherry500}),crisis:r.createElement(e,{svgIcon:t,color:o.banana200,hoverColor:o.banana200})},c=function(r){var o=r.label,e=r.id;return e?{"aria-labelledby":e}:o?{"aria-label":o}:void 0};export{c as getAriaLabelAttributes,i as variantToIconMap};
 //# sourceMappingURL=index.js.map

package/components/NotificationPanel/utils.d.ts

@@ -0,0 +1,16 @@
+import { AriaAttributes } from 'react';
+export declare const variantToIconMap: {
+    info: JSX.Element;
+    warn: JSX.Element;
+    alert: JSX.Element;
+    alertLabel: JSX.Element;
+    crisis: JSX.Element;
+};
+interface AriaLabelAttributesConfig {
+    label?: string;
+    id?: string;
+}
+declare type AriaLabelAttributes = Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'>;
+export declare const getAriaLabelAttributes: (config: AriaLabelAttributesConfig) => AriaLabelAttributes | undefined;
+export {};
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationPanel/utils.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAQ9C,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,UAAU,yBAAyB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,aAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,GAAG,iBAAiB,CAAC,CAAC;AAElF,eAAO,MAAM,sBAAsB,WAAY,yBAAyB,KAAG,mBAAmB,GAAG,SAahG,CAAC"}

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,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAe,EAAE,WAAW,EAAE,UAAU,EAAkB,MAAM,WAAW,CAAC;AAC5E,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,iEAAiE;IACjE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,4CAA4C;IAC5C,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;CAC1C;AA2ED,QAAA,MAAM,KAAK,uFA0MT,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAe,EAAE,WAAW,EAAE,UAAU,EAAkB,MAAM,WAAW,CAAC;AAC5E,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,iEAAiE;IACjE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,4CAA4C;IAC5C,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;CAC1C;AA2ED,QAAA,MAAM,KAAK,uFAyMT,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/components/Panel/index.js

@@ -1,2 +1,2 @@
-export{c as PanelLayout,a as PanelStatus,b as PanelVariant,P as default}from"../../Panel-1ce6fe37.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"../../_tslib-b219470a.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";import"../../Title-01820508.js";import"../Title/styles.module.scss";import"../../constants-dbdea596.js";import"../../Button-78f848e6.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Icon-d69d65b3.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../Loader-06293a27.js";import"../Loader/styles.module.scss";import"../../useHover-18479690.js";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";import"../../ChevronDown-2b3daace.js";import"../../ChevronUp-dfafe27b.js";import"../../ArrowRight-43c97f7a.js";import"../../AlertSignFill-5df5b7c7.js";import"../../Pencil-dd3fe667.js";import"../../Calendar-a9aa98de.js";import"../../Watch-3d5fc351.js";import"../../usePrevious-ae293b10.js";import"../../Badge-eebcb720.js";import"../Badge/styles.module.scss";
+export{c as PanelLayout,a as PanelStatus,b as PanelVariant,P as default}from"../../Panel-f52d1b19.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"../../_tslib-b219470a.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";import"../../Title-01820508.js";import"../Title/styles.module.scss";import"../../constants-dbdea596.js";import"../../Button-0917df8e.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Icon-d69d65b3.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../Loader-06293a27.js";import"../Loader/styles.module.scss";import"../../useHover-18479690.js";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";import"../../ChevronDown-2b3daace.js";import"../../ChevronUp-dfafe27b.js";import"../../ArrowRight-43c97f7a.js";import"../../AlertSignFill-5df5b7c7.js";import"../../Pencil-dd3fe667.js";import"../../Calendar-a9aa98de.js";import"../../Watch-3d5fc351.js";import"../../usePrevious-ae293b10.js";import"../../Badge-eebcb720.js";import"../Badge/styles.module.scss";
 //# sourceMappingURL=index.js.map

package/components/Panel/styles.module.scss

@@ -1,7 +1,6 @@
 @import '../../scss/_spacers.scss';
 @import '../../scss/_breakpoints.scss';
 @import '../../scss/_palette.scss';
-@import '../../scss/_grid.scss';
 @import '../../scss/_font-settings.scss';
 
 .panel-wrapper {
@@ -26,11 +25,22 @@
   }
 }
 
+@mixin hover-and-focus-effects($background-color, $box-shadow-color) {
+  &:hover {
+    background-color: $background-color;
+  }
+
+  &:focus {
+    box-shadow: inset 0px 0px 0px 3px $box-shadow-color;
+  }
+}
+
 .panel {
   @include panel-padding;
   outline: none;
   position: relative;
   width: 100%;
+  box-sizing: border-box;
 
   &__container {
     @media (min-width: map-get($grid-breakpoints, sm)) {
@@ -113,7 +123,6 @@
     flex-direction: column;
     @media (min-width: map-get($grid-breakpoints, lg)) {
       align-self: end;
-      max-width: 300px;
     }
 
     &--layout3 {
@@ -130,7 +139,8 @@
   }
 
   &__details-btn {
-    &--pull-right {
+
+    @media (min-width: map-get($grid-breakpoints, lg)) {
       align-self: end;
     }
   }
@@ -139,19 +149,13 @@
 
   &--fill {
     background-color: $neutral50;
-
-    &:hover {
-      background-color: $neutral100;
-    }
-
-    &:focus {
-      box-shadow: inset 0px 0px 0px 3px $neutral600;
-    }
   }
 
-  &--selected#{&}--fill {
+  &--fill#{&}--selected {
     background-color: $neutral100;
-    border-bottom: 0;
+  }
+
+  &--fill#{&}--selected#{&}--clickable {
     &:hover {
       background-color: $neutral200;
     }
@@ -159,32 +163,25 @@
 
   &--white {
     background-color: $white;
-    &:hover {
-      background-color: $neutral100;
-    }
-    &:focus {
-      box-shadow: inset 0px 0px 0px 3px $neutral600;
-    }
   }
 
-  &--selected#{&}--white {
+  &--fill#{&}--clickable,
+  &--white#{&}--clickable {
+    @include hover-and-focus-effects($neutral100, $neutral600);
+  }
+
+  &--white#{&}--selected {
     box-shadow: inset 0px 0px 0px 6px $neutral100;
-    &:hover {
-      background-color: $neutral100;
-    }
-    &:focus {
-      box-shadow: inset 0px 0px 0px 3px $neutral600;
-    }
   }
 
   &--stroke {
     border: 6px solid $neutral100;
-    &:hover {
-      background-color: $neutral50;
-    }
+  }
+
+  &--stroke#{&}--clickable {
+    @include hover-and-focus-effects($neutral50, $neutral100);
     &:focus {
       border-color: $neutral600;
-      box-shadow: inset 0px 0px 0px 3px $neutral100;
     }
   }
 
@@ -193,22 +190,23 @@
     border-color: $neutral500;
     border-top: 1px solid;
     border-bottom: 1px solid;
-    &:hover {
-      background-color: $neutral50;
-    }
-    &:focus {
-      border-color: transparent;
-      box-shadow: inset 0px 0px 0px 3px $neutral600;
-    }
   }
 
-  &--selected#{&}--line {
+  &--line#{&}--clickable {
+    @include hover-and-focus-effects($neutral50, $neutral600);
+  }
+
+  &--line#{&}--selected {
     background-color: $neutral50;
     border-bottom: 0;
+  }
+
+  &--line#{&}--selected#{&}--clickable {
     &:hover {
       background-color: $neutral100;
     }
   }
+
   &--no-top-border#{&}--line {
     border-top: none;
   }
@@ -255,7 +253,8 @@
   @include panel-padding;
 
   &--open {
-    display: block;
+    display: flex;
+    flex-direction: column;
   }
   &--line {
     background: $white;