@sats-group/ui-lib 85.6.1 → 86.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "85.6.1",
+  "version": "86.1.0",
   "description": "SATS web user interface library",
   "author": "developer@sats.no",
   "license": "UNLICENSED",

package/react/chip/chip.js

@@ -1,2 +1,2 @@
-var n=Object.defineProperty;var i=Object.getOwnPropertySymbols;var h=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;var l=(e,r,p)=>r in e?n(e,r,{enumerable:!0,configurable:!0,writable:!0,value:p}):e[r]=p,f=(e,r)=>{for(var p in r||(r={}))h.call(r,p)&&l(e,p,r[p]);if(i)for(var p of i(r))o.call(r,p)&&l(e,p,r[p]);return e};var d=(e,r)=>{var p={};for(var s in e)h.call(e,s)&&r.indexOf(s)<0&&(p[s]=e[s]);if(e!=null&&i)for(var s of i(e))r.indexOf(s)<0&&o.call(e,s)&&(p[s]=e[s]);return p};import*as t from"react";import F from"classnames";import N from"../icons/16/close";import m from"../text";const c=g=>{var a=g,{className:e,customIcon:r,elementName:p="button",icon:s=!0,isSelected:x=!1,text:C}=a,_=d(a,["className","customIcon","elementName","icon","isSelected","text"]);return t.createElement(p,f({className:F("chip",e,{"chip--selected":x})},_),t.createElement(t.Fragment,null,t.createElement("div",{className:"chip__wrapper"},s?r!=null?r:t.createElement(N,null):null,t.createElement(m,{className:"chip__text",size:m.sizes.small,theme:m.themes.emphasis},C))))};var E=c;export{E as default};
+var v=Object.defineProperty;var p=Object.getOwnPropertySymbols;var h=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable;var c=(i,e,s)=>e in i?v(i,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):i[e]=s,n=(i,e)=>{for(var s in e||(e={}))h.call(e,s)&&c(i,s,e[s]);if(p)for(var s of p(e))_.call(e,s)&&c(i,s,e[s]);return i};var f=(i,e)=>{var s={};for(var m in i)h.call(i,m)&&e.indexOf(m)<0&&(s[m]=i[m]);if(i!=null&&p)for(var m of p(i))e.indexOf(m)<0&&_.call(i,m)&&(s[m]=i[m]);return s};import*as t from"react";import o from"classnames";import x from"../icons/16/close";import r from"../text";const C=N=>{var l=N,{className:i,customIcon:e,elementName:s="button",icon:m=!1,isSelected:a=!1,text:d}=l,u=f(l,["className","customIcon","elementName","icon","isSelected","text"]);return t.createElement(s,n({className:o("chip",i,{"chip--selected":a})},u),t.createElement(t.Fragment,null,t.createElement("div",{className:"chip__wrapper"},m?t.createElement(x,null):null,e?t.createElement("div",{className:o("chip__custom-icon chip__custom-icon--animated",{"chip__custom-icon--visible":a})},e):null,t.createElement(r,{className:o("chip__text",{"chip__text--with-icon":m||e&&a}),size:r.sizes.small,theme:r.themes.emphasis},d))))};var T=C;export{T as default};
 //# sourceMappingURL=chip.js.map

