braid-design-system 32.16.0 → 32.16.2

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

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

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

@@ -1,6 +0,0 @@
-"use strict";
-const styles_lib_components_private_touchable_virtualTouchable_css_cjs = require("./virtualTouchable.css.cjs");
-function virtualTouchable({ xAxis } = { xAxis: true }) {
-  return !xAxis ? [styles_lib_components_private_touchable_virtualTouchable_css_cjs.virtualTouchable, styles_lib_components_private_touchable_virtualTouchable_css_cjs.yAxisOnly] : styles_lib_components_private_touchable_virtualTouchable_css_cjs.virtualTouchable;
-}
-exports.virtualTouchable = virtualTouchable;

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

@@ -1,27 +0,0 @@
-"use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const styles_lib_components_private_touchable_debugTouchable_cjs = require("./debugTouchable.cjs");
-const styles_lib_components_private_touchable_virtualTouchableRules_cjs = require("./virtualTouchableRules.cjs");
-__vanilla_filescope__.setFileScope("src/lib/components/private/touchable/virtualTouchable.css.ts", "braid-design-system");
-const virtualTouchable = css.style([{
-  position: "relative",
-  ":after": {
-    content: '""',
-    position: "absolute",
-    left: -10,
-    right: -10,
-    ...styles_lib_components_private_touchable_virtualTouchableRules_cjs.virtualTouchableRules
-  }
-}, styles_lib_components_private_touchable_debugTouchable_cjs.debugTouchable({
-  after: true
-})], "virtualTouchable");
-const yAxisOnly = css.style({
-  ":after": {
-    left: "0 !important",
-    right: "0 !important"
-  }
-}, "yAxisOnly");
-__vanilla_filescope__.endFileScope();
-exports.virtualTouchable = virtualTouchable;
-exports.yAxisOnly = yAxisOnly;

package/dist/styles/lib/components/private/touchable/virtualTouchableRules.cjs

@@ -1,10 +0,0 @@
-"use strict";
-const styles_lib_components_private_touchable_hitArea_cjs = require("./hitArea.cjs");
-const virtualTouchableRules = {
-  transform: "translateY(-50%)",
-  minHeight: styles_lib_components_private_touchable_hitArea_cjs.hitArea,
-  minWidth: styles_lib_components_private_touchable_hitArea_cjs.hitArea,
-  height: "100%",
-  top: "50%"
-};
-exports.virtualTouchableRules = virtualTouchableRules;

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

