@0xsquid/ui 0.9.4 → 0.9.5

package/dist/cjs/index.js

@@ -2680,12 +2680,6 @@ const SQUID_THEME_CSS_VARIABLE_PREFIX = '--squid-theme-';
  * Mapping between readable variables name and css variables used TailwindCSS config
  */
 const themeTypesKeys = {
-    'accent-gold': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}accent-gold`,
-    },
-    'accent-salmon': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}accent-salmon`,
-    },
     'grey-100': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100`,
     },
@@ -2731,54 +2725,18 @@ const themeTypesKeys = {
     'material-light-thin': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thin`,
     },
-    'royal-100': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-100`,
-    },
-    'royal-200': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-200`,
-    },
-    'royal-300': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-300`,
-    },
     'royal-400': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-400`,
     },
     'royal-500': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-500`,
     },
-    'royal-600': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-600`,
-    },
-    'royal-700': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-700`,
-    },
-    'royal-800': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-800`,
-    },
     'status-negative': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-negative`,
     },
     'status-positive': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-positive`,
     },
-    'volt-300': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-300`,
-    },
-    'volt-400': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-400`,
-    },
-    'volt-600': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-600`,
-    },
-    'volt-700': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-700`,
-    },
-    'volt-800': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-800`,
-    },
-    'volt-900': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-900`,
-    },
 };
 
 function PlusIcon() {
@@ -3501,42 +3459,82 @@ function TokenPair({ firstToken, secondToken }) {
                 }, children: [jsxRuntime.jsx("img", { className: "tw-ml-[1px] tw-aspect-square tw-w-10", src: firstToken.imageUrl }), jsxRuntime.jsx("img", { className: "tw-mr-[1px] tw-aspect-square tw-w-10", src: secondToken.imageUrl })] })] }));
 }
 
+const themeKeysToReplace = [
+    {
+        userKey: 'content',
+        internalKey: 'grey',
+    },
+    {
+        userKey: 'accent',
+        internalKey: 'royal',
+    },
+    {
+        userKey: 'transparent',
+        internalKey: 'material',
+    },
+];
 /**
  * Parsing the user readable config to css variables
+ * Also maps the public theme variables to the internal theme variables
+ * example user theme:
+ * {
+ *   'content-100': '#000',
+ *   'content-200': '#000',
+ *   'accent-400': '#000',
+ *   'transparent-light-thin': '#000'
+ * }
+ * Resulting in:
+ * {
+ *   'grey-100': '#000',
+ *   'grey-200': '#000',
+ *   'royal-400': '#000',
+ *   'material-light-thin': '#000'
+ * }
  * @param style
  */
