@appcorp/kismaa-web-ui 0.1.18 → 0.1.19

package/molecules/badge/badge.js

@@ -1,33 +1,23 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = void 0;
 var react_1 = __importDefault(require("react"));
+var kismaa_utils_1 = require("@appcorp/kismaa-utils");
+var util_functions_1 = require("@react-pakistan/util-functions");
 var type_1 = require("./type");
-var sizeStyles = (_a = {},
-    _a[type_1.BADGE_SIZES.SM] = 'py-1.5 px-2.5 text-xs',
-    _a[type_1.BADGE_SIZES.MD] = 'py-1.5 px-2.5 lg:text-sm text-xs',
-    _a[type_1.BADGE_SIZES.LG] = 'py-2 px-4 lg:text-base text-sm',
-    _a);
+var classNameMap = function (type) {
+    var _a;
+    return (_a = {},
+        _a[type_1.BADGE_TYPE.CARD_BADGE] = "py-1.5 px-2.5 text-xs rounded-full ".concat(kismaa_utils_1.psychicSpecialityColorMap[type]),
+        _a[type_1.BADGE_TYPE.FOOTER_BADGE] = 'py-2 px-4 lg:text-base text-sm text-white bg-primary rounded-md',
+        _a);
+};
 var Badge = function (_a) {
-    var bgColor = _a.bgColor, rounded = _a.rounded, textColor = _a.textColor, handleOnClick = _a.handleOnClick, label = _a.label, size = _a.size, type = _a.type, borderColor = _a.borderColor;
-    var badgeStyles = __assign({ borderRadius: "".concat(rounded, "px"), color: textColor }, (type === type_1.BADGE_TYPES.SOLID
-        ? { backgroundColor: bgColor }
-        : { border: "1px solid ".concat(borderColor) }));
-    return (react_1.default.createElement("div", { style: badgeStyles, className: "w-fit font-primary ".concat(sizeStyles[size], " ").concat(handleOnClick && 'cursor-pointer'), onClick: handleOnClick && undefined }, label));
+    var label = _a.label, type = _a.type;
+    var specialityType = (0, util_functions_1.textToEnum)(label);
+    return (react_1.default.createElement("div", { className: "w-fit font-primary ".concat(classNameMap(specialityType)[type]) }, label));
 };
 exports.Badge = Badge;

package/molecules/badge/props.js

@@ -4,10 +4,5 @@ exports.badgeData = void 0;
 var type_1 = require("./type");
 exports.badgeData = {
     label: 'Love',
-    rounded: 6,
-    bgColor: '#B880F1',
-    textColor: '#000',
-    type: type_1.BADGE_TYPES.SOLID,
-    borderColor: '#282828',
-    size: type_1.BADGE_SIZES.MD,
+    type: type_1.BADGE_TYPE.FOOTER_BADGE,
 };

package/molecules/badge/type.d.ts

