@sk-web-gui/core 3.10.0 → 3.11.1

package/dist/cjs/components/card.js

@@ -1,2 +1,283 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Card",{enumerable:true,get:function(){return Card}});function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}var Card=function(colors){return{".sk-card":_object_spread_props(_object_spread({"@apply text-base":{},"@apply bg-white relative rounded-b-cards rounded-cards":{},"@apply flex flex-col":{},"@apply no-underline hover:no-underline":{},"@apply h-full":{},"&-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 text-base":{},span:{"@apply flex space-x-4 items-center":{},time:{"@apply h-24":{}}},"&.sk-card-image":{"@apply min-h-[12.5em] max-h-[20em]":{}}},"&-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 text-body":{}}},"&-icon":{"@apply hidden":{}}}},colors.reduce(function(styles,color){var _obj,_obj1;return _object_spread_props(_object_spread({},styles),_define_property({'&[data-color="mono"], &[data-color="tertiary"]':_define_property({"@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":{}}},'&[data-inverted="true"]',{"@apply bg-primitives-gray-800":{},".sk-card-body":{"&-meta":{span:{"@apply text-light-secondary":{}}},"&-header":{"h1, h2, h3, h4, h5, h6, h7, a":_define_property({},"@apply text-light-primary",{})},"&-content":{"p, a":_define_property({},"@apply text-light-secondary",{})},".sk-card-body-icon":{"@apply bg-primitives-overlay-lighten-10 text-primitives-gray-900":{},"@apply hover:bg-primitives-gray-lightest":{}}}}),'&[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":{}}},'&[data-color="'.concat(color,'"]'),(_obj1={},_define_property(_obj1,"@apply bg-".concat(color,"-surface-primary-hover"),{}),_define_property(_obj1,"&.sk-card-use-hover-effect",_define_property({},"@apply hover:cursor-pointer hover:bg-".concat(color,"-surface-primary"),{})),_define_property(_obj1,".sk-card-body",{"&-meta":{span:{"@apply text-light-secondary":{}}},"&-header":{"h1, h2, h3, h4, h5, h6, h7, a":_define_property({},"@apply text-light-primary",{})},"&-content":{"p, a":_define_property({},"@apply text-light-secondary",{})}}),_define_property(_obj1,'&[data-inverted="true"]',(_obj={},_define_property(_obj,"@apply bg-".concat(color,"-surface-accent-hover"),{}),_define_property(_obj,"&.sk-card-use-hover-effect",_define_property({},"@apply hover:cursor-pointer hover:bg-".concat(color,"-surface-accent"),{})),_define_property(_obj,".sk-card-body",{"&-meta":{span:{"@apply text-dark-secondary":{}}},"&-header":{"h1, h2, h3, h4, h5, h6, h7, a":_define_property({},"@apply text-dark-primary",{})},"&-content":{"p, a":_define_property({},"@apply text-dark-secondary",{})}}),_obj)),_obj1)))},{})),_define_property({"&.sk-card-use-hover-effect":{".sk-card-body-icon":{"@apply inline-flex":{},"@apply mt-auto mb-auto mr-24":{}}}},'&[data-layout="horizontal"]',{"@apply flex-row h-full":{},".sk-card":{"&-image":{"@apply h-full w-[8em]":{},"@apply float-left":{},"@apply rounded-none rounded-l-cards grow-0":{}},"&-body":{"@apply w-full":{},"@apply border-none":{},"&-wrapper":{"@apply w-full":{}},"&-content":{"p, a":{"@apply text-small":{}}},"&-meta":{"@apply hidden":{}}}}})),".sk-card-link":{"@apply hover:cursor-pointer":{},"&::after":{content:"''",position:"absolute",left:"0",top:"0",right:"0",bottom:"0"}},".sk-meta-card":{"@apply no-underline hover:no-underline":{},"@apply flex bg-vattjom-surface-accent":{},"@apply p-14 rounded-groups":{},'&[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 text-small":{},"@apply text-dark-secondary line-clamp-1":{}}}},"&-external-link-icon":{"@apply ml-auto h-32 w-32":{},"@apply p-6 text-dark":{}}}}};
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Card", {
+    enumerable: true,
+    get: function() {
+        return Card;
+    }
+});
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+var Card = function(colors) {
+    return {
+        '.sk-card': _object_spread_props(_object_spread({
+            '@apply text-base': {},
+            '@apply bg-white relative rounded-b-cards rounded-cards': {},
+            '@apply flex flex-col': {},
+            '@apply no-underline hover:no-underline': {},
+            '@apply h-full': {},
+            '&-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 text-base': {},
+                    span: {
+                        '@apply flex space-x-4 items-center': {},
+                        time: {
+                            '@apply h-24': {}
+                        }
+                    },
+                    '&.sk-card-image': {
+                        '@apply min-h-[12.5em] max-h-[20em]': {}
+                    }
+                },
+                '&-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 text-body': {}
+                    }
+                },
+                '&-icon': {
+                    '@apply hidden': {}
+                }
+            }
+        }, colors.reduce(function(styles, color) {
+            var _obj, _obj1;
+            return _object_spread_props(_object_spread({}, styles), _define_property({
+                '&[data-color="mono"], &[data-color="tertiary"]': // inverted.
+                _define_property({
+                    '@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': {}
+                    }
+                }, '&[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': _define_property({}, "@apply text-light-primary", {})
+                        },
+                        // Content
+                        '&-content': {
+                            'p, a': _define_property({}, "@apply text-light-secondary", {})
+                        },
+                        '.sk-card-body-icon': {
+                            '@apply bg-primitives-overlay-lighten-10 text-primitives-gray-900': {},
+                            '@apply hover:bg-primitives-gray-lightest': {}
+                        }
+                    }
+                }),
+                '&[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': {}
+                }
+            }, '&[data-color="'.concat(color, '"]'), (_obj1 = {}, // card
+            _define_property(_obj1, "@apply bg-".concat(color, "-surface-primary-hover"), {}), // clickable
+            _define_property(_obj1, '&.sk-card-use-hover-effect', // hover
+            _define_property({}, "@apply hover:cursor-pointer hover:bg-".concat(color, "-surface-primary"), {})), // Meta
+            _define_property(_obj1, '.sk-card-body', {
+                '&-meta': {
+                    span: {
+                        '@apply text-light-secondary': {}
+                    }
+                },
+                // header
+                '&-header': {
+                    'h1, h2, h3, h4, h5, h6, h7, a': _define_property({}, "@apply text-light-primary", {})
+                },
+                // Content
+                '&-content': {
+                    'p, a': _define_property({}, "@apply text-light-secondary", {})
+                }
+            }), _define_property(_obj1, '&[data-inverted="true"]', (_obj = {}, // card
+            _define_property(_obj, "@apply bg-".concat(color, "-surface-accent-hover"), {}), // clickable
+            _define_property(_obj, '&.sk-card-use-hover-effect', // hover
+            _define_property({}, "@apply hover:cursor-pointer hover:bg-".concat(color, "-surface-accent"), {})), _define_property(_obj, '.sk-card-body', {
+                // Meta
+                '&-meta': {
+                    span: {
+                        '@apply text-dark-secondary': {}
+                    }
+                },
+                // header
+                '&-header': {
+                    'h1, h2, h3, h4, h5, h6, h7, a': _define_property({}, "@apply text-dark-primary", {})
+                },
+                // Content
+                '&-content': {
+                    'p, a': _define_property({}, "@apply text-dark-secondary", {})
+                }
+            }), _obj)), _obj1)));
+        }, {})), _define_property({
+            // clickable
+            '&.sk-card-use-hover-effect': {
+                //Hide and show of icon
+                '.sk-card-body-icon': {
+                    '@apply inline-flex': {},
+                    '@apply mt-auto mb-auto mr-24': {}
+                }
+            }
+        }, '&[data-layout="horizontal"]', {
+            '@apply flex-row h-full': {},
+            '.sk-card': {
+                '&-image': {
+                    '@apply h-full w-[8em]': {},
+                    '@apply float-left': {},
+                    '@apply rounded-none rounded-l-cards grow-0': {}
+                },
+                '&-body': {
+                    '@apply w-full': {},
+                    '@apply border-none': {},
+                    '&-wrapper': {
+                        '@apply w-full': {}
+                    },
+                    '&-content': {
+                        'p, a': {
+                            '@apply text-small': {}
+                        }
+                    },
+                    '&-meta': {
+                        '@apply hidden': {}
+                    }
+                }
+            }
+        })),
+        '.sk-card-link': {
+            '@apply hover:cursor-pointer': {},
+            '&::after': {
+                content: "''",
+                position: 'absolute',
+                left: '0',
+                top: '0',
+                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-groups': {},
+            '&[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 text-small': {},
+                        '@apply text-dark-secondary line-clamp-1': {}
+                    }
+                }
+            },
+            '&-external-link-icon': {
+                '@apply ml-auto h-32 w-32': {},
+                '@apply p-6 text-dark': {}
+            }
+        }
+    };
+};
+
 //# sourceMappingURL=card.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/card.ts"],"sourcesContent":["export const Card = (colors: string[]) => ({\r\n  '.sk-card': {\r\n    '@apply text-base': {},\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-full': {},\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 text-base': {},\r\n        span: {\r\n          '@apply flex space-x-4 items-center': {},\r\n          time: {\r\n            '@apply h-24': {},\r\n          },\r\n        },\r\n\r\n        '&.sk-card-image': {\r\n          '@apply min-h-[12.5em] max-h-[20em]': {},\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 text-body': {},\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-full': {},\r\n\r\n      '.sk-card': {\r\n        '&-image': {\r\n          '@apply h-full w-[8em]': {},\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-full': {},\r\n          '@apply border-none': {},\r\n\r\n          '&-wrapper': {\r\n            '@apply w-full': {},\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-groups': {},\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 text-small': {},\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-32 w-32': {},\r\n      '@apply p-6 text-dark': {},\r\n    },\r\n  },\r\n});\r\n"],"names":["Card","colors","span","time","reduce","styles","color","content","position","left","top","right","bottom","svg","height","width"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/card.ts"],"sourcesContent":["export const Card = (colors: string[]) => ({\r\n  '.sk-card': {\r\n    '@apply text-base': {},\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-full': {},\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 text-base': {},\r\n        span: {\r\n          '@apply flex space-x-4 items-center': {},\r\n          time: {\r\n            '@apply h-24': {},\r\n          },\r\n        },\r\n\r\n        '&.sk-card-image': {\r\n          '@apply min-h-[12.5em] max-h-[20em]': {},\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 text-body': {},\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-full': {},\r\n\r\n      '.sk-card': {\r\n        '&-image': {\r\n          '@apply h-full w-[8em]': {},\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-full': {},\r\n          '@apply border-none': {},\r\n\r\n          '&-wrapper': {\r\n            '@apply w-full': {},\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-groups': {},\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 text-small': {},\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-32 w-32': {},\r\n      '@apply p-6 text-dark': {},\r\n    },\r\n  },\r\n});\r\n"],"names":["Card","colors","span","time","reduce","styles","color","content","position","left","top","right","bottom","svg","height","width"],"mappings":"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"}

