@rikstv/shared-components 0.6.2 → 0.6.6

package/dist/core/Strim.js

@@ -1 +1,10 @@
-import{C as r}from"./Core.js";import{j as s}from"./RiksTV.js";const o=({children:o})=>s(r,{brand:"strm",children:o});export{o as S};
+import { C as Core } from "./Core.js";
+import { j as jsx } from "./RiksTV.js";
+var strm = "";
+const StrimProvider = ({
+  children
+}) => /* @__PURE__ */ jsx(Core, {
+  brand: "strm",
+  children
+});
+export { StrimProvider as S };

package/dist/core/rtv.scss

@@ -1,4 +1,4 @@
-@use './core';
+@use "./core";
 
 .rtv {
   --rds-button-primary-fg: #fff;
@@ -25,6 +25,10 @@
   --rds-foreground-overlay-medium: rgba(255, 255, 255, 0.3);
   --rds-foreground-overlay-heavy: rgba(255, 255, 255, 0.7);
 
+  --rds-foreground-solid-soft: #3c3c3c;
+
+  --rds-surface-foreground: #434343;
+
   --rds-background-overlay-soft: rgba(0, 0, 0, 0.1);
   --rds-background-overlay-medium: rgba(0, 0, 0, 0.5);
   --rds-background-overlay-heavy: rgba(0, 0, 0, 0.85);

package/dist/core/strm.scss

@@ -1,13 +1,9 @@
-@use './core';
+@use "./core";
 
 .strm {
   --stand-up-green: #49f5a4;
   --surface-background: #edfef6;
-  --rds-button-primary-fg: #004b50;
-  --rds-button-secondary-pressed-fg: #ffffff;
-  --rds-button-secondary-pressed-bg: #001d1d;
-  --rds-button-tertirary-bg: #193f3f;
-  --rds-button-tertiary-hover-bg: #004b50;
+
   --rds-accent-color: #faed6f;
   --rds-accent-color-mid: #f7e426;
   --rds-accent-color-dark: #f7e426;
@@ -27,6 +23,10 @@
   --rds-foreground-overlay-medium: rgba(255, 255, 255, 0.3);
   --rds-foreground-overlay-heavy: rgba(255, 255, 255, 0.7);
 
+  --rds-foreground-solid-soft: #1a4040;
+
+  --rds-surface-foreground: #004b50;
+
   --rds-background-overlay-soft: rgba(0, 0, 0, 0.1);
   --rds-background-overlay-medium: rgba(0, 0, 0, 0.5);
   --rds-background-overlay-heavy: rgba(0, 0, 0, 0.85);
@@ -36,6 +36,12 @@
   --rds-feedback-confirm: #4cbb81;
   --rds-feedback-error: #e01c17;
 
+  --rds-button-primary-fg: var(--rds-surface-foreground);
+  --rds-button-secondary-pressed-fg: #ffffff;
+  --rds-button-secondary-pressed-bg: #001d1d;
+  --rds-button-tertirary-bg: #193f3f;
+  --rds-button-tertiary-hover-bg: var(--rds-surface-foreground);
+
   --rds-roundness--default: 12px;
   --rds-roundness--button: 12px;
   --rds-roundness--round: 50%;

package/dist/icons/Chevron.d.ts

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

package/dist/icons/Chevron.js

@@ -0,0 +1,16 @@
+import { j as jsx } from "../core/RiksTV.js";
+const Chevron = () => /* @__PURE__ */ jsx("svg", {
+  "aria-label": "Pil",
+  width: "24",
+  height: "25",
+  viewBox: "0 0 24 25",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /* @__PURE__ */ jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.00962 7.91897C4.64323 7.53475 4.0374 7.52589 3.66026 7.89988C3.2872 8.26982 3.27911 8.87487 3.64154 9.25495L10.9543 16.9237C11.0883 17.0644 11.2493 17.1779 11.429 17.256C11.6089 17.3342 11.8031 17.375 12 17.375C12.1969 17.375 12.3911 17.3342 12.571 17.256C12.7508 17.1778 12.9121 17.0639 13.046 16.9234L20.3585 9.25495C20.7209 8.87486 20.7128 8.26982 20.3397 7.89988C19.9626 7.52589 19.3568 7.53475 18.9904 7.91897L12 15.2496L5.00962 7.91897Z",
+    fill: "white"
+  })
+});
+export { Chevron as C };

