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

package/lib/_shared/cjs/DatePicker-Dt4faA_N.cjs

@@ -1,334 +0,0 @@
-'use strict';
-
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
-var React = require('react');
-var index$2 = require('./index-CTlXMLug.cjs');
-var index$3 = require('./index-CaO6cOF0.cjs');
-var Calendar = require('./Calendar-B-va25n2.cjs');
-var index = require('./index-BLRjGROQ.cjs');
-var index$1 = require('./index-DXNM3D1d.cjs');
-var TextInput = require('./TextInput-ByySubi5.cjs');
-
-/**
- * @name startOfDay
- * @category Day Helpers
- * @summary Return the start of a day for the given date.
- *
- * @description
- * Return the start of a day for the given date.
- * The result will be in the local timezone.
- *
- * @param {Date|Number} date - the original date
- * @returns {Date} the start of a day
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // The start of a day for 2 September 2014 11:55:00:
- * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Tue Sep 02 2014 00:00:00
- */
-function startOfDay(dirtyDate) {
-  index.requiredArgs(1, arguments);
-  var date = index.toDate(dirtyDate);
-  date.setHours(0, 0, 0, 0);
-  return date;
-}
-
-/**
- * @name isSameDay
- * @category Day Helpers
- * @summary Are the given dates in the same day (and year and month)?
- *
- * @description
- * Are the given dates in the same day (and year and month)?
- *
- * @param {Date|Number} dateLeft - the first date to check
- * @param {Date|Number} dateRight - the second date to check
- * @returns {Boolean} the dates are in the same day (and year and month)
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day?
- * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0))
- * //=> true
- *
- * @example
- * // Are 4 September and 4 October in the same day?
- * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4))
- * //=> false
- *
- * @example
- * // Are 4 September, 2014 and 4 September, 2015 in the same day?
- * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4))
- * //=> false
- */
-function isSameDay(dirtyDateLeft, dirtyDateRight) {
-  index.requiredArgs(2, arguments);
-  var dateLeftStartOfDay = startOfDay(dirtyDateLeft);
-  var dateRightStartOfDay = startOfDay(dirtyDateRight);
-  return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime();
-}
-
-var parseRangeString = function (value) {
-    if (value === void 0) { value = ""; }
-    var _a = value.replace(/\s/g, "").split("-"), _b = _a[0], start = _b === void 0 ? "" : _b, _c = _a[1], end = _c === void 0 ? "" : _c;
-    var _d = start.split("/"), startDay = _d[0], startMonth = _d[1], startYear = _d[2];
-    var _e = end.split("/"), endDay = _e[0], endMonth = _e[1], endYear = _e[2];
-    return {
-        start: {
-            date: start,
-            day: startDay,
-            month: startMonth,
-            year: startYear,
-        },
-        end: {
-            date: end,
-            day: endDay,
-            month: endMonth,
-            year: endYear,
-        },
-    };
-};
-
-var parseDateString = function (value) {
-    var _a = value.split("/"), day = _a[0], month = _a[1], year = _a[2];
-    return {
-        day: day,
-        month: month,
-        year: year,
-    };
-};
-
-var isDateValid = function (value) {
-    if (value === void 0) { value = ""; }
-    var _a = value.split("/"), day = _a[0], month = _a[1], year = _a[2];
-    return (/^\d{2}\/\d{2}\/\d{4}$/.test(value) &&
-        index.isValid(new Date("".concat(year, "-").concat(month, "-").concat(day))));
-};
-
-var isRangeValid = function (value) {
-    if (value === void 0) { value = ""; }
-    var _a = value.replace(/\s/g, "").split("-"), _b = _a[0], start = _b === void 0 ? "" : _b, _c = _a[1], end = _c === void 0 ? "" : _c;
-    return isDateValid(start) && isDateValid(end);
-};
-
-var DATE_FORMAT = "dd/MM/yyyy";
-
-var formatDate = function (value) {
-    return index.format(value, DATE_FORMAT);
-};
-
-var isDisabledDate = function (disabledDates, date) {
-    return Boolean(disabledDates &&
-        disabledDates.find(function (disabledDate) { return isSameDay(date, disabledDate); }));
-};
-
-var convertDateStringToDate = function (value) {
-    if (value === void 0) { value = ""; }
-    var _a = parseDateString(value), day = _a.day, month = _a.month, year = _a.year;
-    var isValidDate = isDateValid(value);
-    return isValidDate ? new Date("".concat(year, "-").concat(month, "-").concat(day)) : new Date();
-};
-
-var convertRangeStringToDates = function (value) {
-    if (value === void 0) { value = ""; }
-    var _a = parseRangeString(value), start = _a.start, end = _a.end;
-    return filterAttrs.__spreadArray(filterAttrs.__spreadArray([], (isDateValid(start.date)
-        ? [new Date("".concat(start.year, "-").concat(start.month, "-").concat(start.day))]
-        : []), true), (isDateValid(end.date)
-        ? [new Date("".concat(end.year, "-").concat(end.month, "-").concat(end.day))]
-        : []), true);
-};
-
-function validateRangeOnBlur(_a) {
-    var value = _a.value, minDate = _a.minDate, maxDate = _a.maxDate, disabledDates = _a.disabledDates, previousValidValue = _a.previousValidValue, dispatchChangeEvent = _a.dispatchChangeEvent, blurEvent = _a.blurEvent;
-    if (!isRangeValid(value))
-        return;
-    var _b = convertRangeStringToDates(value), start = _b[0], end = _b[1];
-    var isStartBeforeMin = minDate && Calendar.isBefore(start, minDate);
-    var isEndAfterMax = maxDate && Calendar.isAfter(end, maxDate);
-    var isStartDisabled = isDisabledDate(disabledDates, start);
-    var isEndDisabled = isDisabledDate(disabledDates, end);
-    if (isStartBeforeMin && isEndAfterMax) {
-        return dispatchChangeEvent(blurEvent, "".concat(formatDate(minDate), " - ").concat(formatDate(maxDate)));
-    }
-    if (isStartBeforeMin) {
-        return dispatchChangeEvent(blurEvent, "".concat(formatDate(minDate), " - ").concat(formatDate(end)));
-    }
-    if (isEndAfterMax) {
-        return dispatchChangeEvent(blurEvent, "".concat(formatDate(start), " - ").concat(formatDate(maxDate)));
-    }
-    if (isStartDisabled || isEndDisabled) {
-        var _c = previousValidValue
-            ? convertRangeStringToDates(previousValidValue)
-            : [], prevStart = _c[0], prevEnd = _c[1];
-        return dispatchChangeEvent(blurEvent, prevStart && prevEnd
-            ? "".concat(formatDate(prevStart), " - ").concat(formatDate(prevEnd))
-            : "");
-    }
-    if (Calendar.isAfter(start, end)) {
-        var _d = [start, end].sort(Calendar.compareAsc), orderedStart = _d[0], orderedEnd = _d[1];
-        return dispatchChangeEvent(blurEvent, "".concat(formatDate(orderedStart), " - ").concat(formatDate(orderedEnd)));
-    }
-}
-
-/**
- * Use `DatePicker` to clearly present available dates and allow users to choose a way to enter information.
- */
-var DatePicker = React.forwardRef(function (_a, ref) {
-    var errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, label = _a.label, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, size = _a.size, _b = _a.value, value = _b === void 0 ? "" : _b, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onDateSelect = _a.onDateSelect, onRangeSelect = _a.onRangeSelect, onClickDisclosure = _a.onClickDisclosure, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, type = _a.type, _c = _a.isFluid, isFluid = _c === void 0 ? false : _c, _d = _a.selectionType, selectionType = _d === void 0 ? "single" : _d, disabledDates = _a.disabledDates, minDate = _a.minDate, maxDate = _a.maxDate, props = filterAttrs.__rest(_a, ["errorMessage", "helper", "id", "label", "isDisabled", "isReadOnly", "isRequired", "size", "value", "name", "onBlur", "onChange", "onDateSelect", "onRangeSelect", "onClickDisclosure", "disclosureTitle", "disclosureText", "type", "isFluid", "selectionType", "disabledDates", "minDate", "maxDate"]);
-    var _e = index$1.useThemeElement(), themeElement = _e[0], setThemeElement = _e[1];
-    var _f = React.useState("Choose date"), ariaLabel = _f[0], setAriaLabel = _f[1];
-    var _g = React.useState(false), showCalendar = _g[0], setShowCalendar = _g[1];
-    var buttonRef = React.useRef(null);
-    var ourRef = React.useRef(null);
-    var previousValidValue = React.useRef(value);
-    var lowerCaseDateFormat = DATE_FORMAT.toLowerCase();
-    var placeHolder = selectionType === "range"
-        ? "".concat(lowerCaseDateFormat, " - ").concat(lowerCaseDateFormat)
-        : lowerCaseDateFormat;
-    React.useEffect(function () {
-        if (selectionType === "single" &&
-            isDateValid(value) &&
-            !isDisabledDate(disabledDates, convertDateStringToDate(value))) {
-            previousValidValue.current = value;
-        }
-        if (selectionType === "range" && isRangeValid(value)) {
-            var rangeHasDisabledDates = convertRangeStringToDates(value).some(function (rangeValue) { return isDisabledDate(disabledDates, rangeValue); });
-            if (!rangeHasDisabledDates) {
-                previousValidValue.current = value;
-            }
-        }
-    }, [value, disabledDates, selectionType]);
-    var getDatePickerRef = function (elementRef) {
-        ourRef.current = elementRef;
-        if (ref && typeof ref === "object") {
-            ref.current = elementRef;
-        }
-        if (ref && typeof ref === "function") {
-            ref(elementRef);
-        }
-    };
-    var dispatchChangeEvent = function (e, value) {
-        onChange &&
-            onChange(filterAttrs.__assign(filterAttrs.__assign({}, e), { target: filterAttrs.__assign(filterAttrs.__assign({}, e.target), { value: value }) }));
-    };
-    var handleRangeSelect = function (rangeSelection) {
-        var start = formatDate(rangeSelection.start);
-        var end = rangeSelection.end ? formatDate(rangeSelection.end) : null;
-        onRangeSelect &&
-            onRangeSelect(filterAttrs.__assign(filterAttrs.__assign({}, rangeSelection), { formattedRange: "".concat(start).concat(end ? " - ".concat(end) : "") }));
-        rangeSelection.isSelectionComplete && setShowCalendar(false);
-    };
-    var handleDateSelect = function (value) {
-        onDateSelect &&
-            onDateSelect({
-                date: value,
-                formattedDate: formatDate(value),
-            });
-        setShowCalendar(false);
-    };
-    var handleSingleSelectionBlur = function (e) {
-        if (value && isDateValid(value) && selectionType === "single") {
-            var _a = parseDateString(value), day = _a.day, month = _a.month, year = _a.year;
-            var date = new Date("".concat(year, "-").concat(month, "-").concat(day));
-            var isDateBeforeMinDate = minDate && Calendar.isBefore(date, minDate);
-            var isDateAfterMaxDate = maxDate && Calendar.isAfter(date, maxDate);
-            var isDisabledValue = isDisabledDate(disabledDates, date);
-            if (isDateBeforeMinDate) {
-                return dispatchChangeEvent(e, "".concat(formatDate(minDate)));
-            }
-            if (isDateAfterMaxDate) {
-                return dispatchChangeEvent(e, "".concat(formatDate(maxDate)));
-            }
-            if (isDisabledValue) {
-                var date_1 = previousValidValue.current
-                    ? convertDateStringToDate(previousValidValue.current)
-                    : new Date();
-                return dispatchChangeEvent(e, "".concat(formatDate(date_1)));
-            }
-        }
-    };
-    var handleRangeSelectionBlur = function (e) {
-        validateRangeOnBlur({
-            value: value,
-            minDate: minDate,
-            maxDate: maxDate,
-            disabledDates: disabledDates,
-            previousValidValue: previousValidValue.current,
-            dispatchChangeEvent: dispatchChangeEvent,
-            blurEvent: e,
-        });
-    };
-    var handleBlur = function (e) {
-        onBlur && onBlur(e);
-        if (selectionType === "single") {
-            handleSingleSelectionBlur(e);
-        }
-        if (selectionType === "range") {
-            handleRangeSelectionBlur(e);
-        }
-    };
-    var handleChange = function (e) {
-        onChange && onChange(e);
-    };
-    var handleCalendarOpenChange = function (isOpen) {
-        if (document.activeElement)
-            setShowCalendar(isOpen);
-    };
-    var handleIconClick = function () {
-        var _a;
-        !((_a = ourRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) &&
-            !isDisabled &&
-            !isReadOnly &&
-            setShowCalendar(true);
-    };
-    var handleIconFocus = function () {
-        if (selectionType === "range" && isRangeValid(value)) {
-            var _a = convertRangeStringToDates(value), start = _a[0], end = _a[1];
-            return setAriaLabel("Change dates, currently selected dates are ".concat(index.format(start, "EEEE do MMMM, yyyy"), " to ").concat(index.format(end, "EEEE do MMMM, yyyy")));
-        }
-        if (selectionType === "single" && isDateValid(value)) {
-            var date = convertDateStringToDate(value);
-            return setAriaLabel("Change date, currently selected date is ".concat(index.format(date, "EEEE do MMMM, yyyy")));
-        }
-        setAriaLabel("Choose Date");
-    };
-    var handleCalendarClose = function () {
-        var _a, _b;
-        if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.tagName) === "BODY") {
-            (_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-    };
-    var onCancelClick = function () {
-        setShowCalendar(false);
-    };
-    var handleAutoFocus = function (e) {
-        e.preventDefault();
-    };
-    return (React.createElement("div", { ref: setThemeElement, className: index$2.classNames({
-            "arc-DatePicker--constrained": !isFluid,
-        }) },
-        React.createElement(TextInput.TextInputWithPlaceHolder, filterAttrs.__assign({ ref: getDatePickerRef, iconButton: {
-                onClick: handleIconClick,
-                onFocus: handleIconFocus,
-                icon: "datePickerCalendar",
-                label: ariaLabel,
-                ref: buttonRef,
-            }, placeholder: placeHolder, errorMessage: errorMessage, helper: helper, id: id, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, label: label, maxLength: selectionType === "range" ? 23 : 10, name: name, onBlur: handleBlur, onChange: handleChange, onClickDisclosure: onClickDisclosure, type: "text", value: value, disclosureTitle: disclosureTitle, disclosureText: disclosureText, size: size }, props, filterAttrs.filterAttrs(props))),
-        React.createElement(index$3.Root2, filterAttrs.__assign({ open: showCalendar, onOpenChange: handleCalendarOpenChange }, filterAttrs.filterAttrs(props)),
-            React.createElement(index$3.Anchor2, null),
-            React.createElement(index$3.Portal, { container: themeElement },
-                React.createElement(index$3.Content2, { align: "start", "aria-modal": "true", "aria-label": "Choose Date", className: "arc-DatePicker-modal", onOpenAutoFocus: handleAutoFocus, onCloseAutoFocus: handleCalendarClose },
-                    React.createElement(Calendar.Calendar, { autoFocusOnMount: true, type: type, onCancelClick: onCancelClick, selectionType: selectionType, selectedDate: convertDateStringToDate(value), selectedRange: convertRangeStringToDates(value), disabledDates: disabledDates, minDate: minDate, maxDate: maxDate, onDateSelect: handleDateSelect, onRangeSelect: handleRangeSelect }))))));
-});
-
-exports.DATE_FORMAT = DATE_FORMAT;
-exports.DatePicker = DatePicker;
-exports.convertRangeStringToDates = convertRangeStringToDates;
-exports.formatDate = formatDate;
-exports.isDateValid = isDateValid;
-exports.isRangeValid = isRangeValid;
-exports.parseDateString = parseDateString;
-exports.parseRangeString = parseRangeString;
-exports.validateRangeOnBlur = validateRangeOnBlur;

package/lib/_shared/cjs/HeroButton-CrzkTUwP.cjs

@@ -1,82 +0,0 @@
-'use strict';
-
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
-var React = require('react');
-var index = require('./index-CTlXMLug.cjs');
-var index$1 = require('./index-DR8Rkav9.cjs');
-var Icon = require('./Icon-CzhyKqMd.cjs');
-var Surface = require('./Surface-BFx1yNsq.cjs');
-var Spinner = require('./Spinner-bbrOwxv2.cjs');
-
-/**
- * Do not edit directly
- * Generated file
- */
-
-const BtIconArrowAltRight =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M18.854 11.646a.5.5 0 0 0-.707.707l3.146 3.147H9.5a.5.5 0 0 0 0 1h11.793l-3.146 3.146a.5.5 0 1 0 .707.707L23.207 16Z'/%3e%3c/svg%3e";
-
-/**
- * Do not edit directly
- * Generated file
- */
-
-const BtIconArrowAltDown =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M20.354 18.146a.5.5 0 0 0-.707 0L16.5 21.293V9.5a.5.5 0 0 0-1 0v11.793l-3.146-3.146a.5.5 0 1 0-.707.707L16 23.207l4.354-4.354a.5.5 0 0 0 0-.707'/%3e%3c/svg%3e";
-
-/**
- * Do not edit directly
- * Generated file
- */
-
-const ArcIconPlay =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 56 56'%3e%3cpath fill='currentColor' d='M36.468 26.32 23.907 19.07A1.938 1.938 0 0 0 21 20.745V35.25a1.935 1.935 0 0 0 2.907 1.68l12.561-7.254a1.938 1.938 0 0 0 0-3.354m-.875 1.84-12.561 7.254a.18.18 0 0 1-.187 0 .18.18 0 0 1-.095-.165V20.745a.18.18 0 0 1 .095-.16.18.18 0 0 1 .187 0l12.561 7.25a.18.18 0 0 1 .095.164.18.18 0 0 1-.095.16'/%3e%3c/svg%3e";
-
-/**
- * Do not edit directly
- * Generated file
- */
-
-const ArcIconWarn =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M16 20.993a1 1 0 1 0 0 2 1 1 0 1 0 0-2M16.005 19.01a.5.5 0 0 0 .5-.5l.002-9.01a.5.5 0 0 0-1 0l-.002 9.01a.5.5 0 0 0 .5.5'/%3e%3c/svg%3e";
-
-var HeroButton = React.forwardRef(function (_a, ref) {
-    var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, ariaLabel = _a.ariaLabel, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, type = _a.type, form = _a.form, props = filterAttrs.__rest(_a, ["label", "buttonStyle", "icon", "ariaLabel", "isLoading", "onClick", "href", "id", "rel", "target", "type", "form"]);
-    var surface = React.useContext(Surface.Context).surface;
-    var HeroButtonClasses = index.classNames("arc-HeroButton", ["arc-HeroButton--".concat(index$1.camelcase(buttonStyle))], {
-        "arc-HeroButton--onDarkSurface": surface === "dark",
-        "arc-HeroButton--emptyLabel": !label,
-        "arc-HeroButton--isLoading": isLoading,
-        "arc-HeroButton--withIcon": icon,
-        "arc-HeroButton--hasGradient": buttonStyle.includes("-gradient"),
-    });
-    var HeroButtonIcons = {
-        "arrow-right": BtIconArrowAltRight,
-        "arrow-down": BtIconArrowAltDown,
-        play: ArcIconPlay,
-        warning: ArcIconWarn,
-    };
-    var commonProps = filterAttrs.__assign({ id: id, onClick: onClick, ref: ref }, filterAttrs.filterAttrs(props));
-    if (href && !isLoading) {
-        return (React.createElement("a", filterAttrs.__assign({}, commonProps, { className: HeroButtonClasses, href: href, rel: rel, "aria-label": ariaLabel, target: target }),
-            React.createElement("span", { className: index.classNames("arc-HeroButton-inner") },
-                label && React.createElement("span", { className: "arc-HeroButton-label" }, label),
-                isLoading && (React.createElement("span", { className: "arc-HeroButton-icon" },
-                    React.createElement(Spinner.Spinner, { size: "xxl" }))),
-                icon && !isLoading && (React.createElement("span", { className: "arc-HeroButton-icon" },
-                    React.createElement(Icon.Icon, { testId: "hero-button-icon", size: 48, icon: buttonStyle === "warning"
-                            ? HeroButtonIcons["warning"]
-                            : HeroButtonIcons[icon] }))))));
-    }
-    return (React.createElement("button", filterAttrs.__assign({}, commonProps, { className: HeroButtonClasses, "aria-label": ariaLabel, disabled: isLoading, type: type, form: form }),
-        React.createElement("span", { className: index.classNames("arc-HeroButton-inner") },
-            label && React.createElement("span", { className: "arc-HeroButton-label" }, label),
-            icon && !isLoading && (React.createElement("span", { className: "arc-HeroButton-icon" },
-                React.createElement(Icon.Icon, { testId: "hero-button-icon", size: 48, icon: buttonStyle === "warning"
-                        ? HeroButtonIcons["warning"]
-                        : HeroButtonIcons[icon] }))),
-            isLoading && (React.createElement("span", { className: "arc-HeroButton-icon" },
-                React.createElement(Spinner.Spinner, { size: "xxl" }))))));
-});
-
-exports.HeroButton = HeroButton;

package/lib/_shared/cjs/MediaCard-BEZFbiYO.cjs

@@ -1,57 +0,0 @@
-'use strict';
-
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
-var React = require('react');
-var index = require('./index-CTlXMLug.cjs');
-var Image = require('./Image-C1pcrfnN.cjs');
-var Heading = require('./Heading-BEMSkLYR.cjs');
-var Surface = require('./Surface-BFx1yNsq.cjs');
-var Text = require('./Text-Cr5nmYmx.cjs');
-var VerticalSpace = require('./VerticalSpace-BJvST6WP.cjs');
-var CardHeading = require('./CardHeading-Cl0D1Khp.cjs');
-var CardFooter = require('./CardFooter-ChphRFHe.cjs');
-var ConditionalWrapper = require('./ConditionalWrapper-C09Kw6EG.cjs');
-
-var VideoPlayer = React.lazy(function () {
-    return Promise.resolve().then(function () { return require('../../VideoPlayer/VideoPlayer.cjs'); }).then(function (_a) {
-        var VideoPlayer = _a.VideoPlayer;
-        return ({
-            default: VideoPlayer,
-        });
-    });
-});
-/**
- * Use `MediaCard` to contain content and an image about a single subject.
- */
-var MediaCard = function (_a) {
-    var media = _a.media, url = _a.url, onClick = _a.onClick, heading = _a.heading, label = _a.label, text = _a.text, metaText = _a.metaText, minHeight = _a.minHeight, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isContained, isContained = _c === void 0 ? true : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, props = filterAttrs.__rest(_a, ["media", "url", "onClick", "heading", "label", "text", "metaText", "minHeight", "buttonIcon", "isContained", "headingLevel"]);
-    var surface = React.useContext(Surface.Context).surface;
-    var _e = React.useState(false), isClient = _e[0], setIsClient = _e[1];
-    var _f = React.useState(false), showHoverState = _f[0], setShowHoverState = _f[1];
-    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
-    React.useEffect(function () {
-        setIsClient(true);
-    }, []);
-    return (React.createElement("div", filterAttrs.__assign({ style: { minHeight: minHeight }, className: index.classNames("arc-MediaCard", {
-            "arc-MediaCard--outlined": url && isContained && showHoverState,
-            "arc-MediaCard--contained": isContained,
-            "arc-MediaCard--onDarkSurface": surface === "dark",
-        }) }, filterAttrs.filterAttrs(props)),
-        React.createElement(ConditionalWrapper.ConditionalWrapper, { condition: isContained, wrapper: function (children) { return (React.createElement(Surface.Surface, { growVertically: true, background: "light-white" }, children)); } },
-            media.type === "img" && (React.createElement("div", { className: "arc-MediaCard-imgContainer" },
-                React.createElement(Image.Image, filterAttrs.__assign({}, media)))),
-            media.type === "video" && isClient && (React.createElement(React.Suspense, { fallback: null },
-                React.createElement(VideoPlayer, filterAttrs.__assign({ isSupportingTextHidden: true }, media)))),
-            React.createElement("div", { className: "arc-MediaCard-content" },
-                label && (React.createElement("div", { className: "arc-MediaCard-label" },
-                    React.createElement(Heading.Heading, { level: "3", fontStyle: "overline" }, label),
-                    React.createElement(VerticalSpace.VerticalSpace, { size: "16" }))),
-                React.createElement(CardHeading.CardHeading, { heading: heading, headingLevel: headingLevel, href: media.type !== "video" ? url : undefined, onClick: media.type !== "video" ? onClick : undefined, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
-                React.createElement("div", { className: "arc-MediaCard-textContainer" }, text && (React.createElement(React.Fragment, null,
-                    React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
-                    React.createElement(Text.Text, null, text),
-                    (url || metaText) && React.createElement(VerticalSpace.VerticalSpace, { size: "24" })))),
-                React.createElement(CardFooter.CardFooter, { buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url) && media.type !== "video", isHovered: showHoverState })))));
-};
-
-exports.MediaCard = MediaCard;