braid-design-system 32.1.0 → 32.2.0

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

@@ -2,11 +2,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import assert from "assert";
 import dedent from "dedent";
 import { useEffect, createContext, useState, useContext, forwardRef } from "react";
-import { e as ensureResetImported } from "../../css/reset/resetTracker.mjs";
-import { h as hideFocusRingsDataAttribute } from "../../../../styles/lib/components/private/hideFocusRings/hideFocusRingsDataAttribute.mjs";
-import { b as breakpoints } from "../../../../styles/lib/css/breakpoints.mjs";
-import { d as darkMode } from "../../../../styles/lib/css/atoms/sprinkles.css.mjs";
-import { l as lightModeTone, d as darkModeTone } from "../../../../styles/lib/css/typography.css.mjs";
+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 { lightModeTone, darkModeTone } from "../../../../styles/lib/css/typography.css.mjs";
 const hideFocusRings = () => document.body.setAttribute(hideFocusRingsDataAttribute, "true");
 const showFocusRings = () => document.body.removeAttribute(hideFocusRingsDataAttribute);
 const useHideFocusRings = (enabled = true) => {
@@ -146,11 +146,11 @@ const BraidProvider = ({
   ] });
 };
 export {
-  BraidProvider as B,
-  VanillaThemeContainer as V,
-  useLinkComponent as a,
-  breakpointContext as b,
-  BraidTestProviderContext as c,
-  makeLinkComponent as m,
-  useBraidTheme as u
+  BraidProvider,
+  BraidTestProviderContext,
+  VanillaThemeContainer,
+  breakpointContext,
+  makeLinkComponent,
+  useBraidTheme,
+  useLinkComponent
 };

package/dist/side-effects/lib/css/reset/index.mjs

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

package/dist/side-effects/lib/css/reset/resetTracker.mjs

@@ -19,6 +19,6 @@ const ensureResetImported = () => {
   }
 };
 export {
-  ensureResetImported as e,
-  markResetImported as m
+  ensureResetImported,
+  markResetImported
 };

package/dist/side-effects/lib/themes/baseTokens/apac.cjs

@@ -1,7 +1,10 @@
 "use strict";
+const robotoMetrics = require("@capsizecss/metrics/roboto.js");
 const polished = require("polished");
