braid-design-system 32.16.2 → 32.16.3

package/dist/lib/components/Toggle/Toggle.css.cjs

@@ -1,5 +1,5 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
 const lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
@@ -7,7 +7,7 @@ const lib_components_private_touchable_hitArea_cjs = require("../private/touchab
 const lib_components_private_touchable_debugTouchable_cjs = require("../private/touchable/debugTouchable.cjs");
 const polished = require("polished");
 const lib_css_colorModeStyle_cjs = require("../../css/colorModeStyle.cjs");
-__vanilla_filescope__.setFileScope("src/lib/components/Toggle/Toggle.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/components/Toggle/Toggle.css.ts", "braid-design-system");
 const sizes = {
   standard: "standard",
   small: "small"
@@ -132,7 +132,7 @@ const hoverOverlay = css.style({
     }
   }
 }, "hoverOverlay");
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.fieldSize = fieldSize;
 exports.focusOverlay = focusOverlay;
 exports.hideBorderOnDarkBackgroundInLightMode = hideBorderOnDarkBackgroundInLightMode;

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

@@ -1,9 +1,9 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
 const lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
-__vanilla_filescope__.setFileScope("src/lib/components/TooltipRenderer/TooltipRenderer.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/components/TooltipRenderer/TooltipRenderer.css.ts", "braid-design-system");
 const constants = {
   maxWidth: "260px",
   arrowSize: "12px"
@@ -53,7 +53,7 @@ const arrow = css.style({
     }
   }
 }, "arrow");
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.arrow = arrow;
 exports.maxWidth = maxWidth;
 exports.translateZ0 = translateZ0;

package/dist/lib/components/icons/IconArrow/IconArrow.css.cjs

