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

package/dist/_shared/cjs/CardFooter-facb09e6.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var React = require('react');
+var index = require('./index-9947ac13.js');
+var BtIconArrowRight_esm = require('./BtIconArrowRight.esm-6053bb79.js');
+var BtIconPlayFill_esm = require('./BtIconPlayFill.esm-b8997cfc.js');
+var Icon = require('./Icon-5dd78f2b.js');
+var index$1 = require('./index-28fbfd5b.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const BtIconPlay = (props) =>
+  /*#__PURE__*/ React__default["default"].createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default["default"].createElement("defs", null),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      d: "M20.83887,15.03955,13.66113,10.896A1.107,1.107,0,0,0,12,11.85449v8.2876a1.10534,1.10534,0,0,0,1.66113.95947L20.83887,16.957a1.10688,1.10688,0,0,0,0-1.91748Zm-.5,1.05176-7.17774,4.14453a.10437.10437,0,0,1-.10742-.00049A.10314.10314,0,0,1,13,20.14209v-8.2876a.10229.10229,0,0,1,.05371-.09277.10284.10284,0,0,1,.10742,0l7.17774,4.14307a.10421.10421,0,0,1,.05371.09375A.10285.10285,0,0,1,20.33887,16.09131Z",
+      fill: "currentColor",
+    }),
+  );
+
+const BtIconArrowRightFill = (props) =>
+  /*#__PURE__*/ React__default["default"].createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default["default"].createElement("defs", null),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      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",
+    }),
+  );
+
+var CardFooter = function (_a) {
+    var metaText = _a.metaText, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isDarkPathway, isDarkPathway = _c === void 0 ? false : _c, _d = _a.showButton, showButton = _d === void 0 ? true : _d, _e = _a.isHovered, isHovered = _e === void 0 ? false : _e;
+    var icons = {
+        arrow: {
+            regular: BtIconArrowRight_esm.BtIconArrowRight,
+            filled: BtIconArrowRightFill
+        },
+        play: {
+            regular: BtIconPlay,
+            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("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" },
+                    React__default["default"].createElement("div", { className: index.classNames("arc-CardFooter-buttonIconRight", {
+                            "arc-CardFooter-buttonIconRight--isHovered": isHovered
+                        }) },
+                        React__default["default"].createElement(Icon.Icon, { icon: icons[buttonIcon].regular })),
+                    React__default["default"].createElement("div", { className: "arc-CardFooter-buttonIconLeft" },
+                        React__default["default"].createElement(Icon.Icon, { icon: icons[buttonIcon].regular }))))))));
+};
+
+exports.CardFooter = CardFooter;

package/dist/_shared/cjs/CardHeading-a7d8d472.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var index_es = require('./index.es-0c2c97f4.js');
+var React = require('react');
+var Heading = require('./Heading-b4b65724.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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__default["default"].createElement(Heading.Heading, { level: headingLevel, size: size }, href ? (React__default["default"].createElement("a", index_es.__assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, index_es.filterDataAttrs(linkData)), heading)) : (heading)));
+};
+
+exports.CardHeading = CardHeading;

package/dist/_shared/cjs/Checkbox-d34c19c4.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var index_es = require('./index.es-0c2c97f4.js');
+var React = require('react');
+var index = require('./index-9947ac13.js');
+var FormControl = require('./FormControl-09c28bbb.js');
+var Surface = require('./Surface-ca708a8c.js');
+var ThemeIcon = require('./ThemeIcon-cf6ddb34.js');
+var VisuallyHidden = require('./VisuallyHidden-c691ea4d.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 ? "m" : _f, value = _a.value, _g = _a.checkboxAlignment, checkboxAlignment = _g === void 0 ? "center" : _g, props = index_es.__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 tickSize = {
+        s: { width: 14, height: 11 },
+        m: { width: 18, height: 14 }
+    };
+    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.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.classNames("arc-Checkbox-label", {
+                "arc-Checkbox-label--top": checkboxAlignment === "top"
+            }) },
+            React__default["default"].createElement("input", index_es.__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_es.filterDataAttrs(props))),
+            React__default["default"].createElement("span", { className: "arc-Checkbox-box" },
+                React__default["default"].createElement("svg", { style: tickSize[size], viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                    React__default["default"].createElement("path", { d: "M5.99459 14L0.350576 8.23277C0.126079 8.00285 0 7.69132 0 7.36653C0 7.04173 0.126079 6.7302 0.350576 6.50028C0.578979 6.27752 0.88258 6.15324 1.19832 6.15324C1.51405 6.15324 1.81765 6.27752 2.04606 6.50028L5.99459 10.535L15.9385 0.374054C16.0491 0.25703 16.1814 0.163688 16.3277 0.0994738C16.474 0.0352599 16.6313 0.00145997 16.7905 4.626e-05C16.9497 -0.00136745 17.1076 0.0296342 17.255 0.0912406C17.4023 0.152847 17.5362 0.243825 17.6488 0.358867C17.7614 0.473908 17.8504 0.610709 17.9107 0.761287C17.971 0.911865 18.0013 1.0732 18 1.23589C17.9986 1.39858 17.9655 1.55936 17.9026 1.70884C17.8398 1.85833 17.7485 1.99352 17.6339 2.10655L5.99459 14Z", fill: "currentColor" }))),
+            React__default["default"].createElement("span", index_es.__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-e5f9406b.js}

@@ -1,9 +1,8 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
+var index_es = require('./index.es-0c2c97f4.js');
 var index = require('./index-9947ac13.js');
 var React = require('react');
-var suffixModifier = require('./suffix-modifier-64dcd338.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -13,26 +12,19 @@ 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_es.__rest(_a, ["children", "isGutterless"]);
+    return (React__default["default"].createElement("div", index_es.__assign({ className: index.classNames({
             "arc-Columns": true,
             "arc-Columns--gutterless": isGutterless
-        }) }, filterDataAttrs.filterDataAttrs(props)),
+        }) }, index_es.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_es.__rest(_a, ["align", "children", "isDebugVisible", "offset", "offsetS", "offsetM", "offsetL", "offsetXL", "span", "spanS", "spanM", "spanL", "spanXL"]);
+    return (React__default["default"].createElement("div", index_es.__assign({ className: index.classNames((_b = {},
             _b["arc-Columns-col"] = true,
-            _b[suffixModifier.suffixModifier("arc-Columns-col--align", align || "")] = align,
+            _b[index_es.suffixModifier("arc-Columns-col--align", align || "")] = align,
             _b["arc-Columns-col--".concat(span)] = typeof span !== "undefined",
             _b["arc-Columns-col--s".concat(spanS)] = typeof spanS !== "undefined",
             _b["arc-Columns-col--m".concat(spanM)] = typeof spanM !== "undefined",
@@ -49,7 +41,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_es.filterDataAttrs(props)), children));
 };
 Columns.Col = Col;