@vectara/vectara-ui 18.4.0 → 19.1.0

package/src/docs/pages/colorPalette/CategoricalColors.tsx

@@ -0,0 +1,89 @@
+import { BiSolidBookmark } from "react-icons/bi";
+import { VuiCopyButton, VuiFlexContainer, VuiFlexItem, VuiSpacer, VuiText, VuiTextColor } from "../../../lib";
+
+// Categorical colors carry no fixed meaning — the hue just distinguishes one category from another.
+// Each is a pair: a tinted background and a saturated foreground for text and icons.
+const categoricalColors = [
+  // Warm
+  { name: "Red", background: "--vui-color-red-background", text: "--vui-color-red-text" },
+  { name: "Orange", background: "--vui-color-orange-background", text: "--vui-color-orange-text" },
+  { name: "Amber", background: "--vui-color-amber-background", text: "--vui-color-amber-text" },
+  // Greens
+  { name: "Lime", background: "--vui-color-lime-background", text: "--vui-color-lime-text" },
+  { name: "Emerald", background: "--vui-color-emerald-background", text: "--vui-color-emerald-text" },
+  { name: "Teal", background: "--vui-color-teal-background", text: "--vui-color-teal-text" },
+  // Blues
+  { name: "Sky", background: "--vui-color-sky-background", text: "--vui-color-sky-text" },
+  { name: "Indigo", background: "--vui-color-indigo-background", text: "--vui-color-indigo-text" },
+  // Purples and pinks
+  { name: "Purple", background: "--vui-color-purple-background", text: "--vui-color-purple-text" },
+  { name: "Fuchsia", background: "--vui-color-fuchsia-background", text: "--vui-color-fuchsia-text" },
+  { name: "Pink", background: "--vui-color-pink-background", text: "--vui-color-pink-text" },
+  // Neutral
+  { name: "Slate", background: "--vui-color-slate-background", text: "--vui-color-slate-text" }
+];
+
+// A single CSS variable row: the variable name plus a button to copy its var() reference.
+const VariableRow = ({ cssVariable }: { cssVariable: string }) => (
+  <VuiFlexContainer alignItems="center" spacing="xs" justifyContent="spaceBetween">
+    <VuiFlexItem grow={false}>
+      <VuiText size="xs">
+        <p>
+          <code>{cssVariable}</code>
+        </p>
+      </VuiText>
+    </VuiFlexItem>
+
+    <VuiFlexItem grow={false}>
+      <VuiCopyButton size="xs" value={`var(${cssVariable})`} title={`Copy var(${cssVariable})`} />
+    </VuiFlexItem>
+  </VuiFlexContainer>
+);
+
+export const CategoricalColors = () => {
+  return (
+    <>
+      <VuiText>
+        <p>
+          <VuiTextColor color="subdued">
+            Interchangeable hue pairs for color-coding categories. The icon inherits the foreground color via{" "}
+            <code>currentColor</code>, so a patch only needs the background and text variables.
+          </VuiTextColor>
+        </p>
+      </VuiText>
+
+      <VuiSpacer size="l" />
+
+      <VuiFlexContainer spacing="l" wrap>
+        {categoricalColors.map(({ name, background, text }) => (
+          <VuiFlexItem grow={false} key={name}>
+            <div style={{ width: 220 }}>
+              {/* A representative patch built from the pair. */}
+              <div
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 6,
+                  padding: "4px 10px",
+                  borderRadius: 6,
+                  fontSize: 13,
+                  fontWeight: 600,
+                  backgroundColor: `var(${background})`,
+                  color: `var(${text})`
+                }}
+              >
+                <BiSolidBookmark />
+                {name}
+              </div>
+
+              <VuiSpacer size="s" />
+
+              <VariableRow cssVariable={background} />
+              <VariableRow cssVariable={text} />
+            </div>
+          </VuiFlexItem>
+        ))}
+      </VuiFlexContainer>
+    </>
+  );
+};

package/src/docs/pages/colorPalette/ChartColors.tsx

