@ubie/vitals-ui-business 0.1.0 → 0.2.0

package/.storybook/main.ts

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-vitest",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding",
+  ],
+  framework: "@storybook/react-vite",
+  managerHead: (head) => `${head}
+    <script>
+      if (!window.location.search) {
+        window.location.replace(
+          window.location.pathname + "?path=/story/components-button--primary",
+        );
+      }
+    </script>
+  `,
+};
+
+export default config;

package/.storybook/preview.tsx

@@ -0,0 +1,37 @@
+import React, { useRef } from "react";
+import type { Preview } from "@storybook/react-vite";
+
+import { UbieConfigProvider } from "../src";
+
+function StoryDecorator({ Story }: { Story: React.ComponentType }) {
+  const popupContainerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div ref={popupContainerRef} style={{ isolation: "isolate", minHeight: "100%" }}>
+      <UbieConfigProvider
+        getPopupContainer={(triggerNode) =>
+          triggerNode?.parentElement ?? popupContainerRef.current ?? document.body
+        }
+      >
+        <Story />
+      </UbieConfigProvider>
+    </div>
+  );
+}
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    a11y: {
+      test: "todo",
+    },
+  },
+  decorators: [(Story) => <StoryDecorator Story={Story} />],
+};
+
+export default preview;

package/.storybook/vitest.setup.ts

@@ -0,0 +1,6 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from "@storybook/react-vite";
+
+import * as projectAnnotations from "./preview";
+
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

package/CHANGELOG.md

@@ -1,11 +1,22 @@
 # @ubie/vitals-ui-business
 
+## 0.2.0
+
+### Minor Changes
+
+- 4b911f2: Re-export the Ant Design X public API, with its conflicting `notification` and `version` exports available as `xNotification` and `xVersion`.
+
+  Update Ant Design to 6.5.1, add Ant Design X 2.8.0, and document the new Ant Design `BorderBeam` component and every visual Ant Design X root export in Storybook.
+
+### Patch Changes
+
+- @ubie/vitals-antd-theme@0.0.8
+
 ## 0.1.0
 
 ### Minor Changes
 
 - c28598e: `@ubie/vitals-ui-business` を初回公開します。
-
   - Ant Design の root public exports を透過的に再公開
   - Vitals theme を基底に利用側設定を拡張できる `UbieConfigProvider` と `UbieConfigProviderProps` を追加
   - facade package を side-effect-free として宣言し、未使用 Provider/theme branch の tree-shaking を可能にする

package/dist/index.cjs

@@ -1,4 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let _ant_design_x = require("@ant-design/x");
 let antd = require("antd");
 let _ubie_vitals_antd_theme = require("@ubie/vitals-antd-theme");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -14,6 +15,38 @@ function UbieConfigProvider({ children, ...configProviderProps }) {
 }
 //#endregion
 exports.UbieConfigProvider = UbieConfigProvider;
