@arc-ui/components 11.6.0 → 11.8.0

package/dist/Alert/Alert.cjs.d.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { HeadingProps } from "../_shared/cjs/Heading-d45f6a7f";
+import { HeadingProps } from "../_shared/cjs/Heading-e3332dcf";
 import { ArcIcon } from "../_shared/cjs/arc-icon-17594b2f";
 /** use `Alert` to display persistent messages, either permanent or dismissible. */
 declare const Alert: FC<AlertProps>;

package/dist/Alert/Alert.cjs.js

@@ -3,115 +3,36 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
-var React$3 = require('react');
+var React = require('react');
 var index = require('../_shared/cjs/index-45bfb67b.js');
-var Surface = require('../_shared/cjs/Surface-6da0a78e.js');
-var Icon = require('../_shared/cjs/Icon-9ae8dbe1.js');
-var Heading = require('../_shared/cjs/Heading-d45f6a7f.js');
-var Text = require('../_shared/cjs/Text-6f2827e6.js');
+var Surface = require('../_shared/cjs/Surface-b7c51b2b.js');
+var Icon = require('../_shared/cjs/Icon-e1dd45eb.js');
+var Heading = require('../_shared/cjs/Heading-e3332dcf.js');
+var Text = require('../_shared/cjs/Text-fa447e2d.js');
 var BtIconCrossAlt2Px = require('../_shared/cjs/BtIconCrossAlt2Px-30dc2688.js');