@@ -0,0 +1,68 @@
+import { VuiCopyButton, VuiFlexContainer, VuiFlexItem, VuiSpacer, VuiText, VuiTextColor } from "../../../lib";
+
+// Chart colors are an ordered palette for plotting data series, distinct from the categorical chip hues.
+// Each entry differs from its neighbors in both hue and luminance, so series stay distinguishable under
+// color vision deficiency and in grayscale. The palette is capped at eight — the practical limit for
+// telling categories apart by color alone.
+const chartColors = [
+  { name: "Chart 1", variable: "--vui-chart-1", description: "Blue" },
+  { name: "Chart 2", variable: "--vui-chart-2", description: "Orange" },
+  { name: "Chart 3", variable: "--vui-chart-3", description: "Teal-green" },
+  { name: "Chart 4", variable: "--vui-chart-4", description: "Mauve" },
+  { name: "Chart 5", variable: "--vui-chart-5", description: "Sky" },
+  { name: "Chart 6", variable: "--vui-chart-6", description: "Vermillion" },
+  { name: "Chart 7", variable: "--vui-chart-7", description: "Gold" },
+  { name: "Chart 8", variable: "--vui-chart-8", description: "Slate" }
+];
+
+export const ChartColors = () => {
+  return (
+    <>
+      <VuiText>
+        <p>
+          <VuiTextColor color="subdued">
+            An ordered palette for data visualization, assigned to series in sequence. Each color contrasts
+            with its neighbors in both hue and lightness, keeping series distinct for color-blind readers and
+            in grayscale. Use no more than eight; beyond that, group categories or add a non-color cue such as
+            a pattern or direct label.
+          </VuiTextColor>
+        </p>
+      </VuiText>
+
+      <VuiSpacer size="l" />
+
+      <VuiFlexContainer spacing="l" wrap>
+        {chartColors.map(({ name, variable, description }) => (
+          <VuiFlexItem grow={false} key={name}>
+            <div style={{ width: 160 }}>
+              {/* A solid swatch in the series color. */}
+              <div style={{ height: 64, borderRadius: 6, backgroundColor: `var(${variable})` }} />
+
+              <VuiSpacer size="s" />
+
+              <VuiText size="xs">
+                <p>
+                  <strong>{name}</strong> <VuiTextColor color="subdued">{description}</VuiTextColor>
+                </p>
+              </VuiText>
+
+              <VuiFlexContainer alignItems="center" spacing="xs" justifyContent="spaceBetween">
+                <VuiFlexItem grow={false}>
+                  <VuiText size="xs">
+                    <p>
+                      <code>{variable}</code>
+                    </p>
+                  </VuiText>
+                </VuiFlexItem>
+
+                <VuiFlexItem grow={false}>
+                  <VuiCopyButton size="xs" value={`var(${variable})`} title={`Copy var(${variable})`} />
+                </VuiFlexItem>
+              </VuiFlexContainer>
+            </div>
+          </VuiFlexItem>
+        ))}
+      </VuiFlexContainer>
+    </>
+  );
+};

package/src/docs/pages/colorPalette/NeutralColors.tsx

@@ -0,0 +1,42 @@
+import { VuiFlexContainer } from "../../../lib";
+import { Subsection } from "../../components/Subsection";
+import { Swatch } from "./Swatch";
+
+// Neutral shades run from the empty shade (the app background) to the full shade.
+// In the dark theme these invert, so reach for the semantic name rather than the literal lightness.
+const neutralSwatches = [
+  { name: "Empty shade", cssVariable: "--vui-color-empty-shade", value: "#ffffff" },
+  { name: "Light shade", cssVariable: "--vui-color-light-shade", value: "#f1f4f6" },
+  { name: "Medium shade", cssVariable: "--vui-color-medium-shade", value: "#cbd1de" },
+  { name: "Dark shade", cssVariable: "--vui-color-dark-shade", value: "#3f4551" },
+  { name: "Darker shade", cssVariable: "--vui-color-darker-shade", value: "#1c1d22" },
+  { name: "Full shade", cssVariable: "--vui-color-full-shade", value: "#0b0c0e" }
+];
+
+// Special-purpose accents that sit outside the semantic families.
+const specialSwatches = [
+  { name: "Primary highlight", cssVariable: "--vui-color-primary-highlight-shade", value: "#d9e2ff" },
+  { name: "Subdued", cssVariable: "--vui-color-subdued-shade", value: "#6d7686" }
+];
+
+export const NeutralColors = () => {
+  return (
+    <>
+      <Subsection title="Neutrals">
+        <VuiFlexContainer spacing="l" wrap>
+          {neutralSwatches.map((swatch) => (
+            <Swatch key={swatch.cssVariable} {...swatch} />
+          ))}
+        </VuiFlexContainer>
+      </Subsection>
+
+      <Subsection title="Special">
+        <VuiFlexContainer spacing="l" wrap>
+          {specialSwatches.map((swatch) => (
+            <Swatch key={swatch.cssVariable} {...swatch} />
+          ))}
+        </VuiFlexContainer>
+      </Subsection>
+    </>
+  );
+};

