@arc-ui/components 11.5.0 → 11.7.0

package/dist/PaginationSimple/PaginationSimple.cjs.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-45bfb67b.js');
+var React = require('react');
+var BtIconChevronRightMid = require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
+var BtIconChevronLeftMid = require('../_shared/cjs/BtIconChevronLeftMid-df952a3e.js');
+var Icon = require('../_shared/cjs/Icon-e1dd45eb.js');
+var Surface = require('../_shared/cjs/Surface-b7c51b2b.js');
+require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
+require('../_shared/cjs/suffix-modifier-1ee2da04.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `PaginationSimple` to navigate multiple pages.
+ */
+var PaginationSimple = function (_a) {
+    var hidePrev = _a.hidePrev, hideNext = _a.hideNext, onPrevPage = _a.onPrevPage, onNextPage = _a.onNextPage, isFluid = _a.isFluid;
+    var surface = React.useContext(Surface.Context).surface;
+    return (React__default["default"].createElement("nav", { className: index.classNames("arc-PaginationSimple", {
+            "arc-PaginationSimple--onDarkSurface": surface === "dark",
+            "arc-PaginationSimple--fluid": isFluid,
+            "arc-PaginationSimple--centered": !isFluid
+        }) },
+        React__default["default"].createElement("button", { className: index.classNames("arc-PaginationSimple-navigationButton", {
+                "arc-PaginationSimple-navigationButton--hidden": hidePrev
+            }), onClick: function () {
+                onPrevPage();
+            } },
+            React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--left" },
+                React__default["default"].createElement(Icon.Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid.BtIconChevronLeftMid_2 })),
+            React__default["default"].createElement("span", { className: "arc-PaginationSimple-prevText" }, "Prev")),
+        React__default["default"].createElement("button", { className: index.classNames("arc-PaginationSimple-navigationButton", {
+                "arc-PaginationSimple-navigationButton--hidden": hideNext
+            }), onClick: function () {
+                onNextPage();
+            } },
+            React__default["default"].createElement("span", { className: "arc-PaginationSimple-nextText" }, "Next"),
+            React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--right" },
+                React__default["default"].createElement(Icon.Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid.BtIconChevronRightMid_2 })))));
+};
+
+exports.PaginationSimple = PaginationSimple;

package/dist/PaginationSimple/PaginationSimple.esm.d.ts

@@ -0,0 +1,28 @@
+import { FC } from "react";
+/**
+ * Use `PaginationSimple` to navigate multiple pages.
+ */
+declare const PaginationSimple: FC<PaginationSimpleProps>;
+interface PaginationSimpleProps {
+    /**
+     * hides prev button if true.
+     */
+    hidePrev?: boolean;
+    /**
+     * hides next button if true.
+     */
+    hideNext?: boolean;
+    /**
+     * if true buttons will hug either edge of the parent element
+     */
+    isFluid?: boolean;
+    /**
+     * Function to call when previous page is selected
+     */
+    onPrevPage: () => void;
+    /**
+     * Function to call when next page is selected
+     */
+    onNextPage: () => void;
+}
+export { PaginationSimple };

package/dist/PaginationSimple/PaginationSimple.esm.js

@@ -0,0 +1,39 @@
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
+import React__default, { useContext } from 'react';
+import { B as BtIconChevronRightMid_2 } from '../_shared/esm/BtIconChevronRightMid-d9b11761.js';
+import { B as BtIconChevronLeftMid_2 } from '../_shared/esm/BtIconChevronLeftMid-9f4f3a3d.js';
+import { I as Icon } from '../_shared/esm/Icon-c1af47bc.js';
+import { C as Context } from '../_shared/esm/Surface-dde51789.js';
+import '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import '../_shared/esm/suffix-modifier-7e640670.js';
+
+/**
+ * Use `PaginationSimple` to navigate multiple pages.
+ */
+var PaginationSimple = function (_a) {
+    var hidePrev = _a.hidePrev, hideNext = _a.hideNext, onPrevPage = _a.onPrevPage, onNextPage = _a.onNextPage, isFluid = _a.isFluid;
+    var surface = useContext(Context).surface;
+    return (React__default.createElement("nav", { className: classNames("arc-PaginationSimple", {
+            "arc-PaginationSimple--onDarkSurface": surface === "dark",
+            "arc-PaginationSimple--fluid": isFluid,
+            "arc-PaginationSimple--centered": !isFluid
+        }) },
+        React__default.createElement("button", { className: classNames("arc-PaginationSimple-navigationButton", {
+                "arc-PaginationSimple-navigationButton--hidden": hidePrev
+            }), onClick: function () {
+                onPrevPage();
+            } },
+            React__default.createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--left" },
+                React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid_2 })),
+            React__default.createElement("span", { className: "arc-PaginationSimple-prevText" }, "Prev")),
+        React__default.createElement("button", { className: classNames("arc-PaginationSimple-navigationButton", {
+                "arc-PaginationSimple-navigationButton--hidden": hideNext
+            }), onClick: function () {
+                onNextPage();
+            } },
+            React__default.createElement("span", { className: "arc-PaginationSimple-nextText" }, "Next"),
+            React__default.createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--right" },
+                React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid_2 })))));
+};
+
+export { PaginationSimple };

