@arc-ui/components 12.0.0-alpha.0 → 12.0.0-beta.10

package/dist/TextArea/TextArea.esm.js

@@ -1,52 +1,75 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-fc59ba8f.js';
 import React__default, { forwardRef, useContext, useRef, useState } from 'react';
 import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
-import { C as Context } from '../_shared/esm/Surface-0ca6817d.js';
-import '../_shared/esm/Base-f200653c.js';
-import '../_shared/esm/Breadcrumbs-c4b65cff.js';
-import '../_shared/esm/Button-c3348ed8.js';
-import '../_shared/esm/Card-45e8e10a.js';
-import '../_shared/esm/Checkbox-2a623386.js';
-import '../_shared/esm/Columns-d96b7425.js';
-import '../_shared/esm/Heading-d16e0e53.js';
-import { T as Text } from '../_shared/esm/Text-14f586ac.js';
-import '../_shared/esm/Filter-58a42358.js';
-import { F as FormControl } from '../_shared/esm/FormControl-433228f5.js';
-import '../_shared/esm/Group-73fdb896.js';
-import '../_shared/esm/Image-12fbd327.js';
-import '../_shared/esm/Poster-699dc89b.js';
-import '../_shared/esm/ProgressStepper-5de34269.js';
-import '../_shared/esm/RadioGroup-002a32ba.js';
-import '../_shared/esm/debounce-6fed6b84.js';
-import '../_shared/esm/SiteFooter-d21da7ab.js';
-import '../_shared/esm/SiteHeader.rehydrator-97900e11.js';
-import '../_shared/esm/Tabs-39d24a7d.js';
-import '../_shared/esm/TextInput-28f18769.js';
-import '../_shared/esm/Toast-dce2d01e.js';
-import '../_shared/esm/UniversalHeader-b4c1577c.js';
-import '../_shared/esm/ThemeIcon-eab5a4d0.js';
-import '../_shared/esm/suffix-modifier-3d548e45.js';
+import { C as Context } from '../_shared/esm/Surface-201aa0d6.js';
+import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-59f004f5.js';
+import '../_shared/esm/Image-45c7760b.js';
+import '../_shared/esm/Heading-e83f0d49.js';
+import '../_shared/esm/Breadcrumbs-58ab8ba0.js';
+import '../_shared/esm/Grid-5d1afe1a.js';
+import { T as Text } from '../_shared/esm/Text-dc3f9cb5.js';
+import '../_shared/esm/ContentSwitcher-bc952e2f.js';
+import '../_shared/esm/ContentSwitcherDropdown-1675387e.js';
+import '../_shared/esm/Button-6d09ead2.js';
+import '../_shared/esm/ButtonV2-b35cea64.js';
+import '../_shared/esm/Calendar-d56cdead.js';
+import '../_shared/esm/Checkbox-a687c6cd.js';
+import '../_shared/esm/Columns-767e7860.js';
+import '../_shared/esm/DatePicker-dd060b1c.js';
+import '../_shared/esm/Filter-284297be.js';
+import { F as FormControl } from '../_shared/esm/FormControl-350bb1c8.js';
+import '../_shared/esm/Group-64dee285.js';
+import '../_shared/esm/HeroButton-32fec849.js';
+import '../_shared/esm/MediaCard-38c7a943.js';
+import '../_shared/esm/Poster-f248e28b.js';
+import '../_shared/esm/ProgressStepper-9bb4706f.js';
+import '../_shared/esm/RadioGroup-84c7ca35.js';
+import '../_shared/esm/debounce-c8e41002.js';
+import '../_shared/esm/SiteFooter-7317b40e.js';
+import '../_shared/esm/SiteHeaderV2-6d4af7e5.js';
+import '../_shared/esm/Tabs-ab8e189d.js';
+import '../_shared/esm/TextInput-0707edc3.js';
+import '../_shared/esm/Toast-e3ab54f9.js';
+import '../_shared/esm/UniversalHeader-15169a0d.js';
+import '../_shared/esm/Icon-6fef56b3.js';
+import '../_shared/esm/BtIconChevronRight2Px.esm-c939e317.js';
 import '../_shared/esm/handle-link-click-f64f55a2.js';
-import '../_shared/esm/Icon-9ecaaeab.js';
-import '../_shared/esm/DisclosureMini-bf95a9db.js';
-import '../_shared/esm/VerticalSpace-43cd9138.js';
-import '../_shared/esm/VisuallyHidden-b9eebf71.js';
-import '../_shared/esm/index.es-00cb3bcb.js';
-import '../_shared/esm/BrandLogo-1af78f76.js';
-import '../_shared/esm/Section-73781b56.js';
-import '../_shared/esm/extends-8cc61aad.js';
-import '../_shared/esm/index-87a828b8.js';
+import '../_shared/esm/index-b051f161.js';
+import '../_shared/esm/index-7f23bb37.js';
 import 'react-dom';
-import '../_shared/esm/index-65264b4e.js';
-import '../_shared/esm/index-3147c5b0.js';
-import '../_shared/esm/index-4f8d3888.js';
+import '../_shared/esm/index-2403936c.js';
+import '../_shared/esm/index-13458236.js';
+import '../_shared/esm/index-7868cc59.js';
+import '../_shared/esm/index-0ae42785.js';
+import '../_shared/esm/index-a41a5e50.js';
+import '../_shared/esm/floating-ui.react-dom-1bb71aae.js';
+import '../_shared/esm/index-6bdce6c5.js';
+import '../_shared/esm/component-4448135f.js';
+import '../_shared/esm/ThemeIcon-69de5351.js';
+import '../_shared/esm/Spinner-7c6f320f.js';
+import '../_shared/esm/index-ce6dee84.js';
+import '../_shared/esm/index.es-be971b8d.js';
+import '../_shared/esm/use-media-query-d3622da8.js';
+import '../_shared/esm/BtIconChevronRightMid.esm-4764708f.js';
+import '../_shared/esm/Combination-71be1a15.js';
+import 'react/jsx-runtime';
+import '../_shared/esm/DisclosureMini-9caa350c.js';
+import '../_shared/esm/VerticalSpace-4b6b7468.js';
+import '../_shared/esm/CardHeading-4e020d2e.js';
+import '../_shared/esm/CardFooter-97261b1c.js';
+import '../_shared/esm/BtIconArrowRight.esm-93da96bb.js';
+import '../_shared/esm/BtIconPlayFill.esm-05fc0344.js';
+import '../_shared/esm/ConditionalWrapper-b85979de.js';
+import '../_shared/esm/_commonjsHelpers-0109d574.js';
+import '../_shared/esm/BrandLogo-640e58ed.js';
+import '../_shared/esm/Section-3ab74edb.js';
 
 /** Use `TextArea` to allow custom user text entry via keyboard, for long-form and multi-line descriptions */
 var TextArea = forwardRef(function (_a, ref) {
-    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "l" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText"]);
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "l" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, width = _a.width, autoComplete = _a.autoComplete, _j = _a.minHeight, minHeight = _j === void 0 ? "116px" : _j, maxHeight = _a.maxHeight, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText", "width", "autoComplete", "minHeight", "maxHeight"]);
     var surface = useContext(Context).surface;
     var ourRef = useRef(null);
-    var _j = useState((value && value.length) || (defaultValue && defaultValue.length) || 0), characterCount = _j[0], setCharacterCount = _j[1];
+    var _k = useState((value && value.length) || (defaultValue && defaultValue.length) || 0), characterCount = _k[0], setCharacterCount = _k[1];
     var setSmartHeight = function (el) {
         el.style.height = "auto";
         el.style.height = "".concat(parseInt(getComputedStyle(el).getPropertyValue("border-width")) * 2 +
@@ -66,18 +89,20 @@ var TextArea = forwardRef(function (_a, ref) {
         onChange && onChange(e);
         setCharacterCount(e.target.value.length);
     };
-    return (React__default.createElement(FormControl, __assign({ errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure, supplementaryInfo: maxLength &&
+    return (React__default.createElement(FormControl, __assign({ errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure, supplementaryInfo: maxLength &&
             showCharacterCount && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(Text, { tone: isDisabled ? "muted" : "default" },
-                React__default.createElement("span", { className: "arc-TextArea-characterCount" },
+                React__default.createElement("span", { className: "arc-TextArea-characterCount", "aria-live": "polite" },
                     characterCount,
                     " / ",
-                    maxLength)))) }, filterDataAttrs(props)),
-        React__default.createElement("textarea", { id: id, className: classNames("arc-TextArea", {
+                    maxLength,
+                    " characters",
+                    characterCount === maxLength && (React__default.createElement(VisuallyHidden, null, "Maximum characters reached")))))) }, filterDataAttrs(props)),
+        React__default.createElement("textarea", __assign({ id: id, className: classNames("arc-TextArea", {
                 "arc-TextArea--noResize": resize !== "manual",
                 "arc-TextArea--onDarkSurface": surface === "dark",
                 "arc-TextArea--invalid": errorMessage
-            }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef })));
+            }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef, style: { width: width, maxHeight: maxHeight, minHeight: minHeight }, "aria-describedby": "".concat(id, "-helper"), autoComplete: autoComplete }, (helper && { "aria-describedby": "".concat(id, "-helper") })))));
 });
 
 export { TextArea };

