@helsenorge/designsystem-react 11.0.0-beta.3 → 11.0.0

package/components/Panel/Panel.d.ts

@@ -0,0 +1,65 @@
+import { default as React } from 'react';
+import { PaletteNames } from '../../theme/palette';
+import { PanelTitleProps } from './PanelTitle';
+export declare enum PanelLayout {
+    vertical = "vertical",
+    horizontal = "horizontal",
+    combined = "combined",
+    bAsRightCol = "bAsRightCol"
+}
+export type PanelColors = Extract<PaletteNames, 'white' | 'neutral'>;
+export declare enum PanelVariant {
+    fill = "fill",
+    line = "line",
+    outline = "outline"
+}
+export declare enum PanelStacking {
+    default = "default",
+    bFirst = "bFirst"
+}
+export declare enum PanelStatus {
+    none = "none",
+    new = "new",
+    error = "error",
+    draft = "draft"
+}
+export interface PanelProps {
+    /** Sets the text on the bottom call to action button */
+    buttonBottomText?: string;
+    /** Sets the action on the bottom call to action button */
+    buttonBottomOnClick?: () => void;
+    /** Sets the layout and order of the content boxes */
+    layout?: PanelLayout;
+    /** Sets the visual variant of panel */
+    variant?: PanelVariant;
+    /** Sets the color for panel if it has variant fill */
+    color?: PanelColors;
+    /** Sets classes on the outermost container of the panel */
+    className?: string;
+    /** Sets the stacking order of the content boxes */
+    stacking?: PanelStacking;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Children elements to be rendered inside the panel */
+    children?: React.ReactNode;
+    /** Displays a status on the left side: default normal */
+    status?: PanelStatus;
+}
+declare const Panel: React.FC<PanelProps> & {
+    PreContainer: React.FC<ContentProps>;
+    Title: React.FC<PanelTitleProps>;
+    A: React.FC<ContentProps>;
+    B: React.FC<ContentProps>;
+    C: React.FC<ContentProps>;
+    ExpandedContent: React.FC<ContentProps>;
+};
+export interface ContentProps {
+    /** Children elements to be rendered inside the content box */
+    children?: React.ReactNode;
+}
+export declare const PreContainer: React.FC<ContentProps>;
+export declare const A: React.FC<ContentProps>;
+export declare const B: React.FC<ContentProps>;
+export declare const C: React.FC<ContentProps>;
+export declare const ExpandedContent: React.FC<ContentProps>;
+export default Panel;

package/components/Panel/Panel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Panel/PanelExamples.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export declare const MedisinskFødselsregister: React.FC;
+export declare const TimeAvtale: React.FC;
+export declare const PasientReiser: React.FC;
+export declare const Helsekontakter: React.FC;
+export declare const Dokumentliste: React.FC;
+export declare const DokumentlisteDeling: React.FC;
+export declare const NyMelding: React.FC;

package/components/Panel/PanelTitle/PanelTitle.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+export interface PanelTitleProps {
+    /** Badge displayed in title */
+    badge?: React.ReactNode;
+    /** Icon displayed in title. Only IconSize Small is supported */
+    icon?: React.ReactNode;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Title text */
+    title: string;
+    /** Title HTML markup */
+    titleMarkup?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+declare const PanelTitle: React.FC<PanelTitleProps>;
+export default PanelTitle;

package/components/Panel/PanelTitle/index.d.ts

@@ -0,0 +1,3 @@
+import { default as PanelTitle } from './PanelTitle';
+export * from './PanelTitle';
+export default PanelTitle;

package/components/Panel/PanelTitle/index.js

@@ -0,0 +1,5 @@
+import { P as PanelTitle } from "../../../PanelTitle.js";
+export {
+  PanelTitle as default
+};
+//# sourceMappingURL=index.js.map

package/components/Panel/PanelTitle/index.js.map

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

package/components/Panel/PanelTitle/styles.module.scss

@@ -0,0 +1,43 @@
+@use 'sass:map';
+@use '../../../scss/spacers' as spacers;
+@use '../../../scss/breakpoints' as breakpoints;
+
+.paneltitle {
+  display: grid;
+  width: 100%;
+  gap: spacers.getSpacer(2xs);
+  grid-template-areas: 'title';
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    gap: spacers.getSpacer(2xs) spacers.getSpacer(s);
+  }
+
+  &--has-icon {
+    margin-left: -3.5rem;
+    grid-template-columns: 3rem 1fr;
+    grid-template-areas: 'icon title';
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      margin-left: -4rem;
+    }
+  }
+
+  &__icon {
+    grid-area: icon;
+    justify-self: center;
+    height: 48px;
+  }
+
+  &__title {
+    grid-area: title;
+    display: flex;
+    flex-flow: row;
+    gap: spacers.getSpacer(s);
+    margin-top: 8px;
+    height: fit-content;
+  }
+
+  &__badge {
+    display: inline;
+  }
+}