package/dist/PaginationSimple/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/paginationsimple",
+  "types": "./PaginationSimple.esm.d.ts",
+  "main": "./PaginationSimple.cjs.js",
+  "module": "./PaginationSimple.esm.js",
+  "private": true
+}

package/dist/Poster/Poster.cjs.d.ts

@@ -1,81 +1 @@
-import React from "react";
-import { FC, ReactNode } from "react";
-import { anchorPoints } from "../_shared/cjs/index-9483ad5f";
-import { loadingOptions } from "../_shared/cjs/Image-3bf4b4f3";
-declare const PosterImage: FC<PosterImageProps>;
-interface PosterImageProps {
-    /**
-     * Alternative text for the Poster.Image, shown if the image cannot be displayed. Consider avoiding this prop if the image is for decorative purposes only.
-     */
-    alt?: string;
-    /**
-     * Anchor point for the Poster.Image.
-     */
-    anchor?: typeof anchorPoints[number];
-    /**
-     * Loading behaviour of the Poster.Image.
-     */
-    loading?: typeof loadingOptions[number];
-    /**
-     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes) attribute for the Poster.Image. Required if `srcSet` is defined.
-     */
-    sizes?: string;
-    /**
-     * The `src` for the Poster.Image. Used if srcSet is not defined, or as a fallback.
-     */
-    src: string;
-    /**
-     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the Poster.Image. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes), i.e. `my-image-200.png 200w, my-image-200.png 200w`.
-     */
-    srcSet?: string;
-    /**
-     * Contents of the PosterImage.
-     */
-    children?: React.ReactNode;
-}
-declare const PosterVideo: FC<PosterVideoProps>;
-interface PosterVideoProps {
-    /**
-     * Anchor point for the Poster.Video,
-     */
-    anchor?: typeof anchorPoints[number];
-    /**
-     * Should the Poster.Video autoplay?
-     */
-    autoPlay?: boolean;
-    /**
-     * HTML video sources for the Poster.Video. [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video).
-     */
-    children: ReactNode;
-    /**
-     * Should the Poster.Video loop?
-     */
-    loop?: boolean;
-}
-/**
- * Use `Poster` to compose content on an image or video background.
- */
-declare const Poster: FC<PosterProps> & {
-    Image: typeof PosterImage;
-    Video: typeof PosterVideo;
-};
-interface PosterProps {
-    /**
-     * Poster background to overlay content on top of. Must be one of Poster.Image or Poster.Video.
-     */
-    background: ReactNode;
-    /**
-     * Contents of the Poster. Each item will be wrapped in an PosterItem component.
-     */
-    children: ReactNode;
-    /**
-     * Apply an overlay to the Poster background, e.g. a scrim gradient for text legibility.
-     */
-    overlay?: boolean;
-    /**
-     * The background surface colour to show behind the Poster content before it loads.
-     * If using `overlay`, the gradient will match the surface.
-     */
-    surface?: "darker" | "lighter";
-}
-export { Poster };
+export { Poster } from "../_shared/cjs/Poster-faea1ad3";

package/dist/Poster/Poster.cjs.js

