jp.ui.app.ds 1.0.0

package/.storybook/main.ts

@@ -0,0 +1,31 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: [
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  addons: [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-docs",
+    "@storybook/addon-themes",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
+  },
+  webpackFinal: config => {
+    // remove svg from existing rule
+    const fileLoaderRule = config.module.rules.find(
+        (rule) => rule.test && rule.test.test('.svg')
+    )
+    fileLoaderRule.exclude = /\.svg$/
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    })
+
+    return config
+  }
+};
+export default config;

package/.storybook/preview.tsx

@@ -0,0 +1,38 @@
+import type { Preview } from '@storybook/react-webpack5';
+import { Global, css, ThemeProvider } from '@emotion/react';
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+import { ColorSchema, getDarkTheme, getLightTheme } from '@choochoochoo/jp.theme';
+
+const GlobalStyles = () => (
+    <Global
+        styles={css`
+            body {
+                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+            }
+        `}
+    />
+);
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+    decorators: [
+        withThemeFromJSXProvider({
+            themes: {
+                light: getLightTheme<object>(ColorSchema.DEFAULT, {}),
+                dark: getDarkTheme<object>('color_schema__default', {}),
+            },
+            defaultTheme: 'light',
+            Provider: ThemeProvider,
+            GlobalStyles,
+        })
+    ]
+};
+
+export default preview;

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "jp.ui.app.ds",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "storybook dev -p 6006",
+    "build:storybook": "storybook build",
+    "build": "rollup -c"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
+    "@rollup/plugin-commonjs": "28.0.8",
+    "@rollup/plugin-terser": "0.4.4",
+    "@rollup/plugin-typescript": "12.2.0",
+    "@storybook/addon-docs": "9.1.13",
+    "@storybook/addon-themes": "9.1.13",
+    "@storybook/addon-webpack5-compiler-swc": "4.0.1",
+    "@storybook/react-webpack5": "9.1.13",
+    "@svgr/rollup": "8.1.0",
+    "@svgr/webpack": "8.1.0",
+    "@types/node": "24.9.1",
+    "@types/react": "19.2.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "rollup": "4.52.5",
+    "rollup-plugin-dts": "6.2.3",
+    "storybook": "9.1.13",
+    "typescript": "5.9.3"
+  },
+  "dependencies": {
+    "@choochoochoo/jp.theme": "1.0.0",
+    "@material-design-icons/svg": "0.14.15"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,31 @@
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import { dts } from 'rollup-plugin-dts';
+import terser from '@rollup/plugin-terser';
+import svgr from '@svgr/rollup'
+
+const config = [
+    {
+        input: 'src/index.ts',
+        output: [
+            {
+                file: 'dist/index.js',
+                format: 'es',
+                sourcemap: true,
+            },
+        ],
+        plugins: [
+            commonjs(),
+            typescript(),
+            svgr(),
+            // terser(),
+        ],
+    },
+    {
+        input: './dist/index.d.ts',
+        output: [{ file: 'dist/index.d.ts', format: 'es' }],
+        plugins: [dts()],
+    },
+];
+
+export default config;

package/src/index.ts

@@ -0,0 +1 @@
+export * from './matherial3';

package/src/matherial3/button/common-button.style.ts

@@ -0,0 +1,35 @@
+import styled from '@emotion/styled';
+
+import { NoStyleButton } from '../helpers/no-style-button';
+
+export const filled_button_border_radius = 100;
+
+type CommonButtonStyledProps = {
+    borderColor?: string;
+    backgroundColor?: string;
+    hoverColor?: string;
+}
+
+export const CommonButtonStyled = styled(NoStyleButton)<CommonButtonStyledProps>`
+  background-color: ${({ backgroundColor }: { backgroundColor?: string }) => backgroundColor ?? 'transparent'};
+  border: 1px solid ${({ borderColor }: CommonButtonStyledProps) => borderColor ?? 'transparent'};
+  border-radius: ${filled_button_border_radius}px;
+  padding: 10px 24px;
+  position: relative;
+
+  :hover {
+    ::before {
+      left: 0;
+      bottom: 0;
+      content: "\\00a0";
+      position: absolute;
+      right: 0;
+      pointer-events: none;
+      width: 100%;
+      height: 100%;
+      background-color: ${({ hoverColor }: { hoverColor?: string }) => hoverColor};
+      opacity: 0.08;
+      border-radius: ${filled_button_border_radius}px;
+    }
+  }
+`;

package/src/matherial3/button/common-button.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { useTheme, Theme } from '@emotion/react';
+
+import { Label } from '../typography';
+
+import { CommonButtonStyled } from './common-button.style';
+
+export type CommonTypeStyle = {
+    text: string;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    className?: string;
+    disabled?: boolean;
+    textColor?: string;
+}
+
+type componentTypeStyle = CommonTypeStyle & {
+    backgroundColor?: string;
+    textColor: string;
+    borderColor?: string;
+}
+
+export const CommonButton = ({ text, onClick, className, backgroundColor, textColor, borderColor, disabled }: componentTypeStyle) => {
+    const theme = useTheme() as Theme;
+
+    return (
+        <CommonButtonStyled
+            title={text}
+            onClick={onClick}
+            className={className}
+            backgroundColor={backgroundColor}
+            borderColor={borderColor}
+            hoverColor={theme.m3Schema.onPrimaryContainer}
+            disabled={disabled}
+        >
+            <Label color={textColor} size="lg">
+                {text}
+            </Label>
+        </CommonButtonStyled>
+    );
+};

package/src/matherial3/button/filled-button.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+
+import { FilledButton } from './filled-button';
+
+const meta = {
+    title: 'm3/button/FilledButton',
+    component: FilledButton,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        text: 'text',
+    },
+    args: { onClick: fn() },
+} satisfies Meta<typeof FilledButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        text: 'Button',
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        text: 'disabled',
+        disabled: true,
+    },
+};

