@stackshift-ui/blog 6.0.15 → 7.0.0-beta.1

package/src/blog_b.tsx

@@ -1,10 +1,12 @@
 import { Button } from "@stackshift-ui/button";
+import { Card, CardContent } from "@stackshift-ui/card";
 import { Container } from "@stackshift-ui/container";
 import { Flex } from "@stackshift-ui/flex";
 import { Heading } from "@stackshift-ui/heading";
 import { Image } from "@stackshift-ui/image";
 import { Link } from "@stackshift-ui/link";
 import { Section } from "@stackshift-ui/section";
+import { buildSanityLink } from "@stackshift-ui/system";
 import { Text } from "@stackshift-ui/text";
 import { format } from "date-fns";
 import { BlogProps } from ".";
@@ -70,12 +72,12 @@ function BlogItem({ post, size, key }: { post: BlogPost; size?: string; key: num
   const breakpoints = useMediaQuery("1024");
 
   return (
-    <div className="overflow-hidden rounded-md shadow">
+    <Card className="overflow-hidden rounded-md shadow">
       {post?.mainImage ? (
         <ImageContainer post={post} size={size} breakpoints={breakpoints} key={key} />
       ) : null}
-      <div className="p-6 bg-white flex flex-col justify-between" style={{ height: "295px" }}>
-        <div>
+      <Flex direction="col" className="bg-white justify-between" style={{ height: "295px" }}>
+        <CardContent className="p-4">
           <Flex align="center">
             {post?.publishedAt ? (
               <Text muted className="text-sm">
@@ -84,8 +86,8 @@ function BlogItem({ post, size, key }: { post: BlogPost; size?: string; key: num
             ) : null}
             {post?.authors && (
               <>
-                <span className="mx-2 w-1 h-1 bg-gray-500 rounded-full"></span>
-                <div className="flex mt-auto text-sm text-gray-500">
+                <span className="mx-2 w-1 h-1 bg-gray-500 rounded-full" />
+                <Flex className="mt-auto text-sm text-gray-500">
                   {post?.authors?.map((author, index, { length }) => (
                     <>
                       <Text className="italic" fontSize="sm">
@@ -94,32 +96,32 @@ function BlogItem({ post, size, key }: { post: BlogPost; size?: string; key: num
                       {index + 1 !== length ? <span>&nbsp;,&nbsp;</span> : null}
                     </>
                   ))}
-                </div>
+                </Flex>
               </>
             )}
           </Flex>
 
           {post?.title ? (
-            <Heading type="h4" className="my-2">
-              {post.title.length > 25 ? `${post.title.substring(0, 25)}...` : post.title}
+            <Heading type="h4" className="my-2 line-clamp-3 !text-2xl">
+              {post.title}
             </Heading>
           ) : null}
           {post?.excerpt ? (
-            <Text muted className="mb-6 text-justify">
-              {post.excerpt.length > 41 ? `${post.excerpt.substring(0, 41)}...` : post.excerpt}
+            <Text muted className="mb-2 text-justify line-clamp-3">
+              {post.excerpt}
             </Text>
           ) : null}
-        </div>
+        </CardContent>
         {post?.link ? (
           <Link
             aria-label="View Blog Post"
-            className="font-bold text-primary hover:text-secondary"
+            className="font-bold text-primary hover:text-secondary px-4 pb-4"
             href={`/${post?.link}`}>
             View Blog Post
           </Link>
         ) : null}
-      </div>
-    </div>
+      </Flex>
+    </Card>
   );
 }
 
@@ -134,42 +136,50 @@ function ImageContainer({
   breakpoints: boolean;
   key: number;
 }) {
-  return (
-    <>
-      {breakpoints ? (
-        <Image
-          className="object-cover w-full overflow-hidden"
-          src={`${post.mainImage}`}
-          sizes="100vw"
-          style={{ width: "100%", height: "auto", objectFit: "cover" }}
-          width={271}
-          height={248}
-          alt={post?.mainImage ?? `blog-variantB-image-${key}`}
-        />
-      ) : (
-        <div className={`${size === "lg" ? "h-[44.5rem]" : "h-[12.5rem]"}`}>
-          <Image
-            className="object-cover w-full overflow-hidden rounded-t-md"
-            src={`${post.mainImage}`}
-            sizes="100vw"
-            style={{ width: "100%", height: "100%", objectFit: "cover" }}
-            width={271}
-            height={248}
-            alt={`blog-variantB-image-${post.title}`}
-          />
-        </div>
-      )}
-    </>
+  return breakpoints ? (
+    <Image
+      className="object-cover w-full overflow-hidden"
+      src={`${post.mainImage}`}
+      sizes="100vw"
+      style={{ width: "100%", height: "auto", objectFit: "cover" }}
+      width={271}
+      height={248}
+      alt={post?.mainImage ?? `blog-variantB-image-${key}`}
+    />
+  ) : (
+    <div className={`${size === "lg" ? "h-[44.5rem]" : "h-[12.5rem]"}`}>
+      <Image
+        className="object-cover w-full overflow-hidden rounded-t-md"
+        src={`${post.mainImage}`}
+        sizes="100vw"
+        style={{ width: "100%", height: "100%", objectFit: "cover" }}
+        width={271}
+        height={248}
+        alt={`blog-variantB-image-${post.title}`}
+      />
+    </div>
   );
 }
 
 function PrimaryButton({ primaryButton }: { primaryButton?: LabeledRoute }) {
   if (!primaryButton?.label) return null;
 
+  const link = buildSanityLink({
+    type: primaryButton?.type ?? "",
+    internalLink: primaryButton?.internalLink ?? "",
+    externalLink: primaryButton?.externalLink ?? "",
+  });
+
   return (
     <div className="text-center">
-      <Button as="link" link={primaryButton} ariaLabel={primaryButton?.label}>
-        {primaryButton?.label}
+      <Button aria-label={primaryButton?.label} asChild>
+        <Link
+          href={link.href}
+          target={link.target}
+          rel={link.rel}
+          aria-label={primaryButton?.label}>
+          {primaryButton?.label}
+        </Link>
       </Button>
     </div>
   );

package/src/blog_c.tsx

@@ -1,14 +1,15 @@
 import { Badge } from "@stackshift-ui/badge";
 import { Button } from "@stackshift-ui/button";
+import { Card, CardContent } from "@stackshift-ui/card";
 import { Container } from "@stackshift-ui/container";
 import { Flex } from "@stackshift-ui/flex";
 import { Heading } from "@stackshift-ui/heading";
 import { Image } from "@stackshift-ui/image";
 import { Link } from "@stackshift-ui/link";
 import { Section } from "@stackshift-ui/section";
+import { buildSanityLink } from "@stackshift-ui/system";
 import { Text } from "@stackshift-ui/text";
 import { format } from "date-fns";
-import React from "react";
 import { BlogProps } from ".";
 import { useMediaQuery } from "./hooks/useMediaQuery";
 import { BlogPost, LabeledRoute } from "./types";
@@ -64,7 +65,8 @@ function BlogItem({ post, className, key }: { key: number; post: BlogPost; class
   const maxExcerptLength = breakpoints ? 70 : 200;
 
   return (
-    <Flex wrap className={`bg-white overflow-hidden rounded-lg shadow  w-full ${className}`}>
+    <Card
+      className={`flex flex-wrap bg-white overflow-hidden rounded-lg shadow  w-full ${className}`}>
       {post?.mainImage && (
         <Image
           className="object-cover w-full h-auto rounded-l lg:w-1/2"
@@ -75,8 +77,8 @@ function BlogItem({ post, className, key }: { key: number; post: BlogPost; class
           alt={post?.alt ?? `blog-variantC-image-${key}`}
         />
       )}
-      <div className="w-full px-6 py-6 rounded-r lg:w-1/2 lg:pt-10">
-        <div className="flex flex-col sm:flex-row sm:items-center gap-3">
+      <CardContent className="w-full px-6 py-6 rounded-r lg:w-1/2 lg:pt-10">
+        <Flex className="flex-col sm:flex-row sm:items-center gap-3">
           {post?.categories &&
             post?.categories?.map((category, index) => (
               <Badge className="bg-secondary rounded-global w-fit" key={index}>
@@ -88,7 +90,7 @@ function BlogItem({ post, className, key }: { key: number; post: BlogPost; class
               {format(new Date(post?.publishedAt), " dd MMM, yyyy")}
             </Text>
           )}
-        </div>
+        </Flex>
 
         {post?.title && (
           <Heading className="my-4 text-xl lg:text-3xl">
@@ -96,7 +98,7 @@ function BlogItem({ post, className, key }: { key: number; post: BlogPost; class
           </Heading>
         )}
         {post?.authors && (
-          <div className="flex mb-10 flex-wrap">
+          <Flex wrap className="mb-10">
             <span className="italic text-primary">By&nbsp;</span>
             {post?.authors?.map((author, index, { length }) => (
               <>
@@ -104,7 +106,7 @@ function BlogItem({ post, className, key }: { key: number; post: BlogPost; class
                 {index + 1 !== length ? <span>&nbsp;,&nbsp;</span> : null}
               </>
             ))}
-          </div>
+          </Flex>
         )}
         {post?.excerpt && (
           <Text muted className="mb-6 leading-loose lg:text-justify">
@@ -116,27 +118,37 @@ function BlogItem({ post, className, key }: { key: number; post: BlogPost; class
         {post?.link && (
           <Link
             aria-label="View Blog Post"
-            className="font-bold text-primary hover:text-primary-foreground"
+            className="font-bold text-primary hover:text-secondary"
             href={`/${post?.link}`}>
             View Blog Post
           </Link>
         )}
-      </div>
-    </Flex>
+      </CardContent>
+    </Card>
   );
 }
 
 function PrimaryButton({ primaryButton }: { primaryButton?: LabeledRoute }) {
   if (!primaryButton?.label) return null;
 
+  const link = buildSanityLink({
+    type: primaryButton?.type ?? "",
+    internalLink: primaryButton?.internalLink ?? "",
+    externalLink: primaryButton?.externalLink ?? "",
+  });
+
   return (
-    <Button
-      as="link"
-      link={primaryButton}
-      ariaLabel={primaryButton?.label}
-      className="inline-flex flex-wrap text-center bg-primary text-sm sm:text-base px-6 py-3 rounded-global">
-      {primaryButton?.label}
-    </Button>
+    <div className="text-center">
+      <Button aria-label={primaryButton?.label} asChild>
+        <Link
+          href={link.href}
+          target={link.target}
+          rel={link.rel}
+          aria-label={primaryButton?.label}>
+          {primaryButton?.label}
+        </Link>
+      </Button>
+    </div>
   );
 }
 

package/src/blog_d.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@stackshift-ui/button";
-import { Card } from "@stackshift-ui/card";
+import { Card, CardContent } from "@stackshift-ui/card";
 import { Container } from "@stackshift-ui/container";
 import { Flex } from "@stackshift-ui/flex";
 import { Heading } from "@stackshift-ui/heading";
@@ -114,7 +114,7 @@ export default function Blog_D({ subtitle, title, posts }: BlogProps) {
 }
 
 function NoPostsMessage({ message = "No post available." }) {
-  return <div className="w-full px-3 lg:w-3/4 font-medium text-lg">{message}</div>;
+  return <Text className="w-full px-3 lg:w-3/4 font-medium text-lg">{message}</Text>;
 }
 
 function SubtitleAndTitleText({ subtitle, title }: { subtitle?: string; title?: string }) {
@@ -145,10 +145,9 @@ function SearchInput({
         onChange={handleSearchChange}
       />
       <Button
-        as="button"
         variant="unstyled"
-        ariaLabel="Search button"
-        className="absolute right-0 top-0 h-full px-3 bg-white border-r rounded-global text-primary flex items-center">
+        aria-label="Search button"
+        className="absolute right-0 top-0 h-full px-3 border-r rounded-global text-primary flex items-center">
         <svg
           className="w-6 h-6"
           fill="none"
@@ -177,7 +176,7 @@ function CategoryTab({
   setActiveTab: (category: string) => void;
 }) {
   return (
-    <Card className="w-full px-3 mb-8 bg-white lg:mb-0 lg:w-1/4" borderRadius="md">
+    <Card className="w-full p-3 mb-8 bg-white lg:mb-0 lg:w-1/4 rounded-md">
       {categories && (
         <React.Fragment>
           <Heading
@@ -220,9 +219,8 @@ function CategoryItem({
   return (
     <li key={key}>
       <Button
-        as="button"
         variant="unstyled"
-        ariaLabel="Show all blog posts"
+        aria-label="Show all blog posts"
         className={`mb-4 block ${
           !category ? "hidden" : "block"
         } px-3 py-2 hover:bg-secondary-foreground focus:outline-none w-full text-left rounded ${
@@ -263,10 +261,10 @@ function PostItem({ post }: { post?: BlogPost }) {
   if (!post) return null;
 
   return (
-    <Flex wrap className="mb-8 lg:mb-6 bg-white shadow rounded-lg">
+    <Card className="flex flex-wrap mb-8 lg:mb-6 bg-white shadow rounded-lg">
       <div className="w-full h-full mb-4 lg:mb-0 lg:w-1/4">
         <Image
-          className="object-cover w-full h-full overflow-hidden rounded"
+          className="object-cover w-full h-full overflow-hidden rounded-l"
           src={`${post?.mainImage}`}
           sizes="100vw"
           width={188}
@@ -274,13 +272,13 @@ function PostItem({ post }: { post?: BlogPost }) {
           alt={post?.alt ?? `blog-variantD-image-${post?.title}`}
         />
       </div>
-      <div className="w-full px-3 py-2 lg:w-3/4">
+      <CardContent className="w-full px-3 py-2 lg:w-3/4">
         {post?.title && (
           <Link
             aria-label={post?.title}
-            className="mb-1 text-2xl font-bold hover:text-secondary font-heading"
+            className="mb-1 text-2xl font-bold hover:text-secondary font-heading line-clamp-3 sm:line-clamp-1"
             href={`/${post?.link ?? "page-not-added"}`}>
-            {post?.title.length > 25 ? post?.title?.substring(0, 25) + "..." : post?.title}
+            {post?.title}
           </Link>
         )}
         <Flex wrap align="center" gap={1} className="mb-2 text-sm">
@@ -300,12 +298,12 @@ function PostItem({ post }: { post?: BlogPost }) {
           ) : null}
         </Flex>
         {post?.excerpt ? (
-          <Text muted>
-            {post?.excerpt.length > 60 ? post?.excerpt.substring(0, 60) + "..." : post?.excerpt}
+          <Text muted className="line-clamp-6 sm:line-clamp-3">
+            {post?.excerpt}
           </Text>
         ) : null}
-      </div>
-    </Flex>
+      </CardContent>
+    </Card>
   );
 }
 
@@ -330,8 +328,7 @@ function Pagination({ blogsPerPage, totalBlogs, paginate, currentPage }: Paginat
         {pageNumber.map(number => (
           <Button
             variant="unstyled"
-            as="button"
-            ariaLabel={`Page ${number}`}
+            aria-label={`Page ${number}`}
             key={number}
             className={`${
               currentPage === number

package/dist/chunk-7K4AC7BM.mjs

@@ -1 +0,0 @@
-import{a as P}from"./chunk-PC6NMI3O.mjs";import{Button as w}from"@stackshift-ui/button";import{Card as I}from"@stackshift-ui/card";import{Container as M}from"@stackshift-ui/container";import{Flex as v}from"@stackshift-ui/flex";import{Heading as C}from"@stackshift-ui/heading";import{Image as F}from"@stackshift-ui/image";import{Input as $}from"@stackshift-ui/input";import{Link as E}from"@stackshift-ui/link";import{Section as H}from"@stackshift-ui/section";import{Text as y}from"@stackshift-ui/text";import f from"react";import{jsx as n,jsxs as c}from"react/jsx-runtime";function R({subtitle:e,title:t,posts:i}){let[l,u]=f.useState("All"),[r,d]=f.useState(1),[h,k]=f.useState(""),o=6;f.useEffect(()=>{d(1)},[l]);let x=(i!=null?i:[]).flatMap(a=>{var g;return((g=a==null?void 0:a.categories)!=null?g:[]).map(b=>({category:b==null?void 0:b.title,title:a==null?void 0:a.title,slug:a==null?void 0:a.slug,excerpt:a==null?void 0:a.excerpt,publishedAt:a==null?void 0:a.publishedAt,mainImage:a==null?void 0:a.mainImage,authors:a==null?void 0:a.authors}))}),B=x==null?void 0:x.reduce((a,g)=>{let b=g==null?void 0:g.category;return a.indexOf(b)===-1&&a.push(b),a},[]),m=l==="All"?i==null?void 0:i.filter(a=>{var g;return(g=a==null?void 0:a.title)==null?void 0:g.toLowerCase().includes(h.toLowerCase())}):x.filter(a=>{var g;return(a==null?void 0:a.category)===l&&((g=a==null?void 0:a.title)==null?void 0:g.toLowerCase().includes(h.toLowerCase()))}),N=r*o,S=N-o,A=m==null?void 0:m.slice(S,N),L=a=>d(a);return n(H,{className:"py-20 bg-background",children:c(M,{maxWidth:1280,children:[n(D,{subtitle:e,title:t}),n(O,{handleSearchChange:a=>{k(a.target.value),u("All"),d(1)}}),c(v,{wrap:!0,children:[n(j,{categories:B,activeTab:l,setActiveTab:u}),(m==null?void 0:m.length)===0?n(z,{}):n(Q,{currentPosts:A,activeTab:l,blogsPerPage:o})]}),n(W,{blogsPerPage:o,totalBlogs:m==null?void 0:m.length,paginate:L,currentPage:r})]})})}function z({message:e="No post available."}){return n("div",{className:"w-full px-3 lg:w-3/4 font-medium text-lg",children:e})}function D({subtitle:e,title:t}){return c("div",{className:"w-full mb-16",children:[e?n(y,{weight:"bold",className:"text-secondary",children:e}):null,t?n(C,{fontSize:"3xl",children:t}):null]})}function O({handleSearchChange:e}){return c("div",{className:"relative mb-5 w-full lg:w-1/4",children:[n($,{type:"text","aria-label":"Search, find any question you want to ask...",className:"w-full bg-white border rounded-global font-heading focus:border-gray-500 focus:outline-none",placeholder:"Search posts...",onChange:e}),n(w,{as:"button",variant:"unstyled",ariaLabel:"Search button",className:"absolute right-0 top-0 h-full px-3 bg-white border-r rounded-global text-primary flex items-center",children:n("svg",{className:"w-6 h-6",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:n("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"})})})]})}function j({categories:e,activeTab:t,setActiveTab:i}){return n(I,{className:"w-full px-3 mb-8 bg-white lg:mb-0 lg:w-1/4",borderRadius:"md",children:e&&c(f.Fragment,{children:[n(C,{type:"h3",muted:!0,weight:"bold",className:"mb-4 text-base uppercase lg:text-base",children:"Topics"}),c("ul",{children:[(e==null?void 0:e.length)>1&&n(T,{activeTab:t,setActiveTab:i,category:"All"}),e==null?void 0:e.map((l,u)=>n(T,{activeTab:t,setActiveTab:i,category:l},u))]})]})})}function T({key:e,activeTab:t,setActiveTab:i,category:l}){return n("li",{children:n(w,{as:"button",variant:"unstyled",ariaLabel:"Show all blog posts",className:`mb-4 block ${l?"block":"hidden"} px-3 py-2 hover:bg-secondary-foreground focus:outline-none w-full text-left rounded ${t===l?"font-bold text-primary focus:outline-none bg-secondary-foreground":null}`,onClick:()=>i(l),children:l})},e)}function Q({currentPosts:e,activeTab:t,blogsPerPage:i}){var l;return e?n("div",{className:"w-full px-3 lg:w-3/4",children:t==="All"?e==null?void 0:e.map((u,r)=>n(s,{post:u},r)):(l=e==null?void 0:e.slice(0,i))==null?void 0:l.map((u,r)=>n(s,{post:u},r))}):null}function s({post:e}){var t,i,l,u;return e?c(v,{wrap:!0,className:"mb-8 lg:mb-6 bg-white shadow rounded-lg",children:[n("div",{className:"w-full h-full mb-4 lg:mb-0 lg:w-1/4",children:n(F,{className:"object-cover w-full h-full overflow-hidden rounded",src:`${e==null?void 0:e.mainImage}`,sizes:"100vw",width:188,height:129,alt:(t=e==null?void 0:e.alt)!=null?t:`blog-variantD-image-${e==null?void 0:e.title}`})}),c("div",{className:"w-full px-3 py-2 lg:w-3/4",children:[(e==null?void 0:e.title)&&n(E,{"aria-label":e==null?void 0:e.title,className:"mb-1 text-2xl font-bold hover:text-secondary font-heading",href:`/${(i=e==null?void 0:e.link)!=null?i:"page-not-added"}`,children:(e==null?void 0:e.title.length)>25?((l=e==null?void 0:e.title)==null?void 0:l.substring(0,25))+"...":e==null?void 0:e.title}),c(v,{wrap:!0,align:"center",gap:1,className:"mb-2 text-sm",children:[e!=null&&e.authors?(u=e==null?void 0:e.authors)==null?void 0:u.map((r,d,{length:h})=>c(v,{children:[n(y,{className:"text-primary",children:r==null?void 0:r.name}),d+1!==h?n("span",{children:"\xA0,\xA0"}):null]},d)):null,e!=null&&e.publishedAt&&(e!=null&&e.authors)?n("span",{className:"mx-2 text-gray-500",children:"\u2022"}):null,e!=null&&e.publishedAt?n(y,{muted:!0,children:P(new Date(e==null?void 0:e.publishedAt)," dd MMM, yyyy")}):null]}),e!=null&&e.excerpt?n(y,{muted:!0,children:(e==null?void 0:e.excerpt.length)>60?(e==null?void 0:e.excerpt.substring(0,60))+"...":e==null?void 0:e.excerpt}):null]})]}):null}function W({blogsPerPage:e,totalBlogs:t,paginate:i,currentPage:l}){if(!e)return null;let u=[];for(let r=1;r<=Math.ceil(t/e);r++)u.push(r);return n("nav",{className:"mt-4","aria-label":"Pagination",children:n("ul",{className:"flex space-x-2 justify-end mr-5",children:u.map(r=>n(w,{variant:"unstyled",as:"button",ariaLabel:`Page ${r}`,className:`${l===r?"bg-secondary-foreground text-gray-500":"bg-white hover:bg-secondary-foreground hover:text-gray-500"} text-primary font-medium py-2 px-4 border border-primary rounded-global focus:outline-none`,onClick:()=>i(r),children:r},r))})})}export{R as a};

package/dist/chunk-DK7SFSP5.mjs

@@ -1 +0,0 @@
-import{a as b}from"./chunk-TMLYY2AQ.mjs";import{a as s}from"./chunk-PC6NMI3O.mjs";import{Button as h}from"@stackshift-ui/button";import{Container as w}from"@stackshift-ui/container";import{Flex as c}from"@stackshift-ui/flex";import{Heading as o}from"@stackshift-ui/heading";import{Image as u}from"@stackshift-ui/image";import{Link as N}from"@stackshift-ui/link";import{Section as P}from"@stackshift-ui/section";import{Text as g}from"@stackshift-ui/text";import{Fragment as d,jsx as l,jsxs as r}from"react/jsx-runtime";function k({subtitle:e,title:i,posts:m,primaryButton:n}){return l(P,{className:"py-20 bg-background",children:r(w,{maxWidth:1280,children:[l(y,{subtitle:e,title:i}),l(z,{posts:m,count:0,blogsPerPage:5}),l(I,{primaryButton:n})]})})}function y({subtitle:e,title:i}){return r("div",{className:"w-full mb-16 text-center",children:[e?l(g,{weight:"bold",className:"text-secondary",children:e}):null,i?l(o,{fontSize:"3xl",children:i}):null]})}function z({posts:e,count:i,blogsPerPage:m}){return r(c,{wrap:!0,justify:"center",className:"mb-16",gap:4,children:[l("div",{className:"w-full lg:w-[45%]",children:e==null?void 0:e.slice(i,i+1).map((n,a)=>l(f,{size:"lg",post:n},a))}),l(c,{wrap:!0,className:"w-full lg:w-[45%]",gap:4,children:e==null?void 0:e.slice(i+1,m).map((n,a)=>l("div",{className:"w-full lg:basis-[45%]",children:l(f,{post:n,size:"sm"},a)},a))})]})}function f({post:e,size:i,key:m}){var a;let n=b("1024");return r("div",{className:"overflow-hidden rounded-md shadow",children:[e!=null&&e.mainImage?l($,{post:e,size:i,breakpoints:n},m):null,r("div",{className:"p-6 bg-white flex flex-col justify-between",style:{height:"295px"},children:[r("div",{children:[r(c,{align:"center",children:[e!=null&&e.publishedAt?l(g,{muted:!0,className:"text-sm",children:s(new Date(e.publishedAt)," dd MMM, yyyy")}):null,(e==null?void 0:e.authors)&&r(d,{children:[l("span",{className:"mx-2 w-1 h-1 bg-gray-500 rounded-full"}),l("div",{className:"flex mt-auto text-sm text-gray-500",children:(a=e==null?void 0:e.authors)==null?void 0:a.map((t,v,{length:x})=>r(d,{children:[l(g,{className:"italic",fontSize:"sm",children:t==null?void 0:t.name}),v+1!==x?l("span",{children:"\xA0,\xA0"}):null]}))})]})]}),e!=null&&e.title?l(o,{type:"h4",className:"my-2",children:e.title.length>25?`${e.title.substring(0,25)}...`:e.title}):null,e!=null&&e.excerpt?l(g,{muted:!0,className:"mb-6 text-justify",children:e.excerpt.length>41?`${e.excerpt.substring(0,41)}...`:e.excerpt}):null]}),e!=null&&e.link?l(N,{"aria-label":"View Blog Post",className:"font-bold text-primary hover:text-secondary",href:`/${e==null?void 0:e.link}`,children:"View Blog Post"}):null]})]})}function $({post:e,size:i,breakpoints:m,key:n}){var a;return l(d,{children:m?l(u,{className:"object-cover w-full overflow-hidden",src:`${e.mainImage}`,sizes:"100vw",style:{width:"100%",height:"auto",objectFit:"cover"},width:271,height:248,alt:(a=e==null?void 0:e.mainImage)!=null?a:`blog-variantB-image-${n}`}):l("div",{className:`${i==="lg"?"h-[44.5rem]":"h-[12.5rem]"}`,children:l(u,{className:"object-cover w-full overflow-hidden rounded-t-md",src:`${e.mainImage}`,sizes:"100vw",style:{width:"100%",height:"100%",objectFit:"cover"},width:271,height:248,alt:`blog-variantB-image-${e.title}`})})})}function I({primaryButton:e}){return e!=null&&e.label?l("div",{className:"text-center",children:l(h,{as:"link",link:e,ariaLabel:e==null?void 0:e.label,children:e==null?void 0:e.label})}):null}export{k as a};

package/dist/chunk-HBY4OOKD.mjs

@@ -1 +0,0 @@
-import{a as P}from"./chunk-TMLYY2AQ.mjs";import{a as v}from"./chunk-PC6NMI3O.mjs";import{Badge as L}from"@stackshift-ui/badge";import{Button as y}from"@stackshift-ui/button";import{Container as $}from"@stackshift-ui/container";import{Flex as h}from"@stackshift-ui/flex";import{Heading as k}from"@stackshift-ui/heading";import{Image as C}from"@stackshift-ui/image";import{Link as I}from"@stackshift-ui/link";import{Section as M}from"@stackshift-ui/section";import{Text as g}from"@stackshift-ui/text";import{Fragment as R,jsx as l,jsxs as i}from"react/jsx-runtime";function S({subtitle:e,title:a,posts:m,primaryButton:d}){return l(M,{className:"py-20 bg-background",children:i($,{maxWidth:1280,children:[i(h,{align:"center",justify:"between",className:"flex-col mb-16 md:flex-row",gap:5,children:[l(A,{subtitle:e,title:a}),l(H,{primaryButton:d})]}),l(B,{posts:m,blogsPerPage:3})]})})}function A({subtitle:e,title:a}){return i("div",{className:"flex flex-col gap-3 text-center md:text-left",children:[e?l(g,{weight:"bold",className:"text-primary",children:e}):null,a?l(k,{fontSize:"3xl",children:a}):null]})}function B({posts:e,blogsPerPage:a}){var m;return e?l("div",{children:(m=e==null?void 0:e.slice(0,a))==null?void 0:m.map((d,r)=>l("div",{className:"flex flex-wrap mb-8 overflow-hidden rounded-md shadow",children:l(F,{post:d,className:`${r%2===0?"flex-row":"flex-row-reverse"}`},r)},r))}):null}function F({post:e,className:a,key:m}){var x,c,b,u,w,t,N;let r=P("1100")?70:200;return i(h,{wrap:!0,className:`bg-white overflow-hidden rounded-lg shadow  w-full ${a}`,children:[(e==null?void 0:e.mainImage)&&l(C,{className:"object-cover w-full h-auto rounded-l lg:w-1/2",src:`${e==null?void 0:e.mainImage}`,sizes:"100vw",width:554,height:416,alt:(x=e==null?void 0:e.alt)!=null?x:`blog-variantC-image-${m}`}),i("div",{className:"w-full px-6 py-6 rounded-r lg:w-1/2 lg:pt-10",children:[i("div",{className:"flex flex-col sm:flex-row sm:items-center gap-3",children:[(e==null?void 0:e.categories)&&((c=e==null?void 0:e.categories)==null?void 0:c.map((n,f)=>l(L,{className:"bg-secondary rounded-global w-fit",children:n==null?void 0:n.title},f))),(e==null?void 0:e.publishedAt)&&l(g,{muted:!0,className:"m-1",children:v(new Date(e==null?void 0:e.publishedAt)," dd MMM, yyyy")})]}),(e==null?void 0:e.title)&&l(k,{className:"my-4 text-xl lg:text-3xl",children:((b=e==null?void 0:e.title)==null?void 0:b.length)>40?((u=e==null?void 0:e.title)==null?void 0:u.substring(0,40))+"...":e==null?void 0:e.title}),(e==null?void 0:e.authors)&&i("div",{className:"flex mb-10 flex-wrap",children:[l("span",{className:"italic text-primary",children:"By\xA0"}),(w=e==null?void 0:e.authors)==null?void 0:w.map((n,f,{length:T})=>i(R,{children:[l(g,{className:"italic text-primary",children:n==null?void 0:n.name}),f+1!==T?l("span",{children:"\xA0,\xA0"}):null]}))]}),(e==null?void 0:e.excerpt)&&l(g,{muted:!0,className:"mb-6 leading-loose lg:text-justify",children:((t=e==null?void 0:e.excerpt)==null?void 0:t.length)>r?((N=e==null?void 0:e.excerpt)==null?void 0:N.substring(0,r))+"...":e==null?void 0:e.excerpt}),(e==null?void 0:e.link)&&l(I,{"aria-label":"View Blog Post",className:"font-bold text-primary hover:text-primary-foreground",href:`/${e==null?void 0:e.link}`,children:"View Blog Post"})]})]})}function H({primaryButton:e}){return e!=null&&e.label?l(y,{as:"link",link:e,ariaLabel:e==null?void 0:e.label,className:"inline-flex flex-wrap text-center bg-primary text-sm sm:text-base px-6 py-3 rounded-global",children:e==null?void 0:e.label}):null}export{S as a};

package/dist/chunk-OSCI5VC3.mjs

@@ -1 +0,0 @@
-import{a as b}from"./chunk-PC6NMI3O.mjs";import{Button as w}from"@stackshift-ui/button";import{Container as N}from"@stackshift-ui/container";import{Flex as u}from"@stackshift-ui/flex";import{Heading as h}from"@stackshift-ui/heading";import{Image as k}from"@stackshift-ui/image";import{Link as P}from"@stackshift-ui/link";import{Section as y}from"@stackshift-ui/section";import{Text as v}from"@stackshift-ui/text";import{Fragment as t,jsx as l,jsxs as m}from"react/jsx-runtime";function A({subtitle:e,title:d,posts:a,primaryButton:c}){return l(y,{className:"py-20 bg-background",children:m(N,{maxWidth:1280,children:[l(F,{subtitle:e,title:d}),l(L,{posts:a}),l(S,{primaryButton:c})]})})}function F({subtitle:e,title:d}){return m("div",{className:"mb-16 text-center",children:[e?l(v,{weight:"bold",className:"text-secondary",children:e}):null,d?l(h,{fontSize:"3xl",children:d}):null]})}function L({posts:e}){var c,x,f,n;if(!e)return null;let d=6,a=0;return m(u,{gap:4,className:"flex-col lg:flex-row",children:[m("div",{className:"w-full space-y-5 lg:w-1/2",children:[(c=e==null?void 0:e.slice(a,a+1))==null?void 0:c.map((i,r)=>l(g,{post:i},r)),l(u,{gap:4,className:"flex-col lg:flex-row",children:(x=e==null?void 0:e.slice(a+1,a+3))==null?void 0:x.map((i,r)=>l(g,{post:i},r))})]}),m("div",{className:"w-full space-y-5 lg:w-1/2",children:[l(u,{gap:4,className:"flex-col lg:flex-row",children:(f=e==null?void 0:e.slice(a+3,a+5))==null?void 0:f.map((i,r)=>l(g,{post:i},r))}),(n=e==null?void 0:e.slice(a+5,d))==null?void 0:n.map((i,r)=>l(g,{post:i},r))]})]})}function g({post:e,key:d}){var a,c,x,f;return m("div",{className:"relative w-full h-64 rounded",children:[e!=null&&e.mainImage?l(k,{className:"relative object-cover w-full h-full overflow-hidden rounded-md",src:`${e==null?void 0:e.mainImage}`,alt:(a=e==null?void 0:e.alt)!=null?a:`blog-variantA-image-${d}`,sizes:"(min-width: 1540px) 740px, (min-width: 1280px) 612px, (min-width: 1040px) 484px, (min-width: 780px) 736px, (min-width: 680px) 608px, calc(94.44vw - 15px)"}):null,l("div",{className:"absolute inset-0 bg-gray-900 rounded-md opacity-75"}),m("div",{className:"absolute inset-0 flex flex-col items-start p-6",children:[e!=null&&e.categories?l("div",{className:"absolute flex left-5 top-5",children:(c=e==null?void 0:e.categories)==null?void 0:c.map((n,i)=>l("span",{className:"px-3 py-1 mb-auto mr-3 text-sm font-bold uppercase bg-white rounded-full text-primary",children:n==null?void 0:n.title},i))}):null,m(u,{align:"center",className:"mt-auto",children:[l("span",{className:"mt-auto text-sm text-gray-500",children:e!=null&&e.publishedAt?b(new Date(e==null?void 0:e.publishedAt),"dd MMM, yyyy"):""}),(e==null?void 0:e.authors)&&m(t,{children:[l("span",{className:"mx-2 w-1 h-1 bg-gray-500 rounded-full"}),l("div",{className:"flex mt-auto text-sm text-gray-500",children:(x=e==null?void 0:e.authors)==null?void 0:x.map((n,i,{length:r})=>m(t,{children:[l(v,{className:"italic",fontSize:"sm",children:n==null?void 0:n.name}),i+1!==r?l("span",{children:"\xA0,\xA0"}):null]}))})]})]}),e!=null&&e.title?l(P,{className:"text-lg font-bold text-white transform hover:scale-110 hover:text-secondary motion-reduce:transform-none",href:`/${e==null?void 0:e.link}`,children:((f=e==null?void 0:e.title)==null?void 0:f.length)>40?(e==null?void 0:e.title.substring(0,40))+"...":e==null?void 0:e.title}):null]})]})}function S({primaryButton:e}){return e!=null&&e.label?l("div",{className:"mt-10 text-center",children:l(w,{as:"link",link:e,ariaLabel:e==null?void 0:e.label,children:e==null?void 0:e.label})}):null}export{A as a};