npm - @protoflexo/proto-ui - Versions diffs - 0.1.0 - Mend

@protoflexo/proto-ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.js ADDED Viewed

@@ -0,0 +1,1184 @@
+// src/FlexProvider.tsx
+import { useEffect } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var FLEX_CSS_ID = "flex-design-tokens";
+function FlexProvider({ children }) {
+  useEffect(() => {
+    if (document.getElementById(FLEX_CSS_ID)) return;
+    const root = getComputedStyle(document.documentElement);
+    const hasTokens = root.getPropertyValue("--flex-off-black").trim();
+    if (!hasTokens) {
+      console.warn(
+        "[FlexProvider] Design tokens not detected. Make sure tokens.css is loaded via a <link> tag in your index.html."
+      );
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+// src/tokens.ts
+var palette = {
+  brandPurple: {
+    "01": "#2C194D",
+    "02": "#6A3DB8",
+    "03": "#DDC6F9",
+    "04": "#EEE2FC",
+    "05": "#E3E1E6"
+  },
+  offWhite: "#F7F7F7",
+  offBlack: "#1D1D1D",
+  white: "#FFFFFF",
+  black: "#000000",
+  grayPurple: {
+    "01": "#EDEBF1",
+    "02": "#D5D1DB",
+    "03": "#C0BACA",
+    "04": "#ABA3B8",
+    "05": "#958CA6",
+    "06": "#807594",
+    "07": "#6B5E82",
+    "08": "#564771"
+  },
+  gray: {
+    "01": "#F3F3F3",
+    "02": "#EEEEEE",
+    "03": "#E2E2E2",
+    "04": "#BBBBBB",
+    "05": "#949494",
+    "06": "#737373",
+    "07": "#6A6A6A",
+    "08": "#535353"
+  },
+  success: {
+    "01": "#01795C",
+    "02": "#67AF9D",
+    "03": "#B3D7CE",
+    "04": "#E6F2EF"
+  },
+  error: {
+    "01": "#7A0800",
+    "02": "#E27474",
+    "03": "#F0BABA",
+    "04": "#FAE8E8"
+  },
+  warning: {
+    "01": "#C8880A",
+    "05": "#FFF5E2"
+  },
+  red: {
+    "01": "#CE1818"
+  },
+  blue: {
+    "01": "#00359C",
+    "02": "#1C53BA",
+    "03": "#6CA3EB",
+    "04": "#B1D4FF",
+    "05": "#E5EEFF"
+  }
+};
+var spacing = {
+  12: 2,
+  18: 3,
+  25: 4,
+  37: 6,
+  50: 8,
+  75: 12,
+  87: 14,
+  100: 16,
+  112: 18,
+  125: 20,
+  150: 24,
+  175: 28,
+  200: 32,
+  250: 40,
+  275: 44,
+  300: 48,
+  325: 52,
+  350: 56,
+  375: 60,
+  400: 64,
+  500: 80,
+  600: 96,
+  725: 116,
+  800: 128,
+  900: 144
+};
+var radius = {
+  none: 0,
+  xs: 2,
+  sm: 4,
+  md: 8,
+  mlg: 10,
+  lg: 12,
+  xl: 16,
+  xxl: 20,
+  xxxl: 24,
+  super: 100,
+  full: 9999
+};
+var fontFamily = {
+  sans: "'ABCDiatype', system-ui, -apple-system, sans-serif",
+  serif: "'CooperBT-Medium', Georgia, serif",
+  mono: "'ABCDiatypeSemi-Mono', ui-monospace, monospace"
+};
+var fontSize = {
+  250: 10,
+  300: 12,
+  350: 14,
+  400: 16,
+  450: 18,
+  500: 20,
+  550: 22,
+  600: 24,
+  700: 28,
+  800: 32,
+  900: 36,
+  1e3: 40,
+  1200: 48
+};
+var lineHeight = {
+  350: 14,
+  400: 16,
+  450: 18,
+  475: 19,
+  500: 20,
+  550: 22,
+  600: 24,
+  700: 28,
+  850: 34,
+  925: 37,
+  1050: 42,
+  1225: 49
+};
+var fontWeight = {
+  regular: 400,
+  medium: 500,
+  bold: 700
+};
+// src/hooks/useFlexTheme.ts
+function useFlexTheme() {
+  return {
+    palette,
+    spacing,
+    radius,
+    fontFamily,
+    fontSize,
+    lineHeight,
+    fontWeight
+  };
+}
+// src/components/Typography.tsx
+import React from "react";
+var typeStyles = {
+  "hero.lg": { fontFamily: "var(--flex-font-serif)", fontSize: 40, lineHeight: "42px", fontWeight: 400, letterSpacing: -0.8 },
+  "hero.lg.italic": { fontFamily: "var(--flex-font-serif)", fontSize: 40, lineHeight: "42px", fontWeight: 400, letterSpacing: -0.8, fontStyle: "italic" },
+  "hero.lg.number": { fontFamily: "var(--flex-font-mono)", fontSize: 48, lineHeight: "49px", fontWeight: 500, letterSpacing: -0.96 },
+  "hero.md": { fontFamily: "var(--flex-font-serif)", fontSize: 28, lineHeight: "37px", fontWeight: 400, letterSpacing: -0.56 },
+  "hero.md.italic": { fontFamily: "var(--flex-font-serif)", fontSize: 32, lineHeight: "37px", fontWeight: 400, letterSpacing: -0.64, fontStyle: "italic" },
+  "hero.sm": { fontFamily: "var(--flex-font-sans)", fontSize: 32, lineHeight: "37px", fontWeight: 700, letterSpacing: 0 },
+  "hero.sm.expressive": { fontFamily: "var(--flex-font-serif)", fontSize: 32, lineHeight: "37px", fontWeight: 400, letterSpacing: 0 },
+  "hero.sm.expressive.italic": { fontFamily: "var(--flex-font-serif)", fontSize: 32, lineHeight: "37px", fontWeight: 400, letterSpacing: 0, fontStyle: "italic" },
+  "hero.sm.number": { fontFamily: "var(--flex-font-mono)", fontSize: 24, lineHeight: "34px", fontWeight: 500, letterSpacing: 0 },
+  "page.title": { fontFamily: "var(--flex-font-sans)", fontSize: 22, lineHeight: "34px", fontWeight: 700, letterSpacing: -0.44 },
+  "section.title": { fontFamily: "var(--flex-font-sans)", fontSize: 18, lineHeight: "28px", fontWeight: 700, letterSpacing: -0.36 },
+  "title.number": { fontFamily: "var(--flex-font-mono)", fontSize: 20, lineHeight: "28px", fontWeight: 500, letterSpacing: -0.4 },
+  "header.sm": { fontFamily: "var(--flex-font-sans)", fontSize: 16, lineHeight: "24px", fontWeight: 500, letterSpacing: -0.16 },
+  "headline": { fontFamily: "var(--flex-font-serif)", fontSize: 48, lineHeight: "49px", fontWeight: 400, letterSpacing: -0.96 },
+  "body": { fontFamily: "var(--flex-font-sans)", fontSize: 16, lineHeight: "21.6px", fontWeight: 400, letterSpacing: -0.16 },
+  "body.md": { fontFamily: "var(--flex-font-sans)", fontSize: 14, lineHeight: "18px", fontWeight: 400, letterSpacing: -0.14 },
+  "body.sm": { fontFamily: "var(--flex-font-sans)", fontSize: 12, lineHeight: "16px", fontWeight: 400, letterSpacing: -0.12 },
+  "body.xs": { fontFamily: "var(--flex-font-sans)", fontSize: 10, lineHeight: "14px", fontWeight: 400, letterSpacing: -0.1 },
+  "body.bold": { fontFamily: "var(--flex-font-sans)", fontSize: 16, lineHeight: "22px", fontWeight: 700, letterSpacing: -0.16 },
+  "body.md.bold": { fontFamily: "var(--flex-font-sans)", fontSize: 14, lineHeight: "18px", fontWeight: 700, letterSpacing: -0.14 },
+  "body.input": { fontFamily: "var(--flex-font-sans)", fontSize: 16, lineHeight: "21.6px", fontWeight: 400, letterSpacing: 0 },
+  "body.hyperlink": { fontFamily: "var(--flex-font-sans)", fontSize: 16, lineHeight: "21.6px", fontWeight: 500, letterSpacing: -0.16, textDecoration: "underline" },
+  "body.md.hyperlink": { fontFamily: "var(--flex-font-sans)", fontSize: 14, lineHeight: "18px", fontWeight: 400, letterSpacing: -0.14, textDecoration: "underline" },
+  "label": { fontFamily: "var(--flex-font-sans)", fontSize: 16, lineHeight: "21.6px", fontWeight: 500, letterSpacing: 0 },
+  "label.sm": { fontFamily: "var(--flex-font-sans)", fontSize: 12, lineHeight: "16.2px", fontWeight: 400, letterSpacing: -0.12 },
+  "label.sm.bold": { fontFamily: "var(--flex-font-sans)", fontSize: 12, lineHeight: "16.2px", fontWeight: 700, letterSpacing: -0.12 },
+  "label.sm.hyperlink": { fontFamily: "var(--flex-font-sans)", fontSize: 12, lineHeight: "16.2px", fontWeight: 400, letterSpacing: -0.12, textDecoration: "underline" },
+  "button": { fontFamily: "var(--flex-font-sans)", fontSize: 16, lineHeight: "21.6px", fontWeight: 500, letterSpacing: -0.16 },
+  "button.sm": { fontFamily: "var(--flex-font-sans)", fontSize: 14, lineHeight: "19px", fontWeight: 500, letterSpacing: -0.14 },
+  "number": { fontFamily: "var(--flex-font-mono)", fontSize: 16, lineHeight: "21.6px", fontWeight: 400, letterSpacing: -0.16 },
+  "number.bold": { fontFamily: "var(--flex-font-mono)", fontSize: 16, lineHeight: "21.6px", fontWeight: 700, letterSpacing: -0.16 },
+  "caption": { fontFamily: "var(--flex-font-sans)", fontSize: 10, lineHeight: "13.5px", fontWeight: 400, letterSpacing: -0.1 },
+  "caption.hyperlink": { fontFamily: "var(--flex-font-sans)", fontSize: 10, lineHeight: "13.5px", fontWeight: 400, letterSpacing: -0.1, textDecoration: "underline" },
+  "overline": { fontFamily: "var(--flex-font-sans)", fontSize: 10, lineHeight: "13.5px", fontWeight: 400, letterSpacing: 1, textTransform: "uppercase" }
+};
+var defaultElement = {
+  "hero.lg": "h1",
+  "hero.md": "h1",
+  "hero.sm": "h2",
+  "headline": "h1",
+  "page.title": "h1",
+  "section.title": "h2",
+  "header.sm": "h3",
+  "label": "label",
+  "label.sm": "label",
+  "label.sm.bold": "label",
+  "caption": "span",
+  "overline": "span"
+};
+function Typography({
+  type = "body",
+  color,
+  weight,
+  align,
+  as,
+  style,
+  children,
+  className
+}) {
+  const Tag = as ?? defaultElement[type] ?? "span";
+  const baseStyle = typeStyles[type];
+  const mergedStyle = {
+    ...baseStyle,
+    color: color ?? "var(--flex-text-default)",
+    margin: 0,
+    ...weight != null && { fontWeight: weight },
+    ...align != null && { textAlign: align },
+    ...style
+  };
+  return React.createElement(Tag, { style: mergedStyle, className }, children);
+}
+// src/components/Divider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Divider({ color, spacing: spacing2 = 0, style }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        height: 1,
+        backgroundColor: color ?? "var(--flex-border-subdued)",
+        marginTop: spacing2,
+        marginBottom: spacing2,
+        ...style
+      }
+    }
+  );
+}
+// src/components/Button.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var variantStyles = {
+  primary: { bg: "var(--flex-action-primary)", text: "var(--flex-off-white)" },
+  secondary: { bg: "var(--flex-action-secondary)", text: "var(--flex-text-link)" },
+  outline: { bg: "var(--flex-white)", text: "var(--flex-brand-purple-01)", border: "var(--flex-brand-purple-01)" },
+  minimal: { bg: "transparent", text: "var(--flex-brand-purple-01)" },
+  destructive: { bg: "var(--flex-red-01)", text: "var(--flex-off-white)" }
+};
+function Button({
+  variant = "primary",
+  size = "default",
+  disabled = false,
+  loading = false,
+  icon,
+  fullWidth = false,
+  onClick,
+  children,
+  style,
+  type = "button"
+}) {
+  const isDisabled = disabled || loading;
+  const v = variantStyles[variant] ?? variantStyles.primary;
+  const baseStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    borderRadius: 9999,
+    border: variant === "outline" ? `1px solid ${v.border}` : "none",
+    backgroundColor: v.bg,
+    color: v.text,
+    fontFamily: "var(--flex-font-sans)",
+    fontWeight: 500,
+    fontSize: size === "sm" ? 14 : 16,
+    lineHeight: size === "sm" ? "19px" : "21.6px",
+    letterSpacing: size === "sm" ? -0.14 : -0.16,
+    height: size === "sm" ? 32 : 48,
+    minHeight: size === "sm" ? 32 : 48,
+    paddingLeft: size === "sm" ? 16 : 24,
+    paddingRight: size === "sm" ? 16 : 24,
+    cursor: isDisabled ? "not-allowed" : "pointer",
+    opacity: isDisabled ? 0.5 : 1,
+    width: fullWidth ? "100%" : void 0,
+    transition: "background-color 150ms ease, opacity 150ms ease",
+    ...style
+  };
+  if (isDisabled && variant !== "minimal" && variant !== "outline") {
+    baseStyle.backgroundColor = "var(--flex-gray-03)";
+  }
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type,
+      onClick: isDisabled ? void 0 : onClick,
+      disabled: isDisabled,
+      style: baseStyle,
+      children: loading ? /* @__PURE__ */ jsx3(
+        "span",
+        {
+          style: {
+            width: 16,
+            height: 16,
+            border: "2px solid currentColor",
+            borderTopColor: "transparent",
+            borderRadius: "50%",
+            animation: "flex-spin 0.6s linear infinite"
+          }
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+        icon,
+        children
+      ] })
+    }
+  );
+}
+// src/components/TextField.tsx
+import { useState } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function TextField({
+  label,
+  value,
+  placeholder,
+  helperText,
+  error,
+  disabled = false,
+  type = "text",
+  onChange,
+  onFocus,
+  onBlur,
+  style,
+  inputStyle
+}) {
+  const [hasFocus, setHasFocus] = useState(false);
+  const borderColor = error ? "var(--flex-border-critical)" : hasFocus ? "var(--flex-border-pressed)" : "var(--flex-border-default)";
+  const borderWidth = hasFocus && !error ? 2 : 1;
+  return /* @__PURE__ */ jsxs2("div", { style, children: [
+    label && /* @__PURE__ */ jsx4(
+      "label",
+      {
+        style: {
+          display: "block",
+          fontFamily: "var(--flex-font-sans)",
+          fontSize: 14,
+          lineHeight: "18px",
+          fontWeight: 400,
+          letterSpacing: -0.14,
+          color: "var(--flex-text-default)",
+          marginBottom: 6
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "input",
+      {
+        type,
+        value,
+        placeholder,
+        disabled,
+        onChange: (e) => onChange?.(e.target.value),
+        onFocus: () => {
+          setHasFocus(true);
+          onFocus?.();
+        },
+        onBlur: () => {
+          setHasFocus(false);
+          onBlur?.();
+        },
+        style: {
+          width: "100%",
+          boxSizing: "border-box",
+          fontFamily: "var(--flex-font-sans)",
+          fontSize: 16,
+          lineHeight: "21.6px",
+          fontWeight: 400,
+          letterSpacing: 0,
+          color: disabled ? "var(--flex-text-disabled)" : "var(--flex-text-default)",
+          backgroundColor: disabled ? "var(--flex-surface-disabled)" : "var(--flex-white)",
+          border: `${borderWidth}px solid ${borderColor}`,
+          borderRadius: 12,
+          paddingLeft: 12,
+          paddingRight: 12,
+          paddingTop: 16,
+          paddingBottom: 16,
+          outline: "none",
+          transition: "border-color 150ms ease",
+          ...inputStyle
+        }
+      }
+    ),
+    (helperText || error) && /* @__PURE__ */ jsx4(
+      "div",
+      {
+        style: {
+          fontFamily: "var(--flex-font-sans)",
+          fontSize: 12,
+          lineHeight: "16px",
+          fontWeight: 400,
+          letterSpacing: -0.12,
+          color: error ? "var(--flex-text-critical)" : "var(--flex-text-subdued)",
+          marginTop: 4
+        },
+        children: error || helperText
+      }
+    )
+  ] });
+}
+// src/components/Checkbox.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function Checkbox({ checked = false, onChange, label, disabled = false, style }) {
+  return /* @__PURE__ */ jsxs3(
+    "label",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 8,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx5(
+          "div",
+          {
+            onClick: disabled ? void 0 : () => onChange?.(!checked),
+            style: {
+              width: 20,
+              height: 20,
+              borderRadius: 4,
+              border: checked ? "none" : "2px solid var(--flex-border-default)",
+              backgroundColor: checked ? "var(--flex-brand-purple-02)" : "var(--flex-white)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "background-color 150ms ease, border-color 150ms ease",
+              flexShrink: 0,
+              cursor: "inherit"
+            },
+            children: checked && /* @__PURE__ */ jsx5("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", children: /* @__PURE__ */ jsx5("path", { d: "M1 5L4.5 8.5L11 1.5", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+          }
+        ),
+        label && /* @__PURE__ */ jsx5(
+          "span",
+          {
+            style: {
+              fontFamily: "var(--flex-font-sans)",
+              fontSize: 16,
+              lineHeight: "21.6px",
+              fontWeight: 400,
+              letterSpacing: -0.16,
+              color: "var(--flex-text-default)"
+            },
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+// src/components/Radio.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Radio({ selected = false, onSelect, label, disabled = false, style }) {
+  return /* @__PURE__ */ jsxs4(
+    "label",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 8,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx6(
+          "div",
+          {
+            onClick: disabled ? void 0 : onSelect,
+            style: {
+              width: 20,
+              height: 20,
+              borderRadius: "50%",
+              border: `2px solid ${selected ? "var(--flex-brand-purple-02)" : "var(--flex-border-default)"}`,
+              backgroundColor: "var(--flex-white)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "border-color 150ms ease",
+              flexShrink: 0,
+              cursor: "inherit"
+            },
+            children: selected && /* @__PURE__ */ jsx6(
+              "div",
+              {
+                style: {
+                  width: 10,
+                  height: 10,
+                  borderRadius: "50%",
+                  backgroundColor: "var(--flex-brand-purple-02)"
+                }
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ jsx6(
+          "span",
+          {
+            style: {
+              fontFamily: "var(--flex-font-sans)",
+              fontSize: 16,
+              lineHeight: "21.6px",
+              fontWeight: 400,
+              letterSpacing: -0.16,
+              color: "var(--flex-text-default)"
+            },
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+// src/components/Toggle.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Toggle({ checked = false, onChange, disabled = false, style }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      onClick: disabled ? void 0 : () => onChange?.(!checked),
+      role: "switch",
+      "aria-checked": checked,
+      style: {
+        position: "relative",
+        width: 39,
+        height: 24,
+        borderRadius: 12,
+        backgroundColor: checked ? "var(--flex-brand-purple-02)" : "var(--flex-gray-purple-02)",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        transition: "background-color 200ms ease",
+        flexShrink: 0,
+        ...style
+      },
+      children: /* @__PURE__ */ jsx7(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: 3,
+            left: checked ? 18 : 3,
+            width: 18,
+            height: 18,
+            borderRadius: "50%",
+            backgroundColor: "var(--flex-white)",
+            boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
+            transition: "left 200ms ease"
+          }
+        }
+      )
+    }
+  );
+}
+// src/components/Card.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var variantBg = {
+  default: "var(--flex-surface-default)",
+  subdued: "var(--flex-surface-subdued)",
+  brand: "var(--flex-surface-brand)",
+  elevated: "var(--flex-surface-default)"
+};
+function Card({
+  variant = "default",
+  selected = false,
+  onClick,
+  header,
+  children,
+  style
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      onClick,
+      style: {
+        padding: 16,
+        borderRadius: 10,
+        backgroundColor: variantBg[variant] ?? variantBg.default,
+        border: selected ? "2px solid var(--flex-brand-purple-02)" : "1px solid var(--flex-border-subdued)",
+        boxShadow: variant === "elevated" ? "0 10px 30px rgba(14, 6, 34, 0.1)" : void 0,
+        cursor: onClick ? "pointer" : void 0,
+        transition: "border-color 150ms ease, box-shadow 150ms ease",
+        ...style
+      },
+      children: [
+        header && /* @__PURE__ */ jsx8(
+          "div",
+          {
+            style: {
+              paddingBottom: 16,
+              borderBottom: "1px solid var(--flex-gray-purple-02)",
+              marginBottom: 16
+            },
+            children: header
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+// src/components/ListItem.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function ListItem({
+  title,
+  subtitle,
+  leading,
+  trailing,
+  onClick,
+  divider = true,
+  style
+}) {
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      onClick,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        padding: "12px 0",
+        borderBottom: divider ? "1px solid var(--flex-border-subdued)" : void 0,
+        cursor: onClick ? "pointer" : void 0,
+        ...style
+      },
+      children: [
+        leading && /* @__PURE__ */ jsx9("div", { style: { flexShrink: 0 }, children: leading }),
+        /* @__PURE__ */ jsxs6("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx9(
+            "div",
+            {
+              style: {
+                fontFamily: "var(--flex-font-sans)",
+                fontSize: 16,
+                lineHeight: "21.6px",
+                fontWeight: 400,
+                letterSpacing: -0.16,
+                color: "var(--flex-text-default)",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: title
+            }
+          ),
+          subtitle && /* @__PURE__ */ jsx9(
+            "div",
+            {
+              style: {
+                fontFamily: "var(--flex-font-sans)",
+                fontSize: 14,
+                lineHeight: "18px",
+                fontWeight: 400,
+                letterSpacing: -0.14,
+                color: "var(--flex-text-subdued)",
+                marginTop: 2,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: subtitle
+            }
+          )
+        ] }),
+        trailing && /* @__PURE__ */ jsx9("div", { style: { flexShrink: 0 }, children: trailing })
+      ]
+    }
+  );
+}
+// src/components/Page.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function Page({ children, stickyFooter, backgroundColor, style }) {
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        minHeight: "100%",
+        backgroundColor: backgroundColor ?? "var(--flex-surface-subdued)",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx10("div", { style: { flex: 1, overflow: "auto" }, children }),
+        stickyFooter && /* @__PURE__ */ jsx10(
+          "div",
+          {
+            style: {
+              position: "sticky",
+              bottom: 0,
+              padding: 16,
+              backgroundColor: backgroundColor ?? "var(--flex-surface-subdued)",
+              borderTop: "1px solid var(--flex-border-subdued)"
+            },
+            children: stickyFooter
+          }
+        )
+      ]
+    }
+  );
+}
+// src/components/Modal.tsx
+import { useEffect as useEffect2 } from "react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function Modal({ open, onClose, title, children, style }) {
+  useEffect2(() => {
+    if (!open) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 1e3,
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "var(--flex-surface-default)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "12px 16px",
+              borderBottom: "1px solid var(--flex-border-subdued)"
+            },
+            children: [
+              /* @__PURE__ */ jsx11(
+                "div",
+                {
+                  style: {
+                    fontFamily: "var(--flex-font-sans)",
+                    fontSize: 18,
+                    lineHeight: "28px",
+                    fontWeight: 700,
+                    letterSpacing: -0.36,
+                    color: "var(--flex-text-default)"
+                  },
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsx11(
+                "button",
+                {
+                  onClick: onClose,
+                  style: {
+                    background: "none",
+                    border: "none",
+                    padding: 8,
+                    cursor: "pointer",
+                    color: "var(--flex-icon-subdued)",
+                    fontSize: 20,
+                    lineHeight: 1
+                  },
+                  "aria-label": "Close",
+                  children: "\u2715"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx11("div", { style: { flex: 1, overflow: "auto", ...style }, children })
+      ]
+    }
+  );
+}
+// src/components/Select.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function Select({
+  label,
+  value,
+  options,
+  onChange,
+  placeholder,
+  error,
+  disabled = false,
+  style
+}) {
+  const borderColor = error ? "var(--flex-border-critical)" : "var(--flex-border-default)";
+  return /* @__PURE__ */ jsxs9("div", { style, children: [
+    label && /* @__PURE__ */ jsx12(
+      "label",
+      {
+        style: {
+          display: "block",
+          fontFamily: "var(--flex-font-sans)",
+          fontSize: 14,
+          lineHeight: "18px",
+          fontWeight: 400,
+          letterSpacing: -0.14,
+          color: "var(--flex-text-default)",
+          marginBottom: 6
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs9(
+      "select",
+      {
+        value,
+        onChange: (e) => onChange?.(e.target.value),
+        disabled,
+        style: {
+          width: "100%",
+          boxSizing: "border-box",
+          fontFamily: "var(--flex-font-sans)",
+          fontSize: 16,
+          lineHeight: "21.6px",
+          fontWeight: 400,
+          color: disabled ? "var(--flex-text-disabled)" : "var(--flex-text-default)",
+          backgroundColor: disabled ? "var(--flex-surface-disabled)" : "var(--flex-white)",
+          border: `1px solid ${borderColor}`,
+          borderRadius: 12,
+          paddingLeft: 12,
+          paddingRight: 32,
+          paddingTop: 16,
+          paddingBottom: 16,
+          outline: "none",
+          appearance: "none",
+          backgroundImage: `url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236A6A6A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")`,
+          backgroundRepeat: "no-repeat",
+          backgroundPosition: "right 12px center",
+          cursor: disabled ? "not-allowed" : "pointer"
+        },
+        children: [
+          placeholder && /* @__PURE__ */ jsx12("option", { value: "", disabled: true, children: placeholder }),
+          options.map((opt) => /* @__PURE__ */ jsx12("option", { value: opt.value, children: opt.label }, opt.value))
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx12(
+      "div",
+      {
+        style: {
+          fontFamily: "var(--flex-font-sans)",
+          fontSize: 12,
+          lineHeight: "16px",
+          color: "var(--flex-text-critical)",
+          marginTop: 4
+        },
+        children: error
+      }
+    )
+  ] });
+}
+// src/components/Toast.tsx
+import { useState as useState2, useCallback, useEffect as useEffect3 } from "react";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var variantStyles2 = {
+  brand: { bg: "var(--flex-surface-brand)", icon: "var(--flex-icon-brand)", border: "var(--flex-brand-purple-03)" },
+  success: { bg: "var(--flex-surface-success)", icon: "var(--flex-icon-success)", border: "var(--flex-border-success-subdued)" },
+  warning: { bg: "var(--flex-surface-warning)", icon: "var(--flex-icon-warning)", border: "var(--flex-border-warning)" },
+  error: { bg: "var(--flex-surface-critical)", icon: "var(--flex-icon-critical)", border: "var(--flex-border-critical-subdued)" }
+};
+function Toast({ title, description, variant = "brand", visible, onDismiss, duration = 4e3 }) {
+  const v = variantStyles2[variant] ?? variantStyles2.brand;
+  useEffect3(() => {
+    if (!visible || !onDismiss || !duration) return;
+    const timer = setTimeout(onDismiss, duration);
+    return () => clearTimeout(timer);
+  }, [visible, onDismiss, duration]);
+  if (!visible) return null;
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 16,
+        left: 16,
+        right: 16,
+        zIndex: 2e3,
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 12,
+        padding: 16,
+        borderRadius: 12,
+        backgroundColor: v.bg,
+        border: `1px solid ${v.border}`,
+        animation: "flex-slide-down 300ms ease"
+      },
+      children: [
+        /* @__PURE__ */ jsxs10("div", { style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx13(
+            "div",
+            {
+              style: {
+                fontFamily: "var(--flex-font-sans)",
+                fontSize: 16,
+                lineHeight: "21.6px",
+                fontWeight: 500,
+                letterSpacing: 0,
+                color: "var(--flex-text-default)"
+              },
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsx13(
+            "div",
+            {
+              style: {
+                fontFamily: "var(--flex-font-sans)",
+                fontSize: 14,
+                lineHeight: "18px",
+                fontWeight: 400,
+                letterSpacing: -0.14,
+                color: "var(--flex-text-subdued)",
+                marginTop: 4
+              },
+              children: description
+            }
+          )
+        ] }),
+        onDismiss && /* @__PURE__ */ jsx13(
+          "button",
+          {
+            onClick: onDismiss,
+            style: {
+              background: "none",
+              border: "none",
+              padding: 4,
+              cursor: "pointer",
+              color: "var(--flex-icon-subdued)",
+              fontSize: 16,
+              lineHeight: 1,
+              flexShrink: 0
+            },
+            "aria-label": "Dismiss",
+            children: "\u2715"
+          }
+        )
+      ]
+    }
+  );
+}
+function useToast() {
+  const [toast, setToast] = useState2(null);
+  const show = useCallback((props) => {
+    setToast(props);
+  }, []);
+  const dismiss = useCallback(() => {
+    setToast(null);
+  }, []);
+  return {
+    toastProps: {
+      ...toast ?? { title: "" },
+      visible: toast !== null,
+      onDismiss: dismiss
+    },
+    show,
+    dismiss
+  };
+}
+// src/components/Skeleton.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function Skeleton({
+  width = "100%",
+  height = 16,
+  borderRadius = 8,
+  style
+}) {
+  return /* @__PURE__ */ jsx14(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        borderRadius,
+        backgroundColor: "var(--flex-gray-purple-01)",
+        animation: "flex-pulse 1.5s ease-in-out infinite",
+        ...style
+      }
+    }
+  );
+}
+// src/components/ProgressBar.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function ProgressBar({
+  progress,
+  width = "100%",
+  height = 8,
+  style
+}) {
+  const clampedProgress = Math.max(0, Math.min(1, progress));
+  const isComplete = clampedProgress >= 1;
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        borderRadius: height / 2,
+        backgroundColor: "var(--flex-cloud)",
+        overflow: "hidden",
+        ...style
+      },
+      children: /* @__PURE__ */ jsx15(
+        "div",
+        {
+          style: {
+            width: `${clampedProgress * 100}%`,
+            height: "100%",
+            borderRadius: height / 2,
+            backgroundColor: isComplete ? "var(--flex-success-01)" : "var(--flex-brand-purple-02)",
+            transition: "width 300ms ease, background-color 300ms ease"
+          }
+        }
+      )
+    }
+  );
+}
+// src/components/Accordion.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+function Accordion({
+  title,
+  children,
+  defaultOpen = false,
+  onChange,
+  style
+}) {
+  const [open, setOpen] = useState3(defaultOpen);
+  const toggle = () => {
+    const next = !open;
+    setOpen(next);
+    onChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      style: {
+        borderRadius: 10,
+        backgroundColor: "var(--flex-surface-default)",
+        border: "1px solid var(--flex-border-subdued)",
+        overflow: "hidden",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs11(
+          "button",
+          {
+            onClick: toggle,
+            style: {
+              width: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: 16,
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              fontFamily: "var(--flex-font-sans)",
+              fontSize: 16,
+              lineHeight: "21.6px",
+              fontWeight: 500,
+              letterSpacing: 0,
+              color: "var(--flex-text-default)",
+              textAlign: "left"
+            },
+            children: [
+              title,
+              /* @__PURE__ */ jsx16(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 16 16",
+                  fill: "none",
+                  style: {
+                    flexShrink: 0,
+                    transform: open ? "rotate(180deg)" : "rotate(0deg)",
+                    transition: "transform 200ms ease"
+                  },
+                  children: /* @__PURE__ */ jsx16(
+                    "path",
+                    {
+                      d: "M4 6L8 10L12 6",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx16(
+          "div",
+          {
+            style: {
+              padding: "0 16px 16px"
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Accordion,
+  Button,
+  Card,
+  Checkbox,
+  Divider,
+  FlexProvider,
+  ListItem,
+  Modal,
+  Page,
+  ProgressBar,
+  Radio,
+  Select,
+  Skeleton,
+  TextField,
+  Toast,
+  Toggle,
+  Typography,
+  fontFamily,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  palette,
+  radius,
+  spacing,
+  useFlexTheme,
+  useToast
+};