package/dist/TextArea/styles.css

@@ -0,0 +1 @@
+.arc .arc-TextArea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--textarea-colors-light-bg-default);border:var(--textarea-border-weight-s) solid var(--textarea-colors-light-border-default);border-radius:var(--textarea-border-radius-s);color:var(--textarea-colors-light-text-default);display:block;font:var(--sem-type-body-reg-m);margin-bottom:0;margin-top:var(--textarea-gap-m);padding:var(--textarea-padding-s) var(--textarea-padding-m);resize:vertical;width:100%}.arc .arc-TextArea--resizable{resize:"vertical"}.arc .arc-TextArea--noResize{resize:none}.arc .arc-TextArea--invalid{background-color:var(--textarea-colors-light-bg-error);border-color:var(--textarea-colors-light-border-error)}.arc .arc-TextArea-characterCount{white-space:nowrap}.arc .arc-TextArea:focus{box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-light-border-subtle);outline:var(--focus-border-weight-s) solid transparent}.arc .arc-TextArea:disabled{background-color:var(--textarea-colors-light-bg-disabled);border-color:var(--textarea-colors-light-border-disabled);color:var(--textarea-colors-light-text-disabled)}.arc .arc-TextArea--onDarkSurface{background-color:var(--textarea-colors-dark-bg-default);border-color:var(--textarea-colors-dark-border-strong);color:var(--textarea-colors-dark-text-strong)}.arc .arc-TextArea--onDarkSurface.arc-TextArea--invalid{background-color:var(--textarea-colors-dark-bg-error);border-color:var(--textarea-colors-dark-border-error)}.arc .arc-TextArea--onDarkSurface:focus{box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-dark-border-subtle)}.arc .arc-TextArea--onDarkSurface:disabled{background-color:var(--textarea-colors-dark-bg-disabled);border-color:var(--textarea-colors-dark-border-disabled);color:var(--textarea-colors-dark-text-disabled)}

package/dist/TextInput/TextInput.cjs.js

@@ -2,17 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var TextInput = require('../_shared/cjs/TextInput-a5f72f6f.js');
-require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var TextInput = require('../_shared/cjs/TextInput-5e533805.js');
+require('../_shared/cjs/index.es-0c2c97f4.js');
 require('../_shared/cjs/index-9947ac13.js');
 require('react');
-require('../_shared/cjs/FormControl-30f2330f.js');
-require('../_shared/cjs/Surface-038db6e1.js');
-require('../_shared/cjs/DisclosureMini-145105a4.js');
-require('../_shared/cjs/Text-606ca3a2.js');
-require('../_shared/cjs/suffix-modifier-64dcd338.js');
-require('../_shared/cjs/ThemeIcon-9534f091.js');
-require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
+require('../_shared/cjs/FormControl-09c28bbb.js');
+require('../_shared/cjs/Surface-ca708a8c.js');
+require('../_shared/cjs/DisclosureMini-64a1c682.js');
+require('../_shared/cjs/Text-1b3e4fb6.js');
+require('../_shared/cjs/ThemeIcon-cf6ddb34.js');
+require('../_shared/cjs/VisuallyHidden-c691ea4d.js');
 
 
 

package/dist/TextInput/TextInput.esm.js

@@ -1,11 +1,10 @@
-export { T as TextInput } from '../_shared/esm/TextInput-28f18769.js';
-import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+export { a as TextInput } from '../_shared/esm/TextInput-0707edc3.js';
+import '../_shared/esm/index.es-fc59ba8f.js';
 import '../_shared/esm/index-2e73c2e9.js';
 import 'react';
-import '../_shared/esm/FormControl-433228f5.js';
-import '../_shared/esm/Surface-0ca6817d.js';
-import '../_shared/esm/DisclosureMini-bf95a9db.js';
-import '../_shared/esm/Text-14f586ac.js';
-import '../_shared/esm/suffix-modifier-3d548e45.js';
-import '../_shared/esm/ThemeIcon-eab5a4d0.js';
-import '../_shared/esm/VisuallyHidden-b9eebf71.js';
+import '../_shared/esm/FormControl-350bb1c8.js';
+import '../_shared/esm/Surface-201aa0d6.js';
+import '../_shared/esm/DisclosureMini-9caa350c.js';
+import '../_shared/esm/Text-dc3f9cb5.js';
+import '../_shared/esm/ThemeIcon-69de5351.js';
+import '../_shared/esm/VisuallyHidden-59f004f5.js';

package/dist/TextInput/styles.css