package/src/docs/pages/colorPalette/SemanticColors.tsx

@@ -0,0 +1,64 @@
+import { VuiFlexContainer } from "../../../lib";
+import { Subsection } from "../../components/Subsection";
+import { Swatch } from "./Swatch";
+
+// Each semantic family has three shades: a base "shade", a 50%-opacity "light shade",
+// and a tinted "lighter shade" suitable for backgrounds.
+const families = [
+  {
+    name: "Accent",
+    swatches: [
+      { name: "Shade", cssVariable: "--vui-color-accent-shade", value: "#5f30c3" },
+      { name: "Light shade", cssVariable: "--vui-color-accent-light-shade", value: "50% opacity" },
+      { name: "Lighter shade", cssVariable: "--vui-color-accent-lighter-shade", value: "#eee7ff" }
+    ]
+  },
+  {
+    name: "Primary",
+    swatches: [
+      { name: "Shade", cssVariable: "--vui-color-primary-shade", value: "#045dda" },
+      { name: "Light shade", cssVariable: "--vui-color-primary-light-shade", value: "50% opacity" },
+      { name: "Lighter shade", cssVariable: "--vui-color-primary-lighter-shade", value: "#f1f7ff" }
+    ]
+  },
+  {
+    name: "Success",
+    swatches: [
+      { name: "Shade", cssVariable: "--vui-color-success-shade", value: "#249719" },
+      { name: "Light shade", cssVariable: "--vui-color-success-light-shade", value: "50% opacity" },
+      { name: "Lighter shade", cssVariable: "--vui-color-success-lighter-shade", value: "#e2f2e0" }
+    ]
+  },
+  {
+    name: "Warning",
+    swatches: [
+      { name: "Shade", cssVariable: "--vui-color-warning-shade", value: "#a86f1b" },
+      { name: "Light shade", cssVariable: "--vui-color-warning-light-shade", value: "50% opacity" },
+      { name: "Lighter shade", cssVariable: "--vui-color-warning-lighter-shade", value: "#ffeed4" }
+    ]
+  },
+  {
+    name: "Danger",
+    swatches: [
+      { name: "Shade", cssVariable: "--vui-color-danger-shade", value: "#d22d2d" },
+      { name: "Light shade", cssVariable: "--vui-color-danger-light-shade", value: "50% opacity" },
+      { name: "Lighter shade", cssVariable: "--vui-color-danger-lighter-shade", value: "#fff1f1" }
+    ]
+  }
+];
+
+export const SemanticColors = () => {
+  return (
+    <>
+      {families.map((family) => (
+        <Subsection key={family.name} title={family.name}>
+          <VuiFlexContainer spacing="l" wrap>
+            {family.swatches.map((swatch) => (
+              <Swatch key={swatch.cssVariable} {...swatch} />
+            ))}
+          </VuiFlexContainer>
+        </Subsection>
+      ))}
+    </>
+  );
+};

package/src/docs/pages/colorPalette/Swatch.tsx

@@ -0,0 +1,59 @@
+import { VuiCopyButton, VuiFlexContainer, VuiFlexItem, VuiSpacer, VuiText, VuiTextColor } from "../../../lib";
+
+type Props = {
+  // Friendly name for the color.
+  name: string;
+  // The CSS custom property exposed by the theme, e.g. "--vui-color-primary-shade".
+  cssVariable: string;
+  // The value resolved in the light theme, shown for reference.
+  value?: string;
+};
+
+// Renders a single theme color as a live swatch alongside its CSS variable and value.
+// The swatch fills itself with var(cssVariable), so it always reflects the active theme.
+export const Swatch = ({ name, cssVariable, value }: Props) => {
+  return (
+    <VuiFlexItem grow={false}>
+      <div style={{ width: 200 }}>
+        <div
+          style={{
+            height: 64,
+            borderRadius: 6,
+            backgroundColor: `var(${cssVariable})`,
+            border: "1px solid var(--vui-color-border-medium)"
+          }}
+        />
+
+        <VuiSpacer size="xs" />
+
+        <VuiText size="xs">
+          <p>
+            <strong>{name}</strong>
+          </p>
+        </VuiText>
+
+        <VuiFlexContainer alignItems="center" spacing="xs" justifyContent="spaceBetween">
+          <VuiFlexItem grow={false}>
+            <VuiText size="xs">
+              <p>
+                <code>{cssVariable}</code>
+              </p>
+            </VuiText>
+          </VuiFlexItem>
+
+          <VuiFlexItem grow={false}>
+            <VuiCopyButton size="xs" value={`var(${cssVariable})`} title={`Copy var(${cssVariable})`} />
+          </VuiFlexItem>
+        </VuiFlexContainer>
+
+        {value && (
+          <VuiText size="xs">
+            <p>
+              <VuiTextColor color="subdued">{value}</VuiTextColor>
+            </p>
+          </VuiText>
+        )}
+      </div>
+    </VuiFlexItem>
+  );
+};