@@ -1,19 +1,8 @@
-export declare enum BADGE_SIZES {
-    SM = "SM",
-    MD = "MD",
-    LG = "LG"
-}
-export declare enum BADGE_TYPES {
-    SOLID = "SOLID",
-    OUTLINE = "OUTLINE"
+export declare enum BADGE_TYPE {
+    CARD_BADGE = "CARD_BADGE",
+    FOOTER_BADGE = "FOOTER_BADGE"
 }
 export interface BadgeProps {
-    rounded: number;
-    bgColor: string;
-    textColor: string;
-    size: BADGE_SIZES;
     label: string;
-    type: BADGE_TYPES;
-    borderColor?: string;
-    handleOnClick?: () => void;
+    type: BADGE_TYPE;
 }

package/molecules/badge/type.js

@@ -1,14 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BADGE_TYPES = exports.BADGE_SIZES = void 0;
-var BADGE_SIZES;
-(function (BADGE_SIZES) {
-    BADGE_SIZES["SM"] = "SM";
-    BADGE_SIZES["MD"] = "MD";
-    BADGE_SIZES["LG"] = "LG";
-})(BADGE_SIZES || (exports.BADGE_SIZES = BADGE_SIZES = {}));
-var BADGE_TYPES;
-(function (BADGE_TYPES) {
-    BADGE_TYPES["SOLID"] = "SOLID";
-    BADGE_TYPES["OUTLINE"] = "OUTLINE";
-})(BADGE_TYPES || (exports.BADGE_TYPES = BADGE_TYPES = {}));
+exports.BADGE_TYPE = void 0;
+var BADGE_TYPE;
+(function (BADGE_TYPE) {
+    BADGE_TYPE["CARD_BADGE"] = "CARD_BADGE";
+    BADGE_TYPE["FOOTER_BADGE"] = "FOOTER_BADGE";
+})(BADGE_TYPE || (exports.BADGE_TYPE = BADGE_TYPE = {}));

package/molecules/user-card/props.js

@@ -7,12 +7,14 @@ exports.userCardData = {
     name: 'Manish Kumar Arora',
     description: '19210 for reading 2001',
     badges: [
-        { label: 'Clairvoyant', bgColor: '#FFC5671A', textColor: '#FFC567' },
-        { label: 'Clairaudient', bgColor: '#B880F11A', textColor: '#B880F1' },
         {
-            label: 'Destiny & Life Path',
-            bgColor: '#9BB8ED1A',
-            textColor: '#9BB8ED',
+            label: 'Psychic Mediums',
+        },
+        {
+            label: 'Angel Readings',
+        },
+        {
+            label: 'Dream Interpretation',
         },
     ],
     rating: 3.5,

package/molecules/user-card/type.d.ts

@@ -4,8 +4,6 @@ export interface UserCardProps {
     name: string;
     badges: {
         label: string;
-        bgColor: string;
-        textColor: string;
     }[];
     rating: number;
     price: {

package/molecules/user-card/user-card.js

@@ -65,8 +65,8 @@ var UserCard = function (_a) {
             react_1.default.createElement("div", { className: "mb-2" },
                 react_1.default.createElement(typography_1.Typography, { variant: typography_1.TYPOGRAPHY_VARIANTS.H3 }, name)),
             react_1.default.createElement("div", { className: "mb-2 min-h-5 text-gray-500" }, !!description && (react_1.default.createElement(typography_1.Typography, { variant: typography_1.TYPOGRAPHY_VARIANTS.P1 }, description))),
-            react_1.default.createElement("div", { className: "mt-1.5 flex min-h-16 w-full flex-wrap justify-center gap-1.5" }, badges.slice(0, 5).map(function (badge, index) { return (react_1.default.createElement("div", { className: "h-fit w-fit", key: index },
-                react_1.default.createElement(badge_1.Badge, { label: badge.label, type: type_1.BADGE_TYPES.SOLID, size: type_1.BADGE_SIZES.SM, rounded: 20, bgColor: badge.bgColor, textColor: badge.textColor }))); })),
+            react_1.default.createElement("div", { className: "mt-1.5 flex w-full flex-wrap justify-center gap-1.5" }, badges.slice(0, 2).map(function (badge, index) { return (react_1.default.createElement("div", { className: "h-fit w-fit", key: index },
+                react_1.default.createElement(badge_1.Badge, { label: badge.label, type: type_1.BADGE_TYPE.CARD_BADGE }))); })),
             react_1.default.createElement("div", { className: "my-5 flex justify-center" },
                 react_1.default.createElement(ratings_1.Ratings, { rating: rating })),
             react_1.default.createElement("div", { className: "flex justify-center gap-2.5" },

package/organisms/extended-user-card/extended-user-card.js

@@ -56,7 +56,7 @@ var ExtendedUserCard = function (_a) {
             react_1.default.createElement("div", { className: "my-3 flex w-full" },
                 react_1.default.createElement("div", { className: "w-[50%] text-[#8492A7]" },
                     react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.P2 }, "Other expertise")),
-                react_1.default.createElement("div", { className: "flex w-[50%] flex-col gap-2" }, otherExpertise.map(function (expertise, index) { return (react_1.default.createElement(molecules_1.Badge, { key: index, rounded: 20, type: type_1.BADGE_TYPES.SOLID, size: type_1.BADGE_SIZES.MD, label: expertise.label, bgColor: expertise.bgColor, textColor: expertise.textColor })); }))),
+                react_1.default.createElement("div", { className: "flex w-[50%] flex-col gap-2" }, otherExpertise.map(function (expertise) { return (react_1.default.createElement(molecules_1.Badge, { key: expertise.label, label: expertise.label, type: type_1.BADGE_TYPE.CARD_BADGE })); }))),
             react_1.default.createElement("div", { className: "mt-7 w-full" },
                 react_1.default.createElement(molecules_1.Button, { label: 'Chat Now', size: molecules_1.BUTTON_SIZES.MD, type: molecules_1.BUTTON_TYPES.PRIMARY, handleOnClick: onChatClick })))));
 };

