@szymonpiatek/designsystem 0.0.11 → 0.0.12

package/dist/index.d.cts

@@ -1551,6 +1551,7 @@ declare const CommentSection: react.ForwardRefExoticComponent<CommentSectionProp
 interface CommentSectionProps extends HTMLAttributes<HTMLElement> {
     title?: string;
     comments: CommentItem[];
+    maxWidth?: ContainerMaxWidth;
     onLike?: (commentId: string) => void;
     onReply?: (commentId: string) => void;
 }
@@ -1562,6 +1563,7 @@ interface FaqSectionProps extends HTMLAttributes<HTMLElement> {
     description?: string;
     items: FaqItemData[];
     headingAlign?: SectionHeadingAlign;
+    maxWidth?: ContainerMaxWidth;
     defaultOpenIndex?: number;
 }
 
@@ -1577,6 +1579,7 @@ interface FeatureGridProps extends HTMLAttributes<HTMLElement> {
     columns?: FeatureGridColumns;
     cardVariant?: CardVariant;
     itemLayout?: FeatureItemProps['layout'];
+    maxWidth?: ContainerMaxWidth;
 }
 
 declare const LogoCloud: react.ForwardRefExoticComponent<LogoCloudProps & react.RefAttributes<HTMLElement>>;
@@ -1595,6 +1598,7 @@ interface LogoCloudProps extends HTMLAttributes<HTMLElement> {
     variant?: LogoCloudVariant;
     monochrome?: boolean;
     logoHeight?: number | string;
+    maxWidth?: ContainerMaxWidth;
 }
 
 declare const NewsletterSection: react.ForwardRefExoticComponent<NewsletterSectionProps & react.RefAttributes<HTMLElement>>;
@@ -1610,6 +1614,7 @@ interface NewsletterSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'onSu
     headingAlign?: SectionHeadingAlign;
     layout?: NewsletterLayout;
     cardVariant?: CardVariant;
+    maxWidth?: ContainerMaxWidth;
     onSubmit?: (email: string, event: FormEvent<HTMLFormElement>) => void;
 }
 declare const newsletterLayouts: NewsletterLayout[];
@@ -1647,6 +1652,7 @@ interface StatsSectionProps extends HTMLAttributes<HTMLElement> {
     columns?: StatsSectionColumns;
     cardVariant?: CardVariant;
     statAlign?: 'left' | 'center';
+    maxWidth?: ContainerMaxWidth;
 }
 
 declare const TeamSection: react.ForwardRefExoticComponent<TeamSectionProps & react.RefAttributes<HTMLElement>>;
@@ -1660,6 +1666,7 @@ interface TeamSectionProps extends HTMLAttributes<HTMLElement> {
     headingAlign?: SectionHeadingAlign;
     columns?: TeamSectionColumns;
     cardVariant?: CardVariant;
+    maxWidth?: ContainerMaxWidth;
 }
 
 declare const TestimonialsSection: react.ForwardRefExoticComponent<TestimonialsSectionProps & react.RefAttributes<HTMLElement>>;
@@ -1673,6 +1680,7 @@ interface TestimonialsSectionProps extends HTMLAttributes<HTMLElement> {
     headingAlign?: SectionHeadingAlign;
     columns?: TestimonialsSectionColumns;
     cardVariant?: CardVariant;
+    maxWidth?: ContainerMaxWidth;
 }
 
 declare function CommandPalette({ open, onClose, groups, placeholder, emptyLabel, onSelect, }: CommandPaletteProps): react.ReactPortal | null;

package/dist/index.d.ts

@@ -1551,6 +1551,7 @@ declare const CommentSection: react.ForwardRefExoticComponent<CommentSectionProp
 interface CommentSectionProps extends HTMLAttributes<HTMLElement> {
     title?: string;
     comments: CommentItem[];
+    maxWidth?: ContainerMaxWidth;
     onLike?: (commentId: string) => void;
     onReply?: (commentId: string) => void;
 }
@@ -1562,6 +1563,7 @@ interface FaqSectionProps extends HTMLAttributes<HTMLElement> {
     description?: string;
     items: FaqItemData[];
     headingAlign?: SectionHeadingAlign;
+    maxWidth?: ContainerMaxWidth;
     defaultOpenIndex?: number;
 }
 
@@ -1577,6 +1579,7 @@ interface FeatureGridProps extends HTMLAttributes<HTMLElement> {
     columns?: FeatureGridColumns;
     cardVariant?: CardVariant;
     itemLayout?: FeatureItemProps['layout'];
+    maxWidth?: ContainerMaxWidth;
 }
 
 declare const LogoCloud: react.ForwardRefExoticComponent<LogoCloudProps & react.RefAttributes<HTMLElement>>;
@@ -1595,6 +1598,7 @@ interface LogoCloudProps extends HTMLAttributes<HTMLElement> {
     variant?: LogoCloudVariant;
     monochrome?: boolean;
     logoHeight?: number | string;
+    maxWidth?: ContainerMaxWidth;
 }
 
 declare const NewsletterSection: react.ForwardRefExoticComponent<NewsletterSectionProps & react.RefAttributes<HTMLElement>>;
