@rikstv/shared-components 0.6.1 → 0.6.5

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

@@ -3,6 +3,7 @@ export { StrimProvider } from "./core/Strim";
 export { LightMode } from "./core/LightMode";
 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 @@
-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{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"./button/BaseButton.js";

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 @@
-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 e=Object.defineProperty,r=Object.defineProperties,a=Object.getOwnPropertyDescriptors,o=Object.getOwnPropertySymbols,t=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,n=(r,a,o)=>a in r?e(r,a,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[a]=o,s=(e,r)=>{for(var a in r||(r={}))t.call(r,a)&&n(e,a,r[a]);if(o)for(var a of o(r))l.call(r,a)&&n(e,a,r[a]);return e};import{createContext as i,forwardRef as c,useContext as p}from"react";import"../button/Button.js";import{a as m,j as d}from"../core/RiksTV.js";const b=i({radioName:""});const f=c(((e,n)=>{var i=e,{label:c,name:f,className:u=""}=i,g=((e,r)=>{var a={};for(var n in e)t.call(e,n)&&r.indexOf(n)<0&&(a[n]=e[n]);if(null!=e&&o)for(var n of o(e))r.indexOf(n)<0&&l.call(e,n)&&(a[n]=e[n]);return a})(i,["label","name","className"]);const{radioName:O}=p(b);return m("label",{className:`rds-radio-toggle ${u}`,children:[d("input",(y=s({className:"rds-radio-toggle__input"},g),j={ref:n,type:"radio",name:O||f},r(y,a(j)))),d("span",{className:"rds-radio-toggle__label",children:c})]});var y,j}));f.displayName="RadioToggleInput";export{b as R,f 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 @@
+var e=Object.defineProperty,n=Object.getOwnPropertySymbols,t=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,o=(n,t,l)=>t in n?e(n,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):n[t]=l,a=(e,a)=>{for(var c in a||(a={}))t.call(a,c)&&o(e,c,a[c]);if(n)for(var c of n(a))l.call(a,c)&&o(e,c,a[c]);return e};import{forwardRef as c,useRef as r,useState as s}from"react";import{a as d,j as i}from"../core/RiksTV.js";const u=c(((e,o)=>{var c=e,{defaultChecked:u,showLabel:g=!0,icons:h,iconClass:f="",children:b,onChange:p,id:m,className:v=""}=c,y=((e,o)=>{var a={};for(var c in e)t.call(e,c)&&o.indexOf(c)<0&&(a[c]=e[c]);if(null!=e&&n)for(var c of n(e))o.indexOf(c)<0&&l.call(e,c)&&(a[c]=e[c]);return a})(c,["defaultChecked","showLabel","icons","iconClass","children","onChange","id","className"]);const _=r(null),[k]=s((e=>e||`${(new Date).valueOf()}`)(m)),[N,O]=s(!!u),C=h&&"checkedIcon"in h?h.checkedIcon:null,I=h&&"uncheckedIcon"in h?h.uncheckedIcon:null,j=h&&"toggleIcon"in h?h.toggleIcon:null,w=o||_;return d("div",{className:v,children:[i("input",a({id:k,ref:w,type:"checkbox",className:"rds-toggle-button__input",onChange:e=>{var n;"function"==typeof p&&p(e),O("function"!=typeof w?!!(null==(n=w.current)?void 0:n.checked):!N)},defaultChecked:u},y)),i("label",{"data-testid":"toggle-button__label",className:"rds-toggle-button "+(g?"":"rds-toggle-button--round"),htmlFor:k,children:d("span",{className:"rds-toggle-button__content",children:[h&&d("span",{className:`rds-toggle-button__rounded ${f}`,children:[j&&i(j,{checked:N}),C&&N&&i(C,{}),I&&!N&&i(I,{})]}),i("span",{"data-testid":"toggle-button__label__text",className:g?"":"sr-only",children:b})]})})]})}));u.displayName="ToggleButton";export{u 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.css

@@ -1 +1 @@
-.rds-link{font-family:var(--rds-font-family-body);font-size:clamp(1rem,calc(.9464285714rem + .1488095238vw),1.125rem);font-weight:normal;line-height:1.5;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:normal;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:normal;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:normal;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:normal;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:normal;line-height:1.2;color:var(--rds-foreground-primary)}.rds-body{font-family:var(--rds-font-family-body);font-size:clamp(1rem,calc(.9464285714rem + .1488095238vw),1.125rem);font-weight:normal;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:normal;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:normal;letter-spacing:.09375rem;color:var(--rds-foreground-primary)}.rds-bold{font-family:var(--rds-font-family-headlines);font-size:clamp(1.125rem,calc(1.125rem + 0vw),1.125rem);font-weight:normal;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:normal;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-light .rds-display-title{color:var(--rds-foreground-tertiary)}.rds-display-title--light{color:var(--rds-foreground-tertiary)}.rds-light .rds-title-1{color:var(--rds-button-primary-fg)}.rds-title-1--light{color:var(--rds-button-primary-fg)}.rds-light .rds-title-2{color:var(--rds-button-primary-fg)}.rds-title-2--light{color:var(--rds-button-primary-fg)}.rds-light .rds-title-3{color:var(--rds-button-primary-fg)}.rds-title-3--light{color:var(--rds-button-primary-fg)}.rds-light .rds-title-4{color:var(--rds-button-primary-fg)}.rds-title-4--light{color:var(--rds-button-primary-fg)}.rds-light .rds-body{color:var(--rds-background-primary)}.rds-body--light{color:var(--rds-background-primary)}.rds-light .rds-sub-body{color:var(--rds-button-primary-fg)}.rds-sub-body--light{color:var(--rds-button-primary-fg)}.rds-light .rds-tag{color:var(--rds-background-primary)}.rds-tag--light{color:var(--rds-background-primary)}.rds-light .rds-bold{color:var(--rds-background-primary)}.rds-bold--light{color:var(--rds-background-primary)}.rds-light .rds-meta{color:var(--rds-button-primary-fg)}.rds-meta--light{color: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:normal;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:normal;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:normal;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:normal;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:normal;line-height:1.2;color:var(--rds-foreground-primary)}.rds-body{font-family:var(--rds-font-family-body);font-size:clamp(1rem,calc(.9464285714rem + .1488095238vw),1.125rem);font-weight:normal;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:normal;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:normal;letter-spacing:.09375rem;color:var(--rds-foreground-primary)}.rds-bold{font-family:var(--rds-font-family-headlines);font-size:clamp(1.125rem,calc(1.125rem + 0vw),1.125rem);font-weight:normal;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:normal;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-light .rds-display-title{color:var(--rds-foreground-tertiary)}.rds-display-title--light{color:var(--rds-foreground-tertiary)}.rds-light .rds-title-1{color:var(--rds-button-primary-fg)}.rds-title-1--light{color:var(--rds-button-primary-fg)}.rds-light .rds-title-2{color:var(--rds-button-primary-fg)}.rds-title-2--light{color:var(--rds-button-primary-fg)}.rds-light .rds-title-3{color:var(--rds-button-primary-fg)}.rds-title-3--light{color:var(--rds-button-primary-fg)}.rds-light .rds-title-4{color:var(--rds-button-primary-fg)}.rds-title-4--light{color:var(--rds-button-primary-fg)}.rds-light .rds-body{color:var(--rds-background-primary)}.rds-body--light{color:var(--rds-background-primary)}.rds-light .rds-sub-body{color:var(--rds-button-primary-fg)}.rds-sub-body--light{color:var(--rds-button-primary-fg)}.rds-light .rds-tag{color:var(--rds-background-primary)}.rds-tag--light{color:var(--rds-background-primary)}.rds-light .rds-bold{color:var(--rds-background-primary)}.rds-bold--light{color:var(--rds-background-primary)}.rds-light .rds-meta{color:var(--rds-button-primary-fg)}.rds-meta--light{color:var(--rds-button-primary-fg)}

package/dist/typography/typography.scss

@@ -2,10 +2,10 @@
 @use '../core/mixin/focus';
 
 .rds-link {
-  font-family: var(--rds-font-family-body);
-  font-size: fluid.get-clamp(16, 18);
-  font-weight: normal;
-  line-height: 1.5;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
   color: var(--rds-foreground-primary);
   transition: 75ms ease color;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rikstv/shared-components",
-  "version": "0.6.1",
+  "version": "0.6.5",
   "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"