@loomhq/lens 11.28.1 → 11.29.0

package/dist/cjs/index.js

@@ -5957,17 +5957,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 +6019,8 @@ var Split = (_a) => {
   var _b = _a, {
     children,
     gap = "initial",
+    rowGap,
+    columnGap,
     alignItems = "center",
     justifyContent,
     alignContent,
@@ -6036,6 +6036,8 @@ var Split = (_a) => {
   } = _b, props = __objRest(_b, [
     "children",
     "gap",
+    "rowGap",
+    "columnGap",
     "alignItems",
     "justifyContent",
     "alignContent",
@@ -6061,6 +6063,8 @@ var Split = (_a) => {
     SplitWrapper,
     __spreadValues({
       gap,
+      rowGap,
+      columnGap,
       alignItems,
       justifyContent,
       alignContent,

package/dist/esm/index.js

@@ -5745,17 +5745,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 +5807,8 @@ var Split = (_a) => {
   var _b = _a, {
     children,
     gap = "initial",
+    rowGap,
+    columnGap,
     alignItems = "center",
     justifyContent,
     alignContent,
@@ -5824,6 +5824,8 @@ var Split = (_a) => {
   } = _b, props = __objRest(_b, [
     "children",
     "gap",
+    "rowGap",
+    "columnGap",
     "alignItems",
     "justifyContent",
     "alignContent",
@@ -5849,6 +5851,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/package.json

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