@chakra-ui/layout - npm Package Compare versions

Comparing version 2.1.19 to 2.2.0

dist/index.d.ts

@@ -27,3 +27,4 @@ export { AspectRatio, AspectRatioProps } from './aspect-ratio.js';
 export { Wrap, WrapItem, WrapItemProps, WrapProps } from './wrap.js';
+export { Indicator, IndicatorProps } from './indicator.js';
 import '@chakra-ui/system';
 import '@chakra-ui/icon';

dist/index.js

@@ -38,2 +38,3 @@ "use strict";
   Highlight: () => Highlight,
+  Indicator: () => Indicator,
   Kbd: () => Kbd,
@@ -576,4 +577,4 @@ Link: () => Link,
   const validChildren = (0, import_react_children_utils.getValidChildren)(children);
-  const selector2 = "& > *:not(style) ~ *:not(style)";
-  const spacingStyle = spacing ? { [selector2]: { mt: spacing } } : {};
+  const selector = "& > *:not(style) ~ *:not(style)";
+  const spacingStyle = spacing ? { [selector]: { mt: spacing } } : {};
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ListStylesProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -668,41 +669,27 @@ import_system16.chakra.ul,
 // src/stack/stack.tsx
+var import_react_children_utils2 = require("@chakra-ui/react-children-utils");
+var import_shared_utils10 = require("@chakra-ui/shared-utils");
 var import_system20 = require("@chakra-ui/system");
-var import_shared_utils10 = require("@chakra-ui/shared-utils");
-var import_react_children_utils2 = require("@chakra-ui/react-children-utils");
 var import_react3 = require("react");
 
+// src/stack/stack-item.tsx
+var import_system19 = require("@chakra-ui/system");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var StackItem = (props) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  import_system19.chakra.div,
+  {
+    className: "chakra-stack__item",
+    ...props,
+    __css: {
+      display: "inline-block",
+      flex: "0 0 auto",
+      minWidth: 0,
+      ...props["__css"]
+    }
+  }
+);
+StackItem.displayName = "StackItem";
+
 // src/stack/stack.utils.tsx
 var import_breakpoint_utils4 = require("@chakra-ui/breakpoint-utils");
-var selector = "& > *:not(style) ~ *:not(style)";
-function getStackStyles(options) {
-  const { spacing, direction } = options;
-  const directionStyles = {
-    column: {
-      marginTop: spacing,
-      marginEnd: 0,
-      marginBottom: 0,
-      marginStart: 0
-    },
-    row: { marginTop: 0, marginEnd: 0, marginBottom: 0, marginStart: spacing },
-    "column-reverse": {
-      marginTop: 0,
-      marginEnd: 0,
-      marginBottom: spacing,
-      marginStart: 0
-    },
-    "row-reverse": {
-      marginTop: 0,
-      marginEnd: spacing,
-      marginBottom: 0,
-      marginStart: 0
-    }
-  };
-  return {
-    flexDirection: direction,
-    [selector]: (0, import_breakpoint_utils4.mapResponsive)(
-      direction,
-      (value) => directionStyles[value]
-    )
-  };
-}
 function getDividerStyles(options) {
@@ -744,20 +731,2 @@ const { spacing, direction } = options;
 
-// src/stack/stack-item.tsx
-var import_system19 = require("@chakra-ui/system");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var StackItem = (props) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-  import_system19.chakra.div,
-  {
-    className: "chakra-stack__item",
-    ...props,
-    __css: {
-      display: "inline-block",
-      flex: "0 0 auto",
-      minWidth: 0,
-      ...props["__css"]
-    }
-  }
-);
-StackItem.displayName = "StackItem";
-
 // src/stack/stack.tsx
@@ -780,6 +749,2 @@ var import_jsx_runtime19 = require("react/jsx-runtime");
   const direction = isInline ? "row" : directionProp != null ? directionProp : "column";