-const getParsedStyle = (style) => {
-    if (style) {
-        const styleKeys = Object.keys(themeTypesKeys);
-        const parsed = styleKeys.map((sk) => {
-            const themeItem = themeTypesKeys[sk];
-            let userValue = style[sk];
-            return {
-                [themeItem.cssVariable]: userValue,
-            };
-        });
-        // adds a variant with 0.05 opacity for each color
-        // will result in variables like this:
-        // var(--squid-theme-grey-100-005) --> grey-100 with 0.05 opacity
-        // styleKeys.forEach((sk) => {
-        //   const themeItem = themeTypesKeys[sk]
-        //   const valueWith005Opacity = getHexColorFromOpacityPercentage(
-        //     style[sk], // i.e "#ffffff"
-        //     0.05,
-        //   )
-        //   // { "--squid-theme-grey-100-005": "#ffffff80" }
-        //   parsed.push({
-        //     [`${themeItem.cssVariable}-005`]: valueWith005Opacity,
-        //   })
-        // })
-        parsed.push({
-            [`${themeTypesKeys['grey-100'].cssVariable}-005`]: getHexColorFromOpacityPercentage(style['grey-100'], 0.05),
-        });
-        return parsed.reduce((a, v) => {
-            const key = Object.keys(v)[0];
-            return Object.assign(Object.assign({}, a), { [key]: v[key] });
-        });
-    }
+const parseSquidTheme = (userTheme) => {
+    if (!userTheme)
+        return undefined;
+    const squidTheme = Object.entries(userTheme).reduce((internalKeys, [userKey, userValue]) => {
+        // content-* -> grey-*
+        // accent-* -> royal-*
+        // transparent-* -> material-*
+        const keyToReplace = themeKeysToReplace.find((k) => userKey.includes(k.userKey));
+        if (keyToReplace) {
+            const newKey = userKey.replace(keyToReplace.userKey, keyToReplace.internalKey);
+            internalKeys[newKey] = userValue;
+        }
+        return internalKeys;
+    }, {});
+    const styleKeys = Object.keys(themeTypesKeys);
+    const parsed = styleKeys.map((sk) => {
+        const themeItem = themeTypesKeys[sk];
+        let userValue = squidTheme[sk];
+        return {
+            [themeItem.cssVariable]: userValue,
+        };
+    });
+    // adds a variant with 0.05 opacity for each color
+    // will result in variables like this:
+    // var(--squid-theme-grey-100-005) --> grey-100 with 0.05 opacity
+    // styleKeys.forEach((sk) => {
+    //   const themeItem = themeTypesKeys[sk]
+    //   const valueWith005Opacity = getHexColorFromOpacityPercentage(
+    //     style[sk], // i.e "#ffffff"
+    //     0.05,
+    //   )
+    //   // { "--squid-theme-grey-100-005": "#ffffff80" }
+    //   parsed.push({
+    //     [`${themeItem.cssVariable}-005`]: valueWith005Opacity,
+    //   })
+    // })
+    parsed.push({
+        [`${themeTypesKeys['grey-100'].cssVariable}-005`]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
+    });
+    return parsed.reduce((a, v) => {
+        const key = Object.keys(v)[0];
+        return Object.assign(Object.assign({}, a), { [key]: v[key] });
+    });
 };
 /**
  * Returns a hexadecimal color with opacity based on the given color and opacity percentage.
@@ -3555,7 +3553,7 @@ function getHexColorFromOpacityPercentage(color, opacity) {
 }
 
 function SquidConfigProvider({ theme, children, themeType = 'light', }) {
-    const parsedStyle = getParsedStyle(theme);
+    const parsedStyle = parseSquidTheme(theme);
     return (jsxRuntime.jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-font-geist", children: children }));
 }
 

package/dist/cjs/types/providers/SquidConfigProvider.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { SquidTheme } from '../types/config';
 import { ThemeType } from '../types/components';
+import { SquidTheme } from '../types/config';
 export declare function SquidConfigProvider({ theme, children, themeType, }: {
     theme: SquidTheme;
     children?: React.ReactNode;

package/dist/cjs/types/services/internal/colorService.d.ts

@@ -1,9 +1,24 @@
 import { SquidTheme } from '../../types/config';
 /**
  * Parsing the user readable config to css variables
+ * Also maps the public theme variables to the internal theme variables
+ * example user theme:
+ * {
+ *   'content-100': '#000',
+ *   'content-200': '#000',
+ *   'accent-400': '#000',
+ *   'transparent-light-thin': '#000'
+ * }
+ * Resulting in:
+ * {
+ *   'grey-100': '#000',
+ *   'grey-200': '#000',
+ *   'royal-400': '#000',
+ *   'material-light-thin': '#000'
+ * }
  * @param style
  */
-export declare const getParsedStyle: (style?: SquidTheme) => {
+export declare const parseSquidTheme: (userTheme?: SquidTheme) => {
     [key: string]: string | undefined;
 } | undefined;
 export declare function getContrastColor({ r, g, b, }: {

package/dist/cjs/types/types/config.d.ts

@@ -2,7 +2,7 @@
  * The color format must be of type #FFFFFF
  */
 export type ColorType = `#${string}${string}${string}${string}${string}${string}`;
-export interface SquidTheme {
+export interface InternalSquidTheme {
     'grey-100': string;
     'grey-200': string;
     'grey-300': string;
@@ -12,14 +12,8 @@ export interface SquidTheme {
     'grey-700': string;
     'grey-800': string;
     'grey-900': string;
-    'royal-100': string;
-    'royal-200': string;
-    'royal-300': string;
     'royal-400': string;
     'royal-500': string;
-    'royal-600': string;
-    'royal-700': string;
-    'royal-800': string;
     'status-positive': string;
     'status-negative': string;
     'material-light-thin': string;
@@ -28,19 +22,32 @@ export interface SquidTheme {
     'material-dark-thin': string;
     'material-dark-average': string;
     'material-dark-thick': string;
-    'volt-300': string;
-    'volt-400': string;
-    'volt-600': string;
-    'volt-700': string;
-    'volt-800': string;
-    'volt-900': string;
-    'accent-salmon': string;
-    'accent-gold': string;
 }
+export type SquidTheme = {
+    'content-100': string;
+    'content-200': string;
+    'content-300': string;
+    'content-400': string;
+    'content-500': string;
+    'content-600': string;
+    'content-700': string;
+    'content-800': string;
+    'content-900': string;
+    'accent-400': string;
+    'accent-500': string;
+    'status-positive': string;
+    'status-negative': string;
+    'transparent-light-thin': string;
+    'transparent-light-average': string;
+    'transparent-light-thick': string;
+    'transparent-dark-thin': string;
+    'transparent-dark-average': string;
+    'transparent-dark-thick': string;
+};
 export declare const SQUID_THEME_CSS_VARIABLE_PREFIX = "--squid-theme-";
 /**
  * Mapping between readable variables name and css variables used TailwindCSS config
  */
-export declare const themeTypesKeys: Record<keyof SquidTheme, {
+export declare const themeTypesKeys: Record<keyof InternalSquidTheme, {
     cssVariable: string;
 }>;

package/dist/esm/index.js

@@ -2678,12 +2678,6 @@ const SQUID_THEME_CSS_VARIABLE_PREFIX = '--squid-theme-';
  * Mapping between readable variables name and css variables used TailwindCSS config
  */
 const themeTypesKeys = {
-    'accent-gold': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}accent-gold`,
-    },
-    'accent-salmon': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}accent-salmon`,
-    },
     'grey-100': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100`,
     },
@@ -2729,54 +2723,18 @@ const themeTypesKeys = {
     'material-light-thin': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thin`,
     },
-    'royal-100': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-100`,
-    },
-    'royal-200': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-200`,
-    },
-    'royal-300': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-300`,
-    },
     'royal-400': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-400`,
     },
     'royal-500': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-500`,
     },
-    'royal-600': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-600`,
-    },
-    'royal-700': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-700`,
-    },
-    'royal-800': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-800`,
-    },
     'status-negative': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-negative`,
     },
     'status-positive': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-positive`,
     },
-    'volt-300': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-300`,
-    },
-    'volt-400': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-400`,
-    },
-    'volt-600': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-600`,
-    },
-    'volt-700': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-700`,
-    },
-    'volt-800': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-800`,
-    },
-    'volt-900': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-900`,
-    },
 };
 
 function PlusIcon() {
@@ -3499,42 +3457,82 @@ function TokenPair({ firstToken, secondToken }) {
                 }, children: [jsx("img", { className: "tw-ml-[1px] tw-aspect-square tw-w-10", src: firstToken.imageUrl }), jsx("img", { className: "tw-mr-[1px] tw-aspect-square tw-w-10", src: secondToken.imageUrl })] })] }));
 }
 
