@adminide-stack/yantra-mobile 12.0.128 → 12.0.129-alpha.1

package/lib/features/design/editor/controls.js

@@ -0,0 +1,630 @@
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useRef,useMemo}from'react';import {View,Text,ScrollView,StyleSheet,PanResponder,TextInput}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {useCanvasTheme,themedStyles}from'../../canvas/canvasTheme.js';import {Pressable,RADIUS,SPACE,TYPE}from'../../canvas/canvasUi.js';import {resolveTextFont}from'../render/fontRegistry.js';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function ToolChip({
+  icon,
+  label,
+  onPress,
+  active,
+  danger,
+  disabled,
+  swatch
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const ink = danger ? theme.edDanger : active ? theme.edAccent : theme.edInk;
+  return /* @__PURE__ */ jsxs(Pressable, { onPress, disabled, style: ({
+    pressed
+  }) => [styles.chip, active && styles.chipOn, disabled && styles.disabled, pressed && styles.pressed], accessibilityRole: "button", accessibilityLabel: label, accessibilityState: {
+    selected: Boolean(active),
+    disabled: Boolean(disabled)
+  }, children: [
+    swatch ? /* @__PURE__ */ jsx(View, { style: [styles.swatchDot, {
+      backgroundColor: swatch
+    }] }) : icon ? /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 20, color: ink }) : null,
+    /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, {
+      color: ink
+    }], numberOfLines: 1, children: label })
+  ] });
+}
+function ChipRow({
+  children,
+  style
+}) {
+  const styles = makeStyles(useCanvasTheme());
+  return /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, keyboardShouldPersistTaps: "handled", style: [styles.chipRow, style], contentContainerStyle: styles.chipRowContent, children });
+}
+function EditorSheet({
+  title,
+  onClose,
+  children,
+  height,
+  scroll = true,
+  right
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  return /* @__PURE__ */ jsxs(View, { style: [styles.sheet, {
+    height
+  }], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.sheetHeader, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.sheetTitle, children: title }),
+      /* @__PURE__ */ jsxs(View, { style: styles.sheetHeaderRight, children: [
+        right,
+        /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: 12, accessibilityRole: "button", accessibilityLabel: "Close", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 22, color: theme.edInk2 }) })
+      ] })
+    ] }),
+    scroll ? /* @__PURE__ */ jsx(ScrollView, { keyboardShouldPersistTaps: "handled", contentContainerStyle: styles.sheetBody, children }) : /* @__PURE__ */ jsx(View, { style: [styles.sheetBody, {
+      flex: 1
+    }], children })
+  ] });
+}
+const BASE_SWATCHES = ["#000000", "#ffffff", "#0f172a", "#64748b", "#e2e8f0", "#ef4444", "#f97316", "#f59e0b", "#eab308", "#84cc16", "#22c55e", "#14b8a6", "#06b6d4", "#3b82f6", "#6366f1", "#8b5cf6", "#d946ef", "#ec4899", "#7c2d12", "#fde68a"];
+const HEX_RE = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i;
+function ColorPicker({
+  value,
+  onChange,
+  brand = [],
+  used = [],
+  allowNone
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const [hex, setHex] = useState(value && value !== "none" ? value : "");
+  const groups = [{
+    title: "Brand colours",
+    colors: brand
+  }, {
+    title: "Colours in this design",
+    colors: used.filter((c) => !brand.includes(c))
+  }, {
+    title: "Default colours",
+    colors: BASE_SWATCHES
+  }].filter((g) => g.colors.length > 0);
+  const commitHex = () => {
+    const m = HEX_RE.exec(hex.trim());
+    if (m) onChange(`#${m[1].toLowerCase()}`);
+  };
+  return /* @__PURE__ */ jsxs(View, { style: styles.colorPicker, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.hexRow, children: [
+      /* @__PURE__ */ jsx(View, { style: [styles.hexPreview, {
+        backgroundColor: HEX_RE.test(hex) ? hex.startsWith("#") ? hex : `#${hex}` : value
+      }] }),
+      /* @__PURE__ */ jsx(TextInput, { value: hex, onChangeText: setHex, onSubmitEditing: commitHex, onBlur: commitHex, placeholder: "#000000", placeholderTextColor: theme.edInk3, autoCapitalize: "none", autoCorrect: false, style: styles.hexInput, returnKeyType: "done" }),
+      allowNone ? /* @__PURE__ */ jsx(Pressable, { onPress: () => onChange("none"), style: styles.noneButton, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.noneLabel, children: "None" }) }) : null
+    ] }),
+    groups.map((group) => /* @__PURE__ */ jsxs(View, { style: styles.swatchGroup, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.groupTitle, children: group.title }),
+      /* @__PURE__ */ jsx(View, { style: styles.swatchGrid, children: group.colors.map((color) => {
+        const on = (value == null ? void 0 : value.toLowerCase()) === color.toLowerCase();
+        return /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+          setHex(color);
+          onChange(color);
+        }, style: [styles.swatch, {
+          backgroundColor: color
+        }, on && styles.swatchOn], accessibilityRole: "button", accessibilityLabel: color }, `${group.title}${color}`);
+      }) })
+    ] }, group.title))
+  ] });
+}
+const FONT_CHOICES = ["Inter", "Arial", "Helvetica", "Georgia", "Times New Roman", "Palatino", "Garamond", "Courier New", "Impact", "Playfair Display", "Abril Fatface", "DM Serif Display", "Lora", "Merriweather", "Libre Baskerville", "Cormorant Garamond", "EB Garamond", "Poppins", "Montserrat", "Mulish", "Open Sans", "Lato", "Raleway", "Roboto", "Nunito", "Josefin Sans", "Oswald", "Bebas Neue", "Anton", "Archivo Black", "Righteous", "Shrikhand", "Pacifico", "Dancing Script"];
+function FontList({
+  value,
+  onChange,
+  designFonts = []
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const [query, setQuery] = useState("");
+  const families = useMemo(() => {
+    const all = [.../* @__PURE__ */ new Set([...designFonts, ...FONT_CHOICES])];
+    const q = query.trim().toLowerCase();
+    return q ? all.filter((f) => f.toLowerCase().includes(q)) : all;
+  }, [designFonts, query]);
+  return /* @__PURE__ */ jsxs(View, { children: [
+    /* @__PURE__ */ jsx(TextInput, { value: query, onChangeText: setQuery, placeholder: "Search fonts", placeholderTextColor: theme.edInk3, style: styles.search, autoCorrect: false }),
+    families.map((family) => {
+      const on = family === value;
+      return /* @__PURE__ */ jsxs(Pressable, { onPress: () => onChange(family), style: ({
+        pressed
+      }) => [styles.fontRow, on && styles.fontRowOn, pressed && styles.pressed], accessibilityRole: "button", accessibilityState: {
+        selected: on
+      }, children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.fontName, resolveTextFont(family, 400, false)], numberOfLines: 1, children: family }),
+        designFonts.includes(family) ? /* @__PURE__ */ jsx(Text, { style: styles.fontTag, children: "In design" }) : null,
+        on ? /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "check", size: 18, color: theme.edAccent }) : null
+      ] }, family);
+    })
+  ] });
+}
+function ValueSlider({
+  label,
+  value,
+  min,
+  max,
+  step = 0,
+  format = (v) => String(Math.round(v)),
+  onChange,
+  onDone
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const [trackW, setTrackW] = useState(0);
+  const live = useRef({
+    trackW,
+    min,
+    max,
+    step,
+    onChange,
+    onDone,
+    start: 0
+  });
+  live.current = __spreadProps(__spreadValues({}, live.current), {
+    trackW,
+    min,
+    max,
+    step,
+    onChange,
+    onDone
+  });
+  const toValue = (x) => {
+    const {
+      trackW: w,
+      min: lo,
+      max: hi,
+      step: st
+    } = live.current;
+    const t2 = w > 0 ? Math.min(1, Math.max(0, x / w)) : 0;
+    const raw = lo + t2 * (hi - lo);
+    return st > 0 ? Math.round(raw / st) * st : raw;
+  };
+  const responder = useRef(PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onPanResponderTerminationRequest: () => false,
+    onPanResponderGrant: (e) => {
+      live.current.start = e.nativeEvent.locationX;
+      live.current.onChange(toValue(e.nativeEvent.locationX));
+    },
+    onPanResponderMove: (_e, g) => live.current.onChange(toValue(live.current.start + g.dx)),
+    onPanResponderRelease: () => {
+      var _a, _b;
+      return (_b = (_a = live.current).onDone) == null ? void 0 : _b.call(_a);
+    },
+    onPanResponderTerminate: () => {
+      var _a, _b;
+      return (_b = (_a = live.current).onDone) == null ? void 0 : _b.call(_a);
+    }
+  })).current;
+  const t = max > min ? (Math.min(max, Math.max(min, value)) - min) / (max - min) : 0;
+  return /* @__PURE__ */ jsxs(View, { style: styles.slider, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.sliderHead, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.sliderLabel, children: label }),
+      /* @__PURE__ */ jsx(Text, { style: styles.sliderValue, children: format(value) })
+    ] }),
+    /* @__PURE__ */ jsxs(View, __spreadProps(__spreadValues({ style: styles.sliderTrackArea, onLayout: (e) => setTrackW(e.nativeEvent.layout.width) }, responder.panHandlers), { children: [
+      /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.sliderTrack, children: /* @__PURE__ */ jsx(View, { style: [styles.sliderFill, {
+        width: `${t * 100}%`
+      }] }) }),
+      /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [styles.sliderThumb, {
+        left: Math.max(0, t * trackW - 11)
+      }] })
+    ] }))
+  ] });
+}
+function Segmented({
+  options,
+  value,
+  onChange
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  return /* @__PURE__ */ jsx(View, { style: styles.segmented, children: options.map((o) => {
+    const on = o.id === value;
+    return /* @__PURE__ */ jsx(Pressable, { onPress: () => onChange(o.id), style: [styles.segment, on && styles.segmentOn], accessibilityRole: "button", accessibilityState: {
+      selected: on
+    }, children: /* @__PURE__ */ jsx(Text, { style: [styles.segmentLabel, on && {
+      color: theme.edOnInk
+    }], numberOfLines: 1, children: o.label }) }, o.id);
+  }) });
+}
+function PrimaryButton({
+  label,
+  onPress,
+  disabled,
+  busy
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  return /* @__PURE__ */ jsx(Pressable, { onPress, disabled: disabled || busy, style: [styles.primary, (disabled || busy) && styles.disabled], accessibilityRole: "button", accessibilityState: {
+    disabled: Boolean(disabled || busy),
+    busy: Boolean(busy)
+  }, children: /* @__PURE__ */ jsx(Text, { style: styles.primaryLabel, children: label }) });
+}
+function ToggleRow({
+  label,
+  value,
+  onChange
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  return /* @__PURE__ */ jsxs(Pressable, { onPress: () => onChange(!value), style: styles.toggleRow, accessibilityRole: "switch", accessibilityState: {
+    checked: value
+  }, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.toggleLabel, children: label }),
+    /* @__PURE__ */ jsx(View, { style: [styles.toggleTrack, value && {
+      backgroundColor: theme.edAccent
+    }], children: /* @__PURE__ */ jsx(View, { style: [styles.toggleKnob, value && {
+      alignSelf: "flex-end"
+    }] }) })
+  ] });
+}
+function FillPicker({
+  solid,
+  gradient,
+  onSolid,
+  onGradient,
+  brand = [],
+  used = []
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const [mode, setMode] = useState(gradient ? "gradient" : "solid");
+  const [stop, setStop] = useState("from");
+  const g = gradient != null ? gradient : {
+    from: solid && solid !== "none" ? solid : "#6366f1",
+    to: "#ec4899",
+    angle: 135
+  };
+  return /* @__PURE__ */ jsxs(View, { style: styles.colorPicker, children: [
+    /* @__PURE__ */ jsx(Segmented, { options: [{
+      id: "solid",
+      label: "Solid"
+    }, {
+      id: "gradient",
+      label: "Gradient"
+    }], value: mode, onChange: (m) => {
+      setMode(m);
+      if (m === "gradient" && !gradient) onGradient(g);
+      if (m === "solid" && gradient) onSolid(gradient.from);
+    } }),
+    mode === "solid" ? /* @__PURE__ */ jsx(ColorPicker, { value: solid, onChange: onSolid, brand, used }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.gradientRow, children: [
+        ["from", "to"].map((k) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => setStop(k), style: [styles.gradientStop, stop === k && {
+          borderColor: theme.edAccent
+        }], accessibilityRole: "button", accessibilityLabel: k === "from" ? "Start colour" : "End colour", accessibilityState: {
+          selected: stop === k
+        }, children: [
+          /* @__PURE__ */ jsx(View, { style: [styles.swatchDot, {
+            backgroundColor: g[k]
+          }] }),
+          /* @__PURE__ */ jsx(Text, { style: styles.toggleLabel, children: k === "from" ? "Start" : "End" })
+        ] }, k)),
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => onGradient({
+          from: g.to,
+          to: g.from,
+          angle: g.angle
+        }), style: styles.gradientStop, accessibilityRole: "button", accessibilityLabel: "Swap colours", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "swap-horizontal", size: 20, color: theme.edInk }) })
+      ] }),
+      /* @__PURE__ */ jsx(ValueSlider, { label: "Angle", value: g.angle, min: 0, max: 360, step: 5, format: (v) => `${Math.round(v)}\xB0`, onChange: (angle) => onGradient(__spreadProps(__spreadValues({}, g), {
+        angle
+      }), true) }),
+      /* @__PURE__ */ jsx(ColorPicker, { value: g[stop], onChange: (c) => onGradient(__spreadProps(__spreadValues({}, g), {
+        [stop]: c
+      })), brand, used }, stop)
+    ] })
+  ] });
+}
+function Stepper({
+  value,
+  onMinus,
+  onPlus
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  return /* @__PURE__ */ jsxs(View, { style: styles.stepper, children: [
+    /* @__PURE__ */ jsx(Pressable, { onPress: onMinus, hitSlop: 8, style: styles.stepButton, accessibilityLabel: "Smaller", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "minus", size: 18, color: theme.edInk }) }),
+    /* @__PURE__ */ jsx(Text, { style: styles.stepValue, children: value }),
+    /* @__PURE__ */ jsx(Pressable, { onPress: onPlus, hitSlop: 8, style: styles.stepButton, accessibilityLabel: "Bigger", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 18, color: theme.edInk }) })
+  ] });
+}
+const makeStyles = themedStyles((theme) => StyleSheet.create({
+  chip: {
+    minWidth: 58,
+    height: 54,
+    paddingHorizontal: SPACE.sm,
+    borderRadius: RADIUS.md,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 3
+  },
+  chipOn: {
+    backgroundColor: theme.edAccentSoft
+  },
+  chipLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    fontSize: 11
+  }),
+  swatchDot: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: theme.edLineHi
+  },
+  chipRow: {
+    flexGrow: 0
+  },
+  chipRowContent: {
+    paddingHorizontal: SPACE.sm,
+    gap: 2,
+    alignItems: "center"
+  },
+  disabled: {
+    opacity: 0.35
+  },
+  pressed: {
+    opacity: 0.7
+  },
+  sheet: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: theme.edPanel,
+    borderTopLeftRadius: RADIUS.xl,
+    borderTopRightRadius: RADIUS.xl,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.edLine,
+    shadowColor: "#000",
+    shadowOpacity: 0.18,
+    shadowRadius: 18,
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    elevation: 12
+  },
+  sheetHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: SPACE.lg,
+    paddingTop: SPACE.md,
+    paddingBottom: SPACE.sm
+  },
+  sheetHeaderRight: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.md
+  },
+  sheetTitle: __spreadProps(__spreadValues({}, TYPE.title), {
+    color: theme.edInk
+  }),
+  sheetBody: {
+    paddingHorizontal: SPACE.lg,
+    paddingBottom: SPACE.xxl
+  },
+  colorPicker: {
+    gap: SPACE.md
+  },
+  hexRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.sm
+  },
+  hexPreview: {
+    width: 36,
+    height: 36,
+    borderRadius: RADIUS.sm,
+    borderWidth: 1,
+    borderColor: theme.edLineHi
+  },
+  hexInput: __spreadValues({
+    flex: 1,
+    height: 40,
+    borderRadius: RADIUS.sm,
+    paddingHorizontal: SPACE.md,
+    backgroundColor: theme.edRaised,
+    color: theme.edInk
+  }, TYPE.body),
+  noneButton: {
+    height: 40,
+    paddingHorizontal: SPACE.md,
+    borderRadius: RADIUS.sm,
+    backgroundColor: theme.edRaised,
+    justifyContent: "center"
+  },
+  noneLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk
+  }),
+  swatchGroup: {
+    gap: SPACE.sm
+  },
+  groupTitle: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edInk2
+  }),
+  swatchGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: SPACE.sm
+  },
+  swatch: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    borderWidth: 1,
+    borderColor: theme.edLineHi
+  },
+  swatchOn: {
+    borderWidth: 3,
+    borderColor: theme.edAccent
+  },
+  search: __spreadValues({
+    height: 40,
+    borderRadius: RADIUS.pill,
+    paddingHorizontal: SPACE.lg,
+    backgroundColor: theme.edRaised,
+    color: theme.edInk,
+    marginBottom: SPACE.sm
+  }, TYPE.body),
+  fontRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.sm,
+    minHeight: 46,
+    paddingHorizontal: SPACE.sm,
+    borderRadius: RADIUS.sm
+  },
+  fontRowOn: {
+    backgroundColor: theme.edAccentSoft
+  },
+  fontName: {
+    flex: 1,
+    fontSize: 18,
+    color: theme.edInk
+  },
+  fontTag: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edInk3
+  }),
+  slider: {
+    gap: SPACE.xs,
+    paddingVertical: SPACE.xs
+  },
+  sliderHead: {
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  sliderLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk
+  }),
+  sliderValue: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk2
+  }),
+  sliderTrackArea: {
+    height: 32,
+    justifyContent: "center"
+  },
+  sliderTrack: {
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: theme.edLineHi,
+    overflow: "hidden"
+  },
+  sliderFill: {
+    height: 4,
+    backgroundColor: theme.edAccent
+  },
+  sliderThumb: {
+    position: "absolute",
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    backgroundColor: theme.edOnInk === "#ffffff" ? "#ffffff" : theme.edPanel,
+    borderWidth: 2,
+    borderColor: theme.edAccent
+  },
+  segmented: {
+    flexDirection: "row",
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edRaised,
+    padding: 3,
+    gap: 3
+  },
+  segment: {
+    flex: 1,
+    height: 34,
+    borderRadius: RADIUS.pill,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: SPACE.sm
+  },
+  segmentOn: {
+    backgroundColor: theme.edAccent
+  },
+  segmentLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk
+  }),
+  primary: {
+    height: 46,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edAccent,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: SPACE.lg
+  },
+  primaryLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edOnInk
+  }),
+  toggleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    minHeight: 40
+  },
+  toggleLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk
+  }),
+  toggleTrack: {
+    width: 40,
+    height: 24,
+    borderRadius: 12,
+    padding: 2,
+    backgroundColor: theme.edLineHi,
+    justifyContent: "center"
+  },
+  toggleKnob: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: "#ffffff"
+  },
+  gradientRow: {
+    flexDirection: "row",
+    gap: SPACE.sm
+  },
+  gradientStop: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.xs,
+    height: 40,
+    paddingHorizontal: SPACE.md,
+    borderRadius: RADIUS.md,
+    borderWidth: 2,
+    borderColor: theme.edLine,
+    backgroundColor: theme.edRaised
+  },
+  stepper: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: 40,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edRaised
+  },
+  stepButton: {
+    width: 40,
+    height: 40,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  stepValue: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk,
+    minWidth: 36,
+    textAlign: "center"
+  })
+}));export{BASE_SWATCHES,ChipRow,ColorPicker,EditorSheet,FONT_CHOICES,FillPicker,FontList,PrimaryButton,Segmented,Stepper,ToggleRow,ToolChip,ValueSlider,makeStyles};//# sourceMappingURL=controls.js.map