braid-design-system 32.1.0 → 32.2.0

package/dist/test.mjs

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { t as themes } from "./side-effects/lib/themes/index.mjs";
-import { c as BraidTestProviderContext, b as breakpointContext, B as BraidProvider } from "./side-effects/lib/components/BraidProvider/BraidProvider.mjs";
+import { themes } from "./side-effects/lib/themes/index.mjs";
+import { BraidTestProviderContext, breakpointContext, BraidProvider } from "./side-effects/lib/components/BraidProvider/BraidProvider.mjs";
 const BraidTestProvider = ({
   themeName = "wireframe",
   breakpoint = null,

package/dist/themes/apac.d.ts

@@ -1,137 +1 @@
-declare const _default: {
-    vanillaTheme: string;
-    name: string;
-    displayName: string;
-    background: {
-        lightMode: string;
-        darkMode: string;
-    };
-    webFonts: {
-        linkTag: string;
-    }[];
-    space: {
-        grid: number;
-        space: {
-            gutter: number;
-            xxsmall: number;
-            xsmall: number;
-            small: number;
-            medium: number;
-            large: number;
-            xlarge: number;
-            xxlarge: number;
-        };
-    };
-    color: {
-        foreground: {
-            brandAccentLight: string;
-            brandAccent: string;
-            cautionLight: string;
-            caution: string;
-            criticalLight: string;
-            critical: string;
-            formAccentLight: string;
-            formAccent: string;
-            infoLight: string;
-            info: string;
-            linkLight: string;
-            link: string;
-            linkHover: string;
-            linkVisited: string;
-            linkLightVisited: string;
-            neutral: string;
-            neutralInverted: string;
-            positiveLight: string;
-            positive: string;
-            promoteLight: string;
-            promote: string;
-            rating: string;
-            secondary: string;
-            secondaryInverted: string;
-        };
-        background: {
-            body: string;
-            bodyDark: string;
-            brand: string;
-            brandAccent: string;
-            brandAccentActive: string;
-            brandAccentHover: string;
-            brandAccentSoft: string;
-            brandAccentSoftActive: string;
-            brandAccentSoftHover: string;
-            caution: string;
-            cautionLight: string;
-            critical: string;
-            criticalActive: string;
-            criticalHover: string;
-            criticalLight: string;
-            criticalSoft: string;
-            criticalSoftActive: string;
-            criticalSoftHover: string;
-            formAccent: string;
-            formAccentActive: string;
-            formAccentHover: string;
-            formAccentSoft: string;
-            formAccentSoftActive: string;
-            formAccentSoftHover: string;
-            info: string;
-            infoLight: string;
-            neutral: string;
-            neutralActive: string;
-            neutralHover: string;
-            neutralLight: string;
-            neutralSoft: string;
-            neutralSoftActive: string;
-            neutralSoftHover: string;
-            positive: string;
-            positiveLight: string;
-            promote: string;
-            promoteLight: string;
-            surface: string;
-            surfaceDark: string;
-        };
-    };
-    backgroundLightness: {
-        body: "light" | "dark";
-        bodyDark: "light" | "dark";
-        brand: "light" | "dark";
-        brandAccent: "light" | "dark";
-        brandAccentActive: "light" | "dark";
-        brandAccentHover: "light" | "dark";
-        brandAccentSoft: "light" | "dark";
-        brandAccentSoftActive: "light" | "dark";
-        brandAccentSoftHover: "light" | "dark";
-        caution: "light" | "dark";
-        cautionLight: "light" | "dark";
-        critical: "light" | "dark";
-        criticalActive: "light" | "dark";
-        criticalHover: "light" | "dark";
-        criticalLight: "light" | "dark";
-        criticalSoft: "light" | "dark";
-        criticalSoftActive: "light" | "dark";
-        criticalSoftHover: "light" | "dark";
-        formAccent: "light" | "dark";
-        formAccentActive: "light" | "dark";
-        formAccentHover: "light" | "dark";
-        formAccentSoft: "light" | "dark";
-        formAccentSoftActive: "light" | "dark";
-        formAccentSoftHover: "light" | "dark";
-        info: "light" | "dark";
-        infoLight: "light" | "dark";
-        neutral: "light" | "dark";
-        neutralActive: "light" | "dark";
-        neutralHover: "light" | "dark";
-        neutralLight: "light" | "dark";
-        neutralSoft: "light" | "dark";
-        neutralSoftActive: "light" | "dark";
-        neutralSoftHover: "light" | "dark";
-        positive: "light" | "dark";
-        positiveLight: "light" | "dark";
-        promote: "light" | "dark";
-        promoteLight: "light" | "dark";
-        surface: "light" | "dark";
-        surfaceDark: "light" | "dark";
-    };
-};
-
-export { _default as default };
+export { _default$2 as default } from '../reset.js';

package/dist/themes/apac.mjs

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

package/dist/themes/docs.d.ts

@@ -1,137 +1 @@
-declare const _default: {
-    vanillaTheme: string;
-    name: string;
-    displayName: string;
-    background: {
-        lightMode: string;
-        darkMode: string;
-    };
-    webFonts: {
-        linkTag: string;
-    }[];
-    space: {
-        grid: number;
-        space: {
-            gutter: number;
-            xxsmall: number;
-            xsmall: number;
-            small: number;
-            medium: number;
-            large: number;
-            xlarge: number;
-            xxlarge: number;
-        };
-    };
-    color: {
-        foreground: {
-            brandAccentLight: string;
-            brandAccent: string;
-            cautionLight: string;
-            caution: string;
-            criticalLight: string;
-            critical: string;
-            formAccentLight: string;
-            formAccent: string;
-            infoLight: string;
-            info: string;
-            linkLight: string;
-            link: string;
-            linkHover: string;
-            linkVisited: string;
-            linkLightVisited: string;
-            neutral: string;
-            neutralInverted: string;
-            positiveLight: string;
-            positive: string;
-            promoteLight: string;
-            promote: string;
-            rating: string;
-            secondary: string;
-            secondaryInverted: string;
-        };
-        background: {
-            body: string;
-            bodyDark: string;
-            brand: string;
-            brandAccent: string;
-            brandAccentActive: string;
-            brandAccentHover: string;
-            brandAccentSoft: string;
-            brandAccentSoftActive: string;
-            brandAccentSoftHover: string;
-            caution: string;
-            cautionLight: string;
-            critical: string;
-            criticalActive: string;
-            criticalHover: string;
-            criticalLight: string;
-            criticalSoft: string;
-            criticalSoftActive: string;
-            criticalSoftHover: string;
-            formAccent: string;
-            formAccentActive: string;
-            formAccentHover: string;
-            formAccentSoft: string;
-            formAccentSoftActive: string;
-            formAccentSoftHover: string;
-            info: string;
-            infoLight: string;
-            neutral: string;
-            neutralActive: string;
-            neutralHover: string;
-            neutralLight: string;
-            neutralSoft: string;
-            neutralSoftActive: string;
-            neutralSoftHover: string;
-            positive: string;
-            positiveLight: string;
-            promote: string;
-            promoteLight: string;
-            surface: string;
-            surfaceDark: string;
-        };
-    };
-    backgroundLightness: {
-        body: "light" | "dark";
-        bodyDark: "light" | "dark";
-        brand: "light" | "dark";
-        brandAccent: "light" | "dark";
-        brandAccentActive: "light" | "dark";
-        brandAccentHover: "light" | "dark";
-        brandAccentSoft: "light" | "dark";
-        brandAccentSoftActive: "light" | "dark";
-        brandAccentSoftHover: "light" | "dark";
-        caution: "light" | "dark";
-        cautionLight: "light" | "dark";
-        critical: "light" | "dark";
-        criticalActive: "light" | "dark";
-        criticalHover: "light" | "dark";
-        criticalLight: "light" | "dark";
-        criticalSoft: "light" | "dark";
-        criticalSoftActive: "light" | "dark";
-        criticalSoftHover: "light" | "dark";
-        formAccent: "light" | "dark";
-        formAccentActive: "light" | "dark";
-        formAccentHover: "light" | "dark";
-        formAccentSoft: "light" | "dark";
-        formAccentSoftActive: "light" | "dark";
-        formAccentSoftHover: "light" | "dark";
-        info: "light" | "dark";
-        infoLight: "light" | "dark";
-        neutral: "light" | "dark";
-        neutralActive: "light" | "dark";
-        neutralHover: "light" | "dark";
-        neutralLight: "light" | "dark";
-        neutralSoft: "light" | "dark";
-        neutralSoftActive: "light" | "dark";
-        neutralSoftHover: "light" | "dark";
-        positive: "light" | "dark";
-        positiveLight: "light" | "dark";
-        promote: "light" | "dark";
-        promoteLight: "light" | "dark";
-        surface: "light" | "dark";
-        surfaceDark: "light" | "dark";
-    };
-};
-
-export { _default as default };
+export { _default$3 as default } from '../reset.js';

package/dist/themes/docs.mjs

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

package/dist/themes/seekBusiness.d.ts

@@ -1,137 +1 @@
-declare const _default: {
-    vanillaTheme: string;
-    name: string;
-    displayName: string;
-    background: {
-        lightMode: string;
-        darkMode: string;
-    };
-    webFonts: {
-        linkTag: string;
-    }[];
-    space: {
-        grid: number;
-        space: {
-            gutter: number;
-            xxsmall: number;
-            xsmall: number;
-            small: number;
-            medium: number;
-            large: number;
-            xlarge: number;
-            xxlarge: number;
-        };
-    };
-    color: {
-        foreground: {
-            brandAccentLight: string;
-            brandAccent: string;
-            cautionLight: string;
-            caution: string;
-            criticalLight: string;
-            critical: string;
-            formAccentLight: string;
-            formAccent: string;
-            infoLight: string;
-            info: string;
-            linkLight: string;
-            link: string;
-            linkHover: string;
-            linkVisited: string;
-            linkLightVisited: string;
-            neutral: string;
-            neutralInverted: string;
-            positiveLight: string;
-            positive: string;
-            promoteLight: string;
-            promote: string;
-            rating: string;
-            secondary: string;
-            secondaryInverted: string;
-        };
-        background: {
-            body: string;
-            bodyDark: string;
-            brand: string;
-            brandAccent: string;
-            brandAccentActive: string;
-            brandAccentHover: string;
-            brandAccentSoft: string;
-            brandAccentSoftActive: string;
-            brandAccentSoftHover: string;
-            caution: string;
-            cautionLight: string;
-            critical: string;
-            criticalActive: string;
-            criticalHover: string;
-            criticalLight: string;
-            criticalSoft: string;
-            criticalSoftActive: string;
-            criticalSoftHover: string;
-            formAccent: string;
-            formAccentActive: string;
-            formAccentHover: string;
-            formAccentSoft: string;
-            formAccentSoftActive: string;
-            formAccentSoftHover: string;
-            info: string;
-            infoLight: string;
-            neutral: string;
-            neutralActive: string;
-            neutralHover: string;
-            neutralLight: string;
-            neutralSoft: string;
-            neutralSoftActive: string;
-            neutralSoftHover: string;
-            positive: string;
-            positiveLight: string;
-            promote: string;
-            promoteLight: string;
-            surface: string;
-            surfaceDark: string;
-        };
-    };
-    backgroundLightness: {
-        body: "light" | "dark";
-        bodyDark: "light" | "dark";
-        brand: "light" | "dark";
-        brandAccent: "light" | "dark";
-        brandAccentActive: "light" | "dark";
-        brandAccentHover: "light" | "dark";
-        brandAccentSoft: "light" | "dark";
-        brandAccentSoftActive: "light" | "dark";
-        brandAccentSoftHover: "light" | "dark";
-        caution: "light" | "dark";
-        cautionLight: "light" | "dark";
-        critical: "light" | "dark";
-        criticalActive: "light" | "dark";
-        criticalHover: "light" | "dark";
-        criticalLight: "light" | "dark";
-        criticalSoft: "light" | "dark";
-        criticalSoftActive: "light" | "dark";
-        criticalSoftHover: "light" | "dark";
-        formAccent: "light" | "dark";
-        formAccentActive: "light" | "dark";
-        formAccentHover: "light" | "dark";
-        formAccentSoft: "light" | "dark";
-        formAccentSoftActive: "light" | "dark";
-        formAccentSoftHover: "light" | "dark";
-        info: "light" | "dark";
-        infoLight: "light" | "dark";
-        neutral: "light" | "dark";
-        neutralActive: "light" | "dark";
-        neutralHover: "light" | "dark";
-        neutralLight: "light" | "dark";
-        neutralSoft: "light" | "dark";
-        neutralSoftActive: "light" | "dark";
-        neutralSoftHover: "light" | "dark";
-        positive: "light" | "dark";
-        positiveLight: "light" | "dark";
-        promote: "light" | "dark";
-        promoteLight: "light" | "dark";
-        surface: "light" | "dark";
-        surfaceDark: "light" | "dark";
-    };
-};
-
-export { _default as default };
+export { _default$4 as default } from '../reset.js';

package/dist/themes/seekBusiness.mjs

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

package/dist/themes/wireframe.d.ts

@@ -1,137 +1 @@
-declare const _default: {
-    vanillaTheme: string;
-    name: string;
-    displayName: string;
-    background: {
-        lightMode: string;
-        darkMode: string;
-    };
-    webFonts: {
-        linkTag: string;
-    }[];
-    space: {
-        grid: number;
-        space: {
-            gutter: number;
-            xxsmall: number;
-            xsmall: number;
-            small: number;
-            medium: number;
-            large: number;
-            xlarge: number;
-            xxlarge: number;
-        };
-    };
-    color: {
-        foreground: {
-            brandAccentLight: string;
-            brandAccent: string;
-            cautionLight: string;
-            caution: string;
-            criticalLight: string;
-            critical: string;
-            formAccentLight: string;
-            formAccent: string;
-            infoLight: string;
-            info: string;
-            linkLight: string;
-            link: string;
-            linkHover: string;
-            linkVisited: string;
-            linkLightVisited: string;
-            neutral: string;
-            neutralInverted: string;
-            positiveLight: string;
-            positive: string;
-            promoteLight: string;
-            promote: string;
-            rating: string;
-            secondary: string;
-            secondaryInverted: string;
-        };
-        background: {
-            body: string;
-            bodyDark: string;
-            brand: string;
-            brandAccent: string;
-            brandAccentActive: string;
-            brandAccentHover: string;
-            brandAccentSoft: string;
-            brandAccentSoftActive: string;
-            brandAccentSoftHover: string;
-            caution: string;
-            cautionLight: string;
-            critical: string;
-            criticalActive: string;
-            criticalHover: string;
-            criticalLight: string;
-            criticalSoft: string;
-            criticalSoftActive: string;
-            criticalSoftHover: string;
-            formAccent: string;
-            formAccentActive: string;
-            formAccentHover: string;
-            formAccentSoft: string;
-            formAccentSoftActive: string;
-            formAccentSoftHover: string;
-            info: string;
-            infoLight: string;
-            neutral: string;
-            neutralActive: string;
-            neutralHover: string;
-            neutralLight: string;
-            neutralSoft: string;
-            neutralSoftActive: string;
-            neutralSoftHover: string;
-            positive: string;
-            positiveLight: string;
-            promote: string;
-            promoteLight: string;
-            surface: string;
-            surfaceDark: string;
-        };
-    };
-    backgroundLightness: {
-        body: "light" | "dark";
-        bodyDark: "light" | "dark";
-        brand: "light" | "dark";
-        brandAccent: "light" | "dark";
-        brandAccentActive: "light" | "dark";
-        brandAccentHover: "light" | "dark";
-        brandAccentSoft: "light" | "dark";
-        brandAccentSoftActive: "light" | "dark";
-        brandAccentSoftHover: "light" | "dark";
-        caution: "light" | "dark";
-        cautionLight: "light" | "dark";
-        critical: "light" | "dark";
-        criticalActive: "light" | "dark";
-        criticalHover: "light" | "dark";
-        criticalLight: "light" | "dark";
-        criticalSoft: "light" | "dark";
-        criticalSoftActive: "light" | "dark";
-        criticalSoftHover: "light" | "dark";
-        formAccent: "light" | "dark";
-        formAccentActive: "light" | "dark";
-        formAccentHover: "light" | "dark";
-        formAccentSoft: "light" | "dark";
-        formAccentSoftActive: "light" | "dark";
-        formAccentSoftHover: "light" | "dark";
-        info: "light" | "dark";
-        infoLight: "light" | "dark";
-        neutral: "light" | "dark";
-        neutralActive: "light" | "dark";
-        neutralHover: "light" | "dark";
-        neutralLight: "light" | "dark";
-        neutralSoft: "light" | "dark";
-        neutralSoftActive: "light" | "dark";
-        neutralSoftHover: "light" | "dark";
-        positive: "light" | "dark";
-        positiveLight: "light" | "dark";
-        promote: "light" | "dark";
-        promoteLight: "light" | "dark";
-        surface: "light" | "dark";
-        surfaceDark: "light" | "dark";
-    };
-};
-
-export { _default as default };
+export { _default$5 as default } from '../reset.js';

package/dist/themes/wireframe.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "32.1.0",
+  "version": "32.2.0",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -119,7 +119,8 @@
     "themes/wireframe"
   ],
   "dependencies": {
-    "@capsizecss/core": "^3.0.0",
+    "@capsizecss/core": "^3.1.0",
+    "@capsizecss/metrics": "^1.1.1",
     "@capsizecss/vanilla-extract": "^1.0.0",
     "@types/autosuggest-highlight": "^3.1.1",
     "@types/dedent": "^0.7.0",
@@ -182,7 +183,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "sanitize-html": "^2.7.0",
-    "sku": "11.7.1",
+    "sku": "11.7.2",
     "svgo": "^2.8.0",
     "title-case": "^3.0.3"
   },

package/playroom/FrameComponent/index.d.ts

@@ -0,0 +1,2 @@
+export * from "../../dist/playroom/FrameComponent";
+export { default } from "../../dist/playroom/FrameComponent";

package/playroom/FrameComponent/package.json

@@ -1,5 +1,5 @@
 {
   "main": "../../dist/playroom/FrameComponent.cjs",
   "module": "../../dist/playroom/FrameComponent.mjs",
-  "types": "../../dist/playroom/FrameComponent.d.ts"
+  "types": "./index.d.ts"
 }

package/playroom/components/index.d.ts

@@ -0,0 +1 @@
+export * from "../../dist/playroom/components";

package/playroom/components/package.json

@@ -1,5 +1,5 @@
 {
   "main": "../../dist/playroom/components.cjs",
   "module": "../../dist/playroom/components.mjs",
-  "types": "../../dist/playroom/components.d.ts"
+  "types": "./index.d.ts"
 }

package/playroom/scope/index.d.ts

@@ -0,0 +1,2 @@
+export * from "../../dist/playroom/scope";
+export { default } from "../../dist/playroom/scope";

package/playroom/scope/package.json

@@ -1,5 +1,5 @@
 {
   "main": "../../dist/playroom/scope.cjs",
   "module": "../../dist/playroom/scope.mjs",
-  "types": "../../dist/playroom/scope.d.ts"
+  "types": "./index.d.ts"
 }

package/playroom/snippets/index.d.ts

@@ -0,0 +1,2 @@
+export * from "../../dist/playroom/snippets";
+export { default } from "../../dist/playroom/snippets";

package/playroom/snippets/package.json

@@ -1,5 +1,5 @@
 {
   "main": "../../dist/playroom/snippets.cjs",
   "module": "../../dist/playroom/snippets.mjs",
-  "types": "../../dist/playroom/snippets.d.ts"
+  "types": "./index.d.ts"
 }

package/reset/index.d.ts

@@ -0,0 +1 @@
+export * from "../dist/reset";