package/components/Panel/PanelTitle/styles.module.scss.d.ts

@@ -0,0 +1,13 @@
+export type Styles = {
+  paneltitle: string;
+  paneltitle__badge: string;
+  paneltitle__icon: string;
+  paneltitle__title: string;
+  'paneltitle--has-icon': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Panel/Paneldocs.d.ts

@@ -0,0 +1 @@
+export declare const PanelDocs: () => React.JSX.Element;

package/components/Panel/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Panel } from './Panel';
+export * from './Panel';
+export default Panel;

package/components/Panel/index.js

@@ -0,0 +1,15 @@
+import { P as Panel } from "../../Panel.js";
+import { A, B, C, E, a, c, d, b, e } from "../../Panel.js";
+export {
+  A,
+  B,
+  C,
+  E as ExpandedContent,
+  a as PanelLayout,
+  c as PanelStacking,
+  d as PanelStatus,
+  b as PanelVariant,
+  e as PreContainer,
+  Panel as default
+};
+//# sourceMappingURL=index.js.map

package/components/Panel/index.js.map

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

package/components/Panel/styles.module.scss

@@ -0,0 +1,224 @@
+@use 'sass:map';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/breakpoints' as breakpoints;
+@use '../../scss/font-settings' as fonts;
+@use '../Button/styles.module' as button;
+@import '../../scss/supernova/styles/colors.css';
+
+.panel {
+  $panel: &;
+
+  display: flex;
+  flex-flow: column;
+  padding: spacers.getSpacer(s);
+
+  & > *:not(:last-child) {
+    // because of a problem with gap this margin gives space between elements
+    margin-bottom: spacers.getSpacer(2xs);
+  }
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    padding: spacers.getSpacer(m);
+  }
+
+  &--icon {
+    padding-left: calc(3.5rem + spacers.getSpacer(s));
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      padding-left: calc(4rem + spacers.getSpacer(m));
+    }
+  }
+
+  &__pre-container {
+    width: 100%;
+  }
+
+  &__content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+    gap: spacers.getSpacer(m);
+
+    &__item {
+      width: 100%;
+      height: 100%;
+    }
+
+    &--b-first {
+      .panel__content__item--b {
+        order: -1;
+      }
+    }
+
+    &--horizontal {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+        flex-flow: row;
+      }
+    }
+
+    &--vertical {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+        flex-flow: column;
+      }
+    }
+
+    &--combined {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+        display: grid;
+        grid-template-areas:
+          'contentA contentB'
+          'contentC contentC';
+
+        & .panel__content__item--a {
+          grid-area: contentA;
+        }
+
+        & .panel__content__item--b {
+          grid-area: contentB;
+        }
+
+        & .panel__content__item--c {
+          grid-area: contentC;
+        }
+      }
+    }
+
+    &--bAsRightCol {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+        display: grid;
+        grid-template-areas:
+          'contentA contentB'
+          'contentC contentB';
+
+        & .panel__content__item--a {
+          grid-area: contentA;
+        }
+
+        & .panel__content__item--b {
+          grid-area: contentB;
+        }
+
+        & .panel__content__item--c {
+          grid-area: contentC;
+        }
+      }
+    }
+  }
+
+  &--white {
+    background-color: var(--color-base-background-white);
+  }
+
+  &--neutral {
+    background-color: var(--color-base-background-neutral);
+  }
+
+  &--line {
+    background-color: transparent;
+  }
+
+  &__border {
+    &--outline {
+      &--outer {
+        border: 1px solid var(--core-color-neutral-300);
+      }
+
+      &--inner {
+        border: 8px solid var(--core-color-neutral-100);
+      }
+    }
+
+    &--line {
+      border-top: 1px solid var(--core-color-neutral-600);
+      border-bottom: 1px solid var(--core-color-neutral-600);
+      border-right: none;
+      border-left: none;
+      padding: spacers.getSpacer(xs) 0;
+    }
+
+    &--fill--neutral {
+      border: 1px solid var(--core-color-neutral-300);
+    }
+  }
+
+  &--border {
+    border: 2px solid var(--color-base-background-white);
+  }
+
+  &--status {
+    border-left: 6px;
+    border-left-style: solid;
+    border-left-color: transparent;
+  }
+
+  &--new {
+    border-left-color: var(--core-color-blueberry-500);
+  }
+
+  &--draft {
+    border-left: dotted 6px var(--core-color-neutral-500);
+  }
+
+  &--error {
+    border-left-color: var(--core-color-cherry-500);
+  }
+
+  &__expander {
+    &__border {
+      &--expanded {
+        border-left: 2px solid var(--color-base-border-onlight-emphasized);
+      }
+
+      &--not-expanded {
+        &--white {
+          border-left: 2px solid var(--color-base-background-white);
+        }
+
+        &--neutral {
+          border-left: 2px solid var(--color-base-background-neutral);
+        }
+
+        &--line {
+          border-left: 2px solid transparent;
+        }
+      }
+    }
+
+    &__separator {
+      height: 1px;
+      width: 40px;
+      background-color: var(--color-base-border-onlight);
+    }
+
+    &__content {
+      margin-top: spacers.getSpacer(s);
+    }
+  }
+
+  &__button-bottom {
+    margin-top: spacers.getSpacer(2xs);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      margin-top: spacers.getSpacer(s);
+    }
+  }
+}
+
+.expander {
+  // This is a copy of the button class in Expander
+  &__button {
+    position: relative;
+    padding-right: getSpacer(s);
+    text-align: left;
+    width: fit-content;
+
+    &--expanded {
+      @include button.outline-borderless-hover;
+    }
+  }
+
+  &__button &__button__text {
+    @include button.outline-borderless-text-hover;
+  }
+}

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

