@rovula/ui 0.0.4 → 0.0.6

package/dist/theme/global.css

@@ -0,0 +1,149 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --white: 255 255 255; /* #ffffff */
+    --black: 28 28 28; /* #1c1c1c */
+
+    --theme-50: 232 242 255; /* #E8F2FF -> 232 242 255 */
+    --theme-100: 213 230 255; /* #D5E6FF -> 213 230 255 */
+    --theme-200: 179 207 255; /* #B3CFFF -> 179 207 255 */
+    --theme-300: 136 174 255; /* #85AEFF -> 136 174 255 */
+    --theme-400: 86 126 255; /* #567EFF -> 86 126 255 */
+    --theme-500: 47 78 255; /* #2F4EFF -> 47 78 255 */
+    --theme-600: 12 26 255; /* #0C1AFF -> 12 26 255 */
+    --theme-700: 0 12 255; /* #000CFF -> 0 12 255 */
+    --theme-800: 6 18 205; /* #0612CD -> 6 18 205 */
+    --theme-900: 16 29 159; /* #101D9F -> 16 29 159 */
+    --theme-default: var(--theme-100);
+    --theme-foreground: var(--white);
+
+    --primary-5: 242 242 246; /* #F2F2F6 */
+    --primary-10: 230 230 236; /* #E6E6EC */
+    --primary-20: 204 204 218; /* #CCCCDA */
+    --primary-30: 179 179 199; /* #B3B3C7 */
+    --primary-40: 153 153 180; /* #9999B4 */
+    --primary-50: 128 128 161; /* #8080A1 */
+    --primary-60: 103 103 143; /* #67678F */
+    --primary-70: 77 77 124; /* #4D4D7C */
+    --primary-80: 52 52 105; /* #343469 */
+    --primary-90: 26 26 87; /* #1A1A57 */
+    --primary-100: 1 1 68; /* #010144 */
+    --primary-110: 1 1 61; /* #01013D */
+    --primary-120: 1 1 54; /* #010136 */
+    --primary-130: 1 1 48; /* #010130 */
+    --primary-140: 1 1 41; /* #010129 */
+    --primary-150: 1 1 34; /* #010122 */
+    --primary-default: var(--primary-100);
+    --primary-foreground: var(--white);
+
+    --secondary-5: 254 254 255; /* #FEFEFF */
+    --secondary-10: 253 254 255; /* #FDFEFF */
+    --secondary-20: 251 252 255; /* #FBFCFF */
+    --secondary-30: 249 251 255; /* #F9FBFF */
+    --secondary-40: 247 249 255; /* #F7F9FF */
+    --secondary-50: 245 248 255; /* #F5F8FF */
+    --secondary-60: 242 247 255; /* #F2F7FF */
+    --secondary-70: 240 245 255; /* #F0F5FF */
+    --secondary-80: 238 244 255; /* #EEF4FF */
+    --secondary-90: 236 242 255; /* #ECF2FF */
+    --secondary-100: 234 241 255; /* #EAF1FF */
+    --secondary-110: 211 217 229; /* #D3D9E5 */
+    --secondary-120: 187 193 204; /* #BBC1CC */
+    --secondary-130: 164 169 178; /* #A4A9B2 */
+    --secondary-140: 140 145 153; /* #8C9199 */
+    --secondary-150: 117 121 128; /* #757980 */
+    --secondary-default: var(--secondary-100);
+    --secondary-foreground: 1 1 68;
+
+    --tertiary-5: 245 246 255; /* #F5F6FF */
+    --tertiary-10: 234 237 255; /* #EAEDFF */
+    --tertiary-20: 213 220 255; /* #D5DCFF */
+    --tertiary-30: 193 202 255; /* #C1CAFF */
+    --tertiary-40: 172 184 255; /* #ACB8FF */
+    --tertiary-50: 151 166 255; /* #97A6FF */
+    --tertiary-60: 132 149 255; /* #8295FF */
+    --tertiary-70: 109 131 255; /* #6D83FF */
+    --tertiary-80: 89 113 255; /* #5971FF */
+    --tertiary-90: 68 96 255; /* #4460FF */
+    --tertiary-100: 47 78 255; /* #2F4EFF */
+    --tertiary-110: 42 70 229; /* #2A46E5 */
+    --tertiary-120: 38 62 204; /* #263ECC */
+    --tertiary-130: 33 55 178; /* #2137B2 */
+    --tertiary-140: 28 47 153; /* #1C2F99 */
+    --tertiary-150: 24 39 128; /* #182780 */
+    --tertiary-default: var(--tertiary-100);
+    --tertiary-foreground: var(--white);
+
+    --grey-5: 250 250 250; /* #FAFAFA */
+    --grey-10: 245 245 245; /* #F5F5F5 */
+    --grey-20: 236 236 236; /* #ECECEC */
+    --grey-30: 226 226 226; /* #E2E2E2 */
+    --grey-40: 216 216 216; /* #D8D8D8 */
+    --grey-50: 207 207 207; /* #CFCFCF */
+    --grey-60: 197 197 197; /* #C5C5C5 */
+    --grey-70: 187 187 187; /* #BBBBBB */
+    --grey-80: 177 177 177; /* #B1B1B1 */
+    --grey-90: 168 168 168; /* #A8A8A8 */
+    --grey-100: 158 158 158; /* #9E9E9E */
+    --grey-110: 142 142 142; /* #8E8E8E */
+    --grey-120: 126 126 126; /* #7E7E7E */
+    --grey-130: 111 111 111; /* #6F6F6F */
+    --grey-140: 95 95 95; /* #5F5F5F */
+    --grey-150: 79 79 79; /* #4F4F4F */
+    --grey-default: var(--grey-100);
+    --grey-foreground: 1 1 68;
+  
+    --grey2-100: 249 250 251; /* #F9FAFB */
+    --grey2-200: 244 246 248; /* #F4F6F8 */
+    --grey2-300: 223 227 232; /* #DFE3E8 */
+    --grey2-400: 196 205 213; /* #C4CDD5 */
+    --grey2-500: 145 158 171; /* #919EAB */
+    --grey2-600: 99 115 129; /* #637381 */
+    --grey2-700: 69 79 91; /* #454F5B */
+    --grey2-800: 33 43 54; /* #212B36 */
+    --grey2-900: 22 28 36; /* #161C24 */
+    --grey-default: var(--grey-100);
+    --grey-foreground: var(--white);
+  
+    --info-100: 41 152 255; /* #2998FF */
+    --info-120: 33 122 204; /* #217ACC */
+    --info-default: var(--info-100);
+    --info-foreground: var(--white);
+    
+    --success-100: 84 214 44; /* #54D62C */
+    --success-120: 67 171 35; /* #43AB23 */
+    --success-default: var(--success-100);
+    --success-foreground: var(--white);
+    
+    --warning-100: 255 193 7; /* #FFC107 */
+    --warning-120: 204 154 6; /* #CC9A06 */
+    --warning-default: var(--warning-100);
+    --warning-foreground: var(--white);
+    
+    --error-100: 255 77 53; /* #FF4D35 */
+    --error-120: 204 62 42; /* #CC3E2A */
+    --error-default: var(--error-100);
+    --error-foreground: var(--white);
+
+    /* Button */
+    --btn-rounded-sm: 10px;
+    --btn-rounded-md: 12px;
+    --btn-rounded-lg: 16px;
+
+    /* Input */
+    --input-default-text-color: 164 169 178;
+    --input-default-stroke-color: 231 231 231;
+
+    --input-active-text-color: 29 30 39;
+    --input-active-stroke-color: 208 208 208;
+  
+    --input-disabled-text-color: 196 199 205;
+    --input-disabled-stroke-color: 239 239 239;
+    --input-disabled-background-color: 247 247 247;
+    
+    --input-label-background-color: 249 251 255;
+  }
+}

