@sk-web-gui/core 0.1.92 → 1.0.0

package/dist/cjs/components/search-field.js

@@ -0,0 +1,23 @@
+module.exports = SearchField = function SearchField() {
+  return {
+    '.sk-search-field': {
+      '&-md': {
+        '.sk-search-field-icon': {
+          '@apply w-[2rem] h-[2rem]': {},
+          svg: {
+            '@apply w-[2rem] h-[2rem]': {}
+          }
+        }
+      },
+      '&-lg': {
+        '.sk-search-field-icon': {
+          '@apply w-[2.2rem] h-[2.2rem]': {},
+          svg: {
+            '@apply w-[2.2rem] h-[2.2rem]': {}
+          }
+        }
+      }
+    }
+  };
+};
+//# sourceMappingURL=search-field.js.map

package/dist/cjs/components/search-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-field.js","names":["module","exports","SearchField","svg"],"sources":["../../../src/components/search-field.js"],"sourcesContent":["module.exports = SearchField = () => ({\r\n  '.sk-search-field': {\r\n    '&-md': {\r\n      '.sk-search-field-icon': {\r\n        '@apply w-[2rem] h-[2rem]': {},\r\n        svg: {\r\n          '@apply w-[2rem] h-[2rem]': {},\r\n        },\r\n      },\r\n    },\r\n    '&-lg': {\r\n      '.sk-search-field-icon': {\r\n        '@apply w-[2.2rem] h-[2.2rem]': {},\r\n        svg: {\r\n          '@apply w-[2.2rem] h-[2.2rem]': {},\r\n        },\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,WAAW,GAAG,SAAAA,YAAA;EAAA,OAAO;IACpC,kBAAkB,EAAE;MAClB,MAAM,EAAE;QACN,uBAAuB,EAAE;UACvB,0BAA0B,EAAE,CAAC,CAAC;UAC9BC,GAAG,EAAE;YACH,0BAA0B,EAAE,CAAC;UAC/B;QACF;MACF,CAAC;MACD,MAAM,EAAE;QACN,uBAAuB,EAAE;UACvB,8BAA8B,EAAE,CAAC,CAAC;UAClCA,GAAG,EAAE;YACH,8BAA8B,EAAE,CAAC;UACnC;QACF;MACF;IACF;EACF,CAAC;AAAA,CAAC"}

package/dist/cjs/components/select.js

@@ -0,0 +1,190 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function chevronDown(color) {
+  //TODO: This wont work with CSS variables. The colors are set here and wont work with themes
+  return "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6' /></svg>";
+}
+function tertiary() {
+  return {
+    '&-tertiary': {
+      '@apply border-2': {},
+      '@apply bg-tertiary-surface': {},
+      '@apply hover:bg-tertiary-surface-hover': {},
+      '@apply border-transparent': {},
+      '&.sk-form-select-sm': {
+        //Padding - border width
+        '@apply pl-12': {},
+        //Background position - border width
+        '@apply bg-right-8': {},
+        //Padding + icon width - border width
+        '@apply pr-[3.2rem]': {}
+      },
+      '&.sk-form-select-md': {
+        //Padding - border width
+        '@apply pl-16': {},
+        //Background position - border width
+        '@apply bg-right-12': {},
+        //Padding + icon width - border width
+        '@apply pr-[4.2rem]': {}
+      },
+      '&.sk-form-select-lg': {
+        //Padding - border width
+        '@apply pl-18': {},
+        //Background position - border width
+        '@apply bg-right-16': {},
+        //Padding + icon width - border width
+        '@apply pr-[4.8rem]': {}
+      },
+      //Disabled
+      '&[aria-disabled="true"]': {
+        '@apply bg-tertiary-surface-disabled': {}
+      }
+    }
+  };
+}
+function primary() {
+  return {
+    '&-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': {},
+      '&.sk-form-select-sm': {
+        //Padding - border width
+        '@apply pl-[1.3rem]': {},
+        //Background position - border width
+        '@apply bg-[center_right_0.9rem]': {},
+        //Padding + icon width - border width
+        '@apply pr-[3.3rem]': {},
+        '&[aria-invalid="true"]': {
+          //Padding - border width
+          '@apply pl-12': {},
+          //Background position - border width
+          '@apply bg-right-8': {},
+          //Padding + icon width - border width
+          '@apply pr-[3.2rem]': {}
+        }
+      },
+      '&.sk-form-select-md': {
+        //Padding - border width
+        '@apply pl-[1.7rem]': {},
+        //Background position - border width
+        '@apply bg-[center_right_1.3rem]': {},
+        //Padding + icon width - border width
+        '@apply pr-[4.3rem]': {},
+        '&[aria-invalid="true"]': {
+          //Padding - border width
+          '@apply pl-16': {},
+          //Background position - border width
+          '@apply bg-right-12': {},
+          //Padding + icon width - border width
+          '@apply pr-[4.2rem]': {}
+        }
+      },
+      '&.sk-form-select-lg': {
+        //Padding - border width
+        '@apply pl-[1.9rem]': {},
+        //Background position - border width
+        '@apply bg-[center_right_1.7rem]': {},
+        //Padding + icon width - border width
+        '@apply pr-[4.9rem]': {},
+        '&[aria-invalid="true"]': {
+          //Padding - border width
+          '@apply pl-18': {},
+          //Background position - border width
+          '@apply bg-right-16': {},
+          //Padding + icon width - border width
+          '@apply pr-[4.8rem]': {}
+        }
+      },
+      //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': {}
+      }
+    }
+  };
+}
+module.exports = Select = function Select() {
+  return {
+    '.sk-form-select': _extends({
+      '@apply h-fit': {},
+      '@apply w-fit': {},
+      '@apply box-border': {},
+      '@apply focus:border-transparent': {},
+      '@apply rounded-button': {},
+      '@apply text-dark-secondary': {},
+      '@apply placeholder:text-dark-secondary': {},
+      '@apply hover:placeholder:text-dark-primary': {},
+      '@apply focus:placeholder:text-dark-primary': {},
+      '@apply hover:text-dark-primary': {},
+      '@apply focus:text-dark-primary': {},
+      '@apply py-6': {},
+      '@apply focus:ring focus:ring-ring focus:ring-offset': {},
+      '@apply focus:outline-0': {},
+      backgroundImage: ["url(\"data:image/svg+xml;utf-8," + chevronDown('rgb(68,68,80)') + "\")"],
+      '&:hover, &:focus': {
+        backgroundImage: ["url(\"data:image/svg+xml;utf-8," + chevronDown('rgb(28,28,40)') + "\")"]
+      }
+    }, tertiary(), primary(), {
+      //Droprown
+      '*': {
+        '@apply bg-background-content': {}
+      },
+      //Invalid
+      '&[aria-invalid="true"]': {
+        '@apply border-2 border-error-surface-primary': {}
+      },
+      //Disabled
+      '&[aria-disabled="true"]': {
+        '@apply opacity-100': {},
+        '@apply text-dark-disabled': {},
+        '@apply placeholder:text-dark-disabled': {},
+        '@apply bg-tertiary-surface-disabled': {},
+        backgroundImage: ["url(\"data:image/svg+xml;utf-8," + chevronDown('rgba(28,28,40, 0.5)') + "\")"]
+      },
+      '&-sm': {
+        '@apply h-[3.2rem]': {},
+        '@apply text-label-small': {},
+        '@apply rounded-button-sm': {},
+        '*': {
+          '@apply text-input-small': {}
+        }
+      },
+      '&-md': {
+        '@apply h-[4rem]': {},
+        '@apply text-label-medium': {},
+        '@apply rounded-button-md': {},
+        '*': {
+          '@apply text-input-medium': {}
+        }
+      },
+      '&-lg': {
+        '@apply h-[4.8rem]': {},
+        '@apply text-label-large': {},
+        '@apply rounded-button-lg': {},
+        '*': {
+          '@apply text-input-large': {}
+        }
+      }
+    }),
+    '.dark .sk-form-select': {
+      backgroundImage: ["url(\"data:image/svg+xml;utf-8," + chevronDown('rgb(229,229,229)') + "\")"],
+      '&:hover, &:focus': {
+        backgroundImage: ["url(\"data:image/svg+xml;utf-8," + chevronDown('rgb(255,255,255)') + "\")"]
+      },
+      '&[aria-disabled="true"]': {
+        backgroundImage: ["url(\"data:image/svg+xml;utf-8," + chevronDown('rgba(255,255,255, 0.64)') + "\")"]
+      }
+    }
+  };
+};
+//# sourceMappingURL=select.js.map

package/dist/cjs/components/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":["chevronDown","color","tertiary","primary","module","exports","Select","_extends","backgroundImage"],"sources":["../../../src/components/select.js"],"sourcesContent":["function chevronDown(color) {\r\n  //TODO: This wont work with CSS variables. The colors are set here and wont work with themes\r\n  return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='${color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6' /></svg>`;\r\n}\r\n\r\nfunction tertiary() {\r\n  return {\r\n    '&-tertiary': {\r\n      '@apply border-2': {},\r\n\r\n      '@apply bg-tertiary-surface': {},\r\n      '@apply hover:bg-tertiary-surface-hover': {},\r\n      '@apply border-transparent': {},\r\n\r\n      '&.sk-form-select-sm': {\r\n        //Padding - border width\r\n        '@apply pl-12': {},\r\n        //Background position - border width\r\n        '@apply bg-right-8': {},\r\n\r\n        //Padding + icon width - border width\r\n        '@apply pr-[3.2rem]': {},\r\n      },\r\n      '&.sk-form-select-md': {\r\n        //Padding - border width\r\n        '@apply pl-16': {},\r\n        //Background position - border width\r\n        '@apply bg-right-12': {},\r\n        //Padding + icon width - border width\r\n        '@apply pr-[4.2rem]': {},\r\n      },\r\n      '&.sk-form-select-lg': {\r\n        //Padding - border width\r\n        '@apply pl-18': {},\r\n        //Background position - border width\r\n        '@apply bg-right-16': {},\r\n        //Padding + icon width - border width\r\n        '@apply pr-[4.8rem]': {},\r\n      },\r\n      //Disabled\r\n      '&[aria-disabled=\"true\"]': {\r\n        '@apply bg-tertiary-surface-disabled': {},\r\n      },\r\n    },\r\n  };\r\n}\r\n\r\nfunction primary() {\r\n  return {\r\n    '&-primary': {\r\n      '@apply border-1': {},\r\n      '@apply border-primitives-overlay-darken-6': {},\r\n      '@apply dark:border-primitives-overlay-lighten-6': {},\r\n      '@apply hover:border-primitives-overlay-darken-8': {},\r\n      '@apply dark:hover:border-primitives-overlay-lighten-4': {},\r\n      '@apply bg-primitives-overlay-lighten-10': {},\r\n      '@apply dark:bg-primitives-overlay-darken-6': {},\r\n      '@apply hover:bg-primitives-overlay-lighten-10': {},\r\n      '@apply dark:hover:bg-primitives-overlay-darken-6': {},\r\n\r\n      '&.sk-form-select-sm': {\r\n        //Padding - border width\r\n        '@apply pl-[1.3rem]': {},\r\n        //Background position - border width\r\n        '@apply bg-[center_right_0.9rem]': {},\r\n        //Padding + icon width - border width\r\n        '@apply pr-[3.3rem]': {},\r\n\r\n        '&[aria-invalid=\"true\"]': {\r\n          //Padding - border width\r\n          '@apply pl-12': {},\r\n          //Background position - border width\r\n          '@apply bg-right-8': {},\r\n          //Padding + icon width - border width\r\n          '@apply pr-[3.2rem]': {},\r\n        },\r\n      },\r\n      '&.sk-form-select-md': {\r\n        //Padding - border width\r\n        '@apply pl-[1.7rem]': {},\r\n        //Background position - border width\r\n        '@apply bg-[center_right_1.3rem]': {},\r\n        //Padding + icon width - border width\r\n        '@apply pr-[4.3rem]': {},\r\n\r\n        '&[aria-invalid=\"true\"]': {\r\n          //Padding - border width\r\n          '@apply pl-16': {},\r\n          //Background position - border width\r\n          '@apply bg-right-12': {},\r\n          //Padding + icon width - border width\r\n          '@apply pr-[4.2rem]': {},\r\n        },\r\n      },\r\n      '&.sk-form-select-lg': {\r\n        //Padding - border width\r\n        '@apply pl-[1.9rem]': {},\r\n        //Background position - border width\r\n        '@apply bg-[center_right_1.7rem]': {},\r\n        //Padding + icon width - border width\r\n        '@apply pr-[4.9rem]': {},\r\n\r\n        '&[aria-invalid=\"true\"]': {\r\n          //Padding - border width\r\n          '@apply pl-18': {},\r\n          //Background position - border width\r\n          '@apply bg-right-16': {},\r\n          //Padding + icon width - border width\r\n          '@apply pr-[4.8rem]': {},\r\n        },\r\n      },\r\n      //Disabled\r\n      '&[aria-disabled=\"true\"]': {\r\n        '@apply bg-primitives-overlay-darken-1': {},\r\n        '@apply dark:bg-primitives-overlay-lighten-1': {},\r\n        '@apply border-primitives-overlay-darken-3': {},\r\n        '@apply dark:border-primitives-overlay-lighten-3': {},\r\n        '@apply hover:border-primitives-overlay-darken-3': {},\r\n        '@apply dark:hover:border-primitives-overlay-lighten-3': {},\r\n      },\r\n    },\r\n  };\r\n}\r\n\r\nmodule.exports = Select = () => ({\r\n  '.sk-form-select': {\r\n    '@apply h-fit': {},\r\n    '@apply w-fit': {},\r\n    '@apply box-border': {},\r\n    '@apply focus:border-transparent': {},\r\n    '@apply rounded-button': {},\r\n    '@apply text-dark-secondary': {},\r\n    '@apply placeholder:text-dark-secondary': {},\r\n    '@apply hover:placeholder:text-dark-primary': {},\r\n    '@apply focus:placeholder:text-dark-primary': {},\r\n    '@apply hover:text-dark-primary': {},\r\n    '@apply focus:text-dark-primary': {},\r\n    '@apply py-6': {},\r\n    '@apply focus:ring focus:ring-ring focus:ring-offset': {},\r\n    '@apply focus:outline-0': {},\r\n\r\n    backgroundImage: [`url(\"data:image/svg+xml;utf-8,${chevronDown('rgb(68,68,80)')}\")`],\r\n    '&:hover, &:focus': {\r\n      backgroundImage: [`url(\"data:image/svg+xml;utf-8,${chevronDown('rgb(28,28,40)')}\")`],\r\n    },\r\n\r\n    ...tertiary(),\r\n    ...primary(),\r\n\r\n    //Droprown\r\n    '*': {\r\n      '@apply bg-background-content': {},\r\n    },\r\n\r\n    //Invalid\r\n    '&[aria-invalid=\"true\"]': {\r\n      '@apply border-2 border-error-surface-primary': {},\r\n    },\r\n\r\n    //Disabled\r\n    '&[aria-disabled=\"true\"]': {\r\n      '@apply opacity-100': {},\r\n      '@apply text-dark-disabled': {},\r\n      '@apply placeholder:text-dark-disabled': {},\r\n      '@apply bg-tertiary-surface-disabled': {},\r\n      backgroundImage: [`url(\"data:image/svg+xml;utf-8,${chevronDown('rgba(28,28,40, 0.5)')}\")`],\r\n    },\r\n\r\n    '&-sm': {\r\n      '@apply h-[3.2rem]': {},\r\n      '@apply text-label-small': {},\r\n      '@apply rounded-button-sm': {},\r\n      '*': {\r\n        '@apply text-input-small': {},\r\n      },\r\n    },\r\n    '&-md': {\r\n      '@apply h-[4rem]': {},\r\n      '@apply text-label-medium': {},\r\n      '@apply rounded-button-md': {},\r\n      '*': {\r\n        '@apply text-input-medium': {},\r\n      },\r\n    },\r\n    '&-lg': {\r\n      '@apply h-[4.8rem]': {},\r\n      '@apply text-label-large': {},\r\n      '@apply rounded-button-lg': {},\r\n      '*': {\r\n        '@apply text-input-large': {},\r\n      },\r\n    },\r\n  },\r\n  '.dark .sk-form-select': {\r\n    backgroundImage: [`url(\"data:image/svg+xml;utf-8,${chevronDown('rgb(229,229,229)')}\")`],\r\n    '&:hover, &:focus': {\r\n      backgroundImage: [`url(\"data:image/svg+xml;utf-8,${chevronDown('rgb(255,255,255)')}\")`],\r\n    },\r\n    '&[aria-disabled=\"true\"]': {\r\n      backgroundImage: [`url(\"data:image/svg+xml;utf-8,${chevronDown('rgba(255,255,255, 0.64)')}\")`],\r\n    },\r\n  },\r\n});\r\n"],"mappings":"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"}

package/dist/cjs/components/side-menu.js

@@ -84,7 +84,7 @@ module.exports = Menu = function Menu() {
               '@apply pointer-events-none': {}
             },
             '& > .sk-sidemenu-wrapper::after': {
-              '@apply bg-info-light block relative w-full h-[44px]': {},
+              '@apply bg-info-surface-accent block relative w-full h-[44px]': {},
               content: "''"
             }
           },
@@ -108,7 +108,7 @@ module.exports = Menu = function Menu() {
           }
         },
         '&-separator': {
-          '@apply text-svartvik-200': {},
+          '@apply text-divider': {},
           height: '1px',
           width: '100%',
           backgroundImage: "repeating-linear-gradient(0deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px), repeating-linear-gradient(90deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px), repeating-linear-gradient(180deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px), repeating-linear-gradient(270deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px)",
@@ -121,7 +121,7 @@ module.exports = Menu = function Menu() {
             '@apply border-t-0': {}
           },
           '> .sk-sidemenu-wrapper': {
-            '@apply h-[64px] max-h-[64px] border border-svartvik-200': {},
+            '@apply h-[64px] max-h-[64px] border border-divider': {},
             '> .sk-sidemenu-item-link': {
               '@apply  py-md': {},
               paddingLeft: '3.2rem'
@@ -134,14 +134,14 @@ module.exports = Menu = function Menu() {
             '@apply border-t-0': {}
           },
           '> .items': {
-            '@apply border-l border-r border-svartvik-200': {}
+            '@apply border-l border-r border-divider': {}
           },
           '&.open > .items': {
-            '@apply border-b border-svartvik-200': {}
+            '@apply border-b border-divider': {}
           },
           '&.separator': {
             '& + .lvl-0': {
-              '@apply border-t border-svartvik-200': {}
+              '@apply border-t border-divider': {}
             }
           },
           '&.separator > .sk-sidemenu-wrapper': {
@@ -154,7 +154,7 @@ module.exports = Menu = function Menu() {
             '@apply h-[56px] max-h-[56px]': {}
           },
           '&.open > .sk-sidemenu-wrapper': {
-            '@apply border-b border-svartvik-200': {}
+            '@apply border-b border-divider': {}
           },
           '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
             paddingLeft: '4.8rem'

package/dist/cjs/components/side-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-menu.js","names":["module","exports","Menu","span","boxShadow","path","content","svg","height","width","backgroundImage","backgroundSize","backgroundPosition","backgroundRepeat","paddingLeft"],"sources":["../../../src/components/side-menu.js"],"sourcesContent":["module.exports = Menu = () => ({\r\n  '.sk-sidemenu': {\r\n    '@apply w-[440px]': {},\r\n\r\n    '&-header': {\r\n      '@apply relative py-[2rem] px-[1.6rem] rounded-t-[.2rem] bg-primary text-white': {},\r\n\r\n      '.label-small': {\r\n        '@apply text-[1.6rem]': {},\r\n      },\r\n\r\n      '.label-button': {\r\n        '@apply w-full justify-between p-0 leading-[inherit]': {},\r\n\r\n        '&-icon': {\r\n          '@apply !text-xl': {},\r\n        },\r\n      },\r\n\r\n      '&-label': {\r\n        '@apply flex items-center': {},\r\n\r\n        'label, .label': {\r\n          '@apply text-xl font-bold flex items-center w-full': {},\r\n        },\r\n\r\n        span: {\r\n          '@apply ml-auto': {},\r\n        },\r\n      },\r\n    },\r\n\r\n    '&-item': {\r\n      '@apply bg-white h-full': {},\r\n\r\n      '> ul.items': {\r\n        '@apply hidden': {},\r\n      },\r\n\r\n      '&.open > ul.items': {\r\n        '@apply block': {},\r\n      },\r\n\r\n      '&-label': {\r\n        '@apply flex-grow select-none flex items-center': {},\r\n      },\r\n\r\n      '&.active': {\r\n        '> .sk-sidemenu-wrapper': {\r\n          boxShadow: 'inset 6px 0 0 0 #005595',\r\n          '.sk-sidemenu-item-label': {\r\n            '@apply underline': {},\r\n          },\r\n        },\r\n      },\r\n\r\n      '& .sk-sidemenu-wrapper': {\r\n        '@apply min-h-[48px] max-h-[48px] relative flex flex-wrap items-center': {},\r\n\r\n        '.sk-sidemenu-item-link': {\r\n          '@apply flex-grow relative flex items-center text-base text-left justify-start pr-sm h-full': {},\r\n          '@apply focus-visible:z-base': {},\r\n\r\n          '&[aria-disabled=\"true\"]': {\r\n            '@apply text-neutral-600 cursor-not-allowed': {},\r\n\r\n            '.sk-sidemenu-item-label': {\r\n              '@apply text-neutral-600': {},\r\n            },\r\n          },\r\n        },\r\n\r\n        '.expand': {\r\n          '@apply w-[50px] h-full flex justify-center items-center ml-auto p-0': {},\r\n\r\n          '&[aria-disabled=\"true\"]': {\r\n            '@apply !text-gray-stroke cursor-not-allowed !bg-transparent': {},\r\n\r\n            path: {\r\n              '@apply fill-gray-stroke': {},\r\n            },\r\n          },\r\n\r\n          path: {\r\n            '@apply fill-primary': {},\r\n          },\r\n\r\n          '&-button': {\r\n            '@apply fill-primary flex justify-center items-center border-l border-gray-stroke h-[24px] w-[45px]': {},\r\n          },\r\n        },\r\n      },\r\n\r\n      '&.open': {\r\n        '& + .menu-item > .sk-sidemenu-wrapper': {\r\n          '@apply border-t': {},\r\n        },\r\n      },\r\n\r\n      '&.draggable': {\r\n        '&.dragenter': {\r\n          '> .sk-sidemenu-wrapper': {\r\n            '@apply h-full max-h-full': {},\r\n          },\r\n          \"> .sk-sidemenu-wrapper > *:not([draggable='true'])\": {\r\n            '@apply pointer-events-none': {},\r\n          },\r\n\r\n          '& > .sk-sidemenu-wrapper::after': {\r\n            '@apply bg-info-light block relative w-full h-[44px]': {},\r\n            content: \"''\",\r\n          },\r\n        },\r\n\r\n        '&.moving': {\r\n          '@apply hidden': {},\r\n        },\r\n\r\n        '& .sk-sidemenu-menuitem-movebutton': {\r\n          '@apply -translate-x-full no-underline text-gray-stroke absolute py-sm inset-y-0 my-auto': {},\r\n\r\n          svg: {\r\n            '@apply h-full': {},\r\n          },\r\n\r\n          '&[aria-disabled=\"true\"]': {\r\n            '@apply !text-gray-stroke cursor-not-allowed !bg-transparent': {},\r\n          },\r\n        },\r\n\r\n        '&.separator': {\r\n          '@apply bg-transparent relative': {},\r\n\r\n          '> div.sk-sidemenu-wrapper, > .sk-sidemenu-item-link': {\r\n            '@apply h-[44px]': {},\r\n          },\r\n        },\r\n      },\r\n\r\n      '&-separator': {\r\n        '@apply text-svartvik-200': {},\r\n        height: '1px',\r\n        width: '100%',\r\n        backgroundImage: `repeating-linear-gradient(0deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px), repeating-linear-gradient(90deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px), repeating-linear-gradient(180deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px), repeating-linear-gradient(270deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px)`,\r\n        backgroundSize: '2px 100%, 100% 2px, 2px 100% , 100% 2px',\r\n        backgroundPosition: '0 0, 0 0, 100% 0, 0 100%',\r\n        backgroundRepeat: 'no-repeat',\r\n      },\r\n\r\n      '&.lvl-0': {\r\n        '&:first-child > .sk-sidemenu-wrapper': {\r\n          '@apply border-t-0': {},\r\n        },\r\n        '> .sk-sidemenu-wrapper': {\r\n          '@apply h-[64px] max-h-[64px] border border-svartvik-200': {},\r\n\r\n          '> .sk-sidemenu-item-link': {\r\n            '@apply  py-md': {},\r\n            paddingLeft: '3.2rem',\r\n          },\r\n        },\r\n\r\n        '.sk-sidemenu-item-link': {\r\n          '@apply h-[64px] max-h-[64px]': {},\r\n        },\r\n\r\n        '& + .sk-sidemenu-item > .sk-sidemenu-wrapper': {\r\n          '@apply border-t-0': {},\r\n        },\r\n\r\n        '> .items': {\r\n          '@apply border-l border-r border-svartvik-200': {},\r\n        },\r\n\r\n        '&.open > .items': {\r\n          '@apply border-b border-svartvik-200': {},\r\n        },\r\n\r\n        '&.separator': {\r\n          '& + .lvl-0': {\r\n            '@apply border-t border-svartvik-200': {},\r\n          },\r\n        },\r\n\r\n        '&.separator > .sk-sidemenu-wrapper': {\r\n          '@apply border-0': {},\r\n        },\r\n      },\r\n\r\n      '&.lvl-1': {\r\n        '@apply bg-gray-lighter': {},\r\n\r\n        '> .sk-sidemenu-wrapper, .sk-sidemenu-item-link': {\r\n          '@apply h-[56px] max-h-[56px]': {},\r\n        },\r\n\r\n        '&.open > .sk-sidemenu-wrapper': {\r\n          '@apply border-b border-svartvik-200': {},\r\n        },\r\n\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '4.8rem',\r\n        },\r\n      },\r\n\r\n      '&.lvl-2': {\r\n        '.sk-sidemenu-wrapper': {\r\n          '@apply bg-gray-middle h-[48px] max-h-[48px]': {},\r\n\r\n          '> .sk-sidemenu-item-link': {\r\n            '@apply h-[48px] max-h-[48px]': {},\r\n          },\r\n        },\r\n\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '6.4rem',\r\n        },\r\n      },\r\n\r\n      '&.lvl-3': {\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '8rem',\r\n        },\r\n      },\r\n\r\n      '&.lvl-4': {\r\n        '.sk-sidemenu-wrapper': {\r\n          '@apply bg-[#d4d4d4]': {},\r\n        },\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '9.6rem',\r\n        },\r\n      },\r\n\r\n      '&.lvl-5': {\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '11.2rem',\r\n        },\r\n      },\r\n\r\n      '&.lvl-6': {\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '12.8rem',\r\n        },\r\n      },\r\n\r\n      '&.lvl-7': {\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '14.4rem',\r\n        },\r\n      },\r\n\r\n      '&.lvl-8': {\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '16rem',\r\n        },\r\n      },\r\n\r\n      '&.lvl-9': {\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '17.6rem',\r\n        },\r\n      },\r\n\r\n      '&.lvl-10': {\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '19.2rem',\r\n        },\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":"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"}
+{"version":3,"file":"side-menu.js","names":["module","exports","Menu","span","boxShadow","path","content","svg","height","width","backgroundImage","backgroundSize","backgroundPosition","backgroundRepeat","paddingLeft"],"sources":["../../../src/components/side-menu.js"],"sourcesContent":["module.exports = Menu = () => ({\r\n  '.sk-sidemenu': {\r\n    '@apply w-[440px]': {},\r\n\r\n    '&-header': {\r\n      '@apply relative py-[2rem] px-[1.6rem] rounded-t-[.2rem] bg-primary text-white': {},\r\n\r\n      '.label-small': {\r\n        '@apply text-[1.6rem]': {},\r\n      },\r\n\r\n      '.label-button': {\r\n        '@apply w-full justify-between p-0 leading-[inherit]': {},\r\n\r\n        '&-icon': {\r\n          '@apply !text-xl': {},\r\n        },\r\n      },\r\n\r\n      '&-label': {\r\n        '@apply flex items-center': {},\r\n\r\n        'label, .label': {\r\n          '@apply text-xl font-bold flex items-center w-full': {},\r\n        },\r\n\r\n        span: {\r\n          '@apply ml-auto': {},\r\n        },\r\n      },\r\n    },\r\n\r\n    '&-item': {\r\n      '@apply bg-white h-full': {},\r\n\r\n      '> ul.items': {\r\n        '@apply hidden': {},\r\n      },\r\n\r\n      '&.open > ul.items': {\r\n        '@apply block': {},\r\n      },\r\n\r\n      '&-label': {\r\n        '@apply flex-grow select-none flex items-center': {},\r\n      },\r\n\r\n      '&.active': {\r\n        '> .sk-sidemenu-wrapper': {\r\n          boxShadow: 'inset 6px 0 0 0 #005595',\r\n          '.sk-sidemenu-item-label': {\r\n            '@apply underline': {},\r\n          },\r\n        },\r\n      },\r\n\r\n      '& .sk-sidemenu-wrapper': {\r\n        '@apply min-h-[48px] max-h-[48px] relative flex flex-wrap items-center': {},\r\n\r\n        '.sk-sidemenu-item-link': {\r\n          '@apply flex-grow relative flex items-center text-base text-left justify-start pr-sm h-full': {},\r\n          '@apply focus-visible:z-base': {},\r\n\r\n          '&[aria-disabled=\"true\"]': {\r\n            '@apply text-neutral-600 cursor-not-allowed': {},\r\n\r\n            '.sk-sidemenu-item-label': {\r\n              '@apply text-neutral-600': {},\r\n            },\r\n          },\r\n        },\r\n\r\n        '.expand': {\r\n          '@apply w-[50px] h-full flex justify-center items-center ml-auto p-0': {},\r\n\r\n          '&[aria-disabled=\"true\"]': {\r\n            '@apply !text-gray-stroke cursor-not-allowed !bg-transparent': {},\r\n\r\n            path: {\r\n              '@apply fill-gray-stroke': {},\r\n            },\r\n          },\r\n\r\n          path: {\r\n            '@apply fill-primary': {},\r\n          },\r\n\r\n          '&-button': {\r\n            '@apply fill-primary flex justify-center items-center border-l border-gray-stroke h-[24px] w-[45px]': {},\r\n          },\r\n        },\r\n      },\r\n\r\n      '&.open': {\r\n        '& + .menu-item > .sk-sidemenu-wrapper': {\r\n          '@apply border-t': {},\r\n        },\r\n      },\r\n\r\n      '&.draggable': {\r\n        '&.dragenter': {\r\n          '> .sk-sidemenu-wrapper': {\r\n            '@apply h-full max-h-full': {},\r\n          },\r\n          \"> .sk-sidemenu-wrapper > *:not([draggable='true'])\": {\r\n            '@apply pointer-events-none': {},\r\n          },\r\n\r\n          '& > .sk-sidemenu-wrapper::after': {\r\n            '@apply bg-info-surface-accent block relative w-full h-[44px]': {},\r\n            content: \"''\",\r\n          },\r\n        },\r\n\r\n        '&.moving': {\r\n          '@apply hidden': {},\r\n        },\r\n\r\n        '& .sk-sidemenu-menuitem-movebutton': {\r\n          '@apply -translate-x-full no-underline text-gray-stroke absolute py-sm inset-y-0 my-auto': {},\r\n\r\n          svg: {\r\n            '@apply h-full': {},\r\n          },\r\n\r\n          '&[aria-disabled=\"true\"]': {\r\n            '@apply !text-gray-stroke cursor-not-allowed !bg-transparent': {},\r\n          },\r\n        },\r\n\r\n        '&.separator': {\r\n          '@apply bg-transparent relative': {},\r\n\r\n          '> div.sk-sidemenu-wrapper, > .sk-sidemenu-item-link': {\r\n            '@apply h-[44px]': {},\r\n          },\r\n        },\r\n      },\r\n\r\n      '&-separator': {\r\n        '@apply text-divider': {},\r\n        height: '1px',\r\n        width: '100%',\r\n        backgroundImage: `repeating-linear-gradient(0deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px), repeating-linear-gradient(90deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px), repeating-linear-gradient(180deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px), repeating-linear-gradient(270deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px)`,\r\n        backgroundSize: '2px 100%, 100% 2px, 2px 100% , 100% 2px',\r\n        backgroundPosition: '0 0, 0 0, 100% 0, 0 100%',\r\n        backgroundRepeat: 'no-repeat',\r\n      },\r\n\r\n      '&.lvl-0': {\r\n        '&:first-child > .sk-sidemenu-wrapper': {\r\n          '@apply border-t-0': {},\r\n        },\r\n        '> .sk-sidemenu-wrapper': {\r\n          '@apply h-[64px] max-h-[64px] border border-divider': {},\r\n\r\n          '> .sk-sidemenu-item-link': {\r\n            '@apply  py-md': {},\r\n            paddingLeft: '3.2rem',\r\n          },\r\n        },\r\n\r\n        '.sk-sidemenu-item-link': {\r\n          '@apply h-[64px] max-h-[64px]': {},\r\n        },\r\n\r\n        '& + .sk-sidemenu-item > .sk-sidemenu-wrapper': {\r\n          '@apply border-t-0': {},\r\n        },\r\n\r\n        '> .items': {\r\n          '@apply border-l border-r border-divider': {},\r\n        },\r\n\r\n        '&.open > .items': {\r\n          '@apply border-b border-divider': {},\r\n        },\r\n\r\n        '&.separator': {\r\n          '& + .lvl-0': {\r\n            '@apply border-t border-divider': {},\r\n          },\r\n        },\r\n\r\n        '&.separator > .sk-sidemenu-wrapper': {\r\n          '@apply border-0': {},\r\n        },\r\n      },\r\n\r\n      '&.lvl-1': {\r\n        '@apply bg-gray-lighter': {},\r\n\r\n        '> .sk-sidemenu-wrapper, .sk-sidemenu-item-link': {\r\n          '@apply h-[56px] max-h-[56px]': {},\r\n        },\r\n\r\n        '&.open > .sk-sidemenu-wrapper': {\r\n          '@apply border-b border-divider': {},\r\n        },\r\n\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '4.8rem',\r\n        },\r\n      },\r\n\r\n      '&.lvl-2': {\r\n        '.sk-sidemenu-wrapper': {\r\n          '@apply bg-gray-middle h-[48px] max-h-[48px]': {},\r\n\r\n          '> .sk-sidemenu-item-link': {\r\n            '@apply h-[48px] max-h-[48px]': {},\r\n          },\r\n        },\r\n\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '6.4rem',\r\n        },\r\n      },\r\n\r\n      '&.lvl-3': {\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '8rem',\r\n        },\r\n      },\r\n\r\n      '&.lvl-4': {\r\n        '.sk-sidemenu-wrapper': {\r\n          '@apply bg-[#d4d4d4]': {},\r\n        },\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '9.6rem',\r\n        },\r\n      },\r\n\r\n      '&.lvl-5': {\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '11.2rem',\r\n        },\r\n      },\r\n\r\n      '&.lvl-6': {\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '12.8rem',\r\n        },\r\n      },\r\n\r\n      '&.lvl-7': {\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '14.4rem',\r\n        },\r\n      },\r\n\r\n      '&.lvl-8': {\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '16rem',\r\n        },\r\n      },\r\n\r\n      '&.lvl-9': {\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '17.6rem',\r\n        },\r\n      },\r\n\r\n      '&.lvl-10': {\r\n        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {\r\n          paddingLeft: '19.2rem',\r\n        },\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":"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"}

package/dist/cjs/components/snackbar.js

@@ -0,0 +1,33 @@
+module.exports = Snackbar = function Snackbar() {
+  return {
+    '.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': {},
+      '&-text': {
+        '@apply flex-grow': {}
+      },
+      '.sk-icon': {
+        '@apply text-light-primary': {}
+      },
+      '&-content': {
+        '@apply flex-grow gap-12 py-4 flex items-center': {}
+      },
+      '&-primary': {
+        '@apply text-light-secondary bg-dark-primary': {}
+      },
+      '&-info': {
+        '@apply text-vattjom-text-secondary bg-vattjom-surface-primary': {}
+      },
+      '&-success': {
+        '@apply text-gronsta-text-secondary bg-gronsta-surface-primary': {}
+      },
+      '&-warning': {
+        '@apply text-warning-text-secondary bg-warning-surface-primary': {}
+      },
+      '&-error': {
+        '@apply text-error-text-secondary bg-error-surface-primary': {}
+      }
+    }
+  };
+};
+//# sourceMappingURL=snackbar.js.map

package/dist/cjs/components/snackbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.js","names":["module","exports","Snackbar"],"sources":["../../../src/components/snackbar.js"],"sourcesContent":["module.exports = Snackbar = () => ({\r\n  '.sk-snackbar': {\r\n    '@apply flex items-center gap-12 py-8 pl-16 pr-8 rounded-groups break-words max-w-[40rem]': {},\r\n    '@apply text-label-small text-vattjom-text-secondary': {},\r\n\r\n    '&-text': {\r\n      '@apply flex-grow': {},\r\n    },\r\n\r\n    '.sk-icon': {\r\n      '@apply text-light-primary': {},\r\n    },\r\n\r\n    '&-content': {\r\n      '@apply flex-grow gap-12 py-4 flex items-center': {},\r\n    },\r\n\r\n    '&-primary': {\r\n      '@apply text-light-secondary bg-dark-primary': {},\r\n    },\r\n    '&-info': {\r\n      '@apply text-vattjom-text-secondary bg-vattjom-surface-primary': {},\r\n    },\r\n    '&-success': {\r\n      '@apply text-gronsta-text-secondary bg-gronsta-surface-primary': {},\r\n    },\r\n    '&-warning': {\r\n      '@apply text-warning-text-secondary bg-warning-surface-primary': {},\r\n    },\r\n    '&-error': {\r\n      '@apply text-error-text-secondary bg-error-surface-primary': {},\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,QAAQ,GAAG,SAAAA,SAAA;EAAA,OAAO;IACjC,cAAc,EAAE;MACd,0FAA0F,EAAE,CAAC,CAAC;MAC9F,qDAAqD,EAAE,CAAC,CAAC;MAEzD,QAAQ,EAAE;QACR,kBAAkB,EAAE,CAAC;MACvB,CAAC;MAED,UAAU,EAAE;QACV,2BAA2B,EAAE,CAAC;MAChC,CAAC;MAED,WAAW,EAAE;QACX,gDAAgD,EAAE,CAAC;MACrD,CAAC;MAED,WAAW,EAAE;QACX,6CAA6C,EAAE,CAAC;MAClD,CAAC;MACD,QAAQ,EAAE;QACR,+DAA+D,EAAE,CAAC;MACpE,CAAC;MACD,WAAW,EAAE;QACX,+DAA+D,EAAE,CAAC;MACpE,CAAC;MACD,WAAW,EAAE;QACX,+DAA+D,EAAE,CAAC;MACpE,CAAC;MACD,SAAS,EAAE;QACT,2DAA2D,EAAE,CAAC;MAChE;IACF;EACF,CAAC;AAAA,CAAC"}

package/dist/cjs/components/spinner.js

@@ -0,0 +1,19 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+module.exports = SearchBar = function SearchBar(colors) {
+  return {
+    '.sk-spinner': _extends({
+      '@apply box-border': {},
+      '@apply flex justify-center items-center object-center': {},
+      '@apply overflow-hidden': {},
+      path: {
+        '@apply stroke-dark-secondary': {}
+      }
+    }, colors.reduce(function (styles, color) {
+      var _path, _extends2;
+      return _extends({}, styles, (_extends2 = {}, _extends2["&[data-color=\"" + color + "\"]"] = {
+        path: (_path = {}, _path["@apply stroke-" + color + "-surface-primary"] = {}, _path)
+      }, _extends2));
+    }, {}))
+  };
+};
+//# sourceMappingURL=spinner.js.map

package/dist/cjs/components/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":["module","exports","SearchBar","colors","_extends","path","reduce","styles","color","_path","_extends2"],"sources":["../../../src/components/spinner.js"],"sourcesContent":["module.exports = SearchBar = (colors) => ({\r\n  '.sk-spinner': {\r\n    '@apply box-border': {},\r\n    '@apply flex justify-center items-center object-center': {},\r\n    '@apply overflow-hidden': {},\r\n\r\n    path: {\r\n      '@apply stroke-dark-secondary': {},\r\n    },\r\n\r\n    ...colors.reduce(\r\n      (styles, color) => ({\r\n        ...styles,\r\n        [`&[data-color=\"${color}\"]`]: {\r\n          path: {\r\n            [`@apply stroke-${color}-surface-primary`]: {},\r\n          },\r\n        },\r\n      }),\r\n      {}\r\n    ),\r\n  },\r\n});\r\n"],"mappings":";AAAAA,MAAM,CAACC,OAAO,GAAGC,SAAS,GAAG,SAAAA,UAACC,MAAM;EAAA,OAAM;IACxC,aAAa,EAAAC,QAAA;MACX,mBAAmB,EAAE,CAAC,CAAC;MACvB,uDAAuD,EAAE,CAAC,CAAC;MAC3D,wBAAwB,EAAE,CAAC,CAAC;MAE5BC,IAAI,EAAE;QACJ,8BAA8B,EAAE,CAAC;MACnC;IAAC,GAEEF,MAAM,CAACG,MAAM,CACd,UAACC,MAAM,EAAEC,KAAK;MAAA,IAAAC,KAAA,EAAAC,SAAA;MAAA,OAAAN,QAAA,KACTG,MAAM,GAAAG,SAAA,OAAAA,SAAA,qBACSF,KAAK,YAAO;QAC5BH,IAAI,GAAAI,KAAA,OAAAA,KAAA,oBACgBD,KAAK,yBAAqB,CAAC,CAAC,EAAAC,KAAA;MAElD,CAAC,EAAAC,SAAA;IAAA,CACD,EACF,CAAC,CACH,CAAC;EAEL,CAAC;AAAA,CAAC"}

package/dist/cjs/components/switch.js

@@ -1,91 +1,62 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-module.exports = Switch = function Switch(colors) {
+module.exports = Switch = function Switch() {
+  var _inputTypeCheckbox, _skFormSwitch;
   return {
-    '.form-switch-label': {
-      '@apply inline-block align-middle': {},
+    '.sk-form-switch-label': {
+      '@apply inline-flex align-middle items-center': {},
+      '@apply flex-row gap-12': {},
+      '@apply font-normal text-base': {},
       "&[type='hidden']": {
         '@apply hidden': {},
-        '.form-switch': {
+        '.sk-form-switch': {
           '@apply hidden': {}
         }
       }
     },
-    '.form-switch': _extends({
-      '@apply rounded-full p-0.5 cursor-base focus:outline-none': {},
-      '@apply bg-gray-stroke dark:bg-neutral-700': {},
+    '.sk-form-switch': (_skFormSwitch = {
+      '@apply rounded-full cursor-pointer focus:outline-none': {},
+      '@apply bg-primitives-overlay-darken-3 dark:bg-primitives-overlay-lighten-3': {},
       // Hover
-      //"@apply hover:bg-neutral-300 dark:hover:bg-neutral-600": {},
-
-      border: '0.1rem solid transparent',
-      'input[type=checkbox]:checked + &, input[type=checkbox][aria-checked=mixed] + &': {
-        backgroundColor: 'currentColor',
-        '.form-switch-box-sm': {
-          transform: 'translateX(1.42rem)'
-        },
-        '.form-switch-box-md': {
-          transform: 'translateX(1.6rem)'
-        },
-        '.form-switch-box-lg': {
-          transform: 'translateX(1.78rem)'
-        }
-      },
+      '@apply hover:bg-primitives-overlay-darken-5 hover:dark:bg-primitives-overlay-lighten-4': {},
+      // Focus
       'input[type=checkbox]:focus-visible + &': {
-        '@apply z-base !important': {},
-        '@apply border-primary !important': {},
-        '@apply ring-4 ring-black !important': {}
-      },
-      'input[type=checkbox]:checked:focus-visible + &, input[type=checkbox][aria-checked=mixed]:focus-visible + &': {
-        '@apply ring-black !important': {}
-      },
-      '.dark input[type=checkbox]:checked:focus-visible + &,.dark input[type=checkbox][aria-checked=mixed]:focus-visible + &': {
-        '@apply ring-black !important': {}
+        '@apply ring ring-blue-500': {}
       },
-      'input[type=checkbox]:checked:hover:not(:disabled) + &, input[type=checkbox][aria-checked=mixed]:hover:not(:disabled) + &': {
-        '@apply cursor-base': {}
-      }
-    }, colors.reduce(function (styles, color) {
-      var _ref, _extends2;
-      return _extends({}, styles, (_extends2 = {}, _extends2["&[data-color=\"" + color + "\"]"] = (_ref = {}, _ref["@apply text-" + color] = {}, _ref), _extends2));
-    }, {}), {
-      // disabled
-      '&-disabled': {
-        '@apply cursor-not-allowed': {},
-        '&': {
-          backgroundColor: '#ECECEC'
+      // Checked
+      'input[type=checkbox]:checked + &': (_inputTypeCheckbox = {}, _inputTypeCheckbox["&[data-color=\"gronsta\"]"] = {
+        '.sk-form-switch-box': {
+          '@apply bg-gronsta-surface-primary': {}
         }
-      },
-      'input[type=checkbox]:not(:checked) + &-disabled .form-switch-box': {
-        '@apply bg-gray-stroke': {}
-      },
-      // sizing
-      '&-sm': {
-        height: '2.16rem',
-        width: '3.6rem'
-      },
-      '&-md': {
-        height: '2.4rem',
-        width: '4rem'
-      },
-      '&-lg': {
-        height: '2.64rem',
-        width: '4.4rem'
+      }, _inputTypeCheckbox['.sk-form-switch-icon'] = {
+        '@apply flex': {}
+      }, _inputTypeCheckbox['.sk-form-switch-box'] = {
+        transform: 'translateX(2.4rem)'
+      }, _inputTypeCheckbox['@apply bg-primitives-overlay-darken-4 dark:bg-primitives-overlay-lighten-5'] = {}, _inputTypeCheckbox["&[data-disabled=\"true\"]"] = {
+        '.sk-form-switch-box': {
+          '@apply bg-transparent': {},
+          '.sk-form-switch-icon': {
+            '@apply bg-primitives-overlay-darken-6 dark:bg-primitives-overlay-lighten-6': {},
+            '@apply text-light-primary': {}
+          }
+        }
+      }, _inputTypeCheckbox)
+    }, _skFormSwitch["&[data-disabled=\"true\"]"] = {
+      '@apply cursor-default': {},
+      '@apply bg-primitives-overlay-darken-2 dark:bg-primitives-overlay-lighten-2': {},
+      '.sk-form-switch-box': {
+        '@apply bg-primitives-overlay-darken-6 dark:bg-primitives-overlay-lighten-6': {}
       }
-    }),
+    }, _skFormSwitch.width = '5.6rem', _skFormSwitch),
     // Knob
-    '.form-switch-box': {
-      '@apply transition-transform ease-in-out duration-150 transform bg-white rounded-full shadow translate-x-0': {},
-      // sizing
-      '&-sm': {
-        height: '1.6rem',
-        width: '1.7rem'
-      },
-      '&-md': {
-        height: '2rem',
-        width: '2rem'
-      },
-      '&-lg': {
-        height: '2.2rem',
-        width: '2.2rem'
+    '.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 h-20 w-20': {},
+      '@apply flex justify-center items-center object-center': {},
+      '.sk-form-switch-icon': {
+        '@apply bg-transparent': {},
+        '@apply hidden': {},
+        '@apply w-20 h-20': {},
+        '@apply text-light-primary': {}
       }
     }
   };

package/dist/cjs/components/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":["module","exports","Switch","colors","_extends","border","backgroundColor","transform","reduce","styles","color","_ref","_extends2","height","width"],"sources":["../../../src/components/switch.js"],"sourcesContent":["module.exports = Switch = (colors) => ({\r\n  '.form-switch-label': {\r\n    '@apply inline-block align-middle': {},\r\n\r\n    \"&[type='hidden']\": {\r\n      '@apply hidden': {},\r\n\r\n      '.form-switch': {\r\n        '@apply hidden': {},\r\n      },\r\n    },\r\n  },\r\n  '.form-switch': {\r\n    '@apply rounded-full p-0.5 cursor-base focus:outline-none': {},\r\n    '@apply bg-gray-stroke dark:bg-neutral-700': {},\r\n    // Hover\r\n    //\"@apply hover:bg-neutral-300 dark:hover:bg-neutral-600\": {},\r\n\r\n    border: '0.1rem solid transparent',\r\n\r\n    'input[type=checkbox]:checked + &, input[type=checkbox][aria-checked=mixed] + &': {\r\n      backgroundColor: 'currentColor',\r\n      '.form-switch-box-sm': {\r\n        transform: 'translateX(1.42rem)',\r\n      },\r\n      '.form-switch-box-md': {\r\n        transform: 'translateX(1.6rem)',\r\n      },\r\n      '.form-switch-box-lg': {\r\n        transform: 'translateX(1.78rem)',\r\n      },\r\n    },\r\n\r\n    'input[type=checkbox]:focus-visible + &': {\r\n      '@apply z-base !important': {},\r\n      '@apply border-primary !important': {},\r\n      '@apply ring-4 ring-black !important': {},\r\n    },\r\n\r\n    'input[type=checkbox]:checked:focus-visible + &, input[type=checkbox][aria-checked=mixed]:focus-visible + &': {\r\n      '@apply ring-black !important': {},\r\n    },\r\n    '.dark input[type=checkbox]:checked:focus-visible + &,.dark input[type=checkbox][aria-checked=mixed]:focus-visible + &':\r\n      {\r\n        '@apply ring-black !important': {},\r\n      },\r\n    'input[type=checkbox]:checked:hover:not(:disabled) + &, input[type=checkbox][aria-checked=mixed]:hover:not(:disabled) + &':\r\n      {\r\n        '@apply cursor-base': {},\r\n      },\r\n\r\n    // colors\r\n    ...colors.reduce(\r\n      (styles, color) => ({\r\n        ...styles,\r\n        [`&[data-color=\"${color}\"]`]: {\r\n          [`@apply text-${color}`]: {},\r\n\r\n          // 'input[type=checkbox]:focus + &': {\r\n          //   borderColor: `${theme(`colors.${color}.DEFAULT`)}`,\r\n          //   boxShadow: `0 0 5px ${theme(`colors.${color}.DEFAULT`)}`,\r\n          //   borderWidth: '0.1rem',\r\n          // },\r\n        },\r\n      }),\r\n      {}\r\n    ),\r\n\r\n    // disabled\r\n    '&-disabled': {\r\n      '@apply cursor-not-allowed': {},\r\n\r\n      '&': {\r\n        backgroundColor: '#ECECEC',\r\n      },\r\n    },\r\n\r\n    'input[type=checkbox]:not(:checked) + &-disabled .form-switch-box': {\r\n      '@apply bg-gray-stroke': {},\r\n    },\r\n\r\n    // sizing\r\n    '&-sm': {\r\n      height: '2.16rem',\r\n      width: '3.6rem',\r\n    },\r\n\r\n    '&-md': {\r\n      height: '2.4rem',\r\n      width: '4rem',\r\n    },\r\n\r\n    '&-lg': {\r\n      height: '2.64rem',\r\n      width: '4.4rem',\r\n    },\r\n  },\r\n\r\n  // Knob\r\n  '.form-switch-box': {\r\n    '@apply transition-transform ease-in-out duration-150 transform bg-white rounded-full shadow translate-x-0': {},\r\n\r\n    // sizing\r\n    '&-sm': {\r\n      height: '1.6rem',\r\n      width: '1.7rem',\r\n    },\r\n\r\n    '&-md': {\r\n      height: '2rem',\r\n      width: '2rem',\r\n    },\r\n\r\n    '&-lg': {\r\n      height: '2.2rem',\r\n      width: '2.2rem',\r\n    },\r\n  },\r\n});\r\n"],"mappings":";AAAAA,MAAM,CAACC,OAAO,GAAGC,MAAM,GAAG,SAAAA,OAACC,MAAM;EAAA,OAAM;IACrC,oBAAoB,EAAE;MACpB,kCAAkC,EAAE,CAAC,CAAC;MAEtC,kBAAkB,EAAE;QAClB,eAAe,EAAE,CAAC,CAAC;QAEnB,cAAc,EAAE;UACd,eAAe,EAAE,CAAC;QACpB;MACF;IACF,CAAC;IACD,cAAc,EAAAC,QAAA;MACZ,0DAA0D,EAAE,CAAC,CAAC;MAC9D,2CAA2C,EAAE,CAAC,CAAC;MAC/C;MACA;;MAEAC,MAAM,EAAE,0BAA0B;MAElC,gFAAgF,EAAE;QAChFC,eAAe,EAAE,cAAc;QAC/B,qBAAqB,EAAE;UACrBC,SAAS,EAAE;QACb,CAAC;QACD,qBAAqB,EAAE;UACrBA,SAAS,EAAE;QACb,CAAC;QACD,qBAAqB,EAAE;UACrBA,SAAS,EAAE;QACb;MACF,CAAC;MAED,wCAAwC,EAAE;QACxC,0BAA0B,EAAE,CAAC,CAAC;QAC9B,kCAAkC,EAAE,CAAC,CAAC;QACtC,qCAAqC,EAAE,CAAC;MAC1C,CAAC;MAED,4GAA4G,EAAE;QAC5G,8BAA8B,EAAE,CAAC;MACnC,CAAC;MACD,uHAAuH,EACrH;QACE,8BAA8B,EAAE,CAAC;MACnC,CAAC;MACH,0HAA0H,EACxH;QACE,oBAAoB,EAAE,CAAC;MACzB;IAAC,GAGAJ,MAAM,CAACK,MAAM,CACd,UAACC,MAAM,EAAEC,KAAK;MAAA,IAAAC,IAAA,EAAAC,SAAA;MAAA,OAAAR,QAAA,KACTK,MAAM,GAAAG,SAAA,OAAAA,SAAA,qBACSF,KAAK,aAAAC,IAAA,OAAAA,IAAA,kBACLD,KAAK,IAAK,CAAC,CAAC,EAAAC,IAAA,GAAAC,SAAA;IAAA,CAQ9B,EACF,CAAC,CACH,CAAC;MAED;MACA,YAAY,EAAE;QACZ,2BAA2B,EAAE,CAAC,CAAC;QAE/B,GAAG,EAAE;UACHN,eAAe,EAAE;QACnB;MACF,CAAC;MAED,kEAAkE,EAAE;QAClE,uBAAuB,EAAE,CAAC;MAC5B,CAAC;MAED;MACA,MAAM,EAAE;QACNO,MAAM,EAAE,SAAS;QACjBC,KAAK,EAAE;MACT,CAAC;MAED,MAAM,EAAE;QACND,MAAM,EAAE,QAAQ;QAChBC,KAAK,EAAE;MACT,CAAC;MAED,MAAM,EAAE;QACND,MAAM,EAAE,SAAS;QACjBC,KAAK,EAAE;MACT;IAAC,EACF;IAED;IACA,kBAAkB,EAAE;MAClB,2GAA2G,EAAE,CAAC,CAAC;MAE/G;MACA,MAAM,EAAE;QACND,MAAM,EAAE,QAAQ;QAChBC,KAAK,EAAE;MACT,CAAC;MAED,MAAM,EAAE;QACND,MAAM,EAAE,MAAM;QACdC,KAAK,EAAE;MACT,CAAC;MAED,MAAM,EAAE;QACND,MAAM,EAAE,QAAQ;QAChBC,KAAK,EAAE;MACT;IACF;EACF,CAAC;AAAA,CAAC"}
+{"version":3,"file":"switch.js","names":["module","exports","Switch","_inputTypeCheckbox","_skFormSwitch","transform","width"],"sources":["../../../src/components/switch.js"],"sourcesContent":["module.exports = Switch = () => ({\r\n  '.sk-form-switch-label': {\r\n    '@apply inline-flex align-middle items-center': {},\r\n    '@apply flex-row gap-12': {},\r\n    '@apply font-normal text-base': {},\r\n\r\n    \"&[type='hidden']\": {\r\n      '@apply hidden': {},\r\n\r\n      '.sk-form-switch': {\r\n        '@apply hidden': {},\r\n      },\r\n    },\r\n  },\r\n  '.sk-form-switch': {\r\n    '@apply rounded-full cursor-pointer focus:outline-none': {},\r\n    '@apply bg-primitives-overlay-darken-3 dark:bg-primitives-overlay-lighten-3': {},\r\n\r\n    // Hover\r\n    '@apply hover:bg-primitives-overlay-darken-5 hover:dark:bg-primitives-overlay-lighten-4': {},\r\n\r\n    // Focus\r\n    'input[type=checkbox]:focus-visible + &': {\r\n      '@apply ring ring-blue-500': {},\r\n    },\r\n\r\n    // Checked\r\n    'input[type=checkbox]:checked + &': {\r\n      [`&[data-color=\"gronsta\"]`]: {\r\n        '.sk-form-switch-box': {\r\n          '@apply bg-gronsta-surface-primary': {},\r\n        },\r\n      },\r\n\r\n      '.sk-form-switch-icon': {\r\n        '@apply flex': {},\r\n      },\r\n\r\n      '.sk-form-switch-box': {\r\n        transform: 'translateX(2.4rem)',\r\n      },\r\n\r\n      '@apply bg-primitives-overlay-darken-4 dark:bg-primitives-overlay-lighten-5': {},\r\n\r\n      // Disabled\r\n      [`&[data-disabled=\"true\"]`]: {\r\n        '.sk-form-switch-box': {\r\n          '@apply bg-transparent': {},\r\n\r\n          '.sk-form-switch-icon': {\r\n            '@apply bg-primitives-overlay-darken-6 dark:bg-primitives-overlay-lighten-6': {},\r\n            '@apply text-light-primary': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n\r\n    // Disabled not checked\r\n    [`&[data-disabled=\"true\"]`]: {\r\n      '@apply cursor-default': {},\r\n      '@apply bg-primitives-overlay-darken-2 dark:bg-primitives-overlay-lighten-2': {},\r\n\r\n      '.sk-form-switch-box': {\r\n        '@apply bg-primitives-overlay-darken-6 dark:bg-primitives-overlay-lighten-6': {},\r\n      },\r\n    },\r\n\r\n    width: '5.6rem',\r\n  },\r\n\r\n  // Knob\r\n  '.sk-form-switch-box': {\r\n    '@apply transition-transform ease-in-out duration-150 transform rounded-full shadow translate-x-0 m-6': {},\r\n    '@apply bg-primitives-overlay-darken-7 dark:bg-primitives-overlay-lighten-7': {},\r\n    '@apply h-20 w-20': {},\r\n    '@apply flex justify-center items-center object-center': {},\r\n\r\n    '.sk-form-switch-icon': {\r\n      '@apply bg-transparent': {},\r\n      '@apply hidden': {},\r\n      '@apply w-20 h-20': {},\r\n      '@apply text-light-primary': {},\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,MAAM,GAAG,SAAAA,OAAA;EAAA,IAAAC,kBAAA,EAAAC,aAAA;EAAA,OAAO;IAC/B,uBAAuB,EAAE;MACvB,8CAA8C,EAAE,CAAC,CAAC;MAClD,wBAAwB,EAAE,CAAC,CAAC;MAC5B,8BAA8B,EAAE,CAAC,CAAC;MAElC,kBAAkB,EAAE;QAClB,eAAe,EAAE,CAAC,CAAC;QAEnB,iBAAiB,EAAE;UACjB,eAAe,EAAE,CAAC;QACpB;MACF;IACF,CAAC;IACD,iBAAiB,GAAAA,aAAA;MACf,uDAAuD,EAAE,CAAC,CAAC;MAC3D,4EAA4E,EAAE,CAAC,CAAC;MAEhF;MACA,wFAAwF,EAAE,CAAC,CAAC;MAE5F;MACA,wCAAwC,EAAE;QACxC,2BAA2B,EAAE,CAAC;MAChC,CAAC;MAED;MACA,kCAAkC,GAAAD,kBAAA,OAAAA,kBAAA,gCACH;QAC3B,qBAAqB,EAAE;UACrB,mCAAmC,EAAE,CAAC;QACxC;MACF,CAAC,EAAAA,kBAAA,CAED,sBAAsB,IAAE;QACtB,aAAa,EAAE,CAAC;MAClB,CAAC,EAAAA,kBAAA,CAED,qBAAqB,IAAE;QACrBE,SAAS,EAAE;MACb,CAAC,EAAAF,kBAAA,CAED,4EAA4E,IAAE,CAAC,CAAC,EAAAA,kBAAA,gCAGnD;QAC3B,qBAAqB,EAAE;UACrB,uBAAuB,EAAE,CAAC,CAAC;UAE3B,sBAAsB,EAAE;YACtB,4EAA4E,EAAE,CAAC,CAAC;YAChF,2BAA2B,EAAE,CAAC;UAChC;QACF;MACF,CAAC,EAAAA,kBAAA;IACF,GAAAC,aAAA,gCAG4B;MAC3B,uBAAuB,EAAE,CAAC,CAAC;MAC3B,4EAA4E,EAAE,CAAC,CAAC;MAEhF,qBAAqB,EAAE;QACrB,4EAA4E,EAAE,CAAC;MACjF;IACF,CAAC,EAAAA,aAAA,CAEDE,KAAK,GAAE,QAAQ,EAAAF,aAAA,CAChB;IAED;IACA,qBAAqB,EAAE;MACrB,sGAAsG,EAAE,CAAC,CAAC;MAC1G,4EAA4E,EAAE,CAAC,CAAC;MAChF,kBAAkB,EAAE,CAAC,CAAC;MACtB,uDAAuD,EAAE,CAAC,CAAC;MAE3D,sBAAsB,EAAE;QACtB,uBAAuB,EAAE,CAAC,CAAC;QAC3B,eAAe,EAAE,CAAC,CAAC;QACnB,kBAAkB,EAAE,CAAC,CAAC;QACtB,2BAA2B,EAAE,CAAC;MAChC;IACF;EACF,CAAC;AAAA,CAAC"}