package/dist/icons/heartToggle.scss

@@ -0,0 +1,29 @@
+@keyframes rds-heart-beat {
+  10% {
+    transform: scale(0.95);
+  }
+  20% {
+    transform: scale(1.15);
+  }
+  30% {
+    transform: scale(0.95);
+  }
+  40% {
+    transform: scale(1.15);
+  }
+  50% {
+    transform: scale(0.95);
+  }
+  60% {
+    transform: scale(1);
+  }
+}
+
+.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;
+}

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 export { RiksTVProvider } from "./core/RiksTV";
 export { StrimProvider } from "./core/Strim";
 export { LightMode } from "./core/LightMode";
+export { Accordion } from "./accordion/Accordion";
 export { PrimaryButton, SecondaryButton, TertiaryButton } from "./button/Button";
 export { PrimaryIconButton, SecondaryIconButton, TertiaryIconButton } from "./button/IconButton";
+export { ToggleButton } from "./toggleButton/ToggleButton";
 export { RadioToggleInput } from "./toggle/RadioToggle";
 export { FieldSet } from "./toggle/FieldSet";
 export { DisplayTitle, H1, H2, H3, H4, Body, Bold, SubBody, Tag, Meta } from "./typography/Typography";

package/dist/shared-components.es.js

@@ -1 +1,14 @@
-export{R as RiksTVProvider}from"./core/RiksTV.js";export{S as StrimProvider}from"./core/Strim.js";export{L as LightMode}from"./core/LightMode.js";export{P as PrimaryButton,S as SecondaryButton,T as TertiaryButton}from"./button/Button.js";export{P as PrimaryIconButton,S as SecondaryIconButton,T as TertiaryIconButton}from"./button/IconButton.js";export{a as RadioToggleInput}from"./toggle/RadioToggle.js";export{F as FieldSet}from"./toggle/FieldSet.js";export{B as Body,d as Bold,D as DisplayTitle,H as H1,a as H2,b as H3,c as H4,M as Meta,S as SubBody,T as Tag}from"./typography/Typography.js";import"react";import"./core/Core.js";import"./button/BaseButton.js";
+export { R as RiksTVProvider } from "./core/RiksTV.js";
+export { S as StrimProvider } from "./core/Strim.js";
+export { L as LightMode } from "./core/LightMode.js";
+export { A as Accordion } from "./accordion/Accordion.js";
+export { P as PrimaryButton, S as SecondaryButton, T as TertiaryButton } from "./button/Button.js";
+export { P as PrimaryIconButton, S as SecondaryIconButton, T as TertiaryIconButton } from "./button/IconButton.js";
+export { T as ToggleButton } from "./toggleButton/ToggleButton.js";
+export { a as RadioToggleInput } from "./toggle/RadioToggle.js";
+export { F as FieldSet } from "./toggle/FieldSet.js";
+export { B as Body, d as Bold, D as DisplayTitle, H as H1, a as H2, b as H3, c as H4, M as Meta, S as SubBody, T as Tag } from "./typography/Typography.js";
+import "react";
+import "./core/Core.js";
+import "./icons/Chevron.js";
+import "./button/BaseButton.js";

package/dist/toggle/FieldSet.js

