braid-design-system 32.16.0 → 32.16.2

package/dist/lib/components/TextDropdown/TextDropdown.mjs

@@ -0,0 +1,91 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import assert from "assert";
+import { Overlay } from "../private/Overlay/Overlay.mjs";
+import { Box } from "../Box/Box.mjs";
+import { TextContext } from "../Text/TextContext.mjs";
+import { HeadingContext } from "../Heading/HeadingContext.mjs";
+import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
+import { select, focusOverlay } from "./TextDropdown.css.mjs";
+import { IconChevron } from "../icons/IconChevron/IconChevron.mjs";
+function parseSimpleToComplexOption(option) {
+  return typeof option === "object" && option !== null && "text" in option && "value" in option ? option : { value: option, text: String(option) };
+}
+function TextDropdown({
+  id,
+  value,
+  onChange,
+  onBlur,
+  options,
+  label,
+  data,
+  ...restProps
+}) {
+  assert(
+    (() => {
+      const inText = useContext(TextContext);
+      const inHeading = useContext(HeadingContext);
+      return inText || inHeading;
+    })(),
+    "TextDropdown components must be rendered within a Text or Heading component. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/TextDropdown"
+  );
+  const parsedOptions = options.map(parseSimpleToComplexOption);
+  const [currentText] = parsedOptions.filter((o) => value === o.value);
+  if (!currentText || !currentText.text) {
+    throw new Error(
+      `The provided value of "${value}" does not exist in the provided \`options\` list.`
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      display: "inlineBlock",
+      position: "relative",
+      ...buildDataAttributes({ data, validateRestProps: restProps }),
+      children: [
+        /* @__PURE__ */ jsxs(Box, { pointerEvents: "none", userSelect: "none", children: [
+          currentText.text,
+          " ",
+          /* @__PURE__ */ jsx(IconChevron, { alignY: "lowercase" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "select",
+            position: "absolute",
+            inset: 0,
+            width: "full",
+            opacity: 0,
+            className: select,
+            "aria-label": label,
+            title: label,
+            id,
+            value: String(value),
+            onChange: (ev) => {
+              if (typeof onChange === "function") {
+                const newValue = parsedOptions[ev.currentTarget.selectedIndex].value;
+                onChange(newValue);
+              }
+            },
+            onBlur,
+            children: /* @__PURE__ */ jsx("optgroup", { label, children: parsedOptions.map((option) => /* @__PURE__ */ jsx("option", { value: String(option.value), children: option.text }, String(option.value))) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Overlay,
+          {
+            boxShadow: "outlineFocus",
+            borderRadius: "standard",
+            transition: "fast",
+            onlyVisibleForKeyboardNavigation: true,
+            className: focusOverlay
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  TextDropdown,
+  parseSimpleToComplexOption
+};

package/dist/lib/components/TextDropdown/TextDropdown.playroom.cjs

@@ -0,0 +1,52 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lib_playroom_utils_cjs = require("../../playroom/utils.cjs");
+const lib_components_TextDropdown_TextDropdown_cjs = require("./TextDropdown.cjs");
+const fallbackOptions = ["TextDropdown"];
+function resolveValue(value, options) {
+  if (typeof value === "undefined") {
+    if (Array.isArray(options) && options.length > 0) {
+      return lib_components_TextDropdown_TextDropdown_cjs.parseSimpleToComplexOption(options[0]).value;
+    }
+    return fallbackOptions[0];
+  }
+  return value;
+}
+function resolveOptions(options) {
+  return Array.isArray(options) && options.length > 0 ? options : fallbackOptions;
+}
+function TextDropdown({
+  id,
+  value,
+  label,
+  onChange,
+  options = fallbackOptions,
+  ...restProps
+}) {
+  const fallbackId = lib_playroom_utils_cjs.useFallbackId();
+  const [internalValue, setInternalValue] = React.useState(
+    resolveValue(value, options)
+  );
+  const [internalOptions, setInternalOptions] = React.useState(
+    resolveOptions(options)
+  );
+  React.useEffect(() => {
+    if (options !== internalOptions) {
+      setInternalOptions(resolveOptions(options));
+      setInternalValue(resolveValue(value, options));
+    }
+  }, [internalOptions, value, options]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_TextDropdown_TextDropdown_cjs.TextDropdown,
+    {
+      id: id ?? fallbackId,
+      label: label ?? "No label provided",
+      value: internalValue,
+      options: internalOptions,
+      onChange: onChange ? onChange : setInternalValue,
+      ...restProps
+    }
+  );
+}
+exports.TextDropdown = TextDropdown;

package/dist/lib/components/TextDropdown/TextDropdown.playroom.mjs

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useFallbackId } from "../../playroom/utils.mjs";
+import { TextDropdown as TextDropdown$1, parseSimpleToComplexOption } from "./TextDropdown.mjs";
+const fallbackOptions = ["TextDropdown"];
+function resolveValue(value, options) {
+  if (typeof value === "undefined") {
+    if (Array.isArray(options) && options.length > 0) {
+      return parseSimpleToComplexOption(options[0]).value;
+    }
+    return fallbackOptions[0];
+  }
+  return value;
+}
+function resolveOptions(options) {
+  return Array.isArray(options) && options.length > 0 ? options : fallbackOptions;
+}
+function TextDropdown({
+  id,
+  value,
+  label,
+  onChange,
+  options = fallbackOptions,
+  ...restProps
+}) {
+  const fallbackId = useFallbackId();
+  const [internalValue, setInternalValue] = useState(
+    resolveValue(value, options)
+  );
+  const [internalOptions, setInternalOptions] = useState(
+    resolveOptions(options)
+  );
+  useEffect(() => {
+    if (options !== internalOptions) {
+      setInternalOptions(resolveOptions(options));
+      setInternalValue(resolveValue(value, options));
+    }
+  }, [internalOptions, value, options]);
+  return /* @__PURE__ */ jsx(
+    TextDropdown$1,
+    {
+      id: id ?? fallbackId,
+      label: label ?? "No label provided",
+      value: internalValue,
+      options: internalOptions,
+      onChange: onChange ? onChange : setInternalValue,
+      ...restProps
+    }
+  );
+}
+export {
+  TextDropdown
+};

package/dist/lib/components/TextField/TextField.cjs

@@ -0,0 +1,94 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
+const lib_components_private_Field_Field_cjs = require("../private/Field/Field.cjs");
+const lib_components_private_Field_ClearField_cjs = require("../private/Field/ClearField.cjs");
+const lib_components_private_Field_getCharacterLimitStatus_cjs = require("../private/Field/getCharacterLimitStatus.cjs");
+const validTypes = {
+  text: "text",
+  password: "password",
+  email: "email",
+  search: "search",
+  number: "number",
+  tel: "tel",
+  url: "url"
+};
+const defaultInputModesForType = {
+  text: "text",
+  password: "text",
+  email: "email",
+  search: "search",
+  number: "numeric",
+  tel: "tel",
+  url: "url"
+};
+const TextField = React.forwardRef(
+  ({
+    value,
+    type = "text",
+    onChange,
+    onBlur,
+    onFocus,
+    onClear,
+    placeholder,
+    characterLimit,
+    id,
+    clearLabel,
+    inputMode,
+    step,
+    ...restProps
+  }, forwardedRef) => {
+    const defaultRef = React.useRef(null);
+    const inputRef = forwardedRef || defaultRef;
+    const clearable = Boolean(
+      typeof onClear !== "undefined" && !restProps.disabled && typeof value === "string" && value.length > 0
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      lib_components_private_Field_Field_cjs.Field,
+      {
+        ...restProps,
+        id,
+        value,
+        secondaryMessage: characterLimit ? lib_components_private_Field_getCharacterLimitStatus_cjs.getCharacterLimitStatus({
+          value,
+          characterLimit
+        }) : null,
+        secondaryIcon: onClear ? /* @__PURE__ */ jsxRuntime.jsx(
+          lib_components_private_Field_ClearField_cjs.ClearField,
+          {
+            id: `${id}-clear`,
+            hide: !clearable,
+            onClear,
+            label: clearLabel,
+            inputRef
+          }
+        ) : null,
+        children: (overlays, fieldProps, icon, secondaryIcon, prefix) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+          icon,
+          prefix,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lib_components_Box_Box_cjs.Box,
+            {
+              component: "input",
+              type: validTypes[type],
+              value,
+              onChange,
+              onFocus,
+              onBlur,
+              placeholder: !restProps.disabled ? placeholder : void 0,
+              ...fieldProps,
+              inputMode: inputMode || defaultInputModesForType[type],
+              step,
+              ref: inputRef
+            }
+          ),
+          overlays,
+          secondaryIcon
+        ] })
+      }
+    );
+  }
+);
+TextField.displayName = "TextField";
+exports.TextField = TextField;

package/dist/lib/components/TextField/TextField.mjs

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, Fragment } from "react";
+import { Box } from "../Box/Box.mjs";
+import { Field } from "../private/Field/Field.mjs";
+import { ClearField } from "../private/Field/ClearField.mjs";
+import { getCharacterLimitStatus } from "../private/Field/getCharacterLimitStatus.mjs";
+const validTypes = {
+  text: "text",
+  password: "password",
+  email: "email",
+  search: "search",
+  number: "number",
+  tel: "tel",
+  url: "url"
+};
+const defaultInputModesForType = {
+  text: "text",
+  password: "text",
+  email: "email",
+  search: "search",
+  number: "numeric",
+  tel: "tel",
+  url: "url"
+};
+const TextField = forwardRef(
+  ({
+    value,
+    type = "text",
+    onChange,
+    onBlur,
+    onFocus,
+    onClear,
+    placeholder,
+    characterLimit,
+    id,
+    clearLabel,
+    inputMode,
+    step,
+    ...restProps
+  }, forwardedRef) => {
+    const defaultRef = useRef(null);
+    const inputRef = forwardedRef || defaultRef;
+    const clearable = Boolean(
+      typeof onClear !== "undefined" && !restProps.disabled && typeof value === "string" && value.length > 0
+    );
+    return /* @__PURE__ */ jsx(
+      Field,
+      {
+        ...restProps,
+        id,
+        value,
+        secondaryMessage: characterLimit ? getCharacterLimitStatus({
+          value,
+          characterLimit
+        }) : null,
+        secondaryIcon: onClear ? /* @__PURE__ */ jsx(
+          ClearField,
+          {
+            id: `${id}-clear`,
+            hide: !clearable,
+            onClear,
+            label: clearLabel,
+            inputRef
+          }
+        ) : null,
+        children: (overlays, fieldProps, icon, secondaryIcon, prefix) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          icon,
+          prefix,
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "input",
+              type: validTypes[type],
+              value,
+              onChange,
+              onFocus,
+              onBlur,
+              placeholder: !restProps.disabled ? placeholder : void 0,
+              ...fieldProps,
+              inputMode: inputMode || defaultInputModesForType[type],
+              step,
+              ref: inputRef
+            }
+          ),
+          overlays,
+          secondaryIcon
+        ] })
+      }
+    );
+  }
+);
+TextField.displayName = "TextField";
+export {
+  TextField
+};