@@ -0,0 +1,71 @@
+export type Styles = {
+  button: string;
+  button__arrow: string;
+  'button__arrow--both-icons': string;
+  'button__both-icons': string;
+  'button__left-icon': string;
+  'button__only-icon': string;
+  'button__right-icon': string;
+  'button__right-unicode-arrow': string;
+  button__text: string;
+  'button__text--centered': string;
+  'button__text--ellipsis': string;
+  'button--arrow': string;
+  'button--arrow--both-icons': string;
+  'button--borderless': string;
+  'button--both-icons': string;
+  'button--destructive': string;
+  'button--large': string;
+  'button--left-icon': string;
+  'button--normal': string;
+  'button--on-dark': string;
+  'button--only-icon': string;
+  'button--outline': string;
+  'button--right-icon': string;
+  'button-wrapper': string;
+  'button-wrapper--fluid': string;
+  diagonal: string;
+  diagonal__line: string;
+  'diagonal--on-dark': string;
+  expander__button: string;
+  expander__button__text: string;
+  'expander__button--expanded': string;
+  panel: string;
+  'panel__border--fill--neutral': string;
+  'panel__border--line': string;
+  'panel__border--outline--inner': string;
+  'panel__border--outline--outer': string;
+  'panel__button-bottom': string;
+  panel__content: string;
+  panel__content__item: string;
+  'panel__content__item--a': string;
+  'panel__content__item--b': string;
+  'panel__content__item--c': string;
+  'panel__content--b-first': string;
+  'panel__content--bAsRightCol': string;
+  'panel__content--combined': string;
+  'panel__content--horizontal': string;
+  'panel__content--vertical': string;
+  'panel__expander__border--expanded': string;
+  'panel__expander__border--not-expanded--line': string;
+  'panel__expander__border--not-expanded--neutral': string;
+  'panel__expander__border--not-expanded--white': string;
+  panel__expander__content: string;
+  panel__expander__separator: string;
+  'panel__pre-container': string;
+  'panel--border': string;
+  'panel--draft': string;
+  'panel--error': string;
+  'panel--icon': string;
+  'panel--line': string;
+  'panel--neutral': string;
+  'panel--new': string;
+  'panel--status': string;
+  'panel--white': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/PanelList/PanelList.d.ts

@@ -1,10 +1,10 @@
 import { default as React } from 'react';
-import { PanelOldVariant } from '../PanelOld';
+import { PanelVariant } from '../Panel/Panel';
 export interface PanelListProps {
     /** Panels to render inside the PanelList */
     children?: React.ReactNode;
     /** Changes the visual representation of the panel. Default: fill */
-    variant?: keyof typeof PanelOldVariant;
+    variant?: PanelVariant;
     /** Sets the data-testid attribute. */
     testId?: string;
 }

package/components/PanelList/index.js

@@ -2,17 +2,25 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "../../constants.js";
-import { b as PanelOldVariant, P as PanelOld } from "../../PanelOld.js";
+import { b as PanelVariant, P as Panel } from "../../Panel.js";
 import styles from "./styles.module.scss";
-const isPanelComponent = (element) => React__default.isValidElement(element) && element.type === PanelOld;
+const isPanelComponent = (element) => React__default.isValidElement(element) && element.type === Panel;
 const PanelList = React__default.forwardRef(function BadgeForwardedRef(props, ref) {
-  const { testId, children, variant = PanelOldVariant.fill } = props;
-  const renderPanel = (panel, firstChild) => React__default.cloneElement(panel, {
+  const { testId, children, variant = PanelVariant.fill } = props;
+  const renderPanel = (panel) => React__default.cloneElement(panel, {
     variant,
-    noTopBorder: variant === PanelOldVariant.line && !firstChild,
-    className: classNames(panel.props.className, variant !== PanelOldVariant.line && styles["panel-list__panel"])
+    className: classNames(panel.props.className, styles[`panel-list__panel--${variant}`])
   });
-  return /* @__PURE__ */ jsx("div", { ref, "data-testid": testId, "data-analyticsid": AnalyticsId.PanelList, children: React__default.Children.map(children, (child, index) => isPanelComponent(child) ? renderPanel(child, index === 0) : child) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-testid": testId,
+      "data-analyticsid": AnalyticsId.PanelList,
+      className: classNames({ [styles["panel-list--outline"]]: variant === PanelVariant.outline }),
+      children: React__default.Children.map(children, (child) => isPanelComponent(child) ? renderPanel(child) : child)
+    }
+  );
 });
 export {
   PanelList as default

package/components/PanelList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PanelList/PanelList.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport PanelOld, { PanelOldProps, PanelOldVariant } from '../PanelOld';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: keyof typeof PanelOldVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelOldProps> =>\n  React.isValidElement<PanelOldProps>(element) && (element as React.ReactElement).type === PanelOld;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelOldVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelOldProps>, firstChild: boolean) =>\n    React.cloneElement(panel, {\n      variant: variant,\n      noTopBorder: variant === PanelOldVariant.line && !firstChild,\n      className: classNames(panel.props.className, variant !== PanelOldVariant.line && styles['panel-list__panel']),\n    });\n\n  return (\n    <div ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.PanelList}>\n      {React.Children.map(children, (child, index) => (isPanelComponent(child) ? renderPanel(child, index === 0) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n"],"names":["React"],"mappings":";;;;;;AAkBA,MAAM,mBAAmB,CAAC,YACxBA,eAAM,eAA8B,OAAO,KAAM,QAA+B,SAAS;AAE3F,MAAM,YAAYA,eAAM,WAAW,SAAS,kBAAkB,OAAuB,KAAyC;AAC5H,QAAM,EAAE,QAAQ,UAAU,UAAU,gBAAgB,SAAS;AAE7D,QAAM,cAAc,CAAC,OAA0C,eAC7DA,eAAM,aAAa,OAAO;AAAA,IACxB;AAAA,IACA,aAAa,YAAY,gBAAgB,QAAQ,CAAC;AAAA,IAClD,WAAW,WAAW,MAAM,MAAM,WAAW,YAAY,gBAAgB,QAAQ,OAAO,mBAAmB,CAAC;AAAA,EAAA,CAC7G;AAGD,SAAA,oBAAC,OAAI,EAAA,KAAU,eAAa,QAAQ,oBAAkB,YAAY,WAC/D,UAAMA,eAAA,SAAS,IAAI,UAAU,CAAC,OAAO,UAAW,iBAAiB,KAAK,IAAI,YAAY,OAAO,UAAU,CAAC,IAAI,KAAM,EACrH,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PanelList/PanelList.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel/Panel';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelProps> =>\n  React.isValidElement<PanelProps>(element) && (element as React.ReactElement).type === Panel;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>): React.ReactElement<PanelProps> =>\n    React.cloneElement(panel, {\n      variant: variant,\n      className: classNames(panel.props.className, styles[`panel-list__panel--${variant}`]),\n    });\n\n  return (\n    <div\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.PanelList}\n      className={classNames({ [styles['panel-list--outline']]: variant === PanelVariant.outline })}\n    >\n      {React.Children.map(children, child => (isPanelComponent(child) ? renderPanel(child) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n"],"names":["React"],"mappings":";;;;;;AAkBA,MAAM,mBAAmB,CAAC,YACxBA,eAAM,eAA2B,OAAO,KAAM,QAA+B,SAAS;AAExF,MAAM,YAAYA,eAAM,WAAW,SAAS,kBAAkB,OAAuB,KAAyC;AAC5H,QAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,SAAS;AAE1D,QAAM,cAAc,CAAC,UACnBA,eAAM,aAAa,OAAO;AAAA,IACxB;AAAA,IACA,WAAW,WAAW,MAAM,MAAM,WAAW,OAAO,sBAAsB,OAAO,EAAE,CAAC;AAAA,EAAA,CACrF;AAGD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B,WAAW,WAAW,EAAE,CAAC,OAAO,qBAAqB,CAAC,GAAG,YAAY,aAAa,SAAS;AAAA,MAE1F,UAAAA,eAAM,SAAS,IAAI,UAAU,CAAA,UAAU,iBAAiB,KAAK,IAAI,YAAY,KAAK,IAAI,KAAM;AAAA,IAAA;AAAA,EAC/F;AAEJ,CAAC;"}

package/components/PanelList/styles.module.scss

@@ -4,11 +4,26 @@
 @use '../../scss/breakpoints' as breakpoints;
 
 .panel-list {
-  &__panel:not(:last-child) {
-    margin-bottom: spacers.getSpacer(2xs);
+  &--outline {
+    border: 1px solid var(--core-color-neutral-300);
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      margin-bottom: spacers.getSpacer(s);
+    & > div {
+      // overstyrer så ikke hvert panel har egen border
+      border: none;
+    }
+  }
+
+  &__panel {
+    &--line:not(:last-child) {
+      margin-bottom: -1px;
+    }
+
+    &--outline:not(:last-child) {
+      margin-bottom: -9px;
+    }
+
+    &--fill:not(:last-child) {
+      margin-bottom: spacers.getSpacer(xs);
     }
   }
 }

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

@@ -1,5 +1,8 @@
 export type Styles = {
-  'panel-list__panel': string;
+  'panel-list__panel--fill': string;
+  'panel-list__panel--line': string;
+  'panel-list__panel--outline': string;
+  'panel-list--outline': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/PanelListOld/PanelListOld.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { PanelOldVariant } from '../PanelOld';
+export interface PanelListOldProps {
+    /** Panels to render inside the PanelList */
+    children?: React.ReactNode;
+    /** Changes the visual representation of the panel. Default: fill */
+    variant?: keyof typeof PanelOldVariant;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const PanelListOld: React.ForwardRefExoticComponent<PanelListOldProps & React.RefAttributes<HTMLDivElement>>;
+export default PanelListOld;

package/components/PanelListOld/PanelListOld.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/PanelListOld/index.d.ts

@@ -0,0 +1,3 @@
+import { default as PanelListOld } from './PanelListOld';
+export * from './PanelListOld';
+export default PanelListOld;

package/components/PanelListOld/index.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "../../constants.js";
+import { b as PanelOldVariant, P as PanelOld } from "../../PanelOld.js";
+import styles from "./styles.module.scss";
+const isPanelComponent = (element) => React__default.isValidElement(element) && element.type === PanelOld;
+const PanelListOld = React__default.forwardRef(function BadgeForwardedRef(props, ref) {
+  const { testId, children, variant = PanelOldVariant.fill } = props;
+  const renderPanel = (panel, firstChild) => React__default.cloneElement(panel, {
+    variant,
+    noTopBorder: variant === PanelOldVariant.line && !firstChild,
+    className: classNames(panel.props.className, variant !== PanelOldVariant.line && styles["panel-list__panel"])
+  });
+  return /* @__PURE__ */ jsx("div", { ref, "data-testid": testId, "data-analyticsid": AnalyticsId.PanelList, children: React__default.Children.map(children, (child, index) => isPanelComponent(child) ? renderPanel(child, index === 0) : child) });
+});
+export {
+  PanelListOld as default
+};
+//# sourceMappingURL=index.js.map

package/components/PanelListOld/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/PanelListOld/PanelListOld.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport PanelOld, { PanelOldProps, PanelOldVariant } from '../PanelOld';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListOldProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: keyof typeof PanelOldVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelOldProps> =>\n  React.isValidElement<PanelOldProps>(element) && (element as React.ReactElement).type === PanelOld;\n\nconst PanelListOld = React.forwardRef(function BadgeForwardedRef(props: PanelListOldProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelOldVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelOldProps>, firstChild: boolean) =>\n    React.cloneElement(panel, {\n      variant: variant,\n      noTopBorder: variant === PanelOldVariant.line && !firstChild,\n      className: classNames(panel.props.className, variant !== PanelOldVariant.line && styles['panel-list__panel']),\n    });\n\n  return (\n    <div ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.PanelList}>\n      {React.Children.map(children, (child, index) => (isPanelComponent(child) ? renderPanel(child, index === 0) : child))}\n    </div>\n  );\n});\n\nexport default PanelListOld;\n"],"names":["React"],"mappings":";;;;;;AAkBA,MAAM,mBAAmB,CAAC,YACxBA,eAAM,eAA8B,OAAO,KAAM,QAA+B,SAAS;AAE3F,MAAM,eAAeA,eAAM,WAAW,SAAS,kBAAkB,OAA0B,KAAyC;AAClI,QAAM,EAAE,QAAQ,UAAU,UAAU,gBAAgB,SAAS;AAE7D,QAAM,cAAc,CAAC,OAA0C,eAC7DA,eAAM,aAAa,OAAO;AAAA,IACxB;AAAA,IACA,aAAa,YAAY,gBAAgB,QAAQ,CAAC;AAAA,IAClD,WAAW,WAAW,MAAM,MAAM,WAAW,YAAY,gBAAgB,QAAQ,OAAO,mBAAmB,CAAC;AAAA,EAAA,CAC7G;AAGD,SAAA,oBAAC,OAAI,EAAA,KAAU,eAAa,QAAQ,oBAAkB,YAAY,WAC/D,UAAMA,eAAA,SAAS,IAAI,UAAU,CAAC,OAAO,UAAW,iBAAiB,KAAK,IAAI,YAAY,OAAO,UAAU,CAAC,IAAI,KAAM,EACrH,CAAA;AAEJ,CAAC;"}

package/components/PanelListOld/styles.module.scss

@@ -0,0 +1,14 @@
+@use 'sass:map';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/breakpoints' as breakpoints;
+
+.panel-list {
+  &__panel:not(:last-child) {
+    margin-bottom: spacers.getSpacer(2xs);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      margin-bottom: spacers.getSpacer(s);
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+export type Styles = {
+  'panel-list__panel': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;