package/organisms/footer/footer.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -7,13 +40,27 @@ exports.Footer = void 0;
 var kismaa_logo_1 = require("../../atoms/kismaa-logo");
 var molecules_1 = require("../../molecules");
 var type_1 = require("../../molecules/badge/type");
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var link_1 = __importDefault(require("next/link"));
 var Footer = function (_a) {
     var _b = _a.logoClassName, logoClassName = _b === void 0 ? 'h-24 w-28' : _b, description = _a.description, socialLinks = _a.socialLinks, quickLinks = _a.quickLinks, communities = _a.communities;
     var halfLength = Math.ceil(quickLinks.length / 2);
-    var quickLinksLeft = quickLinks.slice(0, halfLength);
-    var quickLinksRight = quickLinks.slice(halfLength);
+    var quickLinksSortedAndFiltered = (0, react_1.useMemo)(function () {
+        return quickLinks
+            .filter(function (_a) {
+            var enabled = _a.enabled;
+            return enabled;
+        })
+            .sort(function (a, b) { return a.order - b.order; });
+    }, [quickLinks]);
+    var quickLinksLeft = quickLinksSortedAndFiltered
+        .filter(function (_a) {
+        var enabled = _a.enabled;
+        return enabled;
+    })
+        .sort(function (a, b) { return a.order - b.order; })
+        .slice(0, halfLength);
+    var quickLinksRight = quickLinksSortedAndFiltered.slice(halfLength);
     return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-purple-200" },
         react_1.default.createElement("div", { className: "kismaa-container" },
             react_1.default.createElement("footer", { className: "grid w-full items-end gap-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-16" },
@@ -21,9 +68,15 @@ var Footer = function (_a) {
                     react_1.default.createElement(kismaa_logo_1.KismaaLogo, { className: logoClassName }),
                     react_1.default.createElement("div", { className: "mb-10 mt-3 text-neutral-800" },
                         react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.SUBH4 }, description)),
-                    react_1.default.createElement("div", { className: "flex gap-6" }, socialLinks.map(function (_a, index) {
+                    react_1.default.createElement("div", { className: "flex gap-6" }, socialLinks
+                        .filter(function (_a) {
+                        var enabled = _a.enabled;
+                        return enabled;
+                    })
+                        .sort(function (a, b) { return a.order - b.order; })
+                        .map(function (_a) {
                         var icon = _a.icon, href = _a.href;
-                        return (react_1.default.createElement("a", { key: index, href: href, target: "_blank", rel: "noopener noreferrer", className: "cursor-pointer rounded-full bg-primary/65 p-2 transition-all duration-300 ease-in-out hover:scale-110" }, icon));
+                        return (react_1.default.createElement(link_1.default, { className: "cursor-pointer rounded-full bg-primary/65 p-2 transition-all duration-300 ease-in-out hover:scale-110", href: href, key: href, rel: "noopener noreferrer", target: "_blank" }, icon));
                     }))),
                 react_1.default.createElement("div", { className: "w-fit md:w-full" },
                     react_1.default.createElement("div", { className: "text-neutral-800" },
@@ -43,10 +96,15 @@ var Footer = function (_a) {
                     react_1.default.createElement("div", { className: "text-neutral-800" },
                         react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.H5 }, "Communities")),
                     react_1.default.createElement("div", { className: "mt-6 flex flex-wrap gap-2" }, communities
+                        .filter(function (_a) {
+                        var enabled = _a.enabled;
+                        return enabled;
+                    })
+                        .sort(function (a, b) { return a.order - b.order; })
                         .slice(0, 10)
-                        .map(function (_a, index) {
-                        var label = _a.label, bgColor = _a.bgColor, textColor = _a.textColor, outlined = _a.outlined, borderColor = _a.borderColor;
-                        return (react_1.default.createElement(molecules_1.Badge, { key: index, type: outlined ? type_1.BADGE_TYPES.OUTLINE : type_1.BADGE_TYPES.SOLID, label: label, bgColor: bgColor, textColor: textColor, borderColor: borderColor, rounded: 6, size: type_1.BADGE_SIZES.LG }));
+                        .map(function (_a) {
+                        var label = _a.label;
+                        return (react_1.default.createElement(molecules_1.Badge, { key: label, label: label, type: type_1.BADGE_TYPE.FOOTER_BADGE }));
                     })))))));
 };
 exports.Footer = Footer;

package/organisms/footer/props.js

@@ -11,40 +11,100 @@ var twitter_icon_1 = require("../../atoms/twitter-icon");
 exports.footerData = {
     description: 'Kismaa simplifies healthcare with an easy-to-use platform for booking appointments, telehealth services, and managing patient records.',
     socialLinks: [
-        { icon: react_1.default.createElement(facebook_icon_1.FacebookIcon, { className: "size-5" }), href: 'https://facebook.com' },
+        {
+            icon: react_1.default.createElement(facebook_icon_1.FacebookIcon, { className: "size-5" }),
+            href: 'https://facebook.com',
+            enabled: true,
+            order: 1,
+        },
         {
             icon: react_1.default.createElement(instagram_icon_1.InstagramIcon, { className: "size-5" }),
             href: 'https://instagram.com',
+            enabled: true,
+            order: 2,
+        },
+        {
+            icon: react_1.default.createElement(twitter_icon_1.TwitterIcon, { className: "size-5" }),
+            href: 'https://twitter.com',
+            enabled: true,
+            order: 3,
         },
-        { icon: react_1.default.createElement(twitter_icon_1.TwitterIcon, { className: "size-5" }), href: 'https://twitter.com' },
     ],
     quickLinks: [
-        { label: 'About Us', href: '/about-us' },
-        { label: 'Services', href: '/services' },
-        { label: 'Contact', href: '/contact' },
-        { label: 'FAQ', href: '/faq' },
-        { label: 'Blog', href: '/blog' },
-        { label: 'Blog', href: '/blog' },
-        { label: 'Blog', href: '/blog' },
-        { label: 'Blog', href: '/blog' },
+        {
+            label: 'About Us',
+            href: '/about-us',
+            enabled: true,
+            order: 1,
+        },
+        {
+            label: 'Services',
+            href: '/services',
+            enabled: true,
+            order: 2,
+        },
+        {
+            label: 'Contact',
+            href: '/contact',
+            enabled: true,
+            order: 3,
+        },
+        {
+            label: 'FAQ',
+            href: '/faq',
+            enabled: true,
+            order: 4,
+        },
+        {
+            label: 'Blog',
+            href: '/blog',
+            enabled: true,
+            order: 5,
+        },
+        {
+            label: 'Blog',
+            href: '/blog',
+            enabled: true,
+            order: 6,
+        },
+        {
+            label: 'Blog',
+            href: '/blog',
+            enabled: true,
+            order: 7,
+        },
+        {
+            label: 'Blog',
+            href: '/blog',
+            enabled: true,
+            order: 8,
+        },
     ],
     communities: [
-        { label: 'All', bgColor: '#B880F1', textColor: '#fff' },
-        { label: 'All', bgColor: '#B880F1', textColor: '#fff' },
-        { label: 'Love', bgColor: '#B880F1', textColor: '#fff' },
-        { label: 'Dating', bgColor: '#B880F1', textColor: '#fff' },
-        { label: 'Locality', bgColor: '#B880F1', textColor: '#fff' },
-        { label: 'Backup', bgColor: '#B880F1', textColor: '#fff' },
-        { label: 'Backup', bgColor: '#B880F1', textColor: '#fff' },
-        { label: 'Backup', bgColor: '#B880F1', textColor: '#fff' },
-        { label: 'Backup', bgColor: '#B880F1', textColor: '#fff' },
-        { label: 'Backup', bgColor: '#B880F1', textColor: '#fff' },
         {
+            enabled: true,
+            label: 'All',
+            order: 1,
+        },
+        {
+            enabled: true,
+            label: 'Love',
+            order: 2,
+        },
+        {
+            enabled: true,
+            label: 'Dating',
+            order: 3,
+        },
+        {
+            enabled: true,
+            label: 'Locality',
+            order: 4,
+        },
+        {
+            enabled: true,
             label: 'More...',
-            bgColor: '#B880F1',
-            textColor: '#000',
-            outlined: true,
-            borderColor: '#000',
+            order: 5,
         },
     ],
 };

package/organisms/footer/type.d.ts

@@ -1,20 +1,25 @@
+import { ReactNode } from 'react';
 export interface FooterCommunityItem {
+    enabled: boolean;
     label: string;
-    bgColor: string;
-    textColor: string;
-    outlined?: boolean;
-    borderColor?: string;
+    order: number;
+}
+export interface SocialLinkItem {
+    enabled: boolean;
+    href: string;
+    icon: ReactNode;
+    order: number;
+}
+export interface QuickLinkItem {
+    enabled: true;
+    href: string;
+    label: string;
+    order: number;
 }
 export interface FooterProps {
-    logoClassName?: string;
-    description: string;
-    socialLinks: {
-        icon: React.ReactNode;
-        href: string;
-    }[];
-    quickLinks: {
-        label: string;
-        href: string;
-    }[];
     communities: FooterCommunityItem[];
+    description: string;
+    logoClassName?: string;
+    quickLinks: QuickLinkItem[];
+    socialLinks: SocialLinkItem[];
 }

package/organisms/section-header/section-header.js

@@ -10,7 +10,7 @@ var solid_1 = require("@heroicons/react/24/solid");
 var type_1 = require("../../molecules/badge/type");
 var breadcrumbs_1 = require("../../molecules/breadcrumbs");
 var SectionHeader = function (_a) {
-    var heading = _a.heading, subheading = _a.subheading, renderCtaButton = _a.renderCtaButton, btnText = _a.btnText, handleButtonClick = _a.handleButtonClick, _b = _a.btnType, btnType = _b === void 0 ? molecules_1.BUTTON_TYPES.QUATERNARY : _b, _c = _a.btnIcon, btnIcon = _c === void 0 ? react_1.default.createElement(solid_1.ChevronRightIcon, { className: "size-7" }) : _c, _d = _a.badgeText, badgeText = _d === void 0 ? '' : _d, _e = _a.btnOutlined, btnOutlined = _e === void 0 ? false : _e, breadcrumbs = _a.breadcrumbs;
+    var _b = _a.badgeText, badgeText = _b === void 0 ? '' : _b, breadcrumbs = _a.breadcrumbs, _c = _a.btnIcon, btnIcon = _c === void 0 ? react_1.default.createElement(solid_1.ChevronRightIcon, { className: "size-7" }) : _c, _d = _a.btnOutlined, btnOutlined = _d === void 0 ? false : _d, btnText = _a.btnText, _e = _a.btnType, btnType = _e === void 0 ? molecules_1.BUTTON_TYPES.QUATERNARY : _e, handleButtonClick = _a.handleButtonClick, heading = _a.heading, renderCtaButton = _a.renderCtaButton, subheading = _a.subheading;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         breadcrumbs && (react_1.default.createElement("div", { className: "mb-14" },
             react_1.default.createElement(breadcrumbs_1.BreadCrumbs, { pathname: breadcrumbs }))),
@@ -19,10 +19,10 @@ var SectionHeader = function (_a) {
                 react_1.default.createElement("div", { className: "flex items-center gap-10" },
                     react_1.default.createElement("div", { className: "" },
                         react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.H2 }, heading)),
-                    !!badgeText && (react_1.default.createElement(molecules_1.Badge, { label: badgeText, type: type_1.BADGE_TYPES.SOLID, bgColor: "#B880F1", textColor: "white", rounded: 20, size: type_1.BADGE_SIZES.LG }))),
+                    !!badgeText && (react_1.default.createElement(molecules_1.Badge, { label: badgeText, type: type_1.BADGE_TYPE.FOOTER_BADGE }))),
                 subheading && (react_1.default.createElement("div", { className: "mt-3 text-black/45" },
                     react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.P1 }, subheading)))),
