braid-design-system 32.16.0 → 32.16.2

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

@@ -1,82 +0,0 @@
-"use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const styles_lib_css_responsiveStyle_cjs = require("../../css/responsiveStyle.cjs");
-const styles_lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
-__vanilla_filescope__.setFileScope("src/lib/components/Loader/Loader.css.ts", "braid-design-system");
-const rootSize = css.styleVariants(styles_lib_themes_vars_css_cjs.vars.textSize, ({
-  mobile,
-  tablet
-}) => styles_lib_css_responsiveStyle_cjs.responsiveStyle({
-  mobile: {
-    height: mobile.capHeight
-  },
-  tablet: {
-    height: tablet.capHeight
-  }
-}), "rootSize");
-const size = css.styleVariants(styles_lib_themes_vars_css_cjs.vars.textSize, ({
-  mobile,
-  tablet
-}) => styles_lib_css_responsiveStyle_cjs.responsiveStyle({
-  mobile: {
-    height: mobile.fontSize
-  },
-  tablet: {
-    height: tablet.fontSize
-  }
-}), "size");
-const currentColor = css.style({
-  fill: "currentcolor"
-}, "currentColor");
-const bounce = css.keyframes({
-  "33%": {
-    transform: `translateY(-1.4em)`
-  },
-  "66%": {
-    transform: `translateY(1.4em)`
-  }
-}, "bounce");
-const bounceAnimation = css.style({
-  animationName: bounce,
-  animationFillMode: "both",
-  animationIterationCount: "infinite",
-  animationTimingFunction: "ease-in-out",
-  animationDuration: "0.6s"
-}, "bounceAnimation");
-const animationDelayInMs = 70;
-const circle = css.style([bounceAnimation, css.style({
-  transform: `translateY(1.4em)`,
-  selectors: {
-    [`&:nth-child(1)`]: {
-      animationDelay: `${animationDelayInMs * 2}ms`
-    },
-    [`&:nth-child(2)`]: {
-      animationDelay: `${animationDelayInMs}ms`
-    }
-  }
-}, "circle")], "circle");
-const animationDelayValueInMs = 800;
-const fade = css.keyframes({
-  from: {
-    opacity: 0
-  },
-  to: {
-    opacity: 1
-  }
-}, "fade");
-const delay = css.style({
-  opacity: 0,
-  animationName: fade,
-  animationIterationCount: "1",
-  animationFillMode: "forwards",
-  animationTimingFunction: "ease-in",
-  animationDuration: "0.25s",
-  animationDelay: `${animationDelayValueInMs}ms`
-}, "delay");
-__vanilla_filescope__.endFileScope();
-exports.circle = circle;
-exports.currentColor = currentColor;
-exports.delay = delay;
-exports.rootSize = rootSize;
-exports.size = size;

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

@@ -1,49 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Box } from "../Box/Box.mjs";
-import { buildDataAttributes } from "../Accordion/Accordion.mjs";
-import { atoms } from "../../css/atoms/atoms.mjs";
-import { rootSize, delay, size, currentColor, circle } from "./Loader.css.mjs";
-import { tone } from "../../css/typography.css.mjs";
-const Loader = ({
-  size: size$1 = "standard",
-  "aria-label": ariaLabel = "Loading",
-  delayVisibility = false,
-  data,
-  ...restProps
-}) => /* @__PURE__ */ jsx(
-  Box,
-  {
-    display: "flex",
-    alignItems: "center",
-    className: [
-      rootSize[size$1],
-      delayVisibility ? delay : void 0
-    ],
-    "aria-label": ariaLabel,
-    role: "alert",
-    "aria-live": "assertive",
-    ...buildDataAttributes({ data, validateRestProps: restProps }),
-    children: /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        className: [
-          atoms({ reset: "svg" }),
-          size[size$1],
-          currentColor,
-          tone.neutral
-        ].join(" "),
-        viewBox: "0 0 302 134",
-        "aria-hidden": true,
-        children: [
-          /* @__PURE__ */ jsx("circle", { className: circle, cy: "67", cx: "40", r: "40" }),
-          /* @__PURE__ */ jsx("circle", { className: circle, cy: "67", cx: "150", r: "40" }),
-          /* @__PURE__ */ jsx("circle", { className: circle, cy: "67", cx: "260", r: "40" })
-        ]
-      }
-    )
-  }
-);
-export {
-  Loader
-};

package/dist/styles/lib/components/MenuItem/useMenuItem.cjs