package/dist/cjs/components/checkbox.js

@@ -1,2 +1,142 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Checkbox",{enumerable:true,get:function(){return Checkbox}});var Checkbox=function(){return{".sk-form-checkbox":{"@apply bg-inherit":{},"@apply rounded-utility":{},"@apply bg-transparent border-transparent":{},"&-sm":{"@apply w-24 h-24":{}},"&-md":{"@apply w-24 h-24":{}},"&-lg":{"@apply w-24 h-24":{}},"+ .sk-icon":{"@apply absolute inset-0 my-auto bg-transparent":{},"@apply border-1 p-2 border-input-field-outline":{},"@apply bg-input-field-surface":{},svg:{"@apply hidden":{}}},"&&:checked":{"@apply text-light-primary bg-none":{},"& + .sk-icon":{"@apply text-light-primary bg-dark-primary border-dark-primary":{},svg:{"@apply block":{}}}},'&[type="checkbox"]:checked':{"@apply text-transparent":{}},"&&:hover:not(&&-disabled,&&:checked,&&[aria-invalid=true]),&&:hover:focus:not(&&-disabled,&&:checked,&&[aria-invalid=true])":{"& + .sk-icon, &:focus + .sk-icon":{"@apply text-dark-placeholder border-input-field-outline-hover":{},svg:{"@apply block":{}}}},"&&[aria-invalid=true]":{"& + .sk-icon":{"@apply border-2 border-error-surface-primary":{}},"&&:checked":{"& + .sk-icon":{"@apply p-2 bg-background-content text-dark-primary":{},svg:{"@apply block":{}}}}},"&&-disabled,&&-disabled:hover":{"@apply cursor-not-allowed":{},"& + .sk-icon":{"@apply bg-input-field-surface-disabled border-input-field-outline-disabled":{}},"&:checked":{"& + .sk-icon":{"@apply bg-dark-disabled text-light-primary border-0":{}}},"& ~ .sk-form-checkbox-label":{"@apply text-dark-disabled":{}}},"&-label-left &-label":{"@apply mr-8":{}},"&-label-right &-label":{"@apply ml-8":{}},"&-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":{}}}}}};
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Checkbox", {
+    enumerable: true,
+    get: function() {
+        return Checkbox;
+    }
+});
+var Checkbox = function() {
+    return {
+        '.sk-form-checkbox': {
+            '@apply bg-inherit': {},
+            '@apply rounded-utility': {},
+            '@apply bg-transparent border-transparent': {},
+            // sizing
+            '&-sm': {
+                '@apply w-24 h-24': {}
+            },
+            '&-md': {
+                '@apply w-24 h-24': {}
+            },
+            '&-lg': {
+                '@apply w-24 h-24': {}
+            },
+            '+ .sk-icon': {
+                '@apply absolute inset-0 my-auto bg-transparent': {},
+                '@apply border-1 p-2 border-input-field-outline': {},
+                '@apply bg-input-field-surface': {},
+                svg: {
+                    '@apply hidden': {}
+                }
+            },
+            '&&:checked': {
+                '@apply text-light-primary bg-none': {},
+                '& + .sk-icon': {
+                    '@apply text-light-primary bg-dark-primary border-dark-primary': {},
+                    svg: {
+                        '@apply block': {}
+                    }
+                }
+            },
+            '&[type="checkbox"]:checked': {
+                '@apply text-transparent': {}
+            },
+            '&&:hover:not(&&-disabled,&&[readonly],&&:checked,&&[aria-invalid=true]),&&:hover:focus:not(&&-disabled,&&[readonly],&&:checked,&&[aria-invalid=true])': {
+                '& + .sk-icon, &:focus + .sk-icon': {
+                    '@apply text-dark-placeholder border-input-field-outline-hover': {},
+                    svg: {
+                        '@apply block': {}
+                    }
+                }
+            },
+            '&&[aria-invalid=true]': {
+                '& + .sk-icon': {
+                    '@apply border-2 border-error-surface-primary': {}
+                },
+                '&&:checked': {
+                    '& + .sk-icon': {
+                        '@apply p-2 bg-background-content text-dark-primary': {},
+                        svg: {
+                            '@apply block': {}
+                        }
+                    }
+                }
+            },
+            // disabled
+            '&&-disabled,&&-disabled:hover': {
+                '& + .sk-icon': {
+                    '@apply bg-input-field-surface-disabled border-input-field-outline-disabled': {}
+                },
+                '&:checked': {
+                    '& + .sk-icon': {
+                        '@apply bg-dark-disabled text-light-primary border-transparent': {}
+                    }
+                },
+                '& ~ .sk-form-checkbox-label': {
+                    '@apply text-dark-disabled': {}
+                }
+            },
+            //readonly
+            '&[readonly], &[readonly="true"]': {
+                '@apply border-input-field-outline-disabled': {},
+                '@apply bg-input-field-surface-disabled': {},
+                '&:hover:checked': {
+                    '& + .sk-icon': {
+                        '@apply bg-dark-secondary border-dark-secondary text-light-primary': {}
+                    }
+                },
+                '&:checked': {
+                    '& + .sk-icon': {
+                        '@apply bg-dark-secondary border-dark-secondary text-light-primary': {}
+                    }
+                },
+                '& ~ .sk-form-checkbox-label': {
+                    '@apply text-dark-secondary': {}
+                }
+            },
+            // label
+            '&-label-left &-label': {
+                '@apply mr-8': {}
+            },
+            '&-label-right &-label': {
+                '@apply ml-8': {}
+            },
+            '&-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': {}
+                }
+            }
+        }
+    };
+};
+
 //# sourceMappingURL=checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/checkbox.ts"],"sourcesContent":["export const 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-24 h-24': {},\r\n    },\r\n\r\n    '&-md': {\r\n      '@apply w-24 h-24': {},\r\n    },\r\n\r\n    '&-lg': {\r\n      '@apply w-24 h-24': {},\r\n    },\r\n\r\n    '+ .sk-icon': {\r\n      '@apply absolute inset-0 my-auto bg-transparent': {},\r\n      '@apply border-1 p-2 border-input-field-outline': {},\r\n      '@apply bg-input-field-surface': {},\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    '&[type=\"checkbox\"]:checked': {\r\n      '@apply text-transparent': {},\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-dark-placeholder border-input-field-outline-hover': {},\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-input-field-surface-disabled border-input-field-outline-disabled': {},\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-8': {},\r\n    },\r\n    '&-label-right &-label': {\r\n      '@apply ml-8': {},\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"],"names":["Checkbox","svg"],"mappings":"oGAAaA,kDAAAA,YAAN,IAAMA,SAAW,iBAAO,CAC7B,oBAAqB,CACnB,oBAAqB,CAAC,EACtB,yBAA0B,CAAC,EAC3B,2CAA4C,CAAC,EAG7C,OAAQ,CACN,mBAAoB,CAAC,CACvB,EAEA,OAAQ,CACN,mBAAoB,CAAC,CACvB,EAEA,OAAQ,CACN,mBAAoB,CAAC,CACvB,EAEA,aAAc,CACZ,iDAAkD,CAAC,EACnD,iDAAkD,CAAC,EACnD,gCAAiC,CAAC,EAElCC,IAAK,CACH,gBAAiB,CAAC,CACpB,CACF,EAEA,aAAc,CACZ,oCAAqC,CAAC,EAEtC,eAAgB,CACd,gEAAiE,CAAC,EAElEA,IAAK,CACH,eAAgB,CAAC,CACnB,CACF,CACF,EAEA,6BAA8B,CAC5B,0BAA2B,CAAC,CAC9B,EACA,8HACE,CACE,mCAAoC,CAClC,gEAAiE,CAAC,EAElEA,IAAK,CACH,eAAgB,CAAC,CACnB,CACF,CACF,EAEF,wBAAyB,CACvB,eAAgB,CACd,+CAAgD,CAAC,CACnD,EAEA,aAAc,CACZ,eAAgB,CACd,qDAAsD,CAAC,EAEvDA,IAAK,CACH,eAAgB,CAAC,CACnB,CACF,CACF,CACF,EAGA,gCAAiC,CAC/B,4BAA6B,CAAC,EAE9B,eAAgB,CACd,6EAA8E,CAAC,CACjF,EAEA,YAAa,CACX,eAAgB,CACd,sDAAuD,CAAC,CAC1D,CACF,EAEA,8BAA+B,CAC7B,4BAA6B,CAAC,CAChC,CACF,EAGA,uBAAwB,CACtB,cAAe,CAAC,CAClB,EACA,wBAAyB,CACvB,cAAe,CAAC,CAClB,EAEA,eAAgB,CACd,WAAY,CACV,2BAA4B,CAAC,CAC/B,CACF,EAEA,gBAAiB,CACf,WAAY,CACV,2BAA4B,CAAC,CAC/B,CACF,EAEA,UAAW,CACT,sDAAuD,CAAC,EAExD,YAAa,CACX,iEAAkE,CAAC,CACrE,EAEA,OAAQ,CACN,oBAAqB,CAAC,CACxB,EAEA,OAAQ,CACN,mBAAoB,CAAC,CACvB,EAEA,OAAQ,CACN,oBAAqB,CAAC,CACxB,CACF,EAEA,UAAW,CACT,oCAAqC,CAAC,EACtC,0BAA2B,CACzB,kBAAmB,CAAC,CACtB,CACF,CACF,CACF"}