-  const styles = (0, import_react3.useMemo)(
-    () => getStackStyles({ direction, spacing }),
-    [direction, spacing]
-  );
   const dividerStyle = (0, import_react3.useMemo)(
@@ -828,6 +793,6 @@ () => getDividerStyles({ spacing, direction }),
       justifyContent: justify,
-      flexDirection: styles.flexDirection,
+      flexDirection: direction,
       flexWrap: wrap,
+      gap: hasDivider ? void 0 : spacing,
       className: _className,
-      __css: hasDivider ? {} : { [selector]: styles[selector] },
       ...rest,
@@ -898,10 +863,6 @@ children: clones
 // src/wrap.tsx
+var import_shared_utils12 = require("@chakra-ui/shared-utils");
 var import_system25 = require("@chakra-ui/system");
-var import_shared_utils12 = require("@chakra-ui/shared-utils");
-var import_breakpoint_utils5 = require("@chakra-ui/breakpoint-utils");
 var import_react4 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-function px(value) {
-  return typeof value === "number" ? `${value}px` : value;
-}
 var Wrap = (0, import_system25.forwardRef)(function Wrap2(props, ref) {
@@ -920,39 +881,25 @@ const {
   } = props;
-  const styles = (0, import_react4.useMemo)(() => {
-    const { spacingX: x = spacing, spacingY: y = spacing } = {
-      spacingX,
-      spacingY
-    };
-    return {
-      "--chakra-wrap-x-spacing": (theme) => (0, import_breakpoint_utils5.mapResponsive)(x, (value) => px((0, import_system25.tokenToCSSVar)("space", value)(theme))),
-      "--chakra-wrap-y-spacing": (theme) => (0, import_breakpoint_utils5.mapResponsive)(y, (value) => px((0, import_system25.tokenToCSSVar)("space", value)(theme))),
-      "--wrap-x-spacing": "calc(var(--chakra-wrap-x-spacing) / 2)",
-      "--wrap-y-spacing": "calc(var(--chakra-wrap-y-spacing) / 2)",
-      display: "flex",
-      flexWrap: "wrap",
-      justifyContent: justify,
-      alignItems: align,
-      flexDirection: direction,
-      listStyleType: "none",
-      padding: "0",
-      margin: "calc(var(--wrap-y-spacing) * -1) calc(var(--wrap-x-spacing) * -1)",
-      "& > *:not(style)": {
-        margin: "var(--wrap-y-spacing) var(--wrap-x-spacing)"
-      }
-    };
-  }, [spacing, spacingX, spacingY, justify, align, direction]);
-  const childrenToRender = (0, import_react4.useMemo)(
+  const _children = (0, import_react4.useMemo)(
     () => shouldWrapChildren ? import_react4.Children.map(children, (child, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(WrapItem, { children: child }, index)) : children,
     [children, shouldWrapChildren]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    import_system25.chakra.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_system25.chakra.div, { ref, className: (0, import_shared_utils12.cx)("chakra-wrap", className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    import_system25.chakra.ul,
     {
-      ref,
-      className: (0, import_shared_utils12.cx)("chakra-wrap", className),
-      overflow: "hidden",
-      ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_system25.chakra.ul, { className: "chakra-wrap__list", __css: styles, children: childrenToRender })
+      className: "chakra-wrap__list",
+      __css: {
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: justify,
+        alignItems: align,
+        flexDirection: direction,
+        listStyleType: "none",
+        gap: spacing,
+        columnGap: spacingX,
+        rowGap: spacingY,
+        padding: "0"
+      },
+      children: _children
     }
-  );
+  ) });
 });
@@ -973,2 +920,69 @@ Wrap.displayName = "Wrap";
 WrapItem.displayName = "WrapItem";
+
+// src/indicator.tsx
+var import_breakpoint_utils5 = require("@chakra-ui/breakpoint-utils");
+var import_system26 = require("@chakra-ui/system");
+var import_react5 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Indicator = (0, import_system26.forwardRef)(function Indicator2(props, ref) {
+  const {
+    offsetX,
+    offsetY,
+    offset = "0",
+    placement = "top-end",
+    ...rest
+  } = props;
+  const styles = (0, import_react5.useMemo)(
+    () => ({
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "absolute",
+      insetBlockStart: (0, import_breakpoint_utils5.mapResponsive)(placement, (v) => {
+        const [side] = v.split("-");
+        const map = {
+          top: offsetY != null ? offsetY : offset,
+          middle: "50%",
+          bottom: "auto"
+        };
+        return map[side];
+      }),
+      insetBlockEnd: (0, import_breakpoint_utils5.mapResponsive)(placement, (v) => {
+        const [side] = v.split("-");
+        const map = {
+          top: "auto",
+          middle: "50%",
+          bottom: offsetY != null ? offsetY : offset
+        };
+        return map[side];
+      }),
+      insetStart: (0, import_breakpoint_utils5.mapResponsive)(placement, (v) => {
+        const [, align] = v.split("-");
+        const map = {
+          start: offsetX != null ? offsetX : offset,
+          center: "50%",
+          end: "auto"
+        };
+        return map[align];
+      }),
+      insetEnd: (0, import_breakpoint_utils5.mapResponsive)(placement, (v) => {
+        const [, align] = v.split("-");
+        const map = {
+          start: "auto",
+          center: "50%",
+          end: offsetX != null ? offsetX : offset
+        };
+        return map[align];
+      }),
+      translate: (0, import_breakpoint_utils5.mapResponsive)(placement, (v) => {
+        const [side, align] = v.split("-");
+        const mapX = { start: "-50%", center: "-50%", end: "50%" };
+        const mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
+        return `${mapX[align]} ${mapY[side]}`;
+      })
+    }),
+    [offset, offsetX, offsetY, placement]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_system26.chakra.div, { ref, __css: styles, ...rest });
+});
 // Annotate the CommonJS export names for ESM import in node:
@@ -991,2 +1005,3 @@ 0 && (module.exports = {
   Highlight,
+  Indicator,
   Kbd,
@@ -993,0 +1008,0 @@ Link,

dist/stack/h-stack.js

@@ -29,41 +29,27 @@ "use strict";
 // src/stack/stack.tsx
+var import_react_children_utils = require("@chakra-ui/react-children-utils");
+var import_shared_utils = require("@chakra-ui/shared-utils");
 var import_system2 = require("@chakra-ui/system");
-var import_shared_utils = require("@chakra-ui/shared-utils");
-var import_react_children_utils = require("@chakra-ui/react-children-utils");
 var import_react = require("react");
 
+// src/stack/stack-item.tsx
+var import_system = require("@chakra-ui/system");
+var import_jsx_runtime = require("react/jsx-runtime");
+var StackItem = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_system.chakra.div,
+  {
+    className: "chakra-stack__item",
+    ...props,
+    __css: {
+      display: "inline-block",
+      flex: "0 0 auto",
+      minWidth: 0,
+      ...props["__css"]
+    }
+  }
+);
+StackItem.displayName = "StackItem";
+
 // src/stack/stack.utils.tsx
 var import_breakpoint_utils = require("@chakra-ui/breakpoint-utils");
-var selector = "& > *:not(style) ~ *:not(style)";
-function getStackStyles(options) {
-  const { spacing, direction } = options;
-  const directionStyles = {
-    column: {
-      marginTop: spacing,
-      marginEnd: 0,
-      marginBottom: 0,
-      marginStart: 0
-    },
-    row: { marginTop: 0, marginEnd: 0, marginBottom: 0, marginStart: spacing },
-    "column-reverse": {
-      marginTop: 0,
-      marginEnd: 0,
-      marginBottom: spacing,
-      marginStart: 0
-    },
-    "row-reverse": {
-      marginTop: 0,
-      marginEnd: spacing,
-      marginBottom: 0,
-      marginStart: 0
-    }
-  };
-  return {
-    flexDirection: direction,
-    [selector]: (0, import_breakpoint_utils.mapResponsive)(
-      direction,
-      (value) => directionStyles[value]
-    )
-  };
-}
 function getDividerStyles(options) {
@@ -105,20 +91,2 @@ const { spacing, direction } = options;
 
-// src/stack/stack-item.tsx
-var import_system = require("@chakra-ui/system");
-var import_jsx_runtime = require("react/jsx-runtime");
-var StackItem = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  import_system.chakra.div,
-  {
-    className: "chakra-stack__item",
-    ...props,
-    __css: {
-      display: "inline-block",
-      flex: "0 0 auto",
-      minWidth: 0,
-      ...props["__css"]
-    }
-  }
-);
-StackItem.displayName = "StackItem";
-
 // src/stack/stack.tsx
@@ -141,6 +109,2 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
   const direction = isInline ? "row" : directionProp != null ? directionProp : "column";
-  const styles = (0, import_react.useMemo)(
-    () => getStackStyles({ direction, spacing }),
-    [direction, spacing]
-  );
   const dividerStyle = (0, import_react.useMemo)(
@@ -189,6 +153,6 @@ () => getDividerStyles({ spacing, direction }),
       justifyContent: justify,
-      flexDirection: styles.flexDirection,
+      flexDirection: direction,
       flexWrap: wrap,
+      gap: hasDivider ? void 0 : spacing,
       className: _className,
-      __css: hasDivider ? {} : { [selector]: styles[selector] },
       ...rest,
@@ -195,0 +159,0 @@ children: clones

dist/stack/index.d.ts

@@ -6,3 +6,3 @@ export { HStack } from './h-stack.js';
 export { VStack } from './v-stack.js';
-export { StackDirection, getDividerStyles, getStackStyles, selector } from './stack.utils.js';
+export { StackDirection, getDividerStyles } from './stack.utils.js';
 import '@chakra-ui/system';

dist/stack/index.js

@@ -28,5 +28,3 @@ "use strict";
   VStack: () => VStack,
-  getDividerStyles: () => getDividerStyles,
-  getStackStyles: () => getStackStyles,
-  selector: () => selector
+  getDividerStyles: () => getDividerStyles
 });
@@ -39,41 +37,27 @@ module.exports = __toCommonJS(stack_exports);
 // src/stack/stack.tsx
+var import_react_children_utils = require("@chakra-ui/react-children-utils");
+var import_shared_utils = require("@chakra-ui/shared-utils");
 var import_system2 = require("@chakra-ui/system");
-var import_shared_utils = require("@chakra-ui/shared-utils");
-var import_react_children_utils = require("@chakra-ui/react-children-utils");
 var import_react = require("react");
 
+// src/stack/stack-item.tsx
+var import_system = require("@chakra-ui/system");
+var import_jsx_runtime = require("react/jsx-runtime");
+var StackItem = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_system.chakra.div,
+  {
+    className: "chakra-stack__item",
+    ...props,
+    __css: {
+      display: "inline-block",
+      flex: "0 0 auto",
+      minWidth: 0,
+      ...props["__css"]
+    }
+  }
+);
+StackItem.displayName = "StackItem";
+
 // src/stack/stack.utils.tsx
 var import_breakpoint_utils = require("@chakra-ui/breakpoint-utils");
