@sk-web-gui/core 0.1.92 → 1.0.0

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

@@ -0,0 +1,21 @@
+module.exports = SearchField = () => ({
+  '.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/esm/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,GAAGA,CAAA,MAAO;EACpC,kBAAkB,EAAE;IAClB,MAAM,EAAE;MACN,uBAAuB,EAAE;QACvB,0BAA0B,EAAE,CAAC,CAAC;QAC9BC,GAAG,EAAE;UACH,0BAA0B,EAAE,CAAC;QAC/B;MACF;IACF,CAAC;IACD,MAAM,EAAE;MACN,uBAAuB,EAAE;QACvB,8BAA8B,EAAE,CAAC,CAAC;QAClCA,GAAG,EAAE;UACH,8BAA8B,EAAE,CAAC;QACnC;MACF;IACF;EACF;AACF,CAAC,CAAC"}

package/dist/esm/components/select.js

@@ -0,0 +1,188 @@
+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 = () => ({
+  '.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/esm/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/esm/components/side-menu.js

@@ -83,7 +83,7 @@ module.exports = 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: "''"
           }
         },
@@ -107,7 +107,7 @@ module.exports = 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)",
@@ -120,7 +120,7 @@ module.exports = 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'
@@ -133,14 +133,14 @@ module.exports = 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': {
@@ -153,7 +153,7 @@ module.exports = 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/esm/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/esm/components/snackbar.js

@@ -0,0 +1,31 @@
+module.exports = 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': {},
+    '&-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/esm/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,GAAGA,CAAA,MAAO;EACjC,cAAc,EAAE;IACd,0FAA0F,EAAE,CAAC,CAAC;IAC9F,qDAAqD,EAAE,CAAC,CAAC;IAEzD,QAAQ,EAAE;MACR,kBAAkB,EAAE,CAAC;IACvB,CAAC;IAED,UAAU,EAAE;MACV,2BAA2B,EAAE,CAAC;IAChC,CAAC;IAED,WAAW,EAAE;MACX,gDAAgD,EAAE,CAAC;IACrD,CAAC;IAED,WAAW,EAAE;MACX,6CAA6C,EAAE,CAAC;IAClD,CAAC;IACD,QAAQ,EAAE;MACR,+DAA+D,EAAE,CAAC;IACpE,CAAC;IACD,WAAW,EAAE;MACX,+DAA+D,EAAE,CAAC;IACpE,CAAC;IACD,WAAW,EAAE;MACX,+DAA+D,EAAE,CAAC;IACpE,CAAC;IACD,SAAS,EAAE;MACT,2DAA2D,EAAE,CAAC;IAChE;EACF;AACF,CAAC,CAAC"}

package/dist/esm/components/spinner.js

@@ -0,0 +1,18 @@
+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 = colors => ({
+  '.sk-spinner': _extends({
+    '@apply box-border': {},
+    '@apply flex justify-center items-center object-center': {},
+    '@apply overflow-hidden': {},
+    path: {
+      '@apply stroke-dark-secondary': {}
+    }
+  }, colors.reduce((styles, color) => _extends({}, styles, {
+    ["&[data-color=\"" + color + "\"]"]: {
+      path: {
+        ["@apply stroke-" + color + "-surface-primary"]: {}
+      }
+    }
+  }), {}))
+});
+//# sourceMappingURL=spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":["module","exports","SearchBar","colors","_extends","path","reduce","styles","color"],"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,GAAIC,MAAM,KAAM;EACxC,aAAa,EAAAC,QAAA;IACX,mBAAmB,EAAE,CAAC,CAAC;IACvB,uDAAuD,EAAE,CAAC,CAAC;IAC3D,wBAAwB,EAAE,CAAC,CAAC;IAE5BC,IAAI,EAAE;MACJ,8BAA8B,EAAE,CAAC;IACnC;EAAC,GAEEF,MAAM,CAACG,MAAM,CACd,CAACC,MAAM,EAAEC,KAAK,KAAAJ,QAAA,KACTG,MAAM;IACT,qBAAkBC,KAAK,WAAO;MAC5BH,IAAI,EAAE;QACJ,oBAAkBG,KAAK,wBAAqB,CAAC;MAC/C;IACF;EAAC,EACD,EACF,CAAC,CACH,CAAC;AAEL,CAAC,CAAC"}

package/dist/esm/components/switch.js

@@ -1,97 +1,70 @@
-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 = colors => ({
-  '.form-switch-label': {
-    '@apply inline-block align-middle': {},
+module.exports = Switch = () => ({
+  '.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': {
+    '@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)'
+    '@apply hover:bg-primitives-overlay-darken-5 hover:dark:bg-primitives-overlay-lighten-4': {},
+    // Focus
+    'input[type=checkbox]:focus-visible + &': {
+      '@apply ring ring-blue-500': {}
+    },
+    // Checked
+    'input[type=checkbox]:checked + &': {
+      ["&[data-color=\"gronsta\"]"]: {
+        '.sk-form-switch-box': {
+          '@apply bg-gronsta-surface-primary': {}
+        }
+      },
+      '.sk-form-switch-icon': {
+        '@apply flex': {}
       },
-      '.form-switch-box-md': {
-        transform: 'translateX(1.6rem)'
+      '.sk-form-switch-box': {
+        transform: 'translateX(2.4rem)'
       },
-      '.form-switch-box-lg': {
-        transform: 'translateX(1.78rem)'
+      '@apply bg-primitives-overlay-darken-4 dark:bg-primitives-overlay-lighten-5': {},
+      // Disabled
+      ["&[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': {}
+          }
+        }
       }
     },
-    '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': {}
-    },
-    'input[type=checkbox]:checked:hover:not(:disabled) + &, input[type=checkbox][aria-checked=mixed]:hover:not(:disabled) + &': {
-      '@apply cursor-base': {}
-    }
-  }, colors.reduce((styles, color) => _extends({}, styles, {
-    ["&[data-color=\"" + color + "\"]"]: {
-      ["@apply text-" + color]: {}
-
-      // 'input[type=checkbox]:focus + &': {
-      //   borderColor: `${theme(`colors.${color}.DEFAULT`)}`,
-      //   boxShadow: `0 0 5px ${theme(`colors.${color}.DEFAULT`)}`,
-      //   borderWidth: '0.1rem',
-      // },
-    }
-  }), {}), {
-    // disabled
-    '&-disabled': {
-      '@apply cursor-not-allowed': {},
-      '&': {
-        backgroundColor: '#ECECEC'
+    // Disabled not checked
+    ["&[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': {}
       }
     },
-    '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'
-    }
-  }),
+    width: '5.6rem'
+  },
   // 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/esm/components/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":["module","exports","Switch","colors","_extends","border","backgroundColor","transform","reduce","styles","color","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,GAAIC,MAAM,KAAM;EACrC,oBAAoB,EAAE;IACpB,kCAAkC,EAAE,CAAC,CAAC;IAEtC,kBAAkB,EAAE;MAClB,eAAe,EAAE,CAAC,CAAC;MAEnB,cAAc,EAAE;QACd,eAAe,EAAE,CAAC;MACpB;IACF;EACF,CAAC;EACD,cAAc,EAAAC,QAAA;IACZ,0DAA0D,EAAE,CAAC,CAAC;IAC9D,2CAA2C,EAAE,CAAC,CAAC;IAC/C;IACA;;IAEAC,MAAM,EAAE,0BAA0B;IAElC,gFAAgF,EAAE;MAChFC,eAAe,EAAE,cAAc;MAC/B,qBAAqB,EAAE;QACrBC,SAAS,EAAE;MACb,CAAC;MACD,qBAAqB,EAAE;QACrBA,SAAS,EAAE;MACb,CAAC;MACD,qBAAqB,EAAE;QACrBA,SAAS,EAAE;MACb;IACF,CAAC;IAED,wCAAwC,EAAE;MACxC,0BAA0B,EAAE,CAAC,CAAC;MAC9B,kCAAkC,EAAE,CAAC,CAAC;MACtC,qCAAqC,EAAE,CAAC;IAC1C,CAAC;IAED,4GAA4G,EAAE;MAC5G,8BAA8B,EAAE,CAAC;IACnC,CAAC;IACD,uHAAuH,EACrH;MACE,8BAA8B,EAAE,CAAC;IACnC,CAAC;IACH,0HAA0H,EACxH;MACE,oBAAoB,EAAE,CAAC;IACzB;EAAC,GAGAJ,MAAM,CAACK,MAAM,CACd,CAACC,MAAM,EAAEC,KAAK,KAAAN,QAAA,KACTK,MAAM;IACT,qBAAkBC,KAAK,WAAO;MAC5B,kBAAgBA,KAAK,GAAK,CAAC;;MAE3B;MACA;MACA;MACA;MACA;IACF;EAAC,EACD,EACF,CAAC,CACH,CAAC;IAED;IACA,YAAY,EAAE;MACZ,2BAA2B,EAAE,CAAC,CAAC;MAE/B,GAAG,EAAE;QACHJ,eAAe,EAAE;MACnB;IACF,CAAC;IAED,kEAAkE,EAAE;MAClE,uBAAuB,EAAE,CAAC;IAC5B,CAAC;IAED;IACA,MAAM,EAAE;MACNK,MAAM,EAAE,SAAS;MACjBC,KAAK,EAAE;IACT,CAAC;IAED,MAAM,EAAE;MACND,MAAM,EAAE,QAAQ;MAChBC,KAAK,EAAE;IACT,CAAC;IAED,MAAM,EAAE;MACND,MAAM,EAAE,SAAS;MACjBC,KAAK,EAAE;IACT;EAAC,EACF;EAED;EACA,kBAAkB,EAAE;IAClB,2GAA2G,EAAE,CAAC,CAAC;IAE/G;IACA,MAAM,EAAE;MACND,MAAM,EAAE,QAAQ;MAChBC,KAAK,EAAE;IACT,CAAC;IAED,MAAM,EAAE;MACND,MAAM,EAAE,MAAM;MACdC,KAAK,EAAE;IACT,CAAC;IAED,MAAM,EAAE;MACND,MAAM,EAAE,QAAQ;MAChBC,KAAK,EAAE;IACT;EACF;AACF,CAAC,CAAC"}
+{"version":3,"file":"switch.js","names":["module","exports","Switch","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,GAAGA,CAAA,MAAO;EAC/B,uBAAuB,EAAE;IACvB,8CAA8C,EAAE,CAAC,CAAC;IAClD,wBAAwB,EAAE,CAAC,CAAC;IAC5B,8BAA8B,EAAE,CAAC,CAAC;IAElC,kBAAkB,EAAE;MAClB,eAAe,EAAE,CAAC,CAAC;MAEnB,iBAAiB,EAAE;QACjB,eAAe,EAAE,CAAC;MACpB;IACF;EACF,CAAC;EACD,iBAAiB,EAAE;IACjB,uDAAuD,EAAE,CAAC,CAAC;IAC3D,4EAA4E,EAAE,CAAC,CAAC;IAEhF;IACA,wFAAwF,EAAE,CAAC,CAAC;IAE5F;IACA,wCAAwC,EAAE;MACxC,2BAA2B,EAAE,CAAC;IAChC,CAAC;IAED;IACA,kCAAkC,EAAE;MAClC,+BAA6B;QAC3B,qBAAqB,EAAE;UACrB,mCAAmC,EAAE,CAAC;QACxC;MACF,CAAC;MAED,sBAAsB,EAAE;QACtB,aAAa,EAAE,CAAC;MAClB,CAAC;MAED,qBAAqB,EAAE;QACrBC,SAAS,EAAE;MACb,CAAC;MAED,4EAA4E,EAAE,CAAC,CAAC;MAEhF;MACA,+BAA6B;QAC3B,qBAAqB,EAAE;UACrB,uBAAuB,EAAE,CAAC,CAAC;UAE3B,sBAAsB,EAAE;YACtB,4EAA4E,EAAE,CAAC,CAAC;YAChF,2BAA2B,EAAE,CAAC;UAChC;QACF;MACF;IACF,CAAC;IAED;IACA,+BAA6B;MAC3B,uBAAuB,EAAE,CAAC,CAAC;MAC3B,4EAA4E,EAAE,CAAC,CAAC;MAEhF,qBAAqB,EAAE;QACrB,4EAA4E,EAAE,CAAC;MACjF;IACF,CAAC;IAEDC,KAAK,EAAE;EACT,CAAC;EAED;EACA,qBAAqB,EAAE;IACrB,sGAAsG,EAAE,CAAC,CAAC;IAC1G,4EAA4E,EAAE,CAAC,CAAC;IAChF,kBAAkB,EAAE,CAAC,CAAC;IACtB,uDAAuD,EAAE,CAAC,CAAC;IAE3D,sBAAsB,EAAE;MACtB,uBAAuB,EAAE,CAAC,CAAC;MAC3B,eAAe,EAAE,CAAC,CAAC;MACnB,kBAAkB,EAAE,CAAC,CAAC;MACtB,2BAA2B,EAAE,CAAC;IAChC;EACF;AACF,CAAC,CAAC"}