package/src/docs/pages/colorPalette/TextAndBorderColors.tsx

@@ -0,0 +1,37 @@
+import { VuiFlexContainer } from "../../../lib";
+import { Subsection } from "../../components/Subsection";
+import { Swatch } from "./Swatch";
+
+// Foreground colors for body copy and form labels.
+const textSwatches = [
+  { name: "Text", cssVariable: "--vui-color-text", value: "#1c1d22" },
+  { name: "Label", cssVariable: "--vui-color-label", value: "#1c1d22" }
+];
+
+// Border colors for dividers, inputs, and surfaces.
+const borderSwatches = [
+  { name: "Border medium", cssVariable: "--vui-color-border-medium", value: "#cbd1de" },
+  { name: "Border light", cssVariable: "--vui-color-border-light", value: "#e3e4f3" }
+];
+
+export const TextAndBorderColors = () => {
+  return (
+    <>
+      <Subsection title="Text">
+        <VuiFlexContainer spacing="l" wrap>
+          {textSwatches.map((swatch) => (
+            <Swatch key={swatch.cssVariable} {...swatch} />
+          ))}
+        </VuiFlexContainer>
+      </Subsection>
+
+      <Subsection title="Border">
+        <VuiFlexContainer spacing="l" wrap>
+          {borderSwatches.map((swatch) => (
+            <Swatch key={swatch.cssVariable} {...swatch} />
+          ))}
+        </VuiFlexContainer>
+      </Subsection>
+    </>
+  );
+};

package/src/docs/pages/colorPalette/Usage.tsx

@@ -0,0 +1,72 @@
+import { VuiSpacer, VuiText, VuiTitle } from "../../../lib";
+
+// Demonstrates referencing theme colors from CSS, including the -rgb companion variables
+// that let you compose translucent colors at any opacity.
+export const Usage = () => {
+  return (
+    <>
+      <VuiText>
+        <p>
+          Every theme color is published as a CSS custom property prefixed with <code>--vui-color-</code>. Reference one
+          anywhere you write CSS with <code>var(...)</code>:
+        </p>
+      </VuiText>
+
+      <VuiSpacer size="s" />
+
+      <VuiText>
+        <pre>
+          <code>{`.myElement {\n  color: var(--vui-color-primary-shade);\n  border: 1px solid var(--vui-color-border-medium);\n}`}</code>
+        </pre>
+      </VuiText>
+
+      <VuiSpacer size="m" />
+
+      <VuiText>
+        <p>
+          Each color also has an <code>-rgb</code> companion that holds just the{" "}
+          <code>r, g, b</code> channels. Pair it with <code>rgba()</code> to build a translucent color at any opacity:
+        </p>
+      </VuiText>
+
+      <VuiSpacer size="s" />
+
+      <VuiText>
+        <pre>
+          <code>{`.myElement {\n  background-color: rgba(var(--vui-color-primary-shade-rgb), 0.08);\n}`}</code>
+        </pre>
+      </VuiText>
+
+      <VuiSpacer size="m" />
+
+      <VuiTitle size="xs">
+        <h4>Live example</h4>
+      </VuiTitle>
+
+      <VuiSpacer size="s" />
+
+      <div
+        style={{
+          padding: 16,
+          borderRadius: 8,
+          color: "var(--vui-color-primary-shade)",
+          backgroundColor: "rgba(var(--vui-color-primary-shade-rgb), 0.08)",
+          border: "1px solid var(--vui-color-border-medium)"
+        }}
+      >
+        This panel's text, background, and border are all driven by theme color variables, so it adapts automatically
+        when the theme changes.
+      </div>
+
+      <VuiSpacer size="m" />
+
+      <VuiText>
+        <p>
+          To change these values, pass a <code>theme</code> to <code>VuiContextProvider</code> — see the Theme page. The
+          neutral, text, and border colors invert between the light and dark themes, so prefer the semantic name (for
+          example <code>--vui-color-empty-shade</code>) over a literal lightness.
+        </p>
+      </VuiText>
+    </>
+  );
+};