package/dist/theme/main-preset.js

@@ -0,0 +1,159 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: "class",
+  theme: {
+    extend: {
+      fontSize: {
+        h1: [
+          "64px",
+          {
+            lineHeight: "80px",
+            fontWeight: "700",
+          },
+        ],
+        h2: [
+          "48px",
+          {
+            lineHeight: "60px",
+            fontWeight: "700",
+          },
+        ],
+        h3: [
+          "32px",
+          {
+            lineHeight: "48px",
+            fontWeight: "700",
+          },
+        ],
+        h4: [
+          "24px",
+          {
+            lineHeight: "32px",
+            fontWeight: "700",
+          },
+        ],
+        h5: [
+          "20px",
+          {
+            lineHeight: "28px",
+            fontWeight: "700",
+          },
+        ],
+        h6: [
+          "18px",
+          {
+            lineHeight: "24px",
+            fontWeight: "700",
+          },
+        ],
+        subtitile1: [
+          "16px",
+          {
+            lineHeight: "24px",
+            fontWeight: "400",
+          },
+        ],
+        subtitile2: [
+          "16px",
+          {
+            lineHeight: "24px",
+            fontWeight: "500",
+          },
+        ],
+        subtitile3: [
+          "16px",
+          {
+            lineHeight: "24px",
+            fontWeight: "600",
+          },
+        ],
+        subtitile4: [
+          "14px",
+          {
+            lineHeight: "22px",
+            fontWeight: "400",
+          },
+        ],
+        subtitile5: [
+          "14px",
+          {
+            lineHeight: "22px",
+            fontWeight: "500",
+          },
+        ],
+        subtitile6: [
+          "14px",
+          {
+            lineHeight: "22px",
+            fontWeight: "600",
+          },
+        ],
+        body1: [
+          "16px",
+          {
+            lineHeight: "20px",
+            fontWeight: "400",
+          },
+        ],
+        body2: [
+          "16px",
+          {
+            lineHeight: "20px",
+            fontWeight: "500",
+          },
+        ],
+        body3: [
+          "14px",
+          {
+            lineHeight: "18px",
+            fontWeight: "400",
+          },
+        ],
+        body4: [
+          "14px",
+          {
+            lineHeight: "18px",
+            fontWeight: "500",
+          },
+        ],
+        small1: [
+          "12px",
+          {
+            lineHeight: "14px",
+            fontWeight: "400",
+          },
+        ],
+        small2: [
+          "12px",
+          {
+            lineHeight: "14px",
+            fontWeight: "500",
+          },
+        ],
+        small3: [
+          "10px",
+          {
+            lineHeight: "12px",
+            fontWeight: "400",
+          },
+        ],
+        label1: [
+          "12px",
+          {
+            lineHeight: "12px",
+            fontWeight: "400",
+          },
+        ],
+        label2: [
+          "10px",
+          {
+            lineHeight: "10px",
+            fontWeight: "400",
+          },
+        ],
+      },
+    },
+  },
+  presets: [require("./presets/colors")],
+  plugins: [require("./plugins/utilities/typography")],
+};

