@ndla/ui 25.3.0 → 26.0.0

package/src/TreeStructure/FolderNameInput.tsx

@@ -8,9 +8,7 @@
 
 import React, { useEffect, useState, useRef, ChangeEvent, KeyboardEvent } from 'react';
 import styled from '@emotion/styled';
-import { FolderOutlined } from '@ndla/icons/contentType';
-import { ArrowDropDown as ArrowDropDownRaw } from '@ndla/icons/common';
-import { spacing, colors, misc, animations } from '@ndla/core';
+import { spacing, colors, animations, spacingUnit } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { isMobile } from 'react-device-detect';
 import { Spinner } from '@ndla/icons';
@@ -18,18 +16,22 @@ import { IconButton } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';
 import { Done } from '@ndla/icons/editor';
 
-const ArrowRight = styled(ArrowDropDownRaw)`
-  color: ${colors.text.primary};
-  transform: rotate(-90deg);
-`;
+// Source: https://kovart.github.io/dashed-border-generator/
+const borderStyle = `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='${encodeURIComponent(
+  colors.brand.tertiary,
+)}' stroke-width='2' stroke-dasharray='8%2c8' stroke-dashoffset='4' stroke-linecap='square'/%3e%3c/svg%3e")`;
 
 const NewFolderWrapper = styled.div`
-  padding-left: ${spacing.normal};
-  ${animations.fadeInLeft(animations.durations.fast)};
-  animation-fill-mode: forwards;
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
+  background: linear-gradient(
+    to bottom,
+    ${colors.white} 0%,
+    ${colors.white} 15%,
+    ${colors.brand.lighter} 15%,
+    ${colors.brand.lighter} 85%,
+    ${colors.white} 85%,
+    ${colors.white} 100%
+  );
+  background-size: auto 100%;
 `;
 
 const Row = styled.div`
@@ -38,23 +40,31 @@ const Row = styled.div`
   padding-right: ${spacing.xsmall};
 `;
 
-const InputWrapper = styled.div<{ loading?: boolean }>`
+const InputWrapper = styled.div<{ level: number }>`
   display: flex;
   margin: ${spacing.xxsmall} 0;
+  margin-left: ${({ level }) => 0.75 * spacingUnit * level + 2 * spacingUnit}px;
+  margin-right: ${spacing.normal};
   align-items: center;
-  border: 1px solid ${({ loading }) => (loading ? colors.brand.lighter : colors.brand.primary)};
-  border-style: dashed;
-  border-radius: ${misc.borderRadius};
+  background-color: ${colors.white};
+  background-image: ${borderStyle};
   color: ${colors.brand.primary};
+
+  ${animations.fadeInLeft(animations.durations.fast)};
+  animation-fill-mode: forwards;
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 `;
 
 const StyledInput = styled.input`
+  padding: ${spacing.small};
   flex-grow: 1;
   border: 0;
   outline: none;
   min-width: 0;
   background: transparent;
-  color: ${colors.text.primary};
+  color: ${colors.brand.primary};
   scroll-margin-top: 100px;
 `;
 
@@ -63,11 +73,12 @@ interface FolderNameInputProps {
   parentId: string;
   onCancelNewFolder: () => void;
   loading?: boolean;
+  level: number;
 }
 
-const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading }: FolderNameInputProps) => {
+const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading, level }: FolderNameInputProps) => {
   const { t } = useTranslation();
-  const [name, setName] = useState<string>(t('treeStructure.newFolder.defaultName'));
+  const [name, setName] = useState<string>('');
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -75,15 +86,14 @@ const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading
     if (isMobile) {
       inputRef.current?.scrollIntoView({ behavior: 'smooth' });
     }
-  }, []);
+    return () => {
+      onCancelNewFolder();
+    };
+  }, [onCancelNewFolder]);
 
   return (
     <NewFolderWrapper>
-      <InputWrapper loading={loading}>
-        <Row>
-          <ArrowRight />
-          <FolderOutlined />
-        </Row>
+      <InputWrapper level={level}>
         <StyledInput
           ref={inputRef}
           autoFocus
@@ -96,6 +106,10 @@ const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading
               onCancelNewFolder();
             } else if (e.key === 'Enter' || e.key === 'Tab') {
               e.preventDefault();
+              if (name === '') {
+                onCancelNewFolder();
+                return;
+              }
               onSaveNewFolder(name, parentId);
             }
           }}
