braid-design-system 32.3.0 → 32.3.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # braid-design-system
 
+## 32.3.1
+
+### Patch Changes
+
+- **RadioItem, Checkbox:** Fix stacking context behaviour ([#1284](https://github.com/seek-oss/braid-design-system/pull/1284))
+
+  A `RadioItem` and `Checkbox` previously created a new stacking context with an elevated `z-index` applied on hover, resulting in their labels overlaying other elements in an unpredictable ways — most noticable when [toggling nested content].
+
+  For example, toggling nested content containing an `Autosuggest`, would see the list of suggestions list would be overlayed by the next `RadioItem` on hover.
+
+  To fix this, the `z-index` is no longer elevated on hover, and additionally the nested content container applies an elevated index when the field is **checked**.
+
+  [toggling nested content]: https://seek-oss.github.io/braid-design-system/components/RadioGroup#toggling-nested-content
+
+- **Textarea:** Adjust `highlightRange` background to support different line heights ([#1279](https://github.com/seek-oss/braid-design-system/pull/1279))
+
+  Remove the vertical padding on the highlight element to prevent the background colour overlapping the wavy underline in themes with tighter line heights.
+
+- **MenuItemCheckbox:** Align checkbox size with a `small` Checkbox ([#1276](https://github.com/seek-oss/braid-design-system/pull/1276))
+
+  Align the size of a `MenuItemCheckbox` with a `small` sized `Checkbox`.
+
+- **Checkbox, RadioItem:** Fix alignment with updated Badge layout ([#1280](https://github.com/seek-oss/braid-design-system/pull/1280))
+
+  Improve layout to work with updated Badge layout which is no longer driven by line height.
+
+- **MonthPicker:** Reduce space between fields ([#1277](https://github.com/seek-oss/braid-design-system/pull/1277))
+
+  Reduce the space between the month and year fields.
+
 ## 32.3.0
 
 ### Minor Changes

package/dist/Toggle.chunk.cjs

@@ -28,6 +28,7 @@ const styles_lib_components_private_Modal_Modal_css_cjs = require("./styles/lib/
 const styles_lib_css_lineHeightContainer_css_cjs = require("./styles/lib/css/lineHeightContainer.css.cjs");
 const styles_lib_components_List_List_css_cjs = require("./styles/lib/components/List/List.css.cjs");
 const styles_lib_components_Loader_Loader_css_cjs = require("./styles/lib/components/Loader/Loader.css.cjs");
+const styles_lib_components_MenuItemCheckbox_MenuItemCheckbox_css_cjs = require("./styles/lib/components/MenuItemCheckbox/MenuItemCheckbox.css.cjs");
 const styles_lib_components_MenuItem_useMenuItem_css_cjs = require("./styles/lib/components/MenuItem/useMenuItem.css.cjs");
 const styles_lib_components_MenuRenderer_MenuRenderer_css_cjs = require("./styles/lib/components/MenuRenderer/MenuRenderer.css.cjs");
 const styles_lib_components_OverflowMenu_OverflowMenu_css_cjs = require("./styles/lib/components/OverflowMenu/OverflowMenu.css.cjs");
@@ -3946,7 +3947,7 @@ const StyledInput = React.forwardRef(
           zIndex: 1,
           className: [
             styles_lib_components_private_InlineField_InlineField_css_cjs.realField,
-            styles_lib_components_private_InlineField_InlineField_css_cjs.realFieldPosition[size],
+            styles_lib_components_private_InlineField_InlineField_css_cjs.sizeVars[size],
             isMixed ? styles_lib_components_private_InlineField_InlineField_css_cjs.isMixed : void 0
           ],
           cursor: !disabled ? "pointer" : void 0,
@@ -3967,7 +3968,7 @@ const StyledInput = React.forwardRef(
         {
           flexShrink: 0,
           position: "relative",
-          className: [styles_lib_components_private_InlineField_InlineField_css_cjs.fakeField, styles_lib_components_private_InlineField_InlineField_css_cjs.fakeFieldSize[size]],
+          className: [styles_lib_components_private_InlineField_InlineField_css_cjs.fakeField, styles_lib_components_private_InlineField_InlineField_css_cjs.sizeVars[size]],
           background: fieldBackground,
           borderRadius: fieldBorderRadius,
           children: [
@@ -4047,7 +4048,14 @@ const InlineField = React.forwardRef(
     const messageId = `${id}-message`;
     const descriptionId = `${id}-description`;
     const hasMessage = message || reserveMessageSpace;
-    return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Box, { position: "relative", zIndex: 0, className: styles_lib_components_private_InlineField_InlineField_css_cjs.root, children: [
+    if (process.env.NODE_ENV !== "production") {
+      if (badge && badge.props.bleedY !== void 0) {
+        console.warn(
+          `Badge elements cannot set the \`bleedY\` prop when passed to a ${type.charAt(0).toUpperCase()}${type.slice(1)} component`
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Box, { position: "relative", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Box, { display: "flex", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           StyledInput,
@@ -4074,7 +4082,7 @@ const InlineField = React.forwardRef(
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Box, { paddingLeft: "small", flexGrow: 1, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Inline, { space: "small", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { className: [styles_lib_components_private_InlineField_InlineField_css_cjs.sizeVars[size], styles_lib_components_private_InlineField_InlineField_css_cjs.labelOffset], children: /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Inline, { space: "small", alignY: "center", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               ToastContext.Box,
               {
@@ -4083,7 +4091,7 @@ const InlineField = React.forwardRef(
                 userSelect: "none",
                 display: "block",
                 cursor: !disabled ? "pointer" : void 0,
-                className: [styles_lib_components_private_InlineField_InlineField_css_cjs.labelOffset[size], ToastContext.virtualTouchable()],
+                className: ToastContext.virtualTouchable(),
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   ToastContext.Text,
                   {
@@ -4095,12 +4103,13 @@ const InlineField = React.forwardRef(
                 )
               }
             ),
-            badge ? /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { className: styles_lib_components_private_InlineField_InlineField_css_cjs.badgeOffset[size], children: badge }) : null
-          ] }),
+            badge ? React.cloneElement(badge, { bleedY: true }) : null
+          ] }) }),
           description ? /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { paddingTop: "small", children: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Text, { tone: "secondary", size, id: descriptionId, children: description }) }) : null,
           children ? /* @__PURE__ */ jsxRuntime.jsx(
             ToastContext.Box,
             {
+              position: "relative",
               display: "none",
               paddingTop: "small",
               className: styles_lib_components_private_InlineField_InlineField_css_cjs.children,
@@ -5499,7 +5508,7 @@ const MenuItemCheckbox = ({
             background: { lightMode: "surface" },
             marginRight: "small",
             flexShrink: 0,
-            className: ToastContext.iconSize(),
+            className: styles_lib_components_MenuItemCheckbox_MenuItemCheckbox_css_cjs.checkboxSize,
             children: /* @__PURE__ */ jsxRuntime.jsx(
               ToastContext.Box,
               {
@@ -5790,7 +5799,7 @@ const MonthPicker = ({
       ] })
     }
   );
-  const customFieldGroup = /* @__PURE__ */ jsxRuntime.jsx(FieldGroup, { id, tone, disabled, ...restProps, children: (fieldGroupProps) => /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Columns, { space: "medium", children: [
+  const customFieldGroup = /* @__PURE__ */ jsxRuntime.jsx(FieldGroup, { id, tone, disabled, ...restProps, children: (fieldGroupProps) => /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Columns, { space: "small", children: [
     /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(
       Dropdown,
       {

package/dist/Toggle.chunk.mjs

@@ -27,6 +27,7 @@ import { headingRoot, headingFocus, pointerEventsAll, maxSize, closeIconOffset,
 import { lineHeightContainer } from "./styles/lib/css/lineHeightContainer.css.mjs";
 import { currentColor, size, minCharacterWidth, trimGutter } from "./styles/lib/components/List/List.css.mjs";
 import { rootSize, delay, size as size$1, currentColor as currentColor$1, circle } from "./styles/lib/components/Loader/Loader.css.mjs";
+import { checkboxSize } from "./styles/lib/components/MenuItemCheckbox/MenuItemCheckbox.css.mjs";
 import { menuItem } from "./styles/lib/components/MenuItem/useMenuItem.css.mjs";
 import { backdrop as backdrop$2, menuIsClosed, width as width$1, placementBottom } from "./styles/lib/components/MenuRenderer/MenuRenderer.css.mjs";
 import { triggerOffset } from "./styles/lib/components/OverflowMenu/OverflowMenu.css.mjs";
@@ -34,19 +35,19 @@ import { isMobile } from "is-mobile";
 import { field as field$1 } from "./styles/lib/components/Dropdown/Dropdown.css.mjs";
 import { nativeInput } from "./styles/lib/components/MonthPicker/MonthPicker.css.mjs";
 import { hover, background, current, lightModeCurrentKeyline, darkModeCurrentKeyline } from "./styles/lib/components/Pagination/Pagination.css.mjs";
-import { realField, realFieldPosition, isMixed, fakeField, fakeFieldSize, selected, focusOverlay as focusOverlay$1, hoverOverlay as hoverOverlay$1, checkboxIndicator, radioIndicator, root as root$4, labelOffset, badgeOffset, children } from "./styles/lib/components/private/InlineField/InlineField.css.mjs";
+import { realField, sizeVars, isMixed, fakeField, selected, focusOverlay as focusOverlay$1, hoverOverlay as hoverOverlay$1, checkboxIndicator, radioIndicator, labelOffset, children } from "./styles/lib/components/private/InlineField/InlineField.css.mjs";
 import { starSpacing, textSpacing, lightModeStarColor, darkModeStarColor } from "./styles/lib/components/Rating/Rating.css.mjs";
 import { step, tone as tone$2, progressTrack, progressTrackCentered, progressLine, progressUnfilled, indicatorContainer, focusOverlay as focusOverlay$2, indicator, highlight, complete, active, inner, tick, stretch, stretchLastAboveTablet } from "./styles/lib/components/Stepper/Stepper.css.mjs";
 import { tab, cropToIconX, hoveredTab, tabFocusRing, scroll as scroll$1, nowrap, mask, marginAuto, divider, tabUnderline, tabUnderlineActiveDarkMode, underlineLeft, underlineWidth, tabPanel, tabPanelFocusRing } from "./styles/lib/components/Tabs/Tabs.css.mjs";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { clearGutter } from "./styles/lib/components/Tag/Tag.css.mjs";
-import { root as root$5, caution, critical } from "./styles/lib/components/Textarea/Highlight/Highlight.css.mjs";
+import { root as root$4, caution, critical } from "./styles/lib/components/Textarea/Highlight/Highlight.css.mjs";
 import { highlights, field as field$2 } from "./styles/lib/components/Textarea/Textarea.css.mjs";
 import { select, focusOverlay as focusOverlay$3 } from "./styles/lib/components/TextDropdown/TextDropdown.css.mjs";
 import { root as root$1, up, left, right } from "./styles/lib/components/icons/IconChevron/IconChevron.css.mjs";
 import { secondaryIconSpace, field, placeholderColor, iconSpace, verticalDivider, focusOverlay, hoverOverlay } from "./styles/lib/components/private/Field/Field.css.mjs";
 import { columnsWide, columnsDesktop, columnsTablet, columnsMobile } from "./styles/lib/components/Tiles/Tiles.css.mjs";
-import { root as root$6, realField as realField$1, realFieldPosition as realFieldPosition$1, fieldSize, slideContainer, slideContainerSize, slideTrack, slideTrackMask, slideTrackBgLightMode, slideTrackBgDarkMode, slideTrackSelected, slider, icon as icon$1, focusOverlay as focusOverlay$4, hoverOverlay as hoverOverlay$2, label } from "./styles/lib/components/Toggle/Toggle.css.mjs";
+import { root as root$5, realField as realField$1, realFieldPosition, fieldSize, slideContainer, slideContainerSize, slideTrack, slideTrackMask, slideTrackBgLightMode, slideTrackBgDarkMode, slideTrackSelected, slider, icon as icon$1, focusOverlay as focusOverlay$4, hoverOverlay as hoverOverlay$2, label } from "./styles/lib/components/Toggle/Toggle.css.mjs";
 const ThemeNameConsumer = ({ children: children2 }) => children2(useThemeName());
 const useColor = () => useBraidTheme().color;
 const useBreakpoint = () => {
@@ -3938,7 +3939,7 @@ const StyledInput = forwardRef(
           zIndex: 1,
           className: [
             realField,
-            realFieldPosition[size2],
+            sizeVars[size2],
             isMixed$1 ? isMixed : void 0
           ],
           cursor: !disabled ? "pointer" : void 0,
@@ -3959,7 +3960,7 @@ const StyledInput = forwardRef(
         {
           flexShrink: 0,
           position: "relative",
-          className: [fakeField, fakeFieldSize[size2]],
+          className: [fakeField, sizeVars[size2]],
           background: fieldBackground,
           borderRadius: fieldBorderRadius,
           children: [
@@ -4039,7 +4040,14 @@ const InlineField = forwardRef(
     const messageId = `${id}-message`;
     const descriptionId = `${id}-description`;
     const hasMessage = message || reserveMessageSpace;
-    return /* @__PURE__ */ jsxs(Box, { position: "relative", zIndex: 0, className: root$4, children: [
+    if (process.env.NODE_ENV !== "production") {
+      if (badge && badge.props.bleedY !== void 0) {
+        console.warn(
+          `Badge elements cannot set the \`bleedY\` prop when passed to a ${type.charAt(0).toUpperCase()}${type.slice(1)} component`
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
       /* @__PURE__ */ jsxs(Box, { display: "flex", children: [
         /* @__PURE__ */ jsx(
           StyledInput,
@@ -4066,7 +4074,7 @@ const InlineField = forwardRef(
           }
         ),
         /* @__PURE__ */ jsxs(Box, { paddingLeft: "small", flexGrow: 1, children: [
-          /* @__PURE__ */ jsxs(Inline, { space: "small", children: [
+          /* @__PURE__ */ jsx(Box, { className: [sizeVars[size2], labelOffset], children: /* @__PURE__ */ jsxs(Inline, { space: "small", alignY: "center", children: [
             /* @__PURE__ */ jsx(
               Box,
               {
@@ -4075,7 +4083,7 @@ const InlineField = forwardRef(
                 userSelect: "none",
                 display: "block",
                 cursor: !disabled ? "pointer" : void 0,
-                className: [labelOffset[size2], virtualTouchable()],
+                className: virtualTouchable(),
                 children: /* @__PURE__ */ jsx(
                   Text,
                   {
@@ -4087,12 +4095,13 @@ const InlineField = forwardRef(
                 )
               }
             ),
-            badge ? /* @__PURE__ */ jsx(Box, { className: badgeOffset[size2], children: badge }) : null
-          ] }),
+            badge ? cloneElement(badge, { bleedY: true }) : null
+          ] }) }),
           description ? /* @__PURE__ */ jsx(Box, { paddingTop: "small", children: /* @__PURE__ */ jsx(Text, { tone: "secondary", size: size2, id: descriptionId, children: description }) }) : null,
           children$1 ? /* @__PURE__ */ jsx(
             Box,
             {
+              position: "relative",
               display: "none",
               paddingTop: "small",
               className: children,
@@ -5491,7 +5500,7 @@ const MenuItemCheckbox = ({
             background: { lightMode: "surface" },
             marginRight: "small",
             flexShrink: 0,
-            className: iconSize(),
+            className: checkboxSize,
             children: /* @__PURE__ */ jsx(
               Box,
               {
@@ -5782,7 +5791,7 @@ const MonthPicker = ({
       ] })
     }
   );
-  const customFieldGroup = /* @__PURE__ */ jsx(FieldGroup, { id, tone: tone2, disabled, ...restProps, children: (fieldGroupProps) => /* @__PURE__ */ jsxs(Columns, { space: "medium", children: [
+  const customFieldGroup = /* @__PURE__ */ jsx(FieldGroup, { id, tone: tone2, disabled, ...restProps, children: (fieldGroupProps) => /* @__PURE__ */ jsxs(Columns, { space: "small", children: [
     /* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsx(
       Dropdown,
       {
@@ -7533,7 +7542,7 @@ const Tag = ({
   );
 };
 const styleForTone = { caution, critical };
-const Highlight = ({ children: children2, tone: tone2 }) => /* @__PURE__ */ jsx(Box, { component: "mark", className: [root$5, styleForTone[tone2]], children: children2 });
+const Highlight = ({ children: children2, tone: tone2 }) => /* @__PURE__ */ jsx(Box, { component: "mark", className: [root$4, styleForTone[tone2]], children: children2 });
 const formatRanges = (value, highlightRanges, tone2) => {
   if (highlightRanges && value) {
     let lastEnd = 0;
@@ -7951,7 +7960,7 @@ const Toggle = forwardRef(
         zIndex: 0,
         display: "flex",
         flexDirection: align === "left" ? void 0 : "rowReverse",
-        className: root$6,
+        className: root$5,
         ...buildDataAttributes({ data, validateRestProps: restProps }),
         children: [
           /* @__PURE__ */ jsx(
@@ -7968,7 +7977,7 @@ const Toggle = forwardRef(
               opacity: 0,
               className: [
                 realField$1,
-                realFieldPosition$1[size2],
+                realFieldPosition[size2],
                 fieldSize[size2]
               ],
               ref: forwardedRef

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

@@ -0,0 +1,30 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const cssUtils = require("@vanilla-extract/css-utils");
+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/MenuItemCheckbox/MenuItemCheckbox.css.ts?used", "braid-design-system");
+const checkboxFieldSize = styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.small;
+const menuItemCapHeight = css.createVar("menuItemCapHeight");
+const crop = css.createVar("crop");
+const checkboxSize = css.style([styles_lib_css_responsiveStyle_cjs.responsiveStyle({
+  mobile: {
+    vars: {
+      [menuItemCapHeight]: styles_lib_themes_vars_css_cjs.vars.textSize.standard.mobile.capHeight,
+      [crop]: cssUtils.calc(checkboxFieldSize).subtract(menuItemCapHeight).divide(2).negate().toString()
+    }
+  },
+  tablet: {
+    vars: {
+      [menuItemCapHeight]: styles_lib_themes_vars_css_cjs.vars.textSize.standard.tablet.capHeight
+    }
+  }
+}), {
+  height: checkboxFieldSize,
+  width: checkboxFieldSize,
+  marginTop: crop,
+  marginBottom: crop
+}], "checkboxSize");
+fileScope.endFileScope();
+exports.checkboxSize = checkboxSize;

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

@@ -0,0 +1,31 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { createVar, style } from "@vanilla-extract/css";
+import { calc } from "@vanilla-extract/css-utils";
+import { responsiveStyle } from "../../css/responsiveStyle.mjs";
+import { vars } from "../../themes/vars.css.mjs";
+setFileScope("src/lib/components/MenuItemCheckbox/MenuItemCheckbox.css.ts?used", "braid-design-system");
+const checkboxFieldSize = vars.inlineFieldSize.small;
+const menuItemCapHeight = createVar("menuItemCapHeight");
+const crop = createVar("crop");
+const checkboxSize = style([responsiveStyle({
+  mobile: {
+    vars: {
+      [menuItemCapHeight]: vars.textSize.standard.mobile.capHeight,
+      [crop]: calc(checkboxFieldSize).subtract(menuItemCapHeight).divide(2).negate().toString()
+    }
+  },
+  tablet: {
+    vars: {
+      [menuItemCapHeight]: vars.textSize.standard.tablet.capHeight
+    }
+  }
+}), {
+  height: checkboxFieldSize,
+  width: checkboxFieldSize,
+  marginTop: crop,
+  marginBottom: crop
+}], "checkboxSize");
+endFileScope();
+export {
+  checkboxSize
+};

package/dist/styles/lib/components/Textarea/Highlight/Highlight.css.cjs

@@ -5,20 +5,17 @@ const styles_lib_css_atoms_atoms_cjs = require("../../../css/atoms/atoms.cjs");
 const styles_lib_css_colorModeStyle_cjs = require("../../../css/colorModeStyle.cjs");
 const styles_lib_themes_vars_css_cjs = require("../../../themes/vars.css.cjs");
 fileScope.setFileScope("src/lib/components/Textarea/Highlight/Highlight.css.ts?used", "braid-design-system");
-const space = 2;
-const lineThickness = 2;
+const space = "2px";
 const root = css.style([styles_lib_css_atoms_atoms_cjs.atoms({
   borderRadius: "small"
 }), {
-  padding: space,
-  margin: -space,
+  padding: `0 ${space}`,
+  margin: `0 -${space}`,
   textDecoration: "underline",
   textDecorationStyle: "wavy",
   textDecorationSkipInk: "none",
-  textDecorationThickness: lineThickness,
-  textUnderlineOffset: 2,
-  paddingBottom: lineThickness / 2,
-  marginBottom: -(lineThickness / 2)
+  textDecorationThickness: 2,
+  textUnderlineOffset: 2
 }], "root");
 const critical = css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
   lightMode: {

package/dist/styles/lib/components/Textarea/Highlight/Highlight.css.mjs

@@ -4,20 +4,17 @@ import { atoms } from "../../../css/atoms/atoms.mjs";
 import { colorModeStyle } from "../../../css/colorModeStyle.mjs";
 import { vars } from "../../../themes/vars.css.mjs";
 setFileScope("src/lib/components/Textarea/Highlight/Highlight.css.ts?used", "braid-design-system");
-const space = 2;
-const lineThickness = 2;
+const space = "2px";
 const root = style([atoms({
   borderRadius: "small"
 }), {
-  padding: space,
-  margin: -space,
+  padding: `0 ${space}`,
+  margin: `0 -${space}`,
   textDecoration: "underline",
   textDecorationStyle: "wavy",
   textDecorationSkipInk: "none",
-  textDecorationThickness: lineThickness,
-  textUnderlineOffset: 2,
-  paddingBottom: lineThickness / 2,
-  marginBottom: -(lineThickness / 2)
+  textDecorationThickness: 2,
+  textUnderlineOffset: 2
 }], "root");
 const critical = style(colorModeStyle({
   lightMode: {

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

@@ -5,48 +5,48 @@ const cssUtils = require("@vanilla-extract/css-utils");
 const styles_lib_themes_vars_css_cjs = require("../../../themes/vars.css.cjs");
 const styles_lib_components_private_touchable_hitArea_cjs = require("../touchable/hitArea.cjs");
 const styles_lib_components_private_touchable_debugTouchable_cjs = require("../touchable/debugTouchable.cjs");
+const styles_lib_css_responsiveStyle_cjs = require("../../../css/responsiveStyle.cjs");
 fileScope.setFileScope("src/lib/components/private/InlineField/InlineField.css.ts?used", "braid-design-system");
 const sizes = {
   standard: "standard",
   small: "small"
 };
-const root = css.style({
-  ":hover": {
-    zIndex: 1
+const fieldSize = css.createVar("fieldSize");
+const labelCapHeight = css.createVar("labelCapHeight");
+const sizeVars = css.styleVariants(sizes, (size) => styles_lib_css_responsiveStyle_cjs.responsiveStyle({
+  mobile: {
+    vars: {
+      [fieldSize]: styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size],
+      [labelCapHeight]: styles_lib_themes_vars_css_cjs.vars.textSize[size].mobile.capHeight
+    }
+  },
+  tablet: {
+    vars: {
+      [labelCapHeight]: styles_lib_themes_vars_css_cjs.vars.textSize[size].tablet.capHeight
+    }
   }
-}, "root");
+}), "sizeVars");
+const hitAreaOffset = cssUtils.calc(styles_lib_components_private_touchable_hitArea_cjs.hitArea).subtract(fieldSize).divide(2).negate().toString();
 const realField = css.style([{
   width: styles_lib_components_private_touchable_hitArea_cjs.hitArea,
-  height: styles_lib_components_private_touchable_hitArea_cjs.hitArea
+  height: styles_lib_components_private_touchable_hitArea_cjs.hitArea,
+  top: hitAreaOffset,
+  left: hitAreaOffset
 }, styles_lib_components_private_touchable_debugTouchable_cjs.debugTouchable()], "realField");
-const realFieldPosition = css.styleVariants(sizes, (size) => {
-  const offset = cssUtils.calc(styles_lib_components_private_touchable_hitArea_cjs.hitArea).subtract(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size]).divide(2).negate().toString();
-  return {
-    top: offset,
-    left: offset
-  };
-}, "realFieldPosition");
-const fakeField = css.style({}, "fakeField");
-const fakeFieldSize = css.styleVariants(sizes, (size) => ({
-  height: styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size],
-  width: styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size]
-}), "fakeFieldSize");
-const badgeOffset = css.styleVariants(sizes, (size) => {
-  const offset = cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size]).subtract(styles_lib_themes_vars_css_cjs.vars.textSize.xsmall.mobile.lineHeight).divide(2).toString();
-  return {
-    paddingTop: offset,
-    paddingBottom: offset
-  };
-}, "badgeOffset");
-const labelOffset = css.styleVariants(sizes, (size) => ({
-  paddingTop: cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size]).subtract(styles_lib_themes_vars_css_cjs.vars.textSize[size].mobile.capHeight).divide(2).toString()
-}), "labelOffset");
+const fakeField = css.style({
+  height: fieldSize,
+  width: fieldSize
+}, "fakeField");
+const labelOffset = css.style({
+  paddingTop: cssUtils.calc(fieldSize).subtract(labelCapHeight).divide(2).toString()
+}, "labelOffset");
 const isMixed = css.style({}, "isMixed");
 const children = css.style({
   selectors: {
     [`${realField}:checked ~ * &,
       ${realField}${isMixed} ~ * &`]: {
-      display: "block"
+      display: "block",
+      zIndex: 1
     }
   }
 }, "children");
@@ -99,17 +99,14 @@ const radioScale = css.style({
 }, "radioScale");
 const radioIndicator = [indicator, radioScale];
 fileScope.endFileScope();
-exports.badgeOffset = badgeOffset;
 exports.checkboxIndicator = checkboxIndicator;
 exports.children = children;
 exports.fakeField = fakeField;
-exports.fakeFieldSize = fakeFieldSize;
 exports.focusOverlay = focusOverlay;
 exports.hoverOverlay = hoverOverlay;
 exports.isMixed = isMixed;
 exports.labelOffset = labelOffset;
 exports.radioIndicator = radioIndicator;
 exports.realField = realField;
-exports.realFieldPosition = realFieldPosition;
-exports.root = root;
 exports.selected = selected;
+exports.sizeVars = sizeVars;

package/dist/styles/lib/components/private/InlineField/InlineField.css.mjs

@@ -1,51 +1,51 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style, styleVariants } from "@vanilla-extract/css";
+import { createVar, styleVariants, style } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
 import { vars } from "../../../themes/vars.css.mjs";
 import { hitArea } from "../touchable/hitArea.mjs";
 import { debugTouchable } from "../touchable/debugTouchable.mjs";
+import { responsiveStyle } from "../../../css/responsiveStyle.mjs";
 setFileScope("src/lib/components/private/InlineField/InlineField.css.ts?used", "braid-design-system");
 const sizes = {
   standard: "standard",
   small: "small"
 };
-const root = style({
-  ":hover": {
-    zIndex: 1
+const fieldSize = createVar("fieldSize");
+const labelCapHeight = createVar("labelCapHeight");
+const sizeVars = styleVariants(sizes, (size) => responsiveStyle({
+  mobile: {
+    vars: {
+      [fieldSize]: vars.inlineFieldSize[size],
+      [labelCapHeight]: vars.textSize[size].mobile.capHeight
+    }
+  },
+  tablet: {
+    vars: {
+      [labelCapHeight]: vars.textSize[size].tablet.capHeight
+    }
   }
-}, "root");
+}), "sizeVars");
+const hitAreaOffset = calc(hitArea).subtract(fieldSize).divide(2).negate().toString();
 const realField = style([{
   width: hitArea,
-  height: hitArea
+  height: hitArea,
+  top: hitAreaOffset,
+  left: hitAreaOffset
 }, debugTouchable()], "realField");
-const realFieldPosition = styleVariants(sizes, (size) => {
-  const offset = calc(hitArea).subtract(vars.inlineFieldSize[size]).divide(2).negate().toString();
-  return {
-    top: offset,
-    left: offset
-  };
-}, "realFieldPosition");
-const fakeField = style({}, "fakeField");
-const fakeFieldSize = styleVariants(sizes, (size) => ({
-  height: vars.inlineFieldSize[size],
-  width: vars.inlineFieldSize[size]
-}), "fakeFieldSize");
-const badgeOffset = styleVariants(sizes, (size) => {
-  const offset = calc(vars.inlineFieldSize[size]).subtract(vars.textSize.xsmall.mobile.lineHeight).divide(2).toString();
-  return {
-    paddingTop: offset,
-    paddingBottom: offset
-  };
-}, "badgeOffset");
-const labelOffset = styleVariants(sizes, (size) => ({
-  paddingTop: calc(vars.inlineFieldSize[size]).subtract(vars.textSize[size].mobile.capHeight).divide(2).toString()
-}), "labelOffset");
+const fakeField = style({
+  height: fieldSize,
+  width: fieldSize
+}, "fakeField");
+const labelOffset = style({
+  paddingTop: calc(fieldSize).subtract(labelCapHeight).divide(2).toString()
+}, "labelOffset");
 const isMixed = style({}, "isMixed");
 const children = style({
   selectors: {
     [`${realField}:checked ~ * &,
       ${realField}${isMixed} ~ * &`]: {
-      display: "block"
+      display: "block",
+      zIndex: 1
     }
   }
 }, "children");
@@ -99,18 +99,15 @@ const radioScale = style({
 const radioIndicator = [indicator, radioScale];
 endFileScope();
 export {
-  badgeOffset,
   checkboxIndicator,
   children,
   fakeField,
-  fakeFieldSize,
   focusOverlay,
   hoverOverlay,
   isMixed,
   labelOffset,
   radioIndicator,
   realField,
-  realFieldPosition,
-  root,
-  selected
+  selected,
+  sizeVars
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "32.3.0",
+  "version": "32.3.1",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {