@instructure/ui-tree-browser 11.6.0 → 11.6.1-pr-snapshot-1779894247159

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.6.1-pr-snapshot-1779894247159](https://github.com/instructure/instructure-ui/compare/v11.6.0...v11.6.1-pr-snapshot-1779894247159) (2026-05-27)
+
+**Note:** Version bump only for package @instructure/ui-tree-browser
+
+
+
+
+
 # [11.6.0](https://github.com/instructure/instructure-ui/compare/v11.5.0...v11.6.0) (2026-02-18)
 
 **Note:** Version bump only for package @instructure/ui-tree-browser

package/{lib/TreeBrowser/TreeNode/props.js → babel.config.cjs}

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +22,16 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['id', 'size', 'variant', 'selected', 'focused', 'itemIcon', 'thumbnail', 'level', 'children', 'containerRef', 'onKeyDown', 'onClick'];
+module.exports = {
+  presets: [
+    [
+      require('@instructure/ui-babel-preset'),
+      {
+        coverage: Boolean(process.env.COVERAGE),
+        esModules: Boolean(process.env.ES_MODULES),
+        removeConsole: process.env.NODE_ENV === 'production',
+        transformImports: Boolean(process.env.TRANSFORM_IMPORTS)
+      }
+    ]
+  ]
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@instructure/ui-tree-browser",
-  "version": "11.6.0",
+  "version": "11.6.1-pr-snapshot-1779894247159",
+  "type": "module",
   "description": "A component for displaying a hierarchical view of information",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
-  "main": "./lib/index.js",
   "types": "./types/index.d.ts",
   "repository": {
     "type": "git",
@@ -16,21 +16,21 @@
   "dependencies": {
     "@babel/runtime": "^7.27.6",
     "keycode": "^2",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-icons": "11.6.0",
-    "@instructure/ui-img": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-utils": "11.6.0"
+    "@instructure/emotion": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/shared-types": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-img": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-icons": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-react-utils": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-utils": "11.6.1-pr-snapshot-1779894247159"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-axe-check": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-babel-preset": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-color-utils": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-themes": "11.6.1-pr-snapshot-1779894247159"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -43,10 +43,8 @@
     ".": {
       "types": "./types/index.d.ts",
       "import": "./es/index.js",
-      "require": "./lib/index.js",
       "default": "./es/index.js"
     },
-    "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
@@ -56,7 +54,7 @@
     "lint": "ui-scripts lint",
     "lint:fix": "ui-scripts lint --fix",
     "clean": "ui-scripts clean",
-    "build": "ui-scripts build --modules es,cjs",
+    "build": "ui-scripts build",
     "build:watch": "pnpm run ts:check -- --watch & ui-scripts build --watch",
     "build:types": "tsc -p tsconfig.build.json",
     "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"

package/lib/TreeBrowser/TreeBrowserContext.js

@@ -1,44 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TreeBrowserContext = void 0;
-var _react = require("react");
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-/**
- * ---
- * category: components/contexts
- * ---
- * React context created by the `TreeBrowser` component to hold its data which are
- * read by its children.
- *
- * @module
- */
-const TreeBrowserContext = exports.TreeBrowserContext = /*#__PURE__*/(0, _react.createContext)({
-  animation: true
-});
-var _default = exports.default = TreeBrowserContext;

package/lib/TreeBrowser/TreeButton/index.js

@@ -1,162 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TreeButton = void 0;
-var _react = require("react");
-var _Img = require("@instructure/ui-img/lib/Img");
-var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
-var _emotion = require("@instructure/emotion");
-var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
-var _props = require("./props");
-var _TreeBrowserContext = _interopRequireDefault(require("../TreeBrowserContext"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _TreeButton;
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-// Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
-/**
----
-parent: TreeBrowser
-id: TreeBrowser.Button
----
-**/
-let TreeButton = exports.TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_TreeButton = class TreeButton extends _react.Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      if (el && typeof this.props.containerRef === 'function') {
-        this.props.containerRef(el.parentElement);
-      }
-      this.ref = el;
-    };
-  }
-  componentDidMount() {
-    var _this$props$makeStyle, _this$props, _this$context;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, {
-      animation: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.animation
-    });
-  }
-  componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2, _this$context2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, {
-      animation: (_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.animation
-    });
-  }
-  defaultContentRenderer(props) {
-    const name = props.name,
-      descriptor = props.descriptor,
-      styles = props.styles;
-    return (0, _jsxRuntime.jsxs)("span", {
-      css: styles.layout,
-      children: [this.renderImage(), (0, _jsxRuntime.jsxs)("span", {
-        css: styles.text,
-        children: [(0, _jsxRuntime.jsx)("span", {
-          css: styles.textName,
-          children: name
-        }), descriptor ? (0, _jsxRuntime.jsx)("span", {
-          css: styles.textDescriptor,
-          title: descriptor,
-          children: descriptor
-        }) : null]
-      })]
-    });
-  }
-  renderImage() {
-    const type = this.props.type;
-    switch (type) {
-      case 'collection':
-        return this.renderCollectionIcon();
-      case 'item':
-        return this.renderItemImage();
-      default:
-        break;
-    }
-    return void 0;
-  }
-  renderCollectionIcon() {
-    const _this$props3 = this.props,
-      expanded = _this$props3.expanded,
-      collectionIcon = _this$props3.collectionIcon,
-      collectionIconExpanded = _this$props3.collectionIconExpanded,
-      styles = _this$props3.styles;
-    if (collectionIcon || collectionIconExpanded) {
-      return (0, _jsxRuntime.jsx)("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.icon,
-        children: (0, _callRenderProp.callRenderProp)(expanded ? collectionIconExpanded : collectionIcon)
-      });
-    }
-    return void 0;
-  }
-  renderItemImage() {
-    const _this$props4 = this.props,
-      thumbnail = _this$props4.thumbnail,
-      itemIcon = _this$props4.itemIcon,
-      styles = _this$props4.styles;
-    if (thumbnail) {
-      return (0, _jsxRuntime.jsx)("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.thumbnail,
-        children: (0, _jsxRuntime.jsx)(_Img.Img, {
-          src: thumbnail,
-          constrain: "cover",
-          alt: ""
-        })
-      });
-    }
-    if (itemIcon) {
-      return (0, _jsxRuntime.jsx)("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.icon,
-        children: (0, _callRenderProp.callRenderProp)(itemIcon)
-      });
-    }
-    return void 0;
-  }
-  render() {
-    const _this$props5 = this.props,
-      styles = _this$props5.styles,
-      renderContent = _this$props5.renderContent;
-    const buttonContent = renderContent ? renderContent(this.props) : this.defaultContentRenderer(this.props);
-    // VoiceOver can't navigate without the buttons, even though they don't do anything
-    return (0, _jsxRuntime.jsx)("button", {
-      ref: this.handleRef,
-      tabIndex: -1,
-      type: "button",
-      css: styles === null || styles === void 0 ? void 0 : styles.treeButton,
-      "data-cid": "TreeButton",
-      children: buttonContent
-    });
-  }
-}, _TreeButton.displayName = "TreeButton", _TreeButton.componentId = 'TreeBrowser.Button', _TreeButton.allowedProps = _props.allowedProps, _TreeButton.contextType = _TreeBrowserContext.default, _TreeButton.defaultProps = {
-  type: 'treeButton',
-  size: 'medium',
-  variant: 'folderTree',
-  selected: false,
-  focused: false,
-  expanded: false
-}, _TreeButton)) || _class);
-var _default = exports.default = TreeButton;

