@arc-ui/components 11.3.0 → 11.4.0

package/dist/Button/Button.cjs.d.ts

@@ -1 +1 @@
-export { Button } from "../_shared/cjs/Button-b3a69953";
+export { Button } from "../_shared/cjs/Button-1af6868c";

package/dist/Button/Button.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Button = require('../_shared/cjs/Button-b3a69953.js');
+var Button = require('../_shared/cjs/Button-1af6868c.js');
 require('../_shared/cjs/index-78b35bc1.js');
 require('react');
 require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');

package/dist/Button/Button.esm.d.ts

@@ -1 +1 @@
-export { Button } from "../_shared/esm/Button-69439f8f";
+export { Button } from "../_shared/esm/Button-10700df4";

package/dist/Button/Button.esm.js

@@ -1,4 +1,4 @@
-export { B as Button } from '../_shared/esm/Button-69439f8f.js';
+export { B as Button } from '../_shared/esm/Button-10700df4.js';
 import '../_shared/esm/index-229fc864.js';
 import 'react';
 import '../_shared/esm/BtIconChevronRightMid-d9b11761.js';

package/dist/Card/Card.cjs.js

@@ -120,7 +120,7 @@ var CardLink = function (_a) {
         }), href: href, rel: target === "_blank" ? "noopener noreferrer" : undefined, tabIndex: isButton ? -1 : undefined, target: target }, index.filterDataAttrs(linkData)),
         React__default["default"].createElement("span", { className: "arc-Card-linkText" }, children),
         isButton && (React__default["default"].createElement("span", { className: "arc-Card-linkIcon" },
-            React__default["default"].createElement(Icon.Icon, { testId: "cardIcon", icon: BtIconChevronRightMid.BtIconChevronRightMid_2, size: 16 })))));
+            React__default["default"].createElement(Icon.Icon, { testId: "cardIcon", icon: BtIconChevronRightMid.BtIconChevronRightMid_2, size: 24 })))));
 };
 
 exports.Card = Card;

package/dist/Card/Card.esm.js

@@ -112,7 +112,7 @@ var CardLink = function (_a) {
         }), href: href, rel: target === "_blank" ? "noopener noreferrer" : undefined, tabIndex: isButton ? -1 : undefined, target: target }, filterDataAttrs(linkData)),
         React__default.createElement("span", { className: "arc-Card-linkText" }, children),
         isButton && (React__default.createElement("span", { className: "arc-Card-linkIcon" },
-            React__default.createElement(Icon, { testId: "cardIcon", icon: BtIconChevronRightMid_2, size: 16 })))));
+            React__default.createElement(Icon, { testId: "cardIcon", icon: BtIconChevronRightMid_2, size: 24 })))));
 };
 
 export { Card };

package/dist/ProgressBar/ProgressBar.cjs.d.ts

@@ -0,0 +1,47 @@
+import { FC } from "react";
+type ProgressBarState = "loading" | "error" | "success";
+type ProgressBarIcons = "refresh" | "cross" | "tick";
+declare const ProgressBar: FC<ProgressBarProps>;
+interface ProgressBarProps {
+    /**
+     * Label for screen readers.
+     */
+    ariaLabel: string;
+    /**
+     * Headline for the progress bar.
+     */
+    headline?: string;
+    /**
+     * Title for the progress bar, (e.g. an uploading file's name).
+     */
+    title?: string;
+    /**
+     * Percentage value for the progress bar (negative numbers are rounded to 0, numbers over 100 are rounded to 100).
+     */
+    value?: number;
+    /**
+     * Provide an additional informative description for the progress bar, or brand building slot for secondary messaging which can change over time with progress.
+     */
+    description?: string;
+    /**
+     * Value to display for the progress bar. This is fully customisable, and can be a percentage (15%) Time remaining (1m 15s remaining), proportion of data uploaded/to upload (100KB out of 256KB).
+     */
+    displayValue?: string;
+    /**
+     * State of the progress bar.
+     */
+    state?: ProgressBarState;
+    /**
+     * Sets progress bar to infinitely animate. Use if the progress of a given task cannot be known. The value prop will have no effect if this prop is set to true.
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Action for the progress bar.
+     */
+    action?: {
+        text: string;
+        action: () => void;
+        icon?: ProgressBarIcons;
+    };
+}
+export { ProgressBar };