-var selector = "& > *:not(style) ~ *:not(style)";
-function getStackStyles(options) {
-  const { spacing, direction } = options;
-  const directionStyles = {
-    column: {
-      marginTop: spacing,
-      marginEnd: 0,
-      marginBottom: 0,
-      marginStart: 0
-    },
-    row: { marginTop: 0, marginEnd: 0, marginBottom: 0, marginStart: spacing },
-    "column-reverse": {
-      marginTop: 0,
-      marginEnd: 0,
-      marginBottom: spacing,
-      marginStart: 0
-    },
-    "row-reverse": {
-      marginTop: 0,
-      marginEnd: spacing,
-      marginBottom: 0,
-      marginStart: 0
-    }
-  };
-  return {
-    flexDirection: direction,
-    [selector]: (0, import_breakpoint_utils.mapResponsive)(
-      direction,
-      (value) => directionStyles[value]
-    )
-  };
-}
 function getDividerStyles(options) {
@@ -115,20 +99,2 @@ const { spacing, direction } = options;
 
-// src/stack/stack-item.tsx
-var import_system = require("@chakra-ui/system");
-var import_jsx_runtime = require("react/jsx-runtime");
-var StackItem = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  import_system.chakra.div,
-  {
-    className: "chakra-stack__item",
-    ...props,
-    __css: {
-      display: "inline-block",
-      flex: "0 0 auto",
-      minWidth: 0,
-      ...props["__css"]
-    }
-  }
-);
-StackItem.displayName = "StackItem";
-
 // src/stack/stack.tsx
