@rikstv/shared-components 0.8.1 → 1.1.79

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

@@ -0,0 +1,15 @@
+import { HTMLAttributes, ReactNode } from "react";
+import "./panel.scss";
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    variant?: "info" | "warning" | "error";
+    id?: string;
+    lightBackground?: boolean;
+    heading?: {
+        text: string;
+        level: "h1" | "h2" | "h3" | "h4";
+    };
+    action?: ReactNode;
+    icon?: "info" | "success";
+}
+export declare const Panel: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/panel/Panel.js

@@ -0,0 +1,55 @@
+import { forwardRef } from "react";
+import { S as Span } from "../typography/Typography.js";
+import { S as Success } from "./Success.js";
+import { W as Warning } from "./Warning.js";
+import { I as Info } from "./Info.js";
+import { a as jsxs, j as jsx } from "../core/RiksTV.js";
+var panel = /* @__PURE__ */ (() => ".rds-panel{--panel-info-background-color: var(--rds-heading-accent);--panel-info-color: var(--rds-background-secondary);--panel-warning-background-color: var(--rds-background-secondary);--panel-warning-color: var(--rds-foreground-primary);--panel-fluid-padding: clamp(var(--rds-spacing--16), 2vw, var(--rds-spacing--32));--panel-border: none;--panel-color: #fff;padding:var(--panel-fluid-padding);border-radius:var(--rds-roundness--medium);border:var(--panel-border);display:flex;align-items:flex-end;justify-content:space-between;max-width:var(--rds-content-width--default)}.rds-panel__heading{margin:0;margin-bottom:var(--rds-spacing--8)}.rds-panel__heading>span{color:var(--panel-color)}.rds-panel__content{max-width:var(--rds-readability-width)}.rds-panel__content>span{color:var(--panel-color)}.rds-panel__content__heading{display:flex;align-items:baseline}.rds-panel__content__heading__icon{display:inline-block;width:1.125em;margin-right:.5em;color:var(--panel-color)}.rds-panel__action{display:flex;flex-direction:column;gap:var(--rds-spacing--16);margin-left:var(--rds-spacing--32)}.rds-panel__action>button{width:fit-content}@media (max-width: 768px){.rds-panel{flex-direction:column;align-items:flex-start}.rds-panel__action{margin-top:var(--rds-spacing--24);margin-left:0}}.rds-panel--info{background-color:var(--panel-info-background-color);--panel-color: var(--panel-info-color)}.rds-panel--warning{background-color:var(--panel-warning-background-color);--panel-color: var(--panel-warning-color)}.rds-panel--error{background-color:var(--strim-error-light);--panel-color: var(--strim-fantasy-green)}.rds-light .rds-panel,.rds-light.rds-panel{--panel-info-background-color: var(--rds-heading-accent);--panel-info-color: var(--rds-background-secondary);--panel-warning-background-color: var(--rds-foreground-primary);--panel-warning-color: var(--rds-background-secondary);--panel-border: 2px solid var(--rds-foreground-tertiary)}\n")();
+const Panel = forwardRef(({
+  className = "",
+  variant = "info",
+  heading,
+  action,
+  lightBackground = false,
+  id,
+  children,
+  icon = "success",
+  ...rest
+}, ref) => {
+  const H = (heading == null ? void 0 : heading.level) || "span";
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "rds-panel__container",
+    id,
+    className: `rds-panel rds-panel--${variant} ${lightBackground ? "rds-light" : ""} ${className}`,
+    ref,
+    ...rest,
+    children: [/* @__PURE__ */ jsxs("div", {
+      className: "rds-panel__content",
+      children: [heading && /* @__PURE__ */ jsxs("div", {
+        className: "rds-panel__content__heading",
+        children: [variant === "warning" && /* @__PURE__ */ jsx("span", {
+          className: "rds-panel__content__heading__icon",
+          children: /* @__PURE__ */ jsx(Warning, {})
+        }), variant === "info" && /* @__PURE__ */ jsxs("span", {
+          className: "rds-panel__content__heading__icon",
+          children: [icon === "success" && /* @__PURE__ */ jsx(Success, {}), icon === "info" && /* @__PURE__ */ jsx(Info, {})]
+        }), variant === "error" && /* @__PURE__ */ jsx("span", {
+          className: "rds-panel__content__heading__icon",
+          children: /* @__PURE__ */ jsx(Info, {})
+        }), /* @__PURE__ */ jsx(H, {
+          className: "rds-panel__heading rds-title-3",
+          children: /* @__PURE__ */ jsx("span", {
+            children: heading.text
+          })
+        })]
+      }), /* @__PURE__ */ jsx(Span, {
+        children
+      })]
+    }), action && /* @__PURE__ */ jsx("div", {
+      className: "rds-panel__action",
+      children: action
+    })]
+  });
+});
+Panel.displayName = "Panel";
+export { Panel as P };

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