+var BtIconTick = require('../_shared/cjs/BtIconTick-42fcc5ec.js');
 var BtIconAlert = require('../_shared/cjs/BtIconAlert-637db790.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$3);
-
-const React$2 = React__default["default"];
-const BtIconNotification = props =>
-  /*#__PURE__*/ React$2.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
-      },
-      props
-    ),
-    /*#__PURE__*/ React$2.createElement("defs", null),
-    /*#__PURE__*/ React$2.createElement("path", {
-      d:
-        "M24.50977,21.98867,24,21.99014,23.99414,13.975a7.98466,7.98466,0,0,0-6.66046-7.86011,1.46733,1.46733,0,0,0,.15655-.65063,1.48633,1.48633,0,1,0-2.97265,0,1.46732,1.46732,0,0,0,.15826.65369,7.9849,7.9849,0,0,0-6.63971,7.857v8.0166l-.50781-.00293a1.50464,1.50464,0,1,0,0,3.00928h3.45679a1.997,1.997,0,0,0,3.99365,0h9.532a1.50464,1.50464,0,1,0-.001-3.00928ZM16.00391,4.97793a.48633.48633,0,1,1-.48633.48633A.48668.48668,0,0,1,16.00391,4.97793ZM12.98242,25.97158a.998.998,0,0,1-.99469-.97363h1.98841A.99785.99785,0,0,1,12.98242,25.97158ZM24.51074,23.998H7.52832a.50465.50465,0,0,1-.00488-1.00928l1.51269.00293V13.975a6.979,6.979,0,0,1,13.958.00049L23,22.99209l1.51074-.00342a.50464.50464,0,1,1,0,1.00928Z",
-      fill: "currentColor"
-    })
-  );
-var BtIconNotification_2 = BtIconNotification;
-
-const React$1 = React__default["default"];
-const BtIconAlertTriangle = 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", {
-      fill: "currentColor",
-      d: "M16 21.99335A1 1 0 1 0 16 23.99335 1 1 0 1 0 16 21.99335z"
-    }),
-    /*#__PURE__*/ React$1.createElement("path", {
-      d:
-        "M16.00488,20.00977a.49972.49972,0,0,0,.5-.5l.002-9.00977a.5.5,0,0,0-1,0l-.002,9.00977A.5.5,0,0,0,16.00488,20.00977Z",
-      fill: "currentColor"
-    }),
-    /*#__PURE__*/ React$1.createElement("path", {
-      d:
-        "M29.83691,26.21,17.041,4.5332A1.15617,1.15617,0,0,0,16.03711,3.959h-.001a1.159,1.159,0,0,0-1.00586.57373L2.23535,26.21045a1.16676,1.16676,0,0,0,1.00488,1.76074H28.83105A1.16843,1.16843,0,0,0,29.83691,26.21Zm-.86035.67725a.164.164,0,0,1-.14551.084H3.24023a.16737.16737,0,0,1-.14355-.25244L15.8916,5.0415a.167.167,0,0,1,.28809,0l12.7959,21.67627A.16531.16531,0,0,1,28.97656,26.88721Z",
-      fill: "currentColor"
-    })
-  );
-var BtIconAlertTriangle_2 = BtIconAlertTriangle;
-
-const React = React__default["default"];
-const BtIconTick = 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(
-      "g",
-      {
-        "data-name": "Icons"
-      },
-      /*#__PURE__*/ React.createElement("path", {
-        d:
-          "M16,3A13,13,0,1,1,3,16,12.9741,12.9741,0,0,1,16,3m0-1A14,14,0,1,0,30,16,14.04116,14.04116,0,0,0,16,2Z",
-        fill: "currentColor"
-      }),
-      /*#__PURE__*/ React.createElement("path", {
-        d:
-          "M13.5,21.2,9.1,16.8a.495.495,0,1,1,.7-.7l3.6,3.6L22,11.1a.495.495,0,1,1,.7.7Z",
-        fill: "currentColor"
-      })
-    )
-  );
-var BtIconTick_2 = BtIconTick;
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /** use `Alert` to display persistent messages, either permanent or dismissible. */
 var Alert = function (_a) {
     var _b;
     var heading = _a.heading, description = _a.description, link = _a.link, linkText = _a.linkText, linkAriaLabel = _a.linkAriaLabel, type = _a.type, _c = _a.status, status = _c === void 0 ? "general" : _c, isDismissable = _a.isDismissable, headingLevel = _a.headingLevel, onDismiss = _a.onDismiss, onLinkClick = _a.onLinkClick, icon = _a.icon, props = filterDataAttrs.__rest(_a, ["heading", "description", "link", "linkText", "linkAriaLabel", "type", "status", "isDismissable", "headingLevel", "onDismiss", "onLinkClick", "icon"]);
-    var surface = React$3.useContext(Surface.Context).surface;
-    var _d = React$3.useState(false), isDismissed = _d[0], setIsDismissed = _d[1];
+    var surface = React.useContext(Surface.Context).surface;
+    var _d = React.useState(false), isDismissed = _d[0], setIsDismissed = _d[1];
     var onDismissHandler = function () {
         setIsDismissed(true);
         onDismiss && onDismiss();
     };
     var statusIcons = {
-        general: BtIconNotification_2,
+        general: BtIconTick.BtIconNotification_2,
         error: BtIconAlert.BtIconAlert_2,
-        warning: BtIconAlertTriangle_2,
-        success: BtIconTick_2
+        warning: BtIconTick.BtIconAlertTriangle_2,
+        success: BtIconTick.BtIconTick_2
     };
     var handleLinkClick = function (event) {
         event.preventDefault();

package/dist/Alert/Alert.esm.d.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { HeadingProps } from "../_shared/esm/Heading-b61432fb";
+import { HeadingProps } from "../_shared/esm/Heading-0f629151";
 import { ArcIcon } from "../_shared/esm/arc-icon-17594b2f";
 /** use `Alert` to display persistent messages, either permanent or dismissible. */
 declare const Alert: FC<AlertProps>;

package/dist/Alert/Alert.esm.js

@@ -1,94 +1,15 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-afdb7d32.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-bb100ef8.js';
-import { I as Icon } from '../_shared/esm/Icon-fd247973.js';
-import { H as Heading } from '../_shared/esm/Heading-b61432fb.js';
-import { T as Text } from '../_shared/esm/Text-00e9743b.js';
+import { C as Context } from '../_shared/esm/Surface-dde51789.js';
+import { I as Icon } from '../_shared/esm/Icon-c1af47bc.js';
+import { H as Heading } from '../_shared/esm/Heading-0f629151.js';
+import { T as Text } from '../_shared/esm/Text-40457811.js';
 import { B as BtIconCrossAlt2Px_2 } from '../_shared/esm/BtIconCrossAlt2Px-a6a9f431.js';
+import { B as BtIconNotification_2, a as BtIconAlertTriangle_2, b as BtIconTick_2 } from '../_shared/esm/BtIconTick-5fe50cc7.js';
 import { B as BtIconAlert_2 } from '../_shared/esm/BtIconAlert-55a6ed5c.js';
 import '../_shared/esm/suffix-modifier-7e640670.js';
 
-const React$2 = React__default;
-const BtIconNotification = props =>
-  /*#__PURE__*/ React$2.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
-      },
-      props
-    ),
-    /*#__PURE__*/ React$2.createElement("defs", null),
-    /*#__PURE__*/ React$2.createElement("path", {
-      d:
-        "M24.50977,21.98867,24,21.99014,23.99414,13.975a7.98466,7.98466,0,0,0-6.66046-7.86011,1.46733,1.46733,0,0,0,.15655-.65063,1.48633,1.48633,0,1,0-2.97265,0,1.46732,1.46732,0,0,0,.15826.65369,7.9849,7.9849,0,0,0-6.63971,7.857v8.0166l-.50781-.00293a1.50464,1.50464,0,1,0,0,3.00928h3.45679a1.997,1.997,0,0,0,3.99365,0h9.532a1.50464,1.50464,0,1,0-.001-3.00928ZM16.00391,4.97793a.48633.48633,0,1,1-.48633.48633A.48668.48668,0,0,1,16.00391,4.97793ZM12.98242,25.97158a.998.998,0,0,1-.99469-.97363h1.98841A.99785.99785,0,0,1,12.98242,25.97158ZM24.51074,23.998H7.52832a.50465.50465,0,0,1-.00488-1.00928l1.51269.00293V13.975a6.979,6.979,0,0,1,13.958.00049L23,22.99209l1.51074-.00342a.50464.50464,0,1,1,0,1.00928Z",
-      fill: "currentColor"
-    })
-  );
-var BtIconNotification_2 = BtIconNotification;
-
-const React$1 = React__default;
-const BtIconAlertTriangle = 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", {
-      fill: "currentColor",
-      d: "M16 21.99335A1 1 0 1 0 16 23.99335 1 1 0 1 0 16 21.99335z"
-    }),
-    /*#__PURE__*/ React$1.createElement("path", {
-      d:
-        "M16.00488,20.00977a.49972.49972,0,0,0,.5-.5l.002-9.00977a.5.5,0,0,0-1,0l-.002,9.00977A.5.5,0,0,0,16.00488,20.00977Z",
-      fill: "currentColor"
-    }),
-    /*#__PURE__*/ React$1.createElement("path", {
-      d:
-        "M29.83691,26.21,17.041,4.5332A1.15617,1.15617,0,0,0,16.03711,3.959h-.001a1.159,1.159,0,0,0-1.00586.57373L2.23535,26.21045a1.16676,1.16676,0,0,0,1.00488,1.76074H28.83105A1.16843,1.16843,0,0,0,29.83691,26.21Zm-.86035.67725a.164.164,0,0,1-.14551.084H3.24023a.16737.16737,0,0,1-.14355-.25244L15.8916,5.0415a.167.167,0,0,1,.28809,0l12.7959,21.67627A.16531.16531,0,0,1,28.97656,26.88721Z",
-      fill: "currentColor"
-    })
-  );
-var BtIconAlertTriangle_2 = BtIconAlertTriangle;
-
-const React = React__default;
-const BtIconTick = 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(
-      "g",
-      {
-        "data-name": "Icons"
-      },
-      /*#__PURE__*/ React.createElement("path", {
-        d:
-          "M16,3A13,13,0,1,1,3,16,12.9741,12.9741,0,0,1,16,3m0-1A14,14,0,1,0,30,16,14.04116,14.04116,0,0,0,16,2Z",
-        fill: "currentColor"
-      }),
-      /*#__PURE__*/ React.createElement("path", {
-        d:
-          "M13.5,21.2,9.1,16.8a.495.495,0,1,1,.7-.7l3.6,3.6L22,11.1a.495.495,0,1,1,.7.7Z",
-        fill: "currentColor"
-      })
-    )
-  );
-var BtIconTick_2 = BtIconTick;
-
 /** use `Alert` to display persistent messages, either permanent or dismissible. */
 var Alert = function (_a) {
     var _b;

package/dist/Badge/Badge.cjs.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
 var React = require('react');
 var index = require('../_shared/cjs/index-45bfb67b.js');
-var Surface = require('../_shared/cjs/Surface-6da0a78e.js');
+var Surface = require('../_shared/cjs/Surface-b7c51b2b.js');
 var suffixModifier = require('../_shared/cjs/suffix-modifier-1ee2da04.js');
-var Text = require('../_shared/cjs/Text-6f2827e6.js');
+var Text = require('../_shared/cjs/Text-fa447e2d.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -16,7 +16,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 /** Use `Badge` component to visually display a small amount of information, such as notification counts or status indicators. */
 var Badge = function (_a) {
     var _b, _c;
-    var children = _a.children, _d = _a.state, state = _d === void 0 ? "default" : _d, _e = _a.size, size = _e === void 0 ? "default" : _e, _f = _a.fill, fill = _f === void 0 ? "solid" : _f, ariaLabel = _a.ariaLabel;
+    var children = _a.children, _d = _a.state, state = _d === void 0 ? "default" : _d, _e = _a.size, size = _e === void 0 ? "default" : _e, _f = _a.fill, fill = _f === void 0 ? "solid" : _f, ariaLabel = _a.ariaLabel, props = filterDataAttrs.__rest(_a, ["children", "state", "size", "fill", "ariaLabel"]);
     var surface = React.useContext(Surface.Context).surface;
     return (React__default["default"].createElement("div", filterDataAttrs.__assign({}, (ariaLabel && { "aria-label": ariaLabel }), { className: index.classNames((_b = {
                 "arc-Badge": true,
@@ -25,7 +25,7 @@ var Badge = function (_a) {
                 "arc-Badge--outline": fill === "outlined"
             },
             _b[suffixModifier.suffixModifier("arc-Badge--state", state)] = state !== "default",
-            _b)), role: state === "error" ? "alert" : "status", "data-testid": "badge" }),
+            _b)), role: state === "error" ? "alert" : "status" }, filterDataAttrs.filterDataAttrs(props)),
         React__default["default"].createElement("div", { className: index.classNames((_c = {
                     "arc-Badge-text": true
                 },

package/dist/Badge/Badge.esm.js

@@ -1,14 +1,14 @@
-import { a as __assign } from '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-afdb7d32.js';
 import React__default, { useContext } from 'react';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
-import { C as Context } from '../_shared/esm/Surface-bb100ef8.js';
+import { C as Context } from '../_shared/esm/Surface-dde51789.js';
 import { s as suffixModifier } from '../_shared/esm/suffix-modifier-7e640670.js';
-import { T as Text } from '../_shared/esm/Text-00e9743b.js';
+import { T as Text } from '../_shared/esm/Text-40457811.js';
 
 /** Use `Badge` component to visually display a small amount of information, such as notification counts or status indicators. */
 var Badge = function (_a) {
     var _b, _c;
-    var children = _a.children, _d = _a.state, state = _d === void 0 ? "default" : _d, _e = _a.size, size = _e === void 0 ? "default" : _e, _f = _a.fill, fill = _f === void 0 ? "solid" : _f, ariaLabel = _a.ariaLabel;
+    var children = _a.children, _d = _a.state, state = _d === void 0 ? "default" : _d, _e = _a.size, size = _e === void 0 ? "default" : _e, _f = _a.fill, fill = _f === void 0 ? "solid" : _f, ariaLabel = _a.ariaLabel, props = __rest(_a, ["children", "state", "size", "fill", "ariaLabel"]);
     var surface = useContext(Context).surface;
     return (React__default.createElement("div", __assign({}, (ariaLabel && { "aria-label": ariaLabel }), { className: classNames((_b = {
                 "arc-Badge": true,
@@ -17,7 +17,7 @@ var Badge = function (_a) {
                 "arc-Badge--outline": fill === "outlined"
             },
             _b[suffixModifier("arc-Badge--state", state)] = state !== "default",
-            _b)), role: state === "error" ? "alert" : "status", "data-testid": "badge" }),
+            _b)), role: state === "error" ? "alert" : "status" }, filterDataAttrs(props)),
         React__default.createElement("div", { className: classNames((_c = {
                     "arc-Badge-text": true
                 },

package/dist/Box/Box.cjs.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { SurfaceBackgroundColor, SurfacePadding } from "../_shared/cjs/Surface-b7c51b2b";
+// Do equal height boxes story
+/**
+ * Use `Box` as a simple way to group bespoke content and interactive elements together.
+ */
+declare const Box: FC<BoxProps>;
+interface BoxProps {
+    /**
+     * Contents of the Box.
+     */
+    children: React.ReactNode;
+    /**
+     * Set Box to fill parent element.
+     */
+    isFullHeight?: boolean;
+    /**
+     * Add rounded corners to the box.
+     */
+    isBorderRadius?: boolean;
+    /**
+     * The border width of the box.
+     */
+    borderWidth?: "thin" | "medium";
+    /**
+     * Box shadow for the box.
+     */
+    elevationLevel?: "1" | "2";
+    /**
+     * Padding for the box.
+     */
+    padding?: SurfacePadding;
+    /**
+     * Background color for the box.
+     */
+    surface?: SurfaceBackgroundColor;
+}
+export { Box, BoxProps };

package/dist/Box/Box.cjs.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
+var React = require('react');
+var index = require('../_shared/cjs/index-45bfb67b.js');
+var Surface = require('../_shared/cjs/Surface-b7c51b2b.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+// Do equal height boxes story
+/**
+ * Use `Box` as a simple way to group bespoke content and interactive elements together.
+ */
+var Box = function (_a) {
+    var _b;
+    var children = _a.children, borderWidth = _a.borderWidth, elevationLevel = _a.elevationLevel, padding = _a.padding, _c = _a.isFullHeight, isFullHeight = _c === void 0 ? false : _c, _d = _a.isBorderRadius, isBorderRadius = _d === void 0 ? false : _d, _e = _a.surface, surface = _e === void 0 ? "white" : _e, props = filterDataAttrs.__rest(_a, ["children", "borderWidth", "elevationLevel", "padding", "isFullHeight", "isBorderRadius", "surface"]);
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-Box", (_b = {},
+            _b["arc-Box--fullHeight"] = isFullHeight,
+            _b["arc-Box--borderRadius"] = isBorderRadius,
+            _b["arc-Box--borderThin"] = borderWidth === "thin",
+            _b["arc-Box--borderMedium"] = borderWidth === "medium",
+            _b["arc-Box--elevation1"] = elevationLevel === "1",
+            _b["arc-Box--elevation2"] = elevationLevel === "2",
+            _b)) }, filterDataAttrs.filterDataAttrs(props)),
+        React__default["default"].createElement(Surface.Surface, { padding: padding, background: surface }, children)));
+};
+
+exports.Box = Box;

package/dist/Box/Box.esm.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { SurfaceBackgroundColor, SurfacePadding } from "../_shared/esm/Surface-dde51789";
+// Do equal height boxes story
+/**
+ * Use `Box` as a simple way to group bespoke content and interactive elements together.
+ */
+declare const Box: FC<BoxProps>;
+interface BoxProps {
+    /**
+     * Contents of the Box.
+     */
+    children: React.ReactNode;
+    /**
+     * Set Box to fill parent element.
+     */
+    isFullHeight?: boolean;
+    /**
+     * Add rounded corners to the box.
+     */
+    isBorderRadius?: boolean;
+    /**
+     * The border width of the box.
+     */
+    borderWidth?: "thin" | "medium";
+    /**
+     * Box shadow for the box.
+     */
+    elevationLevel?: "1" | "2";
+    /**
+     * Padding for the box.
+     */
+    padding?: SurfacePadding;
+    /**
+     * Background color for the box.
+     */
+    surface?: SurfaceBackgroundColor;
+}
+export { Box, BoxProps };

package/dist/Box/Box.esm.js

@@ -0,0 +1,24 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import React__default from 'react';
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
+import { S as Surface } from '../_shared/esm/Surface-dde51789.js';
+
+// Do equal height boxes story
+/**
+ * Use `Box` as a simple way to group bespoke content and interactive elements together.
+ */
+var Box = function (_a) {
+    var _b;
+    var children = _a.children, borderWidth = _a.borderWidth, elevationLevel = _a.elevationLevel, padding = _a.padding, _c = _a.isFullHeight, isFullHeight = _c === void 0 ? false : _c, _d = _a.isBorderRadius, isBorderRadius = _d === void 0 ? false : _d, _e = _a.surface, surface = _e === void 0 ? "white" : _e, props = __rest(_a, ["children", "borderWidth", "elevationLevel", "padding", "isFullHeight", "isBorderRadius", "surface"]);
+    return (React__default.createElement("div", __assign({ className: classNames("arc-Box", (_b = {},
+            _b["arc-Box--fullHeight"] = isFullHeight,
+            _b["arc-Box--borderRadius"] = isBorderRadius,
+            _b["arc-Box--borderThin"] = borderWidth === "thin",
+            _b["arc-Box--borderMedium"] = borderWidth === "medium",
+            _b["arc-Box--elevation1"] = elevationLevel === "1",
+            _b["arc-Box--elevation2"] = elevationLevel === "2",
+            _b)) }, filterDataAttrs(props)),
+        React__default.createElement(Surface, { padding: padding, background: surface }, children)));
+};
+
+export { Box };

package/dist/Box/package.json

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

package/dist/BrandLogo/BrandLogo.cjs.d.ts

@@ -1 +1 @@
-export { BrandLogo } from "../_shared/cjs/BrandLogo-8008f0c4";
+export { BrandLogo } from "../_shared/cjs/BrandLogo-8107d59f";

package/dist/BrandLogo/BrandLogo.cjs.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var BrandLogo = require('../_shared/cjs/BrandLogo-8008f0c4.js');
+var BrandLogo = require('../_shared/cjs/BrandLogo-8107d59f.js');
 require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
 require('../_shared/cjs/index-45bfb67b.js');
 require('react');
 require('../_shared/cjs/suffix-modifier-1ee2da04.js');
-require('../_shared/cjs/Surface-6da0a78e.js');
+require('../_shared/cjs/Surface-b7c51b2b.js');
 
 
 

package/dist/BrandLogo/BrandLogo.esm.d.ts

@@ -1 +1 @@
-export { BrandLogo } from "../_shared/esm/BrandLogo-56699561";
+export { BrandLogo } from "../_shared/esm/BrandLogo-9ec620e8";

package/dist/BrandLogo/BrandLogo.esm.js

@@ -1,6 +1,6 @@
-export { B as BrandLogo } from '../_shared/esm/BrandLogo-56699561.js';
+export { B as BrandLogo } from '../_shared/esm/BrandLogo-9ec620e8.js';
 import '../_shared/esm/filter-data-attrs-afdb7d32.js';
 import '../_shared/esm/index-2ae58626.js';
 import 'react';
 import '../_shared/esm/suffix-modifier-7e640670.js';
-import '../_shared/esm/Surface-bb100ef8.js';
+import '../_shared/esm/Surface-dde51789.js';

package/dist/Breadcrumbs/Breadcrumbs.cjs.d.ts

@@ -1 +1 @@
-export { Breadcrumbs } from "../_shared/cjs/Breadcrumbs-8b554370";
+export { Breadcrumbs } from "../_shared/cjs/Breadcrumbs-0906dd10";

package/dist/Breadcrumbs/Breadcrumbs.cjs.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Breadcrumbs = require('../_shared/cjs/Breadcrumbs-8b554370.js');
+var Breadcrumbs = require('../_shared/cjs/Breadcrumbs-0906dd10.js');
+require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
 require('react');
 require('../_shared/cjs/debounce-506538c5.js');
 require('../_shared/cjs/BtIconChevronRight2Px-a8e40136.js');
-require('../_shared/cjs/Icon-9ae8dbe1.js');
-require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
+require('../_shared/cjs/Icon-e1dd45eb.js');
 require('../_shared/cjs/index-45bfb67b.js');
 require('../_shared/cjs/suffix-modifier-1ee2da04.js');
-require('../_shared/cjs/Surface-6da0a78e.js');
+require('../_shared/cjs/Surface-b7c51b2b.js');
 require('../_shared/cjs/handle-link-click-17a44cf4.js');
 
 

package/dist/Breadcrumbs/Breadcrumbs.esm.d.ts

@@ -1 +1 @@
-export { Breadcrumbs } from "../_shared/esm/Breadcrumbs-04590057";
+export { Breadcrumbs } from "../_shared/esm/Breadcrumbs-dafa8dde";

package/dist/Breadcrumbs/Breadcrumbs.esm.js

@@ -1,10 +1,10 @@
-export { B as Breadcrumbs } from '../_shared/esm/Breadcrumbs-04590057.js';
+export { B as Breadcrumbs } from '../_shared/esm/Breadcrumbs-dafa8dde.js';
+import '../_shared/esm/filter-data-attrs-afdb7d32.js';
 import 'react';
 import '../_shared/esm/debounce-e228705f.js';
 import '../_shared/esm/BtIconChevronRight2Px-b8e7b4ad.js';
-import '../_shared/esm/Icon-fd247973.js';
-import '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import '../_shared/esm/Icon-c1af47bc.js';
 import '../_shared/esm/index-2ae58626.js';
 import '../_shared/esm/suffix-modifier-7e640670.js';
-import '../_shared/esm/Surface-bb100ef8.js';
+import '../_shared/esm/Surface-dde51789.js';
 import '../_shared/esm/handle-link-click-f64f55a2.js';

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

@@ -1 +1 @@
-export { Button } from "../_shared/cjs/Button-27512fee";
+export { Button } from "../_shared/cjs/Button-5aaa6776";

package/dist/Button/Button.cjs.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Button = require('../_shared/cjs/Button-27512fee.js');
+var Button = require('../_shared/cjs/Button-5aaa6776.js');
 require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
 require('../_shared/cjs/BtIconChevronLeftMid-df952a3e.js');
 require('react');
 require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
 require('../_shared/cjs/index-45bfb67b.js');
 require('../_shared/cjs/suffix-modifier-1ee2da04.js');
-require('../_shared/cjs/Icon-9ae8dbe1.js');
-require('../_shared/cjs/Surface-6da0a78e.js');
+require('../_shared/cjs/Icon-e1dd45eb.js');
+require('../_shared/cjs/Surface-b7c51b2b.js');
 
 
 

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

@@ -1 +1 @@
-export { Button } from "../_shared/esm/Button-d319fa11";
+export { Button } from "../_shared/esm/Button-d1dbcf79";

package/dist/Button/Button.esm.js

@@ -1,9 +1,9 @@
-export { B as Button } from '../_shared/esm/Button-d319fa11.js';
+export { B as Button } from '../_shared/esm/Button-d1dbcf79.js';
 import '../_shared/esm/filter-data-attrs-afdb7d32.js';
 import '../_shared/esm/BtIconChevronLeftMid-9f4f3a3d.js';
 import 'react';
 import '../_shared/esm/BtIconChevronRightMid-d9b11761.js';
 import '../_shared/esm/index-2ae58626.js';
 import '../_shared/esm/suffix-modifier-7e640670.js';
-import '../_shared/esm/Icon-fd247973.js';
-import '../_shared/esm/Surface-bb100ef8.js';
+import '../_shared/esm/Icon-c1af47bc.js';
+import '../_shared/esm/Surface-dde51789.js';

package/dist/Card/Card.cjs.d.ts

@@ -1 +1 @@
-export { Card } from "../_shared/cjs/Card-804ab0e5";
+export { Card } from "../_shared/cjs/Card-fd189ba8";

package/dist/Card/Card.cjs.js

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Card = require('../_shared/cjs/Card-804ab0e5.js');
+var Card = require('../_shared/cjs/Card-fd189ba8.js');
 require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
 require('../_shared/cjs/index-45bfb67b.js');
 require('react');
 require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
-require('../_shared/cjs/Icon-9ae8dbe1.js');
+require('../_shared/cjs/Icon-e1dd45eb.js');
 require('../_shared/cjs/suffix-modifier-1ee2da04.js');
-require('../_shared/cjs/Surface-6da0a78e.js');
-require('../_shared/cjs/Image-3bf4b4f3.js');
-require('../_shared/cjs/Heading-d45f6a7f.js');
+require('../_shared/cjs/Surface-b7c51b2b.js');
+require('../_shared/cjs/Image-0e393cbf.js');
+require('../_shared/cjs/Heading-e3332dcf.js');
 require('../_shared/cjs/handle-link-click-17a44cf4.js');
 
 

package/dist/Card/Card.esm.d.ts

@@ -1 +1 @@
-export { Card } from "../_shared/esm/Card-e79eb6c8";
+export { Card } from "../_shared/esm/Card-e62c3ff6";

package/dist/Card/Card.esm.js

@@ -1,11 +1,11 @@
-export { C as Card } from '../_shared/esm/Card-e79eb6c8.js';
+export { C as Card } from '../_shared/esm/Card-e62c3ff6.js';
 import '../_shared/esm/filter-data-attrs-afdb7d32.js';
 import '../_shared/esm/index-2ae58626.js';
 import 'react';
 import '../_shared/esm/BtIconChevronRightMid-d9b11761.js';
-import '../_shared/esm/Icon-fd247973.js';
+import '../_shared/esm/Icon-c1af47bc.js';
 import '../_shared/esm/suffix-modifier-7e640670.js';
-import '../_shared/esm/Surface-bb100ef8.js';
-import '../_shared/esm/Image-3596ce55.js';
-import '../_shared/esm/Heading-b61432fb.js';
+import '../_shared/esm/Surface-dde51789.js';
+import '../_shared/esm/Image-3ed3863c.js';
+import '../_shared/esm/Heading-0f629151.js';
 import '../_shared/esm/handle-link-click-f64f55a2.js';

package/dist/Checkbox/Checkbox.cjs.d.ts

@@ -1 +1 @@
-export { Checkbox } from "../_shared/cjs/Checkbox-21d3c4f6";
+export { Checkbox } from "../_shared/cjs/Checkbox-02c546ca";