@@ -151,6 +117,2 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
   const direction = isInline ? "row" : directionProp != null ? directionProp : "column";
-  const styles = (0, import_react.useMemo)(
-    () => getStackStyles({ direction, spacing }),
-    [direction, spacing]
-  );
   const dividerStyle = (0, import_react.useMemo)(
@@ -199,6 +161,6 @@ () => getDividerStyles({ spacing, direction }),
       justifyContent: justify,
-      flexDirection: styles.flexDirection,
+      flexDirection: direction,
       flexWrap: wrap,
+      gap: hasDivider ? void 0 : spacing,
       className: _className,
-      __css: hasDivider ? {} : { [selector]: styles[selector] },
       ...rest,
@@ -248,5 +210,3 @@ children: clones
   VStack,
-  getDividerStyles,
-  getStackStyles,
-  selector
+  getDividerStyles
 });

dist/stack/stack.d.ts

@@ -49,2 +49,4 @@ import * as _chakra_ui_system from '@chakra-ui/system';
      * @default false
+     *
+     * @deprecated - Use `direction="row"` or `HStack` instead
      */
@@ -51,0 +53,0 @@ isInline?: boolean;

dist/stack/stack.js

@@ -26,41 +26,27 @@ "use strict";
 module.exports = __toCommonJS(stack_exports);