@@ -1,168 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const assert = require("assert");
-const styles_lib_components_Stack_Stack_cjs = require("../Stack/Stack.cjs");
-const styles_lib_components_Accordion_AccordionItem_cjs = require("../Accordion/AccordionItem.cjs");
-const styles_lib_components_Columns_Columns_cjs = require("../Columns/Columns.cjs");
-const styles_lib_components_Column_Column_cjs = require("../Column/Column.cjs");
-const styles_lib_components_ContentBlock_ContentBlock_cjs = require("../ContentBlock/ContentBlock.cjs");
-const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
-const styles_lib_components_private_Placeholder_Placeholder_cjs = require("../private/Placeholder/Placeholder.cjs");
-const styles_lib_components_ButtonIcon_ButtonIcon_cjs = require("../ButtonIcon/ButtonIcon.cjs");
-const styles_lib_css_lineHeightContainer_css_cjs = require("../../css/lineHeightContainer.css.cjs");
-const styles_lib_components_Accordion_Accordion_cjs = require("../Accordion/Accordion.cjs");
-const styles_lib_components_useToast_Toast_css_cjs = require("./Toast.css.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const React__default = /* @__PURE__ */ _interopDefaultCompat(React);
-const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
-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
-  };
-};
-const toneToIcon = {
-  critical: styles_lib_components_Accordion_AccordionItem_cjs.IconCritical,
-  positive: styles_lib_components_Accordion_AccordionItem_cjs.IconPositive
-};
-const toastDuration = 1e4;
-const borderRadius = "large";
-const Action = ({ label, onClick, removeToast }) => {
-  const handleClick = React.useCallback(() => {
-    removeToast();
-    onClick();
-  }, [removeToast, onClick]);
-  return /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Text, { baseline: false, children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { component: "span", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_private_Placeholder_Placeholder_cjs.TextLinkButton, { onClick: handleClick, hitArea: "large", children: label }) }) });
-};
-const ToastIcon = ({ tone, icon }) => {
-  if (tone !== "neutral") {
-    const Icon = toneToIcon[tone];
-    return /* @__PURE__ */ jsxRuntime.jsx(Icon, { tone });
-  }
-  if (icon) {
-    return React.cloneElement(icon, { tone });
-  }
-  return null;
-};
-const Toast = React__default.default.forwardRef(
-  ({
-    id,
-    vanillaTheme,
-    dedupeKey,
-    message,
-    description,
-    tone,
-    icon,
-    onClose,
-    closeLabel = "Close",
-    action,
-    shouldRemove,
-    data,
-    ...restProps
-  }, ref) => {
-    const remove = React.useCallback(
-      () => onClose(dedupeKey, id),
-      [onClose, dedupeKey, id]
-    );
-    const { stopTimeout, startTimeout } = useTimeout({
-      duration: toastDuration,
-      onTimeout: remove
-    });
-    React.useEffect(() => {
-      if (shouldRemove) {
-        stopTimeout();
-        remove();
-      }
-    }, [shouldRemove, remove, stopTimeout]);
-    assert__default.default(
-      !icon || icon.props.size === void 0 && icon.props.tone === void 0,
-      "Icons cannot set the 'size' or 'tone' prop when passed to a Toast component"
-    );
-    assert__default.default(
-      !icon || icon && tone === "neutral",
-      `Icons cannot be customised on a Toast component using '${tone}' tone`
-    );
-    const content = description ? /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Stack_Stack_cjs.Stack, { space: "xxsmall", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Text, { weight: "medium", tone, baseline: false, children: message }),
-      description ? /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Text, { baseline: false, tone: "secondary", children: description }) : null,
-      action ? /* @__PURE__ */ jsxRuntime.jsx(Action, { removeToast: remove, ...action }, action.label) : null
-    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Accordion_AccordionItem_cjs.Inline, { space: "xxsmall", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { paddingRight: "medium", children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Text, { weight: "medium", tone, baseline: false, children: message }) }),
-      action ? /* @__PURE__ */ jsxRuntime.jsx(Action, { removeToast: remove, ...action }, action.label) : null
-    ] });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      styles_lib_components_Box_Box_cjs.Box,
-      {
-        display: "flex",
-        justifyContent: "center",
-        role: "alert",
-        ref,
-        onMouseEnter: stopTimeout,
-        onMouseLeave: startTimeout,
-        className: vanillaTheme,
-        ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { boxShadow: "large", borderRadius, children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_ContentBlock_ContentBlock_cjs.ContentBlock, { width: "xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(
-          styles_lib_components_Box_Box_cjs.Box,
-          {
-            background: { lightMode: "surfaceDark", darkMode: "surface" },
-            position: "relative",
-            borderRadius,
-            paddingY: "medium",
-            paddingX: "gutter",
-            overflow: "hidden",
-            className: styles_lib_components_useToast_Toast_css_cjs.toast,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Columns_Columns_cjs.Columns, { space: "none", children: [
-              tone !== "neutral" || tone === "neutral" && icon ? /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { paddingRight: "small", children: /* @__PURE__ */ jsxRuntime.jsx(ToastIcon, { tone, icon }) }) }) : null,
-              /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Column_Column_cjs.Column, { children: content }),
-              /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
-                styles_lib_components_Box_Box_cjs.Box,
-                {
-                  width: "touchable",
-                  display: "flex",
-                  justifyContent: "flexEnd",
-                  alignItems: "center",
-                  className: styles_lib_css_lineHeightContainer_css_cjs.lineHeightContainer.standard,
-                  "aria-hidden": true,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    styles_lib_components_ButtonIcon_ButtonIcon_cjs.ButtonIcon,
-                    {
-                      id: `${dedupeKey}-clear`,
-                      icon: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.IconClear, {}),
-                      tone: "secondary",
-                      variant: "transparent",
-                      onClick: remove,
-                      label: closeLabel,
-                      data: process.env.NODE_ENV !== "production" ? { testid: "clearToast" } : {}
-                    }
-                  )
-                }
-              ) })
-            ] })
-          }
-        ) }) })
-      }
-    );
-  }
-);
-const ToastComponent = Toast;
-exports.ToastComponent = ToastComponent;

package/dist/styles/lib/components/useToast/Toast.mjs