@@ -0,0 +1 @@
+.arc .arc-TextInput-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:var(--textinput-border-radius-m);font:var(--sem-type-body-reg-m);height:calc(var(--textinput-size-m) - (2 * var(--textinput-border-weight-s)));height:calc(var(--textinput-size-m) - (2 * var(--textinput-border-weight-s)));height:calc(var(--textinput-size-m) - calc(2 * var(--textinput-border-weight-s)));margin-bottom:0;padding:0 calc(var(--textinput-padding-m) - var(--textinput-border-weight-s));width:100%}.arc .arc-TextInput-inputWrapper{align-items:baseline;background-color:var(--textinput-colors-light-bg-default);border:var(--textinput-border-weight-s) solid var(--textinput-colors-light-border-default);border-radius:var(--textinput-border-radius-m);color:var(--textinput-colors-light-text-default);display:flex;height:100%;margin-top:var(--textinput-gap-m);position:relative}.arc .arc-TextInput--sizeS .arc-TextInput-input{font:var(--sem-type-body-reg-s);height:calc(var(--textinput-size-s) - (2 * var(--textinput-border-weight-s)));height:calc(var(--textinput-size-s) - (2 * var(--textinput-border-weight-s)));height:calc(var(--textinput-size-s) - calc(2 * var(--textinput-border-weight-s)));padding:calc(4px - var(--textinput-border-weight-s)) calc(var(--textinput-padding-s) - var(--textinput-border-weight-s))}.arc .arc-TextInput--sizeL .arc-TextInput-input{font:var(--sem-type-body-reg-l);height:calc(var(--textinput-size-l) - (2 * var(--textinput-border-weight-s)));height:calc(var(--textinput-size-l) - (2 * var(--textinput-border-weight-s)));height:calc(var(--textinput-size-l) - calc(2 * var(--textinput-border-weight-s)));padding:calc(18px - var(--textinput-border-weight-s)) calc(var(--textinput-padding-l) - var(--textinput-border-weight-s))}.arc .arc-TextInput-additionalControl{position:absolute;right:0;text-decoration:underline;top:50%;transform:translateY(-50%)}.arc .arc-TextInput-passwordToggle{background-color:transparent;border:none;color:var(--textinput-colors-light-text-default);cursor:pointer;flex:0 1 auto;font:var(--sem-type-body-reg-m);margin-right:7px;padding:0 4px}.arc .arc-TextInput-passwordToggle:focus{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-TextInput-prefix{flex:0 1 auto;font:var(--sem-type-body-reg-m);font-weight:700;padding:0 4px 0 calc(12px - 1px)}.arc .arc-TextInput-suffix{flex:0 1 auto;font:var(--sem-type-body-reg-m);font-weight:700;padding:0 calc(12px - 1px) 0 4px}.arc .arc-TextInput--withPrefix .arc-TextInput-input{padding-left:0}.arc .arc-TextInput--withSuffix .arc-TextInput-input,.arc .arc-TextInput--withPasswordToggle .arc-TextInput-input{padding-right:0}.arc .arc-TextInput--sizeS .arc-TextInput-prefix{padding-left:calc(8px - 1px)}.arc .arc-TextInput--sizeS .arc-TextInput-suffix,.arc .arc-TextInput--sizeS .arc-TextInput-passwordToggle{padding-right:calc(8px - 1px)}.arc .arc-TextInput--sizeL .arc-TextInput-prefix{padding-left:calc(16px - 1px)}.arc .arc-TextInput--sizeL .arc-TextInput-suffix,.arc .arc-TextInput--sizeL .arc-TextInput-passwordToggle{padding-right:calc(16px - 1px)}.arc .arc-TextInput-input:focus{outline:0}.arc .arc-TextInput-input:focus-visible{border:none}.arc .arc-TextInput--alignRight .arc-TextInput-input{text-align:right}.arc .arc-TextInput--sizeS .arc-TextInput-passwordToggle,.arc .arc-TextInput--sizeS .arc-TextInput-prefix,.arc .arc-TextInput--sizeS .arc-TextInput-suffix{font:var(--sem-type-body-reg-s)}.arc .arc-TextInput--sizeL .arc-TextInput-passwordToggle,.arc .arc-TextInput--sizeL .arc-TextInput-prefix,.arc .arc-TextInput--sizeL .arc-TextInput-suffix{font:var(--sem-type-body-reg-l)}.arc .arc-TextInput-iconButton{background-color:transparent;background-origin:border-box;border:var(--textinput-border-weight-m) solid transparent;border-radius:var(--textinput-border-radius-l);cursor:pointer;display:block;margin:0;padding:0 6px;text-decoration:none}.arc .arc-TextInput-input:disabled{background-color:var(--textinput-colors-light-bg-disabled);border-color:var(--textinput-colors-light-border-disabled);color:var(--textinput-colors-light-text-disabled)}.arc .arc-TextInput-input:disabled,.arc .arc-TextInput-iconButton:disabled{cursor:not-allowed}.arc .arc-TextInput-iconButton:focus-visible{border-color:var(--focus-colors-light-border-subtle);outline:none}.arc .arc-TextInput--onDarkSurface .arc-TextInput-inputWrapper,.arc .arc-TextInput--onDarkSurface .arc-TextInput-input{background-color:var(--textinput-colors-dark-bg-default);border-color:var(--textinput-colors-dark-border-default);color:var(--textinput-colors-dark-text-default)}.arc .arc-TextInput--onDarkSurface .arc-TextInput-passwordToggle{color:var(--textinput-colors-dark-text-default)}.arc .arc-TextInput--invalid .arc-TextInput-inputWrapper,.arc .arc-TextInput--invalid .arc-TextInput-input{background-color:var(--textinput-colors-light-bg-error);border-color:var(--textinput-colors-dark-border-error)}.arc .arc-TextInput-inputWrapper[\:has\(\%0A\%20\%20\%20\%20\:not\(.arc-TextInput-iconButton\)\:focus-visible\%0A\%20\%20\)]{box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-light-border-subtle);outline:var(--focus-border-weight-s) solid transparent}.arc .arc-TextInput-inputWrapper[\:has\(\:not\(.arc-TextInput-iconButton\)\:focus-visible\)]{box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-light-border-subtle);outline:var(--focus-border-weight-s) solid transparent}.arc .arc-TextInput-inputWrapper:has(:not(.arc-TextInput-iconButton):focus-visible){box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-light-border-subtle);outline:var(--focus-border-weight-s) solid transparent}.arc .arc-TextInput--onDarkSurface.arc-TextInput--invalid .arc-TextInput-input{background-color:var(--textinput-colors-dark-bg-error);border-color:var(--textinput-colors-dark-border-error)}.arc .arc-TextInput--onDarkSurface .arc-TextInput-iconButton{color:var(--textinput-colors-dark-border-default)}.arc .arc-TextInput--onDarkSurface .arc-TextInput-iconButton:focus-visible{border-color:var(--textarea-colors-dark-border-focus)}.arc .arc-TextInput--onDarkSurface .arc-TextInput-input::-moz-placeholder{color:var(--textinput-colors-dark-border-default)}.arc .arc-TextInput--onDarkSurface .arc-TextInput-input::placeholder{color:var(--textinput-colors-dark-border-default)}.arc .arc-TextInput--onDarkSurface .arc-TextInput-inputWrapper[\:has\(\%0A\%20\%20\%20\%20\:not\(.arc-TextInput-iconButton\)\:focus-visible\%0A\%20\%20\)]{box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-dark-border-subtle)}.arc .arc-TextInput--onDarkSurface .arc-TextInput-inputWrapper[\:has\(\:not\(.arc-TextInput-iconButton\)\:focus-visible\)]{box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-dark-border-subtle)}.arc .arc-TextInput--onDarkSurface .arc-TextInput-inputWrapper:has(:not(.arc-TextInput-iconButton):focus-visible){box-shadow:0 0 0 var(--focus-border-weight-s) var(--focus-colors-dark-border-subtle)}.arc .arc-TextInput--onDarkSurface .arc-TextInput-input:disabled{background-color:var(--textinput-colors-dark-bg-disabled);border-color:var(--textinput-colors-dark-border-disabled);color:var(--textinput-colors-dark-text-disabled)}.arc .arc-TextInput--onDarkSurface.arc-TextInput--invalid .arc-TextInput-inputWrapper .arc-TextInput-input,.arc .arc-TextInput--onDarkSurface.arc-TextInput--invalid .arc-TextInput-inputWrapper{background-color:var(--textinput-colors-dark-bg-error);border-color:var(--textinput-colors-dark-border-error)}.arc .arc-TextInput-input:disabled,.arc .arc-TextInput--isDisabled .arc-TextInput-inputWrapper{background-color:var(--textinput-colors-light-bg-disabled);border-color:var(--textinput-colors-light-border-disabled);color:var(--textinput-colors-light-text-disabled);cursor:not-allowed}.arc .arc-TextInput--onDarkSurface.arc-TextInput--isDisabled .arc-TextInput-inputWrapper,.arc .arc-TextInput--onDarkSurface .arc-TextInput-input:disabled{background-color:var(--textinput-colors-dark-bg-disabled);border-color:var(--textinput-colors-dark-border-disabled);color:var(--textinput-colors-dark-text-disabled)}.arc .arc-TextInput-input:-webkit-autofill, .arc .arc-TextInput-input:-webkit-autofill:hover, .arc .arc-TextInput-input:-webkit-autofill:focus{box-shadow:0 0 0 1000px #ffffff inset !important}.arc .arc-TextInput-input:autofill,.arc .arc-TextInput-input:autofill:hover,.arc .arc-TextInput-input:autofill:focus{box-shadow:0 0 0 1000px #ffffff inset !important}.arc .arc-TextInput--onDarkSurface .arc-TextInput-passwordToggle:focus{outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle)}

package/dist/Theme/Theme.cjs.js

@@ -2,18 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var index_es = require('../_shared/cjs/index.es-0c2c97f4.js');
 var React = require('react');
+var index = require('../_shared/cjs/index-9947ac13.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+/**
+ * Use `Theme` component to apply a specific theme to its children.
+ */
 var Theme = function (_a) {
-    var _b = _a.theme, theme = _b === void 0 ? "arc-11" : _b, children = _a.children, props = filterDataAttrs.__rest(_a, ["theme", "children"]);
-    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: "arc-ds-sys-theme--".concat(theme) }, filterDataAttrs.filterDataAttrs(props)), children));
+    var _b = _a.theme, theme = _b === void 0 ? "bt-enterprise" : _b, _c = _a.resetCssStyles, resetCssStyles = _c === void 0 ? true : _c, children = _a.children, props = index_es.__rest(_a, ["theme", "resetCssStyles", "children"]);
+    var iconClass = {
+        "bt-business": "arc-ds-sys-icons--bt",
+        "bt-enterprise": "arc-ds-sys-icons--bt",
+        ee: "arc-ds-sys-icons--ee"
+    };
+    return (React__default["default"].createElement("div", { className: index_es.getVersionClassName() },
+        React__default["default"].createElement("div", index_es.__assign({ "data-theme": theme, className: index.classNames("arc arc-ds-sys-theme arc-ds-sys-theme--".concat(theme), iconClass[theme], {
+                "arc--reset": resetCssStyles
+            }) }, index_es.filterDataAttrs(props)), children)));
 };
