braid-design-system 32.16.0 → 32.16.2

package/dist/reset.cjs

@@ -1,7 +1,7 @@
 "use strict";
-require("./styles/lib/css/reset/reset.css.cjs");
-require("./styles/lib/css/atoms/sprinkles.css.cjs");
-const sideEffects_lib_css_reset_resetTracker_cjs = require("./side-effects/lib/css/reset/resetTracker.cjs");
+require("./lib/css/reset/reset.css.cjs");
+require("./lib/css/atoms/sprinkles.css.cjs");
+const lib_css_reset_resetTracker_cjs = require("./lib/css/reset/resetTracker.cjs");
 if (process.env.NODE_ENV === "development") {
-  sideEffects_lib_css_reset_resetTracker_cjs.markResetImported();
+  lib_css_reset_resetTracker_cjs.markResetImported();
 }

package/dist/reset.mjs

@@ -1,6 +1,6 @@
-import "./styles/lib/css/reset/reset.css.mjs";
-import "./styles/lib/css/atoms/sprinkles.css.mjs";
-import { markResetImported } from "./side-effects/lib/css/reset/resetTracker.mjs";
+import "./lib/css/reset/reset.css.mjs";
+import "./lib/css/atoms/sprinkles.css.mjs";
+import { markResetImported } from "./lib/css/reset/resetTracker.mjs";
 if (process.env.NODE_ENV === "development") {
   markResetImported();
 }

package/dist/test.cjs

@@ -1,30 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const styles_lib_themes_apac_apacTheme_css_cjs = require("./styles/lib/themes/apac/apacTheme.css.cjs");
-const styles_lib_themes_seekJobs_seekJobs_css_cjs = require("./styles/lib/themes/seekJobs/seekJobs.css.cjs");
-const styles_lib_themes_seekBusiness_seekBusinessTheme_css_cjs = require("./styles/lib/themes/seekBusiness/seekBusinessTheme.css.cjs");
-const styles_lib_themes_wireframe_wireframeTheme_css_cjs = require("./styles/lib/themes/wireframe/wireframeTheme.css.cjs");
-const styles_lib_themes_docs_docsTheme_css_cjs = require("./styles/lib/themes/docs/docsTheme.css.cjs");
-const sideEffects_lib_components_BraidProvider_BraidProvider_cjs = require("./side-effects/lib/components/BraidProvider/BraidProvider.cjs");
-const themes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  apac: styles_lib_themes_apac_apacTheme_css_cjs.apacTheme_css,
-  docs: styles_lib_themes_docs_docsTheme_css_cjs.docsTheme_css,
-  seekBusiness: styles_lib_themes_seekBusiness_seekBusinessTheme_css_cjs.seekBusinessTheme_css,
-  seekJobs: styles_lib_themes_seekJobs_seekJobs_css_cjs.seekJobs_css,
-  wireframe: styles_lib_themes_wireframe_wireframeTheme_css_cjs.wireframe
-}, Symbol.toStringTag, { value: "Module" }));
-const BraidTestProvider = ({
-  themeName = "wireframe",
-  breakpoint = null,
-  ...restProps
-}) => /* @__PURE__ */ jsxRuntime.jsx(sideEffects_lib_components_BraidProvider_BraidProvider_cjs.BraidTestProviderContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(sideEffects_lib_components_BraidProvider_BraidProvider_cjs.breakpointContext.Provider, { value: breakpoint, children: /* @__PURE__ */ jsxRuntime.jsx(
-  sideEffects_lib_components_BraidProvider_BraidProvider_cjs.BraidProvider,
-  {
-    ...restProps,
-    theme: themes[themeName],
-    styleBody: void 0
-  }
-) }) });
-exports.BraidTestProvider = BraidTestProvider;
+const lib_components_BraidTestProvider_BraidTestProvider_cjs = require("./lib/components/BraidTestProvider/BraidTestProvider.cjs");
+exports.BraidTestProvider = lib_components_BraidTestProvider_BraidTestProvider_cjs.BraidTestProvider;

package/dist/test.mjs