@@ -1,166 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useState, useRef, useCallback, useEffect, cloneElement } from "react";
-import assert from "assert";
-import { Stack } from "../Stack/Stack.mjs";
-import { Text, Inline, IconClear, IconCritical, IconPositive } from "../Accordion/AccordionItem.mjs";
-import { Columns } from "../Columns/Columns.mjs";
-import { Column } from "../Column/Column.mjs";
-import { ContentBlock } from "../ContentBlock/ContentBlock.mjs";
-import { Box } from "../Box/Box.mjs";
-import { TextLinkButton } from "../private/Placeholder/Placeholder.mjs";
-import { ButtonIcon } from "../ButtonIcon/ButtonIcon.mjs";
-import { lineHeightContainer } from "../../css/lineHeightContainer.css.mjs";
-import { buildDataAttributes } from "../Accordion/Accordion.mjs";
-import { toast } from "./Toast.css.mjs";
-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
-  };
-};
-const toneToIcon = {
-  critical: IconCritical,
-  positive: IconPositive
-};
-const toastDuration = 1e4;
-const borderRadius = "large";
-const Action = ({ label, onClick, removeToast }) => {
-  const handleClick = useCallback(() => {
-    removeToast();
-    onClick();
-  }, [removeToast, onClick]);
-  return /* @__PURE__ */ jsx(Text, { baseline: false, children: /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": true, children: /* @__PURE__ */ jsx(TextLinkButton, { onClick: handleClick, hitArea: "large", children: label }) }) });
-};
-const ToastIcon = ({ tone, icon }) => {
-  if (tone !== "neutral") {
-    const Icon = toneToIcon[tone];
-    return /* @__PURE__ */ jsx(Icon, { tone });
-  }
-  if (icon) {
-    return cloneElement(icon, { tone });
-  }
-  return null;
-};
-const Toast = React.forwardRef(
-  ({
-    id,
-    vanillaTheme,
-    dedupeKey,
-    message,
-    description,
-    tone,
-    icon,
-    onClose,
-    closeLabel = "Close",
-    action,
-    shouldRemove,
-    data,
-    ...restProps
-  }, ref) => {
-    const remove = useCallback(
-      () => onClose(dedupeKey, id),
-      [onClose, dedupeKey, id]
-    );
-    const { stopTimeout, startTimeout } = useTimeout({
-      duration: toastDuration,
-      onTimeout: remove
-    });
-    useEffect(() => {
-      if (shouldRemove) {
-        stopTimeout();
-        remove();
-      }
-    }, [shouldRemove, remove, stopTimeout]);
-    assert(
-      !icon || icon.props.size === void 0 && icon.props.tone === void 0,
-      "Icons cannot set the 'size' or 'tone' prop when passed to a Toast component"
-    );
-    assert(
-      !icon || icon && tone === "neutral",
-      `Icons cannot be customised on a Toast component using '${tone}' tone`
-    );
-    const content = description ? /* @__PURE__ */ jsxs(Stack, { space: "xxsmall", children: [
-      /* @__PURE__ */ jsx(Text, { weight: "medium", tone, baseline: false, children: message }),
-      description ? /* @__PURE__ */ jsx(Text, { baseline: false, tone: "secondary", children: description }) : null,
-      action ? /* @__PURE__ */ jsx(Action, { removeToast: remove, ...action }, action.label) : null
-    ] }) : /* @__PURE__ */ jsxs(Inline, { space: "xxsmall", children: [
-      /* @__PURE__ */ jsx(Box, { paddingRight: "medium", children: /* @__PURE__ */ jsx(Text, { weight: "medium", tone, baseline: false, children: message }) }),
-      action ? /* @__PURE__ */ jsx(Action, { removeToast: remove, ...action }, action.label) : null
-    ] });
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        display: "flex",
-        justifyContent: "center",
-        role: "alert",
-        ref,
-        onMouseEnter: stopTimeout,
-        onMouseLeave: startTimeout,
-        className: vanillaTheme,
-        ...buildDataAttributes({ data, validateRestProps: restProps }),
-        children: /* @__PURE__ */ jsx(Box, { boxShadow: "large", borderRadius, children: /* @__PURE__ */ jsx(ContentBlock, { width: "xsmall", children: /* @__PURE__ */ jsx(
-          Box,
-          {
-            background: { lightMode: "surfaceDark", darkMode: "surface" },
-            position: "relative",
-            borderRadius,
-            paddingY: "medium",
-            paddingX: "gutter",
-            overflow: "hidden",
-            className: toast,
-            children: /* @__PURE__ */ jsxs(Columns, { space: "none", children: [
-              tone !== "neutral" || tone === "neutral" && icon ? /* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsx(Box, { paddingRight: "small", children: /* @__PURE__ */ jsx(ToastIcon, { tone, icon }) }) }) : null,
-              /* @__PURE__ */ jsx(Column, { children: content }),
-              /* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsx(
-                Box,
-                {
-                  width: "touchable",
-                  display: "flex",
-                  justifyContent: "flexEnd",
-                  alignItems: "center",
-                  className: lineHeightContainer.standard,
-                  "aria-hidden": true,
-                  children: /* @__PURE__ */ jsx(
-                    ButtonIcon,
-                    {
-                      id: `${dedupeKey}-clear`,
-                      icon: /* @__PURE__ */ jsx(IconClear, {}),
-                      tone: "secondary",
-                      variant: "transparent",
-                      onClick: remove,
-                      label: closeLabel,
-                      data: process.env.NODE_ENV !== "production" ? { testid: "clearToast" } : {}
-                    }
-                  )
-                }
-              ) })
-            ] })
-          }
-        ) }) })
-      }
-    );
-  }
-);
-const ToastComponent = Toast;
-export {
-  ToastComponent
-};

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

