@ubie/vitals-ui-consumer 0.0.1

package/src/icons/LINEIcon.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { FC, SVGProps } from "react";
+
+export const LINEIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M22 10.5549C22 5.88571 17.5141 2.08698 12 2.08698C6.48589 2.08698 2 5.88571 2 10.5549C2 14.7409 5.55797 18.2463 10.3635 18.9094C10.6887 18.9827 11.1321 19.1333 11.2445 19.4238C11.3458 19.6879 11.3102 20.1006 11.2773 20.3676C11.2773 20.3676 11.1602 21.1041 11.1349 21.2606L11.1312 21.2822C11.0835 21.5638 10.9621 22.2802 12.0009 21.823C13.0685 21.3535 17.7597 18.2844 19.8573 15.765C21.3055 14.1062 22 12.4239 22 10.5549ZM18.6726 13.2514H15.8673H15.8635C15.7576 13.2514 15.6723 13.1624 15.6723 13.0519V13.0489V8.50198V8.49807C15.6723 8.38755 15.7576 8.29855 15.8635 8.29855H15.8673H18.6726C18.7776 8.29855 18.8638 8.38853 18.8638 8.49807V9.23845C18.8638 9.34897 18.7785 9.43797 18.6726 9.43797H16.7633V10.2067H18.6726C18.7776 10.2067 18.8638 10.2967 18.8638 10.4062V11.1466C18.8638 11.2571 18.7785 11.3461 18.6726 11.3461H16.7633V12.1149H18.6726C18.7776 12.1149 18.8638 12.2049 18.8638 12.3144V13.0548C18.8638 13.1614 18.7785 13.2514 18.6726 13.2514ZM8.47203 13.0519C8.47203 13.1624 8.3858 13.2514 8.28082 13.2514H5.47456H5.47081C5.3649 13.2514 5.2796 13.1624 5.2796 13.0519V13.0489V8.49807C5.2796 8.38755 5.3649 8.29855 5.47081 8.29855H6.18034C6.28532 8.29855 6.37155 8.38853 6.37155 8.49807V12.112H8.28082C8.3858 12.112 8.47203 12.2019 8.47203 12.3115V13.0519ZM9.97172 8.29855H9.26219C9.15722 8.29855 9.07098 8.38755 9.07098 8.49807V13.0519C9.07098 13.1614 9.15628 13.2514 9.26219 13.2514H9.97172C10.0776 13.2514 10.1629 13.1624 10.1629 13.0519V8.49807C10.1629 8.38755 10.0776 8.29855 9.97172 8.29855ZM14.0911 8.29855H14.7997C14.9056 8.29855 14.9909 8.38755 14.9909 8.49807V13.0509C14.9909 13.1614 14.9047 13.2504 14.7997 13.2504H14.0948C14.078 13.2504 14.0611 13.2475 14.0452 13.2436C14.0442 13.2436 14.0433 13.2426 14.0423 13.2426C14.0377 13.2416 14.0339 13.2406 14.0292 13.2387C14.0274 13.2387 14.0255 13.2377 14.0236 13.2367C14.0231 13.2365 14.0225 13.2363 14.0219 13.2361C14.0194 13.2353 14.0165 13.2344 14.0142 13.2328C14.0114 13.2308 14.0077 13.2299 14.0049 13.2279L13.9992 13.225C13.9945 13.222 13.9908 13.2201 13.987 13.2172C13.987 13.2165 13.9866 13.2163 13.986 13.2158C13.9857 13.2157 13.9854 13.2155 13.9852 13.2152C13.9664 13.2025 13.9496 13.1859 13.9355 13.1653L11.9362 10.3476V13.0538C11.9362 13.1643 11.851 13.2533 11.745 13.2533H11.0355C10.9296 13.2533 10.8443 13.1634 10.8443 13.0538V8.50003C10.8443 8.38951 10.9305 8.30051 11.0355 8.30051H11.7422H11.7488C11.7525 8.30148 11.7554 8.30148 11.7591 8.30148C11.7628 8.30148 11.7657 8.30148 11.7694 8.30246C11.7722 8.30246 11.775 8.30246 11.7778 8.30344L11.7891 8.30637C11.79 8.30686 11.7912 8.30711 11.7924 8.30735C11.7935 8.3076 11.7947 8.30784 11.7957 8.30833C11.7975 8.30882 11.7994 8.30955 11.8013 8.31029C11.8032 8.31102 11.805 8.31175 11.8069 8.31224C11.8097 8.31224 11.8116 8.31322 11.8135 8.3142C11.8172 8.31518 11.821 8.31713 11.8247 8.31909L11.8303 8.32202C11.8341 8.32398 11.8369 8.32593 11.8406 8.32789C11.8416 8.32838 11.8425 8.32911 11.8435 8.32985C11.8444 8.33058 11.8453 8.33131 11.8463 8.3318C11.85 8.33376 11.8538 8.33571 11.8566 8.33865C11.8575 8.33914 11.8585 8.33987 11.8594 8.34061C11.8603 8.34134 11.8613 8.34207 11.8622 8.34256C11.8641 8.34403 11.8657 8.34549 11.8674 8.34696C11.869 8.34843 11.8706 8.3499 11.8725 8.35136C11.873 8.35185 11.8737 8.35234 11.8744 8.35283C11.8751 8.35332 11.8758 8.35381 11.8763 8.3543C11.8781 8.35626 11.88 8.35846 11.8819 8.36066C11.8838 8.36286 11.8856 8.36506 11.8875 8.36701L11.8884 8.36799C11.8908 8.37141 11.8934 8.37484 11.8959 8.37826C11.8985 8.38168 11.9011 8.38511 11.9034 8.38853L13.8999 11.2024V8.49807C13.8999 8.38755 13.9852 8.29855 14.0911 8.29855Z"
+        fill="white"
+      />
+    </svg>
+  );
+};

