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

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

@@ -1,18 +0,0 @@
-export type Styles = {
-  drawer: string;
-  drawer__container: string;
-  drawer__container__inner: string;
-  'drawer__container--right': string;
-  drawer__content: string;
-  drawer__footer: string;
-  drawer__header: string;
-  'drawer__header__close-button': string;
-  'drawer__header--no-close-button': string;
-  drawer__overlay: string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;

package/components/Dropdown/Dropdown.d.ts

@@ -1,42 +0,0 @@
-import { default as React } from 'react';
-import { HNDesignsystemDropdown } from '../../resources/Resources';
-export declare enum DropdownOnColor {
-    onwhite = "onwhite",
-    ongrey = "ongrey",
-    onblueberry = "onblueberry",
-    oncherry = "oncherry"
-}
-export interface DropdownProps {
-    /** Label for dropdown. Visible for screen readers  */
-    label: string;
-    /** Text on the trigger button that opens the dropdown */
-    placeholder: string;
-    /** Sets the dropdown content */
-    children: React.ReactNode;
-    /** @deprecated Close button text */
-    closeText?: string;
-    /** Minimum width for the dropdown in pixels. Does not affect trigger button */
-    dropdownMinWidth?: number;
-    /** No close button */
-    noCloseButton?: boolean;
-    /** Called when dropdown is open/closed */
-    onToggle?: (isOpen: boolean) => void;
-    /** Whether the dropdown is open or not */
-    open?: boolean;
-    /** Changes the visuals of the dropdown */
-    onColor?: keyof typeof DropdownOnColor;
-    /** Makes the background of the trigger transparent */
-    transparent?: boolean;
-    /** Makes the width of the full component adjust to its parent */
-    fluid?: boolean;
-    /** Makes the dropdown disabled */
-    disabled?: boolean;
-    /** Sets the data-testid attribute on the dropdown button */
-    testId?: string;
-    /** Overrides the default z-index of the DropDownContent */
-    zIndex?: number;
-    /** Resources for component */
-    resources?: Partial<HNDesignsystemDropdown>;
-}
-declare const Dropdown: React.FC<DropdownProps>;
-export default Dropdown;

package/components/Dropdown/index.js

@@ -1,201 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React__default, { useRef, useId, useEffect } from "react";
-import classNames from "classnames";
-import { theme } from "../../theme/index.js";
-import "../../hooks/useBreakpoint.js";
-import { useToggle } from "../../hooks/useToggle.js";
-import { useKeyboardEvent } from "../../hooks/useKeyboardEvent.js";
-import { useOutsideEvent } from "../../hooks/useOutsideEvent.js";
-import { LanguageLocales, ZIndex, KeyboardEventKey, AnalyticsId, IconSize } from "../../constants.js";
-import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
-import { useLanguage } from "../../utils/language.js";
-import { mergeRefs } from "../../utils/refs.js";
-import { B as Button } from "../../Button.js";
-import { I as Icon } from "../../Icon.js";
-import PlusSmall from "../Icons/PlusSmall.js";
-import styles from "./styles.module.scss";
-const closeText$1 = "Close";
-const enGB = {
-  closeText: closeText$1
-};
-const closeText = "Lukk";
-const nbNO = {
-  closeText
-};
-const getResources = (language) => {
-  switch (language) {
-    case LanguageLocales.ENGLISH:
-      return enGB;
-    case LanguageLocales.NORWEGIAN:
-    default:
-      return nbNO;
-  }
-};
-var DropdownOnColor = /* @__PURE__ */ ((DropdownOnColor2) => {
-  DropdownOnColor2["onwhite"] = "onwhite";
-  DropdownOnColor2["ongrey"] = "ongrey";
-  DropdownOnColor2["onblueberry"] = "onblueberry";
-  DropdownOnColor2["oncherry"] = "oncherry";
-  return DropdownOnColor2;
-})(DropdownOnColor || {});
-const Dropdown = (props) => {
-  const {
-    label,
-    placeholder,
-    noCloseButton = false,
-    onToggle,
-    dropdownMinWidth,
-    open = false,
-    children,
-    onColor = "onwhite",
-    transparent = false,
-    fluid = false,
-    testId,
-    disabled,
-    zIndex = ZIndex.PopOver,
-    resources
-  } = props;
-  const dropdownRef = useRef(null);
-  const optionsRef = useRef(null);
-  const { refObject: buttonRef, isHovered } = usePseudoClasses();
-  const openedByKeyboard = useRef(false);
-  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);
-  const inputRefList = useRef(React__default.Children.map(children, () => React__default.createRef()));
-  const labelId = useId();
-  const toggleLabelId = useId();
-  const optionIdPrefix = useId();
-  const contentId = useId();
-  const { language } = useLanguage(LanguageLocales.NORWEGIAN);
-  const defaultResources = getResources(language);
-  const mergedResources = {
-    ...defaultResources,
-    ...resources,
-    closeText: props.closeText ?? (resources == null ? void 0 : resources.closeText) ?? defaultResources.closeText
-  };
-  const handleOpen = (isKeyboard) => {
-    openedByKeyboard.current = isKeyboard;
-    toggleIsOpen();
-  };
-  const handleClose = () => {
-    var _a;
-    toggleIsOpen();
-    (_a = buttonRef.current) == null ? void 0 : _a.focus();
-  };
-  useEffect(() => {
-    var _a, _b;
-    if (isOpen && openedByKeyboard.current) {
-      const firstEnabled = (_a = inputRefList.current) == null ? void 0 : _a.find((r) => r.current && !r.current.hasAttribute("disabled"));
-      (_b = firstEnabled == null ? void 0 : firstEnabled.current) == null ? void 0 : _b.focus();
-      openedByKeyboard.current = false;
-    }
-  }, [isOpen]);
-  const handleKeyboardNavigation = (event) => {
-    var _a;
-    if (!inputRefList.current) {
-      return;
-    }
-    if (event.key === KeyboardEventKey.Escape) {
-      if (isOpen) handleClose();
-      return;
-    }
-    if (!isOpen) {
-      handleOpen(true);
-      event.preventDefault();
-      return;
-    }
-    const index = inputRefList.current.findIndex((x) => x.current === event.target);
-    let nextIndex = index;
-    if (event.key === KeyboardEventKey.Home) {
-      nextIndex = 0;
-    } else if (event.key === KeyboardEventKey.End) {
-      nextIndex = inputRefList.current.length - 1;
-    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {
-      nextIndex = index + 1;
-    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {
-      nextIndex = index - 1;
-    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {
-      nextIndex = index;
-    }
-    if (nextIndex !== -1 && event.key !== KeyboardEventKey.Space) {
-      event.preventDefault();
-      (_a = inputRefList.current[nextIndex].current) == null ? void 0 : _a.focus();
-    }
-  };
-  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [
-    KeyboardEventKey.ArrowDown,
-    KeyboardEventKey.ArrowUp,
-    KeyboardEventKey.End,
-    KeyboardEventKey.Enter,
-    KeyboardEventKey.Escape,
-    KeyboardEventKey.Home,
-    KeyboardEventKey.Space
-  ]);
-  useOutsideEvent(dropdownRef, () => isOpen && handleClose());
-  const toggleClasses = classNames(
-    styles.dropdown__toggle,
-    !disabled && {
-      [styles["dropdown__toggle--on-white"]]: onColor === "onwhite",
-      [styles["dropdown__toggle--on-grey"]]: onColor === "ongrey",
-      [styles["dropdown__toggle--on-blueberry"]]: onColor === "onblueberry",
-      [styles["dropdown__toggle--on-cherry"]]: onColor === "oncherry",
-      [styles["dropdown__toggle--transparent"]]: transparent,
-      [styles["dropdown__toggle--fluid"]]: fluid,
-      [styles["dropdown__toggle--open"]]: isOpen
-    }
-  );
-  const contentClasses = classNames(styles.dropdown__content, isOpen && styles["dropdown__content--open"]);
-  const renderChildren = React__default.Children.map(children, (child, index) => {
-    return /* @__PURE__ */ jsx("li", { className: styles.dropdown__input, id: `${optionIdPrefix}-${index}`, children: React__default.isValidElement(child) && inputRefList.current && inputRefList.current[index] ? React__default.cloneElement(child, {
-      ref: mergeRefs([child.props.ref, inputRefList.current[index]])
-    }) : child });
-  });
-  return /* @__PURE__ */ jsxs("div", { className: styles.dropdown, ref: dropdownRef, children: [
-    /* @__PURE__ */ jsx("span", { id: labelId, className: styles.dropdown__label, children: label }),
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => handleOpen(false),
-        className: toggleClasses,
-        ref: buttonRef,
-        "data-testid": testId,
-        "data-analyticsid": AnalyticsId.Dropdown,
-        disabled,
-        "aria-labelledby": toggleLabelId,
-        "aria-haspopup": true,
-        "aria-controls": contentId,
-        "aria-expanded": isOpen,
-        children: [
-          /* @__PURE__ */ jsx("span", { id: toggleLabelId, className: styles.dropdown__toggle__label, children: placeholder }),
-          /* @__PURE__ */ jsx(
-            Icon,
-            {
-              color: disabled ? theme.palette.neutral700 : theme.palette.blueberry600,
-              svgIcon: PlusSmall,
-              className: styles.dropdown__icon,
-              isHovered: !disabled && isHovered,
-              size: IconSize.XSmall
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        id: contentId,
-        className: contentClasses,
-        style: { width: fluid ? "100%" : `auto`, minWidth: dropdownMinWidth ?? "auto", zIndex },
-        children: [
-          /* @__PURE__ */ jsx("ul", { className: styles.dropdown__options, role: "group", "aria-labelledby": labelId, tabIndex: -1, ref: optionsRef, children: renderChildren }),
-          !noCloseButton && /* @__PURE__ */ jsx("div", { className: styles.dropdown__close, children: /* @__PURE__ */ jsx(Button, { onClick: handleClose, children: mergedResources.closeText }) })
-        ]
-      }
-    )
-  ] });
-};
-export {
-  DropdownOnColor,
-  Dropdown as default
-};
-//# sourceMappingURL=index.js.map

package/components/Dropdown/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/resourceHelper.ts","../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  LanguageLocales,\n  ZIndex,\n  theme,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n} from '../..';\nimport { getResources } from './resourceHelper';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Visible for screen readers  */\n  label: string;\n  /** Text on the trigger button that opens the dropdown */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** @deprecated Close button text */\n  closeText?: string;\n  /** Minimum width for the dropdown in pixels. Does not affect trigger button */\n  dropdownMinWidth?: number;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  onColor?: keyof typeof DropdownOnColor;\n  /** Makes the background of the trigger transparent */\n  transparent?: boolean;\n  /** Makes the width of the full component adjust to its parent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDropdown>;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    noCloseButton = false,\n    onToggle,\n    dropdownMinWidth,\n    open = false,\n    children,\n    onColor = DropdownOnColor.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n    resources,\n  } = props;\n\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { refObject: buttonRef, isHovered } = usePseudoClasses<HTMLButtonElement>();\n  const openedByKeyboard = useRef<boolean>(false);\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const labelId = useId();\n  const toggleLabelId = useId();\n  const optionIdPrefix = useId();\n  const contentId = useId();\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDropdown = {\n    ...defaultResources,\n    ...resources,\n    closeText: props.closeText ?? resources?.closeText ?? defaultResources.closeText,\n  };\n\n  const handleOpen = (isKeyboard: boolean): void => {\n    openedByKeyboard.current = isKeyboard;\n    toggleIsOpen();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  useEffect(() => {\n    if (isOpen && openedByKeyboard.current) {\n      const firstEnabled = inputRefList.current?.find(r => r.current && !r.current.hasAttribute('disabled'));\n      firstEnabled?.current?.focus();\n      openedByKeyboard.current = false;\n    }\n  }, [isOpen]);\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (event.key === KeyboardEventKey.Escape) {\n      if (isOpen) handleClose();\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen(true);\n      event.preventDefault();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n\n    if (nextIndex !== -1 && event.key !== KeyboardEventKey.Space) {\n      event.preventDefault();\n\n      inputRefList.current[nextIndex].current?.focus();\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n    KeyboardEventKey.Space,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: onColor === DropdownOnColor.onwhite,\n      [styles['dropdown__toggle--on-grey']]: onColor === DropdownOnColor.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: onColor === DropdownOnColor.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: onColor === DropdownOnColor.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  const renderChildren = React.Children.map(children, (child, index) => {\n    return (\n      <li className={styles.dropdown__input} id={`${optionIdPrefix}-${index}`}>\n        {React.isValidElement(child) && inputRefList.current && inputRefList.current[index]\n          ? React.cloneElement(child as React.ReactElement, {\n              ref: mergeRefs([child.props.ref, inputRefList.current[index]]),\n            })\n          : child}\n      </li>\n    );\n  });\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={(): false | void => handleOpen(false)}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup={true}\n        aria-controls={contentId}\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div\n        id={contentId}\n        className={contentClasses}\n        style={{ width: fluid ? '100%' : `auto`, minWidth: dropdownMinWidth ?? 'auto', zIndex: zIndex }}\n      >\n        <ul className={styles.dropdown__options} role=\"group\" aria-labelledby={labelId} tabIndex={-1} ref={optionsRef}>\n          {renderChildren}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose}>{mergedResources.closeText}</Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownOnColor","React"],"mappings":"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"}

package/components/Duolist/index.js

@@ -1,8 +0,0 @@
-import { D as Duolist } from "../../Duolist.js";
-import { a } from "../../Duolist.js";
-export {
-  Duolist,
-  a as DuolistGroup,
-  Duolist as default
-};
-//# sourceMappingURL=index.js.map

package/components/Duolist/index.js.map

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

package/components/ElementHeader/ElementHeaderText/index.js

@@ -1,6 +0,0 @@
-import { E as ElementHeaderText } from "../../../ElementHeaderText.js";
-export {
-  ElementHeaderText,
-  ElementHeaderText as default
-};
-//# sourceMappingURL=index.js.map

package/components/ElementHeader/ElementHeaderText/index.js.map

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

package/components/ElementHeader/StatusDotList/index.js

@@ -1,6 +0,0 @@
-import { S as StatusDotList } from "../../../StatusDotList.js";
-export {
-  StatusDotList,
-  StatusDotList as default
-};
-//# sourceMappingURL=index.js.map

package/components/ElementHeader/StatusDotList/index.js.map

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

package/components/ElementHeader/index.js

@@ -1,9 +0,0 @@
-import { E as ElementHeader } from "../../ElementHeader.js";
-import { a, m, r } from "../../ElementHeader.js";
-export {
-  a as ElementHeaderRoot,
-  ElementHeader as default,
-  m as mapChildren,
-  r as renderElementHeader
-};
-//# sourceMappingURL=index.js.map

package/components/ElementHeader/index.js.map

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

package/components/ElementHeader/styles.module.scss

@@ -1,151 +0,0 @@
-@use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as breakpoints;
-
-@mixin gridtemplate($second-row-height) {
-  grid-template:
-    '. statusdots badge chevron' auto
-    'icon text badge chevron' $second-row-height '. text badge chevron' auto /
-    min-content auto min-content min-content;
-}
-
-@mixin parent-type-expanderlist {
-  display: flex;
-  align-items: center;
-  align-self: start;
-  height: 48px;
-}
-
-.element-header {
-  padding: 0.5rem spacers.getSpacer(2xs) 0.5rem 0;
-  display: grid;
-  width: 100%;
-  height: 100%;
-  text-align: left;
-
-  @include gridtemplate(3rem);
-
-  &__title {
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    padding: 0;
-    margin: 0;
-  }
-
-  &__content {
-    width: 100%;
-    height: 100%;
-    grid-area: text;
-    align-self: center;
-    padding: 0.5rem 0 0.5rem 0.5rem;
-
-    &[data-hasstatusdots='true'] {
-      padding-top: 0.25rem;
-      padding-bottom: 0;
-
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        padding-top: 0.125rem;
-      }
-    }
-
-    &--element {
-      display: flex;
-      align-items: flex-start;
-      flex-direction: column;
-    }
-
-    &--spacing {
-      margin-left: spacers.getSpacer(2xs);
-    }
-
-    :focus > &,
-    :focus-visible > & {
-      border-color: palette.$black;
-    }
-  }
-
-  &__statusdot-container {
-    grid-area: statusdots;
-    padding-left: 0.5rem;
-  }
-
-  &__icon,
-  &__icon svg,
-  &__avatar,
-  &__badge-container,
-  &__chevron,
-  &__chevron svg {
-    align-self: center;
-  }
-
-  &__icon,
-  &__avatar {
-    grid-area: icon;
-
-    &--with-statusdot {
-      margin-top: -1rem;
-    }
-  }
-
-  &__icon {
-    height: 100%;
-  }
-
-  &__chevron {
-    grid-area: chevron;
-
-    &[data-parenttype='linklist'] {
-      align-self: center;
-      height: 100%;
-    }
-
-    &[data-parenttype='expanderlist'] {
-      @include parent-type-expanderlist;
-    }
-  }
-
-  &__chevron svg,
-  &__icon svg {
-    height: 100%;
-  }
-
-  &__badge-container {
-    grid-area: badge;
-    display: flex;
-    flex-flow: row;
-    height: 100%;
-    gap: 0.5rem;
-  }
-
-  &__badge {
-    &[data-parenttype='linklist'] {
-      align-self: center;
-    }
-
-    &[data-parenttype='expanderlist'] {
-      @include parent-type-expanderlist;
-    }
-  }
-
-  &__badge:has(svg),
-  &__badge svg {
-    height: 100%;
-  }
-}
-
-.text-wrapper {
-  display: flex;
-  align-items: flex-start;
-  font-size: 20px;
-  font-weight: 400;
-
-  &--sub-level {
-    font-size: 18px;
-  }
-
-  &__text--emphasised {
-    font-weight: 600;
-  }
-}