package/dist/lib/components/TextField/TextField.playroom.cjs

@@ -0,0 +1,36 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_playroom_playroomState_cjs = require("../../playroom/playroomState.cjs");
+const lib_playroom_utils_cjs = require("../../playroom/utils.cjs");
+const lib_components_TextField_TextField_cjs = require("./TextField.cjs");
+const TextField = ({
+  id,
+  stateName,
+  value,
+  onChange,
+  onClear,
+  ...restProps
+}) => {
+  const fallbackId = lib_playroom_utils_cjs.useFallbackId();
+  const [state, handleChange] = lib_playroom_playroomState_cjs.useFallbackState(
+    stateName,
+    value,
+    onChange,
+    ""
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_TextField_TextField_cjs.TextField,
+    {
+      id: id ?? fallbackId,
+      value: state,
+      onChange: handleChange,
+      onClear: () => {
+        handleChange({ currentTarget: { value: "" } });
+        onClear == null ? void 0 : onClear();
+      },
+      autoComplete: "off",
+      ...restProps
+    }
+  );
+};
+exports.TextField = TextField;

package/dist/lib/components/TextField/TextField.playroom.mjs

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { useFallbackState } from "../../playroom/playroomState.mjs";
+import { useFallbackId } from "../../playroom/utils.mjs";
+import { TextField as TextField$1 } from "./TextField.mjs";
+const TextField = ({
+  id,
+  stateName,
+  value,
+  onChange,
+  onClear,
+  ...restProps
+}) => {
+  const fallbackId = useFallbackId();
+  const [state, handleChange] = useFallbackState(
+    stateName,
+    value,
+    onChange,
+    ""
+  );
+  return /* @__PURE__ */ jsx(
+    TextField$1,
+    {
+      id: id ?? fallbackId,
+      value: state,
+      onChange: handleChange,
+      onClear: () => {
+        handleChange({ currentTarget: { value: "" } });
+        onClear == null ? void 0 : onClear();
+      },
+      autoComplete: "off",
+      ...restProps
+    }
+  );
+};
+export {
+  TextField
+};

