@noya-app/noya-designsystem 0.1.13 → 0.1.15

package/dist/index.mjs

@@ -389,11 +389,14 @@ import React21, { memo as memo11 } from "react";
 import styled14 from "styled-components";
 
 // src/contexts/DesignSystemConfiguration.tsx
+import { getCurrentPlatform } from "@noya-app/noya-keymap";
 import React19, {
   createContext as createContext5,
   memo as memo10,
   useContext as useContext5,
-  useMemo as useMemo9
+  useEffect as useEffect11,
+  useMemo as useMemo9,
+  useState as useState13
 } from "react";
 import { ThemeProvider, useTheme as useTheme2 } from "styled-components";
 
@@ -485,6 +488,231 @@ var Toast = ({
 };
 var ToastProvider = ({ children }) => /* @__PURE__ */ React7.createElement(ToastPrimitive.Provider, null, children, /* @__PURE__ */ React7.createElement(ToastViewport, null));
 
+// src/theme/light.ts
+var light_exports = {};
+__export(light_exports, {
+  colors: () => colors,
+  fonts: () => fonts,
+  name: () => name,
+  sizes: () => sizes,
+  textStyles: () => textStyles
+});
+
+// src/mediaQuery.ts
+var size = {
+  medium: "800px",
+  large: "1280px",
+  xlarge: "1550px",
+  xxlarge: "1680px"
+};
+var mediaQuery = {
+  small: `@media (max-width: ${size.medium})`,
+  medium: `@media (max-width: ${size.large}) and (min-width: ${size.medium})`,
+  large: `@media (max-width: ${size.xlarge}) and (min-width: ${size.large})`,
+  xlarge: `@media (min-width: ${size.xlarge})`
+};
+
+// src/theme/light.ts
+var name = "light";
+var colors = {
+  logo: {
+    fill: "rgb(175,175,175)",
+    highlight: "rgb(175,175,175)"
+  },
+  text: "rgb(38, 48, 83)",
+  textMuted: "rgb(85, 85, 85)",
+  textSubtle: "rgb(121, 121, 121)",
+  textDisabled: "rgb(160, 160, 160)",
+  textDecorativeLight: "rgb(168, 185, 212)",
+  dividerSubtle: "rgba(0, 0, 0, 0.04)",
+  divider: "rgba(0, 0, 0, 0.07)",
+  dividerStrong: "rgba(0, 0, 0, 0.09)",
+  primary: "rgb(132, 63, 255)",
+  primaryLight: "rgb(147, 86, 255)",
+  secondary: "rgb(0, 151, 117)",
+  secondaryLight: "rgb(0, 160, 129)",
+  secondaryBright: "#0ab557",
+  warning: "rgb(251, 211, 0)",
+  neutralBackground: "rgb(222,223,232)",
+  inputBackground: "rgb(240, 240, 242)",
+  inputBackgroundLight: "rgb(243, 243, 245)",
+  codeBackground: "rgb(250, 250, 250)",
+  codeBackgroundLight: "rgb(250, 250, 250)",
+  get codeBackgroundDark() {
+    return colors.text;
+  },
+  codeBackgroundDecorativeDark: "#435080",
+  selectedBackground: "rgb(242, 245, 250)",
+  transparentChecker: "rgba(255,255,255,0.8)",
+  activeBackground: "rgba(0,0,0,0.1)",
+  scrollbar: "rgba(199,199,199,0.8)",
+  placeholderDots: "rgba(0,0,0,0.3)",
+  breadcrumb: {
+    get text() {
+      return colors.textMuted;
+    },
+    get textHover() {
+      return colors.textSubtle;
+    },
+    get icon() {
+      return colors.icon;
+    }
+  },
+  listView: {
+    raisedBackground: "rgba(0,0,0,0.03)",
+    editingBackground: "#fff"
+  },
+  canvas: {
+    background: "rgb(249,249,249)",
+    get selectionStroke() {
+      return colors.primary;
+    },
+    dragHandleStroke: "rgba(180,180,180,0.5)",
+    measurement: "rgb(207,92,42)",
+    sliceOutline: "rgb(210,210,210)",
+    grid: "rgba(0,0,0,0.05)"
+  },
+  sidebar: {
+    background: "rgba(252,252,252,0.85)"
+  },
+  popover: {
+    background: "rgb(252,252,252)",
+    divider: "transparent"
+  },
+  slider: {
+    background: "white",
+    border: "#BBB"
+  },
+  radioGroup: {
+    background: "white"
+  },
+  icon: "rgb(139, 139, 139)",
+  iconSelected: "rgb(220, 220, 220)",
+  mask: "rgb(12,193,67)",
+  imageOverlay: "linear-gradient(0deg, rgba(132, 63, 255,0.55), rgba(132, 63, 255,0.55))",
+  get dragOutline() {
+    return colors.primary;
+  },
+  selection: "rgb(179,215,254)",
+  thumbnailBackground: "#f0efff",
+  thumbnailShadow: "#D3CEED66"
+};
+var fonts = {
+  normal: "'__Inter_6b0edc', '__Inter_Fallback_6b0edc', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+  monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace"
+};
+var typeScale = [3.052, 2.441, 1.953, 1.563, 1.25, 1, 0.85];
+var textStyles = {
+  title: {
+    fontFamily: fonts.normal,
+    fontSize: `${typeScale[0]}rem`,
+    fontWeight: "bold",
+    lineHeight: "1.4",
+    letterSpacing: "-0.05em",
+    [mediaQuery.small]: {
+      fontSize: "36px"
+    }
+  },
+  subtitle: {
+    fontFamily: fonts.normal,
+    fontSize: `${typeScale[3]}rem`,
+    fontWeight: 500,
+    lineHeight: "1.75",
+    letterSpacing: "-0.05em",
+    [mediaQuery.small]: {
+      fontSize: "18px"
+    }
+  },
+  heading1: {
+    fontFamily: fonts.normal,
+    fontSize: `${typeScale[2]}rem`,
+    fontWeight: 500,
+    lineHeight: "1.75",
+    letterSpacing: "-0.025em"
+  },
+  heading2: {
+    fontFamily: fonts.normal,
+    fontSize: `${typeScale[3]}rem`,
+    fontWeight: 500,
+    lineHeight: "1.75",
+    letterSpacing: "-0.025em"
+  },
+  heading3: {
+    fontFamily: fonts.normal,
+    fontSize: `${typeScale[4]}rem`,
+    fontWeight: 500,
+    lineHeight: "1.75",
+    letterSpacing: "-0.025em"
+  },
+  heading4: {
+    fontFamily: fonts.normal,
+    fontSize: `${typeScale[5]}rem`,
+    fontWeight: 500,
+    lineHeight: "1.75"
+  },
+  heading5: {
+    fontFamily: fonts.normal,
+    fontSize: `${typeScale[6]}rem`,
+    fontWeight: 500,
+    lineHeight: "1.75"
+  },
+  body: {
+    fontFamily: fonts.normal,
+    fontSize: `${typeScale[5]}rem`,
+    fontWeight: 400,
+    lineHeight: "1.75"
+  },
+  small: {
+    fontFamily: fonts.normal,
+    fontSize: `${typeScale[6]}rem`,
+    fontWeight: 400,
+    lineHeight: "1.4"
+  },
+  button: {
+    fontFamily: fonts.normal,
+    fontSize: "0.8rem",
+    fontWeight: 500,
+    lineHeight: "1.4",
+    letterSpacing: "-0.2px"
+  },
+  code: {
+    fontFamily: fonts.monospace,
+    fontSize: "90%",
+    lineHeight: "1.5"
+  },
+  label: {
+    fontFamily: fonts.normal,
+    fontSize: "0.62rem",
+    fontWeight: 400,
+    lineHeight: "1.4",
+    textTransform: "uppercase",
+    letterSpacing: "-0.3px"
+  }
+};
+var sizes = {
+  sidebarWidth: 260,
+  toolbar: {
+    height: 46,
+    itemSeparator: 8
+  },
+  inspector: {
+    horizontalSeparator: 8,
+    verticalSeparator: 10
+  },
+  spacing: {
+    nano: 2,
+    micro: 4,
+    small: 8,
+    medium: 16,
+    large: 32,
+    xlarge: 64,
+    xxlarge: 128
+  },
+  dialog: {
+    padding: 16
+  }
+};
+
 // src/contexts/DialogContext.tsx
 import React17, {
   createContext as createContext3,
@@ -1500,6 +1728,7 @@ function Popover({
       onFocusOutside,
       onPointerDownOutside,
       collisionPadding: 8,
+      arrowPadding: 2,
       onPointerDown: (event) => {
         event.stopPropagation();
       },
@@ -1525,6 +1754,8 @@ var InputFieldContext = createContext2({
   }
 });
 var LabelContainer = styled12.label(({ theme, labelPosition, hasDropdown, pointerEvents }) => ({
+  ...theme.textStyles.label,
+  fontWeight: "bold",
   color: theme.colors.textDisabled,
   position: "absolute",
   top: 0,
@@ -1534,8 +1765,6 @@ var LabelContainer = styled12.label(({ theme, labelPosition, hasDropdown, pointe
   display: "flex",
   alignItems: "center",
   pointerEvents,
-  fontWeight: "bold",
-  fontSize: "60%",
   userSelect: "none",
   ...labelPosition === "start" ? { justifyContent: "flex-start", paddingLeft: "6px" } : {
     justifyContent: "flex-end",
@@ -2097,23 +2326,49 @@ var useCurrentFloatingWindowInternal = () => {
 };
 
 // src/contexts/DesignSystemConfiguration.tsx
-var DesignSystemConfigurationContext = createContext5(void 0);
+var DesignSystemThemeProvider = memo10(
+  function DesignSystemThemeProvider2({
+    children,
+    theme
+  }) {
+    const parentTheme = useTheme2();
+    if (theme) {
+      return /* @__PURE__ */ React19.createElement(ThemeProvider, { theme }, children);
+    } else if (parentTheme) {
+      return children;
+    } else {
+      return /* @__PURE__ */ React19.createElement(ThemeProvider, { theme: light_exports }, children);
+    }
+  }
+);
+var DesignSystemConfigurationContext = createContext5({
+  platform: "key"
+});
 var DesignSystemConfigurationProvider = memo10(
   function DesignSystemConfigurationProvider2({
     children,
-    theme,
+    theme = light_exports,
     platform
   }) {
-    const contextValue = useMemo9(() => ({ platform }), [platform]);
+    const [internalPlatform, setInternalPlatform] = useState13(
+      platform ?? "key"
+    );
+    useEffect11(() => {
+      if (platform !== void 0)
+        return;
+      if (typeof navigator !== "undefined") {
+        setInternalPlatform(getCurrentPlatform(navigator));
+      }
+    }, [platform]);
+    const contextValue = useMemo9(
+      () => ({ platform: platform ?? internalPlatform }),
+      [platform, internalPlatform]
+    );
     return /* @__PURE__ */ React19.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React19.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React19.createElement(DialogProvider, null, /* @__PURE__ */ React19.createElement(ToastProvider, null, /* @__PURE__ */ React19.createElement(FloatingWindowProvider, null, children)))));
   }
 );
 function useDesignSystemConfiguration() {
-  const value = useContext5(DesignSystemConfigurationContext);
-  if (!value) {
-    throw new Error("Missing DesignSystemConfigurationProvider");
-  }
-  return value;
+  return useContext5(DesignSystemConfigurationContext);
 }
 function useDesignSystemTheme() {
   return useTheme2();
@@ -2490,7 +2745,7 @@ var DividerVertical = memo13(function DividerVertical2(props) {
 
 // src/components/DraggableMenuButton.tsx
 import { DragHandleDots2Icon } from "@noya-app/noya-icons";
-import React24, { memo as memo14, useCallback as useCallback14, useState as useState14 } from "react";
+import React24, { memo as memo14, useCallback as useCallback14, useState as useState15 } from "react";
 import styled17 from "styled-components";
 var DotButtonElement = styled17.div(({ theme }) => ({
   cursor: "pointer",
@@ -2516,7 +2771,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
   isVisible = true
 }) {
   const color = useDesignSystemTheme().colors.icon;
-  const [open, setOpen] = useState14(false);
+  const [open, setOpen] = useState15(false);
   const [downPosition, setDownPosition] = React24.useState(null);
   const handlePointerDownCapture = useCallback14(
     (event) => {
@@ -3123,7 +3378,7 @@ var FillInputField = memo17(
 );
 
 // src/components/FloatingWindow.tsx
-import React28, { useCallback as useCallback15, useRef as useRef13, useState as useState15 } from "react";
+import React28, { useCallback as useCallback15, useRef as useRef13, useState as useState16 } from "react";
 var styles2 = {
   noSelect: {
     userSelect: "none",
@@ -3241,15 +3496,15 @@ var FloatingWindow = ({
   toolbarContent,
   renderToolbar = defaultRenderToolbar
 }) => {
-  const [position, setPosition] = useState15({ x: initialX, y: initialY });
-  const [size2, setSize] = useState15({
+  const [position, setPosition] = useState16({ x: initialX, y: initialY });
+  const [size2, setSize] = useState16({
     width: initialWidth,
     height: initialHeight
   });
-  const [isDragging, setIsDragging] = useState15(false);
-  const [isResizing, setIsResizing] = useState15(false);
-  const [dragOffset, setDragOffset] = useState15({ x: 0, y: 0 });
-  const [resizeDirection, setResizeDirection] = useState15(null);
+  const [isDragging, setIsDragging] = useState16(false);
+  const [isResizing, setIsResizing] = useState16(false);
+  const [dragOffset, setDragOffset] = useState16({ x: 0, y: 0 });
+  const [resizeDirection, setResizeDirection] = useState16(null);
   const wrapperRef = useRef13(null);
   const toggleGlobalTextSelection = (disable) => {
     if (disable) {
@@ -3504,7 +3759,7 @@ import styled22, { keyframes as keyframes2 } from "styled-components";
 
 // src/components/ScrollArea.tsx
 import * as RadixScrollArea from "@radix-ui/react-scroll-area";
-import React30, { memo as memo19, useCallback as useCallback17, useState as useState16 } from "react";
+import React30, { memo as memo19, useCallback as useCallback17, useState as useState17 } from "react";
 import styled21 from "styled-components";
 var SCROLLBAR_SIZE = 10;
 var StyledViewport = styled21(RadixScrollArea.Viewport)({
@@ -3533,7 +3788,7 @@ var Container2 = styled21.div({
   minHeight: 0
 });
 var ScrollArea = memo19(function ScrollArea2({ children }) {
-  const [scrollElementRef, setScrollElementRef] = useState16(null);
+  const [scrollElementRef, setScrollElementRef] = useState17(null);
   return /* @__PURE__ */ React30.createElement(Container2, null, /* @__PURE__ */ React30.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React30.createElement(
     StyledViewport,
     {
@@ -3547,7 +3802,7 @@ var ScrollArea = memo19(function ScrollArea2({ children }) {
 });
 
 // src/components/GridView.tsx
-var sizes = {
+var sizes2 = {
   xxs: {
     itemWidth: 36,
     itemHeight: 36,
@@ -3583,9 +3838,9 @@ var Grid2 = styled22.div(({ theme, size: size2, padding }) => {
   return {
     color: theme.colors.text,
     display: "grid",
-    gridTemplateColumns: `repeat(auto-fill, minmax(${sizes[size2].itemWidth}px, 1fr))`,
+    gridTemplateColumns: `repeat(auto-fill, minmax(${sizes2[size2].itemWidth}px, 1fr))`,
     // gridAutoRows: `${sizes[size].itemHeight}px`,
-    gap: `${sizes[size2].gap}px`,
+    gap: `${sizes2[size2].gap}px`,
     // gridTemplateColumns: `repeat(auto-fill, minmax(
     //   ${size === 'large' ? '280px' : size === 'small' ? '160px' : '116px'}
     // , 1fr))`,
@@ -3871,12 +4126,12 @@ import React35, {
   forwardRef as forwardRef13,
   memo as memo23,
   useCallback as useCallback21,
-  useEffect as useEffect12,
+  useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo19,
   useRef as useRef16,
-  useState as useState18
+  useState as useState19
 } from "react";
 import styled25 from "styled-components";
 
@@ -4013,9 +4268,10 @@ import React32, {
   memo as memo21,
   useCallback as useCallback19,
   useContext as useContext8,
+  useEffect as useEffect13,
   useMemo as useMemo17,
   useRef as useRef14,
-  useState as useState17
+  useState as useState18
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 var normalizeListDestinationIndex = (index, position) => {
@@ -4103,12 +4359,12 @@ function SortableRoot({
       }
     })
   );
-  const [activeIndex, setActiveIndex] = useState17();
+  const [activeIndex, setActiveIndex] = useState18();
   const activatorEvent = useRef14(null);
   const setActivatorEvent = useCallback19((event) => {
     activatorEvent.current = event;
   }, []);
-  const [position, setPosition] = useState17({ x: 0, y: 0 });
+  const [position, setPosition] = useState18({ x: 0, y: 0 });
   const handleDragStart = useCallback19(
     (event) => {
       setActiveIndex(keys.indexOf(event.active.id));
@@ -4145,6 +4401,10 @@ function SortableRoot({
     },
     [acceptsDrop, axis, keys, onMoveItem, position.x, position.y]
   );
+  const [mounted, setMounted] = useState18(false);
+  useEffect13(() => {
+    setMounted(true);
+  }, []);
   return /* @__PURE__ */ React32.createElement(
     SortableItemContext.Provider,
     {
@@ -4169,7 +4429,7 @@ function SortableRoot({
         onDragEnd: handleDragEnd
       },
       /* @__PURE__ */ React32.createElement(SortableContext, { items: keys, strategy: verticalListSortingStrategy }, children),
-      renderOverlay && createPortal2(
+      mounted && renderOverlay && createPortal2(
         /* @__PURE__ */ React32.createElement(DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
         document.body
       )
@@ -4959,8 +5219,8 @@ var InputFieldWithCompletions = memo23(
     hideMenuWhenEmptyValue = false
   }, forwardedRef) {
     const ref = useRef16(null);
-    const [isFocused, setIsFocused] = useState18(false);
-    const [state, _setState] = useState18({
+    const [isFocused, setIsFocused] = useState19(false);
+    const [state, _setState] = useState19({
       filter: initialValue,
       selectedIndex: 0
     });
@@ -5018,7 +5278,7 @@ var InputFieldWithCompletions = memo23(
       ),
       ListView.rowHeight * 10.5
     );
-    useEffect12(() => {
+    useEffect14(() => {
       if (listRef.current) {
         listRef.current.scrollToIndex(selectedIndex);
       }
@@ -5536,7 +5796,7 @@ import React40, {
   memo as memo27,
   useCallback as useCallback23,
   useContext as useContext11,
-  useEffect as useEffect13,
+  useEffect as useEffect15,
   useMemo as useMemo22,
   useRef as useRef18
 } from "react";
@@ -5548,7 +5808,7 @@ var SelectOption = memo27(function SelectOption2({
   onSelect
 }) {
   const { addListener, removeListener } = useContext11(SelectContext);
-  useEffect13(() => {
+  useEffect15(() => {
     if (!onSelect)
       return;
     addListener(value, onSelect);
@@ -5563,6 +5823,14 @@ var createChevronSVGString = memoize2(
   </svg>
 `
 );
+var SelectContainer = styled30.div(
+  ({ flex }) => ({
+    flex: flex ?? "1 1 0px",
+    display: "flex",
+    flexDirection: "row",
+    position: "relative"
+  })
+);
 var SelectElement = styled30.select(
   ({ theme, flex }) => ({
     appearance: "none",
@@ -5594,10 +5862,25 @@ var SelectElement = styled30.select(
     }
   })
 );
+var SelectLabel = styled30.label(({ theme }) => ({
+  ...theme.textStyles.label,
+  color: theme.colors.textDisabled,
+  lineHeight: "19px",
+  position: "absolute",
+  inset: "0",
+  fontWeight: "bold",
+  fontSize: "60%",
+  pointerEvents: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "end",
+  paddingRight: "24px"
+}));
 var Select = memo27(function Select2({
   id,
   flex,
   value,
+  label,
   ...rest
 }) {
   const options = "options" in rest ? rest.options : void 0;
@@ -5624,7 +5907,7 @@ var Select = memo27(function Select2({
     }),
     []
   );
-  return /* @__PURE__ */ React40.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React40.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ React40.createElement(SelectContainer, { flex }, /* @__PURE__ */ React40.createElement(
     SelectElement,
     {
       id,
@@ -5637,7 +5920,7 @@ var Select = memo27(function Select2({
       onPointerDown: (event) => event.stopPropagation()
     },
     optionElements
-  ));
+  )), label && /* @__PURE__ */ React40.createElement(SelectLabel, { htmlFor: id }, label));
 });
 
 // src/components/Slider.tsx
@@ -5806,241 +6089,16 @@ function usePlatformModKey() {
   return platform === "mac" ? "metaKey" : "ctrlKey";
 }
 
-// src/mediaQuery.ts
-var size = {
-  medium: "800px",
-  large: "1280px",
-  xlarge: "1550px",
-  xxlarge: "1680px"
-};
-var mediaQuery = {
-  small: `@media (max-width: ${size.medium})`,
-  medium: `@media (max-width: ${size.large}) and (min-width: ${size.medium})`,
-  large: `@media (max-width: ${size.xlarge}) and (min-width: ${size.large})`,
-  xlarge: `@media (min-width: ${size.xlarge})`
-};
-
 // src/theme/dark.ts
 var dark_exports = {};
 __export(dark_exports, {
   colors: () => colors2,
   fonts: () => fonts,
   name: () => name2,
-  sizes: () => sizes2,
+  sizes: () => sizes,
   textStyles: () => textStyles
 });
 import produce from "immer";
-
-// src/theme/light.ts
-var light_exports = {};
-__export(light_exports, {
-  colors: () => colors,
-  fonts: () => fonts,
-  name: () => name,
-  sizes: () => sizes2,
-  textStyles: () => textStyles
-});
-var name = "light";
-var colors = {
-  logo: {
-    fill: "rgb(175,175,175)",
-    highlight: "rgb(175,175,175)"
-  },
-  text: "rgb(38, 48, 83)",
-  textMuted: "rgb(85, 85, 85)",
-  textSubtle: "rgb(121, 121, 121)",
-  textDisabled: "rgb(160, 160, 160)",
-  textDecorativeLight: "rgb(168, 185, 212)",
-  dividerSubtle: "rgba(0, 0, 0, 0.04)",
-  divider: "rgba(0, 0, 0, 0.07)",
-  dividerStrong: "rgba(0, 0, 0, 0.09)",
-  primary: "rgb(132, 63, 255)",
-  primaryLight: "rgb(147, 86, 255)",
-  secondary: "rgb(0, 151, 117)",
-  secondaryLight: "rgb(0, 160, 129)",
-  secondaryBright: "#0ab557",
-  warning: "rgb(251, 211, 0)",
-  neutralBackground: "rgb(222,223,232)",
-  inputBackground: "rgb(240, 240, 242)",
-  inputBackgroundLight: "rgb(243, 243, 245)",
-  codeBackground: "rgb(250, 250, 250)",
-  codeBackgroundLight: "rgb(250, 250, 250)",
-  get codeBackgroundDark() {
-    return colors.text;
-  },
-  codeBackgroundDecorativeDark: "#435080",
-  selectedBackground: "rgb(242, 245, 250)",
-  transparentChecker: "rgba(255,255,255,0.8)",
-  activeBackground: "rgba(0,0,0,0.1)",
-  scrollbar: "rgba(199,199,199,0.8)",
-  placeholderDots: "rgba(0,0,0,0.3)",
-  breadcrumb: {
-    get text() {
-      return colors.textMuted;
-    },
-    get textHover() {
-      return colors.textSubtle;
-    },
-    get icon() {
-      return colors.icon;
-    }
-  },
-  listView: {
-    raisedBackground: "rgba(0,0,0,0.03)",
-    editingBackground: "#fff"
-  },
-  canvas: {
-    background: "rgb(249,249,249)",
-    get selectionStroke() {
-      return colors.primary;
-    },
-    dragHandleStroke: "rgba(180,180,180,0.5)",
-    measurement: "rgb(207,92,42)",
-    sliceOutline: "rgb(210,210,210)",
-    grid: "rgba(0,0,0,0.05)"
-  },
-  sidebar: {
-    background: "rgba(252,252,252,0.85)"
-  },
-  popover: {
-    background: "rgb(252,252,252)",
-    divider: "transparent"
-  },
-  slider: {
-    background: "white",
-    border: "#BBB"
-  },
-  radioGroup: {
-    background: "white"
-  },
-  icon: "rgb(139, 139, 139)",
-  iconSelected: "rgb(220, 220, 220)",
-  mask: "rgb(12,193,67)",
-  imageOverlay: "linear-gradient(0deg, rgba(132, 63, 255,0.55), rgba(132, 63, 255,0.55))",
-  get dragOutline() {
-    return colors.primary;
-  },
-  selection: "rgb(179,215,254)",
-  thumbnailBackground: "#f0efff",
-  thumbnailShadow: "#D3CEED66"
-};
-var fonts = {
-  normal: "'__Inter_6b0edc', '__Inter_Fallback_6b0edc', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
-  monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace"
-};
-var typeScale = [3.052, 2.441, 1.953, 1.563, 1.25, 1, 0.85];
-var textStyles = {
-  title: {
-    fontFamily: fonts.normal,
-    fontSize: `${typeScale[0]}rem`,
-    fontWeight: "bold",
-    lineHeight: "1.4",
-    letterSpacing: "-0.05em",
-    [mediaQuery.small]: {
-      fontSize: "36px"
-    }
-  },
-  subtitle: {
-    fontFamily: fonts.normal,
-    fontSize: `${typeScale[3]}rem`,
-    fontWeight: 500,
-    lineHeight: "1.75",
-    letterSpacing: "-0.05em",
-    [mediaQuery.small]: {
-      fontSize: "18px"
-    }
-  },
-  heading1: {
-    fontFamily: fonts.normal,
-    fontSize: `${typeScale[2]}rem`,
-    fontWeight: 500,
-    lineHeight: "1.75",
-    letterSpacing: "-0.025em"
-  },
-  heading2: {
-    fontFamily: fonts.normal,
-    fontSize: `${typeScale[3]}rem`,
-    fontWeight: 500,
-    lineHeight: "1.75",
-    letterSpacing: "-0.025em"
-  },
-  heading3: {
-    fontFamily: fonts.normal,
-    fontSize: `${typeScale[4]}rem`,
-    fontWeight: 500,
-    lineHeight: "1.75",
-    letterSpacing: "-0.025em"
-  },
-  heading4: {
-    fontFamily: fonts.normal,
-    fontSize: `${typeScale[5]}rem`,
-    fontWeight: 500,
-    lineHeight: "1.75"
-  },
-  heading5: {
-    fontFamily: fonts.normal,
-    fontSize: `${typeScale[6]}rem`,
-    fontWeight: 500,
-    lineHeight: "1.75"
-  },
-  body: {
-    fontFamily: fonts.normal,
-    fontSize: `${typeScale[5]}rem`,
-    fontWeight: 400,
-    lineHeight: "1.75"
-  },
-  small: {
-    fontFamily: fonts.normal,
-    fontSize: `${typeScale[6]}rem`,
-    fontWeight: 400,
-    lineHeight: "1.4"
-  },
-  button: {
-    fontFamily: fonts.normal,
-    fontSize: "0.8rem",
-    fontWeight: 500,
-    lineHeight: "1.4",
-    letterSpacing: "-0.2px"
-  },
-  code: {
-    fontFamily: fonts.monospace,
-    fontSize: "90%",
-    lineHeight: "1.5"
-  },
-  label: {
-    fontFamily: fonts.normal,
-    fontSize: "0.62rem",
-    fontWeight: 400,
-    lineHeight: "1.4",
-    textTransform: "uppercase",
-    letterSpacing: "0.3px"
-  }
-};
-var sizes2 = {
-  sidebarWidth: 260,
-  toolbar: {
-    height: 46,
-    itemSeparator: 8
-  },
-  inspector: {
-    horizontalSeparator: 8,
-    verticalSeparator: 10
-  },
-  spacing: {
-    nano: 2,
-    micro: 4,
-    small: 8,
-    medium: 16,
-    large: 32,
-    xlarge: 64,
-    xxlarge: 128
-  },
-  dialog: {
-    padding: 16
-  }
-};
-
-// src/theme/dark.ts
 var name2 = "dark";
 var colors2 = produce(colors, (colors3) => {
   colors3.logo.fill = "rgb(248,248,250)";
@@ -6368,6 +6426,7 @@ export {
   CompletionToken,
   ContextMenu,
   DesignSystemConfigurationProvider,
+  DesignSystemThemeProvider,
   Dialog,
   DialogProvider,
   DimensionInput,