npm - @sanity/ui - Versions diffs - 2.0.0-alpha.9 → 2.0.0-beta.2 - Mend

@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (674) hide show

package/exports/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from '../src/core'

package/exports/theme.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from '../src/theme'

package/package.json CHANGED Viewed

@@ -1,15 +1,15 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.9",
+  "version": "2.0.0-beta.2",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
-  "source": "./src/index.ts",
+  "source": "./exports/index.ts",
   "module": "./dist/index.esm.js",
   "main": "./dist/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "source": "./src/index.ts",
+      "source": "./exports/index.ts",
       "require": "./dist/index.js",
       "node": {
         "module": "./dist/index.esm.js",
@@ -18,118 +18,139 @@
       "import": "./dist/index.esm.js",
       "default": "./dist/index.esm.js"
     },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "source": "./exports/theme.ts",
+      "require": "./dist/theme.js",
+      "node": {
+        "module": "./dist/theme.esm.js",
+        "import": "./dist/theme.cjs.mjs"
+      },
+      "import": "./dist/theme.esm.js",
+      "default": "./dist/theme.esm.js"
+    },
     "./package.json": "./package.json"
   },
+  "typesVersions": {
+    "*": {
+      "theme": [
+        "./dist/theme.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist",
+    "exports",
     "src"
   ],
   "license": "MIT",
   "scripts": {
-    "build": "run-s clean build:pkg check:pkg",
-    "build:pkg": "pkg build --strict",
-    "check:pkg": "pkg --strict",
-    "check:types": "tsc",
+    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
     "clean": "rimraf .workshop dist",
     "commit": "cz",
     "cypress:dev": "run-p dev cypress:open",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
-    "dev": "run-s workshop:dev",
+    "dev": "run-p storybook:dev workshop:dev",
+    "figma:pkg:build": "cd figma && pnpm build",
     "format": "prettier --write --cache --ignore-unknown .",
     "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx --quiet",
+    "pkg:build": "pkg build --strict",
+    "pkg:check": "pkg --strict",
     "prepare": "husky install",
     "prepublishOnly": "pnpm build",
     "release": "semantic-release",
+    "storybook:build": "storybook build",
+    "storybook:dev": "storybook dev -p 6006",
     "test": "jest",
     "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
+    "ts:check": "tsc",
     "watch": "pkg watch --strict",
-    "workshop:build": "node -r esbuild-register -r tsconfig-paths/register scripts/build",
-    "workshop:dev": "node -r esbuild-register -r tsconfig-paths/register scripts/dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "workshop:build": "workshop build",
+    "workshop:dev": "workshop dev",
+    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "2.0.0",
-    "@sanity/color": "3.0.0-beta.5",
-    "@sanity/icons": "^2.4.1",
+    "@floating-ui/react-dom": "^2.0.4",
+    "@sanity/color": "3.0.0-beta.8",
+    "@sanity/icons": "^2.7.0",
     "csstype": "^3.1.2",
-    "framer-motion": "^10.16.2",
+    "framer-motion": "^10.16.5",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.11",
-    "@babel/preset-env": "^7.22.14",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.11",
-    "@commitlint/cli": "^17.7.1",
-    "@commitlint/config-conventional": "^17.7.0",
+    "@babel/core": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^2.4.8",
-    "@sanity/semantic-release-preset": "^4.1.4",
-    "@sanity/ui-workshop": "^1.2.11",
-    "@storybook/addon-a11y": "^7.4.5",
-    "@storybook/addon-docs": "^7.4.5",
-    "@storybook/addon-essentials": "^7.4.5",
-    "@storybook/addon-interactions": "^7.4.5",
-    "@storybook/addon-links": "^7.4.5",
-    "@storybook/addon-storysource": "^7.4.5",
-    "@storybook/addon-themes": "^7.4.5",
-    "@storybook/blocks": "^7.4.5",
-    "@storybook/jest": "^0.2.2",
-    "@storybook/manager-api": "^7.4.5",
-    "@storybook/react": "^7.4.5",
-    "@storybook/react-vite": "^7.4.5",
-    "@storybook/testing-library": "^0.2.1",
-    "@storybook/theming": "^7.4.5",
-    "@testing-library/dom": "^9.3.1",
+    "@sanity/pkg-utils": "^3.2.5",
+    "@sanity/semantic-release-preset": "^4.1.6",
+    "@sanity/ui-workshop": "^2.0.3",
+    "@storybook/addon-a11y": "^7.6.1",
+    "@storybook/addon-docs": "^7.6.1",
+    "@storybook/addon-essentials": "^7.6.1",
+    "@storybook/addon-interactions": "^7.6.1",
+    "@storybook/addon-links": "^7.6.1",
+    "@storybook/addon-storysource": "^7.6.1",
+    "@storybook/addon-themes": "^7.6.1",
+    "@storybook/blocks": "^7.6.1",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/manager-api": "^7.6.1",
+    "@storybook/react": "^7.6.1",
+    "@storybook/react-vite": "^7.6.1",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.6.1",
+    "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.4",
-    "@types/jest-axe": "^3.5.5",
+    "@testing-library/react": "^14.1.2",
+    "@types/jest": "^29.5.10",
+    "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.5.9",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@types/react-is": "^18.2.1",
-    "@types/refractor": "^3.0.2",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
+    "@types/react-is": "^18.2.4",
+    "@types/refractor": "^3.4.0",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@typescript-eslint/eslint-plugin": "^6.5.0",
-    "@typescript-eslint/parser": "^6.5.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
     "commitizen": "^4.3.0",
-    "cypress": "^13.1.0",
-    "cypress-real-events": "^1.10.1",
+    "cypress": "^13.6.0",
+    "cypress-real-events": "^1.11.0",
     "cz-conventional-changelog": "^3.3.0",
-    "esbuild": "^0.19.2",
-    "esbuild-register": "^3.4.2",
-    "eslint": "^8.48.0",
+    "eslint": "^8.54.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-boundaries": "^3.4.1",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.14",
+    "eslint-plugin-storybook": "^0.6.15",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
-    "jest": "^29.6.4",
+    "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
-    "jest-environment-jsdom": "^29.6.4",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^14.0.1",
     "module-alias": "^2.2.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "refractor": "^4.8.1",
     "rimraf": "^5.0.1",
-    "semantic-release": "^21.1.1",
-    "start-server-and-test": "^2.0.0",
-    "storybook": "^7.4.5",
-    "styled-components": "^6.0.7",
+    "semantic-release": "^22.0.8",
+    "start-server-and-test": "^2.0.3",
+    "storybook": "^7.6.1",
+    "styled-components": "^6.1.1",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.2",
+    "vite": "^5.0.2",
+    "vite-tsconfig-paths": "^4.2.1"
   },
   "peerDependencies": {
     "react": "^18",
@@ -164,7 +185,7 @@
       "prettier --write --cache --ignore-unknown"
     ]
   },
-  "packageManager": "pnpm@8.6.12",
+  "packageManager": "pnpm@8.11.0",
   "publishConfig": {
     "access": "public",
     "provenance": true

package/src/{__workshop__ → core/__workshop__}/constants.ts RENAMED Viewed

@@ -13,15 +13,14 @@ import {
   Placement,
   TextAlign,
   TextInputType,
-  ThemeColorSpotKey,
-  ThemeColorToneKey,
-  ThemeFontWeightKey,
 } from '@sanity/ui'
+import {ThemeColorSpotKey, ThemeColorToneKey, ThemeFontWeightKey} from '@sanity/ui/theme'
 export const WORKSHOP_AVATAR_SIZE_OPTIONS: {[key: string]: AvatarSize} = {
-  '0 (default)': 0,
-  '1': 1,
+  '0': 0,
+  '1 (default)': 1,
   '2': 2,
+  '3': 3,
 }
 export const WORKSHOP_BADGE_MODE_OPTIONS: {[key: string]: BadgeMode} = {

package/src/core/__workshop__/fontsPlugin.tsx ADDED Viewed

@@ -0,0 +1,36 @@
+import {WorkshopPlugin} from '@sanity/ui-workshop'
+import {createGlobalStyle} from 'styled-components'
+const GlobalStyle = createGlobalStyle`
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('https://rsms.me/inter/font-files/InterVariable.woff2?v=4.0') format('woff2');
+    font-named-instance: 'Regular';
+  }
+  @font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('https://rsms.me/inter/font-files/InterVariable-Italic.woff2?v=4.0') format('woff2');
+    font-named-instance: 'Italic';
+  }
+`
+export function fontsPlugin(): WorkshopPlugin {
+  return {
+    name: 'fonts',
+    title: 'Fonts',
+    provider: function FontsProvider({children}) {
+      return (
+        <>
+          <GlobalStyle />
+          {children}
+        </>
+      )
+    },
+  }
+}

package/src/core/_compat.ts ADDED Viewed

@@ -0,0 +1,115 @@
+// re-export for backwards compatibility
+export {
+  COLOR_CONFIG_CARD_KEYS,
+  COLOR_CONFIG_CARD_TONES,
+  COLOR_CONFIG_BLEND_KEYS,
+  COLOR_CONFIG_STATE_KEYS,
+  COLOR_CONFIG_STATE_TONES,
+  THEME_COLOR_CARD_TONES,
+  THEME_COLOR_BLEND_MODES,
+  THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_STATES,
+  THEME_COLOR_STATE_TONES,
+  buildTheme,
+  createColorTheme,
+  hexToRgb,
+  hslToRgb,
+  isColorBlendModeValue,
+  isColorButtonMode,
+  isColorConfigBaseKey,
+  isColorConfigBaseTone,
+  isColorConfigBlendKey,
+  isColorConfigStateKey,
+  isColorConfigStateTone,
+  isColorHueKey,
+  isColorOpacityValue,
+  isColorTintKey,
+  isColorTokenValue,
+  isColorValue,
+  multiply,
+  parseColor,
+  parseTokenKey,
+  parseTokenValue,
+  rgbToHex,
+  rgbToHsl,
+  rgba,
+  rgbaToRGBA,
+  screen,
+  defaultTheme as studioTheme,
+  type BaseTheme,
+  type BoxShadow,
+  type CSSObject,
+  type ColorBlendModeTokenValue,
+  type ColorConfigCardKey,
+  type ColorConfigCardTone,
+  type ColorConfigBlendKey,
+  type ColorConfigOpacityValue,
+  type ColorConfigStateKey,
+  type ColorConfigStateTone,
+  type ColorConfigValue,
+  type HSL,
+  type PartialThemeColorBuilderOpts,
+  type RGB,
+  type RGBA,
+  type RootTheme,
+  type Theme,
+  type ThemeAvatar,
+  type ThemeColor,
+  type ThemeColorBase,
+  type ThemeColorBaseTokens,
+  type ThemeColorCardToneKey,
+  type ThemeColorBlendModeKey,
+  type ThemeColorBuilderOpts,
+  type ThemeColorButton,
+  type ThemeColorButtonModeKey,
+  type ThemeColorButtonState,
+  type ThemeColorButtonStates,
+  type ThemeColorButtonTokens,
+  type ThemeColorButtonTones,
+  type ThemeColorCard,
+  type ThemeColorCardState,
+  type ThemeColorGenericState,
+  type ThemeColorInput,
+  type ThemeColorInputState,
+  type ThemeColorInputStates,
+  type ThemeColorMuted,
+  type ThemeColorMutedTone,
+  type ThemeColorName,
+  type ThemeColorScheme,
+  type ThemeColorSchemeKey,
+  type ThemeColorSchemes,
+  type ThemeColorSelectable,
+  type ThemeColorSelectableState,
+  type ThemeColorSelectableStates,
+  type ThemeColorSolid,
+  type ThemeColorSolidTone,
+  type ThemeColorSpot,
+  type ThemeColorSpotKey,
+  type ThemeColorStateKey,
+  type ThemeColorStateTokens,
+  type ThemeColorStateToneKey,
+  type ThemeColorStatesTokens,
+  type ThemeColorSyntax,
+  type ThemeColorTokenValue,
+  type ThemeColorTokens,
+  type ThemeColorToneKey,
+  type ThemeConfig,
+  type ThemeFocusRing,
+  type ThemeFont,
+  type ThemeFontKey,
+  type ThemeFontSize,
+  type ThemeFontWeight,
+  type ThemeFontWeightKey,
+  type ThemeFonts,
+  type ThemeInput,
+  type ThemeLayer,
+  type ThemeShadow,
+  type ThemeStyles,
+  type TokenBaseKeyNode,
+  type TokenBlendModeValueNode,
+  type TokenButtonKeyNode,
+  type TokenColorValueNode,
+  type TokenHueValueNode,
+  type TokenKeyNode,
+  type TokenValueNode,
+} from '@sanity/ui/theme'

package/src/{components → core/components}/autocomplete/__workshop__/async.tsx RENAMED Viewed

@@ -79,9 +79,9 @@ export default function AsyncStory() {
   }, [doSearch, optionTitle])
   return (
-    <Box padding={[4, 5, 6]}>
+    <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
       <Stack space={[3, 3, 4]}>
-        <Text as="label" htmlFor="async" size={[1, 1, 2]} weight="semibold">
+        <Text as="label" htmlFor="async" size={[1, 1, 2]} weight="medium">
           Country
         </Text>
         <LayerProvider zOffset={100}>
@@ -96,15 +96,14 @@ export default function AsyncStory() {
             openButton={{onClick: handleOpenButtonClick}}
             options={options}
             placeholder="Search"
-            radius={1}
             renderOption={renderOption}
             renderValue={renderValue}
             value={value}
           />
         </LayerProvider>
-        <Card border overflow="auto" padding={3} radius={1}>
-          <Code language="json" size={[1, 1, 2]}>
+        <Card overflow="auto" padding={3} radius={2} tone="transparent">
+          <Code language="json" size={1}>
             {JSON.stringify({loading, options, query, value}, null, 2)}
           </Code>
         </Card>

package/src/{components → core/components}/autocomplete/__workshop__/constrainedHeight.tsx RENAMED Viewed

@@ -3,6 +3,7 @@ import {
   BoundaryElementProvider,
   Box,
   Card,
+  Container,
   LayerProvider,
   Stack,
   Text,
@@ -18,28 +19,32 @@ export default function ConstrainedHeightStory() {
   return (
     <Card height="fill" tone="transparent">
-      <Card
-        ref={setBoundaryElement}
-        radius={3}
-        shadow={3}
-        style={{position: 'absolute', top: 20, right: 20, bottom: 20, left: 20}}
-      >
-        <Box height="fill" overflow="auto" padding={[3, 4, 5]} sizing="border">
-          <Stack space={5}>
-            <BoundaryElementProvider element={boundaryElement}>
-              <ConstrainedHeightExampleField id="example-1" label="Example 1" />
-              <ConstrainedHeightExampleField id="example-2" label="Example 2" />
-              <ConstrainedHeightExampleField id="example-3" label="Example 3" />
-              <ConstrainedHeightExampleField id="example-4" label="Example 4" />
-              <ConstrainedHeightExampleField id="example-5" label="Example 5" />
-              <ConstrainedHeightExampleField id="example-6" label="Example 6" />
-              <ConstrainedHeightExampleField id="example-7" label="Example 7" />
-              <ConstrainedHeightExampleField id="example-8" label="Example 8" />
-              <ConstrainedHeightExampleField id="example-9" label="Example 9" />
-            </BoundaryElementProvider>
-          </Stack>
-        </Box>
-      </Card>
+      <Container height="fill" padding={3} sizing="border" width={1}>
+        <Card
+          height="fill"
+          ref={setBoundaryElement}
+          radius={3}
+          shadow={3}
+          style={{position: 'relative'}}
+          // style={{position: 'absolute', top: 12, right: 12, bottom: 12, left: 12}}
+        >
+          <Box height="fill" overflow="auto" padding={[4, 4, 5]} sizing="border">
+            <Stack space={5}>
+              <BoundaryElementProvider element={boundaryElement}>
+                <ConstrainedHeightExampleField id="example-1" label="Example 1" />
+                <ConstrainedHeightExampleField id="example-2" label="Example 2" />
+                <ConstrainedHeightExampleField id="example-3" label="Example 3" />
+                <ConstrainedHeightExampleField id="example-4" label="Example 4" />
+                <ConstrainedHeightExampleField id="example-5" label="Example 5" />
+                <ConstrainedHeightExampleField id="example-6" label="Example 6" />
+                <ConstrainedHeightExampleField id="example-7" label="Example 7" />
+                <ConstrainedHeightExampleField id="example-8" label="Example 8" />
+                <ConstrainedHeightExampleField id="example-9" label="Example 9" />
+              </BoundaryElementProvider>
+            </Stack>
+          </Box>
+        </Card>
+      </Container>
     </Card>
   )
 }

package/src/{components → core/components}/autocomplete/__workshop__/custom.tsx RENAMED Viewed

@@ -1,4 +1,4 @@
-import {Autocomplete, Box, Button, Card, Code, Stack, Text} from '@sanity/ui'
+import {Autocomplete, Box, Button, Card, Code, Container, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
 import {
@@ -48,36 +48,41 @@ export default function CustomStory() {
   const options = data.map((item) => ({value: item.value, title: item.title}))
   return (
-    <Box padding={[4, 5, 6]}>
-      <Stack space={3}>
-        <Text as="label" htmlFor="custom" id="custom-label" size={1} weight="semibold">
-          Country
-        </Text>
-        <Autocomplete
-          aria-describedby="custom-label"
-          border={border}
-          disabled={disabled}
-          filterOption={filterOption}
-          fontSize={fontSize}
-          id="custom"
-          onChange={setValue}
-          openButton={openButton}
-          options={options}
-          padding={padding}
-          placeholder="Search"
-          radius={radius}
-          readOnly={readOnly}
-          renderOption={renderOption}
-          renderValue={renderValue}
-          value={value}
-        />
-        <Card padding={3} radius={1} tone="transparent">
-          <Code>{JSON.stringify(value)}</Code>
-        </Card>
-        <Box>
-          <Button id="set-value-btn" onClick={() => setValue('NO')} text="Set to NO" />
-        </Box>
-      </Stack>
+    <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
+      <Container width={0}>
+        <Stack space={5}>
+          <Stack space={3}>
+            <Text as="label" htmlFor="custom" id="custom-label" size={1} weight="medium">
+              Country
+            </Text>
+            <Autocomplete
+              aria-describedby="custom-label"
+              border={border}
+              disabled={disabled}
+              filterOption={filterOption}
+              fontSize={fontSize}
+              id="custom"
+              onChange={setValue}
+              openButton={openButton}
+              options={options}
+              padding={padding}
+              placeholder="Search"
+              radius={radius}
+              readOnly={readOnly}
+              renderOption={renderOption}
+              renderValue={renderValue}
+              value={value}
+            />
+          </Stack>
+          <Card padding={3} radius={2} tone="transparent">
+            <Code size={1}>{JSON.stringify(value)}</Code>
+          </Card>
+          <Box>
+            <Button id="set-value-btn" onClick={() => setValue('NO')} text="Set to NO" />
+          </Box>
+        </Stack>
+      </Container>
     </Box>
   )
 }

package/src/{components → core/components}/autocomplete/__workshop__/example.tsx RENAMED Viewed

@@ -47,9 +47,9 @@ export default function ExampleStory() {
   return (
     <Card height="fill" tone={layoutTone}>
       <Container width={1}>
-        <Box padding={[3, 4, 5]}>
+        <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
           <Stack space={3}>
-            <Text as="label" htmlFor="default" size={1} weight="semibold">
+            <Text as="label" htmlFor="default" size={1} weight="medium">
               Country code
             </Text>
             <Wrapper>

package/src/{components → core/components}/autocomplete/__workshop__/focusAndBlur.tsx RENAMED Viewed

@@ -21,12 +21,14 @@ export default function FocusAndBlurStory() {
           placeholder="Search"
           value={value}
         />
-        <Stack space={1}>
+        <Stack space={3}>
           <Card overflow="auto" padding={3} radius={2} tone="transparent">
-            <Code id="focus-and-blur-log">{JSON.stringify(log)}</Code>
+            <Code id="focus-and-blur-log" language="json" size={1}>
+              {JSON.stringify(log)}
+            </Code>
           </Card>
-          <Button id="focus-and-blur-clear-btn" onClick={handleClear} text="Clear" />
+          <Button id="focus-and-blur-clear-btn" mode="ghost" onClick={handleClear} text="Clear" />
         </Stack>
       </Stack>
     </Box>