-var themes = ["arc-11", "ee"];
+var themes = ["bt-enterprise", "bt-business", "ee"];
 
 exports.Theme = Theme;
 exports.themes = themes;

package/dist/Theme/Theme.esm.js

@@ -1,10 +1,22 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, c as getVersionClassName, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-fc59ba8f.js';
 import React__default from 'react';
+import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
 
+/**
+ * Use `Theme` component to apply a specific theme to its children.
+ */
 var Theme = function (_a) {
-    var _b = _a.theme, theme = _b === void 0 ? "arc-11" : _b, children = _a.children, props = __rest(_a, ["theme", "children"]);
-    return (React__default.createElement("div", __assign({ className: "arc-ds-sys-theme--".concat(theme) }, filterDataAttrs(props)), children));
+    var _b = _a.theme, theme = _b === void 0 ? "bt-enterprise" : _b, _c = _a.resetCssStyles, resetCssStyles = _c === void 0 ? true : _c, children = _a.children, props = __rest(_a, ["theme", "resetCssStyles", "children"]);
+    var iconClass = {
+        "bt-business": "arc-ds-sys-icons--bt",
+        "bt-enterprise": "arc-ds-sys-icons--bt",
+        ee: "arc-ds-sys-icons--ee"
+    };
+    return (React__default.createElement("div", { className: getVersionClassName() },
+        React__default.createElement("div", __assign({ "data-theme": theme, className: classNames("arc arc-ds-sys-theme arc-ds-sys-theme--".concat(theme), iconClass[theme], {
+                "arc--reset": resetCssStyles
+            }) }, filterDataAttrs(props)), children)));
 };
-var themes = ["arc-11", "ee"];
+var themes = ["bt-enterprise", "bt-business", "ee"];
 
 export { Theme, themes };

package/dist/Theme/styles.css

@@ -0,0 +1 @@
+.arc{color:var(--sem-color-fg-secondary-light-default);font:var(--sem-type-body-reg-m);height:100%}.arc--reset :where(*:not(svg):not(svg *):not(iframe)),.arc--reset ::after,.arc--reset ::before{all:revert;-webkit-text-fill-color:initial}.arc *{box-sizing:border-box}.arc a{color:var(--textlink-colors-light-text-default)}.arc a:hover{color:var(--textlink-colors-light-text-hover)}.arc a:focus,.arc a:focus-visible{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px;text-decoration:none}.arc a:active{color:var(--textlink-colors-light-text-hover)}.arc a:focus:not(:focus-visible){outline:0}

package/dist/ThemeIcon/ThemeIcon.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ThemeIcon = require('../_shared/cjs/ThemeIcon-cf6ddb34.js');
+require('../_shared/cjs/index.es-0c2c97f4.js');
+require('../_shared/cjs/index-9947ac13.js');
+require('react');
+require('../_shared/cjs/Surface-ca708a8c.js');
+
+
+
+exports.ThemeIcon = ThemeIcon.ThemeIcon;

package/dist/ThemeIcon/ThemeIcon.esm.js

@@ -0,0 +1,5 @@
+export { T as ThemeIcon } from '../_shared/esm/ThemeIcon-69de5351.js';
+import '../_shared/esm/index.es-fc59ba8f.js';
+import '../_shared/esm/index-2e73c2e9.js';
+import 'react';
+import '../_shared/esm/Surface-201aa0d6.js';

package/dist/ThemeIcon/package.json

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

package/dist/ThemeIcon/styles.css