@@ -104,12 +118,13 @@ const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading
         <Row>
           {!loading ? (
             <>
-              <IconButton aria-label={t('close')} size="xsmall" ghostPill onClick={onCancelNewFolder}>
+              <IconButton aria-label={t('close')} title={t('close')} size="small" ghostPill onClick={onCancelNewFolder}>
                 <Cross />
               </IconButton>
               <IconButton
                 aria-label={t('save')}
-                size="xsmall"
+                title={t('save')}
+                size="small"
                 ghostPill
                 onClick={() => onSaveNewFolder(name, parentId)}>
                 <Done />

package/src/TreeStructure/NavigationLink.tsx

@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import styled from '@emotion/styled';
+import { colors, fonts, spacing } from '@ndla/core';
+import React, { KeyboardEvent, useEffect, useRef } from 'react';
+import SafeLink from '@ndla/safelink';
+import { arrowNavigation } from './arrowNavigation';
+import { CommonFolderItemsProps, FolderType } from './types';
+
+interface StyledProps {
+  selected?: boolean;
+}
+
+const StyledSafeLink = styled(SafeLink)<StyledProps>`
+  display: grid;
+  grid-template-columns: ${spacing.medium} 1fr;
+  align-items: center;
+  padding: ${spacing.xxsmall};
+  margin: ${spacing.xsmall} 0;
+  gap: ${spacing.xxsmall};
+  box-shadow: none;
+
+  color: ${({ selected }) => (selected ? colors.brand.primary : colors.text.primary)};
+  font-weight: ${({ selected }) => (selected ? fonts.weight.semibold : fonts.weight.normal)};
+  ${fonts.sizes('16px')};
+
+  :hover,
+  :focus {
+    color: ${colors.brand.primary};
+  }
+  svg {
+    height: 26px;
+    width: 26px;
+  }
+`;
+
+const IconWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+interface Props extends CommonFolderItemsProps {
+  isOpen: boolean;
+  folder: FolderType;
+}
+
+const NavigationLink = ({
+  loading,
+  folder,
+  selectedFolder,
+  focusedFolderId,
+  setSelectedFolder,
+  setFocusedId,
+  visibleFolders,
+  onOpenFolder,
+  onCloseFolder,
+}: Props) => {
+  const { id, icon, name } = folder;
+  const selected = selectedFolder && selectedFolder.id === id;
+  const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
+  const focused = focusedFolderId === id;
+
+  const handleClick = () => {
+    if (!selected) {
+      setSelectedFolder(folder);
+      setFocusedId(id);
+    }
+  };
+
+  useEffect(() => {
+    if (focusedFolderId === id) {
+      ref.current?.focus();
+    }
+  }, [focusedFolderId, ref, id]);
+
+  return (
+    <StyledSafeLink
+      ref={ref}
+      onKeyDown={(e: KeyboardEvent<HTMLElement>) =>
+        arrowNavigation(e, id, visibleFolders, setFocusedId, onOpenFolder, onCloseFolder)
+      }
+      tabIndex={selected || focused ? 0 : -1}
+      selected={selected}
+      onFocus={() => setFocusedId(id)}
+      onClick={handleClick}
+      to={loading ? '' : `/minndla/${id}`}>
+      <IconWrapper>{icon}</IconWrapper>
+      {name}
+    </StyledSafeLink>
+  );
+};
+
+export default NavigationLink;

package/src/TreeStructure/TreeStructure.tsx

@@ -6,18 +6,20 @@
  *
  */
 
-import React, { useEffect, useState, useMemo } from 'react';
-import { AddButton } from '@ndla/button';
+import React, { useEffect, useState, useMemo, useRef } from 'react';
+import { ButtonV2 as Button, IconButtonDualStates } from '@ndla/button';
+import { Plus } from '@ndla/icons/action';
+import { ChevronDown, ChevronUp } from '@ndla/icons/common';
 import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { spacing, fonts } from '@ndla/core';
+import { colors, fonts, misc, spacing } from '@ndla/core';
+import { css } from '@emotion/core';
 import { uniq } from 'lodash';
 import { IFolder } from '@ndla/types-learningpath-api';
-import TreeStructureStyledWrapper from './TreeStructureWrapper';
 import FolderItems from './FolderItems';
 import { flattenFolders } from './helperFunctions';
-import { CommonTreeStructureProps, FolderType } from './types';
+import { CommonTreeStructureProps, FolderType, TreeStructureType } from './types';
 
 export const MAX_LEVEL_FOR_FOLDERS = 4;
 
@@ -25,15 +27,86 @@ const StyledLabel = styled.label`
   font-weight: ${fonts.weight.semibold};
 `;
 
-const AddFolderWrapper = styled.div`
+interface StyledRowProps {
+  isOpen: boolean;
+}
+
+const StyledRow = styled.div<StyledRowProps>`
+  display: flex;
+  justify-content: space-between;
+  padding: ${spacing.xxsmall};
+  border-bottom: ${({ isOpen }) => isOpen && `1px solid ${colors.brand.tertiary}`};
+`;
+
+const StyledTreeStructure = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+`;
+
+const TreeStructureWrapper = styled.div<{ type: TreeStructureType }>`
   display: flex;
-  margin-top: ${spacing.xsmall};
+  flex-direction: column;
+  ${({ type }) =>
+    (type === 'normal' || type === 'picker') &&
+    css`
+      overflow: hidden;
+      border: 1px solid ${colors.brand.neutral7};
+      border-radius: ${misc.borderRadius};
+      scroll-behavior: smooth;
+    `}
+  transition: ${misc.transition.default};
+  &:focus-within {
+    border-color: ${colors.brand.tertiary};
+  }
+`;
+interface ScrollableDivProps {
+  type: TreeStructureType;
+}
+const ScrollableDiv = styled.div<ScrollableDivProps>`
+  ${({ type }) =>
+    (type === 'picker' || type === 'normal') &&
+    css`
+      overflow: overlay;
+      ::-webkit-scrollbar {
+        width: ${spacing.small};
+      }
+      ::-webkit-scrollbar-thumb {
+        border: 4px solid transparent;
+        border-radius: 14px;
+        background-clip: padding-box;
+        padding: 0 4px;
+        background-color: ${colors.brand.neutral7};
+      }
+    `}
+`;
+
+const StyledSelectedFolder = styled(Button)`
+  flex: 1;
+  justify-content: flex-start;
+  :hover,
+  :focus {
+    background: none;
+    box-shadow: none;
+    border-color: transparent;
+  }
+`;
+
+const StyledAddFolderButton = styled(Button)`
+  &,
+  &:disabled {
+    border-color: transparent;
+  }
+`;
+
+const StyledPlus = styled(Plus)`
+  height: 24px;
+  width: 24px;
 `;
 
 export interface TreeStructureProps extends CommonTreeStructureProps {
   defaultOpenFolders?: string[];
   folders: FolderType[];
-  editable?: boolean;
   label?: string;
   maximumLevelsOfFoldersAllowed?: number;
   onNewFolder?: (name: string, parentId: string) => Promise<IFolder>;
@@ -41,10 +114,7 @@ export interface TreeStructureProps extends CommonTreeStructureProps {
 
 const TreeStructure = ({
   defaultOpenFolders,
-  editable,
-  menuItems,
   folders,
-  framed,
   label,
   loading,
   maximumLevelsOfFoldersAllowed = MAX_LEVEL_FOR_FOLDERS,
@@ -52,9 +122,12 @@ const TreeStructure = ({
   onSelectFolder,
   openOnFolderClick,
   targetResource,
+  type = 'normal',
 }: TreeStructureProps) => {
   const { t } = useTranslation();
 
+  const ref = useRef<HTMLDivElement>(null);
+
   const defaultSelectedFolderId = defaultOpenFolders && defaultOpenFolders[defaultOpenFolders.length - 1];
 
   const [openFolders, setOpenFolders] = useState<string[]>(defaultOpenFolders || []);
@@ -62,10 +135,25 @@ const TreeStructure = ({
   const [newFolderParentId, setNewFolderParentId] = useState<string | undefined>();
   const [focusedId, setFocusedId] = useState<string | undefined>();
   const [selectedFolder, setSelectedFolder] = useState<FolderType | undefined>();
+  const [showTree, setShowTree] = useState(type !== 'picker');
 
   const flattenedFolders = useMemo(() => flattenFolders(folders, openFolders), [folders, openFolders]);
   const visibleFolderIds = flattenedFolders.map((folder) => folder.id);
 
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (e.target instanceof Element && ref.current && !ref.current.contains(e.target)) {
+        setShowTree(false);
+      }
+    };
+    if (type === 'picker') {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [ref, type]);
+
   useEffect(() => {
     if (defaultOpenFolders) {
       if (!defaultOpenFolders.every((element) => openFolders.includes(element))) {
@@ -77,6 +165,10 @@ const TreeStructure = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultOpenFolders]);
 
+  useEffect(() => {
+    setNewFolderParentId(undefined);
+  }, [selectedFolder]);
+
   useEffect(() => {
     if (defaultSelectedFolderId !== undefined) {
       const selected = flattenFolders(folders).find((folder) => folder.id === defaultSelectedFolderId);
@@ -114,9 +206,9 @@ const TreeStructure = ({
   };
 
   const onSaveNewFolder = (name: string, parentId: string) => {
-    setNewFolderParentId(undefined);
     onNewFolder?.(name, parentId).then((newFolder) => {
       if (newFolder) {
+        setNewFolderParentId?.(undefined);
         setSelectedFolder(newFolder);
         onSelectFolder?.(newFolder.id);
         setFocusedId(newFolder.id);
@@ -126,60 +218,94 @@ const TreeStructure = ({
   };
 
   const onCancelNewFolder = () => {
-    setNewFolderParentId(undefined);
+    setNewFolderParentId?.(undefined);
   };
 
-  const canAddFolder =
-    editable && selectedFolder && selectedFolder?.breadcrumbs.length < (maximumLevelsOfFoldersAllowed || 1);
+  const canAddFolder = selectedFolder && selectedFolder?.breadcrumbs.length < (maximumLevelsOfFoldersAllowed || 1);
 
   return (
-    <div>
+    <StyledTreeStructure ref={ref}>
       {label && <StyledLabel>{label}</StyledLabel>}
-      <TreeStructureStyledWrapper aria-label="Menu tree" role="tree" framed={framed}>
-        <FolderItems
-          editable={editable}
-          focusedFolderId={focusedId}
-          menuItems={menuItems}
-          folders={folders}
-          level={0}
-          loading={loading}
-          selectedFolder={selectedFolder}
-          maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
-          newFolderParentId={newFolderParentId}
-          onCancelNewFolder={onCancelNewFolder}
-          onCloseFolder={onCloseFolder}
-          onOpenFolder={onOpenFolder}
-          onSaveNewFolder={onSaveNewFolder}
-          onSelectFolder={onSelectFolder}
-          openFolders={openFolders}
-          openOnFolderClick={openOnFolderClick}
-          setFocusedId={setFocusedId}
-          setSelectedFolder={setSelectedFolder}
-          targetResource={targetResource}
-          visibleFolders={visibleFolderIds}
-          framed={framed}
-        />
-      </TreeStructureStyledWrapper>
-      {editable && (
-        <AddFolderWrapper>
-          <Tooltip
-            tooltip={
-              canAddFolder
-                ? t('myNdla.newFolderUnder', {
-                    folderName: selectedFolder?.name,
-                  })
-                : t('treeStructure.maxFoldersAlreadyAdded')
-            }>
-            <AddButton
-              disabled={!canAddFolder}
-              aria-label={t('myNdla.newFolder')}
-              onClick={() => setNewFolderParentId(selectedFolder?.id)}>
-              {t('myNdla.newFolder')}
-            </AddButton>
-          </Tooltip>
-        </AddFolderWrapper>
-      )}
-    </div>
+      <TreeStructureWrapper aria-label={label} type={type}>
+        {type === 'picker' && (
+          <StyledRow isOpen={showTree}>
+            <StyledSelectedFolder
+              variant="ghost"
+              colorTheme="light"
+              fontWeight="normal"
+              shape="sharp"
+              onClick={() => {
+                setShowTree(!showTree);
+              }}>
+              {selectedFolder?.name}
+            </StyledSelectedFolder>
+            {onNewFolder && showTree && (
+              <Tooltip
+                tooltip={
+                  canAddFolder
+                    ? t('myNdla.newFolderUnder', {
+                        folderName: selectedFolder?.name,
+                      })
+                    : t('treeStructure.maxFoldersAlreadyAdded')
+                }>
+                <StyledAddFolderButton
+                  variant="outline"
+                  shape="pill"
+                  disabled={!canAddFolder}
+                  aria-label={
+                    canAddFolder
+                      ? t('myNdla.newFolderUnder', {
+                          folderName: selectedFolder?.name,
+                        })
+                      : t('treeStructure.maxFoldersAlreadyAdded')
+                  }
+                  onClick={() => setNewFolderParentId(selectedFolder?.id)}>
+                  <StyledPlus /> {t('myNdla.newFolder')}
+                </StyledAddFolderButton>
+              </Tooltip>
+            )}
+            <IconButtonDualStates
+              ariaLabelActive={t('treeStructure.hideFolders')}
+              ariaLabelInActive={t('treeStructure.showFolders')}
+              active={showTree}
+              variant="ghost"
+              colorTheme="greyLighter"
+              inactiveIcon={<ChevronDown />}
+              activeIcon={<ChevronUp />}
+              size="small"
+              onClick={() => {
+                setShowTree(!showTree);
+              }}
+            />
+          </StyledRow>
+        )}
+        {showTree && (
+          <ScrollableDiv type={type}>
+            <FolderItems
+              focusedFolderId={focusedId}
+              folders={folders}
+              level={0}
+              loading={loading}
+              selectedFolder={selectedFolder}
+              maxLevel={maximumLevelsOfFoldersAllowed}
+              newFolderParentId={newFolderParentId}
+              onCancelNewFolder={onCancelNewFolder}
+              onCloseFolder={onCloseFolder}
+              onOpenFolder={onOpenFolder}
+              onSaveNewFolder={onSaveNewFolder}
+              onSelectFolder={onSelectFolder}
+              openFolders={openFolders}
+              openOnFolderClick={openOnFolderClick}
+              setFocusedId={setFocusedId}
+              setSelectedFolder={setSelectedFolder}
+              targetResource={targetResource}
+              visibleFolders={visibleFolderIds}
+              type={type}
+            />
+          </ScrollableDiv>
+        )}
+      </TreeStructureWrapper>
+    </StyledTreeStructure>
   );
 };
 

package/src/TreeStructure/types.ts

@@ -12,8 +12,11 @@ import { MenuItemProps } from '@ndla/button';
 
 export interface FolderType extends IFolder {
   icon?: ReactNode;
+  isNavigation?: boolean;
 }
 
+export type TreeStructureType = 'normal' | 'navigation' | 'picker';
+
 export interface TreeStructureMenuProps extends Omit<MenuItemProps, 'onClick'> {
   onClick: (e: MouseEvent<HTMLDivElement> | undefined, folder: FolderType) => void;
 }
@@ -22,14 +25,15 @@ export interface CommonTreeStructureProps {
   loading?: boolean;
   onSelectFolder?: (id: string) => void;
   openOnFolderClick?: boolean;
-  menuItems?: TreeStructureMenuProps[];
   targetResource?: IResource;
   framed?: boolean;
+  type: TreeStructureType;
 }
 
 export interface CommonFolderItemsProps extends CommonTreeStructureProps {
   focusedFolderId?: string;
   level: number;
+  maxLevel: number;
   selectedFolder?: FolderType;
   onCloseFolder: (id: string) => void;
   onOpenFolder: (id: string) => void;

package/src/locale/messages-en.ts

@@ -19,6 +19,8 @@ const messages = {
       edit: 'Edit foldername',
       delete: 'Delete',
     },
+    hideFolders: 'Hide all folders',
+    showFolders: 'Show all folders',
     createFolder: 'Create folder',
     maxFoldersAlreadyAdded: 'Maximum subfolders reached',
     newFolder: {

package/src/locale/messages-nb.ts

@@ -19,6 +19,8 @@ const messages = {
       edit: 'Endre mappenavn',
       delete: 'Slett',
     },
+    hideFolders: 'Skjul alle mapper',
+    showFolders: 'Vis alle mapper',
     createFolder: 'Lag mappe',
     maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {

package/src/locale/messages-nn.ts

@@ -19,6 +19,8 @@ const messages = {
       edit: 'Endre mappenamn',
       delete: 'Slett',
     },
+    hideFolders: 'Skjul alle mapper',
+    showFolders: 'Vis alle mapper',
     createFolder: 'Lag mappe',
     maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {

package/src/locale/messages-se.ts

@@ -19,6 +19,8 @@ const messages = {
       edit: 'Rievdat máhpa nama',
       delete: 'Sihko',
     },
+    hideFolders: 'Skjul alle mapper',
+    showFolders: 'Vis alle mapper',
     createFolder: 'Ráhkat máhpa',
     maxFoldersAlreadyAdded: 'Vuollemáhpaid badjerádji lea olahuvvon',
     newFolder: {

package/src/locale/messages-sma.ts

@@ -19,6 +19,8 @@ const messages = {
       edit: 'Endre mappenavn',
       delete: 'Slett',
     },
+    hideFolders: 'Skjul alle mapper',
+    showFolders: 'Vis alle mapper',
     createFolder: 'Lag mappe',
     maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {

package/es/TreeStructure/TreeStructureWrapper.js

@@ -1,13 +0,0 @@
-import _styled from "@emotion/styled-base";
-import { css } from '@emotion/core';
-import { colors, misc, spacing } from '@ndla/core';
-
-var TreeStructureWrapper = _styled("div", {
-  target: "ez53f4u0",
-  label: "TreeStructureWrapper"
-})("padding:", spacing.xsmall, ";", function (_ref) {
-  var framed = _ref.framed;
-  return framed && /*#__PURE__*/css("border:1px solid ", colors.brand.neutral7, ";border-radius:", misc.borderRadius, ";max-height:400px;overflow-y:scroll;scroll-behavior:smooth;padding:", spacing.small, ";;label:TreeStructureWrapper;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyZWVTdHJ1Y3R1cmVXcmFwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQk8iLCJmaWxlIjoiVHJlZVN0cnVjdHVyZVdyYXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCB7IGNvbG9ycywgbWlzYywgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5jb25zdCBUcmVlU3RydWN0dXJlV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBmcmFtZWQ/OiBib29sZWFuIH0+YFxuICBwYWRkaW5nOiAke3NwYWNpbmcueHNtYWxsfTtcbiAgJHsoeyBmcmFtZWQgfSkgPT5cbiAgICBmcmFtZWQgJiZcbiAgICBjc3NgXG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5uZXV0cmFsN307XG4gICAgICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgICAgIG1heC1oZWlnaHQ6IDQwMHB4O1xuICAgICAgb3ZlcmZsb3cteTogc2Nyb2xsO1xuICAgICAgc2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG4gICAgICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9O1xuICAgIGB9XG4gIHRyYW5zaXRpb246ICR7bWlzYy50cmFuc2l0aW9uLmRlZmF1bHR9O1xuICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgYm9yZGVyLWNvbG9yOiAke2NvbG9ycy5icmFuZC5wcmltYXJ5fTtcbiAgfVxuYDtcblxuZXhwb3J0IGRlZmF1bHQgVHJlZVN0cnVjdHVyZVdyYXBwZXI7XG4iXX0= */"));
-}, " transition:", misc.transition["default"], ";&:focus-within{border-color:", colors.brand.primary, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyZWVTdHJ1Y3R1cmVXcmFwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZNkQiLCJmaWxlIjoiVHJlZVN0cnVjdHVyZVdyYXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCB7IGNvbG9ycywgbWlzYywgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5jb25zdCBUcmVlU3RydWN0dXJlV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBmcmFtZWQ/OiBib29sZWFuIH0+YFxuICBwYWRkaW5nOiAke3NwYWNpbmcueHNtYWxsfTtcbiAgJHsoeyBmcmFtZWQgfSkgPT5cbiAgICBmcmFtZWQgJiZcbiAgICBjc3NgXG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5uZXV0cmFsN307XG4gICAgICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgICAgIG1heC1oZWlnaHQ6IDQwMHB4O1xuICAgICAgb3ZlcmZsb3cteTogc2Nyb2xsO1xuICAgICAgc2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG4gICAgICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9O1xuICAgIGB9XG4gIHRyYW5zaXRpb246ICR7bWlzYy50cmFuc2l0aW9uLmRlZmF1bHR9O1xuICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgYm9yZGVyLWNvbG9yOiAke2NvbG9ycy5icmFuZC5wcmltYXJ5fTtcbiAgfVxuYDtcblxuZXhwb3J0IGRlZmF1bHQgVHJlZVN0cnVjdHVyZVdyYXBwZXI7XG4iXX0= */"));
-
-export default TreeStructureWrapper;