@reni-corp/reni-2c-ui 0.4.11 → 0.4.12

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reni-corp/reni-2c-ui",
-  "version": "0.4.11",
+  "version": "0.4.12",
   "type": "module",
   "main": "./dist/script.umd.js",
   "module": "./dist/index.es.js",
@@ -15,6 +15,10 @@
       "types": "./dist/valueObjects.d.ts",
       "import": "./dist/valueObjects.es.js"
     },
+    "./composables": {
+      "types": "./dist/composables.d.ts",
+      "import": "./dist/composables.es.js"
+    },
     "./constants": {
       "types": "./dist/constants.d.ts",
       "import": "./dist/constants.es.js"
@@ -57,14 +61,7 @@
     "test:vrt:docker:update": "docker run --rm -v $(pwd):/work -w /work mcr.microsoft.com/playwright:v1.58.2-noble npx playwright test --config playwright.config.ts --update-snapshots"
   },
   "dependencies": {
-    "@awesome.me/kit-37f9c6ad08": "^1.0.24",
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-regular-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/pro-regular-svg-icons": "^6.7.2",
-    "@fortawesome/vue-fontawesome": "^3.0.8",
-    "@reni-corp/mani-editor": "^0.1.6",
+    "@reni-corp/reni-icon": "1.0.6",
     "@vee-validate/i18n": "^4.15.1",
     "@vee-validate/rules": "^4.11.3",
     "@vueuse/components": "^10.5.0",

package/src/stories/AppBar.stories.ts

@@ -75,11 +75,11 @@ const sampleMenu: AppBarMenuItem[] = [
 const sampleActions: AppBarAction[] = [
   {
     title: '検索',
-    icon: ['far', 'magnifying-glass'],
+    icon: 'magnifying-glass-outline',
     action: () => alert('検索'),
   },
-  { title: 'アカウント', icon: ['far', 'user'], url: '/account' },
-  { title: 'カート', icon: ['far', 'cart-shopping'], url: '/cart' },
+  { title: 'アカウント', icon: 'user-outline', url: '/account' },
+  { title: 'カート', icon: 'cart-shopping-outline', url: '/cart' },
 ]
 
 // ★ Defaultを最初に配置（autodocsのPrimary storyになる）
@@ -166,9 +166,9 @@ export const Slotカスタマイズ: OverridesStory = {
             </rn-stack>
           </template>
           <template #actions>
-            <rn-icon :icon="['far', 'magnifying-glass']" />
-            <rn-icon :icon="['far', 'user']" />
-            <rn-icon :icon="['far', 'cart-shopping']" />
+            <rn-icon icon="magnifying-glass-outline" />
+            <rn-icon icon="user-outline" />
+            <rn-icon icon="cart-shopping-outline" />
           </template>
         </rn-app-bar>
       </div>
@@ -194,10 +194,10 @@ export const Slotのみ: OverridesStory = {
         </p>
         <rn-app-bar v-bind="args">
           <template #title>
-            <rn-icon :icon="['far', 'bars']" />
+            <rn-icon icon="bars-outline" />
           </template>
           <template #actions>
-            <rn-icon icon="bell" />
+            <rn-icon icon="ellipsis-vertical-outline" />
           </template>
         </rn-app-bar>
       </div>

package/src/stories/AppBottomBar.stories.ts

@@ -0,0 +1,443 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import AppBottomBar, {
+  type AppBottomBarProps,
+} from '@/components/foundation/AppBottomBar.vue'
+import AppBar from '@/components/foundation/AppBar.vue'
+import AppBody from '@/components/foundation/AppBody.vue'
+import AppFrame from '@/components/foundation/AppFrame.vue'
+import AnnounceBar from '@/components/features/AnnounceBar.vue'
+import Button from '@/components/elements/Button.vue'
+import Tabs from '@/components/interactive/Tabs.vue'
+import Tab from '@/components/interactive/Tab.vue'
+import { ref } from 'vue'
+
+const meta: Meta<typeof AppBottomBar> = {
+  title: 'Foundation/AppBottomBar',
+  component: AppBottomBar,
+  tags: ['autodocs'],
+  argTypes: {
+    flat: {
+      control: 'boolean',
+      description: 'true でボーダー・影なし',
+    },
+  },
+  args: {
+    flat: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+画面下端に固定される sticky スタック領域。\`AppFrame\` の末尾に配置し、\`position: sticky; bottom: 0\` でビューポート下端に固定されます。
+
+中身は **任意の数のレイヤーを縦に積める Stack 構造**（\`display: flex; flex-direction: column;\`）として動作します。タブ単独はもちろん、CTA・AnnounceBar など複数のレイヤーを同居させる場合も、子要素を並べるだけで上下に積み上がります。
+
+## 基本的な使い方（単独）
+
+\`\`\`html
+<rn-app-frame>
+  <rn-app-bar title="ストア名" />
+  <rn-app-body><!-- コンテンツ --></rn-app-body>
+  <rn-app-bottom-bar>
+    <rn-tabs variant="icon">
+      <rn-tab icon="home-outline" label="ホーム" :active="true" />
+      <rn-tab icon="bars-outline" label="カテゴリ" />
+      <rn-tab icon="star-outline" label="お気に入り" />
+      <rn-tab icon="user-outline" label="マイページ" />
+    </rn-tabs>
+  </rn-app-bottom-bar>
+</rn-app-frame>
+\`\`\`
+
+## 複数レイヤーを Stack する
+
+\`\`\`html
+<rn-app-bottom-bar>
+  <rn-announce-bar v-if="announce" title="お知らせ" />
+  <PriceCta v-if="hasCta" :price="3000" />
+  <rn-tabs>...</rn-tabs>
+</rn-app-bottom-bar>
+\`\`\`
+
+- 子要素の DOM 順がそのまま表示順
+- 各レイヤーの表示・非表示は子の \`v-if\` で制御
+- 境界線・余白は各レイヤー側の責務（AppBottomBar は外側 chrome と safe-area のみ担当）
+
+## Props
+- \`flat\`: 外側のボーダー・影を非表示にする（AppBar と同じ概念）
+
+## 備考
+- 子要素間に divider が必要な場合は、子コンポーネント側で \`border-top\` 等を持たせる
+- iOS セーフエリア（ホームインジケーター領域）を \`env(safe-area-inset-bottom)\` で自動吸収
+- ページごとに変わる中身（CTA 等）は \`<Teleport>\` でレイアウト内に差し込むパターンを推奨
+        `,
+      },
+    },
+  },
+}
+
+export default meta
+type StoryArgs = AppBottomBarProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, unknown>
+}
+
+const tabItems = [
+  { icon: 'home-outline', label: 'ホーム' },
+  { icon: 'bars-outline', label: 'カテゴリ' },
+  { icon: 'star-outline', label: 'お気に入り' },
+  { icon: 'user-outline', label: 'マイページ' },
+]
+
+export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {},
+  parameters: {
+    layout: 'fullscreen',
+  },
+  render: (args) => ({
+    components: {
+      'rn-app-frame': AppFrame,
+      'rn-app-bar': AppBar,
+      'rn-app-body': AppBody,
+      'rn-app-bottom-bar': AppBottomBar,
+      'rn-tabs': Tabs,
+      'rn-tab': Tab,
+    },
+    setup() {
+      const current = ref(0)
+      const tabs = tabItems
+      return { args, current, tabs }
+    },
+    template: /* html */ `
+      <rn-app-frame>
+        <rn-app-bar title="ストア名" />
+        <rn-app-body>
+          <div style="display: flex; flex-direction: column; gap: 16px;">
+            <p>コンテンツエリア。スクロールしてもボトムバーが下端に固定されます。</p>
+            <div
+              v-for="i in 10"
+              :key="i"
+              style="height: 80px; background: var(--rn-bg-surface); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--rn-text-tertiary);"
+            >
+              コンテンツ {{ i }}
+            </div>
+          </div>
+        </rn-app-body>
+        <rn-app-bottom-bar v-bind="args">
+          <rn-tabs variant="icon" :isStretched="true">
+            <rn-tab
+              v-for="(tab, index) in tabs"
+              :key="index"
+              :icon="tab.icon"
+              :label="tab.label"
+              :active="current === index"
+              @click="current = index"
+            />
+          </rn-tabs>
+        </rn-app-bottom-bar>
+      </rn-app-frame>
+    `,
+  }),
+}
+
+export const CTAとタブをStackする: OverridesStory = {
+  args: {},
+  argTypes: {},
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        story: `
+ページ固有の主アクション（CTA）とグローバルタブを 1 つの \`AppBottomBar\` に積むパターン。整理券ページや商品詳細ページなど、購買・申し込み導線をタブと併存させる典型構成。
+
+\`\`\`vue
+<rn-app-bottom-bar>
+  <div style="padding: 12px 16px;">
+    <rn-button block color="dark">発行手続きを行う</rn-button>
+  </div>
+  <rn-tabs variant="icon" :isStretched="true">
+    <rn-tab icon="home-outline" label="ホーム" />
+    <rn-tab icon="clipboard-outline" label="オーダーシート" />
+    <rn-tab icon="tag-outline" label="整理券" :active="true" />
+  </rn-tabs>
+</rn-app-bottom-bar>
+\`\`\`
+
+- CTA とタブの間に divider は置かず、AppBottomBar 外側の border-top と各レイヤーの padding で視覚的分離する
+- CTA の左右余白は CTA 側（外側の div）の責務。AppBottomBar 自体は padding を持たない
+- フルページの構成例は \`Example/整理券ページ\` を参照
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: {
+      'rn-app-frame': AppFrame,
+      'rn-app-bar': AppBar,
+      'rn-app-body': AppBody,
+      'rn-app-bottom-bar': AppBottomBar,
+      'rn-button': Button,
+      'rn-tabs': Tabs,
+      'rn-tab': Tab,
+    },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <rn-app-frame>
+        <rn-app-bar title="KIRITO OFFICIAL GOODS STORE" />
+        <rn-app-body>
+          <div style="display: flex; flex-direction: column; gap: 16px;">
+            <p>ページ本体。下端には CTA（発行手続きを行う）とタブが Stack されています。</p>
+            <div
+              v-for="i in 4"
+              :key="i"
+              style="height: 80px; background: var(--rn-bg-surface); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--rn-text-tertiary);"
+            >
+              コンテンツ {{ i }}
+            </div>
+          </div>
+        </rn-app-body>
+        <rn-app-bottom-bar>
+          <div style="padding: 12px 16px;">
+            <rn-button block color="dark">発行手続きを行う</rn-button>
+          </div>
+          <rn-tabs variant="icon" :isStretched="true">
+            <rn-tab icon="home-outline" label="ホーム" />
+            <rn-tab icon="clipboard-outline" label="オーダーシート" />
+            <rn-tab icon="tag-outline" label="整理券" :active="true" />
+          </rn-tabs>
+        </rn-app-bottom-bar>
+      </rn-app-frame>
+    `,
+  }),
+}
+
+export const 複数レイヤーをStackする: OverridesStory = {
+  args: {},
+  argTypes: {},
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        story: `
+\`AppBottomBar\` は \`display: flex; flex-direction: column;\` で Stack 構造として動作するため、複数のレイヤーを子要素として並べるだけで上下に積み上がります。
+
+\`\`\`vue
+<rn-app-bottom-bar>
+  <rn-announce-bar v-if="announce" title="お知らせ" />
+  <PriceCta :price="3000" />
+  <rn-tabs>...</rn-tabs>
+</rn-app-bottom-bar>
+\`\`\`
+
+- 子要素の DOM 順 = 表示順（上から AnnounceBar → CTA → Tabs）
+- 各レイヤーの表示・非表示は \`v-if\` で素直に制御
+- sticky の責務は AppBottomBar が一括で持つため、Stack 内部のレイヤー同士で位置調整は不要
+- 境界線・余白は各レイヤー側（AnnounceBar の背景色、Tabs 自身の divider など）の責務
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: {
+      'rn-app-frame': AppFrame,
+      'rn-app-bar': AppBar,
+      'rn-app-body': AppBody,
+      'rn-app-bottom-bar': AppBottomBar,
+      'rn-announce-bar': AnnounceBar,
+      'rn-button': Button,
+      'rn-tabs': Tabs,
+      'rn-tab': Tab,
+    },
+    setup() {
+      const current = ref(0)
+      const tabs = tabItems
+      return { args, current, tabs }
+    },
+    template: /* html */ `
+      <rn-app-frame>
+        <rn-app-bar title="ストア名" />
+        <rn-app-body>
+          <div style="display: flex; flex-direction: column; gap: 16px;">
+            <p>AnnounceBar・CTA・Tabs の 3 レイヤーを 1 つの AppBottomBar に Stack しています。</p>
+            <div
+              v-for="i in 4"
+              :key="i"
+              style="height: 80px; background: var(--rn-bg-surface); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--rn-text-tertiary);"
+            >
+              商品コンテンツ {{ i }}
+            </div>
+          </div>
+        </rn-app-body>
+        <rn-app-bottom-bar>
+          <rn-announce-bar title="期間限定キャンペーン開催中" color="warning" />
+          <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; gap: 12px; border-top: 1px solid var(--rn-line-default);">
+            <div style="display: flex; flex-direction: column; line-height: 1.2;">
+              <span style="font-size: 12px; color: var(--rn-text-tertiary);">価格</span>
+              <span style="font-size: 18px; font-weight: bold;">¥3,000</span>
+            </div>
+            <rn-button>カートに追加</rn-button>
+          </div>
+          <rn-tabs variant="icon" :isStretched="true">
+            <rn-tab
+              v-for="(tab, index) in tabs"
+              :key="index"
+              :icon="tab.icon"
+              :label="tab.label"
+              :active="current === index"
+              @click="current = index"
+            />
+          </rn-tabs>
+        </rn-app-bottom-bar>
+      </rn-app-frame>
+    `,
+  }),
+}
+
+export const ページCTAをTeleportで差し込む: OverridesStory = {
+  args: {},
+  argTypes: {},
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        story: `
+ページごとに変わる CTA は、レイアウト側の \`AppBottomBar\` 内に差し込み口を置き、ページから \`<Teleport>\` で注入するパターンを推奨します。Stack 構造になっているため、タブと共存させる場合でも 1 つの \`AppBottomBar\` の中に並ぶだけで sticky の重なり問題は発生しません。
+
+\`\`\`vue
+<!-- レイアウト側 -->
+<rn-app-frame>
+  <rn-app-bar />
+  <rn-app-body><slot /></rn-app-body>
+  <rn-app-bottom-bar>
+    <div id="page-cta-outlet"></div>     <!-- ページCTA 差し込み口 -->
+    <rn-tabs>...</rn-tabs>                <!-- グローバルタブ -->
+  </rn-app-bottom-bar>
+</rn-app-frame>
+
+<!-- ページ側 -->
+<Teleport defer to="#page-cta-outlet">
+  <!-- 価格・CTA など、ページ固有の中身 -->
+</Teleport>
+\`\`\`
+
+- \`<Teleport defer>\` は Vue 3.5+ の機能。outlet が後に描画される場合の mount 順問題を吸収する
+- ライブラリ側に追加 API は不要（既存 slot に差し込むだけ）
+- ページに CTA が無い場合は \`<Teleport>\` を書かないだけ
+- 商品詳細など購買フォーカス画面では、タブを表示せず CTA だけ差し込む運用も可能
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: {
+      'rn-app-frame': AppFrame,
+      'rn-app-bar': AppBar,
+      'rn-app-body': AppBody,
+      'rn-app-bottom-bar': AppBottomBar,
+      'rn-button': Button,
+      'rn-tabs': Tabs,
+      'rn-tab': Tab,
+      'product-page': {
+        components: {
+          'rn-button': Button,
+        },
+        template: /* html */ `
+          <div style="display: flex; flex-direction: column; gap: 16px;">
+            <p>商品詳細ページ。価格＋CTA を Teleport で AppBottomBar の差し込み口に投入しています。</p>
+            <div
+              v-for="i in 4"
+              :key="i"
+              style="height: 80px; background: var(--rn-bg-surface); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--rn-text-tertiary);"
+            >
+              商品コンテンツ {{ i }}
+            </div>
+          </div>
+          <teleport defer to="#page-cta-outlet">
+            <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; gap: 12px;">
+              <div style="display: flex; flex-direction: column; line-height: 1.2;">
+                <span style="font-size: 12px; color: var(--rn-text-tertiary);">価格</span>
+                <span style="font-size: 18px; font-weight: bold;">¥3,000</span>
+              </div>
+              <rn-button>カートに追加</rn-button>
+            </div>
+          </teleport>
+        `,
+      },
+    },
+    setup() {
+      const current = ref(0)
+      const tabs = tabItems
+      return { args, current, tabs }
+    },
+    template: /* html */ `
+      <rn-app-frame>
+        <rn-app-bar title="ストア名" />
+        <rn-app-body>
+          <product-page />
+        </rn-app-body>
+        <rn-app-bottom-bar>
+          <div id="page-cta-outlet" style="border-top: 1px solid var(--rn-line-default);"></div>
+          <rn-tabs variant="icon" :isStretched="true">
+            <rn-tab
+              v-for="(tab, index) in tabs"
+              :key="index"
+              :icon="tab.icon"
+              :label="tab.label"
+              :active="current === index"
+              @click="current = index"
+            />
+          </rn-tabs>
+        </rn-app-bottom-bar>
+      </rn-app-frame>
+    `,
+  }),
+}
+
+export const Flat: OverridesStory = {
+  args: {
+    flat: true,
+  },
+  argTypes: {},
+  parameters: {
+    layout: 'fullscreen',
+  },
+  render: (args) => ({
+    components: {
+      'rn-app-frame': AppFrame,
+      'rn-app-bar': AppBar,
+      'rn-app-body': AppBody,
+      'rn-app-bottom-bar': AppBottomBar,
+      'rn-tabs': Tabs,
+      'rn-tab': Tab,
+    },
+    setup() {
+      const current = ref(0)
+      const tabs = tabItems
+      return { args, current, tabs }
+    },
+    template: /* html */ `
+      <rn-app-frame>
+        <rn-app-bar title="ストア名" :flat="true" />
+        <rn-app-body>
+          <p>flat モード。ボーダー・影なし。AppBar の flat と組み合わせて使います。</p>
+        </rn-app-body>
+        <rn-app-bottom-bar v-bind="args">
+          <rn-tabs variant="icon" :isStretched="true">
+            <rn-tab
+              v-for="(tab, index) in tabs"
+              :key="index"
+              :icon="tab.icon"
+              :label="tab.label"
+              :active="current === index"
+              @click="current = index"
+            />
+          </rn-tabs>
+        </rn-app-bottom-bar>
+      </rn-app-frame>
+    `,
+  }),
+}

package/src/stories/AppLayout.stories.ts

@@ -29,6 +29,7 @@ import Image from '@/components/elements/Image.vue'
 import Spinner from '@/components/elements/Spinner.vue'
 import Card from '@/components/layouts/Card.vue'
 import Alert from '@/components/elements/Alert.vue'
+import Callout from '@/components/elements/Callout.vue'
 
 const meta: Meta<typeof AppFrame> = {
   title: 'Example/配送通販',
@@ -83,11 +84,11 @@ const mockAppBarMenu: AppBarMenuItem[] = [
 const mockAppBarActions: AppBarAction[] = [
   {
     title: '検索',
-    icon: ['far', 'magnifying-glass'],
+    icon: 'magnifying-glass-outline',
     action: () => console.log('検索'),
   },
-  { title: 'アカウント', icon: ['far', 'user'], url: '/account' },
-  { title: 'カート', icon: ['far', 'cart-shopping'], url: '/cart' },
+  { title: 'アカウント', icon: 'user-outline', url: '/account' },
+  { title: 'カート', icon: 'cart-shopping-outline', url: '/cart' },
 ]
 
 // AppFooter用データ
@@ -396,9 +397,9 @@ export const Slotカスタマイズ版: Story = {
             </rn-stack>
           </template>
           <template #actions>
-            <rn-icon :icon="['far', 'magnifying-glass']" />
-            <rn-icon :icon="['far', 'user']" />
-            <rn-icon :icon="['far', 'cart-shopping']" />
+            <rn-icon icon="magnifying-glass-outline" />
+            <rn-icon icon="user-outline" />
+            <rn-icon icon="cart-shopping-outline" />
           </template>
           <template #extra>
             <div style="background: #fef3c7; padding: 8px 16px; text-align: center; font-size: 12px;">
@@ -530,6 +531,7 @@ export const カートページ: Story = {
       'rn-image': Image,
       'rn-card': Card,
       'rn-alert': Alert,
+      'rn-callout': Callout,
       'rn-spinner': Spinner,
     },
     setup() {
@@ -638,7 +640,7 @@ export const カートページ: Story = {
                                 @delete="deleteCartListItemHandle(item)"
                               />
                               <rn-button variant="text" @click="deleteCartListItemHandle(item)">
-                                <rn-icon :icon="['far', 'trash']" />
+                                <rn-icon icon="trash-outline" />
                               </rn-button>
                             </rn-stack>
                             <rn-text>¥{{ formatPrice(item.unit_price * item.quantity) }}</rn-text>
@@ -659,7 +661,7 @@ export const カートページ: Story = {
                   >
                     <rn-text size="subtitle" weight="bold">カートに商品はありません。</rn-text>
                     <rn-button variant="text">
-                      <rn-icon :icon="['far', 'arrow-left']" size="sm" />
+                      <rn-icon icon="arrow-left-outline" size="sm" />
                       TOPに戻る
                     </rn-button>
                   </rn-stack>
@@ -697,31 +699,19 @@ export const カートページ: Story = {
                 <rn-stack horizontal-re-size="fill" horizontal-align="center">
                   <rn-button variant="text">
                     <rn-stack direction="horizontal" vertical-align="center" gap="sm">
-                      <rn-icon :icon="['fas', 'chevron-left']" size="sm" color="subtle" />
+                      <rn-icon icon="chevron-left-outline" size="sm" color="subtle" />
                       <rn-text color="subtle">買い物を続ける</rn-text>
                     </rn-stack>
                   </rn-button>
                 </rn-stack>
 
-                <rn-card :elevation="false" color="muted" variant="tonal">
-                  <template #header>
-                    <rn-stack gap="xs" vertical-align="center">
-                      <rn-icon :icon="['far', 'circle-info']" size="sm" />
-                      <rn-text size="subtitle" weight="bold">注意事項</rn-text>
-                    </rn-stack>
-                  </template>
+                <rn-callout title="注意事項" variant="tonal">
                   <rn-stack direction="vertical" gap="xs">
-                    <rn-text size="caption">
-                      ※ご注文確定するまでは、カートに商品が入っていても在庫は確保されません。予めご了承ください。
-                    </rn-text>
-                    <rn-text size="caption">
-                      ※在庫の少ない商品は、ご注文手続き中に在庫切れとなる場合があります。
-                    </rn-text>
-                    <rn-text size="caption">
-                      ※ご注文手続き中に、ご注文商品の販売期間が終了してしまった場合、ご注文はできません
-                    </rn-text>
+                    <rn-text size="caption">※ご注文確定するまでは、カートに商品が入っていても在庫は確保されません。予めご了承ください。</rn-text>
+                    <rn-text size="caption">※在庫の少ない商品は、ご注文手続き中に在庫切れとなる場合があります。</rn-text>
+                    <rn-text size="caption">※ご注文手続き中に、ご注文商品の販売期間が終了してしまった場合、ご注文はできません</rn-text>
                   </rn-stack>
-                </rn-card>
+                </rn-callout>
               </rn-stack>
             </template>
           </rn-page>
@@ -782,7 +772,7 @@ export const カートページ_空の状態: Story = {
               >
                 <rn-text size="subtitle" weight="bold">カートに商品はありません。</rn-text>
                 <rn-button variant="text">
-                  <rn-icon :icon="['far', 'arrow-left']" size="sm" />
+                  <rn-icon icon="arrow-left-outline" size="sm" />
                   TOPに戻る
                 </rn-button>
               </rn-stack>