package/dist/theme/plugins/utilities/typography.js

@@ -0,0 +1,69 @@
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function ({ addUtilities }) {
+  addUtilities({
+    ".typography-h1": {
+      "@apply text-h1": {},
+    },
+    ".typography-h2": {
+      "@apply text-h2": {},
+    },
+    ".typography-h3": {
+      "@apply text-h3": {},
+    },
+    ".typography-h4": {
+      "@apply text-h4": {},
+    },
+    ".typography-h5": {
+      "@apply text-h5": {},
+    },
+    ".typography-h6": {
+      "@apply text-h6": {},
+    },
+    ".typography-subtitile1": {
+      "@apply text-subtitile1": {},
+    },
+    ".typography-subtitile2": {
+      "@apply text-subtitile2": {},
+    },
+    ".typography-subtitile3": {
+      "@apply text-subtitile3": {},
+    },
+    ".typography-subtitile4": {
+      "@apply text-subtitile4": {},
+    },
+    ".typography-subtitile5": {
+      "@apply text-subtitile5": {},
+    },
+    ".typography-subtitile6": {
+      "@apply text-subtitile6": {},
+    },
+    ".typography-body1": {
+      "@apply text-body1": {},
+    },
+    ".typography-body2": {
+      "@apply text-body2": {},
+    },
+    ".typography-body3": {
+      "@apply text-body3": {},
+    },
+    ".typography-body4": {
+      "@apply text-body4": {},
+    },
+    ".typography-small1": {
+      "@apply text-small1": {},
+    },
+    ".typography-small2": {
+      "@apply text-small2": {},
+    },
+    ".typography-small3": {
+      "@apply text-small3": {},
+    },
+    ".typography-label1": {
+      "@apply text-label1": {},
+    },
+    ".typography-label2": {
+      "@apply text-label2": {},
+    },
+  });
+});

package/dist/theme/presets/colors.js

