@stratakit/structures 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1 +1,19 @@
 # Changelog
+
+## 0.1.1
+
+- [#704](https://github.com/iTwin/design-system/pull/704): The following components have been moved from `@stratakit/bricks` into `@stratakit/structures`.
+
+  - `unstable_AccordionItem`
+  - `unstable_Banner`
+  - `Chip`
+  - `DropdownMenu`
+  - `unstable_ErrorRegion`
+  - `Table`
+  - `Tabs`
+  - `unstable_Toolbar`
+  - `Tree`
+
+- Updated dependencies:
+  - @stratakit/bricks@0.2.0
+  - @stratakit/foundations@0.1.3

package/dist/AccordionItem.d.ts

@@ -0,0 +1,133 @@
+import type { BaseProps } from "@stratakit/foundations/secret-internals";
+interface AccordionItemProps extends BaseProps {
+    /**
+     * The accordion item’s initial open state.
+     *
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * The accordion item’s controlled open state.
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the accordion item is opened.
+     *
+     * Should be used with the `open` prop.
+     */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * An item within an accordion.
+ *
+ * Bare minimum example:
+ * ```tsx
+ * <AccordionItem.Root>
+ * 	 <AccordionItem.Trigger>
+ *     <AccordionItem.Label>Label</AccordionItem.Label>
+ *     <AccordionItem.Marker />
+ *   </AccordionItem.Trigger>
+ *   <AccordionItem.Content>Body</AccordionItem.Content>
+ * </AccordionItem.Root>
+ * ```
+ *
+ * Example with a decoration:
+ * ```tsx
+ * <AccordionItem.Root>
+ * 	 <AccordionItem.Trigger>
+ *     <AccordionItem.Decoration render={<Icon href={placeholder} />} />
+ *     <AccordionItem.Label>Label</AccordionItem.Label>
+ *     <AccordionItem.Marker />
+ *   </AccordionItem.Trigger>
+ *   <AccordionItem.Content>Body</AccordionItem.Content>
+ * </AccordionItem.Root>
+ * ```
+ */
+declare const AccordionItemRoot: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
+/**
+ * The trigger for collapsing and expanding an accordion item’s content.
+ *
+ * Must include an `AccordionItem.Label` as a direct descendant.
+ *
+ * Example:
+ * ```tsx
+ * <AccordionItem.Root>
+ * 	 <AccordionItem.Trigger>
+ *     <AccordionItem.Label>Label</AccordionItem.Label>
+ *     <AccordionItem.Marker />
+ *   </AccordionItem.Trigger>
+ *   <AccordionItem.Content>Body</AccordionItem.Content>
+ * </AccordionItem.Root>
+ * ```
+ */
+declare const AccordionItemTrigger: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "render"> & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
+/**
+ * The always-visible label of an accordion item’s trigger.
+ *
+ * Use as a direct descendant of `AccordionItem.Trigger`.
+ *
+ * Example:
+ * ```tsx
+ * <AccordionItem.Trigger>
+ *   <AccordionItem.Label>Label</AccordionItem.Label>
+ *   <AccordionItem.Marker />
+ * </AccordionItem.Trigger>
+ * ```
+ */
+declare const AccordionItemLabel: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
+/**
+ * The always-visible, optional decoration of an accordion item’s trigger.
+ *
+ * Use as a direct descendant of `AccordionItem.Trigger`. This will be visually
+ * presented before the trigger’s label.
+ *
+ * Example:
+ * ```tsx
+ * <AccordionItem.Trigger>
+ *   <AccordionItem.Decoration render={<Icon href={placeholder} />} />
+ *   <AccordionItem.Label>Label</AccordionItem.Label>
+ *   <AccordionItem.Marker />
+ * </AccordionItem.Trigger>
+ * ```
+ */
+declare const AccordionItemDecoration: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
+/**
+ * The visual marker of an accordion item’s trigger.
+ *
+ * Example:
+ * ```tsx
+ * <AccordionItem.Trigger>
+ *   <AccordionItem.Label>Label</AccordionItem.Label>
+ *   <AccordionItem.Marker />
+ * </AccordionItem.Trigger>
+ * ```
+ *
+ * Pass an icon as a child to override the default chevron icon:
+ * ```tsx
+ * <AccordionItem.Trigger>
+ *   <AccordionItem.Label>Label</AccordionItem.Label>
+ *   <AccordionItem.Marker>
+ *     <Icon href={placeholder} />
+ *   </AccordionItem.Marker>
+ * </AccordionItem.Trigger>
+ * ```
+ */
+declare const AccordionItemMarker: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
+/**
+ * The disclosed content of the accordion item.
+ *
+ * Example:
+ * ```tsx
+ * <AccordionItem.Root>
+ * 	 <AccordionItem.Trigger>
+ *     <AccordionItem.Label>Label</AccordionItem.Label>
+ *     <AccordionItem.Marker />
+ *   </AccordionItem.Trigger>
+ *   <AccordionItem.Content>Body</AccordionItem.Content>
+ * </AccordionItem.Root>
+ * ```
+ */
+declare const AccordionItemContent: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
+export { AccordionItemRoot as Root, AccordionItemContent as Content, AccordionItemTrigger as Trigger, AccordionItemLabel as Label, AccordionItemDecoration as Decoration, AccordionItemMarker as Marker, };

package/dist/AccordionItem.js

@@ -0,0 +1,103 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  Disclosure,
+  DisclosureContent,
+  DisclosureProvider
+} from "@ariakit/react/disclosure";
+import { Role } from "@ariakit/react/role";
+import { Text } from "@stratakit/bricks";
+import {
+  GhostAligner,
+  IconButtonPresentation
+} from "@stratakit/bricks/secret-internals";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import { ChevronDown } from "./~utils.icons.js";
+const AccordionItemRoot = forwardRef(
+  (props, forwardedRef) => {
+    const { defaultOpen, open, onOpenChange, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      DisclosureProvider,
+      {
+        defaultOpen,
+        open,
+        setOpen: onOpenChange,
+        children: /* @__PURE__ */ jsx(
+          Role,
+          {
+            ...rest,
+            className: cx("\u{1F95D}-accordion-item", props.className),
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  }
+);
+const AccordionItemTrigger = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(GhostAligner, { align: "block", children: /* @__PURE__ */ jsx(
+    Disclosure,
+    {
+      ...props,
+      className: cx("\u{1F95D}-accordion-item-trigger", props.className),
+      ref: forwardedRef
+    }
+  ) })
+);
+const AccordionItemLabel = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(
+    Text,
+    {
+      ...props,
+      variant: "body-sm",
+      className: cx("\u{1F95D}-accordion-item-label", props.className),
+      ref: forwardedRef
+    }
+  )
+);
+const AccordionItemDecoration = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(
+    Role,
+    {
+      ...props,
+      className: cx("\u{1F95D}-accordion-item-decoration", props.className),
+      ref: forwardedRef
+    }
+  )
+);
+const AccordionItemMarker = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(
+    IconButtonPresentation,
+    {
+      ...props,
+      variant: "ghost",
+      className: cx("\u{1F95D}-accordion-item-marker", props.className),
+      ref: forwardedRef,
+      children: props.children ?? /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          "aria-hidden": "true",
+          className: "\u{1F95D}-accordion-item-marker-chevron"
+        }
+      )
+    }
+  )
+);
+const AccordionItemContent = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(
+    DisclosureContent,
+    {
+      ...props,
+      className: cx("\u{1F95D}-accordion-item-content", props.className),
+      ref: forwardedRef
+    }
+  )
+);
+export {
+  AccordionItemContent as Content,
+  AccordionItemDecoration as Decoration,
+  AccordionItemLabel as Label,
+  AccordionItemMarker as Marker,
+  AccordionItemRoot as Root,
+  AccordionItemTrigger as Trigger
+};

