@react95/core 8.0.0-alpha.1 → 8.0.0-alpha.11

package/cjs/RadioButton/{RadioButton.css.js → RadioButton.css.cjs}

@@ -1,7 +1,7 @@
 require('./RadioButton.css.ts.vanilla.css');
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-/* empty css                                  */var field = "r95_1rnz0nz3";
+/* empty css                                   */var field = "r95_1rnz0nz3";
 var icon = "r95_1rnz0nz0";
 var label = "r95_1rnz0nz2";
 var text = "r95_1rnz0nz1";

package/cjs/Range/Range.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const Frame = require("../Frame/Frame.cjs");
+const Range_css = require("./Range.css.cjs");
+const cn = require("classnames");
+const Range = React.forwardRef((rest, ref) => /* @__PURE__ */ React.createElement(
+  Frame.Frame,
+  {
+    ...rest,
+    ref,
+    className: cn(Range_css.range, rest.className),
+    as: "input",
+    type: "range"
+  }
+));
+exports.Range = Range;

package/cjs/Range/{Range.css.js → Range.css.cjs}

@@ -1,5 +1,5 @@
 require('./Range.css.ts.vanilla.css');
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-/* empty css                            */var range = "r95_1i4w9z20";
+/* empty css                             */var range = "r95_1i4w9z20";
 exports.range = range;