+Object.defineProperty(exports, "notification", {
+	enumerable: true,
+	get: function() {
+		return antd.notification;
+	}
+});
+Object.defineProperty(exports, "version", {
+	enumerable: true,
+	get: function() {
+		return antd.version;
+	}
+});
+Object.defineProperty(exports, "xNotification", {
+	enumerable: true,
+	get: function() {
+		return _ant_design_x.notification;
+	}
+});
+Object.defineProperty(exports, "xVersion", {
+	enumerable: true,
+	get: function() {
+		return _ant_design_x.version;
+	}
+});
+Object.keys(_ant_design_x).forEach(function(k) {
+	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function() {
+			return _ant_design_x[k];
+		}
+	});
+});
 Object.keys(antd).forEach(function(k) {
 	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/index.d.cts

@@ -1,5 +1,7 @@
-import { ConfigProviderProps } from "antd";
+import { notification as xNotification, version as xVersion } from "@ant-design/x";
+import { ConfigProviderProps, notification, version } from "antd";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+export * from "@ant-design/x";
 export * from "antd";
 
 //#region src/UbieConfigProvider.d.ts
@@ -9,5 +11,5 @@ declare function UbieConfigProvider({
   ...configProviderProps
 }: UbieConfigProviderProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { UbieConfigProvider, type UbieConfigProviderProps };
+export { UbieConfigProvider, type UbieConfigProviderProps, notification, version, xNotification, xVersion };
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../src/UbieConfigProvider.tsx"],"mappings":";;;;;KAGY,uBAAA,GAA0B,mBAAA;AAAA,iBAEtB,kBAAA,CAAA;EAAqB,QAAA;EAAA,GAAa;AAAA,GAAuB,uBAAA,GAAuB,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/UbieConfigProvider.tsx"],"mappings":";;;;;;;KAGY,uBAAA,GAA0B,mBAAA;AAAA,iBAEtB,kBAAA,CAAA;EAAqB,QAAA;EAAA,GAAa;AAAA,GAAuB,uBAAA,GAAuB,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/index.d.mts

@@ -1,5 +1,7 @@
-import { ConfigProviderProps } from "antd";
+import { notification as xNotification, version as xVersion } from "@ant-design/x";
+import { ConfigProviderProps, notification, version } from "antd";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+export * from "@ant-design/x";
 export * from "antd";
 
 //#region src/UbieConfigProvider.d.ts
@@ -9,5 +11,5 @@ declare function UbieConfigProvider({
   ...configProviderProps
 }: UbieConfigProviderProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { UbieConfigProvider, type UbieConfigProviderProps };
+export { UbieConfigProvider, type UbieConfigProviderProps, notification, version, xNotification, xVersion };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../src/UbieConfigProvider.tsx"],"mappings":";;;;;KAGY,uBAAA,GAA0B,mBAAA;AAAA,iBAEtB,kBAAA,CAAA;EAAqB,QAAA;EAAA,GAAa;AAAA,GAAuB,uBAAA,GAAuB,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/UbieConfigProvider.tsx"],"mappings":";;;;;;;KAGY,uBAAA,GAA0B,mBAAA;AAAA,iBAEtB,kBAAA,CAAA;EAAqB,QAAA;EAAA,GAAa;AAAA,GAAuB,uBAAA,GAAuB,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/index.mjs

@@ -1,6 +1,8 @@
-import { ConfigProvider } from "antd";
+import { notification as xNotification, version as xVersion } from "@ant-design/x";
+import { ConfigProvider, notification, version } from "antd";
 import { antdTheme } from "@ubie/vitals-antd-theme";
 import { jsx } from "react/jsx-runtime";
+export * from "@ant-design/x";
 export * from "antd";
 //#region src/UbieConfigProvider.tsx
 function UbieConfigProvider({ children, ...configProviderProps }) {
@@ -13,6 +15,6 @@ function UbieConfigProvider({ children, ...configProviderProps }) {
 	});
 }
 //#endregion
-export { UbieConfigProvider };
+export { UbieConfigProvider, notification, version, xNotification, xVersion };
 
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/UbieConfigProvider.tsx"],"sourcesContent":["import { antdTheme } from \"@ubie/vitals-antd-theme\";\nimport { ConfigProvider, type ConfigProviderProps } from \"antd\";\n\nexport type UbieConfigProviderProps = ConfigProviderProps;\n\nexport function UbieConfigProvider({ children, ...configProviderProps }: UbieConfigProviderProps) {\n  return (\n    <ConfigProvider theme={antdTheme}>\n      <ConfigProvider {...configProviderProps}>{children}</ConfigProvider>\n    </ConfigProvider>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,mBAAmB,EAAE,UAAU,GAAG,uBAAgD;AAChG,QACE,oBAAC,gBAAD;EAAgB,OAAO;YACrB,oBAAC,gBAAD;GAAgB,GAAI;GAAsB;GAA0B,CAAA;EACrD,CAAA"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/UbieConfigProvider.tsx"],"sourcesContent":["import { antdTheme } from \"@ubie/vitals-antd-theme\";\nimport { ConfigProvider, type ConfigProviderProps } from \"antd\";\n\nexport type UbieConfigProviderProps = ConfigProviderProps;\n\nexport function UbieConfigProvider({ children, ...configProviderProps }: UbieConfigProviderProps) {\n  return (\n    <ConfigProvider theme={antdTheme}>\n      <ConfigProvider {...configProviderProps}>{children}</ConfigProvider>\n    </ConfigProvider>\n  );\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,mBAAmB,EAAE,UAAU,GAAG,uBAAgD;AAChG,QACE,oBAAC,gBAAD;EAAgB,OAAO;YACrB,oBAAC,gBAAD;GAAgB,GAAI;GAAsB;GAA0B,CAAA;EACrD,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ubie/vitals-ui-business",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Ant Design components with the Ubie Vitals theme for business products",
   "author": "Ubie Inc.",
   "sideEffects": false,
@@ -15,21 +15,34 @@
     }
   },
   "dependencies": {
-    "antd": "^6.1.0",
-    "@ubie/vitals-antd-theme": "0.0.7"
+    "@ant-design/x": "^2.8.0",
+    "antd": "^6.5.1",
+    "@ubie/vitals-antd-theme": "0.0.8"
   },
   "devDependencies": {
+    "@storybook/addon-a11y": "10.4.6",
+    "@storybook/addon-docs": "10.4.6",
+    "@storybook/addon-onboarding": "10.4.6",
+    "@storybook/addon-vitest": "10.4.6",
+    "@storybook/react-vite": "10.4.6",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
+    "@vitest/coverage-v8": "^4.1.2",
+    "dayjs": "^1.11.19",
+    "playwright": "^1.57.0",
     "react": "19.2.5",
     "react-dom": "19.2.5",
-    "vite-plus": "0.1.20"
+    "storybook": "10.4.6",
+    "vite-plus": "0.1.20",
+    "vitest": "npm:@voidzero-dev/vite-plus-test@latest"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "scripts": {
-    "build": "vp pack"
+    "build": "vp pack",
+    "dev": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
 }

package/src/index.ts

@@ -1,3 +1,6 @@
+export * from "@ant-design/x";
 export * from "antd";
+export { notification as xNotification, version as xVersion } from "@ant-design/x";
+export { notification, version } from "antd";
 export { UbieConfigProvider } from "./UbieConfigProvider";
 export type { UbieConfigProviderProps } from "./UbieConfigProvider";

package/src/stories/Button.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Button, Space } from "../index";
+import { antDesignStoryParameters, StoryFrame } from "./storyHelpers";
+
+const meta = {
+  title: "Components/Button",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: {
+    ...antDesignStoryParameters("button"),
+    controls: { disable: false },
+  },
+  args: {
+    children: "Button",
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    type: "primary",
+  },
+};
+
+export const Default: Story = {};
+
+export const Types: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <StoryFrame>
+      <Space wrap>
+        <Button type="primary">Primary</Button>
+        <Button>Default</Button>
+        <Button type="dashed">Dashed</Button>
+        <Button type="text">Text</Button>
+        <Button type="link">Link</Button>
+      </Space>
+    </StoryFrame>
+  ),
+};
+
+export const Sizes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <StoryFrame>
+      <Space align="center">
+        <Button size="large">Large</Button>
+        <Button>Middle</Button>
+        <Button size="small">Small</Button>
+      </Space>
+    </StoryFrame>
+  ),
+};
+
+export const IconPlacement: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <StoryFrame>
+      <Space>
+        <Button icon={<span aria-hidden>+</span>} iconPlacement="start">
+          Create
+        </Button>
+        <Button icon={<span aria-hidden>→</span>} iconPlacement="end" type="primary">
+          Continue
+        </Button>
+      </Space>
+    </StoryFrame>
+  ),
+};

