@rolster/react-components 18.12.9 → 18.13.0

package/dist/esm/components/atoms/MessageIcon/MessageIcon.css

@@ -1,12 +1,12 @@
 .rls-message-icon {
-  --rls-icon-color: var(--color-rolster-500);
-  --rls-icon-width: var(--sizing-x8);
-  --rls-icon-height: var(--sizing-x8);
-  --rls-icon-font-size: var(--sizing-x8);
+  --rlc-icon-color: var(--rls-theme-color-500);
+  --rlc-icon-width: var(--rls-sizing-x8);
+  --rlc-icon-height: var(--rls-sizing-x8);
+  --rlc-icon-font-size: var(--rls-sizing-x8);
   display: flex;
   align-items: center;
-  column-gap: var(--sizing-x2);
+  column-gap: var(--rls-sizing-x2);
 }
 .rls-message-icon span {
-  color: var(--color-theme-300);
+  color: var(--rls-app-color-300);
 }

package/dist/esm/components/atoms/Poster/Poster.css

@@ -2,11 +2,11 @@
   position: relative;
   float: left;
   width: auto;
-  height: var(--rls-poster-height);
-  line-height: var(--rls-poster-height);
-  padding: var(--rls-poster-padding);
+  height: var(--rlc-poster-height);
+  line-height: var(--rlc-poster-height);
+  padding: var(--rlc-poster-padding);
   box-sizing: border-box;
-  border-radius: var(--sizing-x2);
-  color: var(--color-light-500);
-  background: var(--gradient-rolster-500);
+  border-radius: var(--rls-sizing-x2);
+  color: var(--rls-light-color-500);
+  background: var(--rls-theme-gradient-500);
 }

package/dist/esm/components/atoms/ProgressBar/ProgressBar.css

@@ -3,9 +3,9 @@
   position: relative;
   float: left;
   width: 100%;
-  height: var(--sizing-x2);
+  height: var(--rls-sizing-x2);
   overflow: hidden;
