braid-design-system 32.23.1 → 32.24.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # braid-design-system
 
+## 32.24.0
+
+### Minor Changes
+
+- **Autosuggest**: Optimise automatic scrolling to selected suggestion by using native browser methods. ([#1571](https://github.com/seek-oss/braid-design-system/pull/1571))
+
+### Patch Changes
+
+- **Stack, Tiles:** Deprecate `dividers` prop ([#1574](https://github.com/seek-oss/braid-design-system/pull/1574))
+
+  In preparation for migrating Braid layout components to use [CSS gap], the `dividers` prop has been deprecated on `Stack` and `Tiles`.
+
+  Consumers are encouraged to migrate now in advance of its removal in v33.
+
+  #### Migration Guide
+
+  See [the migration guide] for details on how to migrate off the `dividers` prop.
+
+  [CSS gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
+  [migration guide]: https://github.com/seek-oss/braid-design-system/blob/master/docs/Removing%20dividers%20support%20from%20layout%20components.md
+
+- **Autosuggest**: Improve handling of `suggestionHighlight` prop when set to `remaining` ([#1572](https://github.com/seek-oss/braid-design-system/pull/1572))
+
+  Fixes a bug in `Autosuggest` when using `suggestionHighlight` prop set to `remaining`.
+  If the input contained multiple words, the highlighted portion would be appended to the end of matching suggestions.
+
+- **Divider:** Ensure full width in flex container ([#1574](https://github.com/seek-oss/braid-design-system/pull/1574))
+
+  Ensures the `Divider` component remains full width when used as a flex child inside a flex container.
+
 ## 32.23.1
 
 ### Patch Changes

package/dist/lib/components/Autosuggest/Autosuggest.cjs

@@ -17,11 +17,11 @@ const lib_components_private_getNextIndex_cjs = require("../private/getNextIndex
 const lib_components_private_normalizeKey_cjs = require("../private/normalizeKey.cjs");
 const lib_components_private_Field_ClearField_cjs = require("../private/Field/ClearField.cjs");
 const lib_components_private_smoothScroll_cjs = require("../private/smoothScroll.cjs");
-const lib_components_Autosuggest_useScrollIntoView_cjs = require("./useScrollIntoView.cjs");
 const lib_components_useResponsiveValue_useResponsiveValue_cjs = require("../useResponsiveValue/useResponsiveValue.cjs");
 const reactRemoveScroll = require("react-remove-scroll");
 const lib_components_Autosuggest_createAccessibilityProps_cjs = require("./createAccessibilityProps.cjs");
 const lib_translations_en_cjs = require("../../translations/en.cjs");
+const lib_components_Autosuggest_reverseMatches_cjs = require("./reverseMatches.cjs");
 const lib_components_Autosuggest_Autosuggest_css_cjs = require("./Autosuggest.css.cjs");
 const lib_components_icons_IconClear_IconClear_cjs = require("../icons/IconClear/IconClear.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
@@ -187,9 +187,9 @@ function normaliseNoSuggestionMessage(noSuggestionsMessage, suggestionProp) {
   }
 }
 function highlightSuggestions(suggestion, value, variant = "matching") {
-  const matches = matchHighlights__default.default(suggestion, value);
-  const formattedMatches = variant === "remaining" ? matches.map(([_, end]) => ({ start: end, end: suggestion.length })) : matches.map(([start, end]) => ({ start, end }));
-  return formattedMatches;
+  const matchedHighlights = matchHighlights__default.default(suggestion, value);
+  const matches = variant === "matching" ? matchedHighlights : lib_components_Autosuggest_reverseMatches_cjs.reverseMatches(suggestion, matchedHighlights);
+  return matches.map(([start, end]) => ({ start, end }));
 }
 const Autosuggest = React.forwardRef(function({
   id,
@@ -370,7 +370,7 @@ const Autosuggest = React.forwardRef(function({
   });
   const isOpen = showSuggestionsIfAvailable && hasItems;
   const highlightedItem = typeof highlightedIndex === "number" ? document.getElementById(lib_components_Autosuggest_createAccessibilityProps_cjs.getItemId(id, highlightedIndex)) : null;
-  lib_components_Autosuggest_useScrollIntoView_cjs.useScrollIntoView(highlightedItem, menuRef.current);
+  highlightedItem == null ? void 0 : highlightedItem.scrollIntoView({ block: "nearest" });
   React.useEffect(() => {
     dispatch({
       type: HAS_SUGGESTIONS_CHANGED

package/dist/lib/components/Autosuggest/Autosuggest.mjs

@@ -16,11 +16,11 @@ import { getNextIndex } from "../private/getNextIndex.mjs";
 import { normalizeKey } from "../private/normalizeKey.mjs";
 import { ClearField } from "../private/Field/ClearField.mjs";
 import { smoothScroll } from "../private/smoothScroll.mjs";
-import { useScrollIntoView } from "./useScrollIntoView.mjs";
 import { useResponsiveValue } from "../useResponsiveValue/useResponsiveValue.mjs";
 import { RemoveScroll } from "react-remove-scroll";
 import { getItemId, createAccessibilityProps } from "./createAccessibilityProps.mjs";
 import { autosuggest } from "../../translations/en.mjs";
+import { reverseMatches } from "./reverseMatches.mjs";
 import { backdrop, backdropVisible, menu, groupHeading } from "./Autosuggest.css.mjs";
 import { IconClear } from "../icons/IconClear/IconClear.mjs";
 const INPUT_FOCUS = 0;
@@ -182,9 +182,9 @@ function normaliseNoSuggestionMessage(noSuggestionsMessage, suggestionProp) {
   }
 }
 function highlightSuggestions(suggestion, value, variant = "matching") {
-  const matches = matchHighlights(suggestion, value);
-  const formattedMatches = variant === "remaining" ? matches.map(([_, end]) => ({ start: end, end: suggestion.length })) : matches.map(([start, end]) => ({ start, end }));
-  return formattedMatches;
+  const matchedHighlights = matchHighlights(suggestion, value);
+  const matches = variant === "matching" ? matchedHighlights : reverseMatches(suggestion, matchedHighlights);
+  return matches.map(([start, end]) => ({ start, end }));
 }
 const Autosuggest = forwardRef(function({
   id,
@@ -365,7 +365,7 @@ const Autosuggest = forwardRef(function({
   });
   const isOpen = showSuggestionsIfAvailable && hasItems;
   const highlightedItem = typeof highlightedIndex === "number" ? document.getElementById(getItemId(id, highlightedIndex)) : null;
-  useScrollIntoView(highlightedItem, menuRef.current);
+  highlightedItem == null ? void 0 : highlightedItem.scrollIntoView({ block: "nearest" });
   useEffect(() => {
     dispatch({
       type: HAS_SUGGESTIONS_CHANGED

package/dist/lib/components/Autosuggest/reverseMatches.cjs

@@ -0,0 +1,17 @@
+"use strict";
+function reverseMatches(suggestion, matches) {
+  const suggestionLength = suggestion.length;
+  const reversedMatches = [];
+  let currentStart = 0;
+  for (const [start, end] of matches) {
+    if (currentStart < start) {
+      reversedMatches.push([currentStart, start]);
+    }
+    currentStart = end;
+  }
+  if (currentStart < suggestionLength) {
+    reversedMatches.push([currentStart, suggestionLength]);
+  }
+  return reversedMatches;
+}
+exports.reverseMatches = reverseMatches;

package/dist/lib/components/Autosuggest/reverseMatches.mjs

@@ -0,0 +1,18 @@
+function reverseMatches(suggestion, matches) {
+  const suggestionLength = suggestion.length;
+  const reversedMatches = [];
+  let currentStart = 0;
+  for (const [start, end] of matches) {
+    if (currentStart < start) {
+      reversedMatches.push([currentStart, start]);
+    }
+    currentStart = end;
+  }
+  if (currentStart < suggestionLength) {
+    reversedMatches.push([currentStart, suggestionLength]);
+  }
+  return reversedMatches;
+}
+export {
+  reverseMatches
+};

package/dist/lib/components/Divider/Divider.cjs

@@ -5,12 +5,13 @@ const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
 const lib_components_Divider_Divider_css_cjs = require("./Divider.css.cjs");
 const Divider = ({ weight = "regular" }) => {
   const lightness = lib_components_Box_BackgroundContext_cjs.useBackgroundLightness();
-  return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", display: "block", position: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", display: "block", position: "relative", width: "full", children: /* @__PURE__ */ jsxRuntime.jsx(
     lib_components_Box_Box_cjs.Box,
     {
       component: "span",
       position: "absolute",
-      width: "full",
+      left: 0,
+      right: 0,
       className: [
         lib_components_Divider_Divider_css_cjs.base,
         weight === "strong" ? lib_components_Divider_Divider_css_cjs.strong : lib_components_Divider_Divider_css_cjs.regular,

package/dist/lib/components/Divider/Divider.mjs

@@ -4,12 +4,13 @@ import { Box } from "../Box/Box.mjs";
 import { base, strong, regular, lightModeWeight, darkModeWeight } from "./Divider.css.mjs";
 const Divider = ({ weight = "regular" }) => {
   const lightness = useBackgroundLightness();
-  return /* @__PURE__ */ jsx(Box, { component: "span", display: "block", position: "relative", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { component: "span", display: "block", position: "relative", width: "full", children: /* @__PURE__ */ jsx(
     Box,
     {
       component: "span",
       position: "absolute",
-      width: "full",
+      left: 0,
+      right: 0,
       className: [
         base,
         weight === "strong" ? strong : regular,

package/dist/lib/components/Stack/Stack.cjs

@@ -1,5 +1,6 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
+const dedent = require("dedent");
 const React = require("react");
 const lib_utils_flattenChildren_cjs = require("../../utils/flattenChildren.cjs");
 const assert = require("assert");
@@ -14,6 +15,7 @@ const lib_css_negativeMargin_negativeMargin_cjs = require("../../css/negativeMar
 const lib_css_atoms_sprinkles_css_cjs = require("../../css/atoms/sprinkles.css.cjs");
 const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const dedent__default = /* @__PURE__ */ _interopDefaultCompat(dedent);
 const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
 const alignToDisplay = {
   left: "block",
@@ -62,7 +64,7 @@ const Stack = ({
   children,
   space = "none",
   align = "left",
-  dividers = false,
+  dividers,
   data,
   ...restProps
 }) => {
@@ -70,6 +72,32 @@ const Stack = ({
     validStackComponents.includes(component),
     `Invalid Stack component: '${component}'. Should be one of [${validStackComponents.map((c) => `'${c}'`).join(", ")}]`
   );
+  if (process.env.NODE_ENV !== "production") {
+    if (typeof dividers !== "undefined") {
+      console.warn(
+        dedent__default.default`
+          The "dividers" prop is deprecated and will be removed in v33 to enable CSS gap in layout components.
+          Update your usage now to make upgrading easier by manually inserting "Divider" components as required:
+            %c- <Stack space="..." dividers>
+            %c+ <Stack space="...">
+            %c    <Component>{item}</Component>
+            %c+   <Divider />
+            %c    <Component>{item}</Component>****
+            %c+   <Divider />
+            %c    <Component>{item}</Component>
+              </Stack>
+          See migration guide for details: https://github.com/seek-oss/braid-design-system/blob/master/docs/Removing%20dividers%20support%20from%20layout%20components.md
+        `,
+        "color: red",
+        "color: green",
+        "color: inherit",
+        "color: green",
+        "color: inherit",
+        "color: green",
+        "color: inherit"
+      );
+    }
+  }
   const stackItemProps = useStackItem({ space, align, component });
   const stackItems = lib_utils_flattenChildren_cjs.flattenChildren(children);
   const isList = component === "ol" || component === "ul";

package/dist/lib/components/Stack/Stack.mjs

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import dedent from "dedent";
 import { Children } from "react";
 import { flattenChildren } from "../../utils/flattenChildren.mjs";
 import assert from "assert";
@@ -59,7 +60,7 @@ const Stack = ({
   children,
   space = "none",
   align = "left",
-  dividers = false,
+  dividers,
   data,
   ...restProps
 }) => {
@@ -67,6 +68,32 @@ const Stack = ({
     validStackComponents.includes(component),
     `Invalid Stack component: '${component}'. Should be one of [${validStackComponents.map((c) => `'${c}'`).join(", ")}]`
   );
+  if (process.env.NODE_ENV !== "production") {
+    if (typeof dividers !== "undefined") {
+      console.warn(
+        dedent`
+          The "dividers" prop is deprecated and will be removed in v33 to enable CSS gap in layout components.
+          Update your usage now to make upgrading easier by manually inserting "Divider" components as required:
+            %c- <Stack space="..." dividers>
+            %c+ <Stack space="...">
+            %c    <Component>{item}</Component>
+            %c+   <Divider />
+            %c    <Component>{item}</Component>****
+            %c+   <Divider />
+            %c    <Component>{item}</Component>
+              </Stack>
+          See migration guide for details: https://github.com/seek-oss/braid-design-system/blob/master/docs/Removing%20dividers%20support%20from%20layout%20components.md
+        `,
+        "color: red",
+        "color: green",
+        "color: inherit",
+        "color: green",
+        "color: inherit",
+        "color: green",
+        "color: inherit"
+      );
+    }
+  }
   const stackItemProps = useStackItem({ space, align, component });
   const stackItems = flattenChildren(children);
   const isList = component === "ol" || component === "ul";

package/dist/lib/components/Tiles/Tiles.cjs

@@ -1,5 +1,6 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
+const dedent = require("dedent");
 const React = require("react");
 const lib_utils_flattenChildren_cjs = require("../../utils/flattenChildren.cjs");
 const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
@@ -9,61 +10,97 @@ const lib_utils_resolveResponsiveProp_cjs = require("../../utils/resolveResponsi
 const lib_components_Tiles_Tiles_css_cjs = require("./Tiles.css.cjs");
 const lib_css_atoms_sprinkles_css_cjs = require("../../css/atoms/sprinkles.css.cjs");
 const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const dedent__default = /* @__PURE__ */ _interopDefaultCompat(dedent);
 const Tiles = ({
   children,
   space = "none",
   columns = 1,
-  dividers = false,
+  dividers,
   data,
   ...restProps
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  lib_components_Box_Box_cjs.Box,
-  {
-    className: lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("top", space),
-    ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      lib_components_Box_Box_cjs.Box,
-      {
-        display: "flex",
-        flexWrap: "wrap",
-        className: lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("left", space),
-        children: React.Children.map(lib_utils_flattenChildren_cjs.flattenChildren(children), (child, i) => /* @__PURE__ */ jsxRuntime.jsx(
-          lib_components_Box_Box_cjs.Box,
-          {
-            minWidth: 0,
-            className: lib_utils_resolveResponsiveProp_cjs.resolveResponsiveProp(
-              columns,
-              lib_components_Tiles_Tiles_css_cjs.columnsMobile,
-              lib_components_Tiles_Tiles_css_cjs.columnsTablet,
-              lib_components_Tiles_Tiles_css_cjs.columnsDesktop,
-              lib_components_Tiles_Tiles_css_cjs.columnsWide
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              lib_components_Box_Box_cjs.Box,
-              {
-                height: "full",
-                paddingTop: space,
-                paddingLeft: space,
-                children: [
-                  dividers && i > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-                    lib_components_Box_Box_cjs.Box,
-                    {
-                      paddingBottom: space,
-                      display: lib_css_atoms_sprinkles_css_cjs.mapResponsiveValue(
-                        columns,
-                        (column) => column === 1 ? "block" : "none"
-                      ),
-                      children: typeof dividers === "string" ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Divider_Divider_cjs.Divider, { weight: dividers }) : /* @__PURE__ */ jsxRuntime.jsx(lib_components_Divider_Divider_cjs.Divider, {})
-                    }
-                  ) : null,
-                  child
-                ]
-              }
-            )
-          }
-        ))
-      }
-    )
+}) => {
+  if (process.env.NODE_ENV !== "production") {
+    if (typeof dividers !== "undefined") {
+      console.warn(
+        dedent__default.default`
+          The "dividers" prop is deprecated and will be removed in v33 to enable CSS gap in layout components.
+          Update your usage now to make upgrading easier by manually inserting "Divider" components as required:
+            %c- <Tiles space="..." dividers>
+            %c+ <Tiles space="...">
+            %c    <Component>{item}</Component>
+            %c+   <Stack space="...">
+            +     <Hidden above="mobile"><Divider /></Hidden>
+            %c      <Component>{item}</Component>
+            %c+   </Stack>
+            +   <Stack space="...">
+            +     <Hidden above="mobile"><Divider /></Hidden>
+            %c      <Component>{item}</Component>
+            %c+   </Stack>
+            %c  </Tiles>
+          See migration guide for details: https://github.com/seek-oss/braid-design-system/blob/master/docs/Removing%20dividers%20support%20from%20layout%20components.md
+        `,
+        "color: red",
+        "color: green",
+        "color: inherit",
+        "color: green",
+        "color: inherit",
+        "color: green",
+        "color: inherit",
+        "color: green",
+        "color: inherit"
+      );
+    }
   }
-);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Box_Box_cjs.Box,
+    {
+      className: lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("top", space),
+      ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        lib_components_Box_Box_cjs.Box,
+        {
+          display: "flex",
+          flexWrap: "wrap",
+          className: lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("left", space),
+          children: React.Children.map(lib_utils_flattenChildren_cjs.flattenChildren(children), (child, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            lib_components_Box_Box_cjs.Box,
+            {
+              minWidth: 0,
+              className: lib_utils_resolveResponsiveProp_cjs.resolveResponsiveProp(
+                columns,
+                lib_components_Tiles_Tiles_css_cjs.columnsMobile,
+                lib_components_Tiles_Tiles_css_cjs.columnsTablet,
+                lib_components_Tiles_Tiles_css_cjs.columnsDesktop,
+                lib_components_Tiles_Tiles_css_cjs.columnsWide
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                lib_components_Box_Box_cjs.Box,
+                {
+                  height: "full",
+                  paddingTop: space,
+                  paddingLeft: space,
+                  children: [
+                    dividers && i > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                      lib_components_Box_Box_cjs.Box,
+                      {
+                        paddingBottom: space,
+                        display: lib_css_atoms_sprinkles_css_cjs.mapResponsiveValue(
+                          columns,
+                          (column) => column === 1 ? "block" : "none"
+                        ),
+                        children: typeof dividers === "string" ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Divider_Divider_cjs.Divider, { weight: dividers }) : /* @__PURE__ */ jsxRuntime.jsx(lib_components_Divider_Divider_cjs.Divider, {})
+                      }
+                    ) : null,
+                    child
+                  ]
+                }
+              )
+            }
+          ))
+        }
+      )
+    }
+  );
+};
 exports.Tiles = Tiles;

package/dist/lib/components/Tiles/Tiles.mjs

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import dedent from "dedent";
 import { Children } from "react";
 import { flattenChildren } from "../../utils/flattenChildren.mjs";
 import { Box } from "../Box/Box.mjs";
@@ -12,59 +13,93 @@ const Tiles = ({
   children,
   space = "none",
   columns = 1,
-  dividers = false,
+  dividers,
   data,
   ...restProps
-}) => /* @__PURE__ */ jsx(
-  Box,
-  {
-    className: negativeMargin("top", space),
-    ...buildDataAttributes({ data, validateRestProps: restProps }),
-    children: /* @__PURE__ */ jsx(
-      Box,
-      {
-        display: "flex",
-        flexWrap: "wrap",
-        className: negativeMargin("left", space),
-        children: Children.map(flattenChildren(children), (child, i) => /* @__PURE__ */ jsx(
-          Box,
-          {
-            minWidth: 0,
-            className: resolveResponsiveProp(
-              columns,
-              columnsMobile,
-              columnsTablet,
-              columnsDesktop,
-              columnsWide
-            ),
-            children: /* @__PURE__ */ jsxs(
-              Box,
-              {
-                height: "full",
-                paddingTop: space,
-                paddingLeft: space,
-                children: [
-                  dividers && i > 0 ? /* @__PURE__ */ jsx(
-                    Box,
-                    {
-                      paddingBottom: space,
-                      display: mapResponsiveValue(
-                        columns,
-                        (column) => column === 1 ? "block" : "none"
-                      ),
-                      children: typeof dividers === "string" ? /* @__PURE__ */ jsx(Divider, { weight: dividers }) : /* @__PURE__ */ jsx(Divider, {})
-                    }
-                  ) : null,
-                  child
-                ]
-              }
-            )
-          }
-        ))
-      }
-    )
+}) => {
+  if (process.env.NODE_ENV !== "production") {
+    if (typeof dividers !== "undefined") {
+      console.warn(
+        dedent`
+          The "dividers" prop is deprecated and will be removed in v33 to enable CSS gap in layout components.
+          Update your usage now to make upgrading easier by manually inserting "Divider" components as required:
+            %c- <Tiles space="..." dividers>
+            %c+ <Tiles space="...">
+            %c    <Component>{item}</Component>
+            %c+   <Stack space="...">
+            +     <Hidden above="mobile"><Divider /></Hidden>
+            %c      <Component>{item}</Component>
+            %c+   </Stack>
+            +   <Stack space="...">
+            +     <Hidden above="mobile"><Divider /></Hidden>
+            %c      <Component>{item}</Component>
+            %c+   </Stack>
+            %c  </Tiles>
+          See migration guide for details: https://github.com/seek-oss/braid-design-system/blob/master/docs/Removing%20dividers%20support%20from%20layout%20components.md
+        `,
+        "color: red",
+        "color: green",
+        "color: inherit",
+        "color: green",
+        "color: inherit",
+        "color: green",
+        "color: inherit",
+        "color: green",
+        "color: inherit"
+      );
+    }
   }
-);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: negativeMargin("top", space),
+      ...buildDataAttributes({ data, validateRestProps: restProps }),
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          display: "flex",
+          flexWrap: "wrap",
+          className: negativeMargin("left", space),
+          children: Children.map(flattenChildren(children), (child, i) => /* @__PURE__ */ jsx(
+            Box,
+            {
+              minWidth: 0,
+              className: resolveResponsiveProp(
+                columns,
+                columnsMobile,
+                columnsTablet,
+                columnsDesktop,
+                columnsWide
+              ),
+              children: /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  height: "full",
+                  paddingTop: space,
+                  paddingLeft: space,
+                  children: [
+                    dividers && i > 0 ? /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        paddingBottom: space,
+                        display: mapResponsiveValue(
+                          columns,
+                          (column) => column === 1 ? "block" : "none"
+                        ),
+                        children: typeof dividers === "string" ? /* @__PURE__ */ jsx(Divider, { weight: dividers }) : /* @__PURE__ */ jsx(Divider, {})
+                      }
+                    ) : null,
+                    child
+                  ]
+                }
+              )
+            }
+          ))
+        }
+      )
+    }
+  );
+};
 export {
   Tiles
 };

package/dist/wireframe.chunk.d.ts

@@ -3313,6 +3313,14 @@ interface StackProps {
     children: ReactNodeNoStrings;
     space: ResponsiveSpace;
     align?: OptionalResponsiveValue<Align>;
+    /**
+     * @deprecated Will be removed in v33 to enable [CSS gap] in layout components.
+     *
+     * See [migration guide] for details.
+     *
+     * [CSS gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
+     * [migration guide]: https://github.com/seek-oss/braid-design-system/blob/master/docs/Removing%20dividers%20support%20from%20layout%20components.md
+     * */
     dividers?: boolean | DividerProps['weight'];
     data?: DataAttributeMap;
 }
@@ -3918,6 +3926,14 @@ interface TilesProps {
     children: ReactNodeNoStrings;
     space: RequiredResponsiveValue$1<Space>;
     columns: RequiredResponsiveValue$1<1 | 2 | 3 | 4 | 5 | 6>;
+    /**
+     * @deprecated Will be removed in v33 to enable [CSS gap] in layout components.
+     *
+     * See [migration guide] for details.
+     *
+     * [CSS gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
+     * [migration guide]: https://github.com/seek-oss/braid-design-system/blob/master/docs/Removing%20dividers%20support%20from%20layout%20components.md
+     * */
     dividers?: boolean | DividerProps['weight'];
     data?: DataAttributeMap;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "32.23.1",
+  "version": "32.24.0",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -220,13 +220,13 @@
     "fast-glob": "^3.2.12",
     "fs-extra": "^10.1.0",
     "html-validate": "^7.1.1",
-    "playroom": "0.38.0",
+    "playroom": "0.38.1",
     "prettier": "^2.8.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.3.0",
     "sanitize-html": "^2.12.1",
-    "sku": "13.1.0",
+    "sku": "13.1.2",
     "storybook": "7.6.20",
     "svgo": "^2.8.0",
     "title-case": "^3.0.3",

package/dist/lib/components/Autosuggest/useScrollIntoView.cjs

@@ -1,19 +0,0 @@
-"use strict";
-const React = require("react");
-function useScrollIntoView(element, scrollContainer) {
-  React.useEffect(() => {
-    if (scrollContainer && element) {
-      const itemOffsetRelativeToContainer = element.offsetParent === scrollContainer ? element.offsetTop : element.offsetTop - scrollContainer.offsetTop;
-      let { scrollTop } = scrollContainer;
-      if (itemOffsetRelativeToContainer < scrollTop) {
-        scrollTop = itemOffsetRelativeToContainer;
-      } else if (itemOffsetRelativeToContainer + element.offsetHeight > scrollTop + scrollContainer.offsetHeight) {
-        scrollTop = itemOffsetRelativeToContainer + element.offsetHeight - scrollContainer.offsetHeight;
-      }
-      if (scrollTop !== scrollContainer.scrollTop) {
-        scrollContainer.scrollTop = scrollTop;
-      }
-    }
-  }, [scrollContainer, element]);
-}
-exports.useScrollIntoView = useScrollIntoView;

package/dist/lib/components/Autosuggest/useScrollIntoView.mjs

@@ -1,20 +0,0 @@
-import { useEffect } from "react";
-function useScrollIntoView(element, scrollContainer) {
-  useEffect(() => {
-    if (scrollContainer && element) {
-      const itemOffsetRelativeToContainer = element.offsetParent === scrollContainer ? element.offsetTop : element.offsetTop - scrollContainer.offsetTop;
-      let { scrollTop } = scrollContainer;
-      if (itemOffsetRelativeToContainer < scrollTop) {
-        scrollTop = itemOffsetRelativeToContainer;
-      } else if (itemOffsetRelativeToContainer + element.offsetHeight > scrollTop + scrollContainer.offsetHeight) {
-        scrollTop = itemOffsetRelativeToContainer + element.offsetHeight - scrollContainer.offsetHeight;
-      }
-      if (scrollTop !== scrollContainer.scrollTop) {
-        scrollContainer.scrollTop = scrollTop;
-      }
-    }
-  }, [scrollContainer, element]);
-}
-export {
-  useScrollIntoView
-};