package/src/stories/ant-design-x/Actions.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+
+import { Actions, type ActionsProps, Flex } from "../../index";
+import { antDesignXStoryParameters, StoryFrame } from "../storyHelpers";
+
+const basicItems: ActionsProps["items"] = [
+  { key: "retry", icon: <span aria-hidden>↻</span>, label: "Retry" },
+  { key: "edit", icon: <span aria-hidden>✎</span>, label: "Edit" },
+];
+
+const nestedItems: ActionsProps["items"] = [
+  {
+    key: "share",
+    icon: <span aria-hidden>↗</span>,
+    label: "Share",
+    subItems: [
+      { key: "workspace", label: "Share to workspace" },
+      { key: "email", label: "Send by email" },
+    ],
+  },
+  { key: "archive", icon: <span aria-hidden>□</span>, label: "Archive" },
+];
+
+function InteractiveActions({ items }: { items: ActionsProps["items"] }) {
+  const [lastAction, setLastAction] = useState("No action selected");
+
+  return (
+    <Flex vertical gap={16}>
+      <Actions items={items} onClick={({ item, key }) => setLastAction(item.label ?? key)} />
+      <span aria-live="polite">Last action: {lastAction}</span>
+    </Flex>
+  );
+}
+
+const meta = {
+  title: "Ant Design X/Actions",
+  component: Actions,
+  args: { items: basicItems },
+  tags: ["autodocs"],
+  parameters: antDesignXStoryParameters("actions"),
+} satisfies Meta<typeof Actions>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: () => (
+    <StoryFrame>
+      <InteractiveActions items={basicItems} />
+    </StoryFrame>
+  ),
+};
+
+export const NestedMenu: Story = {
+  render: () => (
+    <StoryFrame>
+      <InteractiveActions items={nestedItems} />
+    </StoryFrame>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <StoryFrame>
+      <Flex vertical gap={16}>
+        <Actions items={basicItems} variant="borderless" />
+        <Actions items={basicItems} variant="filled" />
+        <Actions items={basicItems} variant="outlined" />
+      </Flex>
+    </StoryFrame>
+  ),
+};

