@rikstv/shared-components 2.0.21 → 3.0.1

package/dist/components/button/{ArrowButton-4fa3c028.mjs → ArrowButton-470c0575.mjs}

@@ -1,42 +1,42 @@
 import { j as s } from "../accordion/Accordion-5e72e67b.mjs";
 import { forwardRef as n } from "react";
-import { P as u, S as w, T as d } from "./DecoratedButton-373af81a.mjs";
+import { P as u, S as w, T as d } from "./DecoratedButton-ab2e8ed4.mjs";
 import { A as c } from "../icons/Arrow-48abbbdf.mjs";
 const e = () => /* @__PURE__ */ s.jsx(c, {}), m = n(
-  ({ forwards: r = !0, className: t = "", ...o }, a) => /* @__PURE__ */ s.jsx(
+  ({ forwards: r = !0, className: o = "", ...t }, a) => /* @__PURE__ */ s.jsx(
     u,
     {
-      className: `${t} ${r ? "rds-arrow-button--forwards" : "rds-arrow-button--backwards"}`,
+      className: `${o} ${r ? "rds-arrow-button--forwards" : "rds-arrow-button--backwards"}`,
       arrow: e,
-      buttonStyle: "rds-arrow-button",
+      buttonType: "rds-arrow-button",
       ref: a,
-      ...o
+      ...t
     }
   )
 );
 m.displayName = "PrimaryArrowButton";
 const b = n(
-  ({ forwards: r = !0, className: t = "", ...o }, a) => /* @__PURE__ */ s.jsx(
+  ({ forwards: r = !0, className: o = "", ...t }, a) => /* @__PURE__ */ s.jsx(
     w,
     {
-      className: `${t} ${r ? "rds-arrow-button--forwards" : "rds-arrow-button--backwards"}`,
+      className: `${o} ${r ? "rds-arrow-button--forwards" : "rds-arrow-button--backwards"}`,
       arrow: e,
-      buttonStyle: "rds-arrow-button",
+      buttonType: "rds-arrow-button",
       ref: a,
-      ...o
+      ...t
     }
   )
 );
 b.displayName = "SecondaryArrowButton";
 const y = n(
-  ({ forwards: r = !0, className: t = "", ...o }, a) => /* @__PURE__ */ s.jsx(
+  ({ forwards: r = !0, className: o = "", ...t }, a) => /* @__PURE__ */ s.jsx(
     d,
     {
-      className: `${t} ${r ? "rds-arrow-button--forwards" : "rds-arrow-button--backwards"}`,
+      className: `${o} ${r ? "rds-arrow-button--forwards" : "rds-arrow-button--backwards"}`,
       arrow: e,
-      buttonStyle: "rds-arrow-button",
+      buttonType: "rds-arrow-button",
       ref: a,
-      ...o
+      ...t
     }
   )
 );

package/dist/components/button/{BaseButton-4350803a.mjs → BaseButton-82123b7e.mjs}

@@ -3,15 +3,15 @@ import { forwardRef as c } from "react";
 const f = c(
   ({
     children: d,
-    buttonType: r,
-    buttonStyle: n,
+    buttonType: n,
+    buttonStyle: r,
     type: o = "button",
     isLoading: t = !1,
     lightBackground: a = !1,
     transparent: i = !1,
-    disabled: l,
-    className: u = "",
-    "aria-busy": b,
+    disabled: u,
+    className: b = "",
+    "aria-busy": l,
     icon: e,
     iconClass: m = "",
     ...$
@@ -21,8 +21,8 @@ const f = c(
       type: o,
       ...$,
       ref: _,
-      disabled: t || l,
-      "aria-busy": t || b,
+      disabled: t || u,
+      "aria-busy": t || l,
       className: `
         ${n}
         rds-button__shared
@@ -32,7 +32,7 @@ const f = c(
         ${a ? "rds-light" : ""}
         ${a === "white" ? "rds-white" : ""}
         ${i ? "rds-transparent" : ""}
-        ${u}`,
+        ${b}`,
       children: /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
         e && /* @__PURE__ */ s.jsx("span", { "data-testid": "rds-button__icon", className: `rds-button__icon ${m}`, children: /* @__PURE__ */ s.jsx(e, {}) }),
         d

package/dist/components/button/BaseButton.d.ts

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes } from "react";
-export type ButtonVariants = "primary" | "secondary" | "tertiary";
+export type ButtonStyles = "primary" | "secondary" | "tertiary";
 export type ButtonBackgroundStyles = boolean | "white";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     isLoading?: boolean;
@@ -12,7 +12,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     iconClass?: string;
 }
 export interface BaseButtonProps extends ButtonProps {
-    buttonType: ButtonVariants;
-    buttonStyle: "rds-button" | "rds-arrow-button" | "rds-icon-button";
+    buttonStyle: ButtonStyles;
+    buttonType: "rds-button" | "rds-arrow-button" | "rds-icon-button";
 }
 export declare const BaseButton: import("react").ForwardRefExoticComponent<BaseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/button/{BaseDecoratedButton-510bde9f.mjs → BaseDecoratedButton-9280b7ce.mjs}

@@ -1,8 +1,8 @@
 import { j as s } from "../accordion/Accordion-5e72e67b.mjs";
 import { forwardRef as c } from "react";
-import { B as m } from "./BaseButton-4350803a.mjs";
+import { B as m } from "./BaseButton-82123b7e.mjs";
 const x = c(
-  ({ children: n, buttonStyle: t, postfix: r, icon: a, arrow: o, iconClass: e = "", ...d }, i) => /* @__PURE__ */ s.jsx(m, { buttonStyle: t, ref: i, ...d, children: /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+  ({ children: n, buttonType: t, postfix: r, icon: a, arrow: o, iconClass: e = "", ...d }, i) => /* @__PURE__ */ s.jsx(m, { buttonType: t, ref: i, ...d, children: /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
     a && /* @__PURE__ */ s.jsx("span", { "data-testid": "rds-button__icon", className: `rds-button__icon ${e}`, children: /* @__PURE__ */ s.jsx(a, {}) }),
     o && /* @__PURE__ */ s.jsx("span", { "data-testid": "rds-button__arrow", className: `rds-button__arrow ${e}`, children: /* @__PURE__ */ s.jsx(o, {}) }),
     n,

package/dist/components/button/BaseLinkButton-e79602f8.mjs

@@ -0,0 +1,41 @@
+import { j as r } from "../accordion/Accordion-5e72e67b.mjs";
+import { forwardRef as h } from "react";
+import "./ArrowButton-470c0575.mjs";
+import { A as l } from "../icons/Arrow-48abbbdf.mjs";
+const u = () => /* @__PURE__ */ r.jsx(l, {}), p = h(
+  ({
+    element: o,
+    buttonStyle: s = "primary",
+    className: n = "",
+    withArrow: t,
+    arrowBackward: d,
+    iconClass: e = "",
+    children: i,
+    lightBackground: a,
+    transparent: m,
+    ...b
+  }, c) => /* @__PURE__ */ r.jsx("div", { className: `rds-baselink-button ${n}`, children: /* @__PURE__ */ r.jsx(
+    o,
+    {
+      className: `
+        rds-button rds-button__shared 
+        ${s === "highlighted" ? "rds-baselink-button--highlighted" : `rds-button__shared--${s}`}
+        ${a ? "rds-light" : ""} 
+        ${a === "white" ? "rds-white" : ""} 
+        ${m && s === "secondary" ? "rds-transparent" : ""}
+        ${t ? "rds-arrow-button" : ""}
+        ${t === void 0 ? "" : d ? "rds-arrow-button--backwards" : "rds-arrow-button--forwards"}
+      `,
+      ref: c,
+      ...b,
+      children: /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+        t && /* @__PURE__ */ r.jsx("span", { "data-testid": "rds-button__arrow", className: `rds-button__arrow ${e}`, children: /* @__PURE__ */ r.jsx(u, {}) }),
+        i
+      ] })
+    }
+  ) })
+);
+p.displayName = "BaseLinkButton";
+export {
+  p as B
+};

package/dist/components/button/BaseLinkButton.d.ts

@@ -1,17 +1,31 @@
 /// <reference types="react" />
-import { ButtonBackgroundStyles } from "./BaseButton";
-export type LinkButtonVariants = "primary" | "secondary" | "tertiary" | "highlighted";
+import { ButtonBackgroundStyles, ButtonStyles } from "./BaseButton";
+export type LinkButtonStyles = ButtonStyles | "highlighted";
 interface BaseLinkButtonPropsWithElement<ElementProps> {
     element: (props: ElementProps) => JSX.Element;
-    variant?: LinkButtonVariants;
+    buttonStyle?: LinkButtonStyles;
     lightBackground?: ButtonBackgroundStyles;
     transparent?: boolean;
     className?: string;
     withArrow?: boolean;
-    arrowForward?: boolean;
+    arrowBackward?: boolean;
     iconClass?: string;
 }
 type Props<ElementProps> = BaseLinkButtonPropsWithElement<ElementProps> & ElementProps;
 export type BaseLinkButtonProps<ElementProps> = Omit<Props<ElementProps>, "element">;
+/**
+ * We don't know the type of the element being passed (react router link, wouter link, etc),
+ * so we let it through. You should create a wrapper component in your
+ * client app to add correct types back.
+ *
+ * @example
+ * // LinkProps imported from react-router-dom
+ * type LinkBtnProps = BaseLinkButtonProps<LinkProps>;
+ *
+ * const LinkBtn = ((props: LinkBtnProps) => (
+ *  <BaseLinkButton element={Link} {...props} />
+ * ))
+ * const TestApp = () => <LinkBtn to="#">React Router Link</LinkBtn>
+ */
 export declare const BaseLinkButton: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
 export {};

package/dist/components/button/Button-ec434dd2.mjs

@@ -0,0 +1,16 @@
+import { j as r } from "../accordion/Accordion-5e72e67b.mjs";
+import { forwardRef as n } from "react";
+import { B as a } from "./BaseButton-82123b7e.mjs";
+import "./ArrowButton-470c0575.mjs";
+import "./BaseLinkButton-e79602f8.mjs";
+const s = n((t, o) => /* @__PURE__ */ r.jsx(a, { buttonType: "rds-button", buttonStyle: "primary", ref: o, ...t }));
+s.displayName = "PrimaryButton";
+const e = n((t, o) => /* @__PURE__ */ r.jsx(a, { buttonType: "rds-button", buttonStyle: "secondary", ref: o, ...t }));
+e.displayName = "SecondaryButton";
+const y = n((t, o) => /* @__PURE__ */ r.jsx(a, { buttonType: "rds-button", buttonStyle: "tertiary", ref: o, ...t }));
+y.displayName = "TertiaryButton";
+export {
+  s as P,
+  e as S,
+  y as T
+};

package/dist/components/button/Button.d.ts

@@ -3,5 +3,5 @@ import { ButtonProps } from "./BaseButton";
 export declare const PrimaryButton: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const SecondaryButton: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const TertiaryButton: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-export { LinkButton } from "./LinkButton";
 export { BaseLinkButton } from "./BaseLinkButton";
+export type { BaseLinkButtonProps } from "./BaseLinkButton";

package/dist/components/button/{DecoratedButton-373af81a.mjs → DecoratedButton-ab2e8ed4.mjs}

@@ -1,17 +1,17 @@
 import { j as r } from "../accordion/Accordion-5e72e67b.mjs";
 import { forwardRef as e } from "react";
-import { B as a } from "./BaseDecoratedButton-510bde9f.mjs";
-import "./ArrowButton-4fa3c028.mjs";
+import { B as a } from "./BaseDecoratedButton-9280b7ce.mjs";
+import "./ArrowButton-470c0575.mjs";
 const s = e(
-  (t, o) => /* @__PURE__ */ r.jsx(a, { buttonType: "primary", ref: o, ...t })
+  (t, o) => /* @__PURE__ */ r.jsx(a, { buttonStyle: "primary", ref: o, ...t })
 );
 s.displayName = "PrimaryDecoratedButton";
 const n = e(
-  (t, o) => /* @__PURE__ */ r.jsx(a, { buttonType: "secondary", ref: o, ...t })
+  (t, o) => /* @__PURE__ */ r.jsx(a, { buttonStyle: "secondary", ref: o, ...t })
 );
 n.displayName = "SecondaryDecoratedButton";
 const y = e(
-  (t, o) => /* @__PURE__ */ r.jsx(a, { buttonType: "tertiary", ref: o, ...t })
+  (t, o) => /* @__PURE__ */ r.jsx(a, { buttonStyle: "tertiary", ref: o, ...t })
 );
 y.displayName = "TertiaryDecoratedButton";
 export {

package/dist/components/button/DecoratedButton.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { BaseDecoratedButtonProps } from "./BaseDecoratedButton";
-export declare const PrimaryDecoratedButton: import("react").ForwardRefExoticComponent<Omit<BaseDecoratedButtonProps, "buttonType"> & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const SecondaryDecoratedButton: import("react").ForwardRefExoticComponent<Omit<BaseDecoratedButtonProps, "buttonType"> & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const TertiaryDecoratedButton: import("react").ForwardRefExoticComponent<Omit<BaseDecoratedButtonProps, "buttonType"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PrimaryDecoratedButton: import("react").ForwardRefExoticComponent<Omit<BaseDecoratedButtonProps, "buttonStyle"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SecondaryDecoratedButton: import("react").ForwardRefExoticComponent<Omit<BaseDecoratedButtonProps, "buttonStyle"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TertiaryDecoratedButton: import("react").ForwardRefExoticComponent<Omit<BaseDecoratedButtonProps, "buttonStyle"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/button/IconButton-537e3543.mjs

@@ -0,0 +1,15 @@
+import { j as n } from "../accordion/Accordion-5e72e67b.mjs";
+import { forwardRef as r } from "react";
+import { P as a, S as s, T as e } from "./DecoratedButton-ab2e8ed4.mjs";
+import "./ArrowButton-470c0575.mjs";
+const c = r((t, o) => /* @__PURE__ */ n.jsx(a, { buttonType: "rds-icon-button", ref: o, ...t }));
+c.displayName = "PrimaryIconButton";
+const i = r((t, o) => /* @__PURE__ */ n.jsx(s, { buttonType: "rds-icon-button", ref: o, ...t }));
+i.displayName = "SecondaryIconButton";
+const u = r((t, o) => /* @__PURE__ */ n.jsx(e, { buttonType: "rds-icon-button", ref: o, ...t }));
+u.displayName = "TertiaryIconButton";
+export {
+  c as P,
+  i as S,
+  u as T
+};

package/dist/components/button/button-shared.scss

@@ -21,12 +21,6 @@
   --common-button--tertiary-pressed-color: var(--rds-foreground-primary);
   --common-button--tertiary-pressed-bg: var(--rds-background-secondary);
 
-  --common-button--highlighted-color: var(--rds-foreground-primary);
-  --common-button--highlighted-bg: transparent;
-  --common-button--highlighted-border-color: var(--rds-toggle-collapsed);
-  --common-button--highlighted-hover-border: var(--rds-heading-accent);
-  --common-button--highlighted-pressed-color: var(--rds-heading-accent);
-
   --common-button--disabled-color: var(--rds-foreground-tertiary);
   --common-button--disabled-bg: var(--rds-foreground-secondary);
 
@@ -113,27 +107,6 @@
     }
   }
 
-  &--highlighted {
-    color: var(--common-button--highlighted-color);
-    background-color: var(--common-button--highlighted-bg);
-    border-bottom: 2px solid var(--common-button--highlighted-border-color);
-    border-radius: 0;
-    transition: color 125ms, border-color 125ms, box-shadow 125ms;
-
-    @media (hover: hover) {
-      &:hover {
-        border-color: var(--common-button--highlighted-hover-border);
-        box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.5);
-      }
-    }
-
-    &:active {
-      color: var(--common-button--highlighted-pressed-color);
-      border-color: var(--common-button--highlighted-border-color-hover);
-      box-shadow: none;
-    }
-  }
-
   &:disabled {
     color: var(--common-button--disabled-color);
     background-color: var(--common-button--disabled-bg);
@@ -189,26 +162,6 @@
     }
   }
 
-  .rds-button__shared--highlighted,
-  &.rds-button__shared--highlighted {
-    --common-button--highlighted-color: var(--rds-surface-foreground);
-    --common-button--highlighted-border-color: var(--strim-romance-green-80); // Add variables in strm.scss and rtv.scss
-
-    @media (hover: hover) {
-      &:hover {
-        --common-button--highlighted-hover-border: var(--rds-surface-foreground);
-      }
-    }
-
-    &:active {
-      --common-button--highlighted-pressed-color: var(--rds-surface-foreground);
-    }
-
-    &:disabled {
-      --common-button--disabled-color: var(--rds-button-primary-fg);
-    }
-  }
-
   &.rds-white {
     &.rds-button__shared--secondary {
       --common-button--secondary-bg: var(--rds-foreground-primary);

package/dist/components/core/core.scss

@@ -20,7 +20,7 @@
   --rds-box-shadow--default: 0px 8px 16px rgba(0, 0, 0, 0.5);
 
   // Widths
-  --rds-readability-width: 60ch;
+  --rds-readability-width: 70ch;
   --rds-content-width--default: 1070px;
 
   // Gutters

package/dist/components/icons/Icons-4022b869.mjs

@@ -0,0 +1,8 @@
+import * as e from "react";
+import "../accordion/Accordion-5e72e67b.mjs";
+import "./HeartToggle-a5a93ca7.mjs";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { viewBox: "4 4 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-label": "Avmerking", ...t }, /* @__PURE__ */ e.createElement("path", { fill: "currentColor", d: "M13.4614 23.777C13.2314 23.777 13.0114 23.687 12.8514 23.517L7.24137 17.727C6.91137 17.387 6.92138 16.847 7.26138 16.527C7.60138 16.197 8.14138 16.207 8.46138 16.547L13.3714 21.617L23.1714 8.34705C23.4514 7.96705 23.9814 7.88705 24.3614 8.16705C24.7414 8.44705 24.8214 8.97705 24.5414 9.35705L14.1514 23.427C14.0014 23.627 13.7714 23.757 13.5214 23.767C13.5014 23.767 13.4814 23.767 13.4614 23.767V23.777Z" })), o = (t) => /* @__PURE__ */ e.createElement("svg", { viewBox: "4 4 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M17.0475 15.8475L23.4475 9.4475C23.7775 9.1175 23.7775 8.5775 23.4475 8.2475C23.1175 7.9175 22.5775 7.9175 22.2475 8.2475L15.8475 14.6475L9.4475 8.2475C9.1175 7.9175 8.5775 7.9175 8.2475 8.2475C7.9175 8.5775 7.9175 9.1175 8.2475 9.4475L14.6475 15.8475L8.2475 22.2475C7.9175 22.5775 7.9175 23.1175 8.2475 23.4475C8.4175 23.6175 8.6275 23.6975 8.8475 23.6975C9.0675 23.6975 9.2875 23.6175 9.4475 23.4475L15.8475 17.0475L22.2475 23.4475C22.4175 23.6175 22.6275 23.6975 22.8475 23.6975C23.0675 23.6975 23.2875 23.6175 23.4475 23.4475C23.7775 23.1175 23.7775 22.5775 23.4475 22.2475L17.0475 15.8475Z", fill: "currentColor" }));
+export {
+  l as S,
+  o as a
+};

package/dist/components/icons/Icons.d.ts

@@ -6,4 +6,5 @@ import { ReactComponent as Heart } from "./HeartFilled.svg";
 import { ReactComponent as HeartUnfilled } from "./HeartUnfilled.svg";
 import { ReactComponent as Pause } from "./Pause.svg";
 import { ReactComponent as Play } from "./Play.svg";
-export { Arrow, Checkmark, Chevron, Heart, HeartToggle, HeartUnfilled, Pause, Play };
+import { ReactComponent as Close } from "./Close.svg";
+export { Arrow, Checkmark, Chevron, Heart, HeartToggle, HeartUnfilled, Pause, Play, Close };

package/dist/components/index.d.ts

@@ -11,7 +11,7 @@ export { Progress } from "./progress/Progress";
 export { Loader } from "./loader/Loader";
 export { CircularProgress } from "./progress/CircularProgress";
 export { Dropdown } from "./dropdown/Dropdown";
-export { PrimaryButton, SecondaryButton, TertiaryButton, LinkButton, BaseLinkButton } from "./button/Button";
+export { PrimaryButton, SecondaryButton, TertiaryButton, BaseLinkButton } from "./button/Button";
 export { PrimaryArrowButton, SecondaryArrowButton, TertiaryArrowButton } from "./button/ArrowButton";
 export { PrimaryIconButton, SecondaryIconButton, TertiaryIconButton } from "./button/IconButton";
 export { ToggleButton } from "./toggleButton/ToggleButton";

package/dist/components/list/CheckmarkListItem-b9d00a82.mjs

@@ -0,0 +1,9 @@
+import { j as t } from "../accordion/Accordion-5e72e67b.mjs";
+import "react";
+import "../icons/HeartToggle-a5a93ca7.mjs";
+import { S as s } from "../icons/Icons-4022b869.mjs";
+import { L as o } from "./ListItem-748523c2.mjs";
+const k = ({ children: r, ...m }) => /* @__PURE__ */ t.jsx(o, { testId: "rds-list-item--check", icon: /* @__PURE__ */ t.jsx(s, {}), ...m, children: r });
+export {
+  k as C
+};

package/dist/components/list/CheckmarkListItem.d.ts

@@ -1,8 +1,5 @@
-import { FC, HTMLAttributes } from "react";
-interface Props extends HTMLAttributes<HTMLLIElement> {
-    className?: string;
-    color?: "error" | "success";
-    innerClassName?: string;
-}
+import { FC } from "react";
+import { ListItemProps } from "./ListItem";
+type Props = Omit<ListItemProps, "icon" | "testId">;
 export declare const CheckmarkListItem: FC<Props>;
 export {};

package/dist/components/list/CrossmarkListItem-f74a8cf6.mjs

@@ -0,0 +1,9 @@
+import { j as s } from "../accordion/Accordion-5e72e67b.mjs";
+import "react";
+import "../icons/HeartToggle-a5a93ca7.mjs";
+import { a as o } from "../icons/Icons-4022b869.mjs";
+import { L as m } from "./ListItem-748523c2.mjs";
+const j = ({ children: t, ...r }) => /* @__PURE__ */ s.jsx(m, { testId: "rds-list-item--cross", icon: /* @__PURE__ */ s.jsx(o, {}), ...r, children: t });
+export {
+  j as C
+};

package/dist/components/list/CrossmarkListItem.d.ts

@@ -1,8 +1,5 @@
-import { FC, HTMLAttributes } from "react";
-interface Props extends Omit<HTMLAttributes<HTMLLIElement>, "color"> {
-    className?: string;
-    color?: "error" | "success";
-    innerClassName?: string;
-}
+import { FC } from "react";
+import { ListItemProps } from "./ListItem";
+type Props = Omit<ListItemProps, "icon" | "testId">;
 export declare const CrossmarkListItem: FC<Props>;
 export {};

package/dist/components/list/List.scss

@@ -5,12 +5,14 @@
 
   list-style: none;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--list-item__spacing);
 
   counter-reset: listCounter;
 
   & .rds-list > li {
     // Targets only nested lists
     padding-left: rem.convert(32px);
-    margin-bottom: var(--list-item__spacing);
   }
 }

package/dist/components/list/ListItem-748523c2.mjs

@@ -0,0 +1,34 @@
+import { j as r } from "../accordion/Accordion-5e72e67b.mjs";
+const n = (s) => {
+  switch (s) {
+    case "error":
+      return { "--mark-color": "var(--rds-feedback-error-object)" };
+    case "success":
+      return { "--mark-color": "var(--rds-feedback-confirm)" };
+    case "faded":
+      return { "--mark-color": "var(--rds-foreground-secondary)" };
+    default:
+      return;
+  }
+}, u = ({
+  className: s = "",
+  children: e,
+  innerClassName: t = "",
+  icon: c,
+  testId: a = "rds-list-item",
+  style: o,
+  color: l,
+  ...i
+}) => {
+  const d = {
+    ...o,
+    ...n(l)
+  };
+  return /* @__PURE__ */ r.jsxs("li", { className: `rds-list__item ${s}`, "data-testid": a, style: d, ...i, children: [
+    /* @__PURE__ */ r.jsx("span", { className: "rds-list__item--svg-wrapper", children: c || /* @__PURE__ */ r.jsx("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ r.jsx("circle", { cx: "12", cy: "12", r: "5", fill: "currentColor" }) }) }),
+    /* @__PURE__ */ r.jsx("span", { className: `${t}`, children: e })
+  ] });
+};
+export {
+  u as L
+};

package/dist/components/list/ListItem.d.ts

@@ -1,7 +1,9 @@
 import { FC, HTMLAttributes } from "react";
-interface Props extends HTMLAttributes<HTMLLIElement> {
+export interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
     className?: string;
+    color?: "error" | "success" | "faded";
     innerClassName?: string;
+    icon?: JSX.Element;
+    testId?: string;
 }
-export declare const ListItem: FC<Props>;
-export {};
+export declare const ListItem: FC<ListItemProps>;

package/dist/components/list/ListItem.scss

@@ -1,25 +1,24 @@
 .rds-list__item {
-  --list-item__topalignment: 0.375em;
+  --mark-color: currentColor;
 
   display: flex;
+  gap: 0.75rem;
   align-items: flex-start;
-  margin-bottom: var(--list-item__spacing);
 
-  &:last-child {
-    margin: 0;
+  // first child is a dot or an icon
+  & *:first-child {
+    width: 1.25rem;
+    height: 1.25em;
+    flex-shrink: 0;
   }
 
-  &::before {
-    content: "";
-    box-sizing: border-box;
-    display: block;
-    flex-shrink: 0;
-    width: 0.5em;
-    height: 0.5em;
-    margin-top: var(--list-item__topalignment);
-    margin-right: calc(1rem + 0.25em);
-    margin-left: 0.25em;
-    background-color: currentColor;
-    border-radius: 50%;
+  // styles when icon is included
+  &--svg-wrapper {
+    display: flex;
+
+    & svg {
+      width: 100%;
+      color: var(--mark-color);
+    }
   }
 }

package/dist/components/list/OrderedListItem.scss

@@ -1,13 +1,8 @@
 .rds-list__item__ordered {
   display: flex;
-  margin-bottom: var(--list-item__spacing);
 
   counter-increment: listCounter;
 
-  &:last-child {
-    margin: 0;
-  }
-
   &::before {
     content: counter(listCounter) ".";
     display: block;

package/dist/components/list/internal/getMarkColor.d.ts

@@ -1,3 +1,3 @@
-export declare const getMarkColor: (color?: "error" | "success") => {
+export declare const getMarkColor: (color?: "error" | "success" | "faded") => {
     "--mark-color": string;
 } | undefined;

package/dist/components/panel/panel.scss

@@ -35,11 +35,12 @@
     }
     &__heading {
       display: flex;
-      align-items: baseline;
+      align-items: flex-start;
 
       &__icon {
         display: inline-block;
         width: 1.125em;
+        min-width: 24px;
         margin-right: 0.5em;
         color: var(--panel-color);
       }

package/dist/components/toggle/{RadioToggle-5ddf1bfd.mjs → RadioToggle-4df6de4c.mjs}

@@ -1,7 +1,7 @@
 import { j as o } from "../accordion/Accordion-5e72e67b.mjs";
 import { forwardRef as d, useContext as l } from "react";
 import { R as n } from "./FieldSet-00f1fc56.mjs";
-import "../button/ArrowButton-4fa3c028.mjs";
+import "../button/ArrowButton-470c0575.mjs";
 const m = d(
   ({ label: a, name: e, className: r = "", ...s }, t) => {
     const { radioName: i } = l(n);