-const merge = require("lodash/merge");
+const merge = require("lodash/merge.js");
+const sideEffects_lib_themes_tokenType_cjs = require("../tokenType.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const robotoMetrics__default = /* @__PURE__ */ _interopDefaultCompat(robotoMetrics);
 const merge__default = /* @__PURE__ */ _interopDefaultCompat(merge);
 const palette = {
   grey: {
@@ -184,13 +187,7 @@ const makeTokens = ({
     typography: {
       fontFamily: 'Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif',
       webFont: null,
-      fontMetrics: {
-        capHeight: 1456,
-        ascent: 1900,
-        descent: -500,
-        lineGap: 0,
-        unitsPerEm: 2048
-      },
+      fontMetrics: sideEffects_lib_themes_tokenType_cjs.extractFontMetricsForTheme(robotoMetrics__default.default),
       fontWeight: {
         regular: 400,
         medium: 500,
@@ -303,7 +300,8 @@ const makeTokens = ({
       medium: 5,
       large: 8,
       xlarge: 12,
-      xxlarge: 24
+      xxlarge: 24,
+      xxxlarge: 30
     },
     transforms: {
       touchable: "scale(0.95)"
@@ -314,6 +312,7 @@ const makeTokens = ({
     },
     border: {
       radius: {
+        small: "2px",
         standard: "4px",
         large: "6px",
         xlarge: "10px"

package/dist/side-effects/lib/themes/baseTokens/apac.mjs

@@ -1,5 +1,7 @@
+import robotoMetrics from "@capsizecss/metrics/roboto.js";
 import { rgba, darken, saturate, lighten } from "polished";
 import merge from "lodash/merge.js";
+import { extractFontMetricsForTheme } from "../tokenType.mjs";
 const palette = {
   grey: {
     900: "#0E131B",
@@ -181,13 +183,7 @@ const makeTokens = ({
     typography: {
       fontFamily: 'Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif',
       webFont: null,
-      fontMetrics: {
-        capHeight: 1456,
-        ascent: 1900,
-        descent: -500,
-        lineGap: 0,
-        unitsPerEm: 2048
-      },
+      fontMetrics: extractFontMetricsForTheme(robotoMetrics),
       fontWeight: {
         regular: 400,
         medium: 500,
@@ -300,7 +296,8 @@ const makeTokens = ({
       medium: 5,
       large: 8,
       xlarge: 12,
-      xxlarge: 24
+      xxlarge: 24,
+      xxxlarge: 30
     },
     transforms: {
       touchable: "scale(0.95)"
@@ -311,6 +308,7 @@ const makeTokens = ({
     },
     border: {
       radius: {
+        small: "2px",
         standard: "4px",
         large: "6px",
         xlarge: "10px"
@@ -432,6 +430,6 @@ const makeTokens = ({
   return merge(tokens, tokenOverrides);
 };
 export {
-  makeTokens as m,
-  palette as p
+  makeTokens,
+  palette
 };

package/dist/side-effects/lib/themes/index.mjs

@@ -1,7 +1,7 @@
-import { a as apacTheme_css } from "../../../styles/lib/themes/apac/apacTheme.css.mjs";
-import { s as seekBusinessTheme_css } from "../../../styles/lib/themes/seekBusiness/seekBusinessTheme.css.mjs";
-import { w as wireframe } from "../../../styles/lib/themes/wireframe/wireframeTheme.css.mjs";
-import { d as docsTheme_css } from "../../../styles/lib/themes/docs/docsTheme.css.mjs";
+import { apacTheme_css } from "../../../styles/lib/themes/apac/apacTheme.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";
 const themes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   apac: apacTheme_css,
@@ -10,5 +10,5 @@ const themes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProper
   wireframe
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  themes as t
+  themes
 };

package/dist/side-effects/lib/themes/makeRuntimeTokens.cjs

@@ -1,19 +1,13 @@
 "use strict";
-const mapValues = require("lodash/mapValues");
-const values = require("lodash/values");
+const mapValues = require("lodash/mapValues.js");
 const styles_lib_utils_index_cjs = require("../../../styles/lib/utils/index.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const mapValues__default = /* @__PURE__ */ _interopDefaultCompat(mapValues);
-const values__default = /* @__PURE__ */ _interopDefaultCompat(values);
-const makeWebFonts = ({ webFont, fontWeight }) => {
+const makeWebFonts = (webFont) => {
   if (!webFont) {
     return [];
   }
-  const weights = values__default.default(fontWeight);
-  const linkTag = `<link href="https://fonts.googleapis.com/css?family=${encodeURIComponent(
-    `${webFont}:${weights.sort().join(",")}`
-  )}" rel="stylesheet" />`;
-  return [{ linkTag }];
+  return [{ linkTag: `<link href="${webFont}" rel="stylesheet" />` }];
 };
 const makeRuntimeTokens = (tokens) => ({
   name: tokens.name,
@@ -22,7 +16,7 @@ const makeRuntimeTokens = (tokens) => ({
     lightMode: tokens.color.background.body,
     darkMode: tokens.color.background.bodyDark
   },
-  webFonts: makeWebFonts(tokens.typography),
+  webFonts: makeWebFonts(tokens.typography.webFont),
   space: {
     grid: tokens.grid,
     space: tokens.space

package/dist/side-effects/lib/themes/makeRuntimeTokens.mjs

@@ -1,15 +1,10 @@
 import mapValues from "lodash/mapValues.js";
-import values from "lodash/values.js";
-import { i as isLight } from "../../../styles/lib/utils/index.mjs";
-const makeWebFonts = ({ webFont, fontWeight }) => {
+import { isLight } from "../../../styles/lib/utils/index.mjs";
+const makeWebFonts = (webFont) => {
   if (!webFont) {
     return [];
   }
-  const weights = values(fontWeight);
-  const linkTag = `<link href="https://fonts.googleapis.com/css?family=${encodeURIComponent(
-    `${webFont}:${weights.sort().join(",")}`
-  )}" rel="stylesheet" />`;
-  return [{ linkTag }];
+  return [{ linkTag: `<link href="${webFont}" rel="stylesheet" />` }];
 };
 const makeRuntimeTokens = (tokens) => ({
   name: tokens.name,
@@ -18,7 +13,7 @@ const makeRuntimeTokens = (tokens) => ({
     lightMode: tokens.color.background.body,
     darkMode: tokens.color.background.bodyDark
   },
-  webFonts: makeWebFonts(tokens.typography),
+  webFonts: makeWebFonts(tokens.typography.webFont),
   space: {
     grid: tokens.grid,
     space: tokens.space
@@ -44,5 +39,5 @@ const makeRuntimeTokens = (tokens) => ({
   )
 });
 export {
-  makeRuntimeTokens as m
+  makeRuntimeTokens
 };

package/dist/side-effects/lib/themes/tokenType.cjs

@@ -0,0 +1,15 @@
+"use strict";
+const extractFontMetricsForTheme = ({
+  capHeight,
+  ascent,
+  descent,
+  lineGap,
+  unitsPerEm
+}) => ({
+  capHeight,
+  ascent,
+  descent,
+  lineGap,
+  unitsPerEm
+});
+exports.extractFontMetricsForTheme = extractFontMetricsForTheme;

package/dist/side-effects/lib/themes/tokenType.mjs

@@ -0,0 +1,16 @@
+const extractFontMetricsForTheme = ({
+  capHeight,
+  ascent,
+  descent,
+  lineGap,
+  unitsPerEm
+}) => ({
+  capHeight,
+  ascent,
+  descent,
+  lineGap,
+  unitsPerEm
+});
+export {
+  extractFontMetricsForTheme
+};

package/dist/styles/lib/components/Accordion/AccordionItem.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
-import { v as vars } from "../../themes/vars.css.mjs";
+import { vars } from "../../themes/vars.css.mjs";
 setFileScope("src/lib/components/Accordion/AccordionItem.css.ts?used", "braid-design-system");
 const button = style({}, "button");
 const focusRing = style({
@@ -17,6 +17,6 @@ const focusRing = style({
 }, "focusRing");
 endFileScope();
 export {
-  button as b,
-  focusRing as f
+  button,
+  focusRing
 };

package/dist/styles/lib/components/Alert/Alert.css.mjs

@@ -18,7 +18,7 @@ const closeButtonHover = style({
 }, "closeButtonHover");
 endFileScope();
 export {
-  closeButtonFocus as a,
-  closeButtonHover as b,
-  closeButton as c
+  closeButton,
+  closeButtonFocus,
+  closeButtonHover
 };

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

@@ -1,8 +1,8 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
-import { r as responsiveStyle } from "../../css/responsiveStyle.mjs";
-import { v as vars } from "../../themes/vars.css.mjs";
+import { responsiveStyle } from "../../css/responsiveStyle.mjs";
+import { vars } from "../../themes/vars.css.mjs";
 setFileScope("src/lib/components/Autosuggest/Autosuggest.css.ts?used", "braid-design-system");
 const backdrop = style({
   width: "100vw",
@@ -27,8 +27,8 @@ const groupHeading = style({
 }, "groupHeading");
 endFileScope();
 export {
-  backdropVisible as a,
-  backdrop as b,
-  groupHeading as g,
-  menu as m
+  backdrop,
+  backdropVisible,
+  groupHeading,
+  menu
 };

package/dist/styles/lib/components/Button/Button.css.cjs

@@ -7,9 +7,6 @@ const styles_lib_css_colorModeStyle_cjs = require("../../css/colorModeStyle.cjs"
 const styles_lib_css_responsiveStyle_cjs = require("../../css/responsiveStyle.cjs");
 const styles_lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
 fileScope.setFileScope("src/lib/components/Button/Button.css.ts?used", "braid-design-system");
-const constants = {
-  smallButtonPaddingSize: "xsmall"
-};
 const root = css.style({
   textDecoration: "none"
 }, "root");
@@ -35,28 +32,32 @@ const focusOverlay = css.style({
     }
   }
 }, "focusOverlay");
-const standard = css.style({}, "standard");
-const small = css.style({}, "small");
-const stylesForBreakpoint = (breakpoint, size) => {
-  const height = size === "small" ? cssUtils.calc.add(cssUtils.calc.multiply(styles_lib_themes_vars_css_cjs.vars.space[constants.smallButtonPaddingSize], 2), styles_lib_themes_vars_css_cjs.vars.textSize.small[breakpoint].lineHeight) : styles_lib_themes_vars_css_cjs.vars.touchableSize;
-  const value = cssUtils.calc(height).subtract(styles_lib_themes_vars_css_cjs.vars.textSize[size][breakpoint].capHeight).divide(2).negate().toString();
-  return {
-    marginTop: value,
-    marginBottom: value
-  };
+const minHeightValueForSize = {
+  standard: styles_lib_themes_vars_css_cjs.vars.touchableSize,
+  small: cssUtils.calc.multiply(styles_lib_themes_vars_css_cjs.vars.touchableSize, 0.8)
 };
-const bleedVerticallyToCapHeight = css.style({
-  selectors: {
-    [`${standard}&`]: styles_lib_css_responsiveStyle_cjs.responsiveStyle({
-      mobile: stylesForBreakpoint("mobile", "standard"),
-      tablet: stylesForBreakpoint("tablet", "standard")
-    }),
-    [`${small}&`]: styles_lib_css_responsiveStyle_cjs.responsiveStyle({
-      mobile: stylesForBreakpoint("mobile", "small"),
-      tablet: stylesForBreakpoint("tablet", "small")
-    })
+const capHeightToMinHeight = css.createVar("capHeightToMinHeight");
+const paddingVarForBreakpoint = (size, breakpoint) => ({
+  vars: {
+    [capHeightToMinHeight]: cssUtils.calc(minHeightValueForSize[size]).subtract(styles_lib_themes_vars_css_cjs.vars.textSize[size][breakpoint].capHeight).divide(2).toString()
   }
+});
+const standard = css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
+  mobile: paddingVarForBreakpoint("standard", "mobile"),
+  tablet: paddingVarForBreakpoint("standard", "tablet")
+}), "standard");
+const small = css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
+  mobile: paddingVarForBreakpoint("small", "mobile"),
+  tablet: paddingVarForBreakpoint("small", "tablet")
+}), "small");
+const bleedVerticallyToCapHeight = css.style({
+  marginTop: cssUtils.calc.negate(capHeightToMinHeight),
+  marginBottom: cssUtils.calc.negate(capHeightToMinHeight)
 }, "bleedVerticallyToCapHeight");
+const padToMinHeight = css.style({
+  paddingTop: capHeightToMinHeight,
+  paddingBottom: capHeightToMinHeight
+}, "padToMinHeight");
 const dot1 = css.keyframes({
   "14%": {
     opacity: 0
@@ -134,13 +135,13 @@ const invertedBackgroundsDarkMode = css.styleVariants({
 fileScope.endFileScope();
 exports.activeOverlay = activeOverlay;
 exports.bleedVerticallyToCapHeight = bleedVerticallyToCapHeight;
-exports.constants = constants;
 exports.focusOverlay = focusOverlay;
 exports.forceActive = forceActive;
 exports.hoverOverlay = hoverOverlay;
 exports.invertedBackgroundsDarkMode = invertedBackgroundsDarkMode;
 exports.invertedBackgroundsLightMode = invertedBackgroundsLightMode;
 exports.loadingDot = loadingDot;
+exports.padToMinHeight = padToMinHeight;
 exports.root = root;
 exports.small = small;
 exports.standard = standard;

package/dist/styles/lib/components/Button/Button.css.mjs

@@ -1,14 +1,11 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style, keyframes, styleVariants } from "@vanilla-extract/css";
+import { style, createVar, keyframes, styleVariants } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
 import { rgba } from "polished";
-import { c as colorModeStyle } from "../../css/colorModeStyle.mjs";
-import { r as responsiveStyle } from "../../css/responsiveStyle.mjs";
-import { v as vars } from "../../themes/vars.css.mjs";
+import { colorModeStyle } from "../../css/colorModeStyle.mjs";
+import { responsiveStyle } from "../../css/responsiveStyle.mjs";
+import { vars } from "../../themes/vars.css.mjs";
 setFileScope("src/lib/components/Button/Button.css.ts?used", "braid-design-system");
-const constants = {
-  smallButtonPaddingSize: "xsmall"
-};
 const root = style({
   textDecoration: "none"
 }, "root");
@@ -34,28 +31,32 @@ const focusOverlay = style({
     }
   }
 }, "focusOverlay");
-const standard = style({}, "standard");
-const small = style({}, "small");
-const stylesForBreakpoint = (breakpoint, size) => {
-  const height = size === "small" ? calc.add(calc.multiply(vars.space[constants.smallButtonPaddingSize], 2), vars.textSize.small[breakpoint].lineHeight) : vars.touchableSize;
-  const value = calc(height).subtract(vars.textSize[size][breakpoint].capHeight).divide(2).negate().toString();
-  return {
-    marginTop: value,
-    marginBottom: value
-  };
+const minHeightValueForSize = {
+  standard: vars.touchableSize,
+  small: calc.multiply(vars.touchableSize, 0.8)
 };
-const bleedVerticallyToCapHeight = style({
-  selectors: {
-    [`${standard}&`]: responsiveStyle({
-      mobile: stylesForBreakpoint("mobile", "standard"),
-      tablet: stylesForBreakpoint("tablet", "standard")
-    }),
-    [`${small}&`]: responsiveStyle({
-      mobile: stylesForBreakpoint("mobile", "small"),
-      tablet: stylesForBreakpoint("tablet", "small")
-    })
+const capHeightToMinHeight = createVar("capHeightToMinHeight");
+const paddingVarForBreakpoint = (size, breakpoint) => ({
+  vars: {
+    [capHeightToMinHeight]: calc(minHeightValueForSize[size]).subtract(vars.textSize[size][breakpoint].capHeight).divide(2).toString()
   }
+});
+const standard = style(responsiveStyle({
+  mobile: paddingVarForBreakpoint("standard", "mobile"),
+  tablet: paddingVarForBreakpoint("standard", "tablet")
+}), "standard");
+const small = style(responsiveStyle({
+  mobile: paddingVarForBreakpoint("small", "mobile"),
+  tablet: paddingVarForBreakpoint("small", "tablet")
+}), "small");
+const bleedVerticallyToCapHeight = style({
+  marginTop: calc.negate(capHeightToMinHeight),
+  marginBottom: calc.negate(capHeightToMinHeight)
 }, "bleedVerticallyToCapHeight");
+const padToMinHeight = style({
+  paddingTop: capHeightToMinHeight,
+  paddingBottom: capHeightToMinHeight
+}, "padToMinHeight");
 const dot1 = keyframes({
   "14%": {
     opacity: 0
@@ -132,16 +133,16 @@ const invertedBackgroundsDarkMode = styleVariants({
 }, "invertedBackgroundsDarkMode");
 endFileScope();
 export {
-  invertedBackgroundsDarkMode as a,
-  forceActive as b,
-  activeOverlay as c,
-  constants as d,
-  small as e,
-  focusOverlay as f,
-  bleedVerticallyToCapHeight as g,
-  hoverOverlay as h,
-  invertedBackgroundsLightMode as i,
-  loadingDot as l,
-  root as r,
-  standard as s
+  activeOverlay,
+  bleedVerticallyToCapHeight,
+  focusOverlay,
+  forceActive,
+  hoverOverlay,
+  invertedBackgroundsDarkMode,
+  invertedBackgroundsLightMode,
+  loadingDot,
+  padToMinHeight,
+  root,
+  small,
+  standard
 };

package/dist/styles/lib/components/ButtonIcon/ButtonIcon.css.mjs

@@ -13,5 +13,5 @@ const button = style({
 }, "button");
 endFileScope();
 export {
-  button as b
+  button
 };

package/dist/styles/lib/components/Column/Column.css.mjs

@@ -25,7 +25,7 @@ const width = styleVariants({
 }, "width");
 endFileScope();
 export {
-  columnContent as a,
-  column as c,
-  width as w
+  column,
+  columnContent,
+  width
 };

package/dist/styles/lib/components/ContentBlock/ContentBlock.css.mjs

@@ -6,5 +6,5 @@ const marginAuto = style({
 }, "marginAuto");
 endFileScope();
 export {
-  marginAuto as m
+  marginAuto
 };

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

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style, createThemeContract, assignVars, styleVariants } from "@vanilla-extract/css";
-import { c as colorModeStyle } from "../../css/colorModeStyle.mjs";
-import { v as vars } from "../../themes/vars.css.mjs";
+import { colorModeStyle } from "../../css/colorModeStyle.mjs";
+import { vars } from "../../themes/vars.css.mjs";
 setFileScope("src/lib/components/Divider/Divider.css.ts?used", "braid-design-system");
 const base = style({
   height: vars.borderWidth.standard
@@ -46,9 +46,9 @@ const darkModeWeight = styleVariants({
 }, "darkModeWeight");
 endFileScope();
 export {
-  base as b,
-  darkModeWeight as d,
-  lightModeWeight as l,
-  regular as r,
-  strong as s
+  base,
+  darkModeWeight,
+  lightModeWeight,
+  regular,
+  strong
 };

package/dist/styles/lib/components/Dropdown/Dropdown.css.mjs

@@ -1,11 +1,11 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { v as vars } from "../../themes/vars.css.mjs";
+import { vars } from "../../themes/vars.css.mjs";
 setFileScope("src/lib/components/Dropdown/Dropdown.css.ts?used", "braid-design-system");
 const field = style({
   paddingRight: vars.touchableSize
 }, "field");
 endFileScope();
 export {
-  field as f
+  field
 };

package/dist/styles/lib/components/Hidden/Hidden.css.mjs

@@ -10,5 +10,5 @@ const hiddenOnPrint = style({
 }, "hiddenOnPrint");
 endFileScope();
 export {
-  hiddenOnPrint as h
+  hiddenOnPrint
 };

package/dist/styles/lib/components/HiddenVisually/HiddenVisually.css.mjs

@@ -9,5 +9,5 @@ const root = style({
 }, "root");
 endFileScope();
 export {
-  root as r
+  root
 };

package/dist/styles/lib/components/List/List.css.mjs

@@ -33,8 +33,8 @@ const trimGutter = style({
 }, "trimGutter");
 endFileScope();
 export {
-  currentColor as c,
-  minCharacterWidth as m,
-  size as s,
-  trimGutter as t
+  currentColor,
+  minCharacterWidth,
+  size,
+  trimGutter
 };

package/dist/styles/lib/components/Loader/Loader.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { styleVariants, style, keyframes } from "@vanilla-extract/css";
-import { r as responsiveStyle } from "../../css/responsiveStyle.mjs";
-import { v as vars } from "../../themes/vars.css.mjs";
+import { responsiveStyle } from "../../css/responsiveStyle.mjs";
+import { vars } from "../../themes/vars.css.mjs";
 setFileScope("src/lib/components/Loader/Loader.css.ts?used", "braid-design-system");
 const rootSize = styleVariants(vars.textSize, ({
   mobile,
@@ -75,9 +75,9 @@ const delay = style({
 }, "delay");
 endFileScope();
 export {
-  circle as a,
-  currentColor as c,
-  delay as d,
-  rootSize as r,
-  size as s
+  circle,
+  currentColor,
+  delay,
+  rootSize,
+  size
 };

package/dist/styles/lib/components/MenuItem/useMenuItem.css.mjs

@@ -10,5 +10,5 @@ const menuItem = style({
 }, "menuItem");
 endFileScope();
 export {
-  menuItem as m
+  menuItem
 };

package/dist/styles/lib/components/MenuRenderer/MenuRenderer.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style, createVar, styleVariants } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
-import { v as vars } from "../../themes/vars.css.mjs";
+import { vars } from "../../themes/vars.css.mjs";
 setFileScope("src/lib/components/MenuRenderer/MenuRenderer.css.ts?used", "braid-design-system");
 const backdrop = style({
   width: "100vw",
@@ -34,8 +34,8 @@ const placementBottom = style({
 }, "placementBottom");
 endFileScope();
 export {
-  backdrop as b,
-  menuIsClosed as m,
-  placementBottom as p,
-  width as w
+  backdrop,
+  menuIsClosed,
+  placementBottom,
+  width
 };