package/src/stories/ant-design-x/Attachments.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+
+import { Attachments, type AttachmentsProps } from "../../index";
+import { antDesignXStoryParameters, placeholderImage, StoryFrame } from "../storyHelpers";
+
+const preventUpload = () => false as const;
+
+const fileStates = [
+  {
+    uid: "brief",
+    name: "project-brief.pdf",
+    status: "done",
+    size: 248_000,
+    description: "Approved project brief",
+  },
+  {
+    uid: "research",
+    name: "research-notes.docx",
+    status: "uploading",
+    percent: 64,
+  },
+  {
+    uid: "archive",
+    name: "legacy-assets.zip",
+    status: "error",
+    response: "The archive could not be processed.",
+  },
+  {
+    uid: "cover",
+    name: "report-cover.svg",
+    status: "done",
+    thumbUrl: placeholderImage("Report"),
+  },
+] satisfies NonNullable<AttachmentsProps["items"]>;
+
+function RemovableAttachments() {
+  const [items, setItems] = useState(fileStates.filter((item) => item.status === "done"));
+
+  return (
+    <Attachments
+      beforeUpload={preventUpload}
+      items={items}
+      onRemove={(file) => {
+        setItems((current) => current.filter((item) => item.uid !== file.uid));
+        return true;
+      }}
+      overflow="wrap"
+    />
+  );
+}
+
+const meta = {
+  title: "Ant Design X/Attachments",
+  component: Attachments,
+  tags: ["autodocs"],
+  parameters: antDesignXStoryParameters(
+    "attachments",
+    "All examples use local fixture data and prevent uploads.",
+  ),
+} satisfies Meta<typeof Attachments>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const FileStates: Story = {
+  render: () => (
+    <StoryFrame style={{ width: 720 }}>
+      <Attachments beforeUpload={preventUpload} items={fileStates} overflow="wrap" />
+    </StoryFrame>
+  ),
+};
+
+export const RemovableList: Story = {
+  render: () => (
+    <StoryFrame style={{ width: 720 }}>
+      <RemovableAttachments />
+    </StoryFrame>
+  ),
+};
+
+export const DisabledDropArea: Story = {
+  render: () => (
+    <StoryFrame>
+      <Attachments
+        beforeUpload={preventUpload}
+        disabled
+        items={[]}
+        placeholder={{
+          icon: (
+            <span style={{ fontSize: 28 }} aria-hidden>
+              ↑
+            </span>
+          ),
+          title: "Drop reference files here",
+          description: "File selection is disabled in this Storybook example.",
+        }}
+      />
+    </StoryFrame>
+  ),
+};

