@react95/core 7.0.1 → 8.0.0-alpha.0

package/cjs/Tooltip/Tooltip.js

@@ -4,10 +4,10 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.Tooltip = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("@xstyled/styled-components"));
-var _Frame = _interopRequireDefault(require("../Frame"));
+var _Tooltip = require("./Tooltip.css");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _excluded = ["children", "text", "delay"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -21,18 +21,19 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var Tip = (0, _styledComponents["default"])(_Frame["default"]).withConfig({
-  displayName: "Tooltip__Tip",
-  componentId: "sc-klr207-0"
-})(["\n  background: radial-gradient(#ff0 20%, transparent 20%) 0 0,\n    radial-gradient(#ff0 20%, transparent 20%) 4px 4px,\n    radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 25%) 0 1px,\n    radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 25%) 3px 4px;\n  background-size: 7px 7px;\n  background-color: borderLightest;\n  border: 1;\n  padding: 2 2 2 4;\n  box-shadow: none;\n  position: absolute;\n  top: -20px;\n  text-align: center;\n  z-index: taskbar;\n"]);
-var Wrapper = _styledComponents["default"].div.withConfig({
-  displayName: "Tooltip__Wrapper",
-  componentId: "sc-klr207-1"
-})(["\n  display: inline-block;\n  position: relative;\n  cursor: default;\n  white-space: nowrap;\n"]);
+function formatDate(date) {
+  var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  var day = date.getDate();
+  var monthIndex = date.getMonth();
+  var year = date.getFullYear();
+  return "".concat(day.toString().padStart(2, '0'), " ").concat(monthNames[monthIndex], " ").concat(year);
+}
 var TooltipRenderer = function TooltipRenderer(_ref, ref) {
   var children = _ref.children,
-    text = _ref.text,
-    delay = _ref.delay,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? formatDate(new Date()) : _ref$text,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 1000 : _ref$delay,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -52,23 +53,13 @@ var TooltipRenderer = function TooltipRenderer(_ref, ref) {
     clearTimeout(delayTimer);
     setShow(false);
   };
-  return /*#__PURE__*/React.createElement(Wrapper, _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: (0, _classnames["default"])(_Tooltip.wrapper, rest.className),
     onMouseEnter: handleEnter,
-    onMouseLeave: handleLeave
-  }, rest, {
+    onMouseLeave: handleLeave,
     ref: ref
-  }), show && /*#__PURE__*/React.createElement(Tip, null, text), children);
-};
-var Tooltip = /*#__PURE__*/React.forwardRef(TooltipRenderer);
-function formatDate(date) {
-  var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-  var day = date.getDate();
-  var monthIndex = date.getMonth();
-  var year = date.getFullYear();
-  return "".concat(day.toString().padStart(2, '0'), " ").concat(monthNames[monthIndex], " ").concat(year);
-}
-Tooltip.defaultProps = {
-  delay: 1000,
-  text: formatDate(new Date())
+  }), show && /*#__PURE__*/React.createElement("div", {
+    className: _Tooltip.tip
+  }, text), children);
 };
-var _default = exports["default"] = Tooltip;
+var Tooltip = exports.Tooltip = /*#__PURE__*/React.forwardRef(TooltipRenderer);

package/cjs/Tooltip/index.js