@@ -1,210 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const assert = require("assert");
-const React = require("react");
-const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
-const styles_lib_components_Accordion_AccordionItem_cjs = require("../Accordion/AccordionItem.cjs");
-const styles_lib_css_typography_css_cjs = require("../../css/typography.css.cjs");
-const styles_lib_components_Autosuggest_Autosuggest_cjs = require("../Autosuggest/Autosuggest.cjs");
-const styles_lib_components_Accordion_Accordion_cjs = require("../Accordion/Accordion.cjs");
-const styles_lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
-const styles_lib_hooks_useIcon_index_cjs = require("../../hooks/useIcon/index.cjs");
-const styles_lib_components_MenuItem_useMenuItem_css_cjs = require("./useMenuItem.css.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
-const MenuRendererContext = React.createContext(
-  null
-);
-const actionTypes = {
-  MENU_TRIGGER_UP: 0,
-  MENU_ITEM_UP: 1,
-  MENU_TRIGGER_DOWN: 2,
-  MENU_ITEM_DOWN: 3,
-  MENU_ITEM_ESCAPE: 4,
-  MENU_ITEM_TAB: 5,
-  MENU_ITEM_ENTER: 6,
-  MENU_ITEM_SPACE: 7,
-  MENU_ITEM_CLICK: 8,
-  MENU_ITEM_HOVER: 9,
-  MENU_TRIGGER_ENTER: 10,
-  MENU_TRIGGER_SPACE: 11,
-  MENU_TRIGGER_CLICK: 12,
-  MENU_TRIGGER_TAB: 13,
-  MENU_TRIGGER_ESCAPE: 14,
-  BACKDROP_CLICK: 15
-};
-const MenuRendererItemContext = React.createContext(null);
-const {
-  MENU_ITEM_UP,
-  MENU_ITEM_DOWN,
-  MENU_ITEM_ESCAPE,
-  MENU_ITEM_TAB,
-  MENU_ITEM_ENTER,
-  MENU_ITEM_SPACE,
-  MENU_ITEM_CLICK,
-  MENU_ITEM_HOVER
-} = actionTypes;
-const menuItemChildrenSize = "standard";
-const menuItemPaddingSize = "small";
-function useMenuItem({
-  displayName = "MenuItem",
-  formElement = false,
-  tone,
-  onClick,
-  data,
-  id,
-  ...restProps
-}) {
-  const menuRendererItemContext = React.useContext(MenuRendererItemContext);
-  assert__default.default(
-    menuRendererItemContext !== null,
-    `${displayName} must be rendered as an immediate child of a menu. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/MenuItem`
-  );
-  if (menuRendererItemContext === null) {
-    throw new Error(`${displayName} element rendered outside menu context`);
-  }
-  const { isHighlighted, index, dispatch, focusTrigger } = menuRendererItemContext;
-  const menuItemRef = React.useRef(null);
-  React.useEffect(() => {
-    var _a;
-    if (isHighlighted) {
-      (_a = menuItemRef.current) == null ? void 0 : _a.focus();
-    }
-  }, [isHighlighted]);
-  const onKeyDown = (event) => {
-    const targetKey = styles_lib_components_Autosuggest_Autosuggest_cjs.normalizeKey(event);
-    if (targetKey === "Tab") {
-      dispatch({ type: MENU_ITEM_TAB });
-    }
-    const isArrowPress = targetKey.indexOf("Arrow") === 0;
-    const isActionKeyPress = targetKey === "Enter" || targetKey === " ";
-    if (isArrowPress || isActionKeyPress) {
-      event.preventDefault();
-    }
-  };
-  const onKeyUp = (event) => {
-    var _a;
-    const targetKey = styles_lib_components_Autosuggest_Autosuggest_cjs.normalizeKey(event);
-    const closeActionKeys = ["Enter", " ", "Escape"];
-    const action = {
-      ArrowDown: { type: MENU_ITEM_DOWN },
-      ArrowUp: { type: MENU_ITEM_UP },
-      Enter: { type: MENU_ITEM_ENTER, formElement, index, id },
-      " ": { type: MENU_ITEM_SPACE, formElement, index, id },
-      Escape: { type: MENU_ITEM_ESCAPE }
-    };
-    if (action[targetKey]) {
-      dispatch(action[targetKey]);
-    }
-    if (targetKey === "Enter" || targetKey === " ") {
-      (_a = menuItemRef.current) == null ? void 0 : _a.click();
-    }
-    if (!formElement && closeActionKeys.indexOf(targetKey) > -1 || formElement && targetKey === "Escape") {
-      focusTrigger();
-    }
-  };
-  const hoverBackground = tone === "critical" ? "criticalLight" : "formAccentSoft";
-  return {
-    MenuItemChildren,
-    menuItemProps: {
-      role: "menuitem",
-      tabIndex: -1,
-      ref: menuItemRef,
-      id,
-      onKeyUp,
-      onKeyDown,
-      onMouseEnter: () => dispatch({ type: MENU_ITEM_HOVER, value: index }),
-      onClick: (event) => {
-        event.stopPropagation();
-        dispatch({ type: MENU_ITEM_CLICK, formElement, index, id });
-        if (typeof onClick === "function") {
-          onClick();
-        }
-      },
-      background: isHighlighted ? hoverBackground : void 0,
-      className: [
-        styles_lib_components_MenuItem_useMenuItem_css_cjs.menuItem,
-        styles_lib_css_typography_css_cjs.touchableText[menuItemChildrenSize],
-        styles_lib_css_atoms_atoms_cjs.atoms({
-          display: "block",
-          width: "full",
-          paddingX: menuItemPaddingSize,
-          cursor: "pointer",
-          textAlign: "left",
-          outline: "none"
-        })
-      ],
-      ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps })
-    }
-  };
-}
-function MenuItemChildren({
-  icon,
-  tone,
-  children,
-  badge,
-  formElement = false
-}) {
-  const menuRendererContext = React.useContext(MenuRendererContext);
-  assert__default.default(
-    menuRendererContext !== null,
-    `MenuItem must be rendered as an immediate child of a menu. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/MenuItem`
-  );
-  assert__default.default(
-    // @ts-expect-error
-    !badge || badge.type.__isBadge__,
-    `MenuItem badge prop can only be an instance of Badge. e.g. <MenuItem badge={<Badge>New</Badge>}>`
-  );
-  let leftSlot = null;
-  if (!formElement) {
-    if (icon) {
-      leftSlot = /* @__PURE__ */ jsxRuntime.jsx(
-        styles_lib_components_Accordion_AccordionItem_cjs.Text,
-        {
-          size: menuItemChildrenSize,
-          baseline: false,
-          tone: tone === "critical" ? tone : void 0,
-          children: icon
-        }
-      );
-    } else if (menuRendererContext.reserveIconSpace) {
-      leftSlot = /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { component: "span", display: "block", className: styles_lib_hooks_useIcon_index_cjs.iconSize() });
-    }
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Box_Box_cjs.Box, { component: "span", display: "flex", alignItems: "center", minWidth: 0, children: [
-    leftSlot ? /* @__PURE__ */ jsxRuntime.jsx(
-      styles_lib_components_Box_Box_cjs.Box,
-      {
-        component: "span",
-        paddingRight: menuItemPaddingSize,
-        flexShrink: 0,
-        minWidth: 0,
-        children: leftSlot
-      }
-    ) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { component: "span", minWidth: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
-      styles_lib_components_Accordion_AccordionItem_cjs.Text,
-      {
-        size: menuItemChildrenSize,
-        baseline: false,
-        tone: tone === "critical" ? tone : void 0,
-        maxLines: 1,
-        children
-      }
-    ) }),
-    badge ? /* @__PURE__ */ jsxRuntime.jsx(
-      styles_lib_components_Box_Box_cjs.Box,
-      {
-        component: "span",
-        paddingLeft: menuItemPaddingSize,
-        flexShrink: 0,
-        minWidth: 0,
-        children: badge
-      }
-    ) : null
-  ] });
-}
-exports.MenuRendererContext = MenuRendererContext;
-exports.MenuRendererItemContext = MenuRendererItemContext;
-exports.actionTypes = actionTypes;
-exports.useMenuItem = useMenuItem;

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