-  background: var(--color-rolster-100);
+  background: var(--rls-theme-color-100);
 }
 .rls-progress-bar--indeterminate {
   --pvt-component-display: none;
@@ -16,8 +16,8 @@
   content: '';
   top: 0rem;
   width: 0%;
-  height: var(--sizing-x2);
-  background: var(--gradient-rolster-500);
+  height: var(--rls-sizing-x2);
+  background: var(--rls-theme-gradient-500);
 }
 .rls-progress-bar--indeterminate::after {
   animation: progress-bar-indeterminate-after 2000ms infinite;
@@ -29,10 +29,10 @@
   position: absolute;
   top: 0rem;
   width: 0%;
-  height: var(--sizing-x4);
+  height: var(--rls-sizing-x4);
   display: var(--pvt-component-display);
-  background: var(--gradient-rolster-500);
-  transition: width 320ms 0ms var(--standard-curve);
+  background: var(--rls-theme-gradient-500);
+  transition: width 320ms 0ms var(--rls-standard-curve);
 }
 
 @keyframes progress-bar-indeterminate-before {

package/dist/esm/components/atoms/ProgressCircular/ProgressCircular.css

@@ -0,0 +1,44 @@
+.rls-progress-circular {
+  position: relative;
+  width: var(--rlc-progress-circular-dimension);
+  height: var(--rlc-progress-circular-dimension);
+  padding: var(--rls-sizing-x2);
+  box-sizing: border-box;
+  stroke: var(--rls-theme-color-500);
+}
+.rls-progress-circular__svg {
+  height: 100%;
+  width: 100%;
+  transform: rotate(990deg);
+  animation: progress-circular-svg 3500ms linear infinite;
+}
+.rls-progress-circular__circle {
+  fill: none;
+  stroke-width: 4px;
+  stroke: inherit;
+  stroke-dasharray: 65;
+  stroke-dashoffset: 65;
+  opacity: 1;
+  animation: progress-circular-circle 1750ms var(--rls-standard-curve) infinite;
+}
+
+@keyframes progress-circular-svg {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes progress-circular-circle {
+  50% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: -65;
+  }
+}

package/dist/esm/components/atoms/ProgressCircular/ProgressCircular.d.ts

@@ -0,0 +1,7 @@
+import { RlsTheme } from '../../definitions';
+import './ProgressCircular.css';
+interface ProgressCircularProps {
+    rlsTheme?: RlsTheme;
+}
+export declare function RlsProgressCircular({ rlsTheme }: ProgressCircularProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/atoms/ProgressCircular/ProgressCircular.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './ProgressCircular.css';
+export function RlsProgressCircular({ rlsTheme }) {
+    return (_jsx("div", { className: "rls-progress-circular", "rls-theme": rlsTheme, children: _jsx("svg", { className: "rls-progress-circular__svg", viewBox: "0 0 36 36", children: _jsx("circle", { className: "rls-progress-circular__circle", cx: "18", cy: "18", r: "12" }) }) }));
+}
+//# sourceMappingURL=ProgressCircular.js.map

package/dist/esm/components/atoms/ProgressCircular/ProgressCircular.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCircular.js","sourceRoot":"","sources":["../../../../../src/components/atoms/ProgressCircular/ProgressCircular.tsx"],"names":[],"mappings":";AACA,OAAO,wBAAwB,CAAC;AAMhC,MAAM,UAAU,mBAAmB,CAAC,EAAE,QAAQ,EAAyB;IACrE,OAAO,CACL,cAAK,SAAS,EAAC,uBAAuB,eAAY,QAAQ,YACxD,cAAK,SAAS,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,YAC7D,iBACE,SAAS,EAAC,+BAA+B,EACzC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,GACE,GACN,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/atoms/RadioButton/RadioButton.css

@@ -4,18 +4,18 @@
   float: left;
   display: flex;
   outline: none;
-  width: var(--sizing-x12);
-  height: var(--sizing-x12);
+  width: var(--rls-sizing-x12);
+  height: var(--rls-sizing-x12);
   border-radius: 50%;
   box-sizing: border-box;
-  border: var(--border-1-theme-300);
+  border: var(--rls-app-border-1-300);
 }
 .rls-radiobutton:hover {
   cursor: pointer;
 }
 .rls-radiobutton--checked {
   --pvt-component-transform: scale(1);
-  border: var(--border-1-rolster-500);
+  border: var(--rls-theme-border-1-500);
 }
 .rls-radiobutton--disabled {
   opacity: 0.5;
@@ -26,8 +26,8 @@
   width: 7rem;
   height: 7rem;
   margin: auto;
-  background: var(--gradient-rolster-500);
+  background: var(--rls-theme-gradient-500);
   transform: var(--pvt-component-transform);
   transform-origin: 50% 50%;
-  transition: all 160ms 0ms var(--standard-curve);
+  transition: all 160ms 0ms var(--rls-standard-curve);
 }

package/dist/esm/components/atoms/SearchInput/SearchInput.css

@@ -1,11 +1,11 @@
 .rls-search-input {
-  --rls-input-height: var(--sizing-x14);
+  --rlc-input-height: var(--rls-sizing-x14);
   position: relative;
   float: left;
   display: flex;
   align-items: center;
-  padding: var(--sizing-x4) var(--sizing-x6);
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
   box-sizing: border-box;
-  border: var(--border-1-theme-300);
-  border-radius: var(--sizing-x4);
+  border: var(--rls-app-border-1-300);
+  border-radius: var(--rls-sizing-x4);
 }

package/dist/esm/components/atoms/Skeleton/Skeleton.css

@@ -8,8 +8,8 @@
   line-height: inherit;
   letter-spacing: inherit;
   overflow: hidden;
-  background: var(--color-rolster-100);
-  border-radius: var(--sizing-x2);
+  background: var(--rls-theme-color-100);
+  border-radius: var(--rls-sizing-x2);
 }
 .rls-skeleton::after {
   position: absolute;
@@ -21,10 +21,10 @@
   transform: translateX(-100%);
   background-image: linear-gradient(
     90deg,
-    var(--skeleton-rolster-100) 0%,
-    var(--skeleton-rolster-100) 20%,
-    var(--skeleton-rolster-300) 60%,
-    var(--skeleton-rolster-100)
+    var(--rls-theme-skeleton-100) 0%,
+    var(--rls-theme-skeleton-100) 20%,
+    var(--rls-theme-skeleton-300) 60%,
+    var(--rls-theme-skeleton-100)
   );
   animation: skeleton-animation 1600ms infinite;
 }

package/dist/esm/components/atoms/SkeletonText/SkeletonText.css

