@helsenorge/designsystem-react 13.0.0-beta.2 → 13.0.0-beta.5

package/lib/components/NotificationPanel/index.js

@@ -0,0 +1,130 @@
+import "../../environment.js";
+import { a as IconSize, n as AnalyticsId } from "../../constants2.js";
+import "../../usePseudoClasses.js";
+import "../../grid.js";
+import "../../palette.js";
+import "../../spacers.js";
+import "../../theme.js";
+import "../../color.js";
+import "../../Icon.js";
+import "../../refs.js";
+import "../../CheckFill.js";
+import "../../ErrorSignFill.js";
+import "../../InfoSignFill.js";
+import "../../TriangleX.js";
+import { t as NotificationBadge_default } from "../../NotificationBadge.js";
+import "../../_rolldown_dynamic_import_helper.js";
+import "../../useIsServerSide.js";
+import "../../LazyIcon.js";
+import "../../component.js";
+import "../../useIcons.js";
+import "../../useBreakpoint.js";
+import { t as useIsMobileBreakpoint } from "../../useIsMobileBreakpoint.js";
+import "../../ArrowRight.js";
+import "../../Button.js";
+import { t as useIdWithFallback } from "../../useIdWithFallback.js";
+import { n as getAriaLabelAttributes } from "../../accessibility.js";
+import "../../debounce.js";
+import "../../usePrevious.js";
+import "../../useSize.js";
+import "../../X.js";
+import { t as Close_default } from "../../Close.js";
+import "../../ChevronDown.js";
+import "../../ChevronUp.js";
+import "../../useExpand.js";
+import { t as Expander_default } from "../../Expander.js";
+import React from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./styles.module.scss";
+var FluidWrapper = ({ fluid, children }) => {
+	if (fluid) return /* @__PURE__ */ jsx("div", {
+		className: classNames(styles["fluid-wrapper"]),
+		children
+	});
+	return children;
+};
+var NotificationPanel_default = React.forwardRef((props, ref) => {
+	const { children, variant = "info", dismissable = false, onClick, expanderChildren, expanderButtonText, expanderButtonClosedText, expanderOpenFromStart = false, compactVariant, label, labelId: labelIdProp, labelHtmlMarkup = "h1", fluid = false, size, className, role, testId } = props;
+	const labelId = useIdWithFallback(labelIdProp);
+	const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);
+	const isMobile = useIsMobileBreakpoint();
+	const renderContent = () => {
+		const outlineVariant = compactVariant === "outline";
+		const contentClasses = classNames(styles["notification-panel__content"]);
+		const labelClasses = classNames(styles["notification-panel__label"], {
+			[styles["notification-panel__label--no-content"]]: !children && !expanderChildren,
+			[styles["notification-panel__label--compact"]]: !!compactVariant,
+			[styles["notification-panel__label--outline"]]: outlineVariant
+		});
+		const childrenClasses = classNames(styles["notification-panel__children"], {
+			[styles["notification-panel__children--with-label"]]: label,
+			[styles["notification-panel__children--expander-no-label"]]: expanderChildren && !label,
+			[styles["notification-panel__children--outline"]]: outlineVariant
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			className: contentClasses,
+			id: !label ? labelId : void 0,
+			children: [
+				label && /* @__PURE__ */ jsx(labelHtmlMarkup, {
+					className: labelClasses,
+					id: labelId,
+					children: label
+				}),
+				children && /* @__PURE__ */ jsx("div", {
+					className: childrenClasses,
+					children
+				}),
+				expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && /* @__PURE__ */ jsx(Expander_default, {
+					title: expanderOpen ? expanderButtonText : expanderButtonClosedText,
+					onExpand: setExpanderOpen,
+					expanded: expanderOpen,
+					testId: "expand",
+					children: expanderChildren
+				})
+			]
+		});
+	};
+	const notificationPanelClasses = classNames(styles["notification-panel"], styles[`notification-panel--${variant}`], size && styles[`notification-panel--${size}`], {
+		[styles["notification-panel--compact"]]: !!compactVariant,
+		[styles["notification-panel--compact--basic"]]: compactVariant === "basic",
+		[styles["notification-panel--compact--outline"]]: compactVariant === "outline",
+		[styles["notification-panel--with-content"]]: expanderChildren || label && children,
+		[styles["notification-panel--dismissable"]]: dismissable
+	}, className);
+	const ariaRole = role || variant === "error" && "alert" || void 0;
+	const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({
+		label,
+		id: labelId
+	}) : void 0;
+	return /* @__PURE__ */ jsx(FluidWrapper, {
+		fluid,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			role: ariaRole,
+			"data-testid": testId,
+			"data-analyticsid": AnalyticsId.NotificationPanel,
+			className: notificationPanelClasses,
+			...ariaLabelAttributes,
+			children: [
+				/* @__PURE__ */ jsx(NotificationBadge_default, {
+					variant,
+					size: compactVariant || isMobile ? IconSize.XSmall : IconSize.Small,
+					className: styles["notification-panel__icon"]
+				}),
+				dismissable && /* @__PURE__ */ jsx("span", {
+					className: styles["notification-panel__close"],
+					children: /* @__PURE__ */ jsx(Close_default, {
+						ariaLabel: props.ariaLabelCloseBtn,
+						onClick,
+						color: "black"
+					})
+				}),
+				renderContent()
+			]
+		})
+	});
+});
+export { NotificationPanel_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/components/NotificationPanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["FluidWrapper: React.FC<WrapFluidProps>"],"sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx","../../../src/components/NotificationPanel/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Expander from '../Expander';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'error' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Changes the underlying element of the label. */\n  labelHtmlMarkup?: LabelTags;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert' | 'status';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper']);\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    labelId: labelIdProp,\n    labelHtmlMarkup = 'h1',\n    fluid = false,\n    size,\n    className,\n    role,\n    testId,\n  } = props;\n  const labelId = useIdWithFallback(labelIdProp);\n  const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n  const isMobile = useIsMobileBreakpoint();\n\n  const renderContent = (): JSX.Element => {\n    const outlineVariant = compactVariant === 'outline';\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label--compact']]: !!compactVariant,\n      [styles['notification-panel__label--outline']]: outlineVariant,\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__children--with-label']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n      [styles['notification-panel__children--outline']]: outlineVariant,\n    });\n    const CustomTag = labelHtmlMarkup;\n\n    return (\n      <div className={contentClasses} id={!label ? labelId : undefined}>\n        {label && (\n          <CustomTag className={labelClasses} id={labelId}>\n            {label}\n          </CustomTag>\n        )}\n        {children && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <Expander\n            title={expanderOpen ? expanderButtonText : expanderButtonClosedText}\n            onExpand={setExpanderOpen}\n            expanded={expanderOpen}\n            testId=\"expand\"\n          >\n            {expanderChildren}\n          </Expander>\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    size && styles[`notification-panel--${size}`],\n    {\n      [styles['notification-panel--compact']]: !!compactVariant,\n      [styles['notification-panel--compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel--compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || (variant === 'error' && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: labelId }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <NotificationBadge\n          variant={variant}\n          size={compactVariant || isMobile ? IconSize.XSmall : IconSize.Small}\n          className={styles['notification-panel__icon']}\n        />\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color=\"black\" />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n","import NotificationPanel from './NotificationPanel';\nexport * from './NotificationPanel';\nexport default NotificationPanel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,IAAMA,gBAA0C,EAAE,OAAO,eAAe;AACtE,KAAI,MAGF,QAAO,oBAAC,OAAA;EAAI,WAFS,WAAW,OAAO,iBAAiB;EAElB;GAAe;AAEvD,QAAO;;AClET,IAAA,4BDqE0B,MAAM,YAAoD,OAAO,QAAQ;CACjG,MAAM,EACJ,UACA,UAAU,QACV,cAAc,OACd,SACA,kBACA,oBACA,0BACA,wBAAwB,OACxB,gBACA,OACA,SAAS,aACT,kBAAkB,MAClB,QAAQ,OACR,MACA,WACA,MACA,WACE;CACJ,MAAM,UAAU,kBAAkB,YAAY;CAC9C,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,sBAAsB;CAC7E,MAAM,WAAW,uBAAuB;CAExC,MAAM,sBAAmC;EACvC,MAAM,iBAAiB,mBAAmB;EAC1C,MAAM,iBAAiB,WAAW,OAAO,+BAA+B;EACxE,MAAM,eAAe,WAAW,OAAO,8BAA8B;IAClE,OAAO,2CAA2C,CAAC,YAAY,CAAC;IAChE,OAAO,wCAAwC,CAAC,CAAC;IACjD,OAAO,wCAAwC;GACjD,CAAC;EACF,MAAM,kBAAkB,WAAW,OAAO,iCAAiC;IACxE,OAAO,8CAA8C;IACrD,OAAO,qDAAqD,oBAAoB,CAAC;IACjF,OAAO,2CAA2C;GACpD,CAAC;AAGF,SACE,qBAAC,OAAA;GAAI,WAAW;GAAgB,IAAI,CAAC,QAAQ,UAAU,KAAA;;IACpD,SACC,oBALY,iBAKX;KAAU,WAAW;KAAc,IAAI;eACrC;MACS;IAEb,YAAY,oBAAC,OAAA;KAAI,WAAW;KAAkB;MAAe;IAC7D,oBAAoB,sBAAsB,4BAA4B,CAAC,kBACtE,oBAAC,kBAAA;KACC,OAAO,eAAe,qBAAqB;KAC3C,UAAU;KACV,UAAU;KACV,QAAO;eAEN;MACQ;;IAET;;CAIV,MAAM,2BAA2B,WAC/B,OAAO,uBACP,OAAO,uBAAuB,YAC9B,QAAQ,OAAO,uBAAuB,SACtC;GACG,OAAO,iCAAiC,CAAC,CAAC;GAC1C,OAAO,wCAAwC,mBAAmB;GAClE,OAAO,0CAA0C,mBAAmB;GACpE,OAAO,sCAAsC,oBAAqB,SAAS;GAC3E,OAAO,qCAAqC;EAC9C,EACD,UACD;CAED,MAAM,WAAW,QAAS,YAAY,WAAW,WAAY,KAAA;CAC7D,MAAM,sBAAsB,WAAW,uBAAuB;EAAE;EAAO,IAAI;EAAS,CAAC,GAAG,KAAA;AAExF,QACE,oBAAC,cAAA;EAAoB;YACnB,qBAAC,OAAA;GACM;GACL,MAAM;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,WAAW;GACX,GAAI;;IAEJ,oBAAC,2BAAA;KACU;KACT,MAAM,kBAAkB,WAAW,SAAS,SAAS,SAAS;KAC9D,WAAW,OAAO;MAClB;IACD,eACC,oBAAC,QAAA;KAAK,WAAW,OAAO;eACtB,oBAAC,eAAA;MAAM,WAAW,MAAM;MAA4B;MAAS,OAAM;OAAU;MACxE;IAER,eAAe;;IACZ;GACO;EAEjB"}

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