@@ -0,0 +1 @@
+.arc .arc-ThemeIcon--alertDismiss{-webkit-mask-image:var(--comp-alert-dismiss);mask-image:var(--comp-alert-dismiss)}.arc .arc-ThemeIcon--alertError{-webkit-mask-image:var(--comp-alert-error);mask-image:var(--comp-alert-error)}.arc .arc-ThemeIcon--alertGeneral{-webkit-mask-image:var(--comp-alert-general);mask-image:var(--comp-alert-general)}.arc .arc-ThemeIcon--alertSuccess{-webkit-mask-image:var(--comp-alert-success);mask-image:var(--comp-alert-success)}.arc .arc-ThemeIcon--alertWarning{-webkit-mask-image:var(--comp-alert-warning);mask-image:var(--comp-alert-warning)}.arc .arc-ThemeIcon--avatarUser{-webkit-mask-image:var(--comp-avatar-user);mask-image:var(--comp-avatar-user)}.arc .arc-ThemeIcon--breadcrumbLeft{-webkit-mask-image:var(--comp-breadcrumb-left);mask-image:var(--comp-breadcrumb-left)}.arc .arc-ThemeIcon--breadcrumbRight{-webkit-mask-image:var(--comp-breadcrumb-right);mask-image:var(--comp-breadcrumb-right)}.arc .arc-ThemeIcon--buttonLeft{-webkit-mask-image:var(--comp-button-left);mask-image:var(--comp-button-left)}.arc .arc-ThemeIcon--buttonRight{-webkit-mask-image:var(--comp-button-right);mask-image:var(--comp-button-right)}.arc .arc-ThemeIcon--cardButton{-webkit-mask-image:var(--comp-card-button);mask-image:var(--comp-card-button)}.arc .arc-ThemeIcon--carouselLeft{-webkit-mask-image:var(--comp-carousel-left);mask-image:var(--comp-carousel-left)}.arc .arc-ThemeIcon--carouselRight{-webkit-mask-image:var(--comp-carousel-right);mask-image:var(--comp-carousel-right)}.arc .arc-ThemeIcon--checkboxChecked{-webkit-mask-image:var(--comp-checkbox-checked);mask-image:var(--comp-checkbox-checked)}.arc .arc-ThemeIcon--checkboxError{-webkit-mask-image:var(--comp-checkbox-error);mask-image:var(--comp-checkbox-error)}.arc .arc-ThemeIcon--datePickerCalendar{-webkit-mask-image:var(--comp-date-picker-calendar);mask-image:var(--comp-date-picker-calendar)}.arc .arc-ThemeIcon--disclosureExpand{-webkit-mask-image:var(--comp-disclosure-expand);mask-image:var(--comp-disclosure-expand)}.arc .arc-ThemeIcon--disclosureMiniExpand{-webkit-mask-image:var(--comp-disclosure-mini-expand);mask-image:var(--comp-disclosure-mini-expand)}.arc .arc-ThemeIcon--downloadFile{-webkit-mask-image:var(--comp-download-file);mask-image:var(--comp-download-file)}.arc .arc-ThemeIcon--downloadAccessibility{-webkit-mask-image:var(--comp-download-accessibility);mask-image:var(--comp-download-accessibility)}.arc .arc-ThemeIcon--formControlAlert{-webkit-mask-image:var(--comp-form-control-alert);mask-image:var(--comp-form-control-alert)}.arc .arc-ThemeIcon--modalClose{-webkit-mask-image:var(--comp-modal-close);mask-image:var(--comp-modal-close)}.arc .arc-ThemeIcon--paginationPrevious{-webkit-mask-image:var(--comp-pagination-previous);mask-image:var(--comp-pagination-previous)}.arc .arc-ThemeIcon--paginationNext{-webkit-mask-image:var(--comp-pagination-next);mask-image:var(--comp-pagination-next)}.arc .arc-ThemeIcon--paginationSimplePrevious{-webkit-mask-image:var(--comp-pagination-simple-previous);mask-image:var(--comp-pagination-simple-previous)}.arc .arc-ThemeIcon--paginationSimpleNext{-webkit-mask-image:var(--comp-pagination-simple-next);mask-image:var(--comp-pagination-simple-next)}.arc .arc-ThemeIcon--progressBarSuccess{-webkit-mask-image:var(--comp-progress-bar-success);mask-image:var(--comp-progress-bar-success)}.arc .arc-ThemeIcon--progressBarError{-webkit-mask-image:var(--comp-progress-bar-error);mask-image:var(--comp-progress-bar-error)}.arc .arc-ThemeIcon--progressBarRefresh{-webkit-mask-image:var(--comp-progress-bar-refresh);mask-image:var(--comp-progress-bar-refresh)}.arc .arc-ThemeIcon--progressStepperComplete{-webkit-mask-image:var(--comp-progress-stepper-complete);mask-image:var(--comp-progress-stepper-complete)}.arc .arc-ThemeIcon--progressStepperCurrent{-webkit-mask-image:var(--comp-progress-stepper-current);mask-image:var(--comp-progress-stepper-current)}.arc .arc-ThemeIcon--progressStepperWarning{-webkit-mask-image:var(--comp-progress-stepper-warning);mask-image:var(--comp-progress-stepper-warning)}.arc .arc-ThemeIcon--progressStepperError{-webkit-mask-image:var(--comp-progress-stepper-error);mask-image:var(--comp-progress-stepper-error)}.arc .arc-ThemeIcon--scrollToTop{-webkit-mask-image:var(--comp-scroll-to-top);mask-image:var(--comp-scroll-to-top)}.arc .arc-ThemeIcon--selectTrigger{-webkit-mask-image:var(--comp-select-trigger);mask-image:var(--comp-select-trigger)}.arc .arc-ThemeIcon--selectScrollUp{-webkit-mask-image:var(--comp-select-scroll-up);mask-image:var(--comp-select-scroll-up)}.arc .arc-ThemeIcon--selectScrollDown{-webkit-mask-image:var(--comp-select-scroll-down);mask-image:var(--comp-select-scroll-down)}.arc .arc-ThemeIcon--selectIndicator{-webkit-mask-image:var(--comp-select-indicator);mask-image:var(--comp-select-indicator)}.arc .arc-ThemeIcon--siteFooterExpand{-webkit-mask-image:var(--comp-site-footer-expand);mask-image:var(--comp-site-footer-expand)}.arc .arc-ThemeIcon--siteHeaderBack{-webkit-mask-image:var(--comp-site-header-back);mask-image:var(--comp-site-header-back)}.arc .arc-ThemeIcon--siteHeaderLink{-webkit-mask-image:var(--comp-site-header-link);mask-image:var(--comp-site-header-link)}.arc .arc-ThemeIcon--siteHeaderItemGroupExpand{-webkit-mask-image:var(--comp-site-header-item-group-expand);mask-image:var(--comp-site-header-item-group-expand)}.arc .arc-ThemeIcon--siteHeaderNavItemExpand{-webkit-mask-image:var(--comp-site-header-nav-item-expand);mask-image:var(--comp-site-header-nav-item-expand)}.arc .arc-ThemeIcon--siteHeaderNavItemExpandAlt{-webkit-mask-image:var(--comp-site-header-nav-item-expand-alt);mask-image:var(--comp-site-header-nav-item-expand-alt)}.arc .arc-ThemeIcon--siteHeaderViewAll{-webkit-mask-image:var(--comp-site-header-view-all);mask-image:var(--comp-site-header-view-all)}.arc .arc-ThemeIcon--siteHeaderSubNavOpen{-webkit-mask-image:var(--comp-site-header-sub-nav-open);mask-image:var(--comp-site-header-sub-nav-open)}.arc .arc-ThemeIcon--switchToggle{-webkit-mask-image:var(--comp-site-switch-toggle);mask-image:var(--comp-site-switch-toggle)}.arc .arc-ThemeIcon--tabsNext{-webkit-mask-image:var(--comp-tabs-next);mask-image:var(--comp-tabs-next)}.arc .arc-ThemeIcon--tabsPrevious{-webkit-mask-image:var(--comp-tabs-previous);mask-image:var(--comp-tabs-previous)}.arc .arc-ThemeIcon--toastGeneral{-webkit-mask-image:var(--comp-toast-general);mask-image:var(--comp-toast-general)}.arc .arc-ThemeIcon--toastSuccess{-webkit-mask-image:var(--comp-toast-success);mask-image:var(--comp-toast-success)}.arc .arc-ThemeIcon--toastWarning{-webkit-mask-image:var(--comp-toast-warning);mask-image:var(--comp-toast-warning)}.arc .arc-ThemeIcon--toastError{-webkit-mask-image:var(--comp-toast-error);mask-image:var(--comp-toast-error)}.arc .arc-ThemeIcon--toastDismiss{-webkit-mask-image:var(--comp-toast-dismiss);mask-image:var(--comp-toast-dismiss)}.arc .arc-ThemeIcon--videoPlayerTranscript{-webkit-mask-image:var(--comp-video-player-transcript);mask-image:var(--comp-video-player-transcript)}.arc .arc-ThemeIcon{background-color:currentColor;color:currentColor;display:block;height:100%;line-height:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:100%}.arc .arc-ThemeIcon--colorBrand{background-color:var(--sem-color-fg-primary-light-default);color:var(--sem-color-fg-primary-light-default)}.arc .arc-ThemeIcon--colorBrand.arc-ThemeIcon--onDarkSurface{background-color:var(--sem-color-fg-primary-dark-default);color:var(--sem-color-fg-primary-dark-default)}.arc .arc-ThemeIcon--colorStatusRed{background-color:var(--sem-color-status-fg-light-error);color:var(--sem-color-status-fg-light-error)}.arc .arc-ThemeIcon--colorStatusRed.arc-ThemeIcon--onDarkSurface{background-color:var(--sem-color-status-fg-dark-error);color:var(--sem-color-status-fg-dark-error)}.arc .arc-ThemeIcon--colorStatusAmber{background-color:var(--sem-color-status-fg-light-warning);color:var(--sem-color-status-fg-light-warning)}.arc .arc-ThemeIcon--colorStatusAmber.arc-ThemeIcon--onDarkSurface{background-color:var(--sem-color-status-fg-dark-warning);color:var(--sem-color-status-fg-dark-warning)}.arc .arc-ThemeIcon--colorStatusGreen{background-color:var(--sem-color-status-fg-light-success);color:var(--sem-color-status-fg-light-success)}.arc .arc-ThemeIcon--colorStatusGreen.arc-ThemeIcon--onDarkSurface{background-color:var(--sem-color-status-fg-dark-success);color:var(--sem-color-status-fg-dark-success)}