package/src/matherial3/button/filled-button.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useTheme, Theme } from '@emotion/react';
+
+import { CommonButton, CommonTypeStyle } from './common-button';
+
+export const FilledButton = ({ text, onClick, className, disabled }: CommonTypeStyle) => {
+    const theme = useTheme() as Theme;
+
+    return (
+        <CommonButton
+            text={text}
+            onClick={onClick}
+            backgroundColor={disabled ? `${theme.m3Schema.onSurface}1f` : theme.m3Schema.primary}
+            borderColor={disabled ? 'transparent' : theme.m3Schema.primary}
+            textColor={disabled ? `${theme.m3Schema.onSurface}b0` : theme.m3Schema.onPrimary}
+            className={className}
+            disabled={disabled}
+        />
+    );
+};

package/src/matherial3/button/index.ts

@@ -0,0 +1,9 @@
+import { FilledButton } from './filled-button';
+import { OutlinedButton } from './outlined-button';
+import { TextButton } from './text-button';
+
+export {
+    FilledButton,
+    OutlinedButton,
+    TextButton,
+};

package/src/matherial3/button/outlined-button.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+
+import { OutlinedButton } from './outlined-button';
+
+const meta = {
+    title: 'm3/button/OutlinedButton',
+    component: OutlinedButton,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        text: 'text',
+    },
+    args: { onClick: fn() },
+} satisfies Meta<typeof OutlinedButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        text: 'default',
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        text: 'disabled',
+        disabled: true,
+    },
+};

package/src/matherial3/button/outlined-button.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useTheme, Theme } from '@emotion/react';
+
+import { CommonButton, CommonTypeStyle } from './common-button';
+
+export const OutlinedButton = ({ text, onClick, className }: CommonTypeStyle) => {
+    const theme = useTheme() as Theme;
+
+    return (
+        <CommonButton
+            text={text}
+            onClick={onClick}
+            textColor={theme.m3Schema.primary}
+            borderColor={theme.m3Schema.outline}
+            className={className}
+        />
+    );
+};

package/src/matherial3/button/text-button.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+
+import { TextButton } from './text-button';
+
+const meta = {
+    title: 'm3/button/TextButton',
+    component: TextButton,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        text: 'text',
+    },
+    args: { onClick: fn() },
+} satisfies Meta<typeof TextButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        text: 'Button',
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        text: 'disabled',
+        disabled: true,
+    },
+};

