braid-design-system 32.16.0 → 32.16.2

package/dist/lib/playroom/snippets.mjs

@@ -0,0 +1,102 @@
+import { snippets as snippets$1 } from "./snippets/Accordion.mjs";
+import { snippets as snippets$2 } from "./snippets/Actions.mjs";
+import { snippets as snippets$3 } from "./snippets/Alert.mjs";
+import { snippets as snippets$4 } from "./snippets/Autosuggest.mjs";
+import { snippets as snippets$5 } from "./snippets/Badge.mjs";
+import { snippets as snippets$6 } from "./snippets/Bleed.mjs";
+import { snippets as snippets$7 } from "./snippets/Button.mjs";
+import { snippets as snippets$8 } from "./snippets/ButtonIcon.mjs";
+import { snippets as snippets$9 } from "./snippets/Card.mjs";
+import { snippets as snippets$a } from "./snippets/Checkbox.mjs";
+import { snippets as snippets$b } from "./snippets/Columns.mjs";
+import { snippets as snippets$c } from "./snippets/ContentBlock.mjs";
+import { snippets as snippets$d } from "./snippets/Dialog.mjs";
+import { snippets as snippets$e } from "./snippets/Disclosure.mjs";
+import { snippets as snippets$f } from "./snippets/Divider.mjs";
+import { snippets as snippets$g } from "./snippets/Drawer.mjs";
+import { snippets as snippets$h } from "./snippets/Dropdown.mjs";
+import { snippets as snippets$i } from "./snippets/FieldLabel.mjs";
+import { snippets as snippets$j } from "./snippets/FieldMessage.mjs";
+import { snippets as snippets$k } from "./snippets/Heading.mjs";
+import { snippets as snippets$l } from "./snippets/Inline.mjs";
+import { snippets as snippets$m } from "./snippets/List.mjs";
+import { snippets as snippets$n } from "./snippets/Loader.mjs";
+import { snippets as snippets$o } from "./snippets/MonthPicker.mjs";
+import { snippets as snippets$p } from "./snippets/Notice.mjs";
+import { snippets as snippets$q } from "./snippets/OverflowMenu.mjs";
+import { snippets as snippets$r } from "./snippets/Page.mjs";
+import { snippets as snippets$s } from "./snippets/PageBlock.mjs";
+import { snippets as snippets$t } from "./snippets/Pagination.mjs";
+import { snippets as snippets$u } from "./snippets/PasswordField.mjs";
+import { snippets as snippets$v } from "./snippets/RadioGroup.mjs";
+import { snippets as snippets$w } from "./snippets/Rating.mjs";
+import { snippets as snippets$x } from "./snippets/Secondary.mjs";
+import { snippets as snippets$y } from "./snippets/Stack.mjs";
+import { snippets as snippets$z } from "./snippets/Stepper.mjs";
+import { snippets as snippets$A } from "./snippets/Strong.mjs";
+import { snippets as snippets$B } from "./snippets/Tabs.mjs";
+import { snippets as snippets$C } from "./snippets/Tag.mjs";
+import { snippets as snippets$D } from "./snippets/Text.mjs";
+import { snippets as snippets$E } from "./snippets/TextDropdown.mjs";
+import { snippets as snippets$F } from "./snippets/TextField.mjs";
+import { snippets as snippets$G } from "./snippets/TextLink.mjs";
+import { snippets as snippets$H } from "./snippets/Textarea.mjs";
+import { snippets as snippets$I } from "./snippets/Tiles.mjs";
+import { snippets as snippets$J } from "./snippets/Toggle.mjs";
+import { snippets as snippets$K } from "./snippets/TooltipRenderer.mjs";
+const snippets = Object.entries({
+  Accordion: snippets$1,
+  Actions: snippets$2,
+  Alert: snippets$3,
+  Autosuggest: snippets$4,
+  Badge: snippets$5,
+  Bleed: snippets$6,
+  Button: snippets$7,
+  ButtonIcon: snippets$8,
+  Card: snippets$9,
+  Checkbox: snippets$a,
+  Columns: snippets$b,
+  ContentBlock: snippets$c,
+  Dialog: snippets$d,
+  Disclosure: snippets$e,
+  Divider: snippets$f,
+  Drawer: snippets$g,
+  Dropdown: snippets$h,
+  FieldLabel: snippets$i,
+  FieldMessage: snippets$j,
+  Heading: snippets$k,
+  Inline: snippets$l,
+  List: snippets$m,
+  Loader: snippets$n,
+  MonthPicker: snippets$o,
+  Notice: snippets$p,
+  OverflowMenu: snippets$q,
+  Page: snippets$r,
+  PageBlock: snippets$s,
+  Pagination: snippets$t,
+  PasswordField: snippets$u,
+  RadioGroup: snippets$v,
+  Rating: snippets$w,
+  Secondary: snippets$x,
+  Stack: snippets$y,
+  Stepper: snippets$z,
+  Strong: snippets$A,
+  Tabs: snippets$B,
+  Tag: snippets$C,
+  Text: snippets$D,
+  TextDropdown: snippets$E,
+  TextField: snippets$F,
+  TextLink: snippets$G,
+  Textarea: snippets$H,
+  Tiles: snippets$I,
+  Toggle: snippets$J,
+  TooltipRenderer: snippets$K
+}).map(
+  ([group, snippets2]) => snippets2.map((snippet) => ({
+    ...snippet,
+    group
+  }))
+).flat();
+export {
+  snippets
+};

