@sk-web-gui/core 3.9.1 → 3.11.0

package/dist/esm/components/button.js

@@ -1,269 +1,297 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function buttonPrimary(colors) {
-  return {
-    '&-primary': _extends({
-      '@apply text-light-primary': {},
-      /* hover */
-      '@apply hover:bg-primary-surface-hover': {}
-    }, colors.reduce((styles, color) => _extends({}, styles, {
-      ["&[data-color=\"" + color + "\"]"]: {
-        ["@apply bg-" + color + "-surface-primary  text-" + color + "-text-secondary"]: {},
-        // hover
-        ["@apply hover:bg-" + color + "-surface-primary-hover hover:text-light-primary"]: {},
-        // keyboard active
-        '&.active': {
-          ["@apply bg-" + color + "-surface-primary-hover"]: {}
-        },
-        ["@apply active:bg-" + color + "-surface-primary-hover"]: {},
-        '&[data-inverted="true"]': {
-          '@apply text-inverted-light-primary': {},
-          ["@apply bg-inverted-" + color + "-surface-primary text-inverted-" + color + "-text-secondary"]: {},
-          // hover
-          ["@apply hover:bg-inverted-" + color + "-surface-primary-hover hover:text-inverted-light-primary"]: {},
-          // keyboard active
-          '&.active': {
-            ["@apply bg-inverted-" + color + "-surface-primary-hover"]: {}
-          },
-          ["@apply active:bg-inverted-" + color + "-surface-primary-hover"]: {}
-        }
-      }
-    }), {}), {
-      "&[data-color='primary']": {
-        '@apply bg-primary-surface': {},
-        '@apply hover:bg-primary-surface-hover': {},
-        '&.active': {
-          '@apply bg-primary-surface-hover': {}
-        },
-        ["@apply active:bg-primary-surface-hover"]: {},
-        '&[data-inverted="true"]': {
-          '@apply text-inverted-light-primary': {},
-          '@apply bg-inverted-primary-surface': {},
-          '@apply hover:bg-inverted-primary-surface-hover': {},
-          '&.active': {
-            '@apply bg-inverted-primary-surface-hover': {}
-          },
-          ["@apply active:bg-inverted-primary-surface-hover"]: {}
-        }
-      }
-    })
-  };
+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 buttonSecondary() {
-  return {
-    '&-secondary': {
-      '@apply border-secondary-outline': {},
-      '@apply text-dark-secondary': {},
-      '@apply bg-secondary-surface': {},
-      /* hover */
-      '@apply hover:border-secondary-outline-hover': {},
-      '@apply hover:bg-secondary-surface-hover': {},
-      /* focus */
-      '@apply focus-visible:border-background-content': {},
-      // State
-      '&.sk-btn-disabled, &[aria-disabled="true"]': {
-        '@apply disabled:bg-secondary-surface-disabled bg-secondary-surface-disabled disabled:border-transparent border-transparent !important': {}
-      },
-      '&[data-inverted="true"]': {
-        '@apply border-inverted-secondary-outline': {},
-        '@apply text-inverted-dark-secondary': {},
-        '@apply bg-inverted-secondary-surface': {},
-        /* hover */
-        '@apply hover:border-inverted-secondary-outline-hover': {},
-        '@apply hover:bg-inverted-secondary-surface-hover': {},
-        /* focus */
-        '@apply focus-visible:border-inverted-background-content': {},
-        // State
-        '&.sk-btn-disabled, &[aria-disabled="true"]': {
-          '@apply disabled:bg-inverted-secondary-surface-disabled bg-inverted-secondary-surface-disabled disabled:border-transparent border-transparent !important': {}
+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 buttonTertiary() {
-  return {
-    '&-tertiary': {
-      '@apply text-dark-secondary': {},
-      '@apply bg-tertiary-surface': {},
-      /* hover */
-      '@apply hover:bg-tertiary-surface-hover': {},
-      // State
-      '&.sk-btn-disabled, &[aria-disabled="true"]': {
-        '@apply disabled:bg-tertiary-surface-disabled bg-tertiary-surface-disabled disabled:border-transparent border-transparent !important': {}
-      },
-      '&[data-inverted="true"]': {
-        '@apply text-inverted-dark-secondary': {},
-        '@apply bg-inverted-tertiary-surface': {},
-        /* hover */
-        '@apply hover:bg-inverted-tertiary-surface-hover': {},
-        '&.sk-btn-disabled, &[aria-disabled="true"]': {
-          '@apply disabled:bg-inverted-tertiary-surface-disabled bg-inverted-tertiary-surface-disabled disabled:border-transparent border-transparent !important': {}
+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 buttonGhost() {
-  return {
-    '&-ghost': {
-      '@apply text-dark-secondary': {},
-      '@apply bg-transparent': {},
-      '@apply border-transparent': {},
-      /* hover */
-      '@apply hover:bg-transparent': {},
-      '@apply hover:border-transparent': {},
-      // State
-      '&.sk-btn-disabled, &[aria-disabled="true"]': {
-        '@apply disabled:bg-transparent bg-transparent disabled:border-transparent border-transparent !important': {}
-      },
-      '&[data-inverted="true"]': {
-        '@apply text-inverted-dark-secondary': {}
-      }
+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;
 }
-function buttonLink(colors) {
-  return {
-    '&-link': _extends({
-      '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},
-      '&.active': {
-        '@apply underline': {}
-      },
-      // dark colors
-      '@apply dark:text-neutral-200': {},
-      '@apply dark:active:text-neutral-500': {}
-    }, colors.reduce((styles, color) => _extends({}, styles, {
-      ["&[data-color=\"" + color + "\"]"]: {
-        ["@apply text-" + color + "-text active:text-" + color + "-text"]: {}
-        // dark colors
-      }
-    }), {}))
-  };
+function buttonPrimary(colors) {
+    var _obj;
+    return {
+        '&-primary': _object_spread_props(_object_spread({
+            '@apply text-light-primary': {},
+            /* hover */ '@apply hover:bg-primary-surface-hover': {}
+        }, colors.reduce(function(styles, color) {
+            var _obj, _obj1;
+            return _object_spread_props(_object_spread({}, styles), _define_property({}, '&[data-color="'.concat(color, '"]'), (_obj1 = {}, _define_property(_obj1, "@apply bg-".concat(color, "-surface-primary  text-").concat(color, "-text-secondary"), {}), // hover
+            _define_property(_obj1, "@apply hover:bg-".concat(color, "-surface-primary-hover hover:text-light-primary"), {}), // keyboard active
+            _define_property(_obj1, '&.active', _define_property({}, "@apply bg-".concat(color, "-surface-primary-hover"), {})), _define_property(_obj1, "@apply active:bg-".concat(color, "-surface-primary-hover"), {}), _define_property(_obj1, '&[data-inverted="true"]', (_obj = {
+                '@apply text-inverted-light-primary': {}
+            }, _define_property(_obj, "@apply bg-inverted-".concat(color, "-surface-primary text-inverted-").concat(color, "-text-secondary"), {}), // hover
+            _define_property(_obj, "@apply hover:bg-inverted-".concat(color, "-surface-primary-hover hover:text-inverted-light-primary"), {}), // keyboard active
+            _define_property(_obj, '&.active', _define_property({}, "@apply bg-inverted-".concat(color, "-surface-primary-hover"), {})), _define_property(_obj, "@apply active:bg-inverted-".concat(color, "-surface-primary-hover"), {}), _obj)), _obj1)));
+        }, {})), {
+            "&[data-color='primary']": (_obj = {
+                '@apply bg-primary-surface': {},
+                '@apply hover:bg-primary-surface-hover': {},
+                '&.active': {
+                    '@apply bg-primary-surface-hover': {}
+                }
+            }, _define_property(_obj, "@apply active:bg-primary-surface-hover", {}), _define_property(_obj, '&[data-inverted="true"]', _define_property({
+                '@apply text-inverted-light-primary': {},
+                '@apply bg-inverted-primary-surface': {},
+                '@apply hover:bg-inverted-primary-surface-hover': {},
+                '&.active': {
+                    '@apply bg-inverted-primary-surface-hover': {}
+                }
+            }, "@apply active:bg-inverted-primary-surface-hover", {})), _obj)
+        })
+    };
 }
-export var Button = colors => ({
-  '.sk-btn': _extends({
-    '@apply box-border': {},
-    '@apply border-2 border-transparent': {},
-    '@apply cursor-pointer': {},
-    '@apply relative': {},
-    '@apply m-0': {},
-    '@apply px-24 py-8 gap-8': {},
-    '@apply inline-flex items-center justify-center flex-shrink-0 align-middle': {},
-    '@apply rounded-button': {},
-    transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',
-    '@apply	duration-75 ease-out': {},
-    '@apply outline-none appearance-none select-none whitespace-nowrap': {},
-    '@apply focus-visible:outline-none': {},
-    '@apply focus-visible:ring': {},
-    "&[data-rounded='true']": {
-      '@apply rounded-circular': {}
-    },
-    // sizing
-    '&-sm': {
-      '@apply text-label-small': {},
-      '@apply px-14 py-8 gap-6': {},
-      '@apply max-h-32 h-32': {},
-      '@apply rounded-button-sm': {},
-      'svg, .sk-icon': {
-        '@apply h-16 w-16': {}
-      }
-    },
-    '&-md': {
-      '@apply text-label-medium': {},
-      '@apply px-18 py-8 gap-8': {},
-      '@apply max-h-40 h-40': {},
-      '@apply rounded-button-md': {},
-      'svg, .sk-icon': {
-        '@apply h-18 w-18': {}
-      }
-    },
-    '&-lg': {
-      '@apply text-label-large': {},
-      '@apply px-24 py-8 gap-8': {},
-      '@apply max-h-48 h-48': {},
-      '@apply rounded-button-lg': {},
-      'svg, .sk-icon': {
-        '@apply h-20 w-20': {}
-      }
-    },
-    // State
-    '&-disabled, &[aria-disabled="true"]': {
-      '@apply shadow-none disabled:shadow-none disabled:cursor-default cursor-default': {},
-      '@apply disabled:text-dark-disabled text-dark-disabled disabled:bg-primary-surface-disabled bg-primary-surface-disabled disabled:border-transparent border-transparent !important': {}
-    },
-    '&-loading': {
-      '&-spinner': {
-        '@apply absolute mr-0': {},
-        '&[data-hastext="true"]': {
-          '@apply relative mr-2': {}
-        }
-      },
-      '&-text': {
-        '@apply opacity-0': {}
-      }
-    }
-  }, buttonPrimary(colors), buttonSecondary(), buttonTertiary(), buttonGhost(), buttonLink(colors), {
-    '&[data-background="false"]:not(:hover)': {
-      '@apply bg-transparent': {}
-    },
-    '.sk-btn-has-icon': {
-      '&-left': {
-        '@apply h-full flex items-center justify-center -ml-2': {},
-        '.sk-icon': {
-          '@apply bg-transparent': {},
-          color: 'currentColor'
-        }
-      },
-      '&-right': {
-        '@apply h-full flex items-center justify-center -mr-2': {},
-        '.sk-icon': {
-          '@apply bg-transparent': {},
-          color: 'currentColor'
-        }
-      }
-    },
-    '&-lg .sk-btn-has-icon-left': {
-      '@apply -ml-4': {}
-    },
-    '&-lg .sk-btn-has-icon-right': {
-      '@apply -mr-4': {}
-    },
-    '&[data-icon=true]': {
-      '@apply p-0': {},
-      '.sk-icon': {
-        '@apply bg-transparent': {},
-        color: 'currentColor'
-      },
-      "&[data-rounded='true']": {
-        '@apply rounded-full': {}
-      },
-      '&.sk-btn-sm': {
-        '@apply w-32 min-w-32 max-w-32': {},
-        'svg, .sk-icon': {
-          '@apply h-20 w-20': {}
-        }
-      },
-      '&.sk-btn-md': {
-        '@apply w-40 min-w-40 max-w-40': {},
-        'svg, .sk-icon': {
-          '@apply h-20 w-20': {}
+function buttonSecondary() {
+    return {
+        '&-secondary': {
+            '@apply border-secondary-outline': {},
+            '@apply text-dark-secondary': {},
+            '@apply bg-secondary-surface': {},
+            /* hover */ '@apply hover:border-secondary-outline-hover': {},
+            '@apply hover:bg-secondary-surface-hover': {},
+            /* focus */ '@apply focus-visible:border-background-content': {},
+            // State
+            '&.sk-btn-disabled, &[aria-disabled="true"]': {
+                '@apply disabled:bg-secondary-surface-disabled bg-secondary-surface-disabled disabled:border-transparent border-transparent !important': {}
+            },
+            '&[data-inverted="true"]': {
+                '@apply border-inverted-secondary-outline': {},
+                '@apply text-inverted-dark-secondary': {},
+                '@apply bg-inverted-secondary-surface': {},
+                /* hover */ '@apply hover:border-inverted-secondary-outline-hover': {},
+                '@apply hover:bg-inverted-secondary-surface-hover': {},
+                /* focus */ '@apply focus-visible:border-inverted-background-content': {},
+                // State
+                '&.sk-btn-disabled, &[aria-disabled="true"]': {
+                    '@apply disabled:bg-inverted-secondary-surface-disabled bg-inverted-secondary-surface-disabled disabled:border-transparent border-transparent !important': {}
+                }
+            }
         }
-      },
-      '&.sk-btn-lg': {
-        '@apply w-48 min-w-48 max-w-48': {},
-        'svg, .sk-icon': {
-          '@apply h-24 w-24': {}
+    };
+}
+function buttonTertiary() {
+    return {
+        '&-tertiary': {
+            '@apply text-dark-secondary': {},
+            '@apply bg-tertiary-surface': {},
+            /* hover */ '@apply hover:bg-tertiary-surface-hover': {},
+            // State
+            '&.sk-btn-disabled, &[aria-disabled="true"]': {
+                '@apply disabled:bg-tertiary-surface-disabled bg-tertiary-surface-disabled disabled:border-transparent border-transparent !important': {}
+            },
+            '&[data-inverted="true"]': {
+                '@apply text-inverted-dark-secondary': {},
+                '@apply bg-inverted-tertiary-surface': {},
+                /* hover */ '@apply hover:bg-inverted-tertiary-surface-hover': {},
+                '&.sk-btn-disabled, &[aria-disabled="true"]': {
+                    '@apply disabled:bg-inverted-tertiary-surface-disabled bg-inverted-tertiary-surface-disabled disabled:border-transparent border-transparent !important': {}
+                }
+            }
         }
-      },
-      '.sk-btn-has-icon': {
-        '&-left': {
-          '@apply m-0': {}
-        },
-        '&-right': {
-          '@apply m-0': {}
+    };
+}
+function buttonGhost() {
+    return {
+        '&-ghost': {
+            '@apply text-dark-secondary': {},
+            '@apply bg-transparent': {},
+            '@apply border-transparent': {},
+            /* hover */ '@apply hover:bg-transparent': {},
+            '@apply hover:border-transparent': {},
+            // State
+            '&.sk-btn-disabled, &[aria-disabled="true"]': {
+                '@apply disabled:bg-transparent bg-transparent disabled:border-transparent border-transparent !important': {}
+            },
+            '&[data-inverted="true"]': {
+                '@apply text-inverted-dark-secondary': {}
+            }
         }
-      }
-    }
-  })
-});
+    };
+}
+function buttonLink(colors) {
+    return {
+        '&-link': _object_spread({
+            '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},
+            '&.active': {
+                '@apply underline': {}
+            },
+            // dark colors
+            '@apply dark:text-neutral-200': {},
+            '@apply dark:active:text-neutral-500': {}
+        }, colors.reduce(function(styles, color) {
+            return _object_spread_props(_object_spread({}, styles), _define_property({}, '&[data-color="'.concat(color, '"]'), _define_property({}, "@apply text-".concat(color, "-text active:text-").concat(color, "-text"), {})));
+        }, {}))
+    };
+}
+export var Button = function(colors) {
+    return {
+        '.sk-btn': _object_spread_props(_object_spread({
+            '@apply box-border': {},
+            '@apply border-2 border-transparent': {},
+            '@apply cursor-pointer': {},
+            '@apply relative': {},
+            '@apply m-0': {},
+            '@apply px-24 py-8 gap-8': {},
+            '@apply inline-flex items-center justify-center flex-shrink-0 align-middle': {},
+            '@apply rounded-button': {},
+            transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',
+            '@apply	duration-75 ease-out': {},
+            '@apply outline-none appearance-none select-none whitespace-nowrap': {},
+            '@apply focus-visible:outline-none': {},
+            '@apply focus-visible:ring': {},
+            "&[data-rounded='true']": {
+                '@apply rounded-circular': {}
+            },
+            // sizing
+            '&-sm': {
+                '@apply text-label-small': {},
+                '@apply px-14 py-8 gap-6': {},
+                '@apply max-h-32 h-32': {},
+                '@apply rounded-button-sm': {},
+                'svg, .sk-icon': {
+                    '@apply h-16 w-16': {}
+                }
+            },
+            '&-md': {
+                '@apply text-label-medium': {},
+                '@apply px-18 py-8 gap-8': {},
+                '@apply max-h-40 h-40': {},
+                '@apply rounded-button-md': {},
+                'svg, .sk-icon': {
+                    '@apply h-18 w-18': {}
+                }
+            },
+            '&-lg': {
+                '@apply text-label-large': {},
+                '@apply px-24 py-8 gap-8': {},
+                '@apply max-h-48 h-48': {},
+                '@apply rounded-button-lg': {},
+                'svg, .sk-icon': {
+                    '@apply h-20 w-20': {}
+                }
+            },
+            // State
+            '&-disabled, &[aria-disabled="true"]': {
+                '@apply shadow-none disabled:shadow-none disabled:cursor-default cursor-default': {},
+                '@apply disabled:text-dark-disabled text-dark-disabled disabled:bg-primary-surface-disabled bg-primary-surface-disabled disabled:border-transparent border-transparent !important': {}
+            },
+            '&-loading': {
+                '&-spinner': {
+                    '@apply absolute mr-0': {},
+                    '&[data-hastext="true"]': {
+                        '@apply relative mr-2': {}
+                    }
+                },
+                '&-text': {
+                    '@apply opacity-0': {}
+                }
+            }
+        }, buttonPrimary(colors), buttonSecondary(), buttonTertiary(), buttonGhost(), buttonLink(colors)), {
+            '&[data-background="false"]:not(:hover)': {
+                '@apply bg-transparent': {}
+            },
+            '.sk-btn-has-icon': {
+                '&-left': {
+                    '@apply h-full flex items-center justify-center -ml-2': {},
+                    '.sk-icon': {
+                        '@apply bg-transparent': {},
+                        color: 'currentColor'
+                    }
+                },
+                '&-right': {
+                    '@apply h-full flex items-center justify-center -mr-2': {},
+                    '.sk-icon': {
+                        '@apply bg-transparent': {},
+                        color: 'currentColor'
+                    }
+                }
+            },
+            '&-lg .sk-btn-has-icon-left': {
+                '@apply -ml-4': {}
+            },
+            '&-lg .sk-btn-has-icon-right': {
+                '@apply -mr-4': {}
+            },
+            '&[data-icon=true]': {
+                '@apply p-0': {},
+                '.sk-icon': {
+                    '@apply bg-transparent': {},
+                    color: 'currentColor'
+                },
+                "&[data-rounded='true']": {
+                    '@apply rounded-full': {}
+                },
+                '&.sk-btn-sm': {
+                    '@apply w-32 min-w-32 max-w-32': {},
+                    'svg, .sk-icon': {
+                        '@apply h-20 w-20': {}
+                    }
+                },
+                '&.sk-btn-md': {
+                    '@apply w-40 min-w-40 max-w-40': {},
+                    'svg, .sk-icon': {
+                        '@apply h-20 w-20': {}
+                    }
+                },
+                '&.sk-btn-lg': {
+                    '@apply w-48 min-w-48 max-w-48': {},
+                    'svg, .sk-icon': {
+                        '@apply h-24 w-24': {}
+                    }
+                },
+                '.sk-btn-has-icon': {
+                    '&-left': {
+                        '@apply m-0': {}
+                    },
+                    '&-right': {
+                        '@apply m-0': {}
+                    }
+                }
+            }
+        })
+    };
+};
+
 //# sourceMappingURL=button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["buttonPrimary","colors","_extends","reduce","styles","color","buttonSecondary","buttonTertiary","buttonGhost","buttonLink","Button","transitionProperty"],"sources":["../../../src/components/button.ts"],"sourcesContent":["function buttonPrimary(colors: string[]) {\r\n  return {\r\n    '&-primary': {\r\n      '@apply text-light-primary': {},\r\n      /* hover */\r\n      '@apply hover:bg-primary-surface-hover': {},\r\n\r\n      ...colors.reduce(\r\n        (styles, color) => ({\r\n          ...styles,\r\n          [`&[data-color=\"${color}\"]`]: {\r\n            [`@apply bg-${color}-surface-primary  text-${color}-text-secondary`]: {},\r\n            // hover\r\n            [`@apply hover:bg-${color}-surface-primary-hover hover:text-light-primary`]: {},\r\n            // keyboard active\r\n            '&.active': {\r\n              [`@apply bg-${color}-surface-primary-hover`]: {},\r\n            },\r\n            [`@apply active:bg-${color}-surface-primary-hover`]: {},\r\n\r\n            '&[data-inverted=\"true\"]': {\r\n              '@apply text-inverted-light-primary': {},\r\n              [`@apply bg-inverted-${color}-surface-primary text-inverted-${color}-text-secondary`]: {},\r\n              // hover\r\n              [`@apply hover:bg-inverted-${color}-surface-primary-hover hover:text-inverted-light-primary`]: {},\r\n              // keyboard active\r\n              '&.active': {\r\n                [`@apply bg-inverted-${color}-surface-primary-hover`]: {},\r\n              },\r\n              [`@apply active:bg-inverted-${color}-surface-primary-hover`]: {},\r\n            },\r\n          },\r\n        }),\r\n        {}\r\n      ),\r\n\r\n      \"&[data-color='primary']\": {\r\n        '@apply bg-primary-surface': {},\r\n        '@apply hover:bg-primary-surface-hover': {},\r\n        '&.active': {\r\n          '@apply bg-primary-surface-hover': {},\r\n        },\r\n        [`@apply active:bg-primary-surface-hover`]: {},\r\n\r\n        '&[data-inverted=\"true\"]': {\r\n          '@apply text-inverted-light-primary': {},\r\n          '@apply bg-inverted-primary-surface': {},\r\n          '@apply hover:bg-inverted-primary-surface-hover': {},\r\n          '&.active': {\r\n            '@apply bg-inverted-primary-surface-hover': {},\r\n          },\r\n          [`@apply active:bg-inverted-primary-surface-hover`]: {},\r\n        },\r\n      },\r\n    },\r\n  };\r\n}\r\nfunction buttonSecondary() {\r\n  return {\r\n    '&-secondary': {\r\n      '@apply border-secondary-outline': {},\r\n      '@apply text-dark-secondary': {},\r\n      '@apply bg-secondary-surface': {},\r\n      /* hover */\r\n      '@apply hover:border-secondary-outline-hover': {},\r\n      '@apply hover:bg-secondary-surface-hover': {},\r\n      /* focus */\r\n      '@apply focus-visible:border-background-content': {},\r\n\r\n      // State\r\n      '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n        '@apply disabled:bg-secondary-surface-disabled bg-secondary-surface-disabled disabled:border-transparent border-transparent !important':\r\n          {},\r\n      },\r\n\r\n      '&[data-inverted=\"true\"]': {\r\n        '@apply border-inverted-secondary-outline': {},\r\n        '@apply text-inverted-dark-secondary': {},\r\n        '@apply bg-inverted-secondary-surface': {},\r\n        /* hover */\r\n        '@apply hover:border-inverted-secondary-outline-hover': {},\r\n        '@apply hover:bg-inverted-secondary-surface-hover': {},\r\n        /* focus */\r\n        '@apply focus-visible:border-inverted-background-content': {},\r\n\r\n        // State\r\n        '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n          '@apply disabled:bg-inverted-secondary-surface-disabled bg-inverted-secondary-surface-disabled disabled:border-transparent border-transparent !important':\r\n            {},\r\n        },\r\n      },\r\n    },\r\n  };\r\n}\r\n\r\nfunction buttonTertiary() {\r\n  return {\r\n    '&-tertiary': {\r\n      '@apply text-dark-secondary': {},\r\n      '@apply bg-tertiary-surface': {},\r\n      /* hover */\r\n      '@apply hover:bg-tertiary-surface-hover': {},\r\n\r\n      // State\r\n      '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n        '@apply disabled:bg-tertiary-surface-disabled bg-tertiary-surface-disabled disabled:border-transparent border-transparent !important':\r\n          {},\r\n      },\r\n\r\n      '&[data-inverted=\"true\"]': {\r\n        '@apply text-inverted-dark-secondary': {},\r\n        '@apply bg-inverted-tertiary-surface': {},\r\n        /* hover */\r\n        '@apply hover:bg-inverted-tertiary-surface-hover': {},\r\n        '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n          '@apply disabled:bg-inverted-tertiary-surface-disabled bg-inverted-tertiary-surface-disabled disabled:border-transparent border-transparent !important':\r\n            {},\r\n        },\r\n      },\r\n    },\r\n  };\r\n}\r\nfunction buttonGhost() {\r\n  return {\r\n    '&-ghost': {\r\n      '@apply text-dark-secondary': {},\r\n      '@apply bg-transparent': {},\r\n      '@apply border-transparent': {},\r\n      /* hover */\r\n      '@apply hover:bg-transparent': {},\r\n      '@apply hover:border-transparent': {},\r\n\r\n      // State\r\n      '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n        '@apply disabled:bg-transparent bg-transparent disabled:border-transparent border-transparent !important': {},\r\n      },\r\n\r\n      '&[data-inverted=\"true\"]': {\r\n        '@apply text-inverted-dark-secondary': {},\r\n      },\r\n    },\r\n  };\r\n}\r\n\r\nfunction buttonLink(colors: string[]) {\r\n  return {\r\n    '&-link': {\r\n      '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},\r\n      '&.active': {\r\n        '@apply underline': {},\r\n      },\r\n      // dark colors\r\n      '@apply dark:text-neutral-200': {},\r\n      '@apply dark:active:text-neutral-500': {},\r\n\r\n      ...colors.reduce(\r\n        (styles, color) => ({\r\n          ...styles,\r\n          [`&[data-color=\"${color}\"]`]: {\r\n            [`@apply text-${color}-text active:text-${color}-text`]: {},\r\n            // dark colors\r\n          },\r\n        }),\r\n        {}\r\n      ),\r\n    },\r\n  };\r\n}\r\n\r\nexport const Button = (colors: string[]) => ({\r\n  '.sk-btn': {\r\n    '@apply box-border': {},\r\n    '@apply border-2 border-transparent': {},\r\n    '@apply cursor-pointer': {},\r\n    '@apply relative': {},\r\n    '@apply m-0': {},\r\n    '@apply px-24 py-8 gap-8': {},\r\n    '@apply inline-flex items-center justify-center flex-shrink-0 align-middle': {},\r\n    '@apply rounded-button': {},\r\n    transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',\r\n    '@apply\tduration-75 ease-out': {},\r\n    '@apply outline-none appearance-none select-none whitespace-nowrap': {},\r\n    '@apply focus-visible:outline-none': {},\r\n    '@apply focus-visible:ring': {},\r\n\r\n    \"&[data-rounded='true']\": {\r\n      '@apply rounded-circular': {},\r\n    },\r\n\r\n    // sizing\r\n    '&-sm': {\r\n      '@apply text-label-small': {},\r\n      '@apply px-14 py-8 gap-6': {},\r\n      '@apply max-h-32 h-32': {},\r\n      '@apply rounded-button-sm': {},\r\n      'svg, .sk-icon': {\r\n        '@apply h-16 w-16': {},\r\n      },\r\n    },\r\n\r\n    '&-md': {\r\n      '@apply text-label-medium': {},\r\n      '@apply px-18 py-8 gap-8': {},\r\n      '@apply max-h-40 h-40': {},\r\n      '@apply rounded-button-md': {},\r\n      'svg, .sk-icon': {\r\n        '@apply h-18 w-18': {},\r\n      },\r\n    },\r\n\r\n    '&-lg': {\r\n      '@apply text-label-large': {},\r\n      '@apply px-24 py-8 gap-8': {},\r\n      '@apply max-h-48 h-48': {},\r\n      '@apply rounded-button-lg': {},\r\n      'svg, .sk-icon': {\r\n        '@apply h-20 w-20': {},\r\n      },\r\n    },\r\n\r\n    // State\r\n    '&-disabled, &[aria-disabled=\"true\"]': {\r\n      '@apply shadow-none disabled:shadow-none disabled:cursor-default cursor-default': {},\r\n      '@apply disabled:text-dark-disabled text-dark-disabled disabled:bg-primary-surface-disabled bg-primary-surface-disabled disabled:border-transparent border-transparent !important':\r\n        {},\r\n    },\r\n\r\n    '&-loading': {\r\n      '&-spinner': {\r\n        '@apply absolute mr-0': {},\r\n        '&[data-hastext=\"true\"]': {\r\n          '@apply relative mr-2': {},\r\n        },\r\n      },\r\n      '&-text': {\r\n        '@apply opacity-0': {},\r\n      },\r\n    },\r\n    // variants\r\n    ...buttonPrimary(colors),\r\n    ...buttonSecondary(),\r\n    ...buttonTertiary(),\r\n    ...buttonGhost(),\r\n    ...buttonLink(colors),\r\n\r\n    '&[data-background=\"false\"]:not(:hover)': {\r\n      '@apply bg-transparent': {},\r\n    },\r\n    '.sk-btn-has-icon': {\r\n      '&-left': {\r\n        '@apply h-full flex items-center justify-center -ml-2': {},\r\n        '.sk-icon': {\r\n          '@apply bg-transparent': {},\r\n          color: 'currentColor',\r\n        },\r\n      },\r\n      '&-right': {\r\n        '@apply h-full flex items-center justify-center -mr-2': {},\r\n        '.sk-icon': {\r\n          '@apply bg-transparent': {},\r\n          color: 'currentColor',\r\n        },\r\n      },\r\n    },\r\n    '&-lg .sk-btn-has-icon-left': {\r\n      '@apply -ml-4': {},\r\n    },\r\n    '&-lg .sk-btn-has-icon-right': {\r\n      '@apply -mr-4': {},\r\n    },\r\n    '&[data-icon=true]': {\r\n      '@apply p-0': {},\r\n\r\n      '.sk-icon': {\r\n        '@apply bg-transparent': {},\r\n        color: 'currentColor',\r\n      },\r\n\r\n      \"&[data-rounded='true']\": {\r\n        '@apply rounded-full': {},\r\n      },\r\n\r\n      '&.sk-btn-sm': {\r\n        '@apply w-32 min-w-32 max-w-32': {},\r\n        'svg, .sk-icon': {\r\n          '@apply h-20 w-20': {},\r\n        },\r\n      },\r\n\r\n      '&.sk-btn-md': {\r\n        '@apply w-40 min-w-40 max-w-40': {},\r\n\r\n        'svg, .sk-icon': {\r\n          '@apply h-20 w-20': {},\r\n        },\r\n      },\r\n\r\n      '&.sk-btn-lg': {\r\n        '@apply w-48 min-w-48 max-w-48': {},\r\n\r\n        'svg, .sk-icon': {\r\n          '@apply h-24 w-24': {},\r\n        },\r\n      },\r\n      '.sk-btn-has-icon': {\r\n        '&-left': {\r\n          '@apply m-0': {},\r\n        },\r\n        '&-right': {\r\n          '@apply m-0': {},\r\n        },\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../src/components/button.ts"],"sourcesContent":["function buttonPrimary(colors: string[]) {\r\n  return {\r\n    '&-primary': {\r\n      '@apply text-light-primary': {},\r\n      /* hover */\r\n      '@apply hover:bg-primary-surface-hover': {},\r\n\r\n      ...colors.reduce(\r\n        (styles, color) => ({\r\n          ...styles,\r\n          [`&[data-color=\"${color}\"]`]: {\r\n            [`@apply bg-${color}-surface-primary  text-${color}-text-secondary`]: {},\r\n            // hover\r\n            [`@apply hover:bg-${color}-surface-primary-hover hover:text-light-primary`]: {},\r\n            // keyboard active\r\n            '&.active': {\r\n              [`@apply bg-${color}-surface-primary-hover`]: {},\r\n            },\r\n            [`@apply active:bg-${color}-surface-primary-hover`]: {},\r\n\r\n            '&[data-inverted=\"true\"]': {\r\n              '@apply text-inverted-light-primary': {},\r\n              [`@apply bg-inverted-${color}-surface-primary text-inverted-${color}-text-secondary`]: {},\r\n              // hover\r\n              [`@apply hover:bg-inverted-${color}-surface-primary-hover hover:text-inverted-light-primary`]: {},\r\n              // keyboard active\r\n              '&.active': {\r\n                [`@apply bg-inverted-${color}-surface-primary-hover`]: {},\r\n              },\r\n              [`@apply active:bg-inverted-${color}-surface-primary-hover`]: {},\r\n            },\r\n          },\r\n        }),\r\n        {}\r\n      ),\r\n\r\n      \"&[data-color='primary']\": {\r\n        '@apply bg-primary-surface': {},\r\n        '@apply hover:bg-primary-surface-hover': {},\r\n        '&.active': {\r\n          '@apply bg-primary-surface-hover': {},\r\n        },\r\n        [`@apply active:bg-primary-surface-hover`]: {},\r\n\r\n        '&[data-inverted=\"true\"]': {\r\n          '@apply text-inverted-light-primary': {},\r\n          '@apply bg-inverted-primary-surface': {},\r\n          '@apply hover:bg-inverted-primary-surface-hover': {},\r\n          '&.active': {\r\n            '@apply bg-inverted-primary-surface-hover': {},\r\n          },\r\n          [`@apply active:bg-inverted-primary-surface-hover`]: {},\r\n        },\r\n      },\r\n    },\r\n  };\r\n}\r\nfunction buttonSecondary() {\r\n  return {\r\n    '&-secondary': {\r\n      '@apply border-secondary-outline': {},\r\n      '@apply text-dark-secondary': {},\r\n      '@apply bg-secondary-surface': {},\r\n      /* hover */\r\n      '@apply hover:border-secondary-outline-hover': {},\r\n      '@apply hover:bg-secondary-surface-hover': {},\r\n      /* focus */\r\n      '@apply focus-visible:border-background-content': {},\r\n\r\n      // State\r\n      '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n        '@apply disabled:bg-secondary-surface-disabled bg-secondary-surface-disabled disabled:border-transparent border-transparent !important':\r\n          {},\r\n      },\r\n\r\n      '&[data-inverted=\"true\"]': {\r\n        '@apply border-inverted-secondary-outline': {},\r\n        '@apply text-inverted-dark-secondary': {},\r\n        '@apply bg-inverted-secondary-surface': {},\r\n        /* hover */\r\n        '@apply hover:border-inverted-secondary-outline-hover': {},\r\n        '@apply hover:bg-inverted-secondary-surface-hover': {},\r\n        /* focus */\r\n        '@apply focus-visible:border-inverted-background-content': {},\r\n\r\n        // State\r\n        '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n          '@apply disabled:bg-inverted-secondary-surface-disabled bg-inverted-secondary-surface-disabled disabled:border-transparent border-transparent !important':\r\n            {},\r\n        },\r\n      },\r\n    },\r\n  };\r\n}\r\n\r\nfunction buttonTertiary() {\r\n  return {\r\n    '&-tertiary': {\r\n      '@apply text-dark-secondary': {},\r\n      '@apply bg-tertiary-surface': {},\r\n      /* hover */\r\n      '@apply hover:bg-tertiary-surface-hover': {},\r\n\r\n      // State\r\n      '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n        '@apply disabled:bg-tertiary-surface-disabled bg-tertiary-surface-disabled disabled:border-transparent border-transparent !important':\r\n          {},\r\n      },\r\n\r\n      '&[data-inverted=\"true\"]': {\r\n        '@apply text-inverted-dark-secondary': {},\r\n        '@apply bg-inverted-tertiary-surface': {},\r\n        /* hover */\r\n        '@apply hover:bg-inverted-tertiary-surface-hover': {},\r\n        '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n          '@apply disabled:bg-inverted-tertiary-surface-disabled bg-inverted-tertiary-surface-disabled disabled:border-transparent border-transparent !important':\r\n            {},\r\n        },\r\n      },\r\n    },\r\n  };\r\n}\r\nfunction buttonGhost() {\r\n  return {\r\n    '&-ghost': {\r\n      '@apply text-dark-secondary': {},\r\n      '@apply bg-transparent': {},\r\n      '@apply border-transparent': {},\r\n      /* hover */\r\n      '@apply hover:bg-transparent': {},\r\n      '@apply hover:border-transparent': {},\r\n\r\n      // State\r\n      '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n        '@apply disabled:bg-transparent bg-transparent disabled:border-transparent border-transparent !important': {},\r\n      },\r\n\r\n      '&[data-inverted=\"true\"]': {\r\n        '@apply text-inverted-dark-secondary': {},\r\n      },\r\n    },\r\n  };\r\n}\r\n\r\nfunction buttonLink(colors: string[]) {\r\n  return {\r\n    '&-link': {\r\n      '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},\r\n      '&.active': {\r\n        '@apply underline': {},\r\n      },\r\n      // dark colors\r\n      '@apply dark:text-neutral-200': {},\r\n      '@apply dark:active:text-neutral-500': {},\r\n\r\n      ...colors.reduce(\r\n        (styles, color) => ({\r\n          ...styles,\r\n          [`&[data-color=\"${color}\"]`]: {\r\n            [`@apply text-${color}-text active:text-${color}-text`]: {},\r\n            // dark colors\r\n          },\r\n        }),\r\n        {}\r\n      ),\r\n    },\r\n  };\r\n}\r\n\r\nexport const Button = (colors: string[]) => ({\r\n  '.sk-btn': {\r\n    '@apply box-border': {},\r\n    '@apply border-2 border-transparent': {},\r\n    '@apply cursor-pointer': {},\r\n    '@apply relative': {},\r\n    '@apply m-0': {},\r\n    '@apply px-24 py-8 gap-8': {},\r\n    '@apply inline-flex items-center justify-center flex-shrink-0 align-middle': {},\r\n    '@apply rounded-button': {},\r\n    transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',\r\n    '@apply\tduration-75 ease-out': {},\r\n    '@apply outline-none appearance-none select-none whitespace-nowrap': {},\r\n    '@apply focus-visible:outline-none': {},\r\n    '@apply focus-visible:ring': {},\r\n\r\n    \"&[data-rounded='true']\": {\r\n      '@apply rounded-circular': {},\r\n    },\r\n\r\n    // sizing\r\n    '&-sm': {\r\n      '@apply text-label-small': {},\r\n      '@apply px-14 py-8 gap-6': {},\r\n      '@apply max-h-32 h-32': {},\r\n      '@apply rounded-button-sm': {},\r\n      'svg, .sk-icon': {\r\n        '@apply h-16 w-16': {},\r\n      },\r\n    },\r\n\r\n    '&-md': {\r\n      '@apply text-label-medium': {},\r\n      '@apply px-18 py-8 gap-8': {},\r\n      '@apply max-h-40 h-40': {},\r\n      '@apply rounded-button-md': {},\r\n      'svg, .sk-icon': {\r\n        '@apply h-18 w-18': {},\r\n      },\r\n    },\r\n\r\n    '&-lg': {\r\n      '@apply text-label-large': {},\r\n      '@apply px-24 py-8 gap-8': {},\r\n      '@apply max-h-48 h-48': {},\r\n      '@apply rounded-button-lg': {},\r\n      'svg, .sk-icon': {\r\n        '@apply h-20 w-20': {},\r\n      },\r\n    },\r\n\r\n    // State\r\n    '&-disabled, &[aria-disabled=\"true\"]': {\r\n      '@apply shadow-none disabled:shadow-none disabled:cursor-default cursor-default': {},\r\n      '@apply disabled:text-dark-disabled text-dark-disabled disabled:bg-primary-surface-disabled bg-primary-surface-disabled disabled:border-transparent border-transparent !important':\r\n        {},\r\n    },\r\n\r\n    '&-loading': {\r\n      '&-spinner': {\r\n        '@apply absolute mr-0': {},\r\n        '&[data-hastext=\"true\"]': {\r\n          '@apply relative mr-2': {},\r\n        },\r\n      },\r\n      '&-text': {\r\n        '@apply opacity-0': {},\r\n      },\r\n    },\r\n    // variants\r\n    ...buttonPrimary(colors),\r\n    ...buttonSecondary(),\r\n    ...buttonTertiary(),\r\n    ...buttonGhost(),\r\n    ...buttonLink(colors),\r\n\r\n    '&[data-background=\"false\"]:not(:hover)': {\r\n      '@apply bg-transparent': {},\r\n    },\r\n    '.sk-btn-has-icon': {\r\n      '&-left': {\r\n        '@apply h-full flex items-center justify-center -ml-2': {},\r\n        '.sk-icon': {\r\n          '@apply bg-transparent': {},\r\n          color: 'currentColor',\r\n        },\r\n      },\r\n      '&-right': {\r\n        '@apply h-full flex items-center justify-center -mr-2': {},\r\n        '.sk-icon': {\r\n          '@apply bg-transparent': {},\r\n          color: 'currentColor',\r\n        },\r\n      },\r\n    },\r\n    '&-lg .sk-btn-has-icon-left': {\r\n      '@apply -ml-4': {},\r\n    },\r\n    '&-lg .sk-btn-has-icon-right': {\r\n      '@apply -mr-4': {},\r\n    },\r\n    '&[data-icon=true]': {\r\n      '@apply p-0': {},\r\n\r\n      '.sk-icon': {\r\n        '@apply bg-transparent': {},\r\n        color: 'currentColor',\r\n      },\r\n\r\n      \"&[data-rounded='true']\": {\r\n        '@apply rounded-full': {},\r\n      },\r\n\r\n      '&.sk-btn-sm': {\r\n        '@apply w-32 min-w-32 max-w-32': {},\r\n        'svg, .sk-icon': {\r\n          '@apply h-20 w-20': {},\r\n        },\r\n      },\r\n\r\n      '&.sk-btn-md': {\r\n        '@apply w-40 min-w-40 max-w-40': {},\r\n\r\n        'svg, .sk-icon': {\r\n          '@apply h-20 w-20': {},\r\n        },\r\n      },\r\n\r\n      '&.sk-btn-lg': {\r\n        '@apply w-48 min-w-48 max-w-48': {},\r\n\r\n        'svg, .sk-icon': {\r\n          '@apply h-24 w-24': {},\r\n        },\r\n      },\r\n      '.sk-btn-has-icon': {\r\n        '&-left': {\r\n          '@apply m-0': {},\r\n        },\r\n        '&-right': {\r\n          '@apply m-0': {},\r\n        },\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"names":["buttonPrimary","colors","reduce","styles","color","buttonSecondary","buttonTertiary","buttonGhost","buttonLink","Button","transitionProperty"],"mappings":"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"}