@brandsync/wc 0.0.12 → 1.0.0

package/dist/types/components/bs-checkbox/bs-checkbox-skeleton/bs-checkbox-skeleton.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { BsCheckboxSize } from '../bs-checkbox';
+interface BsCheckboxSkeletonArgs {
+    size: BsCheckboxSize;
+}
+declare const meta: Meta<BsCheckboxSkeletonArgs>;
+export default meta;
+type Story = StoryObj<BsCheckboxSkeletonArgs>;
+export declare const Default: Story;
+export declare const Sizes: Story;

package/dist/types/components/bs-checkbox/bs-checkbox.stories.d.ts

@@ -12,6 +12,7 @@ declare const meta: Meta<BsCheckboxArgs>;
 export default meta;
 type Story = StoryObj<BsCheckboxArgs>;
 export declare const Default: Story;
+export declare const Horizontal: Story;
 export declare const Checked: Story;
 export declare const Indeterminate: Story;
 export declare const Disabled: Story;

package/dist/types/components/bs-dialog/bs-dialog.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-dialog/bs-dialog.d.ts

@@ -0,0 +1,74 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsDialogSize = 'sm' | 'md' | 'lg';
+/**
+ * An overlay dialog that interrupts the current flow for a focused task or confirmation.
+ * Closes itself on backdrop click, Escape, or its own close button, and emits `bsClose`.
+ *
+ * ## When to use
+ * - Confirming a consequential action (e.g. "Confirm booking") before it takes effect.
+ * - A short, focused task that doesn't warrant navigating to a new page.
+ *
+ * ## When not to use
+ * - For non-blocking status messages — use a toast/notification instead of interrupting the user.
+ * - For a long, multi-step flow — a full page or a dedicated route is usually a better fit than a
+ *   dialog that just gets taller and taller.
+ *
+ * Two additional slots cover the Figma "Dialog" component's other states: `image` (a hero image
+ * across the top, close button floats over it instead of sitting in the header row) and `icon`
+ * (only rendered when `centered` is set, e.g. a success checkmark above a centered heading). The
+ * close button "floats" (absolute-positioned, top-right of the dialog, with its own background)
+ * whenever `centered` is true or the `image` slot has content -- otherwise it's the plain inline
+ * button in the header row next to the heading, same as before this addition.
+ *
+ * @slot - Default slot: the dialog body content.
+ * @slot image - Optional hero image across the top of the dialog. Presence of assigned content
+ * switches the close button to float over it; doesn't affect layout when empty.
+ * @slot icon - Optional icon shown above the heading, only rendered at all when `centered` is true.
+ * @slot footer - Optional footer content (typically action buttons).
+ * @part backdrop - The full-viewport overlay behind the dialog.
+ * @part dialog - The dialog box itself.
+ * @part image - The hero image wrapper (only visible when the `image` slot has content).
+ * @part icon - The icon wrapper (only rendered when `centered` is true).
+ * @part header - The header row (heading + close button, when the close button isn't floating).
+ * @part close - The close button (inline in the header, or floating -- see the class doc above).
+ * @part body - The body content wrapper.
+ * @part footer - The footer wrapper (only visible when the footer slot has content).
+ */
+export declare class BsDialog {
+    /** Mutable + reflected so the component can close itself (backdrop click, Escape, close button)
+     * the same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to. */
+    open: boolean;
+    heading?: string;
+    size: BsDialogSize;
+    /** Switches to the Figma "Icon Centered" layout: heading/body text centered, the `icon` slot
+     * rendered above the heading, and the close button floating top-right of the dialog instead of
+     * inline in the header row. Doesn't hide a slotted `image` if one is also provided -- Figma's
+     * spec doesn't show the two combined, so this is unspecified rather than actively blocked.
+     * Reflected so consumers/CSS can target `bs-dialog[centered]`. */
+    centered: boolean;
+    bsClose: EventEmitter<void>;
+    /** Tracks whether the `footer` slot has assigned content, so the footer bar (border + padding)
+     * only renders when there's actually something to put in it. */
+    hasFooter: boolean;
+    /** Tracks whether the `image` slot has assigned content -- drives both whether the image wrapper
+     * is visible and whether the close button floats over it (see `floatingClose` in `render()`). */
+    hasImage: boolean;
+    /** Tracks whether the `icon` slot has assigned content, so the icon wrapper only reserves layout
+     * space when there's actually an icon -- same pattern as `bs-tab`'s `hasIcon`. Only relevant when
+     * `centered` is true, since the icon wrapper isn't rendered at all otherwise. */
+    hasIcon: boolean;
+    private onFooterSlotchange;
+    private onImageSlotchange;
+    private onIconSlotchange;
+    private dialogRef?;
+    private previouslyFocused?;
+    private previousBodyOverflow?;
+    private wasOpen;
+    private close;
+    onKeydown(ev: KeyboardEvent): void;
+    private onBackdropClick;
+    onFocusIn(ev: FocusEvent): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/{bs-modal/bs-modal.stories.d.ts → bs-dialog/bs-dialog.stories.d.ts}

@@ -1,9 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
-interface BsModalArgs {
+interface BsDialogArgs {
     heading: string;
     size: 'sm' | 'md' | 'lg';
 }
-declare const meta: Meta<BsModalArgs>;
+declare const meta: Meta<BsDialogArgs>;
 export default meta;
-type Story = StoryObj<BsModalArgs>;
+type Story = StoryObj<BsDialogArgs>;
 export declare const Default: Story;
+export declare const WithImage: Story;
+export declare const Centered: Story;

package/dist/types/components/bs-input/bs-input.d.ts

@@ -25,6 +25,12 @@ import { EventEmitter } from '../../stencil-public-runtime';
  *   toggle), or `dropdown` (chevron) -- those types always render their own trailing control there.
  *   For `type="date"`, the slot is used if provided, otherwise a default calendar icon is shown.
  * @part field - The bordered field wrapper containing the icon(s) and native control(s).
+ *   `type="initials"` renders this part on TWO separate elements instead of one (the title
+ *   `<select>`'s own small box, and the name `<input>`'s own box) -- Figma specs these as two
+ *   genuinely independent bordered containers with a gap between them, not one shared field the
+ *   way every other composite type (`country` included) renders, so `::part(field)` reaches
+ *   whichever of the two a given selector context matches, same "multiple elements, one shared
+ *   part name" convention as `bs-attachment`'s own `star` part.
  * @part menu - The `bs-menu` rendered below the field for `type="dropdown"` when `open` and
  *   `options` is non-empty.
  * @part label - The `<label>` element.
@@ -157,7 +163,8 @@ export declare class BsInput {
     private renderSelectControl;
     private renderTextareaControl;
     private renderChipControl;
-    private renderInitialsControl;
+    private renderInitialsField;
+    private renderSelectChevron;
     private renderCountryControl;
     private renderControl;
     private renderField;

package/dist/types/components/bs-pagination/bs-pagination.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-pagination/bs-pagination.d.ts

@@ -0,0 +1,51 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A numbered page control -- previous/next chevrons, page-number buttons, and `...` overflow for
+ * large page counts. Matches the Figma "Pagination" component's "Default" type (the classic
+ * numbered pagination); its other type ("jumper" -- a rows-per-page dropdown plus a page-jump
+ * input) is a structurally different composite widget and isn't covered by this component.
+ *
+ * `totalPages`/`currentPage` drive everything -- this computes which page numbers to show and
+ * where to collapse into `...` itself, the consumer never builds the button list by hand.
+ *
+ * ## When to use
+ * - Paging through a large, ordered result set (a table, a search results list) where jumping
+ *   directly to a specific page number is useful.
+ *
+ * ## When not to use
+ * - Infinite-scroll or "load more" patterns -- those don't have a fixed, addressable page number.
+ * - A huge page count where users realistically only ever go forward/back one page at a time --
+ *   plain prev/next controls (no numbers) are simpler there.
+ *
+ * @part list - The `<ul>` element.
+ * @part item - Each `<li>` in the list.
+ * @part prev - The previous-page button.
+ * @part next - The next-page button.
+ * @part page - Each page-number button.
+ * @part current - The current page's button (in addition to `page`).
+ * @part ellipsis - Each collapsed-range indicator.
+ */
+export declare class BsPagination {
+    /** Total number of pages. Must be a positive integer -- there's always at least one page. */
+    totalPages: number;
+    /** The active page (1-indexed). Mutable + reflected so clicking a page button updates it
+     * directly, the same way `bs-modal`'s `open` self-manages, while `bsPageChange` still fires for
+     * the consumer to react to (e.g. fetching that page's data). */
+    currentPage: number;
+    /** How many page numbers to show on each side of the current page before collapsing the rest
+     * into `...`. `1` (the default) reproduces the Figma spec's example exactly (page 1 of 12 shows
+     * `1 2 3 ... 12`). */
+    siblingCount: number;
+    /** Accessible name for the previous-page button. */
+    previousLabel: string;
+    /** Accessible name for the next-page button. */
+    nextLabel: string;
+    /** Fires whenever the active page changes as a result of the user clicking a page/prev/next
+     * button -- not when `currentPage` is set programmatically from outside. */
+    bsPageChange: EventEmitter<number>;
+    private get safeTotalPages();
+    private get safeSiblingCount();
+    private goToPage;
+    private getPageList;
+    render(): any;
+}

package/dist/types/components/bs-pagination/bs-pagination.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsPaginationArgs {
+    totalPages: number;
+    currentPage: number;
+    siblingCount: number;
+}
+declare const meta: Meta<BsPaginationArgs>;
+export default meta;
+type Story = StoryObj<BsPaginationArgs>;
+export declare const Default: Story;
+export declare const MiddlePage: Story;
+export declare const LastPage: Story;
+export declare const FewPages: Story;
+export declare const WiderSiblingCount: Story;

package/dist/types/components/bs-snackbar/bs-snackbar.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-snackbar/bs-snackbar.d.ts

@@ -0,0 +1,51 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsSnackbarVariant = 'default' | 'info' | 'warning' | 'success' | 'error';
+/**
+ * A transient status bar for confirming the result of an action (e.g. "Files uploaded
+ * successfully.") -- an icon (or loading spinner), a message, an optional action, and a close
+ * button.
+ *
+ * This component only renders the bar itself -- it doesn't manage its own visibility, timing, or
+ * stacking. A consumer (typically a small "toast manager" utility) creates one per message and
+ * removes it from the DOM again, whether on a timer or on `bsDismiss`. Figma's spec doesn't show
+ * auto-dismiss timing at all (it's a static visual spec), so this deliberately doesn't invent one.
+ *
+ * The icon is always the same checkmark glyph across every `variant`, just recolored -- matching
+ * the Figma spec exactly, even though a checkmark for `variant="error"` reads a little oddly
+ * semantically. Worth revisiting with severity-specific icons (warning triangle, error circle,
+ * etc.) if the design updates to specify them.
+ *
+ * ## When to use
+ * - Confirming the outcome of an action that just happened (save succeeded, upload failed) without
+ *   interrupting the user's flow.
+ *
+ * ## When not to use
+ * - For a response that requires the user to make a decision before continuing -- use `bs-dialog`.
+ * - For persistent, always-visible status -- a snackbar is inherently transient.
+ *
+ * @slot - Default slot: the message text.
+ * @part container - The outer bar.
+ * @part icon - The leading icon/spinner wrapper.
+ * @part message - The message text wrapper.
+ * @part action - The optional action button (only rendered when `actionLabel` is set).
+ * @part close - The close button.
+ */
+export declare class BsSnackbar {
+    /** Color/semantic variant. `default` is the neutral (dark, inverse-surface) bar Figma shows as
+     * the baseline; `info`/`warning`/`success`/`error` use their matching container/text tokens. */
+    variant: BsSnackbarVariant;
+    /** Replaces the checkmark icon with a spinning loading indicator, for a message describing
+     * in-progress work (e.g. "Uploading files...") rather than a completed result. */
+    loading: boolean;
+    /** Label for the optional action button (e.g. "Undo", "Retry"). Omit this prop entirely to
+     * render no action button at all -- its presence, not a boolean flag, is what shows it. */
+    actionLabel?: string;
+    /** Fires when the action button is clicked. Ignored/never fires if `actionLabel` isn't set. */
+    bsAction: EventEmitter<void>;
+    /** Fires when the close button is clicked. This component doesn't remove itself from the DOM --
+     * the consumer is expected to do that (or hide it) in response to this event. */
+    bsDismiss: EventEmitter<void>;
+    private onAction;
+    private onDismiss;
+    render(): any;
+}

package/dist/types/components/bs-snackbar/bs-snackbar.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { BsSnackbarVariant } from './bs-snackbar';
+interface BsSnackbarArgs {
+    variant: BsSnackbarVariant;
+    loading: boolean;
+    actionLabel: string;
+    message: string;
+}
+declare const meta: Meta<BsSnackbarArgs>;
+export default meta;
+type Story = StoryObj<BsSnackbarArgs>;
+export declare const Default: Story;
+export declare const AllVariants: Story;
+export declare const Overflow: Story;
+export declare const Loading: Story;
+export declare const NoAction: Story;

package/dist/types/components/bs-stepper/bs-stepper/bs-stepper.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-stepper/bs-stepper/bs-stepper.d.ts

@@ -0,0 +1,48 @@
+import type { BsStepperDirection } from '../bs-stepper-step/bs-stepper-step';
+/**
+ * A sequence of named steps showing overall progress through a multi-step flow (e.g. a checkout,
+ * an onboarding wizard) -- each step reads as enabled (not yet reached), current, done, error, or
+ * disabled, connected by a rail between them.
+ *
+ * This container is intentionally thin: it renders a `<slot>` for `<bs-stepper-step>` children and
+ * propagates `currentStep`/`direction`/`showDescription` down to them as JS properties whenever any
+ * of those change or the slotted children themselves change -- the same "container pushes state
+ * onto its slotted children" pattern `bs-tabs` uses for `selected` and `bs-breadcrumbs` uses for
+ * `size`. Each step computes its own `enabled`/`current`/`done` state from its position among its
+ * siblings relative to `currentStep`, unless that step's own `error`/`disabled` prop overrides it.
+ *
+ * This is a static status display, not an interactive control -- Figma's spec shows no
+ * hover/pressed treatment on any step, so nothing here is clickable.
+ *
+ * ## When to use
+ * - Showing where the user is in a fixed, ordered, multi-step flow.
+ *
+ * ## When not to use
+ * - A flow whose steps aren't fixed/known in advance -- a stepper implies the full sequence is
+ *   already known.
+ * - As a substitute for actual in-page navigation between steps -- pair this with real controls
+ *   (Next/Back buttons) elsewhere in the flow, this component only displays status.
+ *
+ * @slot - Default slot: the `<bs-stepper-step>` elements making up the sequence, in order.
+ */
+export declare class BsStepper {
+    el: HTMLElement;
+    /** 0-indexed: which step is current. Every step before this index reads as "done" (unless that
+     * step's own `error`/`disabled` overrides it), every step after reads as "enabled". */
+    currentStep: number;
+    /** `horizontal` (icon above name/description, connected by a horizontal rail) or `vertical`
+     * (icon beside name/description, connected by a vertical rail). Propagated to every slotted
+     * `bs-stepper-step`, and reflected as an attribute so this container's own `:host` CSS can switch
+     * its `flex-direction` to match -- a bare `<slot>` with no wrapping element (see `render()`)
+     * means the slotted steps' flex-row/column layout comes directly from `:host` here, not from any
+     * wrapper div. */
+    direction: BsStepperDirection;
+    /** Whether each step's description renders at all. Propagated to every slotted
+     * `bs-stepper-step`. */
+    showDescription: boolean;
+    onPropChange(): void;
+    componentDidLoad(): void;
+    private onSlotChange;
+    private propagateToSteps;
+    render(): any;
+}

package/dist/types/components/bs-stepper/bs-stepper/bs-stepper.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsStepperArgs {
+    currentStep: number;
+    direction: 'horizontal' | 'vertical';
+    showDescription: boolean;
+}
+declare const meta: Meta<BsStepperArgs>;
+export default meta;
+type Story = StoryObj<BsStepperArgs>;
+export declare const Default: Story;
+export declare const Vertical: Story;
+export declare const WithError: Story;
+export declare const WithDisabledStep: Story;
+export declare const NoDescription: Story;

package/dist/types/components/bs-stepper/bs-stepper-step/bs-stepper-step.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-stepper/bs-stepper-step/bs-stepper-step.d.ts

@@ -0,0 +1,55 @@
+export type BsStepperStepComputedState = 'enabled' | 'current' | 'done';
+export type BsStepperStepState = BsStepperStepComputedState | 'error' | 'disabled';
+export type BsStepperDirection = 'horizontal' | 'vertical';
+/**
+ * A single step within a `<bs-stepper>` sequence: an icon/indicator plus a name and optional
+ * description, connected to the next step by a trailing rail.
+ *
+ * `computedState` is set automatically by the parent `<bs-stepper>` based on this step's position
+ * relative to its `currentStep` (before it = "done", at it = "current", after it = "enabled") --
+ * same "container pushes state onto its slotted children" pattern `bs-tabs` uses for `selected`
+ * and `bs-breadcrumbs` uses for `size`. This step's own `error`/`disabled` props, when set directly
+ * by the consumer, override that computed value -- e.g. a step before `currentStep` would normally
+ * read as "done", but `error` on that step wins regardless.
+ *
+ * The trailing rail is owned by this component, not the container: `:host(:last-child)` hides it
+ * on whichever step is visually last, mirroring `bs-breadcrumb`'s own `:host(:first-child)` rule
+ * for its leading separator (same technique, opposite end -- see that component for why pure DOM
+ * position, not CSS `:last-of-type`, is what actually needs checking here too).
+ *
+ * ## When to use
+ * - As a child of `<bs-stepper>`, one per step in the sequence.
+ *
+ * ## When not to use
+ * - Standalone, outside a `<bs-stepper>` wrapper -- `computedState`/`direction`/`showDescription`
+ *   depend on that parent propagating them; alone, this defaults to `enabled`/`horizontal`/`true`.
+ *
+ * @slot - None: `name`/`description` fully drive the label content.
+ * @part icon - The icon/indicator wrapper.
+ * @part label - The name+description wrapper.
+ * @part name - The name text.
+ * @part description - The description text (only rendered when `showDescription` is true and
+ * `description` is set).
+ * @part connector - The trailing rail segment (not rendered on the last step).
+ */
+export declare class BsStepperStep {
+    /** This step's name/title. */
+    name: string;
+    /** Optional supporting text below the name. Only rendered when `showDescription` (propagated
+     * from the parent `<bs-stepper>`) is also true. */
+    description?: string;
+    /** Shows the error treatment for this step, regardless of its `computedState`. */
+    error: boolean;
+    /** Shows the disabled treatment for this step, regardless of its `computedState`. Takes priority
+     * over `error` if both are somehow set. */
+    disabled: boolean;
+    /** Set automatically by the parent `<bs-stepper>` from this step's position relative to its
+     * `currentStep` -- see the class doc above. Can be set directly for a standalone step. */
+    computedState: BsStepperStepComputedState;
+    /** Set automatically by the parent `<bs-stepper>`, propagated to every slotted step. */
+    direction: BsStepperDirection;
+    /** Set automatically by the parent `<bs-stepper>`, propagated to every slotted step. */
+    showDescription: boolean;
+    private get state();
+    render(): any;
+}

package/dist/types/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.d.ts

@@ -6,7 +6,8 @@ import { EventEmitter } from '../../../../stencil-public-runtime';
  * ## When to use
  * - The primary in-app navigation, shown alongside `bs-navigation-header` (typically that
  *   header's `with-navigation-drawer` alignment, which omits its own logo since this component
- *   already renders one).
+ *   already renders one -- or the reverse pairing, this drawer's own `showLogo={false}` alongside
+ *   a header that keeps its logo instead, see that prop's own docs).
  *
  * ## When not to use
  * - The top navigation bar itself -- use `bs-navigation-header` instead.
@@ -41,10 +42,11 @@ import { EventEmitter } from '../../../../stencil-public-runtime';
  * @slot - Default slot: the scrollable list of nav items, typically one or more
  *   `bs-navigation-drawer-item` elements.
  * @part logo - The wrapper around the BrandSync brand mark. Two of these exist in the shadow DOM
- *   at once (one wrapping a `bs-logo variant="full"`, one wrapping a `bs-logo variant="mark"`),
- *   both carrying this same part name (the same "multiple elements, one shared part name"
- *   approach `bs-attachment`'s `star` part uses) -- only one is visible at a time, toggled by
- *   plain CSS on `collapsed` (see above), so `::part(logo)` always reaches whichever is showing.
+ *   at once while `showLogo` is `true` (one wrapping a `bs-logo variant="full"`, one wrapping a
+ *   `bs-logo variant="mark"`), both carrying this same part name (the same "multiple elements, one
+ *   shared part name" approach `bs-attachment`'s `star` part uses) -- only one is visible at a
+ *   time, toggled by plain CSS on `collapsed` (see above), so `::part(logo)` always reaches
+ *   whichever is showing. Neither renders at all while `showLogo` is `false`.
  * @part title - The "Main Menu" heading text wrapper.
  * @part collapse - The collapse toggle button.
  * @part search - The wrapper around the `search` slot.
@@ -82,6 +84,12 @@ export declare class BsNavigationDrawer {
      * `collapsed` (see `bs-logo`'s own docs -- there's only one real designed mark asset, it's
      * background-agnostic). */
     logoBackground: 'auto' | 'light' | 'dark';
+    /** Whether to render the BrandSync logo at all. Defaults to `true`. This drawer is normally the
+     * one that owns the logo when paired with a `bs-navigation-header` (that header's own
+     * `with-navigation-drawer` alignment omits its logo for exactly this reason) -- but the reverse
+     * pairing works too: a header that keeps its own logo (`alignment="default"`) paired with this
+     * drawer set to `showLogo={false}`, so the brand mark only ever appears once. */
+    showLogo: boolean;
     onCollapsedChange(collapsed: boolean): void;
     componentDidLoad(): void;
     /** Keeps every direct-child `bs-navigation-drawer-item`'s `collapsed` prop in sync with this

package/dist/types/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.stories.d.ts

@@ -3,6 +3,7 @@ interface BsNavigationDrawerArgs {
     heading: string;
     collapsible: boolean;
     logoBackground: 'auto' | 'light' | 'dark';
+    showLogo: boolean;
 }
 declare const meta: Meta<BsNavigationDrawerArgs>;
 export default meta;
@@ -11,6 +12,8 @@ export declare const FixedSideNav: Story;
 export declare const FixedSideNavWithDivider: Story;
 export declare const FixedSideNavWithIcons: Story;
 export declare const Collapsed: Story;
+export declare const CollapsedWithHeader: Story;
 export declare const Dark: Story;
 export declare const WithoutSearch: Story;
 export declare const EmptyItems: Story;
+export declare const LargeItemList: Story;

package/dist/types/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.stories.d.ts

@@ -19,3 +19,7 @@ export declare const HeaderBaseWithNavigationAndActionsNoLogo: Story;
 export declare const HeaderBaseWithNavigationAndActionsTabs: Story;
 export declare const HeaderBaseDark: Story;
 export declare const HeaderBaseWithSkipLink: Story;
+export declare const HeaderBaseWithActionsAndSwitcher: Story;
+export declare const HeaderBaseWithSideNav: Story;
+export declare const HeaderBaseWithNavigationActionsAndSideNav: Story;
+export declare const HeaderBaseWithSideNavHeaderLogo: Story;