playroom 0.44.0 → 0.44.1

package/CHANGELOG.md

@@ -1,9 +1,57 @@
 # playroom
 
+## 0.44.1
+
+### Patch Changes
+
+- [#426](https://github.com/seek-oss/playroom/pull/426) [`934992c`](https://github.com/seek-oss/playroom/commit/934992c6c9bb1b265375996e3971cc58a22ef3b3) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - refactor: Improve internal structure enable UI flexibility
+
+- [#435](https://github.com/seek-oss/playroom/pull/435) [`f1f7869`](https://github.com/seek-oss/playroom/commit/f1f7869605640886a514f9511e10504c0ebe7a7d) Thanks [@felixhabib](https://github.com/felixhabib)! - Ensure UI size adapts to mobile browser toolbars that appear and disappear.
+
+  Use dynamic viewport units to ensure the UI remains responsive across different devices.
+
+- [#439](https://github.com/seek-oss/playroom/pull/439) [`61654dc`](https://github.com/seek-oss/playroom/commit/61654dc133809d7b5aafebfd70479dac4d84e62f) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Migrate top-level layout to CSS Grid
+
+  Refactor the top-level layout of Playroom to use CSS Grid in preparation for upcoming UI features.
+
+  Additionally, migrate away from `re-resizable` package for panel resizing in favour of a custom implementation to improve UI performance.
+
+- [#438](https://github.com/seek-oss/playroom/pull/438) [`4ae409a`](https://github.com/seek-oss/playroom/commit/4ae409a96332fbbefb8fdaf89fb3760017dcc87d) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Remove legacy undocked editor mode
+
+  An earlier version of Playroom had support for an undocked editor mode, previously hidden from the UI due to being buggy.
+  Removing this code in preparation for UI uplift work.
+
+- [#440](https://github.com/seek-oss/playroom/pull/440) [`a3e9893`](https://github.com/seek-oss/playroom/commit/a3e9893183830f3c23e46240af89edb256a9a9b1) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Refactor internal space and radius tokens
+
+  Evolve the internal space and radius scales to be more fit for purpose with upcoming UI work.
+
 ## 0.44.0
 
 ### Minor Changes
 
+- [#421](https://github.com/seek-oss/playroom/pull/421) [`6fd2aab`](https://github.com/seek-oss/playroom/commit/6fd2aabd4cb910972d9280a4707af361d35926ec) Thanks [@askoufis](https://github.com/askoufis)! - Playroom's utility API is now bundled for both ESM and CJS
+
+  **BREAKING CHANGE:**
+
+  Migrating the utils entries to TypeScript has necessitated an internal build step to produce both ESM and CJS versions.
+  As a result, these APIs are now exposed as named exports at the top level of the `playroom` package.
+
+  **MIGRATION GUIDE:**
+
+  For ESM imports:
+
+  ```diff
+  -import { createUrl } from 'playroom/utils';
+  +import { createUrl } from 'playroom';
+  ```
+
+  or for CJS usage:
+
+  ```diff
+  -const { createUrl } = require('playroom/utils');
+  +const { createUrl } = require('playroom');
+  ```
+
 - [#417](https://github.com/seek-oss/playroom/pull/417) [`03d145d`](https://github.com/seek-oss/playroom/commit/03d145d755d9f431df632618604a807fcf181d21) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Improved handling of rendering errors
 
   Errors occurring during render no longer replace the frame contents with a red error message.
@@ -24,18 +72,6 @@
 
 ### Patch Changes
 
-- [#421](https://github.com/seek-oss/playroom/pull/421) [`6fd2aab`](https://github.com/seek-oss/playroom/commit/6fd2aabd4cb910972d9280a4707af361d35926ec) Thanks [@askoufis](https://github.com/askoufis)! - Playroom's utility API is now bundled for both ESM and CJS
-
-  **EXAMPLE USAGE:**
-
-  ```js
-  // ESM import
-  import { createUrl } from 'playroom';
-
-  // CJS require
-  const { createUrl } = require('playroom');
-  ```
-
 - [#424](https://github.com/seek-oss/playroom/pull/424) [`8795fde`](https://github.com/seek-oss/playroom/commit/8795fdeab1383886bc1adfdf417b600391a512ba) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Use `clsx` consistently for building class lists
 
   Remove `classnames` in favor of `clsx` for building class lists in the Playroom codebase.

package/dist/index.d.mts

@@ -1,7 +1,4 @@
-import "react/jsx-runtime";
-import "react";
-
-//#region src/Playroom/Playroom.d.ts
+//#region src/configModules/widths.d.ts
 type Widths = Array<number | 'Fit to window'>;
 //#endregion
 //#region utils/index.d.ts

package/dist/index.d.ts

@@ -1,5 +1,4 @@
-//#region src/Playroom/Playroom.d.ts
-
+//#region src/configModules/widths.d.ts
 type Widths = Array<number | 'Fit to window'>;
 //#endregion
 //#region utils/index.d.ts

package/lib/makeWebpackConfig.js

@@ -26,9 +26,9 @@ module.exports = async (playroomConfig, options) => {
   const ourConfig = {
     mode: options.production ? 'production' : 'development',
     entry: {
-      index: [require.resolve('../src/index.tsx')],
-      frame: [require.resolve('../src/frame.tsx')],
-      preview: [require.resolve('../src/preview.tsx')],
+      index: [require.resolve('../src/entries/index.tsx')],
+      frame: [require.resolve('../src/entries/frame.tsx')],
+      preview: [require.resolve('../src/entries/preview.tsx')],
     },
     output: {
       filename: '[name].[contenthash].js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playroom",
-  "version": "0.44.0",
+  "version": "0.44.1",
   "description": "Design with code, powered by your own component library",
   "bin": {
     "playroom": "bin/cli.cjs"
@@ -79,7 +79,6 @@
     "portfinder": "^1.0.32",
     "prettier": "^2.8.1",
     "prop-types": "^15.8.1",
-    "re-resizable": "^6.11.2",
     "react-docgen-typescript": "^2.2.2",
     "react-error-boundary": "^4.0.13",
     "react-helmet": "^6.1.0",

package/src/{Playroom → components}/Box/Box.tsx

@@ -1,7 +1,7 @@
 import clsx, { type ClassValue } from 'clsx';
 import { forwardRef, type AllHTMLAttributes, type ElementType } from 'react';
 
-import { sprinkles, type Sprinkles } from '../sprinkles.css';
+import { sprinkles, type Sprinkles } from '../../css/sprinkles.css';
 
 interface BoxProps
   extends Omit<

package/src/{Playroom → components}/Button/Button.css.ts

@@ -1,8 +1,7 @@
 import { style, createVar } from '@vanilla-extract/css';
-import { calc } from '@vanilla-extract/css-utils';
 
-import { sprinkles, colorPaletteVars } from '../sprinkles.css';
-import { vars } from '../vars.css';
+import { sprinkles, colorPaletteVars } from '../../css/sprinkles.css';
+import { vars } from '../../css/vars.css';
 
 export const reset = style([
   sprinkles({
@@ -23,7 +22,6 @@ export const reset = style([
     textDecoration: 'none',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
-    height: vars.touchableSize,
     WebkitTapHighlightColor: 'transparent',
   },
 ]);
@@ -32,9 +30,9 @@ const highlightColor = createVar();
 
 export const base = style([
   sprinkles({
-    borderRadius: 'large',
-    paddingY: 'none',
-    paddingX: 'large',
+    borderRadius: 'medium',
+    paddingY: 'xsmall',
+    paddingX: 'small',
     font: 'standard',
   }),
   {
@@ -43,7 +41,6 @@ export const base = style([
     },
     color: highlightColor,
     border: `1px solid ${colorPaletteVars.foreground.neutralSoft}`,
-    height: calc(vars.grid).multiply(9).toString(),
     ':hover': {
       vars: {
         [highlightColor]: colorPaletteVars.foreground.accent,
@@ -59,8 +56,7 @@ export const base = style([
       transform: 'translateY(-50%)',
       minHeight: vars.touchableSize,
       minWidth: vars.touchableSize,
-      left: calc(vars.grid).multiply(2).negate().toString(),
-      right: calc(vars.grid).multiply(2).negate().toString(),
+      width: '100%',
       height: '100%',
       top: '50%',
     },
@@ -80,7 +76,7 @@ export const positive = style({
 });
 
 export const iconContainer = style([
-  sprinkles({ position: 'relative', paddingLeft: 'small' }),
+  sprinkles({ position: 'relative', paddingLeft: 'xxsmall' }),
   {
     top: '1px',
   },

package/src/{Playroom → components}/CodeEditor/CodeEditor.css.ts

@@ -1,8 +1,8 @@
 import { style, globalStyle, keyframes, createVar } from '@vanilla-extract/css';
 
+import { colorPaletteVars, sprinkles } from '../../css/sprinkles.css';
+import { vars } from '../../css/vars.css';
 import { toolbarItemSize } from '../ToolbarItem/ToolbarItem.css';
-import { colorPaletteVars, sprinkles } from '../sprinkles.css';
-import { vars } from '../vars.css';
 
 const minimumLineNumberWidth = '50px';
 
@@ -20,9 +20,11 @@ const fadeIn = keyframes({
 });
 export const errorMarker = style([
   sprinkles({
-    borderRadius: 'large',
+    borderRadius: 'medium',
     position: 'relative',
     textAlign: 'right',
+    marginRight: 'xxsmall',
+    paddingRight: 'xsmall',
     opacity: 0,
   }),
   {
@@ -32,8 +34,6 @@ export const errorMarker = style([
     backgroundColor: colorPaletteVars.background.critical,
     color: colorPaletteVars.foreground.critical,
     minWidth: minimumLineNumberWidth,
-    marginRight: '4px',
-    paddingRight: '8px',
     animationName: fadeIn,
     animationDuration: '1s',
     animationTimingFunction: 'ease',
@@ -42,10 +42,15 @@ export const errorMarker = style([
   },
 ]);
 
-export const foldGutter = style({
-  width: '1em',
-  padding: '0 8px',
-});
+export const foldGutter = style([
+  sprinkles({
+    paddingY: 'none',
+    paddingX: 'xsmall',
+  }),
+  {
+    width: '1em',
+  },
+]);
 
 export const foldOpen = style([
   sprinkles({ cursor: 'pointer' }),
@@ -82,7 +87,7 @@ globalStyle('.CodeMirror', {
 globalStyle('.CodeMirror-gutters', {
   minWidth: vars.codeGutterSize,
   boxSizing: 'border-box',
-  paddingLeft: '8px',
+  paddingLeft: vars.space.xsmall,
 });
 
 globalStyle('.CodeMirror pre, .CodeMirror-linenumber', {
@@ -90,7 +95,7 @@ globalStyle('.CodeMirror pre, .CodeMirror-linenumber', {
 });
 
 globalStyle('.CodeMirror-lines', {
-  padding: '16px 0',
+  padding: `${vars.space.medium} 0`,
 });
 
 globalStyle('.CodeMirror-hints', {
@@ -101,7 +106,7 @@ globalStyle('.CodeMirror-hints', {
   margin: 0,
   padding: 0,
   boxShadow: colorPaletteVars.shadows.small,
-  borderRadius: vars.radii.medium,
+  borderRadius: vars.radii.small,
   backgroundColor: colorPaletteVars.background.surface,
   fontSize: '90%',
   lineHeight: '150%',
@@ -115,7 +120,7 @@ globalStyle('[data-playroom-dark] .CodeMirror-hints', {
 
 globalStyle('.CodeMirror-hint', {
   margin: 0,
-  padding: '4px 8px',
+  padding: `${vars.space.xxsmall} ${vars.space.xsmall}`,
   borderRadius: vars.radii.small,
   whiteSpace: 'pre',
   color: colorPaletteVars.code.text,
@@ -135,7 +140,7 @@ globalStyle('.CodeMirror-foldmarker', {
   color: colorPaletteVars.foreground.accent,
   fontFamily: 'arial',
   cursor: 'pointer',
-  padding: `0 ${vars.grid}`,
+  padding: `0 ${vars.space.xxsmall}`,
 });
 
 globalStyle('.cm-s-neo.CodeMirror', {
@@ -157,7 +162,7 @@ globalStyle('.cm-s-neo .CodeMirror-gutters::after', {
   content: '""',
   backgroundColor: colorPaletteVars.background.surface,
   position: 'absolute',
-  right: '2px',
+  right: vars.space.xxxsmall,
   height: '100%',
   boxShadow: `0 0 10px 5px ${colorPaletteVars.background.surface}`,
 });
@@ -229,8 +234,8 @@ globalStyle('.cm-s-neo .cm-number', {
 });
 
 globalStyle('.CodeMirror-dialog', {
-  paddingLeft: vars.space.xlarge,
-  paddingRight: vars.space.xlarge,
+  paddingLeft: vars.space.medium,
+  paddingRight: vars.space.medium,
   minHeight: toolbarItemSize,
   borderBottom: `1px solid ${colorPaletteVars.border.standard}`,
   display: 'flex',
@@ -273,7 +278,7 @@ globalStyle('.CodeMirror-search-label', {
 });
 
 globalStyle('.CodeMirror-search-field', {
-  paddingLeft: vars.space.xlarge,
+  paddingLeft: vars.space.medium,
 });
 
 globalStyle('label.CodeMirror-search-label', {
@@ -285,28 +290,28 @@ globalStyle('.dialog-opened.cm-s-neo .CodeMirror-selected', {
 });
 
 globalStyle('.cm-overlay.cm-searching', {
-  paddingTop: 2,
-  paddingBottom: 2,
+  paddingTop: vars.space.xxxsmall,
+  paddingBottom: vars.space.xxxsmall,
   background: colorPaletteVars.background.selection,
 });
 
 globalStyle('.CodeMirror-dialog button:first-of-type', {
-  marginLeft: vars.space.xlarge,
+  marginLeft: vars.space.medium,
 });
 
 globalStyle('.CodeMirror-dialog button', {
   appearance: 'none',
   font: vars.font.scale.standard,
   fontFamily: vars.font.family.standard,
-  marginLeft: vars.space.small,
-  paddingTop: vars.space.small,
-  paddingBottom: vars.space.small,
-  paddingLeft: vars.space.large,
-  paddingRight: vars.space.large,
+  marginLeft: vars.space.xsmall,
+  paddingTop: vars.space.xxsmall,
+  paddingBottom: vars.space.xxsmall,
+  paddingLeft: vars.space.small,
+  paddingRight: vars.space.small,
   alignSelf: 'center',
   display: 'block',
   background: 'none',
-  borderRadius: vars.radii.large,
+  borderRadius: vars.radii.medium,
   cursor: 'pointer',
   border: '1px solid currentColor',
 });

package/src/{Playroom → components}/CodeEditor/CodeEditor.tsx

@@ -5,11 +5,9 @@ import 'codemirror/lib/codemirror.css';
 import 'codemirror/addon/dialog/dialog.css';
 import 'codemirror/theme/neo.css';
 
-import {
-  type CursorPosition,
-  StoreContext,
-} from '../../StoreContext/StoreContext';
+import { type CursorPosition, StoreContext } from '../../contexts/StoreContext';
 import { validateCode } from '../../utils/compileJsx';
+import { hints } from '../../utils/componentsToHints';
 import { formatCode as format, isMac } from '../../utils/formatting';
 
 import { UnControlled as ReactCodeMirror } from './CodeMirror2';
@@ -62,16 +60,11 @@ const validateCodeInEditor = (editorInstance: Editor, code: string) => {
   }
 };
 
-interface Hint {
-  attrs: Record<string, any>;
-}
-
 interface Props {
   code: string;
   onChange: (code: string) => void;
   editorHidden: boolean;
   previewCode?: string;
-  hints?: Record<string, Hint>;
 }
 
 export const CodeEditor = ({
@@ -79,8 +72,8 @@ export const CodeEditor = ({
   editorHidden,
   onChange,
   previewCode,
-  hints,
 }: Props) => {
+  const mounted = useRef(false);
   const editorInstanceRef = useRef<Editor | null>(null);
   const insertionPointRef = useRef<ReturnType<Editor['addLineClass']> | null>(
     null
@@ -169,9 +162,10 @@ export const CodeEditor = ({
   useEffect(() => {
     if (editorInstanceRef.current) {
       if (
-        editorInstanceRef.current.hasFocus() ||
-        code === editorInstanceRef.current.getValue() ||
-        previewCode
+        mounted.current &&
+        (editorInstanceRef.current.hasFocus() ||
+          code === editorInstanceRef.current.getValue() ||
+          previewCode)
       ) {
         return;
       }
@@ -180,14 +174,7 @@ export const CodeEditor = ({
     }
   }, [code, previewCode]);
 
-  const mounted = useRef(false);
-
   useEffect(() => {
-    if (!mounted.current) {
-      mounted.current = true;
-      return;
-    }
-
     if (editorInstanceRef.current && !editorInstanceRef.current.hasFocus()) {
       setCursorPosition(cursorPosition);
     }
@@ -228,6 +215,14 @@ export const CodeEditor = ({
         if (!editorHidden) {
           setCursorPosition(cursorPosition);
         }
+        /**
+         * This workaround delays the setting of the mounted flag. It allows
+         * the behaviours wired up via `useEffect` to complete without being
+         * interrupted by change or focus events.
+         */
+        setTimeout(() => {
+          mounted.current = true;
+        }, 1);
       }}
       onChange={(editorInstance, data, newCode) => {
         if (editorInstance.hasFocus() && !previewCode) {

package/src/{Playroom → components}/Frame/Frame.tsx

@@ -7,6 +7,7 @@ import {
 } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
+import FrameComponent from '../../configModules/frameComponent';
 import RenderCode from '../RenderCode/RenderCode';
 
 type RenderCodeProps = ComponentProps<typeof RenderCode>;
@@ -16,18 +17,15 @@ type FrameComponentProps = {
   children?: ReactNode;
 };
 
-interface FrameProps extends Pick<RenderCodeProps, 'code' | 'components'> {
+interface FrameProps extends Pick<RenderCodeProps, 'code'> {
   themeName: FrameComponentProps['themeName'];
   theme: FrameComponentProps['theme'];
-  FrameComponent: ComponentType<FrameComponentProps>;
   ErrorComponent: ComponentType<{ message: string; delayVisibility?: boolean }>;
 }
 export default function Frame({
   code,
-  components,
   themeName,
   theme,
-  FrameComponent,
   ErrorComponent,
 }: FrameProps) {
   const [error, setError] = useState('');
@@ -57,7 +55,7 @@ export default function Frame({
         }}
       >
         <FrameComponent themeName={themeName} theme={theme}>
-          <RenderCode code={code} components={components} onError={setError} />
+          <RenderCode code={code} onError={setError} />
         </FrameComponent>
       </ErrorBoundary>
       <ErrorComponent message={error} delayVisibility={delay.current} />

package/src/{Playroom → components}/Frame/FrameError.css.ts

@@ -1,14 +1,14 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 
-import { light, dark } from '../palettes';
+import { light, dark } from '../../css/palettes';
 
-import { sprinkles } from '../sprinkles.css';
-import { vars } from '../vars.css';
+import { sprinkles } from '../../css/sprinkles.css';
+import { vars } from '../../css/vars.css';
 
 export const show = style({});
 
-const gutter = vars.space.medium;
+const gutter = vars.space.xsmall;
 export const message = style([
   sprinkles({
     position: 'absolute',
@@ -48,12 +48,12 @@ export const delay = style({
 export const size = {
   small: sprinkles({
     font: 'small',
-    padding: 'medium',
-    borderRadius: 'medium',
+    padding: 'xsmall',
+    borderRadius: 'small',
   }),
   large: sprinkles({
     font: 'large',
-    padding: 'xlarge',
-    borderRadius: 'large',
+    padding: 'medium',
+    borderRadius: 'medium',
   }),
 };

package/src/{Playroom → components}/Frames/Frames.css.ts

@@ -1,6 +1,6 @@
 import { createVar, style } from '@vanilla-extract/css';
 
-import { sprinkles } from '../sprinkles.css';
+import { sprinkles } from '../../css/sprinkles.css';
 
 export const root = style([
   sprinkles({
@@ -8,8 +8,8 @@ export const root = style([
     width: 'full',
     boxSizing: 'border-box',
     display: 'flex',
-    gap: 'gutter',
-    padding: 'gutter',
+    gap: 'xxxlarge',
+    padding: 'xxxlarge',
     textAlign: 'center',
     overflow: 'auto',
   }),

package/src/{Playroom → components}/Frames/Frames.tsx

@@ -1,11 +1,13 @@
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { useRef } from 'react';
+import { useContext, useRef } from 'react';
 
 import playroomConfig from '../../config';
+import { themeNames as availableThemes } from '../../configModules/themes';
+import availableWidths from '../../configModules/widths';
+import { StoreContext } from '../../contexts/StoreContext';
 import { compileJsx } from '../../utils/compileJsx';
 import { Box } from '../Box/Box';
 import { ReceiveErrorMessage } from '../Frame/frameMessaging';
-import type { PlayroomProps } from '../Playroom';
 import { Strong } from '../Strong/Strong';
 import { Text } from '../Text/Text';
 
@@ -16,11 +18,14 @@ import * as styles from './Frames.css';
 
 interface FramesProps {
   code: string;
-  themes: PlayroomProps['themes'];
-  widths: PlayroomProps['widths'];
 }
 
-export default function Frames({ code, themes, widths }: FramesProps) {
+export default function Frames({ code }: FramesProps) {
+  const [{ visibleWidths, visibleThemes }] = useContext(StoreContext);
+  const themes =
+    visibleThemes && visibleThemes.length > 0 ? visibleThemes : availableThemes;
+  const widths =
+    visibleWidths && visibleWidths.length > 0 ? visibleWidths : availableWidths;
   const scrollingPanelRef = useRef<HTMLDivElement | null>(null);
   const renderCode = useRef<string>('');
 

package/src/{Playroom → components}/FramesPanel/FramesPanel.css.ts

@@ -1,15 +1,16 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 
-import { colorPaletteVars, sprinkles } from '../sprinkles.css';
-import { vars } from '../vars.css';
+import { colorPaletteVars, sprinkles } from '../../css/sprinkles.css';
+import { vars } from '../../css/vars.css';
 
+const padding = 'xxsmall';
 export const reset = style([
   sprinkles({
     position: 'relative',
     font: 'small',
     border: 0,
-    padding: 'small',
+    padding,
     appearance: 'none',
   }),
   {
@@ -17,7 +18,7 @@ export const reset = style([
     backgroundColor: 'transparent',
     outline: 'none',
     textDecoration: 'underline',
-    margin: calc(vars.space.small).negate().toString(),
+    margin: calc(vars.space[padding]).negate().toString(),
     '::before': {
       content: '""',
       position: 'absolute',
@@ -25,7 +26,7 @@ export const reset = style([
       bottom: 0,
       left: 0,
       right: 0,
-      borderRadius: vars.radii.large,
+      borderRadius: vars.radii.small,
       boxShadow: colorPaletteVars.shadows.focus,
       cursor: 'pointer',
       opacity: 0,
@@ -60,14 +61,14 @@ export const checkbox = style([
   },
 ]);
 
-const checkboxPadding = 'xxsmall';
+const checkboxPadding = 'xxxsmall';
 export const fakeCheckbox = style([
   sprinkles({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     position: 'relative',
-    borderRadius: 'large',
+    borderRadius: 'medium',
     padding: checkboxPadding,
     pointerEvents: 'none',
   }),
@@ -87,7 +88,7 @@ export const fakeCheckbox = style([
       bottom: 0,
       left: 0,
       right: 0,
-      borderRadius: vars.radii.medium,
+      borderRadius: vars.radii.small,
       boxShadow: colorPaletteVars.shadows.focus,
       transition: vars.transition.medium,
       opacity: 0,
@@ -100,7 +101,7 @@ export const fakeCheckbox = style([
       bottom: 0,
       left: 0,
       right: 0,
-      borderRadius: vars.radii.medium,
+      borderRadius: vars.radii.small,
       boxShadow: 'inset 0 0 0px 1px currentColor',
       background: colorPaletteVars.background.surface,
     },
@@ -134,7 +135,7 @@ export const textField = style([
   sprinkles({
     font: 'large',
     width: 'full',
-    paddingX: 'large',
+    paddingX: 'small',
     boxSizing: 'border-box',
     borderRadius: 'medium',
   }),