package/dist/lib/components/TextLink/TextLink.cjs

@@ -0,0 +1,91 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const clsx = require("clsx");
+const React = require("react");
+const lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
+const lib_components_Box_BackgroundContext_cjs = require("../Box/BackgroundContext.cjs");
+const lib_components_BraidProvider_BraidProvider_cjs = require("../BraidProvider/BraidProvider.cjs");
+const lib_components_Heading_HeadingContext_cjs = require("../Heading/HeadingContext.cjs");
+const lib_components_Text_TextContext_cjs = require("../Text/TextContext.cjs");
+const lib_components_private_AvoidWidowIcon_AvoidWidowIcon_cjs = require("../private/AvoidWidowIcon/AvoidWidowIcon.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const lib_components_private_touchable_virtualTouchable_cjs = require("../private/touchable/virtualTouchable.cjs");
+const lib_components_TextLink_TextLink_css_cjs = require("./TextLink.css.cjs");
+const lib_css_typography_css_cjs = require("../../css/typography.css.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const clsx__default = /* @__PURE__ */ _interopDefaultCompat(clsx);
+const isPlainBackground = (backgroundContext, contrast) => contrast === "light" && (backgroundContext === "body" || backgroundContext === "surface" || backgroundContext === "neutralLight") || contrast === "dark" && (backgroundContext === "bodyDark" || backgroundContext === "surfaceDark" || backgroundContext === "neutral");
+const useLinkStyles = ({
+  reset = "a",
+  weight,
+  showVisited = false,
+  hitArea = "standard"
+}) => {
+  const backgroundLightness = lib_components_Box_BackgroundContext_cjs.useBackgroundLightness();
+  const backgroundContext = lib_components_Box_BackgroundContext_cjs.useBackground();
+  const textContext = React.useContext(lib_components_Text_TextContext_cjs.TextContext);
+  const headingContext = React.useContext(lib_components_Heading_HeadingContext_cjs.HeadingContext);
+  const isWeakDueToTextTone = !headingContext && (textContext == null ? void 0 : textContext.tone) !== "neutral" && (textContext == null ? void 0 : textContext.tone) !== "secondary";
+  const linkStyles = weight === "weak" || isWeakDueToTextTone ? lib_components_TextLink_TextLink_css_cjs.weakLink : [
+    isPlainBackground(backgroundContext.lightMode, "light") || weight === "regular" ? lib_components_TextLink_TextLink_css_cjs.regularLinkLightMode[backgroundLightness.lightMode] : lib_components_TextLink_TextLink_css_cjs.weakLink,
+    isPlainBackground(backgroundContext.darkMode, "dark") || weight === "regular" ? lib_components_TextLink_TextLink_css_cjs.regularLinkDarkMode[backgroundLightness.darkMode] : lib_components_TextLink_TextLink_css_cjs.weakLink
+  ];
+  return clsx__default.default(
+    lib_components_TextLink_TextLink_css_cjs.base,
+    linkStyles,
+    weight !== "weak" ? lib_css_typography_css_cjs.fontWeight.medium : void 0,
+    showVisited ? [
+      lib_components_TextLink_TextLink_css_cjs.visitedLightMode[backgroundLightness.lightMode],
+      lib_components_TextLink_TextLink_css_cjs.visitedDarkMode[backgroundLightness.darkMode]
+    ] : "",
+    reset !== false ? lib_css_atoms_atoms_cjs.atoms({
+      reset: typeof reset === "string" ? reset : "a"
+    }) : null,
+    lib_css_atoms_atoms_cjs.atoms({
+      cursor: "pointer"
+    }),
+    hitArea === "large" && lib_components_private_touchable_virtualTouchable_cjs.virtualTouchable()
+  );
+};
+const TextLinkContent = ({
+  icon,
+  iconPosition = "leading",
+  children
+}) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  icon && iconPosition === "leading" ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_private_AvoidWidowIcon_AvoidWidowIcon_cjs.AvoidWidowIcon, { iconPosition, children: icon }) : null,
+  children,
+  icon && iconPosition === "trailing" ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_private_AvoidWidowIcon_AvoidWidowIcon_cjs.AvoidWidowIcon, { iconPosition, children: icon }) : null
+] });
+const TextLink = React.forwardRef(
+  ({
+    weight,
+    showVisited,
+    hitArea,
+    data,
+    icon,
+    children,
+    iconPosition,
+    ...restProps
+  }, ref) => {
+    const LinkComponent = lib_components_BraidProvider_BraidProvider_cjs.useLinkComponent(ref);
+    const classes = useLinkStyles({
+      weight,
+      showVisited,
+      hitArea
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      LinkComponent,
+      {
+        ref,
+        ...restProps,
+        className: classes,
+        ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: false }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(TextLinkContent, { icon, iconPosition, children })
+      }
+    );
+  }
+);
+TextLink.displayName = "TextLink";
+exports.TextLink = TextLink;
+exports.TextLinkContent = TextLinkContent;
+exports.useLinkStyles = useLinkStyles;

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

