@rikstv/shared-components 0.8.1 → 1.1.79

package/dist/{icons → components/icons}/heartToggle.scss

@@ -20,10 +20,16 @@
 }
 
 .rds-icon__heart-toggle {
-  transform: scale(1);
-  animation-duration: 1000ms;
-  animation-fill-mode: forwards;
-  animation-iteration-count: 1;
-  animation-name: rds-heart-beat;
-  animation-timing-function: ease-out;
+  &--checked {
+    transform: scale(1);
+    animation-duration: 1000ms;
+    animation-fill-mode: forwards;
+    animation-iteration-count: 1;
+    animation-name: rds-heart-beat;
+    animation-timing-function: ease-out;
+  }
+
+  svg {
+    display: block;
+  }
 }

package/dist/components/index.d.ts

@@ -0,0 +1,31 @@
+export { RiksTVProvider } from "./core/RiksTV";
+export { StrimProvider } from "./core/Strim";
+export { LightMode } from "./core/LightMode";
+export { Gutter } from "./core/spacing/Gutter";
+export { GutterPadding } from "./core/spacing/GutterPadding";
+export { Accordion } from "./accordion/Accordion";
+export { Panel } from "./panel/Panel";
+export { Checkbox } from "./checkbox/Checkbox";
+export { PrimaryButton, SecondaryButton, TertiaryButton, LinkButton, BaseLinkButton } from "./button/Button";
+export { PrimaryIconButton, SecondaryIconButton, TertiaryIconButton } from "./button/IconButton";
+export { PrimaryArrowButton, SecondaryArrowButton, TertiaryArrowButton } from "./button/ArrowButton";
+export { ToggleButton } from "./toggleButton/ToggleButton";
+export { ToggleLinkButton } from "./toggleLinkButton/ToggleLinkButton";
+export { RadioToggleInput } from "./toggle/RadioToggle";
+export { FieldSet } from "./toggle/FieldSet";
+export { TextField } from "./textfield/TextField";
+export { Breadcrumb, BreadcrumbCurrent } from "./breadcrumb/Breadcrumb";
+export { Progress } from "./progress/Progress";
+export { DisplayTitle, H1, H2, H3, H4, Lead, Body, Bold, SubBody, Tag, Meta, Span } from "./typography/Typography";
+export { List } from "./list/List";
+export { CheckmarkListItem } from "./list/CheckmarkListItem";
+export { ListItem } from "./list/ListItem";
+export { CrossmarkListItem } from "./list/CrossmarkListItem";
+export { OrderedListItem } from "./list/OrderedListItem";
+export { Loader } from "./loader/Loader";
+export { CircularProgress } from "./progress/CircularProgress";
+export { useAnimatedHeight } from "./core/hooks/useAnimatedHeight";
+export { useBrowserPreferences } from "./core/hooks/useBrowserPreferences";
+export { useClickOutsideListener } from "./core/hooks/useClickOutsideListener";
+export { useIntersectionObserver, useElementVisible } from "./core/hooks/useIntersectionObserver";
+export { useMutationObserver } from "./core/hooks/useMutationObserver";

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

@@ -0,0 +1,8 @@
+import { FC, HTMLAttributes } from "react";
+import "./CheckmarkListItem.scss";
+interface Props extends HTMLAttributes<HTMLLIElement> {
+    className?: string;
+    color?: "error" | "success";
+}
+export declare const CheckmarkListItem: FC<Props>;
+export {};

package/dist/components/list/CheckmarkListItem.js