package/dist/Banner.d.ts

@@ -0,0 +1,81 @@
+import * as React from "react";
+import type { BaseProps } from "@stratakit/foundations/secret-internals";
+/**
+ * A banner to highlight information and also optionally provide actions.
+ * The information could be very important (like a call to action) or reasonably import (like a status message).
+ *
+ * Example:
+ * ```tsx
+ * <Banner label="Title" message="Message" icon={placeholderIcon} onDismiss={() => {}} />
+ * ```
+ */
+export declare const Banner: React.ForwardRefExoticComponent<Omit<BaseProps, "children"> & {
+    /**
+     * Icon to be displayed inside the banner.
+     *
+     * Can be a URL of an SVG from the `@stratakit/icons` package,
+     * or a custom JSX icon.
+     *
+     * - If `icon=undefined` and `tone="neutral"`, no icon is shown.
+     * - If `icon=undefined` and `tone!="neutral"`, the status icon will be shown.
+     */
+    icon?: string | React.JSX.Element;
+    /**
+     * The label displayed inside the banner.
+     *
+     * Either pass a string or a `<VisuallyHidden>` component if you don't want the label to be visible.
+     */
+    label: string | React.JSX.Element;
+    /**
+     * The content of the banner.
+     */
+    message: React.ReactNode;
+    /**
+     * Callback invoked when the dismiss ("❌") button is clicked.
+     *
+     * If `undefined`, the dismiss button will not be rendered.
+     *
+     * @default undefined
+     */
+    onDismiss?: () => void;
+    /**
+     * The actions available for the banner.
+     *
+     * Example with one action:
+     * ```tsx
+     * actions={<Button key={…} onClick={}>Action</Button>}
+     * ```
+     *
+     * Example with two `Button`s:
+     * ```tsx
+     * actions={
+     *   <>
+     *     <Button key={…} onClick={…}>Action 1</Button>,
+     *     <Button key={…} onClick={…}>Action 2</Button>,
+     *   </>
+     * }
+     * ```
+     *
+     * Example with two `Anchor`s as `Button`:
+     * ```tsx
+     * actions={
+     *   <>
+     *     <Anchor key={…} render={<button />} onClick={…}>Action 1</Anchor>,
+     *     <Anchor key={…} render={<button />} onClick={…}>Action 2</Anchor>,
+     *   </>
+     * }
+     */
+    actions?: React.ReactNode;
+    /**
+     * The tone of the banner.
+     *
+     * @default "neutral"
+     */
+    tone?: "neutral" | "info" | "positive" | "attention" | "critical";
+    /**
+     * The variant of the banner.
+     *
+     * @default "outline"
+     */
+    variant?: "outline";
+} & React.RefAttributes<HTMLDivElement | HTMLElement>>;