@@ -0,0 +1,198 @@
+@use 'sass:map';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/palette' as palette;
+@use '../../scss/breakpoints' as breakpoints;
+
+.notification-panel {
+  $panel: &;
+
+  display: flex;
+  padding: spacers.getSpacer(2xs) spacers.getSpacer(s) spacers.getSpacer(2xs) spacers.getSpacer(2xs);
+  box-shadow: 0.25rem 0.25rem 0.375rem rgb(0 0 0 / 15%);
+  border-radius: 0.25rem;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    padding-left: spacers.getSpacer(s);
+    padding-right: spacers.getSpacer(m);
+  }
+
+  &--compact {
+    width: fit-content;
+    font-size: font-settings.$font-size-xs;
+    line-height: 1.25rem;
+    box-shadow: none;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      padding-left: spacers.getSpacer(2xs);
+      padding-right: spacers.getSpacer(s);
+    }
+
+    &--outline {
+      border: none;
+    }
+  }
+  #{$panel}__icon {
+    margin-right: spacers.getSpacer(3xs);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      margin-right: spacers.getSpacer(2xs);
+    }
+  }
+
+  &--dismissable {
+    padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(m);
+  }
+
+  &--small {
+    max-width: map.get(breakpoints.$grid-breakpoints, sm);
+  }
+
+  &--medium {
+    max-width: map.get(breakpoints.$grid-breakpoints, md);
+  }
+
+  &--large {
+    max-width: map.get(breakpoints.$grid-breakpoints, lg);
+  }
+
+  &--info {
+    border: 0.125rem solid palette.$blueberry700;
+    background-color: palette.$blueberry50;
+  }
+
+  &--info#{&}--compact {
+    box-shadow: none;
+    background-color: transparent;
+  }
+
+  &--info#{&}--compact--basic {
+    border: none;
+  }
+
+  &--warn {
+    border: 0.125rem solid palette.$banana800;
+    background-color: palette.$banana50;
+  }
+
+  &--warn#{&}--compact {
+    box-shadow: none;
+    background-color: transparent;
+  }
+
+  &--warn#{&}--compact--basic {
+    border: none;
+  }
+
+  &--error {
+    border: 0.125rem solid palette.$cherry700;
+    background-color: palette.$cherry50;
+  }
+
+  &--error#{&}--compact {
+    box-shadow: none;
+    background-color: transparent;
+  }
+
+  &--error#{&}--compact--basic {
+    border: none;
+  }
+
+  &--success {
+    border: 0.125rem solid palette.$kiwi900;
+    background-color: palette.$kiwi50;
+  }
+
+  &--success#{&}--compact {
+    box-shadow: none;
+    background-color: transparent;
+  }
+
+  &--success#{&}--compact--basic {
+    border: none;
+  }
+
+  &__close {
+    order: 1;
+    margin-left: auto;
+    padding-left: spacers.getSpacer(3xs);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      padding-left: spacers.getSpacer(2xs);
+    }
+  }
+
+  &__content {
+    align-self: center;
+  }
+
+  &__label,
+  &__children {
+    font-size: font-settings.$font-size-xs;
+    line-height: font-settings.$lineheight-size-xs;
+    margin: 0;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      font-size: font-settings.$font-size-sm;
+      line-height: 1.625rem;
+    }
+  }
+
+  &__label {
+    font-weight: 700;
+    margin: spacers.getSpacer(2xs) 0 0;
+
+    &--compact {
+      font-size: font-settings.$font-size-xs;
+      line-height: 1.25rem;
+    }
+
+    &--no-content {
+      margin: 0;
+    }
+
+    &--compact,
+    &--no-content {
+      font-weight: 600;
+    }
+
+    &--outline {
+      font-weight: 500;
+    }
+  }
+
+  &__children {
+    font-weight: 600;
+    padding: spacers.getSpacer(3xs) 0;
+
+    &--with-label {
+      font-weight: 500;
+    }
+
+    &--expander-no-label {
+      margin: spacers.getSpacer(2xs) 0 0;
+
+      @media (max-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+        padding-top: 0;
+      }
+    }
+
+    &--outline {
+      font-weight: 500;
+    }
+  }
+
+  &__icon {
+    line-height: 0;
+  }
+
+  &--with-content {
+    padding-bottom: spacers.getSpacer(xs);
+  }
+}
+
+.fluid-wrapper {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}