@@ -2,51 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
-var index = require('../_shared/cjs/index-45bfb67b.js');
-var React = require('react');
-var Surface = require('../_shared/cjs/Surface-6da0a78e.js');
-var Image = require('../_shared/cjs/Image-3bf4b4f3.js');
-var suffixModifier = require('../_shared/cjs/suffix-modifier-1ee2da04.js');
+var Poster = require('../_shared/cjs/Poster-faea1ad3.js');
+require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
+require('../_shared/cjs/index-45bfb67b.js');
+require('react');
+require('../_shared/cjs/Surface-b7c51b2b.js');
+require('../_shared/cjs/Image-0e393cbf.js');
+require('../_shared/cjs/suffix-modifier-1ee2da04.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var PosterImage = function (_a) {
-    var alt = _a.alt, _b = _a.anchor, anchor = _b === void 0 ? "C" : _b, loading = _a.loading, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, props = filterDataAttrs.__rest(_a, ["alt", "anchor", "loading", "sizes", "src", "srcSet"]);
-    return (React__default["default"].createElement(Image.Image, filterDataAttrs.__assign({ alt: alt, anchor: anchor, fit: "cover", loading: loading, sizes: sizes, src: src, srcSet: srcSet }, props)));
-};
-PosterImage.displayName = "Poster.Image";
-
-var PosterVideo = function (_a) {
-    var _b;
-    var _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, _d = _a.autoPlay, autoPlay = _d === void 0 ? true : _d, children = _a.children, _e = _a.loop, loop = _e === void 0 ? true : _e, props = filterDataAttrs.__rest(_a, ["anchor", "autoPlay", "children", "loop"]);
-    return (React__default["default"].createElement("video", filterDataAttrs.__assign({ className: index.classNames((_b = {
-                "arc-PosterVideo": true
-            },
-            _b[suffixModifier.suffixModifier("arc-PosterVideo--anchor", anchor)] = anchor,
-            _b)), autoPlay: autoPlay, muted: true, loop: loop }, filterDataAttrs.filterDataAttrs(props)), children));
-};
-PosterVideo.displayName = "Poster.Video";
-
-/**
- * Use `Poster` to compose content on an image or video background.
- */
-var Poster = function (_a) {
-    var background = _a.background, children = _a.children, _b = _a.overlay, overlay = _b === void 0 ? true : _b, _c = _a.surface, surface = _c === void 0 ? "darker" : _c, props = filterDataAttrs.__rest(_a, ["background", "children", "overlay", "surface"]);
-    return (React__default["default"].createElement(Surface.Surface, { background: surface },
-        React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames({
-                "arc-Poster": true,
-                "arc-Poster--overlay": overlay,
-                "arc-Poster--overlayLight": surface === "lighter"
-            }) }, filterDataAttrs.filterDataAttrs(props)),
-            React__default["default"].createElement("div", { className: "arc-Poster-backgroundWrapper" }, background),
-            React__default["default"].createElement("div", { className: "arc-Poster-body" }, children))));
-};
-PosterImage.displayName = "Poster.Image";
-Poster.Image = PosterImage;
-PosterVideo.displayName = "Poster.Video";
-Poster.Video = PosterVideo;
-
-exports.Poster = Poster;
+exports.Poster = Poster.Poster;

package/dist/Poster/Poster.esm.d.ts

@@ -1,81 +1 @@
-import React from "react";
-import { FC, ReactNode } from "react";
-import { anchorPoints } from "../_shared/esm/index-9483ad5f";
-import { loadingOptions } from "../_shared/esm/Image-3596ce55";
-declare const PosterImage: FC<PosterImageProps>;
-interface PosterImageProps {
-    /**
-     * Alternative text for the Poster.Image, shown if the image cannot be displayed. Consider avoiding this prop if the image is for decorative purposes only.
-     */
-    alt?: string;
-    /**
-     * Anchor point for the Poster.Image.
-     */
-    anchor?: typeof anchorPoints[number];
-    /**
-     * Loading behaviour of the Poster.Image.
-     */
-    loading?: typeof loadingOptions[number];
-    /**
-     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes) attribute for the Poster.Image. Required if `srcSet` is defined.
-     */
-    sizes?: string;
-    /**
-     * The `src` for the Poster.Image. Used if srcSet is not defined, or as a fallback.
-     */
-    src: string;
-    /**
-     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the Poster.Image. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes), i.e. `my-image-200.png 200w, my-image-200.png 200w`.
-     */
-    srcSet?: string;
-    /**
-     * Contents of the PosterImage.
-     */
-    children?: React.ReactNode;
-}
-declare const PosterVideo: FC<PosterVideoProps>;
-interface PosterVideoProps {
-    /**
-     * Anchor point for the Poster.Video,
-     */
-    anchor?: typeof anchorPoints[number];
-    /**
-     * Should the Poster.Video autoplay?
-     */
-    autoPlay?: boolean;
-    /**
-     * HTML video sources for the Poster.Video. [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video).
-     */
-    children: ReactNode;
-    /**
-     * Should the Poster.Video loop?
-     */
-    loop?: boolean;
-}
-/**
- * Use `Poster` to compose content on an image or video background.
- */
-declare const Poster: FC<PosterProps> & {
-    Image: typeof PosterImage;
-    Video: typeof PosterVideo;
-};
-interface PosterProps {
-    /**
-     * Poster background to overlay content on top of. Must be one of Poster.Image or Poster.Video.
-     */
-    background: ReactNode;
-    /**
-     * Contents of the Poster. Each item will be wrapped in an PosterItem component.
-     */
-    children: ReactNode;
-    /**
-     * Apply an overlay to the Poster background, e.g. a scrim gradient for text legibility.
-     */
-    overlay?: boolean;
-    /**
-     * The background surface colour to show behind the Poster content before it loads.
-     * If using `overlay`, the gradient will match the surface.
-     */
-    surface?: "darker" | "lighter";
-}
-export { Poster };
+export { Poster } from "../_shared/esm/Poster-a83ae770";