package/dist/ProgressBar/ProgressBar.cjs.js

@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-78b35bc1.js');
+var index$1 = require('../_shared/cjs/index-45bfb67b.js');
+var React$2 = require('react');
+var Text = require('../_shared/cjs/Text-1d3844be.js');
+var Heading = require('../_shared/cjs/Heading-cc38c3ec.js');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-7aed88ab.js');
+var Icon = require('../_shared/cjs/Icon-719d13d4.js');
+var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+var BtIconTickAlt2Px = require('../_shared/cjs/BtIconTickAlt2Px-bdf06f8c.js');
+require('../_shared/cjs/suffix-modifier-edf7851e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$2);
+
+const React$1 = React__default["default"];
+const BtIconRefresh = props =>
+  /*#__PURE__*/ React$1.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$1.createElement("defs", null),
+    /*#__PURE__*/ React$1.createElement("path", {
+      d:
+        "M13.41077,21.99951a.5005.5005,0,0,0-.35743.8501l2.04609,2.08716A8.98732,8.98732,0,0,1,13.15332,7.46631a.50028.50028,0,1,0-.31641-.94922A9.98437,9.98437,0,0,0,15.127,25.93823l.00159.02881c.0011.01.02008.00128.03015.002L13.026,28.16846a.50036.50036,0,0,0,.71875.69629l3.28418-3.38819-3.26074-3.32715A.50106.50106,0,0,0,13.41077,21.99951Z",
+      fill: "currentColor"
+    }),
+    /*#__PURE__*/ React$1.createElement("path", {
+      d:
+        "M16.79028,6.04633,16.79,6.04077c-.0011-.01-.02008-.00128-.03015-.00195l2.13275-2.19946a.50036.50036,0,0,0-.71875-.69629L14.88965,6.53125,18.15039,9.8584a.50106.50106,0,0,0,.35742.1499.5005.5005,0,0,0,.35742-.8501L16.7951,7.04657a8.98484,8.98484,0,0,1,2.05646,17.47589.49982.49982,0,1,0,.31641.94824A9.98244,9.98244,0,0,0,16.79028,6.04633Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconRefresh_2 = BtIconRefresh;
+
+const React = React__default["default"];
+const BtIconCrossAlt2Px = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M17.41406,16l3.793-3.793A.99989.99989,0,0,0,19.793,10.793L16,14.58594l-3.793-3.793A.99989.99989,0,0,0,10.793,12.207L14.58594,16l-3.793,3.793A.99989.99989,0,1,0,12.207,21.207L16,17.41406l3.793,3.793A.99989.99989,0,0,0,21.207,19.793Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCrossAlt2Px_2 = BtIconCrossAlt2Px;
+
+var PROGRESS_BAR_ICON_MAP = {
+    refresh: BtIconRefresh_2,
+    tick: BtIconTickAlt2Px.BtIconTickAlt2Px_2,
+    cross: BtIconCrossAlt2Px_2
+};
+
+var getProgressBarProps = function (isIndeterminate, progressValue, ariaLabel) {
+    var commonProps = {
+        role: "progressbar",
+        "data-testid": "progressbar",
+        "aria-label": ariaLabel,
+        tabIndex: 0
+    };
+    var indeterminateProps = index.__assign(index.__assign({}, commonProps), { className: index$1.classNames("arc-ProgressBar-bar", "arc-ProgressBar-bar--indeterminate") });
+    var determinateProps = index.__assign(index.__assign({}, commonProps), { className: "arc-ProgressBar-bar", "aria-valuenow": progressValue, style: {
+            transform: "translateX(".concat(-100 + progressValue, "%)")
+        } });
+    return isIndeterminate ? indeterminateProps : determinateProps;
+};
+
+var ProgressBar = function (_a) {
+    var _b = _a.state, state = _b === void 0 ? "loading" : _b, _c = _a.value, value = _c === void 0 ? 0 : _c, _d = _a.isIndeterminate, isIndeterminate = _d === void 0 ? false : _d, headline = _a.headline, ariaLabel = _a.ariaLabel, action = _a.action, title = _a.title, description = _a.description, displayValue = _a.displayValue;
+    var surface = React$2.useContext(Surface.Context).surface;
+    var progressValue = Math.min(100, Math.max(0, value));
+    return (React__default["default"].createElement("div", { "data-testid": "progress", className: index$1.classNames("arc-ProgressBar", "arc-ProgressBar--".concat(state), {
+            "arc-ProgressBar--onDarkSurface": surface === "dark"
+        }) },
+        React__default["default"].createElement("div", { className: "arc-ProgressBar-titleDisplayValueContainer" },
+            React__default["default"].createElement("div", { className: "arc-ProgressBar-titleContainer" },
+                headline && React__default["default"].createElement(Heading.Heading, { size: "s" }, headline),
+                headline && title && React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "4" }),
+                title && React__default["default"].createElement(Text.Text, null, title)),
+            displayValue && (React__default["default"].createElement("div", { "data-testid": "display-value", className: "arc-ProgressBar-displayValueContainer" },
+                React__default["default"].createElement(Text.Text, null, displayValue)))),
+        React__default["default"].createElement("div", { className: "arc-ProgressBar-container" },
+            React__default["default"].createElement("div", { className: "arc-ProgressBar-outerBar" },
+                React__default["default"].createElement("div", index.__assign({}, getProgressBarProps(isIndeterminate, progressValue, ariaLabel)))),
+            description && (React__default["default"].createElement("div", { className: "arc-ProgressBar-description" },
+                React__default["default"].createElement(Text.Text, { tone: state !== "error" ? "supporting" : "default" }, description))),
+            action && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "8" }),
+                React__default["default"].createElement("button", { className: "arc-ProgressBar-actionButton", onClick: action.action },
+                    React__default["default"].createElement("div", { className: "arc-ProgressBar-actionContainer" },
+                        React__default["default"].createElement(Text.Text, null, action.text),
+                        action.icon && (React__default["default"].createElement("div", { className: "arc-ProgressBar-actionIcon" },
+                            React__default["default"].createElement(Icon.Icon, { icon: PROGRESS_BAR_ICON_MAP[action.icon], size: 24 }))))))))));
+};
+
+exports.ProgressBar = ProgressBar;

