@instructure/ui-tree-browser 7.20.1 → 7.20.2

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.20.2](https://github.com/instructure/instructure-ui/compare/v7.20.1...v7.20.2) (2022-07-29)
+
+### Bug Fixes
+
+- **ui-tree-browser:** fix TreeButton theme overrides ([bf8e254](https://github.com/instructure/instructure-ui/commit/bf8e254))
+
 ## [7.20.1](https://github.com/instructure/instructure-ui/compare/v7.20.0...v7.20.1) (2022-07-22)
 
 **Note:** Version bump only for package @instructure/ui-tree-browser

package/es/TreeBrowser/TreeButton/index.js

@@ -38,34 +38,36 @@ import { isIE11 } from '@instructure/ui-utils';
 import { Img } from '@instructure/ui-img';
 import { callRenderProp } from '@instructure/ui-react-utils';
 var styles = {
-  componentId: 'dRarB',
+  componentId: 'eUVXS',
   template: function template(theme) {
-    return "\n\n@keyframes dRarB_EwaR{50%{opacity:0.5;transform:translate3d(2%,0,0)}to{opacity:1;transform:translateZ(0)}}\n\n.dRarB_bGBk{-ms-user-select:none;-webkit-user-select:none;animation-delay:0.2s;animation-duration:0.2s;animation-fill-mode:forwards;animation-name:dRarB_EwaR;animation-timing-function:ease-out;background-color:transparent;border:none;border-radius:".concat(theme.borderRadius || 'inherit', ";box-sizing:border-box;cursor:pointer;display:block;font-family:inherit;margin:0;opacity:0.01;outline:0;position:relative;text-align:start;transform:translate3d(-2%,0,0);transform-origin:left center;user-select:none;width:100%;z-index:1}\n\n[dir=ltr] .dRarB_bGBk{text-align:left}\n\n[dir=rtl] .dRarB_bGBk{text-align:right}\n\n.dRarB_bGBk:not(.dRarB_eoSs):after{border:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', ";border-radius:calc(").concat(theme.borderRadius || 'inherit', "*1.5);bottom:-0.25rem;box-sizing:border-box;content:\"\";display:block;left:-0.25rem;opacity:0;pointer-events:none;position:absolute;right:-0.25rem;top:-0.25rem;transform:scale(0.95);transition:all 0.2s}\n\n.dRarB_bGBk:hover{background-color:").concat(theme.hoverBackgroundColor || 'inherit', "}\n\n.dRarB_bGBk:hover.dRarB_fGhm{background-color:").concat(theme.selectedBackgroundColor || 'inherit', "}\n\n.dRarB_bGBk:hover.dRarB_ewdC:before{visibility:hidden}\n\n.dRarB_bGBk:hover .dRarB_dnnz,.dRarB_bGBk:hover.dRarB_fjNS,.dRarB_bGBk:hover .dRarB_biFO,.dRarB_bGBk:hover .dRarB_sTpL{color:").concat(theme.hoverTextColor || 'inherit', "}\n\n.dRarB_bGBk.dRarB_cVYB:not(.dRarB_eoSs):after{opacity:1;transform:scale(1)}\n\n.dRarB_bGBk.dRarB_cVYB.dRarB_eoSs{outline:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', "}\n\n.dRarB_byIz{align-items:center;display:flex;line-height:1;min-height:2rem}\n\n.dRarB_dnnz,.dRarB_eWKC{min-width:0.0625rem}\n\n.dRarB_dnnz{align-items:center;color:").concat(theme.iconColor || 'inherit', ";display:flex;justify-content:center;position:relative;z-index:1}\n\n.dRarB_eWKC{flex:1;line-height:").concat(theme.textLineHeight || 'inherit', "}\n\n.dRarB_biFO,.dRarB_sTpL{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.dRarB_sTpL{color:").concat(theme.nameTextColor || 'inherit', "}\n\n.dRarB_biFO{color:").concat(theme.descriptorTextColor || 'inherit', ";margin-top:").concat(theme.descriptorMarginTop || 'inherit', "}\n\n.dRarB_ewdC:not(.dRarB_cxHQ):before{background:").concat(theme.borderColor || 'inherit', ";content:\"\";height:").concat(theme.borderWidth || 'inherit', ";inset-inline-end:auto;inset-inline-start:0;pointer-events:none;position:absolute;top:50%}\n\n[dir=ltr] .dRarB_ewdC:not(.dRarB_cxHQ):before{left:0;right:auto}\n\n[dir=rtl] .dRarB_ewdC:not(.dRarB_cxHQ):before{left:auto;right:0}\n\n.dRarB_doqw.dRarB_ewdC{padding:calc(").concat(theme.baseSpacingSmall || 'inherit', "/3) ").concat(theme.baseSpacingSmall || 'inherit', "}\n\n.dRarB_doqw.dRarB_ewdC:before{width:calc(").concat(theme.baseSpacingSmall || 'inherit', " - 0.0625rem)}\n\n.dRarB_doqw.dRarB_ewdC .dRarB_dnnz,.dRarB_doqw.dRarB_ewdC .dRarB_dXYn{-webkit-margin-end:").concat(theme.baseSpacingSmall || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingSmall || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .dRarB_doqw.dRarB_ewdC .dRarB_dnnz,[dir=ltr] .dRarB_doqw.dRarB_ewdC .dRarB_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingSmall || 'inherit', "}\n\n[dir=rtl] .dRarB_doqw.dRarB_ewdC .dRarB_dnnz,[dir=rtl] .dRarB_doqw.dRarB_ewdC .dRarB_dXYn{margin-left:").concat(theme.baseSpacingSmall || 'inherit', ";margin-right:0}\n\n.dRarB_doqw.dRarB_ewdC .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.dRarB_doqw.dRarB_ewdC .dRarB_dXYn{height:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2);width:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.dRarB_doqw.dRarB_cIHp{padding:calc(").concat(theme.baseSpacingSmall || 'inherit', "/3) calc(").concat(theme.baseSpacingSmall || 'inherit', "/2)}\n\n.dRarB_doqw.dRarB_cIHp .dRarB_dnnz,.dRarB_doqw.dRarB_cIHp .dRarB_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .dRarB_doqw.dRarB_cIHp .dRarB_dnnz,[dir=ltr] .dRarB_doqw.dRarB_cIHp .dRarB_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2)}\n\n[dir=rtl] .dRarB_doqw.dRarB_cIHp .dRarB_dnnz,[dir=rtl] .dRarB_doqw.dRarB_cIHp .dRarB_dXYn{margin-left:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);margin-right:0}\n\n.dRarB_doqw.dRarB_cIHp .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.dRarB_doqw.dRarB_cIHp .dRarB_dXYn{height:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2);width:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.dRarB_doqw .dRarB_sTpL{font-size:").concat(theme.nameFontSizeSmall || 'inherit', "}\n\n.dRarB_doqw .dRarB_biFO{font-size:").concat(theme.descriptorFontSizeSmall || 'inherit', "}\n\n.dRarB_ycrn.dRarB_ewdC{padding:calc(").concat(theme.baseSpacingMedium || 'inherit', "/3) ").concat(theme.baseSpacingMedium || 'inherit', "}\n\n.dRarB_ycrn.dRarB_ewdC:before{width:calc(").concat(theme.baseSpacingMedium || 'inherit', " - 0.0625rem)}\n\n.dRarB_ycrn.dRarB_ewdC .dRarB_dnnz,.dRarB_ycrn.dRarB_ewdC .dRarB_dXYn{-webkit-margin-end:").concat(theme.baseSpacingMedium || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingMedium || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .dRarB_ycrn.dRarB_ewdC .dRarB_dnnz,[dir=ltr] .dRarB_ycrn.dRarB_ewdC .dRarB_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingMedium || 'inherit', "}\n\n[dir=rtl] .dRarB_ycrn.dRarB_ewdC .dRarB_dnnz,[dir=rtl] .dRarB_ycrn.dRarB_ewdC .dRarB_dXYn{margin-left:").concat(theme.baseSpacingMedium || 'inherit', ";margin-right:0}\n\n.dRarB_ycrn.dRarB_ewdC .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.dRarB_ycrn.dRarB_ewdC .dRarB_dXYn{height:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2);width:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.dRarB_ycrn.dRarB_cIHp{padding:calc(").concat(theme.baseSpacingMedium || 'inherit', "/3) calc(").concat(theme.baseSpacingMedium || 'inherit', "/2)}\n\n.dRarB_ycrn.dRarB_cIHp .dRarB_dnnz,.dRarB_ycrn.dRarB_cIHp .dRarB_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .dRarB_ycrn.dRarB_cIHp .dRarB_dnnz,[dir=ltr] .dRarB_ycrn.dRarB_cIHp .dRarB_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2)}\n\n[dir=rtl] .dRarB_ycrn.dRarB_cIHp .dRarB_dnnz,[dir=rtl] .dRarB_ycrn.dRarB_cIHp .dRarB_dXYn{margin-left:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);margin-right:0}\n\n.dRarB_ycrn.dRarB_cIHp .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.dRarB_ycrn.dRarB_cIHp .dRarB_dXYn{height:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2);width:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.dRarB_ycrn .dRarB_sTpL{font-size:").concat(theme.nameFontSizeMedium || 'inherit', "}\n\n.dRarB_ycrn .dRarB_biFO{font-size:").concat(theme.descriptorFontSizeMedium || 'inherit', "}\n\n.dRarB_cMDj.dRarB_ewdC{padding:calc(").concat(theme.baseSpacingLarge || 'inherit', "/3) ").concat(theme.baseSpacingLarge || 'inherit', "}\n\n.dRarB_cMDj.dRarB_ewdC:before{width:calc(").concat(theme.baseSpacingLarge || 'inherit', " - 0.0625rem)}\n\n.dRarB_cMDj.dRarB_ewdC .dRarB_dnnz,.dRarB_cMDj.dRarB_ewdC .dRarB_dXYn{-webkit-margin-end:").concat(theme.baseSpacingLarge || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingLarge || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .dRarB_cMDj.dRarB_ewdC .dRarB_dnnz,[dir=ltr] .dRarB_cMDj.dRarB_ewdC .dRarB_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingLarge || 'inherit', "}\n\n[dir=rtl] .dRarB_cMDj.dRarB_ewdC .dRarB_dnnz,[dir=rtl] .dRarB_cMDj.dRarB_ewdC .dRarB_dXYn{margin-left:").concat(theme.baseSpacingLarge || 'inherit', ";margin-right:0}\n\n.dRarB_cMDj.dRarB_ewdC .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.dRarB_cMDj.dRarB_ewdC .dRarB_dXYn{height:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2);width:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.dRarB_cMDj.dRarB_cIHp{padding:calc(").concat(theme.baseSpacingLarge || 'inherit', "/3) calc(").concat(theme.baseSpacingLarge || 'inherit', "/2)}\n\n.dRarB_cMDj.dRarB_cIHp .dRarB_dnnz,.dRarB_cMDj.dRarB_cIHp .dRarB_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .dRarB_cMDj.dRarB_cIHp .dRarB_dnnz,[dir=ltr] .dRarB_cMDj.dRarB_cIHp .dRarB_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2)}\n\n[dir=rtl] .dRarB_cMDj.dRarB_cIHp .dRarB_dnnz,[dir=rtl] .dRarB_cMDj.dRarB_cIHp .dRarB_dXYn{margin-left:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);margin-right:0}\n\n.dRarB_cMDj.dRarB_cIHp .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.dRarB_cMDj.dRarB_cIHp .dRarB_dXYn{height:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2);width:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.dRarB_cMDj .dRarB_sTpL{font-size:").concat(theme.nameFontSizeLarge || 'inherit', "}\n\n.dRarB_cMDj .dRarB_biFO{font-size:").concat(theme.descriptorFontSizeLarge || 'inherit', "}\n\n.dRarB_fGhm{background-color:").concat(theme.selectedBackgroundColor || 'inherit', "}\n\n.dRarB_fGhm.dRarB_ewdC:before{visibility:hidden}\n\n.dRarB_fGhm .dRarB_dnnz,.dRarB_fGhm .dRarB_biFO,.dRarB_fGhm .dRarB_sTpL{color:").concat(theme.selectedTextColor || 'inherit', "}");
+    return "\n\n@keyframes eUVXS_EwaR{50%{opacity:0.5;transform:translate3d(2%,0,0)}to{opacity:1;transform:translateZ(0)}}\n\n.eUVXS_bGBk{-ms-user-select:none;-webkit-user-select:none;animation-delay:0.2s;animation-duration:0.2s;animation-fill-mode:forwards;animation-name:eUVXS_EwaR;animation-timing-function:ease-out;background-color:transparent;border:none;border-radius:".concat(theme.borderRadius || 'inherit', ";box-sizing:border-box;cursor:pointer;display:block;font-family:inherit;margin:0;opacity:0.01;outline:0;position:relative;text-align:start;transform:translate3d(-2%,0,0);transform-origin:left center;user-select:none;width:100%;z-index:1}\n\n[dir=ltr] .eUVXS_bGBk{text-align:left}\n\n[dir=rtl] .eUVXS_bGBk{text-align:right}\n\n.eUVXS_bGBk:not(.eUVXS_eoSs):after{border:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', ";border-radius:calc(").concat(theme.borderRadius || 'inherit', "*1.5);bottom:-0.25rem;box-sizing:border-box;content:\"\";display:block;left:-0.25rem;opacity:0;pointer-events:none;position:absolute;right:-0.25rem;top:-0.25rem;transform:scale(0.95);transition:all 0.2s}\n\n.eUVXS_bGBk:hover{background-color:").concat(theme.hoverBackgroundColor || 'inherit', "}\n\n.eUVXS_bGBk:hover.eUVXS_fGhm{background-color:").concat(theme.selectedBackgroundColor || 'inherit', "}\n\n.eUVXS_bGBk:hover.eUVXS_ewdC:before{visibility:hidden}\n\n.eUVXS_bGBk:hover .eUVXS_dnnz,.eUVXS_bGBk:hover.eUVXS_fjNS,.eUVXS_bGBk:hover .eUVXS_biFO,.eUVXS_bGBk:hover .eUVXS_sTpL{color:").concat(theme.hoverTextColor || 'inherit', "}\n\n.eUVXS_bGBk.eUVXS_cVYB:not(.eUVXS_eoSs):after{opacity:1;transform:scale(1)}\n\n.eUVXS_bGBk.eUVXS_cVYB.eUVXS_eoSs{outline:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', "}\n\n.eUVXS_byIz{align-items:center;display:flex;line-height:1;min-height:2rem}\n\n.eUVXS_dnnz,.eUVXS_eWKC{min-width:0.0625rem}\n\n.eUVXS_dnnz{align-items:center;color:").concat(theme.iconColor || 'inherit', ";display:flex;justify-content:center;position:relative;z-index:1}\n\n.eUVXS_eWKC{flex:1;line-height:").concat(theme.textLineHeight || 'inherit', "}\n\n.eUVXS_biFO,.eUVXS_sTpL{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.eUVXS_sTpL{color:").concat(theme.nameTextColor || 'inherit', "}\n\n.eUVXS_biFO{color:").concat(theme.descriptorTextColor || 'inherit', ";margin-top:").concat(theme.descriptorMarginTop || 'inherit', "}\n\n.eUVXS_ewdC:not(.eUVXS_cxHQ):before{background:").concat(theme.borderColor || 'inherit', ";content:\"\";height:").concat(theme.borderWidth || 'inherit', ";inset-inline-end:auto;inset-inline-start:0;pointer-events:none;position:absolute;top:50%}\n\n[dir=ltr] .eUVXS_ewdC:not(.eUVXS_cxHQ):before{left:0;right:auto}\n\n[dir=rtl] .eUVXS_ewdC:not(.eUVXS_cxHQ):before{left:auto;right:0}\n\n.eUVXS_doqw.eUVXS_ewdC{padding:calc(").concat(theme.baseSpacingSmall || 'inherit', "/3) ").concat(theme.baseSpacingSmall || 'inherit', "}\n\n.eUVXS_doqw.eUVXS_ewdC:before{width:calc(").concat(theme.baseSpacingSmall || 'inherit', " - 0.0625rem)}\n\n.eUVXS_doqw.eUVXS_ewdC .eUVXS_dnnz,.eUVXS_doqw.eUVXS_ewdC .eUVXS_dXYn{-webkit-margin-end:").concat(theme.baseSpacingSmall || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingSmall || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .eUVXS_doqw.eUVXS_ewdC .eUVXS_dnnz,[dir=ltr] .eUVXS_doqw.eUVXS_ewdC .eUVXS_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingSmall || 'inherit', "}\n\n[dir=rtl] .eUVXS_doqw.eUVXS_ewdC .eUVXS_dnnz,[dir=rtl] .eUVXS_doqw.eUVXS_ewdC .eUVXS_dXYn{margin-left:").concat(theme.baseSpacingSmall || 'inherit', ";margin-right:0}\n\n.eUVXS_doqw.eUVXS_ewdC .eUVXS_dnnz{font-size:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.eUVXS_doqw.eUVXS_ewdC .eUVXS_dXYn{height:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2);width:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.eUVXS_doqw.eUVXS_cIHp{padding:calc(").concat(theme.baseSpacingSmall || 'inherit', "/3) calc(").concat(theme.baseSpacingSmall || 'inherit', "/2)}\n\n.eUVXS_doqw.eUVXS_cIHp .eUVXS_dnnz,.eUVXS_doqw.eUVXS_cIHp .eUVXS_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .eUVXS_doqw.eUVXS_cIHp .eUVXS_dnnz,[dir=ltr] .eUVXS_doqw.eUVXS_cIHp .eUVXS_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2)}\n\n[dir=rtl] .eUVXS_doqw.eUVXS_cIHp .eUVXS_dnnz,[dir=rtl] .eUVXS_doqw.eUVXS_cIHp .eUVXS_dXYn{margin-left:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);margin-right:0}\n\n.eUVXS_doqw.eUVXS_cIHp .eUVXS_dnnz{font-size:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.eUVXS_doqw.eUVXS_cIHp .eUVXS_dXYn{height:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2);width:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.eUVXS_doqw .eUVXS_sTpL{font-size:").concat(theme.nameFontSizeSmall || 'inherit', "}\n\n.eUVXS_doqw .eUVXS_biFO{font-size:").concat(theme.descriptorFontSizeSmall || 'inherit', "}\n\n.eUVXS_ycrn.eUVXS_ewdC{padding:calc(").concat(theme.baseSpacingMedium || 'inherit', "/3) ").concat(theme.baseSpacingMedium || 'inherit', "}\n\n.eUVXS_ycrn.eUVXS_ewdC:before{width:calc(").concat(theme.baseSpacingMedium || 'inherit', " - 0.0625rem)}\n\n.eUVXS_ycrn.eUVXS_ewdC .eUVXS_dnnz,.eUVXS_ycrn.eUVXS_ewdC .eUVXS_dXYn{-webkit-margin-end:").concat(theme.baseSpacingMedium || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingMedium || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .eUVXS_ycrn.eUVXS_ewdC .eUVXS_dnnz,[dir=ltr] .eUVXS_ycrn.eUVXS_ewdC .eUVXS_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingMedium || 'inherit', "}\n\n[dir=rtl] .eUVXS_ycrn.eUVXS_ewdC .eUVXS_dnnz,[dir=rtl] .eUVXS_ycrn.eUVXS_ewdC .eUVXS_dXYn{margin-left:").concat(theme.baseSpacingMedium || 'inherit', ";margin-right:0}\n\n.eUVXS_ycrn.eUVXS_ewdC .eUVXS_dnnz{font-size:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.eUVXS_ycrn.eUVXS_ewdC .eUVXS_dXYn{height:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2);width:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.eUVXS_ycrn.eUVXS_cIHp{padding:calc(").concat(theme.baseSpacingMedium || 'inherit', "/3) calc(").concat(theme.baseSpacingMedium || 'inherit', "/2)}\n\n.eUVXS_ycrn.eUVXS_cIHp .eUVXS_dnnz,.eUVXS_ycrn.eUVXS_cIHp .eUVXS_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .eUVXS_ycrn.eUVXS_cIHp .eUVXS_dnnz,[dir=ltr] .eUVXS_ycrn.eUVXS_cIHp .eUVXS_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2)}\n\n[dir=rtl] .eUVXS_ycrn.eUVXS_cIHp .eUVXS_dnnz,[dir=rtl] .eUVXS_ycrn.eUVXS_cIHp .eUVXS_dXYn{margin-left:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);margin-right:0}\n\n.eUVXS_ycrn.eUVXS_cIHp .eUVXS_dnnz{font-size:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.eUVXS_ycrn.eUVXS_cIHp .eUVXS_dXYn{height:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2);width:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.eUVXS_ycrn .eUVXS_sTpL{font-size:").concat(theme.nameFontSizeMedium || 'inherit', "}\n\n.eUVXS_ycrn .eUVXS_biFO{font-size:").concat(theme.descriptorFontSizeMedium || 'inherit', "}\n\n.eUVXS_cMDj.eUVXS_ewdC{padding:calc(").concat(theme.baseSpacingLarge || 'inherit', "/3) ").concat(theme.baseSpacingLarge || 'inherit', "}\n\n.eUVXS_cMDj.eUVXS_ewdC:before{width:calc(").concat(theme.baseSpacingLarge || 'inherit', " - 0.0625rem)}\n\n.eUVXS_cMDj.eUVXS_ewdC .eUVXS_dnnz,.eUVXS_cMDj.eUVXS_ewdC .eUVXS_dXYn{-webkit-margin-end:").concat(theme.baseSpacingLarge || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingLarge || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .eUVXS_cMDj.eUVXS_ewdC .eUVXS_dnnz,[dir=ltr] .eUVXS_cMDj.eUVXS_ewdC .eUVXS_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingLarge || 'inherit', "}\n\n[dir=rtl] .eUVXS_cMDj.eUVXS_ewdC .eUVXS_dnnz,[dir=rtl] .eUVXS_cMDj.eUVXS_ewdC .eUVXS_dXYn{margin-left:").concat(theme.baseSpacingLarge || 'inherit', ";margin-right:0}\n\n.eUVXS_cMDj.eUVXS_ewdC .eUVXS_dnnz{font-size:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.eUVXS_cMDj.eUVXS_ewdC .eUVXS_dXYn{height:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2);width:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.eUVXS_cMDj.eUVXS_cIHp{padding:calc(").concat(theme.baseSpacingLarge || 'inherit', "/3) calc(").concat(theme.baseSpacingLarge || 'inherit', "/2)}\n\n.eUVXS_cMDj.eUVXS_cIHp .eUVXS_dnnz,.eUVXS_cMDj.eUVXS_cIHp .eUVXS_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .eUVXS_cMDj.eUVXS_cIHp .eUVXS_dnnz,[dir=ltr] .eUVXS_cMDj.eUVXS_cIHp .eUVXS_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2)}\n\n[dir=rtl] .eUVXS_cMDj.eUVXS_cIHp .eUVXS_dnnz,[dir=rtl] .eUVXS_cMDj.eUVXS_cIHp .eUVXS_dXYn{margin-left:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);margin-right:0}\n\n.eUVXS_cMDj.eUVXS_cIHp .eUVXS_dnnz{font-size:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.eUVXS_cMDj.eUVXS_cIHp .eUVXS_dXYn{height:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2);width:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.eUVXS_cMDj .eUVXS_sTpL{font-size:").concat(theme.nameFontSizeLarge || 'inherit', "}\n\n.eUVXS_cMDj .eUVXS_biFO{font-size:").concat(theme.descriptorFontSizeLarge || 'inherit', "}\n\n.eUVXS_fGhm{background-color:").concat(theme.selectedBackgroundColor || 'inherit', "}\n\n.eUVXS_fGhm.eUVXS_ewdC:before{visibility:hidden}\n\n.eUVXS_fGhm .eUVXS_dnnz,.eUVXS_fGhm .eUVXS_biFO,.eUVXS_fGhm .eUVXS_sTpL{color:").concat(theme.selectedTextColor || 'inherit', "}");
   },
-  'root': 'dRarB_bGBk',
-  'button': 'dRarB_EwaR',
-  'ie11': 'dRarB_eoSs',
-  'selected': 'dRarB_fGhm',
-  'folderTree': 'dRarB_ewdC',
-  'icon': 'dRarB_dnnz',
-  'node': 'dRarB_fjNS',
-  'textDescriptor': 'dRarB_biFO',
-  'textName': 'dRarB_sTpL',
-  'focused': 'dRarB_cVYB',
-  'layout': 'dRarB_byIz',
-  'text': 'dRarB_eWKC',
-  'isRootButton': 'dRarB_cxHQ',
-  'small': 'dRarB_doqw',
-  'thumbnail': 'dRarB_dXYn',
-  'indent': 'dRarB_cIHp',
-  'medium': 'dRarB_ycrn',
-  'large': 'dRarB_cMDj'
+  'root': 'eUVXS_bGBk',
+  'button': 'eUVXS_EwaR',
+  'ie11': 'eUVXS_eoSs',
+  'selected': 'eUVXS_fGhm',
+  'folderTree': 'eUVXS_ewdC',
+  'icon': 'eUVXS_dnnz',
+  'node': 'eUVXS_fjNS',
+  'textDescriptor': 'eUVXS_biFO',
+  'textName': 'eUVXS_sTpL',
+  'focused': 'eUVXS_cVYB',
+  'layout': 'eUVXS_byIz',
+  'text': 'eUVXS_eWKC',
+  'isRootButton': 'eUVXS_cxHQ',
+  'small': 'eUVXS_doqw',
+  'thumbnail': 'eUVXS_dXYn',
+  'indent': 'eUVXS_cIHp',
+  'medium': 'eUVXS_ycrn',
+  'large': 'eUVXS_cMDj'
 };
 import theme from "./theme.js";
 /**
 ---
 parent: TreeBrowser
 ---
+DO NOT use as standalone component!
+TreeBrowser generates all Collections and Buttons internally.
 **/
 // Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
 

package/es/TreeBrowser/TreeButton/theme.js

@@ -21,6 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
+/**
+ TODO: this file is copied as Node's theme, keep in sync!
+ It needs to be copied instead of reused,
+ otherwise it messes with theme overrides
+*/
 export default function generator(_ref) {
   var colors = _ref.colors,
       spacing = _ref.spacing,

package/es/TreeBrowser/TreeCollection/index.js

@@ -62,6 +62,8 @@ import theme from "./theme.js";
 ---
 parent: TreeBrowser
 ---
+DO NOT use as standalone component!
+TreeBrowser generates all Collections and Buttons internally.
 **/
 
 var TreeCollection = (_dec = testable(), _dec2 = themeable(theme, styles), _dec(_class = _dec2(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {

package/es/TreeBrowser/TreeNode/index.js

@@ -38,30 +38,30 @@ import { themeable } from '@instructure/ui-themeable';
 import { testable } from '@instructure/ui-testable';
 import { isIE11 } from '@instructure/ui-utils';
 var styles = {
-  componentId: 'CZyYS',
+  componentId: 'euDmC',
   template: function template(theme) {
-    return "\n\n@keyframes dRarB_EwaR{50%{opacity:0.5;transform:translate3d(2%,0,0)}to{opacity:1;transform:translateZ(0)}}\n\n.dRarB_bGBk{-ms-user-select:none;-webkit-user-select:none;animation-delay:0.2s;animation-duration:0.2s;animation-fill-mode:forwards;animation-name:dRarB_EwaR;animation-timing-function:ease-out;background-color:transparent;border:none;border-radius:".concat(theme.borderRadius || 'inherit', ";box-sizing:border-box;cursor:pointer;display:block;font-family:inherit;margin:0;opacity:0.01;outline:0;position:relative;text-align:start;transform:translate3d(-2%,0,0);transform-origin:left center;user-select:none;width:100%;z-index:1}\n\n[dir=ltr] .dRarB_bGBk{text-align:left}\n\n[dir=rtl] .dRarB_bGBk{text-align:right}\n\n.dRarB_bGBk:not(.dRarB_eoSs):after{border:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', ";border-radius:calc(").concat(theme.borderRadius || 'inherit', "*1.5);bottom:-0.25rem;box-sizing:border-box;content:\"\";display:block;left:-0.25rem;opacity:0;pointer-events:none;position:absolute;right:-0.25rem;top:-0.25rem;transform:scale(0.95);transition:all 0.2s}\n\n.dRarB_bGBk:hover{background-color:").concat(theme.hoverBackgroundColor || 'inherit', "}\n\n.dRarB_bGBk:hover.dRarB_fGhm{background-color:").concat(theme.selectedBackgroundColor || 'inherit', "}\n\n.dRarB_bGBk:hover.dRarB_ewdC:before{visibility:hidden}\n\n.dRarB_bGBk:hover .dRarB_dnnz,.dRarB_bGBk:hover.dRarB_fjNS,.dRarB_bGBk:hover .dRarB_biFO,.dRarB_bGBk:hover .dRarB_sTpL{color:").concat(theme.hoverTextColor || 'inherit', "}\n\n.dRarB_bGBk.dRarB_cVYB:not(.dRarB_eoSs):after{opacity:1;transform:scale(1)}\n\n.dRarB_bGBk.dRarB_cVYB.dRarB_eoSs{outline:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', "}\n\n.dRarB_byIz{align-items:center;display:flex;line-height:1;min-height:2rem}\n\n.dRarB_dnnz,.dRarB_eWKC{min-width:0.0625rem}\n\n.dRarB_dnnz{align-items:center;color:").concat(theme.iconColor || 'inherit', ";display:flex;justify-content:center;position:relative;z-index:1}\n\n.dRarB_eWKC{flex:1;line-height:").concat(theme.textLineHeight || 'inherit', "}\n\n.dRarB_biFO,.dRarB_sTpL{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.dRarB_sTpL{color:").concat(theme.nameTextColor || 'inherit', "}\n\n.dRarB_biFO{color:").concat(theme.descriptorTextColor || 'inherit', ";margin-top:").concat(theme.descriptorMarginTop || 'inherit', "}\n\n.dRarB_ewdC:not(.dRarB_cxHQ):before{background:").concat(theme.borderColor || 'inherit', ";content:\"\";height:").concat(theme.borderWidth || 'inherit', ";inset-inline-end:auto;inset-inline-start:0;pointer-events:none;position:absolute;top:50%}\n\n[dir=ltr] .dRarB_ewdC:not(.dRarB_cxHQ):before{left:0;right:auto}\n\n[dir=rtl] .dRarB_ewdC:not(.dRarB_cxHQ):before{left:auto;right:0}\n\n.dRarB_doqw.dRarB_ewdC{padding:calc(").concat(theme.baseSpacingSmall || 'inherit', "/3) ").concat(theme.baseSpacingSmall || 'inherit', "}\n\n.dRarB_doqw.dRarB_ewdC:before{width:calc(").concat(theme.baseSpacingSmall || 'inherit', " - 0.0625rem)}\n\n.dRarB_doqw.dRarB_ewdC .dRarB_dnnz,.dRarB_doqw.dRarB_ewdC .dRarB_dXYn{-webkit-margin-end:").concat(theme.baseSpacingSmall || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingSmall || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .dRarB_doqw.dRarB_ewdC .dRarB_dnnz,[dir=ltr] .dRarB_doqw.dRarB_ewdC .dRarB_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingSmall || 'inherit', "}\n\n[dir=rtl] .dRarB_doqw.dRarB_ewdC .dRarB_dnnz,[dir=rtl] .dRarB_doqw.dRarB_ewdC .dRarB_dXYn{margin-left:").concat(theme.baseSpacingSmall || 'inherit', ";margin-right:0}\n\n.dRarB_doqw.dRarB_ewdC .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.dRarB_doqw.dRarB_ewdC .dRarB_dXYn{height:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2);width:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.dRarB_doqw.dRarB_cIHp{padding:calc(").concat(theme.baseSpacingSmall || 'inherit', "/3) calc(").concat(theme.baseSpacingSmall || 'inherit', "/2)}\n\n.dRarB_doqw.dRarB_cIHp .dRarB_dnnz,.dRarB_doqw.dRarB_cIHp .dRarB_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .dRarB_doqw.dRarB_cIHp .dRarB_dnnz,[dir=ltr] .dRarB_doqw.dRarB_cIHp .dRarB_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2)}\n\n[dir=rtl] .dRarB_doqw.dRarB_cIHp .dRarB_dnnz,[dir=rtl] .dRarB_doqw.dRarB_cIHp .dRarB_dXYn{margin-left:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);margin-right:0}\n\n.dRarB_doqw.dRarB_cIHp .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.dRarB_doqw.dRarB_cIHp .dRarB_dXYn{height:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2);width:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.dRarB_doqw .dRarB_sTpL{font-size:").concat(theme.nameFontSizeSmall || 'inherit', "}\n\n.dRarB_doqw .dRarB_biFO{font-size:").concat(theme.descriptorFontSizeSmall || 'inherit', "}\n\n.dRarB_ycrn.dRarB_ewdC{padding:calc(").concat(theme.baseSpacingMedium || 'inherit', "/3) ").concat(theme.baseSpacingMedium || 'inherit', "}\n\n.dRarB_ycrn.dRarB_ewdC:before{width:calc(").concat(theme.baseSpacingMedium || 'inherit', " - 0.0625rem)}\n\n.dRarB_ycrn.dRarB_ewdC .dRarB_dnnz,.dRarB_ycrn.dRarB_ewdC .dRarB_dXYn{-webkit-margin-end:").concat(theme.baseSpacingMedium || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingMedium || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .dRarB_ycrn.dRarB_ewdC .dRarB_dnnz,[dir=ltr] .dRarB_ycrn.dRarB_ewdC .dRarB_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingMedium || 'inherit', "}\n\n[dir=rtl] .dRarB_ycrn.dRarB_ewdC .dRarB_dnnz,[dir=rtl] .dRarB_ycrn.dRarB_ewdC .dRarB_dXYn{margin-left:").concat(theme.baseSpacingMedium || 'inherit', ";margin-right:0}\n\n.dRarB_ycrn.dRarB_ewdC .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.dRarB_ycrn.dRarB_ewdC .dRarB_dXYn{height:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2);width:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.dRarB_ycrn.dRarB_cIHp{padding:calc(").concat(theme.baseSpacingMedium || 'inherit', "/3) calc(").concat(theme.baseSpacingMedium || 'inherit', "/2)}\n\n.dRarB_ycrn.dRarB_cIHp .dRarB_dnnz,.dRarB_ycrn.dRarB_cIHp .dRarB_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .dRarB_ycrn.dRarB_cIHp .dRarB_dnnz,[dir=ltr] .dRarB_ycrn.dRarB_cIHp .dRarB_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2)}\n\n[dir=rtl] .dRarB_ycrn.dRarB_cIHp .dRarB_dnnz,[dir=rtl] .dRarB_ycrn.dRarB_cIHp .dRarB_dXYn{margin-left:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);margin-right:0}\n\n.dRarB_ycrn.dRarB_cIHp .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.dRarB_ycrn.dRarB_cIHp .dRarB_dXYn{height:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2);width:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.dRarB_ycrn .dRarB_sTpL{font-size:").concat(theme.nameFontSizeMedium || 'inherit', "}\n\n.dRarB_ycrn .dRarB_biFO{font-size:").concat(theme.descriptorFontSizeMedium || 'inherit', "}\n\n.dRarB_cMDj.dRarB_ewdC{padding:calc(").concat(theme.baseSpacingLarge || 'inherit', "/3) ").concat(theme.baseSpacingLarge || 'inherit', "}\n\n.dRarB_cMDj.dRarB_ewdC:before{width:calc(").concat(theme.baseSpacingLarge || 'inherit', " - 0.0625rem)}\n\n.dRarB_cMDj.dRarB_ewdC .dRarB_dnnz,.dRarB_cMDj.dRarB_ewdC .dRarB_dXYn{-webkit-margin-end:").concat(theme.baseSpacingLarge || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingLarge || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .dRarB_cMDj.dRarB_ewdC .dRarB_dnnz,[dir=ltr] .dRarB_cMDj.dRarB_ewdC .dRarB_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingLarge || 'inherit', "}\n\n[dir=rtl] .dRarB_cMDj.dRarB_ewdC .dRarB_dnnz,[dir=rtl] .dRarB_cMDj.dRarB_ewdC .dRarB_dXYn{margin-left:").concat(theme.baseSpacingLarge || 'inherit', ";margin-right:0}\n\n.dRarB_cMDj.dRarB_ewdC .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.dRarB_cMDj.dRarB_ewdC .dRarB_dXYn{height:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2);width:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.dRarB_cMDj.dRarB_cIHp{padding:calc(").concat(theme.baseSpacingLarge || 'inherit', "/3) calc(").concat(theme.baseSpacingLarge || 'inherit', "/2)}\n\n.dRarB_cMDj.dRarB_cIHp .dRarB_dnnz,.dRarB_cMDj.dRarB_cIHp .dRarB_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .dRarB_cMDj.dRarB_cIHp .dRarB_dnnz,[dir=ltr] .dRarB_cMDj.dRarB_cIHp .dRarB_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2)}\n\n[dir=rtl] .dRarB_cMDj.dRarB_cIHp .dRarB_dnnz,[dir=rtl] .dRarB_cMDj.dRarB_cIHp .dRarB_dXYn{margin-left:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);margin-right:0}\n\n.dRarB_cMDj.dRarB_cIHp .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.dRarB_cMDj.dRarB_cIHp .dRarB_dXYn{height:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2);width:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.dRarB_cMDj .dRarB_sTpL{font-size:").concat(theme.nameFontSizeLarge || 'inherit', "}\n\n.dRarB_cMDj .dRarB_biFO{font-size:").concat(theme.descriptorFontSizeLarge || 'inherit', "}\n\n.dRarB_fGhm{background-color:").concat(theme.selectedBackgroundColor || 'inherit', "}\n\n.dRarB_fGhm.dRarB_ewdC:before{visibility:hidden}\n\n.dRarB_fGhm .dRarB_dnnz,.dRarB_fGhm .dRarB_biFO,.dRarB_fGhm .dRarB_sTpL{color:").concat(theme.selectedTextColor || 'inherit', "}");
+    return "\n\n@keyframes euDmC_EwaR{50%{opacity:0.5;transform:translate3d(2%,0,0)}to{opacity:1;transform:translateZ(0)}}\n\n.euDmC_bGBk{-ms-user-select:none;-webkit-user-select:none;animation-delay:0.2s;animation-duration:0.2s;animation-fill-mode:forwards;animation-name:euDmC_EwaR;animation-timing-function:ease-out;background-color:transparent;border:none;border-radius:".concat(theme.borderRadius || 'inherit', ";box-sizing:border-box;cursor:pointer;display:block;font-family:inherit;margin:0;opacity:0.01;outline:0;position:relative;text-align:start;transform:translate3d(-2%,0,0);transform-origin:left center;user-select:none;width:100%;z-index:1}\n\n[dir=ltr] .euDmC_bGBk{text-align:left}\n\n[dir=rtl] .euDmC_bGBk{text-align:right}\n\n.euDmC_bGBk:not(.euDmC_eoSs):after{border:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', ";border-radius:calc(").concat(theme.borderRadius || 'inherit', "*1.5);bottom:-0.25rem;box-sizing:border-box;content:\"\";display:block;left:-0.25rem;opacity:0;pointer-events:none;position:absolute;right:-0.25rem;top:-0.25rem;transform:scale(0.95);transition:all 0.2s}\n\n.euDmC_bGBk:hover{background-color:").concat(theme.hoverBackgroundColor || 'inherit', "}\n\n.euDmC_bGBk:hover.euDmC_fGhm{background-color:").concat(theme.selectedBackgroundColor || 'inherit', "}\n\n.euDmC_bGBk:hover.euDmC_ewdC:before{visibility:hidden}\n\n.euDmC_bGBk:hover .euDmC_dnnz,.euDmC_bGBk:hover.euDmC_fjNS,.euDmC_bGBk:hover .euDmC_biFO,.euDmC_bGBk:hover .euDmC_sTpL{color:").concat(theme.hoverTextColor || 'inherit', "}\n\n.euDmC_bGBk.euDmC_cVYB:not(.euDmC_eoSs):after{opacity:1;transform:scale(1)}\n\n.euDmC_bGBk.euDmC_cVYB.euDmC_eoSs{outline:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', "}\n\n.euDmC_byIz{align-items:center;display:flex;line-height:1;min-height:2rem}\n\n.euDmC_dnnz,.euDmC_eWKC{min-width:0.0625rem}\n\n.euDmC_dnnz{align-items:center;color:").concat(theme.iconColor || 'inherit', ";display:flex;justify-content:center;position:relative;z-index:1}\n\n.euDmC_eWKC{flex:1;line-height:").concat(theme.textLineHeight || 'inherit', "}\n\n.euDmC_biFO,.euDmC_sTpL{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.euDmC_sTpL{color:").concat(theme.nameTextColor || 'inherit', "}\n\n.euDmC_biFO{color:").concat(theme.descriptorTextColor || 'inherit', ";margin-top:").concat(theme.descriptorMarginTop || 'inherit', "}\n\n.euDmC_ewdC:not(.euDmC_cxHQ):before{background:").concat(theme.borderColor || 'inherit', ";content:\"\";height:").concat(theme.borderWidth || 'inherit', ";inset-inline-end:auto;inset-inline-start:0;pointer-events:none;position:absolute;top:50%}\n\n[dir=ltr] .euDmC_ewdC:not(.euDmC_cxHQ):before{left:0;right:auto}\n\n[dir=rtl] .euDmC_ewdC:not(.euDmC_cxHQ):before{left:auto;right:0}\n\n.euDmC_doqw.euDmC_ewdC{padding:calc(").concat(theme.baseSpacingSmall || 'inherit', "/3) ").concat(theme.baseSpacingSmall || 'inherit', "}\n\n.euDmC_doqw.euDmC_ewdC:before{width:calc(").concat(theme.baseSpacingSmall || 'inherit', " - 0.0625rem)}\n\n.euDmC_doqw.euDmC_ewdC .euDmC_dnnz,.euDmC_doqw.euDmC_ewdC .euDmC_dXYn{-webkit-margin-end:").concat(theme.baseSpacingSmall || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingSmall || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .euDmC_doqw.euDmC_ewdC .euDmC_dnnz,[dir=ltr] .euDmC_doqw.euDmC_ewdC .euDmC_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingSmall || 'inherit', "}\n\n[dir=rtl] .euDmC_doqw.euDmC_ewdC .euDmC_dnnz,[dir=rtl] .euDmC_doqw.euDmC_ewdC .euDmC_dXYn{margin-left:").concat(theme.baseSpacingSmall || 'inherit', ";margin-right:0}\n\n.euDmC_doqw.euDmC_ewdC .euDmC_dnnz{font-size:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.euDmC_doqw.euDmC_ewdC .euDmC_dXYn{height:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2);width:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.euDmC_doqw.euDmC_cIHp{padding:calc(").concat(theme.baseSpacingSmall || 'inherit', "/3) calc(").concat(theme.baseSpacingSmall || 'inherit', "/2)}\n\n.euDmC_doqw.euDmC_cIHp .euDmC_dnnz,.euDmC_doqw.euDmC_cIHp .euDmC_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .euDmC_doqw.euDmC_cIHp .euDmC_dnnz,[dir=ltr] .euDmC_doqw.euDmC_cIHp .euDmC_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2)}\n\n[dir=rtl] .euDmC_doqw.euDmC_cIHp .euDmC_dnnz,[dir=rtl] .euDmC_doqw.euDmC_cIHp .euDmC_dXYn{margin-left:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);margin-right:0}\n\n.euDmC_doqw.euDmC_cIHp .euDmC_dnnz{font-size:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.euDmC_doqw.euDmC_cIHp .euDmC_dXYn{height:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2);width:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.euDmC_doqw .euDmC_sTpL{font-size:").concat(theme.nameFontSizeSmall || 'inherit', "}\n\n.euDmC_doqw .euDmC_biFO{font-size:").concat(theme.descriptorFontSizeSmall || 'inherit', "}\n\n.euDmC_ycrn.euDmC_ewdC{padding:calc(").concat(theme.baseSpacingMedium || 'inherit', "/3) ").concat(theme.baseSpacingMedium || 'inherit', "}\n\n.euDmC_ycrn.euDmC_ewdC:before{width:calc(").concat(theme.baseSpacingMedium || 'inherit', " - 0.0625rem)}\n\n.euDmC_ycrn.euDmC_ewdC .euDmC_dnnz,.euDmC_ycrn.euDmC_ewdC .euDmC_dXYn{-webkit-margin-end:").concat(theme.baseSpacingMedium || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingMedium || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .euDmC_ycrn.euDmC_ewdC .euDmC_dnnz,[dir=ltr] .euDmC_ycrn.euDmC_ewdC .euDmC_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingMedium || 'inherit', "}\n\n[dir=rtl] .euDmC_ycrn.euDmC_ewdC .euDmC_dnnz,[dir=rtl] .euDmC_ycrn.euDmC_ewdC .euDmC_dXYn{margin-left:").concat(theme.baseSpacingMedium || 'inherit', ";margin-right:0}\n\n.euDmC_ycrn.euDmC_ewdC .euDmC_dnnz{font-size:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.euDmC_ycrn.euDmC_ewdC .euDmC_dXYn{height:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2);width:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.euDmC_ycrn.euDmC_cIHp{padding:calc(").concat(theme.baseSpacingMedium || 'inherit', "/3) calc(").concat(theme.baseSpacingMedium || 'inherit', "/2)}\n\n.euDmC_ycrn.euDmC_cIHp .euDmC_dnnz,.euDmC_ycrn.euDmC_cIHp .euDmC_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .euDmC_ycrn.euDmC_cIHp .euDmC_dnnz,[dir=ltr] .euDmC_ycrn.euDmC_cIHp .euDmC_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2)}\n\n[dir=rtl] .euDmC_ycrn.euDmC_cIHp .euDmC_dnnz,[dir=rtl] .euDmC_ycrn.euDmC_cIHp .euDmC_dXYn{margin-left:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);margin-right:0}\n\n.euDmC_ycrn.euDmC_cIHp .euDmC_dnnz{font-size:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.euDmC_ycrn.euDmC_cIHp .euDmC_dXYn{height:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2);width:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.euDmC_ycrn .euDmC_sTpL{font-size:").concat(theme.nameFontSizeMedium || 'inherit', "}\n\n.euDmC_ycrn .euDmC_biFO{font-size:").concat(theme.descriptorFontSizeMedium || 'inherit', "}\n\n.euDmC_cMDj.euDmC_ewdC{padding:calc(").concat(theme.baseSpacingLarge || 'inherit', "/3) ").concat(theme.baseSpacingLarge || 'inherit', "}\n\n.euDmC_cMDj.euDmC_ewdC:before{width:calc(").concat(theme.baseSpacingLarge || 'inherit', " - 0.0625rem)}\n\n.euDmC_cMDj.euDmC_ewdC .euDmC_dnnz,.euDmC_cMDj.euDmC_ewdC .euDmC_dXYn{-webkit-margin-end:").concat(theme.baseSpacingLarge || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingLarge || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .euDmC_cMDj.euDmC_ewdC .euDmC_dnnz,[dir=ltr] .euDmC_cMDj.euDmC_ewdC .euDmC_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingLarge || 'inherit', "}\n\n[dir=rtl] .euDmC_cMDj.euDmC_ewdC .euDmC_dnnz,[dir=rtl] .euDmC_cMDj.euDmC_ewdC .euDmC_dXYn{margin-left:").concat(theme.baseSpacingLarge || 'inherit', ";margin-right:0}\n\n.euDmC_cMDj.euDmC_ewdC .euDmC_dnnz{font-size:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.euDmC_cMDj.euDmC_ewdC .euDmC_dXYn{height:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2);width:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.euDmC_cMDj.euDmC_cIHp{padding:calc(").concat(theme.baseSpacingLarge || 'inherit', "/3) calc(").concat(theme.baseSpacingLarge || 'inherit', "/2)}\n\n.euDmC_cMDj.euDmC_cIHp .euDmC_dnnz,.euDmC_cMDj.euDmC_cIHp .euDmC_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .euDmC_cMDj.euDmC_cIHp .euDmC_dnnz,[dir=ltr] .euDmC_cMDj.euDmC_cIHp .euDmC_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2)}\n\n[dir=rtl] .euDmC_cMDj.euDmC_cIHp .euDmC_dnnz,[dir=rtl] .euDmC_cMDj.euDmC_cIHp .euDmC_dXYn{margin-left:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);margin-right:0}\n\n.euDmC_cMDj.euDmC_cIHp .euDmC_dnnz{font-size:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.euDmC_cMDj.euDmC_cIHp .euDmC_dXYn{height:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2);width:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.euDmC_cMDj .euDmC_sTpL{font-size:").concat(theme.nameFontSizeLarge || 'inherit', "}\n\n.euDmC_cMDj .euDmC_biFO{font-size:").concat(theme.descriptorFontSizeLarge || 'inherit', "}\n\n.euDmC_fGhm{background-color:").concat(theme.selectedBackgroundColor || 'inherit', "}\n\n.euDmC_fGhm.euDmC_ewdC:before{visibility:hidden}\n\n.euDmC_fGhm .euDmC_dnnz,.euDmC_fGhm .euDmC_biFO,.euDmC_fGhm .euDmC_sTpL{color:").concat(theme.selectedTextColor || 'inherit', "}");
   },
-  'root': 'dRarB_bGBk',
-  'button': 'dRarB_EwaR',
-  'ie11': 'dRarB_eoSs',
-  'selected': 'dRarB_fGhm',
-  'folderTree': 'dRarB_ewdC',
-  'icon': 'dRarB_dnnz',
-  'node': 'dRarB_fjNS',
-  'textDescriptor': 'dRarB_biFO',
-  'textName': 'dRarB_sTpL',
-  'focused': 'dRarB_cVYB',
-  'layout': 'dRarB_byIz',
-  'text': 'dRarB_eWKC',
-  'isRootButton': 'dRarB_cxHQ',
-  'small': 'dRarB_doqw',
-  'thumbnail': 'dRarB_dXYn',
-  'indent': 'dRarB_cIHp',
-  'medium': 'dRarB_ycrn',
-  'large': 'dRarB_cMDj'
+  'root': 'euDmC_bGBk',
+  'button': 'euDmC_EwaR',
+  'ie11': 'euDmC_eoSs',
+  'selected': 'euDmC_fGhm',
+  'folderTree': 'euDmC_ewdC',
+  'icon': 'euDmC_dnnz',
+  'node': 'euDmC_fjNS',
+  'textDescriptor': 'euDmC_biFO',
+  'textName': 'euDmC_sTpL',
+  'focused': 'euDmC_cVYB',
+  'layout': 'euDmC_byIz',
+  'text': 'euDmC_eWKC',
+  'isRootButton': 'euDmC_cxHQ',
+  'small': 'euDmC_doqw',
+  'thumbnail': 'euDmC_dXYn',
+  'indent': 'euDmC_cIHp',
+  'medium': 'euDmC_ycrn',
+  'large': 'euDmC_cMDj'
 };
-import theme from "../TreeButton/theme.js";
+import theme from "./theme.js";
 /**
 ---
 parent: TreeBrowser

package/es/TreeBrowser/TreeNode/theme.js

@@ -0,0 +1,73 @@
+/*
+ * 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: this is a copy of the Button's theme, keep in sync!
+ It needs to be copied instead of reused,
+ otherwise it messes with theme overrides
+*/
+export default function generator(_ref) {
+  var colors = _ref.colors,
+      spacing = _ref.spacing,
+      typography = _ref.typography,
+      borders = _ref.borders;
+  return {
+    hoverBackgroundColor: colors.backgroundBrand,
+    hoverTextColor: colors.textLightest,
+    focusOutlineWidth: borders.widthMedium,
+    focusOutlineColor: colors.borderBrand,
+    focusOutlineStyle: borders.style,
+    iconColor: colors.textDarkest,
+    iconsMarginRight: spacing.xSmall,
+    descriptorMarginTop: spacing.xxxSmall,
+    descriptorTextColor: colors.textDarkest,
+    descriptorFontSizeSmall: typography.fontSizeXSmall,
+    descriptorFontSizeMedium: typography.fontSizeXSmall,
+    descriptorFontSizeLarge: typography.fontSizeSmall,
+    nameTextColor: colors.textBrand,
+    nameFontSizeSmall: typography.fontSizeXSmall,
+    nameFontSizeMedium: typography.fontSizeSmall,
+    nameFontSizeLarge: typography.fontSizeMedium,
+    baseSpacingSmall: spacing.xSmall,
+    baseSpacingMedium: spacing.small,
+    baseSpacingLarge: '1rem',
+    borderWidth: borders.widthSmall,
+    borderRadius: borders.radiusMedium,
+    borderColor: colors.borderDark,
+    textLineHeight: typography.lineHeightCondensed,
+    selectedTextColor: colors.textLightest,
+    selectedBackgroundColor: colors.backgroundDark,
+    selectedOutlineWidth: borders.widthLarge
+  };
+}
+
+generator['canvas'] = function (variables) {
+  return {
+    iconColor: variables['ic-brand-font-color-dark'],
+    hoverBackgroundColor: variables['ic-brand-primary'],
+    focusOutlineColor: variables['ic-brand-primary'],
+    nameTextColor: variables['ic-brand-primary'],
+    descriptorTextColor: variables['ic-brand-font-color-dark']
+  };
+};

package/es/TreeBrowser/index.js

@@ -38,6 +38,7 @@ import { pickProps } from '@instructure/ui-react-utils';
 import { controllable } from '@instructure/ui-prop-types';
 import { testable } from '@instructure/ui-testable';
 import { TreeCollection } from "./TreeCollection/index.js";
+import { TreeButton } from "./TreeButton/index.js";
 import { TreeNode } from "./TreeNode/index.js";
 var styles = {
   componentId: 'DBzxS',
@@ -466,6 +467,6 @@ var TreeBrowser = (_dec = testable(), _dec2 = themeable(theme, styles), _dec(_cl
   rootId: void 0,
   expanded: void 0,
   treeLabel: void 0
-}, _class2.Node = TreeNode, _temp)) || _class) || _class);
+}, _class2.Collection = TreeCollection, _class2.Button = TreeButton, _class2.Node = TreeNode, _temp)) || _class) || _class);
 export default TreeBrowser;
 export { TreeBrowser };

package/lib/TreeBrowser/TreeButton/index.js

@@ -40,34 +40,36 @@ var _theme = _interopRequireDefault(require("./theme.js"));
 var _dec, _dec2, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'dRarB',
+  componentId: 'eUVXS',
   template: function template(theme) {
-    return "\n\n@keyframes dRarB_EwaR{50%{opacity:0.5;transform:translate3d(2%,0,0)}to{opacity:1;transform:translateZ(0)}}\n\n.dRarB_bGBk{-ms-user-select:none;-webkit-user-select:none;animation-delay:0.2s;animation-duration:0.2s;animation-fill-mode:forwards;animation-name:dRarB_EwaR;animation-timing-function:ease-out;background-color:transparent;border:none;border-radius:".concat(theme.borderRadius || 'inherit', ";box-sizing:border-box;cursor:pointer;display:block;font-family:inherit;margin:0;opacity:0.01;outline:0;position:relative;text-align:start;transform:translate3d(-2%,0,0);transform-origin:left center;user-select:none;width:100%;z-index:1}\n\n[dir=ltr] .dRarB_bGBk{text-align:left}\n\n[dir=rtl] .dRarB_bGBk{text-align:right}\n\n.dRarB_bGBk:not(.dRarB_eoSs):after{border:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', ";border-radius:calc(").concat(theme.borderRadius || 'inherit', "*1.5);bottom:-0.25rem;box-sizing:border-box;content:\"\";display:block;left:-0.25rem;opacity:0;pointer-events:none;position:absolute;right:-0.25rem;top:-0.25rem;transform:scale(0.95);transition:all 0.2s}\n\n.dRarB_bGBk:hover{background-color:").concat(theme.hoverBackgroundColor || 'inherit', "}\n\n.dRarB_bGBk:hover.dRarB_fGhm{background-color:").concat(theme.selectedBackgroundColor || 'inherit', "}\n\n.dRarB_bGBk:hover.dRarB_ewdC:before{visibility:hidden}\n\n.dRarB_bGBk:hover .dRarB_dnnz,.dRarB_bGBk:hover.dRarB_fjNS,.dRarB_bGBk:hover .dRarB_biFO,.dRarB_bGBk:hover .dRarB_sTpL{color:").concat(theme.hoverTextColor || 'inherit', "}\n\n.dRarB_bGBk.dRarB_cVYB:not(.dRarB_eoSs):after{opacity:1;transform:scale(1)}\n\n.dRarB_bGBk.dRarB_cVYB.dRarB_eoSs{outline:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', "}\n\n.dRarB_byIz{align-items:center;display:flex;line-height:1;min-height:2rem}\n\n.dRarB_dnnz,.dRarB_eWKC{min-width:0.0625rem}\n\n.dRarB_dnnz{align-items:center;color:").concat(theme.iconColor || 'inherit', ";display:flex;justify-content:center;position:relative;z-index:1}\n\n.dRarB_eWKC{flex:1;line-height:").concat(theme.textLineHeight || 'inherit', "}\n\n.dRarB_biFO,.dRarB_sTpL{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.dRarB_sTpL{color:").concat(theme.nameTextColor || 'inherit', "}\n\n.dRarB_biFO{color:").concat(theme.descriptorTextColor || 'inherit', ";margin-top:").concat(theme.descriptorMarginTop || 'inherit', "}\n\n.dRarB_ewdC:not(.dRarB_cxHQ):before{background:").concat(theme.borderColor || 'inherit', ";content:\"\";height:").concat(theme.borderWidth || 'inherit', ";inset-inline-end:auto;inset-inline-start:0;pointer-events:none;position:absolute;top:50%}\n\n[dir=ltr] .dRarB_ewdC:not(.dRarB_cxHQ):before{left:0;right:auto}\n\n[dir=rtl] .dRarB_ewdC:not(.dRarB_cxHQ):before{left:auto;right:0}\n\n.dRarB_doqw.dRarB_ewdC{padding:calc(").concat(theme.baseSpacingSmall || 'inherit', "/3) ").concat(theme.baseSpacingSmall || 'inherit', "}\n\n.dRarB_doqw.dRarB_ewdC:before{width:calc(").concat(theme.baseSpacingSmall || 'inherit', " - 0.0625rem)}\n\n.dRarB_doqw.dRarB_ewdC .dRarB_dnnz,.dRarB_doqw.dRarB_ewdC .dRarB_dXYn{-webkit-margin-end:").concat(theme.baseSpacingSmall || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingSmall || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .dRarB_doqw.dRarB_ewdC .dRarB_dnnz,[dir=ltr] .dRarB_doqw.dRarB_ewdC .dRarB_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingSmall || 'inherit', "}\n\n[dir=rtl] .dRarB_doqw.dRarB_ewdC .dRarB_dnnz,[dir=rtl] .dRarB_doqw.dRarB_ewdC .dRarB_dXYn{margin-left:").concat(theme.baseSpacingSmall || 'inherit', ";margin-right:0}\n\n.dRarB_doqw.dRarB_ewdC .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.dRarB_doqw.dRarB_ewdC .dRarB_dXYn{height:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2);width:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.dRarB_doqw.dRarB_cIHp{padding:calc(").concat(theme.baseSpacingSmall || 'inherit', "/3) calc(").concat(theme.baseSpacingSmall || 'inherit', "/2)}\n\n.dRarB_doqw.dRarB_cIHp .dRarB_dnnz,.dRarB_doqw.dRarB_cIHp .dRarB_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .dRarB_doqw.dRarB_cIHp .dRarB_dnnz,[dir=ltr] .dRarB_doqw.dRarB_cIHp .dRarB_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2)}\n\n[dir=rtl] .dRarB_doqw.dRarB_cIHp .dRarB_dnnz,[dir=rtl] .dRarB_doqw.dRarB_cIHp .dRarB_dXYn{margin-left:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);margin-right:0}\n\n.dRarB_doqw.dRarB_cIHp .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.dRarB_doqw.dRarB_cIHp .dRarB_dXYn{height:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2);width:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.dRarB_doqw .dRarB_sTpL{font-size:").concat(theme.nameFontSizeSmall || 'inherit', "}\n\n.dRarB_doqw .dRarB_biFO{font-size:").concat(theme.descriptorFontSizeSmall || 'inherit', "}\n\n.dRarB_ycrn.dRarB_ewdC{padding:calc(").concat(theme.baseSpacingMedium || 'inherit', "/3) ").concat(theme.baseSpacingMedium || 'inherit', "}\n\n.dRarB_ycrn.dRarB_ewdC:before{width:calc(").concat(theme.baseSpacingMedium || 'inherit', " - 0.0625rem)}\n\n.dRarB_ycrn.dRarB_ewdC .dRarB_dnnz,.dRarB_ycrn.dRarB_ewdC .dRarB_dXYn{-webkit-margin-end:").concat(theme.baseSpacingMedium || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingMedium || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .dRarB_ycrn.dRarB_ewdC .dRarB_dnnz,[dir=ltr] .dRarB_ycrn.dRarB_ewdC .dRarB_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingMedium || 'inherit', "}\n\n[dir=rtl] .dRarB_ycrn.dRarB_ewdC .dRarB_dnnz,[dir=rtl] .dRarB_ycrn.dRarB_ewdC .dRarB_dXYn{margin-left:").concat(theme.baseSpacingMedium || 'inherit', ";margin-right:0}\n\n.dRarB_ycrn.dRarB_ewdC .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.dRarB_ycrn.dRarB_ewdC .dRarB_dXYn{height:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2);width:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.dRarB_ycrn.dRarB_cIHp{padding:calc(").concat(theme.baseSpacingMedium || 'inherit', "/3) calc(").concat(theme.baseSpacingMedium || 'inherit', "/2)}\n\n.dRarB_ycrn.dRarB_cIHp .dRarB_dnnz,.dRarB_ycrn.dRarB_cIHp .dRarB_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .dRarB_ycrn.dRarB_cIHp .dRarB_dnnz,[dir=ltr] .dRarB_ycrn.dRarB_cIHp .dRarB_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2)}\n\n[dir=rtl] .dRarB_ycrn.dRarB_cIHp .dRarB_dnnz,[dir=rtl] .dRarB_ycrn.dRarB_cIHp .dRarB_dXYn{margin-left:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);margin-right:0}\n\n.dRarB_ycrn.dRarB_cIHp .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.dRarB_ycrn.dRarB_cIHp .dRarB_dXYn{height:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2);width:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.dRarB_ycrn .dRarB_sTpL{font-size:").concat(theme.nameFontSizeMedium || 'inherit', "}\n\n.dRarB_ycrn .dRarB_biFO{font-size:").concat(theme.descriptorFontSizeMedium || 'inherit', "}\n\n.dRarB_cMDj.dRarB_ewdC{padding:calc(").concat(theme.baseSpacingLarge || 'inherit', "/3) ").concat(theme.baseSpacingLarge || 'inherit', "}\n\n.dRarB_cMDj.dRarB_ewdC:before{width:calc(").concat(theme.baseSpacingLarge || 'inherit', " - 0.0625rem)}\n\n.dRarB_cMDj.dRarB_ewdC .dRarB_dnnz,.dRarB_cMDj.dRarB_ewdC .dRarB_dXYn{-webkit-margin-end:").concat(theme.baseSpacingLarge || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingLarge || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .dRarB_cMDj.dRarB_ewdC .dRarB_dnnz,[dir=ltr] .dRarB_cMDj.dRarB_ewdC .dRarB_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingLarge || 'inherit', "}\n\n[dir=rtl] .dRarB_cMDj.dRarB_ewdC .dRarB_dnnz,[dir=rtl] .dRarB_cMDj.dRarB_ewdC .dRarB_dXYn{margin-left:").concat(theme.baseSpacingLarge || 'inherit', ";margin-right:0}\n\n.dRarB_cMDj.dRarB_ewdC .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.dRarB_cMDj.dRarB_ewdC .dRarB_dXYn{height:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2);width:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.dRarB_cMDj.dRarB_cIHp{padding:calc(").concat(theme.baseSpacingLarge || 'inherit', "/3) calc(").concat(theme.baseSpacingLarge || 'inherit', "/2)}\n\n.dRarB_cMDj.dRarB_cIHp .dRarB_dnnz,.dRarB_cMDj.dRarB_cIHp .dRarB_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .dRarB_cMDj.dRarB_cIHp .dRarB_dnnz,[dir=ltr] .dRarB_cMDj.dRarB_cIHp .dRarB_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2)}\n\n[dir=rtl] .dRarB_cMDj.dRarB_cIHp .dRarB_dnnz,[dir=rtl] .dRarB_cMDj.dRarB_cIHp .dRarB_dXYn{margin-left:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);margin-right:0}\n\n.dRarB_cMDj.dRarB_cIHp .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.dRarB_cMDj.dRarB_cIHp .dRarB_dXYn{height:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2);width:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.dRarB_cMDj .dRarB_sTpL{font-size:").concat(theme.nameFontSizeLarge || 'inherit', "}\n\n.dRarB_cMDj .dRarB_biFO{font-size:").concat(theme.descriptorFontSizeLarge || 'inherit', "}\n\n.dRarB_fGhm{background-color:").concat(theme.selectedBackgroundColor || 'inherit', "}\n\n.dRarB_fGhm.dRarB_ewdC:before{visibility:hidden}\n\n.dRarB_fGhm .dRarB_dnnz,.dRarB_fGhm .dRarB_biFO,.dRarB_fGhm .dRarB_sTpL{color:").concat(theme.selectedTextColor || 'inherit', "}");
+    return "\n\n@keyframes eUVXS_EwaR{50%{opacity:0.5;transform:translate3d(2%,0,0)}to{opacity:1;transform:translateZ(0)}}\n\n.eUVXS_bGBk{-ms-user-select:none;-webkit-user-select:none;animation-delay:0.2s;animation-duration:0.2s;animation-fill-mode:forwards;animation-name:eUVXS_EwaR;animation-timing-function:ease-out;background-color:transparent;border:none;border-radius:".concat(theme.borderRadius || 'inherit', ";box-sizing:border-box;cursor:pointer;display:block;font-family:inherit;margin:0;opacity:0.01;outline:0;position:relative;text-align:start;transform:translate3d(-2%,0,0);transform-origin:left center;user-select:none;width:100%;z-index:1}\n\n[dir=ltr] .eUVXS_bGBk{text-align:left}\n\n[dir=rtl] .eUVXS_bGBk{text-align:right}\n\n.eUVXS_bGBk:not(.eUVXS_eoSs):after{border:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', ";border-radius:calc(").concat(theme.borderRadius || 'inherit', "*1.5);bottom:-0.25rem;box-sizing:border-box;content:\"\";display:block;left:-0.25rem;opacity:0;pointer-events:none;position:absolute;right:-0.25rem;top:-0.25rem;transform:scale(0.95);transition:all 0.2s}\n\n.eUVXS_bGBk:hover{background-color:").concat(theme.hoverBackgroundColor || 'inherit', "}\n\n.eUVXS_bGBk:hover.eUVXS_fGhm{background-color:").concat(theme.selectedBackgroundColor || 'inherit', "}\n\n.eUVXS_bGBk:hover.eUVXS_ewdC:before{visibility:hidden}\n\n.eUVXS_bGBk:hover .eUVXS_dnnz,.eUVXS_bGBk:hover.eUVXS_fjNS,.eUVXS_bGBk:hover .eUVXS_biFO,.eUVXS_bGBk:hover .eUVXS_sTpL{color:").concat(theme.hoverTextColor || 'inherit', "}\n\n.eUVXS_bGBk.eUVXS_cVYB:not(.eUVXS_eoSs):after{opacity:1;transform:scale(1)}\n\n.eUVXS_bGBk.eUVXS_cVYB.eUVXS_eoSs{outline:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', "}\n\n.eUVXS_byIz{align-items:center;display:flex;line-height:1;min-height:2rem}\n\n.eUVXS_dnnz,.eUVXS_eWKC{min-width:0.0625rem}\n\n.eUVXS_dnnz{align-items:center;color:").concat(theme.iconColor || 'inherit', ";display:flex;justify-content:center;position:relative;z-index:1}\n\n.eUVXS_eWKC{flex:1;line-height:").concat(theme.textLineHeight || 'inherit', "}\n\n.eUVXS_biFO,.eUVXS_sTpL{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.eUVXS_sTpL{color:").concat(theme.nameTextColor || 'inherit', "}\n\n.eUVXS_biFO{color:").concat(theme.descriptorTextColor || 'inherit', ";margin-top:").concat(theme.descriptorMarginTop || 'inherit', "}\n\n.eUVXS_ewdC:not(.eUVXS_cxHQ):before{background:").concat(theme.borderColor || 'inherit', ";content:\"\";height:").concat(theme.borderWidth || 'inherit', ";inset-inline-end:auto;inset-inline-start:0;pointer-events:none;position:absolute;top:50%}\n\n[dir=ltr] .eUVXS_ewdC:not(.eUVXS_cxHQ):before{left:0;right:auto}\n\n[dir=rtl] .eUVXS_ewdC:not(.eUVXS_cxHQ):before{left:auto;right:0}\n\n.eUVXS_doqw.eUVXS_ewdC{padding:calc(").concat(theme.baseSpacingSmall || 'inherit', "/3) ").concat(theme.baseSpacingSmall || 'inherit', "}\n\n.eUVXS_doqw.eUVXS_ewdC:before{width:calc(").concat(theme.baseSpacingSmall || 'inherit', " - 0.0625rem)}\n\n.eUVXS_doqw.eUVXS_ewdC .eUVXS_dnnz,.eUVXS_doqw.eUVXS_ewdC .eUVXS_dXYn{-webkit-margin-end:").concat(theme.baseSpacingSmall || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingSmall || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .eUVXS_doqw.eUVXS_ewdC .eUVXS_dnnz,[dir=ltr] .eUVXS_doqw.eUVXS_ewdC .eUVXS_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingSmall || 'inherit', "}\n\n[dir=rtl] .eUVXS_doqw.eUVXS_ewdC .eUVXS_dnnz,[dir=rtl] .eUVXS_doqw.eUVXS_ewdC .eUVXS_dXYn{margin-left:").concat(theme.baseSpacingSmall || 'inherit', ";margin-right:0}\n\n.eUVXS_doqw.eUVXS_ewdC .eUVXS_dnnz{font-size:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.eUVXS_doqw.eUVXS_ewdC .eUVXS_dXYn{height:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2);width:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.eUVXS_doqw.eUVXS_cIHp{padding:calc(").concat(theme.baseSpacingSmall || 'inherit', "/3) calc(").concat(theme.baseSpacingSmall || 'inherit', "/2)}\n\n.eUVXS_doqw.eUVXS_cIHp .eUVXS_dnnz,.eUVXS_doqw.eUVXS_cIHp .eUVXS_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .eUVXS_doqw.eUVXS_cIHp .eUVXS_dnnz,[dir=ltr] .eUVXS_doqw.eUVXS_cIHp .eUVXS_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2)}\n\n[dir=rtl] .eUVXS_doqw.eUVXS_cIHp .eUVXS_dnnz,[dir=rtl] .eUVXS_doqw.eUVXS_cIHp .eUVXS_dXYn{margin-left:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);margin-right:0}\n\n.eUVXS_doqw.eUVXS_cIHp .eUVXS_dnnz{font-size:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.eUVXS_doqw.eUVXS_cIHp .eUVXS_dXYn{height:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2);width:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.eUVXS_doqw .eUVXS_sTpL{font-size:").concat(theme.nameFontSizeSmall || 'inherit', "}\n\n.eUVXS_doqw .eUVXS_biFO{font-size:").concat(theme.descriptorFontSizeSmall || 'inherit', "}\n\n.eUVXS_ycrn.eUVXS_ewdC{padding:calc(").concat(theme.baseSpacingMedium || 'inherit', "/3) ").concat(theme.baseSpacingMedium || 'inherit', "}\n\n.eUVXS_ycrn.eUVXS_ewdC:before{width:calc(").concat(theme.baseSpacingMedium || 'inherit', " - 0.0625rem)}\n\n.eUVXS_ycrn.eUVXS_ewdC .eUVXS_dnnz,.eUVXS_ycrn.eUVXS_ewdC .eUVXS_dXYn{-webkit-margin-end:").concat(theme.baseSpacingMedium || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingMedium || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .eUVXS_ycrn.eUVXS_ewdC .eUVXS_dnnz,[dir=ltr] .eUVXS_ycrn.eUVXS_ewdC .eUVXS_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingMedium || 'inherit', "}\n\n[dir=rtl] .eUVXS_ycrn.eUVXS_ewdC .eUVXS_dnnz,[dir=rtl] .eUVXS_ycrn.eUVXS_ewdC .eUVXS_dXYn{margin-left:").concat(theme.baseSpacingMedium || 'inherit', ";margin-right:0}\n\n.eUVXS_ycrn.eUVXS_ewdC .eUVXS_dnnz{font-size:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.eUVXS_ycrn.eUVXS_ewdC .eUVXS_dXYn{height:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2);width:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.eUVXS_ycrn.eUVXS_cIHp{padding:calc(").concat(theme.baseSpacingMedium || 'inherit', "/3) calc(").concat(theme.baseSpacingMedium || 'inherit', "/2)}\n\n.eUVXS_ycrn.eUVXS_cIHp .eUVXS_dnnz,.eUVXS_ycrn.eUVXS_cIHp .eUVXS_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .eUVXS_ycrn.eUVXS_cIHp .eUVXS_dnnz,[dir=ltr] .eUVXS_ycrn.eUVXS_cIHp .eUVXS_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2)}\n\n[dir=rtl] .eUVXS_ycrn.eUVXS_cIHp .eUVXS_dnnz,[dir=rtl] .eUVXS_ycrn.eUVXS_cIHp .eUVXS_dXYn{margin-left:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);margin-right:0}\n\n.eUVXS_ycrn.eUVXS_cIHp .eUVXS_dnnz{font-size:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.eUVXS_ycrn.eUVXS_cIHp .eUVXS_dXYn{height:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2);width:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.eUVXS_ycrn .eUVXS_sTpL{font-size:").concat(theme.nameFontSizeMedium || 'inherit', "}\n\n.eUVXS_ycrn .eUVXS_biFO{font-size:").concat(theme.descriptorFontSizeMedium || 'inherit', "}\n\n.eUVXS_cMDj.eUVXS_ewdC{padding:calc(").concat(theme.baseSpacingLarge || 'inherit', "/3) ").concat(theme.baseSpacingLarge || 'inherit', "}\n\n.eUVXS_cMDj.eUVXS_ewdC:before{width:calc(").concat(theme.baseSpacingLarge || 'inherit', " - 0.0625rem)}\n\n.eUVXS_cMDj.eUVXS_ewdC .eUVXS_dnnz,.eUVXS_cMDj.eUVXS_ewdC .eUVXS_dXYn{-webkit-margin-end:").concat(theme.baseSpacingLarge || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingLarge || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .eUVXS_cMDj.eUVXS_ewdC .eUVXS_dnnz,[dir=ltr] .eUVXS_cMDj.eUVXS_ewdC .eUVXS_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingLarge || 'inherit', "}\n\n[dir=rtl] .eUVXS_cMDj.eUVXS_ewdC .eUVXS_dnnz,[dir=rtl] .eUVXS_cMDj.eUVXS_ewdC .eUVXS_dXYn{margin-left:").concat(theme.baseSpacingLarge || 'inherit', ";margin-right:0}\n\n.eUVXS_cMDj.eUVXS_ewdC .eUVXS_dnnz{font-size:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.eUVXS_cMDj.eUVXS_ewdC .eUVXS_dXYn{height:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2);width:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.eUVXS_cMDj.eUVXS_cIHp{padding:calc(").concat(theme.baseSpacingLarge || 'inherit', "/3) calc(").concat(theme.baseSpacingLarge || 'inherit', "/2)}\n\n.eUVXS_cMDj.eUVXS_cIHp .eUVXS_dnnz,.eUVXS_cMDj.eUVXS_cIHp .eUVXS_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .eUVXS_cMDj.eUVXS_cIHp .eUVXS_dnnz,[dir=ltr] .eUVXS_cMDj.eUVXS_cIHp .eUVXS_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2)}\n\n[dir=rtl] .eUVXS_cMDj.eUVXS_cIHp .eUVXS_dnnz,[dir=rtl] .eUVXS_cMDj.eUVXS_cIHp .eUVXS_dXYn{margin-left:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);margin-right:0}\n\n.eUVXS_cMDj.eUVXS_cIHp .eUVXS_dnnz{font-size:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.eUVXS_cMDj.eUVXS_cIHp .eUVXS_dXYn{height:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2);width:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.eUVXS_cMDj .eUVXS_sTpL{font-size:").concat(theme.nameFontSizeLarge || 'inherit', "}\n\n.eUVXS_cMDj .eUVXS_biFO{font-size:").concat(theme.descriptorFontSizeLarge || 'inherit', "}\n\n.eUVXS_fGhm{background-color:").concat(theme.selectedBackgroundColor || 'inherit', "}\n\n.eUVXS_fGhm.eUVXS_ewdC:before{visibility:hidden}\n\n.eUVXS_fGhm .eUVXS_dnnz,.eUVXS_fGhm .eUVXS_biFO,.eUVXS_fGhm .eUVXS_sTpL{color:").concat(theme.selectedTextColor || 'inherit', "}");
   },
-  'root': 'dRarB_bGBk',
-  'button': 'dRarB_EwaR',
-  'ie11': 'dRarB_eoSs',
-  'selected': 'dRarB_fGhm',
-  'folderTree': 'dRarB_ewdC',
-  'icon': 'dRarB_dnnz',
-  'node': 'dRarB_fjNS',
-  'textDescriptor': 'dRarB_biFO',
-  'textName': 'dRarB_sTpL',
-  'focused': 'dRarB_cVYB',
-  'layout': 'dRarB_byIz',
-  'text': 'dRarB_eWKC',
-  'isRootButton': 'dRarB_cxHQ',
-  'small': 'dRarB_doqw',
-  'thumbnail': 'dRarB_dXYn',
-  'indent': 'dRarB_cIHp',
-  'medium': 'dRarB_ycrn',
-  'large': 'dRarB_cMDj'
+  'root': 'eUVXS_bGBk',
+  'button': 'eUVXS_EwaR',
+  'ie11': 'eUVXS_eoSs',
+  'selected': 'eUVXS_fGhm',
+  'folderTree': 'eUVXS_ewdC',
+  'icon': 'eUVXS_dnnz',
+  'node': 'eUVXS_fjNS',
+  'textDescriptor': 'eUVXS_biFO',
+  'textName': 'eUVXS_sTpL',
+  'focused': 'eUVXS_cVYB',
+  'layout': 'eUVXS_byIz',
+  'text': 'eUVXS_eWKC',
+  'isRootButton': 'eUVXS_cxHQ',
+  'small': 'eUVXS_doqw',
+  'thumbnail': 'eUVXS_dXYn',
+  'indent': 'eUVXS_cIHp',
+  'medium': 'eUVXS_ycrn',
+  'large': 'eUVXS_cMDj'
 };
 
 /**
 ---
 parent: TreeBrowser
 ---
+DO NOT use as standalone component!
+TreeBrowser generates all Collections and Buttons internally.
 **/
 // Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
 var TreeButton = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.themeable)(_theme.default, styles), _dec(_class = _dec2(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {

package/lib/TreeBrowser/TreeButton/theme.js

@@ -28,6 +28,12 @@ exports.default = generator;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
+/**
+ TODO: this file is copied as Node's theme, keep in sync!
+ It needs to be copied instead of reused,
+ otherwise it messes with theme overrides
+*/
 function generator(_ref) {
   var colors = _ref.colors,
       spacing = _ref.spacing,

package/lib/TreeBrowser/TreeCollection/index.js

@@ -65,6 +65,8 @@ var styles = {
 ---
 parent: TreeBrowser
 ---
+DO NOT use as standalone component!
+TreeBrowser generates all Collections and Buttons internally.
 **/
 var TreeCollection = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.themeable)(_theme.default, styles), _dec(_class = _dec2(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(TreeCollection, _Component);

package/lib/TreeBrowser/TreeNode/index.js

@@ -35,33 +35,33 @@ var _testable = require("@instructure/ui-testable/lib/testable.js");
 
 var _isIE = require("@instructure/ui-utils/lib/isIE11.js");
 
-var _theme = _interopRequireDefault(require("../TreeButton/theme.js"));
+var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _dec2, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'CZyYS',
+  componentId: 'euDmC',
   template: function template(theme) {
-    return "\n\n@keyframes dRarB_EwaR{50%{opacity:0.5;transform:translate3d(2%,0,0)}to{opacity:1;transform:translateZ(0)}}\n\n.dRarB_bGBk{-ms-user-select:none;-webkit-user-select:none;animation-delay:0.2s;animation-duration:0.2s;animation-fill-mode:forwards;animation-name:dRarB_EwaR;animation-timing-function:ease-out;background-color:transparent;border:none;border-radius:".concat(theme.borderRadius || 'inherit', ";box-sizing:border-box;cursor:pointer;display:block;font-family:inherit;margin:0;opacity:0.01;outline:0;position:relative;text-align:start;transform:translate3d(-2%,0,0);transform-origin:left center;user-select:none;width:100%;z-index:1}\n\n[dir=ltr] .dRarB_bGBk{text-align:left}\n\n[dir=rtl] .dRarB_bGBk{text-align:right}\n\n.dRarB_bGBk:not(.dRarB_eoSs):after{border:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', ";border-radius:calc(").concat(theme.borderRadius || 'inherit', "*1.5);bottom:-0.25rem;box-sizing:border-box;content:\"\";display:block;left:-0.25rem;opacity:0;pointer-events:none;position:absolute;right:-0.25rem;top:-0.25rem;transform:scale(0.95);transition:all 0.2s}\n\n.dRarB_bGBk:hover{background-color:").concat(theme.hoverBackgroundColor || 'inherit', "}\n\n.dRarB_bGBk:hover.dRarB_fGhm{background-color:").concat(theme.selectedBackgroundColor || 'inherit', "}\n\n.dRarB_bGBk:hover.dRarB_ewdC:before{visibility:hidden}\n\n.dRarB_bGBk:hover .dRarB_dnnz,.dRarB_bGBk:hover.dRarB_fjNS,.dRarB_bGBk:hover .dRarB_biFO,.dRarB_bGBk:hover .dRarB_sTpL{color:").concat(theme.hoverTextColor || 'inherit', "}\n\n.dRarB_bGBk.dRarB_cVYB:not(.dRarB_eoSs):after{opacity:1;transform:scale(1)}\n\n.dRarB_bGBk.dRarB_cVYB.dRarB_eoSs{outline:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', "}\n\n.dRarB_byIz{align-items:center;display:flex;line-height:1;min-height:2rem}\n\n.dRarB_dnnz,.dRarB_eWKC{min-width:0.0625rem}\n\n.dRarB_dnnz{align-items:center;color:").concat(theme.iconColor || 'inherit', ";display:flex;justify-content:center;position:relative;z-index:1}\n\n.dRarB_eWKC{flex:1;line-height:").concat(theme.textLineHeight || 'inherit', "}\n\n.dRarB_biFO,.dRarB_sTpL{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.dRarB_sTpL{color:").concat(theme.nameTextColor || 'inherit', "}\n\n.dRarB_biFO{color:").concat(theme.descriptorTextColor || 'inherit', ";margin-top:").concat(theme.descriptorMarginTop || 'inherit', "}\n\n.dRarB_ewdC:not(.dRarB_cxHQ):before{background:").concat(theme.borderColor || 'inherit', ";content:\"\";height:").concat(theme.borderWidth || 'inherit', ";inset-inline-end:auto;inset-inline-start:0;pointer-events:none;position:absolute;top:50%}\n\n[dir=ltr] .dRarB_ewdC:not(.dRarB_cxHQ):before{left:0;right:auto}\n\n[dir=rtl] .dRarB_ewdC:not(.dRarB_cxHQ):before{left:auto;right:0}\n\n.dRarB_doqw.dRarB_ewdC{padding:calc(").concat(theme.baseSpacingSmall || 'inherit', "/3) ").concat(theme.baseSpacingSmall || 'inherit', "}\n\n.dRarB_doqw.dRarB_ewdC:before{width:calc(").concat(theme.baseSpacingSmall || 'inherit', " - 0.0625rem)}\n\n.dRarB_doqw.dRarB_ewdC .dRarB_dnnz,.dRarB_doqw.dRarB_ewdC .dRarB_dXYn{-webkit-margin-end:").concat(theme.baseSpacingSmall || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingSmall || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .dRarB_doqw.dRarB_ewdC .dRarB_dnnz,[dir=ltr] .dRarB_doqw.dRarB_ewdC .dRarB_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingSmall || 'inherit', "}\n\n[dir=rtl] .dRarB_doqw.dRarB_ewdC .dRarB_dnnz,[dir=rtl] .dRarB_doqw.dRarB_ewdC .dRarB_dXYn{margin-left:").concat(theme.baseSpacingSmall || 'inherit', ";margin-right:0}\n\n.dRarB_doqw.dRarB_ewdC .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.dRarB_doqw.dRarB_ewdC .dRarB_dXYn{height:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2);width:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.dRarB_doqw.dRarB_cIHp{padding:calc(").concat(theme.baseSpacingSmall || 'inherit', "/3) calc(").concat(theme.baseSpacingSmall || 'inherit', "/2)}\n\n.dRarB_doqw.dRarB_cIHp .dRarB_dnnz,.dRarB_doqw.dRarB_cIHp .dRarB_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .dRarB_doqw.dRarB_cIHp .dRarB_dnnz,[dir=ltr] .dRarB_doqw.dRarB_cIHp .dRarB_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2)}\n\n[dir=rtl] .dRarB_doqw.dRarB_cIHp .dRarB_dnnz,[dir=rtl] .dRarB_doqw.dRarB_cIHp .dRarB_dXYn{margin-left:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);margin-right:0}\n\n.dRarB_doqw.dRarB_cIHp .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.dRarB_doqw.dRarB_cIHp .dRarB_dXYn{height:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2);width:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.dRarB_doqw .dRarB_sTpL{font-size:").concat(theme.nameFontSizeSmall || 'inherit', "}\n\n.dRarB_doqw .dRarB_biFO{font-size:").concat(theme.descriptorFontSizeSmall || 'inherit', "}\n\n.dRarB_ycrn.dRarB_ewdC{padding:calc(").concat(theme.baseSpacingMedium || 'inherit', "/3) ").concat(theme.baseSpacingMedium || 'inherit', "}\n\n.dRarB_ycrn.dRarB_ewdC:before{width:calc(").concat(theme.baseSpacingMedium || 'inherit', " - 0.0625rem)}\n\n.dRarB_ycrn.dRarB_ewdC .dRarB_dnnz,.dRarB_ycrn.dRarB_ewdC .dRarB_dXYn{-webkit-margin-end:").concat(theme.baseSpacingMedium || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingMedium || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .dRarB_ycrn.dRarB_ewdC .dRarB_dnnz,[dir=ltr] .dRarB_ycrn.dRarB_ewdC .dRarB_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingMedium || 'inherit', "}\n\n[dir=rtl] .dRarB_ycrn.dRarB_ewdC .dRarB_dnnz,[dir=rtl] .dRarB_ycrn.dRarB_ewdC .dRarB_dXYn{margin-left:").concat(theme.baseSpacingMedium || 'inherit', ";margin-right:0}\n\n.dRarB_ycrn.dRarB_ewdC .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.dRarB_ycrn.dRarB_ewdC .dRarB_dXYn{height:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2);width:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.dRarB_ycrn.dRarB_cIHp{padding:calc(").concat(theme.baseSpacingMedium || 'inherit', "/3) calc(").concat(theme.baseSpacingMedium || 'inherit', "/2)}\n\n.dRarB_ycrn.dRarB_cIHp .dRarB_dnnz,.dRarB_ycrn.dRarB_cIHp .dRarB_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .dRarB_ycrn.dRarB_cIHp .dRarB_dnnz,[dir=ltr] .dRarB_ycrn.dRarB_cIHp .dRarB_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2)}\n\n[dir=rtl] .dRarB_ycrn.dRarB_cIHp .dRarB_dnnz,[dir=rtl] .dRarB_ycrn.dRarB_cIHp .dRarB_dXYn{margin-left:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);margin-right:0}\n\n.dRarB_ycrn.dRarB_cIHp .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.dRarB_ycrn.dRarB_cIHp .dRarB_dXYn{height:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2);width:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.dRarB_ycrn .dRarB_sTpL{font-size:").concat(theme.nameFontSizeMedium || 'inherit', "}\n\n.dRarB_ycrn .dRarB_biFO{font-size:").concat(theme.descriptorFontSizeMedium || 'inherit', "}\n\n.dRarB_cMDj.dRarB_ewdC{padding:calc(").concat(theme.baseSpacingLarge || 'inherit', "/3) ").concat(theme.baseSpacingLarge || 'inherit', "}\n\n.dRarB_cMDj.dRarB_ewdC:before{width:calc(").concat(theme.baseSpacingLarge || 'inherit', " - 0.0625rem)}\n\n.dRarB_cMDj.dRarB_ewdC .dRarB_dnnz,.dRarB_cMDj.dRarB_ewdC .dRarB_dXYn{-webkit-margin-end:").concat(theme.baseSpacingLarge || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingLarge || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .dRarB_cMDj.dRarB_ewdC .dRarB_dnnz,[dir=ltr] .dRarB_cMDj.dRarB_ewdC .dRarB_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingLarge || 'inherit', "}\n\n[dir=rtl] .dRarB_cMDj.dRarB_ewdC .dRarB_dnnz,[dir=rtl] .dRarB_cMDj.dRarB_ewdC .dRarB_dXYn{margin-left:").concat(theme.baseSpacingLarge || 'inherit', ";margin-right:0}\n\n.dRarB_cMDj.dRarB_ewdC .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.dRarB_cMDj.dRarB_ewdC .dRarB_dXYn{height:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2);width:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.dRarB_cMDj.dRarB_cIHp{padding:calc(").concat(theme.baseSpacingLarge || 'inherit', "/3) calc(").concat(theme.baseSpacingLarge || 'inherit', "/2)}\n\n.dRarB_cMDj.dRarB_cIHp .dRarB_dnnz,.dRarB_cMDj.dRarB_cIHp .dRarB_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .dRarB_cMDj.dRarB_cIHp .dRarB_dnnz,[dir=ltr] .dRarB_cMDj.dRarB_cIHp .dRarB_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2)}\n\n[dir=rtl] .dRarB_cMDj.dRarB_cIHp .dRarB_dnnz,[dir=rtl] .dRarB_cMDj.dRarB_cIHp .dRarB_dXYn{margin-left:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);margin-right:0}\n\n.dRarB_cMDj.dRarB_cIHp .dRarB_dnnz{font-size:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.dRarB_cMDj.dRarB_cIHp .dRarB_dXYn{height:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2);width:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.dRarB_cMDj .dRarB_sTpL{font-size:").concat(theme.nameFontSizeLarge || 'inherit', "}\n\n.dRarB_cMDj .dRarB_biFO{font-size:").concat(theme.descriptorFontSizeLarge || 'inherit', "}\n\n.dRarB_fGhm{background-color:").concat(theme.selectedBackgroundColor || 'inherit', "}\n\n.dRarB_fGhm.dRarB_ewdC:before{visibility:hidden}\n\n.dRarB_fGhm .dRarB_dnnz,.dRarB_fGhm .dRarB_biFO,.dRarB_fGhm .dRarB_sTpL{color:").concat(theme.selectedTextColor || 'inherit', "}");
+    return "\n\n@keyframes euDmC_EwaR{50%{opacity:0.5;transform:translate3d(2%,0,0)}to{opacity:1;transform:translateZ(0)}}\n\n.euDmC_bGBk{-ms-user-select:none;-webkit-user-select:none;animation-delay:0.2s;animation-duration:0.2s;animation-fill-mode:forwards;animation-name:euDmC_EwaR;animation-timing-function:ease-out;background-color:transparent;border:none;border-radius:".concat(theme.borderRadius || 'inherit', ";box-sizing:border-box;cursor:pointer;display:block;font-family:inherit;margin:0;opacity:0.01;outline:0;position:relative;text-align:start;transform:translate3d(-2%,0,0);transform-origin:left center;user-select:none;width:100%;z-index:1}\n\n[dir=ltr] .euDmC_bGBk{text-align:left}\n\n[dir=rtl] .euDmC_bGBk{text-align:right}\n\n.euDmC_bGBk:not(.euDmC_eoSs):after{border:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', ";border-radius:calc(").concat(theme.borderRadius || 'inherit', "*1.5);bottom:-0.25rem;box-sizing:border-box;content:\"\";display:block;left:-0.25rem;opacity:0;pointer-events:none;position:absolute;right:-0.25rem;top:-0.25rem;transform:scale(0.95);transition:all 0.2s}\n\n.euDmC_bGBk:hover{background-color:").concat(theme.hoverBackgroundColor || 'inherit', "}\n\n.euDmC_bGBk:hover.euDmC_fGhm{background-color:").concat(theme.selectedBackgroundColor || 'inherit', "}\n\n.euDmC_bGBk:hover.euDmC_ewdC:before{visibility:hidden}\n\n.euDmC_bGBk:hover .euDmC_dnnz,.euDmC_bGBk:hover.euDmC_fjNS,.euDmC_bGBk:hover .euDmC_biFO,.euDmC_bGBk:hover .euDmC_sTpL{color:").concat(theme.hoverTextColor || 'inherit', "}\n\n.euDmC_bGBk.euDmC_cVYB:not(.euDmC_eoSs):after{opacity:1;transform:scale(1)}\n\n.euDmC_bGBk.euDmC_cVYB.euDmC_eoSs{outline:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', "}\n\n.euDmC_byIz{align-items:center;display:flex;line-height:1;min-height:2rem}\n\n.euDmC_dnnz,.euDmC_eWKC{min-width:0.0625rem}\n\n.euDmC_dnnz{align-items:center;color:").concat(theme.iconColor || 'inherit', ";display:flex;justify-content:center;position:relative;z-index:1}\n\n.euDmC_eWKC{flex:1;line-height:").concat(theme.textLineHeight || 'inherit', "}\n\n.euDmC_biFO,.euDmC_sTpL{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.euDmC_sTpL{color:").concat(theme.nameTextColor || 'inherit', "}\n\n.euDmC_biFO{color:").concat(theme.descriptorTextColor || 'inherit', ";margin-top:").concat(theme.descriptorMarginTop || 'inherit', "}\n\n.euDmC_ewdC:not(.euDmC_cxHQ):before{background:").concat(theme.borderColor || 'inherit', ";content:\"\";height:").concat(theme.borderWidth || 'inherit', ";inset-inline-end:auto;inset-inline-start:0;pointer-events:none;position:absolute;top:50%}\n\n[dir=ltr] .euDmC_ewdC:not(.euDmC_cxHQ):before{left:0;right:auto}\n\n[dir=rtl] .euDmC_ewdC:not(.euDmC_cxHQ):before{left:auto;right:0}\n\n.euDmC_doqw.euDmC_ewdC{padding:calc(").concat(theme.baseSpacingSmall || 'inherit', "/3) ").concat(theme.baseSpacingSmall || 'inherit', "}\n\n.euDmC_doqw.euDmC_ewdC:before{width:calc(").concat(theme.baseSpacingSmall || 'inherit', " - 0.0625rem)}\n\n.euDmC_doqw.euDmC_ewdC .euDmC_dnnz,.euDmC_doqw.euDmC_ewdC .euDmC_dXYn{-webkit-margin-end:").concat(theme.baseSpacingSmall || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingSmall || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .euDmC_doqw.euDmC_ewdC .euDmC_dnnz,[dir=ltr] .euDmC_doqw.euDmC_ewdC .euDmC_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingSmall || 'inherit', "}\n\n[dir=rtl] .euDmC_doqw.euDmC_ewdC .euDmC_dnnz,[dir=rtl] .euDmC_doqw.euDmC_ewdC .euDmC_dXYn{margin-left:").concat(theme.baseSpacingSmall || 'inherit', ";margin-right:0}\n\n.euDmC_doqw.euDmC_ewdC .euDmC_dnnz{font-size:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.euDmC_doqw.euDmC_ewdC .euDmC_dXYn{height:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2);width:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.euDmC_doqw.euDmC_cIHp{padding:calc(").concat(theme.baseSpacingSmall || 'inherit', "/3) calc(").concat(theme.baseSpacingSmall || 'inherit', "/2)}\n\n.euDmC_doqw.euDmC_cIHp .euDmC_dnnz,.euDmC_doqw.euDmC_cIHp .euDmC_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .euDmC_doqw.euDmC_cIHp .euDmC_dnnz,[dir=ltr] .euDmC_doqw.euDmC_cIHp .euDmC_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2)}\n\n[dir=rtl] .euDmC_doqw.euDmC_cIHp .euDmC_dnnz,[dir=rtl] .euDmC_doqw.euDmC_cIHp .euDmC_dXYn{margin-left:calc(").concat(theme.baseSpacingSmall || 'inherit', "/2);margin-right:0}\n\n.euDmC_doqw.euDmC_cIHp .euDmC_dnnz{font-size:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.euDmC_doqw.euDmC_cIHp .euDmC_dXYn{height:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2);width:calc(").concat(theme.baseSpacingSmall || 'inherit', "*2)}\n\n.euDmC_doqw .euDmC_sTpL{font-size:").concat(theme.nameFontSizeSmall || 'inherit', "}\n\n.euDmC_doqw .euDmC_biFO{font-size:").concat(theme.descriptorFontSizeSmall || 'inherit', "}\n\n.euDmC_ycrn.euDmC_ewdC{padding:calc(").concat(theme.baseSpacingMedium || 'inherit', "/3) ").concat(theme.baseSpacingMedium || 'inherit', "}\n\n.euDmC_ycrn.euDmC_ewdC:before{width:calc(").concat(theme.baseSpacingMedium || 'inherit', " - 0.0625rem)}\n\n.euDmC_ycrn.euDmC_ewdC .euDmC_dnnz,.euDmC_ycrn.euDmC_ewdC .euDmC_dXYn{-webkit-margin-end:").concat(theme.baseSpacingMedium || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingMedium || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .euDmC_ycrn.euDmC_ewdC .euDmC_dnnz,[dir=ltr] .euDmC_ycrn.euDmC_ewdC .euDmC_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingMedium || 'inherit', "}\n\n[dir=rtl] .euDmC_ycrn.euDmC_ewdC .euDmC_dnnz,[dir=rtl] .euDmC_ycrn.euDmC_ewdC .euDmC_dXYn{margin-left:").concat(theme.baseSpacingMedium || 'inherit', ";margin-right:0}\n\n.euDmC_ycrn.euDmC_ewdC .euDmC_dnnz{font-size:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.euDmC_ycrn.euDmC_ewdC .euDmC_dXYn{height:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2);width:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.euDmC_ycrn.euDmC_cIHp{padding:calc(").concat(theme.baseSpacingMedium || 'inherit', "/3) calc(").concat(theme.baseSpacingMedium || 'inherit', "/2)}\n\n.euDmC_ycrn.euDmC_cIHp .euDmC_dnnz,.euDmC_ycrn.euDmC_cIHp .euDmC_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .euDmC_ycrn.euDmC_cIHp .euDmC_dnnz,[dir=ltr] .euDmC_ycrn.euDmC_cIHp .euDmC_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2)}\n\n[dir=rtl] .euDmC_ycrn.euDmC_cIHp .euDmC_dnnz,[dir=rtl] .euDmC_ycrn.euDmC_cIHp .euDmC_dXYn{margin-left:calc(").concat(theme.baseSpacingMedium || 'inherit', "/2);margin-right:0}\n\n.euDmC_ycrn.euDmC_cIHp .euDmC_dnnz{font-size:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.euDmC_ycrn.euDmC_cIHp .euDmC_dXYn{height:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2);width:calc(").concat(theme.baseSpacingMedium || 'inherit', "*2)}\n\n.euDmC_ycrn .euDmC_sTpL{font-size:").concat(theme.nameFontSizeMedium || 'inherit', "}\n\n.euDmC_ycrn .euDmC_biFO{font-size:").concat(theme.descriptorFontSizeMedium || 'inherit', "}\n\n.euDmC_cMDj.euDmC_ewdC{padding:calc(").concat(theme.baseSpacingLarge || 'inherit', "/3) ").concat(theme.baseSpacingLarge || 'inherit', "}\n\n.euDmC_cMDj.euDmC_ewdC:before{width:calc(").concat(theme.baseSpacingLarge || 'inherit', " - 0.0625rem)}\n\n.euDmC_cMDj.euDmC_ewdC .euDmC_dnnz,.euDmC_cMDj.euDmC_ewdC .euDmC_dXYn{-webkit-margin-end:").concat(theme.baseSpacingLarge || 'inherit', ";-webkit-margin-start:0;margin-inline-end:").concat(theme.baseSpacingLarge || 'inherit', ";margin-inline-start:0}\n\n[dir=ltr] .euDmC_cMDj.euDmC_ewdC .euDmC_dnnz,[dir=ltr] .euDmC_cMDj.euDmC_ewdC .euDmC_dXYn{margin-left:0;margin-right:").concat(theme.baseSpacingLarge || 'inherit', "}\n\n[dir=rtl] .euDmC_cMDj.euDmC_ewdC .euDmC_dnnz,[dir=rtl] .euDmC_cMDj.euDmC_ewdC .euDmC_dXYn{margin-left:").concat(theme.baseSpacingLarge || 'inherit', ";margin-right:0}\n\n.euDmC_cMDj.euDmC_ewdC .euDmC_dnnz{font-size:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.euDmC_cMDj.euDmC_ewdC .euDmC_dXYn{height:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2);width:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.euDmC_cMDj.euDmC_cIHp{padding:calc(").concat(theme.baseSpacingLarge || 'inherit', "/3) calc(").concat(theme.baseSpacingLarge || 'inherit', "/2)}\n\n.euDmC_cMDj.euDmC_cIHp .euDmC_dnnz,.euDmC_cMDj.euDmC_cIHp .euDmC_dXYn{-webkit-margin-end:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);-webkit-margin-start:0;margin-inline-end:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);margin-inline-start:0}\n\n[dir=ltr] .euDmC_cMDj.euDmC_cIHp .euDmC_dnnz,[dir=ltr] .euDmC_cMDj.euDmC_cIHp .euDmC_dXYn{margin-left:0;margin-right:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2)}\n\n[dir=rtl] .euDmC_cMDj.euDmC_cIHp .euDmC_dnnz,[dir=rtl] .euDmC_cMDj.euDmC_cIHp .euDmC_dXYn{margin-left:calc(").concat(theme.baseSpacingLarge || 'inherit', "/2);margin-right:0}\n\n.euDmC_cMDj.euDmC_cIHp .euDmC_dnnz{font-size:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.euDmC_cMDj.euDmC_cIHp .euDmC_dXYn{height:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2);width:calc(").concat(theme.baseSpacingLarge || 'inherit', "*2)}\n\n.euDmC_cMDj .euDmC_sTpL{font-size:").concat(theme.nameFontSizeLarge || 'inherit', "}\n\n.euDmC_cMDj .euDmC_biFO{font-size:").concat(theme.descriptorFontSizeLarge || 'inherit', "}\n\n.euDmC_fGhm{background-color:").concat(theme.selectedBackgroundColor || 'inherit', "}\n\n.euDmC_fGhm.euDmC_ewdC:before{visibility:hidden}\n\n.euDmC_fGhm .euDmC_dnnz,.euDmC_fGhm .euDmC_biFO,.euDmC_fGhm .euDmC_sTpL{color:").concat(theme.selectedTextColor || 'inherit', "}");
   },
-  'root': 'dRarB_bGBk',
-  'button': 'dRarB_EwaR',
-  'ie11': 'dRarB_eoSs',
-  'selected': 'dRarB_fGhm',
-  'folderTree': 'dRarB_ewdC',
-  'icon': 'dRarB_dnnz',
-  'node': 'dRarB_fjNS',
-  'textDescriptor': 'dRarB_biFO',
-  'textName': 'dRarB_sTpL',
-  'focused': 'dRarB_cVYB',
-  'layout': 'dRarB_byIz',
-  'text': 'dRarB_eWKC',
-  'isRootButton': 'dRarB_cxHQ',
-  'small': 'dRarB_doqw',
-  'thumbnail': 'dRarB_dXYn',
-  'indent': 'dRarB_cIHp',
-  'medium': 'dRarB_ycrn',
-  'large': 'dRarB_cMDj'
+  'root': 'euDmC_bGBk',
+  'button': 'euDmC_EwaR',
+  'ie11': 'euDmC_eoSs',
+  'selected': 'euDmC_fGhm',
+  'folderTree': 'euDmC_ewdC',
+  'icon': 'euDmC_dnnz',
+  'node': 'euDmC_fjNS',
+  'textDescriptor': 'euDmC_biFO',
+  'textName': 'euDmC_sTpL',
+  'focused': 'euDmC_cVYB',
+  'layout': 'euDmC_byIz',
+  'text': 'euDmC_eWKC',
+  'isRootButton': 'euDmC_cxHQ',
+  'small': 'euDmC_doqw',
+  'thumbnail': 'euDmC_dXYn',
+  'indent': 'euDmC_cIHp',
+  'medium': 'euDmC_ycrn',
+  'large': 'euDmC_cMDj'
 };
 
 /**

package/lib/TreeBrowser/TreeNode/theme.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+/*
+ * 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: this is a copy of the Button's theme, keep in sync!
+ It needs to be copied instead of reused,
+ otherwise it messes with theme overrides
+*/
+function generator(_ref) {
+  var colors = _ref.colors,
+      spacing = _ref.spacing,
+      typography = _ref.typography,
+      borders = _ref.borders;
+  return {
+    hoverBackgroundColor: colors.backgroundBrand,
+    hoverTextColor: colors.textLightest,
+    focusOutlineWidth: borders.widthMedium,
+    focusOutlineColor: colors.borderBrand,
+    focusOutlineStyle: borders.style,
+    iconColor: colors.textDarkest,
+    iconsMarginRight: spacing.xSmall,
+    descriptorMarginTop: spacing.xxxSmall,
+    descriptorTextColor: colors.textDarkest,
+    descriptorFontSizeSmall: typography.fontSizeXSmall,
+    descriptorFontSizeMedium: typography.fontSizeXSmall,
+    descriptorFontSizeLarge: typography.fontSizeSmall,
+    nameTextColor: colors.textBrand,
+    nameFontSizeSmall: typography.fontSizeXSmall,
+    nameFontSizeMedium: typography.fontSizeSmall,
+    nameFontSizeLarge: typography.fontSizeMedium,
+    baseSpacingSmall: spacing.xSmall,
+    baseSpacingMedium: spacing.small,
+    baseSpacingLarge: '1rem',
+    borderWidth: borders.widthSmall,
+    borderRadius: borders.radiusMedium,
+    borderColor: colors.borderDark,
+    textLineHeight: typography.lineHeightCondensed,
+    selectedTextColor: colors.textLightest,
+    selectedBackgroundColor: colors.backgroundDark,
+    selectedOutlineWidth: borders.widthLarge
+  };
+}
+
+generator['canvas'] = function (variables) {
+  return {
+    iconColor: variables['ic-brand-font-color-dark'],
+    hoverBackgroundColor: variables['ic-brand-primary'],
+    focusOutlineColor: variables['ic-brand-primary'],
+    nameTextColor: variables['ic-brand-primary'],
+    descriptorTextColor: variables['ic-brand-font-color-dark']
+  };
+};

package/lib/TreeBrowser/index.js

@@ -39,7 +39,9 @@ var _testable = require("@instructure/ui-testable/lib/testable.js");
 
 var _index = require("./TreeCollection/index.js");
 
-var _index2 = require("./TreeNode/index.js");
+var _index2 = require("./TreeButton/index.js");
+
+var _index3 = require("./TreeNode/index.js");
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
@@ -469,7 +471,7 @@ var TreeBrowser = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.them
   rootId: void 0,
   expanded: void 0,
   treeLabel: void 0
-}, _class2.Node = _index2.TreeNode, _temp)) || _class) || _class);
+}, _class2.Collection = _index.TreeCollection, _class2.Button = _index2.TreeButton, _class2.Node = _index3.TreeNode, _temp)) || _class) || _class);
 exports.TreeBrowser = TreeBrowser;
 var _default = TreeBrowser;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tree-browser",
-  "version": "7.20.1",
+  "version": "7.20.2",
   "description": "A component for displaying a hierarchical view of information",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -23,19 +23,19 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "^7.20.1",
-    "@instructure/ui-test-locator": "^7.20.1",
-    "@instructure/ui-test-utils": "^7.20.1"
+    "@instructure/ui-babel-preset": "^7.20.2",
+    "@instructure/ui-test-locator": "^7.20.2",
+    "@instructure/ui-test-utils": "^7.20.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@instructure/ui-icons": "^7.20.1",
-    "@instructure/ui-img": "^7.20.1",
-    "@instructure/ui-prop-types": "^7.20.1",
-    "@instructure/ui-react-utils": "^7.20.1",
-    "@instructure/ui-testable": "^7.20.1",
-    "@instructure/ui-themeable": "^7.20.1",
-    "@instructure/ui-utils": "^7.20.1",
+    "@instructure/ui-icons": "^7.20.2",
+    "@instructure/ui-img": "^7.20.2",
+    "@instructure/ui-prop-types": "^7.20.2",
+    "@instructure/ui-react-utils": "^7.20.2",
+    "@instructure/ui-testable": "^7.20.2",
+    "@instructure/ui-themeable": "^7.20.2",
+    "@instructure/ui-utils": "^7.20.2",
     "classnames": "^2",
     "keycode": "^2",
     "prop-types": "^15"

package/src/TreeBrowser/TreeButton/index.js

@@ -39,6 +39,8 @@ import theme from './theme'
 ---
 parent: TreeBrowser
 ---
+DO NOT use as standalone component!
+TreeBrowser generates all Collections and Buttons internally.
 **/
 
 // Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode

package/src/TreeBrowser/TreeButton/styles.css

@@ -1,5 +1,11 @@
 /* stylelint-disable no-descending-specificity, selector-max-class */
 
+/**
+  TODO: this file is copied as Node's css, keep in sync!
+  It needs to be copied instead of reused,
+  otherwise it messes with theme overrides
+*/
+
 @keyframes button {
   50% {
     opacity: 0.5;

package/src/TreeBrowser/TreeButton/theme.js

@@ -22,6 +22,12 @@
  * SOFTWARE.
  */
 
+/**
+ TODO: this file is copied as Node's theme, keep in sync!
+ It needs to be copied instead of reused,
+ otherwise it messes with theme overrides
+*/
+
 export default function generator({ colors, spacing, typography, borders }) {
   return {
     hoverBackgroundColor: colors.backgroundBrand,

package/src/TreeBrowser/TreeCollection/index.js

@@ -45,6 +45,8 @@ import theme from './theme'
 ---
 parent: TreeBrowser
 ---
+DO NOT use as standalone component!
+TreeBrowser generates all Collections and Buttons internally.
 **/
 
 @testable()

package/src/TreeBrowser/TreeNode/index.js

@@ -32,8 +32,8 @@ import { themeable } from '@instructure/ui-themeable'
 import { testable } from '@instructure/ui-testable'
 import { isIE11 } from '@instructure/ui-utils'
 
-import styles from '../TreeButton/styles.css'
-import theme from '../TreeButton/theme'
+import styles from './styles.css'
+import theme from './theme'
 
 /**
 ---

package/src/TreeBrowser/TreeNode/styles.css

@@ -0,0 +1,328 @@
+/* stylelint-disable no-descending-specificity, selector-max-class */
+
+/**
+  TODO: this is a copy of the Button's css, keep in sync!
+  It needs to be copied instead of reused,
+  otherwise it messes with theme overrides
+*/
+
+@keyframes button {
+  50% {
+    opacity: 0.5;
+    transform: translate3d(2%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.root {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  margin: 0;
+  background-color: transparent;
+  text-align: start;
+  font-family: inherit;
+  user-select: none;
+  cursor: pointer;
+  border: none;
+  border-radius: var(--borderRadius);
+  position: relative;
+  z-index: 1; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
+  transform: translate3d(-2%, 0, 0);
+  opacity: 0.01;
+  transform-origin: left center;
+  animation-name: button;
+  animation-duration: 0.2s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-out;
+  animation-delay: 0.2s;
+  outline: 0;
+
+  &:not(.ie11)::after {
+    content: "";
+    pointer-events: none;
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    top: -0.25rem;
+    bottom: -0.25rem;
+    left: -0.25rem; /* stylelint-disable-line property-blacklist */
+    right: -0.25rem; /* stylelint-disable-line property-blacklist */
+    border: var(--focusOutlineWidth) var(--focusOutlineStyle) var(--focusOutlineColor);
+    border-radius: calc(var(--borderRadius) * 1.5);
+    transition: all 0.2s;
+
+    /* properties to transition on :focus */
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  &:hover {
+    background-color: var(--hoverBackgroundColor);
+
+    &.selected {
+      background-color: var(--selectedBackgroundColor);
+    }
+
+    &.folderTree::before {
+      visibility: hidden;
+    }
+
+    &.node {
+      color: var(--hoverTextColor);
+    }
+
+    .textName,
+    .textDescriptor,
+    .icon {
+      color: var(--hoverTextColor);
+    }
+  }
+
+  &.focused {
+    &:not(.ie11)::after {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    &.ie11 {
+      outline: var(--focusOutlineWidth) var(--focusOutlineStyle) var(--focusOutlineColor);
+    }
+  }
+}
+
+.layout {
+  display: flex;
+  align-items: center;
+  line-height: 1;
+  min-height: 2rem;
+}
+
+.icon,
+.text {
+  min-width: 0.0625rem;
+}
+
+.icon {
+  position: relative;
+  z-index: 1; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
+  color: var(--iconColor);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.text {
+  line-height: var(--textLineHeight);
+  flex: 1;
+}
+
+.textName,
+.textDescriptor {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.textName {
+  color: var(--nameTextColor);
+}
+
+.textDescriptor {
+  margin-top: var(--descriptorMarginTop);
+  color: var(--descriptorTextColor);
+}
+
+.folderTree {
+  &:not(.isRootButton)::before {
+    content: "";
+    height: var(--borderWidth);
+    background: var(--borderColor);
+    position: absolute;
+    inset-inline-start: 0;
+    inset-inline-end: auto;
+    top: 50%;
+    pointer-events: none;
+  }
+}
+
+.small {
+  &.folderTree {
+    padding: calc(var(--baseSpacingSmall) / 3) var(--baseSpacingSmall);
+
+    &::before {
+      width: calc(var(--baseSpacingSmall) - 0.0625rem);
+    }
+
+    .icon,
+    .thumbnail {
+      margin-inline-end: var(--baseSpacingSmall);
+      margin-inline-start: 0;
+    }
+
+    .icon {
+      font-size: calc(var(--baseSpacingSmall) * 2);
+    }
+
+    .thumbnail {
+      height: calc(var(--baseSpacingSmall) * 2);
+      width: calc(var(--baseSpacingSmall) * 2);
+    }
+  }
+
+  &.indent {
+    padding: calc(var(--baseSpacingSmall) / 3) calc(var(--baseSpacingSmall) / 2);
+
+    .icon,
+    .thumbnail {
+      margin-inline-end: calc(var(--baseSpacingSmall) / 2);
+      margin-inline-start: 0;
+    }
+
+    .icon {
+      font-size: calc(var(--baseSpacingSmall) * 2);
+    }
+
+    .thumbnail {
+      height: calc(var(--baseSpacingSmall) * 2);
+      width: calc(var(--baseSpacingSmall) * 2);
+    }
+  }
+
+  .textName {
+    font-size: var(--nameFontSizeSmall);
+  }
+
+  .textDescriptor {
+    font-size: var(--descriptorFontSizeSmall);
+  }
+}
+
+.medium {
+  &.folderTree {
+    padding: calc(var(--baseSpacingMedium) / 3) var(--baseSpacingMedium);
+
+    &::before {
+      width: calc(var(--baseSpacingMedium) - 0.0625rem);
+    }
+
+    .icon,
+    .thumbnail {
+      margin-inline-end: var(--baseSpacingMedium);
+      margin-inline-start: 0;
+    }
+
+    .icon {
+      font-size: calc(var(--baseSpacingMedium) * 2);
+    }
+
+    .thumbnail {
+      height: calc(var(--baseSpacingMedium) * 2);
+      width: calc(var(--baseSpacingMedium) * 2);
+    }
+  }
+
+  &.indent {
+    padding: calc(var(--baseSpacingMedium) / 3) calc(var(--baseSpacingMedium) / 2);
+
+    .icon,
+    .thumbnail {
+      margin-inline-end: calc(var(--baseSpacingMedium) / 2);
+      margin-inline-start: 0;
+    }
+
+    .icon {
+      font-size: calc(var(--baseSpacingMedium) * 2);
+    }
+
+    .thumbnail {
+      height: calc(var(--baseSpacingMedium) * 2);
+      width: calc(var(--baseSpacingMedium) * 2);
+    }
+  }
+
+  .textName {
+    font-size: var(--nameFontSizeMedium);
+  }
+
+  .textDescriptor {
+    font-size: var(--descriptorFontSizeMedium);
+  }
+}
+
+.large {
+  &.folderTree {
+    padding: calc(var(--baseSpacingLarge) / 3) var(--baseSpacingLarge);
+
+    &::before {
+      width: calc(var(--baseSpacingLarge) - 0.0625rem);
+    }
+
+    .icon,
+    .thumbnail {
+      margin-inline-end: var(--baseSpacingLarge);
+      margin-inline-start: 0;
+    }
+
+    .icon {
+      font-size: calc(var(--baseSpacingLarge) * 2);
+    }
+
+    .thumbnail {
+      height: calc(var(--baseSpacingLarge) * 2);
+      width: calc(var(--baseSpacingLarge) * 2);
+    }
+  }
+
+  &.indent {
+    padding: calc(var(--baseSpacingLarge) / 3) calc(var(--baseSpacingLarge) / 2);
+
+    .icon,
+    .thumbnail {
+      margin-inline-end: calc(var(--baseSpacingLarge) / 2);
+      margin-inline-start: 0;
+    }
+
+    .icon {
+      font-size: calc(var(--baseSpacingLarge) * 2);
+    }
+
+    .thumbnail {
+      height: calc(var(--baseSpacingLarge) * 2);
+      width: calc(var(--baseSpacingLarge) * 2);
+    }
+  }
+
+  .textName {
+    font-size: var(--nameFontSizeLarge);
+  }
+
+  .textDescriptor {
+    font-size: var(--descriptorFontSizeLarge);
+  }
+}
+
+.expanded {}
+
+.selected {
+  background-color: var(--selectedBackgroundColor);
+
+  &.folderTree::before {
+    visibility: hidden;
+  }
+
+  .textName,
+  .textDescriptor,
+  .icon {
+    color: var(--selectedTextColor);
+  }
+}
+
+.isRootButton {}
+
+/* stylelint-enable no-descending-specificity, selector-max-class */

package/src/TreeBrowser/TreeNode/theme.js

@@ -0,0 +1,78 @@
+/*
+ * 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: this is a copy of the Button's theme, keep in sync!
+ It needs to be copied instead of reused,
+ otherwise it messes with theme overrides
+*/
+
+export default function generator({ colors, spacing, typography, borders }) {
+  return {
+    hoverBackgroundColor: colors.backgroundBrand,
+    hoverTextColor: colors.textLightest,
+
+    focusOutlineWidth: borders.widthMedium,
+    focusOutlineColor: colors.borderBrand,
+    focusOutlineStyle: borders.style,
+
+    iconColor: colors.textDarkest,
+    iconsMarginRight: spacing.xSmall,
+
+    descriptorMarginTop: spacing.xxxSmall,
+    descriptorTextColor: colors.textDarkest,
+    descriptorFontSizeSmall: typography.fontSizeXSmall,
+    descriptorFontSizeMedium: typography.fontSizeXSmall,
+    descriptorFontSizeLarge: typography.fontSizeSmall,
+
+    nameTextColor: colors.textBrand,
+    nameFontSizeSmall: typography.fontSizeXSmall,
+    nameFontSizeMedium: typography.fontSizeSmall,
+    nameFontSizeLarge: typography.fontSizeMedium,
+
+    baseSpacingSmall: spacing.xSmall,
+    baseSpacingMedium: spacing.small,
+    baseSpacingLarge: '1rem',
+
+    borderWidth: borders.widthSmall,
+    borderRadius: borders.radiusMedium,
+    borderColor: colors.borderDark,
+
+    textLineHeight: typography.lineHeightCondensed,
+
+    selectedTextColor: colors.textLightest,
+    selectedBackgroundColor: colors.backgroundDark,
+    selectedOutlineWidth: borders.widthLarge
+  }
+}
+
+generator['canvas'] = function (variables) {
+  return {
+    iconColor: variables['ic-brand-font-color-dark'],
+    hoverBackgroundColor: variables['ic-brand-primary'],
+    focusOutlineColor: variables['ic-brand-primary'],
+    nameTextColor: variables['ic-brand-primary'],
+    descriptorTextColor: variables['ic-brand-font-color-dark']
+  }
+}

package/src/TreeBrowser/index.js

@@ -34,6 +34,7 @@ import { controllable } from '@instructure/ui-prop-types'
 import { testable } from '@instructure/ui-testable'
 
 import { TreeCollection } from './TreeCollection'
+import { TreeButton } from './TreeButton'
 import { TreeNode } from './TreeNode'
 
 import styles from './styles.css'
@@ -139,6 +140,8 @@ class TreeBrowser extends Component {
     treeLabel: undefined
   }
 
+  static Collection = TreeCollection
+  static Button = TreeButton
   static Node = TreeNode
 
   constructor(props) {