package/dist/lib/playroom/useScope.cjs

@@ -0,0 +1,59 @@
+"use strict";
+const React = require("react");
+const entries_css_cjs = require("../../css.cjs");
+const lib_playroom_playroomState_cjs = require("./playroomState.cjs");
+const lib_css_atoms_sprinkles_css_cjs = require("../css/atoms/sprinkles.css.cjs");
+const lib_components_useResponsiveValue_useResponsiveValue_cjs = require("../components/useResponsiveValue/useResponsiveValue.cjs");
+const lib_css_breakpoints_cjs = require("../css/breakpoints.cjs");
+const lib_components_useToast_ToastContext_cjs = require("../components/useToast/ToastContext.cjs");
+function useScope() {
+  const responsiveValue = lib_components_useResponsiveValue_useResponsiveValue_cjs.useResponsiveValue();
+  const [colorMode, setColorMode] = React.useState(
+    "lightMode"
+  );
+  React.useEffect(() => {
+    const observer = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === "attributes" && mutation.attributeName === "class") {
+          setColorMode(
+            document.documentElement.classList.contains(lib_css_atoms_sprinkles_css_cjs.darkMode) ? "darkMode" : "lightMode"
+          );
+        }
+      }
+    });
+    observer.observe(document.documentElement, { attributes: true });
+    return () => {
+      observer.disconnect();
+    };
+  }, [colorMode]);
+  function playroomColorModeValue(value) {
+    if (typeof value !== "object" || !(value.darkMode || value.lightMode)) {
+      return;
+    }
+    return document.documentElement.classList.contains(lib_css_atoms_sprinkles_css_cjs.darkMode) ? value.darkMode : value.lightMode;
+  }
+  function playroomResponsiveValue(value) {
+    Object.values(value).forEach((v) => {
+      if (v === null) {
+        throw new Error(
+          `You cannot use 'null' as a value when using 'responsiveValue'.`
+        );
+      }
+    });
+    const resolvedValue = responsiveValue(value);
+    if (resolvedValue === null) {
+      return value.mobile;
+    }
+    return resolvedValue;
+  }
+  return {
+    vars: entries_css_cjs.vars,
+    atoms: entries_css_cjs.atoms,
+    breakpoints: lib_css_breakpoints_cjs.breakpoints,
+    showToast: lib_components_useToast_ToastContext_cjs.useToast(),
+    responsiveValue: playroomResponsiveValue,
+    colorModeValue: playroomColorModeValue,
+    ...lib_playroom_playroomState_cjs.usePlayroomStore()
+  };
+}
+exports.useScope = useScope;

package/dist/lib/playroom/useScope.mjs