package/lib/components/Panel/Panel.d.ts

@@ -0,0 +1,78 @@
+import { default as React } from 'react';
+import { PaletteNames } from '../../theme/palette';
+import { PanelTitleProps } from './PanelTitle';
+import { HNDesignsystemPanel } from '../../resources/Resources';
+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 {
+    /** Aria label on call to action button */
+    buttonBottomAriaLabel?: string;
+    /** Sets the text on the bottom call to action button */
+    buttonBottomText?: string;
+    /** Sets the action on the bottom call to action button */
+    buttonBottomOnClick?: () => void;
+    /** Expands or collapses the panel. Only applicable when ExpandedContent is used */
+    expanded?: boolean;
+    /** 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;
+    /** Action called when toggling expansion of ExpandedContent */
+    onExpand?: (isExpanded?: boolean) => void;
+    /** 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;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemPanel>;
+    /** Highlights text in title and content. Used for search results */
+    highlightText?: string;
+}
+declare const PanelRoot: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLDivElement>>;
+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>;
+type PanelComponent = typeof PanelRoot & {
+    PreContainer: React.FC<ContentProps>;
+    Title: React.FC<PanelTitleProps>;
+    A: React.FC<ContentProps>;
+    B: React.FC<ContentProps>;
+    C: React.FC<ContentProps>;
+    ExpandedContent: React.FC<ContentProps>;
+};
+declare const Panel: PanelComponent;
+export default Panel;

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

