@sk-web-gui/core 2.4.0 → 3.0.1

package/dist/types/components/input.d.ts

@@ -15,7 +15,7 @@ export declare const Input: () => {
                     '@apply pr-10': {};
                 };
                 svg: {
-                    '@apply w-[1.6rem] h-[1.6rem]': {};
+                    '@apply w-16 h-16': {};
                 };
             };
             '&-md': {
@@ -29,7 +29,7 @@ export declare const Input: () => {
                     '@apply pr-12': {};
                 };
                 svg: {
-                    '@apply w-[2rem] h-[2rem]': {};
+                    '@apply w-20 h-20': {};
                 };
             };
             '&-lg': {
@@ -43,7 +43,7 @@ export declare const Input: () => {
                     '@apply pr-16': {};
                 };
                 svg: {
-                    '@apply w-[2.2rem] h-[2.2rem]': {};
+                    '@apply w-22 h-22': {};
                 };
             };
         };
@@ -129,16 +129,16 @@ export declare const Input: () => {
             '@apply bg-none': {};
             '@apply bg-dark-secondary': {};
             '&.sk-form-input-sm': {
-                '@apply w-[1.6rem] h-[1.6rem]': {};
+                '@apply w-16 h-16': {};
                 '@apply -mr-2': {};
             };
             '&.sk-form-input-md': {
                 '@apply -mr-4': {};
-                '@apply w-[1.8rem] h-[1.8rem]': {};
+                '@apply w-18 h-18': {};
             };
             '&.sk-form-input-lg': {
                 '@apply -mr-6': {};
-                '@apply w-[2rem] h-[2rem]': {};
+                '@apply w-20 h-20': {};
             };
         };
         '&[type="date"]::-webkit-inner-spin-button, &[type="date"]::-webkit-calendar-picker-indicator': {
@@ -172,26 +172,26 @@ export declare const Input: () => {
         '&&-lg': {
             '@apply rounded-button-lg': {};
             '@apply px-20': {};
-            '@apply py-[1.1rem]': {};
+            '@apply py-11': {};
             '@apply gap-8': {};
             '@apply text-input-large': {};
-            '@apply h-[4.8rem]': {};
+            '@apply h-48': {};
         };
         '&&-md': {
             '@apply rounded-button-md': {};
             '@apply px-16': {};
-            '@apply py-[0.7rem]': {};
+            '@apply py-7': {};
             '@apply gap-8': {};
             '@apply text-input-medium': {};
-            '@apply h-[4rem]': {};
+            '@apply h-40': {};
         };
         '&&-sm': {
             '@apply rounded-button-sm': {};
             '@apply px-12': {};
-            '@apply py-[0.5rem]': {};
+            '@apply py-5': {};
             '@apply gap-6': {};
             '@apply text-input-small': {};
-            '@apply h-[3.2rem]': {};
+            '@apply h-32': {};
         };
         '&&-textarea': {
             '@apply h-auto': {};

package/dist/types/components/link.d.ts

@@ -2,9 +2,9 @@ export declare const Link: () => {
     '.sk-link': {
         '@apply underline outline-none hover:underline': {};
         '@apply rounded-utility': {};
-        '@apply focus-visible:ring ring-offset-[.6rem]': {};
+        '@apply focus-visible:ring ring-offset-6': {};
         '&-sm': {
-            '@apply text-small leading-[2rem]': {};
+            '@apply text-small': {};
         };
         '&-md': {
             '@apply text-base': {};
@@ -13,7 +13,7 @@ export declare const Link: () => {
             '@apply text-large': {};
         };
         '&-xl': {
-            '@apply text-lead leading-[3.2rem]': {};
+            '@apply text-lead': {};
         };
         '&-primary': {
             '@apply text-vattjom-surface-primary': {};

package/dist/types/components/list.d.ts

@@ -10,7 +10,7 @@ export declare const List: () => {
         '&[data-style="bullet"]': {
             li: {
                 '&:before': {
-                    "@apply content-['\u2022'] my-[.5rem] text-[1.8rem]": {};
+                    "@apply content-['\u2022'] my-5 text-lead": {};
                 };
             };
         };
@@ -19,7 +19,7 @@ export declare const List: () => {
                 counterIncrement: string;
                 '&:before': {
                     '@apply text-small border-vattjom-surface-primary rounded-full leading-8': {};
-                    '@apply my-[.6rem] h-[2.2rem] w-[2.2rem] border-[.2rem]': {};
+                    '@apply my-6 h-22 w-22 border-2': {};
                     content: string;
                 };
             };
@@ -27,7 +27,7 @@ export declare const List: () => {
         '&[data-style="stroke"]': {
             li: {
                 '&:before': {
-                    "@apply content-['\u2013'] my-[.4rem] text-[1.6rem]": {};
+                    "@apply content-['\u2013'] my-4 text-base": {};
                 };
             };
         };
@@ -43,10 +43,10 @@ export declare const List: () => {
             '@apply pt-20': {};
         };
         '&-header': {
-            '@apply text-large font-bold ml-[3.2rem]': {};
+            '@apply text-large font-bold ml-32': {};
         };
         '&-text': {
-            '@apply text-dark-secondary ml-[3.2rem]': {};
+            '@apply text-dark-secondary ml-32': {};
         };
     };
 };

package/dist/types/components/logo.d.ts

@@ -15,10 +15,10 @@ export declare const Logo: () => {
         '&[data-variant="service"]': {
             '@apply flex-row gap-6': {};
             '@apply w-max': {};
-            '@apply h-[6rem]': {};
+            '@apply h-60': {};
             '@apply pb-4': {};
             '.sk-logo-figure': {
-                '@apply w-auto h-[5.6rem]': {};
+                '@apply w-auto h-56': {};
             };
         };
         'a:focus-within &': {
@@ -36,7 +36,7 @@ export declare const Logo: () => {
             '@apply pl-2 pt-2 pr-8 pb-0': {};
         };
         '&-title': {
-            '@apply text-[2.2rem] leading-[2.8rem] font-header font-bold': {};
+            '@apply font-header text-logo-header': {};
         };
         '&-subtitle': {
             '@apply text-small font-normal block': {};

package/dist/types/components/menu-vertical.d.ts

@@ -3,7 +3,7 @@ export declare const MenuVertical: () => {
         '@apply rounded-button': {};
         '> ul > li > .sk-menu-vertical-item-submenu': {
             '> .sk-menu-vertical-item-submenu-button': {
-                '@apply min-h-[5.2rem]': {};
+                '@apply min-h-52': {};
             };
         };
         '> ul': {
@@ -26,50 +26,32 @@ export declare const MenuVertical: () => {
                 };
             };
             '&.ul, & ul': {
-                '@apply py-8 pl-[2rem] ml-[2rem]': {};
+                '@apply py-8 pl-20 ml-20': {};
             };
             'li ul': {
                 '@apply gap-8': {};
                 ul: {
                     li: {
-                        '@apply text-small leading-[1.8rem]': {};
+                        '@apply text-small leading-18': {};
                         '.sk-menu-vertical-item-submenu-button, .sk-menu-vertical-item-submenu-button-expand': {
-                            '@apply py-[0.6rem] px-[1.4rem]': {};
+                            '@apply py-6 px-14': {};
                         };
                     };
                 };
                 li: {
-                    '@apply relative -ml-[.4rem]': {};
+                    '@apply relative -ml-4': {};
                     '&:before': {
-                        content: string;
-                        position: string;
-                        display: string;
-                        width: string;
-                        height: string;
-                        top: string;
-                        left: string;
+                        '@apply content-[""] absolute inline-flex w-20 h-44 -top-8 -left-16': {};
                         backgroundImage: string;
                         backgroundRepeat: string;
                     };
                     '&:not(:last-child):after': {
-                        content: string;
-                        position: string;
-                        display: string;
-                        width: string;
-                        top: string;
-                        bottom: string;
-                        left: string;
+                        '@apply content-[""] absolute inline-flex w-20 -top-8 bottom-0 -left-16': {};
                         backgroundImage: string;
                         backgroundRepeat: string;
                     };
                     '&:last-child:after': {
-                        content: string;
-                        position: string;
-                        display: string;
-                        width: string;
-                        top: string;
-                        bottom: string;
-                        left: string;
+                        '@apply content-[""] absolute inline-flex w-20 -top-8 bottom-0 -left-16': {};
                         backgroundImage: string;
                         backgroundRepeat: string;
                     };
@@ -96,20 +78,20 @@ export declare const MenuVertical: () => {
         '.sk-menu-vertical': {
             '@apply gap-12': {};
             '&.ul, & ul': {
-                '@apply pt-12 pr-[1.6rem] pb-16': {};
+                '@apply pt-12 pr-16 pb-16': {};
             };
             '&-item': {
                 '.sk-menu-vertical-item-submenu': {
                     '@apply font-bold': {};
                     '&-medium': {
                         'button, a': {
-                            '@apply py-[0.6rem] px-[1.4rem]': {};
+                            '@apply py-6 px-14': {};
                         };
                     };
                     '&-large': {
                         'button, a': {
                             '@apply text-large': {};
-                            '@apply py-[1rem] px-[1.4rem]': {};
+                            '@apply py-10 px-14': {};
                         };
                     };
                 };
@@ -118,11 +100,12 @@ export declare const MenuVertical: () => {
     };
     '.sk-menu-vertical': {
         '@apply flex flex-col': {};
+        '@apply text-base': {};
         '&.hide': {
             '@apply hidden': {};
         };
         '&-backbutton': {
-            '@apply flex items-center gap-[1.6rem] text-lead mb-40': {};
+            '@apply flex items-center gap-16 text-lead mb-40': {};
         };
         '&-label': {
             '@apply mb-24': {};
@@ -140,12 +123,12 @@ export declare const MenuVertical: () => {
                 color: string;
             };
             '& > a, > button': {
-                '@apply flex items-center min-h-[4.4rem]': {};
+                '@apply flex items-center min-h-44': {};
                 '&:focus-visible': {
                     '@apply outline outline-2 outline-ring': {};
                 };
                 '> *': {
-                    '@apply flex w-full py-[.6rem] px-[1.4rem]': {};
+                    '@apply flex w-full py-6 px-14': {};
                     '@apply rounded-button cursor-pointer': {};
                 };
                 '&:not([aria-disabled="true"]) > *': {
@@ -177,17 +160,17 @@ export declare const MenuVertical: () => {
                 };
                 '&-medium': {
                     'button, a': {
-                        '@apply py-[0.6rem] px-[1.4rem]': {};
+                        '@apply py-6 px-14': {};
                     };
                 };
                 '&-large': {
                     'button, a': {
-                        '@apply py-[1rem] px-[1.4rem]': {};
+                        '@apply py-10 px-14': {};
                     };
                 };
                 '&-button, &-button-expand': {
                     '@apply items-center': {};
-                    '@apply py-[1rem] px-[1.4rem]': {};
+                    '@apply py-10 px-14': {};
                 };
                 '&-button-expand': {
                     '@apply rounded-r-button rounded-l-0': {};
@@ -205,7 +188,7 @@ export declare const MenuVertical: () => {
                 };
             };
             '.sk-menu-vertical-item-tool-item': {
-                '@apply flex items-center gap-10 p-[.6rem] rounded-groups': {};
+                '@apply flex items-center gap-10 p-6 rounded-groups': {};
                 '.sk-avatar': {
                     '@apply border-2 border-background-content': {};
                 };

package/dist/types/components/pagination.d.ts

@@ -8,7 +8,7 @@ export declare const Pagination: () => {
                 '@apply w-fit': {};
             };
             li: {
-                '@apply min-w-[4rem] text-center': {};
+                '@apply min-w-40 text-center': {};
             };
             'li:first-child': {
                 '@apply text-left': {};

package/dist/types/components/popup-menu.d.ts

@@ -5,7 +5,7 @@ export declare const PopupMenu: () => {
             '@apply flex': {};
         };
         '&[data-position="left"]': {
-            '@apply mt-0 mr-8 right-[100%]': {};
+            '@apply mt-0 mr-8 right-full': {};
             '&[data-align="end"]': {
                 '@apply bottom-0': {};
             };
@@ -14,7 +14,7 @@ export declare const PopupMenu: () => {
             };
         };
         '&[data-position="right"]': {
-            '@apply mt-0 ml-8 left-[100%]': {};
+            '@apply mt-0 ml-8 left-full': {};
             '&[data-align="end"]': {
                 '@apply bottom-0': {};
             };
@@ -23,7 +23,7 @@ export declare const PopupMenu: () => {
             };
         };
         '&[data-position="over"]': {
-            '@apply mt-0 mb-8 bottom-[100%]': {};
+            '@apply mt-0 mb-8 bottom-full': {};
             '&[data-align="end"]': {
                 '@apply right-0': {};
             };
@@ -61,8 +61,8 @@ export declare const PopupMenu: () => {
         '.sk-popup-menu-item': {
             '@apply list-none': {};
             '@apply w-full': {};
-            '@apply h-[4rem]': {};
-            '@apply min-h-[4rem]': {};
+            '@apply h-40': {};
+            '@apply min-h-40': {};
             '@apply bg-transparent hover:bg-primitives-gray-200': {};
             '@apply dark:hover:bg-primitives-overlay-lighten-1': {};
             '@apply cursor-pointer': {};
@@ -80,7 +80,7 @@ export declare const PopupMenu: () => {
                 '@apply dark:bg-primitives-overlay-lighten-1': {};
             };
             svg: {
-                '@apply w-[2rem] h-[2rem]': {};
+                '@apply w-20 h-20': {};
             };
             '@apply justify-start': {};
             '@apply border-0': {};
@@ -116,8 +116,8 @@ export declare const PopupMenu: () => {
         '&-sm': {
             '@apply p-8 gap-6': {};
             '.sk-popup-menu-item': {
-                '@apply h-[3.2rem]': {};
-                '@apply min-h-[3.2rem]': {};
+                '@apply h-32': {};
+                '@apply min-h-32': {};
                 '@apply gap-10 pl-8 pr-8 py-4': {};
                 '@apply text-small': {};
                 '&-group': {
@@ -127,7 +127,7 @@ export declare const PopupMenu: () => {
                     };
                 };
                 svg: {
-                    '@apply w-[1.8rem] h-[1.8rem]': {};
+                    '@apply w-18 h-18': {};
                 };
             };
         };

package/dist/types/components/progress-bar.d.ts

@@ -5,7 +5,7 @@ export declare const ProgressBar: (colors: string[]) => {
                 "@apply bg-primary-surface": {};
             };
         };
-        '@apply flex h-[.4rem] rounded-circular bg-background-color-mixin-2': {};
+        '@apply flex h-4 rounded-circular bg-background-color-mixin-2': {};
         '&-fill': {
             '@apply rounded-circular': {};
         };

package/dist/types/components/progress-stepper.d.ts

@@ -2,7 +2,7 @@ export declare const ProgressStepper: () => {
     '.sk-progress-stepper': {
         '@apply flex justify-between': {};
         hr: {
-            '@apply w-full mt-[1.9rem]': {};
+            '@apply w-full mt-19': {};
         };
         '&-step': {
             '@apply flex flex-col items-center': {};
@@ -16,13 +16,13 @@ export declare const ProgressStepper: () => {
             '&-wrapper': {
                 '@apply flex flex-row shrink w-full gap-4': {};
                 hr: {
-                    '@apply w-full grow shrink mt-[1.9rem]': {};
+                    '@apply w-full grow shrink mt-19': {};
                 };
             };
             '&-box': {
                 '@apply box-border': {};
                 '@apply shrink-0': {};
-                '@apply h-[4rem] w-[4rem]': {};
+                '@apply h-40 w-40': {};
                 '@apply bg-secondary-surface': {};
                 '@apply flex justify-center items-center': {};
                 '@apply text-label-medium': {};
@@ -33,11 +33,11 @@ export declare const ProgressStepper: () => {
                     '@apply rounded-full': {};
                 };
                 '&&-sm': {
-                    '@apply h-[3.2rem] w-[3.2rem] min-h-[2.4rem] max-h-[3.2rem] min-w-[2.4rem] max-w-[3.2rem]': {};
+                    '@apply h-32 w-32 min-h-24 max-h-32 min-w-24 max-w-32': {};
                     '@apply text-label-small': {};
                 };
                 '&&-md': {
-                    '@apply h-[4rem] w-[4rem] min-h-[3.2rem] max-h-[4rem] min-w-[3.2rem] max-w-[4rem]': {};
+                    '@apply h-40 w-40 min-h-32 max-h-40 min-w-32 max-w-40': {};
                 };
             };
             '&[data-progress="current"]': {

package/dist/types/components/radio.d.ts

@@ -17,7 +17,7 @@ export declare const Radio: () => {
             '@apply absolute': {};
             '@apply rounded-full': {};
             '@apply bg-dark-placeholder': {};
-            '@apply m-[0.5rem]': {};
+            '@apply m-5': {};
             '@apply top-0 left-0 bottom-0 right-0': {};
         };
         '@apply focus-visible:ring': {};
@@ -89,17 +89,17 @@ export declare const Radio: () => {
             '@apply p-2': {};
             '&-sm': {
                 '@apply text-small': {};
-                '@apply h-[2.8rem]': {};
+                '@apply h-28': {};
                 '@apply gap-10': {};
             };
             '&-md': {
                 '@apply text-base': {};
-                '@apply h-[2.8rem]': {};
+                '@apply h-28': {};
                 '@apply gap-10': {};
             };
             '&-lg': {
                 '@apply text-large': {};
-                '@apply h-[3rem]': {};
+                '@apply h-30': {};
                 '@apply gap-12': {};
             };
             '&[data-disabled="true"]': {

package/dist/types/components/search-field.d.ts

@@ -16,17 +16,17 @@ export declare const SearchField: () => {
     '.sk-search-field': {
         '&-md': {
             '.sk-search-field-icon': {
-                '@apply w-[2rem] h-[2rem]': {};
+                '@apply w-20 h-20': {};
                 svg: {
-                    '@apply w-[2rem] h-[2rem]': {};
+                    '@apply w-20 h-20': {};
                 };
             };
         };
         '&-lg': {
             '.sk-search-field-icon': {
-                '@apply w-[2.2rem] h-[2.2rem]': {};
+                '@apply w-22 h-22': {};
                 svg: {
-                    '@apply w-[2.2rem] h-[2.2rem]': {};
+                    '@apply w-22 h-22': {};
                 };
             };
         };

package/dist/types/components/select.d.ts

@@ -14,7 +14,7 @@ export declare const Select: () => {
             backgroundImage: string[];
         };
         '&-sm': {
-            '@apply h-[3.2rem]': {};
+            '@apply h-32': {};
             '@apply text-label-small': {};
             '@apply rounded-button-sm': {};
             '*': {
@@ -22,7 +22,7 @@ export declare const Select: () => {
             };
         };
         '&-md': {
-            '@apply h-[4rem]': {};
+            '@apply h-40': {};
             '@apply text-label-medium': {};
             '@apply rounded-button-md': {};
             '*': {
@@ -30,7 +30,7 @@ export declare const Select: () => {
             };
         };
         '&-lg': {
-            '@apply h-[4.8rem]': {};
+            '@apply h-48': {};
             '@apply text-label-large': {};
             '@apply rounded-button-lg': {};
             '*': {
@@ -48,33 +48,33 @@ export declare const Select: () => {
             '@apply hover:bg-primitives-overlay-lighten-10': {};
             '@apply dark:hover:bg-primitives-overlay-darken-6': {};
             '&.sk-form-select-sm': {
-                '@apply pl-[1.3rem]': {};
-                '@apply bg-[center_right_0.9rem]': {};
-                '@apply pr-[3.3rem]': {};
+                '@apply pl-13': {};
+                '@apply bg-[center_right_0.643em]': {};
+                '@apply pr-34-1': {};
                 '&[aria-invalid="true"]': {
                     '@apply pl-12': {};
                     '@apply bg-right-8': {};
-                    '@apply pr-[3.2rem]': {};
+                    '@apply pr-32': {};
                 };
             };
             '&.sk-form-select-md': {
-                '@apply pl-[1.7rem]': {};
-                '@apply bg-[center_right_1.3rem]': {};
-                '@apply pr-[4.3rem]': {};
+                '@apply pl-17': {};
+                '@apply bg-[center_right_0.8125em]': {};
+                '@apply pr-44-1': {};
                 '&[aria-invalid="true"]': {
                     '@apply pl-16': {};
                     '@apply bg-right-12': {};
-                    '@apply pr-[4.2rem]': {};
+                    '@apply pr-42': {};
                 };
             };
             '&.sk-form-select-lg': {
-                '@apply pl-[1.9rem]': {};
-                '@apply bg-[center_right_1.7rem]': {};
-                '@apply pr-[4.9rem]': {};
+                '@apply pl-19': {};
+                '@apply bg-[center_right_0.944em]': {};
+                '@apply pr-50-1': {};
                 '&[aria-invalid="true"]': {
                     '@apply pl-18': {};
                     '@apply bg-right-16': {};
-                    '@apply pr-[4.8rem]': {};
+                    '@apply pr-48': {};
                 };
             };
             '&[aria-disabled="true"]': {
@@ -94,17 +94,17 @@ export declare const Select: () => {
             '&.sk-form-select-sm': {
                 '@apply pl-12': {};
                 '@apply bg-right-8': {};
-                '@apply pr-[3.2rem]': {};
+                '@apply pr-32': {};
             };
             '&.sk-form-select-md': {
                 '@apply pl-16': {};
                 '@apply bg-right-12': {};
-                '@apply pr-[4.2rem]': {};
+                '@apply pr-42': {};
             };
             '&.sk-form-select-lg': {
                 '@apply pl-18': {};
                 '@apply bg-right-16': {};
-                '@apply pr-[4.8rem]': {};
+                '@apply pr-48': {};
             };
             '&[aria-disabled="true"]': {
                 '@apply bg-tertiary-surface-disabled': {};

package/dist/types/components/snackbar.d.ts

@@ -1,7 +1,7 @@
 export declare const Snackbar: () => {
     '.sk-snackbar': {
-        '@apply flex items-center gap-12 py-8 pl-16 pr-8 rounded-groups break-words max-w-[40rem]': {};
         '@apply text-label-small text-vattjom-text-secondary': {};
+        '@apply flex items-center gap-12 py-8 pl-16 pr-8 rounded-groups break-words max-w-[28.6em]': {};
         '&-text': {
             '@apply flex-grow': {};
         };

package/dist/types/components/spinner.d.ts

@@ -3,6 +3,9 @@ export declare const Spinner: (colors: string[]) => {
         '@apply box-border': {};
         '@apply flex justify-center items-center object-center': {};
         '@apply overflow-hidden': {};
+        '&-lottie': {
+            '@apply w-[200%] h-[200%] my-0 mr-0 ml-[-50%]': {};
+        };
         path: {
             '@apply stroke-dark-secondary': {};
         };

package/dist/types/components/switch.d.ts

@@ -47,7 +47,7 @@ export declare const Switch: () => {
                 '@apply bg-primitives-overlay-darken-6 dark:bg-primitives-overlay-lighten-6': {};
             };
         };
-        width: string;
+        '@apply w-56': {};
     };
     '.sk-form-switch-box': {
         '@apply transition-transform ease-in-out duration-150 transform rounded-full shadow translate-x-0 m-6': {};