package/react/chip/chip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/chip/chip.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport cn from 'classnames';\n\nimport Close from '../icons/16/close';\nimport Text from '../text';\n\nimport { Chip as Props } from './chip.types';\n\nconst Chip: React.FC<Props> = ({\n  className,\n  customIcon,\n  elementName = 'button',\n  icon = true,\n  isSelected = false,\n  text,\n  ...rest\n}) =>\n  React.createElement(\n    elementName,\n    {\n      className: cn('chip', className, { 'chip--selected': isSelected }),\n      ...rest,\n    },\n    <React.Fragment>\n      <div className=\"chip__wrapper\">\n        {icon ? (customIcon ?? <Close />) : null}\n        <Text\n          className=\"chip__text\"\n          size={Text.sizes.small}\n          theme={Text.themes.emphasis}\n        >\n          {text}\n        </Text>\n      </div>\n    </React.Fragment>,\n  );\n\nexport default Chip;\n"],
-  "mappings": "2fAAA,UAAYA,MAAW,QACvB,OAAOC,MAAQ,aAEf,OAAOC,MAAW,oBAClB,OAAOC,MAAU,UAIjB,MAAMC,EAAyBC,GAQ5B,CAR4B,IAAAC,EAAAD,EAC7B,WAAAE,EACA,WAAAC,EACA,YAAAC,EAAc,SACd,KAAAC,EAAO,GACP,WAAAC,EAAa,GACb,KAAAC,CAdF,EAQ+BN,EAO1BO,EAAAC,EAP0BR,EAO1B,CANH,YACA,aACA,cACA,OACA,aACA,SAGA,OAAAN,EAAM,cACJS,EACAM,EAAA,CACE,UAAWd,EAAG,OAAQM,EAAW,CAAE,iBAAkBI,CAAW,CAAC,GAC9DE,GAELb,EAAA,cAACA,EAAM,SAAN,KACCA,EAAA,cAAC,OAAI,UAAU,iBACZU,EAAQF,GAAA,KAAAA,EAAcR,EAAA,cAACE,EAAA,IAAM,EAAM,KACpCF,EAAA,cAACG,EAAA,CACC,UAAU,aACV,KAAMA,EAAK,MAAM,MACjB,MAAOA,EAAK,OAAO,UAElBS,CACH,CACF,CACF,CACF,GAEF,IAAOI,EAAQZ",
+  "sourcesContent": ["import * as React from 'react';\nimport cn from 'classnames';\n\nimport Close from '../icons/16/close';\nimport Text from '../text';\n\nimport { Chip as Props } from './chip.types';\n\nconst Chip: React.FC<Props> = ({\n  className,\n  customIcon,\n  elementName = 'button',\n  icon = false,\n  isSelected = false,\n  text,\n  ...rest\n}) =>\n  React.createElement(\n    elementName,\n    {\n      className: cn('chip', className, {\n        'chip--selected': isSelected,\n      }),\n      ...rest,\n    },\n    <React.Fragment>\n      <div className=\"chip__wrapper\">\n        {icon ? <Close /> : null}\n        {customIcon ? (\n          <div\n            className={cn('chip__custom-icon chip__custom-icon--animated', {\n              'chip__custom-icon--visible': isSelected,\n            })}\n          >\n            {customIcon}\n          </div>\n        ) : null}\n        <Text\n          className={cn('chip__text', {\n            'chip__text--with-icon': icon || (customIcon && isSelected),\n          })}\n          size={Text.sizes.small}\n          theme={Text.themes.emphasis}\n        >\n          {text}\n        </Text>\n      </div>\n    </React.Fragment>,\n  );\n\nexport default Chip;\n"],
+  "mappings": "2fAAA,UAAYA,MAAW,QACvB,OAAOC,MAAQ,aAEf,OAAOC,MAAW,oBAClB,OAAOC,MAAU,UAIjB,MAAMC,EAAyBC,GAQ5B,CAR4B,IAAAC,EAAAD,EAC7B,WAAAE,EACA,WAAAC,EACA,YAAAC,EAAc,SACd,KAAAC,EAAO,GACP,WAAAC,EAAa,GACb,KAAAC,CAdF,EAQ+BN,EAO1BO,EAAAC,EAP0BR,EAO1B,CANH,YACA,aACA,cACA,OACA,aACA,SAGA,OAAAN,EAAM,cACJS,EACAM,EAAA,CACE,UAAWd,EAAG,OAAQM,EAAW,CAC/B,iBAAkBI,CACpB,CAAC,GACEE,GAELb,EAAA,cAACA,EAAM,SAAN,KACCA,EAAA,cAAC,OAAI,UAAU,iBACZU,EAAOV,EAAA,cAACE,EAAA,IAAM,EAAK,KACnBM,EACCR,EAAA,cAAC,OACC,UAAWC,EAAG,gDAAiD,CAC7D,6BAA8BU,CAChC,CAAC,GAEAH,CACH,EACE,KACJR,EAAA,cAACG,EAAA,CACC,UAAWF,EAAG,aAAc,CAC1B,wBAAyBS,GAASF,GAAcG,CAClD,CAAC,EACD,KAAMR,EAAK,MAAM,MACjB,MAAOA,EAAK,OAAO,UAElBS,CACH,CACF,CACF,CACF,GAEF,IAAOI,EAAQZ",
   "names": ["React", "cn", "Close", "Text", "Chip", "_a", "_b", "className", "customIcon", "elementName", "icon", "isSelected", "text", "rest", "__objRest", "__spreadValues", "chip_default"]
 }

package/react/chip/chip.scss