package/src/index.ts

@@ -0,0 +1,35 @@
+export { Accordion } from "./components/Accordion/Accordion";
+export { ActionHalfModal } from "./components/ActionHalfModal/ActionHalfModal";
+export { ActionModal } from "./components/ActionModal/ActionModal";
+export { Box } from "./components/Box/Box";
+export { Button } from "./components/Button/Button";
+export { ButtonCard } from "./components/ButtonCard/ButtonCard";
+export { Center } from "./components/Center/Center";
+export { Divider } from "./components/Divider/Divider";
+export { Heading } from "./components/Heading/Heading";
+export { LinkButton } from "./components/Button/LinkButton";
+export { ErrorMessage } from "./components/ErrorMessage/ErrorMessage";
+export { Flex } from "./components/Flex/Flex";
+export { FlexItem } from "./components/FlexItem/FlexItem";
+export { HelperMessage } from "./components/HelperMessage/HelperMessage";
+export { Checkbox } from "./components/Checkbox/Checkbox";
+export { CheckboxCard } from "./components/CheckboxCard/CheckboxCard";
+export { CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup";
+export { Icon } from "./components/Icon/Icon";
+export { Input } from "./components/Input/Input";
+export { Label } from "./components/Label/Label";
+export { LinkCard } from "./components/LinkCard/LinkCard";
+export { MessageHalfModal } from "./components/MessageHalfModal/MessageHalfModal";
+export { MessageModal } from "./components/MessageModal/MessageModal";
+export { Pre } from "./components/Pre/Pre";
+export { RadioButton } from "./components/RadioButton/RadioButton";
+export { RadioCard } from "./components/RadioCard/RadioCard";
+export { RadioGroup } from "./components/RadioGroup/RadioGroup";
+export { Select } from "./components/Select/Select";
+export { Text } from "./components/Text/Text";
+export { TextArea } from "./components/TextArea/TextArea";
+export { Stack } from "./components/Stack/Stack";
+export { Stepper } from "./components/Stepper/Stepper";
+export { Toggle } from "./components/Toggle/Toggle";
+
+export type { IconName } from "./types/icon";

package/src/sharedComponents/RequiredLabel/RequiredLabel.module.css

@@ -0,0 +1,10 @@
+.required {
+  display: inline-block;
+  flex-shrink: 0;
+  padding: 2px var(--size-spacing-xxs) 1px;
+  font-size: var(--text-tag-md-size);
+  line-height: var(--text-tag-md-line);
+  color: var(--color-ubie-white);
+  background-color: var(--color-error);
+  border-radius: var(--radius-sm);
+}

package/src/sharedComponents/RequiredLabel/RequiredLabel.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import React from "react";
+import styles from "./RequiredLabel.module.css";
+
+export const RequiredLabel: React.FC = () => {
+  return <span className={styles.required}>必須</span>;
+};

package/src/sharedComponents/VisuallyHidden/VisuallyHidden.module.css

@@ -0,0 +1,15 @@
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.visuallyHidden[tabindex="-1"] {
+  outline: none;
+}

package/src/sharedComponents/VisuallyHidden/VisuallyHidden.tsx

@@ -0,0 +1,22 @@
+import { ComponentPropsWithRef, ForwardedRef } from "react";
+import styles from "./VisuallyHidden.module.css";
+import { fixedForwardRef } from "../../utils/component";
+import { DistributiveOmit } from "../../utils/types";
+import type { ElementType } from "react";
+
+function VisuallyHiddenInner<T extends ElementType>(
+  props: {
+    as?: T;
+  } & DistributiveOmit<ComponentPropsWithRef<ElementType extends T ? "span" : T>, "as">,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ref: ForwardedRef<any>,
+) {
+  const { children, as: Component = "span", className: _, ...otherProps } = props;
+  return (
+    <Component className={styles.visuallyHidden} {...otherProps} ref={ref}>
+      {children}
+    </Component>
+  );
+}
+
+export const VisuallyHidden = fixedForwardRef(VisuallyHiddenInner);

package/src/stories/Accordion.stories.portable.ts

@@ -0,0 +1,4 @@
+import { composeStories } from "@storybook/react-vite";
+import * as stories from "../components/Accordion/Accordion.stories";
+
+export default composeStories(stories);

package/src/stories/Box.stories.tsx

@@ -0,0 +1,474 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { Box, Stack } from "..";
+import type { ComponentProps } from "react";
+
+export default {
+  component: Box,
+} satisfies Meta<typeof Box>;
+
+const defaultArgs = {
+  children: "Box",
+  pt: "md",
+  pr: "md",
+  pb: "md",
+  pl: "md",
+  radius: "md",
+  backgroundColor: "blue",
+} satisfies Partial<ComponentProps<typeof Box>>;
+
+type Story = StoryObj<typeof Box>;
+
+export const Default: Story = {
+  args: defaultArgs,
+};
+
+export const BackgroundColor: Story = {
+  render: (args) => (
+    <Stack gap="xs">
+      <Box {...args} backgroundColor="blue">
+        Blue
+      </Box>
+      <Box {...args} backgroundColor="blueDarken">
+        Blue Darken
+      </Box>
+      <Box {...args} backgroundColor="blueInverse" textColor="white">
+        Blue Inverse
+      </Box>
+      <Box {...args} backgroundColor="blueInverseDarken" textColor="white">
+        Blue Inverse Darken
+      </Box>
+      <Box {...args} backgroundColor="pink">
+        Pink
+      </Box>
+      <Box {...args} backgroundColor="pinkDarken">
+        Pink Darken
+      </Box>
+      <Box {...args} backgroundColor="pinkInverse" textColor="white">
+        Pink Inverse
+      </Box>
+      <Box {...args} backgroundColor="pinkInverseDarken" textColor="white">
+        Pink Inverse Darken
+      </Box>
+      <Box {...args} backgroundColor="orange">
+        Orange
+      </Box>
+      <Box {...args} backgroundColor="orangeDarken">
+        Orange Darken
+      </Box>
+      <Box {...args} backgroundColor="orangeInverse" textColor="white">
+        Orange Inverse
+      </Box>
+      <Box {...args} backgroundColor="orangeInverseDarken" textColor="white">
+        Orange Inverse Darken
+      </Box>
+      <Box {...args} backgroundColor="purple">
+        Purple
+      </Box>
+      <Box {...args} backgroundColor="purpleDarken">
+        Purple Darken
+      </Box>
+      <Box {...args} backgroundColor="purpleInverse" textColor="white">
+        Purple Inverse
+      </Box>
+      <Box {...args} backgroundColor="purpleInverseDarken" textColor="white">
+        Purple Inverse Darken
+      </Box>
+      <Box {...args} backgroundColor="green">
+        Green
+      </Box>
+      <Box {...args} backgroundColor="greenDarken">
+        Green Darken
+      </Box>
+      <Box {...args} backgroundColor="greenInverse" textColor="white">
+        Green Inverse
+      </Box>
+      <Box {...args} backgroundColor="greenInverseDarken" textColor="white">
+        Green Inverse Darken
+      </Box>
+      <Box {...args} backgroundColor="red">
+        Red
+      </Box>
+      <Box {...args} backgroundColor="redDarken">
+        Red Darken
+      </Box>
+      <Box {...args} backgroundColor="redInverse" textColor="white">
+        Red Inverse
+      </Box>
+      <Box {...args} backgroundColor="redInverseDarken" textColor="white">
+        Red Inverse Darken
+      </Box>
+      <Box {...args} backgroundColor="black">
+        Black
+      </Box>
+      <Box {...args} backgroundColor="blackDarken">
+        Black Darken
+      </Box>
+      <Box {...args} backgroundColor="blackInverse" textColor="white">
+        Black Inverse
+      </Box>
+      <Box {...args} backgroundColor="blackInverseDarken" textColor="white">
+        Black Inverse Darken
+      </Box>
+      <Box {...args} backgroundColor="white" textColor="main">
+        White
+      </Box>
+    </Stack>
+  ),
+  args: defaultArgs,
+};
+
+export const Padding: Story = {
+  render: (args) => (
+    <div>
+      <Box {...args} pt="xxs" pr="xxs" pb="xxs" pl="xxs">
+        xxs
+      </Box>
+      <Box {...args} mt="md" pt="xs" pr="xs" pb="xs" pl="xs">
+        xs
+      </Box>
+      <Box {...args} mt="md" pt="sm" pr="sm" pb="sm" pl="sm">
+        sm
+      </Box>
+      <Box {...args} mt="md" pt="md" pr="md" pb="md" pl="md">
+        md
+      </Box>
+      <Box {...args} mt="md" pt="lg" pr="lg" pb="lg" pl="lg">
+        lg
+      </Box>
+      <Box {...args} mt="md" pt="xl" pr="xl" pb="xl" pl="xl">
+        xl
+      </Box>
+      <Box {...args} mt="md" pt="xxl" pr="xxl" pb="xxl" pl="xxl">
+        xxl
+      </Box>
+    </div>
+  ),
+  args: defaultArgs,
+};
+
+export const Margin: Story = {
+  render: (args) => (
+    <div>
+      <Box {...args} mt="xxs" mr="xxs" mb="xxs" ml="xxs">
+        xxs
+      </Box>
+      <hr />
+      <Box {...args} mt="xs" mr="xs" mb="xs" ml="xs">
+        xs
+      </Box>
+      <hr />
+      <Box {...args} mt="sm" mr="sm" mb="sm" ml="sm">
+        sm
+      </Box>
+      <hr />
+      <Box {...args} mt="md" mr="md" mb="md" ml="md">
+        md
+      </Box>
+      <hr />
+      <Box {...args} mt="lg" mr="lg" mb="lg" ml="lg">
+        lg
+      </Box>
+      <hr />
+      <Box {...args} mt="xl" mr="xl" mb="xl" ml="xl">
+        xl
+      </Box>
+      <hr />
+      <Box {...args} mt="xxl" mr="xxl" mb="xxl" ml="xxl">
+        xxl
+      </Box>
+    </div>
+  ),
+  args: defaultArgs,
+};
+
+export const Radius: Story = {
+  render: (args) => (
+    <div>
+      <Box {...args} pt="md" pr="md" pb="md" pl="md" radius="xs">
+        xs
+      </Box>
+      <Box {...args} mt="md" pt="md" pr="md" pb="md" pl="md" radius="sm">
+        sm
+      </Box>
+      <Box {...args} mt="md" pt="md" pr="md" pb="md" pl="md" radius="md">
+        md
+      </Box>
+      <Box {...args} mt="md" pt="md" pr="md" pb="md" pl="md" radius="lg">
+        lg
+      </Box>
+      <Box {...args} mt="md" pt="md" pr="md" pb="md" pl="md" radius="full">
+        full
+      </Box>
+    </div>
+  ),
+  args: defaultArgs,
+};
+
+export const Border: Story = {
+  render: (args) => (
+    <Stack gap="xs">
+      <Box {...args} backgroundColor="blue" border="blue">
+        Blue Border
+      </Box>
+      <Box {...args} backgroundColor="blue" border="blueThick">
+        Blue Border Thick
+      </Box>
+      <Box {...args} backgroundColor="pink" border="pink">
+        Pink Border
+      </Box>
+      <Box {...args} backgroundColor="pink" border="pinkThick">
+        Pink Border Thick
+      </Box>
+      <Box {...args} backgroundColor="orange" border="orange">
+        Orange Border
+      </Box>
+      <Box {...args} backgroundColor="orange" border="orangeThick">
+        Orange Border Thick
+      </Box>
+      <Box {...args} backgroundColor="purple" border="purple">
+        Purple Border
+      </Box>
+      <Box {...args} backgroundColor="purple" border="purpleThick">
+        Purple Border Thick
+      </Box>
+      <Box {...args} backgroundColor="green" border="green">
+        Green Border
+      </Box>
+      <Box {...args} backgroundColor="green" border="greenThick">
+        Green Border Thick
+      </Box>
+      <Box {...args} backgroundColor="red" border="red">
+        Red Border
+      </Box>
+      <Box {...args} backgroundColor="red" border="redThick">
+        Red Border Thick
+      </Box>
+      <Box {...args} backgroundColor="black" border="black">
+        Border Black
+      </Box>
+      <Box {...args} backgroundColor="black" border="blackThick">
+        Border Black Thick
+      </Box>
+    </Stack>
+  ),
+  args: defaultArgs,
+};
+
+export const Width: Story = {
+  render: () => (
+    <Stack spacing="md">
+      <p>
+        Flexコンテナの子要素では、デフォルトでは横幅がintrinsic（コンテンツに応じた幅）となります。widthをfullとすることで100%を維持できます。
+      </p>
+      <Box {...defaultArgs} width="full">
+        Width Full
+      </Box>
+
+      <Box {...defaultArgs} width="100%">
+        Width 100%
+      </Box>
+
+      <Box {...defaultArgs} maxWidth="500px">
+        Max Width 500px
+      </Box>
+
+      <Box {...defaultArgs} minWidth="500px">
+        Min Width 500px
+      </Box>
+
+      <Box {...defaultArgs}>Not Width Full</Box>
+    </Stack>
+  ),
+};
+
+export const AsSection: Story = {
+  render: () => (
+    <Box as="section" pt="md" pr="md" pb="md" pl="md" radius="md" backgroundColor="blue">
+      <h2>Heading</h2>
+
+      <p>body</p>
+    </Box>
+  ),
+};
+
+export const TextVariations: Story = {
+  render: (args) => (
+    <div>
+      <Box
+        {...args}
+        backgroundColor="blue"
+        textColor="blue"
+        textBold
+        textType="body"
+        textSize="lg"
+        textLeading="narrow"
+      >
+        <p>Text Bold</p>
+
+        <Box {...args} backgroundColor="black">
+          <p>nested</p>
+        </Box>
+
+        <Box
+          {...args}
+          mt="md"
+          backgroundColor="black"
+          textColor="black"
+          textType="body"
+          textSize="sm"
+          textLeading="narrow"
+          textBold={false}
+        >
+          <p>nested. reset styles</p>
+        </Box>
+      </Box>
+
+      <Box {...args} backgroundColor="black" mt="xl" textColor="main">
+        <p>Color Main</p>
+      </Box>
+      <Box {...args} backgroundColor="black" mt="md" textColor="sub">
+        <p>Color Sub</p>
+      </Box>
+      <Box {...args} backgroundColor="black" mt="md" textColor="link">
+        <p>Color Main</p>
+      </Box>
+      <Box {...args} backgroundColor="black" mt="md" textColor="linkSub">
+        <p>Color Link Sub</p>
+      </Box>
+      <Box {...args} backgroundColor="black" mt="md" textColor="disabled">
+        <p>Color Disabled</p>
+      </Box>
+      <Box {...args} backgroundColor="blue" mt="md" textColor="blue">
+        <p>Color Blue</p>
+      </Box>
+      <Box {...args} backgroundColor="pink" mt="md" textColor="pink">
+        <p>Color Pink</p>
+      </Box>
+      <Box {...args} backgroundColor="orange" mt="md" textColor="orange">
+        <p>Color Orange</p>
+      </Box>
+      <Box {...args} backgroundColor="purple" mt="md" textColor="purple">
+        <p>Color Purple</p>
+      </Box>
+      <Box {...args} backgroundColor="green" mt="md" textColor="green">
+        <p>Color Green</p>
+      </Box>
+      <Box {...args} backgroundColor="red" mt="md" textColor="red">
+        <p>Color Red</p>
+      </Box>
+      <Box {...args} backgroundColor="black" mt="md" textColor="black">
+        <p>Color Black</p>
+      </Box>
+      <Box {...args} mt="xl" textType="body">
+        <p>Body size & leading default value</p>
+      </Box>
+
+      <Box {...args} mt="xl" textType="body" textSize="xs" textLeading="default">
+        <p>Body Extra Small Default</p>
+      </Box>
+      <Box {...args} mt="md" textType="body" textSize="xs" textLeading="narrow">
+        <p>Body Extra Small Narrow</p>
+      </Box>
+
+      <Box {...args} mt="xl" textType="body" textSize="sm" textLeading="default">
+        <p>Body Small Default</p>
+      </Box>
+      <Box {...args} mt="md" textType="body" textSize="sm" textLeading="narrow">
+        <p>Body Small Narrow</p>
+      </Box>
+
+      <Box {...args} mt="xl" textType="body" textSize="md" textLeading="default">
+        <p>Body Medium Default</p>
+      </Box>
+      <Box {...args} mt="md" textType="body" textSize="md" textLeading="narrow">
+        <p>Body Medium Narrow</p>
+      </Box>
+
+      <Box {...args} mt="xl" textType="body" textSize="lg" textLeading="default">
+        <p>Body Large Default</p>
+      </Box>
+      <Box {...args} mt="md" textType="body" textSize="lg" textLeading="narrow">
+        <p>Body Large Narrow</p>
+      </Box>
+
+      <Box {...defaultArgs} mt="xl" textAlign="left">
+        <p>Text Left</p>
+      </Box>
+      <Box {...defaultArgs} mt="md" textAlign="center">
+        <p>Text Center</p>
+      </Box>
+      <Box {...defaultArgs} mt="md" textAlign="right">
+        <p>Text Right</p>
+      </Box>
+      <div style={{ textAlign: "center" }}>
+        <Box {...defaultArgs} mt="md">
+          <p>Inherit(undefined)</p>
+        </Box>
+      </div>
+    </div>
+  ),
+  args: defaultArgs,
+};
+
+export const CustomDataAttribute: Story = {
+  render: (args) => <Box {...args} />,
+  args: {
+    ["data-test-id"]: "some-test",
+    ...defaultArgs,
+  },
+};
+
+export const TextWrap: Story = {
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <Stack spacing="md">
+        <Box {...args}>
+          <p>
+            私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111
+          </p>
+          <p>
+            industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the
+            1500s, when an unknown printer took a galley of type and scrambled it to make a type
+            specimen booooooooooooooooooooooooooooooooooooooooooooook.
+          </p>
+        </Box>
+
+        <Box {...args} textNoWrap>
+          <p>noWrap</p>
+          <p>
+            私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111
+          </p>
+          <p>
+            industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the
+            1500s, when an unknown printer took a galley of type and scrambled it to make a type
+            specimen booooooooooooooooooooooooooooooooooooooooooooook.
+          </p>
+        </Box>
+      </Stack>
+    </div>
+  ),
+  args: {
+    ...defaultArgs,
+  },
+};
+
+export const Inline: Story = {
+  render: (args) => (
+    <p>
+      文章文章文章
+      <Box {...args} inline>
+        インライン
+      </Box>
+      文章文章文章
+    </p>
+  ),
+  args: {
+    ...defaultArgs,
+    as: "span",
+    backgroundColor: "blueInverse",
+    textColor: "white",
+    inline: true,
+    p: "xs",
+    m: "sm",
+  },
+};