package/src/matherial3/button/text-button.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { useTheme, Theme } from '@emotion/react';
+
+import { CommonButton, CommonTypeStyle } from './common-button';
+
+export const TextButton = ({ text, onClick, className, textColor }: CommonTypeStyle) => {
+    const theme = useTheme() as Theme;
+
+    return (
+        <CommonButton
+            text={text}
+            onClick={onClick}
+            textColor={textColor ?? theme.m3Schema.primary}
+            className={className}
+        />
+    );
+};

package/src/matherial3/checkbox/checkbox.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+
+import { Checkbox } from './checkbox';
+
+const meta = {
+    title: 'm3/Checkbox',
+    component: Checkbox,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    args: { onChange: fn(), checked: false },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        checked: false,
+    },
+};
+
+export const Checked: Story = {
+    args: {
+        checked: true,
+    },
+};

package/src/matherial3/checkbox/checkbox.style.tsx

@@ -0,0 +1,53 @@
+import styled from '@emotion/styled';
+import { Theme } from '@emotion/react';
+import { SvgIcon } from '../helpers';
+
+
+export const CheckboxRootWrapper = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  appearance: none;
+  text-decoration: none;
+  border-radius: 50%;
+`;
+
+export const CheckboxCheckedIcon = styled(SvgIcon)`
+  svg {
+    path {
+      fill: ${({ theme }: { theme?: Theme }) => theme?.m3Schema.onSurfaceVariant};
+    }
+  }
+`;
+
+export const CheckboxUncheckedIcon = styled(SvgIcon)`
+    svg {
+        path {
+            fill: ${({ theme }: { theme?: Theme }) => theme?.m3Schema.onSurfaceVariant};
+        }
+    }
+`;
+
+export const CheckboxInput = styled.input`
+  cursor: inherit;
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  z-index: 1;
+`;
+

package/src/matherial3/checkbox/checkbox.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import CheckBoxIcon from '@material-design-icons/svg/filled/check_box.svg';
+import CheckBoxOutlineBlankIcon from '@material-design-icons/svg/filled/check_box_outline_blank.svg';
+
+import {
+    CheckboxRootWrapper,
+    CheckboxInput,
+    CheckboxUncheckedIcon,
+    CheckboxCheckedIcon,
+} from './checkbox.style';
+
+export type CheckboxProps = {
+    checked: boolean;
+    onChange?: (checked: boolean) => void;
+}
+
+export const Checkbox = ({ checked, onChange }: CheckboxProps) => {
+    return (
+        <div>
+            <CheckboxRootWrapper>
+                <CheckboxInput
+                    type="checkbox"
+                    checked={checked}
+                    onChange={useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+                        if (onChange) {
+                            onChange(event.target.checked);
+                        }
+                    }, [onChange])}
+                />
+                {
+                    checked ? (
+                        <CheckboxCheckedIcon
+                            width={24}
+                            height={24}
+                            icon={CheckBoxIcon}
+                        />
+                    ) : (
+                        <CheckboxUncheckedIcon
+                            width={24}
+                            height={24}
+                            icon={CheckBoxOutlineBlankIcon}
+                        />
+                    )
+                }
+                </CheckboxRootWrapper>
+        </div>
+    );
+};

package/src/matherial3/checkbox/index.ts

@@ -0,0 +1,5 @@
+import { Checkbox } from './checkbox';
+
+export {
+    Checkbox,
+};

package/src/matherial3/helpers/backdrop/backdrop.style.ts

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+export const BackdropStyled = styled.div`
+  background-color: ${({ theme }) => theme.m3Schema.scrim}85;
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottoM: 0;
+  z-index: -1;
+`;

package/src/matherial3/helpers/backdrop/backdrop.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { BackdropStyled } from './backdrop.style';
+
+export const Backdrop = () => {
+    return (
+        <BackdropStyled aria-hidden="true"/>
+    );
+};

package/src/matherial3/helpers/backdrop/index.ts

@@ -0,0 +1,5 @@
+import { Backdrop } from './backdrop';
+
+export {
+    Backdrop,
+};

package/src/matherial3/helpers/index.ts

@@ -0,0 +1,19 @@
+import { Backdrop } from './backdrop';
+import { NoStyleButton } from './no-style-button';
+import { Popup } from './popup';
+import { ColumnLeft, ColumnCenter, RowCenter, RowStart, Stack} from './stack';
+import { useOutsideClick } from './outside-click';
+import { SvgIcon } from './svg-icon';
+
+export {
+    Backdrop,
+    NoStyleButton,
+    Popup,
+    ColumnLeft,
+    ColumnCenter,
+    RowCenter,
+    RowStart,
+    Stack,
+    useOutsideClick,
+    SvgIcon,
+}

package/src/matherial3/helpers/no-style-button/index.ts

@@ -0,0 +1,5 @@
+import { NoStyleButton } from './no-style-button.style';
+
+export {
+    NoStyleButton,
+};

package/src/matherial3/helpers/no-style-button/no-style-button.style.ts

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+
+export const NoStyleButton = styled.button`
+  background-color: transparent;
+  cursor: pointer;
+  border: none;
+  padding: 0;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  appearance: none;
+  user-select: none;
+`;

package/src/matherial3/helpers/outside-click.ts

@@ -0,0 +1,17 @@
+import { MutableRefObject, useEffect } from 'react';
+
+export const useOutsideClick = (ref: MutableRefObject<HTMLElement | undefined | null>, callback: (event: MouseEvent) => void) => {
+    const handleClickOutside = (event: DocumentEventMap['mousedown']) => {
+        const target = event.target as HTMLElement;
+        if (ref.current && !ref.current?.contains(target)) {
+            callback(event);
+        }
+    };
+
+    useEffect(() => {
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    });
+};

package/src/matherial3/helpers/popup/index.ts

@@ -0,0 +1 @@
+export { Popup } from './popup';

package/src/matherial3/helpers/popup/popup.style.tsx

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+export type PopupStyleType = {
+    zIndex: number;
+}
+
+export const PopupStyle = styled.div`
+  position: fixed;
+  z-index: ${({ zIndex }: PopupStyleType) => zIndex};
+  top: 0;
+  left: 0;
+  right: 0;
+  bottoM: 0;
+`;

package/src/matherial3/helpers/popup/popup.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+import { PopupStyle } from './popup.style';
+
+type componentType = {
+    children: React.ReactNode;
+    zIndex: number;
+    className?: string;
+}
+
+export const Popup = ({ children, zIndex, className }: componentType) => {
+    return (
+        <PopupStyle zIndex={zIndex} className={className}>
+            {children}
+        </PopupStyle>
+    );
+};

package/src/matherial3/helpers/stack/column-center.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { SerializedStyles } from '@emotion/react';
+
+import { Stack } from './stack';
+
+type componentType = {
+    children: React.ReactNode;
+    css?: SerializedStyles;
+}
+
+export const ColumnCenter = ({ children, css }: componentType) => {
+    return (
+        <Stack
+            direction="column"
+            alignItems="center"
+            justifyContent="center"
+            css={css}
+        >
+            {children}
+        </Stack>
+    );
+};

package/src/matherial3/helpers/stack/column-left.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { SerializedStyles } from '@emotion/react';
+
+import { Stack } from './stack';
+
+type componentType = {
+    children: React.ReactNode;
+    css?: SerializedStyles;
+}
+
+export const ColumnLeft = ({ children, css }: componentType) => {
+    return (
+        <Stack
+            direction="column"
+            alignItems="start"
+            justifyContent="center"
+            css={css}
+        >
+            {children}
+        </Stack>
+    );
+};

package/src/matherial3/helpers/stack/index.ts

@@ -0,0 +1,13 @@
+import { ColumnLeft } from './column-left';
+import { ColumnCenter } from './column-center';
+import { RowCenter } from './row-center';
+import { RowStart } from './row-start';
+import { Stack } from './stack';
+
+export {
+    ColumnLeft,
+    ColumnCenter,
+    RowCenter,
+    RowStart,
+    Stack,
+}

package/src/matherial3/helpers/stack/row-center.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import { Stack } from './stack';
+
+type componentType = {
+    children: React.ReactNode;
+}
+
+export const RowCenter = ({ children }: componentType) => {
+    return (
+        <Stack
+            direction="row"
+            alignItems="center"
+            justifyContent="center"
+        >
+            {children}
+        </Stack>
+    );
+};

package/src/matherial3/helpers/stack/row-start.tsx

@@ -0,0 +1,20 @@
+
+import * as React from 'react';
+
+import { Stack } from './stack';
+
+type componentType = {
+    children: React.ReactNode;
+}
+
+export const RowStart = ({ children }: componentType) => {
+    return (
+        <Stack
+            direction="row"
+            alignItems="start"
+            justifyContent="center"
+        >
+            {children}
+        </Stack>
+    );
+};

package/src/matherial3/helpers/stack/stack.tsx

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+type componentType = {
+    direction: 'row' | 'column'
+    justifyContent: 'start' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'end'
+    alignItems: 'stretch' | 'center' | 'start' | 'end'
+    gap?: number
+}
+
+export const Stack = styled.div`
+  display: flex;
+  flex-direction: ${({ direction }: componentType) => direction};
+  justify-content: ${({ justifyContent }: componentType) => justifyContent};
+  align-items: ${({ alignItems }: componentType) => alignItems};
+  gap: ${({ gap }: componentType) => gap ? `${gap}px` : 'initial'};
+`;

package/src/matherial3/helpers/svg-icon/index.ts

@@ -0,0 +1,5 @@
+import { SvgIcon } from './svg-icon';
+
+export {
+    SvgIcon,
+};

package/src/matherial3/helpers/svg-icon/svg-icon.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import styled  from '@emotion/styled';
+
+type componentTypeStyle = {
+    width?: number;
+    height?: number;
+    color?: string;
+    className?: string;
+}
+
+export const SvgIconStyle = styled.div`
+  display: flex;
+  width: ${({ width }: componentTypeStyle) => width}px;
+  height: ${({ height }: componentTypeStyle) => height}px;
+  
+  svg {
+    width: ${({ width }: componentTypeStyle) => width}px;
+    height: ${({ height }: componentTypeStyle) => height}px;
+  }
+  path {
+    fill: ${({ color }: componentTypeStyle) => color};
+  };
+
+  circle {
+    fill: ${({ color }: componentTypeStyle) => color};
+  };
+`;
+
+type componentType = {
+    icon: string;
+} & componentTypeStyle;
+
+export const SvgIcon = ({ icon, width, height, color, className }: componentType) => {
+    const Icon = icon;
+
+    return (
+        <SvgIconStyle
+            width={width}
+            height={height}
+            color={color}
+            className={className}
+        >
+            <Icon />
+        </SvgIconStyle>
+    );
+};

package/src/matherial3/index.ts

@@ -0,0 +1,2 @@
+export { FilledButton, OutlinedButton, TextButton } from './button';
+export { Checkbox } from './checkbox';

package/src/matherial3/typography/body.tsx

@@ -0,0 +1,19 @@
+import { useTheme } from '@emotion/react';
+import * as React from 'react';
+
+import { TextStyle, TypographyProps } from './m3-typography';
+
+export const Body = ({ size, color, children, className }: TypographyProps) => {
+    const theme = useTheme();
+
+    return (
+        <TextStyle
+            className={className}
+            body={theme.m3TextStyle.body}
+            size={size}
+            color={color}
+        >
+            {children}
+        </TextStyle>
+    );
+};

package/src/matherial3/typography/display.tsx

@@ -0,0 +1,19 @@
+import { useTheme } from '@emotion/react';
+import * as React from 'react';
+
+import { TextStyle, TypographyProps } from './m3-typography';
+
+export const Display = ({ size, color, children, className }: TypographyProps) => {
+    const theme = useTheme();
+
+    return (
+        <TextStyle
+            className={className}
+            body={theme.m3TextStyle.display}
+            size={size}
+            color={color}
+        >
+            {children}
+        </TextStyle>
+    );
+};

package/src/matherial3/typography/headline.tsx

@@ -0,0 +1,19 @@
+import { useTheme } from '@emotion/react';
+import * as React from 'react';
+
+import { TextStyle, TypographyProps } from './m3-typography';
+
+export const Headline = ({ size, color, children, className }: TypographyProps) => {
+    const theme = useTheme();
+
+    return (
+        <TextStyle
+            className={className}
+            body={theme.m3TextStyle.headline}
+            size={size}
+            color={color}
+        >
+            {children}
+        </TextStyle>
+    );
+};

package/src/matherial3/typography/index.ts

@@ -0,0 +1,13 @@
+import { Title } from './title';
+import { Body } from './body';
+import { Label } from './label';
+import { Display } from './display';
+import { Headline } from './headline';
+
+export {
+    Title,
+    Body,
+    Label,
+    Display,
+    Headline,
+}

package/src/matherial3/typography/label.tsx

@@ -0,0 +1,19 @@
+import { useTheme } from '@emotion/react';
+import * as React from 'react';
+
+import { TextStyle, TypographyProps } from './m3-typography';
+
+export const Label = ({ size, color, children, className }: TypographyProps) => {
+    const theme = useTheme();
+
+    return (
+        <TextStyle
+            className={className}
+            body={theme.m3TextStyle.label}
+            size={size}
+            color={color}
+        >
+            {children}
+        </TextStyle>
+    );
+};

package/src/matherial3/typography/m3-typography.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import { Theme } from '@emotion/react'
+import { M3TextStylesBody } from '@choochoochoo/jp.theme';
+
+import { TypographySize } from './typography-size';
+
+export function getTextStyle (styleBody: M3TextStylesBody, size: TypographySize) {
+    switch (size) {
+        case 'lg': {
+            return styleBody.large;
+        }
+        case 'sm': {
+            return styleBody.small;
+        }
+    }
+
+    return styleBody.medium;
+}
+
+export type TypographyProps = {
+    color: string;
+    size: TypographySize;
+    children: React.ReactNode;
+    className?: string;
+}
+
+type TextStyleType = {
+    body: M3TextStylesBody;
+    size: TypographySize;
+    color: string;
+    theme?: Theme;
+}
+
+export const TextStyle = styled.div(({ body, size, color }: TextStyleType) => ({
+    fontFamily: `${getTextStyle(body, size).fontFamilyName}`,
+    fontStyle: 'normal',
+    fontWeight: `${getTextStyle(body, size).fontWeight}`,
+    fontSize: `${getTextStyle(body, size).fontSize}px`,
+    lineHeight: `${getTextStyle(body, size).lineHeight}px`,
+    letterSpacing: `${getTextStyle(body, size).letterSpacing}px`,
+    color: `${color}`,
+    margin: 0,
+}))
+

package/src/matherial3/typography/title.tsx

@@ -0,0 +1,19 @@
+import { useTheme } from '@emotion/react';
+import * as React from 'react';
+
+import { TextStyle, TypographyProps } from './m3-typography';
+
+export const Title = ({ size, color, children, className }: TypographyProps) => {
+    const theme = useTheme();
+
+    return (
+        <TextStyle
+            className={className}
+            body={theme.m3TextStyle.title}
+            size={size}
+            color={color}
+        >
+            {children}
+        </TextStyle>
+    );
+};

package/src/matherial3/typography/typography-size.ts

@@ -0,0 +1 @@
+export type TypographySize = 'sm' | 'md' | 'lg';

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    // Default
+    "target": "es5",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+
+    // Added
+    "jsx": "react",
+    "module": "ESNext",
+    "sourceMap": true,
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "typeRoots": [
+      "node_modules/@types",
+      "types"
+    ],
+    "allowImportingTsExtensions": true,
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationDir": "dist"
+  },
+  "exclude": [
+    "src/**/*.stories.ts",
+    "src/**/*.stories.tsx"
+  ]
+}

package/types/emotion.d.ts

@@ -0,0 +1,12 @@
+import '@emotion/react';
+import { M3Palettes, M3Schema, M3TextStyles, ThemesEnum } from '@choochoochoo/jp.theme';
+
+declare module '@emotion/react' {
+    export interface Theme {
+        themeId: ThemesEnum;
+        m3Schema: M3Schema;
+        m3TextStyle: M3TextStyles;
+        m3Palettes: M3Palettes;
+        ext: object;
+    }
+}