@@ -2,15 +2,15 @@
 @use '../../tokens/spacing';
 
 .chip {
+  background-color: var(--background-secondary-default);
+  border-radius: 40px; // NOTE: Custom border radius by design
+  border: 1px solid var(--ge-chips-unselected-default);
   box-sizing: border-box;
   cursor: pointer;
+  display: inline-block;
   outline: 0;
   padding: 0;
   text-decoration: none;
-  display: inline-block;
-  border-radius: 40px; // NOTE: Custom border radius by design
-  background-color: var(--background-secondary-default);
-  border: 1px solid var(--ge-chips-unselected-default);
 
   @media (hover: hover) {
     &:not([disabled]):hover {
@@ -33,7 +33,7 @@
 
   &__wrapper {
     display: flex;
-    gap: spacing.$xs;
+    gap: 0; // NOTE: This is 0 because it can't be animated, wherase margin can, so margin is used on the text when an icon is present instead
     align-items: center;
     padding: spacing.$xs spacing.$m;
   }
@@ -43,4 +43,41 @@
     color: var(--on-ge-on-chips-selected-disabled);
     cursor: not-allowed;
   }
+
+  &__custom-icon {
+    align-items: center;
+    display: inline-flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    max-width: 0;
+    min-width: 0;
+    opacity: 0;
+    overflow: hidden;
+    transform: scale(0.85);
+  }
+
+  &__custom-icon--visible {
+    max-width: 999px; // NOTE: This is just so that the component can grow as much as it needs when the icon is shown
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &__custom-icon--animated {
+    transition:
+      max-width 220ms ease,
+      opacity 160ms ease,
+      transform 200ms ease;
+  }
+
+  &__text {
+    margin-left: 0;
+
+    &--with-icon {
+      margin-left: spacing.$xs;
+    }
+  }
+
+  &__custom-icon--animated ~ .chip__text {
+    transition: margin-left 220ms ease;
+  }
 }

package/react/chip/chip.types.d.ts

@@ -1,20 +1,26 @@
 import { ReactElement } from 'react';
 import { ButtonHtmlProps, LinkHtmlProps } from '../types';
 type BasicChipProps = {
-    className?: string;
-    customIcon?: ReactElement;
     elementName: string;
-    icon?: boolean;
     isSelected?: boolean;
     text: string;
 };
-export type ChipButton = BasicChipProps & ButtonHtmlProps;
-export type ChipLink = BasicChipProps & LinkHtmlProps;
-export type Chip = ({
+type ChipWithCustomicon = {
+    customIcon: ReactElement;
+    icon?: never;
+};
+type ChipWithDefaultIcon = {
+    customIcon?: never;
+    icon?: boolean;
+};
+type ChipWithIcon = ChipWithCustomicon | ChipWithDefaultIcon;
+export type ChipButton = ButtonHtmlProps;
+export type ChipLink = LinkHtmlProps;
+export type Chip = ChipWithIcon & BasicChipProps & (({
     elementName: 'button';
 } & ChipButton) | ({
     elementName: 'a';
 } & ChipLink) | ({
     elementName: string;
-} & (ChipLink | ChipButton));
+} & (ChipLink | ChipButton)));
 export {};

package/react/toggle/toggle.d.ts

@@ -6,6 +6,7 @@ declare const Toggle: React.ForwardRefExoticComponent<Omit<import("../types").In
     name: string;
     value: string;
     spaceBetween?: boolean;
+    showBackground?: boolean;
     testId?: string;
 } & {
     children?: React.ReactNode | undefined;

package/react/toggle/toggle.js

@@ -1,2 +1,2 @@
-"use client";var w=Object.defineProperty;var r=Object.getOwnPropertySymbols;var s=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable;var d=(e,n,o)=>n in e?w(e,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[n]=o,p=(e,n)=>{for(var o in n||(n={}))s.call(n,o)&&d(e,o,n[o]);if(r)for(var o of r(n))m.call(n,o)&&d(e,o,n[o]);return e};var _=(e,n)=>{var o={};for(var t in e)s.call(e,t)&&n.indexOf(t)<0&&(o[t]=e[t]);if(e!=null&&r)for(var t of r(e))n.indexOf(t)<0&&m.call(e,t)&&(o[t]=e[t]);return o};import v from"classnames";import*as l from"react";import f from"../text";import P from"../use-input-validation";const b=l.forwardRef((k,I)=>{var i=k,{children:e,isLabelVisible:n=!0,label:o,labelPosition:t="right",name:u,value:c="",spaceBetween:h,testId:N}=i,a=_(i,["children","isLabelVisible","label","labelPosition","name","value","spaceBetween","testId"]);const[T,x,C]=P();return l.createElement("div",{className:v("toggle",{"toggle--error":C})},l.createElement("label",{className:v("toggle__content",{"toggle__content--space-between":h}),"data-testid":N},n&&t==="left"&&l.createElement("div",{className:"toggle__label"},l.createElement(f,null,o),e),l.createElement("div",{className:"toggle__button-wrap"},l.createElement("input",p({"aria-label":n?void 0:o,className:"toggle__input",type:"checkbox",name:u,onChange:g=>{a.onChange&&a.onChange(g),T(g)},onInvalid:g=>{a.onInvalid&&a.onInvalid(g),x(g)},ref:I,value:c},a)),l.createElement("span",{className:"toggle__slider"},l.createElement("div",{className:"toggle__slider-element"}))),n&&t==="right"&&l.createElement("div",{className:"toggle__label"},l.createElement(f,null,o),e)))});var q=b;export{q as default};
+"use client";var w=Object.defineProperty;var r=Object.getOwnPropertySymbols;var m=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var s=(e,n,o)=>n in e?w(e,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[n]=o,_=(e,n)=>{for(var o in n||(n={}))m.call(n,o)&&s(e,o,n[o]);if(r)for(var o of r(n))p.call(n,o)&&s(e,o,n[o]);return e};var v=(e,n)=>{var o={};for(var t in e)m.call(e,t)&&n.indexOf(t)<0&&(o[t]=e[t]);if(e!=null&&r)for(var t of r(e))n.indexOf(t)<0&&p.call(e,t)&&(o[t]=e[t]);return o};import f from"classnames";import*as g from"react";import u from"../text";import k from"../use-input-validation";const P=g.forwardRef((y,T)=>{var d=y,{children:e,isLabelVisible:n=!0,label:o,labelPosition:t="right",name:c,value:h="",spaceBetween:i,testId:N,showBackground:I}=d,l=v(d,["children","isLabelVisible","label","labelPosition","name","value","spaceBetween","testId","showBackground"]);const[x,C,b]=k();return g.createElement("div",{className:f("toggle",{"toggle--error":b,"toggle--space-between":i})},g.createElement("label",{className:f("toggle__content",{"toggle__content--space-between":i,"toggle__content--background":I}),"data-testid":N},n&&t==="left"&&g.createElement("div",{className:"toggle__label"},g.createElement(u,null,o),e),g.createElement("div",{className:"toggle__button-wrap"},g.createElement("input",_({"aria-label":n?void 0:o,className:"toggle__input",type:"checkbox",name:c,onChange:a=>{l.onChange&&l.onChange(a),x(a)},onInvalid:a=>{l.onInvalid&&l.onInvalid(a),C(a)},ref:T,value:h},l)),g.createElement("span",{className:"toggle__slider"},g.createElement("div",{className:"toggle__slider-element"}))),n&&t==="right"&&g.createElement("div",{className:"toggle__label"},g.createElement(u,null,o),e)))});var z=P;export{z as default};
 //# sourceMappingURL=toggle.js.map

package/react/toggle/toggle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/toggle/toggle.tsx"],
-  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport { Toggle as Props } from './toggle.types';\n\nconst Toggle = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      isLabelVisible = true,\n      label,\n      labelPosition = 'right',\n      name,\n      value = '',\n      spaceBetween,\n      testId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <div\n        className={cn('toggle', {\n          'toggle--error': error,\n        })}\n      >\n        <label\n          className={cn('toggle__content', {\n            'toggle__content--space-between': spaceBetween,\n          })}\n          data-testid={testId}\n        >\n          {isLabelVisible && labelPosition === 'left' && (\n            <div className=\"toggle__label\">\n              <Text>{label}</Text>\n              {children}\n            </div>\n          )}\n\n          <div className=\"toggle__button-wrap\">\n            <input\n              aria-label={isLabelVisible ? undefined : label}\n              className=\"toggle__input\"\n              type=\"checkbox\"\n              name={name}\n              onChange={e => {\n                // NOTE: If props specify an `onChange`, we need to call that too\n                if (rest.onChange) rest.onChange(e);\n                onChange(e);\n              }}\n              onInvalid={e => {\n                // NOTE: If props specify an `onInvalid`, we need to call that too\n                if (rest.onInvalid) rest.onInvalid(e);\n                onInvalid(e);\n              }}\n              ref={ref}\n              value={value}\n              {...rest}\n            />\n            <span className=\"toggle__slider\">\n              <div className=\"toggle__slider-element\"></div>\n            </span>\n          </div>\n\n          {isLabelVisible && labelPosition === 'right' && (\n            <div className=\"toggle__label\">\n              <Text>{label}</Text>\n              {children}\n            </div>\n          )}\n        </label>\n      </div>\n    );\n  },\n);\n\nexport default Toggle;\n"],
-  "mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAU,UACjB,OAAOC,MAAwB,0BAI/B,MAAMC,EAASH,EAAM,WAInB,CACEI,EAWAC,IACG,CAZH,IAAAC,EAAAF,EACE,UAAAG,EACA,eAAAC,EAAiB,GACjB,MAAAC,EACA,cAAAC,EAAgB,QAChB,KAAAC,EACA,MAAAC,EAAQ,GACR,aAAAC,EACA,OAAAC,CAvBN,EAeIR,EASKS,EAAAC,EATLV,EASK,CARH,WACA,iBACA,QACA,gBACA,OACA,QACA,eACA,WAKF,KAAM,CAACW,EAAUC,EAAWC,CAAK,EAAIjB,EAAmB,EAExD,OACEF,EAAA,cAAC,OACC,UAAWD,EAAG,SAAU,CACtB,gBAAiBoB,CACnB,CAAC,GAEDnB,EAAA,cAAC,SACC,UAAWD,EAAG,kBAAmB,CAC/B,iCAAkCc,CACpC,CAAC,EACD,cAAaC,GAEZN,GAAkBE,IAAkB,QACnCV,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACC,EAAA,KAAMQ,CAAM,EACZF,CACH,EAGFP,EAAA,cAAC,OAAI,UAAU,uBACbA,EAAA,cAAC,QAAAoB,EAAA,CACC,aAAYZ,EAAiB,OAAYC,EACzC,UAAU,gBACV,KAAK,WACL,KAAME,EACN,SAAUU,GAAK,CAETN,EAAK,UAAUA,EAAK,SAASM,CAAC,EAClCJ,EAASI,CAAC,CACZ,EACA,UAAWA,GAAK,CAEVN,EAAK,WAAWA,EAAK,UAAUM,CAAC,EACpCH,EAAUG,CAAC,CACb,EACA,IAAKhB,EACL,MAAOO,GACHG,EACN,EACAf,EAAA,cAAC,QAAK,UAAU,kBACdA,EAAA,cAAC,OAAI,UAAU,yBAAyB,CAC1C,CACF,EAECQ,GAAkBE,IAAkB,SACnCV,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACC,EAAA,KAAMQ,CAAM,EACZF,CACH,CAEJ,CACF,CAEJ,CACF,EAEA,IAAOe,EAAQnB",
-  "names": ["cn", "React", "Text", "useInputValidation", "Toggle", "_a", "ref", "_b", "children", "isLabelVisible", "label", "labelPosition", "name", "value", "spaceBetween", "testId", "rest", "__objRest", "onChange", "onInvalid", "error", "__spreadValues", "e", "toggle_default"]
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport { Toggle as Props } from './toggle.types';\n\nconst Toggle = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      isLabelVisible = true,\n      label,\n      labelPosition = 'right',\n      name,\n      value = '',\n      spaceBetween,\n      testId,\n      showBackground,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <div\n        className={cn('toggle', {\n          'toggle--error': error,\n          'toggle--space-between': spaceBetween,\n        })}\n      >\n        <label\n          className={cn('toggle__content', {\n            'toggle__content--space-between': spaceBetween,\n            'toggle__content--background': showBackground,\n          })}\n          data-testid={testId}\n        >\n          {isLabelVisible && labelPosition === 'left' && (\n            <div className=\"toggle__label\">\n              <Text>{label}</Text>\n              {children}\n            </div>\n          )}\n\n          <div className=\"toggle__button-wrap\">\n            <input\n              aria-label={isLabelVisible ? undefined : label}\n              className=\"toggle__input\"\n              type=\"checkbox\"\n              name={name}\n              onChange={e => {\n                // NOTE: If props specify an `onChange`, we need to call that too\n                if (rest.onChange) rest.onChange(e);\n                onChange(e);\n              }}\n              onInvalid={e => {\n                // NOTE: If props specify an `onInvalid`, we need to call that too\n                if (rest.onInvalid) rest.onInvalid(e);\n                onInvalid(e);\n              }}\n              ref={ref}\n              value={value}\n              {...rest}\n            />\n            <span className=\"toggle__slider\">\n              <div className=\"toggle__slider-element\"></div>\n            </span>\n          </div>\n\n          {isLabelVisible && labelPosition === 'right' && (\n            <div className=\"toggle__label\">\n              <Text>{label}</Text>\n              {children}\n            </div>\n          )}\n        </label>\n      </div>\n    );\n  },\n);\n\nexport default Toggle;\n"],
+  "mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAU,UACjB,OAAOC,MAAwB,0BAI/B,MAAMC,EAASH,EAAM,WAInB,CACEI,EAYAC,IACG,CAbH,IAAAC,EAAAF,EACE,UAAAG,EACA,eAAAC,EAAiB,GACjB,MAAAC,EACA,cAAAC,EAAgB,QAChB,KAAAC,EACA,MAAAC,EAAQ,GACR,aAAAC,EACA,OAAAC,EACA,eAAAC,CAxBN,EAeIT,EAUKU,EAAAC,EAVLX,EAUK,CATH,WACA,iBACA,QACA,gBACA,OACA,QACA,eACA,SACA,mBAKF,KAAM,CAACY,EAAUC,EAAWC,CAAK,EAAIlB,EAAmB,EAExD,OACEF,EAAA,cAAC,OACC,UAAWD,EAAG,SAAU,CACtB,gBAAiBqB,EACjB,wBAAyBP,CAC3B,CAAC,GAEDb,EAAA,cAAC,SACC,UAAWD,EAAG,kBAAmB,CAC/B,iCAAkCc,EAClC,8BAA+BE,CACjC,CAAC,EACD,cAAaD,GAEZN,GAAkBE,IAAkB,QACnCV,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACC,EAAA,KAAMQ,CAAM,EACZF,CACH,EAGFP,EAAA,cAAC,OAAI,UAAU,uBACbA,EAAA,cAAC,QAAAqB,EAAA,CACC,aAAYb,EAAiB,OAAYC,EACzC,UAAU,gBACV,KAAK,WACL,KAAME,EACN,SAAUW,GAAK,CAETN,EAAK,UAAUA,EAAK,SAASM,CAAC,EAClCJ,EAASI,CAAC,CACZ,EACA,UAAWA,GAAK,CAEVN,EAAK,WAAWA,EAAK,UAAUM,CAAC,EACpCH,EAAUG,CAAC,CACb,EACA,IAAKjB,EACL,MAAOO,GACHI,EACN,EACAhB,EAAA,cAAC,QAAK,UAAU,kBACdA,EAAA,cAAC,OAAI,UAAU,yBAAyB,CAC1C,CACF,EAECQ,GAAkBE,IAAkB,SACnCV,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACC,EAAA,KAAMQ,CAAM,EACZF,CACH,CAEJ,CACF,CAEJ,CACF,EAEA,IAAOgB,EAAQpB",
+  "names": ["cn", "React", "Text", "useInputValidation", "Toggle", "_a", "ref", "_b", "children", "isLabelVisible", "label", "labelPosition", "name", "value", "spaceBetween", "testId", "showBackground", "rest", "__objRest", "onChange", "onInvalid", "error", "__spreadValues", "e", "toggle_default"]
 }

package/react/toggle/toggle.scss

@@ -1,5 +1,6 @@
 @use '../../tokens/colours';
-@use '../../tokens/spacing.scss';
+@use '../../tokens/spacing';
+@use '../../tokens/corner-radius';
 
 .toggle {
   $block: &;
@@ -7,6 +8,12 @@
   $sizeHeight: 20px;
   box-sizing: border-box;
 
+  display: flex;
+  &--space-between {
+    width: 100%;
+    justify-content: space-between;
+  }
+
   &__content {
     display: flex;
     align-items: center;
@@ -15,6 +22,13 @@
 
     &--space-between {
       justify-content: space-between;
+      width: 100%;
+    }
+
+    &--background {
+      background-color: var(--surface-secondary-default);
+      padding: spacing.$s;
+      border-radius: corner-radius.$circle;
     }
   }
 

package/react/toggle/toggle.types.d.ts

@@ -6,5 +6,6 @@ export type Toggle = Omit<InputHtmlProps, 'value'> & {
     name: string;
     value: string;
     spaceBetween?: boolean;
+    showBackground?: boolean;
     testId?: string;
 };

package/tokens/corner-radius.scss

@@ -3,3 +3,4 @@ $xs: 4px;
 $s: 8px;
 $m: 12px;
 $l: 24px;
+$circle: 100px;