@@ -1,30 +1,4 @@
-import { jsx } from "react/jsx-runtime";
-import { apacTheme_css } from "./styles/lib/themes/apac/apacTheme.css.mjs";
-import { seekJobs_css } from "./styles/lib/themes/seekJobs/seekJobs.css.mjs";
-import { seekBusinessTheme_css } from "./styles/lib/themes/seekBusiness/seekBusinessTheme.css.mjs";
-import { wireframe } from "./styles/lib/themes/wireframe/wireframeTheme.css.mjs";
-import { docsTheme_css } from "./styles/lib/themes/docs/docsTheme.css.mjs";
-import { BraidTestProviderContext, breakpointContext, BraidProvider } from "./side-effects/lib/components/BraidProvider/BraidProvider.mjs";
-const themes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  apac: apacTheme_css,
-  docs: docsTheme_css,
-  seekBusiness: seekBusinessTheme_css,
-  seekJobs: seekJobs_css,
-  wireframe
-}, Symbol.toStringTag, { value: "Module" }));
-const BraidTestProvider = ({
-  themeName = "wireframe",
-  breakpoint = null,
-  ...restProps
-}) => /* @__PURE__ */ jsx(BraidTestProviderContext.Provider, { value: true, children: /* @__PURE__ */ jsx(breakpointContext.Provider, { value: breakpoint, children: /* @__PURE__ */ jsx(
-  BraidProvider,
-  {
-    ...restProps,
-    theme: themes[themeName],
-    styleBody: void 0
-  }
-) }) });
+import { BraidTestProvider } from "./lib/components/BraidTestProvider/BraidTestProvider.mjs";
 export {
   BraidTestProvider
 };

package/dist/themes/apac.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const styles_lib_themes_apac_apacTheme_css_cjs = require("../styles/lib/themes/apac/apacTheme.css.cjs");
-module.exports = styles_lib_themes_apac_apacTheme_css_cjs.apacTheme_css;
+const lib_themes_apac_apacTheme_css_cjs = require("../lib/themes/apac/apacTheme.css.cjs");
+module.exports = lib_themes_apac_apacTheme_css_cjs.apacTheme_css;

package/dist/themes/apac.mjs

@@ -1,4 +1,4 @@
-import { apacTheme_css } from "../styles/lib/themes/apac/apacTheme.css.mjs";
+import { apacTheme_css } from "../lib/themes/apac/apacTheme.css.mjs";
 export {
   apacTheme_css as default
 };

package/dist/themes/docs.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const styles_lib_themes_docs_docsTheme_css_cjs = require("../styles/lib/themes/docs/docsTheme.css.cjs");
-module.exports = styles_lib_themes_docs_docsTheme_css_cjs.docsTheme_css;
+const lib_themes_docs_docsTheme_css_cjs = require("../lib/themes/docs/docsTheme.css.cjs");
+module.exports = lib_themes_docs_docsTheme_css_cjs.docsTheme_css;

package/dist/themes/docs.mjs

@@ -1,4 +1,4 @@
-import { docsTheme_css } from "../styles/lib/themes/docs/docsTheme.css.mjs";
+import { docsTheme_css } from "../lib/themes/docs/docsTheme.css.mjs";
 export {
   docsTheme_css as default
 };

package/dist/themes/seekBusiness.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const styles_lib_themes_seekBusiness_seekBusinessTheme_css_cjs = require("../styles/lib/themes/seekBusiness/seekBusinessTheme.css.cjs");
-module.exports = styles_lib_themes_seekBusiness_seekBusinessTheme_css_cjs.seekBusinessTheme_css;
+const lib_themes_seekBusiness_seekBusinessTheme_css_cjs = require("../lib/themes/seekBusiness/seekBusinessTheme.css.cjs");
+module.exports = lib_themes_seekBusiness_seekBusinessTheme_css_cjs.seekBusinessTheme_css;

package/dist/themes/seekBusiness.mjs

@@ -1,4 +1,4 @@
-import { seekBusinessTheme_css } from "../styles/lib/themes/seekBusiness/seekBusinessTheme.css.mjs";
+import { seekBusinessTheme_css } from "../lib/themes/seekBusiness/seekBusinessTheme.css.mjs";
 export {
   seekBusinessTheme_css as default
 };

package/dist/themes/seekJobs.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const styles_lib_themes_seekJobs_seekJobs_css_cjs = require("../styles/lib/themes/seekJobs/seekJobs.css.cjs");
-module.exports = styles_lib_themes_seekJobs_seekJobs_css_cjs.seekJobs_css;
+const lib_themes_seekJobs_seekJobs_css_cjs = require("../lib/themes/seekJobs/seekJobs.css.cjs");
+module.exports = lib_themes_seekJobs_seekJobs_css_cjs.seekJobs_css;

