@sk-web-gui/core 0.1.93 → 1.0.0

package/dist/cjs/components/card.js

@@ -1,45 +1,165 @@
-module.exports = Card = function Card() {
+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 = Card = function Card(colors) {
+  var _extends3;
   return {
-    '.avatar': {
-      '@apply bg-primary-light text-primary rounded-full p-4': {}
-    },
-    '.card-list': {
-      '@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10': {}
-      //"@apply text-center": {},
-      //"@apply justify-center items-center": {},
-    },
-
-    '.card': {
-      '@apply p-lg rounded shadow-lg bg-white relative': {},
-      '@apply p-0': {},
-      //padding: "2.4rem",
-
+    '.sk-card': _extends({
+      '@apply bg-white relative rounded-b-cards rounded-cards': {},
+      '@apply flex flex-col': {},
+      '@apply no-underline hover:no-underline': {},
+      '@apply h-[100%]': {},
+      '&-wrapper': {
+        '@apply grid': {}
+      },
+      '&-image': {
+        '@apply object-cover grow': {},
+        '@apply rounded-t-cards': {}
+      },
+      '&-body': {
+        '@apply px-24 pb-24 pt-16 rounded-b-cards': {},
+        '@apply shrink': {},
+        '&-wrapper': {
+          '@apply flex': {}
+        },
+        '&-meta': {
+          '@apply flex space-x-12 mt-16': {},
+          span: {
+            '@apply flex space-x-4 items-center': {},
+            time: {
+              '@apply h-[23px] leading-[24px]': {}
+            }
+          },
+          '&.sk-card-image': {
+            backgroundColor: 'green',
+            '@apply h-[278px]': {}
+          }
+        },
+        '&-header': {
+          'h1, h2, h3, h4, h5, h6, h7, a': {
+            '@apply line-clamp-1 text-h3-md text-dark-primary mt-16': {}
+          },
+          span: {
+            '@apply pl-12': {}
+          }
+        },
+        '&-content': {
+          '@apply w-full': {},
+          'p, a': {
+            '@apply line-clamp-3 m-0 pt-8 text-base': {}
+          }
+        },
+        '&-icon': {
+          '@apply hidden': {}
+        }
+      }
+    }, colors.reduce(function (styles, color) {
+      var _h1H2H3H4H, _pA, _dataColorMono, _skCardUseHover, _h1H2H3H4H2, _pA2, _skCardUseHover2, _h1H2H3H4H3, _pA3, _dataInvertedTru, _ref, _extends2;
+      return _extends({}, styles, (_extends2 = {
+        '&[data-color="mono"], &[data-color="tertiary"]': (_dataColorMono = {
+          '@apply border-solid border-1': {},
+          '@apply border-primitives-overlay-darken-5 dark:border-primitives-overlay-lighten-5': {},
+          '@apply bg-primitives-gray-lightest dark:bg-primitives-gray-800': {},
+          '.sk-card-body-meta': {
+            '@apply text-dark-secondary': {}
+          },
+          '.sk-card-body-icon': {
+            '@apply bg-primitives-overlay-darken-9 dark:bg-primitives-overlay-lighten-10': {},
+            '@apply text-primitives-gray-lightest dark:text-primitives-overlay-darken-9': {},
+            '@apply hover:bg-primitives-overlay-darken-10 dark:hover:bg-primitives-gray-lightest': {}
+          }
+        }, _dataColorMono["&[data-inverted=\"true\"]"] = {
+          '@apply bg-primitives-gray-800': {},
+          '.sk-card-body': {
+            // Meta
+            '&-meta': {
+              span: {
+                '@apply text-light-secondary': {}
+              }
+            },
+            // header
+            '&-header': {
+              'h1, h2, h3, h4, h5, h6, h7, a': (_h1H2H3H4H = {}, _h1H2H3H4H["@apply text-light-primary"] = {}, _h1H2H3H4H)
+            },
+            // Content
+            '&-content': {
+              'p, a': (_pA = {}, _pA["@apply text-light-secondary"] = {}, _pA)
+            },
+            '.sk-card-body-icon': {
+              '@apply bg-primitives-overlay-lighten-10 text-primitives-gray-900': {},
+              '@apply hover:bg-primitives-gray-lightest': {}
+            }
+          }
+        }, _dataColorMono),
+        '&[data-color="tertiary"]': {
+          '@apply border-solid border-1': {},
+          '@apply border-primitives-overlay-darken-5 dark:border-primitives-overlay-lighten-5': {},
+          '@apply bg-primitives-gray-50 dark:bg-primitives-gray-700': {}
+        }
+      }, _extends2["&[data-color=\"" + color + "\"]"] = (_ref = {}, _ref["@apply bg-" + color + "-surface-primary-hover"] = {}, _ref['&.sk-card-use-hover-effect'] = (_skCardUseHover = {}, _skCardUseHover["@apply hover:cursor-pointer hover:bg-" + color + "-surface-primary"] = {}, _skCardUseHover), _ref['.sk-card-body'] = {
+        '&-meta': {
+          span: {
+            '@apply text-light-secondary': {}
+          }
+        },
+        // header
+        '&-header': {
+          'h1, h2, h3, h4, h5, h6, h7, a': (_h1H2H3H4H2 = {}, _h1H2H3H4H2["@apply text-light-primary"] = {}, _h1H2H3H4H2)
+        },
+        // Content
+        '&-content': {
+          'p, a': (_pA2 = {}, _pA2["@apply text-light-secondary"] = {}, _pA2)
+        }
+      }, _ref["&[data-inverted=\"true\"]"] = (_dataInvertedTru = {}, _dataInvertedTru["@apply bg-" + color + "-surface-accent-hover"] = {}, _dataInvertedTru['&.sk-card-use-hover-effect'] = (_skCardUseHover2 = {}, _skCardUseHover2["@apply hover:cursor-pointer hover:bg-" + color + "-surface-accent"] = {}, _skCardUseHover2), _dataInvertedTru['.sk-card-body'] = {
+        // Meta
+        '&-meta': {
+          span: {
+            '@apply text-dark-secondary': {}
+          }
+        },
+        // header
+        '&-header': {
+          'h1, h2, h3, h4, h5, h6, h7, a': (_h1H2H3H4H3 = {}, _h1H2H3H4H3["@apply text-dark-primary"] = {}, _h1H2H3H4H3)
+        },
+        // Content
+        '&-content': {
+          'p, a': (_pA3 = {}, _pA3["@apply text-dark-secondary"] = {}, _pA3)
+        }
+      }, _dataInvertedTru), _ref), _extends2));
+    }, {}), (_extends3 = {
       // clickable
-      '&-clickable': {
-        // Hover
-        '@apply hover:shadow-xl hover:cursor-pointer': {}
+      '&.sk-card-use-hover-effect': {
+        //Hide and show of icon
+        '.sk-card-body-icon': {
+          '@apply inline-flex': {},
+          '@apply mt-auto mb-auto mr-24': {}
+        }
       }
-
-      // "@apply bg-neutral-200 border border-neutral-100 text-body": {},
-      // dark
-      //"@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300": {},
-    },
-
-    '.card-outlined': {
-      '@apply border-2 border-gray-stroke': {}
-    },
-    '.card-border-top': {
-      '@apply border-t-4 border-t-primary': {}
-    },
-    '.card-body': {
-      '@apply text-body p-8': {}
-    },
-    '.card-image': {
-      '@apply object-cover': {},
-      width: '100%',
-      height: '250px'
-    },
-    '.card-link': {
+    }, _extends3["&[data-layout=\"horizontal\"]"] = {
+      '@apply flex-row h-[100%]': {},
+      '.sk-card': {
+        '&-image': {
+          '@apply h-[100%] w-[128px]': {},
+          '@apply float-left': {},
+          '@apply rounded-none rounded-l-cards grow-0': {}
+        },
+        '&-body': {
+          '@apply w-[100%]': {},
+          '@apply border-none': {},
+          '&-wrapper': {
+            '@apply w-[100%]': {}
+          },
+          '&-content': {
+            'p, a': {
+              '@apply text-small': {}
+            }
+          },
+          '&-meta': {
+            '@apply hidden': {}
+          }
+        }
+      }
+    }, _extends3)),
+    '.sk-card-link': {
+      '@apply hover:cursor-pointer': {},
       '&::after': {
         content: "''",
         position: 'absolute',
@@ -48,6 +168,47 @@ module.exports = Card = function Card() {
         right: '0',
         bottom: '0'
       }
+    },
+    /**
+     * Meta card
+     */
+    '.sk-meta-card': {
+      '@apply no-underline hover:no-underline': {},
+      '@apply flex bg-vattjom-surface-accent': {},
+      '@apply p-14 rounded-16 w-[454px]': {},
+      '&[data-color="mono"]': {
+        '@apply bg-primitives-overlay-darken-1 dark:bg-primitives-overlay-lighten-1': {}
+      },
+      '&[data-color="vattjom"]': {
+        '@apply bg-vattjom-background-200': {}
+      },
+      '&-text-icon': {
+        '@apply mr-12 rounded-12 p-8': {},
+        '@apply bg-primitives-gray-lightest dark:bg-primitives-gray-800': {},
+        '@apply text-dark': {},
+        svg: {
+          height: 'unset',
+          width: 'unset'
+        }
+      },
+      '&-body': {
+        '&-header': {
+          'h1, h2, h3, h4, h5, h6, h7, a, p': {
+            '@apply mt-6 text-base line-clamp-1': {},
+            '@apply text-dark-primary': {}
+          }
+        },
+        '&-content': {
+          'p, a': {
+            '@apply text-primitives-gray-700 dark:text-primitives-gray-200': {},
+            '@apply text-dark-secondary line-clamp-1': {}
+          }
+        }
+      },
+      '&-external-link-icon': {
+        '@apply ml-auto h-[32px] w-[32px]': {},
+        '@apply p-6 text-dark': {}
+      }
     }
   };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":["module","exports","Card","width","height","content","position","left","top","right","bottom"],"sources":["../../../src/components/card.js"],"sourcesContent":["module.exports = Card = () => ({\r\n  '.avatar': {\r\n    '@apply bg-primary-light text-primary rounded-full p-4': {},\r\n  },\r\n\r\n  '.card-list': {\r\n    '@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10': {},\r\n    //\"@apply text-center\": {},\r\n    //\"@apply justify-center items-center\": {},\r\n  },\r\n\r\n  '.card': {\r\n    '@apply p-lg rounded shadow-lg bg-white relative': {},\r\n    '@apply p-0': {},\r\n    //padding: \"2.4rem\",\r\n\r\n    // clickable\r\n    '&-clickable': {\r\n      // Hover\r\n      '@apply hover:shadow-xl hover:cursor-pointer': {},\r\n    },\r\n\r\n    // \"@apply bg-neutral-200 border border-neutral-100 text-body\": {},\r\n    // dark\r\n    //\"@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300\": {},\r\n  },\r\n  '.card-outlined': {\r\n    '@apply border-2 border-gray-stroke': {},\r\n  },\r\n  '.card-border-top': {\r\n    '@apply border-t-4 border-t-primary': {},\r\n  },\r\n\r\n  '.card-body': {\r\n    '@apply text-body p-8': {},\r\n  },\r\n\r\n  '.card-image': {\r\n    '@apply object-cover': {},\r\n    width: '100%',\r\n    height: '250px',\r\n  },\r\n\r\n  '.card-link': {\r\n    '&::after': {\r\n      content: \"''\",\r\n      position: 'absolute',\r\n      left: '0',\r\n      top: '0',\r\n      right: '0',\r\n      bottom: '0',\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,IAAI,GAAG,SAAAA,KAAA;EAAA,OAAO;IAC7B,SAAS,EAAE;MACT,uDAAuD,EAAE,CAAC;IAC5D,CAAC;IAED,YAAY,EAAE;MACZ,8DAA8D,EAAE,CAAC;MACjE;MACA;IACF,CAAC;;IAED,OAAO,EAAE;MACP,iDAAiD,EAAE,CAAC,CAAC;MACrD,YAAY,EAAE,CAAC,CAAC;MAChB;;MAEA;MACA,aAAa,EAAE;QACb;QACA,6CAA6C,EAAE,CAAC;MAClD;;MAEA;MACA;MACA;IACF,CAAC;;IACD,gBAAgB,EAAE;MAChB,oCAAoC,EAAE,CAAC;IACzC,CAAC;IACD,kBAAkB,EAAE;MAClB,oCAAoC,EAAE,CAAC;IACzC,CAAC;IAED,YAAY,EAAE;MACZ,sBAAsB,EAAE,CAAC;IAC3B,CAAC;IAED,aAAa,EAAE;MACb,qBAAqB,EAAE,CAAC,CAAC;MACzBC,KAAK,EAAE,MAAM;MACbC,MAAM,EAAE;IACV,CAAC;IAED,YAAY,EAAE;MACZ,UAAU,EAAE;QACVC,OAAO,EAAE,IAAI;QACbC,QAAQ,EAAE,UAAU;QACpBC,IAAI,EAAE,GAAG;QACTC,GAAG,EAAE,GAAG;QACRC,KAAK,EAAE,GAAG;QACVC,MAAM,EAAE;MACV;IACF;EACF,CAAC;AAAA,CAAC"}
+{"version":3,"file":"card.js","names":["module","exports","Card","colors","_extends3","_extends","span","time","backgroundColor","reduce","styles","color","_h1H2H3H4H","_pA","_dataColorMono","_skCardUseHover","_h1H2H3H4H2","_pA2","_skCardUseHover2","_h1H2H3H4H3","_pA3","_dataInvertedTru","_ref","_extends2","content","position","left","top","right","bottom","svg","height","width"],"sources":["../../../src/components/card.js"],"sourcesContent":["module.exports = Card = (colors) => ({\r\n  '.sk-card': {\r\n    '@apply bg-white relative rounded-b-cards rounded-cards': {},\r\n    '@apply flex flex-col': {},\r\n    '@apply no-underline hover:no-underline': {},\r\n    '@apply h-[100%]': {},\r\n\r\n    '&-wrapper': {\r\n      '@apply grid': {},\r\n    },\r\n\r\n    '&-image': {\r\n      '@apply object-cover grow': {},\r\n      '@apply rounded-t-cards': {},\r\n    },\r\n\r\n    '&-body': {\r\n      '@apply px-24 pb-24 pt-16 rounded-b-cards': {},\r\n      '@apply shrink': {},\r\n\r\n      '&-wrapper': {\r\n        '@apply flex': {},\r\n      },\r\n\r\n      '&-meta': {\r\n        '@apply flex space-x-12 mt-16': {},\r\n        span: {\r\n          '@apply flex space-x-4 items-center': {},\r\n          time: {\r\n            '@apply h-[23px] leading-[24px]': {},\r\n          },\r\n        },\r\n\r\n        '&.sk-card-image': {\r\n          backgroundColor: 'green',\r\n          '@apply h-[278px]': {},\r\n        },\r\n      },\r\n\r\n      '&-header': {\r\n        'h1, h2, h3, h4, h5, h6, h7, a': {\r\n          '@apply line-clamp-1 text-h3-md text-dark-primary mt-16': {},\r\n        },\r\n        span: {\r\n          '@apply pl-12': {},\r\n        },\r\n      },\r\n\r\n      '&-content': {\r\n        '@apply w-full': {},\r\n        'p, a': {\r\n          '@apply line-clamp-3 m-0 pt-8 text-base': {},\r\n        },\r\n      },\r\n\r\n      '&-icon': {\r\n        '@apply hidden': {},\r\n      },\r\n    },\r\n\r\n    ...colors.reduce(\r\n      (styles, color) => ({\r\n        ...styles,\r\n\r\n        '&[data-color=\"mono\"], &[data-color=\"tertiary\"]': {\r\n          '@apply border-solid border-1': {},\r\n          '@apply border-primitives-overlay-darken-5 dark:border-primitives-overlay-lighten-5': {},\r\n          '@apply bg-primitives-gray-lightest dark:bg-primitives-gray-800': {},\r\n\r\n          '.sk-card-body-meta': {\r\n            '@apply text-dark-secondary': {},\r\n          },\r\n\r\n          '.sk-card-body-icon': {\r\n            '@apply bg-primitives-overlay-darken-9 dark:bg-primitives-overlay-lighten-10': {},\r\n            '@apply text-primitives-gray-lightest dark:text-primitives-overlay-darken-9': {},\r\n            '@apply hover:bg-primitives-overlay-darken-10 dark:hover:bg-primitives-gray-lightest': {},\r\n          },\r\n\r\n          // inverted.\r\n          [`&[data-inverted=\"true\"]`]: {\r\n            '@apply bg-primitives-gray-800': {},\r\n\r\n            '.sk-card-body': {\r\n              // Meta\r\n              '&-meta': {\r\n                span: {\r\n                  '@apply text-light-secondary': {},\r\n                },\r\n              },\r\n\r\n              // header\r\n              '&-header': {\r\n                'h1, h2, h3, h4, h5, h6, h7, a': {\r\n                  [`@apply text-light-primary`]: {},\r\n                },\r\n              },\r\n\r\n              // Content\r\n              '&-content': {\r\n                'p, a': {\r\n                  [`@apply text-light-secondary`]: {},\r\n                },\r\n              },\r\n\r\n              '.sk-card-body-icon': {\r\n                '@apply bg-primitives-overlay-lighten-10 text-primitives-gray-900': {},\r\n                '@apply hover:bg-primitives-gray-lightest': {},\r\n              },\r\n            },\r\n          },\r\n        },\r\n\r\n        '&[data-color=\"tertiary\"]': {\r\n          '@apply border-solid border-1': {},\r\n          '@apply border-primitives-overlay-darken-5 dark:border-primitives-overlay-lighten-5': {},\r\n          '@apply bg-primitives-gray-50 dark:bg-primitives-gray-700': {},\r\n        },\r\n\r\n        [`&[data-color=\"${color}\"]`]: {\r\n          // card\r\n          [`@apply bg-${color}-surface-primary-hover`]: {},\r\n\r\n          // clickable\r\n          '&.sk-card-use-hover-effect': {\r\n            // hover\r\n            [`@apply hover:cursor-pointer hover:bg-${color}-surface-primary`]: {},\r\n          },\r\n\r\n          // Meta\r\n          '.sk-card-body': {\r\n            '&-meta': {\r\n              span: {\r\n                '@apply text-light-secondary': {},\r\n              },\r\n            },\r\n\r\n            // header\r\n            '&-header': {\r\n              'h1, h2, h3, h4, h5, h6, h7, a': {\r\n                [`@apply text-light-primary`]: {},\r\n              },\r\n            },\r\n\r\n            // Content\r\n            '&-content': {\r\n              'p, a': {\r\n                [`@apply text-light-secondary`]: {},\r\n              },\r\n            },\r\n          },\r\n\r\n          // inverted.\r\n          [`&[data-inverted=\"true\"]`]: {\r\n            // card\r\n            [`@apply bg-${color}-surface-accent-hover`]: {},\r\n\r\n            // clickable\r\n            '&.sk-card-use-hover-effect': {\r\n              // hover\r\n              [`@apply hover:cursor-pointer hover:bg-${color}-surface-accent`]: {},\r\n            },\r\n\r\n            '.sk-card-body': {\r\n              // Meta\r\n              '&-meta': {\r\n                span: {\r\n                  '@apply text-dark-secondary': {},\r\n                },\r\n              },\r\n\r\n              // header\r\n              '&-header': {\r\n                'h1, h2, h3, h4, h5, h6, h7, a': {\r\n                  [`@apply text-dark-primary`]: {},\r\n                },\r\n              },\r\n\r\n              // Content\r\n              '&-content': {\r\n                'p, a': {\r\n                  [`@apply text-dark-secondary`]: {},\r\n                },\r\n              },\r\n            },\r\n          },\r\n        },\r\n      }),\r\n      {}\r\n    ),\r\n\r\n    // clickable\r\n    '&.sk-card-use-hover-effect': {\r\n      //Hide and show of icon\r\n      '.sk-card-body-icon': {\r\n        '@apply inline-flex': {},\r\n        '@apply mt-auto mb-auto mr-24': {},\r\n      },\r\n    },\r\n\r\n    [`&[data-layout=\"horizontal\"]`]: {\r\n      '@apply flex-row h-[100%]': {},\r\n\r\n      '.sk-card': {\r\n        '&-image': {\r\n          '@apply h-[100%] w-[128px]': {},\r\n          '@apply float-left': {},\r\n          '@apply rounded-none rounded-l-cards grow-0': {},\r\n        },\r\n\r\n        '&-body': {\r\n          '@apply w-[100%]': {},\r\n          '@apply border-none': {},\r\n\r\n          '&-wrapper': {\r\n            '@apply w-[100%]': {},\r\n          },\r\n\r\n          '&-content': {\r\n            'p, a': {\r\n              '@apply text-small': {},\r\n            },\r\n          },\r\n\r\n          '&-meta': {\r\n            '@apply hidden': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n  },\r\n\r\n  '.sk-card-link': {\r\n    '@apply hover:cursor-pointer': {},\r\n\r\n    '&::after': {\r\n      content: \"''\",\r\n      position: 'absolute',\r\n      left: '0',\r\n      top: '0',\r\n      right: '0',\r\n      bottom: '0',\r\n    },\r\n  },\r\n\r\n  /**\r\n   * Meta card\r\n   */\r\n  '.sk-meta-card': {\r\n    '@apply no-underline hover:no-underline': {},\r\n    '@apply flex bg-vattjom-surface-accent': {},\r\n    '@apply p-14 rounded-16 w-[454px]': {},\r\n\r\n    '&[data-color=\"mono\"]': {\r\n      '@apply bg-primitives-overlay-darken-1 dark:bg-primitives-overlay-lighten-1': {},\r\n    },\r\n\r\n    '&[data-color=\"vattjom\"]': {\r\n      '@apply bg-vattjom-background-200': {},\r\n    },\r\n\r\n    '&-text-icon': {\r\n      '@apply mr-12 rounded-12 p-8': {},\r\n      '@apply bg-primitives-gray-lightest dark:bg-primitives-gray-800': {},\r\n      '@apply text-dark': {},\r\n      svg: {\r\n        height: 'unset',\r\n        width: 'unset',\r\n      },\r\n    },\r\n\r\n    '&-body': {\r\n      '&-header': {\r\n        'h1, h2, h3, h4, h5, h6, h7, a, p': {\r\n          '@apply mt-6 text-base line-clamp-1': {},\r\n          '@apply text-dark-primary': {},\r\n        },\r\n      },\r\n\r\n      '&-content': {\r\n        'p, a': {\r\n          '@apply text-primitives-gray-700 dark:text-primitives-gray-200': {},\r\n          '@apply text-dark-secondary line-clamp-1': {},\r\n        },\r\n      },\r\n    },\r\n\r\n    '&-external-link-icon': {\r\n      '@apply ml-auto h-[32px] w-[32px]': {},\r\n      '@apply p-6 text-dark': {},\r\n    },\r\n  },\r\n});\r\n"],"mappings":"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"}

package/dist/cjs/components/checkbox.js

@@ -1,84 +1,111 @@
-var svgToDataUri = require('mini-svg-data-uri');
-module.exports = Checkbox = function Checkbox(colors) {
-  var _checked, _formCheckbox;
+module.exports = Checkbox = function Checkbox() {
   return {
-    '.form-checkbox': (_formCheckbox = {
-      //"@apply rounded shadow-sm": {},
-      backgroundColor: 'inherit',
-      '@apply border-gray-stroke focus:bg-white': {},
-      '&[aria-invalid=true]': {
-        '--tw-border-opacity': '1',
-        borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))'
+    '.sk-form-checkbox': {
+      '@apply bg-inherit': {},
+      '@apply rounded-utility': {},
+      '@apply bg-transparent border-transparent': {},
+      // sizing
+      '&-sm': {
+        '@apply w-[2.4rem] h-[2.4rem]': {}
       },
-      '&[aria-invalid=true]:hover': {
-        '--tw-border-opacity': '1',
-        'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))'
+      '&-md': {
+        '@apply w-[2.4rem] h-[2.4rem]': {}
       },
-      // dark colors
-      '@apply dark:border-neutral-400': {},
-      '.dark &[aria-invalid=true]': {
-        '--tw-border-opacity': '1',
-        borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))'
+      '&-lg': {
+        '@apply w-[2.4rem] h-[2.4rem]': {}
       },
-      '.dark &[aria-invalid=true]:hover': {
-        '--tw-border-opacity': '1',
-        borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))'
+      '+ .sk-icon': {
+        '@apply absolute inset-0 my-auto bg-transparent': {},
+        '@apply border-[0.1rem] p-2 border-primitives-overlay-darken-6 dark:border-primitives-overlay-lighten-6': {},
+        '@apply bg-primitives-overlay-lighten-10 dark:bg-primitives-overlay-darken-6': {},
+        svg: {
+          '@apply hidden': {}
+        }
       },
-      '@media (prefers-color-scheme: dark)': {
-        '&[aria-invalid=true]': {
-          '--tw-border-opacity': '1',
-          borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))'
+      '&&:checked': {
+        '@apply text-light-primary bg-none': {},
+        '& + .sk-icon': {
+          '@apply text-light-primary bg-dark-primary border-dark-primary': {},
+          svg: {
+            '@apply block': {}
+          }
+        }
+      },
+      '&&:hover:not(&&-disabled,&&:checked,&&[aria-invalid=true]),&&:hover:focus:not(&&-disabled,&&:checked,&&[aria-invalid=true])': {
+        '& + .sk-icon, &:focus + .sk-icon': {
+          '@apply text-primitives-overlay-darken-6 dark:text-primitives-overlay-lighten-5 border-primitives-overlay-darken-8 dark:border-primitives-overlay-lighten-4': {},
+          svg: {
+            '@apply block': {}
+          }
+        }
+      },
+      '&&[aria-invalid=true]': {
+        '& + .sk-icon': {
+          '@apply border-2 border-error-surface-primary': {}
         },
-        '&[aria-invalid=true]:hover': {
-          '--tw-border-opacity': '1',
-          'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))'
+        '&&:checked': {
+          '& + .sk-icon': {
+            '@apply p-2 bg-background-content text-dark-primary': {},
+            svg: {
+              '@apply block': {}
+            }
+          }
         }
       },
-      '&:checked': (_checked = {
-        '@apply text-white bg-white border-primary': {}
-      }, _checked["@apply focus-visible:border-primary focus-visible:ring-primary"] = {}, _checked.backgroundImage = "url(\"" + svgToDataUri("<svg viewBox=\"0 0 16 16\" fill=\"#005595\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\"/></svg>") + "\")", _checked)
-    }, _formCheckbox["&[data-color=\"primary\"]"] = {
-      //[`@apply text-primary`]: {},
-      // dark
-      //[`@apply dark:text-primary`]: {},
-      //[`@apply dark:focus-visible:border-primary-400 dark:focus-visible:ring-primary-400`]: {},
-    }, _formCheckbox['&:checked:hover, &:checked:focus'] = {
-      '@apply bg-white border-primary': {}
-    }, _formCheckbox['@apply dark:focus-visible:ring-offset-neutral-900'] = {}, _formCheckbox['&-sm'] = {
-      width: '1.4rem',
-      height: '1.4rem'
-    }, _formCheckbox['&-md'] = {
-      width: '1.6rem',
-      height: '1.6rem'
-      //"@apply w-4 h-4": {},
-    }, _formCheckbox['&-lg'] = {
-      width: '1.8rem',
-      height: '1.8rem'
-    }, _formCheckbox['&-disabled, &-disabled:checked'] = {
-      '@apply grayscale cursor-not-allowed bg-gray-middle hover:bg-gray-middle': {}
-      //"@apply disabled:bg-gray-stroke": {},
-      //"@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": {},
-    }, _formCheckbox['&-label-left &-label'] = {
-      marginRight: '0.8rem'
-    }, _formCheckbox['&-label-right &-label'] = {
-      marginLeft: '0.8rem'
-    }, _formCheckbox['&-label'] = {
-      '@apply text-body select-none text-sm': {},
-      // marginLeft: '0.8rem',
-      //"@apply text-black": {},
-      // dark colors
-      '@apply dark:text-neutral-100': {},
-      '&-sm': {
-        '@apply text-xs': {}
+      // disabled
+      '&&-disabled,&&-disabled:hover': {
+        '@apply cursor-not-allowed': {},
+        '& + .sk-icon': {
+          '@apply bg-background-200 border-primitives-overlay-darken-3': {}
+        },
+        '&:checked': {
+          '& + .sk-icon': {
+            '@apply bg-dark-disabled text-light-primary border-0': {}
+          }
+        },
+        '& ~ .sk-form-checkbox-label': {
+          '@apply text-dark-disabled': {}
+        }
       },
-      '&-md': {
-        '@apply text-sm': {}
+      // label
+      '&-label-left &-label': {
+        '@apply mr-[.8rem]': {}
       },
-      '&-lg': {
-        '@apply text-base': {}
+      '&-label-right &-label': {
+        '@apply ml-[.8rem]': {}
+      },
+      '&-label-left': {
+        '.sk-icon': {
+          '@apply left-auto right-0': {}
+        }
+      },
+      '&-label-right': {
+        '.sk-icon': {
+          '@apply right-auto left-0': {}
+        }
+      },
+      '&-label': {
+        '@apply font-normal text-body select-none text-small': {},
+        '&-wrapper': {
+          '@apply relative inline-flex align-top items-center cursor-base': {}
+        },
+        '&-sm': {
+          '@apply text-small': {}
+        },
+        '&-md': {
+          '@apply text-base': {}
+        },
+        '&-lg': {
+          '@apply text-large': {}
+        }
+      },
+      '&-group': {
+        '@apply flex flex-col gap-16 my-12': {},
+        '&[data-direction="row"]': {
+          '@apply flex-row': {}
+        }
       }
-    }, _formCheckbox)
+    }
   };
 };
 //# sourceMappingURL=checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["svgToDataUri","require","module","exports","Checkbox","colors","_checked","_formCheckbox","backgroundColor","borderColor","backgroundImage","width","height","marginRight","marginLeft"],"sources":["../../../src/components/checkbox.js"],"sourcesContent":["const svgToDataUri = require('mini-svg-data-uri');\r\n\r\nmodule.exports = Checkbox = (colors) => ({\r\n  '.form-checkbox': {\r\n    //\"@apply rounded shadow-sm\": {},\r\n    backgroundColor: 'inherit',\r\n    '@apply border-gray-stroke focus:bg-white': {},\r\n\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      '@apply text-white bg-white border-primary': {},\r\n      [`@apply focus-visible:border-primary focus-visible:ring-primary`]: {},\r\n\r\n      backgroundImage: `url(\"${svgToDataUri(\r\n        `<svg viewBox=\"0 0 16 16\" fill=\"#005595\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\"/></svg>`\r\n      )}\")`,\r\n      //borderColor: \"transparent\",\r\n    },\r\n\r\n    [`&[data-color=\"primary\"]`]: {\r\n      //[`@apply text-primary`]: {},\r\n      // dark\r\n      //[`@apply dark:text-primary`]: {},\r\n      //[`@apply dark:focus-visible:border-primary-400 dark:focus-visible:ring-primary-400`]: {},\r\n    },\r\n\r\n    // Fix focus stylign\r\n    '&:checked:hover, &:checked:focus': {\r\n      '@apply bg-white border-primary': {},\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          [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},\r\n          backgroundImage: `url(\"${svgToDataUri(\r\n            `<svg viewBox=\"0 0 16 16\" fill=\"${theme(`colors.primary_raw.DEFAULT`)}\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\"/></svg>`\r\n          )}\")`,\r\n          // dark\r\n          [`@apply dark:text-${color}`]: {},\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      width: '1.4rem',\r\n      height: '1.4rem',\r\n    },\r\n\r\n    '&-md': {\r\n      width: '1.6rem',\r\n      height: '1.6rem',\r\n      //\"@apply w-4 h-4\": {},\r\n    },\r\n\r\n    '&-lg': {\r\n      width: '1.8rem',\r\n      height: '1.8rem',\r\n    },\r\n\r\n    // disabled\r\n    '&-disabled, &-disabled:checked': {\r\n      '@apply grayscale cursor-not-allowed bg-gray-middle hover:bg-gray-middle': {},\r\n      //\"@apply disabled:bg-gray-stroke\": {},\r\n      //\"@apply disabled:shadow-none disabled:border-neutral-300 disabled:bg-neutral-300 disabled:hover:text-neutral-300\": {},\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-left &-label': {\r\n      marginRight: '0.8rem',\r\n    },\r\n    '&-label-right &-label': {\r\n      marginLeft: '0.8rem',\r\n    },\r\n\r\n    '&-label': {\r\n      '@apply text-body select-none text-sm': {},\r\n      // marginLeft: '0.8rem',\r\n      //\"@apply text-black\": {},\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  },\r\n});\r\n"],"mappings":"AAAA,IAAMA,YAAY,GAAGC,OAAO,CAAC,mBAAmB,CAAC;AAEjDC,MAAM,CAACC,OAAO,GAAGC,QAAQ,GAAG,SAAAA,SAACC,MAAM;EAAA,IAAAC,QAAA,EAAAC,aAAA;EAAA,OAAM;IACvC,gBAAgB,GAAAA,aAAA;MACd;MACAC,eAAe,EAAE,SAAS;MAC1B,0CAA0C,EAAE,CAAC,CAAC;MAE9C,sBAAsB,EAAE;QACtB,qBAAqB,EAAE,GAAG;QAC1BC,WAAW,EAAE;MACf,CAAC;MACD,4BAA4B,EAAE;QAC5B,qBAAqB,EAAE,GAAG;QAC1B,cAAc,EAAE;MAClB,CAAC;MACD;MACA,gCAAgC,EAAE,CAAC,CAAC;MACpC,4BAA4B,EAAE;QAC5B,qBAAqB,EAAE,GAAG;QAC1BA,WAAW,EAAE;MACf,CAAC;MACD,kCAAkC,EAAE;QAClC,qBAAqB,EAAE,GAAG;QAC1BA,WAAW,EAAE;MACf,CAAC;MAED,qCAAqC,EAAE;QACrC,sBAAsB,EAAE;UACtB,qBAAqB,EAAE,GAAG;UAC1BA,WAAW,EAAE;QACf,CAAC;QACD,4BAA4B,EAAE;UAC5B,qBAAqB,EAAE,GAAG;UAC1B,cAAc,EAAE;QAClB;MACF,CAAC;MAED,WAAW,GAAAH,QAAA;QACT,2CAA2C,EAAE,CAAC;MAAC,GAAAA,QAAA,qEACqB,CAAC,CAAC,EAAAA,QAAA,CAEtEI,eAAe,cAAUV,YAAY,2NAErC,CAAC,UAAAM,QAAA;IAEF,GAAAC,aAAA,gCAE4B;MAC3B;MACA;MACA;MACA;IAAA,CACD,EAAAA,aAAA,CAGD,kCAAkC,IAAE;MAClC,gCAAgC,EAAE,CAAC;IACrC,CAAC,EAAAA,aAAA,CAoBD,mDAAmD,IAAE,CAAC,CAAC,EAAAA,aAAA,CAGvD,MAAM,IAAE;MACNI,KAAK,EAAE,QAAQ;MACfC,MAAM,EAAE;IACV,CAAC,EAAAL,aAAA,CAED,MAAM,IAAE;MACNI,KAAK,EAAE,QAAQ;MACfC,MAAM,EAAE;MACR;IACF,CAAC,EAAAL,aAAA,CAED,MAAM,IAAE;MACNI,KAAK,EAAE,QAAQ;MACfC,MAAM,EAAE;IACV,CAAC,EAAAL,aAAA,CAGD,gCAAgC,IAAE;MAChC,yEAAyE,EAAE,CAAC;MAC5E;MACA;MACA;IACF,CAAC,EAAAA,aAAA,CAGD,sBAAsB,IAAE;MACtBM,WAAW,EAAE;IACf,CAAC,EAAAN,aAAA,CACD,uBAAuB,IAAE;MACvBO,UAAU,EAAE;IACd,CAAC,EAAAP,aAAA,CAED,SAAS,IAAE;MACT,sCAAsC,EAAE,CAAC,CAAC;MAC1C;MACA;MACA;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;IACF,CAAC,EAAAA,aAAA;EAEL,CAAC;AAAA,CAAC"}
+{"version":3,"file":"checkbox.js","names":["module","exports","Checkbox","svg"],"sources":["../../../src/components/checkbox.js"],"sourcesContent":["module.exports = Checkbox = () => ({\r\n  '.sk-form-checkbox': {\r\n    '@apply bg-inherit': {},\r\n    '@apply rounded-utility': {},\r\n    '@apply bg-transparent border-transparent': {},\r\n\r\n    // sizing\r\n    '&-sm': {\r\n      '@apply w-[2.4rem] h-[2.4rem]': {},\r\n    },\r\n\r\n    '&-md': {\r\n      '@apply w-[2.4rem] h-[2.4rem]': {},\r\n    },\r\n\r\n    '&-lg': {\r\n      '@apply w-[2.4rem] h-[2.4rem]': {},\r\n    },\r\n\r\n    '+ .sk-icon': {\r\n      '@apply absolute inset-0 my-auto bg-transparent': {},\r\n      '@apply border-[0.1rem] p-2 border-primitives-overlay-darken-6 dark:border-primitives-overlay-lighten-6': {},\r\n      '@apply bg-primitives-overlay-lighten-10 dark:bg-primitives-overlay-darken-6': {},\r\n\r\n      svg: {\r\n        '@apply hidden': {},\r\n      },\r\n    },\r\n\r\n    '&&:checked': {\r\n      '@apply text-light-primary bg-none': {},\r\n\r\n      '& + .sk-icon': {\r\n        '@apply text-light-primary bg-dark-primary border-dark-primary': {},\r\n\r\n        svg: {\r\n          '@apply block': {},\r\n        },\r\n      },\r\n    },\r\n\r\n    '&&:hover:not(&&-disabled,&&:checked,&&[aria-invalid=true]),&&:hover:focus:not(&&-disabled,&&:checked,&&[aria-invalid=true])':\r\n      {\r\n        '& + .sk-icon, &:focus + .sk-icon': {\r\n          '@apply text-primitives-overlay-darken-6 dark:text-primitives-overlay-lighten-5 border-primitives-overlay-darken-8 dark:border-primitives-overlay-lighten-4':\r\n            {},\r\n\r\n          svg: {\r\n            '@apply block': {},\r\n          },\r\n        },\r\n      },\r\n\r\n    '&&[aria-invalid=true]': {\r\n      '& + .sk-icon': {\r\n        '@apply border-2 border-error-surface-primary': {},\r\n      },\r\n\r\n      '&&:checked': {\r\n        '& + .sk-icon': {\r\n          '@apply p-2 bg-background-content text-dark-primary': {},\r\n\r\n          svg: {\r\n            '@apply block': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n\r\n    // disabled\r\n    '&&-disabled,&&-disabled:hover': {\r\n      '@apply cursor-not-allowed': {},\r\n\r\n      '& + .sk-icon': {\r\n        '@apply bg-background-200 border-primitives-overlay-darken-3': {},\r\n      },\r\n\r\n      '&:checked': {\r\n        '& + .sk-icon': {\r\n          '@apply bg-dark-disabled text-light-primary border-0': {},\r\n        },\r\n      },\r\n\r\n      '& ~ .sk-form-checkbox-label': {\r\n        '@apply text-dark-disabled': {},\r\n      },\r\n    },\r\n\r\n    // label\r\n    '&-label-left &-label': {\r\n      '@apply mr-[.8rem]': {},\r\n    },\r\n    '&-label-right &-label': {\r\n      '@apply ml-[.8rem]': {},\r\n    },\r\n\r\n    '&-label-left': {\r\n      '.sk-icon': {\r\n        '@apply left-auto right-0': {},\r\n      },\r\n    },\r\n\r\n    '&-label-right': {\r\n      '.sk-icon': {\r\n        '@apply right-auto left-0': {},\r\n      },\r\n    },\r\n\r\n    '&-label': {\r\n      '@apply font-normal text-body select-none text-small': {},\r\n\r\n      '&-wrapper': {\r\n        '@apply relative inline-flex align-top items-center cursor-base': {},\r\n      },\r\n\r\n      '&-sm': {\r\n        '@apply text-small': {},\r\n      },\r\n\r\n      '&-md': {\r\n        '@apply text-base': {},\r\n      },\r\n\r\n      '&-lg': {\r\n        '@apply text-large': {},\r\n      },\r\n    },\r\n\r\n    '&-group': {\r\n      '@apply flex flex-col gap-16 my-12': {},\r\n      '&[data-direction=\"row\"]': {\r\n        '@apply flex-row': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,QAAQ,GAAG,SAAAA,SAAA;EAAA,OAAO;IACjC,mBAAmB,EAAE;MACnB,mBAAmB,EAAE,CAAC,CAAC;MACvB,wBAAwB,EAAE,CAAC,CAAC;MAC5B,0CAA0C,EAAE,CAAC,CAAC;MAE9C;MACA,MAAM,EAAE;QACN,8BAA8B,EAAE,CAAC;MACnC,CAAC;MAED,MAAM,EAAE;QACN,8BAA8B,EAAE,CAAC;MACnC,CAAC;MAED,MAAM,EAAE;QACN,8BAA8B,EAAE,CAAC;MACnC,CAAC;MAED,YAAY,EAAE;QACZ,gDAAgD,EAAE,CAAC,CAAC;QACpD,wGAAwG,EAAE,CAAC,CAAC;QAC5G,6EAA6E,EAAE,CAAC,CAAC;QAEjFC,GAAG,EAAE;UACH,eAAe,EAAE,CAAC;QACpB;MACF,CAAC;MAED,YAAY,EAAE;QACZ,mCAAmC,EAAE,CAAC,CAAC;QAEvC,cAAc,EAAE;UACd,+DAA+D,EAAE,CAAC,CAAC;UAEnEA,GAAG,EAAE;YACH,cAAc,EAAE,CAAC;UACnB;QACF;MACF,CAAC;MAED,6HAA6H,EAC3H;QACE,kCAAkC,EAAE;UAClC,4JAA4J,EAC1J,CAAC,CAAC;UAEJA,GAAG,EAAE;YACH,cAAc,EAAE,CAAC;UACnB;QACF;MACF,CAAC;MAEH,uBAAuB,EAAE;QACvB,cAAc,EAAE;UACd,8CAA8C,EAAE,CAAC;QACnD,CAAC;QAED,YAAY,EAAE;UACZ,cAAc,EAAE;YACd,oDAAoD,EAAE,CAAC,CAAC;YAExDA,GAAG,EAAE;cACH,cAAc,EAAE,CAAC;YACnB;UACF;QACF;MACF,CAAC;MAED;MACA,+BAA+B,EAAE;QAC/B,2BAA2B,EAAE,CAAC,CAAC;QAE/B,cAAc,EAAE;UACd,6DAA6D,EAAE,CAAC;QAClE,CAAC;QAED,WAAW,EAAE;UACX,cAAc,EAAE;YACd,qDAAqD,EAAE,CAAC;UAC1D;QACF,CAAC;QAED,6BAA6B,EAAE;UAC7B,2BAA2B,EAAE,CAAC;QAChC;MACF,CAAC;MAED;MACA,sBAAsB,EAAE;QACtB,mBAAmB,EAAE,CAAC;MACxB,CAAC;MACD,uBAAuB,EAAE;QACvB,mBAAmB,EAAE,CAAC;MACxB,CAAC;MAED,cAAc,EAAE;QACd,UAAU,EAAE;UACV,0BAA0B,EAAE,CAAC;QAC/B;MACF,CAAC;MAED,eAAe,EAAE;QACf,UAAU,EAAE;UACV,0BAA0B,EAAE,CAAC;QAC/B;MACF,CAAC;MAED,SAAS,EAAE;QACT,qDAAqD,EAAE,CAAC,CAAC;QAEzD,WAAW,EAAE;UACX,gEAAgE,EAAE,CAAC;QACrE,CAAC;QAED,MAAM,EAAE;UACN,mBAAmB,EAAE,CAAC;QACxB,CAAC;QAED,MAAM,EAAE;UACN,kBAAkB,EAAE,CAAC;QACvB,CAAC;QAED,MAAM,EAAE;UACN,mBAAmB,EAAE,CAAC;QACxB;MACF,CAAC;MAED,SAAS,EAAE;QACT,mCAAmC,EAAE,CAAC,CAAC;QACvC,yBAAyB,EAAE;UACzB,iBAAiB,EAAE,CAAC;QACtB;MACF;IACF;EACF,CAAC;AAAA,CAAC"}

package/dist/cjs/components/combobox.js

@@ -0,0 +1,67 @@
+module.exports = ComboBox = function ComboBox() {
+  return {
+    '.sk-form-combobox': {
+      '@apply focus-within:ring ring-ring ring-offset': {},
+      '@apply relative w-auto': {},
+      '@apply inline-block': {},
+      '&-sm': {
+        '@apply h-[3.2rem]': {},
+        '@apply rounded-button-sm': {},
+        '.sk-form-combobox-select.active': {
+          '@apply text-input-small': {},
+          '@apply pr-[5.2rem]': {}
+        }
+      },
+      '&-md': {
+        '@apply h-[4rem]': {},
+        '@apply rounded-button-md': {},
+        '.sk-form-combobox-select.active': {
+          '@apply text-input-medium': {},
+          '@apply pr-[6.1rem]': {}
+        }
+      },
+      '&-lg': {
+        '@apply h-[4.8rem]': {},
+        '@apply rounded-button-lg': {},
+        '.sk-form-combobox-select.active': {
+          '@apply text-input-large': {},
+          '@apply pr-[6.8rem]': {}
+        }
+      },
+      '&-select': {
+        '@apply h-full bg-right-12 bg-no-repeat': {},
+        '&.sk-form-select': {
+          '@apply focus:outline-none focus:ring-0 focus:ring-transparent': {}
+        },
+        '@apply w-full': {},
+        '&:not(.active)': {
+          '@apply cursor-default': {}
+        },
+        '@apply focus:border-transparent': {},
+        '@apply focus:hover:border-transparent': {},
+        '&.active': {
+          '@apply bg-primitives-overlay-lighten-10': {},
+          '@apply dark:bg-primitives-overlay-darken-6': {},
+          '@apply placeholder:text-dark-placeholder': {},
+          '@apply text-dark-primary': {},
+          '@apply border-transparent': {}
+        }
+      },
+      '&-list': {
+        '@apply w-full': {},
+        '@apply max-h-[23rem] overflow-y-auto': {},
+        '&-option': {
+          '&.sk-popup-menu-item': {
+            '@apply cursor-default': {},
+            '@apply leading-none': {},
+            '@apply h-auto': {}
+          },
+          '&-checkbox': {
+            '@apply w-0 h-0 m-0 p-0 opacity-0': {}
+          }
+        }
+      }
+    }
+  };
+};
+//# sourceMappingURL=combobox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","names":["module","exports","ComboBox"],"sources":["../../../src/components/combobox.js"],"sourcesContent":["module.exports = ComboBox = () => ({\r\n  '.sk-form-combobox': {\r\n    '@apply focus-within:ring ring-ring ring-offset': {},\r\n    '@apply relative w-auto': {},\r\n    '@apply inline-block': {},\r\n    '&-sm': {\r\n      '@apply h-[3.2rem]': {},\r\n      '@apply rounded-button-sm': {},\r\n      '.sk-form-combobox-select.active': {\r\n        '@apply text-input-small': {},\r\n        '@apply pr-[5.2rem]': {},\r\n      },\r\n    },\r\n    '&-md': {\r\n      '@apply h-[4rem]': {},\r\n      '@apply rounded-button-md': {},\r\n      '.sk-form-combobox-select.active': {\r\n        '@apply text-input-medium': {},\r\n        '@apply pr-[6.1rem]': {},\r\n      },\r\n    },\r\n    '&-lg': {\r\n      '@apply h-[4.8rem]': {},\r\n      '@apply rounded-button-lg': {},\r\n      '.sk-form-combobox-select.active': {\r\n        '@apply text-input-large': {},\r\n        '@apply pr-[6.8rem]': {},\r\n      },\r\n    },\r\n\r\n    '&-select': {\r\n      '@apply h-full bg-right-12 bg-no-repeat': {},\r\n\r\n      '&.sk-form-select': { '@apply focus:outline-none focus:ring-0 focus:ring-transparent': {} },\r\n      '@apply w-full': {},\r\n\r\n      '&:not(.active)': {\r\n        '@apply cursor-default': {},\r\n      },\r\n      '@apply focus:border-transparent': {},\r\n      '@apply focus:hover:border-transparent': {},\r\n      '&.active': {\r\n        '@apply bg-primitives-overlay-lighten-10': {},\r\n        '@apply dark:bg-primitives-overlay-darken-6': {},\r\n        '@apply placeholder:text-dark-placeholder': {},\r\n        '@apply text-dark-primary': {},\r\n        '@apply border-transparent': {},\r\n      },\r\n    },\r\n    '&-list': {\r\n      '@apply w-full': {},\r\n      '@apply max-h-[23rem] overflow-y-auto': {},\r\n      '&-option': {\r\n        '&.sk-popup-menu-item': {\r\n          '@apply cursor-default': {},\r\n          '@apply leading-none': {},\r\n          '@apply h-auto': {},\r\n        },\r\n\r\n        '&-checkbox': {\r\n          '@apply w-0 h-0 m-0 p-0 opacity-0': {},\r\n        },\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,QAAQ,GAAG,SAAAA,SAAA;EAAA,OAAO;IACjC,mBAAmB,EAAE;MACnB,gDAAgD,EAAE,CAAC,CAAC;MACpD,wBAAwB,EAAE,CAAC,CAAC;MAC5B,qBAAqB,EAAE,CAAC,CAAC;MACzB,MAAM,EAAE;QACN,mBAAmB,EAAE,CAAC,CAAC;QACvB,0BAA0B,EAAE,CAAC,CAAC;QAC9B,iCAAiC,EAAE;UACjC,yBAAyB,EAAE,CAAC,CAAC;UAC7B,oBAAoB,EAAE,CAAC;QACzB;MACF,CAAC;MACD,MAAM,EAAE;QACN,iBAAiB,EAAE,CAAC,CAAC;QACrB,0BAA0B,EAAE,CAAC,CAAC;QAC9B,iCAAiC,EAAE;UACjC,0BAA0B,EAAE,CAAC,CAAC;UAC9B,oBAAoB,EAAE,CAAC;QACzB;MACF,CAAC;MACD,MAAM,EAAE;QACN,mBAAmB,EAAE,CAAC,CAAC;QACvB,0BAA0B,EAAE,CAAC,CAAC;QAC9B,iCAAiC,EAAE;UACjC,yBAAyB,EAAE,CAAC,CAAC;UAC7B,oBAAoB,EAAE,CAAC;QACzB;MACF,CAAC;MAED,UAAU,EAAE;QACV,wCAAwC,EAAE,CAAC,CAAC;QAE5C,kBAAkB,EAAE;UAAE,+DAA+D,EAAE,CAAC;QAAE,CAAC;QAC3F,eAAe,EAAE,CAAC,CAAC;QAEnB,gBAAgB,EAAE;UAChB,uBAAuB,EAAE,CAAC;QAC5B,CAAC;QACD,iCAAiC,EAAE,CAAC,CAAC;QACrC,uCAAuC,EAAE,CAAC,CAAC;QAC3C,UAAU,EAAE;UACV,yCAAyC,EAAE,CAAC,CAAC;UAC7C,4CAA4C,EAAE,CAAC,CAAC;UAChD,0CAA0C,EAAE,CAAC,CAAC;UAC9C,0BAA0B,EAAE,CAAC,CAAC;UAC9B,2BAA2B,EAAE,CAAC;QAChC;MACF,CAAC;MACD,QAAQ,EAAE;QACR,eAAe,EAAE,CAAC,CAAC;QACnB,sCAAsC,EAAE,CAAC,CAAC;QAC1C,UAAU,EAAE;UACV,sBAAsB,EAAE;YACtB,uBAAuB,EAAE,CAAC,CAAC;YAC3B,qBAAqB,EAAE,CAAC,CAAC;YACzB,eAAe,EAAE,CAAC;UACpB,CAAC;UAED,YAAY,EAAE;YACZ,kCAAkC,EAAE,CAAC;UACvC;QACF;MACF;IACF;EACF,CAAC;AAAA,CAAC"}

package/dist/cjs/components/comments.js

@@ -6,9 +6,9 @@ module.exports = Comments = function Comments() {
     '.comment-item': {
       '@apply w-full': {},
       '&-container': {
-        '@apply flex relative w-full': {},
+        '@apply flex justify-between relative': {},
         '&-textpic': {
-          '@apply flex gap-2 grow': {}
+          '@apply flex gap-2': {}
         }
       },
       '&-text': {

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

@@ -1 +1 @@
-{"version":3,"file":"comments.js","names":["module","exports","Comments"],"sources":["../../../src/components/comments.js"],"sourcesContent":["module.exports = Comments = () => ({\r\n  '.comment-header': {\r\n    '@apply w-full flex items-center gap-8 p-16 border-b-4 border-gray-200': {},\r\n  },\r\n\r\n  '.comment-item': {\r\n    '@apply w-full': {},\r\n\r\n    '&-container': {\r\n      '@apply flex relative w-full': {},\r\n\r\n      '&-textpic': {\r\n        '@apply flex gap-2 grow': {},\r\n      },\r\n    },\r\n    '&-text': {\r\n      '@apply text-base font-bold mx-0 mb-0 mt-4': {},\r\n    },\r\n    '&-commentorpublished': {\r\n      '@apply float-right text-neutral-600 m-0': {},\r\n    },\r\n  },\r\n  '.comment-input': {\r\n    '@apply w-full flex gap-4 px-10 pt-8 pb-10': {},\r\n\r\n    '&-inactive': {\r\n      '@apply text-neutral-300 !text-3xl': {},\r\n    },\r\n\r\n    '&-active': {\r\n      '@apply text-primary !text-3xl': {},\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,QAAQ,GAAG,SAAAA,SAAA;EAAA,OAAO;IACjC,iBAAiB,EAAE;MACjB,uEAAuE,EAAE,CAAC;IAC5E,CAAC;IAED,eAAe,EAAE;MACf,eAAe,EAAE,CAAC,CAAC;MAEnB,aAAa,EAAE;QACb,6BAA6B,EAAE,CAAC,CAAC;QAEjC,WAAW,EAAE;UACX,wBAAwB,EAAE,CAAC;QAC7B;MACF,CAAC;MACD,QAAQ,EAAE;QACR,2CAA2C,EAAE,CAAC;MAChD,CAAC;MACD,sBAAsB,EAAE;QACtB,yCAAyC,EAAE,CAAC;MAC9C;IACF,CAAC;IACD,gBAAgB,EAAE;MAChB,2CAA2C,EAAE,CAAC,CAAC;MAE/C,YAAY,EAAE;QACZ,mCAAmC,EAAE,CAAC;MACxC,CAAC;MAED,UAAU,EAAE;QACV,+BAA+B,EAAE,CAAC;MACpC;IACF;EACF,CAAC;AAAA,CAAC"}
+{"version":3,"file":"comments.js","names":["module","exports","Comments"],"sources":["../../../src/components/comments.js"],"sourcesContent":["module.exports = Comments = () => ({ \r\n\r\n    '.comment-header': {\r\n        '@apply w-full flex items-center gap-8 p-16 border-b-4 border-gray-200': {},\r\n    },\r\n\r\n    '.comment-item':{\r\n        '@apply w-full': {},\r\n\r\n        '&-container': {\r\n            '@apply flex justify-between relative': {},\r\n\r\n            '&-textpic': {\r\n                '@apply flex gap-2': {},\r\n            },\r\n        },\r\n        '&-text': {\r\n            '@apply text-base font-bold mx-0 mb-0 mt-4': {},\r\n        },\r\n        '&-commentorpublished': {\r\n            '@apply float-right text-neutral-600 m-0': {},\r\n        },\r\n    },\r\n    '.comment-input':{\r\n        '@apply w-full flex gap-4 px-10 pt-8 pb-10': {},\r\n\r\n        '&-inactive': {\r\n            '@apply text-neutral-300 !text-3xl': {},\r\n        },\r\n\r\n        '&-active': {\r\n            '@apply text-primary !text-3xl': {},\r\n        }\r\n\r\n    },\r\n\r\n   \r\n});"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,QAAQ,GAAG,SAAAA,SAAA;EAAA,OAAO;IAE/B,iBAAiB,EAAE;MACf,uEAAuE,EAAE,CAAC;IAC9E,CAAC;IAED,eAAe,EAAC;MACZ,eAAe,EAAE,CAAC,CAAC;MAEnB,aAAa,EAAE;QACX,sCAAsC,EAAE,CAAC,CAAC;QAE1C,WAAW,EAAE;UACT,mBAAmB,EAAE,CAAC;QAC1B;MACJ,CAAC;MACD,QAAQ,EAAE;QACN,2CAA2C,EAAE,CAAC;MAClD,CAAC;MACD,sBAAsB,EAAE;QACpB,yCAAyC,EAAE,CAAC;MAChD;IACJ,CAAC;IACD,gBAAgB,EAAC;MACb,2CAA2C,EAAE,CAAC,CAAC;MAE/C,YAAY,EAAE;QACV,mCAAmC,EAAE,CAAC;MAC1C,CAAC;MAED,UAAU,EAAE;QACR,+BAA+B,EAAE,CAAC;MACtC;IAEJ;EAGJ,CAAC;AAAA,CAAC"}