@@ -0,0 +1,2 @@
+import { FC } from "react";
+export declare const Success: FC;

package/dist/components/panel/Success.js

@@ -0,0 +1,80 @@
+import { a as jsxs, j as jsx } from "../core/RiksTV.js";
+const Success = () => {
+  return /* @__PURE__ */ jsxs("svg", {
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 18 18",
+    children: [/* @__PURE__ */ jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M6.23 8.19c.22.66.7 1.44 1.42 2.16.72.72 1.5 1.2 2.16 1.42.7.23 1.07.12 1.22-.03.16-.15.27-.53.04-1.23a5.83 5.83 0 0 0-1.43-2.15A5.83 5.83 0 0 0 7.5 6.93c-.7-.23-1.08-.12-1.23.04-.15.15-.26.53-.03 1.22Zm-1.07.36c-.27-.82-.31-1.76.3-2.38.62-.62 1.56-.58 2.38-.3.86.28 1.78.87 2.6 1.7a6.94 6.94 0 0 1 1.7 2.59c.27.82.3 1.76-.31 2.37-.62.62-1.56.58-2.38.3a6.94 6.94 0 0 1-2.6-1.69 6.94 6.94 0 0 1-1.69-2.6Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M5.83 6.79c.27.15.36.5.2.76L1.18 16.1a.56.56 0 0 0 .74.74l8.54-4.86a.56.56 0 1 1 .55.97l-8.56 4.88a1.69 1.69 0 0 1-2.26-2.26L5.06 7c.16-.27.5-.37.77-.21ZM11.43 5.38a.56.56 0 0 1 .8 0 .84.84 0 0 1 0 1.2.56.56 0 0 1-.93-.6.56.56 0 0 1 .13-.6Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M11.63 6.3a.56.56 0 0 0 .6-.92.84.84 0 0 0-1.2 0 .56.56 0 0 0 .6.92Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M11.96 5.97a.56.56 0 0 0-.93-.6.85.85 0 0 0 0 1.2.56.56 0 0 0 .93-.6Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M11.63 5.64a.56.56 0 0 0-.6.93.84.84 0 0 0 1.2 0 .56.56 0 0 0-.6-.93ZM14.61 2.2a.56.56 0 0 1 .8 0 .84.84 0 0 1 0 1.19.56.56 0 0 1-.92-.6.56.56 0 0 1 .12-.6Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M14.81 3.12a.56.56 0 0 0 .6-.93.84.84 0 0 0-1.2 0 .56.56 0 0 0 .6.93Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M15.14 2.79a.56.56 0 0 0-.92-.6.84.84 0 0 0 0 1.2.56.56 0 0 0 .92-.6Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M14.81 2.46a.56.56 0 0 0-.6.93.84.84 0 0 0 1.2 0 .56.56 0 0 0-.6-.93ZM14.61 10.15a.56.56 0 0 1 .8 0 .84.84 0 0 1 0 1.2.56.56 0 0 1-.92-.6.56.56 0 0 1 .12-.6Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M14.81 11.07a.56.56 0 0 0 .6-.92.84.84 0 0 0-1.2 0 .56.56 0 0 0 .6.92Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M15.14 10.74a.56.56 0 0 0-.92-.6.84.84 0 0 0 0 1.2.56.56 0 0 0 .92-.6Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M14.81 10.42a.56.56 0 0 0-.6.92.84.84 0 0 0 1.2 0 .56.56 0 0 0-.6-.92ZM5.87 2.99a.56.56 0 0 1 .8 0 .85.85 0 0 1 0 1.19.56.56 0 0 1-.93-.6.56.56 0 0 1 .13-.6Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M6.06 3.91a.56.56 0 0 0 .6-.92.84.84 0 0 0-1.2 0 .56.56 0 0 0 .6.92Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M6.4 3.58a.56.56 0 0 0-.93-.6.84.84 0 0 0 0 1.2.56.56 0 0 0 .92-.6Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M6.06 3.26a.56.56 0 0 0-.6.92.84.84 0 0 0 1.2 0 .56.56 0 0 0-.6-.92ZM9.58 0c.3-.03.59.2.62.5.17 1.5.03 3-.42 4.44a.56.56 0 1 1-1.07-.33c.4-1.29.52-2.64.37-3.99a.56.56 0 0 1 .5-.62ZM12.54 1.04c.3.07.5.36.44.67l-.4 1.98a.56.56 0 1 1-1.1-.22l.4-1.98c.06-.3.35-.5.66-.45ZM13.06 8.22c1.43-.45 2.95-.59 4.44-.42a.56.56 0 1 1-.12 1.12 9.81 9.81 0 0 0-4 .37.56.56 0 0 1-.32-1.07ZM16.96 5.46c.06.3-.14.6-.45.66l-1.98.4a.56.56 0 1 1-.22-1.1l1.98-.4c.3-.06.6.14.67.44Z",
+      fill: "currentColor"
+    })]
+  });
+};
+export { Success as S };

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

