@arc-ui/components 12.0.0-beta.23 → 12.0.0-beta.24

package/lib/Visible/Visible.mjs

@@ -1,4 +1,5 @@
-export { V as Visible } from '../_shared/esm/Visible-B13QJn7R.mjs';
-import '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
+export { V as Visible } from '../_shared/esm/Visible-B0d79VWZ.mjs';
+import '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
 import 'react';
 import '../_shared/esm/index-5C0-U8cc.mjs';
+import '../_shared/esm/filter-attrs-v_SweZXP.mjs';

package/lib/Visible/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-23 .arc .arc-Visible{display:none;min-height:inherit}.arc-v12-0-0-beta-23 .arc .arc-Visible--xs{display:block}@media (min-width:636px){.arc-v12-0-0-beta-23 .arc .arc-Visible--xs{display:none}.arc-v12-0-0-beta-23 .arc .arc-Visible--s{display:block}}@media (min-width:768px){.arc-v12-0-0-beta-23 .arc .arc-Visible--s{display:none}.arc-v12-0-0-beta-23 .arc .arc-Visible--m{display:block}}@media (min-width:1024px){.arc-v12-0-0-beta-23 .arc .arc-Visible--m{display:none}.arc-v12-0-0-beta-23 .arc .arc-Visible--l{display:block}}@media (min-width:1280px){.arc-v12-0-0-beta-23 .arc .arc-Visible--l{display:none}.arc-v12-0-0-beta-23 .arc .arc-Visible--xl{display:block}}@media (min-width:1440px){.arc-v12-0-0-beta-23 .arc .arc-Visible--xl{display:none}.arc-v12-0-0-beta-23 .arc .arc-Visible--xxl{display:block}}
+.arc-v12-0-0-beta-24 .arc .arc-Visible{display:none;min-height:inherit}.arc-v12-0-0-beta-24 .arc .arc-Visible--xs{display:block}@media (min-width:636px){.arc-v12-0-0-beta-24 .arc .arc-Visible--xs{display:none}.arc-v12-0-0-beta-24 .arc .arc-Visible--s{display:block}}@media (min-width:768px){.arc-v12-0-0-beta-24 .arc .arc-Visible--s{display:none}.arc-v12-0-0-beta-24 .arc .arc-Visible--m{display:block}}@media (min-width:1024px){.arc-v12-0-0-beta-24 .arc .arc-Visible--m{display:none}.arc-v12-0-0-beta-24 .arc .arc-Visible--l{display:block}}@media (min-width:1280px){.arc-v12-0-0-beta-24 .arc .arc-Visible--l{display:none}.arc-v12-0-0-beta-24 .arc .arc-Visible--xl{display:block}}@media (min-width:1440px){.arc-v12-0-0-beta-24 .arc .arc-Visible--xl{display:none}.arc-v12-0-0-beta-24 .arc .arc-Visible--xxl{display:block}}

package/lib/VisuallyHidden/VisuallyHidden.cjs

@@ -1,8 +1,9 @@
 'use strict';
 
-var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-B4XCvPYP.cjs');
-require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
+var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-CQg3cOVK.cjs');
+require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
 require('react');
+require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
 
 
 

package/lib/VisuallyHidden/VisuallyHidden.mjs

@@ -1,3 +1,4 @@
-export { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-DqAgoqJo.mjs';
-import '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
+export { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-aSQ4RA1o.mjs';
+import '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
 import 'react';
+import '../_shared/esm/filter-attrs-v_SweZXP.mjs';

package/lib/VisuallyHidden/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-23 .arc .arc-VisuallyHidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;word-wrap:"normal"}
+.arc-v12-0-0-beta-24 .arc .arc-VisuallyHidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;word-wrap:"normal"}

package/lib/_shared/cjs/{Avatar-CrUioj_6.cjs → Avatar-CecZTQdk.cjs}

@@ -1,13 +1,14 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
 var ConditionalWrapper = require('./ConditionalWrapper-C09Kw6EG.cjs');