+const themeKeysToReplace = [
+    {
+        userKey: 'content',
+        internalKey: 'grey',
+    },
+    {
+        userKey: 'accent',
+        internalKey: 'royal',
+    },
+    {
+        userKey: 'transparent',
+        internalKey: 'material',
+    },
+];
 /**
  * Parsing the user readable config to css variables
+ * Also maps the public theme variables to the internal theme variables
+ * example user theme:
+ * {
+ *   'content-100': '#000',
+ *   'content-200': '#000',
+ *   'accent-400': '#000',
+ *   'transparent-light-thin': '#000'
+ * }
+ * Resulting in:
+ * {
+ *   'grey-100': '#000',
+ *   'grey-200': '#000',
+ *   'royal-400': '#000',
+ *   'material-light-thin': '#000'
+ * }
  * @param style
  */
-const getParsedStyle = (style) => {
-    if (style) {
-        const styleKeys = Object.keys(themeTypesKeys);
-        const parsed = styleKeys.map((sk) => {
-            const themeItem = themeTypesKeys[sk];
-            let userValue = style[sk];
-            return {
-                [themeItem.cssVariable]: userValue,
-            };
-        });
-        // adds a variant with 0.05 opacity for each color
-        // will result in variables like this:
-        // var(--squid-theme-grey-100-005) --> grey-100 with 0.05 opacity
-        // styleKeys.forEach((sk) => {
-        //   const themeItem = themeTypesKeys[sk]
-        //   const valueWith005Opacity = getHexColorFromOpacityPercentage(
-        //     style[sk], // i.e "#ffffff"
-        //     0.05,
-        //   )
-        //   // { "--squid-theme-grey-100-005": "#ffffff80" }
-        //   parsed.push({
-        //     [`${themeItem.cssVariable}-005`]: valueWith005Opacity,
-        //   })
-        // })
-        parsed.push({
-            [`${themeTypesKeys['grey-100'].cssVariable}-005`]: getHexColorFromOpacityPercentage(style['grey-100'], 0.05),
-        });
-        return parsed.reduce((a, v) => {
-            const key = Object.keys(v)[0];
-            return Object.assign(Object.assign({}, a), { [key]: v[key] });
-        });
-    }
+const parseSquidTheme = (userTheme) => {
+    if (!userTheme)
+        return undefined;
+    const squidTheme = Object.entries(userTheme).reduce((internalKeys, [userKey, userValue]) => {
+        // content-* -> grey-*
+        // accent-* -> royal-*
+        // transparent-* -> material-*
+        const keyToReplace = themeKeysToReplace.find((k) => userKey.includes(k.userKey));
+        if (keyToReplace) {
+            const newKey = userKey.replace(keyToReplace.userKey, keyToReplace.internalKey);
+            internalKeys[newKey] = userValue;
+        }
+        return internalKeys;
+    }, {});
+    const styleKeys = Object.keys(themeTypesKeys);
+    const parsed = styleKeys.map((sk) => {
+        const themeItem = themeTypesKeys[sk];
+        let userValue = squidTheme[sk];
+        return {
+            [themeItem.cssVariable]: userValue,
+        };
+    });
+    // adds a variant with 0.05 opacity for each color
+    // will result in variables like this:
+    // var(--squid-theme-grey-100-005) --> grey-100 with 0.05 opacity
+    // styleKeys.forEach((sk) => {
+    //   const themeItem = themeTypesKeys[sk]
+    //   const valueWith005Opacity = getHexColorFromOpacityPercentage(
+    //     style[sk], // i.e "#ffffff"
+    //     0.05,
+    //   )
+    //   // { "--squid-theme-grey-100-005": "#ffffff80" }
+    //   parsed.push({
+    //     [`${themeItem.cssVariable}-005`]: valueWith005Opacity,
+    //   })
+    // })
+    parsed.push({
+        [`${themeTypesKeys['grey-100'].cssVariable}-005`]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
+    });
+    return parsed.reduce((a, v) => {
+        const key = Object.keys(v)[0];
+        return Object.assign(Object.assign({}, a), { [key]: v[key] });
+    });
 };
 /**
  * Returns a hexadecimal color with opacity based on the given color and opacity percentage.
@@ -3553,7 +3551,7 @@ function getHexColorFromOpacityPercentage(color, opacity) {
 }
 
 function SquidConfigProvider({ theme, children, themeType = 'light', }) {
-    const parsedStyle = getParsedStyle(theme);
+    const parsedStyle = parseSquidTheme(theme);
     return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-font-geist", children: children }));
 }
 

package/dist/esm/types/providers/SquidConfigProvider.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { SquidTheme } from '../types/config';
 import { ThemeType } from '../types/components';
+import { SquidTheme } from '../types/config';
 export declare function SquidConfigProvider({ theme, children, themeType, }: {
     theme: SquidTheme;
     children?: React.ReactNode;

package/dist/esm/types/services/internal/colorService.d.ts

@@ -1,9 +1,24 @@
 import { SquidTheme } from '../../types/config';
 /**
  * Parsing the user readable config to css variables
+ * Also maps the public theme variables to the internal theme variables
+ * example user theme:
+ * {
+ *   'content-100': '#000',
+ *   'content-200': '#000',
+ *   'accent-400': '#000',
+ *   'transparent-light-thin': '#000'
+ * }
+ * Resulting in:
+ * {
+ *   'grey-100': '#000',
+ *   'grey-200': '#000',
+ *   'royal-400': '#000',
+ *   'material-light-thin': '#000'
+ * }
  * @param style
  */
-export declare const getParsedStyle: (style?: SquidTheme) => {
+export declare const parseSquidTheme: (userTheme?: SquidTheme) => {
     [key: string]: string | undefined;
 } | undefined;
 export declare function getContrastColor({ r, g, b, }: {

package/dist/esm/types/types/config.d.ts

@@ -2,7 +2,7 @@
  * The color format must be of type #FFFFFF
  */
 export type ColorType = `#${string}${string}${string}${string}${string}${string}`;
-export interface SquidTheme {
+export interface InternalSquidTheme {
     'grey-100': string;
     'grey-200': string;
     'grey-300': string;
@@ -12,14 +12,8 @@ export interface SquidTheme {
     'grey-700': string;
     'grey-800': string;
     'grey-900': string;
-    'royal-100': string;
-    'royal-200': string;
-    'royal-300': string;
     'royal-400': string;
     'royal-500': string;
-    'royal-600': string;
-    'royal-700': string;
-    'royal-800': string;
     'status-positive': string;
     'status-negative': string;
     'material-light-thin': string;
@@ -28,19 +22,32 @@ export interface SquidTheme {
     'material-dark-thin': string;
     'material-dark-average': string;
     'material-dark-thick': string;
-    'volt-300': string;
-    'volt-400': string;
-    'volt-600': string;
-    'volt-700': string;
-    'volt-800': string;
-    'volt-900': string;
-    'accent-salmon': string;
-    'accent-gold': string;
 }
+export type SquidTheme = {
+    'content-100': string;
+    'content-200': string;
+    'content-300': string;
+    'content-400': string;
+    'content-500': string;
+    'content-600': string;
+    'content-700': string;
+    'content-800': string;
+    'content-900': string;
+    'accent-400': string;
+    'accent-500': string;
+    'status-positive': string;
+    'status-negative': string;
+    'transparent-light-thin': string;
+    'transparent-light-average': string;
+    'transparent-light-thick': string;
+    'transparent-dark-thin': string;
+    'transparent-dark-average': string;
+    'transparent-dark-thick': string;
+};
 export declare const SQUID_THEME_CSS_VARIABLE_PREFIX = "--squid-theme-";
 /**
  * Mapping between readable variables name and css variables used TailwindCSS config
  */
-export declare const themeTypesKeys: Record<keyof SquidTheme, {
+export declare const themeTypesKeys: Record<keyof InternalSquidTheme, {
     cssVariable: string;
 }>;

package/dist/index.d.ts

@@ -443,41 +443,27 @@ interface HeadingTextProps {
 }
 declare function HeadingText({ children, bold, size }: HeadingTextProps): react_jsx_runtime.JSX.Element;
 
-interface SquidTheme {
-    'grey-100': string;
-    'grey-200': string;
-    'grey-300': string;
-    'grey-400': string;
-    'grey-500': string;
-    'grey-600': string;
-    'grey-700': string;
-    'grey-800': string;
-    'grey-900': string;
-    'royal-100': string;
-    'royal-200': string;
-    'royal-300': string;
-    'royal-400': string;
-    'royal-500': string;
-    'royal-600': string;
-    'royal-700': string;
-    'royal-800': string;
+type SquidTheme = {
+    'content-100': string;
+    'content-200': string;
+    'content-300': string;
+    'content-400': string;
+    'content-500': string;
+    'content-600': string;
+    'content-700': string;
+    'content-800': string;
+    'content-900': string;
+    'accent-400': string;
+    'accent-500': string;
     'status-positive': string;
     'status-negative': string;
-    'material-light-thin': string;
-    'material-light-average': string;
-    'material-light-thick': string;
-    'material-dark-thin': string;
-    'material-dark-average': string;
-    'material-dark-thick': string;
-    'volt-300': string;
-    'volt-400': string;
-    'volt-600': string;
-    'volt-700': string;
-    'volt-800': string;
-    'volt-900': string;
-    'accent-salmon': string;
-    'accent-gold': string;
-}
+    'transparent-light-thin': string;
+    'transparent-light-average': string;
+    'transparent-light-thick': string;
+    'transparent-dark-thin': string;
+    'transparent-dark-average': string;
+    'transparent-dark-thick': string;
+};
 
 declare function SquidConfigProvider({ theme, children, themeType, }: {
     theme: SquidTheme;

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "author": "",
   "license": "MIT",
   "scripts": {