braid-design-system 32.16.0 → 32.16.2

package/dist/lib/components/useToast/useTimeout.cjs

@@ -0,0 +1,28 @@
+"use strict";
+const React = require("react");
+const useTimeout = ({ onTimeout, duration }) => {
+  const [activated, setActivated] = React.useState(true);
+  const timeoutRef = React.useRef();
+  const stopTimeout = React.useCallback(() => {
+    window.clearTimeout(timeoutRef.current);
+    setActivated(false);
+  }, []);
+  React.useEffect(() => {
+    if (activated) {
+      timeoutRef.current = window.setTimeout(() => {
+        onTimeout();
+      }, duration);
+      return () => {
+        stopTimeout();
+      };
+    }
+  }, [onTimeout, activated, duration, stopTimeout]);
+  const startTimeout = React.useCallback(() => {
+    setActivated(true);
+  }, []);
+  return {
+    stopTimeout,
+    startTimeout
+  };
+};
+exports.useTimeout = useTimeout;

package/dist/lib/components/useToast/useTimeout.mjs

@@ -0,0 +1,29 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+const useTimeout = ({ onTimeout, duration }) => {
+  const [activated, setActivated] = useState(true);
+  const timeoutRef = useRef();
+  const stopTimeout = useCallback(() => {
+    window.clearTimeout(timeoutRef.current);
+    setActivated(false);
+  }, []);
+  useEffect(() => {
+    if (activated) {
+      timeoutRef.current = window.setTimeout(() => {
+        onTimeout();
+      }, duration);
+      return () => {
+        stopTimeout();
+      };
+    }
+  }, [onTimeout, activated, duration, stopTimeout]);
+  const startTimeout = useCallback(() => {
+    setActivated(true);
+  }, []);
+  return {
+    stopTimeout,
+    startTimeout
+  };
+};
+export {
+  useTimeout
+};

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