package/cjs/Tabs/{Tab.js → Tab.cjs}

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const Tabs_css = require("./Tabs.css.js");
-const Frame = require("../Frame/Frame.js");
+const Tabs_css = require("./Tabs.css.cjs");
+const Frame = require("../Frame/Frame.cjs");
 const Tab = React.forwardRef(
   ({ activeTab, title, ...rest }, ref) => /* @__PURE__ */ React.createElement(
     Frame.Frame,

package/cjs/Tabs/{Tabs.js → Tabs.cjs}

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const cn = require("classnames");
-const Tab = require("./Tab.js");
-const Tabs_css = require("./Tabs.css.js");
-const Frame = require("../Frame/Frame.js");
+const Tab = require("./Tab.cjs");
+const Tabs_css = require("./Tabs.css.cjs");
+const Frame = require("../Frame/Frame.cjs");
 const Tabs = React.forwardRef(
   ({ children, defaultActiveTab, onChange, ...rest }, ref) => {
     const [firstTab] = React.Children.toArray(children);
@@ -19,28 +19,25 @@ const Tabs = React.forwardRef(
         as: "ol",
         ref
       },
-      React.Children.map(
-        children,
-        (child) => {
-          const { title, disabled } = child.props;
-          return /* @__PURE__ */ React.createElement(
-            Tab.Tab,
-            {
-              key: title,
-              ...child.props,
-              activeTab,
-              onClick: (e) => {
-                if (!disabled) {
-                  if (onChange) {
-                    onChange(title, e);
-                  }
-                  setActiveTab(title);
+      React.Children.map(children, (child) => {
+        const { title, disabled } = child.props;
+        return /* @__PURE__ */ React.createElement(
+          Tab.Tab,
+          {
+            key: title,
+            ...child.props,
+            activeTab,
+            onClick: (e) => {
+              if (!disabled) {
+                if (onChange) {
+                  onChange(title, e);
                 }
+                setActiveTab(title);
               }
             }
-          );
-        }
-      )
+          }
+        );
+      })
     ), /* @__PURE__ */ React.createElement(Frame.Frame, { className: Tabs_css.navContainer, width: rest.width || rest.w }, React.Children.map(
       children,
       (child) => child.props.title === activeTab && child.props.children

package/cjs/Tabs/{Tabs.css.js → Tabs.css.cjs}

@@ -1,7 +1,7 @@
 require('./Tabs.css.ts.vanilla.css');
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-/* empty css                           */const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+/* empty css                            */const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var navContainer = "r95_fyllcd1";
 var navbar = "r95_fyllcd0";
 var tab = createRuntimeFn.createRuntimeFn({ defaultClassName: "r95_fyllcd2", variantClassNames: { active: { true: "r95_fyllcd3" } }, defaultVariants: {}, compoundVariants: [] });

package/cjs/TaskBar/{Clock.js → Clock.cjs}

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const Frame = require("../Frame/Frame.js");
-const Tooltip = require("../Tooltip/Tooltip.js");
-const TaskBar_css = require("./TaskBar.css.js");
+const Frame = require("../Frame/Frame.cjs");
+const Tooltip = require("../Tooltip/Tooltip.cjs");
+const TaskBar_css = require("./TaskBar.css.cjs");
 const Clock = () => {
   const [timer, setTimer] = React.useState("");
   React.useEffect(() => {

package/cjs/TaskBar/{TaskBar.js → TaskBar.cjs}

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const ModalContext = require("../Modal/ModalContext.js");
-const Frame = require("../Frame/Frame.js");
-const Clock = require("./Clock.js");
-const WindowButton = require("./WindowButton.js");
+const ModalContext = require("../Modal/ModalContext.cjs");
+const Frame = require("../Frame/Frame.cjs");
+const Clock = require("./Clock.cjs");
+const WindowButton = require("./WindowButton.cjs");
 const icons = require("@react95/icons");
-const TaskBar_css = require("./TaskBar.css.js");
+const TaskBar_css = require("./TaskBar.css.cjs");
 const TaskBar = React.forwardRef(
   ({ list }, ref) => {
     const [showList, toggleShowList] = React.useState(false);

package/cjs/TaskBar/{TaskBar.css.js → TaskBar.css.cjs}

@@ -1,7 +1,7 @@
 require('./TaskBar.css.ts.vanilla.css');
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-/* empty css                              */const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+/* empty css                               */const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var icon = "r95_1ct83mo9";
 var tooltip = "r95_1ct83mo1";
 var truncate = "r95_1ct83mo0";

package/cjs/TaskBar/TaskBar.css.ts.vanilla.css

@@ -19,6 +19,7 @@
   max-width: 150px;
   border: none;
   outline: none;
+  color: var(--r95-color-materialText);
 }
 .r95_1ct83mo3 {
   padding-inline: var(--r95-space-5);

package/cjs/TaskBar/{WindowButton.js → WindowButton.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const TaskBar_css = require("./TaskBar.css.js");
+const TaskBar_css = require("./TaskBar.css.cjs");
 const WindowButton = React.forwardRef(
   ({ children, small = false, icon, active = false, ...props }, ref) => /* @__PURE__ */ React.createElement(
     "button",

package/cjs/TextArea/TextArea.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const Frame = require("../Frame/Frame.cjs");
+const Input_css = require("../Input/Input.css.cjs");
+const TextArea = React.forwardRef(
+  (rest, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, ref, className: Input_css.input, as: "textarea" })
+);
+exports.TextArea = TextArea;

package/cjs/TitleBar/{TitleBar.js → TitleBar.cjs}

@@ -1,18 +1,20 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const Frame = require("../Frame/Frame.js");
-const TitleBar_css = require("./TitleBar.css.js");
-const Button_css = require("../Button/Button.css.js");
+const Frame = require("../Frame/Frame.cjs");
+const TitleBar_css = require("./TitleBar.css.cjs");
+const Button_css = require("../Button/Button.css.cjs");
 const cn = require("classnames");
-const OptionsBox = React.forwardRef((rest, ref) => /* @__PURE__ */ React.createElement(
-  Frame.Frame,
-  {
-    ...rest,
-    ref,
-    className: cn(TitleBar_css.optionsBox, rest.className)
-  }
-));
+const OptionsBox = React.forwardRef(
+  (rest, ref) => /* @__PURE__ */ React.createElement(
+    Frame.Frame,
+    {
+      ...rest,
+      ref,
+      className: cn(TitleBar_css.optionsBox, rest.className)
+    }
+  )
+);
 const Option = React.forwardRef(
   (rest, ref) => /* @__PURE__ */ React.createElement(
     Frame.Frame,

package/cjs/TitleBar/{TitleBar.css.js → TitleBar.css.cjs}

@@ -1,7 +1,7 @@
 require('./TitleBar.css.ts.vanilla.css');
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-/* empty css                               */const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+/* empty css                                */const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var option = "r95_1kpzw681";
 var optionsBox = "r95_1kpzw680";
 var title = "r95_1kpzw685";

package/cjs/Tooltip/{Tooltip.js → Tooltip.cjs}

@@ -1,25 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const Tooltip_css = require("./Tooltip.css.js");
 const cn = require("classnames");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const Tooltip_css = require("./Tooltip.css.cjs");
 function formatDate(date) {
   const monthNames = [
     "January",
@@ -46,8 +29,8 @@ const TooltipRenderer = ({
   delay = 1e3,
   ...rest
 }, ref) => {
-  const [show, setShow] = React__namespace.useState(false);
-  const [delayTimer, setDelayTimer] = React__namespace.useState(0);
+  const [show, setShow] = React.useState(false);
+  const [delayTimer, setDelayTimer] = React.useState(0);
   const handleEnter = () => {
     const timer = window.setTimeout(() => {
       setShow(true);
@@ -58,7 +41,7 @@ const TooltipRenderer = ({
     clearTimeout(delayTimer);
     setShow(false);
   };
-  return /* @__PURE__ */ React__namespace.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       ...rest,
@@ -67,11 +50,11 @@ const TooltipRenderer = ({
       onMouseLeave: handleLeave,
       ref
     },
-    show && /* @__PURE__ */ React__namespace.createElement("div", { className: Tooltip_css.tip }, text),
+    show && /* @__PURE__ */ React.createElement("div", { className: Tooltip_css.tip }, text),
     children
   );
 };
-const Tooltip = React__namespace.forwardRef(
+const Tooltip = React.forwardRef(
   TooltipRenderer
 );
 exports.Tooltip = Tooltip;

package/cjs/Tooltip/{Tooltip.css.js → Tooltip.css.cjs}

@@ -1,7 +1,7 @@
 require('./Tooltip.css.ts.vanilla.css');
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-/* empty css                              */var tip = "r95_f5whxn0";
+/* empty css                               */var tip = "r95_f5whxn0";
 var wrapper = "r95_f5whxn1";
 exports.tip = tip;
 exports.wrapper = wrapper;

package/cjs/Tree/Node.cjs

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const icons$1 = require("@react95/icons");
+const Tree_css = require("./Tree.css.cjs");
+const Frame = require("../Frame/Frame.cjs");
+const cn = require("classnames");
+const icons = {
+  FILE_MEDIA: icons$1.MediaCd,
+  FILE_TEXT: icons$1.FileText,
+  FILE_UNKNOWN: icons$1.Bat,
+  FILE_FONT: icons$1.FileFont2,
+  FILE_PEN: icons$1.FilePen,
+  FILE_SETTINGS: icons$1.FileSettings,
+  FILE_TEXT_SETTINGS: icons$1.FileTextSettings,
+  FILE_EXECUTABLE: icons$1.BatExec
+};
+const NodeIcon = ({
+  hasChildren,
+  isOpen
+}) => {
+  if (!hasChildren) {
+    return /* @__PURE__ */ React.createElement(icons$1.Bat, { variant: "16x16_4", "data-testid": "react95-default-icon-bat" });
+  }
+  if (isOpen) {
+    return /* @__PURE__ */ React.createElement(
+      icons$1.FolderOpen,
+      {
+        variant: "16x16_4",
+        "data-testid": "react95-default-icon-folder-open"
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(icons$1.Folder, { variant: "16x16_4", "data-testid": "react95-default-icon-folder" });
+};
+const Node = ({
+  children = [],
+  id,
+  icon,
+  label,
+  onClick = () => {
+  },
+  ...rest
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const hasChildren = children.length > 0;
+  const onClickHandler = (event) => {
+    onClick(event, {
+      id,
+      icon,
+      label,
+      children
+    });
+  };
+  const onKeyDownHandler = (event) => {
+    if (event.key === " ") {
+      setIsOpen(!isOpen);
+      onClickHandler(event);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Frame.Frame, { as: "li", ...rest, className: Tree_css.node }, /* @__PURE__ */ React.createElement("div", { className: Tree_css.nodeContent }, hasChildren && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: Tree_css.folderStatus,
+      onClick: () => setIsOpen(!isOpen)
+    },
+    isOpen ? "-" : "+"
+  ), /* @__PURE__ */ React.createElement("div", { className: Tree_css.iconContainer({ hasChildren }) }, icon || /* @__PURE__ */ React.createElement(NodeIcon, { hasChildren, isOpen })), /* @__PURE__ */ React.createElement(
+    "label",
+    {
+      className: Tree_css.label,
+      tabIndex: 0,
+      onDoubleClick: () => setIsOpen(!isOpen),
+      onClick: onClickHandler,
+      onKeyDown: onKeyDownHandler
+    },
+    label
+  )), hasChildren && isOpen && /* @__PURE__ */ React.createElement("ul", { className: Tree_css.tree }, children == null ? void 0 : children.map((dataNode) => /* @__PURE__ */ React.createElement(Node, { key: dataNode.id, ...dataNode }))));
+};
+const NodeRoot = ({
+  id,
+  icon,
+  label,
+  onClick = () => {
+  },
+  ...rest
+}) => {
+  const onClickHandler = (event) => {
+    onClick(event, {
+      id,
+      icon,
+      label
+    });
+  };
+  const onKeyDownHandler = (event) => {
+    if (event.key === " ") {
+      onClickHandler(event);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, className: cn(Tree_css.node, Tree_css.nodeRoot) }, /* @__PURE__ */ React.createElement("div", { className: Tree_css.nodeContent }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        Tree_css.iconContainer.classNames.base,
+        Tree_css.iconContainer.classNames.variants.hasChildren.true
+      )
+    },
+    icon || /* @__PURE__ */ React.createElement(NodeIcon, { hasChildren: false, isOpen: true })
+  ), /* @__PURE__ */ React.createElement(
+    "label",
+    {
+      className: Tree_css.label,
+      tabIndex: 0,
+      onClick: onClickHandler,
+      onKeyDown: onKeyDownHandler
+    },
+    label
+  )));
+};
+exports.Node = Node;
+exports.NodeRoot = NodeRoot;
+exports.icons = icons;

package/cjs/Tree/{Tree.js → Tree.cjs}

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const Node = require("./Node.js");
-const Tree_css = require("./Tree.css.js");
-const Frame = require("../Frame/Frame.js");
+const Node = require("./Node.cjs");
+const Tree_css = require("./Tree.css.cjs");
+const Frame = require("../Frame/Frame.cjs");
 const Tree = React.forwardRef(
   ({ data, root, ...rest }, ref) => {
     return /* @__PURE__ */ React.createElement(React.Fragment, null, root && /* @__PURE__ */ React.createElement(Node.NodeRoot, { ...root }), /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, className: Tree_css.tree, as: "ul", ref }, data.map((dataNode) => /* @__PURE__ */ React.createElement(Node.Node, { key: dataNode.id, ...dataNode }))));

package/cjs/Tree/{Tree.css.js → Tree.css.cjs}

@@ -1,7 +1,7 @@
 require('./Tree.css.ts.vanilla.css');
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-/* empty css                           */const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+/* empty css                            */const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var folderStatus = "r95_z2881c5";
 var iconContainer = createRuntimeFn.createRuntimeFn({ defaultClassName: "r95_z2881c6", variantClassNames: { hasChildren: { true: "r95_z2881c7", false: "r95_z2881c8" } }, defaultVariants: {}, compoundVariants: [] });
 var label = "r95_z2881c4";

package/cjs/Tree/Tree.css.ts.vanilla.css

@@ -10,7 +10,7 @@
   margin-left: var(--r95-space-6);
 }
 .r95_z2881c1 {
-  margin-left: var(--r95-space-12);
+  margin-left: var(--r95-space-13);
   border-left-width: thin;
   border-left-style: dotted;
   border-left-color: var(--r95-color-borderDarkest);

package/cjs/Video/{Video.js → Video.cjs}

@@ -2,35 +2,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const icons = require("@react95/icons");
-const Video_css = require("./Video.css.js");
-const Frame = require("../Frame/Frame.js");
-const Button = require("../Button/Button.js");
-const Range = require("../Range/Range.js");
-const TitleBar = require("../TitleBar/TitleBar.js");
-const Play = require("./buttons/Play.js");
-const Pause = require("./buttons/Pause.js");
-const Stop = require("./buttons/Stop.js");
-const Fullscreen = require("./buttons/Fullscreen.js");
+const Video_css = require("./Video.css.cjs");
+const Frame = require("../Frame/Frame.cjs");
+const Button = require("../Button/Button.cjs");
+const Range = require("../Range/Range.cjs");
+const TitleBar = require("../TitleBar/TitleBar.cjs");
+const Play = require("./buttons/Play.cjs");
+const Pause = require("./buttons/Pause.cjs");
+const Stop = require("./buttons/Stop.cjs");
+const Fullscreen = require("./buttons/Fullscreen.cjs");
 const cn = require("classnames");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const Source = ({ src }) => /* @__PURE__ */ React__namespace.createElement("source", { src, type: `video/${src.substring(src.length - 3)}` });
-const PlayOrPause = ({ playing }) => playing ? /* @__PURE__ */ React__namespace.createElement(Pause, null) : /* @__PURE__ */ React__namespace.createElement(Play, null);
+const Source = ({ src }) => /* @__PURE__ */ React.createElement("source", { src, type: `video/${src.substring(src.length - 3)}` });
+const PlayOrPause = ({ playing }) => playing ? /* @__PURE__ */ React.createElement(Pause, null) : /* @__PURE__ */ React.createElement(Play, null);
 const arrayFy = (str) => [].concat(str);
 function updateProgressBar(player, updateProgress) {
   const percentage = Math.floor(100 / player.duration * player.currentTime);
@@ -47,20 +30,20 @@ function parseCurrentTime(secs) {
   return [hours, minutes, seconds].map((v) => v < 10 ? `0${v}` : v).filter((v, i) => v !== "00" || i > 0).join(":");
 }
 const VideoRenderer = ({ name, src, videoProps, ...props }, ref) => {
-  const [playing, setPlaying] = React__namespace.useState(false);
-  const [loadeddata, setLoadeddata] = React__namespace.useState(false);
-  const [progress, setProgress] = React__namespace.useState(0);
-  const player = React__namespace.useRef(null);
-  const progressRef = React__namespace.useRef(null);
-  const wrapperRef = React__namespace.useRef(null);
-  const playPauseRef = React__namespace.useRef(null);
-  const stopRef = React__namespace.useRef(null);
-  const fullScreenRef = React__namespace.useRef(null);
+  const [playing, setPlaying] = React.useState(false);
+  const [loadeddata, setLoadeddata] = React.useState(false);
+  const [progress, setProgress] = React.useState(0);
+  const player = React.useRef(null);
+  const progressRef = React.useRef(null);
+  const wrapperRef = React.useRef(null);
+  const playPauseRef = React.useRef(null);
+  const stopRef = React.useRef(null);
+  const fullScreenRef = React.useRef(null);
   const paths = arrayFy(src);
   const [pathname] = paths;
   const normalizedName = name || pathname.replace(/^.*[\\/]/, "");
   const title = `${normalizedName}${!loadeddata ? " (Opening)" : ""}`;
-  React__namespace.useImperativeHandle(ref, () => ({
+  React.useImperativeHandle(ref, () => ({
     get video() {
       return player;
     },
@@ -80,7 +63,7 @@ const VideoRenderer = ({ name, src, videoProps, ...props }, ref) => {
       return fullScreenRef;
     }
   }));
-  React__namespace.useEffect(() => {
+  React.useEffect(() => {
     var _a, _b, _c, _d;
     (_a = player.current) == null ? void 0 : _a.addEventListener(
       "ended",
@@ -114,7 +97,7 @@ const VideoRenderer = ({ name, src, videoProps, ...props }, ref) => {
       false
     );
   }, [player.current]);
-  return /* @__PURE__ */ React__namespace.createElement(
+  return /* @__PURE__ */ React.createElement(
     Frame.Frame,
     {
       ...props,
@@ -123,18 +106,18 @@ const VideoRenderer = ({ name, src, videoProps, ...props }, ref) => {
       backgroundColor: "$material",
       ref: wrapperRef
     },
-    /* @__PURE__ */ React__namespace.createElement(TitleBar.TitleBar, { icon: /* @__PURE__ */ React__namespace.createElement(icons.Mplayer113, { variant: "16x16_4" }), title }),
-    /* @__PURE__ */ React__namespace.createElement(
+    /* @__PURE__ */ React.createElement(TitleBar.TitleBar, { icon: /* @__PURE__ */ React.createElement(icons.Mplayer113, { variant: "16x16_4" }), title }),
+    /* @__PURE__ */ React.createElement(
       "video",
       {
         className: Video_css.videoTag({ visible: loadeddata }),
         ...videoProps,
         ref: player
       },
-      paths.map((s) => /* @__PURE__ */ React__namespace.createElement(Source, { key: s, src: s }))
+      paths.map((s) => /* @__PURE__ */ React.createElement(Source, { key: s, src: s }))
     ),
-    loadeddata && /* @__PURE__ */ React__namespace.createElement("span", { className: Video_css.divider }),
-    /* @__PURE__ */ React__namespace.createElement(Frame.Frame, { maxWidth: "250px", mx: "auto", mb: "$4" }, /* @__PURE__ */ React__namespace.createElement("div", { className: Video_css.countDownContainer }, /* @__PURE__ */ React__namespace.createElement(Frame.Frame, { display: "flex", flexDirection: "column", w: "40%" }, /* @__PURE__ */ React__namespace.createElement(
+    loadeddata && /* @__PURE__ */ React.createElement("span", { className: Video_css.divider }),
+    /* @__PURE__ */ React.createElement(Frame.Frame, { maxWidth: "250px", mx: "auto", mb: "$4" }, /* @__PURE__ */ React.createElement("div", { className: Video_css.countDownContainer }, /* @__PURE__ */ React.createElement(Frame.Frame, { display: "flex", flexDirection: "column", w: "40%" }, /* @__PURE__ */ React.createElement(
       "div",
       {
         className: Video_css.videoFont,
@@ -143,9 +126,10 @@ const VideoRenderer = ({ name, src, videoProps, ...props }, ref) => {
         }
       },
       player.current && parseCurrentTime(player.current.duration)
-    ), /* @__PURE__ */ React__namespace.createElement("div", { className: Video_css.videoFont, style: { height: 12 } }, !loadeddata && "Openning")), /* @__PURE__ */ React__namespace.createElement(Frame.Frame, { display: "flex", flexDirection: "column", w: "40%" }, /* @__PURE__ */ React__namespace.createElement("div", { className: cn(Video_css.videoFont, Video_css.currentTime) }, player.current && parseCurrentTime(player.current.currentTime)), /* @__PURE__ */ React__namespace.createElement("div", { className: cn(Video_css.videoFont, Video_css.elapsedTime) }, "time"))), /* @__PURE__ */ React__namespace.createElement("div", { className: Video_css.controls }, /* @__PURE__ */ React__namespace.createElement(
+    ), /* @__PURE__ */ React.createElement("div", { className: Video_css.videoFont, style: { height: 12 } }, !loadeddata && "Openning")), /* @__PURE__ */ React.createElement(Frame.Frame, { display: "flex", flexDirection: "column", w: "40%" }, /* @__PURE__ */ React.createElement("div", { className: cn(Video_css.videoFont, Video_css.currentTime) }, player.current && parseCurrentTime(player.current.currentTime)), /* @__PURE__ */ React.createElement("div", { className: cn(Video_css.videoFont, Video_css.elapsedTime) }, "time"))), /* @__PURE__ */ React.createElement("div", { className: Video_css.controls }, /* @__PURE__ */ React.createElement(
       Button.Button,
       {
+        as: "button",
         className: Video_css.controlBtn,
         disabled: !loadeddata,
         onClick: () => {
@@ -159,14 +143,14 @@ const VideoRenderer = ({ name, src, videoProps, ...props }, ref) => {
         },
         ref: playPauseRef
       },
-      loadeddata ? /* @__PURE__ */ React__namespace.createElement(PlayOrPause, { playing }) : /* @__PURE__ */ React__namespace.createElement(
+      loadeddata ? /* @__PURE__ */ React.createElement(PlayOrPause, { playing }) : /* @__PURE__ */ React.createElement(
         icons.User4,
         {
           style: { borderRight: "none", borderBottom: "none" },
           variant: "32x32_4"
         }
       )
-    ), /* @__PURE__ */ React__namespace.createElement(
+    ), /* @__PURE__ */ React.createElement(
       Button.Button,
       {
         className: Video_css.controlBtn,
@@ -180,8 +164,8 @@ const VideoRenderer = ({ name, src, videoProps, ...props }, ref) => {
         },
         ref: stopRef
       },
-      /* @__PURE__ */ React__namespace.createElement(Stop, null)
-    ), /* @__PURE__ */ React__namespace.createElement(
+      /* @__PURE__ */ React.createElement(Stop, null)
+    ), /* @__PURE__ */ React.createElement(
       Button.Button,
       {
         className: Video_css.controlBtn,
@@ -192,8 +176,8 @@ const VideoRenderer = ({ name, src, videoProps, ...props }, ref) => {
         },
         ref: fullScreenRef
       },
-      /* @__PURE__ */ React__namespace.createElement(Fullscreen, null)
-    ), /* @__PURE__ */ React__namespace.createElement(
+      /* @__PURE__ */ React.createElement(Fullscreen, null)
+    ), /* @__PURE__ */ React.createElement(
       Range.Range,
       {
         className: Video_css.range,
@@ -219,5 +203,5 @@ const VideoRenderer = ({ name, src, videoProps, ...props }, ref) => {
     )))
   );
 };
-const Video = React__namespace.forwardRef(VideoRenderer);
+const Video = React.forwardRef(VideoRenderer);
 exports.Video = Video;

package/cjs/Video/{Video.css.js → Video.css.cjs}

@@ -1,7 +1,7 @@
 require('./Video.css.ts.vanilla.css');
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-/* empty css                            */const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+/* empty css                             */const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var controlBtn = "r95_13gnpv09";
 var controls = "r95_13gnpv03";
 var countDownContainer = "r95_13gnpv04";