@@ -1,209 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import assert from "assert";
-import { createContext, useContext, useRef, useEffect } from "react";
-import { Box } from "../Box/Box.mjs";
-import { Text } from "../Accordion/AccordionItem.mjs";
-import { touchableText } from "../../css/typography.css.mjs";
-import { normalizeKey } from "../Autosuggest/Autosuggest.mjs";
-import { buildDataAttributes } from "../Accordion/Accordion.mjs";
-import { atoms } from "../../css/atoms/atoms.mjs";
-import { iconSize } from "../../hooks/useIcon/index.mjs";
-import { menuItem } from "./useMenuItem.css.mjs";
-const MenuRendererContext = createContext(
-  null
-);
-const actionTypes = {
-  MENU_TRIGGER_UP: 0,
-  MENU_ITEM_UP: 1,
-  MENU_TRIGGER_DOWN: 2,
-  MENU_ITEM_DOWN: 3,
-  MENU_ITEM_ESCAPE: 4,
-  MENU_ITEM_TAB: 5,
-  MENU_ITEM_ENTER: 6,
-  MENU_ITEM_SPACE: 7,
-  MENU_ITEM_CLICK: 8,
-  MENU_ITEM_HOVER: 9,
-  MENU_TRIGGER_ENTER: 10,
-  MENU_TRIGGER_SPACE: 11,
-  MENU_TRIGGER_CLICK: 12,
-  MENU_TRIGGER_TAB: 13,
-  MENU_TRIGGER_ESCAPE: 14,
-  BACKDROP_CLICK: 15
-};
-const MenuRendererItemContext = createContext(null);
-const {
-  MENU_ITEM_UP,
-  MENU_ITEM_DOWN,
-  MENU_ITEM_ESCAPE,
-  MENU_ITEM_TAB,
-  MENU_ITEM_ENTER,
-  MENU_ITEM_SPACE,
-  MENU_ITEM_CLICK,
-  MENU_ITEM_HOVER
-} = actionTypes;
-const menuItemChildrenSize = "standard";
-const menuItemPaddingSize = "small";
-function useMenuItem({
-  displayName = "MenuItem",
-  formElement = false,
-  tone,
-  onClick,
-  data,
-  id,
-  ...restProps
-}) {
-  const menuRendererItemContext = useContext(MenuRendererItemContext);
-  assert(
-    menuRendererItemContext !== null,
-    `${displayName} must be rendered as an immediate child of a menu. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/MenuItem`
-  );
-  if (menuRendererItemContext === null) {
-    throw new Error(`${displayName} element rendered outside menu context`);
-  }
-  const { isHighlighted, index, dispatch, focusTrigger } = menuRendererItemContext;
-  const menuItemRef = useRef(null);
-  useEffect(() => {
-    var _a;
-    if (isHighlighted) {
-      (_a = menuItemRef.current) == null ? void 0 : _a.focus();
-    }
-  }, [isHighlighted]);
-  const onKeyDown = (event) => {
-    const targetKey = normalizeKey(event);
-    if (targetKey === "Tab") {
-      dispatch({ type: MENU_ITEM_TAB });
-    }
-    const isArrowPress = targetKey.indexOf("Arrow") === 0;
-    const isActionKeyPress = targetKey === "Enter" || targetKey === " ";
-    if (isArrowPress || isActionKeyPress) {
-      event.preventDefault();
-    }
-  };
-  const onKeyUp = (event) => {
-    var _a;
-    const targetKey = normalizeKey(event);
-    const closeActionKeys = ["Enter", " ", "Escape"];
-    const action = {
-      ArrowDown: { type: MENU_ITEM_DOWN },
-      ArrowUp: { type: MENU_ITEM_UP },
-      Enter: { type: MENU_ITEM_ENTER, formElement, index, id },
-      " ": { type: MENU_ITEM_SPACE, formElement, index, id },
-      Escape: { type: MENU_ITEM_ESCAPE }
-    };
-    if (action[targetKey]) {
-      dispatch(action[targetKey]);
-    }
-    if (targetKey === "Enter" || targetKey === " ") {
-      (_a = menuItemRef.current) == null ? void 0 : _a.click();
-    }
-    if (!formElement && closeActionKeys.indexOf(targetKey) > -1 || formElement && targetKey === "Escape") {
-      focusTrigger();
-    }
-  };
-  const hoverBackground = tone === "critical" ? "criticalLight" : "formAccentSoft";
-  return {
-    MenuItemChildren,
-    menuItemProps: {
-      role: "menuitem",
-      tabIndex: -1,
-      ref: menuItemRef,
-      id,
-      onKeyUp,
-      onKeyDown,
-      onMouseEnter: () => dispatch({ type: MENU_ITEM_HOVER, value: index }),
-      onClick: (event) => {
-        event.stopPropagation();
-        dispatch({ type: MENU_ITEM_CLICK, formElement, index, id });
-        if (typeof onClick === "function") {
-          onClick();
-        }
-      },
-      background: isHighlighted ? hoverBackground : void 0,
-      className: [
-        menuItem,
-        touchableText[menuItemChildrenSize],
-        atoms({
-          display: "block",
-          width: "full",
-          paddingX: menuItemPaddingSize,
-          cursor: "pointer",
-          textAlign: "left",
-          outline: "none"
-        })
-      ],
-      ...buildDataAttributes({ data, validateRestProps: restProps })
-    }
-  };
-}
-function MenuItemChildren({
-  icon,
-  tone,
-  children,
-  badge,
-  formElement = false
-}) {
-  const menuRendererContext = useContext(MenuRendererContext);
-  assert(
-    menuRendererContext !== null,
-    `MenuItem must be rendered as an immediate child of a menu. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/MenuItem`
-  );
-  assert(
-    // @ts-expect-error
-    !badge || badge.type.__isBadge__,
-    `MenuItem badge prop can only be an instance of Badge. e.g. <MenuItem badge={<Badge>New</Badge>}>`
-  );
-  let leftSlot = null;
-  if (!formElement) {
-    if (icon) {
-      leftSlot = /* @__PURE__ */ jsx(
-        Text,
-        {
-          size: menuItemChildrenSize,
-          baseline: false,
-          tone: tone === "critical" ? tone : void 0,
-          children: icon
-        }
-      );
-    } else if (menuRendererContext.reserveIconSpace) {
-      leftSlot = /* @__PURE__ */ jsx(Box, { component: "span", display: "block", className: iconSize() });
-    }
-  }
-  return /* @__PURE__ */ jsxs(Box, { component: "span", display: "flex", alignItems: "center", minWidth: 0, children: [
-    leftSlot ? /* @__PURE__ */ jsx(
-      Box,
-      {
-        component: "span",
-        paddingRight: menuItemPaddingSize,
-        flexShrink: 0,
-        minWidth: 0,
-        children: leftSlot
-      }
-    ) : null,
-    /* @__PURE__ */ jsx(Box, { component: "span", minWidth: 0, children: /* @__PURE__ */ jsx(
-      Text,
-      {
-        size: menuItemChildrenSize,
-        baseline: false,
-        tone: tone === "critical" ? tone : void 0,
-        maxLines: 1,
-        children
-      }
-    ) }),
-    badge ? /* @__PURE__ */ jsx(
-      Box,
-      {
-        component: "span",
-        paddingLeft: menuItemPaddingSize,
-        flexShrink: 0,
-        minWidth: 0,
-        children: badge
-      }
-    ) : null
-  ] });
-}
-export {
-  MenuRendererContext,
-  MenuRendererItemContext,
-  actionTypes,
-  useMenuItem
-};

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