@@ -0,0 +1,2 @@
+import { FC } from "react";
+export declare const Warning: FC;

package/dist/components/panel/Warning.js

@@ -0,0 +1,14 @@
+import { j as jsx } from "../core/RiksTV.js";
+const Warning = () => {
+  return /* @__PURE__ */ jsx("svg", {
+    width: "100%",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 18 18",
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M17.6 14.94 10.59 1.55a1.5 1.5 0 0 0-2.66 0l-7 13.4a1.5 1.5 0 0 0 1.32 2.19h14.02a1.5 1.5 0 0 0 1.33-2.2ZM8.51 6.26a.75.75 0 1 1 1.5 0v4.5a.75.75 0 1 1-1.5 0v-4.5Zm.79 8.63h-.02a1.15 1.15 0 0 1-1.07-1.53 1.1 1.1 0 0 1 1.01-.72h.02a1.15 1.15 0 0 1 1.08 1.53 1.1 1.1 0 0 1-1.02.72Z",
+      fill: "currentColor"
+    })
+  });
+};
+export { Warning as W };

package/dist/components/panel/panel.scss

@@ -0,0 +1,95 @@
+@use "../core/mixin/fluid";
+@use "../core/mixin/focus";
+@use "../core/mixin/breakpoints" as break;
+
+.rds-panel {
+  --panel-info-background-color: var(--rds-heading-accent);
+  --panel-info-color: var(--rds-background-secondary);
+  --panel-warning-background-color: var(--rds-background-secondary);
+  --panel-warning-color: var(--rds-foreground-primary);
+  --panel-fluid-padding: clamp(var(--rds-spacing--16), 2vw, var(--rds-spacing--32));
+  --panel-border: none;
+  --panel-color: #fff;
+
+  padding: var(--panel-fluid-padding);
+  border-radius: var(--rds-roundness--medium);
+  border: var(--panel-border);
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  max-width: var(--rds-content-width--default);
+
+  &__heading {
+    margin: 0;
+    margin-bottom: var(--rds-spacing--8);
+    & > span {
+      color: var(--panel-color);
+    }
+  }
+
+  &__content {
+    max-width: var(--rds-readability-width);
+    & > span {
+      color: var(--panel-color);
+    }
+    &__heading {
+      display: flex;
+      align-items: baseline;
+
+      &__icon {
+        display: inline-block;
+        width: 1.125em;
+        margin-right: 0.5em;
+        color: var(--panel-color);
+      }
+    }
+  }
+
+  &__action {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rds-spacing--16);
+    margin-left: var(--rds-spacing--32);
+
+    & > button {
+      width: fit-content;
+    }
+  }
+
+  @include break.breakpoint("sm") {
+    flex-direction: column;
+    align-items: flex-start;
+
+    &__action {
+      margin-top: var(--rds-spacing--24);
+      margin-left: 0;
+    }
+  }
+
+  &--info {
+    background-color: var(--panel-info-background-color);
+    --panel-color: var(--panel-info-color);
+  }
+
+  &--warning {
+    background-color: var(--panel-warning-background-color);
+    --panel-color: var(--panel-warning-color);
+  }
+
+  // Only handled for Strim
+  &--error {
+    background-color: var(--strim-error-light);
+    --panel-color: var(--strim-fantasy-green);
+  }
+}
+
+.rds-light {
+  .rds-panel,
+  &.rds-panel {
+    --panel-info-background-color: var(--rds-heading-accent);
+    --panel-info-color: var(--rds-background-secondary);
+    --panel-warning-background-color: var(--rds-foreground-primary);
+    --panel-warning-color: var(--rds-background-secondary);
+    --panel-border: 2px solid var(--rds-foreground-tertiary);
+  }
+}

