@arc-ui/components 11.24.1 → 12.0.0-beta.3

package/dist/_shared/cjs/{CardFooter-ff015d7d.js → CardFooter-5414bc4f.js}

@@ -2,9 +2,10 @@
 
 var React = require('react');
 var index = require('./index-9947ac13.js');
-var BtIconArrowRight_esm = require('./BtIconArrowRight.esm-50d96943.js');
-var BtIconArrowRightFill_esm = require('./BtIconArrowRightFill.esm-435cf4bd.js');
-var Icon = require('./Icon-b46897a3.js');
+var BtIconArrowRight_esm = require('./BtIconArrowRight.esm-5989f2ca.js');
+var BtIconPlayFill_esm = require('./BtIconPlayFill.esm-b8997cfc.js');
+var Icon = require('./Icon-0ec0c1fb.js');
+var index$1 = require('./index-7e31a45b.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,7 +32,7 @@ const BtIconPlay = (props) =>
     }),
   );
 
-const BtIconPlayFill = (props) =>
+const BtIconArrowRightFill = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
@@ -43,11 +44,7 @@ const BtIconPlayFill = (props) =>
     ),
     /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M13.16113,11.76172a.10284.10284,0,0,0-.10742,0A.10229.10229,0,0,0,13,11.85449v8.2876a.10314.10314,0,0,0,.05371.09326.10451.10451,0,0,0,.10742.00049l7.17774-4.14453a.10285.10285,0,0,0,.05371-.09277.10421.10421,0,0,0-.05371-.09375Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm4.83887,14.957-7.17774,4.14453A1.10791,1.10791,0,0,1,12,20.14209v-8.2876a1.107,1.107,0,0,1,1.66113-.95849l7.17774,4.14355a1.10688,1.10688,0,0,1,0,1.91748Z",
+      d: "M2,16A14,14,0,1,0,16,2,14,14,0,0,0,2,16Zm16.85352-4.35352L23.207,16l-4.35351,4.35352a.5.5,0,0,1-.707-.707L21.293,16.5H9.5a.5.5,0,0,1,0-1H21.293l-3.14649-3.14648a.5.5,0,0,1,.707-.707Z",
       fill: "currentColor",
     }),
   );