package/dist/ProgressBar/ProgressBar.esm.d.ts

@@ -0,0 +1,47 @@
+import { FC } from "react";
+type ProgressBarState = "loading" | "error" | "success";
+type ProgressBarIcons = "refresh" | "cross" | "tick";
+declare const ProgressBar: FC<ProgressBarProps>;
+interface ProgressBarProps {
+    /**
+     * Label for screen readers.
+     */
+    ariaLabel: string;
+    /**
+     * Headline for the progress bar.
+     */
+    headline?: string;
+    /**
+     * Title for the progress bar, (e.g. an uploading file's name).
+     */
+    title?: string;
+    /**
+     * Percentage value for the progress bar (negative numbers are rounded to 0, numbers over 100 are rounded to 100).
+     */
+    value?: number;
+    /**
+     * Provide an additional informative description for the progress bar, or brand building slot for secondary messaging which can change over time with progress.
+     */
+    description?: string;
+    /**
+     * Value to display for the progress bar. This is fully customisable, and can be a percentage (15%) Time remaining (1m 15s remaining), proportion of data uploaded/to upload (100KB out of 256KB).
+     */
+    displayValue?: string;
+    /**
+     * State of the progress bar.
+     */
+    state?: ProgressBarState;
+    /**
+     * Sets progress bar to infinitely animate. Use if the progress of a given task cannot be known. The value prop will have no effect if this prop is set to true.
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Action for the progress bar.
+     */
+    action?: {
+        text: string;
+        action: () => void;
+        icon?: ProgressBarIcons;
+    };
+}
+export { ProgressBar };

package/dist/ProgressBar/ProgressBar.esm.js

