@hlf-fe/pulmo-ui 1.5.10 → 1.5.11

package/dist/components/layout/container/container.d.ts

@@ -8,6 +8,7 @@ export type ContainerProps = {
     innerContainerWidth?: string;
     alignBlock?: "center" | "left";
     innerWidth?: number;
+    gutters?: boolean;
 } & CSSTypes;
 export declare const Container: import("react").ForwardRefExoticComponent<{
     children: ReactNode;
@@ -16,5 +17,6 @@ export declare const Container: import("react").ForwardRefExoticComponent<{
     innerContainerWidth?: string;
     alignBlock?: "center" | "left";
     innerWidth?: number;
+    gutters?: boolean;
 } & CSSTypes & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/layout/container/container.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { siteWidthRow, siteWidthRowMd, siteWidthRowXL, siteWidthRowS, siteWidthRowAuto, } from "../../../styles/mixins";
+import { siteWidthRow, siteWidthRowMd, siteWidthRowXL, siteWidthRowS, siteWidthRowAuto, siteWidthOnly, } from "../../../styles/mixins";
 import { rem } from "../../../styles/units";
 import styled from "styled-components";
 const MAX_WIDTH = {
@@ -22,14 +22,15 @@ const getMaxWidth = (size) => {
 const getInnerWidth = (size) => {
     return INNER_WIDTH?.[size];
 };
-export const Container = forwardRef(({ children, className, maxWidth = "lg", position = "static", display = "block", alignBlock = "center", innerWidth, }, ref) => {
+export const Container = forwardRef(({ children, className, maxWidth = "lg", position = "static", display = "block", alignBlock = "center", innerWidth, gutters = true, }, ref) => {
     const containerWidth = alignBlock === "left" ? "lg" : maxWidth;
     const innerContainerWidth = alignBlock == "left" ? getInnerWidth(maxWidth) : innerWidth;
     const content = innerContainerWidth ? (_jsx(Inner, { "$innerContainerWidth": innerContainerWidth, children: children })) : (children);
-    return (_jsx(Div, { ref: ref, className: className, "$maxWidth": getMaxWidth(containerWidth), "$display": display, "$position": position, children: content }));
+    return (_jsx(Div, { ref: ref, className: className, "$maxWidth": getMaxWidth(containerWidth), "$display": display, "$position": position, "$gutters": gutters, "$size": containerWidth, children: content }));
 });
 const Div = styled.div `
-  ${({ $maxWidth }) => $maxWidth};
+  ${({ $maxWidth, $gutters }) => $gutters && $maxWidth};
+  ${({ $gutters, $size }) => !$gutters && $size && siteWidthOnly($size)};
   display: ${({ $display }) => $display};
   position: ${({ $position }) => $position};
 `;

package/dist/index.d.ts

@@ -41,11 +41,12 @@ export declare const EmailSignupForm: import("react").FC<EmailSignupFormProps>;
 export declare const Image: import("react").FC<ImageProps>;
 export declare const Container: import("react").ForwardRefExoticComponent<{
     children: import("react").ReactNode;
-    maxWidth?: "auto" | "sm" | "md" | "lg" | "xl";
+    maxWidth?: "sm" | "md" | "lg" | "xl" | "auto";
     className?: string;
     innerContainerWidth?: string;
     alignBlock?: "center" | "left";
     innerWidth?: number;
+    gutters?: boolean;
 } & {
     position?: import("csstype").Property.Position | undefined;
     display?: import("csstype").Property.Display | undefined;

package/dist/styles/mixins.d.ts

@@ -18,6 +18,13 @@ export declare const siteWidthRowMd: () => import("styled-components").RuleSet<o
 export declare const siteWidthRow: () => import("styled-components").RuleSet<object>;
 export declare const siteWidthRowXL: () => import("styled-components").RuleSet<object>;
 export declare const siteWidthRowAuto: () => import("styled-components").RuleSet<object>;
+/**
+ * Returns only max-width without any gutters (margin/padding).
+ * Use this when embedding content inside an existing container.
+ * Includes margin: 0 auto for centering when max-width is set.
+ */
+export type SiteWidthSize = "sm" | "md" | "lg" | "xl" | "auto";
+export declare const siteWidthOnly: (size: SiteWidthSize) => import("styled-components").RuleSet<object>;
 export declare const fullWidthRow: () => import("styled-components").RuleSet<object>;
 export declare const fontSize: {
     XS: () => import("styled-components").RuleSet<object>;

package/dist/styles/mixins.js

@@ -165,6 +165,21 @@ export const siteWidthRowXL = () => css `
 export const siteWidthRowAuto = () => css `
   width: auto;
 `;
+const SITE_WIDTH_VALUES = {
+    sm: VARIABLES.siteWidthS,
+    md: rem(800),
+    lg: VARIABLES.siteWidth,
+    xl: VARIABLES.siteWidthXL,
+    auto: "none",
+};
+export const siteWidthOnly = (size) => css `
+  max-width: ${SITE_WIDTH_VALUES[size]};
+  ${size !== "auto" &&
+    css `
+    margin-left: auto;
+    margin-right: auto;
+  `}
+`;
 export const fullWidthRow = () => css `
   padding-top: ${SPACING.spacingL};
   padding-right: ${SPACING.spacingXS};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hlf-fe/pulmo-ui",
   "private": false,
-  "version": "1.5.10",
+  "version": "1.5.11",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",