@class101/cdn-ui-system 0.0.10 → 0.0.11

package/lib/Animation/FadeAnimation/FadeAnimation.js

@@ -1,16 +1,20 @@
 import {
   keyframes
-} from "../../../chunk-UAWCTQGC.js";
-import "../../../chunk-QN5Q5NTF.js";
+} from "../../../chunk-T7TBQTBE.js";
+import "../../../chunk-LE44IRCL.js";
+import "../../../chunk-CGEEKALF.js";
+import "../../../chunk-J3Q2BPOW.js";
 import {
   React,
+  __objRest,
+  __spreadValues,
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Animation/FadeAnimation/FadeAnimation.tsx
 init_react_shim();
-import {useMemo} from "react";
-import {Animator} from "../Animator/index.js";
+import { useMemo } from "react";
+import { Animator } from "../Animator/index.js";
 var fadeAnimation = (type, startOpacity, endOpacity) => keyframes`
   from {
     opacity: ${type === "in" ? startOpacity : endOpacity};
@@ -19,17 +23,20 @@ var fadeAnimation = (type, startOpacity, endOpacity) => keyframes`
     opacity: ${type === "in" ? endOpacity : startOpacity};
   }
 `;
-var FadeAnimation = ({
-  type,
-  startOpacity = 0,
-  endOpacity = 1,
-  ...restProps
-}) => {
+var FadeAnimation = (_a) => {
+  var _b = _a, {
+    type,
+    startOpacity = 0,
+    endOpacity = 1
+  } = _b, restProps = __objRest(_b, [
+    "type",
+    "startOpacity",
+    "endOpacity"
+  ]);
   const animation = useMemo(() => fadeAnimation(type, startOpacity, endOpacity), [endOpacity, startOpacity, type]);
-  return /* @__PURE__ */ React.createElement(Animator, {
-    name: animation,
-    ...restProps
-  });
+  return /* @__PURE__ */ React.createElement(Animator, __spreadValues({
+    name: animation
+  }, restProps));
 };
 FadeAnimation.forwardStyle = true;
 export {

package/lib/Animation/FadeAnimation/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Animation/FadeAnimation/index.ts
 init_react_shim();
-import {FadeAnimation} from "./FadeAnimation.js";
+import { FadeAnimation } from "./FadeAnimation.js";
 export {
   FadeAnimation
 };

package/lib/Animation/RotateAnimation/RotateAnimation.js

@@ -1,24 +1,26 @@
 import {
   keyframes
-} from "../../../chunk-UAWCTQGC.js";
-import "../../../chunk-QN5Q5NTF.js";
+} from "../../../chunk-T7TBQTBE.js";
+import "../../../chunk-LE44IRCL.js";
+import "../../../chunk-CGEEKALF.js";
+import "../../../chunk-J3Q2BPOW.js";
 import {
   React,
+  __spreadValues,
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Animation/RotateAnimation/RotateAnimation.tsx
 init_react_shim();
-import {Animator} from "../Animator/index.js";
+import { Animator } from "../Animator/index.js";
 var rotateAnimation = keyframes`
   100% {
     transform: rotate(360deg);
   }
 `;
-var RotateAnimation = (props) => /* @__PURE__ */ React.createElement(Animator, {
-  name: rotateAnimation,
-  ...props
-});
+var RotateAnimation = (props) => /* @__PURE__ */ React.createElement(Animator, __spreadValues({
+  name: rotateAnimation
+}, props));
 RotateAnimation.forwardStyle = true;
 export {
   RotateAnimation

package/lib/Animation/RotateAnimation/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Animation/RotateAnimation/index.ts
 init_react_shim();
-import {RotateAnimation} from "./RotateAnimation.js";
+import { RotateAnimation } from "./RotateAnimation.js";
 export {
   RotateAnimation
 };

package/lib/Animation/SlideAnimation/SlideAnimation.js

@@ -1,16 +1,20 @@
 import {
   keyframes
-} from "../../../chunk-UAWCTQGC.js";
-import "../../../chunk-QN5Q5NTF.js";
+} from "../../../chunk-T7TBQTBE.js";
+import "../../../chunk-LE44IRCL.js";
+import "../../../chunk-CGEEKALF.js";
+import "../../../chunk-J3Q2BPOW.js";
 import {
   React,
+  __objRest,
+  __spreadValues,
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Animation/SlideAnimation/SlideAnimation.tsx
 init_react_shim();
-import {useMemo} from "react";
-import {Animator} from "../Animator/index.js";
+import { useMemo } from "react";
+import { Animator } from "../Animator/index.js";
 var slideAnimation = (from, to) => keyframes`
   from {
     transform: translate(${from[0]}, ${from[1]});
@@ -19,12 +23,12 @@ var slideAnimation = (from, to) => keyframes`
     transform: translate(${to[0]}, ${to[1]});
   }
 `;
-var SlideAnimation = ({from, to, ...restProps}) => {
+var SlideAnimation = (_a) => {
+  var _b = _a, { from, to } = _b, restProps = __objRest(_b, ["from", "to"]);
   const animation = useMemo(() => slideAnimation(from, to), [from, to]);
-  return /* @__PURE__ */ React.createElement(Animator, {
-    name: animation,
-    ...restProps
-  });
+  return /* @__PURE__ */ React.createElement(Animator, __spreadValues({
+    name: animation
+  }, restProps));
 };
 SlideAnimation.forwardStyle = true;
 export {

package/lib/Animation/SlideAnimation/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Animation/SlideAnimation/index.ts
 init_react_shim();
-import {SlideAnimation} from "./SlideAnimation.js";
+import { SlideAnimation } from "./SlideAnimation.js";
 export {
   SlideAnimation
 };

package/lib/Animation/Transition/Transition.js

@@ -1,24 +1,32 @@
 import {
   React,
+  __objRest,
+  __spreadValues,
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Animation/Transition/Transition.tsx
 init_react_shim();
-import {ForwardStyle} from "../../../private/ForwardStyle/index.js";
-var Transition = ({
-  property,
-  delay,
-  duration,
-  timingFunction,
-  ...restProps
-}) => /* @__PURE__ */ React.createElement(ForwardStyle, {
-  transitionProperty: property,
-  transitionDelay: delay,
-  transitionDuration: duration,
-  transitionTimingFunction: timingFunction,
-  ...restProps
-});
+import { ForwardStyle } from "../../../private/ForwardStyle/index.js";
+var Transition = (_a) => {
+  var _b = _a, {
+    property,
+    delay,
+    duration,
+    timingFunction
+  } = _b, restProps = __objRest(_b, [
+    "property",
+    "delay",
+    "duration",
+    "timingFunction"
+  ]);
+  return /* @__PURE__ */ React.createElement(ForwardStyle, __spreadValues({
+    transitionProperty: property,
+    transitionDelay: delay,
+    transitionDuration: duration,
+    transitionTimingFunction: timingFunction
+  }, restProps));
+};
 Transition.forwardStyle = true;
 export {
   Transition

package/lib/Animation/Transition/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Animation/Transition/index.ts
 init_react_shim();
-import {Transition} from "./Transition.js";
+import { Transition } from "./Transition.js";
 export {
   Transition
 };

package/lib/Avatar/Avatar.js

@@ -1,85 +1,92 @@
-import {
-  emotion_styled_browser_esm_default
-} from "../../chunk-KBR5BGSG.js";
-import {
-  variant
-} from "../../chunk-7BJXCATJ.js";
-import "../../chunk-AXJOQSVO.js";
-import "../../chunk-UAWCTQGC.js";
-import "../../chunk-QN5Q5NTF.js";
 import {
   React,
+  __objRest,
+  __spreadValues,
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Avatar/Avatar.tsx
 init_react_shim();
-import {Background} from "../Background/index.js";
-import {Center} from "../Layout/Center/index.js";
-import {Position} from "../Layout/Position/index.js";
-import {VStack} from "../Layout/VStack/index.js";
-import {Image} from "../Media/Image/index.js";
-import {IconBadge} from "../Tag/IconBadge/index.js";
-import {Text} from "../Typography/Text/index.js";
-var sizeVariant = {
-  xl: {
-    size: 62
-  },
-  lg: {
-    size: 48
-  },
-  md: {
-    size: 34
-  },
-  sm: {
-    size: 22
-  }
-};
-var iconSizeVariant = {
-  xl: {
-    size: 30
-  },
-  lg: {
-    size: 22
+import { useEffect, useState } from "react";
+import { propVariant, system } from "../../core/index.js";
+import { Box } from "../../private/Box/index.js";
+import { VStack } from "../Layout/VStack/index.js";
+import { ZStack } from "../Layout/ZStack/index.js";
+import { Image } from "../Media/Image/index.js";
+import { IconBadge } from "../Tag/IconBadge/index.js";
+import { Text } from "../Typography/Text/index.js";
+var Avatar = system()(propVariant({
+  prop: "size",
+  variants: {
+    xl: {
+      avatarSize: 62,
+      iconSize: 30,
+      badgeIconBottom: 0,
+      badgeIconRight: -5,
+      altKind: "title4"
+    },
+    lg: {
+      avatarSize: 48,
+      iconSize: 22,
+      badgeIconBottom: 0,
+      badgeIconRight: -4,
+      altKind: "body1"
+    },
+    md: {
+      avatarSize: 34,
+      iconSize: 15,
+      badgeIconBottom: 0,
+      badgeIconRight: -6,
+      altKind: "body3"
+    },
+    sm: {
+      avatarSize: 22,
+      iconSize: 14,
+      badgeIconBottom: void 0,
+      badgeIconRight: void 0,
+      altKind: "body6"
+    }
   },
-  md: {
-    size: 15
-  },
-  sm: {
-    size: 14
-  }
-};
-var altSizeVariant = {
-  xl: {kind: "title4"},
-  lg: {kind: "body1"},
-  md: {kind: "body3"},
-  sm: {kind: "caption3"}
-};
-var badgeIconPosVariant = {
-  xl: {
-    bottom: 0,
-    right: -5
-  },
-  lg: {
-    bottom: 0,
-    right: -4
-  },
-  md: {
-    bottom: 0,
-    right: -6
-  }
-};
-var Avatar = emotion_styled_browser_esm_default(({size = "md", src, alt, IconComponent, fallback, BadgeIconComponent, ...props}) => {
+  defaultValue: "md"
+}))((_a) => {
+  var _b = _a, {
+    size = "md",
+    src,
+    alt,
+    IconComponent,
+    fallback,
+    badgeIconBottom,
+    badgeIconRight,
+    avatarSize,
+    iconSize,
+    altKind,
+    BadgeIconComponent
+  } = _b, props = __objRest(_b, [
+    "size",
+    "src",
+    "alt",
+    "IconComponent",
+    "fallback",
+    "badgeIconBottom",
+    "badgeIconRight",
+    "avatarSize",
+    "iconSize",
+    "altKind",
+    "BadgeIconComponent"
+  ]);
   let children = null;
-  if (src && alt) {
+  const [isFallbackShowing, setIsFallbackShowing] = useState(false);
+  if (!isFallbackShowing && src && alt) {
     children = /* @__PURE__ */ React.createElement(Image, {
       src,
       alt,
-      objectFit: "cover"
+      objectFit: "cover",
+      width: "100%",
+      onError: () => setIsFallbackShowing(true)
     });
   } else if (IconComponent) {
     children = /* @__PURE__ */ React.createElement(IconComponent, {
-      ...iconSizeVariant[size],
+      size: iconSize,
       fill: "black"
     });
   } else if (fallback !== void 0) {
@@ -87,30 +94,31 @@ var Avatar = emotion_styled_browser_esm_default(({size = "md", src, alt, IconCom
   } else if (alt) {
     const [firstLetter] = alt;
     children = /* @__PURE__ */ React.createElement(Text, {
-      ...altSizeVariant[size]
+      kind: altKind
     }, firstLetter);
   }
-  return /* @__PURE__ */ React.createElement(Position, {
-    position: "relative"
-  }, /* @__PURE__ */ React.createElement(VStack, {
-    height: "100%"
-  }, /* @__PURE__ */ React.createElement(Background, {
-    color: "gray.100",
-    borderRadius: "50%"
-  }, /* @__PURE__ */ React.createElement(Center, {
-    overflow: "hidden",
-    ...props
-  }, children)), BadgeIconComponent && size !== "sm" && /* @__PURE__ */ React.createElement(Position, {
-    position: "absolute",
-    ...badgeIconPosVariant[size]
-  }, /* @__PURE__ */ React.createElement(VStack, null, /* @__PURE__ */ React.createElement(IconBadge, {
+  useEffect(() => {
+    setIsFallbackShowing(false);
+  }, [src]);
+  return /* @__PURE__ */ React.createElement(ZStack, {
+    size: avatarSize
+  }, /* @__PURE__ */ React.createElement(Box, __spreadValues({
+    backgroundColor: "gray.100",
+    borderRadius: "50%",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  }, props), children), BadgeIconComponent && size !== "sm" && /* @__PURE__ */ React.createElement(VStack, {
+    right: badgeIconRight,
+    bottom: badgeIconBottom
+  }, /* @__PURE__ */ React.createElement(IconBadge, {
     size: size === "xl" ? "lg" : size,
     IconComponent: BadgeIconComponent
-  })))));
-})({
-  userSelect: "none",
-  overflow: "hidden"
-}, variant({prop: "size", variants: sizeVariant}));
+  })));
+});
 export {
   Avatar
 };

package/lib/Avatar/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Avatar/index.ts
 init_react_shim();
-import {Avatar} from "./Avatar.js";
+import { Avatar } from "./Avatar.js";
 export {
   Avatar
 };

package/lib/Backdrop/Backdrop.js

@@ -1,17 +1,20 @@
 import {
   React,
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Backdrop/Backdrop.tsx
 init_react_shim();
-import {system} from "../../core/index.js";
-import {Action} from "../Action/index.js";
-import {FadeAnimation} from "../Animation/FadeAnimation/index.js";
-import {Background} from "../Background/index.js";
-import {Position} from "../Layout/Position/index.js";
-var Backdrop = system()()(({opened, color, onClick, onAnimationEnd, duration, children}) => /* @__PURE__ */ React.createElement(Action, {
-  onClick,
+import { system } from "../../core/index.js";
+import { Action } from "../Action/index.js";
+import { FadeAnimation } from "../Animation/FadeAnimation/index.js";
+import { Background } from "../Background/index.js";
+import { Position } from "../Layout/Position/index.js";
+var Backdrop = system()()(({ opened, color, onClick, onAnimationEnd, duration, children }) => /* @__PURE__ */ React.createElement(Action, {
+  onClick: (e) => {
+    onClick == null ? void 0 : onClick();
+    e == null ? void 0 : e.stopPropagation();
+  },
   cursor: "default"
 }, /* @__PURE__ */ React.createElement(FadeAnimation, {
   type: opened ? "in" : "out",

package/lib/Backdrop/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Backdrop/index.ts
 init_react_shim();
-import {Backdrop} from "./Backdrop.js";
+import { Backdrop } from "./Backdrop.js";
 export {
   Backdrop
 };

package/lib/Background/Background.js

@@ -1,31 +1,20 @@
-import {
-  isDefined
-} from "../../chunk-AY54FCVA.js";
 import {
   React,
+  __objRest,
+  __spreadValues,
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Background/Background.tsx
 init_react_shim();
-import {ForwardStyle} from "../../private/ForwardStyle/index.js";
-var Background = ({
-  background,
-  color,
-  image,
-  size,
-  repeat,
-  position,
-  ...restProps
-}) => /* @__PURE__ */ React.createElement(ForwardStyle, {
-  background,
-  backgroundColor: color,
-  backgroundImage: isDefined(image) ? `url(${image})` : void 0,
-  backgroundSize: size,
-  backgroundRepeat: repeat,
-  backgroundPosition: position,
-  ...restProps
-});
+import { ForwardStyle } from "../../private/ForwardStyle/index.js";
+var Background = (_a) => {
+  var _b = _a, { background, color } = _b, restProps = __objRest(_b, ["background", "color"]);
+  return /* @__PURE__ */ React.createElement(ForwardStyle, __spreadValues({
+    background,
+    backgroundColor: color
+  }, restProps));
+};
 Background.forwardStyle = true;
 export {
   Background

package/lib/Background/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Background/index.ts
 init_react_shim();
-import {Background} from "./Background.js";
+import { Background } from "./Background.js";
 export {
   Background
 };

package/lib/BackgroundImage/BackgroundImage.js

@@ -0,0 +1,20 @@
+import {
+  React,
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/lib/BackgroundImage/BackgroundImage.tsx
+init_react_shim();
+import { system } from "../../core/index.js";
+import { Box } from "../../private/Box/index.js";
+var BackgroundImage = system()()(({ children, src, size, position }) => /* @__PURE__ */ React.createElement(Box, {
+  width: "100%",
+  height: "100%",
+  backgroundImage: `url(${src})`,
+  backgroundSize: size,
+  backgroundPosition: position,
+  backgroundRepeat: "no-repeat"
+}, children));
+export {
+  BackgroundImage
+};

package/lib/BackgroundImage/index.js

@@ -0,0 +1,10 @@
+import {
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/lib/BackgroundImage/index.ts
+init_react_shim();
+import { BackgroundImage } from "./BackgroundImage.js";
+export {
+  BackgroundImage
+};

package/lib/BreadCrumb/BreadCrumb.js

@@ -1,24 +1,25 @@
 import {
   emotion_styled_browser_esm_default
-} from "../../chunk-KBR5BGSG.js";
+} from "../../chunk-SFQY5CLW.js";
 import {
   css
-} from "../../chunk-UAWCTQGC.js";
-import "../../chunk-QN5Q5NTF.js";
+} from "../../chunk-T7TBQTBE.js";
+import "../../chunk-LE44IRCL.js";
+import "../../chunk-CGEEKALF.js";
+import "../../chunk-J3Q2BPOW.js";
 import {
   React,
+  __spreadValues,
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/BreadCrumb/BreadCrumb.tsx
 init_react_shim();
-import {Children, isValidElement} from "react";
-import {Icon} from "../Icon/index.js";
-import {HStack} from "../Layout/HStack/index.js";
-import {Body} from "../Typography/Body/index.js";
-var Separator = emotion_styled_browser_esm_default((props) => /* @__PURE__ */ React.createElement("li", {
-  ...props
-}, /* @__PURE__ */ React.createElement(Icon.Regular.ChevronRight, {
+import { Children, isValidElement } from "react";
+import { Icon } from "../Icon/index.js";
+import { HStack } from "../Layout/HStack/index.js";
+import { Body } from "../Typography/Body/index.js";
+var Separator = emotion_styled_browser_esm_default((props) => /* @__PURE__ */ React.createElement("li", __spreadValues({}, props), /* @__PURE__ */ React.createElement(Icon.Regular.ChevronRight, {
   fill: "gray.300",
   size: 12
 })))((props) => css`
@@ -29,7 +30,7 @@ var Separator = emotion_styled_browser_esm_default((props) => /* @__PURE__ */ Re
         }
       }
     `);
-var BreadCrumb = ({children}) => /* @__PURE__ */ React.createElement(HStack, {
+var BreadCrumb = ({ children }) => /* @__PURE__ */ React.createElement(HStack, {
   as: "ol",
   alignment: "center",
   spacing: [10, 4]