@@ -0,0 +1,105 @@
+import { a as __assign } from '../_shared/esm/index-229fc864.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-6b958ad8.js';
+import { H as Heading } from '../_shared/esm/Heading-eb1e42db.js';
+import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-3579b20e.js';
+import { I as Icon } from '../_shared/esm/Icon-61f7237a.js';
+import { C as Context } from '../_shared/esm/Surface-bf201530.js';
+import { B as BtIconTickAlt2Px_2 } from '../_shared/esm/BtIconTickAlt2Px-da97e9ae.js';
+import '../_shared/esm/suffix-modifier-f5e28822.js';
+
+const React$1 = React__default;
+const BtIconRefresh = props =>
+  /*#__PURE__*/ React$1.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$1.createElement("defs", null),
+    /*#__PURE__*/ React$1.createElement("path", {
+      d:
+        "M13.41077,21.99951a.5005.5005,0,0,0-.35743.8501l2.04609,2.08716A8.98732,8.98732,0,0,1,13.15332,7.46631a.50028.50028,0,1,0-.31641-.94922A9.98437,9.98437,0,0,0,15.127,25.93823l.00159.02881c.0011.01.02008.00128.03015.002L13.026,28.16846a.50036.50036,0,0,0,.71875.69629l3.28418-3.38819-3.26074-3.32715A.50106.50106,0,0,0,13.41077,21.99951Z",
+      fill: "currentColor"
+    }),
+    /*#__PURE__*/ React$1.createElement("path", {
+      d:
+        "M16.79028,6.04633,16.79,6.04077c-.0011-.01-.02008-.00128-.03015-.00195l2.13275-2.19946a.50036.50036,0,0,0-.71875-.69629L14.88965,6.53125,18.15039,9.8584a.50106.50106,0,0,0,.35742.1499.5005.5005,0,0,0,.35742-.8501L16.7951,7.04657a8.98484,8.98484,0,0,1,2.05646,17.47589.49982.49982,0,1,0,.31641.94824A9.98244,9.98244,0,0,0,16.79028,6.04633Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconRefresh_2 = BtIconRefresh;
+
+const React = React__default;
+const BtIconCrossAlt2Px = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M17.41406,16l3.793-3.793A.99989.99989,0,0,0,19.793,10.793L16,14.58594l-3.793-3.793A.99989.99989,0,0,0,10.793,12.207L14.58594,16l-3.793,3.793A.99989.99989,0,1,0,12.207,21.207L16,17.41406l3.793,3.793A.99989.99989,0,0,0,21.207,19.793Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCrossAlt2Px_2 = BtIconCrossAlt2Px;
+
+var PROGRESS_BAR_ICON_MAP = {
+    refresh: BtIconRefresh_2,
+    tick: BtIconTickAlt2Px_2,
+    cross: BtIconCrossAlt2Px_2
+};
+
+var getProgressBarProps = function (isIndeterminate, progressValue, ariaLabel) {
+    var commonProps = {
+        role: "progressbar",
+        "data-testid": "progressbar",
+        "aria-label": ariaLabel,
+        tabIndex: 0
+    };
+    var indeterminateProps = __assign(__assign({}, commonProps), { className: classNames("arc-ProgressBar-bar", "arc-ProgressBar-bar--indeterminate") });
+    var determinateProps = __assign(__assign({}, commonProps), { className: "arc-ProgressBar-bar", "aria-valuenow": progressValue, style: {
+            transform: "translateX(".concat(-100 + progressValue, "%)")
+        } });
+    return isIndeterminate ? indeterminateProps : determinateProps;
+};
+
+var ProgressBar = function (_a) {
+    var _b = _a.state, state = _b === void 0 ? "loading" : _b, _c = _a.value, value = _c === void 0 ? 0 : _c, _d = _a.isIndeterminate, isIndeterminate = _d === void 0 ? false : _d, headline = _a.headline, ariaLabel = _a.ariaLabel, action = _a.action, title = _a.title, description = _a.description, displayValue = _a.displayValue;
+    var surface = useContext(Context).surface;
+    var progressValue = Math.min(100, Math.max(0, value));
+    return (React__default.createElement("div", { "data-testid": "progress", className: classNames("arc-ProgressBar", "arc-ProgressBar--".concat(state), {
+            "arc-ProgressBar--onDarkSurface": surface === "dark"
+        }) },
+        React__default.createElement("div", { className: "arc-ProgressBar-titleDisplayValueContainer" },
+            React__default.createElement("div", { className: "arc-ProgressBar-titleContainer" },
+                headline && React__default.createElement(Heading, { size: "s" }, headline),
+                headline && title && React__default.createElement(VerticalSpace, { size: "4" }),
+                title && React__default.createElement(Text, null, title)),
+            displayValue && (React__default.createElement("div", { "data-testid": "display-value", className: "arc-ProgressBar-displayValueContainer" },
+                React__default.createElement(Text, null, displayValue)))),
+        React__default.createElement("div", { className: "arc-ProgressBar-container" },
+            React__default.createElement("div", { className: "arc-ProgressBar-outerBar" },
+                React__default.createElement("div", __assign({}, getProgressBarProps(isIndeterminate, progressValue, ariaLabel)))),
+            description && (React__default.createElement("div", { className: "arc-ProgressBar-description" },
+                React__default.createElement(Text, { tone: state !== "error" ? "supporting" : "default" }, description))),
+            action && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(VerticalSpace, { size: "8" }),
+                React__default.createElement("button", { className: "arc-ProgressBar-actionButton", onClick: action.action },
+                    React__default.createElement("div", { className: "arc-ProgressBar-actionContainer" },
+                        React__default.createElement(Text, null, action.text),
+                        action.icon && (React__default.createElement("div", { className: "arc-ProgressBar-actionIcon" },
+                            React__default.createElement(Icon, { icon: PROGRESS_BAR_ICON_MAP[action.icon], size: 24 }))))))))));
+};
+
+export { ProgressBar };

