@class101/cdn-ui-system 0.0.7 → 0.0.11

package/lib/Linkify/index.js

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

package/lib/List/List.js

@@ -0,0 +1,51 @@
+import {
+  Body,
+  VStack
+} from "../../chunk-SU3NURQK.js";
+import {
+  React,
+  __objRest,
+  __spreadValues,
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/lib/List/List.tsx
+init_react_shim();
+import { propVariant, styleVariant, system } from "../../core/index.js";
+var List = system()(propVariant({
+  prop: "kind",
+  variants: {
+    number: {
+      as: "ol"
+    },
+    dot: {
+      as: "ul"
+    }
+  }
+}), styleVariant({
+  prop: "kind",
+  variants: {
+    number: {
+      listStyle: "decimal"
+    },
+    dot: {
+      listStyle: "disc"
+    }
+  },
+  skipForward: true
+}))((_a) => {
+  var _b = _a, { children, as } = _b, props = __objRest(_b, ["children", "as"]);
+  return /* @__PURE__ */ React.createElement(VStack, __spreadValues({
+    as,
+    pl: 18,
+    spacing: 4
+  }, props), children);
+});
+var ListItem = ({ children }) => /* @__PURE__ */ React.createElement(Body, {
+  level: 2,
+  as: "li"
+}, children);
+List.Item = ListItem;
+export {
+  List
+};

package/lib/List/index.js

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

package/lib/Media/Image/Image.js

@@ -1,34 +1,51 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  React,
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Media/Image/Image.tsx
-import {useImageContext} from "../../../contexts/ImageContext/index.js";
-import {Box} from "../../../private/Box/index.js";
-import {useActualSizes} from "./useActualSizes.js";
-var Image = (props) => {
-  const {
+init_react_shim();
+import { forwardRef } from "react";
+import { useImageContext } from "../../../contexts/ImageContext/index.js";
+import { Box } from "../../../private/Box/index.js";
+import { useActualSizes } from "./useActualSizes.js";
+var Image = forwardRef((props, ref) => {
+  var _b;
+  const _a = props, {
     className,
     alt,
+    aspectRatio,
     src,
     sizes,
     width = "100%",
     maxWidth,
     height = "100%",
-    objectFit = "cover",
-    ...restProps
-  } = props;
-  const {imageLoader, ImageComponent} = useImageContext();
-  const {actualSizes} = useActualSizes({sizes, width, maxWidth});
+    objectFit = "cover"
+  } = _a, restProps = __objRest(_a, [
+    "className",
+    "alt",
+    "aspectRatio",
+    "src",
+    "sizes",
+    "width",
+    "maxWidth",
+    "height",
+    "objectFit"
+  ]);
+  const { imageLoader, ImageComponent } = useImageContext();
+  const { actualSizes } = useActualSizes({ sizes, width, maxWidth });
   if (ImageComponent) {
-    return /* @__PURE__ */ React.createElement(ImageComponent, {
-      ...props,
+    return /* @__PURE__ */ React.createElement(ImageComponent, __spreadProps(__spreadValues({}, props), {
       imageLoader
-    });
+    }));
   }
   if (!src) {
     return null;
   }
-  const {defaultSrcSet, webpSrcSet} = imageLoader?.(src) ?? {};
+  const { defaultSrcSet, webpSrcSet } = (_b = imageLoader == null ? void 0 : imageLoader(src)) != null ? _b : {};
   return /* @__PURE__ */ React.createElement(Box, {
     as: "picture",
     className,
@@ -39,9 +56,11 @@ var Image = (props) => {
     type: "image/webp",
     srcSet: webpSrcSet,
     sizes: actualSizes
-  }), /* @__PURE__ */ React.createElement(Box, {
-    as: "img",
-    ...restProps,
+  }), /* @__PURE__ */ React.createElement(Box, __spreadProps(__spreadValues({
+    ref,
+    as: "img"
+  }, restProps), {
+    aspectRatio,
     alt,
     srcSet: defaultSrcSet,
     src,
@@ -51,8 +70,8 @@ var Image = (props) => {
     height: "100%",
     objectFit,
     verticalAlign: "top"
-  }));
-};
+  })));
+});
 Image.forwardStyle = true;
 export {
   Image

package/lib/Media/Image/index.js

@@ -1,8 +1,10 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Media/Image/index.ts
-import {Image} from "./Image.js";
+init_react_shim();
+import { Image } from "./Image.js";
 export {
   Image
 };

package/lib/Media/Image/useActualSizes.js

@@ -1,179 +1,41 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", {value: true});
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[Object.keys(fn)[0]])(fn = 0)), res;
-};
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[Object.keys(cb)[0]])((mod = {exports: {}}).exports, mod), mod.exports;
-};
-var __reExport = (target, module, desc) => {
-  if (module && typeof module === "object" || typeof module === "function") {
-    for (let key of __getOwnPropNames(module))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, {get: () => module[key], enumerable: !(desc = __getOwnPropDesc(module, key)) || desc.enumerable});
-  }
-  return target;
-};
-var __toModule = (module) => {
-  return __reExport(__markAsModule(__defProp(module != null ? __create(__getProtoOf(module)) : {}, "default", module && module.__esModule && "default" in module ? {get: () => module.default, enumerable: true} : {value: module, enumerable: true})), module);
-};
-
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-var init_react_shim = __esm({
-  "tools/builders/framer-esm/build/react-shim.js"() {
-  }
-});
-
-// node_modules/react-fast-compare/index.js
-var require_react_fast_compare = __commonJS({
-  "node_modules/react-fast-compare/index.js"(exports, module) {
-    init_react_shim();
-    var hasElementType = typeof Element !== "undefined";
-    var hasMap = typeof Map === "function";
-    var hasSet = typeof Set === "function";
-    var hasArrayBuffer = typeof ArrayBuffer === "function" && !!ArrayBuffer.isView;
-    function equal(a, b) {
-      if (a === b)
-        return true;
-      if (a && b && typeof a == "object" && typeof b == "object") {
-        if (a.constructor !== b.constructor)
-          return false;
-        var length, i, keys;
-        if (Array.isArray(a)) {
-          length = a.length;
-          if (length != b.length)
-            return false;
-          for (i = length; i-- !== 0; )
-            if (!equal(a[i], b[i]))
-              return false;
-          return true;
-        }
-        var it;
-        if (hasMap && a instanceof Map && b instanceof Map) {
-          if (a.size !== b.size)
-            return false;
-          it = a.entries();
-          while (!(i = it.next()).done)
-            if (!b.has(i.value[0]))
-              return false;
-          it = a.entries();
-          while (!(i = it.next()).done)
-            if (!equal(i.value[1], b.get(i.value[0])))
-              return false;
-          return true;
-        }
-        if (hasSet && a instanceof Set && b instanceof Set) {
-          if (a.size !== b.size)
-            return false;
-          it = a.entries();
-          while (!(i = it.next()).done)
-            if (!b.has(i.value[0]))
-              return false;
-          return true;
-        }
-        if (hasArrayBuffer && ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
-          length = a.length;
-          if (length != b.length)
-            return false;
-          for (i = length; i-- !== 0; )
-            if (a[i] !== b[i])
-              return false;
-          return true;
-        }
-        if (a.constructor === RegExp)
-          return a.source === b.source && a.flags === b.flags;
-        if (a.valueOf !== Object.prototype.valueOf)
-          return a.valueOf() === b.valueOf();
-        if (a.toString !== Object.prototype.toString)
-          return a.toString() === b.toString();
-        keys = Object.keys(a);
-        length = keys.length;
-        if (length !== Object.keys(b).length)
-          return false;
-        for (i = length; i-- !== 0; )
-          if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
-            return false;
-        if (hasElementType && a instanceof Element)
-          return false;
-        for (i = length; i-- !== 0; ) {
-          if ((keys[i] === "_owner" || keys[i] === "__v" || keys[i] === "__o") && a.$$typeof) {
-            continue;
-          }
-          if (!equal(a[keys[i]], b[keys[i]]))
-            return false;
-        }
-        return true;
-      }
-      return a !== a && b !== b;
-    }
-    module.exports = function isEqual2(a, b) {
-      try {
-        return equal(a, b);
-      } catch (error) {
-        if ((error.message || "").match(/stack|recursion/i)) {
-          console.warn("react-fast-compare cannot handle circular refs");
-          return false;
-        }
-        throw error;
-      }
-    };
-  }
-});
+import {
+  useDeepCompareMemo
+} from "../../../chunk-O6RRFC57.js";
+import {
+  isDefined
+} from "../../../chunk-MBYCGPJ2.js";
+import "../../../chunk-LN36XQS3.js";
+import {
+  useTheme
+} from "../../../chunk-T7TBQTBE.js";
+import "../../../chunk-LE44IRCL.js";
+import "../../../chunk-CGEEKALF.js";
+import "../../../chunk-J3Q2BPOW.js";
+import {
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Media/Image/useActualSizes.ts
 init_react_shim();
-import {useTheme} from "https://jspm.dev/@emotion/react@11.1.5";
 
-// libs/shared/utils-hooks/src/index.ts
+// libs/shared/utils-css/src/index.ts
 init_react_shim();
 
-// libs/shared/utils-hooks/src/lib/useDeepCompareDeps/index.ts
+// libs/shared/utils-css/src/lib/appendCssUnit/index.ts
 init_react_shim();
 
-// libs/shared/utils-hooks/src/lib/useDeepCompareDeps/useDeepCompareDeps.ts
+// libs/shared/utils-css/src/lib/appendCssUnit/appendCssUnit.ts
 init_react_shim();
-var import_react_fast_compare = __toModule(require_react_fast_compare());
-import {useRef} from "react";
-function useDeepCompareDeps(value) {
-  const ref = useRef(value);
-  if (!(0, import_react_fast_compare.default)(value, ref.current)) {
-    ref.current = value;
+function appendCssUnit(value, cssUnit) {
+  if (typeof value === "number" || !Number.isNaN(Number(value))) {
+    return `${value}${cssUnit}`;
   }
-  return ref.current;
-}
-
-// libs/shared/utils-hooks/src/lib/useDeepCompareMemo/index.ts
-init_react_shim();
-
-// libs/shared/utils-hooks/src/lib/useDeepCompareMemo/useDeepCompareMemo.ts
-init_react_shim();
-import {useMemo} from "react";
-function useDeepCompareMemo(factory, deps) {
-  return useMemo(factory, useDeepCompareDeps(deps));
-}
-
-// libs/shared/utils-type/src/index.ts
-init_react_shim();
-
-// libs/shared/utils-type/src/lib/isDefined/index.ts
-init_react_shim();
-
-// libs/shared/utils-type/src/lib/isDefined/isDefined.ts
-init_react_shim();
-function isDefined(value) {
-  return value !== void 0;
+  return value;
 }
 
 // libs/shared/ui-system/src/lib/Media/Image/useActualSizes.ts
-import {appendCssUnit} from "../../../utils/index.js";
-function useActualSizes({sizes, width, maxWidth}) {
-  const {breakpoints} = useTheme();
+function useActualSizes({ sizes, width, maxWidth }) {
+  const { breakpoints } = useTheme();
   const actualSizes = useDeepCompareMemo(() => {
     if (Array.isArray(sizes)) {
       return sizes.map((size, index) => {
@@ -185,11 +47,11 @@ function useActualSizes({sizes, width, maxWidth}) {
     if (isDefined(sizes)) {
       return appendCssUnit(sizes, "px");
     }
-    if (typeof maxWidth === "number" || maxWidth?.slice(-2) === "px") {
+    if (typeof maxWidth === "number" || (maxWidth == null ? void 0 : maxWidth.slice(-2)) === "px") {
       const result = appendCssUnit(maxWidth, "px");
       return `(min-width: ${result}) ${result}`;
     }
-    if (typeof width === "number" || width?.slice(-2) === "px") {
+    if (typeof width === "number" || (width == null ? void 0 : width.slice(-2)) === "px") {
       return appendCssUnit(width, "px");
     }
     return void 0;

package/lib/Media/SeekBar/SeekBar.js

@@ -1,12 +1,15 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  React,
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Media/SeekBar/SeekBar.tsx
-import {useState} from "react";
-import {Range} from "../../Form/Range/index.js";
-import {Bar} from "../../../private/Bar/index.js";
-import {VStack} from "../../Layout/VStack/index.js";
-import {Action} from "../../Action/index.js";
+init_react_shim();
+import { useState } from "react";
+import { Bar } from "../../../private/Bar/index.js";
+import { Action } from "../../Action/index.js";
+import { Range } from "../../Form/Range/index.js";
+import { VStack } from "../../Layout/VStack/index.js";
 var SeekBar = (props) => {
   const {
     currentTime,

package/lib/Media/SeekBar/index.js

@@ -1,8 +1,10 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Media/SeekBar/index.ts
-import {SeekBar} from "./SeekBar.js";
+init_react_shim();
+import { SeekBar } from "./SeekBar.js";
 export {
   SeekBar
 };

package/lib/Media/Video/Video.js

@@ -1,18 +1,21 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  React,
+  __spreadValues,
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Media/Video/Video.tsx
-import {forwardRef} from "react";
-import {Box} from "../../../private/Box/index.js";
+init_react_shim();
+import { forwardRef } from "react";
+import { Box } from "../../../private/Box/index.js";
 var VideoBox = Box;
-var Video = forwardRef((props, ref) => /* @__PURE__ */ React.createElement(VideoBox, {
+var Video = forwardRef((props, ref) => /* @__PURE__ */ React.createElement(VideoBox, __spreadValues({
   ref,
   as: "video",
   width: "100%",
   height: "100%",
-  playsInline: true,
-  ...props
-}));
+  playsInline: true
+}, props)));
 export {
   Video
 };

package/lib/Media/Video/index.js

@@ -1,8 +1,10 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Media/Video/index.ts
-import {Video} from "./Video.js";
+init_react_shim();
+import { Video } from "./Video.js";
 export {
   Video
 };

package/lib/Media/VideoCaption/VideoCaption.js

@@ -1,12 +1,15 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  React,
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Media/VideoCaption/VideoCaption.tsx
-import {system} from "../../../core/index.js";
-import {Background} from "../../Background/index.js";
-import {VStack} from "../../Layout/VStack/index.js";
-import {Title} from "../../Typography/Title/index.js";
-var VideoCaption = system()()(({children}) => /* @__PURE__ */ React.createElement(Background, {
+init_react_shim();
+import { system } from "../../../core/index.js";
+import { Background } from "../../Background/index.js";
+import { VStack } from "../../Layout/VStack/index.js";
+import { Title } from "../../Typography/Title/index.js";
+var VideoCaption = system()()(({ children }) => /* @__PURE__ */ React.createElement(Background, {
   color: "alpha.black.55",
   borderRadius: 2
 }, /* @__PURE__ */ React.createElement(VStack, {

package/lib/Media/VideoCaption/index.js

@@ -1,8 +1,10 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Media/VideoCaption/index.ts
-import {VideoCaption} from "./VideoCaption.js";
+init_react_shim();
+import { VideoCaption } from "./VideoCaption.js";
 export {
   VideoCaption
 };

package/lib/Media/VideoOverlay/VideoOverlay.js

@@ -1,21 +1,25 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  React,
+  __spreadValues,
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Media/VideoOverlay/VideoOverlay.tsx
-import {Children, cloneElement, isValidElement} from "react";
-import {Center} from "../../Layout/Center/index.js";
-import {HStack} from "../../Layout/HStack/index.js";
-import {Position} from "../../Layout/Position/index.js";
-import {VStack} from "../../Layout/VStack/index.js";
-import {Background} from "../../Background/index.js";
-import {Action} from "../../Action/index.js";
-import {FadeAnimation} from "../../Animation/FadeAnimation/index.js";
-import {SlideAnimation} from "../../Animation/SlideAnimation/index.js";
+init_react_shim();
+import { Children, cloneElement, isValidElement } from "react";
+import { Action } from "../../Action/index.js";
+import { FadeAnimation } from "../../Animation/FadeAnimation/index.js";
+import { SlideAnimation } from "../../Animation/SlideAnimation/index.js";
+import { Background } from "../../Background/index.js";
+import { Center } from "../../Layout/Center/index.js";
+import { HStack } from "../../Layout/HStack/index.js";
+import { Position } from "../../Layout/Position/index.js";
+import { VStack } from "../../Layout/VStack/index.js";
 function withDefaultKey(elements) {
-  return Children.map(elements, (child, index) => isValidElement(child) ? cloneElement(child, (props) => ({key: index, ...props})) : child);
+  return Children.map(elements, (child, index) => isValidElement(child) ? cloneElement(child, (props) => __spreadValues({ key: index }, props)) : child);
 }
 var VideoOverlay = (props) => {
-  const {leftControls, rightControls, seekBar, center, topCenter, subtitle, controlActive = true} = props;
+  const { leftControls, rightControls, seekBar, center, topRight, subtitle, controlActive = true } = props;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SlideAnimation, {
     animate: [false, false, true],
     from: controlActive ? [0, 0] : [0, "-80px"],
@@ -41,14 +45,6 @@ var VideoOverlay = (props) => {
     height: "100%",
     userSelect: "none"
   }, /* @__PURE__ */ React.createElement(Position, {
-    position: "absolute",
-    top: "10%",
-    right: 0,
-    left: 0
-  }, /* @__PURE__ */ React.createElement(VStack, {
-    width: "100%",
-    alignment: "center"
-  }, topCenter)), /* @__PURE__ */ React.createElement(Position, {
     position: "absolute",
     top: 0,
     right: 0,
@@ -69,7 +65,7 @@ var VideoOverlay = (props) => {
     pointerEvents: controlActive ? "auto" : "none"
   }, /* @__PURE__ */ React.createElement(Background, {
     background: "linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.6) 99.48%)"
-  }, /* @__PURE__ */ React.createElement(Position, {
+  }, /* @__PURE__ */ React.createElement(VStack, null, /* @__PURE__ */ React.createElement(Position, {
     position: "absolute",
     right: 0,
     left: 0,
@@ -89,7 +85,11 @@ var VideoOverlay = (props) => {
     flex: "1"
   }, withDefaultKey(leftControls)), /* @__PURE__ */ React.createElement(HStack, {
     spacing: [12, 12, 24]
-  }, withDefaultKey(rightControls))))))))))));
+  }, withDefaultKey(rightControls))))), /* @__PURE__ */ React.createElement(Position, {
+    position: "absolute",
+    top: 20,
+    right: 20
+  }, /* @__PURE__ */ React.createElement(VStack, null, topRight))))))))));
 };
 export {
   VideoOverlay

package/lib/Media/VideoOverlay/index.js

@@ -1,8 +1,10 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Media/VideoOverlay/index.ts
-import {VideoOverlay} from "./VideoOverlay.js";
+init_react_shim();
+import { VideoOverlay } from "./VideoOverlay.js";
 export {
   VideoOverlay
 };

package/lib/Media/VolumeBar/VolumeBar.js

@@ -1,15 +1,18 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  React,
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Media/VolumeBar/VolumeBar.tsx
-import {useRef, useState} from "react";
-import {Icon} from "../../Icon/index.js";
-import {Transition} from "../../Animation/Transition/index.js";
-import {Action} from "../../Action/index.js";
-import {HStack} from "../../Layout/HStack/index.js";
-import {Range} from "../../Form/Range/index.js";
-import {VStack} from "../../Layout/VStack/index.js";
-import {propVariant, system} from "../../../core/index.js";
+init_react_shim();
+import { useRef, useState } from "react";
+import { Icon } from "../../Icon/index.js";
+import { Transition } from "../../Animation/Transition/index.js";
+import { Action } from "../../Action/index.js";
+import { HStack } from "../../Layout/HStack/index.js";
+import { Range } from "../../Form/Range/index.js";
+import { VStack } from "../../Layout/VStack/index.js";
+import { propVariant, system } from "../../../core/index.js";
 var VolumeBar = system()(propVariant({
   prop: "size",
   variants: {
@@ -24,7 +27,7 @@ var VolumeBar = system()(propVariant({
   },
   responsive: true
 }))((props) => {
-  const {iconSize, width, volume, size, onChangeVolume} = props;
+  const { iconSize, width, volume, size, onChangeVolume } = props;
   const [isVisible, setVisible] = useState(false);
   const isTouched = useRef(false);
   const beforeVolume = useRef(0);