@appcorp/kismaa-web-ui 0.1.12 → 0.1.13

package/molecules/button/button.js

@@ -20,7 +20,7 @@ var colorMap = (_a = {},
     _a[type_1.BUTTON_TYPES.TEXT] = 'bg-transparent text-slate-900/90 lg:px-0 lg:py-0',
     _a);
 var outlinedColorMap = (_b = {},
-    _b[type_1.BUTTON_TYPES.PRIMARY] = 'border-[1px] border-primary text-primary bg-transparent hover:bg-primary hover:text-secondary',
+    _b[type_1.BUTTON_TYPES.PRIMARY] = 'border-[1px] border-primary text-primary bg-transparent hover:bg-primary hover:text-white transition-all ease-in-out duration-300',
     _b[type_1.BUTTON_TYPES.SECONDARY] = 'border-[1px] border-secondary text-secondary bg-transparent hover:bg-secondary hover:text-white',
     _b[type_1.BUTTON_TYPES.QUATERNARY] = 'border-[1px] border-[#7F9ED6] text-[#7F9ED6] bg-transparent hover:bg-[#7F9ED6] hover:text-white',
     _b[type_1.BUTTON_TYPES.TERTIARY] = 'border-[1px] border-gray-300 text-tertiary ',
@@ -31,9 +31,9 @@ var outlinedColorMap = (_b = {},
     _b[type_1.BUTTON_TYPES.TEXT] = '',
     _b);
 var hoverMap = (_c = {},
-    _c[type_1.BUTTON_TYPES.PRIMARY] = 'hover:bg-transparent border-[1px] border-primary hover:border-primary hover:text-primary',
-    _c[type_1.BUTTON_TYPES.SECONDARY] = 'hover:bg-transparent border-[1px] border-secondary hover:border-secondary hover:text-secondary',
-    _c[type_1.BUTTON_TYPES.QUATERNARY] = 'hover:bg-transparent border-[1px] border-[#7F9ED6] hover:border-[#7F9ED6] hover:text-[#7F9ED6]',
+    _c[type_1.BUTTON_TYPES.PRIMARY] = 'hover:bg-purple-400',
+    _c[type_1.BUTTON_TYPES.SECONDARY] = 'hover:bg-primary',
+    _c[type_1.BUTTON_TYPES.QUATERNARY] = 'hover:bg-[#A9C2EB]',
     _c[type_1.BUTTON_TYPES.TERTIARY] = 'hover:bg-tertiary hover:text-white',
     _c[type_1.BUTTON_TYPES.ERROR] = '',
     _c[type_1.BUTTON_TYPES.SUCCESS] = '',
@@ -43,8 +43,8 @@ var hoverMap = (_c = {},
     _c);
 var sizeMap = (_d = {},
     _d[type_1.BUTTON_SIZES.SM] = 'text-base font-medium lg:px-6 lg:py-2 px-4 py-1',
-    _d[type_1.BUTTON_SIZES.MD] = 'text-md lg:px-8 lg:py-4 px-6 py-2',
-    _d[type_1.BUTTON_SIZES.LG] = 'text-lg lg:px-10 lg:py-5 px-8 py-3',
+    _d[type_1.BUTTON_SIZES.MD] = 'text-base lg:px-6 lg:py-3 px-4 py-2',
+    _d[type_1.BUTTON_SIZES.LG] = 'text-lg lg:px-10 lg:py-4 px-8 py-3',
     _d[type_1.BUTTON_SIZES.XL] = 'text-xl font-medium lg:px-10 lg:py-5 px-8 py-3',
     _d);
 var Button = function (_a) {
@@ -54,7 +54,7 @@ var Button = function (_a) {
         ? disabledStyles
         : type === type_1.BUTTON_TYPES.SUCCESS || type === type_1.BUTTON_TYPES.ERROR
             ? ''
-            : hoverMap[type], " ").concat(sizeMap[size]);
+            : "".concat(!outlined ? hoverMap[type] : ''), " ").concat(sizeMap[size]);
     var renderContent = function () {
         if (type === type_1.BUTTON_TYPES.LOADING) {
             return (react_1.default.createElement("div", { className: "flex min-w-32 items-center justify-center gap-2" },

package/organisms/about-us-banner/about-us-banner.js

@@ -7,8 +7,9 @@ exports.AboutUsBanner = void 0;
 var molecules_1 = require("../../molecules");
 var breadcrumbs_1 = require("../../molecules/breadcrumbs");
 var react_1 = __importDefault(require("react"));
+var image_1 = __importDefault(require("next/image"));
 var AboutUsBanner = function (_a) {
-    var bannerImageUrl = _a.bannerImageUrl, breadcrumbs = _a.breadcrumbs, description = _a.description, heading = _a.heading, subHeading = _a.subHeading;
+    var bannerImageUrl = _a.bannerImageUrl, breadcrumbs = _a.breadcrumbs, description = _a.description, heading = _a.heading, subHeading = _a.subHeading, _b = _a.imageAlt, imageAlt = _b === void 0 ? 'Banner Image' : _b;
     return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-white" },
         react_1.default.createElement("div", { className: "kismaa-container" },
             react_1.default.createElement("div", { className: "mb-10" },
@@ -20,10 +21,7 @@ var AboutUsBanner = function (_a) {
                     react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.H3 }, subHeading)),
                 react_1.default.createElement("div", { className: "mt-2 text-slate-400" },
                     react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.P1 }, description))),
-            react_1.default.createElement("div", { className: "mt-11 h-60 overflow-hidden rounded-sm lg:h-[700px]", style: {
-                    backgroundImage: "url(".concat(bannerImageUrl, ")"),
-                    backgroundSize: 'cover',
-                    backgroundPosition: 'center',
-                } }))));
+            react_1.default.createElement("div", { className: "mt-11 h-60 overflow-hidden rounded-sm lg:h-[700px]" },
+                react_1.default.createElement(image_1.default, { src: bannerImageUrl, width: 400, height: 400, alt: imageAlt, className: "h-full w-full object-cover" })))));
 };
 exports.AboutUsBanner = AboutUsBanner;