@@ -1610,6 +1614,7 @@ interface NewsletterSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'onSu
     headingAlign?: SectionHeadingAlign;
     layout?: NewsletterLayout;
     cardVariant?: CardVariant;
+    maxWidth?: ContainerMaxWidth;
     onSubmit?: (email: string, event: FormEvent<HTMLFormElement>) => void;
 }
 declare const newsletterLayouts: NewsletterLayout[];
@@ -1647,6 +1652,7 @@ interface StatsSectionProps extends HTMLAttributes<HTMLElement> {
     columns?: StatsSectionColumns;
     cardVariant?: CardVariant;
     statAlign?: 'left' | 'center';
+    maxWidth?: ContainerMaxWidth;
 }
 
 declare const TeamSection: react.ForwardRefExoticComponent<TeamSectionProps & react.RefAttributes<HTMLElement>>;
@@ -1660,6 +1666,7 @@ interface TeamSectionProps extends HTMLAttributes<HTMLElement> {
     headingAlign?: SectionHeadingAlign;
     columns?: TeamSectionColumns;
     cardVariant?: CardVariant;
+    maxWidth?: ContainerMaxWidth;
 }
 
 declare const TestimonialsSection: react.ForwardRefExoticComponent<TestimonialsSectionProps & react.RefAttributes<HTMLElement>>;
@@ -1673,6 +1680,7 @@ interface TestimonialsSectionProps extends HTMLAttributes<HTMLElement> {
     headingAlign?: SectionHeadingAlign;
     columns?: TestimonialsSectionColumns;
     cardVariant?: CardVariant;
+    maxWidth?: ContainerMaxWidth;
 }
 
 declare function CommandPalette({ open, onClose, groups, placeholder, emptyLabel, onSelect, }: CommandPaletteProps): react.ReactPortal | null;

package/dist/index.js

@@ -11348,12 +11348,13 @@ var CommentSection = forwardRef(
   ({
     title = "Komentarze",
     comments,
+    maxWidth = "xl",
     onLike,
     onReply,
     ...rest
   }, ref) => {
     const total = countTotal(comments);
-    return /* @__PURE__ */ jsxs(Section, { ref, ...rest, children: [
+    return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxs(Container, { maxWidth, children: [
       /* @__PURE__ */ jsxs(Heading, { children: [
         title,
         /* @__PURE__ */ jsxs(CommentCount, { children: [
@@ -11375,7 +11376,7 @@ var CommentSection = forwardRef(
           reply.id
         )) })
       ] }, comment.id)) })
-    ] });
+    ] }) });
   }
 );
 CommentSection.displayName = "CommentSection";
@@ -11388,11 +11389,12 @@ var FaqSection = forwardRef(
     description,
     items,
     headingAlign = "center",
+    maxWidth = "xl",
     defaultOpenIndex,
     ...rest
   }, ref) => {
     const hasHeading = Boolean(title || description);
-    return /* @__PURE__ */ jsxs(Section, { ref, ...rest, children: [
+    return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxs(Container, { maxWidth, children: [
       hasHeading && /* @__PURE__ */ jsx(SectionHeading, { title: title ?? "", description, align: headingAlign }),
       /* @__PURE__ */ jsx(List6, { $hasHeading: hasHeading, children: items.map((item, index) => /* @__PURE__ */ jsx(
         FaqItem,
@@ -11402,7 +11404,7 @@ var FaqSection = forwardRef(
         },
         `${item.question}-${index}`
       )) })
-    ] });
+    ] }) });
   }
 );
 FaqSection.displayName = "FaqSection";
@@ -11429,10 +11431,11 @@ var FeatureGrid = forwardRef(
     columns = 3,
     cardVariant = "default",
     itemLayout = "card",
+    maxWidth = "xl",
     ...rest
   }, ref) => {
     const hasHeading = Boolean(title || description);
-    return /* @__PURE__ */ jsxs(Section, { ref, ...rest, children: [
+    return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxs(Container, { maxWidth, children: [
       hasHeading && /* @__PURE__ */ jsx(SectionHeading, { title: title ?? "", description, align: headingAlign }),
       /* @__PURE__ */ jsx(Grid3, { $columns: columns, $hasHeading: hasHeading, $iconLeft: itemLayout === "icon-left", children: features.map((feature, index) => /* @__PURE__ */ jsx(
         FeatureItem,
@@ -11443,7 +11446,7 @@ var FeatureGrid = forwardRef(
         },
         `${feature.title}-${index}`
       )) })
-    ] });
+    ] }) });
   }
 );
 FeatureGrid.displayName = "FeatureGrid";
