@rikstv/shared-components 0.6.4 → 0.6.9

package/dist/core/RiksTV.js

@@ -1,4 +1,75 @@
-import r from"react";import{C as e}from"./Core.js";var t={exports:{}},o={};Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable;!function(){try{if(!Object.assign)return!1;var r=new String("abc");if(r[5]="de","5"===Object.getOwnPropertyNames(r)[0])return!1;for(var e={},t=0;t<10;t++)e["_"+String.fromCharCode(t)]=t;if("0123456789"!==Object.getOwnPropertyNames(e).map((function(r){return e[r]})).join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach((function(r){o[r]=r})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(n){return!1}}()||Object.assign;
+import require$$0 from "react";
+import { C as Core } from "./Core.js";
+var jsxRuntime = { exports: {} };
+var reactJsxRuntime_production_min = {};
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+function toObject(val) {
+  if (val === null || val === void 0) {
+    throw new TypeError("Object.assign cannot be called with null or undefined");
+  }
+  return Object(val);
+}
+function shouldUseNative() {
+  try {
+    if (!Object.assign) {
+      return false;
+    }
+    var test1 = new String("abc");
+    test1[5] = "de";
+    if (Object.getOwnPropertyNames(test1)[0] === "5") {
+      return false;
+    }
+    var test2 = {};
+    for (var i = 0; i < 10; i++) {
+      test2["_" + String.fromCharCode(i)] = i;
+    }
+    var order2 = Object.getOwnPropertyNames(test2).map(function(n2) {
+      return test2[n2];
+    });
+    if (order2.join("") !== "0123456789") {
+      return false;
+    }
+    var test3 = {};
+    "abcdefghijklmnopqrst".split("").forEach(function(letter) {
+      test3[letter] = letter;
+    });
+    if (Object.keys(Object.assign({}, test3)).join("") !== "abcdefghijklmnopqrst") {
+      return false;
+    }
+    return true;
+  } catch (err) {
+    return false;
+  }
+}
+shouldUseNative() ? Object.assign : function(target, source) {
+  var from;
+  var to = toObject(target);
+  var symbols;
+  for (var s = 1; s < arguments.length; s++) {
+    from = Object(arguments[s]);
+    for (var key in from) {
+      if (hasOwnProperty.call(from, key)) {
+        to[key] = from[key];
+      }
+    }
+    if (getOwnPropertySymbols) {
+      symbols = getOwnPropertySymbols(from);
+      for (var i = 0; i < symbols.length; i++) {
+        if (propIsEnumerable.call(from, symbols[i])) {
+          to[symbols[i]] = from[symbols[i]];
+        }
+      }
+    }
+  }
+  return to;
+};
 /** @license React v17.0.2
  * react-jsx-runtime.production.min.js
  *
@@ -7,4 +78,38 @@ import r from"react";import{C as e}from"./Core.js";var t={exports:{}},o={};Objec
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var n=r,a=60103;if(o.Fragment=60107,"function"==typeof Symbol&&Symbol.for){var s=Symbol.for;a=s("react.element"),o.Fragment=s("react.fragment")}var c=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p=Object.prototype.hasOwnProperty,f={key:!0,ref:!0,__self:!0,__source:!0};function i(r,e,t){var o,n={},s=null,i=null;for(o in void 0!==t&&(s=""+t),void 0!==e.key&&(s=""+e.key),void 0!==e.ref&&(i=e.ref),e)p.call(e,o)&&!f.hasOwnProperty(o)&&(n[o]=e[o]);if(r&&r.defaultProps)for(o in e=r.defaultProps)void 0===n[o]&&(n[o]=e[o]);return{$$typeof:a,type:r,key:s,ref:i,props:n,_owner:c.current}}o.jsx=i,o.jsxs=i,t.exports=o;const y=t.exports.jsx,O=t.exports.jsxs;const j=({children:r})=>y(e,{brand:"rtv",children:r});export{j as R,O as a,y as j};
+var f = require$$0, g = 60103;
+reactJsxRuntime_production_min.Fragment = 60107;
+if (typeof Symbol === "function" && Symbol.for) {
+  var h = Symbol.for;
+  g = h("react.element");
+  reactJsxRuntime_production_min.Fragment = h("react.fragment");
+}
+var m = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, n = Object.prototype.hasOwnProperty, p = { key: true, ref: true, __self: true, __source: true };
+function q(c, a, k) {
+  var b, d = {}, e = null, l = null;
+  k !== void 0 && (e = "" + k);
+  a.key !== void 0 && (e = "" + a.key);
+  a.ref !== void 0 && (l = a.ref);
+  for (b in a)
+    n.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
+  if (c && c.defaultProps)
+    for (b in a = c.defaultProps, a)
+      d[b] === void 0 && (d[b] = a[b]);
+  return { $$typeof: g, type: c, key: e, ref: l, props: d, _owner: m.current };
+}
+reactJsxRuntime_production_min.jsx = q;
+reactJsxRuntime_production_min.jsxs = q;
+{
+  jsxRuntime.exports = reactJsxRuntime_production_min;
+}
+const jsx = jsxRuntime.exports.jsx;
+const jsxs = jsxRuntime.exports.jsxs;
+var rtv = "";
+const RiksTVProvider = ({
+  children
+}) => /* @__PURE__ */ jsx(Core, {
+  brand: "rtv",
+  children
+});
+export { RiksTVProvider as R, jsxs as a, jsx as j };

package/dist/core/Strim.css

@@ -1 +1 @@
-:root{--rds-spacing--2: .125rem;--rds-spacing--4: .25rem;--rds-spacing--8: .5rem;--rds-spacing--16: 1rem;--rds-spacing--24: 1.5rem;--rds-spacing--32: 2rem;--rds-spacing--48: 3rem;--rds-spacing--64: 4rem;--rds-spacing--80: 5rem;--rds-spacing--96: 6rem;--rds-box-shadow--default: 0px 8px 16px rgba(0, 0, 0, .5)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}.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;--rds-accent-hover: #fcf4a9;--rds-foreground-primary: #ffffff;--rds-foreground-secondary: #b2bfbf;--rds-foreground-tertiary: #356e63;--rds-heading-accent: var(--stand-up-green);--rds-background-primary-rgb: 0, 42, 42;--rds-background-primary: rgb(var(--rds-background-primary-rgb));--rds-background-secondary: #001d1d;--rds-background-tertiary: #001515;--rds-foreground-overlay-soft: rgba(255, 255, 255, .1);--rds-foreground-overlay-medium: rgba(255, 255, 255, .3);--rds-foreground-overlay-heavy: rgba(255, 255, 255, .7);--rds-background-overlay-soft: rgba(0, 0, 0, .1);--rds-background-overlay-medium: rgba(0, 0, 0, .5);--rds-background-overlay-heavy: rgba(0, 0, 0, .85);--rds-feedback-info: #00aec7;--rds-feedback-warning: #f2a900;--rds-feedback-confirm: #4cbb81;--rds-feedback-error: #e01c17;--rds-roundness--default: 12px;--rds-roundness--button: 12px;--rds-roundness--round: 50%;--rds-font-family-lg-headlines: "HALMatex", "system-ui", sans-serif;--rds-font-family-headlines: "AvertaBold", Arial, Helvetica, "system-ui", sans-serif;--rds-font-family-m-headlines: "AvertaSemibold", Arial, Helvetica, "system-ui", sans-serif;--rds-font-family-body: "AvertaRegular", Arial, Helvetica, "system-ui", sans-serif;--rds-font-size--default: 1.125rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
+:root{--rds-spacing--2: .125rem;--rds-spacing--4: .25rem;--rds-spacing--8: .5rem;--rds-spacing--16: 1rem;--rds-spacing--24: 1.5rem;--rds-spacing--32: 2rem;--rds-spacing--48: 3rem;--rds-spacing--64: 4rem;--rds-spacing--80: 5rem;--rds-spacing--96: 6rem;--rds-box-shadow--default: 0px 8px 16px rgba(0, 0, 0, .5)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}.strm{--stand-up-green: #49f5a4;--surface-background: #edfef6;--rds-accent-color: #faed6f;--rds-accent-color-mid: #f7e426;--rds-accent-color-dark: #f7e426;--rds-accent-hover: #fcf4a9;--rds-foreground-primary: #ffffff;--rds-foreground-secondary: #b2bfbf;--rds-foreground-tertiary: #356e63;--rds-heading-accent: var(--stand-up-green);--rds-background-primary-rgb: 0, 42, 42;--rds-background-primary: rgb(var(--rds-background-primary-rgb));--rds-background-secondary: #001d1d;--rds-background-tertiary: #001515;--rds-foreground-overlay-soft: rgba(255, 255, 255, .1);--rds-foreground-overlay-medium: rgba(255, 255, 255, .3);--rds-foreground-overlay-heavy: rgba(255, 255, 255, .7);--rds-foreground-solid-soft: #1a4040;--rds-surface-foreground: #004b50;--rds-background-overlay-soft: rgba(0, 0, 0, .1);--rds-background-overlay-medium: rgba(0, 0, 0, .5);--rds-background-overlay-heavy: rgba(0, 0, 0, .85);--rds-feedback-info: #00aec7;--rds-feedback-warning: #f2a900;--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%;--rds-font-family-lg-headlines: "HALMatex", "system-ui", sans-serif;--rds-font-family-headlines: "AvertaBold", Arial, Helvetica, "system-ui", sans-serif;--rds-font-family-m-headlines: "AvertaSemibold", Arial, Helvetica, "system-ui", sans-serif;--rds-font-family-body: "AvertaRegular", Arial, Helvetica, "system-ui", sans-serif;--rds-font-size--default: 1.125rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

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/core/utils/generateId.d.ts

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

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/index.css

@@ -0,0 +1 @@
+.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,.rds-form-group .rds-textfield--label span{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-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{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,.rds-light .rds-form-group .rds-textfield--label span,.rds-form-group .rds-textfield--label .rds-light span{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-form-group{--input-color: var(--rds-foreground-primary);--input-label-color: var(--rds-foreground-secondary);--input-border-color: var(--rds-foreground-primary);--input-error-color: var(--rds-feedback-error);--input-bg: var(--rds-background-primary)}.rds-form-group .rds-textfield--input{border:1px solid var(--input-border-color);background-color:var(--input-border-bg);color:var(--input-color);border-radius:2px;height:3rem;width:100%;max-width:500px;padding:0 var(--rds-spacing--8)}.rds-form-group .rds-textfield--input--full-width{max-width:unset}.rds-form-group .rds-textfield--input::placeholder{opacity:0}.rds-form-group .rds-textfield--input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}.rds-form-group .rds-textfield--input:-webkit-autofill{box-shadow:0 0 0 30px var(--rds-background-primary) inset;-webkit-box-shadow:0 0 0 30px var(--rds-background-primary) inset;-webkit-text-fill-color:var(--rds-foreground-primary)}.rds-form-group .rds-textfield--label{cursor:text;background-color:var(--input-bg);position:absolute;padding:0 8px;top:50%;left:var(--rds-spacing--4);transform:translateY(-50%);transition:.2s ease-in-out;transition-property:top,font-size}.rds-form-group .rds-textfield--label span{font-size:1.125rem;color:var(--input-label-color)}.rds-form-group .rds-textfield--error-text{color:var(--input-error-color);margin-top:.5rem;margin-bottom:.5rem;position:absolute}.rds-form-group .rds-textfield:focus::-moz-focus-inner{border-style:none;outline:0}.rds-form-group .rds-textfield:focus button::-moz-focus-inner,.rds-form-group .rds-textfield:focus [type=button]::-moz-focus-inner,.rds-form-group .rds-textfield:focus [type=reset]::-moz-focus-inner,.rds-form-group .rds-textfield:focus [type=submit]::-moz-focus-inner{border-style:none}.rds-form-group .rds-textfield:focus input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-form-group .rds-textfield:focus{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}.rds-form-group{position:relative}.rds-form-group:focus-within .rds-textfield--label{top:0;font-size:1rem}.rds-form-group input:not(:placeholder-shown)+label{top:0;font-size:1rem}.rds-light .rds-textfield,.rds-light.rds-textfield{--input-color: var(--rds-button-primary-fg);--input-border-color: var(--rds-button-primary-fg);--input-bg: var(--surface-background)}.rds-light .rds-textfield--label span,.rds-light.rds-textfield--label span{--input-label-color: var(--rds-background-primary)}

package/dist/index.d.ts

@@ -1,9 +1,11 @@
 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 { TextField } from "./textfield/TextField";
 export { DisplayTitle, H1, H2, H3, H4, Body, Bold, SubBody, Tag, Meta } from "./typography/Typography";

package/dist/shared-components.es.js

@@ -1 +1,100 @@
-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";
+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 = (a3, b2) => {
+  for (var prop in b2 || (b2 = {}))
+    if (__hasOwnProp.call(b2, prop))
+      __defNormalProp(a3, prop, b2[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b2)) {
+      if (__propIsEnum.call(b2, prop))
+        __defNormalProp(a3, prop, b2[prop]);
+    }
+  return a3;
+};
+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 { a as jsxs, j as jsx } from "./core/RiksTV.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";
+import { forwardRef } from "react";
+import "./core/Core.js";
+import { S as SubBody } from "./typography/Typography.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 "./icons/Chevron.js";
+import "./button/BaseButton.js";
+const generateId = (id) => {
+  if (id) {
+    return id;
+  }
+  return `${new Date().valueOf()}`;
+};
+var textfield = "";
+const TextField = forwardRef((_a, ref) => {
+  var _b = _a, {
+    className = "",
+    id,
+    labelClass = "",
+    type = "text",
+    fullWidth = false,
+    lightBackground = false,
+    label,
+    error
+  } = _b, props = __objRest(_b, [
+    "className",
+    "id",
+    "labelClass",
+    "type",
+    "fullWidth",
+    "lightBackground",
+    "label",
+    "error"
+  ]);
+  const errorTextId = generateId();
+  const generatedId = generateId(id);
+  return /* @__PURE__ */ jsxs("div", {
+    className: `rds-form-group ${className}`,
+    children: [/* @__PURE__ */ jsx("input", __spreadValues({
+      ref,
+      id: generatedId,
+      className: `
+        rds-textfield
+        rds-textfield--input ${error ? "rds-textfield--input--error" : ""} ${fullWidth ? "rds-textfield--input--full-width" : ""} ${lightBackground ? "rds-light" : ""}
+        `,
+      type,
+      placeholder: label,
+      "aria-describedby": error ? errorTextId : void 0
+    }, props)), error && /* @__PURE__ */ jsx(SubBody, {
+      id: errorTextId,
+      className: "rds-textfield--error-text",
+      children: error
+    }), /* @__PURE__ */ jsx("label", {
+      htmlFor: generatedId,
+      className: `rds-textfield rds-textfield--label ${labelClass} ${lightBackground ? "rds-light" : ""}`,
+      children: /* @__PURE__ */ jsx("span", {
+        children: label
+      })
+    })]
+  });
+});
+TextField.displayName = "TextField";
+export { TextField };

package/dist/textfield/TextField.d.ts

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

package/dist/textfield/textfield.scss

@@ -0,0 +1,101 @@
+@use "../typography/typography.scss";
+@use "../core/mixin/focus" as mix;
+@use "../core/mixin/rem";
+
+.rds-form-group {
+  --input-color: var(--rds-foreground-primary);
+  --input-label-color: var(--rds-foreground-secondary);
+  --input-border-color: var(--rds-foreground-primary);
+  --input-error-color: var(--rds-feedback-error);
+  --input-bg: var(--rds-background-primary);
+
+  .rds-textfield {
+    &--input {
+      border: 1px solid var(--input-border-color);
+      background-color: var(--input-border-bg);
+      color: var(--input-color);
+      border-radius: 2px;
+
+      height: 3rem;
+      width: 100%;
+      max-width: 500px;
+      padding: 0 var(--rds-spacing--8);
+
+      &--full-width {
+        max-width: unset;
+      }
+
+      &::placeholder {
+        opacity: 0;
+      }
+
+      &::-webkit-search-cancel-button {
+        -webkit-appearance: none;
+        display: none;
+      }
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0 30px var(--rds-background-primary) inset;
+        -webkit-box-shadow: 0 0 0 30px var(--rds-background-primary) inset;
+        -webkit-text-fill-color: var(--rds-foreground-primary);
+      }
+    }
+
+    &--label {
+      cursor: text;
+      background-color: var(--input-bg);
+      position: absolute;
+      padding: 0 8px;
+      top: 50%;
+      left: var(--rds-spacing--4);
+      transform: translateY(-50%);
+      transition: 0.2s ease-in-out;
+      transition-property: top, font-size;
+
+      span {
+        @extend .rds-bold;
+        font-size: rem.convert(18px);
+        color: var(--input-label-color);
+      }
+    }
+
+    &--error-text {
+      color: var(--input-error-color);
+      margin-top: 0.5rem;
+      margin-bottom: 0.5rem;
+      position: absolute;
+    }
+
+    @include mix.with-keyboard-focus;
+  }
+}
+
+.rds-form-group {
+  position: relative;
+
+  &:focus-within {
+    .rds-textfield--label {
+      top: 0;
+      font-size: 1rem;
+    }
+  }
+
+  input:not(:placeholder-shown) + label {
+    top: 0;
+    font-size: 1rem;
+  }
+}
+
+.rds-light {
+  .rds-textfield,
+  &.rds-textfield {
+    --input-color: var(--rds-button-primary-fg);
+    --input-border-color: var(--rds-button-primary-fg);
+    --input-bg: var(--surface-background);
+    &--label {
+      span {
+        --input-label-color: var(--rds-background-primary);
+      }
+    }
+  }
+}

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-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-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);