@react-fabric/core 1.0.0-beta.5 → 1.0.0-beta.51

package/dist/cjs/components/chip/Chip.js

@@ -5,11 +5,10 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var classNames = require('classnames');
 var react = require('react');
 var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
 var Icon = require('../icon/Icon.js');
-var Chip_module = require('./Chip.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["ref", "children", "className", "size", "color", "variant", "icon", "iconBg", "iconColor", "rtlFlip", "disabled", "onClick", "onIconClick", "onRemove", "rounded", "stopPropagation", "as"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -66,25 +65,30 @@ var Chip = function Chip(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs(E, _objectSpread(_objectSpread({
     ref: ref,
     role: "term",
-    className: classNames(Chip_module.chip, className, color && getColor.getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 text-sm rounded", rounded && "rounded-full", !!onClick && Chip_module.clickable, disabled && Chip_module.disabled),
+    "data-ref": "chip",
+    className: classNames("fabric-chip", className, "select-none inline-flex flex-nowrap items-center align-middle max-w-72 rounded", rounded && "rounded-full", !!onClick && "clickable", disabled && "disabled"),
     style: styles,
     "data-variant": variant,
     "data-inner-clickable": !!onClick,
-    onClick: clickHandler
+    onClick: disabled ? undefined : clickHandler
   }, aria), {}, {
     children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-      className: classNames(Chip_module.chipIcon, "m-1"),
+      "data-ref": "chipIcon",
+      className: classNames("fabric-chipIcon", "m-1"),
       icon: icon,
       bg: iconBg,
       onClick: onIconClick,
       color: iconColor,
       rtlFlip: rtlFlip
     }), children && /*#__PURE__*/jsxRuntime.jsx("label", {
-      className: classNames(Chip_module.chipLabel, "truncate"),
+      "data-ref": "chipLabel",
+      className: classNames("fabric-chipLabel", "truncate"),
       children: children
     }), onRemove && /*#__PURE__*/jsxRuntime.jsx("span", {
       role: "none",
-      className: classNames(Chip_module.chipRemove, "cursor-pointer pe-1 opacity-65 hover:opacity-90"),
+      "data-ref": "chipRemove",
+      "data-inner-cliackable": true,
+      className: classNames("fabric-chipRemove", "cursor-pointer pe-1 opacity-65 hover:opacity-90"),
       onClick: removeHandler,
       children: "\xD7"
     })]

package/dist/cjs/components/collapsable/Collapsable.js

@@ -8,10 +8,9 @@ var classNames = require('classnames');
 var react = require('react');
 var icons = require('../../types/icons.js');
 var Icon = require('../icon/Icon.js');
-var Collapsable_module = require('./Collapsable.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "disabled", "className", "bodyClassName", "headerClassName", "children", "iconAlign", "iconClosed", "iconOpen", "open", "onClose", "onOpen"];
+var _excluded = ["ref", "disabled", "className", "bodyClassName", "headerClassName", "children", "iconAlign", "stickyHeader", "iconClosed", "iconOpen", "open", "onClose", "onOpen"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Collapsable = function Collapsable(_ref) {
@@ -22,6 +21,7 @@ var Collapsable = function Collapsable(_ref) {
     headerClassName = _ref.headerClassName,
     children = _ref.children,
     iconAlign = _ref.iconAlign,
+    stickyHeader = _ref.stickyHeader,
     _ref$iconClosed = _ref.iconClosed,
     iconClosed = _ref$iconClosed === void 0 ? icons.CoreIcons.chevronRight : _ref$iconClosed,
     _ref$iconOpen = _ref.iconOpen,
@@ -57,12 +57,12 @@ var Collapsable = function Collapsable(_ref) {
     head = _useMemo2[0],
     body = _useMemo2[1];
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-    className: classNames(Collapsable_module.collapsable, className)
+    className: classNames("fabric-collapsable", className)
   }, aria), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       role: "none",
       ref: headRef,
-      className: classNames(Collapsable_module.collapsableHead, "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
+      className: classNames("fabric-collapsableHead", "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, stickyHeader && "bg-base sticky top-0 py-1 z-10", iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
       onClick: function onClick() {
         return !disabled && setOpenState(!openState);
       },
@@ -71,12 +71,12 @@ var Collapsable = function Collapsable(_ref) {
         icon: openState ? iconOpen : iconClosed,
         rtlFlip: true
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex-1 px-2",
+        className: "flex-1",
         children: head
       })]
     }), openState && /*#__PURE__*/jsxRuntime.jsx("div", {
       ref: bodyRef,
-      className: classNames(Collapsable_module.collapsableBody, bodyClassName),
+      className: classNames("fabric-collapsableBody", bodyClassName),
       children: body
     })]
   }));

