@rikstv/shared-components 0.8.0 → 1.1.79

package/README.md

@@ -4,9 +4,7 @@ Wrap your app with you preferred brand. The css needs to be imported manually on
 
 ```
 import { Strim, PrimaryButton, DisplayTitle } from '@rikstv/shared-components";
-import '@rikstv/shared-components/dist/core/Strim.css";
-import '@rikstv/shared-components/dist/button/Button.css";
-import '@rikstv/shared-components/dist/typography/Typography.css";
+import '@rikstv/shared-components/components/dist/style.css";
 
 const Root = () => (
     <Strim>

package/dist/{accordion → components/accordion}/Accordion.d.ts

@@ -3,8 +3,7 @@ import "./accordion.scss";
 interface Props extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     heading: ReactNode;
     initialOpen?: boolean;
-    alignChevronLeft?: boolean;
-    lightBackground?: boolean;
+    lightBackground?: boolean | "white";
 }
 export declare const Accordion: FC<Props>;
 export {};

package/dist/components/accordion/Accordion.js

@@ -0,0 +1,34 @@
+import { useRef, useEffect } from "react";
+import { C as Chevron } from "../icons/Chevron.js";
+import { a as jsxs, j as jsx } from "../core/RiksTV.js";
+var accordion = /* @__PURE__ */ (() => ".rtv{--sub-body-color--light: var(--rds-foreground-solid-soft)}.strm{--sub-body-color--light: var(--rds-button-primary-fg)}.rds-link{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;color:var(--rds-foreground-primary);transition:75ms ease color}.rds-link:visited{color:var(--rds-foreground-primary)}.rds-link:hover{text-decoration-thickness:2px;color:var(--rds-heading-accent)}.rds-link:active{text-decoration:none;text-shadow:0px 0px 1px var(--rds-foreground-primary)}.rds-link--active,.rds-link[aria-current=page]{text-shadow:0px 0px 1px var(--rds-foreground-primary)}.rds-link:focus::-moz-focus-inner{border-style:none;outline:0}.rds-link:focus button::-moz-focus-inner,.rds-link:focus [type=button]::-moz-focus-inner,.rds-link:focus [type=reset]::-moz-focus-inner,.rds-link:focus [type=submit]::-moz-focus-inner{border-style:none}.rds-link:focus input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-link:focus{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}.rds-display-title{font-family:var(--rds-font-family-lg-headlines);font-size:clamp(2.5rem,calc(1.4285714286rem + 2.9761904762vw),5rem);font-weight:400;line-height:1.2;color:var(--rds-foreground-primary)}.rds-title-1{font-family:var(--rds-font-family-lg-headlines);font-size:clamp(1.875rem,calc(1.1785714286rem + 1.9345238095vw),3.5rem);font-weight:400;line-height:1.2;color:var(--rds-foreground-primary)}.rds-title-2{font-family:var(--rds-font-family-lg-headlines);font-size:clamp(1.5rem,calc(1.0714285714rem + 1.1904761905vw),2.5rem);font-weight:400;line-height:1.2;color:var(--rds-foreground-primary)}.rds-sub-title-2{font-family:var(--rds-font-family-lg-headlines);font-size:clamp(1.375rem,calc(1.1071428571rem + .744047619vw),2rem);font-weight:400;line-height:1.2;color:var(--rds-foreground-primary)}.rds-title-3{font-family:var(--rds-font-family-m-headlines);font-size:clamp(1.25rem,calc(1.1964285714rem + .1488095238vw),1.375rem);font-weight:400;line-height:1.2;color:var(--rds-heading-accent)}.rds-title-4{font-family:var(--rds-font-family-m-headlines);font-size:clamp(1rem,calc(.9464285714rem + .1488095238vw),1.125rem);font-weight:400;line-height:1.2;color:var(--rds-foreground-primary)}.rds-lead{font-family:var(--rds-font-family-m-headlines);font-size:clamp(1.25rem,calc(1.1964285714rem + .1488095238vw),1.375rem);font-weight:400;line-height:1.5;color:var(--rds-foreground-primary)}.rds-body,.rds-span{font-family:var(--rds-font-family-body);font-size:clamp(1rem,calc(.9464285714rem + .1488095238vw),1.125rem);font-weight:400;line-height:1.5;color:var(--rds-foreground-primary)}.rds-sub-body{font-family:var(--rds-font-family-body);font-size:clamp(.875rem,calc(.8214285714rem + .1488095238vw),1rem);font-weight:400;line-height:1.5;color:var(--rds-foreground-primary)}.rds-tag{font-family:var(--rds-font-family-headlines);text-transform:uppercase;font-size:clamp(.75rem,calc(.6964285714rem + .1488095238vw),.875rem);line-height:1.2;font-weight:400;letter-spacing:.09375rem;color:var(--rds-foreground-primary)}.rds-bold,.rds-accordion-details__summary{font-family:var(--rds-font-family-headlines);font-size:clamp(1.125rem,calc(1.125rem + 0vw),1.125rem);font-weight:400;line-height:1.5;color:var(--rds-foreground-primary)}.rds-meta{font-family:var(--rds-font-family-body);font-size:clamp(.75rem,calc(.6964285714rem + .1488095238vw),.875rem);font-weight:400;line-height:1.5;color:var(--rds-foreground-overlay-heavy)}.rds-link--light,.rds-light .rds-link{color:var(--rds-background-primary)}.rds-link--light:hover,.rds-light .rds-link:hover{color:var(--rds-foreground-tertiary)}.rds-link--light:active,.rds-light .rds-link:active{text-shadow:0px 0px 1px var(--rds-background-primary)}.rds-link--light:visited,.rds-light .rds-link:visited{color:var(--rds-background-primary)}.rds-link--light--active,.rds-link--light[aria-current=page],.rds-light [aria-current=page].rds-link{text-shadow:0px 0px 1px var(--rds-background-primary)}.rds-light .rds-display-title,.rds-display-title--light{color:var(--rds-foreground-tertiary)}.rds-light .rds-title-1,.rds-title-1--light,.rds-light .rds-title-2,.rds-title-2--light,.rds-light .rds-title-3,.rds-title-3--light,.rds-light .rds-title-4,.rds-title-4--light,.rds-light .rds-subtite-2,.rds-subtite-2--light{color:var(--rds-button-primary-fg)}.rds-light .rds-body,.rds-light .rds-span,.rds-body--light{color:var(--rds-background-primary)}.rds-light .rds-sub-body,.rds-sub-body--light{color:var(--sub-body-color--light)}.rds-light .rds-tag,.rds-tag--light,.rds-light .rds-bold,.rds-light .rds-accordion-details__summary,.rds-bold--light{color:var(--rds-background-primary)}.rds-light .rds-meta,.rds-meta--light{color:var(--rds-button-primary-fg)}@keyframes details-sweep{0%{opacity:0}to{opacity:1}}.rtv{--accordion-border-color: #d9d9d9}.strm{--accordion-border-color: #99b7b9}.rds-accordion-details{--accordion-hover-bg: var(--rds-background-tertiary);--accordion-active-bg: var(--rds-background-card);--accordion-color: var(--rds-foreground-primary);--accordion-shadow: 0px 8px 18px rgba(0, 0, 0, .3);border-radius:var(--rds-roundness--default);transition:125ms ease-in-out;transition-property:box-shadow,background-color;border:1.5px solid var(--accordion-border-color)}@media (hover: hover){.rds-accordion-details[open]:hover,.rds-accordion-details:hover{background-color:var(--accordion-hover-bg);box-shadow:0 8px 18px #0000004d}}.rds-accordion-details[open]:active,.rds-accordion-details:active{background-color:var(--accordion-active-bg)}.rds-accordion-details[open]{--chevron-direction: 180deg;background-color:transparent;overflow:hidden}.rds-accordion-details[open] summary~*{animation:details-sweep .5s ease-in-out forwards}.rds-accordion-details[open] summary~*>*{--toggle-sweep-delay: 0;opacity:0;animation:details-sweep .5s ease-in-out forwards;animation-delay:var(--toggle-sweep-delay)}.rds-accordion-details:not([open]){--chevron-direction: 0;height:fit-content}@media (hover: hover){.rds-accordion-details:not([open]):hover{box-shadow:none}.rds-accordion-details:not([open]):hover .rds-accordion-details__summary{box-shadow:var(--accordion-shadow)}}.rds-accordion-details__summary{transition:125ms ease-in-out box-shadow;border-radius:var(--rds-roundness--default);background-color:transparent;color:var(--accordion-color)!important;cursor:pointer;list-style:none;user-select:none;height:fit-content;display:flex;align-items:center;align-self:center;position:relative;padding-block:clamp(9px,2vw,16px);padding-right:56px;padding-left:16px}.rds-accordion-details__summary:focus::-moz-focus-inner{border-style:none;outline:0}.rds-accordion-details__summary:focus button::-moz-focus-inner,.rds-accordion-details__summary:focus [type=button]::-moz-focus-inner,.rds-accordion-details__summary:focus [type=reset]::-moz-focus-inner,.rds-accordion-details__summary:focus [type=submit]::-moz-focus-inner{border-style:none}.rds-accordion-details__summary:focus input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-accordion-details__summary:focus{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}.rds-accordion-details__summary>svg{height:100%;transform:rotate(var(--chevron-direction));transition:transform 125ms ease-in-out;transform-origin:center;position:absolute;right:18px;top:0}.rds-accordion-details__summary>svg>path{fill:var(--accordion-color)}.rds-accordion-details__summary__content{box-sizing:border-box;display:flex;align-items:center;height:100%}.rds-accordion-details__summary::marker,.rds-accordion-details__summary::-webkit-details-marker{display:none}.rds-accordion-details__summary~*{padding-right:32px;padding-left:16px}.rds-accordion-details--light,.rds-light .rds-accordion-details{--accordion-color: var(--rds-background-tertiary);--accordion-hover-bg: #d6ffec;--accordion-active-bg: #bcfbde;--accordion-border-color: #5d8b82;--accordion-shadow: 0px 4px 8px rgba(0, 75, 80, .2)}.rds-accordion-details--white{--accordion-hover-bg: #edfef6}\n")();
+const Accordion = ({
+  initialOpen = true,
+  children,
+  heading,
+  className = "",
+  lightBackground = false,
+  ...rest
+}) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.open = initialOpen;
+    }
+  }, [initialOpen]);
+  return /* @__PURE__ */ jsxs("details", {
+    ref,
+    "data-testid": "rds-accordion",
+    className: `rds-accordion-details ${lightBackground ? "rds-accordion-details--light" : ""} ${lightBackground === "white" ? "rds-accordion-details--white" : ""} ${className}`,
+    ...rest,
+    children: [/* @__PURE__ */ jsxs("summary", {
+      "data-testid": "rds-accordion-summary",
+      className: "rds-accordion-details__summary",
+      children: [/* @__PURE__ */ jsx(Chevron, {}), /* @__PURE__ */ jsx("div", {
+        className: "rds-accordion-details__summary__content",
+        children: heading
+      })]
+    }), children]
+  });
+};
+export { Accordion as A };

package/dist/{accordion → components/accordion}/accordion.scss

@@ -10,17 +10,43 @@
   }
 }
 
+// TODO: DO THIS PROPERLY, NOT LIKE THIS
+.rtv {
+  --accordion-border-color: #d9d9d9;
+}
+
+.strm {
+  --accordion-border-color: #99b7b9;
+}
+
 .rds-accordion-details {
+  // TODO: USE COLORS FROM CORE
+  --accordion-hover-bg: var(--rds-background-tertiary);
+  --accordion-active-bg: var(--rds-background-card);
+  --accordion-color: var(--rds-foreground-primary);
+  --accordion-shadow: 0px 8px 18px rgba(0, 0, 0, 0.3);
+
   border-radius: var(--rds-roundness--default);
-  transition: 125ms ease-in-out box-shadow;
+  transition: 125ms ease-in-out;
+  transition-property: box-shadow, background-color;
+  border: 1.5px solid var(--accordion-border-color);
 
-  &:hover {
-    box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.3);
+  @media (hover: hover) {
+    &[open]:hover,
+    &:hover {
+      background-color: var(--accordion-hover-bg);
+      box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  &[open]:active,
+  &:active {
+    background-color: var(--accordion-active-bg);
   }
 
   &[open] {
     --chevron-direction: 180deg;
-    background-color: var(--rds-foreground-solid-soft);
+    background-color: transparent;
     overflow: hidden;
 
     & summary ~ * {
@@ -32,17 +58,18 @@
         animation-delay: var(--toggle-sweep-delay);
       }
     }
-    &:hover {
-      box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.3);
-    }
   }
 
   &:not([open]) {
     --chevron-direction: 0;
-    &:hover {
-      box-shadow: none;
-      .rds-accordion-details__summary {
-        box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.3);
+    height: fit-content;
+
+    @media (hover: hover) {
+      &:hover {
+        box-shadow: none;
+        .rds-accordion-details__summary {
+          box-shadow: var(--accordion-shadow);
+        }
       }
     }
   }
@@ -52,22 +79,24 @@
     @extend .rds-bold;
     transition: 125ms ease-in-out box-shadow;
     border-radius: var(--rds-roundness--default);
-    background-color: var(--rds-foreground-solid-soft);
-    color: var(--rds-foreground-primary) !important;
+    background-color: transparent;
+    color: var(--accordion-color) !important;
     cursor: pointer;
     list-style: none;
     user-select: none;
-    height: 3rem;
+    height: fit-content;
     display: flex;
     align-items: center;
     align-self: center;
     position: relative;
-    padding: 8px 32px 8px 16px;
+    padding-block: clamp(9px, 2vw, 16px);
+    padding-right: 56px;
+    padding-left: 16px;
 
     & > svg {
       height: 100%;
       & > path {
-        fill: var(--rds-foreground-primary);
+        fill: var(--accordion-color);
       }
       transform: rotate(var(--chevron-direction));
       transition: transform 125ms ease-in-out;
@@ -89,34 +118,24 @@
     }
 
     & ~ * {
-      padding: 0px 32px 16px 16px;
-    }
-  }
-
-  &--left > summary {
-    padding: 8px 32px 8px 64px;
-
-    & > svg {
-      right: initial;
-      left: 18px;
+      padding-right: 32px;
+      padding-left: 16px;
     }
   }
-
-  &--hide-default-text > summary {
-    max-width: 100%;
-    height: 100%;
-    background-color: transparent;
-    margin-bottom: 0;
-  }
 }
 
 .rds-accordion-details--light {
-  &[open] {
-    background-color: var(--rds-surface-foreground);
-  }
-  .rds-accordion-details__summary {
-    background-color: var(--rds-surface-foreground);
-  }
+  // TODO: USE COLORS FROM CORE
+  --accordion-color: var(--rds-background-tertiary);
+  --accordion-hover-bg: #d6ffec;
+  --accordion-active-bg: #bcfbde;
+  --accordion-border-color: #5d8b82;
+  --accordion-shadow: 0px 4px 8px rgba(0, 75, 80, 0.2);
+}
+
+.rds-accordion-details--white {
+  // TODO: USE COLORS FROM CORE
+  --accordion-hover-bg: #edfef6;
 }
 
 .rds-light {

package/dist/components/breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,13 @@
+import { FC, HTMLAttributes, ReactNode } from "react";
+import "./breadcrumb.scss";
+interface Props extends HTMLAttributes<HTMLElement> {
+    crumbs: Array<{
+        name: string;
+        href: string;
+    }>;
+    render: (name: string, href: string, current: boolean) => ReactNode;
+    className?: string;
+}
+export declare const Breadcrumb: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLElement>>;
+export declare const BreadcrumbCurrent: FC;
+export {};

package/dist/components/breadcrumb/Breadcrumb.js

@@ -0,0 +1,39 @@
+import { forwardRef } from "react";
+import { S as Span } from "../typography/Typography.js";
+import { j as jsx } from "../core/RiksTV.js";
+var breadcrumb = /* @__PURE__ */ (() => '.rds-breadcrumb{--rds-crumb-separator: "/"}.rds-breadcrumb__list{list-style:none;padding:0;display:flex;flex-wrap:nowrap}.rds-breadcrumb__list-item{padding-inline-end:var(--rds-spacing--24);position:relative;display:flex;flex-wrap:nowrap;white-space:nowrap}.rds-breadcrumb__list-item:after{content:var(--rds-crumb-separator);position:absolute;right:var(--rds-spacing--8)}.rds-breadcrumb__list-item:last-of-type:after{display:none}@media (max-width: 768px){.rds-breadcrumb__list-item--truncate{display:none}.rds-breadcrumb__list-item--truncate:after{display:none}.rds-breadcrumb__list-item--truncate:first-of-type{display:flex;padding-inline-end:var(--rds-spacing--48)}.rds-breadcrumb__list-item--truncate:first-of-type:after{content:var(--rds-crumb-separator) " ... " var(--rds-crumb-separator);display:initial;position:absolute;right:var(--rds-spacing--8)}.rds-breadcrumb__list-item--truncate:nth-last-child(2){display:flex}}.rds-breadcrumb__current{color:var(--rds-foreground-overlay-heavy)}\n')();
+const Breadcrumb = forwardRef(({
+  className = "",
+  crumbs,
+  render,
+  ...rest
+}, ref) => /* @__PURE__ */ jsx("nav", {
+  className: `rds-breadcrumb ${className}`,
+  ref,
+  ...rest,
+  children: /* @__PURE__ */ jsx(Span, {
+    children: /* @__PURE__ */ jsx("ol", {
+      className: "rds-breadcrumb__list",
+      children: crumbs.map(({
+        name,
+        href
+      }, idx) => {
+        const isCurrent = idx === crumbs.length - 1;
+        return /* @__PURE__ */ jsx("li", {
+          className: `rds-breadcrumb__list-item ${crumbs.length >= 4 ? "rds-breadcrumb__list-item--truncate" : ""}`,
+          "data-testid": `rds-breadcrumb-${name}`,
+          "aria-current": isCurrent ? "page" : "false",
+          children: render(name, href, isCurrent)
+        }, name);
+      })
+    })
+  })
+}));
+const BreadcrumbCurrent = ({
+  children
+}) => /* @__PURE__ */ jsx(Span, {
+  className: "rds-breadcrumb__current",
+  children
+});
+Breadcrumb.displayName = "Breadcrumb";
+export { Breadcrumb as B, BreadcrumbCurrent as a };

package/dist/components/breadcrumb/breadcrumb.scss

@@ -0,0 +1,75 @@
+@use "../core/mixin/breakpoints" as break;
+
+.rds-breadcrumb {
+  --rds-crumb-separator: "/";
+  // --rds-crumb-separator: "›";
+
+  &__list {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  &__list-item {
+    padding-inline-end: var(--rds-spacing--24);
+    position: relative;
+    display: flex;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+
+    &::after {
+      content: var(--rds-crumb-separator);
+      position: absolute;
+      right: var(--rds-spacing--8);
+    }
+
+    &:last-of-type::after {
+      display: none;
+    }
+
+    // This only occurs when more than 4 elements in crumb-path and small screen
+    // step 1   step 2    step 3    step 4
+    // visible  hidden    visible   hidden
+
+    // step 1   step 2    step 3    step 4      step 5
+    // visible  hidden    hidden    visible     hidden
+
+    // The reasoning for this is that the last is current-page, you know this, so we can hide it
+    // you're most likely to either go all the way back to the start, or back one step, so that's
+    // the ones we show
+    &--truncate {
+      @include break.breakpoint("sm") {
+        // Flip everything to be not visible
+        display: none;
+        &::after {
+          // Also remove separator, handled by first-of-type
+          display: none;
+        }
+
+        // Flip the first element back visible
+        &:first-of-type {
+          display: flex;
+          padding-inline-end: var(--rds-spacing--48);
+
+          &::after {
+            // Custom separator to indicate truncating
+            content: var(--rds-crumb-separator) " ... " var(--rds-crumb-separator);
+            display: initial;
+            position: absolute;
+            right: var(--rds-spacing--8);
+          }
+        }
+
+        // Flip second to last element to be visible
+        &:nth-last-child(2) {
+          display: flex;
+        }
+      }
+    }
+  }
+
+  &__current {
+    color: var(--rds-foreground-overlay-heavy);
+  }
+}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { DecoratedButtonProps } from "./BaseDecoratedButton";
+import "./button.scss";
+import "./arrow-button.scss";
+import "./button-shared.scss";
+interface ArrowButtonProps extends Omit<DecoratedButtonProps, "arrow"> {
+    forwards?: boolean;
+}
+export declare const PrimaryArrowButton: import("react").ForwardRefExoticComponent<ArrowButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SecondaryArrowButton: import("react").ForwardRefExoticComponent<ArrowButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TertiaryArrowButton: import("react").ForwardRefExoticComponent<ArrowButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/button/ArrowButton.js

@@ -0,0 +1,44 @@
+import { forwardRef } from "react";
+import { P as PrimaryDecoratedButton, S as SecondaryDecoratedButton, T as TertiaryDecoratedButton } from "./DecoratedButton.js";
+import { A as Arrow } from "../icons/Arrow.js";
+import "./Button.js";
+import { j as jsx } from "../core/RiksTV.js";
+var arrowButton = /* @__PURE__ */ (() => ".rds-arrow-button{--default-arrow-size: 1.125rem;--default-arrow-margin: .75rem;align-items:center}.rds-arrow-button>svg{width:100%}.rds-arrow-button .rds-button__arrow{margin:0;box-sizing:border-box;margin-inline:var(--default-arrow-margin) -6px;height:var(--default-arrow-size);width:var(--default-arrow-size)}.rds-arrow-button .rds-button__arrow>svg{width:100%}.rds-arrow-button--backwards .rds-button__arrow{margin-inline:-6px var(--default-arrow-margin)}.rds-arrow-button--backwards .rds-button__arrow>svg{transform:rotate(180deg)}.rds-arrow-button--forwards{flex-direction:row-reverse}\n")();
+const A = () => /* @__PURE__ */ jsx(Arrow, {});
+const PrimaryArrowButton = forwardRef(({
+  forwards = true,
+  className = "",
+  ...props
+}, ref) => /* @__PURE__ */ jsx(PrimaryDecoratedButton, {
+  className: `${className} ${forwards ? "rds-arrow-button--forwards" : "rds-arrow-button--backwards"}`,
+  arrow: A,
+  buttonStyle: "rds-arrow-button",
+  ref,
+  ...props
+}));
+PrimaryArrowButton.displayName = "PrimaryArrowButton";
+const SecondaryArrowButton = forwardRef(({
+  forwards = true,
+  className = "",
+  ...props
+}, ref) => /* @__PURE__ */ jsx(SecondaryDecoratedButton, {
+  className: `${className} ${forwards ? "rds-arrow-button--forwards" : "rds-arrow-button--backwards"}`,
+  arrow: A,
+  buttonStyle: "rds-arrow-button",
+  ref,
+  ...props
+}));
+SecondaryArrowButton.displayName = "SecondaryArrowButton";
+const TertiaryArrowButton = forwardRef(({
+  forwards = true,
+  className = "",
+  ...props
+}, ref) => /* @__PURE__ */ jsx(TertiaryDecoratedButton, {
+  className: `${className} ${forwards ? "rds-arrow-button--forwards" : "rds-arrow-button--backwards"}`,
+  arrow: A,
+  buttonStyle: "rds-arrow-button",
+  ref,
+  ...props
+}));
+TertiaryArrowButton.displayName = "TertiaryArrowButton";
+export { PrimaryArrowButton as P, SecondaryArrowButton as S, TertiaryArrowButton as T };

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

@@ -0,0 +1,18 @@
+import { ButtonHTMLAttributes } from "react";
+export declare type ButtonVariants = "primary" | "secondary" | "tertiary";
+export declare type ButtonBackgroundStyles = boolean | "white";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    isLoading?: boolean;
+    className?: string;
+    lightBackground?: ButtonBackgroundStyles;
+    transparent?: boolean;
+    /** @deprecated */
+    icon?: () => JSX.Element;
+    /** @deprecated */
+    iconClass?: string;
+}
+export interface BaseButtonProps extends ButtonProps {
+    buttonType: ButtonVariants;
+    buttonStyle: "rds-button" | "rds-arrow-button" | "rds-icon-button";
+}
+export declare const BaseButton: import("react").ForwardRefExoticComponent<BaseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/button/BaseButton.js

@@ -0,0 +1,42 @@
+import { forwardRef } from "react";
+import { j as jsx, a as jsxs, F as Fragment } from "../core/RiksTV.js";
+const BaseButton = forwardRef(({
+  children,
+  buttonType,
+  buttonStyle,
+  type = "button",
+  isLoading = false,
+  lightBackground = false,
+  transparent = false,
+  disabled,
+  className = "",
+  "aria-busy": ariaBusy,
+  icon: Icon,
+  iconClass = "",
+  ...rest
+}, ref) => /* @__PURE__ */ jsx("button", {
+  type,
+  ...rest,
+  ref,
+  disabled: isLoading || disabled,
+  "aria-busy": isLoading || ariaBusy,
+  className: `
+        ${buttonStyle}
+        rds-button__shared
+        rds-button__shared--${buttonType}
+        rds-button--${buttonType}
+        ${isLoading ? "rds-button--loading" : ""}
+        ${lightBackground ? "rds-light" : ""}
+        ${lightBackground === "white" ? "rds-white" : ""}
+        ${transparent ? "rds-transparent" : ""}
+        ${className}`,
+  children: /* @__PURE__ */ jsxs(Fragment, {
+    children: [Icon && /* @__PURE__ */ jsx("span", {
+      "data-testid": "rds-button__icon",
+      className: `rds-button__icon ${iconClass}`,
+      children: /* @__PURE__ */ jsx(Icon, {})
+    }), children]
+  })
+}));
+BaseButton.displayName = "BaseButton";
+export { BaseButton as B };

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { BaseButtonProps, ButtonProps } from "./BaseButton";
+export interface DecoratedButtonProps extends ButtonProps {
+    postfix?: string;
+    icon?: () => JSX.Element;
+    arrow?: () => JSX.Element;
+    iconClass?: string;
+}
+export interface BaseDecoratedButtonProps extends BaseButtonProps, DecoratedButtonProps {
+}
+export declare const BaseDecoratedButton: import("react").ForwardRefExoticComponent<BaseDecoratedButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/button/BaseDecoratedButton.js

@@ -0,0 +1,32 @@
+import { forwardRef } from "react";
+import { B as BaseButton } from "./BaseButton.js";
+import { j as jsx, a as jsxs, F as Fragment } from "../core/RiksTV.js";
+const BaseDecoratedButton = forwardRef(({
+  children,
+  buttonStyle,
+  postfix,
+  icon: Icon,
+  arrow: Arrow,
+  iconClass = "",
+  ...rest
+}, ref) => /* @__PURE__ */ jsx(BaseButton, {
+  buttonStyle,
+  ref,
+  ...rest,
+  children: /* @__PURE__ */ jsxs(Fragment, {
+    children: [Icon && /* @__PURE__ */ jsx("span", {
+      "data-testid": "rds-button__icon",
+      className: `rds-button__icon ${iconClass}`,
+      children: /* @__PURE__ */ jsx(Icon, {})
+    }), Arrow && /* @__PURE__ */ jsx("span", {
+      "data-testid": "rds-button__arrow",
+      className: `rds-button__arrow ${iconClass}`,
+      children: /* @__PURE__ */ jsx(Arrow, {})
+    }), children, !!postfix && buttonStyle !== "rds-icon-button" && /* @__PURE__ */ jsx("span", {
+      className: "rds-button__postfix",
+      children: postfix
+    })]
+  })
+}));
+BaseDecoratedButton.displayName = "BaseDecoratedButton";
+export { BaseDecoratedButton as B };

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { ButtonBackgroundStyles, ButtonVariants } from "./BaseButton";
+import "./button.scss";
+import "./button-shared.scss";
+import "./link-button.scss";
+import "./arrow-button.scss";
+interface BaseLinkButtonPropsWithElement<ElementProps> {
+    element: (props: ElementProps) => JSX.Element;
+    variant?: ButtonVariants;
+    lightBackground?: ButtonBackgroundStyles;
+    transparent?: boolean;
+    className?: string;
+    withArrow?: boolean;
+    arrowForward?: boolean;
+    iconClass?: string;
+}
+declare type Props<ElementProps> = BaseLinkButtonPropsWithElement<ElementProps> & ElementProps;
+export declare type BaseLinkButtonProps<ElementProps> = Omit<Props<ElementProps>, "element">;
+export declare const BaseLinkButton: import("react").ForwardRefExoticComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<HTMLAnchorElement>>;
+export {};

package/dist/components/button/BaseLinkButton.js

@@ -0,0 +1,44 @@
+import { forwardRef } from "react";
+import "./Button.js";
+import "./ArrowButton.js";
+import { A as Arrow } from "../icons/Arrow.js";
+import { j as jsx, a as jsxs, F as Fragment } from "../core/RiksTV.js";
+var linkButton = /* @__PURE__ */ (() => ".rds-link-button{width:fit-content}.rds-link-button>*{text-decoration:none}\n")();
+const A = () => /* @__PURE__ */ jsx(Arrow, {});
+const BaseLinkButton = forwardRef(({
+  element: Element,
+  variant = "primary",
+  className = "",
+  withArrow,
+  arrowForward,
+  iconClass = "",
+  children,
+  lightBackground,
+  transparent = false,
+  ...rest
+}, ref) => /* @__PURE__ */ jsx("div", {
+  className: `rds-link-button ${className}`,
+  children: /* @__PURE__ */ jsx(Element, {
+    className: `
+        rds-button rds-button__shared 
+        rds-button__shared--${variant} 
+        rds-button--${variant} 
+        ${lightBackground ? "rds-light" : ""} 
+        ${lightBackground === "white" ? "rds-white" : ""} 
+        ${transparent ? "rds-transparent" : ""}
+        ${withArrow ? "rds-arrow-button" : ""}
+        ${arrowForward === void 0 ? "" : arrowForward ? "rds-arrow-button--forwards" : "rds-arrow-button--backwards"}
+      `,
+    ref,
+    ...rest,
+    children: /* @__PURE__ */ jsxs(Fragment, {
+      children: [withArrow && /* @__PURE__ */ jsx("span", {
+        "data-testid": "rds-button__arrow",
+        className: `rds-button__arrow ${iconClass}`,
+        children: /* @__PURE__ */ jsx(A, {})
+      }), children]
+    })
+  })
+}));
+BaseLinkButton.displayName = "BaseLinkButton";
+export { BaseLinkButton as B };

package/dist/{button → components/button}/Button.d.ts

@@ -5,3 +5,5 @@ import "./button-shared.scss";
 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";

package/dist/components/button/Button.js

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+import { B as BaseButton } from "./BaseButton.js";
+import { j as jsx } from "../core/RiksTV.js";
+import "./LinkButton.js";
+import "./BaseLinkButton.js";
+var button = /* @__PURE__ */ (() => '.rds-arrow-button,.rds-button{--fluid-block: clamp(.65625rem, 2vw, .78125rem);--fluid-inline: clamp(1rem, 2vw, 1.5rem);padding:var(--fluid-block) var(--fluid-inline);border-radius:var(--rds-roundness--button);overflow-y:hidden;cursor:pointer;font-size:1.125rem}.rds-arrow-button__icon,.rds-button__icon{display:flex;align-items:center;align-self:center;margin-right:var(--rds-spacing--16);width:1.125rem}.rds-arrow-button__icon>svg,.rds-button__icon>svg{width:100%}.rds-arrow-button__postfix,.rds-button__postfix{position:relative;display:flex;align-items:center;margin-left:var(--rds-spacing--16);padding-left:var(--rds-spacing--16)}.rds-arrow-button__postfix:before,.rds-button__postfix:before{content:" ";position:absolute;width:1px;background-color:currentColor;height:220%;left:0}.rds-arrow-button--loading:disabled,.rds-button--loading:disabled{cursor:wait!important;position:relative;overflow:hidden}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rds-arrow-button--loading:disabled:before,.rds-button--loading:disabled:before{content:"";position:absolute;inset:0;background-color:var(--rds-background-overlay-medium)}.rds-arrow-button--loading:disabled:after,.rds-button--loading:disabled:after{--button-spinner-size: 24px;--button-spinner-width: 3px;--calculated-spinner-size: calc( calc(var(--button-spinner-size) + var(--button-spinner-width) + var(--button-spinner-width)) / 2 );content:"";position:absolute;left:calc(50% - var(--calculated-spinner-size));top:calc(50% - var(--calculated-spinner-size));height:var(--button-spinner-size);width:var(--button-spinner-size);background-color:transparent;border-top:var(--button-spinner-width) solid var(--rds-accent-color-dark);border-left:var(--button-spinner-width) solid var(--rds-accent-color-dark);border-right:var(--button-spinner-width) solid var(--rds-accent-color-dark);border-bottom:var(--button-spinner-width) solid transparent;border-radius:50px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:spin;animation-timing-function:linear}.rds-arrow-button--loading:disabled:hover,.rds-button--loading:disabled:hover{box-shadow:none}\n')();
+var buttonShared = /* @__PURE__ */ (() => ".rds-button__shared{--common-button--primary-color: var(--rds-button-primary-fg);--common-button--primary-bg: var(--rds-accent-color);--common-button--primary-hover-bg: var(--rds-accent-hover);--common-button--primary-pressed-bg: var(--rds-accent-color);--common-button--secondary-border-color: var(--rds-foreground-primary);--common-button--secondary-color: var(--rds-foreground-primary);--common-button--secondary-bg: var(--rds-background-primary);--common-button--secondary-hover-color: var(--rds-background-primary);--common-button--secondary-hover-bg: var(--rds-foreground-primary);--common-button--secondary-pressed-color: var(--rds-button-secondary-pressed-fg);--common-button--secondary-pressed-bg: var(--rds-button-secondary-pressed-bg);--common-button--tertiary-bg: var(--rds-button-tertirary-bg);--common-button--tertiary-color: var(--rds-foreground-primary);--common-button--tertiary-hover-bg: var(--rds-button-tertiary-hover-bg);--common-button--tertiary-hover-color: var(--rds-foreground-primary);--common-button--tertiary-pressed-bg: var(--rds-background-secondary);--common-button--tertiary-pressed-color: var(--rds-foreground-primary);--common-button--disabled-bg: var(--rds-foreground-secondary);--common-button--disabled-color: var(--rds-foreground-tertiary);border:none;width:auto;background:transparent;line-height:normal;-webkit-appearance:none;display:flex;transition:125ms ease-in-out;transition-property:color,box-shadow,background-color;font-family:var(--rds-font-family-m-headlines)}.rds-button__shared::-moz-focus-inner{border:0;padding:0}.rds-button__shared--primary{color:var(--common-button--primary-color);background-color:var(--common-button--primary-bg)}.rds-button__shared--primary:hover{background-color:var(--common-button--primary-hover-bg)}.rds-button__shared--primary:active{box-shadow:none;background-color:var(--common-button--primary-pressed-bg)}.rds-button__shared--secondary{background-color:var(--common-button--secondary-bg);box-shadow:inset 0 0 0 2px var(--common-button--secondary-border-color);color:var(--common-button--secondary-color)}.rds-button__shared--secondary:hover{background-color:var(--common-button--secondary-hover-bg);color:var(--common-button--secondary-hover-color)}.rds-button__shared--secondary:active{background-color:var(--common-button--secondary-pressed-bg);color:var(--common-button--secondary-pressed-color);border-color:var(--common-button--secondary-pressed-bg)}.rds-button__shared--tertiary{background-color:var(--common-button--tertiary-bg);color:var(--common-button--tertiary-color)}.rds-button__shared--tertiary:hover{background-color:var(--common-button--tertiary-hover-bg);color:var(--common-button--tertiary-hover-color)}.rds-button__shared--tertiary:active{background-color:var(--common-button--tertiary-pressed-bg);color:var(--common-button--tertiary-pressed-color)}.rds-button__shared:disabled{background-color:var(--common-button--disabled-bg);color:var(--common-button--disabled-color);box-shadow:none;cursor:not-allowed;border:none}.rds-button__shared:hover{box-shadow:var(--rds-box-shadow--default)}.rds-button__shared:active{box-shadow:none}.rds-button__shared:focus::-moz-focus-inner{border-style:none;outline:0}.rds-button__shared:focus button::-moz-focus-inner,.rds-button__shared:focus [type=button]::-moz-focus-inner,.rds-button__shared:focus [type=reset]::-moz-focus-inner,.rds-button__shared:focus [type=submit]::-moz-focus-inner{border-style:none}.rds-button__shared:focus input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-button__shared:focus{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}.rds-light .rds-button__shared--primary,.rds-light.rds-button__shared--primary{--common-button--primary-color: var(--rds-foreground-primary);--common-button--primary-bg: var(--rds-button-primary-fg)}.rds-light .rds-button__shared--primary:hover,.rds-light.rds-button__shared--primary:hover{--common-button--primary-hover-bg: var(--rds-foreground-tertiary)}.rds-light .rds-button__shared--primary:active,.rds-light.rds-button__shared--primary:active{box-shadow:none;--common-button--primary-pressed-bg: var(--rds-background-primary)}.rds-light .rds-button__shared--primary:disabled,.rds-light.rds-button__shared--primary:disabled{--common-button--disabled-color: var(--rds-button-tertiary-hover-bg)}.rds-light .rds-button__shared--secondary,.rds-light.rds-button__shared--secondary{--common-button--secondary-color: var(--rds-button-tertiary-hover-bg);--common-button--secondary-border-color: var(--rds-button-tertiary-hover-bg);--common-button--secondary-bg: var(--surface-background)}.rds-light .rds-button__shared--secondary:hover,.rds-light.rds-button__shared--secondary:hover{--common-button--secondary-hover-bg: var(--rds-button-primary-fg);--common-button--secondary-hover-color: var(--rds-foreground-primary)}.rds-light .rds-button__shared--secondary:active,.rds-light.rds-button__shared--secondary:active{--common-button--secondary-pressed-color: var(--rds-foreground-primary);--common-button--secondary-pressed-bg: var(--rds-button-primary-fg)}.rds-light .rds-button__shared--secondary:disabled,.rds-light.rds-button__shared--secondary:disabled{--common-button--disabled-color: var(--rds-button-primary-fg)}.rds-light.rds-white.rds-button__shared--secondary{--common-button--secondary-bg: var(--rds-foreground-primary)}.rds-transparent.rds-button__shared--secondary{--common-button--secondary-bg: transparent}\n")();
+const PrimaryButton = forwardRef((props, ref) => /* @__PURE__ */ jsx(BaseButton, {
+  buttonStyle: "rds-button",
+  buttonType: "primary",
+  ref,
+  ...props
+}));
+PrimaryButton.displayName = "PrimaryButton";
+const SecondaryButton = forwardRef((props, ref) => /* @__PURE__ */ jsx(BaseButton, {
+  buttonStyle: "rds-button",
+  buttonType: "secondary",
+  ref,
+  ...props
+}));
+SecondaryButton.displayName = "SecondaryButton";
+const TertiaryButton = forwardRef((props, ref) => /* @__PURE__ */ jsx(BaseButton, {
+  buttonStyle: "rds-button",
+  buttonType: "tertiary",
+  ref,
+  ...props
+}));
+TertiaryButton.displayName = "TertiaryButton";
+export { PrimaryButton as P, SecondaryButton as S, TertiaryButton as T };

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BaseDecoratedButtonProps } from "./BaseDecoratedButton";
+import "./button.scss";
+import "./button-shared.scss";
+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>>;