package/dist/Banner.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import { IconButton, Text } from "@stratakit/bricks";
+import { GhostAligner } from "@stratakit/bricks/secret-internals";
+import { Icon } from "@stratakit/foundations";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import * as React from "react";
+import { Dismiss, StatusIcon } from "./~utils.icons.js";
+const Banner = forwardRef((props, forwardedRef) => {
+  const {
+    message,
+    label,
+    actions,
+    onDismiss,
+    tone = "neutral",
+    icon = tone !== "neutral" ? /* @__PURE__ */ jsx(StatusIcon, { tone }) : void 0,
+    variant = "outline",
+    ...rest
+  } = props;
+  const baseId = React.useId();
+  const labelId = `${baseId}-label`;
+  const dismissId = `${baseId}-dismiss`;
+  return /* @__PURE__ */ jsxs(
+    Role,
+    {
+      ...rest,
+      "data-kiwi-tone": tone,
+      "data-kiwi-variant": variant,
+      className: cx("\u{1F95D}-banner", props.className),
+      ref: forwardedRef,
+      children: [
+        icon ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: "\u{1F95D}-banner-icon",
+            href: typeof icon === "string" ? icon : void 0,
+            render: React.isValidElement(icon) ? icon : void 0
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            className: "\u{1F95D}-banner-label",
+            id: labelId,
+            variant: "body-sm",
+            render: React.isValidElement(label) ? label : /* @__PURE__ */ jsx("span", {}),
+            children: !React.isValidElement(label) ? label : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { render: /* @__PURE__ */ jsx("div", {}), variant: "body-sm", className: "\u{1F95D}-banner-message", children: message }),
+        actions != null ? /* @__PURE__ */ jsx("div", { className: "\u{1F95D}-banner-actions", children: actions }) : null,
+        onDismiss ? /* @__PURE__ */ jsx(GhostAligner, { align: "block", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            id: dismissId,
+            className: "\u{1F95D}-banner-dismiss-button",
+            variant: "ghost",
+            label: "Dismiss",
+            "aria-labelledby": `${dismissId} ${labelId}`,
+            icon: /* @__PURE__ */ jsx(Dismiss, {}),
+            onClick: onDismiss
+          }
+        ) }) : null
+      ]
+    }
+  );
+});
+export {
+  Banner
+};