package/dist/cjs/components/divider/Divider.js

@@ -2,9 +2,9 @@
 
 var classNames = require('classnames');
 var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
-var jsxRuntime = require('react/jsx-runtime');
 
 /*
  * React Fabric
@@ -31,9 +31,11 @@ var jsxRuntime = require('react/jsx-runtime');
 
 var Divider = function Divider(_ref) {
   var children = _ref.children,
-    color = _ref.color,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "tint-300" : _ref$color,
     vertical = _ref.vertical,
-    fill = _ref.fill,
+    labelClassName = _ref.labelClassName,
+    style = _ref.style,
     _ref$align = _ref.align,
     align = _ref$align === void 0 ? "start" : _ref$align,
     className = _ref.className;
@@ -42,17 +44,19 @@ var Divider = function Divider(_ref) {
       className = _ref2.className;
     return /*#__PURE__*/jsxRuntime.jsx("hr", {
       style: {
-        flex: flex
+        flex: flex,
+        borderColor: getColor.getColor(color),
+        borderStyle: style
       },
-      className: classNames(className, vertical && "vertical", !flex && "self-stretch", vertical ? "mx-1" : "my-1", color && getColor.getBorderClass(color + "-200"))
+      className: classNames(className, vertical && "vertical", !flex && "self-stretch", vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal")
     });
   }, [color, vertical]);
   return children ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames("flex flex-nowrap items-center", vertical && "flex-col", className),
+    className: classNames("flex flex-nowrap items-center fabric-divider", vertical && "flex-col", className),
     children: [/*#__PURE__*/jsxRuntime.jsx(Rule, {
       flex: align === "start" ? "0 0 1rem" : "1 1 1em"
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames("px-2 whitespace-nowrap", vertical ? "mx-1" : "my-1", fill && getColor.getBgClass((color !== null && color !== void 0 ? color : "tint") + "-200"), !fill && getColor.getColorClass((color !== null && color !== void 0 ? color : "tint") + "-600"), "rounded-full text-[0.75em]", vertical && "origin-center -rotate-90 z-1"),
+      className: classNames("px-2 whitespace-nowrap", vertical ? "fabric-divider-label--vertical" : "fabric-divider-label--horizontal", labelClassName, "rounded-full text-[0.75em]", vertical && "origin-center -rotate-90 z-1"),
       children: children
     }), /*#__PURE__*/jsxRuntime.jsx(Rule, {
       flex: align === "end" ? "0 0 1rem" : "1 1 1em"

package/dist/cjs/components/dropdown/Dropdown.js

@@ -6,7 +6,6 @@ var react = require('@floating-ui/react');
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react$1 = require('react');
-var Dropdown_module = require('./Dropdown.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -115,6 +114,7 @@ var DropdownElement = function DropdownElement(_ref) {
         e.stopPropagation();
       }
     })), {}, {
+      "data-inner-clickable": "true",
       "data-dropdown-open": isOpen ? true : undefined,
       ref: innerRef
     })), isOpen && /*#__PURE__*/jsxRuntime.jsxs(react.FloatingPortal, {
@@ -123,15 +123,12 @@ var DropdownElement = function DropdownElement(_ref) {
         context: context,
         modal: true,
         children: /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-          ref: function ref(el) {
-            var _el$querySelector;
-            refs.setFloating(el);
-            el === null || el === void 0 || (_el$querySelector = el.querySelector("input,textarea,button")) === null || _el$querySelector === void 0 || _el$querySelector.focus();
-          },
+          ref: refs.setFloating,
           style: _objectSpread({
             minWidth: minWidth,
             zIndex: "var(--z-popover)"
-          }, floatingStyles)
+          }, floatingStyles),
+          "data-ref": "dropdownBody"
         }, getFloatingProps({
           onClick: function onClick(e) {
             return e.stopPropagation();
@@ -139,14 +136,14 @@ var DropdownElement = function DropdownElement(_ref) {
         })), {}, {
           children: [/*#__PURE__*/jsxRuntime.jsx("div", {
             role: "none",
-            className: classNames(Dropdown_module.dropdownBody, dropdownClassName, !plainDropdown && "shadow-lg shadow-base bg-base ring-1 ring-tint-100", "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]"),
+            className: classNames("fabric-dropdownBody", dropdownClassName, !plainDropdown && "shadow-lg bg-base ring-1 ring-tint-100", "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]"),
             onMouseUpCapture: tryClosing,
             children: panel
           }), showArrow && /*#__PURE__*/jsxRuntime.jsx(react.FloatingArrow, {
             ref: arrowRef,
             context: context,
             strokeWidth: 0.5,
-            className: "fill-base stroke-muted"
+            className: "fill-base stroke-dimmed"
           })]
         }))
       })]