@@ -1 +1,66 @@
-var e=Object.defineProperty,r=Object.defineProperties,a=Object.getOwnPropertyDescriptors,l=Object.getOwnPropertySymbols,t=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,s=(r,a,l)=>a in r?e(r,a,{enumerable:!0,configurable:!0,writable:!0,value:l}):r[a]=l,i=(e,r)=>{for(var a in r||(r={}))t.call(r,a)&&s(e,a,r[a]);if(l)for(var a of l(r))o.call(r,a)&&s(e,a,r[a]);return e};import{forwardRef as n}from"react";import{R as d}from"./RadioToggle.js";import{j as c,a as f}from"../core/RiksTV.js";const m=n(((e,s)=>{var n,m,p=e,{legend:b,children:g,name:O,className:v="",showLegend:y=!1}=p,j=((e,r)=>{var a={};for(var s in e)t.call(e,s)&&r.indexOf(s)<0&&(a[s]=e[s]);if(null!=e&&l)for(var s of l(e))r.indexOf(s)<0&&o.call(e,s)&&(a[s]=e[s]);return a})(p,["legend","children","name","className","showLegend"]);return c(d.Provider,{value:{radioName:O},children:f("fieldset",(n=i({"data-testid":"fieldset"},j),m={className:`rds-field-set ${v}`,ref:s,children:[c("legend",{className:"rds-field-set__legend "+(y?"":"sr-only"),children:b}),g]},r(n,a(m))))})}));m.displayName="FieldSet";export{m as F};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { forwardRef } from "react";
+import { R as RadioContext } from "./RadioToggle.js";
+import { j as jsx, a as jsxs } from "../core/RiksTV.js";
+const FieldSet = forwardRef((_a, ref) => {
+  var _b = _a, {
+    legend,
+    children,
+    name,
+    className = "",
+    showLegend = false
+  } = _b, rest = __objRest(_b, [
+    "legend",
+    "children",
+    "name",
+    "className",
+    "showLegend"
+  ]);
+  return /* @__PURE__ */ jsx(RadioContext.Provider, {
+    value: {
+      radioName: name
+    },
+    children: /* @__PURE__ */ jsxs("fieldset", __spreadProps(__spreadValues({
+      "data-testid": "fieldset"
+    }, rest), {
+      className: `rds-field-set ${className}`,
+      ref,
+      children: [/* @__PURE__ */ jsx("legend", {
+        className: `rds-field-set__legend ${showLegend ? "" : "sr-only"}`,
+        children: legend
+      }), children]
+    }))
+  });
+});
+FieldSet.displayName = "FieldSet";
+export { FieldSet as F };

package/dist/toggle/RadioToggle.css