package/dist/Chip.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+import type { BaseProps } from "@stratakit/foundations/secret-internals";
+interface ChipProps extends Omit<BaseProps<"div">, "children"> {
+    /**
+     * The label displayed inside the chip.
+     */
+    label: string;
+    /**
+     * The variant style of the Chip.
+     * Use "solid" for primary states and "outline" for less prominent states.
+     *
+     * @default "solid"
+     */
+    variant?: "solid" | "outline";
+    /**
+     * Callback invoked when the dismiss ("❌") button is clicked.
+     *
+     * If `undefined`, the dismiss button will not be rendered.
+     *
+     * @default undefined
+     */
+    onDismiss?: () => void;
+}
+/**
+ * Chip is a UI component used to represent an item, attribute, or action in a compact visual style.
+ * It supports two visual variants: `solid` for primary emphasis and `outline` for less prominent states.
+ *
+ * Example:
+ * ```tsx
+ * <Chip label="Value" />
+ * <Chip label="Value" variant="outline" />
+ * ```
+ */
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+export {};

package/dist/Chip.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import { IconButton } from "@stratakit/bricks";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import * as React from "react";
+import { Dismiss } from "./~utils.icons.js";
+const Chip = forwardRef((props, forwardedRef) => {
+  const { variant = "solid", onDismiss, label, ...rest } = props;
+  const baseId = React.useId();
+  const labelId = `${baseId}-label`;
+  const dismissIconId = `${baseId}-dismiss`;
+  return /* @__PURE__ */ jsxs(
+    Role.div,
+    {
+      "data-kiwi-variant": variant,
+      ...rest,
+      className: cx("\u{1F95D}-chip", props.className),
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsx("span", { id: labelId, children: label }),
+        onDismiss && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            id: dismissIconId,
+            className: "\u{1F95D}-chip-dismiss-button",
+            variant: "ghost",
+            "aria-labelledby": `${dismissIconId} ${labelId}`,
+            label: "Dismiss",
+            labelVariant: "visually-hidden",
+            icon: /* @__PURE__ */ jsx(Dismiss, {}),
+            onClick: onDismiss
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Chip
+};

package/dist/DEV/AccordionItem.js

@@ -0,0 +1,109 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  Disclosure,
+  DisclosureContent,
+  DisclosureProvider
+} from "@ariakit/react/disclosure";
+import { Role } from "@ariakit/react/role";
+import { Text } from "@stratakit/bricks";
+import {
+  GhostAligner,
+  IconButtonPresentation
+} from "@stratakit/bricks/secret-internals";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import { ChevronDown } from "./~utils.icons.js";
+const AccordionItemRoot = forwardRef(
+  (props, forwardedRef) => {
+    const { defaultOpen, open, onOpenChange, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      DisclosureProvider,
+      {
+        defaultOpen,
+        open,
+        setOpen: onOpenChange,
+        children: /* @__PURE__ */ jsx(
+          Role,
+          {
+            ...rest,
+            className: cx("\u{1F95D}-accordion-item", props.className),
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  }
+);
+DEV: AccordionItemRoot.displayName = "AccordionItem.Root";
+const AccordionItemTrigger = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(GhostAligner, { align: "block", children: /* @__PURE__ */ jsx(
+    Disclosure,
+    {
+      ...props,
+      className: cx("\u{1F95D}-accordion-item-trigger", props.className),
+      ref: forwardedRef
+    }
+  ) })
+);
+DEV: AccordionItemTrigger.displayName = "AccordionItem.Trigger";
+const AccordionItemLabel = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(
+    Text,
+    {
+      ...props,
+      variant: "body-sm",
+      className: cx("\u{1F95D}-accordion-item-label", props.className),
+      ref: forwardedRef
+    }
+  )
+);
+DEV: AccordionItemLabel.displayName = "AccordionItem.Label";
+const AccordionItemDecoration = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(
+    Role,
+    {
+      ...props,
+      className: cx("\u{1F95D}-accordion-item-decoration", props.className),
+      ref: forwardedRef
+    }
+  )
+);
+DEV: AccordionItemDecoration.displayName = "AccordionItem.Decoration";
+const AccordionItemMarker = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(
+    IconButtonPresentation,
+    {
+      ...props,
+      variant: "ghost",
+      className: cx("\u{1F95D}-accordion-item-marker", props.className),
+      ref: forwardedRef,
+      children: props.children ?? /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          "aria-hidden": "true",
+          className: "\u{1F95D}-accordion-item-marker-chevron"
+        }
+      )
+    }
+  )
+);
+DEV: AccordionItemMarker.displayName = "AccordionItem.Marker";
+const AccordionItemContent = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(
+    DisclosureContent,
+    {
+      ...props,
+      className: cx("\u{1F95D}-accordion-item-content", props.className),
+      ref: forwardedRef
+    }
+  )
+);
+DEV: AccordionItemContent.displayName = "AccordionItem.Content";
+export {
+  AccordionItemContent as Content,
+  AccordionItemDecoration as Decoration,
+  AccordionItemLabel as Label,
+  AccordionItemMarker as Marker,
+  AccordionItemRoot as Root,
+  AccordionItemTrigger as Trigger
+};