@@ -0,0 +1,32 @@
+import { j as jsx } from "../core/RiksTV.js";
+const getMarkColor = (color) => {
+  switch (color) {
+    case "error":
+      return { "--mark-color": "var(--rds-feedback-error-object)" };
+    case "success":
+      return { "--mark-color": "var(--rds-feedback-confirm)" };
+    default:
+      return void 0;
+  }
+};
+var CheckmarkListItem$1 = /* @__PURE__ */ (() => '@charset "UTF-8";.rds-list__item__checkmark{--mark-color: currentColor;--unicode-cross: "\\2713";display:flex;align-items:flex-start;margin-bottom:var(--list-item__spacing)}.rds-list__item__checkmark:last-child{margin:0}.rds-list__item__checkmark:before{content:var(--unicode-cross);alt:var(--unicode-cross);text-indent:-9999px;display:block;width:1em;height:1em;flex-shrink:0;margin-right:1rem;margin-top:.225em;clip-path:polygon(33.59% 75.55%,2.27% 44.24%,2.27% 33.29%,13.21% 33.29%,35.62% 55.65%,89% 2.27%,100% 2.27%,100% 13.21%,37.6% 75.55%,33.59% 75.55%);background-color:var(--mark-color)}\n')();
+const CheckmarkListItem = ({
+  color,
+  style,
+  className = "",
+  children,
+  ...rest
+}) => {
+  const calculatedStyle = {
+    ...style,
+    ...getMarkColor(color)
+  };
+  return /* @__PURE__ */ jsx("li", {
+    style: calculatedStyle,
+    className: `rds-list__item__checkmark ${className}`,
+    "data-testid": "rds-list-item--check",
+    ...rest,
+    children
+  });
+};
+export { CheckmarkListItem as C, getMarkColor as g };

package/dist/components/list/CheckmarkListItem.scss

@@ -0,0 +1,41 @@
+.rds-list__item__checkmark {
+  --mark-color: currentColor;
+  --unicode-cross: "\2713";
+
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: var(--list-item__spacing);
+
+  &:last-child {
+    margin: 0;
+  }
+
+  &::before {
+    content: var(--unicode-cross);
+    // Safari handling of screen reader
+    alt: var(--unicode-cross);
+    // Move the text off screen
+    text-indent: -9999px;
+
+    display: block;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    margin-right: 1rem;
+    margin-top: 0.225em;
+
+    clip-path: polygon(
+      33.59% 75.55%,
+      2.27% 44.24%,
+      2.27% 33.29%,
+      13.21% 33.29%,
+      35.62% 55.65%,
+      89% 2.27%,
+      100% 2.27%,
+      100% 13.21%,
+      37.6% 75.55%,
+      33.59% 75.55%
+    );
+    background-color: var(--mark-color);
+  }
+}

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

@@ -0,0 +1,8 @@
+import { FC, HTMLAttributes } from "react";
+import "./CrossmarkListItem.scss";
+interface Props extends Omit<HTMLAttributes<HTMLLIElement>, "color"> {
+    className?: string;
+    color?: "error" | "success";
+}
+export declare const CrossmarkListItem: FC<Props>;
+export {};

package/dist/components/list/CrossmarkListItem.js

@@ -0,0 +1,23 @@
+import { g as getMarkColor } from "./CheckmarkListItem.js";
+import { j as jsx } from "../core/RiksTV.js";
+var CrossmarkListItem$1 = /* @__PURE__ */ (() => '@charset "UTF-8";.rds-list__item__crossmark{--mark-color: currentColor;--unicode-cross: "\\274c";display:flex;align-items:center;margin-bottom:var(--list-item__spacing)}.rds-list__item__crossmark:last-child{margin:0}.rds-list__item__crossmark:before{content:var(--unicode-cross);alt:var(--unicode-cross);text-indent:-9999px;display:block;width:1em;height:1em;flex-shrink:0;margin-right:1rem;clip-path:polygon(10% 0%,0% 10%,40% 50%,0% 90%,10% 100%,50% 60%,90% 100%,100% 90%,60% 50%,100% 10%,90% 0%,50% 40%);background-color:var(--mark-color)}\n')();
+const CrossmarkListItem = ({
+  color,
+  style,
+  className = "",
+  children,
+  ...rest
+}) => {
+  const calculatedStyle = {
+    ...style,
+    ...getMarkColor(color)
+  };
+  return /* @__PURE__ */ jsx("li", {
+    style: calculatedStyle,
+    className: `rds-list__item__crossmark ${className}`,
+    "data-testid": "rds-list-item--cross",
+    ...rest,
+    children
+  });
+};
+export { CrossmarkListItem as C };

package/dist/components/list/CrossmarkListItem.scss