package/dist/cjs/components/dropdown/DropdownTool.js

@@ -8,18 +8,19 @@ var Icon = require('../icon/Icon.js');
 var Dropdown = require('./Dropdown.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["children", "className", "groupHover"];
+var _excluded = ["children", "className", "groupHover", "icon"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DropdownTool = function DropdownTool(_ref) {
   var children = _ref.children,
     className = _ref.className,
     groupHover = _ref.groupHover,
+    icon = _ref.icon,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxRuntime.jsxs(Dropdown.Dropdown, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-      icon: icons.CoreIcons.caretDown,
-      className: classNames(className, "outline bg-base flex-content pointer-events-auto cursor-pointer", groupHover && "hidden group-hover:inline-block data-[dropdown-open]:inline-block")
+      icon: icon !== null && icon !== void 0 ? icon : icons.CoreIcons.caretDown,
+      className: classNames("outline bg-tint-50/50 flex-content pointer-events-auto cursor-pointer", className, groupHover && "hidden group-hover/tool:inline-block data-[dropdown-open]:inline-block")
     }), children]
   }));
 };

package/dist/cjs/components/empty/EmptyContent.js

@@ -5,10 +5,11 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
-var Icon = require('../icon/Icon.js');
 var jsxRuntime = require('react/jsx-runtime');
+var getColor = require('../../utils/getColor.js');
+var Icon = require('../icon/Icon.js');
 
-var _excluded = ["children", "title", "message", "icon", "className", "size"];
+var _excluded = ["children", "title", "message", "icon", "className", "size", "iconColor"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SizeMap = {
@@ -55,6 +56,7 @@ var EmptyContent = function EmptyContent(_ref) {
     icon = _ref.icon,
     className = _ref.className,
     size = _ref.size,
+    iconColor = _ref.iconColor,
     test = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
     className: classNames("p-6 flex flex-col items-center area-content", className),
@@ -65,18 +67,19 @@ var EmptyContent = function EmptyContent(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "leading-none",
       style: {
-        fontSize: "4em"
+        fontSize: "4em",
+        color: getColor.getColor(iconColor !== null && iconColor !== void 0 ? iconColor : "tint-700")
       },
       children: [utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
         icon: icon
       }), /*#__PURE__*/react.isValidElement(icon) && icon, !icon && /*#__PURE__*/jsxRuntime.jsx(DefaultIcon, {})]
-    }), title && /*#__PURE__*/jsxRuntime.jsx("p", {
+    }), title && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "font-medium text-center text-dimmed",
       style: {
         fontSize: "1.5em"
       },
       children: title