package/dist/components/progress/CircularProgress.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from "react";
+import "./circularProgress.scss";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    progressRatio: number;
+    label: string;
+    size?: "small" | "large";
+    className?: string;
+}
+export declare const calculateProgress: ({ progressRatio }: Pick<Props, "progressRatio">) => number;
+export declare const CircularProgress: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/progress/CircularProgress.js

@@ -0,0 +1,87 @@
+import { forwardRef, useState, useEffect } from "react";
+import { S as Span } from "../typography/Typography.js";
+import { a as jsxs, F as Fragment, j as jsx } from "../core/RiksTV.js";
+var circularProgress = /* @__PURE__ */ (() => ".rds-progress--circular{width:var(--progress-circle-size);height:var(--progress-circle-size);position:relative}.rds-progress--circular__outer{width:var(--progress-circle-size);height:var(--progress-circle-size);padding:var(--rds-spacing--24);border-radius:50%;display:grid;place-items:center;box-sizing:border-box;text-align:center}.rds-progress--circular #path,.rds-progress--circular #prog{fill:none;stroke-width:12px;stroke-dasharray:314.159;stroke-dashoffset:314}.rds-progress--circular #prog{stroke:url(#GradientColor);animation:rds-in var(--progress) ease-in-out forwards;animation-delay:.2s}@media (prefers-reduced-motion){.rds-progress--circular #prog{opacity:0;animation-delay:0;stroke-dashoffset:var(--calculated-progress);animation:rds-progress-reduced 125ms linear forwards}}.rds-progress--circular #path{stroke:var(--rds-background-overlay-medium);animation:rds-in-path 1s ease-in-out forwards}@media (prefers-reduced-motion){.rds-progress--circular #path{opacity:0;stroke-dashoffset:0;animation:rds-progress-reduced 125ms linear forwards}}@keyframes rds-progress-reduced{to{opacity:1}}@keyframes rds-in-path{to{stroke-dashoffset:0}}@keyframes rds-in{to{stroke-dashoffset:var(--calculated-progress)}}.rds-progress--circular svg{position:absolute;inset:0;transform:rotate(90deg)}\n")();
+const calculateProgress = ({
+  progressRatio
+}) => (1 - progressRatio) * 100 * Math.PI;
+const CircularProgress = forwardRef(({
+  progressRatio,
+  label,
+  size = "small",
+  className = "",
+  children,
+  ...rest
+}, ref) => {
+  const [calculatedProgress, setCalculatedProgress] = useState(0);
+  const [sizeInPx] = useState(size === "small" ? "160px" : "260px");
+  useEffect(() => {
+    setCalculatedProgress(calculateProgress({
+      progressRatio
+    }));
+  }, [progressRatio]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsxs("label", {
+      className: "sr-only",
+      "data-testid": "rds-progress__label",
+      children: [label, /* @__PURE__ */ jsx("progress", {
+        "data-testid": "rds-progress__progress",
+        value: progressRatio,
+        max: 1
+      })]
+    }), /* @__PURE__ */ jsxs("div", {
+      ref,
+      "data-testid": "rds-progress",
+      className: `rds-progress--circular ${className}`,
+      style: {
+        "--progress-circle-size": sizeInPx
+      },
+      ...rest,
+      children: [/* @__PURE__ */ jsx("div", {
+        className: "rds-progress--circular__outer",
+        "data-testid": "rds-progress__content",
+        children: children || /* @__PURE__ */ jsx(Span, {
+          "data-testid": "rds-progress__default-text",
+          lookLike: "title-3",
+          children: progressRatio === 1 ? "Du er i m\xE5l!" : `${progressRatio * 100} %`
+        })
+      }), /* @__PURE__ */ jsxs("svg", {
+        style: {
+          "--calculated-progress": calculatedProgress,
+          "--progress": `${progressRatio + 1}s`
+        },
+        xmlns: "http://www.w3.org/2000/svg",
+        version: "1.1",
+        width: "var(--progress-circle-size)",
+        height: "var(--progress-circle-size)",
+        viewBox: "-10 0 120 100",
+        children: [/* @__PURE__ */ jsx("defs", {
+          children: /* @__PURE__ */ jsxs("linearGradient", {
+            id: "GradientColor",
+            children: [/* @__PURE__ */ jsx("stop", {
+              offset: "0%",
+              stopColor: "var(--rds-heading-accent)"
+            }), /* @__PURE__ */ jsx("stop", {
+              offset: "100%",
+              stopColor: "var(--rds-background-card)"
+            })]
+          })
+        }), /* @__PURE__ */ jsx("circle", {
+          id: "path",
+          cx: "50",
+          cy: "50",
+          r: "50",
+          strokeLinecap: "round"
+        }), /* @__PURE__ */ jsx("circle", {
+          id: "prog",
+          cx: "50",
+          cy: "50",
+          r: "50",
+          strokeLinecap: "round"
+        })]
+      })]
+    })]
+  });
+});
+CircularProgress.displayName = "CircularProgress";
+export { CircularProgress as C };