package/dist/Poster/Poster.esm.js

@@ -1,44 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-afdb7d32.js';
-import { c as classNames } from '../_shared/esm/index-2ae58626.js';
-import React__default from 'react';
-import { S as Surface } from '../_shared/esm/Surface-bb100ef8.js';
-import { I as Image } from '../_shared/esm/Image-3596ce55.js';
-import { s as suffixModifier } from '../_shared/esm/suffix-modifier-7e640670.js';
-
-var PosterImage = function (_a) {
-    var alt = _a.alt, _b = _a.anchor, anchor = _b === void 0 ? "C" : _b, loading = _a.loading, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, props = __rest(_a, ["alt", "anchor", "loading", "sizes", "src", "srcSet"]);
-    return (React__default.createElement(Image, __assign({ alt: alt, anchor: anchor, fit: "cover", loading: loading, sizes: sizes, src: src, srcSet: srcSet }, props)));
-};
-PosterImage.displayName = "Poster.Image";
-
-var PosterVideo = function (_a) {
-    var _b;
-    var _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, _d = _a.autoPlay, autoPlay = _d === void 0 ? true : _d, children = _a.children, _e = _a.loop, loop = _e === void 0 ? true : _e, props = __rest(_a, ["anchor", "autoPlay", "children", "loop"]);
-    return (React__default.createElement("video", __assign({ className: classNames((_b = {
-                "arc-PosterVideo": true
-            },
-            _b[suffixModifier("arc-PosterVideo--anchor", anchor)] = anchor,
-            _b)), autoPlay: autoPlay, muted: true, loop: loop }, filterDataAttrs(props)), children));
-};
-PosterVideo.displayName = "Poster.Video";
-
-/**
- * Use `Poster` to compose content on an image or video background.
- */
-var Poster = function (_a) {
-    var background = _a.background, children = _a.children, _b = _a.overlay, overlay = _b === void 0 ? true : _b, _c = _a.surface, surface = _c === void 0 ? "darker" : _c, props = __rest(_a, ["background", "children", "overlay", "surface"]);
-    return (React__default.createElement(Surface, { background: surface },
-        React__default.createElement("div", __assign({ className: classNames({
-                "arc-Poster": true,
-                "arc-Poster--overlay": overlay,
-                "arc-Poster--overlayLight": surface === "lighter"
-            }) }, filterDataAttrs(props)),
-            React__default.createElement("div", { className: "arc-Poster-backgroundWrapper" }, background),
-            React__default.createElement("div", { className: "arc-Poster-body" }, children))));
-};
-PosterImage.displayName = "Poster.Image";
-Poster.Image = PosterImage;
-PosterVideo.displayName = "Poster.Video";
-Poster.Video = PosterVideo;
-
-export { Poster };
+export { P as Poster } from '../_shared/esm/Poster-a83ae770.js';
+import '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import '../_shared/esm/index-2ae58626.js';
+import 'react';
+import '../_shared/esm/Surface-dde51789.js';
+import '../_shared/esm/Image-3ed3863c.js';
+import '../_shared/esm/suffix-modifier-7e640670.js';

package/dist/ProgressBar/ProgressBar.cjs.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
 var index = require('../_shared/cjs/index-45bfb67b.js');
 var React$1 = require('react');
-var Text = require('../_shared/cjs/Text-6f2827e6.js');
-var Heading = require('../_shared/cjs/Heading-d45f6a7f.js');
+var Text = require('../_shared/cjs/Text-555a29a4.js');
+var Heading = require('../_shared/cjs/Heading-ed1cb455.js');
 var VerticalSpace = require('../_shared/cjs/VerticalSpace-86f697e7.js');
-var Icon = require('../_shared/cjs/Icon-9ae8dbe1.js');
-var Surface = require('../_shared/cjs/Surface-6da0a78e.js');
+var Icon = require('../_shared/cjs/Icon-e1dd45eb.js');
+var Surface = require('../_shared/cjs/Surface-b7c51b2b.js');
 var BtIconTickAlt2Px = require('../_shared/cjs/BtIconTickAlt2Px-bdf06f8c.js');
 var BtIconCrossAlt2Px = require('../_shared/cjs/BtIconCrossAlt2Px-30dc2688.js');
 require('../_shared/cjs/suffix-modifier-1ee2da04.js');