package/organisms/about-us-banner/type.d.ts

@@ -4,4 +4,5 @@ export interface AboutUsBannerProps {
     subHeading: string;
     description: string;
     bannerImageUrl: string;
+    imageAlt?: string;
 }

package/organisms/about-us-stats/about-us-stats.js

@@ -8,7 +8,7 @@ var react_1 = __importDefault(require("react"));
 var molecules_1 = require("../../molecules");
 var AboutUsStats = function (_a) {
     var description = _a.description, statsData = _a.statsData;
-    return (react_1.default.createElement("section", { className: "kismaa-section-spacing" },
+    return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-white" },
         react_1.default.createElement("div", { className: "kismaa-container" },
             react_1.default.createElement("div", { className: "text-gray-500" },
                 react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.P1 }, description)),

package/organisms/about-user/about-user.js

@@ -9,7 +9,7 @@ var image_1 = __importDefault(require("next/image"));
 var react_1 = __importDefault(require("react"));
 var AboutUser = function (_a) {
     var title = _a.title, imageSrc = _a.imageSrc, description = _a.description;
-    return (react_1.default.createElement("div", null,
+    return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "text-gray-800" },
             react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.H2 }, title)),
         react_1.default.createElement("div", { className: "mt-5 flex w-full flex-col items-stretch gap-7 lg:flex-row" },

package/organisms/banner/banner.js

@@ -11,7 +11,7 @@ var molecules_1 = require("../../molecules");
 var solid_1 = require("@heroicons/react/24/solid");
 var bannerSizeMap = (_a = {},
     _a[type_1.BANNER_TYPES.HEADER] = 'lg:h-96 h-72',
-    _a[type_1.BANNER_TYPES.HERO] = 'lg:pt-56 pt-48 lg:pb-44 pb-16',
+    _a[type_1.BANNER_TYPES.HERO] = 'lg:pt-72 pt-48 lg:pb-32 pb-16',
     _a);
 var Banner = function (_a) {
     var type = _a.type, heading = _a.heading, subHeading = _a.subHeading, firstButtonLabel = _a.firstButtonLabel, firstButtonOnClick = _a.firstButtonOnClick, secondButtonLabel = _a.secondButtonLabel, backgroundImage = _a.backgroundImage, secondButtonOnClick = _a.secondButtonOnClick;
@@ -29,7 +29,7 @@ var Banner = function (_a) {
     return (react_1.default.createElement("section", { style: {
             backgroundImage: "url(".concat(backgroundImage, ")"),
             backgroundSize: 'cover',
-            backgroundPosition: 'center',
+            backgroundPosition: '50% 50%',
         } },
         react_1.default.createElement("div", { className: "kismaa-container ".concat(bannerSizeMap[type]) }, type === type_1.BANNER_TYPES.HERO && renderHeroContent())));
 };

package/organisms/core-values-section/core-values-section.js

@@ -10,7 +10,7 @@ var solid_1 = require("@heroicons/react/24/solid");
 var react_1 = __importDefault(require("react"));
 var CoreValuesSection = function (_a) {
     var heading = _a.heading, description = _a.description, coreValuesCard = _a.coreValuesCard, btnHandleOnClick = _a.btnHandleOnClick, btnLabel = _a.btnLabel;
-    return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-gray-100/95" },
+    return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-gray-100" },
         react_1.default.createElement("div", { className: "kismaa-container" },
             react_1.default.createElement("div", { className: "text-center" },
                 react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.H2 }, heading)),

package/organisms/customer-reviews/customer-reviews.js

@@ -24,7 +24,7 @@ var arrow_left_icon_1 = require("../../atoms/arrow-left-icon");
 var arrow_right_icon_1 = require("../../atoms/arrow-right-icon");
 var CustomerReviews = function (_a) {
     var reviews = _a.reviews, onSwiper = _a.onSwiper, heading = _a.heading, subHeading = _a.subHeading, handleNextClick = _a.handleNextClick, handlePreviousClick = _a.handlePreviousClick, isSectionBgEnabled = _a.isSectionBgEnabled;
-    return (react_1.default.createElement("section", { className: "kismaa-section-spacing ".concat(isSectionBgEnabled ? 'bg-gray-100/95' : 'bg-white') },
+    return (react_1.default.createElement("section", { className: "kismaa-section-spacing ".concat(isSectionBgEnabled ? 'bg-gray-100' : 'bg-white') },
         react_1.default.createElement("div", { className: "kismaa-container" },
             react_1.default.createElement("div", { className: "mb-8 text-center" },
                 react_1.default.createElement("div", { className: "text-gray-800" },

package/organisms/faq/faq.js

@@ -10,7 +10,7 @@ var section_header_1 = require("../section-header");
 var Faq = function (_a) {
     var isSectionBgEnabled = _a.isSectionBgEnabled, handleBtnClick = _a.handleBtnClick, faqListItems = _a.faqListItems, subHeading = _a.subHeading, btnText = _a.btnText, faqItemsLimit = _a.faqItemsLimit, breadcrumbs = _a.breadcrumbs;
     var shownFaqs = faqListItems.slice(0, faqItemsLimit);
-    return (react_1.default.createElement("section", { className: "kismaa-section-spacing ".concat(isSectionBgEnabled ? 'bg-gray-100/95' : 'bg-white') },
+    return (react_1.default.createElement("section", { className: "kismaa-section-spacing ".concat(isSectionBgEnabled ? 'bg-gray-100' : 'bg-white') },
         react_1.default.createElement("div", { className: "kismaa-container" },
             react_1.default.createElement(section_header_1.SectionHeader, { heading: "FAQs", subheading: subHeading, renderCtaButton: faqListItems.length > faqItemsLimit, handleButtonClick: handleBtnClick, btnText: btnText, breadcrumbs: breadcrumbs }),
             react_1.default.createElement("div", { className: "mt-9" },

package/organisms/footer/footer.js

@@ -14,7 +14,7 @@ var Footer = function (_a) {
     var halfLength = Math.ceil(quickLinks.length / 2);
     var quickLinksLeft = quickLinks.slice(0, halfLength);
     var quickLinksRight = quickLinks.slice(halfLength);
-    return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-purple-200/90" },
+    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" },
                 react_1.default.createElement("div", { className: "w-full" },

package/organisms/get-app-banner/get-app-banner.js

@@ -9,8 +9,8 @@ var react_1 = __importDefault(require("react"));
 var GetAppBanner = function (_a) {
     var backgroundImageUrl = _a.backgroundImageUrl, getAppDescription = _a.getAppDescription, getAppHeading = _a.getAppHeading, handleAppStoreClick = _a.handleAppStoreClick, handlePlayStoreClick = _a.handlePlayStoreClick, _b = _a.bannerBgEnabled, bannerBgEnabled = _b === void 0 ? false : _b;
     return (react_1.default.createElement("section", { className: "".concat(!bannerBgEnabled ? 'kismaa-section-spacing bg-white' : '') },
-        react_1.default.createElement("div", { className: "".concat(bannerBgEnabled ? 'bg-gray-100/95 bg-cover' : '') },
-            react_1.default.createElement("div", { className: "kismaa-container rounded-md bg-gray-100/95 bg-cover ".concat(backgroundImageUrl ? 'lg:bg-[image:var(--bg-image)]' : ''), style: {
+        react_1.default.createElement("div", { className: "".concat(bannerBgEnabled ? 'bg-gray-100 bg-cover' : '') },
+            react_1.default.createElement("div", { className: "kismaa-container rounded-md bg-gray-100 bg-cover ".concat(backgroundImageUrl ? 'lg:bg-[image:var(--bg-image)]' : ''), style: {
                     '--bg-image': "url(".concat(backgroundImageUrl, ")"),
                     backgroundRepeat: 'no-repeat',
                     backgroundSize: 'cover',

package/organisms/highlight-banner/highlight-banner.js

@@ -10,13 +10,13 @@ var button_1 = require("../../molecules/button");
 var solid_1 = require("@heroicons/react/24/solid");
 var HighlightBanner = function (_a) {
     var bannerButtonText = _a.bannerButtonText, bannerDescription = _a.bannerDescription, bannerTitle = _a.bannerTitle, handleCtaClick = _a.handleCtaClick, bannerBg = _a.bannerBg;
-    return (react_1.default.createElement("section", { className: "kismaa-section-spacing" },
-        react_1.default.createElement("div", { className: "kismaa-container rounded-md bg-purple-300/60", style: {
+    return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-purple-200" },
+        react_1.default.createElement("div", { className: "kismaa-container rounded-md", style: {
                 backgroundImage: "url(".concat(bannerBg, ")"),
                 backgroundPosition: '50% 15%',
                 backgroundRepeat: 'no-repeat',
             } },
-            react_1.default.createElement("div", { className: "mx-auto flex flex-col items-center justify-center px-4 py-12 text-center text-quaternary lg:px-32 lg:py-24" },
+            react_1.default.createElement("div", { className: "mx-auto flex flex-col items-center justify-center px-4 pb-4 pt-5 text-center text-quaternary lg:px-32 lg:pb-5 lg:pt-7" },
                 react_1.default.createElement(typography_1.Typography, { variant: typography_1.TYPOGRAPHY_VARIANTS.H1 }, bannerTitle),
                 react_1.default.createElement("div", { className: "mt-3 flex flex-col items-center gap-4 text-gray-600" },
                     react_1.default.createElement(typography_1.Typography, { variant: typography_1.TYPOGRAPHY_VARIANTS.P1 }, bannerDescription),

package/organisms/horoscope-details-section/horoscope-details-section.js

@@ -9,7 +9,7 @@ var horoscope_details_1 = require("../horoscope-details/horoscope-details");
 var section_header_1 = require("../section-header");
 var HoroscopeDetailsSection = function (_a) {
     var heading = _a.heading, horoscopeDetails = _a.horoscopeDetails, sidebarDescription = _a.sidebarDescription, sidebarImage = _a.sidebarImage, breadcrumbs = _a.breadcrumbs;
-    return (react_1.default.createElement("section", { className: "kismaa-section-spacing" },
+    return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-white" },
         react_1.default.createElement("div", { className: "kismaa-container" },
             react_1.default.createElement(section_header_1.SectionHeader, { heading: heading, subheading: "", renderCtaButton: false, handleButtonClick: function () { return void 0; }, breadcrumbs: breadcrumbs }),
             react_1.default.createElement(horoscope_details_1.HoroscopeDetail, { content: horoscopeDetails, sidebarImage: sidebarImage, sideBarDescription: sidebarDescription }))));

package/organisms/horoscope-section/horoscope-section.js

@@ -9,7 +9,7 @@ var section_header_1 = require("../section-header");
 var horoscope_cards_grid_1 = require("../horoscope-cards-grid");
 var HoroscopeSection = function (_a) {
     var sectionHeading = _a.sectionHeading, breadcrumbs = _a.breadcrumbs, cardItems = _a.cardItems, cardLimit = _a.cardLimit, cardSize = _a.cardSize;
-    return (react_1.default.createElement("section", { className: "kismaa-section-spacing" },
+    return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-white" },
         react_1.default.createElement("div", { className: "kismaa-container" },
             react_1.default.createElement(section_header_1.SectionHeader, { heading: sectionHeading, subheading: "", renderCtaButton: false, handleButtonClick: function () { return null; }, btnText: "", breadcrumbs: breadcrumbs }),
             react_1.default.createElement("div", { className: "mt-9" },

package/organisms/navbar/navbar.js

@@ -30,7 +30,7 @@ var Navbar = function (_a) {
                         react_1.default.createElement("div", { className: "w-fit" },
                             react_1.default.createElement(molecules_1.Button, { type: molecules_1.BUTTON_TYPES.TEXT, handleOnClick: handleLogin, label: loginLabel, size: molecules_1.BUTTON_SIZES.SM })),
                         react_1.default.createElement("div", { className: "w-fit" },
-                            react_1.default.createElement(molecules_1.Button, { type: molecules_1.BUTTON_TYPES.SECONDARY, handleOnClick: handleSignup, label: signupLabel, iconSuffix: react_1.default.createElement(solid_1.ChevronRightIcon, { className: "size-5" }), size: molecules_1.BUTTON_SIZES.MD })))))),
+                            react_1.default.createElement(molecules_1.Button, { type: molecules_1.BUTTON_TYPES.SECONDARY, handleOnClick: handleSignup, label: signupLabel, iconSuffix: react_1.default.createElement(solid_1.ChevronRightIcon, { className: "h-full w-6" }), size: molecules_1.BUTTON_SIZES.MD })))))),
         isMobileMenuOpen && (react_1.default.createElement("div", { className: "bg-purple-200/90 lg:hidden" },
             react_1.default.createElement("div", { className: "flex flex-col gap-4 px-4 py-6" }, displayedLinks === null || displayedLinks === void 0 ? void 0 :
                 displayedLinks.map(function (link) { return (react_1.default.createElement(link_1.default, { key: link.label, href: link.href, className: "cursor-pointer" },

package/organisms/our-mission/our-mission.js

@@ -8,7 +8,7 @@ var molecules_1 = require("../../molecules");
 var react_1 = __importDefault(require("react"));
 var OurMission = function (_a) {
     var bgImage1 = _a.bgImage1, bgImage2 = _a.bgImage2, heading1 = _a.heading1, heading2 = _a.heading2, description1 = _a.description1, description2 = _a.description2;
-    return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-gray-100/95" },
+    return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-gray-100" },
         react_1.default.createElement("div", { className: "kismaa-container" },
             react_1.default.createElement("div", { className: "grid gap-24 lg:grid-cols-12" },
                 react_1.default.createElement("div", { className: "lg:col-span-6" },

package/organisms/our-mission/props.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ourMissionData = void 0;
 exports.ourMissionData = {
-    bgImage1: '/our-mission.png',
-    bgImage2: '/our-vission.png',
-    heading1: 'Our Vission',
+    bgImage1: 'https://ytiwekjzaihrkrirjgpk.supabase.co/storage/v1/object/public/publicBlob/assets/our-mission.webp',
+    bgImage2: 'https://ytiwekjzaihrkrirjgpk.supabase.co/storage/v1/object/public/publicBlob/assets/our-vission.webp',
+    heading1: 'Our Vision',
     heading2: 'Our Mission',
     description1: 'Lorem ipsum dolor sit amet consectetur adipiscing elit vel consectetur fusce lorem elit maecenas et faucibus nulla arcu sem. In semperi ips pellentesque. A feugiat vitae id felis rhoncus tristique. Suscipit diam massa et ut euismodu nibh quis pretium, ut enim proin lobortis turpis sagittis.',
     description2: 'Lorem ipsum dolor sit amet consectetur adipiscing elit vel consectetur fusce lorem elit maecenas et faucibus nulla arcu sem. In semperi ips pellentesque. A feugiat vitae id felis rhoncus tristique. Suscipit diam massa et ut euismodu nibh quis pretium, ut enim proin lobortis turpis sagittis.',

package/organisms/review-card/review-card.js

@@ -10,6 +10,7 @@ var triangle_icon_1 = require("../../atoms/triangle-icon");
 var molecules_1 = require("../../molecules");
 var ratings_1 = require("../../molecules/ratings/ratings");
 var image_1 = __importDefault(require("next/image"));
+var util_functions_1 = require("@react-pakistan/util-functions");
 var ReviewCard = function (_a) {
     var _b = _a.isActive, isActive = _b === void 0 ? false : _b, quote = _a.quote, personImage = _a.personImage, name = _a.name, role = _a.role, rating = _a.rating, isTrustPilot = _a.isTrustPilot, _c = _a.quoteIconFill, quoteIconFill = _c === void 0 ? '#B689E5' : _c, _d = _a.triangleIconFill, triangleIconFill = _d === void 0 ? '#E7DEF1' : _d;
     return (react_1.default.createElement("div", null,
@@ -17,7 +18,7 @@ var ReviewCard = function (_a) {
                 ? 'bg-purple-400/75 text-white'
                 : 'bg-[#E7DEF1] text-slate-800/95') },
             react_1.default.createElement(quote_icon_1.QuoteIcon, { fill: isActive ? '#FFF' : quoteIconFill, className: "size-10" }),
-            react_1.default.createElement("div", { className: "mt-6" }, quote.length > 150 ? "".concat(quote.slice(0, 150), "...") : quote),
+            react_1.default.createElement("div", { className: "mt-6" }, (0, util_functions_1.truncateText)(quote, 150)),
             react_1.default.createElement("div", { className: "absolute -bottom-7 left-12" },
                 react_1.default.createElement(triangle_icon_1.TriangleIcon, { fill: isActive ? '#D0A3FD' : triangleIconFill, className: "size-10 rotate-180" }))),
         react_1.default.createElement("div", { className: "m-12 flex gap-6" },

package/organisms/terms-section/terms-section.js

@@ -53,7 +53,7 @@ var TermsSection = function (_a) {
             });
         }
     }, []);
-    return (react_1.default.createElement("div", { className: "kismaa-section-spacing", ref: containerRef },
+    return (react_1.default.createElement("div", { className: "kismaa-section-spacing bg-white", ref: containerRef },
         react_1.default.createElement("div", { className: "kismaa-container" },
             react_1.default.createElement(section_header_1.SectionHeader, { heading: sectionHeading, subheading: "", renderCtaButton: false, handleButtonClick: function () { return null; }, breadcrumbs: breadcrumbs }),
             react_1.default.createElement("div", { className: "mt-4 grid w-full gap-7 lg:mt-8 lg:grid-cols-12" },

package/organisms/user-details/user-details.js

@@ -12,7 +12,7 @@ var attributes_section_1 = require("../attributes-section");
 var section_header_1 = require("../section-header");
 var UserDetails = function (_a) {
     var heading = _a.heading, userName = _a.userName, bannerImageSrc = _a.bannerImageSrc, aboutTitle = _a.aboutTitle, aboutImageSrc = _a.aboutImageSrc, description = _a.description, attributesData = _a.attributesData, attributeHeading = _a.attributeHeading, isActive = _a.isActive, profileImageUrl = _a.profileImageUrl, title = _a.title, totalChat = _a.totalChat, totalRating = _a.totalRating, avgRating = _a.avgRating, expertIn = _a.expertIn, onChatClick = _a.onChatClick, otherExpertise = _a.otherExpertise, fee = _a.fee, breadcrumbs = _a.breadcrumbs;
-    return (react_1.default.createElement("section", { className: "kismaa-section-spacing" },
+    return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-white" },
         react_1.default.createElement("div", { className: "kismaa-container" },
             react_1.default.createElement(section_header_1.SectionHeader, { heading: heading, subheading: "", renderCtaButton: false, handleButtonClick: function () { return null; }, breadcrumbs: breadcrumbs }),
             react_1.default.createElement("div", { className: "grid w-full gap-6 xl:grid-cols-12 xl:gap-24" },

package/organisms/users-list-explore/users-list-explore.js

@@ -10,7 +10,7 @@ var user_cards_grid_1 = require("../user-cards-grid");
 var pagination_1 = require("../pagination/pagination");
 var UsersListExplore = function (_a) {
     var badgeText = _a.badgeText, breadcrumbsUrl = _a.breadcrumbsUrl, btnIcon = _a.btnIcon, btnOutlined = _a.btnOutlined, btnText = _a.btnText, btnType = _a.btnType, cardItems = _a.cardItems, cardsLimit = _a.cardsLimit, currentPage = _a.currentPage, handleButtonClick = _a.handleButtonClick, heading = _a.heading, onNext = _a.onNext, onPageChange = _a.onPageChange, onPrevious = _a.onPrevious, subheading = _a.subheading, totalPages = _a.totalPages;
-    return (react_1.default.createElement("section", { className: "kismaa-section-spacing" },
+    return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-white" },
         react_1.default.createElement("div", { className: "kismaa-container" },
             react_1.default.createElement(section_header_1.SectionHeader, { heading: heading, subheading: subheading, renderCtaButton: true, handleButtonClick: handleButtonClick, btnText: btnText, btnOutlined: btnOutlined, badgeText: badgeText, btnType: btnType, btnIcon: btnIcon, breadcrumbs: breadcrumbsUrl }),
             react_1.default.createElement(user_cards_grid_1.UserCardsGrid, { cardItems: cardItems, cardsLimit: cardsLimit }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/kismaa-web-ui",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "source": "src/index.ts",
   "main": "lib/main.js",
   "module": "lib/module.js",
@@ -40,7 +40,9 @@
       "pre-commit": "eslint --max-warnings=0 ."
     }
   },
-  "dependencies": {},
+  "dependencies": {
+    "@react-pakistan/util-functions": "^1.23.33"
+  },
   "devDependencies": {
     "@appcorp/app-corp-designs": "^0.4.28",
     "@chromatic-com/storybook": "3.2.2",

package/templates/user-lists/user-lists.js

@@ -19,7 +19,7 @@ var organisms_1 = require("../../organisms");
 var react_1 = __importDefault(require("react"));
 var UserLists = function (_a) {
     var navbar = _a.navbar, banner = _a.banner, userListExplore = _a.userListExplore, getAppBanner = _a.getAppBanner, ctaBanner = _a.ctaBanner, footer = _a.footer;
-    return (react_1.default.createElement("div", null,
+    return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(organisms_1.Navbar, __assign({}, navbar)),
         react_1.default.createElement(organisms_1.Banner, __assign({}, banner)),
         react_1.default.createElement(organisms_1.UsersListExplore, __assign({}, userListExplore)),