package/dist/DEV/Banner.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import { IconButton, Text } from "@stratakit/bricks";
+import { GhostAligner } from "@stratakit/bricks/secret-internals";
+import { Icon } from "@stratakit/foundations";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import * as React from "react";
+import { Dismiss, StatusIcon } from "./~utils.icons.js";
+const Banner = forwardRef((props, forwardedRef) => {
+  const {
+    message,
+    label,
+    actions,
+    onDismiss,
+    tone = "neutral",
+    icon = tone !== "neutral" ? /* @__PURE__ */ jsx(StatusIcon, { tone }) : void 0,
+    variant = "outline",
+    ...rest
+  } = props;
+  const baseId = React.useId();
+  const labelId = `${baseId}-label`;
+  const dismissId = `${baseId}-dismiss`;
+  return /* @__PURE__ */ jsxs(
+    Role,
+    {
+      ...rest,
+      "data-kiwi-tone": tone,
+      "data-kiwi-variant": variant,
+      className: cx("\u{1F95D}-banner", props.className),
+      ref: forwardedRef,
+      children: [
+        icon ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: "\u{1F95D}-banner-icon",
+            href: typeof icon === "string" ? icon : void 0,
+            render: React.isValidElement(icon) ? icon : void 0
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            className: "\u{1F95D}-banner-label",
+            id: labelId,
+            variant: "body-sm",
+            render: React.isValidElement(label) ? label : /* @__PURE__ */ jsx("span", {}),
+            children: !React.isValidElement(label) ? label : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { render: /* @__PURE__ */ jsx("div", {}), variant: "body-sm", className: "\u{1F95D}-banner-message", children: message }),
+        actions != null ? /* @__PURE__ */ jsx("div", { className: "\u{1F95D}-banner-actions", children: actions }) : null,
+        onDismiss ? /* @__PURE__ */ jsx(GhostAligner, { align: "block", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            id: dismissId,
+            className: "\u{1F95D}-banner-dismiss-button",
+            variant: "ghost",
+            label: "Dismiss",
+            "aria-labelledby": `${dismissId} ${labelId}`,
+            icon: /* @__PURE__ */ jsx(Dismiss, {}),
+            onClick: onDismiss
+          }
+        ) }) : null
+      ]
+    }
+  );
+});
+DEV: Banner.displayName = "Banner";
+export {
+  Banner
+};