@@ -1,7 +1,7 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-__vanilla_filescope__.setFileScope("src/lib/components/icons/IconArrow/IconArrow.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/components/icons/IconArrow/IconArrow.css.ts", "braid-design-system");
 const root = css.style({
   transition: "transform 0.3s ease",
   transformOrigin: "50% 50%"
@@ -18,7 +18,7 @@ const mirror = css.style({
     [mirrorVar]: "-1"
   }
 }, "mirror");
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.flip = flip;
 exports.mirror = mirror;
 exports.root = root;

package/dist/lib/components/icons/IconChevron/IconChevron.css.cjs

@@ -1,7 +1,7 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-__vanilla_filescope__.setFileScope("src/lib/components/icons/IconChevron/IconChevron.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/components/icons/IconChevron/IconChevron.css.ts", "braid-design-system");
 const root = css.style({
   transition: "transform 0.3s ease",
   transformOrigin: "50% 50%"
@@ -15,7 +15,7 @@ const up = css.style({
 const right = css.style({
   transform: "rotate(270deg)"
 }, "right");
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.left = left;
 exports.right = right;
 exports.root = root;

package/dist/lib/components/icons/IconThumb/IconThumb.css.cjs

@@ -1,7 +1,7 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-__vanilla_filescope__.setFileScope("src/lib/components/icons/IconThumb/IconThumb.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/components/icons/IconThumb/IconThumb.css.ts", "braid-design-system");
 const root = css.style({
   transition: "transform 0.3s ease",
   transformOrigin: "50% 50%"
@@ -9,6 +9,6 @@ const root = css.style({
 const down = css.style({
   transform: "rotate(180deg)"
 }, "down");
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.down = down;
 exports.root = root;

package/dist/lib/components/private/AvoidWidowIcon/AvoidWidowIcon.css.cjs

@@ -1,9 +1,9 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-__vanilla_filescope__.setFileScope("src/lib/components/private/AvoidWidowIcon/AvoidWidowIcon.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/components/private/AvoidWidowIcon/AvoidWidowIcon.css.ts", "braid-design-system");
 const nowrap = css.style({
   whiteSpace: "nowrap"
 }, "nowrap");
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.nowrap = nowrap;

package/dist/lib/components/private/Field/Field.css.cjs

@@ -1,10 +1,10 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
 const lib_css_colorModeStyle_cjs = require("../../../css/colorModeStyle.cjs");
 const lib_themes_vars_css_cjs = require("../../../themes/vars.css.cjs");
-__vanilla_filescope__.setFileScope("src/lib/components/private/Field/Field.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/components/private/Field/Field.css.ts", "braid-design-system");
 const field = css.style({}, "field");
 const placeholderColor = css.style({
   "::placeholder": {
@@ -42,7 +42,7 @@ const verticalDivider = css.style({
   background: lib_themes_vars_css_cjs.vars.borderColor.field,
   opacity: 0.4
 }, "verticalDivider");
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.field = field;
 exports.focusOverlay = focusOverlay;
 exports.hideBorderOnDarkBackgroundInLightMode = hideBorderOnDarkBackgroundInLightMode;

package/dist/lib/components/private/InlineField/InlineField.css.cjs

@@ -1,5 +1,5 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
 const lib_themes_vars_css_cjs = require("../../../themes/vars.css.cjs");
@@ -7,7 +7,7 @@ const lib_components_private_touchable_hitArea_cjs = require("../touchable/hitAr
 const lib_components_private_touchable_debugTouchable_cjs = require("../touchable/debugTouchable.cjs");
 const lib_css_responsiveStyle_cjs = require("../../../css/responsiveStyle.cjs");
 const lib_css_colorModeStyle_cjs = require("../../../css/colorModeStyle.cjs");
-__vanilla_filescope__.setFileScope("src/lib/components/private/InlineField/InlineField.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/components/private/InlineField/InlineField.css.ts", "braid-design-system");
 const sizes = {
   standard: "standard",
   small: "small"
@@ -111,7 +111,7 @@ const radioScale = css.style({
   }
 }, "radioScale");
 const radioIndicator = [indicator, radioScale];
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.checkboxIndicator = checkboxIndicator;
 exports.children = children;
 exports.fakeField = fakeField;

package/dist/lib/components/private/InlineField/StyledInput.cjs

@@ -87,7 +87,6 @@ const StyledInput = React.forwardRef(
   }, forwardedRef) => {
     const defaultRef = React.useRef(null);
     const ref = forwardedRef || defaultRef;
-    const indeterminateRef = React.useRef(false);
     if (tones.indexOf(tone) === -1) {
       throw new Error(`Invalid tone: ${tone}`);
     }
@@ -97,12 +96,22 @@ const StyledInput = React.forwardRef(
     const isMixed = isCheckbox && checked === "mixed";
     const fieldBackground = disabled ? { lightMode: "neutralSoft", darkMode: "neutral" } : { lightMode: "surface" };
     const defaultBorder = checked ? "formAccent" : "default";
+    const indeterminateRef = React.useRef(isMixed);
+    const lastChecked = React.useRef(null);
+    indeterminateRef.current = isMixed;
+    if (isCheckbox && checked !== lastChecked.current && ref && typeof ref === "object" && ref.current) {
+      ref.current.indeterminate = indeterminateRef.current;
+    }
+    React.useEffect(() => {
+      if (isCheckbox && ref && typeof ref === "object" && ref.current) {
+        ref.current.indeterminate = indeterminateRef.current;
+      }
+    }, [ref, isCheckbox]);
     React.useEffect(() => {
-      if (ref && typeof ref === "object" && ref.current && isCheckbox) {
-        ref.current.indeterminate = isMixed;
-        indeterminateRef.current = isMixed;
+      if (isCheckbox) {
+        lastChecked.current = checked;
       }
-    }, [ref, isMixed, isCheckbox]);
+    }, [isCheckbox, checked]);
     const { lightMode } = lib_components_Box_BackgroundContext_cjs.useBackgroundLightness();
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -113,14 +122,14 @@ const StyledInput = React.forwardRef(
           id,
           name,
           value,
-          onChange: isMixed ? (e) => {
-            if (ref && typeof ref === "object" && ref.current) {
-              ref.current.indeterminate = indeterminateRef.current;
+          onChange: (e) => {
+            if (isMixed) {
+              e.currentTarget.indeterminate = isMixed;
             }
             if (typeof onChange === "function") {
               onChange(e);
             }
-          } : onChange,
+          },
           checked: checked === "mixed" ? false : checked,
           position: "absolute",
           zIndex: 1,

package/dist/lib/components/private/InlineField/StyledInput.mjs

@@ -86,7 +86,6 @@ const StyledInput = forwardRef(
   }, forwardedRef) => {
     const defaultRef = useRef(null);
     const ref = forwardedRef || defaultRef;
-    const indeterminateRef = useRef(false);
     if (tones.indexOf(tone) === -1) {
       throw new Error(`Invalid tone: ${tone}`);
     }
@@ -96,12 +95,22 @@ const StyledInput = forwardRef(
     const isMixed$1 = isCheckbox && checked === "mixed";
     const fieldBackground = disabled ? { lightMode: "neutralSoft", darkMode: "neutral" } : { lightMode: "surface" };
     const defaultBorder = checked ? "formAccent" : "default";
+    const indeterminateRef = useRef(isMixed$1);
+    const lastChecked = useRef(null);
+    indeterminateRef.current = isMixed$1;
+    if (isCheckbox && checked !== lastChecked.current && ref && typeof ref === "object" && ref.current) {
+      ref.current.indeterminate = indeterminateRef.current;
+    }
+    useEffect(() => {
+      if (isCheckbox && ref && typeof ref === "object" && ref.current) {
+        ref.current.indeterminate = indeterminateRef.current;
+      }
+    }, [ref, isCheckbox]);
     useEffect(() => {
-      if (ref && typeof ref === "object" && ref.current && isCheckbox) {
-        ref.current.indeterminate = isMixed$1;
-        indeterminateRef.current = isMixed$1;
+      if (isCheckbox) {
+        lastChecked.current = checked;
       }
-    }, [ref, isMixed$1, isCheckbox]);
+    }, [isCheckbox, checked]);
     const { lightMode } = useBackgroundLightness();
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -112,14 +121,14 @@ const StyledInput = forwardRef(
           id,
           name,
           value,
-          onChange: isMixed$1 ? (e) => {
-            if (ref && typeof ref === "object" && ref.current) {
-              ref.current.indeterminate = indeterminateRef.current;
+          onChange: (e) => {
+            if (isMixed$1) {
+              e.currentTarget.indeterminate = isMixed$1;
             }
             if (typeof onChange === "function") {
               onChange(e);
             }
-          } : onChange,
+          },
           checked: checked === "mixed" ? false : checked,
           position: "absolute",
           zIndex: 1,

package/dist/lib/components/private/Keyline/Keyline.css.cjs

@@ -1,9 +1,9 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const lib_css_colorModeStyle_cjs = require("../../../css/colorModeStyle.cjs");
 const lib_themes_vars_css_cjs = require("../../../themes/vars.css.cjs");
-__vanilla_filescope__.setFileScope("src/lib/components/private/Keyline/Keyline.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/components/private/Keyline/Keyline.css.ts", "braid-design-system");
 const keylineVars = css.createThemeContract({
   promote: null,
   info: null,
@@ -61,7 +61,7 @@ const largestWidth = css.style({
 const width = css.style({
   width: lib_themes_vars_css_cjs.vars.grid
 }, "width");
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.darkMode = darkMode;
 exports.largestWidth = largestWidth;
 exports.lightMode = lightMode;

package/dist/lib/components/private/MaxLines/MaxLines.css.cjs

@@ -1,8 +1,8 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const entries_css_cjs = require("../../../../css.cjs");
-__vanilla_filescope__.setFileScope("src/lib/components/private/MaxLines/MaxLines.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/components/private/MaxLines/MaxLines.css.ts", "braid-design-system");
 const descenderCropFixOffset = "0.1em";
 const negateDescenderCropFixOffset = `-${descenderCropFixOffset}`;
 const descenderCropFixForWebkitBox = css.style({
@@ -34,7 +34,7 @@ const multiLine = css.style({
     }
   }
 }, "multiLine");
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.base = base;
 exports.descenderCropFixForWebkitBox = descenderCropFixForWebkitBox;
 exports.lineLimit = lineLimit;

package/dist/lib/components/private/Modal/Modal.css.cjs

@@ -1,5 +1,5 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
 const lib_components_private_Modal_ModalExternalGutter_cjs = require("./ModalExternalGutter.cjs");
@@ -7,7 +7,7 @@ const lib_css_responsiveStyle_cjs = require("../../../css/responsiveStyle.cjs");
 const lib_themes_vars_css_cjs = require("../../../themes/vars.css.cjs");
 const lib_css_atoms_atoms_cjs = require("../../../css/atoms/atoms.cjs");
 const lib_css_colorModeStyle_cjs = require("../../../css/colorModeStyle.cjs");
-__vanilla_filescope__.setFileScope("src/lib/components/private/Modal/Modal.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/components/private/Modal/Modal.css.ts", "braid-design-system");
 const fixedStackingContext = lib_css_atoms_atoms_cjs.atoms({
   position: "fixed",
   zIndex: "modal"
@@ -152,7 +152,7 @@ const closeIconOffset = css.style({
   top: "-5px",
   right: "-5px"
 }, "closeIconOffset");
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.backdrop = backdrop;
 exports.closeIconOffset = closeIconOffset;
 exports.entrance = entrance;

package/dist/lib/components/private/Placeholder/Placeholder.css.cjs

@@ -1,8 +1,8 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const lib_css_colorModeStyle_cjs = require("../../../css/colorModeStyle.cjs");
-__vanilla_filescope__.setFileScope("src/lib/components/private/Placeholder/Placeholder.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/components/private/Placeholder/Placeholder.css.ts", "braid-design-system");
 const vars = css.createThemeContract({
   background: null,
   borderColor: null,
@@ -53,7 +53,7 @@ const line = css.style({
   strokeWidth: borderWidth,
   stroke: vars.lineColor
 }, "line");
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.box = box;
 exports.darkTheme = darkTheme;
 exports.label = label;

package/dist/lib/components/private/hideFocusRings/hideFocusRings.css.cjs

@@ -1,8 +1,8 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const lib_components_private_hideFocusRings_hideFocusRingsDataAttribute_cjs = require("./hideFocusRingsDataAttribute.cjs");
-__vanilla_filescope__.setFileScope("src/lib/components/private/hideFocusRings/hideFocusRings.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/components/private/hideFocusRings/hideFocusRings.css.ts", "braid-design-system");
 const hideFocusRingsClassName = css.style({
   selectors: {
     [`[${lib_components_private_hideFocusRings_hideFocusRingsDataAttribute_cjs.hideFocusRingsDataAttribute}] &`]: {
@@ -10,5 +10,5 @@ const hideFocusRingsClassName = css.style({
     }
   }
 }, "hideFocusRingsClassName");
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.hideFocusRingsClassName = hideFocusRingsClassName;

package/dist/lib/components/private/touchable/virtualTouchable.css.cjs

@@ -1,9 +1,9 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const lib_components_private_touchable_debugTouchable_cjs = require("./debugTouchable.cjs");
 const lib_components_private_touchable_virtualTouchableRules_cjs = require("./virtualTouchableRules.cjs");
-__vanilla_filescope__.setFileScope("src/lib/components/private/touchable/virtualTouchable.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/components/private/touchable/virtualTouchable.css.ts", "braid-design-system");
 const virtualTouchable = css.style([{
   position: "relative",
   ":after": {
@@ -22,6 +22,6 @@ const yAxisOnly = css.style({
     right: "0 !important"
   }
 }, "yAxisOnly");
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.virtualTouchable = virtualTouchable;
 exports.yAxisOnly = yAxisOnly;

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

@@ -1,9 +1,9 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-__vanilla_filescope__.setFileScope("src/lib/components/useToast/Toast.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/components/useToast/Toast.css.ts", "braid-design-system");
 const toast = css.style({
   pointerEvents: "all"
 }, "toast");
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.toast = toast;

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

@@ -1,10 +1,10 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const sprinkles$1 = require("@vanilla-extract/sprinkles");
 const lib_css_breakpoints_cjs = require("../breakpoints.cjs");
 const lib_css_atoms_atomicProperties_cjs = require("./atomicProperties.cjs");
-__vanilla_filescope__.setFileScope("src/lib/css/atoms/sprinkles.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/css/atoms/sprinkles.css.ts", "braid-design-system");
 const unresponsiveAtomicProperties = sprinkles$1.defineProperties({
   properties: lib_css_atoms_atomicProperties_cjs.unresponsiveProperties,
   shorthands: {
@@ -66,7 +66,7 @@ const sprinkles = sprinkles$1.createSprinkles(unresponsiveAtomicProperties, resp
 const normalizeResponsiveValue = sprinkles$1.createNormalizeValueFn(responsiveAtomicProperties);
 const mapResponsiveValue = sprinkles$1.createMapValueFn(responsiveAtomicProperties);
 const mapColorModeValue = sprinkles$1.createMapValueFn(colorAtomicProperties);
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.colorModeSelectors = colorModeSelectors;
 exports.darkMode = darkMode;
 exports.mapColorModeValue = mapColorModeValue;

package/dist/lib/css/lineHeightContainer.css.cjs

@@ -1,9 +1,9 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const lib_css_responsiveStyle_cjs = require("./responsiveStyle.cjs");
 const lib_themes_vars_css_cjs = require("../themes/vars.css.cjs");
-__vanilla_filescope__.setFileScope("src/lib/css/lineHeightContainer.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/css/lineHeightContainer.css.ts", "braid-design-system");
 const lineHeightContainer = css.styleVariants(lib_themes_vars_css_cjs.vars.textSize, ({
   mobile,
   tablet
@@ -15,5 +15,5 @@ const lineHeightContainer = css.styleVariants(lib_themes_vars_css_cjs.vars.textS
     height: tablet.lineHeight
   }
 }), "lineHeightContainer");
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.lineHeightContainer = lineHeightContainer;

package/dist/lib/css/negativeMargin/negativeMargin.css.cjs

@@ -1,10 +1,10 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
 const lib_css_atoms_atomicProperties_cjs = require("../atoms/atomicProperties.cjs");
 const lib_css_responsiveStyle_cjs = require("../responsiveStyle.cjs");
-__vanilla_filescope__.setFileScope("src/lib/css/negativeMargin/negativeMargin.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/css/negativeMargin/negativeMargin.css.ts", "braid-design-system");
 const stylesForBreakpoint = (bp, property, mapToStyle) => css.styleVariants(lib_css_atoms_atomicProperties_cjs.space, (value) => {
   const styleRule = {
     [property]: value ? cssUtils.calc.negate(value) : 0
@@ -53,7 +53,7 @@ const right = {
   desktop: stylesForBreakpoint("desktop", "marginRight"),
   wide: stylesForBreakpoint("wide", "marginRight")
 };
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.bottom = bottom;
 exports.left = left;
 exports.preventCollapsePseudo = preventCollapsePseudo;

package/dist/lib/css/reset/reset.css.cjs

@@ -1,8 +1,8 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const lib_components_private_hideFocusRings_hideFocusRingsDataAttribute_cjs = require("../../components/private/hideFocusRings/hideFocusRingsDataAttribute.cjs");
-__vanilla_filescope__.setFileScope("src/lib/css/reset/reset.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/css/reset/reset.css.ts", "braid-design-system");
 const base = css.style({
   margin: 0,
   padding: 0,
@@ -106,6 +106,6 @@ const element = {
   textarea: field,
   input
 };
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.base = base;
 exports.element = element;

package/dist/lib/css/textAlignedToIcon.css.cjs

@@ -1,10 +1,10 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
 const lib_css_responsiveStyle_cjs = require("./responsiveStyle.cjs");
 const lib_themes_vars_css_cjs = require("../themes/vars.css.cjs");
-__vanilla_filescope__.setFileScope("src/lib/css/textAlignedToIcon.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/css/textAlignedToIcon.css.ts", "braid-design-system");
 const calculateForBreakpoint = (breakpoint) => {
   const type = lib_themes_vars_css_cjs.vars.textSize.standard[breakpoint];
   const padding = cssUtils.calc(type.lineHeight).subtract(type.capHeight).divide(2).toString();
@@ -19,5 +19,5 @@ const textAlignedToIcon = {
     tablet: calculateForBreakpoint("tablet")
   }), "textAlignedToIcon_standard")
 };
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.textAlignedToIcon = textAlignedToIcon;

package/dist/lib/css/typography.css.cjs

@@ -1,13 +1,13 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
-const lib_css_capsize_css_cjs = require("./capsize.css.cjs");
+const vanillaExtract = require("@capsizecss/vanilla-extract");
 const lib_themes_vars_css_cjs = require("../themes/vars.css.cjs");
 const lib_css_responsiveStyle_cjs = require("./responsiveStyle.cjs");
 const lib_css_colorModeStyle_cjs = require("./colorModeStyle.cjs");
 const lib_utils_mapToProperty_cjs = require("../utils/mapToProperty.cjs");
-__vanilla_filescope__.setFileScope("src/lib/css/typography.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/css/typography.css.ts", "braid-design-system");
 const fontFamily = css.style({
   fontFamily: lib_themes_vars_css_cjs.vars.fontFamily
 }, "fontFamily");
@@ -15,7 +15,7 @@ const fontWeight = css.styleVariants(lib_themes_vars_css_cjs.vars.textWeight, li
 const textSizeTrimmed = css.styleVariants(lib_themes_vars_css_cjs.vars.textSize, ({
   mobile,
   tablet
-}, variant) => [lib_css_capsize_css_cjs.createTextStyle({
+}, variant) => [vanillaExtract.createTextStyle({
   fontSize: mobile.fontSize,
   lineHeight: mobile.lineHeight,
   ...mobile.capsizeTrims
@@ -45,7 +45,7 @@ const headingWeight = css.styleVariants(lib_themes_vars_css_cjs.vars.headingWeig
 const heading = css.styleVariants(lib_themes_vars_css_cjs.vars.headingLevel, ({
   mobile,
   tablet
-}, variant) => [lib_css_capsize_css_cjs.createTextStyle({
+}, variant) => [vanillaExtract.createTextStyle({
   fontSize: mobile.fontSize,
   lineHeight: mobile.lineHeight,
   ...mobile.capsizeTrims
@@ -157,7 +157,7 @@ const touchableText = css.styleVariants(lib_themes_vars_css_cjs.vars.textSize, (
   mobile: makeTouchableSpacing(lib_themes_vars_css_cjs.vars.touchableSize, textDefinition.mobile.lineHeight),
   tablet: makeTouchableSpacing(lib_themes_vars_css_cjs.vars.touchableSize, textDefinition.tablet.lineHeight)
 }), "touchableText");
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.darkModeNeutralOverride = darkModeNeutralOverride;
 exports.darkModeTone = darkModeTone;
 exports.fontFamily = fontFamily;

package/dist/lib/css/typography.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style, styleVariants, createThemeContract, assignVars } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
-import { createTextStyle } from "./capsize.css.mjs";
+import { createTextStyle } from "@capsizecss/vanilla-extract";
 import { vars } from "../themes/vars.css.mjs";
 import { breakpointQuery, responsiveStyle } from "./responsiveStyle.mjs";
 import { colorModeStyle } from "./colorModeStyle.mjs";

package/dist/lib/hooks/useIcon/icon.css.cjs

@@ -1,9 +1,9 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const lib_css_responsiveStyle_cjs = require("../../css/responsiveStyle.cjs");
 const lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
-__vanilla_filescope__.setFileScope("src/lib/hooks/useIcon/icon.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/hooks/useIcon/icon.css.ts", "braid-design-system");
 const iconScaleIncrease = 0.2;
 const size = css.style({
   width: `${1 + iconScaleIncrease}em`,
@@ -57,7 +57,7 @@ const blockWidths = css.styleVariants(lib_themes_vars_css_cjs.vars.textSize, ({
     width: tablet.lineHeight
   }
 }), "blockWidths");
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.alignY = alignY;
 exports.blockWidths = blockWidths;
 exports.cropToTextSize = cropToTextSize;

package/dist/lib/themes/apac/apacTheme.css.cjs

@@ -1,8 +1,8 @@
 "use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const fileScope = require("@vanilla-extract/css/fileScope");
 const lib_themes_apac_tokens_cjs = require("./tokens.cjs");
 const lib_themes_makeBraidTheme_cjs = require("../makeBraidTheme.cjs");
-__vanilla_filescope__.setFileScope("src/lib/themes/apac/apacTheme.css.ts", "braid-design-system");
+fileScope.setFileScope("src/lib/themes/apac/apacTheme.css.ts", "braid-design-system");
 const apacTheme_css = lib_themes_makeBraidTheme_cjs.makeBraidTheme(lib_themes_apac_tokens_cjs.tokens);
-__vanilla_filescope__.endFileScope();
+fileScope.endFileScope();
 exports.apacTheme_css = apacTheme_css;

package/dist/lib/themes/baseTokens/apac.cjs

@@ -1,5 +1,5 @@
 "use strict";
-const robotoMetrics = require("@capsizecss/metrics/roboto.js");
+const robotoMetrics = require("@capsizecss/metrics/roboto");
 const polished = require("polished");
 const merge = require("lodash/merge.js");
 const lib_color_palette_cjs = require("../../color/palette.cjs");

package/dist/lib/themes/baseTokens/apac.mjs

@@ -1,4 +1,4 @@
-import robotoMetrics from "@capsizecss/metrics/roboto.js";
+import robotoMetrics from "@capsizecss/metrics/roboto";
 import { rgba, darken, saturate, lighten } from "polished";
 import merge from "lodash/merge.js";
 import { palette } from "../../color/palette.mjs";