@@ -11473,10 +11476,11 @@ var LogoCloud = forwardRef(
     variant = "plain",
     monochrome = true,
     logoHeight = 40,
+    maxWidth = "xl",
     ...rest
   }, ref) => {
     const hasHeading = Boolean(title || description);
-    return /* @__PURE__ */ jsxs(Section, { ref, ...rest, children: [
+    return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxs(Container, { maxWidth, children: [
       hasHeading && title && /* @__PURE__ */ jsx(SectionHeading, { title, description, align: headingAlign }),
       hasHeading && !title && description && /* @__PURE__ */ jsx(SectionHeading, { title: description, align: headingAlign, as: "h2" }),
       /* @__PURE__ */ jsx(Grid4, { $columns: columns, $hasHeading: hasHeading, children: logos.map((logo) => {
@@ -11492,7 +11496,7 @@ var LogoCloud = forwardRef(
           key
         );
       }) })
-    ] });
+    ] }) });
   }
 );
 LogoCloud.displayName = "LogoCloud";
@@ -11574,6 +11578,7 @@ var NewsletterSection = forwardRef(
     headingAlign = "center",
     layout = "centered",
     cardVariant = "default",
+    maxWidth = "xl",
     onSubmit,
     ...rest
   }, ref) => {
@@ -11604,7 +11609,7 @@ var NewsletterSection = forwardRef(
       ] }),
       privacyNote && /* @__PURE__ */ jsx(PrivacyNote, { children: privacyNote })
     ] });
-    return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsx(Card, { variant: cardVariant, padding: "xl", rounded: "lg", children: isCentered ? /* @__PURE__ */ jsxs(CenteredInner, { children: [
+    return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsx(Container, { maxWidth, children: /* @__PURE__ */ jsx(Card, { variant: cardVariant, padding: "xl", rounded: "lg", children: isCentered ? /* @__PURE__ */ jsxs(CenteredInner, { children: [
       /* @__PURE__ */ jsx(
         SectionHeading,
         {
@@ -11617,7 +11622,7 @@ var NewsletterSection = forwardRef(
     ] }) : /* @__PURE__ */ jsxs(SplitInner, { children: [
       /* @__PURE__ */ jsx(SectionHeading, { title: title ?? "", description, align: "left" }),
       formNode
-    ] }) }) });
+    ] }) }) }) });
   }
 );
 NewsletterSection.displayName = "NewsletterSection";
@@ -11732,10 +11737,11 @@ var StatsSection = forwardRef(
     columns = 3,
     cardVariant = "default",
     statAlign = "center",
+    maxWidth = "xl",
     ...rest
   }, ref) => {
     const hasHeading = Boolean(title || description);
-    return /* @__PURE__ */ jsxs(Section, { ref, ...rest, children: [
+    return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxs(Container, { maxWidth, children: [
       hasHeading && /* @__PURE__ */ jsx(SectionHeading, { title: title ?? "", description, align: headingAlign }),
       /* @__PURE__ */ jsx(Grid6, { $columns: columns, $hasHeading: hasHeading, children: stats.map((stat, index) => /* @__PURE__ */ jsx(
         StatCard,
@@ -11746,7 +11752,7 @@ var StatsSection = forwardRef(
         },
         `${stat.label}-${index}`
       )) })
-    ] });
+    ] }) });
   }
 );
 StatsSection.displayName = "StatsSection";
@@ -11773,10 +11779,11 @@ var TeamSection = forwardRef(
     headingAlign = "center",
     columns = 3,
     cardVariant = "default",
+    maxWidth = "xl",
     ...rest
   }, ref) => {
     const hasHeading = Boolean(title || description);
-    return /* @__PURE__ */ jsxs(Section, { ref, ...rest, children: [
+    return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxs(Container, { maxWidth, children: [
       hasHeading && title && /* @__PURE__ */ jsx(SectionHeading, { title, description, align: headingAlign }),
       hasHeading && !title && description && /* @__PURE__ */ jsx(SectionHeading, { title: description, align: headingAlign, as: "h2" }),
       /* @__PURE__ */ jsx(Grid7, { $columns: columns, $hasHeading: hasHeading, children: members.map((member) => /* @__PURE__ */ jsx(
@@ -11787,7 +11794,7 @@ var TeamSection = forwardRef(
         },
         `${member.name}-${member.role}`
       )) })
-    ] });
+    ] }) });
   }
 );
 TeamSection.displayName = "TeamSection";
@@ -11814,10 +11821,11 @@ var TestimonialsSection = forwardRef(
     headingAlign = "center",
     columns = 3,
     cardVariant = "default",
+    maxWidth = "xl",
     ...rest
   }, ref) => {
     const hasHeading = Boolean(title || description);
-    return /* @__PURE__ */ jsxs(Section, { ref, ...rest, children: [
+    return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxs(Container, { maxWidth, children: [
       hasHeading && /* @__PURE__ */ jsx(SectionHeading, { title: title ?? "", description, align: headingAlign }),
       /* @__PURE__ */ jsx(Grid8, { $columns: columns, $hasHeading: hasHeading, children: testimonials.map((testimonial, index) => /* @__PURE__ */ jsx(
         TestimonialCard,
@@ -11827,7 +11835,7 @@ var TestimonialsSection = forwardRef(
         },
         `${testimonial.authorName}-${index}`
       )) })
-    ] });
+    ] }) });
   }
 );
 TestimonialsSection.displayName = "TestimonialsSection";