package/src/docs/pages/colorPalette/index.tsx

@@ -0,0 +1,50 @@
+import { Usage } from "./Usage";
+import { SemanticColors } from "./SemanticColors";
+import { CategoricalColors } from "./CategoricalColors";
+import { ChartColors } from "./ChartColors";
+import { NeutralColors } from "./NeutralColors";
+import { TextAndBorderColors } from "./TextAndBorderColors";
+
+const UsageSource = require("!!raw-loader!./Usage");
+const SemanticColorsSource = require("!!raw-loader!./SemanticColors");
+const CategoricalColorsSource = require("!!raw-loader!./CategoricalColors");
+const ChartColorsSource = require("!!raw-loader!./ChartColors");
+const NeutralColorsSource = require("!!raw-loader!./NeutralColors");
+const TextAndBorderColorsSource = require("!!raw-loader!./TextAndBorderColors");
+
+export const colorPalette = {
+  name: "Color palette",
+  path: "/colorPalette",
+  examples: [
+    {
+      name: "Using color variables",
+      component: <Usage />,
+      source: UsageSource.default.toString()
+    },
+    {
+      name: "Semantic colors",
+      component: <SemanticColors />,
+      source: SemanticColorsSource.default.toString()
+    },
+    {
+      name: "Categorical colors",
+      component: <CategoricalColors />,
+      source: CategoricalColorsSource.default.toString()
+    },
+    {
+      name: "Chart colors",
+      component: <ChartColors />,
+      source: ChartColorsSource.default.toString()
+    },
+    {
+      name: "Neutral and special colors",
+      component: <NeutralColors />,
+      source: NeutralColorsSource.default.toString()
+    },
+    {
+      name: "Text and border colors",
+      component: <TextAndBorderColors />,
+      source: TextAndBorderColorsSource.default.toString()
+    }
+  ]
+};

package/src/docs/pages/composedChart/Basic.tsx

@@ -0,0 +1,25 @@
+import { VuiComposedChart } from "../../../lib";
+
+// Query volume (bars, left axis) overlaid with p95 latency (line, right axis) — two metrics on
+// different scales sharing one chart.
+const data = [
+  { month: "Jan", queries: 4200, latency: 180 },
+  { month: "Feb", queries: 5100, latency: 172 },
+  { month: "Mar", queries: 6800, latency: 165 },
+  { month: "Apr", queries: 7400, latency: 158 },
+  { month: "May", queries: 8200, latency: 150 },
+  { month: "Jun", queries: 9100, latency: 142 }
+];
+
+export const Basic = () => {
+  return (
+    <VuiComposedChart
+      data={data}
+      categoryKey="month"
+      series={[
+        { dataKey: "queries", name: "Queries", type: "bar", axis: "left" },
+        { dataKey: "latency", name: "p95 latency (ms)", type: "line", axis: "right", curved: true }
+      ]}
+    />
+  );
+};

package/src/docs/pages/composedChart/index.tsx

@@ -0,0 +1,15 @@
+import { Basic } from "./Basic";
+
+const BasicSource = require("!!raw-loader!./Basic");
+
+export const composedChart = {
+  name: "Composed chart",
+  path: "/composed-chart",
+  examples: [
+    {
+      name: "Basic",
+      component: <Basic />,
+      source: BasicSource.default.toString()
+    }
+  ]
+};

package/src/docs/pages/composer/Composer.tsx

