braid-design-system 33.10.0-seek-business-to-nvl-20250630033521 → 34.0.0-seperate-codemod-20250618035833

package/CHANGELOG.md

@@ -1,59 +1,18 @@
 # braid-design-system
 
-## 33.10.0-seek-business-to-nvl-20250630033521
+## 34.0.0-seperate-codemod-20250618035833
 
-### Minor Changes
-
-- **Box, atoms**: Add `sticky` to `position`. ([#1806](https://github.com/seek-oss/braid-design-system/pull/1806))
-
-  **EXAMPLE USAGE:**
-
-  ```jsx
-  <Box position="sticky" top={0} ... />
-  ```
-
-- **seekBusiness:** Migrate to updated visual language ([#1819](https://github.com/seek-oss/braid-design-system/pull/1819))
-
-  Migrate `seekBusiness` theme to new visual language.
-  Adopts the `seekJobs` theme for the latest design standards, rather than the legacy `apac` theme, while retaining the `seekBusiness` brand accent colour.
-
-## 33.9.1
-
-### Patch Changes
-
-- **ButtonIcon, TooltipRenderer:** Remove unnecessary intermediary element around the tooltip trigger. ([#1814](https://github.com/seek-oss/braid-design-system/pull/1814))
-
-- **BraidTestProvider:** Use stubs instead of mocks to fill missing APIs in jsdom ([#1809](https://github.com/seek-oss/braid-design-system/pull/1809))
-
-  This change allows the BraidTestProvider to be framework agnostic for tests and discourages testing the stubbed browser APIs directly.
-
-## 33.9.0
-
-### Minor Changes
+### Major Changes
 
 - @braid-design-system/codemod has been moved to its own package. ([#1801](https://github.com/seek-oss/braid-design-system/pull/1801))
 
-  **Note: This is technically a breaking change for local migrations, but we expect minimal impact so are releasing this as a minor version change.**
-
-  The `braid-upgrade` command is now no longer part of the `braid-design-system` package. Instead, `braid-upgrade` can be run via the `@braid-design-system/codemod` package.
+  The `braid-upgrade` command is now no longer apart of the core Braid Design System. Instead, `braid-upgrade` can be run via the `@braid-design-system/codemod` package.
 
   #### Example
 
   ```bash
-  pnpm dlx @braid-design-system/codemod v31.11 "**/*.{ts,tsx}"
-  ```
-
-### Patch Changes
-
-- **BraidTestProvider:** Provide `ResizeObserver` & `IntersectionObserver` stubs to jsdom ([#1811](https://github.com/seek-oss/braid-design-system/pull/1811))
-
-  Fixes an issue where rendering certain Braid components within a test environment could throw errors due to missing APIs in jsdom, causing tests to fail with the following error:
-
+  pnpm --package=@braid-design-system/codemod dlx braid-upgrade v31.11 "**/*.{ts,tsx}
   ```
-  ReferenceError: IntersectionObserver is not defined
-  ```
-
-## 33.8.0
 
 ### Minor Changes
 
@@ -94,8 +53,6 @@
 
   Fixes an issue where the close button inside the `Dialog` or `Drawer` was incorrectly inside an `aria-hidden` region.
 
-- **useToast**: Simplify internal logic, refining how the theme is applied to Toasts ([#1797](https://github.com/seek-oss/braid-design-system/pull/1797))
-
 - **Autosuggest**: Ensure suggestions dropdown is visible, even when `Autosuggest` is inside a container with overflow hidden. ([#1738](https://github.com/seek-oss/braid-design-system/pull/1738))
 
 ## 33.7.0

package/dist/index.d.mts

@@ -976,15 +976,6 @@ declare const responsiveAtomicProperties: {
                 length: 4;
             };
             values: {
-                sticky: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
                 relative: {
                     defaultClass: string;
                     conditions: {
@@ -2216,12 +2207,12 @@ declare const sprinkles: ((props: {
         desktop?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
         wide?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 4 | 3, "none" | "flex" | "block" | "inline" | "inlineBlock" | null>;
-    readonly position?: ("sticky" | "relative" | "absolute" | "fixed" | {
-        mobile?: "sticky" | "relative" | "absolute" | "fixed" | undefined;
-        tablet?: "sticky" | "relative" | "absolute" | "fixed" | undefined;
-        desktop?: "sticky" | "relative" | "absolute" | "fixed" | undefined;
-        wide?: "sticky" | "relative" | "absolute" | "fixed" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 4 | 3, "sticky" | "relative" | "absolute" | "fixed" | null>;
+    readonly position?: ("relative" | "absolute" | "fixed" | {
+        mobile?: "relative" | "absolute" | "fixed" | undefined;
+        tablet?: "relative" | "absolute" | "fixed" | undefined;
+        desktop?: "relative" | "absolute" | "fixed" | undefined;
+        wide?: "relative" | "absolute" | "fixed" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 4 | 3, "relative" | "absolute" | "fixed" | null>;
     readonly borderRadius?: ("small" | "large" | "xlarge" | "standard" | "none" | "full" | {
         mobile?: "small" | "large" | "xlarge" | "standard" | "none" | "full" | undefined;
         tablet?: "small" | "large" | "xlarge" | "standard" | "none" | "full" | undefined;

package/dist/index.d.ts

@@ -976,15 +976,6 @@ declare const responsiveAtomicProperties: {
                 length: 4;
             };
             values: {
-                sticky: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
                 relative: {
                     defaultClass: string;
                     conditions: {
@@ -2216,12 +2207,12 @@ declare const sprinkles: ((props: {
         desktop?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
         wide?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 4 | 3, "none" | "flex" | "block" | "inline" | "inlineBlock" | null>;
-    readonly position?: ("sticky" | "relative" | "absolute" | "fixed" | {
-        mobile?: "sticky" | "relative" | "absolute" | "fixed" | undefined;
-        tablet?: "sticky" | "relative" | "absolute" | "fixed" | undefined;
-        desktop?: "sticky" | "relative" | "absolute" | "fixed" | undefined;
-        wide?: "sticky" | "relative" | "absolute" | "fixed" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 4 | 3, "sticky" | "relative" | "absolute" | "fixed" | null>;
+    readonly position?: ("relative" | "absolute" | "fixed" | {
+        mobile?: "relative" | "absolute" | "fixed" | undefined;
+        tablet?: "relative" | "absolute" | "fixed" | undefined;
+        desktop?: "relative" | "absolute" | "fixed" | undefined;
+        wide?: "relative" | "absolute" | "fixed" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 4 | 3, "relative" | "absolute" | "fixed" | null>;
     readonly borderRadius?: ("small" | "large" | "xlarge" | "standard" | "none" | "full" | {
         mobile?: "small" | "large" | "xlarge" | "standard" | "none" | "full" | undefined;
         tablet?: "small" | "large" | "xlarge" | "standard" | "none" | "full" | undefined;

package/dist/lib/color/palette.cjs

@@ -18,7 +18,8 @@ const palette = {
   },
   seekBlue: {
     700: "#051A49",
-    500: "#0D3880"
+    500: "#0D3880",
+    300: "#7795C2"
   },
   seekBlueLight: {
     700: "#1E47A9",

package/dist/lib/color/palette.mjs

@@ -17,7 +17,8 @@ const palette = {
   },
   seekBlue: {
     700: "#051A49",
-    500: "#0D3880"
+    500: "#0D3880",
+    300: "#7795C2"
   },
   seekBlueLight: {
     700: "#1E47A9",

package/dist/lib/components/BraidTestProvider/BraidTestProvider.cjs

@@ -5,31 +5,9 @@ const lib_themes_index_cjs = require("../../themes/index.cjs");
 const lib_components_BraidProvider_BraidProvider_cjs = require("../BraidProvider/BraidProvider.cjs");
 const lib_components_BraidProvider_BreakpointContext_cjs = require("../BraidProvider/BreakpointContext.cjs");
 const lib_components_BraidTestProvider_BraidTestProviderContext_cjs = require("./BraidTestProviderContext.cjs");
-const noop = () => {
-};
 if (typeof navigator !== "undefined" && ((_a = navigator == null ? void 0 : navigator.userAgent) == null ? void 0 : _a.includes("jsdom"))) {
   window.HTMLElement.prototype.scrollIntoView = window.HTMLElement.prototype.scrollIntoView || (() => {
   });
-  class MockResizeObserver {
-    constructor() {
-      this.observe = noop;
-      this.unobserve = noop;
-      this.disconnect = noop;
-    }
-  }
-  window.ResizeObserver = MockResizeObserver;
-  class MockIntersectionObserver {
-    constructor() {
-      this.root = null;
-      this.rootMargin = "";
-      this.thresholds = [];
-      this.observe = noop;
-      this.unobserve = noop;
-      this.disconnect = noop;
-      this.takeRecords = noop;
-    }
-  }
-  window.IntersectionObserver = MockIntersectionObserver;
 }
 const BraidTestProvider = ({
   themeName = "wireframe",

package/dist/lib/components/BraidTestProvider/BraidTestProvider.mjs

@@ -4,31 +4,9 @@ import { themes } from "../../themes/index.mjs";
 import { BraidProvider } from "../BraidProvider/BraidProvider.mjs";
 import { breakpointContext } from "../BraidProvider/BreakpointContext.mjs";
 import { BraidTestProviderContext } from "./BraidTestProviderContext.mjs";
-const noop = () => {
-};
 if (typeof navigator !== "undefined" && ((_a = navigator == null ? void 0 : navigator.userAgent) == null ? void 0 : _a.includes("jsdom"))) {
   window.HTMLElement.prototype.scrollIntoView = window.HTMLElement.prototype.scrollIntoView || (() => {
   });
-  class MockResizeObserver {
-    constructor() {
-      this.observe = noop;
-      this.unobserve = noop;
-      this.disconnect = noop;
-    }
-  }
-  window.ResizeObserver = MockResizeObserver;
-  class MockIntersectionObserver {
-    constructor() {
-      this.root = null;
-      this.rootMargin = "";
-      this.thresholds = [];
-      this.observe = noop;
-      this.unobserve = noop;
-      this.disconnect = noop;
-      this.takeRecords = noop;
-    }
-  }
-  window.IntersectionObserver = MockIntersectionObserver;
 }
 const BraidTestProvider = ({
   themeName = "wireframe",

package/dist/lib/components/TooltipRenderer/TooltipRenderer.cjs

@@ -108,33 +108,6 @@ const TooltipRenderer = ({
       );
     };
   }, []);
-  react.useEffect(() => {
-    const toggleTooltip = () => setOpen(!open);
-    const openTooltip = () => setOpen(true);
-    const closeTooltip = () => setOpen(false);
-    if (triggerRef.current) {
-      triggerRef.current.addEventListener("blur", closeTooltip);
-      if (isMobileDevice) {
-        triggerRef.current.addEventListener("click", toggleTooltip);
-      } else {
-        triggerRef.current.addEventListener("focus", openTooltip);
-        triggerRef.current.addEventListener("mouseenter", openTooltip);
-        triggerRef.current.addEventListener("mouseleave", closeTooltip);
-      }
-    }
-    return () => {
-      if (triggerRef.current) {
-        triggerRef.current.removeEventListener("blur", closeTooltip);
-        if (isMobileDevice) {
-          triggerRef.current.removeEventListener("click", toggleTooltip);
-        } else {
-          triggerRef.current.removeEventListener("focus", openTooltip);
-          triggerRef.current.removeEventListener("mouseenter", openTooltip);
-          triggerRef.current.removeEventListener("mouseleave", closeTooltip);
-        }
-      }
-    };
-  }, [open, isMobileDevice]);
   lib_hooks_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
     const setPositions = () => {
       var _a, _b;
@@ -156,15 +129,29 @@ const TooltipRenderer = ({
     arrowLeftOffset = tooltipLeftToTriggerLeft + triggerPosition.width / 2;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    children({
-      triggerProps: {
-        tabIndex: 0,
-        ref: (el) => {
-          triggerRef.current = el;
+    /* @__PURE__ */ jsxRuntime.jsx(
+      lib_components_Box_Box_cjs.Box,
+      {
+        tabIndex: -1,
+        onBlur: () => setOpen(false),
+        ...isMobileDevice ? {
+          onClick: () => setOpen(!open)
+        } : {
+          onMouseEnter: () => setOpen(true),
+          onFocus: () => setOpen(true),
+          onMouseLeave: () => setOpen(false)
         },
-        "aria-describedby": resolvedId
+        children: children({
+          triggerProps: {
+            tabIndex: 0,
+            ref: (el) => {
+              triggerRef.current = el;
+            },
+            "aria-describedby": resolvedId
+          }
+        })
       }
-    }),
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       lib_components_private_Popover_Popover_cjs.Popover,
       {

package/dist/lib/components/TooltipRenderer/TooltipRenderer.mjs

@@ -105,33 +105,6 @@ const TooltipRenderer = ({
       );
     };
   }, []);
-  useEffect(() => {
-    const toggleTooltip = () => setOpen(!open);
-    const openTooltip = () => setOpen(true);
-    const closeTooltip = () => setOpen(false);
-    if (triggerRef.current) {
-      triggerRef.current.addEventListener("blur", closeTooltip);
-      if (isMobileDevice) {
-        triggerRef.current.addEventListener("click", toggleTooltip);
-      } else {
-        triggerRef.current.addEventListener("focus", openTooltip);
-        triggerRef.current.addEventListener("mouseenter", openTooltip);
-        triggerRef.current.addEventListener("mouseleave", closeTooltip);
-      }
-    }
-    return () => {
-      if (triggerRef.current) {
-        triggerRef.current.removeEventListener("blur", closeTooltip);
-        if (isMobileDevice) {
-          triggerRef.current.removeEventListener("click", toggleTooltip);
-        } else {
-          triggerRef.current.removeEventListener("focus", openTooltip);
-          triggerRef.current.removeEventListener("mouseenter", openTooltip);
-          triggerRef.current.removeEventListener("mouseleave", closeTooltip);
-        }
-      }
-    };
-  }, [open, isMobileDevice]);
   useIsomorphicLayoutEffect(() => {
     const setPositions = () => {
       var _a, _b;
@@ -153,15 +126,29 @@ const TooltipRenderer = ({
     arrowLeftOffset = tooltipLeftToTriggerLeft + triggerPosition.width / 2;
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    children({
-      triggerProps: {
-        tabIndex: 0,
-        ref: (el) => {
-          triggerRef.current = el;
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        tabIndex: -1,
+        onBlur: () => setOpen(false),
+        ...isMobileDevice ? {
+          onClick: () => setOpen(!open)
+        } : {
+          onMouseEnter: () => setOpen(true),
+          onFocus: () => setOpen(true),
+          onMouseLeave: () => setOpen(false)
         },
-        "aria-describedby": resolvedId
+        children: children({
+          triggerProps: {
+            tabIndex: 0,
+            ref: (el) => {
+              triggerRef.current = el;
+            },
+            "aria-describedby": resolvedId
+          }
+        })
       }
-    }),
+    ),
     /* @__PURE__ */ jsx(
       Popover,
       {

package/dist/lib/components/useToast/Toast.cjs

@@ -46,6 +46,7 @@ const ToastIcon = ({ tone, icon }) => {
 const Toast = react.forwardRef(
   ({
     toastKey,
+    vanillaTheme,
     dedupeKey,
     message,
     description,
@@ -98,6 +99,7 @@ const Toast = react.forwardRef(
         ref,
         onMouseEnter: stopTimeout,
         onMouseLeave: startTimeout,
+        className: vanillaTheme,
         ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
         children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { boxShadow: "large", borderRadius, children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_ContentBlock_ContentBlock_cjs.ContentBlock, { width: "xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(
           lib_components_Box_Box_cjs.Box,

package/dist/lib/components/useToast/Toast.mjs

@@ -43,6 +43,7 @@ const ToastIcon = ({ tone, icon }) => {
 const Toast = forwardRef(
   ({
     toastKey,
+    vanillaTheme,
     dedupeKey,
     message,
     description,
@@ -95,6 +96,7 @@ const Toast = forwardRef(
         ref,
         onMouseEnter: stopTimeout,
         onMouseLeave: startTimeout,
+        className: vanillaTheme,
         ...buildDataAttributes({ data, validateRestProps: restProps }),
         children: /* @__PURE__ */ jsx(Box, { boxShadow: "large", borderRadius, children: /* @__PURE__ */ jsx(ContentBlock, { width: "xsmall", children: /* @__PURE__ */ jsx(
           Box,

package/dist/lib/css/atoms/atomicProperties.cjs

@@ -86,7 +86,7 @@ const responsiveProperties = {
     inlineBlock: "inline-block",
     flex: "flex"
   },
-  position: ["relative", "absolute", "fixed", "sticky"],
+  position: ["relative", "absolute", "fixed"],
   borderRadius: {
     none: "0px",
     full: "9999px",

package/dist/lib/css/atoms/atomicProperties.mjs

@@ -85,7 +85,7 @@ const responsiveProperties = {
     inlineBlock: "inline-block",
     flex: "flex"
   },
-  position: ["relative", "absolute", "fixed", "sticky"],
+  position: ["relative", "absolute", "fixed"],
   borderRadius: {
     none: "0px",
     full: "9999px",

package/dist/lib/playroom/useScope.cjs

@@ -8,8 +8,6 @@ const lib_components_useToast_ToastContext_cjs = require("../components/useToast
 const lib_css_breakpoints_cjs = require("../css/breakpoints.cjs");
 function useScope() {
   const responsiveValue = lib_components_useResponsiveValue_useResponsiveValue_cjs.useResponsiveValue();
-  const showToast = lib_components_useToast_ToastContext_cjs.useToast();
-  const playroomState = lib_playroom_playroomState_cjs.usePlayroomStore();
   const [colorMode, setColorMode] = react.useState(
     "lightMode"
   );
@@ -52,10 +50,10 @@ function useScope() {
     vars: entries_css_cjs.vars,
     atoms: entries_css_cjs.atoms,
     breakpoints: lib_css_breakpoints_cjs.breakpoints,
-    showToast,
+    showToast: lib_components_useToast_ToastContext_cjs.useToast(),
     responsiveValue: playroomResponsiveValue,
     colorModeValue: playroomColorModeValue,
-    ...playroomState
+    ...lib_playroom_playroomState_cjs.usePlayroomStore()
   };
 }
 exports.useScope = useScope;

package/dist/lib/playroom/useScope.mjs

@@ -7,8 +7,6 @@ import { useToast } from "../components/useToast/ToastContext.mjs";
 import { breakpoints } from "../css/breakpoints.mjs";
 function useScope() {
   const responsiveValue = useResponsiveValue();
-  const showToast = useToast();
-  const playroomState = usePlayroomStore();
   const [colorMode, setColorMode] = useState(
     "lightMode"
   );
@@ -51,10 +49,10 @@ function useScope() {
     vars,
     atoms,
     breakpoints,
-    showToast,
+    showToast: useToast(),
     responsiveValue: playroomResponsiveValue,
     colorModeValue: playroomColorModeValue,
-    ...playroomState
+    ...usePlayroomStore()
   };
 }
 export {