@@ -1,73 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
-const styles_lib_components_Accordion_AccordionItem_cjs = require("../Accordion/AccordionItem.cjs");
-const styles_lib_components_MenuItem_useMenuItem_cjs = require("../MenuItem/useMenuItem.cjs");
-const styles_lib_components_MenuItemCheckbox_MenuItemCheckbox_css_cjs = require("./MenuItemCheckbox.css.cjs");
-const MenuItemCheckbox = ({
-  children,
-  onChange,
-  checked,
-  data,
-  badge,
-  id
-}) => {
-  const { menuItemProps, MenuItemChildren } = styles_lib_components_MenuItem_useMenuItem_cjs.useMenuItem({
-    onClick: () => onChange(!checked),
-    formElement: true,
-    data,
-    id
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    styles_lib_components_Box_Box_cjs.Box,
-    {
-      ...menuItemProps,
-      "aria-checked": checked,
-      role: "menuitemcheckbox",
-      component: "button",
-      type: "button",
-      display: "flex",
-      alignItems: "center",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          styles_lib_components_Box_Box_cjs.Box,
-          {
-            component: "span",
-            borderRadius: "standard",
-            boxShadow: "borderField",
-            position: "relative",
-            background: { lightMode: "surface" },
-            marginRight: "small",
-            flexShrink: 0,
-            className: styles_lib_components_MenuItemCheckbox_MenuItemCheckbox_css_cjs.checkboxSize,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              styles_lib_components_Box_Box_cjs.Box,
-              {
-                component: "span",
-                position: "absolute",
-                inset: 0,
-                background: "formAccent",
-                borderRadius: "standard",
-                transition: "fast",
-                opacity: checked ? void 0 : 0,
-                children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.IconTick, { size: "fill" })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          MenuItemChildren,
-          {
-            tone: void 0,
-            icon: void 0,
-            badge,
-            formElement: true,
-            children
-          }
-        )
-      ]
-    }
-  );
-};
-MenuItemCheckbox.__isMenuItem__ = true;
-exports.MenuItemCheckbox = MenuItemCheckbox;

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

@@ -1,30 +0,0 @@
-"use strict";
-const __vanilla_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");
-__vanilla_filescope__.setFileScope("src/lib/components/MenuItemCheckbox/MenuItemCheckbox.css.ts", "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");
-__vanilla_filescope__.endFileScope();
-exports.checkboxSize = checkboxSize;