@sikka/hawa 0.0.257 → 0.0.259

package/lib/stories/ManualStories/BlocksIntroduction.stories.d.ts

@@ -0,0 +1 @@
+import "../stories-styles.css";

package/lib/stories/ManualStories/Customization.stories.d.ts

@@ -0,0 +1 @@
+import "../stories-styles.css";

package/lib/stories/ManualStories/ElementsIntroduction.stories.d.ts

@@ -0,0 +1 @@
+import "../stories-styles.css";

package/lib/stories/ManualStories/Installation.stories.d.ts

@@ -0,0 +1 @@
+import "../stories-styles.css";

package/lib/stories/ManualStories/LayoutIntroduction.stories.d.ts

@@ -0,0 +1 @@
+import "../stories-styles.css";

package/lib/stories/ManualStories/Overview.stories.d.ts

@@ -0,0 +1 @@
+import "../stories-styles.css";

package/lib/stories/ManualStories/Usage.stories.d.ts

@@ -0,0 +1 @@
+import "../stories-styles.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.257",
+  "version": "0.0.259",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -35,9 +35,10 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-react": "^7.12.10",
-    "@mdx-js/react": "^2.3.0",
+    "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^11.1.1",
+    "@rollup/plugin-terser": "^0.4.3",
     "@storybook/addon-actions": "^6.5.8",
     "@storybook/addon-docs": "^6.5.8",
     "@storybook/addon-essentials": "^6.5.8",
@@ -70,12 +71,10 @@
     "react-select": "^5.3.2",
     "react-transition-group": "^4.4.2",
     "rollup": "^2.38.4",
-    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-swc": "^0.2.1",
-    "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.34.1",
     "tailwindcss": "^3.3.3",
     "tinycolor2": "^1.4.2",
@@ -100,7 +99,7 @@
     "react": "^18.2.0",
     "react-dropzone": "^12.0.4",
     "react-hook-form": "^7.28.0",
-    "react-icons": "^4.6.0",
+    "react-icons": "^4.10.1",
     "react-select": "^5.3.2",
     "slate": "^0.94.1",
     "slate-react": "^0.97.1"

package/rollup.config.js

@@ -1,8 +1,11 @@
 import resolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
-import babel from "rollup-plugin-babel";
+// import babel from "rollup-plugin-babel";
+import { babel } from "@rollup/plugin-babel";
+
 import external from "rollup-plugin-peer-deps-external";
-import { terser } from "rollup-plugin-terser";
+// import { terser } from "rollup-plugin-terser";
+import terser from "@rollup/plugin-terser";
 import postcss from "rollup-plugin-postcss";
 import typescript from "rollup-plugin-typescript2";
 import swc from "rollup-plugin-swc";
@@ -21,6 +24,7 @@ export default [
       }),
       postcss({ plugins: [], minimize: true }),
       babel({
+        babelHelpers: "bundled",
         exclude: "node_modules/**",
         presets: [
           "@babel/preset-env",

package/src/elements/HawaAlert.tsx

@@ -54,7 +54,12 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
       }
     }
   }, [duration])
-
+  let closeButtonStyle = {
+    info: "hover:bg-blue-300",
+    warning: "hover:bg-yellow-300",
+    error: "hover:bg-red-300",
+    success: "hover:bg-green-300",
+  }
   let styleVariant = {
     normal: {
       info: "text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
@@ -131,7 +136,10 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
         )}
         <button
           type="button"
-          className="absolute right-4 top-4  inline-flex  h-8 w-8 translate-y-1 rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
+          className={clsx(
+            "absolute right-2 top-2 inline-flex h-9  w-9 items-center justify-center rounded p-1.5 text-gray-400 transition-all  hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white",
+            closeButtonStyle[props.severity]
+          )}
           data-dismiss-target="#alert-default"
           aria-label="Close"
           onClick={() => {

package/src/styles.css

@@ -570,6 +570,9 @@ video {
 .collapse {
   visibility: collapse;
 }
+.static {
+  position: static;
+}
 .fixed {
   position: fixed;
 }
@@ -1033,6 +1036,9 @@ video {
 .w-8 {
   width: 2rem;
 }
+.w-9 {
+  width: 2.25rem;
+}
 .w-\[32px\] {
   width: 32px;
 }
@@ -1121,10 +1127,6 @@ video {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.translate-y-1 {
-  --tw-translate-y: 0.25rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
 .translate-y-1\/2 {
   --tw-translate-y: 50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1268,6 +1270,11 @@ video {
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
 .space-y-0 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
@@ -1796,6 +1803,9 @@ video {
 .pl-3 {
   padding-left: 0.75rem;
 }
+.pl-6 {
+  padding-left: 1.5rem;
+}
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -2237,6 +2247,11 @@ body {
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-blue-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-blue-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
@@ -2279,6 +2294,11 @@ body {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-green-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-layoutPrimary-300:hover {
   background-color: var(--layout-primary-300);
 }
@@ -2291,6 +2311,16 @@ body {
   background-color: var(--layout-primary-700);
 }
 
+.hover\:bg-red-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-yellow-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+}
+
 .hover\:font-bold:hover {
   font-weight: 700;
 }
@@ -2688,6 +2718,11 @@ body {
 
 @media (min-width: 640px) {
 
+  .sm\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
   .sm\:after\:inline-block::after {
     content: var(--tw-content);
     display: inline-block;