@@ -0,0 +1,129 @@
+"use strict";
+const lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
+const sizes = {
+  full: "100%",
+  touchable: lib_themes_vars_css_cjs.vars.touchableSize
+};
+const space = {
+  ...lib_themes_vars_css_cjs.vars.space,
+  none: 0
+};
+const boxShadow = {
+  ...lib_themes_vars_css_cjs.vars.shadow,
+  borderBrandAccent: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.standard} ${lib_themes_vars_css_cjs.vars.borderColor.brandAccent}`,
+  borderBrandAccentLight: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.standard} ${lib_themes_vars_css_cjs.vars.borderColor.brandAccentLight}`,
+  borderBrandAccentLarge: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.large} ${lib_themes_vars_css_cjs.vars.borderColor.brandAccent}`,
+  borderBrandAccentLightLarge: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.large} ${lib_themes_vars_css_cjs.vars.borderColor.brandAccentLight}`,
+  borderCaution: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.standard} ${lib_themes_vars_css_cjs.vars.borderColor.caution}`,
+  borderCautionLight: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.standard} ${lib_themes_vars_css_cjs.vars.borderColor.cautionLight}`,
+  borderCritical: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.standard} ${lib_themes_vars_css_cjs.vars.borderColor.critical}`,
+  borderCriticalLarge: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.large} ${lib_themes_vars_css_cjs.vars.borderColor.critical}`,
+  borderCriticalLight: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.standard} ${lib_themes_vars_css_cjs.vars.borderColor.criticalLight}`,
+  borderCriticalLightLarge: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.large} ${lib_themes_vars_css_cjs.vars.borderColor.criticalLight}`,
+  borderField: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.standard} ${lib_themes_vars_css_cjs.vars.borderColor.field}`,
+  borderFormAccent: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.standard} ${lib_themes_vars_css_cjs.vars.borderColor.formAccent}`,
+  borderFormAccentLarge: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.large} ${lib_themes_vars_css_cjs.vars.borderColor.formAccent}`,
+  borderFormAccentLight: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.standard} ${lib_themes_vars_css_cjs.vars.borderColor.formAccentLight}`,
+  borderFormAccentLightLarge: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.large} ${lib_themes_vars_css_cjs.vars.borderColor.formAccentLight}`,
+  borderInfo: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.standard} ${lib_themes_vars_css_cjs.vars.borderColor.info}`,
+  borderInfoLight: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.standard} ${lib_themes_vars_css_cjs.vars.borderColor.infoLight}`,
+  borderNeutral: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.standard} ${lib_themes_vars_css_cjs.vars.borderColor.neutral}`,
+  borderNeutralLarge: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.large} ${lib_themes_vars_css_cjs.vars.borderColor.neutral}`,
+  borderNeutralInverted: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.standard} ${lib_themes_vars_css_cjs.vars.borderColor.neutralInverted}`,
+  borderNeutralInvertedLarge: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.large} ${lib_themes_vars_css_cjs.vars.borderColor.neutralInverted}`,
+  borderNeutralLight: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.standard} ${lib_themes_vars_css_cjs.vars.borderColor.neutralLight}`,
+  borderPositive: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.standard} ${lib_themes_vars_css_cjs.vars.borderColor.positive}`,
+  borderPositiveLight: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.standard} ${lib_themes_vars_css_cjs.vars.borderColor.positiveLight}`,
+  borderPromote: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.standard} ${lib_themes_vars_css_cjs.vars.borderColor.promote}`,
+  borderPromoteLight: `inset 0 0 0 ${lib_themes_vars_css_cjs.vars.borderWidth.standard} ${lib_themes_vars_css_cjs.vars.borderColor.promoteLight}`,
+  outlineFocus: `0 0 0 ${lib_themes_vars_css_cjs.vars.focusRingSize} ${lib_themes_vars_css_cjs.vars.borderColor.focus}`
+};
+const pseudoProperties = {
+  transform: lib_themes_vars_css_cjs.vars.transform
+};
+const unresponsiveProperties = {
+  overflow: ["hidden", "scroll", "visible", "auto"],
+  userSelect: ["none"],
+  outline: ["none"],
+  opacity: [0],
+  zIndex: {
+    0: 0,
+    1: 1,
+    2: 2,
+    dropdownBackdrop: 90,
+    dropdown: 100,
+    sticky: 200,
+    modalBackdrop: 290,
+    modal: 300,
+    notification: 400
+  },
+  cursor: ["default", "pointer"],
+  pointerEvents: ["none"],
+  top: [0],
+  bottom: [0],
+  left: [0],
+  right: [0],
+  height: sizes,
+  width: sizes,
+  minWidth: {
+    0: "0%"
+  },
+  maxWidth: lib_themes_vars_css_cjs.vars.contentWidth,
+  transition: lib_themes_vars_css_cjs.vars.transition
+};
+const colorProperties = {
+  background: lib_themes_vars_css_cjs.vars.backgroundColor,
+  boxShadow
+};
+const responsiveProperties = {
+  display: {
+    none: "none",
+    block: "block",
+    inline: "inline",
+    inlineBlock: "inline-block",
+    flex: "flex"
+  },
+  position: ["relative", "absolute", "fixed"],
+  borderRadius: {
+    none: "0px",
+    full: "9999px",
+    ...lib_themes_vars_css_cjs.vars.borderRadius
+  },
+  paddingTop: space,
+  paddingBottom: space,
+  paddingRight: space,
+  paddingLeft: space,
+  marginTop: space,
+  marginBottom: space,
+  marginRight: space,
+  marginLeft: space,
+  alignItems: {
+    flexStart: "flex-start",
+    center: "center",
+    flexEnd: "flex-end"
+  },
+  justifyContent: {
+    flexStart: "flex-start",
+    center: "center",
+    flexEnd: "flex-end",
+    spaceBetween: "space-between"
+  },
+  flexDirection: {
+    row: "row",
+    rowReverse: "row-reverse",
+    column: "column",
+    columnReverse: "column-reverse"
+  },
+  flexWrap: {
+    wrap: "wrap",
+    nowrap: "nowrap"
+  },
+  flexShrink: [0],
+  flexGrow: [0, 1],
+  textAlign: ["left", "center", "right"]
+};
+exports.colorProperties = colorProperties;
+exports.pseudoProperties = pseudoProperties;
+exports.responsiveProperties = responsiveProperties;
+exports.space = space;
+exports.unresponsiveProperties = unresponsiveProperties;

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

@@ -0,0 +1,12 @@
+"use strict";
+const lib_css_reset_reset_css_cjs = require("../reset/reset.css.cjs");
+const lib_css_atoms_sprinkles_css_cjs = require("./sprinkles.css.cjs");
+const atoms = ({ reset, ...rest }) => {
+  if (!reset) {
+    return lib_css_atoms_sprinkles_css_cjs.sprinkles(rest);
+  }
+  const elementReset = lib_css_reset_reset_css_cjs.element[reset];
+  const sprinklesClasses = lib_css_atoms_sprinkles_css_cjs.sprinkles(rest);
+  return `${lib_css_reset_reset_css_cjs.base}${elementReset ? ` ${elementReset}` : ""}${sprinklesClasses ? ` ${sprinklesClasses}` : ""}`;
+};
+exports.atoms = atoms;

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

@@ -0,0 +1,75 @@
+"use strict";
+const __vanilla_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");
+const unresponsiveAtomicProperties = sprinkles$1.defineProperties({
+  properties: lib_css_atoms_atomicProperties_cjs.unresponsiveProperties,
+  shorthands: {
+    inset: ["top", "bottom", "left", "right"]
+  }
+});
+const pseudoAtomicProperties = sprinkles$1.defineProperties({
+  defaultCondition: false,
+  conditions: {
+    active: {
+      selector: "&:active"
+    }
+  },
+  properties: lib_css_atoms_atomicProperties_cjs.pseudoProperties
+});
+const darkMode = css.style({}, "darkMode");
+const colorModeSelectors = {
+  light: `html:not(${darkMode}) &`,
+  dark: `html${darkMode} &`
+};
+const colorAtomicProperties = sprinkles$1.defineProperties({
+  defaultCondition: "lightMode",
+  conditions: {
+    lightMode: {
+      selector: colorModeSelectors.light
+    },
+    darkMode: {
+      selector: colorModeSelectors.dark
+    }
+  },
+  properties: lib_css_atoms_atomicProperties_cjs.colorProperties
+});
+const responsiveAtomicProperties = sprinkles$1.defineProperties({
+  defaultCondition: "mobile",
+  conditions: {
+    mobile: {},
+    tablet: {
+      "@media": `screen and (min-width: ${lib_css_breakpoints_cjs.breakpoints.tablet}px)`
+    },
+    desktop: {
+      "@media": `screen and (min-width: ${lib_css_breakpoints_cjs.breakpoints.desktop}px)`
+    },
+    wide: {
+      "@media": `screen and (min-width: ${lib_css_breakpoints_cjs.breakpoints.wide}px)`
+    }
+  },
+  responsiveArray: lib_css_breakpoints_cjs.breakpointNames,
+  properties: lib_css_atoms_atomicProperties_cjs.responsiveProperties,
+  shorthands: {
+    padding: ["paddingBottom", "paddingTop", "paddingLeft", "paddingRight"],
+    paddingY: ["paddingTop", "paddingBottom"],
+    paddingX: ["paddingLeft", "paddingRight"],
+    margin: ["marginBottom", "marginTop", "marginLeft", "marginRight"],
+    marginY: ["marginTop", "marginBottom"],
+    marginX: ["marginLeft", "marginRight"]
+  }
+});
+const sprinkles = sprinkles$1.createSprinkles(unresponsiveAtomicProperties, responsiveAtomicProperties, pseudoAtomicProperties, colorAtomicProperties);
+const normalizeResponsiveValue = sprinkles$1.createNormalizeValueFn(responsiveAtomicProperties);
+const mapResponsiveValue = sprinkles$1.createMapValueFn(responsiveAtomicProperties);
+const mapColorModeValue = sprinkles$1.createMapValueFn(colorAtomicProperties);
+__vanilla_filescope__.endFileScope();
+exports.colorModeSelectors = colorModeSelectors;
+exports.darkMode = darkMode;
+exports.mapColorModeValue = mapColorModeValue;
+exports.mapResponsiveValue = mapResponsiveValue;
+exports.normalizeResponsiveValue = normalizeResponsiveValue;
+exports.sprinkles = sprinkles;

package/dist/lib/css/colorModeStyle.cjs

@@ -0,0 +1,17 @@
+"use strict";
+const lib_css_atoms_sprinkles_css_cjs = require("./atoms/sprinkles.css.cjs");
+const makeSelector = (mode, styles) => !styles || Object.keys(styles).length === 0 ? {} : {
+  [lib_css_atoms_sprinkles_css_cjs.colorModeSelectors[mode]]: styles
+};
+const colorModeStyle = ({
+  lightMode,
+  darkMode
+}) => ({
+  ...lightMode || darkMode ? {
+    selectors: {
+      ...makeSelector("light", lightMode),
+      ...makeSelector("dark", darkMode)
+    }
+  } : {}
+});
+exports.colorModeStyle = colorModeStyle;

package/dist/lib/css/globalTypographyStyles.cjs

@@ -0,0 +1,41 @@
+"use strict";
+const lib_themes_vars_css_cjs = require("../themes/vars.css.cjs");
+const lib_css_responsiveStyle_cjs = require("./responsiveStyle.cjs");
+const globalTextStyle = ({
+  weight = "regular",
+  size = "standard"
+} = {}) => ({
+  fontFamily: lib_themes_vars_css_cjs.vars.fontFamily,
+  fontWeight: lib_themes_vars_css_cjs.vars.textWeight[weight],
+  color: lib_themes_vars_css_cjs.vars.foregroundColor.neutral,
+  ...lib_css_responsiveStyle_cjs.responsiveStyle({
+    mobile: {
+      fontSize: lib_themes_vars_css_cjs.vars.textSize[size].mobile.fontSize,
+      lineHeight: lib_themes_vars_css_cjs.vars.textSize[size].mobile.lineHeight
+    },
+    tablet: {
+      fontSize: lib_themes_vars_css_cjs.vars.textSize[size].tablet.fontSize,
+      lineHeight: lib_themes_vars_css_cjs.vars.textSize[size].tablet.lineHeight
+    }
+  })
+});
+const globalHeadingStyle = ({
+  weight = "regular",
+  level
+}) => ({
+  fontFamily: lib_themes_vars_css_cjs.vars.fontFamily,
+  fontWeight: lib_themes_vars_css_cjs.vars.headingWeight[weight],
+  color: lib_themes_vars_css_cjs.vars.foregroundColor.neutral,
+  ...lib_css_responsiveStyle_cjs.responsiveStyle({
+    mobile: {
+      fontSize: lib_themes_vars_css_cjs.vars.headingLevel[level].mobile.fontSize,
+      lineHeight: lib_themes_vars_css_cjs.vars.headingLevel[level].mobile.lineHeight
+    },
+    tablet: {
+      fontSize: lib_themes_vars_css_cjs.vars.headingLevel[level].tablet.fontSize,
+      lineHeight: lib_themes_vars_css_cjs.vars.headingLevel[level].tablet.lineHeight
+    }
+  })
+});
+exports.globalHeadingStyle = globalHeadingStyle;
+exports.globalTextStyle = globalTextStyle;

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

@@ -0,0 +1,19 @@
+"use strict";
+const __vanilla_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");
+const lineHeightContainer = css.styleVariants(lib_themes_vars_css_cjs.vars.textSize, ({
+  mobile,
+  tablet
+}) => lib_css_responsiveStyle_cjs.responsiveStyle({
+  mobile: {
+    height: mobile.lineHeight
+  },
+  tablet: {
+    height: tablet.lineHeight
+  }
+}), "lineHeightContainer");
+__vanilla_filescope__.endFileScope();
+exports.lineHeightContainer = lineHeightContainer;

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

@@ -0,0 +1,23 @@
+"use strict";
+const clsx = require("clsx");
+const lib_utils_resolveResponsiveProp_cjs = require("../../utils/resolveResponsiveProp.cjs");
+const lib_css_negativeMargin_negativeMargin_css_cjs = require("./negativeMargin.css.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const clsx__default = /* @__PURE__ */ _interopDefaultCompat(clsx);
+const directionStyles = {
+  top: lib_css_negativeMargin_negativeMargin_css_cjs.top,
+  right: lib_css_negativeMargin_negativeMargin_css_cjs.right,
+  bottom: lib_css_negativeMargin_negativeMargin_css_cjs.bottom,
+  left: lib_css_negativeMargin_negativeMargin_css_cjs.left
+};
+const negativeMargin = (direction, space) => space ? clsx__default.default([
+  direction === "top" || direction === "bottom" ? lib_css_negativeMargin_negativeMargin_css_cjs.preventCollapsePseudo[direction] : void 0,
+  lib_utils_resolveResponsiveProp_cjs.resolveResponsiveProp(
+    space,
+    directionStyles[direction].mobile,
+    directionStyles[direction].tablet,
+    directionStyles[direction].desktop,
+    directionStyles[direction].wide
+  )
+]) : null;
+exports.negativeMargin = negativeMargin;

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

@@ -0,0 +1,61 @@
+"use strict";
+const __vanilla_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");
+const stylesForBreakpoint = (bp, property, mapToStyle) => css.styleVariants(lib_css_atoms_atomicProperties_cjs.space, (value) => {
+  const styleRule = {
+    [property]: value ? cssUtils.calc.negate(value) : 0
+  };
+  return lib_css_responsiveStyle_cjs.responsiveStyle({
+    [bp]: mapToStyle ? mapToStyle(styleRule) : styleRule
+  });
+}, "stylesForBreakpoint");
+const beforePseudo = (rule) => ({
+  "::before": rule
+});
+const afterPseudo = (rule) => ({
+  "::after": rule
+});
+const preventCollapsePseudo = {
+  top: css.style(beforePseudo({
+    content: '""',
+    display: "table"
+  }), "preventCollapsePseudo_top"),
+  bottom: css.style(afterPseudo({
+    content: '""',
+    display: "table"
+  }), "preventCollapsePseudo_bottom")
+};
+const top = {
+  mobile: stylesForBreakpoint("mobile", "marginBottom", beforePseudo),
+  tablet: stylesForBreakpoint("tablet", "marginBottom", beforePseudo),
+  desktop: stylesForBreakpoint("desktop", "marginBottom", beforePseudo),
+  wide: stylesForBreakpoint("wide", "marginBottom", beforePseudo)
+};
+const bottom = {
+  mobile: stylesForBreakpoint("mobile", "marginTop", afterPseudo),
+  tablet: stylesForBreakpoint("tablet", "marginTop", afterPseudo),
+  desktop: stylesForBreakpoint("desktop", "marginTop", afterPseudo),
+  wide: stylesForBreakpoint("wide", "marginTop", afterPseudo)
+};
+const left = {
+  mobile: stylesForBreakpoint("mobile", "marginLeft"),
+  tablet: stylesForBreakpoint("tablet", "marginLeft"),
+  desktop: stylesForBreakpoint("desktop", "marginLeft"),
+  wide: stylesForBreakpoint("wide", "marginLeft")
+};
+const right = {
+  mobile: stylesForBreakpoint("mobile", "marginRight"),
+  tablet: stylesForBreakpoint("tablet", "marginRight"),
+  desktop: stylesForBreakpoint("desktop", "marginRight"),
+  wide: stylesForBreakpoint("wide", "marginRight")
+};
+__vanilla_filescope__.endFileScope();
+exports.bottom = bottom;
+exports.left = left;
+exports.preventCollapsePseudo = preventCollapsePseudo;
+exports.right = right;
+exports.top = top;

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

@@ -0,0 +1,111 @@
+"use strict";
+const __vanilla_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");
+const base = css.style({
+  margin: 0,
+  padding: 0,
+  border: 0,
+  boxSizing: "border-box",
+  fontSize: "100%",
+  font: "inherit",
+  verticalAlign: "baseline",
+  WebkitTapHighlightColor: "transparent",
+  selectors: {
+    [`[${lib_components_private_hideFocusRings_hideFocusRingsDataAttribute_cjs.hideFocusRingsDataAttribute}] &`]: {
+      outline: "none"
+    }
+  }
+}, "base");
+const block = css.style({
+  display: "block"
+}, "block");
+const body = css.style({
+  lineHeight: 1
+}, "body");
+const list = css.style({
+  listStyle: "none"
+}, "list");
+const quote = css.style({
+  quotes: "none",
+  selectors: {
+    "&:before, &:after": {
+      content: "''"
+    }
+  }
+}, "quote");
+const table = css.style({
+  borderCollapse: "collapse",
+  borderSpacing: 0
+}, "table");
+const appearance = css.style({
+  appearance: "none"
+}, "appearance");
+const transparent = css.style({
+  backgroundColor: "transparent"
+}, "transparent");
+const field = css.style([block, appearance, transparent], "field");
+const mark = css.style([transparent, {
+  color: "inherit"
+}], "mark");
+const select = css.style([field, css.style({
+  ":disabled": {
+    opacity: 1
+  },
+  selectors: {
+    "&::-ms-expand": {
+      display: "none"
+    }
+  }
+}, "select")], "select");
+const input = css.style([field, css.style({
+  selectors: {
+    ['&[type="number"]']: {
+      MozAppearance: "textfield"
+    },
+    [['&[type="number"]::-webkit-inner-spin-button', '&[type="number"]::-webkit-outer-spin-button'].join(",")]: {
+      WebkitAppearance: "none",
+      margin: 0
+    },
+    "&::-ms-clear": {
+      display: "none"
+    },
+    "&::-webkit-search-cancel-button": {
+      WebkitAppearance: "none"
+    }
+  }
+}, "input")], "input");
+const button = css.style([transparent], "button");
+const a = css.style({
+  textDecoration: "none",
+  color: "inherit"
+}, "a");
+const element = {
+  article: block,
+  aside: block,
+  details: block,
+  figcaption: block,
+  figure: block,
+  footer: block,
+  header: block,
+  hgroup: block,
+  menu: block,
+  nav: block,
+  section: block,
+  ul: list,
+  ol: list,
+  blockquote: quote,
+  q: quote,
+  body,
+  a,
+  table,
+  mark,
+  select,
+  button,
+  textarea: field,
+  input
+};
+__vanilla_filescope__.endFileScope();
+exports.base = base;
+exports.element = element;

package/dist/lib/css/responsiveStyle.cjs

@@ -0,0 +1,36 @@
+"use strict";
+const omit = require("lodash/omit.js");
+const mapValues = require("lodash/mapValues.js");
+const lib_css_breakpoints_cjs = require("./breakpoints.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const omit__default = /* @__PURE__ */ _interopDefaultCompat(omit);
+const mapValues__default = /* @__PURE__ */ _interopDefaultCompat(mapValues);
+const breakpointQuery = mapValues__default.default(
+  omit__default.default(lib_css_breakpoints_cjs.breakpoints, "mobile"),
+  (bp) => `screen and (min-width: ${bp}px)`
+);
+const makeMediaQuery = (breakpoint) => (styles) => !styles || Object.keys(styles).length === 0 ? {} : {
+  [breakpointQuery[breakpoint]]: styles
+};
+const mediaQuery = {
+  tablet: makeMediaQuery("tablet"),
+  desktop: makeMediaQuery("desktop"),
+  wide: makeMediaQuery("wide")
+};
+const responsiveStyle = ({
+  mobile,
+  tablet,
+  desktop,
+  wide
+}) => ({
+  ...omit__default.default(mobile, "@media"),
+  ...tablet || desktop || wide ? {
+    "@media": {
+      ...mediaQuery.tablet(tablet ?? {}),
+      ...mediaQuery.desktop(desktop ?? {}),
+      ...mediaQuery.wide(wide ?? {})
+    }
+  } : {}
+});
+exports.breakpointQuery = breakpointQuery;
+exports.responsiveStyle = responsiveStyle;

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

@@ -0,0 +1,23 @@
+"use strict";
+const __vanilla_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");
+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();
+  return {
+    paddingTop: padding,
+    paddingBottom: padding
+  };
+};
+const textAlignedToIcon = {
+  standard: css.style(lib_css_responsiveStyle_cjs.responsiveStyle({
+    mobile: calculateForBreakpoint("mobile"),
+    tablet: calculateForBreakpoint("tablet")
+  }), "textAlignedToIcon_standard")
+};
+__vanilla_filescope__.endFileScope();
+exports.textAlignedToIcon = textAlignedToIcon;

package/dist/lib/css/typography.cjs

@@ -0,0 +1,16 @@
+"use strict";
+const lib_css_typography_css_cjs = require("./typography.css.cjs");
+function textStyles({
+  weight = "regular",
+  size = "standard",
+  tone = "neutral",
+  baseline
+}) {
+  return [
+    lib_css_typography_css_cjs.fontFamily,
+    lib_css_typography_css_cjs.fontWeight[weight],
+    lib_css_typography_css_cjs.tone[tone],
+    (baseline ? lib_css_typography_css_cjs.textSizeTrimmed : lib_css_typography_css_cjs.textSizeUntrimmed)[size]
+  ];
+}
+exports.textStyles = textStyles;