@@ -0,0 +1,166 @@
+const { DEFAULTS } = require("@rollup/plugin-node-resolve");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        // Palette colors
+        themes: {
+          50: "rgb(var(--themes-50) / <alpha-value>)",
+          100: "rgb(var(--themes-100) / <alpha-value>)",
+          200: "rgb(var(--themes-200) / <alpha-value>)",
+          300: "rgb(var(--themes-300) / <alpha-value>)",
+          400: "rgb(var(--themes-400) / <alpha-value>)",
+          500: "rgb(var(--themes-500) / <alpha-value>)",
+          600: "rgb(var(--themes-600) / <alpha-value>)",
+          700: "rgb(var(--themes-700) / <alpha-value>)",
+          800: "rgb(var(--themes-800) / <alpha-value>)",
+          900: "rgb(var(--themes-900) / <alpha-value>)",
+          DEFAULT: "rgb(var(--themes-default) / <alpha-value>)",
+          foreground: "rgb(var(--themes-foreground) / <alpha-value>)",
+        },
+        primary: {
+          5: "rgb(var(--primary-5) / <alpha-value>)",
+          10: "rgb(var(--primary-10) / <alpha-value>)",
+          20: "rgb(var(--primary-20) / <alpha-value>)",
+          30: "rgb(var(--primary-30) / <alpha-value>)",
+          40: "rgb(var(--primary-40) / <alpha-value>)",
+          50: "rgb(var(--primary-50) / <alpha-value>)",
+          60: "rgb(var(--primary-60) / <alpha-value>)",
+          70: "rgb(var(--primary-70) / <alpha-value>)",
+          80: "rgb(var(--primary-80) / <alpha-value>)",
+          90: "rgb(var(--primary-90) / <alpha-value>)",
+          100: "rgb(var(--primary-100) / <alpha-value>)",
+          110: "rgb(var(--primary-110) / <alpha-value>)",
+          120: "rgb(var(--primary-120) / <alpha-value>)",
+          130: "rgb(var(--primary-130) / <alpha-value>)",
+          140: "rgb(var(--primary-140) / <alpha-value>)",
+          150: "rgb(var(--primary-150) / <alpha-value>)",
+          DEFAULT: "rgb(var(--primary-default) / <alpha-value>)",
+          foreground: "rgb(var(--primary-foreground) / <alpha-value>)",
+        },
+        secondary: {
+          5: "rgb(var(--secondary-5) / <alpha-value>)",
+          10: "rgb(var(--secondary-10) / <alpha-value>)",
+          20: "rgb(var(--secondary-20) / <alpha-value>)",
+          30: "rgb(var(--secondary-30) / <alpha-value>)",
+          40: "rgb(var(--secondary-40) / <alpha-value>)",
+          50: "rgb(var(--secondary-50) / <alpha-value>)",
+          60: "rgb(var(--secondary-60) / <alpha-value>)",
+          70: "rgb(var(--secondary-70) / <alpha-value>)",
+          80: "rgb(var(--secondary-80) / <alpha-value>)",
+          90: "rgb(var(--secondary-90) / <alpha-value>)",
+          100: "rgb(var(--secondary-100) / <alpha-value>)",
+          110: "rgb(var(--secondary-110) / <alpha-value>)",
+          120: "rgb(var(--secondary-120) / <alpha-value>)",
+          130: "rgb(var(--secondary-130) / <alpha-value>)",
+          140: "rgb(var(--secondary-140) / <alpha-value>)",
+          150: "rgb(var(--secondary-150) / <alpha-value>)",
+          DEFAULT: "rgb(var(--secondary-default) / <alpha-value>)",
+          foreground: "rgb(var(--secondary-foreground) / <alpha-value>)",
+        },
+        tertiary: {
+          5: "rgb(var(--tertiary-5) / <alpha-value>)",
+          10: "rgb(var(--tertiary-10) / <alpha-value>)",
+          20: "rgb(var(--tertiary-20) / <alpha-value>)",
+          30: "rgb(var(--tertiary-30) / <alpha-value>)",
+          40: "rgb(var(--tertiary-40) / <alpha-value>)",
+          50: "rgb(var(--tertiary-50) / <alpha-value>)",
+          60: "rgb(var(--tertiary-60) / <alpha-value>)",
+          70: "rgb(var(--tertiary-70) / <alpha-value>)",
+          80: "rgb(var(--tertiary-80) / <alpha-value>)",
+          90: "rgb(var(--tertiary-90) / <alpha-value>)",
+          100: "rgb(var(--tertiary-100) / <alpha-value>)",
+          110: "rgb(var(--tertiary-110) / <alpha-value>)",
+          120: "rgb(var(--tertiary-120) / <alpha-value>)",
+          130: "rgb(var(--tertiary-130) / <alpha-value>)",
+          140: "rgb(var(--tertiary-140) / <alpha-value>)",
+          150: "rgb(var(--tertiary-150) / <alpha-value>)",
+          DEFAULT: "rgb(var(--tertiary-default) / <alpha-value>)",
+          foreground: "rgb(var(--tertiary-foreground) / <alpha-value>)",
+        },
+        grey: {
+          5: "rgb(var(--grey-5) / <alpha-value>)",
+          10: "rgb(var(--grey-10) / <alpha-value>)",
+          20: "rgb(var(--grey-20) / <alpha-value>)",
+          30: "rgb(var(--grey-30) / <alpha-value>)",
+          40: "rgb(var(--grey-40) / <alpha-value>)",
+          50: "rgb(var(--grey-50) / <alpha-value>)",
+          60: "rgb(var(--grey-60) / <alpha-value>)",
+          70: "rgb(var(--grey-70) / <alpha-value>)",
+          80: "rgb(var(--grey-80) / <alpha-value>)",
+          90: "rgb(var(--grey-90) / <alpha-value>)",
+          100: "rgb(var(--grey-100) / <alpha-value>)",
+          110: "rgb(var(--grey-110) / <alpha-value>)",
+          120: "rgb(var(--grey-120) / <alpha-value>)",
+          130: "rgb(var(--grey-130) / <alpha-value>)",
+          140: "rgb(var(--grey-140) / <alpha-value>)",
+          150: "rgb(var(--grey-150) / <alpha-value>)",
+          DEFAULT: "rgb(var(--grey-default) / <alpha-value>)",
+          foreground: "rgb(var(--grey-foreground) / <alpha-value>)",
+        },
+        grey2: {
+          100: "rgb(var(--grey2-100) / <alpha-value>)",
+          200: "rgb(var(--grey2-200) / <alpha-value>)",
+          300: "rgb(var(--grey2-300) / <alpha-value>)",
+          400: "rgb(var(--grey2-400) / <alpha-value>)",
+          500: "rgb(var(--grey2-500) / <alpha-value>)",
+          600: "rgb(var(--grey2-600) / <alpha-value>)",
+          700: "rgb(var(--grey2-700) / <alpha-value>)",
+          800: "rgb(var(--grey2-800) / <alpha-value>)",
+          900: "rgb(var(--grey2-900) / <alpha-value>)",
+          DEFAULT: "rgb(var(--grey2-default) / <alpha-value>)",
+          foreground: "rgb(var(--grey2-foreground) / <alpha-value>)",
+        },
+        info: {
+          100: "rgb(var(--info-100)) / <alpha-value>)",
+          120: "rgb(var(--info-120)) / <alpha-value>)",
+          DEFAULT: "rgb(var(--info-default) / <alpha-value>)",
+          foreground: "rgb(var(--info-foreground) / <alpha-value>)",
+        },
+        success: {
+          100: "rgb(var(--success-100)) / <alpha-value>)",
+          120: "rgb(var(--success-120)) / <alpha-value>)",
+          DEFAULT: "rgb(var(--success-default) / <alpha-value>)",
+          foreground: "rgb(var(--success-foreground) / <alpha-value>)",
+        },
+        warning: {
+          100: "rgb(var(--warning-100) / <alpha-value>)",
+          120: "rgb(var(--warning-120) / <alpha-value>)",
+          DEFAULT: "rgb(var(--warning-default) / <alpha-value>)",
+          foreground: "rgb(var(--warning-foreground) / <alpha-value>)",
+        },
+        error: {
+          100: "rgb(var(--error-100) / <alpha-value>)",
+          120: "rgb(var(--error-120) / <alpha-value>)",
+          DEFAULT: "rgb(var(--error-100) / <alpha-value>)",
+          foreground: "rgb(var(--error-foreground) / <alpha-value>)",
+        },
+        // Component color
+        input: {
+          text: {
+            DEFAULT: "rgb(var(--input-default-text-color) / <alpha-value>)",
+            active: "rgb(var(--input-active-text-color) / <alpha-value>)",
+            disabled: "rgb(var(--input-disabled-text-color) / <alpha-value>)",
+          },
+          stroke: {
+            DEFAULT: "rgb(var(--input-default-stroke-color) / <alpha-value>)",
+            active: "rgb(var(--input-active-stroke-color) / <alpha-value>)",
+            disabled: "rgb(var(--input-disabled-stroke-color) / <alpha-value>)",
+          },
+          background: {
+            DEFAULT: "transparent",
+            active: "transparent",
+            disabled:
+              "rgb(var(--input-disabled-background-color) / <alpha-value>)",
+          },
+          label: {
+            background:
+              "rgb(var(--input-label-background-color) / <alpha-value>)",
+          },
+        },
+      },
+    },
+  },
+};