package/dist/themes/seekJobs.mjs

@@ -1,4 +1,4 @@
-import { seekJobs_css } from "../styles/lib/themes/seekJobs/seekJobs.css.mjs";
+import { seekJobs_css } from "../lib/themes/seekJobs/seekJobs.css.mjs";
 export {
   seekJobs_css as default
 };

package/dist/themes/wireframe.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const styles_lib_themes_wireframe_wireframeTheme_css_cjs = require("../styles/lib/themes/wireframe/wireframeTheme.css.cjs");
-module.exports = styles_lib_themes_wireframe_wireframeTheme_css_cjs.wireframe;
+const lib_themes_wireframe_wireframeTheme_css_cjs = require("../lib/themes/wireframe/wireframeTheme.css.cjs");
+module.exports = lib_themes_wireframe_wireframeTheme_css_cjs.wireframe;

package/dist/themes/wireframe.mjs

@@ -1,4 +1,4 @@
-import { wireframe } from "../styles/lib/themes/wireframe/wireframeTheme.css.mjs";
+import { wireframe } from "../lib/themes/wireframe/wireframeTheme.css.mjs";
 export {
   wireframe as default
 };

package/dist/wireframe.chunk.d.ts

@@ -2767,6 +2767,7 @@ interface AccordionProps {
 }
 declare const Accordion$1: ({ children, size, tone, weight, space: spaceProp, dividers, data, ...restProps }: AccordionProps) => JSX.Element;
 
+type ValueOrArray<T> = T | T[];
 declare const validTones: readonly ["promote", "info", "neutral", "positive", "caution", "critical"];
 type Tone$2 = (typeof validTones)[number];
 type BadgeWeight = 'strong' | 'regular';
@@ -2775,7 +2776,7 @@ interface BadgeProps {
     weight?: BadgeWeight;
     bleedY?: boolean;
     title?: string;
-    children: string;
+    children: ValueOrArray<string | number>;
     id?: string;
     data?: DataAttributeMap;
     tabIndex?: BoxProps['tabIndex'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "32.16.0",
+  "version": "32.16.2",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -226,7 +226,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "sanitize-html": "^2.7.0",
-    "sku": "12.4.9",
+    "sku": "12.4.10",
     "svgo": "^2.8.0",
     "title-case": "^3.0.3"
   },
@@ -241,7 +241,7 @@
   "scripts": {
     "build": "crackle package",
     "codemod": "rm -rf ./codemod/dist && cp -r ../codemod/dist ./codemod/dist",
-    "dev": "crackle dev --webpack",
+    "dev": "crackle dev --shim=none",
     "preformat:eslint": "ignore-sync .eslintignore-sync",
     "format:eslint": "eslint --cache --fix .",
     "format:prettier": "prettier --cache --write .",
@@ -253,6 +253,9 @@
     "lint:tsc": "tsc",
     "storybook": "SKU_TELEMETRY=false sku storybook",
     "storybook:build": "SKU_TELEMETRY=false sku build-storybook",
-    "storybook:chromatic": "chromatic --storybook-build-dir ./dist-storybook --exit-zero-on-changes --exit-once-uploaded --auto-accept-changes master"
+    "storybook:chromatic": "chromatic --storybook-build-dir ./dist-storybook --exit-zero-on-changes --exit-once-uploaded --auto-accept-changes master",
+    "%skott": "skott --displayMode=file-tree --showCircularDependencies --no-trackTypeOnlyDependencies",
+    "validate:src": "pnpm %skott src",
+    "validate:dist": "pnpm %skott dist/index.mjs"
   }
 }

package/dist/side-effects/lib/components/BraidProvider/BraidProvider.cjs

