@sk-web-gui/core 3.9.1 → 3.10.0

package/dist/esm/with-opacity.js.map

@@ -1 +1 @@
-{"version":3,"file":"with-opacity.js","names":["withOpacity","variableName","_ref","opacityValue"],"sources":["../../src/with-opacity.ts"],"sourcesContent":["const withOpacity = function withOpacity(variableName: string) {\r\n  return ({ opacityValue }: { opacityValue: string }) => {\r\n    if (opacityValue) return `rgba(var(${variableName}), ${opacityValue})`;\r\n    return `rgb(var(${variableName}))`;\r\n  };\r\n};\r\nexport default withOpacity;\r\n"],"mappings":"AAAA,IAAMA,WAAW,GAAG,SAASA,WAAWA,CAACC,YAAoB,EAAE;EAC7D,OAAOC,IAAA,IAAgD;IAAA,IAA/C;MAAEC;IAAuC,CAAC,GAAAD,IAAA;IAChD,IAAIC,YAAY,EAAE,qBAAmBF,YAAY,WAAME,YAAY;IACnE,oBAAkBF,YAAY;EAChC,CAAC;AACH,CAAC;AACD,eAAeD,WAAW","ignoreList":[]}
+{"version":3,"sources":["../../src/with-opacity.ts"],"sourcesContent":["const withOpacity = function withOpacity(variableName: string) {\r\n  return ({ opacityValue }: { opacityValue: string }) => {\r\n    if (opacityValue) return `rgba(var(${variableName}), ${opacityValue})`;\r\n    return `rgb(var(${variableName}))`;\r\n  };\r\n};\r\nexport default withOpacity;\r\n"],"names":["withOpacity","variableName","opacityValue"],"mappings":"AAAA,IAAMA,YAAc,SAASA,YAAYC,YAAoB,EAC3D,OAAO,oBAAGC,mBAAAA,aACR,GAAIA,aAAc,MAAO,AAAC,YAA6BA,OAAlBD,aAAa,OAAkB,OAAbC,aAAa,KACpE,MAAO,AAAC,WAAuB,OAAbD,aAAa,KACjC,CACF,CACA,gBAAeD,WAAY"}

package/dist/types/colors.d.ts

@@ -375,6 +375,41 @@ declare const colors: {
             secondary: string;
         };
     };
+    'input-field': {
+        outline: {
+            DEFAULT: string;
+            hover: string;
+            disabled: string;
+        };
+        surface: {
+            DEFAULT: string;
+            disabled: string;
+            focus: string;
+        };
+    };
+    switch: {
+        surface: {
+            DEFAULT: string;
+            on: string;
+            disabled: string;
+            hover: string;
+        };
+        control: {
+            DEFAULT: string;
+            disabled: string;
+            on: string;
+        };
+    };
+    'menu-item': {
+        surface: {
+            open: string;
+            hover: string;
+            active: string;
+        };
+        node: {
+            line: string;
+        };
+    };
     inverted: {
         body: string;
         black: string;
@@ -638,6 +673,41 @@ declare const colors: {
                 secondary: string;
             };
         };
+        'input-field': {
+            outline: {
+                DEFAULT: string;
+                hover: string;
+                disabled: string;
+            };
+            surface: {
+                DEFAULT: string;
+                disabled: string;
+                focus: string;
+            };
+        };
+        switch: {
+            surface: {
+                DEFAULT: string;
+                on: string;
+                disabled: string;
+                hover: string;
+            };
+            control: {
+                DEFAULT: string;
+                disabled: string;
+                on: string;
+            };
+        };
+        'menu-item': {
+            surface: {
+                open: string;
+                hover: string;
+                active: string;
+            };
+            node: {
+                line: string;
+            };
+        };
     };
 };
 export { colors };

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