package/dist/utils/datetime.js

@@ -0,0 +1,30 @@
+var resloveTimestamp = function (timestamp) {
+    if (String(timestamp).length > 10)
+        return timestamp / 1000;
+    return timestamp;
+};
+// Set the time to the start of the day (00:00:00)
+var getStartDateOfDay = function (date) {
+    var startDate = new Date(date);
+    startDate.setHours(0, 0, 0, 0);
+    return startDate;
+};
+// Set the time to the end of the day (23:59:59.999)
+var getEndDateOfDay = function (date) {
+    var startDate = new Date(date);
+    startDate.setHours(23, 59, 59, 999);
+    return startDate;
+};
+var getStartEndTimestampOfDay = function () {
+    var startTime = getStartDateOfDay(new Date());
+    var endTime = getEndDateOfDay(startTime);
+    return {
+        startTime: startTime,
+        endTime: endTime,
+    };
+};
+var getTimestampUTC = function (date) {
+    var dateUtc = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
+    return resloveTimestamp(dateUtc);
+};
+export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, };

package/package.json

@@ -1,13 +1,21 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.4",
-  "main": "dist/main.js",
-  "types": "dist/main.d.ts",
+  "version": "0.0.6",
+  "main": "dist/cjs/bundle.js",
+  "module": "dist/esm/bundle.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc",
-    "prepare": "npm run build ",
-    "build:css": "copyfiles src/style.css dist"
+    "prepare": "npm run build && npm run build-css && npm run build:css",
+    "build:css": "copyfiles src/styles/style.css dist",
+    "build-css": "npx tailwindcss -i ./src/theme/global.css -o ./dist/src/theme/global.css && copyfiles -u 1 \"src/theme/**/*\" dist",
+    "clean": "rm -rf dist",
+    "build:package": "npm run clean && rollup -c",
+    "public": "npm run build:package && npm publish --access=public",
+    "storybook:serve-css": "npx tailwindcss -i ./src/theme/global.css -o ./dist/src/theme/global.css",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "files": [
     "dist/**/*",
@@ -21,12 +29,37 @@
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
+    "@chromatic-com/storybook": "^1.4.0",
+    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-essentials": "^8.1.3",
+    "@storybook/addon-interactions": "^8.1.3",
+    "@storybook/addon-links": "^8.1.3",
+    "@storybook/addon-onboarding": "^8.1.3",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/blocks": "^8.1.3",
+    "@storybook/react": "^8.1.3",
+    "@storybook/react-webpack5": "^8.1.3",
+    "@storybook/test": "^8.1.3",
     "@types/node": "^20.12.12",
+    "autoprefixer": "^10.4.19",
     "babel-loader": "^9.1.3",
     "copyfiles": "^2.4.1",
     "css-loader": "^7.1.2",
+    "postcss": "^8.4.38",
+    "rollup": "^4.18.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^8.1.3",
     "style-loader": "^4.0.0",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4"
@@ -35,14 +68,12 @@
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
     "@types/react": "^18.3.2",
-    "autoprefixer": "^10.4.19",
     "axios": "^1.6.4",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "postcss": "^8.1.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
-    "rollup": "^4.17.2",
-    "tailwindcss": "^3.4.3",
+    "tailwind-merge": "^2.3.0",
     "yup": "^1.4.0"
   },
   "peerDependencies": {
@@ -51,7 +82,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@gitlab.com:cloud_arv/subsea/common/ui.git"
+    "url": ""
   },
   "bugs": {
     "url": "https://gitlab.com/cloud_arv/subsea/common/ui/issues"