@noya-app/noya-designsystem 0.1.13 → 0.1.14

package/dist/index.js

@@ -43,6 +43,7 @@ __export(src_exports, {
   CompletionToken: () => CompletionToken,
   ContextMenu: () => ContextMenu,
   DesignSystemConfigurationProvider: () => DesignSystemConfigurationProvider,
+  DesignSystemThemeProvider: () => DesignSystemThemeProvider,
   Dialog: () => Dialog,
   DialogProvider: () => DialogProvider,
   DimensionInput: () => DimensionInput,
@@ -506,6 +507,7 @@ var import_react35 = __toESM(require("react"));
 var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/contexts/DesignSystemConfiguration.tsx
+var import_noya_keymap3 = require("@noya-app/noya-keymap");
 var import_react34 = __toESM(require("react"));
 var import_styled_components15 = require("styled-components");
 
@@ -593,6 +595,231 @@ var Toast = ({
 };
 var ToastProvider = ({ children }) => /* @__PURE__ */ import_react8.default.createElement(ToastPrimitive.Provider, null, children, /* @__PURE__ */ import_react8.default.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
 var import_react32 = __toESM(require("react"));
 var import_styled_components14 = __toESM(require("styled-components"));
@@ -1565,6 +1792,7 @@ function Popover({
       onFocusOutside,
       onPointerDownOutside,
       collisionPadding: 8,
+      arrowPadding: 2,
       onPointerDown: (event) => {
         event.stopPropagation();
       },
@@ -1590,6 +1818,8 @@ var InputFieldContext = (0, import_react31.createContext)({
   }
 });
 var LabelContainer = import_styled_components13.default.label(({ theme, labelPosition, hasDropdown, pointerEvents }) => ({
+  ...theme.textStyles.label,
+  fontWeight: "bold",
   color: theme.colors.textDisabled,
   position: "absolute",
   top: 0,
@@ -1599,8 +1829,6 @@ var LabelContainer = import_styled_components13.default.label(({ theme, labelPos
   display: "flex",
   alignItems: "center",
   pointerEvents,
-  fontWeight: "bold",
-  fontSize: "60%",
   userSelect: "none",
   ...labelPosition === "start" ? { justifyContent: "flex-start", paddingLeft: "6px" } : {
     justifyContent: "flex-end",
@@ -2162,23 +2390,49 @@ var useCurrentFloatingWindowInternal = () => {
 };
 
 // src/contexts/DesignSystemConfiguration.tsx
-var DesignSystemConfigurationContext = (0, import_react34.createContext)(void 0);
+var DesignSystemThemeProvider = (0, import_react34.memo)(
+  function DesignSystemThemeProvider2({
+    children,
+    theme
+  }) {
+    const parentTheme = (0, import_styled_components15.useTheme)();
+    if (theme) {
+      return /* @__PURE__ */ import_react34.default.createElement(import_styled_components15.ThemeProvider, { theme }, children);
+    } else if (parentTheme) {
+      return children;
+    } else {
+      return /* @__PURE__ */ import_react34.default.createElement(import_styled_components15.ThemeProvider, { theme: light_exports }, children);
+    }
+  }
+);
+var DesignSystemConfigurationContext = (0, import_react34.createContext)({
+  platform: "key"
+});
 var DesignSystemConfigurationProvider = (0, import_react34.memo)(
   function DesignSystemConfigurationProvider2({
     children,
-    theme,
+    theme = light_exports,
     platform
   }) {
-    const contextValue = (0, import_react34.useMemo)(() => ({ platform }), [platform]);
+    const [internalPlatform, setInternalPlatform] = (0, import_react34.useState)(
+      platform ?? "key"
+    );
+    (0, import_react34.useEffect)(() => {
+      if (platform !== void 0)
+        return;
+      if (typeof navigator !== "undefined") {
+        setInternalPlatform((0, import_noya_keymap3.getCurrentPlatform)(navigator));
+      }
+    }, [platform]);
+    const contextValue = (0, import_react34.useMemo)(
+      () => ({ platform: platform ?? internalPlatform }),
+      [platform, internalPlatform]
+    );
     return /* @__PURE__ */ import_react34.default.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react34.default.createElement(import_styled_components15.ThemeProvider, { theme }, /* @__PURE__ */ import_react34.default.createElement(DialogProvider, null, /* @__PURE__ */ import_react34.default.createElement(ToastProvider, null, /* @__PURE__ */ import_react34.default.createElement(FloatingWindowProvider, null, children)))));
   }
 );
 function useDesignSystemConfiguration() {
-  const value = (0, import_react34.useContext)(DesignSystemConfigurationContext);
-  if (!value) {
-    throw new Error("Missing DesignSystemConfigurationProvider");
-  }
-  return value;
+  return (0, import_react34.useContext)(DesignSystemConfigurationContext);
 }
 function useDesignSystemTheme() {
   return (0, import_styled_components15.useTheme)();
@@ -2425,7 +2679,7 @@ var Chip = (0, import_react35.memo)(function Chip2({
 
 // src/components/ContextMenu.tsx
 var import_noya_icons4 = require("@noya-app/noya-icons");
-var import_noya_keymap3 = require("@noya-app/noya-keymap");
+var import_noya_keymap4 = require("@noya-app/noya-keymap");
 var RadixContextMenu = __toESM(require("@radix-ui/react-context-menu"));
 var import_react36 = __toESM(require("react"));
 var import_styled_components17 = __toESM(require("styled-components"));
@@ -2507,7 +2761,7 @@ function ContextMenuRoot({
     () => isNested || shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
     [isNested, items, onSelect, shouldBindKeyboardShortcuts]
   );
-  (0, import_noya_keymap3.useKeyboardShortcuts)(keymap);
+  (0, import_noya_keymap4.useKeyboardShortcuts)(keymap);
   const onPointerDown = (0, import_react36.useCallback)((event) => {
     event.preventDefault();
   }, []);
@@ -3583,7 +3837,7 @@ var ScrollArea = (0, import_react45.memo)(function ScrollArea2({ children }) {
 });
 
 // src/components/GridView.tsx
-var sizes = {
+var sizes2 = {
   xxs: {
     itemWidth: 36,
     itemHeight: 36,
@@ -3619,9 +3873,9 @@ var Grid2 = import_styled_components24.default.div(({ theme, size: size2, paddin
   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))`,
@@ -5534,6 +5788,14 @@ var createChevronSVGString = (0, import_noya_utils11.memoize)(
   </svg>
 `
 );
+var SelectContainer = import_styled_components32.default.div(
+  ({ flex }) => ({
+    flex: flex ?? "1 1 0px",
+    display: "flex",
+    flexDirection: "row",
+    position: "relative"
+  })
+);
 var SelectElement = import_styled_components32.default.select(
   ({ theme, flex }) => ({
     appearance: "none",
@@ -5565,10 +5827,25 @@ var SelectElement = import_styled_components32.default.select(
     }
   })
 );
+var SelectLabel = import_styled_components32.default.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 = (0, import_react55.memo)(function Select2({
   id,
   flex,
   value,
+  label,
   ...rest
 }) {
   const options = "options" in rest ? rest.options : void 0;
@@ -5595,7 +5872,7 @@ var Select = (0, import_react55.memo)(function Select2({
     }),
     []
   );
-  return /* @__PURE__ */ import_react55.default.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react55.default.createElement(
+  return /* @__PURE__ */ import_react55.default.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react55.default.createElement(SelectContainer, { flex }, /* @__PURE__ */ import_react55.default.createElement(
     SelectElement,
     {
       id,
@@ -5608,7 +5885,7 @@ var Select = (0, import_react55.memo)(function Select2({
       onPointerDown: (event) => event.stopPropagation()
     },
     optionElements
-  ));
+  )), label && /* @__PURE__ */ import_react55.default.createElement(SelectLabel, { htmlFor: id }, label));
 });
 
 // src/components/Slider.tsx
@@ -5772,241 +6049,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
 });
 var import_immer = __toESM(require("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 = (0, import_immer.default)(colors, (colors3) => {
   colors3.logo.fill = "rgb(248,248,250)";
@@ -6335,6 +6387,7 @@ var DimensionInput = (0, import_react61.memo)(function DimensionInput2({
   CompletionToken,
   ContextMenu,
   DesignSystemConfigurationProvider,
+  DesignSystemThemeProvider,
   Dialog,
   DialogProvider,
   DimensionInput,