-    }), /*#__PURE__*/jsxRuntime.jsx("p", {
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "font-medium text-center text-muted",
       style: {
         fontSize: "0.875em"

package/dist/cjs/components/icon/Icon.js

@@ -4,12 +4,11 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
-var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
-var getColor = require('../../utils/getColor.js');
-var Icon_module = require('./Icon.module.css');
+var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var getColor = require('../../utils/getColor.js');
 
-var _excluded = ["ref", "icon", "bg", "color", "size", "rtlFlip", "animate", "rounded", "viewBox", "className", "onClick"];
+var _excluded = ["ref", "icon", "bg", "color", "size", "rtlFlip", "animate", "rounded", "disabled", "viewBox", "className", "onClick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SvgTextSize = ["", ".875em", ".525em", ".35em", ".25em"];
@@ -34,13 +33,14 @@ var Icon = function Icon(_ref) {
     rtlFlip = _ref.rtlFlip,
     animate = _ref.animate,
     rounded = _ref.rounded,
+    disabled = _ref.disabled,
     _ref$viewBox = _ref.viewBox,
     viewBox = _ref$viewBox === void 0 ? "0 0 24 24" : _ref$viewBox,
     className = _ref.className,
     onClick = _ref.onClick,
     rest = _objectWithoutProperties(_ref, _excluded);
   /** ***************** style map *******************/
-  var styles = useEffectDebugger.useMemoDebugger(function () {
+  var styles = react.useMemo(function () {
     var s = {};
     if (bg) {
       s.backgroundColor = getColor.getColor(bg);
@@ -55,16 +55,15 @@ var Icon = function Icon(_ref) {
       s.fontSize = SizeMap[size];
     }
     return s;
-  }, [bg, color, size], "Icon styles");
+  }, [bg, color, size]);
 
   /** ***************** check if icon is svg path *******************/
-  var isSvg = useEffectDebugger.useMemoDebugger(function () {
+  var isSvg = react.useMemo(function () {
     return utilities.isSvgPath(icon);
-  }, [icon], "Icon isSvg");
+  }, [icon]);
 
   /** ***************** render icon *******************/
-  var iconEl = useEffectDebugger.useMemoDebugger(function () {
-    var _SvgTextSize$icon$len;
+  var iconEl = react.useMemo(function () {
     if (!utilities.isString(icon)) {
       throw Error("Invalid icon expected string");
     }
@@ -83,22 +82,25 @@ var Icon = function Icon(_ref) {
         dominantBaseline: "middle",
         textAnchor: "middle",
         style: {
-          fontSize: (_SvgTextSize$icon$len = SvgTextSize[icon.length]) !== null && _SvgTextSize$icon$len !== void 0 ? _SvgTextSize$icon$len : "1em"
+          fontSize: SvgTextSize[icon.length]
         },
         children: icon
       })
     }) : /*#__PURE__*/jsxRuntime.jsx("i", {
       className: "".concat(icon)
     });
-  }, [icon, isSvg, viewBox], "Icon el");
-  return /*#__PURE__*/jsxRuntime.jsx("dfn", _objectSpread(_objectSpread({}, rest), {}, {
-    ref: ref,
+  }, [icon, isSvg, viewBox]);
+  return /*#__PURE__*/jsxRuntime.jsx("dfn", _objectSpread(_objectSpread({
+    "data-ref": "icon",
+    ref: ref
+  }, rest), {}, {
     role: "presentation",
-    className: classNames(Icon_module.icon, className, "select-none overflow-hidden inline-block box-content leading-none not-italic text-center", bg && getColor.getBgClass(bg), color && getColor.getColorClass(color), !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate)),
+    className: classNames("fabric-icon", "select-none overflow-hidden box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate), !!onClick && disabled && "opacity-30 pointer-events-none", className),
     onClick: onClick,
     "data-flip": rtlFlip,
     style: styles,
     "data-clickable": !!onClick,
+    "data-inner-clickable": !!onClick,
     children: iconEl
   }));
 };

package/dist/cjs/components/media/Media.js

@@ -8,13 +8,22 @@ var classNames = require('classnames');
 var react = require('react');
 var icons = require('../../types/icons.js');
 var Button = require('../button/Button.js');
-var Media_module = require('./Media.module.css');
+var Icon = require('../icon/Icon.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["src", "alt", "reel", "fit", "className"],
   _excluded2 = ["src", "poster", "reel", "autoPlay", "playOnHover", "fit", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var cover = {
+  fill: "object-fill",
+  cover: "object-cover",
+  contain: "object-contain"
+};
+var loadIndicator = /*#__PURE__*/jsxRuntime.jsx("div", {
+  className: classNames("fabric-mediaPlaceholder", "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse"),
+  children: "\u25CF\u25CF\u25CF"
+});
 var Image = function Image(_ref) {
   var src = _ref.src,
     alt = _ref.alt,
@@ -27,28 +36,40 @@ var Image = function Image(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     colorSet = _useState2[0],
     setColorSet = _useState2[1];
-  var loadIndicator = react.useMemo(function () {
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames(Media_module.mediaPlaceholder, "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse"),
-      children: "\u25CF\u25CF\u25CF"
-    });
+  var _useState3 = react.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loaded = _useState4[0],
+    setLoaded = _useState4[1];
+  var _useState5 = react.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    errored = _useState6[0],
+    setErrored = _useState6[1];
+  react.useEffect(function () {
+    setLoaded(false);
+    setErrored(false);
   }, [src]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
     "data-ref": "image",
-    className: classNames(Media_module.mediaContainer, "relative overflow-hidden bg-gray inline-block", reel && Media_module.mediaReel, className),
+    className: classNames("fabric-mediaContainer", "relative overflow-hidden inline-block", reel && "fabric-mediaReel", className),
     "data-colorset": colorSet
   }, aria), {}, {
-    children: [loadIndicator, /*#__PURE__*/jsxRuntime.jsx("img", {
+    children: [!loaded && !errored && loadIndicator, !errored && /*#__PURE__*/jsxRuntime.jsx("img", {
       alt: alt !== null && alt !== void 0 ? alt : src,
       src: src,
       loading: "lazy",
       crossOrigin: "anonymous",
-      className: classNames(Media_module.media, "pointer-events-none w-full h-full", fit && "object-".concat(fit)),
+      className: classNames("fabric-media", "pointer-events-none w-full h-full", cover[fit]),
       onLoad: function onLoad(e) {
-        var _e$currentTarget$prev;
-        (_e$currentTarget$prev = e.currentTarget.previousElementSibling) === null || _e$currentTarget$prev === void 0 || _e$currentTarget$prev.remove();
+        setLoaded(true);
         setColorSet(utilities.getImageColorset(e.currentTarget));
+      },
+      onError: function onError() {
+        return setErrored(true);
       }
+    }), errored && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+      size: "2rem",
+      className: "absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+      icon: icons.CoreIcons.mediaImageBroken
     })]
   }));
 };
@@ -63,17 +84,32 @@ var Video = function Video(_ref2) {
     className = _ref2.className,
     aria = _objectWithoutProperties(_ref2, _excluded2);
   var videoRef = react.useRef(null);
-  var _useState3 = react.useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    state = _useState4[0],
-    setState = _useState4[1];
-  var _useState5 = react.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    volume = _useState6[0],
-    setVolume = _useState6[1];
+  var _useState7 = react.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    loaded = _useState8[0],
+    setLoaded = _useState8[1];
+  var _useState9 = react.useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    errored = _useState10[0],
+    setErrored = _useState10[1];
+  react.useEffect(function () {
+    setLoaded(false);
+    setErrored(false);
+  }, [src]);
+  var _useState11 = react.useState(true),
+    _useState12 = _slicedToArray(_useState11, 2),
+    state = _useState12[0],
+    setState = _useState12[1];
+  var _useState13 = react.useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    volume = _useState14[0],
+    setVolume = _useState14[1];
+  react.useEffect(function () {
+    setErrored(false);
+  }, [src]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
     "data-ref": "video",
-    className: classNames(Media_module.mediaContainer, "relative overflow-hidden bg-gray inline-block", reel && Media_module.mediaReel, className),
+    className: classNames("fabric-mediaContainer", "relative overflow-hidden inline-block", reel && "fabric-mediaReel", className),
     onMouseEnter: function onMouseEnter() {
       var _videoRef$current;
       playOnHover && ((_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.play());
@@ -83,64 +119,69 @@ var Video = function Video(_ref2) {
       playOnHover && ((_videoRef$current2 = videoRef.current) === null || _videoRef$current2 === void 0 ? void 0 : _videoRef$current2.pause());
     }
   }, aria), {}, {
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames(Media_module.mediaPlaceholder, "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-5xl animate-pulse"),
-      children: "\u25CF\u25CF\u25CF"
-    }), /*#__PURE__*/jsxRuntime.jsxs("video", {
-      loop: true,
-      ref: videoRef,
-      controls: false,
-      poster: poster,
-      autoPlay: autoPlay,
-      className: classNames(Media_module.media, "pointer-events-none w-full h-full", fit && "object-".concat(fit)),
-      onPlay: function onPlay() {
-        return setState(true);
-      },
-      onPause: function onPause() {
-        return setState(false);
-      },
-      onVolumeChange: function onVolumeChange(e) {
-        return setVolume(!!e.currentTarget.volume);
-      },
-      onLoadedData: function onLoadedData(e) {
-        var _e$currentTarget$prev2;
-        e.currentTarget.volume = 0;
-        (_e$currentTarget$prev2 = e.currentTarget.previousElementSibling) === null || _e$currentTarget$prev2 === void 0 || _e$currentTarget$prev2.remove();
-      },
-      children: [/*#__PURE__*/jsxRuntime.jsx("source", {
-        src: src
-      }), /*#__PURE__*/jsxRuntime.jsx("track", {
-        kind: "captions"
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      "data-inner-clickable": true,
-      className: classNames(Media_module.mediaControls, "absolute bottom-6 end-6 rounded-full flex flex-col"),
-      children: [/*#__PURE__*/jsxRuntime.jsx(Button.Button, {
-        rounded: true,
-        variant: "link",
-        className: Media_module.mediaControlPlaceholder,
-        icon: icons.CoreIcons.ellipsis,
-        "aria-label": "controls"
-      }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
-        rounded: true,
-        variant: "link",
-        "aria-label": "controls",
-        className: Media_module.mediaControlAction,
-        onClick: function onClick() {
-          videoRef.current && (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
+    children: [!loaded && !errored && loadIndicator, !errored && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsxs("video", {
+        loop: true,
+        ref: videoRef,
+        controls: false,
+        poster: poster,
+        autoPlay: autoPlay,
+        className: classNames("fabric-media", "pointer-events-none w-full h-full", fit && "object-".concat(fit)),
+        onPlay: function onPlay() {
+          return setState(true);
+        },
+        onPause: function onPause() {
+          return setState(false);
+        },
+        onVolumeChange: function onVolumeChange(e) {
+          return setVolume(!!e.currentTarget.volume);
+        },
+        onLoadedData: function onLoadedData(e) {
+          e.currentTarget.volume = 0;
+          setLoaded(true);
         },
-        icon: volume ? icons.CoreIcons.volumeOn : icons.CoreIcons.volumeOff
-      }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
-        rounded: true,
-        variant: "link",
-        "aria-label": "controls",
-        className: Media_module.mediaControlAction,
-        onClick: function onClick() {
-          var _videoRef$current3, _videoRef$current4, _videoRef$current5;
-          (_videoRef$current3 = videoRef.current) !== null && _videoRef$current3 !== void 0 && _videoRef$current3.paused ? (_videoRef$current4 = videoRef.current) === null || _videoRef$current4 === void 0 ? void 0 : _videoRef$current4.play() : (_videoRef$current5 = videoRef.current) === null || _videoRef$current5 === void 0 ? void 0 : _videoRef$current5.pause();
+        onError: function onError() {
+          return setErrored(true);
         },
-        icon: state ? icons.CoreIcons.pause : icons.CoreIcons.play
+        children: [/*#__PURE__*/jsxRuntime.jsx("source", {
+          src: src
+        }), /*#__PURE__*/jsxRuntime.jsx("track", {
+          kind: "captions"
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        "data-inner-clickable": true,
+        className: classNames("fabric-mediaControls", "absolute bottom-6 end-6 rounded-full flex flex-col"),
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+          rounded: true,
+          variant: "link",
+          className: "fabric-mediaControlPlaceholder",
+          icon: icons.CoreIcons.ellipsis,
+          "aria-label": "controls"
+        }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+          rounded: true,
+          variant: "link",
+          "aria-label": "controls",
+          className: "fabric-mediaControlAction",
+          onClick: function onClick() {
+            videoRef.current && (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
+          },
+          icon: volume ? icons.CoreIcons.volumeOn : icons.CoreIcons.volumeOff
+        }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+          rounded: true,
+          variant: "link",
+          "aria-label": "controls",
+          className: "fabric-mediaControlAction",
+          onClick: function onClick() {
+            var _videoRef$current3, _videoRef$current4, _videoRef$current5;
+            (_videoRef$current3 = videoRef.current) !== null && _videoRef$current3 !== void 0 && _videoRef$current3.paused ? (_videoRef$current4 = videoRef.current) === null || _videoRef$current4 === void 0 ? void 0 : _videoRef$current4.play() : (_videoRef$current5 = videoRef.current) === null || _videoRef$current5 === void 0 ? void 0 : _videoRef$current5.pause();
+          },
+          icon: state ? icons.CoreIcons.pause : icons.CoreIcons.play
+        })]
       })]
+    }), errored && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+      size: "2rem",
+      className: "absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+      icon: icons.CoreIcons.mediaVideoBroken
     })]
   }));
 };