+{"version":3,"sources":["../../../src/components/checkbox.ts"],"sourcesContent":["export const 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-24 h-24': {},\r\n    },\r\n\r\n    '&-md': {\r\n      '@apply w-24 h-24': {},\r\n    },\r\n\r\n    '&-lg': {\r\n      '@apply w-24 h-24': {},\r\n    },\r\n\r\n    '+ .sk-icon': {\r\n      '@apply absolute inset-0 my-auto bg-transparent': {},\r\n      '@apply border-1 p-2 border-input-field-outline': {},\r\n      '@apply bg-input-field-surface': {},\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    '&[type=\"checkbox\"]:checked': {\r\n      '@apply text-transparent': {},\r\n    },\r\n    '&&:hover:not(&&-disabled,&&[readonly],&&:checked,&&[aria-invalid=true]),&&:hover:focus:not(&&-disabled,&&[readonly],&&:checked,&&[aria-invalid=true])':\r\n      {\r\n        '& + .sk-icon, &:focus + .sk-icon': {\r\n          '@apply text-dark-placeholder border-input-field-outline-hover': {},\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      '& + .sk-icon': {\r\n        '@apply bg-input-field-surface-disabled border-input-field-outline-disabled': {},\r\n      },\r\n\r\n      '&:checked': {\r\n        '& + .sk-icon': {\r\n          '@apply bg-dark-disabled text-light-primary border-transparent': {},\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    //readonly\r\n    '&[readonly], &[readonly=\"true\"]': {\r\n      '@apply border-input-field-outline-disabled': {},\r\n      '@apply bg-input-field-surface-disabled': {},\r\n\r\n      '&:hover:checked': {\r\n        '& + .sk-icon': {\r\n          '@apply bg-dark-secondary border-dark-secondary text-light-primary': {},\r\n        },\r\n      },\r\n      '&:checked': {\r\n        '& + .sk-icon': {\r\n          '@apply bg-dark-secondary border-dark-secondary text-light-primary': {},\r\n        },\r\n      },\r\n\r\n      '& ~ .sk-form-checkbox-label': {\r\n        '@apply text-dark-secondary': {},\r\n      },\r\n    },\r\n\r\n    // label\r\n    '&-label-left &-label': {\r\n      '@apply mr-8': {},\r\n    },\r\n    '&-label-right &-label': {\r\n      '@apply ml-8': {},\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"],"names":["Checkbox","svg"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,IAAMA,WAAW;WAAO;QAC7B,qBAAqB;YACnB,qBAAqB,CAAC;YACtB,0BAA0B,CAAC;YAC3B,4CAA4C,CAAC;YAE7C,SAAS;YACT,QAAQ;gBACN,oBAAoB,CAAC;YACvB;YAEA,QAAQ;gBACN,oBAAoB,CAAC;YACvB;YAEA,QAAQ;gBACN,oBAAoB,CAAC;YACvB;YAEA,cAAc;gBACZ,kDAAkD,CAAC;gBACnD,kDAAkD,CAAC;gBACnD,iCAAiC,CAAC;gBAElCC,KAAK;oBACH,iBAAiB,CAAC;gBACpB;YACF;YAEA,cAAc;gBACZ,qCAAqC,CAAC;gBAEtC,gBAAgB;oBACd,iEAAiE,CAAC;oBAElEA,KAAK;wBACH,gBAAgB,CAAC;oBACnB;gBACF;YACF;YAEA,8BAA8B;gBAC5B,2BAA2B,CAAC;YAC9B;YACA,yJACE;gBACE,oCAAoC;oBAClC,iEAAiE,CAAC;oBAElEA,KAAK;wBACH,gBAAgB,CAAC;oBACnB;gBACF;YACF;YAEF,yBAAyB;gBACvB,gBAAgB;oBACd,gDAAgD,CAAC;gBACnD;gBAEA,cAAc;oBACZ,gBAAgB;wBACd,sDAAsD,CAAC;wBAEvDA,KAAK;4BACH,gBAAgB,CAAC;wBACnB;oBACF;gBACF;YACF;YAEA,WAAW;YACX,iCAAiC;gBAC/B,gBAAgB;oBACd,8EAA8E,CAAC;gBACjF;gBAEA,aAAa;oBACX,gBAAgB;wBACd,iEAAiE,CAAC;oBACpE;gBACF;gBAEA,+BAA+B;oBAC7B,6BAA6B,CAAC;gBAChC;YACF;YAEA,UAAU;YACV,mCAAmC;gBACjC,8CAA8C,CAAC;gBAC/C,0CAA0C,CAAC;gBAE3C,mBAAmB;oBACjB,gBAAgB;wBACd,qEAAqE,CAAC;oBACxE;gBACF;gBACA,aAAa;oBACX,gBAAgB;wBACd,qEAAqE,CAAC;oBACxE;gBACF;gBAEA,+BAA+B;oBAC7B,8BAA8B,CAAC;gBACjC;YACF;YAEA,QAAQ;YACR,wBAAwB;gBACtB,eAAe,CAAC;YAClB;YACA,yBAAyB;gBACvB,eAAe,CAAC;YAClB;YAEA,gBAAgB;gBACd,YAAY;oBACV,4BAA4B,CAAC;gBAC/B;YACF;YAEA,iBAAiB;gBACf,YAAY;oBACV,4BAA4B,CAAC;gBAC/B;YACF;YAEA,WAAW;gBACT,uDAAuD,CAAC;gBAExD,aAAa;oBACX,kEAAkE,CAAC;gBACrE;gBAEA,QAAQ;oBACN,qBAAqB,CAAC;gBACxB;gBAEA,QAAQ;oBACN,oBAAoB,CAAC;gBACvB;gBAEA,QAAQ;oBACN,qBAAqB,CAAC;gBACxB;YACF;YAEA,WAAW;gBACT,qCAAqC,CAAC;gBACtC,2BAA2B;oBACzB,mBAAmB,CAAC;gBACtB;YACF;QACF;IACF"}

package/dist/cjs/components/chip.js

@@ -1,2 +1,51 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Chip",{enumerable:true,get:function(){return Chip}});var Chip=function(){return{".sk-chip":{"@apply inline-flex":{},"@apply items-center justify-center":{},"@apply bg-secondary-surface":{},"@apply hover:bg-secondary-surface-hover":{},"@apply focus-visible:bg-secondary-surface-hover":{},"@apply focus-visible:ring":{},"@apply px-9 gap-4":{},"@apply h-34":{},"@apply text-small":{},"@apply text-dark-secondary":{},"@apply border-1":{},"@apply border-secondary-outline":{},"@apply hover:border-secondary-outline-hover":{},"@apply focus-visible:border-transparent":{},"@apply rounded-button":{},'&[data-strong="true"]':{"@apply border-2":{},"@apply px-8":{}},'&[data-rounded="true"]':{"@apply rounded-full":{}},'&[data-inverted="true"]':{"@apply text-inverted-dark-secondary":{},"@apply border-inverted-secondary-outline":{},"@apply hover:border-inverted-secondary-outline-hover":{},"@apply bg-inverted-secondary-surface":{},"@apply hover:bg-inverted-secondary-surface-hover":{},"@apply focus-visible:bg-inverted-secondary-surface-hover":{}},".sk-icon":{"@apply h-16 w-16":{}}}}};
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Chip", {
+    enumerable: true,
+    get: function() {
+        return Chip;
+    }
+});
+var Chip = function() {
+    return {
+        '.sk-chip': {
+            '@apply inline-flex': {},
+            '@apply items-center justify-center': {},
+            '@apply bg-secondary-surface': {},
+            '@apply hover:bg-secondary-surface-hover': {},
+            '@apply focus-visible:bg-secondary-surface-hover': {},
+            '@apply focus-visible:ring': {},
+            '@apply px-9 gap-4': {},
+            '@apply h-34': {},
+            '@apply text-small': {},
+            '@apply text-dark-secondary': {},
+            '@apply border-1': {},
+            '@apply border-secondary-outline': {},
+            '@apply hover:border-secondary-outline-hover': {},
+            '@apply focus-visible:border-transparent': {},
+            '@apply rounded-button': {},
+            '&[data-strong="true"]': {
+                '@apply border-2': {},
+                '@apply px-8': {}
+            },
+            '&[data-rounded="true"]': {
+                '@apply rounded-full': {}
+            },
+            '&[data-inverted="true"]': {
+                '@apply text-inverted-dark-secondary': {},
+                '@apply border-inverted-secondary-outline': {},
+                '@apply hover:border-inverted-secondary-outline-hover': {},
+                '@apply bg-inverted-secondary-surface': {},
+                '@apply hover:bg-inverted-secondary-surface-hover': {},
+                '@apply focus-visible:bg-inverted-secondary-surface-hover': {}
+            },
+            '.sk-icon': {
+                '@apply h-16 w-16': {}
+            }
+        }
+    };
+};
+
 //# sourceMappingURL=chip.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/chip.ts"],"sourcesContent":["export const Chip = () => ({\n  '.sk-chip': {\n    '@apply inline-flex': {},\n    '@apply items-center justify-center': {},\n    '@apply bg-secondary-surface': {},\n    '@apply hover:bg-secondary-surface-hover': {},\n    '@apply focus-visible:bg-secondary-surface-hover': {},\n    '@apply focus-visible:ring': {},\n    '@apply px-9 gap-4': {},\n    '@apply h-34': {},\n    '@apply text-small': {},\n    '@apply text-dark-secondary': {},\n    '@apply border-1': {},\n    '@apply border-secondary-outline': {},\n    '@apply hover:border-secondary-outline-hover': {},\n    '@apply focus-visible:border-transparent': {},\n    '@apply rounded-button': {},\n    '&[data-strong=\"true\"]': {\n      '@apply border-2': {},\n      '@apply px-8': {},\n    },\n    '&[data-rounded=\"true\"]': {\n      '@apply rounded-full': {},\n    },\n    '&[data-inverted=\"true\"]': {\n      '@apply text-inverted-dark-secondary': {},\n      '@apply border-inverted-secondary-outline': {},\n      '@apply hover:border-inverted-secondary-outline-hover': {},\n      '@apply bg-inverted-secondary-surface': {},\n      '@apply hover:bg-inverted-secondary-surface-hover': {},\n      '@apply focus-visible:bg-inverted-secondary-surface-hover': {},\n    },\n    '.sk-icon': {\n      '@apply h-16 w-16': {},\n    },\n  },\n});\n"],"names":["Chip"],"mappings":"oGAAaA,8CAAAA,QAAN,IAAMA,KAAO,iBAAO,CACzB,WAAY,CACV,qBAAsB,CAAC,EACvB,qCAAsC,CAAC,EACvC,8BAA+B,CAAC,EAChC,0CAA2C,CAAC,EAC5C,kDAAmD,CAAC,EACpD,4BAA6B,CAAC,EAC9B,oBAAqB,CAAC,EACtB,cAAe,CAAC,EAChB,oBAAqB,CAAC,EACtB,6BAA8B,CAAC,EAC/B,kBAAmB,CAAC,EACpB,kCAAmC,CAAC,EACpC,8CAA+C,CAAC,EAChD,0CAA2C,CAAC,EAC5C,wBAAyB,CAAC,EAC1B,wBAAyB,CACvB,kBAAmB,CAAC,EACpB,cAAe,CAAC,CAClB,EACA,yBAA0B,CACxB,sBAAuB,CAAC,CAC1B,EACA,0BAA2B,CACzB,sCAAuC,CAAC,EACxC,2CAA4C,CAAC,EAC7C,uDAAwD,CAAC,EACzD,uCAAwC,CAAC,EACzC,mDAAoD,CAAC,EACrD,2DAA4D,CAAC,CAC/D,EACA,WAAY,CACV,mBAAoB,CAAC,CACvB,CACF,CACF"}