@@ -14,8 +14,8 @@ export declare const Checkbox: () => {
         };
         '+ .sk-icon': {
             '@apply absolute inset-0 my-auto bg-transparent': {};
-            '@apply border-1 p-2 border-primitives-overlay-darken-6 dark:border-primitives-overlay-lighten-6': {};
-            '@apply bg-primitives-overlay-lighten-10 dark:bg-primitives-overlay-darken-6': {};
+            '@apply border-1 p-2 border-input-field-outline': {};
+            '@apply bg-input-field-surface': {};
             svg: {
                 '@apply hidden': {};
             };
@@ -34,7 +34,7 @@ export declare const Checkbox: () => {
         };
         '&&:hover:not(&&-disabled,&&:checked,&&[aria-invalid=true]),&&:hover:focus:not(&&-disabled,&&:checked,&&[aria-invalid=true])': {
             '& + .sk-icon, &:focus + .sk-icon': {
-                '@apply text-primitives-overlay-darken-6 dark:text-primitives-overlay-lighten-5 border-primitives-overlay-darken-8 dark:border-primitives-overlay-lighten-4': {};
+                '@apply text-dark-placeholder border-input-field-outline-hover': {};
                 svg: {
                     '@apply block': {};
                 };
@@ -56,7 +56,7 @@ export declare const Checkbox: () => {
         '&&-disabled,&&-disabled:hover': {
             '@apply cursor-not-allowed': {};
             '& + .sk-icon': {
-                '@apply bg-background-200 border-primitives-overlay-darken-3': {};
+                '@apply bg-input-field-surface-disabled border-input-field-outline-disabled': {};
             };
             '&:checked': {
                 '& + .sk-icon': {

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

@@ -47,8 +47,7 @@ export declare const ComboBox: () => {
             '@apply focus:border-transparent': {};
             '@apply focus:hover:border-transparent': {};
             '&.active': {
-                '@apply bg-primitives-overlay-lighten-10': {};
-                '@apply dark:bg-primitives-overlay-darken-6': {};
+                '@apply bg-input-field-surface hover:bg-input-field-surface': {};
                 '@apply placeholder:text-dark-placeholder': {};
                 '@apply text-dark-primary': {};
                 '@apply border-transparent': {};

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

@@ -58,23 +58,17 @@ export declare const Input: () => {
                 '@apply grow': {};
             };
             '@apply border-1': {};
-            '@apply border-primitives-overlay-darken-6': {};
-            '@apply dark:border-primitives-overlay-lighten-6': {};
-            '@apply hover:border-primitives-overlay-darken-8': {};
-            '@apply dark:hover:border-primitives-overlay-lighten-4': {};
+            '@apply border-input-field-outline': {};
+            '@apply hover:border-input-field-outline-hover': {};
             '@apply placeholder:text-dark-placeholder': {};
-            '@apply bg-primitives-overlay-lighten-10': {};
-            '@apply dark:bg-primitives-overlay-darken-6': {};
+            '@apply bg-input-field-surface': {};
             '&:invalid, &[aria-invalid="true"]': {
                 '@apply border-2 border-error-surface-primary': {};
             };
             '&:disabled, &[aria-disabled="true"]': {
-                '@apply bg-primitives-overlay-darken-1': {};
-                '@apply dark:bg-primitives-overlay-lighten-1': {};
-                '@apply border-primitives-overlay-darken-3': {};
-                '@apply dark:border-primitives-overlay-lighten-3': {};
-                '@apply hover:border-primitives-overlay-darken-3': {};
-                '@apply dark:hover:border-primitives-overlay-lighten-3': {};
+                '@apply bg-input-field-surface-disabled': {};
+                '@apply border-input-field-outline-disabled': {};
+                '@apply hover:border-input-field-outline-disabled': {};
                 '@apply text-dark-disabled': {};
             };
             '@apply flex relative': {};
@@ -82,11 +76,9 @@ export declare const Input: () => {
             '@apply focus-within:ring': {};
             '@apply focus-within:ring-ring': {};
             '@apply text-dark-secondary': {};
-            '@apply focus-within:border-primitives-overlay-lighten-10': {};
-            '@apply dark:focus-within:border-primitives-overlay-darken-6': {};
+            '@apply focus-within:border-input-field-surface': {};
             '&:not(:invalid):not([aria-invalid="true"])': {
-                '@apply focus-within:hover:border-primitives-overlay-lighten-10': {};
-                '@apply dark:focus-within:hover:border-primitives-overlay-darken-6': {};
+                '@apply focus-within:border-input-field-surface': {};
             };
             '&&-lg': {
                 '@apply text-input-large': {};
@@ -102,23 +94,17 @@ export declare const Input: () => {
             };
         };
         '@apply border-1': {};
-        '@apply border-primitives-overlay-darken-6': {};
-        '@apply dark:border-primitives-overlay-lighten-6': {};
-        '@apply hover:border-primitives-overlay-darken-8': {};
-        '@apply dark:hover:border-primitives-overlay-lighten-4': {};
+        '@apply border-input-field-outline': {};
+        '@apply hover:border-input-field-outline-hover': {};
         '@apply placeholder:text-dark-placeholder': {};
-        '@apply bg-primitives-overlay-lighten-10': {};
-        '@apply dark:bg-primitives-overlay-darken-6': {};
+        '@apply bg-input-field-surface': {};
         '&:invalid, &[aria-invalid="true"]': {
             '@apply border-2 border-error-surface-primary': {};
         };
         '&:disabled, &[aria-disabled="true"]': {
-            '@apply bg-primitives-overlay-darken-1': {};
-            '@apply dark:bg-primitives-overlay-lighten-1': {};
-            '@apply border-primitives-overlay-darken-3': {};
-            '@apply dark:border-primitives-overlay-lighten-3': {};
-            '@apply hover:border-primitives-overlay-darken-3': {};
-            '@apply dark:hover:border-primitives-overlay-lighten-3': {};
+            '@apply bg-input-field-surface-disabled': {};
+            '@apply border-input-field-outline-disabled': {};
+            '@apply hover:border-input-field-outline-disabled': {};
             '@apply text-dark-disabled': {};
         };
         '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {
@@ -202,16 +188,13 @@ export declare const Input: () => {
         '@apply focus:ring': {};
         '@apply focus:ring-ring': {};
         '@apply focus:ring-offset': {};
-        '@apply focus:border-primitives-overlay-lighten-10': {};
-        '@apply dark:focus:border-primitives-overlay-darken-6': {};
+        '@apply focus:border-input-field-surface': {};
         '@apply focus-within:ring': {};
         '@apply focus-within:ring-ring': {};
         '@apply focus-within:ring-offset': {};
-        '@apply focus-within:border-primitives-overlay-lighten-10': {};
-        '@apply dark:focus-within:border-primitives-overlay-darken-6': {};
+        '@apply focus-within:border-input-field-surface': {};
         '&:not(:invalid):not([aria-invalid="true"])': {
-            '@apply focus:hover:border-primitives-overlay-lighten-10': {};
-            '@apply dark:focus:hover:border-primitives-overlay-darken-6': {};
+            '@apply focus:hover:border-input-field-surface': {};
         };
     };
 };

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

@@ -63,8 +63,7 @@ export declare const PopupMenu: () => {
             '@apply w-full': {};
             '@apply h-40': {};
             '@apply min-h-40': {};
-            '@apply bg-transparent hover:bg-primitives-gray-200': {};
-            '@apply dark:hover:bg-primitives-overlay-lighten-1': {};
+            '@apply bg-transparent hover:bg-menu-item-surface-hover': {};
             '@apply cursor-pointer': {};
             '@apply flex flex-row shrink-0': {};
             '@apply pl-8 pr-8 py-4 gap-12': {};
@@ -76,8 +75,7 @@ export declare const PopupMenu: () => {
                 '@apply max-w-full': {};
             };
             '&:focus-visible, &:focus-within': {
-                '@apply bg-primitives-gray-200': {};
-                '@apply dark:bg-primitives-overlay-lighten-1': {};
+                '@apply bg-menu-item-surface-hover': {};
             };
             svg: {
                 '@apply w-20 h-20': {};
@@ -113,8 +111,7 @@ export declare const PopupMenu: () => {
             };
             '&:focus-within': {
                 '.sk-popup-menu-item.active': {
-                    '@apply bg-primitives-gray-200': {};
-                    '@apply dark:bg-primitives-overlay-lighten-1': {};
+                    '@apply bg-menu-item-surface-hover': {};
                 };
             };
         };

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

@@ -3,16 +3,13 @@ export declare const Radio: () => {
         backgroundImage: string;
         '@apply relative': {};
         '@apply box-border': {};
-        '@apply bg-primitives-overlay-lighten-10': {};
-        '@apply dark:bg-primitives-overlay-darken-6': {};
+        '@apply bg-input-field-surface': {};
         '@apply border-1': {};
-        '@apply border-primitives-overlay-darken-6': {};
-        '@apply dark:border-primitives-overlay-lighten-6': {};
+        '@apply border-input-field-outline': {};
         '@apply m-0': {};
         '@apply h-24 w-24': {};
         '@apply hover:after:content-[""]': {};
-        '@apply hover:border-primitives-overlay-darken-8': {};
-        '@apply hover:dark:border-primitives-overlay-lighten-4': {};
+        '@apply hover:border-input-field-outline-hover': {};
         '&::after': {
             '@apply absolute': {};
             '@apply rounded-full': {};
@@ -31,26 +28,20 @@ export declare const Radio: () => {
             '@apply hover:border-error-surface-primary': {};
         };
         '&:checked, &[checked="true"]': {
-            '@apply bg-primitives-overlay-lighten-10': {};
-            '@apply dark:bg-primitives-overlay-darken-6': {};
-            '@apply hover:bg-primitives-overlay-lighten-10': {};
-            '@apply hover:dark:bg-primitives-overlay-darken-6': {};
-            '@apply focus:bg-primitives-overlay-lighten-10': {};
-            '@apply focus:dark:bg-primitives-overlay-darken-6': {};
-            '@apply text-primitives-overlay-lighten-10': {};
-            '@apply dark:text-primitives-overlay-darken-6': {};
-            '@apply hover:text-primitives-overlay-lighten-10': {};
-            '@apply hover:dark:text-primitives-overlay-darken-6': {};
-            '@apply focus:text-primitives-overlay-lighten-10': {};
-            '@apply focus:dark:text-primitives-overlay-darken-6': {};
-            '@apply border-primitives-overlay-darken-6': {};
-            '@apply focus:border-primitives-overlay-darken-6': {};
-            '@apply dark:border-primitives-overlay-lighten-6': {};
-            '@apply hover:border-primitives-overlay-darken-8': {};
-            '@apply hover:dark:border-primitives-overlay-lighten-4': {};
+            '@apply bg-input-field-surface': {};
+            '@apply hover:bg-input-field-surface': {};
+            '@apply focus:bg-input-field-surface': {};
+            '@apply text-input-field-surface': {};
+            '@apply border-input-field-outline': {};
+            '@apply hover:text-input-field-surface': {};
+            '@apply focus:text-input-field-surface': {};
+            '@apply focus:border-input-field-outline': {};
+            '@apply focus:hover:border-input-field-outline-hover': {};
+            '@apply hover:border-input-field-outline-hover': {};
             '@apply focus:outline-0': {};
             '@apply focus:ring-0 focus:ring-offset-0': {};
             '@apply focus-visible:ring': {};
+            '@apply focus-visible:hover:border-transparent': {};
             '@apply focus-visible:border-transparent': {};
             '@apply after:content-[""]': {};
             '&[aria-invalid="true"]': {
@@ -67,17 +58,16 @@ export declare const Radio: () => {
             '@apply ring-0 ring-offset-0': {};
         };
         '&:disabled, &[disabled="true"]': {
-            '@apply border-primitives-overlay-darken-3': {};
-            '@apply dark:border-primitives-overlay-lighten-3': {};
-            '@apply hover:border-primitives-overlay-darken-3': {};
-            '@apply hover:dark:border-primitives-overlay-lighten-3': {};
-            '@apply bg-background-200': {};
-            '@apply hover:bg-background-200': {};
+            '@apply border-input-field-outline-disabled': {};
+            '@apply hover:border-input-field-outline-disabled': {};
+            '@apply bg-input-field-surface-disabled': {};
+            '@apply hover:bg-input-field-surface-disabled': {};
             '@apply cursor-not-allowed': {};
             '&:not(:checked):not([checked="true"]):after': {
                 '@apply hidden': {};
             };
             '&:checked, &[checked="true"]': {
+                '@apply border-input-field-outline-disabled': {};
                 '&::after': {
                     '@apply bg-dark-disabled': {};
                 };

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

@@ -3,16 +3,6 @@ export declare const Select: () => {
         '*': {
             '@apply bg-background-content': {};
         };
-        '&[aria-invalid="true"]': {
-            '@apply border-2 border-error-surface-primary': {};
-        };
-        '&[aria-disabled="true"]': {
-            '@apply opacity-100': {};
-            '@apply text-dark-disabled': {};
-            '@apply placeholder:text-dark-disabled': {};
-            '@apply bg-tertiary-surface-disabled': {};
-            backgroundImage: string[];
-        };
         '&-sm': {
             '@apply h-32': {};
             '@apply text-label-small': {};
@@ -39,14 +29,10 @@ export declare const Select: () => {
         };
         '&-primary': {
             '@apply border-1': {};
-            '@apply border-primitives-overlay-darken-6': {};
-            '@apply dark:border-primitives-overlay-lighten-6': {};
-            '@apply hover:border-primitives-overlay-darken-8': {};
-            '@apply dark:hover:border-primitives-overlay-lighten-4': {};
-            '@apply bg-primitives-overlay-lighten-10': {};
-            '@apply dark:bg-primitives-overlay-darken-6': {};
-            '@apply hover:bg-primitives-overlay-lighten-10': {};
-            '@apply dark:hover:bg-primitives-overlay-darken-6': {};
+            '@apply border-input-field-outline': {};
+            '@apply hover:border-input-field-outline-hover': {};
+            '@apply bg-input-field-surface': {};
+            '@apply hover:bg-input-field-surface': {};
             '&.sk-form-select-sm': {
                 '@apply pl-13': {};
                 '@apply bg-[center_right_0.643em]': {};
@@ -77,13 +63,11 @@ export declare const Select: () => {
                     '@apply pr-48': {};
                 };
             };
-            '&[aria-disabled="true"]': {
-                '@apply bg-primitives-overlay-darken-1': {};
-                '@apply dark:bg-primitives-overlay-lighten-1': {};
-                '@apply border-primitives-overlay-darken-3': {};
-                '@apply dark:border-primitives-overlay-lighten-3': {};
-                '@apply hover:border-primitives-overlay-darken-3': {};
-                '@apply dark:hover:border-primitives-overlay-lighten-3': {};
+            '&[aria-disabled="true"],&:disabled': {
+                '@apply bg-input-field-surface-disabled': {};
+                '@apply hover:bg-input-field-surface-disabled': {};
+                '@apply border-input-field-outline-disabled': {};
+                '@apply hover:border-input-field-outline-disabled': {};
             };
         };
         '&-tertiary': {
@@ -128,6 +112,16 @@ export declare const Select: () => {
         '&:hover, &:focus': {
             backgroundImage: string[];
         };
+        '&[aria-invalid="true"]': {
+            '@apply border-2 border-error-surface-primary': {};
+        };
+        '&[aria-disabled="true"]': {
+            '@apply opacity-100': {};
+            '@apply text-dark-disabled': {};
+            '@apply placeholder:text-dark-disabled': {};
+            '@apply bg-tertiary-surface-disabled': {};
+            backgroundImage: string[];
+        };
     };
     '.dark .sk-form-select': {
         backgroundImage: string[];

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

@@ -12,8 +12,8 @@ export declare const Switch: () => {
     };
     '.sk-form-switch': {
         '@apply rounded-full cursor-pointer focus:outline-none': {};
-        '@apply bg-primitives-overlay-darken-3 dark:bg-primitives-overlay-lighten-3': {};
-        '@apply hover:bg-primitives-overlay-darken-5 hover:dark:bg-primitives-overlay-lighten-4': {};
+        '@apply bg-switch-surface': {};
+        '@apply hover:bg-switch-surface-hover': {};
         'input[type=checkbox]:focus-visible + &': {
             '@apply ring ring-blue-500': {};
         };
@@ -31,13 +31,14 @@ export declare const Switch: () => {
             };
             '.sk-form-switch-box': {
                 transform: string;
+                '@apply bg-switch-control-on': {};
             };
-            '@apply bg-primitives-overlay-darken-4 dark:bg-primitives-overlay-lighten-5': {};
+            '@apply bg-switch-surface-on': {};
             "&[data-disabled=\"true\"]": {
                 '.sk-form-switch-box': {
-                    '@apply bg-transparent': {};
+                    '@apply bg-switch-control-disabled': {};
                     '.sk-form-switch-icon': {
-                        '@apply bg-primitives-overlay-darken-6 dark:bg-primitives-overlay-lighten-6': {};
+                        '@apply opacity-0': {};
                         '@apply text-light-primary': {};
                     };
                 };
@@ -45,16 +46,16 @@ export declare const Switch: () => {
         };
         "&[data-disabled=\"true\"]": {
             '@apply cursor-default': {};
-            '@apply bg-primitives-overlay-darken-2 dark:bg-primitives-overlay-lighten-2': {};
+            '@apply bg-switch-surface-disabled': {};
             '.sk-form-switch-box': {
-                '@apply bg-primitives-overlay-darken-6 dark:bg-primitives-overlay-lighten-6': {};
+                '@apply bg-switch-control-disabled': {};
             };
         };
         '@apply w-56': {};
     };
     '.sk-form-switch-box': {
         '@apply transition-transform ease-in-out duration-150 transform rounded-full shadow translate-x-0 m-6': {};
-        '@apply bg-primitives-overlay-darken-7 dark:bg-primitives-overlay-lighten-7': {};
+        '@apply bg-switch-control': {};
         '@apply h-20 w-20': {};
         '@apply flex justify-center items-center object-center': {};
         '.sk-form-switch-icon': {

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

@@ -1,9 +1,51 @@
-export declare const Tabs: () => {
+export declare const Tabs: (colors: string[]) => {
     '.sk-tabs': {
         '@apply w-full': {};
+        '&-list': {
+            '@apply flex items-center gap-20 border-b-1 border-transparent': {};
+            '&[data-underline="true"]': {
+                '@apply border-divider': {};
+            };
+            '&-item': {
+                "&[data-color='tertiary']": {
+                    '.sk-tabs-list-item-divider': {
+                        '@apply bg-primary-surface': {};
+                    };
+                };
+                '@apply flex flex-col gap-y-10': {};
+                '&[data-size="sm"]': {
+                    '> button': {
+                        '@apply text-small': {};
+                    };
+                };
+                '&-button': {
+                    '@apply h-auto border-0 py-0 px-2': {};
+                    '@apply rounded-4': {};
+                    '&[aria-readonly="true"]': {
+                        '@apply text-dark-disabled cursor-default': {};
+                    };
+                    '&[aria-readonly="false"]:hover,&:focus-visible': {
+                        '@apply ring-[.3rem]': {};
+                        '@apply ring-ring': {};
+                        '@apply ring-offset-background-content': {};
+                        '@apply outline-0': {};
+                    };
+                    '.sk-callout': {
+                        '@apply absolute self-end': {};
+                    };
+                };
+                '.sk-tabs-list-item-divider': {
+                    '@apply m-0 min-h-2 h-2 rounded-t-24 opacity-0': {};
+                };
+                '&[data-current="true"]': {
+                    '.sk-tabs-list-item-divider': {
+                        '@apply opacity-100': {};
+                    };
+                };
+            };
+        };
         '&-panels': {
-            '@apply p-8': {};
-            '@apply mt-8': {};
+            '@apply mt-20': {};
         };
         '&-content': {
             '&:not([data-selected="true"])': {

package/dist/types/preset.d.ts

@@ -6,7 +6,7 @@ interface PresetOptions {
     ariaAttributes?: boolean;
     plugin?: PluginOptions;
 }
-declare const preset: (_options: PresetOptions) => {
+declare const preset: (_options?: PresetOptions) => {
     plugins: ({
         handler: import("tailwindcss/types/config").PluginCreator;
         config?: Partial<import("tailwindcss/types/config").Config>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "3.9.1",
+  "version": "3.10.0",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -9,6 +9,7 @@
   "exports": {
     ".": {
       "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts",
       "default": "./dist/esm/index.js"
     }
   },
@@ -20,23 +21,23 @@
   },
   "scripts": {
     "version": "yarn build",
-    "build": "concurrently yarn:build:*",
-    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps",
-    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps",
+    "build": "yarn build:types && yarn build:esm && yarn build:cjs",
+    "build:esm": "swc src -d dist/esm --config-file ../../.swcrc.esm",
+    "build:cjs": "swc src -d dist/cjs --config-file ../../.swcrc",
     "build:types": "tsc -p ./tsconfig.production.json --emitDeclarationOnly --declaration --declarationDir dist/types"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.20",
     "clean-css": "^5.3.3",
-    "postcss": "^8.4.38",
+    "postcss": "^8.5.1",
     "postcss-import": "^16.1.0"
   },
   "dependencies": {
-    "@sk-web-gui/theme": "2.3.2",
+    "@sk-web-gui/theme": "2.4.0",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/forms": "^0.5.10",
     "mini-svg-data-uri": "^1.4.4",
-    "tailwindcss": "^3.4.0"
+    "tailwindcss": "^3.4.17"
   },
-  "gitHead": "453dd73b447de3572777c4312e0556e9c328c792"
+  "gitHead": "75356e0c4d09e17cba651439b35843cc3c386191"
 }