npm - braid-design-system - Versions diffs - 34.0.0 → 34.0.2-tsdown-migration-20260114044913 - Mend

braid-design-system 34.0.0 → 34.0.2-tsdown-migration-20260114044913

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1847) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,17 @@
 # braid-design-system
+## 34.0.2-tsdown-migration-20260114044913
+### Patch Changes
+- Migrate to tsdown for build (204cc9ff3c5ba2a8b81b14fec5f0f0a993cd2434)
+## 34.0.1
+### Patch Changes
+- **MenuRenderer, OverflowMenu:** Prevent the document from scrolling when opening the menu with the keyboard ([#1952](https://github.com/seek-oss/braid-design-system/pull/1952))
 ## 34.0.0
 ### Major Changes

package/dist/_virtual/rolldown_runtime.cjs ADDED Viewed

@@ -0,0 +1,43 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __exportAll = (all, symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+exports.__exportAll = __exportAll;
+exports.__toESM = __toESM;

package/dist/_virtual/rolldown_runtime.mjs ADDED Viewed

@@ -0,0 +1,18 @@
+//#region rolldown:runtime
+var __defProp = Object.defineProperty;
+var __exportAll = (all, symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+//#endregion
+export { __exportAll };

package/dist/color-mode/query-param.cjs CHANGED Viewed

@@ -1,17 +1,54 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const lib_css_atoms_sprinkles_css_cjs = require("../lib/css/atoms/sprinkles.css.cjs");
+const require_sprinkles_css = require('../lib/css/atoms/sprinkles.css.cjs');
+//#region src/color-mode/query-param.ts
 const flag = "_bdsdm";
+/**
+* Script to resolve the color mode preference from the query string, used for passing the native mobile app color mode preference to an embedded Braid web UI.
+*
+* Pre-minified script tag, designed to be inserted at the beginning of the document head. This ensures the color mode preference is evaluated and applied before any renderering occurs, preventing the flash of light mode.
+*
+* ---
+*
+* Example usage:
+*
+* ```html
+* <html>
+*  <head>
+*    <!-- Place script here -->
+* ```
+*
+* ---
+*
+* @returns Stringified script tag to place in document head.
+*/
 const colorModeQueryParamCheck = [
-  "<script>",
-  `((l,w)=>{try{r=/[?&]${flag}=(\\d)/;[,s]=l.search.match(r)||[];w.${flag}=s;if(s){history.replaceState(null,'',l.pathname+l.search.replace(r,'').replace(/^&/,'?')+l.hash);if(s==1||(s==2&&matchMedia('(prefers-color-scheme:dark)').matches))document.documentElement.classList.add('${lib_css_atoms_sprinkles_css_cjs.darkMode}')}}catch(e){}})(location,window)`,
-  "<\/script>"
+	"<script>",
+	`((l,w)=>{try{r=/[?&]${flag}=(\\d)/;[,s]=l.search.match(r)||[];w.${flag}=s;if(s){history.replaceState(null,'',l.pathname+l.search.replace(r,'').replace(/^&/,'?')+l.hash);if(s==1||(s==2&&matchMedia('(prefers-color-scheme:dark)').matches))document.documentElement.classList.add('${require_sprinkles_css.darkMode}')}}catch(e){}})(location,window)`,
+	"<\/script>"
 ].join("");
+/**
+* For Braid UIs embedded within the native mobile app.
+* Retrieves the native app color mode preference as discovered on page load from the query string.
+*
+* (Note: Requires the `colorModeQueryParamCheck` to have been included in the head of the document and evaluated first)
+*
+* ---
+*
+* Example usage:
+*
+* ```ts
+* `/my-url?id=123&${getColorModeQueryParam()}`
+* ```
+*
+* ---
+*
+* @returns Braid color mode preference as query string parameter
+*/
 const getColorModeQueryParam = () => {
-  if (typeof window !== "undefined" && window[flag]) {
-    return `${flag}=${window[flag]}`;
-  }
-  return "";
+	if (typeof window !== "undefined" && window[flag]) return `${flag}=${window[flag]}`;
+	return "";
 };
+//#endregion
 exports.colorModeQueryParamCheck = colorModeQueryParamCheck;
-exports.getColorModeQueryParam = getColorModeQueryParam;
+exports.getColorModeQueryParam = getColorModeQueryParam;

package/dist/color-mode/{query-param.d.ts → query-param.d.cts} RENAMED Viewed

@@ -1,8 +1,9 @@
+//#region src/color-mode/query-param.d.ts
 declare const flag = "_bdsdm";
 declare global {
-    interface Window {
-        [flag]: '0' | '1' | '2';
-    }
+  interface Window {
+    [flag]: '0' | '1' | '2';
+  }
 }
 /**
  * Script to resolve the color mode preference from the query string, used for passing the native mobile app color mode preference to an embedded Braid web UI.
@@ -42,6 +43,6 @@ declare const colorModeQueryParamCheck: string;
  *
  * @returns Braid color mode preference as query string parameter
  */
-declare const getColorModeQueryParam: () => "_bdsdm=0" | "_bdsdm=1" | "_bdsdm=2" | "";
-export { colorModeQueryParamCheck, getColorModeQueryParam };
+declare const getColorModeQueryParam: () => "" | "_bdsdm=1" | "_bdsdm=2" | "_bdsdm=0";
+//#endregion
+export { colorModeQueryParamCheck, getColorModeQueryParam };

package/dist/color-mode/query-param.d.mts CHANGED Viewed

@@ -1,8 +1,9 @@
+//#region src/color-mode/query-param.d.ts
 declare const flag = "_bdsdm";
 declare global {
-    interface Window {
-        [flag]: '0' | '1' | '2';
-    }
+  interface Window {
+    [flag]: '0' | '1' | '2';
+  }
 }
 /**
  * Script to resolve the color mode preference from the query string, used for passing the native mobile app color mode preference to an embedded Braid web UI.
@@ -42,6 +43,6 @@ declare const colorModeQueryParamCheck: string;
  *
  * @returns Braid color mode preference as query string parameter
  */
-declare const getColorModeQueryParam: () => "_bdsdm=0" | "_bdsdm=1" | "_bdsdm=2" | "";
-export { colorModeQueryParamCheck, getColorModeQueryParam };
+declare const getColorModeQueryParam: () => "" | "_bdsdm=1" | "_bdsdm=2" | "_bdsdm=0";
+//#endregion
+export { colorModeQueryParamCheck, getColorModeQueryParam };

package/dist/color-mode/query-param.mjs CHANGED Viewed

@@ -1,17 +1,53 @@
 import { darkMode } from "../lib/css/atoms/sprinkles.css.mjs";
+//#region src/color-mode/query-param.ts
 const flag = "_bdsdm";
+/**
+* Script to resolve the color mode preference from the query string, used for passing the native mobile app color mode preference to an embedded Braid web UI.
+*
+* Pre-minified script tag, designed to be inserted at the beginning of the document head. This ensures the color mode preference is evaluated and applied before any renderering occurs, preventing the flash of light mode.
+*
+* ---
+*
+* Example usage:
+*
+* ```html
+* <html>
+*  <head>
+*    <!-- Place script here -->
+* ```
+*
+* ---
+*
+* @returns Stringified script tag to place in document head.
+*/
 const colorModeQueryParamCheck = [
-  "<script>",
-  `((l,w)=>{try{r=/[?&]${flag}=(\\d)/;[,s]=l.search.match(r)||[];w.${flag}=s;if(s){history.replaceState(null,'',l.pathname+l.search.replace(r,'').replace(/^&/,'?')+l.hash);if(s==1||(s==2&&matchMedia('(prefers-color-scheme:dark)').matches))document.documentElement.classList.add('${darkMode}')}}catch(e){}})(location,window)`,
-  "<\/script>"
+	"<script>",
+	`((l,w)=>{try{r=/[?&]${flag}=(\\d)/;[,s]=l.search.match(r)||[];w.${flag}=s;if(s){history.replaceState(null,'',l.pathname+l.search.replace(r,'').replace(/^&/,'?')+l.hash);if(s==1||(s==2&&matchMedia('(prefers-color-scheme:dark)').matches))document.documentElement.classList.add('${darkMode}')}}catch(e){}})(location,window)`,
+	"<\/script>"
 ].join("");
+/**
+* For Braid UIs embedded within the native mobile app.
+* Retrieves the native app color mode preference as discovered on page load from the query string.
+*
+* (Note: Requires the `colorModeQueryParamCheck` to have been included in the head of the document and evaluated first)
+*
+* ---
+*
+* Example usage:
+*
+* ```ts
+* `/my-url?id=123&${getColorModeQueryParam()}`
+* ```
+*
+* ---
+*
+* @returns Braid color mode preference as query string parameter
+*/
 const getColorModeQueryParam = () => {
-  if (typeof window !== "undefined" && window[flag]) {
-    return `${flag}=${window[flag]}`;
-  }
-  return "";
-};
-export {
-  colorModeQueryParamCheck,
-  getColorModeQueryParam
+	if (typeof window !== "undefined" && window[flag]) return `${flag}=${window[flag]}`;
+	return "";
 };
+//#endregion
+export { colorModeQueryParamCheck, getColorModeQueryParam };

package/dist/css.cjs CHANGED Viewed

@@ -1,55 +1,39 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const lib_css_atoms_atoms_cjs = require("./lib/css/atoms/atoms.cjs");
-const lib_css_breakpoints_cjs = require("./lib/css/breakpoints.cjs");
-const lib_css_colorModeStyle_cjs = require("./lib/css/colorModeStyle.cjs");
-const lib_css_globalTypographyStyles_cjs = require("./lib/css/globalTypographyStyles.cjs");
-const lib_css_outlineStyle_cjs = require("./lib/css/outlineStyle.cjs");
-const lib_css_responsiveStyle_cjs = require("./lib/css/responsiveStyle.cjs");
-const lib_themes_vars_css_cjs = require("./lib/themes/vars.css.cjs");
-const {
-  grid,
-  space,
-  touchableSize,
-  contentWidth,
-  // TODO: COLORMODE RELEASE
-  // Release new backgrounds
-  backgroundColor: { surfaceDark: _, bodyDark: __, ...backgroundColor },
-  foregroundColor,
-  textWeight,
-  borderColor,
-  borderRadius,
-  borderWidth,
-  shadow
-} = lib_themes_vars_css_cjs.vars;
+const require_breakpoints = require('./lib/css/breakpoints.cjs');
+const require_vars_css = require('./lib/themes/vars.css.cjs');
+const require_outlineStyle = require('./lib/css/outlineStyle.cjs');
+const require_colorModeStyle = require('./lib/css/colorModeStyle.cjs');
+const require_responsiveStyle = require('./lib/css/responsiveStyle.cjs');
+const require_atoms = require('./lib/css/atoms/atoms.cjs');
+const require_globalTypographyStyles = require('./lib/css/globalTypographyStyles.cjs');
+//#region src/css.ts
+const { grid, space, touchableSize, contentWidth, backgroundColor: { surfaceDark: _, bodyDark: __, ...backgroundColor }, foregroundColor, textWeight, borderColor, borderRadius, borderWidth, shadow } = require_vars_css.vars;
 const vars = {
-  grid,
-  space,
-  touchableSize,
-  contentWidth,
-  backgroundColor,
-  foregroundColor,
-  textWeight,
-  borderColor,
-  borderRadius,
-  borderWidth,
-  shadow
+	grid,
+	space,
+	touchableSize,
+	contentWidth,
+	backgroundColor,
+	foregroundColor,
+	textWeight,
+	borderColor,
+	borderRadius,
+	borderWidth,
+	shadow
 };
 function atoms(props) {
-  if (process.env.NODE_ENV !== "production") {
-    if ("background" in props) {
-      throw new Error(
-        `'background' is not available via 'atoms'. This is because Braid uses React context to dynamically apply matching tones to child elements. Please use \`<Box background="...">\` instead.`
-      );
-    }
-  }
-  return lib_css_atoms_atoms_cjs.atoms(props);
+	if (process.env.NODE_ENV !== "production") {
+		if ("background" in props) throw new Error(`'background' is not available via 'atoms'. This is because Braid uses React context to dynamically apply matching tones to child elements. Please use \`<Box background="...">\` instead.`);
+	}
+	return require_atoms.atoms(props);
 }
-exports.breakpoints = lib_css_breakpoints_cjs.breakpoints;
-exports.colorModeStyle = lib_css_colorModeStyle_cjs.colorModeStyle;
-exports.globalHeadingStyle = lib_css_globalTypographyStyles_cjs.globalHeadingStyle;
-exports.globalTextStyle = lib_css_globalTypographyStyles_cjs.globalTextStyle;
-exports.outlineStyle = lib_css_outlineStyle_cjs.outlineStyle;
-exports.responsiveStyle = lib_css_responsiveStyle_cjs.responsiveStyle;
+//#endregion
 exports.atoms = atoms;
-exports.vars = vars;
+exports.breakpoints = require_breakpoints.breakpoints;
+exports.colorModeStyle = require_colorModeStyle.colorModeStyle;
+exports.globalHeadingStyle = require_globalTypographyStyles.globalHeadingStyle;
+exports.globalTextStyle = require_globalTypographyStyles.globalTextStyle;
+exports.outlineStyle = require_outlineStyle.outlineStyle;
+exports.responsiveStyle = require_responsiveStyle.responsiveStyle;
+exports.vars = vars;

package/dist/css.d.cts ADDED Viewed

@@ -0,0 +1,137 @@
+import { Atoms } from "./lib/css/atoms/atoms.cjs";
+import { Breakpoint, breakpoints } from "./lib/css/breakpoints.cjs";
+import { colorModeStyle } from "./lib/css/colorModeStyle.cjs";
+import { globalHeadingStyle, globalTextStyle } from "./lib/css/globalTypographyStyles.cjs";
+import { outlineStyle } from "./lib/css/outlineStyle.cjs";
+import { responsiveStyle } from "./lib/css/responsiveStyle.cjs";
+//#region src/css.d.ts
+declare const vars: {
+  grid: `var(--${string})`;
+  space: {
+    gutter: `var(--${string})`;
+    xxsmall: `var(--${string})`;
+    xsmall: `var(--${string})`;
+    small: `var(--${string})`;
+    medium: `var(--${string})`;
+    large: `var(--${string})`;
+    xlarge: `var(--${string})`;
+    xxlarge: `var(--${string})`;
+    xxxlarge: `var(--${string})`;
+  };
+  touchableSize: `var(--${string})`;
+  contentWidth: {
+    xsmall: `var(--${string})`;
+    small: `var(--${string})`;
+    medium: `var(--${string})`;
+    large: `var(--${string})`;
+  };
+  backgroundColor: {
+    body: `var(--${string})`;
+    brand: `var(--${string})`;
+    brandAccent: `var(--${string})`;
+    brandAccentActive: `var(--${string})`;
+    brandAccentHover: `var(--${string})`;
+    brandAccentSoft: `var(--${string})`;
+    brandAccentSoftActive: `var(--${string})`;
+    brandAccentSoftHover: `var(--${string})`;
+    caution: `var(--${string})`;
+    cautionLight: `var(--${string})`;
+    critical: `var(--${string})`;
+    criticalActive: `var(--${string})`;
+    criticalHover: `var(--${string})`;
+    criticalLight: `var(--${string})`;
+    criticalSoft: `var(--${string})`;
+    criticalSoftActive: `var(--${string})`;
+    criticalSoftHover: `var(--${string})`;
+    formAccent: `var(--${string})`;
+    formAccentActive: `var(--${string})`;
+    formAccentHover: `var(--${string})`;
+    formAccentSoft: `var(--${string})`;
+    formAccentSoftActive: `var(--${string})`;
+    formAccentSoftHover: `var(--${string})`;
+    info: `var(--${string})`;
+    infoLight: `var(--${string})`;
+    neutral: `var(--${string})`;
+    neutralActive: `var(--${string})`;
+    neutralHover: `var(--${string})`;
+    neutralLight: `var(--${string})`;
+    neutralSoft: `var(--${string})`;
+    neutralSoftActive: `var(--${string})`;
+    neutralSoftHover: `var(--${string})`;
+    positive: `var(--${string})`;
+    positiveLight: `var(--${string})`;
+    promote: `var(--${string})`;
+    promoteLight: `var(--${string})`;
+    surface: `var(--${string})`;
+  };
+  foregroundColor: {
+    brandAccentLight: `var(--${string})`;
+    brandAccent: `var(--${string})`;
+    cautionLight: `var(--${string})`;
+    caution: `var(--${string})`;
+    criticalLight: `var(--${string})`;
+    critical: `var(--${string})`;
+    formAccentLight: `var(--${string})`;
+    formAccent: `var(--${string})`;
+    infoLight: `var(--${string})`;
+    info: `var(--${string})`;
+    linkLight: `var(--${string})`;
+    link: `var(--${string})`;
+    linkHover: `var(--${string})`;
+    linkVisited: `var(--${string})`;
+    linkLightVisited: `var(--${string})`;
+    neutral: `var(--${string})`;
+    neutralInverted: `var(--${string})`;
+    positiveLight: `var(--${string})`;
+    positive: `var(--${string})`;
+    promoteLight: `var(--${string})`;
+    promote: `var(--${string})`;
+    secondary: `var(--${string})`;
+    secondaryInverted: `var(--${string})`;
+  };
+  textWeight: {
+    medium: `var(--${string})`;
+    regular: `var(--${string})`;
+    strong: `var(--${string})`;
+  };
+  borderColor: {
+    brandAccent: `var(--${string})`;
+    brandAccentLight: `var(--${string})`;
+    caution: `var(--${string})`;
+    cautionLight: `var(--${string})`;
+    critical: `var(--${string})`;
+    criticalLight: `var(--${string})`;
+    field: `var(--${string})`;
+    focus: `var(--${string})`;
+    formAccent: `var(--${string})`;
+    formAccentLight: `var(--${string})`;
+    info: `var(--${string})`;
+    infoLight: `var(--${string})`;
+    neutral: `var(--${string})`;
+    neutralInverted: `var(--${string})`;
+    neutralLight: `var(--${string})`;
+    positive: `var(--${string})`;
+    positiveLight: `var(--${string})`;
+    promote: `var(--${string})`;
+    promoteLight: `var(--${string})`;
+  };
+  borderRadius: {
+    small: `var(--${string})`;
+    standard: `var(--${string})`;
+    large: `var(--${string})`;
+    xlarge: `var(--${string})`;
+  };
+  borderWidth: {
+    large: `var(--${string})`;
+    standard: `var(--${string})`;
+  };
+  shadow: {
+    small: `var(--${string})`;
+    medium: `var(--${string})`;
+    large: `var(--${string})`;
+  };
+};
+declare function atoms(props: Omit<Atoms, 'background'>): string;
+//#endregion
+export { type Breakpoint, atoms, breakpoints, colorModeStyle, globalHeadingStyle, globalTextStyle, outlineStyle, responsiveStyle, vars };

package/dist/css.d.mts CHANGED Viewed

@@ -1 +1,137 @@
-export { Breakpoint, atoms, breakpoints, colorModeStyle, globalHeadingStyle, globalTextStyle, outlineStyle, responsiveStyle, vars } from './index.js';
+import { Atoms } from "./lib/css/atoms/atoms.mjs";
+import { Breakpoint, breakpoints } from "./lib/css/breakpoints.mjs";
+import { colorModeStyle } from "./lib/css/colorModeStyle.mjs";
+import { globalHeadingStyle, globalTextStyle } from "./lib/css/globalTypographyStyles.mjs";
+import { outlineStyle } from "./lib/css/outlineStyle.mjs";
+import { responsiveStyle } from "./lib/css/responsiveStyle.mjs";
+//#region src/css.d.ts
+declare const vars: {
+  grid: `var(--${string})`;
+  space: {
+    gutter: `var(--${string})`;
+    xxsmall: `var(--${string})`;
+    xsmall: `var(--${string})`;
+    small: `var(--${string})`;
+    medium: `var(--${string})`;
+    large: `var(--${string})`;
+    xlarge: `var(--${string})`;
+    xxlarge: `var(--${string})`;
+    xxxlarge: `var(--${string})`;
+  };
+  touchableSize: `var(--${string})`;
+  contentWidth: {
+    xsmall: `var(--${string})`;
+    small: `var(--${string})`;
+    medium: `var(--${string})`;
+    large: `var(--${string})`;
+  };
+  backgroundColor: {
+    body: `var(--${string})`;
+    brand: `var(--${string})`;
+    brandAccent: `var(--${string})`;
+    brandAccentActive: `var(--${string})`;
+    brandAccentHover: `var(--${string})`;
+    brandAccentSoft: `var(--${string})`;
+    brandAccentSoftActive: `var(--${string})`;
+    brandAccentSoftHover: `var(--${string})`;
+    caution: `var(--${string})`;
+    cautionLight: `var(--${string})`;
+    critical: `var(--${string})`;
+    criticalActive: `var(--${string})`;
+    criticalHover: `var(--${string})`;
+    criticalLight: `var(--${string})`;
+    criticalSoft: `var(--${string})`;
+    criticalSoftActive: `var(--${string})`;
+    criticalSoftHover: `var(--${string})`;
+    formAccent: `var(--${string})`;
+    formAccentActive: `var(--${string})`;
+    formAccentHover: `var(--${string})`;
+    formAccentSoft: `var(--${string})`;
+    formAccentSoftActive: `var(--${string})`;
+    formAccentSoftHover: `var(--${string})`;
+    info: `var(--${string})`;
+    infoLight: `var(--${string})`;
+    neutral: `var(--${string})`;
+    neutralActive: `var(--${string})`;
+    neutralHover: `var(--${string})`;
+    neutralLight: `var(--${string})`;
+    neutralSoft: `var(--${string})`;
+    neutralSoftActive: `var(--${string})`;
+    neutralSoftHover: `var(--${string})`;
+    positive: `var(--${string})`;
+    positiveLight: `var(--${string})`;
+    promote: `var(--${string})`;
+    promoteLight: `var(--${string})`;
+    surface: `var(--${string})`;
+  };
+  foregroundColor: {
+    brandAccentLight: `var(--${string})`;
+    brandAccent: `var(--${string})`;
+    cautionLight: `var(--${string})`;
+    caution: `var(--${string})`;
+    criticalLight: `var(--${string})`;
+    critical: `var(--${string})`;
+    formAccentLight: `var(--${string})`;
+    formAccent: `var(--${string})`;
+    infoLight: `var(--${string})`;
+    info: `var(--${string})`;
+    linkLight: `var(--${string})`;
+    link: `var(--${string})`;
+    linkHover: `var(--${string})`;
+    linkVisited: `var(--${string})`;
+    linkLightVisited: `var(--${string})`;
+    neutral: `var(--${string})`;
+    neutralInverted: `var(--${string})`;
+    positiveLight: `var(--${string})`;
+    positive: `var(--${string})`;
+    promoteLight: `var(--${string})`;
+    promote: `var(--${string})`;
+    secondary: `var(--${string})`;
+    secondaryInverted: `var(--${string})`;
+  };
+  textWeight: {
+    medium: `var(--${string})`;
+    regular: `var(--${string})`;
+    strong: `var(--${string})`;
+  };
+  borderColor: {
+    brandAccent: `var(--${string})`;
+    brandAccentLight: `var(--${string})`;
+    caution: `var(--${string})`;
+    cautionLight: `var(--${string})`;
+    critical: `var(--${string})`;
+    criticalLight: `var(--${string})`;
+    field: `var(--${string})`;
+    focus: `var(--${string})`;
+    formAccent: `var(--${string})`;
+    formAccentLight: `var(--${string})`;
+    info: `var(--${string})`;
+    infoLight: `var(--${string})`;
+    neutral: `var(--${string})`;
+    neutralInverted: `var(--${string})`;
+    neutralLight: `var(--${string})`;
+    positive: `var(--${string})`;
+    positiveLight: `var(--${string})`;
+    promote: `var(--${string})`;
+    promoteLight: `var(--${string})`;
+  };
+  borderRadius: {
+    small: `var(--${string})`;
+    standard: `var(--${string})`;
+    large: `var(--${string})`;
+    xlarge: `var(--${string})`;
+  };
+  borderWidth: {
+    large: `var(--${string})`;
+    standard: `var(--${string})`;
+  };
+  shadow: {
+    small: `var(--${string})`;
+    medium: `var(--${string})`;
+    large: `var(--${string})`;
+  };
+};
+declare function atoms(props: Omit<Atoms, 'background'>): string;
+//#endregion
+export { type Breakpoint, atoms, breakpoints, colorModeStyle, globalHeadingStyle, globalTextStyle, outlineStyle, responsiveStyle, vars };