package/dist/Toast/Toast.cjs.js

@@ -2,18 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Toast = require('../_shared/cjs/Toast-6d4021d7.js');
-require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var Toast = require('../_shared/cjs/Toast-e088fa5d.js');
+require('../_shared/cjs/index.es-0c2c97f4.js');
 require('react');
-require('../_shared/cjs/extends-8c5e4b48.js');
+require('../_shared/cjs/index-76f7dd53.js');
 require('react-dom');
-require('../_shared/cjs/index-4aa11039.js');
-require('../_shared/cjs/index-23b4f49f.js');
-require('../_shared/cjs/index-4dd46cbe.js');
+require('../_shared/cjs/index-dbc843d3.js');
+require('../_shared/cjs/index-2bf59363.js');
+require('../_shared/cjs/index-527f962b.js');
 require('../_shared/cjs/index-9947ac13.js');
-require('../_shared/cjs/ThemeIcon-9534f091.js');
-require('../_shared/cjs/suffix-modifier-64dcd338.js');
-require('../_shared/cjs/Surface-038db6e1.js');
+require('../_shared/cjs/ThemeIcon-cf6ddb34.js');
+require('../_shared/cjs/Surface-ca708a8c.js');
 
 
 

package/dist/Toast/Toast.esm.js

@@ -1,12 +1,11 @@
-export { T as Toast } from '../_shared/esm/Toast-dce2d01e.js';
-import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+export { T as Toast } from '../_shared/esm/Toast-e3ab54f9.js';
+import '../_shared/esm/index.es-fc59ba8f.js';
 import 'react';
-import '../_shared/esm/extends-8cc61aad.js';
+import '../_shared/esm/index-7f23bb37.js';
 import 'react-dom';
-import '../_shared/esm/index-87a828b8.js';
-import '../_shared/esm/index-65264b4e.js';
-import '../_shared/esm/index-4f8d3888.js';
+import '../_shared/esm/index-2403936c.js';
+import '../_shared/esm/index-a41a5e50.js';
+import '../_shared/esm/index-7868cc59.js';
 import '../_shared/esm/index-2e73c2e9.js';
-import '../_shared/esm/ThemeIcon-eab5a4d0.js';
-import '../_shared/esm/suffix-modifier-3d548e45.js';
-import '../_shared/esm/Surface-0ca6817d.js';
+import '../_shared/esm/ThemeIcon-69de5351.js';
+import '../_shared/esm/Surface-201aa0d6.js';

package/dist/Toast/styles.css

@@ -0,0 +1 @@
+.arc .arc-Toast{align-items:center;border-radius:var(--toast-border-radius-s);display:flex;padding:var(--toast-padding-s)}.arc .arc-Toast-viewport{bottom:var(--vertical-space-size-40);left:var(--vertical-space-size-20);list-style:none;margin:0;padding:0;position:fixed;width:calc(100% - var(--vertical-space-size-40));z-index:999}.arc .arc-Toast-root:nth-of-type(n+1){margin-top:var(--vertical-space-size-12)}.arc .arc-Toast-icon{flex:0 0 auto}.arc .arc-Toast-title{flex:1 1 auto;margin-left:var(--toast-gap-s)}.arc .arc-Toast-dismiss{align-items:center;background-color:transparent;border:none;cursor:pointer;display:flex;margin-left:auto;padding:0;position:relative}.arc .arc-Toast-link{margin:0 var(--toast-gap-s)}.arc .arc-Toast-root:focus-visible{border-radius:var(--toast-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-Toast-pathway--alternative .arc-Toast-dismiss,.arc .arc-Toast-pathway--alternative .arc-Toast-link{color:var(--toast-colors-status-dark-text-default-alt)}.arc .arc-Toast-pathway--default .arc-Toast-dismiss{color:var(--toast-colors-status-light-text-default-alt)}.arc .arc-Toast-pathway--default .arc-Toast-dismiss:focus-visible{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-Toast-pathway--alternative .arc-Toast-dismiss:focus-visible{border-radius:var(--toast-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-Toast-pathway--default .arc-Toast-link,.arc .arc-Toast-pathway--default .arc-Toast-link:hover{color:var(--toast-colors-status-light-text-default)}.arc .arc-Toast-pathway--alternative .arc-Toast-link,.arc .arc-Toast-pathway--alternative .arc-Toast-link:hover{color:var(--toast-colors-status-dark-text-default)}.arc .arc-Toast-pathway--default .arc-Toast{background:var(--toast-colors-status-light-bg-default);box-shadow:var(--toast-box-shadow-01);color:var(--toast-colors-status-light-text-default-alt)}.arc .arc-Toast-pathway--alternative .arc-Toast{background:var(--toast-colors-status-dark-bg-default);box-shadow:var(--toast-box-shadow-01);color:var(--toast-colors-status-dark-text-default)}.arc .arc-Toast-pathway--default .arc-Toast-status--general{border:var(--toast-border-weight-s) solid var(--toast-colors-status-light-border-default);color:var(--toast-colors-status-light-text-default-alt)}.arc .arc-Toast-pathway--default .arc-Toast-status--error{background:var(--toast-colors-status-light-bg-error);border:var(--toast-border-weight-s) solid var(--toast-colors-status-light-border-error);color:var(--toast-colors-status-light-text-default)}.arc .arc-Toast-pathway--default .arc-Toast-status--warning{background:var(--toast-colors-status-light-bg-warning);border:var(--toast-border-weight-s) solid var(--toast-colors-status-light-border-warning);color:var(--toast-colors-status-light-text-default)}.arc .arc-Toast-pathway--default .arc-Toast-status--success{background:var(--toast-colors-status-light-bg-success);border:var(--toast-border-weight-s) solid var(--toast-colors-status-light-border-success);color:var(--toast-colors-status-light-text-default)}.arc .arc-Toast-pathway--default .arc-Toast-status--error .arc-Toast-dismiss,.arc .arc-Toast-pathway--default .arc-Toast-status--warning .arc-Toast-dismiss,.arc .arc-Toast-pathway--default .arc-Toast-status--success .arc-Toast-dismiss{color:var(--toast-colors-status-light-text-default)}.arc .arc-Toast-pathway--default .arc-Toast-status--error .arc-Toast-icon{color:var(--toast-colors-status-light-fg-error)}.arc .arc-Toast-pathway--default .arc-Toast-status--warning .arc-Toast-icon{color:var(--toast-colors-status-light-fg-warning)}.arc .arc-Toast-pathway--default .arc-Toast-status--success .arc-Toast-icon{color:var(--toast-colors-status-light-fg-success)}.arc .arc-Toast-pathway--alternative .arc-Toast-status--general{border:var(--toast-border-weight-s) solid var(--toast-colors-status-dark-border-default);color:var(--toast-colors-status-dark-text-default)}.arc .arc-Toast-pathway--alternative .arc-Toast-status--error{background:var(--toast-colors-status-dark-bg-error);border:var(--toast-border-weight-s) solid var(--toast-colors-status-dark-border-error);color:var(--toast-colors-status-dark-text-default)}.arc .arc-Toast-pathway--alternative .arc-Toast-status--warning{background:var(--toast-colors-status-dark-bg-warning);border:var(--toast-border-weight-s) solid var(--toast-colors-status-dark-border-warning);color:var(--toast-colors-status-dark-text-default)}.arc .arc-Toast-pathway--alternative .arc-Toast-status--success{background:var(--toast-colors-status-dark-bg-success);border:var(--toast-border-weight-s) solid var(--toast-colors-status-dark-border-success);color:var(--toast-colors-status-dark-text-default)}.arc .arc-Toast-pathway--alternative .arc-Toast-status--general .arc-Toast-icon{color:var(--toast-colors-status-dark-fg-default)}.arc .arc-Toast-pathway--alternative .arc-Toast-status--error .arc-Toast-icon{color:var(--toast-colors-status-dark-fg-error)}.arc .arc-Toast-pathway--alternative .arc-Toast-status--warning .arc-Toast-icon{color:var(--toast-colors-status-dark-fg-warning)}.arc .arc-Toast-pathway--alternative .arc-Toast-status--success .arc-Toast-icon{color:var(--toast-colors-status-dark-fg-success)}.arc .arc-Toast-root[data-state="open"]{animation:slide-in 150ms cubic-bezier(0.16,1,0.3,1)}.arc .arc-Toast-root[data-state="closed"]{animation:hide 100ms ease-in}.arc .arc-Toast-root[data-swipe="move"]{transform:translateX(var(--radix-toast-swipe-move-x))}.arc .arc-Toast-root[data-swipe="cancel"]{transform:translateX(0);transition:transform 200ms ease-out}.arc .arc-Toast-root[data-swipe="end"]{animation:slide-right 100ms ease-out}@media (min-width:404px){.arc .arc-Toast-viewport{--arc-toast-viewport-width:384px;left:calc(50% - (var(--arc-toast-viewport-width)/2));max-width:var(--arc-toast-viewport-width);width:100%}}@keyframes hide{from{opacity:1}to{opacity:0}}@keyframes slide-right{from{opacity:1;transform:translateX(var(--radix-toast-swipe-end-x))}to{opacity:0;transform:translateX(calc(var(--radix-toast-swipe-end-x) + 100%))}}@keyframes slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}

package/dist/Truncate/Truncate.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var index_es = require('../_shared/cjs/index.es-0c2c97f4.js');
 var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -11,8 +11,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /** Use `Truncate` component to shorten text with an ellipsis. Add a `title` attribute to the truncated element so the full text remains accessible. */
 var Truncate = function (_a) {
-    var _b = _a.maxWidth, maxWidth = _b === void 0 ? 100 : _b, title = _a.title, children = _a.children, props = filterDataAttrs.__rest(_a, ["maxWidth", "title", "children"]);
-    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: "arc-Truncate", style: { maxWidth: "".concat(maxWidth, "%") }, title: title }, filterDataAttrs.filterDataAttrs(props)), children));
+    var _b = _a.maxWidth, maxWidth = _b === void 0 ? "100%" : _b, title = _a.title, children = _a.children, props = index_es.__rest(_a, ["maxWidth", "title", "children"]);
+    return (React__default["default"].createElement("div", index_es.__assign({ className: "arc-Truncate", style: { maxWidth: maxWidth }, title: title }, index_es.filterDataAttrs(props)), children));
 };
 
 exports.Truncate = Truncate;

