@sk-web-gui/core 0.1.93 → 1.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","names":["module","exports","Pagination","width","height","fontSize"],"sources":["../../../src/components/pagination.js"],"sourcesContent":["module.exports = Pagination = () => ({\r\n  '.sk-pagination': {\r\n    '@apply select-none': {},\r\n\r\n    '&-sm': {\r\n      '@apply text-xs': {},\r\n    },\r\n\r\n    '&-md': {\r\n      '@apply text-lg': {},\r\n    },\r\n\r\n    '&-lg': {\r\n      '@apply text-xl': {},\r\n    },\r\n\r\n    '&-list': {\r\n      '@apply flex items-center': {},\r\n    },\r\n    '.form-select-wrapper': {\r\n      '@apply w-fit': {},\r\n    },\r\n    '&-pageLabel': {\r\n      '@apply cursor-pointer m-sm box-content': {},\r\n      width: '1.5em',\r\n      height: '1.75em',\r\n\r\n      \"&[aria-current='true']\": {\r\n        '@apply border-primary border-b cursor-default text-primary': {},\r\n      },\r\n    },\r\n\r\n    '&-prevNextButton': {\r\n      '@apply text-body ml-4 my-sm inline-flex items-center sm:w-auto inline-flex flex-row leading-none': {},\r\n      height: '1.75em',\r\n\r\n      '&[data-reverse=true]': {\r\n        '@apply mr-4 ml-0 flex-row-reverse': {},\r\n\r\n        '.pagination-prevNextButton-label': {\r\n          '@apply mr-sm ml-0': {},\r\n        },\r\n      },\r\n\r\n      '&[disabled]': {\r\n        '@apply opacity-50 cursor-default': {},\r\n      },\r\n\r\n      \"&[disabled='false']\": {\r\n        '.sk-pagination-prevNextButton-label, .sk-pagination-prevNextButton-icon': {\r\n          '@apply cursor-pointer': {},\r\n        },\r\n      },\r\n\r\n      '&-label': {\r\n        '@apply hidden sm:inline ml-sm leading-none': {},\r\n      },\r\n\r\n      '&-icon': {\r\n        '@apply m-1 leading-none flex items-center': {},\r\n\r\n        '.MuiSvgIcon-root': {\r\n          fontSize: '1em',\r\n        },\r\n      },\r\n    },\r\n\r\n    '&-ellipsis': {\r\n      '@apply inline-block w-16 text-center': {},\r\n    },\r\n    '&.fit-content': {\r\n      '@apply w-full max-w-full': {},\r\n      '.sk-pagination-list': {\r\n        '@apply w-full flex justify-between': {},\r\n        '&-item': {\r\n          '@apply px-0  flex-shrink grow text-center': {},\r\n          '&.ellipsis': {\r\n            '@apply flex-shrink grow-0': {},\r\n          },\r\n          '&.prev-next': {\r\n            '@apply flex-shrink grow-0': {},\r\n          },\r\n          '.sk-pagination-pageLabel': {\r\n            '@apply w-full max-w-[1.5em] mx-xs': {},\r\n          },\r\n        },\r\n      },\r\n      '.form-select-wrapper': {\r\n        '@apply w-full': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,UAAU,GAAGA,CAAA,MAAO;EACnC,gBAAgB,EAAE;IAChB,oBAAoB,EAAE,CAAC,CAAC;IAExB,MAAM,EAAE;MACN,gBAAgB,EAAE,CAAC;IACrB,CAAC;IAED,MAAM,EAAE;MACN,gBAAgB,EAAE,CAAC;IACrB,CAAC;IAED,MAAM,EAAE;MACN,gBAAgB,EAAE,CAAC;IACrB,CAAC;IAED,QAAQ,EAAE;MACR,0BAA0B,EAAE,CAAC;IAC/B,CAAC;IACD,sBAAsB,EAAE;MACtB,cAAc,EAAE,CAAC;IACnB,CAAC;IACD,aAAa,EAAE;MACb,wCAAwC,EAAE,CAAC,CAAC;MAC5CC,KAAK,EAAE,OAAO;MACdC,MAAM,EAAE,QAAQ;MAEhB,wBAAwB,EAAE;QACxB,4DAA4D,EAAE,CAAC;MACjE;IACF,CAAC;IAED,kBAAkB,EAAE;MAClB,kGAAkG,EAAE,CAAC,CAAC;MACtGA,MAAM,EAAE,QAAQ;MAEhB,sBAAsB,EAAE;QACtB,mCAAmC,EAAE,CAAC,CAAC;QAEvC,kCAAkC,EAAE;UAClC,mBAAmB,EAAE,CAAC;QACxB;MACF,CAAC;MAED,aAAa,EAAE;QACb,kCAAkC,EAAE,CAAC;MACvC,CAAC;MAED,qBAAqB,EAAE;QACrB,yEAAyE,EAAE;UACzE,uBAAuB,EAAE,CAAC;QAC5B;MACF,CAAC;MAED,SAAS,EAAE;QACT,4CAA4C,EAAE,CAAC;MACjD,CAAC;MAED,QAAQ,EAAE;QACR,2CAA2C,EAAE,CAAC,CAAC;QAE/C,kBAAkB,EAAE;UAClBC,QAAQ,EAAE;QACZ;MACF;IACF,CAAC;IAED,YAAY,EAAE;MACZ,sCAAsC,EAAE,CAAC;IAC3C,CAAC;IACD,eAAe,EAAE;MACf,0BAA0B,EAAE,CAAC,CAAC;MAC9B,qBAAqB,EAAE;QACrB,oCAAoC,EAAE,CAAC,CAAC;QACxC,QAAQ,EAAE;UACR,2CAA2C,EAAE,CAAC,CAAC;UAC/C,YAAY,EAAE;YACZ,2BAA2B,EAAE,CAAC;UAChC,CAAC;UACD,aAAa,EAAE;YACb,2BAA2B,EAAE,CAAC;UAChC,CAAC;UACD,0BAA0B,EAAE;YAC1B,mCAAmC,EAAE,CAAC;UACxC;QACF;MACF,CAAC;MACD,sBAAsB,EAAE;QACtB,eAAe,EAAE,CAAC;MACpB;IACF;EACF;AACF,CAAC,CAAC"}
+{"version":3,"file":"pagination.js","names":["module","exports","Pagination","li"],"sources":["../../../src/components/pagination.js"],"sourcesContent":["module.exports = Pagination = () => ({\r\n  '.sk-pagination': {\r\n    '@apply select-none': {},\r\n    '@apply text-base': {},\r\n\r\n    '&-list': {\r\n      '@apply flex justify-between items-center': {},\r\n\r\n      '.sk-pagination[data-hideprevnextlabel=\"true\"] &': {\r\n        '@apply w-fit': {},\r\n      },\r\n\r\n      li: {\r\n        '@apply min-w-[4rem] text-center': {},\r\n      },\r\n\r\n      'li:first-child': {\r\n        '@apply text-left': {},\r\n      },\r\n\r\n      'li:last-child': {\r\n        '@apply text-right': {},\r\n      },\r\n    },\r\n    '.form-select-wrapper': {\r\n      '@apply w-fit': {},\r\n    },\r\n    '&-pageLabel': {\r\n      '@apply leading-base cursor-pointer underline text-vattjom-surface-primary': {},\r\n      '@apply focus-visible:ring ring-ring ring-offset': {},\r\n      '@apply rounded-full': {},\r\n      '@apply h-32 w-32': {},\r\n      \"&[aria-current='true']\": {\r\n        '@apply font-bold no-underline text-dark-primary': {},\r\n      },\r\n    },\r\n\r\n    '&-prevNextButton': {\r\n      '@apply text-dark-secondary': {},\r\n\r\n      '&.sk-btn': {\r\n        '@apply bg-transparent text-dark-secondary font-normal': {},\r\n\r\n        '&.sk-btn-disabled:disabled, .sk-btn[aria-disabled=\"true\"]:disabled': {\r\n          '@apply bg-transparent !important': {},\r\n          '@apply text-dark-disabled hover:text-dark-disabled': {},\r\n          '.sk-icon': {\r\n            '@apply text-dark-disabled hover:text-dark-disabled': {},\r\n          },\r\n        },\r\n\r\n        '.sk-icon': {\r\n          '@apply bg-transparent text-dark-secondary': {},\r\n        },\r\n\r\n        '&:hover': {\r\n          '@apply text-white': {},\r\n\r\n          '.sk-icon': {\r\n            '@apply text-white': {},\r\n          },\r\n        },\r\n      },\r\n\r\n      '&[disabled]': {\r\n        '@apply cursor-default': {},\r\n      },\r\n\r\n      \"&[disabled='false']\": {\r\n        '.sk-pagination-prevNextButton-label, .sk-pagination-prevNextButton-icon': {\r\n          '@apply cursor-pointer': {},\r\n        },\r\n      },\r\n\r\n      '&-label': {\r\n        '@apply hidden sm:inline ml-sm leading-none': {},\r\n      },\r\n\r\n      '&-icon': {\r\n        '@apply m-1 leading-none flex items-center': {},\r\n      },\r\n    },\r\n\r\n    '&-ellipsis': {\r\n      '@apply inline-block w-16 text-center': {},\r\n    },\r\n    '&.fit-content': {\r\n      '@apply w-full max-w-full': {},\r\n      '.sk-pagination-list': {\r\n        '@apply w-full flex justify-center': {},\r\n        '@apply gap-24': {},\r\n        '&-item': {\r\n          '@apply px-0 grow-0 text-center': {},\r\n          '&.ellipsis': {\r\n            '@apply flex-shrink grow-0': {},\r\n          },\r\n          '&.prev-next': {\r\n            '@apply flex-shrink grow': {},\r\n            '&.prev': {\r\n              '@apply text-left': {},\r\n            },\r\n            '&.next': {\r\n              '@apply text-right': {},\r\n            },\r\n          },\r\n          '.sk-pagination-pageLabel': {\r\n            '@apply mx-xs': {},\r\n          },\r\n        },\r\n      },\r\n      '.form-select-wrapper': {\r\n        '@apply w-full': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,UAAU,GAAGA,CAAA,MAAO;EACnC,gBAAgB,EAAE;IAChB,oBAAoB,EAAE,CAAC,CAAC;IACxB,kBAAkB,EAAE,CAAC,CAAC;IAEtB,QAAQ,EAAE;MACR,0CAA0C,EAAE,CAAC,CAAC;MAE9C,iDAAiD,EAAE;QACjD,cAAc,EAAE,CAAC;MACnB,CAAC;MAEDC,EAAE,EAAE;QACF,iCAAiC,EAAE,CAAC;MACtC,CAAC;MAED,gBAAgB,EAAE;QAChB,kBAAkB,EAAE,CAAC;MACvB,CAAC;MAED,eAAe,EAAE;QACf,mBAAmB,EAAE,CAAC;MACxB;IACF,CAAC;IACD,sBAAsB,EAAE;MACtB,cAAc,EAAE,CAAC;IACnB,CAAC;IACD,aAAa,EAAE;MACb,2EAA2E,EAAE,CAAC,CAAC;MAC/E,iDAAiD,EAAE,CAAC,CAAC;MACrD,qBAAqB,EAAE,CAAC,CAAC;MACzB,kBAAkB,EAAE,CAAC,CAAC;MACtB,wBAAwB,EAAE;QACxB,iDAAiD,EAAE,CAAC;MACtD;IACF,CAAC;IAED,kBAAkB,EAAE;MAClB,4BAA4B,EAAE,CAAC,CAAC;MAEhC,UAAU,EAAE;QACV,uDAAuD,EAAE,CAAC,CAAC;QAE3D,oEAAoE,EAAE;UACpE,kCAAkC,EAAE,CAAC,CAAC;UACtC,oDAAoD,EAAE,CAAC,CAAC;UACxD,UAAU,EAAE;YACV,oDAAoD,EAAE,CAAC;UACzD;QACF,CAAC;QAED,UAAU,EAAE;UACV,2CAA2C,EAAE,CAAC;QAChD,CAAC;QAED,SAAS,EAAE;UACT,mBAAmB,EAAE,CAAC,CAAC;UAEvB,UAAU,EAAE;YACV,mBAAmB,EAAE,CAAC;UACxB;QACF;MACF,CAAC;MAED,aAAa,EAAE;QACb,uBAAuB,EAAE,CAAC;MAC5B,CAAC;MAED,qBAAqB,EAAE;QACrB,yEAAyE,EAAE;UACzE,uBAAuB,EAAE,CAAC;QAC5B;MACF,CAAC;MAED,SAAS,EAAE;QACT,4CAA4C,EAAE,CAAC;MACjD,CAAC;MAED,QAAQ,EAAE;QACR,2CAA2C,EAAE,CAAC;MAChD;IACF,CAAC;IAED,YAAY,EAAE;MACZ,sCAAsC,EAAE,CAAC;IAC3C,CAAC;IACD,eAAe,EAAE;MACf,0BAA0B,EAAE,CAAC,CAAC;MAC9B,qBAAqB,EAAE;QACrB,mCAAmC,EAAE,CAAC,CAAC;QACvC,eAAe,EAAE,CAAC,CAAC;QACnB,QAAQ,EAAE;UACR,gCAAgC,EAAE,CAAC,CAAC;UACpC,YAAY,EAAE;YACZ,2BAA2B,EAAE,CAAC;UAChC,CAAC;UACD,aAAa,EAAE;YACb,yBAAyB,EAAE,CAAC,CAAC;YAC7B,QAAQ,EAAE;cACR,kBAAkB,EAAE,CAAC;YACvB,CAAC;YACD,QAAQ,EAAE;cACR,mBAAmB,EAAE,CAAC;YACxB;UACF,CAAC;UACD,0BAA0B,EAAE;YAC1B,cAAc,EAAE,CAAC;UACnB;QACF;MACF,CAAC;MACD,sBAAsB,EAAE;QACtB,eAAe,EAAE,CAAC;MACpB;IACF;EACF;AACF,CAAC,CAAC"}

package/dist/esm/components/progress-bar.js

@@ -0,0 +1,25 @@
+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 = ProgressBar = colors => ({
+  '.sk-progress-bar': _extends({
+    '@apply flex h-[.4rem] rounded-circular bg-background-color-mixin-2': {},
+    '&-fill': {
+      '@apply rounded-circular': {}
+    }
+  }, colors.reduce((styles, color) => _extends({}, styles, {
+    ["&[data-color=\"" + color + "\"]"]: {
+      '.sk-progress-bar-fill': {
+        ["@apply bg-" + color + "-surface-primary"]: {}
+      },
+      '&[data-accent="true"]': {
+        ["@apply bg-inverted-" + color + "-surface-primary"]: {}
+      }
+    }
+  }), {}), {
+    "&[data-color='tertiary']": {
+      '.sk-progress-bar-fill': {
+        ["@apply bg-primary-surface"]: {}
+      }
+    }
+  })
+});
+//# sourceMappingURL=progress-bar.js.map

package/dist/esm/components/progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.js","names":["module","exports","ProgressBar","colors","_extends","reduce","styles","color"],"sources":["../../../src/components/progress-bar.js"],"sourcesContent":["module.exports = ProgressBar = (colors) => ({\r\n  '.sk-progress-bar': {\r\n    '@apply flex h-[.4rem] rounded-circular bg-background-color-mixin-2': {},\r\n\r\n    '&-fill': {\r\n      '@apply rounded-circular': {},\r\n    },\r\n\r\n    ...colors.reduce(\r\n      (styles, color) => ({\r\n        ...styles,\r\n        [`&[data-color=\"${color}\"]`]: {\r\n          '.sk-progress-bar-fill': {\r\n            [`@apply bg-${color}-surface-primary`]: {},\r\n          },\r\n\r\n          '&[data-accent=\"true\"]': {\r\n            [`@apply bg-inverted-${color}-surface-primary`]: {},\r\n          },\r\n        },\r\n      }),\r\n      {}\r\n    ),\r\n\r\n    \"&[data-color='tertiary']\": {\r\n      '.sk-progress-bar-fill': {\r\n        [`@apply bg-primary-surface`]: {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":";AAAAA,MAAM,CAACC,OAAO,GAAGC,WAAW,GAAIC,MAAM,KAAM;EAC1C,kBAAkB,EAAAC,QAAA;IAChB,oEAAoE,EAAE,CAAC,CAAC;IAExE,QAAQ,EAAE;MACR,yBAAyB,EAAE,CAAC;IAC9B;EAAC,GAEED,MAAM,CAACE,MAAM,CACd,CAACC,MAAM,EAAEC,KAAK,KAAAH,QAAA,KACTE,MAAM;IACT,qBAAkBC,KAAK,WAAO;MAC5B,uBAAuB,EAAE;QACvB,gBAAcA,KAAK,wBAAqB,CAAC;MAC3C,CAAC;MAED,uBAAuB,EAAE;QACvB,yBAAuBA,KAAK,wBAAqB,CAAC;MACpD;IACF;EAAC,EACD,EACF,CAAC,CACH,CAAC;IAED,0BAA0B,EAAE;MAC1B,uBAAuB,EAAE;QACvB,+BAA+B,CAAC;MAClC;IACF;EAAC;AAEL,CAAC,CAAC"}

package/dist/esm/components/radio.js

@@ -1,86 +1,131 @@
-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 = Radio = colors => ({
-  '.form-radio': _extends({
-    '@apply shadow-sm': {},
-    backgroundColor: 'inherit',
-    '@apply border-neutral-300': {},
-    '&[aria-invalid=true]': {
-      '--tw-border-opacity': '1',
-      borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))'
+module.exports = Radio = () => ({
+  '.sk-form-radio': {
+    backgroundImage: 'none',
+    '@apply relative': {},
+    '@apply box-border': {},
+    '@apply bg-primitives-overlay-lighten-10': {},
+    '@apply dark:bg-primitives-overlay-darken-6': {},
+    '@apply border-1': {},
+    '@apply border-primitives-overlay-darken-6': {},
+    '@apply dark:border-primitives-overlay-lighten-6': {},
+    '@apply m-0': {},
+    '@apply h-24 w-24': {},
+    //Hover
+    '@apply hover:after:content-[""]': {},
+    '@apply hover:border-primitives-overlay-darken-8': {},
+    '@apply hover:dark:border-primitives-overlay-lighten-4': {},
+    '&::after': {
+      '@apply absolute': {},
+      '@apply rounded-full': {},
+      '@apply bg-dark-placeholder': {},
+      '@apply m-[0.5rem]': {},
+      '@apply top-0 left-0 bottom-0 right-0': {}
     },
-    '&[aria-invalid=true]:hover': {
-      '--tw-border-opacity': '1',
-      'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))'
+    //Focus
+    '@apply focus-visible:ring': {},
+    '@apply focus-visible:bg-background-content': {},
+    '@apply focus-visible:border-background-content': {},
+    '@apply focus-visible:hover:border-background-content': {},
+    //Invalid
+    '&[aria-invalid="true"]': {
+      '@apply border-2': {},
+      '@apply border-error-surface-primary': {},
+      '@apply hover:border-2': {},
+      '@apply hover:border-error-surface-primary': {}
     },
-    // dark colors
-    '@apply dark:border-neutral-400': {},
-    '.dark &[aria-invalid=true]': {
-      '--tw-border-opacity': '1',
-      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))'
-    },
-    '.dark &[aria-invalid=true]:hover': {
-      '--tw-border-opacity': '1',
-      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))'
-    },
-    '@media (prefers-color-scheme: dark)': {
-      '&[aria-invalid=true]': {
-        '--tw-border-opacity': '1',
-        borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))'
+    //Checked
+    '&:checked, &[checked="true"]': {
+      '@apply bg-primitives-overlay-lighten-10': {},
+      '@apply dark:bg-primitives-overlay-darken-6': {},
+      '@apply hover:bg-primitives-overlay-lighten-10': {},
+      '@apply hover:dark:bg-primitives-overlay-darken-6': {},
+      '@apply focus:bg-primitives-overlay-lighten-10': {},
+      '@apply focus:dark:bg-primitives-overlay-darken-6': {},
+      '@apply text-primitives-overlay-lighten-10': {},
+      '@apply dark:text-primitives-overlay-darken-6': {},
+      '@apply hover:text-primitives-overlay-lighten-10': {},
+      '@apply hover:dark:text-primitives-overlay-darken-6': {},
+      '@apply focus:text-primitives-overlay-lighten-10': {},
+      '@apply focus:dark:text-primitives-overlay-darken-6': {},
+      '@apply border-primitives-overlay-darken-6': {},
+      '@apply focus:border-primitives-overlay-darken-6': {},
+      '@apply dark:border-primitives-overlay-lighten-6': {},
+      '@apply hover:border-primitives-overlay-darken-8': {},
+      '@apply hover:dark:border-primitives-overlay-lighten-4': {},
+      '@apply focus:outline-0': {},
+      '@apply focus:ring-0 focus:ring-offset-0': {},
+      '@apply focus-visible:ring': {},
+      '@apply focus-visible:border-transparent': {},
+      '@apply after:content-[""]': {},
+      '&[aria-invalid="true"]': {
+        '@apply border-2': {},
+        '@apply border-error-surface-primary': {},
+        '@apply hover:border-2': {},
+        '@apply hover:border-error-surface-primary': {}
       },
-      '&[aria-invalid=true]:hover': {
-        '--tw-border-opacity': '1',
-        'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))'
+      '&::after': {
+        '@apply bg-dark-primary': {}
       }
     },
-    '&:checked': {
-      borderColor: 'transparent'
-    }
-  }, colors.reduce((styles, color) => _extends({}, styles, {
-    ["&[data-color=\"" + color + "\"]"]: {
-      ["@apply text-" + color + "-600"]: {},
-      ["@apply focus-visible:border-" + color + "-600 focus-visible:ring-" + color + "-600"]: {},
-      ["@apply dark:text-" + color + "-500"]: {},
-      ["@apply dark:focus-visible:border-" + color + "-400 dark:focus-visible:ring-" + color + "-400"]: {}
-    }
-  }), {}), {
-    '@apply dark:focus-visible:ring-offset-neutral-900': {},
-    // sizing
-    '&-sm': {
-      '@apply w-3 h-3': {}
-    },
-    '&-md': {
-      '@apply w-4 h-4': {}
+    '&:active': {
+      '@apply ring-0 ring-offset-0': {}
     },
-    '&-lg': {
-      '@apply w-5 h-5': {}
-    },
-    '&-xl': {
-      '@apply w-6 h-6': {}
-    },
-    // disabled
-    '&-disabled': {
-      '@apply disabled:shadow-none disabled:border-neutral-300 disabled:bg-neutral-300 disabled:hover:text-neutral-300': {},
-      '@apply dark:disabled:border-transparent dark:disabled:bg-white/20 dark:disabled:hover:text-white/20': {}
+    //Disabled
+    '&:disabled, &[disabled="true"]': {
+      '@apply border-primitives-overlay-darken-3': {},
+      '@apply dark:border-primitives-overlay-lighten-3': {},
+      '@apply hover:border-primitives-overlay-darken-3': {},
+      '@apply hover:dark:border-primitives-overlay-lighten-3': {},
+      '@apply bg-background-200': {},
+      '@apply hover:bg-background-200': {},
+      '@apply cursor-not-allowed': {},
+      '&:not(:checked):not([checked="true"]):after': {
+        '@apply hidden': {}
+      },
+      '&:checked, &[checked="true"]': {
+        '&::after': {
+          '@apply bg-dark-disabled': {}
+        }
+      }
     },
-    // label
     '&-label': {
-      '@apply ml-2 select-none text-sm': {},
-      '@apply text-body': {},
-      // dark colors
-      '@apply dark:text-neutral-100': {},
+      '@apply inline-flex align-top items-center': {},
+      '@apply font-normal': {},
+      '@apply p-2': {},
       '&-sm': {
-        '@apply text-xs': {}
+        '@apply text-small': {},
+        '@apply h-[2.8rem]': {},
+        '@apply gap-10': {}
       },
       '&-md': {
-        '@apply text-sm': {}
+        '@apply text-base': {},
+        '@apply h-[2.8rem]': {},
+        '@apply gap-10': {}
       },
       '&-lg': {
-        '@apply text-base': {}
+        '@apply text-large': {},
+        '@apply h-[3rem]': {},
+        '@apply gap-12': {}
       },
-      '&-xl': {
-        '@apply text-lg': {}
+      '&[data-disabled="true"]': {
+        '@apply text-dark-disabled': {}
+      }
+    },
+    '&-group': {
+      '@apply flex flex-row': {},
+      '&[data-direction="column"]': {
+        '@apply flex-col': {}
+      },
+      '&-sm': {
+        '@apply gap-12': {}
+      },
+      '&-md': {
+        '@apply gap-16': {}
+      },
+      '&-lg': {
+        '@apply gap-16': {}
       }
     }
-  })
+  }
 });
 //# sourceMappingURL=radio.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":["module","exports","Radio","colors","_extends","backgroundColor","borderColor","reduce","styles","color"],"sources":["../../../src/components/radio.js"],"sourcesContent":["module.exports = Radio = (colors) => ({\r\n  '.form-radio': {\r\n    '@apply shadow-sm': {},\r\n    backgroundColor: 'inherit',\r\n    '@apply border-neutral-300': {},\r\n    '&[aria-invalid=true]': {\r\n      '--tw-border-opacity': '1',\r\n      borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',\r\n    },\r\n    '&[aria-invalid=true]:hover': {\r\n      '--tw-border-opacity': '1',\r\n      'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))',\r\n    },\r\n    // dark colors\r\n    '@apply dark:border-neutral-400': {},\r\n    '.dark &[aria-invalid=true]': {\r\n      '--tw-border-opacity': '1',\r\n      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',\r\n    },\r\n    '.dark &[aria-invalid=true]:hover': {\r\n      '--tw-border-opacity': '1',\r\n      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',\r\n    },\r\n\r\n    '@media (prefers-color-scheme: dark)': {\r\n      '&[aria-invalid=true]': {\r\n        '--tw-border-opacity': '1',\r\n        borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',\r\n      },\r\n      '&[aria-invalid=true]:hover': {\r\n        '--tw-border-opacity': '1',\r\n        'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))',\r\n      },\r\n    },\r\n\r\n    '&:checked': {\r\n      borderColor: 'transparent',\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}-600`]: {},\r\n          [`@apply focus-visible:border-${color}-600 focus-visible:ring-${color}-600`]: {},\r\n          [`@apply dark:text-${color}-500`]: {},\r\n          [`@apply dark:focus-visible:border-${color}-400 dark:focus-visible:ring-${color}-400`]: {},\r\n        },\r\n      }),\r\n      {}\r\n    ),\r\n\r\n    '@apply dark:focus-visible:ring-offset-neutral-900': {},\r\n\r\n    // sizing\r\n    '&-sm': {\r\n      '@apply w-3 h-3': {},\r\n    },\r\n\r\n    '&-md': {\r\n      '@apply w-4 h-4': {},\r\n    },\r\n\r\n    '&-lg': {\r\n      '@apply w-5 h-5': {},\r\n    },\r\n\r\n    '&-xl': {\r\n      '@apply w-6 h-6': {},\r\n    },\r\n\r\n    // disabled\r\n    '&-disabled': {\r\n      '@apply disabled:shadow-none disabled:border-neutral-300 disabled:bg-neutral-300 disabled:hover:text-neutral-300':\r\n        {},\r\n      '@apply dark:disabled:border-transparent dark:disabled:bg-white/20 dark:disabled:hover:text-white/20': {},\r\n    },\r\n\r\n    // label\r\n    '&-label': {\r\n      '@apply ml-2 select-none text-sm': {},\r\n      '@apply text-body': {},\r\n      // dark colors\r\n      '@apply dark:text-neutral-100': {},\r\n\r\n      '&-sm': {\r\n        '@apply text-xs': {},\r\n      },\r\n\r\n      '&-md': {\r\n        '@apply text-sm': {},\r\n      },\r\n\r\n      '&-lg': {\r\n        '@apply text-base': {},\r\n      },\r\n\r\n      '&-xl': {\r\n        '@apply text-lg': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":";AAAAA,MAAM,CAACC,OAAO,GAAGC,KAAK,GAAIC,MAAM,KAAM;EACpC,aAAa,EAAAC,QAAA;IACX,kBAAkB,EAAE,CAAC,CAAC;IACtBC,eAAe,EAAE,SAAS;IAC1B,2BAA2B,EAAE,CAAC,CAAC;IAC/B,sBAAsB,EAAE;MACtB,qBAAqB,EAAE,GAAG;MAC1BC,WAAW,EAAE;IACf,CAAC;IACD,4BAA4B,EAAE;MAC5B,qBAAqB,EAAE,GAAG;MAC1B,cAAc,EAAE;IAClB,CAAC;IACD;IACA,gCAAgC,EAAE,CAAC,CAAC;IACpC,4BAA4B,EAAE;MAC5B,qBAAqB,EAAE,GAAG;MAC1BA,WAAW,EAAE;IACf,CAAC;IACD,kCAAkC,EAAE;MAClC,qBAAqB,EAAE,GAAG;MAC1BA,WAAW,EAAE;IACf,CAAC;IAED,qCAAqC,EAAE;MACrC,sBAAsB,EAAE;QACtB,qBAAqB,EAAE,GAAG;QAC1BA,WAAW,EAAE;MACf,CAAC;MACD,4BAA4B,EAAE;QAC5B,qBAAqB,EAAE,GAAG;QAC1B,cAAc,EAAE;MAClB;IACF,CAAC;IAED,WAAW,EAAE;MACXA,WAAW,EAAE;IACf;EAAC,GAGEH,MAAM,CAACI,MAAM,CACd,CAACC,MAAM,EAAEC,KAAK,KAAAL,QAAA,KACTI,MAAM;IACT,qBAAkBC,KAAK,WAAO;MAC5B,kBAAgBA,KAAK,YAAS,CAAC,CAAC;MAChC,kCAAgCA,KAAK,gCAA2BA,KAAK,YAAS,CAAC,CAAC;MAChF,uBAAqBA,KAAK,YAAS,CAAC,CAAC;MACrC,uCAAqCA,KAAK,qCAAgCA,KAAK,YAAS,CAAC;IAC3F;EAAC,EACD,EACF,CAAC,CACH,CAAC;IAED,mDAAmD,EAAE,CAAC,CAAC;IAEvD;IACA,MAAM,EAAE;MACN,gBAAgB,EAAE,CAAC;IACrB,CAAC;IAED,MAAM,EAAE;MACN,gBAAgB,EAAE,CAAC;IACrB,CAAC;IAED,MAAM,EAAE;MACN,gBAAgB,EAAE,CAAC;IACrB,CAAC;IAED,MAAM,EAAE;MACN,gBAAgB,EAAE,CAAC;IACrB,CAAC;IAED;IACA,YAAY,EAAE;MACZ,iHAAiH,EAC/G,CAAC,CAAC;MACJ,qGAAqG,EAAE,CAAC;IAC1G,CAAC;IAED;IACA,SAAS,EAAE;MACT,iCAAiC,EAAE,CAAC,CAAC;MACrC,kBAAkB,EAAE,CAAC,CAAC;MACtB;MACA,8BAA8B,EAAE,CAAC,CAAC;MAElC,MAAM,EAAE;QACN,gBAAgB,EAAE,CAAC;MACrB,CAAC;MAED,MAAM,EAAE;QACN,gBAAgB,EAAE,CAAC;MACrB,CAAC;MAED,MAAM,EAAE;QACN,kBAAkB,EAAE,CAAC;MACvB,CAAC;MAED,MAAM,EAAE;QACN,gBAAgB,EAAE,CAAC;MACrB;IACF;EAAC;AAEL,CAAC,CAAC"}
+{"version":3,"file":"radio.js","names":["module","exports","Radio","backgroundImage"],"sources":["../../../src/components/radio.js"],"sourcesContent":["module.exports = Radio = () => ({\r\n  '.sk-form-radio': {\r\n    backgroundImage: 'none',\r\n\r\n    '@apply relative': {},\r\n    '@apply box-border': {},\r\n    '@apply bg-primitives-overlay-lighten-10': {},\r\n    '@apply dark:bg-primitives-overlay-darken-6': {},\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 m-0': {},\r\n    '@apply h-24 w-24': {},\r\n\r\n    //Hover\r\n    '@apply hover:after:content-[\"\"]': {},\r\n    '@apply hover:border-primitives-overlay-darken-8': {},\r\n    '@apply hover:dark:border-primitives-overlay-lighten-4': {},\r\n    '&::after': {\r\n      '@apply absolute': {},\r\n      '@apply rounded-full': {},\r\n      '@apply bg-dark-placeholder': {},\r\n      '@apply m-[0.5rem]': {},\r\n      '@apply top-0 left-0 bottom-0 right-0': {},\r\n    },\r\n\r\n    //Focus\r\n    '@apply focus-visible:ring': {},\r\n    '@apply focus-visible:bg-background-content': {},\r\n    '@apply focus-visible:border-background-content': {},\r\n    '@apply focus-visible:hover:border-background-content': {},\r\n\r\n    //Invalid\r\n    '&[aria-invalid=\"true\"]': {\r\n      '@apply border-2': {},\r\n      '@apply border-error-surface-primary': {},\r\n      '@apply hover:border-2': {},\r\n      '@apply hover:border-error-surface-primary': {},\r\n    },\r\n\r\n    //Checked\r\n    '&:checked, &[checked=\"true\"]': {\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 hover:dark:bg-primitives-overlay-darken-6': {},\r\n      '@apply focus:bg-primitives-overlay-lighten-10': {},\r\n      '@apply focus:dark:bg-primitives-overlay-darken-6': {},\r\n      '@apply text-primitives-overlay-lighten-10': {},\r\n      '@apply dark:text-primitives-overlay-darken-6': {},\r\n      '@apply hover:text-primitives-overlay-lighten-10': {},\r\n      '@apply hover:dark:text-primitives-overlay-darken-6': {},\r\n      '@apply focus:text-primitives-overlay-lighten-10': {},\r\n      '@apply focus:dark:text-primitives-overlay-darken-6': {},\r\n      '@apply border-primitives-overlay-darken-6': {},\r\n      '@apply focus: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 hover:dark:border-primitives-overlay-lighten-4': {},\r\n      '@apply focus:outline-0': {},\r\n      '@apply focus:ring-0 focus:ring-offset-0': {},\r\n      '@apply focus-visible:ring': {},\r\n      '@apply focus-visible:border-transparent': {},\r\n      '@apply after:content-[\"\"]': {},\r\n      '&[aria-invalid=\"true\"]': {\r\n        '@apply border-2': {},\r\n        '@apply border-error-surface-primary': {},\r\n        '@apply hover:border-2': {},\r\n        '@apply hover:border-error-surface-primary': {},\r\n      },\r\n      '&::after': {\r\n        '@apply bg-dark-primary': {},\r\n      },\r\n    },\r\n\r\n    '&:active': {\r\n      '@apply ring-0 ring-offset-0': {},\r\n    },\r\n\r\n    //Disabled\r\n    '&:disabled, &[disabled=\"true\"]': {\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 hover:dark:border-primitives-overlay-lighten-3': {},\r\n      '@apply bg-background-200': {},\r\n      '@apply hover:bg-background-200': {},\r\n      '@apply cursor-not-allowed': {},\r\n      '&:not(:checked):not([checked=\"true\"]):after': {\r\n        '@apply hidden': {},\r\n      },\r\n      '&:checked, &[checked=\"true\"]': {\r\n        '&::after': {\r\n          '@apply bg-dark-disabled': {},\r\n        },\r\n      },\r\n    },\r\n\r\n    '&-label': {\r\n      '@apply inline-flex align-top items-center': {},\r\n      '@apply font-normal': {},\r\n      '@apply p-2': {},\r\n      '&-sm': {\r\n        '@apply text-small': {},\r\n        '@apply h-[2.8rem]': {},\r\n        '@apply gap-10': {},\r\n      },\r\n      '&-md': {\r\n        '@apply text-base': {},\r\n        '@apply h-[2.8rem]': {},\r\n        '@apply gap-10': {},\r\n      },\r\n      '&-lg': {\r\n        '@apply text-large': {},\r\n        '@apply h-[3rem]': {},\r\n        '@apply gap-12': {},\r\n      },\r\n      '&[data-disabled=\"true\"]': {\r\n        '@apply text-dark-disabled': {},\r\n      },\r\n    },\r\n    '&-group': {\r\n      '@apply flex flex-row': {},\r\n      '&[data-direction=\"column\"]': {\r\n        '@apply flex-col': {},\r\n      },\r\n      '&-sm': {\r\n        '@apply gap-12': {},\r\n      },\r\n      '&-md': {\r\n        '@apply gap-16': {},\r\n      },\r\n      '&-lg': {\r\n        '@apply gap-16': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":"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"}

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'