@@ -0,0 +1,132 @@
+"use strict";
+const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const lib_css_atoms_sprinkles_css_cjs = require("../../css/atoms/sprinkles.css.cjs");
+const lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
+__vanilla_filescope__.setFileScope("src/lib/components/TextLink/TextLink.css.ts", "braid-design-system");
+const textLinkVars = css.createThemeContract({
+  color: null,
+  colorHover: null
+});
+const lightModeRegularLinkVars = css.assignVars(textLinkVars, {
+  color: lib_themes_vars_css_cjs.vars.foregroundColor.link,
+  colorHover: lib_themes_vars_css_cjs.vars.foregroundColor.linkHover
+});
+const darkModeRegularLinkVars = css.assignVars(textLinkVars, {
+  color: lib_themes_vars_css_cjs.vars.foregroundColor.linkLight,
+  colorHover: lib_themes_vars_css_cjs.vars.foregroundColor.linkLight
+});
+const weakLinkVars = css.assignVars(textLinkVars, {
+  color: "inherit",
+  colorHover: "inherit"
+});
+const textDecorationThickness = "0.08em";
+const base = css.style({
+  color: textLinkVars.color,
+  textDecoration: lib_themes_vars_css_cjs.vars.linkDecoration,
+  textDecorationThickness,
+  textUnderlineOffset: 3,
+  ":hover": {
+    color: textLinkVars.colorHover,
+    textDecoration: "underline",
+    /*
+          Duplicating the thickness property due to inconsistent support
+          for shorthand properties of `text-decoration`. Without this,
+          applying the above decoration rule resets the thickness in
+          browsers that do support shorthands.
+    
+          We also cannot use the long-form `text-decoration-line` due
+          to browser support policy of Edge 16+.
+        */
+    textDecorationThickness
+  },
+  ":focus-visible": {
+    color: textLinkVars.colorHover,
+    outline: `${lib_themes_vars_css_cjs.vars.focusRingSize} solid ${lib_themes_vars_css_cjs.vars.borderColor.focus}`,
+    outlineOffset: "0.2em",
+    borderRadius: lib_themes_vars_css_cjs.vars.borderRadius.small
+  }
+}, "base");
+const weakLink = css.style({
+  vars: weakLinkVars,
+  textDecoration: "underline",
+  /*
+    Duplicating the thickness property again as the `textDecoration`
+    property above overrides the `textDecorationThickness` property
+    in the `base` style due to CSS rule ordering. Without this property,
+    weak links were receiving `auto` thickness instead of the desired
+    value.
+  */
+  textDecorationThickness
+}, "weakLink");
+const regularLinkLightMode = css.styleVariants({
+  light: {
+    selectors: {
+      [`html:not(${lib_css_atoms_sprinkles_css_cjs.darkMode}) &`]: {
+        vars: lightModeRegularLinkVars
+      }
+    }
+  },
+  dark: {
+    selectors: {
+      [`html:not(${lib_css_atoms_sprinkles_css_cjs.darkMode}) &`]: {
+        vars: darkModeRegularLinkVars
+      }
+    }
+  }
+}, "regularLinkLightMode");
+const regularLinkDarkMode = css.styleVariants({
+  light: {
+    selectors: {
+      [`html${lib_css_atoms_sprinkles_css_cjs.darkMode} &`]: {
+        vars: lightModeRegularLinkVars
+      }
+    }
+  },
+  dark: {
+    selectors: {
+      [`html${lib_css_atoms_sprinkles_css_cjs.darkMode} &`]: {
+        vars: darkModeRegularLinkVars
+      }
+    }
+  }
+}, "regularLinkDarkMode");
+const visitedLightMode = css.styleVariants({
+  light: {
+    selectors: {
+      [`html:not(${lib_css_atoms_sprinkles_css_cjs.darkMode}) &:visited`]: {
+        color: lib_themes_vars_css_cjs.vars.foregroundColor.linkVisited
+      }
+    }
+  },
+  dark: {
+    selectors: {
+      [`html:not(${lib_css_atoms_sprinkles_css_cjs.darkMode}) &:visited`]: {
+        color: lib_themes_vars_css_cjs.vars.foregroundColor.linkLightVisited
+      }
+    }
+  }
+}, "visitedLightMode");
+const visitedDarkMode = css.styleVariants({
+  light: {
+    selectors: {
+      [`html${lib_css_atoms_sprinkles_css_cjs.darkMode} &:visited`]: {
+        color: lib_themes_vars_css_cjs.vars.foregroundColor.linkVisited
+      }
+    }
+  },
+  dark: {
+    selectors: {
+      [`html${lib_css_atoms_sprinkles_css_cjs.darkMode} &:visited`]: {
+        color: lib_themes_vars_css_cjs.vars.foregroundColor.linkLightVisited
+      }
+    }
+  }
+}, "visitedDarkMode");
+__vanilla_filescope__.endFileScope();
+exports.base = base;
+exports.regularLinkDarkMode = regularLinkDarkMode;
+exports.regularLinkLightMode = regularLinkLightMode;
+exports.visitedDarkMode = visitedDarkMode;
+exports.visitedLightMode = visitedLightMode;
+exports.weakLink = weakLink;