@@ -0,0 +1,42 @@
+.rds-list__item__crossmark {
+  --mark-color: currentColor;
+  --unicode-cross: "\274C";
+
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--list-item__spacing);
+
+  &:last-child {
+    margin: 0;
+  }
+
+  &::before {
+    content: var(--unicode-cross);
+    // Safari handling of screen reader
+    alt: var(--unicode-cross);
+    // Move the text off screen
+    text-indent: -9999px;
+
+    display: block;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    margin-right: 1rem;
+
+    clip-path: polygon(
+      10% 0%,
+      0% 10%,
+      40% 50%,
+      0% 90%,
+      10% 100%,
+      50% 60%,
+      90% 100%,
+      100% 90%,
+      60% 50%,
+      100% 10%,
+      90% 0%,
+      50% 40%
+    );
+    background-color: var(--mark-color);
+  }
+}

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

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from "react";
+import "./List.scss";
+interface Props extends HTMLAttributes<HTMLUListElement | HTMLOListElement> {
+    className?: string;
+    ordered?: boolean;
+}
+export declare const List: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
+export {};

package/dist/components/list/List.js

@@ -0,0 +1,28 @@
+import { forwardRef } from "react";
+import { j as jsx } from "../core/RiksTV.js";
+var List$1 = /* @__PURE__ */ (() => ".rds-list{--list-item__spacing: 1em;list-style:none;padding:0;counter-reset:listCounter}.rds-list .rds-list>li{padding-left:2rem;margin-bottom:var(--list-item__spacing)}\n")();
+const List = forwardRef(({
+  className = "",
+  ordered = false,
+  children,
+  ...rest
+}, ref) => {
+  if (ordered) {
+    return /* @__PURE__ */ jsx("ol", {
+      ref,
+      className: `rds-list ${className}`,
+      "data-testid": "rds-list--ordered",
+      ...rest,
+      children
+    });
+  }
+  return /* @__PURE__ */ jsx("ul", {
+    ref,
+    className: `rds-list ${className}`,
+    "data-testid": "rds-list--unordered",
+    ...rest,
+    children
+  });
+});
+List.displayName = "List";
+export { List as L };

package/dist/components/list/List.scss

@@ -0,0 +1,15 @@
+@use "../core/mixin/rem";
+
+.rds-list {
+  --list-item__spacing: 1em;
+
+  list-style: none;
+  padding: 0;
+
+  counter-reset: listCounter;
+
+  & & > li {
+    padding-left: rem.convert(32px);
+    margin-bottom: var(--list-item__spacing);
+  }
+}

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

@@ -0,0 +1,8 @@
+import { FC, HTMLAttributes } from "react";
+import "./ListItem.scss";
+interface Props extends HTMLAttributes<HTMLLIElement> {
+    className?: string;
+    innerClassName?: string;
+}
+export declare const ListItem: FC<Props>;
+export {};

package/dist/components/list/ListItem.js