package/dist/ProgressBar/package.json

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

package/dist/SiteHeader/SiteHeader.cjs.js

@@ -7,7 +7,7 @@ var index_es = require('../_shared/cjs/index.es-77def0c9.js');
 var index$1 = require('../_shared/cjs/index-45bfb67b.js');
 var React = require('react');
 var BrandLogo = require('../_shared/cjs/BrandLogo-3c6102ef.js');
-var Button = require('../_shared/cjs/Button-b3a69953.js');
+var Button = require('../_shared/cjs/Button-1af6868c.js');
 var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
 var BtIconChevronDown2Px = require('../_shared/cjs/BtIconChevronDown2Px-8fb4e2eb.js');
 var handleLinkClick = require('../_shared/cjs/handle-link-click-17a44cf4.js');

package/dist/SiteHeader/SiteHeader.esm.js

@@ -3,7 +3,7 @@ import { u as useMediaQuery, a as ArcBreakpointL } from '../_shared/esm/index.es
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
 import React__default, { useState, useEffect, Fragment, useContext, useRef, createContext } from 'react';
 import { B as BrandLogo } from '../_shared/esm/BrandLogo-4f13fe85.js';
-import { B as Button } from '../_shared/esm/Button-69439f8f.js';
+import { B as Button } from '../_shared/esm/Button-10700df4.js';
 import { S as Surface } from '../_shared/esm/Surface-bf201530.js';
 import { B as BtIconChevronDown2Px_2 } from '../_shared/esm/BtIconChevronDown2Px-782876e2.js';
 import { h as handleLinkClick } from '../_shared/esm/handle-link-click-f64f55a2.js';

package/dist/Switch/Switch.cjs.js

@@ -9,7 +9,7 @@ var Icon = require('../_shared/cjs/Icon-719d13d4.js');
 var BtIconTickAlt2Px = require('../_shared/cjs/BtIconTickAlt2Px-bdf06f8c.js');
 var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
 var FormControl = require('../_shared/cjs/FormControl-d4d9c665.js');
-var VerticalSpace = require('../_shared/cjs/VerticalSpace-65ad083c.js');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-7aed88ab.js');
 var Text = require('../_shared/cjs/Text-1d3844be.js');
 require('react-dom');
 require('../_shared/cjs/index-78b35bc1.js');

package/dist/Switch/Switch.esm.js

@@ -5,7 +5,7 @@ import { I as Icon } from '../_shared/esm/Icon-61f7237a.js';
 import { B as BtIconTickAlt2Px_2 } from '../_shared/esm/BtIconTickAlt2Px-da97e9ae.js';
 import { C as Context } from '../_shared/esm/Surface-bf201530.js';
 import { F as FormControl } from '../_shared/esm/FormControl-2cb96de7.js';