@@ -1,7 +1,6 @@
 .rls-skeleton-text {
   --pvt-value-visibility: visible;
   position: relative;
-  float: left;
   width: 100%;
   max-height: inherit;
   min-height: inherit;
@@ -12,8 +11,8 @@
 }
 .rls-skeleton-text--active {
   --pvt-value-visibility: hidden;
-  background: var(--color-rolster-100);
-  border-radius: var(--sizing-x2);
+  background: var(--rls-theme-color-100);
+  border-radius: var(--rls-sizing-x2);
 }
 .rls-skeleton-text--active::after {
   animation: skeleton-text-animation 1600ms infinite;
@@ -28,16 +27,15 @@
   transform: translateX(-100%);
   background-image: linear-gradient(
     90deg,
-    var(--skeleton-rolster-100) 0%,
-    var(--skeleton-rolster-100) 20%,
-    var(--skeleton-rolster-300) 60%,
-    var(--skeleton-rolster-100)
+    var(--rls-theme-skeleton-100) 0%,
+    var(--rls-theme-skeleton-100) 20%,
+    var(--rls-theme-skeleton-300) 60%,
+    var(--rls-theme-skeleton-100)
   );
 }
 .rls-skeleton-text__value {
   position: relative;
   display: block;
-  float: left;
   width: 100%;
   height: inherit;
   max-height: inherit;

package/dist/esm/components/atoms/Switch/Switch.css

@@ -1,18 +1,18 @@
 .rls-switch {
-  --pvt-element-left: var(--sizing-x1);
-  --pvt-element-background: var(--background-theme-500);
-  --pvt-bar-background: var(--background-theme-100);
-  max-width: var(--sizing-x20);
+  --pvt-element-left: var(--rls-sizing-x1);
+  --pvt-element-background: var(--rls-app-background-500);
+  --pvt-bar-background: var(--rls-app-background-100);
+  max-width: var(--rls-sizing-x20);
 }
 .rls-switch:hover {
   cursor: pointer;
 }
 .rls-switch--checked {
-  --pvt-element-background: var(--gradient-rolster-500);
+  --pvt-element-background: var(--rls-theme-gradient-500);
   --pvt-element-left: calc(
-    100% - var(--rls-switch-element-size) - var(--sizing-x1)
+    100% - var(--rlc-switch-element-size) - var(--rls-sizing-x1)
   );
-  --pvt-bar-background: var(--color-rolster-300);
+  --pvt-bar-background: var(--rls-theme-color-300);
 }
 .rls-switch--disabled {
   opacity: 0.5;
@@ -21,22 +21,22 @@
 .rls-switch__component {
   position: relative;
   width: 100%;
-  padding: var(--sizing-x3) var(--sizing-x1);
+  padding: var(--rls-sizing-x3) var(--rls-sizing-x1);
   box-sizing: border-box;
 }
 .rls-switch__component__element {
   position: absolute;
   top: 0rem;
   left: var(--pvt-element-left);
-  width: var(--rls-switch-element-size);
-  height: var(--rls-switch-element-size);
-  z-index: var(--z-index-2);
-  padding: var(--sizing-x2);
+  width: var(--rlc-switch-element-size);
+  height: var(--rlc-switch-element-size);
+  z-index: var(--rls-z-index-2);
+  padding: var(--rls-sizing-x2);
   box-sizing: border-box;
   border-radius: 50%;
-  background: var(--background-theme-500);
+  background: var(--rls-app-background-500);
   box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
-  transition: left 240ms var(--standard-curve);
+  transition: left 240ms var(--rls-standard-curve);
 }
 .rls-switch__component__element::before {
   display: block;
@@ -49,6 +49,6 @@
 .rls-switch__component__bar {
   background: var(--pvt-bar-background);
   width: 100%;
-  height: var(--rls-switch-bar-height);
-  border-radius: var(--rls-switch-bar-radius);
+  height: var(--rlc-switch-bar-height);
+  border-radius: var(--rlc-switch-bar-radius);
 }

package/dist/esm/components/atoms/TabularText/TabularText.css

@@ -5,11 +5,11 @@
   display: block;
   float: left;
   text-align: center;
-  width: var(--rls-tabulartext-char-width);
+  width: var(--rlc-tabulartext-char-width);
 }
 .rls-tabular-text__pointer {
   display: block;
   float: left;
   text-align: center;
-  width: var(--rls-tabulartext-pointer-width);
+  width: var(--rlc-tabulartext-pointer-width);
 }

package/dist/esm/components/atoms/index.d.ts

@@ -15,6 +15,7 @@ export * from './Label/Label';
 export * from './MessageIcon/MessageIcon';
 export * from './Poster/Poster';
 export * from './ProgressBar/ProgressBar';
+export * from './ProgressCircular/ProgressCircular';
 export * from './RadioButton/RadioButton';
 export * from './SearchInput/SearchInput';
 export * from './Skeleton/Skeleton';

package/dist/esm/components/atoms/index.js

@@ -15,6 +15,7 @@ export * from './Label/Label';
 export * from './MessageIcon/MessageIcon';
 export * from './Poster/Poster';
 export * from './ProgressBar/ProgressBar';
+export * from './ProgressCircular/ProgressCircular';
 export * from './RadioButton/RadioButton';
 export * from './SearchInput/SearchInput';
 export * from './Skeleton/Skeleton';

package/dist/esm/components/atoms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qCAAqC,CAAC;AACpD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC"}

package/dist/esm/components/definitions.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export type RlsTheme = 'primary' | 'success' | 'info' | 'happy' | 'warning' | 'danger' | 'coffee' | 'obsidian';
+export type RlsTheme = 'standard' | 'success' | 'info' | 'warning' | 'danger' | 'amaizing' | 'smartness' | 'obsidian';
 export interface RlsComponent {
     children?: ReactNode;
     rlsTheme?: RlsTheme;

package/dist/esm/components/molecules/Ballot/Ballot.css

@@ -1,58 +1,51 @@
 .rls-ballot {
-  --rls-avatar-width: var(--sizing-x20);
-  --rls-avatar-height: var(--sizing-x20);
+  --rlc-avatar-width: var(--rls-sizing-x20);
+  --rlc-avatar-height: var(--rls-sizing-x20);
   position: relative;
-  float: left;
   display: flex;
   width: 100%;
-  padding: var(--sizing-x4);
+  align-content: center;
+  column-gap: var(--rls-sizing-x4);
+  padding: var(--rls-sizing-x4);
   box-sizing: border-box;
   overflow: hidden;
 }
 .rls-ballot--bordered {
-  border-radius: var(--sizing-x4);
-  border: var(--border-1-theme-300);
+  border-radius: var(--rls-sizing-x4);
+  border: var(--rls-app-border-1-300);
 }
 .rls-ballot--skeleton {
-  --subtitle-width: 60%;
-}
-.rls-ballot > .rls-avatar {
-  margin: auto 0rem;
-}
-.rls-ballot > .rls-avatar + .rls-ballot__component {
-  width: calc(100% - var(--sizing-x28));
-  margin-left: var(--sizing-x4);
+  --rls-subtitle-width: 60%;
 }
 .rls-ballot__component {
+  display: flex;
   overflow: hidden;
-  margin: auto;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x2);
 }
 .rls-ballot__title {
   position: relative;
-  float: left;
   width: 100%;
-  color: var(--color-theme-500);
+  color: var(--rls-app-color-500);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  font-weight: var(--font-weight-medium);
-  font-size: var(--label-font-size);
-  letter-spacing: var(--label-letter-spacing);
-  min-height: var(--label-line-height);
-  line-height: var(--label-line-height);
+  font-weight: var(--rls-font-weight-medium);
+  font-size: var(--rls-label-font-size);
+  letter-spacing: var(--rls-label-letter-spacing);
+  min-height: var(--rls-label-line-height);
+  line-height: var(--rls-label-line-height);
 }
 .rls-ballot__subtitle {
   position: relative;
-  float: left;
-  width: var(--rls-ballot-subtitle-width);
-  color: var(--color-theme-300);
-  margin-top: var(--sizing-x2);
-  font-weight: var(--font-weight-semibold);
-  font-size: var(--smalltext-font-size);
-  letter-spacing: var(--smalltext-letter-spacing);
-  min-height: var(--rls-ballot-subtitle-height);
-  line-height: var(--rls-ballot-subtitle-height);
-  overflow: var(--rls-ballot-subtitle-overflow);
-  text-overflow: var(--rls-ballot-subtitle-text-overflow);
-  white-space: var(--rls-ballot-subtitle-white-space);
+  width: var(--rlc-ballot-subtitle-width);
+  color: var(--rls-app-color-300);
+  font-weight: var(--rls-font-weight-semibold);
+  font-size: var(--rls-smalltext-font-size);
+  letter-spacing: var(--rls-smalltext-letter-spacing);
+  min-height: var(--rlc-ballot-subtitle-height);
+  line-height: var(--rlc-ballot-subtitle-height);
+  overflow: var(--rlc-ballot-subtitle-overflow);
+  text-overflow: var(--rlc-ballot-subtitle-text-overflow);
+  white-space: var(--rlc-ballot-subtitle-white-space);
 }

package/dist/esm/components/molecules/ButtonProgress/ButtonProgress.css

@@ -0,0 +1,7 @@
+.rls-button-progress {
+  --rlc-progress-circular-dimension: var(--rls-sizing-x16);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/dist/esm/components/molecules/ButtonProgress/ButtonProgress.d.ts

@@ -0,0 +1,12 @@
+import { MouseEventHandler } from 'react';
+import { RlsTheme } from '../../definitions';
+import './ButtonProgress.css';
+interface ButtonProgressProps {
+    icon: string;
+    disabled?: boolean;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    progressing?: boolean;
+    rlsTheme?: RlsTheme;
+}
+export declare function RlsButtonProgress({ icon, disabled, onClick, progressing, rlsTheme }: ButtonProgressProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/molecules/ButtonProgress/ButtonProgress.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { renderClassStatus } from '../../../helpers/css';
+import { RlsButtonAction, RlsProgressCircular } from '../../atoms';
+import './ButtonProgress.css';
+export function RlsButtonProgress({ icon, disabled, onClick, progressing, rlsTheme }) {
+    return (_jsxs("div", { className: renderClassStatus('rls-button-progress', { progressing }), "rls-theme": rlsTheme, children: [!progressing && (_jsx(RlsButtonAction, { icon: icon, onClick: onClick, disabled: disabled })), progressing && _jsx(RlsProgressCircular, {})] }));
+}
+//# sourceMappingURL=ButtonProgress.js.map

package/dist/esm/components/molecules/ButtonProgress/ButtonProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonProgress.js","sourceRoot":"","sources":["../../../../../src/components/molecules/ButtonProgress/ButtonProgress.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAEnE,OAAO,sBAAsB,CAAC;AAU9B,MAAM,UAAU,iBAAiB,CAAC,EAChC,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,WAAW,EACX,QAAQ,EACY;IACpB,OAAO,CACL,eACE,SAAS,EAAE,iBAAiB,CAAC,qBAAqB,EAAE,EAAE,WAAW,EAAE,CAAC,eACzD,QAAQ,aAElB,CAAC,WAAW,IAAI,CACf,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACtE,EACA,WAAW,IAAI,KAAC,mBAAmB,KAAG,IACnC,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.css

@@ -6,34 +6,36 @@
   justify-content: center;
 }
 .rls-button-toggle__action {
-  --rls-button-content-radius: var(--sizing-x2) 0rem 0rem var(--sizing-x2);
+  --rlc-button-content-radius: var(--rls-sizing-x2) 0rem 0rem
+    var(--rls-sizing-x2);
   width: auto;
 }
 .rls-button-toggle__icon {
-  --rls-button-content-radius: 0rem var(--sizing-x2) var(--sizing-x2) 0rem;
-  --rls-button-content-padding: var(--sizing-x2);
+  --rlc-button-content-radius: 0rem var(--rls-sizing-x2) var(--rls-sizing-x2)
+    0rem;
+  --rlc-button-content-padding: var(--rls-sizing-x2);
   width: auto;
 }
 .rls-button-toggle__list {
-  --rls-button-toggle-ul-height: 0rem;
-  --rls-button-toggle-ul-opacity: 0;
-  --rls-button-toggle-ul-transform: none;
+  --rlc-button-toggle-ul-height: 0rem;
+  --rlc-button-toggle-ul-opacity: 0;
+  --rlc-button-toggle-ul-transform: none;
   position: absolute;
   top: 22.5rem;
   left: 0rem;
   width: 100%;
   height: 0rem;
   overflow: hidden;
-  z-index: var(--z-index-4);
+  z-index: var(--rls-z-index-4);
 }
 .rls-button-toggle__list--hide {
-  --rls-button-toggle-ul-opacity: 0;
-  --rls-button-toggle-ul-transform: scale(0, 0);
+  --rlc-button-toggle-ul-opacity: 0;
+  --rlc-button-toggle-ul-transform: scale(0, 0);
 }
 .rls-button-toggle__list--visible {
-  --rls-button-toggle-ul-height: auto;
-  --rls-button-toggle-ul-opacity: 1;
-  --rls-button-toggle-ul-transform: scale(1, 1);
+  --rlc-button-toggle-ul-height: auto;
+  --rlc-button-toggle-ul-opacity: 1;
+  --rlc-button-toggle-ul-transform: scale(1, 1);
   overflow: initial;
   opacity: 1;
   height: auto;
@@ -44,36 +46,36 @@
   flex-direction: column;
   float: left;
   width: 100%;
-  height: var(--rls-button-toggle-ul-height);
-  opacity: var(--rls-button-toggle-ul-opacity);
-  padding: var(--sizing-x4) 0rem;
-  border-radius: var(--sizing-x4);
+  height: var(--rlc-button-toggle-ul-height);
+  opacity: var(--rlc-button-toggle-ul-opacity);
+  padding: var(--rls-sizing-x4) 0rem;
+  border-radius: var(--rls-sizing-x4);
   box-sizing: border-box;
   overflow-y: auto;
   overflow-x: hidden;
-  z-index: var(--z-index-2);
-  background: var(--background-theme-500);
-  border: var(--border-1-rolster-500);
-  transform: var(--rls-button-toggle-ul-transform);
+  z-index: var(--rls-z-index-2);
+  background: var(--rls-app-background-500);
+  border: var(--rls-theme-border-1-500);
+  transform: var(--rlc-button-toggle-ul-transform);
   transform-origin: 0% 0%;
-  transition: transform 240ms 0ms var(--standard-curve),
-    opacity 240ms 0ms var(--standard-curve);
+  transition: transform 240ms 0ms var(--rls-standard-curve),
+    opacity 240ms 0ms var(--rls-standard-curve);
   will-change: opacity, transform;
-  box-shadow: 0px 0px 0px 3px var(--box-shadow-rolster-500);
+  box-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
 }
 .rls-button-toggle__list ul li {
-  padding: 0rem var(--sizing-x6);
+  padding: 0rem var(--rls-sizing-x6);
   box-sizing: border-box;
-  height: var(--sizing-x20);
-  line-height: var(--sizing-x20);
+  height: var(--rls-sizing-x20);
+  line-height: var(--rls-sizing-x20);
   cursor: default;
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--rls-font-weight-semibold);
   font-size: 6rem;
   letter-spacing: 0.825px;
   text-transform: uppercase;
-  color: var(--color-theme-300);
+  color: var(--rls-app-color-300);
 }
 .rls-button-toggle__list ul li:hover {
-  background: var(--background-theme-300);
-  color: var(--color-theme-500);
+  background: var(--rls-app-background-300);
+  color: var(--rls-app-color-500);
 }

package/dist/esm/components/molecules/CheckBoxLabel/CheckBoxLabel.css

@@ -1,11 +1,11 @@
 .rls-checkbox-label {
   --pvt-text-opacity: 1;
-  --pvt-text-height: var(--sizing-x12);
+  --pvt-text-height: var(--rls-sizing-x12);
   --pvt-text-overflow: hidden;
   --pvt-text-white-space: nowrap;
   --pvt-text-text-overflow: ellipsis;
   display: flex;
-  column-gap: var(--sizing-x4);
+  column-gap: var(--rls-sizing-x4);
 }
 .rls-checkbox-label--disabled {
   --pvt-text-opacity: 0.5;
@@ -21,13 +21,13 @@
   width: auto;
 }
 .rls-checkbox-label__text {
-  max-width: calc(100% - var(--sizing-x16));
+  max-width: calc(100% - var(--rls-sizing-x16));
   height: var(--pvt-text-height);
-  line-height: var(--sizing-x12);
-  color: var(--color-theme-300);
-  font-size: var(--label-font-size);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--label-letter-spacing);
+  line-height: var(--rls-sizing-x12);
+  color: var(--rls-app-color-300);
+  font-size: var(--rls-label-font-size);
+  font-weight: var(--rls-font-weight-medium);
+  letter-spacing: var(--rls-label-letter-spacing);
   user-select: none;
   opacity: var(--pvt-text-opacity);
   overflow: var(--pvt-text-overflow);