package/dist/components/progress/Progress.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from "react";
+import "./Progress.scss";
+interface Props extends HTMLAttributes<HTMLProgressElement> {
+    label: string;
+    ratio: number;
+    checkmarkOnDone?: boolean;
+    animateIn?: boolean;
+    className?: string;
+}
+export declare const Progress: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLProgressElement>>;
+export {};

package/dist/components/progress/Progress.js

@@ -0,0 +1,42 @@
+import { forwardRef } from "react";
+import { a as jsxs, j as jsx } from "../core/RiksTV.js";
+var Progress$1 = /* @__PURE__ */ (() => '.rds-progress{--rds-progress-height: .1875rem;--rds-progress-color: var(--rds-accent-color);--rds-progress-track-color: var(--rds-foreground-overlay-medium);max-width:300px}.rds-progress--animate .rds-progress__progress{animation:move-in-progress .25s ease-in-out forwards}@media (prefers-reduced-motion){.rds-progress--animate .rds-progress__progress{animation-duration:0ms}}@keyframes move-in-progress{0%{transform:scaleX(var(--progress)) translate(-100%)}to{transform:scaleX(var(--progress)) translate(0)}}.rds-progress__track{width:100%;height:var(--rds-progress-height);background-color:var(--rds-progress-track-color);border-radius:var(--rds-roundness--default);overflow:hidden}.rds-progress__progress{width:100%;height:var(--rds-progress-height);background-color:var(--rds-progress-color);transform:scaleX(var(--progress));transform-origin:left;position:relative}.rds-progress__progress:after{content:"";position:absolute;right:calc(var(--rds-progress-height) * -2);top:0;background-color:var(--rds-progress-color);border-top-right-radius:50%;border-bottom-right-radius:50%;height:100%;width:calc(var(--rds-progress-height) * 2)}.rds-progress--done{width:1em;height:1em;background-color:var(--rds-feedback-confirm);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%)}\n')();
+const Progress = forwardRef(({
+  className = "",
+  label,
+  ratio,
+  checkmarkOnDone = false,
+  animateIn = false,
+  ...rest
+}, ref) => {
+  const progressStyle = {
+    "--progress": ratio
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "rds-progress__wrapper",
+    className: `rds-progress ${animateIn ? "rds-progress--animate" : ""} ${className}`,
+    children: [/* @__PURE__ */ jsxs("label", {
+      "data-testid": "rds-progress__label",
+      className: "sr-only",
+      children: [/* @__PURE__ */ jsx("progress", {
+        "data-testid": "rds-progress__sr",
+        max: 1,
+        value: ratio,
+        ref,
+        ...rest
+      }), label]
+    }), ratio === 1 && checkmarkOnDone && /* @__PURE__ */ jsx("div", {
+      "data-testid": "rds-progress__mark",
+      className: "rds-progress--done"
+    }), (ratio !== 1 || !checkmarkOnDone) && /* @__PURE__ */ jsx("div", {
+      className: "rds-progress__track",
+      children: /* @__PURE__ */ jsx("div", {
+        "data-testid": "rds-progress__bar",
+        style: progressStyle,
+        className: "rds-progress__progress"
+      })
+    })]
+  });
+});
+Progress.displayName = "Progress";
+export { Progress as P };

package/dist/components/progress/Progress.scss