-var VisuallyHidden = require('./VisuallyHidden-B4XCvPYP.cjs');
-var ThemeIcon = require('./ThemeIcon-BoxbjTaQ.cjs');
-var Image = require('./Image-C1pcrfnN.cjs');
-var Heading = require('./Heading-BEMSkLYR.cjs');
+var VisuallyHidden = require('./VisuallyHidden-CQg3cOVK.cjs');
+var ThemeIcon = require('./ThemeIcon-Def4RZfK.cjs');
+var Image = require('./Image-CSe0KpDN.cjs');
+var Heading = require('./Heading-CoiZ2EmD.cjs');
 
 var AvatarContent = function (_a) {
     var img = _a.img, initials = _a.initials, _b = _a.size, size = _b === void 0 ? "xl" : _b;
@@ -24,7 +25,7 @@ var AvatarContent = function (_a) {
         xl: 40,
     };
     if (img) {
-        return React.createElement(Image.Image, filterAttrs.__assign({ fit: "cover" }, img));
+        return React.createElement(Image.Image, tslib_es6.__assign({ fit: "cover" }, img));
     }
     if (initials) {
         return (React.createElement(Heading.Heading, { size: textSize[size] }, initials.substring(0, 3).toUpperCase()));
@@ -34,12 +35,12 @@ var AvatarContent = function (_a) {
 
 /** Use `Avatar` to visually represent a user. */
 var Avatar = function (_a) {
-    var img = _a.img, initials = _a.initials, href = _a.href, title = _a.title, ariaLabel = _a.ariaLabel, onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? "xl" : _b, props = filterAttrs.__rest(_a, ["img", "initials", "href", "title", "ariaLabel", "onClick", "size"]);
-    var wrapperAttrs = filterAttrs.__assign({ className: index.classNames("arc-Avatar", "arc-Avatar--".concat(size), {
+    var img = _a.img, initials = _a.initials, href = _a.href, title = _a.title, ariaLabel = _a.ariaLabel, onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? "xl" : _b, props = tslib_es6.__rest(_a, ["img", "initials", "href", "title", "ariaLabel", "onClick", "size"]);
+    var wrapperAttrs = tslib_es6.__assign({ className: index.classNames("arc-Avatar", "arc-Avatar--".concat(size), {
             "arc-Avatar--img": Boolean(img),
         }) }, filterAttrs.filterAttrs(props));
-    return (React.createElement(ConditionalWrapper.ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React.createElement("a", filterAttrs.__assign({ href: href, "aria-label": ariaLabel, onClick: onClick, title: title }, wrapperAttrs), children)); }, fallback: function (children) { return (React.createElement(React.Fragment, null,
-            React.createElement("div", filterAttrs.__assign({}, wrapperAttrs), children),
+    return (React.createElement(ConditionalWrapper.ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React.createElement("a", tslib_es6.__assign({ href: href, "aria-label": ariaLabel, onClick: onClick, title: title }, wrapperAttrs), children)); }, fallback: function (children) { return (React.createElement(React.Fragment, null,
+            React.createElement("div", tslib_es6.__assign({}, wrapperAttrs), children),
             ariaLabel && React.createElement(VisuallyHidden.VisuallyHidden, null, ariaLabel))); } },
         React.createElement(AvatarContent, { size: size, img: img, initials: initials })));
 };

package/lib/_shared/cjs/Badge-DX5PjtiZ.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+var suffixModifier = require('./suffix-modifier-DLUGR-yG.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+
+/** Use `Badge` as a static, non-interactive way to provide short updates. */
+var Badge = function (_a) {
+    var children = _a.children, _b = _a.state, state = _b === void 0 ? "default" : _b, ariaLabel = _a.ariaLabel, ariaRole = _a.ariaRole, props = tslib_es6.__rest(_a, ["children", "state", "ariaLabel", "ariaRole"]);
+    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames("arc-Badge", suffixModifier.suffixModifier("arc-Badge--state", state)) }, (ariaLabel && { "aria-label": ariaLabel }), (ariaRole && { role: ariaRole }), filterAttrs.filterAttrs(props)), children));
+};
+
+exports.Badge = Badge;

package/lib/_shared/cjs/BannerImage-qK8-w9rt.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var Image = require('./Image-CSe0KpDN.cjs');
+
+var BannerImage = function (_a) {
+    var sources = _a.sources, ariaHidden = _a.ariaHidden, props = tslib_es6.__rest(_a, ["sources", "ariaHidden"]);
+    return (React.createElement(Image.Image, tslib_es6.__assign({ "aria-hidden": ariaHidden, fadeOnLoad: true }, props), sources &&
+        sources.map(function (source) { return React.createElement("source", tslib_es6.__assign({ key: source.srcSet }, source)); })));
+};
+
+exports.BannerImage = BannerImage;

package/lib/_shared/cjs/{Box-COPXU1Jf.cjs → Box-Va2g7Gdp.cjs}

@@ -1,17 +1,18 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
-var Surface = require('./Surface-BFx1yNsq.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
 
 /**
  * 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 ? "light-white" : _e, isSurfaceTransparent = _a.isSurfaceTransparent, props = filterAttrs.__rest(_a, ["children", "borderWidth", "elevationLevel", "padding", "isFullHeight", "isBorderRadius", "surface", "isSurfaceTransparent"]);
-    return (React.createElement("div", filterAttrs.__assign({ className: index.classNames("arc-Box", (_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 ? "light-white" : _e, isSurfaceTransparent = _a.isSurfaceTransparent, props = tslib_es6.__rest(_a, ["children", "borderWidth", "elevationLevel", "padding", "isFullHeight", "isBorderRadius", "surface", "isSurfaceTransparent"]);
+    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames("arc-Box", (_b = {},
             _b["arc-Box--fullHeight"] = isFullHeight,
             _b["arc-Box--borderRadius"] = isBorderRadius,
             _b["arc-Box--borderThin"] = borderWidth === "thin",

package/lib/_shared/cjs/{BrandLogo-D5wlIFmm.cjs → BrandLogo-coNfTwRv.cjs}

@@ -1,19 +1,20 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
 var suffixModifier = require('./suffix-modifier-DLUGR-yG.cjs');
-var Surface = require('./Surface-BFx1yNsq.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
 
 /**
  * Use `BrandLogo` to display the brand logo.
  */
 var BrandLogo = function (_a) {
     var _b;
-    var _c = _a.color, color = _c === void 0 ? "auto" : _c, label = _a.label, _d = _a.size, size = _d === void 0 ? 34 : _d, subBrand = _a.subBrand, props = filterAttrs.__rest(_a, ["color", "label", "size", "subBrand"]);
+    var _c = _a.color, color = _c === void 0 ? "auto" : _c, label = _a.label, _d = _a.size, size = _d === void 0 ? 34 : _d, subBrand = _a.subBrand, props = tslib_es6.__rest(_a, ["color", "label", "size", "subBrand"]);
     var surface = React.useContext(Surface.Context).surface;
-    return (React.createElement("div", filterAttrs.__assign({ className: index.classNames((_b = {
+    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames((_b = {
                 "arc-BrandLogo": true,
                 "arc-BrandLogo--colorBrand": color === "brand",
                 "arc-BrandLogo--onDarkSurface": surface === "dark"

package/lib/_shared/cjs/{Button-uD9mR8w-.cjs → Button-MXE2zSmS.cjs}

@@ -1,19 +1,20 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
 var suffixModifier = require('./suffix-modifier-DLUGR-yG.cjs');
-var Icon = require('./Icon-CzhyKqMd.cjs');
-var Surface = require('./Surface-BFx1yNsq.cjs');
-var ThemeIcon = require('./ThemeIcon-BoxbjTaQ.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Icon = require('./Icon-Dk2XHa7V.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
+var ThemeIcon = require('./ThemeIcon-Def4RZfK.cjs');
 
 /**
  * Use `Button` to let a user complete an action like ‘Log in’ or ‘Register’.
  */
 var Button = React.forwardRef(function (_a, ref) {
     var _b;
-    var ariaLabel = _a.ariaLabel, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, _h = _a.size, size = _h === void 0 ? "m" : _h, supportingText = _a.supportingText, target = _a.target, type = _a.type, form = _a.form, props = filterAttrs.__rest(_a, ["ariaLabel", "ariaControls", "ariaExpanded", "ariaHasPopup", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "size", "supportingText", "target", "type", "form"]);
+    var ariaLabel = _a.ariaLabel, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, _h = _a.size, size = _h === void 0 ? "m" : _h, supportingText = _a.supportingText, target = _a.target, type = _a.type, form = _a.form, props = tslib_es6.__rest(_a, ["ariaLabel", "ariaControls", "ariaExpanded", "ariaHasPopup", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "size", "supportingText", "target", "type", "form"]);
     var surface = React.useContext(Surface.Context).surface;
     var buttonClasses = index.classNames((_b = {
             "arc-Button": true,
@@ -26,18 +27,18 @@ var Button = React.forwardRef(function (_a, ref) {
         _b["arc-Button--onDarkSurface"] = surface === "dark",
         _b["arc-Button--size".concat(size && size.toUpperCase())] = size && size !== "m",
         _b));
-    var commonProps = filterAttrs.__assign({ id: id, onClick: onClick, ref: ref }, filterAttrs.filterAttrs(props));
+    var commonProps = tslib_es6.__assign({ id: id, onClick: onClick, ref: ref }, filterAttrs.filterAttrs(props));
     var buttonText = supportingText ? (React.createElement("span", null,
         React.createElement("span", { className: "arc-Button-text" }, label),
         React.createElement("span", { className: "arc-Button-supportingText" }, supportingText))) : (React.createElement("span", { className: "arc-Button-text" }, label));
     var buttonIcon = icon || fill === "flat" ? (React.createElement(ButtonIcon, { icon: icon, isChevron: !icon && fill === "flat", isBeforeText: iconPosition === "beforeText" })) : null;
     if (href && !isDisabled) {
-        return (React.createElement("a", filterAttrs.__assign({}, commonProps, { "aria-label": ariaLabel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, className: buttonClasses, href: href, rel: rel, target: target }),
+        return (React.createElement("a", tslib_es6.__assign({}, commonProps, { "aria-label": ariaLabel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, className: buttonClasses, href: href, rel: rel, target: target }),
             React.createElement("span", { className: "arc-Button-inner" },
                 buttonText,
                 buttonIcon)));
     }
-    return (React.createElement("button", filterAttrs.__assign({}, commonProps, { "aria-label": ariaLabel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, className: buttonClasses, disabled: isDisabled, type: type, form: form }),
+    return (React.createElement("button", tslib_es6.__assign({}, commonProps, { "aria-label": ariaLabel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, className: buttonClasses, disabled: isDisabled, type: type, form: form }),
         React.createElement("span", { className: "arc-Button-inner" },
             buttonText,
             buttonIcon)));

package/lib/_shared/cjs/ButtonV2-BJlwsXlN.cjs

@@ -0,0 +1,58 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Icon = require('./Icon-Dk2XHa7V.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
+var Spinner = require('./Spinner-427lpnHI.cjs');
+
+var ButtonV2 = React.forwardRef(function (_a, ref) {
+    var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, iconActive = _a.iconActive, _c = _a.iconPosition, iconPosition = _c === void 0 ? "beforeText" : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, ariaLabel = _a.ariaLabel, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? false : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, isSpan = _a.isSpan, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, type = _a.type, form = _a.form, props = tslib_es6.__rest(_a, ["label", "buttonStyle", "icon", "iconActive", "iconPosition", "size", "ariaLabel", "ariaControls", "ariaExpanded", "ariaHasPopup", "isFullWidth", "isLoading", "isSpan", "onClick", "href", "id", "rel", "target", "type", "form"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var ButtonElement = isSpan ? "span" : "button";
+    var iconSizes = {
+        s: 16,
+        m: 32,
+        l: 40,
+    };
+    var ButtonV2Classes = index.classNames("arc-ButtonV2", ["arc-ButtonV2--".concat(buttonStyle)], ["arc-ButtonV2--".concat(size)], {
+        "arc-ButtonV2--onDarkSurface": surface === "dark",
+        "arc-ButtonV2--emptyLabel": !label,
+        "arc-ButtonV2--isLoading": isLoading,
+        "arc-ButtonV2--isFullWidth": isFullWidth,
+        "arc-ButtonV2--withIcon": icon || isLoading,
+        "arc-ButtonV2--withIconBeforeText": iconPosition === "beforeText" && (icon || isLoading),
+    });
+    var commonProps = tslib_es6.__assign({ id: id, onClick: onClick, ref: ref }, filterAttrs.filterAttrs(props));
+    var getIconColor = function (buttonStyle) {
+        switch (buttonStyle) {
+            case "compact":
+            case "secondary":
+            case "tertiary":
+                return "brand-alt";
+            default:
+                return "auto";
+        }
+    };
+    var renderButtonContent = function () { return (React.createElement("span", { className: index.classNames("arc-ButtonV2-inner", {
+            "arc-ButtonV2-inner--iconBeforeText": iconPosition === "beforeText",
+        }) },
+        label && React.createElement("span", { className: "arc-ButtonV2-label" }, label),
+        isLoading && (React.createElement("span", { className: "arc-ButtonV2-icon" },
+            React.createElement(Spinner.Spinner, { size: size }))),
+        icon && !isLoading && (React.createElement(React.Fragment, null,
+            React.createElement("span", { className: index.classNames("arc-ButtonV2-icon", {
+                    "arc-ButtonV2-icon--hasActive": iconActive,
+                }) },
+                React.createElement(Icon.Icon, { color: getIconColor(buttonStyle), size: iconSizes[size], icon: icon })),
+            iconActive && (React.createElement("span", { className: "arc-ButtonV2-icon--active" },
+                React.createElement(Icon.Icon, { color: getIconColor(buttonStyle), size: iconSizes[size], icon: iconActive }))))))); };
+    if (href && !isLoading) {
+        return (React.createElement("a", tslib_es6.__assign({}, commonProps, { className: ButtonV2Classes, href: href, rel: rel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, target: target }), renderButtonContent()));
+    }
+    return (React.createElement(ButtonElement, tslib_es6.__assign({}, commonProps, { className: ButtonV2Classes, "aria-label": ariaLabel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, disabled: isLoading, type: type, form: form }), renderButtonContent()));
+});
+
+exports.ButtonV2 = ButtonV2;

package/lib/_shared/cjs/{Calendar-Bfdgf5q1.cjs → Calendar-CFUNKEyb.cjs}

@@ -1,18 +1,19 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-BLRjGROQ.cjs');
-var index_es = require('./index.es-fkulh7qu.cjs');
-var useMediaQuery = require('./use-media-query-BsUfHjPZ.cjs');
+var index_es = require('./index.es-VcVPUNjD.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var useMediaQuery = require('./use-media-query-DqZqShGX.cjs');
 var index$1 = require('./index-CTlXMLug.cjs');
-var Text = require('./Text-Cr5nmYmx.cjs');
-var VisuallyHidden = require('./VisuallyHidden-B4XCvPYP.cjs');
+var Text = require('./Text-jwsn80lQ.cjs');
+var VisuallyHidden = require('./VisuallyHidden-CQg3cOVK.cjs');
 require('./index-DR8Rkav9.cjs');
-var Surface = require('./Surface-BFx1yNsq.cjs');
-var Heading = require('./Heading-BEMSkLYR.cjs');
-var BtIconChevronRightMid = require('./BtIconChevronRightMid-eGxk3ae6.cjs');
-var Icon = require('./Icon-CzhyKqMd.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
+var Heading = require('./Heading-CoiZ2EmD.cjs');
+var ThemeIcon = require('./ThemeIcon-Def4RZfK.cjs');
+var Icon = require('./Icon-Dk2XHa7V.cjs');
 
 /**
  * @name addMonths
@@ -558,7 +559,7 @@ function eachDayOfInterval(dirtyInterval, options) {
 var processSelectedRange = function (_a) {
     var range = _a.range, value = _a.value, disabledDates = _a.disabledDates;
     var exisitingRange = range.filter(function (date) { return Boolean(date); });
-    var newRange = filterAttrs.__spreadArray(filterAttrs.__spreadArray([], (exisitingRange.length === 2 ? [] : exisitingRange), true), [
+    var newRange = tslib_es6.__spreadArray(tslib_es6.__spreadArray([], (exisitingRange.length === 2 ? [] : exisitingRange), true), [
         value,
     ], false).sort(compareAsc);
     var isSelectionComplete = newRange.length === 2;
@@ -1120,7 +1121,7 @@ var CalendarDayNumber = React.forwardRef(function (_a, autoFocusRef) {
         onClick: onDayNumberClick(date),
         onMouseEnter: onDayNumberHover(date),
     };
-    return (React.createElement("td", filterAttrs.__assign({ ref: handleRefs, "data-date": date.getTime() }, (shouldRender ? tableCellProps : {}), { role: "gridcell" }), shouldRender && (React.createElement(React.Fragment, null,
+    return (React.createElement("td", tslib_es6.__assign({ ref: handleRefs, "data-date": date.getTime() }, (shouldRender ? tableCellProps : {}), { role: "gridcell" }), shouldRender && (React.createElement(React.Fragment, null,
         React.createElement(VisuallyHidden.VisuallyHidden, null, index.format(date, "MMMM do, yyyy")),
         React.createElement("div", { className: "arc-CalendarDayNumber-buttonOuter" },
             React.createElement("div", { className: "arc-CalendarDayNumber-buttonInner" },
@@ -1328,25 +1329,18 @@ var CalendarDayGrid = function (_a) {
             React.createElement("tbody", { onKeyDown: handleKeyDown }, getWeeksInMonth(month).map(function (week, i) { return (React.createElement("tr", { key: "".concat(month.getTime(), "-week-").concat(i) }, week.map(function (day) { return (React.createElement(CalendarDayNumber, { ref: autoFocusRef, shouldRender: isSameMonth(month, day), key: day.getTime(), date: day, isFocusWithinDayGrid: isFocusWithinDayGrid })); }))); }))))); })));
 };
 
-/**
- * Do not edit directly
- * Generated file
- */
-
-const BtIconChevronLeftMid =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' fill-rule='evenodd' d='m7.621 8 2.849 2.852a.673.673 0 0 1-.732 1.097.7.7 0 0 1-.218-.145L6.196 8.476a.673.673 0 0 1 0-.951L9.52 4.197a.67.67 0 0 1 1.146.476c0 .178-.07.349-.196.475z' clip-rule='evenodd'/%3e%3c/svg%3e";
-
 var CalendarNavButton = function (_a) {
     var isDisabled = _a.isDisabled, onClick = _a.onClick, direction = _a.direction, ariaLabel = _a.ariaLabel;
     var icons = {
-        previous: BtIconChevronLeftMid,
-        next: BtIconChevronRightMid.BtIconChevronRightMid,
+        previous: "calendarLeft",
+        next: "calendarRight",
     };
     return (React.createElement("button", { "aria-label": ariaLabel, disabled: isDisabled, onClick: onClick, type: "button", className: index$1.classNames("arc-CalendarNavButton", {
             "arc-CalendarNavButton--previous": direction === "previous",
             "arc-CalendarNavButton--next": direction === "next",
         }) },
-        React.createElement(Icon.Icon, { size: 32, icon: icons[direction] })));
+        React.createElement("div", { className: "arc-CalendarNavButton-icon" },
+            React.createElement(ThemeIcon.ThemeIcon, { icon: icons[direction] }))));
 };
 
 var CalendarDoubleMonthView = function (_a) {
@@ -1455,39 +1449,39 @@ var CalendarMonthYearView = function (_a) {
 };
 
 var showPreviousMonthHandler = function (payload, state) {
-    return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: getFocusDate({
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: getFocusDate({
             date: subMonths(state.focusDate, 1),
             minDate: payload.minDate,
         }), displayDate: subMonths(state.displayDate, 1) });
 };
 
 var showNextMonthHandler = function (payload, state) {
-    return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: getFocusDate({
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: getFocusDate({
             date: addMonths(state.focusDate, 1),
             maxDate: payload.maxDate,
         }), displayDate: addMonths(state.displayDate, 1) });
 };
 
 var showPreviousDoubleMonthHandler = function (payload, state) {
-    return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: getFocusDate({
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: getFocusDate({
             date: subMonths(state.focusDate, 2),
             minDate: payload.minDate,
         }), displayDate: subMonths(state.displayDate, 2) });
 };
 
 var showNextDoubleMonthHandler = function (payload, state) {
-    return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: getFocusDate({
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: getFocusDate({
             date: addMonths(state.focusDate, 2),
             maxDate: payload.maxDate,
         }), displayDate: addMonths(state.displayDate, 2) });
 };
 
 var rangeSelectHandler = function (payload, state) {
-    return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: payload.date, highlightedRange: payload.range });
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: payload.date, highlightedRange: payload.range });
 };
 
 var highlightRangeHandler = function (payload, state) {
-    return filterAttrs.__assign(filterAttrs.__assign({}, state), { highlightedRange: getHighlightRange({
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), { highlightedRange: getHighlightRange({
             date: payload.date,
             range: payload.range,
             minDate: payload.minDate,
@@ -1496,15 +1490,15 @@ var highlightRangeHandler = function (payload, state) {
 };
 
 var dayNumberSelectHandler = function (payload, state) {
-    return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: payload });
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: payload });
 };
 
 var dayGridLeaveHandler = function (payload, state) {
     if (payload.selectionType === "range" &&
         payload.range.filter(function (date) { return Boolean(date); }).length === 1) {
-        return filterAttrs.__assign(filterAttrs.__assign({}, state), { highlightedRange: [] });
+        return tslib_es6.__assign(tslib_es6.__assign({}, state), { highlightedRange: [] });
     }
-    return filterAttrs.__assign({}, state);
+    return tslib_es6.__assign({}, state);
 };
 
 var dropDownChangeYearHandler = function (payload, state) {
@@ -1517,16 +1511,16 @@ var dropDownChangeYearHandler = function (payload, state) {
         maxDate: payload.maxDate,
     });
     if (minDate && isBefore(newDisplayDate, minDate)) {
-        return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: focusDate, displayDate: minDate });
+        return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: focusDate, displayDate: minDate });
     }
     if (maxDate && isAfter(newDisplayDate, maxDate)) {
-        return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: focusDate, displayDate: maxDate });
+        return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: focusDate, displayDate: maxDate });
     }
-    return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: focusDate, displayDate: newDisplayDate });
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: focusDate, displayDate: newDisplayDate });
 };
 
 var dropDownChangeMonthHandler = function (payload, state) {
-    return filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: getFocusDate({
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: getFocusDate({
             date: setMonth(state.focusDate, payload.month),
             minDate: payload.minDate,
             maxDate: payload.maxDate,
@@ -1652,21 +1646,21 @@ var calendarKeydownHandler = function (payload, state) {
     var isNewFocusDateVisible = isWithinInterval(newFocusDate, calendarType === "double"
         ? doubleMonthVisibleRange
         : singleMonthVisibleRange);
-    var commonState = filterAttrs.__assign(filterAttrs.__assign({}, state), { focusDate: newFocusDate, highlightedRange: newHighlightedRange });
+    var commonState = tslib_es6.__assign(tslib_es6.__assign({}, state), { focusDate: newFocusDate, highlightedRange: newHighlightedRange });
     if (!isNewFocusDateVisible &&
         !focusDateIsMinOrMax &&
         isNavigatingByYear &&
         calendarType === "double") {
-        return filterAttrs.__assign(filterAttrs.__assign({}, commonState), { displayDate: setYear(displayDate, getYear(newFocusDate)) });
+        return tslib_es6.__assign(tslib_es6.__assign({}, commonState), { displayDate: setYear(displayDate, getYear(newFocusDate)) });
     }
     if (!isNewFocusDateVisible) {
-        return filterAttrs.__assign(filterAttrs.__assign({}, commonState), { displayDate: startOfMonth(newFocusDate) });
+        return tslib_es6.__assign(tslib_es6.__assign({}, commonState), { displayDate: startOfMonth(newFocusDate) });
     }
     return commonState;
 };
 
 var defaultHandler = function (state) {
-    return filterAttrs.__assign({}, state);
+    return tslib_es6.__assign({}, state);
 };
 
 var reducer = function (state, action) {
@@ -1713,7 +1707,7 @@ var CalendarWrapper = function (_a) {
 
 /** Use `Calendar` to clearly present available dates and allowing users to choose a way to enter information. */
 var Calendar = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? "month" : _b, _c = _a.selectionType, selectionType = _c === void 0 ? "single" : _c, _d = _a.autoFocusOnMount, autoFocusOnMount = _d === void 0 ? false : _d, _e = _a.selectedRange, rawSelectedRange = _e === void 0 ? [] : _e, _f = _a.selectedDate, rawSelectedDate = _f === void 0 ? new Date() : _f, rawDisabledDates = _a.disabledDates, rawMinDate = _a.minDate, rawMaxDate = _a.maxDate, onCancelClick = _a.onCancelClick, onDateSelect = _a.onDateSelect, onRangeSelect = _a.onRangeSelect, props = filterAttrs.__rest(_a, ["type", "selectionType", "autoFocusOnMount", "selectedRange", "selectedDate", "disabledDates", "minDate", "maxDate", "onCancelClick", "onDateSelect", "onRangeSelect"]);
+    var _b = _a.type, type = _b === void 0 ? "month" : _b, _c = _a.selectionType, selectionType = _c === void 0 ? "single" : _c, _d = _a.autoFocusOnMount, autoFocusOnMount = _d === void 0 ? false : _d, _e = _a.selectedRange, rawSelectedRange = _e === void 0 ? [] : _e, _f = _a.selectedDate, rawSelectedDate = _f === void 0 ? new Date() : _f, rawDisabledDates = _a.disabledDates, rawMinDate = _a.minDate, rawMaxDate = _a.maxDate, onCancelClick = _a.onCancelClick, onDateSelect = _a.onDateSelect, onRangeSelect = _a.onRangeSelect, props = tslib_es6.__rest(_a, ["type", "selectionType", "autoFocusOnMount", "selectedRange", "selectedDate", "disabledDates", "minDate", "maxDate", "onCancelClick", "onDateSelect", "onRangeSelect"]);
     var todayDate = dateWithoutTime(new Date());
     var selectedDate = dateWithoutTime(rawSelectedDate);
     var selectedRange = rawSelectedRange
@@ -1871,7 +1865,7 @@ var Calendar = function (_a) {
             },
         });
     };
-    return (React.createElement(ArcCalendarContext.Provider, filterAttrs.__assign({ value: {
+    return (React.createElement(ArcCalendarContext.Provider, tslib_es6.__assign({ value: {
             minDate: minDate,
             maxDate: maxDate,
             focusDate: focusDate,

package/lib/_shared/cjs/{CardFooter-ChphRFHe.cjs → CardFooter-BPtRFaCy.cjs}

@@ -2,25 +2,14 @@
 
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
-var Icon = require('./Icon-CzhyKqMd.cjs');
+var ThemeIcon = require('./ThemeIcon-Def4RZfK.cjs');
 var index$1 = require('./index-BLRjGROQ.cjs');
 
-var ArrowRight = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M18.146 11.646a.5.5 0 0 0 0 .707l3.147 3.147H9.5a.5.5 0 0 0 0 1h11.793l-3.146 3.146a.5.5 0 1 0 .707.707L23.207 16l-4.354-4.354a.5.5 0 0 0-.707 0'/%3e%3c/svg%3e";
-var ArrowRightFill = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M2 16A14 14 0 1 0 16 2 14 14 0 0 0 2 16m16.854-4.354L23.207 16l-4.354 4.354a.5.5 0 0 1-.707-.707l3.147-3.147H9.5a.5.5 0 0 1 0-1h11.793l-3.146-3.146a.5.5 0 0 1 .707-.707'/%3e%3c/svg%3e";
-var Play = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='m20.839 15.04-7.178-4.144a1.107 1.107 0 0 0-1.661.958v8.288a1.105 1.105 0 0 0 1.661.96l7.178-4.145a1.107 1.107 0 0 0 0-1.917m-.5 1.051-7.178 4.145a.1.1 0 0 1-.107 0 .1.1 0 0 1-.054-.094v-8.288a.1.1 0 0 1 .054-.092.1.1 0 0 1 .107 0l7.178 4.143a.1.1 0 0 1 .054.094.1.1 0 0 1-.054.092'/%3e%3c/svg%3e";
-var PlayFill = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m4.839 14.957-7.178 4.145a1.108 1.108 0 0 1-1.661-.96v-8.288a1.107 1.107 0 0 1 1.661-.958l7.178 4.144a1.107 1.107 0 0 1 0 1.917'/%3e%3c/svg%3e";
-
 var CardFooter = function (_a) {
     var metaText = _a.metaText, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.buttonSize, buttonSize = _c === void 0 ? "m" : _c, _d = _a.isDarkPathway, isDarkPathway = _d === void 0 ? false : _d, _e = _a.showButton, showButton = _e === void 0 ? true : _e, _f = _a.isHovered, isHovered = _f === void 0 ? false : _f;
     var icons = {
-        arrow: {
-            regular: ArrowRight,
-            filled: ArrowRightFill,
-        },
-        play: {
-            regular: Play,
-            filled: PlayFill,
-        },
+        arrow: "cardRight",
+        play: "cardPlay",
     };
     return (React.createElement("div", { className: index.classNames("arc-CardFooter", {
             "arc-CardFooter--darkPathway": isDarkPathway,
@@ -34,9 +23,9 @@ var CardFooter = function (_a) {
                     React.createElement("div", { className: index.classNames("arc-CardFooter-buttonIconRight", {
                             "arc-CardFooter-buttonIconRight--isHovered": isHovered,
                         }) },
-                        React.createElement(Icon.Icon, { icon: icons[buttonIcon].regular })),
+                        React.createElement(ThemeIcon.ThemeIcon, { icon: icons[buttonIcon] })),
                     React.createElement("div", { className: "arc-CardFooter-buttonIconLeft" },
-                        React.createElement(Icon.Icon, { icon: icons[buttonIcon].regular }))))))));
+                        React.createElement(ThemeIcon.ThemeIcon, { icon: icons[buttonIcon] }))))))));
 };
 
 exports.CardFooter = CardFooter;

package/lib/_shared/cjs/{CardHeading-Cl0D1Khp.cjs → CardHeading-1-dcxBUr.cjs}

@@ -1,12 +1,13 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
-var Heading = require('./Heading-BEMSkLYR.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Heading = require('./Heading-CoiZ2EmD.cjs');
 
 var CardHeading = function (_a) {
     var onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onBlur = _a.onBlur, onFocus = _a.onFocus, href = _a.href, heading = _a.heading, _b = _a.size, size = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d;
-    return (React.createElement(Heading.Heading, { level: headingLevel, size: size }, href ? (React.createElement("a", filterAttrs.__assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterAttrs.filterAttrs(linkData)), heading)) : (heading)));
+    return (React.createElement(Heading.Heading, { level: headingLevel, size: size, isWordWrap: false }, href ? (React.createElement("a", tslib_es6.__assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterAttrs.filterAttrs(linkData)), heading)) : (heading)));
 };
 
 exports.CardHeading = CardHeading;

package/lib/_shared/cjs/CheckboxIcon-B94mtYCX.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+var ThemeIcon = require('./ThemeIcon-Def4RZfK.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
+var FormControl = require('./FormControl-DiERJpGW.cjs');
+
+var CheckboxIcon = function (_a) {
+    var id = _a.id, name = _a.name, checked = _a.checked, _b = _a.indeterminate, indeterminate = _b === void 0 ? false : _b, isDisabled = _a.isDisabled, isRequired = _a.isRequired, _c = _a.size, size = _c === void 0 ? "m" : _c, value = _a.value, error = _a.error, ariaDescribedBy = _a.ariaDescribedBy, onBlur = _a.onBlur, onChange = _a.onChange, props = tslib_es6.__rest(_a, ["id", "name", "checked", "indeterminate", "isDisabled", "isRequired", "size", "value", "error", "ariaDescribedBy", "onBlur", "onChange"]);
+    var requirementStatus = React.useContext(FormControl.Context).requirementStatus;
+    var internalRef = React.useRef(null);
+    var surface = React.useContext(Surface.Context).surface;
+    React.useEffect(function () {
+        if (internalRef.current) {
+            internalRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate, checked]);
+    var tickSize = {
+        s: 14,
+        m: 18,
+    };
+    var isControlled = typeof checked !== "undefined" && typeof onChange === "function";
+    var checkedProps = isControlled
+        ? { checked: checked }
+        : checked
+            ? { defaultChecked: true }
+            : {};
+    if (!checked && onChange) {
+        indeterminate = false;
+    }
+    if (requirementStatus === "required") {
+        isRequired = true;
+    }
+    return (React.createElement("label", { htmlFor: id, className: index.classNames({
+            "arc-CheckboxIcon": true,
+            "arc-CheckboxIcon--disabled": isDisabled,
+            "arc-CheckboxIcon--invalid": error,
+            "arc-CheckboxIcon--small": size === "s",
+            "arc-CheckboxIcon--onDarkSurface": surface === "dark",
+        }) },
+        React.createElement("input", tslib_es6.__assign({ "aria-describedby": ariaDescribedBy ? ariaDescribedBy : error ? "id-error" : undefined, "aria-invalid": error, "aria-checked": checked && !indeterminate
+                ? true
+                : indeterminate && checked
+                    ? "mixed"
+                    : false, className: index.classNames("arc-CheckboxIcon-input"), disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: internalRef, required: isRequired, type: "checkbox", value: value }, checkedProps, props)),
+        React.createElement("span", { className: index.classNames("arc-CheckboxIcon-box") }, indeterminate ? (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none" },
+            React.createElement("rect", { x: "4", y: "8", width: "7.51", height: "1", rx: "0.5", fill: "currentColor" }))) : (React.createElement(ThemeIcon.ThemeIcon, { icon: "checkboxChecked", size: tickSize[size] })))));
+};
+
+exports.CheckboxIcon = CheckboxIcon;