@@ -4,6 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _Tooltip = _interopRequireDefault(require("./Tooltip"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var _default = exports["default"] = _Tooltip["default"];
+var _Tooltip = require("./Tooltip");
+var _default = exports["default"] = _Tooltip.Tooltip;

package/cjs/Tree/Node.js

@@ -4,14 +4,14 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.icons = exports["default"] = void 0;
+exports.icons = exports["default"] = exports.NodeRoot = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("@xstyled/styled-components"));
-var _treeMid = _interopRequireDefault(require("./imgs/tree-mid.png"));
-var _treeLast = _interopRequireDefault(require("./imgs/tree-last.png"));
-var _treeNodeChildren = _interopRequireDefault(require("./imgs/tree-node-children.png"));
 var _icons = require("@react95/icons");
-var _excluded = ["children", "id", "icon", "label", "onClick"];
+var styles = _interopRequireWildcard(require("./Tree.css"));
+var _Frame = require("../Frame/Frame");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _excluded = ["children", "id", "icon", "label", "onClick"],
+  _excluded2 = ["id", "icon", "label", "onClick"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -34,39 +34,9 @@ var icons = exports.icons = {
   FILE_TEXT_SETTINGS: _icons.FileTextSettings,
   FILE_EXECUTABLE: _icons.BatExec
 };
-var NodeItem = _styledComponents["default"].div.withConfig({
-  displayName: "Node__NodeItem",
-  componentId: "sc-284w29-0"
-})(["\n  list-style-type: none;\n  background-repeat: no-repeat;\n  background-image: url(", ");\n\n  &:last-child {\n    background-image: url(", ");\n  }\n"], _treeMid["default"], function (_ref) {
-  var isOpen = _ref.isOpen;
-  return isOpen ? _treeMid["default"] : _treeLast["default"];
-});
-var NodeInfo = _styledComponents["default"].div.withConfig({
-  displayName: "Node__NodeInfo",
-  componentId: "sc-284w29-1"
-})(["\n  display: flex;\n  align-items: center;\n  user-select: none;\n  -webkit-user-select: none;\n  -khtml-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n"]);
-var FolderStatus = _styledComponents["default"].div.withConfig({
-  displayName: "Node__FolderStatus",
-  componentId: "sc-284w29-2"
-})(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 10px;\n  height: 10px;\n  border: 1;\n  border-color: borderDarkest;\n  background-color: inputBackground;\n  font-size: 11px;\n"]);
-var IconContainer = _styledComponents["default"].div.withConfig({
-  displayName: "Node__IconContainer",
-  componentId: "sc-284w29-3"
-})(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  margin-right: 6;\n  margin-left: ", "px;\n\n  > svg {\n    width: 14px;\n    height: 14px;\n  }\n"], function (_ref2) {
-  var hasChildren = _ref2.hasChildren;
-  return hasChildren ? 8 : 18;
-});
-var NodeChildren = _styledComponents["default"].ul.withConfig({
-  displayName: "Node__NodeChildren",
-  componentId: "sc-284w29-4"
-})(["\n  padding: 0 0 0 22;\n  background-image: url(", ");\n  background-repeat: repeat-y;\n"], _treeNodeChildren["default"]);
-var Label = _styledComponents["default"].span.withConfig({
-  displayName: "Node__Label",
-  componentId: "sc-284w29-5"
-})(["\n  outline: none;\n  padding: 1;\n\n  :focus {\n    border-width: 1;\n    border-style: dotted;\n    padding: 0;\n  }\n"]);
-var NodeIcon = function NodeIcon(_ref3) {
-  var hasChildren = _ref3.hasChildren,
-    isOpen = _ref3.isOpen;
+var NodeIcon = function NodeIcon(_ref) {
+  var hasChildren = _ref.hasChildren,
+    isOpen = _ref.isOpen;
   if (!hasChildren) {
     return /*#__PURE__*/React.createElement(_icons.Bat, {
       variant: "16x16_4",
@@ -84,15 +54,15 @@ var NodeIcon = function NodeIcon(_ref3) {
     "data-testid": "react95-default-icon-folder"
   });
 };
-var Node = function Node(_ref4) {
-  var _ref4$children = _ref4.children,
-    children = _ref4$children === void 0 ? [] : _ref4$children,
-    id = _ref4.id,
-    icon = _ref4.icon,
-    label = _ref4.label,
-    _ref4$onClick = _ref4.onClick,
-    onClick = _ref4$onClick === void 0 ? function () {} : _ref4$onClick,
-    rest = _objectWithoutProperties(_ref4, _excluded);
+var Node = function Node(_ref2) {
+  var _ref2$children = _ref2.children,
+    children = _ref2$children === void 0 ? [] : _ref2$children,
+    id = _ref2.id,
+    icon = _ref2.icon,
+    label = _ref2.label,
+    _ref2$onClick = _ref2.onClick,
+    onClick = _ref2$onClick === void 0 ? function () {} : _ref2$onClick,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isOpen = _React$useState2[0],
@@ -112,28 +82,73 @@ var Node = function Node(_ref4) {
       onClickHandler(event);
     }
   };
-  return /*#__PURE__*/React.createElement(NodeItem, _extends({
-    isOpen: isOpen
-  }, rest), /*#__PURE__*/React.createElement(NodeInfo, null, hasChildren && /*#__PURE__*/React.createElement(FolderStatus, {
+  return /*#__PURE__*/React.createElement(_Frame.Frame, _extends({
+    as: "li"
+  }, rest, {
+    className: styles.node
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.nodeContent
+  }, hasChildren && /*#__PURE__*/React.createElement("div", {
+    className: styles.folderStatus,
     onClick: function onClick() {
       return setIsOpen(!isOpen);
     }
-  }, isOpen ? '-' : '+'), /*#__PURE__*/React.createElement(IconContainer, {
-    hasChildren: hasChildren
+  }, isOpen ? '-' : '+'), /*#__PURE__*/React.createElement("div", {
+    className: styles.iconContainer({
+      hasChildren: hasChildren
+    })
   }, icon || /*#__PURE__*/React.createElement(NodeIcon, {
     hasChildren: hasChildren,
     isOpen: isOpen
-  })), /*#__PURE__*/React.createElement(Label, {
+  })), /*#__PURE__*/React.createElement("label", {
+    className: styles.label,
     tabIndex: 0,
     onDoubleClick: function onDoubleClick() {
       return setIsOpen(!isOpen);
     },
     onClick: onClickHandler,
     onKeyDown: onKeyDownHandler
-  }, label)), hasChildren && isOpen && /*#__PURE__*/React.createElement(NodeChildren, null, children === null || children === void 0 ? void 0 : children.map(function (dataNode) {
+  }, label)), hasChildren && isOpen && /*#__PURE__*/React.createElement("ul", {
+    className: styles.tree
+  }, children === null || children === void 0 ? void 0 : children.map(function (dataNode) {
     return /*#__PURE__*/React.createElement(Node, _extends({
       key: dataNode.id
     }, dataNode));
   })));
 };
+var NodeRoot = exports.NodeRoot = function NodeRoot(_ref3) {
+  var id = _ref3.id,
+    icon = _ref3.icon,
+    label = _ref3.label,
+    _ref3$onClick = _ref3.onClick,
+    onClick = _ref3$onClick === void 0 ? function () {} : _ref3$onClick,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
+  var onClickHandler = function onClickHandler(event) {
+    onClick(event, {
+      id: id,
+      icon: icon,
+      label: label
+    });
+  };
+  var onKeyDownHandler = function onKeyDownHandler(event) {
+    if (event.key === ' ') {
+      onClickHandler(event);
+    }
+  };
+  return /*#__PURE__*/React.createElement(_Frame.Frame, _extends({}, rest, {
+    className: (0, _classnames["default"])(styles.node, styles.nodeRoot)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.nodeContent
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames["default"])(styles.iconContainer.classNames.base, styles.iconContainer.classNames.variants.hasChildren["true"])
+  }, icon || /*#__PURE__*/React.createElement(NodeIcon, {
+    hasChildren: false,
+    isOpen: true
+  })), /*#__PURE__*/React.createElement("label", {
+    className: styles.label,
+    tabIndex: 0,
+    onClick: onClickHandler,
+    onKeyDown: onKeyDownHandler
+  }, label)));
+};
 var _default = exports["default"] = Node;

package/cjs/Tree/Tree.css.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tree = exports.nodeRoot = exports.nodeContent = exports.node = exports.label = exports.iconContainer = exports.folderStatus = void 0;
+var _css = require("@vanilla-extract/css");
+var _contract = require("../themes/contract.css");
+var _cssUtils = require("@vanilla-extract/css-utils");
+var _recipes = require("@vanilla-extract/recipes");
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var base = {
+  listStyle: 'none',
+  margin: '0',
+  padding: '0'
+};
+var tree = exports.tree = (0, _css.style)(base);
+(0, _css.globalStyle)("".concat(tree, " ul"), _objectSpread(_objectSpread({}, base), {}, {
+  marginLeft: _contract.contract.space[6]
+}));
+var node = exports.node = (0, _css.style)({
+  marginLeft: _contract.contract.space[12],
+  borderLeftWidth: 'thin',
+  borderLeftStyle: 'dotted',
+  borderLeftColor: _contract.contract.colors.borderDarkest,
+  position: 'relative',
+  selectors: {
+    '&:last-child': {
+      borderLeftColor: 'transparent'
+    },
+    '&:before': {
+      position: 'absolute',
+      left: 0,
+      width: _contract.contract.space[16],
+      height: _contract.contract.space[10],
+      verticalAlign: 'top',
+      borderBottomWidth: 'thin',
+      borderBottomStyle: 'dotted',
+      borderBottomColor: _contract.contract.colors.borderDarkest,
+      content: '""',
+      display: 'inline-block'
+    },
+    '&:last-child:before': {
+      borderLeftWidth: 'thin',
+      borderLeftStyle: 'dotted',
+      borderLeftColor: _contract.contract.colors.borderDarkest,
+      left: _cssUtils.calc.negate(_contract.contract.space[1]),
+      width: _contract.contract.space[15]
+    }
+  }
+});
+var nodeRoot = exports.nodeRoot = (0, _css.style)({
+  padding: 0,
+  margin: 0,
+  borderLeft: 'unset',
+  selectors: {
+    '&:before': {
+      content: 'unset'
+    }
+  }
+});
+var nodeContent = exports.nodeContent = (0, _css.style)({
+  display: 'flex',
+  alignItems: 'center',
+  position: 'relative'
+});
+var label = exports.label = (0, _css.style)({
+  outline: 'none',
+  padding: _contract.contract.space[1],
+  selectors: {
+    '&:focus': {
+      borderWidth: _contract.contract.space[1],
+      borderStyle: 'dotted',
+      padding: _contract.contract.space[0]
+    }
+  }
+});
+var folderStatus = exports.folderStatus = (0, _css.style)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: _contract.contract.space[10],
+  height: _contract.contract.space[10],
+  borderWidth: _contract.contract.space[1],
+  borderStyle: 'solid',
+  borderColor: _contract.contract.colors.borderDarkest,
+  backgroundColor: _contract.contract.colors.inputBackground,
+  fontSize: '11px',
+  marginLeft: _cssUtils.calc.negate(_contract.contract.space[5]),
+  userSelect: 'none'
+});
+var iconContainer = exports.iconContainer = (0, _recipes.recipe)({
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: _contract.contract.space[20],
+    minHeight: _contract.contract.space[20],
+    marginRight: _contract.contract.space[2]
+  },
+  variants: {
+    hasChildren: {
+      "true": {
+        marginLeft: _contract.contract.space[2]
+      },
+      "false": {
+        marginLeft: _contract.contract.space[6]
+      }
+    }
+  }
+});

package/cjs/Tree/Tree.js

@@ -4,34 +4,32 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.Tree = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Node = _interopRequireWildcard(require("./Node"));
-var _excluded = ["data"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _Tree = require("./Tree.css");
+var _Frame = require("../Frame/Frame");
+var _excluded = ["data", "root"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var TreeParent = _styledComponents["default"].ul.withConfig({
-  displayName: "Tree__TreeParent",
-  componentId: "sc-1wiuvvx-0"
-})(["\n  padding: 0;\n"]);
-var Tree = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var Tree = exports.Tree = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var data = _ref.data,
+    root = _ref.root,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(TreeParent, _extends({}, rest, {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, root && /*#__PURE__*/_react["default"].createElement(_Node.NodeRoot, root), /*#__PURE__*/_react["default"].createElement(_Frame.Frame, _extends({}, rest, {
+    className: _Tree.tree,
+    as: "ul",
     ref: ref
   }), data.map(function (dataNode) {
     return /*#__PURE__*/_react["default"].createElement(_Node["default"], _extends({
       key: dataNode.id
     }, dataNode));
-  }));
+  })));
 });
 Tree.defaultProps = {
   data: []
 };
-Tree.icons = _Node.icons;
-var _default = exports["default"] = Tree;
+Tree.icons = _Node.icons;

package/cjs/Tree/index.js

@@ -4,6 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _Tree = _interopRequireDefault(require("./Tree"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var _default = exports["default"] = _Tree["default"];
+var _Tree = require("./Tree");
+var _default = exports["default"] = _Tree.Tree;

package/cjs/Video/Video.css.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.videoTag = exports.videoFont = exports.range = exports.elapsedTime = exports.divider = exports.currentTime = exports.countDownContainer = exports.controls = exports.controlBtn = void 0;
+var _css = require("@vanilla-extract/css");
+var _recipes = require("@vanilla-extract/recipes");
+var _contract = require("../themes/contract.css");
+var _GlobalStyle = require("../GlobalStyle/GlobalStyle.css");
+var _cssUtils = require("@vanilla-extract/css-utils");
+var videoTag = exports.videoTag = (0, _recipes.recipe)({
+  base: {
+    width: '100%',
+    padding: _contract.contract.space[2]
+  },
+  variants: {
+    visible: {
+      "true": {
+        display: 'block'
+      },
+      "false": {
+        display: 'none'
+      }
+    }
+  }
+});
+var controls = exports.controls = (0, _css.style)({
+  display: 'flex',
+  alignItems: 'center',
+  paddingTop: _contract.contract.space[2],
+  paddingBottom: _contract.contract.space[2]
+});
+var countDownContainer = exports.countDownContainer = (0, _css.style)({
+  display: 'flex',
+  padding: _contract.contract.space[6],
+  marginBottom: _contract.contract.space[4],
+  boxShadow: _contract.contract.shadows["in"],
+  backgroundColor: _contract.contract.colors.canvas,
+  height: '50px',
+  color: _contract.contract.colors.canvasText
+});
+var videoFont = exports.videoFont = (0, _css.style)({
+  fontFamily: _GlobalStyle.R95VideoNumbers,
+  textTransform: 'uppercase'
+});
+var currentTime = exports.currentTime = (0, _css.style)({
+  marginTop: 'auto',
+  fontSize: 22
+});
+var elapsedTime = exports.elapsedTime = (0, _css.style)({
+  height: _contract.contract.space[12]
+});
+var divider = exports.divider = (0, _css.style)({
+  display: 'block',
+  height: _contract.contract.space[1],
+  borderTopStyle: 'solid',
+  borderTopWidth: _contract.contract.space[1],
+  borderTopColor: _contract.contract.colors.borderDark,
+  borderBottomWidth: _contract.contract.space[1],
+  borderBottomStyle: 'solid',
+  borderBottomColor: _contract.contract.colors.borderLightest,
+  marginBottom: _contract.contract.space[2]
+});
+var controlBtn = exports.controlBtn = (0, _css.style)({
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: _contract.contract.space[20],
+  height: _contract.contract.space[20],
+  padding: _contract.contract.space[7],
+  selectors: {
+    '&:active, &:focus': {
+      width: _contract.contract.space[20],
+      height: _contract.contract.space[20],
+      padding: _contract.contract.space[7]
+    },
+    '&:disabled': {
+      padding: _contract.contract.space[4]
+    }
+  }
+});
+(0, _css.globalStyle)("".concat(controlBtn, " svg"), {
+  fill: _contract.contract.colors.materialText
+});
+(0, _css.globalStyle)("".concat(controlBtn, ":disabled svg"), {
+  fill: _contract.contract.colors.borderDark,
+  borderBottomWidth: _contract.contract.space[1],
+  borderBottomStyle: 'solid',
+  borderBottomColor: _contract.contract.colors.borderLightest,
+  borderRightWidth: _contract.contract.space[1],
+  borderRightStyle: 'solid',
+  borderRightColor: _contract.contract.colors.borderLightest
+});
+var range = exports.range = (0, _css.style)({
+  selectors: {
+    '&::-webkit-slider-thumb': {
+      height: _contract.contract.space[18],
+      marginTop: _cssUtils.calc.negate(_contract.contract.space[7]),
+      width: _contract.contract.space[10]
+    },
+    "&[value='0']::-webkit-slider-thumb": {
+      marginLeft: _cssUtils.calc.negate(_contract.contract.space[2])
+    }
+  }
+});