package/dist/Truncate/Truncate.esm.js

@@ -1,10 +1,10 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-fc59ba8f.js';
 import React__default from 'react';
 
 /** Use `Truncate` component to shorten text with an ellipsis. Add a `title` attribute to the truncated element so the full text remains accessible. */
 var Truncate = function (_a) {
-    var _b = _a.maxWidth, maxWidth = _b === void 0 ? 100 : _b, title = _a.title, children = _a.children, props = __rest(_a, ["maxWidth", "title", "children"]);
-    return (React__default.createElement("div", __assign({ className: "arc-Truncate", style: { maxWidth: "".concat(maxWidth, "%") }, title: title }, filterDataAttrs(props)), children));
+    var _b = _a.maxWidth, maxWidth = _b === void 0 ? "100%" : _b, title = _a.title, children = _a.children, props = __rest(_a, ["maxWidth", "title", "children"]);
+    return (React__default.createElement("div", __assign({ className: "arc-Truncate", style: { maxWidth: maxWidth }, title: title }, filterDataAttrs(props)), children));
 };
 
 export { Truncate };

package/dist/Truncate/styles.css

@@ -0,0 +1 @@
+.arc .arc-Truncate>*,.arc .arc-Truncate{display:inherit;overflow:hidden;text-overflow:ellipsis;vertical-align:baseline;vertical-align:initial;white-space:nowrap}

package/dist/TypographyCard/TypographyCard.cjs.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index_es = require('../_shared/cjs/index.es-0c2c97f4.js');
+var React = require('react');
+var index = require('../_shared/cjs/index-9947ac13.js');
+var Surface = require('../_shared/cjs/Surface-ca708a8c.js');
+var CardHeading = require('../_shared/cjs/CardHeading-a7d8d472.js');
+var CardFooter = require('../_shared/cjs/CardFooter-facb09e6.js');
+require('../_shared/cjs/Heading-b4b65724.js');
+require('../_shared/cjs/BtIconArrowRight.esm-6053bb79.js');
+require('../_shared/cjs/BtIconPlayFill.esm-b8997cfc.js');
+require('../_shared/cjs/Icon-5dd78f2b.js');
+require('../_shared/cjs/index-28fbfd5b.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/** Use `TypographyCard` for content that benefits from larger and energetic typography. */
+var TypographyCard = function (_a) {
+    var url = _a.url, onClick = _a.onClick, heading = _a.heading, metaText = _a.metaText, label = _a.label, minHeight = _a.minHeight, _b = _a.headingSize, headingSize = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.pathway, pathway = _d === void 0 ? "light" : _d, _e = _a.buttonIcon, buttonIcon = _e === void 0 ? "arrow" : _e, _f = _a.headingLevel, headingLevel = _f === void 0 ? "2" : _f, props = index_es.__rest(_a, ["url", "onClick", "heading", "metaText", "label", "minHeight", "headingSize", "linkData", "pathway", "buttonIcon", "headingLevel"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var _g = React.useState(false), showHoverState = _g[0], setShowHoverState = _g[1];
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
+    var isDarkPathway = pathway === "dark";
+    return (React__default["default"].createElement("div", index_es.__assign({ style: { minHeight: minHeight }, className: index.classNames("arc-TypographyCard", {
+            "arc-TypographyCard--outlined": showHoverState,
+            "arc-TypographyCard--darkPathway": isDarkPathway,
+            "arc-TypographyCard--lightPathway": !isDarkPathway,
+            "arc-TypographyCard--onDarkSurface": surface === "dark"
+        }) }, index_es.filterDataAttrs(props)),
+        React__default["default"].createElement("div", { className: "arc-TypographyCard-contentContainer" },
+            label && (React__default["default"].createElement("div", { className: "arc-TypographyCard-label" }, label.toUpperCase())),
+            React__default["default"].createElement(CardHeading.CardHeading, { size: headingSize, linkData: linkData, heading: heading, headingLevel: headingLevel, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) })),
+        React__default["default"].createElement(CardFooter.CardFooter, { showButton: true, isDarkPathway: isDarkPathway, buttonIcon: buttonIcon, metaText: metaText, isHovered: showHoverState })));
+};
+
+exports.TypographyCard = TypographyCard;

package/dist/TypographyCard/TypographyCard.esm.js

@@ -0,0 +1,32 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-fc59ba8f.js';
+import React__default, { useContext, useState } from 'react';
+import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
+import { C as Context } from '../_shared/esm/Surface-201aa0d6.js';
+import { C as CardHeading } from '../_shared/esm/CardHeading-4e020d2e.js';
+import { C as CardFooter } from '../_shared/esm/CardFooter-97261b1c.js';
+import '../_shared/esm/Heading-e83f0d49.js';
+import '../_shared/esm/BtIconArrowRight.esm-93da96bb.js';
+import '../_shared/esm/BtIconPlayFill.esm-05fc0344.js';
+import '../_shared/esm/Icon-6fef56b3.js';
+import '../_shared/esm/index-ce6dee84.js';
+
+/** Use `TypographyCard` for content that benefits from larger and energetic typography. */
+var TypographyCard = function (_a) {
+    var url = _a.url, onClick = _a.onClick, heading = _a.heading, metaText = _a.metaText, label = _a.label, minHeight = _a.minHeight, _b = _a.headingSize, headingSize = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.pathway, pathway = _d === void 0 ? "light" : _d, _e = _a.buttonIcon, buttonIcon = _e === void 0 ? "arrow" : _e, _f = _a.headingLevel, headingLevel = _f === void 0 ? "2" : _f, props = __rest(_a, ["url", "onClick", "heading", "metaText", "label", "minHeight", "headingSize", "linkData", "pathway", "buttonIcon", "headingLevel"]);
+    var surface = useContext(Context).surface;
+    var _g = useState(false), showHoverState = _g[0], setShowHoverState = _g[1];
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
+    var isDarkPathway = pathway === "dark";
+    return (React__default.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames("arc-TypographyCard", {
+            "arc-TypographyCard--outlined": showHoverState,
+            "arc-TypographyCard--darkPathway": isDarkPathway,
+            "arc-TypographyCard--lightPathway": !isDarkPathway,
+            "arc-TypographyCard--onDarkSurface": surface === "dark"
+        }) }, filterDataAttrs(props)),
+        React__default.createElement("div", { className: "arc-TypographyCard-contentContainer" },
+            label && (React__default.createElement("div", { className: "arc-TypographyCard-label" }, label.toUpperCase())),
+            React__default.createElement(CardHeading, { size: headingSize, linkData: linkData, heading: heading, headingLevel: headingLevel, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) })),
+        React__default.createElement(CardFooter, { showButton: true, isDarkPathway: isDarkPathway, buttonIcon: buttonIcon, metaText: metaText, isHovered: showHoverState })));
+};
+
+export { TypographyCard };