@@ -1 +1 @@
-.rds-field-set{border:none;margin:0;padding:0;display:flex}.rds-field-set__legend{margin-bottom:var(--rds-spacing--8)}.rds-radio-toggle{padding:0;background-color:var(--rds-foreground-overlay-soft);color:#fff;margin:0 var(--rds-spacing--8);display:block;max-width:25ch;min-width:7ch;overflow:hidden;border-radius:var(--rds-roundness--button)}.rds-radio-toggle:hover{background-color:var(--rds-background-tertiary)}.rds-radio-toggle:active{background-color:var(--rds-background-overlay-soft);color:#fff}.rds-radio-toggle__label{width:100%;display:grid;place-items:center;transition:125ms ease background-color;padding:.78125rem var(--rds-spacing--24);box-sizing:border-box;user-select:none}.rds-radio-toggle__input{position:absolute;opacity:0}.rds-radio-toggle__input:checked+.rds-radio-toggle__label{background-color:var(--rds-foreground-tertiary)}.rds-radio-toggle__input:active+.rds-radio-toggle__label{background-color:var(--rds-foreground-overlay-soft)}.rds-radio-toggle:focus::-moz-focus-inner{border-style:none;outline:0}.rds-radio-toggle:focus button::-moz-focus-inner,.rds-radio-toggle:focus [type=button]::-moz-focus-inner,.rds-radio-toggle:focus [type=reset]::-moz-focus-inner,.rds-radio-toggle:focus [type=submit]::-moz-focus-inner{border-style:none}.rds-radio-toggle:focus input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-radio-toggle:focus{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}.rds-radio-toggle:focus-within::-moz-focus-inner{border-style:none;outline:0}.rds-radio-toggle:focus-within button::-moz-focus-inner,.rds-radio-toggle:focus-within [type=button]::-moz-focus-inner,.rds-radio-toggle:focus-within [type=reset]::-moz-focus-inner,.rds-radio-toggle:focus-within [type=submit]::-moz-focus-inner{border-style:none}.rds-radio-toggle:focus-within input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-radio-toggle:focus-within{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}
+.rds-button__shared,.rds-radio-toggle{--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-tertiary);--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,.rds-radio-toggle::-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);border:2px solid 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,.rds-radio-toggle{background-color:var(--common-button--tertiary-bg);color:var(--common-button--tertiary-color)}.rds-button__shared--tertiary:hover,.rds-radio-toggle:hover{background-color:var(--common-button--tertiary-hover-bg);color:var(--common-button--tertiary-hover-color)}.rds-button__shared--tertiary:active,.rds-radio-toggle:active{background-color:var(--common-button--tertiary-pressed-bg);color:var(--common-button--tertiary-pressed-color)}.rds-button__shared:disabled,.rds-radio-toggle: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,.rds-radio-toggle:hover{box-shadow:var(--rds-box-shadow--default)}.rds-button__shared:active,.rds-radio-toggle:active{box-shadow:none}.rds-button__shared:focus::-moz-focus-inner,.rds-radio-toggle:focus::-moz-focus-inner{border-style:none;outline:0}.rds-button__shared:focus button::-moz-focus-inner,.rds-radio-toggle:focus button::-moz-focus-inner,.rds-button__shared:focus [type=button]::-moz-focus-inner,.rds-radio-toggle:focus [type=button]::-moz-focus-inner,.rds-button__shared:focus [type=reset]::-moz-focus-inner,.rds-radio-toggle:focus [type=reset]::-moz-focus-inner,.rds-button__shared:focus [type=submit]::-moz-focus-inner,.rds-radio-toggle:focus [type=submit]::-moz-focus-inner{border-style:none}.rds-button__shared:focus input[type=button]::-moz-focus-inner,.rds-radio-toggle:focus input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-button__shared:focus,html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-radio-toggle:focus{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}.rds-button,.rds-radio-toggle{padding:.78125rem var(--rds-spacing--32);border-radius:var(--rds-roundness--button);overflow-y:hidden;cursor:pointer;font-size:1.125rem}.rds-button__icon{display:flex;align-items:center;align-self:center;margin-right:var(--rds-spacing--16);width:1.125rem}.rds-button__icon>svg{width:100%}.rds-button__postfix{position:relative;display:flex;align-items:center;margin-left:var(--rds-spacing--16);padding-left:var(--rds-spacing--16)}.rds-button__postfix:before{content:" ";position:absolute;width:1px;background-color:currentColor;height:200%;left:0}.rds-button--loading:disabled{cursor:wait!important}.rds-button--loading:disabled:hover{box-shadow:none}.rds-field-set{border:none;margin:0;padding:0;display:flex}.rds-field-set__legend{margin-bottom:var(--rds-spacing--8)}.rds-radio-toggle{padding:0;background-color:var(--rds-foreground-overlay-soft);color:#fff;margin:0 var(--rds-spacing--8);display:block;max-width:25ch;min-width:7ch;overflow:hidden;border-radius:var(--rds-roundness--button)}.rds-radio-toggle:hover{background-color:var(--rds-background-tertiary)}.rds-radio-toggle:active{background-color:var(--rds-background-overlay-soft);color:#fff}.rds-radio-toggle__label{width:100%;display:grid;place-items:center;transition:125ms ease background-color;padding:.78125rem var(--rds-spacing--24);box-sizing:border-box;user-select:none}.rds-radio-toggle__input{position:absolute;opacity:0}.rds-radio-toggle__input:checked+.rds-radio-toggle__label{background-color:var(--rds-foreground-tertiary)}.rds-radio-toggle__input:active+.rds-radio-toggle__label{background-color:var(--rds-foreground-overlay-soft)}.rds-radio-toggle:focus::-moz-focus-inner{border-style:none;outline:0}.rds-radio-toggle:focus button::-moz-focus-inner,.rds-radio-toggle:focus [type=button]::-moz-focus-inner,.rds-radio-toggle:focus [type=reset]::-moz-focus-inner,.rds-radio-toggle:focus [type=submit]::-moz-focus-inner{border-style:none}.rds-radio-toggle:focus input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-radio-toggle:focus{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}.rds-radio-toggle:focus-within::-moz-focus-inner{border-style:none;outline:0}.rds-radio-toggle:focus-within button::-moz-focus-inner,.rds-radio-toggle:focus-within [type=button]::-moz-focus-inner,.rds-radio-toggle:focus-within [type=reset]::-moz-focus-inner,.rds-radio-toggle:focus-within [type=submit]::-moz-focus-inner{border-style:none}.rds-radio-toggle:focus-within input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-radio-toggle:focus-within{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}

package/dist/toggle/RadioToggle.js

@@ -1 +1,65 @@
-var r=Object.defineProperty,e=Object.defineProperties,a=Object.getOwnPropertyDescriptors,t=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,s=(e,a,t)=>a in e?r(e,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[a]=t,n=(r,e)=>{for(var a in e||(e={}))o.call(e,a)&&s(r,a,e[a]);if(t)for(var a of t(e))l.call(e,a)&&s(r,a,e[a]);return r};import{createContext as i,forwardRef as c,useContext as p}from"react";import"../button/Button.js";import{a as d,j as m}from"../core/RiksTV.js";const b=i({radioName:""});const f=c(((r,s)=>{var i=r,{label:c,name:f,className:u=""}=i,g=((r,e)=>{var a={};for(var s in r)o.call(r,s)&&e.indexOf(s)<0&&(a[s]=r[s]);if(null!=r&&t)for(var s of t(r))e.indexOf(s)<0&&l.call(r,s)&&(a[s]=r[s]);return a})(i,["label","name","className"]);const{radioName:y}=p(b);return d("label",{className:`rds-radio-toggle rds-button rds-button__shared rds-button__shared--primary  ${u}`,children:[m("input",(O=n({className:"rds-radio-toggle__input"},g),j={ref:s,type:"radio",name:y||f},e(O,a(j)))),m("span",{className:"rds-radio-toggle__label",children:c})]});var O,j}));f.displayName="RadioToggleInput";export{b as R,f as a};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { createContext, forwardRef, useContext } from "react";
+import "../button/Button.js";
+import { a as jsxs, j as jsx } from "../core/RiksTV.js";
+const RadioContext = createContext({ radioName: "" });
+var radioToggle = "";
+const RadioToggleInput = forwardRef((_a, ref) => {
+  var _b = _a, {
+    label,
+    name,
+    className = ""
+  } = _b, rest = __objRest(_b, [
+    "label",
+    "name",
+    "className"
+  ]);
+  const {
+    radioName
+  } = useContext(RadioContext);
+  return /* @__PURE__ */ jsxs("label", {
+    className: `rds-radio-toggle ${className}`,
+    children: [/* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({
+      className: "rds-radio-toggle__input"
+    }, rest), {
+      ref,
+      type: "radio",
+      name: radioName || name
+    })), /* @__PURE__ */ jsx("span", {
+      className: "rds-radio-toggle__label",
+      children: label
+    })]
+  });
+});
+RadioToggleInput.displayName = "RadioToggleInput";
+export { RadioContext as R, RadioToggleInput as a };

package/dist/toggle/radioToggle.scss

@@ -1,5 +1,7 @@
-@use '../core/mixin/focus' as mix;
-@use '../core/mixin/rem';
+@use "../core/mixin/focus" as mix;
+@use "../core/mixin/rem";
+@use "../button/button-shared";
+@use "../button/button";
 
 .rds-field-set {
   border: none;
@@ -12,6 +14,9 @@
 }
 
 .rds-radio-toggle {
+  @extend .rds-button__shared;
+  @extend .rds-button;
+  @extend .rds-button__shared--tertiary;
   // button reset
   padding: 0;
   background-color: var(--rds-foreground-overlay-soft);

package/dist/toggleButton/ToggleButton.css

@@ -0,0 +1 @@
+.rds-button__shared,.rds-toggle-button{--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-tertiary);--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,.rds-toggle-button::-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);border:2px solid 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,.rds-toggle-button{background-color:var(--common-button--tertiary-bg);color:var(--common-button--tertiary-color)}.rds-button__shared--tertiary:hover,.rds-toggle-button:hover{background-color:var(--common-button--tertiary-hover-bg);color:var(--common-button--tertiary-hover-color)}.rds-button__shared--tertiary:active,.rds-toggle-button:active{background-color:var(--common-button--tertiary-pressed-bg);color:var(--common-button--tertiary-pressed-color)}.rds-button__shared:disabled,.rds-toggle-button: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,.rds-toggle-button:hover{box-shadow:var(--rds-box-shadow--default)}.rds-button__shared:active,.rds-toggle-button:active{box-shadow:none}.rds-button__shared:focus::-moz-focus-inner,.rds-toggle-button:focus::-moz-focus-inner{border-style:none;outline:0}.rds-button__shared:focus button::-moz-focus-inner,.rds-toggle-button:focus button::-moz-focus-inner,.rds-button__shared:focus [type=button]::-moz-focus-inner,.rds-toggle-button:focus [type=button]::-moz-focus-inner,.rds-button__shared:focus [type=reset]::-moz-focus-inner,.rds-toggle-button:focus [type=reset]::-moz-focus-inner,.rds-button__shared:focus [type=submit]::-moz-focus-inner,.rds-toggle-button:focus [type=submit]::-moz-focus-inner{border-style:none}.rds-button__shared:focus input[type=button]::-moz-focus-inner,.rds-toggle-button:focus input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-button__shared:focus,html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-toggle-button:focus{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}.rds-button,.rds-toggle-button{padding:.78125rem var(--rds-spacing--32);border-radius:var(--rds-roundness--button);overflow-y:hidden;cursor:pointer;font-size:1.125rem}.rds-button__icon,.rds-toggle-button__rounded{display:flex;align-items:center;align-self:center;margin-right:var(--rds-spacing--16);width:1.125rem}.rds-button__icon>svg,.rds-toggle-button__rounded>svg{width:100%}.rds-button__postfix{position:relative;display:flex;align-items:center;margin-left:var(--rds-spacing--16);padding-left:var(--rds-spacing--16)}.rds-button__postfix:before{content:" ";position:absolute;width:1px;background-color:currentColor;height:200%;left:0}.rds-button--loading:disabled{cursor:wait!important}.rds-button--loading:disabled:hover{box-shadow:none}.rds-icon-button,.rds-toggle-button--round{--default-icon-size: 3rem;--default-icon-margin: .75rem;border-radius:50%;max-height:var(--default-icon-size);max-width:var(--default-icon-size);display:flex;justify-content:center;align-items:center;box-sizing:border-box;margin:0;padding:0}.rds-icon-button .rds-button__icon,.rds-toggle-button--round .rds-button__icon,.rds-icon-button .rds-toggle-button__rounded,.rds-toggle-button--round .rds-toggle-button__rounded{margin:0;box-sizing:border-box;margin:var(--default-icon-margin);height:var(--default-icon-size);width:var(--default-icon-size)}.rds-icon-button .rds-button__icon>svg,.rds-toggle-button--round .rds-button__icon>svg,.rds-icon-button .rds-toggle-button__rounded>svg,.rds-toggle-button--round .rds-toggle-button__rounded>svg{width:100%}.rds-toggle-button{display:inline-block;user-select:none}.rds-toggle-button__input{opacity:0;position:absolute}.rds-toggle-button__content{display:flex;align-items:center}.rds-toggle-button__input:checked+.rds-toggle-button{background-color:var(--rds-foreground-tertiary)}.rds-toggle-button__input:checked+.rds-toggle-button:active{background-color:var(--rds-foreground-overlay-medium)}.rds-toggle-button--round .rds-toggle-button__rounded{margin:0}

package/dist/toggleButton/ToggleButton.d.ts

@@ -0,0 +1,17 @@
+import { FC, InputHTMLAttributes } from "react";
+import "./toggleButton.scss";
+interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    children: string;
+    showLabel?: boolean;
+    icons?: {
+        checkedIcon?: () => JSX.Element;
+        uncheckedIcon?: () => JSX.Element;
+    } | {
+        toggleIcon?: FC<{
+            checked: boolean;
+        }>;
+    };
+    iconClass?: string;
+}
+export declare const ToggleButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/toggleButton/ToggleButton.js

@@ -0,0 +1,106 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { forwardRef, useRef, useState } from "react";
+import { a as jsxs, j as jsx } from "../core/RiksTV.js";
+const generateId = (id) => {
+  if (id) {
+    return id;
+  }
+  return `${new Date().valueOf()}`;
+};
+var toggleButton = "";
+const ToggleButton = forwardRef((_a, ref) => {
+  var _b = _a, {
+    defaultChecked,
+    showLabel = true,
+    icons,
+    iconClass = "",
+    children,
+    onChange,
+    id,
+    className = ""
+  } = _b, rest = __objRest(_b, [
+    "defaultChecked",
+    "showLabel",
+    "icons",
+    "iconClass",
+    "children",
+    "onChange",
+    "id",
+    "className"
+  ]);
+  const internalRef = useRef(null);
+  const [internalId] = useState(generateId(id));
+  const [isChecked, setIsChecked] = useState(!!defaultChecked);
+  const CheckedIcon = icons && "checkedIcon" in icons ? icons.checkedIcon : null;
+  const UncheckedIcon = icons && "uncheckedIcon" in icons ? icons.uncheckedIcon : null;
+  const ToggleIcon = icons && "toggleIcon" in icons ? icons.toggleIcon : null;
+  const inputRef = ref || internalRef;
+  const handleChange = (e) => {
+    var _a2;
+    if (typeof onChange === "function") {
+      onChange(e);
+    }
+    if (typeof inputRef !== "function") {
+      setIsChecked(!!((_a2 = inputRef.current) == null ? void 0 : _a2.checked));
+    } else {
+      setIsChecked(!isChecked);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    className,
+    children: [/* @__PURE__ */ jsx("input", __spreadValues({
+      id: internalId,
+      ref: inputRef,
+      type: "checkbox",
+      className: "rds-toggle-button__input",
+      onChange: handleChange,
+      defaultChecked
+    }, rest)), /* @__PURE__ */ jsx("label", {
+      "data-testid": "toggle-button__label",
+      className: `rds-toggle-button ${showLabel ? "" : "rds-toggle-button--round"}`,
+      htmlFor: internalId,
+      children: /* @__PURE__ */ jsxs("span", {
+        className: "rds-toggle-button__content",
+        children: [icons && /* @__PURE__ */ jsxs("span", {
+          className: `rds-toggle-button__rounded ${iconClass}`,
+          children: [ToggleIcon && /* @__PURE__ */ jsx(ToggleIcon, {
+            checked: isChecked
+          }), CheckedIcon && isChecked && /* @__PURE__ */ jsx(CheckedIcon, {}), UncheckedIcon && !isChecked && /* @__PURE__ */ jsx(UncheckedIcon, {})]
+        }), /* @__PURE__ */ jsx("span", {
+          "data-testid": "toggle-button__label__text",
+          className: showLabel ? "" : "sr-only",
+          children
+        })]
+      })
+    })]
+  });
+});
+ToggleButton.displayName = "ToggleButton";
+export { ToggleButton as T };

package/dist/toggleButton/internal/generateId.d.ts

@@ -0,0 +1 @@
+export declare const generateId: (id: string | undefined) => string;

package/dist/toggleButton/toggleButton.scss

@@ -0,0 +1,43 @@
+@use "../button/button-shared";
+@use "../button/button";
+@use "../button/icon-button";
+
+.rds-toggle-button {
+  @extend .rds-button__shared;
+  @extend .rds-button;
+  @extend .rds-button__shared--tertiary;
+
+  display: inline-block;
+  user-select: none;
+
+  &__input {
+    opacity: 0;
+    position: absolute;
+  }
+
+  &__rounded {
+    @extend .rds-button__icon;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+  }
+
+  &__input:checked {
+    & + .rds-toggle-button {
+      background-color: var(--rds-foreground-tertiary);
+
+      &:active {
+        background-color: var(--rds-foreground-overlay-medium);
+      }
+    }
+  }
+
+  &--round {
+    @extend .rds-icon-button;
+    .rds-toggle-button__rounded {
+      margin: 0;
+    }
+  }
+}

package/dist/typography/Typography.js

@@ -1 +1,95 @@
-var e=Object.defineProperty,t=Object.defineProperties,o=Object.getOwnPropertyDescriptors,l=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,i=(t,o,l)=>o in t?e(t,o,{enumerable:!0,configurable:!0,writable:!0,value:l}):t[o]=l;import{forwardRef as n}from"react";import{j as s}from"../core/RiksTV.js";const c=e=>n(((n,c)=>{var m=n,{children:k,lookLike:p=e.lookLike,className:b="",lightBackground:d=!1}=m,f=((e,t)=>{var o={};for(var i in e)a.call(e,i)&&t.indexOf(i)<0&&(o[i]=e[i]);if(null!=e&&l)for(var i of l(e))t.indexOf(i)<0&&r.call(e,i)&&(o[i]=e[i]);return o})(m,["children","lookLike","className","lightBackground"]);const L=e.semanticElement;return s(L,(h=((e,t)=>{for(var o in t||(t={}))a.call(t,o)&&i(e,o,t[o]);if(l)for(var o of l(t))r.call(t,o)&&i(e,o,t[o]);return e})({className:`rds-${p} ${d?`rds-${p}--light`:""} ${b}`},f),t(h,o({ref:c,children:k}))));var h})),m=c({semanticElement:"h1",lookLike:"display-title"}),k=c({semanticElement:"h1",lookLike:"title-1"}),p=c({semanticElement:"h2",lookLike:"title-2"}),b=c({semanticElement:"h3",lookLike:"title-3"}),d=c({semanticElement:"h4",lookLike:"title-4"}),f=c({semanticElement:"p",lookLike:"body"}),L=c({semanticElement:"p",lookLike:"sub-body"}),h=c({semanticElement:"span",lookLike:"tag"}),E=c({semanticElement:"strong",lookLike:"bold"}),u=c({semanticElement:"span",lookLike:"meta"});export{f as B,m as D,k as H,u as M,L as S,h as T,p as a,b,d as c,E as d};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { forwardRef } from "react";
+import { j as jsx } from "../core/RiksTV.js";
+var typography = "";
+const typographyFactory = (factoryProps) => forwardRef((_a, ref) => {
+  var _b = _a, {
+    children,
+    lookLike = factoryProps.lookLike,
+    className = "",
+    lightBackground = false
+  } = _b, props = __objRest(_b, [
+    "children",
+    "lookLike",
+    "className",
+    "lightBackground"
+  ]);
+  const C = factoryProps.semanticElement;
+  return /* @__PURE__ */ jsx(C, __spreadProps(__spreadValues({
+    className: `rds-${lookLike} ${lightBackground ? `rds-${lookLike}--light` : ""} ${className}`
+  }, props), {
+    ref,
+    children
+  }));
+});
+const DisplayTitle = typographyFactory({
+  semanticElement: "h1",
+  lookLike: "display-title"
+});
+const H1 = typographyFactory({
+  semanticElement: "h1",
+  lookLike: "title-1"
+});
+const H2 = typographyFactory({
+  semanticElement: "h2",
+  lookLike: "title-2"
+});
+const H3 = typographyFactory({
+  semanticElement: "h3",
+  lookLike: "title-3"
+});
+const H4 = typographyFactory({
+  semanticElement: "h4",
+  lookLike: "title-4"
+});
+const Body = typographyFactory({
+  semanticElement: "p",
+  lookLike: "body"
+});
+const SubBody = typographyFactory({
+  semanticElement: "p",
+  lookLike: "sub-body"
+});
+const Tag = typographyFactory({
+  semanticElement: "span",
+  lookLike: "tag"
+});
+const Bold = typographyFactory({
+  semanticElement: "strong",
+  lookLike: "bold"
+});
+const Meta = typographyFactory({
+  semanticElement: "span",
+  lookLike: "meta"
+});
+export { Body as B, DisplayTitle as D, H1 as H, Meta as M, SubBody as S, Tag as T, H2 as a, H3 as b, H4 as c, Bold as d };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rikstv/shared-components",
-  "version": "0.6.2",
+  "version": "0.6.6",
   "publishConfig": {
     "access": "public"
   },
@@ -34,7 +34,7 @@
     "@cypress/react": "^5.10.0",
     "@cypress/vite-dev-server": "^2.1.0",
     "@testing-library/cypress": "^8.0.1",
-    "react-hook-form": "^7.15.4",
+    "react-hook-form": "^7.16.1",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-svg": "^2.0.0",
     "vite-plugin-react-svg": "^0.2.0"