@@ -0,0 +1,60 @@
+import { useState, useEffect } from "react";
+import { vars, atoms } from "../../css.mjs";
+import { usePlayroomStore } from "./playroomState.mjs";
+import { darkMode } from "../css/atoms/sprinkles.css.mjs";
+import { useResponsiveValue } from "../components/useResponsiveValue/useResponsiveValue.mjs";
+import { breakpoints } from "../css/breakpoints.mjs";
+import { useToast } from "../components/useToast/ToastContext.mjs";
+function useScope() {
+  const responsiveValue = useResponsiveValue();
+  const [colorMode, setColorMode] = useState(
+    "lightMode"
+  );
+  useEffect(() => {
+    const observer = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === "attributes" && mutation.attributeName === "class") {
+          setColorMode(
+            document.documentElement.classList.contains(darkMode) ? "darkMode" : "lightMode"
+          );
+        }
+      }
+    });
+    observer.observe(document.documentElement, { attributes: true });
+    return () => {
+      observer.disconnect();
+    };
+  }, [colorMode]);
+  function playroomColorModeValue(value) {
+    if (typeof value !== "object" || !(value.darkMode || value.lightMode)) {
+      return;
+    }
+    return document.documentElement.classList.contains(darkMode) ? value.darkMode : value.lightMode;
+  }
+  function playroomResponsiveValue(value) {
+    Object.values(value).forEach((v) => {
+      if (v === null) {
+        throw new Error(
+          `You cannot use 'null' as a value when using 'responsiveValue'.`
+        );
+      }
+    });
+    const resolvedValue = responsiveValue(value);
+    if (resolvedValue === null) {
+      return value.mobile;
+    }
+    return resolvedValue;
+  }
+  return {
+    vars,
+    atoms,
+    breakpoints,
+    showToast: useToast(),
+    responsiveValue: playroomResponsiveValue,
+    colorModeValue: playroomColorModeValue,
+    ...usePlayroomStore()
+  };
+}
+export {
+  useScope
+};

package/dist/lib/playroom/utils.cjs

@@ -0,0 +1,5 @@
+"use strict";
+const React = require("react");
+const uuid = require("uuid");
+const useFallbackId = () => React.useRef(`fallbackId-${uuid.v4()}`).current;
+exports.useFallbackId = useFallbackId;

package/dist/lib/playroom/utils.mjs

@@ -0,0 +1,6 @@
+import { useRef } from "react";
+import { v4 } from "uuid";
+const useFallbackId = () => useRef(`fallbackId-${v4()}`).current;
+export {
+  useFallbackId
+};

package/dist/lib/themes/apac/apacTheme.css.cjs

@@ -0,0 +1,8 @@
+"use strict";
+const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const lib_themes_apac_tokens_cjs = require("./tokens.cjs");
+const lib_themes_makeBraidTheme_cjs = require("../makeBraidTheme.cjs");
+__vanilla_filescope__.setFileScope("src/lib/themes/apac/apacTheme.css.ts", "braid-design-system");
+const apacTheme_css = lib_themes_makeBraidTheme_cjs.makeBraidTheme(lib_themes_apac_tokens_cjs.tokens);
+__vanilla_filescope__.endFileScope();
+exports.apacTheme_css = apacTheme_css;

package/dist/lib/themes/apac/tokens.cjs

@@ -0,0 +1,19 @@
+"use strict";
+const polished = require("polished");
+const lib_color_palette_cjs = require("../../color/palette.cjs");
+const lib_themes_baseTokens_apac_cjs = require("../baseTokens/apac.cjs");
+const brandAccent = lib_color_palette_cjs.palette.seekPink["500"];
+const brandAccentSoft = lib_color_palette_cjs.palette.seekPink["50"];
+const tokens = lib_themes_baseTokens_apac_cjs.makeTokens({
+  name: "apac",
+  displayName: "APAC",
+  brand: lib_color_palette_cjs.palette.seekBlue["500"],
+  brandAccent,
+  brandAccentLight: lib_color_palette_cjs.palette.seekPink["200"],
+  brandAccentActive: polished.darken(0.05, brandAccent),
+  brandAccentHover: polished.lighten(0.05, brandAccent),
+  brandAccentSoft,
+  brandAccentSoftActive: polished.darken(0.05, brandAccentSoft),
+  brandAccentSoftHover: polished.darken(0.025, brandAccentSoft)
+});
+exports.tokens = tokens;