@@ -0,0 +1,76 @@
+@use "../core/mixin/rem";
+
+.rds-progress {
+  --rds-progress-height: #{rem.convert(3px)};
+  --rds-progress-color: var(--rds-accent-color);
+  --rds-progress-track-color: var(--rds-foreground-overlay-medium);
+
+  max-width: 300px;
+
+  &--animate {
+    .rds-progress__progress {
+      animation: move-in-progress 250ms ease-in-out forwards;
+
+      @media (prefers-reduced-motion) {
+        animation-duration: 0ms;
+      }
+    }
+  }
+
+  @keyframes move-in-progress {
+    0% {
+      transform: scaleX(var(--progress)) translateX(-100%);
+    }
+    100% {
+      transform: scaleX(var(--progress)) translateX(0px);
+    }
+  }
+
+  &__track {
+    width: 100%;
+    height: var(--rds-progress-height);
+    background-color: var(--rds-progress-track-color);
+    border-radius: var(--rds-roundness--default);
+    overflow: hidden;
+  }
+
+  &__progress {
+    width: 100%;
+    height: var(--rds-progress-height);
+    background-color: var(--rds-progress-color);
+    transform: scaleX(var(--progress));
+    transform-origin: left;
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      right: calc(var(--rds-progress-height) * -2);
+      top: 0;
+      background-color: var(--rds-progress-color);
+      border-top-right-radius: 50%;
+      border-bottom-right-radius: 50%;
+      height: 100%;
+      width: calc(var(--rds-progress-height) * 2);
+    }
+  }
+
+  &--done {
+    width: 1em;
+    height: 1em;
+    background-color: var(--rds-feedback-confirm);
+
+    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%
+    );
+  }
+}

package/dist/components/progress/circularProgress.scss

@@ -0,0 +1,70 @@
+.rds-progress--circular {
+  width: var(--progress-circle-size);
+  height: var(--progress-circle-size);
+  position: relative;
+
+  &__outer {
+    width: var(--progress-circle-size);
+    height: var(--progress-circle-size);
+    padding: var(--rds-spacing--24);
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    box-sizing: border-box;
+    text-align: center;
+  }
+
+  #path,
+  #prog {
+    fill: none;
+    stroke-width: 12px;
+    stroke-dasharray: 314.159;
+    stroke-dashoffset: 314;
+  }
+
+  #prog {
+    stroke: url(#GradientColor);
+    animation: rds-in var(--progress) ease-in-out forwards;
+    animation-delay: 200ms;
+    @media (prefers-reduced-motion) {
+      opacity: 0;
+      animation-delay: 0;
+      stroke-dashoffset: var(--calculated-progress);
+      animation: rds-progress-reduced 125ms linear forwards;
+    }
+  }
+
+  #path {
+    stroke: var(--rds-background-overlay-medium);
+    animation: rds-in-path 1s ease-in-out forwards;
+    @media (prefers-reduced-motion) {
+      opacity: 0;
+      stroke-dashoffset: 0;
+      animation: rds-progress-reduced 125ms linear forwards;
+    }
+  }
+
+  @keyframes rds-progress-reduced {
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes rds-in-path {
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes rds-in {
+    100% {
+      stroke-dashoffset: var(--calculated-progress);
+    }
+  }
+
+  svg {
+    position: absolute;
+    inset: 0;
+    transform: rotate(90deg);
+  }
+}

package/dist/components/spacing/Gutter.js

@@ -0,0 +1,13 @@
+import { j as jsx } from "../core/RiksTV.js";
+const Gutter = ({
+  className = "",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx("div", {
+    className: `rds-gutter ${className}`,
+    ...rest,
+    children
+  });
+};
+export { Gutter as G };

package/dist/components/spacing/GutterPadding.js

@@ -0,0 +1,13 @@
+import { j as jsx } from "../core/RiksTV.js";
+const GutterPadding = ({
+  className = "",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx("div", {
+    className: `rds-gutter-padding ${className}`,
+    ...rest,
+    children
+  });
+};
+export { GutterPadding as G };

package/dist/{textfield → components/textfield}/TextField.d.ts

@@ -1,13 +1,14 @@
 import { DetailedHTMLProps, InputHTMLAttributes } from "react";
 import "./textfield.scss";
-declare type Props = Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">;
-export declare const TextField: import("react").ForwardRefExoticComponent<Props & {
+interface Props extends Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> {
     className?: string;
     name: string;
     label: string;
     fullWidth?: boolean;
-    lightBackground?: boolean;
+    valid?: boolean;
+    lightBackground?: boolean | "white";
     labelClass?: string;
-    error?: string | null | false;
-} & import("react").RefAttributes<HTMLInputElement>>;
+    errorMessage?: string;
+}
+export declare const TextField: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLInputElement>>;
 export {};