-import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-6b4f5e50.js';
+import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-3579b20e.js';
 import { T as Text } from '../_shared/esm/Text-6b958ad8.js';
 import 'react-dom';
 import '../_shared/esm/index-229fc864.js';

package/dist/Tag/Tag.cjs.d.ts

@@ -0,0 +1,33 @@
+import { FC, ReactNode } from "react";
+import { ArcIcon } from "../_shared/cjs/arc-icon-17594b2f";
+/**
+ * use `Tag` to promote features and manage filtering.
+ */
+declare const Tag: FC<TagProps>;
+interface TagProps {
+    /**
+     * Content to render within the Tag
+     */
+    children: ReactNode;
+    /**
+     * Determine if the Tag is removable.
+     */
+    isRemovable?: boolean;
+    /**
+     * Provide a link for the tag
+     */
+    link?: string;
+    /**
+     * Determine a icon to display within the tag.
+     */
+    icon?: ArcIcon;
+    /**
+     * onClick Handler for Tag
+     */
+    onClick?: () => void;
+    /**
+     * Execute function on remove
+     */
+    onRemove?: () => void;
+}
+export { Tag };

package/dist/Tag/Tag.cjs.js

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-78b35bc1.js');
+var React$1 = require('react');
+var index$1 = require('../_shared/cjs/index-45bfb67b.js');
+var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+var Icon = require('../_shared/cjs/Icon-719d13d4.js');
+require('../_shared/cjs/suffix-modifier-edf7851e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+
+const React = React__default["default"];
+const BtIconCross = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
+      fill: "currentColor"
+    }),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M20.85352,11.14648a.49983.49983,0,0,0-.707,0L16,15.293l-4.14648-4.14649a.5.5,0,0,0-.707.707L15.293,16l-4.14649,4.14648a.5.5,0,1,0,.707.707L16,16.707l4.14648,4.14649a.5.5,0,0,0,.707-.707L16.707,16l4.14649-4.14648A.49983.49983,0,0,0,20.85352,11.14648Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCross_2 = BtIconCross;
+
+/**
+ * use `Tag` to promote features and manage filtering.
+ */
+var Tag = function (_a) {
+    var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, props = index.__rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove"]);
+    var surface = React$1.useContext(Surface.Context).surface;
+    var _b = React$1.useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
+    var onRemoveHandler = function () {
+        setIsRemoved(function (p) { return !p; });
+        onRemove && onRemove();
+    };
+    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames("arc-Tag", {
+            "arc-Tag--onDarkSurface": surface === "dark",
+            "arc-Tag--isRemovable": isRemovable,
+            "arc-Tag--hasIcon": icon,
+            "arc-Tag--hasLink": link || onClick,
+            "arc-Tag--removed": isRemoved
+        }) }, (isRemoved && { "aria-hidden": true }), index.filterDataAttrs(props)),
+        link ? (React__default["default"].createElement("a", { className: "arc-Tag-content", href: link, tabIndex: 0 },
+            icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
+                React__default["default"].createElement(Icon.Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
+            React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))) : (React__default["default"].createElement(React__default["default"].Fragment, null, onClick ? (React__default["default"].createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
+            icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
+                React__default["default"].createElement(Icon.Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
+            React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))) : (React__default["default"].createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
+            icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
+                React__default["default"].createElement(Icon.Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
+            React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))))),
+        isRemovable && (React__default["default"].createElement("button", { className: "arc-Tag-icon arc-Tag-icon--removable", onClick: onRemoveHandler, "data-testid": "arc-Tag-icon-removable", "aria-live": "polite", "aria-roledescription": "remove tag" },
+            React__default["default"].createElement(Icon.Icon, { icon: BtIconCross_2, color: "brand", size: 20 })))));
+};
+
+exports.Tag = Tag;

package/dist/Tag/Tag.esm.d.ts