@@ -0,0 +1,12 @@
+import "../../../uuid.js";
+import "../../../environment.js";
+import "../../../constants2.js";
+import "../../../grid.js";
+import "../../../useBreakpoint.js";
+import "../../../Spacer.js";
+import "../../../Title.js";
+import "../../../Title2.js";
+import "../../../Duolist.js";
+import "../../../Highlighter.js";
+import { t as PanelTitle_default } from "../../../PanelTitle.js";
+export { PanelTitle_default as default };

package/lib/components/Panel/index.js

@@ -0,0 +1,36 @@
+import "../../uuid.js";
+import "../../environment.js";
+import "../../constants2.js";
+import "../../usePseudoClasses.js";
+import "../../grid.js";
+import "../../palette.js";
+import "../../spacers.js";
+import "../../theme.js";
+import "../../color.js";
+import "../../Icon.js";
+import "../../language.js";
+import "../../_rolldown_dynamic_import_helper.js";
+import "../../useIsServerSide.js";
+import "../../LazyIcon.js";
+import "../../component.js";
+import "../../useIcons.js";
+import "../../useBreakpoint.js";
+import "../../useIsMobileBreakpoint.js";
+import "../../ArrowRight.js";
+import "../../Button.js";
+import "../../Spacer.js";
+import "../../usePrevious.js";
+import "../../Title.js";
+import "../../Title2.js";
+import "../../ChevronDown.js";
+import "../../ChevronUp.js";
+import "../../Duolist.js";
+import "../../Highlighter.js";
+import "../../useExpand.js";
+import "../../ChevronRight.js";
+import "../../PanelTitle.js";
+import { a as PanelLayout, c as PanelVariant, i as ExpandedContent, l as Panel_default$1, n as B, o as PanelStacking, r as C, s as PanelStatus, t as A, u as PreContainer } from "../../Panel.js";
+var Panel_default = Panel_default$1;
+export { A, B, C, ExpandedContent, PanelLayout, PanelStacking, PanelStatus, PanelVariant, PreContainer, Panel_default as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Panel/index.ts"],"sourcesContent":["import Panel from './Panel';\nexport * from './Panel';\nexport default Panel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAA,gBAAe"}

package/lib/components/PanelList/index.js

@@ -0,0 +1,55 @@
+import "../../uuid.js";
+import "../../environment.js";
+import { n as AnalyticsId } from "../../constants2.js";
+import "../../usePseudoClasses.js";
+import "../../grid.js";
+import "../../palette.js";
+import "../../spacers.js";
+import "../../theme.js";
+import "../../color.js";
+import "../../Icon.js";
+import "../../language.js";
+import "../../_rolldown_dynamic_import_helper.js";
+import "../../useIsServerSide.js";
+import "../../LazyIcon.js";
+import "../../component.js";
+import "../../useIcons.js";
+import "../../useBreakpoint.js";
+import "../../useIsMobileBreakpoint.js";
+import "../../ArrowRight.js";
+import "../../Button.js";
+import "../../Spacer.js";
+import "../../usePrevious.js";
+import "../../Title.js";
+import "../../Title2.js";
+import "../../ChevronDown.js";
+import "../../ChevronUp.js";
+import "../../Duolist.js";
+import "../../Highlighter.js";
+import "../../useExpand.js";
+import "../../ChevronRight.js";
+import "../../PanelTitle.js";
+import { c as PanelVariant, l as Panel_default } from "../../Panel.js";
+import React from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import styles from "./styles.module.scss";
+var isPanelComponent = (element) => React.isValidElement(element) && element.type === Panel_default;
+var PanelList_default = React.forwardRef(function BadgeForwardedRef(props, ref) {
+	const { testId, children, variant = PanelVariant.fill, highlightText } = props;
+	const renderPanel = (panel) => React.cloneElement(panel, {
+		variant,
+		className: classNames(panel.props.className, styles[`panel-list__panel--${variant}`]),
+		highlightText: panel.props.highlightText || highlightText
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.PanelList,
+		className: classNames({ [styles["panel-list--outline"]]: variant === PanelVariant.outline }),
+		children: React.Children.map(children, (child) => isPanelComponent(child) ? renderPanel(child) : child)
+	});
+});
+export { PanelList_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/components/PanelList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PanelList/PanelList.tsx","../../../src/components/PanelList/index.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  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\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, highlightText } = 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      highlightText: panel.props.highlightText || highlightText,\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","import PanelList from './PanelList';\nexport * from './PanelList';\nexport default PanelList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAM,oBAAoB,YACxB,MAAM,eAA2B,QAAQ,IAAK,QAA+B,SAAS;ACpBxF,IAAA,oBDsBkB,MAAM,WAAW,SAAS,kBAAkB,OAAuB,KAAyC;CAC5H,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,MAAM,kBAAkB;CAEzE,MAAM,eAAe,UACnB,MAAM,aAAa,OAAO;EACf;EACT,WAAW,WAAW,MAAM,MAAM,WAAW,OAAO,sBAAsB,WAAW;EACrF,eAAe,MAAM,MAAM,iBAAiB;EAC7C,CAAC;AAEJ,QACE,oBAAC,OAAA;EACM;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW,WAAW,GAAG,OAAO,yBAAyB,YAAY,aAAa,SAAS,CAAC;YAE3F,MAAM,SAAS,IAAI,WAAU,UAAU,iBAAiB,MAAM,GAAG,YAAY,MAAM,GAAG,MAAO;GAC1F;EAER"}

package/lib/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/lib/components/PanelListOld/index.d.ts

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

package/lib/components/PanelListOld/index.js

@@ -0,0 +1,58 @@
+import "../../environment.js";
+import { n as AnalyticsId } from "../../constants2.js";
+import "../../usePseudoClasses.js";
+import "../../grid.js";
+import "../../palette.js";
+import "../../spacers.js";
+import "../../theme.js";
+import "../../color.js";
+import "../../Icon.js";
+import "../../CheckFill.js";
+import "../../ErrorSignFill.js";
+import "../../InfoSignFill.js";
+import "../../TriangleX.js";
+import "../../NotificationBadge.js";
+import "../../Badge.js";
+import "../../_rolldown_dynamic_import_helper.js";
+import "../../useIsServerSide.js";
+import "../../LazyIcon.js";
+import "../../component.js";
+import "../../useIcons.js";
+import "../../useBreakpoint.js";
+import "../../useIsMobileBreakpoint.js";
+import "../../ArrowRight.js";
+import "../../Button.js";
+import "../../accessibility.js";
+import "../../usePrevious.js";
+import "../../Title.js";
+import "../../Title2.js";
+import "../../ChevronDown.js";
+import "../../ChevronUp.js";
+import "../../useExpand.js";
+import "../../AlertSignFill.js";
+import "../../Calendar.js";
+import "../../Pencil.js";
+import "../../Watch.js";
+import { i as PanelOldVariant, t as PanelOld_default } from "../../PanelOld.js";
+import React from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import styles from "./styles.module.scss";
+var isPanelComponent = (element) => React.isValidElement(element) && element.type === PanelOld_default;
+var PanelListOld_default = React.forwardRef(function BadgeForwardedRef(props, ref) {
+	const { testId, children, variant = PanelOldVariant.fill } = props;
+	const renderPanel = (panel, firstChild) => React.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.Children.map(children, (child, index) => isPanelComponent(child) ? renderPanel(child, index === 0) : child)
+	});
+});
+export { PanelListOld_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/components/PanelListOld/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PanelListOld/PanelListOld.tsx","../../../src/components/PanelListOld/index.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: unknown | 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): React.ReactElement =>\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","import PanelListOld from './PanelListOld';\nexport * from './PanelListOld';\nexport default PanelListOld;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAM,oBAAoB,YACxB,MAAM,eAA8B,QAAQ,IAAK,QAA+B,SAAS;ACjB3F,IAAA,uBDmBqB,MAAM,WAAW,SAAS,kBAAkB,OAA0B,KAAyC;CAClI,MAAM,EAAE,QAAQ,UAAU,UAAU,gBAAgB,SAAS;CAE7D,MAAM,eAAe,OAA0C,eAC7D,MAAM,aAAa,OAAO;EACf;EACT,aAAa,YAAY,gBAAgB,QAAQ,CAAC;EAClD,WAAW,WAAW,MAAM,MAAM,WAAW,YAAY,gBAAgB,QAAQ,OAAO,qBAAqB;EAC9G,CAAC;AAEJ,QACE,oBAAC,OAAA;EAAS;EAAK,eAAa;EAAQ,oBAAkB,YAAY;YAC/D,MAAM,SAAS,IAAI,WAAW,OAAO,UAAW,iBAAiB,MAAM,GAAG,YAAY,OAAO,UAAU,EAAE,GAAG,MAAO;GAChH;EAER"}

package/lib/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/lib/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;