package/src/stories/ant-design-x/Bubble.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Avatar, Bubble, type BubbleListProps, Flex } from "../../index";
+import { antDesignXStoryParameters, StoryFrame } from "../storyHelpers";
+
+const conversationItems: BubbleListProps["items"] = [
+  {
+    key: "welcome",
+    role: "system",
+    content: "New conversation started",
+  },
+  {
+    key: "question",
+    role: "user",
+    content: "Summarize the latest project update.",
+  },
+  {
+    key: "answer",
+    role: "ai",
+    content: "The project is on schedule, with research complete and implementation underway.",
+  },
+  {
+    key: "milestone",
+    role: "divider",
+    content: "Today",
+  },
+];
+
+const meta = {
+  title: "Ant Design X/Bubble",
+  component: Bubble,
+  args: { content: "" },
+  tags: ["autodocs"],
+  parameters: antDesignXStoryParameters("bubble"),
+} satisfies Meta<typeof Bubble>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: () => (
+    <StoryFrame>
+      <Bubble
+        avatar={<Avatar>AI</Avatar>}
+        content="Hello! How can I help with your project today?"
+        footer="Generated locally for this preview"
+        header="Project assistant"
+      />
+    </StoryFrame>
+  ),
+};
+
+export const ConversationList: Story = {
+  render: () => (
+    <StoryFrame style={{ height: 420, width: 720 }}>
+      <Bubble.List
+        items={conversationItems}
+        role={{
+          ai: { avatar: <Avatar>AI</Avatar>, placement: "start" },
+          user: { avatar: <Avatar>YO</Avatar>, placement: "end" },
+        }}
+      />
+    </StoryFrame>
+  ),
+};
+
+export const VariantsAndShapes: Story = {
+  render: () => (
+    <StoryFrame>
+      <Flex vertical gap={16}>
+        <Bubble content="Filled default bubble" variant="filled" />
+        <Bubble content="Outlined round bubble" shape="round" variant="outlined" />
+        <Bubble content="Shadow corner bubble" placement="end" shape="corner" variant="shadow" />
+        <Bubble content="Borderless bubble" variant="borderless" />
+      </Flex>
+    </StoryFrame>
+  ),
+};

package/src/stories/ant-design-x/CodeHighlighter.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { CodeHighlighter, Flex, Tag } from "../../index";
+import { antDesignXStoryParameters, StoryFrame } from "../storyHelpers";
+
+const typescriptExample = `type Project = {
+  name: string;
+  status: "planned" | "active" | "complete";
+};
+
+const project: Project = {
+  name: "Design system rollout",
+  status: "active",
+};`;
+
+const jsonExample = JSON.stringify(
+  {
+    project: "Vitals",
+    milestones: ["research", "implementation", "launch"],
+    onTrack: true,
+  },
+  null,
+  2,
+);
+
+const cssExample = `.project-card {
+  display: grid;
+  gap: 1rem;
+  padding: 1.5rem;
+  border: 1px solid currentColor;
+}`;
+
+const meta = {
+  title: "Ant Design X/CodeHighlighter",
+  component: CodeHighlighter,
+  args: { children: "" },
+  tags: ["autodocs"],
+  parameters: antDesignXStoryParameters("code-highlighter"),
+} satisfies Meta<typeof CodeHighlighter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: () => (
+    <StoryFrame style={{ width: 720 }}>
+      <CodeHighlighter lang="typescript" prismLightMode={false}>
+        {typescriptExample}
+      </CodeHighlighter>
+    </StoryFrame>
+  ),
+};
+
+export const CustomHeader: Story = {
+  render: () => (
+    <StoryFrame style={{ width: 720 }}>
+      <CodeHighlighter
+        header={() => (
+          <Flex align="center" justify="space-between">
+            <strong>project.json</strong>
+            <Tag color="blue">JSON</Tag>
+          </Flex>
+        )}
+        lang="json"
+        prismLightMode={false}
+      >
+        {jsonExample}
+      </CodeHighlighter>
+    </StoryFrame>
+  ),
+};
+
+export const Headerless: Story = {
+  render: () => (
+    <StoryFrame style={{ width: 720 }}>
+      <CodeHighlighter
+        header={false}
+        highlightProps={{ wrapLongLines: true }}
+        lang="css"
+        prismLightMode={false}
+      >
+        {cssExample}
+      </CodeHighlighter>
+    </StoryFrame>
+  ),
+};