@@ -1,148 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const assert = require("assert");
-const dedent = require("dedent");
-const React = require("react");
-const sideEffects_lib_css_reset_resetTracker_cjs = require("../../css/reset/resetTracker.cjs");
-const styles_lib_components_private_hideFocusRings_hideFocusRingsDataAttribute_cjs = require("../../../../styles/lib/components/private/hideFocusRings/hideFocusRingsDataAttribute.cjs");
-const styles_lib_css_breakpoints_cjs = require("../../../../styles/lib/css/breakpoints.cjs");
-const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../../styles/lib/css/atoms/sprinkles.css.cjs");
-const styles_lib_components_BraidProvider_VanillaThemeContainer_cjs = require("../../../../styles/lib/components/BraidProvider/VanillaThemeContainer.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
-const dedent__default = /* @__PURE__ */ _interopDefaultCompat(dedent);
-const hideFocusRings = () => document.body.setAttribute(styles_lib_components_private_hideFocusRings_hideFocusRingsDataAttribute_cjs.hideFocusRingsDataAttribute, "true");
-const showFocusRings = () => document.body.removeAttribute(styles_lib_components_private_hideFocusRings_hideFocusRingsDataAttribute_cjs.hideFocusRingsDataAttribute);
-const useHideFocusRings = (enabled = true) => {
-  React.useEffect(() => {
-    if (enabled) {
-      window.addEventListener("keydown", showFocusRings);
-      window.addEventListener("mousemove", hideFocusRings);
-      return () => {
-        window.removeEventListener("keydown", showFocusRings);
-        window.removeEventListener("mousemove", hideFocusRings);
-      };
-    }
-  }, [enabled]);
-};
-const BraidTestProviderContext = React.createContext(false);
-const minWidthQuery = (breakpoint) => window.matchMedia(`(min-width: ${breakpoint}px)`);
-const getCurrentBreakpoint = (tabletQuery, desktopQuery, wideQuery) => {
-  if (wideQuery.matches) {
-    return "wide";
-  }
-  if (desktopQuery.matches) {
-    return "desktop";
-  }
-  if (tabletQuery.matches) {
-    return "tablet";
-  }
-  return "mobile";
-};
-const breakpointContext = React.createContext(null);
-function BreakpointProvider({ children }) {
-  const { tablet, desktop, wide } = styles_lib_css_breakpoints_cjs.breakpoints;
-  const [state, setState] = React.useState(null);
-  React.useEffect(() => {
-    let mounted = true;
-    const tabletQuery = minWidthQuery(tablet);
-    const desktopQuery = minWidthQuery(desktop);
-    const wideQuery = minWidthQuery(wide);
-    const onChange = () => {
-      if (!mounted) {
-        return;
-      }
-      const newBreakPoint = getCurrentBreakpoint(
-        tabletQuery,
-        desktopQuery,
-        wideQuery
-      );
-      if (newBreakPoint !== state) {
-        setState(newBreakPoint);
-      }
-    };
-    tabletQuery.addListener(onChange);
-    desktopQuery.addListener(onChange);
-    wideQuery.addListener(onChange);
-    onChange();
-    return () => {
-      mounted = false;
-      tabletQuery.removeListener(onChange);
-      desktopQuery.removeListener(onChange);
-      wideQuery.removeListener(onChange);
-    };
-  }, [tablet, desktop, wide, state]);
-  return /* @__PURE__ */ jsxRuntime.jsx(breakpointContext.Provider, { value: state, children });
-}
-const BraidThemeContext = React.createContext(null);
-const useBraidTheme = () => {
-  const braidTheme = React.useContext(BraidThemeContext);
-  if (braidTheme === null) {
-    throw new Error("No Braid theme available on context");
-  }
-  return braidTheme;
-};
-if (process.env.NODE_ENV === "development") {
-  sideEffects_lib_css_reset_resetTracker_cjs.ensureResetImported();
-}
-const makeLinkComponent = (render) => ({ __forwardRef__: React.forwardRef(render) });
-const DefaultLinkComponent = makeLinkComponent((props, ref) => /* @__PURE__ */ jsxRuntime.jsx("a", { ref, ...props }));
-const LinkComponentContext = React.createContext(DefaultLinkComponent);
-const useLinkComponent = (ref) => {
-  const linkComponent = React.useContext(LinkComponentContext);
-  assert__default.default(
-    !ref || "__forwardRef__" in linkComponent,
-    dedent__default.default`
-      You're passing a ref to a Braid link, but your app is providing a custom link component to 'BraidProvider' that doesn't appear to support refs.
-
-      To fix this, you need to use Braid's 'makeLinkComponent' helper function when creating your custom link component. This ensures that refs are forwarded correctly, and allows us to silence this error message.
-
-      For more information and an example implementation, check out the documentation for 'BraidProvider': https://seek-oss.github.io/braid-design-system/components/BraidProvider
-    `
-  );
-  if ("__forwardRef__" in linkComponent) {
-    return linkComponent.__forwardRef__;
-  }
-  return linkComponent;
-};
-const BraidProvider = ({
-  theme,
-  styleBody = true,
-  linkComponent,
-  children
-}) => {
-  const alreadyInBraidProvider = Boolean(React.useContext(BraidThemeContext));
-  const inTestProvider = React.useContext(BraidTestProviderContext);
-  const linkComponentFromContext = React.useContext(LinkComponentContext);
-  useHideFocusRings(!(alreadyInBraidProvider || inTestProvider));
-  assert__default.default(
-    inTestProvider || typeof navigator === "undefined" || navigator.userAgent === void 0 || navigator.userAgent.indexOf("jsdom") === -1,
-    `Rendering 'BraidProvider' in Jest is not supported as it expects a browser environment. Please switch to 'BraidTestProvider'. See the docs for more info: https://seek-oss.github.io/braid-design-system/components/BraidTestProvider`
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(BraidThemeContext.Provider, { value: theme, children: [
-    styleBody ? /* @__PURE__ */ jsxRuntime.jsx("style", { type: "text/css", children: `
-            html,body{margin:0;padding:0;background:${theme.background.lightMode}}
-            html.${styles_lib_css_atoms_sprinkles_css_cjs.darkMode},html.${styles_lib_css_atoms_sprinkles_css_cjs.darkMode} body{color-scheme:dark;background:${theme.background.darkMode}}
-          ` }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      styles_lib_components_BraidProvider_VanillaThemeContainer_cjs.VanillaThemeContainer,
-      {
-        theme: theme.vanillaTheme,
-        setDefaultTextTones: !alreadyInBraidProvider,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          LinkComponentContext.Provider,
-          {
-            value: linkComponent || linkComponentFromContext,
-            children: alreadyInBraidProvider || inTestProvider ? children : /* @__PURE__ */ jsxRuntime.jsx(BreakpointProvider, { children })
-          }
-        )
-      }
-    )
-  ] });
-};
-exports.BraidProvider = BraidProvider;
-exports.BraidTestProviderContext = BraidTestProviderContext;
-exports.breakpointContext = breakpointContext;
-exports.makeLinkComponent = makeLinkComponent;
-exports.useBraidTheme = useBraidTheme;
-exports.useLinkComponent = useLinkComponent;

package/dist/side-effects/lib/components/BraidProvider/BraidProvider.mjs

@@ -1,146 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import assert from "assert";
-import dedent from "dedent";
-import { useEffect, createContext, useState, useContext, forwardRef } from "react";
-import { ensureResetImported } from "../../css/reset/resetTracker.mjs";
-import { hideFocusRingsDataAttribute } from "../../../../styles/lib/components/private/hideFocusRings/hideFocusRingsDataAttribute.mjs";
-import { breakpoints } from "../../../../styles/lib/css/breakpoints.mjs";
-import { darkMode } from "../../../../styles/lib/css/atoms/sprinkles.css.mjs";
-import { VanillaThemeContainer } from "../../../../styles/lib/components/BraidProvider/VanillaThemeContainer.mjs";
-const hideFocusRings = () => document.body.setAttribute(hideFocusRingsDataAttribute, "true");
-const showFocusRings = () => document.body.removeAttribute(hideFocusRingsDataAttribute);
-const useHideFocusRings = (enabled = true) => {
-  useEffect(() => {
-    if (enabled) {
-      window.addEventListener("keydown", showFocusRings);
-      window.addEventListener("mousemove", hideFocusRings);
-      return () => {
-        window.removeEventListener("keydown", showFocusRings);
-        window.removeEventListener("mousemove", hideFocusRings);
-      };
-    }
-  }, [enabled]);
-};
-const BraidTestProviderContext = createContext(false);
-const minWidthQuery = (breakpoint) => window.matchMedia(`(min-width: ${breakpoint}px)`);
-const getCurrentBreakpoint = (tabletQuery, desktopQuery, wideQuery) => {
-  if (wideQuery.matches) {
-    return "wide";
-  }
-  if (desktopQuery.matches) {
-    return "desktop";
-  }
-  if (tabletQuery.matches) {
-    return "tablet";
-  }
-  return "mobile";
-};
-const breakpointContext = createContext(null);
-function BreakpointProvider({ children }) {
-  const { tablet, desktop, wide } = breakpoints;
-  const [state, setState] = useState(null);
-  useEffect(() => {
-    let mounted = true;
-    const tabletQuery = minWidthQuery(tablet);
-    const desktopQuery = minWidthQuery(desktop);
-    const wideQuery = minWidthQuery(wide);
-    const onChange = () => {
-      if (!mounted) {
-        return;
-      }
-      const newBreakPoint = getCurrentBreakpoint(
-        tabletQuery,
-        desktopQuery,
-        wideQuery
-      );
-      if (newBreakPoint !== state) {
-        setState(newBreakPoint);
-      }
-    };
-    tabletQuery.addListener(onChange);
-    desktopQuery.addListener(onChange);
-    wideQuery.addListener(onChange);
-    onChange();
-    return () => {
-      mounted = false;
-      tabletQuery.removeListener(onChange);
-      desktopQuery.removeListener(onChange);
-      wideQuery.removeListener(onChange);
-    };
-  }, [tablet, desktop, wide, state]);
-  return /* @__PURE__ */ jsx(breakpointContext.Provider, { value: state, children });
-}
-const BraidThemeContext = createContext(null);
-const useBraidTheme = () => {
-  const braidTheme = useContext(BraidThemeContext);
-  if (braidTheme === null) {
-    throw new Error("No Braid theme available on context");
-  }
-  return braidTheme;
-};
-if (process.env.NODE_ENV === "development") {
-  ensureResetImported();
-}
-const makeLinkComponent = (render) => ({ __forwardRef__: forwardRef(render) });
-const DefaultLinkComponent = makeLinkComponent((props, ref) => /* @__PURE__ */ jsx("a", { ref, ...props }));
-const LinkComponentContext = createContext(DefaultLinkComponent);
-const useLinkComponent = (ref) => {
-  const linkComponent = useContext(LinkComponentContext);
-  assert(
-    !ref || "__forwardRef__" in linkComponent,
-    dedent`
-      You're passing a ref to a Braid link, but your app is providing a custom link component to 'BraidProvider' that doesn't appear to support refs.
-
-      To fix this, you need to use Braid's 'makeLinkComponent' helper function when creating your custom link component. This ensures that refs are forwarded correctly, and allows us to silence this error message.
-
-      For more information and an example implementation, check out the documentation for 'BraidProvider': https://seek-oss.github.io/braid-design-system/components/BraidProvider
-    `
-  );
-  if ("__forwardRef__" in linkComponent) {
-    return linkComponent.__forwardRef__;
-  }
-  return linkComponent;
-};
-const BraidProvider = ({
-  theme,
-  styleBody = true,
-  linkComponent,
-  children
-}) => {
-  const alreadyInBraidProvider = Boolean(useContext(BraidThemeContext));
-  const inTestProvider = useContext(BraidTestProviderContext);
-  const linkComponentFromContext = useContext(LinkComponentContext);
-  useHideFocusRings(!(alreadyInBraidProvider || inTestProvider));
-  assert(
-    inTestProvider || typeof navigator === "undefined" || navigator.userAgent === void 0 || navigator.userAgent.indexOf("jsdom") === -1,
-    `Rendering 'BraidProvider' in Jest is not supported as it expects a browser environment. Please switch to 'BraidTestProvider'. See the docs for more info: https://seek-oss.github.io/braid-design-system/components/BraidTestProvider`
-  );
-  return /* @__PURE__ */ jsxs(BraidThemeContext.Provider, { value: theme, children: [
-    styleBody ? /* @__PURE__ */ jsx("style", { type: "text/css", children: `
-            html,body{margin:0;padding:0;background:${theme.background.lightMode}}
-            html.${darkMode},html.${darkMode} body{color-scheme:dark;background:${theme.background.darkMode}}
-          ` }) : null,
-    /* @__PURE__ */ jsx(
-      VanillaThemeContainer,
-      {
-        theme: theme.vanillaTheme,
-        setDefaultTextTones: !alreadyInBraidProvider,
-        children: /* @__PURE__ */ jsx(
-          LinkComponentContext.Provider,
-          {
-            value: linkComponent || linkComponentFromContext,
-            children: alreadyInBraidProvider || inTestProvider ? children : /* @__PURE__ */ jsx(BreakpointProvider, { children })
-          }
-        )
-      }
-    )
-  ] });
-};
-export {
-  BraidProvider,
-  BraidTestProviderContext,
-  breakpointContext,
-  makeLinkComponent,
-  useBraidTheme,
-  useLinkComponent
-};

package/dist/styles/lib/components/Accordion/Accordion.cjs

@@ -1,116 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const assert = require("assert");
-const React = require("react");
-const styles_lib_css_atoms_sprinkles_css_cjs = require("../../css/atoms/sprinkles.css.cjs");
-const dedent = require("dedent");
-const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
-const styles_lib_components_Stack_Stack_cjs = require("../Stack/Stack.cjs");
-const styles_lib_components_Divider_Divider_cjs = require("../Divider/Divider.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
-const dedent__default = /* @__PURE__ */ _interopDefaultCompat(dedent);
-const buildDataAttributes = ({ data, validateRestProps }) => {
-  if (process.env.NODE_ENV !== "production") {
-    if (validateRestProps !== false) {
-      const dataAttrs = Object.keys(validateRestProps).filter(
-        (prop) => prop.startsWith("data-")
-      );
-      const formatter = (v) => {
-        if (typeof v === "boolean") {
-          return v ? "" : `={false}`;
-        }
-        if (typeof v === "number") {
-          return `={${v}}`;
-        }
-        return `="${v}"`;
-      };
-      if (dataAttrs.length > 0) {
-        console.warn(
-          dedent__default.default`
-          Braid components do not support the native data attribute format. Use the “data” prop instead.
-            <Component
-          %c${dataAttrs.map((attr) => `-    ${attr}${formatter(validateRestProps[attr])}`).join("\n")}
-          %c+    data={{
-          ${dataAttrs.map((attr) => {
-            const attributeName = attr.replace(/^data-/, "");
-            const property = attributeName.includes("-") ? `'${attributeName}'` : attributeName;
-            return `+      ${property}: ${typeof validateRestProps[attr] === "string" ? `'${validateRestProps[attr]}'` : validateRestProps[attr]},`;
-          }).join("\n")}
-          +    }}
-            %c/>
-           For more details, see the “Data Attributes” documentation:
-           https://seek-oss.github.io/braid-design-system/components/Box#data-attributes
-        `,
-          "color: red",
-          "color: green",
-          "color: inherit"
-        );
-      }
-    }
-  }
-  if (!data) {
-    return;
-  }
-  const keys = Object.keys(data);
-  const dataAttributes = {};
-  for (const key of keys) {
-    dataAttributes[`data-${key}`] = data[key];
-  }
-  return dataAttributes;
-};
-const validTones = ["neutral", "secondary"];
-const AccordionContext = React.createContext(
-  null
-);
-const validSpaceValues = ["medium", "large", "xlarge"];
-const defaultSpaceForSize = {
-  divided: {
-    xsmall: "medium",
-    small: "medium",
-    standard: "medium",
-    large: "large"
-  },
-  undivided: {
-    xsmall: "large",
-    small: "large",
-    standard: "large",
-    large: "large"
-  }
-};
-const Accordion = ({
-  children,
-  size = "large",
-  tone,
-  weight,
-  space: spaceProp,
-  dividers = true,
-  data,
-  ...restProps
-}) => {
-  assert__default.default(
-    spaceProp === void 0 || Object.values(styles_lib_css_atoms_sprinkles_css_cjs.normalizeResponsiveValue(spaceProp)).every(
-      (value) => value === void 0 || validSpaceValues.includes(value)
-    ),
-    `To ensure adequate space for touch targets, 'space' prop values must be one of the following: ${validSpaceValues.map((x) => `"${x}"`).join(", ")}`
-  );
-  assert__default.default(
-    tone === void 0 || validTones.includes(tone),
-    `The 'tone' prop should be one of the following: ${validTones.map((x) => `"${x}"`).join(", ")}`
-  );
-  const contextValue = React.useMemo(
-    () => ({ size, tone, weight }),
-    [size, tone, weight]
-  );
-  const space = spaceProp ?? defaultSpaceForSize[dividers ? "divided" : "undivided"][size];
-  return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: contextValue, children: !dividers ? /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Stack_Stack_cjs.Stack, { space, data, children }) : /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Box_Box_cjs.Box, { ...buildDataAttributes({ data, validateRestProps: restProps }), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Divider_Divider_cjs.Divider, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { paddingY: space, children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Stack_Stack_cjs.Stack, { space, dividers: true, children }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Divider_Divider_cjs.Divider, {})
-  ] }) });
-};
-exports.Accordion = Accordion;
-exports.AccordionContext = AccordionContext;
-exports.buildDataAttributes = buildDataAttributes;
-exports.validSpaceValues = validSpaceValues;
-exports.validTones = validTones;