package/dist/ProgressBar/ProgressBar.esm.js

@@ -1,11 +1,11 @@
 import { a as __assign } from '../_shared/esm/filter-data-attrs-afdb7d32.js';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
 import React__default, { useContext } from 'react';
-import { T as Text } from '../_shared/esm/Text-00e9743b.js';
-import { H as Heading } from '../_shared/esm/Heading-b61432fb.js';
+import { T as Text } from '../_shared/esm/Text-14deb70e.js';
+import { H as Heading } from '../_shared/esm/Heading-ee6bec51.js';
 import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-93980c9c.js';
-import { I as Icon } from '../_shared/esm/Icon-fd247973.js';
-import { C as Context } from '../_shared/esm/Surface-bb100ef8.js';
+import { I as Icon } from '../_shared/esm/Icon-c1af47bc.js';
+import { C as Context } from '../_shared/esm/Surface-dde51789.js';
 import { B as BtIconTickAlt2Px_2 } from '../_shared/esm/BtIconTickAlt2Px-da97e9ae.js';
 import { B as BtIconCrossAlt2Px_2 } from '../_shared/esm/BtIconCrossAlt2Px-a6a9f431.js';
 import '../_shared/esm/suffix-modifier-7e640670.js';

package/dist/ProgressStepper/ProgressStepper.cjs.d.ts

@@ -0,0 +1,89 @@
+import { FC, ReactNode } from "react";
+type ProgressStatus = "completed" | "current" | "warning" | "error" | "todo";
+declare const ProgressStepperItem: FC<ProgressStepperItemProps>;
+interface ProgressStepperItemProps {
+    /**
+     * Determine a title for `<ProgressStepper.Item />`
+     */
+    title: string;
+    /**
+     * Determine a title for `<ProgressStepper.Item />`
+     */
+    titleHref?: string;
+    /**
+     * Text to override `linkTitle` with additional, more precise information
+     * specifically for screen reader users.
+     */
+    ariaLabel?: string;
+    /**
+     * Execute a function on title click `<ProgressStepper.Item />`
+     */
+    onClick?: () => void;
+    /**
+     * Determine a sub title for `<ProgressStepper.Item />`
+     */
+    subTitle?: string;
+    /**
+     * Determine a direction for `<ProgressStepper.Item />`
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * Determine the position of the step `<ProgressStepper.Item />`
+     */
+    position?: "first" | "middle" | "last";
+    /**
+     * Determine a status for `<ProgressStepper.Item />`
+     */
+    status?: ProgressStatus;
+    /**
+     * Determine the size for `<ProgressStepper.Item />`
+     */
+    size?: "small" | "large";
+    /**
+     * Determine if `<ProgressStepper.Item /> should be Fluid`
+     */
+    isFluid?: boolean;
+    /**
+     * Determine the context `<ProgressStepper.Item /> should b`
+     */
+    previousStep?: ProgressStatus;
+    /**
+     * Determine if `<ProgressStepper.Item /> should have expandable content`
+     */
+    isExpandable?: boolean;
+    /**
+     * Determine what content to display in `<ProgressStepper.Item />. To use this option isExpandable must be `true``
+     */
+    stepContent?: ReactNode;
+    /**
+     * Determine if `stepContent` is hidden
+     */
+    isStepContentHidden?: boolean;
+}
+/** Use `ProgressStepper` to illustrate the progress of a specific task within a page, by displaying a step-by-step progress through the user journey. This is commonly used in multi-step processes or wizards.  */
+declare const ProgressStepper: FC<ProgressStepperProps> & {
+    Item: typeof ProgressStepperItem;
+};
+interface ProgressStepperProps {
+    /**
+     * Children of `<ProgressStepper />` should only contain `<ProgressStepper.Item />`
+     */
+    children?: ReactNode;
+    /**
+     * Determine a direction for `<ProgressStepper.Item />`
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * Determine the size for `<ProgressStepper.Item />`
+     */
+    size?: "small" | "large";
+    /**
+     * Determine if `<ProgressStepper.Item />` should be Fluid. Only appliciable for `horizontal direction.`
+     */
+    isFluid?: boolean;
+    /**
+     * Determine if `<ProgressStepper.Item />` should be able to expand. This only is appliciable when direction is set to vertical
+     */
+    isExpandable?: boolean;
+}
+export { ProgressStepper };