@@ -0,0 +1,19 @@
+import { j as jsx } from "../core/RiksTV.js";
+var ListItem$1 = /* @__PURE__ */ (() => '.rds-list__item{--list-item__topalignment: .375em;display:flex;align-items:flex-start;margin-bottom:var(--list-item__spacing)}.rds-list__item:last-child{margin:0}.rds-list__item:before{content:"";display:block;width:.5em;height:.5em;flex-shrink:0;margin-left:.25em;margin-right:calc(1rem + .25em);box-sizing:border-box;border-radius:50%;margin-top:var(--list-item__topalignment);background-color:currentColor}\n')();
+const ListItem = ({
+  className = "",
+  children,
+  innerClassName = "",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx("li", {
+    className: `rds-list__item ${className}`,
+    "data-testid": "rds-list-item",
+    ...rest,
+    children: /* @__PURE__ */ jsx("span", {
+      className: `${innerClassName}`,
+      children
+    })
+  });
+};
+export { ListItem as L };

package/dist/components/list/ListItem.scss

@@ -0,0 +1,25 @@
+.rds-list__item {
+  --list-item__topalignment: 0.375em;
+
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: var(--list-item__spacing);
+
+  &:last-child {
+    margin: 0;
+  }
+
+  &::before {
+    content: "";
+    display: block;
+    width: 0.5em;
+    height: 0.5em;
+    flex-shrink: 0;
+    margin-left: 0.25em;
+    margin-right: calc(1rem + 0.25em);
+    box-sizing: border-box;
+    border-radius: 50%;
+    margin-top: var(--list-item__topalignment);
+    background-color: currentColor;
+  }
+}

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

@@ -0,0 +1,7 @@
+import { FC, HTMLAttributes } from "react";
+import "./OrderedListItem.scss";
+interface Props extends HTMLAttributes<HTMLLIElement> {
+    className?: string;
+}
+export declare const OrderedListItem: FC<Props>;
+export {};

package/dist/components/list/OrderedListItem.js

@@ -0,0 +1,15 @@
+import { j as jsx } from "../core/RiksTV.js";
+var OrderedListItem$1 = /* @__PURE__ */ (() => '.rds-list__item__ordered{display:flex;margin-bottom:var(--list-item__spacing);counter-increment:listCounter}.rds-list__item__ordered:last-child{margin:0}.rds-list__item__ordered:before{content:counter(listCounter) ".";display:block;width:1em;flex-shrink:0;margin-right:1rem;text-align:center;color:currentColor}\n')();
+const OrderedListItem = ({
+  className = "",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx("li", {
+    className: `rds-list__item__ordered ${className}`,
+    "data-testid": "rds-ordered-list-item",
+    ...rest,
+    children
+  });
+};
+export { OrderedListItem as O };

package/dist/components/list/OrderedListItem.scss

@@ -0,0 +1,21 @@
+.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;
+    width: 1em;
+    flex-shrink: 0;
+    margin-right: 1rem;
+    text-align: center;
+
+    color: currentColor;
+  }
+}

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

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

package/dist/components/loader/Loader.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Props as LoaderProps } from "./RawLoader";
+interface Props extends LoaderProps {
+    delay?: number;
+}
+export declare const Loader: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/loader/Loader.js

@@ -0,0 +1,31 @@
+import { forwardRef, useState, useEffect } from "react";
+import { R as RawLoader } from "./RawLoader.js";
+import { j as jsx } from "../core/RiksTV.js";
+const useDeferredRender = (delayMilliseconds) => {
+  const [renderComponent, setRenderComponent] = useState(delayMilliseconds === 0);
+  useEffect(() => {
+    if (delayMilliseconds === 0) {
+      return;
+    }
+    const deferrer = setTimeout(() => setRenderComponent(true), delayMilliseconds);
+    return () => {
+      clearTimeout(deferrer);
+    };
+  }, [delayMilliseconds]);
+  return [renderComponent];
+};
+const Loader = forwardRef(({
+  delay = 200,
+  ...props
+}, ref) => {
+  const [renderComponent] = useDeferredRender(delay);
+  if (!renderComponent) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(RawLoader, {
+    ref,
+    ...props
+  });
+});
+Loader.displayName = "Loader";
+export { Loader as L };

package/dist/components/loader/Loader.scss

