@sk-web-gui/core 0.1.74 → 0.1.76

package/dist/esm/components/button.js

@@ -0,0 +1,337 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function buttonSolid(colors) {
+  return {
+    '&-solid': _extends({
+      //"@apply text-": {},
+      '@apply font-semibold border border-gray-stroke': {},
+      '@apply text-body bg-white': {},
+      /* hover */
+      '@apply hover:text-white hover:bg-hover hover:border-primary-active': {},
+      /* keyboard active */
+      '&.active': {
+        '@apply text-white bg-hover border-primary-active': {},
+        /* dark */
+        '@apply dark:border-hover dark:bg-neutral-600': {}
+      },
+      /* focus */
+      '@apply focus-visible:z-base': {},
+      '@apply focus-visible:border-primary': {},
+      '@apply focus-visible:ring-4 focus-visible:ring-black': {},
+      /* active */
+      '@apply active:bg-hover active:text-white': {},
+      /* dark mode */
+      '@apply dark:border-neutral-600': {},
+      '@apply dark:text-neutral-100 dark:bg-neutral-700': {},
+      /* dark hover */
+      '@apply dark:hover:border-hover dark:hover:bg-neutral-600': {},
+      /* dark focus */
+      '@apply dark:focus-visible:border-primary-500': {},
+      /* dark active */
+      '@apply dark:active:bg-neutral-900 dark:active:border-neutral-600': {}
+    }, colors.reduce((styles, color) => _extends({}, styles, {
+      ["&[data-color=\"" + color + "\"]"]: {
+        //[`@apply border-${color}`]: {},
+        ["@apply text-white bg-" + color]: {},
+        // hover
+        ["@apply hover:text-white hover:bg-" + color + "-active"]: {},
+        // keyboard active
+        '&.active': {
+          ["@apply text-white bg-" + color + "-active"]: {}
+        },
+        ["@apply active:text-white active:bg-" + color + "-active"]: {},
+        ["@apply focus-visible:ring-4 focus-visible:ring-black"]: {}
+
+        // focus
+        //[`@apply focus-visible:bg-${color}-700`]: {},
+        //[`@apply focus-visible:border-${color}-500`]: {},
+        //[`@apply focus-visible:ring-${color}-500`]: {},
+        // active
+        //[`@apply active:bg-${color}-600`]: {},
+        // dark mode
+        //[`@apply dark:border-${color}-500`]: {},
+        //[`@apply dark:bg-${color}-600`]: {},
+        // dark hover
+        //[`@apply dark:hover:border-${color}-400 dark:hover:bg-${color}-500`]: {},
+        // dark focus
+        //[`@apply dark:focus-visible:border-${color}-500`]: {},
+        //[`@apply dark:focus-visible:ring-${color}-500`]: {},
+        // dark active
+        //[`@apply dark:active:bg-${color}-800 dark:active:border-${color}-600`]: {},
+      }
+    }), {}), {
+      "&[data-color='primary']": {
+        '@apply border-primary hover:border-primary-active': {},
+        '&.active': {
+          '@apply border-primary-active': {}
+        }
+      },
+      '&.btn': {
+        '&-disabled': {
+          '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},
+          '&.active': {
+            '@apply border-gray-stroke': {}
+          }
+        }
+      }
+    })
+  };
+}
+function buttonOutline(colors) {
+  return {
+    '&-outline': _extends({
+      '@apply font-semibold border border-gray-stroke': {},
+      '@apply text-body bg-transparent': {},
+      /* hover */
+      '@apply hover:text-white hover:bg-primary-active hover:border-primary-active': {},
+      /* keyboard active */
+      '&.active': {
+        '@apply text-white bg-primary-active border-primary-active': {},
+        /* dark keyboard active */
+        '@apply dark:border-neutral-300 dark:bg-neutral-700': {}
+      },
+      /* focus */
+      '@apply focus-visible:z-base': {},
+      '@apply focus-visible:border-primary-500': {},
+      '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},
+      /* active */
+      '@apply active:bg-neutral-200': {},
+      /* dark mode */
+      '@apply dark:border-neutral-600': {},
+      '@apply dark:text-neutral-100 dark:bg-transparent': {},
+      /* dark hover */
+      '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},
+      /* dark focus */
+      '@apply dark:focus-visible:border-primary-500': {},
+      /* dark active */
+      '@apply dark:active:bg-neutral-600 dark:active:border-neutral-600': {}
+    }, colors.reduce((styles, color) => _extends({}, styles, {
+      ["&[data-color=\"" + color + "\"]"]: {
+        ["@apply border-current"]: {},
+        ["@apply text-" + color + "-600 bg-transparent"]: {},
+        /* hover */
+        ["@apply hover:text-white hover:bg-" + color + "-active hover:border-" + color + "-active"]: {},
+        /* keyboard active */
+        '&.active': {
+          ["@apply text-white bg-" + color + "-active border-" + color + "-active"]: {},
+          /* dark keyboard active */
+          ["@apply dark:bg-" + color + "-200"]: {},
+          ["@apply dark:bg-opacity-15"]: {}
+        },
+        /* focus */
+        ["@apply focus-visible:border-" + color + "-500"]: {},
+        ["@apply focus-visible:ring-" + color + "-500"]: {},
+        /* active */
+        ["@apply active:bg-" + color + "-100"]: {},
+        /* dark mode */
+        ["@apply dark:border-" + color + "-200"]: {},
+        ["@apply dark:text-" + color + "-200 dark:bg-transparent"]: {},
+        ["@apply dark:border-" + color + "-300"]: {},
+        /* dark hover */
+        ["@apply dark:hover:bg-" + color + "-200"]: {},
+        ["@apply dark:hover:bg-opacity-15"]: {},
+        /* dark focus */
+        ["@apply dark:focus-visible:border-" + color + "-500"]: {},
+        ["@apply dark:focus-visible:ring-" + color + "-500"]: {},
+        /* dark active */
+        ["@apply dark:active:bg-" + color + "-200"]: {},
+        ["@apply dark:active:bg-opacity-25"]: {}
+      }
+    }), {}), {
+      '&.btn': {
+        '&-disabled': {
+          '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},
+          '&.active': {
+            '@apply border-gray-stroke': {}
+          }
+        }
+      }
+    })
+  };
+}
+function buttonGhost(colors) {
+  return {
+    '&-ghost': _extends({
+      '@apply text-body bg-transparent': {},
+      '@apply hover:bg-neutral-100': {},
+      /* focus */
+      '@apply focus-visible:z-base': {},
+      '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},
+      /* active */
+      '@apply active:bg-neutral-200': {},
+      /* dark mode */
+      '@apply dark:text-neutral-100 dark:bg-transparent': {},
+      /* dark hover */
+      '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},
+      /* dark active */
+      '@apply dark:active:bg-neutral-600 dark:active:border-neutral-400': {}
+    }, colors.reduce((styles, color) => _extends({}, styles, {
+      ["&[data-color=\"" + color + "\"]"]: {
+        ["@apply text-" + color + "-600"]: {},
+        ["@apply hover:bg-" + color + "-50"]: {},
+        /* focus */
+        ["@apply focus-visible:ring-" + color + "-500"]: {},
+        ["@apply active:bg-" + color + "-100"]: {},
+        // dark colors
+        ["@apply dark:text-" + color + "-200 dark:bg-transparent"]: {},
+        ["@apply dark:border-" + color + "-300 dark:hover:bg-" + color + "-200"]: {},
+        ["@apply dark:hover:bg-opacity-15"]: {},
+        ["@apply dark:active:bg-" + color + "-200"]: {},
+        ["@apply dark:active:bg-opacity-25"]: {}
+      }
+    }), {}))
+  };
+}
+function buttonLight(colors) {
+  return {
+    '&-light': _extends({
+      '@apply shadow-sm': {},
+      '@apply border border-transparent': {},
+      '@apply text-body bg-neutral-100': {},
+      /* hover */
+      '@apply hover:bg-neutral-200': {},
+      /* focus */
+      '@apply focus-visible:z-base': {},
+      '@apply focus-visible:border-primary-500': {},
+      '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},
+      /* active */
+      '@apply active:bg-neutral-300': {},
+      /* dark mode */
+      '@apply dark:border-transparent': {},
+      '@apply dark:text-neutral-100 dark:bg-neutral-700': {},
+      /* dark hover */
+      '@apply dark:hover:bg-neutral-600': {},
+      /* dark focus */
+      '@apply dark:focus-visible:border-primary-500': {},
+      /* dark active */
+      '@apply dark:active:bg-neutral-600': {}
+    }, colors.reduce((styles, color) => _extends({}, styles, {
+      ["&[data-color=\"" + color + "\"]"]: {
+        ["@apply text-" + color + "-600 bg-" + color + "-50"]: {},
+        /* hover */
+        ["@apply hover:bg-" + color + "-100"]: {},
+        /* focus */
+        ["@apply focus-visible:border-" + color + "-500"]: {},
+        ["@apply focus-visible:ring-" + color + "-500"]: {},
+        /* active */
+        ["@apply active:bg-" + color + "-200"]: {},
+        /* dark mode */
+        ["@apply dark:text-" + color + "-300 dark:bg-" + color + "-500"]: {},
+        ["@apply dark:bg-opacity-15"]: {},
+        /* dark hover */
+        ["@apply dark:hover:bg-" + color + "-500"]: {},
+        ["@apply dark:hover:bg-opacity-25"]: {},
+        /* dark focus */
+        ["@apply dark:focus-visible:border-" + color + "-500"]: {},
+        ["@apply dark:focus-visible:ring-" + color + "-500"]: {},
+        /* dark active */
+        ["@apply dark:active:bg-" + color + "-500"]: {},
+        ["@apply dark:active:bg-opacity-30"]: {}
+      }
+    }), {}))
+  };
+}
+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': {}
+      },
+      '@apply focus-visible:z-base focus-visible:ring-4 focus-visible:ring-primary-500': {},
+      // 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 + "-600 active:text-" + color + "-700"]: {},
+        ["@apply focus-visible:ring-" + color + "-500"]: {},
+        // dark colors
+        ["@apply dark:text-" + color + "-200"]: {},
+        ["@apply dark:active:text-" + color + "-500"]: {}
+      }
+    }), {}))
+  };
+}
+module.exports = Button = colors => ({
+  '.btn': _extends({
+    '@apply relative': {},
+    '@apply m-0': {},
+    '@apply px-[3.2rem]': {},
+    '@apply py-0': {},
+    '@apply rounded-[0.4rem] inline-flex items-center justify-center flex-shrink-0 align-middle': {},
+    '@apply font-medium leading-tight': {},
+    transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',
+    '@apply	duration-75 ease-out': {},
+    '@apply outline-none appearance-none cursor-base select-none whitespace-nowrap': {},
+    '@apply focus-visible:outline-none': {},
+    "&[data-rounded='true']": {
+      borderRadius: '3.2rem'
+    },
+    // sizing
+    '&-sm': {
+      '@apply text-xs': {},
+      minHeight: '4rem',
+      maxHeight: '4rem'
+    },
+    '&-md': {
+      '@apply text-sm': {},
+      minHeight: '4.4rem',
+      maxHeight: '4.4rem'
+    },
+    '&-lg': {
+      '@apply text-base': {},
+      minHeight: '4.8rem',
+      maxHeight: '4.8rem'
+    },
+    '&-fit-content': {
+      '@apply p-0': {},
+      fontSize: 'inherit'
+    },
+    // State
+
+    '&-disabled': {
+      '@apply disabled:shadow-none disabled:cursor-not-allowed': {},
+      '@apply disabled:text-gray disabled:bg-gray-light !important': {}
+    },
+    '.MuiSvgIcon-root': {
+      fontSize: '1.5em',
+      width: '1em',
+      height: '1em'
+    }
+  }, buttonSolid(colors), buttonOutline(colors), buttonLink(colors)),
+  '.btn-has-icon': {
+    '&-left .MuiSvgIcon-root': {
+      '@apply mr-sm': {}
+    },
+    '&-right .MuiSvgIcon-root': {
+      '@apply ml-sm': {}
+    }
+  },
+  '[data-icon=true]': {
+    '@apply p-0': {},
+    "&[data-rounded='true']": {
+      '@apply rounded-full': {}
+    },
+    '&.btn-sm': {
+      minWidth: '4rem',
+      maxWidth: '4rem'
+    },
+    '&.btn-md': {
+      minWidth: '4.4rem',
+      maxWidth: '4.4rem'
+    },
+    '&.btn-lg': {
+      minWidth: '4.8rem',
+      maxWidth: '4.8rem'
+    },
+    '.btn-has-icon': {
+      '&-left .MuiSvgIcon-root': {
+        '@apply mr-0': {}
+      },
+      '&-right .MuiSvgIcon-root': {
+        '@apply ml-0': {}
+      }
+    }
+  }
+});
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":["buttonSolid","colors","_extends","reduce","styles","color","buttonOutline","buttonGhost","buttonLight","buttonLink","module","exports","Button","transitionProperty","borderRadius","minHeight","maxHeight","fontSize","width","height","minWidth","maxWidth"],"sources":["../../../src/components/button.js"],"sourcesContent":["function buttonSolid(colors) {\r\n  return {\r\n    '&-solid': {\r\n      //\"@apply text-\": {},\r\n      '@apply font-semibold border border-gray-stroke': {},\r\n      '@apply text-body bg-white': {},\r\n      /* hover */\r\n      '@apply hover:text-white hover:bg-hover hover:border-primary-active': {},\r\n      /* keyboard active */\r\n      '&.active': {\r\n        '@apply text-white bg-hover border-primary-active': {},\r\n        /* dark */\r\n        '@apply dark:border-hover dark:bg-neutral-600': {},\r\n      },\r\n      /* focus */\r\n      '@apply focus-visible:z-base': {},\r\n      '@apply focus-visible:border-primary': {},\r\n      '@apply focus-visible:ring-4 focus-visible:ring-black': {},\r\n      /* active */\r\n      '@apply active:bg-hover active:text-white': {},\r\n\r\n      /* dark mode */\r\n      '@apply dark:border-neutral-600': {},\r\n      '@apply dark:text-neutral-100 dark:bg-neutral-700': {},\r\n      /* dark hover */\r\n      '@apply dark:hover:border-hover dark:hover:bg-neutral-600': {},\r\n      /* dark focus */\r\n      '@apply dark:focus-visible:border-primary-500': {},\r\n      /* dark active */\r\n      '@apply dark:active:bg-neutral-900 dark:active:border-neutral-600': {},\r\n\r\n      ...colors.reduce(\r\n        (styles, color) => ({\r\n          ...styles,\r\n          [`&[data-color=\"${color}\"]`]: {\r\n            //[`@apply border-${color}`]: {},\r\n            [`@apply text-white bg-${color}`]: {},\r\n            // hover\r\n            [`@apply hover:text-white hover:bg-${color}-active`]: {},\r\n            // keyboard active\r\n            '&.active': {\r\n              [`@apply text-white bg-${color}-active`]: {},\r\n            },\r\n\r\n            [`@apply active:text-white active:bg-${color}-active`]: {},\r\n            [`@apply focus-visible:ring-4 focus-visible:ring-black`]: {},\r\n\r\n            // focus\r\n            //[`@apply focus-visible:bg-${color}-700`]: {},\r\n            //[`@apply focus-visible:border-${color}-500`]: {},\r\n            //[`@apply focus-visible:ring-${color}-500`]: {},\r\n            // active\r\n            //[`@apply active:bg-${color}-600`]: {},\r\n            // dark mode\r\n            //[`@apply dark:border-${color}-500`]: {},\r\n            //[`@apply dark:bg-${color}-600`]: {},\r\n            // dark hover\r\n            //[`@apply dark:hover:border-${color}-400 dark:hover:bg-${color}-500`]: {},\r\n            // dark focus\r\n            //[`@apply dark:focus-visible:border-${color}-500`]: {},\r\n            //[`@apply dark:focus-visible:ring-${color}-500`]: {},\r\n            // dark active\r\n            //[`@apply dark:active:bg-${color}-800 dark:active:border-${color}-600`]: {},\r\n          },\r\n        }),\r\n        {}\r\n      ),\r\n\r\n      \"&[data-color='primary']\": {\r\n        '@apply border-primary hover:border-primary-active': {},\r\n        '&.active': {\r\n          '@apply border-primary-active': {},\r\n        },\r\n      },\r\n\r\n      '&.btn': {\r\n        '&-disabled': {\r\n          '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},\r\n          '&.active': {\r\n            '@apply border-gray-stroke': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n  };\r\n}\r\n\r\nfunction buttonOutline(colors) {\r\n  return {\r\n    '&-outline': {\r\n      '@apply font-semibold border border-gray-stroke': {},\r\n      '@apply text-body bg-transparent': {},\r\n      /* hover */\r\n      '@apply hover:text-white hover:bg-primary-active hover:border-primary-active': {},\r\n      /* keyboard active */\r\n      '&.active': {\r\n        '@apply text-white bg-primary-active border-primary-active': {},\r\n        /* dark keyboard active */\r\n        '@apply dark:border-neutral-300 dark:bg-neutral-700': {},\r\n      },\r\n      /* focus */\r\n      '@apply focus-visible:z-base': {},\r\n      '@apply focus-visible:border-primary-500': {},\r\n      '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n      /* active */\r\n      '@apply active:bg-neutral-200': {},\r\n      /* dark mode */\r\n      '@apply dark:border-neutral-600': {},\r\n      '@apply dark:text-neutral-100 dark:bg-transparent': {},\r\n      /* dark hover */\r\n      '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},\r\n      /* dark focus */\r\n      '@apply dark:focus-visible:border-primary-500': {},\r\n      /* dark active */\r\n      '@apply dark:active:bg-neutral-600 dark:active:border-neutral-600': {},\r\n\r\n      ...colors.reduce(\r\n        (styles, color) => ({\r\n          ...styles,\r\n          [`&[data-color=\"${color}\"]`]: {\r\n            [`@apply border-current`]: {},\r\n            [`@apply text-${color}-600 bg-transparent`]: {},\r\n            /* hover */\r\n            [`@apply hover:text-white hover:bg-${color}-active hover:border-${color}-active`]: {},\r\n            /* keyboard active */\r\n            '&.active': {\r\n              [`@apply text-white bg-${color}-active border-${color}-active`]: {},\r\n\r\n              /* dark keyboard active */\r\n              [`@apply dark:bg-${color}-200`]: {},\r\n              [`@apply dark:bg-opacity-15`]: {},\r\n            },\r\n            /* focus */\r\n            [`@apply focus-visible:border-${color}-500`]: {},\r\n            [`@apply focus-visible:ring-${color}-500`]: {},\r\n            /* active */\r\n            [`@apply active:bg-${color}-100`]: {},\r\n            /* dark mode */\r\n            [`@apply dark:border-${color}-200`]: {},\r\n            [`@apply dark:text-${color}-200 dark:bg-transparent`]: {},\r\n            [`@apply dark:border-${color}-300`]: {},\r\n            /* dark hover */\r\n            [`@apply dark:hover:bg-${color}-200`]: {},\r\n            [`@apply dark:hover:bg-opacity-15`]: {},\r\n            /* dark focus */\r\n            [`@apply dark:focus-visible:border-${color}-500`]: {},\r\n            [`@apply dark:focus-visible:ring-${color}-500`]: {},\r\n            /* dark active */\r\n            [`@apply dark:active:bg-${color}-200`]: {},\r\n            [`@apply dark:active:bg-opacity-25`]: {},\r\n          },\r\n        }),\r\n        {}\r\n      ),\r\n\r\n      '&.btn': {\r\n        '&-disabled': {\r\n          '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},\r\n          '&.active': {\r\n            '@apply border-gray-stroke': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n  };\r\n}\r\n\r\nfunction buttonGhost(colors) {\r\n  return {\r\n    '&-ghost': {\r\n      '@apply text-body bg-transparent': {},\r\n      '@apply hover:bg-neutral-100': {},\r\n      /* focus */\r\n      '@apply focus-visible:z-base': {},\r\n      '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n      /* active */\r\n      '@apply active:bg-neutral-200': {},\r\n      /* dark mode */\r\n      '@apply dark:text-neutral-100 dark:bg-transparent': {},\r\n      /* dark hover */\r\n      '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},\r\n      /* dark active */\r\n      '@apply dark:active:bg-neutral-600 dark:active:border-neutral-400': {},\r\n\r\n      ...colors.reduce(\r\n        (styles, color) => ({\r\n          ...styles,\r\n          [`&[data-color=\"${color}\"]`]: {\r\n            [`@apply text-${color}-600`]: {},\r\n            [`@apply hover:bg-${color}-50`]: {},\r\n            /* focus */\r\n            [`@apply focus-visible:ring-${color}-500`]: {},\r\n            [`@apply active:bg-${color}-100`]: {},\r\n            // dark colors\r\n            [`@apply dark:text-${color}-200 dark:bg-transparent`]: {},\r\n            [`@apply dark:border-${color}-300 dark:hover:bg-${color}-200`]: {},\r\n            [`@apply dark:hover:bg-opacity-15`]: {},\r\n            [`@apply dark:active:bg-${color}-200`]: {},\r\n            [`@apply dark:active:bg-opacity-25`]: {},\r\n          },\r\n        }),\r\n        {}\r\n      ),\r\n    },\r\n  };\r\n}\r\n\r\nfunction buttonLight(colors) {\r\n  return {\r\n    '&-light': {\r\n      '@apply shadow-sm': {},\r\n      '@apply border border-transparent': {},\r\n      '@apply text-body bg-neutral-100': {},\r\n      /* hover */\r\n      '@apply hover:bg-neutral-200': {},\r\n      /* focus */\r\n      '@apply focus-visible:z-base': {},\r\n      '@apply focus-visible:border-primary-500': {},\r\n      '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n      /* active */\r\n      '@apply active:bg-neutral-300': {},\r\n      /* dark mode */\r\n      '@apply dark:border-transparent': {},\r\n      '@apply dark:text-neutral-100 dark:bg-neutral-700': {},\r\n      /* dark hover */\r\n      '@apply dark:hover:bg-neutral-600': {},\r\n      /* dark focus */\r\n      '@apply dark:focus-visible:border-primary-500': {},\r\n      /* dark active */\r\n      '@apply dark:active:bg-neutral-600': {},\r\n\r\n      ...colors.reduce(\r\n        (styles, color) => ({\r\n          ...styles,\r\n          [`&[data-color=\"${color}\"]`]: {\r\n            [`@apply text-${color}-600 bg-${color}-50`]: {},\r\n            /* hover */\r\n            [`@apply hover:bg-${color}-100`]: {},\r\n            /* focus */\r\n            [`@apply focus-visible:border-${color}-500`]: {},\r\n            [`@apply focus-visible:ring-${color}-500`]: {},\r\n            /* active */\r\n            [`@apply active:bg-${color}-200`]: {},\r\n            /* dark mode */\r\n            [`@apply dark:text-${color}-300 dark:bg-${color}-500`]: {},\r\n            [`@apply dark:bg-opacity-15`]: {},\r\n            /* dark hover */\r\n            [`@apply dark:hover:bg-${color}-500`]: {},\r\n            [`@apply dark:hover:bg-opacity-25`]: {},\r\n            /* dark focus */\r\n            [`@apply dark:focus-visible:border-${color}-500`]: {},\r\n            [`@apply dark:focus-visible:ring-${color}-500`]: {},\r\n            /* dark active */\r\n            [`@apply dark:active:bg-${color}-500`]: {},\r\n            [`@apply dark:active:bg-opacity-30`]: {},\r\n          },\r\n        }),\r\n        {}\r\n      ),\r\n    },\r\n  };\r\n}\r\n\r\nfunction buttonLink(colors) {\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      '@apply focus-visible:z-base focus-visible:ring-4 focus-visible:ring-primary-500': {},\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}-600 active:text-${color}-700`]: {},\r\n            [`@apply focus-visible:ring-${color}-500`]: {},\r\n            // dark colors\r\n            [`@apply dark:text-${color}-200`]: {},\r\n            [`@apply dark:active:text-${color}-500`]: {},\r\n          },\r\n        }),\r\n        {}\r\n      ),\r\n    },\r\n  };\r\n}\r\n\r\nmodule.exports = Button = (colors) => ({\r\n  '.btn': {\r\n    '@apply relative': {},\r\n    '@apply m-0': {},\r\n    '@apply px-[3.2rem]': {},\r\n    '@apply py-0': {},\r\n    '@apply rounded-[0.4rem] inline-flex items-center justify-center flex-shrink-0 align-middle': {},\r\n    '@apply font-medium leading-tight': {},\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 cursor-base select-none whitespace-nowrap': {},\r\n    '@apply focus-visible:outline-none': {},\r\n\r\n    \"&[data-rounded='true']\": {\r\n      borderRadius: '3.2rem',\r\n    },\r\n\r\n    // sizing\r\n    '&-sm': {\r\n      '@apply text-xs': {},\r\n      minHeight: '4rem',\r\n      maxHeight: '4rem',\r\n    },\r\n\r\n    '&-md': {\r\n      '@apply text-sm': {},\r\n      minHeight: '4.4rem',\r\n      maxHeight: '4.4rem',\r\n    },\r\n\r\n    '&-lg': {\r\n      '@apply text-base': {},\r\n      minHeight: '4.8rem',\r\n      maxHeight: '4.8rem',\r\n    },\r\n    '&-fit-content': {\r\n      '@apply p-0': {},\r\n      fontSize: 'inherit',\r\n    },\r\n\r\n    // State\r\n\r\n    '&-disabled': {\r\n      '@apply disabled:shadow-none disabled:cursor-not-allowed': {},\r\n      '@apply disabled:text-gray disabled:bg-gray-light !important': {},\r\n    },\r\n    '.MuiSvgIcon-root': {\r\n      fontSize: '1.5em',\r\n      width: '1em',\r\n      height: '1em',\r\n    },\r\n\r\n    // variants\r\n    ...buttonSolid(colors),\r\n    ...buttonOutline(colors),\r\n    //...buttonGhost(colors),\r\n    //...buttonLight(colors),\r\n    ...buttonLink(colors),\r\n  },\r\n  '.btn-has-icon': {\r\n    '&-left .MuiSvgIcon-root': {\r\n      '@apply mr-sm': {},\r\n    },\r\n    '&-right .MuiSvgIcon-root': {\r\n      '@apply ml-sm': {},\r\n    },\r\n  },\r\n  '[data-icon=true]': {\r\n    '@apply p-0': {},\r\n    \"&[data-rounded='true']\": {\r\n      '@apply rounded-full': {},\r\n    },\r\n    '&.btn-sm': {\r\n      minWidth: '4rem',\r\n      maxWidth: '4rem',\r\n    },\r\n\r\n    '&.btn-md': {\r\n      minWidth: '4.4rem',\r\n      maxWidth: '4.4rem',\r\n    },\r\n\r\n    '&.btn-lg': {\r\n      minWidth: '4.8rem',\r\n      maxWidth: '4.8rem',\r\n    },\r\n    '.btn-has-icon': {\r\n      '&-left .MuiSvgIcon-root': {\r\n        '@apply mr-0': {},\r\n      },\r\n      '&-right .MuiSvgIcon-root': {\r\n        '@apply ml-0': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":"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"}

package/dist/esm/components/calendar.js

@@ -0,0 +1,65 @@
+module.exports = Calendar = () => ({
+  // Month row
+  '.MuiCalendarPicker-root > div:first-of-type': {
+    '@apply ml-2 -mr-2 px-10': {}
+  },
+  // Month
+  '.MuiCalendarPicker-root > div:first-of-type > div': {
+    '@apply font-bold text-base text-body': {}
+  },
+  // Arrow switchers
+  '.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root .MuiSvgIcon-root': {
+    '@apply text-body text-lg': {}
+  },
+  '.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root': {
+    '@apply border-solid border border-transparent focus:text-transparent hover:text-transparent focus:bg-transparent hover:bg-transparent focus:border-primary hover:border-primary': {}
+  },
+  // Arrow spacer
+  '.MuiCalendarPicker-root .MuiPickersArrowSwitcher-spacer': {
+    '@apply w-11': {}
+  },
+  // Disabled arrow
+  '.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root[disabled] .MuiSvgIcon-root': {
+    '@apply text-gray-stroke': {}
+  },
+  // Weekdays
+  '.MuiCalendarPicker-root div > div:first-of-type > .MuiTypography-root': {
+    '@apply font-bold text-body text-base': {}
+  },
+  // Days-Grid
+  '.MuiCalendarPicker-root > div:last-of-type > div:last-of-type': {
+    '@apply min-h-min pb-6': {}
+  },
+  // Day picking
+  '.MuiCalendarPicker-root .MuiPickersDay-root': {
+    '@apply text-base': {}
+  },
+  '.MuiCalendarPicker-root .Mui-disabled': {
+    '@apply text-gray-stroke': {}
+  },
+  // Day picked
+  '.MuiCalendarPicker-root .MuiButtonBase-root.MuiPickersDay-root.Mui-selected': {
+    '@apply bg-background-one text-body focus-visible:bg-background-one hover:bg-background-one focus:bg-background-one': {}
+  },
+  // Day hovered
+  '.MuiCalendarPicker-root .MuiPickersDay-root, .MuiCalendarPicker-root .MuiPickersDay-root.MuiPickersDay-today': {
+    '@apply border-primary border-solid focus-visible:border hover:bg-transparent focus:bg-transparent hover:border': {}
+  },
+  // today
+  '.MuiCalendarPicker-root .MuiPickersDay-root.MuiPickersDay-today': {
+    '@apply border-0 hover:border': {}
+  },
+  '.calendar': {
+    // Input field
+    '.datepicker-input': {
+      '@apply relative': {}
+    },
+    '.datepicker-input input': {
+      '@apply pl-20 cursor-pointer': {}
+    },
+    '.datepicker-input-icon': {
+      '@apply pointer-events-none absolute my-auto top-0 bottom-0 left-md mr-md text-xl fill-body': {}
+    }
+  }
+});
+//# sourceMappingURL=calendar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.js","names":["module","exports","Calendar"],"sources":["../../../src/components/calendar.js"],"sourcesContent":["module.exports = Calendar = () => ({\r\n  // Month row\r\n  '.MuiCalendarPicker-root > div:first-of-type': {\r\n    '@apply ml-2 -mr-2 px-10': {},\r\n  },\r\n\r\n  // Month\r\n  '.MuiCalendarPicker-root > div:first-of-type > div': {\r\n    '@apply font-bold text-base text-body': {},\r\n  },\r\n\r\n  // Arrow switchers\r\n  '.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root .MuiSvgIcon-root': {\r\n    '@apply text-body text-lg': {},\r\n  },\r\n  '.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root': {\r\n    '@apply border-solid border border-transparent focus:text-transparent hover:text-transparent focus:bg-transparent hover:bg-transparent focus:border-primary hover:border-primary':\r\n      {},\r\n  },\r\n  // Arrow spacer\r\n  '.MuiCalendarPicker-root .MuiPickersArrowSwitcher-spacer': {\r\n    '@apply w-11': {},\r\n  },\r\n  // Disabled arrow\r\n  '.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root[disabled] .MuiSvgIcon-root': {\r\n    '@apply text-gray-stroke': {},\r\n  },\r\n\r\n  // Weekdays\r\n  '.MuiCalendarPicker-root div > div:first-of-type > .MuiTypography-root': {\r\n    '@apply font-bold text-body text-base': {},\r\n  },\r\n\r\n  // Days-Grid\r\n  '.MuiCalendarPicker-root > div:last-of-type > div:last-of-type': {\r\n    '@apply min-h-min pb-6': {},\r\n  },\r\n\r\n  // Day picking\r\n  '.MuiCalendarPicker-root .MuiPickersDay-root': {\r\n    '@apply text-base': {},\r\n  },\r\n  '.MuiCalendarPicker-root .Mui-disabled': {\r\n    '@apply text-gray-stroke': {},\r\n  },\r\n\r\n  // Day picked\r\n  '.MuiCalendarPicker-root .MuiButtonBase-root.MuiPickersDay-root.Mui-selected': {\r\n    '@apply bg-background-one text-body focus-visible:bg-background-one hover:bg-background-one focus:bg-background-one':\r\n      {},\r\n  },\r\n\r\n  // Day hovered\r\n  '.MuiCalendarPicker-root .MuiPickersDay-root, .MuiCalendarPicker-root .MuiPickersDay-root.MuiPickersDay-today': {\r\n    '@apply border-primary border-solid focus-visible:border hover:bg-transparent focus:bg-transparent hover:border':\r\n      {},\r\n  },\r\n\r\n  // today\r\n  '.MuiCalendarPicker-root .MuiPickersDay-root.MuiPickersDay-today': {\r\n    '@apply border-0 hover:border': {},\r\n  },\r\n\r\n  '.calendar': {\r\n    // Input field\r\n    '.datepicker-input': {\r\n      '@apply relative': {},\r\n    },\r\n\r\n    '.datepicker-input input': {\r\n      '@apply pl-20 cursor-pointer': {},\r\n    },\r\n\r\n    '.datepicker-input-icon': {\r\n      '@apply pointer-events-none absolute my-auto top-0 bottom-0 left-md mr-md text-xl fill-body': {},\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,QAAQ,GAAGA,CAAA,MAAO;EACjC;EACA,6CAA6C,EAAE;IAC7C,yBAAyB,EAAE,CAAC;EAC9B,CAAC;EAED;EACA,mDAAmD,EAAE;IACnD,sCAAsC,EAAE,CAAC;EAC3C,CAAC;EAED;EACA,kFAAkF,EAAE;IAClF,0BAA0B,EAAE,CAAC;EAC/B,CAAC;EACD,iEAAiE,EAAE;IACjE,iLAAiL,EAC/K,CAAC;EACL,CAAC;EACD;EACA,yDAAyD,EAAE;IACzD,aAAa,EAAE,CAAC;EAClB,CAAC;EACD;EACA,4FAA4F,EAAE;IAC5F,yBAAyB,EAAE,CAAC;EAC9B,CAAC;EAED;EACA,uEAAuE,EAAE;IACvE,sCAAsC,EAAE,CAAC;EAC3C,CAAC;EAED;EACA,+DAA+D,EAAE;IAC/D,uBAAuB,EAAE,CAAC;EAC5B,CAAC;EAED;EACA,6CAA6C,EAAE;IAC7C,kBAAkB,EAAE,CAAC;EACvB,CAAC;EACD,uCAAuC,EAAE;IACvC,yBAAyB,EAAE,CAAC;EAC9B,CAAC;EAED;EACA,6EAA6E,EAAE;IAC7E,oHAAoH,EAClH,CAAC;EACL,CAAC;EAED;EACA,8GAA8G,EAAE;IAC9G,gHAAgH,EAC9G,CAAC;EACL,CAAC;EAED;EACA,iEAAiE,EAAE;IACjE,8BAA8B,EAAE,CAAC;EACnC,CAAC;EAED,WAAW,EAAE;IACX;IACA,mBAAmB,EAAE;MACnB,iBAAiB,EAAE,CAAC;IACtB,CAAC;IAED,yBAAyB,EAAE;MACzB,6BAA6B,EAAE,CAAC;IAClC,CAAC;IAED,wBAAwB,EAAE;MACxB,4FAA4F,EAAE,CAAC;IACjG;EACF;AACF,CAAC,CAAC"}

package/dist/esm/components/card.js

@@ -0,0 +1,52 @@
+module.exports = Card = () => ({
+  '.avatar': {
+    '@apply bg-primary-light text-primary rounded-full p-4': {}
+  },
+  '.card-list': {
+    '@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10': {}
+    //"@apply text-center": {},
+    //"@apply justify-center items-center": {},
+  },
+
+  '.card': {
+    '@apply p-lg rounded shadow-lg bg-white relative': {},
+    '@apply p-0': {},
+    //padding: "2.4rem",
+
+    // clickable
+    '&-clickable': {
+      // Hover
+      '@apply hover:shadow-xl hover:cursor-pointer': {}
+    }
+
+    // "@apply bg-neutral-200 border border-neutral-100 text-body": {},
+    // dark
+    //"@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300": {},
+  },
+
+  '.card-outlined': {
+    '@apply border-2 border-gray-stroke': {}
+  },
+  '.card-border-top': {
+    '@apply border-t-4 border-t-primary': {}
+  },
+  '.card-body': {
+    '@apply text-body p-8': {}
+  },
+  '.card-image': {
+    '@apply object-cover': {},
+    width: '100%',
+    height: '250px'
+  },
+  '.card-link': {
+    '&::after': {
+      content: "''",
+      position: 'absolute',
+      left: '0',
+      top: '0',
+      right: '0',
+      bottom: '0'
+    }
+  }
+});
+//# sourceMappingURL=card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":["module","exports","Card","width","height","content","position","left","top","right","bottom"],"sources":["../../../src/components/card.js"],"sourcesContent":["module.exports = Card = () => ({\r\n  '.avatar': {\r\n    '@apply bg-primary-light text-primary rounded-full p-4': {},\r\n  },\r\n\r\n  '.card-list': {\r\n    '@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10': {},\r\n    //\"@apply text-center\": {},\r\n    //\"@apply justify-center items-center\": {},\r\n  },\r\n\r\n  '.card': {\r\n    '@apply p-lg rounded shadow-lg bg-white relative': {},\r\n    '@apply p-0': {},\r\n    //padding: \"2.4rem\",\r\n\r\n    // clickable\r\n    '&-clickable': {\r\n      // Hover\r\n      '@apply hover:shadow-xl hover:cursor-pointer': {},\r\n    },\r\n\r\n    // \"@apply bg-neutral-200 border border-neutral-100 text-body\": {},\r\n    // dark\r\n    //\"@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300\": {},\r\n  },\r\n  '.card-outlined': {\r\n    '@apply border-2 border-gray-stroke': {},\r\n  },\r\n  '.card-border-top': {\r\n    '@apply border-t-4 border-t-primary': {},\r\n  },\r\n\r\n  '.card-body': {\r\n    '@apply text-body p-8': {},\r\n  },\r\n\r\n  '.card-image': {\r\n    '@apply object-cover': {},\r\n    width: '100%',\r\n    height: '250px',\r\n  },\r\n\r\n  '.card-link': {\r\n    '&::after': {\r\n      content: \"''\",\r\n      position: 'absolute',\r\n      left: '0',\r\n      top: '0',\r\n      right: '0',\r\n      bottom: '0',\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,IAAI,GAAGA,CAAA,MAAO;EAC7B,SAAS,EAAE;IACT,uDAAuD,EAAE,CAAC;EAC5D,CAAC;EAED,YAAY,EAAE;IACZ,8DAA8D,EAAE,CAAC;IACjE;IACA;EACF,CAAC;;EAED,OAAO,EAAE;IACP,iDAAiD,EAAE,CAAC,CAAC;IACrD,YAAY,EAAE,CAAC,CAAC;IAChB;;IAEA;IACA,aAAa,EAAE;MACb;MACA,6CAA6C,EAAE,CAAC;IAClD;;IAEA;IACA;IACA;EACF,CAAC;;EACD,gBAAgB,EAAE;IAChB,oCAAoC,EAAE,CAAC;EACzC,CAAC;EACD,kBAAkB,EAAE;IAClB,oCAAoC,EAAE,CAAC;EACzC,CAAC;EAED,YAAY,EAAE;IACZ,sBAAsB,EAAE,CAAC;EAC3B,CAAC;EAED,aAAa,EAAE;IACb,qBAAqB,EAAE,CAAC,CAAC;IACzBC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE;EACV,CAAC;EAED,YAAY,EAAE;IACZ,UAAU,EAAE;MACVC,OAAO,EAAE,IAAI;MACbC,QAAQ,EAAE,UAAU;MACpBC,IAAI,EAAE,GAAG;MACTC,GAAG,EAAE,GAAG;MACRC,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE;IACV;EACF;AACF,CAAC,CAAC"}

package/dist/esm/components/checkbox.js

@@ -0,0 +1,113 @@
+var svgToDataUri = require('mini-svg-data-uri');
+module.exports = Checkbox = colors => ({
+  '.form-checkbox': {
+    //"@apply rounded shadow-sm": {},
+    backgroundColor: 'inherit',
+    '@apply border-gray-stroke focus:bg-white': {},
+    '&[aria-invalid=true]': {
+      '--tw-border-opacity': '1',
+      borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))'
+    },
+    '&[aria-invalid=true]:hover': {
+      '--tw-border-opacity': '1',
+      'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))'
+    },
+    // dark colors
+    '@apply dark:border-neutral-400': {},
+    '.dark &[aria-invalid=true]': {
+      '--tw-border-opacity': '1',
+      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))'
+    },
+    '.dark &[aria-invalid=true]:hover': {
+      '--tw-border-opacity': '1',
+      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))'
+    },
+    '@media (prefers-color-scheme: dark)': {
+      '&[aria-invalid=true]': {
+        '--tw-border-opacity': '1',
+        borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))'
+      },
+      '&[aria-invalid=true]:hover': {
+        '--tw-border-opacity': '1',
+        'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))'
+      }
+    },
+    '&:checked': {
+      '@apply text-white bg-white border-primary': {},
+      ["@apply focus-visible:border-primary focus-visible:ring-primary"]: {},
+      backgroundImage: "url(\"" + svgToDataUri("<svg viewBox=\"0 0 16 16\" fill=\"#005595\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\"/></svg>") + "\")"
+      //borderColor: "transparent",
+    },
+
+    ["&[data-color=\"primary\"]"]: {
+      //[`@apply text-primary`]: {},
+      // dark
+      //[`@apply dark:text-primary`]: {},
+      //[`@apply dark:focus-visible:border-primary-400 dark:focus-visible:ring-primary-400`]: {},
+    },
+    // Fix focus stylign
+    '&:checked:hover, &:checked:focus': {
+      '@apply bg-white border-primary': {}
+    },
+    // colors
+    /*...colors.reduce(
+      (styles, color) => ({
+        ...styles,
+        [`&[data-color="${color}"]`]: {
+          [`@apply text-${color}`]: {},
+          [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},
+          backgroundImage: `url("${svgToDataUri(
+            `<svg viewBox="0 0 16 16" fill="${theme(`colors.primary_raw.DEFAULT`)}" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>`
+          )}")`,
+          // dark
+          [`@apply dark:text-${color}`]: {},
+          [`@apply dark:focus-visible:border-${color}-400 dark:focus-visible:ring-${color}-400`]: {},
+        },
+      }),
+      {}
+    ),*/
+
+    '@apply dark:focus-visible:ring-offset-neutral-900': {},
+    // sizing
+    '&-sm': {
+      width: '1.4rem',
+      height: '1.4rem'
+    },
+    '&-md': {
+      width: '1.6rem',
+      height: '1.6rem'
+      //"@apply w-4 h-4": {},
+    },
+
+    '&-lg': {
+      width: '1.8rem',
+      height: '1.8rem'
+    },
+    // disabled
+    '&-disabled, &-disabled:checked': {
+      '@apply grayscale cursor-not-allowed bg-gray-middle hover:bg-gray-middle': {}
+      //"@apply disabled:bg-gray-stroke": {},
+      //"@apply disabled:shadow-none disabled:border-neutral-300 disabled:bg-neutral-300 disabled:hover:text-neutral-300": {},
+      //"@apply dark:disabled:border-transparent dark:disabled:bg-white/20 dark:disabled:hover:text-white/20": {},
+    },
+
+    // label
+    '&-label': {
+      '@apply text-body select-none text-sm': {},
+      marginLeft: '0.8rem',
+      //"@apply text-black": {},
+      // dark colors
+      '@apply dark:text-neutral-100': {},
+      '&-sm': {
+        '@apply text-xs': {}
+      },
+      '&-md': {
+        '@apply text-sm': {}
+      },
+      '&-lg': {
+        '@apply text-base': {}
+      }
+    }
+  }
+});
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":["svgToDataUri","require","module","exports","Checkbox","colors","backgroundColor","borderColor","backgroundImage","width","height","marginLeft"],"sources":["../../../src/components/checkbox.js"],"sourcesContent":["const svgToDataUri = require('mini-svg-data-uri');\r\n\r\nmodule.exports = Checkbox = (colors) => ({\r\n  '.form-checkbox': {\r\n    //\"@apply rounded shadow-sm\": {},\r\n    backgroundColor: 'inherit',\r\n    '@apply border-gray-stroke focus:bg-white': {},\r\n\r\n    '&[aria-invalid=true]': {\r\n      '--tw-border-opacity': '1',\r\n      borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',\r\n    },\r\n    '&[aria-invalid=true]:hover': {\r\n      '--tw-border-opacity': '1',\r\n      'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))',\r\n    },\r\n    // dark colors\r\n    '@apply dark:border-neutral-400': {},\r\n    '.dark &[aria-invalid=true]': {\r\n      '--tw-border-opacity': '1',\r\n      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',\r\n    },\r\n    '.dark &[aria-invalid=true]:hover': {\r\n      '--tw-border-opacity': '1',\r\n      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',\r\n    },\r\n\r\n    '@media (prefers-color-scheme: dark)': {\r\n      '&[aria-invalid=true]': {\r\n        '--tw-border-opacity': '1',\r\n        borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',\r\n      },\r\n      '&[aria-invalid=true]:hover': {\r\n        '--tw-border-opacity': '1',\r\n        'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))',\r\n      },\r\n    },\r\n\r\n    '&:checked': {\r\n      '@apply text-white bg-white border-primary': {},\r\n      [`@apply focus-visible:border-primary focus-visible:ring-primary`]: {},\r\n\r\n      backgroundImage: `url(\"${svgToDataUri(\r\n        `<svg viewBox=\"0 0 16 16\" fill=\"#005595\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\"/></svg>`\r\n      )}\")`,\r\n      //borderColor: \"transparent\",\r\n    },\r\n\r\n    [`&[data-color=\"primary\"]`]: {\r\n      //[`@apply text-primary`]: {},\r\n      // dark\r\n      //[`@apply dark:text-primary`]: {},\r\n      //[`@apply dark:focus-visible:border-primary-400 dark:focus-visible:ring-primary-400`]: {},\r\n    },\r\n\r\n    // Fix focus stylign\r\n    '&:checked:hover, &:checked:focus': {\r\n      '@apply bg-white border-primary': {},\r\n    },\r\n\r\n    // colors\r\n    /*...colors.reduce(\r\n      (styles, color) => ({\r\n        ...styles,\r\n        [`&[data-color=\"${color}\"]`]: {\r\n          [`@apply text-${color}`]: {},\r\n          [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},\r\n          backgroundImage: `url(\"${svgToDataUri(\r\n            `<svg viewBox=\"0 0 16 16\" fill=\"${theme(`colors.primary_raw.DEFAULT`)}\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\"/></svg>`\r\n          )}\")`,\r\n          // dark\r\n          [`@apply dark:text-${color}`]: {},\r\n          [`@apply dark:focus-visible:border-${color}-400 dark:focus-visible:ring-${color}-400`]: {},\r\n        },\r\n      }),\r\n      {}\r\n    ),*/\r\n\r\n    '@apply dark:focus-visible:ring-offset-neutral-900': {},\r\n\r\n    // sizing\r\n    '&-sm': {\r\n      width: '1.4rem',\r\n      height: '1.4rem',\r\n    },\r\n\r\n    '&-md': {\r\n      width: '1.6rem',\r\n      height: '1.6rem',\r\n      //\"@apply w-4 h-4\": {},\r\n    },\r\n\r\n    '&-lg': {\r\n      width: '1.8rem',\r\n      height: '1.8rem',\r\n    },\r\n\r\n    // disabled\r\n    '&-disabled, &-disabled:checked': {\r\n      '@apply grayscale cursor-not-allowed bg-gray-middle hover:bg-gray-middle': {},\r\n      //\"@apply disabled:bg-gray-stroke\": {},\r\n      //\"@apply disabled:shadow-none disabled:border-neutral-300 disabled:bg-neutral-300 disabled:hover:text-neutral-300\": {},\r\n      //\"@apply dark:disabled:border-transparent dark:disabled:bg-white/20 dark:disabled:hover:text-white/20\": {},\r\n    },\r\n\r\n    // label\r\n    '&-label': {\r\n      '@apply text-body select-none text-sm': {},\r\n      marginLeft: '0.8rem',\r\n      //\"@apply text-black\": {},\r\n      // dark colors\r\n      '@apply dark:text-neutral-100': {},\r\n\r\n      '&-sm': {\r\n        '@apply text-xs': {},\r\n      },\r\n\r\n      '&-md': {\r\n        '@apply text-sm': {},\r\n      },\r\n\r\n      '&-lg': {\r\n        '@apply text-base': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAA,IAAMA,YAAY,GAAGC,OAAO,CAAC,mBAAmB,CAAC;AAEjDC,MAAM,CAACC,OAAO,GAAGC,QAAQ,GAAIC,MAAM,KAAM;EACvC,gBAAgB,EAAE;IAChB;IACAC,eAAe,EAAE,SAAS;IAC1B,0CAA0C,EAAE,CAAC,CAAC;IAE9C,sBAAsB,EAAE;MACtB,qBAAqB,EAAE,GAAG;MAC1BC,WAAW,EAAE;IACf,CAAC;IACD,4BAA4B,EAAE;MAC5B,qBAAqB,EAAE,GAAG;MAC1B,cAAc,EAAE;IAClB,CAAC;IACD;IACA,gCAAgC,EAAE,CAAC,CAAC;IACpC,4BAA4B,EAAE;MAC5B,qBAAqB,EAAE,GAAG;MAC1BA,WAAW,EAAE;IACf,CAAC;IACD,kCAAkC,EAAE;MAClC,qBAAqB,EAAE,GAAG;MAC1BA,WAAW,EAAE;IACf,CAAC;IAED,qCAAqC,EAAE;MACrC,sBAAsB,EAAE;QACtB,qBAAqB,EAAE,GAAG;QAC1BA,WAAW,EAAE;MACf,CAAC;MACD,4BAA4B,EAAE;QAC5B,qBAAqB,EAAE,GAAG;QAC1B,cAAc,EAAE;MAClB;IACF,CAAC;IAED,WAAW,EAAE;MACX,2CAA2C,EAAE,CAAC,CAAC;MAC/C,oEAAoE,CAAC,CAAC;MAEtEC,eAAe,aAAUR,YAAY,4NAEpC;MACD;IACF,CAAC;;IAED,+BAA6B;MAC3B;MACA;MACA;MACA;IAAA,CACD;IAED;IACA,kCAAkC,EAAE;MAClC,gCAAgC,EAAE,CAAC;IACrC,CAAC;IAED;IACA;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;IAEI,mDAAmD,EAAE,CAAC,CAAC;IAEvD;IACA,MAAM,EAAE;MACNS,KAAK,EAAE,QAAQ;MACfC,MAAM,EAAE;IACV,CAAC;IAED,MAAM,EAAE;MACND,KAAK,EAAE,QAAQ;MACfC,MAAM,EAAE;MACR;IACF,CAAC;;IAED,MAAM,EAAE;MACND,KAAK,EAAE,QAAQ;MACfC,MAAM,EAAE;IACV,CAAC;IAED;IACA,gCAAgC,EAAE;MAChC,yEAAyE,EAAE,CAAC;MAC5E;MACA;MACA;IACF,CAAC;;IAED;IACA,SAAS,EAAE;MACT,sCAAsC,EAAE,CAAC,CAAC;MAC1CC,UAAU,EAAE,QAAQ;MACpB;MACA;MACA,8BAA8B,EAAE,CAAC,CAAC;MAElC,MAAM,EAAE;QACN,gBAAgB,EAAE,CAAC;MACrB,CAAC;MAED,MAAM,EAAE;QACN,gBAAgB,EAAE,CAAC;MACrB,CAAC;MAED,MAAM,EAAE;QACN,kBAAkB,EAAE,CAAC;MACvB;IACF;EACF;AACF,CAAC,CAAC"}