@@ -0,0 +1,130 @@
+import { useState } from "react";
+import {
+  VuiButtonTertiary,
+  VuiComposer,
+  ComposerSubmission,
+  VuiFlexContainer,
+  VuiFlexItem,
+  VuiIcon,
+  VuiIconButton,
+  VuiSpacer,
+  VuiText,
+  VuiTextColor
+} from "../../../lib";
+import { BiBulb, BiError } from "react-icons/bi";
+
+const MAX_FILE_SIZE_BYTES = 5 * 1024 * 1024;
+
+type SentMessage = {
+  text: string;
+  fileNames: string[];
+};
+
+export const Composer = () => {
+  const [messages, setMessages] = useState<SentMessage[]>([]);
+  const [isRunning, setIsRunning] = useState(false);
+  const [rejectedFiles, setRejectedFiles] = useState<string[]>([]);
+  const [skillCount, setSkillCount] = useState(0);
+
+  const handleSubmit = ({ text, files }: ComposerSubmission) => {
+    setMessages((prev) => [...prev, { text, fileNames: files.map((file) => file.name) }]);
+    setRejectedFiles([]);
+
+    // Simulate a streaming response so the Send button toggles to Cancel.
+    setIsRunning(true);
+    window.setTimeout(() => setIsRunning(false), 2000);
+  };
+
+  return (
+    <>
+      {messages.length > 0 && (
+        <>
+          {messages.map((message, index) => (
+            <div key={index}>
+              <VuiText>
+                <p>{message.text || <VuiTextColor color="subdued">(no text)</VuiTextColor>}</p>
+              </VuiText>
+              {message.fileNames.length > 0 && (
+                <VuiText size="s">
+                  <p>
+                    <VuiTextColor color="subdued">Attached: {message.fileNames.join(", ")}</VuiTextColor>
+                  </p>
+                </VuiText>
+              )}
+              <VuiSpacer size="xs" />
+            </div>
+          ))}
+          <VuiSpacer size="m" />
+        </>
+      )}
+
+      <VuiComposer
+        placeholder="Ask a question, attach files, or press / for skills"
+        isRunning={isRunning}
+        onCancel={() => setIsRunning(false)}
+        onSubmit={handleSubmit}
+        enableHistory
+        historyKey="vuiComposerDocs:history"
+        canUploadFiles
+        validateFile={(file) => (file.size > MAX_FILE_SIZE_BYTES ? "File exceeds 5 MB" : null)}
+        onFilesRejected={(errors) => setRejectedFiles(errors.map((error) => error.file.name))}
+        onShortcutKeys={{
+          "/": (event, { value }) => {
+            // Open the skill picker only when the composer is empty.
+            if (value === "") {
+              event.preventDefault();
+              setSkillCount((count) => count + 1);
+            }
+          }
+        }}
+        leadingActions={
+          <VuiFlexItem>
+            <VuiFlexContainer alignItems="center" spacing="xxs">
+              <VuiIconButton
+                color="neutral"
+                aria-label="Select skill"
+                onClick={() => setSkillCount((count) => count + 1)}
+                icon={
+                  <VuiIcon>
+                    <BiBulb />
+                  </VuiIcon>
+                }
+              />
+              {skillCount > 0 && (
+                <VuiText size="s">
+                  <VuiTextColor color="subdued">({skillCount})</VuiTextColor>
+                </VuiText>
+              )}
+            </VuiFlexContainer>
+          </VuiFlexItem>
+        }
+        footer={
+          rejectedFiles.length > 0 ? (
+            <>
+              <VuiSpacer size="s" />
+              <VuiFlexContainer alignItems="center" spacing="xs">
+                <VuiFlexItem>
+                  <VuiIcon size="s" color="danger">
+                    <BiError />
+                  </VuiIcon>
+                </VuiFlexItem>
+                <VuiFlexItem>
+                  <VuiText size="s">
+                    <p>
+                      <VuiTextColor color="subdued">Could not attach: {rejectedFiles.join(", ")}</VuiTextColor>
+                    </p>
+                  </VuiText>
+                </VuiFlexItem>
+                <VuiFlexItem>
+                  <VuiButtonTertiary noPadding color="primary" size="s" onClick={() => setRejectedFiles([])}>
+                    Dismiss
+                  </VuiButtonTertiary>
+                </VuiFlexItem>
+              </VuiFlexContainer>
+            </>
+          ) : undefined
+        }
+      />
+    </>
+  );
+};

package/src/docs/pages/composer/index.tsx

@@ -0,0 +1,11 @@
+import { Composer } from "./Composer";
+const ComposerSource = require("!!raw-loader!./Composer");
+
+export const composer = {
+  name: "Composer",
+  path: "/composer",
+  example: {
+    component: <Composer />,
+    source: ComposerSource.default.toString()
+  }
+};