@@ -1,129 +0,0 @@
-"use strict";
-const styles_lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
-const sizes = {
-  full: "100%",
-  touchable: styles_lib_themes_vars_css_cjs.vars.touchableSize
-};
-const space = {
-  ...styles_lib_themes_vars_css_cjs.vars.space,
-  none: 0
-};
-const boxShadow = {
-  ...styles_lib_themes_vars_css_cjs.vars.shadow,
-  borderBrandAccent: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.brandAccent}`,
-  borderBrandAccentLight: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.brandAccentLight}`,
-  borderBrandAccentLarge: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.large} ${styles_lib_themes_vars_css_cjs.vars.borderColor.brandAccent}`,
-  borderBrandAccentLightLarge: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.large} ${styles_lib_themes_vars_css_cjs.vars.borderColor.brandAccentLight}`,
-  borderCaution: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.caution}`,
-  borderCautionLight: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.cautionLight}`,
-  borderCritical: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.critical}`,
-  borderCriticalLarge: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.large} ${styles_lib_themes_vars_css_cjs.vars.borderColor.critical}`,
-  borderCriticalLight: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.criticalLight}`,
-  borderCriticalLightLarge: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.large} ${styles_lib_themes_vars_css_cjs.vars.borderColor.criticalLight}`,
-  borderField: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.field}`,
-  borderFormAccent: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.formAccent}`,
-  borderFormAccentLarge: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.large} ${styles_lib_themes_vars_css_cjs.vars.borderColor.formAccent}`,
-  borderFormAccentLight: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.formAccentLight}`,
-  borderFormAccentLightLarge: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.large} ${styles_lib_themes_vars_css_cjs.vars.borderColor.formAccentLight}`,
-  borderInfo: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.info}`,
-  borderInfoLight: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.infoLight}`,
-  borderNeutral: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.neutral}`,
-  borderNeutralLarge: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.large} ${styles_lib_themes_vars_css_cjs.vars.borderColor.neutral}`,
-  borderNeutralInverted: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.neutralInverted}`,
-  borderNeutralInvertedLarge: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.large} ${styles_lib_themes_vars_css_cjs.vars.borderColor.neutralInverted}`,
-  borderNeutralLight: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.neutralLight}`,
-  borderPositive: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.positive}`,
-  borderPositiveLight: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.positiveLight}`,
-  borderPromote: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.promote}`,
-  borderPromoteLight: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.promoteLight}`,
-  outlineFocus: `0 0 0 ${styles_lib_themes_vars_css_cjs.vars.focusRingSize} ${styles_lib_themes_vars_css_cjs.vars.borderColor.focus}`
-};
-const pseudoProperties = {
-  transform: styles_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: styles_lib_themes_vars_css_cjs.vars.contentWidth,
-  transition: styles_lib_themes_vars_css_cjs.vars.transition
-};
-const colorProperties = {
-  background: styles_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",
-    ...styles_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/styles/lib/css/atoms/atoms.cjs

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

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

@@ -1,75 +0,0 @@
-"use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const sprinkles$1 = require("@vanilla-extract/sprinkles");
-const styles_lib_css_breakpoints_cjs = require("../breakpoints.cjs");
-const styles_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: styles_lib_css_atoms_atomicProperties_cjs.unresponsiveProperties,
-  shorthands: {
-    inset: ["top", "bottom", "left", "right"]
-  }
-});
-const pseudoAtomicProperties = sprinkles$1.defineProperties({
-  defaultCondition: false,
-  conditions: {
-    active: {
-      selector: "&:active"
-    }
-  },
-  properties: styles_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: styles_lib_css_atoms_atomicProperties_cjs.colorProperties
-});
-const responsiveAtomicProperties = sprinkles$1.defineProperties({
-  defaultCondition: "mobile",
-  conditions: {
-    mobile: {},
-    tablet: {
-      "@media": `screen and (min-width: ${styles_lib_css_breakpoints_cjs.breakpoints.tablet}px)`
-    },
-    desktop: {
-      "@media": `screen and (min-width: ${styles_lib_css_breakpoints_cjs.breakpoints.desktop}px)`
-    },
-    wide: {
-      "@media": `screen and (min-width: ${styles_lib_css_breakpoints_cjs.breakpoints.wide}px)`
-    }
-  },
-  responsiveArray: styles_lib_css_breakpoints_cjs.breakpointNames,
-  properties: styles_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/styles/lib/css/colorModeStyle.cjs

@@ -1,17 +0,0 @@
-"use strict";
-const styles_lib_css_atoms_sprinkles_css_cjs = require("./atoms/sprinkles.css.cjs");
-const makeSelector = (mode, styles) => !styles || Object.keys(styles).length === 0 ? {} : {
-  [styles_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;