+var import_react_children_utils = require("@chakra-ui/react-children-utils");
+var import_shared_utils = require("@chakra-ui/shared-utils");
 var import_system2 = require("@chakra-ui/system");
-var import_shared_utils = require("@chakra-ui/shared-utils");
-var import_react_children_utils = require("@chakra-ui/react-children-utils");
 var import_react = require("react");
 
+// src/stack/stack-item.tsx
+var import_system = require("@chakra-ui/system");
+var import_jsx_runtime = require("react/jsx-runtime");
+var StackItem = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_system.chakra.div,
+  {
+    className: "chakra-stack__item",
+    ...props,
+    __css: {
+      display: "inline-block",
+      flex: "0 0 auto",
+      minWidth: 0,
+      ...props["__css"]
+    }
+  }
+);
+StackItem.displayName = "StackItem";
+
 // src/stack/stack.utils.tsx
 var import_breakpoint_utils = require("@chakra-ui/breakpoint-utils");
-var selector = "& > *:not(style) ~ *:not(style)";
-function getStackStyles(options) {
-  const { spacing, direction } = options;
-  const directionStyles = {
-    column: {
-      marginTop: spacing,
-      marginEnd: 0,
-      marginBottom: 0,
-      marginStart: 0
-    },
-    row: { marginTop: 0, marginEnd: 0, marginBottom: 0, marginStart: spacing },
-    "column-reverse": {
-      marginTop: 0,
-      marginEnd: 0,
-      marginBottom: spacing,
-      marginStart: 0
-    },
-    "row-reverse": {
-      marginTop: 0,
-      marginEnd: spacing,
-      marginBottom: 0,
-      marginStart: 0
-    }
-  };
-  return {
-    flexDirection: direction,
-    [selector]: (0, import_breakpoint_utils.mapResponsive)(
-      direction,
-      (value) => directionStyles[value]
-    )
-  };
-}
 function getDividerStyles(options) {
@@ -102,20 +88,2 @@ const { spacing, direction } = options;
 
-// src/stack/stack-item.tsx
-var import_system = require("@chakra-ui/system");
-var import_jsx_runtime = require("react/jsx-runtime");
-var StackItem = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  import_system.chakra.div,
-  {
-    className: "chakra-stack__item",
-    ...props,
-    __css: {
-      display: "inline-block",
-      flex: "0 0 auto",
-      minWidth: 0,
-      ...props["__css"]
-    }
-  }
-);
-StackItem.displayName = "StackItem";
-
 // src/stack/stack.tsx
