@descope/web-components-ui 1.0.54 → 1.0.56

package/dist/umd/descope-loader-linear-index-js.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[453],{9929:(t,e,n)=>{n.r(e),n.d(e,{LoaderLinear:()=>d});var o=n(832),a=n(3535),r=n(8522);const i=(0,o.iY)("loader-linear");class s extends r.V{static get componentName(){return i}constructor(){super();const t=document.createElement("template");t.innerHTML="\n\t\t\t<style>\n\t\t\t\t@keyframes tilt {\n\t\t\t\t\t0% { transform: translateX(0); }\n\t\t\t\t\t50% { transform: translateX(400%); }\n\t\t\t\t}\n\t\t\t\t:host {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t\tdiv::after {\n\t\t\t\t\tcontent: '';\n\t\t\t\t\tanimation-name: tilt;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tleft: 0;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<div></div>\n\t\t",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div"}}const{root:c,after:l}={root:{},after:{selector:"::after"}},d=(0,o.qC)((0,o.yk)({mappings:{display:c,width:(0,a.zy)(c),height:[c,l],borderRadius:[c,l],surfaceColor:[{property:"background-color"}],barColor:[{...l,property:"background-color"}],barWidth:{...l,property:"width"},animationDuration:[c,l],animationTimingFunction:[c,l],animationIterationCount:[c,l]}}),o.e4,o.Ae)(s);customElements.define(i,d)}}]);

package/dist/umd/descope-loader-radial-index-js.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[72],{7603:(t,e,o)=>{o.r(e),o.d(e,{LoaderRadial:()=>p});var n=o(832),r=o(3535),i=o(8522);const s=(0,n.iY)("loader-radial");class a extends i.V{static get componentName(){return s}constructor(){super();const t=document.createElement("template");t.innerHTML="\n\t\t\t<style>\n\t\t\t\t@keyframes spin {\n\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t}\n\t\t\t\t:host {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t\t:host > div {\n\t\t\t\t\tanimation-name: spin;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<div></div>\n\t\t",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div"}}const p=(0,n.qC)((0,n.yk)({mappings:{display:{},width:(0,r.zy)({}),height:{},spinnerWidth:{property:"border-width"},spinnerStyle:{property:"border-style"},spinnerRadius:{property:"border-radius"},spinnerTopColor:{property:"border-top-color"},spinnerBottomColor:{property:"border-bottom-color"},spinnerRightColor:{property:"border-right-color"},spinnerLeftColor:{property:"border-left-color"},color:{},animationDuration:{},animationTimingFunction:{},animationIterationCount:{}}}),n.e4,n.Ae)(a);customElements.define(s,p)}}]);

package/dist/umd/index.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.DescopeUI=o():e.DescopeUI=o()}(self,(()=>(()=>{var e,o,t,r={534:(e,o,t)=>{var r={"./descope-button/index.js":[3029,840,767,211,513,729,832,662],"./descope-checkbox/index.js":[7904,840,786,208,767,515,832,761],"./descope-combo/index.js":[2798,840,786,208,233,422,767,725,211,789,513,729,832,447,934,662,247],"./descope-container/index.js":[147,832,317],"./descope-date-picker/index.js":[2552,840,786,208,233,767,211,513,54,832,17],"./descope-divider/index.js":[6446,832,528,942,178],"./descope-email-field/index.js":[689,840,786,208,233,422,725,437,832,447,760],"./descope-link/index.js":[8029,832,528,942,58],"./descope-logo/index.js":[4641,832,984],"./descope-number-field/index.js":[4951,840,786,208,233,422,806,832,447,142],"./descope-passcode/descope-passcode-internal/index.js":[4775,832,841],"./descope-passcode/index.js":[7102,840,786,208,233,422,725,789,832,447,934,841,939],"./descope-password-field/index.js":[1721,840,786,208,233,422,767,725,211,56,832,447,320],"./descope-switch-toggle/index.js":[3774,840,786,208,767,515,832,739],"./descope-text-area/index.js":[178,840,786,233,422,101,832,322],"./descope-text-field/index.js":[9357,840,786,208,233,422,725,789,832,447,934],"./descope-text/index.js":[1876,832,528]};function s(e){if(!t.o(r,e))return Promise.resolve().then((()=>{var o=new Error("Cannot find module '"+e+"'");throw o.code="MODULE_NOT_FOUND",o}));var o=r[e],s=o[0];return Promise.all(o.slice(1).map(t.e)).then((()=>t(s)))}s.keys=()=>Object.keys(r),s.id=534,e.exports=s},7507:(e,o,t)=>{const r=t(534);e.exports=r.keys().reduce(((e,o)=>(e[o.replace(/.*?([^\/]+)\/index\.js$/,"$1")]=()=>r(o),e)),{})}},s={};function n(e){var o=s[e];if(void 0!==o)return o.exports;var t=s[e]={exports:{}};return r[e](t,t.exports,n),t.exports}n.m=r,e=[],n.O=(o,t,r,s)=>{if(!t){var d=1/0;for(a=0;a<e.length;a++){for(var[t,r,s]=e[a],i=!0,c=0;c<t.length;c++)(!1&s||d>=s)&&Object.keys(n.O).every((e=>n.O[e](t[c])))?t.splice(c--,1):(i=!1,s<d&&(d=s));if(i){e.splice(a--,1);var p=r();void 0!==p&&(o=p)}}return o}s=s||0;for(var a=e.length;a>0&&e[a-1][2]>s;a--)e[a]=e[a-1];e[a]=[t,r,s]},n.F={},n.E=e=>{Object.keys(n.F).map((o=>{n.F[o](e)}))},n.d=(e,o)=>{for(var t in o)n.o(o,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:o[t]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce(((o,t)=>(n.f[t](e,o),o)),[])),n.u=e=>(({17:"descope-date-picker-index-js",58:"descope-link-index-js",142:"descope-number-field-index-js",178:"descope-divider-index-js",247:"descope-combo-index-js",317:"descope-container-index-js",320:"descope-password-field-index-js",322:"descope-text-area-index-js",528:"descope-text-index-js",662:"descope-button-index-js",739:"descope-switch-toggle-index-js",760:"descope-email-field-index-js",761:"descope-checkbox-index-js",841:"descope-passcode-descope-passcode-internal-index-js",934:"descope-text-field-index-js",939:"descope-passcode-index-js",984:"descope-logo-index-js"}[e]||e)+".js"),n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),o={},t="DescopeUI:",n.l=(e,r,s,d)=>{if(o[e])o[e].push(r);else{var i,c;if(void 0!==s)for(var p=document.getElementsByTagName("script"),a=0;a<p.length;a++){var l=p[a];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==t+s){i=l;break}}i||(c=!0,(i=document.createElement("script")).charset="utf-8",i.timeout=120,n.nc&&i.setAttribute("nonce",n.nc),i.setAttribute("data-webpack",t+s),i.src=e),o[e]=[r];var u=(t,r)=>{i.onerror=i.onload=null,clearTimeout(f);var s=o[e];if(delete o[e],i.parentNode&&i.parentNode.removeChild(i),s&&s.forEach((e=>e(r))),t)return t(r)},f=setTimeout(u.bind(null,void 0,{type:"timeout",target:i}),12e4);i.onerror=u.bind(null,i.onerror),i.onload=u.bind(null,i.onload),c&&document.head.appendChild(i)}},n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;n.g.importScripts&&(e=n.g.location+"");var o=n.g.document;if(!e&&o&&(o.currentScript&&(e=o.currentScript.src),!e)){var t=o.getElementsByTagName("script");t.length&&(e=t[t.length-1].src)}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),n.p=e})(),(()=>{var e={826:0};n.f.j=(o,t)=>{var r=n.o(e,o)?e[o]:void 0;if(0!==r)if(r)t.push(r[2]);else{var s=new Promise(((t,s)=>r=e[o]=[t,s]));t.push(r[2]=s);var d=n.p+n.u(o),i=new Error;n.l(d,(t=>{if(n.o(e,o)&&(0!==(r=e[o])&&(e[o]=void 0),r)){var s=t&&("load"===t.type?"missing":t.type),d=t&&t.target&&t.target.src;i.message="Loading chunk "+o+" failed.\n("+s+": "+d+")",i.name="ChunkLoadError",i.type=s,i.request=d,r[1](i)}}),"chunk-"+o,o)}},n.F.j=o=>{if(!n.o(e,o)||void 0===e[o]){e[o]=null;var t=document.createElement("link");n.nc&&t.setAttribute("nonce",n.nc),t.rel="prefetch",t.as="script",t.href=n.p+n.u(o),document.head.appendChild(t)}},n.O.j=o=>0===e[o];var o=(o,t)=>{var r,s,[d,i,c]=t,p=0;if(d.some((o=>0!==e[o]))){for(r in i)n.o(i,r)&&(n.m[r]=i[r]);if(c)var a=c(n)}for(o&&o(t);p<d.length;p++)s=d[p],n.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return n.O(a)},t=self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[];t.forEach(o.bind(null,0)),t.push=o.bind(null,t.push.bind(t))})(),n.O(0,[826],(()=>{[840,767,211,513,729,832,662,786,208,515,761,233,422,725,789,447,934,247,317,54,17,528,942,178,437,760,58,984,806,142,841,939,56,320,739,101,322].map(n.E)}),5);var d=n(7507);return n.O(d)})()));
+!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.DescopeUI=o():e.DescopeUI=o()}(self,(()=>(()=>{var e,o,r,t={534:(e,o,r)=>{var t={"./descope-button/index.js":[3029,840,767,211,513,729,832,662],"./descope-checkbox/index.js":[7904,840,786,208,767,515,832,761],"./descope-combo/index.js":[2798,840,786,208,233,422,767,725,211,789,513,729,832,447,934,662,247],"./descope-container/index.js":[147,832,317],"./descope-date-picker/index.js":[2552,840,786,208,233,767,211,513,54,832,17],"./descope-divider/index.js":[6446,832,528,942,178],"./descope-email-field/index.js":[689,840,786,208,233,422,725,437,832,447,760],"./descope-link/index.js":[8029,832,528,942,58],"./descope-loader-linear/index.js":[9929,832,453],"./descope-loader-radial/index.js":[7603,832,72],"./descope-logo/index.js":[4641,832,984],"./descope-number-field/index.js":[4951,840,786,208,233,422,806,832,447,142],"./descope-passcode/descope-passcode-internal/index.js":[4775,832,841],"./descope-passcode/index.js":[7102,840,786,208,233,422,725,789,832,447,934,841,939],"./descope-password-field/index.js":[1721,840,786,208,233,422,767,725,211,56,832,447,320],"./descope-switch-toggle/index.js":[3774,840,786,208,767,515,832,739],"./descope-text-area/index.js":[178,840,786,233,422,101,832,322],"./descope-text-field/index.js":[9357,840,786,208,233,422,725,789,832,447,934],"./descope-text/index.js":[1876,832,528]};function s(e){if(!r.o(t,e))return Promise.resolve().then((()=>{var o=new Error("Cannot find module '"+e+"'");throw o.code="MODULE_NOT_FOUND",o}));var o=t[e],s=o[0];return Promise.all(o.slice(1).map(r.e)).then((()=>r(s)))}s.keys=()=>Object.keys(t),s.id=534,e.exports=s},7507:(e,o,r)=>{const t=r(534);e.exports=t.keys().reduce(((e,o)=>(e[o.replace(/.*?([^\/]+)\/index\.js$/,"$1")]=()=>t(o),e)),{})}},s={};function n(e){var o=s[e];if(void 0!==o)return o.exports;var r=s[e]={exports:{}};return t[e](r,r.exports,n),r.exports}n.m=t,e=[],n.O=(o,r,t,s)=>{if(!r){var d=1/0;for(p=0;p<e.length;p++){for(var[r,t,s]=e[p],i=!0,c=0;c<r.length;c++)(!1&s||d>=s)&&Object.keys(n.O).every((e=>n.O[e](r[c])))?r.splice(c--,1):(i=!1,s<d&&(d=s));if(i){e.splice(p--,1);var a=t();void 0!==a&&(o=a)}}return o}s=s||0;for(var p=e.length;p>0&&e[p-1][2]>s;p--)e[p]=e[p-1];e[p]=[r,t,s]},n.F={},n.E=e=>{Object.keys(n.F).map((o=>{n.F[o](e)}))},n.d=(e,o)=>{for(var r in o)n.o(o,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:o[r]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce(((o,r)=>(n.f[r](e,o),o)),[])),n.u=e=>(({17:"descope-date-picker-index-js",58:"descope-link-index-js",72:"descope-loader-radial-index-js",142:"descope-number-field-index-js",178:"descope-divider-index-js",247:"descope-combo-index-js",317:"descope-container-index-js",320:"descope-password-field-index-js",322:"descope-text-area-index-js",453:"descope-loader-linear-index-js",528:"descope-text-index-js",662:"descope-button-index-js",739:"descope-switch-toggle-index-js",760:"descope-email-field-index-js",761:"descope-checkbox-index-js",841:"descope-passcode-descope-passcode-internal-index-js",934:"descope-text-field-index-js",939:"descope-passcode-index-js",984:"descope-logo-index-js"}[e]||e)+".js"),n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),o={},r="DescopeUI:",n.l=(e,t,s,d)=>{if(o[e])o[e].push(t);else{var i,c;if(void 0!==s)for(var a=document.getElementsByTagName("script"),p=0;p<a.length;p++){var l=a[p];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==r+s){i=l;break}}i||(c=!0,(i=document.createElement("script")).charset="utf-8",i.timeout=120,n.nc&&i.setAttribute("nonce",n.nc),i.setAttribute("data-webpack",r+s),i.src=e),o[e]=[t];var u=(r,t)=>{i.onerror=i.onload=null,clearTimeout(f);var s=o[e];if(delete o[e],i.parentNode&&i.parentNode.removeChild(i),s&&s.forEach((e=>e(t))),r)return r(t)},f=setTimeout(u.bind(null,void 0,{type:"timeout",target:i}),12e4);i.onerror=u.bind(null,i.onerror),i.onload=u.bind(null,i.onload),c&&document.head.appendChild(i)}},n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;n.g.importScripts&&(e=n.g.location+"");var o=n.g.document;if(!e&&o&&(o.currentScript&&(e=o.currentScript.src),!e)){var r=o.getElementsByTagName("script");r.length&&(e=r[r.length-1].src)}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),n.p=e})(),(()=>{var e={826:0};n.f.j=(o,r)=>{var t=n.o(e,o)?e[o]:void 0;if(0!==t)if(t)r.push(t[2]);else{var s=new Promise(((r,s)=>t=e[o]=[r,s]));r.push(t[2]=s);var d=n.p+n.u(o),i=new Error;n.l(d,(r=>{if(n.o(e,o)&&(0!==(t=e[o])&&(e[o]=void 0),t)){var s=r&&("load"===r.type?"missing":r.type),d=r&&r.target&&r.target.src;i.message="Loading chunk "+o+" failed.\n("+s+": "+d+")",i.name="ChunkLoadError",i.type=s,i.request=d,t[1](i)}}),"chunk-"+o,o)}},n.F.j=o=>{if(!n.o(e,o)||void 0===e[o]){e[o]=null;var r=document.createElement("link");n.nc&&r.setAttribute("nonce",n.nc),r.rel="prefetch",r.as="script",r.href=n.p+n.u(o),document.head.appendChild(r)}},n.O.j=o=>0===e[o];var o=(o,r)=>{var t,s,[d,i,c]=r,a=0;if(d.some((o=>0!==e[o]))){for(t in i)n.o(i,t)&&(n.m[t]=i[t]);if(c)var p=c(n)}for(o&&o(r);a<d.length;a++)s=d[a],n.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return n.O(p)},r=self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[];r.forEach(o.bind(null,0)),r.push=o.bind(null,r.push.bind(r))})(),n.O(0,[826],(()=>{[840,767,211,513,729,832,662,786,208,515,761,233,422,725,789,447,934,247,317,54,17,528,942,178,437,760,58,453,72,984,806,142,841,939,56,320,739,101,322].map(n.E)}),5);var d=n(7507);return n.O(d)})()));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/web-components-ui",
-	"version": "1.0.54",
+	"version": "1.0.56",
 	"description": "",
 	"main": "dist/cjs/index.cjs.js",
 	"module": "dist/index.esm.js",