@@ -0,0 +1,33 @@
+import { FC, ReactNode } from "react";
+import { ArcIcon } from "../_shared/esm/arc-icon-17594b2f";
+/**
+ * use `Tag` to promote features and manage filtering.
+ */
+declare const Tag: FC<TagProps>;
+interface TagProps {
+    /**
+     * Content to render within the Tag
+     */
+    children: ReactNode;
+    /**
+     * Determine if the Tag is removable.
+     */
+    isRemovable?: boolean;
+    /**
+     * Provide a link for the tag
+     */
+    link?: string;
+    /**
+     * Determine a icon to display within the tag.
+     */
+    icon?: ArcIcon;
+    /**
+     * onClick Handler for Tag
+     */
+    onClick?: () => void;
+    /**
+     * Execute function on remove
+     */
+    onRemove?: () => void;
+}
+export { Tag };

package/dist/Tag/Tag.esm.js

@@ -0,0 +1,65 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
+import React__default, { useContext, useState } from 'react';
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
+import { C as Context } from '../_shared/esm/Surface-bf201530.js';
+import { I as Icon } from '../_shared/esm/Icon-61f7237a.js';
+import '../_shared/esm/suffix-modifier-f5e28822.js';
+
+const React = React__default;
+const BtIconCross = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
+      fill: "currentColor"
+    }),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M20.85352,11.14648a.49983.49983,0,0,0-.707,0L16,15.293l-4.14648-4.14649a.5.5,0,0,0-.707.707L15.293,16l-4.14649,4.14648a.5.5,0,1,0,.707.707L16,16.707l4.14648,4.14649a.5.5,0,0,0,.707-.707L16.707,16l4.14649-4.14648A.49983.49983,0,0,0,20.85352,11.14648Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCross_2 = BtIconCross;
+
+/**
+ * use `Tag` to promote features and manage filtering.
+ */
+var Tag = function (_a) {
+    var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, props = __rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove"]);
+    var surface = useContext(Context).surface;
+    var _b = useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
+    var onRemoveHandler = function () {
+        setIsRemoved(function (p) { return !p; });
+        onRemove && onRemove();
+    };
+    return (React__default.createElement("div", __assign({ className: classNames("arc-Tag", {
+            "arc-Tag--onDarkSurface": surface === "dark",
+            "arc-Tag--isRemovable": isRemovable,
+            "arc-Tag--hasIcon": icon,
+            "arc-Tag--hasLink": link || onClick,
+            "arc-Tag--removed": isRemoved
+        }) }, (isRemoved && { "aria-hidden": true }), filterDataAttrs(props)),
+        link ? (React__default.createElement("a", { className: "arc-Tag-content", href: link, tabIndex: 0 },
+            icon && (React__default.createElement("span", { className: "arc-Tag-icon" },
+                React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
+            React__default.createElement("div", { className: "arc-Tag-label" }, children))) : (React__default.createElement(React__default.Fragment, null, onClick ? (React__default.createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
+            icon && (React__default.createElement("span", { className: "arc-Tag-icon" },
+                React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
+            React__default.createElement("div", { className: "arc-Tag-label" }, children))) : (React__default.createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
+            icon && (React__default.createElement("span", { className: "arc-Tag-icon" },
+                React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
+            React__default.createElement("div", { className: "arc-Tag-label" }, children))))),
+        isRemovable && (React__default.createElement("button", { className: "arc-Tag-icon arc-Tag-icon--removable", onClick: onRemoveHandler, "data-testid": "arc-Tag-icon-removable", "aria-live": "polite", "aria-roledescription": "remove tag" },
+            React__default.createElement(Icon, { icon: BtIconCross_2, color: "brand", size: 20 })))));
+};
+
+export { Tag };

package/dist/Tag/package.json

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

package/dist/VerticalSpace/VerticalSpace.cjs.d.ts

@@ -1 +1 @@
-export { VerticalSpace } from "../_shared/cjs/VerticalSpace-65ad083c";
+export { VerticalSpace } from "../_shared/cjs/VerticalSpace-7aed88ab";

package/dist/VerticalSpace/VerticalSpace.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var VerticalSpace = require('../_shared/cjs/VerticalSpace-65ad083c.js');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-7aed88ab.js');
 require('../_shared/cjs/index-78b35bc1.js');
 require('../_shared/cjs/index-45bfb67b.js');
 require('react');