diff --git a/src/frontend/apps/impress/src/components/Box.tsx b/src/frontend/apps/impress/src/components/Box.tsx
index 3e9e907b..920bfe82 100644
--- a/src/frontend/apps/impress/src/components/Box.tsx
+++ b/src/frontend/apps/impress/src/components/Box.tsx
@@ -1,6 +1,5 @@
-import { ComponentPropsWithRef, HTMLElementType } from 'react';
-import styled from 'styled-components';
-import { CSSProperties, RuleSet } from 'styled-components/dist/types';
+import { ComponentPropsWithRef, ElementType } from 'react';
+import styled, { CSSProperties, RuleSet } from 'styled-components';
 
 import {
   MarginPadding,
@@ -13,7 +12,7 @@ import {
 import { hideEffect, showEffect } from './Effect';
 
 export interface BoxProps {
-  as?: HTMLElementType;
+  as?: ElementType;
   $align?: CSSProperties['alignItems'];
   $background?: CSSProperties['background'];
   $border?: CSSProperties['border'];
@@ -70,7 +69,7 @@ export const Box = styled('div')<BoxProps>`
   ${({ $cursor }) => $cursor && `cursor: ${$cursor};`}
   ${({ $direction }) => `flex-direction: ${$direction || 'column'};`}
   ${({ $display, as }) =>
-    `display: ${$display || (as?.match('span|input') ? 'inline-flex' : 'flex')};`}
+    `display: ${$display || (typeof as === 'string' && as.match('span|input') ? 'inline-flex' : 'flex')};`}
   ${({ $flex }) => $flex && `flex: ${$flex};`}
   ${({ $gap }) => $gap && `gap: ${spacingValue($gap)};`}
   ${({ $height }) => $height && `height: ${$height};`}
diff --git a/src/frontend/apps/impress/src/components/Text.tsx b/src/frontend/apps/impress/src/components/Text.tsx
index 42a057c1..5975fedd 100644
--- a/src/frontend/apps/impress/src/components/Text.tsx
+++ b/src/frontend/apps/impress/src/components/Text.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, ComponentPropsWithRef, forwardRef } from 'react';
+import React, { CSSProperties, ComponentPropsWithRef, forwardRef } from 'react';
 import styled from 'styled-components';
 
 import { tokens } from '@/cunningham';
@@ -34,7 +34,9 @@ export const TextStyled = styled(Box)<TextProps>`
 
 const Text = forwardRef<HTMLElement, ComponentPropsWithRef<typeof TextStyled>>(
   (props, ref) => {
-    return <TextStyled ref={ref} as="span" {...props} />;
+    return (
+      <TextStyled ref={ref as React.Ref<HTMLDivElement>} as="span" {...props} />
+    );
   },
 );