-            renderCtaButton && (react_1.default.createElement("div", { className: "flex w-[100%] justify-start lg:w-[50%] lg:justify-end" },
+            renderCtaButton && (react_1.default.createElement("div", { className: "flex w-full justify-start lg:w-[50%] lg:justify-end" },
                 react_1.default.createElement("div", { className: "w-fit" },
                     react_1.default.createElement(molecules_1.Button, { outlined: btnOutlined, type: btnType, label: btnText, iconSuffix: btnIcon, size: molecules_1.BUTTON_SIZES.MD, handleOnClick: handleButtonClick })))))));
 };

package/organisms/user-cards-grid/props.js

@@ -8,11 +8,21 @@ exports.userCardGridData = [
         name: 'Emma Thompson',
         description: '15420 reading for 2005',
         badges: [
-            { label: 'Psychic', bgColor: '#FFC5671A', textColor: '#FFC567' },
-            { label: 'Numerology', bgColor: '#FF33331A', textColor: '#FF3333' },
-            { label: 'Astrology', bgColor: '#9BB8ED1A', textColor: '#9BB8ED' },
-            { label: 'Psychic', bgColor: '#FFC5671A', textColor: '#FFC567' },
-            { label: 'Tarot', bgColor: '#B880F11A', textColor: '#B880F1' },
+            {
+                label: 'Angel Readings',
+            },
+            {
+                label: 'Astrology Readings',
+            },
+            {
+                label: 'Aura Cleansing',
+            },
+            {
+                label: 'Psychic Mediums',
+            },
+            {
+                label: 'Love And Relationships',
+            },
         ],
         rating: 4.8,
         price: { current: 1, duration: 5 },
@@ -25,8 +35,12 @@ exports.userCardGridData = [
         name: 'Michael Chen',
         description: '15420 reading for 2005',
         badges: [
-            { label: 'Astrology', bgColor: '#9BB8ED1A', textColor: '#9BB8ED' },
-            { label: 'Numerology', bgColor: '#FF33331A', textColor: '#FF3333' },
+            {
+                label: 'Astrology Readings',
+            },
+            {
+                label: 'Psychic Mediums',
+            },
         ],
         rating: 4.5,
         price: { current: 1.5, duration: 10 },
@@ -39,8 +53,12 @@ exports.userCardGridData = [
         name: 'Sophia Rodriguez',
         description: '15420 reading for 2005',
         badges: [
-            { label: 'Clairvoyant', bgColor: '#FFC5671A', textColor: '#FFC567' },
-            { label: 'Empath', bgColor: '#B880F11A', textColor: '#B880F1' },
+            {
+                label: 'Psychic Mediums',
+            },
+            {
+                label: 'Astrology Readings',
+            },
         ],
         rating: 4.9,
         price: { current: 2, duration: 15 },
@@ -52,8 +70,12 @@ exports.userCardGridData = [
         imageSrc: 'https://ytiwekjzaihrkrirjgpk.supabase.co/storage/v1/object/public/publicBlob/assets/psychic.webp',
         name: 'Alex Johnson',
         badges: [
-            { label: 'Palm Reading', bgColor: '#9BB8ED1A', textColor: '#9BB8ED' },
-            { label: 'Dream Analysis', bgColor: '#FF33331A', textColor: '#FF3333' },
+            {
+                label: 'Angel Readings',
+            },
+            {
+                label: 'Dream Interpretation',
+            },
         ],
         rating: 4.6,
         price: { current: 1.2, duration: 8 },
@@ -65,8 +87,12 @@ exports.userCardGridData = [
         imageSrc: 'https://ytiwekjzaihrkrirjgpk.supabase.co/storage/v1/object/public/publicBlob/assets/psychic.webp',
         name: 'Olivia Baker',
         badges: [
-            { label: 'Reiki', bgColor: '#FFC5671A', textColor: '#FFC567' },
-            { label: 'Chakra Healing', bgColor: '#B880F11A', textColor: '#B880F1' },
+            {
+                label: 'Angel Readings',
+            },
+            {
+                label: 'Dream Interpretation',
+            },
         ],
         rating: 4.7,
         price: { current: 1.8, duration: 12 },
@@ -79,8 +105,12 @@ exports.userCardGridData = [
         name: 'Daniel Lee',
         description: '15420 reading for 2005',
         badges: [
-            { label: 'I Ching', bgColor: '#9BB8ED1A', textColor: '#9BB8ED' },
-            { label: 'Feng Shui', bgColor: '#FF33331A', textColor: '#FF3333' },
+            {
+                label: 'Angel Readings',
+            },
+            {
+                label: 'Dream Interpretation',
+            },
         ],
         rating: 4.8,
         price: { current: 1.5, duration: 10 },
@@ -93,8 +123,12 @@ exports.userCardGridData = [
         name: 'Isabella Martinez',
         description: '15420 reading for 2005',
         badges: [
-            { label: 'Mediumship', bgColor: '#FFC5671A', textColor: '#FFC567' },
-            { label: 'Past Life', bgColor: '#B880F11A', textColor: '#B880F1' },
+            {
+                label: 'Psychic Mediums',
+            },
+            {
+                label: 'Dream Interpretation',
+            },
         ],
         rating: 4.9,
         price: { current: 2.2, duration: 15 },
@@ -107,8 +141,12 @@ exports.userCardGridData = [
         name: 'William Taylor',
         description: '15420 reading for 2005',
         badges: [
-            { label: 'Runes', bgColor: '#9BB8ED1A', textColor: '#9BB8ED' },
-            { label: 'Crystals', bgColor: '#FF33331A', textColor: '#FF3333' },
+            {
+                label: 'Psychic Mediums',
+            },
+            {
+                label: 'Psychic Mediums',
+            },
         ],
         rating: 4.6,
         price: { current: 1.3, duration: 8 },
@@ -121,8 +159,12 @@ exports.userCardGridData = [
         name: 'Ava Wilson',
         description: '15420 reading for 2005',
         badges: [
-            { label: 'Aura Reading', bgColor: '#FFC5671A', textColor: '#FFC567' },
-            { label: 'Energy Healing', bgColor: '#B880F11A', textColor: '#B880F1' },
+            {
+                label: 'Aura Cleansing',
+            },
+            {
+                label: 'Psychic Mediums',
+            },
         ],
         rating: 4.7,
         price: { current: 1.7, duration: 12 },
@@ -135,8 +177,12 @@ exports.userCardGridData = [
         name: 'Ethan Brown',
         description: '15420 reading for 2005',
         badges: [
-            { label: 'Numerology', bgColor: '#9BB8ED1A', textColor: '#9BB8ED' },
-            { label: 'Astrology', bgColor: '#FF33331A', textColor: '#FF3333' },
+            {
+                label: 'Numerology',
+            },
+            {
+                label: 'Angel Readings',
+            },
         ],
         rating: 4.8,
         price: { current: 1.6, duration: 10 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/kismaa-web-ui",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "source": "src/index.ts",
   "main": "lib/main.js",
   "module": "lib/module.js",
@@ -40,11 +40,10 @@
       "pre-commit": "eslint --max-warnings=0 ."
     }
   },
-  "dependencies": {
-    "@react-pakistan/util-functions": "^1.23.33"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@appcorp/app-corp-designs": "^0.4.42",
+    "@appcorp/kismaa-utils": "^0.1.34",
     "@chromatic-com/storybook": "3.2.2",
     "@eslint/compat": "^1.2.3",
     "@headlessui/react": "^2.2.0",
@@ -54,6 +53,7 @@
     "@mdx-js/react": "^3.1.0",
     "@next/eslint-plugin-next": "^15.1.0",
     "@next/mdx": "^15.0.4",
+    "@react-pakistan/util-functions": "^1.23.34",
     "@storybook/addon-essentials": "8.4.7",
     "@storybook/addon-interactions": "8.4.7",
     "@storybook/addon-onboarding": "8.4.7",