+{"version":3,"sources":["../../../src/components/chip.ts"],"sourcesContent":["export const Chip = () => ({\r\n  '.sk-chip': {\r\n    '@apply inline-flex': {},\r\n    '@apply items-center justify-center': {},\r\n    '@apply bg-secondary-surface': {},\r\n    '@apply hover:bg-secondary-surface-hover': {},\r\n    '@apply focus-visible:bg-secondary-surface-hover': {},\r\n    '@apply focus-visible:ring': {},\r\n    '@apply px-9 gap-4': {},\r\n    '@apply h-34': {},\r\n    '@apply text-small': {},\r\n    '@apply text-dark-secondary': {},\r\n    '@apply border-1': {},\r\n    '@apply border-secondary-outline': {},\r\n    '@apply hover:border-secondary-outline-hover': {},\r\n    '@apply focus-visible:border-transparent': {},\r\n    '@apply rounded-button': {},\r\n    '&[data-strong=\"true\"]': {\r\n      '@apply border-2': {},\r\n      '@apply px-8': {},\r\n    },\r\n    '&[data-rounded=\"true\"]': {\r\n      '@apply rounded-full': {},\r\n    },\r\n    '&[data-inverted=\"true\"]': {\r\n      '@apply text-inverted-dark-secondary': {},\r\n      '@apply border-inverted-secondary-outline': {},\r\n      '@apply hover:border-inverted-secondary-outline-hover': {},\r\n      '@apply bg-inverted-secondary-surface': {},\r\n      '@apply hover:bg-inverted-secondary-surface-hover': {},\r\n      '@apply focus-visible:bg-inverted-secondary-surface-hover': {},\r\n    },\r\n    '.sk-icon': {\r\n      '@apply h-16 w-16': {},\r\n    },\r\n  },\r\n});\r\n"],"names":["Chip"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,IAAMA,OAAO;WAAO;QACzB,YAAY;YACV,sBAAsB,CAAC;YACvB,sCAAsC,CAAC;YACvC,+BAA+B,CAAC;YAChC,2CAA2C,CAAC;YAC5C,mDAAmD,CAAC;YACpD,6BAA6B,CAAC;YAC9B,qBAAqB,CAAC;YACtB,eAAe,CAAC;YAChB,qBAAqB,CAAC;YACtB,8BAA8B,CAAC;YAC/B,mBAAmB,CAAC;YACpB,mCAAmC,CAAC;YACpC,+CAA+C,CAAC;YAChD,2CAA2C,CAAC;YAC5C,yBAAyB,CAAC;YAC1B,yBAAyB;gBACvB,mBAAmB,CAAC;gBACpB,eAAe,CAAC;YAClB;YACA,0BAA0B;gBACxB,uBAAuB,CAAC;YAC1B;YACA,2BAA2B;gBACzB,uCAAuC,CAAC;gBACxC,4CAA4C,CAAC;gBAC7C,wDAAwD,CAAC;gBACzD,wCAAwC,CAAC;gBACzC,oDAAoD,CAAC;gBACrD,4DAA4D,CAAC;YAC/D;YACA,YAAY;gBACV,oBAAoB,CAAC;YACvB;QACF;IACF"}

package/dist/cjs/components/code.js

@@ -1,2 +1,23 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Code",{enumerable:true,get:function(){return Code}});var Code=function(){return{".code":{"@apply inline-flex justify-center items-center capitalize text-xs rounded-sm font-mono break-all":{},"@apply bg-neutral-200 border border-neutral-100 text-body":{},"@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300":{},padding:"2px 3px 1px"}}};
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Code", {
+    enumerable: true,
+    get: function() {
+        return Code;
+    }
+});
+var Code = function() {
+    return {
+        '.code': {
+            '@apply inline-flex justify-center items-center capitalize text-xs rounded-sm font-mono break-all': {},
+            '@apply bg-neutral-200 border border-neutral-100 text-body': {},
+            // dark
+            '@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300': {},
+            padding: '2px 3px 1px'
+        }
+    };
+};
+
 //# sourceMappingURL=code.js.map