@@ -0,0 +1,148 @@
+.rds-loader-container {
+  display: grid;
+  place-items: center;
+
+  --loader-color: var(--rds-accent-color-dark);
+
+  &--light {
+    --loader-color: var(--rds-foreground-tertiary);
+  }
+
+  $deg: 0deg, 22.5deg, 45deg, 67.5deg, 90deg, 112.5deg, 135deg, 157.5deg, 180deg, 202.5deg, 225deg, 247.5deg, 270deg,
+    292.5deg, 315deg, 337.5deg;
+
+  @for $i from 1 through length($deg) {
+    @keyframes loader-container-spinner-child-#{$i} {
+      0% {
+        opacity: 1;
+        transform: rotate(nth($deg, $i)) scaleY(1.2);
+      }
+      10%,
+      100% {
+        transform: rotate(nth($deg, $i));
+      }
+      100% {
+        opacity: 0;
+      }
+    }
+  }
+
+  &__spinner {
+    &__large {
+      span {
+        position: absolute;
+        background: var(--loader-color);
+        left: 48px;
+        top: 0;
+        width: 3px;
+        height: 30px;
+        border-radius: 200px;
+        transform-origin: 1px 60px;
+      }
+      margin-top: 30px;
+      padding-bottom: 50px;
+    }
+
+    &__small {
+      span {
+        position: absolute;
+        background: var(--loader-color);
+        left: 48px;
+        top: 0;
+        width: 3px;
+        height: 10px;
+        border-radius: 200px;
+        transform-origin: 1px 20px;
+      }
+      margin-top: 30px;
+    }
+
+    span:nth-child(1) {
+      animation: loader-container-spinner-child-1 linear 2s infinite;
+      animation-delay: -1.875s;
+    }
+
+    span:nth-child(2) {
+      animation: loader-container-spinner-child-2 linear 2s infinite;
+      animation-delay: -1.75s;
+    }
+
+    span:nth-child(3) {
+      animation: loader-container-spinner-child-3 linear 2s infinite;
+      animation-delay: -1.625s;
+    }
+
+    span:nth-child(4) {
+      animation: loader-container-spinner-child-4 linear 2s infinite;
+      animation-delay: -1.5s;
+    }
+
+    span:nth-child(5) {
+      animation: loader-container-spinner-child-5 linear 2s infinite;
+      animation-delay: -1.375s;
+    }
+
+    span:nth-child(6) {
+      animation: loader-container-spinner-child-6 linear 2s infinite;
+      animation-delay: -1.25s;
+    }
+
+    span:nth-child(7) {
+      animation: loader-container-spinner-child-7 linear 2s infinite;
+      animation-delay: -1.125s;
+    }
+
+    span:nth-child(8) {
+      animation: loader-container-spinner-child-8 linear 2s infinite;
+      animation-delay: -1s;
+    }
+
+    span:nth-child(9) {
+      animation: loader-container-spinner-child-9 linear 2s infinite;
+      animation-delay: -0.875s;
+    }
+
+    span:nth-child(10) {
+      animation: loader-container-spinner-child-10 linear 2s infinite;
+      animation-delay: -0.75s;
+    }
+
+    span:nth-child(11) {
+      animation: loader-container-spinner-child-11 linear 2s infinite;
+      animation-delay: -0.625s;
+    }
+
+    span:nth-child(12) {
+      animation: loader-container-spinner-child-12 linear 2s infinite;
+      animation-delay: -0.5s;
+    }
+
+    span:nth-child(13) {
+      animation: loader-container-spinner-child-13 linear 2s infinite;
+      animation-delay: -0.375s;
+    }
+
+    span:nth-child(14) {
+      animation: loader-container-spinner-child-14 linear 2s infinite;
+      animation-delay: -0.25s;
+    }
+
+    span:nth-child(15) {
+      animation: loader-container-spinner-child-15 linear 2s infinite;
+      animation-delay: -0.125s;
+    }
+
+    span:nth-child(16) {
+      animation: loader-container-spinner-child-16 linear 2s infinite;
+      animation-delay: 0s;
+    }
+
+    transform: translate(-50px, -50px) scale(0.5) translate(50px, 50px);
+  }
+}
+
+.rds-light {
+  .rds-loader-container__spinner > span {
+    --loader-color: var(--rds-foreground-tertiary);
+  }
+}

package/dist/components/loader/RawLoader.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from "react";
+import "./Loader.scss";
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    size?: "small" | "large";
+    lightBackground?: boolean;
+    label?: string;
+    politeness?: "polite" | "assertive";
+}
+export declare const RawLoader: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/loader/RawLoader.js

