diff --git a/packages/perseus-editor/src/components/device-framer.tsx b/packages/perseus-editor/src/components/device-framer.tsx
index c654e551f0..71943c701a 100644
--- a/packages/perseus-editor/src/components/device-framer.tsx
+++ b/packages/perseus-editor/src/components/device-framer.tsx
@@ -2,9 +2,10 @@
* A component that displays its contents inside a device frame.
*/
-import {constants} from "@khanacademy/perseus";
import * as React from "react";
+import {lintGutterWidth, perseusFrameBorderWidth} from "../styles/constants";
+
import type {DeviceType} from "@khanacademy/perseus";
const SCREEN_SIZES = {
@@ -71,8 +72,8 @@ const DeviceFramer = ({
overflow: "scroll",
width:
SCREEN_SIZES[deviceType].framedWidth +
- 2 * constants.perseusFrameBorderWidth +
- constants.lintGutterWidth,
+ 2 * perseusFrameBorderWidth +
+ lintGutterWidth,
}}
>
{children}
diff --git a/packages/perseus-editor/src/components/viewport-resizer.tsx b/packages/perseus-editor/src/components/viewport-resizer.tsx
index 7acc3a82b3..e62f4dab6b 100644
--- a/packages/perseus-editor/src/components/viewport-resizer.tsx
+++ b/packages/perseus-editor/src/components/viewport-resizer.tsx
@@ -2,13 +2,14 @@
* A component that displays controls for choosing a viewport size.
* Renders three buttons: "Phone", "Tablet", and "Desktop".
*/
-import {components, constants, icons} from "@khanacademy/perseus";
+import {components, icons} from "@khanacademy/perseus";
import * as React from "react";
+import {devices} from "../styles/constants";
+
import type {DeviceType} from "@khanacademy/perseus";
const {ButtonGroup, InlineIcon} = components;
-const {devices} = constants;
const {iconDesktop, iconMobilePhone, iconTablet} = icons;
type Props = {
diff --git a/packages/perseus-editor/src/content-preview.tsx b/packages/perseus-editor/src/content-preview.tsx
index 73194b8164..301f3169f1 100644
--- a/packages/perseus-editor/src/content-preview.tsx
+++ b/packages/perseus-editor/src/content-preview.tsx
@@ -5,7 +5,6 @@ import {
import {MobileKeypad} from "@khanacademy/math-input";
import {
Renderer,
- constants,
usePerseusI18n,
type APIOptions,
type DeviceType,
@@ -16,6 +15,8 @@ import {spacing} from "@khanacademy/wonder-blocks-tokens";
import {StyleSheet} from "aphrodite";
import * as React from "react";
+import {lintGutterWidth} from "./styles/constants";
+
import type {LinterContextProps} from "@khanacademy/perseus-linter";
/**
@@ -85,7 +86,7 @@ const styles = StyleSheet.create({
containerType: "inline-size",
containerName: "perseus-root",
},
- gutter: {marginRight: constants.lintGutterWidth},
+ gutter: {marginRight: lintGutterWidth},
});
export default ContentPreview;
diff --git a/packages/perseus/src/components/constants.ts b/packages/perseus-editor/src/styles/constants.ts
similarity index 100%
rename from packages/perseus/src/components/constants.ts
rename to packages/perseus-editor/src/styles/constants.ts
diff --git a/packages/perseus/src/index.ts b/packages/perseus/src/index.ts
index fe3f336f43..2ed9585bff 100644
--- a/packages/perseus/src/index.ts
+++ b/packages/perseus/src/index.ts
@@ -42,7 +42,6 @@ export * as GrapherUtil from "./widgets/grapher/util";
* Misc
*/
export * as components from "./components";
-export * as constants from "./components/constants";
// TODO(FEI-4504): Replace globalStyles with wonder-blocks where possible
export * as globalStyles from "./styles/global-styles";
// TODO(FEI-4504): Replace globalStyles with wonder-blocks where possible