@@ -57,17 +54,17 @@ var CardFooter = function (_a) {
     var icons = {
         arrow: {
             regular: BtIconArrowRight_esm.BtIconArrowRight,
-            filled: BtIconArrowRightFill_esm.BtIconArrowRightFill
+            filled: BtIconArrowRightFill
         },
         play: {
             regular: BtIconPlay,
-            filled: BtIconPlayFill
+            filled: BtIconPlayFill_esm.BtIconPlayFill
         }
     };
     return (React__default["default"].createElement("div", { className: index.classNames("arc-CardFooter", {
             "arc-CardFooter--darkPathway": isDarkPathway
         }) },
-        React__default["default"].createElement("div", { className: "arc-CardFooter-metaTextContainer" }, metaText && (React__default["default"].createElement("span", { className: "arc-CardFooter-metaText" }, metaText))),
+        React__default["default"].createElement("div", { className: "arc-CardFooter-metaTextContainer" }, metaText && (React__default["default"].createElement("div", { className: "arc-CardFooter-metaText" }, index$1.isDate(metaText) ? (React__default["default"].createElement("time", { dateTime: index$1.format(metaText, "yyyy-MM-dd") }, index$1.format(metaText, "LLLL d, yyyy"))) : (React__default["default"].createElement("span", null, metaText))))),
         showButton && (React__default["default"].createElement("div", null,
             React__default["default"].createElement("div", { className: "arc-CardFooter-button" },
                 React__default["default"].createElement("div", { className: "arc-CardFooter-buttonIcon" },

package/dist/_shared/cjs/Checkbox-0e423653.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var index = require('./index-df60851b.js');
+var React = require('react');
+var index$1 = require('./index-9947ac13.js');
+var FormControl = require('./FormControl-88d48f42.js');
+var Surface = require('./Surface-8599dbe4.js');
+var ThemeIcon = require('./ThemeIcon-ee814862.js');
+var VisuallyHidden = require('./VisuallyHidden-b0de4c7b.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ *  Use `Checkbox` to allow users to select individual options.
+ */
+var Checkbox = React.forwardRef(function (_a, ref) {
+    var _b = _a.checked, checked = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, label = _a.label, _e = _a.hideLabel, hideLabel = _e === void 0 ? false : _e, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _f = _a.size, size = _f === void 0 ? "l" : _f, value = _a.value, _g = _a.checkboxAlignment, checkboxAlignment = _g === void 0 ? "center" : _g, props = index.__rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "hideLabel", "name", "onBlur", "onChange", "size", "value", "checkboxAlignment"]);
+    var requirementStatus = React.useContext(FormControl.Context).requirementStatus;
+    var surface = React.useContext(Surface.Context).surface;
+    var _h = FormControl.useAriaDescribedby({
+        id: id,
+        errorMessage: errorMessage
+    }), ariaDescribedby = _h.ariaDescribedby, idError = _h.idError;
+    var idLabel = "".concat(id, "-label");
+    var checkedProps = {};
+    if (typeof onChange === "function") {
+        checkedProps.checked = checked;
+    }
+    else if (checked && !onChange) {
+        checkedProps.defaultChecked = true;
+    }
+    if (requirementStatus === "required") {
+        isRequired = true;
+    }
+    return (React__default["default"].createElement("div", { className: index$1.classNames({
+            "arc-Checkbox": true,
+            "arc-Checkbox--disabled": isDisabled,
+            "arc-Checkbox--invalid": errorMessage,
+            "arc-Checkbox--small": size === "s",
+            "arc-Checkbox--onDarkSurface": surface === "dark"
+        }) },
+        React__default["default"].createElement("label", { id: idLabel, htmlFor: id, className: index$1.classNames("arc-Checkbox-label", {
+                "arc-Checkbox-label--top": checkboxAlignment === "top"
+            }) },
+            React__default["default"].createElement("input", index.__assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", "aria-checked": checked ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, index.filterDataAttrs(props))),
+            React__default["default"].createElement("span", { className: "arc-Checkbox-box" },
+                React__default["default"].createElement(ThemeIcon.ThemeIcon, { icon: "checkboxChecked" })),
+            React__default["default"].createElement("span", index.__assign({}, (checkboxAlignment === "top" && {
+                className: "arc-Checkbox-content--marginTop"
+            })), hideLabel ? (React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null,
+                label,
+                !isRequired && requirementStatus !== "optional" ? (React__default["default"].createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
+                helper && (React__default["default"].createElement("span", { className: "arc-Checkbox-helper" }, helper)))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+                label,
+                !isRequired && requirementStatus !== "optional" ? (React__default["default"].createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
+                helper && (React__default["default"].createElement("span", { className: "arc-Checkbox-helper" }, helper)))))),
+        errorMessage && (React__default["default"].createElement("div", { id: idError, className: "arc-Checkbox-error" },
+            React__default["default"].createElement("span", { className: "arc-Checkbox-error--icon" },
+                React__default["default"].createElement(ThemeIcon.ThemeIcon, { icon: "checkboxError" })),
+            errorMessage))));
+});
+
+exports.Checkbox = Checkbox;

package/dist/_shared/cjs/{Columns-ae4f8cef.js → Columns-1224bdff.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
-var index = require('./index-9947ac13.js');
+var index = require('./index-df60851b.js');
+var index$1 = require('./index-9947ac13.js');
 var React = require('react');
-var suffixModifier = require('./suffix-modifier-64dcd338.js');
+var suffixModifier = require('./suffix-modifier-c8a34402.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -13,24 +13,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * Use `Columns` to compose layouts on a 12-column grid.
  */
 var Columns = function (_a) {
-    var children = _a.children, _b = _a.isGutterless, isGutterless = _b === void 0 ? false : _b, props = filterDataAttrs.__rest(_a, ["children", "isGutterless"]);
-    React.useEffect(function () {
-        React__default["default"].Children.map(children, function (item) {
-            if (item && item.type !== Col) {
-                throw new Error("Illegal child passed to <Columns />. Ensure to only use <Columns.Col />.");
-            }
-        });
-    }, [children]);
-    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames({
+    var children = _a.children, _b = _a.isGutterless, isGutterless = _b === void 0 ? false : _b, props = index.__rest(_a, ["children", "isGutterless"]);
+    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames({
             "arc-Columns": true,
             "arc-Columns--gutterless": isGutterless
-        }) }, filterDataAttrs.filterDataAttrs(props)),
+        }) }, index.filterDataAttrs(props)),
         React__default["default"].createElement("div", { className: "arc-Columns-inner" }, children)));
 };
 var Col = function (_a) {
     var _b;
-    var align = _a.align, children = _a.children, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, offset = _a.offset, offsetS = _a.offsetS, offsetM = _a.offsetM, offsetL = _a.offsetL, offsetXL = _a.offsetXL, span = _a.span, spanS = _a.spanS, spanM = _a.spanM, spanL = _a.spanL, spanXL = _a.spanXL, props = filterDataAttrs.__rest(_a, ["align", "children", "isDebugVisible", "offset", "offsetS", "offsetM", "offsetL", "offsetXL", "span", "spanS", "spanM", "spanL", "spanXL"]);
-    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames((_b = {},
+    var align = _a.align, children = _a.children, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, offset = _a.offset, offsetS = _a.offsetS, offsetM = _a.offsetM, offsetL = _a.offsetL, offsetXL = _a.offsetXL, span = _a.span, spanS = _a.spanS, spanM = _a.spanM, spanL = _a.spanL, spanXL = _a.spanXL, props = index.__rest(_a, ["align", "children", "isDebugVisible", "offset", "offsetS", "offsetM", "offsetL", "offsetXL", "span", "spanS", "spanM", "spanL", "spanXL"]);
+    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {},
             _b["arc-Columns-col"] = true,
             _b[suffixModifier.suffixModifier("arc-Columns-col--align", align || "")] = align,
             _b["arc-Columns-col--".concat(span)] = typeof span !== "undefined",
@@ -49,7 +42,7 @@ var Col = function (_a) {
             _b["arc-Columns-col--offsetL".concat(offsetL)] = typeof offsetL !== "undefined",
             _b["arc-Columns-col--offsetXL".concat(offsetXL)] = typeof offsetXL !== "undefined",
             _b["arc-Columns-col--debugVisible"] = isDebugVisible,
-            _b)) }, filterDataAttrs.filterDataAttrs(props)), children));
+            _b)) }, index.filterDataAttrs(props)), children));
 };
 Columns.Col = Col;