@@ -0,0 +1,30 @@
+import { forwardRef } from "react";
+import { j as jsx, a as jsxs } from "../core/RiksTV.js";
+var Loader = /* @__PURE__ */ (() => ".rds-loader-container{display:grid;place-items:center;--loader-color: var(--rds-accent-color-dark)}.rds-loader-container--light{--loader-color: var(--rds-foreground-tertiary)}@keyframes loader-container-spinner-child-1{0%{opacity:1;transform:rotate(0) scaleY(1.2)}10%,to{transform:rotate(0)}to{opacity:0}}@keyframes loader-container-spinner-child-2{0%{opacity:1;transform:rotate(22.5deg) scaleY(1.2)}10%,to{transform:rotate(22.5deg)}to{opacity:0}}@keyframes loader-container-spinner-child-3{0%{opacity:1;transform:rotate(45deg) scaleY(1.2)}10%,to{transform:rotate(45deg)}to{opacity:0}}@keyframes loader-container-spinner-child-4{0%{opacity:1;transform:rotate(67.5deg) scaleY(1.2)}10%,to{transform:rotate(67.5deg)}to{opacity:0}}@keyframes loader-container-spinner-child-5{0%{opacity:1;transform:rotate(90deg) scaleY(1.2)}10%,to{transform:rotate(90deg)}to{opacity:0}}@keyframes loader-container-spinner-child-6{0%{opacity:1;transform:rotate(112.5deg) scaleY(1.2)}10%,to{transform:rotate(112.5deg)}to{opacity:0}}@keyframes loader-container-spinner-child-7{0%{opacity:1;transform:rotate(135deg) scaleY(1.2)}10%,to{transform:rotate(135deg)}to{opacity:0}}@keyframes loader-container-spinner-child-8{0%{opacity:1;transform:rotate(157.5deg) scaleY(1.2)}10%,to{transform:rotate(157.5deg)}to{opacity:0}}@keyframes loader-container-spinner-child-9{0%{opacity:1;transform:rotate(180deg) scaleY(1.2)}10%,to{transform:rotate(180deg)}to{opacity:0}}@keyframes loader-container-spinner-child-10{0%{opacity:1;transform:rotate(202.5deg) scaleY(1.2)}10%,to{transform:rotate(202.5deg)}to{opacity:0}}@keyframes loader-container-spinner-child-11{0%{opacity:1;transform:rotate(225deg) scaleY(1.2)}10%,to{transform:rotate(225deg)}to{opacity:0}}@keyframes loader-container-spinner-child-12{0%{opacity:1;transform:rotate(247.5deg) scaleY(1.2)}10%,to{transform:rotate(247.5deg)}to{opacity:0}}@keyframes loader-container-spinner-child-13{0%{opacity:1;transform:rotate(270deg) scaleY(1.2)}10%,to{transform:rotate(270deg)}to{opacity:0}}@keyframes loader-container-spinner-child-14{0%{opacity:1;transform:rotate(292.5deg) scaleY(1.2)}10%,to{transform:rotate(292.5deg)}to{opacity:0}}@keyframes loader-container-spinner-child-15{0%{opacity:1;transform:rotate(315deg) scaleY(1.2)}10%,to{transform:rotate(315deg)}to{opacity:0}}@keyframes loader-container-spinner-child-16{0%{opacity:1;transform:rotate(337.5deg) scaleY(1.2)}10%,to{transform:rotate(337.5deg)}to{opacity:0}}.rds-loader-container__spinner{transform:translate(-50px,-50px) scale(.5) translate(50px,50px)}.rds-loader-container__spinner__large{margin-top:30px;padding-bottom:50px}.rds-loader-container__spinner__large span{position:absolute;background:var(--loader-color);left:48px;top:0;width:3px;height:30px;border-radius:200px;transform-origin:1px 60px}.rds-loader-container__spinner__small{margin-top:30px}.rds-loader-container__spinner__small span{position:absolute;background:var(--loader-color);left:48px;top:0;width:3px;height:10px;border-radius:200px;transform-origin:1px 20px}.rds-loader-container__spinner span:nth-child(1){animation:loader-container-spinner-child-1 linear 2s infinite;animation-delay:-1.875s}.rds-loader-container__spinner span:nth-child(2){animation:loader-container-spinner-child-2 linear 2s infinite;animation-delay:-1.75s}.rds-loader-container__spinner span:nth-child(3){animation:loader-container-spinner-child-3 linear 2s infinite;animation-delay:-1.625s}.rds-loader-container__spinner span:nth-child(4){animation:loader-container-spinner-child-4 linear 2s infinite;animation-delay:-1.5s}.rds-loader-container__spinner span:nth-child(5){animation:loader-container-spinner-child-5 linear 2s infinite;animation-delay:-1.375s}.rds-loader-container__spinner span:nth-child(6){animation:loader-container-spinner-child-6 linear 2s infinite;animation-delay:-1.25s}.rds-loader-container__spinner span:nth-child(7){animation:loader-container-spinner-child-7 linear 2s infinite;animation-delay:-1.125s}.rds-loader-container__spinner span:nth-child(8){animation:loader-container-spinner-child-8 linear 2s infinite;animation-delay:-1s}.rds-loader-container__spinner span:nth-child(9){animation:loader-container-spinner-child-9 linear 2s infinite;animation-delay:-.875s}.rds-loader-container__spinner span:nth-child(10){animation:loader-container-spinner-child-10 linear 2s infinite;animation-delay:-.75s}.rds-loader-container__spinner span:nth-child(11){animation:loader-container-spinner-child-11 linear 2s infinite;animation-delay:-.625s}.rds-loader-container__spinner span:nth-child(12){animation:loader-container-spinner-child-12 linear 2s infinite;animation-delay:-.5s}.rds-loader-container__spinner span:nth-child(13){animation:loader-container-spinner-child-13 linear 2s infinite;animation-delay:-.375s}.rds-loader-container__spinner span:nth-child(14){animation:loader-container-spinner-child-14 linear 2s infinite;animation-delay:-.25s}.rds-loader-container__spinner span:nth-child(15){animation:loader-container-spinner-child-15 linear 2s infinite;animation-delay:-.125s}.rds-loader-container__spinner span:nth-child(16){animation:loader-container-spinner-child-16 linear 2s infinite;animation-delay:0s}.rds-light .rds-loader-container__spinner>span{--loader-color: var(--rds-foreground-tertiary)}\n")();
+const RawLoader = forwardRef(({
+  size = "small",
+  className = "",
+  lightBackground,
+  label = "Laster",
+  politeness = "polite",
+  ...rest
+}, ref) => {
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    "aria-label": label,
+    "aria-busy": "true",
+    "aria-live": politeness,
+    role: "alert",
+    title: label,
+    className: `rds-loader-container ${lightBackground ? "rds-loader-container--light" : ""} ${className}`,
+    "data-testid": "rds-loader",
+    ...rest,
+    children: /* @__PURE__ */ jsxs("div", {
+      "data-testid": "rds-spinner",
+      className: `rds-loader-container__spinner rds-loader-container__spinner__${size}`,
+      children: [/* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("span", {})]
+    })
+  });
+});
+RawLoader.displayName = "RawLoader";
+export { RawLoader as R };

package/dist/components/panel/Info.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Info: () => JSX.Element;

package/dist/components/panel/Info.js

@@ -0,0 +1,25 @@
+import { a as jsxs, j as jsx } from "../core/RiksTV.js";
+const Info = () => {
+  return /* @__PURE__ */ jsxs("svg", {
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/* @__PURE__ */ jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M7.3125 7.875C7.3125 7.56434 7.56434 7.3125 7.875 7.3125H8.4375C9.05882 7.3125 9.5625 7.81618 9.5625 8.4375V11.25C9.5625 11.5607 9.81434 11.8125 10.125 11.8125H10.6875C10.9982 11.8125 11.25 12.0643 11.25 12.375C11.25 12.6857 10.9982 12.9375 10.6875 12.9375H10.125C9.19302 12.9375 8.4375 12.182 8.4375 11.25V8.4375H7.875C7.56434 8.4375 7.3125 8.18566 7.3125 7.875Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M7.875 5.34375C7.875 4.87776 8.25276 4.5 8.71875 4.5C9.18474 4.5 9.5625 4.87776 9.5625 5.34375C9.5625 5.80974 9.18474 6.1875 8.71875 6.1875C8.25276 6.1875 7.875 5.80974 7.875 5.34375Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9ZM9 1.125C4.65076 1.125 1.125 4.65076 1.125 9C1.125 13.3492 4.65076 16.875 9 16.875C13.3492 16.875 16.875 13.3492 16.875 9C16.875 4.65076 13.3492 1.125 9 1.125Z",
+      fill: "currentColor"
+    })]
+  });
+};
+export { Info as I };