package/dist/TypographyCard/package.json

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

package/dist/TypographyCard/styles.css

@@ -0,0 +1 @@
+.arc .arc-TypographyCard{border-radius:var(--card-border-radius-s);box-shadow:0 0 1px var(--card-border-weight-s) var(--card-colors-light-border-default);color:var(--card-colors-light-text-default);display:flex;flex-direction:column;height:100%;outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px;overflow:hidden;padding:var(--card-padding-s);position:relative;transition:outline 0.2s ease-in-out}.arc .arc-TypographyCard-contentContainer{display:flex;flex:1 1 auto;flex-direction:column;margin-bottom:24px}.arc .arc-TypographyCard-label{color:var(--card-colors-light-text-support);font:var(--sem-type-body-semi-s);margin-bottom:var(--card-gap-m)}.arc .arc-TypographyCard--outlined{box-shadow:0 0 0 2px var(--card-colors-light-border-hover)}.arc .arc-TypographyCard--outlined:not(.arc-TypographyCard--darkPathway) .arc-CardHeading-link{color:var(--card-colors-light-text-hover)}.arc .arc-TypographyCard--darkPathway.arc-TypographyCard--outlined .arc-CardHeading{color:var(--card-colors-dark-text-hover)}.arc .arc-TypographyCard--darkPathway.arc-TypographyCard--outlined{box-shadow:0 0 0 2px var(--card-colors-dark-border-hover)}.arc .arc-TypographyCard--darkPathway.arc-TypographyCard--outlined[focus-within]{box-shadow:0 0 0 2px transparent}.arc .arc-TypographyCard--darkPathway.arc-TypographyCard--outlined:focus-within{box-shadow:0 0 0 2px transparent}.arc .arc-TypographyCard--outlined[focus-within]{box-shadow:0 0 0 1px var(--card-colors-light-border-default);outline-color:var(--focus-colors-light-border-subtle)}.arc .arc-TypographyCard--outlined:focus-within{box-shadow:0 0 0 1px var(--card-colors-light-border-default);outline-color:var(--focus-colors-light-border-subtle)}.arc .arc-TypographyCard--lightPathway{background:var(--card-colors-light-bg-emphasis)}.arc .arc-TypographyCard--darkPathway{background:var(--card-colors-dark-bg-emphasis);box-shadow:0 0 0 1px transparent;color:var(--card-colors-dark-text-default)}.arc .arc-TypographyCard--darkPathway .arc-TypographyCard-label{color:var(--card-colors-dark-text-support)}.arc .arc-TypographyCard--onDarkSurface.arc-TypographyCard--outlined[focus-within]{box-shadow:0 0 0 1px transparent;outline-color:var(--focus-colors-dark-border-subtle)}.arc .arc-TypographyCard--onDarkSurface.arc-TypographyCard--outlined:focus-within{box-shadow:0 0 0 1px transparent;outline-color:var(--focus-colors-dark-border-subtle)}@media (min-width:636px){.arc .arc-TypographyCard{padding:var(--card-padding-m)}}

package/dist/UniversalHeader/UniversalHeader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var UniversalHeader = require('../_shared/cjs/UniversalHeader-5e43d320.js');
-require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var UniversalHeader = require('../_shared/cjs/UniversalHeader-de415648.js');
+require('../_shared/cjs/index.es-0c2c97f4.js');
 require('react');
-require('../_shared/cjs/Surface-038db6e1.js');
+require('../_shared/cjs/Surface-ca708a8c.js');
 require('../_shared/cjs/index-9947ac13.js');
 
 

package/dist/UniversalHeader/UniversalHeader.esm.js

@@ -1,5 +1,5 @@
-export { U as UniversalHeader } from '../_shared/esm/UniversalHeader-b4c1577c.js';
-import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+export { U as UniversalHeader } from '../_shared/esm/UniversalHeader-15169a0d.js';
+import '../_shared/esm/index.es-fc59ba8f.js';
 import 'react';
-import '../_shared/esm/Surface-0ca6817d.js';
+import '../_shared/esm/Surface-201aa0d6.js';
 import '../_shared/esm/index-2e73c2e9.js';

package/dist/UniversalHeader/styles.css

@@ -0,0 +1 @@
+.arc .arc-UniversalHeader{color:var(--universal-header-colors-light-text-default);position:relative}.arc .arc-UniversalHeader::after,.arc .arc-UniversalHeader::before{bottom:0;content:"";pointer-events:none;position:absolute;top:0}.arc .arc-UniversalHeader::after{background-image:linear-gradient(to right,rgba(240,240,240,0),rgba(240,240,240,1) 100%);right:0;width:24px}.arc .arc-UniversalHeader::before{background-image:linear-gradient(to left,rgba(240,240,240,0),rgba(240,240,240,1) 100%);left:0;width:16px}@media (min-width:636px){.arc .arc-UniversalHeader::before{width:24px}}.arc .arc-UniversalHeader-items{align-items:center;display:flex;list-style:none;margin:0 auto;max-width:620px;overflow-x:auto;padding-bottom:var(--universal-header-padding-s);padding-left:var(--universal-header-padding-m);padding-right:var(--universal-header-padding-m);padding-top:var(--universal-header-padding-s);width:100%}@media (min-width:636px){.arc .arc-UniversalHeader-items{max-width:1008px;padding-left:var(--universal-header-padding-l);padding-right:var(--universal-header-padding-l)}}@media (min-width:1024px){.arc .arc-UniversalHeader-items{max-width:1280px;padding-left:var(--universal-header-padding-xl);padding-right:var(--universal-header-padding-xl)}}.arc .arc-UniversalHeader-link{color:inherit;display:block;font:var(--sem-type-body-reg-xs);margin-right:var(--universal-header-gap-l);text-decoration:none;white-space:nowrap}.arc .arc-UniversalHeader-link:focus-visible{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-UniversalHeader-link:hover{color:var(--universal-header-colors-light-text-hover);text-decoration:underline}.arc .arc-UniversalHeader-contentSlot{margin-left:auto}

package/dist/VerticalSpace/VerticalSpace.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var VerticalSpace = require('../_shared/cjs/VerticalSpace-dc53bb70.js');
-require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-a5cf4d4e.js');
+require('../_shared/cjs/index.es-0c2c97f4.js');
 require('../_shared/cjs/index-9947ac13.js');
 require('react');