package/lib/TreeBrowser/TreeButton/props.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.allowedProps = void 0;
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-const allowedProps = exports.allowedProps = ['id', 'name', 'descriptor', 'type', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'thumbnail', 'onClick', 'expanded', 'selected', 'focused', 'level', 'containerRef', 'renderContent'];

package/lib/TreeBrowser/TreeButton/styles.js

@@ -1,336 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _emotion = require("@instructure/emotion");
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-const transform = (0, _emotion.keyframes)`
-  50% {
-    opacity: 0.5;
-    transform: translate3d(2%, 0, 0);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }`;
-/**
- *
- * ---
- * private: true
- * ---
- * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
- * @return {Object} The final style object, which will be used in the component
- */
-const generateStyles = (componentTheme, props, state) => {
-  const size = props.size,
-    variant = props.variant,
-    selected = props.selected,
-    focused = props.focused,
-    level = props.level;
-  const isRootButton = level && level === 1;
-  const sizeMap = {
-    small: {
-      folderTree: {
-        before: {
-          width: `calc(${componentTheme.baseSpacingSmall} - 0.0625rem)`
-        },
-        icon: {
-          fontSize: `calc(${componentTheme.baseSpacingSmall} * 2)`,
-          marginInlineEnd: componentTheme.baseSpacingSmall,
-          marginInlineStart: '0'
-        },
-        thumbnail: {
-          height: `calc(${componentTheme.baseSpacingSmall} * 2)`,
-          width: `calc(${componentTheme.baseSpacingSmall}* 2)`,
-          marginInlineEnd: componentTheme.baseSpacingSmall,
-          marginInlineStart: '0'
-        }
-      },
-      indent: {
-        icon: {
-          fontSize: `calc(${componentTheme.baseSpacingSmall} * 2)`,
-          marginInlineEnd: `calc(${componentTheme.baseSpacingSmall} / 2)`,
-          marginInlineStart: '0'
-        },
-        thumbnail: {
-          height: `calc(${componentTheme.baseSpacingSmall} * 2)`,
-          width: `calc(${componentTheme.baseSpacingSmall} * 2)`,
-          marginInlineEnd: `calc(${componentTheme.baseSpacingSmall} / 2)`,
-          marginInlineStart: '0'
-        }
-      },
-      textName: {
-        fontSize: componentTheme.nameFontSizeSmall
-      },
-      textDescriptor: {
-        fontSize: componentTheme.descriptorFontSizeSmall
-      }
-    },
-    medium: {
-      folderTree: {
-        before: {
-          width: `calc(${componentTheme.baseSpacingMedium} - 0.0625rem)`
-        },
-        icon: {
-          fontSize: `calc(${componentTheme.baseSpacingMedium} * 2)`,
-          marginInlineEnd: componentTheme.baseSpacingMedium,
-          marginInlineStart: '0'
-        },
-        thumbnail: {
-          height: `calc(${componentTheme.baseSpacingMedium} * 2)`,
-          width: `calc(${componentTheme.baseSpacingMedium} * 2)`,
-          marginInlineEnd: componentTheme.baseSpacingMedium,
-          marginInlineStart: '0'
-        }
-      },
-      indent: {
-        icon: {
-          fontSize: `calc(${componentTheme.baseSpacingMedium} * 2)`,
-          marginInlineEnd: `calc(${componentTheme.baseSpacingMedium} / 2)`,
-          marginInlineStart: '0'
-        },
-        thumbnail: {
-          height: `calc(${componentTheme.baseSpacingMedium} * 2)`,
-          width: `calc(${componentTheme.baseSpacingMedium} * 2)`,
-          marginInlineEnd: `calc(${componentTheme.baseSpacingMedium} / 2)`,
-          marginInlineStart: '0'
-        }
-      },
-      textName: {
-        fontSize: componentTheme.nameFontSizeMedium
-      },
-      textDescriptor: {
-        fontSize: componentTheme.descriptorFontSizeMedium
-      }
-    },
-    large: {
-      folderTree: {
-        before: {
-          width: `calc(${componentTheme.baseSpacingLarge} - 0.0625rem)`
-        },
-        icon: {
-          fontSize: `calc(${componentTheme.baseSpacingLarge} * 2)`,
-          marginInlineEnd: componentTheme.baseSpacingLarge,
-          marginInlineStart: '0'
-        },
-        thumbnail: {
-          height: `calc(${componentTheme.baseSpacingLarge} * 2)`,
-          width: `calc(${componentTheme.baseSpacingLarge} * 2)`,
-          marginInlineEnd: componentTheme.baseSpacingLarge,
-          marginInlineStart: '0'
-        }
-      },
-      indent: {
-        icon: {
-          fontSize: `calc(${componentTheme.baseSpacingLarge} * 2)`,
-          marginInlineEnd: `calc(${componentTheme.baseSpacingLarge} / 2)`,
-          marginInlineStart: '0'
-        },
-        thumbnail: {
-          height: `calc(${componentTheme.baseSpacingLarge} * 2)`,
-          width: `calc(${componentTheme.baseSpacingLarge}* 2)`,
-          marginInlineEnd: `calc(${componentTheme.baseSpacingLarge} / 2)`,
-          marginInlineStart: '0'
-        }
-      },
-      textName: {
-        fontSize: componentTheme.nameFontSizeLarge
-      },
-      textDescriptor: {
-        fontSize: componentTheme.descriptorFontSizeLarge
-      }
-    }
-  };
-  const textStyle = {
-    minWidth: '0.0625rem',
-    lineHeight: componentTheme.textLineHeight,
-    flex: 1
-  };
-  const textNameStyle = {
-    display: 'block',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    ...sizeMap[size].textName
-  };
-  const layoutPadding = {
-    small: {
-      folderTree: {
-        padding: `calc(${componentTheme.baseSpacingSmall} / 3) ${componentTheme.baseSpacingSmall}`
-      },
-      indent: {
-        padding: `calc(${componentTheme.baseSpacingSmall} / 3) calc(${componentTheme.baseSpacingSmall} / 2)`
-      }
-    },
-    medium: {
-      folderTree: {
-        padding: `calc(${componentTheme.baseSpacingMedium} / 3) ${componentTheme.baseSpacingMedium}`
-      },
-      indent: {
-        padding: `calc(${componentTheme.baseSpacingMedium} / 3) calc(${componentTheme.baseSpacingMedium} / 2)`
-      }
-    },
-    large: {
-      folderTree: {
-        padding: `calc(${componentTheme.baseSpacingLarge} / 3) ${componentTheme.baseSpacingLarge}`
-      },
-      indent: {
-        padding: `calc(${componentTheme.baseSpacingLarge} / 3) calc(${componentTheme.baseSpacingLarge} / 2)`
-      }
-    }
-  };
-  return {
-    treeButton: {
-      label: 'treeButton',
-      boxSizing: 'border-box',
-      display: 'block',
-      width: '100%',
-      margin: '0',
-      backgroundColor: 'transparent',
-      textAlign: 'start',
-      fontFamily: 'inherit',
-      userSelect: 'none',
-      cursor: 'pointer',
-      border: 'none',
-      borderRadius: componentTheme.borderRadius,
-      position: 'relative',
-      zIndex: 1,
-      ...(state.animation ? {
-        transform: 'translate3d(-2%, 0, 0)',
-        opacity: 0.01,
-        transformOrigin: 'left center',
-        animationName: transform,
-        animationDuration: '0.2s',
-        animationFillMode: 'forwards',
-        animationTimingFunction: 'ease-out',
-        animationDelay: '0.2s'
-      } : {}),
-      outline: '0',
-      padding: '0',
-      ...(variant === 'folderTree' && !isRootButton && {
-        '&::before': {
-          content: '""',
-          height: componentTheme.borderWidth,
-          background: componentTheme.borderColor,
-          position: 'absolute',
-          insetInlineStart: '0',
-          insetInlineEnd: 'auto',
-          top: '50%',
-          ...(selected && {
-            visibility: 'hidden'
-          }),
-          ...sizeMap[size][variant].before
-        },
-        '&:hover::before': {
-          visibility: 'hidden'
-        }
-      }),
-      '&::after': {
-        content: '""',
-        pointerEvents: 'none',
-        boxSizing: 'border-box',
-        display: 'block',
-        position: 'absolute',
-        top: '-0.25rem',
-        bottom: '-0.25rem',
-        left: '-0.25rem',
-        right: '-0.25rem',
-        border: `${componentTheme.focusOutlineWidth} ${componentTheme.focusOutlineStyle} ${componentTheme.focusOutlineColor}`,
-        borderRadius: `calc(${componentTheme.borderRadius} * 1.5)`,
-        transition: 'all 0.2s',
-        opacity: 0,
-        transform: 'scale(0.95)',
-        ...(focused && {
-          opacity: 1,
-          transform: 'scale(1)'
-        })
-      },
-      '&:hover': {
-        backgroundColor: selected ? componentTheme.selectedBackgroundColor : componentTheme.hoverBackgroundColor,
-        '[class$=-treeButton__textName], [class$=-treeButton__textDescriptor], [class$=-treeButton__icon], [class$=-treeButton__node]': {
-          color: componentTheme.hoverTextColor
-        }
-      },
-      ...(selected && {
-        backgroundColor: componentTheme.selectedBackgroundColor
-      })
-    },
-    layout: {
-      label: 'treeButton__layout',
-      display: 'flex',
-      alignItems: 'center',
-      lineHeight: 1,
-      minHeight: '2rem',
-      ...layoutPadding[size][variant]
-    },
-    text: {
-      label: 'treeButton__text',
-      ...textStyle
-    },
-    textName: {
-      label: 'treeButton__textName',
-      ...textNameStyle,
-      color: selected ? componentTheme.selectedTextColor : componentTheme.nameTextColor
-    },
-    textDescriptor: {
-      label: 'treeButton__textDescriptor',
-      display: 'block',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      marginTop: componentTheme.descriptorMarginTop,
-      color: selected ? componentTheme.selectedTextColor : componentTheme.descriptorTextColor,
-      ...sizeMap[size].textDescriptor
-    },
-    icon: {
-      label: 'treeButton__icon',
-      minWidth: '0.0625rem',
-      position: 'relative',
-      zIndex: 1,
-      color: selected ? componentTheme.selectedTextColor : componentTheme.iconColor,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      ...sizeMap[size][variant].icon
-    },
-    thumbnail: {
-      label: 'treeButton__thumbnail',
-      ...sizeMap[size][variant].thumbnail
-    },
-    node: {
-      label: 'treeButton__node',
-      ...textStyle,
-      ...textNameStyle
-    }
-  };
-};
-var _default = exports.default = generateStyles;