@@ -138,6 +106,2 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
   const direction = isInline ? "row" : directionProp != null ? directionProp : "column";
-  const styles = (0, import_react.useMemo)(
-    () => getStackStyles({ direction, spacing }),
-    [direction, spacing]
-  );
   const dividerStyle = (0, import_react.useMemo)(
@@ -186,6 +150,6 @@ () => getDividerStyles({ spacing, direction }),
       justifyContent: justify,
-      flexDirection: styles.flexDirection,
+      flexDirection: direction,
       flexWrap: wrap,
+      gap: hasDivider ? void 0 : spacing,
       className: _className,
-      __css: hasDivider ? {} : { [selector]: styles[selector] },
       ...rest,
@@ -192,0 +156,0 @@ children: clones

dist/stack/stack.utils.d.ts

 import { ResponsiveValue, SystemProps } from '@chakra-ui/system';
 
 type StackDirection = ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
-/**
- * If we ever run into SSR issues with this, check this post to find a fix for it:
- * @see https://medium.com/@emmenko/patching-lobotomized-owl-selector-for-emotion-ssr-5a582a3c424c
- */
-declare const selector = "& > *:not(style) ~ *:not(style)";
 interface Options {
@@ -13,6 +8,2 @@ spacing: SystemProps["margin"];
 }
-declare function getStackStyles(options: Options): {
-    flexDirection: StackDirection;
-    "& > *:not(style) ~ *:not(style)": any;
-};
 declare function getDividerStyles(options: Options): {
@@ -22,2 +13,2 @@ "&": any;
 
-export { StackDirection, getDividerStyles, getStackStyles, selector };
+export { StackDirection, getDividerStyles };

dist/stack/stack.utils.js

@@ -23,40 +23,6 @@ "use strict";
 __export(stack_utils_exports, {
-  getDividerStyles: () => getDividerStyles,
-  getStackStyles: () => getStackStyles,
-  selector: () => selector
+  getDividerStyles: () => getDividerStyles
 });
 module.exports = __toCommonJS(stack_utils_exports);
 var import_breakpoint_utils = require("@chakra-ui/breakpoint-utils");
-var selector = "& > *:not(style) ~ *:not(style)";
-function getStackStyles(options) {
-  const { spacing, direction } = options;
-  const directionStyles = {
-    column: {
-      marginTop: spacing,
-      marginEnd: 0,
-      marginBottom: 0,
-      marginStart: 0
-    },
-    row: { marginTop: 0, marginEnd: 0, marginBottom: 0, marginStart: spacing },
-    "column-reverse": {
-      marginTop: 0,
-      marginEnd: 0,
-      marginBottom: spacing,
-      marginStart: 0
-    },
-    "row-reverse": {
-      marginTop: 0,
-      marginEnd: spacing,
-      marginBottom: 0,
-      marginStart: 0
-    }
-  };
-  return {
-    flexDirection: direction,
-    [selector]: (0, import_breakpoint_utils.mapResponsive)(
-      direction,
-      (value) => directionStyles[value]
-    )
-  };
-}
 function getDividerStyles(options) {
@@ -99,5 +65,3 @@ const { spacing, direction } = options;
 0 && (module.exports = {
-  getDividerStyles,
-  getStackStyles,
-  selector
+  getDividerStyles
 });

dist/stack/v-stack.js

@@ -29,41 +29,27 @@ "use strict";
 // src/stack/stack.tsx
+var import_react_children_utils = require("@chakra-ui/react-children-utils");
+var import_shared_utils = require("@chakra-ui/shared-utils");
 var import_system2 = require("@chakra-ui/system");
-var import_shared_utils = require("@chakra-ui/shared-utils");
-var import_react_children_utils = require("@chakra-ui/react-children-utils");
 var import_react = require("react");
 
+// src/stack/stack-item.tsx
+var import_system = require("@chakra-ui/system");
+var import_jsx_runtime = require("react/jsx-runtime");
+var StackItem = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_system.chakra.div,
+  {
+    className: "chakra-stack__item",
+    ...props,
+    __css: {
+      display: "inline-block",
+      flex: "0 0 auto",
+      minWidth: 0,
+      ...props["__css"]
+    }
+  }
+);
+StackItem.displayName = "StackItem";
+
 // src/stack/stack.utils.tsx
 var import_breakpoint_utils = require("@chakra-ui/breakpoint-utils");
-var selector = "& > *:not(style) ~ *:not(style)";
-function getStackStyles(options) {
-  const { spacing, direction } = options;
-  const directionStyles = {
-    column: {
-      marginTop: spacing,
-      marginEnd: 0,
-      marginBottom: 0,
-      marginStart: 0
-    },
-    row: { marginTop: 0, marginEnd: 0, marginBottom: 0, marginStart: spacing },
-    "column-reverse": {
-      marginTop: 0,
-      marginEnd: 0,
-      marginBottom: spacing,
-      marginStart: 0
-    },
-    "row-reverse": {
-      marginTop: 0,
-      marginEnd: spacing,
-      marginBottom: 0,
-      marginStart: 0
-    }
-  };
-  return {
-    flexDirection: direction,
-    [selector]: (0, import_breakpoint_utils.mapResponsive)(
-      direction,
-      (value) => directionStyles[value]
-    )
-  };
-}
 function getDividerStyles(options) {
@@ -105,20 +91,2 @@ const { spacing, direction } = options;
 
-// src/stack/stack-item.tsx
-var import_system = require("@chakra-ui/system");
-var import_jsx_runtime = require("react/jsx-runtime");
-var StackItem = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  import_system.chakra.div,
-  {
-    className: "chakra-stack__item",
-    ...props,
-    __css: {
-      display: "inline-block",
-      flex: "0 0 auto",
-      minWidth: 0,
-      ...props["__css"]
-    }
-  }
-);
-StackItem.displayName = "StackItem";
-
 // src/stack/stack.tsx
@@ -141,6 +109,2 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
   const direction = isInline ? "row" : directionProp != null ? directionProp : "column";
-  const styles = (0, import_react.useMemo)(
-    () => getStackStyles({ direction, spacing }),
-    [direction, spacing]
-  );
   const dividerStyle = (0, import_react.useMemo)(
@@ -189,6 +153,6 @@ () => getDividerStyles({ spacing, direction }),
       justifyContent: justify,
-      flexDirection: styles.flexDirection,
+      flexDirection: direction,
       flexWrap: wrap,
+      gap: hasDivider ? void 0 : spacing,
       className: _className,
-      __css: hasDivider ? {} : { [selector]: styles[selector] },
       ...rest,
@@ -195,0 +159,0 @@ children: clones

dist/wrap.js

@@ -27,10 +27,6 @@ "use strict";
 module.exports = __toCommonJS(wrap_exports);
+var import_shared_utils = require("@chakra-ui/shared-utils");
 var import_system = require("@chakra-ui/system");
-var import_shared_utils = require("@chakra-ui/shared-utils");
-var import_breakpoint_utils = require("@chakra-ui/breakpoint-utils");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-function px(value) {
-  return typeof value === "number" ? `${value}px` : value;
-}
 var Wrap = (0, import_system.forwardRef)(function Wrap2(props, ref) {
@@ -49,39 +45,25 @@ const {
   } = props;
-  const styles = (0, import_react.useMemo)(() => {
-    const { spacingX: x = spacing, spacingY: y = spacing } = {
-      spacingX,
-      spacingY
-    };
-    return {
-      "--chakra-wrap-x-spacing": (theme) => (0, import_breakpoint_utils.mapResponsive)(x, (value) => px((0, import_system.tokenToCSSVar)("space", value)(theme))),
-      "--chakra-wrap-y-spacing": (theme) => (0, import_breakpoint_utils.mapResponsive)(y, (value) => px((0, import_system.tokenToCSSVar)("space", value)(theme))),
-      "--wrap-x-spacing": "calc(var(--chakra-wrap-x-spacing) / 2)",
-      "--wrap-y-spacing": "calc(var(--chakra-wrap-y-spacing) / 2)",
-      display: "flex",
-      flexWrap: "wrap",
-      justifyContent: justify,
-      alignItems: align,
-      flexDirection: direction,
-      listStyleType: "none",
-      padding: "0",
-      margin: "calc(var(--wrap-y-spacing) * -1) calc(var(--wrap-x-spacing) * -1)",
-      "& > *:not(style)": {
-        margin: "var(--wrap-y-spacing) var(--wrap-x-spacing)"
-      }
-    };
-  }, [spacing, spacingX, spacingY, justify, align, direction]);
-  const childrenToRender = (0, import_react.useMemo)(
+  const _children = (0, import_react.useMemo)(
     () => shouldWrapChildren ? import_react.Children.map(children, (child, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WrapItem, { children: child }, index)) : children,
     [children, shouldWrapChildren]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_system.chakra.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_system.chakra.div, { ref, className: (0, import_shared_utils.cx)("chakra-wrap", className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_system.chakra.ul,
     {
-      ref,
-      className: (0, import_shared_utils.cx)("chakra-wrap", className),
-      overflow: "hidden",
-      ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_system.chakra.ul, { className: "chakra-wrap__list", __css: styles, children: childrenToRender })
+      className: "chakra-wrap__list",
+      __css: {
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: justify,
+        alignItems: align,
+        flexDirection: direction,
+        listStyleType: "none",
+        gap: spacing,
+        columnGap: spacingX,
+        rowGap: spacingY,
+        padding: "0"
+      },
+      children: _children
     }
-  );
+  ) });
 });
@@ -88,0 +70,0 @@ Wrap.displayName = "Wrap";

package.json

 {
   "name": "@chakra-ui/layout",
-  "version": "2.1.19",
+  "version": "2.2.0",
   "description": "Chakra UI layout components that give you massive speed",
@@ -48,6 +48,6 @@ "keywords": [
     "react-icons": "^4.2.0",
-    "react-router-dom": "6.9.0",
+    "react-router-dom": "6.11.2",
     "react": "^18.0.0",
     "clean-package": "2.2.0",
-    "@chakra-ui/system": "2.5.6"
+    "@chakra-ui/system": "2.5.8"
   },
@@ -54,0 +54,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

118

increased by3.51%

Worsened metrics

Total package byte prevSize

168579

decreased by-0.6%

Lines of code

5375

decreased by-1.12%

No dependency changes