@loomhq/lens 11.28.1 → 11.30.0

package/dist/cjs/index.js

@@ -715,7 +715,6 @@ var import_styled = __toESM(require("@emotion/styled"));
 // src/console-messages.js
 var textIsDimmedDeprecated = `Lens: Text prop 'isDimmed' is deprecated, use color="bodyDimmed" instead.`;
 var customStylesWarning = `Lens: don't apply custom styles to components, learn more: https://lens.loom.dev/guides/development-best-practices/the-risk-of-modifying-components-with-custom-styles.`;
-var splitComponentChildren = `Lens: Split component direct children should only be SplitSection components.`;
 var distributeDeprecatedWarning = `Lens: Distribute component is deprecated. Use Arrange or Split.`;
 var layoutDeprecatedWarning = `Lens: Layout component is deprecated. Use Arrange or Split.`;
 
@@ -5957,17 +5956,15 @@ var SplitWrapper = import_styled38.default.div`
   ${(props) => props.alignContent && getResponsiveOneOf("align-content", props.alignContent)};
   ${(props) => getResponsiveOneOf("flex-wrap", props.wrap)};
   ${(props) => props.direction && getResponsiveOneOf("flex-direction", props.direction)};
-  ${(props) => props.gap && getSize("--gap", props.gap)};
-  margin-right: calc(-1 * var(--gap));
-  margin-bottom: calc(-1 * var(--gap));
+  ${(props) => props.gap && getSize("gap", props.gap)};
+  ${(props) => props.rowGap && getSize("row-gap", props.rowGap)};
+  ${(props) => props.columnGap && getSize("column-gap", props.columnGap)};
   ${(props) => getSizeStyles(props)};
 `;
 var SplitSectionWrapper = import_styled38.default.div`
   ${(props) => getResponsiveNumber("flex-grow", props.grow)};
   ${(props) => getResponsiveNumber("flex-shrink", props.shrink)};
   ${(props) => props.basis && getSize("flex-basis", props.basis)};
-  margin-right: var(--gap);
-  margin-bottom: var(--gap);
   ${(props) => getSizeStyles(props)};
 `;
 var SplitSection = (_a) => {
@@ -6021,6 +6018,8 @@ var Split = (_a) => {
   var _b = _a, {
     children,
     gap = "initial",
+    rowGap,
+    columnGap,
     alignItems = "center",
     justifyContent,
     alignContent,
@@ -6036,6 +6035,8 @@ var Split = (_a) => {
   } = _b, props = __objRest(_b, [
     "children",
     "gap",
+    "rowGap",
+    "columnGap",
     "alignItems",
     "justifyContent",
     "alignContent",
@@ -6049,11 +6050,6 @@ var Split = (_a) => {
     "className",
     "style"
   ]);
-  import_react45.default.Children.forEach(children, (child) => {
-    if (child && !import_react45.default.isValidElement(child) || import_react45.default.isValidElement(child) && child.type !== SplitSection) {
-      throw new Error(splitComponentChildren);
-    }
-  });
   if (className || style) {
     console.warn(customStylesWarning);
   }
@@ -6061,6 +6057,8 @@ var Split = (_a) => {
     SplitWrapper,
     __spreadValues({
       gap,
+      rowGap,
+      columnGap,
       alignItems,
       justifyContent,
       alignContent,

package/dist/esm/index.js

@@ -496,7 +496,6 @@ import styled from "@emotion/styled";
 // src/console-messages.js
 var textIsDimmedDeprecated = `Lens: Text prop 'isDimmed' is deprecated, use color="bodyDimmed" instead.`;
 var customStylesWarning = `Lens: don't apply custom styles to components, learn more: https://lens.loom.dev/guides/development-best-practices/the-risk-of-modifying-components-with-custom-styles.`;
-var splitComponentChildren = `Lens: Split component direct children should only be SplitSection components.`;
 var distributeDeprecatedWarning = `Lens: Distribute component is deprecated. Use Arrange or Split.`;
 var layoutDeprecatedWarning = `Lens: Layout component is deprecated. Use Arrange or Split.`;
 
@@ -5745,17 +5744,15 @@ var SplitWrapper = styled38.div`
   ${(props) => props.alignContent && getResponsiveOneOf("align-content", props.alignContent)};
   ${(props) => getResponsiveOneOf("flex-wrap", props.wrap)};
   ${(props) => props.direction && getResponsiveOneOf("flex-direction", props.direction)};
-  ${(props) => props.gap && getSize("--gap", props.gap)};
-  margin-right: calc(-1 * var(--gap));
-  margin-bottom: calc(-1 * var(--gap));
+  ${(props) => props.gap && getSize("gap", props.gap)};
+  ${(props) => props.rowGap && getSize("row-gap", props.rowGap)};
+  ${(props) => props.columnGap && getSize("column-gap", props.columnGap)};
   ${(props) => getSizeStyles(props)};
 `;
 var SplitSectionWrapper = styled38.div`
   ${(props) => getResponsiveNumber("flex-grow", props.grow)};
   ${(props) => getResponsiveNumber("flex-shrink", props.shrink)};
   ${(props) => props.basis && getSize("flex-basis", props.basis)};
-  margin-right: var(--gap);
-  margin-bottom: var(--gap);
   ${(props) => getSizeStyles(props)};
 `;
 var SplitSection = (_a) => {
@@ -5809,6 +5806,8 @@ var Split = (_a) => {
   var _b = _a, {
     children,
     gap = "initial",
+    rowGap,
+    columnGap,
     alignItems = "center",
     justifyContent,
     alignContent,
@@ -5824,6 +5823,8 @@ var Split = (_a) => {
   } = _b, props = __objRest(_b, [
     "children",
     "gap",
+    "rowGap",
+    "columnGap",
     "alignItems",
     "justifyContent",
     "alignContent",
@@ -5837,11 +5838,6 @@ var Split = (_a) => {
     "className",
     "style"
   ]);
-  React47.Children.forEach(children, (child) => {
-    if (child && !React47.isValidElement(child) || React47.isValidElement(child) && child.type !== SplitSection) {
-      throw new Error(splitComponentChildren);
-    }
-  });
   if (className || style) {
     console.warn(customStylesWarning);
   }
@@ -5849,6 +5845,8 @@ var Split = (_a) => {
     SplitWrapper,
     __spreadValues({
       gap,
+      rowGap,
+      columnGap,
       alignItems,
       justifyContent,
       alignContent,

package/dist/types/components/split/split.d.ts

@@ -3,7 +3,7 @@ import { ResponsiveType } from '../../types';
 declare const SplitWrapper: import("@emotion/styled").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SplitProps, object>;
 declare const SplitSectionWrapper: import("@emotion/styled").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SplitSectionProps, object>;
 export declare const SplitSection: ({ children, grow, shrink, basis, width, height, minWidth, minHeight, maxWidth, maxHeight, className, style, ...props }: SplitSectionProps & React.ComponentProps<typeof SplitSectionWrapper>) => React.JSX.Element;
-declare const Split: ({ children, gap, alignItems, justifyContent, alignContent, wrap, width, height, minWidth, minHeight, maxWidth, maxHeight, className, style, ...props }: SplitProps & React.ComponentProps<typeof SplitWrapper>) => React.JSX.Element;
+declare const Split: ({ children, gap, rowGap, columnGap, alignItems, justifyContent, alignContent, wrap, width, height, minWidth, minHeight, maxWidth, maxHeight, className, style, ...props }: SplitProps & React.ComponentProps<typeof SplitWrapper>) => React.JSX.Element;
 interface SharedProps {
     width?: ResponsiveType<number | string>;
     height?: ResponsiveType<number | string>;
@@ -19,6 +19,8 @@ interface SplitProps extends SharedProps {
     alignContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'start' | 'end' | 'baseline';
     wrap?: ResponsiveType<'nowrap' | 'wrap' | 'wrap-reverse'>;
     gap?: ResponsiveType<number | string>;
+    rowGap?: ResponsiveType<number | string>;
+    columnGap?: ResponsiveType<number | string>;
     direction?: ResponsiveType<'column' | 'column-reverse' | 'row' | 'row-reverse'>;
     className?: never;
     style?: never;

package/dist/types/console-messages.d.ts

@@ -1,5 +1,4 @@
 export const textIsDimmedDeprecated: "Lens: Text prop 'isDimmed' is deprecated, use color=\"bodyDimmed\" instead.";
 export const customStylesWarning: "Lens: don't apply custom styles to components, learn more: https://lens.loom.dev/guides/development-best-practices/the-risk-of-modifying-components-with-custom-styles.";
-export const splitComponentChildren: "Lens: Split component direct children should only be SplitSection components.";
 export const distributeDeprecatedWarning: "Lens: Distribute component is deprecated. Use Arrange or Split.";
 export const layoutDeprecatedWarning: "Lens: Layout component is deprecated. Use Arrange or Split.";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "11.28.1",
+  "version": "11.30.0",
   "packageManager": "pnpm@9.8.0",
   "scripts": {
     "preinstall": "npx only-allow pnpm",