package/src/components/descope-loader-linear/LoaderLinear.js

@@ -0,0 +1,72 @@
+import {
+	getComponentName,
+	createStyleMixin,
+	draggableMixin,
+	compose,
+	componentNameValidationMixin
+} from '../../componentsHelpers';
+import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
+import { DescopeBaseClass } from '../DescopeBaseClass';
+
+export const componentName = getComponentName('loader-linear');
+
+class RawLoaderLinear extends DescopeBaseClass {
+	static get componentName() {
+		return componentName;
+	}
+	constructor() {
+		super();
+		const template = document.createElement('template');
+		template.innerHTML = `
+			<style>
+				@keyframes tilt {
+					0% { transform: translateX(0); }
+					50% { transform: translateX(400%); }
+				}
+				:host {
+					position: relative;
+				}
+				div::after {
+					content: '';
+					animation-name: tilt;
+					position: absolute;
+					left: 0;
+				}
+			</style>
+			<div></div>
+		`;
+
+		this.attachShadow({ mode: 'open' });
+		this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+		this.baseSelector = ':host > div';
+	}
+}
+
+const selectors = {
+	root: {},
+	after: { selector: '::after' }
+};
+
+const { root, after } = selectors;
+
+const LoaderLinear = compose(
+	createStyleMixin({
+		mappings: {
+			display: root,
+			width: matchHostStyle(root),
+			height: [root, after],
+			borderRadius: [root, after],
+			surfaceColor: [{ property: 'background-color' }],
+			barColor: [{ ...after, property: 'background-color' }],
+			barWidth: { ...after, property: 'width' },
+			animationDuration: [root, after],
+			animationTimingFunction: [root, after],
+			animationIterationCount: [root, after]
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawLoaderLinear);
+
+export default LoaderLinear;

package/src/components/descope-loader-linear/index.js

@@ -0,0 +1,5 @@
+import LoaderLinear, { componentName } from './LoaderLinear';
+
+customElements.define(componentName, LoaderLinear);
+
+export { LoaderLinear };

package/src/components/descope-loader-radial/LoaderRadial.js

@@ -0,0 +1,66 @@
+import {
+	getComponentName,
+	createStyleMixin,
+	draggableMixin,
+	compose,
+	componentNameValidationMixin
+} from '../../componentsHelpers';
+import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
+import { DescopeBaseClass } from '../DescopeBaseClass';
+
+export const componentName = getComponentName('loader-radial');
+
+class RawLoaderRadial extends DescopeBaseClass {
+	static get componentName() {
+		return componentName;
+	}
+	constructor() {
+		super();
+		const template = document.createElement('template');
+		template.innerHTML = `
+			<style>
+				@keyframes spin {
+					0% { transform: rotate(0deg); }
+					100% { transform: rotate(360deg); }
+				}
+				:host {
+					position: relative;
+				}
+				:host > div {
+					animation-name: spin;
+				}
+			</style>
+			<div></div>
+		`;
+
+		this.attachShadow({ mode: 'open' });
+		this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+		this.baseSelector = ':host > div';
+	}
+}
+
+const LoaderRadial = compose(
+	createStyleMixin({
+		mappings: {
+			display: {},
+			width: matchHostStyle({}),
+			height: {},
+			spinnerWidth: { property: 'border-width' },
+			spinnerStyle: { property: 'border-style' },
+			spinnerRadius: { property: 'border-radius' },
+			spinnerTopColor: { property: 'border-top-color' },
+			spinnerBottomColor: { property: 'border-bottom-color' },
+			spinnerRightColor: { property: 'border-right-color' },
+			spinnerLeftColor: { property: 'border-left-color' },
+			color: {},
+			animationDuration: {},
+			animationTimingFunction: {},
+			animationIterationCount: {}
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawLoaderRadial);
+
+export default LoaderRadial;

package/src/components/descope-loader-radial/index.js

@@ -0,0 +1,5 @@
+import LoaderRadial, { componentName } from './LoaderRadial';
+
+customElements.define(componentName, LoaderRadial);
+
+export { LoaderRadial };

package/src/index.js

@@ -1,17 +1,21 @@
 import './components/descope-button';
+import './components/descope-checkbox';
+import './components/descope-loader-linear';
+import './components/descope-loader-radial';
 import './components/descope-combo';
-import './components/descope-text-field';
-import './components/descope-number-field';
-import './components/descope-email-field';
-import './components/descope-password-field';
-import './components/descope-text-area';
-import './components/descope-date-picker';
 import './components/descope-container';
-import './components/descope-text';
-import './components/descope-link';
+import './components/descope-date-picker';
 import './components/descope-divider';
+import './components/descope-email-field';
+import './components/descope-link';
 import './components/descope-logo';
-import './components/descope-checkbox';
+import './components/descope-number-field';
+import './components/descope-passcode';
+import './components/descope-password-field';
+import './components/descope-switch-toggle';
+import './components/descope-text';
+import './components/descope-text-area';
+import './components/descope-text-field';
 
 export {
 	globalsThemeToStyle,

package/src/theme/components/index.js

@@ -12,6 +12,7 @@ import text from './text';
 import link from './link';
 import divider from './divider';
 import passcode from './passcode';
+import { loaderRadial, loaderLinear } from './loader';
 
 export default {
 	button,
@@ -27,5 +28,7 @@ export default {
 	text,
 	link,
 	divider,
-	passcode
+	passcode,
+	loaderRadial,
+	loaderLinear
 };

package/src/theme/components/loader/index.js

@@ -0,0 +1,2 @@
+export { default as loaderLinear } from './loaderLinear';
+export { default as loaderRadial } from './loaderRadial';

package/src/theme/components/loader/loaderLinear.js

@@ -0,0 +1,49 @@
+import LoaderLinear from '../../../components/descope-loader-linear/LoaderLinear';
+import { getThemeRefs } from '../../../themeHelpers';
+import globals from '../../globals';
+
+const globalRefs = getThemeRefs(globals);
+
+const vars = LoaderLinear.cssVarList;
+
+const loaderLinear = {
+	[vars.display]: 'inline-block',
+	[vars.barColor]: globalRefs.colors.surface.contrast,
+	[vars.barWidth]: '20%',
+	[vars.surfaceColor]: globalRefs.colors.surface.main,
+	[vars.borderRadius]: '4px',
+	[vars.animationDuration]: '2s',
+	[vars.animationTimingFunction]: 'linear',
+	[vars.animationIterationCount]: 'infinite',
+	[vars.width]: '100%',
+	size: {
+		xs: {
+			[vars.height]: '6px'
+		},
+		sm: {
+			[vars.height]: '8px'
+		},
+		md: {
+			[vars.height]: '10px'
+		},
+		lg: {
+			[vars.height]: '12px'
+		},
+		xl: {
+			[vars.height]: '14px'
+		}
+	},
+	mode: {
+		primary: {
+			[vars.barColor]: globalRefs.colors.primary.main
+		},
+		secondary: {
+			[vars.barColor]: globalRefs.colors.secondary.main
+		}
+	},
+	_hidden: {
+		[vars.display]: 'none'
+	}
+};
+
+export default loaderLinear;

package/src/theme/components/loader/loaderRadial.js

@@ -0,0 +1,62 @@
+import LoaderRadial from '../../../components/descope-loader-radial/LoaderRadial';
+import { getThemeRefs } from '../../../themeHelpers';
+import globals from '../../globals';
+
+const globalRefs = getThemeRefs(globals);
+
+const vars = LoaderRadial.cssVarList;
+
+const loaderRadial = {
+	[vars.display]: 'inline-block',
+	[vars.color]: globalRefs.colors.surface.contrast,
+	[vars.animationDuration]: '2s',
+	[vars.animationTimingFunction]: 'linear',
+	[vars.animationIterationCount]: 'infinite',
+	[vars.spinnerStyle]: 'solid',
+	[vars.spinnerWidth]: '4px',
+	[vars.spinnerRadius]: '50%',
+	[vars.spinnerTopColor]: 'currentColor',
+	[vars.spinnerBottomColor]: 'transparent',
+	[vars.spinnerRightColor]: 'currentColor',
+	[vars.spinnerLeftColor]: 'transparent',
+	size: {
+		xs: {
+			[vars.width]: '20px',
+			[vars.height]: '20px',
+			[vars.spinnerWidth]: '2px'
+		},
+		sm: {
+			[vars.width]: '30px',
+			[vars.height]: '30px',
+			[vars.spinnerWidth]: '3px'
+		},
+		md: {
+			[vars.width]: '40px',
+			[vars.height]: '40px',
+			[vars.spinnerWidth]: '4px'
+		},
+		lg: {
+			[vars.width]: '60px',
+			[vars.height]: '60px',
+			[vars.spinnerWidth]: '5px'
+		},
+		xl: {
+			[vars.width]: '80px',
+			[vars.height]: '80px',
+			[vars.spinnerWidth]: '6px'
+		}
+	},
+	mode: {
+		primary: {
+			[vars.color]: globalRefs.colors.primary.main
+		},
+		secondary: {
+			[vars.color]: globalRefs.colors.secondary.main
+		}
+	},
+	_hidden: {
+		[vars.display]: 'none'
+	}
+};
+
+export default loaderRadial;

package/src/theme/components/textArea.js

@@ -15,10 +15,6 @@ const textArea = {
 	[vars.borderStyle]: 'solid',
 	[vars.borderColor]: 'transparent',
 
-	_borderOffset: {
-		[vars.outlineOffset]: '2px'
-	},
-
 	_bordered: {
 		[vars.borderColor]: globalRefs.colors.surface.main
 	},

package/src/theme/components/textField.js

@@ -45,10 +45,6 @@ export const textField = (vars) => ({
 	[vars.borderColor]: 'transparent',
 	[vars.borderRadius]: globalRefs.radius.sm,
 
-	_borderOffset: {
-		[vars.outlineOffset]: '2px'
-	},
-
 	_disabled: {
 		[vars.color]: globalRefs.colors.surface.dark,
 		[vars.placeholderColor]: globalRefs.colors.surface.light,