package/dist/lib/themes/apac/tokens.mjs

@@ -0,0 +1,20 @@
+import { darken, lighten } from "polished";
+import { palette } from "../../color/palette.mjs";
+import { makeTokens } from "../baseTokens/apac.mjs";
+const brandAccent = palette.seekPink["500"];
+const brandAccentSoft = palette.seekPink["50"];
+const tokens = makeTokens({
+  name: "apac",
+  displayName: "APAC",
+  brand: palette.seekBlue["500"],
+  brandAccent,
+  brandAccentLight: palette.seekPink["200"],
+  brandAccentActive: darken(0.05, brandAccent),
+  brandAccentHover: lighten(0.05, brandAccent),
+  brandAccentSoft,
+  brandAccentSoftActive: darken(0.05, brandAccentSoft),
+  brandAccentSoftHover: darken(0.025, brandAccentSoft)
+});
+export {
+  tokens
+};

package/dist/lib/themes/baseTokens/apac.cjs

@@ -0,0 +1,292 @@
+"use strict";
+const robotoMetrics = require("@capsizecss/metrics/roboto.js");
+const polished = require("polished");
+const merge = require("lodash/merge.js");
+const lib_color_palette_cjs = require("../../color/palette.cjs");
+const lib_themes_tokenType_cjs = require("../tokenType.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const robotoMetrics__default = /* @__PURE__ */ _interopDefaultCompat(robotoMetrics);
+const merge__default = /* @__PURE__ */ _interopDefaultCompat(merge);
+const legacyViolet = {
+  900: "#1E0B65",
+  800: "#341B87",
+  700: "#512EAA",
+  600: "#6C41CE",
+  500: "#8B5CEB",
+  400: "#AD84F2",
+  300: "#C6ACF5",
+  200: "#E1D1F9",
+  100: "#F1E8FD",
+  50: "#FAF5FE"
+};
+const makeTokens = ({
+  name,
+  displayName,
+  brand,
+  brandAccent,
+  brandAccentLight,
+  brandAccentActive,
+  brandAccentHover,
+  brandAccentSoft,
+  brandAccentSoftActive,
+  brandAccentSoftHover,
+  tokenOverrides = {}
+}) => {
+  const formAccent = lib_color_palette_cjs.palette.indigo["500"];
+  const critical = lib_color_palette_cjs.palette.red["700"];
+  const focus = polished.rgba(lib_color_palette_cjs.palette.indigo["300"], 0.7);
+  const white = "#fff";
+  const tokens = {
+    name,
+    displayName,
+    legacy: true,
+    typography: {
+      fontFamily: `Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif`,
+      webFont: null,
+      fontMetrics: lib_themes_tokenType_cjs.extractFontMetricsForTheme(robotoMetrics__default.default),
+      fontWeight: {
+        regular: 400,
+        medium: 600,
+        strong: 700
+      },
+      heading: {
+        weight: {
+          weak: "regular",
+          regular: "medium"
+        },
+        level: {
+          "1": {
+            mobile: {
+              fontSize: 28,
+              rows: 9
+            },
+            tablet: {
+              fontSize: 42,
+              rows: 11
+            }
+          },
+          "2": {
+            mobile: {
+              fontSize: 21,
+              rows: 8
+            },
+            tablet: {
+              fontSize: 28,
+              rows: 9
+            }
+          },
+          "3": {
+            mobile: {
+              fontSize: 21,
+              rows: 7
+            },
+            tablet: {
+              fontSize: 21,
+              rows: 7
+            }
+          },
+          "4": {
+            mobile: {
+              fontSize: 18,
+              rows: 7
+            },
+            tablet: {
+              fontSize: 18,
+              rows: 7
+            }
+          }
+        }
+      },
+      text: {
+        xsmall: {
+          mobile: {
+            fontSize: 12,
+            rows: 5
+          },
+          tablet: {
+            fontSize: 12,
+            rows: 5
+          }
+        },
+        small: {
+          mobile: {
+            fontSize: 14,
+            rows: 5
+          },
+          tablet: {
+            fontSize: 14,
+            rows: 5
+          }
+        },
+        standard: {
+          mobile: {
+            fontSize: 16,
+            rows: 6
+          },
+          tablet: {
+            fontSize: 16,
+            rows: 6
+          }
+        },
+        large: {
+          mobile: {
+            fontSize: 18,
+            rows: 7
+          },
+          tablet: {
+            fontSize: 18,
+            rows: 7
+          }
+        }
+      }
+    },
+    contentWidth: {
+      xsmall: 400,
+      small: 660,
+      medium: 940,
+      large: 1280
+    },
+    grid: 4,
+    touchableSize: 11,
+    space: {
+      gutter: 6,
+      xxsmall: 1,
+      xsmall: 2,
+      small: 3,
+      medium: 5,
+      large: 8,
+      xlarge: 12,
+      xxlarge: 24,
+      xxxlarge: 30
+    },
+    transforms: {
+      touchable: "scale(0.95)"
+    },
+    transitions: {
+      fast: "transform .125s ease, opacity .125s ease",
+      touchable: "transform 0.2s cubic-bezier(0.02, 1.505, 0.745, 1.235)"
+    },
+    border: {
+      radius: {
+        small: "2px",
+        standard: "4px",
+        large: "6px",
+        xlarge: "10px"
+      },
+      width: {
+        standard: 1,
+        large: 2
+      },
+      color: {
+        brandAccent,
+        brandAccentLight,
+        caution: lib_color_palette_cjs.palette.yellow["500"],
+        cautionLight: lib_color_palette_cjs.palette.yellow["300"],
+        critical,
+        criticalLight: lib_color_palette_cjs.palette.red["300"],
+        field: lib_color_palette_cjs.palette.grey["400"],
+        focus,
+        formAccent,
+        formAccentLight: lib_color_palette_cjs.palette.indigo["300"],
+        info: lib_color_palette_cjs.palette.blue["700"],
+        infoLight: lib_color_palette_cjs.palette.blue["300"],
+        neutral: lib_color_palette_cjs.palette.grey["700"],
+        neutralLight: lib_color_palette_cjs.palette.grey["200"],
+        neutralInverted: white,
+        positive: lib_color_palette_cjs.palette.mint["700"],
+        positiveLight: lib_color_palette_cjs.palette.mint["300"],
+        promote: legacyViolet["700"],
+        promoteLight: legacyViolet["300"]
+      }
+    },
+    focusRingSize: 3,
+    shadows: {
+      small: [
+        `0 2px 4px 0px ${polished.rgba(lib_color_palette_cjs.palette.grey["800"], 0.1)}`,
+        `0 2px 2px -2px ${polished.rgba(lib_color_palette_cjs.palette.grey["800"], 0.1)}`,
+        `0 4px 4px -4px ${polished.rgba(lib_color_palette_cjs.palette.grey["800"], 0.2)}`
+      ].join(", "),
+      medium: [
+        `0 2px 4px 0px ${polished.rgba(lib_color_palette_cjs.palette.grey["800"], 0.1)}`,
+        `0 8px 8px -4px ${polished.rgba(lib_color_palette_cjs.palette.grey["800"], 0.1)}`,
+        `0 12px 12px -8px ${polished.rgba(lib_color_palette_cjs.palette.grey["800"], 0.2)}`
+      ].join(", "),
+      large: [
+        `0 2px 4px 0px ${polished.rgba(lib_color_palette_cjs.palette.grey["800"], 0.1)}`,
+        `0 12px 12px -4px ${polished.rgba(lib_color_palette_cjs.palette.grey["800"], 0.1)}`,
+        `0 20px 20px -12px ${polished.rgba(lib_color_palette_cjs.palette.grey["800"], 0.2)}`
+      ].join(", ")
+    },
+    color: {
+      foreground: {
+        brandAccent,
+        brandAccentLight,
+        caution: lib_color_palette_cjs.palette.yellow["900"],
+        cautionLight: lib_color_palette_cjs.palette.yellow["300"],
+        critical,
+        criticalLight: lib_color_palette_cjs.palette.red["300"],
+        formAccent,
+        formAccentLight: lib_color_palette_cjs.palette.indigo["300"],
+        info: lib_color_palette_cjs.palette.blue["700"],
+        infoLight: lib_color_palette_cjs.palette.blue["300"],
+        link: formAccent,
+        linkLight: lib_color_palette_cjs.palette.indigo["300"],
+        linkHover: formAccent,
+        linkVisited: legacyViolet["700"],
+        linkLightVisited: legacyViolet["300"],
+        neutral: lib_color_palette_cjs.palette.grey["700"],
+        neutralInverted: white,
+        positive: lib_color_palette_cjs.palette.mint["700"],
+        positiveLight: lib_color_palette_cjs.palette.mint["300"],
+        promote: legacyViolet["700"],
+        promoteLight: legacyViolet["300"],
+        rating: "#f57c00",
+        secondary: lib_color_palette_cjs.palette.grey["500"],
+        secondaryInverted: polished.rgba("#fff", 0.65)
+      },
+      background: {
+        body: lib_color_palette_cjs.palette.grey["50"],
+        bodyDark: lib_color_palette_cjs.palette.grey["900"],
+        brand,
+        brandAccent,
+        brandAccentActive,
+        brandAccentHover,
+        brandAccentSoft,
+        brandAccentSoftActive,
+        brandAccentSoftHover,
+        caution: lib_color_palette_cjs.palette.yellow["500"],
+        cautionLight: lib_color_palette_cjs.palette.yellow["100"],
+        critical,
+        criticalActive: polished.darken(0.05, critical),
+        criticalHover: polished.saturate(0.1, polished.lighten(0.05, critical)),
+        criticalLight: lib_color_palette_cjs.palette.red["100"],
+        criticalSoft: lib_color_palette_cjs.palette.red["50"],
+        criticalSoftActive: polished.darken(0.05, lib_color_palette_cjs.palette.red["50"]),
+        criticalSoftHover: polished.darken(0.025, lib_color_palette_cjs.palette.red["50"]),
+        formAccent,
+        formAccentActive: polished.darken(0.05, formAccent),
+        formAccentHover: polished.saturate(0.5, polished.lighten(0.075, formAccent)),
+        formAccentSoft: lib_color_palette_cjs.palette.indigo["50"],
+        formAccentSoftActive: polished.darken(0.05, lib_color_palette_cjs.palette.indigo["50"]),
+        formAccentSoftHover: polished.darken(0.025, lib_color_palette_cjs.palette.indigo["50"]),
+        info: lib_color_palette_cjs.palette.blue["700"],
+        infoLight: lib_color_palette_cjs.palette.blue["100"],
+        neutral: lib_color_palette_cjs.palette.grey["700"],
+        neutralActive: polished.darken(0.05, lib_color_palette_cjs.palette.grey["700"]),
+        neutralHover: polished.lighten(0.05, lib_color_palette_cjs.palette.grey["700"]),
+        neutralLight: lib_color_palette_cjs.palette.grey["100"],
+        neutralSoft: lib_color_palette_cjs.palette.grey["50"],
+        neutralSoftActive: polished.darken(0.05, lib_color_palette_cjs.palette.grey["50"]),
+        neutralSoftHover: polished.darken(0.025, lib_color_palette_cjs.palette.grey["50"]),
+        positive: lib_color_palette_cjs.palette.mint["700"],
+        positiveLight: lib_color_palette_cjs.palette.mint["100"],
+        promote: legacyViolet["700"],
+        promoteLight: legacyViolet["100"],
+        surface: white,
+        surfaceDark: lib_color_palette_cjs.palette.grey["800"]
+      }
+    }
+  };
+  return merge__default.default(tokens, tokenOverrides);
+};
+exports.makeTokens = makeTokens;